chore: cleanup unused vars and remove setState usage

packages/vue-flow/src/components/UserSelection/UserSelection.vue

@@ -5,11 +5,15 @@ import { getConnectedEdges, getNodesInside } from '../../utils'
 import SelectionRect from './SelectionRect.vue'
 import { getMousePosition } from './utils'
 
-const { userSelectionActive, setState, getNodes, getEdges, viewport, addSelectedEdges, addSelectedNodes } = $(useVueFlow())
+const { userSelectionActive, nodesSelectionActive, getNodes, getEdges, viewport, addSelectedEdges, addSelectedNodes } =
+  useVueFlow()
+
 const el = templateRef('user-selection', null)
 
 let prevNodes = $ref(0)
+
 let prevEdges = $ref(0)
+
 const initialRect = () => ({
   width: 0,
   height: 0,
@@ -27,9 +31,7 @@ const reset = () => {
   prevNodes = 0
   prevEdges = 0
 
-  setState({
-    userSelectionActive: false,
-  })
+  userSelectionActive.value = false
 }
 
 const onMouseDown = (event: MouseEvent) => {
@@ -46,10 +48,8 @@ const onMouseDown = (event: MouseEvent) => {
     draw: true,
   }
 
-  setState({
-    userSelectionActive: true,
-    nodesSelectionActive: false,
-  })
+  userSelectionActive.value = true
+  nodesSelectionActive.value = true
 }
 
 const onMouseMove = (event: MouseEvent) => {
@@ -69,8 +69,8 @@ const onMouseMove = (event: MouseEvent) => {
     height: Math.abs(mousePos.y - startY),
   }
 
-  const selectedNodes = getNodesInside(getNodes, rect, viewport)
-  const selectedEdges = getConnectedEdges(selectedNodes, getEdges)
+  const selectedNodes = getNodesInside(getNodes.value, rect, viewport.value)
+  const selectedEdges = getConnectedEdges(selectedNodes, getEdges.value)
 
   rect = nextUserSelectRect
 
@@ -84,31 +84,23 @@ const onMouseMove = (event: MouseEvent) => {
 const onMouseUp = () => {
   rect = initialRect()
 
-  setState({
-    nodesSelectionActive: prevNodes > 0,
-    userSelectionActive: false,
-  })
+  nodesSelectionActive.value = prevNodes > 0
+  userSelectionActive.value = false
 }
 
 const onMouseLeave = () => {
-  setState({
-    nodesSelectionActive: prevNodes > 0,
-  })
+  nodesSelectionActive.value = prevNodes > 0
 
   reset()
 }
 
-onMounted(() => {
-  useEventListener(el, 'mousedown', onMouseDown)
-  useEventListener(el, 'mousemove', onMouseMove)
-  useEventListener(el, 'click', onMouseUp)
-  useEventListener(el, 'mouseup', onMouseUp)
-  useEventListener(el, 'mouseleave', onMouseLeave)
-})
+useEventListener(el, 'mousedown', onMouseDown)
+useEventListener(el, 'mousemove', onMouseMove)
+useEventListener(el, 'click', onMouseUp)
+useEventListener(el, 'mouseup', onMouseUp)
+useEventListener(el, 'mouseleave', onMouseLeave)
 
-onBeforeUnmount(() => {
-  reset()
-})
+onBeforeUnmount(reset)
 </script>
 
 <script lang="ts">

packages/vue-flow/src/container/SelectionPane/SelectionPane.vue

@@ -5,28 +5,25 @@ import { NodesSelection, UserSelection } from '../../components'
 
 const {
   id,
-  edges,
   deleteKeyCode,
   selectionKeyCode,
   multiSelectionKeyCode,
   emits,
   nodesSelectionActive,
   userSelectionActive,
+  multiSelectionActive,
   elementsSelectable,
-  removeSelectedElements,
-  setState,
-  getSelectedEdges,
-  getSelectedNodes,
   getNodes,
+  getSelectedEdges,
+  removeSelectedElements,
   removeNodes,
   removeEdges,
-} = $(useVueFlow())
+} = useVueFlow()
 
 const onClick = (event: MouseEvent) => {
   emits.paneClick(event)
-  setState({
-    nodesSelectionActive: false,
-  })
+  nodesSelectionActive.value = false
+
   removeSelectedElements()
 }
 
@@ -43,7 +40,7 @@ const onMouseMove = (event: MouseEvent) => emits.paneMouseMove(event)
 useKeyPress(deleteKeyCode, (keyPressed) => {
   if (!keyPressed) return
 
-  const nodesToRemove = getNodes.reduce<GraphNode[]>((res, node) => {
+  const nodesToRemove = getNodes.value.reduce<GraphNode[]>((res, node) => {
     if (!node.selected && node.parentNode && res.find((n) => n.id === node.parentNode)) {
       res.push(node)
     } else if (node.selected) {
@@ -53,37 +50,29 @@ useKeyPress(deleteKeyCode, (keyPressed) => {
     return res
   }, [])
 
-  const selectedEdges = edges.filter((e) => e.selected)
-
-  if (nodesToRemove || selectedEdges) {
-    if (selectedEdges.length > 0) {
-      removeEdges(selectedEdges)
+  if (nodesToRemove || getSelectedEdges.value) {
+    if (getSelectedEdges.value.length > 0) {
+      removeEdges(getSelectedEdges.value)
     }
 
     if (nodesToRemove.length > 0) {
       removeNodes(nodesToRemove)
     }
 
-    setState({
-      nodesSelectionActive: false,
-    })
+    nodesSelectionActive.value = false
 
     removeSelectedElements()
   }
 })
 
 useKeyPress(multiSelectionKeyCode, (keyPressed) => {
-  setState({
-    multiSelectionActive: keyPressed,
-  })
+  multiSelectionActive.value = keyPressed
 })
 
 const selectionKeyPressed = useKeyPress(selectionKeyCode, (keyPressed) => {
-  if (userSelectionActive && keyPressed) return
+  if (userSelectionActive.value && keyPressed) return
 
-  setState({
-    userSelectionActive: keyPressed && elementsSelectable,
-  })
+  userSelectionActive.value = keyPressed && elementsSelectable.value
 })
 </script>
 

packages/vue-flow/src/container/Viewport/Transform.vue

@@ -4,8 +4,7 @@ import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import { useVueFlow, useWindow } from '../../composables'
 import type { Dimensions } from '../../types'
 
-const { id, nodes, edges, viewport, snapToGrid, snapGrid, dimensions, setState, fitViewOnInit, emits, fitView, ...rest } =
-  useVueFlow()
+const { id, viewport, dimensions, fitViewOnInit, emits, fitView, ...rest } = useVueFlow()
 
 const untilDimensions = async (dim: Dimensions) => {
   // if ssr we can't wait for dimensions, they'll never really exist
@@ -29,13 +28,8 @@ onMounted(async () => {
 
   emits.paneReady({
     id,
-    nodes,
-    edges,
     viewport,
-    snapToGrid,
-    snapGrid,
     dimensions,
-    setState,
     fitViewOnInit,
     fitView,
     emits,

packages/vue-flow/src/container/Viewport/Viewport.vue

@@ -68,20 +68,20 @@ const stop = watch(
   { immediate: true },
 )
 
-onBeforeUnmount(() => stop())
+const window = useWindow()
+if ('screen' in window) {
+  useEventListener(window, 'resize', () => {
+    if (!viewportEl.value) return
+
+    const { width, height } = getDimensions(viewportEl.value)
+    dimensions.width = width
+    dimensions.height = height
+  })
+}
+
+onBeforeUnmount(stop)
 
 onMounted(() => {
-  const window = useWindow()
-  if ('screen' in window) {
-    useEventListener(window, 'onresize', () => {
-      if (!viewportEl.value) return
-
-      const { width, height } = getDimensions(viewportEl.value)
-      dimensions.width = width
-      dimensions.height = height
-    })
-  }
-
   const d3Zoom = zoom<HTMLDivElement, any>().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent)
   const d3Selection = select(viewportEl.value).call(d3Zoom)
   const d3ZoomHandler = d3Selection.on('wheel.zoom')
@@ -132,10 +132,11 @@ onMounted(() => {
   watchEffect(() => {
     if (panOnScroll && !zoomKeyPressed.value) {
       d3Selection
-        .on('wheel', (event: any) => {
+        .on('wheel', (event: WheelEvent) => {
           if (isWrappedWithClass(event, noWheelClassName?.value)) {
             return false
           }
+
           event.preventDefault()
           event.stopImmediatePropagation()
 
@@ -162,7 +163,7 @@ onMounted(() => {
         .on('wheel.zoom', null)
     } else if (typeof d3ZoomHandler !== 'undefined') {
       d3Selection
-        .on('wheel', (event: any) => {
+        .on('wheel', (event: WheelEvent) => {
           if (!preventScrolling || isWrappedWithClass(event, noWheelClassName?.value)) {
             return null
           }