npm run build

dist/editor/embedapi.js

@@ -362,7 +362,7 @@ class EmbeddedSVGEdit {
         let sameOriginWithGlobal = false;
         try {
           sameOriginWithGlobal = window.location.origin === that.frame.contentWindow.location.origin &&
-            that.frame.contentWindow.svgEditor.canvas;
+            that.frame.contentWindow.svgEditor.svgCanvas;
         } catch (err) {}
 
         if (sameOriginWithGlobal) {

dist/editor/extensions/ext-closepath/ext-closepath.js

@@ -6,5 +6,5 @@ var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?windo
  *
  * @copyright 2010 Jeff Schiller
  *
- */var qn=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return $n}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),Hn={name:"closepath",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c,u,f;return regeneratorRuntime.wrap((function _callee2$(s){for(;;)switch(s.prev=s.next){case 0:return t.importLocale,r=t.$,n=e,s.next=4,qn(n.pref("lang"));case 4:return o=s.sent,a=function updateButton(t){var e=t.pathSegList,n=1===e.getItem(e.numberOfItems-1).pathSegType,o=n?"#tool_openpath":"#tool_closepath";r(n?"#tool_closepath":"#tool_openpath").hide(),r(o).show()},c=function showPanel(t){if(r("#closepath_panel").toggle(t),t){var e=i[0];e&&a(e)}},u=function toggleClosed(){var t=i[0];if(t){var e=t.pathSegList,r=e.numberOfItems-1;1===e.getItem(r).pathSegType?e.removeItem(r):e.appendItem(t.createSVGPathSegClosePath()),a(t)}},f=[{id:"tool_openpath",icon:"openpath.png",type:"context",panel:"closepath_panel",events:{click:function click(){u()}}},{id:"tool_closepath",icon:"closepath.png",type:"context",panel:"closepath_panel",events:{click:function click(){u()}}}],s.abrupt("return",{name:o.name,svgicons:"closepath_icons.svg",buttons:o.buttons.map((function(t,e){return Object.assign(f[e],t)})),callback:function callback(){r("#closepath_panel").hide()},selectedChanged:function selectedChanged(t){for(var e=(i=t.elems).length;e--;){var r=i[e];r&&"path"===r.tagName&&t.selectedElement&&!t.multiselected?c(!0):c(!1)}}});case 10:case"end":return s.stop()}}),_callee2)})))()}},$n=Object.freeze({__proto__:null,default:{name:"ClosePath",buttons:[{title:"Open path"},{title:"Close path"}]}}),Jn=Object.freeze({__proto__:null,default:{name:"闭合路径",buttons:[{title:"打开路径"},{title:"关闭路径"}]}});export default Hn;
+ */var qn=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return $n}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),Hn={name:"closepath",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c,u,f;return regeneratorRuntime.wrap((function _callee2$(s){for(;;)switch(s.prev=s.next){case 0:return t.importLocale,r=t.$,n=e,s.next=4,qn(n.configObj.pref("lang"));case 4:return o=s.sent,a=function updateButton(t){var e=t.pathSegList,n=1===e.getItem(e.numberOfItems-1).pathSegType,o=n?"#tool_openpath":"#tool_closepath";r(n?"#tool_closepath":"#tool_openpath").hide(),r(o).show()},c=function showPanel(t){if(r("#closepath_panel").toggle(t),t){var e=i[0];e&&a(e)}},u=function toggleClosed(){var t=i[0];if(t){var e=t.pathSegList,r=e.numberOfItems-1;1===e.getItem(r).pathSegType?e.removeItem(r):e.appendItem(t.createSVGPathSegClosePath()),a(t)}},f=[{id:"tool_openpath",icon:"openpath.png",type:"context",panel:"closepath_panel",events:{click:function click(){u()}}},{id:"tool_closepath",icon:"closepath.png",type:"context",panel:"closepath_panel",events:{click:function click(){u()}}}],s.abrupt("return",{name:o.name,svgicons:"closepath_icons.svg",buttons:o.buttons.map((function(t,e){return Object.assign(f[e],t)})),callback:function callback(){r("#closepath_panel").hide()},selectedChanged:function selectedChanged(t){for(var e=(i=t.elems).length;e--;){var r=i[e];r&&"path"===r.tagName&&t.selectedElement&&!t.multiselected?c(!0):c(!1)}}});case 10:case"end":return s.stop()}}),_callee2)})))()}},$n=Object.freeze({__proto__:null,default:{name:"ClosePath",buttons:[{title:"Open path"},{title:"Close path"}]}}),Jn=Object.freeze({__proto__:null,default:{name:"闭合路径",buttons:[{title:"打开路径"},{title:"关闭路径"}]}});export default Hn;
 //# sourceMappingURL=ext-closepath.js.map

dist/editor/extensions/ext-eyedropper/ext-eyedropper.js

@@ -6,5 +6,5 @@ var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?windo
  *
  * @copyright 2010 Jeff Schiller
  *
- */var Jn=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return Qn}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),Kn={name:"eyedropper",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c,u,f,s;return regeneratorRuntime.wrap((function _callee2$(l){for(;;)switch(l.prev=l.next){case 0:return f=function _getStyle(t){if("eyedropper"!==a.getMode()){var e=o("#tool_eyedropper"),r=null;t.multiselected||!t.elems[0]||["svg","g","use"].includes(t.elems[0].nodeName)?e.addClass("disabled"):(r=t.elems[0],e.removeClass("disabled"),u.fillPaint=r.getAttribute("fill")||"black",u.fillOpacity=r.getAttribute("fill-opacity")||1,u.strokePaint=r.getAttribute("stroke"),u.strokeOpacity=r.getAttribute("stroke-opacity")||1,u.strokeWidth=r.getAttribute("stroke-width"),u.strokeDashArray=r.getAttribute("stroke-dasharray"),u.strokeLinecap=r.getAttribute("stroke-linecap"),u.strokeLinejoin=r.getAttribute("stroke-linejoin"),u.opacity=r.getAttribute("opacity")||1)}},r=e,l.next=4,Jn(r.pref("lang"));case 4:return n=l.sent,o=t.$,i=t.ChangeElementCommand,a=r.canvas,c=function addToHistory(t){a.undoMgr.addCommandToHistory(t)},u={fillPaint:"red",fillOpacity:1,strokePaint:"black",strokeOpacity:1,strokeWidth:5,strokeDashArray:null,opacity:1,strokeLinecap:"butt",strokeLinejoin:"miter"},s=[{id:"tool_eyedropper",type:"mode",events:{click:function click(){a.setMode("eyedropper")}}}],l.abrupt("return",{name:n.name,newUI:!0,buttons:n.buttons.map((function(t,e){return Object.assign(s[e],t)})),selectedChanged:f,elementChanged:f,mouseDown:function mouseDown(t){if("eyedropper"===a.getMode()){var e=t.event.target;if(!["svg","g","use"].includes(e.nodeName)){var r={},n=function change(t,e,n){r[e]=t.getAttribute(e),t.setAttribute(e,n)};u.fillPaint&&n(e,"fill",u.fillPaint),u.fillOpacity&&n(e,"fill-opacity",u.fillOpacity),u.strokePaint&&n(e,"stroke",u.strokePaint),u.strokeOpacity&&n(e,"stroke-opacity",u.strokeOpacity),u.strokeWidth&&n(e,"stroke-width",u.strokeWidth),u.strokeDashArray&&n(e,"stroke-dasharray",u.strokeDashArray),u.opacity&&n(e,"opacity",u.opacity),u.strokeLinecap&&n(e,"stroke-linecap",u.strokeLinecap),u.strokeLinejoin&&n(e,"stroke-linejoin",u.strokeLinejoin),c(new i(e,r))}}}});case 8:case"end":return l.stop()}}),_callee2)})))()}},Qn=Object.freeze({__proto__:null,default:{name:"eyedropper",buttons:[{title:"Eye Dropper Tool",key:"I"}]}}),Xn=Object.freeze({__proto__:null,default:{name:"滴管",buttons:[{title:"滴管工具",key:"I"}]}});export default Kn;
+ */var Jn=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return Qn}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),Kn={name:"eyedropper",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c,u,f,s;return regeneratorRuntime.wrap((function _callee2$(l){for(;;)switch(l.prev=l.next){case 0:return f=function _getStyle(t){if("eyedropper"!==a.getMode()){var e=o("#tool_eyedropper"),r=null;t.multiselected||!t.elems[0]||["svg","g","use"].includes(t.elems[0].nodeName)?e.addClass("disabled"):(r=t.elems[0],e.removeClass("disabled"),u.fillPaint=r.getAttribute("fill")||"black",u.fillOpacity=r.getAttribute("fill-opacity")||1,u.strokePaint=r.getAttribute("stroke"),u.strokeOpacity=r.getAttribute("stroke-opacity")||1,u.strokeWidth=r.getAttribute("stroke-width"),u.strokeDashArray=r.getAttribute("stroke-dasharray"),u.strokeLinecap=r.getAttribute("stroke-linecap"),u.strokeLinejoin=r.getAttribute("stroke-linejoin"),u.opacity=r.getAttribute("opacity")||1)}},r=e,l.next=4,Jn(r.configObj.pref("lang"));case 4:return n=l.sent,o=t.$,i=t.ChangeElementCommand,a=r.svgCanvas,c=function addToHistory(t){a.undoMgr.addCommandToHistory(t)},u={fillPaint:"red",fillOpacity:1,strokePaint:"black",strokeOpacity:1,strokeWidth:5,strokeDashArray:null,opacity:1,strokeLinecap:"butt",strokeLinejoin:"miter"},s=[{id:"tool_eyedropper",type:"mode",events:{click:function click(){a.setMode("eyedropper")}}}],l.abrupt("return",{name:n.name,newUI:!0,buttons:n.buttons.map((function(t,e){return Object.assign(s[e],t)})),selectedChanged:f,elementChanged:f,mouseDown:function mouseDown(t){if("eyedropper"===a.getMode()){var e=t.event.target;if(!["svg","g","use"].includes(e.nodeName)){var r={},n=function change(t,e,n){r[e]=t.getAttribute(e),t.setAttribute(e,n)};u.fillPaint&&n(e,"fill",u.fillPaint),u.fillOpacity&&n(e,"fill-opacity",u.fillOpacity),u.strokePaint&&n(e,"stroke",u.strokePaint),u.strokeOpacity&&n(e,"stroke-opacity",u.strokeOpacity),u.strokeWidth&&n(e,"stroke-width",u.strokeWidth),u.strokeDashArray&&n(e,"stroke-dasharray",u.strokeDashArray),u.opacity&&n(e,"opacity",u.opacity),u.strokeLinecap&&n(e,"stroke-linecap",u.strokeLinecap),u.strokeLinejoin&&n(e,"stroke-linejoin",u.strokeLinejoin),c(new i(e,r))}}}});case 8:case"end":return l.stop()}}),_callee2)})))()}},Qn=Object.freeze({__proto__:null,default:{name:"eyedropper",buttons:[{title:"Eye Dropper Tool",key:"I"}]}}),Xn=Object.freeze({__proto__:null,default:{name:"滴管",buttons:[{title:"滴管工具",key:"I"}]}});export default Kn;
 //# sourceMappingURL=ext-eyedropper.js.map

dist/editor/extensions/ext-grid/ext-grid.js

@@ -6,5 +6,5 @@ var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?windo
  *
  * @copyright 2010 Redou Mine, 2010 Alexis Deveria
  *
