mind-elixir 5.12.2-beta.3 → 5.12.2

package/dist/MindElixirLite.js

@@ -1,4 +1,4 @@
-const Wn = 0, Yn = 1, Rn = 2, G = {
+const Wn = 0, Yn = 1, Rn = 2, tt = {
   name: "Latte",
   type: "light",
   palette: ["#dd7878", "#ea76cb", "#8839ef", "#e64553", "#fe640b", "#df8e1d", "#40a02b", "#209fb5", "#1e66f5", "#7287fd"],
@@ -12,6 +12,8 @@ const Wn = 0, Yn = 1, Rn = 2, G = {
     "--root-color": "#ffffff",
     "--root-bgcolor": "#4c4f69",
     "--root-border-color": "rgba(0, 0, 0, 0)",
+    "--main-border": "",
+    // you can customize, it will fallback to 2px solid main-color
     "--main-color": "#444446",
     "--main-bgcolor": "#ffffff",
     "--main-bgcolor-transparent": "rgba(255, 255, 255, 0.8)",
@@ -39,6 +41,7 @@ const Wn = 0, Yn = 1, Rn = 2, G = {
     "--root-color": "#ffffff",
     "--root-bgcolor": "#2d3748",
     "--root-border-color": "rgba(255, 255, 255, 0.1)",
+    "--main-border": "",
     "--main-color": "#ffffff",
     "--main-bgcolor": "#4c4f69",
     "--main-bgcolor-transparent": "rgba(76, 79, 105, 0.8)",
@@ -56,12 +59,12 @@ const Wn = 0, Yn = 1, Rn = 2, G = {
 function It(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
 }
-const _ = function(t, e) {
+const G = function(t, e) {
   if (e.id === t)
     return e;
   if (e.children && e.children.length) {
     for (let n = 0; n < e.children.length; n++) {
-      const o = _(t, e.children[n]);
+      const o = G(t, e.children[n]);
       if (o) return o;
     }
     return null;
@@ -76,7 +79,7 @@ const _ = function(t, e) {
     wt(o, e);
   });
 };
-function q(t, e, n, o) {
+function _(t, e, n, o) {
   const s = n - t, i = o - e, c = Math.atan2(i, s) * 180 / Math.PI, l = 12, a = 30, f = (c + 180 - a) * Math.PI / 180, d = (c + 180 + a) * Math.PI / 180;
   return {
     x1: n + Math.cos(f) * l,
@@ -102,10 +105,10 @@ const Ot = function() {
 }, D = (t, e) => {
   for (const n in e)
     t.setAttribute(n, e[n]);
-}, Z = (t) => t ? t.tagName === "ME-TPC" : !1, ot = (t) => {
+}, J = (t) => t ? t.tagName === "ME-TPC" : !1, ot = (t) => {
   const e = /translate3d\(([^,]+),\s*([^,]+)/, n = t.match(e);
   return n ? { x: parseFloat(n[1]), y: parseFloat(n[2]) } : { x: 0, y: 0 };
-}, vt = function(t) {
+}, bt = function(t) {
   for (let e = 0; e < t.length; e++) {
     const { dom: n, evt: o, func: s } = t[e];
     n.addEventListener(o, s);
@@ -121,11 +124,11 @@ const Ot = function() {
   return Math.sqrt(n * n + o * o);
 }, Bt = function(t, e) {
   if (!e)
-    return U(t), t;
+    return j(t), t;
   let n = t.querySelector(".insert-preview");
   const o = `insert-preview ${e} show`;
   return n || (n = document.createElement("div"), t.appendChild(n)), n.className = o, t;
-}, U = function(t) {
+}, j = function(t) {
   if (!t) return;
   const e = t.querySelectorAll(".insert-preview");
   for (const n of e || [])
@@ -177,11 +180,11 @@ function ft(t, e, n, o = !1) {
   if (e.startX = n.clientX, e.startY = n.clientY, e.pointerId = n.pointerId, t.dragged = t.currentNodes, o) {
     xt(t, e);
     const i = t.container.getBoundingClientRect();
-    bt(e.ghost, n.clientX - i.x, n.clientY - i.y);
+    vt(e.ghost, n.clientX - i.x, n.clientY - i.y);
   }
   return !0;
 }
-function bt(t, e, n) {
+function vt(t, e, n) {
   t.style.transform = `translate(${e - 10}px, ${n - 10}px)`, t.style.display = "block";
 }
 function xt(t, e) {
@@ -199,7 +202,7 @@ function Vt(t, e, n) {
   const s = n.clientX - e.startX, i = n.clientY - e.startY, r = Math.sqrt(s * s + i * i);
   if (!e.isDragging && r > Xt && xt(t, e), !e.isDragging) return;
   const c = t.container.getBoundingClientRect();
-  bt(e.ghost, n.clientX - c.x, n.clientY - c.y), n.clientX < c.x + 50 ? e.edgeMoveController.move(1, 0) : n.clientX > c.x + c.width - 50 ? e.edgeMoveController.move(-1, 0) : n.clientY < c.y + 50 ? e.edgeMoveController.move(0, 1) : n.clientY > c.y + c.height - 50 ? e.edgeMoveController.move(0, -1) : e.edgeMoveController.stop(), U(e.meet);
+  vt(e.ghost, n.clientX - c.x, n.clientY - c.y), n.clientX < c.x + 50 ? e.edgeMoveController.move(1, 0) : n.clientX > c.x + c.width - 50 ? e.edgeMoveController.move(-1, 0) : n.clientY < c.y + 50 ? e.edgeMoveController.move(0, 1) : n.clientY > c.y + c.height - 50 ? e.edgeMoveController.move(0, -1) : e.edgeMoveController.stop(), j(e.meet);
   const l = 12 * t.scaleVal, a = document.elementFromPoint(n.clientX, n.clientY - l);
   if (dt(a, o)) {
     e.meet = a;
@@ -222,7 +225,7 @@ function zt(t, e, n) {
     e.edgeMoveController.stop();
     for (const s of o)
       s.parentElement.parentElement.style.opacity = "1";
-    e.ghost.style.display = "none", e.ghost.innerHTML = "", e.isDragging && e.meet && (U(e.meet), e.insertType === "before" ? t.moveNodeBefore(o, e.meet) : e.insertType === "after" ? t.moveNodeAfter(o, e.meet) : e.insertType === "in" && t.moveNodeIn(o, e.meet)), t.dragged = null, e.isDragging = !1, e.insertType = null, e.meet = null, e.pointerId = null;
+    e.ghost.style.display = "none", e.ghost.innerHTML = "", e.isDragging && e.meet && (j(e.meet), e.insertType === "before" ? t.moveNodeBefore(o, e.meet) : e.insertType === "after" ? t.moveNodeAfter(o, e.meet) : e.insertType === "in" && t.moveNodeIn(o, e.meet)), t.dragged = null, e.isDragging = !1, e.insertType = null, e.meet = null, e.pointerId = null;
   }
 }
 function ut(t, e) {
@@ -231,7 +234,7 @@ function ut(t, e) {
     e.edgeMoveController.stop();
     for (const o of n)
       o.parentElement.parentElement.style.opacity = "1";
-    e.meet && U(e.meet), e.ghost.style.display = "none", e.ghost.innerHTML = "", t.dragged = null, e.isDragging = !1, e.insertType = null, e.meet = null, e.pointerId = null;
+    e.meet && j(e.meet), e.ghost.style.display = "none", e.ghost.innerHTML = "", t.dragged = null, e.isDragging = !1, e.insertType = null, e.meet = null, e.pointerId = null;
   }
 }
 const O = {
@@ -465,9 +468,9 @@ const ee = function(t, e = !1) {
   this.direction = 0, this.refresh(), this.toCenter(), this.bus.fire("changeDirection", this.direction);
 }, we = function() {
   this.direction = 1, this.refresh(), this.toCenter(), this.bus.fire("changeDirection", this.direction);
-}, ve = function() {
+}, be = function() {
   this.direction = 2, this.refresh(), this.toCenter(), this.bus.fire("changeDirection", this.direction);
-}, be = function(t, e) {
+}, ve = function(t, e) {
   const n = t.nodeObj;
   typeof e == "boolean" ? n.expanded = e : n.expanded !== !1 ? n.expanded = !1 : n.expanded = !0;
   const o = t.getBoundingClientRect(), s = {
@@ -506,14 +509,14 @@ const ee = function(t, e = !1) {
   clearSelection: ie,
   disableEdit: ae,
   enableEdit: le,
-  expandNode: be,
+  expandNode: ve,
   expandNodeAll: xe,
   focusNode: ge,
   getData: ce,
   getDataString: re,
   initLeft: ye,
   initRight: we,
-  initSide: ve,
+  initSide: be,
   install: pe,
   move: fe,
   refresh: Ce,
@@ -646,7 +649,7 @@ function ke(t) {
   }, d = (h) => {
     if (!t.editable) return;
     const m = h.target;
-    if (Z(m)) {
+    if (J(m)) {
       t.selectNode(m), t.beginEdit(m);
       return;
     }
@@ -663,7 +666,7 @@ function ke(t) {
       return;
     }
     if (e.handlePointerDown(h), e.mousedown && (t.ptState = i.Pan), h.button === 0 || h.pointerType === "touch")
-      if (Z(m)) {
+      if (J(m)) {
         t.selection?.cancel();
         const E = t.currentNodes || [];
         if (h.ctrlKey || h.metaKey || t.mobileMultiSelect ? E.includes(m) ? o = m : ((t.currentArrow || t.currentSummary) && t.clearSelection(), t.selection?.select(m)) : E.includes(m) || t.selectNode(m), !t.editable) return;
@@ -708,27 +711,27 @@ function ke(t) {
     h.preventDefault(), h.button === 2 && t.editable && setTimeout(() => {
       if (t.panHelper.moved || t.ptState !== i.Idle && t.ptState !== i.Pan) return;
       const m = h.target;
-      Z(m) && !m.classList.contains("selected") && t.selectNode(m), t.bus.fire("showContextMenu", h);
+      J(m) && !m.classList.contains("selected") && t.selectNode(m), t.bus.fire("showContextMenu", h);
     }, 200);
-  }, b = (h) => {
+  }, v = (h) => {
     if (h.stopPropagation(), h.preventDefault(), h.ctrlKey || h.metaKey) return Pe(t, h);
     if (h.shiftKey) return t.move(-h.deltaY, 0);
     t.move(-h.deltaX, -h.deltaY);
-  }, v = (h) => {
+  }, b = (h) => {
     h.code === "Space" && (t.spacePressed = !0, t.container.classList.add("space-pressed"));
   }, C = (h) => {
     h.code === "Space" && (t.spacePressed = !1, t.container.classList.remove("space-pressed"));
   };
-  return vt([
+  return bt([
     { dom: n, evt: "pointerdown", func: p },
     { dom: n, evt: "pointermove", func: w },
     { dom: n, evt: "pointerup", func: y },
     { dom: n, evt: "pointercancel", func: u },
     { dom: n, evt: "click", func: f },
     { dom: n, evt: "contextmenu", func: g },
-    { dom: n, evt: "wheel", func: typeof t.handleWheel == "function" ? t.handleWheel : b },
+    { dom: n, evt: "wheel", func: typeof t.handleWheel == "function" ? t.handleWheel : v },
     { dom: n, evt: "blur", func: u },
-    { dom: n, evt: "keydown", func: v },
+    { dom: n, evt: "keydown", func: b },
     { dom: n, evt: "keyup", func: C }
   ]);
 }
@@ -756,11 +759,11 @@ function Ne() {
     }
   };
 }
-const k = "http://www.w3.org/2000/svg", K = function(t) {
+const k = "http://www.w3.org/2000/svg", U = function(t) {
   const e = t.clientWidth, n = t.clientHeight, o = t.dataset, s = Number(o.x), i = Number(o.y), r = o.anchor;
   let c = s;
   r === "middle" ? c = s - e / 2 : r === "end" && (c = s - e), t.style.left = `${c}px`, t.style.top = `${i - n / 2}px`, t.style.visibility = "visible";
-}, tt = function(t, e, n, o) {
+}, Q = function(t, e, n, o) {
   const { anchor: s = "middle", color: i, dataType: r, svgId: c } = o, l = document.createElement("div");
   l.className = "svg-label", l.style.color = i || "#666";
   const a = "label-" + c;
@@ -830,7 +833,7 @@ const k = "http://www.w3.org/2000/svg", K = function(t) {
   }), s.addEventListener("blur", () => {
     if (!s) return;
     const i = s.innerText?.trim() || "";
-    i === "" ? n.label = o : n.label = i, e.style.opacity = "1", s.remove(), i !== o && (t.markdown ? e.innerHTML = t.markdown(n.label, n) : e.textContent = n.label, K(e), "parent" in n ? t.bus.fire("operation", {
+    i === "" ? n.label = o : n.label = i, e.style.opacity = "1", s.remove(), i !== o && (t.markdown ? e.innerHTML = t.markdown(n.label, n) : e.textContent = n.label, U(e), "parent" in n ? t.bus.fire("operation", {
       name: "finishEditSummary",
       obj: n
     }) : t.bus.fire("operation", {
@@ -842,11 +845,11 @@ const k = "http://www.w3.org/2000/svg", K = function(t) {
   const e = this.map.querySelector("me-root"), n = e.offsetTop, o = e.offsetLeft, s = e.offsetWidth, i = e.offsetHeight, r = this.map.querySelectorAll("me-main > me-wrapper");
   this.lines.innerHTML = "";
   for (let c = 0; c < r.length; c++) {
-    const l = r[c], a = l.querySelector("me-tpc"), { offsetLeft: f, offsetTop: d } = P(this.nodes, a), p = a.offsetWidth, w = a.offsetHeight, y = l.parentNode.className, u = this.generateMainBranch({ pT: n, pL: o, pW: s, pH: i, cT: d, cL: f, cW: p, cH: w, direction: y, containerHeight: this.nodes.offsetHeight }), g = this.theme.palette, b = a.nodeObj.branchColor || g[c % g.length];
-    if (a.style.borderColor = b, this.lines.appendChild(Dt(u, b, "3")), t && t !== l)
+    const l = r[c], a = l.querySelector("me-tpc"), { offsetLeft: f, offsetTop: d } = P(this.nodes, a), p = a.offsetWidth, w = a.offsetHeight, y = l.parentNode.className, u = this.generateMainBranch({ pT: n, pL: o, pW: s, pH: i, cT: d, cL: f, cW: p, cH: w, direction: y, containerHeight: this.nodes.offsetHeight }), g = this.theme.palette, v = a.nodeObj.branchColor || g[c % g.length];
+    if (a.style.borderColor = v, this.lines.appendChild(Dt(u, v, "3")), t && t !== l)
       continue;
-    const v = W("subLines"), C = l.lastChild;
-    C.tagName === "svg" && C.remove(), l.appendChild(v), Mt(this, v, b, l, y, !0);
+    const b = W("subLines"), C = l.lastChild;
+    C.tagName === "svg" && C.remove(), l.appendChild(b), Mt(this, b, v, l, y, !0);
   }
   this.labelContainer.innerHTML = "", this.renderArrow(), this.renderSummary(), this.bus.fire("linkDiv");
 }, Mt = function(t, e, n, o, s, i) {
@@ -854,7 +857,7 @@ const k = "http://www.w3.org/2000/svg", K = function(t) {
   if (c.length === 0) return;
   const l = r.offsetTop, a = r.offsetLeft, f = r.offsetWidth, d = r.offsetHeight;
   for (let p = 0; p < c.length; p++) {
-    const w = c[p], y = w.firstChild, u = y.offsetTop, g = y.offsetLeft, b = y.offsetWidth, v = y.offsetHeight, C = y.firstChild.nodeObj.branchColor || n, T = t.generateSubBranch({ pT: l, pL: a, pW: f, pH: d, cT: u, cL: g, cW: b, cH: v, direction: s, isFirst: i });
+    const w = c[p], y = w.firstChild, u = y.offsetTop, g = y.offsetLeft, v = y.offsetWidth, b = y.offsetHeight, C = y.firstChild.nodeObj.branchColor || n, T = t.generateSubBranch({ pT: l, pL: a, pW: f, pH: d, cT: u, cL: g, cW: v, cH: b, direction: s, isFirst: i });
     e.appendChild(Dt(T, C, "2"));
     const h = y.children[1];
     if (h) {
@@ -930,22 +933,20 @@ function kt({ pT: t, pL: e, pW: n, pH: o, cT: s, cL: i, cW: r, cH: c, direction:
   a ? d = t + o / 2 : d = t + o;
   const w = s + c;
   let y = 0, u = 0, g = 0;
-  const b = Math.abs(d - w) / 300 * f;
-  return l === O.LHS ? (g = e, y = g + f, u = g - f, p = i + f, `M ${y} ${d} C ${g} ${d} ${g + b} ${w} ${u} ${w} H ${p}`) : (g = e + n, y = g - f, u = g + f, p = i + r - f, `M ${y} ${d} C ${g} ${d} ${g - b} ${w} ${u} ${w} H ${p}`);
+  const v = Math.abs(d - w) / 300 * f;
+  return l === O.LHS ? (g = e, y = g + f, u = g - f, p = i + f, `M ${y} ${d} C ${g} ${d} ${g + v} ${w} ${u} ${w} H ${p}`) : (g = e + n, y = g - f, u = g + f, p = i + r - f, `M ${y} ${d} C ${g} ${d} ${g - v} ${w} ${u} ${w} H ${p}`);
 }
 const Ge = function(t, e = !0) {
-  const n = this.theme || G, s = (t.type || n.type) === "dark" ? et : G;
-  this.theme = {
-    ...n,
-    ...t,
-    cssVar: t.cssVar ? { ...n.cssVar, ...t.cssVar } : { ...s.cssVar }
-  }, this.generateMainBranch = this.theme.generateMainBranch || Pt, this.generateSubBranch = this.theme.generateSubBranch || kt;
-  const i = { ...this.theme.cssVar };
-  this.compact && (i["--node-gap-x"] = "15px", i["--node-gap-y"] = "2px", i["--main-gap-x"] = "30px", i["--main-gap-y"] = "6px");
-  const r = Object.keys(i);
-  for (let c = 0; c < r.length; c++) {
-    const l = r[c];
-    this.container.style.setProperty(l, i[l]);
+  this.theme = t, this.generateMainBranch = this.theme.generateMainBranch || Pt, this.generateSubBranch = this.theme.generateSubBranch || kt;
+  const o = {
+    ...(this.theme.type === "dark" ? et : tt).cssVar,
+    ...this.theme.cssVar
+  };
+  this.compact && (o["--node-gap-x"] = "15px", o["--node-gap-y"] = "2px", o["--main-gap-x"] = "30px", o["--main-gap-y"] = "6px");
+  const s = Object.keys(o);
+  for (let i = 0; i < s.length; i++) {
+    const r = s[i];
+    this.container.style.setProperty(r, o[r]);
   }
   e && this.refresh();
 }, _e = function(t) {
@@ -973,7 +974,7 @@ const Ge = function(t, e = !0) {
     },
     cb: null,
     init(e, n) {
-      this.cb = n, this.handleClear = this.handleClear.bind(this), this.handlePointerMove = this.handlePointerMove.bind(this), this.handlePointerDown = this.handlePointerDown.bind(this), this.destroy = vt([
+      this.cb = n, this.handleClear = this.handleClear.bind(this), this.handlePointerMove = this.handlePointerMove.bind(this), this.handlePointerDown = this.handlePointerDown.bind(this), this.destroy = bt([
         { dom: e, evt: "pointermove", func: this.handlePointerMove },
         { dom: e, evt: "pointerleave", func: this.handleClear },
         { dom: e, evt: "pointerup", func: this.handleClear },
@@ -995,7 +996,7 @@ function At(t, e, n, o, s, i, r, c) {
   };
 }
 function je(t, e, n) {
-  t && (t.dataset.x = e.toString(), t.dataset.y = n.toString(), K(t));
+  t && (t.dataset.x = e.toString(), t.dataset.y = n.toString(), U(t));
 }
 function V(t, e, n, o, s) {
   D(t, {
@@ -1013,7 +1014,7 @@ function mt(t, e, n, o, s, i, r, c, l, a) {
   }
   const d = t.querySelectorAll('path[stroke="transparent"]');
   d.length > 0 && d[0].setAttribute("d", f);
-  const p = q(i, r, c, l);
+  const p = _(i, r, c, l);
   if (p) {
     const u = `M ${p.x1} ${p.y1} L ${c} ${l} L ${p.x2} ${p.y2}`;
     if (t.arrow1.setAttribute("d", u), d.length > 1 && d[1].setAttribute("d", u), a.style) {
@@ -1022,12 +1023,12 @@ function mt(t, e, n, o, s, i, r, c, l, a) {
     }
   }
   if (a.bidirectional) {
-    const u = q(o, s, e, n);
+    const u = _(o, s, e, n);
     if (u) {
       const g = `M ${u.x1} ${u.y1} L ${e} ${n} L ${u.x2} ${u.y2}`;
       if (t.arrow2.setAttribute("d", g), d.length > 2 && d[2].setAttribute("d", g), a.style) {
-        const b = a.style;
-        b.stroke && t.arrow2.setAttribute("stroke", b.stroke), b.strokeWidth && t.arrow2.setAttribute("stroke-width", String(b.strokeWidth)), b.strokeLinecap && t.arrow2.setAttribute("stroke-linecap", b.strokeLinecap), b.opacity !== void 0 && t.arrow2.setAttribute("opacity", String(b.opacity));
+        const v = a.style;
+        v.stroke && t.arrow2.setAttribute("stroke", v.stroke), v.strokeWidth && t.arrow2.setAttribute("stroke-width", String(v.strokeWidth)), v.strokeLinecap && t.arrow2.setAttribute("stroke-linecap", v.strokeLinecap), v.opacity !== void 0 && t.arrow2.setAttribute("opacity", String(v.opacity));
       }
     }
   }
@@ -1038,7 +1039,7 @@ function mt(t, e, n, o, s, i, r, c, l, a) {
   }
   nn(t);
 }
-function j(t, e, n) {
+function q(t, e, n) {
   const { offsetLeft: o, offsetTop: s } = P(t.nodes, e), i = e.offsetWidth, r = e.offsetHeight, c = o + i / 2, l = s + r / 2, a = c + n.x, f = l + n.y;
   return {
     w: i,
@@ -1061,16 +1062,16 @@ const Ue = function(t, e, n) {
   const o = P(t.nodes, e), s = P(t.nodes, n), i = o.offsetLeft + e.offsetWidth / 2, r = o.offsetTop + e.offsetHeight / 2, c = s.offsetLeft + n.offsetWidth / 2, l = s.offsetTop + n.offsetHeight / 2, a = c - i, f = l - r, d = Math.sqrt(a * a + f * f), p = Math.max(50, Math.min(200, d * 0.3)), w = Math.abs(a), y = Math.abs(f);
   let u, g;
   if (d < 150) {
-    const v = e.closest("me-main").className === "lhs" ? -1 : 1;
-    u = { x: 200 * v, y: 0 }, g = { x: 200 * v, y: 0 };
+    const b = e.closest("me-main").className === "lhs" ? -1 : 1;
+    u = { x: 200 * b, y: 0 }, g = { x: 200 * b, y: 0 };
   } else if (w > y * 1.5) {
-    const v = a > 0 ? e.offsetWidth / 2 : -e.offsetWidth / 2, C = a > 0 ? -n.offsetWidth / 2 : n.offsetWidth / 2;
-    u = { x: v + (a > 0 ? p : -p), y: 0 }, g = { x: C + (a > 0 ? -p : p), y: 0 };
+    const b = a > 0 ? e.offsetWidth / 2 : -e.offsetWidth / 2, C = a > 0 ? -n.offsetWidth / 2 : n.offsetWidth / 2;
+    u = { x: b + (a > 0 ? p : -p), y: 0 }, g = { x: C + (a > 0 ? -p : p), y: 0 };
   } else if (y > w * 1.5) {
-    const v = f > 0 ? e.offsetHeight / 2 : -e.offsetHeight / 2, C = f > 0 ? -n.offsetHeight / 2 : n.offsetHeight / 2;
-    u = { x: 0, y: v + (f > 0 ? p : -p) }, g = { x: 0, y: C + (f > 0 ? -p : p) };
+    const b = f > 0 ? e.offsetHeight / 2 : -e.offsetHeight / 2, C = f > 0 ? -n.offsetHeight / 2 : n.offsetHeight / 2;
+    u = { x: 0, y: b + (f > 0 ? p : -p) }, g = { x: 0, y: C + (f > 0 ? -p : p) };
   } else {
-    const v = Math.atan2(f, a), C = e.offsetWidth / 2 * Math.cos(v), T = e.offsetHeight / 2 * Math.sin(v), h = -(n.offsetWidth / 2) * Math.cos(v), m = -(n.offsetHeight / 2) * Math.sin(v), x = p * 0.7 * (a > 0 ? 1 : -1), E = p * 0.7 * (f > 0 ? 1 : -1);
+    const b = Math.atan2(f, a), C = e.offsetWidth / 2 * Math.cos(b), T = e.offsetHeight / 2 * Math.sin(b), h = -(n.offsetWidth / 2) * Math.cos(b), m = -(n.offsetHeight / 2) * Math.sin(b), x = p * 0.7 * (a > 0 ? 1 : -1), E = p * 0.7 * (f > 0 ? 1 : -1);
     u = { x: C + x, y: T + E }, g = { x: h - x, y: m - E };
   }
   return {
@@ -1084,24 +1085,24 @@ const Ue = function(t, e, n) {
     const S = Ue(t, e, n);
     o.delta1 = S.delta1, o.delta2 = S.delta2;
   }
-  const i = j(t, e, o.delta1), r = j(t, n, o.delta2), { x: c, y: l } = I(i), { ctrlX: a, ctrlY: f } = i, { ctrlX: d, ctrlY: p } = r, { x: w, y } = I(r), u = q(d, p, w, y);
+  const i = q(t, e, o.delta1), r = q(t, n, o.delta2), { x: c, y: l } = I(i), { ctrlX: a, ctrlY: f } = i, { ctrlX: d, ctrlY: p } = r, { x: w, y } = I(r), u = _(d, p, w, y);
   if (!u) return;
   const g = `M ${u.x1} ${u.y1} L ${w} ${y} L ${u.x2} ${u.y2}`;
-  let b = "";
+  let v = "";
   if (o.bidirectional) {
-    const S = q(a, f, c, l);
+    const S = _(a, f, c, l);
     if (!S) return;
-    b = `M ${S.x1} ${S.y1} L ${c} ${l} L ${S.x2} ${S.y2}`;
+    v = `M ${S.x1} ${S.y1} L ${c} ${l} L ${S.x2} ${S.y2}`;
   }
-  const v = Ae(`M ${c} ${l} C ${a} ${f} ${d} ${p} ${w} ${y}`, g, b, o.style), { x: C, y: T } = At(c, l, a, f, d, p, w, y), h = o.style?.labelColor || "rgb(235, 95, 82)", m = "a-" + o.id;
-  v.id = m;
-  const x = t.markdown ? t.markdown(o.label, o) : o.label, E = tt(x, C, T, {
+  const b = Ae(`M ${c} ${l} C ${a} ${f} ${d} ${p} ${w} ${y}`, g, v, o.style), { x: C, y: T } = At(c, l, a, f, d, p, w, y), h = o.style?.labelColor || "rgb(235, 95, 82)", m = "a-" + o.id;
+  b.id = m;
+  const x = t.markdown ? t.markdown(o.label, o) : o.label, E = Q(x, C, T, {
     anchor: "middle",
     color: h,
     dataType: "arrow",
     svgId: m
   });
-  v.labelEl = E, v.arrowObj = o, v.dataset.linkid = o.id, t.labelContainer.appendChild(E), t.arrowSvg.appendChild(v), K(E), s || (t.arrows.push(o), t.currentArrow = v, Ht(t, o, i, r));
+  b.labelEl = E, b.arrowObj = o, b.dataset.linkid = o.id, t.labelContainer.appendChild(E), t.arrowSvg.appendChild(b), U(E), s || (t.arrows.push(o), t.currentArrow = b, Ht(t, o, i, r));
 }, Ke = function(t, e, n = {}) {
   const o = {
     id: Y(),
@@ -1115,7 +1116,7 @@ const Ue = function(t, e, n) {
     obj: o
   });
 }, Je = function(t) {
-  J(this);
+  K(this);
   const e = { ...t, id: Y() };
   it(this, this.findEle(e.from), this.findEle(e.to), e), this.bus.fire("operation", {
     name: "createArrow",
@@ -1124,7 +1125,7 @@ const Ue = function(t, e, n) {
 }, Ze = function(t) {
   let e;
   if (t ? e = t : e = this.currentArrow, !e) return;
-  J(this);
+  K(this);
   const n = e.arrowObj.id;
   this.arrows = this.arrows.filter((o) => o.id !== n), e.labelEl?.remove(), e.remove(), this.bus.fire("operation", {
     name: "removeArrow",
@@ -1134,11 +1135,11 @@ const Ue = function(t, e, n) {
   });
 }, Qe = function(t) {
   this.currentArrow = t;
-  const e = t.arrowObj, n = this.findEle(e.from), o = this.findEle(e.to), s = j(this, n, e.delta1), i = j(this, o, e.delta2);
+  const e = t.arrowObj, n = this.findEle(e.from), o = this.findEle(e.to), s = q(this, n, e.delta1), i = q(this, o, e.delta2);
   this.editable ? Ht(this, e, s, i) : $t(t, Nt), this.bus.fire("selectArrow", e);
 }, tn = function() {
-  J(this), this.currentArrow = null, this.bus.fire("unselectArrow");
-}, Q = function(t, e) {
+  K(this), this.currentArrow = null, this.bus.fire("unselectArrow");
+}, Z = function(t, e) {
   const n = document.createElementNS(k, "path");
   return D(n, {
     d: t,
@@ -1151,11 +1152,11 @@ const Ue = function(t, e, n) {
 }, $t = function(t, e) {
   const n = document.createElementNS(k, "g");
   n.setAttribute("class", "arrow-highlight"), n.setAttribute("opacity", "0.45");
-  const o = Q(t.line.getAttribute("d"), e);
+  const o = Z(t.line.getAttribute("d"), e);
   n.appendChild(o);
-  const s = Q(t.arrow1.getAttribute("d"), e);
+  const s = Z(t.arrow1.getAttribute("d"), e);
   if (n.appendChild(s), t.arrow2.getAttribute("d")) {
-    const i = Q(t.arrow2.getAttribute("d"), e);
+    const i = Z(t.arrow2.getAttribute("d"), e);
     n.appendChild(i);
   }
   t.insertBefore(n, t.firstChild);
@@ -1167,21 +1168,21 @@ const Ue = function(t, e, n) {
   if (!e) return;
   const n = e.querySelectorAll("path");
   n.length >= 1 && n[0].setAttribute("d", t.line.getAttribute("d")), n.length >= 2 && n[1].setAttribute("d", t.arrow1.getAttribute("d")), n.length >= 3 && t.arrow2.getAttribute("d") && n[2].setAttribute("d", t.arrow2.getAttribute("d"));
-}, J = function(t) {
+}, K = function(t) {
   t.helper1?.destroy(), t.helper2?.destroy(), t.linkController.style.display = "none", t.P2.style.display = "none", t.P3.style.display = "none", t.currentArrow && en(t.currentArrow);
 }, Ht = function(t, e, n, o) {
   const { linkController: s, P2: i, P3: r, line1: c, line2: l, nodes: a, map: f, currentArrow: d, bus: p } = t;
   if (!d) return;
   s.style.display = "initial", i.style.display = "initial", r.style.display = "initial", a.appendChild(s), a.appendChild(i), a.appendChild(r), $t(d, Nt);
-  let { x: w, y } = I(n), { ctrlX: u, ctrlY: g } = n, { ctrlX: b, ctrlY: v } = o, { x: C, y: T } = I(o);
-  i.style.cssText = `top:${g}px;left:${u}px;`, r.style.cssText = `top:${v}px;left:${b}px;`, V(c, w, y, u, g), V(l, b, v, C, T), t.helper1 = gt.create(i), t.helper2 = gt.create(r), t.helper1.init(f, (h, m) => {
+  let { x: w, y } = I(n), { ctrlX: u, ctrlY: g } = n, { ctrlX: v, ctrlY: b } = o, { x: C, y: T } = I(o);
+  i.style.cssText = `top:${g}px;left:${u}px;`, r.style.cssText = `top:${b}px;left:${v}px;`, V(c, w, y, u, g), V(l, v, b, C, T), t.helper1 = gt.create(i), t.helper2 = gt.create(r), t.helper1.init(f, (h, m) => {
     u = u + h / t.scaleVal, g = g + m / t.scaleVal;
     const x = I({ ...n, ctrlX: u, ctrlY: g });
-    w = x.x, y = x.y, i.style.top = g + "px", i.style.left = u + "px", mt(d, w, y, u, g, b, v, C, T, e), V(c, w, y, u, g), e.delta1.x = Math.round(u - n.cx), e.delta1.y = Math.round(g - n.cy), p.fire("updateArrowDelta", e);
+    w = x.x, y = x.y, i.style.top = g + "px", i.style.left = u + "px", mt(d, w, y, u, g, v, b, C, T, e), V(c, w, y, u, g), e.delta1.x = Math.round(u - n.cx), e.delta1.y = Math.round(g - n.cy), p.fire("updateArrowDelta", e);
   }), t.helper2.init(f, (h, m) => {
-    b = b + h / t.scaleVal, v = v + m / t.scaleVal;
-    const x = I({ ...o, ctrlX: b, ctrlY: v });
-    C = x.x, T = x.y, r.style.top = v + "px", r.style.left = b + "px", mt(d, w, y, u, g, b, v, C, T, e), V(l, b, v, C, T), e.delta2.x = Math.round(b - o.cx), e.delta2.y = Math.round(v - o.cy), p.fire("updateArrowDelta", e);
+    v = v + h / t.scaleVal, b = b + m / t.scaleVal;
+    const x = I({ ...o, ctrlX: v, ctrlY: b });
+    C = x.x, T = x.y, r.style.top = b + "px", r.style.left = v + "px", mt(d, w, y, u, g, v, b, C, T, e), V(l, v, b, C, T), e.delta2.x = Math.round(v - o.cx), e.delta2.y = Math.round(b - o.cy), p.fire("updateArrowDelta", e);
   });
 };
 function on() {
@@ -1196,10 +1197,10 @@ function on() {
   this.nodes.appendChild(this.arrowSvg);
 }
 function sn(t) {
-  J(this), t && t.labelEl && Lt(this, t.labelEl, t.arrowObj);
+  K(this), t && t.labelEl && Lt(this, t.labelEl, t.arrowObj);
 }
 function rn() {
-  this.arrows = this.arrows.filter((t) => _(t.from, this.nodeData) && _(t.to, this.nodeData));
+  this.arrows = this.arrows.filter((t) => G(t.from, this.nodeData) && G(t.to, this.nodeData));
 }
 const cn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -1266,19 +1267,19 @@ const cn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   return s.parent ? i = o.closest("me-main").className : i = t.findEle(s.children[n].id).closest("me-main").className, i;
 }, rt = function(t, e) {
   const { id: n, label: o, parent: s, start: i, end: r, style: c } = e, { nodes: l, theme: a, summarySvg: f } = t, p = t.findEle(s).nodeObj, w = dn(t, e);
-  let y = 1 / 0, u = 0, g = 0, b = 0;
+  let y = 1 / 0, u = 0, g = 0, v = 0;
   for (let B = i; B <= r; B++) {
     const ct = p.children?.[B];
     if (!ct)
       return t.removeSummary(n), null;
     const R = hn(t.findEle(ct.id)), { offsetLeft: X, offsetTop: lt } = P(l, R), at = i === r ? 10 : 20;
-    B === i && (g = lt + at), B === r && (b = lt + R.offsetHeight - at), X < y && (y = X), R.offsetWidth + X > u && (u = R.offsetWidth + X);
+    B === i && (g = lt + at), B === r && (v = lt + R.offsetHeight - at), X < y && (y = X), R.offsetWidth + X > u && (u = R.offsetWidth + X);
   }
-  let v, C;
-  const T = p.parent ? 10 : 0, h = g + T, m = b + T, x = (h + m) / 2, E = c?.stroke || a.cssVar["--color"], S = c?.labelColor || a.cssVar["--color"], M = "s-" + n, N = t.markdown ? t.markdown(o, e) : o;
-  w === O.LHS ? (v = yt(`M ${y + 10} ${h} c -5 0 -10 5 -10 10 L ${y} ${m - 10} c 0 5 5 10 10 10 M ${y} ${x} h -10`, E), C = tt(N, y - 20, x, { anchor: "end", color: S, dataType: "summary", svgId: M })) : (v = yt(`M ${u - 10} ${h} c 5 0 10 5 10 10 L ${u} ${m - 10} c 0 5 -5 10 -10 10 M ${u} ${x} h 10`, E), C = tt(N, u + 20, x, { anchor: "start", color: S, dataType: "summary", svgId: M }));
+  let b, C;
+  const T = p.parent ? 10 : 0, h = g + T, m = v + T, x = (h + m) / 2, E = c?.stroke || a.cssVar["--color"], S = c?.labelColor || a.cssVar["--color"], M = "s-" + n, N = t.markdown ? t.markdown(o, e) : o;
+  w === O.LHS ? (b = yt(`M ${y + 10} ${h} c -5 0 -10 5 -10 10 L ${y} ${m - 10} c 0 5 5 10 10 10 M ${y} ${x} h -10`, E), C = Q(N, y - 20, x, { anchor: "end", color: S, dataType: "summary", svgId: M })) : (b = yt(`M ${u - 10} ${h} c 5 0 10 5 10 10 L ${u} ${m - 10} c 0 5 -5 10 -10 10 M ${u} ${x} h 10`, E), C = Q(N, u + 20, x, { anchor: "start", color: S, dataType: "summary", svgId: M }));
   const $ = an(M);
-  return $.appendChild(v), t.labelContainer.appendChild(C), K(C), $.summaryObj = e, $.labelEl = C, f.appendChild($), $;
+  return $.appendChild(b), t.labelContainer.appendChild(C), U(C), $.summaryObj = e, $.labelEl = C, f.appendChild($), $;
 }, fn = function(t = {}) {
   if (!this.currentNodes) return;
   const { currentNodes: e, summaries: n, bus: o } = this, { parent: s, start: i, end: r } = ln(e), c = { id: Y(), parent: s, start: i, end: r, label: "summary", style: t.style }, l = rt(this, c);
@@ -1312,7 +1313,7 @@ const cn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   }), this.nodes.insertAdjacentElement("beforeend", this.summarySvg);
 }, wn = function(t) {
   t && t.labelEl && Lt(this, t.labelEl, t.summaryObj);
-}, vn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, bn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   createSummary: fn,
   createSummaryFrom: un,
@@ -1322,7 +1323,7 @@ const cn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   selectSummary: gn,
   unselectSummary: mn
 }, Symbol.toStringTag, { value: "Module" })), L = "http://www.w3.org/2000/svg";
-function bn(t, e) {
+function vn(t, e) {
   const n = document.createElementNS(L, "svg");
   return D(n, {
     version: "1.1",
@@ -1422,7 +1423,7 @@ function Dn(t, e) {
   }), i;
 }
 const F = 100, Ln = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">', Mn = (t, e = !1) => {
-  const n = t.nodes, o = n.offsetHeight + F * 2, s = n.offsetWidth + F * 2, i = bn(o + "px", s + "px"), r = document.createElementNS(L, "svg"), c = document.createElementNS(L, "rect");
+  const n = t.nodes, o = n.offsetHeight + F * 2, s = n.offsetWidth + F * 2, i = vn(o + "px", s + "px"), r = document.createElementNS(L, "svg"), c = document.createElementNS(L, "rect");
   D(c, {
     x: "0",
     y: "0",
@@ -1481,7 +1482,7 @@ const Nn = function(t = !1, e) {
   exportPng: An,
   exportSvg: Nn
 }, Symbol.toStringTag, { value: "Module" })), Hn = {}, In = {
-  getObjById: _,
+  getObjById: G,
   generateNewObj: Ot,
   layout: Ft,
   linkDiv: $e,
@@ -1496,7 +1497,7 @@ const Nn = function(t = !1, e) {
   ...Se,
   ...Hn,
   ...cn,
-  ...vn,
+  ...bn,
   ...$n,
   init(t) {
     if (t = JSON.parse(JSON.stringify(t)), !t || !t.nodeData) return new Error("MindElixir: `data` is required");
@@ -1512,7 +1513,7 @@ const Nn = function(t = !1, e) {
   enableMobileMultiSelect(t) {
     this.mobileMultiSelect = t;
   }
-}, On = "5.12.2-beta.3";
+}, On = "5.12.2";
 function Bn(t) {
   return {
     x: 0,
@@ -1558,8 +1559,8 @@ function A({
   compact: y,
   theme: u,
   alignment: g,
-  scaleSensitivity: b,
-  scaleMax: v,
+  scaleSensitivity: v,
+  scaleMax: b,
   scaleMin: C,
   handleWheel: T,
   markdown: h,
@@ -1570,9 +1571,9 @@ function A({
   let S = null;
   const M = Object.prototype.toString.call(t);
   if (M === "[object HTMLDivElement]" ? S = t : M === "[object String]" && (S = document.querySelector(t)), !S) throw new Error("MindElixir: el is not a valid element");
-  S.style.position = "relative", S.innerHTML = "", this.el = S, this.disposable = [], this.before = l || {}, this.newTopicName = a || "New Node", this.contextMenu = o ?? !0, this.toolBar = s ?? !0, this.keypress = i ?? !0, this.mouseSelectionButton = r ?? 0, this.direction = e ?? 1, this.editable = n ?? !0, this.allowUndo = f ?? !0, this.scaleSensitivity = b ?? 0.1, this.scaleMax = v ?? 1.4, this.scaleMin = C ?? 0.2, this.generateMainBranch = d || Pt, this.generateSubBranch = p || kt, this.overflowHidden = w ?? !1, this.compact = y ?? !1, this.alignment = g ?? "root", this.handleWheel = T ?? !0, this.markdown = h || void 0, this.imageProxy = m || void 0, this.currentNodes = [], this.currentArrow = null, this.scaleVal = 1, this.tempDirection = null, this.mobileMultiSelect = E ?? !1, this.panHelper = Bn(this), this.bus = Ne(), this.container = document.createElement("div"), this.selectionContainer = c || this.container, this.container.className = "map-container";
+  S.style.position = "relative", S.innerHTML = "", this.el = S, this.disposable = [], this.before = l || {}, this.newTopicName = a || "New Node", this.contextMenu = o ?? !0, this.toolBar = s ?? !0, this.keypress = i ?? !0, this.mouseSelectionButton = r ?? 0, this.direction = e ?? 1, this.editable = n ?? !0, this.allowUndo = f ?? !0, this.scaleSensitivity = v ?? 0.1, this.scaleMax = b ?? 1.4, this.scaleMin = C ?? 0.2, this.generateMainBranch = d || Pt, this.generateSubBranch = p || kt, this.overflowHidden = w ?? !1, this.compact = y ?? !1, this.alignment = g ?? "root", this.handleWheel = T ?? !0, this.markdown = h || void 0, this.imageProxy = m || void 0, this.currentNodes = [], this.currentArrow = null, this.scaleVal = 1, this.tempDirection = null, this.mobileMultiSelect = E ?? !1, this.panHelper = Bn(this), this.bus = Ne(), this.container = document.createElement("div"), this.selectionContainer = c || this.container, this.container.className = "map-container";
   const N = window.matchMedia("(prefers-color-scheme: dark)");
-  this.theme = u || (N.matches ? et : G);
+  this.theme = u || (N.matches ? et : tt);
   const $ = document.createElement("div");
   $.className = "map-canvas", this.map = $, this.container.setAttribute("tabindex", "0"), this.container.appendChild(this.map), this.el.appendChild(this.container), this.nodes = document.createElement("me-nodes"), this.lines = W("lines"), this.summarySvg = W("summary"), this.linkController = W("linkcontroller"), this.P2 = document.createElement("div"), this.P3 = document.createElement("div"), this.P2.className = this.P3.className = "circle", this.P2.style.display = this.P3.style.display = "none", this.line1 = pt(), this.line2 = pt(), this.linkController.appendChild(this.line1), this.linkController.appendChild(this.line2), this.arrowSvg = W("topiclinks"), this.labelContainer = document.createElement("div"), this.labelContainer.className = "label-container", this.map.appendChild(this.nodes), this.overflowHidden ? this.container.style.overflow = "hidden" : this.disposable.push(ke(this)), x && (this.pasteHandler = x);
 }
@@ -1586,7 +1587,7 @@ Object.defineProperty(A.prototype, "currentNode", {
 A.LEFT = 0;
 A.RIGHT = 1;
 A.SIDE = 2;
-A.THEME = G;
+A.THEME = tt;
 A.DARK_THEME = et;
 A.version = On;
 A.E = Ct;
@@ -1595,6 +1596,6 @@ export {
   Wn as LEFT,
   Yn as RIGHT,
   Rn as SIDE,
-  G as THEME,
+  tt as THEME,
   A as default
 };

package/dist/types/index.d.ts

@@ -84,7 +84,7 @@ declare namespace MindElixir {
         createChildren: (this: MindElixirInstance, wrappers: import("./docs").Wrapper[]) => import("./docs").Children;
         createTopic: (this: MindElixirInstance, nodeObj: import("./docs").NodeObj) => Topic;
         findEle: (this: MindElixirInstance, id: string, el?: HTMLElement) => Topic;
-        changeTheme: (this: MindElixirInstance, theme: Partial<import("./docs").Theme>, shouldRefresh?: boolean) => void;
+        changeTheme: (this: MindElixirInstance, theme: import("./docs").Theme, shouldRefresh?: boolean) => void;
         changeCompact: (this: MindElixirInstance, compact: boolean) => void;
     };
     export var LEFT: number;

package/dist/types/methods.d.ts

@@ -93,7 +93,7 @@ declare const methods: {
     createChildren: (this: MindElixirInstance, wrappers: import("./docs").Wrapper[]) => import("./docs").Children;
     createTopic: (this: MindElixirInstance, nodeObj: import("./types").NodeObj) => import("./docs").Topic;
     findEle: (this: MindElixirInstance, id: string, el?: HTMLElement) => import("./docs").Topic;
-    changeTheme: (this: MindElixirInstance, theme: Partial<import("./types").Theme>, shouldRefresh?: boolean) => void;
+    changeTheme: (this: MindElixirInstance, theme: import("./types").Theme, shouldRefresh?: boolean) => void;
     changeCompact: (this: MindElixirInstance, compact: boolean) => void;
 };
 export default methods;

package/dist/types/utils/theme.d.ts

@@ -1,4 +1,4 @@
 import type { MindElixirInstance } from '../types/index';
 import type { Theme } from '../types/index';
-export declare const changeTheme: (this: MindElixirInstance, theme: Partial<Theme>, shouldRefresh?: boolean) => void;
+export declare const changeTheme: (this: MindElixirInstance, theme: Theme, shouldRefresh?: boolean) => void;
 export declare const changeCompact: (this: MindElixirInstance, compact: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mind-elixir",
-  "version": "5.12.2-beta.3",
+  "version": "5.12.2",
   "type": "module",
   "description": "Mind elixir is a free open source mind map core.",
   "keywords": [