From fe552fc5c5843a67e38da0054598f9451ef76d95 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 1 Nov 2024 09:20:59 +0100 Subject: [PATCH] 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 | 5 +++++ .changeset/nasty-panthers-admire.md | 5 +++++ packages/core/src/composables/useKeyPress.ts | 4 ++-- packages/core/src/style.css | 8 ++++---- packages/core/src/types/flow.ts | 2 +- packages/core/src/types/store.ts | 2 +- 6 files changed, 18 insertions(+), 8 deletions(-) create mode 100644 .changeset/empty-falcons-obey.md create mode 100644 .changeset/nasty-panthers-admire.md diff --git a/.changeset/empty-falcons-obey.md b/.changeset/empty-falcons-obey.md new file mode 100644 index 00000000..e607799b --- /dev/null +++ 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 new file mode 100644 index 00000000..75fcafc4 --- /dev/null +++ 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 index 750c17d6..0f776d9d 100644 --- 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, options?: UseKeyPressOptions) { +export function useKeyPress(keyFilter: MaybeRefOrGetter, 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, 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 index 8c081a9b..f2512de4 100644 --- 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 index 2160060a..4ea8134a 100644 --- 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 index d3a0354f..0fd614f8 100644 --- a/packages/core/src/types/store.ts +++ b/packages/core/src/types/store.ts @@ -83,7 +83,7 @@ export interface State extends Omit { multiSelectionActive: boolean deleteKeyCode: KeyFilter | null - selectionKeyCode: KeyFilter | null + selectionKeyCode: KeyFilter | boolean | null multiSelectionKeyCode: KeyFilter | null zoomActivationKeyCode: KeyFilter | null panActivationKeyCode: KeyFilter | null