From 77bd26973083787762dfbf8d4cf7645e3edc021f Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 4 Sep 2024 17:46:40 +0300
Subject: [PATCH 1/2] feat: change selection to be default canvas behaviour

---
 .../src/components/canvas/Canvas.vue          | 50 ++++++++++++++-----
 .../src/styles/plugins/_vueflow.scss          |  4 --
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 841028fa05ef0..9399da35fdc98 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -30,6 +30,7 @@ import type { PinDataSource } from '@/composables/usePinnedData';
 import { isPresent } from '@/utils/typesUtils';
 import { GRID_SIZE } from '@/utils/nodeViewUtils';
 import { CanvasKey } from '@/constants';
+import { onKeyDown, onKeyUp } from '@vueuse/core';
 
 const $style = useCssModule();
 
@@ -107,12 +108,30 @@ const {
 	findNode,
 } = useVueFlow({ id: props.id, deleteKeyCode: null });
 
+const isPaneReady = ref(false);
+
+const classes = computed(() => ({
+	[$style.canvas]: true,
+	[$style.ready]: isPaneReady.value,
+	[$style.draggable]: isPanningEnabled.value,
+}));
+
 /**
  * Key bindings
  */
 
 const disableKeyBindings = computed(() => !props.keyBindings);
 
+const isPanningEnabled = ref(false);
+
+onKeyDown('Shift', () => {
+	isPanningEnabled.value = true;
+});
+
+onKeyUp('Shift', () => {
+	isPanningEnabled.value = false;
+});
+
 useKeybindings(
 	{
 		ctrl_c: emitWithSelectedNodes((ids) => emit('copy:nodes', ids)),
@@ -138,20 +157,14 @@ useKeybindings(
 	{ disabled: disableKeyBindings },
 );
 
-const contextMenu = useContextMenu();
+/**
+ * Nodes
+ */
 
 const lastSelectedNode = computed(() => selectedNodes.value[selectedNodes.value.length - 1]);
-
 const hasSelection = computed(() => selectedNodes.value.length > 0);
-
 const selectedNodeIds = computed(() => selectedNodes.value.map((node) => node.id));
 
-const paneReady = ref(false);
-
-/**
- * Nodes
- */
-
 function onClickNodeAdd(id: string, handle: string) {
 	emit('click:node:add', id, handle);
 }
@@ -343,6 +356,8 @@ function setReadonly(value: boolean) {
  * Context menu
  */
 
+const contextMenu = useContextMenu();
+
 function onOpenContextMenu(event: MouseEvent) {
 	contextMenu.open(event, {
 		source: 'canvas',
@@ -417,7 +432,7 @@ onUnmounted(() => {
 
 onPaneReady(async () => {
 	await onFitView();
-	paneReady.value = true;
+	isPaneReady.value = true;
 });
 
 watch(() => props.readOnly, setReadonly, {
@@ -444,7 +459,10 @@ provide(CanvasKey, {
 		:snap-grid="[GRID_SIZE, GRID_SIZE]"
 		:min-zoom="0.2"
 		:max-zoom="4"
-		:class="[$style.canvas, { [$style.visible]: paneReady }]"
+		:class="classes"
+		:selection-key-code="isPanningEnabled ? null : true"
+		:select-nodes-on-drag="true"
+		pan-activation-key-code="Shift"
 		data-test-id="canvas"
 		@edge-mouse-enter="onMouseEnterEdge"
 		@edge-mouse-leave="onMouseLeaveEdge"
@@ -524,8 +542,16 @@ provide(CanvasKey, {
 .canvas {
 	opacity: 0;
 
-	&.visible {
+	&.ready {
 		opacity: 1;
 	}
+
+	&.draggable :global(.vue-flow__pane) {
+		cursor: grab;
+	}
+
+	:global(.vue-flow__pane.dragging) {
+		cursor: grabbing;
+	}
 }
 </style>
diff --git a/packages/editor-ui/src/styles/plugins/_vueflow.scss b/packages/editor-ui/src/styles/plugins/_vueflow.scss
index 3f0eff92a9e33..42fbd391e820b 100644
--- a/packages/editor-ui/src/styles/plugins/_vueflow.scss
+++ b/packages/editor-ui/src/styles/plugins/_vueflow.scss
@@ -29,10 +29,6 @@
 	&.draggable {
 		cursor: default;
 	}
-
-	&.dragging {
-		cursor: grabbing;
-	}
 }
 
 .vue-flow__node {

From 90a85160b43cb4194bef050e79dcf346c79b0806 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 4 Sep 2024 17:53:34 +0300
Subject: [PATCH 2/2] feat: extract keycode to variables

---
 packages/editor-ui/src/components/canvas/Canvas.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 9399da35fdc98..26382c3b81d91 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -122,13 +122,14 @@ const classes = computed(() => ({
 
 const disableKeyBindings = computed(() => !props.keyBindings);
 
+const panningKeyCode = 'Shift';
 const isPanningEnabled = ref(false);
 
-onKeyDown('Shift', () => {
+onKeyDown(panningKeyCode, () => {
 	isPanningEnabled.value = true;
 });
 
-onKeyUp('Shift', () => {
+onKeyUp(panningKeyCode, () => {
 	isPanningEnabled.value = false;
 });
 
@@ -161,6 +162,7 @@ useKeybindings(
  * Nodes
  */
 
+const selectionKeyCode = computed(() => (isPanningEnabled.value ? null : true));
 const lastSelectedNode = computed(() => selectedNodes.value[selectedNodes.value.length - 1]);
 const hasSelection = computed(() => selectedNodes.value.length > 0);
 const selectedNodeIds = computed(() => selectedNodes.value.map((node) => node.id));
@@ -460,9 +462,8 @@ provide(CanvasKey, {
 		:min-zoom="0.2"
 		:max-zoom="4"
 		:class="classes"
-		:selection-key-code="isPanningEnabled ? null : true"
-		:select-nodes-on-drag="true"
-		pan-activation-key-code="Shift"
+		:selection-key-code="selectionKeyCode"
+		:pan-activation-key-code="panningKeyCode"
 		data-test-id="canvas"
 		@edge-mouse-enter="onMouseEnterEdge"
 		@edge-mouse-leave="onMouseLeaveEdge"