jan-henrik/constellation-analyzer
1
0
Fork 0
mirror of https://github.com/OFFIS-ESC/constellation-analyzer synced 2026-01-27 07:43:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: increase zoom range to support larger charts

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn 2026-01-15 11:54:02 +01:00
parent a554aa156f
commit 63ec8eb2e3
1 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/Editor/GraphEditor.tsx
View file

@ -47,6 +47,10 @@ import type { ExportOptions } from "../../utils/graphExport";
import type { Actor, Relation, Group, GroupData } from "../../types"; 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 { interface GraphEditorProps {
selectedNode: Actor | null; selectedNode: Actor | null;
selectedEdge: Relation | null; selectedEdge: Relation | null;
@ -499,8 +503,8 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onMultiSelect,
nodes: matchingNodeIds.map((id) => ({ id })), nodes: matchingNodeIds.map((id) => ({ id })),
padding: 0.2, // 20% padding around selection padding: 0.2, // 20% padding around selection
duration: 300, // 300ms smooth animation duration: 300, // 300ms smooth animation
maxZoom: 2.5, // Allow more zoom in maxZoom: MAX_ZOOM,
minZoom: 0.5, // Don't zoom out too much minZoom: MIN_ZOOM,
}); });
} }
}, 300); // Debounce 300ms }, 300); // Debounce 300ms
@ -1085,6 +1089,8 @@ const GraphEditor = ({ onNodeSelect, onEdgeSelect, onGroupSelect, onMultiSelect,
snapGrid={[gridSize, gridSize]} snapGrid={[gridSize, gridSize]}
panOnDrag={panOnDrag} panOnDrag={panOnDrag}
zoomOnScroll={zoomOnScroll} zoomOnScroll={zoomOnScroll}
minZoom={MIN_ZOOM}
maxZoom={MAX_ZOOM}
connectionRadius={0} connectionRadius={0}
fitView fitView
attributionPosition="bottom-left" attributionPosition="bottom-left"