thurview 0.17.0 → 0.17.2

package/dist/ui/app.js

@@ -980,13 +980,48 @@
     if (a) openAnchorPeek(a);
   }
   function sequenceDiagram(b) {
-    const colW = 170;
-    const top = 44;
-    const rowH = 34;
-    const n = b.actors.length;
-    const width = Math.max(colW * n, 320);
-    const height = top + rowH * (b.messages.length + 1) + 10;
+    const charW = 12 * 0.605;
+    const lineH = 15;
+    const wrap = (text, room) => {
+      const max = Math.max(8, Math.floor(room / charW));
+      const lines = [];
+      for (const word of text.split(" ")) {
+        const last = lines.length - 1;
+        if (last >= 0 && lines[last].length + 1 + word.length <= max) lines[last] += ` ${word}`;
+        else lines.push(word);
+      }
+      return lines;
+    };
+    const widest = (lines) => Math.max(...lines.map((l) => l.length)) * charW;
+    const names = b.actors.map((a) => wrap(a.label, 20 * charW));
+    const nameLines = Math.max(...names.map((l) => l.length));
+    const boxH2 = 13 + nameLines * lineH;
+    const top = 6 + boxH2 + 10;
+    const boxes = names.map((l) => Math.max(120, widest(l) + 20));
+    const cols = boxes.map((w) => Math.max(150, w + 16));
+    const centres = cols.map((w, i) => cols.slice(0, i).reduce((s, c) => s + c, 0) + w / 2);
+    const x = (id) => centres[b.actors.findIndex((a) => a.id === id)];
+    let y = top;
+    const rows = b.messages.map((m2, i) => {
+      const x1 = x(m2.from);
+      const x2 = x(m2.to);
+      const self = x1 === x2;
+      const start = self ? x1 + 36 : Math.min(x1, x2) + 8;
+      const lines = wrap(`${i + 1}. ${m2.label}`, Math.max(180, Math.abs(x2 - x1) - 16));
+      y += 20 + lines.length * lineH;
+      return { x1, x2, self, start, lines, y, end: start + widest(lines) };
+    });
+    const width = Math.ceil(
+      Math.max(
+        320,
+        cols.reduce((s, c) => s + c, 0),
+        ...rows.map((r) => r.end + 12)
+      )
+    );
+    const height = y + 24;
     const el = svg("svg", { viewBox: `0 0 ${width} ${height}`, class: "seq" });
+    el.style.maxWidth = `${width}px`;
+    el.style.minWidth = `${Math.ceil(width * 0.9)}px`;
     el.appendChild(
       svg(
         "defs",
@@ -1006,39 +1041,35 @@
         )
       )
     );
-    const x = (id) => b.actors.findIndex((a) => a.id === id) * colW + colW / 2;
-    b.actors.forEach((a, i) => {
-      const cx = i * colW + colW / 2;
+    const tspans = (at, baseline, text) => text.map((l, i) => svg("tspan", { x: at, y: baseline - (text.length - 1 - i) * lineH }, l));
+    b.actors.forEach((_, i) => {
+      const cx = centres[i];
+      const w = boxes[i];
+      const name = names[i];
       const g = svg("g", { class: "actor" });
-      g.appendChild(svg("rect", { x: cx - 70, y: 6, width: 140, height: 28, rx: 6 }));
-      g.appendChild(svg("text", { x: cx, y: 25, "text-anchor": "middle" }, a.label));
-      g.appendChild(svg("line", { class: "life", x1: cx, y1: 34, x2: cx, y2: height - 6 }));
+      g.appendChild(svg("rect", { x: cx - w / 2, y: 6, width: w, height: boxH2, rx: 6 }));
+      const baseline = 6 + (boxH2 + name.length * lineH) / 2 - 4;
+      g.appendChild(svg("text", { "text-anchor": "middle" }, ...tspans(cx, baseline, name)));
+      g.appendChild(svg("line", { class: "life", x1: cx, y1: 6 + boxH2, x2: cx, y2: height - 6 }));
       el.appendChild(g);
     });
     b.messages.forEach((m2, i) => {
-      const y = top + rowH * (i + 1);
-      const x1 = x(m2.from);
-      const x2 = x(m2.to);
+      const { x1, x2, self, start, y: y2 } = rows[i];
       const g = svg("g", { class: "msg" });
-      const self = x1 === x2;
       if (self) {
         g.appendChild(
           svg("path", {
-            d: `M${x1},${y - 10} h30 v20 h-30`,
+            d: `M${x1},${y2 - 10} h30 v20 h-30`,
             fill: "none",
             stroke: "currentColor",
             "marker-end": "url(#arr)"
           })
         );
       } else {
-        g.appendChild(svg("line", { x1, y1: y, x2: x2 + (x2 > x1 ? -4 : 4), y2: y }));
+        g.appendChild(svg("line", { x1, y1: y2, x2: x2 + (x2 > x1 ? -4 : 4), y2 }));
       }
-      const label2 = svg(
-        "text",
-        { x: self ? x1 + 36 : (x1 + x2) / 2, y: y - 6, "text-anchor": self ? "start" : "middle" },
-        `${i + 1}. ${m2.label}`
-      );
-      label2.addEventListener("click", (e) => {
+      const label2 = svg("text", {}, ...tspans(start, y2 - 6, rows[i].lines));
+      const open = (at) => {
         if (m2.anchor) openAnchor(m2.anchor);
         else if (m2.code)
           popover(
@@ -1047,13 +1078,28 @@
               { class: "def-popover" },
               h("pre", { style: { margin: "0", border: "none" } }, m2.code.text)
             ),
-            { x: e.pageX, y: e.pageY + 8 }
+            at
           );
+      };
+      label2.addEventListener("click", (e) => open({ x: e.pageX, y: e.pageY + 8 }));
+      label2.setAttribute("role", "button");
+      label2.setAttribute("tabindex", "0");
+      label2.addEventListener("keydown", (e) => {
+        const k = e.key;
+        if (k !== "Enter" && k !== " ") return;
+        e.preventDefault();
+        const r = label2.getBoundingClientRect();
+        open({ x: r.left + window.scrollX, y: r.bottom + window.scrollY + 8 });
       });
       g.appendChild(label2);
       el.appendChild(g);
     });
-    return h("div", { class: "diagram" }, h("div", { class: "dhead" }, b.label), el);
+    return h(
+      "div",
+      { class: "diagram" },
+      h("div", { class: "dhead" }, b.label),
+      h("div", { class: "seq-scroll" }, el)
+    );
   }
   function callstackDiff(b, doc) {
     const rows = b.rows.map((r, i) => {