- */var Wn=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return Hn}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),Bn={name:"grid",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c,u,f,s,l,p,h,y,v,d,g,m,b,w,S;return regeneratorRuntime.wrap((function _callee2$(O){for(;;)switch(O.prev=O.next){case 0:return S=function _gridUpdate(){y&&w(c.getZoom()),r("#canvasGrid").toggle(y),document.getElementById("view_grid").pressed=y},w=function _updateGrid(t){var e=p[i.curConfig.baseUnit]*t,r=100/e,n=1;h.some((function(t){return n=t,r<=t}));var o=n*e;s.width=o,s.height=o;var a=s.getContext("2d"),u=.5,f=o/10;a.globalAlpha=.2,a.strokeStyle=i.curConfig.gridColor;for(var l=1;l<10;l++){var y=Math.round(f*l)+.5;a.moveTo(y,o),a.lineTo(y,0),a.moveTo(o,y),a.lineTo(0,y)}a.stroke(),a.beginPath(),a.globalAlpha=.5,a.moveTo(u,o),a.lineTo(u,0),a.moveTo(o,u),a.lineTo(0,u),a.stroke();var v=s.toDataURL("image/png");m.setAttribute("width",o),m.setAttribute("height",o),m.parentNode.setAttribute("width",o),m.parentNode.setAttribute("height",o),c.setHref(m,v)},r=t.$,n=t.NS,o=t.getTypeMap,i=e,O.next=6,Wn(i.pref("lang"));case 6:return a=O.sent,c=i.canvas,u=document.getElementById("svgcanvas").ownerDocument,f=c.assignAttributes,s=document.createElement("canvas"),l=r("#canvasBackground"),p=o(),h=[.01,.1,1,10,100,1e3],y=i.curConfig.showGrid||!1,r(s).hide().appendTo("body"),v=u.createElementNS(n.SVG,"svg"),f(v,{id:"canvasGrid",width:"100%",height:"100%",x:0,y:0,overflow:"visible",display:"none"}),l.append(v),d=u.createElementNS(n.SVG,"defs"),g=u.createElementNS(n.SVG,"pattern"),f(g,{id:"gridpattern",patternUnits:"userSpaceOnUse",x:0,y:0,width:100,height:100}),m=u.createElementNS(n.SVG,"image"),f(m,{x:0,y:0,width:100,height:100}),g.append(m),d.append(g),r("#canvasGrid").append(d),b=u.createElementNS(n.SVG,"rect"),f(b,{width:"100%",height:"100%",x:0,y:0,"stroke-width":0,stroke:"none",fill:"url(#gridpattern)",style:"pointer-events: none; display:visible;"}),r("#canvasGrid").append(b),O.abrupt("return",{name:a.name,zoomChanged:function zoomChanged(t){y&&w(t)},callback:function callback(){y&&S()},events:{id:"view_grid",click:function click(){i.curConfig.showGrid=y=!y,S()}}});case 26:case"end":return O.stop()}}),_callee2)})))()}},Hn=Object.freeze({__proto__:null,default:{name:"View Grid",buttons:[{title:"Show/Hide Grid"}]}}),Yn=Object.freeze({__proto__:null,default:{name:"网格视图",buttons:[{title:"显示/隐藏网格"}]}});export default Bn;
+ */var Wn=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return Hn}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),Bn={name:"grid",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c,u,f,s,l,p,h,y,v,d,g,m,b,w,S;return regeneratorRuntime.wrap((function _callee2$(O){for(;;)switch(O.prev=O.next){case 0:return S=function _gridUpdate(){y&&w(c.getZoom()),r("#canvasGrid").toggle(y),document.getElementById("view_grid").pressed=y},w=function _updateGrid(t){var e=p[i.configObj.curConfig.baseUnit]*t,r=100/e,n=1;h.some((function(t){return n=t,r<=t}));var o=n*e;s.width=o,s.height=o;var a=s.getContext("2d"),u=.5,f=o/10;a.globalAlpha=.2,a.strokeStyle=i.configObj.curConfig.gridColor;for(var l=1;l<10;l++){var y=Math.round(f*l)+.5;a.moveTo(y,o),a.lineTo(y,0),a.moveTo(o,y),a.lineTo(0,y)}a.stroke(),a.beginPath(),a.globalAlpha=.5,a.moveTo(u,o),a.lineTo(u,0),a.moveTo(o,u),a.lineTo(0,u),a.stroke();var v=s.toDataURL("image/png");m.setAttribute("width",o),m.setAttribute("height",o),m.parentNode.setAttribute("width",o),m.parentNode.setAttribute("height",o),c.setHref(m,v)},r=t.$,n=t.NS,o=t.getTypeMap,i=e,O.next=6,Wn(i.configObj.pref("lang"));case 6:return a=O.sent,c=i.svgCanvas,u=document.getElementById("svgcanvas").ownerDocument,f=c.assignAttributes,s=document.createElement("canvas"),l=r("#canvasBackground"),p=o(),h=[.01,.1,1,10,100,1e3],y=i.configObj.curConfig.showGrid||!1,r(s).hide().appendTo("body"),v=u.createElementNS(n.SVG,"svg"),f(v,{id:"canvasGrid",width:"100%",height:"100%",x:0,y:0,overflow:"visible",display:"none"}),l.append(v),d=u.createElementNS(n.SVG,"defs"),g=u.createElementNS(n.SVG,"pattern"),f(g,{id:"gridpattern",patternUnits:"userSpaceOnUse",x:0,y:0,width:100,height:100}),m=u.createElementNS(n.SVG,"image"),f(m,{x:0,y:0,width:100,height:100}),g.append(m),d.append(g),r("#canvasGrid").append(d),b=u.createElementNS(n.SVG,"rect"),f(b,{width:"100%",height:"100%",x:0,y:0,"stroke-width":0,stroke:"none",fill:"url(#gridpattern)",style:"pointer-events: none; display:visible;"}),r("#canvasGrid").append(b),O.abrupt("return",{name:a.name,zoomChanged:function zoomChanged(t){y&&w(t)},callback:function callback(){y&&S()},events:{id:"view_grid",click:function click(){i.configObj.curConfig.showGrid=y=!y,S()}}});case 26:case"end":return O.stop()}}),_callee2)})))()}},Hn=Object.freeze({__proto__:null,default:{name:"View Grid",buttons:[{title:"Show/Hide Grid"}]}}),Yn=Object.freeze({__proto__:null,default:{name:"网格视图",buttons:[{title:"显示/隐藏网格"}]}});export default Bn;
 //# sourceMappingURL=ext-grid.js.map

dist/editor/extensions/ext-shapes/ext-shapes.js

@@ -6,5 +6,5 @@
  * @copyright 2010 Christian Tzurcanu, 2010 Alexis Deveria
  *
  */
-var e={name:"shapes",init:function init(e){e.$;var t,a,n,s=this.canvas,o=s.getRootElem(),r={},i="shapelib",l={};return{events:{id:"tool_shapelib",click:function click(){s.setMode(i)}},callback:function callback(){},mouseDown:function mouseDown(e){if(s.getMode()===i){var o=document.getElementById("tool_shapelib").dataset.draw,c=a=e.start_x,m=n=e.start_y,u=s.getStyle();return l.x=e.event.clientX,l.y=e.event.clientY,(t=s.addSVGElementFromJson({element:"path",curStyles:!0,attr:{d:o,id:s.getNextId(),opacity:u.opacity/2,style:"pointer-events:none"}})).setAttribute("transform","translate("+c+","+m+") scale(0.005) translate("+-c+","+-m+")"),s.recalculateDimensions(t),s.getTransformList(t),r=t.getBBox(),{started:!0}}},mouseMove:function mouseMove(e){if(s.getMode()===i){var l=s.getZoom(),c=e.event,m=e.mouse_x/l,u=e.mouse_y/l,d=s.getTransformList(t),h=t.getBBox(),f=h.x,p=h.y,v=(Math.min(a,m),Math.min(n,u),Math.abs(m-a)),g=Math.abs(u-n),M=v/r.width||1,y=g/r.height||1,b=0;m<a&&(b=r.width);var x=0;u<n&&(x=r.height);var B=o.createSVGTransform(),S=o.createSVGTransform(),T=o.createSVGTransform();if(B.setTranslate(-(f+b),-(p+x)),!c.shiftKey){var _=Math.min(Math.abs(M),Math.abs(y));M=_*(M<0?-1:1),y=_*(y<0?-1:1)}S.setScale(M,y),T.setTranslate(f+b,p+x),d.appendItem(T),d.appendItem(S),d.appendItem(B),s.recalculateDimensions(t),r=t.getBBox()}},mouseUp:function mouseUp(e){if(s.getMode()===i)return{keep:e.event.clientX!==l.x&&e.event.clientY!==l.y,element:t,started:!1}}}}};export default e;
+var e={name:"shapes",init:function init(e){e.$;var t,a,n,s=this.svgCanvas,o=s.getRootElem(),r={},i="shapelib",l={};return{events:{id:"tool_shapelib",click:function click(){s.setMode(i)}},callback:function callback(){},mouseDown:function mouseDown(e){if(s.getMode()===i){var o=document.getElementById("tool_shapelib").dataset.draw,c=a=e.start_x,m=n=e.start_y,u=s.getStyle();return l.x=e.event.clientX,l.y=e.event.clientY,(t=s.addSVGElementFromJson({element:"path",curStyles:!0,attr:{d:o,id:s.getNextId(),opacity:u.opacity/2,style:"pointer-events:none"}})).setAttribute("transform","translate("+c+","+m+") scale(0.005) translate("+-c+","+-m+")"),s.recalculateDimensions(t),s.getTransformList(t),r=t.getBBox(),{started:!0}}},mouseMove:function mouseMove(e){if(s.getMode()===i){var l=s.getZoom(),c=e.event,m=e.mouse_x/l,u=e.mouse_y/l,d=s.getTransformList(t),h=t.getBBox(),f=h.x,p=h.y,v=(Math.min(a,m),Math.min(n,u),Math.abs(m-a)),g=Math.abs(u-n),M=v/r.width||1,y=g/r.height||1,b=0;m<a&&(b=r.width);var x=0;u<n&&(x=r.height);var B=o.createSVGTransform(),S=o.createSVGTransform(),T=o.createSVGTransform();if(B.setTranslate(-(f+b),-(p+x)),!c.shiftKey){var _=Math.min(Math.abs(M),Math.abs(y));M=_*(M<0?-1:1),y=_*(y<0?-1:1)}S.setScale(M,y),T.setTranslate(f+b,p+x),d.appendItem(T),d.appendItem(S),d.appendItem(B),s.recalculateDimensions(t),r=t.getBBox()}},mouseUp:function mouseUp(e){if(s.getMode()===i)return{keep:e.event.clientX!==l.x&&e.event.clientY!==l.y,element:t,started:!1}}}}};export default e;
 //# sourceMappingURL=ext-shapes.js.map

dist/editor/extensions/ext-webappfind/ext-webappfind.js

@@ -5,5 +5,5 @@ var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?windo
 * @author Brett Zamir
 * @license MIT
 * @todo See WebAppFind Readme for SVG-related todos
-*/var to=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return ro}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),eo={name:"webappfind",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c,u;return regeneratorRuntime.wrap((function _callee2$(f){for(;;)switch(f.prev=f.next){case 0:return r=t.$,n=e,f.next=4,to(n.pref("lang"));case 4:return o=f.sent,"read",a=["read",i="save"],e.canvas.bind("message",(function(t,e){var o,i,u=e.data,f=e.origin;try{var s=u.webappfind;if(o=s.type,c=s.pathID,i=s.content,f!==location.origin||a.includes(o))return}catch(t){return}switch(o){case"view":n.loadFromString(i);break;case"save-end":r.alert("save complete for pathID ".concat(c,"!"));break;default:throw new Error("Unexpected WebAppFind event type")}})),u=[{id:"webappfind_save",icon:"webappfind.png",type:"app_menu",position:4,events:{click:function click(){c&&window.postMessage({webappfind:{type:i,pathID:c,content:n.canvas.getSvgString()}},"null"===window.location.origin?"*":window.location.origin)}}}],f.abrupt("return",{name:o.name,svgicons:"webappfind-icon.svg",buttons:o.buttons.map((function(t,e){return Object.assign(u[e],t)}))});case 9:case"end":return f.stop()}}),_callee2)})))()}},ro=Object.freeze({__proto__:null,default:{name:"WebAppFind",buttons:[{title:"Save Image back to Disk"}]}}),no=Object.freeze({__proto__:null,default:{name:"WebAppFind",buttons:[{title:"保存图片到磁盘"}]}});export default eo;
+*/var to=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return ro}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),eo={name:"webappfind",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c;return regeneratorRuntime.wrap((function _callee2$(u){for(;;)switch(u.prev=u.next){case 0:return t.$,r=e,u.next=4,to(r.configObj.pref("lang"));case 4:return n=u.sent,"read",i=["read",o="save"],e.canvas.bind("message",(function(t,e){var n,o,c=e.data,u=e.origin;try{var f=c.webappfind;if(n=f.type,a=f.pathID,o=f.content,u!==location.origin||i.includes(n))return}catch(t){return}switch(n){case"view":r.loadFromString(o);break;case"save-end":alert("save complete for pathID ".concat(a,"!"));break;default:throw new Error("Unexpected WebAppFind event type")}})),c=[{id:"webappfind_save",icon:"webappfind.png",type:"app_menu",position:4,events:{click:function click(){a&&window.postMessage({webappfind:{type:o,pathID:a,content:r.svgCanvas.getSvgString()}},"null"===window.location.origin?"*":window.location.origin)}}}],u.abrupt("return",{name:n.name,svgicons:"webappfind-icon.svg",buttons:n.buttons.map((function(t,e){return Object.assign(c[e],t)}))});case 9:case"end":return u.stop()}}),_callee2)})))()}},ro=Object.freeze({__proto__:null,default:{name:"WebAppFind",buttons:[{title:"Save Image back to Disk"}]}}),no=Object.freeze({__proto__:null,default:{name:"WebAppFind",buttons:[{title:"保存图片到磁盘"}]}});export default eo;
 //# sourceMappingURL=ext-webappfind.js.map

dist/editor/images/anchor_end.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
+ <g class="layer">
+  <title>Layer 1</title>
+  <text fill="#000000" font-family="serif" font-size="9" id="svg_2" stroke="#000000" stroke-width="0" text-anchor="middle" x="12" xml:space="preserve" y="14.66667">abcd</text>
+  <line fill="none" id="svg_1" stroke="#ff7f00" stroke-width="2" x1="21.46429" x2="21.46429" y1="4.95685" y2="18.62351"/>
+ </g>
+</svg>

