initPlumb()

in ui/src/app/editor/components/pipeline/pipeline.component.ts [293:434]


    initPlumb() {
        this.JsplumbBridge.unbind(EVENT_CONNECTION);

        this.JsplumbBridge.bind(EVENT_CONNECTION_DRAG, () => {
            this.shouldOpenCustomizeSettings = true;
        });

        this.JsplumbBridge.bind(EVENT_CONNECTION_ABORT, () => {
            this.shouldOpenCustomizeSettings = false;
        });

        this.JsplumbBridge.bind(EVENT_CONNECTION_MOVED, info => {
            const pe = this.objectProvider.findElement(
                info.newTargetEndpoint.elementId,
                this.rawPipelineModel,
            );
            const oldPe = this.objectProvider.findElement(
                info.originalTargetEndpoint.elementId,
                this.rawPipelineModel,
            );
            (oldPe.payload as InvocablePipelineElementUnion).configured = false;
            (pe.payload as InvocablePipelineElementUnion).configured = false;
        });

        this.JsplumbBridge.bind(EVENT_CONNECTION_DETACHED, info => {
            const pe = this.objectProvider.findElement(
                info.targetEndpoint.elementId,
                this.rawPipelineModel,
            );
            (pe.payload as InvocablePipelineElementUnion).configured = false;
            info.targetEndpoint.setType('empty');
            this.JsplumbBridge.repaintEverything();
            this.validatePipeline();
        });

        this.JsplumbBridge.bind(EVENT_CONNECTION_DRAG, () => {
            this.JsplumbBridge.selectEndpoints().each(endpoint => {
                if (endpoint.isTarget && endpoint.connections.length === 0) {
                    endpoint.setType('highlight');
                }
            });
            this.JsplumbBridge.repaintEverything();
        });
        this.JsplumbBridge.bind(EVENT_CONNECTION_ABORT, () => {
            this.JsplumbBridge.selectEndpoints().each(endpoint => {
                if (endpoint.isTarget && endpoint.connections.length === 0) {
                    endpoint.setType('empty');
                }
            });
            this.JsplumbBridge.repaintEverything();
        });

        this.JsplumbBridge.bind(EVENT_CONNECTION, info => {
            const pe = this.objectProvider.findElement(
                info.target.id,
                this.rawPipelineModel,
            );

            if (
                this.shouldOpenCustomizeSettings ||
                info.connection.data.openCustomize
            ) {
                this.currentPipelineModel = this.objectProvider.makePipeline(
                    this.rawPipelineModel,
                );

                pe.settings.loadingStatus = true;
                this.objectProvider
                    .updatePipeline(this.currentPipelineModel)
                    .subscribe(
                        pipelineModificationMessage => {
                            pe.settings.loadingStatus = false;
                            const edgeValidations =
                                this.getTargetEdgeValidations(
                                    pipelineModificationMessage,
                                    info.target.id,
                                );
                            const currentConnectionValid =
                                this.currentConnectionValid(edgeValidations);
                            if (currentConnectionValid) {
                                this.validatePipeline(
                                    pipelineModificationMessage,
                                );
                                this.modifyPipeline(
                                    pipelineModificationMessage,
                                );
                                if (
                                    this.jsplumbService.isFullyConnected(
                                        pe,
                                        this.readonly,
                                    )
                                ) {
                                    const payload =
                                        pe.payload as InvocablePipelineElementUnion;
                                    if (
                                        (payload.staticProperties &&
                                            payload.staticProperties.length >
                                                0) ||
                                        this.isCustomOutput(pe)
                                    ) {
                                        this.showCustomizeDialog(pe);
                                    } else {
                                        (
                                            pe.payload as InvocablePipelineElementUnion
                                        ).configured = true;
                                        this.pipelineStyleService.updatePeConfigurationStatus(
                                            pe,
                                            PipelineElementConfigurationStatus.OK,
                                        );
                                        this.announceConfiguredElement(pe);
                                        this.triggerPipelineCacheUpdateEmitter.emit();
                                    }
                                }
                            } else {
                                this.JsplumbBridge.detach(info.connection);
                                const invalidEdgeValidation =
                                    edgeValidations.find(
                                        e => e.sourceId === info.source.id,
                                    );
                                if (invalidEdgeValidation) {
                                    this.showMatchingErrorDialog(
                                        invalidEdgeValidation.status
                                            .notifications,
                                    );
                                }
                            }
                        },
                        status => {
                            pe.settings.loadingStatus = false;
                            this.showErrorDialog(
                                status.error.title,
                                status.error.description,
                            );
                        },
                    );
            }
        });

        window.onresize = () => {
            this.JsplumbBridge.repaintEverything();
        };
    }