4240e76253
* ⚡ Implemented new grid row - banners * ✨ Fixing node creator and executions sidebar position after layout update * 💄 Added configurable round corners to the Callout component * ⚡ Fixing mouse position detection and main tab bar position * ⚡ Implemented basic banner component structure * ⚡ Implemented banner state and dismiss logic * ⚡ Fixing grid layout. Updating banners height state dynamically * ⚡ Fix zoom to fit position, mouse position in demo mode and callout vertical alignment * ⚡ Implementing proper trial banners logic * 💄 Only showing execution usage data once the sidebar is fully expanded * ✨ Implemented permanent/temporary dismiss logic for v1 flag * ⚡ Minor refactoring of banner logic * ⚡ Updating permanent dismiss logic to work with all banners * 👕 Fixing linting errors * ✔️ Updating Callout component test snapshots * 💄 Tweaking zoom to fit position * ✔️ Updating testing endpoints to use new store data * ✅ Added banners unit tests * ✔️ Fixing failing banner tests * ✅ Added more banner tests * ⚡ Updating banners dimensions on resize, removing leftover code * ✔️ Removing store import from API file * 👕 Fixing lint errors * ⚡ Updating migration files * ⚡ Using query parameters in migrations * 👌 Addressing design review feedback * ⚡ Updating upgrade plan button click * ⚡ Updating the migrations syntax * 👌 Updating permanent banner dismiss endpoint and back-end logic * 👌 Refactoring trial banner component and ui store * 👌 Addressing more points from code review * 👌 Moving DOM logic from the store * ✔️ Updated callout component snapshots * 👌 Updating mysql migration file * ✔️ Updating e2e test canvas coordinates after setting it's position to absolute * 👌 Addressing back-end review feedback * 👌 Improving typing around banners * 👕 Fixing lint errors
111 lines
2.2 KiB
Vue
111 lines
2.2 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"
|
|
data-test-id="zoom-to-fit"
|
|
/>
|
|
<n8n-icon-button
|
|
@click="zoomIn"
|
|
type="tertiary"
|
|
size="large"
|
|
:title="$locale.baseText('nodeView.zoomIn')"
|
|
icon="search-plus"
|
|
data-test-id="zoom-in-button"
|
|
/>
|
|
<n8n-icon-button
|
|
@click="zoomOut"
|
|
type="tertiary"
|
|
size="large"
|
|
:title="$locale.baseText('nodeView.zoomOut')"
|
|
icon="search-minus"
|
|
data-test-id="zoom-out-button"
|
|
/>
|
|
<n8n-icon-button
|
|
v-if="nodeViewScale !== 1 && !isDemo"
|
|
@click="resetZoom"
|
|
type="tertiary"
|
|
size="large"
|
|
:title="$locale.baseText('nodeView.resetZoom')"
|
|
icon="undo"
|
|
data-test-id="reset-zoom-button"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onBeforeMount, onBeforeUnmount } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useCanvasStore } from '@/stores/canvas.store';
|
|
|
|
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: var(--spacing-2xl);
|
|
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>
|