markerjs2/markerjs2.js

JavaScript image annotation

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).markerjs2={})}(this,(function(t){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */var e=function(t,i){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])})(t,i)};function i(t,i){function o(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(o.prototype=i.prototype,new o)}function o(t,e,i,o){return new(i||(i=Promise))((function(s,r){function n(t){try{h(o.next(t))}catch(t){r(t)}}function a(t){try{h(o.throw(t))}catch(t){r(t)}}function h(t){var e;t.done?s(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(n,a)}h((o=o.apply(t,e||[])).next())}))}function s(t,e){var i,o,s,r,n={label:0,sent:function(){if(1&s[0])throw s[1];return s[1]},trys:[],ops:[]};return r={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function a(r){return function(a){return function(r){if(i)throw new TypeError("Generator is already executing.");for(;n;)try{if(i=1,o&&(s=2&r[0]?o.return:r[0]?o.throw||((s=o.return)&&s.call(o),0):o.next)&&!(s=s.call(o,r[1])).done)return s;switch(o=0,s&&(r=[2&r[0],s.value]),r[0]){case 0:case 1:s=r;break;case 4:return n.label++,{value:r[1],done:!1};case 5:n.label++,o=r[1],r=[0];continue;case 7:r=n.ops.pop(),n.trys.pop();continue;default:if(!(s=n.trys,(s=s.length>0&&s[s.length-1])||6!==r[0]&&2!==r[0])){n=0;continue}if(3===r[0]&&(!s||r[1]>s[0]&&r[1]<s[3])){n.label=r[1];break}if(6===r[0]&&n.label<s[1]){n.label=s[1],s=r;break}if(s&&n.label<s[2]){n.label=s[2],n.ops.push(r);break}s[2]&&n.ops.pop(),n.trys.pop();continue}r=e.call(t,n)}catch(t){r=[6,t],o=0}finally{i=s=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,a])}}}function r(){for(var t=0,e=0,i=arguments.length;e<i;e++)t+=arguments[e].length;var o=Array(t),s=0;for(e=0;e<i;e++)for(var r=arguments[e],n=0,a=r.length;n<a;n++,s++)o[s]=r[n];return o}var n=function(){function t(){}return t.createDefs=function(){return document.createElementNS("http://www.w3.org/2000/svg","defs")},t.setAttributes=function(t,e){for(var i=0,o=e;i<o.length;i++){var s=o[i],r=s[0],n=s[1];t.setAttribute(r,n)}},t.createRect=function(e,i,o){var s=document.createElementNS("http://www.w3.org/2000/svg","rect");return s.setAttribute("width",e.toString()),s.setAttribute("height",i.toString()),o&&t.setAttributes(s,o),s},t.createLine=function(e,i,o,s,r){var n=document.createElementNS("http://www.w3.org/2000/svg","line");return n.setAttribute("x1",e.toString()),n.setAttribute("y1",i.toString()),n.setAttribute("x2",o.toString()),n.setAttribute("y2",s.toString()),r&&t.setAttributes(n,r),n},t.createPolygon=function(e,i){var o=document.createElementNS("http://www.w3.org/2000/svg","polygon");return o.setAttribute("points",e),i&&t.setAttributes(o,i),o},t.createCircle=function(e,i){var o=document.createElementNS("http://www.w3.org/2000/svg","circle");return o.setAttribute("cx",(e/2).toString()),o.setAttribute("cy",(e/2).toString()),o.setAttribute("r",e.toString()),i&&t.setAttributes(o,i),o},t.createEllipse=function(e,i,o){var s=document.createElementNS("http://www.w3.org/2000/svg","ellipse");return s.setAttribute("cx",(e/2).toString()),s.setAttribute("cy",(i/2).toString()),s.setAttribute("rx",(e/2).toString()),s.setAttribute("ry",(i/2).toString()),o&&t.setAttributes(s,o),s},t.createGroup=function(e){var i=document.createElementNS("http://www.w3.org/2000/svg","g");return e&&t.setAttributes(i,e),i},t.createTransform=function(){return document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGTransform()},t.createMarker=function(e,i,o,s,r,n,a){var h=document.createElementNS("http://www.w3.org/2000/svg","marker");return t.setAttributes(h,[["id",e],["orient",i],["markerWidth",o.toString()],["markerHeight",s.toString()],["refX",r.toString()],["refY",n.toString()]]),h.appendChild(a),h},t.createText=function(e){var i=document.createElementNS("http://www.w3.org/2000/svg","text");return i.setAttribute("x","0"),i.setAttribute("y","0"),e&&t.setAttributes(i,e),i},t.createTSpan=function(e,i){var o=document.createElementNS("http://www.w3.org/2000/svg","tspan");return o.textContent=e,i&&t.setAttributes(o,i),o},t.createImage=function(e){var i=document.createElementNS("http://www.w3.org/2000/svg","image");return e&&t.setAttributes(i,e),i},t.createPoint=function(t,e){var i=document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGPoint();return i.x=t,i.y=e,i},t.createPath=function(e,i){var o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("d",e),i&&t.setAttributes(o,i),o},t}(),a=function(){function t(){}return t.addKey=function(e){t.key=e},Object.defineProperty(t,"isLicensed",{get:function(){return!!t.key&&new RegExp(/^MJS2-[A-Z][0-9]{3}-[A-Z][0-9]{3}-[0-9]{4}$/,"i").test(t.key)},enumerable:!1,configurable:!0}),t}(),h=function(){function t(){this.naturalSize=!1,this.imageType="image/png",this.markersOnly=!1}return t.prototype.rasterize=function(t,e,i){var o=this;return new Promise((function(s){var r=void 0!==i?i:document.createElement("canvas");null===t&&(o.markersOnly=!0,o.naturalSize=!1);var n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("xmlns","http://www.w3.org/2000/svg"),n.setAttribute("width",e.width.baseVal.valueAsString),n.setAttribute("height",e.height.baseVal.valueAsString),n.setAttribute("viewBox","0 0 "+e.viewBox.baseVal.width.toString()+" "+e.viewBox.baseVal.height.toString()),n.innerHTML=e.innerHTML,!0===o.naturalSize?(n.width.baseVal.value=t.naturalWidth,n.height.baseVal.value=t.naturalHeight):void 0!==o.width&&void 0!==o.height&&(n.width.baseVal.value=o.width,n.height.baseVal.value=o.height),r.width=n.width.baseVal.value,r.height=n.height.baseVal.value;var a=n.outerHTML,h=r.getContext("2d");!0!==o.markersOnly&&h.drawImage(t,0,0,r.width,r.height);var l=window.URL,p=new Image(r.width,r.height);p.setAttribute("crossOrigin","anonymous");var c=new Blob([a],{type:"image/svg+xml"}),d=l.createObjectURL(c);p.onload=function(){h.drawImage(p,0,0),l.revokeObjectURL(d);var t=r.toDataURL(o.imageType,o.imageQuality);s(t)},p.src=d}))},t}(),l=function(){},p=function(){function t(t){this._classNamePrefixBase="__markerjs2_",this.classes=[],this.rules=[],this.settings=this.defaultSettings,this._classNamePrefix=this._classNamePrefixBase+"_"+t+"_"}return Object.defineProperty(t.prototype,"classNamePrefixBase",{get:function(){return this._classNamePrefixBase},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"classNamePrefix",{get:function(){return this._classNamePrefix},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"defaultSettings",{get:function(){return{canvasBackgroundColor:"#ffffff",toolbarBackgroundColor:"#111111",toolbarBackgroundHoverColor:"#333333",toolbarColor:"#eeeeee",toolbarHeight:40,toolboxColor:"#eeeeee",toolboxAccentColor:"#3080c3",undoButtonVisible:!0,redoButtonVisible:!1,zoomButtonVisible:!1,zoomOutButtonVisible:!1,clearButtonVisible:!1,resultButtonBlockVisible:!0,logoPosition:"left"}},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"fadeInAnimationClassName",{get:function(){return this.classNamePrefix+"fade_in"},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"fadeOutAnimationClassName",{get:function(){return this.classNamePrefix+"fade_out"},enumerable:!1,configurable:!0}),t.prototype.addClass=function(t){return void 0===this.styleSheet&&this.addStyleSheet(),t.name=""+this.classNamePrefix+t.localName,this.classes.push(t),this.styleSheet.sheet.insertRule("."+t.name+" {"+t.style+"}",this.styleSheet.sheet.cssRules.length),t},t.prototype.addRule=function(t){void 0===this.styleSheet&&this.addStyleSheet(),this.rules.push(t),this.styleSheet.sheet.insertRule(t.selector+" {"+t.style+"}",this.styleSheet.sheet.cssRules.length)},t.prototype.addStyleSheet=function(){var t;this.styleSheet=document.createElement("style"),(null!==(t=this.styleSheetRoot)&&void 0!==t?t:document.head).appendChild(this.styleSheet),this.addRule(new c("."+this.classNamePrefix+" h3","font-family: sans-serif")),this.addRule(new c("@keyframes "+this.classNamePrefix+"_fade_in_animation_frames","\n        from {\n          opacity: 0;\n        }\n        to {\n          opacity: 1;\n        }\n    ")),this.addRule(new c("@keyframes "+this.classNamePrefix+"_fade_out_animation_frames","\n        from {\n          opacity: 1;\n        }\n        to {\n          opacity: 0;\n        }\n    ")),this.addClass(new d("fade_in","\n      animation-duration: 0.3s;\n      animation-name: "+this.classNamePrefix+"_fade_in_animation_frames;\n    ")),this.addClass(new d("fade_out","\n      animation-duration: 0.3s;\n      animation-name: "+this.classNamePrefix+"_fade_out_animation_frames;\n    "))},t.prototype.removeStyleSheet=function(){var t;this.styleSheet&&((null!==(t=this.styleSheetRoot)&&void 0!==t?t:document.head).removeChild(this.styleSheet),this.styleSheet=void 0)},t}(),c=function(t,e){this.selector=t,this.style=e},d=function(t,e){this.localName=t,this.style=e},u=function(){function t(t,e,i,o,s){this.buttons=[],this.markerButtons=[],this.buttonClickListeners=[],this.markerjsContainer=t,this.displayMode=e,this.markerItems=i,this.uiStyleSettings=o,this.styles=s,this.addStyles(),this.adjustLayout=this.adjustLayout.bind(this),this.overflowButtonClicked=this.overflowButtonClicked.bind(this),this.setCurrentMarker=this.setCurrentMarker.bind(this)}return t.prototype.show=function(t){var e=this;this.uiContainer=document.createElement("div"),this.uiContainer.style.visibility=t,this.uiContainer.className=this.toolbarStyleClass.name+" "+this.styles.fadeInAnimationClassName+" "+(this.uiStyleSettings.toolbarStyleColorsClassName?this.uiStyleSettings.toolbarStyleColorsClassName:this.toolbarStyleColorsClass.name);var i=document.createElement("div");i.className=this.toolbarBlockStyleClass.name,i.style.whiteSpace="nowrap",this.uiContainer.appendChild(i),this.addActionButton(i,'<svg viewBox="0 0 24 24"><path d="M10.07 14.27a.997.997 0 011.33.48l2.3 4.99 1.8-.85-2.31-4.98c-.24-.5-.02-1.1.48-1.33l.28-.08 2.3-.45L8 5.12V15.9l1.82-1.47.25-.16m3.57 7.7a.99.99 0 01-1.33-.47l-2.18-4.74-2.51 2.02c-.17.14-.38.22-.62.22a1 1 0 01-1-1V3a1 1 0 011-1c.24 0 .47.09.64.23l.01-.01 11.49 9.64a1.001 1.001 0 01-.44 1.75l-3.16.62 2.2 4.73c.26.5.02 1.09-.48 1.32l-3.62 1.69z"/></svg>',"select","Select mode"),this.addActionButton(i,'<svg viewBox="0 0 24 24"><path d="M9 3v1H4v2h1v13a2 2 0 002 2h10a2 2 0 002-2V6h1V4h-5V3H9M7 6h10v13H7V6m2 2v9h2V8H9m4 0v9h2V8h-2z"/></svg>',"delete","Delete marker"),this.uiStyleSettings.clearButtonVisible&&this.addActionButton(i,'<svg viewBox="0 0 24 24"><path d="M19.36 2.72l1.42 1.42-5.72 5.71c1.07 1.54 1.22 3.39.32 4.59L9.06 8.12c1.2-.9 3.05-.75 4.59.32l5.71-5.72M5.93 17.57c-2.01-2.01-3.24-4.41-3.58-6.65l4.88-2.09 7.44 7.44-2.09 4.88c-2.24-.34-4.64-1.57-6.65-3.58z"/></svg>',"clear","Delete all markers"),this.uiStyleSettings.undoButtonVisible&&this.addActionButton(i,'<svg viewBox="0 0 24 24"><path d="M12.5 8c-2.65 0-5.05 1-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg>',"undo","Undo"),this.uiStyleSettings.redoButtonVisible&&this.addActionButton(i,'<svg viewBox="0 0 24 24"><path d="M18.4 10.6C16.55 9 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16a8.002 8.002 0 017.6-5.5c1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></svg>',"redo","Redo"),this.uiStyleSettings.zoomButtonVisible&&this.addActionButton(i,'<svg viewBox="0 0 24 24"><path d="M15.5 14l5 5-1.5 1.5-5-5v-.79l-.27-.28A6.471 6.471 0 019.5 16 6.5 6.5 0 013 9.5 6.5 6.5 0 019.5 3 6.5 6.5 0 0116 9.5c0 1.61-.59 3.09-1.57 4.23l.28.27h.79m-6 0C12 14 14 12 14 9.5S12 5 9.5 5 5 7 5 9.5 7 14 9.5 14m2.5-4h-2v2H9v-2H7V9h2V7h1v2h2v1z"/></svg>',"zoom","Zoom in"),this.uiStyleSettings.zoomButtonVisible&&this.uiStyleSettings.zoomOutButtonVisible&&this.addActionButton(i,'<svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 009.5 3 6.5 6.5 0 003 9.5 6.5 6.5 0 009.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5m-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14M7 9h5v1H7V9z"/></svg>',"zoom-out","Zoom out"),this.uiStyleSettings.notesButtonVisible&&this.addActionButton(i,'<svg viewBox="0 0 24 24"><path d="M18.13 12l1.26-1.26c.44-.44 1-.68 1.61-.74V9l-6-6H5c-1.11 0-2 .89-2 2v14a2 2 0 002 2h6v-1.87l.13-.13H5V5h7v7h6.13M14 4.5l5.5 5.5H14V4.5m5.13 9.33l2.04 2.04L15.04 22H13v-2.04l6.13-6.13m3.72.36l-.98.98-2.04-2.04.98-.98c.19-.2.52-.2.72 0l1.32 1.32c.2.2.2.53 0 .72z"/></svg>',"notes","Notes"),this.markerButtonBlock=document.createElement("div"),this.markerButtonBlock.className=this.toolbarBlockStyleClass.name,this.markerButtonBlock.style.flexGrow="2",this.markerButtonBlock.style.textAlign="center",this.uiContainer.appendChild(this.markerButtonBlock),this.markerButtonOverflowBlock=document.createElement("div"),this.markerButtonOverflowBlock.className=this.toolbarOverflowBlockStyleClass.name+" "+(this.uiStyleSettings.toolbarOverflowBlockStyleColorsClassName?this.uiStyleSettings.toolbarOverflowBlockStyleColorsClassName:this.toolbarOverflowBlockStyleColorsClass.name),this.markerButtonOverflowBlock.style.display="none",this.uiContainer.appendChild(this.markerButtonOverflowBlock),this.markerItems&&(this.markerItems.forEach((function(t){var i=document.createElement("div");i.className=""+e.toolbarButtonStyleClass.name,i.setAttribute("data-type-name",t.typeName),i.setAttribute("aria-label",t.title),i.setAttribute("title",t.title),i.innerHTML=t.icon,i.addEventListener("click",(function(){e.markerToolbarButtonClicked(i,t)})),e.buttons.push(i),e.markerButtons.push(i)})),this.overflowButton=document.createElement("div"),this.overflowButton.className=this.toolbarButtonStyleClass.name+" "+(this.uiStyleSettings.toolbarButtonStyleColorsClassName?this.uiStyleSettings.toolbarButtonStyleColorsClassName:this.toolbarButtonStyleColorsClass.name),this.overflowButton.innerHTML='<svg viewBox="0 0 24 24"><path d="M12 16a2 2 0 012 2 2 2 0 01-2 2 2 2 0 01-2-2 2 2 0 012-2m0-6a2 2 0 012 2 2 2 0 01-2 2 2 2 0 01-2-2 2 2 0 012-2m0-6a2 2 0 012 2 2 2 0 01-2 2 2 2 0 01-2-2 2 2 0 012-2z"/></svg>',this.overflowButton.addEventListener("click",this.overflowButtonClicked),this.markerButtonBlock.appendChild(this.overflowButton));var o=document.createElement("div");o.className=this.toolbarBlockStyleClass.name,o.style.whiteSpace="nowrap",o.style.display=!1!==this.uiStyleSettings.resultButtonBlockVisible?"":"none",this.uiContainer.appendChild(o),this.addActionButton(o,'<svg viewBox="0 0 24 24"><path d="M9 20.42l-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42z"/></svg>',"render","Save and close"),this.addActionButton(o,'<svg viewBox="0 0 24 24"><path d="M20 6.91L17.09 4 12 9.09 6.91 4 4 6.91 9.09 12 4 17.09 6.91 20 12 14.91 17.09 20 20 17.09 14.91 12 20 6.91z"/></svg>',"close","Close"),this.markerjsContainer.appendChild(this.uiContainer),this.setSelectMode(),this.setCurrentMarker(),this.adjustLayout()},t.prototype.addButtonClickListener=function(t){this.buttonClickListeners.push(t)},t.prototype.removeButtonClickListener=function(t){this.buttonClickListeners.indexOf(t)>-1&&this.buttonClickListeners.splice(this.buttonClickListeners.indexOf(t),1)},t.prototype.setSelectMode=function(){this.resetButtonStyles(),this.setActiveButton(this.buttons[0])},t.prototype.adjustLayout=function(){if(this.markerButtons&&this.markerButtons.length>0){var t=Math.floor(this.markerButtonBlock.clientWidth/this.uiStyleSettings.toolbarHeight)-1;this.markerButtonBlock.innerHTML="",this.markerButtonOverflowBlock.innerHTML="";for(var e=0;e<this.markerButtons.length;e++)e<t||e===t&&this.markerButtons.length-1===t?this.markerButtonBlock.appendChild(this.markerButtons[e]):(e===t&&this.markerButtonBlock.appendChild(this.overflowButton),this.markerButtonOverflowBlock.appendChild(this.markerButtons[e]))}},t.prototype.overflowButtonClicked=function(){"none"!==this.markerButtonOverflowBlock.style.display?(this.markerButtonOverflowBlock.className=this.markerButtonOverflowBlock.className.replace(this.styles.fadeInAnimationClassName,""),this.markerButtonOverflowBlock.style.display="none"):(this.markerButtonOverflowBlock.className+=" "+this.styles.fadeInAnimationClassName,this.markerButtonOverflowBlock.style.top=this.uiContainer.offsetTop+this.overflowButton.offsetHeight+"px",this.markerButtonOverflowBlock.style.right=this.uiContainer.offsetWidth-this.overflowButton.offsetLeft-this.overflowButton.offsetWidth+2*this.uiContainer.offsetLeft+"px",this.markerButtonOverflowBlock.style.display="inline-block")},t.prototype.resetButtonStyles=function(){var t=this;this.buttons.forEach((function(e){e.className=e.className.replace(t.uiStyleSettings.toolbarButtonStyleColorsClassName?t.uiStyleSettings.toolbarButtonStyleColorsClassName:t.toolbarButtonStyleColorsClass.name,"").trim(),e.className=e.className.replace(t.uiStyleSettings.toolbarActiveButtonStyleColorsClassName?t.uiStyleSettings.toolbarActiveButtonStyleColorsClassName:t.toolbarActiveButtonStyleColorsClass.name,"").trim(),e.className+=" "+(t.uiStyleSettings.toolbarButtonStyleColorsClassName?t.uiStyleSettings.toolbarButtonStyleColorsClassName:t.toolbarButtonStyleColorsClass.name)}))},t.prototype.addActionButton=function(t,e,i,o){var s=this,r=document.createElement("div");switch(r.className=""+this.toolbarButtonStyleClass.name,r.innerHTML=e,r.setAttribute("role","button"),r.setAttribute("data-action",i),r.title=o,r.setAttribute("aria-label",o),r.addEventListener("click",(function(){s.actionToolbarButtonClicked(r,i)})),i){case"select":r.style.fill=this.uiStyleSettings.selectButtonColor;break;case"delete":case"clear":r.style.fill=this.uiStyleSettings.deleteButtonColor;break;case"undo":case"redo":r.style.fill=this.uiStyleSettings.selectButtonColor;break;case"render":r.style.fill=this.uiStyleSettings.okButtonColor;break;case"close":r.style.fill=this.uiStyleSettings.closeButtonColor}t.appendChild(r),this.buttons.push(r)},t.prototype.addStyles=function(){this.toolbarStyleClass=this.styles.addClass(new d("toolbar","\n      width: 100%;\n      flex-shrink: 0;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;      \n      height: "+this.uiStyleSettings.toolbarHeight+"px;\n      box-sizing: content-box;\n      "+("inline"===this.displayMode?"border-top-left-radius: "+Math.round(this.uiStyleSettings.toolbarHeight/10)+"px;":"")+"\n      "+("inline"===this.displayMode?"border-top-right-radius: "+Math.round(this.uiStyleSettings.toolbarHeight/10)+"px;":"")+"\n      overflow: hidden;\n    ")),this.toolbarStyleColorsClass=this.styles.addClass(new d("toolbar_colors","\n      background-color: "+this.uiStyleSettings.toolbarBackgroundColor+";\n      box-shadow: 0px 3px rgba(33, 33, 33, 0.1);\n    ")),this.toolbarBlockStyleClass=this.styles.addClass(new d("toolbar-block","\n        display: inline-block;\n        box-sizing: content-box;\n    ")),this.toolbarOverflowBlockStyleClass=this.styles.addClass(new d("toolbar-overflow-block","\n        position: absolute;\n        top: "+this.uiStyleSettings.toolbarHeight+"px;\n        max-width: "+2*this.uiStyleSettings.toolbarHeight+"px;\n        z-index: 10;\n        box-sizing: content-box;\n      ")),this.toolbarOverflowBlockStyleColorsClass=this.styles.addClass(new d("toolbar-overflow-block_colors","\n        background-color: "+this.uiStyleSettings.toolbarBackgroundColor+";\n      "));var t=this.uiStyleSettings.toolbarHeight/4;this.toolbarButtonStyleClass=this.styles.addClass(new d("toolbar_button","\n      display: inline-block;\n      width: "+(this.uiStyleSettings.toolbarHeight-2*t)+"px;\n      height: "+(this.uiStyleSettings.toolbarHeight-2*t)+"px;\n      padding: "+t+"px;\n      box-sizing: content-box;\n    ")),this.toolbarButtonStyleColorsClass=this.styles.addClass(new d("toolbar_button_colors","\n      fill: "+this.uiStyleSettings.toolbarColor+";\n    ")),this.toolbarActiveButtonStyleColorsClass=this.styles.addClass(new d("toolbar_active_button","\n      fill: "+this.uiStyleSettings.toolbarColor+";\n      background-color: "+this.uiStyleSettings.toolbarBackgroundHoverColor+"\n    ")),this.styles.addRule(new c("."+this.toolbarButtonStyleClass.name+" svg","\n      height: "+this.uiStyleSettings.toolbarHeight/2+"px;\n    ")),this.styles.addRule(new c("."+this.toolbarButtonStyleColorsClass.name+":hover","\n        background-color: "+this.uiStyleSettings.toolbarBackgroundHoverColor+"\n    "))},t.prototype.markerToolbarButtonClicked=function(t,e){this.setActiveButton(t),this.buttonClickListeners&&this.buttonClickListeners.length>0&&this.buttonClickListeners.forEach((function(t){return t("marker",e)})),this.markerButtonOverflowBlock.style.display="none"},t.prototype.actionToolbarButtonClicked=function(t,e){this.buttonClickListeners&&this.buttonClickListeners.length>0&&this.buttonClickListeners.forEach((function(t){return t("action",e)})),this.markerButtonOverflowBlock.style.display="none",this.setActiveButton(this.buttons[0])},t.prototype.setActiveButton=function(t){this.resetButtonStyles(),t.className=t.className.replace(this.uiStyleSettings.toolbarButtonStyleColorsClassName?this.uiStyleSettings.toolbarButtonStyleColorsClassName:this.toolbarButtonStyleColorsClass.name,"").trim(),t.className+=" "+(this.uiStyleSettings.toolbarActiveButtonStyleColorsClassName?this.uiStyleSettings.toolbarActiveButtonStyleColorsClassName:this.toolbarActiveButtonStyleColorsClass.name)},t.prototype.setActiveMarkerButton=function(t){var e=this.markerButtons.find((function(e){return e.getAttribute("data-type-name")===t}));e&&this.setActiveButton(e)},t.prototype.setCurrentMarker=function(t){var e=this;this.currentMarker=t,this.buttons.filter((function(t){return/delete|notes/.test(t.getAttribute("data-action"))})).forEach((function(t){void 0===e.currentMarker?(t.style.fillOpacity="0.4",t.style.pointerEvents="none"):(t.style.fillOpacity="1",t.style.pointerEvents="all")}))},t}(),y=function(){function t(t,e,i,o){this.panels=[],this.panelButtons=[],this.markerjsContainer=t,this.displayMode=e,this.uiStyleSettings=i,this.styles=o,this.panelButtonClick=this.panelButtonClick.bind(this),this.addStyles()}return t.prototype.addStyles=function(){var t;this.toolboxStyleClass=this.styles.addClass(new d("toolbox","\n      width: 100%;\n      flex-shrink: 0;\n      display: flex;\n      flex-direction: column;\n      font-family: sans-serif;\n      "+("popup"===this.displayMode?"height:"+2.5*this.uiStyleSettings.toolbarHeight+"px;":"")+"\n      box-sizing: content-box;\n      "+("popup"===this.displayMode?"background-color: "+this.uiStyleSettings.canvasBackgroundColor+";":"")+"\n      "+("inline"===this.displayMode?"border-bottom-left-radius: "+Math.round(this.uiStyleSettings.toolbarHeight/10)+"px;":"")+"\n      "+("inline"===this.displayMode?"border-bottom-right-radius: "+Math.round(this.uiStyleSettings.toolbarHeight/10)+"px;":"")+"\n      overflow: hidden;\n    ")),this.toolboxStyleColorsClass=this.styles.addClass(new d("toolbox_colors","\n      color: "+this.uiStyleSettings.toolboxColor+";\n    "));var e=this.uiStyleSettings.toolbarHeight/4;this.toolboxButtonRowStyleClass=this.styles.addClass(new d("toolbox-button-row","\n      display: flex;\n      cursor: default;\n      box-sizing: content-box;\n    ")),this.toolboxButtonRowStyleColorsClass=this.styles.addClass(new d("toolbox-button-row_colors","\n      background-color: "+this.uiStyleSettings.toolbarBackgroundColor+";\n    ")),this.toolboxPanelRowStyleClass=this.styles.addClass(new d("toolbox-panel-row","\n      display: flex;\n      "+("inline"===this.displayMode?"position: absolute;":"")+"\n      "+("inline"===this.displayMode?"bottom: "+this.uiStyleSettings.toolbarHeight+"px;":"")+"\n      cursor: default;\n      height: "+1.5*this.uiStyleSettings.toolbarHeight+"px;\n      "+("inline"===this.displayMode?"width: 100%;":"")+"\n      box-sizing: content-box;\n    ")),this.toolboxPanelRowStyleColorsClass=this.styles.addClass(new d("toolbox-panel-row_colors","\n      background-color: "+(null!==(t=this.uiStyleSettings.toolboxBackgroundColor)&&void 0!==t?t:this.uiStyleSettings.toolbarBackgroundHoverColor)+";\n    ")),this.toolboxButtonStyleClass=this.styles.addClass(new d("toolbox_button","\n      display: inline-block;\n      width: "+(this.uiStyleSettings.toolbarHeight-2*e)+"px;\n      height: "+(this.uiStyleSettings.toolbarHeight-2*e)+"px;\n      padding: "+e+"px;\n      box-sizing: content-box;\n    ")),this.toolboxButtonStyleColorsClass=this.styles.addClass(new d("toolbox-button_colors","\n      fill: "+this.uiStyleSettings.toolbarColor+";\n    ")),this.toolboxActiveButtonStyleColorsClass=this.styles.addClass(new d("toolbox-active-button_colors","\n      background-color: "+this.uiStyleSettings.toolbarBackgroundHoverColor+";\n      fill: "+this.uiStyleSettings.toolbarColor+";\n    ")),this.styles.addRule(new c("."+this.toolboxButtonStyleColorsClass.name+":hover","\n        background-color: "+this.uiStyleSettings.toolbarBackgroundHoverColor+"\n    ")),this.styles.addRule(new c("."+this.toolboxButtonStyleClass.name+" svg","\n      height: "+this.uiStyleSettings.toolbarHeight/2+"px;\n    ")),this.styles.addRule(new c("."+this.toolboxPanelRowStyleClass.name+" > div","\n        scrollbar-width: thin;\n        ")),this.styles.addRule(new c("."+this.toolboxPanelRowStyleClass.name+" > div::-webkit-scrollbar","\n      height: 10px;\n      width: 10px;\n    ")),this.styles.addRule(new c("."+this.toolboxPanelRowStyleClass.name+" > div::-webkit-scrollbar-track","\n        background-color: transparent;\n        ")),this.styles.addRule(new c("."+this.toolboxPanelRowStyleClass.name+" > div::-webkit-scrollbar-thumb","\n        background-color: #444;\n        border-radius: 20px;\n        border: 2px solid #aaa;\n        "))},t.prototype.show=function(t){var e;this.uiContainer=document.createElement("div"),this.uiContainer.style.visibility=t,this.uiContainer.className=this.toolboxStyleClass.name+" "+(null!==(e=this.uiStyleSettings.toolboxStyleColorsClassName)&&void 0!==e?e:this.toolboxStyleColorsClass.name),this.markerjsContainer.appendChild(this.uiContainer)},t.prototype.setPanelButtons=function(t){var e,i,o=this;this.panels=t,void 0!==this.uiContainer&&(this.uiContainer.innerHTML="",this.panelRow=document.createElement("div"),this.panelRow.className=this.toolboxPanelRowStyleClass.name+" "+(null!==(e=this.uiStyleSettings.toolboxPanelRowStyleColorsClassName)&&void 0!==e?e:this.toolboxPanelRowStyleColorsClass.name),this.uiContainer.appendChild(this.panelRow),this.buttonRow=document.createElement("div"),this.buttonRow.className=this.toolboxButtonRowStyleClass.name+" "+(null!==(i=this.uiStyleSettings.toolboxButtonRowStyleColorsClassName)&&void 0!==i?i:this.toolboxButtonRowStyleColorsClass.name)+" ",this.uiContainer.appendChild(this.buttonRow),this.panelButtons.splice(0),this.panels.forEach((function(t){var e;t.uiStyleSettings=o.uiStyleSettings;var i=document.createElement("div");i.className=o.toolboxButtonStyleClass.name+" "+(null!==(e=o.uiStyleSettings.toolboxButtonStyleColorsClassName)&&void 0!==e?e:o.toolboxButtonStyleColorsClass.name),i.innerHTML=t.icon,i.title=t.title,i.setAttribute("role","button"),i.setAttribute("aria-label",t.title),t.id&&i.setAttribute("data-action",t.id),i.addEventListener("click",(function(){o.panelButtonClick(t)})),o.panelButtons.push(i),o.buttonRow.appendChild(i)})),"inline"===this.displayMode?this.panelRow.style.display="none":this.panelRow.style.visibility="hidden")},t.prototype.panelButtonClick=function(t){var e=this,i=-1;if(t!==this.activePanel){i=this.panels.indexOf(t),this.panelRow.innerHTML="";var o=t.getUi();o.style.margin=this.uiStyleSettings.toolbarHeight/4+"px",this.panelRow.appendChild(o),this.panelRow.style.display="flex",this.panelRow.style.visibility="visible",this.panelRow.className=this.panelRow.className.replace(this.styles.fadeOutAnimationClassName,""),this.panelRow.className+=" "+this.styles.fadeInAnimationClassName,this.activePanel=t}else this.activePanel=void 0,this.panelRow.className=this.panelRow.className.replace(this.styles.fadeInAnimationClassName,""),this.panelRow.className+=" "+this.styles.fadeOutAnimationClassName,setTimeout((function(){"inline"===e.displayMode?e.panelRow.style.display="none":e.panelRow.style.visibility="hidden"}),200);this.panelButtons.forEach((function(t,o){var s,r;t.className=e.toolboxButtonStyleClass.name+" "+(o===i?""+(null!==(s=e.uiStyleSettings.toolboxActiveButtonStyleColorsClassName)&&void 0!==s?s:e.toolboxActiveButtonStyleColorsClass.name):""+(null!==(r=e.uiStyleSettings.toolboxButtonStyleColorsClassName)&&void 0!==r?r:e.toolboxButtonStyleColorsClass.name))}))},t}(),g=function(){function t(t,e,i){this.title=t,this.icon=e,this._id=i}return Object.defineProperty(t.prototype,"id",{get:function(){return this._id},enumerable:!1,configurable:!0}),t}(),f=function(t){function e(e,i,o,s,r){var n=t.call(this,e,s||'<svg viewBox="0 0 24 24"><path d="M17.5 12a1.5 1.5 0 01-1.5-1.5A1.5 1.5 0 0117.5 9a1.5 1.5 0 011.5 1.5 1.5 1.5 0 01-1.5 1.5m-3-4A1.5 1.5 0 0113 6.5 1.5 1.5 0 0114.5 5 1.5 1.5 0 0116 6.5 1.5 1.5 0 0114.5 8m-5 0A1.5 1.5 0 018 6.5 1.5 1.5 0 019.5 5 1.5 1.5 0 0111 6.5 1.5 1.5 0 019.5 8m-3 4A1.5 1.5 0 015 10.5 1.5 1.5 0 016.5 9 1.5 1.5 0 018 10.5 1.5 1.5 0 016.5 12M12 3a9 9 0 00-9 9 9 9 0 009 9 1.5 1.5 0 001.5-1.5c0-.39-.15-.74-.39-1-.23-.27-.38-.62-.38-1a1.5 1.5 0 011.5-1.5H16a5 5 0 005-5c0-4.42-4.03-8-9-8z"/></svg>',r||"color-picker-panel")||this;return n.colors=[],n.addTransparent=!1,n.colorBoxes=[],n.colors=i,n.currentColor=o,n.setCurrentColor=n.setCurrentColor.bind(n),n.getColorBox=n.getColorBox.bind(n),n}return i(e,t),e.prototype.getUi=function(){var t=this,e=document.createElement("div");return e.style.overflow="hidden",e.style.overflowX="auto",e.style.whiteSpace="nowrap",this.colors.forEach((function(i){var o=t.getColorBox(i);e.appendChild(o),t.colorBoxes.push(o)})),e},e.prototype.getColorBox=function(t){var e=this,i=this.uiStyleSettings.toolbarHeight/4,o=this.uiStyleSettings.toolbarHeight-i,s=document.createElement("div");s.style.display="inline-block",s.style.boxSizing="content-box",s.style.width=o-2+"px",s.style.height=o-2+"px",s.style.padding="1px",s.style.marginRight="2px",s.style.marginBottom="2px",s.style.borderWidth="2px",s.style.borderStyle="solid",s.style.borderRadius=(o+2)/2+"px",s.style.borderColor=t===this.currentColor?this.uiStyleSettings.toolboxAccentColor:"transparent",s.addEventListener("click",(function(){e.setCurrentColor(t,s)}));var r=document.createElement("div");return r.style.display="inline-block",r.style.width=o-2+"px",r.style.height=o-2+"px",r.style.backgroundColor=t,r.style.borderRadius=o/2+"px","transparent"===t&&(r.style.fill=this.uiStyleSettings.toolboxAccentColor,r.innerHTML='<svg viewBox="0 0 24 24">\n        <path d="M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z" />\n      </svg>'),s.appendChild(r),s},e.prototype.setCurrentColor=function(t,e){var i=this;this.currentColor=t,this.colorBoxes.forEach((function(t){t.style.borderColor=t===e?i.uiStyleSettings.toolboxAccentColor:"transparent"})),this.onColorChanged&&this.onColorChanged(t)},e}(g),v=function(){function t(t,e,i){this._state="new",this._isSelected=!1,this._container=t,this._overlayContainer=e,this.globalSettings=i,this.stateChanged=this.stateChanged.bind(this),this.colorChanged=this.colorChanged.bind(this),this.fillColorChanged=this.fillColorChanged.bind(this)}return Object.defineProperty(t.prototype,"typeName",{get:function(){return Object.getPrototypeOf(this).constructor.typeName},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"container",{get:function(){return this._container},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"overlayContainer",{get:function(){return this._overlayContainer},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"state",{get:function(){return this._state},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"toolboxPanels",{get:function(){return[]},enumerable:!1,configurable:!0}),t.prototype.ownsTarget=function(t){return!1},Object.defineProperty(t.prototype,"isSelected",{get:function(){return this._isSelected},enumerable:!1,configurable:!0}),t.prototype.select=function(){this.container.style.cursor="move",this._isSelected=!0,this.manipulationStartState=this.getState()},t.prototype.deselect=function(){this.container.style.cursor="default",this._isSelected=!1,this.stateChanged()},t.prototype.pointerDown=function(t,e){},t.prototype.dblClick=function(t,e){},t.prototype.manipulate=function(t){},t.prototype.pointerUp=function(t){this.stateChanged()},t.prototype.dispose=function(){},t.prototype.addMarkerVisualToContainer=function(t){this.container.childNodes.length>0?this.container.insertBefore(t,this.container.childNodes[0]):this.container.appendChild(t)},t.prototype.getState=function(){return{typeName:t.typeName,state:this.state,notes:this.notes}},t.prototype.restoreState=function(t){this._state=t.state,this.notes=t.notes},t.prototype.scale=function(t,e){},t.prototype.colorChanged=function(t){this.onColorChanged&&this.onColorChanged(t),this.stateChanged()},t.prototype.fillColorChanged=function(t){this.onFillColorChanged&&this.onFillColorChanged(t),this.stateChanged()},t.prototype.stateChanged=function(){if(this.onStateChanged&&"creating"!==this.state&&"new"!==this.state){var t=this.getState();void 0!==this.manipulationStartState&&(this.manipulationStartState.state="select"),t.state="select",JSON.stringify(this.manipulationStartState)!=JSON.stringify(t)&&this.onStateChanged(this)}},t.typeName="MarkerBase",t}(),m=function(){function t(){this.findGripByVisual=this.findGripByVisual.bind(this)}return t.prototype.findGripByVisual=function(t){return this.topLeft.ownsTarget(t)?this.topLeft:this.topCenter.ownsTarget(t)?this.topCenter:this.topRight.ownsTarget(t)?this.topRight:this.centerLeft.ownsTarget(t)?this.centerLeft:this.centerRight.ownsTarget(t)?this.centerRight:this.bottomLeft.ownsTarget(t)?this.bottomLeft:this.bottomCenter.ownsTarget(t)?this.bottomCenter:this.bottomRight.ownsTarget(t)?this.bottomRight:void 0},t}(),C=function(){function t(){this.GRIP_SIZE=10,this.visual=n.createGroup(),this.visual.appendChild(n.createCircle(1.5*this.GRIP_SIZE,[["fill","transparent"]])),this.visual.appendChild(n.createCircle(this.GRIP_SIZE,[["fill","#cccccc"],["fill-opacity","0.7"],["stroke","#333333"],["stroke-width","2"],["stroke-opacity","0.7"]]))}return t.prototype.ownsTarget=function(t){return t===this.visual||t===this.visual.childNodes[0]||t===this.visual.childNodes[1]},t}(),b=function(){function t(){}return t.toITransformMatrix=function(t){return{a:t.a,b:t.b,c:t.c,d:t.d,e:t.e,f:t.f}},t.toSVGMatrix=function(t,e){return t.a=e.a,t.b=e.b,t.c=e.c,t.d=e.d,t.e=e.e,t.f=e.f,t},t}(),x=function(t){function e(e,i,o){var s=t.call(this,e,i,o)||this;return s.left=0,s.top=0,s.width=0,s.height=0,s.defaultSize={x:50,y:20},s.offsetX=0,s.offsetY=0,s.rotationAngle=0,s.CB_DISTANCE=10,s._suppressMarkerCreateEvent=!1,s.container.transform.baseVal.appendItem(n.createTransform()),s.setupControlBox(),s}return i(e,t),Object.defineProperty(e.prototype,"centerX",{get:function(){return this.left+this.width/2},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"centerY",{get:function(){return this.top+this.height/2},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"visual",{get:function(){return this._visual},set:function(t){this._visual=t;var e=n.createTransform();this._visual.transform.baseVal.appendItem(e)},enumerable:!1,configurable:!0}),e.prototype.ownsTarget=function(e){return!!t.prototype.ownsTarget.call(this,e)||!!(void 0!==this.controlGrips.findGripByVisual(e)||void 0!==this.rotatorGrip&&this.rotatorGrip.ownsTarget(e))},e.prototype.pointerDown=function(e,i){t.prototype.pointerDown.call(this,e,i),"new"===this.state&&(this.left=e.x,this.top=e.y),this.manipulationStartLeft=this.left,this.manipulationStartTop=this.top,this.manipulationStartWidth=this.width,this.manipulationStartHeight=this.height;var o=this.unrotatePoint(e);if(this.manipulationStartX=o.x,this.manipulationStartY=o.y,this.offsetX=o.x-this.left,this.offsetY=o.y-this.top,"new"!==this.state)if(this.select(),this.activeGrip=this.controlGrips.findGripByVisual(i),void 0!==this.activeGrip)this._state="resize";else if(void 0!==this.rotatorGrip&&this.rotatorGrip.ownsTarget(i)){this.activeGrip=this.rotatorGrip;var s=this.rotatePoint({x:this.centerX,y:this.centerY});this.left=s.x-this.width/2,this.top=s.y-this.height/2,this.moveVisual({x:this.left,y:this.top});var r=this.container.transform.baseVal.getItem(0);r.setRotate(this.rotationAngle,this.centerX,this.centerY),this.container.transform.baseVal.replaceItem(r,0),this.adjustControlBox(),this._state="rotate"}else this._state="move"},e.prototype.pointerUp=function(e){var i=this.state;t.prototype.pointerUp.call(this,e),"creating"===this.state&&this.width<10&&this.height<10?(this.width=this.defaultSize.x,this.height=this.defaultSize.y):this.manipulate(e),this._state="select","creating"===i&&this.onMarkerCreated&&!1===this._suppressMarkerCreateEvent&&this.onMarkerCreated(this)},e.prototype.moveVisual=function(t){this.visual.style.transform="translate("+t.x+"px, "+t.y+"px)"},e.prototype.manipulate=function(t){var e=this.unrotatePoint(t);"creating"===this.state?this.resize(t):"move"===this.state?(this.left=this.manipulationStartLeft+(e.x-this.manipulationStartLeft)-this.offsetX,this.top=this.manipulationStartTop+(e.y-this.manipulationStartTop)-this.offsetY,this.moveVisual({x:this.left,y:this.top}),this.adjustControlBox()):"resize"===this.state?this.resize(e):"rotate"===this.state&&this.rotate(t)},e.prototype.resize=function(t){var e=this.manipulationStartLeft,i=this.manipulationStartWidth,o=this.manipulationStartTop,s=this.manipulationStartHeight;switch(this.activeGrip){case this.controlGrips.bottomLeft:case this.controlGrips.centerLeft:case this.controlGrips.topLeft:e=this.manipulationStartLeft+t.x-this.manipulationStartX,i=this.manipulationStartWidth+this.manipulationStartLeft-e;break;case this.controlGrips.bottomRight:case this.controlGrips.centerRight:case this.controlGrips.topRight:case void 0:i=this.manipulationStartWidth+t.x-this.manipulationStartX}switch(this.activeGrip){case this.controlGrips.topCenter:case this.controlGrips.topLeft:case this.controlGrips.topRight:o=this.manipulationStartTop+t.y-this.manipulationStartY,s=this.manipulationStartHeight+this.manipulationStartTop-o;break;case this.controlGrips.bottomCenter:case this.controlGrips.bottomLeft:case this.controlGrips.bottomRight:case void 0:s=this.manipulationStartHeight+t.y-this.manipulationStartY}i>=0?(this.left=e,this.width=i):(this.left=e+i,this.width=-i),s>=0?(this.top=o,this.height=s):(this.top=o+s,this.height=-s),this.setSize()},e.prototype.setSize=function(){this.moveVisual({x:this.left,y:this.top}),this.adjustControlBox()},e.prototype.rotate=function(t){if(Math.abs(t.x-this.centerX)>.1){var e=Math.sign(t.x-this.centerX);this.rotationAngle=180*Math.atan((t.y-this.centerY)/(t.x-this.centerX))/Math.PI+90*e,this.applyRotation()}},e.prototype.applyRotation=function(){var t=this.container.transform.baseVal.getItem(0);t.setRotate(this.rotationAngle,this.centerX,this.centerY),this.container.transform.baseVal.replaceItem(t,0)},e.prototype.rotatePoint=function(t){if(0===this.rotationAngle)return t;var e=this.container.getCTM(),i=n.createPoint(t.x,t.y);return{x:(i=i.matrixTransform(e)).x,y:i.y}},e.prototype.unrotatePoint=function(t){if(0===this.rotationAngle)return t;var e=this.container.getCTM();e=e.inverse();var i=n.createPoint(t.x,t.y);return{x:(i=i.matrixTransform(e)).x,y:i.y}},e.prototype.select=function(){t.prototype.select.call(this),this.adjustControlBox(),this.controlBox.style.display=""},e.prototype.deselect=function(){t.prototype.deselect.call(this),this.controlBox.style.display="none"},e.prototype.setupControlBox=function(){this.controlBox=n.createGroup();var t=n.createTransform();t.setTranslate(-this.CB_DISTANCE/2,-this.CB_DISTANCE/2),this.controlBox.transform.baseVal.appendItem(t),this.container.appendChild(this.controlBox),this.controlRect=n.createRect(this.width+this.CB_DISTANCE,this.height+this.CB_DISTANCE,[["stroke","black"],["stroke-width","1"],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"],["fill","transparent"],["pointer-events","none"]]),this.controlBox.appendChild(this.controlRect),!0!==this.globalSettings.disableRotation&&(this.rotatorGripLine=n.createLine((this.width+2*this.CB_DISTANCE)/2,this.top-this.CB_DISTANCE,(this.width+2*this.CB_DISTANCE)/2,this.top-3*this.CB_DISTANCE,[["stroke","black"],["stroke-width","1"],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"]]),this.controlBox.appendChild(this.rotatorGripLine)),this.controlGrips=new m,this.addControlGrips(),this.controlBox.style.display="none"},e.prototype.adjustControlBox=function(){var t=this.controlBox.transform.baseVal.getItem(0);t.setTranslate(this.left-this.CB_DISTANCE/2,this.top-this.CB_DISTANCE/2),this.controlBox.transform.baseVal.replaceItem(t,0),this.controlRect.setAttribute("width",(this.width+this.CB_DISTANCE).toString()),this.controlRect.setAttribute("height",(this.height+this.CB_DISTANCE).toString()),void 0!==this.rotatorGripLine&&(this.rotatorGripLine.setAttribute("x1",((this.width+this.CB_DISTANCE)/2).toString()),this.rotatorGripLine.setAttribute("y1",(-this.CB_DISTANCE/2).toString()),this.rotatorGripLine.setAttribute("x2",((this.width+this.CB_DISTANCE)/2).toString()),this.rotatorGripLine.setAttribute("y2",(3*-this.CB_DISTANCE).toString())),this.positionGrips()},e.prototype.addControlGrips=function(){this.controlGrips.topLeft=this.createGrip(),this.controlGrips.topCenter=this.createGrip(),this.controlGrips.topRight=this.createGrip(),this.controlGrips.centerLeft=this.createGrip(),this.controlGrips.centerRight=this.createGrip(),this.controlGrips.bottomLeft=this.createGrip(),this.controlGrips.bottomCenter=this.createGrip(),this.controlGrips.bottomRight=this.createGrip(),!0!==this.globalSettings.disableRotation&&(this.rotatorGrip=this.createGrip()),this.positionGrips()},e.prototype.createGrip=function(){var t=new C;return t.visual.transform.baseVal.appendItem(n.createTransform()),this.controlBox.appendChild(t.visual),t},e.prototype.positionGrips=function(){var t=this.controlGrips.topLeft.GRIP_SIZE,e=-t/2,i=e,o=(this.width+this.CB_DISTANCE)/2-t/2,s=(this.height+this.CB_DISTANCE)/2-t/2,r=this.height+this.CB_DISTANCE-t/2,n=this.width+this.CB_DISTANCE-t/2;this.positionGrip(this.controlGrips.topLeft.visual,e,i),this.positionGrip(this.controlGrips.topCenter.visual,o,i),this.positionGrip(this.controlGrips.topRight.visual,n,i),this.positionGrip(this.controlGrips.centerLeft.visual,e,s),this.positionGrip(this.controlGrips.centerRight.visual,n,s),this.positionGrip(this.controlGrips.bottomLeft.visual,e,r),this.positionGrip(this.controlGrips.bottomCenter.visual,o,r),this.positionGrip(this.controlGrips.bottomRight.visual,n,r),void 0!==this.rotatorGrip&&this.positionGrip(this.rotatorGrip.visual,o,i-3*this.CB_DISTANCE)},e.prototype.positionGrip=function(t,e,i){var o=t.transform.baseVal.getItem(0);o.setTranslate(e,i),t.transform.baseVal.replaceItem(o,0)},e.prototype.hideControlBox=function(){this.controlBox.style.display="none"},e.prototype.showControlBox=function(){this.controlBox.style.display=""},e.prototype.getState=function(){return Object.assign({left:this.left,top:this.top,width:this.width,height:this.height,rotationAngle:this.rotationAngle,visualTransformMatrix:b.toITransformMatrix(this.visual.transform.baseVal.getItem(0).matrix),containerTransformMatrix:b.toITransformMatrix(this.container.transform.baseVal.getItem(0).matrix)},t.prototype.getState.call(this))},e.prototype.restoreState=function(e){t.prototype.restoreState.call(this,e);var i=e;this.left=i.left,this.top=i.top,this.width=i.width,this.height=i.height,this.rotationAngle=i.rotationAngle,this.visual.transform.baseVal.getItem(0).setMatrix(b.toSVGMatrix(this.visual.transform.baseVal.getItem(0).matrix,i.visualTransformMatrix)),this.container.transform.baseVal.getItem(0).setMatrix(b.toSVGMatrix(this.container.transform.baseVal.getItem(0).matrix,i.containerTransformMatrix))},e.prototype.scale=function(e,i){t.prototype.scale.call(this,e,i);var o=this.rotatePoint({x:this.left,y:this.top}),s=this.unrotatePoint({x:o.x*e,y:o.y*i});this.left=s.x,this.top=s.y,this.width=this.width*e,this.height=this.height*i,this.adjustControlBox()},e}(v),S=function(t){function e(e,i,o){var s=t.call(this,e,i,o)||this;return s.fillColor="transparent",s.strokeColor="transparent",s.strokeWidth=0,s.strokeDasharray="",s.opacity=1,s.setStrokeColor=s.setStrokeColor.bind(s),s.setFillColor=s.setFillColor.bind(s),s.setStrokeWidth=s.setStrokeWidth.bind(s),s.setStrokeDasharray=s.setStrokeDasharray.bind(s),s.createVisual=s.createVisual.bind(s),s}return i(e,t),e.prototype.ownsTarget=function(e){return!(!t.prototype.ownsTarget.call(this,e)&&e!==this.visual)},e.prototype.createVisual=function(){this.visual=n.createRect(1,1,[["fill",this.fillColor],["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-dasharray",this.strokeDasharray],["opacity",this.opacity.toString()]]),this.addMarkerVisualToContainer(this.visual)},e.prototype.pointerDown=function(e,i){t.prototype.pointerDown.call(this,e,i),"new"===this.state&&(this.createVisual(),this.moveVisual(e),this._state="creating")},e.prototype.manipulate=function(e){t.prototype.manipulate.call(this,e)},e.prototype.resize=function(e){t.prototype.resize.call(this,e),this.setSize()},e.prototype.setSize=function(){t.prototype.setSize.call(this),n.setAttributes(this.visual,[["width",this.width.toString()],["height",this.height.toString()]])},e.prototype.pointerUp=function(e){t.prototype.pointerUp.call(this,e),this.setSize()},e.prototype.setStrokeColor=function(t){this.strokeColor=t,this.visual&&n.setAttributes(this.visual,[["stroke",this.strokeColor]]),this.colorChanged(t),this.stateChanged()},e.prototype.setFillColor=function(t){this.fillColor=t,this.visual&&n.setAttributes(this.visual,[["fill",this.fillColor]]),this.stateChanged()},e.prototype.setStrokeWidth=function(t){this.strokeWidth=t,this.visual&&n.setAttributes(this.visual,[["stroke-width",this.strokeWidth.toString()]]),this.stateChanged()},e.prototype.setStrokeDasharray=function(t){this.strokeDasharray=t,this.visual&&n.setAttributes(this.visual,[["stroke-dasharray",this.strokeDasharray]]),this.stateChanged()},e.prototype.getState=function(){return Object.assign({fillColor:this.fillColor,strokeColor:this.strokeColor,strokeWidth:this.strokeWidth,strokeDasharray:this.strokeDasharray,opacity:this.opacity},t.prototype.getState.call(this))},e.prototype.restoreState=function(e){var i=e;this.fillColor=i.fillColor,this.strokeColor=i.strokeColor,this.strokeWidth=i.strokeWidth,this.strokeDasharray=i.strokeDasharray,this.opacity=i.opacity,this.createVisual(),t.prototype.restoreState.call(this,e),this.setSize()},e.prototype.scale=function(e,i){t.prototype.scale.call(this,e,i),this.setSize()},e.title="Rectangle marker",e}(x),k=function(t){function e(e,i,o,s,r){var n=t.call(this,e,s||'<svg viewBox="0 0 24 24"><path d="M3 17h18v-2H3v2m0 3h18v-1H3v1m0-7h18v-3H3v3m0-9v4h18V4H3z"/></svg>',r||"line-width-panel")||this;return n.widths=[],n.widthBoxes=[],n.widths=i,n.currentWidth=o,n.setCurrentWidth=n.setCurrentWidth.bind(n),n}return i(e,t),e.prototype.getUi=function(){var t=this,e=document.createElement("div");return e.style.display="flex",e.style.overflow="hidden",e.style.flexGrow="2",this.widths.forEach((function(i){var o=document.createElement("div");o.style.display="flex",o.style.flexGrow="2",o.style.alignItems="center",o.style.justifyContent="space-between",o.style.padding="5px",o.style.borderWidth="2px",o.style.borderStyle="solid",o.style.borderColor=i===t.currentWidth?t.uiStyleSettings.toolboxAccentColor:"transparent",o.addEventListener("click",(function(){t.setCurrentWidth(i,o)})),e.appendChild(o);var s=document.createElement("div");s.innerText=i.toString(),s.style.marginRight="5px",o.appendChild(s);var r=document.createElement("div");r.style.minHeight="20px",r.style.flexGrow="2",r.style.display="flex",r.style.alignItems="center";var n=document.createElement("hr");n.style.minWidth="20px",n.style.border="0px",n.style.borderTop=i+"px solid "+t.uiStyleSettings.toolboxColor,n.style.flexGrow="2",r.appendChild(n),o.appendChild(r),t.widthBoxes.push(o)})),e},e.prototype.setCurrentWidth=funct