chore: lint files

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

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -44,8 +44,6 @@ const EdgeWrapper = defineComponent({
 
     const handleId = ref<string | null>(null)
 
-    const type = ref<HandleType>('source')
-
     const edgeUpdaterType = ref<HandleType>('source')
 
     const edgeEl = ref<SVGElement>()
@@ -53,17 +51,13 @@ const EdgeWrapper = defineComponent({
     provide(EdgeId, props.id)
     provide(EdgeRef, edgeEl)
 
-    const sourceNode = $computed(() => findNode(edge.source))
-
-    const targetNode = $computed(() => findNode(edge.target))
-
     const edgeClass = $computed(() => (edge.class instanceof Function ? edge.class(edge) : edge.class))
     const edgeStyle = $computed(() => (edge.style instanceof Function ? edge.style(edge) : edge.style))
 
     const { handlePointerDown } = useHandle({
       nodeId,
       handleId,
-      type,
+      type: edgeUpdaterType,
       isValidConnection: isValidConnection.value,
       edgeUpdaterType,
       onEdgeUpdate,
@@ -71,6 +65,9 @@ const EdgeWrapper = defineComponent({
     })
 
     return () => {
+      const sourceNode = findNode(edge.source)
+      const targetNode = findNode(edge.target)
+
       if (!sourceNode || !targetNode || !edge) {
         return null
       }
@@ -248,9 +245,8 @@ const EdgeWrapper = defineComponent({
 
       nodeId.value = isSourceHandle ? edge.target : edge.source
       handleId.value = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
-      type.value = isSourceHandle ? 'target' : 'source'
 
-      edgeUpdaterType.value = type.value
+      edgeUpdaterType.value = isSourceHandle ? 'target' : 'source'
 
       hooks.emit.updateStart({ event, edge })
 
@@ -301,6 +297,7 @@ const EdgeWrapper = defineComponent({
 
         if (unselect) {
           edgeEl.value?.blur()
+
           removeSelectedEdges([findEdge(props.id)!])
         } else {
           addSelectedEdges([findEdge(props.id)!])

packages/core/src/components/Nodes/NodeWrapper.ts

@@ -92,7 +92,7 @@ const NodeWrapper = defineComponent({
       return styles
     })
 
-    const zIndex = computed(() => Number(node.zIndex ?? getStyle.value.zIndex ?? 0))
+    const zIndex = () => Number(node.zIndex ?? getStyle.value.zIndex ?? 0)
 
     onUpdateNodeInternals((updateIds) => {
       if (updateIds.includes(props.id)) {
@@ -124,18 +124,18 @@ const NodeWrapper = defineComponent({
         () => parentNode.value?.computedPosition.x,
         () => parentNode.value?.computedPosition.y,
         () => parentNode.value?.computedPosition.z,
+        () => zIndex(),
         () => node.selected,
         () => node.dimensions.height,
         () => node.dimensions.width,
         () => parentNode.value?.dimensions.height,
         () => parentNode.value?.dimensions.width,
-        zIndex,
       ],
-      ([newX, newY, parentX, parentY, parentZ]) => {
+      ([newX, newY, parentX, parentY, parentZ, nodeZIndex]) => {
         const xyzPos = {
           x: newX,
           y: newY,
-          z: zIndex.value + (elevateNodesOnSelect ? (node.selected ? 1000 : 0) : 0),
+          z: nodeZIndex + (elevateNodesOnSelect ? (node.selected ? 1000 : 0) : 0),
         }
 
         if (isNumber(parentX) && isNumber(parentY)) {
@@ -187,7 +187,7 @@ const NodeWrapper = defineComponent({
             getClass.value,
           ],
           'style': {
-            zIndex: node.computedPosition.z ?? zIndex.value,
+            zIndex: node.computedPosition.z ?? zIndex(),
             transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
             pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
             visibility: node.initialized ? 'visible' : 'hidden',

packages/core/src/components/NodesSelection/NodesSelection.vue

@@ -3,18 +3,18 @@ const { emits, viewport, getSelectedNodes, noPanClassName, disableKeyboardA11y,
 
 const updatePositions = useUpdateNodePositions()
 
-const el = ref()
+const el = ref<HTMLDivElement>()
 
 const dragging = useDrag({
   el,
-  onStart(event, node, nodes) {
+  onStart(args) {
-    emits.selectionDragStart({ event, node, nodes })
+    emits.selectionDragStart(args)
   },
-  onDrag(event, node, nodes) {
+  onDrag(args) {
-    emits.selectionDrag({ event, node, nodes })
+    emits.selectionDrag(args)
   },
-  onStop(event, node, nodes) {
+  onStop(args) {
-    emits.selectionDragStop({ event, node, nodes })
+    emits.selectionDragStop(args)
   },
 })
 
@@ -24,13 +24,13 @@ onMounted(() => {
   }
 })
 
-const selectedNodesBBox = $computed(() => getRectOfNodes(getSelectedNodes))
+const selectedNodesBBox = computed(() => getRectOfNodes(getSelectedNodes))
 
 const innerStyle = computed(() => ({
-  width: `${selectedNodesBBox.width}px`,
+  width: `${selectedNodesBBox.value.width}px`,
-  height: `${selectedNodesBBox.height}px`,
+  height: `${selectedNodesBBox.value.height}px`,
-  top: `${selectedNodesBBox.y}px`,
+  top: `${selectedNodesBBox.value.y}px`,
-  left: `${selectedNodesBBox.x}px`,
+  left: `${selectedNodesBBox.value.x}px`,
 }))
 
 function onContextMenu(event: MouseEvent) {

packages/core/src/composables/useDrag.ts

@@ -18,11 +18,6 @@ interface UseDragParams {
 }
 
 function useDrag(params: UseDragParams) {
-  const scope = effectScope()
-
-  tryOnScopeDispose(scope.stop)
-
-  return scope.run(() => {
   const {
     vueFlowRef,
     snapToGrid,
@@ -61,14 +56,8 @@ function useDrag(params: UseDragParams) {
   let autoPanId = $ref(0)
   let autoPanStarted = $ref(false)
 
-    const node = $computed(() => (id ? findNode(id) : undefined))
-
   const getPointerPosition = useGetPointerPosition()
 
-    watch([() => resolveUnref(disabled), el], ([isDisabled, nodeEl]) => {
-      if (nodeEl) {
-        const selection = select(nodeEl)
-
   const updateNodes = ({ x, y }: XYPosition) => {
     lastPos = { x, y }
 
@@ -136,13 +125,19 @@ function useDrag(params: UseDragParams) {
     autoPanId = requestAnimationFrame(autoPan)
   }
 
+  watch([() => resolveUnref(disabled), el], ([isDisabled, nodeEl]) => {
+    if (nodeEl) {
+      const selection = select(nodeEl)
+
       if (isDisabled) {
         selection.on('.drag', null)
       } else {
+        const node = findNode(id)
+
         dragHandler = drag()
           .on('start', (event: UseDragEvent) => {
-              if (!selectNodesOnDrag && !multiSelectionActive && id) {
+            if (!selectNodesOnDrag && !multiSelectionActive && node) {
-                if (!node?.selected) {
+              if (!node.selected) {
                 // we need to reset selected nodes when selectNodesOnDrag=false
                 removeSelectedElements()
               }
@@ -226,7 +221,6 @@ function useDrag(params: UseDragParams) {
   })
 
   return dragging
-  })
 }
 
 export default useDrag

packages/core/src/composables/useVueFlow.ts

@@ -79,6 +79,7 @@ export class Storage {
 type Injection = VueFlowStore | null | undefined
 type Scope = (EffectScope & { vueFlowId: string }) | undefined
 
+// todo: maybe replace the storage with a context based solution; This would break calling useVueFlow outside a setup function though, which should be fine
 export default (options?: FlowProps): VueFlowStore => {
   const storage = Storage.getInstance()
 

packages/core/src/container/Pane/Pane.vue

@@ -248,7 +248,7 @@ export default {
     ref="container"
     :key="`pane-${id}`"
     class="vue-flow__pane vue-flow__container"
-    :class="[{ selection: isSelecting }]"
+    :class="{ selection: isSelecting }"
     @click="onClick"
     @contextmenu="onContextMenu"
     @wheel.passive="onWheel"

packages/core/src/store/actions.ts

@@ -29,7 +29,7 @@ export function useActions(
 ): Actions {
   let fitViewOnInitDone = false
 
-  const viewportHelper = useViewport(state, getters)
+  const viewportHelper = $(useViewport(state, getters))
 
   const updateNodeInternals: Actions['updateNodeInternals'] = (ids) => {
     const updateIds = ids ?? nodeIds.value ?? []

packages/node-resizer/src/ResizeControl.vue

@@ -185,7 +185,9 @@ watchEffect((onCleanup) => {
           prevValues.value.height = height
         }
 
-        if (changes.length === 0) return
+        if (changes.length === 0) {
+          return
+        }
 
         const direction = getDirection({
           width: prevValues.value.width,
@@ -200,7 +202,9 @@ watchEffect((onCleanup) => {
 
         const callResize = props.shouldResize?.(event, nextValues)
 
-        if (callResize === false) return
+        if (callResize === false) {
+          return
+        }
 
         emits('resize', { event, params: nextValues })
 

packages/pathfinding-edge/src/edge/getBoundingBoxes.ts

@@ -89,10 +89,18 @@ export function getBoundingBoxes(storeNodes: GraphNode[], nodePadding = 0, graph
       bottomRight.y = roundUp(bottomRight.y, roundTo)
     }
 
-    if (topLeft.y < yMin) yMin = topLeft.y
+    if (topLeft.y < yMin) {
-    if (topLeft.x < xMin) xMin = topLeft.x
+      yMin = topLeft.y
-    if (bottomRight.y > yMax) yMax = bottomRight.y
+    }
-    if (bottomRight.x > xMax) xMax = bottomRight.x
+    if (topLeft.x < xMin) {
+      xMin = topLeft.x
+    }
+    if (bottomRight.y > yMax) {
+      yMax = bottomRight.y
+    }
+    if (bottomRight.x > xMax) {
+      xMax = bottomRight.x
+    }
 
     return {
       id: node.id,