refactor(nodes): use watcher to calc xyzpos

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

src/components/Nodes/NodeWrapper.vue

@@ -78,14 +78,15 @@ const onDragStop: DraggableEventListener = ({ event, data: { deltaX, deltaY } })
   store.hooks.nodeDragStop.trigger({ event, node: node.value })
 }
 
-const xyzPos = computed(() => {
+watch([() => node.value.position, () => node.value.parentNode?.position], () => {
+  const xyzPos = {
+    ...node.value.position,
+    z: node.value.computedPosition.z,
+  }
   if (node.value.parentNode) {
-    return (node.value.computedPosition = getXYZPos(node.value, {
+    node.value.computedPosition = getXYZPos(node.value, xyzPos)
-      ...node.value.position,
-      z: node.value.computedPosition.z,
-    }))
   } else {
-    return node.value.computedPosition
+    node.value.computedPosition = xyzPos
   }
 })
 
@@ -143,10 +144,13 @@ export default {
         node.class,
       ]"
       :style="{
-        zIndex: node.dragging || node.selected ? 1000 : xyzPos.z,
+        zIndex: node.dragging || node.selected ? 1000 : node.computedPosition.z,
-        transform: `translate(${xyzPos.x}px,${xyzPos.y}px)`,
+        transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
         pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
-        opacity: node.dimensions.width !== 0 && node.dimensions.height !== 0 ? 1 : 0,
+        opacity:
+          store.dimensions.width !== 0 &&
+          store.dimensions.height !== 0 &&
+          (node.dimensions.width !== 0 && node.dimensions.height !== 0 ? 1 : 0),
         ...node.style,
       }"
       :data-id="node.id"
@@ -176,7 +180,7 @@ export default {
           handleBounds: node.handleBounds,
           parentNode: node.parentNode,
           isParent: node.isParent,
-          computedPosition: xyzPos,
+          computedPosition: node.computedPosition,
           position: node.position,
           draggable: props.draggable,
           selectable: props.selectable,
@@ -204,7 +208,7 @@ export default {
             handleBounds: node.handleBounds,
             parentNode: node.parentNode,
             isParent: node.isParent,
-            computedPosition: xyzPos,
+            computedPosition: node.computedPosition,
             position: node.position,
             draggable: props.draggable,
             selectable: props.selectable,

src/store/actions.ts

@@ -31,7 +31,6 @@ const updatePosition = (node: GraphNode, { x, y }: XYPosition = { x: 0, y: 0 },
   node.dragging = dragging
   const clamped = clampPosition(position, extent)
   position = { ...position, ...clamped }
-  node.computedPosition = position
   node.position = position
 }
 
@@ -160,8 +159,6 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     if (typeof opts.zoomOnPinch !== 'undefined') state.zoomOnPinch = opts.zoomOnPinch
     if (typeof opts.defaultZoom !== 'undefined') state.defaultZoom = opts.defaultZoom
     if (typeof opts.defaultPosition !== 'undefined') state.defaultPosition = opts.defaultPosition
-    if (typeof opts.edgeTypes !== 'undefined') state.edgeTypes = opts.edgeTypes
-    if (typeof opts.nodeTypes !== 'undefined') state.nodeTypes = opts.nodeTypes
     if (typeof opts.storageKey !== 'undefined') state.storageKey = opts.storageKey
     if (typeof opts.edgeUpdaterRadius !== 'undefined') state.edgeUpdaterRadius = opts.edgeUpdaterRadius
     if (typeof opts.elementsSelectable !== 'undefined') state.elementsSelectable = opts.elementsSelectable

src/types/node.ts

@@ -16,7 +16,7 @@ export interface Node<T = any> extends Element<T> {
   isValidTargetPos?: ValidConnectionFunc
   isValidSourcePos?: ValidConnectionFunc
   extent?: 'parent' | CoordinateExtent
-  children?: Node[]
+  children?: Node<T>[]
   dimensions?: Dimensions
 }
 
@@ -25,7 +25,7 @@ export interface GraphNode<T = any> extends Node<T> {
     source?: HandleElement[]
     target?: HandleElement[]
   }
-  parentNode?: GraphNode
+  parentNode?: GraphNode<T>
   isParent?: boolean
   computedPosition: XYZPosition
   selected?: boolean