fix(core): allow pan on drag for non left-btn when selectionKeyCode is true (#1662)

* fix(core): allow pan on drag for non left-btn when selection key code is true

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

* fix(core): reorder pane class names

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

* chore(changeset): add

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

* chore(core): cleanup

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

---------

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

.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

.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

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()

packages/core/src/style.css

@@ -22,13 +22,13 @@
      cursor: grab;
    }
 
-  &.dragging {
-     cursor: grabbing;
-   }
-
   &.selection {
      cursor: pointer;
    }
+
+  &.dragging {
+    cursor: grabbing;
+  }
 }
 
 .vue-flow__transformationpane {

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

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