fix: typings

examples/Basic/Basic.vue

@@ -23,11 +23,10 @@ const elements = ref<Elements>([
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-] as Elements)
+])
 const rfInstance = ref<FlowInstance | null>(null)
-const onElementsRemove = (elementsToRemove: Elements) =>
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
+const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
-const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value as Elements))
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView({ padding: 0.1 })
   rfInstance.value = flowInstance

examples/CustomConnectionLine/CustomConnectionLine.vue

@@ -9,10 +9,9 @@ const elements = ref<Elements>([
     data: { label: 'Node 1' },
     position: { x: 250, y: 5 },
   },
-] as Elements)
+])
-const onElementsRemove = (elementsToRemove: Elements) =>
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements))
 </script>
 <template>
   <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">

examples/CustomNode/CustomNode.vue

@@ -94,11 +94,10 @@ onMounted(() => {
     { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
     { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
     { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } },
-  ] as Elements
+  ]
 })
 
-const onElementsRemove = (elementsToRemove: Elements) =>
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
 
 const onConnect = (params: Connection | Edge) =>
   (elements.value = addEdge(
@@ -107,7 +106,7 @@ const onConnect = (params: Connection | Edge) =>
       animated: true,
       style: { stroke: '#fff' },
     } as Edge,
-    elements.value as Elements,
+    elements.value,
   ))
 </script>
 <template>

examples/DragNDrop/DnD.vue

@@ -11,7 +11,7 @@ const elements = ref<Elements>([
     data: { label: 'input node' },
     position: { x: 250, y: 5 },
   },
-] as Elements)
+])
 
 let id = 0
 const getId = (): ElementId => `dndnode_${id++}`
@@ -23,9 +23,8 @@ const onDragOver = (event: DragEvent) => {
   }
 }
 
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
-const onElementsRemove = (elementsToRemove: Elements) =>
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
 const onLoad = (instance: FlowInstance) => (flowInstance.value = instance)
 
 const onDrop = (event: DragEvent) => {

examples/EdgeTypes/utils.ts

@@ -102,5 +102,5 @@ export function getElements(): Elements {
     }
   }
 
-  return initialElements as Elements
+  return initialElements
 }

examples/EdgeWithButton/EdgeWithButton.vue

@@ -30,13 +30,12 @@ const elements = ref<Elements>([
     target: 'ewb-2',
     type: 'buttonedge',
   },
-] as Elements)
+])
 
 const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
-const onElementsRemove = (elementsToRemove: Elements) =>
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
 const onConnect = (params: Connection | Edge) =>
-  (elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value as Elements))
+  (elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value))
 </script>
 <template>
   <Flow

examples/Edges/EdgesExample.vue

@@ -16,7 +16,7 @@ import Flow, {
   ArrowHeadType,
 } from '~/index'
 
-const initialElements = [
+const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
   { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
@@ -79,7 +79,7 @@ const edgeTypes: Record<string, any> = {
   custom2: CustomEdge2,
 }
 
-const elements = ref<Elements>(initialElements as Elements)
+const elements = ref<Elements>(initialElements)
 
 const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
 const onNodeDragStop = (node: Node) => console.log('drag stop', node)

examples/Empty/EmptyExample.vue

@@ -38,7 +38,6 @@ const addRandomNode = () => {
 <template>
   <Flow
     :elements="elements"
-    :only-render-visible-elements="false"
     @load="onLoad"
     @element-click="onElementClick"
     @elements-remove="onElementsRemove"

examples/Hidden/HiddenExample.vue

@@ -9,7 +9,7 @@ const initialElements: Elements = [
   { id: 'e1-2', source: '1', target: '2' },
   { id: 'e1-3', source: '1', target: '3' },
   { id: 'e3-4', source: '3', target: '4' },
-] as Elements
+]
 
 const elements = ref<Elements>(initialElements)
 const isHidden = ref<boolean>(false)

examples/Interaction/InteractionExample.vue

@@ -19,7 +19,7 @@ const initialElements: Elements = [
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-] as Elements
+]
 
 const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node)
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)

examples/Layouting/initial-elements.ts

