@diagrammo/dgmo 0.46.0 → 0.47.0

package/dist/chunk-RCERWOJR.js

@@ -0,0 +1,154 @@
+// src/utils/svg-embed.ts
+function normalizeSvgForEmbed(input) {
+  let svg = input;
+  const rootMatch = svg.match(/<svg[^>]*>/);
+  const rootTag = rootMatch?.[0] ?? "";
+  if (rootTag && !rootTag.includes("viewBox")) {
+    const wh = rootTag.match(/width="(\d+)"[^>]*height="(\d+)"/);
+    if (wh) {
+      svg = svg.replace(/<svg/, `<svg viewBox="0 0 ${wh[1]} ${wh[2]}"`);
+    }
+  }
+  const tight = computeBBox(svg);
+  if (tight && tight.width > 0 && tight.height > 0) {
+    const pad = 16;
+    const x = tight.x - pad;
+    const y = tight.y - pad;
+    const w = tight.width + pad * 2;
+    const h = tight.height + pad * 2;
+    const canvas = readViewBox(svg);
+    const TOL = 2;
+    const MIN_COVERAGE = 0.5;
+    const trustworthy = !canvas || x >= canvas.x - TOL && y >= canvas.y - TOL && x + w <= canvas.x + canvas.width + TOL && y + h <= canvas.y + canvas.height + TOL && w >= canvas.width * MIN_COVERAGE && h >= canvas.height * MIN_COVERAGE;
+    if (trustworthy) {
+      const vb = `${x} ${y} ${w} ${h}`;
+      svg = svg.replace(/(<svg[^>]*?)viewBox="[^"]*"/, `$1viewBox="${vb}"`);
+    }
+  }
+  svg = svg.replace(/(<svg[^>]*?) width="[^"]*"/g, "$1");
+  svg = svg.replace(/(<svg[^>]*?) height="[^"]*"/g, "$1");
+  svg = svg.replace(/(<svg[^>]*?style="[^"]*?)background:[^;"]*;?\s*/g, "$1");
+  svg = svg.replace(/<svg\s{2,}/g, "<svg ");
+  return svg;
+}
+function getEmbedSvgViewBox(svg) {
+  const tight = computeBBox(svg);
+  if (!tight || tight.width <= 0 || tight.height <= 0) return null;
+  const pad = 16;
+  return {
+    x: tight.x - pad,
+    y: tight.y - pad,
+    width: tight.width + pad * 2,
+    height: tight.height + pad * 2
+  };
+}
+function readViewBox(svg) {
+  const m = svg.match(/<svg[^>]*?\bviewBox="([^"]+)"/);
+  if (!m) return null;
+  const n = m[1].trim().split(/[\s,]+/).map(Number);
+  if (n.length !== 4 || n.some((v) => !Number.isFinite(v)) || n[2] <= 0 || n[3] <= 0)
+    return null;
+  return { x: n[0], y: n[1], width: n[2], height: n[3] };
+}
+function computeBBox(svg) {
+  const xs = [];
+  const ys = [];
+  function push(x, y) {
+    if (Number.isFinite(x) && Number.isFinite(y)) {
+      xs.push(x);
+      ys.push(y);
+    }
+  }
+  function attr(tag, name) {
+    const m = tag.match(new RegExp(`\\b${name}="([^"]*)"`));
+    if (!m) return null;
+    const n = parseFloat(m[1]);
+    return Number.isFinite(n) ? n : null;
+  }
+  for (const m of svg.matchAll(/<rect\b[^>]*?\/?>/g)) {
+    const tag = m[0];
+    const x = attr(tag, "x");
+    const y = attr(tag, "y");
+    const w = attr(tag, "width");
+    const h = attr(tag, "height");
+    if (x !== null && y !== null && w !== null && h !== null) {
+      push(x, y);
+      push(x + w, y + h);
+    }
+  }
+  for (const m of svg.matchAll(/<line\b[^>]*?\/?>/g)) {
+    const tag = m[0];
+    const x1 = attr(tag, "x1");
+    const y1 = attr(tag, "y1");
+    const x2 = attr(tag, "x2");
+    const y2 = attr(tag, "y2");
+    if (x1 !== null && y1 !== null && x2 !== null && y2 !== null) {
+      push(x1, y1);
+      push(x2, y2);
+    }
+  }
+  for (const m of svg.matchAll(/<circle\b[^>]*?\/?>/g)) {
+    const tag = m[0];
+    const cx = attr(tag, "cx");
+    const cy = attr(tag, "cy");
+    const r = attr(tag, "r");
+    if (cx !== null && cy !== null && r !== null) {
+      push(cx - r, cy - r);
+      push(cx + r, cy + r);
+    }
+  }
+  for (const m of svg.matchAll(/<ellipse\b[^>]*?\/?>/g)) {
+    const tag = m[0];
+    const cx = attr(tag, "cx");
+    const cy = attr(tag, "cy");
+    const rx = attr(tag, "rx");
+    const ry = attr(tag, "ry");
+    if (cx !== null && cy !== null && rx !== null && ry !== null) {
+      push(cx - rx, cy - ry);
+      push(cx + rx, cy + ry);
+    }
+  }
+  for (const m of svg.matchAll(/<text\b([^>]*?)>([\s\S]*?)<\/text>/g)) {
+    const tag = `<text${m[1]}>`;
+    const text = m[2].replace(/<[^>]+>/g, "");
+    const x = attr(tag, "x");
+    const y = attr(tag, "y");
+    if (x !== null && y !== null) {
+      const w = text.length * 7;
+      const anchor = tag.match(/\btext-anchor="([^"]*)"/)?.[1] ?? "start";
+      const left = anchor === "middle" ? x - w / 2 : anchor === "end" ? x - w : x;
+      const right = anchor === "middle" ? x + w / 2 : anchor === "end" ? x : x + w;
+      push(left, y - 14);
+      push(right, y + 4);
+    }
+  }
+  for (const m of svg.matchAll(/<path\b[^>]*?\bd="([^"]+)"/g)) {
+    const d = m[1];
+    const nums = d.match(/-?\d+(?:\.\d+)?/g);
+    if (!nums) continue;
+    for (let i = 0; i + 1 < nums.length; i += 2) {
+      push(parseFloat(nums[i]), parseFloat(nums[i + 1]));
+    }
+  }
+  for (const m of svg.matchAll(
+    /<(?:polygon|polyline)\b[^>]*?\bpoints="([^"]+)"/g
+  )) {
+    const nums = m[1].match(/-?\d+(?:\.\d+)?/g);
+    if (!nums) continue;
+    for (let i = 0; i + 1 < nums.length; i += 2) {
+      push(parseFloat(nums[i]), parseFloat(nums[i + 1]));
+    }
+  }
+  if (xs.length === 0 || ys.length === 0) return null;
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
+export {
+  normalizeSvgForEmbed,
+  getEmbedSvgViewBox
+};
+//# sourceMappingURL=chunk-RCERWOJR.js.map

