From 63ec8eb2e316034ce041f5c319407bcd3d49bc78 Mon Sep 17 00:00:00 2001 From: Jan-Henrik Bruhn Date: Thu, 15 Jan 2026 11:54:02 +0100 Subject: [PATCH] feat: increase zoom range to support larger charts Allow zooming out to 10% (previously 50%) to better accommodate large constellation analyses. Added zoom constants (MIN_ZOOM=0.1, MAX_ZOOM=2.5) for consistency across fitView and ReactFlow component. Co-Authored-By: Claude Sonnet 4.5 --- src/components/Editor/GraphEditor.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Editor/GraphEditor.tsx b/src/components/Editor/GraphEditor.tsx index 91331f7..8b0d553 100644 --- a/src/components/Editor/GraphEditor.tsx +++ b/src/components/Editor/GraphEditor.tsx @@ -47,6 +47,10 @@ import type { ExportOptions } from "../../utils/graphExport"; import type { Actor, Relation, Group, GroupData } from "../../types"; +// Zoom level constants for React Flow +const MIN_ZOOM = 0.1; // Allow zooming out to 10% for large charts +const MAX_ZOOM = 2.5; // Allow zooming in to 250% + interface GraphEditorProps { selectedNode: Actor | null; selectedEdge: Relation | null; @@ -499,8 +503,8 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onMultiSelect, nodes: matchingNodeIds.map((id) => ({ id })), padding: 0.2, // 20% padding around selection duration: 300, // 300ms smooth animation - maxZoom: 2.5, // Allow more zoom in - minZoom: 0.5, // Don't zoom out too much + maxZoom: MAX_ZOOM, + minZoom: MIN_ZOOM, }); } }, 300); // Debounce 300ms @@ -1085,6 +1089,8 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onMultiSelect, snapGrid={[gridSize, gridSize]} panOnDrag={panOnDrag} zoomOnScroll={zoomOnScroll} + minZoom={MIN_ZOOM} + maxZoom={MAX_ZOOM} connectionRadius={0} fitView attributionPosition="bottom-left"