@@ -66,6 +66,6 @@ const elements: Elements = [
   { id: 'e45', source: '4', target: '5', type: 'smoothstep', animated: true },
   { id: 'e56', source: '5', target: '6', type: 'smoothstep', animated: true },
   { id: 'e57', source: '5', target: '7', type: 'smoothstep', animated: true },
-] as Elements
+]
 
 export default elements

examples/MultiFlows/Flow.vue

@@ -7,7 +7,7 @@ const initialElements: Elements = [
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-] as Elements
+]
 
 const elements = ref<Elements>(initialElements)
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))

examples/NodeTypeChange/NodeTypeChangeExample.vue

@@ -19,7 +19,7 @@ const initialElements: Elements = [
     position: { x: 250, y: 0 },
   },
   { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
-] as Elements
+]
 
 const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 }
 

examples/NodeTypesIdChange/NodeA.vue

@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-const props = defineProps<{ nodeStyles: Record<string, any> }>()
+import { NodeProps } from '~/index'
+
+interface NodeAProps extends NodeProps {
+  nodeStyles: Record<string, any>
+}
+const props = defineProps<NodeAProps>()
 </script>
 <template>
   <div :style="props.nodeStyles">A</div>

examples/NodeTypesIdChange/NodeB.vue

@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-const props = defineProps<{ nodeStyles: Record<string, any> }>()
+import { NodeProps } from '~/index'
+
+interface NodeBPro extends NodeProps {
+  nodeStyles: Record<string, any>
+}
+const props = defineProps<NodeBPro>()
 </script>
 <template>
   <div :style="props.nodeStyles">B</div>

examples/Overview/Overview.vue

@@ -112,7 +112,7 @@ const initialElements: Elements = [
     animated: true,
     labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
   },
-] as Elements
+]
 
 const connectionLineStyle: CSSProperties = { stroke: '#ddd' }
 const snapGrid: SnapGrid = [16, 16]

examples/Provider/ProviderExample.vue

@@ -25,7 +25,7 @@ const initialElements: Elements = [
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-] as Elements
+]
 
 useStore()
 const elements = ref<Elements>(initialElements)

examples/SaveRestore/SaveRestoreExample.vue

@@ -8,7 +8,7 @@ const initialElements: Elements = [
   { id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
   { id: 'e1-2', source: '1', target: '2' },
-] as Elements
+]
 
 const elements = ref(initialElements)
 const flowInstance = ref()

examples/Stress/utils.ts

@@ -26,5 +26,5 @@ export function getElements(xElements = 10, yElements = 10): Elements {
     }
   }
 
-  return initialElements as Elements
+  return initialElements
 }

examples/Switch/SwitchExample.vue

@@ -11,7 +11,7 @@ const elementsA: Elements = [
   { id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
   { id: 'e1-2', source: '1a', target: '2a' },
   { id: 'e1-3', source: '1a', target: '3a' },
-] as Elements
+]
 
 const elementsB: Elements = [
   { id: 'inputb', type: 'input', data: { label: 'Input' }, position: { x: 300, y: 5 }, className: 'light' },
@@ -24,7 +24,7 @@ const elementsB: Elements = [
   { id: 'e2b', source: 'inputb', target: '2b' },
   { id: 'e3b', source: 'inputb', target: '3b' },
   { id: 'e4b', source: 'inputb', target: '4b' },
-] as Elements
+]
 
 const elements = ref(elementsA)
 

examples/Unidirectional/UnidirectionalExample.vue

@@ -169,10 +169,10 @@ const initialElements: Elements = [
     type: 'smoothstep',
     arrowHeadType: ArrowHeadType.Arrow,
   },
-] as Elements
+]
 
 const nodeTypes: Record<string, NodeType> = {
-  custom: CustomNode,
+  custom: CustomNode as NodeType,
 }
 
 let id = 4

examples/UpdatableEdge/UpdatableEdgeExample.vue

@@ -37,7 +37,7 @@ const initialElements: Elements = [
     style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
   },
   { id: 'e1-2', source: '1', target: '2', label: 'Updateable edge' },
-] as Elements
+]
 
 const elements = ref(initialElements)
 const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()

examples/UpdateNode/UpdateNodeExample.vue

@@ -7,7 +7,7 @@ const initialElements: Elements = [
   { id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
   { id: 'e1-2', source: '1', target: '2' },
-] as Elements
+]
 
 const elements = ref<Elements>(initialElements)
 const nodeName = ref<string>('Node 1')

examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue

@@ -24,7 +24,7 @@ const initialElements: Elements = [
     data: { label: 'Node 1', handleCount: initialHandleCount, handlePosition: 0 },
     position: { x: 250, y: 5 },
   },
-] as Elements
+]
 
 const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 10 }
 
@@ -68,13 +68,15 @@ const onLoad = (instance: FlowInstance) => {
   instance.fitView()
   flowInstance.value = instance
 }
+
+const updateNodeInternals = () => flowInstance.value?.updateNodeInternals('1')
 </script>
 <template>
   <Flow :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="() => flowInstance.updateNodeInternals('1')">update node internals</button>
+      <button @click="updateNodeInternals">update node internals</button>
     </div>
   </Flow>
 </template>

examples/Validation/ValidationExample.vue

@@ -21,7 +21,7 @@ const initialElements: Elements = [
   { id: 'A', type: 'customnode', position: { x: 250, y: 0 } },
   { id: 'B', type: 'customnode', position: { x: 250, y: 150 } },
   { id: 'C', type: 'customnode', position: { x: 250, y: 300 } },
-] as Elements
+]
 
 const onLoad = (reactFlowInstance: FlowInstance) => reactFlowInstance.fitView()
 const onConnectStart = ({ nodeId, handleType }: OnConnectStartParams) => console.log('on connect start', { nodeId, handleType })

examples/ZoomPanHelper/ZoomPanHelperExample.vue

@@ -19,7 +19,7 @@ const initialElements: Elements = [
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-] as Elements
+]
 
 let id = 5
 const getId = (): ElementId => `${id++}`

package.json

