mind-elixir 5.12.1 → 5.12.2-beta.1

package/dist/MindElixirLite.js

@@ -1,4 +1,4 @@
-const Wn = 0, Yn = 1, Rn = 2, tt = {
+const Wn = 0, Yn = 1, Rn = 2, Y = {
   name: "Latte",
   type: "light",
   palette: ["#dd7878", "#ea76cb", "#8839ef", "#e64553", "#fe640b", "#df8e1d", "#40a02b", "#209fb5", "#1e66f5", "#7287fd"],
@@ -56,12 +56,12 @@ const Wn = 0, Yn = 1, Rn = 2, tt = {
 function $t(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
 }
-const G = function(t, e) {
+const _ = 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 = G(t, e.children[n]);
+      const o = _(t, e.children[n]);
       if (o) return o;
     }
     return null;
@@ -76,7 +76,7 @@ const G = function(t, e) {
     wt(o, e);
   });
 };
-function _(t, e, n, o) {
+function q(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,
@@ -85,11 +85,11 @@ function _(t, e, n, o) {
     y2: o + Math.sin(d) * l
   };
 }
-function Y() {
+function R() {
   return ((/* @__PURE__ */ new Date()).getTime().toString(16) + Math.random().toString(16).substring(2)).substring(2, 18);
 }
 const Ht = function() {
-  const t = Y();
+  const t = R();
   return {
     topic: this.newTopicName,
     id: t
@@ -102,7 +102,7 @@ const Ht = function() {
 }, D = (t, e) => {
   for (const n in e)
     t.setAttribute(n, e[n]);
-}, J = (t) => t ? t.tagName === "ME-TPC" : !1, ot = (t) => {
+}, Z = (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) {
@@ -121,11 +121,11 @@ const Ht = function() {
   return Math.sqrt(n * n + o * o);
 }, It = function(t, e) {
   if (!e)
-    return j(t), t;
+    return U(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;
-}, j = function(t) {
+}, U = function(t) {
   if (!t) return;
   const e = t.querySelectorAll(".insert-preview");
   for (const n of e || [])
@@ -199,7 +199,7 @@ function Rt(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 > Yt && 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(), j(e.meet);
+  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);
   const l = 12 * t.scaleVal, a = document.elementFromPoint(n.clientX, n.clientY - l);
   if (dt(a, o)) {
     e.meet = a;
@@ -222,7 +222,7 @@ function Xt(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 && (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;
+    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;
   }
 }
 function ut(t, e) {
@@ -231,7 +231,7 @@ function ut(t, e) {
     e.edgeMoveController.stop();
     for (const o of n)
       o.parentElement.parentElement.style.opacity = "1";
-    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;
+    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;
   }
 }
 const O = {
@@ -383,7 +383,8 @@ function Zt(t) {
     summaries: t.summaries,
     direction: t.direction,
     theme: t.theme,
-    compact: t.compact
+    compact: t.compact,
+    meta: t.meta
   };
 }
 const Qt = function(t, e = !1) {
@@ -498,7 +499,7 @@ const Qt = function(t, e = !1) {
   }, c = s.x - r.x, l = s.y - r.y;
   this.move(c, l);
 }, be = function(t) {
-  this.clearSelection(), t && (t = JSON.parse(JSON.stringify(t)), this.nodeData = t.nodeData, this.arrows = t.arrows || [], this.summaries = t.summaries || [], t.theme && this.changeTheme(t.theme)), nt(this.nodeData), this.layout(), this.linkDiv();
+  this.clearSelection(), t && (t = JSON.parse(JSON.stringify(t)), this.nodeData = t.nodeData, this.arrows = t.arrows || [], this.summaries = t.summaries || [], t.meta && (this.meta = t.meta), t.theme && this.changeTheme(t.theme)), nt(this.nodeData), this.layout(), this.linkDiv();
 }, xe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   cancelFocus: pe,
@@ -645,7 +646,7 @@ function Me(t) {
   }, d = (h) => {
     if (!t.editable) return;
     const m = h.target;
-    if (J(m)) {
+    if (Z(m)) {
       t.selectNode(m), t.beginEdit(m);
       return;
     }
@@ -662,7 +663,7 @@ function Me(t) {
       return;
     }
     if (e.handlePointerDown(h), e.mousedown && (t.ptState = i.Pan), h.button === 0 || h.pointerType === "touch")
-      if (J(m)) {
+      if (Z(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;
@@ -707,7 +708,7 @@ function Me(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;
-      J(m) && !m.classList.contains("selected") && t.selectNode(m), t.bus.fire("showContextMenu", h);
+      Z(m) && !m.classList.contains("selected") && t.selectNode(m), t.bus.fire("showContextMenu", h);
     }, 200);
   }, b = (h) => {
     if (h.stopPropagation(), h.preventDefault(), h.ctrlKey || h.metaKey) return Le(t, h);
@@ -755,11 +756,11 @@ function Pe() {
     }
   };
 }
-const k = "http://www.w3.org/2000/svg", U = function(t) {
+const k = "http://www.w3.org/2000/svg", K = 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";
-}, Q = function(t, e, n, o) {
+}, tt = 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;
@@ -829,7 +830,7 @@ const k = "http://www.w3.org/2000/svg", U = 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, U(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, K(e), "parent" in n ? t.bus.fire("operation", {
       name: "finishEditSummary",
       obj: n
     }) : t.bus.fire("operation", {
@@ -916,10 +917,17 @@ function Ve(t) {
   t.container.append(Re(t)), t.container.append(Xe(t));
 }
 const ze = function(t, e = !0) {
-  this.theme = t;
+  this.theme = {
+    ...this.theme || Y,
+    ...t,
+    cssVar: {
+      ...this.theme?.cssVar || Y.cssVar,
+      ...t.cssVar || {}
+    }
+  }, this.theme.generateMainBranch !== void 0 && (this.generateMainBranch = this.theme.generateMainBranch), this.theme.generateSubBranch !== void 0 && (this.generateSubBranch = this.theme.generateSubBranch);
   const o = {
-    ...(t.type === "dark" ? et : tt).cssVar,
-    ...t.cssVar
+    ...(this.theme.type === "dark" ? et : Y).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);
@@ -975,9 +983,9 @@ function kt(t, e, n, o, s, i, r, c) {
   };
 }
 function _e(t, e, n) {
-  t && (t.dataset.x = e.toString(), t.dataset.y = n.toString(), U(t));
+  t && (t.dataset.x = e.toString(), t.dataset.y = n.toString(), K(t));
 }
-function V(t, e, n, o, s) {
+function z(t, e, n, o, s) {
   D(t, {
     x1: e + "",
     y1: n + "",
@@ -993,7 +1001,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 = _(i, r, c, l);
+  const p = q(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) {
@@ -1002,7 +1010,7 @@ function mt(t, e, n, o, s, i, r, c, l, a) {
     }
   }
   if (a.bidirectional) {
-    const u = _(o, s, e, n);
+    const u = q(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) {
@@ -1018,7 +1026,7 @@ function mt(t, e, n, o, s, i, r, c, l, a) {
   }
   tn(t);
 }
-function q(t, e, n) {
+function j(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,
@@ -1064,27 +1072,27 @@ const qe = function(t, e, n) {
     const S = qe(t, e, n);
     o.delta1 = S.delta1, o.delta2 = S.delta2;
   }
-  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);
+  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);
   if (!u) return;
   const g = `M ${u.x1} ${u.y1} L ${w} ${y} L ${u.x2} ${u.y2}`;
   let b = "";
   if (o.bidirectional) {
-    const S = _(a, f, c, l);
+    const S = q(a, f, c, l);
     if (!S) return;
     b = `M ${S.x1} ${S.y1} L ${c} ${l} L ${S.x2} ${S.y2}`;
   }
   const v = ke(`M ${c} ${l} C ${a} ${f} ${d} ${p} ${w} ${y}`, g, b, o.style), { x: C, y: T } = kt(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 = Q(x, C, T, {
+  const x = t.markdown ? t.markdown(o.label, o) : o.label, E = tt(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), U(E), s || (t.arrows.push(o), t.currentArrow = v, At(t, o, i, r));
+  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, At(t, o, i, r));
 }, je = function(t, e, n = {}) {
   const o = {
-    id: Y(),
+    id: R(),
     label: "Custom Link",
     from: t.nodeObj.id,
     to: e.nodeObj.id,
@@ -1095,8 +1103,8 @@ const qe = function(t, e, n) {
     obj: o
   });
 }, Ue = function(t) {
-  K(this);
-  const e = { ...t, id: Y() };
+  J(this);
+  const e = { ...t, id: R() };
   it(this, this.findEle(e.from), this.findEle(e.to), e), this.bus.fire("operation", {
     name: "createArrow",
     obj: e
@@ -1104,7 +1112,7 @@ const qe = function(t, e, n) {
 }, Ke = function(t) {
   let e;
   if (t ? e = t : e = this.currentArrow, !e) return;
-  K(this);
+  J(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",
@@ -1114,11 +1122,11 @@ const qe = function(t, e, n) {
   });
 }, Je = function(t) {
   this.currentArrow = t;
-  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);
+  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);
   this.editable ? At(this, e, s, i) : Nt(t, Pt), this.bus.fire("selectArrow", e);
 }, Ze = function() {
-  K(this), this.currentArrow = null, this.bus.fire("unselectArrow");
-}, Z = function(t, e) {
+  J(this), this.currentArrow = null, this.bus.fire("unselectArrow");
+}, Q = function(t, e) {
   const n = document.createElementNS(k, "path");
   return D(n, {
     d: t,
@@ -1131,11 +1139,11 @@ const qe = function(t, e, n) {
 }, Nt = function(t, e) {
   const n = document.createElementNS(k, "g");
   n.setAttribute("class", "arrow-highlight"), n.setAttribute("opacity", "0.45");
-  const o = Z(t.line.getAttribute("d"), e);
+  const o = Q(t.line.getAttribute("d"), e);
   n.appendChild(o);
-  const s = Z(t.arrow1.getAttribute("d"), e);
+  const s = Q(t.arrow1.getAttribute("d"), e);
   if (n.appendChild(s), t.arrow2.getAttribute("d")) {
-    const i = Z(t.arrow2.getAttribute("d"), e);
+    const i = Q(t.arrow2.getAttribute("d"), e);
     n.appendChild(i);
   }
   t.insertBefore(n, t.firstChild);
@@ -1147,21 +1155,21 @@ const qe = 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"));
-}, K = function(t) {
+}, J = 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 && Qe(t.currentArrow);
 }, At = 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), Nt(d, Pt);
   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) => {
+  i.style.cssText = `top:${g}px;left:${u}px;`, r.style.cssText = `top:${v}px;left:${b}px;`, z(c, w, y, u, g), z(l, b, v, 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, b, v, C, T, e), z(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);
+    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), z(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);
   });
 };
 function en() {
@@ -1176,10 +1184,10 @@ function en() {
   this.nodes.appendChild(this.arrowSvg);
 }
 function nn(t) {
-  K(this), t && t.labelEl && Lt(this, t.labelEl, t.arrowObj);
+  J(this), t && t.labelEl && Lt(this, t.labelEl, t.arrowObj);
 }
 function on() {
-  this.arrows = this.arrows.filter((t) => G(t.from, this.nodeData) && G(t.to, this.nodeData));
+  this.arrows = this.arrows.filter((t) => _(t.from, this.nodeData) && _(t.to, this.nodeData));
 }
 const sn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -1251,23 +1259,23 @@ const sn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     const ct = p.children?.[B];
     if (!ct)
       return t.removeSummary(n), null;
-    const R = ln(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);
+    const X = ln(t.findEle(ct.id)), { offsetLeft: V, offsetTop: lt } = P(l, X), at = i === r ? 10 : 20;
+    B === i && (g = lt + at), B === r && (b = lt + X.offsetHeight - at), V < y && (y = V), X.offsetWidth + V > u && (u = X.offsetWidth + V);
   }
   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 = Q(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 = Q(N, u + 20, x, { anchor: "start", color: S, dataType: "summary", svgId: M }));
+  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 }));
   const $ = cn(M);
-  return $.appendChild(v), t.labelContainer.appendChild(C), U(C), $.summaryObj = e, $.labelEl = C, f.appendChild($), $;
+  return $.appendChild(v), t.labelContainer.appendChild(C), K(C), $.summaryObj = e, $.labelEl = C, f.appendChild($), $;
 }, hn = function(t = {}) {
   if (!this.currentNodes) return;
-  const { currentNodes: e, summaries: n, bus: o } = this, { parent: s, start: i, end: r } = rn(e), c = { id: Y(), parent: s, start: i, end: r, label: "summary", style: t.style }, l = rt(this, c);
+  const { currentNodes: e, summaries: n, bus: o } = this, { parent: s, start: i, end: r } = rn(e), c = { id: R(), parent: s, start: i, end: r, label: "summary", style: t.style }, l = rt(this, c);
   n.push(c), this.editSummary(l), o.fire("operation", {
     name: "createSummary",
     obj: c
   });
 }, dn = function(t) {
-  const e = Y(), n = { ...t, id: e };
+  const e = R(), n = { ...t, id: e };
   rt(this, n), this.summaries.push(n), this.bus.fire("operation", {
     name: "createSummary",
     obj: n
@@ -1361,7 +1369,7 @@ function Cn(t, e) {
     "stroke-width": n.borderWidth
   }), i;
 }
-function z(t, e, n = !1) {
+function F(t, e, n = !1) {
   const o = getComputedStyle(e), { offsetLeft: s, offsetTop: i } = P(t.nodes, e), r = document.createElementNS(L, "rect");
   D(r, {
     x: s + "",
@@ -1401,8 +1409,8 @@ function En(t, e) {
     href: e.src
   }), i;
 }
-const F = 100, Tn = '<?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">', Dn = (t, e = !1) => {
-  const n = t.nodes, o = n.offsetHeight + F * 2, s = n.offsetWidth + F * 2, i = wn(o + "px", s + "px"), r = document.createElementNS(L, "svg"), c = document.createElementNS(L, "rect");
+const G = 100, Tn = '<?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">', Dn = (t, e = !1) => {
+  const n = t.nodes, o = n.offsetHeight + G * 2, s = n.offsetWidth + G * 2, i = wn(o + "px", s + "px"), r = document.createElementNS(L, "svg"), c = document.createElementNS(L, "rect");
   D(c, {
     x: "0",
     y: "0",
@@ -1419,18 +1427,18 @@ const F = 100, Tn = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "
   a && r.appendChild(a);
   const f = n.querySelector(".summary")?.cloneNode(!0);
   return f && r.appendChild(f), n.querySelectorAll("me-tpc").forEach((d) => {
-    d.nodeObj.dangerouslySetInnerHTML ? r.appendChild(z(t, d, !e)) : (r.appendChild(Cn(t, d)), r.appendChild(z(t, d.text, !e)));
+    d.nodeObj.dangerouslySetInnerHTML ? r.appendChild(F(t, d, !e)) : (r.appendChild(Cn(t, d)), r.appendChild(F(t, d.text, !e)));
   }), n.querySelectorAll(".tags > span").forEach((d) => {
-    r.appendChild(z(t, d));
+    r.appendChild(F(t, d));
   }), n.querySelectorAll(".icons > span").forEach((d) => {
-    r.appendChild(z(t, d));
+    r.appendChild(F(t, d));
   }), n.querySelectorAll(".hyper-link").forEach((d) => {
     r.appendChild(Sn(t, d));
   }), n.querySelectorAll("img").forEach((d) => {
     r.appendChild(En(t, d));
   }), D(r, {
-    x: F + "",
-    y: F + "",
+    x: G + "",
+    y: G + "",
     overflow: "visible"
   }), i.appendChild(r), i;
 }, Ln = (t, e) => (e && t.insertAdjacentHTML("afterbegin", "<style>" + e + "</style>"), Tn + t.outerHTML);
@@ -1461,7 +1469,7 @@ const Pn = function(t = !1, e) {
   exportPng: kn,
   exportSvg: Pn
 }, Symbol.toStringTag, { value: "Module" })), An = {}, $n = {
-  getObjById: G,
+  getObjById: _,
   generateNewObj: Ht,
   layout: Vt,
   linkDiv: Ne,
@@ -1480,7 +1488,7 @@ const Pn = function(t = !1, e) {
   ...Nn,
   init(t) {
     if (t = JSON.parse(JSON.stringify(t)), !t || !t.nodeData) return new Error("MindElixir: `data` is required");
-    t.direction !== void 0 && (this.direction = t.direction), t.compact !== void 0 && (this.compact = t.compact), this.changeTheme(t.theme || this.theme, !1), this.nodeData = t.nodeData, nt(this.nodeData), this.arrows = t.arrows || [], this.summaries = t.summaries || [], this.tidyArrow(), this.toolBar && Ve(this), this.layout(), this.linkDiv(), this.toCenter();
+    t.direction !== void 0 && (this.direction = t.direction), t.compact !== void 0 && (this.compact = t.compact), this.changeTheme(t.theme || this.theme, !1), t.meta && (this.meta = t.meta), this.nodeData = t.nodeData, nt(this.nodeData), this.arrows = t.arrows || [], this.summaries = t.summaries || [], this.tidyArrow(), this.toolBar && Ve(this), this.layout(), this.linkDiv(), this.toCenter();
   },
   destroy() {
     this.disposable.forEach((t) => t()), this.el && (this.el.innerHTML = ""), this.el = void 0, this.nodeData = void 0, this.arrows = void 0, this.summaries = void 0, this.currentArrow = void 0, this.currentNodes = void 0, this.currentSummary = void 0, this.theme = void 0, this.direction = void 0, this.bus = void 0, this.container = void 0, this.map = void 0, this.lines = void 0, this.linkController = void 0, this.arrowSvg = void 0, this.P2 = void 0, this.P3 = void 0, this.line1 = void 0, this.line2 = void 0, this.nodes = void 0, this.selection?.destroy(), this.selection = void 0;
@@ -1510,7 +1518,7 @@ function In({ pT: t, pL: e, pW: n, pH: o, cT: s, cL: i, cW: r, cH: c, direction:
   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 On = "5.12.1";
+const On = "5.12.2-beta.1";
 function Bn(t) {
   return {
     x: 0,
@@ -1570,7 +1578,7 @@ function A({
   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 || Hn, this.generateSubBranch = p || In, 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 = Pe(), 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 : tt);
+  this.theme = u || (N.matches ? et : Y);
   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(Me(this)), x && (this.pasteHandler = x);
 }
@@ -1584,7 +1592,7 @@ Object.defineProperty(A.prototype, "currentNode", {
 A.LEFT = 0;
 A.RIGHT = 1;
 A.SIDE = 2;
-A.THEME = tt;
+A.THEME = Y;
 A.DARK_THEME = et;
 A.version = On;
 A.E = Ct;
@@ -1593,6 +1601,6 @@ export {
   Wn as LEFT,
   Yn as RIGHT,
   Rn as SIDE,
-  tt as THEME,
+  Y as THEME,
   A as default
 };

package/dist/example.js

@@ -1,5 +1,4 @@
 const e = {
-  compact: !0,
   nodeData: {
     id: "me-root",
     topic: "Mind Elixir",
@@ -311,6 +310,7 @@ const e = {
         children: [
           {
             topic: `Drag a node to another node
+
 and the former one will become a child node of latter one`,
             id: "bd1f07c598e729dc"
           }

package/dist/types/branchTests.d.ts

@@ -0,0 +1,8 @@
+import type { MainLineParams, SubLineParams } from './utils/generateBranch';
+import type { MindElixirInstance } from './types/index';
+export declare function markmapMain({ pT, pL, pW, pH, cT, cL, cW, cH, direction }: MainLineParams): string;
+export declare function markmapSub(this: MindElixirInstance, { pT, pL, pW, pH, cT, cL, cW, cH, direction }: SubLineParams): string;
+export declare function straightMain({ pT, pL, pW, pH, cT, cL, cW, cH, direction }: MainLineParams): string;
+export declare function straightSub(this: MindElixirInstance, { pT, pL, pW, pH, cT, cL, cW, cH, direction }: SubLineParams): string;
+export declare function straightUnderlineMain({ pT, pL, pW, pH, cT, cL, cW, cH, direction }: MainLineParams): string;
+export declare function straightUnderlineSub(this: MindElixirInstance, { pT, pL, pW, pH, cT, cL, cW, cH, direction }: SubLineParams): string;

package/dist/types/dev.d.ts

@@ -1 +1,2 @@
 import 'katex/dist/katex.min.css';
+import '../dev.css';

package/dist/types/index.d.ts

@@ -50,8 +50,7 @@ declare namespace MindElixir {
         getDataString: (this: MindElixirInstance) => string;
         getData: (this: MindElixirInstance) => MindElixirData;
         enableEdit: (this: MindElixirInstance) => void;
-        disableEdit: (// summary container
-        this: MindElixirInstance) => void;
+        disableEdit: (this: MindElixirInstance) => void;
         scale: (this: MindElixirInstance, scaleVal: number, offset?: {
             x: number;
             y: number;
@@ -85,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: import("./docs").Theme, shouldRefresh?: boolean) => void;
+        changeTheme: (this: MindElixirInstance, theme: Partial<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: import("./types").Theme, shouldRefresh?: boolean) => void;
+    changeTheme: (this: MindElixirInstance, theme: Partial<import("./types").Theme>, shouldRefresh?: boolean) => void;
     changeCompact: (this: MindElixirInstance, compact: boolean) => void;
 };
 export default methods;

package/dist/types/types/index.d.ts

@@ -9,6 +9,7 @@ import type { ContextMenuOption } from '../plugin/contextMenu';
 import type { createPanHelper } from '../utils/panHelper';
 import type SelectionArea from '../viselect/src';
 export { type MindElixirMethods } from '../methods';
+export type { MainLineParams, SubLineParams } from '../utils/generateBranch';
 export declare const DirectionClass: {
     readonly LHS: "lhs";
     readonly RHS: "rhs";
@@ -17,6 +18,35 @@ export type DirectionClass = (typeof DirectionClass)[keyof typeof DirectionClass
 type Before = Partial<{
     [K in Operations]: (...args: Parameters<OperationMap[K]>) => Promise<boolean> | boolean;
 }>;
+/**
+ * MindElixir Theme
+ *
+ * @public
+ */
+export type ThemeCssVar = {
+    '--node-gap-x': string;
+    '--node-gap-y': string;
+    '--main-gap-x': string;
+    '--main-gap-y': string;
+    '--main-color': string;
+    '--main-bgcolor': string;
+    '--main-bgcolor-transparent': string;
+    '--main-border'?: string;
+    '--color': string;
+    '--bgcolor': string;
+    '--selected': string;
+    '--accent-color': string;
+    '--root-color': string;
+    '--root-bgcolor': string;
+    '--root-border-color': string;
+    '--root-radius': string;
+    '--main-radius': string;
+    '--topic-padding': string;
+    '--panel-color': string;
+    '--panel-bgcolor': string;
+    '--panel-border-color': string;
+    '--map-padding': string;
+};
 /**
  * MindElixir Theme
  *
@@ -32,29 +62,9 @@ export type Theme = {
      * Color palette for main branches
      */
     palette: string[];
-    cssVar: {
-        '--node-gap-x': string;
-        '--node-gap-y': string;
-        '--main-gap-x': string;
-        '--main-gap-y': string;
-        '--main-color': string;
-        '--main-bgcolor': string;
-        '--main-bgcolor-transparent': string;
-        '--color': string;
-        '--bgcolor': string;
-        '--selected': string;
-        '--accent-color': string;
-        '--root-color': string;
-        '--root-bgcolor': string;
-        '--root-border-color': string;
-        '--root-radius': string;
-        '--main-radius': string;
-        '--topic-padding': string;
-        '--panel-color': string;
-        '--panel-bgcolor': string;
-        '--panel-border-color': string;
-        '--map-padding': string;
-    };
+    cssVar?: Partial<ThemeCssVar>;
+    generateMainBranch?: (this: MindElixirInstance, params: MainLineParams) => string;
+    generateSubBranch?: (this: MindElixirInstance, params: SubLineParams) => string;
 };
 export type Alignment = 'root' | 'nodes';
 export interface KeypressOptions {
@@ -65,7 +75,10 @@ export interface KeypressOptions {
  *
  * @public
  */
-export interface MindElixirInstance extends Omit<Required<Options>, 'markdown' | 'imageProxy'>, MindElixirMethods {
+export interface MindElixirInstance extends Omit<Required<Options>, 'markdown' | 'imageProxy' | 'theme'>, MindElixirMethods {
+    theme: Omit<Theme, 'cssVar'> & {
+        cssVar: ThemeCssVar;
+    };
     markdown?: (markdown: string, obj: NodeObj | Arrow | Summary) => string;
     imageProxy?: (url: string) => string;
     dragged: Topic[] | null;
@@ -83,6 +96,7 @@ export interface MindElixirInstance extends Omit<Required<Options>, 'markdown' |
     currentArrow: ArrowSvg | null;
     scaleVal: number;
     tempDirection: 0 | 1 | 2 | null;
+    meta?: Record<string, any>;
     container: HTMLElement;
     map: HTMLElement;
     root: HTMLElement;
@@ -265,4 +279,8 @@ export type MindElixirData = {
     direction?: 0 | 1 | 2;
     theme?: Theme;
     compact?: boolean;
+    /**
+     * Extension fields to store arbitrary metadata for the map.
+     */
+    meta?: Record<string, any>;
 };

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: Theme, shouldRefresh?: boolean) => void;
+export declare const changeTheme: (this: MindElixirInstance, theme: Partial<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.1",
+  "version": "5.12.2-beta.1",
   "type": "module",
   "description": "Mind elixir is a free open source mind map core.",
   "keywords": [
@@ -103,4 +103,4 @@
     "vite": "^7.1.7",
     "vite-plugin-istanbul": "^7.2.0"
   }
-}
+}