From 721816008dde1647c80e7ad4645e08a234386c02 Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Sat, 8 Sep 2012 21:19:25 -0500 Subject: [PATCH] added gray colors, improved the pen tool --- editor/path.js | 4 +- editor/svg-editor.css | 6 +- editor/svg-editor.js | 22 ++- editor/svgcanvas.js | 3 +- editor/svgedit.compiled.css | 3 +- editor/svgedit.compiled.js | 234 +++++++++++++++---------------- editor/temp.css | 6 +- method-draw/path.js | 4 +- method-draw/svg-editor.css | 6 +- method-draw/svg-editor.js | 22 ++- method-draw/svgcanvas.js | 3 +- method-draw/svgedit.compiled.css | 3 +- method-draw/svgedit.compiled.js | 234 +++++++++++++++---------------- method-draw/temp.css | 6 +- 14 files changed, 288 insertions(+), 268 deletions(-) diff --git a/editor/path.js b/editor/path.js index d88dab6..ff6b3c8 100644 --- a/editor/path.js +++ b/editor/path.js @@ -314,6 +314,7 @@ svgedit.path.getSegSelector = function(seg, update) { 'display': 'none', 'fill': "none", 'stroke': "#0ff", + 'stroke-opacity': 1, "shape-rendering": "crispEdges", 'stroke-width': 2, 'style':'pointer-events:none', @@ -429,7 +430,8 @@ svgedit.path.Segment.prototype.show = function(y) { svgedit.path.Segment.prototype.select = function(y) { if(this.ptgrip) { - this.ptgrip.setAttribute("stroke", y ? "#0FF" : "#00F"); + this.ptgrip.setAttribute("stroke", y ? "#4F80FF" : "#4F80FF"); + this.ptgrip.setAttribute("fill", y ? "#4F80FF" : "#fff"); this.segsel.setAttribute("display", y ? "inline" : "none"); if(this.ctrlpts) { this.selectCtrls(y); diff --git a/editor/svg-editor.css b/editor/svg-editor.css index 1667cdd..d1c226e 100644 --- a/editor/svg-editor.css +++ b/editor/svg-editor.css @@ -287,7 +287,7 @@ html, body { .palette_item { height: 20%; - width: 5.4%; + width: 5.2%; float: left; cursor: url(images/eyedropper.png) 0 16, crosshair; } @@ -1872,6 +1872,10 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1), cursor: -moz-grab; } +.draginput input[type="checkbox"], .draginput input[type="checkbox"]:hover, .draginput input[type="checkbox"]:active { + cursor: default; +} + .draginput.active input, .draginput.active input:hover, .draginput.active input:active { cursor: url(images/dragging.png), move; cursor: -webkit-grabbing; diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 552d3ec..2e02a2f 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -330,25 +330,25 @@ Editor.canvas = svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"), curConfig); Editor.show_save_warning = false; Editor.paintBox = {fill: null, stroke:null, canvas:null}; - var palette = ["#482816", "#422C10", "#3B2F0E", "#32320F", + var palette = ["#444444", "#482816", "#422C10", "#3B2F0E", "#32320F", "#293414", "#1F361B", "#153723", "#0C372C", "#083734", "#0E353B", "#1A333F", "#273141", "#332D40", "#3E2A3C", "#462735", "#4B252D", - "#4D2425", "#4C261D", "#845335", "#7B572D", + "#4D2425", "#4C261D", "#666666", "#845335", "#7B572D", "#6F5C2A", "#62612C", "#546433", "#46673D", "#396849", "#306856", "#2D6862", "#33666C", "#426373", "#535F75", "#645A73", "#74556D", "#805064", "#884D58", "#8B4D4B", "#894F3F", - "#C48157", "#B8874D", "#A98E49", "#97944B", + "#999999", "#C48157", "#B8874D", "#A98E49", "#97944B", "#849854", "#729C62", "#619E73", "#559E84", "#529D94", "#5B9BA2", "#6D97AB", "#8391AE", "#9A8AAB", "#AF84A3", "#BF7E96", "#C97A86", - "#CE7975", "#CC7C65", "#FFB27C", "#FABA6F", + "#CE7975", "#CC7C65", "#BBBBBB", "#FFB27C", "#FABA6F", "#E6C36A", "#CFCA6D", "#B8D078", "#A0D58A", "#8CD79F", "#7DD8B5", "#7AD6CA", "#84D3DB", "#9ACEE6", "#B6C7EA", "#D3BEE7", "#EDB6DC", "#FFAFCC", "#FFAAB8", "#FFA9A2", "#FFAC8D", - "#FFE7A2", "#FFF093", "#FFFA8D", "#FFFF91", + "#DDDDDD", "#FFE7A2", "#FFF093", "#FFFA8D", "#FFFF91", "#EEFF9F", "#D1FFB4", "#B9FFCE", "#A8FFE9", "#A4FFFF", "#B1FFFF", "#CBFFFF", "#EDFFFF", "#FFF5FF", "#FFEBFF", "#FFE2FF", "#FFDCEC", @@ -2183,13 +2183,16 @@ svgCanvas.setMode('path'); } }; - + console.log(path.getNodePoint()); // Delete is a contextual tool that only appears in the ribbon if // an element has been selected var deleteSelected = function() { if (selectedElement != null || multiselected) { svgCanvas.deleteSelectedElements(); } + if (path.getNodePoint()) { + path.deletePathNode(); + } }; var cutSelected = function() { @@ -2290,12 +2293,7 @@ }; var linkControlPoints = function() { - var linked = !$('#tool_node_link').hasClass('checked'); - if (linked) - $('#tool_node_link').addClass('checked').find("input").attr("checked", true); - else - $('#tool_node_link').removeClass('checked').find("input").attr("checked", false); - + var linked = !$('#tool_node_link').hasClass('checked'); path.linkControlPoints(linked); } diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index cda5b0e..f3a6aaa 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -4682,6 +4682,7 @@ var pathActions = canvas.pathActions = function() { } }, getNodePoint: function() { + if (!svgedit.path.path) return; var sel_pt = svgedit.path.path.selected_pts.length ? svgedit.path.path.selected_pts[0] : 1; var seg = svgedit.path.path.segs[sel_pt]; @@ -4886,7 +4887,7 @@ var pathActions = canvas.pathActions = function() { // Completely delete a path with 1 or 0 segments if(svgedit.path.path.elem.pathSegList.numberOfItems <= 1) { - pathActions.toSelectMode(svgedit.path.path.elem); + canvas.setMode("select") canvas.deleteSelectedElements(); return; } diff --git a/editor/svgedit.compiled.css b/editor/svgedit.compiled.css index b8ce20b..696e45a 100644 --- a/editor/svgedit.compiled.css +++ b/editor/svgedit.compiled.css @@ -131,7 +131,7 @@ html,body{overflow:hidden;width:100%;height:100%} #ruler_y canvas{margin-top:-16px} #ruler_x>div,#ruler_y>div{overflow:hidden} #palette{display:block;position:absolute;z-index:2;left:10px;bottom:5px;width:410px;right:145px;height:30px} -.palette_item{height:20%;width:5.4%;float:left;cursor:url(images/eyedropper.png) 0 16,crosshair} +.palette_item{height:20%;width:5.2%;float:left;cursor:url(images/eyedropper.png) 0 16,crosshair} .palette_item.transparent,.palette_item.white,.palette_item.black{background:#fff;position:absolute;width:10px;height:10px;left:-10px;top:0} .palette_item.transparent{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAVdEVYdENyZWF0aW9uIFRpbWUAOC8yMi8xMg1cp6sAAABESURBVBiVjdBBCgAgCETRr/e/87SJKFPLnfIcQRMIwMBIShIAvgZzoSrfkzrs8WyF1+kX9r3p8AE7nL7kSpSshN+JEQ8GixkF0mSevgAAAABJRU5ErkJggg==)} .palette_item.black{background:#000;top:10px} @@ -381,6 +381,7 @@ button.cancel,input.Cancel,input.cancel,input.jGraduate_Cancel,button.cancel{-we #preview_font{font-size:20px;color:#fff;height:70px;line-height:75px;padding:0 0 0 10px;white-space:nowrap;width:100px;overflow:hidden;border-right:solid #2f2f2c 2px;position:relative} #preview_font:after{content:'';position:absolute;right:0;top:3px;bottom:3px;width:15px;border-right:solid #3f3f3c 10px;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==)} .draginput input,.draginput input:hover,.draginput input:active{cursor:url(images/drag.png),move;cursor:-webkit-grab;cursor:-moz-grab} +.draginput input[type="checkbox"],.draginput input[type="checkbox"]:hover,.draginput input[type="checkbox"]:active{cursor:default} .draginput.active input,.draginput.active input:hover,.draginput.active input:active{cursor:url(images/dragging.png),move;cursor:-webkit-grabbing;cursor:-moz-grabbing} .draginput span{font:11px/130% sans-serif;color:#ccc;display:block;position:absolute;top:5px;left:5px;text-align:left} .draginput.error{background:#900} diff --git a/editor/svgedit.compiled.js b/editor/svgedit.compiled.js index 0dc9fc2..6e95a64 100644 --- a/editor/svgedit.compiled.js +++ b/editor/svgedit.compiled.js @@ -173,25 +173,25 @@ C=u.appendChild(C);$("#pathpointgrip_"+f).dblclick(function(){svgedit.path.path& svgedit.utilities.getElem("ctrlLine_"+f);if(c)return c;c=document.createElementNS("http://www.w3.org/2000/svg","line");svgedit.utilities.assignAttributes(c,{id:"ctrlLine_"+f,stroke:"#4F80FF","stroke-width":1,style:"pointer-events:none"});svgedit.path.getGripContainer().appendChild(c);return c};svgedit.path.getPointGrip=function(f,c){var m=svgedit.path.addPointGrip(f.index);if(c){var u=svgedit.path.getGripPt(f);svgedit.utilities.assignAttributes(m,{x:u.x-(svgedit.browser.isTouch()?15:2.5),y:u.y-(svgedit.browser.isTouch()? 15:2.5),display:"inline"})}return m};svgedit.path.getControlPoints=function(f){var c=f.item,m=f.index;if(!("x1"in c)||!("x2"in c))return null;var u={};svgedit.path.getGripContainer();for(var C=[svgedit.path.path.segs[m-1].item,c],s=1;s<3;s++){var L=m+"c"+s,Q=u["c"+s+"_line"]=svgedit.path.getCtrlLine(L),K=svgedit.path.getGripPt(f,{x:c["x"+s],y:c["y"+s]}),I=svgedit.path.getGripPt(f,{x:C[s-1].x,y:C[s-1].y});svgedit.utilities.assignAttributes(Q,{x1:K.x,y1:K.y,x2:I.x,y2:I.y,display:"inline"});u["c"+s+ "_line"]=Q;pointGrip=u["c"+s]=svgedit.path.addCtrlGrip(L);svgedit.utilities.assignAttributes(pointGrip,{cx:K.x,cy:K.y,display:"inline"});u["c"+s]=pointGrip}return u};svgedit.path.replacePathSeg=function(f,c,m,u){u=u||svgedit.path.path.elem;f=u["createSVGPathSeg"+g[f]].apply(u,m);if(svgedit.browser.supportsPathReplaceItem())u.pathSegList.replaceItem(f,c);else{m=u.pathSegList;u=m.numberOfItems;for(var C=[],s=0;s0){f=Q element";this.elem=f;this.segs=[];this.selected_pts=[];svgedit.path.path=this;this.init()};svgedit.path.Path.prototype.init=function(){$(svgedit.path.getGripContainer()).find("*").attr("display","none");var f=this.elem.pathSegList,c=f.numberOfItems;this.segs=[];this.selected_pts=[];this.first_seg=null;for(var m=0;m=c?null:f[m+1],L=m-1<0?null:f[m-1];if(C.type===2){if(L&&L.type!==1){s=f[u];s.next=f[u+1];s.next.prev=s;s.addGrip()}u=m}else if(s&&s.type===1){C.next=f[u+1];C.next.prev=C;C.mate=f[u];C.addGrip();if(this.first_seg==null)this.first_seg=C}else if(s){if(C.type!==1){C.addGrip();if(s&&s.type!==2){C.next=s;C.next.prev=C}}}else if(C.type!==1){s=f[u];s.next=f[u+1];s.next.prev=s;s.addGrip();C.addGrip();if(!this.first_seg)this.first_seg= -f[u]}}return this};svgedit.path.Path.prototype.eachSeg=function(f){for(var c=this.segs.length,m=0;m element";this.elem=f;this.segs=[];this.selected_pts=[];svgedit.path.path=this;this.init()};svgedit.path.Path.prototype.init=function(){$(svgedit.path.getGripContainer()).find("*").attr("display","none");var f=this.elem.pathSegList,c=f.numberOfItems;this.segs=[];this.selected_pts=[];this.first_seg=null; +for(var m=0;m=c?null:f[m+1],L=m-1<0?null:f[m-1];if(C.type===2){if(L&&L.type!==1){s=f[u];s.next=f[u+1];s.next.prev=s;s.addGrip()}u=m}else if(s&&s.type===1){C.next=f[u+1];C.next.prev=C;C.mate=f[u];C.addGrip();if(this.first_seg==null)this.first_seg=C}else if(s){if(C.type!==1){C.addGrip();if(s&&s.type!==2){C.next=s;C.next.prev=C}}}else if(C.type!==1){s=f[u];s.next= +f[u+1];s.next.prev=s;s.addGrip();C.addGrip();if(!this.first_seg)this.first_seg=f[u]}}return this};svgedit.path.Path.prototype.eachSeg=function(f){for(var c=this.segs.length,m=0;m0){w=k.getItem(n-1).pathSegType;if(w===2){o(n-1,1);F();break}else if(w=== -1&&k.numberOfItems-1===n){o(n,1);F();break}}}return false};F();if(svgedit.path.path.elem.pathSegList.numberOfItems<=1){La.toSelectMode(svgedit.path.path.elem);d.deleteSelectedElements()}else{svgedit.path.path.init();svgedit.path.path.clearSelection();if(window.opera){D=$(svgedit.path.path.elem);D.attr("d",D.attr("d"))}svgedit.path.path.endChanges("Delete path node(s)")}}},smoothPolylineIntoPath:function(D){var z=D.points,F=z.numberOfItems;if(F>=4){var k=z.getItem(0),n=null;D=[];D.push(["M",k.x,",", -k.y," C"].join(""));for(var o=1;o<=F-4;o+=3){var w=z.getItem(o),E=z.getItem(o+1),H=z.getItem(o+2);if(n)if((k=svgedit.path.smoothControlPoints(n,w,k))&&k.length==2){w=D[D.length-1].split(",");w[2]=k[0].x;w[3]=k[0].y;D[D.length-1]=w.join(",");w=k[1]}D.push([w.x,w.y,E.x,E.y,H.x,H.y].join(","));k=H;n=E}for(D.push("L");o0;); -La.clear(true);$.each(m.childNodes,function(l,B){l&&B.nodeType===8&&B.data.indexOf("Created with")>=0&&m.insertBefore(B,m.firstChild)});if(L){Eb();rb([L])}$("#canvasGrid").attr("display","none");var e=[];$(m).find("g:data(gsvg)").each(function(){for(var l=this.attributes,B=l.length,A=0;A= -0;F--){z=D.item(F);o=B(z.nodeValue);if(!(w.indexOf(z.localName)>=0))if(o!="")if(o.indexOf("pointer-events")!==0)if(!(z.localName==="class"&&o.indexOf("se_")===0)){l.push(" ");if(z.localName==="d")o=La.convertPath(e,true);if(isNaN(o)){if(G.test(o))o=svgedit.units.shortFloat(o)+A}else o=svgedit.units.shortFloat(o);if($a.apply&&e.nodeName==="image"&&z.localName==="href"&&$a.images&&$a.images==="embed"){var E=Va[o];if(E)o=E}if(!z.namespaceURI||z.namespaceURI==b||ya[z.namespaceURI]){l.push(z.nodeName); -l.push('="');l.push(o);l.push('"')}}}}if(e.hasChildNodes()){l.push(">");h++;D=false;for(F=0;F");break;case 8:l.push("\n");l.push(Array(h+1).join(" "));l.push("