update!: graphnode and node typing

* graphnode is a node containing internal Vue Flow data
* move util files to util directory
* move flow actions type into store file
* rename panel type file to zoom
* rename types file to flow
* Rename Node to NodeWrapper
* Rename Edge to EdgeWrapper

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/composables/useHooks.ts

@@ -1,61 +1,44 @@
-import {
-  Connection,
-  Edge,
-  Elements,
-  EmitFunc,
-  FlowHooks,
-  FlowTransform,
-  Node,
-  OnConnectStartParams,
-  FlowInstance,
-  FlowEvents,
-  FlowStore,
-} from '~/types'
+import { EmitFunc, FlowHooks, FlowEvents, FlowStore } from '~/types'
 
 // flow event hooks
-export const createHooks = (): FlowHooks => {
-  return {
-    elementClick: createEventHook<{ event: MouseEvent; element: Node | Edge }>(),
-    elementsRemove: createEventHook<Elements>(),
-    nodeDoubleClick: createEventHook<{ event: MouseEvent; node: Node }>(),
-    nodeClick: createEventHook<{ event: MouseEvent; node: Node }>(),
-    nodeMouseEnter: createEventHook<{ event: MouseEvent; node: Node }>(),
-    nodeMouseMove: createEventHook<{ event: MouseEvent; node: Node }>(),
-    nodeMouseLeave: createEventHook<{ event: MouseEvent; node: Node }>(),
-    nodeContextMenu: createEventHook<{ event: MouseEvent; node: Node }>(),
-    nodeDragStart: createEventHook<{ event: MouseEvent; node: Node }>(),
-    nodeDrag: createEventHook<{ event: MouseEvent; node: Node }>(),
-    nodeDragStop: createEventHook<{ event: MouseEvent; node: Node }>(),
-    connect: createEventHook<Connection>(),
-    connectStart: createEventHook<{
-      event: MouseEvent
-      params: OnConnectStartParams
-    }>(),
-    connectStop: createEventHook<MouseEvent>(),
-    connectEnd: createEventHook<MouseEvent>(),
-    load: createEventHook<FlowInstance>(),
-    move: createEventHook<FlowTransform | undefined>(),
-    moveStart: createEventHook<FlowTransform | undefined>(),
-    moveEnd: createEventHook<FlowTransform | undefined>(),
-    selectionChange: createEventHook<Elements | null>(),
-    selectionDragStart: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
-    selectionDrag: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
-    selectionDragStop: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
-    selectionContextMenu: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
-    paneScroll: createEventHook<WheelEvent | undefined>(),
-    paneClick: createEventHook<MouseEvent>(),
-    paneContextMenu: createEventHook<MouseEvent>(),
-    edgeUpdate: createEventHook<{ edge: Edge; connection: Connection }>(),
-    edgeContextMenu: createEventHook<{ event: MouseEvent; edge: Edge }>(),
-    edgeMouseEnter: createEventHook<{ event: MouseEvent; edge: Edge }>(),
-    edgeMouseMove: createEventHook<{ event: MouseEvent; edge: Edge }>(),
-    edgeMouseLeave: createEventHook<{ event: MouseEvent; edge: Edge }>(),
-    edgeDoubleClick: createEventHook<{ event: MouseEvent; edge: Edge }>(),
-    edgeClick: createEventHook<{ event: MouseEvent; edge: Edge }>(),
-    edgeUpdateStart: createEventHook<{ event: MouseEvent; edge: Edge }>(),
-    edgeUpdateEnd: createEventHook<MouseEvent>(),
-  }
-}
+export const createHooks = (): FlowHooks => ({
+  elementClick: createEventHook(),
+  elementsRemove: createEventHook(),
+  nodeDoubleClick: createEventHook(),
+  nodeClick: createEventHook(),
+  nodeMouseEnter: createEventHook(),
+  nodeMouseMove: createEventHook(),
+  nodeMouseLeave: createEventHook(),
+  nodeContextMenu: createEventHook(),
+  nodeDragStart: createEventHook(),
+  nodeDrag: createEventHook(),
+  nodeDragStop: createEventHook(),
+  connect: createEventHook(),
+  connectStart: createEventHook(),
+  connectStop: createEventHook(),
+  connectEnd: createEventHook(),
+  load: createEventHook(),
+  move: createEventHook(),
+  moveStart: createEventHook(),
+  moveEnd: createEventHook(),
+  selectionChange: createEventHook(),
+  selectionDragStart: createEventHook(),
+  selectionDrag: createEventHook(),
+  selectionDragStop: createEventHook(),
+  selectionContextMenu: createEventHook(),
+  paneScroll: createEventHook(),
+  paneClick: createEventHook(),
+  paneContextMenu: createEventHook(),
+  edgeUpdate: createEventHook(),
+  edgeContextMenu: createEventHook(),
+  edgeMouseEnter: createEventHook(),
+  edgeMouseMove: createEventHook(),
+  edgeMouseLeave: createEventHook(),
+  edgeDoubleClick: createEventHook(),
+  edgeClick: createEventHook(),
+  edgeUpdateStart: createEventHook(),
+  edgeUpdateEnd: createEventHook(),
+})
 
 const bind = (emit: EmitFunc, hooks: FlowHooks) => {
   for (const [key, value] of Object.entries(hooks)) {

src/composables/useStore.ts

@@ -1,7 +1,7 @@
-import { FlowExportObject, FlowOptions } from '~/types'
-import { useStateStore, initialState } from '~/store'
+import { FlowExportObject, FlowOptions, FlowState } from '~/types'
+import { useStateStore } from '~/store'
 import { Store } from '~/context'
-import { onLoadToObject } from '~/utils'
+import { onLoadToObject, initialState } from '~/utils'
 
 let id = 0
 export default (options?: Partial<FlowOptions>, key?: string) => {
@@ -15,10 +15,10 @@ export default (options?: Partial<FlowOptions>, key?: string) => {
     const storageKey = key ?? `vue-flow-${id++}`
     const preloadedState = {
       ...initial,
-      ...options,
+      ...(options as FlowState),
     }
     if (withStorage) {
-      storedState = useStorage(storageKey, {} as FlowExportObject)
+      storedState = useStorage<FlowExportObject>(storageKey, { elements: [], position: [0, 0], zoom: 0 })
       if (storedState.value) {
         preloadedState.elements = storedState.value.elements ?? options?.elements ?? []
         if (storedState.value.position && storedState.value.zoom)

src/composables/useZoomPanHelper.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { zoomIdentity } from 'd3-zoom'
 import useStore from './useStore'
 import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils'