@markerjs/markerjs3 3.0.0-rc.0 → 3.0.0-rc.1

package/umd/markerjs3.js

@@ -1,2 +1,2 @@
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t="undefined"!=typeof globalThis?globalThis:t||self).markerjs3={})}(this,(function(t){"use strict";class i{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(t,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","rect");return r.setAttribute("width",t.toString()),r.setAttribute("height",e.toString()),s&&i.setAttributes(r,s),r}static createLine(t,e,s,r,a){const h=document.createElementNS("http://www.w3.org/2000/svg","line");return h.setAttribute("x1",t.toString()),h.setAttribute("y1",e.toString()),h.setAttribute("x2",s.toString()),h.setAttribute("y2",r.toString()),a&&i.setAttributes(h,a),h}static createPolygon(t,e){const s=document.createElementNS("http://www.w3.org/2000/svg","polygon");return s.setAttribute("points",t),e&&i.setAttributes(s,e),s}static createCircle(t,e){const s=document.createElementNS("http://www.w3.org/2000/svg","circle");return s.setAttribute("cx",(t/2).toString()),s.setAttribute("cy",(t/2).toString()),s.setAttribute("r",t.toString()),e&&i.setAttributes(s,e),s}static createEllipse(t,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","ellipse");return r.setAttribute("cx",(t/2).toString()),r.setAttribute("cy",(e/2).toString()),r.setAttribute("rx",(t/2).toString()),r.setAttribute("ry",(e/2).toString()),s&&i.setAttributes(r,s),r}static createGroup(t){const e=document.createElementNS("http://www.w3.org/2000/svg","g");return t&&i.setAttributes(e,t),e}static createTransform(){return document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGTransform()}static createMarker(t,e,s,r,a,h,o){const n=document.createElementNS("http://www.w3.org/2000/svg","marker");return i.setAttributes(n,[["id",t],["orient",e],["markerWidth",s.toString()],["markerHeight",r.toString()],["refX",a.toString()],["refY",h.toString()]]),n.appendChild(o),n}static createText(t){const e=document.createElementNS("http://www.w3.org/2000/svg","text");return e.setAttribute("x","0"),e.setAttribute("y","0"),t&&i.setAttributes(e,t),e}static createTSpan(t,e){const s=document.createElementNS("http://www.w3.org/2000/svg","tspan");return s.textContent=t,e&&i.setAttributes(s,e),s}static createImage(t){const e=document.createElementNS("http://www.w3.org/2000/svg","image");return t&&i.setAttributes(e,t),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(t,e){const s=document.createElementNS("http://www.w3.org/2000/svg","path");return s.setAttribute("d",t),e&&i.setAttributes(s,e),s}static createForeignObject(t){const e=document.createElementNS("http://www.w3.org/2000/svg","foreignObject");return e.setAttribute("x","0"),e.setAttribute("y","0"),t&&i.setAttributes(e,t),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 e{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),this.getBBox=this.getBBox.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:Object.getPrototypeOf(this).constructor.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){}getBBox(){return this.container.getBBox()}}e.typeName="MarkerBase";class s{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 r extends e{get centerX(){return this.left+this.width/2}get centerY(){return this.top+this.height/2}get visual(){return this._visual}set visual(t){this._visual=t;const e=i.createTransform();this._visual.transform.baseVal.appendItem(e)}constructor(t){super(t),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(i.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(t){if(0===this.rotationAngle)return t;const e=this.container.getCTM();if(null===e)return t;let s=i.createPoint(t.x,t.y);s=s.matrixTransform(e);return{x:s.x,y:s.y}}unrotatePoint(t){if(0===this.rotationAngle)return t;let e=this.container.getCTM();if(null===e)return t;e=e.inverse();let s=i.createPoint(t.x,t.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:s.toITransformMatrix(this.visual.transform.baseVal.getItem(0).matrix),containerTransformMatrix:s.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(s.toSVGMatrix(this.visual.transform.baseVal.getItem(0).matrix,i.visualTransformMatrix)),this.container.transform.baseVal.getItem(0).setMatrix(s.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}getBBox(){const t=this.rotatePoint({x:this.left,y:this.top}),i=this.rotatePoint({x:this.left+this.width,y:this.top}),e=this.rotatePoint({x:this.left,y:this.top+this.height}),s=this.rotatePoint({x:this.left+this.width,y:this.top+this.height}),r={x:Math.min(t.x,i.x,e.x,s.x),y:Math.min(t.y,i.y,e.y,s.y)},a=Math.max(t.x,i.x,e.x,s.x),h=Math.max(t.y,i.y,e.y,s.y);return new DOMRect(r.x,r.y,a-r.x,h-r.y)}}class a extends r{applyStrokeColor(){this.visual&&i.setAttributes(this.visual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visual&&i.setAttributes(this.visual,[["stroke-width",this._strokeWidth.toString()]])}applyStrokeDasharray(){this.visual&&i.setAttributes(this.visual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&i.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=i.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&&i.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&&i.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()}}a.title="Shape outline marker";class h extends a{applyFillColor(){this.visual&&i.setAttributes(this.visual,[["fill",this._fillColor]])}constructor(t){super(t),this._fillColor="transparent",this.createVisual=this.createVisual.bind(this)}createVisual(){super.createVisual(),this.visual&&i.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()}}h.title="Shape marker";class o extends a{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`}}o.typeName="FrameMarker",o.title="Frame marker";class n extends e{applyStrokeColor(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke",this._strokeColor],["fill",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&i.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&i.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=i.createGroup(),this.selectorVisual=i.createPath(this.getPath(),[["stroke","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]),this.visibleVisual=i.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&&(i.setAttributes(this.selectorVisual,[["d",this.getPath()]]),i.setAttributes(this.visibleVisual,[["d",this.getPath()]]),i.setAttributes(this.visibleVisual,[["stroke",this.strokeColor]]),i.setAttributes(this.visibleVisual,[["fill",this.strokeColor]]),i.setAttributes(this.visibleVisual,[["stroke-width",this.strokeWidth.toString()]]),i.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 l extends n{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}`}}l.typeName="LineMarker",l.title="Line marker";class d extends l{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),u=n-i*Math.sin(a),p=l+i*Math.cos(a),g=this.x2-t*e*Math.cos(a),m=this.y2-t*e*Math.sin(a),k=this.x2-t*Math.cos(a),v=this.y2-t*Math.sin(a),_=k+i*Math.sin(a),y=v-i*Math.cos(a),x=k-i*Math.sin(a),S=v+i*Math.cos(a);return`${"start"===this.arrowType||"both"===this.arrowType?`M ${h} ${o}\n    L ${d} ${c} L ${this.x1} ${this.y1} L ${u} ${p} L ${h} ${o}\n    L ${h} ${o}`:`M ${this.x1} ${this.y1}`} ${"end"===this.arrowType||"both"===this.arrowType?`L ${g} ${m} \n    L ${_} ${y} L ${this.x2} ${this.y2} L ${x} ${S} 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=d.typeName,t}restoreState(t){const i=t;this.arrowType=i.arrowType,super.restoreState(t)}}d.typeName="ArrowMarker",d.title="Arrow marker";class c extends l{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()}}c.typeName="MeasurementMarker",c.title="Measurement marker";class u extends e{applyStrokeColor(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&i.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&i.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=i.createGroup(),this.visibleVisual=i.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=i.createGroup(),this.visual.appendChild(this.selectorVisual),this.points.forEach((()=>{this.addSelectorLine()})))}adjustVisual(){this.selectorVisual&&this.visibleVisual&&(i.setAttributes(this.visibleVisual,[["d",this.getPath()]]),i.setAttributes(this.visibleVisual,[["stroke",this.strokeColor]]),i.setAttributes(this.visibleVisual,[["stroke-width",this.strokeWidth.toString()]]),i.setAttributes(this.visibleVisual,[["stroke-dasharray",this.strokeDasharray.toString()]]),this.adjustSelectorVisual())}adjustSelectorVisual(){if(this.selectorVisual){const t=this.points.length-this.selectorVisualLines.length;if(t>0)for(let i=0;i<t;i++)this.addSelectorLine();else if(t<0)for(let i=0;i<-t;i++)this.selectorVisual.removeChild(this.selectorVisualLines.pop());this.selectorVisualLines.forEach(((t,e)=>{i.setAttributes(t,[["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 t=i.createLine(0,0,0,0,[["stroke","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]);this.selectorVisual.appendChild(t),this.selectorVisualLines.push(t)}getState(){const t=Object.assign({points:this.points},super.getState());return t.typeName=u.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()}}u.typeName="PolygonMarker",u.title="Polygon marker";class p extends e{applyStrokeColor(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&i.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&i.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=i.createGroup(),this.selectorVisual=i.createPath(this.getPath(),[["stroke","transparent"],["fill","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]),this.visibleVisual=i.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 t=this.getPath();i.setAttributes(this.selectorVisual,[["d",t]]),i.setAttributes(this.visibleVisual,[["d",t]]),i.setAttributes(this.visibleVisual,[["stroke",this.strokeColor]]),i.setAttributes(this.visibleVisual,[["stroke-width",this.strokeWidth.toString()]]),i.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 g{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(t){this.textElement&&i.setAttributes(this._textElement,[["fill",t]]),this._color=t}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(t){this._text="",this.offsetX=0,this.offsetY=0,this._boundingBox=new DOMRect,this._labelBackground=i.createRect(10,10,[["fill","white"]]),this._textElement=i.createText(),this._color="transparent",this._fontFamily="",this._fontSize={value:1,units:"rem",step:.1},this.wordWrap=!1,this.prevWrappedText="",this.setupTextElement(),void 0!==t&&(this.text=t),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 t=this.wordWrap?this.wrapText():this.text;if(this.prevWrappedText===t)return void this.positionText();for(this.prevWrappedText=t;this._textElement.lastChild;)this._textElement.removeChild(this._textElement.lastChild);t.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/).forEach(((t,e)=>{this._textElement.appendChild(i.createTSpan(""===t.trim()?" ":t.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(t){const e=void 0===t?this:t;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(((t,e)=>{const r=t;i.setAttributes(r,[["x",`${s}`],["dy",e>0?"1em":"0"]])})),i.setAttributes(e._textElement,[["x",`${s}`]]),i.setAttributes(e._textElement,[["y",`${o}`]]),e._textSize=e._textElement.getBBox();const n=1.2;i.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 m extends r{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 g(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.setSizeFromTextSize=this.setSizeFromTextSize.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=i.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(){const[t,i]=[this.width,this.height];super.setSize(),this.setSizeFromTextSize(),t===this.width&&i===this.height||!this.onSizeChanged||this.onSizeChanged(this),this.setTextBoundingBox()}setSizeFromTextSize(){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}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(){return Object.assign({color:this.color,fontFamily:this.fontFamily,fontSize:this.fontSize,text:this.text},super.getState())}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()}}m.typeName="TextMarker",m.title="Text marker",m.DEFAULT_TEXT="Text";class k extends h{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`}}k.typeName="CoverMarker",k.title="Cover marker";class v extends h{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`}}v.typeName="HighlightMarker",v.title="Highlight marker";class _ extends m{get tipPosition(){return this._tipPosition}set tipPosition(t){this._tipPosition=t,this.adjustVisual()}constructor(t){super(t),this._tipPosition={x:0,y:0},this.tipBase1Position={x:0,y:0},this.tipBase2Position={x:0,y:0},this._calloutVisual=i.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)}applyStrokeColor(){i.setAttributes(this._calloutVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){i.setAttributes(this._calloutVisual,[["stroke-width",this._strokeWidth.toString()]])}applyStrokeDasharray(){i.setAttributes(this._calloutVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){i.setAttributes(this._calloutVisual,[["opacity",this._opacity.toString()]])}applyFillColor(){i.setAttributes(this._calloutVisual,[["fill",this._fillColor]])}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 t;super.createVisual(),this._tipPosition={x:this.width/4,y:this.height+20},this._calloutVisual=i.createPath(this.getPath(),[["fill",this._fillColor],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]]),null===(t=this.visual)||void 0===t||t.insertBefore(this._calloutVisual,this.textBlock.textElement)}adjustVisual(){super.adjustVisual(),this._calloutVisual&&i.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(){return Object.assign({tipPosition:this.tipPosition},super.getState())}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()}}_.typeName="CalloutMarker",_.title="Callout marker";class y extends a{constructor(t){super(t),this.strokeColor="#ff0000",this.strokeWidth=3}getPath(t=this.width,i=this.height){return`M ${t/2} 0 \n       a ${t/2} ${i/2} 0 1 0 0 ${i} \n       a ${t/2} ${i/2} 0 1 0 0 -${i} z`}}y.typeName="EllipseFrameMarker",y.title="Ellipse frame marker";class x extends h{constructor(t){super(t),this.fillColor="#ff0000",this.strokeColor="#ff0000"}getPath(t=this.width,i=this.height){return`M ${t/2} 0 \n    a ${t/2} ${i/2} 0 1 0 0 ${i} \n    a ${t/2} ${i/2} 0 1 0 0 -${i} z`}}x.typeName="EllipseMarker",x.title="Ellipse marker";class S extends r{get svgString(){return this._svgString}set svgString(t){this._svgString=t,this.SVGImage&&"svg"===this.imageType&&(this.SVGImage.outerHTML=void 0!==t?t:"")}get imageSrc(){return this._imageSrc}set imageSrc(t){this._imageSrc=t,this.SVGImage&&"bitmap"===this.imageType&&(void 0!==t?i.setAttributes(this.SVGImage,[["href",t]]):i.setAttributes(this.SVGImage,[["href",""]]))}constructor(t){super(t),this.imageType="svg",this.naturalWidth=24,this.naturalHeight=24,this.defaultSize={width:this.naturalWidth,height:this.naturalHeight},this.createImage=this.createImage.bind(this),this.createVisual=this.createVisual.bind(this)}createImage(){var t;if(void 0!==this._svgString){this.imageType="svg";const t=(new DOMParser).parseFromString(this._svgString,"image/svg+xml").documentElement;if(!(t instanceof SVGSVGElement))throw new Error("Invalid SVG string");const i=t;this.SVGImage=this.container.ownerDocument.importNode(i,!0)}else this.imageType="bitmap",this.SVGImage=i.createImage([["href",null!==(t=this._imageSrc)&&void 0!==t?t:""]])}createVisual(){this.createImage(),void 0!==this.SVGImage&&(this.visual=i.createGroup(),"svg"===this.imageType&&i.setAttributes(this.visual,[["viewBox",`0 0 ${this.naturalWidth} ${this.naturalHeight}`],["fill",this._fillColor],["stroke",this._strokeColor],["color",this._strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-dasharray",this.strokeDasharray],["pointer-events","bounding-box"]]),this.adjustImage(),this.visual.appendChild(this.SVGImage),this.addMarkerVisualToContainer(this.visual))}adjustImage(){void 0!==this.SVGImage&&(this.SVGImage.setAttribute("x","0px"),this.SVGImage.setAttribute("y","0px"),this.SVGImage.setAttribute("width",`${this.width}px`),this.SVGImage.setAttribute("height",`${this.height}px`))}isDescendant(t,i){if(t===i)return!0;for(let e=0;e<t.children.length;e++)if(this.isDescendant(t.children[e],i))return!0;return!1}ownsTarget(t){return super.ownsTarget(t)||void 0!==this.SVGImage&&this.isDescendant(this.SVGImage,t)}setSize(){super.setSize(),this.visual&&(i.setAttributes(this.visual,[["width",`${this.width}px`],["height",`${this.height}px`]]),this.adjustImage())}getState(){return Object.assign({imageType:this.imageType,svgString:this.svgString,imageSrc:this.imageSrc},super.getState())}applyStrokeColor(){this.visual&&i.setAttributes(this.visual,[["color",this._strokeColor]])}restoreState(t){const i=t;void 0!==i.imageType&&(this.imageType=i.imageType),void 0!==i.svgString&&(this._svgString=i.svgString),void 0!==i.imageSrc&&(this._imageSrc=i.imageSrc),this.createVisual(),super.restoreState(t),this.setSize()}scale(t,i){super.scale(t,i),this.setSize()}}S.title="Image marker";class C extends S{}C.typeName="CustomImageMarker",C.title="Custom image marker";class w extends S{constructor(t){super(t),this._svgString='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11l3 3L22 4"/></g></svg>',this.strokeColor="#008000"}}w.typeName="CheckImageMarker",w.title="Check image marker";class f extends S{constructor(t){super(t),this._svgString='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m15 9l-6 6m0-6l6 6"/></g></svg>',this.strokeColor="#d00000"}}f.typeName="XImageMarker",f.title="X image marker";class b extends m{constructor(t){super(t),this._outerFrameVisual=i.createPath("M0,0"),this._captionFrameVisual=i.createPath("M0,0"),this._frameVisual=i.createGroup(),this.color="#ffffff",this.fillColor="#ff0000",this.strokeColor="#ff0000",this.strokeWidth=3,this.padding=5,this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.adjustFrameVisual=this.adjustFrameVisual.bind(this),this.getPaths=this.getPaths.bind(this)}applyStrokeColor(){i.setAttributes(this._outerFrameVisual,[["stroke",this._strokeColor]]),i.setAttributes(this._captionFrameVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){i.setAttributes(this._outerFrameVisual,[["stroke-width",this._strokeWidth.toString()]]),i.setAttributes(this._captionFrameVisual,[["stroke-width",this._strokeWidth.toString()]]),this.adjustTextPosition(),this.adjustFrameVisual()}applyStrokeDasharray(){i.setAttributes(this._outerFrameVisual,[["stroke-dasharray",this._strokeDasharray]]),i.setAttributes(this._captionFrameVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){i.setAttributes(this._outerFrameVisual,[["opacity",this._opacity.toString()]]),i.setAttributes(this._captionFrameVisual,[["opacity",this._opacity.toString()]])}applyFillColor(){i.setAttributes(this._captionFrameVisual,[["fill",this._fillColor]])}getPaths(t=this.width,i=this.height){var e,s;return{frame:`M 0 0\n      V ${i}\n      H ${t}\n      V 0\n      Z`,caption:`M 0 0\n      H ${t}\n      V ${(null!==(s=null===(e=this.textBlock.textSize)||void 0===e?void 0:e.height)&&void 0!==s?s:40)+2*this.padding+this.strokeWidth}\n      H 0\n      Z`}}createVisual(){var t;super.createVisual();const e=this.getPaths();this._outerFrameVisual=i.createPath(e.frame,[["fill","transparent"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]]),this._captionFrameVisual=i.createPath(e.caption,[["fill","this._fillColor"],["fill-rule","evenodd"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]]),this._frameVisual.appendChild(this._outerFrameVisual),this._frameVisual.appendChild(this._captionFrameVisual),null===(t=this.visual)||void 0===t||t.insertBefore(this._frameVisual,this.textBlock.textElement)}adjustVisual(){super.adjustVisual(),this.adjustTextPosition(),this.adjustFrameVisual()}adjustTextPosition(){var t;this.textBlock.textSize&&(this.textBlock.textElement.style.transform=`translate(${this.width/2-(null===(t=this.textBlock.textSize)||void 0===t?void 0:t.width)/2-this.padding}px, ${this.strokeWidth/2}px)`)}adjustFrameVisual(){const t=this.getPaths();this._outerFrameVisual&&i.setAttributes(this._outerFrameVisual,[["d",t.frame],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]]),this._captionFrameVisual&&i.setAttributes(this._captionFrameVisual,[["d",t.caption],["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._outerFrameVisual!==t&&this._captionFrameVisual!==t)}setSize(){super.setSize(),this.adjustTextPosition(),this.adjustFrameVisual()}setSizeFromTextSize(){}hideVisual(){this.textBlock.hide()}showVisual(){this.textBlock.show(),this.textBlock.renderText()}getState(){return Object.assign({fillColor:this.fillColor},super.getState())}restoreState(t){const i=t;super.restoreState(t),this.fillColor=i.fillColor,this.adjustVisual()}scale(t,i){super.scale(t,i),this.strokeWidth*=(t+i)/2,this.setSize()}}b.typeName="CaptionFrameMarker",b.title="Caption frame marker";class E{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(t){var e;this._creationStyle="draw",this._state="new",this._controlBox=i.createGroup(),this._isSelected=!1,this._continuousCreation=!1,this.isMultiSelected=!1,this._container=t.container,this._overlayContainer=t.overlayContainer,this._markerType=t.markerType,this._marker=null!==(e=t.marker)&&void 0!==e?e:new t.markerType(t.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 M{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=i.createGroup(),this._visual.appendChild(i.createCircle(4*this.gripSize,[["fill","transparent"],["cx",(this.gripSize/2).toString()],["cy",(this.gripSize/2).toString()]]));const t=i.createCircle(this.gripSize,[["fill-opacity","1"],["stroke-width","1"],["stroke-opacity","1"]]);t.style.fill=`var(--mjs-grip-fill, ${this.fillColor})`,t.style.stroke=`var(--mjs-grip-stroke, ${this.strokeColor})`,t.style.filter="drop-shadow(0px 0px 2px rgba(0, 0, 0, .7))",this._visual.appendChild(t)}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 T extends M{}class V extends E{constructor(t){super(t),this.defaultLength=50,this.manipulationStartX=0,this.manipulationStartY=0,this.controlBox=i.createGroup(),this.manipulationBox=i.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.splice(0,1),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=i.createGroup(),this.container.appendChild(this.controlBox),this.manipulationBox=i.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 t=new T;return t.visual.transform.baseVal.appendItem(i.createTransform()),this.manipulationBox.appendChild(t.visual),t}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 B extends E{constructor(t){super(t),this.defaultLength=50,this.manipulationStartX=0,this.manipulationStartY=0,this.manipulationStartX1=0,this.manipulationStartY1=0,this.manipulationStartX2=0,this.manipulationStartY2=0,this.controlBox=i.createGroup(),this.manipulationBox=i.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=i.createGroup(),this.container.appendChild(this.controlBox),this.manipulationBox=i.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 t=new T;return t.visual.transform.baseVal.appendItem(i.createTransform()),this.manipulationBox.appendChild(t.visual),t}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 z{constructor(){this.grips=new Map([["topleft",new T],["topcenter",new T],["topright",new T],["leftcenter",new T],["rightcenter",new T],["bottomleft",new T],["bottomcenter",new T],["bottomright",new T]]),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 L extends M{constructor(){super();const t=this.fillColor;this.fillColor=this.strokeColor,this.strokeColor=t}}class G extends E{constructor(t){super(t),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=i.createGroup(),this.manipulationBox=i.createGroup(),this.CB_DISTANCE=0,this.controlGrips=new z,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=i.createGroup();const t=i.createTransform();t.setTranslate(-this.CB_DISTANCE/2,-this.CB_DISTANCE/2),this.controlBox.transform.baseVal.appendItem(t),this.container.appendChild(this.controlBox),this.manipulationBox=i.createGroup(),this.controlBox.appendChild(this.manipulationBox),this.controlRect=i.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=i.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 z,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 t of this.controlGrips.grips.values())t.visual.transform.baseVal.appendItem(i.createTransform()),this.manipulationBox.appendChild(t.visual),this.manipulationBox.appendChild(t.visual);!0!==this.disableRotation&&(this.rotatorGrip=this.createRotateGrip()),this.positionGrips()}createRotateGrip(){const t=new L;return t.visual.transform.baseVal.appendItem(i.createTransform()),this.manipulationBox.appendChild(t.visual),t}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 A extends G{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 P{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 I extends E{constructor(t){super(t),this.manipulationStartX=0,this.manipulationStartY=0,this.controlBox=i.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=i.createGroup(),this.container.appendChild(this.controlBox),this.controlRect=i.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 t=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&&i.setAttributes(this.controlRect,[["x",(t-this.strokeWidth).toString()],["y",(e-this.strokeWidth).toString()],["width",(s-t+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}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 $ extends G{set color(t){this.marker.color=t,this.stateChanged()}get color(){return this.marker.color}set fontFamily(t){this.marker.fontFamily=t,this.stateChanged()}get fontFamily(){return this.marker.fontFamily}set fontSize(t){this.marker.fontSize=t,this.stateChanged()}get fontSize(){return this.marker.fontSize}constructor(t){super(t),this.textBlockEditorContainer=i.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,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 j{static addKey(t,i){j.keys.set(t,i),j.keyAddListeners.forEach((t=>{t()}))}static addKeyAddListener(t){j.keyAddListeners.push(t)}static removeKeyAddListener(t){const i=j.keyAddListeners.indexOf(t);i>-1&&j.keyAddListeners.splice(i,1)}static isLicensed(t){if(j.keys.has(t)){const i=new RegExp(`${t}-[A-Z][0-9]{3}-[A-Z][0-9]{3}-[0-9]{4}`,"i"),e=j.keys.get(t);return void 0!==e&&i.test(e)}return!1}}j.keys=new Map,j.keyAddListeners=new Array;var D='<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 N extends A{}class H extends B{set arrowType(t){this.marker.arrowType=t}get arrowType(){return this.marker.arrowType}}class O extends ${constructor(t){super(t),this.manipulationStartTipPositionX=0,this.manipulationStartTipPositionY=0}addControlGrips(){this.tipGrip=this.createTipGrip(),super.addControlGrips()}createTipGrip(){const t=new T;return t.visual.transform.baseVal.appendItem(i.createTransform()),this.manipulationBox.appendChild(t.visual),t}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 R extends G{constructor(t){super(t),this._creationStyle="drop",this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.resize=this.resize.bind(this)}pointerDown(t,i){super.pointerDown(t,i),"new"===this.state&&(this.marker.createVisual(),this.marker.moveVisual(t),this._state="creating")}pointerUp(t){super.pointerUp(t),this.setSize(),this.adjustControlBox()}}class U extends ${constructor(t){super(t),this.disabledResizeGrips=[],this._creationStyle="draw"}setSize(){if(super.setSize(),this.textBlockEditorContainer.style.transform=`translate(${this.marker.left}px, ${this.marker.top+this.marker.strokeWidth/2}px)`,this.marker.textBlock.textSize){const t=this.marker.textBlock.textSize.height+2*this.marker.padding;this.textBlockEditorContainer.style.width=`${this.marker.width}px`,this.textBlockEditorContainer.style.height=`${t}px`,this.textBlockEditor.width=this.marker.width,this.textBlockEditor.height=t}}}class F 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,this._targetImageLoaded=!1,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=i.createPath("",[["stroke","#333"],["stroke-width","0.5"],["stroke-dasharray","2 5"],["fill","rgba(200,200,200,0.5)"],["pointer-events","none"]]),this._targetImageLoaded=!1,this.markerEditors=new Map,this.editors=[],this._zoomLevel=1,this.prevPanPoint={x:0,y:0},this.undoRedoManager=new P,this.touchPoints=0,this.isDragging=!1,this.isSelecting=!1,this._marqueeSelectOutline=i.createRect(0,0,[["stroke","rgb(35, 35, 255)"],["stroke-width","1"],["fill","rgba(129, 129, 255, 0.3)"],["pointer-events","none"],["cursor","move"]]),this._marqueeSelectRect=new DOMRect(0,0,0,0),this._manipulationStartX=0,this._manipulationStartY=0,this.markerEditors.set(o,A),this.markerEditors.set(y,A),this.markerEditors.set(l,B),this.markerEditors.set(u,V),this.markerEditors.set(p,I),this.markerEditors.set(m,$),this.markerEditors.set(k,N),this.markerEditors.set(v,N),this.markerEditors.set(x,N),this.markerEditors.set(d,H),this.markerEditors.set(c,B),this.markerEditors.set(_,O),this.markerEditors.set(C,R),this.markerEditors.set(w,R),this.markerEditors.set(f,R),this.markerEditors.set(b,U),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.adjustMarqueeSelectOutline=this.adjustMarqueeSelectOutline.bind(this),this.hideMarqueeSelectOutline=this.hideMarqueeSelectOutline.bind(this),this.attachShadow({mode:"open"})}connectedCallback(){this.dispatchEvent(new CustomEvent("areainit",{detail:{markerArea:this}})),j.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._canvasContainer.style.userSelect="none",this._contentContainer.appendChild(this._canvasContainer),null===(t=this.shadowRoot)||void 0===t||t.appendChild(this._contentContainer)}addMainCanvas(){var t,e,s;this.width=(null===(t=this._contentContainer)||void 0===t?void 0:t.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=i.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._targetImageLoaded=!0,void 0!==this._stateToRestore&&this.restoreState(this._stateToRestore)}})),this._editingTarget.src=this.targetImage.src,this._canvasContainer.insertBefore(this._editingTarget,this._mainCanvas))}registerMarkerType(t,i){this.markerEditors.set(t,i)}createMarker(t){let i=o;i="string"==typeof t?this.getMarkerTypeByName(t)||o: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(t,e){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const s=i.createGroup();return this._mainCanvas.appendChild(s),new t({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(I)&&(null==i?void 0:i.is(I))&&(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(t){var e;if(this._manipulationStartX=t.clientX,this._manipulationStartY=t.clientY,this.touchPoints++,1===this.touchPoints||"touch"!==t.pointerType)if(void 0===this._currentMarkerEditor||"new"!==this._currentMarkerEditor.state&&"creating"!==this._currentMarkerEditor.state){if("select"===this.mode){const e=i.clientToLocalCoordinates(this._mainCanvas,t.clientX,t.clientY,this.zoomLevel),s=this.editors.find((i=>i.ownsTarget(t.target)));void 0!==s?(this.isDragging=!0,t.shiftKey?(this.selectEditor(s),this.initializeMarqueeSelection(e)):s.isSelected||(this.deselectEditor(),this.setCurrentEditor(s)),this._selectedMarkerEditors.forEach((i=>{var s;return i.pointerDown(e,null!==(s=t.target)&&void 0!==s?s:void 0)}))):t.target===this._marqueeSelectOutline&&this._selectedMarkerEditors.length>1?(this.isDragging=!0,this._selectedMarkerEditors.forEach((i=>{var s;return i.pointerDown(e,null!==(s=t.target)&&void 0!==s?s:void 0)}))):(this.setCurrentEditor(),this.deselectEditor(),this.isSelecting=!0,this.isDragging=!0,this.initializeMarqueeSelection(e),this.prevPanPoint={x:t.clientX,y:t.clientY})}}else this.isDragging=!0,this._currentMarkerEditor.pointerDown(i.clientToLocalCoordinates(this._mainCanvas,t.clientX,t.clientY,this.zoomLevel),null!==(e=t.target)&&void 0!==e?e:void 0)}initializeMarqueeSelection(t){this._marqueeSelectRect.x=t.x,this._marqueeSelectRect.y=t.y,this._marqueeSelectRect.width=0,this._marqueeSelectRect.height=0,i.setAttributes(this._marqueeSelectOutline,[["x",t.x.toString()],["y",t.y.toString()],["width","0"],["height","0"]]),this._groupLayer&&!this._groupLayer.contains(this._marqueeSelectOutline)&&this._groupLayer.appendChild(this._marqueeSelectOutline)}onCanvasDblClick(t){var e;if("select"===this.mode){const s=this.editors.find((i=>i.ownsTarget(t.target)));void 0!==s&&s!==this._currentMarkerEditor&&this.setCurrentEditor(s),void 0!==this._currentMarkerEditor?this._currentMarkerEditor.dblClick(i.clientToLocalCoordinates(this._mainCanvas,t.clientX,t.clientY,this.zoomLevel),null!==(e=t.target)&&void 0!==e?e:void 0):this.setCurrentEditor()}}onPointerMove(t){var e;if(1===this.touchPoints||"touch"!==t.pointerType&&this.isDragging){const s=i.clientToLocalCoordinates(this._mainCanvas,t.clientX,t.clientY,this.zoomLevel);if(void 0!==this._currentMarkerEditor||this._selectedMarkerEditors.length>0)void 0!==this._currentMarkerEditor&&"edit"===this._currentMarkerEditor.state||t.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:t.clientX,y:t.clientY}),this.adjustMarqueeSelectOutline();else if(this.isSelecting){const e=i.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(t.clientX-this._manipulationStartX)/this.zoomLevel,this._marqueeSelectRect.height=Math.abs(t.clientY-this._manipulationStartY)/this.zoomLevel,i.setAttributes(this._marqueeSelectOutline,[["x",`${this._marqueeSelectRect.x}`],["y",`${this._marqueeSelectRect.y}`],["width",`${this._marqueeSelectRect.width}`],["height",`${this._marqueeSelectRect.height}`]])}}}showOutline(t){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;i.setAttributes(this._newMarkerOutline,[["d",this._currentMarkerEditor.marker.getOutline()]]),this._newMarkerOutline.style.transform=`translate(${t.x-e.width/2}px, ${t.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(t){if(this.touchPoints>0&&this.touchPoints--,0===this.touchPoints)if(this.isDragging&&void 0!==this._currentMarkerEditor){const e=i.clientToLocalCoordinates(this._mainCanvas,t.clientX,t.clientY,this.zoomLevel);this._selectedMarkerEditors.length>1?(this._selectedMarkerEditors.forEach((t=>t.pointerUp(e))),this.adjustMarqueeSelectOutline()):this._currentMarkerEditor.pointerUp(e),this.hideOutline()}else if(this.isSelecting&&(this.finishMarqueeSelection(),this._selectedMarkerEditors.length<2&&(this.hideMarqueeSelectOutline(),1===this._selectedMarkerEditors.length))){const t=this._selectedMarkerEditors[0];this.deselectEditor(),this.setCurrentEditor(t)}this.isDragging=!1,this.isSelecting=!1,this.addUndoStep()}finishMarqueeSelection(){this.deselectEditor(),this.editors.forEach((t=>{const i=t.marker.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)})),this.adjustMarqueeSelectOutline()}adjustMarqueeSelectOutline(){let t=Number.MAX_VALUE,e=Number.MAX_VALUE,s=0,r=0;this._selectedMarkerEditors.forEach((i=>{const a=i.marker.getBBox();t=Math.min(t,a.x),e=Math.min(e,a.y),s=Math.max(s,a.x+a.width),r=Math.max(r,a.y+a.height)})),this._selectedMarkerEditors.length>1?(this._marqueeSelectRect.x=t,this._marqueeSelectRect.y=e,this._marqueeSelectRect.width=s-t,this._marqueeSelectRect.height=r-e,i.setAttributes(this._marqueeSelectOutline,[["x",`${this._marqueeSelectRect.x}`],["y",`${this._marqueeSelectRect.y}`],["width",`${this._marqueeSelectRect.width}`],["height",`${this._marqueeSelectRect.height}`],["pointer-events",""]])):this.hideMarqueeSelectOutline()}hideMarqueeSelectOutline(){this._groupLayer&&this._groupLayer.contains(this._marqueeSelectOutline)&&this._groupLayer.removeChild(this._marqueeSelectOutline)}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._marqueeSelectOutline.addEventListener("dblclick",(t=>{t.preventDefault(),t.stopPropagation(),this.deselectEditor(),this.hideMarqueeSelectOutline()})),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;if(!this._targetImageLoaded)return void(this._stateToRestore=t);this._stateToRestore=void 0;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(){j.isLicensed("MJS3E")||j.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=D,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.bottom="20px")}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",F);class X 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,this._targetImageLoaded=!1,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._targetImageLoaded=!1,this.markerTypes=[],this.markers=[],this._zoomLevel=1,this._isInitialized=!1,this.markerTypes=[o,l,d,c,u,p,m,k,v,_,y,x,C,w,f,b],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}})),j.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 t,e,s;this.width=(null===(t=this._contentContainer)||void 0===t?void 0:t.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=i.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._targetImageLoaded=!0,void 0!==this._stateToRestore&&this.show(this._stateToRestore)}})),this._editingTarget.src=this.targetImage.src,this._canvasContainer.insertBefore(this._editingTarget,this._mainCanvas))}addNewMarker(t){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const e=i.createGroup();return this._mainCanvas.appendChild(e),new t(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}registerMarkerType(t){this.markerTypes.indexOf(t)<0&&this.markerTypes.push(t)}show(t){var i;if(!this._targetImageLoaded)return void(this._stateToRestore=t);this._stateToRestore=void 0;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(){j.isLicensed("MJS3V")||j.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=D,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.bottom="20px")}addEventListener(t,i,e){super.addEventListener(t,i,e)}removeEventListener(t,i,e){super.removeEventListener(t,i,e)}}function q(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",X),"function"==typeof SuppressedError&&SuppressedError;t.ArrowMarker=d,t.ArrowMarkerEditor=H,t.CalloutMarker=_,t.CalloutMarkerEditor=O,t.CaptionFrameMarker=b,t.CaptionFrameMarkerEditor=U,t.CheckImageMarker=w,t.CoverMarker=k,t.CustomImageMarker=C,t.EllipseFrameMarker=y,t.EllipseMarker=x,t.FrameMarker=o,t.FreehandMarker=p,t.FreehandMarkerEditor=I,t.Grip=M,t.HighlightMarker=v,t.ImageMarkerBase=S,t.ImageMarkerEditor=R,t.LineMarker=l,t.LinearMarkerBase=n,t.LinearMarkerEditor=B,t.MarkerArea=F,t.MarkerBase=e,t.MarkerBaseEditor=E,t.MarkerView=X,t.MeasurementMarker=c,t.PolygonMarker=u,t.PolygonMarkerEditor=V,t.RectangularBoxMarkerBase=r,t.Renderer=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=[o,l,d,c,u,p,m,k,v,_,y,x,C,w,f,b],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",this._renderHelperContainer=document.createElement("div"),this._renderHelperContainer.style.position="absolute",this._renderHelperContainer.style.top="0px",this._renderHelperContainer.style.left="0px",this._renderHelperContainer.style.width="10px",this._renderHelperContainer.style.height="10px",this._renderHelperContainer.style.overflow="hidden",this._renderHelperContainer.style.visibility="hidden",this._renderHelperContainer.appendChild(this._mainCanvas),document.body.appendChild(this._renderHelperContainer)}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(){var t;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,null===(t=this._renderHelperContainer)||void 0===t||t.insertBefore(this._editingTarget,this._mainCanvas))}addNewMarker(t){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const e=i.createGroup();return this._mainCanvas.appendChild(e),new t(e)}getMarkerTypeByName(t){let i;return this.markerTypes.forEach((e=>{e.typeName===t&&(i=e)})),i}registerMarkerType(t){this.markerTypes.indexOf(t)<0&&this.markerTypes.push(t)}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){var e,s;return q(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 r=0;for(;!this._targetImageLoaded&&r++<100;)yield new Promise((t=>setTimeout(t,100)));this.restoreState(t);const a=void 0!==i?i:document.createElement("canvas");null===this.targetImage&&(this.markersOnly=!0,this.naturalSize=!1);const h=document.createElementNS("http://www.w3.org/2000/svg","svg");h.setAttribute("xmlns","http://www.w3.org/2000/svg"),h.setAttribute("width",this._mainCanvas.width.baseVal.valueAsString),h.setAttribute("height",this._mainCanvas.height.baseVal.valueAsString),h.setAttribute("viewBox","0 0 "+this._mainCanvas.viewBox.baseVal.width.toString()+" "+this._mainCanvas.viewBox.baseVal.height.toString()),h.innerHTML=this._mainCanvas.innerHTML,!0===this.naturalSize?(h.width.baseVal.value=this.targetImage.naturalWidth,h.height.baseVal.value=this.targetImage.naturalHeight):void 0!==this.width&&void 0!==this.height&&(h.width.baseVal.value=this.width,h.height.baseVal.value=this.height),a.width=h.width.baseVal.value,a.height=h.height.baseVal.value;const o=h.outerHTML,n=a.getContext("2d");if(null===n)throw new Error("Canvas 2D context is not available.");!0!==this.markersOnly&&n.drawImage(this.targetImage,0,0,a.width,a.height);const l=window.URL,d=new Image(a.width,a.height);d.setAttribute("crossOrigin","anonymous");const c=new Blob([o],{type:"image/svg+xml"}),u=l.createObjectURL(c);let p="";for(d.onload=()=>{n.drawImage(d,0,0),l.revokeObjectURL(u),p=a.toDataURL(this.imageType,this.imageQuality)},d.src=u,r=0;!p&&r++<100;)yield new Promise((t=>setTimeout(t,100)));return this._editingTarget&&(null===(e=this._renderHelperContainer)||void 0===e||e.removeChild(this._editingTarget)),null===(s=this._renderHelperContainer)||void 0===s||s.removeChild(this._mainCanvas),document.body.removeChild(this._renderHelperContainer),p}))}},t.ResizeGrip=T,t.RotateGrip=L,t.ShapeMarkerBase=h,t.ShapeMarkerEditor=N,t.ShapeOutlineMarkerBase=a,t.ShapeOutlineMarkerEditor=A,t.SvgHelper=i,t.TextBlock=g,t.TextBlockEditor=W,t.TextMarker=m,t.TextMarkerEditor=$,t.XImageMarker=f}));
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t="undefined"!=typeof globalThis?globalThis:t||self).markerjs3={})}(this,(function(t){"use strict";class i{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(t,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","rect");return r.setAttribute("width",t.toString()),r.setAttribute("height",e.toString()),s&&i.setAttributes(r,s),r}static createLine(t,e,s,r,a){const h=document.createElementNS("http://www.w3.org/2000/svg","line");return h.setAttribute("x1",t.toString()),h.setAttribute("y1",e.toString()),h.setAttribute("x2",s.toString()),h.setAttribute("y2",r.toString()),a&&i.setAttributes(h,a),h}static createPolygon(t,e){const s=document.createElementNS("http://www.w3.org/2000/svg","polygon");return s.setAttribute("points",t),e&&i.setAttributes(s,e),s}static createCircle(t,e){const s=document.createElementNS("http://www.w3.org/2000/svg","circle");return s.setAttribute("cx",(t/2).toString()),s.setAttribute("cy",(t/2).toString()),s.setAttribute("r",t.toString()),e&&i.setAttributes(s,e),s}static createEllipse(t,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","ellipse");return r.setAttribute("cx",(t/2).toString()),r.setAttribute("cy",(e/2).toString()),r.setAttribute("rx",(t/2).toString()),r.setAttribute("ry",(e/2).toString()),s&&i.setAttributes(r,s),r}static createGroup(t){const e=document.createElementNS("http://www.w3.org/2000/svg","g");return t&&i.setAttributes(e,t),e}static createTransform(){return document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGTransform()}static createMarker(t,e,s,r,a,h,o){const n=document.createElementNS("http://www.w3.org/2000/svg","marker");return i.setAttributes(n,[["id",t],["orient",e],["markerWidth",s.toString()],["markerHeight",r.toString()],["refX",a.toString()],["refY",h.toString()]]),n.appendChild(o),n}static createText(t){const e=document.createElementNS("http://www.w3.org/2000/svg","text");return e.setAttribute("x","0"),e.setAttribute("y","0"),t&&i.setAttributes(e,t),e}static createTSpan(t,e){const s=document.createElementNS("http://www.w3.org/2000/svg","tspan");return s.textContent=t,e&&i.setAttributes(s,e),s}static createImage(t){const e=document.createElementNS("http://www.w3.org/2000/svg","image");return t&&i.setAttributes(e,t),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(t,e){const s=document.createElementNS("http://www.w3.org/2000/svg","path");return s.setAttribute("d",t),e&&i.setAttributes(s,e),s}static createForeignObject(t){const e=document.createElementNS("http://www.w3.org/2000/svg","foreignObject");return e.setAttribute("x","0"),e.setAttribute("y","0"),t&&i.setAttributes(e,t),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 e{static addKey(t,i){e.keys.set(t,i),e.keyAddListeners.forEach((t=>{t()}))}static addKeyAddListener(t){e.keyAddListeners.push(t)}static removeKeyAddListener(t){const i=e.keyAddListeners.indexOf(t);i>-1&&e.keyAddListeners.splice(i,1)}static isLicensed(t){if(e.keys.has(t)){const i=new RegExp(`${t}-[A-Z][0-9]{3}-[A-Z][0-9]{3}-[0-9]{4}`,"i"),s=e.keys.get(t);return void 0!==s&&i.test(s)}return!1}}e.keys=new Map,e.keyAddListeners=new Array;class s{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),this.getBBox=this.getBBox.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:Object.getPrototypeOf(this).constructor.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){}getBBox(){return this.container.getBBox()}}s.typeName="MarkerBase";class r{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 a extends s{get centerX(){return this.left+this.width/2}get centerY(){return this.top+this.height/2}get visual(){return this._visual}set visual(t){this._visual=t;const e=i.createTransform();this._visual.transform.baseVal.appendItem(e)}constructor(t){super(t),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(i.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(t){if(0===this.rotationAngle)return t;const e=this.container.getCTM();if(null===e)return t;let s=i.createPoint(t.x,t.y);s=s.matrixTransform(e);return{x:s.x,y:s.y}}unrotatePoint(t){if(0===this.rotationAngle)return t;let e=this.container.getCTM();if(null===e)return t;e=e.inverse();let s=i.createPoint(t.x,t.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:r.toITransformMatrix(this.visual.transform.baseVal.getItem(0).matrix),containerTransformMatrix:r.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(r.toSVGMatrix(this.visual.transform.baseVal.getItem(0).matrix,i.visualTransformMatrix)),this.container.transform.baseVal.getItem(0).setMatrix(r.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}getBBox(){const t=this.rotatePoint({x:this.left,y:this.top}),i=this.rotatePoint({x:this.left+this.width,y:this.top}),e=this.rotatePoint({x:this.left,y:this.top+this.height}),s=this.rotatePoint({x:this.left+this.width,y:this.top+this.height}),r={x:Math.min(t.x,i.x,e.x,s.x),y:Math.min(t.y,i.y,e.y,s.y)},a=Math.max(t.x,i.x,e.x,s.x),h=Math.max(t.y,i.y,e.y,s.y);return new DOMRect(r.x,r.y,a-r.x,h-r.y)}}class h extends a{applyStrokeColor(){this.visual&&i.setAttributes(this.visual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visual&&i.setAttributes(this.visual,[["stroke-width",this._strokeWidth.toString()]])}applyStrokeDasharray(){this.visual&&i.setAttributes(this.visual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&i.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=i.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&&i.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&&i.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()}}h.title="Shape outline marker";class o extends h{applyFillColor(){this.visual&&i.setAttributes(this.visual,[["fill",this._fillColor]])}constructor(t){super(t),this._fillColor="transparent",this.createVisual=this.createVisual.bind(this)}createVisual(){super.createVisual(),this.visual&&i.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()}}o.title="Shape marker";class n extends h{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`}}n.typeName="FrameMarker",n.title="Frame marker";class l extends s{applyStrokeColor(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke",this._strokeColor],["fill",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&i.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&i.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=i.createGroup(),this.selectorVisual=i.createPath(this.getPath(),[["stroke","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]),this.visibleVisual=i.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&&(i.setAttributes(this.selectorVisual,[["d",this.getPath()]]),i.setAttributes(this.visibleVisual,[["d",this.getPath()]]),i.setAttributes(this.visibleVisual,[["stroke",this.strokeColor]]),i.setAttributes(this.visibleVisual,[["fill",this.strokeColor]]),i.setAttributes(this.visibleVisual,[["stroke-width",this.strokeWidth.toString()]]),i.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 d extends l{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}`}}d.typeName="LineMarker",d.title="Line marker";class c extends d{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),u=n-i*Math.sin(a),p=l+i*Math.cos(a),g=this.x2-t*e*Math.cos(a),m=this.y2-t*e*Math.sin(a),k=this.x2-t*Math.cos(a),v=this.y2-t*Math.sin(a),_=k+i*Math.sin(a),y=v-i*Math.cos(a),x=k-i*Math.sin(a),S=v+i*Math.cos(a);return`${"start"===this.arrowType||"both"===this.arrowType?`M ${h} ${o}\n    L ${d} ${c} L ${this.x1} ${this.y1} L ${u} ${p} L ${h} ${o}\n    L ${h} ${o}`:`M ${this.x1} ${this.y1}`} ${"end"===this.arrowType||"both"===this.arrowType?`L ${g} ${m} \n    L ${_} ${y} L ${this.x2} ${this.y2} L ${x} ${S} 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=c.typeName,t}restoreState(t){const i=t;this.arrowType=i.arrowType,super.restoreState(t)}}c.typeName="ArrowMarker",c.title="Arrow marker";class u extends d{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()}}u.typeName="MeasurementMarker",u.title="Measurement marker";class p extends s{applyStrokeColor(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&i.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&i.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=i.createGroup(),this.visibleVisual=i.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=i.createGroup(),this.visual.appendChild(this.selectorVisual),this.points.forEach((()=>{this.addSelectorLine()})))}adjustVisual(){this.selectorVisual&&this.visibleVisual&&(i.setAttributes(this.visibleVisual,[["d",this.getPath()]]),i.setAttributes(this.visibleVisual,[["stroke",this.strokeColor]]),i.setAttributes(this.visibleVisual,[["stroke-width",this.strokeWidth.toString()]]),i.setAttributes(this.visibleVisual,[["stroke-dasharray",this.strokeDasharray.toString()]]),this.adjustSelectorVisual())}adjustSelectorVisual(){if(this.selectorVisual){const t=this.points.length-this.selectorVisualLines.length;if(t>0)for(let i=0;i<t;i++)this.addSelectorLine();else if(t<0)for(let i=0;i<-t;i++)this.selectorVisual.removeChild(this.selectorVisualLines.pop());this.selectorVisualLines.forEach(((t,e)=>{i.setAttributes(t,[["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 t=i.createLine(0,0,0,0,[["stroke","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]);this.selectorVisual.appendChild(t),this.selectorVisualLines.push(t)}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="PolygonMarker",p.title="Polygon marker";class g extends s{applyStrokeColor(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&i.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&i.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&i.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=i.createGroup(),this.selectorVisual=i.createPath(this.getPath(),[["stroke","transparent"],["fill","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]),this.visibleVisual=i.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 t=this.getPath();i.setAttributes(this.selectorVisual,[["d",t]]),i.setAttributes(this.visibleVisual,[["d",t]]),i.setAttributes(this.visibleVisual,[["stroke",this.strokeColor]]),i.setAttributes(this.visibleVisual,[["stroke-width",this.strokeWidth.toString()]]),i.setAttributes(this.visibleVisual,[["stroke-dasharray",this.strokeDasharray.toString()]])}}getState(){const t=Object.assign({points:this.points},super.getState());return t.typeName=g.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()}}g.typeName="FreehandMarker",g.title="Freehand marker";class m{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(t){this.textElement&&i.setAttributes(this._textElement,[["fill",t]]),this._color=t}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(t){this._text="",this.offsetX=0,this.offsetY=0,this._boundingBox=new DOMRect,this._labelBackground=i.createRect(10,10,[["fill","white"]]),this._textElement=i.createText(),this._color="transparent",this._fontFamily="",this._fontSize={value:1,units:"rem",step:.1},this.wordWrap=!1,this.prevWrappedText="",this.setupTextElement(),void 0!==t&&(this.text=t),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 t=this.wordWrap?this.wrapText():this.text;if(this.prevWrappedText===t)return void this.positionText();for(this.prevWrappedText=t;this._textElement.lastChild;)this._textElement.removeChild(this._textElement.lastChild);t.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/).forEach(((t,e)=>{this._textElement.appendChild(i.createTSpan(""===t.trim()?" ":t.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(t){const e=void 0===t?this:t;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(((t,e)=>{const r=t;i.setAttributes(r,[["x",`${s}`],["dy",e>0?"1em":"0"]])})),i.setAttributes(e._textElement,[["x",`${s}`]]),i.setAttributes(e._textElement,[["y",`${o}`]]),e._textSize=e._textElement.getBBox();const n=1.2;i.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 k extends a{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 m(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.setSizeFromTextSize=this.setSizeFromTextSize.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=i.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(){const[t,i]=[this.width,this.height];super.setSize(),this.setSizeFromTextSize(),t===this.width&&i===this.height||!this.onSizeChanged||this.onSizeChanged(this),this.setTextBoundingBox()}setSizeFromTextSize(){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}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(){return Object.assign({color:this.color,fontFamily:this.fontFamily,fontSize:this.fontSize,text:this.text},super.getState())}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()}}k.typeName="TextMarker",k.title="Text marker",k.DEFAULT_TEXT="Text";class v extends o{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`}}v.typeName="CoverMarker",v.title="Cover marker";class _ extends o{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`}}_.typeName="HighlightMarker",_.title="Highlight marker";class y extends k{get tipPosition(){return this._tipPosition}set tipPosition(t){this._tipPosition=t,this.adjustVisual()}constructor(t){super(t),this._tipPosition={x:0,y:0},this.tipBase1Position={x:0,y:0},this.tipBase2Position={x:0,y:0},this._calloutVisual=i.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)}applyStrokeColor(){i.setAttributes(this._calloutVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){i.setAttributes(this._calloutVisual,[["stroke-width",this._strokeWidth.toString()]])}applyStrokeDasharray(){i.setAttributes(this._calloutVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){i.setAttributes(this._calloutVisual,[["opacity",this._opacity.toString()]])}applyFillColor(){i.setAttributes(this._calloutVisual,[["fill",this._fillColor]])}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 t;super.createVisual(),this._tipPosition={x:this.width/4,y:this.height+20},this._calloutVisual=i.createPath(this.getPath(),[["fill",this._fillColor],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]]),null===(t=this.visual)||void 0===t||t.insertBefore(this._calloutVisual,this.textBlock.textElement)}adjustVisual(){super.adjustVisual(),this._calloutVisual&&i.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(){return Object.assign({tipPosition:this.tipPosition},super.getState())}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 x extends h{constructor(t){super(t),this.strokeColor="#ff0000",this.strokeWidth=3}getPath(t=this.width,i=this.height){return`M ${t/2} 0 \n       a ${t/2} ${i/2} 0 1 0 0 ${i} \n       a ${t/2} ${i/2} 0 1 0 0 -${i} z`}}x.typeName="EllipseFrameMarker",x.title="Ellipse frame marker";class S extends o{constructor(t){super(t),this.fillColor="#ff0000",this.strokeColor="#ff0000"}getPath(t=this.width,i=this.height){return`M ${t/2} 0 \n    a ${t/2} ${i/2} 0 1 0 0 ${i} \n    a ${t/2} ${i/2} 0 1 0 0 -${i} z`}}S.typeName="EllipseMarker",S.title="Ellipse marker";class C extends a{get svgString(){return this._svgString}set svgString(t){this._svgString=t,this.SVGImage&&"svg"===this.imageType&&(this.SVGImage.outerHTML=void 0!==t?t:"")}get imageSrc(){return this._imageSrc}set imageSrc(t){this._imageSrc=t,this.SVGImage&&"bitmap"===this.imageType&&(void 0!==t?i.setAttributes(this.SVGImage,[["href",t]]):i.setAttributes(this.SVGImage,[["href",""]]))}constructor(t){super(t),this.imageType="svg",this.naturalWidth=24,this.naturalHeight=24,this.defaultSize={width:this.naturalWidth,height:this.naturalHeight},this.createImage=this.createImage.bind(this),this.createVisual=this.createVisual.bind(this)}createImage(){var t;if(void 0!==this._svgString){this.imageType="svg";const t=(new DOMParser).parseFromString(this._svgString,"image/svg+xml").documentElement;if(!(t instanceof SVGSVGElement))throw new Error("Invalid SVG string");const i=t;this.SVGImage=this.container.ownerDocument.importNode(i,!0)}else this.imageType="bitmap",this.SVGImage=i.createImage([["href",null!==(t=this._imageSrc)&&void 0!==t?t:""]])}createVisual(){this.createImage(),void 0!==this.SVGImage&&(this.visual=i.createGroup(),"svg"===this.imageType&&i.setAttributes(this.visual,[["viewBox",`0 0 ${this.naturalWidth} ${this.naturalHeight}`],["fill",this._fillColor],["stroke",this._strokeColor],["color",this._strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-dasharray",this.strokeDasharray],["pointer-events","bounding-box"]]),this.adjustImage(),this.visual.appendChild(this.SVGImage),this.addMarkerVisualToContainer(this.visual))}adjustImage(){void 0!==this.SVGImage&&(this.SVGImage.setAttribute("x","0px"),this.SVGImage.setAttribute("y","0px"),this.SVGImage.setAttribute("width",`${this.width}px`),this.SVGImage.setAttribute("height",`${this.height}px`))}isDescendant(t,i){if(t===i)return!0;for(let e=0;e<t.children.length;e++)if(this.isDescendant(t.children[e],i))return!0;return!1}ownsTarget(t){return super.ownsTarget(t)||void 0!==this.SVGImage&&this.isDescendant(this.SVGImage,t)}setSize(){super.setSize(),this.visual&&(i.setAttributes(this.visual,[["width",`${this.width}px`],["height",`${this.height}px`]]),this.adjustImage())}getState(){return Object.assign({imageType:this.imageType,svgString:this.svgString,imageSrc:this.imageSrc},super.getState())}applyStrokeColor(){this.visual&&i.setAttributes(this.visual,[["color",this._strokeColor]])}restoreState(t){const i=t;void 0!==i.imageType&&(this.imageType=i.imageType),void 0!==i.svgString&&(this._svgString=i.svgString),void 0!==i.imageSrc&&(this._imageSrc=i.imageSrc),this.createVisual(),super.restoreState(t),this.setSize()}scale(t,i){super.scale(t,i),this.setSize()}}C.title="Image marker";class w extends C{}w.typeName="CustomImageMarker",w.title="Custom image marker";class f extends C{constructor(t){super(t),this._svgString='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11l3 3L22 4"/></g></svg>',this.strokeColor="#008000"}}f.typeName="CheckImageMarker",f.title="Check image marker";class b extends C{constructor(t){super(t),this._svgString='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m15 9l-6 6m0-6l6 6"/></g></svg>',this.strokeColor="#d00000"}}b.typeName="XImageMarker",b.title="X image marker";class E extends k{constructor(t){super(t),this._outerFrameVisual=i.createPath("M0,0"),this._captionFrameVisual=i.createPath("M0,0"),this._frameVisual=i.createGroup(),this.color="#ffffff",this.fillColor="#ff0000",this.strokeColor="#ff0000",this.strokeWidth=3,this.padding=5,this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.adjustFrameVisual=this.adjustFrameVisual.bind(this),this.getPaths=this.getPaths.bind(this)}applyStrokeColor(){i.setAttributes(this._outerFrameVisual,[["stroke",this._strokeColor]]),i.setAttributes(this._captionFrameVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){i.setAttributes(this._outerFrameVisual,[["stroke-width",this._strokeWidth.toString()]]),i.setAttributes(this._captionFrameVisual,[["stroke-width",this._strokeWidth.toString()]]),this.adjustTextPosition(),this.adjustFrameVisual()}applyStrokeDasharray(){i.setAttributes(this._outerFrameVisual,[["stroke-dasharray",this._strokeDasharray]]),i.setAttributes(this._captionFrameVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){i.setAttributes(this._outerFrameVisual,[["opacity",this._opacity.toString()]]),i.setAttributes(this._captionFrameVisual,[["opacity",this._opacity.toString()]])}applyFillColor(){i.setAttributes(this._captionFrameVisual,[["fill",this._fillColor]])}getPaths(t=this.width,i=this.height){var e,s;return{frame:`M 0 0\n      V ${i}\n      H ${t}\n      V 0\n      Z`,caption:`M 0 0\n      H ${t}\n      V ${(null!==(s=null===(e=this.textBlock.textSize)||void 0===e?void 0:e.height)&&void 0!==s?s:40)+2*this.padding+this.strokeWidth}\n      H 0\n      Z`}}createVisual(){var t;super.createVisual();const e=this.getPaths();this._outerFrameVisual=i.createPath(e.frame,[["fill","transparent"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]]),this._captionFrameVisual=i.createPath(e.caption,[["fill","this._fillColor"],["fill-rule","evenodd"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]]),this._frameVisual.appendChild(this._outerFrameVisual),this._frameVisual.appendChild(this._captionFrameVisual),null===(t=this.visual)||void 0===t||t.insertBefore(this._frameVisual,this.textBlock.textElement)}adjustVisual(){super.adjustVisual(),this.adjustTextPosition(),this.adjustFrameVisual()}adjustTextPosition(){var t;this.textBlock.textSize&&(this.textBlock.textElement.style.transform=`translate(${this.width/2-(null===(t=this.textBlock.textSize)||void 0===t?void 0:t.width)/2-this.padding}px, ${this.strokeWidth/2}px)`)}adjustFrameVisual(){const t=this.getPaths();this._outerFrameVisual&&i.setAttributes(this._outerFrameVisual,[["d",t.frame],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]]),this._captionFrameVisual&&i.setAttributes(this._captionFrameVisual,[["d",t.caption],["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._outerFrameVisual!==t&&this._captionFrameVisual!==t)}setSize(){super.setSize(),this.adjustTextPosition(),this.adjustFrameVisual()}setSizeFromTextSize(){}hideVisual(){this.textBlock.hide()}showVisual(){this.textBlock.show(),this.textBlock.renderText()}getState(){return Object.assign({fillColor:this.fillColor},super.getState())}restoreState(t){const i=t;super.restoreState(t),this.fillColor=i.fillColor,this.adjustVisual()}scale(t,i){super.scale(t,i),this.strokeWidth*=(t+i)/2,this.setSize()}}E.typeName="CaptionFrameMarker",E.title="Caption frame marker";class M{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(t){var e;this._creationStyle="draw",this._state="new",this._controlBox=i.createGroup(),this._isSelected=!1,this._continuousCreation=!1,this.isMultiSelected=!1,this._container=t.container,this._overlayContainer=t.overlayContainer,this._markerType=t.markerType,this._marker=null!==(e=t.marker)&&void 0!==e?e:new t.markerType(t.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 T{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=i.createGroup(),this._visual.appendChild(i.createCircle(4*this.gripSize,[["fill","transparent"],["cx",(this.gripSize/2).toString()],["cy",(this.gripSize/2).toString()]]));const t=i.createCircle(this.gripSize,[["fill-opacity","1"],["stroke-width","1"],["stroke-opacity","1"]]);t.style.fill=`var(--mjs-grip-fill, ${this.fillColor})`,t.style.stroke=`var(--mjs-grip-stroke, ${this.strokeColor})`,t.style.filter="drop-shadow(0px 0px 2px rgba(0, 0, 0, .7))",this._visual.appendChild(t)}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 V extends T{}class B extends M{constructor(t){super(t),this.defaultLength=50,this.manipulationStartX=0,this.manipulationStartY=0,this.controlBox=i.createGroup(),this.manipulationBox=i.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.splice(0,1),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=i.createGroup(),this.container.appendChild(this.controlBox),this.manipulationBox=i.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 t=new V;return t.visual.transform.baseVal.appendItem(i.createTransform()),this.manipulationBox.appendChild(t.visual),t}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 z extends M{constructor(t){super(t),this.defaultLength=50,this.manipulationStartX=0,this.manipulationStartY=0,this.manipulationStartX1=0,this.manipulationStartY1=0,this.manipulationStartX2=0,this.manipulationStartY2=0,this.controlBox=i.createGroup(),this.manipulationBox=i.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=i.createGroup(),this.container.appendChild(this.controlBox),this.manipulationBox=i.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 t=new V;return t.visual.transform.baseVal.appendItem(i.createTransform()),this.manipulationBox.appendChild(t.visual),t}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 L{constructor(){this.grips=new Map([["topleft",new V],["topcenter",new V],["topright",new V],["leftcenter",new V],["rightcenter",new V],["bottomleft",new V],["bottomcenter",new V],["bottomright",new V]]),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 G extends T{constructor(){super();const t=this.fillColor;this.fillColor=this.strokeColor,this.strokeColor=t}}class A extends M{constructor(t){super(t),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=i.createGroup(),this.manipulationBox=i.createGroup(),this.CB_DISTANCE=0,this.controlGrips=new L,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=i.createGroup();const t=i.createTransform();t.setTranslate(-this.CB_DISTANCE/2,-this.CB_DISTANCE/2),this.controlBox.transform.baseVal.appendItem(t),this.container.appendChild(this.controlBox),this.manipulationBox=i.createGroup(),this.controlBox.appendChild(this.manipulationBox),this.controlRect=i.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=i.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 L,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 t of this.controlGrips.grips.values())t.visual.transform.baseVal.appendItem(i.createTransform()),this.manipulationBox.appendChild(t.visual),this.manipulationBox.appendChild(t.visual);!0!==this.disableRotation&&(this.rotatorGrip=this.createRotateGrip()),this.positionGrips()}createRotateGrip(){const t=new G;return t.visual.transform.baseVal.appendItem(i.createTransform()),this.manipulationBox.appendChild(t.visual),t}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 P extends A{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 I{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 W extends M{constructor(t){super(t),this.manipulationStartX=0,this.manipulationStartY=0,this.controlBox=i.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=i.createGroup(),this.container.appendChild(this.controlBox),this.controlRect=i.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 t=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&&i.setAttributes(this.controlRect,[["x",(t-this.strokeWidth).toString()],["y",(e-this.strokeWidth).toString()],["width",(s-t+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 ${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 j extends A{set color(t){this.marker.color=t,this.stateChanged()}get color(){return this.marker.color}set fontFamily(t){this.marker.fontFamily=t,this.stateChanged()}get fontFamily(){return this.marker.fontFamily}set fontSize(t){this.marker.fontSize=t,this.stateChanged()}get fontSize(){return this.marker.fontSize}constructor(t){super(t),this.textBlockEditorContainer=i.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 $,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)}}var D='<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 N extends P{}class H extends z{set arrowType(t){this.marker.arrowType=t}get arrowType(){return this.marker.arrowType}}class O extends j{constructor(t){super(t),this.manipulationStartTipPositionX=0,this.manipulationStartTipPositionY=0}addControlGrips(){this.tipGrip=this.createTipGrip(),super.addControlGrips()}createTipGrip(){const t=new V;return t.visual.transform.baseVal.appendItem(i.createTransform()),this.manipulationBox.appendChild(t.visual),t}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 R extends A{constructor(t){super(t),this._creationStyle="drop",this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.resize=this.resize.bind(this)}pointerDown(t,i){super.pointerDown(t,i),"new"===this.state&&(this.marker.createVisual(),this.marker.moveVisual(t),this._state="creating")}pointerUp(t){super.pointerUp(t),this.setSize(),this.adjustControlBox()}}class U extends j{constructor(t){super(t),this.disabledResizeGrips=[],this._creationStyle="draw"}setSize(){if(super.setSize(),this.textBlockEditorContainer.style.transform=`translate(${this.marker.left}px, ${this.marker.top+this.marker.strokeWidth/2}px)`,this.marker.textBlock.textSize){const t=this.marker.textBlock.textSize.height+2*this.marker.padding;this.textBlockEditorContainer.style.width=`${this.marker.width}px`,this.textBlockEditorContainer.style.height=`${t}px`,this.textBlockEditor.width=this.marker.width,this.textBlockEditor.height=t}}}class F 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,this._targetImageLoaded=!1,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=i.createPath("",[["stroke","#333"],["stroke-width","0.5"],["stroke-dasharray","2 5"],["fill","rgba(200,200,200,0.5)"],["pointer-events","none"]]),this._targetImageLoaded=!1,this.markerEditors=new Map,this.editors=[],this._zoomLevel=1,this.prevPanPoint={x:0,y:0},this.undoRedoManager=new I,this.touchPoints=0,this.isDragging=!1,this.isSelecting=!1,this._marqueeSelectOutline=i.createRect(0,0,[["stroke","rgb(35, 35, 255)"],["stroke-width","1"],["fill","rgba(129, 129, 255, 0.3)"],["pointer-events","none"],["cursor","move"]]),this._marqueeSelectRect=new DOMRect(0,0,0,0),this._manipulationStartX=0,this._manipulationStartY=0,this.markerEditors.set(n,P),this.markerEditors.set(x,P),this.markerEditors.set(d,z),this.markerEditors.set(p,B),this.markerEditors.set(g,W),this.markerEditors.set(k,j),this.markerEditors.set(v,N),this.markerEditors.set(_,N),this.markerEditors.set(S,N),this.markerEditors.set(c,H),this.markerEditors.set(u,z),this.markerEditors.set(y,O),this.markerEditors.set(w,R),this.markerEditors.set(f,R),this.markerEditors.set(b,R),this.markerEditors.set(E,U),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.adjustMarqueeSelectOutline=this.adjustMarqueeSelectOutline.bind(this),this.hideMarqueeSelectOutline=this.hideMarqueeSelectOutline.bind(this),this.attachShadow({mode:"open"})}connectedCallback(){this.dispatchEvent(new CustomEvent("areainit",{detail:{markerArea:this}})),e.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._canvasContainer.style.userSelect="none",this._contentContainer.appendChild(this._canvasContainer),null===(t=this.shadowRoot)||void 0===t||t.appendChild(this._contentContainer)}addMainCanvas(){var t,e,s;this.width=(null===(t=this._contentContainer)||void 0===t?void 0:t.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=i.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._targetImageLoaded=!0,void 0!==this._stateToRestore&&this.restoreState(this._stateToRestore)}})),this._editingTarget.src=this.targetImage.src,this._canvasContainer.insertBefore(this._editingTarget,this._mainCanvas))}registerMarkerType(t,i){this.markerEditors.set(t,i)}createMarker(t){let i=n;i="string"==typeof t?this.getMarkerTypeByName(t)||n: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(t,e){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const s=i.createGroup();return this._mainCanvas.appendChild(s),new t({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(W)&&(null==i?void 0:i.is(W))&&(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(t){var e;if(this._manipulationStartX=t.clientX,this._manipulationStartY=t.clientY,this.touchPoints++,1===this.touchPoints||"touch"!==t.pointerType)if(void 0===this._currentMarkerEditor||"new"!==this._currentMarkerEditor.state&&"creating"!==this._currentMarkerEditor.state){if("select"===this.mode){const e=i.clientToLocalCoordinates(this._mainCanvas,t.clientX,t.clientY,this.zoomLevel),s=this.editors.find((i=>i.ownsTarget(t.target)));void 0!==s?(this.isDragging=!0,t.shiftKey?(this.selectEditor(s),this.initializeMarqueeSelection(e)):s.isSelected||(this.deselectEditor(),this.setCurrentEditor(s)),this._selectedMarkerEditors.forEach((i=>{var s;return i.pointerDown(e,null!==(s=t.target)&&void 0!==s?s:void 0)}))):t.target===this._marqueeSelectOutline&&this._selectedMarkerEditors.length>1?(this.isDragging=!0,this._selectedMarkerEditors.forEach((i=>{var s;return i.pointerDown(e,null!==(s=t.target)&&void 0!==s?s:void 0)}))):(this.setCurrentEditor(),this.deselectEditor(),this.isSelecting=!0,this.isDragging=!0,this.initializeMarqueeSelection(e),this.prevPanPoint={x:t.clientX,y:t.clientY})}}else this.isDragging=!0,this._currentMarkerEditor.pointerDown(i.clientToLocalCoordinates(this._mainCanvas,t.clientX,t.clientY,this.zoomLevel),null!==(e=t.target)&&void 0!==e?e:void 0)}initializeMarqueeSelection(t){this._marqueeSelectRect.x=t.x,this._marqueeSelectRect.y=t.y,this._marqueeSelectRect.width=0,this._marqueeSelectRect.height=0,i.setAttributes(this._marqueeSelectOutline,[["x",t.x.toString()],["y",t.y.toString()],["width","0"],["height","0"]]),this._groupLayer&&!this._groupLayer.contains(this._marqueeSelectOutline)&&this._groupLayer.appendChild(this._marqueeSelectOutline)}onCanvasDblClick(t){var e;if("select"===this.mode){const s=this.editors.find((i=>i.ownsTarget(t.target)));void 0!==s&&s!==this._currentMarkerEditor&&this.setCurrentEditor(s),void 0!==this._currentMarkerEditor?this._currentMarkerEditor.dblClick(i.clientToLocalCoordinates(this._mainCanvas,t.clientX,t.clientY,this.zoomLevel),null!==(e=t.target)&&void 0!==e?e:void 0):this.setCurrentEditor()}}onPointerMove(t){var e;if(1===this.touchPoints||"touch"!==t.pointerType&&this.isDragging){const s=i.clientToLocalCoordinates(this._mainCanvas,t.clientX,t.clientY,this.zoomLevel);if(void 0!==this._currentMarkerEditor||this._selectedMarkerEditors.length>0)void 0!==this._currentMarkerEditor&&"edit"===this._currentMarkerEditor.state||t.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:t.clientX,y:t.clientY}),this.adjustMarqueeSelectOutline();else if(this.isSelecting){const e=i.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(t.clientX-this._manipulationStartX)/this.zoomLevel,this._marqueeSelectRect.height=Math.abs(t.clientY-this._manipulationStartY)/this.zoomLevel,i.setAttributes(this._marqueeSelectOutline,[["x",`${this._marqueeSelectRect.x}`],["y",`${this._marqueeSelectRect.y}`],["width",`${this._marqueeSelectRect.width}`],["height",`${this._marqueeSelectRect.height}`]])}}}showOutline(t){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;i.setAttributes(this._newMarkerOutline,[["d",this._currentMarkerEditor.marker.getOutline()]]),this._newMarkerOutline.style.transform=`translate(${t.x-e.width/2}px, ${t.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(t){if(this.touchPoints>0&&this.touchPoints--,0===this.touchPoints)if(this.isDragging&&void 0!==this._currentMarkerEditor){const e=i.clientToLocalCoordinates(this._mainCanvas,t.clientX,t.clientY,this.zoomLevel);this._selectedMarkerEditors.length>1?(this._selectedMarkerEditors.forEach((t=>t.pointerUp(e))),this.adjustMarqueeSelectOutline()):this._currentMarkerEditor.pointerUp(e),this.hideOutline()}else if(this.isSelecting&&(this.finishMarqueeSelection(),this._selectedMarkerEditors.length<2&&(this.hideMarqueeSelectOutline(),1===this._selectedMarkerEditors.length))){const t=this._selectedMarkerEditors[0];this.deselectEditor(),this.setCurrentEditor(t)}this.isDragging=!1,this.isSelecting=!1,this.addUndoStep()}finishMarqueeSelection(){this.deselectEditor(),this.editors.forEach((t=>{const i=t.marker.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)})),this.adjustMarqueeSelectOutline()}adjustMarqueeSelectOutline(){let t=Number.MAX_VALUE,e=Number.MAX_VALUE,s=0,r=0;this._selectedMarkerEditors.forEach((i=>{const a=i.marker.getBBox();t=Math.min(t,a.x),e=Math.min(e,a.y),s=Math.max(s,a.x+a.width),r=Math.max(r,a.y+a.height)})),this._selectedMarkerEditors.length>1?(this._marqueeSelectRect.x=t,this._marqueeSelectRect.y=e,this._marqueeSelectRect.width=s-t,this._marqueeSelectRect.height=r-e,i.setAttributes(this._marqueeSelectOutline,[["x",`${this._marqueeSelectRect.x}`],["y",`${this._marqueeSelectRect.y}`],["width",`${this._marqueeSelectRect.width}`],["height",`${this._marqueeSelectRect.height}`],["pointer-events",""]])):this.hideMarqueeSelectOutline()}hideMarqueeSelectOutline(){this._groupLayer&&this._groupLayer.contains(this._marqueeSelectOutline)&&this._groupLayer.removeChild(this._marqueeSelectOutline)}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._marqueeSelectOutline.addEventListener("dblclick",(t=>{t.preventDefault(),t.stopPropagation(),this.deselectEditor(),this.hideMarqueeSelectOutline()})),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;if(!this._targetImageLoaded)return void(this._stateToRestore=t);this._stateToRestore=void 0;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(){e.isLicensed("MJS3E")||e.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=D,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.bottom="20px")}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",F);class X 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,this._targetImageLoaded=!1,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._targetImageLoaded=!1,this.markerTypes=[],this.markers=[],this._zoomLevel=1,this._isInitialized=!1,this.markerTypes=[n,d,c,u,p,g,k,v,_,y,x,S,w,f,b,E],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}})),e.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 t,e,s;this.width=(null===(t=this._contentContainer)||void 0===t?void 0:t.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=i.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._targetImageLoaded=!0,void 0!==this._stateToRestore&&this.show(this._stateToRestore)}})),this._editingTarget.src=this.targetImage.src,this._canvasContainer.insertBefore(this._editingTarget,this._mainCanvas))}addNewMarker(t){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const e=i.createGroup();return this._mainCanvas.appendChild(e),new t(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}registerMarkerType(t){this.markerTypes.indexOf(t)<0&&this.markerTypes.push(t)}show(t){var i;if(!this._targetImageLoaded)return void(this._stateToRestore=t);this._stateToRestore=void 0;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(){e.isLicensed("MJS3V")||e.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=D,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.bottom="20px")}addEventListener(t,i,e){super.addEventListener(t,i,e)}removeEventListener(t,i,e){super.removeEventListener(t,i,e)}}function q(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",X),"function"==typeof SuppressedError&&SuppressedError;t.Activator=e,t.ArrowMarker=c,t.ArrowMarkerEditor=H,t.CalloutMarker=y,t.CalloutMarkerEditor=O,t.CaptionFrameMarker=E,t.CaptionFrameMarkerEditor=U,t.CheckImageMarker=f,t.CoverMarker=v,t.CustomImageMarker=w,t.EllipseFrameMarker=x,t.EllipseMarker=S,t.FrameMarker=n,t.FreehandMarker=g,t.FreehandMarkerEditor=W,t.Grip=T,t.HighlightMarker=_,t.ImageMarkerBase=C,t.ImageMarkerEditor=R,t.LineMarker=d,t.LinearMarkerBase=l,t.LinearMarkerEditor=z,t.MarkerArea=F,t.MarkerBase=s,t.MarkerBaseEditor=M,t.MarkerView=X,t.MeasurementMarker=u,t.PolygonMarker=p,t.PolygonMarkerEditor=B,t.RectangularBoxMarkerBase=a,t.Renderer=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=[n,d,c,u,p,g,k,v,_,y,x,S,w,f,b,E],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",this._renderHelperContainer=document.createElement("div"),this._renderHelperContainer.style.position="absolute",this._renderHelperContainer.style.top="0px",this._renderHelperContainer.style.left="0px",this._renderHelperContainer.style.width="10px",this._renderHelperContainer.style.height="10px",this._renderHelperContainer.style.overflow="hidden",this._renderHelperContainer.style.visibility="hidden",this._renderHelperContainer.appendChild(this._mainCanvas),document.body.appendChild(this._renderHelperContainer)}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(){var t;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,null===(t=this._renderHelperContainer)||void 0===t||t.insertBefore(this._editingTarget,this._mainCanvas))}addNewMarker(t){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const e=i.createGroup();return this._mainCanvas.appendChild(e),new t(e)}getMarkerTypeByName(t){let i;return this.markerTypes.forEach((e=>{e.typeName===t&&(i=e)})),i}registerMarkerType(t){this.markerTypes.indexOf(t)<0&&this.markerTypes.push(t)}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){var e,s;return q(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 r=0;for(;!this._targetImageLoaded&&r++<100;)yield new Promise((t=>setTimeout(t,100)));this.restoreState(t);const a=void 0!==i?i:document.createElement("canvas");null===this.targetImage&&(this.markersOnly=!0,this.naturalSize=!1);const h=document.createElementNS("http://www.w3.org/2000/svg","svg");h.setAttribute("xmlns","http://www.w3.org/2000/svg"),h.setAttribute("width",this._mainCanvas.width.baseVal.valueAsString),h.setAttribute("height",this._mainCanvas.height.baseVal.valueAsString),h.setAttribute("viewBox","0 0 "+this._mainCanvas.viewBox.baseVal.width.toString()+" "+this._mainCanvas.viewBox.baseVal.height.toString()),h.innerHTML=this._mainCanvas.innerHTML,!0===this.naturalSize?(h.width.baseVal.value=this.targetImage.naturalWidth,h.height.baseVal.value=this.targetImage.naturalHeight):void 0!==this.width&&void 0!==this.height&&(h.width.baseVal.value=this.width,h.height.baseVal.value=this.height),a.width=h.width.baseVal.value,a.height=h.height.baseVal.value;const o=h.outerHTML,n=a.getContext("2d");if(null===n)throw new Error("Canvas 2D context is not available.");!0!==this.markersOnly&&n.drawImage(this.targetImage,0,0,a.width,a.height);const l=window.URL,d=new Image(a.width,a.height);d.setAttribute("crossOrigin","anonymous");const c=new Blob([o],{type:"image/svg+xml"}),u=l.createObjectURL(c);let p="";for(d.onload=()=>{n.drawImage(d,0,0),l.revokeObjectURL(u),p=a.toDataURL(this.imageType,this.imageQuality)},d.src=u,r=0;!p&&r++<100;)yield new Promise((t=>setTimeout(t,100)));return this._editingTarget&&(null===(e=this._renderHelperContainer)||void 0===e||e.removeChild(this._editingTarget)),null===(s=this._renderHelperContainer)||void 0===s||s.removeChild(this._mainCanvas),document.body.removeChild(this._renderHelperContainer),p}))}},t.ResizeGrip=V,t.RotateGrip=G,t.ShapeMarkerBase=o,t.ShapeMarkerEditor=N,t.ShapeOutlineMarkerBase=h,t.ShapeOutlineMarkerEditor=P,t.SvgHelper=i,t.TextBlock=m,t.TextBlockEditor=$,t.TextMarker=k,t.TextMarkerEditor=j,t.XImageMarker=b}));
 //# sourceMappingURL=markerjs3.js.map