refactor(core): remove selectionOnDrag prop and use selectionKeyCode to trigger selection

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

.changeset/cyan-boxes-beam.md

@@ -5,7 +5,7 @@
 Allow customizing the controls of the viewport and the selection box.
 
 ## Props
-- `selectionOnDrag`: Selection box without extra button press (need to set `:pan-on-drag="false"` or `:pan-on-drag="[2]"`[RightClick]).
+- `selectionKeyCode`: You can now set this to `MaybeRef<boolean>` to enable a selection box without extra button press (need to set `:pan-on-drag="false"` or `:pan-on-drag="[2]"`[RightClick]).
 - `panOnDrag`: Can now be a boolean or a number[], this allows you to configure every mouse button as a drag button. [1, 2] would mean that you can drag via middle and right mouse button.
 - `panActivationKeyCode`: Key code (or KeyFilter) for activating dragging (useful when using selectionOnDrag).
 - `selectionMode`: You can choose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select.

examples/vite/src/Basic/Basic.vue

@@ -19,8 +19,6 @@ const { onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFl
   maxZoom: 4,
   connectOnClick: true,
   fitViewOnInit: false,
-  selectionOnDrag: true,
-  panOnDrag: [2],
 })
 
 onNodeDragStop((e) => console.log('drag stop', e))

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
+import type { GraphNode } from '../../types'
 import { SelectionMode } from '../../types'
 import { getMousePosition } from './utils'
 
@@ -20,7 +21,13 @@ const {
   elementsSelectable,
   nodesSelectionActive,
   addSelectedElements,
+  getSelectedEdges,
+  removeNodes,
+  removeEdges,
   selectionMode,
+  deleteKeyCode,
+  multiSelectionKeyCode,
+  multiSelectionActive,
 } = useVueFlow()
 
 const container = ref<HTMLDivElement | null>(null)
@@ -33,7 +40,39 @@ const containerBounds = ref<DOMRect>()
 
 const hasActiveSelection = computed(() => elementsSelectable.value && (isSelecting || userSelectionActive.value))
 
-const resetUserSelection = () => {
+useKeyPress(deleteKeyCode, (keyPressed) => {
+  if (!keyPressed) return
+
+  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) {
+      res.push(node)
+    }
+
+    return res
+  }, [])
+
+  if (nodesToRemove || getSelectedEdges.value) {
+    if (getSelectedEdges.value.length > 0) {
+      removeEdges(getSelectedEdges.value)
+    }
+
+    if (nodesToRemove.length > 0) {
+      removeNodes(nodesToRemove)
+    }
+
+    nodesSelectionActive.value = false
+
+    removeSelectedElements()
+  }
+})
+
+useKeyPress(multiSelectionKeyCode, (keyPressed) => {
+  multiSelectionActive.value = keyPressed
+})
+
+function resetUserSelection() {
   userSelectionActive.value = false
   userSelectionRect.value = null
 

packages/core/src/container/Viewport/Viewport.vue

@@ -32,7 +32,6 @@ const {
   connectionStartHandle,
   userSelectionActive,
   paneDragging,
-  selectionOnDrag,
 } = $(useVueFlow())
 
 const viewportEl = ref<HTMLDivElement>()
@@ -52,7 +51,9 @@ const isConnecting = $computed(() => !!connectionStartHandle)
 
 const shouldPanOnDrag = computed(() => !selectionKeyPressed && panOnDrag && panKeyPressed.value)
 
-const isSelecting = computed(() => selectionKeyPressed || (selectionOnDrag && shouldPanOnDrag.value !== true))
+const isSelecting = computed(
+  () => (selectionKeyCode !== true && selectionKeyPressed) || (selectionKeyCode === true && shouldPanOnDrag.value !== true),
+)
 
 const viewChanged = (prevViewport: ViewportTransform, eventTransform: ZoomTransform): boolean =>
   (prevViewport.x !== eventTransform.x && !isNaN(eventTransform.x)) ||

packages/core/src/container/VueFlow/VueFlow.vue

@@ -42,7 +42,6 @@ const props = withDefaults(defineProps<FlowProps>(), {
   disableKeyboardA11y: undefined,
   edgesFocusable: undefined,
   nodesFocusable: undefined,
-  selectionOnDrag: undefined,
 })
 
 const emit = defineEmits<{

packages/core/src/store/state.ts

@@ -98,7 +98,6 @@ const defaultState = (): State => ({
   nodesDraggable: true,
   elementsSelectable: true,
   selectNodesOnDrag: true,
-  selectionOnDrag: false,
   multiSelectionActive: false,
   selectionKeyCode: 'Shift',
   multiSelectionKeyCode: 'Meta',

packages/core/src/types/flow.ts

@@ -146,7 +146,6 @@ export interface FlowProps {
   zoomOnDoubleClick?: boolean
   /** enable this to prevent vue flow from scrolling inside the container, i.e. allow for the page to scroll */
   preventScrolling?: boolean
-  selectionOnDrag?: boolean
   selectionMode?: SelectionMode
   edgeUpdaterRadius?: number
   fitViewOnInit?: boolean

packages/core/src/types/store.ts

@@ -99,7 +99,6 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   selectNodesOnDrag: boolean
 
   userSelectionRect: SelectionRect | null
-  selectionOnDrag: boolean
   selectionMode: SelectionMode
   panOnDrag: boolean | number[]
   zoomOnScroll: boolean