refactor(core): rename core pkg dir to core

packages/core/src/components/UserSelection/SelectionRect.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+const { width, height, x, y } = defineProps<{
+  width: number
+  height: number
+  x: number
+  y: number
+}>()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SelectionRect',
+}
+</script>
+
+<template>
+  <div
+    class="vue-flow__selection"
+    :style="{
+      width: `${width}px`,
+      height: `${height}px`,
+      transform: `translate(${x}px, ${y}px)`,
+    }"
+  />
+</template>

packages/core/src/components/UserSelection/UserSelection.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { useVueFlow } from '../../composables'
+import type { SelectionRect as Rect } from '../../types'
+import { getConnectedEdges, getNodesInside } from '../../utils'
+import SelectionRect from './SelectionRect.vue'
+import { getMousePosition } from './utils'
+
+const { userSelectionActive, nodesSelectionActive, getNodes, getEdges, viewport, addSelectedEdges, addSelectedNodes } =
+  useVueFlow()
+
+let prevNodes = $ref(0)
+
+let prevEdges = $ref(0)
+
+const initialRect = () => ({
+  width: 0,
+  height: 0,
+  startX: 0,
+  startY: 0,
+  x: 0,
+  y: 0,
+  draw: false,
+})
+
+let rect = $ref<Rect>(initialRect())
+
+const reset = () => {
+  rect = initialRect()
+  prevNodes = 0
+  prevEdges = 0
+
+  userSelectionActive.value = false
+}
+
+const onMouseDown = (event: MouseEvent) => {
+  const mousePos = getMousePosition(event)
+  if (!mousePos) return
+
+  rect = {
+    width: 0,
+    height: 0,
+    startX: mousePos.x,
+    startY: mousePos.y,
+    x: mousePos.x,
+    y: mousePos.y,
+    draw: true,
+  }
+
+  userSelectionActive.value = true
+  nodesSelectionActive.value = true
+}
+
+const onMouseMove = (event: MouseEvent) => {
+  if (!userSelectionActive || !rect.draw) return
+
+  const mousePos = getMousePosition(event)
+  if (!mousePos) return
+
+  const startX = rect.startX
+  const startY = rect.startY
+
+  const nextUserSelectRect: Rect = {
+    ...rect,
+    x: mousePos.x < startX ? mousePos.x : rect.x,
+    y: mousePos.y < startY ? mousePos.y : rect.y,
+    width: Math.abs(mousePos.x - startX),
+    height: Math.abs(mousePos.y - startY),
+  }
+
+  const selectedNodes = getNodesInside(getNodes.value, rect, viewport.value)
+  const selectedEdges = getConnectedEdges(selectedNodes, getEdges.value)
+
+  rect = nextUserSelectRect
+
+  addSelectedNodes(selectedNodes)
+  addSelectedEdges(selectedEdges)
+
+  prevNodes = selectedNodes.length
+  prevEdges = selectedEdges.length
+}
+
+const onMouseUp = () => {
+  rect = initialRect()
+
+  nodesSelectionActive.value = prevNodes > 0
+  userSelectionActive.value = false
+}
+
+const onMouseLeave = () => {
+  nodesSelectionActive.value = prevNodes > 0
+
+  reset()
+}
+
+onBeforeUnmount(reset)
+</script>
+
+<script lang="ts">
+export default {
+  name: 'UserSelection',
+}
+</script>
+
+<template>
+  <div
+    class="vue-flow__selectionpane vue-flow__container"
+    @mousedown="onMouseDown"
+    @mousemove="onMouseMove"
+    @click="onMouseUp"
+    @mouseup="onMouseUp"
+    @mouseleave="onMouseLeave"
+  >
+    <SelectionRect v-if="rect.draw" :width="rect.width" :height="rect.height" :x="rect.x" :y="rect.y" />
+  </div>
+</template>

packages/core/src/components/UserSelection/utils.ts

@@ -0,0 +1,13 @@
+import type { XYPosition } from '../../types'
+
+export function getMousePosition(event: MouseEvent): XYPosition | void {
+  const flowNode = (event.target as Element).closest('.vue-flow')
+  if (!flowNode) return
+
+  const containerBounds = flowNode.getBoundingClientRect()
+
+  return {
+    x: event.clientX - containerBounds.left,
+    y: event.clientY - containerBounds.top,
+  }
+}