package/dist/chunk-RJE5JTVK.js

@@ -0,0 +1,362 @@
+import {
+  renderIntegratedLegend
+} from "./chunk-PWIHZ6NJ.js";
+import {
+  getMaxLegendReservedHeight
+} from "./chunk-YAA6IID3.js";
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_Y
+} from "./chunk-A4GOY3PE.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  LEGEND_GROUP_GAP
+} from "./chunk-QOOUC2J5.js";
+import {
+  measureText
+} from "./chunk-WCT3NYCV.js";
+import {
+  isBlockNode
+} from "./chunk-NNAAJVBU.js";
+import {
+  mix
+} from "./chunk-P6T66CCZ.js";
+import {
+  resolveTagColor,
+  tagAttrKey
+} from "./chunk-QLCCJEJI.js";
+
+// src/block/renderer.ts
+import * as d3Selection from "d3-selection";
+
+// src/block/layout.ts
+var BLOCK_GAP = 12;
+var BLOCK_PAD = 10;
+var BLOCK_LEAF_H = 46;
+var BLOCK_HEADER_H = 28;
+var BLOCK_COLLAPSED_H = 46;
+var BLOCK_BAR_H = 6;
+var MIN_COL = 104;
+var MAX_COL = 250;
+var LABEL_FS = 13;
+function layoutBlock(grid, opts = {}) {
+  const collapsed = opts.collapsed ?? /* @__PURE__ */ new Set();
+  const node = layoutGrid(grid, 0, 0, null, collapsed);
+  return { width: node.w, height: node.h, items: node.items };
+}
+function maxSpanSum(g) {
+  return Math.max(
+    1,
+    ...g.rows.map((r) => r.reduce((s, c) => s + (c.span || 1), 0))
+  );
+}
+function leafW(node) {
+  return Math.max(
+    MIN_COL,
+    Math.min(MAX_COL, measureText(node.label, LABEL_FS) + 2 * BLOCK_PAD + 14)
+  );
+}
+function gridColW(g) {
+  let m = MIN_COL;
+  for (const row of g.rows)
+    for (const c of row) {
+      if (!isBlockNode(c)) continue;
+      const iw = c.grid ? intrinsicGridW(c.grid) + 2 * BLOCK_PAD : leafW(c);
+      m = Math.max(m, iw / (c.span || 1));
+    }
+  return m;
+}
+function intrinsicGridW(g) {
+  const cols = g.cols ?? maxSpanSum(g);
+  return cols * gridColW(g) + (cols + 1) * BLOCK_GAP;
+}
+function layoutGrid(g, ox, oy, forceColW, collapsed) {
+  const cols = g.cols ?? maxSpanSum(g);
+  const colW = forceColW ?? gridColW(g);
+  const gridW = cols * colW + (cols + 1) * BLOCK_GAP;
+  let cy = oy + BLOCK_GAP;
+  const items = [];
+  let maxRight = ox + BLOCK_GAP;
+  for (const row of g.rows) {
+    let cx = ox + BLOCK_GAP;
+    let rowH = BLOCK_LEAF_H;
+    const rowItems = [];
+    for (const cell of row) {
+      const span = cell.span || 1;
+      const cw = span * colW + (span - 1) * BLOCK_GAP;
+      if (!isBlockNode(cell)) {
+        rowItems.push({ type: "empty", x: cx, y: cy, w: cw, h: BLOCK_LEAF_H });
+        cx += cw + BLOCK_GAP;
+        maxRight = Math.max(maxRight, cx - BLOCK_GAP);
+        continue;
+      }
+      if (cell.grid && collapsed.has(cell.id)) {
+        const item = {
+          type: "collapsed",
+          x: cx,
+          y: cy,
+          w: cw,
+          h: BLOCK_COLLAPSED_H,
+          label: cell.label,
+          node: cell,
+          lineNumber: cell.lineNumber
+        };
+        rowItems.push(item);
+        rowH = Math.max(rowH, BLOCK_COLLAPSED_H);
+        cx += cw + BLOCK_GAP;
+        maxRight = Math.max(maxRight, cx - BLOCK_GAP);
+        continue;
+      }
+      if (cell.grid) {
+        const innerCols = cell.grid.cols ?? maxSpanSum(cell.grid);
+        const innerColW = Math.max(
+          MIN_COL * 0.66,
+          (cw - 2 * BLOCK_PAD - (innerCols + 1) * BLOCK_GAP) / innerCols
+        );
+        const inner = layoutGrid(
+          cell.grid,
+          cx + BLOCK_PAD,
+          cy + BLOCK_HEADER_H,
+          innerColW,
+          collapsed
+        );
+        const h = BLOCK_HEADER_H + inner.h + BLOCK_PAD;
+        rowItems.push({
+          type: "container",
+          x: cx,
+          y: cy,
+          w: cw,
+          h,
+          label: cell.label,
+          node: cell,
+          lineNumber: cell.lineNumber,
+          inner: inner.items
+        });
+        rowH = Math.max(rowH, h);
+        cx += cw + BLOCK_GAP;
+        maxRight = Math.max(maxRight, cx - BLOCK_GAP);
+        continue;
+      }
+      rowItems.push({
+        type: "leaf",
+        x: cx,
+        y: cy,
+        w: cw,
+        h: BLOCK_LEAF_H,
+        label: cell.label,
+        node: cell,
+        lineNumber: cell.lineNumber
+      });
+      cx += cw + BLOCK_GAP;
+      maxRight = Math.max(maxRight, cx - BLOCK_GAP);
+    }
+    items.push(...rowItems);
+    cy += rowH + BLOCK_GAP;
+  }
+  const fitW = Math.max(gridW, maxRight - ox + BLOCK_GAP);
+  return { x: ox, y: oy, w: fitW, h: cy - oy, items };
+}
+
+// src/block/renderer.ts
+var PADDING = 12;
+var TITLE_BAND = 36;
+var MIN_EXPORT_WIDTH = 220;
+var LEGEND_POSITION = {
+  placement: "top-center",
+  titleRelation: "below-title"
+};
+function renderBlockForExport(container, parsed, palette, isDark, exportDims, options) {
+  renderBlock(container, parsed, palette, isDark, exportDims, {
+    exportMode: true,
+    ...options
+  });
+}
+function renderBlock(container, parsed, palette, isDark, exportDims, options = {}) {
+  if (parsed.error || parsed.top.rows.length === 0) return;
+  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const opts = parsed.options;
+  const showTitle = !!parsed.title;
+  const titleH = showTitle ? TITLE_BAND : 0;
+  const collapsed = options.collapsed ?? authoredCollapsedIds(parsed);
+  const layout = layoutBlock(parsed.top, { collapsed });
+  const legend = !opts.noLegend ? buildBlockLegend(parsed) : null;
+  let width;
+  let height;
+  if (options.exportMode) {
+    width = Math.max(layout.width, MIN_EXPORT_WIDTH) + PADDING * 2;
+  } else {
+    width = exportDims?.width ?? container.clientWidth;
+  }
+  const legendReserve = legend ? getMaxLegendReservedHeight(
+    { groups: legend.groups, position: LEGEND_POSITION, mode: "preview" },
+    width
+  ) + LEGEND_GROUP_GAP : 0;
+  const areaY = titleH + legendReserve + PADDING;
+  if (options.exportMode) {
+    height = areaY + layout.height + PADDING;
+  } else {
+    height = exportDims?.height ?? container.clientHeight;
+  }
+  if (width <= 0 || height <= 0) return;
+  const areaX = PADDING;
+  const areaW = Math.max(1, width - PADDING * 2);
+  const areaH = Math.max(1, height - areaY - PADDING);
+  const scale = Math.min(1, areaW / layout.width, areaH / layout.height);
+  const offsetX = areaX + (areaW - layout.width * scale) / 2;
+  const offsetY = areaY;
+  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").attr("class", "dgmo-block").style("font-family", FONT_FAMILY);
+  if (showTitle) {
+    const title = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).text(parsed.title);
+    if (parsed.titleLineNumber !== null) {
+      title.attr("data-line-number", parsed.titleLineNumber);
+    }
+  }
+  const activeGroup = parsed.tagGroups.length > 0 ? parsed.tagGroups[0].name : null;
+  const neutral = mix(palette.text, palette.bg, 22);
+  const root = svg.append("g").attr("class", "dgmo-block-cells").attr("transform", `translate(${offsetX},${offsetY}) scale(${scale})`);
+  drawItems(root, layout.items, {
+    palette,
+    tagGroups: parsed.tagGroups,
+    activeGroup,
+    activeKey: activeGroup ? tagAttrKey(activeGroup) : null,
+    neutral,
+    solidFill: opts.solidFill,
+    onToggle: options.onToggle
+  });
+  if (legend) {
+    const legendG = svg.append("g").attr("class", "dgmo-block-legend").attr("transform", `translate(0, ${titleH})`);
+    renderIntegratedLegend(legendG, {
+      groups: legend.groups,
+      palette: {
+        bg: palette.bg,
+        surface: palette.surface,
+        text: palette.text,
+        textMuted: palette.textMuted,
+        primary: palette.primary
+      },
+      isDark,
+      width,
+      mode: options.exportMode ? "export" : "preview",
+      position: LEGEND_POSITION,
+      activeGroup: legend.activeGroup
+    });
+  }
+}
+function colorOf(node, ctx) {
+  if (!node || !ctx.activeGroup) return null;
+  return resolveTagColor(node.metadata, ctx.tagGroups, ctx.activeGroup) ?? null;
+}
+function clipLabel(s, maxWidth, fs) {
+  if (measureText(s, fs) <= maxWidth) return s;
+  let lo = 0;
+  let hi = s.length;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    if (measureText(s.slice(0, mid) + "\u2026", fs) <= maxWidth) lo = mid;
+    else hi = mid - 1;
+  }
+  return lo <= 0 ? "" : s.slice(0, lo) + "\u2026";
+}
+var clipCounter = 0;
+function drawItems(g, items, ctx, path = []) {
+  const { palette, solidFill: solid } = ctx;
+  for (const it of items) {
+    if (it.type === "empty") {
+      g.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 7).attr("fill", "none").attr("stroke", ctx.neutral).attr("stroke-width", 1).attr("stroke-dasharray", "3 4").attr("opacity", 0.7);
+      continue;
+    }
+    const node = it.node;
+    const itemPath = [...path, node.id];
+    const color = colorOf(node, ctx);
+    const stroke = color ?? ctx.neutral;
+    const cell = g.append("g").attr("class", "dgmo-block-cell").attr("data-block-id", node.id).attr("data-block-path", itemPath.join(" / "));
+    if (it.lineNumber !== void 0)
+      cell.attr("data-line-number", it.lineNumber);
+    if (ctx.activeKey) {
+      const v = node.metadata[ctx.activeKey];
+      if (v) cell.attr(`data-tag-${ctx.activeKey}`, v);
+    }
+    if (it.type === "collapsed") {
+      const fill2 = color ? solid ? color : mix(color, palette.bg, 12) : palette.surface;
+      const cid = `dgmo-block-clip-${clipCounter++}`;
+      cell.append("clipPath").attr("id", cid).append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10);
+      cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10).attr("fill", fill2).attr("stroke", stroke).attr("stroke-width", 1.5);
+      cell.append("text").attr("x", it.x + it.w / 2).attr("y", it.y + it.h / 2 + 4).attr("text-anchor", "middle").attr("font-size", 12.5).attr("font-weight", 700).attr("fill", palette.text).text(clipLabel(it.label ?? "", it.w - 24, 12.5));
+      cell.append("rect").attr("x", it.x).attr("y", it.y + it.h - BLOCK_BAR_H).attr("width", it.w).attr("height", BLOCK_BAR_H).attr("fill", solid && color ? palette.text : stroke).attr("clip-path", `url(#${cid})`);
+      bindToggle(cell, it, ctx, it.h);
+      continue;
+    }
+    if (it.type === "container") {
+      const fill2 = color ? solid ? color : mix(color, palette.bg, 7) : palette.surface;
+      cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 10).attr("fill", fill2).attr("stroke", stroke).attr("stroke-width", 1.5);
+      const sizeMetric = Math.min(it.w, it.h * 2.5);
+      const headerFs = Math.max(
+        13,
+        Math.min(20, Math.round(13 + (sizeMetric - 220) / 70))
+      );
+      const grow = (headerFs - 13) / (20 - 13);
+      const headerOpacity = 0.92 - grow * 0.3;
+      const headerY = it.y + Math.round(headerFs * 0.7) + 7;
+      cell.append("text").attr("x", it.x + it.w / 2).attr("y", headerY).attr("text-anchor", "middle").attr("font-size", headerFs).attr("font-weight", 700).attr("fill", palette.text).attr("opacity", headerOpacity).text(clipLabel(it.label ?? "", it.w - 24, headerFs));
+      bindToggle(cell, it, ctx, BLOCK_HEADER_H);
+      if (it.inner) drawItems(g, it.inner, ctx, itemPath);
+      continue;
+    }
+    const fill = color ? solid ? color : mix(color, palette.bg, 14) : palette.bg;
+    cell.attr("data-leaf", "true");
+    cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", it.h).attr("rx", 8).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 1.25);
+    cell.append("text").attr("x", it.x + it.w / 2).attr("y", it.y + it.h / 2 + 5).attr("text-anchor", "middle").attr("font-size", 13).attr("font-weight", 600).attr("fill", palette.text).text(clipLabel(it.label ?? "", it.w - 16, 13));
+  }
+}
+function bindToggle(cell, it, ctx, hitH) {
+  if (!ctx.onToggle || !it.node || it.lineNumber === void 0) return;
+  const id = it.node.id;
+  const ln = it.lineNumber;
+  cell.append("rect").attr("x", it.x).attr("y", it.y).attr("width", it.w).attr("height", hitH).attr("rx", 10).attr("fill", "transparent").style("cursor", "pointer").on("click", () => ctx.onToggle(id, ln));
+}
+function authoredCollapsedIds(parsed) {
+  const into = /* @__PURE__ */ new Set();
+  collectCollapsed(parsed, into);
+  return into;
+}
+function collectCollapsed(parsed, into) {
+  const walk = (grid) => {
+    for (const row of grid.rows)
+      for (const c of row)
+        if (isBlockNode(c)) {
+          if (c.collapsed && c.grid) into.add(c.id);
+          if (c.grid) walk(c.grid);
+        }
+  };
+  walk(parsed.top);
+}
+function buildBlockLegend(parsed) {
+  if (parsed.tagGroups.length === 0) return null;
+  const tg = parsed.tagGroups[0];
+  const key = tagAttrKey(tg.name);
+  const used = /* @__PURE__ */ new Set();
+  const walk = (grid) => {
+    for (const row of grid.rows)
+      for (const c of row)
+        if (isBlockNode(c)) {
+          const v = c.metadata[key];
+          if (v) used.add(v.toLowerCase());
+          if (c.grid) walk(c.grid);
+        }
+  };
+  walk(parsed.top);
+  const entries = tg.entries.filter((e) => used.has(e.value.toLowerCase())).map((e) => ({ value: e.value, color: e.color }));
+  if (entries.length === 0) return null;
+  return { groups: [{ name: tg.name, entries }], activeGroup: tg.name };
+}
+
+export {
+  layoutBlock,
+  renderBlockForExport,
+  renderBlock,
+  authoredCollapsedIds
+};
+//# sourceMappingURL=chunk-RJE5JTVK.js.map