WIP: migrated store and useSvelteFlow hook to signals & solved state propagation for provider

packages/svelte/src/lib/actions/drag/index.ts

@@ -25,24 +25,24 @@ export default function drag(domNode: Element, params: UseDragParams) {
     onDragStop,
     onNodeMouseDown,
     getStoreItems: () => {
-      const snapGrid = get(store.snapGrid);
+      const snapGrid = store.snapGrid;
       const vp = get(store.viewport);
 
       return {
         nodes: get(store.nodes),
-        nodeLookup: get(store.nodeLookup),
+        nodeLookup: store.nodeLookup,
         edges: get(store.edges),
-        nodeExtent: get(store.nodeExtent),
+        nodeExtent: store.nodeExtent,
         snapGrid: snapGrid ? snapGrid : [0, 0],
         snapToGrid: !!snapGrid,
-        nodeOrigin: get(store.nodeOrigin),
-        multiSelectionActive: get(store.multiselectionKeyPressed),
-        domNode: get(store.domNode),
+        nodeOrigin: store.nodeOrigin,
+        multiSelectionActive: store.multiselectionKeyPressed,
+        domNode: store.domNode,
         transform: [vp.x, vp.y, vp.zoom],
-        autoPanOnNodeDrag: get(store.autoPanOnNodeDrag),
-        nodesDraggable: get(store.nodesDraggable),
-        selectNodesOnDrag: get(store.selectNodesOnDrag),
-        nodeDragThreshold: get(store.nodeDragThreshold),
+        autoPanOnNodeDrag: store.autoPanOnNodeDrag,
+        nodesDraggable: store.nodesDraggable,
+        selectNodesOnDrag: store.selectNodesOnDrag,
+        nodeDragThreshold: store.nodeDragThreshold,
         unselectNodesAndEdges: store.unselectNodesAndEdges,
         updateNodePositions: store.updateNodePositions,
         panBy: store.panBy

packages/svelte/src/lib/actions/zoom/index.ts

@@ -14,13 +14,12 @@ type ZoomParams = {
   initialViewport: Viewport;
   minZoom: number;
   maxZoom: number;
-  dragging: Writable<boolean>;
+  setPanZoomInstance: (panZoomInstance: PanZoomInstance) => void;
   onPanZoomStart?: OnPanZoom;
   onPanZoom?: OnPanZoom;
   onPanZoomEnd?: OnPanZoom;
   onPaneContextMenu?: (event: MouseEvent) => void;
   translateExtent: CoordinateExtent;
-  panZoom: Writable<PanZoomInstance | null>;
   zoomOnScroll: boolean;
   zoomOnPinch: boolean;
   zoomOnDoubleClick: boolean;
@@ -38,18 +37,19 @@ type ZoomParams = {
   lib: string;
   paneClickDistance: number;
   onTransformChange: (transform: Transform) => void;
+  onDraggingChange: (dragging: boolean) => void;
 };
 
 export default function zoom(domNode: Element, params: ZoomParams) {
   const {
-    panZoom,
     minZoom,
     maxZoom,
     initialViewport,
     viewport,
-    dragging,
     translateExtent,
-    paneClickDistance
+    paneClickDistance,
+    setPanZoomInstance,
+    onDraggingChange
   } = params;
 
   const panZoomInstance = XYPanZoom({
@@ -59,11 +59,11 @@ export default function zoom(domNode: Element, params: ZoomParams) {
     translateExtent,
     viewport: initialViewport,
     paneClickDistance,
-    onDraggingChange: dragging.set
+    onDraggingChange
   });
   const currentViewport = panZoomInstance.getViewport();
   viewport.set(currentViewport);
-  panZoom.set(panZoomInstance);
+  setPanZoomInstance(panZoomInstance);
 
   panZoomInstance.update(params);