update(script-setup): Refactor remaining files to script setup style

src/components/UserSelection/SelectionRect.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+interface SelectionRectProps {
+  width: number
+  height: number
+  x: number
+  y: number
+}
+
+const props = defineProps<SelectionRectProps>()
+</script>
+<template>
+  <div
+    class="revue-flow__selection"
+    :style="{
+      width: `${props.width}px`,
+      height: `${props.height}px`,
+      transform: `translate(${props.x}px, ${props.y}px)`,
+    }"
+  />
+</template>

src/components/UserSelection/UserSelection.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import SelectionRect from './SelectionRect.vue'
+import { RevueFlowStore } from '~/types'
+import { getMousePosition } from '~/components/UserSelection/utils'
+
+const store = inject<RevueFlowStore>('store')!
+const el = templateRef('user-selection', null)
+
+const onMouseDown = (event: MouseEvent) => {
+  const mousePos = getMousePosition(event)
+  if (!mousePos) {
+    return
+  }
+
+  store.setUserSelection(mousePos)
+}
+
+const onMouseMove = (event: MouseEvent) => {
+  if (!store.selectionActive) {
+    return
+  }
+  const mousePos = getMousePosition(event)
+  if (!mousePos) {
+    return
+  }
+
+  store.updateUserSelection(mousePos)
+}
+
+const onMouseUp = () => {
+  store.unsetUserSelection()
+}
+
+const onMouseLeave = () => {
+  store.unsetUserSelection()
+  store.unsetNodesSelection()
+}
+
+useEventListener(el, 'mousedown', onMouseDown)
+useEventListener(el, 'mousemove', onMouseMove)
+useEventListener(el, 'click', onMouseUp)
+useEventListener(el, 'mouseup', onMouseUp)
+useEventListener(el, 'mouseleave', onMouseLeave)
+
+const userSelectionRect = computed(() => store.userSelectionRect)
+</script>
+<template>
+  <div ref="user-selection" class="revue-flow__selectionpane">
+    <SelectionRect
+      v-if="userSelectionRect.draw"
+      :width="userSelectionRect.width"
+      :height="userSelectionRect.height"
+      :x="userSelectionRect.x"
+      :y="userSelectionRect.y"
+    />
+  </div>
+</template>

src/components/UserSelection/utils.ts

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