markerjs-live/markerjs-live.esm.js

Live player for image annotations created with marker.js 2

var t=function(){function t(){}return t.createDefs=function(){return document.createElementNS("http://www.w3.org/2000/svg","defs")},t.createStylesheet=function(){var t=document.createElementNS("http://www.w3.org/2000/svg","style");return t.setAttribute("type","text/css"),t},t.setAttributes=function(t,e){for(var i=0,s=e;i<s.length;i++){var r=s[i],o=r[0],n=r[1];t.setAttribute(o,n)}},t.createRect=function(e,i,s){var r=document.createElementNS("http://www.w3.org/2000/svg","rect");return r.setAttribute("width",e.toString()),r.setAttribute("height",i.toString()),s&&t.setAttributes(r,s),r},t.createLine=function(e,i,s,r,o){var n=document.createElementNS("http://www.w3.org/2000/svg","line");return n.setAttribute("x1",e.toString()),n.setAttribute("y1",i.toString()),n.setAttribute("x2",s.toString()),n.setAttribute("y2",r.toString()),o&&t.setAttributes(n,o),n},t.createPolygon=function(e,i){var s=document.createElementNS("http://www.w3.org/2000/svg","polygon");return s.setAttribute("points",e),i&&t.setAttributes(s,i),s},t.createCircle=function(e,i){var s=document.createElementNS("http://www.w3.org/2000/svg","circle");return s.setAttribute("cx",(e/2).toString()),s.setAttribute("cy",(e/2).toString()),s.setAttribute("r",e.toString()),i&&t.setAttributes(s,i),s},t.createEllipse=function(e,i,s){var r=document.createElementNS("http://www.w3.org/2000/svg","ellipse");return r.setAttribute("cx",(e/2).toString()),r.setAttribute("cy",(i/2).toString()),r.setAttribute("rx",(e/2).toString()),r.setAttribute("ry",(i/2).toString()),s&&t.setAttributes(r,s),r},t.createGroup=function(e){var i=document.createElementNS("http://www.w3.org/2000/svg","g");return e&&t.setAttributes(i,e),i},t.createTransform=function(){return document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGTransform()},t.createMarker=function(e,i,s,r,o,n,h){var a=document.createElementNS("http://www.w3.org/2000/svg","marker");return t.setAttributes(a,[["id",e],["orient",i],["markerWidth",s.toString()],["markerHeight",r.toString()],["refX",o.toString()],["refY",n.toString()]]),a.appendChild(h),a},t.createText=function(e){var i=document.createElementNS("http://www.w3.org/2000/svg","text");return i.setAttribute("x","0"),i.setAttribute("y","0"),e&&t.setAttributes(i,e),i},t.createTSpan=function(e,i){var s=document.createElementNS("http://www.w3.org/2000/svg","tspan");return s.textContent=e,i&&t.setAttributes(s,i),s},t.createImage=function(e){var i=document.createElementNS("http://www.w3.org/2000/svg","image");return e&&t.setAttributes(i,e),i},t.createPoint=function(t,e){var i=document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGPoint();return i.x=t,i.y=e,i},t.createPath=function(e,i){var s=document.createElementNS("http://www.w3.org/2000/svg","path");return s.setAttribute("d",e),i&&t.setAttributes(s,i),s},t}(),e=function(){function t(){}return t.addKey=function(e){t.key=e},Object.defineProperty(t,"isLicensed",{get:function(){return!!t.key&&new RegExp(/^MJSL-[A-Z][0-9]{3}-[A-Z][0-9]{3}-[0-9]{4}$/,"i").test(t.key)},enumerable:!1,configurable:!0}),t}(),i=function(t,e){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])})(t,e)};function s(t,e){function s(){this.constructor=t}i(t,e),t.prototype=null===e?Object.create(e):(s.prototype=e.prototype,new s)}var r=function(){function e(e){this._outerContainer=e;var i=t.createGroup();this._outerContainer.appendChild(i),this._container=i}return Object.defineProperty(e.prototype,"outerContainer",{get:function(){return this._outerContainer},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"container",{get:function(){return this._container},enumerable:!1,configurable:!0}),e.prototype.ownsTarget=function(t){return!1},e.prototype.select=function(){},e.prototype.deselect=function(){},e.prototype.pointerDown=function(t,e){},e.prototype.dblClick=function(t,e){},e.prototype.pointerUp=function(t){},e.prototype.dispose=function(){},e.prototype.addMarkerVisualToContainer=function(t){this.container.childNodes.length>0?this.container.insertBefore(t,this.container.childNodes[0]):this.container.appendChild(t)},e.prototype.restoreState=function(t){this.notes=t.notes},e.prototype.scale=function(t,e){},e.typeName="MarkerBase",e}(),o=function(){function t(){}return t.toITransformMatrix=function(t){return{a:t.a,b:t.b,c:t.c,d:t.d,e:t.e,f:t.f}},t.toSVGMatrix=function(t,e){return t.a=e.a,t.b=e.b,t.c=e.c,t.d=e.d,t.e=e.e,t.f=e.f,t},t}(),n=function(e){function i(i){var s=e.call(this,i)||this;return s.left=0,s.top=0,s.width=0,s.height=0,s.defaultSize={x:50,y:20},s.offsetX=0,s.offsetY=0,s.rotationAngle=0,s.container.transform.baseVal.appendItem(t.createTransform()),s}return s(i,e),Object.defineProperty(i.prototype,"centerX",{get:function(){return this.left+this.width/2},enumerable:!1,configurable:!0}),Object.defineProperty(i.prototype,"centerY",{get:function(){return this.top+this.height/2},enumerable:!1,configurable:!0}),Object.defineProperty(i.prototype,"visual",{get:function(){return this._visual},set:function(e){this._visual=e;var i=t.createTransform();this._visual.transform.baseVal.appendItem(i)},enumerable:!1,configurable:!0}),i.prototype.ownsTarget=function(t){return!!e.prototype.ownsTarget.call(this,t)},i.prototype.pointerDown=function(t,i){e.prototype.pointerDown.call(this,t,i),this.select()},i.prototype.pointerUp=function(t){e.prototype.pointerUp.call(this,t)},i.prototype.moveVisual=function(t){this.visual.style.transform="translate("+t.x+"px, "+t.y+"px)"},i.prototype.resize=function(t){this.setSize()},i.prototype.setSize=function(){this.moveVisual({x:this.left,y:this.top})},i.prototype.rotate=function(t){if(Math.abs(t.x-this.centerX)>.1){var e=Math.sign(t.x-this.centerX);this.rotationAngle=180*Math.atan((t.y-this.centerY)/(t.x-this.centerX))/Math.PI+90*e,this.applyRotation()}},i.prototype.applyRotation=function(){var t=this.container.transform.baseVal.getItem(0);t.setRotate(this.rotationAngle,this.centerX,this.centerY),this.container.transform.baseVal.replaceItem(t,0)},i.prototype.rotatePoint=function(e){if(0===this.rotationAngle)return e;var i=this.container.getCTM(),s=t.createPoint(e.x,e.y);return{x:(s=s.matrixTransform(i)).x,y:s.y}},i.prototype.unrotatePoint=function(e){if(0===this.rotationAngle)return e;var i=this.container.getCTM();i=i.inverse();var s=t.createPoint(e.x,e.y);return{x:(s=s.matrixTransform(i)).x,y:s.y}},i.prototype.select=function(){e.prototype.select.call(this)},i.prototype.deselect=function(){e.prototype.deselect.call(this)},i.prototype.restoreState=function(t){e.prototype.restoreState.call(this,t);var i=t;this.left=i.left,this.top=i.top,this.width=i.width,this.height=i.height,this.rotationAngle=i.rotationAngle,this.visual.transform.baseVal.getItem(0).setMatrix(o.toSVGMatrix(this.visual.transform.baseVal.getItem(0).matrix,i.visualTransformMatrix)),this.container.transform.baseVal.getItem(0).setMatrix(o.toSVGMatrix(this.container.transform.baseVal.getItem(0).matrix,i.containerTransformMatrix))},i.prototype.scale=function(t,i){e.prototype.scale.call(this,t,i);var s=this.rotatePoint({x:this.left,y:this.top}),r=this.unrotatePoint({x:s.x*t,y:s.y*i});this.left=r.x,this.top=r.y,this.width=this.width*t,this.height=this.height*i},i}(r),h=function(e){function i(t){var i=e.call(this,t)||this;return i.fillColor="transparent",i.strokeColor="transparent",i.strokeWidth=0,i.strokeDasharray="",i.opacity=1,i.setStrokeColor=i.setStrokeColor.bind(i),i.setFillColor=i.setFillColor.bind(i),i.setStrokeWidth=i.setStrokeWidth.bind(i),i.setStrokeDasharray=i.setStrokeDasharray.bind(i),i.createVisual=i.createVisual.bind(i),i}return s(i,e),i.prototype.ownsTarget=function(t){return!(!e.prototype.ownsTarget.call(this,t)&&t!==this.visual)},i.prototype.createVisual=function(){this.visual=t.createRect(1,1,[["fill",this.fillColor],["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-dasharray",this.strokeDasharray],["opacity",this.opacity.toString()]]),this.addMarkerVisualToContainer(this.visual)},i.prototype.pointerDown=function(t,i){e.prototype.pointerDown.call(this,t,i)},i.prototype.resize=function(t){e.prototype.resize.call(this,t),this.setSize()},i.prototype.setSize=function(){e.prototype.setSize.call(this),t.setAttributes(this.visual,[["width",this.width.toString()],["height",this.height.toString()]])},i.prototype.pointerUp=function(t){e.prototype.pointerUp.call(this,t),this.setSize()},i.prototype.setStrokeColor=function(e){this.strokeColor=e,this.visual&&t.setAttributes(this.visual,[["stroke",this.strokeColor]])},i.prototype.setFillColor=function(e){this.fillColor=e,this.visual&&t.setAttributes(this.visual,[["fill",this.fillColor]])},i.prototype.setStrokeWidth=function(e){this.strokeWidth=e,this.visual&&t.setAttributes(this.visual,[["stroke-width",this.strokeWidth.toString()]])},i.prototype.setStrokeDasharray=function(e){this.strokeDasharray=e,this.visual&&t.setAttributes(this.visual,[["stroke-dasharray",this.strokeDasharray]])},i.prototype.restoreState=function(t){var i=t;this.fillColor=i.fillColor,this.strokeColor=i.strokeColor,this.strokeWidth=i.strokeWidth,this.strokeDasharray=i.strokeDasharray,this.opacity=i.opacity,this.createVisual(),e.prototype.restoreState.call(this,t),this.setSize()},i.prototype.scale=function(t,i){e.prototype.scale.call(this,t,i),this.setSize()},i.title="Rectangle marker",i}(n),a=function(t){function e(e){return t.call(this,e)||this}return s(e,t),e.typeName="FrameMarker",e.title="Frame marker",e}(h),l=function(t){function e(e){var i=t.call(this,e)||this;return i.x1=0,i.y1=0,i.x2=0,i.y2=0,i.defaultLength=50,i}return s(e,t),e.prototype.ownsTarget=function(e){return!!t.prototype.ownsTarget.call(this,e)},e.prototype.pointerDown=function(e,i){t.prototype.pointerDown.call(this,e,i)},e.prototype.pointerUp=function(e){t.prototype.pointerUp.call(this,e)},e.prototype.adjustVisual=function(){},e.prototype.resize=function(t){this.adjustVisual()},e.prototype.select=function(){t.prototype.select.call(this)},e.prototype.deselect=function(){t.prototype.deselect.call(this)},e.prototype.restoreState=function(e){t.prototype.restoreState.call(this,e);var i=e;this.x1=i.x1,this.y1=i.y1,this.x2=i.x2,this.y2=i.y2},e.prototype.scale=function(e,i){t.prototype.scale.call(this,e,i),this.x1=this.x1*e,this.y1=this.y1*i,this.x2=this.x2*e,this.y2=this.y2*i,this.adjustVisual()},e}(r),p=function(e){function i(t){var i=e.call(this,t)||this;return i.strokeColor="transparent",i.strokeWidth=0,i.strokeDasharray="",i.setStrokeColor=i.setStrokeColor.bind(i),i.setStrokeWidth=i.setStrokeWidth.bind(i),i.setStrokeDasharray=i.setStrokeDasharray.bind(i),i}return s(i,e),i.prototype.ownsTarget=function(t){return!(!e.prototype.ownsTarget.call(this,t)&&t!==this.visual&&t!==this.selectorLine&&t!==this.visibleLine)},i.prototype.createVisual=function(){this.visual=t.createGroup(),this.selectorLine=t.createLine(this.x1,this.y1,this.x2,this.y2,[["stroke","transparent"],["stroke-width",(this.strokeWidth+10).toString()]]),this.visibleLine=t.createLine(this.x1,this.y1,this.x2,this.y2,[["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()]]),this.visual.appendChild(this.selectorLine),this.visual.appendChild(this.visibleLine),this.addMarkerVisualToContainer(this.visual)},i.prototype.pointerDown=function(t,i){e.prototype.pointerDown.call(this,t,i)},i.prototype.adjustVisual=function(){this.selectorLine.setAttribute("x1",this.x1.toString()),this.selectorLine.setAttribute("y1",this.y1.toString()),this.selectorLine.setAttribute("x2",this.x2.toString()),this.selectorLine.setAttribute("y2",this.y2.toString()),this.visibleLine.setAttribute("x1",this.x1.toString()),this.visibleLine.setAttribute("y1",this.y1.toString()),this.visibleLine.setAttribute("x2",this.x2.toString()),this.visibleLine.setAttribute("y2",this.y2.toString()),t.setAttributes(this.visibleLine,[["stroke",this.strokeColor]]),t.setAttributes(this.visibleLine,[["stroke-width",this.strokeWidth.toString()]]),t.setAttributes(this.visibleLine,[["stroke-dasharray",this.strokeDasharray.toString()]])},i.prototype.setStrokeColor=function(t){this.strokeColor=t,this.adjustVisual()},i.prototype.setStrokeWidth=function(t){this.strokeWidth=t,this.adjustVisual()},i.prototype.setStrokeDasharray=function(t){this.strokeDasharray=t,this.adjustVisual()},i.prototype.restoreState=function(t){e.prototype.restoreState.call(this,t);var i=t;this.strokeColor=i.strokeColor,this.strokeWidth=i.strokeWidth,this.strokeDasharray=i.strokeDasharray,this.createVisual(),this.adjustVisual()},i.typeName="LineMarker",i.title="Line marker",i}(l),c=function(e){function i(t){var i=e.call(this,t)||this;return i.color="transparent",i.padding=5,i.text="",i.wrapText=!1,i.defaultSize={x:100,y:30},i.setColor=i.setColor.bind(i),i.setFont=i.setFont.bind(i),i.renderText=i.renderText.bind(i),i.sizeText=i.sizeText.bind(i),i.setSize=i.setSize.bind(i),i.getWrappedText=i.getWrappedText.bind(i),i}return s(i,e),i.prototype.ownsTarget=function(t){if(e.prototype.ownsTarget.call(this,t)||t===this.visual||t===this.textElement||t===this.bgRectangle)return!0;var i=!1;return this.textElement.childNodes.forEach((function(e){e===t&&(i=!0)})),i},i.prototype.createVisual=function(){this.visual=t.createGroup(),this.bgRectangle=t.createRect(1,1,[["fill","transparent"]]),this.visual.appendChild(this.bgRectangle),this.textElement=t.createText([["fill",this.color],["font-family",this.fontFamily],["font-size","16px"],["x","0"],["y","0"]]),this.textElement.transform.baseVal.appendItem(t.createTransform()),this.textElement.transform.baseVal.appendItem(t.createTransform()),this.visual.appendChild(this.textElement),this.addMarkerVisualToContainer(this.visual),this.renderText()},i.prototype.pointerDown=function(t,i){e.prototype.pointerDown.call(this,t,i),this.pointerDownPoint=t},i.prototype.getWrappedText=function(){function t(t){var e=t[0].length;return t.forEach((function(t){t.length>e&&(e=t.length)})),.35*e/t.length}if(""!==this.text){for(var e=this.text.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/),i=1*this.width/this.height,s=new(Array.bind.apply(Array,function(){for(var t=0,e=0,i=arguments.length;e<i;e++)t+=arguments[e].length;var s=Array(t),r=0;for(e=0;e<i;e++)for(var o=arguments[e],n=0,h=o.length;n<h;n++,r++)s[r]=o[n];return s}([void 0],e))),r=t(s),o=Number.MAX_VALUE,n=function(){var i=s[0];s.forEach((function(t){t.length>i.length&&(i=t)})),(o=i.lastIndexOf(" ",o-1))>0?(s=[],e.forEach((function(t){for(var e=t;e.length>o;){var i=e.lastIndexOf(" ",o);i<0&&(i=e.indexOf(" ")),i>0?(s.push(e.substring(0,i)),e=e.substring(i).trim()):(s.push(e),e="")}s.push(e)})),r=t(s)):r=-1};r>i;)n();return s.join("\r\n")}return this.text},i.prototype.renderText=function(){for(var e=this;this.textElement.lastChild;)this.textElement.removeChild(this.textElement.lastChild);(this.wrapText?this.getWrappedText():this.text).split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/).forEach((function(i){e.textElement.appendChild(t.createTSpan(""===i.trim()?" ":i.trim(),[["x","0"],["dy","1.2em"]]))})),setTimeout(this.sizeText,10)},i.prototype.getTextScale=function(){var t=this.textElement.getBBox(),e=1;if(t.width>0&&t.height>0){var i=(1*this.width-this.width*this.padding*2/100)/t.width,s=(1*this.height-this.height*this.padding*2/100)/t.height;e=Math.min(i,s)}return e},i.prototype.getTextPosition=function(t){var e=this.textElement.getBBox(),i=0,s=0;return e.width>0&&e.height>0&&(i=(this.width-e.width*t)/2,s=this.height/2-e.height*t/2),{x:i,y:s}},i.prototype.sizeText=function(){var t=this.textElement.getBBox(),e=this.getTextScale(),i=this.getTextPosition(e);i.y-=t.y*e,navigator.userAgent.indexOf("Edge/")>-1?this.textElement.style.transform="translate("+i.x+"px, "+i.y+"px) scale("+e+", "+e+")":(this.textElement.transform.baseVal.getItem(0).setTranslate(i.x,i.y),this.textElement.transform.baseVal.getItem(1).setScale(e,e))},i.prototype.resize=function(t){e.prototype.resize.call(this,t),this.setSize(),this.sizeText()},i.prototype.setSize=function(){e.prototype.setSize.call(this),t.setAttributes(this.visual,[["width",this.width.toString()],["height",this.height.toString()]]),t.setAttributes(this.bgRectangle,[["width",this.width.toString()],["height",this.height.toString()]])},i.prototype.pointerUp=function(t){e.prototype.pointerUp.call(this,t),this.setSize()},i.prototype.deselect=function(){e.prototype.deselect.call(this)},i.prototype.dblClick=function(t,i){e.prototype.dblClick.call(this,t,i)},i.prototype.setColor=function(e){t.setAttributes(this.textElement,[["fill",e]]),this.color=e},i.prototype.setFont=function(e){t.setAttributes(this.textElement,[["font-family",e]]),this.fontFamily=e,this.renderText()},i.prototype.restoreState=function(t){var i=t;this.color=i.color,this.fontFamily=i.fontFamily,this.padding=i.padding,this.text=i.text,this.wrapText=!0===i.wrapText,this.createVisual(),e.prototype.restoreState.call(this,t),this.setSize(),this.wrapText&&this.renderText()},i.prototype.scale=function(t,i){e.prototype.scale.call(this,t,i),this.setSize(),this.sizeText()},i.typeName="TextMarker",i.title="Text marker",i}(n),u=function(e){function i(t){var i=e.call(this,t)||this;return i.color="transparent",i.lineWidth=3,i}return s(i,e),i.prototype.ownsTarget=function(t){return!(!e.prototype.ownsTarget.call(this,t)&&t!==this.visual&&t!==this.drawingImage)},i.prototype.createVisual=function(){this.visual=t.createGroup(),this.drawingImage=t.createImage(),this.visual.appendChild(this.drawingImage);var e=t.createTransform();this.visual.transform.baseVal.appendItem(e),this.addMarkerVisualToContainer(this.visual)},i.prototype.pointerDown=function(t,i){e.prototype.pointerDown.call(this,t,i)},i.prototype.resize=function(i){e.prototype.resize.call(this,i),t.setAttributes(this.visual,[["width",this.width.toString()],["height",this.height.toString()]]),t.setAttributes(this.drawingImage,[["width",this.width.toString()],["height",this.height.toString()]])},i.prototype.pointerUp=function(t){e.prototype.pointerUp.call(this,t)},i.prototype.select=function(){e.prototype.select.call(this)},i.prototype.deselect=function(){e.prototype.deselect.call(this)},i.prototype.setDrawingImage=function(){t.setAttributes(this.drawingImage,[["width",this.width.toString()],["height",this.height.toString()]]),t.setAttributes(this.drawingImage,[["href",this.drawingImgUrl]]),this.moveVisual({x:this.left,y:this.top})},i.prototype.restoreState=function(t){this.createVisual(),e.prototype.restoreState.call(this,t),this.drawingImgUrl=t.drawingImgUrl,this.setDrawingImage()},i.prototype.scale=function(t,i){e.prototype.scale.call(this,t,i),this.setDrawingImage()},i.typeName="FreehandMarker",i.title="Freehand marker",i}(n),d=function(e){function i(t){var i=e.call(this,t)||this;return i.arrowType="end",i.arrowBaseHeight=10,i.arrowBaseWidth=10,i.getArrowPoints=i.getArrowPoints.bind(i),i.setArrowType=i.setArrowType.bind(i),i}return s(i,e),i.prototype.ownsTarget=function(t){return!(!e.prototype.ownsTarget.call(this,t)&&t!==this.arrow1&&t!==this.arrow2)},i.prototype.getArrowPoints=function(t,e){var i=this.arrowBaseWidth+2*this.strokeWidth,s=this.arrowBaseHeight+2*this.strokeWidth;return t-i/2+","+(e+s/2)+" "+t+","+(e-s/2)+" "+(t+i/2)+","+(e+s/2)},i.prototype.createTips=function(){this.arrow1=t.createPolygon(this.getArrowPoints(this.x1,this.y1),[["fill",this.strokeColor]]),this.arrow1.transform.baseVal.appendItem(t.createTransform()),this.visual.appendChild(this.arrow1),this.arrow2=t.createPolygon(this.getArrowPoints(this.x2,this.y2),[["fill",this.strokeColor]]),this.arrow2.transform.baseVal.appendItem(t.createTransform()),this.visual.appendChild(this.arrow2)},i.prototype.pointerDown=function(t,i){e.prototype.pointerDown.call(this,t,i)},i.prototype.adjustVisual=function(){if(e.prototype.adjustVisual.call(this),this.arrow1&&this.arrow2){this.arrow1.style.display="both"===this.arrowType||"start"===this.arrowType?"":"none",this.arrow2.style.display="both"===this.arrowType||"end"===this.arrowType?"":"none",t.setAttributes(this.arrow1,[["points",this.getArrowPoints(this.x1,this.y1)],["fill",this.strokeColor]]),t.setAttributes(this.arrow2,[["points",this.getArrowPoints(this.x2,this.y2)],["fill",this.strokeColor]]);var i=0;Math.abs(this.x1-this.x2)>.1&&(i=180*Math.atan((this.y2-this.y1)/(this.x2-this.x1))/Math.PI+90*Math.sign(this.x1-this.x2));var s=this.arrow1.transform.baseVal.getItem(0);s.setRotate(i,this.x1,this.y1),this.arrow1.transform.baseVal.replaceItem(s,0);var r=this.arrow2.transform.baseVal.getItem(0);r.setRotate(i+180,this.x2,this.y2),this.arrow2.transform.baseVal.replaceItem(r,0)}},i.prototype.setArrowType=function(t){this.arrowType=t,this.adjustVisual()},i.prototype.restoreState=function(t){e.prototype.restoreState.call(this,t);var i=t;this.arrowType=i.arrowType,this.createTips(),this.adjustVisual()},i.typeName="ArrowMarker",i.title="Arrow marker",i}(p),y=function(t){function e(e){var i=t.call(this,e)||this;return i.strokeWidth=0,i}return s(e,t),e.typeName="CoverMarker",e.title="Cover marker",e}(h),g=function(e){function i(t){var i=e.call(this,t)||this;return i.setOpacity=i.setOpacity.bind(i),i.strokeWidth=0,i}return s(i,e),i.prototype.setOpacity=function(e){this.opacity=e,this.visual&&t.setAttributes(this.visual,[["opacity",this.opacity.toString()]])},i.typeName="HighlightMarker",i.title="Highlight marker",i}(y),f=function(e){function i(t){var i=e.call(this,t)||this;return i.bgColor="transparent",i.tipPosition={x:0,y:0},i.tipBase1Position={x:0,y:0},i.tipBase2Position={x:0,y:0},i.defaultSize={x:100,y:30},i.setBgColor=i.setBgColor.bind(i),i.getTipPoints=i.getTipPoints.bind(i),i.positionTip=i.positionTip.bind(i),i.setTipPoints=i.setTipPoints.bind(i),i}return s(i,e),i.prototype.ownsTarget=function(t){return e.prototype.ownsTarget.call(this,t)||this.tip===t},i.prototype.createTip=function(){t.setAttributes(this.bgRectangle,[["fill",this.bgColor],["rx","10px"]]),this.tip=t.createPolygon(this.getTipPoints(),[["fill",this.bgColor]]),this.visual.appendChild(this.tip)},i.prototype.pointerDown=function(t,i){e.prototype.pointerDown.call(this,t,i)},i.prototype.pointerUp=function(t){e.prototype.pointerUp.call(this,t)},i.prototype.setBgColor=function(e){t.setAttributes(this.bgRectangle,[["fill",e]]),t.setAttributes(this.tip,[["fill",e]]),this.bgColor=e},i.prototype.getTipPoints=function(){return this.setTipPoints(),this.tipBase1Position.x+","+this.tipBase1Position.y+" "+this.tipBase2Position.x+","+this.tipBase2Position.y+" "+this.tipPosition.x+","+this.tipPosition.y},i.prototype.setTipPoints=function(t){void 0===t&&(t=!1);var e=Math.min(this.height/2,15),i=this.height/5;t&&(this.tipPosition={x:e+i/2,y:this.height+20});var s=Math.atan(this.height/2/(this.width/2));if(this.tipPosition.x<this.width/2&&this.tipPosition.y<this.height/2)s<Math.atan((this.height/2-this.tipPosition.y)/(this.width/2-this.tipPosition.x))?(i=this.width/5,e=Math.min(this.width/2,15),this.tipBase1Position={x:e,y:0},this.tipBase2Position={x:e+i,y:0}):(this.tipBase1Position={x:0,y:e},this.tipBase2Position={x:0,y:e+i});else if(this.tipPosition.x>=this.width/2&&this.tipPosition.y<this.height/2){s<Math.atan((this.height/2-this.tipPosition.y)/(this.tipPosition.x-this.width/2))?(i=this.width/5,e=Math.min(this.width/2,15),this.tipBase1Position={x:this.width-e-i,y:0},this.tipBase2Position={x:this.width-e,y:0}):(this.tipBase1Position={x:this.width,y:e},this.tipBase2Position={x:this.width,y:e+i})}else if(this.tipPosition.x>=this.width/2&&this.tipPosition.y>=this.height/2){s<Math.atan((this.tipPosition.y-this.height/2)/(this.tipPosition.x-this.width/2))?(i=this.width/5,e=Math.min(this.width/2,15),this.tipBase1Position={x:this.width-e-i,y:this.height},this.tipBase2Position={x:this.width-e,y:this.height}):(this.tipBase1Position={x:this.width,y:this.height-e-i},this.tipBase2Position={x:this.width,y:this.height-e})}else{s<Math.atan((this.tipPosition.y-this.height/2)/(this.width/2-this.tipPosition.x))?(i=this.width/5,e=Math.min(this.width/2,15),this.tipBase1Position={x:e,y:this.height},this.tipBase2Position={x:e+i,y:this.height}):(this.tipBase1Position={x:0,y:this.height-e},this.tipBase2Position={x:0,y:this.height-e-i})}},i.prototype.resize=function(t){e.prototype.resize.call(this,t),this.positionTip()},i.prototype.positionTip=function(){t.setAttributes(this.tip,[["points",this.getTipPoints()]])},i.prototype.select=function(){this.positionTip(),e.prototype.select.call(this)},i.prototype.restoreState=function(t){var i=t;this.bgColor=i.bgColor,this.tipPosition=i.tipPosition,e.prototype.restoreState.call(this,t),this.createTip(),this.setTipPoints()},i.prototype.scale=function(t,i){e.prototype.scale.call(this,t,i),this.tipPosition={x:this.tipPosition.x*t,y:this.tipPosition.y*i},this.positionTip()},i.typeName="CalloutMarker",i.title="Callout marker",i}(c),v=function(e){function i(t){var i=e.call(this,t)||this;return i.fillColor="transparent",i.strokeColor="transparent",i.strokeWidth=0,i.strokeDasharray="",i.opacity=1,i.setStrokeColor=i.setStrokeColor.bind(i),i.setFillColor=i.setFillColor.bind(i),i.setStrokeWidth=i.setStrokeWidth.bind(i),i.setStrokeDasharray=i.setStrokeDasharray.bind(i),i.setOpacity=i.setOpacity.bind(i),i.createVisual=i.createVisual.bind(i),i}return s(i,e),i.prototype.ownsTarget=function(t){return!(!e.prototype.ownsTarget.call(this,t)&&t!==this.visual)},i.prototype.createVisual=function(){this.visual=t.createEllipse(this.width/2,this.height/2,[["fill",this.fillColor],["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-dasharray",this.strokeDasharray],["opacity",this.opacity.toString()]]),this.addMarkerVisualToContainer(this.visual)},i.prototype.pointerDown=function(t,i){e.prototype.pointerDown.call(this,t,i)},i.prototype.resize=function(t){e.prototype.resize.call(this,t),this.setSize()},i.prototype.setSize=function(){e.prototype.setSize.call(this),t.setAttributes(this.visual,[["cx",(this.width/2).toString()],["cy",(this.height/2).toString()],["rx",(this.width/2).toString()],["ry",(this.height/2).toString()]])},i.prototype.pointerUp=function(t){e.prototype.pointerUp.call(this,t),this.setSize()},i.prototype.setStrokeColor=function(e){this.strokeColor=e,this.visual&&t.setAttributes(this.visual,[["stroke",this.strokeColor]])},i.prototype.setFillColor=function(e){this.fillColor=e,this.visual&&t.setAttributes(this.visual,[["fill",this.fillColor]])},i.prototype.setStrokeWidth=function(e){this.strokeWidth=e,this.visual&&t.setAttributes(this.visual,[["stroke-width",this.strokeWidth.toString()]])},i.prototype.setStrokeDasharray=function(e){this.strokeDasharray=e,this.visual&&t.setAttributes(this.visual,[["stroke-dasharray",this.strokeDasharray]])},i.prototype.setOpacity=function(e){this.opacity=e,this.visual&&t.setAttributes(this.visual,[["opacity",this.opacity.toString()]])},i.prototype.restoreState=function(t){var i=t;this.fillColor=i.fillColor,this.strokeColor=i.strokeColor,this.strokeWidth=i.strokeWidth,this.strokeDasharray=i.strokeDasharray,this.opacity=i.opacity,this.createVisual(),e.prototype.restoreState.call(this,t),this.setSize()},i.prototype.scale=function(t,i){e.prototype.scale.call(this,t,i),this.setSize()},i.typeName="EllipseMarker",i.title="Ellipse marker",i}(n),m=function(e){function i(t){return e.call(this,t)||this}return s(i,e),Object.defineProperty(i.prototype,"tipLength",{get:function(){return 10+3*this.strokeWidth},enumerable:!1,configurable:!0}),i.prototype.ownsTarget=function(t){return!(!e.prototype.ownsTarget.call(this,t)&&t!==this.tip1&&t!==this.tip2)},i.prototype.createTips=function(){this.tip1=t.createLine(this.x1-this.tipLength/2,this.y1,this.x1+this.tipLength/2,this.y1,[["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()]]),this.tip1.transform.baseVal.appendItem(t.createTransform()),this.visual.appendChild(this.tip1),this.tip2=t.createLine(this.x2-this.tipLength/2,this.y2,this.x2+this.tipLength/2,this.y2,[["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()]]),this.tip2.transform.baseVal.appendItem(t.createTransform()),this.visual.appendChild(this.tip2)},i.prototype.pointerDown=function(t,i){e.prototype.pointerDown.call(this,t,i)},i.prototype.adjustVisual=function(){if(e.prototype.adjustVisual.call(this),this.tip1&&this.tip2&&(t.setAttributes(this.tip1,[["x1",(this.x1-this.tipLength/2).toString()],["y1",this.y1.toString()],["x2",(this.x1+this.tipLength/2).toString()],["y2",this.y1.toString()],["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()]]),t.setAttributes(this.tip2,[["x1",(this.x2-this.tipLength/2).toString()],["y1",this.y2.toString()],["x2",(this.x2+this.tipLength/2).toString()],["y2",this.y2.toString()],["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()]]),Math.abs(this.x1-this.x2)>.1)){var i=180*Math.atan((this.y2-this.y1)/(this.x2-this.x1))/Math.PI+90*Math.sign(this.x1-this.x2),s=this.tip1.transform.baseVal.getItem(0);s.setRotate(i,this.x1,this.y1),this.tip1.transform.baseVal.replaceItem(s,0);var r=this.tip2.transform.baseVal.getItem(0);r.setRotate(i+180,this.x2,this.y2),this.tip2.transform.baseVal.replaceItem(r,0)}},i.prototype.restoreState=function(t){e.prototype.restoreState.call(this,t),this.createTips(),this.adjustVisual()},i.typeName="MeasurementMarker",i.title="Measurement marker",i}(p),k=function(t){function e(e){var i=t.call(this,e)||this;return i.fillColor="transparent",i}return s(e,t),e.typeName="EllipseFrameMarker",e.title="Ellipse frame marker",e}(v),w=function(e){function i(t){var i=e.call(this,t)||this;return i.strokeColor="transparent",i.strokeWidth=0,i.strokeDasharray="",i.curveX=0,i.curveY=0,i.setStrokeColor=i.setStrokeColor.bind(i),i.setStrokeWidth=i.setStrokeWidth.bind(i),i.setStrokeDasharray=i.setStrokeDasharray.bind(i),i.adjustVisual=i.adjustVisual.bind(i),i.resize=i.resize.bind(i),i}return s(i,e),i.prototype.ownsTarget=function(t){return!(!e.prototype.ownsTarget.call(this,t)&&t!==this.visual&&t!==this.selectorCurve&&t!==this.visibleCurve)},i.prototype.getPathD=function(){return"M "+this.x1+" "+this.y1+" Q "+this.curveX+" "+this.curveY+", "+this.x2+" "+this.y2},i.prototype.createVisual=function(){this.visual=t.createGroup(),this.selectorCurve=t.createPath(this.getPathD(),[["stroke","transparent"],["stroke-width",(this.strokeWidth+10).toString()],["fill","transparent"]]),this.visibleCurve=t.createPath(this.getPathD(),[["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["fill","transparent"]]),this.visual.appendChild(this.selectorCurve),this.visual.appendChild(this.visibleCurve),this.addMarkerVisualToContainer(this.visual)},i.prototype.pointerDown=function(t,i){e.prototype.pointerDown.call(this,t,i)},i.prototype.adjustVisual=function(){this.selectorCurve.setAttribute("d",this.getPathD()),this.visibleCurve.setAttribute("d",this.getPathD()),t.setAttributes(this.visibleCurve,[["stroke",this.strokeColor]]),t.setAttributes(this.visibleCurve,[["stroke-width",this.strokeWidth.toString()]]),t.setAttributes(this.visibleCurve,[["stroke-dasharray",this.strokeDasharray.toString()]])},i.prototype.setStrokeColor=function(t){this.strokeColor=t,this.adjustVisual()},i.prototype.setStrokeWidth=function(t){this.strokeWidth=t,this.adjustVisual()},i.prototype.setStrokeDasharray=function(t){this.strokeDasharray=t,this.adjustVisual()},i.prototype.scale=function(t,i){this.curveX=this.curveX*t,this.curveY=this.curveY*i,e.prototype.scale.call(this,t,i)},i.prototype.restoreState=function(t){e.prototype.restoreState.call(this,t);var i=t;this.strokeColor=i.strokeColor,this.strokeWidth=i.strokeWidth,this.strokeDasharray=i.strokeDasharray,this.curveX=i.curveX,this.curveY=i.curveY,this.createVisual(),this.adjustVisual()},i.typeName="CurveMarker",i.title="Curve marker",i}(l),x=function(e){function i(t){var i=e.call(this,t)||this;return i.fillColor="transparent",i.strokeColor="transparent",i.strokeWidth=0,i.strokeDasharray="",i.textColor="transparent",i.fontSize="1rem",i.captionText="",i.PADDING=5,i.captionBoxWidth=0,i.captionBoxHeight=0,i.createVisual=i.createVisual.bind(i),i.sizeCaption=i.sizeCaption.bind(i),i.setCaptionText=i.setCaptionText.bind(i),i}return s(i,e),i.prototype.ownsTarget=function(t){return!(!e.prototype.ownsTarget.call(this,t)&&t!==this.visual&&t!==this.frame&&t!==this.captionBg&&t!==this.captionElement)},i.prototype.createVisual=function(){this.visual=t.createGroup(),this.addMarkerVisualToContainer(this.visual),this.captionBg=t.createRect(1,1,[["fill",this.fillColor]]),this.visual.appendChild(this.captionBg),this.captionElement=t.createText([["fill",this.textColor],["font-family",this.fontFamily]]),this.captionElement.style.fontSize=this.fontSize,this.captionElement.style.textAnchor="start",this.captionElement.style.dominantBaseline="text-before-edge",this.captionElement.textContent=this.captionText,this.visual.appendChild(this.captionElement),this.frame=t.createRect(this.width,this.height,[["fill","transparent"],["stroke",this.strokeColor],["stroke-width",this.strokeWidth.toString()],["stroke-dasharray",this.strokeDasharray]]),this.visual.appendChild(this.frame),this.sizeCaption()},i.prototype.setCaptionText=function(t){this.captionText=t,this.captionElement.textContent=this.captionText,this.sizeCaption()},i.prototype.resize=function(t){e.prototype.resize.call(this,t),this.setSize()},i.prototype.sizeCaption=function(){var e=this.captionElement.getBBox();""!==this.captionText.trim()?(this.captionBoxWidth=e.width+2*this.PADDING,this.captionBoxHeight=e.height+2*this.PADDING):(this.captionBoxWidth=0,this.captionBoxHeight=0),t.setAttributes(this.captionBg,[["width",this.captionBoxWidth.toString()],["height",this.captionBoxHeight.toString()],["clip-path","path('M0,0 H"+this.width+" V"+this.height+" H"+-this.width+" Z')"]]),t.setAttributes(this.captionElement,[["x",this.PADDING.toString()],["y",this.PADDING.toString()],["clip-path","path('M0,0 H"+(this.width-this.PADDING)+" V"+this.height+" H"+(-this.width-this.PADDING)+" Z')"]])},i.prototype.setSize=function(){e.prototype.setSize.call(this),t.setAttributes(this.frame,[["width",this.width.toString()],["height",this.height.toString()]]),this.sizeCaption()},i.prototype.restoreState=function(t){var i=t;this.fillColor=i.fillColor,this.strokeColor=i.strokeColor,this.strokeWidth=i.strokeWidth,this.strokeDasharray=i.strokeDasharray,this.textColor=i.textColor,this.fontFamily=i.fontFamily,this.captionText=i.captionText,this.fontSize=i.fontSize,this.createVisual(),e.prototype.restoreState.call(this,t),this.setSize()},i.prototype.scale=function(t,i){e.prototype.scale.call(this,t,i),this.setSize()},i.typeName="CaptionFrameMarker",i.title="Caption frame marker",i}(n),b=function(){function t(t){this._classNamePrefixBase="__markerjslive_",this.classes=[],this.rules=[],this._classNamePrefix=this._classNamePrefixBase+"_"+t+"_"}return Object.defineProperty(t.prototype,"classNamePrefixBase",{get:function(){return this._classNamePrefixBase},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"classNamePrefix",{get:function(){return this._classNamePrefix},enumerable:!1,configurable:!0}),t.prototype.addClass=function(t){return void 0===this.styleSheet&&this.addStyleSheet(),t.name=""+this.classNamePrefix+t.localName,this.classes.push(t),this.styleSheet.sheet.insertRule("."+t.name+" {"+t.style+"}",this.styleSheet.sheet.cssRules.length),t},t.prototype.addRule=function(t){void 0===this.styleSheet&&this.addStyleSheet(),this.rules.push(t),this.styleSheet.sheet.insertRule(t.selector+" {"+t.style+"}",this.styleSheet.sheet.cssRules.length)},t.prototype.addStyleSheet=function(){var t;this.styleSheet=document.createElement("style"),(null!==(t=this.styleSheetRoot)&&void 0!==t?t:document.head).appendChild(this.styleSheet)},t.prototype.removeStyleSheet=function(){var t;this.styleSheet&&((null!==(t=this.styleSheetRoot)&&void 0!==t?t:document.head).removeChild(this.styleSheet),this.styleSheet=void 0)},t}(),S=function(t,e){this.selector=t,this.style=e},C=function(t,e){this.localName=t,this.style=e},T=function(){function t(){this.create=[],this.close=[],this.load=[],this.select=[],this.over=[],this.pointerdown=[],this.pointermove=[],this.pointerup=[],this.pointerenter=[],this.pointerleave=[]}return t.prototype.addEventListener=function(t,e){this[t].push(e)},t.prototype.removeEventListener=function(t,e){var i=this[t].indexOf(e);i>-1&&this[t].splice(i,1)},t}(),P=function(){function i(t){this.touchPoints=0,this.availableMarkerTypes=[a,u,d,c,k,v,g,f,m,y,p,w,x],this.markers=[],this.isDragging=!1,this._isOpen=!1,this.plugins=[],this.MARKER_CONTAINER_CLASS_SUFFIX="marker-container",this.isPointerIn=!1,this.eventListeners=new T,this._instanceNo=i.instanceCounter++,this.styles=new b(this.instanceNo),this.target=t,this.targetRoot=document.body,this.open=this.open.bind(this),this.setTopLeft=this.setTopLeft.bind(this),this.addNewMarker=this.addNewMarker.bind(this),this.setCurrentMarker=this.setCurrentMarker.bind(this),this.onPointerDown=this.onPointerDown.bind(this),this.onDblClick=this.onDblClick.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onKeyUp=this.onKeyUp.bind(this),this.close=this.close.bind(this),this.closeUI=this.closeUI.bind(this),this.clientToLocalCoordinates=this.clientToLocalCoordinates.bind(this),this.onWindowResize=this.onWindowResize.bind(this),this.removeMarker=this.removeMarker.bind(this)}return Object.defineProperty(i.prototype,"instanceNo",{get:function(){return this._instanceNo},enumerable:!1,configurable:!0}),Object.defineProperty(i.prototype,"isOpen",{get:function(){return this._isOpen},enumerable:!1,configurable:!0}),i.prototype.open=function(){this.setupResizeObserver(),this.setEditingTarget(),this.setTopLeft(),this.initMarkerCanvas(),this.initOverlay(),this.attachEvents(),e.isLicensed||this.addLogo(),this._isOpen=!0},i.prototype.show=function(t){var e=this;this.showUI(),this.open(),this.plugins.forEach((function(t){return t.init(e)})),this.eventListeners.create.forEach((function(t){return t(e)})),this.restoreState(t),this.eventListeners.load.forEach((function(t){return t(e)}))},i.prototype.close=function(){var t=this;this.isOpen&&(this.coverDiv&&this.closeUI(),this.targetObserver&&this.targetObserver.unobserve(this.target),this._isOpen=!1,this.eventListeners.close.forEach((function(e){return e(t)})))},i.prototype.setupResizeObserver=function(){var t=this;window.ResizeObserver&&(this.targetObserver=new ResizeObserver((function(){t.resize(t.target.clientWidth,t.target.clientHeight)})),this.targetObserver.observe(this.target))},i.prototype.resize=function(t,e){var i=t/this.imageWidth,s=e/this.imageHeight;this.imageWidth=Math.round(t),this.imageHeight=Math.round(e),this.editingTarget.width=this.imageWidth,this.editingTarget.height=this.imageHeight,this.editingTarget.style.width=this.imageWidth+"px",this.editingTarget.style.height=this.imageHeight+"px",this.markerImage.setAttribute("width",this.imageWidth.toString()),this.markerImage.setAttribute("height",this.imageHeight.toString()),this.markerImage.setAttribute("viewBox","0 0 "+this.imageWidth.toString()+" "+this.imageHeight.toString()),this.markerImageHolder.style.width=this.imageWidth+"px",this.markerImageHolder.style.height=this.imageHeight+"px",this.overlayContainer.style.width=this.imageWidth+"px",this.overlayContainer.style.height=this.imageHeight+"px",this.coverDiv.style.width=this.imageWidth.toString()+"px",this.positionLogo(),this.scaleMarkers(i,s)},i.prototype.scaleMarkers=function(t,e){var i;this.currentMarker&&this.currentMarker instanceof c||(i=this.currentMarker,this.setCurrentMarker()),this.markers.forEach((function(i){return i.scale(t,e)})),void 0!==i&&this.setCurrentMarker(i)},i.prototype.setEditingTarget=function(){this.imageWidth=Math.round(this.target.clientWidth),this.imageHeight=Math.round(this.target.clientHeight),this.editingTarget.width=this.imageWidth,this.editingTarget.height=this.imageHeight,this.editingTarget.style.width=this.imageWidth+"px",this.editingTarget.style.height=this.imageHeight+"px"},i.prototype.setTopLeft=function(){var t=this.editingTarget.getBoundingClientRect(),e=this.editorCanvas.getBoundingClientRect();this.left=t.left-e.left,this.top=t.top-e.top},i.prototype.initMarkerCanvas=function(){this.markerImageHolder=document.createElement("div"),this.markerImageHolder.style.setProperty("touch-action","pinch-zoom"),this.markerImage=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.markerImage.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.markerImage.setAttribute("width",this.imageWidth.toString()),this.markerImage.setAttribute("height",this.imageHeight.toString()),this.markerImage.setAttribute("viewBox","0 0 "+this.imageWidth.toString()+" "+this.imageHeight.toString()),this.markerImage.style.pointerEvents="auto",this.markerImageHolder.style.position="absolute",this.markerImageHolder.style.width=this.imageWidth+"px",this.markerImageHolder.style.height=this.imageHeight+"px",this.markerImageHolder.style.transformOrigin="top left",this.positionMarkerImage(),this.defs=t.createDefs(),this.markerImage.appendChild(this.defs),this.markerImageHolder.appendChild(this.markerImage),this.editorCanvas.appendChild(this.markerImageHolder)},i.prototype.initOverlay=function(){this.overlayContainer=document.createElement("div"),this.overlayContainer.style.position="absolute",this.overlayContainer.style.left="0px",this.overlayContainer.style.top="0px",this.overlayContainer.style.width=this.imageWidth+"px",this.overlayContainer.style.height=this.imageHeight+"px",this.overlayContainer.style.display="flex",this.markerImageHolder.appendChild(this.overlayContainer)},i.prototype.positionMarkerImage=function(){this.markerImageHolder.style.top=this.top+"px",this.markerImageHolder.style.left=this.left+"px"},i.prototype.attachEvents=function(){var t=this;this.markerImage.addEventListener("pointerdown",this.onPointerDown),this.markerImage.addEventListener("dblclick",this.onDblClick),window.addEventListener("pointermove",this.onPointerMove),window.addEventListener("pointerup",this.onPointerUp),window.addEventListener("pointercancel",(function(){t.touchPoints>0&&t.touchPoints--})),window.addEventListener("pointerout",(function(){t.touchPoints>0&&t.touchPoints--})),window.addEventListener("pointerleave",this.onPointerUp),window.addEventListener("resize",this.onWindowResize),window.addEventListener("keyup",this.onKeyUp)},i.prototype.addLogo=function(){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";var t=document.createElement("a");t.href="https://markerjs.com/",t.target="_blank",t.innerHTML='<svg viewBox="0 0 112 96" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill="#e5f20d" fill-opacity=".647" d="M0 40.386h111.96V95.62H0z"/><path d="M93.61 61.452c0 .987-.328 1.831-.987 2.53-.657.7-1.52 1.048-2.591 1.048-1.481 0-2.222-.74-2.222-2.22 0-16.617-.533-29.347-1.604-38.192-1.068-8.842-2.92-13.265-5.552-13.265-4.443 0-10.94 15.509-19.497 46.52v.124c0 .987-.328 1.831-.987 2.53-.657.7-1.52 1.048-2.592 1.048-1.48 0-2.22-.74-2.22-2.22 0-3.29.165-8.392.493-15.302.33-7.732.494-13.82.494-18.262 0-6.17-.186-10.55-.556-13.142-.37-2.591-1.172-3.887-2.406-3.887-2.796 0-6.333 5.12-10.612 15.363C38.494 34.367 34.01 46.44 29.32 60.34l-1.11 3.209a5.714 5.714 0 01-1.42 2.097c-.617.578-1.295.864-2.036.864-.987 0-1.644-.081-1.974-.247-.328-.162-.533-.656-.617-1.48-.41-4.03-.74-9.418-.987-16.165-.163-1.728-.329-4.566-.494-8.515-.822-13.901-1.562-23.3-2.221-28.196-.657-4.893-.987-7.628-.987-8.205 0-.657.33-1.44.987-2.345.659-.903 1.276-1.357 1.85-1.357 1.319 0 2.387.947 3.21 2.838.411.906.863 4.526 1.357 10.859.493 6.335.905 14.19 1.233 23.568l.617 18.88c4.527-13.983 9.216-26.673 14.068-38.068C45.65 6.686 50.093.988 54.123.988c2.715 0 4.566 1.974 5.553 5.923.987 3.949 1.481 9.667 1.481 17.152 0 3.949-.081 9.625-.247 17.029l-.123 5.676c3.373-11.762 6.725-21.634 10.057-29.615 3.331-7.979 6.685-11.97 10.056-11.97 8.475 0 12.71 18.757 12.71 56.269z" fill-rule="nonzero"/></svg>',t.title="Powered by marker.js",t.style.display="grid",t.style.alignItems="center",t.style.justifyItems="center",t.style.padding="3px",t.style.width="20px",t.style.height="20px",this.logoUI.appendChild(t),this.editorCanvas.appendChild(this.logoUI),this.logoUI.style.position="absolute",this.logoUI.style.pointerEvents="all",this.positionLogo()},i.prototype.positionLogo=function(){this.logoUI&&(this.logoUI.style.left=this.markerImageHolder.offsetLeft+10+"px",this.logoUI.style.top=this.markerImageHolder.offsetTop+this.markerImageHolder.offsetHeight-this.logoUI.clientHeight-10+"px")},i.prototype.showUI=function(){this.coverDiv=document.createElement("div"),this.coverDiv.className=this.styles.classNamePrefixBase+" "+this.styles.classNamePrefix,this.coverDiv.style.fontSize="16px",this.coverDiv.style.userSelect="none",this.coverDiv.style.position="absolute",this.coverDiv.style.top=this.target.offsetTop.toString()+"px",this.coverDiv.style.left=this.target.offsetLeft.toString()+"px",this.coverDiv.style.width=this.target.offsetWidth.toString()+"px",this.coverDiv.style.zIndex="5",this.targetRoot.appendChild(this.coverDiv),this.uiDiv=document.createElement("div"),this.uiDiv.style.display="flex",this.uiDiv.style.flexDirection="column",this.uiDiv.style.flexGrow="2",this.uiDiv.style.margin="0px",this.uiDiv.style.border="0px",this.coverDiv.appendChild(this.uiDiv),this.contentDiv=document.createElement("div"),this.contentDiv.style.display="flex",this.contentDiv.style.flexDirection="row",this.contentDiv.style.flexGrow="2",this.contentDiv.style.flexShrink="1",this.uiDiv.appendChild(this.contentDiv),this.editorCanvas=document.createElement("div"),this.editorCanvas.style.flexGrow="2",this.editorCanvas.style.flexShrink="1",this.editorCanvas.style.position="relative",this.editorCanvas.style.overflow="hidden",this.editorCanvas.style.display="flex",this.editorCanvas.style.pointerEvents="none",this.contentDiv.appendChild(this.editorCanvas),this.editingTarget=document.createElement("canvas"),this.editorCanvas.appendChild(this.editingTarget)},i.prototype.closeUI=function(){this.targetRoot.removeChild(this.coverDiv)},i.prototype.removeMarker=function(t){this.markerImage.removeChild(t.container),this.markers.indexOf(t)>-1&&this.markers.splice(this.markers.indexOf(t),1),t.dispose()},i.prototype.restoreState=function(t){var e=this;for(this.markers.splice(0);this.markerImage.lastChild;)this.markerImage.removeChild(this.markerImage.lastChild);t.markers.forEach((function(t){var i=e.availableMarkerTypes.find((function(e){return e.typeName===t.typeName}));if(void 0!==i){var s=e.addNewMarker(i);s.restoreState(t),e.markers.push(s)}})),t.width&&t.height&&(t.width!==this.imageWidth||t.height!==this.imageHeight)&&this.scaleMarkers(this.imageWidth/t.width,this.imageHeight/t.height)},i.prototype.addNewMarker=function(e){var i=t.createGroup();return i.setAttribute("class",""+this.styles.classNamePrefix+this.MARKER_CONTAINER_CLASS_SUFFIX),this.markerImage.appendChild(i),new e(i)},i.prototype.setCurrentMarker=function(t){var e=this,i=this.currentMarker!==t;void 0!==this.currentMarker&&this.currentMarker.deselect(),this.currentMarker=t,void 0!==this.currentMarker&&this.currentMarker.select(),i&&this.eventListeners.select.forEach((function(i){return i(e,t)}))},i.prototype.onPointerDown=function(t){var e=this;if(this.touchPoints++,1===this.touchPoints||"touch"!==t.pointerType){var i=this.markers.find((function(e){return e.ownsTarget(t.target)}));void 0!==i?(this.setCurrentMarker(i),this.isDragging=!0,this.currentMarker.pointerDown(this.clientToLocalCoordinates(t.clientX,t.clientY),t.target)):this.setCurrentMarker(),this.eventListeners.pointerdown.length>0&&this.eventListeners.pointerdown.forEach((function(s){return s(e,t,i)}))}},i.prototype.onDblClick=function(t){var e=this.markers.find((function(e){return e.ownsTarget(t.target)}));void 0!==e&&e!==this.currentMarker&&this.setCurrentMarker(e),void 0!==this.currentMarker?this.currentMarker.dblClick(this.clientToLocalCoordinates(t.clientX,t.clientY),t.target):this.setCurrentMarker()},i.prototype.onPointerMove=function(t){var e=this;if(1!==this.touchPoints&&"touch"===t.pointerType||(void 0!==this.currentMarker&&this.currentMarker.ownsTarget(t.target)||this.isDragging)&&t.preventDefault(),this.eventListeners.over.length>0||this.eventListeners.pointermove.length>0){var i=this.markers.find((function(e){return e.ownsTarget(t.target)}));i!==this.hoveredMarker&&(this.hoveredMarker=i,this.eventListeners.over.forEach((function(t){return t(e,e.hoveredMarker)}))),this.eventListeners.pointermove.forEach((function(s){return s(e,t,i)})),this.isPointerIn||void 0===i&&this.markerImage!==t.target||(this.isPointerIn=!0,this.eventListeners.pointerenter.forEach((function(s){return s(e,t,i)}))),this.isPointerIn&&void 0===i&&this.markerImage!==t.target&&(this.isPointerIn=!1,this.eventListeners.pointerleave.forEach((function(s){return s(e,t,i)})))}},i.prototype.onPointerUp=function(t){var e=this;if(this.touchPoints>0&&this.touchPoints--,0===this.touchPoints&&this.isDragging&&void 0!==this.currentMarker&&this.currentMarker.pointerUp(this.clientToLocalCoordinates(t.clientX,t.clientY)),this.isDragging=!1,this.eventListeners.pointerup.length>0){var i=this.markers.find((function(e){return e.ownsTarget(t.target)}));this.eventListeners.pointerup.forEach((function(s){return s(e,t,i)}))}},i.prototype.onKeyUp=function(t){void 0===this.currentMarker||"Delete"!==t.key&&"Backspace"!==t.key||(this.removeMarker(this.currentMarker),this.setCurrentMarker(),this.markerImage.style.cursor="default")},i.prototype.clientToLocalCoordinates=function(t,e){var i=this.markerImage.getBoundingClientRect();return{x:t-i.left,y:e-i.top}},i.prototype.onWindowResize=function(){this.positionUI()},i.prototype.positionUI=function(){this.setTopLeft(),this.coverDiv.style.top=this.target.offsetTop.toString()+"px",this.coverDiv.style.left=this.target