@diagrammo/dgmo 0.46.0 → 0.48.0

package/dist/chunk-X5LCYCL5.js

@@ -0,0 +1,394 @@
+import {
+  appendArrowheadMarkers
+} from "./chunk-LP7EC4MI.js";
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_Y
+} from "./chunk-A4GOY3PE.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  contrastText,
+  mix,
+  themeBaseBg
+} from "./chunk-P6T66CCZ.js";
+import {
+  resolveTagColor,
+  tagAttrKey
+} from "./chunk-QLCCJEJI.js";
+import {
+  CATEGORICAL_COLOR_ORDER,
+  resolveColor
+} from "./chunk-TLVIHFRO.js";
+
+// src/swimlane/renderer.ts
+import * as d3Selection from "d3-selection";
+var NODE_FONT_SIZE = 12;
+var LANE_LABEL_FONT = 12;
+var PHASE_LABEL_FONT = 12;
+var EDGE_LABEL_FONT = 11;
+var NODE_RX = 8;
+var NODE_STROKE = 1.5;
+var EDGE_STROKE = 1.6;
+var EDGE_CORNER_R = 11;
+var ARROW_W = 9;
+var ARROW_H = 6.4;
+var LANE_RADIUS = 10;
+var LANE_INSET = 2;
+function roundedPolyline(pts, radius) {
+  if (pts.length < 3) {
+    return pts.map((p, i) => `${i ? "L" : "M"}${p.x} ${p.y}`).join(" ");
+  }
+  let d = `M${pts[0].x} ${pts[0].y}`;
+  for (let i = 1; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1];
+    const p1 = pts[i];
+    const p2 = pts[i + 1];
+    const l1 = Math.hypot(p1.x - p0.x, p1.y - p0.y);
+    const l2 = Math.hypot(p2.x - p1.x, p2.y - p1.y);
+    if (l1 < 0.01 || l2 < 0.01) {
+      d += ` L${p1.x} ${p1.y}`;
+      continue;
+    }
+    const r = Math.min(radius, l1 / 2, l2 / 2);
+    const ax = p1.x - (p1.x - p0.x) / l1 * r;
+    const ay = p1.y - (p1.y - p0.y) / l1 * r;
+    const bx = p1.x + (p2.x - p1.x) / l2 * r;
+    const by = p1.y + (p2.y - p1.y) / l2 * r;
+    d += ` L${ax} ${ay} Q${p1.x} ${p1.y} ${bx} ${by}`;
+  }
+  const last = pts[pts.length - 1];
+  d += ` L${last.x} ${last.y}`;
+  return d;
+}
+function distToSeg(px, py, x1, y1, x2, y2) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const l2 = dx * dx + dy * dy;
+  let t = l2 > 0 ? ((px - x1) * dx + (py - y1) * dy) / l2 : 0;
+  t = Math.max(0, Math.min(1, t));
+  return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
+}
+function roundedRectPath(x, y, w, h, r = {}) {
+  const m = Math.min(w, h) / 2;
+  const tl = Math.min(r.tl ?? 0, m);
+  const tr = Math.min(r.tr ?? 0, m);
+  const br = Math.min(r.br ?? 0, m);
+  const bl = Math.min(r.bl ?? 0, m);
+  return [
+    `M${x + tl},${y}`,
+    `H${x + w - tr}`,
+    tr ? `A${tr},${tr} 0 0 1 ${x + w},${y + tr}` : "",
+    `V${y + h - br}`,
+    br ? `A${br},${br} 0 0 1 ${x + w - br},${y + h}` : "",
+    `H${x + bl}`,
+    bl ? `A${bl},${bl} 0 0 1 ${x},${y + h - bl}` : "",
+    `V${y + tl}`,
+    tl ? `A${tl},${tl} 0 0 1 ${x + tl},${y}` : "",
+    "Z"
+  ].join(" ");
+}
+function renderSwimlaneForExport(container, parsed, layout, palette, isDark, opts = {}) {
+  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const titleOffset = parsed.title ? 40 : 0;
+  const width = opts.exportDims?.width ?? layout.width;
+  const height = (opts.exportDims?.height ?? layout.height) + 0;
+  const svg = d3Selection.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY);
+  const defs = svg.append("defs");
+  const baseBg = themeBaseBg(palette, isDark);
+  const ev = {
+    error: palette.colors.red,
+    success: palette.colors.green,
+    terminate: palette.text,
+    neutral: palette.border
+  };
+  appendArrowheadMarkers(defs, {
+    idPrefix: "sw",
+    width: ARROW_W,
+    height: ARROW_H,
+    baseFill: palette.textMuted,
+    colors: [ev.error, ev.success]
+  });
+  const root = svg.append("g").attr("transform", `translate(0, ${titleOffset})`);
+  if (parsed.title) {
+    svg.append("text").attr("x", width / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(parsed.title);
+  }
+  const laneColorById = /* @__PURE__ */ new Map();
+  parsed.lanes.forEach((lane, i) => {
+    const hex = lane.color ?? resolveColor(
+      CATEGORICAL_COLOR_ORDER[i % CATEGORICAL_COLOR_ORDER.length],
+      palette
+    ) ?? palette.border;
+    laneColorById.set(lane.id, hex);
+  });
+  const isLR = parsed.direction === "LR";
+  const solid = parsed.options["solid-fill"] === "on";
+  const laneFill = (hex) => mix(hex, baseBg, 9);
+  const haloAt = (cross) => {
+    for (const band of layout.lanes) {
+      const lo = isLR ? band.y : band.x;
+      const hi = lo + (isLR ? band.height : band.width);
+      if (cross >= lo && cross <= hi)
+        return laneFill(laneColorById.get(band.id) ?? palette.border);
+    }
+    return baseBg;
+  };
+  const laneG = root.append("g").attr("class", "dgmo-swimlane-lanes");
+  for (const band of layout.lanes) {
+    const hex = laneColorById.get(band.id) ?? palette.border;
+    const bx = isLR ? band.x : band.x + LANE_INSET;
+    const by = isLR ? band.y + LANE_INSET : band.y;
+    const bw = isLR ? band.width : band.width - LANE_INSET * 2;
+    const bh = isLR ? band.height - LANE_INSET * 2 : band.height;
+    laneG.append("path").attr(
+      "d",
+      roundedRectPath(bx, by, bw, bh, {
+        tl: LANE_RADIUS,
+        tr: LANE_RADIUS,
+        br: LANE_RADIUS,
+        bl: LANE_RADIUS
+      })
+    ).attr("fill", mix(hex, baseBg, 9)).attr("stroke", mix(palette.border, baseBg, 60)).attr("stroke-width", 1).attr("data-line-number", String(band.lineNumber));
+    const gw = isLR ? band.headerSize : bw;
+    const gh = isLR ? bh : band.headerSize;
+    laneG.append("path").attr(
+      "d",
+      roundedRectPath(
+        bx,
+        by,
+        gw,
+        gh,
+        isLR ? { tl: LANE_RADIUS, bl: LANE_RADIUS } : { tl: LANE_RADIUS, tr: LANE_RADIUS }
+      )
+    ).attr("fill", mix(hex, baseBg, 16)).attr("opacity", 0.6);
+    laneG.append("text").attr("x", isLR ? bx + 12 : bx + bw / 2).attr("y", isLR ? by + bh / 2 : by + band.headerSize / 2).attr("text-anchor", isLR ? "start" : "middle").attr("dominant-baseline", "middle").attr("font-size", LANE_LABEL_FONT).attr("font-weight", "700").attr("fill", mix(hex, palette.text, 55)).text(band.label);
+  }
+  const phaseG = root.append("g").attr("class", "dgmo-swimlane-phases");
+  layout.phases.forEach((band, idx) => {
+    if (idx % 2 === 1) {
+      phaseG.append("rect").attr("x", band.x).attr("y", band.y).attr("width", band.width).attr("height", band.height).attr("rx", LANE_RADIUS).attr("fill", palette.text).attr("opacity", 0.05).attr("pointer-events", "none");
+    }
+    phaseG.append("text").attr("x", isLR ? band.x + band.width / 2 : band.headerSize / 2).attr("y", isLR ? band.headerSize / 2 : band.y + band.height / 2).attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("font-size", PHASE_LABEL_FONT).attr("font-weight", "700").attr("letter-spacing", "0.06em").attr("fill", palette.textMuted).attr("data-line-number", String(band.lineNumber)).text(band.label);
+  });
+  const activeTag = opts.activeTagGroup ?? null;
+  const nodeFill = (n) => {
+    if (activeTag) {
+      const key = tagAttrKey(activeTag);
+      if (n.tags[key]) {
+        const c = resolveTagColor(n.tags, [...parsed.tagGroups], activeTag);
+        if (c && c !== "#999999")
+          return { fill: solid ? c : mix(c, baseBg, 22), stroke: c };
+      }
+    }
+    if (n.shape === "terminal") {
+      if (n.event === "error")
+        return {
+          fill: solid ? ev.error : mix(ev.error, baseBg, 22),
+          stroke: ev.error
+        };
+      if (n.event === "success")
+        return {
+          fill: solid ? ev.success : mix(ev.success, baseBg, 22),
+          stroke: ev.success
+        };
+      if (n.event === "terminate")
+        return { fill: mix(palette.text, baseBg, 30), stroke: palette.text };
+      return { fill: palette.bg, stroke: palette.textMuted };
+    }
+    if (n.shape === "exclusive" || n.shape === "parallel") {
+      return {
+        fill: mix(palette.surface, baseBg, 80),
+        stroke: palette.textMuted
+      };
+    }
+    const hex = laneColorById.get(n.lane) ?? palette.border;
+    return {
+      fill: solid ? hex : mix(hex, baseBg, 20),
+      stroke: mix(hex, palette.text, 40)
+    };
+  };
+  const nodeById = new Map(layout.nodes.map((n) => [n.id, n]));
+  const edgeG = root.append("g").attr("class", "dgmo-swimlane-edges");
+  for (const e of layout.edges) {
+    const tgt = nodeById.get(e.target);
+    let stroke = palette.textMuted;
+    let marker = "sw-arrow";
+    if (tgt?.shape === "terminal" && tgt.event === "error") {
+      stroke = ev.error;
+      marker = `sw-arrow-${ev.error.replace("#", "")}`;
+    } else if (tgt?.shape === "terminal" && tgt.event === "success") {
+      stroke = ev.success;
+      marker = `sw-arrow-${ev.success.replace("#", "")}`;
+    }
+    const d = roundedPolyline(e.points, EDGE_CORNER_R);
+    edgeG.append("path").attr("d", d).attr("fill", "none").attr("stroke", stroke).attr("stroke-width", EDGE_STROKE).attr("stroke-dasharray", e.back ? "5 4" : null).attr("marker-end", `url(#${marker})`).attr("data-line-number", String(e.lineNumber));
+    if (e.label) {
+      const segLen = [];
+      let total = 0;
+      for (let k = 0; k < e.points.length - 1; k++) {
+        const p0 = e.points[k];
+        const p1 = e.points[k + 1];
+        const len = Math.abs(p1.x - p0.x) + Math.abs(p1.y - p0.y);
+        segLen.push(len);
+        total += len;
+      }
+      let remain = total / 2;
+      let best = 0;
+      for (let k = 0; k < segLen.length; k++) {
+        if (remain <= segLen[k] || k === segLen.length - 1) {
+          best = k;
+          break;
+        }
+        remain -= segLen[k];
+      }
+      const a = e.points[best];
+      const b = e.points[best + 1] ?? a;
+      const t = segLen[best] > 0 ? remain / segLen[best] : 0.5;
+      const mid = { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+      const horizontal = Math.abs(b.x - a.x) >= Math.abs(b.y - a.y);
+      const LABEL_GAP = 7;
+      const pointClearance = (px, py) => {
+        let m = Infinity;
+        for (const oe of layout.edges) {
+          if (oe === e) continue;
+          for (let k = 0; k < oe.points.length - 1; k++) {
+            const d2 = distToSeg(
+              px,
+              py,
+              oe.points[k].x,
+              oe.points[k].y,
+              oe.points[k + 1].x,
+              oe.points[k + 1].y
+            );
+            if (d2 < m) m = d2;
+          }
+        }
+        return m;
+      };
+      const estW = e.label.length * EDGE_LABEL_FONT * 0.6;
+      const clearance = (px, py, spanDir) => {
+        const xs = spanDir === 0 ? [px - estW / 2, px, px + estW / 2] : [px, px + spanDir * estW / 2, px + spanDir * estW];
+        return Math.min(...xs.map((x) => pointClearance(x, py)));
+      };
+      const CROWD = 10;
+      let tx;
+      let ty;
+      let anchor;
+      let baseline;
+      if (horizontal) {
+        const up = clearance(mid.x, mid.y - LABEL_GAP, 0);
+        const down = clearance(mid.x, mid.y + LABEL_GAP, 0);
+        const below = up < CROWD && down > up;
+        tx = mid.x;
+        ty = mid.y + (below ? LABEL_GAP : -LABEL_GAP);
+        anchor = "middle";
+        baseline = below ? "hanging" : "auto";
+      } else {
+        const right = clearance(mid.x + LABEL_GAP, mid.y, 1);
+        const left = clearance(mid.x - LABEL_GAP, mid.y, -1);
+        const toLeft = right < CROWD && left > right;
+        tx = mid.x + (toLeft ? -LABEL_GAP : LABEL_GAP);
+        ty = mid.y;
+        anchor = toLeft ? "end" : "start";
+        baseline = "middle";
+      }
+      edgeG.append("text").attr("x", tx).attr("y", ty).attr("text-anchor", anchor).attr("dominant-baseline", baseline).attr("font-size", EDGE_LABEL_FONT).attr("fill", stroke === palette.textMuted ? palette.textMuted : stroke).attr("stroke", haloAt(ty)).attr("stroke-width", 3.5).attr("stroke-linejoin", "round").attr("paint-order", "stroke").text(e.label);
+    }
+  }
+  const nodesG = root.append("g").attr("class", "dgmo-swimlane-nodes");
+  for (const n of layout.nodes) {
+    const { fill, stroke } = nodeFill(n);
+    const g = nodesG.append("g").attr("data-line-number", String(n.lineNumber)).attr("data-lane", n.lane);
+    const cx = n.x;
+    const cy = n.y;
+    if (n.shape === "exclusive" || n.shape === "parallel") {
+      const r = n.width / 2;
+      g.append("polygon").attr(
+        "points",
+        `${cx},${cy - r} ${cx + r},${cy} ${cx},${cy + r} ${cx - r},${cy}`
+      ).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", NODE_STROKE);
+      if (n.shape === "parallel") {
+        const g2 = palette.textMuted;
+        g.append("line").attr("x1", cx).attr("y1", cy - r / 2.4).attr("x2", cx).attr("y2", cy + r / 2.4).attr("stroke", g2).attr("stroke-width", 2.4);
+        g.append("line").attr("x1", cx - r / 2.4).attr("y1", cy).attr("x2", cx + r / 2.4).attr("y2", cy).attr("stroke", g2).attr("stroke-width", 2.4);
+        g.append("text").attr("x", cx).attr("y", cy + r + 12).attr("text-anchor", "middle").attr("font-size", NODE_FONT_SIZE - 1).attr("fill", palette.textMuted).attr("stroke", haloAt(cy + r + 12)).attr("stroke-width", 3.5).attr("stroke-linejoin", "round").attr("paint-order", "stroke").text(n.label);
+      } else {
+        drawCenteredLabel(
+          g,
+          n.label,
+          cx,
+          cy,
+          palette.text,
+          NODE_FONT_SIZE - 1,
+          true,
+          haloAt(cy)
+        );
+      }
+    } else if (n.shape === "terminal") {
+      const r = n.width / 2;
+      g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", n.event === "none" ? NODE_STROKE : 2.4);
+      if (n.event === "success") {
+        g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r - 4).attr("fill", "none").attr("stroke", stroke).attr("stroke-width", 1);
+      }
+      let connectsBelow = false;
+      for (const le of layout.edges) {
+        const pt = le.target === n.id ? le.points[le.points.length - 1] : le.source === n.id ? le.points[0] : void 0;
+        if (pt && pt.y > cy + r * 0.5) connectsBelow = true;
+      }
+      const labelY = connectsBelow ? cy - r - 6 : cy + r + 12;
+      g.append("text").attr("x", cx).attr("y", labelY).attr("text-anchor", "middle").attr("font-size", NODE_FONT_SIZE - 1).attr("fill", palette.text).attr("stroke", haloAt(labelY)).attr("stroke-width", 3.5).attr("stroke-linejoin", "round").attr("paint-order", "stroke").text(n.label);
+    } else {
+      g.append("rect").attr("x", cx - n.width / 2).attr("y", cy - n.height / 2).attr("width", n.width).attr("height", n.height).attr("rx", NODE_RX).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", NODE_STROKE);
+      if (n.shape === "subprocess") {
+        g.append("rect").attr("x", cx - n.width / 2 + 3).attr("y", cy - n.height / 2 + 3).attr("width", n.width - 6).attr("height", n.height - 6).attr("rx", NODE_RX - 2).attr("fill", "none").attr("stroke", stroke).attr("stroke-width", 1);
+      }
+      const textColor = contrastText(
+        fill,
+        palette.textOnFillLight,
+        palette.textOnFillDark
+      );
+      drawCenteredLabel(g, n.label, cx, cy, textColor, NODE_FONT_SIZE);
+    }
+  }
+}
+function wrapWords(words, target) {
+  const lines = [];
+  let cur = "";
+  for (const w of words) {
+    if (cur === "") cur = w;
+    else if (cur.length + 1 + w.length <= target) cur += " " + w;
+    else {
+      lines.push(cur);
+      cur = w;
+    }
+  }
+  if (cur) lines.push(cur);
+  return lines;
+}
+function drawCenteredLabel(g, label, cx, cy, fill, fontSize, tight = false, halo) {
+  const words = label.split(/\s+/);
+  let lines;
+  if (tight) {
+    lines = words.length === 1 ? [label] : wrapWords(words, 7);
+  } else if (label.length <= 14 || words.length === 1) {
+    lines = [label];
+  } else {
+    const mid = Math.ceil(words.length / 2);
+    lines = [words.slice(0, mid).join(" "), words.slice(mid).join(" ")];
+  }
+  const lineH = fontSize * 1.2;
+  const startY = cy - (lines.length - 1) * lineH / 2;
+  lines.forEach((ln, i) => {
+    const txt = g.append("text").attr("x", cx).attr("y", startY + i * lineH).attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("font-size", fontSize).attr("fill", fill);
+    if (halo)
+      txt.attr("stroke", halo).attr("stroke-width", 3.5).attr("stroke-linejoin", "round").attr("paint-order", "stroke");
+    txt.text(ln);
+  });
+}
+
+export {
+  renderSwimlaneForExport
+};
+//# sourceMappingURL=chunk-X5LCYCL5.js.map