dist/editor/images/anchor_middle.svg

@@ -0,0 +1,8 @@
+ <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
+ <g class="layer">
+  <title>Layer 1</title>
+  <text fill="#000000" font-family="serif" font-size="9" id="svg_2" stroke="#000000" stroke-width="0" text-anchor="middle" x="12" xml:space="preserve" y="14.66667">abcd</text>
+  <line fill="none" id="svg_1" stroke="#ff7f00" stroke-width="2" x1="11.75" x2="11.75" y1="4.38542" y2="18.05208"/>
+ </g>
+</svg>

dist/editor/images/anchor_start.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
+ <g class="layer">
+  <title>Layer 1</title>
+  <text fill="#000000" font-family="serif" font-size="9" id="svg_2" stroke="#000000" stroke-width="0" text-anchor="middle" x="12" xml:space="preserve" y="14.66667">abcd</text>
+  <line fill="none" id="svg_1" stroke="#ff7f00" stroke-width="2" x1="1.5" x2="1.5" y1="5.63542" y2="19.30208"/>
+ </g>
+</svg>

dist/editor/images/library.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 211">
+ <g>
+  <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m2.75,49.51761l56.56,-46.26761c12.73,8.25 25.71001,7 46.44,0.75l-56.03999,47.23944l-22.72002,25.01056l-24.23999,-26.73239z" id="svg_2" stroke-width="7"/>
+  <path fill="#a03333" stroke="#3f3f3f" d="m3.75,203.25002c14.33301,7 30.66699,7 46,0l0,-152.00002c-14.66699,8 -32.33301,8 -47,0l1,152.00002zm45.75,-152.25002l56.25,-46.75l0,151l-56,48.00002m-47.25,-154.25002l57.25,-46.5" id="svg_1" stroke-width="7" stroke-linecap="round"/>
+  <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m49.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_5"/>
+  <path fill="#2f8e2f" stroke="#3f3f3f" d="m50.75,202.25c14.33301,7 30.66699,7.04253 46,0.04253l0,-151.04253c-14.66699,8 -32.33301,8 -47,0l1,151zm45.75,-151.25l56.25,-46.75l0,144.01219l-56,51.98782m-47.25,-151.25002l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_6"/>
+  <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m95.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_10"/>
+  <path fill="#336393" stroke="#3f3f3f" d="m96.75,200.29445c14.33301,7 30.66699,7 46,0l0,-149.04445c-14.66699,8 -32.33301,8 -47,0l1,149.04445zm45.75,-149.29445l56.25,-46.75l0,148.04445l-56,48m-47.25,-151.29445l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_11"/>
+ </g>
+</svg></svg>

dist/editor/index.html

@@ -74,19 +74,20 @@
         <div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s
         </div>
       </div>
-      <se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg">
+      <se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg" alt="logo">
         <!-- File-like buttons: New, Save, Source -->
         <se-menu-item id="tool_clear" label="New Image" shortcut="N" src="./images/new.svg"></se-menu-item>
         <se-menu-item id="tool_open" label="Open SVG" src="./images/open.svg"></se-menu-item>
         <se-menu-item id="tool_import" label="Import Image" src="./images/importImg.svg"></se-menu-item>
         <se-menu-item id="tool_save" label="Save Image" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
+        <se-menu-item id="tool_imagelib" label="Image library"  src="./images/library.svg"></se-menu-item>
         <se-menu-item id="tool_export" label="Export" src="./images/export.svg"></se-menu-item>
         <se-menu-item id="tool_docprops" label="Document Properties" shortcut="D" src="./images/docprop.svg"></se-menu-item>
         <se-menu-item id="tool_editor_prefs" label="Editor Preferences" src="./images/editPref.svg"></se-menu-item>
         <se-menu-item id="tool_editor_homepage" label="SVG-Edit Home Page" src="./images/svg-edit-home.svg"></se-menu-item>
         <div style="width:50%;margin:auto;">
           <a href="https://www.netlify.com">
-            <img style="height:25px;" src="https://www.netlify.com/img/global/badges/netlify-dark.svg"
+            <img style="height:25px;" src="./images/netlify-dark.svg"
               alt="Deploys by Netlify" />
           </a>
         </div>
@@ -126,15 +127,23 @@
             title="Change rotation angle"></se-spin-input>
           <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
             title="Change gaussian blur value"></se-spin-input>
+          <se-list>
+            <se-list-item id="tool_posleft">Align Left</se-list-item>
+            <se-list-item id="tool_poscenter">Align Center</se-list-item>
+            <se-list-item id="tool_posright">Align Right</se-list-item>
+            <se-list-item id="tool_postop">Align Top</se-list-item>
+            <se-list-item id="tool_posmiddle">Align Middle</se-list-item>
+            <se-list-item id="tool_posbottom">Align Bottom</se-list-item> 
+          </se-list>
           <div class="dropdown toolset" id="tool_position" title="Align Element to Page">
             <div id="cur_position" class="icon_label"></div>
             <button></button>
           </div>
           <div id="xy_panel" class="toolset">
-            <se-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate">
+            <se-spin-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate">
-            </se-input>
+            </se-spin-input>
-            <se-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate">
+            <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate">
-            </se-input>
+            </se-spin-input>
           </div>
         </div> <!-- selected_panel -->
         <!-- Buttons when multiple elements are selected -->
@@ -153,33 +162,30 @@
           <se-button id="tool_align_top" title="Align Top" src="./images/align_top.svg"></se-button>
           <se-button id="tool_align_middle" title="Align Middle" src="./images/align_middle.svg"></se-button>
           <se-button id="tool_align_bottom" title="Align Bottom" src="./images/align_bottom.svg"></se-button>
-          <label id="tool_align_relative">
+          <se-list id="tool_align_relative" label="relative to:">
-            <span id="relativeToLabel">relative to:</span>
+            <se-list-item id="selected_objects" value="selected">selected objects</se-list-item>
-            <select id="align_relative_to" title="Align relative to ...">
+            <se-list-item id="largest_object" value="largest">largest object</se-list-item>
-              <option id="selected_objects" value="selected">selected objects</option>
+            <se-list-item id="smallest_object" value="smallest">smallest object</se-list-item>
-              <option id="largest_object" value="largest">largest object</option>
+            <se-list-item id="page" value="page">page</se-list-item>
-              <option id="smallest_object" value="smallest">smallest object</option>
+          </se-list>
-              <option id="page" value="page">page</option>
-            </select>
-          </label>
           <div class="tool_sep"></div>
         </div> <!-- multiselected_panel -->
         <div id="rect_panel">
           <div class="toolset">
-            <se-input id="rect_width" data-attr="width" size="4" src="./images/width.svg"
+            <se-spin-input id="rect_width" data-attr="width" size="4" src="./images/width.svg"
-              title="Change rectangle width"></se-input>
+              title="Change rectangle width"></se-spin-input>
-            <se-input id="rect_height" data-attr="height" size="4" src="./images/height.svg"
+            <se-spin-input id="rect_height" data-attr="height" size="4" src="./images/height.svg"
-              title="Change rectangle height"></se-input>
+              title="Change rectangle height"></se-spin-input>
           </div>
           <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="Change Rectangle Corner Radius"
             data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
         </div> <!-- rect_panel -->
         <div id="image_panel">
           <div class="toolset">
-            <se-input id="image_width" data-attr="width" size="4" type="text" src="./images/width.svg"
+            <se-spin-input id="image_width" data-attr="width" size="4" type="text" src="./images/width.svg"
-              title="Change image width"></se-input>
+              title="Change image width"></se-spin-input>
-            <se-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg"
+            <se-spin-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg"
-              title="Change image height"></se-input>
+              title="Change image height"></se-spin-input>
           </div>
           <div class="toolset">
             <label id="tool_image_url">url:
@@ -194,66 +200,55 @@
         </div> <!-- image_panel -->
         <div id="circle_panel">
           <div class="toolset">
-            <se-input id="circle_cx" data-attr="cx" size="4" label="cx:"></se-input>
+            <se-spin-input id="circle_cx" data-attr="cx" size="4" label="cx:"></se-spin-input>
-            <se-input id="circle_cy" data-attr="cy" size="4" label="cy:"></se-input>
+            <se-spin-input id="circle_cy" data-attr="cy" size="4" label="cy:"></se-spin-input>
           </div>
           <div class="toolset">
-            <se-input id="circle_r" data-attr="r" size="4" label="r:"></se-input>
+            <se-spin-input id="circle_r" data-attr="r" size="4" label="r:"></se-spin-input>
           </div>
         </div> <!-- circle_panel -->
         <div id="ellipse_panel">
           <div class="toolset">
-            <se-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:">
+            <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:">
-            </se-input>
+            </se-spin-input>
-            <se-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:">
+            <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:">
-            </se-input>
+            </se-spin-input>
           </div>
           <div class="toolset">
-            <se-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx:"></se-input>
+            <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx:"></se-spin-input>
-            <se-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" label="ry:"></se-input>
+            <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" label="ry:"></se-spin-input>
           </div>
         </div> <!-- ellipse_panel -->
         <div id="line_panel">
           <div class="toolset">
-            <se-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:">
+            <se-spin-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:">
-            </se-input>
+            </se-spin-input>
-            <se-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:">
+            <se-spin-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:">
-            </se-input>
+            </se-spin-input>
-          </div>
+            <se-spin-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:">
-          <div class="toolset">
+            </se-spin-input>
-            <se-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:">
+            <se-spin-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:">
-            </se-input>
+            </se-spin-input>
-            <se-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:">
-            </se-input>
           </div>
         </div> <!-- line_panel -->
         <div id="text_panel">
           <div class="toolset">
-            <se-button id="tool_bold" size="small" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
+            <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
-            <se-button id="tool_italic" size="small" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
+            <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
-            <div class="tool_button" id="tool_text_anchor_start" title="Align the text in start"></div>
+            <se-button id="tool_text_anchor_start" title="Align the text from start" src="./images/anchor_start.svg"></se-button>
-            <div class="tool_button" id="tool_text_anchor_middle" title="Align the text in middle"></div>
+            <se-button id="tool_text_anchor_middle" title="Align the text from middle" src="./images/anchor_middle.svg"></se-button>
-            <div class="tool_button" id="tool_text_anchor_end" title="Align the text in end"></div>
+            <se-button id="tool_text_anchor_end" title="Align the text from end" src="./images/anchor_end.svg"></se-button>
-          </div>
-          <div class="toolset" id="tool_font_family">
-            <label>
-              <!-- Font family -->
-              <input id="font_family" type="text" title="Change Font Family" size="12" />
-            </label>
-            <div id="font_family_dropdown" class="dropdown">
-              <button></button>
-              <ul>
-                <li style="font-family:serif">Serif</li>
-                <li style="font-family:sans-serif">Sans-serif</li>
-                <li style="font-family:cursive">Cursive</li>
-                <li style="font-family:fantasy">Fantasy</li>
-                <li style="font-family:monospace">Monospace</li>
-                <li style="font-family:courier">Courier</li>
-                <li style="font-family:helvetica">Helvetica</li>
-                <li style="font-family:times">Times</li>
-              </ul>
-            </div>
           </div>
+          <se-list id="tool_font_family" label="Font:">
+            <se-list-item value="Sans-serif"> <div style="font-family:serif">Sans-serif</div></se-list-item>
+            <se-list-item value="Serif"> <div style="font-family:serif">Serif</div></se-list-item>
+            <se-list-item value="Cursive"> <div style="font-family:serif">Cursive</div></se-list-item>
+            <se-list-item value="Fantasy"> <div style="font-family:serif">Fantasy</div></se-list-item>
+            <se-list-item value="Monospace"> <div style="font-family:serif">Monospace</div></se-list-item>
+            <se-list-item value="Courier"> <div style="font-family:serif">Courier</div></se-list-item>
+            <se-list-item value="Helvetica"> <div style="font-family:serif">Helvetica</div></se-list-item>
+            <se-list-item value="Times"> <div style="font-family:serif">Times</div></se-list-item> 
+          </se-list>
           <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="Change Font Size"
             src="./images/fontsize.svg"></se-spin-input>
           <!-- Not visible, but still used -->
@@ -285,8 +280,8 @@
           <div class="tool_sep"></div>
           <se-button id="tool_node_link" title="Link Control Points" src="./images/tool_node_link.svg" pressed></se-button>
           <div class="tool_sep"></div>
-          <se-input id="path_node_x" data-attr="x" size="4" title="Change node's x coordinate" label="x:"></se-input>
+          <se-spin-input id="path_node_x" data-attr="x" size="4" title="Change node's x coordinate" label="x:"></se-spin-input>
-          <se-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:"></se-input>
+          <se-spin-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:"></se-spin-input>
           <select id="seg_type" title="Change Segment type">
             <option id="straight_segments" selected="selected" value="4">Straight</option>
             <option id="curve_segments" value="6">Curve</option>
