mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-11 21:07:28 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Add missing control button events to new canvas (no-changelog) (#10471)

Browse source
This commit is contained in:
Alex Grozav 2024-08-19 17:05:47 +03:00 committed by GitHub
parent 973956cc26
commit fadb5c9ae5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 26 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/editor-ui/src/components/canvas/Canvas.vue
View file

@ -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"

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

@ -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>