fix: typings

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
-    class="vue-flow__background"
-    :style="{
-      width: '100%',
-      height: '100%',
-    }"
-  >
+  <svg 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
-          :stroke="bgColor"
-          :stroke-width="props.size"
-          :d="`M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`"
-        />
+        <path :stroke="bgColor" :stroke-width="props.size" :d="d" />
       </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 nodeStrokeColorFunc =
-  props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as StringFunc
+const nodeColorFunc: StringFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as string
+const nodeStrokeColorFunc: 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)
-    : store.connectionHandleType && props.sourceNode.__rf.handleBounds[store.connectionHandleType][0]
-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
-const sourceX = props.sourceNode.__rf.position.x + sourceHandleX
-const sourceY = props.sourceNode.__rf.position.y + sourceHandleY
+    ? props.sourceNode.__rf?.handleBounds[store.connectionHandleType].find(
+        (d: HandleElement) => d.id === store.connectionHandleId,
+      )
+    : store.connectionHandleType && props.sourceNode.__rf?.handleBounds[store.connectionHandleType][0]
+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
+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.source,
+    ? nodes.value.targetNode?.__rf?.handleBounds.target
+    : 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
-    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"
-  />
+  <circle class="vue-flow__edgeupdater" :cx="cx" :cy="cy" :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 = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
+const { width, height, x, y } = 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'"
-      :height="height + 2 * props.labelBgPadding[1] + 'px'"
-      :x="-props.labelBgPadding[0]"
-      :y="-props.labelBgPadding[1]"
+      :width="width + 2 * bgPadding[0] + 'px'"
+      :height="height + 2 * bgPadding[1] + 'px'"
+      :x="-bgPadding[0]"
+      :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,
-          yPos: props.node.__rf.position.y,
+          xPos: props.node.__rf?.position?.x,
+          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,
-            yPos: props.node.__rf.position.y,
+            xPos: props.node.__rf?.position?.x,
+            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 y = (handle?.y || 0) + node.__rf.position.y
-  const width = handle?.width || node.__rf.width
-  const height = handle?.height || node.__rf.height
+  const x = (handle?.x || 0) + node.__rf?.position?.x
+  const y = (handle?.y || 0) + node.__rf?.position?.y
+  const width = handle?.width || node.__rf?.width
+  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,
-              y: node.__rf.position.y + diff.y,
+              x: (node.__rf?.position?.x as number) + diff.x,
+              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: {
-    position: XYPosition
-    isDragging?: boolean
-    width: number | null
-    height: number | null
-    handleBounds?: any
-  }
+  __rf?:
+    | {
+        position?: XYPosition
+        isDragging?: boolean
+        width?: number
+        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
-  type: string
+  id?: ElementId
+  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,
-    height: null,
+    width: undefined,
+    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
   }),