@draftably/editor 0.0.0-stage → 0.1.0

package/dist/chunks/diagram-ODIL2UCW-DTWXxcOn.js

@@ -0,0 +1,346 @@
+import { I as W } from "./chunk-2Q5K7J3B-gqtzQ8ux.js";
+import { p as X } from "./chunk-JWPE2WC7-CnAFS2xF.js";
+import { q as z, b as G, s as Y, t as P, g as q, a as F, _ as g, N as k, l as A, Q as Z, d as j, L as E, A as U, j as Q, aq as J, O as K, ar as ee } from "./mermaid.core-DXv6D2Sm.js";
+import { p as te } from "./cynefin-EF2NZ3EQ-Bt6b88hY.js";
+var L = /[─━│┃└┗├┣]/, D = /[└┗├┣]/, ne = /[─━]/, N = /^[\s│┃]+$/, T = /^\s*(title[\t ]|accTitle[\t ]*:|accDescr[\t ]*[:{])/, V = /^\s*%%/, re = "    ";
+function _(n) {
+  return n.some((t) => L.test(t));
+}
+g(_, "isBoxDrawingFormat");
+function M(n) {
+  for (const t of n) {
+    const e = D.exec(t);
+    if (e?.index && e.index > 0)
+      return e.index;
+  }
+  return 4;
+}
+g(M, "inferSegmentWidth");
+function S(n, t) {
+  return n.replace(/\bline\s+(\d+)\b/gi, (e, r) => {
+    const s = parseInt(r, 10), i = t.get(s);
+    return i ? `line ${i}` : e;
+  });
+}
+g(S, "remapErrorLines");
+function R(n) {
+  const t = n.split(`
+`), e = /* @__PURE__ */ new Map();
+  let r = -1;
+  for (const [p, c] of t.entries())
+    if (c.trim() === "treeView-beta") {
+      r = p;
+      break;
+    }
+  if (r === -1)
+    return { text: n, lineMap: e };
+  const s = [];
+  for (let p = r + 1; p < t.length; p++) {
+    const c = t[p];
+    c.trim() === "" || V.test(c) || T.test(c) || N.test(c) || s.push(c.replace(/\t/g, "    "));
+  }
+  if (!_(s))
+    return { text: n, lineMap: e };
+  const i = M(s), o = [];
+  let a = 0;
+  for (let p = 0; p <= r; p++)
+    o.push(t[p]), a++, e.set(a, p + 1);
+  for (let p = r + 1; p < t.length; p++) {
+    const c = t[p], d = c.trim(), h = p + 1;
+    if (d === "") {
+      o.push(c), a++, e.set(a, h);
+      continue;
+    }
+    if (V.test(c)) {
+      o.push(c), a++, e.set(a, h);
+      continue;
+    }
+    if (T.test(c)) {
+      o.push(c), a++, e.set(a, h);
+      continue;
+    }
+    if (N.test(c))
+      continue;
+    const l = c.replace(/\t/g, "    "), w = D.exec(l);
+    if (w?.index !== void 0) {
+      const f = w.index, m = Math.round(f / i) + 1;
+      let u = f + 1;
+      for (; u < l.length && ne.test(l[u]); )
+        u++;
+      for (; u < l.length && l[u] === " "; )
+        u++;
+      const v = l.slice(u).trimEnd();
+      if (!v)
+        throw new Error(
+          `Line ${h}: Empty node — expected a filename or directory name after the box-drawing prefix`
+        );
+      const O = re.repeat(m);
+      o.push(O + v), a++, e.set(a, h);
+    } else {
+      if (/^[\s─━│┃└┗├┣]+$/.test(l))
+        continue;
+      if (L.test(l))
+        o.push(c), a++, e.set(a, h);
+      else {
+        if (/^\s+/.test(l))
+          throw new Error(
+            `Line ${h}: Unexpected indentation without box-drawing characters. In box-drawing format, use ├── or └── prefixes for indented nodes.`
+          );
+        o.push(c), a++, e.set(a, h);
+      }
+    }
+  }
+  return { text: o.join(`
+`), lineMap: e };
+}
+g(R, "preprocessBoxDrawing");
+var x = new W(() => ({
+  cnt: 1,
+  stack: [
+    {
+      id: 0,
+      level: -1,
+      name: "/",
+      nodeType: "directory",
+      children: []
+    }
+  ]
+})), ie = /* @__PURE__ */ g(() => {
+  x.reset(), U();
+}, "clear"), oe = /* @__PURE__ */ g(() => x.records.stack[0], "getRoot"), se = /* @__PURE__ */ g(() => x.records.cnt, "getCount"), ae = K.treeView, ce = /* @__PURE__ */ g(() => k(ae, E().treeView), "getConfig"), le = /* @__PURE__ */ g((n, t, e, r, s, i) => {
+  for (; n <= x.records.stack[x.records.stack.length - 1].level; )
+    x.records.stack.pop();
+  const o = {
+    id: x.records.cnt++,
+    level: n,
+    name: t,
+    nodeType: e,
+    icon: s,
+    cssClass: r,
+    description: i,
+    children: []
+  };
+  x.records.stack[x.records.stack.length - 1].children.push(o), x.records.stack.push(o);
+}, "addNode"), de = {
+  clear: ie,
+  addNode: le,
+  getRoot: oe,
+  getCount: se,
+  getConfig: ce,
+  getAccTitle: F,
+  getAccDescription: q,
+  getDiagramTitle: P,
+  setAccDescription: Y,
+  setAccTitle: G,
+  setDiagramTitle: z
+}, I = de, he = /* @__PURE__ */ g((n) => {
+  X(n, I);
+  for (const t of n.nodes) {
+    const e = typeof t.indent == "number" ? t.indent : 0;
+    let r = t.name;
+    const s = r.endsWith("/");
+    s && (r = r.slice(0, -1));
+    const i = s ? "directory" : "file", o = t.classAnnotation || void 0, a = t.iconAnnotation, p = a !== void 0 ? a || "none" : void 0, c = t.descAnnotation || void 0, d = c ? Q(c, E()) : void 0;
+    I.addNode(e, r, i, o, p, d);
+  }
+}, "populate"), pe = {
+  parse: /* @__PURE__ */ g(async (n) => {
+    const { text: t, lineMap: e } = R(n);
+    try {
+      const r = await te("treeView", t);
+      A.debug(r), he(r);
+    } catch (r) {
+      throw e.size > 0 && r instanceof Error && (r.message = S(r.message, e)), r;
+    }
+  }, "parse")
+}, b = {
+  prefix: "mermaid-treeview",
+  height: 24,
+  width: 24,
+  icons: {
+    folder: {
+      body: '<path fill="currentColor" d="M10.59 4.59A2 2 0 0 0 9.17 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.17z"/>'
+    },
+    file: {
+      body: '<path fill="currentColor" fill-rule="evenodd" d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.83a2 2 0 0 0-.59-1.42l-4.82-4.82A2 2 0 0 0 13.17 2H6Zm7.5 1.9l4.6 4.6h-3.6a1 1 0 0 1-1-1V3.9Z" clip-rule="evenodd"/>'
+    }
+  }
+};
+function H(n, t) {
+  const e = t?.filenameIcons?.[n];
+  if (e)
+    return e;
+  const r = n.lastIndexOf(".");
+  if (r > 0) {
+    const s = n.substring(r).toLowerCase(), i = t?.extensionIcons;
+    return i?.[s] ?? i?.[s.slice(1)];
+  }
+}
+g(H, "detectIcon");
+function C(n, t) {
+  return n.includes(":") ? n : n in b.icons || !t ? `${b.prefix}:${n}` : `${t}:${n}`;
+}
+g(C, "qualifyIcon");
+function B(n, t) {
+  if (n.icon !== "none") {
+    if (n.icon)
+      return C(n.icon, t.defaultIconPack);
+    if (t.showIcons) {
+      if (n.nodeType === "file") {
+        const e = H(n.name, t);
+        if (e === "none")
+          return;
+        if (e)
+          return C(e, t.defaultIconPack);
+      }
+      return `${b.prefix}:${n.nodeType === "directory" ? "folder" : "file"}`;
+    }
+  }
+}
+g(B, "getNodeIcon");
+ee([
+  {
+    name: b.prefix,
+    icons: b
+  }
+]);
+var y = 14, ge = 4, fe = 16, ue = /* @__PURE__ */ g(async (n, t) => {
+  const e = [], r = /* @__PURE__ */ g((i) => {
+    const o = B(i, t);
+    o && e.push({ icon: o, node: i }), i.children.forEach(r);
+  }, "collect");
+  r(n);
+  const s = await Promise.all(
+    e.map(async ({ icon: i, node: o }) => ({
+      id: o.id,
+      svg: await J(i, {
+        height: y,
+        width: y
+      })
+    }))
+  );
+  return new Map(s.map(({ id: i, svg: o }) => [i, o]));
+}, "resolveNodeIcons"), we = /* @__PURE__ */ g((n, t, e, r, s, i) => {
+  const o = r.append("g");
+  let a = "treeView-node-label";
+  e.nodeType === "directory" && (a += " treeView-node-dir"), e.cssClass && (a += ` ${e.cssClass}`);
+  const p = y + ge, c = B(e, s), d = c !== void 0;
+  c && o.append("g").attr("class", "treeView-node-icon").attr("transform", `translate(${n + s.paddingX}, ${t + s.paddingY})`).html(i.get(e.id) ?? "");
+  const h = o.append("text").text(e.name).attr("dominant-baseline", "middle").attr("class", a), { height: l, width: w } = h.node().getBBox(), f = l + s.paddingY * 2, m = n + s.paddingX + (d ? p : 0);
+  h.attr("x", m), h.attr("y", t + f / 2);
+  const u = m + w, v = w + s.paddingX * 2 + (d ? p : 0);
+  return e.BBox = { x: n, y: t, width: v, height: f }, e.cssClass?.split(/\s+/).includes("highlight") && o.insert("rect", ":first-child").attr("x", n).attr("y", t + 1).attr("width", 0).attr("height", f - 2).attr("rx", 3).attr("class", "treeView-highlight-bg"), { node: e, nodeGroup: o, labelRightEdge: u, centerY: t + f / 2 };
+}, "positionLabel"), $ = /* @__PURE__ */ g((n, t, e, r, s, i) => n.append("line").attr("x1", t).attr("y1", e).attr("x2", r).attr("y2", s).attr("stroke-width", i).attr("class", "treeView-node-line"), "positionLine"), me = /* @__PURE__ */ g((n, t, e, r) => {
+  let s = 0, i = 0;
+  const o = [], a = /* @__PURE__ */ g((d, h, l, w) => {
+    const f = w * (l.rowIndent + l.paddingX), m = we(f, s, h, d, l, r);
+    o.push(m);
+    const { height: u, width: v } = h.BBox;
+    $(
+      d,
+      f - l.rowIndent,
+      s + u / 2,
+      f,
+      s + u / 2,
+      l.lineThickness
+    ), i = Math.max(i, f + v), s += u;
+  }, "drawNode"), p = /* @__PURE__ */ g((d, h = 0) => {
+    a(n, d, e, h), d.children.forEach((m) => {
+      p(m, h + 1);
+    });
+    const { x: l, y: w, height: f } = d.BBox;
+    if (d.children.length) {
+      const { y: m, height: u } = d.children[d.children.length - 1].BBox;
+      $(
+        n,
+        l + e.paddingX,
+        w + f,
+        l + e.paddingX,
+        m + u / 2 + e.lineThickness / 2,
+        e.lineThickness
+      );
+    }
+  }, "processNode");
+  p(t);
+  const c = o.filter((d) => d.node.description);
+  if (c.length > 0) {
+    const h = Math.max(...o.map((l) => l.labelRightEdge)) + fe;
+    for (const l of c) {
+      const f = l.nodeGroup.append("text").text(l.node.description).attr("dominant-baseline", "middle").attr("class", "treeView-node-description").attr("x", h).attr("y", l.centerY).node().getBBox();
+      i = Math.max(i, h + f.width + e.paddingX);
+    }
+  }
+  for (const d of o)
+    if (d.node.cssClass?.split(/\s+/).includes("highlight")) {
+      const h = d.nodeGroup.select(".treeView-highlight-bg");
+      if (!h.empty()) {
+        const l = i - d.node.BBox.x + 8;
+        h.attr("width", l), i = Math.max(i, d.node.BBox.x + l + 2);
+      }
+    }
+  return { totalHeight: s, totalWidth: i };
+}, "drawTree"), xe = /* @__PURE__ */ g(async (n, t, e, r) => {
+  A.debug(`Rendering treeView diagram
+` + n);
+  const s = r.db, i = s.getRoot(), o = s.getConfig(), a = Z(t), p = a.append("g");
+  p.attr("class", "tree-view");
+  const c = await ue(i, o), { totalHeight: d, totalWidth: h } = me(p, i, o, c);
+  a.attr("viewBox", `-${o.lineThickness / 2} 0 ${h} ${d}`), j(a, d, h, o.useMaxWidth);
+}, "draw"), ve = {
+  draw: xe
+}, be = ve, Ie = {
+  labelFontSize: "16px",
+  labelColor: "black",
+  lineColor: "black",
+  iconColor: "#546e7a",
+  descriptionColor: "#6a9955",
+  highlightBg: "rgba(255, 193, 7, 0.15)",
+  highlightStroke: "#ffc107"
+}, Ce = /* @__PURE__ */ g(({
+  treeView: n
+}) => {
+  const {
+    labelFontSize: t,
+    labelColor: e,
+    lineColor: r,
+    iconColor: s,
+    descriptionColor: i,
+    highlightBg: o,
+    highlightStroke: a
+  } = k(Ie, n);
+  return `
+    .treeView-node-label {
+        font-size: ${t};
+        fill: ${e};
+        white-space: pre;
+    }
+    .treeView-node-dir {
+        font-weight: bold;
+    }
+    .treeView-node-line {
+        stroke: ${r};
+    }
+    .treeView-node-icon {
+        color: ${s};
+    }
+    .treeView-node-description {
+        font-size: ${t};
+        fill: ${i};
+        font-style: italic;
+        white-space: pre;
+    }
+    .treeView-highlight-bg {
+        fill: ${o};
+        stroke: ${a};
+        stroke-width: 1;
+    }
+    `;
+}, "styles"), ye = Ce, $e = {
+  db: I,
+  renderer: be,
+  parser: pe,
+  styles: ye
+};
+export {
+  $e as diagram
+};