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

wrap bind with try/catch

Browse source
This commit is contained in:
Mutasem 2021-11-05 13:23:57 +01:00
parent b02bba55f2
commit 934434eebc
1 changed files with 227 additions and 202 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1287,255 +1287,280 @@ export default mixins(
}; };
this.instance.bind('connectionAborted', (connection) => { this.instance.bind('connectionAborted', (connection) => {
if (this.dropPrevented) { try {
this.dropPrevented = false; if (this.dropPrevented) {
return; this.dropPrevented = false;
return;
}
if (this.pullConnActiveNodeName) {
const sourceNodeName = this.$store.getters.getNodeNameByIndex(connection.sourceId.slice(NODE_NAME_PREFIX.length));
const outputIndex = connection.getParameters().index;
this.connectTwoNodes(sourceNodeName, outputIndex, this.pullConnActiveNodeName, 0);
return;
}
insertNodeAfterSelected({
sourceId: connection.sourceId,
index: connection.getParameters().index,
eventSource: 'node_connection_drop',
});
} catch (e) {
console.error(e);
} }
if (this.pullConnActiveNodeName) {
const sourceNodeName = this.$store.getters.getNodeNameByIndex(connection.sourceId.slice(NODE_NAME_PREFIX.length));
const outputIndex = connection.getParameters().index;
this.connectTwoNodes(sourceNodeName, outputIndex, this.pullConnActiveNodeName, 0);
return;
}
insertNodeAfterSelected({
sourceId: connection.sourceId,
index: connection.getParameters().index,
eventSource: 'node_connection_drop',
});
}); });
this.instance.bind('beforeDrop', (info) => { this.instance.bind('beforeDrop', (info) => {
const sourceInfo = info.connection.endpoints[0].getParameters(); try {
// @ts-ignore const sourceInfo = info.connection.endpoints[0].getParameters();
const targetInfo = info.dropEndpoint.getParameters(); // @ts-ignore
const targetInfo = info.dropEndpoint.getParameters();
const sourceNodeName = this.$store.getters.getNodeNameByIndex(sourceInfo.nodeIndex); const sourceNodeName = this.$store.getters.getNodeNameByIndex(sourceInfo.nodeIndex);
const targetNodeName = this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex); const targetNodeName = this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex);
// check for duplicates // check for duplicates
if (this.getConnection(sourceNodeName, sourceInfo.index, targetNodeName, targetInfo.index)) { if (this.getConnection(sourceNodeName, sourceInfo.index, targetNodeName, targetInfo.index)) {
this.dropPrevented = true; this.dropPrevented = true;
return false; return false;
}
return true;
} catch (e) {
console.error(e);
return true;
} }
return true;
}); });
// only one set of visible actions should be visible at the same time // only one set of visible actions should be visible at the same time
let activeConnection: null | Connection = null; let activeConnection: null | Connection = null;
this.instance.bind('connection', (info: OnConnectionBindInfo) => { this.instance.bind('connection', (info: OnConnectionBindInfo) => {
const sourceInfo = info.sourceEndpoint.getParameters(); try {
const targetInfo = info.targetEndpoint.getParameters(); const sourceInfo = info.sourceEndpoint.getParameters();
const targetInfo = info.targetEndpoint.getParameters();
const sourceNodeName = this.$store.getters.getNodeNameByIndex(sourceInfo.nodeIndex); const sourceNodeName = this.$store.getters.getNodeNameByIndex(sourceInfo.nodeIndex);
const targetNodeName = this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex); const targetNodeName = this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex);
info.connection.__meta = { info.connection.__meta = {
sourceNodeName, sourceNodeName,
sourceOutputIndex: sourceInfo.index, sourceOutputIndex: sourceInfo.index,
targetNodeName, targetNodeName,
targetOutputIndex: targetInfo.index, targetOutputIndex: targetInfo.index,
}; };
info.connection.setPaintStyle(CanvasHelpers.CONNECTOR_PAINT_STYLE_DEFAULT); info.connection.setPaintStyle(CanvasHelpers.CONNECTOR_PAINT_STYLE_DEFAULT);
CanvasHelpers.showOrHideMidpointArrow(info.connection); CanvasHelpers.showOrHideMidpointArrow(info.connection);
if (this.isReadOnly === false) { if (this.isReadOnly === false) {
let exitTimer: NodeJS.Timeout | undefined; let exitTimer: NodeJS.Timeout | undefined;
let enterTimer: NodeJS.Timeout | undefined; let enterTimer: NodeJS.Timeout | undefined;
info.connection.bind('mouseover', (connection: Connection) => { info.connection.bind('mouseover', (connection: Connection) => {
try { try {
if (exitTimer !== undefined) { if (exitTimer !== undefined) {
clearTimeout(exitTimer); clearTimeout(exitTimer);
exitTimer = undefined; exitTimer = undefined;
}
if (enterTimer) {
return;
}
if (info.connection === activeConnection) {
return;
}
CanvasHelpers.hideConnectionActions(activeConnection);
enterTimer = setTimeout(() => {
enterTimer = undefined;
activeConnection = info.connection;
CanvasHelpers.showConectionActions(info.connection);
}, 150);
} catch (e) {
console.error(e);
}
});
info.connection.bind('mouseout', (connection: Connection) => {
try {
if (exitTimer) {
return;
}
if (enterTimer) {
clearTimeout(enterTimer);
enterTimer = undefined;
}
if (activeConnection !== info.connection) {
return;
}
exitTimer = setTimeout(() => {
exitTimer = undefined;
if (activeConnection === info.connection) {
CanvasHelpers.hideConnectionActions(activeConnection);
activeConnection = null;
} }
}, 500);
} catch (e) {
console.error(e);
}
});
CanvasHelpers.addConnectionActionsOverlay(info.connection, if (enterTimer) {
() => { return;
activeConnection = null; }
this.instance.deleteConnection(info.connection); // store mutation applied by connectionDetached event
}, if (info.connection === activeConnection) {
() => { return;
setTimeout(() => { }
insertNodeAfterSelected({
sourceId: info.sourceId, CanvasHelpers.hideConnectionActions(activeConnection);
index: sourceInfo.index,
connection: info.connection,
eventSource: 'node_connection_action', enterTimer = setTimeout(() => {
}); enterTimer = undefined;
}, 150); activeConnection = info.connection;
CanvasHelpers.showConectionActions(info.connection);
}, 150);
} catch (e) {
console.error(e);
}
}); });
info.connection.bind('mouseout', (connection: Connection) => {
try {
if (exitTimer) {
return;
}
if (enterTimer) {
clearTimeout(enterTimer);
enterTimer = undefined;
}
if (activeConnection !== info.connection) {
return;
}
exitTimer = setTimeout(() => {
exitTimer = undefined;
if (activeConnection === info.connection) {
CanvasHelpers.hideConnectionActions(activeConnection);
activeConnection = null;
}
}, 500);
} catch (e) {
console.error(e);
}
});
CanvasHelpers.addConnectionActionsOverlay(info.connection,
() => {
activeConnection = null;
this.instance.deleteConnection(info.connection); // store mutation applied by connectionDetached event
},
() => {
setTimeout(() => {
insertNodeAfterSelected({
sourceId: info.sourceId,
index: sourceInfo.index,
connection: info.connection,
eventSource: 'node_connection_action',
});
}, 150);
});
}
CanvasHelpers.moveBackInputLabelPosition(info.targetEndpoint);
this.$store.commit('addConnection', {
connection: [
{
node: sourceNodeName,
type: sourceInfo.type,
index: sourceInfo.index,
},
{
node: targetNodeName,
type: targetInfo.type,
index: targetInfo.index,
},
],
setStateDirty: true,
});
} catch (e) {
console.error(e);
} }
});
CanvasHelpers.moveBackInputLabelPosition(info.targetEndpoint); this.instance.bind('connectionMoved', (info) => {
try {
// 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
// additionally to the "connectionMoved" event and then only delete the existing connection.
this.$store.commit('addConnection', { CanvasHelpers.resetInputLabelPosition(info.originalTargetEndpoint);
connection: [
// @ts-ignore
const sourceInfo = info.originalSourceEndpoint.getParameters();
// @ts-ignore
const targetInfo = info.originalTargetEndpoint.getParameters();
const connectionInfo = [
{ {
node: sourceNodeName, node: this.$store.getters.getNodeNameByIndex(sourceInfo.nodeIndex),
type: sourceInfo.type, type: sourceInfo.type,
index: sourceInfo.index, index: sourceInfo.index,
}, },
{ {
node: targetNodeName, node: this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex),
type: targetInfo.type, type: targetInfo.type,
index: targetInfo.index, index: targetInfo.index,
}, },
], ] as [IConnection, IConnection];
setStateDirty: true,
});
});
this.instance.bind('connectionMoved', (info) => { this.__removeConnection(connectionInfo, false);
// 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
// additionally to the "connectionMoved" event and then only delete the existing connection.
CanvasHelpers.resetInputLabelPosition(info.originalTargetEndpoint); // Make sure to remove the overlay else after the second move
// it visibly stays behind free floating without a connection.
// @ts-ignore info.connection.removeOverlays();
const sourceInfo = info.originalSourceEndpoint.getParameters(); } catch (e) {
// @ts-ignore console.error(e);
const targetInfo = info.originalTargetEndpoint.getParameters(); }
const connectionInfo = [
{
node: this.$store.getters.getNodeNameByIndex(sourceInfo.nodeIndex),
type: sourceInfo.type,
index: sourceInfo.index,
},
{
node: this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex),
type: targetInfo.type,
index: targetInfo.index,
},
] as [IConnection, IConnection];
this.__removeConnection(connectionInfo, false);
// Make sure to remove the overlay else after the second move
// it visibly stays behind free floating without a connection.
info.connection.removeOverlays();
}); });
this.instance.bind('connectionDetached', (info) => { this.instance.bind('connectionDetached', (info) => {
CanvasHelpers.resetInputLabelPosition(info.targetEndpoint); try {
info.connection.removeOverlays(); CanvasHelpers.resetInputLabelPosition(info.targetEndpoint);
this.__removeConnectionByConnectionInfo(info, false); info.connection.removeOverlays();
this.__removeConnectionByConnectionInfo(info, false);
} catch (e) {
console.error(e);
}
}); });
// @ts-ignore // @ts-ignore
this.instance.bind('connectionDrag', (connection: Connection) => { this.instance.bind('connectionDrag', (connection: Connection) => {
this.pullConnActive = true; try {
this.newNodeInsertPosition = null; this.pullConnActive = true;
CanvasHelpers.addOverlays(connection, CanvasHelpers.CONNECTOR_DROP_NODE_OVERLAY); this.newNodeInsertPosition = null;
const nodes = [...document.querySelectorAll('.node-default')]; CanvasHelpers.addOverlays(connection, CanvasHelpers.CONNECTOR_DROP_NODE_OVERLAY);
const nodes = [...document.querySelectorAll('.node-default')];
const onMouseMove = (e: MouseEvent) => { const onMouseMove = (e: MouseEvent) => {
if (!connection) { if (!connection) {
return; return;
}
const element = document.querySelector('.jtk-endpoint.dropHover');
if (element) {
// @ts-ignore
CanvasHelpers.showDropConnectionState(connection, element._jsPlumb);
return;
}
const inputMargin = 24;
const intersecting = nodes.find((element: Element) => {
const {top, left, right, bottom} = element.getBoundingClientRect();
if (top <= e.pageY && bottom >= e.pageY && (left - inputMargin) <= e.pageX && right >= e.pageX) {
const nodeName = (element as HTMLElement).dataset['name'] as string;
const node = this.$store.getters.getNodeByName(nodeName) as INodeUi | null;
if (node) {
const nodeType = this.$store.getters.nodeType(node.type) as INodeTypeDescription;
if (nodeType.inputs.length === 1) {
this.pullConnActiveNodeName = node.name;
const endpoint = this.instance.getEndpoint(this.getInputEndpointUUID(nodeName, 0));
CanvasHelpers.showDropConnectionState(connection, endpoint);
return true;
}
}
} }
return false; const element = document.querySelector('.jtk-endpoint.dropHover');
}); if (element) {
// @ts-ignore
CanvasHelpers.showDropConnectionState(connection, element._jsPlumb);
return;
}
if (!intersecting) { const inputMargin = 24;
CanvasHelpers.showPullConnectionState(connection); const intersecting = nodes.find((element: Element) => {
this.pullConnActiveNodeName = null; const {top, left, right, bottom} = element.getBoundingClientRect();
} if (top <= e.pageY && bottom >= e.pageY && (left - inputMargin) <= e.pageX && right >= e.pageX) {
}; const nodeName = (element as HTMLElement).dataset['name'] as string;
const node = this.$store.getters.getNodeByName(nodeName) as INodeUi | null;
if (node) {
const nodeType = this.$store.getters.nodeType(node.type) as INodeTypeDescription;
if (nodeType.inputs.length === 1) {
this.pullConnActiveNodeName = node.name;
const endpoint = this.instance.getEndpoint(this.getInputEndpointUUID(nodeName, 0));
const onMouseUp = (e: MouseEvent) => { CanvasHelpers.showDropConnectionState(connection, endpoint);
this.pullConnActive = false;
this.newNodeInsertPosition = this.getMousePositionWithinNodeView(e);
CanvasHelpers.resetConnectionAfterPull(connection);
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
};
window.addEventListener('mousemove', onMouseMove); return true;
window.addEventListener('mouseup', onMouseUp); }
}
}
return false;
});
if (!intersecting) {
CanvasHelpers.showPullConnectionState(connection);
this.pullConnActiveNodeName = null;
}
};
const onMouseUp = (e: MouseEvent) => {
this.pullConnActive = false;
this.newNodeInsertPosition = this.getMousePositionWithinNodeView(e);
CanvasHelpers.resetConnectionAfterPull(connection);
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
};
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
} catch (e) {
console.error(e);
}
}); });
}, },
async newWorkflow (): Promise<void> { async newWorkflow (): Promise<void> {