@@ -331,7 +326,7 @@
       </div> <!-- tools_left -->
       <div id="tools_bottom">
         <!-- Zoom buttons -->
-        <se-dropdown id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
+        <se-zoom id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
           <div value="1000">1000</div>
           <div value="400">400</div>
           <div value="200">200</div>
@@ -342,98 +337,37 @@
           <div value="selection">Fit to selection</div>
           <div value="layer">Fit to layer content</div>
           <div value="content">Fit to all content</div>
-        </se-dropdown>
+        </se-zoom>
-        <div id="tool_fill">
+        <se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker>
-          <label for="fill_color" title="Change fill color"></label>
+        <se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke"></se-colorpicker>
-          <div class="color_block">
-            <div id="fill_bg"></div>
-            <div id="fill_color" class="color_block"></div>
-          </div>
-        </div> <!-- tool_fill -->
-        <div id="tool_stroke">
-          <label title="Change stroke color"></label>
-          <div class="color_block">
-            <div id="stroke_bg"></div>
-            <div id="stroke_color" class="color_block" title="Change stroke color" src="./images/fill.svg"></div>
-          </div>
-        </div>
         <se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width by 1" label=""></se-spin-input>
-        <label class="stroke_tool">
+        <se-list id="stroke_style" title="Change stroke dash style" label="">
-          <select id="stroke_style" title="Change stroke dash style">
+            <se-list-item value="none">&#8212;</se-list-item>
-            <option selected="selected" value="none">&#8212;</option>
+            <se-list-item value="2,2">...</se-list-item>
-            <option value="2,2">...</option>
+            <se-list-item value="5,5">- -</se-list-item>
-            <option value="5,5">- -</option>
+            <se-list-item value="5,2,2,2">- .</se-list-item>
-            <option value="5,2,2,2">- .</option>
+            <se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
-            <option value="5,2,2,2,2,2">- ..</option>
+        </se-list>
-          </select>
+        <se-list id="stroke_linejoin" title="Linejoin: Miter" label="">
-        </label>
+          <se-list-item id="linejoin_miter"><se-button size="small" title="Linejoin: Miter" src="./images/linejoin_miter.svg"></se-button></se-list-item>
-        <div class="stroke_tool dropdown" id="stroke_linejoin">
+          <se-list-item id="linejoin_round"><se-button size="small" title="Linejoin: Round" src="./images/linejoin_round.svg"></se-button></se-list-item>
-          <div id="cur_linejoin" title="Linejoin: Miter"></div>
+          <se-list-item id="linejoin_bevel"><se-button size="small" title="Linejoin: Bevel" src="./images/linejoin_bevel.svg"></se-button></se-list-item>  
-          <button></button>
+        </se-list>
-        </div>
+        <se-list id="stroke_linecap" title="Linecap: Butt" label="">
-        <div class="stroke_tool dropdown" id="stroke_linecap">
+          <se-list-item id="linecap_butt"><se-button size="small" title="Linecap: Butt" src="./images/linecap_butt.svg"></se-button></se-list-item>
-          <div id="cur_linecap" title="Linecap: Butt"></div>
+          <se-list-item id="linecap_square"><se-button size="small" title="Linecap: Square" src="./images/linecap_square.svg"></se-button></se-list-item>
-          <button></button>
+          <se-list-item id="linecap_round"><se-button size="small" title="Linecap: Round" src="./images/linecap_round.svg"></se-button></se-list-item>
-        </div>
+        </se-list>
-        <div id="tool_opacity">
+        <se-list id="opacity_dropdown" label="">
-          <se-spin-input size="3" id="group_opacity" min=0 max=100 step=5 title="Change selected item opacity" label=""></se-spin-input>
+          <se-list-item>0%</se-list-item>
-          <div id="opacity_dropdown" class="dropdown">
+          <se-list-item>25%</se-list-item>
-            <button></button>
+          <se-list-item>50%</se-list-item>
-            <ul>
+          <se-list-item>75%</se-list-item>
-              <li>0%</li>
+          <se-list-item>100%</se-list-item>
-              <li>25%</li>
+        </se-list>
-              <li>50%</li>
+        <se-spin-input size="3" id="group_opacity" min=0 max=100 step=5 title="Change selected item opacity" label=""></se-spin-input>
-              <li>75%</li>
-              <li>100%</li>
-              <li class="special">
-                <div id="opac_slider"></div>
-              </li>
-            </ul>
-          </div>
-        </div> <!-- tool_opacity -->
         <se-palette id="palette"></se-palette>
       </div> <!-- tools_bottom -->
-      <div id="option_lists" class="dropdown">
-        <ul id="linejoin_opts">
-          <li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
-          <li class="tool_button" id="linejoin_round" title="Linejoin: Round"></li>
-          <li class="tool_button" id="linejoin_bevel" title="Linejoin: Bevel"></li>
-        </ul>
-        <ul id="linecap_opts">
-          <li class="tool_button current" id="linecap_butt" title="Linecap: Butt"></li>
-          <li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
-          <li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
-        </ul>
-        <ul id="position_opts" class="optcols3">
-          <li class="push_button" id="tool_posleft" title="Align Left"></li>
-          <li class="push_button" id="tool_poscenter" title="Align Center"></li>
-          <li class="push_button" id="tool_posright" title="Align Right"></li>
-          <li class="push_button" id="tool_postop" title="Align Top"></li>
-          <li class="push_button" id="tool_posmiddle" title="Align Middle"></li>
-          <li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
-        </ul>
-      </div>
-      <!-- hidden divs -->
-      <div id="color_picker"></div>
-    </div> <!-- svg_editor -->
-    <div id="svg_source_editor">
-      <div class="overlay"></div>
-      <div id="svg_source_container">
-        <div id="tool_source_back" class="toolbar_button">
-          <button id="tool_source_save">Apply Changes</button>
-          <button id="tool_source_cancel">Cancel</button>
-        </div>
-        <div id="save_output_btns">
-          <p id="copy_save_note">
-            Copy the contents of this box into a text editor,
-            then save the file with a .svg extension.</p>
-          <button id="copy_save_done">Done</button>
-        </div>
-        <form>
-          <textarea id="svg_source_textarea" spellcheck="false"></textarea>
-        </form>
-      </div>
-    </div>
     <div id="dialog_box">
       <div class="overlay"></div>
       <div id="dialog_container">
@@ -441,26 +375,6 @@
         <div id="dialog_buttons"></div>
       </div>
     </div>
