admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-21 20:00:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): Encapsulate canvas actions (#4416)

Browse Source 
* 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
This commit is contained in:
Csaba Tuncsik
2022-11-07 09:53:27 +01:00
committed by GitHub
parent 4517c4a90a
commit 350b356271
5 changed files with 266 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
packages/editor-ui/src/components/CanvasControls.vue Normal file
View File

@@ -0,0 +1,81 @@
<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>

9
packages/editor-ui/src/components/mixins/moveNodeWorkflow.ts
View File

@@ -1,6 +1,4 @@
import mixins from 'vue-typed-mixins';
// @ts-ignore
import normalizeWheel from 'normalize-wheel';
import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
import { getMousePosition } from '@/views/canvasHelpers';
import { mapStores } from 'pinia';
@@ -88,12 +86,5 @@ export const moveNodeWorkflow = mixins(
this.moveWorkflow(e);
},
wheelMoveWorkflow (e: WheelEvent) {
const normalized = normalizeWheel(e);
const offsetPosition = this.uiStore.nodeViewOffsetPosition;
const nodeViewOffsetPositionX = offsetPosition[0] - (e.shiftKey ? normalized.pixelY : normalized.pixelX);
const nodeViewOffsetPositionY = offsetPosition[1] - (e.shiftKey ? normalized.pixelX : normalized.pixelY);
this.uiStore.nodeViewOffsetPosition = [nodeViewOffsetPositionX, nodeViewOffsetPositionY];
},
},
});