update!: Remove update node internals composable

* It's practically useless as vue doesn't need the trigger to catch a re-render
* Remove unused types

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

examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue

@@ -69,15 +69,12 @@ const onLoad = (instance: FlowInstance) => {
   instance.fitView()
   flowInstance.value = instance
 }
-
-const updateNodeInternals = () => flowInstance.value?.updateNodeInternals('1')
 </script>
 <template>
   <VueFlow :elements="elements" :node-types="nodeTypes" @connect="onConnect" @pane-click="onPaneClick" @load="onLoad">
     <div :style="buttonWrapperStyles">
       <button @click="toggleHandleCount">toggle handle count</button>
       <button @click="toggleHandlePosition">toggle handle position</button>
-      <button @click="updateNodeInternals">update node internals</button>
     </div>
   </VueFlow>
 </template>

src/composables/index.ts

@@ -2,7 +2,6 @@ export { default as useHandle } from './useHandle'
 export { default as useHooks } from './useHooks'
 export * from './useHooks'
 export { default as useKeyPress } from './useKeyPress'
-export { default as useUpdateNodeInternals } from './useUpdateNodeInternals'
 export { default as useZoomPanHelper } from './useZoomPanHelper'
 export { default as useStore } from './useStore'
 export { default as useWindow } from './useWindow'

src/composables/useUpdateNodeInternals.ts

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

src/container/ZoomPane/ZoomPane.vue

@@ -3,7 +3,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, useUpdateNodeInternals, useZoomPanHelper } from '~/composables'
+import { useHooks, useKeyPress, useStore, useZoomPanHelper } from '~/composables'
 import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils'
 
 interface ZoomPaneProps {
@@ -202,7 +202,6 @@ watchOnce(
       zoomOut,
       zoomTo,
       setTransform,
-      updateNodeInternals: useUpdateNodeInternals(store),
       project: onLoadProject(store),
       getElements: onLoadGetElements(store),
       toObject: onLoadToObject(store),

src/index.ts

@@ -18,7 +18,6 @@ export {
   graphPosToZoomedPos,
 } 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/composables.ts

@@ -1,28 +0,0 @@
-import { Ref } from 'vue'
-import { ElementId, FlowTransform } from './types'
-import { D3Zoom, D3Selection, PanOnScrollMode, KeyCode } from './panel'
-import { Connection } from './connection'
-
-export type UpdateNodeInternals = (nodeId: ElementId) => void
-
-export interface UseZoomOptions {
-  selectionKeyCode?: KeyCode
-  zoomActivationKeyCode?: KeyCode
-  paneMoveable?: boolean
-  defaultZoom?: number
-  defaultPosition?: [number, number]
-  zoomOnScroll?: boolean
-  zoomOnPinch?: boolean
-  panOnScroll?: boolean
-  panOnScrollSpeed?: number
-  panOnScrollMode?: PanOnScrollMode
-  zoomOnDoubleClick?: boolean
-}
-
-export interface UseZoom {
-  transform: Ref<FlowTransform>
-  d3Zoom: Ref<D3Zoom>
-  d3Selection: Ref<D3Selection>
-}
-
-export type ValidConnectionFunc = (connection: Connection) => boolean

src/types/edge.ts

@@ -1,6 +1,5 @@
 import { DefineComponent } from 'vue'
 import { ArrowHeadType, ElementId, Position } from './types'
-import { Connection } from './connection'
 
 export interface Edge<T = any> {
   id: ElementId
@@ -65,8 +64,6 @@ export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
 
 export type EdgeType = DefineComponent<EdgeSmoothStepProps, any, any, any, any, any> | boolean
 
-export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void
-
 export interface EdgePositions {
   sourceX: number
   sourceY: number

src/types/handle.ts

@@ -1,4 +1,5 @@
 import { Dimensions, ElementId, Position, XYPosition } from './types'
+import { Connection } from '~/types/connection'
 
 export type HandleType = 'source' | 'target'
 
@@ -6,3 +7,5 @@ export interface HandleElement extends XYPosition, Dimensions {
   id?: ElementId | null
   position: Position
 }
+
+export type ValidConnectionFunc = (connection: Connection) => boolean

src/types/index.ts

@@ -7,4 +7,3 @@ export * from './node'
 export * from './panel'
 export * from './store'
 export * from './hooks'
-export * from './composables'

src/types/types.ts

@@ -86,11 +86,8 @@ export type FlowInstance<T = any> = {
   getElements: () => Elements<T>
   setTransform: (transform: FlowTransform) => void
   toObject: ToObjectFunc<T>
-  updateNodeInternals: (id: ElementId) => void
 }
 
-export type OnLoadFunc<T = any> = (params: FlowInstance<T>) => void
-
 export interface FlowOptions extends Omit<HTMLAttributes, 'onLoad'> {
   elements: Elements
   nodeTypes?: Record<string, NodeType> | string[]