-    <ul id="cmenu_canvas" class="contextMenu">
-      <li><a href="#cut">Cut<span class="shortcut">META+X</span></a></li>
-      <li><a href="#copy">Copy<span class="shortcut">META+C</span></a></li>
-      <li><a href="#paste">Paste</a></li>
-      <li><a href="#paste_in_place">Paste in Place</a></li>
-      <li class="separator"><a href="#delete">Delete<span class="shortcut">BACKSPACE</span></a></li>
-      <li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li>
-      <li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li>
-      <li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">CTRL+SHFT+]</span></a></li>
-      <li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li>
-      <li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li>
-      <li><a href="#move_back">Send to Back<span class="shortcut">CTRL+SHFT+[</span></a></li>
-    </ul>
-    <ul id="cmenu_layers" class="contextMenu">
-      <li><a href="#dupe">Duplicate Layer...</a></li>
-      <li><a href="#delete">Delete Layer</a></li>
-      <li><a href="#merge_down">Merge Down</a></li>
-      <li><a href="#merge_all">Merge All</a></li>
-    </ul>
-
   </div>
 </body>
 

dist/editor/jgraduate/LICENSE-Apache2.0.txt

@@ -1,202 +0,0 @@
-
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.

dist/editor/jgraduate/README

@@ -1,3 +0,0 @@
-jGraduate - A jQuery plugin for picking gradients
-
-Licensed under the Apache License 2.  See LICENSE for more information.

dist/editor/jgraduate/css/jGraduate.css

@@ -1,351 +0,0 @@
-/*
- * jGraduate Default CSS
- *
- * Copyright (c) 2010 Jeff Schiller
- * http://blog.codedread.com/
- *
- * Copyright (c) 2010 Alexis Deveria
- * http://a.deveria.com/
- *
- * Licensed under the MIT License
- */
-
-h2.jGraduate_Title {
-  font-family: Arial, Helvetica, Sans-Serif;
-  font-size: 11px !important;
-  font-weight: bold;
-  margin: -13px 0px 0px 0px;
-  padding: 0px;
-  text-align: center;
-}
-
-.jGraduate_Picker {
-  font-family: Arial, Helvetica, Sans-Serif;
-  font-size: 12px;
-  border-style: solid;
-  border-color: lightgrey black black lightgrey;
-  border-width: 1px;
-  background-color: #EFEFEF;
-  position: absolute;
-  padding: 10px;
-}
-
-.jGraduate_tabs li {
-  background-color: #ccc;
-  display: inline;
-  border: solid 1px grey;
-  padding: 3px;
-  margin: 2px;
-  cursor: pointer;
-}
-
-li.jGraduate_tab_current {
-  background-color: #EFEFEF;
-  display: inline;
-  padding: 3px;
-  margin: 2px;
-  border: solid 1px black;
-  cursor: pointer;
-}
-
-.jGraduate_colPick {
-  display: none;
-}
-
-.jGraduate_gradPick {
-  display: none;
-  border: outset 1px #666;
-  padding: 10px 7px 5px 5px;
-  overflow: auto;
-}
-
-.jGraduate_gradPick {
-  display: none;
-  border: outset 1px #666;
-  padding: 10px 7px 5px 5px;
-  overflow: auto;
-/*  position: relative;*/
-}
-
-.jGraduate_tabs {
-  position: relative;
-  background-color: #EFEFEF;
-  padding: 0px;
-  margin: 0px;
-  margin-bottom: 5px;
-}
-
-div.jGraduate_Swatch {
-  float: left;
-  margin: 8px;
-}
-div.jGraduate_GradContainer {
-  border: 2px inset #EEE;
-  background-image: url(../images/map-opacity.png);
-  background-position: 0px 0px;
-  height: 256px;
-  width: 256px;
-  position: relative;
-}
-
-div.jGraduate_GradContainer div.grad_coord {
-  background: #000;
-  border: 1px solid #fff;
-  border-radius: 5px;
-  -moz-border-radius: 5px;
-  width: 10px;
-  height: 10px;
-  position: absolute;
-  margin: -5px -5px;
-  top: 0;
-  left: 0;
-  text-align: center;
-  font-size: xx-small;
-  line-height: 10px;
-  color: #fff;
-  text-decoration: none;
-  cursor: pointer;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-}
-
-.jGraduate_AlphaArrows {
-  position: absolute;
-  margin-top: -10px;
-  margin-left: 250.5px;
-}
-
-div.jGraduate_Opacity {
-  border: 2px inset #eee;
-  margin-top: 14px;
-  background-color: black;
-  background-image: url(../images/Maps.png);
-  background-position: 0px -2816px;
-  height: 20px;
-  cursor: ew-resize;
-}
-
-div.jGraduate_StopSlider {
-/*  border: 2px inset #eee;*/
-  margin: 0 0 0 -10px;
-  width: 276px;
-  overflow: visible;
-  background: #efefef;
-  height: 45px;
-  cursor: pointer;
-}
-
-div.jGraduate_StopSection {
-  width: 120px;
-  text-align: center;
-}
-
-
-
-
-input.jGraduate_Ok, input.jGraduate_Cancel {
-  display: block;
-  width: 100px;
-  margin-left: -4px;
-  margin-right: -4px;
-}
-input.jGraduate_Ok {
-  margin: 9px -4px 5px -4px;
-}
-
-.colorBox {
-  float: left;
-  height: 16px;
-  width: 16px;
-  border: 1px solid #808080;
-  cursor: pointer;
-  margin: 4px 4px 4px 30px;
-}
-
-.colorBox + label {
-  float: left;
-  margin-top: 7px;
-}
-
-label.jGraduate_Form_Heading {
-  position: relative;
-  top: 10px;
-  background-color: #EFEFEF;
-  padding: 2px;
-  font-weight: bold;
-  font-size: 13px;
-}
-
-div.jGraduate_Form_Section {
-  border-style: solid;
-  border-width: 1px;
-  border-color: grey;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  padding: 15px 5px 5px 5px;
-  margin: 5px 2px;
-  width: 110px;
-  text-align: center;
-  overflow: auto;
-}
-
-div.jGraduate_Form_Section label {
-  padding: 0 2px;
-}
-
-div.jGraduate_StopSection input[type=text],
-div.jGraduate_Slider input[type=text] {
-  width: 33px;
-}
-
-div.jGraduate_LightBox {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  background-color: #000;
-  opacity: 0.5;
-  display: none;
-}
-
-div.jGraduate_stopPicker {
-  position: absolute;
-  display: none;
-  background: #E8E8E8;
-}
-
-
-.jGraduate_gradPick {
-  width: 535px;
-}
-
-.jGraduate_gradPick div.jGraduate_OpacField {
-
-  position: absolute;
-  left: 0;
-  bottom: 5px;
-/*
-  width: 270px;
-
-  left: 284px;
-  width: 266px;
-  height: 200px;
-  top: 167px;
-  margin: -3px 3px 0px 4px;
-*/
-}
-
-.jGraduate_gradPick .jGraduate_Form {
-  float: left;
-  width: 270px;
-  position: absolute;
-  left: 284px;
-  width: 266px;
-  height: 200px;
-  top: 167px;
-  margin: -3px 3px 0px 10px;
-}
-
-.jGraduate_gradPick .jGraduate_Points {
-  position: static;
-  width: 150px;
-  margin-left: 0;
-}
-
-.jGraduate_SpreadMethod {
-  position: absolute;
-  right: 8px;
-  top: 100px;
-}
-
-.jGraduate_Colorblocks {
-  display: table;
-  border-spacing: 0 5px;
-}
-
-.jGraduate_colorblock {
-  display: table-row;
-}
-
-.jGraduate_Colorblocks .jGraduate_colorblock > * {
-  display: table-cell;
-  vertical-align: middle;
-  margin: 0;
-  float: none;
-}
-
-.jGraduate_gradPick div.jGraduate_StopSection {
-  float: left;
-  width: 133px;
-  margin-top: -8px;
-}
-
-
-.jGraduate_gradPick .jGraduate_Form_Section {
-  padding-top: 9px;
-}
-
-
-.jGraduate_Slider {
-  text-align: center;
-  float: left;
-  width: 100%;
-}
-
-.jGraduate_Slider .jGraduate_Form_Section {
-  border: none;
-  width: 250px;
-  padding: 0 2px;
-  overflow: visible;
-}
-
-.jGraduate_Slider label {
-  display: inline-block;
-  float: left;
-  line-height: 50px;
-  padding: 0;
-}
-
-.jGraduate_Slider label.prelabel {
-  width: 40px;
-  text-align: left;
-}
-
-.jGraduate_SliderBar {
-  width: 140px;
-  float: left;
-  margin-right: 5px;
-  border:1px solid #BBB;
-  height:20px;
-  margin-top:14px;
-  margin-left:5px;
-  position: relative;
-}
-
-div.jGraduate_Slider input {
-  margin-top: 5px;
-}
-
-div.jGraduate_Slider img {
-  top: 0;
-  left: 0;
-  position: absolute;
-  margin-top: -10px;
-  cursor:ew-resize;
-}
-
-
-.jGraduate_gradPick .jGraduate_OkCancel {
-  position: absolute;
-  top: 39px;
-  right: 10px;
-  width: 113px;
-
-}
-
-.jGraduate_OpacField {
-  position: absolute;
-  right: -10px;
-  bottom: 0;
-}

dist/editor/jgraduate/css/jPicker.css

@@ -1 +0,0 @@
-.jPicker .Icon{display:inline-block;height:24px;position:relative;text-align:left;width:25px}.jPicker .Icon span.Color,.jPicker .Icon span.Alpha{background-position:2px 2px;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker .Icon span.Image{background-repeat:no-repeat;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker.Container{z-index:10}table.jPicker{background-color:#efefef;border:1px outset #666;font-family:Arial,Helvetica,Sans-Serif;font-size:12px!important;margin:0;padding:5px;width:545px;z-index:20}.jPicker .Move{background-color:#ddd;border-color:#fff #666 #666 #fff;border-style:solid;border-width:1px;cursor:move;height:12px;padding:0}.jPicker .Title{font-size:11px!important;font-weight:bold;margin:-2px 0 0 0;padding:0;text-align:center;width:100%}.jPicker div.Map{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:crosshair;height:260px;margin:0 5px 0 5px;overflow:hidden;padding:0;position:relative;width:260px}.jPicker div[class="Map"]{height:256px;width:256px}.jPicker div.Bar{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:n-resize;height:260px;margin:12px 10px 0 5px;overflow:hidden;padding:0;position:relative;width:24px}.jPicker div[class="Bar"]{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3,.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4,.jPicker .Bar .Map5,.jPicker .Bar .Map6{background-color:transparent;background-image:none;display:block;left:0;position:absolute;top:0}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3{height:2596px;width:256px}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{height:3896px;width:20px}.jPicker .Bar .Map5,.jPicker .Bar .Map6{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Bar .Map6{background-repeat:no-repeat}.jPicker .Map .Map3,.jPicker .Bar .Map5{background-repeat:repeat}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{background-repeat:repeat-x}.jPicker .Map .Arrow{display:block;position:absolute}.jPicker .Bar .Arrow{display:block;left:0;position:absolute}.jPicker .Preview{font-size:9px;text-align:center}.jPicker .Preview div{border:2px inset #eee;height:62px;margin:0 auto;padding:0;width:62px}.jPicker .Preview div span{border:1px solid #000;display:block;height:30px;margin:0 auto;padding:0;width:60px}.jPicker .Preview .Active{border-bottom-width:0}.jPicker .Preview .Current{border-top-width:0;cursor:pointer}.jPicker .Button{text-align:center;width:115px}.jPicker .Button input{width:100px}.jPicker .Button .Ok{margin:12px 0 5px 0}.jPicker td.Radio{margin:0;padding:0;width:31px}.jPicker td.Radio input{margin:0 5px 0 0;padding:0}.jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}.jPicker tr.Hex td.Text{width:100px}.jPicker td.Text input{background-color:#fff;border:1px inset #aaa;height:19px;margin:0 0 0 5px;text-align:left;width:30px}.jPicker td[class="Text"] input{height:15px}.jPicker tr.Hex td.Text input.Hex{width:50px}.jPicker tr.Hex td.Text input.AHex{width:20px}.jPicker .Grid{text-align:center;width:114px}.jPicker .Grid span.QuickColor{border:1px inset #aaa;cursor:pointer;display:inline-block;height:15px;line-height:15px;margin:0;padding:0;width:19px}.jPicker .Grid span[class="QuickColor"]{width:17px}

dist/editor/svgedit.css

@@ -1,7 +1,3 @@
-@import "./jgraduate/css/jGraduate.css";
-@import "./jgraduate/css/jPicker.css";
-
-
 body {
   background: #D0D0D0;
 }
@@ -383,25 +379,6 @@ hr {
 
 /*—————————————————————————————*/
 
-.tool_button:hover,
-.push_button:hover,
-.buttonup:hover,
-.buttondown,
-.tool_button_current,
-.push_button_pressed
-{
-  background-color: #ffc !important;
-}
-
-.tool_button_current,
-.push_button_pressed,
-.buttondown {
-  background-color: #f4e284 !important;
-  -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
-  -moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
-  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
-}
-
 #tools_top {
   position: absolute;
   left: 108px;
@@ -409,38 +386,12 @@ hr {
   top: 2px;
   height: 40px;
   border-bottom: none;
-  overflow: auto;
 }
 
 #tools_top .tool_sep {
   margin-top: 5px;
 }
 
-#fill_color,  #stroke_color {
-  height: 16px;
-  width: 16px;
-  border: 1px solid #808080;
-  cursor: pointer;
-  overflow: hidden;
-}
-
-#fill_color,  #stroke_color {
-  height: 16px;
-  width: 16px;
-  border: 1px solid #808080;
-  cursor: pointer;
-  overflow: hidden;
-}
-
-.color_block {
-  top: 0;
-  left: 0;
-}
-
-.color_block svg {
-  display: block;
-}
-
 #tools_left {
   position: absolute;
   border-right: none;
@@ -544,12 +495,6 @@ input[type=text] {
   padding: 2px;
 }
 
-#tools_left .tool_button,
-#tools_left .tool_button_current {
-  position: relative;
-  z-index: 11;
-}
-
 .dropdown {
   position: relative;
 }
@@ -621,21 +566,6 @@ input[type=text] {
   margin-right: 0;
 }
 
-.tool_button,
-.push_button,
-.tool_button_current,
-.push_button_pressed
-{
-  height: 24px;
-  width: 24px;
-  margin: 2px 2px 4px 2px;
-  padding: 3px;
-  box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
-  background-color: #E8E8E8;
-  cursor: pointer;
-  border-radius: 3px;
-}
-
  #main_menu li#tool_open,  #main_menu li#tool_import {
   position: relative;
   overflow: hidden;
@@ -695,20 +625,12 @@ input[type=text] {
   display: none;
 }
 
-#color_picker {
-  position: absolute;
-  display: none;
-  background: #E8E8E8;
-  height: 350px;
-  z-index: 5;
-}
-
 #tools_bottom {
   position: absolute;
   left: 40px;
   right: 0;
   bottom: 0;
-  height: 40px;
+  height: 33px;
   overflow: visible;
 }
 
@@ -720,10 +642,6 @@ input[type=text] {
   float: right;
 }
 
-.dropdown li.tool_button {
-  width: 24px;
-}
-
 #stroke_expand {
   width: 0;
   overflow: hidden;
@@ -754,10 +672,7 @@ input[type=text] {
 #toggle_stroke_tools:hover {
   background: white;
 }
-.color_tool > * {
+
-  float: left;
-  margin-right: 5px;
-}
 #tool_opacity { right: 0;}
 
 #tool_opacity {
@@ -883,10 +798,6 @@ ul li.current {
   margin-left: 30px;
 }
 
-#bg_blocks .color_block {
-  position: static;
-}
-
 #svg_docprops #svg_docprops_container,
 #svg_prefs #svg_prefs_container {
   position: absolute;
@@ -963,27 +874,6 @@ ul li.current {
   width: 96%;
 }
 
-
-#svg_source_editor form {
-  position: absolute;
-  top: 40px;
-  bottom: 30px;
-  width: 100%;
-}
-
-#svg_source_editor #svg_source_textarea {
-  position: relative;
-  width: 95%;
-  height: 95%;
-  padding: 5px;
-  font-size: 12px;
-}
-
-#svg_source_editor #tool_source_back {
-  text-align: left;
-  padding-left: 20px;
-}
-
 #svg_prefs_container div.color_block {
   float: left;
   margin: 2px;
@@ -1140,66 +1030,3 @@ ul li.current {
   background: #B0B0B0;
   border: 1px solid #000;
 }
-
-/* Generic context menu styles */
-.contextMenu {
-  position: absolute;
-  z-index: 99999;
-  border: solid 1px rgba(0,0,0,.33);
-  background: rgba(255,255,255,.95);
-  padding: 5px 0;
-  margin: 0px;
-  display: none;
-  font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
-  border-radius: 5px;
-  -moz-border-radius: 5px;
-  -moz-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
-  -webkit-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
-  box-shadow: 2px 5px 10px rgba(0,0,0,.3);
-}
-
-.contextMenu LI {
-  list-style: none;
-  padding: 0px;
-  margin: 0px;
-}
-
-.contextMenu .shortcut {
-  width: 115px;
-  text-align:right;
-  float:right;
-}
-
-.contextMenu A {
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  color: #222;
-  text-decoration: none;
-  display: block;
-  line-height: 20px;
-  height: 20px;
-  background-position: 6px center;
-  background-repeat: no-repeat;
-  outline: none;
-  padding: 0px 15px 1px 20px;
-}
-
-.contextMenu LI.hover A {
-  background-color: #2e5dea;
-  color: white;
-  cursor: default;
-}
-
-.contextMenu LI.disabled A {
-  color: #999;
-}
-
-.contextMenu LI.hover.disabled A {
-  background-color: transparent;
-}
-
-.contextMenu LI.separator {
-  border-top: solid 1px #E3E3E3;
-  padding-top: 5px;
-  margin-top: 5px;
-}

dist/editor/system/embedapi.js

