@sandemo/easy-annotator 0.1.0

package/dist/markerjs3-DI_cywfl.js

@@ -0,0 +1,2669 @@
+class r {
+  static createDefs() {
+    return document.createElementNS("http://www.w3.org/2000/svg", "defs");
+  }
+  static setAttributes(t, i) {
+    for (const [e, s] of i) t.setAttribute(e, s);
+  }
+  static createRect(t, i, e) {
+    const s = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    return s.setAttribute("width", t.toString()), s.setAttribute("height", i.toString()), e && r.setAttributes(s, e), s;
+  }
+  static createLine(t, i, e, s, a) {
+    const h = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    return h.setAttribute("x1", t.toString()), h.setAttribute("y1", i.toString()), h.setAttribute("x2", e.toString()), h.setAttribute("y2", s.toString()), a && r.setAttributes(h, a), h;
+  }
+  static createPolygon(t, i) {
+    const e = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+    return e.setAttribute("points", t), i && r.setAttributes(e, i), e;
+  }
+  static createCircle(t, i) {
+    const e = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    return e.setAttribute("cx", (t / 2).toString()), e.setAttribute("cy", (t / 2).toString()), e.setAttribute("r", t.toString()), i && r.setAttributes(e, i), e;
+  }
+  static createEllipse(t, i, e) {
+    const s = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+    return s.setAttribute("cx", (t / 2).toString()), s.setAttribute("cy", (i / 2).toString()), s.setAttribute("rx", (t / 2).toString()), s.setAttribute("ry", (i / 2).toString()), e && r.setAttributes(s, e), s;
+  }
+  static createGroup(t) {
+    const i = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    return t && r.setAttributes(i, t), i;
+  }
+  static createTransform() {
+    return document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGTransform();
+  }
+  static createMarker(t, i, e, s, a, h, o) {
+    const n = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+    return r.setAttributes(n, [["id", t], ["orient", i], ["markerWidth", e.toString()], ["markerHeight", s.toString()], ["refX", a.toString()], ["refY", h.toString()]]), n.appendChild(o), n;
+  }
+  static createText(t) {
+    const i = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    return i.setAttribute("x", "0"), i.setAttribute("y", "0"), t && r.setAttributes(i, t), i;
+  }
+  static createTSpan(t, i) {
+    const e = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+    return e.textContent = t, i && r.setAttributes(e, i), e;
+  }
+  static createImage(t) {
+    const i = document.createElementNS("http://www.w3.org/2000/svg", "image");
+    return t && r.setAttributes(i, t), i;
+  }
+  static createPoint(t, i) {
+    const e = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGPoint();
+    return e.x = t, e.y = i, e;
+  }
+  static createPath(t, i) {
+    const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    return e.setAttribute("d", t), i && r.setAttributes(e, i), e;
+  }
+  static createForeignObject(t) {
+    const i = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
+    return i.setAttribute("x", "0"), i.setAttribute("y", "0"), t && r.setAttributes(i, t), i;
+  }
+  static clientToLocalCoordinates(t, i, e, s = 1) {
+    if (t) {
+      const a = t.getBoundingClientRect();
+      return { x: (i - a.left) / s, y: (e - a.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(t, i, e) {
+    const s = document.createElementNS("http://www.w3.org/2000/svg", "filter");
+    return s.id = t, i && r.setAttributes(s, i), e && (s.innerHTML = e), s;
+  }
+}
+class c {
+  static addKey(t, i) {
+    c.keys.set(t, i), c.keyAddListeners.forEach((e) => {
+      e();
+    });
+  }
+  static addKeyAddListener(t) {
+    c.keyAddListeners.push(t);
+  }
+  static removeKeyAddListener(t) {
+    const i = c.keyAddListeners.indexOf(t);
+    i > -1 && c.keyAddListeners.splice(i, 1);
+  }
+  static isLicensed(t) {
+    if (c.keys.has(t)) {
+      const i = new RegExp(`${t}-[A-Z][0-9]{3}-[A-Z][0-9]{3}-[0-9]{4}`, "i"), e = c.keys.get(t);
+      return e !== void 0 && i.test(e);
+    }
+    return !1;
+  }
+}
+c.keys = /* @__PURE__ */ new Map(), c.keyAddListeners = new Array();
+class b {
+  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, a;
+    this.notes = t.notes, this._strokeColor = (i = t.strokeColor) !== null && i !== void 0 ? i : this._strokeColor, this._strokeWidth = (e = t.strokeWidth) !== null && e !== void 0 ? e : this._strokeWidth, this._strokeDasharray = (s = t.strokeDasharray) !== null && s !== void 0 ? s : this._strokeDasharray, this._opacity = (a = t.opacity) !== null && a !== void 0 ? a : this._opacity;
+  }
+  scale(t, i) {
+  }
+  getBBox() {
+    return this.container.getBBox();
+  }
+}
+b.typeName = "MarkerBase", b.applyDefaultFilter = !0;
+class I {
+  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 b {
+  get centerX() {
+    return this.left + this.width / 2;
+  }
+  get centerY() {
+    return this.top + this.height / 2;
+  }
+  get visual() {
+    return this._visual;
+  }
+  set visual(t) {
+    this._visual = t;
+    const i = r.createTransform();
+    this._visual.transform.baseVal.appendItem(i);
+  }
+  constructor(t) {
+    super(t), this.left = 0, this.top = 0, this.width = 0, this.height = 0, this.rotationAngle = 0, this.rotatePoint = this.rotatePoint.bind(this), this.unrotatePoint = this.unrotatePoint.bind(this), this.container.transform.baseVal.appendItem(r.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) > 0.1) {
+      const i = Math.sign(t.x - this.centerX);
+      this.rotationAngle = 180 * Math.atan((t.y - this.centerY) / (t.x - this.centerX)) / Math.PI + 90 * i, this.applyRotation();
+    }
+  }
+  applyRotation() {
+    const t = this.container.transform.baseVal.getItem(0);
+    t.setRotate(this.rotationAngle, this.centerX, this.centerY), this.container.transform.baseVal.replaceItem(t, 0);
+  }
+  rotatePoint(t) {
+    if (this.rotationAngle === 0) return t;
+    const i = this.container.getCTM();
+    if (i === null) return t;
+    let e = r.createPoint(t.x, t.y);
+    return e = e.matrixTransform(i), { x: e.x, y: e.y };
+  }
+  unrotatePoint(t) {
+    if (this.rotationAngle === 0) return t;
+    let i = this.container.getCTM();
+    if (i === null) return t;
+    i = i.inverse();
+    let e = r.createPoint(t.x, t.y);
+    return e = e.matrixTransform(i), { x: e.x, y: e.y };
+  }
+  getOutline() {
+    return `M 0 0 
+    H ${this.defaultSize} 
+    V ${this.defaultSize} 
+    H 0 
+    V 0 Z`;
+  }
+  getState() {
+    return Object.assign({ left: this.left, top: this.top, width: this.width, height: this.height, rotationAngle: this.rotationAngle, visualTransformMatrix: I.toITransformMatrix(this.visual.transform.baseVal.getItem(0).matrix), containerTransformMatrix: I.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(I.toSVGMatrix(this.visual.transform.baseVal.getItem(0).matrix, i.visualTransformMatrix)), this.container.transform.baseVal.getItem(0).setMatrix(I.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 }), a = { x: Math.min(t.x, i.x, e.x, s.x), y: Math.min(t.y, i.y, e.y, s.y) }, h = Math.max(t.x, i.x, e.x, s.x), o = Math.max(t.y, i.y, e.y, s.y);
+    return new DOMRect(a.x, a.y, h - a.x, o - a.y);
+  }
+}
+class j extends R {
+  applyStrokeColor() {
+    this.visual && r.setAttributes(this.visual, [["stroke", this._strokeColor]]);
+  }
+  applyStrokeWidth() {
+    this.visual && r.setAttributes(this.visual, [["stroke-width", this._strokeWidth.toString()]]);
+  }
+  applyStrokeDasharray() {
+    this.visual && r.setAttributes(this.visual, [["stroke-dasharray", this._strokeDasharray]]);
+  }
+  applyOpacity() {
+    this.visual && r.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 = r.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 && r.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 && r.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();
+  }
+}
+j.title = "Shape outline marker";
+class $ extends j {
+  applyFillColor() {
+    this.visual && r.setAttributes(this.visual, [["fill", this._fillColor]]);
+  }
+  constructor(t) {
+    super(t), this._fillColor = "transparent", this.createVisual = this.createVisual.bind(this);
+  }
+  createVisual() {
+    super.createVisual(), this.visual && r.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();
+  }
+}
+$.title = "Shape marker";
+class k extends j {
+  constructor(t) {
+    super(t), this.strokeColor = "#ff0000", this.strokeWidth = 3;
+  }
+  getPath(t = this.width, i = this.height) {
+    return `M 0 0 
+      H ${t} 
+      V ${i} 
+      H 0 
+      V 0 Z`;
+  }
+}
+k.typeName = "FrameMarker", k.title = "Frame marker";
+class et extends b {
+  applyStrokeColor() {
+    this.lineVisual && r.setAttributes(this.lineVisual, [["stroke", this._strokeColor]]), this.startTerminatorVisual && this.endTerminatorVisual && (r.setAttributes(this.startTerminatorVisual, [["stroke", this._strokeColor], ["fill", this._strokeColor]]), r.setAttributes(this.endTerminatorVisual, [["stroke", this._strokeColor], ["fill", this._strokeColor]]));
+  }
+  applyStrokeWidth() {
+    this.lineVisual && r.setAttributes(this.lineVisual, [["stroke-width", this._strokeWidth.toString()]]), this.selectorVisual && r.setAttributes(this.selectorVisual, [["stroke-width", Math.max(this._strokeWidth, 8).toString()]]);
+  }
+  applyStrokeDasharray() {
+    this.lineVisual && r.setAttributes(this.lineVisual, [["stroke-dasharray", this._strokeDasharray]]);
+  }
+  applyOpacity() {
+    this.visibleVisual && r.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 = r.createGroup(), this.selectorVisual = r.createPath(this.getPath(), [["stroke", "transparent"], ["fill", "transparent"], ["stroke-width", Math.max(this.strokeWidth, 8).toString()]]), this.visibleVisual = r.createGroup([["opacity", this.opacity.toString()]]), this.lineVisual = r.createPath(this.getPath(), [["stroke", this.strokeColor], ["fill", this.strokeColor], ["stroke-width", this.strokeWidth.toString()], ["stroke-linejoin", "round"], ["stroke-dasharray", this.strokeDasharray.toString()]]), this.startTerminatorVisual = r.createPath(this.getStartTerminatorPath(), [["stroke", this.strokeColor], ["fill", this.strokeColor], ["stroke-width", this.strokeWidth.toString()], ["stroke-linejoin", "round"]]), this.endTerminatorVisual = r.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 && (r.setAttributes(this.selectorVisual, [["d", this.getPath()]]), r.setAttributes(this.visibleVisual, [["opacity", this.opacity.toString()]]), r.setAttributes(this.lineVisual, [["d", this.getPath()], ["stroke", this.strokeColor], ["fill", this.fillColor], ["stroke-width", this.strokeWidth.toString()], ["stroke-dasharray", this.strokeDasharray.toString()]]), r.setAttributes(this.startTerminatorVisual, [["d", this.getStartTerminatorPath()], ["stroke", this.strokeColor], ["fill", this.strokeColor], ["stroke-width", this.strokeWidth.toString()]]), r.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 v extends et {
+  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}`;
+  }
+}
+v.typeName = "LineMarker", v.title = "Line marker";
+class f extends v {
+  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: 0.7, angle: Math.atan2(s, e), arrowWidth: i };
+  }
+  getStartTerminatorPath() {
+    const { arrowHeight: t, arrowDipFactor: i, angle: e, arrowWidth: s } = this.getArrowProperties(), a = this.x1 + t * i * Math.cos(e), h = this.y1 + t * i * Math.sin(e), o = this.x1 + t * Math.cos(e), n = this.y1 + t * Math.sin(e), l = o + s * Math.sin(e), u = n - s * Math.cos(e), p = o - s * Math.sin(e), _ = n + s * Math.cos(e);
+    return this.arrowType === "start" || this.arrowType === "both" ? `M ${a} ${h}
+    L ${l} ${u} L ${this.x1} ${this.y1} L ${p} ${_} L ${a} ${h}
+    L ${a} ${h}` : "";
+  }
+  getEndTerminatorPath() {
+    const { arrowHeight: t, arrowDipFactor: i, angle: e, arrowWidth: s } = this.getArrowProperties(), a = this.x2 - t * i * Math.cos(e), h = this.y2 - t * i * Math.sin(e), o = this.x2 - t * Math.cos(e), n = this.y2 - t * Math.sin(e), l = o + s * Math.sin(e), u = n - s * Math.cos(e), p = o - s * Math.sin(e), _ = n + s * Math.cos(e);
+    return this.arrowType === "end" || this.arrowType === "both" ? `M ${a} ${h} 
+    L ${l} ${u} L ${this.x2} ${this.y2} L ${p} ${_} L ${a} ${h} Z` : "";
+  }
+  applyStrokeWidth() {
+    super.applyStrokeWidth(), this.adjustVisual();
+  }
+  getState() {
+    const t = Object.assign({ arrowType: this.arrowType }, super.getState());
+    return t.typeName = f.typeName, t;
+  }
+  restoreState(t) {
+    const i = t;
+    this.arrowType = i.arrowType, super.restoreState(t);
+  }
+}
+f.typeName = "ArrowMarker", f.title = "Arrow marker";
+class M extends v {
+  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)}
+      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();
+  }
+}
+M.typeName = "MeasurementMarker", M.title = "Measurement marker";
+class x extends b {
+  applyStrokeColor() {
+    this.visibleVisual && r.setAttributes(this.visibleVisual, [["stroke", this._strokeColor]]);
+  }
+  applyFillColor() {
+    this.visibleVisual && r.setAttributes(this.visibleVisual, [["fill", this._fillColor]]);
+  }
+  applyStrokeWidth() {
+    this.visibleVisual && r.setAttributes(this.visibleVisual, [["stroke-width", this._strokeWidth.toString()]]), this.selectorVisual && r.setAttributes(this.selectorVisual, [["stroke-width", Math.max(this._strokeWidth, 8).toString()]]);
+  }
+  applyStrokeDasharray() {
+    this.visibleVisual && r.setAttributes(this.visibleVisual, [["stroke-dasharray", this._strokeDasharray]]);
+  }
+  applyOpacity() {
+    this.visibleVisual && r.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) => `${i === 0 ? "M" : "L"}${t.x},${t.y}`).join(" ") + (this.stage !== "creating" ? " Z" : "") : "M0,0";
+  }
+  createVisual() {
+    this.visual = r.createGroup(), this.visibleVisual = r.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 = r.createGroup(), this.visual.appendChild(this.selectorVisual), this.points.forEach(() => {
+      this.addSelectorLine();
+    }));
+  }
+  adjustVisual() {
+    this.selectorVisual && this.visibleVisual && (r.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 t = this.points.length - this.selectorVisualLines.length;
+      if (t > 0) for (let i = 0; i < t; i++) this.addSelectorLine();
+      else if (t < 0) for (let i = 0; i < -t; i++) this.selectorVisual.removeChild(this.selectorVisualLines.pop());
+      this.selectorVisualLines.forEach((i, e) => {
+        r.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 t = r.createLine(0, 0, 0, 0, [["stroke", "transparent"], ["stroke-width", Math.max(this.strokeWidth, 8).toString()]]);
+    this.selectorVisual.appendChild(t), this.selectorVisualLines.push(t);
+  }
+  getState() {
+    const t = Object.assign({ points: this.points, fillColor: this.fillColor }, super.getState());
+    return t.typeName = x.typeName, t;
+  }
+  restoreState(t) {
+    super.restoreState(t);
+    const i = t;
+    this.points = i.points, i.fillColor !== void 0 && (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();
+  }
+}
+x.typeName = "PolygonMarker", x.title = "Polygon marker";
+class y extends b {
+  applyStrokeColor() {
+    this.visibleVisual && r.setAttributes(this.visibleVisual, [["stroke", this._strokeColor]]);
+  }
+  applyStrokeWidth() {
+    this.visibleVisual && r.setAttributes(this.visibleVisual, [["stroke-width", this._strokeWidth.toString()]]), this.selectorVisual && r.setAttributes(this.selectorVisual, [["stroke-width", Math.max(this._strokeWidth, 8).toString()]]);
+  }
+  applyStrokeDasharray() {
+    this.visibleVisual && r.setAttributes(this.visibleVisual, [["stroke-dasharray", this._strokeDasharray]]);
+  }
+  applyOpacity() {
+    this.visibleVisual && r.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) => `${i === 0 ? "M" : "L"}${t.x},${t.y}`).join(" ") : "M0,0";
+  }
+  createVisual() {
+    this.visual = r.createGroup(), this.selectorVisual = r.createPath(this.getPath(), [["stroke", "transparent"], ["fill", "transparent"], ["stroke-width", Math.max(this.strokeWidth, 8).toString()]]), this.visibleVisual = r.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 t = this.getPath();
+      r.setAttributes(this.selectorVisual, [["d", t]]), r.setAttributes(this.visibleVisual, [["d", t]]), r.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 Q(d, t, i, e) {
+  return new (i || (i = Promise))(function(s, a) {
+    function h(l) {
+      try {
+        n(e.next(l));
+      } catch (u) {
+        a(u);
+      }
+    }
+    function o(l) {
+      try {
+        n(e.throw(l));
+      } catch (u) {
+        a(u);
+      }
+    }
+    function n(l) {
+      var u;
+      l.done ? s(l.value) : (u = l.value, u instanceof i ? u : new i(function(p) {
+        p(u);
+      })).then(h, o);
+    }
+    n((e = e.apply(d, [])).next());
+  });
+}
+y.typeName = "FreehandMarker", y.title = "Freehand marker", y.applyDefaultFilter = !1, typeof SuppressedError == "function" && SuppressedError;
+class st {
+  get text() {
+    return this._text;
+  }
+  set text(t) {
+    this._text = t, this.renderText();
+  }
+  get boundingBox() {
+    return this._boundingBox;
+  }
+  set boundingBox(t) {
+    this._boundingBox = t, this.renderText();
+  }
+  get labelBackground() {
+    return this._labelBackground;
+  }
+  get textElement() {
+    return this._textElement;
+  }
+  set color(t) {
+    this.textElement && r.setAttributes(this._textElement, [["fill", t]]), this._color = t;
+  }
+  get color() {
+    return this._color;
+  }
+  get fontFamily() {
+    return this._fontFamily;
+  }
+  set fontFamily(t) {
+    this._textElement && (this._textElement.style.fontFamily = t), this._fontFamily = t, this.positionText();
+  }
+  get fontSize() {
+    return this._fontSize;
+  }
+  set fontSize(t) {
+    this._textElement && (this._textElement.style.fontSize = `${t.value}${t.units}`), this._fontSize = t, this.positionText();
+  }
+  constructor(t) {
+    this._text = "", this.offsetX = 0, this.offsetY = 0, this._boundingBox = new DOMRect(), this._labelBackground = r.createRect(10, 10, [["fill", "white"]]), this._textElement = r.createText(), this._color = "transparent", this._fontFamily = "", this._fontSize = { value: 1, units: "rem", step: 0.1 }, this.wordWrap = !1, this.prevWrappedText = "", this.setupTextElement(), t !== void 0 && (this.text = t), this.setupTextElement = this.setupTextElement.bind(this), this.renderText = this.renderText.bind(this), this.positionText = this.positionText.bind(this), this.ownsTarget = this.ownsTarget.bind(this), this.show = this.show.bind(this), this.hide = this.hide.bind(this), this.showControlBox = this.showControlBox.bind(this), this.hideControlBox = this.hideControlBox.bind(this), this.applyFontStyles = this.applyFontStyles.bind(this), this.wrapText = this.wrapText.bind(this);
+  }
+  ownsTarget(t) {
+    if (t === this._textElement) return !0;
+    {
+      let i = !1;
+      return this._textElement.childNodes.forEach((e) => {
+        e === t && (i = !0);
+      }), i;
+    }
+  }
+  setupTextElement() {
+    this._textElement.style.fontSize = `${this.fontSize.value}${this.fontSize.units}`, this._textElement.style.textAnchor = "middle", this._textElement.style.userSelect = "none", this._labelBackground.style.stroke = "#aaa", this._labelBackground.style.strokeDasharray = "2 2", this._labelBackground.style.strokeWidth = "1", this._labelBackground.style.strokeOpacity = "0";
+  }
+  wrapText() {
+    function t(i) {
+      let e = i[0].length;
+      return i.forEach((s) => {
+        s.length > e && (e = s.length);
+      }), 0.35 * e / i.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), a = t(s), h = Number.MAX_VALUE;
+      for (; a > e; ) {
+        let o = s[0];
+        s.forEach((n) => {
+          n.length > o.length && (o = n);
+        }), h = o.lastIndexOf(" ", h - 1), h > 0 ? (s = [], i.forEach((n) => {
+          let l = n;
+          for (; l.length > h; ) {
+            let u = l.lastIndexOf(" ", h);
+            u < 0 && (u = l.indexOf(" ")), u > 0 ? (s.push(l.substring(0, u)), l = l.substring(u).trim()) : (s.push(l), l = "");
+          }
+          s.push(l);
+        }), a = t(s)) : a = -1;
+      }
+      return s.join(`\r
+`);
+    }
+    return this.text;
+  }
+  renderText() {
+    return Q(this, void 0, void 0, function* () {
+      if (this._textElement) {
+        const t = this.wordWrap ? this.wrapText() : this.text;
+        if (this.prevWrappedText === t) return void this.positionText();
+        for (this.prevWrappedText = t; this._textElement.lastChild; ) this._textElement.removeChild(this._textElement.lastChild);
+        t.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/).forEach((i, e) => {
+          this._textElement.appendChild(r.createTSpan(i.trim() === "" ? " " : i.trim(), [["dy", e > 0 ? "1em" : "0"]]));
+        }), this.textElement.style.opacity = "0", yield new Promise((i) => requestAnimationFrame(i)), 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(t) {
+    const i = t === void 0 ? this : t;
+    i.applyFontStyles(), i._textSize = i._textElement.getBBox();
+    const e = i.boundingBox.x + i._textSize.width / 2 + i.offsetX, s = i._textElement.childNodes.length, a = i._textSize.height / s, h = s > 1 ? -a * (s - 2) / 2 : a / 3, o = i.boundingBox.y + i._textSize.height / 2 + h + i.offsetY;
+    i._textElement.childNodes.forEach((l, u) => {
+      const p = l;
+      r.setAttributes(p, [["x", `${e}`], ["dy", u > 0 ? "1em" : "0"]]);
+    }), r.setAttributes(i._textElement, [["x", `${e}`]]), r.setAttributes(i._textElement, [["y", `${o}`]]), i._textSize = i._textElement.getBBox();
+    const n = 1.2;
+    r.setAttributes(i.labelBackground, [["width", (i._textSize.width * n).toString()], ["height", (i._textSize.height * n).toString()], ["x", (e - i._textSize.width * n / 2).toString()], ["y", (i._textSize.y - n).toString()]]), i.onTextSizeChanged && i.onTextSizeChanged(i), this.textElement.style.opacity = "1";
+  }
+  show() {
+    this._textElement.style.display = "", this._labelBackground.style.display = "";
+  }
+  hide() {
+    this._textElement.style.display = "none", this._labelBackground.style.display = "none";
+  }
+  showControlBox() {
+    this.labelBackground.style.strokeOpacity = "1";
+  }
+  hideControlBox() {
+    this.labelBackground.style.strokeOpacity = "0";
+  }
+}
+class m extends R {
+  get color() {
+    return this._color;
+  }
+  set color(t) {
+    this._color = t, this.textBlock.color = t;
+  }
+  get fontFamily() {
+    return this._fontFamily;
+  }
+  set fontFamily(t) {
+    this._fontFamily = t, this.textBlock.fontFamily = t;
+  }
+  get fontSize() {
+    return this._fontSize;
+  }
+  set fontSize(t) {
+    this._fontSize = t, this.textBlock.fontSize = t;
+  }
+  getDefaultText() {
+    return Object.getPrototypeOf(this).constructor.DEFAULT_TEXT;
+  }
+  get text() {
+    return this.textBlock.text;
+  }
+  set text(t) {
+    this._text = t, this.textBlock.text = this._text;
+  }
+  constructor(t) {
+    super(t), this._color = "black", this._fontFamily = "Helvetica, Arial, sans-serif", this._fontSize = { value: 1, units: "rem", step: 0.1 }, this._text = this.getDefaultText(), this.padding = 2, this.textBlock = new st(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 && r.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 = r.createGroup(), r.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 && r.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, i.padding !== void 0 && (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();
+  }
+}
+m.typeName = "TextMarker", m.title = "Text marker", m.DEFAULT_TEXT = "Text";
+class C extends $ {
+  constructor(t) {
+    super(t), this.fillColor = "#000000", this.strokeColor = "transparent", this.strokeWidth = 0;
+  }
+  getPath(t = this.width, i = this.height) {
+    return `M 0 0 
+      H ${t} 
+      V ${i} 
+      H 0 
+      V 0 Z`;
+  }
+}
+C.typeName = "CoverMarker", C.title = "Cover marker", C.applyDefaultFilter = !1;
+class S extends $ {
+  constructor(t) {
+    super(t), this.fillColor = "#ffff00", this.opacity = 0.5, this.strokeColor = "transparent", this.strokeWidth = 0;
+  }
+  getPath(t = this.width, i = this.height) {
+    return `M 0 0 
+      H ${t} 
+      V ${i} 
+      H 0 
+      V 0 Z`;
+  }
+}
+S.typeName = "HighlightMarker", S.title = "Highlight marker", S.applyDefaultFilter = !1;
+class T extends m {
+  get tipPosition() {
+    return this._tipPosition;
+  }
+  set tipPosition(t) {
+    this._tipPosition = t, this.adjustVisual();
+  }
+  constructor(t) {
+    super(t), this._tipPosition = { x: 0, y: 0 }, this.tipBase1Position = { x: 0, y: 0 }, this.tipBase2Position = { x: 0, y: 0 }, this._calloutVisual = r.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() {
+    r.setAttributes(this._calloutVisual, [["stroke", this._strokeColor]]);
+  }
+  applyStrokeWidth() {
+    r.setAttributes(this._calloutVisual, [["stroke-width", this._strokeWidth.toString()]]);
+  }
+  applyStrokeDasharray() {
+    r.setAttributes(this._calloutVisual, [["stroke-dasharray", this._strokeDasharray]]);
+  }
+  applyOpacity() {
+    this.visual && r.setAttributes(this.visual, [["opacity", this._opacity.toString()]]);
+  }
+  applyFillColor() {
+    r.setAttributes(this._calloutVisual, [["fill", this._fillColor]]);
+  }
+  getPath() {
+    return this.setTipPoints(), `M 5 0 
+      ${this.tipBase1Position.y === 0 ? `H ${this.tipBase1Position.x} L ${this.tipPosition.x} ${this.tipPosition.y} L ${this.tipBase2Position.x} 0` : ""}
+      H ${this.width - 5} 
+      A 5 5 0 0 1 ${this.width} 5 
+      ${this.tipBase1Position.x === this.width ? `V ${this.tipBase1Position.y} L ${this.tipPosition.x} ${this.tipPosition.y} L  ${this.tipBase2Position.x} ${this.tipBase2Position.y}` : ""}
+      V ${this.height - 5} 
+      A 5 5 0 0 1 ${this.width - 5} ${this.height} 
+      ${this.tipBase1Position.y === this.height ? `H ${this.tipBase2Position.x} L ${this.tipPosition.x} ${this.tipPosition.y} L ${this.tipBase1Position.x} ${this.height}` : ""}
+      H 5
+      A 5 5 0 0 1 0 ${this.height - 5} 
+      ${this.tipBase1Position.x === 0 ? `V ${this.tipBase2Position.y} L ${this.tipPosition.x} ${this.tipPosition.y} L  ${this.tipBase1Position.x} ${this.tipBase1Position.y}` : ""}
+      V 5 
+      A 5 5 0 0 1 5 0 
+      Z`;
+  }
+  setTipPoints() {
+    let t = Math.min(this.height / 2, 15), i = this.height / 5;
+    const e = Math.atan(this.height / 2 / (this.width / 2));
+    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 }) : 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 }) : 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 }) : e < Math.atan((this.tipPosition.y - this.height / 2) / (this.width / 2 - this.tipPosition.x)) ? (i = this.width / 5, t = Math.min(this.width / 2, 15), this.tipBase1Position = { x: t, y: this.height }, this.tipBase2Position = { x: t + i, y: this.height }) : (this.tipBase1Position = { x: 0, y: this.height - t - i }, this.tipBase2Position = { x: 0, y: this.height - t });
+  }
+  createVisual() {
+    var t;
+    super.createVisual(), this._tipPosition = { x: this.width / 4, y: this.height + 20 }, this._calloutVisual = r.createPath(this.getPath(), [["fill", this._fillColor], ["stroke", this._strokeColor], ["stroke-width", this._strokeWidth.toString()], ["stroke-dasharray", this._strokeDasharray]]), (t = this.visual) === null || t === void 0 || t.insertBefore(this._calloutVisual, this.textBlock.textElement);
+  }
+  adjustVisual() {
+    super.adjustVisual(), this._calloutVisual && r.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();
+  }
+}
+T.typeName = "CalloutMarker", T.title = "Callout marker";
+class P extends j {
+  constructor(t) {
+    super(t), this.strokeColor = "#ff0000", this.strokeWidth = 3;
+  }
+  getPath(t = this.width, i = this.height) {
+    return `M ${t / 2} 0 
+       a ${t / 2} ${i / 2} 0 1 0 0 ${i} 
+       a ${t / 2} ${i / 2} 0 1 0 0 -${i} z`;
+  }
+}
+P.typeName = "EllipseFrameMarker", P.title = "Ellipse frame marker";
+class V extends $ {
+  constructor(t) {
+    super(t), this.fillColor = "#ff0000", this.strokeColor = "#ff0000";
+  }
+  getPath(t = this.width, i = this.height) {
+    return `M ${t / 2} 0 
+    a ${t / 2} ${i / 2} 0 1 0 0 ${i} 
+    a ${t / 2} ${i / 2} 0 1 0 0 -${i} z`;
+  }
+}
+V.typeName = "EllipseMarker", V.title = "Ellipse marker";
+class F extends R {
+  get svgString() {
+    return this._svgString;
+  }
+  set svgString(t) {
+    this._svgString = t, this.SVGImage && this.imageType === "svg" && (this.SVGImage.outerHTML = t !== void 0 ? t : "");
+  }
+  get imageSrc() {
+    return this._imageSrc;
+  }
+  set imageSrc(t) {
+    this._imageSrc = t, this.SVGImage && this.imageType === "bitmap" && (t !== void 0 ? r.setAttributes(this.SVGImage, [["href", t]]) : r.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 && r.setAttributes(this.visual, [["opacity", this.opacity.toString()]]);
+  }
+  createImage() {
+    var t;
+    if (this._svgString !== void 0) {
+      this.imageType = "svg";
+      const i = new DOMParser().parseFromString(this._svgString, "image/svg+xml").documentElement;
+      if (!(i instanceof SVGSVGElement)) throw new Error("Invalid SVG string");
+      const e = i;
+      this.SVGImage = this.container.ownerDocument.importNode(e, !0);
+    } else this.imageType = "bitmap", this.SVGImage = r.createImage([["href", (t = this._imageSrc) !== null && t !== void 0 ? t : ""]]);
+  }
+  createVisual() {
+    this.createImage(), this.SVGImage !== void 0 && (this.visual = r.createGroup(), this.imageType === "svg" && r.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 && r.setAttributes(this.visual, [["opacity", this._opacity.toString()]]);
+  }
+  adjustImage() {
+    this.SVGImage !== void 0 && (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) || this.SVGImage !== void 0 && this.isDescendant(this.SVGImage, t);
+  }
+  setSize() {
+    super.setSize(), this.visual && (r.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 && r.setAttributes(this.visual, [["color", this._strokeColor]]);
+  }
+  restoreState(t) {
+    const i = t;
+    i.imageType !== void 0 && (this.imageType = i.imageType), i.svgString !== void 0 && (this._svgString = i.svgString), i.imageSrc !== void 0 && (this._imageSrc = i.imageSrc), this.createVisual(), super.restoreState(t), this.setSize(), this.adjustVisual();
+  }
+  scale(t, i) {
+    super.scale(t, i), this.setSize();
+  }
+}
+F.title = "Image marker";
+class B extends F {
+}
+B.typeName = "CustomImageMarker", B.title = "Custom image marker";
+class L extends F {
+  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";
+  }
+}
+L.typeName = "CheckImageMarker", L.title = "Check image marker";
+class z extends F {
+  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";
+  }
+}
+z.typeName = "XImageMarker", z.title = "X image marker";
+class G extends m {
+  constructor(t) {
+    super(t), this._outerFrameVisual = r.createPath("M0,0"), this._captionFrameVisual = r.createPath("M0,0"), this._frameVisual = r.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() {
+    r.setAttributes(this._outerFrameVisual, [["stroke", this._strokeColor]]), r.setAttributes(this._captionFrameVisual, [["stroke", this._strokeColor]]);
+  }
+  applyStrokeWidth() {
+    r.setAttributes(this._outerFrameVisual, [["stroke-width", this._strokeWidth.toString()]]), r.setAttributes(this._captionFrameVisual, [["stroke-width", this._strokeWidth.toString()]]), this.adjustTextPosition(), this.adjustFrameVisual();
+  }
+  applyStrokeDasharray() {
+    r.setAttributes(this._outerFrameVisual, [["stroke-dasharray", this._strokeDasharray]]), r.setAttributes(this._captionFrameVisual, [["stroke-dasharray", this._strokeDasharray]]);
+  }
+  applyOpacity() {
+    this.visual && r.setAttributes(this.visual, [["opacity", this._opacity.toString()]]);
+  }
+  applyFillColor() {
+    r.setAttributes(this._captionFrameVisual, [["fill", this._fillColor]]);
+  }
+  getPaths(t = this.width, i = this.height) {
+    var e, s;
+    return { frame: `M 0 0
+      V ${i}
+      H ${t}
+      V 0
+      Z`, caption: `M 0 0
+      H ${t}
+      V ${((s = (e = this.textBlock.textSize) === null || e === void 0 ? void 0 : e.height) !== null && s !== void 0 ? s : 40) + 2 * this.padding + this.strokeWidth}
+      H 0
+      Z` };
+  }
+  createVisual() {
+    var t;
+    super.createVisual();
+    const i = this.getPaths();
+    this.visual && r.setAttributes(this.visual, [["opacity", this._opacity.toString()]]), this._outerFrameVisual = r.createPath(i.frame, [["fill", "transparent"], ["stroke", this._strokeColor], ["stroke-width", this._strokeWidth.toString()], ["stroke-dasharray", this._strokeDasharray]]), this._captionFrameVisual = r.createPath(i.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), (t = this.visual) === null || t === void 0 || t.insertBefore(this._frameVisual, this.textBlock.textElement);
+  }
+  adjustVisual() {
+    super.adjustVisual(), this.adjustTextPosition(), this.adjustFrameVisual();
+  }
+  adjustTextPosition() {
+    var t;
+    this.textBlock.textSize && (this.textBlock.textElement.style.transform = `translate(${this.width / 2 - ((t = this.textBlock.textSize) === null || t === void 0 ? void 0 : t.width) / 2 - this.padding}px, ${this.strokeWidth / 2}px)`);
+  }
+  adjustFrameVisual() {
+    const t = this.getPaths();
+    this.visual && r.setAttributes(this.visual, [["opacity", this._opacity.toString()]]), this._outerFrameVisual && r.setAttributes(this._outerFrameVisual, [["d", t.frame], ["stroke", this._strokeColor], ["stroke-width", this._strokeWidth.toString()], ["stroke-dasharray", this._strokeDasharray]]), this._captionFrameVisual && r.setAttributes(this._captionFrameVisual, [["d", t.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();
+  }
+}
+G.typeName = "CaptionFrameMarker", G.title = "Caption frame marker";
+class A extends v {
+  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();
+  }
+}
+A.typeName = "CurveMarker", A.title = "Curve marker";
+class w extends y {
+  constructor(t) {
+    super(t), this.opacity = 0.5, this.strokeColor = "#ffff00", this.strokeWidth = 20;
+  }
+}
+w.typeName = "HighlighterMarker", w.title = "Highlighter marker", w.applyDefaultFilter = !1;
+class Y {
+  static getDefaultFilterSet() {
+    return [r.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)"/>'), r.createFilter("outline", [["x", "-5%"], ["y", "-5%"], ["width", "110%"], ["height", "110%"]], `<feMorphology operator="dilate" radius="2" in="SourceAlpha" result="expanded"/>
+      <feFlood flood-color="white" flood-opacity="1"/>
+      <feComposite in2="expanded" operator="in"/>
+      <feComposite in="SourceGraphic" operator="over"/>`), r.createFilter("glow", [["x", "-50%"], ["y", "-50%"], ["width", "200%"], ["height", "200%"]], `<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
+      <feFlood flood-color="#ffffff" flood-opacity="1"/>
+      <feComposite in2="blur" operator="in"/>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>`)];
+  }
+}
+class H {
+  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 = (i = t.marker) !== null && i !== void 0 ? 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 t !== null && (!((i = this._marker) === null || 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 && this.state !== "creating" && this.state !== "new") {
+      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 tt {
+  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 = r.createGroup(), this._selectorElement = r.createCircle(2 * this.gripSize, [["fill", "transparent"], ["cx", (this.gripSize / 2).toString()], ["cy", (this.gripSize / 2).toString()]]), this._visual.appendChild(this._selectorElement), this._visibleElement = r.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 (i = this._visual) === null || i === void 0 || i.childNodes.forEach((s) => {
+        s === t && (e = !0);
+      }), e;
+    }
+  }
+}
+class g extends tt {
+}
+class rt extends H {
+  constructor(t) {
+    super(t), this.defaultLength = 50, this.manipulationStartX = 0, this.manipulationStartY = 0, this.manipulationBox = r.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 = "", this.state === "new" ? this.startCreation(t) : this._state === "creating" ? 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((s) => s.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), this.marker.points.length === 1 && 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), this._state !== "creating" && (this._state = "select"), this.stateChanged();
+  }
+  manipulate(t, i) {
+    this.state === "creating" ? this.resize(t) : this.state === "move" ? (this.marker.points.forEach((e) => {
+      e.x += t.x - this.manipulationStartX, e.y += t.y - this.manipulationStartY;
+    }), this.manipulationStartX = t.x, this.manipulationStartY = t.y, this.marker.adjustVisual(), this.adjustControlBox()) : this.state === "resize" && 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 && this.state === "select") {
+      const s = this.marker.selectorVisualLines.findIndex((a) => a === i);
+      if (s > -1) this.marker.points.splice(s + 1, 0, t), this.marker.adjustVisual(), this.adjustControlGrips();
+      else {
+        const a = this.grips.findIndex((h) => h.ownsTarget(i));
+        a > -1 && (this.marker.points.splice(a, 1), this.marker.adjustVisual(), this.adjustControlGrips());
+      }
+    }
+  }
+  setupControlBox() {
+    this.controlBox || (this.controlBox = r.createGroup(), this.container.appendChild(this.controlBox), this.manipulationBox = r.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 e = this.grips.pop();
+      e && this.manipulationBox.removeChild(e.visual);
+    }
+    this.positionGrips();
+  }
+  createGrip() {
+    const t = new g();
+    return t.zoomLevel = this.zoomLevel, t.visual.transform.baseVal.appendItem(r.createTransform()), this.manipulationBox.appendChild(t.visual), t;
+  }
+  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"), this.state === "creating" && this.finishCreation();
+  }
+}
+class W extends H {
+  constructor(t) {
+    super(t), this.defaultLength = 50, this.manipulationStartX = 0, this.manipulationStartY = 0, this.manipulationStartX1 = 0, this.manipulationStartY1 = 0, this.manipulationStartX2 = 0, this.manipulationStartY2 = 0, this.manipulationBox = r.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)) || !(!(!((i = this.grip1) === null || i === void 0) && i.ownsTarget(t)) && !(!((e = this.grip2) === null || e === void 0) && e.ownsTarget(t)));
+  }
+  pointerDown(t, i, e) {
+    var s, a;
+    super.pointerDown(t, i, e), this.manipulationStartX = t.x, this.manipulationStartY = t.y, this.state === "new" && (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, this.state === "new" ? (this.marker.createVisual(), this.marker.adjustVisual(), this._state = "creating") : (this.select(this.isMultiSelected), i && (!((s = this.grip1) === null || s === void 0) && s.ownsTarget(i)) ? this.activeGrip = this.grip1 : i && (!((a = this.grip2) === null || a === void 0) && a.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), this.state === "creating" && 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", e === "creating" && this.onMarkerCreated && this.onMarkerCreated(this), this.stateChanged();
+  }
+  manipulate(t, i) {
+    this.state === "creating" ? this.resize(t) : this.state === "move" ? (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()) : this.state === "resize" && 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 = r.createGroup(), this.container.appendChild(this._controlBox), this.manipulationBox = r.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 t = new g();
+    return t.zoomLevel = this.zoomLevel, t.visual.transform.baseVal.appendItem(r.createTransform()), this.manipulationBox.appendChild(t.visual), t;
+  }
+  positionGrips() {
+    if (this.grip1 && this.grip2) {
+      const t = this.grip1.gripSize;
+      this.positionGrip(this.grip1.visual, this.marker.x1 - t / 2, this.marker.y1 - t / 2), this.positionGrip(this.grip2.visual, this.marker.x2 - t / 2, this.marker.y2 - t / 2), 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 K {
+  constructor() {
+    this.grips = /* @__PURE__ */ new Map([["topleft", new g()], ["topcenter", new g()], ["topright", new g()], ["leftcenter", new g()], ["rightcenter", new g()], ["bottomleft", new g()], ["bottomcenter", new g()], ["bottomright", new g()]]), this.findGripByVisual = this.findGripByVisual.bind(this);
+  }
+  findGripByVisual(t) {
+    for (const i of this.grips.values()) if (i.ownsTarget(t)) return i;
+  }
+  getGrip(t) {
+    return this.grips.get(t);
+  }
+}
+class at extends tt {
+  constructor() {
+    super();
+    const t = this.fillColor;
+    this.fillColor = this.strokeColor, this.strokeColor = t;
+  }
+}
+class q extends H {
+  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 = r.createGroup(), this.CB_DISTANCE = 0, this.controlGrips = new K(), this.disabledResizeGrips = [], this.disableRotation = !1, this._suppressMarkerCreateEvent = !1;
+  }
+  ownsTarget(t) {
+    var i;
+    return !(!super.ownsTarget(t) && !this._marker.ownsTarget(t)) || !!(((i = this.controlGrips) === null || i === void 0 ? void 0 : i.findGripByVisual(t)) !== void 0 || this.rotatorGrip !== void 0 && this.rotatorGrip.ownsTarget(t));
+  }
+  pointerDown(t, i, e) {
+    var s;
+    super.pointerDown(t, i, e), this.setupControlBox(), this.state === "new" && (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 a = this.marker.unrotatePoint(t);
+    if (this.manipulationStartX = a.x, this.manipulationStartY = a.y, this.offsetX = a.x - this.marker.left, this.offsetY = a.y - this.marker.top, this.state !== "new") if (this.select(this.isMultiSelected), this.activeGrip = (s = this.controlGrips) === null || s === void 0 ? void 0 : s.findGripByVisual(i), this.activeGrip !== void 0) this._state = "resize";
+    else if (this.rotatorGrip !== void 0 && i !== void 0 && this.rotatorGrip.ownsTarget(i)) {
+      this.activeGrip = this.rotatorGrip;
+      const h = this.marker.rotatePoint({ x: this.marker.centerX, y: this.marker.centerY });
+      this.marker.left = h.x - this.marker.width / 2, this.marker.top = h.y - this.marker.height / 2, this.marker.moveVisual({ x: this.marker.left, y: this.marker.top });
+      const o = this.container.transform.baseVal.getItem(0);
+      o.setRotate(this.marker.rotationAngle, this.marker.centerX, this.marker.centerY), this.container.transform.baseVal.replaceItem(o, 0), this.adjustControlBox(), this._state = "rotate";
+    } else this._state = "move";
+  }
+  pointerUp(t, i) {
+    const e = this.state;
+    super.pointerUp(t, i), this.state === "creating" && 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", e === "creating" && this.onMarkerCreated && this._suppressMarkerCreateEvent === !1 && this.onMarkerCreated(this), this.stateChanged();
+  }
+  manipulate(t, i) {
+    const e = this.marker.unrotatePoint(t);
+    this.state === "creating" ? this.resize(t, i == null ? void 0 : i.shiftKey) : this.state === "move" ? (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()) : this.state === "resize" ? this.resize(e, i == null ? void 0 : i.shiftKey) : this.state === "rotate" && this.marker.rotate(t);
+  }
+  resize(t, i = !1) {
+    let e = this.manipulationStartLeft, s = this.manipulationStartWidth, a = this.manipulationStartTop, h = this.manipulationStartHeight;
+    const o = t.x - this.manipulationStartX, n = t.y - this.manipulationStartY;
+    if (i) {
+      const l = this.manipulationStartWidth !== 0 && this.manipulationStartHeight !== 0 ? this.manipulationStartWidth / this.manipulationStartHeight : 1;
+      switch (this.activeGrip) {
+        case this.controlGrips.getGrip("bottomright"):
+        case void 0:
+          s = this.manipulationStartWidth + Math.max(o, n), h = this.manipulationStartHeight + Math.max(o, n) / l;
+          break;
+        case this.controlGrips.getGrip("bottomcenter"):
+          s = this.manipulationStartWidth + n, h = this.manipulationStartHeight + n / l, e = this.manipulationStartLeft - n / 2;
+          break;
+        case this.controlGrips.getGrip("bottomleft"):
+          s = this.manipulationStartWidth + Math.max(-o, n), h = this.manipulationStartHeight + Math.max(-o, n) / l, e = this.manipulationStartLeft - Math.max(-o, n);
+          break;
+        case this.controlGrips.getGrip("leftcenter"):
+          s = this.manipulationStartWidth - o, h = this.manipulationStartHeight - o / l, e = this.manipulationStartLeft + o, a = this.manipulationStartTop + o / l / 2;
+          break;
+        case this.controlGrips.getGrip("topleft"):
+          s = this.manipulationStartWidth + Math.max(-o, -n), h = this.manipulationStartHeight + Math.max(-o, -n) / l, e = this.manipulationStartLeft - Math.max(-o, -n), a = this.manipulationStartTop - Math.max(-o, -n) / l;
+          break;
+        case this.controlGrips.getGrip("topcenter"):
+          s = this.manipulationStartWidth - n, h = this.manipulationStartHeight - n / l, e = this.manipulationStartLeft + n / 2, a = this.manipulationStartTop + n / l;
+          break;
+        case this.controlGrips.getGrip("topright"):
+          s = this.manipulationStartWidth + Math.max(o, -n), h = this.manipulationStartHeight + Math.max(o, -n) / l, a = this.manipulationStartTop - Math.max(o, -n) / l;
+          break;
+        case this.controlGrips.getGrip("rightcenter"):
+          s = this.manipulationStartWidth + o, h = this.manipulationStartHeight + o / l, a = this.manipulationStartTop - o / l / 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"):
+          a = this.manipulationStartTop + t.y - this.manipulationStartY, h = this.manipulationStartHeight + this.manipulationStartTop - a;
+          break;
+        case this.controlGrips.getGrip("bottomcenter"):
+        case this.controlGrips.getGrip("bottomleft"):
+        case this.controlGrips.getGrip("bottomright"):
+        case void 0:
+          h = 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), h >= 0 ? (this.marker.top = a, this.marker.height = h) : (this.marker.top = a + h, this.marker.height = -h), 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 = r.createGroup();
+    const t = r.createTransform();
+    t.setTranslate(-this.CB_DISTANCE / 2, -this.CB_DISTANCE / 2), this.controlBox.transform.baseVal.appendItem(t), this.container.appendChild(this.controlBox), this.manipulationBox = r.createGroup(), this.controlBox.appendChild(this.manipulationBox), this.controlRect = r.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), this.disableRotation !== !0 && (this.rotatorGripLine = r.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 K(), this.addControlGrips(), this.controlBox.style.display = "none";
+  }
+  adjustControlBox() {
+    var t, i, e;
+    if (this.controlBox || this.setupControlBox(), 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), (t = this.controlRect) === null || t === void 0 || t.setAttribute("width", (this.marker.width + this.CB_DISTANCE).toString()), (i = this.controlRect) === null || i === void 0 || i.setAttribute("height", (this.marker.height + this.CB_DISTANCE).toString()), (e = this.controlRect) === null || e === void 0 || e.setAttribute("stroke-width", (1 / this.zoomLevel).toString()), this.rotatorGripLine !== void 0 && (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 t of this.controlGrips.grips.values()) t.visual.transform.baseVal.appendItem(r.createTransform()), this.manipulationBox.appendChild(t.visual), this.manipulationBox.appendChild(t.visual);
+    this.disableRotation !== !0 && (this.rotatorGrip = this.createRotateGrip()), this.positionGrips();
+  }
+  createRotateGrip() {
+    const t = new at();
+    return t.visual.transform.baseVal.appendItem(r.createTransform()), this.manipulationBox.appendChild(t.visual), t;
+  }
+  positionGrips() {
+    var t, i;
+    if (this.controlGrips !== void 0) {
+      const e = (t = this.controlGrips.getGrip("topleft").gripSize) !== null && t !== void 0 ? t : 0, s = -e / 2, a = s, h = (this.marker.width + this.CB_DISTANCE) / 2 - e / 2, o = (this.marker.height + this.CB_DISTANCE) / 2 - e / 2, n = this.marker.height + this.CB_DISTANCE - e / 2, l = this.marker.width + this.CB_DISTANCE - e / 2;
+      if (this.positionGrip(this.controlGrips.getGrip("topleft").visual, s, a), this.positionGrip(this.controlGrips.getGrip("topcenter").visual, h, a), this.positionGrip(this.controlGrips.getGrip("topright").visual, l, a), this.positionGrip(this.controlGrips.getGrip("leftcenter").visual, s, o), this.positionGrip(this.controlGrips.getGrip("rightcenter").visual, l, o), this.positionGrip(this.controlGrips.getGrip("bottomleft").visual, s, n), this.positionGrip(this.controlGrips.getGrip("bottomcenter").visual, h, n), this.positionGrip(this.controlGrips.getGrip("bottomright").visual, l, n), this.controlGrips.grips.forEach((u) => {
+        u.zoomLevel = this.zoomLevel;
+      }), this.rotatorGrip !== void 0) {
+        this.rotatorGrip.zoomLevel = this.zoomLevel;
+        const u = (i = this.rotatorGrip.gripSize) !== null && i !== void 0 ? i : 0, p = -u / 2, _ = (this.marker.width + this.CB_DISTANCE) / 2 - u / 2;
+        this.positionGrip(this.rotatorGrip.visual, _, p - Math.max(Math.max(3 * this.CB_DISTANCE, 30), 15 / this.zoomLevel));
+      }
+    }
+    this.adjustGripVisibility();
+  }
+  positionGrip(t, i, e) {
+    if (t !== void 0) {
+      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);
+      i !== void 0 && (i.visual.style.display = "none");
+    }
+  }
+  scale(t, i) {
+    super.scale(t, i), this.adjustControlBox();
+  }
+}
+class X extends q {
+  constructor(t) {
+    super(t), this._creationStyle = "draw";
+  }
+  pointerDown(t, i, e) {
+    super.pointerDown(t, i, e), this.state === "new" && (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 ht {
+  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 (this.undoStack.length === 0 || 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 t !== void 0 && this.redoStack.push(t), this.undoStack.length > 0 ? this.undoStack[this.undoStack.length - 1] : void 0;
+    }
+  }
+  redo() {
+    return this.lastRedoStep = this.redoStack.pop(), this.lastRedoStep !== void 0 && this.undoStack.push(this.lastRedoStep), this.lastRedoStep;
+  }
+}
+class D extends H {
+  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, this.state === "new" ? (this.setupControlBox(), this.startCreation(t)) : this.state !== "move" && (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), this._state === "creating" && this.finishCreation(), this.state = "select", this.stateChanged();
+  }
+  manipulate(t, i) {
+    this.state === "creating" ? this.addNewPointWhileCreating(t) : this.state === "move" && (this.marker.points.forEach((e) => {
+      e.x += t.x - this.manipulationStartX, e.y += t.y - this.manipulationStartY;
+    }), this.manipulationStartX = t.x, this.manipulationStartY = t.y, this.marker.adjustVisual(), this.adjustControlBox());
+  }
+  setupControlBox() {
+    this.controlBox || (this.controlBox = r.createGroup(), this.container.appendChild(this.controlBox), this.controlRect = r.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 t = Math.min(...this.marker.points.map((a) => a.x)), i = Math.min(...this.marker.points.map((a) => a.y)), e = Math.max(...this.marker.points.map((a) => a.x)), s = Math.max(...this.marker.points.map((a) => a.y));
+      this.controlRect && r.setAttributes(this.controlRect, [["x", (t - this.strokeWidth).toString()], ["y", (i - this.strokeWidth).toString()], ["width", (e - t + 2 * this.strokeWidth).toString()], ["height", (s - i + 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 ot {
+  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) => {
+      t.key === "Escape" && (t.preventDefault(), this.textEditor.blur());
+    }), this.textEditor.addEventListener("keyup", (t) => {
+      t.cancelBubble = !0, this._text = this.textEditor.value, this.onTextChanged !== void 0 && this.onTextChanged(this._text);
+    }), this.textEditor.addEventListener("blur", () => {
+      this._text = this.textEditor.value, this.onTextChanged !== void 0 && this.onTextChanged(this._text), this.onBlur !== void 0 && this.onBlur();
+    }), this.isSetupCompleted = !0;
+  }
+  getEditorUi() {
+    return this.isSetupCompleted || this.setup(), this.textEditor;
+  }
+  focus() {
+    this.textEditor.focus();
+  }
+  blur() {
+    this.textEditor.blur();
+  }
+}
+class Z extends q {
+  set color(t) {
+    this.marker.color = t, this.stateChanged();
+  }
+  get color() {
+    return this.marker.color;
+  }
+  set fontFamily(t) {
+    this.marker.fontFamily = t, this.stateChanged();
+  }
+  get fontFamily() {
+    return this.marker.fontFamily;
+  }
+  set fontSize(t) {
+    this.marker.fontSize = t, this.stateChanged();
+  }
+  get fontSize() {
+    return this.marker.fontSize;
+  }
+  constructor(t) {
+    super(t), this.textBlockEditorContainer = r.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 ot(), 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, this.state === "new" && (this.marker.createVisual(), this.marker.moveVisual(t), this._state = "creating");
+  }
+  dblClick(t, i, e) {
+    super.dblClick(t, i, e), this.state !== "edit" && 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(), (e === "creating" || 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}`, this.textBlockEditor.onTextChanged === void 0 && (this.textBlockEditor.onTextChanged = (t) => {
+      this.marker.text = t;
+    }), this.textBlockEditor.onBlur === void 0 && (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 it = '<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 N extends X {
+}
+class nt extends W {
+  set arrowType(t) {
+    this.marker.arrowType = t;
+  }
+  get arrowType() {
+    return this.marker.arrowType;
+  }
+}
+class lt extends Z {
+  constructor(t) {
+    super(t), this.manipulationStartTipPositionX = 0, this.manipulationStartTipPositionY = 0;
+  }
+  addControlGrips() {
+    this.tipGrip = this.createTipGrip(), super.addControlGrips();
+  }
+  createTipGrip() {
+    const t = new g();
+    return t.zoomLevel = this.zoomLevel, t.visual.transform.baseVal.appendItem(r.createTransform()), this.manipulationBox.appendChild(t.visual), t;
+  }
+  positionGrips() {
+    var t;
+    if (super.positionGrips(), this.tipGrip) {
+      this.tipGrip.zoomLevel = this.zoomLevel;
+      const i = (t = this.tipGrip.gripSize) !== null && t !== void 0 ? 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) && !(!((i = this.tipGrip) === null || 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, this.tipGrip !== void 0 && i !== void 0 && 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 U extends q {
+  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), this.state === "new" && (this.marker.createVisual(), this.marker.moveVisual(t), this._state = "creating");
+  }
+  pointerUp(t, i) {
+    super.pointerUp(t, i), this.setSize(), this.adjustControlBox();
+  }
+}
+class dt extends Z {
+  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 ut extends W {
+  constructor() {
+    super(...arguments), this.manipulationStartCurveX = 0, this.manipulationStartCurveY = 0;
+  }
+  ownsTarget(t) {
+    var i;
+    return !(!super.ownsTarget(t) && !(!((i = this.curveGrip) === null || i === void 0) && i.ownsTarget(t)));
+  }
+  pointerDown(t, i, e) {
+    var s;
+    this.state === "new" && (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), this.state !== "new" && this.state !== "creating" && (i && (!((s = this.curveGrip) === null || 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()), this.state === "creating" && (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) {
+    this.state === "move" && (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 t = 1 / this.zoomLevel;
+    this.curveControlLine1 = r.createLine(this.marker.x1, this.marker.y1, this.marker.curveX, this.marker.curveY, [["stroke", "black"], ["stroke-width", t.toString()], ["stroke-opacity", "0.5"], ["stroke-dasharray", "3, 2"], ["fill", "transparent"], ["pointer-events", "none"]]), this.curveControlLine2 = r.createLine(this.marker.x2, this.marker.y2, this.marker.curveX, this.marker.curveY, [["stroke", "black"], ["stroke-width", t.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 ct 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, t !== void 0 && this.addTargetImage();
+  }
+  get zoomLevel() {
+    return this._zoomLevel;
+  }
+  set zoomLevel(t) {
+    const i = this._zoomLevel;
+    this._zoomLevel = t, this._canvasContainer && this._contentContainer && this._mainCanvas && this._overlayContainer && (this._panX = this._panX * t / i, this._panY = this._panY * t / i, this.applyTransform(), this.adjustEditorsZoom());
+  }
+  autoZoom() {
+    if (!this._autoZoomIn && !this._autoZoomOut || !this._canvasContainer || this._targetWidth <= 0 || this._targetHeight <= 0) return;
+    const t = this._canvasContainer.clientWidth, i = this._canvasContainer.clientHeight;
+    if (t <= 0 || i <= 0) return;
+    const e = t / this._targetWidth, s = i / this._targetHeight, a = Math.min(e, s);
+    (a > 1 && this._autoZoomIn || a < 1 && this._autoZoomOut) && (this._panX = 0, this._panY = 0, this.zoomLevel = a);
+  }
+  applyTransform() {
+    this._transformContainer && (this._transformContainer.style.transform = `translate(${this._panX}px, ${this._panY}px) scale(${this._zoomLevel})`);
+  }
+  panTo(t) {
+    this._panX -= this.prevPanPoint.x - t.x, this._panY -= this.prevPanPoint.y - t.y, this.applyTransform(), this.prevPanPoint = t;
+  }
+  getPinchDistance() {
+    const t = Array.from(this.activePointers.values());
+    if (t.length < 2) return 0;
+    const i = t[1].x - t[0].x, e = t[1].y - t[0].y;
+    return Math.sqrt(i * i + e * e);
+  }
+  getPinchMidpoint() {
+    const t = Array.from(this.activePointers.values());
+    return t.length < 2 ? { x: 0, y: 0 } : { x: (t[0].x + t[1].x) / 2, y: (t[0].y + t[1].y) / 2 };
+  }
+  get defaultFilter() {
+    return this._defaultFilter;
+  }
+  set defaultFilter(t) {
+    this._defaultFilter = t;
+  }
+  get autoZoomIn() {
+    return this._autoZoomIn;
+  }
+  set autoZoomIn(t) {
+    this._autoZoomIn = t;
+  }
+  get autoZoomOut() {
+    return this._autoZoomOut;
+  }
+  set autoZoomOut(t) {
+    this._autoZoomOut = 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 = r.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 = /* @__PURE__ */ new Map(), this.editors = [], this._zoomLevel = 1, this._panX = 0, this._panY = 0, this.prevPanPoint = { x: 0, y: 0 }, this.undoRedoManager = new ht(), this._autoZoomIn = !1, this._autoZoomOut = !1, this._defs = [], this.touchPoints = 0, this.isDragging = !1, this.isSelecting = !1, this.isPanning = !1, this.activePointers = /* @__PURE__ */ new Map(), this.isPinching = !1, this.prevPinchDistance = 0, this.prevPinchMidpoint = { x: 0, y: 0 }, this._marqueeSelectOutline = r.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._stateToRestoreAddUndoStep = !0, this.markerEditors.set(k, X), this.markerEditors.set(P, X), this.markerEditors.set(v, W), this.markerEditors.set(x, rt), this.markerEditors.set(y, D), this.markerEditors.set(m, Z), this.markerEditors.set(C, N), this.markerEditors.set(S, N), this.markerEditors.set(V, N), this.markerEditors.set(f, nt), this.markerEditors.set(M, W), this.markerEditors.set(T, lt), this.markerEditors.set(B, U), this.markerEditors.set(L, U), this.markerEditors.set(z, U), this.markerEditors.set(G, dt), this.markerEditors.set(A, ut), this.markerEditors.set(w, D), this.connectedCallback = this.connectedCallback.bind(this), this.disconnectedCallback = this.disconnectedCallback.bind(this), this.createLayout = this.createLayout.bind(this), this.addMainCanvas = this.addMainCanvas.bind(this), this.setMainCanvasSize = this.setMainCanvasSize.bind(this), this.setEditingTargetSize = this.setEditingTargetSize.bind(this), this.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.autoZoom = this.autoZoom.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 } })), c.addKeyAddListener(this.toggleLogo), this.createLayout(), this.addMainCanvas(), this.initOverlay(), this.attachEvents(), this._isInitialized = !0, this.targetImage !== void 0 && 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 = "none", this._canvasContainer.className = "canvas-container", this._canvasContainer.style.display = "flex", this._canvasContainer.style.flexGrow = "2", this._canvasContainer.style.flexShrink = "2", this._canvasContainer.style.justifyContent = "center", this._canvasContainer.style.alignItems = "center", this._canvasContainer.style.overflow = "hidden", this._canvasContainer.style.userSelect = "none", this._canvasContainer.addEventListener("wheel", (i) => {
+      i.preventDefault(), this._panX -= i.deltaX, this._panY -= i.deltaY, this.applyTransform();
+    }, { passive: !1 }), this._transformContainer = document.createElement("div"), this._transformContainer.style.display = "grid", this._transformContainer.style.gridTemplateColumns = "1fr", this._canvasContainer.appendChild(this._transformContainer), this._contentContainer.appendChild(this._canvasContainer), (t = this.shadowRoot) === null || t === void 0 || t.appendChild(this._contentContainer);
+  }
+  addMainCanvas() {
+    var t, i;
+    this.width = ((t = this._contentContainer) === null || t === void 0 ? void 0 : t.clientWidth) || 0, this.height = ((i = this._contentContainer) === null || i === void 0 ? void 0 : i.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.addDefsToMainCanvas(), this._groupLayer = r.createGroup(), this._mainCanvas.appendChild(this._groupLayer), this._transformContainer.appendChild(this._mainCanvas);
+  }
+  addDefsToMainCanvas() {
+    var t;
+    this._defsElement = r.createDefs(), (t = this._mainCanvas) === null || t === void 0 || t.appendChild(this._defsElement), this._defsElement.append(...this._defs);
+  }
+  setMainCanvasSize() {
+    this._mainCanvas !== void 0 && 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() {
+    this._editingTarget !== void 0 && (this._editingTarget.width = this._targetWidth, this._editingTarget.height = this._targetHeight, this._editingTarget.style.width = `${this._targetWidth}px`, this._editingTarget.style.height = `${this._targetHeight}px`);
+  }
+  initOverlay() {
+    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", this._transformContainer.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 && this._editingTarget === void 0 && this.targetImage !== void 0 && this._canvasContainer !== void 0 && this._mainCanvas !== void 0 && (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 (this._editingTarget !== void 0) {
+        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, a = this._targetHeight > 0 ? this._targetHeight : this._targetWidth > 0 ? this._targetWidth / e : i.clientHeight > 0 ? i.clientHeight : i.naturalHeight;
+          this._targetWidth = s, this._targetHeight = a;
+        }
+        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, this._stateToRestore !== void 0 && this.restoreState(this._stateToRestore, this._stateToRestoreAddUndoStep);
+      }
+      this.zoomLevel = this._zoomLevel, this.autoZoom();
+    }), this._editingTarget.src = this.targetImage.src, this._transformContainer.insertBefore(this._editingTarget, this._mainCanvas));
+  }
+  addDefaultFilterDefs() {
+    this.addDefs(...Y.getDefaultFilterSet());
+  }
+  registerMarkerType(t, i) {
+    this.markerEditors.set(t, i);
+  }
+  createMarker(t) {
+    let i = k;
+    i = typeof t == "string" ? this.getMarkerTypeByName(t) || k : t;
+    const e = this.markerEditors.get(i);
+    return e && this._mainCanvas && (this.setCurrentEditor(), this.deselectEditor(), this.addUndoStep(), this._currentMarkerEditor = this.addNewMarker(e, i), this._currentMarkerEditor.onMarkerCreated = this.markerCreated, this._currentMarkerEditor.onStateChanged = this.markerStateChanged, this._currentMarkerEditor.creationStyle === "drop" ? this._mainCanvas.style.cursor = "move" : this._mainCanvas.style.cursor = "crosshair", this.dispatchEvent(new CustomEvent("markercreating", { detail: { markerArea: this, markerEditor: this._currentMarkerEditor } }))), this._currentMarkerEditor;
+  }
+  addNewMarker(t, i) {
+    if (this._mainCanvas === void 0) throw new Error("Main canvas is not initialized.");
+    const e = r.createGroup();
+    this.defaultFilter && i.applyDefaultFilter && e.setAttribute("filter", this.defaultFilter), this._mainCanvas.appendChild(e);
+    const s = new t({ container: e, overlayContainer: this._overlayContentContainer, markerType: i });
+    return s.zoomLevel = this.zoomLevel, s;
+  }
+  markerCreated(t) {
+    if (this._mainCanvas) {
+      if (this.mode = "select", this.editors.push(t), this.setCurrentEditor(t), t.continuousCreation) {
+        const i = this.createMarker(t.marker.typeName);
+        t.is(D) && (i != null && i.is(D)) && (i.strokeColor = t.strokeColor, i.strokeWidth = t.strokeWidth, i.strokeDasharray = t.strokeDasharray);
+      } else this._mainCanvas.style.cursor = "default";
+      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 } })), (e = this._mainCanvas) === null || e === void 0 || 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 && this._currentMarkerEditor !== void 0 && this.deselectEditor(this._currentMarkerEditor), this._currentMarkerEditor = t, this._currentMarkerEditor === void 0 || this._currentMarkerEditor.isSelected || this._currentMarkerEditor.state !== "new" && (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 && t.state === "creating" && t.deselect(), i > 0) {
+      const e = t ?? this._selectedMarkerEditors[this._selectedMarkerEditors.length - 1];
+      if (t === void 0) this._selectedMarkerEditors.forEach((s) => s.deselect()), this._selectedMarkerEditors.splice(0);
+      else {
+        const s = this._selectedMarkerEditors.indexOf(t);
+        s >= 0 && (this._selectedMarkerEditors.splice(s, 1), t.deselect());
+      }
+      this.dispatchEvent(new CustomEvent("markerdeselect", { detail: { markerArea: this, markerEditor: e } }));
+    }
+  }
+  onCanvasPointerDown(t) {
+    var i;
+    if (this.activePointers.set(t.pointerId, { x: t.clientX, y: t.clientY }), this._manipulationStartX = t.clientX, this._manipulationStartY = t.clientY, this.touchPoints++, this.touchPoints === 1 && (this.leadPointerId = t.pointerId), t.pointerType === "touch" && this.touchPoints === 1 || t.pointerType !== "touch" && t.button === 0 && !t.altKey) if (this._currentMarkerEditor === void 0 || this._currentMarkerEditor.state !== "new" && this._currentMarkerEditor.state !== "creating") {
+      if (this.mode === "select") {
+        const e = r.clientToLocalCoordinates(this._mainCanvas, t.clientX, t.clientY, this.zoomLevel), s = this.editors.find((a) => a.ownsTarget(t.target));
+        s !== void 0 ? (this.isDragging = !0, t.shiftKey ? (this.selectEditor(s), this.initializeMarqueeSelection(e)) : s.isSelected || (this.deselectEditor(), this.setCurrentEditor(s)), this._selectedMarkerEditors.forEach((a) => {
+          var h;
+          return a.pointerDown(e, (h = t.target) !== null && h !== void 0 ? h : void 0, t);
+        })) : t.target === this._marqueeSelectOutline && this._selectedMarkerEditors.length > 1 ? (this.isDragging = !0, this._selectedMarkerEditors.forEach((a) => {
+          var h;
+          return a.pointerDown(e, (h = t.target) !== null && h !== void 0 ? h : void 0, t);
+        })) : (this.setCurrentEditor(), this.deselectEditor(), this.isSelecting = !0, this.isDragging = !0, this.initializeMarqueeSelection(e), this.prevPanPoint = { x: t.clientX, y: t.clientY });
+      }
+    } else this.isDragging = !0, this._currentMarkerEditor.pointerDown(r.clientToLocalCoordinates(this._mainCanvas, t.clientX, t.clientY, this.zoomLevel), (i = t.target) !== null && i !== void 0 ? i : void 0, t);
+    else t.pointerType !== "touch" && (t.button === 0 && t.altKey || t.button === 1) ? (this.isDragging = !0, this.isPanning = !0, this.prevPanPoint = { x: t.clientX, y: t.clientY }, this._mainCanvas && (this._mainCanvas.style.cursor = "grabbing")) : t.pointerType === "touch" && this.touchPoints === 2 && (this.isPinching = !0, this.prevPinchDistance = this.getPinchDistance(), this.prevPinchMidpoint = this.getPinchMidpoint());
+  }
+  initializeMarqueeSelection(t) {
+    this._marqueeSelectRect.x = t.x, this._marqueeSelectRect.y = t.y, this._marqueeSelectRect.width = 0, this._marqueeSelectRect.height = 0, r.setAttributes(this._marqueeSelectOutline, [["x", t.x.toString()], ["y", t.y.toString()], ["width", "0"], ["height", "0"]]), this._groupLayer && !this._groupLayer.contains(this._marqueeSelectOutline) && this._groupLayer.appendChild(this._marqueeSelectOutline);
+  }
+  onCanvasDblClick(t) {
+    var i;
+    if (this.mode === "select") {
+      const e = this.editors.find((s) => s.ownsTarget(t.target));
+      e !== void 0 && e !== this._currentMarkerEditor && this.setCurrentEditor(e), this._currentMarkerEditor !== void 0 ? this._currentMarkerEditor.dblClick(r.clientToLocalCoordinates(this._mainCanvas, t.clientX, t.clientY, this.zoomLevel), (i = t.target) !== null && i !== void 0 ? i : void 0, t) : this.setCurrentEditor();
+    }
+  }
+  onPointerMove(t) {
+    var i;
+    if (this.activePointers.set(t.pointerId, { x: t.clientX, y: t.clientY }), t.pointerType === "touch" && this.touchPoints === 1 || t.pointerType !== "touch" && this.isDragging && !t.altKey) {
+      const e = r.clientToLocalCoordinates(this._mainCanvas, t.clientX, t.clientY, this.zoomLevel);
+      if (this._currentMarkerEditor !== void 0 || this._selectedMarkerEditors.length > 0) this._currentMarkerEditor !== void 0 && this._currentMarkerEditor.state === "edit" || t.preventDefault(), this._currentMarkerEditor !== void 0 || this._selectedMarkerEditors.length > 0 ? (this.showOutline(e), this._selectedMarkerEditors.length > 0 ? this._selectedMarkerEditors.forEach((s) => s.manipulate(e, t)) : (i = this._currentMarkerEditor) === null || i === void 0 || i.manipulate(e, t)) : this.zoomLevel > 1 && this.panTo({ x: t.clientX, y: t.clientY }), this.adjustMarqueeSelectOutline();
+      else if (this.isSelecting) {
+        const s = r.clientToLocalCoordinates(this._mainCanvas, this._manipulationStartX, this._manipulationStartY, this.zoomLevel);
+        this._marqueeSelectRect.x = Math.min(e.x, s.x), this._marqueeSelectRect.y = Math.min(e.y, s.y), this._marqueeSelectRect.width = Math.abs(t.clientX - this._manipulationStartX) / this.zoomLevel, this._marqueeSelectRect.height = Math.abs(t.clientY - this._manipulationStartY) / this.zoomLevel, r.setAttributes(this._marqueeSelectOutline, [["x", `${this._marqueeSelectRect.x}`], ["y", `${this._marqueeSelectRect.y}`], ["width", `${this._marqueeSelectRect.width}`], ["height", `${this._marqueeSelectRect.height}`]]);
+      }
+    } else if (t.pointerType !== "touch" && this.isPanning) this.panTo({ x: t.clientX, y: t.clientY });
+    else if (t.pointerType === "touch" && this.touchPoints === 2 && this.isPinching) {
+      const e = this.getPinchDistance(), s = this.getPinchMidpoint();
+      if (this._panX += s.x - this.prevPinchMidpoint.x, this._panY += s.y - this.prevPinchMidpoint.y, this.prevPinchDistance > 0 && this._canvasContainer) {
+        const a = e / this.prevPinchDistance, h = Math.max(0.1, Math.min(10, this._zoomLevel * a)), o = h / this._zoomLevel, n = this._canvasContainer.getBoundingClientRect(), l = s.x - (n.left + n.width / 2), u = s.y - (n.top + n.height / 2);
+        this._panX = l * (1 - o) + this._panX * o, this._panY = u * (1 - o) + this._panY * o, this._zoomLevel = h, this.applyTransform(), this.adjustEditorsZoom();
+      }
+      this.prevPinchDistance = e, this.prevPinchMidpoint = Object.assign({}, s);
+    }
+  }
+  showOutline(t) {
+    if (this._currentMarkerEditor && this._currentMarkerEditor.creationStyle === "drop" && this._currentMarkerEditor.state === "new") {
+      this._mainCanvas === void 0 || this._mainCanvas.contains(this._newMarkerOutline) || this._mainCanvas.appendChild(this._newMarkerOutline);
+      const i = this._currentMarkerEditor.marker.defaultSize;
+      r.setAttributes(this._newMarkerOutline, [["d", this._currentMarkerEditor.marker.getOutline()]]), this._newMarkerOutline.style.transform = `translate(${t.x - i.width / 2}px, ${t.y - i.height / 2}px)`;
+    }
+  }
+  hideOutline() {
+    var t;
+    !((t = this._mainCanvas) === null || t === void 0) && t.contains(this._newMarkerOutline) && this._mainCanvas.removeChild(this._newMarkerOutline);
+  }
+  onPointerUp(t) {
+    var i;
+    if (this.activePointers.delete(t.pointerId), this.touchPoints > 0 && (this.touchPoints--, this.touchPoints === 0 && (this.leadPointerId = void 0)), this.touchPoints < 2 && (this.isPinching = !1, this.prevPinchDistance = 0), this.touchPoints === 1 && this.activePointers.size === 1 && (this.prevPanPoint = Array.from(this.activePointers.values())[0]), this.touchPoints === 0) {
+      if (this._mainCanvas && (this._mainCanvas.style.cursor = "default"), this.isDragging && (this._currentMarkerEditor !== void 0 || this._selectedMarkerEditors.length > 0)) {
+        const e = r.clientToLocalCoordinates(this._mainCanvas, t.clientX, t.clientY, this.zoomLevel);
+        this._selectedMarkerEditors.length > 1 ? (this._selectedMarkerEditors.forEach((s) => s.pointerUp(e, t)), this.adjustMarqueeSelectOutline()) : (i = this._currentMarkerEditor) === null || i === void 0 || i.pointerUp(e, t), this.hideOutline(), this.addUndoStep();
+      } else if (this.isSelecting && (this.finishMarqueeSelection(), this._selectedMarkerEditors.length < 2 && (this.hideMarqueeSelectOutline(), this._selectedMarkerEditors.length === 1))) {
+        const e = this._selectedMarkerEditors[0];
+        this.deselectEditor(), this.setCurrentEditor(e);
+      }
+    }
+    this.isDragging = !1, this.isSelecting = !1, this.isPanning = !1, this.touchPoints === 0 && (this.isPinching = !1, this.prevPinchDistance = 0);
+  }
+  finishMarqueeSelection() {
+    this.deselectEditor(), this.editors.forEach((t) => {
+      const i = t.marker.getBBox();
+      i.x < this._marqueeSelectRect.x + this._marqueeSelectRect.width && i.x + i.width > this._marqueeSelectRect.x && i.y < this._marqueeSelectRect.y + this._marqueeSelectRect.height && i.y + i.height > this._marqueeSelectRect.y && this.selectEditor(t);
+    }), this.adjustMarqueeSelectOutline();
+  }
+  adjustMarqueeSelectOutline() {
+    let t = Number.MAX_VALUE, i = Number.MAX_VALUE, e = 0, s = 0;
+    this._selectedMarkerEditors.forEach((a) => {
+      const h = a.marker.getBBox();
+      t = Math.min(t, h.x), i = Math.min(i, h.y), e = Math.max(e, h.x + h.width), s = Math.max(s, h.y + h.height);
+    }), this._selectedMarkerEditors.length > 1 ? (this._marqueeSelectRect.x = t, this._marqueeSelectRect.y = i, this._marqueeSelectRect.width = e - t, this._marqueeSelectRect.height = s - i, r.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(t) {
+    this.activePointers.delete(t.pointerId), this.touchPoints > 0 && this.touchPoints--, this.hideOutline();
+  }
+  onKeyUp(t) {
+    this._currentMarkerEditor !== void 0 && (t.key === "Delete" || t.key);
+  }
+  attachEvents() {
+    var t, i, e;
+    this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), (t = this._mainCanvas) === null || t === void 0 || t.addEventListener("pointerdown", this.onCanvasPointerDown), (i = this._mainCanvas) === null || i === void 0 || i.addEventListener("touchmove", (s) => s.preventDefault()), (e = this._mainCanvas) === null || e === void 0 || e.addEventListener("dblclick", this.onCanvasDblClick), this._marqueeSelectOutline.addEventListener("dblclick", (s) => {
+      s.preventDefault(), s.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((i) => i.getState()) };
+    return JSON.parse(JSON.stringify(t));
+  }
+  restoreState(t, i = !0) {
+    if (!this._targetImageLoaded) return this._stateToRestore = t, void (this._stateToRestoreAddUndoStep = i);
+    this._stateToRestore = void 0, this._stateToRestoreAddUndoStep = !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);
+    }
+    this.defaultFilter === void 0 && e.defaultFilter && (this.defaultFilter = e.defaultFilter), e.markers.forEach((s) => {
+      const a = this.getMarkerTypeByName(s.typeName);
+      if (a !== void 0) {
+        const h = this.markerEditors.get(a);
+        if (h !== void 0) {
+          const o = this.addNewMarker(h, a);
+          o.restoreState(s), this.editors.push(o);
+        }
+      }
+    }), 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((s) => {
+      s !== this._currentMarkerEditor && s.scale(t, i);
+    }), e !== void 0 && this.setCurrentEditor(e);
+  }
+  adjustEditorsZoom() {
+    this.editors.forEach((t) => {
+      t.zoomLevel = this._zoomLevel;
+    });
+  }
+  toggleLogo() {
+    c.isLicensed("MJS3E") || c.isLicensed("MJS3") ? this.removeLogo() : this.addLogo();
+  }
+  addLogo() {
+    var t, i;
+    this._logoUI !== void 0 && ((t = this._contentContainer) === null || t === void 0 || 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 = it, 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), (i = this._contentContainer) === null || i === void 0 || i.appendChild(this._logoUI), this._logoUI.style.position = "absolute", this._logoUI.style.pointerEvents = "all", this.positionLogo();
+  }
+  removeLogo() {
+    this._contentContainer && this._logoUI !== void 0 && 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 (this._currentMarkerEditor === void 0 || this._currentMarkerEditor.state !== "edit") {
+      const i = this.getState(), e = this.undoRedoManager.getLastUndoStep();
+      t || !e || e.width === i.width && e.height === i.height ? this.undoRedoManager.addUndoStep(i) && this.dispatchEvent(new CustomEvent("areastatechange", { detail: { markerArea: this } })) : (this.undoRedoManager.replaceLastUndoStep(i), this.dispatchEvent(new CustomEvent("areastatechange", { detail: { markerArea: this } })));
+    }
+  }
+  undo() {
+    this.undoStep();
+  }
+  undoStep() {
+    const t = this.undoRedoManager.undo();
+    t !== void 0 && this.restoreState(t, !1);
+  }
+  redo() {
+    this.redoStep();
+  }
+  redoStep() {
+    const t = this.undoRedoManager.redo();
+    t !== void 0 && (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 && window.customElements.get("mjs-marker-area") === void 0 && window.customElements.define("mjs-marker-area", ct);
+class pt 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, t !== void 0 && this.addTargetImage();
+  }
+  get zoomLevel() {
+    return this._zoomLevel;
+  }
+  set zoomLevel(t) {
+    const i = this._zoomLevel;
+    this._zoomLevel = t, this._canvasContainer && this._contentContainer && this._mainCanvas && (this._panX = this._panX * t / i, this._panY = this._panY * t / i, this.applyTransform());
+  }
+  autoZoom() {
+    if (!this._autoZoomIn && !this._autoZoomOut || !this._canvasContainer || this._targetWidth <= 0 || this._targetHeight <= 0) return;
+    const t = this._canvasContainer.clientWidth, i = this._canvasContainer.clientHeight;
+    if (t <= 0 || i <= 0) return;
+    const e = t / this._targetWidth, s = i / this._targetHeight, a = Math.min(e, s);
+    (a > 1 && this._autoZoomIn || a < 1 && this._autoZoomOut) && (this._panX = 0, this._panY = 0, this.zoomLevel = a);
+  }
+  get defaultFilter() {
+    return this._defaultFilter;
+  }
+  set defaultFilter(t) {
+    this._defaultFilter = t;
+  }
+  get autoZoomIn() {
+    return this._autoZoomIn;
+  }
+  set autoZoomIn(t) {
+    this._autoZoomIn = t;
+  }
+  get autoZoomOut() {
+    return this._autoZoomOut;
+  }
+  set autoZoomOut(t) {
+    this._autoZoomOut = t;
+  }
+  applyTransform() {
+    this._transformContainer && (this._transformContainer.style.transform = `translate(${this._panX}px, ${this._panY}px) scale(${this._zoomLevel})`);
+  }
+  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._autoZoomIn = !1, this._autoZoomOut = !1, this._isInitialized = !1, this._defs = [], this._panX = 0, this._panY = 0, this.prevPanPoint = { x: 0, y: 0 }, this.touchPoints = 0, this.activePointers = /* @__PURE__ */ new Map(), this.isPinching = !1, this.prevPinchDistance = 0, this.prevPinchMidpoint = { x: 0, y: 0 }, this.markerTypes = [k, v, f, M, x, y, m, C, S, T, P, V, B, L, z, G, A, w], 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.autoZoom = this.autoZoom.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 } })), c.addKeyAddListener(this.toggleLogo), this.createLayout(), this.addMainCanvas(), this.attachEvents(), this._isInitialized = !0, this.targetImage !== void 0 && 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 = "none", this._canvasContainer.className = "canvas-container", this._canvasContainer.style.display = "flex", this._canvasContainer.style.flexGrow = "2", this._canvasContainer.style.flexShrink = "2", this._canvasContainer.style.justifyContent = "center", this._canvasContainer.style.alignItems = "center", this._canvasContainer.style.overflow = "hidden", this._canvasContainer.addEventListener("wheel", (i) => {
+      i.preventDefault(), this._panX -= i.deltaX, this._panY -= i.deltaY, this.applyTransform();
+    }, { passive: !1 }), this._transformContainer = document.createElement("div"), this._transformContainer.style.display = "grid", this._transformContainer.style.gridTemplateColumns = "1fr", this._canvasContainer.appendChild(this._transformContainer), this._contentContainer.appendChild(this._canvasContainer), (t = this.shadowRoot) === null || t === void 0 || t.appendChild(this._contentContainer);
+  }
+  addMainCanvas() {
+    var t, i;
+    this.width = ((t = this._contentContainer) === null || t === void 0 ? void 0 : t.clientWidth) || 0, this.height = ((i = this._contentContainer) === null || i === void 0 ? void 0 : i.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.addDefsToMainCanvas(), this._groupLayer = r.createGroup(), this._mainCanvas.appendChild(this._groupLayer), this._transformContainer.appendChild(this._mainCanvas);
+  }
+  addDefsToMainCanvas() {
+    var t;
+    this._defsElement = r.createDefs(), (t = this._mainCanvas) === null || t === void 0 || t.appendChild(this._defsElement), this._defsElement.append(...this._defs);
+  }
+  setMainCanvasSize() {
+    this._mainCanvas !== void 0 && 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() {
+    this._editingTarget !== void 0 && (this._editingTarget.width = this._targetWidth, this._editingTarget.height = this._targetHeight, this._editingTarget.style.width = `${this._targetWidth}px`, this._editingTarget.style.height = `${this._targetHeight}px`);
+  }
+  addTargetImage() {
+    this._isInitialized && this._editingTarget === void 0 && this.targetImage !== void 0 && this._canvasContainer !== void 0 && this._mainCanvas !== void 0 && (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 (this._editingTarget !== void 0) {
+        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, a = this._targetHeight > 0 ? this._targetHeight : this._targetWidth > 0 ? this._targetWidth / e : i.clientHeight > 0 ? i.clientHeight : i.naturalHeight;
+          this._targetWidth = s, this._targetHeight = a;
+        }
+        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, this._stateToRestore !== void 0 && this.show(this._stateToRestore);
+      }
+      this.zoomLevel = this._zoomLevel, this.autoZoom();
+    }), this._editingTarget.src = this.targetImage.src, this._transformContainer.insertBefore(this._editingTarget, this._mainCanvas));
+  }
+  addDefaultFilterDefs() {
+    this.addDefs(...Y.getDefaultFilterSet());
+  }
+  addNewMarker(t) {
+    if (this._mainCanvas === void 0) throw new Error("Main canvas is not initialized.");
+    const i = r.createGroup();
+    this.defaultFilter && t.applyDefaultFilter && i.setAttribute("filter", this.defaultFilter), this._mainCanvas.appendChild(i);
+    const e = new t(i);
+    return this.attachMarkerEvents(e), e;
+  }
+  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"), (t = this._mainCanvas) === null || t === void 0 || t.addEventListener("pointerdown", this.onCanvasPointerDown), (i = this._mainCanvas) === null || i === void 0 || i.addEventListener("touchmove", (e) => e.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.activePointers.set(t.pointerId, { x: t.clientX, y: t.clientY }), this.touchPoints++, this.touchPoints === 1 ? (this.leadPointerId = t.pointerId, this.prevPanPoint = { x: t.clientX, y: t.clientY }, this._mainCanvas && (this._mainCanvas.style.cursor = "grabbing")) : this.touchPoints === 2 && (this.isPinching = !0, this.prevPinchDistance = this.getPinchDistance(), this.prevPinchMidpoint = this.getPinchMidpoint());
+  }
+  onPointerMove(t) {
+    if (this.activePointers.set(t.pointerId, { x: t.clientX, y: t.clientY }), this.touchPoints === 2 && this.isPinching) {
+      const i = this.getPinchDistance(), e = this.getPinchMidpoint();
+      if (this._panX += e.x - this.prevPinchMidpoint.x, this._panY += e.y - this.prevPinchMidpoint.y, this.prevPinchDistance > 0 && this._canvasContainer) {
+        const s = i / this.prevPinchDistance, a = Math.max(0.1, Math.min(10, this._zoomLevel * s)), h = a / this._zoomLevel, o = this._canvasContainer.getBoundingClientRect(), n = e.x - (o.left + o.width / 2), l = e.y - (o.top + o.height / 2);
+        this._panX = n * (1 - h) + this._panX * h, this._panY = l * (1 - h) + this._panY * h, this._zoomLevel = a, this.applyTransform();
+      }
+      this.prevPinchDistance = i, this.prevPinchMidpoint = Object.assign({}, e);
+    } else this.touchPoints > 0 && this.leadPointerId === t.pointerId && this.panTo({ x: t.clientX, y: t.clientY });
+  }
+  onPointerUp(t) {
+    this.activePointers.delete(t.pointerId), this.touchPoints > 0 && (this.touchPoints--, this.touchPoints === 0 && (this.leadPointerId = void 0), this._mainCanvas && (this._mainCanvas.style.cursor = "default")), this.touchPoints < 2 && (this.isPinching = !1, this.prevPinchDistance = 0), this.touchPoints === 1 && this.activePointers.size === 1 && (this.prevPanPoint = Array.from(this.activePointers.values())[0]);
+  }
+  onPointerOut(t) {
+    this.activePointers.delete(t.pointerId), 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); !((i = this._mainCanvas) === null || i === void 0) && i.lastChild; ) this._mainCanvas.removeChild(this._mainCanvas.lastChild);
+    this.addDefsToMainCanvas(), this.defaultFilter === void 0 && e.defaultFilter && (this.defaultFilter = e.defaultFilter), e.markers.forEach((s) => {
+      const a = this.getMarkerTypeByName(s.typeName);
+      if (a !== void 0) {
+        const h = this.addNewMarker(a);
+        h.restoreState(s), this.markers.push(h);
+      }
+    }), 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) {
+    this._panX -= this.prevPanPoint.x - t.x, this._panY -= this.prevPanPoint.y - t.y, this.applyTransform(), this.prevPanPoint = t;
+  }
+  getPinchDistance() {
+    const t = Array.from(this.activePointers.values());
+    if (t.length < 2) return 0;
+    const i = t[1].x - t[0].x, e = t[1].y - t[0].y;
+    return Math.sqrt(i * i + e * e);
+  }
+  getPinchMidpoint() {
+    const t = Array.from(this.activePointers.values());
+    return t.length < 2 ? { x: 0, y: 0 } : { x: (t[0].x + t[1].x) / 2, y: (t[0].y + t[1].y) / 2 };
+  }
+  toggleLogo() {
+    c.isLicensed("MJS3V") || c.isLicensed("MJS3") ? this.removeLogo() : this.addLogo();
+  }
+  addLogo() {
+    var t, i;
+    this._logoUI !== void 0 && ((t = this._contentContainer) === null || t === void 0 || 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 = it, 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), (i = this._contentContainer) === null || i === void 0 || i.appendChild(this._logoUI), this._logoUI.style.position = "absolute", this._logoUI.style.pointerEvents = "all", this.positionLogo();
+  }
+  removeLogo() {
+    this._contentContainer && this._logoUI !== void 0 && 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 && window.customElements.get("mjs-marker-view") === void 0 && window.customElements.define("mjs-marker-view", pt);
+class gt {
+  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, t !== void 0 && this.addTargetImage();
+  }
+  get defaultFilter() {
+    return this._defaultFilter;
+  }
+  set defaultFilter(t) {
+    this._defaultFilter = t;
+  }
+  get targetImageLoadTimeout() {
+    return this._targetImageLoadTimeout;
+  }
+  set targetImageLoadTimeout(t) {
+    this._targetImageLoadTimeout = 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._targetImageLoadTimeout = 1e4, this._defs = [], this.markerTypes = [k, v, f, M, x, y, m, C, S, T, P, V, B, L, z, G, A, w], 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, this.targetImage !== void 0 && 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 t;
+    this._defsElement = r.createDefs(), (t = this._mainCanvas) === null || t === void 0 || t.appendChild(this._defsElement), this._defsElement.append(...this._defs);
+  }
+  setMainCanvasSize() {
+    this._mainCanvas !== void 0 && 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() {
+    this._editingTarget !== void 0 && (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 && this._editingTarget === void 0 && this.targetImage !== void 0 && this._mainCanvas !== void 0 && (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", (i) => {
+      if (this._editingTarget !== void 0) {
+        if (this._targetHeight <= 0 || this._targetWidth <= 0) {
+          const e = i.target, s = e.naturalWidth / e.naturalHeight, a = this._targetWidth > 0 ? this._targetWidth : this._targetHeight > 0 ? this._targetHeight * s : e.naturalWidth, h = this._targetHeight > 0 ? this._targetHeight : this._targetWidth > 0 ? this._targetWidth / s : e.naturalHeight;
+          this._targetWidth = a, this._targetHeight = h;
+        }
+        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, (t = this._renderHelperContainer) === null || t === void 0 || t.insertBefore(this._editingTarget, this._mainCanvas));
+  }
+  addDefaultFilterDefs() {
+    this.addDefs(...Y.getDefaultFilterSet());
+  }
+  addNewMarker(t) {
+    if (this._mainCanvas === void 0) throw new Error("Main canvas is not initialized.");
+    const i = r.createGroup();
+    return this.defaultFilter && t.applyDefaultFilter && i.setAttribute("filter", this.defaultFilter), this._mainCanvas.appendChild(i), new t(i);
+  }
+  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); !((i = this._mainCanvas) === null || i === void 0) && i.lastChild; ) this._mainCanvas.removeChild(this._mainCanvas.lastChild);
+    this.addDefsToMainCanvas(), this.defaultFilter === void 0 && e.defaultFilter && (this.defaultFilter = e.defaultFilter), e.markers.forEach((s) => {
+      const a = this.getMarkerTypeByName(s.typeName);
+      if (a !== void 0) {
+        const h = this.addNewMarker(a);
+        h.restoreState(s), this.markers.push(h);
+      }
+    }), e.width && e.height && (e.width !== this.targetWidth || e.height !== this.targetHeight) && this.scaleMarkers(this.targetWidth / e.width, this.targetHeight / e.height);
+  }
+  scaleMarkers(t, i) {
+    this.markers.forEach((e) => {
+      e.scale(t, i);
+    });
+  }
+  rasterize(t, i) {
+    var e, s;
+    return Q(this, void 0, void 0, function* () {
+      if (!this.naturalSize && this.targetWidth <= 0 && this.targetHeight <= 0 && (this._targetWidth = t.width, this._targetHeight = t.height), this.init(), this._mainCanvas === void 0 || this.targetImage === void 0) throw new Error("Not properly initialized.");
+      let a = 0;
+      for (; !this._targetImageLoaded && (this._targetImageLoadTimeout === 0 || a++ < this._targetImageLoadTimeout / 100); ) yield new Promise((E) => setTimeout(E, 100));
+      this.restoreState(t);
+      const h = i !== void 0 ? i : document.createElement("canvas");
+      this.targetImage === null && (this.markersOnly = !0, this.naturalSize = !1);
+      const o = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      o.setAttribute("xmlns", "http://www.w3.org/2000/svg"), o.setAttribute("width", this._mainCanvas.width.baseVal.valueAsString), o.setAttribute("height", this._mainCanvas.height.baseVal.valueAsString), o.setAttribute("viewBox", "0 0 " + this._mainCanvas.viewBox.baseVal.width.toString() + " " + this._mainCanvas.viewBox.baseVal.height.toString()), yield new Promise((E) => setTimeout(E, 200)), o.innerHTML = this._mainCanvas.innerHTML, this.naturalSize === !0 ? (o.width.baseVal.value = this.targetImage.naturalWidth, o.height.baseVal.value = this.targetImage.naturalHeight) : this.width !== void 0 && this.height !== void 0 && (o.width.baseVal.value = this.width, o.height.baseVal.value = this.height), h.width = o.width.baseVal.value, h.height = o.height.baseVal.value;
+      const n = o.outerHTML, l = h.getContext("2d");
+      if (l === null) throw new Error("Canvas 2D context is not available.");
+      this.markersOnly !== !0 && l.drawImage(this.targetImage, 0, 0, h.width, h.height);
+      const u = window.URL, p = new Image(h.width, h.height);
+      p.setAttribute("crossOrigin", "anonymous");
+      const _ = new Blob([n], { type: "image/svg+xml" }), J = u.createObjectURL(_);
+      let O = "";
+      for (p.onload = () => {
+        l.drawImage(p, 0, 0), u.revokeObjectURL(J), O = h.toDataURL(this.imageType, this.imageQuality);
+      }, p.src = J, a = 0; !O && a++ < 100; ) yield new Promise((E) => setTimeout(E, 100));
+      return this._editingTarget && ((e = this._renderHelperContainer) === null || e === void 0 || e.removeChild(this._editingTarget)), (s = this._renderHelperContainer) === null || s === void 0 || s.removeChild(this._mainCanvas), document.body.removeChild(this._renderHelperContainer), O;
+    });
+  }
+  addDefs(...t) {
+    this._defs.push(...t), this._defsElement && this._defsElement.append(...t);
+  }
+}
+export {
+  c as Activator,
+  f as ArrowMarker,
+  nt as ArrowMarkerEditor,
+  T as CalloutMarker,
+  lt as CalloutMarkerEditor,
+  G as CaptionFrameMarker,
+  dt as CaptionFrameMarkerEditor,
+  L as CheckImageMarker,
+  C as CoverMarker,
+  A as CurveMarker,
+  ut as CurveMarkerEditor,
+  B as CustomImageMarker,
+  P as EllipseFrameMarker,
+  V as EllipseMarker,
+  k as FrameMarker,
+  y as FreehandMarker,
+  D as FreehandMarkerEditor,
+  tt as Grip,
+  S as HighlightMarker,
+  w as HighlighterMarker,
+  F as ImageMarkerBase,
+  U as ImageMarkerEditor,
+  v as LineMarker,
+  et as LinearMarkerBase,
+  W as LinearMarkerEditor,
+  ct as MarkerArea,
+  b as MarkerBase,
+  H as MarkerBaseEditor,
+  pt as MarkerView,
+  M as MeasurementMarker,
+  x as PolygonMarker,
+  rt as PolygonMarkerEditor,
+  R as RectangularBoxMarkerBase,
+  gt as Renderer,
+  g as ResizeGrip,
+  at as RotateGrip,
+  $ as ShapeMarkerBase,
+  N as ShapeMarkerEditor,
+  j as ShapeOutlineMarkerBase,
+  X as ShapeOutlineMarkerEditor,
+  Y as SvgFilters,
+  r as SvgHelper,
+  st as TextBlock,
+  ot as TextBlockEditor,
+  m as TextMarker,
+  Z as TextMarkerEditor,
+  z as XImageMarker
+};
+//# sourceMappingURL=markerjs3-DI_cywfl.js.map