@diagrammo/dgmo 0.46.0 → 0.48.0

package/dist/chunk-PDKUANDZ.js

@@ -0,0 +1,35 @@
+// src/utils/fit-canvas.ts
+function fitDiagramToCanvas(p) {
+  const scaleX = (p.width - p.padding * 2) / p.diagramW;
+  let scale;
+  let canvasHeight;
+  if (p.exportMode) {
+    scale = Math.min(p.maxScale, scaleX);
+    canvasHeight = p.titleHeight + p.diagramH * scale + p.padding * 2;
+  } else {
+    const availH = p.height - p.titleHeight;
+    const scaleY = (availH - p.padding * 2) / p.diagramH;
+    scale = Math.min(p.maxScale, scaleX, scaleY);
+    canvasHeight = p.height;
+  }
+  const scaledW = p.diagramW * scale;
+  return {
+    scale,
+    offsetX: (p.width - scaledW) / 2,
+    offsetY: p.titleHeight + p.padding,
+    canvasHeight
+  };
+}
+
+// src/graph/edge-spline.ts
+import * as d3Shape from "d3-shape";
+var lineGenerator = d3Shape.line().x((d) => d.x).y((d) => d.y).curve(d3Shape.curveBasis);
+function edgeSplinePath(points) {
+  return lineGenerator(points);
+}
+
+export {
+  fitDiagramToCanvas,
+  edgeSplinePath
+};
+//# sourceMappingURL=chunk-PDKUANDZ.js.map

package/dist/chunk-PWIHZ6NJ.js

