fix: zoom pan helper

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -5,7 +5,7 @@ import MarkerDefinitions from './MarkerDefinitions.vue'
 import Edge from '~/components/Edges/Edge.vue'
 import ConnectionLine from '~/components/ConnectionLine/ConnectionLine.vue'
 import { ConnectionLineType, ConnectionMode, CustomConnectionLine, Dimensions, EdgeType, Transform } from '~/types'
-import { Store } from '~/context/symbols'
+import { Store } from '~/context'
 
 interface EdgeRendererProps {
   edgeTypes: Record<string, EdgeType>

src/container/Flow/Flow.vue

@@ -24,8 +24,8 @@ import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
 import { createEdgeTypes } from '~/container/EdgeRenderer/utils'
 import { createNodeTypes } from '~/container/NodeRenderer/utils'
-import { useHooks } from '~/hooks/RevueFlowHooks'
-import { Hooks, Store } from '~/context/symbols'
+import { useHooks } from '~/composables'
+import { Hooks, Store } from '~/context'
 
 export interface FlowProps {
   elements: Elements

src/container/NodeRenderer/NodeRenderer.vue

@@ -2,7 +2,7 @@
 import Node from '~/components/Nodes/Node.vue'
 import { NodeType, Node as TNode, Transform, Dimensions } from '~/types'
 import { getNodesInside } from '~/utils/graph'
-import { Store } from '~/context/symbols'
+import { Store } from '~/context'
 
 interface NodeRendererProps {
   nodeTypes: Record<string, NodeType>

src/container/SelectionPane/SelectionPane.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import useKeyPress from '~/hooks/useKeyPress'
+import useKeyPress from '~/composables/useKeyPress'
 import { KeyCode } from '~/types'
-import useGlobalKeyHandler from '~/hooks/useGlobalKeyHandler'
+import useGlobalKeyHandler from '~/composables/useGlobalKeyHandler'
 import NodesSelection from '~/components/NodesSelection/NodesSelection.vue'
 import UserSelection from '~/components/UserSelection/UserSelection.vue'
-import { Hooks, Store } from '~/context/symbols'
+import { Hooks, Store } from '~/context'
 
 interface SelectionPaneProps {
   selectionKeyCode?: KeyCode

src/container/ZoomPane/ZoomPane.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import { KeyCode, PanOnScrollMode } from '~/types'
-import useZoom from '~/composables/useZoom'
-import useResizeHandler from '~/hooks/useResizeHandler'
-import useZoomPanHelper from '~/hooks/useZoomPanHelper'
-import { Store } from '~/context/symbols'
+import { useZoom, useResizeHandler, useZoomPanHelper } from '~/composables'
+import { Hooks, Store } from '~/context'
+import { onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils/graph'
 
 interface ZoomPaneProps {
   selectionKeyCode?: KeyCode
@@ -33,25 +32,25 @@ const props = withDefaults(defineProps<ZoomPaneProps>(), {
   paneMoveable: true,
 })
 const store = inject(Store)!
-const zoomPaneEl = templateRef<HTMLDivElement>('zoom-pane', null)
-const { transform, d3Selection, d3Zoom } = useZoom(zoomPaneEl, props, (initD3ZoomPayload) => store.initD3Zoom(initD3ZoomPayload))
+const hooks = inject(Hooks)!
 
+const zoomPaneEl = templateRef<HTMLDivElement>('zoom-pane', null)
+const { transform } = useZoom(zoomPaneEl, props)
 watch(transform, (val) => (store.transform = val), { flush: 'post' })
 const dimensions = useResizeHandler(zoomPaneEl)
 watch(dimensions, (val) => (store.dimensions = val), { flush: 'post' })
 
-const getZoomPanHelper = reactify(useZoomPanHelper)
-const zoomPanHelper = getZoomPanHelper(
-  d3Zoom,
-  d3Selection,
-  store.nodes,
-  transform,
-  dimensions,
-  store.minZoom,
-  store.maxZoom,
-  store.snapToGrid,
-  store.snapGrid,
-)
+const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
+hooks.load.trigger({
+  fitView: (params = { padding: 0.1 }) => fitView(params),
+  zoomIn,
+  zoomOut,
+  zoomTo,
+  setTransform,
+  project: onLoadProject(store),
+  getElements: onLoadGetElements(store),
+  toObject: onLoadToObject(store),
+})
 </script>
 <template>
   <div ref="zoom-pane" class="revue-flow__renderer revue-flow__zoompane">