refactor(nodes): use v-model to reactively change node props

* instead of re-parsing we proxy the node values and change them with a v-model

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

src/components/Nodes/NodeWrapper.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
 import { useStore } from '../../composables'
-import { GraphNode, SnapGrid, VFInternals, Draggable } from '../../types'
+import { GraphNode, SnapGrid, Draggable, NodeDimensionUpdate } from '../../types'
 import { NodeId } from '../../context'
+import { getDimensions, getHandleBounds } from '~/utils'
 
 interface NodeWrapperProps {
   node: GraphNode
-  vf: VFInternals
   selectNodesOnDrag?: boolean
   snapGrid?: SnapGrid
   component?: any
@@ -17,6 +17,8 @@ interface NodeWrapperProps {
 }
 
 const props = defineProps<NodeWrapperProps>()
+const emit = defineEmits(['update:modelValue'])
+const node = useVModel(props, 'node', emit)
 const store = useStore()
 provide(NodeId, props.node.id)
 
@@ -25,57 +27,46 @@ const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 const selected = computed(() => props.selectable && store.selectedElements?.some(({ id }) => id === props.node.id))
 
 const onMouseEnterHandler = () =>
-  props.vf.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.vf.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.vf.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 })
 const onDoubleClick = () => (event: MouseEvent) => store.hooks.nodeDoubleClick.trigger({ event, node: props.node })
 const onSelectNodeHandler = (event: MouseEvent) => {
-  const n = props.node
   if (!props.draggable) {
     if (props.selectable) {
       store.unsetNodesSelection()
-      if (!selected.value) store.addSelectedElements([n])
+      if (!selected.value) store.addSelectedElements([props.node])
     }
-    store.hooks.elementClick.trigger({ event, element: n })
+    store.hooks.elementClick.trigger({ event, element: props.node })
-    store.hooks.nodeClick.trigger({ event, node: n })
+    store.hooks.nodeClick.trigger({ event, node: props.node })
   }
 }
 const onDragStart: DraggableEventListener = ({ event }) => {
-  const n = props.node
+  store.hooks.nodeDragStart.trigger({ event, node: props.node })
-  store.hooks.nodeDragStart.trigger({ event, node: n })
 
   if (props.selectNodesOnDrag && props.selectable) {
     store.unsetNodesSelection()
 
-    if (!selected.value) store.addSelectedElements([n])
+    if (!selected.value) store.addSelectedElements([props.node])
   } else if (!props.selectNodesOnDrag && !selected.value && props.selectable) {
     store.unsetNodesSelection()
     store.addSelectedElements([])
   }
 }
 const onDrag: DraggableEventListener = ({ event, data }) => {
-  const n = props.node
+  node.value.position.x += data.deltaX
-  n.position.x += data.deltaX
+  node.value.position.y += data.deltaY
-  n.position.y += data.deltaY
+  node.value.__vf.isDragging = true
-  store.hooks.nodeDrag.trigger({ event, node: n })
+  store.hooks.nodeDrag.trigger({ event, node: props.node })
-
-  store.updateNodePosDiff({
-    id: props.node.id,
-    diff: {
-      x: data.deltaX,
-      y: data.deltaY,
-    },
-    isDragging: true,
-  })
 }
 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.vf.isDragging) {
+  if (!props.node.__vf.isDragging) {
     if (props.selectable && !props.selectNodesOnDrag && !selected.value) {
       store.addSelectedElements([n])
     }
@@ -83,15 +74,31 @@ const onDragStop: DraggableEventListener = ({ event }) => {
     store.hooks.elementClick.trigger({ event, element: n })
     return
   }
-  store.updateNodePosDiff({
+  node.value.__vf.isDragging = false
-    id: n.id,
-    isDragging: false,
-  })
   store.hooks.nodeDragStop.trigger({ event, node: n })
 }
 
+const updateNodeDimensions = ({ nodeElement, forceUpdate }: NodeDimensionUpdate) => {
+  const dimensions = getDimensions(nodeElement)
+
+  const doUpdate =
+    dimensions.width &&
+    dimensions.height &&
+    (props.node.__vf.width !== dimensions.width || props.node.__vf.height !== dimensions.height || forceUpdate)
+
+  if (doUpdate) {
+    const handleBounds = getHandleBounds(nodeElement, store.transform[2])
+
+    node.value.__vf = {
+      ...node.value.__vf,
+      ...dimensions,
+      handleBounds,
+    }
+  }
+}
+
 onMounted(() => {
-  store.updateNodeDimensions({
+  updateNodeDimensions({
     id: props.node.id,
     nodeElement: nodeElement.value,
     forceUpdate: true,
@@ -99,7 +106,7 @@ onMounted(() => {
 
   useResizeObserver(nodeElement, (entries) =>
     entries.forEach((entry) => {
-      store.updateNodeDimensions({
+      updateNodeDimensions({
         id: entry.target.getAttribute('data-id') as string,
         nodeElement: entry.target as HTMLDivElement,
       })
@@ -108,7 +115,7 @@ onMounted(() => {
 
   watch([() => props.node.type, () => props.node.sourcePosition, () => props.node.targetPosition], () => {
     nextTick(() => {
-      store.updateNodeDimensions({
+      updateNodeDimensions({
         id: props.node.id,
         nodeElement: nodeElement.value,
         forceUpdate: true,
@@ -150,7 +157,7 @@ export default {
         zIndex: selected ? 10 : 3,
         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,
+        opacity: props.node.__vf.width !== null && props.node.__vf.height !== null ? 1 : 0,
         ...props.node.style,
       }"
       :data-id="props.node.id"
@@ -172,7 +179,7 @@ export default {
           connectable: props.connectable,
           sourcePosition: props.node.sourcePosition,
           targetPosition: props.node.targetPosition,
-          dragging: props.vf.isDragging,
+          dragging: props.node.__vf.isDragging,
         }"
       >
         <component
@@ -187,7 +194,7 @@ export default {
             connectable: props.connectable,
             sourcePosition: props.node.sourcePosition,
             targetPosition: props.node.targetPosition,
-            dragging: props.vf.isDragging,
+            dragging: props.node.__vf.isDragging,
           }"
         />
       </slot>