diff --git a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx index 12bb4bd1d..ac9e40000 100644 --- a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx +++ b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx @@ -86,13 +86,15 @@ export class ElsaWorkflowDesigner { const sourceEndpoints = this.getJsPlumbSourceEndpoints(); const targets = this.getJsPlumbTargets(); - updateConnections( + const invalidConnections = updateConnections( canvasElement, connections, sourceEndpoints, targets, connection => this.onConnectionCreated(connection), connection => this.onConnectionDetached(connection)); + + this.removeInvalidConnections(invalidConnections); } disconnectedCallback() { @@ -207,6 +209,17 @@ export class ElsaWorkflowDesigner { this.workflowChanged.emit(model); } + removeInvalidConnections(invalidConnections: Array){ + if (invalidConnections.length > 0) { + + const isValid = (connection: ConnectionModel): boolean => invalidConnections.findIndex(x => x.targetId == connection.targetId && x.sourceId == connection.sourceId && x.outcome == connection.outcome) < 0; + const workflowModel = {...this.workflowModel}; + + workflowModel.connections = workflowModel.connections.filter(isValid); + this.updateWorkflowModel(workflowModel); + } + } + getJsPlumbConnections(): Array { const rootActivities = getChildActivities(this.workflowModel, null); diff --git a/src/designer/elsa-workflows-studio/src/utils/jsplumb-helper.ts b/src/designer/elsa-workflows-studio/src/utils/jsplumb-helper.ts index 934b46535..4583ae4b9 100644 --- a/src/designer/elsa-workflows-studio/src/utils/jsplumb-helper.ts +++ b/src/designer/elsa-workflows-studio/src/utils/jsplumb-helper.ts @@ -32,9 +32,10 @@ export function destroy() { } } -export function updateConnections(container, connections, sourceEndpoints, targets, connectionCreatedCallback, connectionDetachedCallback) { +export function updateConnections(container, connections, sourceEndpoints, targets, connectionCreatedCallback, connectionDetachedCallback): Array { destroy(); + const invalidConnections: Array = []; jsPlumbInstance = (jsPlumb as any).getInstance({ Container: container, @@ -61,7 +62,12 @@ export function updateConnections(container, connections, sourceEndpoints, targe } }); - jsPlumbConnection.setData(connection); + if (!jsPlumbConnection) { + console.warn(`Unable to connect ${connection.sourceId} to ${connection.targetId} via ${connection.outcome}`); + invalidConnections.push({sourceId: connection.sourceActivityId, targetId: connection.targetActivityId, outcome: connection.outcome}); + } + else + jsPlumbConnection.setData(connection); } for (const endpoint of sourceEndpoints) { @@ -104,4 +110,6 @@ export function updateConnections(container, connections, sourceEndpoints, targe } }); }); + + return invalidConnections; }