@@ -25,8 +25,8 @@
     "dist"
   ],
   "scripts": {
-    "dev": "vite",
+    "dev": "vue-tsc --noEmit && vite",
-    "build": "vite build",
+    "build": "vue-tsc --noEmit && vite build",
     "build:dist": "rollup -c --environment NODE_ENV:production",
     "serve": "vite preview",
     "prepublishOnly": "yarn build:dist",

src/additional-components/Background/Background.vue

@@ -40,15 +40,15 @@ const background = computed(() => {
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
 const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
 const bgColor = computed(() => (props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]))
+const d = computed(
+  () =>
+    `M${background.value.scaledGap / 2} 0 V${background.value.scaledGap} M0 ${background.value.scaledGap / 2} H${
+      background.value.scaledGap
+    }`,
+)
 </script>
 <template>
-  <svg
+  <svg class="vue-flow__background" style="width: 100%; height: 100%">
-    class="vue-flow__background"
-    :style="{
-      width: '100%',
-      height: '100%',
-    }"
-  >
     <pattern
       :id="patternId"
       :x="background.xOffset"
@@ -58,11 +58,7 @@ const bgColor = computed(() => (props.color ? props.color : defaultColors[props.
       patternUnits="userSpaceOnUse"
     >
       <template v-if="props.variant === BackgroundVariant.Lines">
-        <path
+        <path :stroke="bgColor" :stroke-width="props.size" :d="d" />
-          :stroke="bgColor"
-          :stroke-width="props.size"
-          :d="`M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`"
-        />
       </template>
       <template v-else>
         <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="bgColor" />

src/additional-components/MiniMap/MiniMap.vue

@@ -6,6 +6,7 @@ import { Node } from '~/types'
 import { useStore } from '~/composables'
 
 type StringFunc = (node: Node) => string
+type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
 
 export interface MiniMapProps extends HTMLAttributes {
   nodeColor?: string | StringFunc
@@ -34,13 +35,13 @@ const store = useStore()
 
 const elementWidth = attrs.style?.width ?? defaultWidth
 const elementHeight = attrs.style?.height ?? defaultHeight
-const nodeColorFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as StringFunc
+const nodeColorFunc: StringFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as string
-const nodeStrokeColorFunc =
+const nodeStrokeColorFunc: StringFunc =
-  props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as StringFunc
+  props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as string
 
 const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
 
-const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
+const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
 const viewBox = computed(() => {
   const bb = getRectOfNodes(store.nodes)

src/additional-components/MiniMap/MiniMapNode.vue

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<MiniMapNodeProps>(), {
 const attrs = useAttrs()
 
 const styles = (attrs.style ?? {}) as CSSProperties
-const fill = computed(() => props.color || styles.background || styles.backgroundColor)
+const fill = computed(() => props.color || (styles.background as string) || styles.backgroundColor)
 </script>
 <template>
   <rect

src/components/ConnectionLine/ConnectionLine.vue

@@ -19,12 +19,14 @@ const store = useStore()
 
 const sourceHandle =
   store.connectionHandleId && store.connectionHandleType
-    ? props.sourceNode.__rf.handleBounds[store.connectionHandleType].find((d: HandleElement) => d.id === store.connectionHandleId)
+    ? props.sourceNode.__rf?.handleBounds[store.connectionHandleType].find(
-    : store.connectionHandleType && props.sourceNode.__rf.handleBounds[store.connectionHandleType][0]
+        (d: HandleElement) => d.id === store.connectionHandleId,
-const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__rf.width as number) / 2
+      )
-const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__rf.height
+    : store.connectionHandleType && props.sourceNode.__rf?.handleBounds[store.connectionHandleType][0]
-const sourceX = props.sourceNode.__rf.position.x + sourceHandleX
+const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__rf?.width as number) / 2
-const sourceY = props.sourceNode.__rf.position.y + sourceHandleY
+const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__rf?.height
+const sourceX = props.sourceNode.__rf?.position?.x + sourceHandleX
+const sourceY = props.sourceNode.__rf?.position?.y + sourceHandleY
 
 const isRightOrLeft = sourceHandle.position === Position.Left || sourceHandle.position === Position.Right
 const targetPosition = isRightOrLeft ? Position.Left : Position.Top

src/components/Edges/BezierEdge.vue

@@ -19,7 +19,7 @@ interface BezierEdgeProps<T = any> {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
   labelStyle?: any

src/components/Edges/Edge.vue

@@ -93,12 +93,12 @@ const nodes = computed(() => {
 // when connection type is loose we can define all handles as sources
 const targetNodeHandles = computed(() =>
   store.connectionMode === ConnectionMode.Strict
-    ? nodes.value.targetNode?.__rf.handleBounds.target
+    ? nodes.value.targetNode?.__rf?.handleBounds.target
-    : nodes.value.targetNode?.__rf.handleBounds.target ?? nodes.value.targetNode?.__rf.handleBounds.source,
+    : nodes.value.targetNode?.__rf?.handleBounds.target ?? nodes.value.targetNode?.__rf?.handleBounds.source,
 )
 
 const sourceHandle = computed(
-  () => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null),
+  () => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle || null),
 )
 const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null))
 const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
@@ -126,7 +126,7 @@ const edgePos = computed(() =>
         selected: isSelected,
         animated: props.edge.animated,
         inactive: !store.elementsSelectable,
-        updating: updating.value,
+        updating,
       },
     ]"
     @click="onEdgeClick"

src/components/Edges/EdgeAnchor.vue

@@ -24,14 +24,10 @@ interface EdgeAnchorProps extends HTMLAttributes {
 const props = withDefaults(defineProps<EdgeAnchorProps>(), {
   radius: 10,
 })
+
+const cx = computed(() => shiftX(props.centerX, props.radius, props.position))
+const cy = computed(() => shiftY(props.centerY, props.radius, props.position))
 </script>
 <template>
-  <circle
+  <circle class="vue-flow__edgeupdater" :cx="cx" :cy="cy" :r="props.radius" stroke="transparent" fill="transparent" />
-    class="vue-flow__edgeupdater"
-    :cx="shiftX(props.centerX, props.radius, props.position)"
-    :cy="shiftY(props.centerY, props.radius, props.position)"
-    :r="props.radius"
-    stroke="transparent"
-    fill="transparent"
-  />
 </template>

src/components/Edges/EdgeText.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { HTMLAttributes, VNode } from 'vue'
+import { CSSProperties, HTMLAttributes } from 'vue'
 
 interface EdgeTextProps extends HTMLAttributes {
   x: number
@@ -7,10 +7,11 @@ interface EdgeTextProps extends HTMLAttributes {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
-  labelStyle?: any
+    | any
+  labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: any
   labelBgPadding?: [number, number]
@@ -26,17 +27,18 @@ const props = withDefaults(defineProps<EdgeTextProps>(), {
 })
 
 const edgeRef = templateRef<SVGTextElement>('edge-text', null)
-// @ts-ignore
+const { width, height, x, y } = useElementBounding(edgeRef)
-const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
+const transform = computed(() => `translate(${props.x - width.value / 2} ${props.y - height.value / 2})`)
+const bgPadding = computed(() => [props.labelBgPadding[0], props.labelBgPadding[1]])
 </script>
 <template>
-  <g :transform="`translate(${props.x - width / 2} ${props.y - height / 2})`" class="vue-flow__edge-textwrapper">
+  <g :transform="transform" class="vue-flow__edge-textwrapper">
     <rect
       v-if="props.labelShowBg"
-      :width="width + 2 * props.labelBgPadding[0] + 'px'"
+      :width="width + 2 * bgPadding[0] + 'px'"
-      :height="height + 2 * props.labelBgPadding[1] + 'px'"
+      :height="height + 2 * bgPadding[1] + 'px'"
-      :x="-props.labelBgPadding[0]"
+      :x="-bgPadding[0]"
-      :y="-props.labelBgPadding[1]"
+      :y="-bgPadding[1]"
       class="vue-flow__edge-textbg"
       :style="props.labelBgStyle"
       :rx="props.labelBgBorderRadius"
@@ -46,7 +48,7 @@ const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
       <component
         :is="props.label.component"
         v-if="typeof props.label.component !== 'undefined'"
-        v-bind="{ ...props, ...props.label.props, width, height, x, y }"
+        v-bind="{ ...props, ...props.label?.props, width, height, x, y }"
       />
       <template v-else v-html="props.label">
         {{ props.label }}

src/components/Edges/SmoothStepEdge.vue

@@ -19,7 +19,7 @@ export interface EdgeSmoothStepProps<T = any> {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
   labelStyle?: any

src/components/Edges/StepEdge.vue

@@ -18,7 +18,7 @@ export interface EdgeStepProps<T = any> {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
   labelStyle?: any

src/components/Edges/StraightEdge.vue

@@ -19,7 +19,7 @@ interface StraightEdgeProps<T = any> {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
   labelStyle?: any

src/components/Nodes/Node.vue

@@ -28,13 +28,13 @@ const draggable = computed(() => props.node.draggable ?? store.nodesDraggable)
 const connectable = computed(() => props.node.connectable ?? store.nodesConnectable)
 
 const onMouseEnterHandler = () =>
-  props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
+  props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
 
 const onMouseMoveHandler = () =>
-  props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: props.node }))
+  props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: props.node }))
 
 const onMouseLeaveHandler = () =>
-  props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node }))
+  props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node }))
 
 const onContextMenuHandler = () => (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node })
 
