@linkurious/ogma-annotations-react 1.1.27 → 2.0.0

package/dist/index.mjs

@@ -1,1961 +1,8 @@
-import Wr, { createContext as Ye, useContext as Ur, useReducer as Xr, useState as Et, useEffect as he } from "react";
-import { useOgma as Gr } from "@linkurious/ogma-react";
-var Vr = Object.defineProperty, Zr = (l, t, i) => t in l ? Vr(l, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : l[t] = i, m = (l, t, i) => Zr(l, typeof t != "symbol" ? t + "" : t, i);
-let Jt = (l = 21) => crypto.getRandomValues(new Uint8Array(l)).reduce((t, i) => (i &= 63, i < 36 ? t += i.toString(36) : i < 62 ? t += (i - 26).toString(36).toUpperCase() : i > 62 ? t += "-" : t += "_", t), "");
-const Pt = {
-  strokeType: "plain",
-  strokeColor: "#202020",
-  strokeWidth: 1,
-  head: "none",
-  tail: "none"
-}, $e = {
-  id: 0,
-  type: "Feature",
-  properties: {
-    type: "arrow",
-    style: {
-      ...Pt
-    }
-  },
-  geometry: {
-    type: "LineString",
-    coordinates: [
-      [0, 0],
-      [100, 100]
-    ]
-  }
-  // type: 'arrow',
-  // stroke: {
-  //   type: 'plain',
-  //   color: 'black',
-  //   width: 1
-  // },
-  // head: 'none',
-  // tail: 'arrow-plain',
-  // start: { x: 0, y: 0 },
-  // end: { x: 100, y: 100 }
-}, Yr = (l = 0, t = 0, i = 0, r = 0, a = { ...Pt }) => ({
-  id: Jt(),
-  type: "Feature",
-  properties: {
-    type: "arrow",
-    style: {
-      ...Pt,
-      ...a
-    }
-  },
-  geometry: {
-    type: "LineString",
-    coordinates: [
-      [l, t],
-      [i, r]
-    ]
-  }
-}), Jr = "http://www.w3.org/2000/svg";
-function wt(l) {
-  return document.createElementNS(Jr, l);
-}
-function Je(l) {
-  return l.geometry.bbox || Kr(l), l.geometry.bbox;
-}
-function ft(l) {
-  const t = Je(l);
-  return {
-    width: t[2] - t[0],
-    height: t[3] - t[1]
-  };
-}
-function dt(l) {
-  const t = Je(l);
-  return { x: t[0], y: t[1] };
-}
-function Kr(l) {
-  const [t, i] = l.geometry.coordinates[0][0], [r, a] = l.geometry.coordinates[0][2];
-  l.geometry.bbox = [t, i, r, a];
-}
-function Qr(l, t, i, r, a) {
-  l.geometry.bbox = [t, i, t + r, i + a], l.geometry.coordinates = [
-    [
-      [t, i],
-      [t + r, i],
-      [t + r, i + a],
-      [t, i + a],
-      [t, i]
-    ]
-  ];
-}
-function zt(l) {
-  const [t, i] = l.geometry.coordinates[0];
-  return { x: t, y: i };
-}
-function Rt(l, t) {
-  const [i, r] = l.geometry.coordinates[t === "start" ? 0 : 1];
-  return { x: i, y: r };
-}
-function Xt(l) {
-  const [t, i] = l.geometry.coordinates[1];
-  return { x: t, y: i };
-}
-function Ke(l, t, i) {
-  l.geometry.coordinates[0] = [t, i];
-}
-function Qe(l, t, i) {
-  l.geometry.coordinates[1] = [t, i];
-}
-function Gt(l) {
-  return { start: zt(l), end: Xt(l) };
-}
-function St(l, t, i, r) {
-  t === "start" ? Ke(l, i, r) : Qe(l, i, r);
-}
-const tr = (l) => parseInt(l.getAttribute("data-handle-id") || "-1");
-function tn(l) {
-  return Array.isArray(l) && l.length === 2 && l.every(isFinite);
-}
-function en(l, t, i, r) {
-  for (let a = 0; a < l.coordinates.length; a++) {
-    const h = l.coordinates[a];
-    if (tn(h))
-      h[0] = i + (h[0] - i) * t, h[1] = r + (h[1] - r) * t;
-    else
-      for (let c = 0; c < h.length; c++) {
-        const d = h[c];
-        d[0] = i + (d[0] - i) * t, d[1] = r + (d[1] - r) * t;
-      }
-  }
-  return l;
-}
-function Wt(l, t, i) {
-  const r = Math.atan2(l.y - t.y, l.x - t.x);
-  return {
-    x: t.x + i * Math.cos(r),
-    y: t.y + i * Math.sin(r)
-  };
-}
-function Vt(l, t) {
-  if (!t) return { x: l.clientX, y: l.clientY };
-  const i = t.getBoundingClientRect();
-  return {
-    x: l.clientX - i.left - t.clientLeft,
-    y: l.clientY - i.top - t.clientTop
-  };
-}
-const xt = (l, t) => ({
-  x: l.x - t.x,
-  y: l.y - t.y
-}), _t = (l) => Math.sqrt(l.x * l.x + l.y * l.y), er = (l) => ({
-  x: -l.x,
-  y: -l.y
-}), rr = (l) => {
-  const t = _t(l);
-  return t === 0 ? { x: 0, y: 0 } : {
-    x: l.x / t,
-    y: l.y / t
-  };
-}, Ct = (l, t) => ({
-  x: l.x + t.x,
-  y: l.y + t.y
-}), nr = (l, t) => ({
-  x: l.x * t,
-  y: l.y * t
-}), Ut = (l, t) => ({
-  x: l.x * t.x,
-  y: l.y * t.y
-}), nt = (l, t) => {
-  const i = Math.sin(t), r = Math.cos(t);
-  return {
-    x: l.x * r - l.y * i,
-    y: l.x * i + l.y * r
-  };
-}, rn = (l, t) => ({
-  x: l.x / t,
-  y: l.y / t
-}), Ie = (l, t) => l.x * t.x + l.y * t.y, nn = 0.5;
-function ir(l, t = 5, i = 30) {
-  var r;
-  const { start: a, end: h } = Gt(l), c = xt(h, a), d = l.properties.style && l.properties.style.strokeWidth ? (r = l.properties.style) == null ? void 0 : r.strokeWidth : 0;
-  return Math.min(i, Math.max(3 * d, _t(c) * 0.01, t));
-}
-function Me(l, t, i, r) {
-  const a = nr(er(rr(t)), r);
-  if (!i || i !== "arrow" && i !== "arrow-plain") return "";
-  const h = Ct(l, nt(a, Math.PI / 10)), c = Ct(l, nt(a, -Math.PI / 10)), d = `${l.x} ${l.y}`;
-  return `M ${h.x} ${h.y} L ${d} ${c.x} ${c.y} ${i === "arrow" ? "" : `${h.x} ${h.y}`}`;
-}
-function sn(l, t, i, r, a) {
-  const { start: h, end: c } = Gt(l), {
-    tail: d,
-    head: f,
-    strokeColor: g,
-    strokeWidth: p = 0
-  } = l.properties.style || i, w = xt(c, h), b = ir(l, r, a), A = wt("g"), E = wt("path");
-  A.setAttribute("data-annotation", `${l.id}`), A.setAttribute("data-annotation-type", "arrow");
-  const k = f === "arrow-plain" || d === "arrow", L = g || "none";
-  E.setAttribute("stroke", L), E.setAttribute("stroke-width", `${p}`), E.setAttribute("fill", k ? g || "" : "none"), E.setAttribute("stroke-linecap", "round"), E.setAttribute("stroke-linejoin", "round");
-  const M = Me(h, er(w), d, b), C = Me(c, w, f, b), N = M + `M ${h.x} ${h.y} ${c.x} ${c.y}` + C;
-  E.setAttribute("d", N), A.appendChild(E), Oe(A, h, L, d, p), Oe(A, c, L, f, p), t.appendChild(A);
-}
-function Oe(l, t, i, r, a) {
-  r === "halo-dot" && ze(
-    l,
-    t,
-    on(i),
-    nn,
-    a * 4
-  ), (r === "dot" || r === "halo-dot") && ze(l, t, i, 1, a * 2);
-}
-function on(l) {
-  return l === "none" ? "none" : l;
-}
-function ze(l, t, i, r, a) {
-  const h = wt("circle");
-  h.setAttribute("cx", `${t.x}`), h.setAttribute("cy", `${t.y}`), h.setAttribute("r", `${a}`), h.setAttribute("fill-opacity", `${r}`), h.setAttribute("fill", i), l.appendChild(h);
-}
-const U = -1, Zt = "dragging", Yt = "dragstart", Lt = "dragend", fe = "select", ge = "unselect", an = "hover", ln = "unhover", pe = "remove", ye = "add", hn = "cancelDrawing", me = "update", un = "link";
-function sr(l) {
-  return l && l.__esModule && Object.prototype.hasOwnProperty.call(l, "default") ? l.default : l;
-}
-var Pe = { exports: {} }, Fe;
-function cn() {
-  return Fe || (Fe = 1, function(l) {
-    var t = Object.prototype.hasOwnProperty, i = "~";
-    function r() {
-    }
-    Object.create && (r.prototype = /* @__PURE__ */ Object.create(null), new r().__proto__ || (i = !1));
-    function a(f, g, p) {
-      this.fn = f, this.context = g, this.once = p || !1;
-    }
-    function h(f, g, p, w, b) {
-      if (typeof p != "function")
-        throw new TypeError("The listener must be a function");
-      var A = new a(p, w || f, b), E = i ? i + g : g;
-      return f._events[E] ? f._events[E].fn ? f._events[E] = [f._events[E], A] : f._events[E].push(A) : (f._events[E] = A, f._eventsCount++), f;
-    }
-    function c(f, g) {
-      --f._eventsCount === 0 ? f._events = new r() : delete f._events[g];
-    }
-    function d() {
-      this._events = new r(), this._eventsCount = 0;
-    }
-    d.prototype.eventNames = function() {
-      var f = [], g, p;
-      if (this._eventsCount === 0) return f;
-      for (p in g = this._events)
-        t.call(g, p) && f.push(i ? p.slice(1) : p);
-      return Object.getOwnPropertySymbols ? f.concat(Object.getOwnPropertySymbols(g)) : f;
-    }, d.prototype.listeners = function(f) {
-      var g = i ? i + f : f, p = this._events[g];
-      if (!p) return [];
-      if (p.fn) return [p.fn];
-      for (var w = 0, b = p.length, A = new Array(b); w < b; w++)
-        A[w] = p[w].fn;
-      return A;
-    }, d.prototype.listenerCount = function(f) {
-      var g = i ? i + f : f, p = this._events[g];
-      return p ? p.fn ? 1 : p.length : 0;
-    }, d.prototype.emit = function(f, g, p, w, b, A) {
-      var E = i ? i + f : f;
-      if (!this._events[E]) return !1;
-      var k = this._events[E], L = arguments.length, M, C;
-      if (k.fn) {
-        switch (k.once && this.removeListener(f, k.fn, void 0, !0), L) {
-          case 1:
-            return k.fn.call(k.context), !0;
-          case 2:
-            return k.fn.call(k.context, g), !0;
-          case 3:
-            return k.fn.call(k.context, g, p), !0;
-          case 4:
-            return k.fn.call(k.context, g, p, w), !0;
-          case 5:
-            return k.fn.call(k.context, g, p, w, b), !0;
-          case 6:
-            return k.fn.call(k.context, g, p, w, b, A), !0;
-        }
-        for (C = 1, M = new Array(L - 1); C < L; C++)
-          M[C - 1] = arguments[C];
-        k.fn.apply(k.context, M);
-      } else {
-        var N = k.length, P;
-        for (C = 0; C < N; C++)
-          switch (k[C].once && this.removeListener(f, k[C].fn, void 0, !0), L) {
-            case 1:
-              k[C].fn.call(k[C].context);
-              break;
-            case 2:
-              k[C].fn.call(k[C].context, g);
-              break;
-            case 3:
-              k[C].fn.call(k[C].context, g, p);
-              break;
-            case 4:
-              k[C].fn.call(k[C].context, g, p, w);
-              break;
-            default:
-              if (!M) for (P = 1, M = new Array(L - 1); P < L; P++)
-                M[P - 1] = arguments[P];
-              k[C].fn.apply(k[C].context, M);
-          }
-      }
-      return !0;
-    }, d.prototype.on = function(f, g, p) {
-      return h(this, f, g, p, !1);
-    }, d.prototype.once = function(f, g, p) {
-      return h(this, f, g, p, !0);
-    }, d.prototype.removeListener = function(f, g, p, w) {
-      var b = i ? i + f : f;
-      if (!this._events[b]) return this;
-      if (!g)
-        return c(this, b), this;
-      var A = this._events[b];
-      if (A.fn)
-        A.fn === g && (!w || A.once) && (!p || A.context === p) && c(this, b);
-      else {
-        for (var E = 0, k = [], L = A.length; E < L; E++)
-          (A[E].fn !== g || w && !A[E].once || p && A[E].context !== p) && k.push(A[E]);
-        k.length ? this._events[b] = k.length === 1 ? k[0] : k : c(this, b);
-      }
-      return this;
-    }, d.prototype.removeAllListeners = function(f) {
-      var g;
-      return f ? (g = i ? i + f : f, this._events[g] && c(this, g)) : (this._events = new r(), this._eventsCount = 0), this;
-    }, d.prototype.off = d.prototype.removeListener, d.prototype.addListener = d.prototype.on, d.prefixed = i, d.EventEmitter = d, l.exports = d;
-  }(Pe)), Pe.exports;
-}
-var dn = cn();
-const or = /* @__PURE__ */ sr(dn);
-class ar extends or {
-  constructor(t, i) {
-    super(), m(this, "ogma"), m(this, "elements"), m(this, "layer"), m(this, "editor"), m(this, "selectedId", U), m(this, "hoveredId", U), m(this, "ogmaOptions"), m(this, "shouldDetect"), m(this, "isDragging"), m(this, "showeditorOnHover"), m(this, "_onKeyUp", (r) => {
-      r.code === 27 && this.selectedId !== U ? this.unselect() : (r.code === 46 || r.code === 8) && this.selectedId !== U && this._canRemove() && this.remove(this.selectedId);
-    }), m(this, "_onClickMouseMove", (r) => {
-      if (!r.domEvent || this.isDragging || !this.shouldDetect || r.domEvent.type !== "mousemove" && r.domEvent.target && r.domEvent.target.tagName === "a")
-        return;
-      const a = this.ogma.view.screenToGraphCoordinates(r), h = this.shouldDetect || !this.shouldDetect && +this.selectedId > -1 ? this.detect(a, 0) : void 0;
-      r.domEvent.type === "mousemove" ? h ? this.hover(h.id) : this.hoveredId !== U && this.unhover() : h ? this.select(h.id) : this.selectedId !== U && this.unselect();
-    }), this.ogma = t, this.elements = [], this.shouldDetect = !0, this.isDragging = !1, this.showeditorOnHover = !0, this.ogmaOptions = t.getOptions(), t.events.on(["click", "mousemove"], this._onClickMouseMove).on("keyup", this._onKeyUp).on("frame", () => {
-      this.refreshEditor(), this.refreshDrawing();
-    }), this.layer = t.layers.addSVGLayer({
-      draw: (r) => this.draw(r)
-    }), this.layer.moveToTop(), this.editor = t.layers.addLayer(i), this.editor.hide();
-  }
-  _canRemove() {
-    return !0;
-  }
-  /**
-   * @method add
-   * @param options Params for the annotation (merged with default)
-   * @returns the added annotation
-   */
-  add(t) {
-    const i = this.getDefaultOptions(), r = Object.assign(t, {
-      id: t.id === void 0 ? Jt() : t.id,
-      type: t.type,
-      properties: {
-        ...i.properties,
-        ...t.properties || {},
-        // styles need to be merged
-        style: { ...i.properties.style, ...t.properties.style || {} }
-      },
-      geometry: {
-        ...i.geometry,
-        ...t.geometry
-      }
-    });
-    return this.elements.push(r), this.layer.refresh(), this.emit(ye, r), r;
-  }
-  updateStyle(t, i) {
-    this.updateAnnotation(t, {
-      properties: {
-        style: i
-      }
-    });
-  }
-  updateGeometry(t, i) {
-    this.updateAnnotation(t, {
-      geometry: i
-    });
-  }
-  scale(t, i, r, a) {
-    this.updateGeometry(
-      t,
-      en(t.geometry, i, r, a)
-    );
-  }
-  /**
-   * @method update
-   * Updates an annotation (position, color etc)
-   * @param id Id of the annotation to update
-   * @param element params of the annotation
-   */
-  update(t, i) {
-    const r = this.getById(t);
-    this.updateAnnotation(r, i);
-  }
-  updateAnnotation(t, i) {
-    if (!t) return;
-    const r = t.id;
-    Object.keys(i).forEach((a) => {
-      if (a !== "id")
-        if (a === "properties") {
-          const h = i.properties || { style: {} };
-          t.properties = {
-            ...t.properties || {},
-            ...h || {},
-            style: {
-              ...t.properties.style || {},
-              ...h.style || {}
-            }
-          };
-        } else a === "geometry" ? t.geometry = {
-          ...t.geometry,
-          ...i.geometry
-        } : t[a] = i[a];
-    }), r === this.selectedId && this.refreshEditor(), this.layer.refresh();
-  }
-  getById(t) {
-    const i = Number(t);
-    for (let r = 0; r < this.elements.length; r++) {
-      const a = this.elements[r];
-      if (!(a.id !== t && a.id !== i))
-        return a;
-    }
-  }
-  /**
-   * @method select
-   * @param id id of the element to select
-   * Select element, show editor, disable Ogma dragging and fire event
-   */
-  select(t) {
-    const i = this.getById(t);
-    i && (this.editor.show(), this.selectedId = t, this.refreshEditor(), this.layer.refresh(), this.emit(fe, i));
-  }
-  hover(t) {
-    const i = this.getById(t);
-    i && (this.showeditorOnHover && this.editor.show(), this.hoveredId = t, this.refreshEditor(), this.layer.refresh(), this.emit(an, i));
-  }
-  getSelectedFeature() {
-    return this.selectedId === U ? null : this.getById(this.selectedId);
-  }
-  unselect() {
-    const t = this.getById(this.selectedId);
-    return t && this.emit(ge, t), this.selectedId = U, this.hoveredId === U && this.editor.hide(), this.layer.refresh(), this;
-  }
-  unhover() {
-    const t = this.getById(this.hoveredId);
-    return this.emit(ln, t), this.hoveredId = U, this.selectedId === U && this.editor.hide(), this.layer.refresh(), this;
-  }
-  /**
-   * @method remove
-   * @param id Id of the annotation to remove
-   * Removes annotation with the given id
-   */
-  remove(t) {
-    const i = this.getById(t);
-    t === this.hoveredId && this.unhover(), t === this.selectedId && this.unselect(), this.elements = this.elements.filter((r) => r.id !== t), i && this.emit(pe, i), this.layer.refresh();
-  }
-  /**
-   * @method disableDragging
-   * Prevents Ogma from dragging elements or moving the view while dragging an annotation
-   */
-  disableDragging() {
-    this.ogma.setOptions({
-      interactions: {
-        drag: { enabled: !1 },
-        pan: { enabled: !1 }
-      },
-      detect: {
-        nodes: !1,
-        edges: !1,
-        nodeTexts: !1,
-        edgeTexts: !1
-      }
-    });
-  }
-  /**
-   * @method restoreDragging
-   * restore ogma options as they were before we start dragging an annotation
-   */
-  restoreDragging() {
-    this.ogma.setOptions(this.ogmaOptions);
-  }
-  enableDetection() {
-    this.shouldDetect = !0;
-  }
-  /**
-   * @method disableDetection
-   * Disables the hover behaviour, used by controller to avoid hovering
-   * arrows while dragging texts and vice versa
-   */
-  disableDetection() {
-    this.shouldDetect = !1;
-  }
-  refreshLayer() {
-    this.layer.refresh();
-  }
-  refreshDrawing() {
-  }
-  getElements() {
-    return [...this.elements];
-  }
-  destroy() {
-    this.ogma.events.off(this._onClickMouseMove).off(this._onKeyUp), this.layer.destroy();
-  }
-}
-const He = "handle-line", Ne = "handle-start", je = "handle-end";
-class fn extends ar {
-  constructor(t, i = {}) {
-    super(
-      t,
-      `
-    <div class="arrow-handle">
-      <div id="${He}" data-handle-id="0" class="handle line"></div>
-      <div id="${Ne}" data-handle-id="1" class="handle point"></div>
-      <div id="${je}" data-handle-id="2" class="handle point"></div>
-    </div>
-  `
-    ), m(this, "draggedHandle", U), m(this, "start", { x: 0, y: 0 }), m(this, "end", { x: 0, y: 0 }), m(this, "arrow", { ...$e }), m(this, "startX", 0), m(this, "startY", 0), m(this, "minArrowHeight", 0), m(this, "maxArrowHeight", 0), m(this, "handles", []), m(this, "onHandleMouseDown", (r) => {
-      const a = this.getById(this.selectedId) || this.getById(this.hoveredId);
-      if (!a) return;
-      const { x: h, y: c } = Vt(r, this.ogma.getContainer());
-      this.startDragging(a, h, c), this.draggedHandle = tr(r.target);
-    }), m(this, "onMouseUp", () => {
-      this.draggedHandle !== -1 && (this.restoreDragging(), this.isDragging = !1, this.draggedHandle = U, this.emit(Lt, this.arrow));
-    }), m(this, "onMouseMove", (r) => {
-      if (!this.isDragging || this.draggedHandle === U) return;
-      const { x: a, y: h } = Vt(r, this.ogma.getContainer()), c = this.handles[this.draggedHandle], d = this.ogma.view.getAngle(), { x: f, y: g } = nt(
-        rn(
-          { x: a - this.startX, y: h - this.startY },
-          this.ogma.view.getZoom()
-        ),
-        d
-      ), p = c.id === He, w = c.id === Ne, b = c.id === je;
-      (p || w) && Ke(this.arrow, this.start.x + f, this.start.y + g), (p || b) && Qe(this.arrow, this.end.x + f, this.end.y + g), this.emit(
-        Zt,
-        this.arrow,
-        p ? "line" : w ? "start" : "end"
-      ), this.refreshEditor(), this.layer.refresh();
-    }), this.minArrowHeight = i.minArrowHeight || 0, this.maxArrowHeight = i.maxArrowHeight || 1e6, this.handles = Array.prototype.slice.call(
-      this.editor.element.querySelectorAll(".arrow-handle>.handle")
-    ), this.handles.forEach(
-      (r) => r.addEventListener("mousedown", this.onHandleMouseDown)
-    ), document.addEventListener("mousemove", this.onMouseMove, !0), document.addEventListener("mouseup", this.onMouseUp);
-  }
-  /**
-   * Start drawing a new arrow, it will also be added as a new annotation
-   * @param x
-   * @param y
-   * @param arrow
-   */
-  startDrawing(t, i, r = Yr(t, i, t, i, Pt)) {
-    var a;
-    this.disableDragging(), this.add(r), this.hoveredId = r.id;
-    const h = this.ogma.view.graphToScreenCoordinates({ x: t, y: i }), c = ((a = this.ogma.getContainer()) == null ? void 0 : a.getBoundingClientRect()) || {
-      left: 0,
-      top: 0
-    };
-    this.startDragging(
-      this.getById(r.id),
-      h.x + (c == null ? void 0 : c.left),
-      h.y + c.top
-    ), this.draggedHandle = 2;
-  }
-  cancelDrawing() {
-    this.isDragging && (this.remove(this.arrow.id), this.emit(Lt, this.arrow), this.restoreDragging(), this.isDragging = !1, this.draggedHandle = U);
-  }
-  startDragging(t, i, r) {
-    this.selectedId !== t.id && this.select(this.hoveredId), this.arrow = t, this.startX = i, this.startY = r, this.start = zt(this.arrow), this.end = Xt(this.arrow), this.disableDragging(), this.emit(Yt, this.arrow), this.isDragging = !0;
-  }
-  detect(t, i = 0) {
-    return this.elements.find((r) => {
-      const { start: a, end: h } = Gt(r), c = xt(t, {
-        x: (a.x + h.x) / 2,
-        y: (a.y + h.y) / 2
-      }), d = xt(h, a), f = _t(d), g = rr(d), p = ir(r);
-      return Math.abs(Ie(g, c)) < f / 2 + i && Math.abs(Ie(nt(g, Math.PI / 2), c)) < p / 2 + i;
-    });
-  }
-  refreshEditor() {
-    if (+this.selectedId < 0 && +this.hoveredId < 0) return;
-    const t = this.selectedId !== U ? this.getById(this.selectedId) : this.getById(this.hoveredId), i = Gt(t), r = this.ogma.view.graphToScreenCoordinates(i.start), a = this.ogma.view.graphToScreenCoordinates(i.end), [h, c, d] = Array.prototype.slice.call(
-      this.editor.element.querySelectorAll(".handle")
-    );
-    c.style.transform = `translate(${r.x}px, ${r.y}px) translate(-50%, -50%)`, d.style.transform = `translate(${a.x}px, ${a.y}px) translate(-50%, -50%)`;
-    const f = {
-      x: (a.x + r.x) / 2,
-      y: (a.y + r.y) / 2
-    }, g = xt(a, r), p = nr(g, 1 / _t(g)), w = Math.atan2(p.y, p.x);
-    h.style.width = `${_t(g)}px`, h.style.left = `${f.x}px`, h.style.top = `${f.y}px`, h.style.transform = `translate(-50%, -50%) rotate(${w}rad)`;
-  }
-  getDefaultOptions() {
-    return $e;
-  }
-  draw(t) {
-    t.innerHTML = "";
-    const i = wt("g"), r = this.ogma.view.getAngle();
-    r !== 0 && i.setAttribute("transform", `rotate(${-r * (180 / Math.PI)})`), this.elements.forEach(
-      (a) => sn(a, i, Pt, this.minArrowHeight, this.maxArrowHeight)
-    ), t.appendChild(i);
-  }
-  refreshDrawing() {
-    const t = this.ogma.view.getAngle();
-    this.layer.element !== null && t !== 0 && this.layer.element.children[0].setAttribute(
-      "transform",
-      `rotate(${-t * (180 / Math.PI)})`
-    );
-  }
-  destroy() {
-    super.destroy(), document.removeEventListener("mousemove", this.onMouseMove, !0), document.removeEventListener("mouseup", this.onMouseUp);
-  }
-}
-const Dt = {
-  font: "sans-serif",
-  fontSize: 18,
-  color: "#505050",
-  background: "#f5f5f5",
-  strokeWidth: 0,
-  borderRadius: 8,
-  padding: 16,
-  strokeType: "plain"
-}, ue = {
-  id: 0,
-  type: "Feature",
-  properties: {
-    type: "text",
-    content: "",
-    style: { ...Dt }
-  },
-  geometry: {
-    type: "Polygon",
-    coordinates: [
-      [
-        [0, 0],
-        [100, 0],
-        [100, 50],
-        [0, 50],
-        [0, 0]
-      ]
-    ]
-  }
-  // position: { x: 0, y: 0 },
-  // size: { width: 100, height: 50 }
-}, Be = {
-  handleSize: 3.5,
-  placeholder: "Your text..."
-}, gn = (l = 0, t = 0, i = 100, r = 50, a = "", h = { ...Dt }) => ({
-  id: Jt(),
-  type: "Feature",
-  properties: {
-    type: "text",
-    content: a,
-    style: { ...Dt, ...h }
-  },
-  geometry: {
-    type: "Polygon",
-    coordinates: [
-      [
-        [l, t],
-        [l + i, t],
-        [l + i, t + r],
-        [l, t + r],
-        [l, t]
-      ]
-    ]
-  }
-});
-var ve = { exports: {} }, pn = ve.exports, qe;
-function yn() {
-  return qe || (qe = 1, function(l, t) {
-    (function(i, r) {
-      l.exports = r();
-    })(pn, () => (() => {
-      var i = { d: (e, n) => {
-        for (var o in n) i.o(n, o) && !i.o(e, o) && Object.defineProperty(e, o, { enumerable: !0, get: n[o] });
-      }, o: (e, n) => Object.prototype.hasOwnProperty.call(e, n) }, r = {};
-      function a(e) {
-        return a = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(n) {
-          return typeof n;
-        } : function(n) {
-          return n && typeof Symbol == "function" && n.constructor === Symbol && n !== Symbol.prototype ? "symbol" : typeof n;
-        }, a(e);
-      }
-      i.d(r, { default: () => qr });
-      var h = /^((?:[a-z\d-]+\s+)*)([\d.]+(%|em|px)|(?:x+-)?large|(?:x+-)?small|medium)(?:\s*\/\s*(normal|[\d.]+(%|px|em)?))?(\s.+)?$/, c = /\bsmall-caps\b/, d = /\b(?:italic|oblique)\b/, f = /\bbold(?:er)?\b/, g = 13.3333333, p = { "xx-small": 9, "x-small": 10, smaller: 13.3333, small: 13, medium: 16, large: 18, larger: 19.2, "x-large": 24, "xx-large": 32 };
-      function w(e) {
-        var n = "", o = this;
-        return o.style && o.style !== "normal" && (n += o.style), o.variant && o.variant !== "normal" && (n += (n ? " " : "") + o.variant), o.weight && o.weight !== "normal" && (n += (n ? " " : "") + o.weight), o.size && (n += (n ? " " : "") + o.size + "px", o.height !== o.size && (n += "/" + o.height + "px")), o.family && (n += (n ? " " : "") + o.family), e && (n += "::" + o.baseline), e && (n += "::" + o.color), n;
-      }
-      var b = { id: "", family: "sans-serif", height: 14, size: 12, variant: "", style: "", weight: "", baseline: "", color: null, toString: w, valueOf: w };
-      function A(e) {
-        var n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, o = h.exec(e);
-        n.family = (o[6] || "").trim();
-        var s = p[o[2]] || parseFloat(o[2]);
-        o[3] === "%" ? s *= 0.16 : o[3] === "em" ? s *= 16 : o[3] === "pt" && (s *= g), n.size = s;
-        var u = parseFloat(o[4]);
-        if (u !== "normal" && u !== "inherit" && u ? o[5] && o[5] !== "em" ? o[5] === "pt" ? n.height = u * g : o[5] === "%" ? n.height = 0.01 * s : n.height = u : n.height = u * s : n.height = Math.round(s * (7 / 6)), c.test(o[1]) && (n.variant = "small-caps"), d.test(o[1]) && (n.style = "italic"), f.test(o[1])) n.weight = "bold";
-        else {
-          var y = parseInt(/\b(\d+)\b/.exec(o[1]), 10);
-          y >= 100 && y !== 400 && (n.weight = y);
-        }
-        return n;
-      }
-      function E() {
-        var e, n, o, s = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "12px/14px sans-serif", u = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, y = 14, x = 12, v = null, S = null, _ = "";
-        if (s && s.nodeType) {
-          var $ = s && (s.ownerDocument && s.ownerDocument.defaultView || s.document && s || s.defaultView), I = $.getComputedStyle(s, null);
-          e = I.getPropertyValue("font-family") || "", x = parseFloat(I.getPropertyValue("font-size")), y = I.getPropertyValue("line-height"), v = I.getPropertyValue("font-weight"), S = I.getPropertyValue("font-style"), _ = I.getPropertyValue("font-variant") || "";
-        } else if (typeof s == "string") {
-          var D = A(s);
-          e = D.family, x = D.size, y = D.height, _ = D.variant, S = D.style, v = D.weight;
-        } else a(s) === "object" && (e = s.family, x = s.size, y = s.height, _ = s.variant, v = s.weight, S = s.style, n = s.baseline, o = s.color);
-        u.size && u.size < 3 && (x *= u.size), y = y !== "normal" && y ? parseFloat(y) : x * (7 / 6), u.height && u.height < 3 && (y *= u.height);
-        var O = Object.create(b);
-        return O.family = u.family || e || "sans-serif", O.height = y ?? 14, O.size = x ?? 12, O.variant = u.variant || _ || "", O.style = u.style || S || "", O.weight = u.weight || v || "", O.baseline = n || 0, u.baseline != null && (O.baseline = u.baseline), O.color = u.color || o || "", O.id = w.call(O, !0), O;
-      }
-      const k = { "\n": 0.28, "\r": 0.28, " ": 0.28, " ": 0.28, " ": 0.28, "᠎": 0, " ": 0.5, " ": 1, " ": 0.5, " ": 1, " ": 0.33, " ": 0.25, " ": 0.16, " ": 0.56, " ": 0.28, " ": 0.2, " ": 0.15, "​": 0, " ": 0.16, " ": 0.22, "　": 1, "\uFEFF": 0 };
-      var L, M = function(e) {
-        var n = typeof OffscreenCanvas < "u" && new OffscreenCanvas(100, 100) || e && e.createElement("canvas");
-        if (n && n.getContext) {
-          var o = n.getContext("2d");
-          if (o && typeof o.measureText == "function") return function(s, u) {
-            return o.font = String(u), o.measureText(s).width;
-          };
-        }
-      }(typeof document < "u" ? document : null) || (L = {}, function(e, n) {
-        if (!L[n]) {
-          var o = E(n);
-          L[n] = o, /\bmonospace\b/.test(o.family) ? o.size *= 0.6 : (o.size *= 0.45, o.weight && (o.size *= 1.18));
-        }
-        return e.length * L[n].size;
-      }), C = {}, N = { trim: !0, collapse: !0 };
-      function P(e, n, o) {
-        var s = Object.assign({}, N, o), u = String(e);
-        if (!u) return 0;
-        if (u in k) {
-          var y = n.id + "/" + u;
-          return y in C || (C[y] = M("_".concat(u, "_"), n) - M("__", n)), C[y];
-        }
-        return s.trim && s.collapse ? s.trim ? u = u.trim() : s.collapse && (u = u.replace(/\s+/g, " ")) : u = u.replace(/\n/g, " "), M(u, n) + n.size * (e.tracking || 0);
-      }
-      function tt(e) {
-        return tt = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(n) {
-          return typeof n;
-        } : function(n) {
-          return n && typeof Symbol == "function" && n.constructor === Symbol && n !== Symbol.prototype ? "symbol" : typeof n;
-        }, tt(e);
-      }
-      function it(e, n) {
-        if (typeof n != "function" && n !== null) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(n && n.prototype, { constructor: { value: e, writable: !0, configurable: !0 } }), Object.defineProperty(e, "prototype", { writable: !1 }), n && Kt(e, n);
-      }
-      function Kt(e, n) {
-        return Kt = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, s) {
-          return o.__proto__ = s, o;
-        }, Kt(e, n);
-      }
-      function Qt(e) {
-        var n = function() {
-          if (typeof Reflect > "u" || !Reflect.construct || Reflect.construct.sham) return !1;
-          if (typeof Proxy == "function") return !0;
-          try {
-            return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
-            })), !0;
-          } catch {
-            return !1;
-          }
-        }();
-        return function() {
-          var o, s = Ft(e);
-          if (n) {
-            var u = Ft(this).constructor;
-            o = Reflect.construct(s, arguments, u);
-          } else o = s.apply(this, arguments);
-          return ur(this, o);
-        };
-      }
-      function ur(e, n) {
-        if (n && (tt(n) === "object" || typeof n == "function")) return n;
-        if (n !== void 0) throw new TypeError("Derived constructors may only return object or undefined");
-        return function(o) {
-          if (o === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-          return o;
-        }(e);
-      }
-      function Ft(e) {
-        return Ft = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(n) {
-          return n.__proto__ || Object.getPrototypeOf(n);
-        }, Ft(e);
-      }
-      function Ht(e, n) {
-        if (!(e instanceof n)) throw new TypeError("Cannot call a class as a function");
-      }
-      function cr(e, n) {
-        for (var o = 0; o < n.length; o++) {
-          var s = n[o];
-          s.enumerable = s.enumerable || !1, s.configurable = !0, "value" in s && (s.writable = !0), Object.defineProperty(e, (u = function(y, x) {
-            if (tt(y) !== "object" || y === null) return y;
-            var v = y[Symbol.toPrimitive];
-            if (v !== void 0) {
-              var S = v.call(y, x);
-              if (tt(S) !== "object") return S;
-              throw new TypeError("@@toPrimitive must return a primitive value.");
-            }
-            return String(y);
-          }(s.key, "string"), tt(u) === "symbol" ? u : String(u)), s);
-        }
-        var u;
-      }
-      function Nt(e, n, o) {
-        return n && cr(e.prototype, n), Object.defineProperty(e, "prototype", { writable: !1 }), e;
-      }
-      var j = function() {
-        function e() {
-          var n = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
-          Ht(this, e), this.value = n, this.weight = null, this.style = null, this.font = null, this.href = null, this.sub = !1, this.sup = !1;
-        }
-        return Nt(e, [{ key: "clone", value: function() {
-          var n = new e(this.value);
-          return n.value = this.value, n.weight = this.weight, n.style = this.style, n.font = this.font, n.href = this.href, n.sub = this.sub, n.sup = this.sup, n;
-        } }, { key: "valueOf", value: function() {
-          return this.value;
-        } }, { key: "toString", value: function() {
-          return this.value;
-        } }]), e;
-      }(), Tt = function(e) {
-        it(o, e);
-        var n = Qt(o);
-        function o() {
-          return Ht(this, o), n.apply(this, arguments);
-        }
-        return Nt(o);
-      }(j), et = function(e) {
-        it(o, e);
-        var n = Qt(o);
-        function o() {
-          return Ht(this, o), n.apply(this, arguments);
-        }
-        return Nt(o);
-      }(j), yt = function(e) {
-        it(o, e);
-        var n = Qt(o);
-        function o() {
-          return Ht(this, o), n.apply(this, arguments);
-        }
-        return Nt(o);
-      }(j), te = /^[\n\r\t\x20\xA0\u2000-\u200B\u205F\u3000]/, dr = /^[^\n\r\t\u0020\u2000-\u200B\u205F\u3000]{2,}/, we = /^[\xA0\u2011\u202F\u2060\uFEFF]/, fr = /^(?:[;\xAD%?…]|,(?!\d))/, gr = /^[´±°¢£¤$¥\u2212]/;
-      function jt(e, n) {
-        n !== !1 && (e = e.trim());
-        for (var o, s, u = [], y = e.charAt(0), x = 0, v = 1, S = e.length; v < S; v++) {
-          o = e.charAt(v), s = e.charAt(v + 1);
-          var _ = te.test(y), $ = te.test(o), I = $ || _, D = void 0;
-          if ((gr.test(o) && !we.test(y) || fr.test(y + s) && !we.test(o)) && (I = !0), y !== "-" && y !== "‐" && y !== "–" && y !== "—" || ((D = te.test(e.charAt(v - 2))) && !$ && (I = !1), !D && dr.test(o + s) && (I = !0)), I) {
-            var O = e.slice(x, v);
-            /\u00AD$/.test(O) ? (u.push(new j(O.slice(0, -1))), u.push(new yt())) : (u.push(new j(O)), u.push(new Tt())), x = v;
-          }
-          y = o;
-        }
-        return u.push(new j(e.slice(x))), u;
-      }
-      const xe = { nbsp: " ", iexcl: "¡", cent: "¢", pound: "£", curren: "¤", yen: "¥", brvbar: "¦", sect: "§", uml: "¨", copy: "©", ordf: "ª", laquo: "«", not: "¬", shy: "­", reg: "®", macr: "¯", deg: "°", plusmn: "±", sup2: "²", sup3: "³", acute: "´", micro: "µ", para: "¶", middot: "·", cedil: "¸", sup1: "¹", ordm: "º", raquo: "»", frac14: "¼", frac12: "½", frac34: "¾", iquest: "¿", Agrave: "À", Aacute: "Á", Acirc: "Â", Atilde: "Ã", Auml: "Ä", Aring: "Å", AElig: "Æ", Ccedil: "Ç", Egrave: "È", Eacute: "É", Ecirc: "Ê", Euml: "Ë", Igrave: "Ì", Iacute: "Í", Icirc: "Î", Iuml: "Ï", ETH: "Ð", Ntilde: "Ñ", Ograve: "Ò", Oacute: "Ó", Ocirc: "Ô", Otilde: "Õ", Ouml: "Ö", times: "×", Oslash: "Ø", Ugrave: "Ù", Uacute: "Ú", Ucirc: "Û", Uuml: "Ü", Yacute: "Ý", THORN: "Þ", szlig: "ß", agrave: "à", aacute: "á", acirc: "â", atilde: "ã", auml: "ä", aring: "å", aelig: "æ", ccedil: "ç", egrave: "è", eacute: "é", ecirc: "ê", euml: "ë", igrave: "ì", iacute: "í", icirc: "î", iuml: "ï", eth: "ð", ntilde: "ñ", ograve: "ò", oacute: "ó", ocirc: "ô", otilde: "õ", ouml: "ö", divide: "÷", oslash: "ø", ugrave: "ù", uacute: "ú", ucirc: "û", uuml: "ü", yacute: "ý", thorn: "þ", yuml: "ÿ", fnof: "ƒ", Alpha: "Α", Beta: "Β", Gamma: "Γ", Delta: "Δ", Epsilon: "Ε", Zeta: "Ζ", Eta: "Η", Theta: "Θ", Iota: "Ι", Kappa: "Κ", Lambda: "Λ", Mu: "Μ", Nu: "Ν", Xi: "Ξ", Omicron: "Ο", Pi: "Π", Rho: "Ρ", Sigma: "Σ", Tau: "Τ", Upsilon: "Υ", Phi: "Φ", Chi: "Χ", Psi: "Ψ", Omega: "Ω", alpha: "α", beta: "β", gamma: "γ", delta: "δ", epsilon: "ε", zeta: "ζ", eta: "η", theta: "θ", iota: "ι", kappa: "κ", lambda: "λ", mu: "μ", nu: "ν", xi: "ξ", omicron: "ο", pi: "π", rho: "ρ", sigmaf: "ς", sigma: "σ", tau: "τ", upsilon: "υ", phi: "φ", chi: "χ", psi: "ψ", omega: "ω", thetasym: "ϑ", upsih: "ϒ", piv: "ϖ", bull: "•", hellip: "…", prime: "′", Prime: "″", oline: "‾", frasl: "⁄", weierp: "℘", image: "ℑ", real: "ℜ", trade: "™", alefsym: "ℵ", larr: "←", uarr: "↑", rarr: "→", darr: "↓", harr: "↔", crarr: "↵", lArr: "⇐", uArr: "⇑", rArr: "⇒", dArr: "⇓", hArr: "⇔", forall: "∀", part: "∂", exist: "∃", empty: "∅", nabla: "∇", isin: "∈", notin: "∉", ni: "∋", prod: "∏", sum: "∑", minus: "−", lowast: "∗", radic: "√", prop: "∝", infin: "∞", ang: "∠", and: "⊥", or: "⊦", cap: "∩", cup: "∪", int: "∫", there4: "∴", sim: "∼", cong: "≅", asymp: "≈", ne: "≠", equiv: "≡", le: "≤", ge: "≥", sub: "⊂", sup: "⊃", nsub: "⊄", sube: "⊆", supe: "⊇", oplus: "⊕", otimes: "⊗", perp: "⊥", sdot: "⋅", lceil: "⌈", rceil: "⌉", lfloor: "⌊", rfloor: "⌋", lang: "〈", rang: "〉", loz: "◊", spades: "♠", clubs: "♣", hearts: "♥", diams: "♦", quot: '"', amp: "&", lt: "<", gt: ">", OElig: "Œ", oelig: "œ", Scaron: "Š", scaron: "š", Yuml: "Ÿ", circ: "ˆ", tilde: "˜", ensp: " ", emsp: " ", thinsp: " ", zwnj: "‌", zwj: "‍", lrm: "‎", rlm: "‏", ndash: "–", mdash: "—", lsquo: "‘", rsquo: "’", sbquo: "‚", ldquo: "“", rdquo: "”", bdquo: "„", dagger: "†", Dagger: "‡", permil: "‰", lsaquo: "‹", rsaquo: "›" };
-      var pr = /^[\n\r\x20\u2000-\u200B\u205F\u3000]/, yr = /^<\/([a-zA-Z0-9]+)([^>]*)>/, mr = /^<([a-zA-Z0-9]+)((?:\s[^=\s/]+(?:\s*=\s*(?:"[^"]+"|'[^']+'|[^>\\s]+))?)+)?\s*(\/?)>(\n*)/, vr = /^<!--(.+?)-->/, wr = /&(?:#(\d\d{2,})|#x([\da-fA-F]{2,})|([a-zA-Z][a-zA-Z1-4]{1,8}));/g, be = { b: function(e) {
-        e.weight = "bold";
-      }, strong: function(e) {
-        e.weight = "bold";
-      }, i: function(e) {
-        e.style = "italic";
-      }, em: function(e) {
-        e.style = "italic";
-      }, dfn: function(e) {
-        e.style = "italic";
-      }, cite: function(e) {
-        e.style = "italic";
-      }, code: function(e) {
-        e.family = "monospace";
-      }, kbd: function(e) {
-        e.family = "monospace";
-      }, samp: function(e) {
-        e.family = "monospace";
-      }, var: function(e) {
-        e.family = "monospace";
-      }, tt: function(e) {
-        e.family = "monospace";
-      }, sub: function(e) {
-        e.sub = !0;
-      }, sup: function(e) {
-        e.sup = !0;
-      } }, xr = { div: 1, li: 1, blockquote: 2, h1: 2, h2: 2, h3: 2, h4: 2, h5: 2, h6: 2, ul: 2, ol: 2, hr: 2, p: 2 };
-      function Ae(e) {
-        return e.replace(wr, function(n, o, s, u) {
-          if (o || s) {
-            var y = o ? 10 : 16;
-            return String.fromCharCode(parseInt(o || s, y));
-          }
-          return u in xe ? xe[u] : n;
-        });
-      }
-      function br(e) {
-        return e && e.length > 1 && (e[0] === '"' && e[e.length - 1] === '"' || e[0] === "'" && e[e.length - 1] === "'") ? e.slice(1, -1) : e;
-      }
-      var Ar = /^\s*([^=\s&]+)(?:\s*=\s*("[^"]+"|'[^']+'|[^>\s]+))?/;
-      function kr(e) {
-        var n, o = {};
-        if (e) {
-          do
-            if (n = Ar.exec(e)) {
-              var s = Ae(br(n[2] || "")).replace(/[ \r\n\t]+/g, " ").trim();
-              if (o[n[1]] = s, (e = e.slice(n[0].length)).length && /^\S/.test(e[0])) throw new Error("Attribute error");
-            }
-          while (n && e.length);
-          if (/\S/.test(e)) throw new Error("Attribute error");
-        }
-        return o;
-      }
-      const ke = { copyright: "©", textcopyright: "©", dag: "†", textdagger: "†", ddag: "‡", textdaggerdbl: "‡", guillemotleft: "«", guillemotright: "»", guilsinglleft: "‹", guilsinglright: "›", ldots: "…", dots: "…", textellipsis: "…", lq: "‘", P: "¶", textparagraph: "¶", pounds: "£", textsterling: "£", quotedblbase: "„", quotesinglbase: "‚", rq: "’", S: "§", sim: "~", textasciicircum: "^", textasciitilde: "˜", texttildelow: "~", textasteriskcentered: "*", textbackslash: "'", textbar: "|", textbardbl: "╎", textbigcircle: "◯", textbraceleft: "{", textbraceright: "}", textbullet: "•", textdollar: "$", textemdash: "—", textendash: "—", texteuro: "€", eurosym: "€", euro: "€", textexclamdown: "¡", textgreater: ">", textless: "<", textordfeminine: "ª", textordmasculine: "º", textperiodcentered: "·", cdot: "·", textquestiondown: "¿", textquotedblleft: "“", textquotedblright: "”", textquoteleft: "‘", textquoteright: "’", textquotestraightbase: "‚", textquotestraightdblbase: "„", textregistered: "®", textthreequartersemdash: "-", texttrademark: "™", texttwelveudash: "-", textunderscore: "_", textvisiblespace: "␣", gets: "←", textleftarrow: "←", to: "→", textrightarrow: "→", textdegree: "°", infty: "∞", triangle: "△", triangledown: "▽", blacktriangle: "▲", blacktriangledown: "▼", angle: "∠", sphericalangle: "∢", aleph: "ℵ", hbar: "ħ", imath: "𝚤", jmath: "𝚥", ell: "ℓ", wp: "℘", Re: "ℜ", Im: "ℑ", mho: "℧", prime: "′", emptyset: "∅", nabla: "∇", surd: "√", partial: "∂", top: "⟙", bot: "⟂", vdash: "⟝", dashv: "⟞", forall: "∀", exists: "∃", nexists: "∄", neg: "¬", lnot: "¬", flat: "♭", natural: "♮", sharp: "♯", backslash: "\\", Box: "□", Diamond: "♢", clubsuit: "♣", diamondsuit: "♦", heartsuit: "♥", spadesuit: "♠", Join: "⨝", blacksquare: "■", bigstar: "★", diagdown: "╲", diagup: "╱", blacklozenge: "⧫", rfloor: "⌋", lfloor: "⌊", rceil: "⌉", lceil: "⌈", rangle: "⟩", langle: "⟨", sum: "∑", int: "∫", oint: "∮", prod: "∏", coprod: "∏", bigcap: "∩", bigcup: "∪", bigsqcup: "⊔", bigvee: "∨", bigwedge: "∧", bigodot: "⊙", bigotimes: "⊗", bigoplus: "⊕", biguplus: "⊎", alpha: "α", beta: "β", chi: "χ", delta: "δ", epsilon: "ε", eta: "η", gamma: "γ", iota: "ι", kappa: "κ", lambda: "λ", mu: "μ", nu: "ν", omega: "ω", phi: "φ", pi: "π", psi: "ψ", rho: "ρ", sigma: "σ", tau: "τ", theta: "θ", upsilon: "υ", xi: "ξ", zeta: "ζ", Alpha: "Α", Beta: "Β", Chi: "Χ", Delta: "Δ", Epsilon: "Ε", Eta: "Η", Gamma: "Γ", Iota: "Ι", Kappa: "Κ", Lambda: "Λ", Mu: "Μ", Nu: "Ν", Omega: "Ω", Phi: "Φ", Pi: "Π", Psi: "Ψ", Rho: "Ρ", Sigma: "Σ", Tau: "Τ", Theta: "Θ", Upsilon: "Υ", Xi: "Ξ", Zeta: "Ζ", aa: "å", AA: "Å", ae: "æ", AE: "Æ", dh: "ð", DH: "Ð", dj: "đ", DJ: "Đ", ij: "ij", IJ: "IJ", l: "ł", L: "Ł", ng: "ŋ", NG: "Ŋ", o: "ø", O: "Ø", oe: "œ", OE: "Œ", ss: "ß", SS: "SS", th: "þ", TH: "Þ" };
-      var Er = /^(\^|_|\\[^#$%&~_^\\{}()\s]+)(\{)?/, Sr = /^%[^\n]+(?:\n|$)/, Cr = /^[^#$%&~_^\\{}]+/, _r = /^\\([&{}$%#_])/, Dr = /(?:\\[\\@,!:;-]|-{2,3}|[!?]`|``?|,,|''?|~|<<|>>)/g, Lr = { "---": "—", "--": "–", "!`": "¡", "?`": "¿", "``": "“", ",,": "„", "''": "”", "`": "‘", "'": "’", "<<": "«", ">>": "»", "~": " ", "\\-": "­", "\\,": " ", "\\;": " ", "\\:": " ", "\\!": " ", "\\@": "\uFEFF", "\\\\": "\\newline{}" }, X = { bf: function(e) {
-        e.weight = "bold";
-      }, it: function(e) {
-        e.style = "italic";
-      }, sl: function(e) {
-        e.style = "italic";
-      }, color: function(e, n) {
-        e.color = n;
-      }, href: function(e, n) {
-        e.href = n;
-      }, "^": function(e) {
-        e.sup = !0;
-      }, _: function(e) {
-        e.sub = !0;
-      }, par: function(e) {
-        this.tokens.push(new et(), new et());
-      }, newline: function(e) {
-        this.tokens.push(new et());
-      }, url: function(e, n) {
-        this.open_context().href = n, this.add_token(new j(n)), this.close_context();
-      } };
-      X.textsuperscript = X["^"], X.textsubscript = X._, X.textsl = X.sl, X.mathbf = X.bf, X.mathit = X.it, X.textbf = X.bf, X.textit = X.it, X.textcolor = X.color;
-      var Tr = /[\r\n\xA0]+/g;
-      function $r(e, n) {
-        e.sup && (e.baseline = 0.45, e.size = 0.7), e.sub && (e.baseline = -0.3, e.size = 0.7);
-        var o = n;
-        return (e.style || e.weight || e.baseline || e.color || e.size || e.family) && (o = E(n, e)), o;
-      }
-      function Ee(e, n, o) {
-        for (var s, u, y = e.width; y + o.width > n && e.length; ) u = (s = e[e.length - 1]).width, s.width > o.width ? (s.value = s.value.slice(0, -1), s.width = P(s, s.font), y += s.width) : e.pop(), y -= u;
-        e[e.length - 1] instanceof yt && e.pop(), s = e[e.length - 1] || s || {}, o.font = E(o.font, s.bold, s.italic, ""), o.href = e.length ? s.href : null, o.rel = e.length ? s.rel : null, o.target = e.length ? s.target : null, e.push(o);
-      }
-      function bt(e) {
-        return Math.round(1e6 * e) / 1e6;
-      }
-      function Se(e) {
-        return function(n) {
-          if (Array.isArray(n)) return ee(n);
-        }(e) || function(n) {
-          if (typeof Symbol < "u" && n[Symbol.iterator] != null || n["@@iterator"] != null) return Array.from(n);
-        }(e) || function(n, o) {
-          if (n) {
-            if (typeof n == "string") return ee(n, o);
-            var s = Object.prototype.toString.call(n).slice(8, -1);
-            return s === "Object" && n.constructor && (s = n.constructor.name), s === "Map" || s === "Set" ? Array.from(n) : s === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(s) ? ee(n, o) : void 0;
-          }
-        }(e) || function() {
-          throw new TypeError(`Invalid attempt to spread non-iterable instance.
-In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`);
-        }();
-      }
-      function ee(e, n) {
-        (n == null || n > e.length) && (n = e.length);
-        for (var o = 0, s = new Array(n); o < n; o++) s[o] = e[o];
-        return s;
-      }
-      var Ir = { center: "middle", right: "end" }, Mr = { middle: 0.5, center: 0.5, bottom: 1, end: 1 }, re = function(e, n) {
-        return !e && !n || e === n;
-      };
-      function Or(e, n) {
-        var o = [], s = n.font(), u = s.size, y = s.family, x = n.align(), v = n.createElement();
-        if (e.length) {
-          var S = s.height, _ = n.valign(), $ = n.height()(), I = n.width()(0), D = !isFinite(I) && e.length === 1, O = D ? null : n.x(), B = bt(S / u), J = D ? null : bt(S / (1.15 * u + (S - u) / 2));
-          if (Mr[_] && isFinite($)) {
-            var F = _ === "bottom" ? 1 : 0.5;
-            J += ($ * F - S * e.length * F) / u;
-          }
-          var z = x === "justify", q = 0;
-          x === "right" ? q = I : x === "center" && (q = I / 2);
-          for (var H = [], K = "tspan", G = null, R = "", T = function() {
-            if (R) {
-              var mt = v(K, G, R);
-              H.push(mt);
-            }
-            K = "tspan", G = null, R = "";
-          }, rt = 0, Q = e.length; rt < Q; rt++) {
-            var lt = "", gt = "", at = 0, ht = e[rt];
-            if (ht.length) {
-              H = [];
-              for (var At = 0, Mt = 0, ut = void 0, V = 0, Bt = ht.length; V < Bt; V++) {
-                var W = ht[V], Z = W.font;
-                W.whitespace && At++, Mt += W.width, V && !W.tracking && !at && re(Z.id, lt) && re(W.class, gt) && re(ut, W.href) ? R += W.value : (T(), R = W.value, G = { fontFamily: Z.family !== y ? Z.family : null, fontSize: Z.size !== u ? Z.size : null, fontWeight: Z.weight || null, fontStyle: Z.style || null, fontVariant: Z.variant !== "normal" && Z.variant || null, fill: Z.color || null, baselineShift: Z.baseline ? 100 * Z.baseline + "%" : null, className: W.class || null }, at && (G.dx = bt(at), at = 0), W.tracking && (at = Z.size * W.tracking), W.href && !ut ? (ut = W.href, K = "a", G.href = ut, G.rel = W.rel, G.target = W.target) : ut = null, lt = Z.id, gt = W.class);
-              }
-              if (T(), D) o.push.apply(o, Se(H));
-              else {
-                var qt = null, Ot = rt === Q - 1 || ht[ht.length - 1] instanceof et;
-                z && ht.length > 1 && !Ot && (qt = bt((I - Mt) / At)), o.push(v.apply(void 0, ["tspan", { wordSpacing: qt, x: O(rt) + q, dy: bt(rt ? B : J) + "em" }].concat(Se(H))));
-              }
-            } else o.push(v("tspan", { x: O(rt), dy: bt(rt ? B : J) + "em" }, " "));
-          }
-        }
-        return v.apply(void 0, ["text", { fontFamily: y, fontSize: u, textAnchor: Ir[x] || "start" }].concat(o));
-      }
-      var zr = { middle: 0.5, center: 0.5, bottom: 1, end: 1 };
-      function Pr(e, n, o) {
-        if (e.length) {
-          o.textBaseline = "middle";
-          var s = n.font(), u = s.height, y = s.size, x = n.valign(), v = n.height()(), S = n.width()(0), _ = n.align(), $ = _ === "justify", I = 0.5 * u, D = zr[x];
-          if (D && isFinite(v)) {
-            var O = e.length * u;
-            I += v * D - O * D;
-          }
-          e.forEach(function(B, J) {
-            var F = n.x()(J), z = J * u + I, q = 0, H = 0;
-            B.forEach(function(R) {
-              R.whitespace && q++, H += R.width;
-            });
-            var K = 0, G = J === e.length - 1 || B[B.length - 1] instanceof et;
-            $ && B.length > 1 && !G && (K = (S - H) / q), B.forEach(function(R) {
-              o.font = R.font;
-              var T = R.font, rt = T.baseline ? y * -T.baseline + 0.15 * y : 0;
-              o.fillStyle = function(gt, at) {
-                return gt.color ? gt.color : at.href ? "#00C" : "#000";
-              }(T, R);
-              var Q = 0;
-              if (_ === "right" ? Q += S - H : _ === "center" ? Q += S / 2 - H / 2 : _ === "justify" && (R.whitespace || R instanceof et) && (F += K), o.fillText(R.value, F + Q, z + rt), R.href) {
-                o.beginPath(), o.strokeStyle = o.fillStyle;
-                var lt = Math.floor(z + 0.45 * y) + 0.5;
-                o.moveTo(F + Q, lt), o.lineTo(F + Q + R.width, lt), o.stroke();
-              }
-              F += R.width;
-            });
-          });
-        }
-      }
-      function ne(e) {
-        return ne = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(n) {
-          return typeof n;
-        } : function(n) {
-          return n && typeof Symbol == "function" && n.constructor === Symbol && n !== Symbol.prototype ? "symbol" : typeof n;
-        }, ne(e);
-      }
-      function Ce(e) {
-        for (var n = {}, o = 0; o < e.length; o++) {
-          var s = e[o];
-          typeof s != "number" && s != null && (typeof s == "string" ? n.text = s : typeof s == "function" ? n.fn = s : ne(s) === "object" && s._groups ? n.d3 = s : s && s.nodeType && s.getContext ? n.ctx = s.getContext("2d") : s && s.fillText && s.beginPath ? n.ctx = s : s && (n.text = s));
-        }
-        return n;
-      }
-      function $t(e) {
-        return $t = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(n) {
-          return typeof n;
-        } : function(n) {
-          return n && typeof Symbol == "function" && n.constructor === Symbol && n !== Symbol.prototype ? "symbol" : typeof n;
-        }, $t(e);
-      }
-      function Fr(e, n) {
-        for (var o = 0; o < n.length; o++) {
-          var s = n[o];
-          s.enumerable = s.enumerable || !1, s.configurable = !0, "value" in s && (s.writable = !0), Object.defineProperty(e, (u = function(y, x) {
-            if ($t(y) !== "object" || y === null) return y;
-            var v = y[Symbol.toPrimitive];
-            if (v !== void 0) {
-              var S = v.call(y, x);
-              if ($t(S) !== "object") return S;
-              throw new TypeError("@@toPrimitive must return a primitive value.");
-            }
-            return String(y);
-          }(s.key, "string"), $t(u) === "symbol" ? u : String(u)), s);
-        }
-        var u;
-      }
-      var Hr = E(), ie = function(e) {
-        return typeof e == "function" ? e : function() {
-          return e;
-        };
-      }, st = function() {
-        function e(s) {
-          if (function(y, x) {
-            if (!(y instanceof x)) throw new TypeError("Cannot call a class as a function");
-          }(this, e), this.props = { overflow: "ellipsis", lineclamp: null, align: "left", wordBreak: null, valign: "top", width: function() {
-            return 1 / 0;
-          }, height: function() {
-            return 1 / 0;
-          }, x: function() {
-            return 0;
-          }, font: null, tAnchor: 0, parser: e.defaultparser }, s) for (var u in s) typeof this[u] == "function" && this[u](s[u]);
-        }
-        var n, o;
-        return n = e, o = [{ key: "linebreak", value: function(s) {
-          var u = this, y = this.props.parser(String(s)), x = this.font(), v = function(S, _, $) {
-            if (!S.length) return [];
-            var I = _.height(), D = _.width(), O = _.overflowLine(), B = _.overflowWrap(), J = E($, !0, !1), F = isFinite(I()) ? Math.floor(I() / $.height) : 1 / 0;
-            if (!I() && !D(0) || !F) return [];
-            for (var z = 0, q = 0, H = 0, K = [], G = [], R = !1; z < S.length && q < F; ) {
-              var T = S[z], rt = $r(T, $);
-              if (T.width = P(T, rt), T.font = rt, T.line = q, T.whitespace = T.value in k, T.value && (T.value = T.value.replace(Tr, " ")), !(!H && T.whitespace || R && T.whitespace)) if (T instanceof et) H = 0, G = [], K.push(z + 1), q++;
-              else if (T instanceof Tt || T instanceof yt) G.push({ index: z, width: H });
-              else if (T.whitespace || H + T.width < D(q)) H += T.width;
-              else if (G.length) {
-                var Q = void 0, lt = void 0;
-                do {
-                  lt = !0, Q = G.pop();
-                  var gt = S[Q.index], at = void 0;
-                  gt instanceof yt && (at = P("-", gt.font), Q.width + at > D(q) && (lt = !G.length));
-                } while (!lt);
-                K.push(Q.index + 1), H = 0, q++, z = Q.index, G = [];
-              } else if (B === "break-word") {
-                var ht = D(q);
-                if (H + T.width > ht) {
-                  var At = T.clone();
-                  do
-                    T.value = T.value.slice(0, -1), T.width = P(T, T.font), H += T.width;
-                  while (T.value && T.width > ht);
-                  At.value = At.value.slice(T.value.length), S.splice(z + 1, 0, new Tt(), At);
-                }
-                K.push(z + 1), H = 0, q++;
-              } else H += T.width;
-              z++, R = T.whitespace;
-            }
-            z !== K[K.length - 1] && K.push(z);
-            var Mt = 0, ut = 0, V = K.map(function(mt) {
-              for (var Y, vt = Mt; (Y = S[vt]) && (Y.whitespace || !Y.value); ) vt++;
-              for (var pt = mt, ae = null; pt > vt && (Y = S[pt - 1]) && (Y.whitespace || !(Y.value || Y instanceof yt)); ) Y instanceof et && (ae = Y), pt--;
-              Y instanceof yt && (Y.value = "-", Y.width = P("-", Y.font)), Mt = mt;
-              var kt = S.slice(vt, pt).filter(function(le) {
-                return le.value;
-              });
-              return ae && kt.push(ae), kt.width = kt.reduce(function(le, Rr) {
-                return le + Rr.width;
-              }, 0), kt.width > ut && (ut = kt.width), kt;
-            });
-            if (V.hasLineOverflow = !1, O) {
-              var Bt = O === "ellipsis" ? "…" : O;
-              V.forEach(function(mt, Y) {
-                var vt = D(Y);
-                if (mt.width > vt) {
-                  var pt = new j(Bt);
-                  pt.font = $, pt.width = P(Bt, J), Ee(mt, vt, pt), V.hasLineOverflow = !0;
-                }
-              });
-            }
-            var W = _.overflow() === "ellipsis" ? "…" : _.overflow();
-            if (W && z !== S.length) {
-              var Z = D(V.length - 1), qt = V[V.length - 1], Ot = new j(W);
-              Ot.font = $, Ot.width = P(W, J), Ee(qt, Z, Ot), V.hasOverflow = !0;
-            } else V.hasOverflow = !1;
-            return V.font = $, V.width = ut, V;
-          }(y, this, x);
-          return v.height = v.length * x.height, v.render = function(S) {
-            return u.render(v, S);
-          }, v.svg = v.render, v.draw = v.render, v;
-        } }, { key: "font", value: function(s) {
-          return arguments.length ? (this.props.font = E(s), this) : this.props.font || E(Hr);
-        } }, { key: "overflow", value: function(s) {
-          return arguments.length ? (this.props.overflow = String(s), this) : this.props.overflow;
-        } }, { key: "overflowLine", value: function(s) {
-          return arguments.length ? (this.props.lineclamp = String(s), this) : this.props.lineclamp;
-        } }, { key: "valign", value: function(s) {
-          return arguments.length ? (this.props.valign = s, this) : this.props.valign;
-        } }, { key: "align", value: function(s) {
-          if (!arguments.length) return this.props.align;
-          var u = String(s).toLowerCase();
-          return u === "left" || u === "start" ? (this.props.align = "left", this.props.tAnchor = 0) : u === "center" || u === "middle" ? (this.props.align = "center", this.props.tAnchor = -0.5) : u === "end" || u === "right" ? (this.props.align = "right", this.props.tAnchor = -1) : u === "justify" && (this.props.align = s, this.props.tAnchor = 0), this;
-        } }, { key: "overflowWrap", value: function(s) {
-          if (!arguments.length) return this.props.overflowWrap || "normal";
-          var u = String(s).toLowerCase();
-          return u === "break-word" ? this.props.overflowWrap = "break-word" : u !== "normal" && s != null || (this.props.overflowWrap = null), this;
-        } }, { key: "width", value: function(s) {
-          return arguments.length ? (this.props.width = ie(s), this) : this.props.width;
-        } }, { key: "height", value: function(s) {
-          return arguments.length ? (this.props.height = ie(s), this) : this.props.height;
-        } }, { key: "x", value: function(s) {
-          return arguments.length ? (this.props.x = ie(s), this) : this.props.x;
-        } }, { key: "parser", value: function(s) {
-          if (!arguments.length) return this.props.parser;
-          if (typeof s == "string") {
-            var u = e[s] || e[s + "parser"];
-            typeof u == "function" && (s = u);
-          }
-          if (typeof s != "function") throw new Error("Unknown parser: " + s);
-          return this.props.parser = s, this;
-        } }, { key: "createElement", value: function(s) {
-          return arguments.length ? (this.props.createElement = s, this) : this.props.createElement || e.createElement;
-        } }, { key: "render", value: function() {
-          var s = Ce(arguments);
-          return typeof s.text == "string" && (s.text = this.linebreak(s.text)), s.ctx ? Pr(s.text, this, s.ctx) : Or(s.text, this);
-        } }], o && Fr(n.prototype, o), Object.defineProperty(n, "prototype", { writable: !1 }), e;
-      }();
-      function It(e) {
-        return It = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(n) {
-          return typeof n;
-        } : function(n) {
-          return n && typeof Symbol == "function" && n.constructor === Symbol && n !== Symbol.prototype ? "symbol" : typeof n;
-        }, It(e);
-      }
-      function se(e, n) {
-        (n == null || n > e.length) && (n = e.length);
-        for (var o = 0, s = new Array(n); o < n; o++) s[o] = e[o];
-        return s;
-      }
-      function Nr(e, n) {
-        for (var o = 0; o < n.length; o++) {
-          var s = n[o];
-          s.enumerable = s.enumerable || !1, s.configurable = !0, "value" in s && (s.writable = !0), Object.defineProperty(e, (u = function(y, x) {
-            if (It(y) !== "object" || y === null) return y;
-            var v = y[Symbol.toPrimitive];
-            if (v !== void 0) {
-              var S = v.call(y, x);
-              if (It(S) !== "object") return S;
-              throw new TypeError("@@toPrimitive must return a primitive value.");
-            }
-            return String(y);
-          }(s.key, "string"), It(u) === "symbol" ? u : String(u)), s);
-        }
-        var u;
-      }
-      var _e = function(e) {
-        return typeof e == "function" ? e : function() {
-          return e;
-        };
-      }, De = function() {
-        function e(s) {
-          if (function(y, x) {
-            if (!(y instanceof x)) throw new TypeError("Cannot call a class as a function");
-          }(this, e), this.props = { width: function() {
-            return 1 / 0;
-          }, height: function() {
-            return 1 / 0;
-          }, rotation: 0, vAnchor: 0, hAnchor: 0 }, s) for (var u in s) typeof this[u] == "function" && this[u](s[u]);
-          this.render = this.render.bind(this);
-        }
-        var n, o;
-        return n = e, o = [{ key: "anchor", value: function(s) {
-          var u = this.props, y = u.hAnchor, x = u.vAnchor, v = u.width, S = u.height;
-          if (!arguments.length) return [y * v(0), x * S(0)];
-          if (typeof s == "string") {
-            var _ = this.props;
-            s.toLowerCase().trim().split(/\s+/).forEach(function($) {
-              $ === "top" && (_.vAnchor = -0), $ === "middle" && (_.vAnchor = -0.5), $ === "bottom" && (_.vAnchor = -1), $ === "left" && (_.hAnchor = -0), $ === "center" && (_.hAnchor = -0.5), $ === "right" && (_.hAnchor = -1);
-            });
-          }
-          return this;
-        } }, { key: "width", value: function(s) {
-          return arguments.length ? (this.props.width = _e(s), this) : this.props.width;
-        } }, { key: "height", value: function(s) {
-          return arguments.length ? (this.props.height = _e(s), this) : this.props.height;
-        } }, { key: "rotate", value: function(s) {
-          return arguments.length ? (this.props.rotation = s, this) : this.props.rotation;
-        } }, { key: "createElement", value: function(s) {
-          return arguments.length ? (this.props.createElement = s, this) : this.props.createElement || e.createElement;
-        } }, { key: "canvas", value: function(s, u) {
-          var y, x = s.getContext ? s.getContext("2d") : s;
-          return x.save(), x.rotate(this.rotate() * Math.PI / 180), x.translate.apply(x, function(v) {
-            if (Array.isArray(v)) return se(v);
-          }(y = this.anchor()) || function(v) {
-            if (typeof Symbol < "u" && v[Symbol.iterator] != null || v["@@iterator"] != null) return Array.from(v);
-          }(y) || function(v, S) {
-            if (v) {
-              if (typeof v == "string") return se(v, S);
-              var _ = Object.prototype.toString.call(v).slice(8, -1);
-              return _ === "Object" && v.constructor && (_ = v.constructor.name), _ === "Map" || _ === "Set" ? Array.from(v) : _ === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(_) ? se(v, S) : void 0;
-            }
-          }(y) || function() {
-            throw new TypeError(`Invalid attempt to spread non-iterable instance.
-In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`);
-          }()), u(x), x.restore(), x;
-        } }, { key: "render", value: function() {
-          var s = Ce(arguments);
-          if (s.d3) return s.d3.attr("transform", "rotate(".concat(this.rotate(), ") translate(").concat(this.anchor(), ")"));
-          if (s.ctx) return this.canvas(s.ctx, s.fn);
-          if (s.text) {
-            var u = typeof s.text.render == "function" ? s.text.render() : s.text;
-            return this.createElement()("g", { transform: "rotate(".concat(this.rotate(), ") translate(").concat(this.anchor(), ")") }, u);
-          }
-        } }], o && Nr(n.prototype, o), Object.defineProperty(n, "prototype", { writable: !1 }), e;
-      }(), jr = Object.prototype.hasOwnProperty, oe = {};
-      function Br(e) {
-        return oe[e] || (oe[e] = e.replace(/([a-z])([A-Z])/g, function(n, o, s) {
-          return o + "-" + s.toLowerCase();
-        })), oe[e];
-      }
-      function Le(e, n) {
-        if (Array.isArray(n)) return n.forEach(function(o) {
-          return Le(e, o);
-        });
-        typeof n == "string" && (n = document.createTextNode(n)), e.appendChild(n);
-      }
-      function Te(e, n) {
-        if (typeof document < "u") {
-          var o = typeof e == "string" ? document.createElementNS("http://www.w3.org/2000/svg", e) : e;
-          if (n && o.setAttribute) for (var s in n) jr.call(n, s) && n[s] != null && o.setAttribute(s === "className" ? "class" : Br(s), n[s]);
-          for (var u = arguments.length, y = new Array(u > 2 ? u - 2 : 0), x = 2; x < u; x++) y[x - 2] = arguments[x];
-          return y != null && y.length && y.forEach(function(v) {
-            Le(o, v);
-          }), o;
-        }
-      }
-      st.createElement = Te, st.textparser = jt, st.defaultparser = jt, st.htmlparser = function(e) {
-        e = String(e || "").trim();
-        for (var n, o, s = { weight: null, style: null, sub: !1, sup: !1, href: null, color: null, rel: null, target: null }, u = [], y = [], x = function(I) {
-          for (var D in s) s[D] && (I[D] = s[D]);
-          u.push(I);
-        }, v = function(I) {
-          var D = u.length, O = xr[I];
-          if (D && O) {
-            for (var B = D - 1; u[B] && (u[B] instanceof Tt || pr.test(u[B].value)); ) B--;
-            for (; O && u[B] && u[B] instanceof et; ) B--, O--;
-            for (; O-- > 0; ) u.push(new et());
-          }
-        }; e.length; ) {
-          if (n = /^[^<]+/.exec(e)) jt(Ae(n[0]), !1).forEach(x);
-          else if (!(n = vr.exec(e))) if (n = yr.exec(e)) y.length && (s = y.pop()), v(n[1]);
-          else if (n = mr.exec(e)) {
-            var S = n[1];
-            v(S), y.push(s), s = Object.create(s), be[S] && be[S](s, "");
-            var _ = kr(n[2]);
-            S === "a" && (_.href && (s.href = _.href), _.rel && (s.rel = _.rel), _.target && (s.target = _.target)), _.class && (s.class = s.class ? s.class + " " + _.class : _.class), _.style && (o = /(?:^|\s|;)color\s*:\s*([^;\s"']+)/.exec(_.style)) && o[1] && (s.color = o[1]), S === "br" && u.push(new et());
-          } else n = [e.slice(0, 1)], x(new j(n[0]));
-          e = e.slice(n[0].length);
-        }
-        for (var $ = u[u.length - 1]; $ instanceof et; ) u.pop(), $ = u[u.length - 1];
-        return u;
-      }, st.latexparser = function(e) {
-        e = String(e || "").trim();
-        var n = [0];
-        e = e.replace(/\\verb,(.*?),/, function(F, z) {
-          return n.push(z), "\\verb," + (n.length - 1) + ",";
-        }).replace(/\\\\\n/g, function() {
-          return "\\\\";
-        }).replace(Dr, function(F, z, q) {
-          return q.charAt(z - 1) === "\\" ? F : Lr[F];
-        }).replace(/\n\s+/g, function(F) {
-          return /\n/.test(F.slice(1)) ? "\\par " : F;
-        }).replace(/\\symbol\{(\d+)\}/, function(F, z, q, H) {
-          return H.charAt(q - 1) === "\\" ? F : String.fromCharCode(1 * z);
-        }).replace(/(^|[^\\])(\^|_)(\d|[^{]\S*)/g, function(F, z, q, H) {
-          return z + q + "{" + H + "}";
-        }).replace(/\\verb,(.*?),/, function(F, z) {
-          return "\\verb,".concat(n[+z], ",");
-        });
-        for (var o, s = { weight: null, italic: null, variant: null, sub: !1, sup: !1, href: null }, u = [], y = [], x = function(F) {
-          for (var z in s) s[z] && (F[z] = s[z]);
-          return u.push(F), F;
-        }, v = function() {
-          y.push(s), s = Object.create(s);
-        }, S = function() {
-          if (!y.length) throw new Error("Unexpected }");
-          s = y.pop();
-        }, _ = { tokens: u, open_context: v, close_context: S, add_token: x }; e.length; ) {
-          if (o = Cr.exec(e)) jt(o[0], !1).forEach(x);
-          else if (o = _r.exec(e)) x(new j(o[1]));
-          else if (!(o = Sr.exec(e))) {
-            if (o = /^\{/.exec(e)) v();
-            else if (o = /^\}/.exec(e)) S();
-            else if (!(o = /^\$/.exec(e))) if (o = /^\\verb,([^,]+),/.exec(e)) x(new j(o[1]));
-            else if (o = Er.exec(e)) {
-              var $ = o[1].slice(1) || o[1], I = !!o[2];
-              if (/^(La)?TeX$/i.test($)) {
-                v(), s.family = "serif";
-                var D = void 0;
-                $ === "LaTeX" && ((D = x(new j("L"))).tracking = -0.25, (D = x(new j("A"))).size = 0.7, D.baseline = 0.3, D.tracking = -0.1), (D = x(new j("T"))).tracking = -0.17, (D = x(new j("E"))).baseline = -0.22, D.tracking = -0.13, D = x(new j("X")), S();
-              } else if ($ in ke) x(new j(ke[$])), I && v();
-              else if ($ in X) {
-                var O = [], B = X[$].length - 1, J = void 0;
-                if (B) {
-                  for (I = !1, e = e.slice(o[0].length - 1); B--; ) {
-                    if (!(J = /^\{([^}]+)\}/.exec(e))) throw new Error($ + " is missing an argument");
-                    O.push(J[1]), e = e.slice(J[0].length);
-                  }
-                  o[0] = /^\{/.exec(e) ? "{" : "", I = !!o[0];
-                }
-                I && v(), X[$].apply(_, [s].concat(O));
-              } else console.warn("unknown latex command", $), x(new j(o[1])), I && v();
-            } else o = [e.slice(0, 1)], x(new j(o[0]));
-          }
-          e = e.slice(o[0].length);
-        }
-        return u;
-      }, st.measureText = function(e, n, o) {
-        return P(e, E(n), o);
-      }, st.Token = j, st.Break = Tt, st.LineBreak = et, st.SoftHyphen = yt, st.Rotator = De, De.createElement = Te;
-      const qr = st;
-      return r.default;
-    })());
-  }(ve)), ve.exports;
-}
-var mn = yn();
-const Re = /* @__PURE__ */ sr(mn);
-function ce(l) {
-  return l.replace(/…$/, "");
-}
-function de(l) {
-  return l.children[0].innerHTML;
-}
-function vn(l, t) {
-  const i = ft(l), { fontSize: r, font: a, padding: h = 0 } = l.properties.style || {};
-  if (i.width === i.height && i.width === 0) return;
-  const c = new Re({
-    font: `${r}px/${r}px ${a}`.replace(/(px)+/g, "px"),
-    width: i.width - h * 2,
-    height: i.height - h * 2,
-    align: "left",
-    valign: "top",
-    x: 0,
-    overflow: "ellipsis",
-    parser: "html",
-    createElement: Re.createElement
-  });
-  c.overflowWrap("break-word");
-  const d = c.linebreak(
-    l.properties.content.replaceAll(`
-`, "<br>")
-  ).render(), f = [...d.children];
-  let g = 0;
-  const p = [];
-  l.properties.content.split(`
-`).forEach((A) => {
-    let E = A;
-    for (; E.length && g < f.length; ) {
-      if (f[g].innerHTML === "&nbsp;") {
-        E.startsWith(`
-`) || p.push(g), g++;
-        break;
-      }
-      const k = ce(de(f[g]));
-      E.startsWith(k) && (E = E.slice(k.length).trim()), g++;
-    }
-  }), p.forEach((A) => d.removeChild(f[A]));
-  const w = l.properties.content.match(/(https?:\/\/.*)/gm), b = w ? w.map((A) => A.split(" ")[0]) : [];
-  d.setAttribute("transform", `translate(${h}, ${h})`), b.forEach((A) => {
-    let E = A;
-    const k = [];
-    for (; E.length > 0; ) {
-      const L = f.find(
-        (C) => !!C.children[0] && C.children[0].tagName === "tspan" && E.startsWith(ce(de(C)))
-      );
-      if (!L) break;
-      k.push(L);
-      const M = ce(L.children[0].innerHTML).length;
-      if (!M) break;
-      E = E.slice(M);
-    }
-    k.forEach((L) => {
-      const M = document.createElementNS("http://www.w3.org/2000/svg", "a");
-      M.setAttribute("href", A), M.setAttribute("target", "_blank"), M.innerHTML = de(L), L.children[0].innerHTML = "", L.children[0].appendChild(M);
-    });
-  }), t.appendChild(d);
-}
-const We = 20;
-class wn extends ar {
-  constructor(t, i = {}) {
-    super(
-      t,
-      `
-    <div class="annotation-text-handle" data-handle-id="8">
-      <span class="handle line-handle top" data-handle-id="0"></span>
-      <span class="handle line-handle bottom" data-handle-id="1"></span>
-      <span class="handle line-handle left" data-handle-id="2"></span>
-      <span class="handle line-handle right" data-handle-id="3"></span>
-      <span class="handle top right point-handle top-right" data-handle-id="4"></span>
-      <span class="handle left top point-handle top-left" data-handle-id="5"></span>
-      <span class="handle bottom right point-handle bottom-right" data-handle-id="6"></span>
-      <span class="handle left bottom left-handle point-handle bottom-left" data-handle-id="7"></span>
-      <textarea wrap="on"></textarea>
-    </div>
-  `
-    ), m(this, "textArea"), m(this, "handleSize"), m(this, "rect", { x: 0, y: 0, width: 0, height: 0 }), m(this, "annotation", { ...ue }), m(this, "startX", 0), m(this, "startY", 0), m(this, "handles", []), m(this, "draggedHandle", U), m(this, "isFocused", !1), m(this, "placeholder", "Type your text here..."), m(this, "_onFocus", () => {
-      this.textArea.value === this.placeholder && (this.textArea.value = ""), this.isFocused = !0;
-    }), m(this, "_onBlur", () => {
-      this.isFocused = !1;
-    }), m(this, "startDrawing", (a, h, c = gn(a, h, 0, 0, "", Dt)) => {
-      this.add(c);
-      const d = this.ogma.view.graphToScreenCoordinates({ x: a, y: h });
-      this.select(c.id), this.startDragging(this.getById(c.id), d.x, d.y), this.draggedHandle = 6;
-    }), m(this, "cancelDrawing", () => {
-      this.isDragging && (this.remove(this.annotation.id), this.annotation = { ...ue }, this.draggedHandle = U, this.isDragging = !1, this.emit(Lt, this.annotation));
-    }), m(this, "startDragging", (a, h, c) => {
-      this.annotation = a;
-      const d = dt(this.annotation), f = ft(this.annotation);
-      this.rect.x = d.x, this.rect.y = d.y, this.rect.width = f.width, this.rect.height = f.height, this.startX = h, this.startY = c, this.disableDragging(), this.textArea.classList.add("noevents"), this.textArea.setAttribute("disabled", "disabled"), this.emit(Yt, this.annotation), this.isDragging = !0;
-    }), m(this, "onHandleMouseDown", (a) => {
-      const h = this.getById(this.selectedId) || this.getById(this.hoveredId);
-      if (!h) return;
-      this.selectedId !== h.id && this.select(this.hoveredId);
-      const { x: c, y: d } = Vt(a, this.ogma.getContainer());
-      this.startDragging(h, c, d), this.draggedHandle = tr(a.target);
-    }), m(this, "onMouseMove", (a) => {
-      requestAnimationFrame(() => this._onMouseMove(a));
-    }), m(this, "_onMouseMove", (a) => {
-      if (!this.isDragging) return;
-      a.stopPropagation(), a.preventDefault();
-      const h = this.handles[this.draggedHandle];
-      let c = h.classList.contains("top");
-      const d = h.classList.contains("left"), f = h.classList.contains("right"), g = h.classList.contains("bottom");
-      let p = h.classList.contains("line-handle");
-      !p && !c && !g && !d && !f && (c = !0, p = !0);
-      const { x: w, y: b } = Vt(
-        a,
-        this.ogma.getContainer()
-      );
-      let A = this.rect.x, E = this.rect.y, k = Math.max(this.rect.width, We), L = Math.max(this.rect.height, We);
-      const M = this.ogma.view.getZoom(), C = (w - this.startX) / M, N = (b - this.startY) / M, P = this.ogma.view.getAngle(), tt = nt({ x: C, y: N }, P), it = nt({ x: C, y: N }, -P);
-      p ? (A = this.rect.x + tt.x, E = this.rect.y + tt.y) : d && c ? (A += tt.x, E += tt.y, k -= C, L -= N) : f && g ? (k += C, L += N) : d && g ? (A += it.x, k -= it.x, L += it.y) : f && c && (E += it.y, k += it.x, L -= it.y), Qr(this.annotation, A, E, k, L), this.emit(Zt, this.annotation, "text"), this.refreshEditor(), this.layer.refresh();
-    }), m(this, "onMouseUp", () => {
-      !this.isDragging || this.draggedHandle === U || (this.restoreDragging(), this.textArea.classList.remove("noevents"), this.textArea.removeAttribute("disabled"), this.emit(Lt, this.annotation), this.isDragging = !1, this.draggedHandle = U);
-    }), m(this, "_onMousedown", (a) => {
-      a.stopPropagation();
-    }), m(this, "onViewChanged", () => {
-      const a = Math.max(2, this.handleSize / this.ogma.view.getZoom());
-      document.documentElement.style.setProperty("--handle-scale", `${1 / a}`), this.ogma.view.getAngle() === 0 ? this.editor.element.classList.remove("rotated") : this.editor.element.classList.add("rotated");
-    }), m(this, "_onInput", () => {
-      const a = this.getById(this.selectedId);
-      a && (this.textArea.value = this.textArea.value.replace(/ +(?= )/g, ""), this.textArea.focus(), a.properties.content = this.textArea.value, this.emit(me, a), this.layer.refresh());
-    }), this.showeditorOnHover = !1, this.handleSize = Be.handleSize, this.placeholder = Be.placeholder;
-    const r = this.textArea = this.editor.element.querySelector("textarea");
-    r.addEventListener("input", this._onInput), r.addEventListener("focus", this._onFocus), r.addEventListener("blur", this._onBlur), r.addEventListener("mousedown", this._onMousedown), r.spellcheck = !1, this.handles = Array.prototype.slice.call(
-      this.editor.element.querySelectorAll(".annotation-text-handle > .handle")
-    ), this.handles.push(this.editor.element), this.handles.forEach(
-      (a) => a.addEventListener("mousedown", this.onHandleMouseDown)
-    ), document.addEventListener("mouseup", this.onMouseUp), document.addEventListener("mousemove", this.onMouseMove, !0), t.events.on(["viewChanged", "zoom"], this.onViewChanged);
-  }
-  _canRemove() {
-    return !this.isFocused;
-  }
-  detect({ x: t, y: i }, r = 0) {
-    const a = { x: t, y: i }, h = this.ogma.view.getAngle();
-    return this.elements.find((c) => {
-      const { x: d, y: f } = dt(c), { width: g, height: p } = ft(c), w = { x: d, y: f }, { x: b, y: A } = nt(xt(a, w), -h);
-      return b > -r && b < g + r && A > -r && A < p + r;
-    });
-  }
-  draw(t) {
-    t.innerHTML = "";
-    const i = "", r = this.ogma.view.getAngle();
-    for (let h = 0; h < this.elements.length; h++) {
-      const c = this.elements[h], d = `class${h}`, f = ft(c), g = dt(c);
-      if (c.id === this.selectedId) continue;
-      const {
-        color: p,
-        fontSize: w,
-        font: b,
-        strokeColor: A,
-        strokeWidth: E,
-        strokeType: k,
-        background: L,
-        borderRadius: M
-      } = c.properties.style || Dt, C = wt("g");
-      C.classList.add("annotation-text"), C.setAttribute("fill", `${p}`), C.setAttribute("font-size", `${w}px`), C.setAttribute("font-family", `${b}`);
-      const N = wt("rect");
-      M && (N.setAttribute("rx", `${M}`), N.setAttribute("ry", `${M}`));
-      let P = !1;
-      k && k !== "none" && (P = !0, N.setAttribute("stroke", A || "black"), N.setAttribute("stroke-width", `${E}`), k === "dashed" && N.setAttribute("stroke-dasharray", "5,5")), (L && L.length || P) && (P = !0, N.setAttribute("fill", L || "transparent")), P && (N.setAttribute("width", `${f.width}`), N.setAttribute("height", `${f.height}`)), C.appendChild(N), vn(c, C);
-      const { x: tt, y: it } = nt(g, -r);
-      C.setAttribute("transform", `translate(${tt},${it})`), C.classList.add(d), C.setAttribute("data-annotation", `${c.id}`), C.setAttribute("data-annotation-type", "text"), t.appendChild(C);
-    }
-    const a = wt("style");
-    a.innerHTML = i, t.firstChild && t.insertBefore(a, t.firstChild);
-  }
-  refreshDrawing() {
-    const t = this.ogma.view.getAngle(), i = this.layer.element.children;
-    for (let r = 0; r < i.length; r++) {
-      const a = i[r];
-      if (!a.hasAttribute("data-annotation")) continue;
-      const h = a.getAttribute("data-annotation"), c = dt(this.getById(h)), { x: d, y: f } = nt(c, -t);
-      a.setAttribute("transform", `translate(${d},${f})`);
-    }
-  }
-  getDefaultOptions() {
-    return ue;
-  }
-  refreshEditor() {
-    if (+this.selectedId < 0 && +this.hoveredId < 0) return;
-    const t = this.getById(this.selectedId) || this.getById(this.hoveredId), i = ft(t), r = this.ogma.view.graphToScreenCoordinates(
-      dt(t)
-    ), a = this.ogma.view.getZoom(), {
-      font: h,
-      fontSize: c,
-      color: d,
-      background: f,
-      padding: g = 0
-    } = t.properties.style || Dt, p = (c || 1) * a;
-    this.textArea.value = t.properties.content;
-    const w = this.editor.element.style;
-    w.transform = `translate(${r.x}px, ${r.y}px)translate(-50%, -50%)translate(${i.width / 2 * a}px, ${i.height / 2 * a}px)`, w.width = `${i.width * a}px`, w.height = `${i.height * a}px`;
-    const b = this.textArea.style;
-    b.font = `${p} ${h}`, b.fontFamily = h || "sans-serif", b.fontSize = `${p}px`, b.padding = `${a * g}px`, b.lineHeight = `${p}px`, b.boxSizing = "border-box", b.color = d || "black", b.background = f || "transparent", this.textArea.placeholder = this.placeholder, this.layer.refresh();
-  }
-  select(t) {
-    super.select(t), this.textArea.classList.add("noevents");
-  }
-  destroy() {
-    super.destroy(), document.removeEventListener("mouseup", this.onMouseUp), document.removeEventListener("mousemove", this.onMouseMove, !0), this.ogma.events.off(this.onViewChanged);
-  }
-}
-class xn {
-  constructor() {
-    m(this, "links", {}), m(this, "linksByTargetId", {}), m(this, "linksByArrowId", {});
-  }
-  add(t, i, r, a, h) {
-    const c = Jt(), d = t.id, f = {
-      id: c,
-      arrow: d,
-      target: r,
-      targetType: a,
-      connectionPoint: h,
-      side: i
-    };
-    return this.links[c] = f, this.linksByTargetId[r] || (this.linksByTargetId[r] = []), this.linksByTargetId[r].push(c), this.linksByArrowId[d] || (this.linksByArrowId[d] = {}), this.linksByArrowId[d][i] = c, t.properties.link = t.properties.link || {}, t.properties.link[i] = {
-      id: r,
-      side: i,
-      type: a,
-      magnet: h
-    }, this;
-  }
-  arrowIsLinked(t, i) {
-    var r;
-    return !!((r = this.linksByArrowId[t]) != null && r[i]);
-  }
-  // remove the link between the arrow and the target by arrow id and side
-  remove(t, i) {
-    var r, a;
-    const h = t.id, c = (r = this.linksByArrowId[h]) == null ? void 0 : r[i];
-    if ((a = t.properties.link) == null || delete a[i], !c) return this;
-    const d = this.links[c];
-    delete this.links[c];
-    const f = this.linksByTargetId[d.target];
-    for (let g = 0; g < f.length; g++)
-      if (f[g] === c) {
-        f.splice(g, 1);
-        break;
-      }
-    return delete this.linksByArrowId[h][i], this;
-  }
-  getArrowLink(t, i) {
-    var r;
-    const a = (r = this.linksByArrowId[t]) == null ? void 0 : r[i];
-    return a ? this.links[a] : null;
-  }
-  getTargetLinks(t, i) {
-    var r;
-    return ((r = this.linksByTargetId[t]) == null ? void 0 : r.map((a) => this.links[a]).filter((a) => a.targetType === i)) ?? [];
-  }
-  forEach(t) {
-    Object.values(this.links).forEach(t);
-  }
-}
-const ot = (l) => l.properties.type === "arrow", ct = (l) => l.properties.type === "text", Ue = (l) => l.type === "FeatureCollection", bn = {
-  magnetColor: "#3e8",
-  detectMargin: 20,
-  magnetHandleRadius: 5,
-  magnetRadius: 10,
-  textPlaceholder: "Type here",
-  arrowHandleSize: 3.5,
-  textHandleSize: 3.5,
-  minArrowHeight: 20,
-  maxArrowHeight: 30
-}, Xe = ["start", "end"], Ge = [
-  { x: 0, y: 0 },
-  { x: 0.5, y: 0 },
-  { x: 1, y: 0 },
-  { x: 0, y: 0.5 },
-  { x: 1, y: 0.5 },
-  { x: 0, y: 1 },
-  { x: 0.5, y: 1 },
-  { x: 1, y: 1 }
-];
-class An extends or {
-  constructor(t, i = {}) {
-    super(), m(this, "arrows"), m(this, "texts"), m(this, "links", new xn()), m(this, "layer"), m(this, "annotations"), m(this, "ogma"), m(this, "options"), m(this, "selected", null), m(this, "updateTimeout", 0), m(this, "hoveredNode", null), m(this, "dragged", null), m(this, "textToMagnet"), m(this, "activeLinks", []), m(this, "_render", (r) => {
-      if (!this.dragged || this.textToMagnet === void 0) return;
-      r.beginPath(), r.fillStyle = "green";
-      const a = this.ogma.view.getZoom();
-      Ge.forEach((h) => {
-        if (!this.textToMagnet) return;
-        const c = ft(this.textToMagnet), d = dt(this.textToMagnet), f = Ut(h, { x: c.width, y: c.height }), g = nt(f, this.ogma.view.getAngle()), { x: p, y: w } = Ct(g, d);
-        r.moveTo(p, w), r.arc(p, w, this.options.magnetHandleRadius / a, 0, Math.PI * 2);
-      }), r.fill(), r.closePath();
-    }), m(this, "_onFeatureDrag", (r, a) => {
-      const h = a;
-      if (ot(r) && h === "line")
-        ["start", "end"].find((c) => {
-          const d = c === "start" ? zt(r) : Xt(r);
-          return this._snapToText(r, h, d) || this._findAndSnapToNode(r, c, d);
-        });
-      else if (ot(r) && h !== "line") {
-        const c = h === "start" ? zt(r) : Xt(r);
-        this._snapToText(r, h, c) || this._findAndSnapToNode(r, h, c);
-      } else ct(r) && (this.activeLinks.forEach(({ arrow: c, side: d, connectionPoint: f }) => {
-        const g = this.getAnnotation(c), p = ft(r), w = dt(r), b = Ut(f, { x: p.width, y: p.height }), A = nt(b, this.ogma.view.getAngle()), E = Ct(A, w);
-        g.geometry.coordinates[d === "start" ? 0 : 1] = [E.x, E.y];
-      }), this.activeLinks.length && this.arrows.refreshLayer());
-      this.layer.refresh(), this.emit(Zt, r, a);
-    }), m(this, "_onFeatureDragEnd", (r) => {
-      this.dragged !== null && ot(r) && zt(this.dragged) && Xe.forEach((a) => {
-        this.links.getArrowLink(r.id, a) && this.emit(un, {
-          arrow: r,
-          link: this.links.getArrowLink(r.id, a)
-        });
-      }), (ct(r) || ot(r)) && this.onUpdate(r), this.dragged = null, this.activeLinks = [], this.textToMagnet = void 0, this.annotations.forEach((a) => a.enableDetection()), this.layer.refresh(), this.emit(Lt, r);
-    }), m(this, "_onFeatureDragStart", (r) => {
-      this.textToMagnet = void 0, ot(r) ? this.dragged = r : ct(r) && this.activeLinks.push(...this.links.getTargetLinks(r.id, "text")), this.annotations.forEach((a) => {
-        const h = a.getSelectedFeature();
-        h && h !== r && a.unhover().unselect(), a.disableDetection();
-      }), this.emit(Yt, r);
-    }), m(this, "_onNodesDragStart", () => {
-      this.arrows.unhover().unselect(), this.texts.unhover().unselect();
-    }), m(this, "_onNodesDrag", (r) => {
-      const { dx: a, dy: h } = r;
-      this._moveNodes(r.nodes, a, h);
-    }), m(this, "_onLayoutEnd", (r) => {
-      r.ids.forEach((a, h) => {
-        this.links.getTargetLinks(a, "node").forEach((c) => {
-          const d = this.getAnnotation(c.arrow), f = c.side, g = Rt(
-            d,
-            f === "start" ? "end" : "start"
-          ), p = r.positions.current[h], w = this.ogma.getNode(a).getAttribute("radius"), b = Wt(g, p, +w);
-          St(d, f, b.x, b.y);
-        });
-      }), this.arrows.refreshLayer(), this.texts.refreshLayer();
-    }), m(this, "_onAdded", (r) => {
-      this.emit(ye, r);
-    }), m(this, "_onRemoved", (r) => {
-      this.emit(pe, r);
-    }), m(this, "_onUnselect", (r) => {
-      this.selected = null, this.emit(ge, r);
-    }), m(this, "_onSelect", (r) => {
-      this.selected !== r && (this.selected = r, this.emit(fe, this.selected));
-    }), m(this, "onUpdate", (r) => {
-      cancelAnimationFrame(this.updateTimeout), this.updateTimeout = requestAnimationFrame(
-        () => this._onUpdate(r)
-      );
-    }), m(this, "_onUpdate", (r) => {
-      this.emit(me, r);
-    }), this.options = this.setOptions({ ...bn, ...i }), this.ogma = t, this.arrows = new fn(t, this.options), this.texts = new wn(t, this.options), this.annotations = [this.arrows, this.texts], this.annotations.forEach((r) => {
-      r.on(Yt, this._onFeatureDragStart).on(Zt, this._onFeatureDrag).on(Lt, this._onFeatureDragEnd).on(me, this.onUpdate).on(ge, this._onUnselect).on(fe, this._onSelect).on(ye, this._onAdded).on(pe, this._onRemoved);
-    }), this.ogma.events.on("nodesDragStart", this._onNodesDragStart).on("nodesDragProgress", this._onNodesDrag).on("layoutEnd", this._onLayoutEnd).on(["viewChanged", "rotate"], () => {
-      this.refreshTextLinks();
-    }), this.layer = t.layers.addCanvasLayer(this._render), this.layer.moveToBottom();
-  }
-  _moveNodes(t, i, r) {
-    t.forEach((a) => {
-      const h = this.links.getTargetLinks(a.getId(), "node"), c = a.getPosition();
-      h.forEach((d) => {
-        const f = this.getAnnotation(d.arrow), g = d.side, p = Rt(
-          f,
-          g === "start" ? "end" : "start"
-        );
-        let w = c;
-        const b = +a.getAttribute("radius"), A = 1e-6;
-        (d.connectionPoint.x - (c.x - i) > A || d.connectionPoint.y - (c.y - r) > A) && (w = Wt(p, c, b)), St(f, g, w.x, w.y);
-      });
-    }), this.arrows.refreshLayer();
-  }
-  _snapToText(t, i, r) {
-    const a = this.texts.detect(r, this.options.detectMargin);
-    if (this.links.remove(t, i), !a) return !1;
-    this.textToMagnet = a;
-    const h = this.findMagnetPoint(Ge, a, r);
-    return h ? (St(t, i, h.point.x, h.point.y), this.links.add(t, i, a.id, "text", h.magnet), !0) : !1;
-  }
-  _findAndSnapToNode(t, i, r) {
-    var a, h;
-    const c = this.ogma.view.graphToScreenCoordinates(r), d = this.ogma.view.getElementAt(c);
-    this.links.remove(t, i), d && d.isNode ? ((a = this.hoveredNode) == null || a.setSelected(!1), this.hoveredNode = d, d.setSelected(!0), this._snapToNode(t, i, d, c)) : ((h = this.hoveredNode) == null || h.setSelected(!1), this.hoveredNode = null);
-  }
-  _snapToNode(t, i, r, a) {
-    const h = r.getPositionOnScreen(), c = +r.getAttribute("radius"), d = c * this.ogma.view.getZoom(), f = a.x - h.x, g = a.y - h.y, p = Math.sqrt(f * f + g * g), w = r.getPosition();
-    if (p < d + this.options.detectMargin) {
-      let b = w;
-      if (p > d / 2) {
-        const A = Rt(t, i === "end" ? "start" : "end");
-        b = Wt(A, b, c);
-      }
-      St(t, i, b.x, b.y), this.links.add(t, i, r.getId(), "node", b);
-    }
-  }
-  refreshTextLinks() {
-    let t = !1;
-    this.links.forEach(
-      ({ connectionPoint: i, targetType: r, target: a, arrow: h, side: c }) => {
-        if (r !== "text") return;
-        t = !0;
-        const d = this.getAnnotation(a), f = this.getAnnotation(h), g = ft(d), p = dt(d), w = Ut(i, { x: g.width, y: g.height }), b = nt(w, this.ogma.view.getAngle()), A = Ct(b, p);
-        St(f, c, A.x, A.y);
-      }
-    ), t && this.arrows.refreshLayer();
-  }
-  /**
-   * @returns the currently selected annotation
-   */
-  getSelected() {
-    return this.selected;
-  }
-  findMagnetPoint(t, i, r) {
-    let a;
-    for (const h of t) {
-      const c = ft(i), d = dt(i), f = Ut(h, { x: c.width, y: c.height }), g = nt(f, this.ogma.view.getAngle()), p = Ct(g, d), w = _t(xt(p, r)), b = Math.min(
-        this.options.magnetRadius * this.ogma.view.getZoom(),
-        // when really zoomed in: avoid to snap on too far away magnets
-        c.width / 2,
-        c.height / 2
-      );
-      if (w < Math.max(b, this.options.magnetHandleRadius)) {
-        a = {
-          point: p,
-          magnet: h
-        };
-        break;
-      }
-    }
-    return a;
-  }
-  /**
-   * Set the options for the controller
-   * @param options new Options
-   * @returns the updated options
-   */
-  setOptions(t = {}) {
-    return this.options = {
-      ...this.options || {},
-      ...t
-    }, this.options;
-  }
-  /**
-   * Selects the annotation with the given id
-   * @param id the id of the annotation to select
-   */
-  select(t) {
-    const i = this.getAnnotations().features.find((r) => r.id === t);
-    return i ? (ot(i) ? this.arrows.select(i.id) : ct(i) && this.texts.select(i.id), this) : this;
-  }
-  /**
-   * Unselects the currently selected annotation
-   */
-  unselect() {
-    return this.selected ? (ot(this.selected) ? this.arrows.unselect() : ct(this.selected) && this.texts.unselect(), this) : this;
-  }
-  /**
-   * Add an annotation to the controller
-   * @param annotation The annotation to add
-   */
-  add(t) {
-    if (Ue(t)) {
-      const [i, r] = t.features.reduce(
-        (a, h) => (ot(h) ? a[1].push(h) : ct(h) && a[0].push(h), a),
-        [[], []]
-      );
-      return i.forEach((a) => this.add(a)), r.forEach((a) => this.add(a)), this.arrows.refreshLayer(), this;
-    }
-    switch (t.properties.type) {
-      case "text":
-        this.texts.add(t);
-        break;
-      // more to follow
-      default:
-        this.arrows.add(t), this.loadLink(t);
-        break;
-    }
-    return this;
-  }
-  /**
-   * Remove an annotation or an array of annotations from the controller
-   * @param annotation The annotation(s) to remove
-   */
-  remove(t) {
-    return Ue(t) ? (t.features.forEach(
-      (i) => this.remove(i)
-    ), this) : (ot(t) ? (this.links.remove(t, "start"), this.links.remove(t, "end"), this.arrows.remove(t.id)) : this.texts.remove(t.id), this);
-  }
-  loadLink(t) {
-    if (t.properties.link)
-      for (const i of Xe) {
-        const r = t.properties.link[i];
-        if (!r) continue;
-        const a = this.getAnnotation(r.id);
-        if (r.type === "text" && a)
-          this.links.add(t, i, r.id, r.type, r.magnet);
-        else if (r.type === "node") {
-          const h = this.ogma.getNode(r.id);
-          if (!h) continue;
-          this.links.add(t, i, r.id, r.type, r.magnet);
-          const c = h.getPosition(), d = h.getAttribute("radius") || 0, f = Rt(
-            t,
-            i === "start" ? "end" : "start"
-          ), g = Wt(f, c, +d);
-          St(t, i, g.x, g.y);
-        }
-      }
-  }
-  /**
-   * Start adding an arrow (add it, and give control to the user)
-   * @param x coord of the first point
-   * @param y coord of the first point
-   * @param arrow The arrow to add
-   */
-  startArrow(t, i, r) {
-    this.cancelDrawing(), this.arrows.startDrawing(t, i, r);
-  }
-  /**
-   * Start adding a text (add it, and give control to the user)
-   * @param x coord of the top left point
-   * @param y coord of the top left point
-   * @param text The text to add
-   */
-  startText(t, i, r) {
-    this.cancelDrawing(), this.texts.startDrawing(t, i, r);
-  }
-  /**
-   * Cancel drawing on the current frame
-   */
-  cancelDrawing() {
-    this.annotations.forEach((t) => t.cancelDrawing()), this.emit(hn);
-  }
-  /**
-   * Update the style of the annotation with the given id
-   * @param id The id of the annotation to update
-   * @param style The new style
-   */
-  updateStyle(t, i) {
-    const r = this.getAnnotations().features.find((a) => a.id === t);
-    return r ? (ot(r) ? this.arrows.updateStyle(r, i) : ct(r) && this.texts.updateStyle(r, i), this.onUpdate(r), this) : this;
-  }
-  setScale(t, i, r, a) {
-    const h = this.getAnnotations().features.find((c) => c.id === t);
-    return h ? (ot(h) ? this.arrows.scale(h, i, r, a) : ct(h) && this.texts.scale(h, i, r, a), this.onUpdate(h), this) : this;
-  }
-  /**
-   * @returns the annotations in the controller
-   */
-  getAnnotations() {
-    const t = {
-      type: "FeatureCollection",
-      features: []
-    };
-    return this.annotations.forEach((i) => {
-      t.features = [...t.features, ...i.getElements()];
-    }), t;
-  }
-  /**
-   * Retrieve the annotation with the given id
-   * @param id the id of the annotation to get
-   * @returns The annotation with the given id
-   */
-  getAnnotation(t) {
-    return this.getAnnotations().features.find((i) => i.id === t);
-  }
-  /**
-   * Destroy the controller and its elements
-   */
-  destroy() {
-    this.annotations.forEach((t) => t.destroy()), this.layer.destroy();
-  }
-}
-const Ve = [8, 10, 12, 14, 16, 24, 32, 48, 64, 72], Ze = "none", lr = "#333333", Tn = [
+import { Control as V, EVT_SELECT as B, isArrow as H, isText as N, EVT_UNSELECT as _, EVT_ADD as k, EVT_REMOVE as z, EVT_UPDATE as W, EVT_HISTORY as U } from "@linkurious/ogma-annotations";
+import { createBox as ae, createComment as ce, createPolygon as le, getAnnotationsBounds as ie, isBox as ue, isComment as fe, isPolygon as Ce } from "@linkurious/ogma-annotations";
+import { useOgma as I } from "@linkurious/ogma-react";
+import M, { useContext as O, createContext as F, useState as a, useEffect as g } from "react";
+const y = [8, 10, 12, 14, 16, 24, 32, 48, 64, 72], x = "none", S = "#333333", X = [
   "#FFFFFF",
   "#F44E3B",
   "#FE9200",
@@ -1968,7 +15,7 @@ const Ve = [8, 10, 12, 14, 16, 24, 32, 48, 64, 72], Ze = "none", lr = "#333333",
   "#333333",
   "#808080",
   "#cccccc"
-], $n = [
+], Z = [
   "Roboto",
   "Helvetica Neue",
   "Helvetica",
@@ -1980,125 +27,132 @@ const Ve = [8, 10, 12, 14, 16, 24, 32, 48, 64, 72], Ze = "none", lr = "#333333",
   "Consolas",
   "Courier New",
   "monospace"
-].sort((l, t) => l.toLocaleLowerCase().localeCompare(t.toLocaleLowerCase())), kn = {
+].sort((r, o) => r.toLocaleLowerCase().localeCompare(o.toLocaleLowerCase())), G = {
   head: "arrow",
-  strokeColor: lr,
+  strokeColor: S,
   strokeWidth: 5
-}, En = 0.25, Sn = {
+}, K = 0.25, Y = {
   font: "Roboto",
-  fontSize: Ve[2],
-  padding: Ve[2] * En,
-  color: lr,
-  strokeType: Ze,
-  background: Ze
-};
-function Cn(l) {
-  return l.reduce((t, i) => t + i, 0) / l.length;
+  fontSize: y[2],
+  padding: y[2] * K,
+  color: S,
+  strokeType: x,
+  background: x
+}, T = F(
+  void 0
+), $ = () => O(T);
+function ee() {
+  return F(null);
 }
-function In(l, t = 0, i = 1) {
-  return t + (i - t) * l;
+function j(r) {
+  return r.reduce((o, s) => o + s, 0) / r.length;
 }
-function Mn(l, t = 0, i = 1) {
-  return (l - t) / (i - t);
+function te(r, o = 0, s = 1) {
+  return o + (s - o) * r;
 }
-function On() {
-  return Ye(null);
+function oe(r, o = 0, s = 1) {
+  return (r - o) / (s - o);
 }
-const hr = Ye(
-  void 0
-), zn = () => Ur(hr), _n = (l, t) => {
-  switch (t.type) {
-    case "add":
-      return {
-        ...l,
-        features: [...l.features, t.payload]
-      };
-    case "remove":
-      return {
-        ...l,
-        features: l.features.filter((i) => i.id !== t.payload.id)
-      };
-    case "update":
-      return {
-        ...l,
-        features: l.features.map(
-          (i) => i.id === t.payload.id ? t.payload : i
-        )
-      };
-    default:
-      return l;
-  }
-}, Pn = ({
-  children: l,
-  annotations: t
+const ne = ({
+  children: r,
+  annotations: o
 }) => {
-  const i = Gr(), [r, a] = Xr(
-    _n,
-    t || {
+  const s = I(), [D, i] = a(
+    o || {
       type: "FeatureCollection",
       features: []
     }
-  ), [h, c] = Et(null), [d, f] = Et(kn), [g, p] = Et(Sn), [w, b] = Et(), [A, E] = Et(1), [k, L] = Et(1);
-  return he(() => {
-    if (!i) return;
-    const M = new An(i, {
+  ), [n, u] = a(null), [l, f] = a(G), [C, E] = a(Y), [e, d] = a(), [w, A] = a(1), [R, m] = a(1), [b, h] = a(!1), [P, v] = a(!1);
+  return g(() => {
+    if (!s) return;
+    const t = new V(s, {
       minArrowHeight: 1
-    }), C = Cn(i.getNodes().getAttribute("radius")) / 5, N = A;
+    }), L = j(s.getNodes().getAttribute("radius")) / 5, p = w;
     return f({
-      ...d,
-      strokeWidth: (d.strokeWidth || 1) * N
-    }), E(N), L(C), M.on("select", (P) => {
-      ot(P) ? f({
-        ...P.properties.style || {}
-      }) : ct(P) && p({
-        ...P.properties.style || {}
-      }), c(P);
-    }).on("unselect", () => {
-      c(null);
-    }), b(M), t && M.add(t), () => {
-      M.destroy();
+      ...l,
+      strokeWidth: (l.strokeWidth || 1) * p
+    }), A(p), m(L), t.on(B, () => {
+      t.getSelectedAnnotations().features.forEach((c) => {
+        c && (H(c) ? f({
+          ...c.properties.style || {}
+        }) : N(c) && E({
+          ...c.properties.style || {}
+        }), u(c));
+      });
+    }).on(_, () => {
+      u(null);
+    }).on(k, () => {
+      i(t.getAnnotations());
+    }).on(z, () => {
+      i(t.getAnnotations());
+    }).on(W, () => {
+      i(t.getAnnotations());
+    }).on(U, () => {
+      h(t.canUndo()), v(t.canRedo());
+    }), d(t), o && (t.add(o), t.clearHistory()), () => {
+      t.destroy();
     };
-  }, [i]), he(() => {
-    w && h && (h == null ? void 0 : h.properties.type) === "arrow" && w.updateStyle(h.id, d);
-  }, [w, d, h]), he(() => {
-    w && h && (h == null ? void 0 : h.properties.type) === "text" && w.updateStyle(h.id, g);
-  }, [w, g, h]), /* @__PURE__ */ Wr.createElement(
-    hr.Provider,
+  }, [s]), g(() => {
+    e && n && (n == null ? void 0 : n.properties.type) === "arrow" && e.updateStyle(n.id, l);
+  }, [e, l, n]), g(() => {
+    e && n && (n == null ? void 0 : n.properties.type) === "text" && e.updateStyle(n.id, C);
+  }, [e, C, n]), /* @__PURE__ */ M.createElement(
+    T.Provider,
     {
       value: {
-        annotations: r,
-        updateAnnotations: a,
-        currentAnnotation: h,
-        setCurrentAnnotation: c,
-        textStyle: g,
-        setTextStyle: p,
-        arrowStyle: d,
+        annotations: D,
+        currentAnnotation: n,
+        setCurrentAnnotation: u,
+        textStyle: C,
+        setTextStyle: E,
+        arrowStyle: l,
         setArrowStyle: f,
-        arrowWidthFactor: A,
-        setArrowWidthFactor: E,
-        textSizeFactor: k,
-        setTextSizeFactor: L,
-        editor: w,
-        setEditor: b
+        arrowWidthFactor: w,
+        setArrowWidthFactor: A,
+        textSizeFactor: R,
+        setTextSizeFactor: m,
+        editor: e,
+        setEditor: d,
+        // History management
+        canUndo: b,
+        canRedo: P,
+        undo: () => (e == null ? void 0 : e.undo()) || !1,
+        redo: () => (e == null ? void 0 : e.redo()) || !1,
+        clearHistory: () => e == null ? void 0 : e.clearHistory(),
+        // Annotation management
+        add: (t) => e == null ? void 0 : e.add(t),
+        remove: (t) => e == null ? void 0 : e.remove(t),
+        cancelDrawing: () => e == null ? void 0 : e.cancelDrawing(),
+        select: (t) => e == null ? void 0 : e.select(t),
+        // Drawing methods
+        enableBoxDrawing: (t) => e == null ? void 0 : e.enableBoxDrawing(t),
+        enablePolygonDrawing: (t) => e == null ? void 0 : e.enablePolygonDrawing(t),
+        enableCommentDrawing: (t) => e == null ? void 0 : e.enableCommentDrawing(t)
       }
     },
-    l
+    r
   );
 };
 export {
-  hr as AnnotationsContext,
-  Pn as AnnotationsContextProvider,
-  lr as BLACK,
-  En as RELATIVE_PADDING,
-  Ze as TRANSPARENT,
-  On as createAnnotationsContext,
-  kn as defaultArrowStyle,
-  Tn as defaultColors,
-  Sn as defaultTextStyle,
-  Ve as fontSizes,
-  $n as fonts,
-  In as interpolate,
-  Cn as mean,
-  Mn as normalize,
-  zn as useAnnotationsContext
+  ne as AnnotationsContextProvider,
+  S as BLACK,
+  K as RELATIVE_PADDING,
+  x as TRANSPARENT,
+  ee as createAnnotationsContext,
+  ae as createBox,
+  ce as createComment,
+  le as createPolygon,
+  G as defaultArrowStyle,
+  X as defaultColors,
+  Y as defaultTextStyle,
+  y as fontSizes,
+  Z as fonts,
+  ie as getAnnotationsBounds,
+  te as interpolate,
+  ue as isBox,
+  fe as isComment,
+  Ce as isPolygon,
+  j as mean,
+  oe as normalize,
+  $ as useAnnotationsContext
 };