chore: lint

examples/vite.config.ts

@@ -24,6 +24,6 @@ export default defineConfig({
     }),
   ],
   optimizeDeps: {
-    include: ['@braks/vue-flow'],
+    exclude: ['@braks/vue-flow'],
   },
 })

packages/vue-flow/.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   rules: {
     'no-use-before-define': 0,
     'vue/no-setup-props-destructure': 0,
+    'react/prop-types': 0,
   },
   extends: ['../../.eslintrc.js'],
   ignorePatterns: ['!**/*'],

packages/vue-flow/src/components/Edges/Wrapper.ts

@@ -1,6 +1,7 @@
-import { Component, CSSProperties, FunctionalComponent, VNode } from 'vue'
+import type { CSSProperties, Component, FunctionalComponent, VNode } from 'vue'
 import EdgeAnchor from './EdgeAnchor'
-import { ConnectionMode, EdgeComponent, EdgeMarkerType, EdgeTextProps, GraphNode, Position } from '~/types'
+import type { EdgeComponent, EdgeMarkerType, EdgeTextProps, GraphNode } from '~/types'
+import { ConnectionMode, Position } from '~/types'
 import { getEdgePositions, getHandle, getMarkerId } from '~/utils'
 
 interface Props {

packages/vue-flow/src/components/Nodes/NodeWrapper.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useVueFlow, useDrag } from '../../composables'
-import { NodeComponent, SnapGrid, XYZPosition } from '../../types'
+import { useDrag, useVueFlow } from '../../composables'
+import type { NodeComponent, SnapGrid, XYZPosition } from '../../types'
 import { NodeId } from '../../context'
 import { getConnectedEdges, getHandleBounds, getXYZPos } from '../../utils'
 
@@ -15,7 +15,6 @@ const { id, type, name, draggable, selectable, connectable, snapGrid, ...props }
   name: string
 }>()
 
-
 const emit = defineEmits(['update:modelValue'])
 
 let computedPosition = $(useVModel(props, 'modelValue', emit))
@@ -102,29 +101,32 @@ onMounted(() => {
   updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
 
   watch(
-    [() => node.position, () => parentNode?.computedPosition],
-    ([pos, parent]) => {
+    [
+      () => node.position.x,
+      () => node.position.y,
+      () => parentNode?.computedPosition.x,
+      () => parentNode?.computedPosition.y,
+      () => parentNode?.computedPosition.z,
+    ],
+    ([newX, newY, parentX, parentY, parentZ]) => {
       const xyzPos = {
-        ...pos,
+        x: newX,
+        y: newY,
         z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
       }
 
-      if (parent) {
-        computedPosition = getXYZPos(parent, xyzPos)
+      if (parentX && parentY) {
+        computedPosition = getXYZPos({ x: parentX, y: parentY, z: parentZ! }, xyzPos)
       } else {
         computedPosition = xyzPos
       }
 
       node.handleBounds = getHandleBounds(nodeElement.value, viewport.zoom)
     },
-    { immediate: true, deep: true, flush: 'post' },
+    { immediate: true, flush: 'post' },
   )
 })
 
-onUnmounted(() => {
-  nodeElement.value = undefined
-})
-
 const onMouseEnter = (event: MouseEvent) => {
   if (!dragging) {
     emits.nodeMouseEnter({ event, node, connectedEdges: getConnectedEdges([node], edges) })
@@ -167,11 +169,11 @@ const onSelectNode = (event: MouseEvent) => {
   }
 }
 
-const getClass = () => {
+const getClass = computed(() => {
   return node.class instanceof Function ? node.class(node) : node.class
-}
+})
 
-const getStyle = () => {
+const getStyle = computed(() => {
   const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
   const width = node.width instanceof Function ? node.width(node) : node.width
   const height = node.height instanceof Function ? node.height(node) : node.height
@@ -179,7 +181,7 @@ const getStyle = () => {
   if (height) styles.height = typeof height === 'string' ? height : `${height}px`
 
   return styles
-}
+})
 </script>
 
 <script lang="ts">
@@ -192,8 +194,8 @@ export default {
 <template>
   <div
     ref="nodeElement"
+    class="vue-flow__node"
     :class="[
-      'vue-flow__node',
       `vue-flow__node-${name}`,
       noPanClassName,
       {
@@ -201,13 +203,13 @@ export default {
         selected: node.selected,
         selectable,
       },
-      getClass(),
+      getClass,
     ]"
     :style="{
       zIndex: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
       transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
       pointerEvents: selectable || draggable ? 'all' : 'none',
-      ...getStyle(),
+      ...getStyle,
     }"
     :data-id="node.id"
     @mouseenter="onMouseEnter"

packages/vue-flow/src/composables/useDrag.ts

@@ -1,15 +1,19 @@
-import { D3DragEvent, drag, SubjectPosition } from 'd3-drag'
+import type { D3DragEvent, SubjectPosition } from 'd3-drag'
+import { drag } from 'd3-drag'
 import { select } from 'd3-selection'
-import { Ref } from 'vue'
-import { MaybeRef } from '@vueuse/core'
+import type { Ref } from 'vue'
+import type { MaybeRef } from '@vueuse/core'
 import useVueFlow from './useVueFlow'
 import { pointToRendererPoint } from '~/utils'
-import { GraphNode, XYPosition } from '~/types'
+import type { GraphNode, XYPosition } from '~/types'
 
 export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>
-export type UseDragData = { dx: number; dy: number }
+export interface UseDragData {
+  dx: number
+  dy: number
+}
 
-type UseDragParams = {
+interface UseDragParams {
   onStart: (event: UseDragEvent) => void
   onDrag: (event: UseDragEvent, data: UseDragData) => void
   onStop: (event: UseDragEvent) => void

packages/vue-flow/src/types/store.ts

@@ -1,15 +1,5 @@
 import type { CSSProperties, ComputedRef, ToRefs } from 'vue'
-import type {
-  Dimensions,
-  ElementData,
-  Elements,
-  FlowElements,
-  FlowInstance,
-  FlowOptions,
-  Rect,
-  SnapGrid,
-  XYPosition,
-} from './flow'
+import type { Dimensions, ElementData, Elements, FlowElements, FlowInstance, FlowOptions, SnapGrid, XYPosition } from './flow'
 import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
 import type { Connection, ConnectionLineType, ConnectionMode } from './connection'
 import type { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
@@ -25,7 +15,10 @@ export interface UpdateNodeDimensionsParams {
   forceUpdate?: boolean
 }
 
-export type UpdateNodePositionsParams = { id?: string; diff?: XYPosition }
+export interface UpdateNodePositionsParams {
+  id?: string
+  diff?: XYPosition
+}
 
 export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   /** Event hooks, you can manipulate the triggers at your own peril */