refactor: rename internal data field to __vf

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

examples/Provider/Sidebar.vue

@@ -19,7 +19,7 @@ const selectAll = () => {
     <div class="transform">{{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}</div>
     <div class="title">Nodes</div>
     <div v-for="node of nodes" :key="node.id">
-      Node {{ node.id }} - x: {{ node.__rf.position.x.toFixed(2) }}, y: {{ node.__rf.position.y.toFixed(2) }}
+      Node {{ node.id }} - x: {{ node.__vf.position.x.toFixed(2) }}, y: {{ node.__vf.position.y.toFixed(2) }}
     </div>
 
     <div class="selectall">

src/additional-components/MiniMap/MiniMap.vue

@@ -92,10 +92,10 @@ const d = computed(() => {
   >
     <template v-for="node of nodes" :key="`mini-map-node-${node.id}`">
       <slot
-        :x="node.__rf.position.x"
+        :x="node.__vf.position.x"
-        :y="node.__rf.position.y"
+        :y="node.__vf.position.y"
-        :width="node.__rf.width"
+        :width="node.__vf.width"
-        :height="node.__rf.height"
+        :height="node.__vf.height"
         :style="node.style"
         :class="nodeClassNameFunc(node)"
         :color="nodeColorFunc(node)"
@@ -105,10 +105,10 @@ const d = computed(() => {
         :shape-rendering="shapeRendering"
       >
         <MiniMapNode
-          :x="node.__rf.position.x"
+          :x="node.__vf.position.x"
-          :y="node.__rf.position.y"
+          :y="node.__vf.position.y"
-          :width="node.__rf.width"
+          :width="node.__vf.width"
-          :height="node.__rf.height"
+          :height="node.__vf.height"
           :style="node.style"
           :class="nodeClassNameFunc(node)"
           :color="nodeColorFunc(node)"

src/components/ConnectionLine/ConnectionLine.vue

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

src/components/Edges/Edge.vue

@@ -102,12 +102,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?.__vf?.handleBounds.target
-    : nodes.value.targetNode?.__rf?.handleBounds.target ?? nodes.value.targetNode?.__rf?.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.__rf?.handleBounds.source, props.edge.sourceHandle ?? null)
+  if (nodes.value.sourceNode) return getHandle(nodes.value.sourceNode.__vf?.handleBounds.source, props.edge.sourceHandle ?? null)
   else return null
 })
 const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null))

src/components/Nodes/Node.vue

@@ -41,13 +41,13 @@ const scale = computed(() => store.transform[2])
 const selected = computed(() => selectable.value && store.selectedElements?.some(({ id }) => id === props.node.id))
 
 const onMouseEnterHandler = () =>
-  props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
+  props.node.__vf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
 
 const onMouseMoveHandler = () =>
-  props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
+  props.node.__vf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
 
 const onMouseLeaveHandler = () =>
-  props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
+  props.node.__vf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
 
 const onContextMenuHandler = () => (event: MouseEvent) => store.hooks.nodeContextMenu.trigger({ event, node: props.node })
 
@@ -97,7 +97,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.__vf?.isDragging) {
     if (selectable.value && !props.selectNodesOnDrag && !selected.value) {
       store.addSelectedElements([n])
     }
@@ -165,9 +165,9 @@ onMounted(() => {
       ]"
       :style="{
         zIndex: selected ? 10 : 3,
-        transform: `translate(${props.node.__rf?.position?.x}px,${props.node.__rf?.position?.y}px)`,
+        transform: `translate(${props.node.__vf?.position?.x}px,${props.node.__vf?.position?.y}px)`,
         pointerEvents: selectable || draggable ? 'all' : 'none',
-        opacity: props.node.__rf?.width !== null && props.node.__rf?.height !== null ? 1 : 0,
+        opacity: props.node.__vf?.width !== null && props.node.__vf?.height !== null ? 1 : 0,
         ...props.node.style,
       }"
       :data-id="props.node.id"
@@ -182,13 +182,13 @@ onMounted(() => {
           id: props.node.id,
           data: props.node.data,
           type: props.node.type,
-          xPos: props.node.__rf?.position?.x,
+          xPos: props.node.__vf?.position?.x,
-          yPos: props.node.__rf?.position?.y,
+          yPos: props.node.__vf?.position?.y,
           selected,
           connectable,
           sourcePosition: props.node.sourcePosition,
           targetPosition: props.node.targetPosition,
-          dragging: props.node.__rf?.isDragging,
+          dragging: props.node.__vf?.isDragging,
         }"
       >
         <component
@@ -197,13 +197,13 @@ onMounted(() => {
             id: props.node.id,
             data: props.node.data,
             type: props.node.type,
-            xPos: props.node.__rf?.position?.x,
+            xPos: props.node.__vf?.position?.x,
-            yPos: props.node.__rf?.position?.y,
+            yPos: props.node.__vf?.position?.y,
             selected,
             connectable,
             sourcePosition: props.node.sourcePosition,
             targetPosition: props.node.targetPosition,
-            dragging: props.node.__rf?.isDragging,
+            dragging: props.node.__vf?.isDragging,
           }"
         />
       </slot>

src/components/NodesSelection/NodesSelection.vue

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

src/container/EdgeRenderer/utils.ts

@@ -2,10 +2,10 @@ import { Edge, EdgePositions, ElementId, HandleElement, Node, Position, Transfor
 import { rectToBox } from '~/utils'
 
 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.__vf?.position?.x
-  const y = (handle?.y || 0) + node.__rf?.position?.y
+  const y = (handle?.y || 0) + node.__vf?.position?.y
-  const width = handle?.width || node.__rf?.width
+  const width = handle?.width || node.__vf?.width
-  const height = handle?.height || node.__rf?.height
+  const height = handle?.height || node.__vf?.height
 
   switch (position) {
     case Position.Top:

src/store/stateStore.ts

@@ -91,19 +91,19 @@ export default function flowStore(
         const node = this.nodes[i]
         const dimensions = getDimensions(nodeElement)
 
-        if (!node.__rf) node.__rf = {}
+        if (!node.__vf) node.__vf = {}
         const doUpdate =
           dimensions.width &&
           dimensions.height &&
-          (node.__rf.width !== dimensions.width || node.__rf.height !== dimensions.height || forceUpdate)
+          (node.__vf.width !== dimensions.width || node.__vf.height !== dimensions.height || forceUpdate)
 
         if (doUpdate) {
           const handleBounds = getHandleBounds(nodeElement, this.transform[2])
 
           this.nodes.splice(i, 1, {
             ...node,
-            __rf: {
+            __vf: {
-              ...node.__rf,
+              ...node.__vf,
               ...dimensions,
               handleBounds,
             },
@@ -124,8 +124,8 @@ export default function flowStore(
 
         this.nodes.splice(i, 1, {
           ...node,
-          __rf: {
+          __vf: {
-            ...node.__rf,
+            ...node.__vf,
             position: pos,
           },
         })
@@ -134,16 +134,16 @@ export default function flowStore(
         const update = (node: Node, i: number) => {
           const updatedNode = {
             ...node,
-            __rf: {
+            __vf: {
-              ...node.__rf,
+              ...node.__vf,
               isDragging,
             },
           }
 
           if (diff) {
-            updatedNode.__rf.position = {
+            updatedNode.__vf.position = {
-              x: (node.__rf?.position?.x as number) + diff.x,
+              x: (node.__vf?.position?.x as number) + diff.x,
-              y: (node.__rf?.position?.y as number) + diff.y,
+              y: (node.__vf?.position?.y as number) + diff.y,
             }
           }
 
@@ -197,7 +197,7 @@ export default function flowStore(
         this.selectedElements = nextSelectedElements
       },
       unsetUserSelection() {
-        const selectedNodes = this.selectedElements?.filter((node) => node && isNode(node) && node.__rf) as Node[]
+        const selectedNodes = this.selectedElements?.filter((node) => node && isNode(node) && node.__vf) as Node[]
 
         this.selectionActive = false
         this.userSelectionRect.draw = false
@@ -237,9 +237,9 @@ export default function flowStore(
         this.nodes = this.nodes.map((node) => {
           return {
             ...node,
-            __rf: {
+            __vf: {
-              ...node.__rf,
+              ...node.__vf,
-              position: node.__rf?.position && clampPosition(node.__rf.position, nodeExtent),
+              position: node.__vf?.position && clampPosition(node.__vf.position, nodeExtent),
             },
           }
         })

src/store/utils.ts

@@ -109,16 +109,16 @@ export const parseElements = async (elements: Elements, nodes: Node[], edges: Ed
             ...storeNode,
             ...element,
           }
-          if (!updatedNode.__rf) updatedNode.__rf = {}
+          if (!updatedNode.__vf) updatedNode.__vf = {}
 
           if (storeNode.position.x !== element.position.x || storeNode.position.y !== element.position.y) {
-            updatedNode.__rf.position = element.position
+            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.__rf.width = undefined
+            updatedNode.__vf.width = undefined
           }
 
           nextElements.nextNodes.push(updatedNode)

src/types/node.ts

@@ -5,7 +5,7 @@ export interface Node<T = any> {
   id: ElementId
   position: XYPosition
   type?: string
-  __rf?:
+  __vf?:
     | {
         position?: XYPosition
         isDragging?: boolean

src/utils/graph.ts

@@ -170,7 +170,7 @@ export const parseNode = (node: Node, nodeExtent: NodeExtent): Node => ({
   ...node,
   id: node.id.toString(),
   type: node.type || 'default',
-  __rf: {
+  __vf: {
     position: clampPosition(node.position, nodeExtent),
     width: undefined,
     height: undefined,
@@ -215,7 +215,7 @@ export const getBoundsofRects = (rect1: Rect, rect2: Rect): Rect =>
 
 export const getRectOfNodes = (nodes: Node[]): Rect => {
   const box = nodes.reduce(
-    (currBox, { __rf: { position, width, height } = {} }) =>
+    (currBox, { __vf: { position, width, height } = {} }) =>
       getBoundsOfBoxes(
         currBox,
         rectToBox({
@@ -244,8 +244,8 @@ export const getNodesInside = (nodes: Node[], rect: Rect, [tx, ty, tScale]: Tran
   })
 
   return nodes.filter((node) => {
-    if (!node.__rf) return false
+    if (!node.__vf) return false
-    const { position = { x: 0, y: 0 }, width = 0, height = 0, isDragging = false } = node.__rf
+    const { position = { x: 0, y: 0 }, width = 0, height = 0, isDragging = false } = node.__vf
     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/workers/parseElements.ts

@@ -13,7 +13,7 @@ export default () =>
       Object.assign(node, {
         id: node.id.toString(),
         type: node.type || 'default',
-        __rf: {
+        __vf: {
           position: clampPosition(node.position, nodeExtent),
           width: undefined,
           height: undefined,
@@ -49,16 +49,16 @@ export default () =>
 
         if (storeNode) {
           const updatedNode: Node = Object.assign(storeNode, element)
-          if (!updatedNode.__rf) updatedNode.__rf = {}
+          if (!updatedNode.__vf) updatedNode.__vf = {}
 
           if (storeNode.position.x !== element.position.x || storeNode.position.y !== element.position.y) {
-            updatedNode.__rf.position = element.position
+            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.__rf.width = undefined
+            updatedNode.__vf.width = undefined
           }
 
           nextElements.nextNodes.push(updatedNode)