mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix an issue with zoom and canvas nodes connections (#5548)

Browse source
This commit is contained in:
OlegIvaniv 2023-02-23 09:48:42 +01:00 committed by GitHub
parent f965469e13
commit 4998ab2350
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 426 additions and 377 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/editor-ui/src/plugins/endpoints/N8nPlusEndpointType.ts
View file

@ -18,7 +18,8 @@ interface N8nPlusEndpointParams extends EndpointRepresentationParams {
} }
export const PlusStalkOverlay = 'plus-stalk'; export const PlusStalkOverlay = 'plus-stalk';
export const HoverMessageOverlay = 'hover-message'; export const HoverMessageOverlay = 'hover-message';
export const N8nPlusEndpointType = 'N8nPlus';
export const EVENT_PLUS_ENDPOINT_CLICK = 'eventPlusEndpointClick';
export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpoint> { export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpoint> {
params: N8nPlusEndpointParams; params: N8nPlusEndpointParams;
label: string; label: string;
@ -38,7 +39,7 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
this.bindEvents(); this.bindEvents();
} }
static type = 'N8nPlus'; static type = N8nPlusEndpointType;
type = N8nPlusEndpoint.type; type = N8nPlusEndpoint.type;
setupOverlays() { setupOverlays() {
@ -100,7 +101,7 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
}; };
fireClickEvent = (endpoint: Endpoint) => { fireClickEvent = (endpoint: Endpoint) => {
if (endpoint === this.endpoint) { if (endpoint === this.endpoint) {
this.instance.fire('plusEndpointClick', this.endpoint); this.instance.fire(EVENT_PLUS_ENDPOINT_CLICK, this.endpoint);
} }
}; };
setHoverMessageVisible = (endpoint: Endpoint) => { setHoverMessageVisible = (endpoint: Endpoint) => {

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

@ -28,6 +28,9 @@ import {
PLACEHOLDER_TRIGGER_NODE_SIZE, PLACEHOLDER_TRIGGER_NODE_SIZE,
CONNECTOR_FLOWCHART_TYPE, CONNECTOR_FLOWCHART_TYPE,
GRID_SIZE, GRID_SIZE,
CONNECTOR_PAINT_STYLE_DEFAULT,
CONNECTOR_PAINT_STYLE_PRIMARY,
CONNECTOR_ARROW_OVERLAYS,
} from '@/utils/nodeViewUtils'; } from '@/utils/nodeViewUtils';
import { PointXY } from '@jsplumb/util'; import { PointXY } from '@jsplumb/util';
@ -153,6 +156,13 @@ export const useCanvasStore = defineStore('canvas', () => {
container, container,
connector: CONNECTOR_FLOWCHART_TYPE, connector: CONNECTOR_FLOWCHART_TYPE,
resizeObserver: false, resizeObserver: false,
endpoint: {
type: 'Dot',
options: { radius: 5 },
},
paintStyle: CONNECTOR_PAINT_STYLE_DEFAULT,
hoverPaintStyle: CONNECTOR_PAINT_STYLE_PRIMARY,
connectionOverlays: CONNECTOR_ARROW_OVERLAYS,
dragOptions: { dragOptions: {
cursor: 'pointer', cursor: 'pointer',
grid: { w: GRID_SIZE, h: GRID_SIZE }, grid: { w: GRID_SIZE, h: GRID_SIZE },

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

@ -161,7 +161,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue, { ComponentInstance } from 'vue'; import Vue from 'vue';
import { mapStores } from 'pinia'; import { mapStores } from 'pinia';
import { import {
@ -299,7 +299,11 @@ import {
BrowserJsPlumbInstance, BrowserJsPlumbInstance,
ready, ready,
} from '@jsplumb/browser-ui'; } from '@jsplumb/browser-ui';
import { N8nPlusEndpoint } from '@/plugins/endpoints/N8nPlusEndpointType'; import {
N8nPlusEndpoint,
N8nPlusEndpointType,
EVENT_PLUS_ENDPOINT_CLICK,
} from '@/plugins/endpoints/N8nPlusEndpointType';
import { usePostHogStore } from '@/stores/posthog'; import { usePostHogStore } from '@/stores/posthog';
interface AddNodeOptions { interface AddNodeOptions {
@ -1939,12 +1943,13 @@ export default mixins(
// current node. But only if it's added manually by the user (not by undo/redo mechanism) // current node. But only if it's added manually by the user (not by undo/redo mechanism)
if (trackHistory) { if (trackHistory) {
this.deselectAllNodes(); this.deselectAllNodes();
if (showDetail) {
setTimeout(() => { setTimeout(() => {
this.nodeSelectedByName(newNodeData.name, nodeTypeName !== STICKY_NODE_TYPE); this.nodeSelectedByName(
newNodeData.name,
showDetail && nodeTypeName !== STICKY_NODE_TYPE,
);
}); });
} }
}
return newNodeData; return newNodeData;
}, },
@ -2051,23 +2056,12 @@ export default mixins(
} }
this.historyStore.stopRecordingUndo(); this.historyStore.stopRecordingUndo();
}, },
initNodeView() { insertNodeAfterSelected(info: {
this.instance?.importDefaults({
endpoint: {
type: 'Dot',
options: { radius: 5 },
},
paintStyle: NodeViewUtils.CONNECTOR_PAINT_STYLE_DEFAULT,
hoverPaintStyle: NodeViewUtils.CONNECTOR_PAINT_STYLE_PRIMARY,
connectionOverlays: NodeViewUtils.CONNECTOR_ARROW_OVERLAYS,
});
const insertNodeAfterSelected = (info: {
sourceId: string; sourceId: string;
index: number; index: number;
eventSource: string; eventSource: string;
connection?: Connection; connection?: Connection;
}) => { }) {
// Get the node and set it as active that new nodes // Get the node and set it as active that new nodes
// which get created get automatically connected // which get created get automatically connected
// to it. // to it.
@ -2085,9 +2079,8 @@ export default mixins(
} }
this.onToggleNodeCreator({ source: info.eventSource, createNodeActive: true }); this.onToggleNodeCreator({ source: info.eventSource, createNodeActive: true });
}; },
onEventConnectionAbort(connection: Connection) {
this.instance.bind(EVENT_CONNECTION_ABORT, (connection: Connection) => {
try { try {
if (this.dropPrevented) { if (this.dropPrevented) {
this.dropPrevented = false; this.dropPrevented = false;
@ -2107,7 +2100,7 @@ export default mixins(
return; return;
} }
insertNodeAfterSelected({ this.insertNodeAfterSelected({
sourceId: connection.parameters.nodeId, sourceId: connection.parameters.nodeId,
index: connection.parameters.index, index: connection.parameters.index,
eventSource: 'node_connection_drop', eventSource: 'node_connection_drop',
@ -2115,9 +2108,8 @@ export default mixins(
} catch (e) { } catch (e) {
console.error(e); // eslint-disable-line no-console console.error(e); // eslint-disable-line no-console
} }
}); },
onInterceptBeforeDrop(info: BeforeDropParams) {
this.instance.bind(INTERCEPT_BEFORE_DROP, (info: BeforeDropParams) => {
try { try {
const sourceInfo = info.connection.endpoints[0].parameters; const sourceInfo = info.connection.endpoints[0].parameters;
const targetInfo = info.dropEndpoint.parameters; const targetInfo = info.dropEndpoint.parameters;
@ -2139,9 +2131,8 @@ export default mixins(
console.error(e); // eslint-disable-line no-console console.error(e); // eslint-disable-line no-console
return true; return true;
} }
}); },
onEventConnection(info: ConnectionEstablishedParams) {
this.instance.bind(EVENT_CONNECTION, (info: ConnectionEstablishedParams) => {
try { try {
const sourceInfo = info.sourceEndpoint.parameters; const sourceInfo = info.sourceEndpoint.parameters;
const targetInfo = info.targetEndpoint.parameters; const targetInfo = info.targetEndpoint.parameters;
@ -2188,7 +2179,7 @@ export default mixins(
this.__deleteJSPlumbConnection(info.connection); this.__deleteJSPlumbConnection(info.connection);
}, },
() => { () => {
insertNodeAfterSelected({ this.insertNodeAfterSelected({
sourceId: info.sourceEndpoint.parameters.nodeId, sourceId: info.sourceEndpoint.parameters.nodeId,
index: sourceInfo.index, index: sourceInfo.index,
connection: info.connection, connection: info.connection,
@ -2209,9 +2200,8 @@ export default mixins(
} catch (e) { } catch (e) {
console.error(e); // eslint-disable-line no-console console.error(e); // eslint-disable-line no-console
} }
}); },
onDragMove() {
this.instance.bind(EVENT_DRAG_MOVE, () => {
this.instance?.connections.forEach((connection) => { this.instance?.connections.forEach((connection) => {
NodeViewUtils.showOrHideItemsLabel(connection); NodeViewUtils.showOrHideItemsLabel(connection);
NodeViewUtils.showOrHideMidpointArrow(connection); NodeViewUtils.showOrHideMidpointArrow(connection);
@ -2221,8 +2211,8 @@ export default mixins(
this.instance?.repaint(overlay.canvas); this.instance?.repaint(overlay.canvas);
}); });
}); });
}); },
this.instance.bind(EVENT_CONNECTION_MOUSEOVER, (connection: Connection) => { onConnectionMouseOver(connection: Connection) {
try { try {
if (this.exitTimer !== undefined) { if (this.exitTimer !== undefined) {
clearTimeout(this.exitTimer); clearTimeout(this.exitTimer);
@ -2249,8 +2239,8 @@ export default mixins(
} catch (e) { } catch (e) {
console.error(e); // eslint-disable-line no-console console.error(e); // eslint-disable-line no-console
} }
}); },
this.instance.bind(EVENT_CONNECTION_MOUSEOUT, (connection: Connection) => { onConnectionMouseOut(connection: Connection) {
try { try {
if (this.exitTimer) return; if (this.exitTimer) return;
@ -2272,9 +2262,8 @@ export default mixins(
} catch (e) { } catch (e) {
console.error(e); // eslint-disable-line no-console console.error(e); // eslint-disable-line no-console
} }
}); },
onConnectionMoved(info: ConnectionMovedParams) {
this.instance.bind(EVENT_CONNECTION_MOVED, (info: ConnectionMovedParams) => {
try { try {
// When a connection gets moved from one node to another it for some reason // When a connection gets moved from one node to another it for some reason
// calls the "connection" event but not the "connectionDetached" one. So we listen // calls the "connection" event but not the "connectionDetached" one. So we listen
@ -2302,19 +2291,19 @@ export default mixins(
} catch (e) { } catch (e) {
console.error(e); // eslint-disable-line no-console console.error(e); // eslint-disable-line no-console
} }
}); },
this.instance.bind(EVENT_ENDPOINT_MOUSEOVER, (endpoint: Endpoint, mouse) => { onEndpointMouseOver(endpoint: Endpoint, mouse) {
// This event seems bugged. It gets called constantly even when the mouse is not over the endpoint // This event seems bugged. It gets called constantly even when the mouse is not over the endpoint
// if the endpoint has a connection attached to it. So we need to check if the mouse is actually over // if the endpoint has a connection attached to it. So we need to check if the mouse is actually over
// the endpoint. // the endpoint.
if (!endpoint.isTarget || mouse.target !== endpoint.endpoint.canvas) return; if (!endpoint.isTarget || mouse.target !== endpoint.endpoint.canvas) return;
this.instance.setHover(endpoint, true); this.instance.setHover(endpoint, true);
}); },
this.instance.bind(EVENT_ENDPOINT_MOUSEOUT, (endpoint: Endpoint) => { onEndpointMouseOut(endpoint: Endpoint) {
if (!endpoint.isTarget) return; if (!endpoint.isTarget) return;
this.instance.setHover(endpoint, false); this.instance.setHover(endpoint, false);
}); },
this.instance.bind(EVENT_CONNECTION_DETACHED, async (info: ConnectionDetachedParams) => { async onConnectionDetached(info: ConnectionDetachedParams) {
try { try {
const connectionInfo: [IConnection, IConnection] | null = getConnectionInfo(info); const connectionInfo: [IConnection, IConnection] | null = getConnectionInfo(info);
NodeViewUtils.resetInputLabelPosition(info.targetEndpoint); NodeViewUtils.resetInputLabelPosition(info.targetEndpoint);
@ -2348,8 +2337,8 @@ export default mixins(
} catch (e) { } catch (e) {
console.error(e); // eslint-disable-line no-console console.error(e); // eslint-disable-line no-console
} }
}); },
this.instance.bind(EVENT_CONNECTION_DRAG, (connection: Connection) => { onConnectionDrag(connection: Connection) {
// The overlays are visible by default so we need to hide the midpoint arrow // The overlays are visible by default so we need to hide the midpoint arrow
// manually // manually
connection.overlays['midpoint-arrow']?.setVisible(false); connection.overlays['midpoint-arrow']?.setVisible(false);
@ -2420,27 +2409,77 @@ export default mixins(
} catch (e) { } catch (e) {
console.error(e); // eslint-disable-line no-console console.error(e); // eslint-disable-line no-console
} }
}); },
this.instance.bind( onConnectionDragAbortDetached(connection: Connection) {
[EVENT_CONNECTION_DRAG, EVENT_CONNECTION_ABORT, EVENT_CONNECTION_DETACHED],
(connection: Connection) => {
Object.values(this.instance?.endpointsByElement) Object.values(this.instance?.endpointsByElement)
.flatMap((endpoints) => Object.values(endpoints)) .flatMap((endpoints) => Object.values(endpoints))
.filter((endpoint) => endpoint.endpoint.type === 'N8nPlus') .filter((endpoint) => endpoint.endpoint.type === 'N8nPlus')
.forEach((endpoint) => .forEach((endpoint) => setTimeout(() => endpoint.instance.revalidate(endpoint.element), 0));
setTimeout(() => endpoint.instance.revalidate(endpoint.element), 0),
);
}, },
); onPlusEndpointClick(endpoint: Endpoint) {
this.instance.bind('plusEndpointClick', (endpoint: Endpoint) => {
if (endpoint && endpoint.__meta) { if (endpoint && endpoint.__meta) {
insertNodeAfterSelected({ this.insertNodeAfterSelected({
sourceId: endpoint.__meta.nodeId, sourceId: endpoint.__meta.nodeId,
index: endpoint.__meta.index, index: endpoint.__meta.index,
eventSource: 'plus_endpoint', eventSource: 'plus_endpoint',
}); });
} }
}); },
bindCanvasEvents() {
this.instance.bind(EVENT_CONNECTION_ABORT, this.onEventConnectionAbort);
this.instance.bind(INTERCEPT_BEFORE_DROP, this.onInterceptBeforeDrop);
this.instance.bind(EVENT_CONNECTION, this.onEventConnection);
this.instance.bind(EVENT_DRAG_MOVE, this.onDragMove);
this.instance.bind(EVENT_CONNECTION_MOUSEOVER, this.onConnectionMouseOver);
this.instance.bind(EVENT_CONNECTION_MOUSEOUT, this.onConnectionMouseOut);
this.instance.bind(EVENT_CONNECTION_MOVED, this.onConnectionMoved);
this.instance.bind(EVENT_ENDPOINT_MOUSEOVER, this.onEndpointMouseOver);
this.instance.bind(EVENT_ENDPOINT_MOUSEOUT, this.onEndpointMouseOut);
this.instance.bind(EVENT_CONNECTION_DETACHED, this.onConnectionDetached);
this.instance.bind(EVENT_CONNECTION_DRAG, this.onConnectionDrag);
this.instance.bind(
[EVENT_CONNECTION_DRAG, EVENT_CONNECTION_ABORT, EVENT_CONNECTION_DETACHED],
this.onConnectionDragAbortDetached,
);
this.instance.bind(EVENT_PLUS_ENDPOINT_CLICK, this.onPlusEndpointClick);
},
unbindCanvasEvents() {
this.instance.unbind(EVENT_CONNECTION_ABORT, this.onEventConnectionAbort);
this.instance.unbind(INTERCEPT_BEFORE_DROP, this.onInterceptBeforeDrop);
this.instance.unbind(EVENT_CONNECTION, this.onEventConnection);
this.instance.unbind(EVENT_DRAG_MOVE, this.onDragMove);
this.instance.unbind(EVENT_CONNECTION_MOUSEOVER, this.onConnectionMouseOver);
this.instance.unbind(EVENT_CONNECTION_MOUSEOUT, this.onConnectionMouseOut);
this.instance.unbind(EVENT_CONNECTION_MOVED, this.onConnectionMoved);
this.instance.unbind(EVENT_ENDPOINT_MOUSEOVER, this.onEndpointMouseOver);
this.instance.unbind(EVENT_ENDPOINT_MOUSEOUT, this.onEndpointMouseOut);
this.instance.unbind(EVENT_CONNECTION_DETACHED, this.onConnectionDetached);
this.instance.unbind(EVENT_CONNECTION_DRAG, this.onConnectionDrag);
this.instance.unbind(EVENT_CONNECTION_DRAG, this.onConnectionDragAbortDetached);
this.instance.unbind(EVENT_CONNECTION_ABORT, this.onConnectionDragAbortDetached);
this.instance.unbind(EVENT_CONNECTION_DETACHED, this.onConnectionDragAbortDetached);
this.instance.unbind(EVENT_PLUS_ENDPOINT_CLICK, this.onPlusEndpointClick);
// Get all the endpoints and unbind the events
const elements = this.instance.getManagedElements();
for (const element of Object.values(elements)) {
const endpoints = element.endpoints;
for (const endpoint of endpoints || []) {
const endpointInstance = endpoint?.endpoint;
if (endpointInstance && endpointInstance.type === N8nPlusEndpointType) {
(endpointInstance as N8nPlusEndpoint).unbindEvents();
}
}
}
}, },
async newWorkflow(): Promise<void> { async newWorkflow(): Promise<void> {
this.startLoading(); this.startLoading();
@ -3826,7 +3865,7 @@ export default mixins(
ready(async () => { ready(async () => {
try { try {
try { try {
this.initNodeView(); this.bindCanvasEvents();
} catch {} // This will break if mounted after jsplumb has been initiated from executions preview, so continue if it breaks } catch {} // This will break if mounted after jsplumb has been initiated from executions preview, so continue if it breaks
await this.initView(); await this.initView();
if (window.top) { if (window.top) {
@ -3894,8 +3933,7 @@ export default mixins(
this.showTriggerCreator('trigger_placeholder_button'); this.showTriggerCreator('trigger_placeholder_button');
} }
this.uiStore.addFirstStepOnLoad = false; this.uiStore.addFirstStepOnLoad = false;
this.bindCanvasEvents();
this.initNodeView();
document.addEventListener('keydown', this.keyDown); document.addEventListener('keydown', this.keyDown);
document.addEventListener('keyup', this.keyUp); document.addEventListener('keyup', this.keyUp);
window.addEventListener('message', this.onPostMessageReceived); window.addEventListener('message', this.onPostMessageReceived);
@ -3918,6 +3956,7 @@ export default mixins(
this.canvasStore.isDemo = this.isDemo; this.canvasStore.isDemo = this.isDemo;
}, },
deactivated() { deactivated() {
this.unbindCanvasEvents();
document.removeEventListener('keydown', this.keyDown); document.removeEventListener('keydown', this.keyDown);
document.removeEventListener('keyup', this.keyUp); document.removeEventListener('keyup', this.keyUp);
window.removeEventListener('message', this.onPostMessageReceived); window.removeEventListener('message', this.onPostMessageReceived);
@ -3936,7 +3975,6 @@ export default mixins(
dataPinningEventBus.$off('pin-data', this.addPinDataConnections); dataPinningEventBus.$off('pin-data', this.addPinDataConnections);
dataPinningEventBus.$off('unpin-data', this.removePinDataConnections); dataPinningEventBus.$off('unpin-data', this.removePinDataConnections);
nodeViewEventBus.$off('saveWorkflow', this.saveCurrentWorkflowExternal); nodeViewEventBus.$off('saveWorkflow', this.saveCurrentWorkflowExternal);
this.instance.unbind();
}, },
destroyed() { destroyed() {
this.resetWorkspace(); this.resetWorkspace();