fix(editor): Add missing control button events to new canvas (no-chan…

…gelog) (#10471)

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"

packages/editor-ui/src/components/canvas/elements/buttons/CanvasControlButtons.vue

@@ -14,13 +14,28 @@ const props = withDefaults(
 
 const emit = defineEmits<{
 	'reset-zoom': [];
+	'zoom-in': [];
+	'zoom-out': [];
+	'zoom-to-fit': [];
 }>();
 
 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>