refactor(selection)!: Move user selection rect drawing into component

* remove corresponding store state

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

src/components/NodesSelection/NodesSelection.vue

@@ -2,32 +2,30 @@
 import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
 import { useStore } from '../../composables'
 import { getRectOfNodes } from '../../utils'
+import { GraphNode } from '../../types'
 
+interface Props {
+  nodes: GraphNode[]
+}
 const store = useStore()
-const selectedNodesBBox = getRectOfNodes(store.getSelectedNodes)
+const props = defineProps<Props>()
+const selectedNodesBBox = getRectOfNodes(props.nodes)
 const innerStyle = {
   width: `${selectedNodesBBox.width}px`,
   height: `${selectedNodesBBox.height}px`,
   top: `${selectedNodesBBox.y}px`,
   left: `${selectedNodesBBox.x}px`,
 }
-const onStart: DraggableEventListener = ({ event }) =>
+const onStart: DraggableEventListener = ({ event }) => store.hooks.selectionDragStart.trigger({ event, nodes: props.nodes })
-  store.hooks.selectionDragStart.trigger({ event, nodes: store.getSelectedNodes })
+const onDrag: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) => {
-const onDrag: DraggableEventListener = ({ event, data }) => {
+  store.hooks.selectionDrag.trigger({ event, nodes: props.nodes })
-  store.hooks.selectionDrag.trigger({ event, nodes: store.getSelectedNodes })
+  store.updateNodePosition({ diff: { x: deltaX, y: deltaY }, dragging: true })
-  store.getSelectedNodes.forEach((node) => {
-    node.position = {
-      x: node.position.x + data.deltaX,
-      y: node.position.y + data.deltaY,
-    }
-    node.dragging = true
-  })
 }
 const onStop: DraggableEventListener = ({ event }) => {
-  store.hooks.selectionDragStop.trigger({ event, nodes: store.getSelectedNodes })
+  store.hooks.selectionDragStop.trigger({ event, nodes: props.nodes })
-  store.getSelectedNodes.forEach((node) => (node.dragging = false))
+  props.nodes.forEach((node) => (node.dragging = false))
 }
-const onContextMenu = (event: MouseEvent) => store.hooks.selectionContextMenu.trigger({ event, nodes: store.getSelectedNodes })
+const onContextMenu = (event: MouseEvent) => store.hooks.selectionContextMenu.trigger({ event, nodes: props.nodes })
 
 const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
 </script>
@@ -37,7 +35,7 @@ export default {
 }
 </script>
 <template>
-  <div class="vue-flow__nodesselection" :style="{ transform }">
+  <div class="vue-flow__nodesselection vue-flow__container" :style="{ transform }">
     <Draggable
       :grid="store.snapToGrid ? store.snapGrid : undefined"
       :enable-user-select-hack="false"

src/components/UserSelection/UserSelection.vue

@@ -1,16 +1,47 @@
 <script lang="ts" setup>
 import { useStore } from '../../composables'
+import { SelectionRect as Rect } from '../../types'
+import { getConnectedEdges, getNodesInside } from '../../utils'
 import SelectionRect from './SelectionRect.vue'
 import { getMousePosition } from './utils'
 
 const store = useStore()
 const el = templateRef('user-selection', null)
 
+const prevNodes = ref(0)
+const prevEdges = ref(0)
+const initialRect = () => ({
+  width: 0,
+  height: 0,
+  startX: 0,
+  startY: 0,
+  x: 0,
+  y: 0,
+  draw: false,
+})
+const rect = ref<Rect>(initialRect())
+
+const reset = () => {
+  rect.value = initialRect()
+  store.selectionActive = false
+  prevNodes.value = 0
+  prevEdges.value = 0
+}
 const onMouseDown = (event: MouseEvent) => {
   const mousePos = getMousePosition(event)
   if (!mousePos) return
 
-  store.setUserSelection(mousePos)
+  rect.value = {
+    width: 0,
+    height: 0,
+    startX: mousePos.x,
+    startY: mousePos.y,
+    x: mousePos.x,
+    y: mousePos.y,
+    draw: true,
+  }
+  store.selectionActive = true
+  store.nodesSelectionActive = false
 }
 
 const onMouseMove = (event: MouseEvent) => {
@@ -18,20 +49,35 @@ const onMouseMove = (event: MouseEvent) => {
   const mousePos = getMousePosition(event)
   if (!mousePos) return
 
-  store.updateUserSelection(mousePos)
+  const startX = rect.value.startX
+  const startY = rect.value.startY
+
+  const nextUserSelectRect: Rect = {
+    ...rect.value,
+    x: mousePos.x < startX ? mousePos.x : rect.value.x,
+    y: mousePos.y < startY ? mousePos.y : rect.value.y,
+    width: Math.abs(mousePos.x - startX),
+    height: Math.abs(mousePos.y - startY),
+  }
+  const selectedNodes = getNodesInside(store.getNodes, rect.value, store.transform)
+  const selectedEdges = getConnectedEdges(selectedNodes, store.getEdges)
+  rect.value = nextUserSelectRect
+  store.addSelectedNodes(selectedNodes)
+  store.addSelectedEdges(selectedEdges)
+  prevNodes.value = selectedNodes.length
+  prevEdges.value = selectedEdges.length
 }
 
 const onMouseUp = () => {
-  store.unsetUserSelection()
+  store.nodesSelectionActive = prevNodes.value > 0
+  reset()
 }
 
 const onMouseLeave = () => {
-  store.unsetUserSelection()
+  store.nodesSelectionActive = false
-  store.unsetNodesSelection()
+  reset()
 }
 
-const userSelectionRect = computed(() => store.userSelectionRect)
-
 useEventListener(el, 'mousedown', onMouseDown)
 useEventListener(el, 'mousemove', onMouseMove)
 useEventListener(el, 'click', onMouseUp)
@@ -44,13 +90,7 @@ export default {
 }
 </script>
 <template>
-  <div ref="user-selection" class="vue-flow__selectionpane">
+  <div ref="user-selection" class="vue-flow__selectionpane vue-flow__container">
-    <SelectionRect
+    <SelectionRect v-if="rect.draw" :width="rect.width" :height="rect.height" :x="rect.x" :y="rect.y" />
-      v-if="userSelectionRect.draw"
-      :width="userSelectionRect.width"
-      :height="userSelectionRect.height"
-      :x="userSelectionRect.x"
-      :y="userSelectionRect.y"
-    />
   </div>
 </template>