@@ -362,7 +362,7 @@ class EmbeddedSVGEdit {
         let sameOriginWithGlobal = false;
         try {
           sameOriginWithGlobal = window.location.origin === that.frame.contentWindow.location.origin &&
-            that.frame.contentWindow.svgEditor.canvas;
+            that.frame.contentWindow.svgEditor.svgCanvas;
         } catch (err) {}
 
         if (sameOriginWithGlobal) {

dist/editor/system/extensions/ext-closepath/ext-closepath.js

@@ -6,4 +6,4 @@ System.register([],(function(t){"use strict";return{execute:function(){var e="un
 			 *
 			 * @copyright 2010 Jeff Schiller
 			 *
-			 */var ao=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return co}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),co=(t("default",{name:"closepath",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c,u,f;return regeneratorRuntime.wrap((function _callee2$(s){for(;;)switch(s.prev=s.next){case 0:return t.importLocale,r=t.$,n=e,s.next=4,ao(n.pref("lang"));case 4:return o=s.sent,a=function updateButton(t){var e=t.pathSegList,n=1===e.getItem(e.numberOfItems-1).pathSegType,o=n?"#tool_openpath":"#tool_closepath";r(n?"#tool_closepath":"#tool_openpath").hide(),r(o).show()},c=function showPanel(t){if(r("#closepath_panel").toggle(t),t){var e=i[0];e&&a(e)}},u=function toggleClosed(){var t=i[0];if(t){var e=t.pathSegList,r=e.numberOfItems-1;1===e.getItem(r).pathSegType?e.removeItem(r):e.appendItem(t.createSVGPathSegClosePath()),a(t)}},f=[{id:"tool_openpath",icon:"openpath.png",type:"context",panel:"closepath_panel",events:{click:function click(){u()}}},{id:"tool_closepath",icon:"closepath.png",type:"context",panel:"closepath_panel",events:{click:function click(){u()}}}],s.abrupt("return",{name:o.name,svgicons:"closepath_icons.svg",buttons:o.buttons.map((function(t,e){return Object.assign(f[e],t)})),callback:function callback(){r("#closepath_panel").hide()},selectedChanged:function selectedChanged(t){for(var e=(i=t.elems).length;e--;){var r=i[e];r&&"path"===r.tagName&&t.selectedElement&&!t.multiselected?c(!0):c(!1)}}});case 10:case"end":return s.stop()}}),_callee2)})))()}}),Object.freeze({__proto__:null,default:{name:"ClosePath",buttons:[{title:"Open path"},{title:"Close path"}]}})),uo=Object.freeze({__proto__:null,default:{name:"闭合路径",buttons:[{title:"打开路径"},{title:"关闭路径"}]}})}}}));
+			 */var ao=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return co}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),co=(t("default",{name:"closepath",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c,u,f;return regeneratorRuntime.wrap((function _callee2$(s){for(;;)switch(s.prev=s.next){case 0:return t.importLocale,r=t.$,n=e,s.next=4,ao(n.configObj.pref("lang"));case 4:return o=s.sent,a=function updateButton(t){var e=t.pathSegList,n=1===e.getItem(e.numberOfItems-1).pathSegType,o=n?"#tool_openpath":"#tool_closepath";r(n?"#tool_closepath":"#tool_openpath").hide(),r(o).show()},c=function showPanel(t){if(r("#closepath_panel").toggle(t),t){var e=i[0];e&&a(e)}},u=function toggleClosed(){var t=i[0];if(t){var e=t.pathSegList,r=e.numberOfItems-1;1===e.getItem(r).pathSegType?e.removeItem(r):e.appendItem(t.createSVGPathSegClosePath()),a(t)}},f=[{id:"tool_openpath",icon:"openpath.png",type:"context",panel:"closepath_panel",events:{click:function click(){u()}}},{id:"tool_closepath",icon:"closepath.png",type:"context",panel:"closepath_panel",events:{click:function click(){u()}}}],s.abrupt("return",{name:o.name,svgicons:"closepath_icons.svg",buttons:o.buttons.map((function(t,e){return Object.assign(f[e],t)})),callback:function callback(){r("#closepath_panel").hide()},selectedChanged:function selectedChanged(t){for(var e=(i=t.elems).length;e--;){var r=i[e];r&&"path"===r.tagName&&t.selectedElement&&!t.multiselected?c(!0):c(!1)}}});case 10:case"end":return s.stop()}}),_callee2)})))()}}),Object.freeze({__proto__:null,default:{name:"ClosePath",buttons:[{title:"Open path"},{title:"Close path"}]}})),uo=Object.freeze({__proto__:null,default:{name:"闭合路径",buttons:[{title:"打开路径"},{title:"关闭路径"}]}})}}}));

dist/editor/system/extensions/ext-eyedropper/ext-eyedropper.js

@@ -6,4 +6,4 @@ System.register([],(function(t){"use strict";return{execute:function(){var e="un
 			 *
 			 * @copyright 2010 Jeff Schiller
 			 *
-			 */var fo=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return so}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),so=(t("default",{name:"eyedropper",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c,u,f,s;return regeneratorRuntime.wrap((function _callee2$(l){for(;;)switch(l.prev=l.next){case 0:return f=function _getStyle(t){if("eyedropper"!==a.getMode()){var e=o("#tool_eyedropper"),r=null;t.multiselected||!t.elems[0]||["svg","g","use"].includes(t.elems[0].nodeName)?e.addClass("disabled"):(r=t.elems[0],e.removeClass("disabled"),u.fillPaint=r.getAttribute("fill")||"black",u.fillOpacity=r.getAttribute("fill-opacity")||1,u.strokePaint=r.getAttribute("stroke"),u.strokeOpacity=r.getAttribute("stroke-opacity")||1,u.strokeWidth=r.getAttribute("stroke-width"),u.strokeDashArray=r.getAttribute("stroke-dasharray"),u.strokeLinecap=r.getAttribute("stroke-linecap"),u.strokeLinejoin=r.getAttribute("stroke-linejoin"),u.opacity=r.getAttribute("opacity")||1)}},r=e,l.next=4,fo(r.pref("lang"));case 4:return n=l.sent,o=t.$,i=t.ChangeElementCommand,a=r.canvas,c=function addToHistory(t){a.undoMgr.addCommandToHistory(t)},u={fillPaint:"red",fillOpacity:1,strokePaint:"black",strokeOpacity:1,strokeWidth:5,strokeDashArray:null,opacity:1,strokeLinecap:"butt",strokeLinejoin:"miter"},s=[{id:"tool_eyedropper",type:"mode",events:{click:function click(){a.setMode("eyedropper")}}}],l.abrupt("return",{name:n.name,newUI:!0,buttons:n.buttons.map((function(t,e){return Object.assign(s[e],t)})),selectedChanged:f,elementChanged:f,mouseDown:function mouseDown(t){if("eyedropper"===a.getMode()){var e=t.event.target;if(!["svg","g","use"].includes(e.nodeName)){var r={},n=function change(t,e,n){r[e]=t.getAttribute(e),t.setAttribute(e,n)};u.fillPaint&&n(e,"fill",u.fillPaint),u.fillOpacity&&n(e,"fill-opacity",u.fillOpacity),u.strokePaint&&n(e,"stroke",u.strokePaint),u.strokeOpacity&&n(e,"stroke-opacity",u.strokeOpacity),u.strokeWidth&&n(e,"stroke-width",u.strokeWidth),u.strokeDashArray&&n(e,"stroke-dasharray",u.strokeDashArray),u.opacity&&n(e,"opacity",u.opacity),u.strokeLinecap&&n(e,"stroke-linecap",u.strokeLinecap),u.strokeLinejoin&&n(e,"stroke-linejoin",u.strokeLinejoin),c(new i(e,r))}}}});case 8:case"end":return l.stop()}}),_callee2)})))()}}),Object.freeze({__proto__:null,default:{name:"eyedropper",buttons:[{title:"Eye Dropper Tool",key:"I"}]}})),lo=Object.freeze({__proto__:null,default:{name:"滴管",buttons:[{title:"滴管工具",key:"I"}]}})}}}));
+			 */var fo=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return so}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),so=(t("default",{name:"eyedropper",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c,u,f,s;return regeneratorRuntime.wrap((function _callee2$(l){for(;;)switch(l.prev=l.next){case 0:return f=function _getStyle(t){if("eyedropper"!==a.getMode()){var e=o("#tool_eyedropper"),r=null;t.multiselected||!t.elems[0]||["svg","g","use"].includes(t.elems[0].nodeName)?e.addClass("disabled"):(r=t.elems[0],e.removeClass("disabled"),u.fillPaint=r.getAttribute("fill")||"black",u.fillOpacity=r.getAttribute("fill-opacity")||1,u.strokePaint=r.getAttribute("stroke"),u.strokeOpacity=r.getAttribute("stroke-opacity")||1,u.strokeWidth=r.getAttribute("stroke-width"),u.strokeDashArray=r.getAttribute("stroke-dasharray"),u.strokeLinecap=r.getAttribute("stroke-linecap"),u.strokeLinejoin=r.getAttribute("stroke-linejoin"),u.opacity=r.getAttribute("opacity")||1)}},r=e,l.next=4,fo(r.configObj.pref("lang"));case 4:return n=l.sent,o=t.$,i=t.ChangeElementCommand,a=r.svgCanvas,c=function addToHistory(t){a.undoMgr.addCommandToHistory(t)},u={fillPaint:"red",fillOpacity:1,strokePaint:"black",strokeOpacity:1,strokeWidth:5,strokeDashArray:null,opacity:1,strokeLinecap:"butt",strokeLinejoin:"miter"},s=[{id:"tool_eyedropper",type:"mode",events:{click:function click(){a.setMode("eyedropper")}}}],l.abrupt("return",{name:n.name,newUI:!0,buttons:n.buttons.map((function(t,e){return Object.assign(s[e],t)})),selectedChanged:f,elementChanged:f,mouseDown:function mouseDown(t){if("eyedropper"===a.getMode()){var e=t.event.target;if(!["svg","g","use"].includes(e.nodeName)){var r={},n=function change(t,e,n){r[e]=t.getAttribute(e),t.setAttribute(e,n)};u.fillPaint&&n(e,"fill",u.fillPaint),u.fillOpacity&&n(e,"fill-opacity",u.fillOpacity),u.strokePaint&&n(e,"stroke",u.strokePaint),u.strokeOpacity&&n(e,"stroke-opacity",u.strokeOpacity),u.strokeWidth&&n(e,"stroke-width",u.strokeWidth),u.strokeDashArray&&n(e,"stroke-dasharray",u.strokeDashArray),u.opacity&&n(e,"opacity",u.opacity),u.strokeLinecap&&n(e,"stroke-linecap",u.strokeLinecap),u.strokeLinejoin&&n(e,"stroke-linejoin",u.strokeLinejoin),c(new i(e,r))}}}});case 8:case"end":return l.stop()}}),_callee2)})))()}}),Object.freeze({__proto__:null,default:{name:"eyedropper",buttons:[{title:"Eye Dropper Tool",key:"I"}]}})),lo=Object.freeze({__proto__:null,default:{name:"滴管",buttons:[{title:"滴管工具",key:"I"}]}})}}}));

dist/editor/system/extensions/ext-shapes/ext-shapes.js

@@ -7,4 +7,4 @@ System.register([],(function(e){"use strict";return{execute:function(){
        * @copyright 2010 Christian Tzurcanu, 2010 Alexis Deveria
        *
        */
-e("default",{name:"shapes",init:function init(e){e.$;var t,a,n,s=this.canvas,o=s.getRootElem(),i={},r="shapelib",c={};return{events:{id:"tool_shapelib",click:function click(){s.setMode(r)}},callback:function callback(){},mouseDown:function mouseDown(e){if(s.getMode()===r){var o=document.getElementById("tool_shapelib").dataset.draw,l=a=e.start_x,m=n=e.start_y,u=s.getStyle();return c.x=e.event.clientX,c.y=e.event.clientY,(t=s.addSVGElementFromJson({element:"path",curStyles:!0,attr:{d:o,id:s.getNextId(),opacity:u.opacity/2,style:"pointer-events:none"}})).setAttribute("transform","translate("+l+","+m+") scale(0.005) translate("+-l+","+-m+")"),s.recalculateDimensions(t),s.getTransformList(t),i=t.getBBox(),{started:!0}}},mouseMove:function mouseMove(e){if(s.getMode()===r){var c=s.getZoom(),l=e.event,m=e.mouse_x/c,u=e.mouse_y/c,d=s.getTransformList(t),f=t.getBBox(),h=f.x,p=f.y,g=(Math.min(a,m),Math.min(n,u),Math.abs(m-a)),v=Math.abs(u-n),y=g/i.width||1,M=v/i.height||1,b=0;m<a&&(b=i.width);var x=0;u<n&&(x=i.height);var S=o.createSVGTransform(),B=o.createSVGTransform(),T=o.createSVGTransform();if(S.setTranslate(-(h+b),-(p+x)),!l.shiftKey){var _=Math.min(Math.abs(y),Math.abs(M));y=_*(y<0?-1:1),M=_*(M<0?-1:1)}B.setScale(y,M),T.setTranslate(h+b,p+x),d.appendItem(T),d.appendItem(B),d.appendItem(S),s.recalculateDimensions(t),i=t.getBBox()}},mouseUp:function mouseUp(e){if(s.getMode()===r)return{keep:e.event.clientX!==c.x&&e.event.clientY!==c.y,element:t,started:!1}}}}})}}}));
+e("default",{name:"shapes",init:function init(e){e.$;var t,a,n,s=this.svgCanvas,o=s.getRootElem(),i={},r="shapelib",c={};return{events:{id:"tool_shapelib",click:function click(){s.setMode(r)}},callback:function callback(){},mouseDown:function mouseDown(e){if(s.getMode()===r){var o=document.getElementById("tool_shapelib").dataset.draw,l=a=e.start_x,m=n=e.start_y,u=s.getStyle();return c.x=e.event.clientX,c.y=e.event.clientY,(t=s.addSVGElementFromJson({element:"path",curStyles:!0,attr:{d:o,id:s.getNextId(),opacity:u.opacity/2,style:"pointer-events:none"}})).setAttribute("transform","translate("+l+","+m+") scale(0.005) translate("+-l+","+-m+")"),s.recalculateDimensions(t),s.getTransformList(t),i=t.getBBox(),{started:!0}}},mouseMove:function mouseMove(e){if(s.getMode()===r){var c=s.getZoom(),l=e.event,m=e.mouse_x/c,u=e.mouse_y/c,d=s.getTransformList(t),f=t.getBBox(),h=f.x,g=f.y,p=(Math.min(a,m),Math.min(n,u),Math.abs(m-a)),v=Math.abs(u-n),y=p/i.width||1,M=v/i.height||1,b=0;m<a&&(b=i.width);var x=0;u<n&&(x=i.height);var S=o.createSVGTransform(),B=o.createSVGTransform(),T=o.createSVGTransform();if(S.setTranslate(-(h+b),-(g+x)),!l.shiftKey){var _=Math.min(Math.abs(y),Math.abs(M));y=_*(y<0?-1:1),M=_*(M<0?-1:1)}B.setScale(y,M),T.setTranslate(h+b,g+x),d.appendItem(T),d.appendItem(B),d.appendItem(S),s.recalculateDimensions(t),i=t.getBBox()}},mouseUp:function mouseUp(e){if(s.getMode()===r)return{keep:e.event.clientX!==c.x&&e.event.clientY!==c.y,element:t,started:!1}}}}})}}}));

