@markerjs/markerjs3 3.0.0-alpha.1 → 3.0.0-alpha.3

package/markerjs3.js

@@ -1,2 +1,2 @@
-class t{static createDefs(){return document.createElementNS("http://www.w3.org/2000/svg","defs")}static setAttributes(t,i){for(const[e,s]of i)t.setAttribute(e,s)}static createRect(i,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","rect");return r.setAttribute("width",i.toString()),r.setAttribute("height",e.toString()),s&&t.setAttributes(r,s),r}static createLine(i,e,s,r,a){const o=document.createElementNS("http://www.w3.org/2000/svg","line");return o.setAttribute("x1",i.toString()),o.setAttribute("y1",e.toString()),o.setAttribute("x2",s.toString()),o.setAttribute("y2",r.toString()),a&&t.setAttributes(o,a),o}static createPolygon(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","polygon");return s.setAttribute("points",i),e&&t.setAttributes(s,e),s}static createCircle(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","circle");return s.setAttribute("cx",(i/2).toString()),s.setAttribute("cy",(i/2).toString()),s.setAttribute("r",i.toString()),e&&t.setAttributes(s,e),s}static createEllipse(i,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","ellipse");return r.setAttribute("cx",(i/2).toString()),r.setAttribute("cy",(e/2).toString()),r.setAttribute("rx",(i/2).toString()),r.setAttribute("ry",(e/2).toString()),s&&t.setAttributes(r,s),r}static createGroup(i){const e=document.createElementNS("http://www.w3.org/2000/svg","g");return i&&t.setAttributes(e,i),e}static createTransform(){return document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGTransform()}static createMarker(i,e,s,r,a,o,h){const n=document.createElementNS("http://www.w3.org/2000/svg","marker");return t.setAttributes(n,[["id",i],["orient",e],["markerWidth",s.toString()],["markerHeight",r.toString()],["refX",a.toString()],["refY",o.toString()]]),n.appendChild(h),n}static createText(i){const e=document.createElementNS("http://www.w3.org/2000/svg","text");return e.setAttribute("x","0"),e.setAttribute("y","0"),i&&t.setAttributes(e,i),e}static createTSpan(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","tspan");return s.textContent=i,e&&t.setAttributes(s,e),s}static createImage(i){const e=document.createElementNS("http://www.w3.org/2000/svg","image");return i&&t.setAttributes(e,i),e}static createPoint(t,i){const e=document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGPoint();return e.x=t,e.y=i,e}static createPath(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","path");return s.setAttribute("d",i),e&&t.setAttributes(s,e),s}static createForeignObject(i){const e=document.createElementNS("http://www.w3.org/2000/svg","foreignObject");return e.setAttribute("x","0"),e.setAttribute("y","0"),i&&t.setAttributes(e,i),e}static clientToLocalCoordinates(t,i,e,s=1){if(t){const r=t.getBoundingClientRect();return{x:(i-r.left)/s,y:(e-r.top)/s}}return{x:i,y:e}}static createSvgFromString(t){const i=document.createElementNS("http://www.w3.org/2000/svg","svg");return i.innerHTML=t,i}}class i{get typeName(){return Object.getPrototypeOf(this).constructor.typeName}get container(){return this._container}get strokeColor(){return this._strokeColor}set strokeColor(t){this._strokeColor=t,this.applyStrokeColor()}applyStrokeColor(){}get fillColor(){return this._fillColor}set fillColor(t){this._fillColor=t,this.applyFillColor()}applyFillColor(){}get strokeWidth(){return this._strokeWidth}set strokeWidth(t){this._strokeWidth=t,this.applyStrokeWidth()}applyStrokeWidth(){}get strokeDasharray(){return this._strokeDasharray}set strokeDasharray(t){this._strokeDasharray=t,this.applyStrokeDasharray()}applyStrokeDasharray(){}get opacity(){return this._opacity}set opacity(t){this._opacity=t,this.applyOpacity()}applyOpacity(){}constructor(t){this.defaultSize={width:50,height:20},this.stage="normal",this._strokeColor="transparent",this._fillColor="transparent",this._strokeWidth=0,this._strokeDasharray="",this._opacity=1,this._container=t,this.applyFillColor=this.applyFillColor.bind(this),this.applyStrokeColor=this.applyStrokeColor.bind(this),this.applyStrokeWidth=this.applyStrokeWidth.bind(this),this.applyStrokeDasharray=this.applyStrokeDasharray.bind(this),this.applyOpacity=this.applyOpacity.bind(this)}ownsTarget(t){return!1}dispose(){}addMarkerVisualToContainer(t){this.container.childNodes.length>0?this.container.insertBefore(t,this.container.childNodes[0]):this.container.appendChild(t)}getOutline(){return""}getState(){return{typeName:i.typeName,notes:this.notes,strokeColor:this._strokeColor,strokeWidth:this._strokeWidth,strokeDasharray:this._strokeDasharray,opacity:this._opacity}}restoreState(t){var i,e,s,r;this.notes=t.notes,this._strokeColor=null!==(i=t.strokeColor)&&void 0!==i?i:this._strokeColor,this._strokeWidth=null!==(e=t.strokeWidth)&&void 0!==e?e:this._strokeWidth,this._strokeDasharray=null!==(s=t.strokeDasharray)&&void 0!==s?s:this._strokeDasharray,this._opacity=null!==(r=t.opacity)&&void 0!==r?r:this._opacity}scale(t,i){}}i.typeName="MarkerBase";class e{static toITransformMatrix(t){return{a:t.a,b:t.b,c:t.c,d:t.d,e:t.e,f:t.f}}static toSVGMatrix(t,i){return t.a=i.a,t.b=i.b,t.c=i.c,t.d=i.d,t.e=i.e,t.f=i.f,t}}class s extends i{get centerX(){return this.left+this.width/2}get centerY(){return this.top+this.height/2}get visual(){return this._visual}set visual(i){this._visual=i;const e=t.createTransform();this._visual.transform.baseVal.appendItem(e)}constructor(i){super(i),this.left=0,this.top=0,this.width=0,this.height=0,this.rotationAngle=0,this.rotatePoint=this.rotatePoint.bind(this),this.unrotatePoint=this.unrotatePoint.bind(this),this.container.transform.baseVal.appendItem(t.createTransform())}moveVisual(t){this.visual&&(this.visual.style.transform=`translate(${t.x}px, ${t.y}px)`)}setSize(){this.moveVisual({x:this.left,y:this.top})}rotate(t){if(Math.abs(t.x-this.centerX)>.1){const i=Math.sign(t.x-this.centerX);this.rotationAngle=180*Math.atan((t.y-this.centerY)/(t.x-this.centerX))/Math.PI+90*i,this.applyRotation()}}applyRotation(){const t=this.container.transform.baseVal.getItem(0);t.setRotate(this.rotationAngle,this.centerX,this.centerY),this.container.transform.baseVal.replaceItem(t,0)}rotatePoint(i){if(0===this.rotationAngle)return i;const e=this.container.getCTM();if(null===e)return i;let s=t.createPoint(i.x,i.y);s=s.matrixTransform(e);return{x:s.x,y:s.y}}unrotatePoint(i){if(0===this.rotationAngle)return i;let e=this.container.getCTM();if(null===e)return i;e=e.inverse();let s=t.createPoint(i.x,i.y);s=s.matrixTransform(e);return{x:s.x,y:s.y}}getOutline(){return`M 0 0 \n    H ${this.defaultSize} \n    V ${this.defaultSize} \n    H 0 \n    V 0 Z`}getState(){return Object.assign({left:this.left,top:this.top,width:this.width,height:this.height,rotationAngle:this.rotationAngle,visualTransformMatrix:e.toITransformMatrix(this.visual.transform.baseVal.getItem(0).matrix),containerTransformMatrix:e.toITransformMatrix(this.container.transform.baseVal.getItem(0).matrix)},super.getState())}restoreState(t){super.restoreState(t);const i=t;this.left=i.left,this.top=i.top,this.width=i.width,this.height=i.height,this.rotationAngle=i.rotationAngle,this.moveVisual({x:this.left,y:this.top}),i.visualTransformMatrix&&i.containerTransformMatrix?(this.visual.transform.baseVal.getItem(0).setMatrix(e.toSVGMatrix(this.visual.transform.baseVal.getItem(0).matrix,i.visualTransformMatrix)),this.container.transform.baseVal.getItem(0).setMatrix(e.toSVGMatrix(this.container.transform.baseVal.getItem(0).matrix,i.containerTransformMatrix))):this.applyRotation()}scale(t,i){super.scale(t,i);const e=this.rotatePoint({x:this.left,y:this.top}),s=this.unrotatePoint({x:e.x*t,y:e.y*i});this.left=s.x,this.top=s.y,this.width=this.width*t,this.height=this.height*i}}class r extends s{applyStrokeColor(){this.visual&&t.setAttributes(this.visual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visual&&t.setAttributes(this.visual,[["stroke-width",this._strokeWidth.toString()]])}applyStrokeDasharray(){this.visual&&t.setAttributes(this.visual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.createVisual=this.createVisual.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual)}getPath(t=this.width,i=this.height){return"M0,0"}getOutline(){return this.getPath(this.defaultSize.width,this.defaultSize.height)}createVisual(){this.visual=t.createPath(this.getPath(),[["fill","transparent"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]]),this.addMarkerVisualToContainer(this.visual)}adjustVisual(){this.visual&&t.setAttributes(this.visual,[["d",this.getPath()],["fill","transparent"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]])}setSize(){super.setSize(),this.visual&&t.setAttributes(this.visual,[["d",this.getPath()]])}restoreState(t){this.createVisual(),super.restoreState(t),this.adjustVisual()}scale(t,i){super.scale(t,i),this.setSize()}}r.title="Shape outline marker";class a extends r{constructor(t){super(t),this.strokeColor="#ff0000",this.strokeWidth=3}getPath(t=this.width,i=this.height){return`M 0 0 \n      H ${t} \n      V ${i} \n      H 0 \n      V 0 Z`}getState(){const t=super.getState();return t.typeName=a.typeName,t}}a.typeName="FrameMarker",a.title="Frame marker";class o extends i{applyStrokeColor(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&t.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.x1=0,this.y1=0,this.x2=0,this.y2=0,this.adjustVisual=this.adjustVisual.bind(this),this.getState=this.getState.bind(this),this.restoreState=this.restoreState.bind(this),this.scale=this.scale.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual&&t!==this.selectorVisual&&t!==this.visibleVisual)}getPath(){return"M0,0"}createVisual(){this.visual=t.createGroup(),this.selectorVisual=t.createPath(this.getPath(),[["stroke","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]),this.visibleVisual=t.createPath(this.getPath(),[["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()]]),this.visual.appendChild(this.selectorVisual),this.visual.appendChild(this.visibleVisual),this.addMarkerVisualToContainer(this.visual)}adjustVisual(){this.selectorVisual&&this.visibleVisual&&(t.setAttributes(this.selectorVisual,[["d",this.getPath()]]),t.setAttributes(this.visibleVisual,[["d",this.getPath()]]),t.setAttributes(this.visibleVisual,[["stroke",this.strokeColor]]),t.setAttributes(this.visibleVisual,[["stroke-width",this.strokeWidth.toString()]]),t.setAttributes(this.visibleVisual,[["stroke-dasharray",this.strokeDasharray.toString()]]))}getState(){return Object.assign({x1:this.x1,y1:this.y1,x2:this.x2,y2:this.y2},super.getState())}restoreState(t){super.restoreState(t);const i=t;this.x1=i.x1,this.y1=i.y1,this.x2=i.x2,this.y2=i.y2,this.createVisual(),this.adjustVisual()}scale(t,i){super.scale(t,i),this.x1=this.x1*t,this.y1=this.y1*i,this.x2=this.x2*t,this.y2=this.y2*i,this.adjustVisual()}}class h extends i{applyStrokeColor(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&t.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.points=[],this.selectorVisualLines=[],this.strokeColor="#ff0000",this.strokeWidth=3,this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.getState=this.getState.bind(this),this.restoreState=this.restoreState.bind(this),this.scale=this.scale.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual&&t!==this.selectorVisual&&t!==this.visibleVisual&&!this.selectorVisualLines.some((i=>i===t)))}getPath(){return this.points.length>1?this.points.map(((t,i)=>`${0===i?"M":"L"}${t.x},${t.y}`)).join(" ")+("creating"!==this.stage?" Z":""):"M0,0"}createVisual(){this.visual=t.createGroup(),this.visibleVisual=t.createPath(this.getPath(),[["stroke",this.strokeColor],["fill","transparent"],["stroke-width",this.strokeWidth.toString()]]),this.visual.appendChild(this.visibleVisual),this.createSelectorVisual(),this.addMarkerVisualToContainer(this.visual)}createSelectorVisual(){this.visual&&(this.selectorVisual=t.createGroup(),this.visual.appendChild(this.selectorVisual),this.points.forEach((()=>{this.addSelectorLine()})))}adjustVisual(){this.selectorVisual&&this.visibleVisual&&(t.setAttributes(this.visibleVisual,[["d",this.getPath()]]),t.setAttributes(this.visibleVisual,[["stroke",this.strokeColor]]),t.setAttributes(this.visibleVisual,[["stroke-width",this.strokeWidth.toString()]]),t.setAttributes(this.visibleVisual,[["stroke-dasharray",this.strokeDasharray.toString()]]),this.adjustSelectorVisual())}adjustSelectorVisual(){if(this.selectorVisual){const i=this.points.length-this.selectorVisualLines.length;if(i>0)for(let t=0;t<i;t++)this.addSelectorLine();else if(i<0)for(let t=0;t<-i;t++)this.selectorVisual.removeChild(this.selectorVisualLines.pop());this.selectorVisualLines.forEach(((i,e)=>{t.setAttributes(i,[["x1",this.points[e].x.toString()],["y1",this.points[e].y.toString()],["x2",this.points[(e+1)%this.points.length].x.toString()],["y2",this.points[(e+1)%this.points.length].y.toString()]])}))}}addSelectorLine(){const i=t.createLine(0,0,0,0,[["stroke","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]);this.selectorVisual.appendChild(i),this.selectorVisualLines.push(i)}getState(){const t=Object.assign({points:this.points},super.getState());return t.typeName=h.typeName,t}restoreState(t){super.restoreState(t);const i=t;this.points=i.points,this.createVisual(),this.adjustVisual()}scale(t,i){super.scale(t,i),this.points.forEach((e=>{e.x=e.x*t,e.y=e.y*i})),this.adjustVisual()}}h.typeName="PolygonMarker",h.title="Polygon marker";class n extends i{applyStrokeColor(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&t.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.points=[],this.strokeColor="#ff0000",this.strokeWidth=3,this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.getState=this.getState.bind(this),this.restoreState=this.restoreState.bind(this),this.scale=this.scale.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual&&t!==this.selectorVisual&&t!==this.visibleVisual)}getPath(){return this.points.length>1?this.points.map(((t,i)=>`${0===i?"M":"L"}${t.x},${t.y}`)).join(" "):"M0,0"}createVisual(){this.visual=t.createGroup(),this.selectorVisual=t.createPath(this.getPath(),[["stroke","transparent"],["fill","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]),this.visibleVisual=t.createPath(this.getPath(),[["stroke",this.strokeColor],["fill","transparent"],["stroke-width",this.strokeWidth.toString()]]),this.visual.appendChild(this.selectorVisual),this.visual.appendChild(this.visibleVisual),this.addMarkerVisualToContainer(this.visual)}adjustVisual(){if(this.selectorVisual&&this.visibleVisual){const i=this.getPath();t.setAttributes(this.selectorVisual,[["d",i]]),t.setAttributes(this.visibleVisual,[["d",i]]),t.setAttributes(this.visibleVisual,[["stroke",this.strokeColor]]),t.setAttributes(this.visibleVisual,[["stroke-width",this.strokeWidth.toString()]]),t.setAttributes(this.visibleVisual,[["stroke-dasharray",this.strokeDasharray.toString()]])}}getState(){const t=Object.assign({points:this.points},super.getState());return t.typeName=n.typeName,t}restoreState(t){super.restoreState(t);const i=t;this.points=i.points,this.createVisual(),this.adjustVisual()}scale(t,i){super.scale(t,i),this.points.forEach((e=>{e.x=e.x*t,e.y=e.y*i})),this.adjustVisual()}}n.typeName="FreehandMarker",n.title="Freehand marker";class l{get text(){return this._text}set text(t){this._text=t,this.renderText()}get boundingBox(){return this._boundingBox}set boundingBox(t){this._boundingBox=t,this.renderText()}get labelBackground(){return this._labelBackground}get textElement(){return this._textElement}set color(i){this.textElement&&t.setAttributes(this._textElement,[["fill",i]]),this._color=i}get color(){return this._color}get fontFamily(){return this._fontFamily}set fontFamily(t){this._textElement&&(this._textElement.style.fontFamily=t),this._fontFamily=t,this.positionText()}get fontSize(){return this._fontSize}set fontSize(t){this._textElement&&(this._textElement.style.fontSize=`${t.value}${t.units}`),this._fontSize=t,this.positionText()}constructor(i){this._text="",this.offsetX=0,this.offsetY=0,this._boundingBox=new DOMRect,this._labelBackground=t.createRect(10,10,[["fill","white"]]),this._textElement=t.createText(),this._color="transparent",this._fontFamily="",this._fontSize={value:1,units:"rem",step:.1},this.wordWrap=!1,this.prevWrappedText="",this.setupTextElement(),void 0!==i&&(this.text=i),this.setupTextElement=this.setupTextElement.bind(this),this.renderText=this.renderText.bind(this),this.positionText=this.positionText.bind(this),this.ownsTarget=this.ownsTarget.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.showControlBox=this.showControlBox.bind(this),this.hideControlBox=this.hideControlBox.bind(this),this.applyFontStyles=this.applyFontStyles.bind(this),this.wrapText=this.wrapText.bind(this)}ownsTarget(t){if(t===this._textElement)return!0;{let i=!1;return this._textElement.childNodes.forEach((e=>{e===t&&(i=!0)})),i}}setupTextElement(){this._textElement.style.fontSize=`${this.fontSize.value}${this.fontSize.units}`,this._textElement.style.textAnchor="middle",this._labelBackground.style.stroke="#aaa",this._labelBackground.style.strokeDasharray="2 2",this._labelBackground.style.strokeWidth="1",this._labelBackground.style.strokeOpacity="0"}wrapText(){function t(t){let i=t[0].length;return t.forEach((t=>{t.length>i&&(i=t.length)})),.35*i/t.length}if(""!==this.text){const i=this.text.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/),e=1*this.boundingBox.width/this.boundingBox.height;let s=new Array(...i),r=t(s),a=Number.MAX_VALUE;for(;r>e;){let e=s[0];s.forEach((t=>{t.length>e.length&&(e=t)})),a=e.lastIndexOf(" ",a-1),a>0?(s=[],i.forEach((t=>{let i=t;for(;i.length>a;){let t=i.lastIndexOf(" ",a);t<0&&(t=i.indexOf(" ")),t>0?(s.push(i.substring(0,t)),i=i.substring(t).trim()):(s.push(i),i="")}s.push(i)})),r=t(s)):r=-1}return s.join("\r\n")}return this.text}renderText(){if(this._textElement){const i=this.wordWrap?this.wrapText():this.text;if(this.prevWrappedText===i)return void this.positionText();for(this.prevWrappedText=i;this._textElement.lastChild;)this._textElement.removeChild(this._textElement.lastChild);i.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/).forEach(((i,e)=>{this._textElement.appendChild(t.createTSpan(""===i.trim()?" ":i.trim(),[["dy",e>0?"1em":"0"]]))})),this.textElement.style.opacity="0",setTimeout((()=>{this.positionText(this)}),100)}}applyFontStyles(){this._textElement.childNodes.forEach((t=>{const i=t;i.style.fontFamily=this._textElement.style.fontFamily,i.style.fontSize=this._textElement.style.fontSize}))}get textSize(){return this._textSize}positionText(i){const e=void 0===i?this:i;e.applyFontStyles(),e._textSize=e._textElement.getBBox();const s=e.boundingBox.x+e._textSize.width/2+e.offsetX,r=e._textElement.childNodes.length,a=e._textSize.height/r,o=r>1?-a*(r-2)/2:a/3,h=e.boundingBox.y+e._textSize.height/2+o+e.offsetY;e._textElement.childNodes.forEach(((i,e)=>{const r=i;t.setAttributes(r,[["x",`${s}`],["dy",e>0?"1em":"0"]])})),t.setAttributes(e._textElement,[["x",`${s}`]]),t.setAttributes(e._textElement,[["y",`${h}`]]),e._textSize=e._textElement.getBBox();const n=1.2;t.setAttributes(e.labelBackground,[["width",(e._textSize.width*n).toString()],["height",(e._textSize.height*n).toString()],["x",(s-e._textSize.width*n/2).toString()],["y",(e._textSize.y-n).toString()]]),e.onTextSizeChanged&&e.onTextSizeChanged(e),this.textElement.style.opacity="1"}show(){this._textElement.style.display="",this._labelBackground.style.display=""}hide(){this._textElement.style.display="none",this._labelBackground.style.display="none"}showControlBox(){this.labelBackground.style.strokeOpacity="1"}hideControlBox(){this.labelBackground.style.strokeOpacity="0"}}class d extends s{get color(){return this._color}set color(t){this._color=t,this.textBlock.color=t}get fontFamily(){return this._fontFamily}set fontFamily(t){this._fontFamily=t,this.textBlock.fontFamily=t}get fontSize(){return this._fontSize}set fontSize(t){this._fontSize=t,this.textBlock.fontSize=t}getDefaultText(){return Object.getPrototypeOf(this).constructor.DEFAULT_TEXT}get text(){return this.textBlock.text}set text(t){this._text=t,this.textBlock.text=this._text}constructor(t){super(t),this._color="black",this._fontFamily="Helvetica, Arial, sans-serif",this._fontSize={value:1,units:"rem",step:.1},this._text=this.getDefaultText(),this.padding=2,this.textBlock=new l(this.getDefaultText()),this.setColor=this.setColor.bind(this),this.setFont=this.setFont.bind(this),this.setFontSize=this.setFontSize.bind(this),this.setSize=this.setSize.bind(this),this.textSizeChanged=this.textSizeChanged.bind(this),this.createVisual=this.createVisual.bind(this),this.textBoundingBox=new DOMRect}createVisual(){this.textBlock.fontFamily=this.fontFamily,this.textBlock.fontSize=this.fontSize,this.textBlock.color=this.color,this.textBlock.onTextSizeChanged=this.textSizeChanged,this.visual=this.textBlock.textElement,this.addMarkerVisualToContainer(this.visual),this.textBlock.text=this._text}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual&&!this.textBlock.ownsTarget(t))}setTextBoundingBox(){this.textBoundingBox.x=this.padding,this.textBoundingBox.y=this.padding,this.textBoundingBox.width=Number.MAX_VALUE,this.textBoundingBox.height=Number.MAX_VALUE}setSize(){super.setSize();const[t,i]=[this.width,this.height];this.textBlock.textSize&&(this.width=this.textBlock.textSize.width+2*this.padding,this.height=this.textBlock.textSize.height+2*this.padding),t===this.width&&i===this.height||!this.onSizeChanged||this.onSizeChanged(this),this.setTextBoundingBox()}textSizeChanged(){this.setSize()}setColor(t){this.color=t}setFont(t){this.fontFamily=t}setFontSize(t){this.fontSize=t}hideVisual(){this.visual&&(this.visual.style.visibility="hidden")}showVisual(){this.visual&&(this.visual.style.visibility="visible",this.textBlock.renderText())}getState(){const t=Object.assign({color:this.color,fontFamily:this.fontFamily,fontSize:this.fontSize,text:this.text},super.getState());return t.typeName=d.typeName,t}restoreState(t){const i=t;this.color=i.color,this.fontFamily=i.fontFamily,this.fontSize=i.fontSize,this.text=i.text,this.createVisual(),super.restoreState(t),this.setSize()}scale(t,i){super.scale(t,i);const e=Object.assign(Object.assign({},this.fontSize),{value:this.fontSize.value*Math.min(t,i)});this.fontSize=e,this.setSize()}}d.typeName="TextMarker",d.title="Text marker",d.DEFAULT_TEXT="Text";class c extends o{constructor(t){super(t),this.strokeColor="#ff0000",this.strokeWidth=3,this.createVisual=this.createVisual.bind(this)}getPath(){return`M ${this.x1} ${this.y1} L ${this.x2} ${this.y2}`}getState(){const t=super.getState();return t.typeName=c.typeName,t}}c.typeName="LineMarker",c.title="Line marker";class p{get creationStyle(){return this._creationStyle}is(t){return this instanceof t}get marker(){return this._marker}get container(){return this._container}get overlayContainer(){return this._overlayContainer}get state(){return this._state}set state(t){this._state=t}get isSelected(){return this._isSelected}get continuousCreation(){return this._continuousCreation}set strokeColor(t){this.marker.strokeColor=t}get strokeColor(){return this.marker.strokeColor}set strokeWidth(t){this.marker.strokeWidth=t,this.adjustControlBox(),this.stateChanged()}get strokeWidth(){return this.marker.strokeWidth}set strokeDasharray(t){this.marker.strokeDasharray=t,this.stateChanged()}get strokeDasharray(){return this.marker.strokeDasharray}set fillColor(t){this.marker.fillColor=t}get fillColor(){return this.marker.fillColor}set opacity(t){this.marker.opacity=t}get opacity(){return this.marker.opacity}constructor(i){var e;this._creationStyle="draw",this._state="new",this._controlBox=t.createGroup(),this._isSelected=!1,this._continuousCreation=!1,this._container=i.container,this._overlayContainer=i.overlayContainer,this._markerType=i.markerType,this._marker=null!==(e=i.marker)&&void 0!==e?e:new i.markerType(i.container),this.select=this.select.bind(this),this.deselect=this.deselect.bind(this),this.ownsTarget=this.ownsTarget.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.stateChanged=this.stateChanged.bind(this),this.scale=this.scale.bind(this),this.dispose=this.dispose.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.manipulate=this.manipulate.bind(this),this.dblClick=this.dblClick.bind(this)}ownsTarget(t){var i;let e=!1;return null!==t&&(null===(i=this._marker)||void 0===i?void 0:i.ownsTarget(t))&&(e=!0),e}select(){this.container.style.cursor="move",this._isSelected=!0,this.manipulationStartState=JSON.stringify(this._marker.getState()),console.log("manipulationStartState",this.manipulationStartState)}deselect(){this.container.style.cursor="default",this._isSelected=!1,this.stateChanged()}pointerDown(t,i){}dblClick(t,i){}manipulate(t){}pointerUp(t){}dispose(){}adjustControlBox(){}scale(t,i){this._marker.scale(t,i),this.adjustControlBox()}stateChanged(){if(this.onStateChanged&&"creating"!==this.state&&"new"!==this.state){const t=JSON.stringify(this._marker.getState());console.log("currentState",t),this.manipulationStartState!=t&&(this.manipulationStartState=t,this.onStateChanged(this))}}getState(){return this.marker.getState()}restoreState(t){this._state="select",this.marker.restoreState(t),this.adjustControlBox()}}class u{get visual(){return this._visual||this.createVisual(),this._visual}constructor(){this.gripSize=5,this.fillColor="rgba(255,255,255,0.9)",this.strokeColor="#0ea5e9",this.createVisual=this.createVisual.bind(this)}createVisual(){this._visual=t.createGroup(),this._visual.appendChild(t.createCircle(4*this.gripSize,[["fill","transparent"],["cx",(this.gripSize/2).toString()],["cy",(this.gripSize/2).toString()]]));const i=t.createCircle(this.gripSize,[["fill-opacity","1"],["stroke-width","1"],["stroke-opacity","1"]]);i.style.fill=`var(--mjs-grip-fill, ${this.fillColor})`,i.style.stroke=`var(--mjs-grip-stroke, ${this.strokeColor})`,i.style.filter="drop-shadow(0px 0px 2px rgba(0, 0, 0, .7))",this._visual.appendChild(i)}ownsTarget(t){var i;if(t===this._visual)return!0;{let e=!1;return null===(i=this._visual)||void 0===i||i.childNodes.forEach((i=>{i===t&&(e=!0)})),e}}}class g extends u{}class m extends p{constructor(i){super(i),this.defaultLength=50,this.manipulationStartX=0,this.manipulationStartY=0,this.controlBox=t.createGroup(),this.grips=[],this.ownsTarget=this.ownsTarget.bind(this),this.setupControlBox=this.setupControlBox.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.adjustControlGrips=this.adjustControlGrips.bind(this),this.createGrip=this.createGrip.bind(this),this.positionGrip=this.positionGrip.bind(this),this.positionGrips=this.positionGrips.bind(this),this.resize=this.resize.bind(this),this.manipulate=this.manipulate.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.setupControlBox()}ownsTarget(t){return!(!super.ownsTarget(t)&&!this.marker.ownsTarget(t))||!!this.grips.some((i=>i.ownsTarget(t)))}pointerDown(t,i){super.pointerDown(t,i),this.manipulationStartX=t.x,this.manipulationStartY=t.y,"new"===this.state?this.startCreation(t):"creating"===this._state?this.grips.length>0&&i&&this.grips[0].ownsTarget(i)?this.finishCreation():this.addNewPointWhileCreating(t):(this.select(),this.activeGrip=i&&this.grips.find((t=>t.ownsTarget(i))),this.activeGrip?this._state="resize":this._state="move")}startCreation(t){this.marker.stage="creating",this.marker.points.push(t),this.marker.points.push(t),this.marker.createVisual(),this.marker.adjustVisual(),this.adjustControlGrips(),this.activeGrip=this.grips.at(-1),this.activeGrip&&(this.activeGrip.visual.style.pointerEvents="none"),this._state="creating"}addNewPointWhileCreating(t){this.marker.points.push(t),this.marker.adjustVisual(),this.adjustControlGrips(),this.activeGrip=this.grips.at(-1),this.activeGrip&&(this.activeGrip.visual.style.pointerEvents="none")}finishCreation(){this.marker.stage="normal",this.marker.points.pop(),this.marker.adjustVisual(),this.adjustControlGrips(),this.grips.forEach((t=>{t.visual.style.pointerEvents=""})),this._state="select",this.onMarkerCreated&&this.onMarkerCreated(this)}pointerUp(t){super.pointerUp(t),this.manipulate(t),"creating"!==this._state&&(this._state="select"),this.stateChanged()}manipulate(t){"creating"===this.state?this.resize(t):"move"===this.state?(this.marker.points.forEach((i=>{i.x+=t.x-this.manipulationStartX,i.y+=t.y-this.manipulationStartY})),this.manipulationStartX=t.x,this.manipulationStartY=t.y,this.marker.adjustVisual(),this.adjustControlBox()):"resize"===this.state&&this.resize(t)}resize(t){const i=this.activeGrip?this.grips.indexOf(this.activeGrip):-1;i>=0&&(this.marker.points[i]=t,this.marker.adjustVisual(),this.adjustControlBox())}dblClick(t,i){if(i&&"select"===this.state){const e=this.marker.selectorVisualLines.findIndex((t=>t===i));if(e>-1)this.marker.points.splice(e+1,0,t),this.marker.adjustVisual(),this.adjustControlGrips();else{const t=this.grips.findIndex((t=>t.ownsTarget(i)));t>-1&&(this.marker.points.splice(t,1),this.marker.adjustVisual(),this.adjustControlGrips())}}}setupControlBox(){this.controlBox=t.createGroup(),this.container.appendChild(this.controlBox),this.adjustControlGrips(),this.controlBox.style.display=""}adjustControlBox(){this.adjustControlGrips()}adjustControlGrips(){const t=this.marker.points.length-this.grips.length;if(t>0)for(let i=0;i<t;i++)this.grips.push(this.createGrip());else if(t<0)for(let i=0;i<-t;i++){const t=this.grips.pop();t&&this.controlBox.removeChild(t.visual)}this.positionGrips()}createGrip(){const i=new g;return i.visual.transform.baseVal.appendItem(t.createTransform()),this.controlBox.appendChild(i.visual),i}positionGrips(){this.grips.forEach(((t,i)=>{const e=this.marker.points[i];this.positionGrip(t.visual,e.x-t.gripSize/2,e.y-t.gripSize/2)}))}positionGrip(t,i,e){const s=t.transform.baseVal.getItem(0);s.setTranslate(i,e),t.transform.baseVal.replaceItem(s,0)}select(){super.select(),this.adjustControlBox(),this.controlBox.style.display=""}deselect(){super.deselect(),this.controlBox.style.display="none","creating"===this.state&&this.finishCreation()}}class v extends p{constructor(i){super(i),this.defaultLength=50,this.manipulationStartX=0,this.manipulationStartY=0,this.manipulationStartX1=0,this.manipulationStartY1=0,this.manipulationStartX2=0,this.manipulationStartY2=0,this.controlBox=t.createGroup(),this.ownsTarget=this.ownsTarget.bind(this),this.setupControlBox=this.setupControlBox.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.addControlGrips=this.addControlGrips.bind(this),this.createGrip=this.createGrip.bind(this),this.positionGrip=this.positionGrip.bind(this),this.positionGrips=this.positionGrips.bind(this),this.resize=this.resize.bind(this),this.manipulate=this.manipulate.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.setupControlBox()}ownsTarget(t){var i,e;return!(!super.ownsTarget(t)&&!this.marker.ownsTarget(t))||!(!(null===(i=this.grip1)||void 0===i?void 0:i.ownsTarget(t))&&!(null===(e=this.grip2)||void 0===e?void 0:e.ownsTarget(t)))}pointerDown(t,i){var e,s;super.pointerDown(t,i),this.manipulationStartX=t.x,this.manipulationStartY=t.y,"new"===this.state&&(this.marker.x1=t.x,this.marker.y1=t.y,this.marker.x2=t.x,this.marker.y2=t.y),this.manipulationStartX1=this.marker.x1,this.manipulationStartY1=this.marker.y1,this.manipulationStartX2=this.marker.x2,this.manipulationStartY2=this.marker.y2,"new"===this.state?(this.marker.createVisual(),this.marker.adjustVisual(),this._state="creating"):(this.select(),i&&(null===(e=this.grip1)||void 0===e?void 0:e.ownsTarget(i))?this.activeGrip=this.grip1:i&&(null===(s=this.grip2)||void 0===s?void 0:s.ownsTarget(i))?this.activeGrip=this.grip2:this.activeGrip=void 0,this.activeGrip?this._state="resize":this._state="move")}pointerUp(t){const i=this.state;super.pointerUp(t),"creating"===this.state&&Math.abs(this.marker.x1-this.marker.x2)<10&&Math.abs(this.marker.y1-this.marker.y2)<10?(this.marker.x2=this.marker.x1+this.defaultLength,this.marker.adjustVisual(),this.adjustControlBox()):this.manipulate(t),this._state="select","creating"===i&&this.onMarkerCreated&&this.onMarkerCreated(this)}manipulate(t){"creating"===this.state?this.resize(t):"move"===this.state?(this.marker.x1=this.manipulationStartX1+t.x-this.manipulationStartX,this.marker.y1=this.manipulationStartY1+t.y-this.manipulationStartY,this.marker.x2=this.manipulationStartX2+t.x-this.manipulationStartX,this.marker.y2=this.manipulationStartY2+t.y-this.manipulationStartY,this.marker.adjustVisual(),this.adjustControlBox()):"resize"===this.state&&this.resize(t)}resize(t){switch(this.activeGrip){case this.grip1:this.marker.x1=t.x,this.marker.y1=t.y;break;case this.grip2:case void 0:this.marker.x2=t.x,this.marker.y2=t.y}this.marker.adjustVisual(),this.adjustControlBox()}setupControlBox(){this.controlBox=t.createGroup(),this.container.appendChild(this.controlBox),this.addControlGrips(),this.controlBox.style.display="none"}adjustControlBox(){this.positionGrips()}addControlGrips(){this.grip1=this.createGrip(),this.grip2=this.createGrip(),this.positionGrips()}createGrip(){const i=new g;return i.visual.transform.baseVal.appendItem(t.createTransform()),this.controlBox.appendChild(i.visual),i}positionGrips(){if(this.grip1&&this.grip2){const t=this.grip1.gripSize;this.positionGrip(this.grip1.visual,this.marker.x1-t/2,this.marker.y1-t/2),this.positionGrip(this.grip2.visual,this.marker.x2-t/2,this.marker.y2-t/2)}}positionGrip(t,i,e){const s=t.transform.baseVal.getItem(0);s.setTranslate(i,e),t.transform.baseVal.replaceItem(s,0)}select(){super.select(),this.adjustControlBox(),this.controlBox.style.display=""}deselect(){super.deselect(),this.controlBox.style.display="none"}}class k{constructor(){this.grips=new Map([["topleft",new g],["topcenter",new g],["topright",new g],["leftcenter",new g],["rightcenter",new g],["bottomleft",new g],["bottomcenter",new g],["bottomright",new g]]),this.findGripByVisual=this.findGripByVisual.bind(this)}findGripByVisual(t){for(const i of this.grips.values())if(i.ownsTarget(t))return i}getGrip(t){return this.grips.get(t)}}class y extends u{constructor(){super();const t=this.fillColor;this.fillColor=this.strokeColor,this.strokeColor=t}}class _ extends p{constructor(i){super(i),this.manipulationStartLeft=0,this.manipulationStartTop=0,this.manipulationStartWidth=0,this.manipulationStartHeight=0,this.manipulationStartX=0,this.manipulationStartY=0,this.offsetX=0,this.offsetY=0,this.controlBox=t.createGroup(),this.CB_DISTANCE=0,this.controlGrips=new k,this.disabledResizeGrips=[],this.disableRotation=!1,this._suppressMarkerCreateEvent=!1,this.setupControlBox()}ownsTarget(t){var i;return!(!super.ownsTarget(t)&&!this._marker.ownsTarget(t))||!!(void 0!==(null===(i=this.controlGrips)||void 0===i?void 0:i.findGripByVisual(t))||void 0!==this.rotatorGrip&&this.rotatorGrip.ownsTarget(t))}pointerDown(t,i){var e;console.log(t),super.pointerDown(t,i),"new"===this.state&&(this.marker.left=t.x,this.marker.top=t.y),this.manipulationStartLeft=this.marker.left,this.manipulationStartTop=this.marker.top,this.manipulationStartWidth=this.marker.width,this.manipulationStartHeight=this.marker.height;const s=this.marker.unrotatePoint(t);if(this.manipulationStartX=s.x,this.manipulationStartY=s.y,this.offsetX=s.x-this.marker.left,this.offsetY=s.y-this.marker.top,"new"!==this.state)if(this.select(),this.activeGrip=null===(e=this.controlGrips)||void 0===e?void 0:e.findGripByVisual(i),void 0!==this.activeGrip)this._state="resize";else if(void 0!==this.rotatorGrip&&void 0!==i&&this.rotatorGrip.ownsTarget(i)){this.activeGrip=this.rotatorGrip;const t=this.marker.rotatePoint({x:this.marker.centerX,y:this.marker.centerY});this.marker.left=t.x-this.marker.width/2,this.marker.top=t.y-this.marker.height/2,this.marker.moveVisual({x:this.marker.left,y:this.marker.top});const i=this.container.transform.baseVal.getItem(0);i.setRotate(this.marker.rotationAngle,this.marker.centerX,this.marker.centerY),this.container.transform.baseVal.replaceItem(i,0),this.adjustControlBox(),this._state="rotate"}else this._state="move"}pointerUp(t){const i=this.state;super.pointerUp(t),"creating"===this.state&&this.marker.width<10&&this.marker.height<10?(this.marker.width=this.marker.defaultSize.width,this.marker.height=this.marker.defaultSize.height):this.manipulate(t),this._state="select","creating"===i&&this.onMarkerCreated&&!1===this._suppressMarkerCreateEvent&&this.onMarkerCreated(this),this.stateChanged()}manipulate(t){const i=this.marker.unrotatePoint(t);"creating"===this.state?this.resize(t):"move"===this.state?(this.marker.left=this.manipulationStartLeft+(i.x-this.manipulationStartLeft)-this.offsetX,this.marker.top=this.manipulationStartTop+(i.y-this.manipulationStartTop)-this.offsetY,this.marker.moveVisual({x:this.marker.left,y:this.marker.top}),this.adjustControlBox()):"resize"===this.state?this.resize(i):"rotate"===this.state&&this.marker.rotate(t)}resize(t){let i=this.manipulationStartLeft,e=this.manipulationStartWidth,s=this.manipulationStartTop,r=this.manipulationStartHeight;switch(this.activeGrip){case this.controlGrips.getGrip("bottomleft"):case this.controlGrips.getGrip("leftcenter"):case this.controlGrips.getGrip("topleft"):i=this.manipulationStartLeft+t.x-this.manipulationStartX,e=this.manipulationStartWidth+this.manipulationStartLeft-i;break;case this.controlGrips.getGrip("bottomright"):case this.controlGrips.getGrip("rightcenter"):case this.controlGrips.getGrip("topright"):case void 0:e=this.manipulationStartWidth+t.x-this.manipulationStartX}switch(this.activeGrip){case this.controlGrips.getGrip("topcenter"):case this.controlGrips.getGrip("topleft"):case this.controlGrips.getGrip("topright"):s=this.manipulationStartTop+t.y-this.manipulationStartY,r=this.manipulationStartHeight+this.manipulationStartTop-s;break;case this.controlGrips.getGrip("bottomcenter"):case this.controlGrips.getGrip("bottomleft"):case this.controlGrips.getGrip("bottomright"):case void 0:r=this.manipulationStartHeight+t.y-this.manipulationStartY}e>=0?(this.marker.left=i,this.marker.width=e):(this.marker.left=i+e,this.marker.width=-e),r>=0?(this.marker.top=s,this.marker.height=r):(this.marker.top=s+r,this.marker.height=-r),this.setSize()}setSize(){this.marker.setSize(),this.adjustControlBox()}select(){super.select(),this.adjustControlBox(),this.controlBox.style.display=""}deselect(){super.deselect(),this.controlBox.style.display="none"}setupControlBox(){this.controlBox=t.createGroup();const i=t.createTransform();i.setTranslate(-this.CB_DISTANCE/2,-this.CB_DISTANCE/2),this.controlBox.transform.baseVal.appendItem(i),this.container.appendChild(this.controlBox),this.controlRect=t.createRect(this.marker.width+this.CB_DISTANCE,this.marker.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.disableRotation&&(this.rotatorGripLine=t.createLine((this.marker.width+2*this.CB_DISTANCE)/2,this.marker.top-this.CB_DISTANCE,(this.marker.width+2*this.CB_DISTANCE)/2,this.marker.top-3*this.CB_DISTANCE,[["stroke","black"],["stroke-width","1"],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"]]),this.rotatorGripLine.style.filter="drop-shadow(rgba(255, 255, 255, 0.7) 0px 2px 0px)",this.controlBox.appendChild(this.rotatorGripLine)),this.controlGrips=new k,this.addControlGrips(),this.controlBox.style.display="none"}adjustControlBox(){var t,i;const e=this.controlBox.transform.baseVal.getItem(0);e.setTranslate(this.marker.left-this.CB_DISTANCE/2,this.marker.top-this.CB_DISTANCE/2),this.controlBox.transform.baseVal.replaceItem(e,0),null===(t=this.controlRect)||void 0===t||t.setAttribute("width",(this.marker.width+this.CB_DISTANCE).toString()),null===(i=this.controlRect)||void 0===i||i.setAttribute("height",(this.marker.height+this.CB_DISTANCE).toString()),void 0!==this.rotatorGripLine&&(this.rotatorGripLine.setAttribute("x1",((this.marker.width+this.CB_DISTANCE)/2).toString()),this.rotatorGripLine.setAttribute("y1",(-this.CB_DISTANCE/2).toString()),this.rotatorGripLine.setAttribute("x2",((this.marker.width+this.CB_DISTANCE)/2).toString()),this.rotatorGripLine.setAttribute("y2",(-Math.max(3*this.CB_DISTANCE,30)).toString())),this.positionGrips()}addControlGrips(){for(const i of this.controlGrips.grips.values())i.visual.transform.baseVal.appendItem(t.createTransform()),this.controlBox.appendChild(i.visual),this.controlBox.appendChild(i.visual);!0!==this.disableRotation&&(this.rotatorGrip=this.createRotateGrip()),this.positionGrips()}createRotateGrip(){const i=new y;return i.visual.transform.baseVal.appendItem(t.createTransform()),this.controlBox.appendChild(i.visual),i}positionGrips(){var t,i;if(void 0!==this.controlGrips){const e=null!==(t=this.controlGrips.getGrip("topleft").gripSize)&&void 0!==t?t:0,s=-e/2,r=s,a=(this.marker.width+this.CB_DISTANCE)/2-e/2,o=(this.marker.height+this.CB_DISTANCE)/2-e/2,h=this.marker.height+this.CB_DISTANCE-e/2,n=this.marker.width+this.CB_DISTANCE-e/2;if(this.positionGrip(this.controlGrips.getGrip("topleft").visual,s,r),this.positionGrip(this.controlGrips.getGrip("topcenter").visual,a,r),this.positionGrip(this.controlGrips.getGrip("topright").visual,n,r),this.positionGrip(this.controlGrips.getGrip("leftcenter").visual,s,o),this.positionGrip(this.controlGrips.getGrip("rightcenter").visual,n,o),this.positionGrip(this.controlGrips.getGrip("bottomleft").visual,s,h),this.positionGrip(this.controlGrips.getGrip("bottomcenter").visual,a,h),this.positionGrip(this.controlGrips.getGrip("bottomright").visual,n,h),void 0!==this.rotatorGrip){const t=null!==(i=this.rotatorGrip.gripSize)&&void 0!==i?i:0,e=-t/2,s=(this.marker.width+this.CB_DISTANCE)/2-t/2;this.positionGrip(this.rotatorGrip.visual,s,e-Math.max(3*this.CB_DISTANCE,30))}}this.adjustGripVisibility()}positionGrip(t,i,e){if(void 0!==t){const s=t.transform.baseVal.getItem(0);s.setTranslate(i,e),t.transform.baseVal.replaceItem(s,0)}}hideControlBox(){this.controlBox.style.display="none"}showControlBox(){this.controlBox.style.display=""}adjustGripVisibility(){for(const t of this.disabledResizeGrips){const i=this.controlGrips.getGrip(t);void 0!==i&&(i.visual.style.display="none")}}scale(t,i){super.scale(t,i);const e=this.marker.rotatePoint({x:this.marker.left,y:this.marker.top}),s=this.marker.unrotatePoint({x:e.x*t,y:e.y*i});this.marker.left=s.x,this.marker.top=s.y,this.marker.width=this.marker.width*t,this.marker.height=this.marker.height*i,this.adjustControlBox()}}class C extends _{constructor(t){super(t),this._creationStyle="draw"}pointerDown(t,i){super.pointerDown(t,i),"new"===this.state&&(this.marker.createVisual(),this.marker.moveVisual(t),this._state="creating")}resize(t){super.resize(t),this.setSize()}pointerUp(t){super.pointerUp(t),this.setSize()}}class x{constructor(){this.undoStack=[],this.redoStack=[]}get isUndoPossible(){return this.undoStack.length>0}get isRedoPossible(){return this.redoStack.length>0}get undoStepCount(){return this.undoStack.length}get redoStepCount(){return this.redoStack.length}addUndoStep(t){return(0===this.undoStack.length||JSON.stringify(this.undoStack[this.undoStack.length-1])!==JSON.stringify(t))&&(this.undoStack.push(JSON.parse(JSON.stringify(t))),JSON.stringify(this.lastRedoStep)!==JSON.stringify(t)&&this.redoStack.splice(0,this.redoStack.length),!0)}replaceLastUndoStep(t){this.undoStack.length>0&&(this.undoStack[this.undoStack.length-1]=JSON.parse(JSON.stringify(t)))}getLastUndoStep(){return this.undoStack.length>0?this.undoStack[this.undoStack.length-1]:void 0}undo(){if(this.undoStack.length>1){const t=this.undoStack.pop();return void 0!==t&&this.redoStack.push(t),this.undoStack.length>0?this.undoStack[this.undoStack.length-1]:void 0}}redo(){return this.lastRedoStep=this.redoStack.pop(),this.lastRedoStep}}class S extends p{constructor(i){super(i),this.manipulationStartX=0,this.manipulationStartY=0,this.controlBox=t.createGroup(),this._continuousCreation=!0,this.ownsTarget=this.ownsTarget.bind(this),this.setupControlBox=this.setupControlBox.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.manipulate=this.manipulate.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.setupControlBox()}ownsTarget(t){return!(!super.ownsTarget(t)&&!this.marker.ownsTarget(t)&&t!==this.controlRect)}pointerDown(t,i){super.pointerDown(t,i),this.manipulationStartX=t.x,this.manipulationStartY=t.y,"new"===this.state?this.startCreation(t):"move"!==this.state&&(this.select(),this._state="move")}startCreation(t){this.marker.stage="creating",this.marker.points.push(t),this.marker.createVisual(),this.marker.adjustVisual(),this._state="creating"}addNewPointWhileCreating(t){this.marker.points.push(t),this.marker.adjustVisual()}finishCreation(){this.marker.stage="normal",this.marker.adjustVisual(),this._state="select",this.onMarkerCreated&&this.onMarkerCreated(this)}pointerUp(t){super.pointerUp(t),this.manipulate(t),"creating"===this._state&&this.finishCreation(),this.state="select",this.stateChanged()}manipulate(t){"creating"===this.state?this.addNewPointWhileCreating(t):"move"===this.state&&(this.marker.points.forEach((i=>{i.x+=t.x-this.manipulationStartX,i.y+=t.y-this.manipulationStartY})),this.manipulationStartX=t.x,this.manipulationStartY=t.y,this.marker.adjustVisual(),this.adjustControlBox())}setupControlBox(){this.controlBox=t.createGroup(),this.container.appendChild(this.controlBox),this.controlRect=t.createRect(0,0,[["stroke","black"],["stroke-width","1"],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"],["fill","transparent"]]),this.controlBox.appendChild(this.controlRect),this.controlBox.style.display=""}adjustControlBox(){const i=Math.min(...this.marker.points.map((t=>t.x))),e=Math.min(...this.marker.points.map((t=>t.y))),s=Math.max(...this.marker.points.map((t=>t.x))),r=Math.max(...this.marker.points.map((t=>t.y)));this.controlRect&&t.setAttributes(this.controlRect,[["x",(i-this.strokeWidth).toString()],["y",(e-this.strokeWidth).toString()],["width",(s-i+2*this.strokeWidth).toString()],["height",(r-e+2*this.strokeWidth).toString()]])}select(){super.select(),this.adjustControlBox(),this.controlBox.style.display=""}deselect(){super.deselect(),this.controlBox.style.display="none"}}class w{get width(){return this._width}set width(t){this._width=t,this.textEditor.style.width=`${this.width}px`}get height(){return this._height}set height(t){this._height=t,this.textEditor.style.height=`${this.height}px`}get left(){return this._left}set left(t){this._left=t,this.textEditor.style.left=`${this.left}px`}get top(){return this._top}set top(t){this._top=t,this.textEditor.style.top=`${this.top}px`}get text(){return this._text}set text(t){this._text=t}get fontFamily(){return this._fontFamily}set fontFamily(t){this._fontFamily=t,this.textEditor.style.fontFamily=this._fontFamily}get fontSize(){return this._fontSize}set fontSize(t){this._fontSize=t,this.textEditor.style.fontSize=this._fontSize}get textColor(){return this._textColor}set textColor(t){this._textColor=t,this.textEditor.style.color=this.textColor}constructor(){this.isInFocus=!1,this._width=0,this._height=0,this._left=0,this._top=0,this._text="",this._fontFamily="sans-serif",this._fontSize="1rem",this._textColor="#000",this.isSetupCompleted=!1,this.textEditor=document.createElement("div"),this.getEditorUi=this.getEditorUi.bind(this),this.focus=this.focus.bind(this),this.setup=this.setup.bind(this)}setup(){this.textEditor.style.pointerEvents="auto",this.textEditor.style.display="flex",this.textEditor.style.flexDirection="column",this.textEditor.style.alignItems="center",this.textEditor.style.justifyContent="center",this.textEditor.style.width=`${this._width}px`,this.textEditor.style.height=`${this._height}px`,this.textEditor.style.overflow="hidden",this.textEditor.style.textAlign="center",this.textEditor.style.fontFamily=this._fontFamily,this.textEditor.style.fontSize=this._fontSize,this.textEditor.style.lineHeight="1em",""!==this._text?this.textEditor.innerText=this._text:this.textEditor.innerHTML="&nbsp;",this.textEditor.contentEditable="true",this.textEditor.style.outline="none",this.textEditor.style.color=this._textColor,this.textEditor.style.whiteSpace="pre",this.textEditor.addEventListener("pointerdown",(t=>{t.stopPropagation()})),this.textEditor.addEventListener("pointerup",(t=>{t.stopPropagation()})),this.textEditor.addEventListener("keydown",(t=>{"Escape"===t.key&&(t.preventDefault(),this.textEditor.blur())})),this.textEditor.addEventListener("keyup",(t=>{t.cancelBubble=!0,this._text=this.textEditor.innerText,void 0!==this.onTextChanged&&this.onTextChanged(this._text)})),this.textEditor.addEventListener("blur",(()=>{this._text=this.textEditor.innerText,void 0!==this.onTextChanged&&this.onTextChanged(this._text),void 0!==this.onBlur&&this.onBlur()})),this.textEditor.addEventListener("paste",(t=>{if(t.clipboardData){const i=t.clipboardData.getData("text"),e=window.getSelection();if(!e||!e.rangeCount)return!1;e.deleteFromDocument(),e.getRangeAt(0).insertNode(document.createTextNode(i)),t.preventDefault()}})),this.isSetupCompleted=!0}getEditorUi(){return this.isSetupCompleted||this.setup(),this.textEditor}focus(){this.textEditor.focus();const t=document.createRange();t.selectNodeContents(this.textEditor),t.collapse(!1);const i=window.getSelection();null==i||i.removeAllRanges(),null==i||i.addRange(t)}blur(){this.textEditor.blur()}}class f extends _{constructor(i){super(i),this.textBlockEditorContainer=t.createForeignObject(),this._pointerDownTime=Number.MAX_VALUE,this._pointerDownPoint={x:0,y:0},this.markerSizeChanged=()=>{this.setSize()},this.disabledResizeGrips=["topleft","topcenter","topright","bottomleft","bottomcenter","bottomright","leftcenter","rightcenter"],this._creationStyle="drop",this.textBlockEditor=new w,this.marker.onSizeChanged=this.markerSizeChanged,this.showEditor=this.showEditor.bind(this),this.hideEditor=this.hideEditor.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.resize=this.resize.bind(this),this.markerSizeChanged=this.markerSizeChanged.bind(this)}pointerDown(t,i){super.pointerDown(t,i),this._pointerDownTime=Date.now(),this._pointerDownPoint=t,"new"===this.state&&(this.marker.createVisual(),this.marker.moveVisual(t),this._state="creating")}dblClick(t,i){super.dblClick(t,i),"edit"!==this.state&&this.showEditor()}setSize(){super.setSize(),this.textBlockEditorContainer.style.transform=`translate(${this.marker.left}px, ${this.marker.top}px)`,this.textBlockEditorContainer.style.width=`${this.marker.width}px`,this.textBlockEditorContainer.style.height=`${this.marker.height}px`,this.textBlockEditor.width=this.marker.width,this.textBlockEditor.height=this.marker.height}resize(t){super.resize(t),this.setSize()}pointerUp(t){const i=this.state;super.pointerUp(t),this.setSize(),("creating"===i||Date.now()-this._pointerDownTime>500&&Math.abs(this._pointerDownPoint.x-t.x)<5&&Math.abs(this._pointerDownPoint.y-t.y)<5)&&this.showEditor(),this.adjustControlBox()}showEditor(){this.textBlockEditor.text=this.marker.text,void 0===this.textBlockEditor.onTextChanged&&(this.textBlockEditor.onTextChanged=t=>{this.marker.text=t}),void 0===this.textBlockEditor.onBlur&&(this.textBlockEditor.onBlur=()=>{this.hideEditor()}),this.textBlockEditorContainer.appendChild(this.textBlockEditor.getEditorUi()),this.container.appendChild(this.textBlockEditorContainer),this.marker.hideVisual(),this.hideControlBox(),this.textBlockEditor.focus()}hideEditor(){this.marker.text=this.textBlockEditor.text,this.marker.showVisual(),this.showControlBox(),this.state="select",this.container.removeChild(this.textBlockEditorContainer)}}class b{static addKey(t,i){b.keys.set(t,i),b.keyAddListeners.forEach((t=>{t()}))}static addKeyAddListener(t){b.keyAddListeners.push(t)}static removeKeyAddListener(t){const i=b.keyAddListeners.indexOf(t);i>-1&&b.keyAddListeners.splice(i,1)}static isLicensed(t){if(b.keys.has(t)){const i=new RegExp(`${t}-[A-Z][0-9]{3}-[A-Z][0-9]{3}-[0-9]{4}`,"i"),e=b.keys.get(t);return void 0!==e&&i.test(e)}return!1}}b.keys=new Map,b.keyAddListeners=new Array;var E='<svg viewBox="0 0 112 96" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"><path style="fill:#e5f20d;fill-opacity:.647059" d="M801.047 441.52h507.554v82.104H801.047z" transform="matrix(.22059 0 0 .67273 -176.702 -256.636)"/><path d="M506.73 455.948c0 .4-.133.742-.4 1.025-.266.284-.616.425-1.05.425-.6 0-.9-.3-.9-.9 0-6.733-.216-11.891-.65-15.475-.433-3.583-1.183-5.375-2.25-5.375-1.8 0-4.433 6.284-7.9 18.85v.05c0 .4-.133.742-.4 1.025-.266.284-.616.425-1.05.425-.6 0-.9-.3-.9-.9 0-1.333.067-3.4.2-6.2.134-3.133.2-5.6.2-7.4 0-2.5-.075-4.275-.225-5.325-.15-1.05-.475-1.575-.975-1.575-1.133 0-2.566 2.075-4.3 6.225-1.733 4.15-3.55 9.042-5.45 14.675l-.45 1.3a2.315 2.315 0 0 1-.575.85c-.25.234-.525.35-.825.35-.4 0-.666-.033-.8-.1-.133-.066-.216-.266-.25-.6-.166-1.633-.3-3.816-.4-6.55-.066-.7-.133-1.85-.2-3.45-.333-5.633-.633-9.441-.9-11.425-.266-1.983-.4-3.091-.4-3.325 0-.266.134-.583.4-.95.267-.366.517-.55.75-.55.534 0 .967.384 1.3 1.15.167.367.35 1.834.55 4.4.2 2.567.367 5.75.5 9.55l.25 7.65c1.834-5.666 3.734-10.808 5.7-15.425 1.967-4.616 3.767-6.925 5.4-6.925 1.1 0 1.85.8 2.25 2.4.4 1.6.6 3.917.6 6.95 0 1.6-.033 3.9-.1 6.9l-.05 2.3c1.367-4.766 2.725-8.766 4.075-12 1.35-3.233 2.709-4.85 4.075-4.85 3.434 0 5.15 7.6 5.15 22.8Z" style="fill-rule:nonzero" transform="translate(-1156.959 -1063.791) scale(2.46792)"/></svg>';class T extends HTMLElement{get targetWidth(){return this._targetWidth}set targetWidth(t){this._targetWidth=t,this.setMainCanvasSize()}get targetHeight(){return this._targetHeight}set targetHeight(t){this._targetHeight=t,this.setMainCanvasSize()}get currentMarkerEditor(){return this._currentMarkerEditor}get targetImage(){return this._targetImage}set targetImage(t){this._targetImage=t,void 0!==t&&this.addTargetImage()}get zoomLevel(){return this._zoomLevel}set zoomLevel(t){this._zoomLevel=t,this._canvasContainer&&this._contentContainer&&this._mainCanvas&&this._overlayContainer&&(this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this.setEditingTargetSize(),this._canvasContainer.scrollTo({left:(this._mainCanvas.clientWidth-this._canvasContainer.clientWidth)/2,top:(this._mainCanvas.clientHeight-this._canvasContainer.clientHeight)/2}),this._overlayContainer.style.transform=`scale(${this._zoomLevel})`)}panTo(t){this.prevPanPoint=t}constructor(){super(),this.width=0,this.height=0,this._targetWidth=-1,this._targetHeight=-1,this.mode="select",this._isInitialized=!1,this._newMarkerOutline=t.createPath("",[["stroke","#333"],["stroke-width","0.5"],["stroke-dasharray","2 5"],["fill","rgba(200,200,200,0.5)"],["pointer-events","none"]]),this.markerEditors=new Map,this.editors=[],this._zoomLevel=1,this.prevPanPoint={x:0,y:0},this.undoRedoManager=new x,this.touchPoints=0,this.isDragging=!1,this.markerEditors.set(a,C),this.markerEditors.set(c,v),this.markerEditors.set(h,m),this.markerEditors.set(n,S),this.markerEditors.set(d,f),this.connectedCallback=this.connectedCallback.bind(this),this.disconnectedCallback=this.disconnectedCallback.bind(this),this.createLayout=this.createLayout.bind(this),this.addMainCanvas=this.addMainCanvas.bind(this),this.setMainCanvasSize=this.setMainCanvasSize.bind(this),this.setEditingTargetSize=this.setEditingTargetSize.bind(this),this.initOverlay=this.initOverlay.bind(this),this.addTargetImage=this.addTargetImage.bind(this),this.attachEvents=this.attachEvents.bind(this),this.attachWindowEvents=this.attachWindowEvents.bind(this),this.detachEvents=this.detachEvents.bind(this),this.detachWindowEvents=this.detachWindowEvents.bind(this),this.onCanvasPointerDown=this.onCanvasPointerDown.bind(this),this.onCanvasDblClick=this.onCanvasDblClick.bind(this),this.onKeyUp=this.onKeyUp.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerOut=this.onPointerOut.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.createMarker=this.createMarker.bind(this),this.addNewMarker=this.addNewMarker.bind(this),this.markerCreated=this.markerCreated.bind(this),this.markerStateChanged=this.markerStateChanged.bind(this),this.switchToSelectMode=this.switchToSelectMode.bind(this),this.showOutline=this.showOutline.bind(this),this.hideOutline=this.hideOutline.bind(this),this.getState=this.getState.bind(this),this.restoreState=this.restoreState.bind(this),this.undo=this.undo.bind(this),this.addUndoStep=this.addUndoStep.bind(this),this.undoStep=this.undoStep.bind(this),this.redo=this.redo.bind(this),this.redoStep=this.redoStep.bind(this),this.toggleLogo=this.toggleLogo.bind(this),this.addLogo=this.addLogo.bind(this),this.removeLogo=this.removeLogo.bind(this),this.attachShadow({mode:"open"})}connectedCallback(){this.dispatchEvent(new CustomEvent("areainit",{detail:{markerArea:this}})),b.addKeyAddListener(this.toggleLogo),this.createLayout(),this.addMainCanvas(),this.initOverlay(),this.attachEvents(),this._isInitialized=!0,void 0!==this.targetImage&&this.addTargetImage(),this.setMainCanvasSize(),this.toggleLogo(),this.dispatchEvent(new CustomEvent("areashow",{detail:{markerArea:this}}))}disconnectedCallback(){this.detachEvents()}createLayout(){var t;this.style.display="flex",this.style.width=""!==this.style.width?this.style.width:"100%",this.style.height=""!==this.style.height?this.style.height:"100%",this.style.position="relative",this._contentContainer=document.createElement("div"),this._contentContainer.style.display="flex",this._contentContainer.style.position="relative",this._contentContainer.style.flexGrow="2",this._contentContainer.style.flexShrink="1",this._contentContainer.style.overflow="hidden",this._canvasContainer=document.createElement("div"),this._canvasContainer.style.touchAction="pinch-zoom",this._canvasContainer.className="canvas-container",this._canvasContainer.style.display="grid",this._canvasContainer.style.gridTemplateColumns="1fr",this._canvasContainer.style.flexGrow="2",this._canvasContainer.style.flexShrink="2",this._canvasContainer.style.justifyItems="center",this._canvasContainer.style.alignItems="center",this._canvasContainer.style.overflow="auto",this._contentContainer.appendChild(this._canvasContainer),null===(t=this.shadowRoot)||void 0===t||t.appendChild(this._contentContainer)}addMainCanvas(){var i,e,s;this.width=(null===(i=this._contentContainer)||void 0===i?void 0:i.clientWidth)||0,this.height=(null===(e=this._contentContainer)||void 0===e?void 0:e.clientHeight)||0,this._mainCanvas=document.createElementNS("http://www.w3.org/2000/svg","svg"),this._mainCanvas.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.setMainCanvasSize(),this._mainCanvas.style.gridColumnStart="1",this._mainCanvas.style.gridRowStart="1",this._mainCanvas.style.pointerEvents="auto",this._mainCanvas.style.margin="10px",this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this._groupLayer=t.createGroup(),this._mainCanvas.appendChild(this._groupLayer),null===(s=this._canvasContainer)||void 0===s||s.appendChild(this._mainCanvas)}setMainCanvasSize(){void 0!==this._mainCanvas&&this._targetHeight>0&&this._targetWidth>0&&(this._mainCanvas.style.width=this._targetWidth*this.zoomLevel+"px",this._mainCanvas.style.height=this._targetHeight*this.zoomLevel+"px",this._mainCanvas.setAttribute("width",""+this._targetWidth*this.zoomLevel),this._mainCanvas.setAttribute("height",""+this._targetHeight*this.zoomLevel),this._mainCanvas.setAttribute("viewBox","0 0 "+this._targetWidth.toString()+" "+this._targetHeight.toString()),this.setEditingTargetSize())}setEditingTargetSize(){void 0!==this._editingTarget&&(this._editingTarget.width=this._targetWidth*this.zoomLevel,this._editingTarget.height=this._targetHeight*this.zoomLevel,this._editingTarget.style.width=this._targetWidth*this.zoomLevel+"px",this._editingTarget.style.height=this._targetHeight*this.zoomLevel+"px")}initOverlay(){var t;this._overlayContainer=document.createElement("div"),this._overlayContainer.style.pointerEvents="none",this._overlayContainer.style.display="flex",this._overlayContainer.style.alignItems="center",this._overlayContainer.style.justifyContent="center",this._overlayContainer.style.gridRowStart="1",this._overlayContainer.style.gridColumnStart="1",null===(t=this._canvasContainer)||void 0===t||t.appendChild(this._overlayContainer),this._overlayContentContainer=document.createElement("div"),this._overlayContentContainer.style.position="relative",this._overlayContentContainer.style.display="flex",this._overlayContainer.appendChild(this._overlayContentContainer)}addTargetImage(){this._isInitialized&&void 0===this._editingTarget&&void 0!==this.targetImage&&void 0!==this._canvasContainer&&void 0!==this._mainCanvas&&(this._editingTarget=document.createElement("img"),this._targetWidth=this._targetWidth>0?this._targetWidth:this.targetImage.clientWidth,this._targetHeight=this._targetHeight>0?this._targetHeight:this.targetImage.clientHeight,this._editingTarget.addEventListener("load",(t=>{if(void 0!==this._editingTarget){if(this._targetHeight<=0&&this._targetWidth<=0){const i=t.target;this._targetWidth=i.clientWidth>0?i.clientWidth:i.naturalWidth,this._targetHeight=i.clientHeight>0?i.clientHeight:i.naturalHeight}this._editingTarget.width=this._targetWidth,this._editingTarget.height=this._targetHeight,this._editingTarget.style.width=`${this._targetWidth}px`,this._editingTarget.style.height=`${this._targetHeight}px`,this._editingTarget.style.gridColumnStart="1",this._editingTarget.style.gridRowStart="1",this.setMainCanvasSize()}})),this._editingTarget.src=this.targetImage.src,this._canvasContainer.insertBefore(this._editingTarget,this._mainCanvas))}createMarker(t){let i=a;i="string"==typeof t?this.getMarkerTypeByName(t)||a:t;const e=this.markerEditors.get(i);if(e&&this._mainCanvas)if(this.setCurrentEditor(),this.addUndoStep(),this._currentMarkerEditor=this.addNewMarker(e,i),this._currentMarkerEditor.onMarkerCreated=this.markerCreated,this._currentMarkerEditor.onStateChanged=this.markerStateChanged,"drop"===this._currentMarkerEditor.creationStyle)this._mainCanvas.style.cursor="move";else this._mainCanvas.style.cursor="crosshair";return this._currentMarkerEditor}addNewMarker(i,e){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const s=t.createGroup();return this._mainCanvas.appendChild(s),new i({container:s,overlayContainer:this._overlayContentContainer,markerType:e})}markerCreated(t){if(this._mainCanvas){if(this.mode="select",this._mainCanvas.style.cursor="default",this.editors.push(t),this.setCurrentEditor(t),t.continuousCreation){const i=this.createMarker(t.marker.typeName);t.is(S)&&(null==i?void 0:i.is(S))&&(i.strokeColor=t.strokeColor,i.strokeWidth=t.strokeWidth,i.strokeDasharray=t.strokeDasharray)}this.addUndoStep(),this.dispatchEvent(new CustomEvent("markercreate",{detail:{markerArea:this,markerEditor:t}}))}}markerStateChanged(t){this.addUndoStep(),this.dispatchEvent(new CustomEvent("markerchange",{detail:{markerArea:this,markerEditor:t}}))}setCurrentEditor(t){this._currentMarkerEditor!==t&&void 0!==this._currentMarkerEditor&&(this._currentMarkerEditor.deselect(),this.dispatchEvent(new CustomEvent("markerdeselect",{detail:{markerArea:this,markerEditor:this._currentMarkerEditor}}))),this._currentMarkerEditor=t,void 0===this._currentMarkerEditor||this._currentMarkerEditor.isSelected||("new"!==this._currentMarkerEditor.state&&this._currentMarkerEditor.select(),this.dispatchEvent(new CustomEvent("markerselect",{detail:{markerArea:this,markerEditor:this._currentMarkerEditor}})))}onCanvasPointerDown(i){var e,s;if(this.touchPoints++,1===this.touchPoints||"touch"!==i.pointerType)if(void 0===this._currentMarkerEditor||"new"!==this._currentMarkerEditor.state&&"creating"!==this._currentMarkerEditor.state){if("select"===this.mode){const e=this.editors.find((t=>t.ownsTarget(i.target)));void 0!==e?(this.setCurrentEditor(e),this.isDragging=!0,this._currentMarkerEditor.pointerDown(t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel),null!==(s=i.target)&&void 0!==s?s:void 0)):(this.setCurrentEditor(),this.isDragging=!0,this.prevPanPoint={x:i.clientX,y:i.clientY})}}else this.isDragging=!0,this._currentMarkerEditor.pointerDown(t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel),null!==(e=i.target)&&void 0!==e?e:void 0)}onCanvasDblClick(i){var e;if("select"===this.mode){const s=this.editors.find((t=>t.ownsTarget(i.target)));void 0!==s&&s!==this._currentMarkerEditor&&this.setCurrentEditor(s),void 0!==this._currentMarkerEditor?this._currentMarkerEditor.dblClick(t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel),null!==(e=i.target)&&void 0!==e?e:void 0):this.setCurrentEditor()}}onPointerMove(i){if((1===this.touchPoints||"touch"!==i.pointerType)&&(void 0!==this._currentMarkerEditor||this.isDragging))if(void 0!==this._currentMarkerEditor&&"edit"===this._currentMarkerEditor.state||i.preventDefault(),void 0!==this._currentMarkerEditor){const e=t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel);this.showOutline(e),this._currentMarkerEditor.manipulate(e)}else this.zoomLevel>1&&this.panTo({x:i.clientX,y:i.clientY})}showOutline(i){if(this._currentMarkerEditor&&"drop"===this._currentMarkerEditor.creationStyle&&"new"===this._currentMarkerEditor.state){void 0===this._mainCanvas||this._mainCanvas.contains(this._newMarkerOutline)||this._mainCanvas.appendChild(this._newMarkerOutline);const e=this._currentMarkerEditor.marker.defaultSize;t.setAttributes(this._newMarkerOutline,[["d",this._currentMarkerEditor.marker.getOutline()]]),this._newMarkerOutline.style.transform=`translate(${i.x-e.width/2}px, ${i.y-e.height/2}px)`}}hideOutline(){var t;(null===(t=this._mainCanvas)||void 0===t?void 0:t.contains(this._newMarkerOutline))&&this._mainCanvas.removeChild(this._newMarkerOutline)}onPointerUp(i){this.touchPoints>0&&this.touchPoints--,0===this.touchPoints&&this.isDragging&&void 0!==this._currentMarkerEditor&&(this._currentMarkerEditor.pointerUp(t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel)),this.hideOutline()),this.isDragging=!1,this.addUndoStep()}onPointerOut(){this.touchPoints>0&&this.touchPoints--,this.hideOutline()}onKeyUp(t){void 0!==this._currentMarkerEditor&&("Delete"===t.key||t.key)}attachEvents(){var t,i,e;this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),null===(t=this._mainCanvas)||void 0===t||t.addEventListener("pointerdown",this.onCanvasPointerDown),null===(i=this._mainCanvas)||void 0===i||i.addEventListener("touchmove",(t=>t.preventDefault())),null===(e=this._mainCanvas)||void 0===e||e.addEventListener("dblclick",this.onCanvasDblClick),this.attachWindowEvents()}attachWindowEvents(){window.addEventListener("pointermove",this.onPointerMove),window.addEventListener("pointerup",this.onPointerUp),window.addEventListener("pointerleave",this.onPointerUp),window.addEventListener("pointercancel",this.onPointerOut),window.addEventListener("pointerout",this.onPointerOut),window.addEventListener("keyup",this.onKeyUp)}detachEvents(){this.detachWindowEvents()}detachWindowEvents(){}getMarkerTypeByName(t){let i;return this.markerEditors.forEach(((e,s)=>{s.typeName===t&&(i=s)})),i}switchToSelectMode(){this.setCurrentEditor(),this._mainCanvas&&(this._mainCanvas.style.cursor="default")}getState(){const t={version:3,width:this.targetWidth,height:this.targetHeight,markers:this.editors.map((t=>t.getState()))};return JSON.parse(JSON.stringify(t))}restoreState(t){var i;const e=JSON.parse(JSON.stringify(t));for(this.editors.splice(0);null===(i=this._mainCanvas)||void 0===i?void 0:i.lastChild;)this._mainCanvas.removeChild(this._mainCanvas.lastChild);e.markers.forEach((t=>{const i=this.getMarkerTypeByName(t.typeName);if(void 0!==i){const e=this.markerEditors.get(i);if(void 0!==e){const s=this.addNewMarker(e,i);s.restoreState(t),this.editors.push(s)}}})),e.width&&e.height&&(e.width!==this.targetWidth||e.height!==this.targetHeight)&&this.scaleMarkers(this.targetWidth/e.width,this.targetHeight/e.height),this.dispatchEvent(new CustomEvent("arearestorestate",{detail:{markerArea:this}}))}scaleMarkers(t,i){let e;e=this._currentMarkerEditor,this.setCurrentEditor(),this.editors.forEach((e=>{e!==this._currentMarkerEditor&&e.scale(t,i)})),void 0!==e&&this.setCurrentEditor(e)}toggleLogo(){b.isLicensed("MJS3")?this.removeLogo():this.addLogo()}addLogo(){var t,i;void 0!==this._logoUI&&(null===(t=this._contentContainer)||void 0===t||t.removeChild(this._logoUI)),this._logoUI=document.createElement("div"),this._logoUI.style.display="inline-block",this._logoUI.style.margin="0px",this._logoUI.style.padding="0px",this._logoUI.style.fill="#333333";const e=document.createElement("a");e.href="https://markerjs.com/",e.target="_blank",e.innerHTML=E,e.title="Powered by marker.js",e.style.display="grid",e.style.alignItems="center",e.style.justifyItems="center",e.style.padding="3px",e.style.width="20px",e.style.height="20px",e.style.cursor="pointer",this._logoUI.appendChild(e),null===(i=this._contentContainer)||void 0===i||i.appendChild(this._logoUI),this._logoUI.style.position="absolute",this._logoUI.style.pointerEvents="all",this.positionLogo()}removeLogo(){this._contentContainer&&void 0!==this._logoUI&&this._contentContainer.contains(this._logoUI)&&this._contentContainer.removeChild(this._logoUI)}positionLogo(){this._logoUI&&this._contentContainer&&(this._logoUI.style.left="20px",this._logoUI.style.top=this._contentContainer.offsetHeight-this._logoUI.clientHeight-20+"px")}get isUndoPossible(){return!(!this.undoRedoManager||!this.undoRedoManager.isUndoPossible)}get isRedoPossible(){return!(!this.undoRedoManager||!this.undoRedoManager.isRedoPossible)}addUndoStep(){if(void 0===this._currentMarkerEditor||"edit"!==this._currentMarkerEditor.state){const t=this.getState(),i=this.undoRedoManager.getLastUndoStep();if(!i||i.width===t.width&&i.height===t.height){this.undoRedoManager.addUndoStep(t)&&this.dispatchEvent(new CustomEvent("areastatechange",{detail:{markerArea:this}}))}else this.undoRedoManager.replaceLastUndoStep(t),this.dispatchEvent(new CustomEvent("areastatechange",{detail:{markerArea:this}}))}}undo(){this.addUndoStep(),this.undoStep()}undoStep(){const t=this.undoRedoManager.undo();void 0!==t&&this.restoreState(t)}redo(){this.redoStep()}redoStep(){const t=this.undoRedoManager.redo();void 0!==t&&(this.restoreState(t),this.dispatchEvent(new CustomEvent("areastatechange",{detail:{markerArea:this}})))}addEventListener(t,i,e){super.addEventListener(t,i,e)}removeEventListener(t,i,e){super.removeEventListener(t,i,e)}}window&&window.customElements&&void 0===window.customElements.get("mjs-marker-area")&&window.customElements.define("mjs-marker-area",T);class B extends HTMLElement{get targetWidth(){return this._targetWidth}set targetWidth(t){this._targetWidth=t,this.setMainCanvasSize()}get targetHeight(){return this._targetHeight}set targetHeight(t){this._targetHeight=t,this.setMainCanvasSize()}get targetImage(){return this._targetImage}set targetImage(t){this._targetImage=t,void 0!==t&&this.addTargetImage()}get zoomLevel(){return this._zoomLevel}set zoomLevel(t){this._zoomLevel=t,this._canvasContainer&&this._contentContainer&&this._mainCanvas&&(this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this.setEditingTargetSize(),this._canvasContainer.scrollTo({left:(this._mainCanvas.clientWidth-this._canvasContainer.clientWidth)/2,top:(this._mainCanvas.clientHeight-this._canvasContainer.clientHeight)/2}))}constructor(){super(),this.width=0,this.height=0,this._targetWidth=-1,this._targetHeight=-1,this.markerTypes=[],this.markers=[],this._zoomLevel=1,this._isInitialized=!1,this.markerTypes=[a,c,h,n,d],this.connectedCallback=this.connectedCallback.bind(this),this.disconnectedCallback=this.disconnectedCallback.bind(this),this.createLayout=this.createLayout.bind(this),this.addMainCanvas=this.addMainCanvas.bind(this),this.setMainCanvasSize=this.setMainCanvasSize.bind(this),this.setEditingTargetSize=this.setEditingTargetSize.bind(this),this.addTargetImage=this.addTargetImage.bind(this),this.attachEvents=this.attachEvents.bind(this),this.attachWindowEvents=this.attachWindowEvents.bind(this),this.detachEvents=this.detachEvents.bind(this),this.detachWindowEvents=this.detachWindowEvents.bind(this),this.addNewMarker=this.addNewMarker.bind(this),this.show=this.show.bind(this),this.scaleMarkers=this.scaleMarkers.bind(this),this.toggleLogo=this.toggleLogo.bind(this),this.addLogo=this.addLogo.bind(this),this.removeLogo=this.removeLogo.bind(this),this.attachShadow({mode:"open"})}connectedCallback(){this.dispatchEvent(new CustomEvent("viewinit",{detail:{markerView:this}})),b.addKeyAddListener(this.toggleLogo),this.createLayout(),this.addMainCanvas(),this.attachEvents(),this._isInitialized=!0,void 0!==this.targetImage&&this.addTargetImage(),this.setMainCanvasSize(),this.toggleLogo(),this.dispatchEvent(new CustomEvent("viewshow",{detail:{markerView:this}}))}disconnectedCallback(){this.detachEvents()}createLayout(){var t;this.style.display="flex",this.style.width=""!==this.style.width?this.style.width:"100%",this.style.height=""!==this.style.height?this.style.height:"100%",this.style.position="relative",this._contentContainer=document.createElement("div"),this._contentContainer.style.display="flex",this._contentContainer.style.position="relative",this._contentContainer.style.flexGrow="2",this._contentContainer.style.flexShrink="1",this._contentContainer.style.overflow="hidden",this._canvasContainer=document.createElement("div"),this._canvasContainer.style.touchAction="pinch-zoom",this._canvasContainer.className="canvas-container",this._canvasContainer.style.display="grid",this._canvasContainer.style.gridTemplateColumns="1fr",this._canvasContainer.style.flexGrow="2",this._canvasContainer.style.flexShrink="2",this._canvasContainer.style.justifyItems="center",this._canvasContainer.style.alignItems="center",this._canvasContainer.style.overflow="auto",this._contentContainer.appendChild(this._canvasContainer),null===(t=this.shadowRoot)||void 0===t||t.appendChild(this._contentContainer)}addMainCanvas(){var i,e,s;this.width=(null===(i=this._contentContainer)||void 0===i?void 0:i.clientWidth)||0,this.height=(null===(e=this._contentContainer)||void 0===e?void 0:e.clientHeight)||0,this._mainCanvas=document.createElementNS("http://www.w3.org/2000/svg","svg"),this._mainCanvas.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.setMainCanvasSize(),this._mainCanvas.style.gridColumnStart="1",this._mainCanvas.style.gridRowStart="1",this._mainCanvas.style.pointerEvents="auto",this._mainCanvas.style.margin="10px",this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this._groupLayer=t.createGroup(),this._mainCanvas.appendChild(this._groupLayer),null===(s=this._canvasContainer)||void 0===s||s.appendChild(this._mainCanvas)}setMainCanvasSize(){void 0!==this._mainCanvas&&this._targetHeight>0&&this._targetWidth>0&&(this._mainCanvas.style.width=this._targetWidth*this.zoomLevel+"px",this._mainCanvas.style.height=this._targetHeight*this.zoomLevel+"px",this._mainCanvas.setAttribute("width",""+this._targetWidth*this.zoomLevel),this._mainCanvas.setAttribute("height",""+this._targetHeight*this.zoomLevel),this._mainCanvas.setAttribute("viewBox","0 0 "+this._targetWidth.toString()+" "+this._targetHeight.toString()),this.setEditingTargetSize())}setEditingTargetSize(){void 0!==this._editingTarget&&(this._editingTarget.width=this._targetWidth*this.zoomLevel,this._editingTarget.height=this._targetHeight*this.zoomLevel,this._editingTarget.style.width=this._targetWidth*this.zoomLevel+"px",this._editingTarget.style.height=this._targetHeight*this.zoomLevel+"px")}addTargetImage(){this._isInitialized&&void 0===this._editingTarget&&void 0!==this.targetImage&&void 0!==this._canvasContainer&&void 0!==this._mainCanvas&&(this._editingTarget=document.createElement("img"),this._targetWidth=this._targetWidth>0?this._targetWidth:this.targetImage.clientWidth,this._targetHeight=this._targetHeight>0?this._targetHeight:this.targetImage.clientHeight,this._editingTarget.addEventListener("load",(t=>{if(void 0!==this._editingTarget){if(this._targetHeight<=0&&this._targetWidth<=0){const i=t.target;this._targetWidth=i.clientWidth>0?i.clientWidth:i.naturalWidth,this._targetHeight=i.clientHeight>0?i.clientHeight:i.naturalHeight}this._editingTarget.width=this._targetWidth,this._editingTarget.height=this._targetHeight,this._editingTarget.style.width=`${this._targetWidth}px`,this._editingTarget.style.height=`${this._targetHeight}px`,this._editingTarget.style.gridColumnStart="1",this._editingTarget.style.gridRowStart="1",this.setMainCanvasSize()}})),this._editingTarget.src=this.targetImage.src,this._canvasContainer.insertBefore(this._editingTarget,this._mainCanvas))}addNewMarker(i){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const e=t.createGroup();return this._mainCanvas.appendChild(e),new i(e)}attachEvents(){this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.attachWindowEvents()}attachWindowEvents(){}detachEvents(){this.detachWindowEvents()}detachWindowEvents(){}getMarkerTypeByName(t){let i;return this.markerTypes.forEach((e=>{e.typeName===t&&(i=e)})),i}show(t){var i;const e=JSON.parse(JSON.stringify(t));for(this.markers.splice(0);null===(i=this._mainCanvas)||void 0===i?void 0:i.lastChild;)this._mainCanvas.removeChild(this._mainCanvas.lastChild);e.markers.forEach((t=>{const i=this.getMarkerTypeByName(t.typeName);if(void 0!==i){const e=this.addNewMarker(i);e.restoreState(t),this.markers.push(e)}})),e.width&&e.height&&(e.width!==this.targetWidth||e.height!==this.targetHeight)&&this.scaleMarkers(this.targetWidth/e.width,this.targetHeight/e.height),this.dispatchEvent(new CustomEvent("viewrestorestate",{detail:{markerView:this}}))}scaleMarkers(t,i){this.markers.forEach((e=>{e.scale(t,i)}))}toggleLogo(){b.isLicensed("MJS3")?this.removeLogo():this.addLogo()}addLogo(){var t,i;void 0!==this._logoUI&&(null===(t=this._contentContainer)||void 0===t||t.removeChild(this._logoUI)),this._logoUI=document.createElement("div"),this._logoUI.style.display="inline-block",this._logoUI.style.margin="0px",this._logoUI.style.padding="0px",this._logoUI.style.fill="#333333";const e=document.createElement("a");e.href="https://markerjs.com/",e.target="_blank",e.innerHTML=E,e.title="Powered by marker.js",e.style.display="grid",e.style.alignItems="center",e.style.justifyItems="center",e.style.padding="3px",e.style.width="20px",e.style.height="20px",e.style.cursor="pointer",this._logoUI.appendChild(e),null===(i=this._contentContainer)||void 0===i||i.appendChild(this._logoUI),this._logoUI.style.position="absolute",this._logoUI.style.pointerEvents="all",this.positionLogo()}removeLogo(){this._contentContainer&&void 0!==this._logoUI&&this._contentContainer.contains(this._logoUI)&&this._contentContainer.removeChild(this._logoUI)}positionLogo(){this._logoUI&&this._contentContainer&&(this._logoUI.style.left="20px",this._logoUI.style.top=this._contentContainer.offsetHeight-this._logoUI.clientHeight-20+"px")}addEventListener(t,i,e){super.addEventListener(t,i,e)}removeEventListener(t,i,e){super.removeEventListener(t,i,e)}}window&&window.customElements&&void 0===window.customElements.get("mjs-marker-view")&&window.customElements.define("mjs-marker-view",B);export{T as MarkerArea,B as MarkerView,t as SvgHelper};
+class t{static createDefs(){return document.createElementNS("http://www.w3.org/2000/svg","defs")}static setAttributes(t,i){for(const[e,s]of i)t.setAttribute(e,s)}static createRect(i,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","rect");return r.setAttribute("width",i.toString()),r.setAttribute("height",e.toString()),s&&t.setAttributes(r,s),r}static createLine(i,e,s,r,a){const h=document.createElementNS("http://www.w3.org/2000/svg","line");return h.setAttribute("x1",i.toString()),h.setAttribute("y1",e.toString()),h.setAttribute("x2",s.toString()),h.setAttribute("y2",r.toString()),a&&t.setAttributes(h,a),h}static createPolygon(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","polygon");return s.setAttribute("points",i),e&&t.setAttributes(s,e),s}static createCircle(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","circle");return s.setAttribute("cx",(i/2).toString()),s.setAttribute("cy",(i/2).toString()),s.setAttribute("r",i.toString()),e&&t.setAttributes(s,e),s}static createEllipse(i,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","ellipse");return r.setAttribute("cx",(i/2).toString()),r.setAttribute("cy",(e/2).toString()),r.setAttribute("rx",(i/2).toString()),r.setAttribute("ry",(e/2).toString()),s&&t.setAttributes(r,s),r}static createGroup(i){const e=document.createElementNS("http://www.w3.org/2000/svg","g");return i&&t.setAttributes(e,i),e}static createTransform(){return document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGTransform()}static createMarker(i,e,s,r,a,h,o){const n=document.createElementNS("http://www.w3.org/2000/svg","marker");return t.setAttributes(n,[["id",i],["orient",e],["markerWidth",s.toString()],["markerHeight",r.toString()],["refX",a.toString()],["refY",h.toString()]]),n.appendChild(o),n}static createText(i){const e=document.createElementNS("http://www.w3.org/2000/svg","text");return e.setAttribute("x","0"),e.setAttribute("y","0"),i&&t.setAttributes(e,i),e}static createTSpan(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","tspan");return s.textContent=i,e&&t.setAttributes(s,e),s}static createImage(i){const e=document.createElementNS("http://www.w3.org/2000/svg","image");return i&&t.setAttributes(e,i),e}static createPoint(t,i){const e=document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGPoint();return e.x=t,e.y=i,e}static createPath(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","path");return s.setAttribute("d",i),e&&t.setAttributes(s,e),s}static createForeignObject(i){const e=document.createElementNS("http://www.w3.org/2000/svg","foreignObject");return e.setAttribute("x","0"),e.setAttribute("y","0"),i&&t.setAttributes(e,i),e}static clientToLocalCoordinates(t,i,e,s=1){if(t){const r=t.getBoundingClientRect();return{x:(i-r.left)/s,y:(e-r.top)/s}}return{x:i,y:e}}static createSvgFromString(t){const i=document.createElementNS("http://www.w3.org/2000/svg","svg");return i.innerHTML=t,i}}class i{get typeName(){return Object.getPrototypeOf(this).constructor.typeName}get container(){return this._container}get strokeColor(){return this._strokeColor}set strokeColor(t){this._strokeColor=t,this.applyStrokeColor()}applyStrokeColor(){}get fillColor(){return this._fillColor}set fillColor(t){this._fillColor=t,this.applyFillColor()}applyFillColor(){}get strokeWidth(){return this._strokeWidth}set strokeWidth(t){this._strokeWidth=t,this.applyStrokeWidth()}applyStrokeWidth(){}get strokeDasharray(){return this._strokeDasharray}set strokeDasharray(t){this._strokeDasharray=t,this.applyStrokeDasharray()}applyStrokeDasharray(){}get opacity(){return this._opacity}set opacity(t){this._opacity=t,this.applyOpacity()}applyOpacity(){}constructor(t){this.defaultSize={width:50,height:20},this.stage="normal",this._strokeColor="transparent",this._fillColor="transparent",this._strokeWidth=0,this._strokeDasharray="",this._opacity=1,this._container=t,this.applyFillColor=this.applyFillColor.bind(this),this.applyStrokeColor=this.applyStrokeColor.bind(this),this.applyStrokeWidth=this.applyStrokeWidth.bind(this),this.applyStrokeDasharray=this.applyStrokeDasharray.bind(this),this.applyOpacity=this.applyOpacity.bind(this)}ownsTarget(t){return!1}dispose(){}addMarkerVisualToContainer(t){this.container.childNodes.length>0?this.container.insertBefore(t,this.container.childNodes[0]):this.container.appendChild(t)}getOutline(){return""}getState(){return{typeName:i.typeName,notes:this.notes,strokeColor:this._strokeColor,strokeWidth:this._strokeWidth,strokeDasharray:this._strokeDasharray,opacity:this._opacity}}restoreState(t){var i,e,s,r;this.notes=t.notes,this._strokeColor=null!==(i=t.strokeColor)&&void 0!==i?i:this._strokeColor,this._strokeWidth=null!==(e=t.strokeWidth)&&void 0!==e?e:this._strokeWidth,this._strokeDasharray=null!==(s=t.strokeDasharray)&&void 0!==s?s:this._strokeDasharray,this._opacity=null!==(r=t.opacity)&&void 0!==r?r:this._opacity}scale(t,i){}}i.typeName="MarkerBase";class e{static toITransformMatrix(t){return{a:t.a,b:t.b,c:t.c,d:t.d,e:t.e,f:t.f}}static toSVGMatrix(t,i){return t.a=i.a,t.b=i.b,t.c=i.c,t.d=i.d,t.e=i.e,t.f=i.f,t}}class s extends i{get centerX(){return this.left+this.width/2}get centerY(){return this.top+this.height/2}get visual(){return this._visual}set visual(i){this._visual=i;const e=t.createTransform();this._visual.transform.baseVal.appendItem(e)}constructor(i){super(i),this.left=0,this.top=0,this.width=0,this.height=0,this.rotationAngle=0,this.rotatePoint=this.rotatePoint.bind(this),this.unrotatePoint=this.unrotatePoint.bind(this),this.container.transform.baseVal.appendItem(t.createTransform())}moveVisual(t){this.visual&&(this.visual.style.transform=`translate(${t.x}px, ${t.y}px)`)}setSize(){this.moveVisual({x:this.left,y:this.top})}rotate(t){if(Math.abs(t.x-this.centerX)>.1){const i=Math.sign(t.x-this.centerX);this.rotationAngle=180*Math.atan((t.y-this.centerY)/(t.x-this.centerX))/Math.PI+90*i,this.applyRotation()}}applyRotation(){const t=this.container.transform.baseVal.getItem(0);t.setRotate(this.rotationAngle,this.centerX,this.centerY),this.container.transform.baseVal.replaceItem(t,0)}rotatePoint(i){if(0===this.rotationAngle)return i;const e=this.container.getCTM();if(null===e)return i;let s=t.createPoint(i.x,i.y);s=s.matrixTransform(e);return{x:s.x,y:s.y}}unrotatePoint(i){if(0===this.rotationAngle)return i;let e=this.container.getCTM();if(null===e)return i;e=e.inverse();let s=t.createPoint(i.x,i.y);s=s.matrixTransform(e);return{x:s.x,y:s.y}}getOutline(){return`M 0 0 \n    H ${this.defaultSize} \n    V ${this.defaultSize} \n    H 0 \n    V 0 Z`}getState(){return Object.assign({left:this.left,top:this.top,width:this.width,height:this.height,rotationAngle:this.rotationAngle,visualTransformMatrix:e.toITransformMatrix(this.visual.transform.baseVal.getItem(0).matrix),containerTransformMatrix:e.toITransformMatrix(this.container.transform.baseVal.getItem(0).matrix)},super.getState())}restoreState(t){super.restoreState(t);const i=t;this.left=i.left,this.top=i.top,this.width=i.width,this.height=i.height,this.rotationAngle=i.rotationAngle,this.moveVisual({x:this.left,y:this.top}),i.visualTransformMatrix&&i.containerTransformMatrix?(this.visual.transform.baseVal.getItem(0).setMatrix(e.toSVGMatrix(this.visual.transform.baseVal.getItem(0).matrix,i.visualTransformMatrix)),this.container.transform.baseVal.getItem(0).setMatrix(e.toSVGMatrix(this.container.transform.baseVal.getItem(0).matrix,i.containerTransformMatrix))):this.applyRotation()}scale(t,i){super.scale(t,i);const e=this.rotatePoint({x:this.left,y:this.top}),s=this.unrotatePoint({x:e.x*t,y:e.y*i});this.left=s.x,this.top=s.y,this.width=this.width*t,this.height=this.height*i}}class r extends s{applyStrokeColor(){this.visual&&t.setAttributes(this.visual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visual&&t.setAttributes(this.visual,[["stroke-width",this._strokeWidth.toString()]])}applyStrokeDasharray(){this.visual&&t.setAttributes(this.visual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.createVisual=this.createVisual.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual)}getPath(t=this.width,i=this.height){return"M0,0"}getOutline(){return this.getPath(this.defaultSize.width,this.defaultSize.height)}createVisual(){this.visual=t.createPath(this.getPath(),[["fill","transparent"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]]),this.addMarkerVisualToContainer(this.visual)}adjustVisual(){this.visual&&t.setAttributes(this.visual,[["d",this.getPath()],["fill","transparent"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]])}setSize(){super.setSize(),this.visual&&t.setAttributes(this.visual,[["d",this.getPath()]])}restoreState(t){this.createVisual(),super.restoreState(t),this.adjustVisual()}scale(t,i){super.scale(t,i),this.strokeWidth*=(t+i)/2,this.setSize()}}r.title="Shape outline marker";class a extends r{get fillColor(){return this._fillColor}set fillColor(i){this._fillColor=i,this.visual&&t.setAttributes(this.visual,[["fill",this._fillColor]])}constructor(t){super(t),this._fillColor="transparent",this.createVisual=this.createVisual.bind(this)}createVisual(){super.createVisual(),this.visual&&t.setAttributes(this.visual,[["fill",this._fillColor]])}getState(){return Object.assign({fillColor:this._fillColor},super.getState())}restoreState(t){const i=t;super.restoreState(t),this.fillColor=i.fillColor,this.setSize()}}a.title="Shape marker";class h extends r{constructor(t){super(t),this.strokeColor="#ff0000",this.strokeWidth=3}getPath(t=this.width,i=this.height){return`M 0 0 \n      H ${t} \n      V ${i} \n      H 0 \n      V 0 Z`}getState(){const t=super.getState();return t.typeName=h.typeName,t}}h.typeName="FrameMarker",h.title="Frame marker";class o extends i{applyStrokeColor(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke",this._strokeColor],["fill",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&t.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.x1=0,this.y1=0,this.x2=0,this.y2=0,this.adjustVisual=this.adjustVisual.bind(this),this.getState=this.getState.bind(this),this.restoreState=this.restoreState.bind(this),this.scale=this.scale.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual&&t!==this.selectorVisual&&t!==this.visibleVisual)}getPath(){return"M0,0"}createVisual(){this.visual=t.createGroup(),this.selectorVisual=t.createPath(this.getPath(),[["stroke","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]),this.visibleVisual=t.createPath(this.getPath(),[["stroke",this.strokeColor],["fill",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-linejoin","round"]]),this.visual.appendChild(this.selectorVisual),this.visual.appendChild(this.visibleVisual),this.addMarkerVisualToContainer(this.visual)}adjustVisual(){this.selectorVisual&&this.visibleVisual&&(t.setAttributes(this.selectorVisual,[["d",this.getPath()]]),t.setAttributes(this.visibleVisual,[["d",this.getPath()]]),t.setAttributes(this.visibleVisual,[["stroke",this.strokeColor]]),t.setAttributes(this.visibleVisual,[["fill",this.strokeColor]]),t.setAttributes(this.visibleVisual,[["stroke-width",this.strokeWidth.toString()]]),t.setAttributes(this.visibleVisual,[["stroke-dasharray",this.strokeDasharray.toString()]]))}getState(){return Object.assign({x1:this.x1,y1:this.y1,x2:this.x2,y2:this.y2},super.getState())}restoreState(t){super.restoreState(t);const i=t;this.x1=i.x1,this.y1=i.y1,this.x2=i.x2,this.y2=i.y2,this.createVisual(),this.adjustVisual()}scale(t,i){super.scale(t,i),this.x1=this.x1*t,this.y1=this.y1*i,this.x2=this.x2*t,this.y2=this.y2*i,this.strokeWidth*=(t+i)/2,this.adjustVisual()}}class n extends o{constructor(t){super(t),this.strokeColor="#ff0000",this.strokeWidth=3,this.createVisual=this.createVisual.bind(this)}getPath(){return`M ${this.x1} ${this.y1} L ${this.x2} ${this.y2}`}getState(){const t=super.getState();return t.typeName=n.typeName,t}}n.typeName="LineMarker",n.title="Line marker";class l extends n{get arrowType(){return this._arrowType}set arrowType(t){this._arrowType=t,this.adjustVisual()}constructor(t){super(t),this._arrowType="end"}getPath(){const t=10+2*this.strokeWidth,i=Math.min(Math.max(5,2*this.strokeWidth),this.strokeWidth+5),e=.7,s=this.x2-this.x1,r=this.y2-this.y1,a=Math.atan2(r,s),h=this.x1+t*e*Math.cos(a),o=this.y1+t*e*Math.sin(a),n=this.x1+t*Math.cos(a),l=this.y1+t*Math.sin(a),d=n+i*Math.sin(a),c=l-i*Math.cos(a),p=n-i*Math.sin(a),u=l+i*Math.cos(a),g=this.x2-t*e*Math.cos(a),m=this.y2-t*e*Math.sin(a),v=this.x2-t*Math.cos(a),y=this.y2-t*Math.sin(a),_=v+i*Math.sin(a),k=y-i*Math.cos(a),x=v-i*Math.sin(a),C=y+i*Math.cos(a);return`${"start"===this.arrowType||"both"===this.arrowType?`M ${h} ${o}\n    L ${d} ${c} L ${this.x1} ${this.y1} L ${p} ${u} L ${h} ${o}\n    L ${h} ${o}`:`M ${this.x1} ${this.y1}`} ${"end"===this.arrowType||"both"===this.arrowType?`L ${g} ${m} \n    L ${_} ${k} L ${this.x2} ${this.y2} L ${x} ${C} L ${g} ${m} Z`:`L ${this.x2} ${this.y2}`}`}applyStrokeWidth(){super.applyStrokeWidth(),this.adjustVisual()}getState(){const t=Object.assign({arrowType:this.arrowType},super.getState());return t.typeName=l.typeName,t}restoreState(t){const i=t;this.arrowType=i.arrowType,super.restoreState(t)}}l.typeName="ArrowMarker",l.title="Arrow marker";class d extends n{constructor(t){super(t)}getPath(){const t=5+3*this.strokeWidth,i=this.x2-this.x1,e=this.y2-this.y1,s=Math.atan2(e,i),r=this.x1+t*Math.sin(s),a=this.y1-t*Math.cos(s),h=this.x1-t*Math.sin(s),o=this.y1+t*Math.cos(s),n=this.x2+t*Math.sin(s),l=this.y2-t*Math.cos(s),d=this.x2-t*Math.sin(s),c=this.y2+t*Math.cos(s);return`M ${r} ${a}\n      L ${h} ${o}\n      M ${this.x1} ${this.y1}\n      L ${this.x2} ${this.y2}\n      M ${n} ${l}\n      L ${d} ${c}\n      `}applyStrokeWidth(){super.applyStrokeWidth(),this.adjustVisual()}getState(){const t=super.getState();return t.typeName=d.typeName,t}}d.typeName="MeasurementMarker",d.title="Measurement marker";class c extends i{applyStrokeColor(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&t.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.points=[],this.selectorVisualLines=[],this.strokeColor="#ff0000",this.strokeWidth=3,this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.getState=this.getState.bind(this),this.restoreState=this.restoreState.bind(this),this.scale=this.scale.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual&&t!==this.selectorVisual&&t!==this.visibleVisual&&!this.selectorVisualLines.some((i=>i===t)))}getPath(){return this.points.length>1?this.points.map(((t,i)=>`${0===i?"M":"L"}${t.x},${t.y}`)).join(" ")+("creating"!==this.stage?" Z":""):"M0,0"}createVisual(){this.visual=t.createGroup(),this.visibleVisual=t.createPath(this.getPath(),[["stroke",this.strokeColor],["fill","transparent"],["stroke-width",this.strokeWidth.toString()]]),this.visual.appendChild(this.visibleVisual),this.createSelectorVisual(),this.addMarkerVisualToContainer(this.visual)}createSelectorVisual(){this.visual&&(this.selectorVisual=t.createGroup(),this.visual.appendChild(this.selectorVisual),this.points.forEach((()=>{this.addSelectorLine()})))}adjustVisual(){this.selectorVisual&&this.visibleVisual&&(t.setAttributes(this.visibleVisual,[["d",this.getPath()]]),t.setAttributes(this.visibleVisual,[["stroke",this.strokeColor]]),t.setAttributes(this.visibleVisual,[["stroke-width",this.strokeWidth.toString()]]),t.setAttributes(this.visibleVisual,[["stroke-dasharray",this.strokeDasharray.toString()]]),this.adjustSelectorVisual())}adjustSelectorVisual(){if(this.selectorVisual){const i=this.points.length-this.selectorVisualLines.length;if(i>0)for(let t=0;t<i;t++)this.addSelectorLine();else if(i<0)for(let t=0;t<-i;t++)this.selectorVisual.removeChild(this.selectorVisualLines.pop());this.selectorVisualLines.forEach(((i,e)=>{t.setAttributes(i,[["x1",this.points[e].x.toString()],["y1",this.points[e].y.toString()],["x2",this.points[(e+1)%this.points.length].x.toString()],["y2",this.points[(e+1)%this.points.length].y.toString()]])}))}}addSelectorLine(){const i=t.createLine(0,0,0,0,[["stroke","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]);this.selectorVisual.appendChild(i),this.selectorVisualLines.push(i)}getState(){const t=Object.assign({points:this.points},super.getState());return t.typeName=c.typeName,t}restoreState(t){super.restoreState(t);const i=t;this.points=i.points,this.createVisual(),this.adjustVisual()}scale(t,i){super.scale(t,i),this.points.forEach((e=>{e.x=e.x*t,e.y=e.y*i})),this.adjustVisual()}}c.typeName="PolygonMarker",c.title="Polygon marker";class p extends i{applyStrokeColor(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&t.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.points=[],this.strokeColor="#ff0000",this.strokeWidth=3,this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.getState=this.getState.bind(this),this.restoreState=this.restoreState.bind(this),this.scale=this.scale.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual&&t!==this.selectorVisual&&t!==this.visibleVisual)}getPath(){return this.points.length>1?this.points.map(((t,i)=>`${0===i?"M":"L"}${t.x},${t.y}`)).join(" "):"M0,0"}createVisual(){this.visual=t.createGroup(),this.selectorVisual=t.createPath(this.getPath(),[["stroke","transparent"],["fill","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]),this.visibleVisual=t.createPath(this.getPath(),[["stroke",this.strokeColor],["fill","transparent"],["stroke-width",this.strokeWidth.toString()]]),this.visual.appendChild(this.selectorVisual),this.visual.appendChild(this.visibleVisual),this.addMarkerVisualToContainer(this.visual)}adjustVisual(){if(this.selectorVisual&&this.visibleVisual){const i=this.getPath();t.setAttributes(this.selectorVisual,[["d",i]]),t.setAttributes(this.visibleVisual,[["d",i]]),t.setAttributes(this.visibleVisual,[["stroke",this.strokeColor]]),t.setAttributes(this.visibleVisual,[["stroke-width",this.strokeWidth.toString()]]),t.setAttributes(this.visibleVisual,[["stroke-dasharray",this.strokeDasharray.toString()]])}}getState(){const t=Object.assign({points:this.points},super.getState());return t.typeName=p.typeName,t}restoreState(t){super.restoreState(t);const i=t;this.points=i.points,this.createVisual(),this.adjustVisual()}scale(t,i){super.scale(t,i),this.points.forEach((e=>{e.x=e.x*t,e.y=e.y*i})),this.adjustVisual()}}p.typeName="FreehandMarker",p.title="Freehand marker";class u{get text(){return this._text}set text(t){this._text=t,this.renderText()}get boundingBox(){return this._boundingBox}set boundingBox(t){this._boundingBox=t,this.renderText()}get labelBackground(){return this._labelBackground}get textElement(){return this._textElement}set color(i){this.textElement&&t.setAttributes(this._textElement,[["fill",i]]),this._color=i}get color(){return this._color}get fontFamily(){return this._fontFamily}set fontFamily(t){this._textElement&&(this._textElement.style.fontFamily=t),this._fontFamily=t,this.positionText()}get fontSize(){return this._fontSize}set fontSize(t){this._textElement&&(this._textElement.style.fontSize=`${t.value}${t.units}`),this._fontSize=t,this.positionText()}constructor(i){this._text="",this.offsetX=0,this.offsetY=0,this._boundingBox=new DOMRect,this._labelBackground=t.createRect(10,10,[["fill","white"]]),this._textElement=t.createText(),this._color="transparent",this._fontFamily="",this._fontSize={value:1,units:"rem",step:.1},this.wordWrap=!1,this.prevWrappedText="",this.setupTextElement(),void 0!==i&&(this.text=i),this.setupTextElement=this.setupTextElement.bind(this),this.renderText=this.renderText.bind(this),this.positionText=this.positionText.bind(this),this.ownsTarget=this.ownsTarget.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.showControlBox=this.showControlBox.bind(this),this.hideControlBox=this.hideControlBox.bind(this),this.applyFontStyles=this.applyFontStyles.bind(this),this.wrapText=this.wrapText.bind(this)}ownsTarget(t){if(t===this._textElement)return!0;{let i=!1;return this._textElement.childNodes.forEach((e=>{e===t&&(i=!0)})),i}}setupTextElement(){this._textElement.style.fontSize=`${this.fontSize.value}${this.fontSize.units}`,this._textElement.style.textAnchor="middle",this._textElement.style.userSelect="none",this._labelBackground.style.stroke="#aaa",this._labelBackground.style.strokeDasharray="2 2",this._labelBackground.style.strokeWidth="1",this._labelBackground.style.strokeOpacity="0"}wrapText(){function t(t){let i=t[0].length;return t.forEach((t=>{t.length>i&&(i=t.length)})),.35*i/t.length}if(""!==this.text){const i=this.text.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/),e=1*this.boundingBox.width/this.boundingBox.height;let s=new Array(...i),r=t(s),a=Number.MAX_VALUE;for(;r>e;){let e=s[0];s.forEach((t=>{t.length>e.length&&(e=t)})),a=e.lastIndexOf(" ",a-1),a>0?(s=[],i.forEach((t=>{let i=t;for(;i.length>a;){let t=i.lastIndexOf(" ",a);t<0&&(t=i.indexOf(" ")),t>0?(s.push(i.substring(0,t)),i=i.substring(t).trim()):(s.push(i),i="")}s.push(i)})),r=t(s)):r=-1}return s.join("\r\n")}return this.text}renderText(){if(this._textElement){const i=this.wordWrap?this.wrapText():this.text;if(this.prevWrappedText===i)return void this.positionText();for(this.prevWrappedText=i;this._textElement.lastChild;)this._textElement.removeChild(this._textElement.lastChild);i.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/).forEach(((i,e)=>{this._textElement.appendChild(t.createTSpan(""===i.trim()?" ":i.trim(),[["dy",e>0?"1em":"0"]]))})),this.textElement.style.opacity="0",setTimeout((()=>{this.positionText(this)}),100)}}applyFontStyles(){this._textElement.childNodes.forEach((t=>{const i=t;i.style.fontFamily=this._textElement.style.fontFamily,i.style.fontSize=this._textElement.style.fontSize}))}get textSize(){return this._textSize}positionText(i){const e=void 0===i?this:i;e.applyFontStyles(),e._textSize=e._textElement.getBBox();const s=e.boundingBox.x+e._textSize.width/2+e.offsetX,r=e._textElement.childNodes.length,a=e._textSize.height/r,h=r>1?-a*(r-2)/2:a/3,o=e.boundingBox.y+e._textSize.height/2+h+e.offsetY;e._textElement.childNodes.forEach(((i,e)=>{const r=i;t.setAttributes(r,[["x",`${s}`],["dy",e>0?"1em":"0"]])})),t.setAttributes(e._textElement,[["x",`${s}`]]),t.setAttributes(e._textElement,[["y",`${o}`]]),e._textSize=e._textElement.getBBox();const n=1.2;t.setAttributes(e.labelBackground,[["width",(e._textSize.width*n).toString()],["height",(e._textSize.height*n).toString()],["x",(s-e._textSize.width*n/2).toString()],["y",(e._textSize.y-n).toString()]]),e.onTextSizeChanged&&e.onTextSizeChanged(e),this.textElement.style.opacity="1"}show(){this._textElement.style.display="",this._labelBackground.style.display=""}hide(){this._textElement.style.display="none",this._labelBackground.style.display="none"}showControlBox(){this.labelBackground.style.strokeOpacity="1"}hideControlBox(){this.labelBackground.style.strokeOpacity="0"}}class g extends s{get color(){return this._color}set color(t){this._color=t,this.textBlock.color=t}get fontFamily(){return this._fontFamily}set fontFamily(t){this._fontFamily=t,this.textBlock.fontFamily=t}get fontSize(){return this._fontSize}set fontSize(t){this._fontSize=t,this.textBlock.fontSize=t}getDefaultText(){return Object.getPrototypeOf(this).constructor.DEFAULT_TEXT}get text(){return this.textBlock.text}set text(t){this._text=t,this.textBlock.text=this._text}constructor(t){super(t),this._color="black",this._fontFamily="Helvetica, Arial, sans-serif",this._fontSize={value:1,units:"rem",step:.1},this._text=this.getDefaultText(),this.padding=2,this.textBlock=new u(this.getDefaultText()),this.setColor=this.setColor.bind(this),this.setFont=this.setFont.bind(this),this.setFontSize=this.setFontSize.bind(this),this.setSize=this.setSize.bind(this),this.textSizeChanged=this.textSizeChanged.bind(this),this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.textBoundingBox=new DOMRect}createVisual(){this.textBlock.fontFamily=this.fontFamily,this.textBlock.fontSize=this.fontSize,this.textBlock.color=this.color,this.textBlock.offsetX=this.padding,this.textBlock.offsetY=this.padding,this.textBlock.onTextSizeChanged=this.textSizeChanged,this.visual=t.createGroup(),this.visual.appendChild(this.textBlock.textElement),this.addMarkerVisualToContainer(this.visual),this.textBlock.text=this._text}adjustVisual(){this.setSize()}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual&&!this.textBlock.ownsTarget(t))}setTextBoundingBox(){this.textBoundingBox.x=this.padding,this.textBoundingBox.y=this.padding,this.textBoundingBox.width=Number.MAX_VALUE,this.textBoundingBox.height=Number.MAX_VALUE}setSize(){super.setSize();const[t,i]=[this.width,this.height];this.textBlock.textSize&&(this.width=this.textBlock.textSize.width+2*this.padding,this.height=this.textBlock.textSize.height+2*this.padding),this.textBlock.offsetX=this.padding,this.textBlock.offsetY=this.padding,t===this.width&&i===this.height||!this.onSizeChanged||this.onSizeChanged(this),this.setTextBoundingBox()}textSizeChanged(){this.adjustVisual()}setColor(t){this.color=t}setFont(t){this.fontFamily=t}setFontSize(t){this.fontSize=t}hideVisual(){this.visual&&(this.visual.style.visibility="hidden")}showVisual(){this.visual&&(this.visual.style.visibility="visible",this.textBlock.renderText())}getState(){const t=Object.assign({color:this.color,fontFamily:this.fontFamily,fontSize:this.fontSize,text:this.text},super.getState());return t.typeName=g.typeName,t}restoreState(t){const i=t;this.color=i.color,this.fontFamily=i.fontFamily,this.fontSize=i.fontSize,this.text=i.text,this.createVisual(),super.restoreState(t),this.adjustVisual()}scale(t,i){super.scale(t,i);const e=Object.assign(Object.assign({},this.fontSize),{value:this.fontSize.value*Math.min(t,i)});this.fontSize=e,this.adjustVisual()}}g.typeName="TextMarker",g.title="Text marker",g.DEFAULT_TEXT="Text";class m extends a{constructor(t){super(t),this.fillColor="#000000",this.strokeColor="transparent",this.strokeWidth=0}getPath(t=this.width,i=this.height){return`M 0 0 \n      H ${t} \n      V ${i} \n      H 0 \n      V 0 Z`}getState(){const t=super.getState();return t.typeName=m.typeName,t}}m.typeName="CoverMarker",m.title="Cover marker";class v extends a{constructor(t){super(t),this.fillColor="#ffff00",this.opacity=.5,this.strokeColor="transparent",this.strokeWidth=0}getPath(t=this.width,i=this.height){return`M 0 0 \n      H ${t} \n      V ${i} \n      H 0 \n      V 0 Z`}getState(){const t=super.getState();return t.typeName=v.typeName,t}}v.typeName="HighlightMarker",v.title="Highlight marker";class y extends g{get tipPosition(){return this._tipPosition}set tipPosition(t){this._tipPosition=t,this.adjustVisual()}constructor(i){super(i),this._tipPosition={x:0,y:0},this.tipBase1Position={x:0,y:0},this.tipBase2Position={x:0,y:0},this._calloutVisual=t.createPath("M0,0"),this.color="#ffffff",this.fillColor="#ff0000",this.strokeColor="#ffffff",this.strokeWidth=3,this.padding=20,this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.getPath=this.getPath.bind(this),this.setTipPoints=this.setTipPoints.bind(this)}getPath(){this.setTipPoints();return`M 5 0 \n      ${0===this.tipBase1Position.y?`H ${this.tipBase1Position.x} L ${this.tipPosition.x} ${this.tipPosition.y} L ${this.tipBase2Position.x} 0`:""}\n      H ${this.width-5} \n      A 5 5 0 0 1 ${this.width} 5 \n      ${this.tipBase1Position.x===this.width?`V ${this.tipBase1Position.y} L ${this.tipPosition.x} ${this.tipPosition.y} L  ${this.tipBase2Position.x} ${this.tipBase2Position.y}`:""}\n      V ${this.height-5} \n      A 5 5 0 0 1 ${this.width-5} ${this.height} \n      ${this.tipBase1Position.y===this.height?`H ${this.tipBase2Position.x} L ${this.tipPosition.x} ${this.tipPosition.y} L ${this.tipBase1Position.x} ${this.height}`:""}\n      H 5\n      A 5 5 0 0 1 0 ${this.height-5} \n      ${0===this.tipBase1Position.x?`V ${this.tipBase2Position.y} L ${this.tipPosition.x} ${this.tipPosition.y} L  ${this.tipBase1Position.x} ${this.tipBase1Position.y}`:""}\n      V 5 \n      A 5 5 0 0 1 5 0 \n      Z`}setTipPoints(){let t=Math.min(this.height/2,15),i=this.height/5;const e=Math.atan(this.height/2/(this.width/2));if(this.tipPosition.x<this.width/2&&this.tipPosition.y<this.height/2){e<Math.atan((this.height/2-this.tipPosition.y)/(this.width/2-this.tipPosition.x))?(i=this.width/5,t=Math.min(this.width/2,15),this.tipBase1Position={x:t,y:0},this.tipBase2Position={x:t+i,y:0}):(this.tipBase1Position={x:0,y:t},this.tipBase2Position={x:0,y:t+i})}else if(this.tipPosition.x>=this.width/2&&this.tipPosition.y<this.height/2){e<Math.atan((this.height/2-this.tipPosition.y)/(this.tipPosition.x-this.width/2))?(i=this.width/5,t=Math.min(this.width/2,15),this.tipBase1Position={x:this.width-t-i,y:0},this.tipBase2Position={x:this.width-t,y:0}):(this.tipBase1Position={x:this.width,y:t},this.tipBase2Position={x:this.width,y:t+i})}else if(this.tipPosition.x>=this.width/2&&this.tipPosition.y>=this.height/2){e<Math.atan((this.tipPosition.y-this.height/2)/(this.tipPosition.x-this.width/2))?(i=this.width/5,t=Math.min(this.width/2,15),this.tipBase1Position={x:this.width-t-i,y:this.height},this.tipBase2Position={x:this.width-t,y:this.height}):(this.tipBase1Position={x:this.width,y:this.height-t-i},this.tipBase2Position={x:this.width,y:this.height-t})}else{e<Math.atan((this.tipPosition.y-this.height/2)/(this.width/2-this.tipPosition.x))?(i=this.width/5,t=Math.min(this.width/2,15),this.tipBase1Position={x:t,y:this.height},this.tipBase2Position={x:t+i,y:this.height}):(this.tipBase1Position={x:0,y:this.height-t-i},this.tipBase2Position={x:0,y:this.height-t})}}createVisual(){var i;super.createVisual(),this._tipPosition={x:this.width/4,y:this.height+20},this._calloutVisual=t.createPath(this.getPath(),[["fill",this._fillColor],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]]),null===(i=this.visual)||void 0===i||i.insertBefore(this._calloutVisual,this.textBlock.textElement)}adjustVisual(){super.adjustVisual(),this._calloutVisual&&t.setAttributes(this._calloutVisual,[["d",this.getPath()],["fill",this._fillColor],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]])}ownsTarget(t){return!(!super.ownsTarget(t)&&this._calloutVisual!==t)}getState(){const t=Object.assign({tipPosition:this.tipPosition},super.getState());return t.typeName=y.typeName,t}restoreState(t){const i=t;super.restoreState(t),this._tipPosition=i.tipPosition,this.adjustVisual()}scale(t,i){super.scale(t,i),this._tipPosition={x:this._tipPosition.x*t,y:this._tipPosition.y*i},this.adjustVisual()}}y.typeName="CalloutMarker",y.title="Callout marker";class _{get creationStyle(){return this._creationStyle}is(t){return this instanceof t}get marker(){return this._marker}get container(){return this._container}get overlayContainer(){return this._overlayContainer}get state(){return this._state}set state(t){this._state=t}get isSelected(){return this._isSelected}get continuousCreation(){return this._continuousCreation}set strokeColor(t){this.marker.strokeColor=t}get strokeColor(){return this.marker.strokeColor}set strokeWidth(t){this.marker.strokeWidth=t,this.adjustControlBox(),this.stateChanged()}get strokeWidth(){return this.marker.strokeWidth}set strokeDasharray(t){this.marker.strokeDasharray=t,this.stateChanged()}get strokeDasharray(){return this.marker.strokeDasharray}set fillColor(t){this.marker.fillColor=t}get fillColor(){return this.marker.fillColor}set opacity(t){this.marker.opacity=t}get opacity(){return this.marker.opacity}constructor(i){var e;this._creationStyle="draw",this._state="new",this._controlBox=t.createGroup(),this._isSelected=!1,this._continuousCreation=!1,this.isMultiSelected=!1,this._container=i.container,this._overlayContainer=i.overlayContainer,this._markerType=i.markerType,this._marker=null!==(e=i.marker)&&void 0!==e?e:new i.markerType(i.container),this.select=this.select.bind(this),this.deselect=this.deselect.bind(this),this.ownsTarget=this.ownsTarget.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.stateChanged=this.stateChanged.bind(this),this.scale=this.scale.bind(this),this.dispose=this.dispose.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.manipulate=this.manipulate.bind(this),this.dblClick=this.dblClick.bind(this)}ownsTarget(t){var i;let e=!1;return null!==t&&(null===(i=this._marker)||void 0===i?void 0:i.ownsTarget(t))&&(e=!0),e}select(t=!1){this.isMultiSelected=t,this.container.style.cursor="move",this._isSelected=!0,this.manipulationStartState=JSON.stringify(this._marker.getState())}deselect(){this.container.style.cursor="default",this._isSelected=!1,this.stateChanged()}pointerDown(t,i){}dblClick(t,i){}manipulate(t){}pointerUp(t){}dispose(){}adjustControlBox(){}scale(t,i){this._marker.scale(t,i),this.adjustControlBox()}stateChanged(){if(this.onStateChanged&&"creating"!==this.state&&"new"!==this.state){const t=JSON.stringify(this._marker.getState());console.log("currentState",t),this.manipulationStartState!=t&&(this.manipulationStartState=t,this.onStateChanged(this))}}getState(){return this.marker.getState()}restoreState(t){this._state="select",this.marker.restoreState(t),this.adjustControlBox()}}class k{get visual(){return this._visual||this.createVisual(),this._visual}constructor(){this.gripSize=5,this.fillColor="rgba(255,255,255,0.9)",this.strokeColor="#0ea5e9",this.createVisual=this.createVisual.bind(this)}createVisual(){this._visual=t.createGroup(),this._visual.appendChild(t.createCircle(4*this.gripSize,[["fill","transparent"],["cx",(this.gripSize/2).toString()],["cy",(this.gripSize/2).toString()]]));const i=t.createCircle(this.gripSize,[["fill-opacity","1"],["stroke-width","1"],["stroke-opacity","1"]]);i.style.fill=`var(--mjs-grip-fill, ${this.fillColor})`,i.style.stroke=`var(--mjs-grip-stroke, ${this.strokeColor})`,i.style.filter="drop-shadow(0px 0px 2px rgba(0, 0, 0, .7))",this._visual.appendChild(i)}ownsTarget(t){var i;if(t===this._visual)return!0;{let e=!1;return null===(i=this._visual)||void 0===i||i.childNodes.forEach((i=>{i===t&&(e=!0)})),e}}}class x extends k{}class C extends _{constructor(i){super(i),this.defaultLength=50,this.manipulationStartX=0,this.manipulationStartY=0,this.controlBox=t.createGroup(),this.manipulationBox=t.createGroup(),this.grips=[],this.ownsTarget=this.ownsTarget.bind(this),this.setupControlBox=this.setupControlBox.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.adjustControlGrips=this.adjustControlGrips.bind(this),this.createGrip=this.createGrip.bind(this),this.positionGrip=this.positionGrip.bind(this),this.positionGrips=this.positionGrips.bind(this),this.resize=this.resize.bind(this),this.manipulate=this.manipulate.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.setupControlBox()}ownsTarget(t){return!(!super.ownsTarget(t)&&!this.marker.ownsTarget(t))||!!this.grips.some((i=>i.ownsTarget(t)))}pointerDown(t,i){super.pointerDown(t,i),this.manipulationStartX=t.x,this.manipulationStartY=t.y,"new"===this.state?this.startCreation(t):"creating"===this._state?this.grips.length>0&&i&&this.grips[0].ownsTarget(i)?this.finishCreation():this.addNewPointWhileCreating(t):(this.select(this.isMultiSelected),this.activeGrip=i&&this.grips.find((t=>t.ownsTarget(i))),this.activeGrip?this._state="resize":this._state="move")}startCreation(t){this.marker.stage="creating",this.marker.points.push(t),this.marker.points.push(t),this.marker.createVisual(),this.marker.adjustVisual(),this.adjustControlGrips(),this.activeGrip=this.grips.at(-1),this.activeGrip&&(this.activeGrip.visual.style.pointerEvents="none"),this._state="creating"}addNewPointWhileCreating(t){this.marker.points.push(t),this.marker.adjustVisual(),this.adjustControlGrips(),this.activeGrip=this.grips.at(-1),this.activeGrip&&(this.activeGrip.visual.style.pointerEvents="none")}finishCreation(){this.marker.stage="normal",this.marker.points.pop(),this.marker.adjustVisual(),this.adjustControlGrips(),this.grips.forEach((t=>{t.visual.style.pointerEvents=""})),this._state="select",this.onMarkerCreated&&this.onMarkerCreated(this)}pointerUp(t){super.pointerUp(t),this.manipulate(t),"creating"!==this._state&&(this._state="select"),this.stateChanged()}manipulate(t){"creating"===this.state?this.resize(t):"move"===this.state?(this.marker.points.forEach((i=>{i.x+=t.x-this.manipulationStartX,i.y+=t.y-this.manipulationStartY})),this.manipulationStartX=t.x,this.manipulationStartY=t.y,this.marker.adjustVisual(),this.adjustControlBox()):"resize"===this.state&&this.resize(t)}resize(t){const i=this.activeGrip?this.grips.indexOf(this.activeGrip):-1;i>=0&&(this.marker.points[i]=t,this.marker.adjustVisual(),this.adjustControlBox())}dblClick(t,i){if(i&&"select"===this.state){const e=this.marker.selectorVisualLines.findIndex((t=>t===i));if(e>-1)this.marker.points.splice(e+1,0,t),this.marker.adjustVisual(),this.adjustControlGrips();else{const t=this.grips.findIndex((t=>t.ownsTarget(i)));t>-1&&(this.marker.points.splice(t,1),this.marker.adjustVisual(),this.adjustControlGrips())}}}setupControlBox(){this.controlBox=t.createGroup(),this.container.appendChild(this.controlBox),this.manipulationBox=t.createGroup(),this.controlBox.appendChild(this.manipulationBox),this.adjustControlGrips(),this.controlBox.style.display=""}adjustControlBox(){this.adjustControlGrips()}adjustControlGrips(){const t=this.marker.points.length-this.grips.length;if(t>0)for(let i=0;i<t;i++)this.grips.push(this.createGrip());else if(t<0)for(let i=0;i<-t;i++){const t=this.grips.pop();t&&this.manipulationBox.removeChild(t.visual)}this.positionGrips()}createGrip(){const i=new x;return i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),i}positionGrips(){this.grips.forEach(((t,i)=>{const e=this.marker.points[i];this.positionGrip(t.visual,e.x-t.gripSize/2,e.y-t.gripSize/2)}))}positionGrip(t,i,e){const s=t.transform.baseVal.getItem(0);s.setTranslate(i,e),t.transform.baseVal.replaceItem(s,0)}select(t=!1){super.select(t),this.adjustControlBox(),this.manipulationBox.style.display=t?"none":"",this.controlBox.style.display=""}deselect(){super.deselect(),this.controlBox.style.display="none","creating"===this.state&&this.finishCreation()}}class S extends _{constructor(i){super(i),this.defaultLength=50,this.manipulationStartX=0,this.manipulationStartY=0,this.manipulationStartX1=0,this.manipulationStartY1=0,this.manipulationStartX2=0,this.manipulationStartY2=0,this.controlBox=t.createGroup(),this.manipulationBox=t.createGroup(),this.ownsTarget=this.ownsTarget.bind(this),this.setupControlBox=this.setupControlBox.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.addControlGrips=this.addControlGrips.bind(this),this.createGrip=this.createGrip.bind(this),this.positionGrip=this.positionGrip.bind(this),this.positionGrips=this.positionGrips.bind(this),this.resize=this.resize.bind(this),this.manipulate=this.manipulate.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.setupControlBox()}ownsTarget(t){var i,e;return!(!super.ownsTarget(t)&&!this.marker.ownsTarget(t))||!(!(null===(i=this.grip1)||void 0===i?void 0:i.ownsTarget(t))&&!(null===(e=this.grip2)||void 0===e?void 0:e.ownsTarget(t)))}pointerDown(t,i){var e,s;super.pointerDown(t,i),this.manipulationStartX=t.x,this.manipulationStartY=t.y,"new"===this.state&&(this.marker.x1=t.x,this.marker.y1=t.y,this.marker.x2=t.x,this.marker.y2=t.y),this.manipulationStartX1=this.marker.x1,this.manipulationStartY1=this.marker.y1,this.manipulationStartX2=this.marker.x2,this.manipulationStartY2=this.marker.y2,"new"===this.state?(this.marker.createVisual(),this.marker.adjustVisual(),this._state="creating"):(this.select(this.isMultiSelected),i&&(null===(e=this.grip1)||void 0===e?void 0:e.ownsTarget(i))?this.activeGrip=this.grip1:i&&(null===(s=this.grip2)||void 0===s?void 0:s.ownsTarget(i))?this.activeGrip=this.grip2:this.activeGrip=void 0,this.activeGrip?this._state="resize":this._state="move")}pointerUp(t){const i=this.state;super.pointerUp(t),"creating"===this.state&&Math.abs(this.marker.x1-this.marker.x2)<10&&Math.abs(this.marker.y1-this.marker.y2)<10?(this.marker.x2=this.marker.x1+this.defaultLength,this.marker.adjustVisual(),this.adjustControlBox()):this.manipulate(t),this._state="select","creating"===i&&this.onMarkerCreated&&this.onMarkerCreated(this)}manipulate(t){"creating"===this.state?this.resize(t):"move"===this.state?(this.marker.x1=this.manipulationStartX1+t.x-this.manipulationStartX,this.marker.y1=this.manipulationStartY1+t.y-this.manipulationStartY,this.marker.x2=this.manipulationStartX2+t.x-this.manipulationStartX,this.marker.y2=this.manipulationStartY2+t.y-this.manipulationStartY,this.marker.adjustVisual(),this.adjustControlBox()):"resize"===this.state&&this.resize(t)}resize(t){switch(this.activeGrip){case this.grip1:this.marker.x1=t.x,this.marker.y1=t.y;break;case this.grip2:case void 0:this.marker.x2=t.x,this.marker.y2=t.y}this.marker.adjustVisual(),this.adjustControlBox()}setupControlBox(){this.controlBox=t.createGroup(),this.container.appendChild(this.controlBox),this.manipulationBox=t.createGroup(),this.controlBox.appendChild(this.manipulationBox),this.addControlGrips(),this.controlBox.style.display="none"}adjustControlBox(){this.positionGrips()}addControlGrips(){this.grip1=this.createGrip(),this.grip2=this.createGrip(),this.positionGrips()}createGrip(){const i=new x;return i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),i}positionGrips(){if(this.grip1&&this.grip2){const t=this.grip1.gripSize;this.positionGrip(this.grip1.visual,this.marker.x1-t/2,this.marker.y1-t/2),this.positionGrip(this.grip2.visual,this.marker.x2-t/2,this.marker.y2-t/2)}}positionGrip(t,i,e){const s=t.transform.baseVal.getItem(0);s.setTranslate(i,e),t.transform.baseVal.replaceItem(s,0)}select(t=!1){super.select(t),this.adjustControlBox(),this.manipulationBox.style.display=t?"none":"",this.controlBox.style.display=""}deselect(){super.deselect(),this.controlBox.style.display="none"}}class w{constructor(){this.grips=new Map([["topleft",new x],["topcenter",new x],["topright",new x],["leftcenter",new x],["rightcenter",new x],["bottomleft",new x],["bottomcenter",new x],["bottomright",new x]]),this.findGripByVisual=this.findGripByVisual.bind(this)}findGripByVisual(t){for(const i of this.grips.values())if(i.ownsTarget(t))return i}getGrip(t){return this.grips.get(t)}}class f extends k{constructor(){super();const t=this.fillColor;this.fillColor=this.strokeColor,this.strokeColor=t}}class b extends _{constructor(i){super(i),this.manipulationStartLeft=0,this.manipulationStartTop=0,this.manipulationStartWidth=0,this.manipulationStartHeight=0,this.manipulationStartX=0,this.manipulationStartY=0,this.offsetX=0,this.offsetY=0,this.controlBox=t.createGroup(),this.manipulationBox=t.createGroup(),this.CB_DISTANCE=0,this.controlGrips=new w,this.disabledResizeGrips=[],this.disableRotation=!1,this._suppressMarkerCreateEvent=!1,this.setupControlBox()}ownsTarget(t){var i;return!(!super.ownsTarget(t)&&!this._marker.ownsTarget(t))||!!(void 0!==(null===(i=this.controlGrips)||void 0===i?void 0:i.findGripByVisual(t))||void 0!==this.rotatorGrip&&this.rotatorGrip.ownsTarget(t))}pointerDown(t,i){var e;super.pointerDown(t,i),"new"===this.state&&(this.marker.left=t.x,this.marker.top=t.y),this.manipulationStartLeft=this.marker.left,this.manipulationStartTop=this.marker.top,this.manipulationStartWidth=this.marker.width,this.manipulationStartHeight=this.marker.height;const s=this.marker.unrotatePoint(t);if(this.manipulationStartX=s.x,this.manipulationStartY=s.y,this.offsetX=s.x-this.marker.left,this.offsetY=s.y-this.marker.top,"new"!==this.state)if(this.select(this.isMultiSelected),this.activeGrip=null===(e=this.controlGrips)||void 0===e?void 0:e.findGripByVisual(i),void 0!==this.activeGrip)this._state="resize";else if(void 0!==this.rotatorGrip&&void 0!==i&&this.rotatorGrip.ownsTarget(i)){this.activeGrip=this.rotatorGrip;const t=this.marker.rotatePoint({x:this.marker.centerX,y:this.marker.centerY});this.marker.left=t.x-this.marker.width/2,this.marker.top=t.y-this.marker.height/2,this.marker.moveVisual({x:this.marker.left,y:this.marker.top});const i=this.container.transform.baseVal.getItem(0);i.setRotate(this.marker.rotationAngle,this.marker.centerX,this.marker.centerY),this.container.transform.baseVal.replaceItem(i,0),this.adjustControlBox(),this._state="rotate"}else this._state="move"}pointerUp(t){const i=this.state;super.pointerUp(t),"creating"===this.state&&this.marker.width<10&&this.marker.height<10?(this.marker.width=this.marker.defaultSize.width,this.marker.height=this.marker.defaultSize.height):this.manipulate(t),this._state="select","creating"===i&&this.onMarkerCreated&&!1===this._suppressMarkerCreateEvent&&this.onMarkerCreated(this),this.stateChanged()}manipulate(t){const i=this.marker.unrotatePoint(t);"creating"===this.state?this.resize(t):"move"===this.state?(this.marker.left=this.manipulationStartLeft+(i.x-this.manipulationStartLeft)-this.offsetX,this.marker.top=this.manipulationStartTop+(i.y-this.manipulationStartTop)-this.offsetY,this.marker.moveVisual({x:this.marker.left,y:this.marker.top}),this.adjustControlBox()):"resize"===this.state?this.resize(i):"rotate"===this.state&&this.marker.rotate(t)}resize(t){let i=this.manipulationStartLeft,e=this.manipulationStartWidth,s=this.manipulationStartTop,r=this.manipulationStartHeight;switch(this.activeGrip){case this.controlGrips.getGrip("bottomleft"):case this.controlGrips.getGrip("leftcenter"):case this.controlGrips.getGrip("topleft"):i=this.manipulationStartLeft+t.x-this.manipulationStartX,e=this.manipulationStartWidth+this.manipulationStartLeft-i;break;case this.controlGrips.getGrip("bottomright"):case this.controlGrips.getGrip("rightcenter"):case this.controlGrips.getGrip("topright"):case void 0:e=this.manipulationStartWidth+t.x-this.manipulationStartX}switch(this.activeGrip){case this.controlGrips.getGrip("topcenter"):case this.controlGrips.getGrip("topleft"):case this.controlGrips.getGrip("topright"):s=this.manipulationStartTop+t.y-this.manipulationStartY,r=this.manipulationStartHeight+this.manipulationStartTop-s;break;case this.controlGrips.getGrip("bottomcenter"):case this.controlGrips.getGrip("bottomleft"):case this.controlGrips.getGrip("bottomright"):case void 0:r=this.manipulationStartHeight+t.y-this.manipulationStartY}e>=0?(this.marker.left=i,this.marker.width=e):(this.marker.left=i+e,this.marker.width=-e),r>=0?(this.marker.top=s,this.marker.height=r):(this.marker.top=s+r,this.marker.height=-r),this.setSize()}setSize(){this.marker.setSize(),this.adjustControlBox()}select(t=!1){super.select(t),this.adjustControlBox(),this.manipulationBox.style.display=t?"none":"",this.controlBox.style.display=""}deselect(){super.deselect(),this.controlBox.style.display="none"}setupControlBox(){this.controlBox=t.createGroup();const i=t.createTransform();i.setTranslate(-this.CB_DISTANCE/2,-this.CB_DISTANCE/2),this.controlBox.transform.baseVal.appendItem(i),this.container.appendChild(this.controlBox),this.manipulationBox=t.createGroup(),this.controlBox.appendChild(this.manipulationBox),this.controlRect=t.createRect(this.marker.width+this.CB_DISTANCE,this.marker.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.disableRotation&&(this.rotatorGripLine=t.createLine((this.marker.width+2*this.CB_DISTANCE)/2,this.marker.top-this.CB_DISTANCE,(this.marker.width+2*this.CB_DISTANCE)/2,this.marker.top-3*this.CB_DISTANCE,[["stroke","black"],["stroke-width","1"],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"]]),this.rotatorGripLine.style.filter="drop-shadow(rgba(255, 255, 255, 0.7) 0px 2px 0px)",this.manipulationBox.appendChild(this.rotatorGripLine)),this.controlGrips=new w,this.addControlGrips(),this.controlBox.style.display="none"}adjustControlBox(){var t,i;const e=this.controlBox.transform.baseVal.getItem(0);e.setTranslate(this.marker.left-this.CB_DISTANCE/2,this.marker.top-this.CB_DISTANCE/2),this.controlBox.transform.baseVal.replaceItem(e,0),null===(t=this.controlRect)||void 0===t||t.setAttribute("width",(this.marker.width+this.CB_DISTANCE).toString()),null===(i=this.controlRect)||void 0===i||i.setAttribute("height",(this.marker.height+this.CB_DISTANCE).toString()),void 0!==this.rotatorGripLine&&(this.rotatorGripLine.setAttribute("x1",((this.marker.width+this.CB_DISTANCE)/2).toString()),this.rotatorGripLine.setAttribute("y1",(-this.CB_DISTANCE/2).toString()),this.rotatorGripLine.setAttribute("x2",((this.marker.width+this.CB_DISTANCE)/2).toString()),this.rotatorGripLine.setAttribute("y2",(-Math.max(3*this.CB_DISTANCE,30)).toString())),this.positionGrips()}addControlGrips(){for(const i of this.controlGrips.grips.values())i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),this.manipulationBox.appendChild(i.visual);!0!==this.disableRotation&&(this.rotatorGrip=this.createRotateGrip()),this.positionGrips()}createRotateGrip(){const i=new f;return i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),i}positionGrips(){var t,i;if(void 0!==this.controlGrips){const e=null!==(t=this.controlGrips.getGrip("topleft").gripSize)&&void 0!==t?t:0,s=-e/2,r=s,a=(this.marker.width+this.CB_DISTANCE)/2-e/2,h=(this.marker.height+this.CB_DISTANCE)/2-e/2,o=this.marker.height+this.CB_DISTANCE-e/2,n=this.marker.width+this.CB_DISTANCE-e/2;if(this.positionGrip(this.controlGrips.getGrip("topleft").visual,s,r),this.positionGrip(this.controlGrips.getGrip("topcenter").visual,a,r),this.positionGrip(this.controlGrips.getGrip("topright").visual,n,r),this.positionGrip(this.controlGrips.getGrip("leftcenter").visual,s,h),this.positionGrip(this.controlGrips.getGrip("rightcenter").visual,n,h),this.positionGrip(this.controlGrips.getGrip("bottomleft").visual,s,o),this.positionGrip(this.controlGrips.getGrip("bottomcenter").visual,a,o),this.positionGrip(this.controlGrips.getGrip("bottomright").visual,n,o),void 0!==this.rotatorGrip){const t=null!==(i=this.rotatorGrip.gripSize)&&void 0!==i?i:0,e=-t/2,s=(this.marker.width+this.CB_DISTANCE)/2-t/2;this.positionGrip(this.rotatorGrip.visual,s,e-Math.max(3*this.CB_DISTANCE,30))}}this.adjustGripVisibility()}positionGrip(t,i,e){if(void 0!==t){const s=t.transform.baseVal.getItem(0);s.setTranslate(i,e),t.transform.baseVal.replaceItem(s,0)}}hideControlBox(){this.controlBox.style.display="none"}showControlBox(){this.controlBox.style.display=""}adjustGripVisibility(){for(const t of this.disabledResizeGrips){const i=this.controlGrips.getGrip(t);void 0!==i&&(i.visual.style.display="none")}}scale(t,i){super.scale(t,i);const e=this.marker.rotatePoint({x:this.marker.left,y:this.marker.top}),s=this.marker.unrotatePoint({x:e.x*t,y:e.y*i});this.marker.left=s.x,this.marker.top=s.y,this.marker.width=this.marker.width*t,this.marker.height=this.marker.height*i,this.adjustControlBox()}}class E extends b{constructor(t){super(t),this._creationStyle="draw"}pointerDown(t,i){super.pointerDown(t,i),"new"===this.state&&(this.marker.createVisual(),this.marker.moveVisual(t),this._state="creating")}resize(t){super.resize(t),this.setSize()}pointerUp(t){super.pointerUp(t),this.setSize()}}class T{constructor(){this.undoStack=[],this.redoStack=[]}get isUndoPossible(){return this.undoStack.length>0}get isRedoPossible(){return this.redoStack.length>0}get undoStepCount(){return this.undoStack.length}get redoStepCount(){return this.redoStack.length}addUndoStep(t){return(0===this.undoStack.length||JSON.stringify(this.undoStack[this.undoStack.length-1])!==JSON.stringify(t))&&(this.undoStack.push(JSON.parse(JSON.stringify(t))),JSON.stringify(this.lastRedoStep)!==JSON.stringify(t)&&this.redoStack.splice(0,this.redoStack.length),!0)}replaceLastUndoStep(t){this.undoStack.length>0&&(this.undoStack[this.undoStack.length-1]=JSON.parse(JSON.stringify(t)))}getLastUndoStep(){return this.undoStack.length>0?this.undoStack[this.undoStack.length-1]:void 0}undo(){if(this.undoStack.length>1){const t=this.undoStack.pop();return void 0!==t&&this.redoStack.push(t),this.undoStack.length>0?this.undoStack[this.undoStack.length-1]:void 0}}redo(){return this.lastRedoStep=this.redoStack.pop(),this.lastRedoStep}}class M extends _{constructor(i){super(i),this.manipulationStartX=0,this.manipulationStartY=0,this.controlBox=t.createGroup(),this._continuousCreation=!0,this.ownsTarget=this.ownsTarget.bind(this),this.setupControlBox=this.setupControlBox.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.manipulate=this.manipulate.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.setupControlBox()}ownsTarget(t){return!(!super.ownsTarget(t)&&!this.marker.ownsTarget(t)&&t!==this.controlRect)}pointerDown(t,i){super.pointerDown(t,i),this.manipulationStartX=t.x,this.manipulationStartY=t.y,"new"===this.state?this.startCreation(t):"move"!==this.state&&(this.select(),this._state="move")}startCreation(t){this.marker.stage="creating",this.marker.points.push(t),this.marker.createVisual(),this.marker.adjustVisual(),this._state="creating"}addNewPointWhileCreating(t){this.marker.points.push(t),this.marker.adjustVisual()}finishCreation(){this.marker.stage="normal",this.marker.adjustVisual(),this._state="select",this.onMarkerCreated&&this.onMarkerCreated(this)}pointerUp(t){super.pointerUp(t),this.manipulate(t),"creating"===this._state&&this.finishCreation(),this.state="select",this.stateChanged()}manipulate(t){"creating"===this.state?this.addNewPointWhileCreating(t):"move"===this.state&&(this.marker.points.forEach((i=>{i.x+=t.x-this.manipulationStartX,i.y+=t.y-this.manipulationStartY})),this.manipulationStartX=t.x,this.manipulationStartY=t.y,this.marker.adjustVisual(),this.adjustControlBox())}setupControlBox(){this.controlBox=t.createGroup(),this.container.appendChild(this.controlBox),this.controlRect=t.createRect(0,0,[["stroke","black"],["stroke-width","1"],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"],["fill","transparent"]]),this.controlBox.appendChild(this.controlRect),this.controlBox.style.display=""}adjustControlBox(){const i=Math.min(...this.marker.points.map((t=>t.x))),e=Math.min(...this.marker.points.map((t=>t.y))),s=Math.max(...this.marker.points.map((t=>t.x))),r=Math.max(...this.marker.points.map((t=>t.y)));this.controlRect&&t.setAttributes(this.controlRect,[["x",(i-this.strokeWidth).toString()],["y",(e-this.strokeWidth).toString()],["width",(s-i+2*this.strokeWidth).toString()],["height",(r-e+2*this.strokeWidth).toString()]])}select(){super.select(),this.adjustControlBox(),this.controlBox.style.display=""}deselect(){super.deselect(),this.controlBox.style.display="none"}}class B{get width(){return this._width}set width(t){this._width=t,this.textEditor.style.width=`${this.width}px`}get height(){return this._height}set height(t){this._height=t,this.textEditor.style.height=`${this.height}px`}get left(){return this._left}set left(t){this._left=t,this.textEditor.style.left=`${this.left}px`}get top(){return this._top}set top(t){this._top=t,this.textEditor.style.top=`${this.top}px`}get text(){return this._text}set text(t){this._text=t}get fontFamily(){return this._fontFamily}set fontFamily(t){this._fontFamily=t,this.textEditor.style.fontFamily=this._fontFamily}get fontSize(){return this._fontSize}set fontSize(t){this._fontSize=t,this.textEditor.style.fontSize=this._fontSize}get textColor(){return this._textColor}set textColor(t){this._textColor=t,this.textEditor.style.color=this.textColor}get bgColor(){return this._bgColor}set bgColor(t){this._bgColor=t,this.textEditor.style.backgroundColor=this.bgColor}constructor(){this.isInFocus=!1,this._width=0,this._height=0,this._left=0,this._top=0,this._text="",this._fontFamily="sans-serif",this._fontSize="1rem",this._textColor="#000",this._bgColor="transparent",this.isSetupCompleted=!1,this.textEditor=document.createElement("div"),this.getEditorUi=this.getEditorUi.bind(this),this.focus=this.focus.bind(this),this.setup=this.setup.bind(this)}setup(){this.textEditor.style.pointerEvents="auto",this.textEditor.style.display="flex",this.textEditor.style.flexDirection="column",this.textEditor.style.alignItems="center",this.textEditor.style.justifyContent="center",this.textEditor.style.width=`${this._width}px`,this.textEditor.style.height=`${this._height}px`,this.textEditor.style.overflow="hidden",this.textEditor.style.textAlign="center",this.textEditor.style.fontFamily=this._fontFamily,this.textEditor.style.fontSize=this._fontSize,this.textEditor.style.lineHeight="1em",""!==this._text?this.textEditor.innerText=this._text:this.textEditor.innerHTML="&nbsp;",this.textEditor.contentEditable="true",this.textEditor.style.outline="none",this.textEditor.style.color=this._textColor,this.textEditor.style.whiteSpace="pre",this.textEditor.addEventListener("pointerdown",(t=>{t.stopPropagation()})),this.textEditor.addEventListener("pointerup",(t=>{t.stopPropagation()})),this.textEditor.addEventListener("keydown",(t=>{"Escape"===t.key&&(t.preventDefault(),this.textEditor.blur())})),this.textEditor.addEventListener("keyup",(t=>{t.cancelBubble=!0,this._text=this.textEditor.innerText,void 0!==this.onTextChanged&&this.onTextChanged(this._text)})),this.textEditor.addEventListener("blur",(()=>{this._text=this.textEditor.innerText,void 0!==this.onTextChanged&&this.onTextChanged(this._text),void 0!==this.onBlur&&this.onBlur()})),this.textEditor.addEventListener("paste",(t=>{if(t.clipboardData){const i=t.clipboardData.getData("text"),e=window.getSelection();if(!e||!e.rangeCount)return!1;e.deleteFromDocument(),e.getRangeAt(0).insertNode(document.createTextNode(i)),t.preventDefault()}})),this.isSetupCompleted=!0}getEditorUi(){return this.isSetupCompleted||this.setup(),this.textEditor}focus(){this.textEditor.focus();const t=document.createRange();t.selectNodeContents(this.textEditor),t.collapse(!1);const i=window.getSelection();null==i||i.removeAllRanges(),null==i||i.addRange(t)}blur(){this.textEditor.blur()}}class V extends b{constructor(i){super(i),this.textBlockEditorContainer=t.createForeignObject(),this._pointerDownTime=Number.MAX_VALUE,this._pointerDownPoint={x:0,y:0},this.markerSizeChanged=()=>{this.setSize()},this.disabledResizeGrips=["topleft","topcenter","topright","bottomleft","bottomcenter","bottomright","leftcenter","rightcenter"],this._creationStyle="drop",this.textBlockEditor=new B,this.marker.onSizeChanged=this.markerSizeChanged,this.showEditor=this.showEditor.bind(this),this.hideEditor=this.hideEditor.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.resize=this.resize.bind(this),this.markerSizeChanged=this.markerSizeChanged.bind(this)}pointerDown(t,i){super.pointerDown(t,i),this._pointerDownTime=Date.now(),this._pointerDownPoint=t,"new"===this.state&&(this.marker.createVisual(),this.marker.moveVisual(t),this._state="creating")}dblClick(t,i){super.dblClick(t,i),"edit"!==this.state&&this.showEditor()}setSize(){super.setSize(),this.textBlockEditorContainer.style.transform=`translate(${this.marker.left}px, ${this.marker.top}px)`,this.textBlockEditorContainer.style.width=`${this.marker.width}px`,this.textBlockEditorContainer.style.height=`${this.marker.height}px`,this.textBlockEditor.width=this.marker.width,this.textBlockEditor.height=this.marker.height}resize(t){super.resize(t),this.setSize()}pointerUp(t){const i=this.state;super.pointerUp(t),this.setSize(),("creating"===i||Date.now()-this._pointerDownTime>500&&Math.abs(this._pointerDownPoint.x-t.x)<5&&Math.abs(this._pointerDownPoint.y-t.y)<5)&&this.showEditor(),this.adjustControlBox()}showEditor(){this.textBlockEditor.text=this.marker.text,this.textBlockEditor.textColor=this.marker.color,this.textBlockEditor.bgColor=this.marker.fillColor,this.textBlockEditor.fontFamily=this.marker.fontFamily,this.textBlockEditor.fontSize=`${this.marker.fontSize.value}${this.marker.fontSize.units}`,void 0===this.textBlockEditor.onTextChanged&&(this.textBlockEditor.onTextChanged=t=>{this.marker.text=t}),void 0===this.textBlockEditor.onBlur&&(this.textBlockEditor.onBlur=()=>{this.hideEditor()}),this.textBlockEditorContainer.appendChild(this.textBlockEditor.getEditorUi()),this.container.appendChild(this.textBlockEditorContainer),this.marker.hideVisual(),this.hideControlBox(),this.textBlockEditor.focus()}hideEditor(){this.marker.text=this.textBlockEditor.text,this.marker.showVisual(),this.showControlBox(),this.state="select",this.container.removeChild(this.textBlockEditorContainer)}}class z{static addKey(t,i){z.keys.set(t,i),z.keyAddListeners.forEach((t=>{t()}))}static addKeyAddListener(t){z.keyAddListeners.push(t)}static removeKeyAddListener(t){const i=z.keyAddListeners.indexOf(t);i>-1&&z.keyAddListeners.splice(i,1)}static isLicensed(t){if(z.keys.has(t)){const i=new RegExp(`${t}-[A-Z][0-9]{3}-[A-Z][0-9]{3}-[0-9]{4}`,"i"),e=z.keys.get(t);return void 0!==e&&i.test(e)}return!1}}z.keys=new Map,z.keyAddListeners=new Array;var L='<svg viewBox="0 0 112 96" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"><path style="fill:#e5f20d;fill-opacity:.647059" d="M801.047 441.52h507.554v82.104H801.047z" transform="matrix(.22059 0 0 .67273 -176.702 -256.636)"/><path d="M506.73 455.948c0 .4-.133.742-.4 1.025-.266.284-.616.425-1.05.425-.6 0-.9-.3-.9-.9 0-6.733-.216-11.891-.65-15.475-.433-3.583-1.183-5.375-2.25-5.375-1.8 0-4.433 6.284-7.9 18.85v.05c0 .4-.133.742-.4 1.025-.266.284-.616.425-1.05.425-.6 0-.9-.3-.9-.9 0-1.333.067-3.4.2-6.2.134-3.133.2-5.6.2-7.4 0-2.5-.075-4.275-.225-5.325-.15-1.05-.475-1.575-.975-1.575-1.133 0-2.566 2.075-4.3 6.225-1.733 4.15-3.55 9.042-5.45 14.675l-.45 1.3a2.315 2.315 0 0 1-.575.85c-.25.234-.525.35-.825.35-.4 0-.666-.033-.8-.1-.133-.066-.216-.266-.25-.6-.166-1.633-.3-3.816-.4-6.55-.066-.7-.133-1.85-.2-3.45-.333-5.633-.633-9.441-.9-11.425-.266-1.983-.4-3.091-.4-3.325 0-.266.134-.583.4-.95.267-.366.517-.55.75-.55.534 0 .967.384 1.3 1.15.167.367.35 1.834.55 4.4.2 2.567.367 5.75.5 9.55l.25 7.65c1.834-5.666 3.734-10.808 5.7-15.425 1.967-4.616 3.767-6.925 5.4-6.925 1.1 0 1.85.8 2.25 2.4.4 1.6.6 3.917.6 6.95 0 1.6-.033 3.9-.1 6.9l-.05 2.3c1.367-4.766 2.725-8.766 4.075-12 1.35-3.233 2.709-4.85 4.075-4.85 3.434 0 5.15 7.6 5.15 22.8Z" style="fill-rule:nonzero" transform="translate(-1156.959 -1063.791) scale(2.46792)"/></svg>';class G extends E{}class P extends S{set arrowType(t){this.marker.arrowType=t}get arrowType(){return this.marker.arrowType}}class A extends V{constructor(t){super(t),this.manipulationStartTipPositionX=0,this.manipulationStartTipPositionY=0}addControlGrips(){this.tipGrip=this.createTipGrip(),super.addControlGrips()}createTipGrip(){const i=new x;return i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),i}positionGrips(){var t;if(super.positionGrips(),this.tipGrip){const i=null!==(t=this.tipGrip.gripSize)&&void 0!==t?t:0;this.positionGrip(this.tipGrip.visual,this.marker.tipPosition.x-i/2,this.marker.tipPosition.y-i/2)}}ownsTarget(t){var i;return!(!super.ownsTarget(t)&&!(null===(i=this.tipGrip)||void 0===i?void 0:i.ownsTarget(t)))}pointerDown(t,i){super.pointerDown(t,i),this.manipulationStartTipPositionX=this.marker.tipPosition.x,this.manipulationStartTipPositionY=this.marker.tipPosition.y,void 0!==this.tipGrip&&void 0!==i&&this.tipGrip.ownsTarget(i)&&(this.activeGrip=this.tipGrip,this._state="resize")}resize(t){const i=this.manipulationStartTipPositionX+t.x-this.manipulationStartX,e=this.manipulationStartTipPositionY+t.y-this.manipulationStartY;this.activeGrip===this.tipGrip?(this.marker.tipPosition={x:i,y:e},this.adjustControlBox()):super.resize(t)}}class W extends HTMLElement{get targetWidth(){return this._targetWidth}set targetWidth(t){this._targetWidth=t,this.setMainCanvasSize()}get targetHeight(){return this._targetHeight}set targetHeight(t){this._targetHeight=t,this.setMainCanvasSize()}get currentMarkerEditor(){return this._currentMarkerEditor}get targetImage(){return this._targetImage}set targetImage(t){this._targetImage=t,void 0!==t&&this.addTargetImage()}get zoomLevel(){return this._zoomLevel}set zoomLevel(t){this._zoomLevel=t,this._canvasContainer&&this._contentContainer&&this._mainCanvas&&this._overlayContainer&&(this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this.setEditingTargetSize(),this._canvasContainer.scrollTo({left:(this._mainCanvas.clientWidth-this._canvasContainer.clientWidth)/2,top:(this._mainCanvas.clientHeight-this._canvasContainer.clientHeight)/2}),this._overlayContainer.style.transform=`scale(${this._zoomLevel})`)}panTo(t){this.prevPanPoint=t}constructor(){super(),this.width=0,this.height=0,this._targetWidth=-1,this._targetHeight=-1,this.mode="select",this._isInitialized=!1,this._selectedMarkerEditors=[],this._newMarkerOutline=t.createPath("",[["stroke","#333"],["stroke-width","0.5"],["stroke-dasharray","2 5"],["fill","rgba(200,200,200,0.5)"],["pointer-events","none"]]),this.markerEditors=new Map,this.editors=[],this._zoomLevel=1,this.prevPanPoint={x:0,y:0},this.undoRedoManager=new T,this.touchPoints=0,this.isDragging=!1,this.isSelecting=!1,this._marqueeSelectOutline=t.createRect(0,0,[["stroke","#333"],["stroke-width","0.5"],["stroke-dasharray","5 5"],["fill","transparent"],["pointer-events","none"]]),this._marqueeSelectRect=new DOMRect(0,0,0,0),this._manipulationStartX=0,this._manipulationStartY=0,this.markerEditors.set(h,E),this.markerEditors.set(n,S),this.markerEditors.set(c,C),this.markerEditors.set(p,M),this.markerEditors.set(g,V),this.markerEditors.set(m,G),this.markerEditors.set(v,G),this.markerEditors.set(l,P),this.markerEditors.set(d,S),this.markerEditors.set(y,A),this.connectedCallback=this.connectedCallback.bind(this),this.disconnectedCallback=this.disconnectedCallback.bind(this),this.createLayout=this.createLayout.bind(this),this.addMainCanvas=this.addMainCanvas.bind(this),this.setMainCanvasSize=this.setMainCanvasSize.bind(this),this.setEditingTargetSize=this.setEditingTargetSize.bind(this),this.initOverlay=this.initOverlay.bind(this),this.addTargetImage=this.addTargetImage.bind(this),this.attachEvents=this.attachEvents.bind(this),this.attachWindowEvents=this.attachWindowEvents.bind(this),this.detachEvents=this.detachEvents.bind(this),this.detachWindowEvents=this.detachWindowEvents.bind(this),this.onCanvasPointerDown=this.onCanvasPointerDown.bind(this),this.onCanvasDblClick=this.onCanvasDblClick.bind(this),this.onKeyUp=this.onKeyUp.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerOut=this.onPointerOut.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.createMarker=this.createMarker.bind(this),this.addNewMarker=this.addNewMarker.bind(this),this.markerCreated=this.markerCreated.bind(this),this.markerStateChanged=this.markerStateChanged.bind(this),this.deleteMarker=this.deleteMarker.bind(this),this.deleteSelectedMarkers=this.deleteSelectedMarkers.bind(this),this.switchToSelectMode=this.switchToSelectMode.bind(this),this.showOutline=this.showOutline.bind(this),this.hideOutline=this.hideOutline.bind(this),this.getState=this.getState.bind(this),this.restoreState=this.restoreState.bind(this),this.undo=this.undo.bind(this),this.addUndoStep=this.addUndoStep.bind(this),this.undoStep=this.undoStep.bind(this),this.redo=this.redo.bind(this),this.redoStep=this.redoStep.bind(this),this.toggleLogo=this.toggleLogo.bind(this),this.addLogo=this.addLogo.bind(this),this.removeLogo=this.removeLogo.bind(this),this.attachShadow({mode:"open"})}connectedCallback(){this.dispatchEvent(new CustomEvent("areainit",{detail:{markerArea:this}})),z.addKeyAddListener(this.toggleLogo),this.createLayout(),this.addMainCanvas(),this.initOverlay(),this.attachEvents(),this._isInitialized=!0,void 0!==this.targetImage&&this.addTargetImage(),this.setMainCanvasSize(),this.toggleLogo(),this.dispatchEvent(new CustomEvent("areashow",{detail:{markerArea:this}}))}disconnectedCallback(){this.detachEvents()}createLayout(){var t;this.style.display="flex",this.style.width=""!==this.style.width?this.style.width:"100%",this.style.height=""!==this.style.height?this.style.height:"100%",this.style.position="relative",this._contentContainer=document.createElement("div"),this._contentContainer.style.display="flex",this._contentContainer.style.position="relative",this._contentContainer.style.flexGrow="2",this._contentContainer.style.flexShrink="1",this._contentContainer.style.overflow="hidden",this._canvasContainer=document.createElement("div"),this._canvasContainer.style.touchAction="pinch-zoom",this._canvasContainer.className="canvas-container",this._canvasContainer.style.display="grid",this._canvasContainer.style.gridTemplateColumns="1fr",this._canvasContainer.style.flexGrow="2",this._canvasContainer.style.flexShrink="2",this._canvasContainer.style.justifyItems="center",this._canvasContainer.style.alignItems="center",this._canvasContainer.style.overflow="auto",this._contentContainer.appendChild(this._canvasContainer),null===(t=this.shadowRoot)||void 0===t||t.appendChild(this._contentContainer)}addMainCanvas(){var i,e,s;this.width=(null===(i=this._contentContainer)||void 0===i?void 0:i.clientWidth)||0,this.height=(null===(e=this._contentContainer)||void 0===e?void 0:e.clientHeight)||0,this._mainCanvas=document.createElementNS("http://www.w3.org/2000/svg","svg"),this._mainCanvas.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.setMainCanvasSize(),this._mainCanvas.style.gridColumnStart="1",this._mainCanvas.style.gridRowStart="1",this._mainCanvas.style.pointerEvents="auto",this._mainCanvas.style.margin="10px",this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this._groupLayer=t.createGroup(),this._mainCanvas.appendChild(this._groupLayer),null===(s=this._canvasContainer)||void 0===s||s.appendChild(this._mainCanvas)}setMainCanvasSize(){void 0!==this._mainCanvas&&this._targetHeight>0&&this._targetWidth>0&&(this._mainCanvas.style.width=this._targetWidth*this.zoomLevel+"px",this._mainCanvas.style.height=this._targetHeight*this.zoomLevel+"px",this._mainCanvas.setAttribute("width",""+this._targetWidth*this.zoomLevel),this._mainCanvas.setAttribute("height",""+this._targetHeight*this.zoomLevel),this._mainCanvas.setAttribute("viewBox","0 0 "+this._targetWidth.toString()+" "+this._targetHeight.toString()),this.setEditingTargetSize())}setEditingTargetSize(){void 0!==this._editingTarget&&(this._editingTarget.width=this._targetWidth*this.zoomLevel,this._editingTarget.height=this._targetHeight*this.zoomLevel,this._editingTarget.style.width=this._targetWidth*this.zoomLevel+"px",this._editingTarget.style.height=this._targetHeight*this.zoomLevel+"px")}initOverlay(){var t;this._overlayContainer=document.createElement("div"),this._overlayContainer.style.pointerEvents="none",this._overlayContainer.style.display="flex",this._overlayContainer.style.alignItems="center",this._overlayContainer.style.justifyContent="center",this._overlayContainer.style.gridRowStart="1",this._overlayContainer.style.gridColumnStart="1",null===(t=this._canvasContainer)||void 0===t||t.appendChild(this._overlayContainer),this._overlayContentContainer=document.createElement("div"),this._overlayContentContainer.style.position="relative",this._overlayContentContainer.style.display="flex",this._overlayContainer.appendChild(this._overlayContentContainer)}addTargetImage(){this._isInitialized&&void 0===this._editingTarget&&void 0!==this.targetImage&&void 0!==this._canvasContainer&&void 0!==this._mainCanvas&&(this._editingTarget=document.createElement("img"),this._targetWidth=this._targetWidth>0?this._targetWidth:this.targetImage.clientWidth,this._targetHeight=this._targetHeight>0?this._targetHeight:this.targetImage.clientHeight,this._editingTarget.addEventListener("load",(t=>{if(void 0!==this._editingTarget){if(this._targetHeight<=0&&this._targetWidth<=0){const i=t.target;this._targetWidth=i.clientWidth>0?i.clientWidth:i.naturalWidth,this._targetHeight=i.clientHeight>0?i.clientHeight:i.naturalHeight}this._editingTarget.width=this._targetWidth,this._editingTarget.height=this._targetHeight,this._editingTarget.style.width=`${this._targetWidth}px`,this._editingTarget.style.height=`${this._targetHeight}px`,this._editingTarget.style.gridColumnStart="1",this._editingTarget.style.gridRowStart="1",this.setMainCanvasSize()}})),this._editingTarget.src=this.targetImage.src,this._canvasContainer.insertBefore(this._editingTarget,this._mainCanvas))}createMarker(t){let i=h;i="string"==typeof t?this.getMarkerTypeByName(t)||h:t;const e=this.markerEditors.get(i);if(e&&this._mainCanvas)if(this.setCurrentEditor(),this.deselectEditor(),this.addUndoStep(),this._currentMarkerEditor=this.addNewMarker(e,i),this._currentMarkerEditor.onMarkerCreated=this.markerCreated,this._currentMarkerEditor.onStateChanged=this.markerStateChanged,"drop"===this._currentMarkerEditor.creationStyle)this._mainCanvas.style.cursor="move";else this._mainCanvas.style.cursor="crosshair";return this._currentMarkerEditor}addNewMarker(i,e){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const s=t.createGroup();return this._mainCanvas.appendChild(s),new i({container:s,overlayContainer:this._overlayContentContainer,markerType:e})}markerCreated(t){if(this._mainCanvas){if(this.mode="select",this._mainCanvas.style.cursor="default",this.editors.push(t),this.setCurrentEditor(t),t.continuousCreation){const i=this.createMarker(t.marker.typeName);t.is(M)&&(null==i?void 0:i.is(M))&&(i.strokeColor=t.strokeColor,i.strokeWidth=t.strokeWidth,i.strokeDasharray=t.strokeDasharray)}this.addUndoStep(),this.dispatchEvent(new CustomEvent("markercreate",{detail:{markerArea:this,markerEditor:t}}))}}markerStateChanged(t){this.addUndoStep(),this.dispatchEvent(new CustomEvent("markerchange",{detail:{markerArea:this,markerEditor:t}}))}deleteMarker(t){var i;this.editors.indexOf(t)>=0&&(this.addUndoStep(),this.dispatchEvent(new CustomEvent("markerbeforedelete",{detail:{markerArea:this,markerEditor:t}})),null===(i=this._mainCanvas)||void 0===i||i.removeChild(t.container),t.dispose(),this.editors.splice(this.editors.indexOf(t),1),this.dispatchEvent(new CustomEvent("markerdelete",{detail:{markerArea:this,markerEditor:t}})))}deleteSelectedMarkers(){this._selectedMarkerEditors.forEach((t=>this.deleteMarker(t))),this._selectedMarkerEditors.splice(0)}setCurrentEditor(t){this._currentMarkerEditor!==t&&void 0!==this._currentMarkerEditor&&(this._currentMarkerEditor.deselect(),this.dispatchEvent(new CustomEvent("markerdeselect",{detail:{markerArea:this,markerEditor:this._currentMarkerEditor}}))),this._currentMarkerEditor=t,void 0===this._currentMarkerEditor||this._currentMarkerEditor.isSelected||("new"!==this._currentMarkerEditor.state&&(this._selectedMarkerEditors.push(this._currentMarkerEditor),this._currentMarkerEditor.select()),this.dispatchEvent(new CustomEvent("markerselect",{detail:{markerArea:this,markerEditor:this._currentMarkerEditor}})))}selectEditor(t){this._selectedMarkerEditors.indexOf(t)<0&&(this._selectedMarkerEditors.length>0&&this._selectedMarkerEditors[0].select(!0),this._selectedMarkerEditors.push(t),t.select(!0))}deselectEditor(t){if(void 0===t)this._selectedMarkerEditors.forEach((t=>t.deselect())),this._selectedMarkerEditors.splice(0);else{const i=this._selectedMarkerEditors.indexOf(t);i>=0&&(this._selectedMarkerEditors.splice(i,1),t.deselect())}}onCanvasPointerDown(i){var e;if(this._manipulationStartX=i.clientX,this._manipulationStartY=i.clientY,this.touchPoints++,1===this.touchPoints||"touch"!==i.pointerType)if(void 0===this._currentMarkerEditor||"new"!==this._currentMarkerEditor.state&&"creating"!==this._currentMarkerEditor.state){if("select"===this.mode){const e=t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel),s=this.editors.find((t=>t.ownsTarget(i.target)));void 0!==s?(this.isDragging=!0,i.shiftKey?this.selectEditor(s):s.isSelected||(this.deselectEditor(),this.setCurrentEditor(s)),this._selectedMarkerEditors.forEach((t=>{var s;return t.pointerDown(e,null!==(s=i.target)&&void 0!==s?s:void 0)}))):(this.setCurrentEditor(),this.deselectEditor(),this.isSelecting=!0,this.isDragging=!0,this._marqueeSelectRect.x=e.x,this._marqueeSelectRect.y=e.y,this._marqueeSelectRect.width=0,this._marqueeSelectRect.height=0,t.setAttributes(this._marqueeSelectOutline,[["x",e.x.toString()],["y",e.y.toString()],["width","0"],["height","0"]]),this._groupLayer&&!this._groupLayer.contains(this._marqueeSelectOutline)&&this._groupLayer.appendChild(this._marqueeSelectOutline),this.prevPanPoint={x:i.clientX,y:i.clientY})}}else this.isDragging=!0,this._currentMarkerEditor.pointerDown(t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel),null!==(e=i.target)&&void 0!==e?e:void 0)}onCanvasDblClick(i){var e;if("select"===this.mode){const s=this.editors.find((t=>t.ownsTarget(i.target)));void 0!==s&&s!==this._currentMarkerEditor&&this.setCurrentEditor(s),void 0!==this._currentMarkerEditor?this._currentMarkerEditor.dblClick(t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel),null!==(e=i.target)&&void 0!==e?e:void 0):this.setCurrentEditor()}}onPointerMove(i){var e;if(1===this.touchPoints||"touch"!==i.pointerType&&this.isDragging){const s=t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel);if(void 0!==this._currentMarkerEditor||this._selectedMarkerEditors.length>0)void 0!==this._currentMarkerEditor&&"edit"===this._currentMarkerEditor.state||i.preventDefault(),void 0!==this._currentMarkerEditor||this._selectedMarkerEditors.length>0?(this.showOutline(s),this._selectedMarkerEditors.length>0?this._selectedMarkerEditors.forEach((t=>t.manipulate(s))):null===(e=this._currentMarkerEditor)||void 0===e||e.manipulate(s)):this.zoomLevel>1&&this.panTo({x:i.clientX,y:i.clientY});else if(this.isSelecting){const e=t.clientToLocalCoordinates(this._mainCanvas,this._manipulationStartX,this._manipulationStartY,this.zoomLevel);this._marqueeSelectRect.x=Math.min(s.x,e.x),this._marqueeSelectRect.y=Math.min(s.y,e.y),this._marqueeSelectRect.width=Math.abs(i.clientX-this._manipulationStartX)/this.zoomLevel,this._marqueeSelectRect.height=Math.abs(i.clientY-this._manipulationStartY)/this.zoomLevel,t.setAttributes(this._marqueeSelectOutline,[["x",`${this._marqueeSelectRect.x}`],["y",`${this._marqueeSelectRect.y}`],["width",`${this._marqueeSelectRect.width}`],["height",`${this._marqueeSelectRect.height}`]])}}}showOutline(i){if(this._currentMarkerEditor&&"drop"===this._currentMarkerEditor.creationStyle&&"new"===this._currentMarkerEditor.state){void 0===this._mainCanvas||this._mainCanvas.contains(this._newMarkerOutline)||this._mainCanvas.appendChild(this._newMarkerOutline);const e=this._currentMarkerEditor.marker.defaultSize;t.setAttributes(this._newMarkerOutline,[["d",this._currentMarkerEditor.marker.getOutline()]]),this._newMarkerOutline.style.transform=`translate(${i.x-e.width/2}px, ${i.y-e.height/2}px)`}}hideOutline(){var t;(null===(t=this._mainCanvas)||void 0===t?void 0:t.contains(this._newMarkerOutline))&&this._mainCanvas.removeChild(this._newMarkerOutline)}onPointerUp(i){if(this.touchPoints>0&&this.touchPoints--,0===this.touchPoints)if(this.isDragging&&void 0!==this._currentMarkerEditor){const e=t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel);this._selectedMarkerEditors.length>1?this._selectedMarkerEditors.forEach((t=>t.pointerUp(e))):this._currentMarkerEditor.pointerUp(e),this.hideOutline()}else this.isSelecting&&(this._groupLayer&&this._groupLayer.contains(this._marqueeSelectOutline)&&this._groupLayer.removeChild(this._marqueeSelectOutline),this.finishMarqueeSelection());this.isDragging=!1,this.isSelecting=!1,this.addUndoStep()}finishMarqueeSelection(){this.deselectEditor(),this.editors.forEach((t=>{const i=t.marker.container.getBBox();i.x<this._marqueeSelectRect.x+this._marqueeSelectRect.width&&i.x+i.width>this._marqueeSelectRect.x&&i.y<this._marqueeSelectRect.y+this._marqueeSelectRect.height&&i.y+i.height>this._marqueeSelectRect.y&&this.selectEditor(t)}))}onPointerOut(){this.touchPoints>0&&this.touchPoints--,this.hideOutline()}onKeyUp(t){void 0!==this._currentMarkerEditor&&("Delete"===t.key||t.key)}attachEvents(){var t,i,e;this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),null===(t=this._mainCanvas)||void 0===t||t.addEventListener("pointerdown",this.onCanvasPointerDown),null===(i=this._mainCanvas)||void 0===i||i.addEventListener("touchmove",(t=>t.preventDefault())),null===(e=this._mainCanvas)||void 0===e||e.addEventListener("dblclick",this.onCanvasDblClick),this.attachWindowEvents()}attachWindowEvents(){window.addEventListener("pointermove",this.onPointerMove),window.addEventListener("pointerup",this.onPointerUp),window.addEventListener("pointerleave",this.onPointerUp),window.addEventListener("pointercancel",this.onPointerOut),window.addEventListener("pointerout",this.onPointerOut),window.addEventListener("keyup",this.onKeyUp)}detachEvents(){this.detachWindowEvents()}detachWindowEvents(){}getMarkerTypeByName(t){let i;return this.markerEditors.forEach(((e,s)=>{s.typeName===t&&(i=s)})),i}switchToSelectMode(){this.setCurrentEditor(),this._mainCanvas&&(this._mainCanvas.style.cursor="default")}getState(){const t={version:3,width:this.targetWidth,height:this.targetHeight,markers:this.editors.map((t=>t.getState()))};return JSON.parse(JSON.stringify(t))}restoreState(t){var i;const e=JSON.parse(JSON.stringify(t));for(this.editors.splice(0);null===(i=this._mainCanvas)||void 0===i?void 0:i.lastChild;)this._mainCanvas.removeChild(this._mainCanvas.lastChild);e.markers.forEach((t=>{const i=this.getMarkerTypeByName(t.typeName);if(void 0!==i){const e=this.markerEditors.get(i);if(void 0!==e){const s=this.addNewMarker(e,i);s.restoreState(t),this.editors.push(s)}}})),e.width&&e.height&&(e.width!==this.targetWidth||e.height!==this.targetHeight)&&this.scaleMarkers(this.targetWidth/e.width,this.targetHeight/e.height),this.dispatchEvent(new CustomEvent("arearestorestate",{detail:{markerArea:this}}))}scaleMarkers(t,i){let e;e=this._currentMarkerEditor,this.setCurrentEditor(),this.editors.forEach((e=>{e!==this._currentMarkerEditor&&e.scale(t,i)})),void 0!==e&&this.setCurrentEditor(e)}toggleLogo(){z.isLicensed("MJS3E")||z.isLicensed("MJS3")?this.removeLogo():this.addLogo()}addLogo(){var t,i;void 0!==this._logoUI&&(null===(t=this._contentContainer)||void 0===t||t.removeChild(this._logoUI)),this._logoUI=document.createElement("div"),this._logoUI.style.display="inline-block",this._logoUI.style.margin="0px",this._logoUI.style.padding="0px",this._logoUI.style.fill="#333333";const e=document.createElement("a");e.href="https://markerjs.com/",e.target="_blank",e.innerHTML=L,e.title="Powered by marker.js",e.style.display="grid",e.style.alignItems="center",e.style.justifyItems="center",e.style.padding="3px",e.style.width="20px",e.style.height="20px",e.style.cursor="pointer",this._logoUI.appendChild(e),null===(i=this._contentContainer)||void 0===i||i.appendChild(this._logoUI),this._logoUI.style.position="absolute",this._logoUI.style.pointerEvents="all",this.positionLogo()}removeLogo(){this._contentContainer&&void 0!==this._logoUI&&this._contentContainer.contains(this._logoUI)&&this._contentContainer.removeChild(this._logoUI)}positionLogo(){this._logoUI&&this._contentContainer&&(this._logoUI.style.left="20px",this._logoUI.style.top=this._contentContainer.offsetHeight-this._logoUI.clientHeight-20+"px")}get isUndoPossible(){return!(!this.undoRedoManager||!this.undoRedoManager.isUndoPossible)}get isRedoPossible(){return!(!this.undoRedoManager||!this.undoRedoManager.isRedoPossible)}addUndoStep(){if(void 0===this._currentMarkerEditor||"edit"!==this._currentMarkerEditor.state){const t=this.getState(),i=this.undoRedoManager.getLastUndoStep();if(!i||i.width===t.width&&i.height===t.height){this.undoRedoManager.addUndoStep(t)&&this.dispatchEvent(new CustomEvent("areastatechange",{detail:{markerArea:this}}))}else this.undoRedoManager.replaceLastUndoStep(t),this.dispatchEvent(new CustomEvent("areastatechange",{detail:{markerArea:this}}))}}undo(){this.addUndoStep(),this.undoStep()}undoStep(){const t=this.undoRedoManager.undo();void 0!==t&&this.restoreState(t)}redo(){this.redoStep()}redoStep(){const t=this.undoRedoManager.redo();void 0!==t&&(this.restoreState(t),this.dispatchEvent(new CustomEvent("areastatechange",{detail:{markerArea:this}})))}addEventListener(t,i,e){super.addEventListener(t,i,e)}removeEventListener(t,i,e){super.removeEventListener(t,i,e)}}window&&window.customElements&&void 0===window.customElements.get("mjs-marker-area")&&window.customElements.define("mjs-marker-area",W);class I extends HTMLElement{get targetWidth(){return this._targetWidth}set targetWidth(t){this._targetWidth=t,this.setMainCanvasSize()}get targetHeight(){return this._targetHeight}set targetHeight(t){this._targetHeight=t,this.setMainCanvasSize()}get targetImage(){return this._targetImage}set targetImage(t){this._targetImage=t,void 0!==t&&this.addTargetImage()}get zoomLevel(){return this._zoomLevel}set zoomLevel(t){this._zoomLevel=t,this._canvasContainer&&this._contentContainer&&this._mainCanvas&&(this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this.setEditingTargetSize(),this._canvasContainer.scrollTo({left:(this._mainCanvas.clientWidth-this._canvasContainer.clientWidth)/2,top:(this._mainCanvas.clientHeight-this._canvasContainer.clientHeight)/2}))}constructor(){super(),this.width=0,this.height=0,this._targetWidth=-1,this._targetHeight=-1,this.markerTypes=[],this.markers=[],this._zoomLevel=1,this._isInitialized=!1,this.markerTypes=[h,n,l,d,c,p,g,m,v,y],this.connectedCallback=this.connectedCallback.bind(this),this.disconnectedCallback=this.disconnectedCallback.bind(this),this.createLayout=this.createLayout.bind(this),this.addMainCanvas=this.addMainCanvas.bind(this),this.setMainCanvasSize=this.setMainCanvasSize.bind(this),this.setEditingTargetSize=this.setEditingTargetSize.bind(this),this.addTargetImage=this.addTargetImage.bind(this),this.attachEvents=this.attachEvents.bind(this),this.attachWindowEvents=this.attachWindowEvents.bind(this),this.detachEvents=this.detachEvents.bind(this),this.detachWindowEvents=this.detachWindowEvents.bind(this),this.addNewMarker=this.addNewMarker.bind(this),this.show=this.show.bind(this),this.scaleMarkers=this.scaleMarkers.bind(this),this.toggleLogo=this.toggleLogo.bind(this),this.addLogo=this.addLogo.bind(this),this.removeLogo=this.removeLogo.bind(this),this.attachShadow({mode:"open"})}connectedCallback(){this.dispatchEvent(new CustomEvent("viewinit",{detail:{markerView:this}})),z.addKeyAddListener(this.toggleLogo),this.createLayout(),this.addMainCanvas(),this.attachEvents(),this._isInitialized=!0,void 0!==this.targetImage&&this.addTargetImage(),this.setMainCanvasSize(),this.toggleLogo(),this.dispatchEvent(new CustomEvent("viewshow",{detail:{markerView:this}}))}disconnectedCallback(){this.detachEvents()}createLayout(){var t;this.style.display="flex",this.style.width=""!==this.style.width?this.style.width:"100%",this.style.height=""!==this.style.height?this.style.height:"100%",this.style.position="relative",this._contentContainer=document.createElement("div"),this._contentContainer.style.display="flex",this._contentContainer.style.position="relative",this._contentContainer.style.flexGrow="2",this._contentContainer.style.flexShrink="1",this._contentContainer.style.overflow="hidden",this._canvasContainer=document.createElement("div"),this._canvasContainer.style.touchAction="pinch-zoom",this._canvasContainer.className="canvas-container",this._canvasContainer.style.display="grid",this._canvasContainer.style.gridTemplateColumns="1fr",this._canvasContainer.style.flexGrow="2",this._canvasContainer.style.flexShrink="2",this._canvasContainer.style.justifyItems="center",this._canvasContainer.style.alignItems="center",this._canvasContainer.style.overflow="auto",this._contentContainer.appendChild(this._canvasContainer),null===(t=this.shadowRoot)||void 0===t||t.appendChild(this._contentContainer)}addMainCanvas(){var i,e,s;this.width=(null===(i=this._contentContainer)||void 0===i?void 0:i.clientWidth)||0,this.height=(null===(e=this._contentContainer)||void 0===e?void 0:e.clientHeight)||0,this._mainCanvas=document.createElementNS("http://www.w3.org/2000/svg","svg"),this._mainCanvas.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.setMainCanvasSize(),this._mainCanvas.style.gridColumnStart="1",this._mainCanvas.style.gridRowStart="1",this._mainCanvas.style.pointerEvents="auto",this._mainCanvas.style.margin="10px",this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this._groupLayer=t.createGroup(),this._mainCanvas.appendChild(this._groupLayer),null===(s=this._canvasContainer)||void 0===s||s.appendChild(this._mainCanvas)}setMainCanvasSize(){void 0!==this._mainCanvas&&this._targetHeight>0&&this._targetWidth>0&&(this._mainCanvas.style.width=this._targetWidth*this.zoomLevel+"px",this._mainCanvas.style.height=this._targetHeight*this.zoomLevel+"px",this._mainCanvas.setAttribute("width",""+this._targetWidth*this.zoomLevel),this._mainCanvas.setAttribute("height",""+this._targetHeight*this.zoomLevel),this._mainCanvas.setAttribute("viewBox","0 0 "+this._targetWidth.toString()+" "+this._targetHeight.toString()),this.setEditingTargetSize())}setEditingTargetSize(){void 0!==this._editingTarget&&(this._editingTarget.width=this._targetWidth*this.zoomLevel,this._editingTarget.height=this._targetHeight*this.zoomLevel,this._editingTarget.style.width=this._targetWidth*this.zoomLevel+"px",this._editingTarget.style.height=this._targetHeight*this.zoomLevel+"px")}addTargetImage(){this._isInitialized&&void 0===this._editingTarget&&void 0!==this.targetImage&&void 0!==this._canvasContainer&&void 0!==this._mainCanvas&&(this._editingTarget=document.createElement("img"),this._targetWidth=this._targetWidth>0?this._targetWidth:this.targetImage.clientWidth,this._targetHeight=this._targetHeight>0?this._targetHeight:this.targetImage.clientHeight,this._editingTarget.addEventListener("load",(t=>{if(void 0!==this._editingTarget){if(this._targetHeight<=0&&this._targetWidth<=0){const i=t.target;this._targetWidth=i.clientWidth>0?i.clientWidth:i.naturalWidth,this._targetHeight=i.clientHeight>0?i.clientHeight:i.naturalHeight}this._editingTarget.width=this._targetWidth,this._editingTarget.height=this._targetHeight,this._editingTarget.style.width=`${this._targetWidth}px`,this._editingTarget.style.height=`${this._targetHeight}px`,this._editingTarget.style.gridColumnStart="1",this._editingTarget.style.gridRowStart="1",this.setMainCanvasSize()}})),this._editingTarget.src=this.targetImage.src,this._canvasContainer.insertBefore(this._editingTarget,this._mainCanvas))}addNewMarker(i){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const e=t.createGroup();return this._mainCanvas.appendChild(e),new i(e)}attachEvents(){this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.attachWindowEvents()}attachWindowEvents(){}detachEvents(){this.detachWindowEvents()}detachWindowEvents(){}getMarkerTypeByName(t){let i;return this.markerTypes.forEach((e=>{e.typeName===t&&(i=e)})),i}show(t){var i;const e=JSON.parse(JSON.stringify(t));for(this.markers.splice(0);null===(i=this._mainCanvas)||void 0===i?void 0:i.lastChild;)this._mainCanvas.removeChild(this._mainCanvas.lastChild);e.markers.forEach((t=>{const i=this.getMarkerTypeByName(t.typeName);if(void 0!==i){const e=this.addNewMarker(i);e.restoreState(t),this.markers.push(e)}})),e.width&&e.height&&(e.width!==this.targetWidth||e.height!==this.targetHeight)&&this.scaleMarkers(this.targetWidth/e.width,this.targetHeight/e.height),this.dispatchEvent(new CustomEvent("viewrestorestate",{detail:{markerView:this}}))}scaleMarkers(t,i){this.markers.forEach((e=>{e.scale(t,i)}))}toggleLogo(){z.isLicensed("MJS3V")||z.isLicensed("MJS3")?this.removeLogo():this.addLogo()}addLogo(){var t,i;void 0!==this._logoUI&&(null===(t=this._contentContainer)||void 0===t||t.removeChild(this._logoUI)),this._logoUI=document.createElement("div"),this._logoUI.style.display="inline-block",this._logoUI.style.margin="0px",this._logoUI.style.padding="0px",this._logoUI.style.fill="#333333";const e=document.createElement("a");e.href="https://markerjs.com/",e.target="_blank",e.innerHTML=L,e.title="Powered by marker.js",e.style.display="grid",e.style.alignItems="center",e.style.justifyItems="center",e.style.padding="3px",e.style.width="20px",e.style.height="20px",e.style.cursor="pointer",this._logoUI.appendChild(e),null===(i=this._contentContainer)||void 0===i||i.appendChild(this._logoUI),this._logoUI.style.position="absolute",this._logoUI.style.pointerEvents="all",this.positionLogo()}removeLogo(){this._contentContainer&&void 0!==this._logoUI&&this._contentContainer.contains(this._logoUI)&&this._contentContainer.removeChild(this._logoUI)}positionLogo(){this._logoUI&&this._contentContainer&&(this._logoUI.style.left="20px",this._logoUI.style.top=this._contentContainer.offsetHeight-this._logoUI.clientHeight-20+"px")}addEventListener(t,i,e){super.addEventListener(t,i,e)}removeEventListener(t,i,e){super.removeEventListener(t,i,e)}}function N(t,i,e,s){return new(e||(e=Promise))((function(r,a){function h(t){try{n(s.next(t))}catch(t){a(t)}}function o(t){try{n(s.throw(t))}catch(t){a(t)}}function n(t){var i;t.done?r(t.value):(i=t.value,i instanceof e?i:new e((function(t){t(i)}))).then(h,o)}n((s=s.apply(t,i||[])).next())}))}window&&window.customElements&&void 0===window.customElements.get("mjs-marker-view")&&window.customElements.define("mjs-marker-view",I),"function"==typeof SuppressedError&&SuppressedError;class ${get targetWidth(){return this._targetWidth}set targetWidth(t){this._targetWidth=t,this.setMainCanvasSize()}get targetHeight(){return this._targetHeight}set targetHeight(t){this._targetHeight=t,this.setMainCanvasSize()}get targetImage(){return this._targetImage}set targetImage(t){this._targetImageLoaded=!1,this._targetImage=t,void 0!==t&&this.addTargetImage()}constructor(){this._targetWidth=-1,this._targetHeight=-1,this._targetImageLoaded=!1,this.markerTypes=[],this.markers=[],this._isInitialized=!1,this.naturalSize=!1,this.imageType="image/png",this.markersOnly=!1,this.markerTypes=[h,n,l,d,c,p,g,m,v,y],this.init=this.init.bind(this),this.addMainCanvas=this.addMainCanvas.bind(this),this.setMainCanvasSize=this.setMainCanvasSize.bind(this),this.setEditingTargetSize=this.setEditingTargetSize.bind(this),this.addTargetImage=this.addTargetImage.bind(this),this.addNewMarker=this.addNewMarker.bind(this),this.restoreState=this.restoreState.bind(this),this.scaleMarkers=this.scaleMarkers.bind(this)}init(){this.addMainCanvas(),this._isInitialized=!0,void 0!==this.targetImage&&this.addTargetImage(),this.setMainCanvasSize()}addMainCanvas(){this._mainCanvas=document.createElementNS("http://www.w3.org/2000/svg","svg"),this._mainCanvas.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.setMainCanvasSize(),this._mainCanvas.style.gridColumnStart="1",this._mainCanvas.style.gridRowStart="1",this._mainCanvas.style.pointerEvents="auto",this._mainCanvas.style.visibility="hidden",document.body.appendChild(this._mainCanvas)}setMainCanvasSize(){void 0!==this._mainCanvas&&this._targetHeight>0&&this._targetWidth>0&&(this._mainCanvas.style.width=`${this._targetWidth}px`,this._mainCanvas.style.height=`${this._targetHeight}px`,this._mainCanvas.setAttribute("width",`${this._targetWidth}`),this._mainCanvas.setAttribute("height",`${this._targetHeight}`),this._mainCanvas.setAttribute("viewBox","0 0 "+this._targetWidth.toString()+" "+this._targetHeight.toString()),this.setEditingTargetSize())}setEditingTargetSize(){void 0!==this._editingTarget&&(this._editingTarget.width=this._targetWidth,this._editingTarget.height=this._targetHeight,this._editingTarget.style.width=`${this._targetWidth}px`,this._editingTarget.style.height=`${this._targetHeight}px`)}addTargetImage(){this._isInitialized&&void 0===this._editingTarget&&void 0!==this.targetImage&&void 0!==this._mainCanvas&&(this._editingTarget=document.createElement("img"),this._targetWidth=this._targetWidth>0?this._targetWidth:this.targetImage.clientWidth,this._targetHeight=this._targetHeight>0?this._targetHeight:this.targetImage.clientHeight,this._editingTarget.addEventListener("load",(t=>{if(void 0!==this._editingTarget){if(this._targetHeight<=0&&this._targetWidth<=0){const i=t.target;this._targetWidth=i.naturalWidth,this._targetHeight=i.naturalHeight}this._editingTarget.width=this._targetWidth,this._editingTarget.height=this._targetHeight,this._editingTarget.style.width=`${this._targetWidth}px`,this._editingTarget.style.height=`${this._targetHeight}px`,this._editingTarget.style.gridColumnStart="1",this._editingTarget.style.gridRowStart="1",this._targetImageLoaded=!0,this.setMainCanvasSize()}})),this._editingTarget.style.visibility="hidden",this._editingTarget.src=this.targetImage.src,document.body.appendChild(this._editingTarget))}addNewMarker(i){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const e=t.createGroup();return this._mainCanvas.appendChild(e),new i(e)}getMarkerTypeByName(t){let i;return this.markerTypes.forEach((e=>{e.typeName===t&&(i=e)})),i}restoreState(t){var i;const e=JSON.parse(JSON.stringify(t));for(this.markers.splice(0);null===(i=this._mainCanvas)||void 0===i?void 0:i.lastChild;)this._mainCanvas.removeChild(this._mainCanvas.lastChild);e.markers.forEach((t=>{const i=this.getMarkerTypeByName(t.typeName);if(void 0!==i){const e=this.addNewMarker(i);e.restoreState(t),this.markers.push(e)}})),e.width&&e.height&&(e.width!==this.targetWidth||e.height!==this.targetHeight)&&this.scaleMarkers(this.targetWidth/e.width,this.targetHeight/e.height)}scaleMarkers(t,i){this.markers.forEach((e=>{e.scale(t,i)}))}rasterize(t,i){return N(this,void 0,void 0,(function*(){if(this.naturalSize||(this._targetWidth=t.width,this._targetHeight=t.height),this.init(),void 0===this._mainCanvas||void 0===this.targetImage)throw new Error("Not properly initialized.");let e=0;for(;!this._targetImageLoaded&&e++<100;)yield new Promise((t=>setTimeout(t,100)));this.restoreState(t);const s=void 0!==i?i:document.createElement("canvas");null===this.targetImage&&(this.markersOnly=!0,this.naturalSize=!1);const r=document.createElementNS("http://www.w3.org/2000/svg","svg");r.setAttribute("xmlns","http://www.w3.org/2000/svg"),r.setAttribute("width",this._mainCanvas.width.baseVal.valueAsString),r.setAttribute("height",this._mainCanvas.height.baseVal.valueAsString),r.setAttribute("viewBox","0 0 "+this._mainCanvas.viewBox.baseVal.width.toString()+" "+this._mainCanvas.viewBox.baseVal.height.toString()),r.innerHTML=this._mainCanvas.innerHTML,!0===this.naturalSize?(r.width.baseVal.value=this.targetImage.naturalWidth,r.height.baseVal.value=this.targetImage.naturalHeight):void 0!==this.width&&void 0!==this.height&&(r.width.baseVal.value=this.width,r.height.baseVal.value=this.height),s.width=r.width.baseVal.value,s.height=r.height.baseVal.value;const a=r.outerHTML,h=s.getContext("2d");if(null===h)throw new Error("Canvas 2D context is not available.");!0!==this.markersOnly&&h.drawImage(this.targetImage,0,0,s.width,s.height);const o=window.URL,n=new Image(s.width,s.height);n.setAttribute("crossOrigin","anonymous");const l=new Blob([a],{type:"image/svg+xml"}),d=o.createObjectURL(l);let c="";for(n.onload=()=>{h.drawImage(n,0,0),o.revokeObjectURL(d),c=s.toDataURL(this.imageType,this.imageQuality)},n.src=d,e=0;!c&&e++<100;)yield new Promise((t=>setTimeout(t,100)));return this._editingTarget&&document.body.removeChild(this._editingTarget),document.body.removeChild(this._mainCanvas),c}))}}export{l as ArrowMarker,P as ArrowMarkerEditor,y as CalloutMarker,A as CalloutMarkerEditor,m as CoverMarker,h as FrameMarker,p as FreehandMarker,M as FreehandMarkerEditor,k as Grip,v as HighlightMarker,n as LineMarker,o as LinearMarkerBase,S as LinearMarkerEditor,W as MarkerArea,i as MarkerBase,_ as MarkerBaseEditor,I as MarkerView,d as MeasurementMarker,c as PolygonMarker,C as PolygonMarkerEditor,s as RectangularBoxMarkerBase,$ as Renderer,x as ResizeGrip,f as RotateGrip,a as ShapeMarkerBase,G as ShapeMarkerEditor,r as ShapeOutlineMarkerBase,E as ShapeOutlineMarkerEditor,t as SvgHelper,g as TextMarker,V as TextMarkerEditor};
 //# sourceMappingURL=markerjs3.js.map