350b356271
* feat(editor): encapsulating canvas actions * fiz(editor): zoomToFit * fiz(editor): zoomToFit * fiz(editor): fix imoprts in canvas controls * fiz(editor): fix imports in node view * fiz(editor): remove unused props from canvas controls * fiz(editor): fix zoomToFit functionality * fiz(editor): move more functions from NodeView to canvas store * chore(editor): code formatting fixes * fix(editor): adding back some lost refactoring after merge * fix(editor): remove console.log * fix(editor): add missing canvasAddButtonPosition * fix(editor): modify root store env query * fix(editor): modify canvas control position styling * fix(editor): modify canvas control position styling * fix(editor): roll back process.env * fix(editor): fix canvas controls positioning * fix(editor): fix canvas controls positioning * fix(editor): adopting new styles after merge * fix(editor): not storing html element in the store * fix(editor): remove unused variables * fix(editor): update canvas controls after conflict resolution * fix(editor): revert main.ts to reduce change noise * fix(editor): remove old store commit * fix(editor): simplify canvas store * fix(editor): reposition execute workflow button in mobile view * fix(editor): fox mouse scroll zoom in canvas * fix(editor): move canvas scroll handling into canvas controls
82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
<template>
|
|
<div
|
|
:class="{ [$style.zoomMenu]: true, [$style.regularZoomMenu]: !isDemo, [$style.demoZoomMenu]: isDemo }">
|
|
<n8n-icon-button @click="zoomToFit" type="tertiary" size="large" :title="$locale.baseText('nodeView.zoomToFit')"
|
|
icon="expand" />
|
|
<n8n-icon-button @click="zoomIn" type="tertiary" size="large" :title="$locale.baseText('nodeView.zoomIn')"
|
|
icon="search-plus" />
|
|
<n8n-icon-button @click="zoomOut" type="tertiary" size="large" :title="$locale.baseText('nodeView.zoomOut')"
|
|
icon="search-minus" />
|
|
<n8n-icon-button v-if="nodeViewScale !== 1 && !isDemo" @click="resetZoom" type="tertiary" size="large"
|
|
:title="$locale.baseText('nodeView.resetZoom')" icon="undo" />
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onBeforeMount, onBeforeUnmount } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useCanvasStore } from '@/stores/canvas';
|
|
|
|
const canvasStore = useCanvasStore();
|
|
const { zoomToFit, zoomIn, zoomOut, resetZoom } = canvasStore;
|
|
const { nodeViewScale, isDemo } = storeToRefs(canvasStore);
|
|
|
|
const keyDown = (e: KeyboardEvent) => {
|
|
const isCtrlKeyPressed = e.metaKey || e.ctrlKey;
|
|
if ((e.key === '=' || e.key === '+') && !isCtrlKeyPressed) {
|
|
zoomIn();
|
|
} else if ((e.key === '_' || e.key === '-') && !isCtrlKeyPressed) {
|
|
zoomOut();
|
|
} else if ((e.key === '0') && !isCtrlKeyPressed) {
|
|
resetZoom();
|
|
} else if ((e.key === '1') && !isCtrlKeyPressed) {
|
|
zoomToFit();
|
|
}
|
|
};
|
|
|
|
onBeforeMount(() => {
|
|
document.addEventListener('keydown', keyDown);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
document.removeEventListener('keydown', keyDown);
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.zoomMenu {
|
|
position: absolute;
|
|
width: 210px;
|
|
bottom: 108px;
|
|
left: 35px;
|
|
line-height: 25px;
|
|
color: #444;
|
|
padding-right: 5px;
|
|
|
|
button {
|
|
border: var(--border-base);
|
|
}
|
|
|
|
>* {
|
|
+* {
|
|
margin-left: var(--spacing-3xs);
|
|
}
|
|
|
|
&:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.regularZoomMenu {
|
|
@media (max-width: $breakpoint-2xs) {
|
|
bottom: 90px;
|
|
}
|
|
}
|
|
|
|
.demoZoomMenu {
|
|
left: 10px;
|
|
bottom: 10px;
|
|
}
|
|
</style>
|