@linkurious/ogma-annotations 1.1.5 → 1.1.7

package/dist/index.mjs

@@ -5,7 +5,7 @@ var In = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : t
 function ce(u) {
   return u && u.__esModule && Object.prototype.hasOwnProperty.call(u, "default") ? u.default : u;
 }
-var Pe = { exports: {} };
+var $e = { exports: {} };
 (function(u) {
   (function(l, t) {
     u.exports = t();
@@ -15,29 +15,29 @@ var Pe = { exports: {} };
       function c(s) {
         return Math.round(s * 1e8) / 1e8;
       }
-      function f(s, d) {
-        var m = d.x - s.x, A = d.y - s.y;
+      function d(s, f) {
+        var m = f.x - s.x, A = f.y - s.y;
         return Math.sqrt(m * m + A * A);
       }
-      function g(s, d, m) {
-        var A = d.y - s.y, T = d.x - s.x, S = Math.atan2(A, T);
+      function g(s, f, m) {
+        var A = f.y - s.y, T = f.x - s.x, S = Math.atan2(A, T);
         if (m)
           for (; S < 0; )
             S += t;
         return S;
       }
-      function p(s, d) {
-        this.x = s !== void 0 ? s : 0, this.y = d !== void 0 ? d : 0;
+      function p(s, f) {
+        this.x = s !== void 0 ? s : 0, this.y = f !== void 0 ? f : 0;
       }
       return p.fromRadians = function(s) {
-        var d = Math.cos(s), m = Math.sin(s);
-        return new p(d, m);
+        var f = Math.cos(s), m = Math.sin(s);
+        return new p(f, m);
       }, p.fromDegrees = function(s) {
-        var d = s * (Math.PI / 180);
-        return p.fromRadians(d);
+        var f = s * (Math.PI / 180);
+        return p.fromRadians(f);
       }, p.fromString = function(s) {
-        var d = s.split(",");
-        return new p(parseFloat(d[0]), parseFloat(d[1]));
+        var f = s.split(",");
+        return new p(parseFloat(f[0]), parseFloat(f[1]));
       }, p.fromArray = function(s) {
         return new p(s[0], s[1]);
       }, p.prototype = {
@@ -100,8 +100,8 @@ var Pe = { exports: {} };
         // @param x - optional x component to set.
         // @param y - optional y component to set.
         // @return self.
-        set: function(s, d) {
-          return s !== void 0 && (this.x = s), d !== void 0 && (this.y = d), this;
+        set: function(s, f) {
+          return s !== void 0 && (this.x = s), f !== void 0 && (this.y = f), this;
         },
         // [API]
         // [chainable, clone]
@@ -137,7 +137,7 @@ var Pe = { exports: {} };
         // @param other - vector to get distance from.
         // @return distance between vectors.
         distanceFrom: function(s) {
-          return f(this, s);
+          return d(this, s);
         },
         // [API]
         // []
@@ -191,7 +191,7 @@ var Pe = { exports: {} };
         // @param radians - radians to rotate this vector by (can be positive or negative).
         // @return self.
         rotateRadiansSelf: function(s) {
-          var d = Math.cos(s), m = Math.sin(s), A = this.x * d - this.y * m, T = this.x * m + this.y * d;
+          var f = Math.cos(s), m = Math.sin(s), A = this.x * f - this.y * m, T = this.x * m + this.y * f;
           return this.x = c(A), this.y = c(T), this;
         },
         // [API]
@@ -368,8 +368,8 @@ var Pe = { exports: {} };
         // @param min - min value for x, y components.
         // @param max - max value for x, y components.
         // @return self.
-        clampSelf: function(s, d) {
-          return this.x < s.x && (this.x = s.x), this.y < s.y && (this.y = s.y), this.x > d.x && (this.x = d.x), this.y > d.y && (this.y = d.y), this;
+        clampSelf: function(s, f) {
+          return this.x < s.x && (this.x = s.x), this.y < s.y && (this.y = s.y), this.x > f.x && (this.x = f.x), this.y > f.y && (this.y = f.y), this;
         },
         // [API]
         // [chainable, clone]
@@ -378,8 +378,8 @@ var Pe = { exports: {} };
         // @param min - min value for x, y components.
         // @param max - max value for x, y components.
         // @return cloned vector in range.
-        clamp: function(s, d) {
-          return this.clone().clampSelf(s, d);
+        clamp: function(s, f) {
+          return this.clone().clampSelf(s, f);
         },
         // [API]
         // [chainable, changeSelf]
@@ -450,8 +450,8 @@ var Pe = { exports: {} };
         // @param x - default value for x if undefined (0 if not defined).
         // @param y - default value for y if undefined (0 if not defined).
         // @return self.
-        repairSelf: function(s, d) {
-          return (typeof this.x != "number" || isNaN(this.x + 1)) && (this.x = s || 0), (typeof this.y != "number" || isNaN(this.y + 1)) && (this.y = d || 0), this;
+        repairSelf: function(s, f) {
+          return (typeof this.x != "number" || isNaN(this.x + 1)) && (this.x = s || 0), (typeof this.y != "number" || isNaN(this.y + 1)) && (this.y = f || 0), this;
         },
         // [API]
         // [chainable, clone]
@@ -460,8 +460,8 @@ var Pe = { exports: {} };
         // @param x - default value for x if undefined (0 if not defined).
         // @param y - default value for y if undefined (0 if not defined).
         // @return repaired clone.
-        repair: function(s, d) {
-          return this.clone().repairSelf(s, d);
+        repair: function(s, f) {
+          return this.clone().repairSelf(s, f);
         },
         // [API]
         // []
@@ -482,11 +482,11 @@ var Pe = { exports: {} };
     }();
     return l.zero = new l(0, 0), l.one = new l(1, 1), l.up = new l(0, -1), l.down = new l(0, 1), l.left = new l(-1, 0), l.right = new l(1, 0), l.upLeft = new l(-1, -1), l.downLeft = new l(-1, 1), l.upRight = new l(1, -1), l.downRight = new l(1, 1), l.prototype.magnitude = l.prototype.length, Object.freeze && (Object.freeze(l.zero), Object.freeze(l.one), Object.freeze(l.up), Object.freeze(l.down), Object.freeze(l.left), Object.freeze(l.right), Object.freeze(l.upLeft), Object.freeze(l.downLeft), Object.freeze(l.upRight), Object.freeze(l.downRight)), l;
   });
-})(Pe);
-var _n = Pe.exports;
-const G = /* @__PURE__ */ ce(_n);
-let Ut = (u = 21) => crypto.getRandomValues(new Uint8Array(u)).reduce((l, t) => (t &= 63, t < 36 ? l += t.toString(36) : t < 62 ? l += (t - 26).toString(36).toUpperCase() : t > 62 ? l += "-" : l += "_", l), "");
-const Mt = {
+})($e);
+var _n = $e.exports;
+const U = /* @__PURE__ */ ce(_n);
+let Xt = (u = 21) => crypto.getRandomValues(new Uint8Array(u)).reduce((l, t) => (t &= 63, t < 36 ? l += t.toString(36) : t < 62 ? l += (t - 26).toString(36).toUpperCase() : t > 62 ? l += "-" : l += "_", l), "");
+const Lt = {
   strokeType: "plain",
   strokeColor: "black",
   strokeWidth: 1,
@@ -498,7 +498,7 @@ const Mt = {
   properties: {
     type: "arrow",
     style: {
-      ...Mt
+      ...Lt
     }
   },
   geometry: {
@@ -518,13 +518,13 @@ const Mt = {
   // tail: 'arrow-plain',
   // start: { x: 0, y: 0 },
   // end: { x: 100, y: 100 }
-}, Dn = (u = 0, l = 0, t = 0, r = 0, a = { ...Mt }) => ({
-  id: Ut(),
+}, Dn = (u = 0, l = 0, t = 0, r = 0, a = { ...Lt }) => ({
+  id: Xt(),
   type: "Feature",
   properties: {
     type: "arrow",
     style: {
-      ...Mt,
+      ...Lt,
       ...a
     }
   },
@@ -536,21 +536,21 @@ const Mt = {
     ]
   }
 }), On = "http://www.w3.org/2000/svg";
-function Dt(u) {
+function Mt(u) {
   return document.createElementNS(On, u);
 }
-function $e(u) {
+function Pe(u) {
   return u.geometry.bbox || Mn(u), u.geometry.bbox;
 }
-function ct(u) {
-  const l = $e(u);
+function ut(u) {
+  const l = Pe(u);
   return {
     width: l[2] - l[0],
     height: l[3] - l[1]
   };
 }
-function ft(u) {
-  const l = $e(u);
+function ct(u) {
+  const l = Pe(u);
   return { x: l[0], y: l[1] };
 }
 function Mn(u) {
@@ -568,15 +568,15 @@ function zn(u, l, t, r, a) {
     ]
   ];
 }
-function Ot(u) {
+function zt(u) {
   const [l, t] = u.geometry.coordinates[0];
   return { x: l, y: t };
 }
-function Rt(u, l) {
+function jt(u, l) {
   const [t, r] = u.geometry.coordinates[l === "start" ? 0 : 1];
   return { x: t, y: r };
 }
-function Ft(u) {
+function qt(u) {
   const [l, t] = u.geometry.coordinates[1];
   return { x: l, y: t };
 }
@@ -586,15 +586,15 @@ function Ne(u, l, t) {
 function Re(u, l, t) {
   u.geometry.coordinates[1] = [l, t];
 }
-function qt(u) {
-  return { start: Ot(u), end: Ft(u) };
+function Vt(u) {
+  return { start: zt(u), end: qt(u) };
 }
 function bt(u, l, t, r) {
   l === "start" ? Ne(u, t, r) : Re(u, t, r);
 }
 const He = (u) => parseInt(u.getAttribute("data-handle-id") || "-1");
 function Xn(u) {
-  return jt(u).reduce(
+  return Bt(u).reduce(
     (l, t) => (l[0] = Math.min(t[0], l[0]), l[1] = Math.min(t[1], l[1]), l[2] = Math.max(t[0], l[2]), l[3] = Math.max(t[1], l[3]), l),
     [
       Number.POSITIVE_INFINITY,
@@ -604,22 +604,22 @@ function Xn(u) {
     ]
   );
 }
-function jt(u) {
+function Bt(u) {
   let l = [];
   return u.type == "Point" ? l = [u.coordinates] : u.type == "LineString" || u.type == "MultiPoint" ? l = u.coordinates : u.type == "Polygon" || u.type == "MultiLineString" ? l = u.coordinates.reduce(function(t, r) {
     return t.concat(r);
   }, []) : u.type == "MultiPolygon" ? l = u.coordinates.reduce(
     (t, r) => t.concat(r.reduce((a, c) => a.concat(c), [])),
     []
-  ) : u.type == "Feature" ? l = jt(u.geometry) : u.type == "GeometryCollection" ? l = u.geometries.reduce(
-    (t, r) => t.concat(jt(r)),
+  ) : u.type == "Feature" ? l = Bt(u.geometry) : u.type == "GeometryCollection" ? l = u.geometries.reduce(
+    (t, r) => t.concat(Bt(r)),
     []
   ) : u.type == "FeatureCollection" && (l = u.features.reduce(
-    (t, r) => t.concat(jt(r)),
+    (t, r) => t.concat(Bt(r)),
     []
   )), l;
 }
-function Ht(u, l, t) {
+function Ft(u, l, t) {
   const r = Math.atan2(u.y - l.y, u.x - l.x);
   return {
     x: l.x + t * Math.cos(r),
@@ -628,55 +628,55 @@ function Ht(u, l, t) {
 }
 function je(u, l = 5, t = 30) {
   var s;
-  const { start: r, end: a } = qt(u), c = new G(r.x, r.y), g = new G(a.x, a.y).sub(c), p = u.properties.style && u.properties.style.strokeWidth ? (s = u.properties.style) == null ? void 0 : s.strokeWidth : 0;
+  const { start: r, end: a } = Vt(u), c = new U(r.x, r.y), g = new U(a.x, a.y).sub(c), p = u.properties.style && u.properties.style.strokeWidth ? (s = u.properties.style) == null ? void 0 : s.strokeWidth : 0;
   return Math.min(t, Math.max(3 * p, g.length() * 0.1, l));
 }
 function ke(u, l, t, r) {
   const a = l.clone().normalize().invert().mul(r);
   if (!t || t === "none")
     return "";
-  const c = u.clone().add(a.rotateRadians(Math.PI / 8)), f = u.clone().add(a.rotateRadians(-Math.PI / 8)), g = `${u.x} ${u.y}`;
-  return `M ${c.x} ${c.y} L ${g} ${f.x} ${f.y} ${t === "arrow" ? "" : `${c.x} ${c.y}`}`;
+  const c = u.clone().add(a.rotateRadians(Math.PI / 8)), d = u.clone().add(a.rotateRadians(-Math.PI / 8)), g = `${u.x} ${u.y}`;
+  return `M ${c.x} ${c.y} L ${g} ${d.x} ${d.y} ${t === "arrow" ? "" : `${c.x} ${c.y}`}`;
 }
 function Ln(u, l, t, r, a) {
-  const { start: c, end: f } = qt(u), { tail: g, head: p, strokeColor: s, strokeWidth: d } = u.properties.style || t, m = new G(c.x, c.y), A = new G(f.x, f.y), T = A.clone().sub(m), S = je(u, r, a), C = Dt("path");
+  const { start: c, end: d } = Vt(u), { tail: g, head: p, strokeColor: s, strokeWidth: f } = u.properties.style || t, m = new U(c.x, c.y), A = new U(d.x, d.y), T = A.clone().sub(m), S = je(u, r, a), C = Mt("path");
   C.setAttribute("data-annotation", `${u.id}`), C.setAttribute("data-annotation-type", "arrow");
   const k = p === "arrow-plain" || g === "arrow";
-  C.setAttribute("stroke", s || "none"), C.setAttribute("stroke-width", `${d}`), C.setAttribute("fill", k ? s || "" : "none"), C.setAttribute("stroke-linecap", "round"), C.setAttribute("stroke-linejoin", "round");
-  const F = ke(m, T.clone().invert(), g, S), Y = ke(A, T, p, S), D = F + `M ${m.x} ${m.y} ${A.x} ${A.y}` + Y;
+  C.setAttribute("stroke", s || "none"), C.setAttribute("stroke-width", `${f}`), C.setAttribute("fill", k ? s || "" : "none"), C.setAttribute("stroke-linecap", "round"), C.setAttribute("stroke-linejoin", "round");
+  const F = ke(m, T.clone().invert(), g, S), X = ke(A, T, p, S), D = F + `M ${m.x} ${m.y} ${A.x} ${A.y}` + X;
   C.setAttribute("d", D), l.appendChild(C);
 }
-const B = -1, Bt = "dragging", Vt = "dragstart", St = "dragend", se = "select", oe = "unselect", Cn = "hover", Pn = "unhover", ae = "remove", le = "add", $n = "cancelDrawing", he = "update", Nn = "link";
+const q = -1, Ut = "dragging", Yt = "dragstart", St = "dragend", se = "select", oe = "unselect", Cn = "hover", $n = "unhover", ae = "remove", le = "add", Pn = "cancelDrawing", he = "update", Nn = "link";
 var Fe = { exports: {} };
 (function(u) {
   var l = Object.prototype.hasOwnProperty, t = "~";
   function r() {
   }
   Object.create && (r.prototype = /* @__PURE__ */ Object.create(null), new r().__proto__ || (t = !1));
-  function a(p, s, d) {
-    this.fn = p, this.context = s, this.once = d || !1;
+  function a(p, s, f) {
+    this.fn = p, this.context = s, this.once = f || !1;
   }
-  function c(p, s, d, m, A) {
-    if (typeof d != "function")
+  function c(p, s, f, m, A) {
+    if (typeof f != "function")
       throw new TypeError("The listener must be a function");
-    var T = new a(d, m || p, A), S = t ? t + s : s;
+    var T = new a(f, m || p, A), S = t ? t + s : s;
     return p._events[S] ? p._events[S].fn ? p._events[S] = [p._events[S], T] : p._events[S].push(T) : (p._events[S] = T, p._eventsCount++), p;
   }
-  function f(p, s) {
+  function d(p, s) {
     --p._eventsCount === 0 ? p._events = new r() : delete p._events[s];
   }
   function g() {
     this._events = new r(), this._eventsCount = 0;
   }
   g.prototype.eventNames = function() {
-    var s = [], d, m;
+    var s = [], f, m;
     if (this._eventsCount === 0)
       return s;
-    for (m in d = this._events)
-      l.call(d, m) && s.push(t ? m.slice(1) : m);
-    return Object.getOwnPropertySymbols ? s.concat(Object.getOwnPropertySymbols(d)) : s;
+    for (m in f = this._events)
+      l.call(f, m) && s.push(t ? m.slice(1) : m);
+    return Object.getOwnPropertySymbols ? s.concat(Object.getOwnPropertySymbols(f)) : s;
   }, g.prototype.listeners = function(s) {
-    var d = t ? t + s : s, m = this._events[d];
+    var f = t ? t + s : s, m = this._events[f];
     if (!m)
       return [];
     if (m.fn)
@@ -685,82 +685,82 @@ var Fe = { exports: {} };
       S[A] = m[A].fn;
     return S;
   }, g.prototype.listenerCount = function(s) {
-    var d = t ? t + s : s, m = this._events[d];
+    var f = t ? t + s : s, m = this._events[f];
     return m ? m.fn ? 1 : m.length : 0;
-  }, g.prototype.emit = function(s, d, m, A, T, S) {
+  }, g.prototype.emit = function(s, f, m, A, T, S) {
     var C = t ? t + s : s;
     if (!this._events[C])
       return !1;
-    var k = this._events[C], F = arguments.length, Y, D;
+    var k = this._events[C], F = arguments.length, X, D;
     if (k.fn) {
       switch (k.once && this.removeListener(s, k.fn, void 0, !0), F) {
         case 1:
           return k.fn.call(k.context), !0;
         case 2:
-          return k.fn.call(k.context, d), !0;
+          return k.fn.call(k.context, f), !0;
         case 3:
-          return k.fn.call(k.context, d, m), !0;
+          return k.fn.call(k.context, f, m), !0;
         case 4:
-          return k.fn.call(k.context, d, m, A), !0;
+          return k.fn.call(k.context, f, m, A), !0;
         case 5:
-          return k.fn.call(k.context, d, m, A, T), !0;
+          return k.fn.call(k.context, f, m, A, T), !0;
         case 6:
-          return k.fn.call(k.context, d, m, A, T, S), !0;
+          return k.fn.call(k.context, f, m, A, T, S), !0;
       }
-      for (D = 1, Y = new Array(F - 1); D < F; D++)
-        Y[D - 1] = arguments[D];
-      k.fn.apply(k.context, Y);
+      for (D = 1, X = new Array(F - 1); D < F; D++)
+        X[D - 1] = arguments[D];
+      k.fn.apply(k.context, X);
     } else {
-      var U = k.length, X;
-      for (D = 0; D < U; D++)
+      var Y = k.length, G;
+      for (D = 0; D < Y; D++)
         switch (k[D].once && this.removeListener(s, k[D].fn, void 0, !0), F) {
           case 1:
             k[D].fn.call(k[D].context);
             break;
           case 2:
-            k[D].fn.call(k[D].context, d);
+            k[D].fn.call(k[D].context, f);
             break;
           case 3:
-            k[D].fn.call(k[D].context, d, m);
+            k[D].fn.call(k[D].context, f, m);
             break;
           case 4:
-            k[D].fn.call(k[D].context, d, m, A);
+            k[D].fn.call(k[D].context, f, m, A);
             break;
           default:
-            if (!Y)
-              for (X = 1, Y = new Array(F - 1); X < F; X++)
-                Y[X - 1] = arguments[X];
-            k[D].fn.apply(k[D].context, Y);
+            if (!X)
+              for (G = 1, X = new Array(F - 1); G < F; G++)
+                X[G - 1] = arguments[G];
+            k[D].fn.apply(k[D].context, X);
         }
     }
     return !0;
-  }, g.prototype.on = function(s, d, m) {
-    return c(this, s, d, m, !1);
-  }, g.prototype.once = function(s, d, m) {
-    return c(this, s, d, m, !0);
-  }, g.prototype.removeListener = function(s, d, m, A) {
+  }, g.prototype.on = function(s, f, m) {
+    return c(this, s, f, m, !1);
+  }, g.prototype.once = function(s, f, m) {
+    return c(this, s, f, m, !0);
+  }, g.prototype.removeListener = function(s, f, m, A) {
     var T = t ? t + s : s;
     if (!this._events[T])
       return this;
-    if (!d)
-      return f(this, T), this;
+    if (!f)
+      return d(this, T), this;
     var S = this._events[T];
     if (S.fn)
-      S.fn === d && (!A || S.once) && (!m || S.context === m) && f(this, T);
+      S.fn === f && (!A || S.once) && (!m || S.context === m) && d(this, T);
     else {
       for (var C = 0, k = [], F = S.length; C < F; C++)
-        (S[C].fn !== d || A && !S[C].once || m && S[C].context !== m) && k.push(S[C]);
-      k.length ? this._events[T] = k.length === 1 ? k[0] : k : f(this, T);
+        (S[C].fn !== f || A && !S[C].once || m && S[C].context !== m) && k.push(S[C]);
+      k.length ? this._events[T] = k.length === 1 ? k[0] : k : d(this, T);
     }
     return this;
   }, g.prototype.removeAllListeners = function(s) {
-    var d;
-    return s ? (d = t ? t + s : s, this._events[d] && f(this, d)) : (this._events = new r(), this._eventsCount = 0), this;
+    var f;
+    return s ? (f = t ? t + s : s, this._events[f] && d(this, f)) : (this._events = new r(), this._eventsCount = 0), this;
   }, g.prototype.off = g.prototype.removeListener, g.prototype.addListener = g.prototype.on, g.prefixed = t, g.EventEmitter = g, u.exports = g;
 })(Fe);
 var Rn = Fe.exports;
-const qe = /* @__PURE__ */ ce(Rn);
-class Be extends qe {
+const Be = /* @__PURE__ */ ce(Rn);
+class qe extends Be {
   constructor(t, r) {
     super();
     v(this, "ogma");
@@ -768,8 +768,8 @@ class Be extends qe {
     // layer to draw elements
     v(this, "layer");
     v(this, "editor");
-    v(this, "selectedId", B);
-    v(this, "hoveredId", B);
+    v(this, "selectedId", q);
+    v(this, "hoveredId", q);
     // used to remember ogma options before we change them
     v(this, "ogmaOptions");
     v(this, "shouldDetect");
@@ -777,15 +777,15 @@ class Be extends qe {
     v(this, "showeditorOnHover");
     v(this, "maxHandleScale", 1.5);
     v(this, "_onKeyUp", (t) => {
-      t.code === 27 && this.selectedId !== B ? this.unselect() : (t.code === 46 || t.code === 8) && this.selectedId !== B && this._canRemove() && this.remove(this.selectedId);
+      t.code === 27 && this.selectedId !== q ? this.unselect() : (t.code === 46 || t.code === 8) && this.selectedId !== q && this._canRemove() && this.remove(this.selectedId);
     });
     v(this, "_onClickMouseMove", (t) => {
       if (!t.domEvent || this.isDragging || !this.shouldDetect)
         return;
       const r = this.ogma.view.screenToGraphCoordinates(t), a = this.shouldDetect || !this.shouldDetect && +this.selectedId > -1 ? this.detect(r, 0) : void 0;
-      t.domEvent.type === "mousemove" ? a ? this.hover(a.id) : this.hoveredId !== B && this.unhover() : a ? this.select(a.id) : this.selectedId !== B && this.unselect();
+      t.domEvent.type === "mousemove" ? a ? this.hover(a.id) : this.hoveredId !== q && this.unhover() : a ? this.select(a.id) : this.selectedId !== q && 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("newFrame", () => {
+    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: (a) => this.draw(a)
@@ -801,7 +801,7 @@ class Be extends qe {
    */
   add(t) {
     const r = this.getDefaultOptions(), a = Object.assign(t, {
-      id: t.id === void 0 ? Ut() : t.id,
+      id: t.id === void 0 ? Xt() : t.id,
       type: t.type,
       properties: {
         ...r.properties,
@@ -845,13 +845,13 @@ class Be extends qe {
     Object.keys(r).forEach((c) => {
       if (c !== "id")
         if (c === "properties") {
-          const f = r.properties || { style: {} };
+          const d = r.properties || { style: {} };
           t.properties = {
             ...t.properties || {},
-            ...f || {},
+            ...d || {},
             style: {
               ...t.properties.style || {},
-              ...f.style || {}
+              ...d.style || {}
             }
           };
         } else
@@ -882,15 +882,15 @@ class Be extends qe {
     r && (this.showeditorOnHover && this.editor.show(), this.hoveredId = t, this.refreshEditor(), this.layer.refresh(), this.emit(Cn, r));
   }
   getSelectedFeature() {
-    return this.selectedId === B ? null : this.getById(this.selectedId);
+    return this.selectedId === q ? null : this.getById(this.selectedId);
   }
   unselect() {
     const t = this.getById(this.selectedId);
-    return t && this.emit(oe, t), this.selectedId = B, this.hoveredId === B && this.editor.hide(), this.layer.refresh(), this;
+    return t && this.emit(oe, t), this.selectedId = q, this.hoveredId === q && this.editor.hide(), this.layer.refresh(), this;
   }
   unhover() {
     const t = this.getById(this.hoveredId);
-    return this.emit(Pn, t), this.hoveredId = B, this.selectedId === B && this.editor.hide(), this.layer.refresh(), this;
+    return this.emit($n, t), this.hoveredId = q, this.selectedId === q && this.editor.hide(), this.layer.refresh(), this;
   }
   /**
    * @method remove
@@ -950,7 +950,7 @@ class Be extends qe {
   }
 }
 const Te = "handle-line", Ie = "handle-start", _e = "handle-end";
-class Hn extends Be {
+class Hn extends qe {
   constructor(t, r = {}) {
     super(
       t,
@@ -963,7 +963,7 @@ class Hn extends Be {
   `
     );
     // active handle id
-    v(this, "draggedHandle", B);
+    v(this, "draggedHandle", q);
     v(this, "start", { x: 0, y: 0 });
     v(this, "end", { x: 0, y: 0 });
     v(this, "arrow", { ...Ee });
@@ -977,14 +977,14 @@ class Hn extends Be {
       r && (this.startDragging(r, t.clientX, t.clientY), this.draggedHandle = He(t.target));
     });
     v(this, "onMouseUp", () => {
-      this.draggedHandle !== -1 && (this.restoreDragging(), this.isDragging = !1, this.draggedHandle = B, this.emit(St, this.arrow));
+      this.draggedHandle !== -1 && (this.restoreDragging(), this.isDragging = !1, this.draggedHandle = q, this.emit(St, this.arrow));
     });
     v(this, "onMouseMove", (t) => {
-      if (!this.isDragging || this.draggedHandle === B)
+      if (!this.isDragging || this.draggedHandle === q)
         return;
-      const r = this.handles[this.draggedHandle], a = this.ogma.view.getAngle(), { x: c, y: f } = new G(t.clientX - this.startX, t.clientY - this.startY).divScalar(this.ogma.view.getZoom()).rotateRadians(a), g = r.id === Te, p = r.id === Ie, s = r.id === _e;
-      (g || p) && Ne(this.arrow, this.start.x + c, this.start.y + f), (g || s) && Re(this.arrow, this.end.x + c, this.end.y + f), this.emit(
-        Bt,
+      const r = this.handles[this.draggedHandle], a = this.ogma.view.getAngle(), { x: c, y: d } = new U(t.clientX - this.startX, t.clientY - this.startY).divScalar(this.ogma.view.getZoom()).rotateRadians(a), g = r.id === Te, p = r.id === Ie, s = r.id === _e;
+      (g || p) && Ne(this.arrow, this.start.x + c, this.start.y + d), (g || s) && Re(this.arrow, this.end.x + c, this.end.y + d), this.emit(
+        Ut,
         this.arrow,
         g ? "line" : p ? "start" : "end"
       ), this.refreshEditor(), this.layer.refresh();
@@ -1001,49 +1001,53 @@ class Hn extends Be {
    * @param y
    * @param arrow
    */
-  startDrawing(t, r, a = Dn(t, r, t, r, Mt)) {
+  startDrawing(t, r, a = Dn(t, r, t, r, Lt)) {
     var g;
     this.add(a), this.hoveredId = a.id;
-    const c = this.ogma.view.graphToScreenCoordinates({ x: t, y: r }), f = ((g = this.ogma.getContainer()) == null ? void 0 : g.getBoundingClientRect()) || { left: 0, top: 0 };
-    this.startDragging(this.getById(a.id), c.x + (f == null ? void 0 : f.left), c.y + f.top), this.draggedHandle = 2;
+    const c = this.ogma.view.graphToScreenCoordinates({ x: t, y: r }), d = ((g = this.ogma.getContainer()) == null ? void 0 : g.getBoundingClientRect()) || { left: 0, top: 0 };
+    this.startDragging(this.getById(a.id), c.x + (d == null ? void 0 : d.left), c.y + d.top), this.draggedHandle = 2;
   }
   cancelDrawing() {
-    this.isDragging && (this.remove(this.arrow.id), this.emit(St, this.arrow), this.restoreDragging(), this.isDragging = !1, this.draggedHandle = B);
+    this.isDragging && (this.remove(this.arrow.id), this.emit(St, this.arrow), this.restoreDragging(), this.isDragging = !1, this.draggedHandle = q);
   }
   startDragging(t, r, a) {
-    this.selectedId !== t.id && this.select(this.hoveredId), this.arrow = t, this.startX = r, this.startY = a, this.start = Ot(this.arrow), this.end = Ft(this.arrow), this.disableDragging(), this.emit(Vt, this.arrow), this.isDragging = !0;
+    this.selectedId !== t.id && this.select(this.hoveredId), this.arrow = t, this.startX = r, this.startY = a, this.start = zt(this.arrow), this.end = qt(this.arrow), this.disableDragging(), this.emit(Yt, this.arrow), this.isDragging = !0;
   }
   detect(t, r = 0) {
     return this.elements.find((a) => {
-      const { start: c, end: f } = qt(a), g = new G(t.x, t.y).sub(
-        new G((c.x + f.x) / 2, (c.y + f.y) / 2)
-      ), p = new G(f.x, f.y).sub(new G(c.x, c.y)), s = p.length(), d = p.normalize(), m = je(a);
-      return Math.abs(d.dot(g)) < s / 2 + r && Math.abs(d.rotateRadians(Math.PI / 2).dot(g)) < m / 2 + r;
+      const { start: c, end: d } = Vt(a), g = new U(t.x, t.y).sub(
+        new U((c.x + d.x) / 2, (c.y + d.y) / 2)
+      ), p = new U(d.x, d.y).sub(new U(c.x, c.y)), s = p.length(), f = p.normalize(), m = je(a);
+      return Math.abs(f.dot(g)) < s / 2 + r && Math.abs(f.rotateRadians(Math.PI / 2).dot(g)) < m / 2 + r;
     });
   }
   refreshEditor() {
     if (+this.selectedId < 0 && +this.hoveredId < 0)
       return;
-    const t = this.selectedId !== B ? this.getById(this.selectedId) : this.getById(this.hoveredId), r = qt(t), a = this.ogma.view.graphToScreenCoordinates(r.start), c = this.ogma.view.graphToScreenCoordinates(r.end), f = Math.min(this.ogma.view.getZoom(), this.maxHandleScale), [g, p, s] = Array.prototype.slice.call(
+    const t = this.selectedId !== q ? this.getById(this.selectedId) : this.getById(this.hoveredId), r = Vt(t), a = this.ogma.view.graphToScreenCoordinates(r.start), c = this.ogma.view.graphToScreenCoordinates(r.end), d = Math.min(this.ogma.view.getZoom(), this.maxHandleScale), [g, p, s] = Array.prototype.slice.call(
       this.editor.element.querySelectorAll(".handle")
     );
-    p.style.transform = `translate(${a.x}px, ${a.y}px) translate(-50%, -50%) scale(${f})`, s.style.transform = `translate(${c.x}px, ${c.y}px) translate(-50%, -50%) scale(${f}`;
-    const d = {
+    p.style.transform = `translate(${a.x}px, ${a.y}px) translate(-50%, -50%) scale(${d})`, s.style.transform = `translate(${c.x}px, ${c.y}px) translate(-50%, -50%) scale(${d}`;
+    const f = {
       x: (c.x + a.x) / 2,
       y: (c.y + a.y) / 2
-    }, m = new G(c.x - a.x, c.y - a.y), A = m.mul(1 / m.length()), T = Math.atan2(A.y, A.x);
-    g.style.width = `${m.length()}px`, g.style.left = `${d.x}px`, g.style.top = `${d.y}px`, g.style.transform = `translate(-50%, -50%) rotate(${T}rad)`;
+    }, m = new U(c.x - a.x, c.y - a.y), A = m.mul(1 / m.length()), T = Math.atan2(A.y, A.x);
+    g.style.width = `${m.length()}px`, g.style.left = `${f.x}px`, g.style.top = `${f.y}px`, g.style.transform = `translate(-50%, -50%) rotate(${T}rad)`;
   }
   getDefaultOptions() {
     return Ee;
   }
   draw(t) {
     t.innerHTML = "";
-    const r = Dt("g");
-    this.elements.forEach(
-      (a) => Ln(a, r, Mt, this.minArrowHeight, this.maxArrowHeight)
+    const r = Mt("g"), a = this.ogma.view.getAngle();
+    r.setAttribute("transform", `rotate(${-a * (180 / Math.PI)})`), this.elements.forEach(
+      (c) => Ln(c, r, Lt, this.minArrowHeight, this.maxArrowHeight)
     ), t.appendChild(r);
   }
+  refreshDrawing() {
+    const t = this.ogma.view.getAngle();
+    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);
   }
@@ -1082,7 +1086,7 @@ const At = {
   handleSize: 3.5,
   placeholder: "Your text..."
 }, jn = (u = 0, l = 0, t = 100, r = 50, a = "", c = { ...At }) => ({
-  id: Ut(),
+  id: Xt(),
   type: "Feature",
   properties: {
     type: "text",
@@ -1119,7 +1123,7 @@ var Ve = { exports: {} };
       }, a(e);
     }
     t.d(r, { default: () => Sn });
-    var c = /^((?:[a-z\d-]+\s+)*)([\d.]+(%|em|px)|(?:x+-)?large|(?:x+-)?small|medium)(?:\s*\/\s*(normal|[\d.]+(%|px|em)?))?(\s.+)?$/, f = /\bsmall-caps\b/, g = /\b(?:italic|oblique)\b/, p = /\bbold(?:er)?\b/, s = 13.3333333, d = { "xx-small": 9, "x-small": 10, smaller: 13.3333, small: 13, medium: 16, large: 18, larger: 19.2, "x-large": 24, "xx-large": 32 };
+    var c = /^((?:[a-z\d-]+\s+)*)([\d.]+(%|em|px)|(?:x+-)?large|(?:x+-)?small|medium)(?:\s*\/\s*(normal|[\d.]+(%|px|em)?))?(\s.+)?$/, d = /\bsmall-caps\b/, g = /\b(?:italic|oblique)\b/, p = /\bbold(?:er)?\b/, s = 13.3333333, f = { "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 m(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;
@@ -1128,10 +1132,10 @@ var Ve = { exports: {} };
     function T(e) {
       var n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, o = c.exec(e);
       n.family = (o[6] || "").trim();
-      var i = d[o[2]] || parseFloat(o[2]);
+      var i = f[o[2]] || parseFloat(o[2]);
       o[3] === "%" ? i *= 0.16 : o[3] === "em" ? i *= 16 : o[3] === "pt" && (i *= s), n.size = i;
       var h = parseFloat(o[4]);
-      if (h !== "normal" && h !== "inherit" && h ? o[5] && o[5] !== "em" ? o[5] === "pt" ? n.height = h * s : o[5] === "%" ? n.height = 0.01 * i : n.height = h : n.height = h * i : n.height = Math.round(i * (7 / 6)), f.test(o[1]) && (n.variant = "small-caps"), g.test(o[1]) && (n.style = "italic"), p.test(o[1]))
+      if (h !== "normal" && h !== "inherit" && h ? o[5] && o[5] !== "em" ? o[5] === "pt" ? n.height = h * s : o[5] === "%" ? n.height = 0.01 * i : n.height = h : n.height = h * i : n.height = Math.round(i * (7 / 6)), d.test(o[1]) && (n.variant = "small-caps"), g.test(o[1]) && (n.style = "italic"), p.test(o[1]))
         n.weight = "bold";
       else {
         var y = parseInt(/\b(\d+)\b/.exec(o[1]), 10);
@@ -1169,33 +1173,33 @@ var Ve = { exports: {} };
         k[n] = o, /\bmonospace\b/.test(o.family) ? o.size *= 0.6 : (o.size *= 0.45, o.weight && (o.size *= 1.18));
       }
       return e.length * k[n].size;
-    }), Y = {}, D = { trim: !0, collapse: !0 };
-    function U(e, n, o) {
+    }), X = {}, D = { trim: !0, collapse: !0 };
+    function Y(e, n, o) {
       var i = Object.assign({}, D, o), h = String(e);
       if (!h)
         return 0;
       if (h in C) {
         var y = n.id + "/" + h;
-        return y in Y || (Y[y] = F("_".concat(h, "_"), n) - F("__", n)), Y[y];
+        return y in X || (X[y] = F("_".concat(h, "_"), n) - F("__", n)), X[y];
       }
       return i.trim && i.collapse ? i.trim ? h = h.trim() : i.collapse && (h = h.replace(/\s+/g, " ")) : h = h.replace(/\n/g, " "), F(h, n) + n.size * (e.tracking || 0);
     }
-    function X(e) {
-      return X = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(n) {
+    function G(e) {
+      return G = 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;
-      }, X(e);
+      }, G(e);
     }
-    function Yt(e, n) {
+    function Et(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 && Xt(e, n);
+      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 Xt(e, n) {
-      return Xt = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, i) {
+    function kt(e, n) {
+      return kt = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, i) {
         return o.__proto__ = i, o;
-      }, Xt(e, n);
+      }, kt(e, n);
     }
     function Gt(e) {
       var n = function() {
@@ -1211,9 +1215,9 @@ var Ve = { exports: {} };
         }
       }();
       return function() {
-        var o, i = zt(e);
+        var o, i = Ct(e);
         if (n) {
-          var h = zt(this).constructor;
+          var h = Ct(this).constructor;
           o = Reflect.construct(i, arguments, h);
         } else
           o = i.apply(this, arguments);
@@ -1221,7 +1225,7 @@ var Ve = { exports: {} };
       };
     }
     function Ue(e, n) {
-      if (n && (X(n) === "object" || typeof n == "function"))
+      if (n && (G(n) === "object" || typeof n == "function"))
         return n;
       if (n !== void 0)
         throw new TypeError("Derived constructors may only return object or undefined");
@@ -1231,12 +1235,12 @@ var Ve = { exports: {} };
         return o;
       }(e);
     }
-    function zt(e) {
-      return zt = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(n) {
+    function Ct(e) {
+      return Ct = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(n) {
         return n.__proto__ || Object.getPrototypeOf(n);
-      }, zt(e);
+      }, Ct(e);
     }
-    function Lt(e, n) {
+    function $t(e, n) {
       if (!(e instanceof n))
         throw new TypeError("Cannot call a class as a function");
     }
@@ -1244,29 +1248,29 @@ var Ve = { exports: {} };
       for (var o = 0; o < n.length; o++) {
         var i = n[o];
         i.enumerable = i.enumerable || !1, i.configurable = !0, "value" in i && (i.writable = !0), Object.defineProperty(e, (h = function(y, w) {
-          if (X(y) !== "object" || y === null)
+          if (G(y) !== "object" || y === null)
             return y;
           var x = y[Symbol.toPrimitive];
           if (x !== void 0) {
             var b = x.call(y, w);
-            if (X(b) !== "object")
+            if (G(b) !== "object")
               return b;
             throw new TypeError("@@toPrimitive must return a primitive value.");
           }
           return String(y);
-        }(i.key, "string"), X(h) === "symbol" ? h : String(h)), i);
+        }(i.key, "string"), G(h) === "symbol" ? h : String(h)), i);
       }
       var h;
     }
-    function Ct(e, n, o) {
+    function Pt(e, n, o) {
       return n && ue(e.prototype, n), o && ue(e, o), Object.defineProperty(e, "prototype", { writable: !1 }), e;
     }
     var N = function() {
       function e() {
         var n = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
-        Lt(this, e), this.value = n, this.weight = null, this.style = null, this.font = null, this.href = null, this.sub = !1, this.sup = !1;
+        $t(this, e), this.value = n, this.weight = null, this.style = null, this.font = null, this.href = null, this.sub = !1, this.sup = !1;
       }
-      return Ct(e, [{ key: "clone", value: function() {
+      return Pt(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() {
@@ -1274,36 +1278,36 @@ var Ve = { exports: {} };
       } }, { key: "toString", value: function() {
         return this.value;
       } }]), e;
-    }(), Et = function(e) {
-      Yt(o, e);
+    }(), Tt = function(e) {
+      Et(o, e);
       var n = Gt(o);
       function o() {
-        return Lt(this, o), n.apply(this, arguments);
+        return $t(this, o), n.apply(this, arguments);
       }
-      return Ct(o);
+      return Pt(o);
     }(N), nt = function(e) {
-      Yt(o, e);
+      Et(o, e);
       var n = Gt(o);
       function o() {
-        return Lt(this, o), n.apply(this, arguments);
+        return $t(this, o), n.apply(this, arguments);
       }
-      return Ct(o);
+      return Pt(o);
     }(N), pt = function(e) {
-      Yt(o, e);
+      Et(o, e);
       var n = Gt(o);
       function o() {
-        return Lt(this, o), n.apply(this, arguments);
+        return $t(this, o), n.apply(this, arguments);
       }
-      return Ct(o);
+      return Pt(o);
     }(N), Zt = /^[\n\r\t\x20\xA0\u2000-\u200B\u205F\u3000]/, Ye = /^[^\n\r\t\u0020\u2000-\u200B\u205F\u3000]{2,}/, de = /^[\xA0\u2011\u202F\u2060\uFEFF]/, Xe = /^(?:[;\xAD%?…]|,(?!\d))/, Ge = /^[´±°¢£¤$¥\u2212]/;
-    function Pt(e, n) {
+    function Nt(e, n) {
       n !== !1 && (e = e.trim());
       for (var o, i, h = [], y = e.charAt(0), w = 0, x = 1, b = e.length; x < b; x++) {
         o = e.charAt(x), i = e.charAt(x + 1);
         var E = Zt.test(y), O = Zt.test(o), M = O || E, I = void 0;
         if ((Ge.test(o) && !de.test(y) || Xe.test(y + i) && !de.test(o)) && (M = !0), y !== "-" && y !== "‐" && y !== "–" && y !== "—" || ((I = Zt.test(e.charAt(x - 2))) && !O && (M = !1), !I && Ye.test(o + i) && (M = !0)), M) {
           var z = e.slice(w, x);
-          /\u00AD$/.test(z) ? (h.push(new N(z.slice(0, -1))), h.push(new pt())) : (h.push(new N(z)), h.push(new Et())), w = x;
+          /\u00AD$/.test(z) ? (h.push(new N(z.slice(0, -1))), h.push(new pt())) : (h.push(new N(z)), h.push(new Tt())), w = x;
         }
         y = o;
       }
@@ -1396,7 +1400,7 @@ var Ve = { exports: {} };
     }
     function me(e, n, o) {
       for (var i, h, y = e.width; y + o.width > n && e.length; )
-        h = (i = e[e.length - 1]).width, i.width > o.width ? (i.value = i.value.slice(0, -1), i.width = U(i, i.font), y += i.width) : e.pop(), y -= h;
+        h = (i = e[e.length - 1]).width, i.width > o.width ? (i.value = i.value.slice(0, -1), i.width = Y(i, i.font), y += i.width) : e.pop(), y -= h;
       e[e.length - 1] instanceof pt && e.pop(), i = e[e.length - 1] || i || {}, o.font = S(o.font, i.bold, i.italic, ""), o.href = e.length ? i.href : null, o.rel = e.length ? i.rel : null, o.target = e.length ? i.target : null, e.push(o);
     }
     function vt(e) {
@@ -1435,30 +1439,30 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       if (e.length) {
         var b = i.height, E = n.valign(), O = n.height()(), M = n.width()(0), I = !isFinite(M) && e.length === 1, z = I ? null : n.x(), R = vt(b / h), Q = I ? null : vt(b / (1.15 * h + (b - h) / 2));
         if (pn[E] && isFinite(O)) {
-          var P = E === "bottom" ? 1 : 0.5;
-          Q += (O * P - b * e.length * P) / h;
+          var $ = E === "bottom" ? 1 : 0.5;
+          Q += (O * $ - b * e.length * $) / h;
         }
         var L = w === "justify", H = 0;
         w === "right" ? H = M : w === "center" && (H = M / 2);
-        for (var $ = [], tt = "tspan", Z = null, j = "", _ = function() {
+        for (var P = [], tt = "tspan", Z = null, j = "", _ = function() {
           if (j) {
             var gt = x(tt, Z, j);
-            $.push(gt);
+            P.push(gt);
           }
           tt = "tspan", Z = null, j = "";
         }, it = 0, et = e.length; it < et; it++) {
-          var at = "", ut = "", st = 0, lt = e[it];
+          var at = "", dt = "", st = 0, lt = e[it];
           if (lt.length) {
-            $ = [];
-            for (var xt = 0, It = 0, ht = void 0, W = 0, $t = lt.length; W < $t; W++) {
-              var q = lt[W], K = q.font;
-              q.whitespace && xt++, It += q.width, W && !q.tracking && !st && Kt(K.id, at) && Kt(q.class, ut) && Kt(ht, q.href) ? j += q.value : (_(), j = q.value, Z = { fontFamily: K.family !== y ? K.family : null, fontSize: K.size !== h ? K.size : null, fontWeight: K.weight || null, fontStyle: K.style || null, fontVariant: K.variant !== "normal" && K.variant || null, fill: K.color || null, baselineShift: K.baseline ? 100 * K.baseline + "%" : null, className: q.class || null }, st && (Z.dx = vt(st), st = 0), q.tracking && (st = K.size * q.tracking), q.href && !ht ? (ht = q.href, tt = "a", Z.href = ht, Z.rel = q.rel, Z.target = q.target) : ht = null, at = K.id, ut = q.class);
+            P = [];
+            for (var xt = 0, Dt = 0, ht = void 0, W = 0, Rt = lt.length; W < Rt; W++) {
+              var B = lt[W], K = B.font;
+              B.whitespace && xt++, Dt += B.width, W && !B.tracking && !st && Kt(K.id, at) && Kt(B.class, dt) && Kt(ht, B.href) ? j += B.value : (_(), j = B.value, Z = { fontFamily: K.family !== y ? K.family : null, fontSize: K.size !== h ? K.size : null, fontWeight: K.weight || null, fontStyle: K.style || null, fontVariant: K.variant !== "normal" && K.variant || null, fill: K.color || null, baselineShift: K.baseline ? 100 * K.baseline + "%" : null, className: B.class || null }, st && (Z.dx = vt(st), st = 0), B.tracking && (st = K.size * B.tracking), B.href && !ht ? (ht = B.href, tt = "a", Z.href = ht, Z.rel = B.rel, Z.target = B.target) : ht = null, at = K.id, dt = B.class);
             }
             if (_(), I)
-              o.push.apply(o, ve($));
+              o.push.apply(o, ve(P));
             else {
-              var Nt = null, _t = it === et - 1 || lt[lt.length - 1] instanceof nt;
-              L && lt.length > 1 && !_t && (Nt = vt((M - It) / xt)), o.push(x.apply(void 0, ["tspan", { wordSpacing: Nt, x: z(it) + H, dy: vt(it ? R : Q) + "em" }].concat(ve($))));
+              var Ht = null, Ot = it === et - 1 || lt[lt.length - 1] instanceof nt;
+              L && lt.length > 1 && !Ot && (Ht = vt((M - Dt) / xt)), o.push(x.apply(void 0, ["tspan", { wordSpacing: Ht, x: z(it) + H, dy: vt(it ? R : Q) + "em" }].concat(ve(P))));
             }
           } else
             o.push(x("tspan", { x: z(it), dy: vt(it ? R : Q) + "em" }, " "));
@@ -1476,24 +1480,24 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           M += x * I - z * I;
         }
         e.forEach(function(R, Q) {
-          var P = n.x()(Q), L = Q * h + M, H = 0, $ = 0;
+          var $ = n.x()(Q), L = Q * h + M, H = 0, P = 0;
           R.forEach(function(j) {
-            j.whitespace && H++, $ += j.width;
+            j.whitespace && H++, P += j.width;
           });
           var tt = 0, Z = Q === e.length - 1 || R[R.length - 1] instanceof nt;
-          O && R.length > 1 && !Z && (tt = (b - $) / H), R.forEach(function(j) {
+          O && R.length > 1 && !Z && (tt = (b - P) / H), R.forEach(function(j) {
             o.font = j.font;
             var _ = j.font, it = _.baseline ? y * -_.baseline + 0.15 * y : 0;
-            o.fillStyle = function(ut, st) {
-              return ut.color ? ut.color : st.href ? "#00C" : "#000";
+            o.fillStyle = function(dt, st) {
+              return dt.color ? dt.color : st.href ? "#00C" : "#000";
             }(_, j);
             var et = 0;
-            if (E === "right" ? et += b - $ : E === "center" ? et += b / 2 - $ / 2 : E === "justify" && (j.whitespace || j instanceof nt) && (P += tt), o.fillText(j.value, P + et, L + it), j.href) {
+            if (E === "right" ? et += b - P : E === "center" ? et += b / 2 - P / 2 : E === "justify" && (j.whitespace || j instanceof nt) && ($ += tt), o.fillText(j.value, $ + et, L + it), j.href) {
               o.beginPath(), o.strokeStyle = o.fillStyle;
               var at = Math.floor(L + 0.45 * y) + 0.5;
-              o.moveTo(P + et, at), o.lineTo(P + et + j.width, at), o.stroke();
+              o.moveTo($ + et, at), o.lineTo($ + et + j.width, at), o.stroke();
             }
-            P += j.width;
+            $ += j.width;
           });
         });
       }
@@ -1512,28 +1516,28 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       }
       return n;
     }
-    function kt(e) {
-      return kt = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(n) {
+    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;
-      }, kt(e);
+      }, It(e);
     }
     function vn(e, n) {
       for (var o = 0; o < n.length; o++) {
         var i = n[o];
         i.enumerable = i.enumerable || !1, i.configurable = !0, "value" in i && (i.writable = !0), Object.defineProperty(e, (h = function(y, w) {
-          if (kt(y) !== "object" || y === null)
+          if (It(y) !== "object" || y === null)
             return y;
           var x = y[Symbol.toPrimitive];
           if (x !== void 0) {
             var b = x.call(y, w);
-            if (kt(b) !== "object")
+            if (It(b) !== "object")
               return b;
             throw new TypeError("@@toPrimitive must return a primitive value.");
           }
           return String(y);
-        }(i.key, "string"), kt(h) === "symbol" ? h : String(h)), i);
+        }(i.key, "string"), It(h) === "symbol" ? h : String(h)), i);
       }
       var h;
     }
@@ -1561,48 +1565,48 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         var h = this, y = this.props.parser(String(i)), w = this.font(), x = function(b, E, O) {
           if (!b.length)
             return [];
-          var M = E.height(), I = E.width(), z = E.overflowLine(), R = E.overflowWrap(), Q = S(O, !0, !1), P = isFinite(M()) ? Math.floor(M() / O.height) : 1 / 0;
-          if (!M() && !I(0) || !P)
+          var M = E.height(), I = E.width(), z = E.overflowLine(), R = E.overflowWrap(), Q = S(O, !0, !1), $ = isFinite(M()) ? Math.floor(M() / O.height) : 1 / 0;
+          if (!M() && !I(0) || !$)
             return [];
-          for (var L = 0, H = 0, $ = 0, tt = [], Z = [], j = !1; L < b.length && H < P; ) {
+          for (var L = 0, H = 0, P = 0, tt = [], Z = [], j = !1; L < b.length && H < $; ) {
             var _ = b[L], it = dn(_, O);
-            if (_.width = U(_, it), _.font = it, _.line = H, _.whitespace = _.value in C, _.value && (_.value = _.value.replace(un, " ")), !(!$ && _.whitespace || j && _.whitespace))
+            if (_.width = Y(_, it), _.font = it, _.line = H, _.whitespace = _.value in C, _.value && (_.value = _.value.replace(un, " ")), !(!P && _.whitespace || j && _.whitespace))
               if (_ instanceof nt)
-                $ = 0, Z = [], tt.push(L + 1), H++;
-              else if (_ instanceof Et || _ instanceof pt)
-                Z.push({ index: L, width: $ });
-              else if (_.whitespace || $ + _.width < I(H))
-                $ += _.width;
+                P = 0, Z = [], tt.push(L + 1), H++;
+              else if (_ instanceof Tt || _ instanceof pt)
+                Z.push({ index: L, width: P });
+              else if (_.whitespace || P + _.width < I(H))
+                P += _.width;
               else if (Z.length) {
                 var et = void 0, at = void 0;
                 do {
                   at = !0, et = Z.pop();
-                  var ut = b[et.index], st = void 0;
-                  ut instanceof pt && (st = U("-", ut.font), et.width + st > I(H) && (at = !Z.length));
+                  var dt = b[et.index], st = void 0;
+                  dt instanceof pt && (st = Y("-", dt.font), et.width + st > I(H) && (at = !Z.length));
                 } while (!at);
-                tt.push(et.index + 1), $ = 0, H++, L = et.index, Z = [];
+                tt.push(et.index + 1), P = 0, H++, L = et.index, Z = [];
               } else if (R === "break-word") {
                 var lt = I(H);
-                if ($ + _.width > lt) {
+                if (P + _.width > lt) {
                   var xt = _.clone();
                   do
-                    _.value = _.value.slice(0, -1), _.width = U(_, _.font), $ += _.width;
+                    _.value = _.value.slice(0, -1), _.width = Y(_, _.font), P += _.width;
                   while (_.value && _.width > lt);
-                  xt.value = xt.value.slice(_.value.length), b.splice(L + 1, 0, new Et(), xt);
+                  xt.value = xt.value.slice(_.value.length), b.splice(L + 1, 0, new Tt(), xt);
                 }
-                tt.push(L + 1), $ = 0, H++;
+                tt.push(L + 1), P = 0, H++;
               } else
-                $ += _.width;
+                P += _.width;
             L++, j = _.whitespace;
           }
           L !== tt[tt.length - 1] && tt.push(L);
-          var It = 0, ht = 0, W = tt.map(function(gt) {
-            for (var J, yt = It; (J = b[yt]) && (J.whitespace || !J.value); )
+          var Dt = 0, ht = 0, W = tt.map(function(gt) {
+            for (var J, yt = Dt; (J = b[yt]) && (J.whitespace || !J.value); )
               yt++;
-            for (var dt = gt, ne = null; dt > yt && (J = b[dt - 1]) && (J.whitespace || !(J.value || J instanceof pt)); )
-              J instanceof nt && (ne = J), dt--;
-            J instanceof pt && (J.value = "-", J.width = U("-", J.font)), It = gt;
-            var wt = b.slice(yt, dt).filter(function(ie) {
+            for (var ft = gt, ne = null; ft > yt && (J = b[ft - 1]) && (J.whitespace || !(J.value || J instanceof pt)); )
+              J instanceof nt && (ne = J), ft--;
+            J instanceof pt && (J.value = "-", J.width = Y("-", J.font)), Dt = gt;
+            var wt = b.slice(yt, ft).filter(function(ie) {
               return ie.value;
             });
             return ne && wt.push(ne), wt.width = wt.reduce(function(ie, En) {
@@ -1610,19 +1614,19 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
             }, 0), wt.width > ht && (ht = wt.width), wt;
           });
           if (W.hasLineOverflow = !1, z) {
-            var $t = z === "ellipsis" ? "…" : z;
+            var Rt = z === "ellipsis" ? "…" : z;
             W.forEach(function(gt, J) {
               var yt = I(J);
               if (gt.width > yt) {
-                var dt = new N($t);
-                dt.font = O, dt.width = U($t, Q), me(gt, yt, dt), W.hasLineOverflow = !0;
+                var ft = new N(Rt);
+                ft.font = O, ft.width = Y(Rt, Q), me(gt, yt, ft), W.hasLineOverflow = !0;
               }
             });
           }
-          var q = E.overflow() === "ellipsis" ? "…" : E.overflow();
-          if (q && L !== b.length) {
-            var K = I(W.length - 1), Nt = W[W.length - 1], _t = new N(q);
-            _t.font = O, _t.width = U(q, Q), me(Nt, K, _t), W.hasOverflow = !0;
+          var B = E.overflow() === "ellipsis" ? "…" : E.overflow();
+          if (B && L !== b.length) {
+            var K = I(W.length - 1), Ht = W[W.length - 1], Ot = new N(B);
+            Ot.font = O, Ot.width = Y(B, Q), me(Ht, K, Ot), W.hasOverflow = !0;
           } else
             W.hasOverflow = !1;
           return W.font = O, W.width = ht, W;
@@ -1671,12 +1675,12 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         return typeof i.text == "string" && (i.text = this.linebreak(i.text)), i.ctx ? mn(i.text, this, i.ctx) : gn(i.text, this);
       } }], o && vn(n.prototype, o), Object.defineProperty(n, "prototype", { writable: !1 }), e;
     }();
-    function Tt(e) {
-      return Tt = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(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;
-      }, Tt(e);
+      }, _t(e);
     }
     function te(e, n) {
       (n == null || n > e.length) && (n = e.length);
@@ -1688,17 +1692,17 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       for (var o = 0; o < n.length; o++) {
         var i = n[o];
         i.enumerable = i.enumerable || !1, i.configurable = !0, "value" in i && (i.writable = !0), Object.defineProperty(e, (h = function(y, w) {
-          if (Tt(y) !== "object" || y === null)
+          if (_t(y) !== "object" || y === null)
             return y;
           var x = y[Symbol.toPrimitive];
           if (x !== void 0) {
             var b = x.call(y, w);
-            if (Tt(b) !== "object")
+            if (_t(b) !== "object")
               return b;
             throw new TypeError("@@toPrimitive must return a primitive value.");
           }
           return String(y);
-        }(i.key, "string"), Tt(h) === "symbol" ? h : String(h)), i);
+        }(i.key, "string"), _t(h) === "symbol" ? h : String(h)), i);
       }
       var h;
     }
@@ -1796,7 +1800,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         }), o;
       }
     }
-    rt.createElement = Se, rt.textparser = Pt, rt.defaultparser = Pt, rt.htmlparser = function(e) {
+    rt.createElement = Se, rt.textparser = Nt, rt.defaultparser = Nt, rt.htmlparser = function(e) {
       e = String(e || "").trim();
       for (var n, o, i = { weight: null, style: null, sub: !1, sup: !1, href: null, color: null, rel: null, target: null }, h = [], y = [], w = function(M) {
         for (var I in i)
@@ -1805,7 +1809,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       }, x = function(M) {
         var I = h.length, z = tn[M];
         if (I && z) {
-          for (var R = I - 1; h[R] && (h[R] instanceof Et || Ze.test(h[R].value)); )
+          for (var R = I - 1; h[R] && (h[R] instanceof Tt || Ze.test(h[R].value)); )
             R--;
           for (; z && h[R] && h[R] instanceof nt; )
             R--, z--;
@@ -1814,7 +1818,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         }
       }; e.length; ) {
         if (n = /^[^<]+/.exec(e))
-          Pt(ge(n[0]), !1).forEach(w);
+          Nt(ge(n[0]), !1).forEach(w);
         else if (!(n = Je.exec(e)))
           if (n = We.exec(e))
             y.length && (i = y.pop()), x(n[1]);
@@ -1833,25 +1837,25 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     }, rt.latexparser = function(e) {
       e = String(e || "").trim();
       var n = [0];
-      e = e.replace(/\\verb,(.*?),/, function(P, L) {
+      e = e.replace(/\\verb,(.*?),/, function($, L) {
         return n.push(L), "\\verb," + (n.length - 1) + ",";
       }).replace(/\\\\\n/g, function() {
         return "\\\\";
-      }).replace(hn, function(P, L, H) {
-        return H.charAt(L - 1) === "\\" ? P : cn[P];
-      }).replace(/\n\s+/g, function(P) {
-        return /\n/.test(P.slice(1)) ? "\\par " : P;
-      }).replace(/\\symbol\{(\d+)\}/, function(P, L, H, $) {
-        return $.charAt(H - 1) === "\\" ? P : String.fromCharCode(1 * L);
-      }).replace(/(^|[^\\])(\^|_)(\d|[^{]\S*)/g, function(P, L, H, $) {
-        return L + H + "{" + $ + "}";
-      }).replace(/\\verb,(.*?),/, function(P, L) {
+      }).replace(hn, function($, L, H) {
+        return H.charAt(L - 1) === "\\" ? $ : cn[$];
+      }).replace(/\n\s+/g, function($) {
+        return /\n/.test($.slice(1)) ? "\\par " : $;
+      }).replace(/\\symbol\{(\d+)\}/, function($, L, H, P) {
+        return P.charAt(H - 1) === "\\" ? $ : String.fromCharCode(1 * L);
+      }).replace(/(^|[^\\])(\^|_)(\d|[^{]\S*)/g, function($, L, H, P) {
+        return L + H + "{" + P + "}";
+      }).replace(/\\verb,(.*?),/, function($, L) {
         return "\\verb,".concat(n[+L], ",");
       });
-      for (var o, i = { weight: null, italic: null, variant: null, sub: !1, sup: !1, href: null }, h = [], y = [], w = function(P) {
+      for (var o, i = { weight: null, italic: null, variant: null, sub: !1, sup: !1, href: null }, h = [], y = [], w = function($) {
         for (var L in i)
-          i[L] && (P[L] = i[L]);
-        return h.push(P), P;
+          i[L] && ($[L] = i[L]);
+        return h.push($), $;
       }, x = function() {
         y.push(i), i = Object.create(i);
       }, b = function() {
@@ -1860,7 +1864,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         i = y.pop();
       }, E = { tokens: h, open_context: x, close_context: b, add_token: w }; e.length; ) {
         if (o = an.exec(e))
-          Pt(o[0], !1).forEach(w);
+          Nt(o[0], !1).forEach(w);
         else if (o = ln.exec(e))
           w(new N(o[1]));
         else if (!(o = on.exec(e))) {
@@ -1899,16 +1903,16 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       }
       return h;
     }, rt.measureText = function(e, n, o) {
-      return U(e, S(n), o);
-    }, rt.Token = N, rt.Break = Et, rt.LineBreak = nt, rt.SoftHyphen = pt, rt.Rotator = be, be.createElement = Se;
+      return Y(e, S(n), o);
+    }, rt.Token = N, rt.Break = Tt, rt.LineBreak = nt, rt.SoftHyphen = pt, rt.Rotator = be, be.createElement = Se;
     const Sn = rt;
     return r.default;
   })());
 })(Ve);
 var Fn = Ve.exports;
 const Oe = /* @__PURE__ */ ce(Fn);
-function qn(u, l) {
-  const t = ct(u), { fontSize: r, font: a, padding: c = 0 } = u.properties.style || {};
+function Bn(u, l) {
+  const t = ut(u), { fontSize: r, font: a, padding: c = 0 } = u.properties.style || {};
   if (t.width === t.height && t.width === 0)
     return;
   const p = new Oe({
@@ -1928,7 +1932,7 @@ function qn(u, l) {
   p.setAttribute("transform", `translate(${c}, ${c})`), l.appendChild(p);
 }
 const Me = 20;
-class Bn extends Be {
+class qn extends qe {
   constructor(t, r = {}) {
     super(
       t,
@@ -1953,7 +1957,7 @@ class Bn extends Be {
     v(this, "startX", 0);
     v(this, "startY", 0);
     v(this, "handles", []);
-    v(this, "draggedHandle", B);
+    v(this, "draggedHandle", q);
     v(this, "isFocused", !1);
     v(this, "placeholder", "Type your text here...");
     v(this, "_onFocus", () => {
@@ -1968,12 +1972,12 @@ class Bn extends Be {
       this.select(a.id), this.startDragging(this.getById(a.id), c.x, c.y), this.draggedHandle = 6;
     });
     v(this, "cancelDrawing", () => {
-      this.isDragging && (this.remove(this.annotation.id), this.annotation = { ...re }, this.draggedHandle = B, this.isDragging = !1, this.emit(St, this.annotation));
+      this.isDragging && (this.remove(this.annotation.id), this.annotation = { ...re }, this.draggedHandle = q, this.isDragging = !1, this.emit(St, this.annotation));
     });
     v(this, "startDragging", (t, r, a) => {
       this.annotation = t;
-      const c = ft(this.annotation), f = ct(this.annotation);
-      this.rect.x = c.x, this.rect.y = c.y, this.rect.width = f.width, this.rect.height = f.height, this.startX = r, this.startY = a, this.disableDragging(), this.textArea.classList.add("noevents"), this.textArea.setAttribute("disabled", "disabled"), this.emit(Vt, this.annotation), this.isDragging = !0;
+      const c = ct(this.annotation), d = ut(this.annotation);
+      this.rect.x = c.x, this.rect.y = c.y, this.rect.width = d.width, this.rect.height = d.height, this.startX = r, this.startY = a, this.disableDragging(), this.textArea.classList.add("noevents"), this.textArea.setAttribute("disabled", "disabled"), this.emit(Yt, this.annotation), this.isDragging = !0;
     });
     v(this, "onHandleMouseDown", (t) => {
       const r = this.getById(this.selectedId) || this.getById(this.hoveredId);
@@ -1986,19 +1990,19 @@ class Bn extends Be {
       if (!this.isDragging)
         return;
       t.stopPropagation(), t.preventDefault();
-      const r = this.handles[this.draggedHandle], a = r.classList.contains("top"), c = r.classList.contains("left"), f = r.classList.contains("right"), g = r.classList.contains("bottom"), p = r.classList.contains("line-handle"), s = this.ogma.view.getZoom(), d = (t.clientX - this.startX) / s, m = (t.clientY - this.startY) / s, A = this.ogma.view.getAngle(), T = new G(d, m).rotateRadians(A);
-      (g && c || a && f) && (T.y = 0, T.x = 0);
+      const r = this.handles[this.draggedHandle], a = r.classList.contains("top"), c = r.classList.contains("left"), d = r.classList.contains("right"), g = r.classList.contains("bottom"), p = r.classList.contains("line-handle"), s = this.ogma.view.getZoom(), f = (t.clientX - this.startX) / s, m = (t.clientY - this.startY) / s, A = this.ogma.view.getAngle(), T = new U(f, m).rotateRadians(A);
+      (g && c || a && d) && (T.y = 0, T.x = 0);
       const S = c || p ? this.rect.x + T.x : this.rect.x, C = a || p ? this.rect.y + T.y : this.rect.y, k = Math.max(
-        this.rect.width + d * (p || c ? 0 : 1),
+        this.rect.width + f * (p || c ? 0 : 1),
         Me
       ), F = Math.max(
         this.rect.height + m * (p || a ? 0 : 1),
         Me
       );
-      zn(this.annotation, S, C, k, F), this.emit(Bt, this.annotation, "text"), this.refreshEditor(), this.layer.refresh();
+      zn(this.annotation, S, C, k, F), this.emit(Ut, this.annotation, "text"), this.refreshEditor(), this.layer.refresh();
     });
     v(this, "onMouseUp", () => {
-      !this.isDragging || this.draggedHandle === B || (this.restoreDragging(), this.textArea.classList.remove("noevents"), this.textArea.removeAttribute("disabled"), this.emit(St, this.annotation), this.isDragging = !1, this.draggedHandle = B);
+      !this.isDragging || this.draggedHandle === q || (this.restoreDragging(), this.textArea.classList.remove("noevents"), this.textArea.removeAttribute("disabled"), this.emit(St, this.annotation), this.isDragging = !1, this.draggedHandle = q);
     });
     v(this, "onViewChanged", () => {
       const t = Math.max(2, this.handleSize / this.ogma.view.getZoom());
@@ -2020,41 +2024,43 @@ class Bn extends Be {
     return !this.isFocused;
   }
   detect({ x: t, y: r }, a = 0) {
-    const c = new G(t, r), f = this.ogma.view.getAngle();
+    const c = new U(t, r), d = this.ogma.view.getAngle();
     return this.elements.find((g) => {
-      const { x: p, y: s } = ft(g), { width: d, height: m } = ct(g), A = new G(p, s), { x: T, y: S } = c.sub(A).rotateRadians(-f);
-      return T > -a && T < d + a && S > -a && S < m + a;
+      const { x: p, y: s } = ct(g), { width: f, height: m } = ut(g), A = new U(p, s), { x: T, y: S } = c.sub(A).rotateRadians(-d);
+      return T > -a && T < f + a && S > -a && S < m + a;
     });
   }
   draw(t) {
     t.innerHTML = "";
-    const r = "", a = this.ogma.view.getAngle() * 180 / Math.PI;
-    this.elements.forEach((f, g) => {
-      const p = `class${g}`, s = ct(f), d = ft(f), m = f.id, {
+    const r = "", a = this.ogma.view.getAngle();
+    this.elements.forEach((d, g) => {
+      const p = `class${g}`, s = ut(d), f = ct(d), m = d.id, {
         color: A,
         fontSize: T,
         font: S,
         strokeColor: C,
         strokeWidth: k,
         strokeType: F,
-        background: Y
-      } = f.properties.style || At;
+        background: X
+      } = d.properties.style || At;
       if (m === this.selectedId)
         return;
-      const D = Dt("g");
+      const D = Mt("g");
       D.classList.add("annotation-text"), D.setAttribute("fill", `${A}`), D.setAttribute("font-size", `${T}px`), D.setAttribute("font-family", `${S}`);
-      const U = Dt("rect");
-      let X = !1;
-      F && F !== "none" && (X = !0, U.setAttribute("stroke", C || "black"), U.setAttribute("stroke-width", `${k}`), F === "dashed" && U.setAttribute("stroke-dasharray", "5,5")), (Y && Y.length || X) && (X = !0, U.setAttribute("fill", Y || "transparent")), X && (U.setAttribute("width", `${s.width}`), U.setAttribute("height", `${s.height}`)), D.appendChild(U), qn(f, D), D.setAttribute("transform", `translate(${d.x},${d.y}) rotate(${a})`), D.classList.add(p), D.setAttribute("data-annotation", `${f.id}`), D.setAttribute("data-annotation-type", "text"), t.appendChild(D);
+      const Y = Mt("rect");
+      let G = !1;
+      F && F !== "none" && (G = !0, Y.setAttribute("stroke", C || "black"), Y.setAttribute("stroke-width", `${k}`), F === "dashed" && Y.setAttribute("stroke-dasharray", "5,5")), (X && X.length || G) && (G = !0, Y.setAttribute("fill", X || "transparent")), G && (Y.setAttribute("width", `${s.width}`), Y.setAttribute("height", `${s.height}`)), D.appendChild(Y), Bn(d, D);
+      const { x: Et, y: kt } = new U(f.x, f.y).rotateRadians(-a);
+      D.setAttribute("transform", `translate(${Et},${kt})`), D.classList.add(p), D.setAttribute("data-annotation", `${d.id}`), D.setAttribute("data-annotation-type", "text"), t.appendChild(D);
     });
-    const c = Dt("style");
+    const c = Mt("style");
     c.innerHTML = r, t.firstChild && t.insertBefore(c, t.firstChild);
   }
   refreshDrawing() {
-    const t = this.ogma.view.getAngle() * 180 / Math.PI;
+    const t = this.ogma.view.getAngle();
     [...this.layer.element.children].forEach((r) => {
-      const a = r.getAttribute("transform"), c = a == null ? void 0 : a.match(/translate\(([^)]+)\)/);
-      c && r.setAttribute("transform", `translate(${c[1]}) rotate(${t})`);
+      const a = ct(this.getById(+r.getAttribute("data-annotation"))), { x: c, y: d } = new U(a.x, a.y).rotateRadians(-t);
+      r.setAttribute("transform", `translate(${c},${d})`);
     });
   }
   getDefaultOptions() {
@@ -2063,14 +2069,14 @@ class Bn extends Be {
   refreshEditor() {
     if (+this.selectedId < 0 && +this.hoveredId < 0)
       return;
-    const t = this.getById(this.selectedId) || this.getById(this.hoveredId), r = ct(t), a = this.ogma.view.graphToScreenCoordinates(ft(t)), c = this.ogma.view.getZoom(), {
-      font: f,
+    const t = this.getById(this.selectedId) || this.getById(this.hoveredId), r = ut(t), a = this.ogma.view.graphToScreenCoordinates(ct(t)), c = this.ogma.view.getZoom(), {
+      font: d,
       fontSize: g,
       color: p,
       background: s,
-      padding: d = 0
+      padding: f = 0
     } = t.properties.style || At, m = (g || 1) * c;
-    this.textArea.value = t.properties.content, this.editor.element.style.transform = `translate(${a.x}px, ${a.y}px)translate(-50%, -50%)translate(${r.width / 2 * c}px, ${r.height / 2 * c}px)`, this.editor.element.style.width = `${r.width * c}px`, this.editor.element.style.height = `${r.height * c}px`, this.textArea.style.font = `${m} ${f}`, this.textArea.style.fontFamily = f || "sans-serif", this.textArea.style.fontSize = `${m}px`, this.textArea.style.padding = `${c * d}px`, this.textArea.style.lineHeight = `${m}px`, this.textArea.style.boxSizing = "border-box", this.textArea.style.color = p || "black", this.textArea.style.background = s || "transparent", this.textArea.placeholder = this.placeholder, this.layer.refresh();
+    this.textArea.value = t.properties.content, this.editor.element.style.transform = `translate(${a.x}px, ${a.y}px)translate(-50%, -50%)translate(${r.width / 2 * c}px, ${r.height / 2 * c}px)`, this.editor.element.style.width = `${r.width * c}px`, this.editor.element.style.height = `${r.height * c}px`, this.textArea.style.font = `${m} ${d}`, this.textArea.style.fontFamily = d || "sans-serif", this.textArea.style.fontSize = `${m}px`, this.textArea.style.padding = `${c * f}px`, this.textArea.style.lineHeight = `${m}px`, this.textArea.style.boxSizing = "border-box", this.textArea.style.color = p || "black", this.textArea.style.background = s || "transparent", this.textArea.placeholder = this.placeholder, this.layer.refresh();
   }
   select(t) {
     super.select(t), this.textArea.focus();
@@ -2086,15 +2092,15 @@ class Vn {
     v(this, "linksByArrowId", {});
   }
   add(l, t, r, a, c) {
-    const f = Ut(), g = l.id, p = {
-      id: f,
+    const d = Xt(), g = l.id, p = {
+      id: d,
       arrow: g,
       target: r,
       targetType: a,
       connectionPoint: c,
       side: t
     };
-    return this.links[f] = p, this.linksByTargetId[r] || (this.linksByTargetId[r] = []), this.linksByTargetId[r].push(f), this.linksByArrowId[g] || (this.linksByArrowId[g] = {}), this.linksByArrowId[g][t] = f, l.properties.link = l.properties.link || {}, l.properties.link[t] = {
+    return this.links[d] = p, this.linksByTargetId[r] || (this.linksByTargetId[r] = []), this.linksByTargetId[r].push(d), this.linksByArrowId[g] || (this.linksByArrowId[g] = {}), this.linksByArrowId[g][t] = d, l.properties.link = l.properties.link || {}, l.properties.link[t] = {
       id: r,
       side: t,
       type: a,
@@ -2113,10 +2119,10 @@ class Vn {
       return this;
     const c = this.links[a];
     delete this.links[a];
-    const f = this.linksByTargetId[c.target];
-    for (let s = 0; s < f.length; s++)
-      if (f[s] === a) {
-        f.splice(s, 1);
+    const d = this.linksByTargetId[c.target];
+    for (let s = 0; s < d.length; s++)
+      if (d[s] === a) {
+        d.splice(s, 1);
         break;
       }
     return delete this.linksByArrowId[r][t], this;
@@ -2154,7 +2160,7 @@ const ot = (u) => u.properties.type === "arrow", mt = (u) => u.properties.type =
   { x: 0.5, y: 1 },
   { x: 1, y: 1 }
 ];
-class Gn extends qe {
+class Gn extends Be {
   constructor(t, r = {}) {
     super();
     v(this, "arrows");
@@ -2178,7 +2184,7 @@ class Gn extends qe {
       Ce.forEach((a) => {
         if (!this.textToMagnet)
           return;
-        const c = ct(this.textToMagnet), f = ft(this.textToMagnet), { x: g, y: p } = new G(a.x, a.y).mul({ x: c.width, y: c.height }).rotateRadians(this.ogma.view.getAngle()).add(f);
+        const c = ut(this.textToMagnet), d = ct(this.textToMagnet), { x: g, y: p } = new U(a.x, a.y).mul({ x: c.width, y: c.height }).rotateRadians(this.ogma.view.getAngle()).add(d);
         t.moveTo(g, p), t.arc(g, p, this.options.magnetHandleRadius / r, 0, Math.PI * 2);
       }), t.fill(), t.closePath();
     });
@@ -2186,21 +2192,21 @@ class Gn extends qe {
       const a = r;
       if (ot(t) && a === "line")
         ["start", "end"].find((c) => {
-          const f = c === "start" ? Ot(t) : Ft(t);
-          return this._snapToText(t, a, f) || this._findAndSnapToNode(t, c, f);
+          const d = c === "start" ? zt(t) : qt(t);
+          return this._snapToText(t, a, d) || this._findAndSnapToNode(t, c, d);
         });
       else if (ot(t) && a !== "line") {
-        const c = a === "start" ? Ot(t) : Ft(t);
+        const c = a === "start" ? zt(t) : qt(t);
         this._snapToText(t, a, c) || this._findAndSnapToNode(t, a, c);
       } else
-        mt(t) && (this.activeLinks.forEach(({ arrow: c, side: f, connectionPoint: g }) => {
-          const p = this.getAnnotation(c), s = ct(t), d = ft(t), m = new G(g.x, g.y).mul({ x: s.width, y: s.height }).rotateRadians(this.ogma.view.getAngle()).add(d);
-          p.geometry.coordinates[f === "start" ? 0 : 1] = [m.x, m.y];
+        mt(t) && (this.activeLinks.forEach(({ arrow: c, side: d, connectionPoint: g }) => {
+          const p = this.getAnnotation(c), s = ut(t), f = ct(t), m = new U(g.x, g.y).mul({ x: s.width, y: s.height }).rotateRadians(this.ogma.view.getAngle()).add(f);
+          p.geometry.coordinates[d === "start" ? 0 : 1] = [m.x, m.y];
         }), this.activeLinks.length && this.arrows.refreshLayer());
-      this.layer.refresh(), this.emit(Bt, t, r);
+      this.layer.refresh(), this.emit(Ut, t, r);
     });
     v(this, "_onFeatureDragEnd", (t) => {
-      this.dragged !== null && ot(t) && Ot(this.dragged) && Le.forEach((r) => {
+      this.dragged !== null && ot(t) && zt(this.dragged) && Le.forEach((r) => {
         this.links.getArrowLink(t.id, r) && this.emit(Nn, {
           arrow: t,
           link: this.links.getArrowLink(t.id, r)
@@ -2211,7 +2217,7 @@ class Gn extends qe {
       this.textToMagnet = void 0, ot(t) ? this.dragged = t : mt(t) && this.activeLinks.push(...this.links.getTargetLinks(t.id, "text")), this.annotations.forEach((r) => {
         const a = r.getSelectedFeature();
         a && a !== t && r.unhover().unselect(), r.disableDetection();
-      }), this.emit(Vt, t);
+      }), this.emit(Yt, t);
     });
     v(this, "_onNodesDragStart", () => {
       this.arrows.unhover().unselect(), this.texts.unhover().unselect();
@@ -2222,11 +2228,11 @@ class Gn extends qe {
     });
     v(this, "_onLayoutEnd", (t) => {
       t.ids.forEach((r, a) => {
-        this.links.getTargetLinks(r, "node").forEach((f) => {
-          const g = this.getAnnotation(f.arrow), p = f.side, s = Rt(
+        this.links.getTargetLinks(r, "node").forEach((d) => {
+          const g = this.getAnnotation(d.arrow), p = d.side, s = jt(
             g,
             p === "start" ? "end" : "start"
-          ), d = t.positions.current[a], m = this.ogma.getNode(r).getAttribute("radius"), A = Ht(s, d, +m);
+          ), f = t.positions.current[a], m = this.ogma.getNode(r).getAttribute("radius"), A = Ft(s, f, +m);
           bt(g, p, A.x, A.y);
         });
       }), this.arrows.refreshLayer(), this.texts.refreshLayer();
@@ -2255,23 +2261,23 @@ class Gn extends qe {
     v(this, "_onUpdate", (t) => {
       this.emit(he, t);
     });
-    this.options = this.setOptions({ ...Un, ...r }), this.ogma = t, this.arrows = new Hn(t, this.options), this.texts = new Bn(t, this.options), this.annotations = [this.arrows, this.texts], this.annotations.forEach((a) => {
-      a.on(Vt, this._onFeatureDragStart).on(Bt, this._onFeatureDrag).on(St, this._onFeatureDragEnd).on(he, this.onUpdate).on(oe, this._onUnselect).on(se, this._onSelect).on(le, this._onAdded).on(ae, this._onRemoved);
+    this.options = this.setOptions({ ...Un, ...r }), this.ogma = t, this.arrows = new Hn(t, this.options), this.texts = new qn(t, this.options), this.annotations = [this.arrows, this.texts], this.annotations.forEach((a) => {
+      a.on(Yt, this._onFeatureDragStart).on(Ut, this._onFeatureDrag).on(St, this._onFeatureDragEnd).on(he, this.onUpdate).on(oe, this._onUnselect).on(se, this._onSelect).on(le, this._onAdded).on(ae, 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, r, a) {
     t.forEach((c) => {
-      const f = this.links.getTargetLinks(c.getId(), "node"), g = c.getPosition();
-      f.forEach((p) => {
-        const s = this.getAnnotation(p.arrow), d = p.side, m = Rt(
+      const d = this.links.getTargetLinks(c.getId(), "node"), g = c.getPosition();
+      d.forEach((p) => {
+        const s = this.getAnnotation(p.arrow), f = p.side, m = jt(
           s,
-          d === "start" ? "end" : "start"
+          f === "start" ? "end" : "start"
         );
         let A = g;
         const T = +c.getAttribute("radius"), S = 1e-6;
-        (p.connectionPoint.x - (g.x - r) > S || p.connectionPoint.y - (g.y - a) > S) && (A = Ht(m, g, T)), bt(s, d, A.x, A.y);
+        (p.connectionPoint.x - (g.x - r) > S || p.connectionPoint.y - (g.y - a) > S) && (A = Ft(m, g, T)), bt(s, f, A.x, A.y);
       });
     }), this.arrows.refreshLayer();
   }
@@ -2280,31 +2286,31 @@ class Gn extends qe {
     if (this.links.remove(t, r), !c)
       return !1;
     this.textToMagnet = c;
-    const f = this.findMagnetPoint(Ce, c, a);
-    return f ? (bt(t, r, f.point.x, f.point.y), this.links.add(t, r, c.id, "text", f.magnet), !0) : !1;
+    const d = this.findMagnetPoint(Ce, c, a);
+    return d ? (bt(t, r, d.point.x, d.point.y), this.links.add(t, r, c.id, "text", d.magnet), !0) : !1;
   }
   _findAndSnapToNode(t, r, a) {
-    const c = this.ogma.view.graphToScreenCoordinates(a), f = this.ogma.view.getElementAt(c);
-    this.links.remove(t, r), f && f.isNode ? (this.hoveredNode = f, this.hoveredNode.setSelected(!0), this._snapToNode(t, r, f, c)) : (this.hoveredNode && this.hoveredNode.setSelected(!1), this.hoveredNode = null);
+    const c = this.ogma.view.graphToScreenCoordinates(a), d = this.ogma.view.getElementAt(c);
+    this.links.remove(t, r), d && d.isNode ? (this.hoveredNode = d, this.hoveredNode.setSelected(!0), this._snapToNode(t, r, d, c)) : (this.hoveredNode && this.hoveredNode.setSelected(!1), this.hoveredNode = null);
   }
   _snapToNode(t, r, a, c) {
-    const f = a.getPositionOnScreen(), g = +a.getAttribute("radius"), p = g * this.ogma.view.getZoom(), s = c.x - f.x, d = c.y - f.y, m = Math.sqrt(s * s + d * d), A = a.getPosition();
+    const d = a.getPositionOnScreen(), g = +a.getAttribute("radius"), p = g * this.ogma.view.getZoom(), s = c.x - d.x, f = c.y - d.y, m = Math.sqrt(s * s + f * f), A = a.getPosition();
     if (m < p + this.options.detectMargin) {
       let T = A;
       if (m > p / 2) {
-        const S = Rt(t, r === "end" ? "start" : "end");
-        T = Ht(S, T, g);
+        const S = jt(t, r === "end" ? "start" : "end");
+        T = Ft(S, T, g);
       }
       bt(t, r, T.x, T.y), this.links.add(t, r, a.getId(), "node", T);
     }
   }
   refreshTextLinks() {
     let t = !1;
-    this.links.forEach(({ connectionPoint: r, targetType: a, target: c, arrow: f, side: g }) => {
+    this.links.forEach(({ connectionPoint: r, targetType: a, target: c, arrow: d, side: g }) => {
       if (a !== "text")
         return;
       t = !0;
-      const p = this.getAnnotation(c), s = this.getAnnotation(f), d = ct(p), m = ft(p), A = new G(r.x, r.y).mul({ x: d.width, y: d.height }).rotateRadians(this.ogma.view.getAngle()).add(m);
+      const p = this.getAnnotation(c), s = this.getAnnotation(d), f = ut(p), m = ct(p), A = new U(r.x, r.y).mul({ x: f.width, y: f.height }).rotateRadians(this.ogma.view.getAngle()).add(m);
       bt(s, g, A.x, A.y);
     }), t && this.arrows.refreshLayer();
   }
@@ -2316,17 +2322,17 @@ class Gn extends qe {
   }
   findMagnetPoint(t, r, a) {
     let c;
-    for (const f of t) {
-      const g = ct(r), p = ft(r), s = new G(f.x, f.y).mul({ x: g.width, y: g.height }).rotateRadians(this.ogma.view.getAngle()).add(p), d = s.sub(a).length(), m = Math.min(
+    for (const d of t) {
+      const g = ut(r), p = ct(r), s = new U(d.x, d.y).mul({ x: g.width, y: g.height }).rotateRadians(this.ogma.view.getAngle()).add(p), f = s.sub(a).length(), m = Math.min(
         this.options.magnetRadius * this.ogma.view.getZoom(),
         // when really zoomed in: avoid to snap on too far away magnets
         g.width / 2,
         g.height / 2
       );
-      if (d < Math.max(m, this.options.magnetHandleRadius)) {
+      if (f < Math.max(m, this.options.magnetHandleRadius)) {
         c = {
           point: s,
-          magnet: f
+          magnet: d
         };
         break;
       }
@@ -2364,7 +2370,7 @@ class Gn extends qe {
    */
   add(t) {
     if (ze(t)) {
-      const [r, a] = t.features.reduce((c, f) => (ot(f) ? c[1].push(f) : mt(f) && c[0].push(f), c), [[], []]);
+      const [r, a] = t.features.reduce((c, d) => (ot(d) ? c[1].push(d) : mt(d) && c[0].push(d), c), [[], []]);
       return r.forEach(
         (c) => this.add(c)
       ), a.forEach(
@@ -2400,12 +2406,12 @@ class Gn extends qe {
         if (a.type === "text" && c)
           this.links.add(t, r, a.id, a.type, a.magnet);
         else if (a.type === "node") {
-          const f = this.ogma.getNode(a.id);
-          if (!f)
+          const d = this.ogma.getNode(a.id);
+          if (!d)
             continue;
           this.links.add(t, r, a.id, a.type, a.magnet);
-          const g = f.getPosition(), p = f.getAttribute("radius") || 0, s = Rt(t, r === "start" ? "end" : "start"), d = Ht(s, g, +p);
-          bt(t, r, d.x, d.y);
+          const g = d.getPosition(), p = d.getAttribute("radius") || 0, s = jt(t, r === "start" ? "end" : "start"), f = Ft(s, g, +p);
+          bt(t, r, f.x, f.y);
         }
       }
   }
@@ -2431,7 +2437,7 @@ class Gn extends qe {
    * Cancel drawing on the current frame
    */
   cancelDrawing() {
-    this.annotations.forEach((t) => t.cancelDrawing()), this.emit($n);
+    this.annotations.forEach((t) => t.cancelDrawing()), this.emit(Pn);
   }
   /**
    * Update the style of the annotation with the given id
@@ -2473,25 +2479,25 @@ class Gn extends qe {
 export {
   Hn as Arrows,
   Gn as Control,
-  Bn as Texts,
+  qn as Texts,
   Dn as createArrow,
-  Dt as createSVGElement,
+  Mt as createSVGElement,
   jn as createText,
   Ee as defaultArrowOptions,
-  Mt as defaultArrowStyle,
+  Lt as defaultArrowStyle,
   De as defaultControllerOptions,
   re as defaultTextOptions,
   At as defaultTextStyle,
   Xn as getAnnotationsBounds,
-  Ft as getArrowEnd,
-  qt as getArrowEndPoints,
-  Rt as getArrowSide,
-  Ot as getArrowStart,
-  Ht as getAttachmentPointOnNode,
+  qt as getArrowEnd,
+  Vt as getArrowEndPoints,
+  jt as getArrowSide,
+  zt as getArrowStart,
+  Ft as getAttachmentPointOnNode,
   He as getHandleId,
-  $e as getTextBbox,
-  ft as getTextPosition,
-  ct as getTextSize,
+  Pe as getTextBbox,
+  ct as getTextPosition,
+  ut as getTextSize,
   ze as isAnnotationCollection,
   ot as isArrow,
   mt as isText,
@@ -2501,4 +2507,3 @@ export {
   zn as setTextBbox,
   Mn as updateTextBbox
 };
-//# sourceMappingURL=index.mjs.map