Zustand POC

application/ui/package.json

@@ -50,7 +50,8 @@
         "react-router-dom": "~6.30.1",
         "recharts": "~2.15.3",
         "static-path": "~0.0.4",
-        "uuid": "~11.1.0"
+        "uuid": "~11.1.0",
+        "zustand": "~5.0.8"
     },
     "devDependencies": {
         "@eslint/compat": "~1.2.8",

application/ui/src/components/zoom/use-sync-zoom.hook.tsx

@@ -4,7 +4,7 @@
 import { useEffect, useMemo } from 'react';
 
 import { ZoomState } from './types';
-import { useSetZoom } from './zoom.provider';
+import { useSetZoom } from './zoom.store';
 
 export type Size = { width: number; height: number };
 

application/ui/src/components/zoom/zoom-transform.tsx

@@ -1,7 +1,7 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { ReactNode, useRef } from 'react';
+import { ReactNode, useCallback, useRef } from 'react';
 
 import { clampBetween } from '@geti/smart-tools/utils';
 import { createUseGesture, dragAction, pinchAction, wheelAction } from '@use-gesture/react';
@@ -11,8 +11,7 @@ import { useContainerSize } from './use-container-size';
 import { usePanning } from './use-panning.hook';
 import { Size, useSyncZoom } from './use-sync-zoom.hook';
 import { useWheelPanning } from './use-wheel-panning.hook';
-import { getZoomState } from './util';
-import { useSetZoom, useZoom } from './zoom.provider';
+import { useSetZoom, useZoom, zoomStore } from './zoom.store';
 
 import classes from './zoom.module.scss';
 
@@ -27,7 +26,7 @@ const useGesture = createUseGesture([wheelAction, pinchAction, dragAction]);
 
 export const ZoomTransform = ({ children, target, zoomInMultiplier = 10, zoomOutDivisor = 2 }: ZoomTransformProps) => {
     const zoom = useZoom();
-    const { setZoom } = useSetZoom();
+    const { setZoom, zoomToCursor } = useSetZoom();
     const { isPanning, setIsPanning } = usePanning();
     const containerRef = useRef<HTMLDivElement>(null);
     const containerSize = useContainerSize(containerRef);
@@ -37,45 +36,48 @@ export const ZoomTransform = ({ children, target, zoomInMultiplier = 10, zoomOut
 
     const cursorIcon = isPanning && isGrabbing ? 'grabbing' : isPanning ? 'grab' : 'default';
 
+    const handleTranslateUpdate = useCallback(
+        ({ x, y }: Point) => {
+            const currentZoom = zoomStore.getState();
+            setZoom({
+                hasAnimation: false,
+                translate: { x: currentZoom.translate.x + x, y: currentZoom.translate.y + y },
+            });
+        },
+        [setZoom]
+    );
+
     useGesture(
         {
             onPinch: ({ origin, offset: [deltaDistance] }) => {
                 const rect = containerRef.current?.getBoundingClientRect();
                 if (!rect) return;
 
+                const currentZoom = zoomStore.getState();
                 const factor = 1 + deltaDistance / 200;
                 const newScale = clampBetween(
-                    zoom.initialCoordinates.scale,
-                    zoom.initialCoordinates.scale * factor,
-                    zoom.maxZoomIn
+                    currentZoom.initialCoordinates.scale,
+                    currentZoom.initialCoordinates.scale * factor,
+                    currentZoom.maxZoomIn
                 );
                 const relativeCursor = { x: origin[0] - rect.left, y: origin[1] - rect.top };
 
-                setZoom(
-                    getZoomState({
-                        newScale,
-                        cursorX: relativeCursor.x,
-                        cursorY: relativeCursor.y,
-                        initialCoordinates: zoom.initialCoordinates,
-                    })
-                );
+                zoomToCursor(newScale, relativeCursor.x, relativeCursor.y);
             },
             onWheel: ({ event, delta: [, verticalScrollDelta] }) => {
                 const rect = containerRef.current?.getBoundingClientRect();
                 if (!rect) return;
 
+                const currentZoom = zoomStore.getState();
                 const factor = 1 - verticalScrollDelta / 500;
-                const newScale = clampBetween(zoom.initialCoordinates.scale, zoom.scale * factor, zoom.maxZoomIn);
+                const newScale = clampBetween(
+                    currentZoom.initialCoordinates.scale,
+                    currentZoom.scale * factor,
+                    currentZoom.maxZoomIn
+                );
                 const relativeCursor = { x: event.clientX - rect.left, y: event.clientY - rect.top };
 
-                setZoom(
-                    getZoomState({
-                        newScale,
-                        cursorX: relativeCursor.x,
-                        cursorY: relativeCursor.y,
-                        initialCoordinates: zoom.initialCoordinates,
-                    })
-                );
+                zoomToCursor(newScale, relativeCursor.x, relativeCursor.y);
             },
             onDrag: ({ delta: [x, y] }) => handleTranslateUpdate({ x, y }),
         },
@@ -88,14 +90,6 @@ export const ZoomTransform = ({ children, target, zoomInMultiplier = 10, zoomOut
         }
     );
 
-    const handleTranslateUpdate = ({ x, y }: Point) => {
-        setZoom((prev) => ({
-            ...prev,
-            hasAnimation: false,
-            translate: { x: prev.translate.x + x, y: prev.translate.y + y },
-        }));
-    };
-
     return (
         <div
             ref={containerRef}