update(types): Correct __vf typing

* fix all uses of __vf so the actual type works properly
* correct the class and style props

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

src/components/Edges/Edge.vue

@@ -102,15 +102,19 @@ 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?.__vf?.handleBounds.target
+    ? nodes.value.targetNode?.__vf?.handleBounds?.target
-    : nodes.value.targetNode?.__vf?.handleBounds.target ?? nodes.value.targetNode?.__vf?.handleBounds.source,
+    : nodes.value.targetNode?.__vf?.handleBounds?.target ?? nodes.value.targetNode?.__vf?.handleBounds?.source,
 )
 
 const sourceHandle = computed(() => {
-  if (nodes.value.sourceNode) return getHandle(nodes.value.sourceNode.__vf?.handleBounds.source, props.edge.sourceHandle ?? null)
+  if (nodes.value.sourceNode && nodes.value.sourceNode.__vf?.handleBounds?.source)
+    return getHandle(nodes.value.sourceNode.__vf.handleBounds.source, props.edge.sourceHandle ?? null)
+  else return null
+})
+const targetHandle = computed(() => {
+  if (targetNodeHandles.value) return getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null)
   else return null
 })
-const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null))
 const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
 const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
 

src/store/stateStore.ts

@@ -91,11 +91,10 @@ export default function flowStore(
         const node = this.nodes[i]
         const dimensions = getDimensions(nodeElement)
 
-        if (!node.__vf) node.__vf = {}
         const doUpdate =
           dimensions.width &&
           dimensions.height &&
-          (node.__vf.width !== dimensions.width || node.__vf.height !== dimensions.height || forceUpdate)
+          (node.__vf?.width !== dimensions.width || node.__vf?.height !== dimensions.height || forceUpdate)
 
         if (doUpdate) {
           const handleBounds = getHandleBounds(nodeElement, this.transform[2])
@@ -103,6 +102,7 @@ export default function flowStore(
           this.nodes.splice(i, 1, {
             ...node,
             __vf: {
+              position: { x: 0, y: 0 },
               ...node.__vf,
               ...dimensions,
               handleBounds,
@@ -125,6 +125,8 @@ export default function flowStore(
         this.nodes.splice(i, 1, {
           ...node,
           __vf: {
+            width: 0,
+            height: 0,
             ...node.__vf,
             position: pos,
           },
@@ -132,18 +134,21 @@ export default function flowStore(
       },
       updateNodePosDiff({ id, diff, isDragging }) {
         const update = (node: Node, i: number) => {
-          const updatedNode = {
+          const updatedNode: Node = {
             ...node,
             __vf: {
+              width: 0,
+              height: 0,
+              position: { x: 0, y: 0 },
               ...node.__vf,
               isDragging,
             },
           }
 
-          if (diff) {
+          if (diff && node.__vf) {
-            updatedNode.__vf.position = {
+            updatedNode.__vf!.position = {
-              x: (node.__vf?.position?.x as number) + diff.x,
+              x: node.__vf.position.x + diff.x,
-              y: (node.__vf?.position?.y as number) + diff.y,
+              y: node.__vf.position.y + diff.y,
             }
           }
 
@@ -238,8 +243,10 @@ export default function flowStore(
           return {
             ...node,
             __vf: {
+              height: 0,
+              width: 0,
               ...node.__vf,
-              position: node.__vf?.position && clampPosition(node.__vf.position, nodeExtent),
+              position: node.__vf?.position ? clampPosition(node.__vf.position, nodeExtent) : { x: 0, y: 0 },
             },
           }
         })

src/types/node.ts

@@ -1,22 +1,24 @@
-import { Component, DefineComponent } from 'vue'
+import { Component, CSSProperties, DefineComponent } from 'vue'
 import { XYPosition, ElementId, Position } from './types'
+import { HandleElement } from '~/types/handle'
 
 export interface Node<T = any> {
   id: ElementId
   position: XYPosition
   type?: string
-  __vf?:
+  __vf?: {
-    | {
+    position: XYPosition
-        position?: XYPosition
+    isDragging?: boolean
-        isDragging?: boolean
+    width: number
-        width?: number
+    height: number
-        height?: number
+    handleBounds?: {
-        handleBounds?: any
+      source?: HandleElement[] | null
-      }
+      target?: HandleElement[] | null
-    | any
+    }
-  data?: T
+  }
-  style?: any
   class?: string
+  style?: CSSProperties
+  data?: T
   targetPosition?: Position
   sourcePosition?: Position
   isHidden?: boolean

src/utils/graph.ts

@@ -172,8 +172,8 @@ export const parseNode = (node: Node, nodeExtent: NodeExtent): Node => ({
   type: node.type || 'default',
   __vf: {
     position: clampPosition(node.position, nodeExtent),
-    width: undefined,
+    width: 0,
-    height: undefined,
+    height: 0,
     handleBounds: {},
     isDragging: false,
   },
@@ -215,7 +215,7 @@ export const getBoundsofRects = (rect1: Rect, rect2: Rect): Rect =>
 
 export const getRectOfNodes = (nodes: Node[]): Rect => {
   const box = nodes.reduce(
-    (currBox, { __vf: { position, width, height } = {} }) =>
+    (currBox, { __vf: { position = { x: 0, y: 0 }, width = 0, height = 0 } = {} }) =>
       getBoundsOfBoxes(
         currBox,
         rectToBox({