From c3e1741a4b8ac4c12cf3678cd41c9aa9ff6c61bd Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 25 Dec 2022 17:24:54 +0100
Subject: [PATCH] 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                 |  2 +-
 examples/vite/src/Basic/Basic.vue             |  2 -
 packages/core/src/container/Pane/Pane.vue     | 41 ++++++++++++++++++-
 .../core/src/container/Viewport/Viewport.vue  |  5 ++-
 .../core/src/container/VueFlow/VueFlow.vue    |  1 -
 packages/core/src/store/state.ts              |  1 -
 packages/core/src/types/flow.ts               |  1 -
 packages/core/src/types/store.ts              |  1 -
 8 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/.changeset/cyan-boxes-beam.md b/.changeset/cyan-boxes-beam.md
index c0f8aaf7..d0e7e0e6 100644
--- a/.changeset/cyan-boxes-beam.md
+++ b/.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.
diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue
index 1c366a56..fd256cc8 100644
--- a/examples/vite/src/Basic/Basic.vue
+++ b/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))
diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue
index 36617aac..03c61341 100644
--- a/packages/core/src/container/Pane/Pane.vue
+++ b/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
 
diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index d81b051e..84d33a04 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/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)) ||
diff --git a/packages/core/src/container/VueFlow/VueFlow.vue b/packages/core/src/container/VueFlow/VueFlow.vue
index 7400e244..c0880eb7 100644
--- a/packages/core/src/container/VueFlow/VueFlow.vue
+++ b/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<{
diff --git a/packages/core/src/store/state.ts b/packages/core/src/store/state.ts
index 7fb5f114..68bf6642 100644
--- a/packages/core/src/store/state.ts
+++ b/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',
diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts
index 84707de6..5b42977b 100644
--- a/packages/core/src/types/flow.ts
+++ b/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
diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts
index 80913085..ab6e922e 100644
--- a/packages/core/src/types/store.ts
+++ b/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