@@ -84,7 +84,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
   const n = props.node
   // onDragStop also gets called when user just clicks on a node.
   // Because of that we set dragging to true inside the onDrag handler and handle the click here
-  if (!props.node.__rf.isDragging) {
+  if (!props.node.__rf?.isDragging) {
     if (selectable && !props.selectNodesOnDrag && !props.selected) {
       store.addSelectedElements([n])
     }
@@ -165,9 +165,9 @@ watch(
       ]"
       :style="{
         zIndex: props.selected ? 10 : 3,
-        transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
+        transform: `translate(${props.node.__rf?.position?.x}px,${props.node.__rf?.position?.y}px)`,
         pointerEvents: selectable || draggable ? 'all' : 'none',
-        opacity: props.node.__rf.width !== null && props.node.__rf.height !== null ? 1 : 0,
+        opacity: props.node.__rf?.width !== null && props.node.__rf?.height !== null ? 1 : 0,
         ...props.node.style,
       }"
       :data-id="props.node.id"
@@ -182,13 +182,13 @@ watch(
           id: props.node.id,
           data: props.node.data,
           type: props.node.type,
-          xPos: props.node.__rf.position.x,
+          xPos: props.node.__rf?.position?.x,
-          yPos: props.node.__rf.position.y,
+          yPos: props.node.__rf?.position?.y,
           selected: props.selected,
           connectable,
           sourcePosition: props.node.sourcePosition,
           targetPosition: props.node.targetPosition,
-          dragging: props.node.__rf.isDragging,
+          dragging: props.node.__rf?.isDragging,
         }"
       >
         <component
@@ -197,13 +197,13 @@ watch(
             id: props.node.id,
             data: props.node.data,
             type: props.node.type,
-            xPos: props.node.__rf.position.x,
+            xPos: props.node.__rf?.position?.x,
-            yPos: props.node.__rf.position.y,
+            yPos: props.node.__rf?.position?.y,
             selected: props.selected,
             connectable,
             sourcePosition: props.node.sourcePosition,
             targetPosition: props.node.targetPosition,
-            dragging: props.node.__rf.isDragging,
+            dragging: props.node.__rf?.isDragging,
           }"
         />
       </slot>

src/components/NodesSelection/NodesSelection.vue

@@ -13,7 +13,7 @@ const selectedNodes = store.selectedElements
 
       return {
         ...matchingNode,
-        position: matchingNode?.__rf.position,
+        position: matchingNode?.__rf?.position,
       } as Node
     })
   : []

