mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-10 14:44:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Fix duplicate NodeView keys when navigating between routes (no-changelog) (#5325)

Browse source 
* refactor(editor): Fix duplicate NodeView keys when navigating between routes (no-changelog)

* Prettier fixes

* Use computed to export jsPlumb instance from canvas

* Force jsPlumb computed instance type
This commit is contained in:
OlegIvaniv 2023-02-02 09:05:14 +01:00 committed by GitHub
parent 8f5f1c3aa5
commit 96ec5bc880
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/editor-ui/src/mixins/mouseSelect.ts
View file

@ -203,12 +203,12 @@ export const mouseSelect = mixins(deviceSupportHelpers).extend({
nodeDeselected(node: INodeUi) {
this.uiStore.removeNodeFromSelection(node);
// @ts-ignore
this.instance.removeFromDragSelection(this.$refs[`node-${node.id}`][0].$el);
this.instance.removeFromDragSelection(this.instance.getManagedElement(node?.id));
},
nodeSelected(node: INodeUi) {
this.uiStore.addSelectedNode(node);
// @ts-ignore
this.instance.addToDragSelection(this.$refs[`node-${node.id}`][0].$el);
this.instance.addToDragSelection(this.instance.getManagedElement(node?.id));
},
deselectAllNodes() {
// @ts-ignore

22
packages/editor-ui/src/stores/canvas.ts
View file

@ -8,7 +8,7 @@ import { useUIStore } from '@/stores/ui';
import { useHistoryStore } from '@/stores/history';
import { INodeUi, XYPosition } from '@/Interface';
import { scaleBigger, scaleReset, scaleSmaller } from '@/utils';
import { START_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
import { START_NODE_TYPE } from '@/constants';
import type {
BeforeStartEventParams,
BrowserJsPlumbInstance,
@ -37,7 +37,7 @@ export const useCanvasStore = defineStore('canvas', () => {
const uiStore = useUIStore();
const historyStore = useHistoryStore();
const jsPlumbInstance = ref<BrowserJsPlumbInstance>();
const jsPlumbInstanceRef = ref<BrowserJsPlumbInstance>();
const isDragging = ref<boolean>(false);
const nodes = computed<INodeUi[]>(() => workflowStore.allNodes);
@ -78,7 +78,7 @@ export const useCanvasStore = defineStore('canvas', () => {
const setZoomLevel = (zoomLevel: number, offset: XYPosition) => {
nodeViewScale.value = zoomLevel;
jsPlumbInstance.value?.setZoom(zoomLevel);
jsPlumbInstanceRef.value?.setZoom(zoomLevel);
uiStore.nodeViewOffsetPosition = offset;
};
@ -143,13 +143,13 @@ export const useCanvasStore = defineStore('canvas', () => {
function initInstance(container: Element) {
// Make sure to clean-up previous instance if it exists
if (jsPlumbInstance.value) {
jsPlumbInstance.value.destroy();
jsPlumbInstance.value.reset();
jsPlumbInstance.value = undefined;
if (jsPlumbInstanceRef.value) {
jsPlumbInstanceRef.value.destroy();
jsPlumbInstanceRef.value.reset();
jsPlumbInstanceRef.value = undefined;
}
jsPlumbInstance.value = newInstance({
jsPlumbInstanceRef.value = newInstance({
container,
connector: CONNECTOR_FLOWCHART_TYPE,
resizeObserver: false,
@ -168,7 +168,7 @@ export const useCanvasStore = defineStore('canvas', () => {
// Only the node which gets dragged directly gets an event, for all others it is
// undefined. So check if the currently dragged node is selected and if not clear
// the drag-selection.
jsPlumbInstance.value?.clearDragSelection();
jsPlumbInstanceRef.value?.clearDragSelection();
uiStore.resetSelectedNodes();
}
@ -231,7 +231,7 @@ export const useCanvasStore = defineStore('canvas', () => {
filter: '.node-description, .node-description .node-name, .node-description .node-subtitle',
},
});
jsPlumbInstance.value?.setDragConstrainFunction((pos: PointXY) => {
jsPlumbInstanceRef.value?.setDragConstrainFunction((pos: PointXY) => {
const isReadOnly = uiStore.isReadOnlyView;
if (isReadOnly) {
// Do not allow to move nodes in readOnly mode
@ -240,6 +240,8 @@ export const useCanvasStore = defineStore('canvas', () => {
return pos;
});
}
const jsPlumbInstance = computed(() => jsPlumbInstanceRef.value as BrowserJsPlumbInstance);
return {
isDemo,
nodeViewScale,

15
packages/editor-ui/src/views/NodeView.vue
View file

@ -52,7 +52,6 @@
@runWorkflow="onRunNode"
@moved="onNodeMoved"
@run="onNodeRun"
:ref="`node-${nodeData.id}`"
:key="`${nodeData.id}_node`"
:name="nodeData.name"
:isReadOnly="isReadOnly"
@ -76,7 +75,6 @@
@nodeSelected="nodeSelectedByName"
@removeNode="(name) => removeNode(name, true)"
:key="`${nodeData.id}_sticky`"
:ref="`node-${nodeData.id}`"
:name="nodeData.name"
:isReadOnly="isReadOnly"
:instance="instance"
@ -406,8 +404,6 @@ export default mixins(
next();
return;
}
// Make sure workflow id is empty when leaving the editor
this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
if (this.uiStore.stateIsDirty) {
const confirmModal = await this.confirmModal(
this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
@ -418,6 +414,8 @@ export default mixins(
true,
);
if (confirmModal === MODAL_CONFIRMED) {
// Make sure workflow id is empty when leaving the editor
this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
const saved = await this.saveCurrentWorkflow({}, false);
if (saved) {
await this.settingsStore.fetchPromptsData();
@ -439,6 +437,7 @@ export default mixins(
next();
}
} else if (confirmModal === MODAL_CANCEL) {
this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
await this.resetWorkspace();
this.uiStore.stateIsDirty = false;
next();
@ -2755,12 +2754,10 @@ export default mixins(
},
getJSPlumbEndpoints(nodeName: string): Endpoint[] {
const node = this.workflowsStore.getNodeByName(nodeName);
const nodeEls: Element = (this.$refs[`node-${node?.id}`] as ComponentInstance[])[0]
.$el as Element;
const nodeEl = this.instance.getManagedElement(node?.id);
const endpoints = this.instance?.getEndpoints(nodeEls);
return endpoints as Endpoint[];
const endpoints = this.instance?.getEndpoints(nodeEl);
return endpoints;
},
getPlusEndpoint(nodeName: string, outputIndex: number): Endpoint | undefined {
const endpoints = this.getJSPlumbEndpoints(nodeName);