feat: add minimum zoom level for canvas to enhance usability

- Introduced a constant for minimum zoom level, allowing users to zoom out further on large boards.
- Updated the CanvasInner component to apply the new minimum zoom setting, improving the overall user experience during canvas interactions.
This commit is contained in:
Matthias
2026-03-28 22:07:21 +01:00
parent cbfa14a40b
commit e41d3c03b0
2 changed files with 284 additions and 0 deletions

View File

@@ -72,6 +72,9 @@ interface CanvasInnerProps {
const OPTIMISTIC_NODE_PREFIX = "optimistic_";
const OPTIMISTIC_EDGE_PREFIX = "optimistic_edge_";
/** @xyflow/react default minZoom ist 0.5 — dreimal weiter raus für große Boards. */
const CANVAS_MIN_ZOOM = 0.5 / 3;
function isOptimisticNodeId(id: string): boolean {
return id.startsWith(OPTIMISTIC_NODE_PREFIX);
}
@@ -1981,6 +1984,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
onDragOver={onDragOver}
onDrop={onDrop}
fitView
minZoom={CANVAS_MIN_ZOOM}
snapToGrid
snapGrid={[16, 16]}
deleteKeyCode={["Backspace", "Delete"]}