@procaaso/alphinity-ui-components 1.0.3 → 1.0.4

package/dist/index.cjs

@@ -2438,6 +2438,34 @@ function useViewBox(options) {
       };
     });
   }, [initialViewBox, maxZoom]);
+  const fitToContent = (0, import_react8.useCallback)((bounds, padding = 50) => {
+    const contentWidth = bounds.maxX - bounds.minX;
+    const contentHeight = bounds.maxY - bounds.minY;
+    if (contentWidth === 0 || contentHeight === 0) {
+      return;
+    }
+    const paddedWidth = contentWidth + padding * 2;
+    const paddedHeight = contentHeight + padding * 2;
+    const aspectRatio = initialViewBox.width / initialViewBox.height;
+    const contentAspectRatio = paddedWidth / paddedHeight;
+    let newWidth;
+    let newHeight;
+    if (contentAspectRatio > aspectRatio) {
+      newWidth = paddedWidth;
+      newHeight = paddedWidth / aspectRatio;
+    } else {
+      newHeight = paddedHeight;
+      newWidth = paddedHeight * aspectRatio;
+    }
+    const centerX = bounds.minX + contentWidth / 2;
+    const centerY = bounds.minY + contentHeight / 2;
+    setViewBox({
+      x: centerX - newWidth / 2,
+      y: centerY - newHeight / 2,
+      width: newWidth,
+      height: newHeight
+    });
+  }, [initialViewBox]);
   (0, import_react8.useEffect)(() => {
     if (!enableZoom || !svgRef.current) return;
     const svg = svgRef.current;
@@ -2669,6 +2697,8 @@ function useViewBox(options) {
     resetViewBox,
     zoomIn,
     zoomOut,
+    fitToContent,
+    setViewBox,
     screenToWorld,
     svgRef
   };
@@ -3323,6 +3353,7 @@ function PIDCanvas({
   onPaste,
   onSymbolDrop,
   onPipeCreated,
+  onMounted,
   telemetry,
   ...props
 }) {
@@ -3340,12 +3371,72 @@ function PIDCanvas({
   const {
     viewBox: controlledViewBox,
     svgRef,
-    screenToWorld
+    screenToWorld,
+    fitToContent: fitToContentViewBox,
+    setViewBox
   } = useViewBox({
     initialViewBox: diagram.viewBox,
     enablePan: features.pan ?? true,
     enableZoom: features.zoom ?? true
   });
+  const calculateContentBounds = (0, import_react13.useCallback)(() => {
+    const nodes2 = localDiagram.nodes.filter((n) => n.visible !== false);
+    if (nodes2.length === 0) {
+      return null;
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    nodes2.forEach((node) => {
+      const symbol = getSymbolDefinition(node.symbolId);
+      if (!symbol) return;
+      const nodeMinX = node.transform.x;
+      const nodeMinY = node.transform.y;
+      const nodeMaxX = node.transform.x + symbol.viewBox.width;
+      const nodeMaxY = node.transform.y + symbol.viewBox.height;
+      minX = Math.min(minX, nodeMinX);
+      minY = Math.min(minY, nodeMinY);
+      maxX = Math.max(maxX, nodeMaxX);
+      maxY = Math.max(maxY, nodeMaxY);
+    });
+    return { minX, minY, maxX, maxY };
+  }, [localDiagram.nodes]);
+  (0, import_react13.useEffect)(() => {
+    if (onMounted) {
+      const controls = {
+        fitToContent: (padding = 50) => {
+          const bounds = calculateContentBounds();
+          if (bounds) {
+            fitToContentViewBox(bounds, padding);
+          }
+        },
+        setZoom: (zoomLevel) => {
+          const centerX = controlledViewBox.x + controlledViewBox.width / 2;
+          const centerY = controlledViewBox.y + controlledViewBox.height / 2;
+          const newWidth = diagram.viewBox.width / zoomLevel;
+          const newHeight = diagram.viewBox.height / zoomLevel;
+          setViewBox({
+            x: centerX - newWidth / 2,
+            y: centerY - newHeight / 2,
+            width: newWidth,
+            height: newHeight
+          });
+        },
+        getZoom: () => {
+          return diagram.viewBox.width / controlledViewBox.width;
+        }
+      };
+      onMounted(controls);
+    }
+  }, [
+    onMounted,
+    calculateContentBounds,
+    fitToContentViewBox,
+    setViewBox,
+    controlledViewBox,
+    diagram.viewBox
+  ]);
   const { selection, selectNode, selectPipe, clearSelection } = useSelection({
     multiSelect: features.multiSelect ?? true,
     onSelectionChange