update: Flow instance provides update node internals func

* Rename onLoadParams to FlowInstance
* Pass update node internals to instance

src/composables/useHooks.ts

@@ -1,4 +1,4 @@
-import { Connection, Edge, Elements, EmitFunc, FlowHooks, FlowTransform, Node, OnConnectStartParams, OnLoadParams } from '~/types'
+import { Connection, Edge, Elements, EmitFunc, FlowHooks, FlowTransform, Node, OnConnectStartParams, FlowInstance } from '~/types'
 import { Hooks } from '~/context'
 
 // flow event hooks
@@ -22,7 +22,7 @@ const hooks = (): FlowHooks => {
     }>(),
     connectStop: createEventHook<MouseEvent>(),
     connectEnd: createEventHook<MouseEvent>(),
-    load: createEventHook<OnLoadParams>(),
+    load: createEventHook<FlowInstance>(),
     move: createEventHook<FlowTransform | undefined>(),
     moveStart: createEventHook<FlowTransform | undefined>(),
     moveEnd: createEventHook<FlowTransform | undefined>(),

src/composables/useUpdateNodeInternals.ts

@@ -1,14 +1,10 @@
-import { ElementId, UpdateNodeInternals } from '~/types'
-import useStore from '~/composables/useStore'
+import { ElementId, FlowStore, UpdateNodeInternals } from '~/types'
 
-export default (): UpdateNodeInternals => {
-  const store = useStore()
-
-  return (id: ElementId) => {
+export default (store: FlowStore): UpdateNodeInternals =>
+  (id: ElementId) => {
     const nodeElement: HTMLDivElement | null = document.querySelector(`.vue-flow__node[data-id="${id}"]`)
 
     if (nodeElement) {
-      store.updateNodeDimensions([{ id, nodeElement, forceUpdate: true }])
+      store.updateNodeDimensions({ id, nodeElement, forceUpdate: true })
     }
   }
-}

src/container/ZoomPane/ZoomPane.vue

@@ -4,7 +4,7 @@ import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { get } from '@vueuse/core'
 import { pointer, select } from 'd3-selection'
 import { FlowTransform, KeyCode, PanOnScrollMode } from '~/types'
-import { useHooks, useKeyPress, useStore, useZoomPanHelper } from '~/composables'
+import { useHooks, useKeyPress, useStore, useUpdateNodeInternals, useZoomPanHelper } from '~/composables'
 import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils/graph'
 
 interface ZoomPaneProps {
@@ -208,6 +208,7 @@ onMounted(() => {
         zoomOut,
         zoomTo,
         setTransform,
+        updateNodeInternals: useUpdateNodeInternals(store),
         project: onLoadProject(store),
         getElements: onLoadGetElements(store),
         toObject: onLoadToObject(store),

src/index.ts

@@ -17,7 +17,6 @@ export {
   isInputDOMNode,
 } from './utils/graph'
 export { default as useZoomPanHelper } from './composables/useZoomPanHelper'
-export { default as useUpdateNodeInternals } from './composables/useUpdateNodeInternals'
 export { default as useStore } from './composables/useStore'
 export { default as useHooks } from './composables/useHooks'
 export { default as useHandle } from './composables/useHandle'

src/types/hooks.ts

@@ -1,5 +1,5 @@
 import { EventHook } from '@vueuse/core'
-import { Connection, Edge, Elements, FlowTransform, Node, OnConnectStartParams, OnLoadParams } from '../types'
+import { Connection, Edge, Elements, FlowTransform, Node, OnConnectStartParams, FlowInstance } from '../types'
 
 export type FlowHook<T = any> = EventHook<T>
 
@@ -22,7 +22,7 @@ export interface FlowEvents {
   }
   connectStop: MouseEvent
   connectEnd: MouseEvent
-  load: OnLoadParams
+  load: FlowInstance
   move: FlowTransform | undefined
   moveStart: FlowTransform | undefined
   moveEnd: FlowTransform | undefined

src/types/types.ts

@@ -77,7 +77,7 @@ export type FitViewFunc = (fitViewOptions?: FitViewParams) => void
 export type ProjectFunc = (position: XYPosition) => XYPosition
 export type ToObjectFunc<T = any> = () => FlowExportObject<T>
 
-export type OnLoadParams<T = any> = {
+export type FlowInstance<T = any> = {
   zoomIn: () => void
   zoomOut: () => void
   zoomTo: (zoomLevel: number) => void
@@ -86,9 +86,10 @@ export type OnLoadParams<T = any> = {
   getElements: () => Elements<T>
   setTransform: (transform: FlowTransform) => void
   toObject: ToObjectFunc<T>
+  updateNodeInternals: (id: ElementId) => void
 }
 
-export type OnLoadFunc<T = any> = (params: OnLoadParams<T>) => void
+export type OnLoadFunc<T = any> = (params: FlowInstance<T>) => void
 
 export interface FlowOptions extends Omit<HTMLAttributes, 'onLoad'> {
   elements: Elements