refactor(nodes): remove __vf.position

* duplicate position values as __vf.position and position save the same values

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

src/components/Nodes/NodeWrapper.vue

@@ -17,7 +17,6 @@ interface NodeWrapperProps {
 }
 
 const props = defineProps<NodeWrapperProps>()
-
 const store = useStore()
 provide(NodeId, props.node.id)
 
@@ -149,7 +148,7 @@ export default {
       ]"
       :style="{
         zIndex: selected ? 10 : 3,
-        transform: `translate(${props.vf.position.x}px,${props.vf.position.y}px)`,
+        transform: `translate(${props.node.position.x}px,${props.node.position.y}px)`,
         pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
         opacity: props.vf.width !== null && props.vf.height !== null ? 1 : 0,
         ...props.node.style,
@@ -167,8 +166,8 @@ export default {
           id: props.node.id,
           data: props.node.data,
           type: props.node.type,
-          xPos: props.vf.position.x,
-          yPos: props.vf.position.y,
+          xPos: props.node.position.x,
+          yPos: props.node.position.y,
           selected,
           connectable: props.connectable,
           sourcePosition: props.node.sourcePosition,
@@ -182,8 +181,8 @@ export default {
             id: props.node.id,
             data: props.node.data,
             type: props.node.type,
-            xPos: props.vf.position.x,
-            yPos: props.vf.position.y,
+            xPos: props.node.position.x,
+            yPos: props.node.position.y,
             selected,
             connectable: props.connectable,
             sourcePosition: props.node.sourcePosition,

src/types/node.ts

@@ -4,7 +4,6 @@ import { XYPosition, ElementId, Position, SnapGrid } from './flow'
 import { HandleElement } from './components'
 
 export interface VFInternals {
-  position: XYPosition
   isDragging?: boolean
   width: number
   height: number

src/utils/edge.ts

@@ -13,9 +13,9 @@ import {
   FlowElements,
 } from '~/types'
 
-export function getHandlePosition(position: Position, node: GraphNode, handle: any | null = null): XYPosition {
-  const x = (handle?.x || 0) + node.__vf.position.x
-  const y = (handle?.y || 0) + node.__vf.position.y
+export function getHandlePosition(position: Position, node: GraphNode, handle?: HandleElement): XYPosition {
+  const x = (handle?.x ?? 0) + node.position.x
+  const y = (handle?.y ?? 0) + node.position.y
   const width = handle?.width || node.__vf.width
   const height = handle?.height || node.__vf.height
 
@@ -60,10 +60,10 @@ export function getHandle(bounds: HandleElement[], handleId?: ElementId): Handle
 
 export const getEdgePositions = (
   sourceNode: GraphNode,
-  sourceHandle: HandleElement | unknown,
+  sourceHandle: HandleElement | undefined,
   sourcePosition: Position,
   targetNode: GraphNode,
-  targetHandle: HandleElement | unknown,
+  targetHandle: HandleElement | undefined,
   targetPosition: Position,
 ): EdgePositions => {
   const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle)

src/utils/graph.ts

@@ -55,8 +55,9 @@ export const isEdge = (element: Node | Edge | Connection): element is Edge =>
 export const isNode = (element: Node | Edge | Connection): element is Node =>
   'id' in element && !('source' in element) && !('target' in element)
 
-export const isGraphNode = (element: FlowElement | Connection): element is GraphNode => isNode(element) && '__vf' in element
-export const isGraphEdge = (element: FlowElement | Connection): element is GraphEdge =>
+export const isGraphNode = (element: Node | FlowElement | Connection): element is GraphNode =>
+  isNode(element) && '__vf' in element
+export const isGraphEdge = (element: Edge | FlowElement | Connection): element is GraphEdge =>
   isEdge(element) && 'sourceTargetNodes' in element
 
 const getConnectedElements = (node: GraphNode, elements: Elements, dir: 'source' | 'target') => {
@@ -167,9 +168,8 @@ export const onLoadProject = (currentStore: FlowStore) => (position: XYPosition)
 export const parseNode = (node: Node, nodeExtent: NodeExtent): GraphNode => ({
   ...node,
   id: node.id.toString(),
-  type: node.type || 'default',
+  type: node.type ?? 'default',
   __vf: {
-    position: clampPosition(node.position, nodeExtent),
     width: 0,
     height: 0,
     handleBounds: {
@@ -178,6 +178,7 @@ export const parseNode = (node: Node, nodeExtent: NodeExtent): GraphNode => ({
     },
     isDragging: false,
   },
+  position: clampPosition(node.position, nodeExtent),
 })
 
 export const parseEdge = (edge: Edge): Edge => ({
@@ -187,7 +188,7 @@ export const parseEdge = (edge: Edge): Edge => ({
   sourceHandle: edge.sourceHandle ? edge.sourceHandle.toString() : undefined,
   targetHandle: edge.targetHandle ? edge.targetHandle.toString() : undefined,
   id: edge.id.toString(),
-  type: edge.type || 'default',
+  type: edge.type ?? 'default',
 })
 
 const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({
@@ -215,7 +216,7 @@ export const getBoundsofRects = (rect1: Rect, rect2: Rect) => boxToRect(getBound
 
 export const getRectOfNodes = (nodes: GraphNode[]) => {
   const box = nodes.reduce(
-    (currBox, { __vf: { position = { x: 0, y: 0 }, width = 0, height = 0 } = {} }) =>
+    (currBox, { position = { x: 0, y: 0 }, __vf: { width = 0, height = 0 } = {} }) =>
       getBoundsOfBoxes(
         currBox,
         rectToBox({
@@ -245,7 +246,10 @@ export const getNodesInside = (nodes: GraphNode[], rect: Rect, [tx, ty, tScale]:
 
   return nodes.filter((node) => {
     if (!node.__vf || node.selectable === false) return false
-    const { position = { x: 0, y: 0 }, width = 0, height = 0, isDragging = false } = node.__vf
+    const {
+      position = { x: 0, y: 0 },
+      __vf: { width = 0, height = 0, isDragging = false },
+    } = node
     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))

src/utils/store.ts

@@ -100,7 +100,7 @@ export const initialState = (): FlowState => ({
   vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
 })
 
-export const parseElements = async (elements: Elements, nodes: Node[], edges: Edge[], nodeExtent: NodeExtent) =>
+export const parseElements = async (elements: Elements, nodes: GraphNode[], edges: GraphEdge[], nodeExtent: NodeExtent) =>
   new Promise<NextElements>((resolve) => {
     const { nextEdges, nextNodes }: NextElements = {
       nextNodes: [],
@@ -115,12 +115,11 @@ export const parseElements = async (elements: Elements, nodes: Node[], edges: Ed
             ...storeNode,
             ...element,
           } as GraphNode
-          updatedNode.__vf!.position = element.position
 
           if (typeof element.type !== 'undefined' && element.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.__vf!.width = 0
+            updatedNode.__vf.width = 0
           }
 
           nextNodes.push(updatedNode)