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

feat(editor): Migrate moveNodeWorkflow mixin to useCanvasPanning composable (#8322)

Browse Source
This commit is contained in:
Alex Grozav
2024-01-19 16:27:44 +02:00
committed by GitHub
parent 75d3ecca1c
commit b6d775768f
5 changed files with 279 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/editor-ui/src/views/NodeView.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="$style['content']">
<div :class="$style['content']" ref="nodeViewRootRef">
<div
id="node-view-root"
class="node-view-root do-not-select"
@@ -14,7 +14,7 @@
data-test-id="node-view-wrapper"
@touchstart="mouseDown"
@touchend="mouseUp"
@touchmove="mouseMoveNodeWorkflow"
@touchmove="canvasPanning.onMouseMove"
@mousedown="mouseDown"
@mouseup="mouseUp"
@contextmenu="contextMenu.open"
@@ -28,7 +28,7 @@
/>
<div
id="node-view"
ref="nodeView"
ref="nodeViewRef"
class="node-view"
:style="workflowStyle"
data-test-id="node-view"
@@ -197,7 +197,7 @@
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent, nextTick } from 'vue';
import { defineAsyncComponent, defineComponent, nextTick, ref } from 'vue';
import { mapStores, storeToRefs } from 'pinia';
import type {
@@ -244,7 +244,6 @@ import {
UPDATE_WEBHOOK_ID_NODE_TYPES,
TIME,
} from '@/constants';
import { moveNodeWorkflow } from '@/mixins/moveNodeWorkflow';
import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
import { useNodeHelpers } from '@/composables/useNodeHelpers';
@@ -378,6 +377,7 @@ import { usePinnedData } from '@/composables/usePinnedData';
import { useSourceControlStore } from '@/stores/sourceControl.store';
import { useDeviceSupport } from 'n8n-design-system';
import { useDebounce } from '@/composables/useDebounce';
import { useCanvasPanning } from '@/composables/useCanvasPanning';
interface AddNodeOptions {
position?: XYPosition;
@@ -409,7 +409,7 @@ export default defineComponent({
ContextMenu,
SetupWorkflowCredentialsButton,
},
mixins: [moveNodeWorkflow, workflowHelpers, workflowRun],
mixins: [workflowHelpers, workflowRun],
async beforeRouteLeave(to, from, next) {
if (
getNodeViewTab(to) === MAIN_HEADER_TABS.EXECUTIONS ||
@@ -471,6 +471,10 @@ export default defineComponent({
}
},
setup(props, ctx) {
const nodeViewRootRef = ref(null);
const nodeViewRef = ref(null);
const onMouseMoveEnd = ref(null);
const ndvStore = useNDVStore();
const externalHooks = useExternalHooks();
const locale = useI18n();
@@ -482,6 +486,7 @@ export default defineComponent({
const pinnedData = usePinnedData(activeNode);
const deviceSupport = useDeviceSupport();
const { callDebounced } = useDebounce();
const canvasPanning = useCanvasPanning(nodeViewRootRef, { onMouseMoveEnd });
return {
locale,
@@ -492,6 +497,10 @@ export default defineComponent({
clipboard,
pinnedData,
deviceSupport,
canvasPanning,
nodeViewRootRef,
nodeViewRef,
onMouseMoveEnd,
callDebounced,
...useCanvasMouseSelect(),
...useGlobalLinkActions(),
@@ -558,7 +567,7 @@ export default defineComponent({
this.canvasStore.setRecenteredCanvasAddButtonPosition(this.getNodeViewOffsetPosition);
},
nodeViewScale(newScale) {
const elementRef = this.$refs.nodeView as HTMLDivElement | undefined;
const elementRef = this.nodeViewRef as HTMLDivElement | undefined;
if (elementRef) {
elementRef.style.transform = `scale(${newScale})`;
}
@@ -778,8 +787,11 @@ export default defineComponent({
};
},
async mounted() {
// To be refactored (unref) when migrating to composition API
this.onMouseMoveEnd = this.mouseUp;
this.resetWorkspace();
this.canvasStore.initInstance(this.$refs.nodeView as HTMLElement);
this.canvasStore.initInstance(this.nodeViewRef as HTMLElement);
this.titleReset();
window.addEventListener('message', this.onPostMessageReceived);
@@ -1411,7 +1423,7 @@ export default defineComponent({
}
this.mouseDownMouseSelect(e as MouseEvent, this.moveCanvasKeyPressed);
this.mouseDownMoveWorkflow(e as MouseEvent, this.moveCanvasKeyPressed);
this.canvasPanning.onMouseDown(e as MouseEvent, this.moveCanvasKeyPressed);
// Hide the node-creator
this.createNodeActive = false;
@@ -1421,7 +1433,7 @@ export default defineComponent({
this.moveCanvasKeyPressed = false;
}
this.mouseUpMouseSelect(e);
this.mouseUpMoveWorkflow(e);
this.canvasPanning.onMouseUp(e);
},
keyUp(e: KeyboardEvent) {
if (e.key === this.deviceSupport.controlKeyCode) {