fix(core): allow pan on drag for non left-btn when selectionKeyCode i…

…s `true` (#1662) * fix(core): allow pan on drag for non left-btn when selection key code is true Signed-off-by: braks <[email protected]> * fix(core): reorder pane class names Signed-off-by: braks <[email protected]> * chore(changeset): add Signed-off-by: braks <[email protected]> * chore(core): cleanup Signed-off-by: braks <[email protected]> --------- Signed-off-by: braks <[email protected]>
bcakmakoglu · Nov 1, 2024 · a41bd7b · a41bd7b
1 parent 94d99bf
commit a41bd7b
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 8 deletions.
diff --git a/.changeset/empty-falcons-obey.md b/.changeset/empty-falcons-obey.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Reorder pane class names to allow dragging cursor when selection mode is permanently enabled
diff --git a/.changeset/nasty-panthers-admire.md b/.changeset/nasty-panthers-admire.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Allow pan on drag when selectionKeyCode is `true` but panOnDrag key is not left mouse btn
diff --git a/packages/core/src/composables/useKeyPress.ts b/packages/core/src/composables/useKeyPress.ts
@@ -75,7 +75,7 @@ function useKeyOrCode(code: string, keysToWatch: string | string[]) {
  * @param keyFilter - Can be a boolean, a string, an array of strings or a function that returns a boolean. If it's a boolean, it will act as if the key is always pressed. If it's a string, it will return true if a key matching that string is pressed. If it's an array of strings, it will return true if any of the strings match a key being pressed, or a combination (e.g. ['ctrl+a', 'ctrl+b'])
  * @param options - Options object
  */
-export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | null>, options?: UseKeyPressOptions) {
+export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | boolean | null>, options?: UseKeyPressOptions) {
   const actInsideInputWithModifier = toRef(() => toValue(options?.actInsideInputWithModifier) ?? false)
 
   const target = toRef(() => toValue(options?.target) ?? window)
@@ -149,7 +149,7 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | null>, optio
     isPressed.value = false
   }
 
-  function createKeyFilterFn(keyFilter: KeyFilter | null) {
+  function createKeyFilterFn(keyFilter: KeyFilter | boolean | null) {
     // if the keyFilter is null, we just set the isPressed value to false
     if (keyFilter === null) {
       reset()

diff --git a/packages/core/src/style.css b/packages/core/src/style.css
@@ -22,13 +22,13 @@
      cursor: grab;
    }
 
-  &.dragging {
-     cursor: grabbing;
-   }
-
   &.selection {
      cursor: pointer;
    }
+
+  &.dragging {
+    cursor: grabbing;
+  }
 }
 
 .vue-flow__transformationpane {

diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts
@@ -162,7 +162,7 @@ export interface FlowProps {
   connectionRadius?: number
   isValidConnection?: ValidConnectionFunc | null
   deleteKeyCode?: KeyFilter | null
-  selectionKeyCode?: KeyFilter | null
+  selectionKeyCode?: KeyFilter | boolean | null
   multiSelectionKeyCode?: KeyFilter | null
   zoomActivationKeyCode?: KeyFilter | null
   panActivationKeyCode?: KeyFilter | null

diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts
@@ -83,7 +83,7 @@ export interface State extends Omit<FlowProps, 'id' | 'modelValue'> {
   multiSelectionActive: boolean
 
   deleteKeyCode: KeyFilter | null
-  selectionKeyCode: KeyFilter | null
+  selectionKeyCode: KeyFilter | boolean | null
   multiSelectionKeyCode: KeyFilter | null
   zoomActivationKeyCode: KeyFilter | null
   panActivationKeyCode: KeyFilter | null