f){if(A++,g.stroke(),A>=y){r=10,k=p;continue}g=m[A],k-=3e4,L=Math.round(k+T*r)+.5}var M=r%2?12:10;o?(g.moveTo(L,15),g.lineTo(L,M)):(g.moveTo(15,L),g.lineTo(M,L))}k+=S}g.strokeStyle="#000",g.stroke()}}var J=Ir.updateCanvas=function(e,t){var n=Tr.getZoom(),r=_,a=Nr("#svgcanvas"),i=_.width(),o=_.height(),s=i,l=o,c=r[0].scrollLeft+s/2,u=r[0].scrollTop+l/2,d=Hr.canvas_expansion;i=Math.max(s,Tr.contentW*n*d),o=Math.max(l,Tr.contentH*n*d),i===s&&o===l?_.css("overflow","hidden"):_.css("overflow","scroll");var h=a.height()/2,f=a.width()/2;a.width(i).height(o);var p=o/2,g=i/2,m=Tr.updateCanvas(i,o),v=g/f,y=i/2-s/2,b=o/2-l/2;t?(t.x+=m.x,t.y+=m.y):t={x:g+(c-f)*v,y:p+(u-h)*v};e?Tr.contentW>r.width()?(_[0].scrollLeft=m.x-10,_[0].scrollTop=m.y-10):(r[0].scrollLeft=y,r[0].scrollTop=b):(r[0].scrollLeft=t.x-s/2,r[0].scrollTop=t.y-l/2),Hr.showRulers&&($(a,n),_.scroll()),!0!==Lr.storagePrompt&&"ignore"===Ir.storagePromptState&&Nr("#dialog_box").hide()},ee=function(){var e="none"===Tr.getColor("fill"),t="none"===Tr.getColor("stroke"),n=["#tool_fhpath","#tool_line"],r=["#tools_rect .tool_button","#tools_ellipse .tool_button","#tool_text","#tool_path"];t?n.forEach((function(e){Nr(e).hasClass("tool_button_current")&&W(),Nr(e).addClass("disabled")})):n.forEach((function(e){Nr(e).removeClass("disabled")})),t&&e?r.forEach((function(e){Nr(e).hasClass("tool_button_current")&&W(),Nr(e).addClass("disabled")})):r.forEach((function(e){Nr(e).removeClass("disabled")})),Tr.runExtensions("toolButtonStateUpdate",{nofill:e,nostroke:t}),Nr(".tools_flyout").each((function(){var e=Nr("#"+this.id+"_show"),t=!1;Nr(this).children().each((function(){Nr(this).hasClass("disabled")||(t=!0)})),e.toggleClass("disabled",!t)})),z()},te=function(){var e=j;an(e)||e.parentNode||(e=null);var t=Tr.getCurrentDrawing().getCurrentLayerName(),n=Tr.getMode(),r="px"!==Hr.baseUnit?Hr.baseUnit:null,i="pathedit"===n,o=Nr("#cmenu_canvas li");if(Nr("#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,#ellipse_panel, #line_panel, #text_panel, #image_panel, #container_panel, #use_panel, #a_panel").hide(),an(e))H?(Nr("#multiselected_panel").show(),o.enableContextMenuItems("#group").disableContextMenuItems("#ungroup")):o.disableContextMenuItems("#delete,#cut,#copy,#group,#ungroup,#move_front,#move_up,#move_down,#move_back");else{var s=e.nodeName,l=Tr.getRotationAngle(e);Nr("#angle").val(l);var c=Tr.getBlur(e);if(Nr("#blur").val(c),Nr("#blur_slider").slider("option","value",c),Tr.addedNew&&"image"===s&&"image"===Tr.getMode()&&(Tr.getHref(e).startsWith("data:")||K({cancelDeletes:!0})),i||"pathedit"===n){var u=v.getNodePoint();if(Nr("#tool_add_subpath").removeClass("push_button_pressed").addClass("tool_button"),Nr("#tool_node_delete").toggleClass("disabled",!v.canDeleteNodes),a("#tool_openclose_path",v.closed_subpath?"open_path":"close_path"),u){var d=Nr("#seg_type");r&&(u.x=ie(u.x),u.y=ie(u.y)),Nr("#path_node_x").val(u.x),Nr("#path_node_y").val(u.y),u.type?d.val(u.type).removeAttr("disabled"):d.val(4).attr("disabled","disabled")}return}if(Nr("#selected_panel").show(),["line","circle","ellipse"].includes(s))Nr("#xy_panel").hide();else{var h,f;if(["g","polyline","path"].includes(s)){var p=Tr.getStrokedBBox([e]);p&&(h=p.x,f=p.y)}else h=e.getAttribute("x"),f=e.getAttribute("y");r&&(h=ie(h),f=ie(f)),Nr("#selected_x").val(h||0),Nr("#selected_y").val(f||0),Nr("#xy_panel").show()}var g=!["image","text","path","g","use"].includes(s);Nr("#tool_topath").toggle(g),Nr("#tool_reorient").toggle("path"===s),Nr("#tool_reorient").toggleClass("disabled",0===l);var m={g:[],a:[],rect:["rx","width","height"],image:["width","height"],circle:["cx","cy","r"],ellipse:["cx","cy","rx","ry"],line:["x1","y1","x2","y2"],text:[],use:[]},_=e.tagName,x=null;if("a"===_&&(x=Tr.getHref(e),Nr("#g_panel").show()),"a"===e.parentNode.tagName&&(Nr(e).siblings().length||(Nr("#a_panel").show(),x=Tr.getHref(e.parentNode))),Nr("#tool_make_link, #tool_make_link").toggle(!x),x&&Nr("#link_url").val(x),m[_]){var w=m[_];if(Nr("#"+_+"_panel").show(),Nr.each(w,(function(t,n){var r=e.getAttribute(n);if("px"!==Hr.baseUnit&&e[n]){var a=e[n].baseVal.value;r=ie(a)}Nr("#"+_+"_"+n).val(r||0)})),"text"===_)Nr("#text_panel").css("display","inline"),Nr("#tool_font_size").css("display","inline"),Tr.getItalic()?Nr("#tool_italic").addClass("push_button_pressed").removeClass("tool_button"):Nr("#tool_italic").removeClass("push_button_pressed").addClass("tool_button"),Tr.getBold()?Nr("#tool_bold").addClass("push_button_pressed").removeClass("tool_button"):Nr("#tool_bold").removeClass("push_button_pressed").addClass("tool_button"),Nr("#font_family").val(e.getAttribute("font-family")),Nr("#font_size").val(e.getAttribute("font-size")),Nr("#text").val(e.textContent),Tr.addedNew&&setTimeout((function(){Nr("#text").focus().select()}),100);else if("image"===_&&"image"===Tr.getMode())X(Tr.getHref(e));else if("g"===_||"use"===_){Nr("#container_panel").show();var S=Tr.getTitle(),k=Nr("#g_title")[0];k.value=S,function(e){var t=Math.min(Math.max(12+6*e.value.length,50),300);Nr(e).width(t)}(k),Nr("#g_title").prop("disabled","use"===_)}}o[("g"===_?"en":"dis")+"ableContextMenuItems"]("#ungroup"),o[("g"!==_&&H?"en":"dis")+"ableContextMenuItems"]("#group")}Nr("#tool_undo").toggleClass("disabled",0===y.getUndoStackSize()),Nr("#tool_redo").toggleClass("disabled",0===y.getRedoStackSize()),Tr.addedNew=!1,e&&!i||H?(Nr("#selLayerNames").removeAttr("disabled").val(t),b.enableContextMenuItems("#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back")):Nr("#selLayerNames").attr("disabled","disabled")},ne=function(){if(!$t){var e="\n #workarea.wireframe #svgcontent * {\n stroke-width: ".concat(1/Tr.getZoom(),"px;\n }\n ");Nr("#wireframe_rules").text(_.hasClass("wireframe")?e:"")}},ae="",oe=function(e){e=e||Tr.getDocumentTitle();var t=G+(e?": "+e:"");Nr("title:first").text(t)};var se=function(){ne()},ce=Tr.zoomChanged=function(e,t,n){var r=_,a=Tr.setBBoxZoom(t,r.width()-15,r.height()-15);if(a){var i=a.zoom,o=a.bbox;i<.001?ue({value:.1}):(Nr("#zoom").val((100*i).toFixed(1)),n?J():J(!1,{x:o.x*i+o.width*i/2,y:o.y*i+o.height*i/2}),"zoom"===Tr.getMode()&&o.width&&E(),se())}},ue=function(e){var t=e.value/100;if(t<.001)e.value=.1;else{var n=Tr.getZoom(),r=_;ce(window,{width:0,height:0,x:(r[0].scrollLeft+r.width()/2)/n,y:(r[0].scrollTop+r.height()/2)/n,zoom:t},!0)}};Nr("#cur_context_panel").delegate("a","click",(function(){var e=Nr(this);return e.attr("data-root")?Tr.leaveContext():Tr.setContext(e.text()),Tr.clearSelection(),!1}));var de=function(){x.fill.prep(),x.stroke.prep()},he={},fe=function(){Nr(".tools_flyout").each((function(){var e=Nr("#"+this.id+"_show");if(!e.data("isLibrary")){var t=Nr(this).children().map((function(){return this.title})).get();e[0].title=t.join(" / ")}}))},pe={},ge=function(e){Nr.each(e,(function(t,n){var r;pe[t]||(pe[t]=[]),(r=pe[t]).push.apply(r,h(n));var a,i=Nr(t).children().not(".tool_button_evt_handled"),o=t+"_show",s=Nr(o),l=!1;i.addClass("tool_button tool_button_evt_handled").unbind("click mousedown mouseup").each((function(){var t="#"+this.getAttribute("id"),r=Object.entries(n).find((function(e){var n=d(e,2);n[0];return n[1].sel===t})),a=d(r,2),i=a[0],c=a[1];he[c.sel]=c.fn,c.isDefault&&(l=i);var u=function(t){var n,r=c;if("keydown"===t.type){var a=Nr(r.parent+"_show").hasClass("tool_button_current"),i=Nr(r.parent+"_show").attr("data-curopt");Object.entries(e[c.parent]).some((function(n){var o=d(n,2),s=o[0],l=o[1];return l.sel===i&&(t.shiftKey&&a?(s=parseInt(s),r=pe[c.parent][s+1]||e[c.parent][0]):r=l,!0)}))}return!Nr(this).hasClass("disabled")&&(Y(o)&&r.fn(),(n=r.icon?Nr.getSvgIcon(r.icon,!0):Nr(r.sel).children().eq(0).clone())[0].setAttribute("width",s.width()),n[0].setAttribute("height",s.height()),s.children(":not(.flyout_arrow_horiz)").remove(),s.append(n).attr("data-curopt",r.sel),!0)};return Nr(this).mouseup(u),c.key&&Nr(document).bind("keydown",c.key[0]+" shift+"+c.key[0],u),!0})),l?s.attr("data-curopt",n[l].sel):s.attr("data-curopt")||s.attr("data-curopt",n[0].sel);var c=Nr(o).position();s.mousedown((function(e){if(s.hasClass("disabled"))return!1;var n=Nr(t),r=c.left+34,i=-1*n.width(),o=n.data("shown_popop")?200:0;return a=setTimeout((function(){s.data("isLibrary")?n.css("left",r).show():n.css("left",i).show().animate({left:r},150),n.data("shown_popop",!0)}),o),e.preventDefault(),!0})).mouseup((function(e){clearTimeout(a);var t=Nr(this).attr("data-curopt");s.data("isLibrary")&&Nr(o.replace("_show","")).is(":visible")?Y(o,!0):Y(o)&&he[t]&&he[t]()}))})),fe(),l()},me=function(e,t){return Nr("",{class:"tools_flyout",id:e}).appendTo("#svg_editor").append(t)},ve=function(e,t,n,r){var i=Nr(e),o=r.dropUp,s=Nr(t);o&&Nr(e).addClass("dropup"),s.find("li").bind("mouseup",(function(){r.seticon&&(a("#cur_"+i[0].id,Nr(this).children()),Nr(this).addClass("current").siblings().removeClass("current"));for(var e=arguments.length,t=new Array(e),o=0;o
",{id:t.panel}).appendTo("#tools_top")),t.type){case"tool_button":n=''+t.id+"
";var i=Nr(n).appendTo(a);t.events&&Nr.each(t.events,(function(e,t){Nr(i).bind(e,t)}));break;case"select":n="").appendTo(a).find("select");Nr.each(t.events,(function(e,t){Nr(o).bind(e,t)}));break;case"button-select":n='';var s=Nr('').appendTo("#option_lists");t.colnum&&s.addClass("optcols"+t.colnum),Nr(n).appendTo(a).children(),l.push({elem:"#"+t.id,list:"#"+t.id+"_opts",title:t.title,callback:t.events.change,cur:"#cur_"+t.id});break;case"input":n="'+t.label+':';var c=Nr(n).appendTo(a).find("input");t.spindata&&c.SpinButton(t.spindata),t.events&&Nr.each(t.events,(function(e,t){c.bind(e,t)}))}})),c=n.svgicons,!n.buttons){e.next=24;break}if(d={},h={},p={},g={},Nr.each(n.buttons,(function(e,t){for(var n,r,a,i,o,s,l,u=t.id,f=e;Nr("#"+u).length;)u=t.id+"_"+ ++f;if(c){d[u]=t.icon,h[u]=t.title;var m=t.svgicon||t.id;"app_menu"===t.type?p["#"+u+" > div"]=m:p["#"+u]=m}else n=Nr('
');switch(t.type){case"mode_flyout":case"mode":r="tool_button",a="#tools_left";break;case"context":r="tool_button",a="#"+t.panel,Nr(a).length||Nr("",{id:t.panel}).appendTo("#tools_top");break;case"app_menu":r="",a="#main_menu ul"}var v,y=Nr(t.list||"app_menu"===t.type?"
":"
").attr("id",u).attr("title",t.title).addClass(r);if(t.includeWith||t.list){if(t.list){if(y.addClass("push_button"),Nr("#"+t.list+"_opts").append(y),t.isDefault){Nr("#cur_"+t.list).append(y.children().clone());var _=t.svgicon||t.id;p["#cur_"+t.list]=_}}else if(t.includeWith){var b,x=t.includeWith;i=(l=Nr(x.button)).parent(),l.parent().hasClass("tools_flyout")||(b=l[0].id.replace("tool_","tools_"),o=l.clone().attr("id",b+"_show").append(Nr("
",{class:"flyout_arrow_horiz"})),l.before(o),i=me(b,l)),s=bn.getButtonData(x.button),x.isDefault&&(p["#"+b+"_show"]=t.id);var w=g["#"+i[0].id]=[{sel:"#"+u,fn:t.events.click,icon:t.id,key:t.key,isDefault:Boolean(t.includeWith&&t.includeWith.isDefault)},s],S="position"in x?x.position:"last",k=i.children().length;!isNaN(S)&&S>=0&&S
",{class:"flyout_arrow_horiz"})),l.before(o),(i=me(v,l)).data("isLibrary",!0),o.data("isLibrary",!0)),p["#"+v+"_show"]=t.id,g["#"+i[0].id]=[{sel:"#"+u,fn:t.events.click,icon:t.id,isDefault:!0}]):"app_menu"===t.type&&y.append("").append(t.title);c||y.append(n),t.list||Nr.each(t.events,(function(e,n){"click"===e&&"mode"===t.type?(F()&&"click"===e&&(e="mousedown"),t.includeWith?y.bind(e,n):y.bind(e,(function(){Y(y)&&n()})),t.key&&(Nr(document).bind("keydown",t.key,n),t.title&&y.attr("title",t.title+" ["+t.key+"]"))):y.bind(e,n)})),ge(g)})),Nr.each(l,(function(){ve(this.elem,this.list,this.callback,{seticon:!0})})),!c){e.next=24;break}return e.abrupt("return",new Promise((function(e,t){Nr.svgIcons(c,{w:24,h:24,id_match:!1,no_img:!V(),fallback:d,placement:p,callback:function(t){"m"!==Nr.pref("iconsize")&&o(),s(),e()}})})));case 24:return e.abrupt("return",s());case 25:case"end":return e.stop()}}),e)})));return function(t,n){return e.apply(this,arguments)}}();Tr.bind("selected",(function(e,t){var n=Tr.getMode();"select"===n&&E();var r="pathedit"===n;j=1===t.length||an(t[1])?t[0]:null,H=t.length>=2&&!an(t[1]),an(j)||r||function(){var e,t;if(!an(j))switch(j.tagName){case"use":case"image":case"foreignObject":break;case"g":case"a":var n=j.getElementsByTagName("*"),r=null;for(e=0,t=n.length;e
=2&&!an(t[1])))switch(n){case"rotate":var a=Tr.getRotationAngle(r);Nr("#angle").val(a),Nr("#tool_reorient").toggleClass("disabled",0===a)}Tr.runExtensions("elementTransition",{elems:t})}})),Tr.bind("changed",(function(e,t){var n=Tr.getMode();"select"===n&&E(),t.forEach((function(e){var t=e&&"svg"===e.tagName;t||function(e){return e&&"g"===e.tagName&&vn.CLASS_REGEX.test(e.getAttribute("class"))}(e)?(T(),t&&J()):e&&j&&an(j.parentNode)&&(j=e)})),Ir.showSaveWarning=!0,te(),j&&"select"===n&&(x.fill.update(),x.stroke.update()),Tr.runExtensions("elementChanged",{elems:t})})),Tr.bind("saved",(function(e,t){if(Ir.showSaveWarning=!1,t='\n'+t,B())O(0,!0);else{var n=document.createElement("a");n.href="data:image/svg+xml;base64,"+Ct(t),n.download="icon.svg",n.style.display="none",document.body.append(n),n.click();var r=Nr.pref("save_notice_done");if("all"!==r){var a=Rr.notification.saveFromBrowser.replace("%s","SVG");R()?t.includes("",Nr(t).parentsUntil("#svgcontent > g").andSelf().each((function(){this.id&&(r+=" > "+this.id,n+=this!==t?' > '+this.id+"":" > "+this.id)})),ae=r}else ae=null;Nr("#cur_context_panel").toggle(Boolean(t)).html(n),oe()})),Tr.bind("extension_added",_e),Tr.textActions.setInputElem(Nr("#text")[0]);var be='';Nr.each(["#000000","#3f3f3f","#7f7f7f","#bfbfbf","#ffffff","#ff0000","#ff7f00","#ffff00","#7fff00","#00ff00","#00ff7f","#00ffff","#007fff","#0000ff","#7f00ff","#ff00ff","#ff007f","#7f0000","#7f3f00","#7f7f00","#3f7f00","#007f00","#007f3f","#007f7f","#003f7f","#00007f","#3f007f","#7f007f","#7f003f","#ffaaaa","#ffd4aa","#ffffaa","#d4ffaa","#aaffaa","#aaffd4","#aaffff","#aad4ff","#aaaaff","#d4aaff","#ffaaff","#ffaad4"],(function(e,t){be+=''})),Nr("#palette").append(be);be="",Nr.each(["#FFF","#888","#000"],(function(){be+=''})),Nr("#bg_blocks").append(be);var xe=Nr("#bg_blocks div"),we="cur_background";xe.each((function(){Nr(this).click((function(){xe.removeClass(we),Nr(this).addClass(we)}))})),Q(Nr.pref("bkgd_color"),Nr.pref("bkgd_url")),Nr("#image_save_opts input").val([Nr.pref("img_save")]);var Se=function(e,t){an(t)&&(t=e.value),Nr("#group_opacity").val(t),e&&e.handle||Nr("#opac_slider").slider("option","value",t),Tr.setOpacity(t/100)},ke=function(e,t,n){an(t)&&(t=e.value),Nr("#blur").val(t);var r=!1;e&&e.handle||(Nr("#blur_slider").slider("option","value",t),r=!0),n?Tr.setBlurNoUndo(t):Tr.setBlur(t,r)};Nr("#stroke_style").change((function(){Tr.setStrokeAttr("stroke-dasharray",Nr(this).val()),z()})),Nr("#stroke_linejoin").change((function(){Tr.setStrokeAttr("stroke-linejoin",Nr(this).val()),z()})),Nr("select").change((function(){Nr(this).blur()}));var Ce,Ae,Ee,Ge,Pe,Ie=!1;Nr("#selLayerNames").change(n(regeneratorRuntime.mark((function e(){var t,n,r;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t=this.options[this.selectedIndex].value,n=Rr.notification.QmoveElemsToLayer.replace("%s",t),r=function(e){e&&(Ie=!0,Tr.moveSelectedToLayer(t),Tr.clearSelection(),T())},!t){e.next=14;break}if(!Ie){e.next=8;break}r(!0),e.next=14;break;case 8:return e.next=10,Nr.confirm(n);case 10:if(e.sent){e.next=13;break}return e.abrupt("return");case 13:r(!0);case 14:case"end":return e.stop()}}),e,this)})))),Nr("#font_family").change((function(){Tr.setFontFamily(this.value)})),Nr("#seg_type").change((function(){Tr.setSegType(Nr(this).val())})),Nr("#text").bind("keyup input",(function(){Tr.setTextContent(this.value)})),Nr("#image_url").change((function(){X(this.value)})),Nr("#link_url").change((function(){this.value.length?Tr.setLinkURL(this.value):Tr.removeHyperlink()})),Nr("#g_title").change((function(){Tr.setGroupTitle(this.value)})),Nr(".attr_changer").change((function(){var e=this.getAttribute("data-attr"),t=this.value;if(!le(e,t,j))return this.value=j.getAttribute(e),Nr.alert(Rr.notification.invalidAttrValGiven),!1;if("id"!==e&&"class"!==e)if(isNaN(t))t=Tr.convertToNum(e,t);else if("px"!==Hr.baseUnit){var n=re();(j[e]||"pathedit"===Tr.getMode()||"x"===e||"y"===e)&&(t*=n[Hr.baseUnit])}if("id"===e){var r=j;Tr.clearSelection(),r.id=t,Tr.addToSelection([r],!0)}else Tr.changeSelectedAttribute(e,t);return this.blur(),!0})),Nr("#palette").mouseover((function(){var e=Nr('');Nr(this).append(e),e.focus().remove()})),Nr(".palette_item").mousedown((function(e){var t,n=e.shiftKey||2===e.button?"stroke":"fill",r=Nr(this).data("rgb");"none"===r||"transparent"===r||"initial"===r?(r="none",t=new Nr.jGraduate.Paint):t=new Nr.jGraduate.Paint({alpha:100,solidColor:r.substr(1)}),x[n].setPaint(t),Tr.setColor(n,r),"none"!==r&&1!==Tr.getPaintOpacity(n)&&Tr.setPaintOpacity(n,1),ee()})).bind("contextmenu",(function(e){e.preventDefault()})),Nr("#toggle_stroke_tools").on("click",(function(){Nr("#tools_bottom").toggleClass("expanded")})),Ce=_[0],Ae=null,Ee=null,Ge=!1,Pe=!1,Nr("#svgcanvas").bind("mousemove mouseup",(function(e){return!1===Ge||(Ce.scrollLeft-=e.clientX-Ae,Ce.scrollTop-=e.clientY-Ee,Ae=e.clientX,Ee=e.clientY,"mouseup"===e.type&&(Ge=!1),!1)})).mousedown((function(e){return 1!==e.button&&!0!==Pe||(Ge=!0,Ae=e.clientX,Ee=e.clientY,!1)})),Nr(window).mouseup((function(){Ge=!1})),Nr(document).bind("keydown","space",(function(e){Tr.spaceKey=Pe=!0,e.preventDefault()})).bind("keyup","space",(function(e){e.preventDefault(),Tr.spaceKey=Pe=!1})).bind("keydown","shift",(function(e){"zoom"===Tr.getMode()&&_.css("cursor",C)})).bind("keyup","shift",(function(e){"zoom"===Tr.getMode()&&_.css("cursor",k)})),Ir.setPanning=function(e){Tr.spaceKey=Pe=e},function(){var e=Nr("#main_icon"),t=Nr("#main_icon span"),n=Nr("#main_menu"),r=!1,a=0,i=!0,o=!1;Nr(window).mouseup((function(t){r||(e.removeClass("buttondown"),"INPUT"!==t.target.tagName?n.fadeOut(200):o||(o=!0,Nr(t.target).click((function(){n.css("margin-left","-9999px").show()})))),r=!1})).mousedown((function(e){Nr(e.target).closest("div.tools_flyout, .contextMenu").length||Nr(".tools_flyout:visible,.contextMenu").fadeOut(250)})),t.bind("mousedown",(function(){e.hasClass("buttondown")?n.fadeOut(200):(n.css("margin-left",0).show(),a||(a=n.height()),n.css("height",0).animate({height:a},200),r=!0),e.toggleClass("buttondown buttonup")})).hover((function(){r=!0})).mouseout((function(){r=!1}));var s=Nr("#main_menu li");s.mouseover((function(){i="rgba(0, 0, 0, 0)"===Nr(this).css("background-color"),s.unbind("mouseover"),i&&s.mouseover((function(){this.style.backgroundColor="#FFC"})).mouseout((function(){return this.style.backgroundColor="transparent",!0}))}))}(),Ir.addDropDown=function(e,t,n){if(Nr(e).length){var r=Nr(e).find("button"),a=Nr(e).find("ul").attr("id",Nr(e)[0].id+"-list");n?Nr(e).addClass("dropup"):Nr("#option_lists").append(a),a.find("li").bind("mouseup",t);var i=!1;Nr(window).mouseup((function(e){i||(r.removeClass("down"),a.hide()),i=!1})),r.bind("mousedown",(function(){if(r.hasClass("down"))a.hide();else{if(!n){var t=Nr(e).position();a.css({top:t.top+24,left:t.left-10})}a.show(),i=!0}r.toggleClass("down")})).hover((function(){i=!0})).mouseout((function(){i=!1}))}},Ir.addDropDown("#font_family_dropdown",(function(){Nr("#font_family").val(Nr(this).text()).change()})),Ir.addDropDown("#opacity_dropdown",(function(){if(!Nr(this).find("div").length){var e=parseInt(Nr(this).text().split("%")[0]);Se(!1,e)}}),!0),Nr("#opac_slider").slider({start:function(){Nr("#opacity_dropdown li:not(.special)").hide()},stop:function(){Nr("#opacity_dropdown li").show(),Nr(window).mouseup()},slide:function(e,t){Se(t)}}),Ir.addDropDown("#blur_dropdown",Nr.noop);var Ne,Te,Le=!1;Nr("#blur_slider").slider({max:10,step:.1,stop:function(e,t){Le=!1,ke(t),Nr("#blur_dropdown li").show(),Nr(window).mouseup()},start:function(){Le=!0},slide:function(e,t){ke(t,null,Le)}}),Ir.addDropDown("#zoom_dropdown",(function(){var e=Nr(this),t=e.data("val");t?ce(window,t):ue({value:parseFloat(e.text())})}),!0),ve("#stroke_linecap","#linecap_opts",(function(){q(this,!0)}),{dropUp:!0}),ve("#stroke_linejoin","#linejoin_opts",(function(){q(this,!0)}),{dropUp:!0}),ve("#tool_position","#position_opts",(function(){var e=this.id.replace("tool_pos","").charAt(0);Tr.alignSelectedElements(e,"page")}),{multiclick:!0}),Te=function(){Nr(Ne).blur()},Nr("#svg_editor").find("button, select, input:not(#text)").focus((function(){Ne=this,A="toolbars",_.mousedown(Te)})).blur((function(){A="canvas",_.unbind("mousedown",Te),"textedit"===Tr.getMode()&&Nr("#text").focus()}));var Me,Oe=function(){Y("#tool_fhpath")&&Tr.setMode("fhpath")},je=function(){Y("#tool_line")&&Tr.setMode("line")},Ve=function(){Y("#tool_square")&&Tr.setMode("square")},Re=function(){Y("#tool_rect")&&Tr.setMode("rect")},Be=function(){Y("#tool_fhrect")&&Tr.setMode("fhrect")},De=function(){Y("#tool_circle")&&Tr.setMode("circle")},Ue=function(){Y("#tool_ellipse")&&Tr.setMode("ellipse")},Fe=function(){Y("#tool_fhellipse")&&Tr.setMode("fhellipse")},He=function(){Y("#tool_image")&&Tr.setMode("image")},ze=function(){Y("#tool_zoom")&&(Tr.setMode("zoom"),_.css("cursor",k))},qe=function(e){var t=Tr.getResolution();e=e?t.zoom*e:1,Nr("#zoom").val(100*e),Tr.setZoom(e),se(),J(!0)},Ye=function(){Y("#tool_zoom")&&(qe(),E())},We=function(){Y("#tool_text")&&Tr.setMode("text")},Xe=function(){Y("#tool_path")&&Tr.setMode("path")},Qe=function(){an(j)&&!H||Tr.deleteSelectedElements()},Ke=function(){an(j)&&!H||Tr.cutSelectedElements()},Ze=function(){an(j)&&!H||Tr.copySelectedElements()},$e=function(){var e=Tr.getZoom(),t=(_[0].scrollLeft+_.width()/2)/e-Tr.contentW,n=(_[0].scrollTop+_.height()/2)/e-Tr.contentH;Tr.pasteElements("point",t,n)},Je=function(){an(j)||Tr.moveToTopSelectedElement()},et=function(){an(j)||Tr.moveToBottomSelectedElement()},tt=function(e){an(j)||Tr.moveUpDownSelected(e)},nt=function(){an(j)||Tr.convertToPath()},rt=function(){an(j)||v.reorient()},at=function(){var e=n(regeneratorRuntime.mark((function e(){var t;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(an(j)&&!H){e.next=5;break}return e.next=3,Nr.prompt(Rr.notification.enterNewLinkURL,"http://");case 3:(t=e.sent)&&Tr.makeHyperlink(t);case 5:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}(),it=function(e,t){if(!an(j)||H){if(Hr.gridSnapping){var n=Tr.getZoom()*Hr.snappingStep;e*=n,t*=n}Tr.moveSelectedElements(e,t)}},ot=function(){Nr("#tool_node_link").toggleClass("push_button_pressed tool_button");var e=Nr("#tool_node_link").hasClass("push_button_pressed");v.linkControlPoints(e)},st=function(){v.getNodePoint()&&v.clonePathNode()},lt=function(){v.getNodePoint()&&v.deletePathNode()},ct=function(){var e=Nr("#tool_add_subpath"),t=!e.hasClass("push_button_pressed");e.toggleClass("push_button_pressed tool_button"),v.addSubPath(t)},ut=function(){v.opencloseSubPath()},dt=function(){Tr.cycleElement(1)},ht=function(){Tr.cycleElement(0)},ft=function(e,t){if(!an(j)&&!H){e||(t*=-1);var n=parseFloat(Nr("#angle").val())+t;Tr.setRotationAngle(n),te()}},pt=function(){var e=n(regeneratorRuntime.mark((function e(){var t,n,r;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=d(Hr.dimensions,2),n=t[0],r=t[1],e.next=3,Nr.confirm(Rr.notification.QwantToClear);case 3:if(e.sent){e.next=6;break}return e.abrupt("return");case 6:E(),Tr.clear(),Tr.setResolution(n,r),J(!0),qe(),T(),te(),de(),Tr.runExtensions("onNewDocument");case 15:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}(),gt=function(){return Tr.setBold(!Tr.getBold()),te(),!1},mt=function(){return Tr.setItalic(!Tr.getItalic()),te(),!1},vt=function(){var e=n(regeneratorRuntime.mark((function e(){var t,n,r,a,i;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return r=function(){var e,t,r=Rr.notification.loadingImage;if("new"===Hr.exportWindowType&&Ir.exportWindowCt++,n=Hr.canvasName+Ir.exportWindowCt,Me)t=Me;else{if(e='\n \n \n '.concat(r,"\n \n ").concat(r,"
\n "),"undefined"!=typeof URL&&URL.createObjectURL){var a=new Blob([e],{type:"text/html"});t=URL.createObjectURL(a)}else t="data:text/html;base64;charset=utf-8,"+Ct(e);Me=t}w=window.open(t,n)},e.next=3,Nr.select("Select an image type for export: ",["PNG","JPEG","BMP","WEBP","PDF"],(function(){var e=Nr(this);"JPEG"===e.val()||"WEBP"===e.val()?Nr("#image-slider").length||Nr("')).appendTo(e.parent()):Nr("#image-slider").parent().remove()}));case 3:if(t=e.sent){e.next=6;break}return e.abrupt("return");case 6:if(a=D(),"PDF"!==t){e.next=12;break}Ur||a||r(),Tr.exportPDF(n),e.next=16;break;case 12:return Dr||r(),i=parseInt(Nr("#image-slider").val())/100,e.next=16,Tr.rasterExport(t,i,n);case 16:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}(),yt=function(){Tr.open()},_t=function(){},bt=function(){y.getUndoStackSize()>0&&(y.undo(),T())},xt=function(){y.getRedoStackSize()>0&&(y.redo(),T())},wt=function(){H?Tr.groupSelectedElements():j&&Tr.ungroupSelectedElement()},St=function(){Tr.cloneSelectedElements(20,20)},kt=function(){var e=this.id.replace("tool_align","").charAt(0);Tr.alignSelectedElements(e,Nr("#align_relative_to").val())},At=function(){if(Nr("#tool_wireframe").toggleClass("push_button_pressed tool_button"),_.toggleClass("wireframe"),!$t){var e=Nr("#wireframe_rules");e.length?e.empty():Nr('').appendTo("head"),ne()}};Nr("#svg_docprops_container, #svg_prefs_container").draggable({cancel:"button,fieldset",containment:"window"}).css("position","absolute");var Et,Gt,Pt=!1,It=!1,Tt=function(){if(!Pt){Pt=!0,Nr("#image_save_opts input").val([Nr.pref("img_save")]);var e=Tr.getResolution();"px"!==Hr.baseUnit&&(e.w=ie(e.w)+Hr.baseUnit,e.h=ie(e.h)+Hr.baseUnit),Nr("#canvas_width").val(e.w),Nr("#canvas_height").val(e.h),Nr("#canvas_title").val(Tr.getDocumentTitle()),Nr("#svg_docprops").show()}},Lt=function(){if(!It){It=!0,Nr("#main_menu").hide();var e=Fr.bkgd_color,t=Nr.pref("bkgd_url");xe.each((function(){var t=Nr(this),n=t.css("background-color")===e;t.toggleClass(we,n),n&&Nr("#canvas_bg_url").removeClass(we)})),e||xe.eq(0).addClass(we),t&&Nr("#canvas_bg_url").val(t),Nr("#grid_snapping_on").prop("checked",Hr.gridSnapping),Nr("#grid_snapping_step").attr("value",Hr.snappingStep),Nr("#grid_color").attr("value",Hr.gridColor),Nr("#svg_prefs").show()}},Mt=function(){window.open("https://github.com/SVG-Edit/svgedit","_blank")},Ot=function(){Nr("#svg_source_editor").hide(),L=!1,Nr("#svg_source_textarea").blur()},jt=function(){var e=n(regeneratorRuntime.mark((function e(){var t;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(L){e.next=2;break}return e.abrupt("return");case 2:if(t=function(){Tr.clearSelection(),Ot(),qe(),T(),oe(),de()},Tr.setSvgString(Nr("#svg_source_textarea").val())){e.next=11;break}return e.next=6,Nr.confirm(Rr.notification.QerrorsRevertToSource);case 6:if(e.sent){e.next=9;break}return e.abrupt("return");case 9:return t(),e.abrupt("return");case 11:t(),E();case 13:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}(),Vt=function(){Nr("#svg_docprops").hide(),Nr("#canvas_width,#canvas_height").removeAttr("disabled"),Nr("#resolution")[0].selectedIndex=0,Nr("#image_save_opts input").val([Nr.pref("img_save")]),Pt=!1},Rt=function(){Nr("#svg_prefs").hide(),It=!1},Bt=function(){var e=Nr("#canvas_title").val();oe(e),Tr.setDocumentTitle(e);var t=Nr("#canvas_width"),n=t.val(),r=Nr("#canvas_height"),a=r.val();return"fit"===n||le("width",n)?(t.parent().removeClass("error"),"fit"===a||le("height",a)?(r.parent().removeClass("error"),Tr.setResolution(n,a)?(Nr.pref("img_save",Nr("#image_save_opts :checked").val()),J(),Vt(),!0):(Nr.alert(Rr.notification.noContentToFitTo),!1)):(r.parent().addClass("error"),Nr.alert(Rr.notification.invalidAttrValGiven),!1)):(t.parent().addClass("error"),Nr.alert(Rr.notification.invalidAttrValGiven),!1)},Dt=Ir.savePreferences=n(regeneratorRuntime.mark((function t(){var n,r,a,i;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(Q(Nr("#bg_blocks div.cur_background").css("background-color")||"#FFF",Nr("#canvas_bg_url").val()),(n=Nr("#lang_select").val())===Nr.pref("lang")){t.next=11;break}return t.next=6,Ir.putLocale(n,e,Hr);case 6:return r=t.sent,a=r.langParam,i=r.langData,t.next=11,En(a,i);case 11:u(Nr("#iconsize").val()),Hr.gridSnapping=Nr("#grid_snapping_on")[0].checked,Hr.snappingStep=Nr("#grid_snapping_step").val(),Hr.gridColor=Nr("#grid_color").val(),Hr.showRulers=Nr("#show_rulers")[0].checked,Nr("#rulers").toggle(Hr.showRulers),Hr.showRulers&&$(),Hr.baseUnit=Nr("#base_unit").val(),Tr.setConfig(Hr),J(),Rt();case 22:case"end":return t.stop()}}),t)}))),Ut=Nr.noop,Ft=function(){var e=n(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(Nr("#dialog_box").hide(),L||Pt||It){e.next=4;break}return ae&&Tr.leaveContext(),e.abrupt("return");case 4:if(!L){e.next=15;break}if(M===Nr("#svg_source_textarea").val()){e.next=12;break}return e.next=8,Nr.confirm(Rr.notification.QignoreSourceChanges);case 8:e.sent&&Ot(),e.next=13;break;case 12:Ot();case 13:e.next=16;break;case 15:Pt?Vt():It&&Rt();case 16:Ut();case 17:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}(),Ht={width:Nr(window).width(),height:Nr(window).height()};if(B()&&(Ut=function(){0===_[0].scrollLeft&&0===_[0].scrollTop&&(_[0].scrollLeft=g.left,_[0].scrollTop=g.top)},g={left:_[0].scrollLeft,top:_[0].scrollTop},Nr(window).resize(Ut),Ir.ready((function(){return new Promise((function(e,t){setTimeout((function(){Ut(),e()}),500)}))})),_.scroll((function(){g={left:_[0].scrollLeft,top:_[0].scrollTop}}))),Nr(window).resize((function(e){Nr.each(Ht,(function(e,t){var n=Nr(window)[e]();_[0]["scroll"+("width"===e?"Left":"Top")]-=(n-t)/2,Ht[e]=n})),l()})),_.scroll((function(){Nr("#ruler_x").length&&(Nr("#ruler_x")[0].scrollLeft=_[0].scrollLeft),Nr("#ruler_y").length&&(Nr("#ruler_y")[0].scrollTop=_[0].scrollTop)})),Nr("#url_notice").click((function(){Nr.alert(this.title)})),Nr("#change_image_url").click(K),Et="tool_button_current",Gt="",Nr.each(["clear","open","save","source","delete","delete_multi","paste","clone","clone_multi","move_top","move_bottom"],(function(e,t){Gt+=(e?",":"")+"#tool_"+t})),Nr(Gt).mousedown((function(){Nr(this).addClass(Et)})).bind("mousedown mouseout",(function(){Nr(this).removeClass(Et)})),Nr("#tool_undo, #tool_redo").mousedown((function(){Nr(this).hasClass("disabled")||Nr(this).addClass(Et)})).bind("mousedown mouseout",(function(){Nr(this).removeClass(Et)})),U()&&!window.opera)for(var zt=["tool_clear","tool_save","tool_source","tool_undo","tool_redo","tool_clone"],qt=zt.length;qt--;){var Yt=document.getElementById(zt[qt]);if(Yt){var Wt=Yt.title,Xt=Wt.indexOf("Ctrl+");Yt.title=[Wt.substr(0,Xt),"Cmd+",Wt.substr(Xt+5)].join("")}}var Qt=function(e){var t="stroke_color"===e.attr("id")?"stroke":"fill",n="stroke"===t?Rr.ui.pick_stroke_paint_opacity:Rr.ui.pick_fill_paint_opacity,r=e.offset(),a=x[t].paint;Nr("#color_picker").draggable({cancel:".jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker",containment:"window"}).css(Hr.colorPickerCSS||{left:r.left-140,bottom:40}).jGraduate({paint:a,window:{pickerTitle:n},images:{clientPath:Hr.jGraduatePath},newstop:"inverse"},(function(e){a=new Nr.jGraduate.Paint(e),x[t].setPaint(a),Tr.setPaint(t,a),Nr("#color_picker").hide()}),(function(){Nr("#color_picker").hide()}))},Kt=function(){function e(t,n){r(this,e);var a=Hr["fill"===n?"initFill":"initStroke"],i=(new DOMParser).parseFromString(''),"text/xml").documentElement;(i=Nr(t)[0].appendChild(document.importNode(i,!0))).setAttribute("width",16.5),this.rect=i.firstElementChild,this.defs=i.getElementsByTagName("defs")[0],this.grad=this.defs.firstElementChild,this.paint=new Nr.jGraduate.Paint({solidColor:a.color}),this.type=n}return i(e,[{key:"setPaint",value:function(e,t){this.paint=e;var n=e.type,r=e.alpha/100,a="none";switch(n){case"solidColor":a="none"!==e[n]?"#"+e[n]:e[n];break;case"linearGradient":case"radialGradient":this.grad.remove(),this.grad=this.defs.appendChild(e[n]),a="url(#"+(this.grad.id="gradbox_"+this.type)+")"}this.rect.setAttribute("fill",a),this.rect.setAttribute("opacity",r),t&&(Tr.setColor(this.type,this._paintColor,!0),Tr.setPaintOpacity(this.type,this._paintOpacity,!0))}},{key:"update",value:function(e){if(j){var t=this.type;switch(j.tagName){case"use":case"image":case"foreignObject":return;case"g":case"a":for(var n=j.getElementsByTagName("*"),r=null,a=0,i=n.length;a0||n300?t=300-n:n+t<2&&(t=2-n),0!==t&&(ln-=t,hn(t))}},pn=function(e){var t=window.devicePixelRatio||1,n=Nr("#sidepanels").width();hn(((t<1?n:n/t)>2||e?0:150*(t<1?1:t))-n)};Nr("#sidepanel_handle").mousedown((function(e){ln=e.pageX,Nr(window).mousemove(fn),dn=!1,setTimeout((function(){dn=!0}),20)})).mouseup((function(e){cn||pn(),ln=-1,cn=!1})),Nr(window).mouseup((function(){ln=-1,cn=!1,Nr("#svg_editor").unbind("mousemove",fn)})),T();Nr(window).bind("load resize",(function(){_.css("line-height",_.height()+"px")})),Nr("#resolution").change((function(){var e=Nr("#canvas_width,#canvas_height");if(this.selectedIndex)if("content"===this.value)e.val("fit").attr("disabled","disabled");else{var t=this.value.split("x");Nr("#canvas_width").val(t[0]),Nr("#canvas_height").val(t[1]),e.removeAttr("disabled")}else"fit"===Nr("#canvas_width").val()&&e.removeAttr("disabled").val(100)})),Nr("input,select").attr("autocomplete","off");var mn,yn,_n=["#tool_source_cancel","#tool_docprops_cancel","#tool_prefs_cancel",".overlay"],bn=(mn=[{sel:"#tool_select",fn:W,evt:"click",key:["V",!0]},{sel:"#tool_fhpath",fn:Oe,evt:"click",key:["Q",!0]},{sel:"#tool_line",fn:je,evt:"click",key:["L",!0],parent:"#tools_line",prepend:!0},{sel:"#tool_rect",fn:Re,evt:"mouseup",key:["R",!0],parent:"#tools_rect",icon:"rect"},{sel:"#tool_square",fn:Ve,evt:"mouseup",parent:"#tools_rect",icon:"square"},{sel:"#tool_fhrect",fn:Be,evt:"mouseup",parent:"#tools_rect",icon:"fh_rect"},{sel:"#tool_ellipse",fn:Ue,evt:"mouseup",key:["E",!0],parent:"#tools_ellipse",icon:"ellipse"},{sel:"#tool_circle",fn:De,evt:"mouseup",parent:"#tools_ellipse",icon:"circle"},{sel:"#tool_fhellipse",fn:Fe,evt:"mouseup",parent:"#tools_ellipse",icon:"fh_ellipse"},{sel:"#tool_path",fn:Xe,evt:"click",key:["P",!0]},{sel:"#tool_text",fn:We,evt:"click",key:["T",!0]},{sel:"#tool_image",fn:He,evt:"mouseup"},{sel:"#tool_zoom",fn:ze,evt:"mouseup",key:["Z",!0]},{sel:"#tool_clear",fn:pt,evt:"mouseup",key:["N",!0]},{sel:"#tool_save",fn:function(){var e;L?jt():(e={images:Nr.pref("img_save"),round_digits:6},Tr.save(e))},evt:"mouseup",key:["S",!0]},{sel:"#tool_export",fn:vt,evt:"mouseup"},{sel:"#tool_open",fn:yt,evt:"mouseup",key:["O",!0]},{sel:"#tool_import",fn:_t,evt:"mouseup"},{sel:"#tool_source",fn:O,evt:"click",key:["U",!0]},{sel:"#tool_wireframe",fn:At,evt:"click",key:["F",!0]},{key:["esc",!1,!1],fn:function(){_n.every((function(e){return Nr(e+":hidden").length}))&&Tr.clearSelection()},hidekey:!0},{sel:_n.join(","),fn:Ft,evt:"click",key:["esc",!1,!1],hidekey:!0},{sel:"#tool_source_save",fn:jt,evt:"click"},{sel:"#tool_docprops_save",fn:Bt,evt:"click"},{sel:"#tool_docprops",fn:Tt,evt:"click"},{sel:"#tool_prefs_save",fn:Dt,evt:"click"},{sel:"#tool_editor_prefs",fn:Lt,evt:"click"},{sel:"#tool_editor_homepage",fn:Mt,evt:"click"},{sel:"#tool_open",fn:function(){window.dispatchEvent(new CustomEvent("openImage"))},evt:"click"},{sel:"#tool_import",fn:function(){window.dispatchEvent(new CustomEvent("importImage"))},evt:"click"},{sel:"#tool_delete,#tool_delete_multi",fn:Qe,evt:"click",key:["del/backspace",!0]},{sel:"#tool_reorient",fn:rt,evt:"click"},{sel:"#tool_node_link",fn:ot,evt:"click"},{sel:"#tool_node_clone",fn:st,evt:"click"},{sel:"#tool_node_delete",fn:lt,evt:"click"},{sel:"#tool_openclose_path",fn:ut,evt:"click"},{sel:"#tool_add_subpath",fn:ct,evt:"click"},{sel:"#tool_move_top",fn:Je,evt:"click",key:"ctrl+shift+]"},{sel:"#tool_move_bottom",fn:et,evt:"click",key:"ctrl+shift+["},{sel:"#tool_topath",fn:nt,evt:"click"},{sel:"#tool_make_link,#tool_make_link_multi",fn:at,evt:"click"},{sel:"#tool_undo",fn:bt,evt:"click"},{sel:"#tool_redo",fn:xt,evt:"click"},{sel:"#tool_clone,#tool_clone_multi",fn:St,evt:"click",key:["D",!0]},{sel:"#tool_group_elements",fn:wt,evt:"click",key:["G",!0]},{sel:"#tool_ungroup",fn:wt,evt:"click"},{sel:"#tool_unlink_use",fn:wt,evt:"click"},{sel:"[id^=tool_align]",fn:kt,evt:"click"},{sel:"#tool_bold",fn:gt,evt:"mousedown"},{sel:"#tool_italic",fn:mt,evt:"mousedown"},{sel:"#sidepanel_handle",fn:pn,key:["X"]},{sel:"#copy_save_done",fn:Ft,evt:"click"},{key:"ctrl+left",fn:function(){ft(0,1)}},{key:"ctrl+right",fn:function(){ft(1,1)}},{key:"ctrl+shift+left",fn:function(){ft(0,5)}},{key:"ctrl+shift+right",fn:function(){ft(1,5)}},{key:"shift+O",fn:ht},{key:"shift+P",fn:dt},{key:[m+"up",!0],fn:function(){qe(2)}},{key:[m+"down",!0],fn:function(){qe(.5)}},{key:[m+"]",!0],fn:function(){tt("Up")}},{key:[m+"[",!0],fn:function(){tt("Down")}},{key:["up",!0],fn:function(){it(0,-1)}},{key:["down",!0],fn:function(){it(0,1)}},{key:["left",!0],fn:function(){it(-1,0)}},{key:["right",!0],fn:function(){it(1,0)}},{key:"shift+up",fn:function(){it(0,-10)}},{key:"shift+down",fn:function(){it(0,10)}},{key:"shift+left",fn:function(){it(-10,0)}},{key:"shift+right",fn:function(){it(10,0)}},{key:["alt+up",!0],fn:function(){Tr.cloneSelectedElements(0,-1)}},{key:["alt+down",!0],fn:function(){Tr.cloneSelectedElements(0,1)}},{key:["alt+left",!0],fn:function(){Tr.cloneSelectedElements(-1,0)}},{key:["alt+right",!0],fn:function(){Tr.cloneSelectedElements(1,0)}},{key:["alt+shift+up",!0],fn:function(){Tr.cloneSelectedElements(0,-10)}},{key:["alt+shift+down",!0],fn:function(){Tr.cloneSelectedElements(0,10)}},{key:["alt+shift+left",!0],fn:function(){Tr.cloneSelectedElements(-10,0)}},{key:["alt+shift+right",!0],fn:function(){Tr.cloneSelectedElements(10,0)}},{key:"a",fn:function(){Tr.selectAllInCurrentLayer()}},{key:m+"a",fn:function(){Tr.selectAllInCurrentLayer()}},{key:m+"z",fn:bt},{key:m+"shift+z",fn:xt},{key:m+"y",fn:xt},{key:m+"x",fn:Ke},{key:m+"c",fn:Ze},{key:m+"v",fn:$e}],yn={"4/Shift+4":"#tools_rect_show","5/Shift+5":"#tools_ellipse_show"},{setAll:function(){var e={};Nr.each(mn,(function(t,n){var r;if(n.sel){if(!(r=Nr(n.sel)).length)return!0;if(n.evt&&(F()&&"click"===n.evt&&(n.evt="mousedown"),r[n.evt](n.fn)),n.parent&&Nr(n.parent+"_show").length){var a=Nr(n.parent);a.length||(a=me(n.parent.substr(1))),n.prepend&&(r[0].style.margin="initial"),a[n.prepend?"prepend":"append"](r),Array.isArray(e[n.parent])||(e[n.parent]=[]),e[n.parent].push(n)}}if(n.key){var i,o=!1;Array.isArray(n.key)?(i=n.key[0],n.key.length>1&&(o=n.key[1])):i=n.key,i=String(i);var s=n.fn;if(Nr.each(i.split("/"),(function(e,t){Nr(document).bind("keydown",t,(function(e){return s(),o&&e.preventDefault(),!1}))})),n.sel&&!n.hidekey&&r.attr("title")){var l=r.attr("title").split("[")[0]+" ("+i+")";yn[i]=n.sel,r.parents("#main_menu").length||r.attr("title",l)}}return!0})),ge(e),Nr(".attr_changer, #image_url").bind("keydown","return",(function(e){Nr(this).change(),e.preventDefault()})),Nr(window).bind("keydown","tab",(function(e){"canvas"===A&&(e.preventDefault(),dt())})).bind("keydown","shift+tab",(function(e){"canvas"===A&&(e.preventDefault(),ht())})),Nr("#tool_zoom").dblclick(Ye)},setTitles:function(){Nr.each(yn,(function(e,t){var n=Nr(t).parents("#main_menu").length;Nr(t).each((function(){var t;t=n?Nr(this).text().split(" [")[0]:this.title.split(" [")[0];var r="";Nr.each(e.split("/"),(function(e,t){var n=t.split("+"),a="";n.length>1&&(a=n[0]+"+",t=n[1]),r+=(e?"/":"")+a+(Rr["key_"+t]||t)})),n?this.lastChild.textContent=t+" ["+r+"]":this.title=t+" ["+r+"]"}))}))},getButtonData:function(e){return Object.values(mn).find((function(t){return t.sel===e}))}});Ir.ready((function(){var e=Hr.initTool,t=Nr("#tools_left, #svg_editor .tools_flyout"),n=t.find("#tool_"+e),r=t.find("#"+e);(n.length?n:r.length?r:Nr("#tool_select")).click().mouseup(),Hr.wireframe&&Nr("#tool_wireframe").click(),Hr.showlayers&&pn(),Nr("#rulers").toggle(Boolean(Hr.showRulers)),Hr.showRulers&&(Nr("#show_rulers")[0].checked=!0),Hr.baseUnit&&Nr("#base_unit").val(Hr.baseUnit),Hr.gridSnapping&&(Nr("#grid_snapping_on")[0].checked=!0),Hr.snappingStep&&Nr("#grid_snapping_step").val(Hr.snappingStep),Hr.gridColor&&Nr("#grid_color").val(Hr.gridColor)})),Nr("#rect_rx").SpinButton({min:0,max:1e3,stateObj:s,callback:function(e){Tr.setRectRadius(e.value)}}),Nr("#stroke_width").SpinButton({min:0,max:99,smallStep:.1,stateObj:s,callback:function(e){var t=e.value;0===t&&j&&["line","polyline"].includes(j.nodeName)&&(t=e.value=1),Tr.setStrokeWidth(t)}}),Nr("#angle").SpinButton({min:-180,max:180,step:5,stateObj:s,callback:function(e){Tr.setRotationAngle(e.value),Nr("#tool_reorient").toggleClass("disabled",0===parseInt(e.value))}}),Nr("#font_size").SpinButton({min:.001,stepfunc:function(e,t){var n=Number(e.value),r=n+t,a=r>=n;return 0===t?n:n>=24?a?Math.round(1.1*n):Math.round(n/1.1):n<=1?a?2*n:n/2:r},stateObj:s,callback:function(e){Tr.setFontSize(e.value)}}),Nr("#group_opacity").SpinButton({min:0,max:100,step:5,stateObj:s,callback:Se}),Nr("#blur").SpinButton({min:0,max:10,step:.1,stateObj:s,callback:ke}),Nr("#zoom").SpinButton({min:.001,max:1e4,step:50,stepfunc:function(e,t){var n=Number(e.value);if(0===n)return 100;var r=n+t;return 0===t?n:n>=100?r:r>=n?2*n:n/2},stateObj:s,callback:ue}).val(100*Tr.getZoom()),Nr("#workarea").contextMenu({menu:"cmenu_canvas",inSpeed:0},(function(e,t,n){switch(e){case"delete":Qe();break;case"cut":Ke();break;case"copy":Ze();break;case"paste":Tr.pasteElements();break;case"paste_in_place":Tr.pasteElements("in_place");break;case"group":case"group_elements":Tr.groupSelectedElements();break;case"ungroup":Tr.ungroupSelectedElement();break;case"move_front":Je();break;case"move_up":tt("Up");break;case"move_down":tt("Down");break;case"move_back":et();break;default:Boolean(sn[e])&&function(e){return sn[e].action}(e).call()}}));var xn=function(e,t,n){switch(e){case"dupe":!function(){rn.apply(this,arguments)}();break;case"delete":nn();break;case"merge_down":Nr("#layerlist tr.layersel").index()!==Tr.getCurrentDrawing().getNumLayers()-1&&(Tr.mergeLayer(),te(),T());break;case"merge_all":Tr.mergeAllLayers(),te(),T()}};function wn(){var e;try{e=localStorage.getItem("svgedit_clipboard")}catch(e){}b[(e?"en":"dis")+"ableContextMenuItems"]("#paste,#paste_in_place")}if(Nr("#layerlist").contextMenu({menu:"cmenu_layers",inSpeed:0},xn),Nr("#layer_moreopts").contextMenu({menu:"cmenu_layers",inSpeed:0,allowLeft:!0},xn),Nr(".contextMenu li").mousedown((function(e){e.preventDefault()})),Nr("#cmenu_canvas li").disableContextMenu(),b.enableContextMenuItems("#delete,#cut,#copy"),wn(),window.addEventListener("storage",(function(e){"svgedit_clipboard"===e.key&&wn()})),window.addEventListener("beforeunload",(function(e){return 0===y.getUndoStackSize()&&(Ir.showSaveWarning=!1),!(!Hr.no_save_warning&&Ir.showSaveWarning)||(e.returnValue=Rr.notification.unsavedChanges,Rr.notification.unsavedChanges)})),Ir.canvas.getUIStrings=function(){return Rr},Ir.openPrep=function(){return Nr("#main_menu").hide(),0===y.getUndoStackSize()||Nr.confirm(Rr.notification.QwantToOpen)},window.FileReader){var Sn=function(e){Nr.process_cancel(Rr.notification.loadingImage),e.stopPropagation(),e.preventDefault(),Nr("#workarea").removeAttr("style"),Nr("#main_menu").hide();var t,n="drop"===e.type?e.dataTransfer.files[0]:this.files[0];n?n.type.includes("image")&&(n.type.includes("svg")?((t=new FileReader).onloadend=function(e){var t=Tr.importSvgString(e.target.result,!0);Tr.ungroupSelectedElement(),Tr.ungroupSelectedElement(),Tr.groupSelectedElements(),Tr.alignSelectedElements("m","page"),Tr.alignSelectedElements("c","page"),Tr.selectOnly([t]),Nr("#dialog_box").hide()},t.readAsText(n)):((t=new FileReader).onloadend=function(e){var t=e.target.result,n=100,r=100,a=new Image;a.style.opacity=0,a.addEventListener("load",(function(){var e,i,o;n=a.offsetWidth||a.naturalWidth||a.width,r=a.offsetHeight||a.naturalHeight||a.height,e=n,i=r,o=Tr.addSVGElementFromJson({element:"image",attr:{x:0,y:0,width:e,height:i,id:Tr.getNextId(),style:"pointer-events:inherit"}}),Tr.setHref(o,t),Tr.selectOnly([o]),Tr.alignSelectedElements("m","page"),Tr.alignSelectedElements("c","page"),te(),Nr("#dialog_box").hide()})),a.src=t},t.readAsDataURL(n))):Nr("#dialog_box").hide()};_[0].addEventListener("dragenter",(function(e){e.stopPropagation(),e.preventDefault()})),_[0].addEventListener("dragover",(function(e){e.stopPropagation(),e.preventDefault()})),_[0].addEventListener("dragleave",(function(e){e.stopPropagation(),e.preventDefault()})),_[0].addEventListener("drop",Sn);var kn=Nr('').change(function(){var e=n(regeneratorRuntime.mark((function e(t){var r;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,Ir.openPrep();case 2:if(e.sent){e.next=5;break}return e.abrupt("return");case 5:Tr.clear(),1===this.files.length&&(Nr.process_cancel(Rr.notification.loadingImage),(r=new FileReader).onloadend=function(){var e=n(regeneratorRuntime.mark((function e(t){var n;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n=t.target,e.next=3,zr(n.result);case 3:J();case 4:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}(),r.readAsText(this.files[0]));case 7:case"end":return e.stop()}}),e,this)})));return function(t){return e.apply(this,arguments)}}());Nr("#tool_open").show(),Nr(window).on("openImage",(function(){return kn.click()}));var Cn=Nr('').change(Sn);Nr("#tool_import").show(),Nr(window).on("importImage",(function(){return Cn.click()}))}J(!0);var An=[],En=Ir.setLang=function(){var e=n(regeneratorRuntime.mark((function e(t,n){var r,a,i;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(Ir.langChanged=!0,Nr.pref("lang",t),Nr("#lang_select").val(t),n){e.next=5;break}return e.abrupt("return");case 5:if(document.documentElement.lang=n.lang,Nr.extend(Rr,n),r=Nr("#layerlist tr.layersel td.layername").text(),a=r===Rr.common.layer+" 1",Tr.setUiStrings(n),bn.setTitles(),a&&(Tr.renameCurrentLayer(Rr.common.layer+" 1"),T()),!ye.length){e.next=18;break}return e.next=15,Promise.all(ye.map((function(e){return An.push(e.name),e.langReady({lang:t,uiStrings:Rr,importLocale:Yr({defaultLang:t,defaultName:e.name})})})));case 15:ye.length=0,e.next=19;break;case 18:An.forEach((function(e){Tr.runExtension(e,"langReady",{lang:t,uiStrings:Rr,importLocale:Yr({defaultLang:t,defaultName:e})})}));case 19:Tr.runExtensions("langChanged",t),fe(),i={"#stroke_color":"#tool_stroke .icon_label, #tool_stroke .color_block","#fill_color":"#tool_fill label, #tool_fill .color_block","#linejoin_miter":"#cur_linejoin","#linecap_butt":"#cur_linecap"},Nr.each(i,(function(e,t){Nr(t).attr("title",Nr(e)[0].title)})),Nr("#multiselected_panel div[id^=tool_align]").each((function(){Nr("#tool_pos"+this.id.substr(10))[0].title=this.title}));case 24:case"end":return e.stop()}}),e)})));return function(t,n){return e.apply(this,arguments)}}();!function(e){wr=e}({addLangData:function(e){return Tr.runExtensions("addLangData",(function(t){return{lang:e,importLocale:Yr({defaultLang:e,defaultName:t})}}),!0)},curConfig:Hr}),"file:"===document.location.protocol?setTimeout(o,100):o()},Ir.ready=function(e){return new Promise((function(t,n){Br?t(e()):Mr.push([e,t,n])}))},Ir.runCallbacks=n(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,Promise.all(Mr.map((function(e){return(0,d(e,1)[0])()})));case 3:e.next=9;break;case 5:throw e.prev=5,e.t0=e.catch(0),Mr.forEach((function(e){(0,d(e,3)[2])()})),e.t0;case 9:Mr.forEach((function(e){(0,d(e,2)[1])()})),Br=!0;case 11:case"end":return e.stop()}}),e,null,[[0,5]])}))),Ir.loadFromString=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.noAlert;return Ir.ready(n(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,zr(e,{noAlert:r});case 3:t.next=9;break;case 5:if(t.prev=5,t.t0=t.catch(0),!r){t.next=9;break}throw t.t0;case 9:case"end":return t.stop()}}),t,null,[[0,5]])}))))},Ir.disableUI=function(e){},Ir.loadFromURL=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.cache,r=t.noAlert;return Ir.ready((function(){return new Promise((function(t,a){Nr.ajax({url:e,dataType:"text",cache:Boolean(n),beforeSend:function(){Nr.process_cancel(Rr.notification.loadingImage)},success:function(e){t(zr(e,{noAlert:r}))},error:function(e,n,i){404!==e.status&&e.responseText?t(zr(e.responseText,{noAlert:r})):r?a(new Error("URLLoadFail")):(Nr.alert(Rr.notification.URLLoadFail+": \n"+i),t())},complete:function(){Nr("#dialog_box").hide()}})}))}))},Ir.loadFromDataURI=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.noAlert;return Ir.ready((function(){var t=!1,r=e.match(/^data:image\/svg\+xml;base64,/);r?t=!0:r=e.match(/^data:image\/svg\+xml(?:;|;utf8)?,/),r&&(r=r[0]);var a=e.slice(r.length);return zr(t?At(a):decodeURIComponent(a),{noAlert:n})}))},Ir.addExtension=function(e,t,n){if(!Tr)throw new Error("Extension added too early");return Tr.addExtension.call(this,e,t,n)},Ir.ready((function(){ln()}));var Wr=!1,Xr=[];return window.addEventListener("message",(function(e){var t={data:e.data,origin:e.origin};Wr?Tr.call("message",t):Xr.push(t)})),n(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,Promise.resolve();case 3:Ir.init(),e.next=9;break;case 6:e.prev=6,e.t0=e.catch(0),console.error(e.t0);case 9:case"end":return e.stop()}}),e,null,[[0,6]])})))(),Ir}));
//# sourceMappingURL=index-umd.min.js.map
diff --git a/dist/index-umd.min.js.map b/dist/index-umd.min.js.map
index 5245a9e7..2a1c98de 100644
--- a/dist/index-umd.min.js.map
+++ b/dist/index-umd.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"index-umd.min.js","sources":["../editor/touch.js","../editor/namespaces.js","../editor/svgpathseg.js","../editor/browser.js","../editor/jQuery.attr.js","../editor/svgtransformlist.js","../editor/units.js","../editor/history.js","../editor/path.js","../editor/math.js","../editor/utilities.js","../editor/contextmenu.js","../editor/external/dynamic-import-polyfill/importModule.js","../editor/dbox.js","../editor/layer.js","../editor/historyrecording.js","../editor/draw.js","../editor/sanitize.js","../editor/recalculate.js","../editor/select.js","../editor/coords.js","../editor/svgcanvas.js","../editor/svgicons/jQuery.svgIcons.js","../editor/jgraduate/jQuery.jGraduate.js","../editor/jgraduate/jQuery.jPicker.js","../editor/locale/locale.js","../editor/external/load-stylesheets/index-es.js","../editor/svg-editor.js","../editor/js-hotkeys/jquery.hotkeys.min.js","../editor/jquerybbq/jquery.bbq.min.js","../editor/spinbtn/jQuery.SpinButton.js","../editor/contextmenu/jQuery.contextMenu.js"],"sourcesContent":["// http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/\n/**\n *\n * @param {Event} ev\n * @returns {void}\n */\nfunction touchHandler (ev) {\n const {changedTouches} = ev,\n first = changedTouches[0];\n\n let type = '';\n switch (ev.type) {\n case 'touchstart': type = 'mousedown'; break;\n case 'touchmove': type = 'mousemove'; break;\n case 'touchend': type = 'mouseup'; break;\n default: return;\n }\n\n const {screenX, screenY, clientX, clientY} = first; // eslint-disable-line no-shadow\n const simulatedEvent = new MouseEvent(type, {\n // Event interface\n bubbles: true,\n cancelable: true,\n // UIEvent interface\n view: window,\n detail: 1, // click count\n // MouseEvent interface (customized)\n screenX, screenY, clientX, clientY,\n // MouseEvent interface (defaults) - these could be removed\n ctrlKey: false,\n altKey: false,\n shiftKey: false,\n metaKey: false,\n button: 0, // main button (usually left)\n relatedTarget: null\n });\n if (changedTouches.length < 2) {\n first.target.dispatchEvent(simulatedEvent);\n ev.preventDefault();\n }\n}\n\ndocument.addEventListener('touchstart', touchHandler, true);\ndocument.addEventListener('touchmove', touchHandler, true);\ndocument.addEventListener('touchend', touchHandler, true);\ndocument.addEventListener('touchcancel', touchHandler, true);\n","/**\n * Namespaces or tools therefor\n * @module namespaces\n * @license MIT\n*/\n\n/**\n* Common namepaces constants in alpha order\n* @enum {string}\n* @type {PlainObject}\n* @memberof module:namespaces\n*/\nexport const NS = {\n HTML: 'http://www.w3.org/1999/xhtml',\n MATH: 'http://www.w3.org/1998/Math/MathML',\n SE: 'http://svg-edit.googlecode.com',\n SVG: 'http://www.w3.org/2000/svg',\n XLINK: 'http://www.w3.org/1999/xlink',\n XML: 'http://www.w3.org/XML/1998/namespace',\n XMLNS: 'http://www.w3.org/2000/xmlns/' // see http://www.w3.org/TR/REC-xml-names/#xmlReserved\n};\n\n/**\n* @function module:namespaces.getReverseNS\n* @returns {string} The NS with key values switched and lowercase\n*/\nexport const getReverseNS = function () {\n const reverseNS = {};\n Object.entries(NS).forEach(([name, URI]) => {\n reverseNS[URI] = name.toLowerCase();\n });\n return reverseNS;\n};\n","/* globals SVGPathSeg, SVGPathSegMovetoRel, SVGPathSegMovetoAbs,\n SVGPathSegMovetoRel, SVGPathSegLinetoRel, SVGPathSegLinetoAbs,\n SVGPathSegLinetoHorizontalRel, SVGPathSegLinetoHorizontalAbs,\n SVGPathSegLinetoVerticalRel, SVGPathSegLinetoVerticalAbs,\n SVGPathSegClosePath, SVGPathSegCurvetoCubicRel,\n SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicSmoothRel,\n SVGPathSegCurvetoCubicSmoothAbs, SVGPathSegCurvetoQuadraticRel,\n SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticSmoothRel,\n SVGPathSegCurvetoQuadraticSmoothAbs, SVGPathSegArcRel, SVGPathSegArcAbs */\n/**\n* SVGPathSeg API polyfill\n* https://github.com/progers/pathseg\n*\n* This is a drop-in replacement for the `SVGPathSeg` and `SVGPathSegList` APIs\n* that were removed from SVG2 ({@link https://lists.w3.org/Archives/Public/www-svg/2015Jun/0044.html}),\n* including the latest spec changes which were implemented in Firefox 43 and\n* Chrome 46.\n*/\n/* eslint-disable no-shadow, class-methods-use-this */\n// Linting: We avoid `no-shadow` as ESLint thinks these are still available globals\n// Linting: We avoid `class-methods-use-this` as this is a polyfill that must\n// follow the conventions\n(() => {\nif (!('SVGPathSeg' in window)) {\n // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSeg\n class SVGPathSeg {\n constructor (type, typeAsLetter, owningPathSegList) {\n this.pathSegType = type;\n this.pathSegTypeAsLetter = typeAsLetter;\n this._owningPathSegList = owningPathSegList;\n }\n // Notify owning PathSegList on any changes so they can be synchronized back to the path element.\n _segmentChanged () {\n if (this._owningPathSegList) {\n this._owningPathSegList.segmentChanged(this);\n }\n }\n }\n SVGPathSeg.prototype.classname = 'SVGPathSeg';\n\n SVGPathSeg.PATHSEG_UNKNOWN = 0;\n SVGPathSeg.PATHSEG_CLOSEPATH = 1;\n SVGPathSeg.PATHSEG_MOVETO_ABS = 2;\n SVGPathSeg.PATHSEG_MOVETO_REL = 3;\n SVGPathSeg.PATHSEG_LINETO_ABS = 4;\n SVGPathSeg.PATHSEG_LINETO_REL = 5;\n SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS = 6;\n SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL = 7;\n SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS = 8;\n SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL = 9;\n SVGPathSeg.PATHSEG_ARC_ABS = 10;\n SVGPathSeg.PATHSEG_ARC_REL = 11;\n SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS = 12;\n SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL = 13;\n SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS = 14;\n SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL = 15;\n SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS = 16;\n SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL = 17;\n SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18;\n SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19;\n\n class SVGPathSegClosePath extends SVGPathSeg {\n constructor (owningPathSegList) {\n super(SVGPathSeg.PATHSEG_CLOSEPATH, 'z', owningPathSegList);\n }\n toString () { return '[object SVGPathSegClosePath]'; }\n _asPathString () { return this.pathSegTypeAsLetter; }\n clone () { return new SVGPathSegClosePath(undefined); }\n }\n\n class SVGPathSegMovetoAbs extends SVGPathSeg {\n constructor (owningPathSegList, x, y) {\n super(SVGPathSeg.PATHSEG_MOVETO_ABS, 'M', owningPathSegList);\n this._x = x;\n this._y = y;\n }\n toString () { return '[object SVGPathSegMovetoAbs]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegMovetoAbs(undefined, this._x, this._y); }\n }\n Object.defineProperties(SVGPathSegMovetoAbs.prototype, {\n x: {\n get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true\n },\n y: {\n get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true\n }\n });\n\n class SVGPathSegMovetoRel extends SVGPathSeg {\n constructor (owningPathSegList, x, y) {\n super(SVGPathSeg.PATHSEG_MOVETO_REL, 'm', owningPathSegList);\n this._x = x;\n this._y = y;\n }\n toString () { return '[object SVGPathSegMovetoRel]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegMovetoRel(undefined, this._x, this._y); }\n }\n Object.defineProperties(SVGPathSegMovetoRel.prototype, {\n x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},\n y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true}\n });\n\n class SVGPathSegLinetoAbs extends SVGPathSeg {\n constructor (owningPathSegList, x, y) {\n super(SVGPathSeg.PATHSEG_LINETO_ABS, 'L', owningPathSegList);\n this._x = x;\n this._y = y;\n }\n toString () { return '[object SVGPathSegLinetoAbs]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegLinetoAbs(undefined, this._x, this._y); }\n }\n Object.defineProperties(SVGPathSegLinetoAbs.prototype, {\n x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},\n y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true}\n });\n\n class SVGPathSegLinetoRel extends SVGPathSeg {\n constructor (owningPathSegList, x, y) {\n super(SVGPathSeg.PATHSEG_LINETO_REL, 'l', owningPathSegList);\n this._x = x;\n this._y = y;\n }\n toString () { return '[object SVGPathSegLinetoRel]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegLinetoRel(undefined, this._x, this._y); }\n }\n Object.defineProperties(SVGPathSegLinetoRel.prototype, {\n x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},\n y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true}\n });\n\n class SVGPathSegCurvetoCubicAbs extends SVGPathSeg {\n constructor (owningPathSegList, x, y, x1, y1, x2, y2) {\n super(SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS, 'C', owningPathSegList);\n this._x = x;\n this._y = y;\n this._x1 = x1;\n this._y1 = y1;\n this._x2 = x2;\n this._y2 = y2;\n }\n toString () { return '[object SVGPathSegCurvetoCubicAbs]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegCurvetoCubicAbs(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2); }\n }\n Object.defineProperties(SVGPathSegCurvetoCubicAbs.prototype, {\n x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},\n y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},\n x1: {get () { return this._x1; }, set (x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true},\n y1: {get () { return this._y1; }, set (y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true},\n x2: {get () { return this._x2; }, set (x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true},\n y2: {get () { return this._y2; }, set (y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true}\n });\n\n class SVGPathSegCurvetoCubicRel extends SVGPathSeg {\n constructor (owningPathSegList, x, y, x1, y1, x2, y2) {\n super(SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, 'c', owningPathSegList);\n this._x = x;\n this._y = y;\n this._x1 = x1;\n this._y1 = y1;\n this._x2 = x2;\n this._y2 = y2;\n }\n toString () { return '[object SVGPathSegCurvetoCubicRel]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegCurvetoCubicRel(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2); }\n }\n Object.defineProperties(SVGPathSegCurvetoCubicRel.prototype, {\n x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},\n y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},\n x1: {get () { return this._x1; }, set (x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true},\n y1: {get () { return this._y1; }, set (y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true},\n x2: {get () { return this._x2; }, set (x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true},\n y2: {get () { return this._y2; }, set (y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true}\n });\n\n class SVGPathSegCurvetoQuadraticAbs extends SVGPathSeg {\n constructor (owningPathSegList, x, y, x1, y1) {\n super(SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS, 'Q', owningPathSegList);\n this._x = x;\n this._y = y;\n this._x1 = x1;\n this._y1 = y1;\n }\n toString () { return '[object SVGPathSegCurvetoQuadraticAbs]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegCurvetoQuadraticAbs(undefined, this._x, this._y, this._x1, this._y1); }\n }\n Object.defineProperties(SVGPathSegCurvetoQuadraticAbs.prototype, {\n x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},\n y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},\n x1: {get () { return this._x1; }, set (x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true},\n y1: {get () { return this._y1; }, set (y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true}\n });\n\n class SVGPathSegCurvetoQuadraticRel extends SVGPathSeg {\n constructor (owningPathSegList, x, y, x1, y1) {\n super(SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL, 'q', owningPathSegList);\n this._x = x;\n this._y = y;\n this._x1 = x1;\n this._y1 = y1;\n }\n toString () { return '[object SVGPathSegCurvetoQuadraticRel]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegCurvetoQuadraticRel(undefined, this._x, this._y, this._x1, this._y1); }\n }\n Object.defineProperties(SVGPathSegCurvetoQuadraticRel.prototype, {\n x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},\n y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},\n x1: {get () { return this._x1; }, set (x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true},\n y1: {get () { return this._y1; }, set (y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true}\n });\n\n class SVGPathSegArcAbs extends SVGPathSeg {\n constructor (owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) {\n super(SVGPathSeg.PATHSEG_ARC_ABS, 'A', owningPathSegList);\n this._x = x;\n this._y = y;\n this._r1 = r1;\n this._r2 = r2;\n this._angle = angle;\n this._largeArcFlag = largeArcFlag;\n this._sweepFlag = sweepFlag;\n }\n toString () { return '[object SVGPathSegArcAbs]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._r1 + ' ' + this._r2 + ' ' + this._angle + ' ' + (this._largeArcFlag ? '1' : '0') + ' ' + (this._sweepFlag ? '1' : '0') + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegArcAbs(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag); }\n }\n Object.defineProperties(SVGPathSegArcAbs.prototype, {\n x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},\n y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},\n r1: {get () { return this._r1; }, set (r1) { this._r1 = r1; this._segmentChanged(); }, enumerable: true},\n r2: {get () { return this._r2; }, set (r2) { this._r2 = r2; this._segmentChanged(); }, enumerable: true},\n angle: {get () { return this._angle; }, set (angle) { this._angle = angle; this._segmentChanged(); }, enumerable: true},\n largeArcFlag: {get () { return this._largeArcFlag; }, set (largeArcFlag) { this._largeArcFlag = largeArcFlag; this._segmentChanged(); }, enumerable: true},\n sweepFlag: {get () { return this._sweepFlag; }, set (sweepFlag) { this._sweepFlag = sweepFlag; this._segmentChanged(); }, enumerable: true}\n });\n\n class SVGPathSegArcRel extends SVGPathSeg {\n constructor (owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) {\n super(SVGPathSeg.PATHSEG_ARC_REL, 'a', owningPathSegList);\n this._x = x;\n this._y = y;\n this._r1 = r1;\n this._r2 = r2;\n this._angle = angle;\n this._largeArcFlag = largeArcFlag;\n this._sweepFlag = sweepFlag;\n }\n toString () { return '[object SVGPathSegArcRel]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._r1 + ' ' + this._r2 + ' ' + this._angle + ' ' + (this._largeArcFlag ? '1' : '0') + ' ' + (this._sweepFlag ? '1' : '0') + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegArcRel(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag); }\n }\n Object.defineProperties(SVGPathSegArcRel.prototype, {\n x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},\n y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},\n r1: {get () { return this._r1; }, set (r1) { this._r1 = r1; this._segmentChanged(); }, enumerable: true},\n r2: {get () { return this._r2; }, set (r2) { this._r2 = r2; this._segmentChanged(); }, enumerable: true},\n angle: {get () { return this._angle; }, set (angle) { this._angle = angle; this._segmentChanged(); }, enumerable: true},\n largeArcFlag: {get () { return this._largeArcFlag; }, set (largeArcFlag) { this._largeArcFlag = largeArcFlag; this._segmentChanged(); }, enumerable: true},\n sweepFlag: {get () { return this._sweepFlag; }, set (sweepFlag) { this._sweepFlag = sweepFlag; this._segmentChanged(); }, enumerable: true}\n });\n\n class SVGPathSegLinetoHorizontalAbs extends SVGPathSeg {\n constructor (owningPathSegList, x) {\n super(SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS, 'H', owningPathSegList);\n this._x = x;\n }\n toString () { return '[object SVGPathSegLinetoHorizontalAbs]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x; }\n clone () { return new SVGPathSegLinetoHorizontalAbs(undefined, this._x); }\n }\n Object.defineProperty(SVGPathSegLinetoHorizontalAbs.prototype, 'x', {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true});\n\n class SVGPathSegLinetoHorizontalRel extends SVGPathSeg {\n constructor (owningPathSegList, x) {\n super(SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL, 'h', owningPathSegList);\n this._x = x;\n }\n toString () { return '[object SVGPathSegLinetoHorizontalRel]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x; }\n clone () { return new SVGPathSegLinetoHorizontalRel(undefined, this._x); }\n }\n Object.defineProperty(SVGPathSegLinetoHorizontalRel.prototype, 'x', {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true});\n\n class SVGPathSegLinetoVerticalAbs extends SVGPathSeg {\n constructor (owningPathSegList, y) {\n super(SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS, 'V', owningPathSegList);\n this._y = y;\n }\n toString () { return '[object SVGPathSegLinetoVerticalAbs]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._y; }\n clone () { return new SVGPathSegLinetoVerticalAbs(undefined, this._y); }\n }\n Object.defineProperty(SVGPathSegLinetoVerticalAbs.prototype, 'y', {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true});\n\n class SVGPathSegLinetoVerticalRel extends SVGPathSeg {\n constructor (owningPathSegList, y) {\n super(SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL, 'v', owningPathSegList);\n this._y = y;\n }\n toString () { return '[object SVGPathSegLinetoVerticalRel]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._y; }\n clone () { return new SVGPathSegLinetoVerticalRel(undefined, this._y); }\n }\n Object.defineProperty(SVGPathSegLinetoVerticalRel.prototype, 'y', {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true});\n\n class SVGPathSegCurvetoCubicSmoothAbs extends SVGPathSeg {\n constructor (owningPathSegList, x, y, x2, y2) {\n super(SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS, 'S', owningPathSegList);\n this._x = x;\n this._y = y;\n this._x2 = x2;\n this._y2 = y2;\n }\n toString () { return '[object SVGPathSegCurvetoCubicSmoothAbs]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegCurvetoCubicSmoothAbs(undefined, this._x, this._y, this._x2, this._y2); }\n }\n Object.defineProperties(SVGPathSegCurvetoCubicSmoothAbs.prototype, {\n x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},\n y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},\n x2: {get () { return this._x2; }, set (x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true},\n y2: {get () { return this._y2; }, set (y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true}\n });\n\n class SVGPathSegCurvetoCubicSmoothRel extends SVGPathSeg {\n constructor (owningPathSegList, x, y, x2, y2) {\n super(SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL, 's', owningPathSegList);\n this._x = x;\n this._y = y;\n this._x2 = x2;\n this._y2 = y2;\n }\n toString () { return '[object SVGPathSegCurvetoCubicSmoothRel]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegCurvetoCubicSmoothRel(undefined, this._x, this._y, this._x2, this._y2); }\n }\n Object.defineProperties(SVGPathSegCurvetoCubicSmoothRel.prototype, {\n x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},\n y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},\n x2: {get () { return this._x2; }, set (x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true},\n y2: {get () { return this._y2; }, set (y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true}\n });\n\n class SVGPathSegCurvetoQuadraticSmoothAbs extends SVGPathSeg {\n constructor (owningPathSegList, x, y) {\n super(SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS, 'T', owningPathSegList);\n this._x = x;\n this._y = y;\n }\n toString () { return '[object SVGPathSegCurvetoQuadraticSmoothAbs]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegCurvetoQuadraticSmoothAbs(undefined, this._x, this._y); }\n }\n Object.defineProperties(SVGPathSegCurvetoQuadraticSmoothAbs.prototype, {\n x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},\n y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true}\n });\n\n class SVGPathSegCurvetoQuadraticSmoothRel extends SVGPathSeg {\n constructor (owningPathSegList, x, y) {\n super(SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL, 't', owningPathSegList);\n this._x = x;\n this._y = y;\n }\n toString () { return '[object SVGPathSegCurvetoQuadraticSmoothRel]'; }\n _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; }\n clone () { return new SVGPathSegCurvetoQuadraticSmoothRel(undefined, this._x, this._y); }\n }\n Object.defineProperties(SVGPathSegCurvetoQuadraticSmoothRel.prototype, {\n x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},\n y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true}\n });\n\n // Add createSVGPathSeg* functions to SVGPathElement.\n // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathElement.\n SVGPathElement.prototype.createSVGPathSegClosePath = function () { return new SVGPathSegClosePath(undefined); };\n SVGPathElement.prototype.createSVGPathSegMovetoAbs = function (x, y) { return new SVGPathSegMovetoAbs(undefined, x, y); };\n SVGPathElement.prototype.createSVGPathSegMovetoRel = function (x, y) { return new SVGPathSegMovetoRel(undefined, x, y); };\n SVGPathElement.prototype.createSVGPathSegLinetoAbs = function (x, y) { return new SVGPathSegLinetoAbs(undefined, x, y); };\n SVGPathElement.prototype.createSVGPathSegLinetoRel = function (x, y) { return new SVGPathSegLinetoRel(undefined, x, y); };\n SVGPathElement.prototype.createSVGPathSegCurvetoCubicAbs = function (x, y, x1, y1, x2, y2) { return new SVGPathSegCurvetoCubicAbs(undefined, x, y, x1, y1, x2, y2); };\n SVGPathElement.prototype.createSVGPathSegCurvetoCubicRel = function (x, y, x1, y1, x2, y2) { return new SVGPathSegCurvetoCubicRel(undefined, x, y, x1, y1, x2, y2); };\n SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticAbs = function (x, y, x1, y1) { return new SVGPathSegCurvetoQuadraticAbs(undefined, x, y, x1, y1); };\n SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticRel = function (x, y, x1, y1) { return new SVGPathSegCurvetoQuadraticRel(undefined, x, y, x1, y1); };\n SVGPathElement.prototype.createSVGPathSegArcAbs = function (x, y, r1, r2, angle, largeArcFlag, sweepFlag) { return new SVGPathSegArcAbs(undefined, x, y, r1, r2, angle, largeArcFlag, sweepFlag); };\n SVGPathElement.prototype.createSVGPathSegArcRel = function (x, y, r1, r2, angle, largeArcFlag, sweepFlag) { return new SVGPathSegArcRel(undefined, x, y, r1, r2, angle, largeArcFlag, sweepFlag); };\n SVGPathElement.prototype.createSVGPathSegLinetoHorizontalAbs = function (x) { return new SVGPathSegLinetoHorizontalAbs(undefined, x); };\n SVGPathElement.prototype.createSVGPathSegLinetoHorizontalRel = function (x) { return new SVGPathSegLinetoHorizontalRel(undefined, x); };\n SVGPathElement.prototype.createSVGPathSegLinetoVerticalAbs = function (y) { return new SVGPathSegLinetoVerticalAbs(undefined, y); };\n SVGPathElement.prototype.createSVGPathSegLinetoVerticalRel = function (y) { return new SVGPathSegLinetoVerticalRel(undefined, y); };\n SVGPathElement.prototype.createSVGPathSegCurvetoCubicSmoothAbs = function (x, y, x2, y2) { return new SVGPathSegCurvetoCubicSmoothAbs(undefined, x, y, x2, y2); };\n SVGPathElement.prototype.createSVGPathSegCurvetoCubicSmoothRel = function (x, y, x2, y2) { return new SVGPathSegCurvetoCubicSmoothRel(undefined, x, y, x2, y2); };\n SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticSmoothAbs = function (x, y) { return new SVGPathSegCurvetoQuadraticSmoothAbs(undefined, x, y); };\n SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticSmoothRel = function (x, y) { return new SVGPathSegCurvetoQuadraticSmoothRel(undefined, x, y); };\n\n if (!('getPathSegAtLength' in SVGPathElement.prototype)) {\n // Add getPathSegAtLength to SVGPathElement.\n // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-__svg__SVGPathElement__getPathSegAtLength\n // This polyfill requires SVGPathElement.getTotalLength to implement the distance-along-a-path algorithm.\n SVGPathElement.prototype.getPathSegAtLength = function (distance) {\n if (distance === undefined || !isFinite(distance)) {\n throw new Error('Invalid arguments.');\n }\n\n const measurementElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n measurementElement.setAttribute('d', this.getAttribute('d'));\n let lastPathSegment = measurementElement.pathSegList.numberOfItems - 1;\n\n // If the path is empty, return 0.\n if (lastPathSegment <= 0) {\n return 0;\n }\n\n do {\n measurementElement.pathSegList.removeItem(lastPathSegment);\n if (distance > measurementElement.getTotalLength()) {\n break;\n }\n lastPathSegment--;\n } while (lastPathSegment > 0);\n return lastPathSegment;\n };\n }\n\n window.SVGPathSeg = SVGPathSeg;\n window.SVGPathSegClosePath = SVGPathSegClosePath;\n window.SVGPathSegMovetoAbs = SVGPathSegMovetoAbs;\n window.SVGPathSegMovetoRel = SVGPathSegMovetoRel;\n window.SVGPathSegLinetoAbs = SVGPathSegLinetoAbs;\n window.SVGPathSegLinetoRel = SVGPathSegLinetoRel;\n window.SVGPathSegCurvetoCubicAbs = SVGPathSegCurvetoCubicAbs;\n window.SVGPathSegCurvetoCubicRel = SVGPathSegCurvetoCubicRel;\n window.SVGPathSegCurvetoQuadraticAbs = SVGPathSegCurvetoQuadraticAbs;\n window.SVGPathSegCurvetoQuadraticRel = SVGPathSegCurvetoQuadraticRel;\n window.SVGPathSegArcAbs = SVGPathSegArcAbs;\n window.SVGPathSegArcRel = SVGPathSegArcRel;\n window.SVGPathSegLinetoHorizontalAbs = SVGPathSegLinetoHorizontalAbs;\n window.SVGPathSegLinetoHorizontalRel = SVGPathSegLinetoHorizontalRel;\n window.SVGPathSegLinetoVerticalAbs = SVGPathSegLinetoVerticalAbs;\n window.SVGPathSegLinetoVerticalRel = SVGPathSegLinetoVerticalRel;\n window.SVGPathSegCurvetoCubicSmoothAbs = SVGPathSegCurvetoCubicSmoothAbs;\n window.SVGPathSegCurvetoCubicSmoothRel = SVGPathSegCurvetoCubicSmoothRel;\n window.SVGPathSegCurvetoQuadraticSmoothAbs = SVGPathSegCurvetoQuadraticSmoothAbs;\n window.SVGPathSegCurvetoQuadraticSmoothRel = SVGPathSegCurvetoQuadraticSmoothRel;\n}\n\n// Checking for SVGPathSegList in window checks for the case of an implementation without the\n// SVGPathSegList API.\n// The second check for appendItem is specific to Firefox 59+ which removed only parts of the\n// SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API\n// so the polyfill data (i.e., _list) is used throughout.\nif (!('SVGPathSegList' in window) || !('appendItem' in window.SVGPathSegList.prototype)) {\n // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList\n class SVGPathSegList {\n constructor (pathElement) {\n this._pathElement = pathElement;\n this._list = this._parsePath(this._pathElement.getAttribute('d'));\n\n // Use a MutationObserver to catch changes to the path's \"d\" attribute.\n this._mutationObserverConfig = {attributes: true, attributeFilter: ['d']};\n this._pathElementMutationObserver = new MutationObserver(this._updateListFromPathMutations.bind(this));\n this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);\n }\n // Process any pending mutations to the path element and update the list as needed.\n // This should be the first call of all public functions and is needed because\n // MutationObservers are not synchronous so we can have pending asynchronous mutations.\n _checkPathSynchronizedToList () {\n this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords());\n }\n\n _updateListFromPathMutations (mutationRecords) {\n if (!this._pathElement) {\n return;\n }\n let hasPathMutations = false;\n mutationRecords.forEach((record) => {\n if (record.attributeName === 'd') {\n hasPathMutations = true;\n }\n });\n if (hasPathMutations) {\n this._list = this._parsePath(this._pathElement.getAttribute('d'));\n }\n }\n\n // Serialize the list and update the path's 'd' attribute.\n _writeListToPath () {\n this._pathElementMutationObserver.disconnect();\n this._pathElement.setAttribute('d', SVGPathSegList._pathSegArrayAsString(this._list));\n this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);\n }\n\n // When a path segment changes the list needs to be synchronized back to the path element.\n segmentChanged (pathSeg) {\n this._writeListToPath();\n }\n\n clear () {\n this._checkPathSynchronizedToList();\n\n this._list.forEach((pathSeg) => {\n pathSeg._owningPathSegList = null;\n });\n this._list = [];\n this._writeListToPath();\n }\n\n initialize (newItem) {\n this._checkPathSynchronizedToList();\n\n this._list = [newItem];\n newItem._owningPathSegList = this;\n this._writeListToPath();\n return newItem;\n }\n\n _checkValidIndex (index) {\n if (isNaN(index) || index < 0 || index >= this.numberOfItems) {\n throw new Error('INDEX_SIZE_ERR');\n }\n }\n\n getItem (index) {\n this._checkPathSynchronizedToList();\n\n this._checkValidIndex(index);\n return this._list[index];\n }\n\n insertItemBefore (newItem, index) {\n this._checkPathSynchronizedToList();\n\n // Spec: If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.\n if (index > this.numberOfItems) {\n index = this.numberOfItems;\n }\n if (newItem._owningPathSegList) {\n // SVG2 spec says to make a copy.\n newItem = newItem.clone();\n }\n this._list.splice(index, 0, newItem);\n newItem._owningPathSegList = this;\n this._writeListToPath();\n return newItem;\n }\n\n replaceItem (newItem, index) {\n this._checkPathSynchronizedToList();\n\n if (newItem._owningPathSegList) {\n // SVG2 spec says to make a copy.\n newItem = newItem.clone();\n }\n this._checkValidIndex(index);\n this._list[index] = newItem;\n newItem._owningPathSegList = this;\n this._writeListToPath();\n return newItem;\n }\n\n removeItem (index) {\n this._checkPathSynchronizedToList();\n\n this._checkValidIndex(index);\n const item = this._list[index];\n this._list.splice(index, 1);\n this._writeListToPath();\n return item;\n }\n\n appendItem (newItem) {\n this._checkPathSynchronizedToList();\n\n if (newItem._owningPathSegList) {\n // SVG2 spec says to make a copy.\n newItem = newItem.clone();\n }\n this._list.push(newItem);\n newItem._owningPathSegList = this;\n // TODO: Optimize this to just append to the existing attribute.\n this._writeListToPath();\n return newItem;\n }\n\n // This closely follows SVGPathParser::parsePath from Source/core/svg/SVGPathParser.cpp.\n _parsePath (string) {\n if (!string || !string.length) {\n return [];\n }\n\n const owningPathSegList = this; // eslint-disable-line consistent-this\n\n class Builder {\n constructor () {\n this.pathSegList = [];\n }\n appendSegment (pathSeg) {\n this.pathSegList.push(pathSeg);\n }\n }\n\n class Source {\n constructor (string) {\n this._string = string;\n this._currentIndex = 0;\n this._endIndex = this._string.length;\n this._previousCommand = SVGPathSeg.PATHSEG_UNKNOWN;\n\n this._skipOptionalSpaces();\n }\n _isCurrentSpace () {\n const character = this._string[this._currentIndex];\n return character <= ' ' && (character === ' ' || character === '\\n' || character === '\\t' || character === '\\r' || character === '\\f');\n }\n\n _skipOptionalSpaces () {\n while (this._currentIndex < this._endIndex && this._isCurrentSpace()) {\n this._currentIndex++;\n }\n return this._currentIndex < this._endIndex;\n }\n\n _skipOptionalSpacesOrDelimiter () {\n if (this._currentIndex < this._endIndex && !this._isCurrentSpace() && this._string.charAt(this._currentIndex) !== ',') {\n return false;\n }\n if (this._skipOptionalSpaces()) {\n if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) === ',') {\n this._currentIndex++;\n this._skipOptionalSpaces();\n }\n }\n return this._currentIndex < this._endIndex;\n }\n\n hasMoreData () {\n return this._currentIndex < this._endIndex;\n }\n\n peekSegmentType () {\n const lookahead = this._string[this._currentIndex];\n return this._pathSegTypeFromChar(lookahead);\n }\n\n _pathSegTypeFromChar (lookahead) {\n switch (lookahead) {\n case 'Z':\n case 'z':\n return SVGPathSeg.PATHSEG_CLOSEPATH;\n case 'M':\n return SVGPathSeg.PATHSEG_MOVETO_ABS;\n case 'm':\n return SVGPathSeg.PATHSEG_MOVETO_REL;\n case 'L':\n return SVGPathSeg.PATHSEG_LINETO_ABS;\n case 'l':\n return SVGPathSeg.PATHSEG_LINETO_REL;\n case 'C':\n return SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS;\n case 'c':\n return SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL;\n case 'Q':\n return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS;\n case 'q':\n return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL;\n case 'A':\n return SVGPathSeg.PATHSEG_ARC_ABS;\n case 'a':\n return SVGPathSeg.PATHSEG_ARC_REL;\n case 'H':\n return SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS;\n case 'h':\n return SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL;\n case 'V':\n return SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS;\n case 'v':\n return SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL;\n case 'S':\n return SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS;\n case 's':\n return SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL;\n case 'T':\n return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS;\n case 't':\n return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL;\n default:\n return SVGPathSeg.PATHSEG_UNKNOWN;\n }\n }\n\n _nextCommandHelper (lookahead, previousCommand) {\n // Check for remaining coordinates in the current command.\n if ((lookahead === '+' || lookahead === '-' || lookahead === '.' || (lookahead >= '0' && lookahead <= '9')) && previousCommand !== SVGPathSeg.PATHSEG_CLOSEPATH) {\n if (previousCommand === SVGPathSeg.PATHSEG_MOVETO_ABS) {\n return SVGPathSeg.PATHSEG_LINETO_ABS;\n }\n if (previousCommand === SVGPathSeg.PATHSEG_MOVETO_REL) {\n return SVGPathSeg.PATHSEG_LINETO_REL;\n }\n return previousCommand;\n }\n return SVGPathSeg.PATHSEG_UNKNOWN;\n }\n\n initialCommandIsMoveTo () {\n // If the path is empty it is still valid, so return true.\n if (!this.hasMoreData()) {\n return true;\n }\n const command = this.peekSegmentType();\n // Path must start with moveTo.\n return command === SVGPathSeg.PATHSEG_MOVETO_ABS || command === SVGPathSeg.PATHSEG_MOVETO_REL;\n }\n\n // Parse a number from an SVG path. This very closely follows genericParseNumber(...) from Source/core/svg/SVGParserUtilities.cpp.\n // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-PathDataBNF\n _parseNumber () {\n let exponent = 0;\n let integer = 0;\n let frac = 1;\n let decimal = 0;\n let sign = 1;\n let expsign = 1;\n\n const startIndex = this._currentIndex;\n\n this._skipOptionalSpaces();\n\n // Read the sign.\n if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) === '+') {\n this._currentIndex++;\n } else if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) === '-') {\n this._currentIndex++;\n sign = -1;\n }\n\n if (this._currentIndex === this._endIndex || ((this._string.charAt(this._currentIndex) < '0' || this._string.charAt(this._currentIndex) > '9') && this._string.charAt(this._currentIndex) !== '.')) {\n // The first character of a number must be one of [0-9+-.].\n return undefined;\n }\n\n // Read the integer part, build right-to-left.\n const startIntPartIndex = this._currentIndex;\n while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= '0' && this._string.charAt(this._currentIndex) <= '9') {\n this._currentIndex++; // Advance to first non-digit.\n }\n\n if (this._currentIndex !== startIntPartIndex) {\n let scanIntPartIndex = this._currentIndex - 1;\n let multiplier = 1;\n while (scanIntPartIndex >= startIntPartIndex) {\n integer += multiplier * (this._string.charAt(scanIntPartIndex--) - '0');\n multiplier *= 10;\n }\n }\n\n // Read the decimals.\n if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) === '.') {\n this._currentIndex++;\n\n // There must be a least one digit following the .\n if (this._currentIndex >= this._endIndex || this._string.charAt(this._currentIndex) < '0' || this._string.charAt(this._currentIndex) > '9') {\n return undefined;\n }\n while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= '0' && this._string.charAt(this._currentIndex) <= '9') {\n frac *= 10;\n decimal += (this._string.charAt(this._currentIndex) - '0') / frac;\n this._currentIndex += 1;\n }\n }\n\n // Read the exponent part.\n if (this._currentIndex !== startIndex && this._currentIndex + 1 < this._endIndex && (this._string.charAt(this._currentIndex) === 'e' || this._string.charAt(this._currentIndex) === 'E') && (this._string.charAt(this._currentIndex + 1) !== 'x' && this._string.charAt(this._currentIndex + 1) !== 'm')) {\n this._currentIndex++;\n\n // Read the sign of the exponent.\n if (this._string.charAt(this._currentIndex) === '+') {\n this._currentIndex++;\n } else if (this._string.charAt(this._currentIndex) === '-') {\n this._currentIndex++;\n expsign = -1;\n }\n\n // There must be an exponent.\n if (this._currentIndex >= this._endIndex || this._string.charAt(this._currentIndex) < '0' || this._string.charAt(this._currentIndex) > '9') {\n return undefined;\n }\n\n while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= '0' && this._string.charAt(this._currentIndex) <= '9') {\n exponent *= 10;\n exponent += (this._string.charAt(this._currentIndex) - '0');\n this._currentIndex++;\n }\n }\n\n let number = integer + decimal;\n number *= sign;\n\n if (exponent) {\n number *= 10 ** (expsign * exponent);\n }\n\n if (startIndex === this._currentIndex) {\n return undefined;\n }\n\n this._skipOptionalSpacesOrDelimiter();\n\n return number;\n }\n\n _parseArcFlag () {\n if (this._currentIndex >= this._endIndex) {\n return undefined;\n }\n let flag = false;\n const flagChar = this._string.charAt(this._currentIndex++);\n if (flagChar === '0') {\n flag = false;\n } else if (flagChar === '1') {\n flag = true;\n } else {\n return undefined;\n }\n\n this._skipOptionalSpacesOrDelimiter();\n return flag;\n }\n\n parseSegment () {\n const lookahead = this._string[this._currentIndex];\n let command = this._pathSegTypeFromChar(lookahead);\n if (command === SVGPathSeg.PATHSEG_UNKNOWN) {\n // Possibly an implicit command. Not allowed if this is the first command.\n if (this._previousCommand === SVGPathSeg.PATHSEG_UNKNOWN) {\n return null;\n }\n command = this._nextCommandHelper(lookahead, this._previousCommand);\n if (command === SVGPathSeg.PATHSEG_UNKNOWN) {\n return null;\n }\n } else {\n this._currentIndex++;\n }\n\n this._previousCommand = command;\n\n switch (command) {\n case SVGPathSeg.PATHSEG_MOVETO_REL:\n return new SVGPathSegMovetoRel(owningPathSegList, this._parseNumber(), this._parseNumber());\n case SVGPathSeg.PATHSEG_MOVETO_ABS:\n return new SVGPathSegMovetoAbs(owningPathSegList, this._parseNumber(), this._parseNumber());\n case SVGPathSeg.PATHSEG_LINETO_REL:\n return new SVGPathSegLinetoRel(owningPathSegList, this._parseNumber(), this._parseNumber());\n case SVGPathSeg.PATHSEG_LINETO_ABS:\n return new SVGPathSegLinetoAbs(owningPathSegList, this._parseNumber(), this._parseNumber());\n case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:\n return new SVGPathSegLinetoHorizontalRel(owningPathSegList, this._parseNumber());\n case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:\n return new SVGPathSegLinetoHorizontalAbs(owningPathSegList, this._parseNumber());\n case SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL:\n return new SVGPathSegLinetoVerticalRel(owningPathSegList, this._parseNumber());\n case SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS:\n return new SVGPathSegLinetoVerticalAbs(owningPathSegList, this._parseNumber());\n case SVGPathSeg.PATHSEG_CLOSEPATH:\n this._skipOptionalSpaces();\n return new SVGPathSegClosePath(owningPathSegList);\n case SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL: {\n const points = {x1: this._parseNumber(), y1: this._parseNumber(), x2: this._parseNumber(), y2: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber()};\n return new SVGPathSegCurvetoCubicRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2);\n } case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS: {\n const points = {x1: this._parseNumber(), y1: this._parseNumber(), x2: this._parseNumber(), y2: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber()};\n return new SVGPathSegCurvetoCubicAbs(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2);\n } case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL: {\n const points = {x2: this._parseNumber(), y2: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber()};\n return new SVGPathSegCurvetoCubicSmoothRel(owningPathSegList, points.x, points.y, points.x2, points.y2);\n } case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS: {\n const points = {x2: this._parseNumber(), y2: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber()};\n return new SVGPathSegCurvetoCubicSmoothAbs(owningPathSegList, points.x, points.y, points.x2, points.y2);\n } case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL: {\n const points = {x1: this._parseNumber(), y1: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber()};\n return new SVGPathSegCurvetoQuadraticRel(owningPathSegList, points.x, points.y, points.x1, points.y1);\n } case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS: {\n const points = {x1: this._parseNumber(), y1: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber()};\n return new SVGPathSegCurvetoQuadraticAbs(owningPathSegList, points.x, points.y, points.x1, points.y1);\n } case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:\n return new SVGPathSegCurvetoQuadraticSmoothRel(owningPathSegList, this._parseNumber(), this._parseNumber());\n case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:\n return new SVGPathSegCurvetoQuadraticSmoothAbs(owningPathSegList, this._parseNumber(), this._parseNumber());\n case SVGPathSeg.PATHSEG_ARC_REL: {\n const points = {x1: this._parseNumber(), y1: this._parseNumber(), arcAngle: this._parseNumber(), arcLarge: this._parseArcFlag(), arcSweep: this._parseArcFlag(), x: this._parseNumber(), y: this._parseNumber()};\n return new SVGPathSegArcRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.arcAngle, points.arcLarge, points.arcSweep);\n } case SVGPathSeg.PATHSEG_ARC_ABS: {\n const points = {x1: this._parseNumber(), y1: this._parseNumber(), arcAngle: this._parseNumber(), arcLarge: this._parseArcFlag(), arcSweep: this._parseArcFlag(), x: this._parseNumber(), y: this._parseNumber()};\n return new SVGPathSegArcAbs(owningPathSegList, points.x, points.y, points.x1, points.y1, points.arcAngle, points.arcLarge, points.arcSweep);\n } default:\n throw new Error('Unknown path seg type.');\n }\n }\n }\n\n const builder = new Builder();\n const source = new Source(string);\n\n if (!source.initialCommandIsMoveTo()) {\n return [];\n }\n while (source.hasMoreData()) {\n const pathSeg = source.parseSegment();\n if (!pathSeg) {\n return [];\n }\n builder.appendSegment(pathSeg);\n }\n\n return builder.pathSegList;\n }\n\n // STATIC\n static _pathSegArrayAsString (pathSegArray) {\n let string = '';\n let first = true;\n pathSegArray.forEach((pathSeg) => {\n if (first) {\n first = false;\n string += pathSeg._asPathString();\n } else {\n string += ' ' + pathSeg._asPathString();\n }\n });\n return string;\n }\n }\n\n SVGPathSegList.prototype.classname = 'SVGPathSegList';\n\n Object.defineProperty(SVGPathSegList.prototype, 'numberOfItems', {\n get () {\n this._checkPathSynchronizedToList();\n return this._list.length;\n },\n enumerable: true\n });\n\n // Add the pathSegList accessors to SVGPathElement.\n // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGAnimatedPathData\n Object.defineProperties(SVGPathElement.prototype, {\n pathSegList: {\n get () {\n if (!this._pathSegList) {\n this._pathSegList = new SVGPathSegList(this);\n }\n return this._pathSegList;\n },\n enumerable: true\n },\n // TODO: The following are not implemented and simply return SVGPathElement.pathSegList.\n normalizedPathSegList: {get () { return this.pathSegList; }, enumerable: true},\n animatedPathSegList: {get () { return this.pathSegList; }, enumerable: true},\n animatedNormalizedPathSegList: {get () { return this.pathSegList; }, enumerable: true}\n });\n window.SVGPathSegList = SVGPathSegList;\n}\n})();\n","/* globals jQuery */\n/**\n * Browser detection\n * @module browser\n * @license MIT\n *\n * @copyright 2010 Jeff Schiller, 2010 Alexis Deveria\n */\n\n// Dependencies:\n// 1) jQuery (for $.alert())\n\nimport './svgpathseg.js';\nimport {NS} from './namespaces.js';\n\nconst $ = jQuery;\n\nconst supportsSVG_ = (function () {\nreturn Boolean(document.createElementNS && document.createElementNS(NS.SVG, 'svg').createSVGRect);\n}());\n\n/**\n * @function module:browser.supportsSvg\n * @returns {boolean}\n*/\nexport const supportsSvg = () => supportsSVG_;\n\nconst {userAgent} = navigator;\nconst svg = document.createElementNS(NS.SVG, 'svg');\n\n// Note: Browser sniffing should only be used if no other detection method is possible\nconst isOpera_ = Boolean(window.opera);\nconst isWebkit_ = userAgent.includes('AppleWebKit');\nconst isGecko_ = userAgent.includes('Gecko/');\nconst isIE_ = userAgent.includes('MSIE');\nconst isChrome_ = userAgent.includes('Chrome/');\nconst isWindows_ = userAgent.includes('Windows');\nconst isMac_ = userAgent.includes('Macintosh');\nconst isTouch_ = 'ontouchstart' in window;\n\nconst supportsSelectors_ = (function () {\nreturn Boolean(svg.querySelector);\n}());\n\nconst supportsXpath_ = (function () {\nreturn Boolean(document.evaluate);\n}());\n\n// segList functions (for FF1.5 and 2.0)\nconst supportsPathReplaceItem_ = (function () {\nconst path = document.createElementNS(NS.SVG, 'path');\npath.setAttribute('d', 'M0,0 10,10');\nconst seglist = path.pathSegList;\nconst seg = path.createSVGPathSegLinetoAbs(5, 5);\ntry {\n seglist.replaceItem(seg, 1);\n return true;\n} catch (err) {}\nreturn false;\n}());\n\nconst supportsPathInsertItemBefore_ = (function () {\nconst path = document.createElementNS(NS.SVG, 'path');\npath.setAttribute('d', 'M0,0 10,10');\nconst seglist = path.pathSegList;\nconst seg = path.createSVGPathSegLinetoAbs(5, 5);\ntry {\n seglist.insertItemBefore(seg, 1);\n return true;\n} catch (err) {}\nreturn false;\n}());\n\n// text character positioning (for IE9 and now Chrome)\nconst supportsGoodTextCharPos_ = (function () {\nconst svgroot = document.createElementNS(NS.SVG, 'svg');\nconst svgcontent = document.createElementNS(NS.SVG, 'svg');\ndocument.documentElement.append(svgroot);\nsvgcontent.setAttribute('x', 5);\nsvgroot.append(svgcontent);\nconst text = document.createElementNS(NS.SVG, 'text');\ntext.textContent = 'a';\nsvgcontent.append(text);\ntry { // Chrome now fails here\n const pos = text.getStartPositionOfChar(0).x;\n return (pos === 0);\n} catch (err) {\n return false;\n} finally {\n svgroot.remove();\n}\n}());\n\nconst supportsPathBBox_ = (function () {\nconst svgcontent = document.createElementNS(NS.SVG, 'svg');\ndocument.documentElement.append(svgcontent);\nconst path = document.createElementNS(NS.SVG, 'path');\npath.setAttribute('d', 'M0,0 C0,0 10,10 10,0');\nsvgcontent.append(path);\nconst bbox = path.getBBox();\nsvgcontent.remove();\nreturn (bbox.height > 4 && bbox.height < 5);\n}());\n\n// Support for correct bbox sizing on groups with horizontal/vertical lines\nconst supportsHVLineContainerBBox_ = (function () {\nconst svgcontent = document.createElementNS(NS.SVG, 'svg');\ndocument.documentElement.append(svgcontent);\nconst path = document.createElementNS(NS.SVG, 'path');\npath.setAttribute('d', 'M0,0 10,0');\nconst path2 = document.createElementNS(NS.SVG, 'path');\npath2.setAttribute('d', 'M5,0 15,0');\nconst g = document.createElementNS(NS.SVG, 'g');\ng.append(path, path2);\nsvgcontent.append(g);\nconst bbox = g.getBBox();\nsvgcontent.remove();\n// Webkit gives 0, FF gives 10, Opera (correctly) gives 15\nreturn (bbox.width === 15);\n}());\n\nconst supportsEditableText_ = (function () {\n// TODO: Find better way to check support for this\nreturn isOpera_;\n}());\n\nconst supportsGoodDecimals_ = (function () {\n// Correct decimals on clone attributes (Opera < 10.5/win/non-en)\nconst rect = document.createElementNS(NS.SVG, 'rect');\nrect.setAttribute('x', 0.1);\nconst crect = rect.cloneNode(false);\nconst retValue = (!crect.getAttribute('x').includes(','));\nif (!retValue) {\n // Todo: i18nize or remove\n $.alert(\n 'NOTE: This version of Opera is known to contain bugs in SVG-edit.\\n' +\n 'Please upgrade to the latest version in which the problems have been fixed.'\n );\n}\nreturn retValue;\n}());\n\nconst supportsNonScalingStroke_ = (function () {\nconst rect = document.createElementNS(NS.SVG, 'rect');\nrect.setAttribute('style', 'vector-effect:non-scaling-stroke');\nreturn rect.style.vectorEffect === 'non-scaling-stroke';\n}());\n\nlet supportsNativeSVGTransformLists_ = (function () {\nconst rect = document.createElementNS(NS.SVG, 'rect');\nconst rxform = rect.transform.baseVal;\nconst t1 = svg.createSVGTransform();\nrxform.appendItem(t1);\nconst r1 = rxform.getItem(0);\nconst isSVGTransform = (o) => {\n // https://developer.mozilla.org/en-US/docs/Web/API/SVGTransform\n return o && typeof o === 'object' && typeof o.setMatrix === 'function' && 'angle' in o;\n};\nreturn isSVGTransform(r1) && isSVGTransform(t1) &&\n r1.type === t1.type && r1.angle === t1.angle &&\n r1.matrix.a === t1.matrix.a &&\n r1.matrix.b === t1.matrix.b &&\n r1.matrix.c === t1.matrix.c &&\n r1.matrix.d === t1.matrix.d &&\n r1.matrix.e === t1.matrix.e &&\n r1.matrix.f === t1.matrix.f;\n}());\n\n// Public API\n\n/**\n * @function module:browser.isOpera\n * @returns {boolean}\n*/\nexport const isOpera = () => isOpera_;\n/**\n * @function module:browser.isWebkit\n * @returns {boolean}\n*/\nexport const isWebkit = () => isWebkit_;\n/**\n * @function module:browser.isGecko\n * @returns {boolean}\n*/\nexport const isGecko = () => isGecko_;\n/**\n * @function module:browser.isIE\n * @returns {boolean}\n*/\nexport const isIE = () => isIE_;\n/**\n * @function module:browser.isChrome\n * @returns {boolean}\n*/\nexport const isChrome = () => isChrome_;\n/**\n * @function module:browser.isWindows\n * @returns {boolean}\n*/\nexport const isWindows = () => isWindows_;\n/**\n * @function module:browser.isMac\n * @returns {boolean}\n*/\nexport const isMac = () => isMac_;\n/**\n * @function module:browser.isTouch\n * @returns {boolean}\n*/\nexport const isTouch = () => isTouch_;\n\n/**\n * @function module:browser.supportsSelectors\n * @returns {boolean}\n*/\nexport const supportsSelectors = () => supportsSelectors_;\n\n/**\n * @function module:browser.supportsXpath\n * @returns {boolean}\n*/\nexport const supportsXpath = () => supportsXpath_;\n\n/**\n * @function module:browser.supportsPathReplaceItem\n * @returns {boolean}\n*/\nexport const supportsPathReplaceItem = () => supportsPathReplaceItem_;\n\n/**\n * @function module:browser.supportsPathInsertItemBefore\n * @returns {boolean}\n*/\nexport const supportsPathInsertItemBefore = () => supportsPathInsertItemBefore_;\n\n/**\n * @function module:browser.supportsPathBBox\n * @returns {boolean}\n*/\nexport const supportsPathBBox = () => supportsPathBBox_;\n\n/**\n * @function module:browser.supportsHVLineContainerBBox\n * @returns {boolean}\n*/\nexport const supportsHVLineContainerBBox = () => supportsHVLineContainerBBox_;\n\n/**\n * @function module:browser.supportsGoodTextCharPos\n * @returns {boolean}\n*/\nexport const supportsGoodTextCharPos = () => supportsGoodTextCharPos_;\n\n/**\n* @function module:browser.supportsEditableText\n * @returns {boolean}\n*/\nexport const supportsEditableText = () => supportsEditableText_;\n\n/**\n * @function module:browser.supportsGoodDecimals\n * @returns {boolean}\n*/\nexport const supportsGoodDecimals = () => supportsGoodDecimals_;\n\n/**\n* @function module:browser.supportsNonScalingStroke\n* @returns {boolean}\n*/\nexport const supportsNonScalingStroke = () => supportsNonScalingStroke_;\n\n/**\n* @function module:browser.supportsNativeTransformLists\n* @returns {boolean}\n*/\nexport const supportsNativeTransformLists = () => supportsNativeSVGTransformLists_;\n\n/**\n * Set `supportsNativeSVGTransformLists_` to `false` (for unit testing).\n * @function module:browser.disableSupportsNativeTransformLists\n * @returns {void}\n*/\nexport const disableSupportsNativeTransformLists = () => {\n supportsNativeSVGTransformLists_ = false;\n};\n","/**\n * jQuery module to work with SVG attributes\n * @module jQueryAttr\n * @license MIT\n */\n\n/**\n* This fixes `$(...).attr()` to work as expected with SVG elements.\n* Does not currently use `*AttributeNS()` since we rarely need that.\n* Adds {@link external:jQuery.fn.attr}.\n* See {@link https://api.jquery.com/attr/} for basic documentation of `.attr()`.\n*\n* Additional functionality:\n* - When getting attributes, a string that's a number is returned as type number.\n* - If an array is supplied as the first parameter, multiple values are returned\n* as an object with values for each given attribute.\n* @function module:jQueryAttr.jQueryAttr\n* @param {external:jQuery} $ The jQuery object to which to add the plug-in\n* @returns {external:jQuery}\n*/\nexport default function jQueryPluginSVG ($) {\n const proxied = $.fn.attr,\n svgns = 'http://www.w3.org/2000/svg';\n /**\n * @typedef {PlainObject} module:jQueryAttr.Attributes\n */\n /**\n * @function external:jQuery.fn.attr\n * @param {string|string[]|PlainObject} key\n * @param {string} value\n * @returns {external:jQuery|module:jQueryAttr.Attributes}\n */\n $.fn.attr = function (key, value) {\n const len = this.length;\n if (!len) { return proxied.call(this, key, value); }\n for (let i = 0; i < len; ++i) {\n const elem = this[i];\n // set/get SVG attribute\n if (elem.namespaceURI === svgns) {\n // Setting attribute\n if (value !== undefined) {\n elem.setAttribute(key, value);\n } else if (Array.isArray(key)) {\n // Getting attributes from array\n const obj = {};\n let j = key.length;\n\n while (j--) {\n const aname = key[j];\n let attr = elem.getAttribute(aname);\n // This returns a number when appropriate\n if (attr || attr === '0') {\n attr = isNaN(attr) ? attr : (attr - 0);\n }\n obj[aname] = attr;\n }\n return obj;\n }\n if (typeof key === 'object') {\n // Setting attributes from object\n for (const [name, val] of Object.entries(key)) {\n elem.setAttribute(name, val);\n }\n // Getting attribute\n } else {\n let attr = elem.getAttribute(key);\n if (attr || attr === '0') {\n attr = isNaN(attr) ? attr : (attr - 0);\n }\n return attr;\n }\n } else {\n return proxied.call(this, key, value);\n }\n }\n return this;\n };\n return $;\n}\n","/**\n * Partial polyfill of `SVGTransformList`\n * @module SVGTransformList\n *\n * @license MIT\n *\n * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller\n */\n\nimport {NS} from './namespaces.js';\nimport {supportsNativeTransformLists} from './browser.js';\n\nconst svgroot = document.createElementNS(NS.SVG, 'svg');\n\n/**\n * Helper function to convert `SVGTransform` to a string.\n * @param {SVGTransform} xform\n * @returns {string}\n */\nfunction transformToString (xform) {\n const m = xform.matrix;\n let text = '';\n switch (xform.type) {\n case 1: // MATRIX\n text = 'matrix(' + [m.a, m.b, m.c, m.d, m.e, m.f].join(',') + ')';\n break;\n case 2: // TRANSLATE\n text = 'translate(' + m.e + ',' + m.f + ')';\n break;\n case 3: // SCALE\n if (m.a === m.d) {\n text = 'scale(' + m.a + ')';\n } else {\n text = 'scale(' + m.a + ',' + m.d + ')';\n }\n break;\n case 4: { // ROTATE\n let cx = 0;\n let cy = 0;\n // this prevents divide by zero\n if (xform.angle !== 0) {\n const K = 1 - m.a;\n cy = (K * m.f + m.b * m.e) / (K * K + m.b * m.b);\n cx = (m.e - m.b * cy) / K;\n }\n text = 'rotate(' + xform.angle + ' ' + cx + ',' + cy + ')';\n break;\n }\n }\n return text;\n}\n\n/**\n * Map of SVGTransformList objects.\n */\nlet listMap_ = {};\n\n/**\n* @interface module:SVGTransformList.SVGEditTransformList\n* @property {Integer} numberOfItems unsigned long\n*/\n/**\n* @function module:SVGTransformList.SVGEditTransformList#clear\n* @returns {void}\n*/\n/**\n* @function module:SVGTransformList.SVGEditTransformList#initialize\n* @param {SVGTransform} newItem\n* @returns {SVGTransform}\n*/\n/**\n* (DOES NOT THROW DOMException, INDEX_SIZE_ERR)\n* @function module:SVGTransformList.SVGEditTransformList#getItem\n* @param {Integer} index unsigned long\n* @returns {SVGTransform}\n*/\n/**\n* (DOES NOT THROW DOMException, INDEX_SIZE_ERR)\n* @function module:SVGTransformList.SVGEditTransformList#insertItemBefore\n* @param {SVGTransform} newItem\n* @param {Integer} index unsigned long\n* @returns {SVGTransform}\n*/\n/**\n* (DOES NOT THROW DOMException, INDEX_SIZE_ERR)\n* @function module:SVGTransformList.SVGEditTransformList#replaceItem\n* @param {SVGTransform} newItem\n* @param {Integer} index unsigned long\n* @returns {SVGTransform}\n*/\n/**\n* (DOES NOT THROW DOMException, INDEX_SIZE_ERR)\n* @function module:SVGTransformList.SVGEditTransformList#removeItem\n* @param {Integer} index unsigned long\n* @returns {SVGTransform}\n*/\n/**\n* @function module:SVGTransformList.SVGEditTransformList#appendItem\n* @param {SVGTransform} newItem\n* @returns {SVGTransform}\n*/\n/**\n* NOT IMPLEMENTED\n* @ignore\n* @function module:SVGTransformList.SVGEditTransformList#createSVGTransformFromMatrix\n* @param {SVGMatrix} matrix\n* @returns {SVGTransform}\n*/\n/**\n* NOT IMPLEMENTED\n* @ignore\n* @function module:SVGTransformList.SVGEditTransformList#consolidate\n* @returns {SVGTransform}\n*/\n\n/**\n* SVGTransformList implementation for Webkit.\n* These methods do not currently raise any exceptions.\n* These methods also do not check that transforms are being inserted. This is basically\n* implementing as much of SVGTransformList that we need to get the job done.\n* @implements {module:SVGTransformList.SVGEditTransformList}\n*/\nexport class SVGTransformList { // eslint-disable-line no-shadow\n /**\n * @param {Element} elem\n * @returns {SVGTransformList}\n */\n constructor (elem) {\n this._elem = elem || null;\n this._xforms = [];\n // TODO: how do we capture the undo-ability in the changed transform list?\n this._update = function () {\n let tstr = '';\n // /* const concatMatrix = */ svgroot.createSVGMatrix();\n for (let i = 0; i < this.numberOfItems; ++i) {\n const xform = this._list.getItem(i);\n tstr += transformToString(xform) + ' ';\n }\n this._elem.setAttribute('transform', tstr);\n };\n this._list = this;\n this._init = function () {\n // Transform attribute parser\n let str = this._elem.getAttribute('transform');\n if (!str) { return; }\n\n // TODO: Add skew support in future\n const re = /\\s*((scale|matrix|rotate|translate)\\s*\\(.*?\\))\\s*,?\\s*/;\n // const re = /\\s*(?(?:scale|matrix|rotate|translate)\\s*\\(.*?\\))\\s*,?\\s*/;\n let m = true;\n while (m) {\n m = str.match(re);\n str = str.replace(re, '');\n if (m && m[1]) {\n const x = m[1];\n const bits = x.split(/\\s*\\(/);\n const name = bits[0];\n const valBits = bits[1].match(/\\s*(.*?)\\s*\\)/);\n valBits[1] = valBits[1].replace(/(\\d)-/g, '$1 -');\n const valArr = valBits[1].split(/[, ]+/);\n const letters = 'abcdef'.split('');\n /*\n if (m && m.groups.xform) {\n const x = m.groups.xform;\n const [name, bits] = x.split(/\\s*\\(/);\n const valBits = bits.match(/\\s*(?.*?)\\s*\\)/);\n valBits.groups.nonWhitespace = valBits.groups.nonWhitespace.replace(\n /(?\\d)-/g, '$ -'\n );\n const valArr = valBits.groups.nonWhitespace.split(/[, ]+/);\n const letters = [...'abcdef'];\n */\n const mtx = svgroot.createSVGMatrix();\n Object.values(valArr).forEach(function (item, i) {\n valArr[i] = parseFloat(item);\n if (name === 'matrix') {\n mtx[letters[i]] = valArr[i];\n }\n });\n const xform = svgroot.createSVGTransform();\n const fname = 'set' + name.charAt(0).toUpperCase() + name.slice(1);\n const values = name === 'matrix' ? [mtx] : valArr;\n\n if (name === 'scale' && values.length === 1) {\n values.push(values[0]);\n } else if (name === 'translate' && values.length === 1) {\n values.push(0);\n } else if (name === 'rotate' && values.length === 1) {\n values.push(0, 0);\n }\n xform[fname](...values);\n this._list.appendItem(xform);\n }\n }\n };\n this._removeFromOtherLists = function (item) {\n if (item) {\n // Check if this transform is already in a transformlist, and\n // remove it if so.\n Object.values(listMap_).some((tl) => {\n for (let i = 0, len = tl._xforms.length; i < len; ++i) {\n if (tl._xforms[i] === item) {\n tl.removeItem(i);\n return true;\n }\n }\n return false;\n });\n }\n };\n\n this.numberOfItems = 0;\n }\n /**\n * @returns {void}\n */\n clear () {\n this.numberOfItems = 0;\n this._xforms = [];\n }\n\n /**\n * @param {SVGTransform} newItem\n * @returns {void}\n */\n initialize (newItem) {\n this.numberOfItems = 1;\n this._removeFromOtherLists(newItem);\n this._xforms = [newItem];\n }\n\n /**\n * @param {Integer} index unsigned long\n * @throws {Error}\n * @returns {SVGTransform}\n */\n getItem (index) {\n if (index < this.numberOfItems && index >= 0) {\n return this._xforms[index];\n }\n const err = new Error('DOMException with code=INDEX_SIZE_ERR');\n err.code = 1;\n throw err;\n }\n\n /**\n * @param {SVGTransform} newItem\n * @param {Integer} index unsigned long\n * @returns {SVGTransform}\n */\n insertItemBefore (newItem, index) {\n let retValue = null;\n if (index >= 0) {\n if (index < this.numberOfItems) {\n this._removeFromOtherLists(newItem);\n const newxforms = new Array(this.numberOfItems + 1);\n // TODO: use array copying and slicing\n let i;\n for (i = 0; i < index; ++i) {\n newxforms[i] = this._xforms[i];\n }\n newxforms[i] = newItem;\n for (let j = i + 1; i < this.numberOfItems; ++j, ++i) {\n newxforms[j] = this._xforms[i];\n }\n this.numberOfItems++;\n this._xforms = newxforms;\n retValue = newItem;\n this._list._update();\n } else {\n retValue = this._list.appendItem(newItem);\n }\n }\n return retValue;\n }\n\n /**\n * @param {SVGTransform} newItem\n * @param {Integer} index unsigned long\n * @returns {SVGTransform}\n */\n replaceItem (newItem, index) {\n let retValue = null;\n if (index < this.numberOfItems && index >= 0) {\n this._removeFromOtherLists(newItem);\n this._xforms[index] = newItem;\n retValue = newItem;\n this._list._update();\n }\n return retValue;\n }\n\n /**\n * @param {Integer} index unsigned long\n * @throws {Error}\n * @returns {SVGTransform}\n */\n removeItem (index) {\n if (index < this.numberOfItems && index >= 0) {\n const retValue = this._xforms[index];\n const newxforms = new Array(this.numberOfItems - 1);\n let i;\n for (i = 0; i < index; ++i) {\n newxforms[i] = this._xforms[i];\n }\n for (let j = i; j < this.numberOfItems - 1; ++j, ++i) {\n newxforms[j] = this._xforms[i + 1];\n }\n this.numberOfItems--;\n this._xforms = newxforms;\n this._list._update();\n return retValue;\n }\n const err = new Error('DOMException with code=INDEX_SIZE_ERR');\n err.code = 1;\n throw err;\n }\n\n /**\n * @param {SVGTransform} newItem\n * @returns {SVGTransform}\n */\n appendItem (newItem) {\n this._removeFromOtherLists(newItem);\n this._xforms.push(newItem);\n this.numberOfItems++;\n this._list._update();\n return newItem;\n }\n}\n\n/**\n* @function module:SVGTransformList.resetListMap\n* @returns {void}\n*/\nexport const resetListMap = function () {\n listMap_ = {};\n};\n\n/**\n * Removes transforms of the given element from the map.\n * @function module:SVGTransformList.removeElementFromListMap\n * @param {Element} elem - a DOM Element\n * @returns {void}\n */\nexport let removeElementFromListMap = function (elem) { // eslint-disable-line import/no-mutable-exports\n if (elem.id && listMap_[elem.id]) {\n delete listMap_[elem.id];\n }\n};\n\n/**\n* Returns an object that behaves like a `SVGTransformList` for the given DOM element.\n* @function module:SVGTransformList.getTransformList\n* @param {Element} elem - DOM element to get a transformlist from\n* @todo The polyfill should have `SVGAnimatedTransformList` and this should use it\n* @returns {SVGAnimatedTransformList|SVGTransformList}\n*/\nexport const getTransformList = function (elem) {\n if (!supportsNativeTransformLists()) {\n const id = elem.id || 'temp';\n let t = listMap_[id];\n if (!t || id === 'temp') {\n listMap_[id] = new SVGTransformList(elem);\n listMap_[id]._init();\n t = listMap_[id];\n }\n return t;\n }\n if (elem.transform) {\n return elem.transform.baseVal;\n }\n if (elem.gradientTransform) {\n return elem.gradientTransform.baseVal;\n }\n if (elem.patternTransform) {\n return elem.patternTransform.baseVal;\n }\n\n return null;\n};\n\n/**\n* @callback module:SVGTransformList.removeElementFromListMap\n* @param {Element} elem\n*/\n/**\n* Replace `removeElementFromListMap` for unit-testing.\n* @function module:SVGTransformList.changeRemoveElementFromListMap\n* @param {module:SVGTransformList.removeElementFromListMap} cb Passed a single argument `elem`\n* @returns {void}\n*/\n\nexport const changeRemoveElementFromListMap = function (cb) { // eslint-disable-line promise/prefer-await-to-callbacks\n removeElementFromListMap = cb;\n};\n","/**\n * Tools for working with units\n * @module units\n * @license MIT\n *\n * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller\n */\n\nimport {NS} from './namespaces.js';\nimport {isNullish} from './utilities.js';\n\nconst wAttrs = ['x', 'x1', 'cx', 'rx', 'width'];\nconst hAttrs = ['y', 'y1', 'cy', 'ry', 'height'];\nconst unitAttrs = ['r', 'radius', ...wAttrs, ...hAttrs];\n// unused\n/*\nconst unitNumMap = {\n '%': 2,\n em: 3,\n ex: 4,\n px: 5,\n cm: 6,\n mm: 7,\n in: 8,\n pt: 9,\n pc: 10\n};\n*/\n// Container of elements.\nlet elementContainer_;\n\n// Stores mapping of unit type to user coordinates.\nlet typeMap_ = {};\n\n/**\n * @interface module:units.ElementContainer\n */\n/**\n * @function module:units.ElementContainer#getBaseUnit\n * @returns {string} The base unit type of the container ('em')\n */\n/**\n * @function module:units.ElementContainer#getElement\n * @returns {?Element} An element in the container given an id\n */\n/**\n * @function module:units.ElementContainer#getHeight\n * @returns {Float} The container's height\n */\n/**\n * @function module:units.ElementContainer#getWidth\n * @returns {Float} The container's width\n */\n/**\n * @function module:units.ElementContainer#getRoundDigits\n * @returns {Integer} The number of digits number should be rounded to\n */\n\n/**\n * @typedef {PlainObject} module:units.TypeMap\n * @property {Float} em\n * @property {Float} ex\n * @property {Float} in\n * @property {Float} cm\n * @property {Float} mm\n * @property {Float} pt\n * @property {Float} pc\n * @property {Integer} px\n * @property {0} %\n */\n\n/**\n * Initializes this module.\n *\n * @function module:units.init\n * @param {module:units.ElementContainer} elementContainer - An object implementing the ElementContainer interface.\n * @returns {void}\n */\nexport const init = function (elementContainer) {\n elementContainer_ = elementContainer;\n\n // Get correct em/ex values by creating a temporary SVG.\n const svg = document.createElementNS(NS.SVG, 'svg');\n document.body.append(svg);\n const rect = document.createElementNS(NS.SVG, 'rect');\n rect.setAttribute('width', '1em');\n rect.setAttribute('height', '1ex');\n rect.setAttribute('x', '1in');\n svg.append(rect);\n const bb = rect.getBBox();\n svg.remove();\n\n const inch = bb.x;\n typeMap_ = {\n em: bb.width,\n ex: bb.height,\n in: inch,\n cm: inch / 2.54,\n mm: inch / 25.4,\n pt: inch / 72,\n pc: inch / 6,\n px: 1,\n '%': 0\n };\n};\n\n/**\n* Group: Unit conversion functions\n*/\n\n/**\n * @function module:units.getTypeMap\n * @returns {module:units.TypeMap} The unit object with values for each unit\n*/\nexport const getTypeMap = function () {\n return typeMap_;\n};\n\n/**\n* @typedef {GenericArray} module:units.CompareNumbers\n* @property {Integer} length 2\n* @property {Float} 0\n* @property {Float} 1\n*/\n\n/**\n* Rounds a given value to a float with number of digits defined in\n* `round_digits` of `saveOptions`\n*\n* @function module:units.shortFloat\n* @param {string|Float|module:units.CompareNumbers} val - The value (or Array of two numbers) to be rounded\n* @returns {Float|string} If a string/number was given, returns a Float. If an array, return a string\n* with comma-separated floats\n*/\nexport const shortFloat = function (val) {\n const digits = elementContainer_.getRoundDigits();\n if (!isNaN(val)) {\n return Number(Number(val).toFixed(digits));\n }\n if (Array.isArray(val)) {\n return shortFloat(val[0]) + ',' + shortFloat(val[1]);\n }\n return parseFloat(val).toFixed(digits) - 0;\n};\n\n/**\n* Converts the number to given unit or baseUnit.\n* @function module:units.convertUnit\n* @param {string|Float} val\n* @param {\"em\"|\"ex\"|\"in\"|\"cm\"|\"mm\"|\"pt\"|\"pc\"|\"px\"|\"%\"} [unit]\n* @returns {Float}\n*/\nexport const convertUnit = function (val, unit) {\n unit = unit || elementContainer_.getBaseUnit();\n // baseVal.convertToSpecifiedUnits(unitNumMap[unit]);\n // const val = baseVal.valueInSpecifiedUnits;\n // baseVal.convertToSpecifiedUnits(1);\n return shortFloat(val / typeMap_[unit]);\n};\n\n/**\n* Sets an element's attribute based on the unit in its current value.\n*\n* @function module:units.setUnitAttr\n* @param {Element} elem - DOM element to be changed\n* @param {string} attr - Name of the attribute associated with the value\n* @param {string} val - Attribute value to convert\n* @returns {void}\n*/\nexport const setUnitAttr = function (elem, attr, val) {\n // if (!isNaN(val)) {\n // New value is a number, so check currently used unit\n // const oldVal = elem.getAttribute(attr);\n\n // Enable this for alternate mode\n // if (oldVal !== null && (isNaN(oldVal) || elementContainer_.getBaseUnit() !== 'px')) {\n // // Old value was a number, so get unit, then convert\n // let unit;\n // if (oldVal.substr(-1) === '%') {\n // const res = getResolution();\n // unit = '%';\n // val *= 100;\n // if (wAttrs.includes(attr)) {\n // val = val / res.w;\n // } else if (hAttrs.includes(attr)) {\n // val = val / res.h;\n // } else {\n // return val / Math.sqrt((res.w*res.w) + (res.h*res.h))/Math.sqrt(2);\n // }\n // } else {\n // if (elementContainer_.getBaseUnit() !== 'px') {\n // unit = elementContainer_.getBaseUnit();\n // } else {\n // unit = oldVal.substr(-2);\n // }\n // val = val / typeMap_[unit];\n // }\n //\n // val += unit;\n // }\n // }\n elem.setAttribute(attr, val);\n};\n\nconst attrsToConvert = {\n line: ['x1', 'x2', 'y1', 'y2'],\n circle: ['cx', 'cy', 'r'],\n ellipse: ['cx', 'cy', 'rx', 'ry'],\n foreignObject: ['x', 'y', 'width', 'height'],\n rect: ['x', 'y', 'width', 'height'],\n image: ['x', 'y', 'width', 'height'],\n use: ['x', 'y', 'width', 'height'],\n text: ['x', 'y']\n};\n\n/**\n* Converts all applicable attributes to the configured baseUnit.\n* @function module:units.convertAttrs\n* @param {Element} element - A DOM element whose attributes should be converted\n* @returns {void}\n*/\nexport const convertAttrs = function (element) {\n const elName = element.tagName;\n const unit = elementContainer_.getBaseUnit();\n const attrs = attrsToConvert[elName];\n if (!attrs) { return; }\n\n const len = attrs.length;\n for (let i = 0; i < len; i++) {\n const attr = attrs[i];\n const cur = element.getAttribute(attr);\n if (cur) {\n if (!isNaN(cur)) {\n element.setAttribute(attr, (cur / typeMap_[unit]) + unit);\n }\n // else {\n // Convert existing?\n // }\n }\n }\n};\n\n/**\n* Converts given values to numbers. Attributes must be supplied in\n* case a percentage is given.\n*\n* @function module:units.convertToNum\n* @param {string} attr - Name of the attribute associated with the value\n* @param {string} val - Attribute value to convert\n* @returns {Float} The converted number\n*/\nexport const convertToNum = function (attr, val) {\n // Return a number if that's what it already is\n if (!isNaN(val)) { return val - 0; }\n if (val.substr(-1) === '%') {\n // Deal with percentage, depends on attribute\n const num = val.substr(0, val.length - 1) / 100;\n const width = elementContainer_.getWidth();\n const height = elementContainer_.getHeight();\n\n if (wAttrs.includes(attr)) {\n return num * width;\n }\n if (hAttrs.includes(attr)) {\n return num * height;\n }\n return num * Math.sqrt((width * width) + (height * height)) / Math.sqrt(2);\n }\n const unit = val.substr(-2);\n const num = val.substr(0, val.length - 2);\n // Note that this multiplication turns the string into a number\n return num * typeMap_[unit];\n};\n\n/**\n* Check if an attribute's value is in a valid format.\n* @function module:units.isValidUnit\n* @param {string} attr - The name of the attribute associated with the value\n* @param {string} val - The attribute value to check\n* @param {Element} selectedElement\n* @returns {boolean} Whether the unit is valid\n*/\nexport const isValidUnit = function (attr, val, selectedElement) {\n if (unitAttrs.includes(attr)) {\n // True if it's just a number\n if (!isNaN(val)) {\n return true;\n }\n // Not a number, check if it has a valid unit\n val = val.toLowerCase();\n return Object.keys(typeMap_).some((unit) => {\n const re = new RegExp('^-?[\\\\d\\\\.]+' + unit + '$');\n return re.test(val);\n });\n }\n if (attr === 'id') {\n // if we're trying to change the id, make sure it's not already present in the doc\n // and the id value is valid.\n\n let result = false;\n // because getElem() can throw an exception in the case of an invalid id\n // (according to https://www.w3.org/TR/xml-id/ IDs must be a NCName)\n // we wrap it in an exception and only return true if the ID was valid and\n // not already present\n try {\n const elem = elementContainer_.getElement(val);\n result = (isNullish(elem) || elem === selectedElement);\n } catch (e) {}\n return result;\n }\n return true;\n};\n","/**\n * For command history tracking and undo functionality\n * @module history\n * @license MIT\n * @copyright 2010 Jeff Schiller\n */\n\nimport {getHref, setHref, getRotationAngle, isNullish} from './utilities.js';\nimport {removeElementFromListMap} from './svgtransformlist.js';\n\n/**\n* Group: Undo/Redo history management\n*/\nexport const HistoryEventTypes = {\n BEFORE_APPLY: 'before_apply',\n AFTER_APPLY: 'after_apply',\n BEFORE_UNAPPLY: 'before_unapply',\n AFTER_UNAPPLY: 'after_unapply'\n};\n\n// const removedElements = {};\n\n/**\n* Base class for commands.\n*/\nclass Command {\n /**\n * @returns {string}\n */\n getText () {\n return this.text;\n }\n}\n\n// Todo: Figure out why the interface members aren't showing\n// up (with or without modules applied), despite our apparently following\n// http://usejsdoc.org/tags-interface.html#virtual-comments\n\n/**\n * An interface that all command objects must implement.\n * @interface module:history.HistoryCommand\n*/\n/**\n * Applies\n *\n * @function module:history.HistoryCommand#apply\n * @param {module:history.HistoryEventHandler}\n * @fires module:history~Command#event:history\n * @returns {void|true}\n */\n/**\n *\n * Unapplies\n * @function module:history.HistoryCommand#unapply\n * @param {module:history.HistoryEventHandler}\n * @fires module:history~Command#event:history\n * @returns {void|true}\n */\n/**\n * Returns the elements\n * @function module:history.HistoryCommand#elements\n * @returns {Element[]}\n */\n/**\n * Gets the text\n * @function module:history.HistoryCommand#getText\n * @returns {string}\n */\n/**\n * Gives the type\n * @function module:history.HistoryCommand.type\n * @returns {string}\n */\n/**\n * Gives the type\n * @function module:history.HistoryCommand#type\n * @returns {string}\n*/\n\n/**\n * @event module:history~Command#event:history\n * @type {module:history.HistoryCommand}\n */\n\n/**\n * An interface for objects that will handle history events.\n * @interface module:history.HistoryEventHandler\n */\n/**\n *\n * @function module:history.HistoryEventHandler#handleHistoryEvent\n * @param {string} eventType One of the HistoryEvent types\n * @param {module:history~Command#event:history} command\n * @listens module:history~Command#event:history\n * @returns {void}\n *\n */\n\n/**\n * History command for an element that had its DOM position changed.\n * @implements {module:history.HistoryCommand}\n * @param {Element} elem - The DOM element that was moved\n * @param {Element} oldNextSibling - The element's next sibling before it was moved\n * @param {Element} oldParent - The element's parent before it was moved\n * @param {string} [text] - An optional string visible to user related to this change\n*/\nexport class MoveElementCommand extends Command {\n constructor (elem, oldNextSibling, oldParent, text) {\n super();\n this.elem = elem;\n this.text = text ? ('Move ' + elem.tagName + ' to ' + text) : ('Move ' + elem.tagName);\n this.oldNextSibling = oldNextSibling;\n this.oldParent = oldParent;\n this.newNextSibling = elem.nextSibling;\n this.newParent = elem.parentNode;\n }\n type () { // eslint-disable-line class-methods-use-this\n return 'svgedit.history.MoveElementCommand';\n }\n\n /**\n * Re-positions the element.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n apply (handler) {\n // TODO(codedread): Refactor this common event code into a base HistoryCommand class.\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);\n }\n\n this.elem = this.newParent.insertBefore(this.elem, this.newNextSibling);\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);\n }\n }\n\n /**\n * Positions the element back to its original location.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n unapply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);\n }\n\n this.elem = this.oldParent.insertBefore(this.elem, this.oldNextSibling);\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);\n }\n }\n\n /**\n * @returns {Element[]} Array with element associated with this command\n */\n elements () {\n return [this.elem];\n }\n}\nMoveElementCommand.type = MoveElementCommand.prototype.type;\n\n/**\n* History command for an element that was added to the DOM.\n* @implements {module:history.HistoryCommand}\n*\n* @param {Element} elem - The newly added DOM element\n* @param {string} text - An optional string visible to user related to this change\n*/\nexport class InsertElementCommand extends Command {\n constructor (elem, text) {\n super();\n this.elem = elem;\n this.text = text || ('Create ' + elem.tagName);\n this.parent = elem.parentNode;\n this.nextSibling = this.elem.nextSibling;\n }\n\n type () { // eslint-disable-line class-methods-use-this\n return 'svgedit.history.InsertElementCommand';\n }\n\n /**\n * Re-inserts the new element.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n apply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);\n }\n\n this.elem = this.parent.insertBefore(this.elem, this.nextSibling);\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);\n }\n }\n\n /**\n * Removes the element.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n unapply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);\n }\n\n this.parent = this.elem.parentNode;\n this.elem = this.elem.parentNode.removeChild(this.elem);\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);\n }\n }\n\n /**\n * @returns {Element[]} Array with element associated with this command\n */\n elements () {\n return [this.elem];\n }\n}\nInsertElementCommand.type = InsertElementCommand.prototype.type;\n\n/**\n* History command for an element removed from the DOM.\n* @implements {module:history.HistoryCommand}\n* @param {Element} elem - The removed DOM element\n* @param {Node} oldNextSibling - The DOM element's nextSibling when it was in the DOM\n* @param {Element} oldParent - The DOM element's parent\n* @param {string} [text] - An optional string visible to user related to this change\n*/\nexport class RemoveElementCommand extends Command {\n constructor (elem, oldNextSibling, oldParent, text) {\n super();\n this.elem = elem;\n this.text = text || ('Delete ' + elem.tagName);\n this.nextSibling = oldNextSibling;\n this.parent = oldParent;\n\n // special hack for webkit: remove this element's entry in the svgTransformLists map\n removeElementFromListMap(elem);\n }\n type () { // eslint-disable-line class-methods-use-this\n return 'svgedit.history.RemoveElementCommand';\n }\n\n /**\n * Re-removes the new element.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n apply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);\n }\n\n removeElementFromListMap(this.elem);\n this.parent = this.elem.parentNode;\n this.elem = this.parent.removeChild(this.elem);\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);\n }\n }\n\n /**\n * Re-adds the new element.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n unapply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);\n }\n\n removeElementFromListMap(this.elem);\n if (isNullish(this.nextSibling)) {\n if (window.console) {\n console.log('Error: reference element was lost'); // eslint-disable-line no-console\n }\n }\n this.parent.insertBefore(this.elem, this.nextSibling); // Don't use `before` or `prepend` as `this.nextSibling` may be `null`\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);\n }\n }\n\n /**\n * @returns {Element[]} Array with element associated with this command\n */\n elements () {\n return [this.elem];\n }\n}\nRemoveElementCommand.type = RemoveElementCommand.prototype.type;\n\n/**\n* @typedef {\"#text\"|\"#href\"|string} module:history.CommandAttributeName\n*/\n/**\n* @typedef {PlainObject} module:history.CommandAttributes\n*/\n\n/**\n* History command to make a change to an element.\n* Usually an attribute change, but can also be textcontent.\n* @implements {module:history.HistoryCommand}\n* @param {Element} elem - The DOM element that was changed\n* @param {module:history.CommandAttributes} attrs - Attributes to be changed with the values they had *before* the change\n* @param {string} text - An optional string visible to user related to this change\n*/\nexport class ChangeElementCommand extends Command {\n constructor (elem, attrs, text) {\n super();\n this.elem = elem;\n this.text = text ? ('Change ' + elem.tagName + ' ' + text) : ('Change ' + elem.tagName);\n this.newValues = {};\n this.oldValues = attrs;\n for (const attr in attrs) {\n if (attr === '#text') {\n this.newValues[attr] = elem.textContent;\n } else if (attr === '#href') {\n this.newValues[attr] = getHref(elem);\n } else {\n this.newValues[attr] = elem.getAttribute(attr);\n }\n }\n }\n type () { // eslint-disable-line class-methods-use-this\n return 'svgedit.history.ChangeElementCommand';\n }\n\n /**\n * Performs the stored change action.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {true}\n */\n apply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);\n }\n\n let bChangedTransform = false;\n Object.entries(this.newValues).forEach(([attr, value]) => {\n if (value) {\n if (attr === '#text') {\n this.elem.textContent = value;\n } else if (attr === '#href') {\n setHref(this.elem, value);\n } else {\n this.elem.setAttribute(attr, value);\n }\n } else if (attr === '#text') {\n this.elem.textContent = '';\n } else {\n this.elem.setAttribute(attr, '');\n this.elem.removeAttribute(attr);\n }\n\n if (attr === 'transform') { bChangedTransform = true; }\n });\n\n // relocate rotational transform, if necessary\n if (!bChangedTransform) {\n const angle = getRotationAngle(this.elem);\n if (angle) {\n const bbox = this.elem.getBBox();\n const cx = bbox.x + bbox.width / 2,\n cy = bbox.y + bbox.height / 2;\n const rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join('');\n if (rotate !== this.elem.getAttribute('transform')) {\n this.elem.setAttribute('transform', rotate);\n }\n }\n }\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);\n }\n\n return true;\n }\n\n /**\n * Reverses the stored change action.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {true}\n */\n unapply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);\n }\n\n let bChangedTransform = false;\n Object.entries(this.oldValues).forEach(([attr, value]) => {\n if (value) {\n if (attr === '#text') {\n this.elem.textContent = value;\n } else if (attr === '#href') {\n setHref(this.elem, value);\n } else {\n this.elem.setAttribute(attr, value);\n }\n } else if (attr === '#text') {\n this.elem.textContent = '';\n } else {\n this.elem.removeAttribute(attr);\n }\n if (attr === 'transform') { bChangedTransform = true; }\n });\n // relocate rotational transform, if necessary\n if (!bChangedTransform) {\n const angle = getRotationAngle(this.elem);\n if (angle) {\n const bbox = this.elem.getBBox();\n const cx = bbox.x + bbox.width / 2,\n cy = bbox.y + bbox.height / 2;\n const rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join('');\n if (rotate !== this.elem.getAttribute('transform')) {\n this.elem.setAttribute('transform', rotate);\n }\n }\n }\n\n // Remove transformlist to prevent confusion that causes bugs like 575.\n removeElementFromListMap(this.elem);\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);\n }\n\n return true;\n }\n\n /**\n * @returns {Element[]} Array with element associated with this command\n */\n elements () {\n return [this.elem];\n }\n}\nChangeElementCommand.type = ChangeElementCommand.prototype.type;\n\n// TODO: create a 'typing' command object that tracks changes in text\n// if a new Typing command is created and the top command on the stack is also a Typing\n// and they both affect the same element, then collapse the two commands into one\n\n/**\n* History command that can contain/execute multiple other commands.\n* @implements {module:history.HistoryCommand}\n*/\nexport class BatchCommand extends Command {\n /**\n * @param {string} [text] - An optional string visible to user related to this change\n */\n constructor (text) {\n super();\n this.text = text || 'Batch Command';\n this.stack = [];\n }\n\n type () { // eslint-disable-line class-methods-use-this\n return 'svgedit.history.BatchCommand';\n }\n\n /**\n * Runs \"apply\" on all subcommands.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n apply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);\n }\n\n const len = this.stack.length;\n for (let i = 0; i < len; ++i) {\n this.stack[i].apply(handler);\n }\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);\n }\n }\n\n /**\n * Runs \"unapply\" on all subcommands.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n unapply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);\n }\n\n for (let i = this.stack.length - 1; i >= 0; i--) {\n this.stack[i].unapply(handler);\n }\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);\n }\n }\n\n /**\n * Iterate through all our subcommands.\n * @returns {Element[]} All the elements we are changing\n */\n elements () {\n const elems = [];\n let cmd = this.stack.length;\n while (cmd--) {\n const thisElems = this.stack[cmd].elements();\n let elem = thisElems.length;\n while (elem--) {\n if (!elems.includes(thisElems[elem])) { elems.push(thisElems[elem]); }\n }\n }\n return elems;\n }\n\n /**\n * Adds a given command to the history stack.\n * @param {Command} cmd - The undo command object to add\n * @returns {void}\n */\n addSubCommand (cmd) {\n this.stack.push(cmd);\n }\n\n /**\n * @returns {boolean} Indicates whether or not the batch command is empty\n */\n isEmpty () {\n return !this.stack.length;\n }\n}\nBatchCommand.type = BatchCommand.prototype.type;\n\n/**\n*\n*/\nexport class UndoManager {\n /**\n * @param {module:history.HistoryEventHandler} historyEventHandler\n */\n constructor (historyEventHandler) {\n this.handler_ = historyEventHandler || null;\n this.undoStackPointer = 0;\n this.undoStack = [];\n\n // this is the stack that stores the original values, the elements and\n // the attribute name for begin/finish\n this.undoChangeStackPointer = -1;\n this.undoableChangeStack = [];\n }\n\n /**\n * Resets the undo stack, effectively clearing the undo/redo history.\n * @returns {void}\n */\n resetUndoStack () {\n this.undoStack = [];\n this.undoStackPointer = 0;\n }\n\n /**\n * @returns {Integer} Current size of the undo history stack\n */\n getUndoStackSize () {\n return this.undoStackPointer;\n }\n\n /**\n * @returns {Integer} Current size of the redo history stack\n */\n getRedoStackSize () {\n return this.undoStack.length - this.undoStackPointer;\n }\n\n /**\n * @returns {string} String associated with the next undo command\n */\n getNextUndoCommandText () {\n return this.undoStackPointer > 0 ? this.undoStack[this.undoStackPointer - 1].getText() : '';\n }\n\n /**\n * @returns {string} String associated with the next redo command\n */\n getNextRedoCommandText () {\n return this.undoStackPointer < this.undoStack.length ? this.undoStack[this.undoStackPointer].getText() : '';\n }\n\n /**\n * Performs an undo step.\n * @returns {void}\n */\n undo () {\n if (this.undoStackPointer > 0) {\n const cmd = this.undoStack[--this.undoStackPointer];\n cmd.unapply(this.handler_);\n }\n }\n\n /**\n * Performs a redo step.\n * @returns {void}\n */\n redo () {\n if (this.undoStackPointer < this.undoStack.length && this.undoStack.length > 0) {\n const cmd = this.undoStack[this.undoStackPointer++];\n cmd.apply(this.handler_);\n }\n }\n\n /**\n * Adds a command object to the undo history stack.\n * @param {Command} cmd - The command object to add\n * @returns {void}\n */\n addCommandToHistory (cmd) {\n // TODO: we MUST compress consecutive text changes to the same element\n // (right now each keystroke is saved as a separate command that includes the\n // entire text contents of the text element)\n // TODO: consider limiting the history that we store here (need to do some slicing)\n\n // if our stack pointer is not at the end, then we have to remove\n // all commands after the pointer and insert the new command\n if (this.undoStackPointer < this.undoStack.length && this.undoStack.length > 0) {\n this.undoStack = this.undoStack.splice(0, this.undoStackPointer);\n }\n this.undoStack.push(cmd);\n this.undoStackPointer = this.undoStack.length;\n }\n\n /**\n * This function tells the canvas to remember the old values of the\n * `attrName` attribute for each element sent in. The elements and values\n * are stored on a stack, so the next call to `finishUndoableChange()` will\n * pop the elements and old values off the stack, gets the current values\n * from the DOM and uses all of these to construct the undo-able command.\n * @param {string} attrName - The name of the attribute being changed\n * @param {Element[]} elems - Array of DOM elements being changed\n * @returns {void}\n */\n beginUndoableChange (attrName, elems) {\n const p = ++this.undoChangeStackPointer;\n let i = elems.length;\n const oldValues = new Array(i), elements = new Array(i);\n while (i--) {\n const elem = elems[i];\n if (isNullish(elem)) { continue; }\n elements[i] = elem;\n oldValues[i] = elem.getAttribute(attrName);\n }\n this.undoableChangeStack[p] = {\n attrName,\n oldValues,\n elements\n };\n }\n\n /**\n * This function returns a `BatchCommand` object which summarizes the\n * change since `beginUndoableChange` was called. The command can then\n * be added to the command history.\n * @returns {BatchCommand} Batch command object with resulting changes\n */\n finishUndoableChange () {\n const p = this.undoChangeStackPointer--;\n const changeset = this.undoableChangeStack[p];\n const {attrName} = changeset;\n const batchCmd = new BatchCommand('Change ' + attrName);\n let i = changeset.elements.length;\n while (i--) {\n const elem = changeset.elements[i];\n if (isNullish(elem)) { continue; }\n const changes = {};\n changes[attrName] = changeset.oldValues[i];\n if (changes[attrName] !== elem.getAttribute(attrName)) {\n batchCmd.addSubCommand(new ChangeElementCommand(elem, changes, attrName));\n }\n }\n this.undoableChangeStack[p] = null;\n return batchCmd;\n }\n}\n","/* globals jQuery */\n/**\n * Path functionality\n * @module path\n * @license MIT\n *\n * @copyright 2011 Alexis Deveria, 2011 Jeff Schiller\n */\n\nimport './svgpathseg.js';\nimport {NS} from './namespaces.js';\nimport {getTransformList} from './svgtransformlist.js';\nimport {shortFloat} from './units.js';\nimport {ChangeElementCommand, BatchCommand} from './history.js';\nimport {\n transformPoint, getMatrix, snapToAngle, rectsIntersect,\n transformListToTransform\n} from './math.js';\nimport {\n assignAttributes, getElem, getRotationAngle, getBBox,\n getRefElem, findDefs, snapToGrid, isNullish,\n getBBox as utilsGetBBox\n} from './utilities.js';\nimport {\n supportsPathInsertItemBefore, supportsPathReplaceItem, isWebkit\n} from './browser.js';\n\nconst $ = jQuery;\n\nconst segData = {\n 2: ['x', 'y'], // PATHSEG_MOVETO_ABS\n 4: ['x', 'y'], // PATHSEG_LINETO_ABS\n 6: ['x', 'y', 'x1', 'y1', 'x2', 'y2'], // PATHSEG_CURVETO_CUBIC_ABS\n 8: ['x', 'y', 'x1', 'y1'], // PATHSEG_CURVETO_QUADRATIC_ABS\n 10: ['x', 'y', 'r1', 'r2', 'angle', 'largeArcFlag', 'sweepFlag'], // PATHSEG_ARC_ABS\n 12: ['x'], // PATHSEG_LINETO_HORIZONTAL_ABS\n 14: ['y'], // PATHSEG_LINETO_VERTICAL_ABS\n 16: ['x', 'y', 'x2', 'y2'], // PATHSEG_CURVETO_CUBIC_SMOOTH_ABS\n 18: ['x', 'y'] // PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS\n};\n\n/**\n * @tutorial LocaleDocs\n * @typedef {module:locale.LocaleStrings|PlainObject} module:path.uiStrings\n * @property {PlainObject} ui\n*/\n\nconst uiStrings = {};\n/**\n* @function module:path.setUiStrings\n* @param {module:path.uiStrings} strs\n* @returns {void}\n*/\nexport const setUiStrings = function (strs) {\n Object.assign(uiStrings, strs.ui);\n};\n\nlet pathFuncs = [];\n\nlet linkControlPts = true;\n\n// Stores references to paths via IDs.\n// TODO: Make this cross-document happy.\nlet pathData = {};\n\n/**\n* @function module:path.setLinkControlPoints\n* @param {boolean} lcp\n* @returns {void}\n*/\nexport const setLinkControlPoints = function (lcp) {\n linkControlPts = lcp;\n};\n\n/**\n * @name module:path.path\n * @type {null|module:path.Path}\n * @memberof module:path\n*/\nexport let path = null; // eslint-disable-line import/no-mutable-exports\n\nlet editorContext_ = null;\n\n/**\n* @external MouseEvent\n*/\n\n/**\n* Object with the following keys/values\n* @typedef {PlainObject} module:path.SVGElementJSON\n* @property {string} element - Tag name of the SVG element to create\n* @property {PlainObject} attr - Has key-value attributes to assign to the new element. An `id` should be set so that {@link module:utilities.EditorContext#addSVGElementFromJson} can later re-identify the element for modification or replacement.\n* @property {boolean} [curStyles=false] - Indicates whether current style attributes should be applied first\n* @property {module:path.SVGElementJSON[]} [children] - Data objects to be added recursively as children\n* @property {string} [namespace=\"http://www.w3.org/2000/svg\"] - Indicate a (non-SVG) namespace\n*/\n/**\n * @interface module:path.EditorContext\n * @property {module:select.SelectorManager} selectorManager\n * @property {module:svgcanvas.SvgCanvas} canvas\n */\n/**\n * @function module:path.EditorContext#call\n * @param {\"selected\"|\"changed\"} ev - String with the event name\n * @param {module:svgcanvas.SvgCanvas#event:selected|module:svgcanvas.SvgCanvas#event:changed} arg - Argument to pass through to the callback function. If the event is \"changed\", an array of `Element`s is passed; if \"selected\", a single-item array of `Element` is passed.\n * @returns {void}\n */\n/**\n * @function module:path.EditorContext#resetD\n * @param {SVGPathElement} p\n * @returns {void}\n*/\n/**\n * Note: This doesn't round to an integer necessarily\n * @function module:path.EditorContext#round\n * @param {Float} val\n * @returns {Float} Rounded value to nearest value based on `currentZoom`\n */\n/**\n * @function module:path.EditorContext#clearSelection\n * @param {boolean} [noCall] - When `true`, does not call the \"selected\" handler\n * @returns {void}\n*/\n/**\n * @function module:path.EditorContext#addToSelection\n * @param {Element[]} elemsToAdd - An array of DOM elements to add to the selection\n * @param {boolean} showGrips - Indicates whether the resize grips should be shown\n * @returns {void}\n*/\n/**\n * @function module:path.EditorContext#addCommandToHistory\n * @param {Command} cmd\n * @returns {void}\n */\n/**\n * @function module:path.EditorContext#remapElement\n * @param {Element} selected - DOM element to be changed\n * @param {PlainObject} changes - Object with changes to be remapped\n * @param {SVGMatrix} m - Matrix object to use for remapping coordinates\n * @returns {void}\n */\n/**\n * @function module:path.EditorContext#addSVGElementFromJson\n * @param {module:path.SVGElementJSON} data\n * @returns {Element} The new element\n*/\n/**\n * @function module:path.EditorContext#getGridSnapping\n * @returns {boolean}\n */\n/**\n * @function module:path.EditorContext#getOpacity\n * @returns {Float}\n */\n/**\n * @function module:path.EditorContext#getSelectedElements\n * @returns {Element[]} the array with selected DOM elements\n*/\n/**\n * @function module:path.EditorContext#getContainer\n * @returns {Element}\n */\n/**\n * @function module:path.EditorContext#setStarted\n * @param {boolean} s\n * @returns {void}\n */\n/**\n * @function module:path.EditorContext#getRubberBox\n * @returns {SVGRectElement}\n*/\n/**\n * @function module:path.EditorContext#setRubberBox\n * @param {SVGRectElement} rb\n * @returns {SVGRectElement} Same as parameter passed in\n */\n/**\n * @function module:path.EditorContext#addPtsToSelection\n * @param {PlainObject} cfg\n * @param {boolean} cfg.closedSubpath\n * @param {SVGCircleElement[]} cfg.grips\n * @returns {void}\n */\n/**\n * @function module:path.EditorContext#endChanges\n * @param {PlainObject} cfg\n * @param {string} cfg.cmd\n * @param {Element} cfg.elem\n * @returns {void}\n*/\n/**\n * @function module:path.EditorContext#getCurrentZoom\n * @returns {Float} The current zoom level\n */\n/**\n * Returns the last created DOM element ID string\n * @function module:path.EditorContext#getId\n * @returns {string}\n */\n/**\n * Creates and returns a unique ID string for a DOM element\n * @function module:path.EditorContext#getNextId\n * @returns {string}\n*/\n/**\n * Gets the desired element from a mouse event\n * @function module:path.EditorContext#getMouseTarget\n * @param {external:MouseEvent} evt - Event object from the mouse event\n * @returns {Element} DOM element we want\n */\n/**\n * @function module:path.EditorContext#getCurrentMode\n * @returns {string}\n */\n/**\n * @function module:path.EditorContext#setCurrentMode\n * @param {string} cm The mode\n * @returns {string} The same mode as passed in\n*/\n/**\n * @function module:path.EditorContext#getDrawnPath\n * @returns {SVGPathElement|null}\n */\n/**\n * @function module:path.EditorContext#setDrawnPath\n * @param {SVGPathElement|null} dp\n * @returns {SVGPathElement|null} The same value as passed in\n */\n/**\n * @function module:path.EditorContext#getSVGRoot\n * @returns {SVGSVGElement}\n*/\n\n/**\n* @function module:path.init\n* @param {module:path.EditorContext} editorContext\n* @returns {void}\n*/\nexport const init = function (editorContext) {\n editorContext_ = editorContext;\n\n pathFuncs = [0, 'ClosePath'];\n const pathFuncsStrs = [\n 'Moveto', 'Lineto', 'CurvetoCubic', 'CurvetoQuadratic', 'Arc',\n 'LinetoHorizontal', 'LinetoVertical', 'CurvetoCubicSmooth', 'CurvetoQuadraticSmooth'\n ];\n $.each(pathFuncsStrs, function (i, s) {\n pathFuncs.push(s + 'Abs');\n pathFuncs.push(s + 'Rel');\n });\n};\n\n/**\n* @function module:path.insertItemBefore\n* @param {Element} elem\n* @param {Segment} newseg\n* @param {Integer} index\n* @returns {void}\n*/\nexport const insertItemBefore = function (elem, newseg, index) {\n // Support insertItemBefore on paths for FF2\n const list = elem.pathSegList;\n\n if (supportsPathInsertItemBefore()) {\n list.insertItemBefore(newseg, index);\n return;\n }\n const len = list.numberOfItems;\n const arr = [];\n for (let i = 0; i < len; i++) {\n const curSeg = list.getItem(i);\n arr.push(curSeg);\n }\n list.clear();\n for (let i = 0; i < len; i++) {\n if (i === index) { // index + 1\n list.appendItem(newseg);\n }\n list.appendItem(arr[i]);\n }\n};\n\n/**\n* @function module:path.ptObjToArr\n* @todo See if this should just live in `replacePathSeg`\n* @param {string} type\n* @param {SVGPathSegMovetoAbs|SVGPathSegLinetoAbs|SVGPathSegCurvetoCubicAbs|SVGPathSegCurvetoQuadraticAbs|SVGPathSegArcAbs|SVGPathSegLinetoHorizontalAbs|SVGPathSegLinetoVerticalAbs|SVGPathSegCurvetoCubicSmoothAbs|SVGPathSegCurvetoQuadraticSmoothAbs} segItem\n* @returns {ArgumentsArray}\n*/\nexport const ptObjToArr = function (type, segItem) {\n const props = segData[type];\n return props.map((prop) => {\n return segItem[prop];\n });\n};\n\n/**\n* @function module:path.getGripPt\n* @param {Segment} seg\n* @param {module:math.XYObject} altPt\n* @returns {module:math.XYObject}\n*/\nexport const getGripPt = function (seg, altPt) {\n const {path: pth} = seg;\n let out = {\n x: altPt ? altPt.x : seg.item.x,\n y: altPt ? altPt.y : seg.item.y\n };\n\n if (pth.matrix) {\n const pt = transformPoint(out.x, out.y, pth.matrix);\n out = pt;\n }\n\n const currentZoom = editorContext_.getCurrentZoom();\n out.x *= currentZoom;\n out.y *= currentZoom;\n\n return out;\n};\n\n/**\n* @function module:path.getPointFromGrip\n* @param {module:math.XYObject} pt\n* @param {module:path.Path} pth\n* @returns {module:math.XYObject}\n*/\nexport const getPointFromGrip = function (pt, pth) {\n const out = {\n x: pt.x,\n y: pt.y\n };\n\n if (pth.matrix) {\n pt = transformPoint(out.x, out.y, pth.imatrix);\n out.x = pt.x;\n out.y = pt.y;\n }\n\n const currentZoom = editorContext_.getCurrentZoom();\n out.x /= currentZoom;\n out.y /= currentZoom;\n\n return out;\n};\n\n/**\n* Requires prior call to `setUiStrings` if `xlink:title`\n* to be set on the grip.\n* @function module:path.addPointGrip\n* @param {Integer} index\n* @param {Integer} x\n* @param {Integer} y\n* @returns {SVGCircleElement}\n*/\nexport const addPointGrip = function (index, x, y) {\n // create the container of all the point grips\n const pointGripContainer = getGripContainer();\n\n let pointGrip = getElem('pathpointgrip_' + index);\n // create it\n if (!pointGrip) {\n pointGrip = document.createElementNS(NS.SVG, 'circle');\n const atts = {\n id: 'pathpointgrip_' + index,\n display: 'none',\n r: 4,\n fill: '#0FF',\n stroke: '#00F',\n 'stroke-width': 2,\n cursor: 'move',\n style: 'pointer-events:all'\n };\n if ('pathNodeTooltip' in uiStrings) { // May be empty if running path.js without svg-editor\n atts['xlink:title'] = uiStrings.pathNodeTooltip;\n }\n assignAttributes(pointGrip, atts);\n pointGrip = pointGripContainer.appendChild(pointGrip);\n\n const grip = $('#pathpointgrip_' + index);\n grip.dblclick(function () {\n if (path) {\n path.setSegType();\n }\n });\n }\n if (x && y) {\n // set up the point grip element and display it\n assignAttributes(pointGrip, {\n cx: x,\n cy: y,\n display: 'inline'\n });\n }\n return pointGrip;\n};\n\n/**\n* @function module:path.getGripContainer\n* @returns {Element}\n*/\nexport const getGripContainer = function () {\n let c = getElem('pathpointgrip_container');\n if (!c) {\n const parentElement = getElem('selectorParentGroup');\n c = parentElement.appendChild(document.createElementNS(NS.SVG, 'g'));\n c.id = 'pathpointgrip_container';\n }\n return c;\n};\n\n/**\n* Requires prior call to `setUiStrings` if `xlink:title`\n* to be set on the grip.\n* @function module:path.addCtrlGrip\n* @param {string} id\n* @returns {SVGCircleElement}\n*/\nexport const addCtrlGrip = function (id) {\n let pointGrip = getElem('ctrlpointgrip_' + id);\n if (pointGrip) { return pointGrip; }\n\n pointGrip = document.createElementNS(NS.SVG, 'circle');\n const atts = {\n id: 'ctrlpointgrip_' + id,\n display: 'none',\n r: 4,\n fill: '#0FF',\n stroke: '#55F',\n 'stroke-width': 1,\n cursor: 'move',\n style: 'pointer-events:all'\n };\n if ('pathCtrlPtTooltip' in uiStrings) { // May be empty if running path.js without svg-editor\n atts['xlink:title'] = uiStrings.pathCtrlPtTooltip;\n }\n assignAttributes(pointGrip, atts);\n getGripContainer().append(pointGrip);\n return pointGrip;\n};\n\n/**\n* @function module:path.getCtrlLine\n* @param {string} id\n* @returns {SVGLineElement}\n*/\nexport const getCtrlLine = function (id) {\n let ctrlLine = getElem('ctrlLine_' + id);\n if (ctrlLine) { return ctrlLine; }\n\n ctrlLine = document.createElementNS(NS.SVG, 'line');\n assignAttributes(ctrlLine, {\n id: 'ctrlLine_' + id,\n stroke: '#555',\n 'stroke-width': 1,\n style: 'pointer-events:none'\n });\n getGripContainer().append(ctrlLine);\n return ctrlLine;\n};\n\n/**\n* @function module:path.getPointGrip\n* @param {Segment} seg\n* @param {boolean} update\n* @returns {SVGCircleElement}\n*/\nexport const getPointGrip = function (seg, update) {\n const {index} = seg;\n const pointGrip = addPointGrip(index);\n\n if (update) {\n const pt = getGripPt(seg);\n assignAttributes(pointGrip, {\n cx: pt.x,\n cy: pt.y,\n display: 'inline'\n });\n }\n\n return pointGrip;\n};\n\n/**\n* @function module:path.getControlPoints\n* @param {Segment} seg\n* @returns {PlainObject}\n*/\nexport const getControlPoints = function (seg) {\n const {item, index} = seg;\n if (!('x1' in item) || !('x2' in item)) { return null; }\n const cpt = {};\n /* const pointGripContainer = */ getGripContainer();\n\n // Note that this is intentionally not seg.prev.item\n const prev = path.segs[index - 1].item;\n\n const segItems = [prev, item];\n\n for (let i = 1; i < 3; i++) {\n const id = index + 'c' + i;\n\n const ctrlLine = cpt['c' + i + '_line'] = getCtrlLine(id);\n\n const pt = getGripPt(seg, {x: item['x' + i], y: item['y' + i]});\n const gpt = getGripPt(seg, {x: segItems[i - 1].x, y: segItems[i - 1].y});\n\n assignAttributes(ctrlLine, {\n x1: pt.x,\n y1: pt.y,\n x2: gpt.x,\n y2: gpt.y,\n display: 'inline'\n });\n\n cpt['c' + i + '_line'] = ctrlLine;\n\n // create it\n const pointGrip = cpt['c' + i] = addCtrlGrip(id);\n\n assignAttributes(pointGrip, {\n cx: pt.x,\n cy: pt.y,\n display: 'inline'\n });\n cpt['c' + i] = pointGrip;\n }\n return cpt;\n};\n\n/**\n* This replaces the segment at the given index. Type is given as number.\n* @function module:path.replacePathSeg\n* @param {Integer} type Possible values set during {@link module:path.init}\n* @param {Integer} index\n* @param {ArgumentsArray} pts\n* @param {SVGPathElement} elem\n* @returns {void}\n*/\nexport const replacePathSeg = function (type, index, pts, elem) {\n const pth = elem || path.elem;\n\n const func = 'createSVGPathSeg' + pathFuncs[type];\n const seg = pth[func](...pts);\n\n if (supportsPathReplaceItem()) {\n pth.pathSegList.replaceItem(seg, index);\n } else {\n const segList = pth.pathSegList;\n const len = segList.numberOfItems;\n const arr = [];\n for (let i = 0; i < len; i++) {\n const curSeg = segList.getItem(i);\n arr.push(curSeg);\n }\n segList.clear();\n for (let i = 0; i < len; i++) {\n if (i === index) {\n segList.appendItem(seg);\n } else {\n segList.appendItem(arr[i]);\n }\n }\n }\n};\n\n/**\n* @function module:path.getSegSelector\n* @param {Segment} seg\n* @param {boolean} update\n* @returns {SVGPathElement}\n*/\nexport const getSegSelector = function (seg, update) {\n const {index} = seg;\n let segLine = getElem('segline_' + index);\n if (!segLine) {\n const pointGripContainer = getGripContainer();\n // create segline\n segLine = document.createElementNS(NS.SVG, 'path');\n assignAttributes(segLine, {\n id: 'segline_' + index,\n display: 'none',\n fill: 'none',\n stroke: '#0FF',\n 'stroke-width': 2,\n style: 'pointer-events:none',\n d: 'M0,0 0,0'\n });\n pointGripContainer.append(segLine);\n }\n\n if (update) {\n const {prev} = seg;\n if (!prev) {\n segLine.setAttribute('display', 'none');\n return segLine;\n }\n\n const pt = getGripPt(prev);\n // Set start point\n replacePathSeg(2, 0, [pt.x, pt.y], segLine);\n\n const pts = ptObjToArr(seg.type, seg.item); // , true);\n for (let i = 0; i < pts.length; i += 2) {\n const point = getGripPt(seg, {x: pts[i], y: pts[i + 1]});\n pts[i] = point.x;\n pts[i + 1] = point.y;\n }\n\n replacePathSeg(seg.type, 1, pts, segLine);\n }\n return segLine;\n};\n\n/**\n * @typedef {PlainObject} Point\n * @property {Integer} x The x value\n * @property {Integer} y The y value\n */\n\n/**\n* Takes three points and creates a smoother line based on them.\n* @function module:path.smoothControlPoints\n* @param {Point} ct1 - Object with x and y values (first control point)\n* @param {Point} ct2 - Object with x and y values (second control point)\n* @param {Point} pt - Object with x and y values (third point)\n* @returns {Point[]} Array of two \"smoothed\" point objects\n*/\nexport const smoothControlPoints = function (ct1, ct2, pt) {\n // each point must not be the origin\n const x1 = ct1.x - pt.x,\n y1 = ct1.y - pt.y,\n x2 = ct2.x - pt.x,\n y2 = ct2.y - pt.y;\n\n if ((x1 !== 0 || y1 !== 0) && (x2 !== 0 || y2 !== 0)) {\n const\n r1 = Math.sqrt(x1 * x1 + y1 * y1),\n r2 = Math.sqrt(x2 * x2 + y2 * y2),\n nct1 = editorContext_.getSVGRoot().createSVGPoint(),\n nct2 = editorContext_.getSVGRoot().createSVGPoint();\n let anglea = Math.atan2(y1, x1),\n angleb = Math.atan2(y2, x2);\n if (anglea < 0) { anglea += 2 * Math.PI; }\n if (angleb < 0) { angleb += 2 * Math.PI; }\n\n const angleBetween = Math.abs(anglea - angleb),\n angleDiff = Math.abs(Math.PI - angleBetween) / 2;\n\n let newAnglea, newAngleb;\n if (anglea - angleb > 0) {\n newAnglea = angleBetween < Math.PI ? (anglea + angleDiff) : (anglea - angleDiff);\n newAngleb = angleBetween < Math.PI ? (angleb - angleDiff) : (angleb + angleDiff);\n } else {\n newAnglea = angleBetween < Math.PI ? (anglea - angleDiff) : (anglea + angleDiff);\n newAngleb = angleBetween < Math.PI ? (angleb + angleDiff) : (angleb - angleDiff);\n }\n\n // rotate the points\n nct1.x = r1 * Math.cos(newAnglea) + pt.x;\n nct1.y = r1 * Math.sin(newAnglea) + pt.y;\n nct2.x = r2 * Math.cos(newAngleb) + pt.x;\n nct2.y = r2 * Math.sin(newAngleb) + pt.y;\n\n return [nct1, nct2];\n }\n return undefined;\n};\n\n/**\n*\n*/\nexport class Segment {\n /**\n * @param {Integer} index\n * @param {SVGPathSeg} item\n * @todo Is `item` be more constrained here?\n */\n constructor (index, item) {\n this.selected = false;\n this.index = index;\n this.item = item;\n this.type = item.pathSegType;\n\n this.ctrlpts = [];\n this.ptgrip = null;\n this.segsel = null;\n }\n\n /**\n * @param {boolean} y\n * @returns {void}\n */\n showCtrlPts (y) {\n for (const i in this.ctrlpts) {\n if ({}.hasOwnProperty.call(this.ctrlpts, i)) {\n this.ctrlpts[i].setAttribute('display', y ? 'inline' : 'none');\n }\n }\n }\n\n /**\n * @param {boolean} y\n * @returns {void}\n */\n selectCtrls (y) {\n $('#ctrlpointgrip_' + this.index + 'c1, #ctrlpointgrip_' + this.index + 'c2')\n .attr('fill', y ? '#0FF' : '#EEE');\n }\n\n /**\n * @param {boolean} y\n * @returns {void}\n */\n show (y) {\n if (this.ptgrip) {\n this.ptgrip.setAttribute('display', y ? 'inline' : 'none');\n this.segsel.setAttribute('display', y ? 'inline' : 'none');\n // Show/hide all control points if available\n this.showCtrlPts(y);\n }\n }\n\n /**\n * @param {boolean} y\n * @returns {void}\n */\n select (y) {\n if (this.ptgrip) {\n this.ptgrip.setAttribute('stroke', y ? '#0FF' : '#00F');\n this.segsel.setAttribute('display', y ? 'inline' : 'none');\n if (this.ctrlpts) {\n this.selectCtrls(y);\n }\n this.selected = y;\n }\n }\n\n /**\n * @returns {void}\n */\n addGrip () {\n this.ptgrip = getPointGrip(this, true);\n this.ctrlpts = getControlPoints(this); // , true);\n this.segsel = getSegSelector(this, true);\n }\n\n /**\n * @param {boolean} full\n * @returns {void}\n */\n update (full) {\n if (this.ptgrip) {\n const pt = getGripPt(this);\n assignAttributes(this.ptgrip, {\n cx: pt.x,\n cy: pt.y\n });\n\n getSegSelector(this, true);\n\n if (this.ctrlpts) {\n if (full) {\n this.item = path.elem.pathSegList.getItem(this.index);\n this.type = this.item.pathSegType;\n }\n getControlPoints(this);\n }\n // this.segsel.setAttribute('display', y ? 'inline' : 'none');\n }\n }\n\n /**\n * @param {Integer} dx\n * @param {Integer} dy\n * @returns {void}\n */\n move (dx, dy) {\n const {item} = this;\n\n const curPts = this.ctrlpts\n ? [\n item.x += dx, item.y += dy,\n item.x1, item.y1, item.x2 += dx, item.y2 += dy\n ]\n : [item.x += dx, item.y += dy];\n\n replacePathSeg(\n this.type,\n this.index,\n // type 10 means ARC\n this.type === 10 ? ptObjToArr(this.type, item) : curPts\n );\n\n if (this.next && this.next.ctrlpts) {\n const next = this.next.item;\n const nextPts = [\n next.x, next.y,\n next.x1 += dx, next.y1 += dy, next.x2, next.y2\n ];\n replacePathSeg(this.next.type, this.next.index, nextPts);\n }\n\n if (this.mate) {\n // The last point of a closed subpath has a 'mate',\n // which is the 'M' segment of the subpath\n const {item: itm} = this.mate;\n const pts = [itm.x += dx, itm.y += dy];\n replacePathSeg(this.mate.type, this.mate.index, pts);\n // Has no grip, so does not need 'updating'?\n }\n\n this.update(true);\n if (this.next) { this.next.update(true); }\n }\n\n /**\n * @param {Integer} num\n * @returns {void}\n */\n setLinked (num) {\n let seg, anum, pt;\n if (num === 2) {\n anum = 1;\n seg = this.next;\n if (!seg) { return; }\n pt = this.item;\n } else {\n anum = 2;\n seg = this.prev;\n if (!seg) { return; }\n pt = seg.item;\n }\n\n const {item} = seg;\n item['x' + anum] = pt.x + (pt.x - this.item['x' + num]);\n item['y' + anum] = pt.y + (pt.y - this.item['y' + num]);\n\n const pts = [\n item.x, item.y,\n item.x1, item.y1,\n item.x2, item.y2\n ];\n\n replacePathSeg(seg.type, seg.index, pts);\n seg.update(true);\n }\n\n /**\n * @param {Integer} num\n * @param {Integer} dx\n * @param {Integer} dy\n * @returns {void}\n */\n moveCtrl (num, dx, dy) {\n const {item} = this;\n item['x' + num] += dx;\n item['y' + num] += dy;\n\n const pts = [\n item.x, item.y,\n item.x1, item.y1, item.x2, item.y2\n ];\n\n replacePathSeg(this.type, this.index, pts);\n this.update(true);\n }\n\n /**\n * @param {Integer} newType Possible values set during {@link module:path.init}\n * @param {ArgumentsArray} pts\n * @returns {void}\n */\n setType (newType, pts) {\n replacePathSeg(newType, this.index, pts);\n this.type = newType;\n this.item = path.elem.pathSegList.getItem(this.index);\n this.showCtrlPts(newType === 6);\n this.ctrlpts = getControlPoints(this);\n this.update(true);\n }\n}\n\n/**\n*\n*/\nexport class Path {\n /**\n * @param {SVGPathElement} elem\n * @throws {Error} If constructed without a path element\n */\n constructor (elem) {\n if (!elem || elem.tagName !== 'path') {\n throw new Error('svgedit.path.Path constructed without a element');\n }\n\n this.elem = elem;\n this.segs = [];\n this.selected_pts = [];\n path = this; // eslint-disable-line consistent-this\n\n this.init();\n }\n\n /**\n * Reset path data.\n * @returns {module:path.Path}\n */\n init () {\n // Hide all grips, etc\n\n // fixed, needed to work on all found elements, not just first\n $(getGripContainer()).find('*').each(function () {\n $(this).attr('display', 'none');\n });\n\n const segList = this.elem.pathSegList;\n const len = segList.numberOfItems;\n this.segs = [];\n this.selected_pts = [];\n this.first_seg = null;\n\n // Set up segs array\n for (let i = 0; i < len; i++) {\n const item = segList.getItem(i);\n const segment = new Segment(i, item);\n segment.path = this;\n this.segs.push(segment);\n }\n\n const {segs} = this;\n\n let startI = null;\n for (let i = 0; i < len; i++) {\n const seg = segs[i];\n const nextSeg = (i + 1) >= len ? null : segs[i + 1];\n const prevSeg = (i - 1) < 0 ? null : segs[i - 1];\n if (seg.type === 2) {\n if (prevSeg && prevSeg.type !== 1) {\n // New sub-path, last one is open,\n // so add a grip to last sub-path's first point\n const startSeg = segs[startI];\n startSeg.next = segs[startI + 1];\n startSeg.next.prev = startSeg;\n startSeg.addGrip();\n }\n // Remember that this is a starter seg\n startI = i;\n } else if (nextSeg && nextSeg.type === 1) {\n // This is the last real segment of a closed sub-path\n // Next is first seg after \"M\"\n seg.next = segs[startI + 1];\n\n // First seg after \"M\"'s prev is this\n seg.next.prev = seg;\n seg.mate = segs[startI];\n seg.addGrip();\n if (isNullish(this.first_seg)) {\n this.first_seg = seg;\n }\n } else if (!nextSeg) {\n if (seg.type !== 1) {\n // Last seg, doesn't close so add a grip\n // to last sub-path's first point\n const startSeg = segs[startI];\n startSeg.next = segs[startI + 1];\n startSeg.next.prev = startSeg;\n startSeg.addGrip();\n seg.addGrip();\n\n if (!this.first_seg) {\n // Open path, so set first as real first and add grip\n this.first_seg = segs[startI];\n }\n }\n } else if (seg.type !== 1) {\n // Regular segment, so add grip and its \"next\"\n seg.addGrip();\n\n // Don't set its \"next\" if it's an \"M\"\n if (nextSeg && nextSeg.type !== 2) {\n seg.next = nextSeg;\n seg.next.prev = seg;\n }\n }\n }\n return this;\n }\n\n /**\n * @callback module:path.PathEachSegCallback\n * @this module:path.Segment\n * @param {Integer} i The index of the seg being iterated\n * @returns {boolean|void} Will stop execution of `eachSeg` if returns `false`\n */\n /**\n * @param {module:path.PathEachSegCallback} fn\n * @returns {void}\n */\n eachSeg (fn) {\n const len = this.segs.length;\n for (let i = 0; i < len; i++) {\n const ret = fn.call(this.segs[i], i);\n if (ret === false) { break; }\n }\n }\n\n /**\n * @param {Integer} index\n * @returns {void}\n */\n addSeg (index) {\n // Adds a new segment\n const seg = this.segs[index];\n if (!seg.prev) { return; }\n\n const {prev} = seg;\n let newseg, newX, newY;\n switch (seg.item.pathSegType) {\n case 4: {\n newX = (seg.item.x + prev.item.x) / 2;\n newY = (seg.item.y + prev.item.y) / 2;\n newseg = this.elem.createSVGPathSegLinetoAbs(newX, newY);\n break;\n } case 6: { // make it a curved segment to preserve the shape (WRS)\n // https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm#Geometric_interpretation\n const p0x = (prev.item.x + seg.item.x1) / 2;\n const p1x = (seg.item.x1 + seg.item.x2) / 2;\n const p2x = (seg.item.x2 + seg.item.x) / 2;\n const p01x = (p0x + p1x) / 2;\n const p12x = (p1x + p2x) / 2;\n newX = (p01x + p12x) / 2;\n const p0y = (prev.item.y + seg.item.y1) / 2;\n const p1y = (seg.item.y1 + seg.item.y2) / 2;\n const p2y = (seg.item.y2 + seg.item.y) / 2;\n const p01y = (p0y + p1y) / 2;\n const p12y = (p1y + p2y) / 2;\n newY = (p01y + p12y) / 2;\n newseg = this.elem.createSVGPathSegCurvetoCubicAbs(newX, newY, p0x, p0y, p01x, p01y);\n const pts = [seg.item.x, seg.item.y, p12x, p12y, p2x, p2y];\n replacePathSeg(seg.type, index, pts);\n break;\n }\n }\n\n insertItemBefore(this.elem, newseg, index);\n }\n\n /**\n * @param {Integer} index\n * @returns {void}\n */\n deleteSeg (index) {\n const seg = this.segs[index];\n const list = this.elem.pathSegList;\n\n seg.show(false);\n const {next} = seg;\n if (seg.mate) {\n // Make the next point be the \"M\" point\n const pt = [next.item.x, next.item.y];\n replacePathSeg(2, next.index, pt);\n\n // Reposition last node\n replacePathSeg(4, seg.index, pt);\n\n list.removeItem(seg.mate.index);\n } else if (!seg.prev) {\n // First node of open path, make next point the M\n // const {item} = seg;\n const pt = [next.item.x, next.item.y];\n replacePathSeg(2, seg.next.index, pt);\n list.removeItem(index);\n } else {\n list.removeItem(index);\n }\n }\n\n /**\n * @param {Integer} index\n * @returns {void}\n */\n removePtFromSelection (index) {\n const pos = this.selected_pts.indexOf(index);\n if (pos === -1) {\n return;\n }\n this.segs[index].select(false);\n this.selected_pts.splice(pos, 1);\n }\n\n /**\n * @returns {void}\n */\n clearSelection () {\n this.eachSeg(function () {\n // 'this' is the segment here\n this.select(false);\n });\n this.selected_pts = [];\n }\n\n /**\n * @returns {void}\n */\n storeD () {\n this.last_d = this.elem.getAttribute('d');\n }\n\n /**\n * @param {Integer} y\n * @returns {Path}\n */\n show (y) {\n // Shows this path's segment grips\n this.eachSeg(function () {\n // 'this' is the segment here\n this.show(y);\n });\n if (y) {\n this.selectPt(this.first_seg.index);\n }\n return this;\n }\n\n /**\n * Move selected points.\n * @param {Integer} dx\n * @param {Integer} dy\n * @returns {void}\n */\n movePts (dx, dy) {\n let i = this.selected_pts.length;\n while (i--) {\n const seg = this.segs[this.selected_pts[i]];\n seg.move(dx, dy);\n }\n }\n\n /**\n * @param {Integer} dx\n * @param {Integer} dy\n * @returns {void}\n */\n moveCtrl (dx, dy) {\n const seg = this.segs[this.selected_pts[0]];\n seg.moveCtrl(this.dragctrl, dx, dy);\n if (linkControlPts) {\n seg.setLinked(this.dragctrl);\n }\n }\n\n /**\n * @param {?Integer} newType See {@link https://www.w3.org/TR/SVG/single-page.html#paths-InterfaceSVGPathSeg}\n * @returns {void}\n */\n setSegType (newType) {\n this.storeD();\n let i = this.selected_pts.length;\n let text;\n while (i--) {\n const selPt = this.selected_pts[i];\n\n // Selected seg\n const cur = this.segs[selPt];\n const {prev} = cur;\n if (!prev) { continue; }\n\n if (!newType) { // double-click, so just toggle\n text = 'Toggle Path Segment Type';\n\n // Toggle segment to curve/straight line\n const oldType = cur.type;\n\n newType = (oldType === 6) ? 4 : 6;\n }\n\n newType = Number(newType);\n\n const curX = cur.item.x;\n const curY = cur.item.y;\n const prevX = prev.item.x;\n const prevY = prev.item.y;\n let points;\n switch (newType) {\n case 6: {\n if (cur.olditem) {\n const old = cur.olditem;\n points = [curX, curY, old.x1, old.y1, old.x2, old.y2];\n } else {\n const diffX = curX - prevX;\n const diffY = curY - prevY;\n // get control points from straight line segment\n /*\n const ct1x = (prevX + (diffY/2));\n const ct1y = (prevY - (diffX/2));\n const ct2x = (curX + (diffY/2));\n const ct2y = (curY - (diffX/2));\n */\n // create control points on the line to preserve the shape (WRS)\n const ct1x = (prevX + (diffX / 3));\n const ct1y = (prevY + (diffY / 3));\n const ct2x = (curX - (diffX / 3));\n const ct2y = (curY - (diffY / 3));\n points = [curX, curY, ct1x, ct1y, ct2x, ct2y];\n }\n break;\n } case 4: {\n points = [curX, curY];\n\n // Store original prevve segment nums\n cur.olditem = cur.item;\n break;\n }\n }\n\n cur.setType(newType, points);\n }\n path.endChanges(text);\n }\n\n /**\n * @param {Integer} pt\n * @param {Integer} ctrlNum\n * @returns {void}\n */\n selectPt (pt, ctrlNum) {\n this.clearSelection();\n if (isNullish(pt)) {\n this.eachSeg(function (i) {\n // 'this' is the segment here.\n if (this.prev) {\n pt = i;\n }\n });\n }\n this.addPtsToSelection(pt);\n if (ctrlNum) {\n this.dragctrl = ctrlNum;\n\n if (linkControlPts) {\n this.segs[pt].setLinked(ctrlNum);\n }\n }\n }\n\n /**\n * Update position of all points.\n * @returns {Path}\n */\n update () {\n const {elem} = this;\n if (getRotationAngle(elem)) {\n this.matrix = getMatrix(elem);\n this.imatrix = this.matrix.inverse();\n } else {\n this.matrix = null;\n this.imatrix = null;\n }\n\n this.eachSeg(function (i) {\n this.item = elem.pathSegList.getItem(i);\n this.update();\n });\n\n return this;\n }\n\n /**\n * @param {string} text\n * @returns {void}\n */\n endChanges (text) {\n if (isWebkit()) { editorContext_.resetD(this.elem); }\n const cmd = new ChangeElementCommand(this.elem, {d: this.last_d}, text);\n editorContext_.endChanges({cmd, elem: this.elem});\n }\n\n /**\n * @param {Integer|Integer[]} indexes\n * @returns {void}\n */\n addPtsToSelection (indexes) {\n if (!Array.isArray(indexes)) { indexes = [indexes]; }\n indexes.forEach((index) => {\n const seg = this.segs[index];\n if (seg.ptgrip) {\n if (!this.selected_pts.includes(index) && index >= 0) {\n this.selected_pts.push(index);\n }\n }\n });\n this.selected_pts.sort();\n let i = this.selected_pts.length;\n const grips = [];\n grips.length = i;\n // Loop through points to be selected and highlight each\n while (i--) {\n const pt = this.selected_pts[i];\n const seg = this.segs[pt];\n seg.select(true);\n grips[i] = seg.ptgrip;\n }\n\n const closedSubpath = Path.subpathIsClosed(this.selected_pts[0]);\n editorContext_.addPtsToSelection({grips, closedSubpath});\n }\n\n // STATIC\n /**\n * @param {Integer} index\n * @returns {boolean}\n */\n static subpathIsClosed (index) {\n let clsd = false;\n // Check if subpath is already open\n path.eachSeg(function (i) {\n if (i <= index) { return true; }\n if (this.type === 2) {\n // Found M first, so open\n return false;\n }\n if (this.type === 1) {\n // Found Z first, so closed\n clsd = true;\n return false;\n }\n return true;\n });\n\n return clsd;\n }\n}\n\n/**\n* @function module:path.getPath_\n* @param {SVGPathElement} elem\n* @returns {module:path.Path}\n*/\nexport const getPath_ = function (elem) {\n let p = pathData[elem.id];\n if (!p) {\n p = pathData[elem.id] = new Path(elem);\n }\n return p;\n};\n\n/**\n* @function module:path.removePath_\n* @param {string} id\n* @returns {void}\n*/\nexport const removePath_ = function (id) {\n if (id in pathData) { delete pathData[id]; }\n};\n\nlet newcx, newcy, oldcx, oldcy, angle;\n\nconst getRotVals = function (x, y) {\n let dx = x - oldcx;\n let dy = y - oldcy;\n\n // rotate the point around the old center\n let r = Math.sqrt(dx * dx + dy * dy);\n let theta = Math.atan2(dy, dx) + angle;\n dx = r * Math.cos(theta) + oldcx;\n dy = r * Math.sin(theta) + oldcy;\n\n // dx,dy should now hold the actual coordinates of each\n // point after being rotated\n\n // now we want to rotate them around the new center in the reverse direction\n dx -= newcx;\n dy -= newcy;\n\n r = Math.sqrt(dx * dx + dy * dy);\n theta = Math.atan2(dy, dx) - angle;\n\n return {x: r * Math.cos(theta) + newcx,\n y: r * Math.sin(theta) + newcy};\n};\n\n// If the path was rotated, we must now pay the piper:\n// Every path point must be rotated into the rotated coordinate system of\n// its old center, then determine the new center, then rotate it back\n// This is because we want the path to remember its rotation\n\n/**\n* @function module:path.recalcRotatedPath\n* @todo This is still using ye olde transform methods, can probably\n* be optimized or even taken care of by `recalculateDimensions`\n* @returns {void}\n*/\nexport const recalcRotatedPath = function () {\n const currentPath = path.elem;\n angle = getRotationAngle(currentPath, true);\n if (!angle) { return; }\n // selectedBBoxes[0] = path.oldbbox;\n const oldbox = path.oldbbox; // selectedBBoxes[0],\n oldcx = oldbox.x + oldbox.width / 2;\n oldcy = oldbox.y + oldbox.height / 2;\n const box = getBBox(currentPath);\n newcx = box.x + box.width / 2;\n newcy = box.y + box.height / 2;\n\n // un-rotate the new center to the proper position\n const dx = newcx - oldcx,\n dy = newcy - oldcy,\n r = Math.sqrt(dx * dx + dy * dy),\n theta = Math.atan2(dy, dx) + angle;\n\n newcx = r * Math.cos(theta) + oldcx;\n newcy = r * Math.sin(theta) + oldcy;\n\n const list = currentPath.pathSegList;\n\n let i = list.numberOfItems;\n while (i) {\n i -= 1;\n const seg = list.getItem(i),\n type = seg.pathSegType;\n if (type === 1) { continue; }\n\n const rvals = getRotVals(seg.x, seg.y),\n points = [rvals.x, rvals.y];\n if (!isNullish(seg.x1) && !isNullish(seg.x2)) {\n const cVals1 = getRotVals(seg.x1, seg.y1);\n const cVals2 = getRotVals(seg.x2, seg.y2);\n points.splice(points.length, 0, cVals1.x, cVals1.y, cVals2.x, cVals2.y);\n }\n replacePathSeg(type, i, points);\n } // loop for each point\n\n /* box = */ getBBox(currentPath);\n // selectedBBoxes[0].x = box.x; selectedBBoxes[0].y = box.y;\n // selectedBBoxes[0].width = box.width; selectedBBoxes[0].height = box.height;\n\n // now we must set the new transform to be rotated around the new center\n const Rnc = editorContext_.getSVGRoot().createSVGTransform(),\n tlist = getTransformList(currentPath);\n Rnc.setRotate((angle * 180.0 / Math.PI), newcx, newcy);\n tlist.replaceItem(Rnc, 0);\n};\n\n// ====================================\n// Public API starts here\n\n/**\n* @function module:path.clearData\n* @returns {void}\n*/\nexport const clearData = function () {\n pathData = {};\n};\n\n// Making public for mocking\n/**\n* @function module:path.reorientGrads\n* @param {Element} elem\n* @param {SVGMatrix} m\n* @returns {void}\n*/\nexport const reorientGrads = function (elem, m) {\n const bb = utilsGetBBox(elem);\n for (let i = 0; i < 2; i++) {\n const type = i === 0 ? 'fill' : 'stroke';\n const attrVal = elem.getAttribute(type);\n if (attrVal && attrVal.startsWith('url(')) {\n const grad = getRefElem(attrVal);\n if (grad.tagName === 'linearGradient') {\n let x1 = grad.getAttribute('x1') || 0;\n let y1 = grad.getAttribute('y1') || 0;\n let x2 = grad.getAttribute('x2') || 1;\n let y2 = grad.getAttribute('y2') || 0;\n\n // Convert to USOU points\n x1 = (bb.width * x1) + bb.x;\n y1 = (bb.height * y1) + bb.y;\n x2 = (bb.width * x2) + bb.x;\n y2 = (bb.height * y2) + bb.y;\n\n // Transform those points\n const pt1 = transformPoint(x1, y1, m);\n const pt2 = transformPoint(x2, y2, m);\n\n // Convert back to BB points\n const gCoords = {\n x1: (pt1.x - bb.x) / bb.width,\n y1: (pt1.y - bb.y) / bb.height,\n x2: (pt2.x - bb.x) / bb.width,\n y2: (pt2.y - bb.y) / bb.height\n };\n\n const newgrad = grad.cloneNode(true);\n $(newgrad).attr(gCoords);\n\n newgrad.id = editorContext_.getNextId();\n findDefs().append(newgrad);\n elem.setAttribute(type, 'url(#' + newgrad.id + ')');\n }\n }\n }\n};\n\n/**\n* This is how we map paths to our preferred relative segment types\n* @name module:path.pathMap\n* @type {GenericArray}\n*/\nconst pathMap = [\n 0, 'z', 'M', 'm', 'L', 'l', 'C', 'c', 'Q', 'q', 'A', 'a',\n 'H', 'h', 'V', 'v', 'S', 's', 'T', 't'\n];\n\n/**\n * Convert a path to one with only absolute or relative values.\n * @todo move to pathActions.js\n * @function module:path.convertPath\n * @param {SVGPathElement} pth - the path to convert\n * @param {boolean} toRel - true of convert to relative\n * @returns {string}\n */\nexport const convertPath = function (pth, toRel) {\n const {pathSegList} = pth;\n const len = pathSegList.numberOfItems;\n let curx = 0, cury = 0;\n let d = '';\n let lastM = null;\n\n for (let i = 0; i < len; ++i) {\n const seg = pathSegList.getItem(i);\n // if these properties are not in the segment, set them to zero\n let x = seg.x || 0,\n y = seg.y || 0,\n x1 = seg.x1 || 0,\n y1 = seg.y1 || 0,\n x2 = seg.x2 || 0,\n y2 = seg.y2 || 0;\n\n const type = seg.pathSegType;\n let letter = pathMap[type]['to' + (toRel ? 'Lower' : 'Upper') + 'Case']();\n\n switch (type) {\n case 1: // z,Z closepath (Z/z)\n d += 'z';\n if (lastM && !toRel) {\n curx = lastM[0];\n cury = lastM[1];\n }\n break;\n case 12: // absolute horizontal line (H)\n x -= curx;\n // Fallthrough\n case 13: // relative horizontal line (h)\n if (toRel) {\n curx += x;\n letter = 'l';\n } else {\n x += curx;\n curx = x;\n letter = 'L';\n }\n // Convert to \"line\" for easier editing\n d += pathDSegment(letter, [[x, cury]]);\n break;\n case 14: // absolute vertical line (V)\n y -= cury;\n // Fallthrough\n case 15: // relative vertical line (v)\n if (toRel) {\n cury += y;\n letter = 'l';\n } else {\n y += cury;\n cury = y;\n letter = 'L';\n }\n // Convert to \"line\" for easier editing\n d += pathDSegment(letter, [[curx, y]]);\n break;\n case 2: // absolute move (M)\n case 4: // absolute line (L)\n case 18: // absolute smooth quad (T)\n x -= curx;\n y -= cury;\n // Fallthrough\n case 5: // relative line (l)\n case 3: // relative move (m)\n case 19: // relative smooth quad (t)\n if (toRel) {\n curx += x;\n cury += y;\n } else {\n x += curx;\n y += cury;\n curx = x;\n cury = y;\n }\n if (type === 2 || type === 3) { lastM = [curx, cury]; }\n\n d += pathDSegment(letter, [[x, y]]);\n break;\n case 6: // absolute cubic (C)\n x -= curx; x1 -= curx; x2 -= curx;\n y -= cury; y1 -= cury; y2 -= cury;\n // Fallthrough\n case 7: // relative cubic (c)\n if (toRel) {\n curx += x;\n cury += y;\n } else {\n x += curx; x1 += curx; x2 += curx;\n y += cury; y1 += cury; y2 += cury;\n curx = x;\n cury = y;\n }\n d += pathDSegment(letter, [[x1, y1], [x2, y2], [x, y]]);\n break;\n case 8: // absolute quad (Q)\n x -= curx; x1 -= curx;\n y -= cury; y1 -= cury;\n // Fallthrough\n case 9: // relative quad (q)\n if (toRel) {\n curx += x;\n cury += y;\n } else {\n x += curx; x1 += curx;\n y += cury; y1 += cury;\n curx = x;\n cury = y;\n }\n d += pathDSegment(letter, [[x1, y1], [x, y]]);\n break;\n // eslint-disable-next-line sonarjs/no-duplicated-branches\n case 10: // absolute elliptical arc (A)\n x -= curx;\n y -= cury;\n // Fallthrough\n case 11: // relative elliptical arc (a)\n if (toRel) {\n curx += x;\n cury += y;\n } else {\n x += curx;\n y += cury;\n curx = x;\n cury = y;\n }\n d += pathDSegment(letter, [[seg.r1, seg.r2]], [\n seg.angle,\n (seg.largeArcFlag ? 1 : 0),\n (seg.sweepFlag ? 1 : 0)\n ], [x, y]);\n break;\n case 16: // absolute smooth cubic (S)\n x -= curx; x2 -= curx;\n y -= cury; y2 -= cury;\n // Fallthrough\n case 17: // relative smooth cubic (s)\n if (toRel) {\n curx += x;\n cury += y;\n } else {\n x += curx; x2 += curx;\n y += cury; y2 += cury;\n curx = x;\n cury = y;\n }\n d += pathDSegment(letter, [[x2, y2], [x, y]]);\n break;\n } // switch on path segment type\n } // for each segment\n return d;\n};\n\n/**\n * TODO: refactor callers in `convertPath` to use `getPathDFromSegments` instead of this function.\n * Legacy code refactored from `svgcanvas.pathActions.convertPath`.\n * @param {string} letter - path segment command (letter in potentially either case from {@link module:path.pathMap}; see [SVGPathSeg#pathSegTypeAsLetter]{@link https://www.w3.org/TR/SVG/single-page.html#paths-__svg__SVGPathSeg__pathSegTypeAsLetter})\n * @param {GenericArray>} points - x,y points\n * @param {GenericArray>} [morePoints] - x,y points\n * @param {Integer[]} [lastPoint] - x,y point\n * @returns {string}\n */\nfunction pathDSegment (letter, points, morePoints, lastPoint) {\n $.each(points, function (i, pnt) {\n points[i] = shortFloat(pnt);\n });\n let segment = letter + points.join(' ');\n if (morePoints) {\n segment += ' ' + morePoints.join(' ');\n }\n if (lastPoint) {\n segment += ' ' + shortFloat(lastPoint);\n }\n return segment;\n}\n\n/**\n* Group: Path edit functions\n* Functions relating to editing path elements\n* @namespace {PlainObject} pathActions\n* @memberof module:path\n*/\nexport const pathActions = (function () {\n let subpath = false;\n let newPoint, firstCtrl;\n\n let currentPath = null;\n let hasMoved = false;\n // No `editorContext_` yet but should be ok as is `null` by default\n // editorContext_.setDrawnPath(null);\n\n /**\n * This function converts a polyline (created by the fh_path tool) into\n * a path element and coverts every three line segments into a single bezier\n * curve in an attempt to smooth out the free-hand.\n * @function smoothPolylineIntoPath\n * @param {Element} element\n * @returns {Element}\n */\n const smoothPolylineIntoPath = function (element) {\n let i;\n const {points} = element;\n const N = points.numberOfItems;\n if (N >= 4) {\n // loop through every 3 points and convert to a cubic bezier curve segment\n //\n // NOTE: this is cheating, it means that every 3 points has the potential to\n // be a corner instead of treating each point in an equal manner. In general,\n // this technique does not look that good.\n //\n // I am open to better ideas!\n //\n // Reading:\n // - http://www.efg2.com/Lab/Graphics/Jean-YvesQueinecBezierCurves.htm\n // - https://www.codeproject.com/KB/graphics/BezierSpline.aspx?msg=2956963\n // - https://www.ian-ko.com/ET_GeoWizards/UserGuide/smooth.htm\n // - https://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/bezier-der.html\n let curpos = points.getItem(0), prevCtlPt = null;\n let d = [];\n d.push(['M', curpos.x, ',', curpos.y, ' C'].join(''));\n for (i = 1; i <= (N - 4); i += 3) {\n let ct1 = points.getItem(i);\n const ct2 = points.getItem(i + 1);\n const end = points.getItem(i + 2);\n\n // if the previous segment had a control point, we want to smooth out\n // the control points on both sides\n if (prevCtlPt) {\n const newpts = smoothControlPoints(prevCtlPt, ct1, curpos);\n if (newpts && newpts.length === 2) {\n const prevArr = d[d.length - 1].split(',');\n prevArr[2] = newpts[0].x;\n prevArr[3] = newpts[0].y;\n d[d.length - 1] = prevArr.join(',');\n ct1 = newpts[1];\n }\n }\n\n d.push([ct1.x, ct1.y, ct2.x, ct2.y, end.x, end.y].join(','));\n\n curpos = end;\n prevCtlPt = ct2;\n }\n // handle remaining line segments\n d.push('L');\n while (i < N) {\n const pt = points.getItem(i);\n d.push([pt.x, pt.y].join(','));\n i++;\n }\n d = d.join(' ');\n\n // create new path element\n element = editorContext_.addSVGElementFromJson({\n element: 'path',\n curStyles: true,\n attr: {\n id: editorContext_.getId(),\n d,\n fill: 'none'\n }\n });\n // No need to call \"changed\", as this is already done under mouseUp\n }\n return element;\n };\n\n return (/** @lends module:path.pathActions */ {\n /**\n * @param {MouseEvent} evt\n * @param {Element} mouseTarget\n * @param {Float} startX\n * @param {Float} startY\n * @returns {boolean|void}\n */\n mouseDown (evt, mouseTarget, startX, startY) {\n let id;\n if (editorContext_.getCurrentMode() === 'path') {\n let mouseX = startX; // Was this meant to work with the other `mouseX`? (was defined globally so adding `let` to at least avoid a global)\n let mouseY = startY; // Was this meant to work with the other `mouseY`? (was defined globally so adding `let` to at least avoid a global)\n\n const currentZoom = editorContext_.getCurrentZoom();\n let x = mouseX / currentZoom,\n y = mouseY / currentZoom,\n stretchy = getElem('path_stretch_line');\n newPoint = [x, y];\n\n if (editorContext_.getGridSnapping()) {\n x = snapToGrid(x);\n y = snapToGrid(y);\n mouseX = snapToGrid(mouseX);\n mouseY = snapToGrid(mouseY);\n }\n\n if (!stretchy) {\n stretchy = document.createElementNS(NS.SVG, 'path');\n assignAttributes(stretchy, {\n id: 'path_stretch_line',\n stroke: '#22C',\n 'stroke-width': '0.5',\n fill: 'none'\n });\n stretchy = getElem('selectorParentGroup').appendChild(stretchy);\n }\n stretchy.setAttribute('display', 'inline');\n\n let keep = null;\n let index;\n // if pts array is empty, create path element with M at current point\n const drawnPath = editorContext_.getDrawnPath();\n if (!drawnPath) {\n const dAttr = 'M' + x + ',' + y + ' '; // Was this meant to work with the other `dAttr`? (was defined globally so adding `var` to at least avoid a global)\n /* drawnPath = */ editorContext_.setDrawnPath(editorContext_.addSVGElementFromJson({\n element: 'path',\n curStyles: true,\n attr: {\n d: dAttr,\n id: editorContext_.getNextId(),\n opacity: editorContext_.getOpacity() / 2\n }\n }));\n // set stretchy line to first point\n stretchy.setAttribute('d', ['M', mouseX, mouseY, mouseX, mouseY].join(' '));\n index = subpath ? path.segs.length : 0;\n addPointGrip(index, mouseX, mouseY);\n } else {\n // determine if we clicked on an existing point\n const seglist = drawnPath.pathSegList;\n let i = seglist.numberOfItems;\n const FUZZ = 6 / currentZoom;\n let clickOnPoint = false;\n while (i) {\n i--;\n const item = seglist.getItem(i);\n const px = item.x, py = item.y;\n // found a matching point\n if (x >= (px - FUZZ) && x <= (px + FUZZ) &&\n y >= (py - FUZZ) && y <= (py + FUZZ)\n ) {\n clickOnPoint = true;\n break;\n }\n }\n\n // get path element that we are in the process of creating\n id = editorContext_.getId();\n\n // Remove previous path object if previously created\n removePath_(id);\n\n const newpath = getElem(id);\n let newseg;\n let sSeg;\n const len = seglist.numberOfItems;\n // if we clicked on an existing point, then we are done this path, commit it\n // (i, i+1) are the x,y that were clicked on\n if (clickOnPoint) {\n // if clicked on any other point but the first OR\n // the first point was clicked on and there are less than 3 points\n // then leave the path open\n // otherwise, close the path\n if (i <= 1 && len >= 2) {\n // Create end segment\n const absX = seglist.getItem(0).x;\n const absY = seglist.getItem(0).y;\n\n sSeg = stretchy.pathSegList.getItem(1);\n if (sSeg.pathSegType === 4) {\n newseg = drawnPath.createSVGPathSegLinetoAbs(absX, absY);\n } else {\n newseg = drawnPath.createSVGPathSegCurvetoCubicAbs(\n absX,\n absY,\n sSeg.x1 / currentZoom,\n sSeg.y1 / currentZoom,\n absX,\n absY\n );\n }\n\n const endseg = drawnPath.createSVGPathSegClosePath();\n seglist.appendItem(newseg);\n seglist.appendItem(endseg);\n } else if (len < 3) {\n keep = false;\n return keep;\n }\n $(stretchy).remove();\n\n // This will signal to commit the path\n // const element = newpath; // Other event handlers define own `element`, so this was probably not meant to interact with them or one which shares state (as there were none); I therefore adding a missing `var` to avoid a global\n /* drawnPath = */ editorContext_.setDrawnPath(null);\n editorContext_.setStarted(false);\n\n if (subpath) {\n if (path.matrix) {\n editorContext_.remapElement(newpath, {}, path.matrix.inverse());\n }\n\n const newD = newpath.getAttribute('d');\n const origD = $(path.elem).attr('d');\n $(path.elem).attr('d', origD + newD);\n $(newpath).remove();\n if (path.matrix) {\n recalcRotatedPath();\n }\n init();\n pathActions.toEditMode(path.elem);\n path.selectPt();\n return false;\n }\n // else, create a new point, update path element\n } else {\n // Checks if current target or parents are #svgcontent\n if (!$.contains(\n editorContext_.getContainer(),\n editorContext_.getMouseTarget(evt)\n )) {\n // Clicked outside canvas, so don't make point\n // console.log('Clicked outside canvas');\n return false;\n }\n\n const num = drawnPath.pathSegList.numberOfItems;\n const last = drawnPath.pathSegList.getItem(num - 1);\n const lastx = last.x, lasty = last.y;\n\n if (evt.shiftKey) {\n const xya = snapToAngle(lastx, lasty, x, y);\n ({x, y} = xya);\n }\n\n // Use the segment defined by stretchy\n sSeg = stretchy.pathSegList.getItem(1);\n if (sSeg.pathSegType === 4) {\n newseg = drawnPath.createSVGPathSegLinetoAbs(\n editorContext_.round(x),\n editorContext_.round(y)\n );\n } else {\n newseg = drawnPath.createSVGPathSegCurvetoCubicAbs(\n editorContext_.round(x),\n editorContext_.round(y),\n sSeg.x1 / currentZoom,\n sSeg.y1 / currentZoom,\n sSeg.x2 / currentZoom,\n sSeg.y2 / currentZoom\n );\n }\n\n drawnPath.pathSegList.appendItem(newseg);\n\n x *= currentZoom;\n y *= currentZoom;\n\n // set stretchy line to latest point\n stretchy.setAttribute('d', ['M', x, y, x, y].join(' '));\n index = num;\n if (subpath) { index += path.segs.length; }\n addPointGrip(index, x, y);\n }\n // keep = true;\n }\n\n return undefined;\n }\n\n // TODO: Make sure currentPath isn't null at this point\n if (!path) { return undefined; }\n\n path.storeD();\n\n ({id} = evt.target);\n let curPt;\n if (id.substr(0, 14) === 'pathpointgrip_') {\n // Select this point\n curPt = path.cur_pt = parseInt(id.substr(14));\n path.dragging = [startX, startY];\n const seg = path.segs[curPt];\n\n // only clear selection if shift is not pressed (otherwise, add\n // node to selection)\n if (!evt.shiftKey) {\n if (path.selected_pts.length <= 1 || !seg.selected) {\n path.clearSelection();\n }\n path.addPtsToSelection(curPt);\n } else if (seg.selected) {\n path.removePtFromSelection(curPt);\n } else {\n path.addPtsToSelection(curPt);\n }\n } else if (id.startsWith('ctrlpointgrip_')) {\n path.dragging = [startX, startY];\n\n const parts = id.split('_')[1].split('c');\n curPt = Number(parts[0]);\n const ctrlNum = Number(parts[1]);\n path.selectPt(curPt, ctrlNum);\n }\n\n // Start selection box\n if (!path.dragging) {\n let rubberBox = editorContext_.getRubberBox();\n if (isNullish(rubberBox)) {\n rubberBox = editorContext_.setRubberBox(\n editorContext_.selectorManager.getRubberBandBox()\n );\n }\n const currentZoom = editorContext_.getCurrentZoom();\n assignAttributes(rubberBox, {\n x: startX * currentZoom,\n y: startY * currentZoom,\n width: 0,\n height: 0,\n display: 'inline'\n }, 100);\n }\n return undefined;\n },\n /**\n * @param {Float} mouseX\n * @param {Float} mouseY\n * @returns {void}\n */\n mouseMove (mouseX, mouseY) {\n const currentZoom = editorContext_.getCurrentZoom();\n hasMoved = true;\n const drawnPath = editorContext_.getDrawnPath();\n if (editorContext_.getCurrentMode() === 'path') {\n if (!drawnPath) { return; }\n const seglist = drawnPath.pathSegList;\n const index = seglist.numberOfItems - 1;\n\n if (newPoint) {\n // First point\n // if (!index) { return; }\n\n // Set control points\n const pointGrip1 = addCtrlGrip('1c1');\n const pointGrip2 = addCtrlGrip('0c2');\n\n // dragging pointGrip1\n pointGrip1.setAttribute('cx', mouseX);\n pointGrip1.setAttribute('cy', mouseY);\n pointGrip1.setAttribute('display', 'inline');\n\n const ptX = newPoint[0];\n const ptY = newPoint[1];\n\n // set curve\n // const seg = seglist.getItem(index);\n const curX = mouseX / currentZoom;\n const curY = mouseY / currentZoom;\n const altX = (ptX + (ptX - curX));\n const altY = (ptY + (ptY - curY));\n\n pointGrip2.setAttribute('cx', altX * currentZoom);\n pointGrip2.setAttribute('cy', altY * currentZoom);\n pointGrip2.setAttribute('display', 'inline');\n\n const ctrlLine = getCtrlLine(1);\n assignAttributes(ctrlLine, {\n x1: mouseX,\n y1: mouseY,\n x2: altX * currentZoom,\n y2: altY * currentZoom,\n display: 'inline'\n });\n\n if (index === 0) {\n firstCtrl = [mouseX, mouseY];\n } else {\n const last = seglist.getItem(index - 1);\n let lastX = last.x;\n let lastY = last.y;\n\n if (last.pathSegType === 6) {\n lastX += (lastX - last.x2);\n lastY += (lastY - last.y2);\n } else if (firstCtrl) {\n lastX = firstCtrl[0] / currentZoom;\n lastY = firstCtrl[1] / currentZoom;\n }\n replacePathSeg(6, index, [ptX, ptY, lastX, lastY, altX, altY], drawnPath);\n }\n } else {\n const stretchy = getElem('path_stretch_line');\n if (stretchy) {\n const prev = seglist.getItem(index);\n if (prev.pathSegType === 6) {\n const prevX = prev.x + (prev.x - prev.x2);\n const prevY = prev.y + (prev.y - prev.y2);\n replacePathSeg(6, 1, [mouseX, mouseY, prevX * currentZoom, prevY * currentZoom, mouseX, mouseY], stretchy);\n } else if (firstCtrl) {\n replacePathSeg(6, 1, [mouseX, mouseY, firstCtrl[0], firstCtrl[1], mouseX, mouseY], stretchy);\n } else {\n replacePathSeg(4, 1, [mouseX, mouseY], stretchy);\n }\n }\n }\n return;\n }\n // if we are dragging a point, let's move it\n if (path.dragging) {\n const pt = getPointFromGrip({\n x: path.dragging[0],\n y: path.dragging[1]\n }, path);\n const mpt = getPointFromGrip({\n x: mouseX,\n y: mouseY\n }, path);\n const diffX = mpt.x - pt.x;\n const diffY = mpt.y - pt.y;\n path.dragging = [mouseX, mouseY];\n\n if (path.dragctrl) {\n path.moveCtrl(diffX, diffY);\n } else {\n path.movePts(diffX, diffY);\n }\n } else {\n path.selected_pts = [];\n path.eachSeg(function (i) {\n const seg = this; // eslint-disable-line consistent-this\n if (!seg.next && !seg.prev) { return; }\n\n // const {item} = seg;\n const rubberBox = editorContext_.getRubberBox();\n const rbb = rubberBox.getBBox();\n\n const pt = getGripPt(seg);\n const ptBb = {\n x: pt.x,\n y: pt.y,\n width: 0,\n height: 0\n };\n\n const sel = rectsIntersect(rbb, ptBb);\n\n this.select(sel);\n // Note that addPtsToSelection is not being run\n if (sel) { path.selected_pts.push(seg.index); }\n });\n }\n },\n /**\n * @typedef module:path.keepElement\n * @type {PlainObject}\n * @property {boolean} keep\n * @property {Element} element\n */\n /**\n * @param {Event} evt\n * @param {Element} element\n * @param {Float} mouseX\n * @param {Float} mouseY\n * @returns {module:path.keepElement|void}\n */\n mouseUp (evt, element, mouseX, mouseY) {\n const drawnPath = editorContext_.getDrawnPath();\n // Create mode\n if (editorContext_.getCurrentMode() === 'path') {\n newPoint = null;\n if (!drawnPath) {\n element = getElem(editorContext_.getId());\n editorContext_.setStarted(false);\n firstCtrl = null;\n }\n\n return {\n keep: true,\n element\n };\n }\n\n // Edit mode\n const rubberBox = editorContext_.getRubberBox();\n if (path.dragging) {\n const lastPt = path.cur_pt;\n\n path.dragging = false;\n path.dragctrl = false;\n path.update();\n\n if (hasMoved) {\n path.endChanges('Move path point(s)');\n }\n\n if (!evt.shiftKey && !hasMoved) {\n path.selectPt(lastPt);\n }\n } else if (rubberBox && rubberBox.getAttribute('display') !== 'none') {\n // Done with multi-node-select\n rubberBox.setAttribute('display', 'none');\n\n if (rubberBox.getAttribute('width') <= 2 && rubberBox.getAttribute('height') <= 2) {\n pathActions.toSelectMode(evt.target);\n }\n\n // else, move back to select mode\n } else {\n pathActions.toSelectMode(evt.target);\n }\n hasMoved = false;\n return undefined;\n },\n /**\n * @param {Element} element\n * @returns {void}\n */\n toEditMode (element) {\n path = getPath_(element);\n editorContext_.setCurrentMode('pathedit');\n editorContext_.clearSelection();\n path.show(true).update();\n path.oldbbox = utilsGetBBox(path.elem);\n subpath = false;\n },\n /**\n * @param {Element} elem\n * @fires module:svgcanvas.SvgCanvas#event:selected\n * @returns {void}\n */\n toSelectMode (elem) {\n const selPath = (elem === path.elem);\n editorContext_.setCurrentMode('select');\n path.show(false);\n currentPath = false;\n editorContext_.clearSelection();\n\n if (path.matrix) {\n // Rotated, so may need to re-calculate the center\n recalcRotatedPath();\n }\n\n if (selPath) {\n editorContext_.call('selected', [elem]);\n editorContext_.addToSelection([elem], true);\n }\n },\n /**\n * @param {boolean} on\n * @returns {void}\n */\n addSubPath (on) {\n if (on) {\n // Internally we go into \"path\" mode, but in the UI it will\n // still appear as if in \"pathedit\" mode.\n editorContext_.setCurrentMode('path');\n subpath = true;\n } else {\n pathActions.clear(true);\n pathActions.toEditMode(path.elem);\n }\n },\n /**\n * @param {Element} target\n * @returns {void}\n */\n select (target) {\n if (currentPath === target) {\n pathActions.toEditMode(target);\n editorContext_.setCurrentMode('pathedit');\n // going into pathedit mode\n } else {\n currentPath = target;\n }\n },\n /**\n * @fires module:svgcanvas.SvgCanvas#event:changed\n * @returns {void}\n */\n reorient () {\n const elem = editorContext_.getSelectedElements()[0];\n if (!elem) { return; }\n const angl = getRotationAngle(elem);\n if (angl === 0) { return; }\n\n const batchCmd = new BatchCommand('Reorient path');\n const changes = {\n d: elem.getAttribute('d'),\n transform: elem.getAttribute('transform')\n };\n batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));\n editorContext_.clearSelection();\n this.resetOrientation(elem);\n\n editorContext_.addCommandToHistory(batchCmd);\n\n // Set matrix to null\n getPath_(elem).show(false).matrix = null;\n\n this.clear();\n\n editorContext_.addToSelection([elem], true);\n editorContext_.call('changed', editorContext_.getSelectedElements());\n },\n\n /**\n * @param {boolean} remove Not in use\n * @returns {void}\n */\n clear (remove) {\n const drawnPath = editorContext_.getDrawnPath();\n currentPath = null;\n if (drawnPath) {\n const elem = getElem(editorContext_.getId());\n $(getElem('path_stretch_line')).remove();\n $(elem).remove();\n $(getElem('pathpointgrip_container')).find('*').attr('display', 'none');\n firstCtrl = null;\n editorContext_.setDrawnPath(null);\n editorContext_.setStarted(false);\n } else if (editorContext_.getCurrentMode() === 'pathedit') {\n this.toSelectMode();\n }\n if (path) { path.init().show(false); }\n },\n /**\n * @param {?(Element|SVGPathElement)} pth\n * @returns {false|void}\n */\n resetOrientation (pth) {\n if (isNullish(pth) || pth.nodeName !== 'path') { return false; }\n const tlist = getTransformList(pth);\n const m = transformListToTransform(tlist).matrix;\n tlist.clear();\n pth.removeAttribute('transform');\n const segList = pth.pathSegList;\n\n // Opera/win/non-EN throws an error here.\n // TODO: Find out why!\n // Presumed fixed in Opera 10.5, so commented out for now\n\n // try {\n const len = segList.numberOfItems;\n // } catch(err) {\n // const fixed_d = pathActions.convertPath(pth);\n // pth.setAttribute('d', fixed_d);\n // segList = pth.pathSegList;\n // const len = segList.numberOfItems;\n // }\n // let lastX, lastY;\n for (let i = 0; i < len; ++i) {\n const seg = segList.getItem(i);\n const type = seg.pathSegType;\n if (type === 1) { continue; }\n const pts = [];\n $.each(['', 1, 2], function (j, n) {\n const x = seg['x' + n], y = seg['y' + n];\n if (x !== undefined && y !== undefined) {\n const pt = transformPoint(x, y, m);\n pts.splice(pts.length, 0, pt.x, pt.y);\n }\n });\n replacePathSeg(type, i, pts, pth);\n }\n\n reorientGrads(pth, m);\n return undefined;\n },\n /**\n * @returns {void}\n */\n zoomChange () {\n if (editorContext_.getCurrentMode() === 'pathedit') {\n path.update();\n }\n },\n /**\n * @typedef {PlainObject} module:path.NodePoint\n * @property {Float} x\n * @property {Float} y\n * @property {Integer} type\n */\n /**\n * @returns {module:path.NodePoint}\n */\n getNodePoint () {\n const selPt = path.selected_pts.length ? path.selected_pts[0] : 1;\n\n const seg = path.segs[selPt];\n return {\n x: seg.item.x,\n y: seg.item.y,\n type: seg.type\n };\n },\n /**\n * @param {boolean} linkPoints\n * @returns {void}\n */\n linkControlPoints (linkPoints) {\n setLinkControlPoints(linkPoints);\n },\n /**\n * @returns {void}\n */\n clonePathNode () {\n path.storeD();\n\n const selPts = path.selected_pts;\n // const {segs} = path;\n\n let i = selPts.length;\n const nums = [];\n\n while (i--) {\n const pt = selPts[i];\n path.addSeg(pt);\n\n nums.push(pt + i);\n nums.push(pt + i + 1);\n }\n path.init().addPtsToSelection(nums);\n\n path.endChanges('Clone path node(s)');\n },\n /**\n * @returns {void}\n */\n opencloseSubPath () {\n const selPts = path.selected_pts;\n // Only allow one selected node for now\n if (selPts.length !== 1) { return; }\n\n const {elem} = path;\n const list = elem.pathSegList;\n\n // const len = list.numberOfItems;\n\n const index = selPts[0];\n\n let openPt = null;\n let startItem = null;\n\n // Check if subpath is already open\n path.eachSeg(function (i) {\n if (this.type === 2 && i <= index) {\n startItem = this.item;\n }\n if (i <= index) { return true; }\n if (this.type === 2) {\n // Found M first, so open\n openPt = i;\n return false;\n }\n if (this.type === 1) {\n // Found Z first, so closed\n openPt = false;\n return false;\n }\n return true;\n });\n\n if (isNullish(openPt)) {\n // Single path, so close last seg\n openPt = path.segs.length - 1;\n }\n\n if (openPt !== false) {\n // Close this path\n\n // Create a line going to the previous \"M\"\n const newseg = elem.createSVGPathSegLinetoAbs(startItem.x, startItem.y);\n\n const closer = elem.createSVGPathSegClosePath();\n if (openPt === path.segs.length - 1) {\n list.appendItem(newseg);\n list.appendItem(closer);\n } else {\n insertItemBefore(elem, closer, openPt);\n insertItemBefore(elem, newseg, openPt);\n }\n\n path.init().selectPt(openPt + 1);\n return;\n }\n\n // M 1,1 L 2,2 L 3,3 L 1,1 z // open at 2,2\n // M 2,2 L 3,3 L 1,1\n\n // M 1,1 L 2,2 L 1,1 z M 4,4 L 5,5 L6,6 L 5,5 z\n // M 1,1 L 2,2 L 1,1 z [M 4,4] L 5,5 L(M)6,6 L 5,5 z\n\n const seg = path.segs[index];\n\n if (seg.mate) {\n list.removeItem(index); // Removes last \"L\"\n list.removeItem(index); // Removes the \"Z\"\n path.init().selectPt(index - 1);\n return;\n }\n\n let lastM, zSeg;\n\n // Find this sub-path's closing point and remove\n for (let i = 0; i < list.numberOfItems; i++) {\n const item = list.getItem(i);\n\n if (item.pathSegType === 2) {\n // Find the preceding M\n lastM = i;\n } else if (i === index) {\n // Remove it\n list.removeItem(lastM);\n // index--;\n } else if (item.pathSegType === 1 && index < i) {\n // Remove the closing seg of this subpath\n zSeg = i - 1;\n list.removeItem(i);\n break;\n }\n }\n\n let num = (index - lastM) - 1;\n\n while (num--) {\n insertItemBefore(elem, list.getItem(lastM), zSeg);\n }\n\n const pt = list.getItem(lastM);\n\n // Make this point the new \"M\"\n replacePathSeg(2, lastM, [pt.x, pt.y]);\n\n // i = index; // i is local here, so has no effect; what was the intent for this?\n\n path.init().selectPt(0);\n },\n /**\n * @returns {void}\n */\n deletePathNode () {\n if (!pathActions.canDeleteNodes) { return; }\n path.storeD();\n\n const selPts = path.selected_pts;\n\n let i = selPts.length;\n while (i--) {\n const pt = selPts[i];\n path.deleteSeg(pt);\n }\n\n // Cleanup\n const cleanup = function () {\n const segList = path.elem.pathSegList;\n let len = segList.numberOfItems;\n\n const remItems = function (pos, count) {\n while (count--) {\n segList.removeItem(pos);\n }\n };\n\n if (len <= 1) { return true; }\n\n while (len--) {\n const item = segList.getItem(len);\n if (item.pathSegType === 1) {\n const prev = segList.getItem(len - 1);\n const nprev = segList.getItem(len - 2);\n if (prev.pathSegType === 2) {\n remItems(len - 1, 2);\n cleanup();\n break;\n } else if (nprev.pathSegType === 2) {\n remItems(len - 2, 3);\n cleanup();\n break;\n }\n } else if (item.pathSegType === 2) {\n if (len > 0) {\n const prevType = segList.getItem(len - 1).pathSegType;\n // Path has M M\n if (prevType === 2) {\n remItems(len - 1, 1);\n cleanup();\n break;\n // Entire path ends with Z M\n } else if (prevType === 1 && segList.numberOfItems - 1 === len) {\n remItems(len, 1);\n cleanup();\n break;\n }\n }\n }\n }\n return false;\n };\n\n cleanup();\n\n // Completely delete a path with 1 or 0 segments\n if (path.elem.pathSegList.numberOfItems <= 1) {\n pathActions.toSelectMode(path.elem);\n editorContext_.canvas.deleteSelectedElements();\n return;\n }\n\n path.init();\n path.clearSelection();\n\n // TODO: Find right way to select point now\n // path.selectPt(selPt);\n if (window.opera) { // Opera repaints incorrectly\n const cp = $(path.elem);\n cp.attr('d', cp.attr('d'));\n }\n path.endChanges('Delete path node(s)');\n },\n // Can't seem to use `@borrows` here, so using `@see`\n /**\n * Smooth polyline into path\n * @function module:path.pathActions.smoothPolylineIntoPath\n * @see module:path~smoothPolylineIntoPath\n */\n smoothPolylineIntoPath,\n /**\n * @param {?Integer} v See {@link https://www.w3.org/TR/SVG/single-page.html#paths-InterfaceSVGPathSeg}\n * @returns {void}\n */\n setSegType (v) {\n path.setSegType(v);\n },\n /**\n * @param {string} attr\n * @param {Float} newValue\n * @returns {void}\n */\n moveNode (attr, newValue) {\n const selPts = path.selected_pts;\n if (!selPts.length) { return; }\n\n path.storeD();\n\n // Get first selected point\n const seg = path.segs[selPts[0]];\n const diff = {x: 0, y: 0};\n diff[attr] = newValue - seg.item[attr];\n\n seg.move(diff.x, diff.y);\n path.endChanges('Move path point');\n },\n /**\n * @param {Element} elem\n * @returns {void}\n */\n fixEnd (elem) {\n // Adds an extra segment if the last seg before a Z doesn't end\n // at its M point\n // M0,0 L0,100 L100,100 z\n const segList = elem.pathSegList;\n const len = segList.numberOfItems;\n let lastM;\n for (let i = 0; i < len; ++i) {\n const item = segList.getItem(i);\n if (item.pathSegType === 2) {\n lastM = item;\n }\n\n if (item.pathSegType === 1) {\n const prev = segList.getItem(i - 1);\n if (prev.x !== lastM.x || prev.y !== lastM.y) {\n // Add an L segment here\n const newseg = elem.createSVGPathSegLinetoAbs(lastM.x, lastM.y);\n insertItemBefore(elem, newseg, i);\n // Can this be done better?\n pathActions.fixEnd(elem);\n break;\n }\n }\n }\n if (isWebkit()) { editorContext_.resetD(elem); }\n },\n // Can't seem to use `@borrows` here, so using `@see`\n /**\n * Convert a path to one with only absolute or relative values\n * @function module:path.pathActions.convertPath\n * @see module:path.convertPath\n */\n convertPath\n });\n})();\n// end pathActions\n","/**\n * Mathematical utilities\n * @module math\n * @license MIT\n *\n * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller\n */\n\n/**\n* @typedef {PlainObject} module:math.AngleCoord45\n* @property {Float} x - The angle-snapped x value\n* @property {Float} y - The angle-snapped y value\n* @property {Integer} a - The angle at which to snap\n*/\n\n/**\n* @typedef {PlainObject} module:math.XYObject\n* @property {Float} x\n* @property {Float} y\n*/\n\nimport {NS} from './namespaces.js';\nimport {getTransformList} from './svgtransformlist.js';\nimport {isNullish} from './utilities.js';\n\n// Constants\nconst NEAR_ZERO = 1e-14;\n\n// Throw away SVGSVGElement used for creating matrices/transforms.\nconst svg = document.createElementNS(NS.SVG, 'svg');\n\n/**\n * A (hopefully) quicker function to transform a point by a matrix\n * (this function avoids any DOM calls and just does the math).\n * @function module:math.transformPoint\n * @param {Float} x - Float representing the x coordinate\n * @param {Float} y - Float representing the y coordinate\n * @param {SVGMatrix} m - Matrix object to transform the point with\n * @returns {module:math.XYObject} An x, y object representing the transformed point\n*/\nexport const transformPoint = function (x, y, m) {\n return {x: m.a * x + m.c * y + m.e, y: m.b * x + m.d * y + m.f};\n};\n\n/**\n * Helper function to check if the matrix performs no actual transform\n * (i.e. exists for identity purposes).\n * @function module:math.isIdentity\n * @param {SVGMatrix} m - The matrix object to check\n * @returns {boolean} Indicates whether or not the matrix is 1,0,0,1,0,0\n*/\nexport const isIdentity = function (m) {\n return (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0);\n};\n\n/**\n * This function tries to return a `SVGMatrix` that is the multiplication `m1 * m2`.\n * We also round to zero when it's near zero.\n * @function module:math.matrixMultiply\n * @param {...SVGMatrix} args - Matrix objects to multiply\n * @returns {SVGMatrix} The matrix object resulting from the calculation\n*/\nexport const matrixMultiply = function (...args) {\n const m = args.reduceRight((prev, m1) => {\n return m1.multiply(prev);\n });\n\n if (Math.abs(m.a) < NEAR_ZERO) { m.a = 0; }\n if (Math.abs(m.b) < NEAR_ZERO) { m.b = 0; }\n if (Math.abs(m.c) < NEAR_ZERO) { m.c = 0; }\n if (Math.abs(m.d) < NEAR_ZERO) { m.d = 0; }\n if (Math.abs(m.e) < NEAR_ZERO) { m.e = 0; }\n if (Math.abs(m.f) < NEAR_ZERO) { m.f = 0; }\n\n return m;\n};\n\n/**\n * See if the given transformlist includes a non-indentity matrix transform.\n * @function module:math.hasMatrixTransform\n * @param {SVGTransformList} [tlist] - The transformlist to check\n * @returns {boolean} Whether or not a matrix transform was found\n*/\nexport const hasMatrixTransform = function (tlist) {\n if (!tlist) { return false; }\n let num = tlist.numberOfItems;\n while (num--) {\n const xform = tlist.getItem(num);\n if (xform.type === 1 && !isIdentity(xform.matrix)) { return true; }\n }\n return false;\n};\n\n/**\n* @typedef {PlainObject} module:math.TransformedBox An object with the following values\n* @property {module:math.XYObject} tl - The top left coordinate\n* @property {module:math.XYObject} tr - The top right coordinate\n* @property {module:math.XYObject} bl - The bottom left coordinate\n* @property {module:math.XYObject} br - The bottom right coordinate\n* @property {PlainObject} aabox - Object with the following values:\n* @property {Float} aabox.x - Float with the axis-aligned x coordinate\n* @property {Float} aabox.y - Float with the axis-aligned y coordinate\n* @property {Float} aabox.width - Float with the axis-aligned width coordinate\n* @property {Float} aabox.height - Float with the axis-aligned height coordinate\n*/\n\n/**\n * Transforms a rectangle based on the given matrix.\n * @function module:math.transformBox\n * @param {Float} l - Float with the box's left coordinate\n * @param {Float} t - Float with the box's top coordinate\n * @param {Float} w - Float with the box width\n * @param {Float} h - Float with the box height\n * @param {SVGMatrix} m - Matrix object to transform the box by\n * @returns {module:math.TransformedBox}\n*/\nexport const transformBox = function (l, t, w, h, m) {\n const tl = transformPoint(l, t, m),\n tr = transformPoint((l + w), t, m),\n bl = transformPoint(l, (t + h), m),\n br = transformPoint((l + w), (t + h), m),\n\n minx = Math.min(tl.x, tr.x, bl.x, br.x),\n maxx = Math.max(tl.x, tr.x, bl.x, br.x),\n miny = Math.min(tl.y, tr.y, bl.y, br.y),\n maxy = Math.max(tl.y, tr.y, bl.y, br.y);\n\n return {\n tl,\n tr,\n bl,\n br,\n aabox: {\n x: minx,\n y: miny,\n width: (maxx - minx),\n height: (maxy - miny)\n }\n };\n};\n\n/**\n * This returns a single matrix Transform for a given Transform List\n * (this is the equivalent of `SVGTransformList.consolidate()` but unlike\n * that method, this one does not modify the actual `SVGTransformList`).\n * This function is very liberal with its `min`, `max` arguments.\n * @function module:math.transformListToTransform\n * @param {SVGTransformList} tlist - The transformlist object\n * @param {Integer} [min=0] - Optional integer indicating start transform position\n * @param {Integer} [max] - Optional integer indicating end transform position;\n * defaults to one less than the tlist's `numberOfItems`\n * @returns {SVGTransform} A single matrix transform object\n*/\nexport const transformListToTransform = function (tlist, min, max) {\n if (isNullish(tlist)) {\n // Or should tlist = null have been prevented before this?\n return svg.createSVGTransformFromMatrix(svg.createSVGMatrix());\n }\n min = min || 0;\n max = max || (tlist.numberOfItems - 1);\n min = parseInt(min);\n max = parseInt(max);\n if (min > max) { const temp = max; max = min; min = temp; }\n let m = svg.createSVGMatrix();\n for (let i = min; i <= max; ++i) {\n // if our indices are out of range, just use a harmless identity matrix\n const mtom = (i >= 0 && i < tlist.numberOfItems\n ? tlist.getItem(i).matrix\n : svg.createSVGMatrix());\n m = matrixMultiply(m, mtom);\n }\n return svg.createSVGTransformFromMatrix(m);\n};\n\n/**\n * Get the matrix object for a given element.\n * @function module:math.getMatrix\n * @param {Element} elem - The DOM element to check\n * @returns {SVGMatrix} The matrix object associated with the element's transformlist\n*/\nexport const getMatrix = function (elem) {\n const tlist = getTransformList(elem);\n return transformListToTransform(tlist).matrix;\n};\n\n/**\n * Returns a 45 degree angle coordinate associated with the two given\n * coordinates.\n * @function module:math.snapToAngle\n * @param {Integer} x1 - First coordinate's x value\n * @param {Integer} y1 - First coordinate's y value\n * @param {Integer} x2 - Second coordinate's x value\n * @param {Integer} y2 - Second coordinate's y value\n * @returns {module:math.AngleCoord45}\n*/\nexport const snapToAngle = function (x1, y1, x2, y2) {\n const snap = Math.PI / 4; // 45 degrees\n const dx = x2 - x1;\n const dy = y2 - y1;\n const angle = Math.atan2(dy, dx);\n const dist = Math.sqrt(dx * dx + dy * dy);\n const snapangle = Math.round(angle / snap) * snap;\n\n return {\n x: x1 + dist * Math.cos(snapangle),\n y: y1 + dist * Math.sin(snapangle),\n a: snapangle\n };\n};\n\n/**\n * Check if two rectangles (BBoxes objects) intersect each other.\n * @function module:math.rectsIntersect\n * @param {SVGRect} r1 - The first BBox-like object\n * @param {SVGRect} r2 - The second BBox-like object\n * @returns {boolean} True if rectangles intersect\n */\nexport const rectsIntersect = function (r1, r2) {\n return r2.x < (r1.x + r1.width) &&\n (r2.x + r2.width) > r1.x &&\n r2.y < (r1.y + r1.height) &&\n (r2.y + r2.height) > r1.y;\n};\n","/* globals jQuery */\n/**\n * Miscellaneous utilities\n * @module utilities\n * @license MIT\n *\n * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller\n */\n\nimport './svgpathseg.js';\nimport jQueryPluginSVG from './jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`\nimport {NS} from './namespaces.js';\nimport {getTransformList} from './svgtransformlist.js';\nimport {setUnitAttr, getTypeMap} from './units.js';\nimport {convertPath} from './path.js';\nimport {\n hasMatrixTransform, transformListToTransform, transformBox\n} from './math.js';\nimport {\n isWebkit, supportsHVLineContainerBBox, supportsPathBBox, supportsXpath,\n supportsSelectors\n} from './browser.js';\n\n// Constants\nconst $ = jQueryPluginSVG(jQuery);\n\n// String used to encode base64.\nconst KEYSTR = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';\n\n// Much faster than running getBBox() every time\nconst visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use';\nconst visElemsArr = visElems.split(',');\n// const hidElems = 'clipPath,defs,desc,feGaussianBlur,filter,linearGradient,marker,mask,metadata,pattern,radialGradient,stop,switch,symbol,title,textPath';\n\nlet editorContext_ = null;\nlet domdoc_ = null;\nlet domcontainer_ = null;\nlet svgroot_ = null;\n\n/**\n* Object with the following keys/values\n* @typedef {PlainObject} module:utilities.SVGElementJSON\n* @property {string} element - Tag name of the SVG element to create\n* @property {PlainObject} attr - Has key-value attributes to assign to the new element. An `id` should be set so that {@link module:utilities.EditorContext#addSVGElementFromJson} can later re-identify the element for modification or replacement.\n* @property {boolean} [curStyles=false] - Indicates whether current style attributes should be applied first\n* @property {module:utilities.SVGElementJSON[]} [children] - Data objects to be added recursively as children\n* @property {string} [namespace=\"http://www.w3.org/2000/svg\"] - Indicate a (non-SVG) namespace\n*/\n\n/**\n * An object that creates SVG elements for the canvas.\n *\n * @interface module:utilities.EditorContext\n * @property {module:path.pathActions} pathActions\n */\n/**\n * @function module:utilities.EditorContext#getSVGContent\n * @returns {SVGSVGElement}\n */\n/**\n * Create a new SVG element based on the given object keys/values and add it\n * to the current layer.\n * The element will be run through `cleanupElement` before being returned\n * @function module:utilities.EditorContext#addSVGElementFromJson\n * @param {module:utilities.SVGElementJSON} data\n * @returns {Element} The new element\n*/\n/**\n * @function module:utilities.EditorContext#getSelectedElements\n * @returns {Element[]} the array with selected DOM elements\n*/\n/**\n * @function module:utilities.EditorContext#getDOMDocument\n * @returns {HTMLDocument}\n*/\n/**\n * @function module:utilities.EditorContext#getDOMContainer\n * @returns {HTMLElement}\n*/\n/**\n * @function module:utilities.EditorContext#getSVGRoot\n * @returns {SVGSVGElement}\n*/\n/**\n * @function module:utilities.EditorContext#getBaseUnit\n * @returns {string}\n*/\n/**\n * @function module:utilities.EditorContext#getSnappingStep\n * @returns {Float|string}\n*/\n\n/**\n* @function module:utilities.init\n* @param {module:utilities.EditorContext} editorContext\n* @returns {void}\n*/\nexport const init = function (editorContext) {\n editorContext_ = editorContext;\n domdoc_ = editorContext.getDOMDocument();\n domcontainer_ = editorContext.getDOMContainer();\n svgroot_ = editorContext.getSVGRoot();\n};\n\n/**\n * Used to prevent the [Billion laughs attack]{@link https://en.wikipedia.org/wiki/Billion_laughs_attack}.\n * @function module:utilities.dropXMLInteralSubset\n * @param {string} str String to be processed\n * @returns {string} The string with entity declarations in the internal subset removed\n * @todo This might be needed in other places `parseFromString` is used even without LGTM flagging\n */\nexport const dropXMLInteralSubset = (str) => {\n return str.replace(/()/, '$1$2');\n // return str.replace(/(?\\?\\]>)/, '$$');\n};\n\n/**\n* Converts characters in a string to XML-friendly entities.\n* @function module:utilities.toXml\n* @example `&` becomes `&`\n* @param {string} str - The string to be converted\n* @returns {string} The converted string\n*/\nexport const toXml = function (str) {\n // ' is ok in XML, but not HTML\n // > does not normally need escaping, though it can if within a CDATA expression (and preceded by \"]]\")\n return str\n .replace(/&/g, '&')\n .replace(//g, '>')\n .replace(/\"/g, '"')\n .replace(/'/g, '''); // Note: `'` is XML only\n};\n\n/**\n* Converts XML entities in a string to single characters.\n* @function module:utilities.fromXml\n* @example `&` becomes `&`\n* @param {string} str - The string to be converted\n* @returns {string} The converted string\n*/\nexport function fromXml (str) {\n return $('').html(str).text();\n}\n\n// This code was written by Tyler Akins and has been placed in the\n// public domain. It would be nice if you left this header intact.\n// Base64 code from Tyler Akins -- http://rumkin.com\n\n// schiller: Removed string concatenation in favour of Array.join() optimization,\n// also precalculate the size of the array needed.\n\n/**\n* Converts a string to base64.\n* @function module:utilities.encode64\n* @param {string} input\n* @returns {string} Base64 output\n*/\nexport function encode64 (input) {\n // base64 strings are 4/3 larger than the original string\n input = encodeUTF8(input); // convert non-ASCII characters\n // input = convertToXMLReferences(input);\n if (window.btoa) {\n return window.btoa(input); // Use native if available\n }\n const output = new Array(Math.floor((input.length + 2) / 3) * 4);\n\n let i = 0,\n p = 0;\n do {\n const chr1 = input.charCodeAt(i++);\n const chr2 = input.charCodeAt(i++);\n const chr3 = input.charCodeAt(i++);\n\n /* eslint-disable no-bitwise */\n const enc1 = chr1 >> 2;\n const enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);\n\n let enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);\n let enc4 = chr3 & 63;\n /* eslint-enable no-bitwise */\n\n if (isNaN(chr2)) {\n enc3 = 64;\n enc4 = 64;\n } else if (isNaN(chr3)) {\n enc4 = 64;\n }\n\n output[p++] = KEYSTR.charAt(enc1);\n output[p++] = KEYSTR.charAt(enc2);\n output[p++] = KEYSTR.charAt(enc3);\n output[p++] = KEYSTR.charAt(enc4);\n } while (i < input.length);\n\n return output.join('');\n}\n\n/**\n* Converts a string from base64.\n* @function module:utilities.decode64\n* @param {string} input Base64-encoded input\n* @returns {string} Decoded output\n*/\nexport function decode64 (input) {\n if (window.atob) {\n return decodeUTF8(window.atob(input));\n }\n\n // remove all characters that are not A-Z, a-z, 0-9, +, /, or =\n input = input.replace(/[^A-Za-z\\d+/=]/g, '');\n\n let output = '';\n let i = 0;\n\n do {\n const enc1 = KEYSTR.indexOf(input.charAt(i++));\n const enc2 = KEYSTR.indexOf(input.charAt(i++));\n const enc3 = KEYSTR.indexOf(input.charAt(i++));\n const enc4 = KEYSTR.indexOf(input.charAt(i++));\n\n /* eslint-disable no-bitwise */\n const chr1 = (enc1 << 2) | (enc2 >> 4);\n const chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);\n const chr3 = ((enc3 & 3) << 6) | enc4;\n /* eslint-enable no-bitwise */\n\n output += String.fromCharCode(chr1);\n\n if (enc3 !== 64) {\n output += String.fromCharCode(chr2);\n }\n if (enc4 !== 64) {\n output += String.fromCharCode(chr3);\n }\n } while (i < input.length);\n return decodeUTF8(output);\n}\n\n/**\n* @function module:utilities.decodeUTF8\n* @param {string} argString\n* @returns {string}\n*/\nexport function decodeUTF8 (argString) {\n return decodeURIComponent(escape(argString));\n}\n\n// codedread:does not seem to work with webkit-based browsers on OSX // Brettz9: please test again as function upgraded\n/**\n* @function module:utilities.encodeUTF8\n* @param {string} argString\n* @returns {string}\n*/\nexport const encodeUTF8 = function (argString) {\n return unescape(encodeURIComponent(argString));\n};\n\n/**\n * Convert dataURL to object URL.\n * @function module:utilities.dataURLToObjectURL\n * @param {string} dataurl\n * @returns {string} object URL or empty string\n */\nexport const dataURLToObjectURL = function (dataurl) {\n if (typeof Uint8Array === 'undefined' || typeof Blob === 'undefined' || typeof URL === 'undefined' || !URL.createObjectURL) {\n return '';\n }\n const arr = dataurl.split(','),\n mime = arr[0].match(/:(.*?);/)[1],\n bstr = atob(arr[1]);\n /*\n const [prefix, suffix] = dataurl.split(','),\n {groups: {mime}} = prefix.match(/:(?.*?);/),\n bstr = atob(suffix);\n */\n let n = bstr.length;\n const u8arr = new Uint8Array(n);\n while (n--) {\n u8arr[n] = bstr.charCodeAt(n);\n }\n const blob = new Blob([u8arr], {type: mime});\n return URL.createObjectURL(blob);\n};\n\n/**\n * Get object URL for a blob object.\n * @function module:utilities.createObjectURL\n * @param {Blob} blob A Blob object or File object\n * @returns {string} object URL or empty string\n */\nexport const createObjectURL = function (blob) {\n if (!blob || typeof URL === 'undefined' || !URL.createObjectURL) {\n return '';\n }\n return URL.createObjectURL(blob);\n};\n\n/**\n * @property {string} blankPageObjectURL\n */\nexport const blankPageObjectURL = (function () {\n if (typeof Blob === 'undefined') {\n return '';\n }\n const blob = new Blob(['SVG-edit '], {type: 'text/html'});\n return createObjectURL(blob);\n})();\n\n/**\n* Converts a string to use XML references (for non-ASCII).\n* @function module:utilities.convertToXMLReferences\n* @param {string} input\n* @returns {string} Decimal numeric character references\n*/\nexport const convertToXMLReferences = function (input) {\n let output = '';\n [...input].forEach((ch) => {\n const c = ch.charCodeAt();\n if (c <= 127) {\n output += ch;\n } else {\n output += `&#${c};`;\n }\n });\n return output;\n};\n\n/**\n* Cross-browser compatible method of converting a string to an XML tree.\n* Found this function [here]{@link http://groups.google.com/group/jquery-dev/browse_thread/thread/c6d11387c580a77f}.\n* @function module:utilities.text2xml\n* @param {string} sXML\n* @throws {Error}\n* @returns {XMLDocument}\n*/\nexport const text2xml = function (sXML) {\n if (sXML.includes('`\n* - ``\n* - ``\n* @function module:utilities.getUrlFromAttr\n* @param {string} attrVal The attribute value as a string\n* @returns {string} String with just the URL, like \"someFile.svg#foo\"\n*/\nexport const getUrlFromAttr = function (attrVal) {\n if (attrVal) {\n // url('#somegrad')\n if (attrVal.startsWith('url(\"')) {\n return attrVal.substring(5, attrVal.indexOf('\"', 6));\n }\n // url('#somegrad')\n if (attrVal.startsWith(\"url('\")) {\n return attrVal.substring(5, attrVal.indexOf(\"'\", 6));\n }\n if (attrVal.startsWith('url(')) {\n return attrVal.substring(4, attrVal.indexOf(')'));\n }\n }\n return null;\n};\n\n/**\n* @function module:utilities.getHref\n* @param {Element} elem\n* @returns {string} The given element's `xlink:href` value\n*/\nexport let getHref = function (elem) { // eslint-disable-line import/no-mutable-exports\n return elem.getAttributeNS(NS.XLINK, 'href');\n};\n\n/**\n* Sets the given element's `xlink:href` value.\n* @function module:utilities.setHref\n* @param {Element} elem\n* @param {string} val\n* @returns {void}\n*/\nexport let setHref = function (elem, val) { // eslint-disable-line import/no-mutable-exports\n elem.setAttributeNS(NS.XLINK, 'xlink:href', val);\n};\n\n/**\n* @function module:utilities.findDefs\n* @returns {SVGDefsElement} The document's `` element, creating it first if necessary\n*/\nexport const findDefs = function () {\n const svgElement = editorContext_.getSVGContent();\n let defs = svgElement.getElementsByTagNameNS(NS.SVG, 'defs');\n if (defs.length > 0) {\n defs = defs[0];\n } else {\n defs = svgElement.ownerDocument.createElementNS(NS.SVG, 'defs');\n if (svgElement.firstChild) {\n // first child is a comment, so call nextSibling\n svgElement.insertBefore(defs, svgElement.firstChild.nextSibling);\n // svgElement.firstChild.nextSibling.before(defs); // Not safe\n } else {\n svgElement.append(defs);\n }\n }\n return defs;\n};\n\n// TODO(codedread): Consider moving the next to functions to bbox.js\n\n/**\n* Get correct BBox for a path in Webkit.\n* Converted from code found [here]{@link http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html}.\n* @function module:utilities.getPathBBox\n* @param {SVGPathElement} path - The path DOM element to get the BBox for\n* @returns {module:utilities.BBoxObject} A BBox-like object\n*/\nexport const getPathBBox = function (path) {\n const seglist = path.pathSegList;\n const tot = seglist.numberOfItems;\n\n const bounds = [[], []];\n const start = seglist.getItem(0);\n let P0 = [start.x, start.y];\n\n const getCalc = function (j, P1, P2, P3) {\n return function (t) {\n return 1 - (t ** 3) * P0[j] +\n 3 * 1 - (t ** 2) * t * P1[j] +\n 3 * (1 - t) * (t ** 2) * P2[j] +\n (t ** 3) * P3[j];\n };\n };\n\n for (let i = 0; i < tot; i++) {\n const seg = seglist.getItem(i);\n\n if (seg.x === undefined) { continue; }\n\n // Add actual points to limits\n bounds[0].push(P0[0]);\n bounds[1].push(P0[1]);\n\n if (seg.x1) {\n const P1 = [seg.x1, seg.y1],\n P2 = [seg.x2, seg.y2],\n P3 = [seg.x, seg.y];\n\n for (let j = 0; j < 2; j++) {\n const calc = getCalc(j, P1, P2, P3);\n\n const b = 6 * P0[j] - 12 * P1[j] + 6 * P2[j];\n const a = -3 * P0[j] + 9 * P1[j] - 9 * P2[j] + 3 * P3[j];\n const c = 3 * P1[j] - 3 * P0[j];\n\n if (a === 0) {\n if (b === 0) { continue; }\n const t = -c / b;\n if (t > 0 && t < 1) {\n bounds[j].push(calc(t));\n }\n continue;\n }\n const b2ac = (b ** 2) - 4 * c * a;\n if (b2ac < 0) { continue; }\n const t1 = (-b + Math.sqrt(b2ac)) / (2 * a);\n if (t1 > 0 && t1 < 1) { bounds[j].push(calc(t1)); }\n const t2 = (-b - Math.sqrt(b2ac)) / (2 * a);\n if (t2 > 0 && t2 < 1) { bounds[j].push(calc(t2)); }\n }\n P0 = P3;\n } else {\n bounds[0].push(seg.x);\n bounds[1].push(seg.y);\n }\n }\n\n const x = Math.min.apply(null, bounds[0]);\n const w = Math.max.apply(null, bounds[0]) - x;\n const y = Math.min.apply(null, bounds[1]);\n const h = Math.max.apply(null, bounds[1]) - y;\n return {\n x,\n y,\n width: w,\n height: h\n };\n};\n\n/**\n* Get the given/selected element's bounding box object, checking for\n* horizontal/vertical lines (see issue 717)\n* Note that performance is currently terrible, so some way to improve would\n* be great.\n* @param {Element} selected - Container or `
diff --git a/editor/xdomain-svgedit-config-iife.js b/editor/xdomain-svgedit-config-iife.js
index 8faf7ff0..f1667774 100644
--- a/editor/xdomain-svgedit-config-iife.js
+++ b/editor/xdomain-svgedit-config-iife.js
@@ -28398,6 +28398,8 @@
tool_import: tools.import_doc,
tool_open: tools.open_doc,
tool_save: tools.save_doc,
+ tool_editor_prefs: config.editor_prefs,
+ tool_editor_homepage: tools.editor_homepage,
svginfo_units_rulers: config.units_and_rulers,
svginfo_rulers_onoff: config.show_rulers,
svginfo_unit: config.base_unit,
@@ -28820,6 +28822,7 @@
}
*/
+ var homePage = 'https://github.com/SVG-Edit/svgedit';
var stylesheet = 'svg-editor.css';
if (!$$b.loadingStylesheets.includes(stylesheet)) {
@@ -30250,17 +30253,20 @@
warning: 'warning.png',
node_delete: 'node_delete.png',
node_clone: 'node_clone.png',
- globe_link: 'globe_link.png'
+ globe_link: 'globe_link.png',
+ config: 'config.png'
},
placement: {
'#logo': 'logo',
'#tool_clear div,#layer_new': 'new_image',
'#tool_save div': 'save',
'#tool_export div': 'export',
- '#tool_open div div': 'open',
- '#tool_import div div': 'import',
+ '#tool_open div': 'open',
+ '#tool_import div': 'import',
'#tool_source': 'source',
'#tool_docprops > div': 'docprops',
+ '#tool_editor_prefs > div': 'config',
+ '#tool_editor_homepage > div': 'globe_link',
'#tool_wireframe': 'wireframe',
'#tool_undo': 'undo',
'#tool_redo': 'redo',
@@ -34159,6 +34165,15 @@
*/
+ var openHomePage = function openHomePage() {
+ window.open(homePage, '_blank');
+ };
+ /**
+ *
+ * @returns {void}
+ */
+
+
var hideSourceEditor = function hideSourceEditor() {
$$b('#svg_source_editor').hide();
editingsource = false;
@@ -35389,18 +35404,31 @@
}, {
sel: '#tool_docprops',
fn: showDocProperties,
- evt: 'mouseup'
+ evt: 'click'
}, {
sel: '#tool_prefs_save',
fn: savePreferences,
evt: 'click'
}, {
- sel: '#tool_prefs_option',
+ sel: '#tool_editor_prefs',
+ fn: showPreferences,
+ evt: 'click'
+ }, {
+ sel: '#tool_editor_homepage',
+ fn: openHomePage,
+ evt: 'click'
+ }, {
+ sel: '#tool_open',
fn: function fn() {
- showPreferences();
- return false;
+ window.dispatchEvent(new CustomEvent('openImage'));
},
- evt: 'mouseup'
+ evt: 'click'
+ }, {
+ sel: '#tool_import',
+ fn: function fn() {
+ window.dispatchEvent(new CustomEvent('importImage'));
+ },
+ evt: 'click'
}, {
sel: '#tool_delete,#tool_delete_multi',
fn: deleteSelected,
@@ -36306,9 +36334,15 @@
return _ref28.apply(this, arguments);
};
}());
- $$b('#tool_open').show().prepend(open);
+ $$b('#tool_open').show();
+ $$b(window).on('openImage', function () {
+ return open.click();
+ });
var imgImport = $$b('').change(importImage);
- $$b('#tool_import').show().prepend(imgImport);
+ $$b('#tool_import').show();
+ $$b(window).on('importImage', function () {
+ return imgImport.click();
+ });
}
updateCanvas(true); // const revnums = 'svg-editor.js ($Rev$) ';
diff --git a/svgedit-config-iife.js b/svgedit-config-iife.js
index 7e349b23..0cdb32d5 100644
--- a/svgedit-config-iife.js
+++ b/svgedit-config-iife.js
@@ -28398,6 +28398,8 @@
tool_import: tools.import_doc,
tool_open: tools.open_doc,
tool_save: tools.save_doc,
+ tool_editor_prefs: config.editor_prefs,
+ tool_editor_homepage: tools.editor_homepage,
svginfo_units_rulers: config.units_and_rulers,
svginfo_rulers_onoff: config.show_rulers,
svginfo_unit: config.base_unit,
@@ -28820,6 +28822,7 @@
}
*/
+ var homePage = 'https://github.com/SVG-Edit/svgedit';
var stylesheet = 'svg-editor.css';
if (!$$b.loadingStylesheets.includes(stylesheet)) {
@@ -30250,17 +30253,20 @@
warning: 'warning.png',
node_delete: 'node_delete.png',
node_clone: 'node_clone.png',
- globe_link: 'globe_link.png'
+ globe_link: 'globe_link.png',
+ config: 'config.png'
},
placement: {
'#logo': 'logo',
'#tool_clear div,#layer_new': 'new_image',
'#tool_save div': 'save',
'#tool_export div': 'export',
- '#tool_open div div': 'open',
- '#tool_import div div': 'import',
+ '#tool_open div': 'open',
+ '#tool_import div': 'import',
'#tool_source': 'source',
'#tool_docprops > div': 'docprops',
+ '#tool_editor_prefs > div': 'config',
+ '#tool_editor_homepage > div': 'globe_link',
'#tool_wireframe': 'wireframe',
'#tool_undo': 'undo',
'#tool_redo': 'redo',
@@ -34159,6 +34165,15 @@
*/
+ var openHomePage = function openHomePage() {
+ window.open(homePage, '_blank');
+ };
+ /**
+ *
+ * @returns {void}
+ */
+
+
var hideSourceEditor = function hideSourceEditor() {
$$b('#svg_source_editor').hide();
editingsource = false;
@@ -35389,18 +35404,31 @@
}, {
sel: '#tool_docprops',
fn: showDocProperties,
- evt: 'mouseup'
+ evt: 'click'
}, {
sel: '#tool_prefs_save',
fn: savePreferences,
evt: 'click'
}, {
- sel: '#tool_prefs_option',
+ sel: '#tool_editor_prefs',
+ fn: showPreferences,
+ evt: 'click'
+ }, {
+ sel: '#tool_editor_homepage',
+ fn: openHomePage,
+ evt: 'click'
+ }, {
+ sel: '#tool_open',
fn: function fn() {
- showPreferences();
- return false;
+ window.dispatchEvent(new CustomEvent('openImage'));
},
- evt: 'mouseup'
+ evt: 'click'
+ }, {
+ sel: '#tool_import',
+ fn: function fn() {
+ window.dispatchEvent(new CustomEvent('importImage'));
+ },
+ evt: 'click'
}, {
sel: '#tool_delete,#tool_delete_multi',
fn: deleteSelected,
@@ -36306,9 +36334,15 @@
return _ref28.apply(this, arguments);
};
}());
- $$b('#tool_open').show().prepend(open);
+ $$b('#tool_open').show();
+ $$b(window).on('openImage', function () {
+ return open.click();
+ });
var imgImport = $$b('').change(importImage);
- $$b('#tool_import').show().prepend(imgImport);
+ $$b('#tool_import').show();
+ $$b(window).on('importImage', function () {
+ return imgImport.click();
+ });
}
updateCanvas(true); // const revnums = 'svg-editor.js ($Rev$) ';