dist/editor/system/extensions/ext-webappfind/ext-webappfind.js

@@ -5,4 +5,4 @@ System.register([],(function(t){"use strict";return{execute:function(){var e="un
 			* @author Brett Zamir
 			* @license MIT
 			* @todo See WebAppFind Readme for SVG-related todos
-			*/var yo=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return vo}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),vo=(t("default",{name:"webappfind",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c,u;return regeneratorRuntime.wrap((function _callee2$(f){for(;;)switch(f.prev=f.next){case 0:return r=t.$,n=e,f.next=4,yo(n.pref("lang"));case 4:return o=f.sent,"read",a=["read",i="save"],e.canvas.bind("message",(function(t,e){var o,i,u=e.data,f=e.origin;try{var s=u.webappfind;if(o=s.type,c=s.pathID,i=s.content,f!==location.origin||a.includes(o))return}catch(t){return}switch(o){case"view":n.loadFromString(i);break;case"save-end":r.alert("save complete for pathID ".concat(c,"!"));break;default:throw new Error("Unexpected WebAppFind event type")}})),u=[{id:"webappfind_save",icon:"webappfind.png",type:"app_menu",position:4,events:{click:function click(){c&&window.postMessage({webappfind:{type:i,pathID:c,content:n.canvas.getSvgString()}},"null"===window.location.origin?"*":window.location.origin)}}}],f.abrupt("return",{name:o.name,svgicons:"webappfind-icon.svg",buttons:o.buttons.map((function(t,e){return Object.assign(u[e],t)}))});case 9:case"end":return f.stop()}}),_callee2)})))()}}),Object.freeze({__proto__:null,default:{name:"WebAppFind",buttons:[{title:"Save Image back to Disk"}]}})),go=Object.freeze({__proto__:null,default:{name:"WebAppFind",buttons:[{title:"保存图片到磁盘"}]}})}}}));
+			*/var yo=function(){var t=_asyncToGenerator(regeneratorRuntime.mark((function _callee(t){var e;return regeneratorRuntime.wrap((function _callee$(r){for(;;)switch(r.prev=r.next){case 0:return r.prev=0,r.next=3,__variableDynamicImportRuntime0__("./locale/".concat(encodeURIComponent(t),".js"));case 3:e=r.sent,r.next=12;break;case 6:return r.prev=6,r.t0=r.catch(0),console.error("Missing translation (".concat(t,") - using 'en'")),r.next=11,Promise.resolve().then((function(){return vo}));case 11:e=r.sent;case 12:return r.abrupt("return",e.default);case 13:case"end":return r.stop()}}),_callee,null,[[0,6]])})));return function loadExtensionTranslation(e){return t.apply(this,arguments)}}(),vo=(t("default",{name:"webappfind",init:function init(t){var e=this;return _asyncToGenerator(regeneratorRuntime.mark((function _callee2(){var r,n,o,i,a,c;return regeneratorRuntime.wrap((function _callee2$(u){for(;;)switch(u.prev=u.next){case 0:return t.$,r=e,u.next=4,yo(r.configObj.pref("lang"));case 4:return n=u.sent,"read",i=["read",o="save"],e.canvas.bind("message",(function(t,e){var n,o,c=e.data,u=e.origin;try{var f=c.webappfind;if(n=f.type,a=f.pathID,o=f.content,u!==location.origin||i.includes(n))return}catch(t){return}switch(n){case"view":r.loadFromString(o);break;case"save-end":alert("save complete for pathID ".concat(a,"!"));break;default:throw new Error("Unexpected WebAppFind event type")}})),c=[{id:"webappfind_save",icon:"webappfind.png",type:"app_menu",position:4,events:{click:function click(){a&&window.postMessage({webappfind:{type:o,pathID:a,content:r.svgCanvas.getSvgString()}},"null"===window.location.origin?"*":window.location.origin)}}}],u.abrupt("return",{name:n.name,svgicons:"webappfind-icon.svg",buttons:n.buttons.map((function(t,e){return Object.assign(c[e],t)}))});case 9:case"end":return u.stop()}}),_callee2)})))()}}),Object.freeze({__proto__:null,default:{name:"WebAppFind",buttons:[{title:"Save Image back to Disk"}]}})),go=Object.freeze({__proto__:null,default:{name:"WebAppFind",buttons:[{title:"保存图片到磁盘"}]}})}}}));

dist/editor/system/images/anchor_end.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
+ <g class="layer">
+  <title>Layer 1</title>
+  <text fill="#000000" font-family="serif" font-size="9" id="svg_2" stroke="#000000" stroke-width="0" text-anchor="middle" x="12" xml:space="preserve" y="14.66667">abcd</text>
+  <line fill="none" id="svg_1" stroke="#ff7f00" stroke-width="2" x1="21.46429" x2="21.46429" y1="4.95685" y2="18.62351"/>
+ </g>
+</svg>

dist/editor/system/images/anchor_middle.svg

@@ -0,0 +1,8 @@
+ <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
+ <g class="layer">
+  <title>Layer 1</title>
+  <text fill="#000000" font-family="serif" font-size="9" id="svg_2" stroke="#000000" stroke-width="0" text-anchor="middle" x="12" xml:space="preserve" y="14.66667">abcd</text>
+  <line fill="none" id="svg_1" stroke="#ff7f00" stroke-width="2" x1="11.75" x2="11.75" y1="4.38542" y2="18.05208"/>
+ </g>
+</svg>

dist/editor/system/images/anchor_start.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+ <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
+ <g class="layer">
+  <title>Layer 1</title>
+  <text fill="#000000" font-family="serif" font-size="9" id="svg_2" stroke="#000000" stroke-width="0" text-anchor="middle" x="12" xml:space="preserve" y="14.66667">abcd</text>
+  <line fill="none" id="svg_1" stroke="#ff7f00" stroke-width="2" x1="1.5" x2="1.5" y1="5.63542" y2="19.30208"/>
+ </g>
+</svg>

dist/editor/system/images/library.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 211">
+ <g>
+  <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m2.75,49.51761l56.56,-46.26761c12.73,8.25 25.71001,7 46.44,0.75l-56.03999,47.23944l-22.72002,25.01056l-24.23999,-26.73239z" id="svg_2" stroke-width="7"/>
+  <path fill="#a03333" stroke="#3f3f3f" d="m3.75,203.25002c14.33301,7 30.66699,7 46,0l0,-152.00002c-14.66699,8 -32.33301,8 -47,0l1,152.00002zm45.75,-152.25002l56.25,-46.75l0,151l-56,48.00002m-47.25,-154.25002l57.25,-46.5" id="svg_1" stroke-width="7" stroke-linecap="round"/>
+  <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m49.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_5"/>
+  <path fill="#2f8e2f" stroke="#3f3f3f" d="m50.75,202.25c14.33301,7 30.66699,7.04253 46,0.04253l0,-151.04253c-14.66699,8 -32.33301,8 -47,0l1,151zm45.75,-151.25l56.25,-46.75l0,144.01219l-56,51.98782m-47.25,-151.25002l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_6"/>
+  <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m95.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_10"/>
+  <path fill="#336393" stroke="#3f3f3f" d="m96.75,200.29445c14.33301,7 30.66699,7 46,0l0,-149.04445c-14.66699,8 -32.33301,8 -47,0l1,149.04445zm45.75,-149.29445l56.25,-46.75l0,148.04445l-56,48m-47.25,-151.29445l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_11"/>
+ </g>
+</svg></svg>

dist/editor/system/index.html

@@ -81,19 +81,20 @@
         <div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s
         </div>
       </div>
-      <se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg">
+      <se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg" alt="logo">
         <!-- File-like buttons: New, Save, Source -->
         <se-menu-item id="tool_clear" label="New Image" shortcut="N" src="./images/new.svg"></se-menu-item>
         <se-menu-item id="tool_open" label="Open SVG" src="./images/open.svg"></se-menu-item>
         <se-menu-item id="tool_import" label="Import Image" src="./images/importImg.svg"></se-menu-item>
         <se-menu-item id="tool_save" label="Save Image" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
+        <se-menu-item id="tool_imagelib" label="Image library"  src="./images/library.svg"></se-menu-item>
         <se-menu-item id="tool_export" label="Export" src="./images/export.svg"></se-menu-item>
         <se-menu-item id="tool_docprops" label="Document Properties" shortcut="D" src="./images/docprop.svg"></se-menu-item>
         <se-menu-item id="tool_editor_prefs" label="Editor Preferences" src="./images/editPref.svg"></se-menu-item>
         <se-menu-item id="tool_editor_homepage" label="SVG-Edit Home Page" src="./images/svg-edit-home.svg"></se-menu-item>
         <div style="width:50%;margin:auto;">
           <a href="https://www.netlify.com">
-            <img style="height:25px;" src="https://www.netlify.com/img/global/badges/netlify-dark.svg"
+            <img style="height:25px;" src="./images/netlify-dark.svg"
               alt="Deploys by Netlify" />
           </a>
         </div>
@@ -133,15 +134,23 @@
             title="Change rotation angle"></se-spin-input>
           <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
             title="Change gaussian blur value"></se-spin-input>
+          <se-list>
+            <se-list-item id="tool_posleft">Align Left</se-list-item>
+            <se-list-item id="tool_poscenter">Align Center</se-list-item>
+            <se-list-item id="tool_posright">Align Right</se-list-item>
+            <se-list-item id="tool_postop">Align Top</se-list-item>
+            <se-list-item id="tool_posmiddle">Align Middle</se-list-item>
+            <se-list-item id="tool_posbottom">Align Bottom</se-list-item> 
+          </se-list>
           <div class="dropdown toolset" id="tool_position" title="Align Element to Page">
             <div id="cur_position" class="icon_label"></div>
             <button></button>
           </div>
           <div id="xy_panel" class="toolset">
-            <se-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate">
+            <se-spin-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate">
-            </se-input>
+            </se-spin-input>
-            <se-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate">
+            <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate">
-            </se-input>
+            </se-spin-input>
           </div>
         </div> <!-- selected_panel -->
         <!-- Buttons when multiple elements are selected -->
@@ -160,33 +169,30 @@
           <se-button id="tool_align_top" title="Align Top" src="./images/align_top.svg"></se-button>
           <se-button id="tool_align_middle" title="Align Middle" src="./images/align_middle.svg"></se-button>
           <se-button id="tool_align_bottom" title="Align Bottom" src="./images/align_bottom.svg"></se-button>
-          <label id="tool_align_relative">
+          <se-list id="tool_align_relative" label="relative to:">
-            <span id="relativeToLabel">relative to:</span>
+            <se-list-item id="selected_objects" value="selected">selected objects</se-list-item>
-            <select id="align_relative_to" title="Align relative to ...">
+            <se-list-item id="largest_object" value="largest">largest object</se-list-item>
-              <option id="selected_objects" value="selected">selected objects</option>
+            <se-list-item id="smallest_object" value="smallest">smallest object</se-list-item>
-              <option id="largest_object" value="largest">largest object</option>
+            <se-list-item id="page" value="page">page</se-list-item>
-              <option id="smallest_object" value="smallest">smallest object</option>
+          </se-list>
-              <option id="page" value="page">page</option>
-            </select>
-          </label>
           <div class="tool_sep"></div>
         </div> <!-- multiselected_panel -->
         <div id="rect_panel">
           <div class="toolset">
-            <se-input id="rect_width" data-attr="width" size="4" src="./images/width.svg"
+            <se-spin-input id="rect_width" data-attr="width" size="4" src="./images/width.svg"
-              title="Change rectangle width"></se-input>
+              title="Change rectangle width"></se-spin-input>
-            <se-input id="rect_height" data-attr="height" size="4" src="./images/height.svg"
+            <se-spin-input id="rect_height" data-attr="height" size="4" src="./images/height.svg"
-              title="Change rectangle height"></se-input>
+              title="Change rectangle height"></se-spin-input>
           </div>
           <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="Change Rectangle Corner Radius"
             data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
         </div> <!-- rect_panel -->
         <div id="image_panel">
           <div class="toolset">
