From 198d3e412b2d736edb8ad9d8887fad20defa0397 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Wed, 26 Feb 2025 15:11:45 -0500
Subject: [PATCH] auto zoom to the number of nodes that are on the canvas
---
.../Experiment/Workflows/WorkflowCanvas.tsx | 40 +++++++++++++++++--
1 file changed, 37 insertions(+), 3 deletions(-)
diff --git a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx
index 4c2ac430..3277a5c7 100644
--- a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx
+++ b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx
@@ -1,6 +1,13 @@
-import { Background, ControlButton, Controls, ReactFlow } from '@xyflow/react';
+import {
+ Background,
+ ControlButton,
+ Controls,
+ ReactFlow,
+ ReactFlowProvider,
+ useReactFlow,
+} from '@xyflow/react';
import { PlusCircleIcon } from 'lucide-react';
-import React from 'react';
+import React, { useEffect } from 'react';
function generateNodes(workflow: any) {
let out: any[] = [];
@@ -47,12 +54,31 @@ function generateEdges(workflow: any) {
return out;
}
-export default function WorkflowCanvas({ selectedWorkflow }) {
+const Flow = ({ selectedWorkflow }) => {
+ const reactFlowInstance = useReactFlow();
+ // Use fitView after the component mounts
+ useEffect(() => {
+ // Wait a moment to ensure the flow is rendered before fitting
+ const timer = setTimeout(() => {
+ reactFlowInstance.fitView({
+ includeHiddenNodes: false, // Don't include hidden nodes
+ minZoom: 0.5, // Set minimum zoom level
+ maxZoom: 10, // Set maximum zoom level
+ });
+ }, 100);
+
+ return () => clearTimeout(timer);
+ }, [reactFlowInstance, selectedWorkflow]);
+
return (
<ReactFlow
nodes={generateNodes(selectedWorkflow)}
edges={generateEdges(selectedWorkflow)}
fitView
+ zoomOnScroll={false}
+ zoomOnPinch={false}
+ zoomOnDoubleClick={false}
+ panOnScroll={false}
style={{ backgroundColor: '#F7F9FB' }}
>
<Background color="#96ADE9" />
@@ -72,4 +98,12 @@ export default function WorkflowCanvas({ selectedWorkflow }) {
/>
</ReactFlow>
);
+};
+
+export default function WorkflowCanvas({ selectedWorkflow }) {
+ return (
+ <ReactFlowProvider>
+ <Flow selectedWorkflow={selectedWorkflow} />
+ </ReactFlowProvider>
+ );
}
--
GitLab