@markerjs/markerjs3 3.7.0 → 3.7.2

package/markerjs3.js

@@ -1,2 +1,2 @@
-class t{static createDefs(){return document.createElementNS("http://www.w3.org/2000/svg","defs")}static setAttributes(t,i){for(const[e,s]of i)t.setAttribute(e,s)}static createRect(i,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","rect");return r.setAttribute("width",i.toString()),r.setAttribute("height",e.toString()),s&&t.setAttributes(r,s),r}static createLine(i,e,s,r,a){const h=document.createElementNS("http://www.w3.org/2000/svg","line");return h.setAttribute("x1",i.toString()),h.setAttribute("y1",e.toString()),h.setAttribute("x2",s.toString()),h.setAttribute("y2",r.toString()),a&&t.setAttributes(h,a),h}static createPolygon(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","polygon");return s.setAttribute("points",i),e&&t.setAttributes(s,e),s}static createCircle(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","circle");return s.setAttribute("cx",(i/2).toString()),s.setAttribute("cy",(i/2).toString()),s.setAttribute("r",i.toString()),e&&t.setAttributes(s,e),s}static createEllipse(i,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","ellipse");return r.setAttribute("cx",(i/2).toString()),r.setAttribute("cy",(e/2).toString()),r.setAttribute("rx",(i/2).toString()),r.setAttribute("ry",(e/2).toString()),s&&t.setAttributes(r,s),r}static createGroup(i){const e=document.createElementNS("http://www.w3.org/2000/svg","g");return i&&t.setAttributes(e,i),e}static createTransform(){return document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGTransform()}static createMarker(i,e,s,r,a,h,o){const n=document.createElementNS("http://www.w3.org/2000/svg","marker");return t.setAttributes(n,[["id",i],["orient",e],["markerWidth",s.toString()],["markerHeight",r.toString()],["refX",a.toString()],["refY",h.toString()]]),n.appendChild(o),n}static createText(i){const e=document.createElementNS("http://www.w3.org/2000/svg","text");return e.setAttribute("x","0"),e.setAttribute("y","0"),i&&t.setAttributes(e,i),e}static createTSpan(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","tspan");return s.textContent=i,e&&t.setAttributes(s,e),s}static createImage(i){const e=document.createElementNS("http://www.w3.org/2000/svg","image");return i&&t.setAttributes(e,i),e}static createPoint(t,i){const e=document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGPoint();return e.x=t,e.y=i,e}static createPath(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","path");return s.setAttribute("d",i),e&&t.setAttributes(s,e),s}static createForeignObject(i){const e=document.createElementNS("http://www.w3.org/2000/svg","foreignObject");return e.setAttribute("x","0"),e.setAttribute("y","0"),i&&t.setAttributes(e,i),e}static clientToLocalCoordinates(t,i,e,s=1){if(t){const r=t.getBoundingClientRect();return{x:(i-r.left)/s,y:(e-r.top)/s}}return{x:i,y:e}}static createSvgFromString(t){const i=document.createElementNS("http://www.w3.org/2000/svg","svg");return i.innerHTML=t,i}static createFilter(i,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","filter");return r.id=i,e&&t.setAttributes(r,e),s&&(r.innerHTML=s),r}}class i{static addKey(t,e){i.keys.set(t,e),i.keyAddListeners.forEach((t=>{t()}))}static addKeyAddListener(t){i.keyAddListeners.push(t)}static removeKeyAddListener(t){const e=i.keyAddListeners.indexOf(t);e>-1&&i.keyAddListeners.splice(e,1)}static isLicensed(t){if(i.keys.has(t)){const e=new RegExp(`${t}-[A-Z][0-9]{3}-[A-Z][0-9]{3}-[0-9]{4}`,"i"),s=i.keys.get(t);return void 0!==s&&e.test(s)}return!1}}i.keys=new Map,i.keyAddListeners=new Array;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",e.applyDefaultFilter=!0;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(i){this._visual=i;const e=t.createTransform();this._visual.transform.baseVal.appendItem(e)}constructor(i){super(i),this.left=0,this.top=0,this.width=0,this.height=0,this.rotationAngle=0,this.rotatePoint=this.rotatePoint.bind(this),this.unrotatePoint=this.unrotatePoint.bind(this),this.container.transform.baseVal.appendItem(t.createTransform())}moveVisual(t){this.visual&&(this.visual.style.transform=`translate(${t.x}px, ${t.y}px)`)}setSize(){this.moveVisual({x:this.left,y:this.top})}rotate(t){if(Math.abs(t.x-this.centerX)>.1){const i=Math.sign(t.x-this.centerX);this.rotationAngle=180*Math.atan((t.y-this.centerY)/(t.x-this.centerX))/Math.PI+90*i,this.applyRotation()}}applyRotation(){const t=this.container.transform.baseVal.getItem(0);t.setRotate(this.rotationAngle,this.centerX,this.centerY),this.container.transform.baseVal.replaceItem(t,0)}rotatePoint(i){if(0===this.rotationAngle)return i;const e=this.container.getCTM();if(null===e)return i;let s=t.createPoint(i.x,i.y);s=s.matrixTransform(e);return{x:s.x,y:s.y}}unrotatePoint(i){if(0===this.rotationAngle)return i;let e=this.container.getCTM();if(null===e)return i;e=e.inverse();let s=t.createPoint(i.x,i.y);s=s.matrixTransform(e);return{x:s.x,y:s.y}}getOutline(){return`M 0 0 \n    H ${this.defaultSize} \n    V ${this.defaultSize} \n    H 0 \n    V 0 Z`}getState(){return Object.assign({left:this.left,top:this.top,width:this.width,height:this.height,rotationAngle:this.rotationAngle,visualTransformMatrix: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&&t.setAttributes(this.visual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visual&&t.setAttributes(this.visual,[["stroke-width",this._strokeWidth.toString()]])}applyStrokeDasharray(){this.visual&&t.setAttributes(this.visual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.createVisual=this.createVisual.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual)}getPath(t=this.width,i=this.height){return"M0,0"}getOutline(){return this.getPath(this.defaultSize.width,this.defaultSize.height)}createVisual(){this.visual=t.createPath(this.getPath(),[["fill","transparent"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]]),this.addMarkerVisualToContainer(this.visual)}adjustVisual(){this.visual&&t.setAttributes(this.visual,[["d",this.getPath()],["fill","transparent"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]])}setSize(){super.setSize(),this.visual&&t.setAttributes(this.visual,[["d",this.getPath()]])}restoreState(t){this.createVisual(),super.restoreState(t),this.adjustVisual()}scale(t,i){super.scale(t,i),this.strokeWidth*=(t+i)/2,this.setSize()}}a.title="Shape outline marker";class h extends a{applyFillColor(){this.visual&&t.setAttributes(this.visual,[["fill",this._fillColor]])}constructor(t){super(t),this._fillColor="transparent",this.createVisual=this.createVisual.bind(this)}createVisual(){super.createVisual(),this.visual&&t.setAttributes(this.visual,[["fill",this._fillColor]])}getState(){return Object.assign({fillColor:this._fillColor},super.getState())}restoreState(t){const i=t;super.restoreState(t),this.fillColor=i.fillColor,this.setSize()}}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.lineVisual&&t.setAttributes(this.lineVisual,[["stroke",this._strokeColor]]),this.startTerminatorVisual&&this.endTerminatorVisual&&(t.setAttributes(this.startTerminatorVisual,[["stroke",this._strokeColor],["fill",this._strokeColor]]),t.setAttributes(this.endTerminatorVisual,[["stroke",this._strokeColor],["fill",this._strokeColor]]))}applyStrokeWidth(){this.lineVisual&&t.setAttributes(this.lineVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&t.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.lineVisual&&t.setAttributes(this.lineVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["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&&t!==this.lineVisual&&t!==this.startTerminatorVisual&&t!==this.endTerminatorVisual)}getPath(){return"M0,0"}getStartTerminatorPath(){return""}getEndTerminatorPath(){return""}createVisual(){this.visual=t.createGroup(),this.selectorVisual=t.createPath(this.getPath(),[["stroke","transparent"],["fill","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]),this.visibleVisual=t.createGroup([["opacity",this.opacity.toString()]]),this.lineVisual=t.createPath(this.getPath(),[["stroke",this.strokeColor],["fill",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-linejoin","round"],["stroke-dasharray",this.strokeDasharray.toString()]]),this.startTerminatorVisual=t.createPath(this.getStartTerminatorPath(),[["stroke",this.strokeColor],["fill",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-linejoin","round"]]),this.endTerminatorVisual=t.createPath(this.getEndTerminatorPath(),[["stroke",this.strokeColor],["fill",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-linejoin","round"]]),this.visibleVisual.appendChild(this.lineVisual),this.visibleVisual.appendChild(this.startTerminatorVisual),this.visibleVisual.appendChild(this.endTerminatorVisual),this.visual.appendChild(this.selectorVisual),this.visual.appendChild(this.visibleVisual),this.addMarkerVisualToContainer(this.visual)}adjustVisual(){this.selectorVisual&&this.visibleVisual&&this.lineVisual&&this.startTerminatorVisual&&this.endTerminatorVisual&&(t.setAttributes(this.selectorVisual,[["d",this.getPath()]]),t.setAttributes(this.visibleVisual,[["opacity",this.opacity.toString()]]),t.setAttributes(this.lineVisual,[["d",this.getPath()],["stroke",this.strokeColor],["fill",this.fillColor],["stroke-width",this.strokeWidth.toString()],["stroke-dasharray",this.strokeDasharray.toString()]]),t.setAttributes(this.startTerminatorVisual,[["d",this.getStartTerminatorPath()],["stroke",this.strokeColor],["fill",this.strokeColor],["stroke-width",this.strokeWidth.toString()]]),t.setAttributes(this.endTerminatorVisual,[["d",this.getEndTerminatorPath()],["stroke",this.strokeColor],["fill",this.strokeColor],["stroke-width",this.strokeWidth.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",this.getArrowProperties=this.getArrowProperties.bind(this),this.getStartTerminatorPath=this.getStartTerminatorPath.bind(this),this.getEndTerminatorPath=this.getEndTerminatorPath.bind(this)}getArrowProperties(){const t=10+2*this.strokeWidth,i=Math.min(Math.max(5,2*this.strokeWidth),this.strokeWidth+5),e=this.x2-this.x1,s=this.y2-this.y1;return{arrowHeight:t,arrowDipFactor:.7,angle:Math.atan2(s,e),arrowWidth:i}}getStartTerminatorPath(){const{arrowHeight:t,arrowDipFactor:i,angle:e,arrowWidth:s}=this.getArrowProperties(),r=this.x1+t*i*Math.cos(e),a=this.y1+t*i*Math.sin(e),h=this.x1+t*Math.cos(e),o=this.y1+t*Math.sin(e),n=h+s*Math.sin(e),l=o-s*Math.cos(e),d=h-s*Math.sin(e),u=o+s*Math.cos(e);return"start"===this.arrowType||"both"===this.arrowType?`M ${r} ${a}\n    L ${n} ${l} L ${this.x1} ${this.y1} L ${d} ${u} L ${r} ${a}\n    L ${r} ${a}`:""}getEndTerminatorPath(){const{arrowHeight:t,arrowDipFactor:i,angle:e,arrowWidth:s}=this.getArrowProperties(),r=this.x2-t*i*Math.cos(e),a=this.y2-t*i*Math.sin(e),h=this.x2-t*Math.cos(e),o=this.y2-t*Math.sin(e),n=h+s*Math.sin(e),l=o-s*Math.cos(e),d=h-s*Math.sin(e),u=o+s*Math.cos(e);return"end"===this.arrowType||"both"===this.arrowType?`M ${r} ${a} \n    L ${n} ${l} L ${this.x2} ${this.y2} L ${d} ${u} L ${r} ${a} Z`:""}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 u extends l{constructor(t){super(t)}getStartTerminatorPath(){const{tipLength:t,angle:i}=this.getTerminatorProperties();return`M ${this.x1+t*Math.sin(i)} ${this.y1-t*Math.cos(i)}\n      L ${this.x1-t*Math.sin(i)} ${this.y1+t*Math.cos(i)}`}getEndTerminatorPath(){const{tipLength:t,angle:i}=this.getTerminatorProperties();return`M ${this.x2+t*Math.sin(i)} ${this.y2-t*Math.cos(i)} L ${this.x2-t*Math.sin(i)} ${this.y2+t*Math.cos(i)}`}getTerminatorProperties(){const t=5+3*this.strokeWidth,i=this.x2-this.x1,e=this.y2-this.y1;return{tipLength:t,angle:Math.atan2(e,i)}}applyStrokeWidth(){super.applyStrokeWidth(),this.adjustVisual()}}u.typeName="MeasurementMarker",u.title="Measurement marker";class c extends e{applyStrokeColor(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke",this._strokeColor]])}applyFillColor(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["fill",this._fillColor]])}applyStrokeWidth(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&t.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.points=[],this.selectorVisualLines=[],this.strokeColor="#ff0000",this.strokeWidth=3,this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.getState=this.getState.bind(this),this.restoreState=this.restoreState.bind(this),this.scale=this.scale.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual&&t!==this.selectorVisual&&t!==this.visibleVisual&&!this.selectorVisualLines.some((i=>i===t)))}getPath(){return this.points.length>1?this.points.map(((t,i)=>`${0===i?"M":"L"}${t.x},${t.y}`)).join(" ")+("creating"!==this.stage?" Z":""):"M0,0"}createVisual(){this.visual=t.createGroup(),this.visibleVisual=t.createPath(this.getPath(),[["stroke",this.strokeColor],["fill",this.fillColor],["stroke-width",this.strokeWidth.toString()],["opacity",this.opacity.toString()]]),this.visual.appendChild(this.visibleVisual),this.createSelectorVisual(),this.addMarkerVisualToContainer(this.visual)}createSelectorVisual(){this.visual&&(this.selectorVisual=t.createGroup(),this.visual.appendChild(this.selectorVisual),this.points.forEach((()=>{this.addSelectorLine()})))}adjustVisual(){this.selectorVisual&&this.visibleVisual&&(t.setAttributes(this.visibleVisual,[["d",this.getPath()],["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-dasharray",this.strokeDasharray.toString()],["fill",this.fillColor],["opacity",this.opacity.toString()]]),this.adjustSelectorVisual())}adjustSelectorVisual(){if(this.selectorVisual){const i=this.points.length-this.selectorVisualLines.length;if(i>0)for(let t=0;t<i;t++)this.addSelectorLine();else if(i<0)for(let t=0;t<-i;t++)this.selectorVisual.removeChild(this.selectorVisualLines.pop());this.selectorVisualLines.forEach(((i,e)=>{t.setAttributes(i,[["x1",this.points[e].x.toString()],["y1",this.points[e].y.toString()],["x2",this.points[(e+1)%this.points.length].x.toString()],["y2",this.points[(e+1)%this.points.length].y.toString()]])}))}}addSelectorLine(){const i=t.createLine(0,0,0,0,[["stroke","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]);this.selectorVisual.appendChild(i),this.selectorVisualLines.push(i)}getState(){const t=Object.assign({points:this.points,fillColor:this.fillColor},super.getState());return t.typeName=c.typeName,t}restoreState(t){super.restoreState(t);const i=t;this.points=i.points,void 0!==i.fillColor&&(this.fillColor=i.fillColor),this.createVisual(),this.adjustVisual()}scale(t,i){super.scale(t,i),this.points.forEach((e=>{e.x=e.x*t,e.y=e.y*i})),this.adjustVisual()}}c.typeName="PolygonMarker",c.title="Polygon marker";class p extends e{applyStrokeColor(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&t.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.points=[],this.strokeColor="#ff0000",this.strokeWidth=3,this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.getState=this.getState.bind(this),this.restoreState=this.restoreState.bind(this),this.scale=this.scale.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual&&t!==this.selectorVisual&&t!==this.visibleVisual)}getPath(){return this.points.length>1?this.points.map(((t,i)=>`${0===i?"M":"L"}${t.x},${t.y}`)).join(" "):"M0,0"}createVisual(){this.visual=t.createGroup(),this.selectorVisual=t.createPath(this.getPath(),[["stroke","transparent"],["fill","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]),this.visibleVisual=t.createPath(this.getPath(),[["stroke",this.strokeColor],["fill","transparent"],["stroke-width",this.strokeWidth.toString()],["opacity",this.opacity.toString()]]),this.visual.appendChild(this.selectorVisual),this.visual.appendChild(this.visibleVisual),this.addMarkerVisualToContainer(this.visual)}adjustVisual(){if(this.selectorVisual&&this.visibleVisual){const i=this.getPath();t.setAttributes(this.selectorVisual,[["d",i]]),t.setAttributes(this.visibleVisual,[["d",i]]),t.setAttributes(this.visibleVisual,[["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-dasharray",this.strokeDasharray.toString()],["stroke-dasharray",this.strokeDasharray.toString()],["opacity",this.opacity.toString()]])}}getState(){return Object.assign({points:this.points},super.getState())}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()}}function g(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())}))}p.typeName="FreehandMarker",p.title="Freehand marker",p.applyDefaultFilter=!1,"function"==typeof SuppressedError&&SuppressedError;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(i){this.textElement&&t.setAttributes(this._textElement,[["fill",i]]),this._color=i}get color(){return this._color}get fontFamily(){return this._fontFamily}set fontFamily(t){this._textElement&&(this._textElement.style.fontFamily=t),this._fontFamily=t,this.positionText()}get fontSize(){return this._fontSize}set fontSize(t){this._textElement&&(this._textElement.style.fontSize=`${t.value}${t.units}`),this._fontSize=t,this.positionText()}constructor(i){this._text="",this.offsetX=0,this.offsetY=0,this._boundingBox=new DOMRect,this._labelBackground=t.createRect(10,10,[["fill","white"]]),this._textElement=t.createText(),this._color="transparent",this._fontFamily="",this._fontSize={value:1,units:"rem",step:.1},this.wordWrap=!1,this.prevWrappedText="",this.setupTextElement(),void 0!==i&&(this.text=i),this.setupTextElement=this.setupTextElement.bind(this),this.renderText=this.renderText.bind(this),this.positionText=this.positionText.bind(this),this.ownsTarget=this.ownsTarget.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.showControlBox=this.showControlBox.bind(this),this.hideControlBox=this.hideControlBox.bind(this),this.applyFontStyles=this.applyFontStyles.bind(this),this.wrapText=this.wrapText.bind(this)}ownsTarget(t){if(t===this._textElement)return!0;{let i=!1;return this._textElement.childNodes.forEach((e=>{e===t&&(i=!0)})),i}}setupTextElement(){this._textElement.style.fontSize=`${this.fontSize.value}${this.fontSize.units}`,this._textElement.style.textAnchor="middle",this._textElement.style.userSelect="none",this._labelBackground.style.stroke="#aaa",this._labelBackground.style.strokeDasharray="2 2",this._labelBackground.style.strokeWidth="1",this._labelBackground.style.strokeOpacity="0"}wrapText(){function t(t){let i=t[0].length;return t.forEach((t=>{t.length>i&&(i=t.length)})),.35*i/t.length}if(""!==this.text){const i=this.text.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/),e=1*this.boundingBox.width/this.boundingBox.height;let s=new Array(...i),r=t(s),a=Number.MAX_VALUE;for(;r>e;){let e=s[0];s.forEach((t=>{t.length>e.length&&(e=t)})),a=e.lastIndexOf(" ",a-1),a>0?(s=[],i.forEach((t=>{let i=t;for(;i.length>a;){let t=i.lastIndexOf(" ",a);t<0&&(t=i.indexOf(" ")),t>0?(s.push(i.substring(0,t)),i=i.substring(t).trim()):(s.push(i),i="")}s.push(i)})),r=t(s)):r=-1}return s.join("\r\n")}return this.text}renderText(){return g(this,void 0,void 0,(function*(){if(this._textElement){const i=this.wordWrap?this.wrapText():this.text;if(this.prevWrappedText===i)return void this.positionText();for(this.prevWrappedText=i;this._textElement.lastChild;)this._textElement.removeChild(this._textElement.lastChild);i.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/).forEach(((i,e)=>{this._textElement.appendChild(t.createTSpan(""===i.trim()?" ":i.trim(),[["dy",e>0?"1em":"0"]]))})),this.textElement.style.opacity="0",yield new Promise((t=>requestAnimationFrame(t))),this.positionText(this)}}))}applyFontStyles(){this._textElement.childNodes.forEach((t=>{const i=t;i.style.fontFamily=this._textElement.style.fontFamily,i.style.fontSize=this._textElement.style.fontSize}))}get textSize(){return this._textSize}positionText(i){const e=void 0===i?this:i;e.applyFontStyles(),e._textSize=e._textElement.getBBox();const s=e.boundingBox.x+e._textSize.width/2+e.offsetX,r=e._textElement.childNodes.length,a=e._textSize.height/r,h=r>1?-a*(r-2)/2:a/3,o=e.boundingBox.y+e._textSize.height/2+h+e.offsetY;e._textElement.childNodes.forEach(((i,e)=>{const r=i;t.setAttributes(r,[["x",`${s}`],["dy",e>0?"1em":"0"]])})),t.setAttributes(e._textElement,[["x",`${s}`]]),t.setAttributes(e._textElement,[["y",`${o}`]]),e._textSize=e._textElement.getBBox();const n=1.2;t.setAttributes(e.labelBackground,[["width",(e._textSize.width*n).toString()],["height",(e._textSize.height*n).toString()],["x",(s-e._textSize.width*n/2).toString()],["y",(e._textSize.y-n).toString()]]),e.onTextSizeChanged&&e.onTextSizeChanged(e),this.textElement.style.opacity="1"}show(){this._textElement.style.display="",this._labelBackground.style.display=""}hide(){this._textElement.style.display="none",this._labelBackground.style.display="none"}showControlBox(){this.labelBackground.style.strokeOpacity="1"}hideControlBox(){this.labelBackground.style.strokeOpacity="0"}}class v 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 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}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this.opacity.toString()]])}createVisual(){this.textBlock.fontFamily=this.fontFamily,this.textBlock.fontSize=this.fontSize,this.textBlock.color=this.color,this.textBlock.offsetX=this.padding,this.textBlock.offsetY=this.padding,this.textBlock.onTextSizeChanged=this.textSizeChanged,this.visual=t.createGroup(),t.setAttributes(this.visual,[["opacity",this._opacity.toString()]]),this.visual.appendChild(this.textBlock.textElement),this.addMarkerVisualToContainer(this.visual),this.textBlock.text=this._text}adjustVisual(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]]),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,padding:this.padding},super.getState())}restoreState(t){const i=t;this.color=i.color,this.fontFamily=i.fontFamily,this.fontSize=i.fontSize,this.text=i.text,void 0!==i.padding&&(this.padding=i.padding),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.padding=this.padding*Math.min(t,i),this.adjustVisual()}}v.typeName="TextMarker",v.title="Text marker",v.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",k.applyDefaultFilter=!1;class _ 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`}}_.typeName="HighlightMarker",_.title="Highlight marker",_.applyDefaultFilter=!1;class y extends v{get tipPosition(){return this._tipPosition}set tipPosition(t){this._tipPosition=t,this.adjustVisual()}constructor(i){super(i),this._tipPosition={x:0,y:0},this.tipBase1Position={x:0,y:0},this.tipBase2Position={x:0,y:0},this._calloutVisual=t.createPath("M0,0"),this.color="#ffffff",this.fillColor="#ff0000",this.strokeColor="#ffffff",this.strokeWidth=3,this.padding=20,this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.getPath=this.getPath.bind(this),this.setTipPoints=this.setTipPoints.bind(this)}applyStrokeColor(){t.setAttributes(this._calloutVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){t.setAttributes(this._calloutVisual,[["stroke-width",this._strokeWidth.toString()]])}applyStrokeDasharray(){t.setAttributes(this._calloutVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}applyFillColor(){t.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 i;super.createVisual(),this._tipPosition={x:this.width/4,y:this.height+20},this._calloutVisual=t.createPath(this.getPath(),[["fill",this._fillColor],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray]]),null===(i=this.visual)||void 0===i||i.insertBefore(this._calloutVisual,this.textBlock.textElement)}adjustVisual(){super.adjustVisual(),this._calloutVisual&&t.setAttributes(this._calloutVisual,[["d",this.getPath()],["fill",this._fillColor],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray]])}ownsTarget(t){return!(!super.ownsTarget(t)&&this._calloutVisual!==t)}getState(){return Object.assign({fillColor:this.fillColor,tipPosition:this.tipPosition},super.getState())}restoreState(t){const i=t;super.restoreState(t),this.fillColor=i.fillColor,this.tipPosition=i.tipPosition,this.adjustVisual()}scale(t,i){super.scale(t,i),this.strokeWidth*=(t+i)/2,this._tipPosition={x:this._tipPosition.x*t,y:this._tipPosition.y*i},this.adjustVisual()}}y.typeName="CalloutMarker",y.title="Callout marker";class S 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`}}S.typeName="EllipseFrameMarker",S.title="Ellipse frame marker";class C 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`}}C.typeName="EllipseMarker",C.title="Ellipse marker";class x 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(i){this._imageSrc=i,this.SVGImage&&"bitmap"===this.imageType&&(void 0!==i?t.setAttributes(this.SVGImage,[["href",i]]):t.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),this.adjustVisual=this.adjustVisual.bind(this),this.adjustImage=this.adjustImage.bind(this)}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this.opacity.toString()]])}createImage(){var i;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=t.createImage([["href",null!==(i=this._imageSrc)&&void 0!==i?i:""]])}createVisual(){this.createImage(),void 0!==this.SVGImage&&(this.visual=t.createGroup(),"svg"===this.imageType&&t.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],["opacity",this.opacity.toString()],["pointer-events","bounding-box"]]),this.adjustImage(),this.visual.appendChild(this.SVGImage),this.addMarkerVisualToContainer(this.visual))}adjustVisual(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}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&&(t.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&&t.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(),this.adjustVisual()}scale(t,i){super.scale(t,i),this.setSize()}}x.title="Image marker";class f extends x{}f.typeName="CustomImageMarker",f.title="Custom image marker";class w extends x{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 b extends x{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 v{constructor(i){super(i),this._outerFrameVisual=t.createPath("M0,0"),this._captionFrameVisual=t.createPath("M0,0"),this._frameVisual=t.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(){t.setAttributes(this._outerFrameVisual,[["stroke",this._strokeColor]]),t.setAttributes(this._captionFrameVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){t.setAttributes(this._outerFrameVisual,[["stroke-width",this._strokeWidth.toString()]]),t.setAttributes(this._captionFrameVisual,[["stroke-width",this._strokeWidth.toString()]]),this.adjustTextPosition(),this.adjustFrameVisual()}applyStrokeDasharray(){t.setAttributes(this._outerFrameVisual,[["stroke-dasharray",this._strokeDasharray]]),t.setAttributes(this._captionFrameVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}applyFillColor(){t.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 i;super.createVisual();const e=this.getPaths();this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]]),this._outerFrameVisual=t.createPath(e.frame,[["fill","transparent"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray]]),this._captionFrameVisual=t.createPath(e.caption,[["fill","this._fillColor"],["fill-rule","evenodd"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray]]),this._frameVisual.appendChild(this._outerFrameVisual),this._frameVisual.appendChild(this._captionFrameVisual),null===(i=this.visual)||void 0===i||i.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 i=this.getPaths();this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]]),this._outerFrameVisual&&t.setAttributes(this._outerFrameVisual,[["d",i.frame],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray]]),this._captionFrameVisual&&t.setAttributes(this._captionFrameVisual,[["d",i.caption],["fill",this._fillColor],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray]])}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 T extends l{constructor(t){super(t),this.curveX=0,this.curveY=0,this.fillColor="transparent"}getPath(){return`M ${this.x1} ${this.y1} Q ${this.curveX} ${this.curveY}, ${this.x2} ${this.y2}`}getState(){return Object.assign({curveX:this.curveX,curveY:this.curveY},super.getState())}restoreState(t){this.curveX=t.curveX,this.curveY=t.curveY,super.restoreState(t)}scale(t,i){super.scale(t,i),this.curveX=this.curveX*t,this.curveY=this.curveY*i,this.adjustVisual()}}T.typeName="CurveMarker",T.title="Curve marker";class M extends p{constructor(t){super(t),this.opacity=.5,this.strokeColor="#ffff00",this.strokeWidth=20}}M.typeName="HighlighterMarker",M.title="Highlighter marker",M.applyDefaultFilter=!1;class V{static getDefaultFilterSet(){return[t.createFilter("dropShadow",[["x","-20%"],["y","-20%"],["width","140%"],["height","140%"]],'<feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="rgba(0,0,0,0.8)"/>'),t.createFilter("outline",[["x","-5%"],["y","-5%"],["width","110%"],["height","110%"]],'<feMorphology operator="dilate" radius="2" in="SourceAlpha" result="expanded"/>\n      <feFlood flood-color="white" flood-opacity="1"/>\n      <feComposite in2="expanded" operator="in"/>\n      <feComposite in="SourceGraphic" operator="over"/>'),t.createFilter("glow",[["x","-50%"],["y","-50%"],["width","200%"],["height","200%"]],'<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>\n      <feFlood flood-color="#ffffff" flood-opacity="1"/>\n      <feComposite in2="blur" operator="in"/>\n      <feMerge>\n        <feMergeNode/>\n        <feMergeNode in="SourceGraphic"/>\n      </feMerge>')]}}class z{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}set notes(t){this.marker.notes=t}get notes(){return this.marker.notes}get zoomLevel(){return this._zoomLevel}set zoomLevel(t){this._zoomLevel=t,this.adjustControlBox()}constructor(i){var e;this._creationStyle="draw",this._state="new",this._controlBox=t.createGroup(),this._isSelected=!1,this._continuousCreation=!1,this._zoomLevel=1,this.isMultiSelected=!1,this._container=i.container,this._overlayContainer=i.overlayContainer,this._markerType=i.markerType,this._marker=null!==(e=i.marker)&&void 0!==e?e:new i.markerType(i.container),this.select=this.select.bind(this),this.deselect=this.deselect.bind(this),this.ownsTarget=this.ownsTarget.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.stateChanged=this.stateChanged.bind(this),this.scale=this.scale.bind(this),this.dispose=this.dispose.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.manipulate=this.manipulate.bind(this),this.dblClick=this.dblClick.bind(this)}ownsTarget(t){var i;let e=!1;return null!==t&&(null===(i=this._marker)||void 0===i?void 0:i.ownsTarget(t))&&(e=!0),e}select(t=!1){this.isMultiSelected=t,this.container.style.cursor="move",this._isSelected=!0,this.manipulationStartState=JSON.stringify(this._marker.getState())}deselect(){this.container.style.cursor="default",this._isSelected=!1,this.stateChanged()}pointerDown(t,i,e){}dblClick(t,i,e){}manipulate(t,i){}pointerUp(t,i){}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());this.manipulationStartState!=t&&(this.manipulationStartState=t,this.onStateChanged(this))}}hide(){this.container.style.display="none"}show(){this.container.style.display="block"}getState(){return this.marker.getState()}restoreState(t){this._state="select",this.marker.restoreState(t),this.adjustControlBox()}}class B{get visual(){return this._visual||this.createVisual(),this._visual}get zoomLevel(){return this._zoomLevel}set zoomLevel(t){this._zoomLevel=t,this.adjustVisual()}constructor(){this.gripSize=5,this._zoomLevel=1,this.fillColor="rgba(255,255,255,0.9)",this.strokeColor="#0ea5e9",this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this)}createVisual(){this._visual=t.createGroup(),this._selectorElement=t.createCircle(2*this.gripSize,[["fill","transparent"],["cx",(this.gripSize/2).toString()],["cy",(this.gripSize/2).toString()]]),this._visual.appendChild(this._selectorElement),this._visibleElement=t.createCircle(this.gripSize,[["fill-opacity","1"],["stroke-width","1"],["stroke-opacity","1"]]),this._visibleElement.style.fill=`var(--mjs-grip-fill, ${this.fillColor})`,this._visibleElement.style.stroke=`var(--mjs-grip-stroke, ${this.strokeColor})`,this._visibleElement.style.filter="drop-shadow(0px 0px 2px rgba(0, 0, 0, .7))",this._visual.appendChild(this._visibleElement)}adjustVisual(){this._selectorElement&&this._visibleElement&&(this._selectorElement.setAttribute("r",(2*this.gripSize/this.zoomLevel).toString()),this._visibleElement.setAttribute("r",(this.gripSize/this.zoomLevel).toString()),this._visibleElement.setAttribute("stroke-width",(1/this.zoomLevel).toString()))}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 L extends B{}class P extends z{constructor(i){super(i),this.defaultLength=50,this.manipulationStartX=0,this.manipulationStartY=0,this.controlBox=t.createGroup(),this.manipulationBox=t.createGroup(),this.grips=[],this.ownsTarget=this.ownsTarget.bind(this),this.setupControlBox=this.setupControlBox.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.adjustControlGrips=this.adjustControlGrips.bind(this),this.createGrip=this.createGrip.bind(this),this.positionGrip=this.positionGrip.bind(this),this.positionGrips=this.positionGrips.bind(this),this.resize=this.resize.bind(this),this.manipulate=this.manipulate.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.setupControlBox()}ownsTarget(t){return!(!super.ownsTarget(t)&&!this.marker.ownsTarget(t))||!!this.grips.some((i=>i.ownsTarget(t)))}pointerDown(t,i,e){super.pointerDown(t,i,e),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.controlBox.style.display="",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),1===this.marker.points.length&&this.marker.points.splice(0,1),this.marker.adjustVisual(),this.adjustControlGrips(),this.grips.forEach((t=>{t.visual.style.pointerEvents=""})),this._state="select",this.marker.points.length>0&&this.onMarkerCreated&&this.onMarkerCreated(this)}pointerUp(t,i){super.pointerUp(t,i),this.manipulate(t,i),"creating"!==this._state&&(this._state="select"),this.stateChanged()}manipulate(t,i){"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,e){if(i&&"select"===this.state){const e=this.marker.selectorVisualLines.findIndex((t=>t===i));if(e>-1)this.marker.points.splice(e+1,0,t),this.marker.adjustVisual(),this.adjustControlGrips();else{const t=this.grips.findIndex((t=>t.ownsTarget(i)));t>-1&&(this.marker.points.splice(t,1),this.marker.adjustVisual(),this.adjustControlGrips())}}}setupControlBox(){this.controlBox=t.createGroup(),this.container.appendChild(this.controlBox),this.manipulationBox=t.createGroup(),this.controlBox.appendChild(this.manipulationBox),this.adjustControlGrips(),this.controlBox.style.display="none"}adjustControlBox(){this.adjustControlGrips()}adjustControlGrips(){const t=this.marker.points.length-this.grips.length;if(t>0)for(let i=0;i<t;i++)this.grips.push(this.createGrip());else if(t<0)for(let i=0;i<-t;i++){const t=this.grips.pop();t&&this.manipulationBox.removeChild(t.visual)}this.positionGrips()}createGrip(){const i=new L;return i.zoomLevel=this.zoomLevel,i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),i}positionGrips(){this.grips.forEach(((t,i)=>{t.zoomLevel=this.zoomLevel;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 G extends z{constructor(i){super(i),this.defaultLength=50,this.manipulationStartX=0,this.manipulationStartY=0,this.manipulationStartX1=0,this.manipulationStartY1=0,this.manipulationStartX2=0,this.manipulationStartY2=0,this.manipulationBox=t.createGroup(),this.ownsTarget=this.ownsTarget.bind(this),this.setupControlBox=this.setupControlBox.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.addControlGrips=this.addControlGrips.bind(this),this.createGrip=this.createGrip.bind(this),this.positionGrip=this.positionGrip.bind(this),this.positionGrips=this.positionGrips.bind(this),this.resize=this.resize.bind(this),this.manipulate=this.manipulate.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.setupControlBox()}ownsTarget(t){var i,e;return!(!super.ownsTarget(t)&&!this.marker.ownsTarget(t))||!(!(null===(i=this.grip1)||void 0===i?void 0:i.ownsTarget(t))&&!(null===(e=this.grip2)||void 0===e?void 0:e.ownsTarget(t)))}pointerDown(t,i,e){var s,r;super.pointerDown(t,i,e),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===(s=this.grip1)||void 0===s?void 0:s.ownsTarget(i))?this.activeGrip=this.grip1:i&&(null===(r=this.grip2)||void 0===r?void 0:r.ownsTarget(i))?this.activeGrip=this.grip2:this.activeGrip=void 0,this.activeGrip?this._state="resize":this._state="move")}pointerUp(t,i){const e=this.state;super.pointerUp(t,i),"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,i),this._state="select","creating"===e&&this.onMarkerCreated&&this.onMarkerCreated(this)}manipulate(t,i){"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.container.appendChild(this._controlBox),this.manipulationBox=t.createGroup(),this._controlBox.appendChild(this.manipulationBox),this.addControlGrips(),this._controlBox.style.display="none"}adjustControlBox(){this.positionGrips()}addControlGrips(){this.grip1=this.createGrip(),this.grip2=this.createGrip(),this.positionGrips()}createGrip(){const i=new L;return i.zoomLevel=this.zoomLevel,i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),i}positionGrips(){if(this.grip1&&this.grip2){const t=this.grip1.gripSize;this.positionGrip(this.grip1.visual,this.marker.x1-t/2,this.marker.y1-t/2),this.positionGrip(this.grip2.visual,this.marker.x2-t/2,this.marker.y2-t/2),this.grip1.zoomLevel=this.zoomLevel,this.grip2.zoomLevel=this.zoomLevel}}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 A{constructor(){this.grips=new Map([["topleft",new L],["topcenter",new L],["topright",new L],["leftcenter",new L],["rightcenter",new L],["bottomleft",new L],["bottomcenter",new L],["bottomright",new L]]),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 W extends B{constructor(){super();const t=this.fillColor;this.fillColor=this.strokeColor,this.strokeColor=t}}class D extends z{constructor(i){super(i),this.manipulationStartLeft=0,this.manipulationStartTop=0,this.manipulationStartWidth=0,this.manipulationStartHeight=0,this.manipulationStartX=0,this.manipulationStartY=0,this.offsetX=0,this.offsetY=0,this.controlBox=t.createGroup(),this.manipulationBox=t.createGroup(),this.CB_DISTANCE=0,this.controlGrips=new A,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,e){var s;super.pointerDown(t,i,e),"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 r=this.marker.unrotatePoint(t);if(this.manipulationStartX=r.x,this.manipulationStartY=r.y,this.offsetX=r.x-this.marker.left,this.offsetY=r.y-this.marker.top,"new"!==this.state)if(this.select(this.isMultiSelected),this.activeGrip=null===(s=this.controlGrips)||void 0===s?void 0:s.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,i){const e=this.state;super.pointerUp(t,i),"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,i),this._state="select","creating"===e&&this.onMarkerCreated&&!1===this._suppressMarkerCreateEvent&&this.onMarkerCreated(this),this.stateChanged()}manipulate(t,i){const e=this.marker.unrotatePoint(t);"creating"===this.state?this.resize(t,null==i?void 0:i.shiftKey):"move"===this.state?(this.marker.left=this.manipulationStartLeft+(e.x-this.manipulationStartLeft)-this.offsetX,this.marker.top=this.manipulationStartTop+(e.y-this.manipulationStartTop)-this.offsetY,this.marker.moveVisual({x:this.marker.left,y:this.marker.top}),this.adjustControlBox()):"resize"===this.state?this.resize(e,null==i?void 0:i.shiftKey):"rotate"===this.state&&this.marker.rotate(t)}resize(t,i=!1){let e=this.manipulationStartLeft,s=this.manipulationStartWidth,r=this.manipulationStartTop,a=this.manipulationStartHeight;const h=t.x-this.manipulationStartX,o=t.y-this.manipulationStartY;if(i){const t=0!==this.manipulationStartWidth&&0!==this.manipulationStartHeight?this.manipulationStartWidth/this.manipulationStartHeight:1;switch(this.activeGrip){case this.controlGrips.getGrip("bottomright"):case void 0:s=this.manipulationStartWidth+Math.max(h,o),a=this.manipulationStartHeight+Math.max(h,o)/t;break;case this.controlGrips.getGrip("bottomcenter"):s=this.manipulationStartWidth+o,a=this.manipulationStartHeight+o/t,e=this.manipulationStartLeft-o/2;break;case this.controlGrips.getGrip("bottomleft"):s=this.manipulationStartWidth+Math.max(-h,o),a=this.manipulationStartHeight+Math.max(-h,o)/t,e=this.manipulationStartLeft-Math.max(-h,o);break;case this.controlGrips.getGrip("leftcenter"):s=this.manipulationStartWidth-h,a=this.manipulationStartHeight-h/t,e=this.manipulationStartLeft+h,r=this.manipulationStartTop+h/t/2;break;case this.controlGrips.getGrip("topleft"):s=this.manipulationStartWidth+Math.max(-h,-o),a=this.manipulationStartHeight+Math.max(-h,-o)/t,e=this.manipulationStartLeft-Math.max(-h,-o),r=this.manipulationStartTop-Math.max(-h,-o)/t;break;case this.controlGrips.getGrip("topcenter"):s=this.manipulationStartWidth-o,a=this.manipulationStartHeight-o/t,e=this.manipulationStartLeft+o/2,r=this.manipulationStartTop+o/t;break;case this.controlGrips.getGrip("topright"):s=this.manipulationStartWidth+Math.max(h,-o),a=this.manipulationStartHeight+Math.max(h,-o)/t,r=this.manipulationStartTop-Math.max(h,-o)/t;break;case this.controlGrips.getGrip("rightcenter"):s=this.manipulationStartWidth+h,a=this.manipulationStartHeight+h/t,r=this.manipulationStartTop-h/t/2}}else{switch(this.activeGrip){case this.controlGrips.getGrip("bottomleft"):case this.controlGrips.getGrip("leftcenter"):case this.controlGrips.getGrip("topleft"):e=this.manipulationStartLeft+t.x-this.manipulationStartX,s=this.manipulationStartWidth+this.manipulationStartLeft-e;break;case this.controlGrips.getGrip("bottomright"):case this.controlGrips.getGrip("rightcenter"):case this.controlGrips.getGrip("topright"):case void 0:s=this.manipulationStartWidth+t.x-this.manipulationStartX}switch(this.activeGrip){case this.controlGrips.getGrip("topcenter"):case this.controlGrips.getGrip("topleft"):case this.controlGrips.getGrip("topright"):r=this.manipulationStartTop+t.y-this.manipulationStartY,a=this.manipulationStartHeight+this.manipulationStartTop-r;break;case this.controlGrips.getGrip("bottomcenter"):case this.controlGrips.getGrip("bottomleft"):case this.controlGrips.getGrip("bottomright"):case void 0:a=this.manipulationStartHeight+t.y-this.manipulationStartY}}s>=0?(this.marker.left=e,this.marker.width=s):(this.marker.left=e+s,this.marker.width=-s),a>=0?(this.marker.top=r,this.marker.height=a):(this.marker.top=r+a,this.marker.height=-a),this.setSize()}setSize(){this.marker.setSize(),this.adjustControlBox()}select(t=!1){super.select(t),this.adjustControlBox(),this.manipulationBox.style.display=t?"none":"",this.controlBox.style.display=""}deselect(){super.deselect(),this.controlBox.style.display="none"}setupControlBox(){this.controlBox=t.createGroup();const i=t.createTransform();i.setTranslate(-this.CB_DISTANCE/2,-this.CB_DISTANCE/2),this.controlBox.transform.baseVal.appendItem(i),this.container.appendChild(this.controlBox),this.manipulationBox=t.createGroup(),this.controlBox.appendChild(this.manipulationBox),this.controlRect=t.createRect(this.marker.width+this.CB_DISTANCE,this.marker.height+this.CB_DISTANCE,[["stroke","black"],["stroke-width",(1/this.zoomLevel).toString()],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"],["fill","transparent"],["pointer-events","none"]]),this.controlBox.appendChild(this.controlRect),!0!==this.disableRotation&&(this.rotatorGripLine=t.createLine((this.marker.width+2*this.CB_DISTANCE)/2,this.marker.top-this.CB_DISTANCE,(this.marker.width+2*this.CB_DISTANCE)/2,this.marker.top-3*this.CB_DISTANCE,[["stroke","black"],["stroke-width",(1/this.zoomLevel).toString()],["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 A,this.addControlGrips(),this.controlBox.style.display="none"}adjustControlBox(){var t,i,e;const s=this.controlBox.transform.baseVal.getItem(0);s.setTranslate(this.marker.left-this.CB_DISTANCE/2,this.marker.top-this.CB_DISTANCE/2),this.controlBox.transform.baseVal.replaceItem(s,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()),null===(e=this.controlRect)||void 0===e||e.setAttribute("stroke-width",(1/this.zoomLevel).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.rotatorGripLine.setAttribute("stroke-width",(1/this.zoomLevel).toString())),this.positionGrips()}addControlGrips(){for(const i of this.controlGrips.grips.values())i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),this.manipulationBox.appendChild(i.visual);!0!==this.disableRotation&&(this.rotatorGrip=this.createRotateGrip()),this.positionGrips()}createRotateGrip(){const i=new W;return i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),i}positionGrips(){var t,i;if(void 0!==this.controlGrips){const e=null!==(t=this.controlGrips.getGrip("topleft").gripSize)&&void 0!==t?t:0,s=-e/2,r=s,a=(this.marker.width+this.CB_DISTANCE)/2-e/2,h=(this.marker.height+this.CB_DISTANCE)/2-e/2,o=this.marker.height+this.CB_DISTANCE-e/2,n=this.marker.width+this.CB_DISTANCE-e/2;if(this.positionGrip(this.controlGrips.getGrip("topleft").visual,s,r),this.positionGrip(this.controlGrips.getGrip("topcenter").visual,a,r),this.positionGrip(this.controlGrips.getGrip("topright").visual,n,r),this.positionGrip(this.controlGrips.getGrip("leftcenter").visual,s,h),this.positionGrip(this.controlGrips.getGrip("rightcenter").visual,n,h),this.positionGrip(this.controlGrips.getGrip("bottomleft").visual,s,o),this.positionGrip(this.controlGrips.getGrip("bottomcenter").visual,a,o),this.positionGrip(this.controlGrips.getGrip("bottomright").visual,n,o),this.controlGrips.grips.forEach((t=>{t.zoomLevel=this.zoomLevel})),void 0!==this.rotatorGrip){this.rotatorGrip.zoomLevel=this.zoomLevel;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(Math.max(3*this.CB_DISTANCE,30),15/this.zoomLevel))}}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),this.adjustControlBox()}}class I extends D{constructor(t){super(t),this._creationStyle="draw"}pointerDown(t,i,e){super.pointerDown(t,i,e),"new"===this.state&&(this.marker.createVisual(),this.marker.moveVisual(t),this._state="creating")}resize(t,i=!1){super.resize(t,i),this.setSize()}pointerUp(t,i){super.pointerUp(t,i),this.setSize()}}class j{constructor(){this.undoStack=[],this.redoStack=[]}get isUndoPossible(){return this.undoStack.length>1}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(),void 0!==this.lastRedoStep&&this.undoStack.push(this.lastRedoStep),this.lastRedoStep}}class $ extends z{constructor(i){super(i),this.manipulationStartX=0,this.manipulationStartY=0,this.controlBox=t.createGroup(),this._continuousCreation=!0,this.ownsTarget=this.ownsTarget.bind(this),this.setupControlBox=this.setupControlBox.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.manipulate=this.manipulate.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.setupControlBox()}ownsTarget(t){return!(!super.ownsTarget(t)&&!this.marker.ownsTarget(t)&&t!==this.controlRect)}pointerDown(t,i,e){super.pointerDown(t,i,e),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,i){super.pointerUp(t,i),this.manipulate(t,i),"creating"===this._state&&this.finishCreation(),this.state="select",this.stateChanged()}manipulate(t,i){"creating"===this.state?this.addNewPointWhileCreating(t):"move"===this.state&&(this.marker.points.forEach((i=>{i.x+=t.x-this.manipulationStartX,i.y+=t.y-this.manipulationStartY})),this.manipulationStartX=t.x,this.manipulationStartY=t.y,this.marker.adjustVisual(),this.adjustControlBox())}setupControlBox(){this.controlBox=t.createGroup(),this.container.appendChild(this.controlBox),this.controlRect=t.createRect(0,0,[["stroke","black"],["stroke-width","1"],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"],["fill","transparent"]]),this.controlBox.appendChild(this.controlRect),this.controlBox.style.display="none"}adjustControlBox(){if(this.marker.points.length>0){const i=Math.min(...this.marker.points.map((t=>t.x))),e=Math.min(...this.marker.points.map((t=>t.y))),s=Math.max(...this.marker.points.map((t=>t.x))),r=Math.max(...this.marker.points.map((t=>t.y)));this.controlRect&&t.setAttributes(this.controlRect,[["x",(i-this.strokeWidth).toString()],["y",(e-this.strokeWidth).toString()],["width",(s-i+2*this.strokeWidth).toString()],["height",(r-e+2*this.strokeWidth).toString()]])}}select(){super.select(),this.adjustControlBox(),this.controlBox.style.display=""}deselect(){super.deselect(),this.controlBox.style.display="none"}}class F{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("textarea"),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.width=`${this._width}px`,this.textEditor.style.height=`${this._height}px`,this.textEditor.style.overflow="hidden",this.textEditor.style.textAlign="center",this.textEditor.style.alignContent="center",this.textEditor.style.padding="0px",this.textEditor.style.margin="0px",this.textEditor.style.fontFamily=this._fontFamily,this.textEditor.style.fontSize=this._fontSize,this.textEditor.style.lineHeight="1em",this.textEditor.style.outline="none",this.textEditor.style.border="none",this.textEditor.style.resize="none",this.textEditor.value=this._text,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.value,void 0!==this.onTextChanged&&this.onTextChanged(this._text)})),this.textEditor.addEventListener("blur",(()=>{this._text=this.textEditor.value,void 0!==this.onTextChanged&&this.onTextChanged(this._text),void 0!==this.onBlur&&this.onBlur()})),this.isSetupCompleted=!0}getEditorUi(){return this.isSetupCompleted||this.setup(),this.textEditor}focus(){this.textEditor.focus()}blur(){this.textEditor.blur()}}class H extends D{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(i){super(i),this.textBlockEditorContainer=t.createForeignObject(),this._pointerDownTime=Number.MAX_VALUE,this._pointerDownPoint={x:0,y:0},this.markerSizeChanged=()=>{this.setSize()},this.disabledResizeGrips=["topleft","topcenter","topright","bottomleft","bottomcenter","bottomright","leftcenter","rightcenter"],this._creationStyle="drop",this.textBlockEditor=new F,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,e){super.pointerDown(t,i,e),this._pointerDownTime=Date.now(),this._pointerDownPoint=t,"new"===this.state&&(this.marker.createVisual(),this.marker.moveVisual(t),this._state="creating")}dblClick(t,i,e){super.dblClick(t,i,e),"edit"!==this.state&&this.showEditor()}setSize(){super.setSize(),this.textBlockEditorContainer.style.display="flex",this.textBlockEditorContainer.style.transform=`translate(${this.marker.left}px, ${this.marker.top}px)`,this.textBlockEditorContainer.style.width=`${this.marker.width}px`,this.textBlockEditorContainer.setAttribute("width",`${this.marker.width}`),this.textBlockEditorContainer.style.height=`${this.marker.height}px`,this.textBlockEditorContainer.setAttribute("height",`${this.marker.height}`),this.textBlockEditor.width=this.marker.width,this.textBlockEditor.height=this.marker.height}resize(t,i=!1){super.resize(t,i),this.setSize()}pointerUp(t,i){const e=this.state;super.pointerUp(t,i),this.setSize(),("creating"===e||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.deselect()}),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 N='<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path style="fill:none" d="M413.33 667.848h305.294v148.981H413.33z" transform="matrix(.20963 0 0 .42959 -86.648 -286.898)"/><path d="m909.846 1031.18-62.778-1.78v-15.82l62.778-2.92v20.52Z" style="fill:#ffe862" transform="matrix(.83313 0 0 .79653 -699.87 -771.183)"/><path d="M771.747 702.002v-6.3h1.248v1.344l-.228.144a2.03 2.03 0 0 1 .306-.6c.14-.192.312-.362.516-.51.204-.148.424-.266.66-.354.236-.088.478-.132.726-.132.36 0 .676.06.948.18.272.12.496.3.672.54.176.24.304.54.384.9l-.192-.048.084-.204c.088-.184.21-.358.366-.522a2.863 2.863 0 0 1 1.17-.738 2.15 2.15 0 0 1 .66-.108c.472 0 .862.096 1.17.288.308.192.54.484.696.876.156.392.234.88.234 1.464v3.78h-1.248v-3.708c0-.36-.046-.654-.138-.882a1.021 1.021 0 0 0-.414-.51c-.184-.112-.42-.168-.708-.168-.224 0-.434.038-.63.114a1.55 1.55 0 0 0-.51.318 1.446 1.446 0 0 0-.456 1.068v3.768h-1.248v-3.732c0-.328-.048-.606-.144-.834a1.123 1.123 0 0 0-.42-.522 1.204 1.204 0 0 0-.672-.18 1.68 1.68 0 0 0-.624.114 1.62 1.62 0 0 0-.504.312 1.398 1.398 0 0 0-.456 1.05v3.792h-1.248Z" style="fill:#e60076;fill-rule:nonzero" transform="matrix(4.60055 0 0 4.60055 -3539.456 -3186.295)"/></svg>';class O extends I{}class U extends G{set arrowType(t){this.marker.arrowType=t}get arrowType(){return this.marker.arrowType}}class R extends H{constructor(t){super(t),this.manipulationStartTipPositionX=0,this.manipulationStartTipPositionY=0}addControlGrips(){this.tipGrip=this.createTipGrip(),super.addControlGrips()}createTipGrip(){const i=new L;return i.zoomLevel=this.zoomLevel,i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),i}positionGrips(){var t;if(super.positionGrips(),this.tipGrip){this.tipGrip.zoomLevel=this.zoomLevel;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,e){super.pointerDown(t,i,e),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,i=!1){const e=this.manipulationStartTipPositionX+t.x-this.manipulationStartX,s=this.manipulationStartTipPositionY+t.y-this.manipulationStartY;this.activeGrip===this.tipGrip?(this.marker.tipPosition={x:e,y:s},this.adjustControlBox()):super.resize(t,i)}}class X extends D{constructor(t){super(t),this._creationStyle="drop",this.disabledResizeGrips=["topcenter","bottomcenter","leftcenter","rightcenter"],this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.resize=this.resize.bind(this)}pointerDown(t,i,e){super.pointerDown(t,i,e),"new"===this.state&&(this.marker.createVisual(),this.marker.moveVisual(t),this._state="creating")}pointerUp(t,i){super.pointerUp(t,i),this.setSize(),this.adjustControlBox()}}class Y extends H{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 q extends G{constructor(){super(...arguments),this.manipulationStartCurveX=0,this.manipulationStartCurveY=0}ownsTarget(t){var i;return!(!super.ownsTarget(t)&&!(null===(i=this.curveGrip)||void 0===i?void 0:i.ownsTarget(t)))}pointerDown(t,i,e){var s;"new"===this.state&&(this.marker.curveX=t.x,this.marker.curveY=t.y),this.manipulationStartCurveX=this.marker.curveX,this.manipulationStartCurveY=this.marker.curveY,super.pointerDown(t,i,e),"new"!==this.state&&"creating"!==this.state&&(i&&(null===(s=this.curveGrip)||void 0===s?void 0:s.ownsTarget(i))&&(this.activeGrip=this.curveGrip),this.activeGrip?this._state="resize":this._state="move")}resize(t){super.resize(t),this.activeGrip===this.curveGrip&&(this.marker.curveX=t.x,this.marker.curveY=t.y,this.marker.adjustVisual(),this.adjustControlBox()),"creating"===this.state&&(this.marker.curveX=this.marker.x1+(this.marker.x2-this.marker.x1)/2,this.marker.curveY=this.marker.y1+(this.marker.y2-this.marker.y1)/2)}manipulate(t,i){"move"===this.state&&(this.marker.curveX=this.manipulationStartCurveX+t.x-this.manipulationStartX,this.marker.curveY=this.manipulationStartCurveY+t.y-this.manipulationStartY),super.manipulate(t,i)}setupControlBox(){super.setupControlBox();const i=1/this.zoomLevel;this.curveControlLine1=t.createLine(this.marker.x1,this.marker.y1,this.marker.curveX,this.marker.curveY,[["stroke","black"],["stroke-width",i.toString()],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"],["fill","transparent"],["pointer-events","none"]]),this.curveControlLine2=t.createLine(this.marker.x2,this.marker.y2,this.marker.curveX,this.marker.curveY,[["stroke","black"],["stroke-width",i.toString()],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"],["fill","transparent"],["pointer-events","none"]]),this._controlBox.insertBefore(this.curveControlLine1,this._controlBox.firstChild),this._controlBox.insertBefore(this.curveControlLine2,this._controlBox.firstChild)}adjustControlBox(){super.adjustControlBox();const t=1/this.zoomLevel;this.curveControlLine1&&this.curveControlLine2&&this.curveGrip&&(this.curveControlLine1.setAttribute("x1",this.marker.x1.toString()),this.curveControlLine1.setAttribute("y1",this.marker.y1.toString()),this.curveControlLine1.setAttribute("x2",this.marker.curveX.toString()),this.curveControlLine1.setAttribute("y2",this.marker.curveY.toString()),this.curveControlLine1.setAttribute("stroke-width",t.toString()),this.curveControlLine2.setAttribute("x1",this.marker.x2.toString()),this.curveControlLine2.setAttribute("y1",this.marker.y2.toString()),this.curveControlLine2.setAttribute("x2",this.marker.curveX.toString()),this.curveControlLine2.setAttribute("y2",this.marker.curveY.toString()),this.curveControlLine2.setAttribute("stroke-width",t.toString()),this.curveGrip.zoomLevel=this.zoomLevel)}addControlGrips(){super.addControlGrips(),this.curveGrip=this.createGrip(),this.curveGrip.zoomLevel=this.zoomLevel,this.positionGrips()}positionGrips(){if(super.positionGrips(),this.curveGrip){const t=this.curveGrip.gripSize;this.positionGrip(this.curveGrip.visual,this.marker.curveX-t/2,this.marker.curveY-t/2)}}}class J 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 selectedMarkerEditors(){return this._selectedMarkerEditors}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){if(this._zoomLevel=t,this._canvasContainer&&this._contentContainer&&this._mainCanvas&&this._overlayContainer){this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this.setEditingTargetSize();const t=Math.max(this._zoomLevel,1);this._canvasContainer.scrollTo({left:(this._mainCanvas.clientWidth*t-this._canvasContainer.clientWidth)/2,top:(this._mainCanvas.clientHeight*t-this._canvasContainer.clientHeight)/2}),this._overlayContainer.style.transform=`scale(${this._zoomLevel})`,this.adjustEditorsZoom()}}panTo(t){var i;null===(i=this._canvasContainer)||void 0===i||i.scrollBy({left:this.prevPanPoint.x-t.x,top:this.prevPanPoint.y-t.y}),this.prevPanPoint=t}get defaultFilter(){return this._defaultFilter}set defaultFilter(t){this._defaultFilter=t}constructor(){super(),this.width=0,this.height=0,this._targetWidth=-1,this._targetHeight=-1,this.mode="select",this._isInitialized=!1,this._selectedMarkerEditors=[],this._newMarkerOutline=t.createPath("",[["stroke","#333"],["stroke-width","0.5"],["stroke-dasharray","2 5"],["fill","rgba(200,200,200,0.5)"],["pointer-events","none"]]),this._targetImageLoaded=!1,this.markerEditors=new Map,this.editors=[],this._zoomLevel=1,this.prevPanPoint={x:0,y:0},this.undoRedoManager=new j,this._defs=[],this.touchPoints=0,this.isDragging=!1,this.isSelecting=!1,this.isPanning=!1,this._marqueeSelectOutline=t.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,I),this.markerEditors.set(S,I),this.markerEditors.set(l,G),this.markerEditors.set(c,P),this.markerEditors.set(p,$),this.markerEditors.set(v,H),this.markerEditors.set(k,O),this.markerEditors.set(_,O),this.markerEditors.set(C,O),this.markerEditors.set(d,U),this.markerEditors.set(u,G),this.markerEditors.set(y,R),this.markerEditors.set(f,X),this.markerEditors.set(w,X),this.markerEditors.set(b,X),this.markerEditors.set(E,Y),this.markerEditors.set(T,q),this.markerEditors.set(M,$),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.scaleMarkers=this.scaleMarkers.bind(this),this.adjustEditorsZoom=this.adjustEditorsZoom.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.addDefs=this.addDefs.bind(this),this.addDefaultFilterDefs=this.addDefaultFilterDefs.bind(this),this.attachShadow({mode:"open"})}connectedCallback(){this.dispatchEvent(new CustomEvent("areainit",{detail:{markerArea:this}})),i.addKeyAddListener(this.toggleLogo),this.createLayout(),this.addMainCanvas(),this.initOverlay(),this.attachEvents(),this._isInitialized=!0,void 0!==this.targetImage&&this.addTargetImage(),this.setMainCanvasSize(),this.addDefaultFilterDefs(),this.toggleLogo(),this.addUndoStep(),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 i,e,s;this.width=(null===(i=this._contentContainer)||void 0===i?void 0:i.clientWidth)||0,this.height=(null===(e=this._contentContainer)||void 0===e?void 0:e.clientHeight)||0,this._mainCanvas=document.createElementNS("http://www.w3.org/2000/svg","svg"),this._mainCanvas.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.setMainCanvasSize(),this._mainCanvas.style.gridColumnStart="1",this._mainCanvas.style.gridRowStart="1",this._mainCanvas.style.pointerEvents="auto",this._mainCanvas.style.margin="10px",this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this.addDefsToMainCanvas(),this._groupLayer=t.createGroup(),this._mainCanvas.appendChild(this._groupLayer),null===(s=this._canvasContainer)||void 0===s||s.appendChild(this._mainCanvas)}addDefsToMainCanvas(){var i;this._defsElement=t.createDefs(),null===(i=this._mainCanvas)||void 0===i||i.appendChild(this._defsElement),this._defsElement.append(...this._defs)}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,e=i.naturalWidth/i.naturalHeight,s=this._targetWidth>0?this._targetWidth:this._targetHeight>0?this._targetHeight*e:i.clientWidth>0?i.clientWidth:i.naturalWidth,r=this._targetHeight>0?this._targetHeight:this._targetWidth>0?this._targetWidth/e:i.clientHeight>0?i.clientHeight:i.naturalHeight;this._targetWidth=s,this._targetHeight=r}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.zoomLevel=this._zoomLevel})),this._editingTarget.src=this.targetImage.src,this._canvasContainer.insertBefore(this._editingTarget,this._mainCanvas))}addDefaultFilterDefs(){this.addDefs(...V.getDefaultFilterSet())}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";this.dispatchEvent(new CustomEvent("markercreating",{detail:{markerArea:this,markerEditor:this._currentMarkerEditor}}))}return this._currentMarkerEditor}addNewMarker(i,e){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const s=t.createGroup();this.defaultFilter&&e.applyDefaultFilter&&s.setAttribute("filter",this.defaultFilter),this._mainCanvas.appendChild(s);const r=new i({container:s,overlayContainer:this._overlayContentContainer,markerType:e});return r.zoomLevel=this.zoomLevel,r}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($)&&(null==i?void 0:i.is($))&&(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,i=!1){var e;this.editors.indexOf(t)>=0&&(this.dispatchEvent(new CustomEvent("markerbeforedelete",{detail:{markerArea:this,markerEditor:t}})),null===(e=this._mainCanvas)||void 0===e||e.removeChild(t.container),t.dispose(),this.editors.splice(this.editors.indexOf(t),1),this._selectedMarkerEditors.splice(this._selectedMarkerEditors.indexOf(t),1),i||this.addUndoStep(),this.dispatchEvent(new CustomEvent("markerdelete",{detail:{markerArea:this,markerEditor:t}})))}deleteSelectedMarkers(){const t=[...this._selectedMarkerEditors];t.forEach(((i,e)=>this.deleteMarker(i,e!==t.length-1))),this.hideMarqueeSelectOutline()}setCurrentEditor(t){this._currentMarkerEditor!==t&&void 0!==this._currentMarkerEditor&&this.deselectEditor(this._currentMarkerEditor),this._currentMarkerEditor=t,void 0===this._currentMarkerEditor||this._currentMarkerEditor.isSelected||"new"!==this._currentMarkerEditor.state&&(this.selectEditor(this._currentMarkerEditor),this._currentMarkerEditor.select(!1))}selectEditor(t){this._selectedMarkerEditors.indexOf(t)<0&&(this._selectedMarkerEditors.length>0&&this._selectedMarkerEditors[0].select(!0),this._selectedMarkerEditors.push(t),t.select(!0),this.dispatchEvent(new CustomEvent("markerselect",{detail:{markerArea:this,markerEditor:t}})))}deselectEditor(t){const i=this._selectedMarkerEditors.length;if(t&&"creating"===t.state&&t.deselect(),i>0){const i=null!=t?t:this._selectedMarkerEditors[this._selectedMarkerEditors.length-1];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())}this.dispatchEvent(new CustomEvent("markerdeselect",{detail:{markerArea:this,markerEditor:i}}))}}onCanvasPointerDown(i){var e;if(this._manipulationStartX=i.clientX,this._manipulationStartY=i.clientY,this.touchPoints++,1===this.touchPoints&&(this.leadPointerId=i.pointerId),"touch"===i.pointerType&&1===this.touchPoints||"touch"!==i.pointerType&&0===i.button&&!i.altKey)if(void 0===this._currentMarkerEditor||"new"!==this._currentMarkerEditor.state&&"creating"!==this._currentMarkerEditor.state){if("select"===this.mode){const e=t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel),s=this.editors.find((t=>t.ownsTarget(i.target)));void 0!==s?(this.isDragging=!0,i.shiftKey?(this.selectEditor(s),this.initializeMarqueeSelection(e)):s.isSelected||(this.deselectEditor(),this.setCurrentEditor(s)),this._selectedMarkerEditors.forEach((t=>{var s;return t.pointerDown(e,null!==(s=i.target)&&void 0!==s?s:void 0,i)}))):i.target===this._marqueeSelectOutline&&this._selectedMarkerEditors.length>1?(this.isDragging=!0,this._selectedMarkerEditors.forEach((t=>{var s;return t.pointerDown(e,null!==(s=i.target)&&void 0!==s?s:void 0,i)}))):(this.setCurrentEditor(),this.deselectEditor(),this.isSelecting=!0,this.isDragging=!0,this.initializeMarqueeSelection(e),this.prevPanPoint={x:i.clientX,y:i.clientY})}}else this.isDragging=!0,this._currentMarkerEditor.pointerDown(t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel),null!==(e=i.target)&&void 0!==e?e:void 0,i);else("touch"!==i.pointerType&&(0===i.button&&i.altKey||1===i.button)||"touch"===i.pointerType&&2===this.touchPoints&&i.pointerId===this.leadPointerId)&&(this.isDragging=!0,this.isPanning=!0,this.prevPanPoint={x:i.clientX,y:i.clientY},this._mainCanvas&&(this._mainCanvas.style.cursor="grabbing"))}initializeMarqueeSelection(i){this._marqueeSelectRect.x=i.x,this._marqueeSelectRect.y=i.y,this._marqueeSelectRect.width=0,this._marqueeSelectRect.height=0,t.setAttributes(this._marqueeSelectOutline,[["x",i.x.toString()],["y",i.y.toString()],["width","0"],["height","0"]]),this._groupLayer&&!this._groupLayer.contains(this._marqueeSelectOutline)&&this._groupLayer.appendChild(this._marqueeSelectOutline)}onCanvasDblClick(i){var e;if("select"===this.mode){const s=this.editors.find((t=>t.ownsTarget(i.target)));void 0!==s&&s!==this._currentMarkerEditor&&this.setCurrentEditor(s),void 0!==this._currentMarkerEditor?this._currentMarkerEditor.dblClick(t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel),null!==(e=i.target)&&void 0!==e?e:void 0,i):this.setCurrentEditor()}}onPointerMove(i){var e;if("touch"===i.pointerType&&1===this.touchPoints||"touch"!==i.pointerType&&this.isDragging&&!i.altKey){const s=t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel);if(void 0!==this._currentMarkerEditor||this._selectedMarkerEditors.length>0)void 0!==this._currentMarkerEditor&&"edit"===this._currentMarkerEditor.state||i.preventDefault(),void 0!==this._currentMarkerEditor||this._selectedMarkerEditors.length>0?(this.showOutline(s),this._selectedMarkerEditors.length>0?this._selectedMarkerEditors.forEach((t=>t.manipulate(s,i))):null===(e=this._currentMarkerEditor)||void 0===e||e.manipulate(s,i)):this.zoomLevel>1&&this.panTo({x:i.clientX,y:i.clientY}),this.adjustMarqueeSelectOutline();else if(this.isSelecting){const e=t.clientToLocalCoordinates(this._mainCanvas,this._manipulationStartX,this._manipulationStartY,this.zoomLevel);this._marqueeSelectRect.x=Math.min(s.x,e.x),this._marqueeSelectRect.y=Math.min(s.y,e.y),this._marqueeSelectRect.width=Math.abs(i.clientX-this._manipulationStartX)/this.zoomLevel,this._marqueeSelectRect.height=Math.abs(i.clientY-this._manipulationStartY)/this.zoomLevel,t.setAttributes(this._marqueeSelectOutline,[["x",`${this._marqueeSelectRect.x}`],["y",`${this._marqueeSelectRect.y}`],["width",`${this._marqueeSelectRect.width}`],["height",`${this._marqueeSelectRect.height}`]])}}else("touch"!==i.pointerType&&this.isPanning||"touch"===i.pointerType&&2===this.touchPoints&&i.pointerId===this.leadPointerId)&&this.panTo({x:i.clientX,y:i.clientY})}showOutline(i){if(this._currentMarkerEditor&&"drop"===this._currentMarkerEditor.creationStyle&&"new"===this._currentMarkerEditor.state){void 0===this._mainCanvas||this._mainCanvas.contains(this._newMarkerOutline)||this._mainCanvas.appendChild(this._newMarkerOutline);const e=this._currentMarkerEditor.marker.defaultSize;t.setAttributes(this._newMarkerOutline,[["d",this._currentMarkerEditor.marker.getOutline()]]),this._newMarkerOutline.style.transform=`translate(${i.x-e.width/2}px, ${i.y-e.height/2}px)`}}hideOutline(){var t;(null===(t=this._mainCanvas)||void 0===t?void 0:t.contains(this._newMarkerOutline))&&this._mainCanvas.removeChild(this._newMarkerOutline)}onPointerUp(i){var e;if(this.touchPoints>0&&(this.touchPoints--,0===this.touchPoints&&(this.leadPointerId=void 0)),0===this.touchPoints)if(this.isDragging&&(void 0!==this._currentMarkerEditor||this._selectedMarkerEditors.length>0)){const s=t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel);this._selectedMarkerEditors.length>1?(this._selectedMarkerEditors.forEach((t=>t.pointerUp(s,i))),this.adjustMarqueeSelectOutline()):null===(e=this._currentMarkerEditor)||void 0===e||e.pointerUp(s,i),this.hideOutline(),this.addUndoStep()}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.isPanning=!1,this._mainCanvas&&(this._mainCanvas.style.cursor="default")}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 i=Number.MAX_VALUE,e=Number.MAX_VALUE,s=0,r=0;this._selectedMarkerEditors.forEach((t=>{const a=t.marker.getBBox();i=Math.min(i,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=i,this._marqueeSelectRect.y=e,this._marqueeSelectRect.width=s-i,this._marqueeSelectRect.height=r-e,t.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,defaultFilter:this.defaultFilter,markers:this.editors.map((t=>t.getState()))};return JSON.parse(JSON.stringify(t))}restoreState(t,i=!0){if(!this._targetImageLoaded)return void(this._stateToRestore=t);this._stateToRestore=void 0;const e=JSON.parse(JSON.stringify(t));if(this.editors.splice(0),this._mainCanvas&&this._groupLayer){for(this.hideMarqueeSelectOutline(),this.deselectEditor();this._mainCanvas.lastChild;)this._mainCanvas.removeChild(this._mainCanvas.lastChild);this.addDefsToMainCanvas(),this._mainCanvas.appendChild(this._groupLayer)}void 0===this.defaultFilter&&e.defaultFilter&&(this.defaultFilter=e.defaultFilter),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),i&&this.addUndoStep(!0),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)}adjustEditorsZoom(){this.editors.forEach((t=>{t.zoomLevel=this._zoomLevel}))}toggleLogo(){i.isLicensed("MJS3E")||i.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",this._logoUI.style.opacity="0.5";const e=this._logoUI;this._logoUI.addEventListener("mouseenter",(()=>{e.style.opacity="1"})),this._logoUI.addEventListener("mouseleave",(()=>{e.style.opacity="0.5"}));const s=document.createElement("a");s.href="https://markerjs.com/?utm_source=markerjs3&utm_medium=logo&utm_content=marker_area",s.target="_blank",s.innerHTML=N,s.title="Powered by marker.js",s.style.display="grid",s.style.alignItems="center",s.style.justifyItems="center",s.style.padding="3px",s.style.width="20px",s.style.height="20px",s.style.cursor="pointer",this._logoUI.appendChild(s),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(t=!1){if(void 0===this._currentMarkerEditor||"edit"!==this._currentMarkerEditor.state){const i=this.getState(),e=this.undoRedoManager.getLastUndoStep();if(t||!e||e.width===i.width&&e.height===i.height){this.undoRedoManager.addUndoStep(i)&&this.dispatchEvent(new CustomEvent("areastatechange",{detail:{markerArea:this}}))}else this.undoRedoManager.replaceLastUndoStep(i),this.dispatchEvent(new CustomEvent("areastatechange",{detail:{markerArea:this}}))}}undo(){this.undoStep()}undoStep(){const t=this.undoRedoManager.undo();void 0!==t&&this.restoreState(t,!1)}redo(){this.redoStep()}redoStep(){const t=this.undoRedoManager.redo();void 0!==t&&(this.restoreState(t,!1),this.dispatchEvent(new CustomEvent("areastatechange",{detail:{markerArea:this}})))}addDefs(...t){this._defs.push(...t),this._defsElement&&this._defsElement.append(...t)}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",J);class Z 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){if(this._zoomLevel=t,this._canvasContainer&&this._contentContainer&&this._mainCanvas){this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this.setEditingTargetSize();const t=Math.max(this._zoomLevel,1);this._canvasContainer.scrollTo({left:(this._mainCanvas.clientWidth*t-this._canvasContainer.clientWidth)/2,top:(this._mainCanvas.clientHeight*t-this._canvasContainer.clientHeight)/2})}}get defaultFilter(){return this._defaultFilter}set defaultFilter(t){this._defaultFilter=t}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._defs=[],this.prevPanPoint={x:0,y:0},this.touchPoints=0,this.markerTypes=[o,l,d,u,c,p,v,k,_,y,S,C,f,w,b,E,T,M],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.attachMarkerEvents=this.attachMarkerEvents.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.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onPointerOut=this.onPointerOut.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.addDefs=this.addDefs.bind(this),this.addDefaultFilterDefs=this.addDefaultFilterDefs.bind(this),this.attachShadow({mode:"open"})}connectedCallback(){this.dispatchEvent(new CustomEvent("viewinit",{detail:{markerView:this}})),i.addKeyAddListener(this.toggleLogo),this.createLayout(),this.addMainCanvas(),this.attachEvents(),this._isInitialized=!0,void 0!==this.targetImage&&this.addTargetImage(),this.setMainCanvasSize(),this.addDefaultFilterDefs(),this.toggleLogo(),this.dispatchEvent(new CustomEvent("viewshow",{detail:{markerView:this}}))}disconnectedCallback(){this.detachEvents()}createLayout(){var t;this.style.display="flex",this.style.width=""!==this.style.width?this.style.width:"100%",this.style.height=""!==this.style.height?this.style.height:"100%",this.style.position="relative",this._contentContainer=document.createElement("div"),this._contentContainer.style.display="flex",this._contentContainer.style.position="relative",this._contentContainer.style.flexGrow="2",this._contentContainer.style.flexShrink="1",this._contentContainer.style.overflow="hidden",this._canvasContainer=document.createElement("div"),this._canvasContainer.style.touchAction="pinch-zoom",this._canvasContainer.className="canvas-container",this._canvasContainer.style.display="grid",this._canvasContainer.style.gridTemplateColumns="1fr",this._canvasContainer.style.flexGrow="2",this._canvasContainer.style.flexShrink="2",this._canvasContainer.style.justifyItems="center",this._canvasContainer.style.alignItems="center",this._canvasContainer.style.overflow="auto",this._contentContainer.appendChild(this._canvasContainer),null===(t=this.shadowRoot)||void 0===t||t.appendChild(this._contentContainer)}addMainCanvas(){var i,e,s;this.width=(null===(i=this._contentContainer)||void 0===i?void 0:i.clientWidth)||0,this.height=(null===(e=this._contentContainer)||void 0===e?void 0:e.clientHeight)||0,this._mainCanvas=document.createElementNS("http://www.w3.org/2000/svg","svg"),this._mainCanvas.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.setMainCanvasSize(),this._mainCanvas.style.gridColumnStart="1",this._mainCanvas.style.gridRowStart="1",this._mainCanvas.style.pointerEvents="auto",this._mainCanvas.style.margin="10px",this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this.addDefsToMainCanvas(),this._groupLayer=t.createGroup(),this._mainCanvas.appendChild(this._groupLayer),null===(s=this._canvasContainer)||void 0===s||s.appendChild(this._mainCanvas)}addDefsToMainCanvas(){var i;this._defsElement=t.createDefs(),null===(i=this._mainCanvas)||void 0===i||i.appendChild(this._defsElement),this._defsElement.append(...this._defs)}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,e=i.naturalWidth/i.naturalHeight,s=this._targetWidth>0?this._targetWidth:this._targetHeight>0?this._targetHeight*e:i.clientWidth>0?i.clientWidth:i.naturalWidth,r=this._targetHeight>0?this._targetHeight:this._targetWidth>0?this._targetWidth/e:i.clientHeight>0?i.clientHeight:i.naturalHeight;this._targetWidth=s,this._targetHeight=r}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.zoomLevel=this._zoomLevel})),this._editingTarget.src=this.targetImage.src,this._canvasContainer.insertBefore(this._editingTarget,this._mainCanvas))}addDefaultFilterDefs(){this.addDefs(...V.getDefaultFilterSet())}addNewMarker(i){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const e=t.createGroup();this.defaultFilter&&i.applyDefaultFilter&&e.setAttribute("filter",this.defaultFilter),this._mainCanvas.appendChild(e);const s=new i(e);return this.attachMarkerEvents(s),s}attachMarkerEvents(t){t.container.addEventListener("click",(()=>{this.dispatchEvent(new CustomEvent("markerclick",{detail:{marker:t,markerView:this}}))})),t.container.addEventListener("pointerover",(()=>{this.dispatchEvent(new CustomEvent("markerover",{detail:{marker:t,markerView:this}}))})),t.container.addEventListener("pointerdown",(()=>{this.dispatchEvent(new CustomEvent("markerpointerdown",{detail:{marker:t,markerView:this}}))})),t.container.addEventListener("pointermove",(()=>{this.dispatchEvent(new CustomEvent("markerpointermove",{detail:{marker:t,markerView:this}}))})),t.container.addEventListener("pointerup",(()=>{this.dispatchEvent(new CustomEvent("markerpointerup",{detail:{marker:t,markerView:this}}))})),t.container.addEventListener("pointerenter",(()=>{this.dispatchEvent(new CustomEvent("markerpointerenter",{detail:{marker:t,markerView:this}}))})),t.container.addEventListener("pointerleave",(()=>{this.dispatchEvent(new CustomEvent("markerpointerleave",{detail:{marker:t,markerView:this}}))}))}attachEvents(){var t,i;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())),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)}detachEvents(){this.detachWindowEvents()}detachWindowEvents(){}onCanvasPointerDown(t){this.touchPoints++,1===this.touchPoints&&(this.leadPointerId=t.pointerId,this.prevPanPoint={x:t.clientX,y:t.clientY},this._mainCanvas&&(this._mainCanvas.style.cursor="grabbing"))}onPointerMove(t){this.touchPoints>0&&this.leadPointerId===t.pointerId&&this.panTo({x:t.clientX,y:t.clientY})}onPointerUp(){this.touchPoints>0&&(this.touchPoints--,0===this.touchPoints&&(this.leadPointerId=void 0),this._mainCanvas&&(this._mainCanvas.style.cursor="default"))}onPointerOut(){this.touchPoints>0&&this.touchPoints--}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);this.addDefsToMainCanvas(),void 0===this.defaultFilter&&e.defaultFilter&&(this.defaultFilter=e.defaultFilter),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)}))}panTo(t){var i;null===(i=this._canvasContainer)||void 0===i||i.scrollBy({left:this.prevPanPoint.x-t.x,top:this.prevPanPoint.y-t.y}),this.prevPanPoint=t}toggleLogo(){i.isLicensed("MJS3V")||i.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",this._logoUI.style.opacity="0.5";const e=this._logoUI;this._logoUI.addEventListener("mouseenter",(()=>{e.style.opacity="1"})),this._logoUI.addEventListener("mouseleave",(()=>{e.style.opacity="0.5"}));const s=document.createElement("a");s.href="https://markerjs.com/?utm_source=markerjs3&utm_medium=logo&utm_content=marker_view",s.target="_blank",s.innerHTML=N,s.title="Powered by marker.js",s.style.display="grid",s.style.alignItems="center",s.style.justifyItems="center",s.style.padding="3px",s.style.width="20px",s.style.height="20px",s.style.cursor="pointer",this._logoUI.appendChild(s),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")}addDefs(...t){this._defs.push(...t),this._defsElement&&this._defsElement.append(...t)}addEventListener(t,i,e){super.addEventListener(t,i,e)}removeEventListener(t,i,e){super.removeEventListener(t,i,e)}}window&&window.customElements&&void 0===window.customElements.get("mjs-marker-view")&&window.customElements.define("mjs-marker-view",Z);class K{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()}get defaultFilter(){return this._defaultFilter}set defaultFilter(t){this._defaultFilter=t}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._defs=[],this.markerTypes=[o,l,d,u,c,p,v,k,_,y,S,C,f,w,b,E,T,M],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),this.addDefs=this.addDefs.bind(this),this.addDefaultFilterDefs=this.addDefaultFilterDefs.bind(this)}init(){this.addMainCanvas(),this._isInitialized=!0,void 0!==this.targetImage&&this.addTargetImage(),this.setMainCanvasSize(),this.addDefaultFilterDefs()}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.addDefsToMainCanvas(),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)}addDefsToMainCanvas(){var i;this._defsElement=t.createDefs(),null===(i=this._mainCanvas)||void 0===i||i.appendChild(this._defsElement),this._defsElement.append(...this._defs)}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,e=i.naturalWidth/i.naturalHeight,s=this._targetWidth>0?this._targetWidth:this._targetHeight>0?this._targetHeight*e:i.naturalWidth,r=this._targetHeight>0?this._targetHeight:this._targetWidth>0?this._targetWidth/e:i.naturalHeight;this._targetWidth=s,this._targetHeight=r}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))}addDefaultFilterDefs(){this.addDefs(...V.getDefaultFilterSet())}addNewMarker(i){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const e=t.createGroup();return this.defaultFilter&&i.applyDefaultFilter&&e.setAttribute("filter",this.defaultFilter),this._mainCanvas.appendChild(e),new i(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);this.addDefsToMainCanvas(),void 0===this.defaultFilter&&e.defaultFilter&&(this.defaultFilter=e.defaultFilter),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 g(this,void 0,void 0,(function*(){if(!this.naturalSize&&this.targetWidth<=0&&this.targetHeight<=0&&(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()),yield new Promise((t=>setTimeout(t,200))),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 u=new Blob([o],{type:"image/svg+xml"}),c=l.createObjectURL(u);let p="";for(d.onload=()=>{n.drawImage(d,0,0),l.revokeObjectURL(c),p=a.toDataURL(this.imageType,this.imageQuality)},d.src=c,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}))}addDefs(...t){this._defs.push(...t),this._defsElement&&this._defsElement.append(...t)}}export{i as Activator,d as ArrowMarker,U as ArrowMarkerEditor,y as CalloutMarker,R as CalloutMarkerEditor,E as CaptionFrameMarker,Y as CaptionFrameMarkerEditor,w as CheckImageMarker,k as CoverMarker,T as CurveMarker,q as CurveMarkerEditor,f as CustomImageMarker,S as EllipseFrameMarker,C as EllipseMarker,o as FrameMarker,p as FreehandMarker,$ as FreehandMarkerEditor,B as Grip,_ as HighlightMarker,M as HighlighterMarker,x as ImageMarkerBase,X as ImageMarkerEditor,l as LineMarker,n as LinearMarkerBase,G as LinearMarkerEditor,J as MarkerArea,e as MarkerBase,z as MarkerBaseEditor,Z as MarkerView,u as MeasurementMarker,c as PolygonMarker,P as PolygonMarkerEditor,r as RectangularBoxMarkerBase,K as Renderer,L as ResizeGrip,W as RotateGrip,h as ShapeMarkerBase,O as ShapeMarkerEditor,a as ShapeOutlineMarkerBase,I as ShapeOutlineMarkerEditor,V as SvgFilters,t as SvgHelper,m as TextBlock,F as TextBlockEditor,v as TextMarker,H as TextMarkerEditor,b as XImageMarker};
+class t{static createDefs(){return document.createElementNS("http://www.w3.org/2000/svg","defs")}static setAttributes(t,i){for(const[e,s]of i)t.setAttribute(e,s)}static createRect(i,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","rect");return r.setAttribute("width",i.toString()),r.setAttribute("height",e.toString()),s&&t.setAttributes(r,s),r}static createLine(i,e,s,r,a){const h=document.createElementNS("http://www.w3.org/2000/svg","line");return h.setAttribute("x1",i.toString()),h.setAttribute("y1",e.toString()),h.setAttribute("x2",s.toString()),h.setAttribute("y2",r.toString()),a&&t.setAttributes(h,a),h}static createPolygon(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","polygon");return s.setAttribute("points",i),e&&t.setAttributes(s,e),s}static createCircle(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","circle");return s.setAttribute("cx",(i/2).toString()),s.setAttribute("cy",(i/2).toString()),s.setAttribute("r",i.toString()),e&&t.setAttributes(s,e),s}static createEllipse(i,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","ellipse");return r.setAttribute("cx",(i/2).toString()),r.setAttribute("cy",(e/2).toString()),r.setAttribute("rx",(i/2).toString()),r.setAttribute("ry",(e/2).toString()),s&&t.setAttributes(r,s),r}static createGroup(i){const e=document.createElementNS("http://www.w3.org/2000/svg","g");return i&&t.setAttributes(e,i),e}static createTransform(){return document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGTransform()}static createMarker(i,e,s,r,a,h,o){const n=document.createElementNS("http://www.w3.org/2000/svg","marker");return t.setAttributes(n,[["id",i],["orient",e],["markerWidth",s.toString()],["markerHeight",r.toString()],["refX",a.toString()],["refY",h.toString()]]),n.appendChild(o),n}static createText(i){const e=document.createElementNS("http://www.w3.org/2000/svg","text");return e.setAttribute("x","0"),e.setAttribute("y","0"),i&&t.setAttributes(e,i),e}static createTSpan(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","tspan");return s.textContent=i,e&&t.setAttributes(s,e),s}static createImage(i){const e=document.createElementNS("http://www.w3.org/2000/svg","image");return i&&t.setAttributes(e,i),e}static createPoint(t,i){const e=document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGPoint();return e.x=t,e.y=i,e}static createPath(i,e){const s=document.createElementNS("http://www.w3.org/2000/svg","path");return s.setAttribute("d",i),e&&t.setAttributes(s,e),s}static createForeignObject(i){const e=document.createElementNS("http://www.w3.org/2000/svg","foreignObject");return e.setAttribute("x","0"),e.setAttribute("y","0"),i&&t.setAttributes(e,i),e}static clientToLocalCoordinates(t,i,e,s=1){if(t){const r=t.getBoundingClientRect();return{x:(i-r.left)/s,y:(e-r.top)/s}}return{x:i,y:e}}static createSvgFromString(t){const i=document.createElementNS("http://www.w3.org/2000/svg","svg");return i.innerHTML=t,i}static createFilter(i,e,s){const r=document.createElementNS("http://www.w3.org/2000/svg","filter");return r.id=i,e&&t.setAttributes(r,e),s&&(r.innerHTML=s),r}}class i{static addKey(t,e){i.keys.set(t,e),i.keyAddListeners.forEach((t=>{t()}))}static addKeyAddListener(t){i.keyAddListeners.push(t)}static removeKeyAddListener(t){const e=i.keyAddListeners.indexOf(t);e>-1&&i.keyAddListeners.splice(e,1)}static isLicensed(t){if(i.keys.has(t)){const e=new RegExp(`${t}-[A-Z][0-9]{3}-[A-Z][0-9]{3}-[0-9]{4}`,"i"),s=i.keys.get(t);return void 0!==s&&e.test(s)}return!1}}i.keys=new Map,i.keyAddListeners=new Array;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",e.applyDefaultFilter=!0;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(i){this._visual=i;const e=t.createTransform();this._visual.transform.baseVal.appendItem(e)}constructor(i){super(i),this.left=0,this.top=0,this.width=0,this.height=0,this.rotationAngle=0,this.rotatePoint=this.rotatePoint.bind(this),this.unrotatePoint=this.unrotatePoint.bind(this),this.container.transform.baseVal.appendItem(t.createTransform())}moveVisual(t){this.visual&&(this.visual.style.transform=`translate(${t.x}px, ${t.y}px)`)}setSize(){this.moveVisual({x:this.left,y:this.top})}rotate(t){if(Math.abs(t.x-this.centerX)>.1){const i=Math.sign(t.x-this.centerX);this.rotationAngle=180*Math.atan((t.y-this.centerY)/(t.x-this.centerX))/Math.PI+90*i,this.applyRotation()}}applyRotation(){const t=this.container.transform.baseVal.getItem(0);t.setRotate(this.rotationAngle,this.centerX,this.centerY),this.container.transform.baseVal.replaceItem(t,0)}rotatePoint(i){if(0===this.rotationAngle)return i;const e=this.container.getCTM();if(null===e)return i;let s=t.createPoint(i.x,i.y);s=s.matrixTransform(e);return{x:s.x,y:s.y}}unrotatePoint(i){if(0===this.rotationAngle)return i;let e=this.container.getCTM();if(null===e)return i;e=e.inverse();let s=t.createPoint(i.x,i.y);s=s.matrixTransform(e);return{x:s.x,y:s.y}}getOutline(){return`M 0 0 \n    H ${this.defaultSize} \n    V ${this.defaultSize} \n    H 0 \n    V 0 Z`}getState(){return Object.assign({left:this.left,top:this.top,width:this.width,height:this.height,rotationAngle:this.rotationAngle,visualTransformMatrix: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&&t.setAttributes(this.visual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visual&&t.setAttributes(this.visual,[["stroke-width",this._strokeWidth.toString()]])}applyStrokeDasharray(){this.visual&&t.setAttributes(this.visual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.createVisual=this.createVisual.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual)}getPath(t=this.width,i=this.height){return"M0,0"}getOutline(){return this.getPath(this.defaultSize.width,this.defaultSize.height)}createVisual(){this.visual=t.createPath(this.getPath(),[["fill","transparent"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]]),this.addMarkerVisualToContainer(this.visual)}adjustVisual(){this.visual&&t.setAttributes(this.visual,[["d",this.getPath()],["fill","transparent"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray],["opacity",this._opacity.toString()]])}setSize(){super.setSize(),this.visual&&t.setAttributes(this.visual,[["d",this.getPath()]])}restoreState(t){this.createVisual(),super.restoreState(t),this.adjustVisual()}scale(t,i){super.scale(t,i),this.strokeWidth*=(t+i)/2,this.setSize()}}a.title="Shape outline marker";class h extends a{applyFillColor(){this.visual&&t.setAttributes(this.visual,[["fill",this._fillColor]])}constructor(t){super(t),this._fillColor="transparent",this.createVisual=this.createVisual.bind(this)}createVisual(){super.createVisual(),this.visual&&t.setAttributes(this.visual,[["fill",this._fillColor]])}getState(){return Object.assign({fillColor:this._fillColor},super.getState())}restoreState(t){const i=t;super.restoreState(t),this.fillColor=i.fillColor,this.setSize()}}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.lineVisual&&t.setAttributes(this.lineVisual,[["stroke",this._strokeColor]]),this.startTerminatorVisual&&this.endTerminatorVisual&&(t.setAttributes(this.startTerminatorVisual,[["stroke",this._strokeColor],["fill",this._strokeColor]]),t.setAttributes(this.endTerminatorVisual,[["stroke",this._strokeColor],["fill",this._strokeColor]]))}applyStrokeWidth(){this.lineVisual&&t.setAttributes(this.lineVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&t.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.lineVisual&&t.setAttributes(this.lineVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["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&&t!==this.lineVisual&&t!==this.startTerminatorVisual&&t!==this.endTerminatorVisual)}getPath(){return"M0,0"}getStartTerminatorPath(){return""}getEndTerminatorPath(){return""}createVisual(){this.visual=t.createGroup(),this.selectorVisual=t.createPath(this.getPath(),[["stroke","transparent"],["fill","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]),this.visibleVisual=t.createGroup([["opacity",this.opacity.toString()]]),this.lineVisual=t.createPath(this.getPath(),[["stroke",this.strokeColor],["fill",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-linejoin","round"],["stroke-dasharray",this.strokeDasharray.toString()]]),this.startTerminatorVisual=t.createPath(this.getStartTerminatorPath(),[["stroke",this.strokeColor],["fill",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-linejoin","round"]]),this.endTerminatorVisual=t.createPath(this.getEndTerminatorPath(),[["stroke",this.strokeColor],["fill",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-linejoin","round"]]),this.visibleVisual.appendChild(this.lineVisual),this.visibleVisual.appendChild(this.startTerminatorVisual),this.visibleVisual.appendChild(this.endTerminatorVisual),this.visual.appendChild(this.selectorVisual),this.visual.appendChild(this.visibleVisual),this.addMarkerVisualToContainer(this.visual)}adjustVisual(){this.selectorVisual&&this.visibleVisual&&this.lineVisual&&this.startTerminatorVisual&&this.endTerminatorVisual&&(t.setAttributes(this.selectorVisual,[["d",this.getPath()]]),t.setAttributes(this.visibleVisual,[["opacity",this.opacity.toString()]]),t.setAttributes(this.lineVisual,[["d",this.getPath()],["stroke",this.strokeColor],["fill",this.fillColor],["stroke-width",this.strokeWidth.toString()],["stroke-dasharray",this.strokeDasharray.toString()]]),t.setAttributes(this.startTerminatorVisual,[["d",this.getStartTerminatorPath()],["stroke",this.strokeColor],["fill",this.strokeColor],["stroke-width",this.strokeWidth.toString()]]),t.setAttributes(this.endTerminatorVisual,[["d",this.getEndTerminatorPath()],["stroke",this.strokeColor],["fill",this.strokeColor],["stroke-width",this.strokeWidth.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",this.getArrowProperties=this.getArrowProperties.bind(this),this.getStartTerminatorPath=this.getStartTerminatorPath.bind(this),this.getEndTerminatorPath=this.getEndTerminatorPath.bind(this)}getArrowProperties(){const t=10+2*this.strokeWidth,i=Math.min(Math.max(5,2*this.strokeWidth),this.strokeWidth+5),e=this.x2-this.x1,s=this.y2-this.y1;return{arrowHeight:t,arrowDipFactor:.7,angle:Math.atan2(s,e),arrowWidth:i}}getStartTerminatorPath(){const{arrowHeight:t,arrowDipFactor:i,angle:e,arrowWidth:s}=this.getArrowProperties(),r=this.x1+t*i*Math.cos(e),a=this.y1+t*i*Math.sin(e),h=this.x1+t*Math.cos(e),o=this.y1+t*Math.sin(e),n=h+s*Math.sin(e),l=o-s*Math.cos(e),d=h-s*Math.sin(e),u=o+s*Math.cos(e);return"start"===this.arrowType||"both"===this.arrowType?`M ${r} ${a}\n    L ${n} ${l} L ${this.x1} ${this.y1} L ${d} ${u} L ${r} ${a}\n    L ${r} ${a}`:""}getEndTerminatorPath(){const{arrowHeight:t,arrowDipFactor:i,angle:e,arrowWidth:s}=this.getArrowProperties(),r=this.x2-t*i*Math.cos(e),a=this.y2-t*i*Math.sin(e),h=this.x2-t*Math.cos(e),o=this.y2-t*Math.sin(e),n=h+s*Math.sin(e),l=o-s*Math.cos(e),d=h-s*Math.sin(e),u=o+s*Math.cos(e);return"end"===this.arrowType||"both"===this.arrowType?`M ${r} ${a} \n    L ${n} ${l} L ${this.x2} ${this.y2} L ${d} ${u} L ${r} ${a} Z`:""}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 u extends l{constructor(t){super(t)}getStartTerminatorPath(){const{tipLength:t,angle:i}=this.getTerminatorProperties();return`M ${this.x1+t*Math.sin(i)} ${this.y1-t*Math.cos(i)}\n      L ${this.x1-t*Math.sin(i)} ${this.y1+t*Math.cos(i)}`}getEndTerminatorPath(){const{tipLength:t,angle:i}=this.getTerminatorProperties();return`M ${this.x2+t*Math.sin(i)} ${this.y2-t*Math.cos(i)} L ${this.x2-t*Math.sin(i)} ${this.y2+t*Math.cos(i)}`}getTerminatorProperties(){const t=5+3*this.strokeWidth,i=this.x2-this.x1,e=this.y2-this.y1;return{tipLength:t,angle:Math.atan2(e,i)}}applyStrokeWidth(){super.applyStrokeWidth(),this.adjustVisual()}}u.typeName="MeasurementMarker",u.title="Measurement marker";class c extends e{applyStrokeColor(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke",this._strokeColor]])}applyFillColor(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["fill",this._fillColor]])}applyStrokeWidth(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&t.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.points=[],this.selectorVisualLines=[],this.strokeColor="#ff0000",this.strokeWidth=3,this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.getState=this.getState.bind(this),this.restoreState=this.restoreState.bind(this),this.scale=this.scale.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual&&t!==this.selectorVisual&&t!==this.visibleVisual&&!this.selectorVisualLines.some((i=>i===t)))}getPath(){return this.points.length>1?this.points.map(((t,i)=>`${0===i?"M":"L"}${t.x},${t.y}`)).join(" ")+("creating"!==this.stage?" Z":""):"M0,0"}createVisual(){this.visual=t.createGroup(),this.visibleVisual=t.createPath(this.getPath(),[["stroke",this.strokeColor],["fill",this.fillColor],["stroke-width",this.strokeWidth.toString()],["opacity",this.opacity.toString()]]),this.visual.appendChild(this.visibleVisual),this.createSelectorVisual(),this.addMarkerVisualToContainer(this.visual)}createSelectorVisual(){this.visual&&(this.selectorVisual=t.createGroup(),this.visual.appendChild(this.selectorVisual),this.points.forEach((()=>{this.addSelectorLine()})))}adjustVisual(){this.selectorVisual&&this.visibleVisual&&(t.setAttributes(this.visibleVisual,[["d",this.getPath()],["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-dasharray",this.strokeDasharray.toString()],["fill",this.fillColor],["opacity",this.opacity.toString()]]),this.adjustSelectorVisual())}adjustSelectorVisual(){if(this.selectorVisual){const i=this.points.length-this.selectorVisualLines.length;if(i>0)for(let t=0;t<i;t++)this.addSelectorLine();else if(i<0)for(let t=0;t<-i;t++)this.selectorVisual.removeChild(this.selectorVisualLines.pop());this.selectorVisualLines.forEach(((i,e)=>{t.setAttributes(i,[["x1",this.points[e].x.toString()],["y1",this.points[e].y.toString()],["x2",this.points[(e+1)%this.points.length].x.toString()],["y2",this.points[(e+1)%this.points.length].y.toString()]])}))}}addSelectorLine(){const i=t.createLine(0,0,0,0,[["stroke","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]);this.selectorVisual.appendChild(i),this.selectorVisualLines.push(i)}getState(){const t=Object.assign({points:this.points,fillColor:this.fillColor},super.getState());return t.typeName=c.typeName,t}restoreState(t){super.restoreState(t);const i=t;this.points=i.points,void 0!==i.fillColor&&(this.fillColor=i.fillColor),this.createVisual(),this.adjustVisual()}scale(t,i){super.scale(t,i),this.points.forEach((e=>{e.x=e.x*t,e.y=e.y*i})),this.adjustVisual()}}c.typeName="PolygonMarker",c.title="Polygon marker";class p extends e{applyStrokeColor(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-width",this._strokeWidth.toString()]]),this.selectorVisual&&t.setAttributes(this.selectorVisual,[["stroke-width",Math.max(this._strokeWidth,8).toString()]])}applyStrokeDasharray(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visibleVisual&&t.setAttributes(this.visibleVisual,[["opacity",this._opacity.toString()]])}constructor(t){super(t),this.points=[],this.strokeColor="#ff0000",this.strokeWidth=3,this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.getState=this.getState.bind(this),this.restoreState=this.restoreState.bind(this),this.scale=this.scale.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&t!==this.visual&&t!==this.selectorVisual&&t!==this.visibleVisual)}getPath(){return this.points.length>1?this.points.map(((t,i)=>`${0===i?"M":"L"}${t.x},${t.y}`)).join(" "):"M0,0"}createVisual(){this.visual=t.createGroup(),this.selectorVisual=t.createPath(this.getPath(),[["stroke","transparent"],["fill","transparent"],["stroke-width",Math.max(this.strokeWidth,8).toString()]]),this.visibleVisual=t.createPath(this.getPath(),[["stroke",this.strokeColor],["fill","transparent"],["stroke-width",this.strokeWidth.toString()],["opacity",this.opacity.toString()]]),this.visual.appendChild(this.selectorVisual),this.visual.appendChild(this.visibleVisual),this.addMarkerVisualToContainer(this.visual)}adjustVisual(){if(this.selectorVisual&&this.visibleVisual){const i=this.getPath();t.setAttributes(this.selectorVisual,[["d",i]]),t.setAttributes(this.visibleVisual,[["d",i]]),t.setAttributes(this.visibleVisual,[["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-dasharray",this.strokeDasharray.toString()],["stroke-dasharray",this.strokeDasharray.toString()],["opacity",this.opacity.toString()]])}}getState(){return Object.assign({points:this.points},super.getState())}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()}}function g(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())}))}p.typeName="FreehandMarker",p.title="Freehand marker",p.applyDefaultFilter=!1,"function"==typeof SuppressedError&&SuppressedError;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(i){this.textElement&&t.setAttributes(this._textElement,[["fill",i]]),this._color=i}get color(){return this._color}get fontFamily(){return this._fontFamily}set fontFamily(t){this._textElement&&(this._textElement.style.fontFamily=t),this._fontFamily=t,this.positionText()}get fontSize(){return this._fontSize}set fontSize(t){this._textElement&&(this._textElement.style.fontSize=`${t.value}${t.units}`),this._fontSize=t,this.positionText()}constructor(i){this._text="",this.offsetX=0,this.offsetY=0,this._boundingBox=new DOMRect,this._labelBackground=t.createRect(10,10,[["fill","white"]]),this._textElement=t.createText(),this._color="transparent",this._fontFamily="",this._fontSize={value:1,units:"rem",step:.1},this.wordWrap=!1,this.prevWrappedText="",this.setupTextElement(),void 0!==i&&(this.text=i),this.setupTextElement=this.setupTextElement.bind(this),this.renderText=this.renderText.bind(this),this.positionText=this.positionText.bind(this),this.ownsTarget=this.ownsTarget.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.showControlBox=this.showControlBox.bind(this),this.hideControlBox=this.hideControlBox.bind(this),this.applyFontStyles=this.applyFontStyles.bind(this),this.wrapText=this.wrapText.bind(this)}ownsTarget(t){if(t===this._textElement)return!0;{let i=!1;return this._textElement.childNodes.forEach((e=>{e===t&&(i=!0)})),i}}setupTextElement(){this._textElement.style.fontSize=`${this.fontSize.value}${this.fontSize.units}`,this._textElement.style.textAnchor="middle",this._textElement.style.userSelect="none",this._labelBackground.style.stroke="#aaa",this._labelBackground.style.strokeDasharray="2 2",this._labelBackground.style.strokeWidth="1",this._labelBackground.style.strokeOpacity="0"}wrapText(){function t(t){let i=t[0].length;return t.forEach((t=>{t.length>i&&(i=t.length)})),.35*i/t.length}if(""!==this.text){const i=this.text.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/),e=1*this.boundingBox.width/this.boundingBox.height;let s=new Array(...i),r=t(s),a=Number.MAX_VALUE;for(;r>e;){let e=s[0];s.forEach((t=>{t.length>e.length&&(e=t)})),a=e.lastIndexOf(" ",a-1),a>0?(s=[],i.forEach((t=>{let i=t;for(;i.length>a;){let t=i.lastIndexOf(" ",a);t<0&&(t=i.indexOf(" ")),t>0?(s.push(i.substring(0,t)),i=i.substring(t).trim()):(s.push(i),i="")}s.push(i)})),r=t(s)):r=-1}return s.join("\r\n")}return this.text}renderText(){return g(this,void 0,void 0,(function*(){if(this._textElement){const i=this.wordWrap?this.wrapText():this.text;if(this.prevWrappedText===i)return void this.positionText();for(this.prevWrappedText=i;this._textElement.lastChild;)this._textElement.removeChild(this._textElement.lastChild);i.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/).forEach(((i,e)=>{this._textElement.appendChild(t.createTSpan(""===i.trim()?" ":i.trim(),[["dy",e>0?"1em":"0"]]))})),this.textElement.style.opacity="0",yield new Promise((t=>requestAnimationFrame(t))),this.positionText(this)}}))}applyFontStyles(){this._textElement.childNodes.forEach((t=>{const i=t;i.style.fontFamily=this._textElement.style.fontFamily,i.style.fontSize=this._textElement.style.fontSize}))}get textSize(){return this._textSize}positionText(i){const e=void 0===i?this:i;e.applyFontStyles(),e._textSize=e._textElement.getBBox();const s=e.boundingBox.x+e._textSize.width/2+e.offsetX,r=e._textElement.childNodes.length,a=e._textSize.height/r,h=r>1?-a*(r-2)/2:a/3,o=e.boundingBox.y+e._textSize.height/2+h+e.offsetY;e._textElement.childNodes.forEach(((i,e)=>{const r=i;t.setAttributes(r,[["x",`${s}`],["dy",e>0?"1em":"0"]])})),t.setAttributes(e._textElement,[["x",`${s}`]]),t.setAttributes(e._textElement,[["y",`${o}`]]),e._textSize=e._textElement.getBBox();const n=1.2;t.setAttributes(e.labelBackground,[["width",(e._textSize.width*n).toString()],["height",(e._textSize.height*n).toString()],["x",(s-e._textSize.width*n/2).toString()],["y",(e._textSize.y-n).toString()]]),e.onTextSizeChanged&&e.onTextSizeChanged(e),this.textElement.style.opacity="1"}show(){this._textElement.style.display="",this._labelBackground.style.display=""}hide(){this._textElement.style.display="none",this._labelBackground.style.display="none"}showControlBox(){this.labelBackground.style.strokeOpacity="1"}hideControlBox(){this.labelBackground.style.strokeOpacity="0"}}class v 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 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}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this.opacity.toString()]])}createVisual(){this.textBlock.fontFamily=this.fontFamily,this.textBlock.fontSize=this.fontSize,this.textBlock.color=this.color,this.textBlock.offsetX=this.padding,this.textBlock.offsetY=this.padding,this.textBlock.onTextSizeChanged=this.textSizeChanged,this.visual=t.createGroup(),t.setAttributes(this.visual,[["opacity",this._opacity.toString()]]),this.visual.appendChild(this.textBlock.textElement),this.addMarkerVisualToContainer(this.visual),this.textBlock.text=this._text}adjustVisual(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]]),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,padding:this.padding},super.getState())}restoreState(t){const i=t;this.color=i.color,this.fontFamily=i.fontFamily,this.fontSize=i.fontSize,this.text=i.text,void 0!==i.padding&&(this.padding=i.padding),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.padding=this.padding*Math.min(t,i),this.adjustVisual()}}v.typeName="TextMarker",v.title="Text marker",v.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",k.applyDefaultFilter=!1;class _ 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`}}_.typeName="HighlightMarker",_.title="Highlight marker",_.applyDefaultFilter=!1;class y extends v{get tipPosition(){return this._tipPosition}set tipPosition(t){this._tipPosition=t,this.adjustVisual()}constructor(i){super(i),this._tipPosition={x:0,y:0},this.tipBase1Position={x:0,y:0},this.tipBase2Position={x:0,y:0},this._calloutVisual=t.createPath("M0,0"),this.color="#ffffff",this.fillColor="#ff0000",this.strokeColor="#ffffff",this.strokeWidth=3,this.padding=20,this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this),this.getPath=this.getPath.bind(this),this.setTipPoints=this.setTipPoints.bind(this)}applyStrokeColor(){t.setAttributes(this._calloutVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){t.setAttributes(this._calloutVisual,[["stroke-width",this._strokeWidth.toString()]])}applyStrokeDasharray(){t.setAttributes(this._calloutVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}applyFillColor(){t.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 i;super.createVisual(),this._tipPosition={x:this.width/4,y:this.height+20},this._calloutVisual=t.createPath(this.getPath(),[["fill",this._fillColor],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray]]),null===(i=this.visual)||void 0===i||i.insertBefore(this._calloutVisual,this.textBlock.textElement)}adjustVisual(){super.adjustVisual(),this._calloutVisual&&t.setAttributes(this._calloutVisual,[["d",this.getPath()],["fill",this._fillColor],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray]])}ownsTarget(t){return!(!super.ownsTarget(t)&&this._calloutVisual!==t)}getState(){return Object.assign({fillColor:this.fillColor,tipPosition:this.tipPosition},super.getState())}restoreState(t){const i=t;super.restoreState(t),this.fillColor=i.fillColor,this.tipPosition=i.tipPosition,this.adjustVisual()}scale(t,i){super.scale(t,i),this.strokeWidth*=(t+i)/2,this._tipPosition={x:this._tipPosition.x*t,y:this._tipPosition.y*i},this.adjustVisual()}}y.typeName="CalloutMarker",y.title="Callout marker";class x 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`}}x.typeName="EllipseFrameMarker",x.title="Ellipse frame marker";class S 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`}}S.typeName="EllipseMarker",S.title="Ellipse marker";class C 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(i){this._imageSrc=i,this.SVGImage&&"bitmap"===this.imageType&&(void 0!==i?t.setAttributes(this.SVGImage,[["href",i]]):t.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),this.adjustVisual=this.adjustVisual.bind(this),this.adjustImage=this.adjustImage.bind(this)}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this.opacity.toString()]])}createImage(){var i;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=t.createImage([["href",null!==(i=this._imageSrc)&&void 0!==i?i:""]])}createVisual(){this.createImage(),void 0!==this.SVGImage&&(this.visual=t.createGroup(),"svg"===this.imageType&&t.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],["opacity",this.opacity.toString()],["pointer-events","bounding-box"]]),this.adjustImage(),this.visual.appendChild(this.SVGImage),this.addMarkerVisualToContainer(this.visual))}adjustVisual(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}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&&(t.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&&t.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(),this.adjustVisual()}scale(t,i){super.scale(t,i),this.setSize()}}C.title="Image marker";class f extends C{}f.typeName="CustomImageMarker",f.title="Custom image marker";class w 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"}}w.typeName="CheckImageMarker",w.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 v{constructor(i){super(i),this._outerFrameVisual=t.createPath("M0,0"),this._captionFrameVisual=t.createPath("M0,0"),this._frameVisual=t.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(){t.setAttributes(this._outerFrameVisual,[["stroke",this._strokeColor]]),t.setAttributes(this._captionFrameVisual,[["stroke",this._strokeColor]])}applyStrokeWidth(){t.setAttributes(this._outerFrameVisual,[["stroke-width",this._strokeWidth.toString()]]),t.setAttributes(this._captionFrameVisual,[["stroke-width",this._strokeWidth.toString()]]),this.adjustTextPosition(),this.adjustFrameVisual()}applyStrokeDasharray(){t.setAttributes(this._outerFrameVisual,[["stroke-dasharray",this._strokeDasharray]]),t.setAttributes(this._captionFrameVisual,[["stroke-dasharray",this._strokeDasharray]])}applyOpacity(){this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]])}applyFillColor(){t.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 i;super.createVisual();const e=this.getPaths();this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]]),this._outerFrameVisual=t.createPath(e.frame,[["fill","transparent"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray]]),this._captionFrameVisual=t.createPath(e.caption,[["fill","this._fillColor"],["fill-rule","evenodd"],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray]]),this._frameVisual.appendChild(this._outerFrameVisual),this._frameVisual.appendChild(this._captionFrameVisual),null===(i=this.visual)||void 0===i||i.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 i=this.getPaths();this.visual&&t.setAttributes(this.visual,[["opacity",this._opacity.toString()]]),this._outerFrameVisual&&t.setAttributes(this._outerFrameVisual,[["d",i.frame],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray]]),this._captionFrameVisual&&t.setAttributes(this._captionFrameVisual,[["d",i.caption],["fill",this._fillColor],["stroke",this._strokeColor],["stroke-width",this._strokeWidth.toString()],["stroke-dasharray",this._strokeDasharray]])}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 T extends l{constructor(t){super(t),this.curveX=0,this.curveY=0,this.fillColor="transparent"}getPath(){return`M ${this.x1} ${this.y1} Q ${this.curveX} ${this.curveY}, ${this.x2} ${this.y2}`}getState(){return Object.assign({curveX:this.curveX,curveY:this.curveY},super.getState())}restoreState(t){this.curveX=t.curveX,this.curveY=t.curveY,super.restoreState(t)}scale(t,i){super.scale(t,i),this.curveX=this.curveX*t,this.curveY=this.curveY*i,this.adjustVisual()}}T.typeName="CurveMarker",T.title="Curve marker";class M extends p{constructor(t){super(t),this.opacity=.5,this.strokeColor="#ffff00",this.strokeWidth=20}}M.typeName="HighlighterMarker",M.title="Highlighter marker",M.applyDefaultFilter=!1;class V{static getDefaultFilterSet(){return[t.createFilter("dropShadow",[["x","-20%"],["y","-20%"],["width","140%"],["height","140%"]],'<feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="rgba(0,0,0,0.8)"/>'),t.createFilter("outline",[["x","-5%"],["y","-5%"],["width","110%"],["height","110%"]],'<feMorphology operator="dilate" radius="2" in="SourceAlpha" result="expanded"/>\n      <feFlood flood-color="white" flood-opacity="1"/>\n      <feComposite in2="expanded" operator="in"/>\n      <feComposite in="SourceGraphic" operator="over"/>'),t.createFilter("glow",[["x","-50%"],["y","-50%"],["width","200%"],["height","200%"]],'<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>\n      <feFlood flood-color="#ffffff" flood-opacity="1"/>\n      <feComposite in2="blur" operator="in"/>\n      <feMerge>\n        <feMergeNode/>\n        <feMergeNode in="SourceGraphic"/>\n      </feMerge>')]}}class B{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}set notes(t){this.marker.notes=t}get notes(){return this.marker.notes}get zoomLevel(){return this._zoomLevel}set zoomLevel(t){this._zoomLevel=t,this.adjustControlBox()}constructor(t){var i;this._creationStyle="draw",this._state="new",this._isSelected=!1,this._continuousCreation=!1,this._zoomLevel=1,this.isMultiSelected=!1,this._container=t.container,this._overlayContainer=t.overlayContainer,this._markerType=t.markerType,this._marker=null!==(i=t.marker)&&void 0!==i?i: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,e){}dblClick(t,i,e){}manipulate(t,i){}pointerUp(t,i){}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());this.manipulationStartState!=t&&(this.manipulationStartState=t,this.onStateChanged(this))}}hide(){this.container.style.display="none"}show(){this.container.style.display="block"}getState(){return this.marker.getState()}restoreState(t){this._state="select",this.marker.restoreState(t),this.adjustControlBox()}}class z{get visual(){return this._visual||this.createVisual(),this._visual}get zoomLevel(){return this._zoomLevel}set zoomLevel(t){this._zoomLevel=t,this.adjustVisual()}constructor(){this.gripSize=5,this._zoomLevel=1,this.fillColor="rgba(255,255,255,0.9)",this.strokeColor="#0ea5e9",this.createVisual=this.createVisual.bind(this),this.adjustVisual=this.adjustVisual.bind(this)}createVisual(){this._visual=t.createGroup(),this._selectorElement=t.createCircle(2*this.gripSize,[["fill","transparent"],["cx",(this.gripSize/2).toString()],["cy",(this.gripSize/2).toString()]]),this._visual.appendChild(this._selectorElement),this._visibleElement=t.createCircle(this.gripSize,[["fill-opacity","1"],["stroke-width","1"],["stroke-opacity","1"]]),this._visibleElement.style.fill=`var(--mjs-grip-fill, ${this.fillColor})`,this._visibleElement.style.stroke=`var(--mjs-grip-stroke, ${this.strokeColor})`,this._visibleElement.style.filter="drop-shadow(0px 0px 2px rgba(0, 0, 0, .7))",this._visual.appendChild(this._visibleElement)}adjustVisual(){this._selectorElement&&this._visibleElement&&(this._selectorElement.setAttribute("r",(2*this.gripSize/this.zoomLevel).toString()),this._visibleElement.setAttribute("r",(this.gripSize/this.zoomLevel).toString()),this._visibleElement.setAttribute("stroke-width",(1/this.zoomLevel).toString()))}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 L extends z{}class P extends B{constructor(i){super(i),this.defaultLength=50,this.manipulationStartX=0,this.manipulationStartY=0,this.manipulationBox=t.createGroup(),this.grips=[],this.ownsTarget=this.ownsTarget.bind(this),this.setupControlBox=this.setupControlBox.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.adjustControlGrips=this.adjustControlGrips.bind(this),this.createGrip=this.createGrip.bind(this),this.positionGrip=this.positionGrip.bind(this),this.positionGrips=this.positionGrips.bind(this),this.resize=this.resize.bind(this),this.manipulate=this.manipulate.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this)}ownsTarget(t){return!(!super.ownsTarget(t)&&!this.marker.ownsTarget(t))||!!this.grips.some((i=>i.ownsTarget(t)))}pointerDown(t,i,e){super.pointerDown(t,i,e),this.manipulationStartX=t.x,this.manipulationStartY=t.y,this.adjustControlBox(),this.controlBox.style.display="","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.controlBox&&(this.controlBox.style.display=""),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),1===this.marker.points.length&&this.marker.points.splice(0,1),this.marker.adjustVisual(),this.adjustControlGrips(),this.grips.forEach((t=>{t.visual.style.pointerEvents=""})),this._state="select",this.marker.points.length>0&&this.onMarkerCreated&&this.onMarkerCreated(this)}pointerUp(t,i){super.pointerUp(t,i),this.manipulate(t,i),"creating"!==this._state&&(this._state="select"),this.stateChanged()}manipulate(t,i){"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,e){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||(this.controlBox=t.createGroup(),this.container.appendChild(this.controlBox),this.manipulationBox=t.createGroup(),this.controlBox.appendChild(this.manipulationBox),this.adjustControlGrips(),this.controlBox.style.display="none")}adjustControlBox(){this.controlBox||this.setupControlBox(),this.adjustControlGrips()}adjustControlGrips(){const t=this.marker.points.length-this.grips.length;if(t>0)for(let i=0;i<t;i++)this.grips.push(this.createGrip());else if(t<0)for(let i=0;i<-t;i++){const t=this.grips.pop();t&&this.manipulationBox.removeChild(t.visual)}this.positionGrips()}createGrip(){const i=new L;return i.zoomLevel=this.zoomLevel,i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),i}positionGrips(){this.grips.forEach(((t,i)=>{t.zoomLevel=this.zoomLevel;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&&(this.controlBox.style.display="none"),"creating"===this.state&&this.finishCreation()}}class G extends B{constructor(i){super(i),this.defaultLength=50,this.manipulationStartX=0,this.manipulationStartY=0,this.manipulationStartX1=0,this.manipulationStartY1=0,this.manipulationStartX2=0,this.manipulationStartY2=0,this.manipulationBox=t.createGroup(),this.ownsTarget=this.ownsTarget.bind(this),this.setupControlBox=this.setupControlBox.bind(this),this.adjustControlBox=this.adjustControlBox.bind(this),this.addControlGrips=this.addControlGrips.bind(this),this.createGrip=this.createGrip.bind(this),this.positionGrip=this.positionGrip.bind(this),this.positionGrips=this.positionGrips.bind(this),this.resize=this.resize.bind(this),this.manipulate=this.manipulate.bind(this),this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this)}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,e){var s,r;super.pointerDown(t,i,e),this.manipulationStartX=t.x,this.manipulationStartY=t.y,"new"===this.state&&(this.setupControlBox(),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===(s=this.grip1)||void 0===s?void 0:s.ownsTarget(i))?this.activeGrip=this.grip1:i&&(null===(r=this.grip2)||void 0===r?void 0:r.ownsTarget(i))?this.activeGrip=this.grip2:this.activeGrip=void 0,this.activeGrip?this._state="resize":this._state="move")}pointerUp(t,i){const e=this.state;super.pointerUp(t,i),"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,i),this._state="select","creating"===e&&this.onMarkerCreated&&this.onMarkerCreated(this)}manipulate(t,i){"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||(this._controlBox=t.createGroup(),this.container.appendChild(this._controlBox),this.manipulationBox=t.createGroup(),this._controlBox.appendChild(this.manipulationBox),this.addControlGrips(),this._controlBox.style.display="none")}adjustControlBox(){this._controlBox||this.setupControlBox(),this.positionGrips()}addControlGrips(){this.grip1=this.createGrip(),this.grip2=this.createGrip(),this.positionGrips()}createGrip(){const i=new L;return i.zoomLevel=this.zoomLevel,i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),i}positionGrips(){if(this.grip1&&this.grip2){const t=this.grip1.gripSize;this.positionGrip(this.grip1.visual,this.marker.x1-t/2,this.marker.y1-t/2),this.positionGrip(this.grip2.visual,this.marker.x2-t/2,this.marker.y2-t/2),this.grip1.zoomLevel=this.zoomLevel,this.grip2.zoomLevel=this.zoomLevel}}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&&(this._controlBox.style.display="none")}}class A{constructor(){this.grips=new Map([["topleft",new L],["topcenter",new L],["topright",new L],["leftcenter",new L],["rightcenter",new L],["bottomleft",new L],["bottomcenter",new L],["bottomright",new L]]),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 W extends z{constructor(){super();const t=this.fillColor;this.fillColor=this.strokeColor,this.strokeColor=t}}class D extends B{constructor(){super(...arguments),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.manipulationBox=t.createGroup(),this.CB_DISTANCE=0,this.controlGrips=new A,this.disabledResizeGrips=[],this.disableRotation=!1,this._suppressMarkerCreateEvent=!1}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,e){var s;super.pointerDown(t,i,e),this.setupControlBox(),"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 r=this.marker.unrotatePoint(t);if(this.manipulationStartX=r.x,this.manipulationStartY=r.y,this.offsetX=r.x-this.marker.left,this.offsetY=r.y-this.marker.top,"new"!==this.state)if(this.select(this.isMultiSelected),this.activeGrip=null===(s=this.controlGrips)||void 0===s?void 0:s.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,i){const e=this.state;super.pointerUp(t,i),"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,i),this._state="select","creating"===e&&this.onMarkerCreated&&!1===this._suppressMarkerCreateEvent&&this.onMarkerCreated(this),this.stateChanged()}manipulate(t,i){const e=this.marker.unrotatePoint(t);"creating"===this.state?this.resize(t,null==i?void 0:i.shiftKey):"move"===this.state?(this.marker.left=this.manipulationStartLeft+(e.x-this.manipulationStartLeft)-this.offsetX,this.marker.top=this.manipulationStartTop+(e.y-this.manipulationStartTop)-this.offsetY,this.marker.moveVisual({x:this.marker.left,y:this.marker.top}),this.adjustControlBox()):"resize"===this.state?this.resize(e,null==i?void 0:i.shiftKey):"rotate"===this.state&&this.marker.rotate(t)}resize(t,i=!1){let e=this.manipulationStartLeft,s=this.manipulationStartWidth,r=this.manipulationStartTop,a=this.manipulationStartHeight;const h=t.x-this.manipulationStartX,o=t.y-this.manipulationStartY;if(i){const t=0!==this.manipulationStartWidth&&0!==this.manipulationStartHeight?this.manipulationStartWidth/this.manipulationStartHeight:1;switch(this.activeGrip){case this.controlGrips.getGrip("bottomright"):case void 0:s=this.manipulationStartWidth+Math.max(h,o),a=this.manipulationStartHeight+Math.max(h,o)/t;break;case this.controlGrips.getGrip("bottomcenter"):s=this.manipulationStartWidth+o,a=this.manipulationStartHeight+o/t,e=this.manipulationStartLeft-o/2;break;case this.controlGrips.getGrip("bottomleft"):s=this.manipulationStartWidth+Math.max(-h,o),a=this.manipulationStartHeight+Math.max(-h,o)/t,e=this.manipulationStartLeft-Math.max(-h,o);break;case this.controlGrips.getGrip("leftcenter"):s=this.manipulationStartWidth-h,a=this.manipulationStartHeight-h/t,e=this.manipulationStartLeft+h,r=this.manipulationStartTop+h/t/2;break;case this.controlGrips.getGrip("topleft"):s=this.manipulationStartWidth+Math.max(-h,-o),a=this.manipulationStartHeight+Math.max(-h,-o)/t,e=this.manipulationStartLeft-Math.max(-h,-o),r=this.manipulationStartTop-Math.max(-h,-o)/t;break;case this.controlGrips.getGrip("topcenter"):s=this.manipulationStartWidth-o,a=this.manipulationStartHeight-o/t,e=this.manipulationStartLeft+o/2,r=this.manipulationStartTop+o/t;break;case this.controlGrips.getGrip("topright"):s=this.manipulationStartWidth+Math.max(h,-o),a=this.manipulationStartHeight+Math.max(h,-o)/t,r=this.manipulationStartTop-Math.max(h,-o)/t;break;case this.controlGrips.getGrip("rightcenter"):s=this.manipulationStartWidth+h,a=this.manipulationStartHeight+h/t,r=this.manipulationStartTop-h/t/2}}else{switch(this.activeGrip){case this.controlGrips.getGrip("bottomleft"):case this.controlGrips.getGrip("leftcenter"):case this.controlGrips.getGrip("topleft"):e=this.manipulationStartLeft+t.x-this.manipulationStartX,s=this.manipulationStartWidth+this.manipulationStartLeft-e;break;case this.controlGrips.getGrip("bottomright"):case this.controlGrips.getGrip("rightcenter"):case this.controlGrips.getGrip("topright"):case void 0:s=this.manipulationStartWidth+t.x-this.manipulationStartX}switch(this.activeGrip){case this.controlGrips.getGrip("topcenter"):case this.controlGrips.getGrip("topleft"):case this.controlGrips.getGrip("topright"):r=this.manipulationStartTop+t.y-this.manipulationStartY,a=this.manipulationStartHeight+this.manipulationStartTop-r;break;case this.controlGrips.getGrip("bottomcenter"):case this.controlGrips.getGrip("bottomleft"):case this.controlGrips.getGrip("bottomright"):case void 0:a=this.manipulationStartHeight+t.y-this.manipulationStartY}}s>=0?(this.marker.left=e,this.marker.width=s):(this.marker.left=e+s,this.marker.width=-s),a>=0?(this.marker.top=r,this.marker.height=a):(this.marker.top=r+a,this.marker.height=-a),this.setSize()}setSize(){this.marker.setSize(),this.adjustControlBox()}select(t=!1){super.select(t),this.adjustControlBox(),this.manipulationBox.style.display=t?"none":"",this.controlBox&&(this.controlBox.style.display="")}deselect(){super.deselect(),this.controlBox&&(this.controlBox.style.display="none")}setupControlBox(){if(this.controlBox)return;this.controlBox=t.createGroup();const i=t.createTransform();i.setTranslate(-this.CB_DISTANCE/2,-this.CB_DISTANCE/2),this.controlBox.transform.baseVal.appendItem(i),this.container.appendChild(this.controlBox),this.manipulationBox=t.createGroup(),this.controlBox.appendChild(this.manipulationBox),this.controlRect=t.createRect(this.marker.width+this.CB_DISTANCE,this.marker.height+this.CB_DISTANCE,[["stroke","black"],["stroke-width",(1/this.zoomLevel).toString()],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"],["fill","transparent"],["pointer-events","none"]]),this.controlBox.appendChild(this.controlRect),!0!==this.disableRotation&&(this.rotatorGripLine=t.createLine((this.marker.width+2*this.CB_DISTANCE)/2,this.marker.top-this.CB_DISTANCE,(this.marker.width+2*this.CB_DISTANCE)/2,this.marker.top-3*this.CB_DISTANCE,[["stroke","black"],["stroke-width",(1/this.zoomLevel).toString()],["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 A,this.addControlGrips(),this.controlBox.style.display="none"}adjustControlBox(){var t,i,e;if(this.controlBox){const s=this.controlBox.transform.baseVal.getItem(0);s.setTranslate(this.marker.left-this.CB_DISTANCE/2,this.marker.top-this.CB_DISTANCE/2),this.controlBox.transform.baseVal.replaceItem(s,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()),null===(e=this.controlRect)||void 0===e||e.setAttribute("stroke-width",(1/this.zoomLevel).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.rotatorGripLine.setAttribute("stroke-width",(1/this.zoomLevel).toString())),this.positionGrips()}}addControlGrips(){for(const i of this.controlGrips.grips.values())i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),this.manipulationBox.appendChild(i.visual);!0!==this.disableRotation&&(this.rotatorGrip=this.createRotateGrip()),this.positionGrips()}createRotateGrip(){const i=new W;return i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),i}positionGrips(){var t,i;if(void 0!==this.controlGrips){const e=null!==(t=this.controlGrips.getGrip("topleft").gripSize)&&void 0!==t?t:0,s=-e/2,r=s,a=(this.marker.width+this.CB_DISTANCE)/2-e/2,h=(this.marker.height+this.CB_DISTANCE)/2-e/2,o=this.marker.height+this.CB_DISTANCE-e/2,n=this.marker.width+this.CB_DISTANCE-e/2;if(this.positionGrip(this.controlGrips.getGrip("topleft").visual,s,r),this.positionGrip(this.controlGrips.getGrip("topcenter").visual,a,r),this.positionGrip(this.controlGrips.getGrip("topright").visual,n,r),this.positionGrip(this.controlGrips.getGrip("leftcenter").visual,s,h),this.positionGrip(this.controlGrips.getGrip("rightcenter").visual,n,h),this.positionGrip(this.controlGrips.getGrip("bottomleft").visual,s,o),this.positionGrip(this.controlGrips.getGrip("bottomcenter").visual,a,o),this.positionGrip(this.controlGrips.getGrip("bottomright").visual,n,o),this.controlGrips.grips.forEach((t=>{t.zoomLevel=this.zoomLevel})),void 0!==this.rotatorGrip){this.rotatorGrip.zoomLevel=this.zoomLevel;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(Math.max(3*this.CB_DISTANCE,30),15/this.zoomLevel))}}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&&(this.controlBox.style.display="none")}showControlBox(){this.controlBox&&(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),this.adjustControlBox()}}class I extends D{constructor(t){super(t),this._creationStyle="draw"}pointerDown(t,i,e){super.pointerDown(t,i,e),"new"===this.state&&(this.marker.createVisual(),this.marker.moveVisual(t),this._state="creating")}resize(t,i=!1){super.resize(t,i),this.setSize()}pointerUp(t,i){super.pointerUp(t,i),this.setSize()}}class j{constructor(){this.undoStack=[],this.redoStack=[]}get isUndoPossible(){return this.undoStack.length>1}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(),void 0!==this.lastRedoStep&&this.undoStack.push(this.lastRedoStep),this.lastRedoStep}}class $ extends B{constructor(t){super(t),this.manipulationStartX=0,this.manipulationStartY=0,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)}ownsTarget(t){return!(!super.ownsTarget(t)&&!this.marker.ownsTarget(t)&&t!==this.controlRect)}pointerDown(t,i,e){super.pointerDown(t,i,e),this.manipulationStartX=t.x,this.manipulationStartY=t.y,"new"===this.state?(this.setupControlBox(),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,i){super.pointerUp(t,i),this.manipulate(t,i),"creating"===this._state&&this.finishCreation(),this.state="select",this.stateChanged()}manipulate(t,i){"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||(this.controlBox=t.createGroup(),this.container.appendChild(this.controlBox),this.controlRect=t.createRect(0,0,[["stroke","black"],["stroke-width","1"],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"],["fill","transparent"]]),this.controlBox.appendChild(this.controlRect),this.controlBox.style.display="none")}adjustControlBox(){if(this.controlBox||this.setupControlBox(),this.marker.points.length>0){const i=Math.min(...this.marker.points.map((t=>t.x))),e=Math.min(...this.marker.points.map((t=>t.y))),s=Math.max(...this.marker.points.map((t=>t.x))),r=Math.max(...this.marker.points.map((t=>t.y)));this.controlRect&&t.setAttributes(this.controlRect,[["x",(i-this.strokeWidth).toString()],["y",(e-this.strokeWidth).toString()],["width",(s-i+2*this.strokeWidth).toString()],["height",(r-e+2*this.strokeWidth).toString()]])}}select(){super.select(),this.adjustControlBox(),this.controlBox&&(this.controlBox.style.display="")}deselect(){super.deselect(),this.controlBox&&(this.controlBox.style.display="none")}}class F{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("textarea"),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.width=`${this._width}px`,this.textEditor.style.height=`${this._height}px`,this.textEditor.style.overflow="hidden",this.textEditor.style.textAlign="center",this.textEditor.style.alignContent="center",this.textEditor.style.padding="0px",this.textEditor.style.margin="0px",this.textEditor.style.fontFamily=this._fontFamily,this.textEditor.style.fontSize=this._fontSize,this.textEditor.style.lineHeight="1em",this.textEditor.style.outline="none",this.textEditor.style.border="none",this.textEditor.style.resize="none",this.textEditor.value=this._text,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.value,void 0!==this.onTextChanged&&this.onTextChanged(this._text)})),this.textEditor.addEventListener("blur",(()=>{this._text=this.textEditor.value,void 0!==this.onTextChanged&&this.onTextChanged(this._text),void 0!==this.onBlur&&this.onBlur()})),this.isSetupCompleted=!0}getEditorUi(){return this.isSetupCompleted||this.setup(),this.textEditor}focus(){this.textEditor.focus()}blur(){this.textEditor.blur()}}class H extends D{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(i){super(i),this.textBlockEditorContainer=t.createForeignObject(),this._pointerDownTime=Number.MAX_VALUE,this._pointerDownPoint={x:0,y:0},this.markerSizeChanged=()=>{this.setSize()},this.disabledResizeGrips=["topleft","topcenter","topright","bottomleft","bottomcenter","bottomright","leftcenter","rightcenter"],this._creationStyle="drop",this.textBlockEditor=new F,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,e){super.pointerDown(t,i,e),this._pointerDownTime=Date.now(),this._pointerDownPoint=t,"new"===this.state&&(this.marker.createVisual(),this.marker.moveVisual(t),this._state="creating")}dblClick(t,i,e){super.dblClick(t,i,e),"edit"!==this.state&&this.showEditor()}setSize(){super.setSize(),this.textBlockEditorContainer.style.display="flex",this.textBlockEditorContainer.style.transform=`translate(${this.marker.left}px, ${this.marker.top}px)`,this.textBlockEditorContainer.style.width=`${this.marker.width}px`,this.textBlockEditorContainer.setAttribute("width",`${this.marker.width}`),this.textBlockEditorContainer.style.height=`${this.marker.height}px`,this.textBlockEditorContainer.setAttribute("height",`${this.marker.height}`),this.textBlockEditor.width=this.marker.width,this.textBlockEditor.height=this.marker.height}resize(t,i=!1){super.resize(t,i),this.setSize()}pointerUp(t,i){const e=this.state;super.pointerUp(t,i),this.setSize(),("creating"===e||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.deselect()}),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 N='<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path style="fill:none" d="M413.33 667.848h305.294v148.981H413.33z" transform="matrix(.20963 0 0 .42959 -86.648 -286.898)"/><path d="m909.846 1031.18-62.778-1.78v-15.82l62.778-2.92v20.52Z" style="fill:#ffe862" transform="matrix(.83313 0 0 .79653 -699.87 -771.183)"/><path d="M771.747 702.002v-6.3h1.248v1.344l-.228.144a2.03 2.03 0 0 1 .306-.6c.14-.192.312-.362.516-.51.204-.148.424-.266.66-.354.236-.088.478-.132.726-.132.36 0 .676.06.948.18.272.12.496.3.672.54.176.24.304.54.384.9l-.192-.048.084-.204c.088-.184.21-.358.366-.522a2.863 2.863 0 0 1 1.17-.738 2.15 2.15 0 0 1 .66-.108c.472 0 .862.096 1.17.288.308.192.54.484.696.876.156.392.234.88.234 1.464v3.78h-1.248v-3.708c0-.36-.046-.654-.138-.882a1.021 1.021 0 0 0-.414-.51c-.184-.112-.42-.168-.708-.168-.224 0-.434.038-.63.114a1.55 1.55 0 0 0-.51.318 1.446 1.446 0 0 0-.456 1.068v3.768h-1.248v-3.732c0-.328-.048-.606-.144-.834a1.123 1.123 0 0 0-.42-.522 1.204 1.204 0 0 0-.672-.18 1.68 1.68 0 0 0-.624.114 1.62 1.62 0 0 0-.504.312 1.398 1.398 0 0 0-.456 1.05v3.792h-1.248Z" style="fill:#e60076;fill-rule:nonzero" transform="matrix(4.60055 0 0 4.60055 -3539.456 -3186.295)"/></svg>';class O extends I{}class U extends G{set arrowType(t){this.marker.arrowType=t}get arrowType(){return this.marker.arrowType}}class R extends H{constructor(t){super(t),this.manipulationStartTipPositionX=0,this.manipulationStartTipPositionY=0}addControlGrips(){this.tipGrip=this.createTipGrip(),super.addControlGrips()}createTipGrip(){const i=new L;return i.zoomLevel=this.zoomLevel,i.visual.transform.baseVal.appendItem(t.createTransform()),this.manipulationBox.appendChild(i.visual),i}positionGrips(){var t;if(super.positionGrips(),this.tipGrip){this.tipGrip.zoomLevel=this.zoomLevel;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,e){super.pointerDown(t,i,e),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,i=!1){const e=this.manipulationStartTipPositionX+t.x-this.manipulationStartX,s=this.manipulationStartTipPositionY+t.y-this.manipulationStartY;this.activeGrip===this.tipGrip?(this.marker.tipPosition={x:e,y:s},this.adjustControlBox()):super.resize(t,i)}}class X extends D{constructor(t){super(t),this._creationStyle="drop",this.disabledResizeGrips=["topcenter","bottomcenter","leftcenter","rightcenter"],this.pointerDown=this.pointerDown.bind(this),this.pointerUp=this.pointerUp.bind(this),this.resize=this.resize.bind(this)}pointerDown(t,i,e){super.pointerDown(t,i,e),"new"===this.state&&(this.marker.createVisual(),this.marker.moveVisual(t),this._state="creating")}pointerUp(t,i){super.pointerUp(t,i),this.setSize(),this.adjustControlBox()}}class Y extends H{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 q extends G{constructor(){super(...arguments),this.manipulationStartCurveX=0,this.manipulationStartCurveY=0}ownsTarget(t){var i;return!(!super.ownsTarget(t)&&!(null===(i=this.curveGrip)||void 0===i?void 0:i.ownsTarget(t)))}pointerDown(t,i,e){var s;"new"===this.state&&(this.marker.curveX=t.x,this.marker.curveY=t.y),this.manipulationStartCurveX=this.marker.curveX,this.manipulationStartCurveY=this.marker.curveY,super.pointerDown(t,i,e),"new"!==this.state&&"creating"!==this.state&&(i&&(null===(s=this.curveGrip)||void 0===s?void 0:s.ownsTarget(i))&&(this.activeGrip=this.curveGrip),this.activeGrip?this._state="resize":this._state="move")}resize(t){super.resize(t),this.activeGrip===this.curveGrip&&(this.marker.curveX=t.x,this.marker.curveY=t.y,this.marker.adjustVisual(),this.adjustControlBox()),"creating"===this.state&&(this.marker.curveX=this.marker.x1+(this.marker.x2-this.marker.x1)/2,this.marker.curveY=this.marker.y1+(this.marker.y2-this.marker.y1)/2)}manipulate(t,i){"move"===this.state&&(this.marker.curveX=this.manipulationStartCurveX+t.x-this.manipulationStartX,this.marker.curveY=this.manipulationStartCurveY+t.y-this.manipulationStartY),super.manipulate(t,i)}setupControlBox(){super.setupControlBox();const i=1/this.zoomLevel;this.curveControlLine1=t.createLine(this.marker.x1,this.marker.y1,this.marker.curveX,this.marker.curveY,[["stroke","black"],["stroke-width",i.toString()],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"],["fill","transparent"],["pointer-events","none"]]),this.curveControlLine2=t.createLine(this.marker.x2,this.marker.y2,this.marker.curveX,this.marker.curveY,[["stroke","black"],["stroke-width",i.toString()],["stroke-opacity","0.5"],["stroke-dasharray","3, 2"],["fill","transparent"],["pointer-events","none"]]),this._controlBox.insertBefore(this.curveControlLine1,this._controlBox.firstChild),this._controlBox.insertBefore(this.curveControlLine2,this._controlBox.firstChild)}adjustControlBox(){super.adjustControlBox();const t=1/this.zoomLevel;this.curveControlLine1&&this.curveControlLine2&&this.curveGrip&&(this.curveControlLine1.setAttribute("x1",this.marker.x1.toString()),this.curveControlLine1.setAttribute("y1",this.marker.y1.toString()),this.curveControlLine1.setAttribute("x2",this.marker.curveX.toString()),this.curveControlLine1.setAttribute("y2",this.marker.curveY.toString()),this.curveControlLine1.setAttribute("stroke-width",t.toString()),this.curveControlLine2.setAttribute("x1",this.marker.x2.toString()),this.curveControlLine2.setAttribute("y1",this.marker.y2.toString()),this.curveControlLine2.setAttribute("x2",this.marker.curveX.toString()),this.curveControlLine2.setAttribute("y2",this.marker.curveY.toString()),this.curveControlLine2.setAttribute("stroke-width",t.toString()),this.curveGrip.zoomLevel=this.zoomLevel)}addControlGrips(){super.addControlGrips(),this.curveGrip=this.createGrip(),this.curveGrip.zoomLevel=this.zoomLevel,this.positionGrips()}positionGrips(){if(super.positionGrips(),this.curveGrip){const t=this.curveGrip.gripSize;this.positionGrip(this.curveGrip.visual,this.marker.curveX-t/2,this.marker.curveY-t/2)}}}class J 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 selectedMarkerEditors(){return this._selectedMarkerEditors}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){if(this._zoomLevel=t,this._canvasContainer&&this._contentContainer&&this._mainCanvas&&this._overlayContainer){this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this.setEditingTargetSize();const t=Math.max(this._zoomLevel,1);this._canvasContainer.scrollTo({left:(this._mainCanvas.clientWidth*t-this._canvasContainer.clientWidth)/2,top:(this._mainCanvas.clientHeight*t-this._canvasContainer.clientHeight)/2}),this._overlayContainer.style.transform=`scale(${this._zoomLevel})`,this.adjustEditorsZoom()}}panTo(t){var i;null===(i=this._canvasContainer)||void 0===i||i.scrollBy({left:this.prevPanPoint.x-t.x,top:this.prevPanPoint.y-t.y}),this.prevPanPoint=t}get defaultFilter(){return this._defaultFilter}set defaultFilter(t){this._defaultFilter=t}constructor(){super(),this.width=0,this.height=0,this._targetWidth=-1,this._targetHeight=-1,this.mode="select",this._isInitialized=!1,this._selectedMarkerEditors=[],this._newMarkerOutline=t.createPath("",[["stroke","#333"],["stroke-width","0.5"],["stroke-dasharray","2 5"],["fill","rgba(200,200,200,0.5)"],["pointer-events","none"]]),this._targetImageLoaded=!1,this.markerEditors=new Map,this.editors=[],this._zoomLevel=1,this.prevPanPoint={x:0,y:0},this.undoRedoManager=new j,this._defs=[],this.touchPoints=0,this.isDragging=!1,this.isSelecting=!1,this.isPanning=!1,this._marqueeSelectOutline=t.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,I),this.markerEditors.set(x,I),this.markerEditors.set(l,G),this.markerEditors.set(c,P),this.markerEditors.set(p,$),this.markerEditors.set(v,H),this.markerEditors.set(k,O),this.markerEditors.set(_,O),this.markerEditors.set(S,O),this.markerEditors.set(d,U),this.markerEditors.set(u,G),this.markerEditors.set(y,R),this.markerEditors.set(f,X),this.markerEditors.set(w,X),this.markerEditors.set(b,X),this.markerEditors.set(E,Y),this.markerEditors.set(T,q),this.markerEditors.set(M,$),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.scaleMarkers=this.scaleMarkers.bind(this),this.adjustEditorsZoom=this.adjustEditorsZoom.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.addDefs=this.addDefs.bind(this),this.addDefaultFilterDefs=this.addDefaultFilterDefs.bind(this),this.attachShadow({mode:"open"})}connectedCallback(){this.dispatchEvent(new CustomEvent("areainit",{detail:{markerArea:this}})),i.addKeyAddListener(this.toggleLogo),this.createLayout(),this.addMainCanvas(),this.initOverlay(),this.attachEvents(),this._isInitialized=!0,void 0!==this.targetImage&&this.addTargetImage(),this.setMainCanvasSize(),this.addDefaultFilterDefs(),this.toggleLogo(),this.addUndoStep(),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 i,e,s;this.width=(null===(i=this._contentContainer)||void 0===i?void 0:i.clientWidth)||0,this.height=(null===(e=this._contentContainer)||void 0===e?void 0:e.clientHeight)||0,this._mainCanvas=document.createElementNS("http://www.w3.org/2000/svg","svg"),this._mainCanvas.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.setMainCanvasSize(),this._mainCanvas.style.gridColumnStart="1",this._mainCanvas.style.gridRowStart="1",this._mainCanvas.style.pointerEvents="auto",this._mainCanvas.style.margin="10px",this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this.addDefsToMainCanvas(),this._groupLayer=t.createGroup(),this._mainCanvas.appendChild(this._groupLayer),null===(s=this._canvasContainer)||void 0===s||s.appendChild(this._mainCanvas)}addDefsToMainCanvas(){var i;this._defsElement=t.createDefs(),null===(i=this._mainCanvas)||void 0===i||i.appendChild(this._defsElement),this._defsElement.append(...this._defs)}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,e=i.naturalWidth/i.naturalHeight,s=this._targetWidth>0?this._targetWidth:this._targetHeight>0?this._targetHeight*e:i.clientWidth>0?i.clientWidth:i.naturalWidth,r=this._targetHeight>0?this._targetHeight:this._targetWidth>0?this._targetWidth/e:i.clientHeight>0?i.clientHeight:i.naturalHeight;this._targetWidth=s,this._targetHeight=r}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.zoomLevel=this._zoomLevel})),this._editingTarget.src=this.targetImage.src,this._canvasContainer.insertBefore(this._editingTarget,this._mainCanvas))}addDefaultFilterDefs(){this.addDefs(...V.getDefaultFilterSet())}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";this.dispatchEvent(new CustomEvent("markercreating",{detail:{markerArea:this,markerEditor:this._currentMarkerEditor}}))}return this._currentMarkerEditor}addNewMarker(i,e){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const s=t.createGroup();this.defaultFilter&&e.applyDefaultFilter&&s.setAttribute("filter",this.defaultFilter),this._mainCanvas.appendChild(s);const r=new i({container:s,overlayContainer:this._overlayContentContainer,markerType:e});return r.zoomLevel=this.zoomLevel,r}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($)&&(null==i?void 0:i.is($))&&(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,i=!1){var e;this.editors.indexOf(t)>=0&&(this.dispatchEvent(new CustomEvent("markerbeforedelete",{detail:{markerArea:this,markerEditor:t}})),null===(e=this._mainCanvas)||void 0===e||e.removeChild(t.container),t.dispose(),this.editors.splice(this.editors.indexOf(t),1),this._selectedMarkerEditors.splice(this._selectedMarkerEditors.indexOf(t),1),i||this.addUndoStep(),this.dispatchEvent(new CustomEvent("markerdelete",{detail:{markerArea:this,markerEditor:t}})))}deleteSelectedMarkers(){const t=[...this._selectedMarkerEditors];t.forEach(((i,e)=>this.deleteMarker(i,e!==t.length-1))),this.hideMarqueeSelectOutline()}setCurrentEditor(t){this._currentMarkerEditor!==t&&void 0!==this._currentMarkerEditor&&this.deselectEditor(this._currentMarkerEditor),this._currentMarkerEditor=t,void 0===this._currentMarkerEditor||this._currentMarkerEditor.isSelected||"new"!==this._currentMarkerEditor.state&&(this.selectEditor(this._currentMarkerEditor),this._currentMarkerEditor.select(!1))}selectEditor(t){this._selectedMarkerEditors.indexOf(t)<0&&(this._selectedMarkerEditors.length>0&&this._selectedMarkerEditors[0].select(!0),this._selectedMarkerEditors.push(t),t.select(!0),this.dispatchEvent(new CustomEvent("markerselect",{detail:{markerArea:this,markerEditor:t}})))}deselectEditor(t){const i=this._selectedMarkerEditors.length;if(t&&"creating"===t.state&&t.deselect(),i>0){const i=null!=t?t:this._selectedMarkerEditors[this._selectedMarkerEditors.length-1];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())}this.dispatchEvent(new CustomEvent("markerdeselect",{detail:{markerArea:this,markerEditor:i}}))}}onCanvasPointerDown(i){var e;if(this._manipulationStartX=i.clientX,this._manipulationStartY=i.clientY,this.touchPoints++,1===this.touchPoints&&(this.leadPointerId=i.pointerId),"touch"===i.pointerType&&1===this.touchPoints||"touch"!==i.pointerType&&0===i.button&&!i.altKey)if(void 0===this._currentMarkerEditor||"new"!==this._currentMarkerEditor.state&&"creating"!==this._currentMarkerEditor.state){if("select"===this.mode){const e=t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel),s=this.editors.find((t=>t.ownsTarget(i.target)));void 0!==s?(this.isDragging=!0,i.shiftKey?(this.selectEditor(s),this.initializeMarqueeSelection(e)):s.isSelected||(this.deselectEditor(),this.setCurrentEditor(s)),this._selectedMarkerEditors.forEach((t=>{var s;return t.pointerDown(e,null!==(s=i.target)&&void 0!==s?s:void 0,i)}))):i.target===this._marqueeSelectOutline&&this._selectedMarkerEditors.length>1?(this.isDragging=!0,this._selectedMarkerEditors.forEach((t=>{var s;return t.pointerDown(e,null!==(s=i.target)&&void 0!==s?s:void 0,i)}))):(this.setCurrentEditor(),this.deselectEditor(),this.isSelecting=!0,this.isDragging=!0,this.initializeMarqueeSelection(e),this.prevPanPoint={x:i.clientX,y:i.clientY})}}else this.isDragging=!0,this._currentMarkerEditor.pointerDown(t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel),null!==(e=i.target)&&void 0!==e?e:void 0,i);else("touch"!==i.pointerType&&(0===i.button&&i.altKey||1===i.button)||"touch"===i.pointerType&&2===this.touchPoints&&i.pointerId===this.leadPointerId)&&(this.isDragging=!0,this.isPanning=!0,this.prevPanPoint={x:i.clientX,y:i.clientY},this._mainCanvas&&(this._mainCanvas.style.cursor="grabbing"))}initializeMarqueeSelection(i){this._marqueeSelectRect.x=i.x,this._marqueeSelectRect.y=i.y,this._marqueeSelectRect.width=0,this._marqueeSelectRect.height=0,t.setAttributes(this._marqueeSelectOutline,[["x",i.x.toString()],["y",i.y.toString()],["width","0"],["height","0"]]),this._groupLayer&&!this._groupLayer.contains(this._marqueeSelectOutline)&&this._groupLayer.appendChild(this._marqueeSelectOutline)}onCanvasDblClick(i){var e;if("select"===this.mode){const s=this.editors.find((t=>t.ownsTarget(i.target)));void 0!==s&&s!==this._currentMarkerEditor&&this.setCurrentEditor(s),void 0!==this._currentMarkerEditor?this._currentMarkerEditor.dblClick(t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel),null!==(e=i.target)&&void 0!==e?e:void 0,i):this.setCurrentEditor()}}onPointerMove(i){var e;if("touch"===i.pointerType&&1===this.touchPoints||"touch"!==i.pointerType&&this.isDragging&&!i.altKey){const s=t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel);if(void 0!==this._currentMarkerEditor||this._selectedMarkerEditors.length>0)void 0!==this._currentMarkerEditor&&"edit"===this._currentMarkerEditor.state||i.preventDefault(),void 0!==this._currentMarkerEditor||this._selectedMarkerEditors.length>0?(this.showOutline(s),this._selectedMarkerEditors.length>0?this._selectedMarkerEditors.forEach((t=>t.manipulate(s,i))):null===(e=this._currentMarkerEditor)||void 0===e||e.manipulate(s,i)):this.zoomLevel>1&&this.panTo({x:i.clientX,y:i.clientY}),this.adjustMarqueeSelectOutline();else if(this.isSelecting){const e=t.clientToLocalCoordinates(this._mainCanvas,this._manipulationStartX,this._manipulationStartY,this.zoomLevel);this._marqueeSelectRect.x=Math.min(s.x,e.x),this._marqueeSelectRect.y=Math.min(s.y,e.y),this._marqueeSelectRect.width=Math.abs(i.clientX-this._manipulationStartX)/this.zoomLevel,this._marqueeSelectRect.height=Math.abs(i.clientY-this._manipulationStartY)/this.zoomLevel,t.setAttributes(this._marqueeSelectOutline,[["x",`${this._marqueeSelectRect.x}`],["y",`${this._marqueeSelectRect.y}`],["width",`${this._marqueeSelectRect.width}`],["height",`${this._marqueeSelectRect.height}`]])}}else("touch"!==i.pointerType&&this.isPanning||"touch"===i.pointerType&&2===this.touchPoints&&i.pointerId===this.leadPointerId)&&this.panTo({x:i.clientX,y:i.clientY})}showOutline(i){if(this._currentMarkerEditor&&"drop"===this._currentMarkerEditor.creationStyle&&"new"===this._currentMarkerEditor.state){void 0===this._mainCanvas||this._mainCanvas.contains(this._newMarkerOutline)||this._mainCanvas.appendChild(this._newMarkerOutline);const e=this._currentMarkerEditor.marker.defaultSize;t.setAttributes(this._newMarkerOutline,[["d",this._currentMarkerEditor.marker.getOutline()]]),this._newMarkerOutline.style.transform=`translate(${i.x-e.width/2}px, ${i.y-e.height/2}px)`}}hideOutline(){var t;(null===(t=this._mainCanvas)||void 0===t?void 0:t.contains(this._newMarkerOutline))&&this._mainCanvas.removeChild(this._newMarkerOutline)}onPointerUp(i){var e;if(this.touchPoints>0&&(this.touchPoints--,0===this.touchPoints&&(this.leadPointerId=void 0)),0===this.touchPoints)if(this.isDragging&&(void 0!==this._currentMarkerEditor||this._selectedMarkerEditors.length>0)){const s=t.clientToLocalCoordinates(this._mainCanvas,i.clientX,i.clientY,this.zoomLevel);this._selectedMarkerEditors.length>1?(this._selectedMarkerEditors.forEach((t=>t.pointerUp(s,i))),this.adjustMarqueeSelectOutline()):null===(e=this._currentMarkerEditor)||void 0===e||e.pointerUp(s,i),this.hideOutline(),this.addUndoStep()}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.isPanning=!1,this._mainCanvas&&(this._mainCanvas.style.cursor="default")}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 i=Number.MAX_VALUE,e=Number.MAX_VALUE,s=0,r=0;this._selectedMarkerEditors.forEach((t=>{const a=t.marker.getBBox();i=Math.min(i,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=i,this._marqueeSelectRect.y=e,this._marqueeSelectRect.width=s-i,this._marqueeSelectRect.height=r-e,t.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,defaultFilter:this.defaultFilter,markers:this.editors.map((t=>t.getState()))};return JSON.parse(JSON.stringify(t))}restoreState(t,i=!0){if(!this._targetImageLoaded)return void(this._stateToRestore=t);this._stateToRestore=void 0;const e=JSON.parse(JSON.stringify(t));if(this.editors.splice(0),this._mainCanvas&&this._groupLayer){for(this.hideMarqueeSelectOutline(),this.deselectEditor();this._mainCanvas.lastChild;)this._mainCanvas.removeChild(this._mainCanvas.lastChild);this.addDefsToMainCanvas(),this._mainCanvas.appendChild(this._groupLayer)}void 0===this.defaultFilter&&e.defaultFilter&&(this.defaultFilter=e.defaultFilter),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),i&&this.addUndoStep(!0),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)}adjustEditorsZoom(){this.editors.forEach((t=>{t.zoomLevel=this._zoomLevel}))}toggleLogo(){i.isLicensed("MJS3E")||i.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",this._logoUI.style.opacity="0.5";const e=this._logoUI;this._logoUI.addEventListener("mouseenter",(()=>{e.style.opacity="1"})),this._logoUI.addEventListener("mouseleave",(()=>{e.style.opacity="0.5"}));const s=document.createElement("a");s.href="https://markerjs.com/?utm_source=markerjs3&utm_medium=logo&utm_content=marker_area",s.target="_blank",s.innerHTML=N,s.title="Powered by marker.js",s.style.display="grid",s.style.alignItems="center",s.style.justifyItems="center",s.style.padding="3px",s.style.width="20px",s.style.height="20px",s.style.cursor="pointer",this._logoUI.appendChild(s),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(t=!1){if(void 0===this._currentMarkerEditor||"edit"!==this._currentMarkerEditor.state){const i=this.getState(),e=this.undoRedoManager.getLastUndoStep();if(t||!e||e.width===i.width&&e.height===i.height){this.undoRedoManager.addUndoStep(i)&&this.dispatchEvent(new CustomEvent("areastatechange",{detail:{markerArea:this}}))}else this.undoRedoManager.replaceLastUndoStep(i),this.dispatchEvent(new CustomEvent("areastatechange",{detail:{markerArea:this}}))}}undo(){this.undoStep()}undoStep(){const t=this.undoRedoManager.undo();void 0!==t&&this.restoreState(t,!1)}redo(){this.redoStep()}redoStep(){const t=this.undoRedoManager.redo();void 0!==t&&(this.restoreState(t,!1),this.dispatchEvent(new CustomEvent("areastatechange",{detail:{markerArea:this}})))}addDefs(...t){this._defs.push(...t),this._defsElement&&this._defsElement.append(...t)}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",J);class Z 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){if(this._zoomLevel=t,this._canvasContainer&&this._contentContainer&&this._mainCanvas){this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this.setEditingTargetSize();const t=Math.max(this._zoomLevel,1);this._canvasContainer.scrollTo({left:(this._mainCanvas.clientWidth*t-this._canvasContainer.clientWidth)/2,top:(this._mainCanvas.clientHeight*t-this._canvasContainer.clientHeight)/2})}}get defaultFilter(){return this._defaultFilter}set defaultFilter(t){this._defaultFilter=t}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._defs=[],this.prevPanPoint={x:0,y:0},this.touchPoints=0,this.markerTypes=[o,l,d,u,c,p,v,k,_,y,x,S,f,w,b,E,T,M],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.attachMarkerEvents=this.attachMarkerEvents.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.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onPointerOut=this.onPointerOut.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.addDefs=this.addDefs.bind(this),this.addDefaultFilterDefs=this.addDefaultFilterDefs.bind(this),this.attachShadow({mode:"open"})}connectedCallback(){this.dispatchEvent(new CustomEvent("viewinit",{detail:{markerView:this}})),i.addKeyAddListener(this.toggleLogo),this.createLayout(),this.addMainCanvas(),this.attachEvents(),this._isInitialized=!0,void 0!==this.targetImage&&this.addTargetImage(),this.setMainCanvasSize(),this.addDefaultFilterDefs(),this.toggleLogo(),this.dispatchEvent(new CustomEvent("viewshow",{detail:{markerView:this}}))}disconnectedCallback(){this.detachEvents()}createLayout(){var t;this.style.display="flex",this.style.width=""!==this.style.width?this.style.width:"100%",this.style.height=""!==this.style.height?this.style.height:"100%",this.style.position="relative",this._contentContainer=document.createElement("div"),this._contentContainer.style.display="flex",this._contentContainer.style.position="relative",this._contentContainer.style.flexGrow="2",this._contentContainer.style.flexShrink="1",this._contentContainer.style.overflow="hidden",this._canvasContainer=document.createElement("div"),this._canvasContainer.style.touchAction="pinch-zoom",this._canvasContainer.className="canvas-container",this._canvasContainer.style.display="grid",this._canvasContainer.style.gridTemplateColumns="1fr",this._canvasContainer.style.flexGrow="2",this._canvasContainer.style.flexShrink="2",this._canvasContainer.style.justifyItems="center",this._canvasContainer.style.alignItems="center",this._canvasContainer.style.overflow="auto",this._contentContainer.appendChild(this._canvasContainer),null===(t=this.shadowRoot)||void 0===t||t.appendChild(this._contentContainer)}addMainCanvas(){var i,e,s;this.width=(null===(i=this._contentContainer)||void 0===i?void 0:i.clientWidth)||0,this.height=(null===(e=this._contentContainer)||void 0===e?void 0:e.clientHeight)||0,this._mainCanvas=document.createElementNS("http://www.w3.org/2000/svg","svg"),this._mainCanvas.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.setMainCanvasSize(),this._mainCanvas.style.gridColumnStart="1",this._mainCanvas.style.gridRowStart="1",this._mainCanvas.style.pointerEvents="auto",this._mainCanvas.style.margin="10px",this._mainCanvas.style.transform=`scale(${this._zoomLevel})`,this.addDefsToMainCanvas(),this._groupLayer=t.createGroup(),this._mainCanvas.appendChild(this._groupLayer),null===(s=this._canvasContainer)||void 0===s||s.appendChild(this._mainCanvas)}addDefsToMainCanvas(){var i;this._defsElement=t.createDefs(),null===(i=this._mainCanvas)||void 0===i||i.appendChild(this._defsElement),this._defsElement.append(...this._defs)}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,e=i.naturalWidth/i.naturalHeight,s=this._targetWidth>0?this._targetWidth:this._targetHeight>0?this._targetHeight*e:i.clientWidth>0?i.clientWidth:i.naturalWidth,r=this._targetHeight>0?this._targetHeight:this._targetWidth>0?this._targetWidth/e:i.clientHeight>0?i.clientHeight:i.naturalHeight;this._targetWidth=s,this._targetHeight=r}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.zoomLevel=this._zoomLevel})),this._editingTarget.src=this.targetImage.src,this._canvasContainer.insertBefore(this._editingTarget,this._mainCanvas))}addDefaultFilterDefs(){this.addDefs(...V.getDefaultFilterSet())}addNewMarker(i){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const e=t.createGroup();this.defaultFilter&&i.applyDefaultFilter&&e.setAttribute("filter",this.defaultFilter),this._mainCanvas.appendChild(e);const s=new i(e);return this.attachMarkerEvents(s),s}attachMarkerEvents(t){t.container.addEventListener("click",(()=>{this.dispatchEvent(new CustomEvent("markerclick",{detail:{marker:t,markerView:this}}))})),t.container.addEventListener("pointerover",(()=>{this.dispatchEvent(new CustomEvent("markerover",{detail:{marker:t,markerView:this}}))})),t.container.addEventListener("pointerdown",(()=>{this.dispatchEvent(new CustomEvent("markerpointerdown",{detail:{marker:t,markerView:this}}))})),t.container.addEventListener("pointermove",(()=>{this.dispatchEvent(new CustomEvent("markerpointermove",{detail:{marker:t,markerView:this}}))})),t.container.addEventListener("pointerup",(()=>{this.dispatchEvent(new CustomEvent("markerpointerup",{detail:{marker:t,markerView:this}}))})),t.container.addEventListener("pointerenter",(()=>{this.dispatchEvent(new CustomEvent("markerpointerenter",{detail:{marker:t,markerView:this}}))})),t.container.addEventListener("pointerleave",(()=>{this.dispatchEvent(new CustomEvent("markerpointerleave",{detail:{marker:t,markerView:this}}))}))}attachEvents(){var t,i;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())),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)}detachEvents(){this.detachWindowEvents()}detachWindowEvents(){}onCanvasPointerDown(t){this.touchPoints++,1===this.touchPoints&&(this.leadPointerId=t.pointerId,this.prevPanPoint={x:t.clientX,y:t.clientY},this._mainCanvas&&(this._mainCanvas.style.cursor="grabbing"))}onPointerMove(t){this.touchPoints>0&&this.leadPointerId===t.pointerId&&this.panTo({x:t.clientX,y:t.clientY})}onPointerUp(){this.touchPoints>0&&(this.touchPoints--,0===this.touchPoints&&(this.leadPointerId=void 0),this._mainCanvas&&(this._mainCanvas.style.cursor="default"))}onPointerOut(){this.touchPoints>0&&this.touchPoints--}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);this.addDefsToMainCanvas(),void 0===this.defaultFilter&&e.defaultFilter&&(this.defaultFilter=e.defaultFilter),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)}))}panTo(t){var i;null===(i=this._canvasContainer)||void 0===i||i.scrollBy({left:this.prevPanPoint.x-t.x,top:this.prevPanPoint.y-t.y}),this.prevPanPoint=t}toggleLogo(){i.isLicensed("MJS3V")||i.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",this._logoUI.style.opacity="0.5";const e=this._logoUI;this._logoUI.addEventListener("mouseenter",(()=>{e.style.opacity="1"})),this._logoUI.addEventListener("mouseleave",(()=>{e.style.opacity="0.5"}));const s=document.createElement("a");s.href="https://markerjs.com/?utm_source=markerjs3&utm_medium=logo&utm_content=marker_view",s.target="_blank",s.innerHTML=N,s.title="Powered by marker.js",s.style.display="grid",s.style.alignItems="center",s.style.justifyItems="center",s.style.padding="3px",s.style.width="20px",s.style.height="20px",s.style.cursor="pointer",this._logoUI.appendChild(s),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")}addDefs(...t){this._defs.push(...t),this._defsElement&&this._defsElement.append(...t)}addEventListener(t,i,e){super.addEventListener(t,i,e)}removeEventListener(t,i,e){super.removeEventListener(t,i,e)}}window&&window.customElements&&void 0===window.customElements.get("mjs-marker-view")&&window.customElements.define("mjs-marker-view",Z);class K{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()}get defaultFilter(){return this._defaultFilter}set defaultFilter(t){this._defaultFilter=t}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._defs=[],this.markerTypes=[o,l,d,u,c,p,v,k,_,y,x,S,f,w,b,E,T,M],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),this.addDefs=this.addDefs.bind(this),this.addDefaultFilterDefs=this.addDefaultFilterDefs.bind(this)}init(){this.addMainCanvas(),this._isInitialized=!0,void 0!==this.targetImage&&this.addTargetImage(),this.setMainCanvasSize(),this.addDefaultFilterDefs()}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.addDefsToMainCanvas(),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)}addDefsToMainCanvas(){var i;this._defsElement=t.createDefs(),null===(i=this._mainCanvas)||void 0===i||i.appendChild(this._defsElement),this._defsElement.append(...this._defs)}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,e=i.naturalWidth/i.naturalHeight,s=this._targetWidth>0?this._targetWidth:this._targetHeight>0?this._targetHeight*e:i.naturalWidth,r=this._targetHeight>0?this._targetHeight:this._targetWidth>0?this._targetWidth/e:i.naturalHeight;this._targetWidth=s,this._targetHeight=r}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))}addDefaultFilterDefs(){this.addDefs(...V.getDefaultFilterSet())}addNewMarker(i){if(void 0===this._mainCanvas)throw new Error("Main canvas is not initialized.");const e=t.createGroup();return this.defaultFilter&&i.applyDefaultFilter&&e.setAttribute("filter",this.defaultFilter),this._mainCanvas.appendChild(e),new i(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);this.addDefsToMainCanvas(),void 0===this.defaultFilter&&e.defaultFilter&&(this.defaultFilter=e.defaultFilter),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 g(this,void 0,void 0,(function*(){if(!this.naturalSize&&this.targetWidth<=0&&this.targetHeight<=0&&(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()),yield new Promise((t=>setTimeout(t,200))),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 u=new Blob([o],{type:"image/svg+xml"}),c=l.createObjectURL(u);let p="";for(d.onload=()=>{n.drawImage(d,0,0),l.revokeObjectURL(c),p=a.toDataURL(this.imageType,this.imageQuality)},d.src=c,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}))}addDefs(...t){this._defs.push(...t),this._defsElement&&this._defsElement.append(...t)}}export{i as Activator,d as ArrowMarker,U as ArrowMarkerEditor,y as CalloutMarker,R as CalloutMarkerEditor,E as CaptionFrameMarker,Y as CaptionFrameMarkerEditor,w as CheckImageMarker,k as CoverMarker,T as CurveMarker,q as CurveMarkerEditor,f as CustomImageMarker,x as EllipseFrameMarker,S as EllipseMarker,o as FrameMarker,p as FreehandMarker,$ as FreehandMarkerEditor,z as Grip,_ as HighlightMarker,M as HighlighterMarker,C as ImageMarkerBase,X as ImageMarkerEditor,l as LineMarker,n as LinearMarkerBase,G as LinearMarkerEditor,J as MarkerArea,e as MarkerBase,B as MarkerBaseEditor,Z as MarkerView,u as MeasurementMarker,c as PolygonMarker,P as PolygonMarkerEditor,r as RectangularBoxMarkerBase,K as Renderer,L as ResizeGrip,W as RotateGrip,h as ShapeMarkerBase,O as ShapeMarkerEditor,a as ShapeOutlineMarkerBase,I as ShapeOutlineMarkerEditor,V as SvgFilters,t as SvgHelper,m as TextBlock,F as TextBlockEditor,v as TextMarker,H as TextMarkerEditor,b as XImageMarker};
 //# sourceMappingURL=markerjs3.js.map