-            <se-input id="image_width" data-attr="width" size="4" type="text" src="./images/width.svg"
+            <se-spin-input id="image_width" data-attr="width" size="4" type="text" src="./images/width.svg"
-              title="Change image width"></se-input>
+              title="Change image width"></se-spin-input>
-            <se-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg"
+            <se-spin-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg"
-              title="Change image height"></se-input>
+              title="Change image height"></se-spin-input>
           </div>
           <div class="toolset">
             <label id="tool_image_url">url:
@@ -201,63 +207,55 @@
         </div> <!-- image_panel -->
         <div id="circle_panel">
           <div class="toolset">
-            <se-input id="circle_cx" data-attr="cx" size="4" label="cx:"></se-input>
+            <se-spin-input id="circle_cx" data-attr="cx" size="4" label="cx:"></se-spin-input>
-            <se-input id="circle_cy" data-attr="cy" size="4" label="cy:"></se-input>
+            <se-spin-input id="circle_cy" data-attr="cy" size="4" label="cy:"></se-spin-input>
           </div>
           <div class="toolset">
-            <se-input id="circle_r" data-attr="r" size="4" label="r:"></se-input>
+            <se-spin-input id="circle_r" data-attr="r" size="4" label="r:"></se-spin-input>
           </div>
         </div> <!-- circle_panel -->
         <div id="ellipse_panel">
           <div class="toolset">
-            <se-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:">
+            <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:">
-            </se-input>
+            </se-spin-input>
-            <se-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:">
+            <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:">
-            </se-input>
+            </se-spin-input>
           </div>
           <div class="toolset">
-            <se-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx:"></se-input>
+            <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx:"></se-spin-input>
-            <se-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" label="ry:"></se-input>
+            <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" label="ry:"></se-spin-input>
           </div>
         </div> <!-- ellipse_panel -->
         <div id="line_panel">
           <div class="toolset">
-            <se-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:">
+            <se-spin-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:">
-            </se-input>
+            </se-spin-input>
-            <se-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:">
+            <se-spin-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:">
-            </se-input>
+            </se-spin-input>
-          </div>
+            <se-spin-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:">
-          <div class="toolset">
+            </se-spin-input>
-            <se-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:">
+            <se-spin-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:">
-            </se-input>
+            </se-spin-input>
-            <se-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:">
-            </se-input>
           </div>
         </div> <!-- line_panel -->
         <div id="text_panel">
           <div class="toolset">
-            <se-button id="tool_bold" size="small" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
+            <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
-            <se-button id="tool_italic" size="small" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
+            <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
-          </div>
+            <se-button id="tool_text_anchor_start" title="Align the text from start" src="./images/anchor_start.svg"></se-button>
-          <div class="toolset" id="tool_font_family">
+            <se-button id="tool_text_anchor_middle" title="Align the text from middle" src="./images/anchor_middle.svg"></se-button>
-            <label>
+            <se-button id="tool_text_anchor_end" title="Align the text from end" src="./images/anchor_end.svg"></se-button>
-              <!-- Font family -->
-              <input id="font_family" type="text" title="Change Font Family" size="12" />
-            </label>
-            <div id="font_family_dropdown" class="dropdown">
-              <button></button>
-              <ul>
-                <li style="font-family:serif">Serif</li>
-                <li style="font-family:sans-serif">Sans-serif</li>
-                <li style="font-family:cursive">Cursive</li>
-                <li style="font-family:fantasy">Fantasy</li>
-                <li style="font-family:monospace">Monospace</li>
-                <li style="font-family:courier">Courier</li>
-                <li style="font-family:helvetica">Helvetica</li>
-                <li style="font-family:times">Times</li>
-              </ul>
-            </div>
           </div>
+          <se-list id="tool_font_family" label="Font:">
+            <se-list-item value="Sans-serif"> <div style="font-family:serif">Sans-serif</div></se-list-item>
+            <se-list-item value="Serif"> <div style="font-family:serif">Serif</div></se-list-item>
+            <se-list-item value="Cursive"> <div style="font-family:serif">Cursive</div></se-list-item>
+            <se-list-item value="Fantasy"> <div style="font-family:serif">Fantasy</div></se-list-item>
+            <se-list-item value="Monospace"> <div style="font-family:serif">Monospace</div></se-list-item>
+            <se-list-item value="Courier"> <div style="font-family:serif">Courier</div></se-list-item>
+            <se-list-item value="Helvetica"> <div style="font-family:serif">Helvetica</div></se-list-item>
+            <se-list-item value="Times"> <div style="font-family:serif">Times</div></se-list-item> 
+          </se-list>
           <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="Change Font Size"
             src="./images/fontsize.svg"></se-spin-input>
           <!-- Not visible, but still used -->
@@ -289,8 +287,8 @@
           <div class="tool_sep"></div>
           <se-button id="tool_node_link" title="Link Control Points" src="./images/tool_node_link.svg" pressed></se-button>
           <div class="tool_sep"></div>
-          <se-input id="path_node_x" data-attr="x" size="4" title="Change node's x coordinate" label="x:"></se-input>
+          <se-spin-input id="path_node_x" data-attr="x" size="4" title="Change node's x coordinate" label="x:"></se-spin-input>
-          <se-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:"></se-input>
+          <se-spin-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:"></se-spin-input>
           <select id="seg_type" title="Change Segment type">
             <option id="straight_segments" selected="selected" value="4">Straight</option>
             <option id="curve_segments" value="6">Curve</option>
@@ -335,7 +333,7 @@
       </div> <!-- tools_left -->
       <div id="tools_bottom">
         <!-- Zoom buttons -->
-        <se-dropdown id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
+        <se-zoom id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
           <div value="1000">1000</div>
           <div value="400">400</div>
           <div value="200">200</div>
@@ -346,98 +344,37 @@
           <div value="selection">Fit to selection</div>
           <div value="layer">Fit to layer content</div>
           <div value="content">Fit to all content</div>
-        </se-dropdown>
+        </se-zoom>
-        <div id="tool_fill">
+        <se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker>
-          <label for="fill_color" title="Change fill color"></label>
+        <se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke"></se-colorpicker>
-          <div class="color_block">
-            <div id="fill_bg"></div>
-            <div id="fill_color" class="color_block"></div>
-          </div>
-        </div> <!-- tool_fill -->
-        <div id="tool_stroke">
-          <label title="Change stroke color"></label>
-          <div class="color_block">
-            <div id="stroke_bg"></div>
-            <div id="stroke_color" class="color_block" title="Change stroke color" src="./images/fill.svg"></div>
-          </div>
-        </div>
         <se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width by 1" label=""></se-spin-input>
-        <label class="stroke_tool">
+        <se-list id="stroke_style" title="Change stroke dash style" label="">
-          <select id="stroke_style" title="Change stroke dash style">
+            <se-list-item value="none">&#8212;</se-list-item>
-            <option selected="selected" value="none">&#8212;</option>
+            <se-list-item value="2,2">...</se-list-item>
-            <option value="2,2">...</option>
+            <se-list-item value="5,5">- -</se-list-item>
-            <option value="5,5">- -</option>
+            <se-list-item value="5,2,2,2">- .</se-list-item>
-            <option value="5,2,2,2">- .</option>
+            <se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
-            <option value="5,2,2,2,2,2">- ..</option>
+        </se-list>
-          </select>
+        <se-list id="stroke_linejoin" title="Linejoin: Miter" label="">
-        </label>
+          <se-list-item id="linejoin_miter"><se-button size="small" title="Linejoin: Miter" src="./images/linejoin_miter.svg"></se-button></se-list-item>
-        <div class="stroke_tool dropdown" id="stroke_linejoin">
+          <se-list-item id="linejoin_round"><se-button size="small" title="Linejoin: Round" src="./images/linejoin_round.svg"></se-button></se-list-item>
-          <div id="cur_linejoin" title="Linejoin: Miter"></div>
+          <se-list-item id="linejoin_bevel"><se-button size="small" title="Linejoin: Bevel" src="./images/linejoin_bevel.svg"></se-button></se-list-item>  
-          <button></button>
+        </se-list>
-        </div>
+        <se-list id="stroke_linecap" title="Linecap: Butt" label="">
-        <div class="stroke_tool dropdown" id="stroke_linecap">
+          <se-list-item id="linecap_butt"><se-button size="small" title="Linecap: Butt" src="./images/linecap_butt.svg"></se-button></se-list-item>
-          <div id="cur_linecap" title="Linecap: Butt"></div>
+          <se-list-item id="linecap_square"><se-button size="small" title="Linecap: Square" src="./images/linecap_square.svg"></se-button></se-list-item>
-          <button></button>
+          <se-list-item id="linecap_round"><se-button size="small" title="Linecap: Round" src="./images/linecap_round.svg"></se-button></se-list-item>
-        </div>
+        </se-list>
-        <div id="tool_opacity">
+        <se-list id="opacity_dropdown" label="">
-          <se-spin-input size="3" id="group_opacity" min=0 max=100 step=5 title="Change selected item opacity" label=""></se-spin-input>
+          <se-list-item>0%</se-list-item>
-          <div id="opacity_dropdown" class="dropdown">
+          <se-list-item>25%</se-list-item>
-            <button></button>
+          <se-list-item>50%</se-list-item>
-            <ul>
+          <se-list-item>75%</se-list-item>
-              <li>0%</li>
+          <se-list-item>100%</se-list-item>
-              <li>25%</li>
+        </se-list>
-              <li>50%</li>
+        <se-spin-input size="3" id="group_opacity" min=0 max=100 step=5 title="Change selected item opacity" label=""></se-spin-input>
-              <li>75%</li>
-              <li>100%</li>
-              <li class="special">
-                <div id="opac_slider"></div>
-              </li>
-            </ul>
-          </div>
-        </div> <!-- tool_opacity -->
         <se-palette id="palette"></se-palette>
       </div> <!-- tools_bottom -->
-      <div id="option_lists" class="dropdown">
-        <ul id="linejoin_opts">
-          <li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
-          <li class="tool_button" id="linejoin_round" title="Linejoin: Round"></li>
-          <li class="tool_button" id="linejoin_bevel" title="Linejoin: Bevel"></li>
-        </ul>
-        <ul id="linecap_opts">
-          <li class="tool_button current" id="linecap_butt" title="Linecap: Butt"></li>
-          <li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
-          <li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
-        </ul>
-        <ul id="position_opts" class="optcols3">
-          <li class="push_button" id="tool_posleft" title="Align Left"></li>
-          <li class="push_button" id="tool_poscenter" title="Align Center"></li>
-          <li class="push_button" id="tool_posright" title="Align Right"></li>
-          <li class="push_button" id="tool_postop" title="Align Top"></li>
-          <li class="push_button" id="tool_posmiddle" title="Align Middle"></li>
-          <li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
-        </ul>
-      </div>
-      <!-- hidden divs -->
-      <div id="color_picker"></div>
-    </div> <!-- svg_editor -->
-    <div id="svg_source_editor">
-      <div class="overlay"></div>
-      <div id="svg_source_container">
-        <div id="tool_source_back" class="toolbar_button">
-          <button id="tool_source_save">Apply Changes</button>
-          <button id="tool_source_cancel">Cancel</button>
-        </div>
-        <div id="save_output_btns">
-          <p id="copy_save_note">
-            Copy the contents of this box into a text editor,
-            then save the file with a .svg extension.</p>
-          <button id="copy_save_done">Done</button>
-        </div>
-        <form>
-          <textarea id="svg_source_textarea" spellcheck="false"></textarea>
-        </form>
-      </div>
-    </div>
     <div id="dialog_box">
       <div class="overlay"></div>
       <div id="dialog_container">
@@ -445,26 +382,6 @@
         <div id="dialog_buttons"></div>
       </div>
     </div>
-    <ul id="cmenu_canvas" class="contextMenu">
-      <li><a href="#cut">Cut<span class="shortcut">META+X</span></a></li>
-      <li><a href="#copy">Copy<span class="shortcut">META+C</span></a></li>
-      <li><a href="#paste">Paste</a></li>
-      <li><a href="#paste_in_place">Paste in Place</a></li>
-      <li class="separator"><a href="#delete">Delete<span class="shortcut">BACKSPACE</span></a></li>
-      <li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li>
-      <li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li>
-      <li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">CTRL+SHFT+]</span></a></li>
-      <li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li>
-      <li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li>
-      <li><a href="#move_back">Send to Back<span class="shortcut">CTRL+SHFT+[</span></a></li>
-    </ul>
-    <ul id="cmenu_layers" class="contextMenu">
-      <li><a href="#dupe">Duplicate Layer...</a></li>
-      <li><a href="#delete">Delete Layer</a></li>
-      <li><a href="#merge_down">Merge Down</a></li>
-      <li><a href="#merge_all">Merge All</a></li>
-    </ul>
-
   </div>
 </body>
 

dist/editor/system/jgraduate/LICENSE-Apache2.0.txt

@@ -1,202 +0,0 @@
-
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.