thurview 0.16.0 → 0.17.0

package/dist/ui/app.js

@@ -908,6 +908,73 @@
   // src/ui/diagrams.ts
   init_dom();
   init_dom();
+
+  // src/ui/flow-layout.ts
+  var boxW = 210;
+  var boxH = 46;
+  var gapX = 40;
+  var gapY = 58;
+  var pad = 14;
+  var minW = 700;
+  function layoutFlow(b) {
+    const layer = /* @__PURE__ */ new Map([[b.steps[0].id, 0]]);
+    const queue = [b.steps[0].id];
+    while (queue.length) {
+      const cur = queue.shift();
+      for (const e of b.edges)
+        if (e.from === cur && !layer.has(e.to)) {
+          layer.set(e.to, layer.get(cur) + 1);
+          queue.push(e.to);
+        }
+    }
+    const rows = [];
+    for (const s of b.steps) {
+      const li = layer.get(s.id);
+      (rows[li] ??= []).push(s.id);
+    }
+    const span = (e) => layer.get(e.from) - layer.get(e.to);
+    const loops = b.edges.filter((e) => span(e) >= 0).sort((p, q) => span(p) - span(q));
+    const lanes = loops.length > 0;
+    const widest = Math.max(...rows.map((r) => r.length));
+    const laneGap = 18;
+    const lane = lanes ? 34 + (loops.length - 1) * laneGap : 0;
+    const band = lanes ? gapY / 2 : 0;
+    const width = Math.max(minW, pad * 2 + widest * boxW + (widest - 1) * gapX + lane);
+    const height = pad * 2 + band * 2 + rows.length * boxH + (rows.length - 1) * gapY;
+    const at = (id) => {
+      const li = layer.get(id);
+      const row = rows[li];
+      const spanW = row.length * boxW + (row.length - 1) * gapX;
+      const x = pad + (width - lane - pad * 2 - spanW) / 2 + row.indexOf(id) * (boxW + gapX);
+      return { x, y: pad + band + li * (boxH + gapY), cx: x + boxW / 2, li };
+    };
+    const edges = b.edges.map((edge) => {
+      const from = at(edge.from);
+      const to = at(edge.to);
+      const back = to.li < from.li;
+      if (to.li > from.li) {
+        const mid = from.y + boxH + (to.y - from.y - boxH) / 2;
+        return {
+          edge,
+          back,
+          d: `M${from.cx},${from.y + boxH} V${mid} H${to.cx} V${to.y - 4}`,
+          label: { x: (from.cx + to.cx) / 2 + 6, y: mid - 5, at: "middle" }
+        };
+      }
+      const laneX = width - lane + 17 + loops.indexOf(edge) * laneGap;
+      const out = from.y + boxH + gapY / 2;
+      const into = to.y - gapY / 2;
+      return {
+        edge,
+        back,
+        d: `M${from.cx},${from.y + boxH} V${out} H${laneX} V${into} H${to.cx} V${to.y - 4}`,
+        label: { x: laneX - 6, y: (out + into) / 2, at: "end" }
+      };
+    });
+    return { width, height, at, edges };
+  }
+
+  // src/ui/diagrams.ts
   function openAnchor(id) {
     const a = state.data?.document?.anchors[id];
     if (a) openAnchorPeek(a);
@@ -1116,6 +1183,84 @@
       ops
     );
   }
+  function flowDiagram(b, doc) {
+    const fit = (text, room, px) => {
+      const max = Math.floor(room / (px * 0.605));
+      return text.length > max ? `${text.slice(0, max - 1)}\u2026` : text;
+    };
+    const { width, height, at, edges } = layoutFlow(b);
+    const el = svg("svg", { viewBox: `0 0 ${width} ${height}`, class: "flow" });
+    el.appendChild(
+      svg(
+        "defs",
+        {},
+        svg(
+          "marker",
+          {
+            id: "flow-arr",
+            viewBox: "0 0 10 10",
+            refX: "9",
+            refY: "5",
+            markerWidth: "7",
+            markerHeight: "7",
+            orient: "auto"
+          },
+          svg("path", { d: "M0,0 L10,5 L0,10 z", fill: "currentColor" })
+        )
+      )
+    );
+    for (const { edge, d, back, label: label2 } of edges) {
+      const g = svg("g", { class: back ? "edge back" : "edge" });
+      g.appendChild(svg("path", { d, fill: "none", "marker-end": "url(#flow-arr)" }));
+      if (edge.case)
+        g.appendChild(svg("text", { x: label2.x, y: label2.y, "text-anchor": label2.at }, edge.case));
+      el.appendChild(g);
+    }
+    for (const s of b.steps) {
+      const { x, y, cx } = at(s.id);
+      const g = svg("g", {
+        class: `step${s.decision ? " decision" : ""}${s.anchor ? "" : " plain"}`
+      });
+      g.appendChild(
+        s.decision ? svg("path", {
+          d: `M${x + 16},${y} H${x + boxW - 16} L${x + boxW},${y + boxH / 2} L${x + boxW - 16},${y + boxH} H${x + 16} L${x},${y + boxH / 2} Z`
+        }) : svg("rect", { x, y, width: boxW, height: boxH, rx: 6 })
+      );
+      const room = boxW - (s.decision ? 44 : 20);
+      const actor = s.actor ? doc.actors[s.actor]?.label ?? s.actor : null;
+      if (actor)
+        g.appendChild(
+          svg(
+            "text",
+            { class: "who", x: cx, y: y + 17, "text-anchor": "middle" },
+            fit(actor, room, 10.5)
+          )
+        );
+      g.appendChild(
+        svg(
+          "text",
+          { x: cx, y: actor ? y + 33 : y + boxH / 2 + 4, "text-anchor": "middle" },
+          fit(s.label, room, 12)
+        )
+      );
+      g.appendChild(svg("title", {}, s.anchor ? `${s.label} \u2014 ${s.anchor}` : s.label));
+      if (s.anchor) {
+        const open = () => openAnchor(s.anchor);
+        g.setAttribute("role", "button");
+        g.setAttribute("tabindex", "0");
+        g.addEventListener("click", open);
+        g.addEventListener("keydown", (e) => {
+          const k = e.key;
+          if (k === "Enter" || k === " ") {
+            e.preventDefault();
+            open();
+          }
+        });
+      }
+      el.appendChild(g);
+    }
+    return h("div", { class: "diagram" }, h("div", { class: "dhead" }, b.label), el);
+  }
 
   // src/ui/views/review.ts
   function renderReview(root) {
@@ -1549,6 +1694,9 @@
       case "database":
         wrap.appendChild(databaseLens(b, doc));
         break;
+      case "flow":
+        wrap.appendChild(flowDiagram(b, doc));
+        break;
     }
     if (threads.length)
       wrap.appendChild(h("div", { class: "thread-pins" }, threads.map(threadPinRow)));