@glyphjs/components 0.5.1 → 0.6.0

package/dist/index.d.cts

@@ -381,6 +381,8 @@ interface ArchitectureData {
     children: ArchitectureNode[];
     edges: ArchitectureEdge[];
     layout?: 'top-down' | 'left-right' | 'bottom-up';
+    interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
+    showZoomControls?: boolean;
 }
 interface PositionedArchNode {
     id: string;
@@ -421,7 +423,7 @@ interface ArchitectureLayout {
 }
 declare function computeArchitectureLayout(data: ArchitectureData): Promise<ArchitectureLayout>;
 
-declare function Architecture({ data, container, }: GlyphComponentProps<ArchitectureData>): ReactElement;
+declare function Architecture({ data, container, block, }: GlyphComponentProps<ArchitectureData>): ReactElement;
 
 declare const architectureDefinition: GlyphComponentDefinition<ArchitectureData>;
 

package/dist/index.d.ts

@@ -381,6 +381,8 @@ interface ArchitectureData {
     children: ArchitectureNode[];
     edges: ArchitectureEdge[];
     layout?: 'top-down' | 'left-right' | 'bottom-up';
+    interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
+    showZoomControls?: boolean;
 }
 interface PositionedArchNode {
     id: string;
@@ -421,7 +423,7 @@ interface ArchitectureLayout {
 }
 declare function computeArchitectureLayout(data: ArchitectureData): Promise<ArchitectureLayout>;
 
-declare function Architecture({ data, container, }: GlyphComponentProps<ArchitectureData>): ReactElement;
+declare function Architecture({ data, container, block, }: GlyphComponentProps<ArchitectureData>): ReactElement;
 
 declare const architectureDefinition: GlyphComponentDefinition<ArchitectureData>;
 

package/dist/index.js

@@ -1607,16 +1607,16 @@ function useZoomInteraction({
     };
   }, [interactionMode, svgRef]);
   const zoomBehavior = useMemo(() => {
-    const zoom3 = d32.zoom().scaleExtent([0.1, 4]);
-    if (typeof zoom3.filter === "function") {
-      zoom3.filter(filterFunction);
+    const zoom2 = d32.zoom().scaleExtent([0.1, 4]);
+    if (typeof zoom2.filter === "function") {
+      zoom2.filter(filterFunction);
     }
-    zoom3.on("zoom", (event) => {
+    zoom2.on("zoom", (event) => {
       if (rootRef.current) {
         d32.select(rootRef.current).attr("transform", event.transform.toString());
       }
     });
-    return zoom3;
+    return zoom2;
   }, [filterFunction, rootRef]);
   const handleActivate = useCallback(() => {
     if (interactionMode === "click-to-activate") {
@@ -4013,7 +4013,7 @@ function getThemeVar3(container, varName, fallback) {
   return getComputedStyle(container).getPropertyValue(varName).trim() || fallback;
 }
 var ARROW_MARKER_ID3 = "glyph-arch-arrowhead";
-function renderArchitecture(svgElement, layout) {
+function renderArchitecture(svgElement, layout, rootRef, zoomBehavior) {
   const svg = d32.select(svgElement);
   svg.selectAll("*").remove();
   const width = Math.max(layout.width, 200);
@@ -4026,10 +4026,12 @@ function renderArchitecture(svgElement, layout) {
   const nodeStrokeWidth = getThemeVar3(container, "--glyph-node-stroke-width", "1.5");
   const nodeFillOpacity = getThemeVar3(container, "--glyph-node-fill-opacity", "0.85");
   const root = svg.append("g").attr("class", "glyph-architecture-root");
-  const zoomBehavior = d32.zoom().scaleExtent([0.1, 4]).on("zoom", (event) => {
-    root.attr("transform", event.transform.toString());
-  });
-  svg.call(zoomBehavior);
+  if (rootRef) {
+    rootRef.current = root.node();
+  }
+  if (zoomBehavior) {
+    svg.call(zoomBehavior);
+  }
   const sortedZones = [...layout.zones].sort((a, b) => a.depth - b.depth);
   const zoneGroup = root.append("g").attr("class", "glyph-architecture-zones");
   for (const zone of sortedZones) {
@@ -4097,10 +4099,19 @@ function renderArchitecture(svgElement, layout) {
 }
 function Architecture({
   data,
-  container
+  container,
+  block
 }) {
   const svgRef = useRef(null);
+  const rootRef = useRef(null);
+  const containerRef = useRef(null);
   const [layout, setLayout] = useState(null);
+  const { overlayProps, zoomBehavior, zoomIn, zoomOut, resetZoom } = useZoomInteraction({
+    svgRef,
+    rootRef,
+    interactionMode: data.interactionMode ?? "modifier-key",
+    blockId: block.id
+  });
   useEffect(() => {
     let cancelled = false;
     computeArchitectureLayout(data).then((result) => {
@@ -4112,62 +4123,72 @@ function Architecture({
   }, [data]);
   useEffect(() => {
     if (!svgRef.current || !layout) return;
-    renderArchitecture(svgRef.current, layout);
-  }, [layout]);
+    renderArchitecture(svgRef.current, layout, rootRef, zoomBehavior);
+  }, [layout, zoomBehavior]);
   const nodeCount = countLeafNodes(data.children);
   const edgeCount = data.edges.length;
   const ariaLabel = data.title ? `${data.title}: architecture diagram with ${nodeCount} nodes and ${edgeCount} connections` : `Architecture diagram with ${nodeCount} nodes and ${edgeCount} connections`;
   const flatNodes = flattenNodes(data.children);
-  return /* @__PURE__ */ jsxs("div", { className: "glyph-architecture-container", children: [
-    !layout && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          padding: "2rem",
-          textAlign: "center",
-          color: "var(--glyph-text-muted, #7a8599)",
-          fontFamily: "Inter, system-ui, sans-serif",
-          fontSize: "13px"
-        },
-        children: "Computing layout..."
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        ref: svgRef,
-        role: "img",
-        "aria-label": ariaLabel,
-        width: "100%",
-        height: "100%",
-        style: {
-          minHeight: container.tier === "compact" ? 200 : 300,
-          maxHeight: container.tier === "compact" ? 500 : 700,
-          display: layout ? "block" : "none"
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs("table", { className: "sr-only", "aria-label": "Architecture data", style: SR_ONLY_STYLE6, children: [
-      /* @__PURE__ */ jsx("caption", { children: "Architecture nodes and connections" }),
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { scope: "col", children: "Node" }),
-        /* @__PURE__ */ jsx("th", { scope: "col", children: "Zone" }),
-        /* @__PURE__ */ jsx("th", { scope: "col", children: "Connections" })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: flatNodes.map((node) => {
-        const connections = data.edges.filter((e) => e.from === node.id || e.to === node.id).map((e) => {
-          const target = e.from === node.id ? e.to : e.from;
-          const dir = e.from === node.id ? "->" : "<-";
-          return `${dir} ${target}${e.label ? ` (${e.label})` : ""}`;
-        }).join(", ");
-        return /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("td", { children: node.label }),
-          /* @__PURE__ */ jsx("td", { children: node.zone ?? "" }),
-          /* @__PURE__ */ jsx("td", { children: connections })
-        ] }, node.id);
-      }) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "glyph-architecture-container",
+      style: { position: "relative" },
+      children: [
+        !layout && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "2rem",
+              textAlign: "center",
+              color: "var(--glyph-text-muted, #7a8599)",
+              fontFamily: "Inter, system-ui, sans-serif",
+              fontSize: "13px"
+            },
+            children: "Computing layout..."
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            ref: svgRef,
+            role: "img",
+            "aria-label": ariaLabel,
+            width: "100%",
+            height: "100%",
+            style: {
+              minHeight: container.tier === "compact" ? 200 : 300,
+              maxHeight: container.tier === "compact" ? 500 : 700,
+              display: layout ? "block" : "none"
+            }
+          }
+        ),
+        layout && overlayProps && /* @__PURE__ */ jsx(InteractionOverlay, { ...overlayProps }),
+        layout && data.showZoomControls !== false && /* @__PURE__ */ jsx(ZoomControls, { onZoomIn: zoomIn, onZoomOut: zoomOut, onReset: resetZoom }),
+        /* @__PURE__ */ jsxs("table", { className: "sr-only", "aria-label": "Architecture data", style: SR_ONLY_STYLE6, children: [
+          /* @__PURE__ */ jsx("caption", { children: "Architecture nodes and connections" }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Node" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Zone" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Connections" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: flatNodes.map((node) => {
+            const connections = data.edges.filter((e) => e.from === node.id || e.to === node.id).map((e) => {
+              const target = e.from === node.id ? e.to : e.from;
+              const dir = e.from === node.id ? "->" : "<-";
+              return `${dir} ${target}${e.label ? ` (${e.label})` : ""}`;
+            }).join(", ");
+            return /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("td", { children: node.label }),
+              /* @__PURE__ */ jsx("td", { children: node.zone ?? "" }),
+              /* @__PURE__ */ jsx("td", { children: connections })
+            ] }, node.id);
+          }) })
+        ] })
+      ]
+    }
+  );
 }
 function flattenNodes(children, zone) {
   const result = [];