From fadb5c9ae5a78d276ff08cf0b4ef252f0c296b15 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 19 Aug 2024 17:05:47 +0300
Subject: [PATCH] fix(editor): Add missing control button events to new canvas
 (no-changelog) (#10471)

---
 .../src/components/canvas/Canvas.vue          |  2 +-
 .../elements/buttons/CanvasControlButtons.vue | 26 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 460b764548..866bc644f7 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -470,7 +470,7 @@ watch(() => props.readOnly, setReadonly, {
 			:position="controlsPosition"
 			:show-interactive="false"
 			:zoom="zoom"
-			@fit-view="onFitView"
+			@zoom-to-fit="onFitView"
 			@zoom-in="onZoomIn"
 			@zoom-out="onZoomOut"
 			@reset-zoom="onResetZoom"
diff --git a/packages/editor-ui/src/components/canvas/elements/buttons/CanvasControlButtons.vue b/packages/editor-ui/src/components/canvas/elements/buttons/CanvasControlButtons.vue
index bb749c9645..99fe8ec306 100644
--- a/packages/editor-ui/src/components/canvas/elements/buttons/CanvasControlButtons.vue
+++ b/packages/editor-ui/src/components/canvas/elements/buttons/CanvasControlButtons.vue
@@ -14,6 +14,9 @@ const props = withDefaults(
 
 const emit = defineEmits<{
 	'reset-zoom': [];
+	'zoom-in': [];
+	'zoom-out': [];
+	'zoom-to-fit': [];
 }>();
 
 const isResetZoomVisible = computed(() => props.zoom !== 1);
@@ -21,6 +24,18 @@ const isResetZoomVisible = computed(() => props.zoom !== 1);
 function onResetZoom() {
 	emit('reset-zoom');
 }
+
+function onZoomIn() {
+	emit('zoom-in');
+}
+
+function onZoomOut() {
+	emit('zoom-out');
+}
+
+function onZoomToFit() {
+	emit('zoom-to-fit');
+}
 </script>
 <template>
 	<Controls :show-zoom="false" :show-fit-view="false">
@@ -33,6 +48,7 @@ function onResetZoom() {
 				size="large"
 				icon="search-plus"
 				data-test-id="zoom-in-button"
+				@click="onZoomIn"
 			/>
 		</KeyboardShortcutTooltip>
 		<KeyboardShortcutTooltip
@@ -44,13 +60,20 @@ function onResetZoom() {
 				size="large"
 				icon="search-minus"
 				data-test-id="zoom-out-button"
+				@click="onZoomOut"
 			/>
 		</KeyboardShortcutTooltip>
 		<KeyboardShortcutTooltip
 			:label="$locale.baseText('nodeView.zoomToFit')"
 			:shortcut="{ keys: ['1'] }"
 		>
-			<N8nIconButton type="tertiary" size="large" icon="expand" data-test-id="zoom-to-fit" />
+			<N8nIconButton
+				type="tertiary"
+				size="large"
+				icon="expand"
+				data-test-id="zoom-to-fit"
+				@click="onZoomToFit"
+			/>
 		</KeyboardShortcutTooltip>
 		<KeyboardShortcutTooltip
 			v-if="isResetZoomVisible"
@@ -72,5 +95,6 @@ function onResetZoom() {
 .vue-flow__controls {
 	display: flex;
 	gap: var(--spacing-xs);
+	box-shadow: none;
 }
 </style>