@eventcatalog/visualiser 4.0.0-beta.0 → 4.0.1

package/dist/index.mjs

@@ -19,8 +19,8 @@ import {
   useNodesState as useNodesState2,
   useEdgesState as useEdgesState2,
   useReactFlow as useReactFlow5,
+  useStoreApi,
   getNodesBounds,
-  getViewportForBounds,
   MarkerType as MarkerType8
 } from "@xyflow/react";
 import {
@@ -9972,6 +9972,106 @@ var NodeContextMenu_default = memo39(function NodeContextMenu({
   ] });
 });
 
+// src/utils/export-image.ts
+import { getViewportForBounds } from "@xyflow/react";
+var MIN_IMAGE_WIDTH = 1024;
+var MIN_IMAGE_HEIGHT = 768;
+var EXPORT_PADDING = 40;
+function getExportImageDimensions(nodesBounds) {
+  const paddedBounds = {
+    x: nodesBounds.x - EXPORT_PADDING,
+    y: nodesBounds.y - EXPORT_PADDING,
+    width: nodesBounds.width + EXPORT_PADDING * 2,
+    height: nodesBounds.height + EXPORT_PADDING * 2
+  };
+  const width = Math.max(MIN_IMAGE_WIDTH, Math.ceil(paddedBounds.width));
+  const height = Math.max(MIN_IMAGE_HEIGHT, Math.ceil(paddedBounds.height));
+  const viewport = getViewportForBounds(paddedBounds, width, height, 0.5, 2, 0);
+  return { width, height, viewport };
+}
+function extractEcVarNames(cssText) {
+  return Array.from(new Set(cssText.match(/--ec-[a-z0-9-]+/g) ?? []));
+}
+function buildExportCss(themeVars) {
+  const varDeclarations = Object.entries(themeVars).map(([name, value]) => `${name}: ${value};`).join(" ");
+  return [
+    // Applied to every element so the variables reach the cloned SVG subtree
+    `* { ${varDeclarations} }`,
+    // Mirrors .react-flow__edge-path in styles.css, which is lost in the clone
+    `.react-flow__edge-path { stroke: var(--ec-edge-stroke, #6b7280); stroke-width: 1.5; fill: none; }`
+  ].join("\n");
+}
+function collectThemeCssVars(scope) {
+  const names = /* @__PURE__ */ new Set();
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    for (const rule of Array.from(rules)) {
+      for (const name of extractEcVarNames(rule.cssText)) {
+        names.add(name);
+      }
+    }
+  }
+  const computed = window.getComputedStyle(scope);
+  const vars = {};
+  for (const name of names) {
+    const value = computed.getPropertyValue(name).trim();
+    if (value) vars[name] = value;
+  }
+  return vars;
+}
+var SVG_EXPORT_STYLE_PROPERTIES = [
+  "fill",
+  "fill-opacity",
+  "stroke",
+  "stroke-width",
+  "stroke-dasharray",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "opacity",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "letter-spacing",
+  "text-anchor",
+  "dominant-baseline"
+];
+function inlineSvgComputedStyles(viewport) {
+  const restores = [];
+  const svgElements = viewport.querySelectorAll("svg, svg *");
+  svgElements.forEach((element) => {
+    if (!(element instanceof SVGElement)) return;
+    const computed = window.getComputedStyle(element);
+    const originalStyle = element.getAttribute("style");
+    for (const property of SVG_EXPORT_STYLE_PROPERTIES) {
+      const value = computed.getPropertyValue(property);
+      if (value) element.style.setProperty(property, value);
+    }
+    restores.push(() => {
+      if (originalStyle === null) {
+        element.removeAttribute("style");
+      } else {
+        element.setAttribute("style", originalStyle);
+      }
+    });
+  });
+  return () => restores.forEach((restore) => restore());
+}
+function injectExportStyles(viewport) {
+  const styleElement = document.createElement("style");
+  styleElement.textContent = buildExportCss(collectThemeCssVars(viewport));
+  viewport.appendChild(styleElement);
+  const restoreSvgStyles = inlineSvgComputedStyles(viewport);
+  return () => {
+    restoreSvgStyles();
+    styleElement.remove();
+  };
+}
+
 // src/utils/layout.ts
 import dagre2 from "dagre";
 import { MarkerType as MarkerType7 } from "@xyflow/react";
@@ -11593,6 +11693,7 @@ var NodeGraphBuilder = ({
   const [nodes, setNodes, onNodesChange] = useNodesState2(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState2(initialEdges);
   const { fitView, getNodes, getIntersectingNodes, getZoom, setCenter } = useReactFlow5();
+  const storeApi = useStoreApi();
   useEffect9(() => {
     setNodes(initialNodes);
     setEdges(initialEdges);
@@ -12639,37 +12740,34 @@ var NodeGraphBuilder = ({
     };
   }, [fitView]);
   const handleExportVisual = useCallback12(() => {
-    const imageWidth = 1024;
-    const imageHeight = 768;
-    const nodesBounds = getNodesBounds(getNodes());
-    const width = imageWidth > nodesBounds.width ? imageWidth : nodesBounds.width;
-    const height = imageHeight > nodesBounds.height ? imageHeight : nodesBounds.height;
-    const viewport = getViewportForBounds(
-      nodesBounds,
-      width,
-      height,
-      0.5,
-      2,
-      0
-    );
+    const nodesBounds = getNodesBounds(getNodes(), {
+      nodeLookup: storeApi.getState().nodeLookup
+    });
+    const { width, height, viewport } = getExportImageDimensions(nodesBounds);
     const controls = document.querySelector(
       ".react-flow__controls"
     );
     if (controls) controls.style.display = "none";
-    toPng(document.querySelector(".react-flow__viewport"), {
+    const viewportElement = document.querySelector(
+      ".react-flow__viewport"
+    );
+    const removeExportStyles = injectExportStyles(viewportElement);
+    toPng(viewportElement, {
       backgroundColor: "#f1f1f1",
       width,
       height,
       style: {
-        width: width.toString(),
-        height: height.toString(),
+        width: `${width}px`,
+        height: `${height}px`,
         transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`
       }
     }).then((dataUrl) => {
       downloadImage(dataUrl, title);
+    }).finally(() => {
+      removeExportStyles();
       if (controls) controls.style.display = "block";
     });
-  }, [getNodes, downloadImage, title]);
+  }, [getNodes, storeApi, downloadImage, title]);
   const handleLegendClick = useCallback12(
     (collectionType, groupId) => {
       const isLegendTarget = (node) => {