feat: contextual zoom

frontend/src/app/canvas/CanvasPage.tsx

@@ -39,6 +39,7 @@ import {
   ContextMenuGroup,
 } from '@/components/ui/context-menu'
 import { CanvasMenubar } from '@/app/canvas/CanvasMenubar'
+import { createContextualNode } from '@/app/canvas/ContextualZoomNode'
 import { FlowKeyboardShortcuts } from '@/components/base/FlowKeyboardShortcuts'
 import {
   Empty,
@@ -227,7 +228,10 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
   )
 
   const nodeTypes = useMemo(
-    () => Object.fromEntries(getRegisteredNodeTypes().map((r) => [r.id, r.component])),
+    () =>
+      Object.fromEntries(
+        getRegisteredNodeTypes().map((r) => [r.id, createContextualNode(r.component)])
+      ),
     []
   )
   const edgeTypes = useMemo(() => ({ animated: AnimatedEdge }), [])
@@ -625,6 +629,8 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
                       edgeTypes={edgeTypes}
                       defaultEdgeOptions={defaultEdgeOptions}
                       colorMode={theme as ColorMode}
+                      minZoom={0.1}
+                      maxZoom={2}
                       snapToGrid
                       snapGrid={SNAP_GRID}
                       fitView