@@ -0,0 +1,296 @@
+import {
+  computeLegendLayout
+} from "./chunk-YAA6IID3.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  CONTROLS_ICON_PATH,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_HEIGHT,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_TOGGLE_DOT_R,
+  LEGEND_TOGGLE_OFF_OPACITY,
+  measureLegendText
+} from "./chunk-QOOUC2J5.js";
+import {
+  mix,
+  valueRampStops
+} from "./chunk-P6T66CCZ.js";
+import {
+  tagAttrKey
+} from "./chunk-QLCCJEJI.js";
+
+// src/utils/legend-d3.ts
+var LEGEND_TEXT_DY = "0.32em";
+function centerText(sel) {
+  return sel.attr("dy", LEGEND_TEXT_DY);
+}
+function renderLegendD3(container, config, state, palette, isDark, callbacks, containerWidth) {
+  const width = containerWidth ?? parseFloat(container.attr("width") || "800");
+  let currentState = { ...state };
+  let currentLayout;
+  const legendG = container.append("g").attr("class", "dgmo-legend").attr("data-legend-title-relation", config.position.titleRelation).attr(
+    "data-legend-capsule-addon-width",
+    String(config.capsulePillAddonWidth ?? 0)
+  );
+  function render() {
+    currentLayout = computeLegendLayout(config, currentState, width);
+    legendG.selectAll("*").remove();
+    if (currentLayout.height === 0) return;
+    if (currentState.activeGroup) {
+      legendG.attr("data-legend-active", tagAttrKey(currentState.activeGroup));
+    } else {
+      legendG.attr("data-legend-active", null);
+    }
+    const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+    const pillBorder = mix(palette.textMuted, palette.bg, 50);
+    if (currentLayout.activeCapsule) {
+      renderCapsule(
+        legendG,
+        currentLayout.activeCapsule,
+        palette,
+        groupBg,
+        pillBorder,
+        isDark,
+        callbacks
+      );
+    }
+    for (const pill of currentLayout.pills) {
+      renderPill(legendG, pill, palette, groupBg, callbacks);
+    }
+    if (currentLayout.controlsGroup) {
+      renderControlsGroup(
+        legendG,
+        currentLayout.controlsGroup,
+        palette,
+        groupBg,
+        pillBorder,
+        callbacks,
+        config
+      );
+    }
+    for (const ctrl of currentLayout.controls) {
+      renderControl(
+        legendG,
+        ctrl,
+        palette,
+        groupBg,
+        pillBorder,
+        isDark,
+        config.controls
+      );
+    }
+  }
+  render();
+  return {
+    setState(newState) {
+      currentState = { ...newState };
+      render();
+    },
+    destroy() {
+      legendG.remove();
+    },
+    getHeight() {
+      return currentLayout?.height ?? 0;
+    },
+    getLayout() {
+      return currentLayout;
+    }
+  };
+}
+function renderCapsule(parent, capsule, palette, groupBg, pillBorder, isDark, callbacks) {
+  const g = parent.append("g").attr("transform", `translate(${capsule.x},${capsule.y})`).attr("data-legend-group", tagAttrKey(capsule.groupName)).style("cursor", "pointer");
+  g.append("rect").attr("width", capsule.width).attr("height", capsule.height).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
+  const pill = capsule.pill;
+  g.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", palette.bg);
+  g.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", "none").attr("stroke", pillBorder).attr("stroke-width", 0.75);
+  g.append("text").attr("x", pill.x + pill.width / 2).attr("y", LEGEND_HEIGHT / 2).attr("text-anchor", "middle").call(centerText).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.text).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(capsule.groupName);
+  if (capsule.gradient) {
+    const gr = capsule.gradient;
+    const gradId = `dgmo-legend-ramp-${tagAttrKey(capsule.groupName).replace(/[^a-z0-9]+/g, "-")}`;
+    const def = g.append("defs").append("linearGradient").attr("id", gradId);
+    for (const stop of valueRampStops(gr.low, gr.high, { isDark })) {
+      def.append("stop").attr("offset", `${stop.offset * 100}%`).attr("stop-color", stop.color);
+    }
+    g.append("text").attr("x", gr.minX).attr("y", gr.textY).call(centerText).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(gr.minText);
+    g.append("rect").attr("class", "dgmo-legend-gradient-ramp").attr("data-ramp-min", gr.min).attr("data-ramp-max", gr.max).attr("x", gr.rampX).attr("y", gr.rampY).attr("width", gr.rampW).attr("height", gr.rampH).attr("rx", 2).attr("fill", `url(#${gradId})`);
+    g.append("text").attr("x", gr.maxX).attr("y", gr.textY).call(centerText).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(gr.maxText);
+  }
+  for (const entry of capsule.entries) {
+    const entryG = g.append("g").attr("data-legend-entry", entry.value.toLowerCase()).attr("data-series-name", entry.value).style("cursor", "pointer");
+    entryG.append("circle").attr("cx", entry.dotCx).attr("cy", entry.dotCy).attr("r", LEGEND_DOT_R).attr("fill", entry.color);
+    entryG.append("text").attr("x", entry.textX).attr("y", entry.textY).call(centerText).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("font-family", FONT_FAMILY).text(entry.displayValue ?? entry.value);
+    if (callbacks?.onEntryHover) {
+      const groupName = capsule.groupName;
+      const entryValue = entry.value;
+      const onHover = callbacks.onEntryHover;
+      entryG.on("mouseenter", () => onHover(groupName, entryValue)).on("mouseleave", () => onHover(groupName, null));
+    }
+  }
+  if (callbacks?.onGroupToggle) {
+    const cb = callbacks.onGroupToggle;
+    const name = capsule.groupName;
+    g.on("click", () => cb(name));
+  }
+  if (callbacks?.onGroupRendered) {
+    callbacks.onGroupRendered(capsule.groupName, g, true);
+  }
+}
+function renderPill(parent, pill, palette, groupBg, callbacks) {
+  const g = parent.append("g").attr("transform", `translate(${pill.x},${pill.y})`).attr("data-legend-group", tagAttrKey(pill.groupName)).style("cursor", "pointer");
+  g.append("rect").attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", groupBg);
+  g.append("text").attr("x", pill.width / 2).attr("y", pill.height / 2).attr("text-anchor", "middle").call(centerText).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(pill.groupName);
+  if (callbacks?.onGroupToggle) {
+    const cb = callbacks.onGroupToggle;
+    const name = pill.groupName;
+    g.on("click", () => cb(name));
+  }
+  if (callbacks?.onGroupRendered) {
+    callbacks.onGroupRendered(pill.groupName, g, false);
+  }
+}
+function renderControl(parent, ctrl, palette, _groupBg, pillBorder, _isDark, configControls) {
+  const g = parent.append("g").attr("transform", `translate(${ctrl.x},${ctrl.y})`).attr("data-legend-control", ctrl.id).style("cursor", "pointer");
+  if (ctrl.exportBehavior === "strip") {
+    g.attr("data-export-ignore", "true");
+  }
+  g.append("rect").attr("width", ctrl.width).attr("height", ctrl.height).attr("rx", ctrl.height / 2).attr("fill", "none").attr("stroke", pillBorder).attr("stroke-width", 0.75);
+  let textX = ctrl.width / 2;
+  if (ctrl.icon && ctrl.label) {
+    const iconG = g.append("g").attr("transform", `translate(8,${(ctrl.height - 14) / 2})`);
+    iconG.html(ctrl.icon);
+    textX = 8 + 14 + LEGEND_ENTRY_DOT_GAP + measureLegendText(ctrl.label, LEGEND_PILL_FONT_SIZE) / 2;
+  }
+  if (ctrl.label) {
+    g.append("text").attr("x", textX).attr("y", ctrl.height / 2).attr("text-anchor", "middle").call(centerText).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(ctrl.label);
+  }
+  if (ctrl.children) {
+    let cx = ctrl.width + 4;
+    for (const child of ctrl.children) {
+      const childG = g.append("g").attr("transform", `translate(${cx},0)`).style("cursor", "pointer");
+      childG.append("rect").attr("width", child.width).attr("height", ctrl.height).attr("rx", ctrl.height / 2).attr(
+        "fill",
+        child.isActive ? palette.primary ?? palette.text : "none"
+      ).attr("stroke", pillBorder).attr("stroke-width", 0.75);
+      childG.append("text").attr("x", child.width / 2).attr("y", ctrl.height / 2).attr("text-anchor", "middle").call(centerText).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", child.isActive ? palette.bg : palette.textMuted).attr("font-family", FONT_FAMILY).text(child.label);
+      const configCtrl2 = configControls?.find((c) => c.id === ctrl.id);
+      const configChild = configCtrl2?.children?.find((c) => c.id === child.id);
+      if (configChild?.onClick) {
+        const onClick = configChild.onClick;
+        childG.on("click", () => onClick());
+      }
+      cx += child.width + 4;
+    }
+  }
+  const configCtrl = configControls?.find((c) => c.id === ctrl.id);
+  if (configCtrl?.onClick) {
+    const onClick = configCtrl.onClick;
+    g.on("click", () => onClick());
+  }
+}
+function renderControlsGroup(parent, layout, palette, groupBg, pillBorder, callbacks, config) {
+  const g = parent.append("g").attr("transform", `translate(${layout.x},${layout.y})`).attr("data-legend-controls", layout.expanded ? "expanded" : "collapsed").attr("data-export-ignore", "true").style("cursor", "pointer");
+  if (!layout.expanded) {
+    g.append("rect").attr("width", layout.width).attr("height", layout.height).attr("rx", layout.height / 2).attr("fill", groupBg).attr("stroke", pillBorder).attr("stroke-width", 0.75);
+    const iconSize = 14;
+    const iconX = (layout.width - iconSize) / 2;
+    const iconY = (layout.height - iconSize) / 2;
+    g.append("path").attr("d", CONTROLS_ICON_PATH).attr("transform", `translate(${iconX},${iconY})`).attr("fill", palette.textMuted).attr("fill-rule", "evenodd").attr("pointer-events", "none");
+    if (callbacks?.onControlsExpand) {
+      const cb = callbacks.onControlsExpand;
+      g.on("click", () => cb());
+    }
+  } else {
+    const pill = layout.pill;
+    g.append("rect").attr("width", layout.width).attr("height", layout.height).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
+    const pillG = g.append("g").attr("class", "controls-gear-pill").style("cursor", "pointer");
+    pillG.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", palette.bg);
+    pillG.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", "none").attr("stroke", pillBorder).attr("stroke-width", 0.75);
+    const iconSize = 14;
+    const iconX = pill.x + (pill.width - iconSize) / 2;
+    const iconY = pill.y + (pill.height - iconSize) / 2;
+    pillG.append("path").attr("d", CONTROLS_ICON_PATH).attr("transform", `translate(${iconX},${iconY})`).attr("fill", palette.text).attr("fill-rule", "evenodd").attr("pointer-events", "none");
+    if (callbacks?.onControlsExpand) {
+      const cb = callbacks.onControlsExpand;
+      pillG.on("click", (event) => {
+        event.stopPropagation();
+        cb();
+      });
+    }
+    const toggles = config?.controlsGroup?.toggles ?? [];
+    for (const tl of layout.toggles) {
+      const toggle = toggles.find((t) => t.id === tl.id);
+      const entryG = g.append("g").attr("data-controls-toggle", tl.id).style("cursor", "pointer");
+      if (tl.active) {
+        entryG.append("circle").attr("cx", tl.dotCx).attr("cy", tl.dotCy).attr("r", LEGEND_TOGGLE_DOT_R).attr("fill", palette.primary ?? palette.text);
+      } else {
+        entryG.append("circle").attr("cx", tl.dotCx).attr("cy", tl.dotCy).attr("r", LEGEND_TOGGLE_DOT_R).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1);
+      }
+      entryG.append("text").attr("x", tl.textX).attr("y", tl.textY).call(centerText).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("opacity", tl.active ? 1 : LEGEND_TOGGLE_OFF_OPACITY).attr("font-family", FONT_FAMILY).text(tl.label);
+      if (callbacks?.onControlsToggle && toggle) {
+        const cb = callbacks.onControlsToggle;
+        const id = tl.id;
+        const newActive = !tl.active;
+        entryG.on("click", (event) => {
+          event.stopPropagation();
+          cb(id, newActive);
+        });
+      }
+    }
+  }
+}
+
+// src/utils/legend-integration.ts
+var DEFAULT_POSITION = {
+  placement: "top-center",
+  titleRelation: "below-title"
+};
+function renderIntegratedLegend(container, opts) {
+  return renderLegendD3(
+    container,
+    {
+      groups: opts.groups,
+      position: opts.position ?? DEFAULT_POSITION,
+      mode: opts.mode,
+      ...opts.controls !== void 0 && { controls: opts.controls },
+      ...opts.controlsGroup !== void 0 && {
+        controlsGroup: opts.controlsGroup
+      },
+      ...opts.controlsHost !== void 0 && {
+        controlsHost: opts.controlsHost
+      },
+      ...opts.titleWidth !== void 0 && { titleWidth: opts.titleWidth },
+      ...opts.capsulePillAddonWidth !== void 0 && {
+        capsulePillAddonWidth: opts.capsulePillAddonWidth
+      },
+      ...opts.showEmptyGroups !== void 0 && {
+        showEmptyGroups: opts.showEmptyGroups
+      },
+      ...opts.showInactivePills !== void 0 && {
+        showInactivePills: opts.showInactivePills
+      }
+    },
+    {
+      activeGroup: opts.activeGroup ?? null,
+      ...opts.hiddenAttributes !== void 0 && {
+        hiddenAttributes: opts.hiddenAttributes
+      },
+      ...opts.controlsExpanded !== void 0 && {
+        controlsExpanded: opts.controlsExpanded
+      }
+    },
+    opts.palette,
+    opts.isDark,
+    opts.callbacks,
+    opts.width
+  );
+}
+
+export {
+  renderLegendD3,
+  renderIntegratedLegend
+};
+//# sourceMappingURL=chunk-PWIHZ6NJ.js.map