src/composables/useUpdateNodeInternals.ts

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

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -48,7 +48,7 @@ const edges = computed(() => store.edges.filter((edge) => !edge.isHidden))
         </Edge>
       </template>
       <ConnectionLine
-        v-if="connectionLineVisible"
+        v-if="connectionLineVisible && sourceNode"
         :source-node="sourceNode"
         :connection-line-style="props.connectionLineStyle"
         :connection-line-type="props.connectionLineType"

src/container/EdgeRenderer/utils.ts

@@ -26,10 +26,10 @@ export function createEdgeTypes(edgeTypes: Record<string, EdgeType>): Record<str
 }
 
 export function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
-  const x = (handle?.x || 0) + node.__rf.position.x
+  const x = (handle?.x || 0) + node.__rf?.position?.x
-  const y = (handle?.y || 0) + node.__rf.position.y
+  const y = (handle?.y || 0) + node.__rf?.position?.y
-  const width = handle?.width || node.__rf.width
+  const width = handle?.width || node.__rf?.width
-  const height = handle?.height || node.__rf.height
+  const height = handle?.height || node.__rf?.height
 
   switch (position) {
     case Position.Top:

src/index.ts

@@ -15,8 +15,10 @@ export {
   getTransformForBounds,
   getRectOfNodes,
   isInputDOMNode,
+  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/store/useFlowStore.ts

@@ -35,6 +35,7 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
                 ...storeNode,
                 ...propElement,
               }
+              if (!updatedNode.__rf) updatedNode.__rf = {}
 
               if (storeNode.position.x !== propElement.position.x || storeNode.position.y !== propElement.position.y) {
                 updatedNode.__rf.position = propElement.position
@@ -43,7 +44,7 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
               if (typeof propElement.type !== 'undefined' && propElement.type !== storeNode.type) {
                 // we reset the elements dimensions here in order to force a re-calculation of the bounds.
                 // When the type of a node changes it is possible that the number or positions of handles changes too.
-                updatedNode.__rf.width = null
+                updatedNode.__rf.width = undefined
               }
 
               res.nextNodes.push(updatedNode)
@@ -73,6 +74,8 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
         const i = this.nodes.map((x) => x.id).indexOf(id)
         const node = this.nodes[i]
         const dimensions = getDimensions(nodeElement)
+
+        if (!node.__rf) node.__rf = {}
         const doUpdate =
           dimensions.width &&
           dimensions.height &&
@@ -123,8 +126,8 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
 
           if (diff) {
             updatedNode.__rf.position = {
-              x: node.__rf.position.x + diff.x,
+              x: (node.__rf?.position?.x as number) + diff.x,
-              y: node.__rf.position.y + diff.y,
+              y: (node.__rf?.position?.y as number) + diff.y,
             }
           }
 
@@ -135,7 +138,7 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
         }
 
         if (!id) {
-          const selectedNodes = this.nodes.filter((x) => this.selectedElements?.find((sNode) => sNode.id === x.id))
+          const selectedNodes = this.nodes.filter((x) => this.selectedElements?.find((sNode) => sNode?.id === x.id))
           selectedNodes.forEach((node) => {
             const i = this.nodes.map((x) => x.id).indexOf((node as Node).id)
             update(node as Node, i)
@@ -178,7 +181,7 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
         this.selectedElements = nextSelectedElements
       },
       unsetUserSelection() {
-        const selectedNodes = this.selectedElements?.filter((node) => isNode(node) && node.__rf) as Node[]
+        const selectedNodes = this.selectedElements?.filter((node) => node && isNode(node) && node.__rf) as Node[]
 
         this.selectionActive = false
         this.userSelectionRect.draw = false
@@ -220,7 +223,7 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
             ...node,
             __rf: {
               ...node.__rf,
-              position: clampPosition(node.__rf.position, nodeExtent),
+              position: node.__rf?.position && clampPosition(node.__rf.position, nodeExtent),
             },
           }
         })

src/types/edge.ts

@@ -9,7 +9,12 @@ export interface Edge<T = any> {
   target: ElementId
   sourceHandle?: ElementId | null
   targetHandle?: ElementId | null
-  label?: string | VNode
+  label?:
+    | string
+    | {
+        component: any
+        props?: any
+      }
   labelStyle?: any
   labelShowBg?: boolean
   labelBgStyle?: any
@@ -20,7 +25,7 @@ export interface Edge<T = any> {
   arrowHeadType?: ArrowHeadType
   isHidden?: boolean
   data?: T
-  className?: string
+  class?: string
 }
 
 export interface EdgeProps<T = any> {
@@ -35,7 +40,12 @@ export interface EdgeProps<T = any> {
   animated?: boolean
   sourcePosition: Position
   targetPosition: Position
-  label?: string | VNode
+  label?:
+    | string
+    | {
+        component: any
+        props?: any
+      }
   labelStyle?: any
   labelShowBg?: boolean
   labelBgStyle?: any

src/types/node.ts

@@ -6,13 +6,15 @@ export interface Node<T = any> {
   id: ElementId
   position: XYPosition
   type?: string
-  __rf: {
+  __rf?:
-    position: XYPosition
+    | {
-    isDragging?: boolean
+        position?: XYPosition
-    width: number | null
+        isDragging?: boolean
-    height: number | null
+        width?: number
-    handleBounds?: any
+        height?: number
-  }
+        handleBounds?: any
+      }
+    | any
   data?: T
   style?: any
   className?: string
@@ -45,8 +47,8 @@ export type NodeDimensionUpdate = {
 }
 
 export interface NodeProps<T = any> {
-  id: ElementId
+  id?: ElementId
-  type: string
+  type?: string
   data?: T
   selected?: boolean
   connectable?: boolean
@@ -57,4 +59,4 @@ export interface NodeProps<T = any> {
   dragging?: boolean
 }
 
-export type NodeType = DefineComponent<NodeProps>
+export type NodeType = DefineComponent<NodeProps, any, any, any, any>

src/types/types.ts

@@ -8,7 +8,7 @@ export type ElementId = string
 
 export type FlowElement<T = any> = Node<T> | Edge<T>
 
-export type Elements<T = any> = Array<FlowElement<T>>
+export type Elements<T = any> = FlowElement<T>[]
 
 export type Transform = [number, number, number]
 

src/utils/graph.ts

@@ -169,8 +169,8 @@ export const parseNode = (node: Node, nodeExtent: NodeExtent): Node => ({
   type: node.type || 'default',
   __rf: {
     position: clampPosition(node.position, nodeExtent),
-    width: null,
+    width: undefined,
-    height: null,
+    height: undefined,
     handleBounds: {},
     isDragging: false,
   },
@@ -240,7 +240,9 @@ export const getNodesInside = (nodes: Node[], rect: Rect, [tx, ty, tScale]: Tran
     height: rect.height / tScale,
   })
 
-  return nodes.filter(({ __rf: { position, width, height, isDragging } }) => {
+  return nodes.filter((node) => {
+    if (!node.__rf) return false
+    const { position = { x: 0, y: 0 }, width = 0, height = 0, isDragging = false } = node.__rf
     const nBox = rectToBox({ ...position, width, height } as any)
     const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x))
     const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y))
@@ -271,7 +273,7 @@ const parseElements = (nodes: Node[], edges: Edge[]): Elements => [
   ...nodes.map((node) => {
     const n = { ...node }
 
-    n.position = n.__rf.position
+    if (n.__rf?.position) n.position = n.__rf?.position
 
     return n
   }),

tsconfig.json

@@ -13,7 +13,7 @@
     "skipLibCheck": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
     "types": [