This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch STREAMPIPES-494 in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit cbb2674482b7a9c8b72fdca7c1bba1c786042cbe Author: Dominik Riemer <[email protected]> AuthorDate: Tue Jan 4 10:06:14 2022 +0100 [hotfix] Fix linting errors in editor component --- .../pipeline-assembly.component.ts | 60 ++++---- .../components/pipeline/pipeline.component.ts | 105 +++++++------ .../services/editor-dialog-manager.service.ts | 164 --------------------- .../app/editor/services/jsplumb-bridge.service.ts | 12 +- .../app/editor/services/jsplumb-config.service.ts | 74 +++++----- .../editor/services/jsplumb-endpoint.service.ts | 26 ++-- .../app/editor/services/jsplumb-factory.service.ts | 16 +- ui/src/app/editor/services/jsplumb.service.ts | 112 +++++++------- .../app/editor/services/object-provider.service.ts | 41 +++--- .../services/pipeline-canvas-scrolling.service.ts | 4 +- .../app/editor/services/pipeline-editor.service.ts | 27 ++-- .../services/pipeline-element-dragged.service.ts | 6 +- .../pipeline-element-recommendation.service.ts | 25 ++-- .../services/pipeline-positioning.service.ts | 99 +++++++------ .../editor/services/pipeline-validation.service.ts | 4 +- .../preview/pipeline-preview.component.ts | 36 +++-- 16 files changed, 330 insertions(+), 481 deletions(-) diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts index 9658e17..28f6b40 100644 --- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts +++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts @@ -16,7 +16,17 @@ * */ -import { Component, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, ViewChild, } from '@angular/core'; +import { + AfterViewInit, + Component, + ElementRef, + EventEmitter, + Input, + NgZone, + OnInit, + Output, + ViewChild, +} from '@angular/core'; import { JsplumbBridge } from '../../services/jsplumb-bridge.service'; import { PipelinePositioningService } from '../../services/pipeline-positioning.service'; import { PipelineValidationService } from '../../services/pipeline-validation.service'; @@ -46,7 +56,7 @@ import { PipelineElementDiscoveryComponent } from '../../dialog/pipeline-element templateUrl: './pipeline-assembly.component.html', styleUrls: ['./pipeline-assembly.component.scss'] }) -export class PipelineAssemblyComponent implements OnInit { +export class PipelineAssemblyComponent implements OnInit, AfterViewInit { @Input() rawPipelineModel: PipelineElementConfig[]; @@ -88,14 +98,14 @@ export class PipelineAssemblyComponent implements OnInit { panzoom: PanzoomObject; - constructor(private JsPlumbFactoryService: JsplumbFactoryService, - private PipelinePositioningService: PipelinePositioningService, - private ObjectProvider: ObjectProvider, - public EditorService: EditorService, - public PipelineValidationService: PipelineValidationService, - private PipelineService: PipelineService, - private JsplumbService: JsplumbService, - private ShepherdService: ShepherdService, + constructor(private jsPlumbFactoryService: JsplumbFactoryService, + private pipelinePositioningService: PipelinePositioningService, + private objectProvider: ObjectProvider, + public editorService: EditorService, + public pipelineValidationService: PipelineValidationService, + private pipelineService: PipelineService, + private jsplumbService: JsplumbService, + private shepherdService: ShepherdService, private dialogService: DialogService, private dialog: MatDialog, private ngZone: NgZone, @@ -131,18 +141,18 @@ export class PipelineAssemblyComponent implements OnInit { } ngAfterViewInit() { - this.JsplumbBridge = this.JsPlumbFactoryService.getJsplumbBridge(this.preview); + this.JsplumbBridge = this.jsPlumbFactoryService.getJsplumbBridge(this.preview); const elem = document.getElementById('assembly'); this.panzoom = Panzoom(elem, { maxScale: 5, - excludeClass: "sp-no-pan", + excludeClass: 'sp-no-pan', canvas: true, contain: 'outside' }); } autoLayout() { - this.PipelinePositioningService.layoutGraph('#assembly', 'div[id^=\'jsplumb\']', 110, false); + this.pipelinePositioningService.layoutGraph('#assembly', 'div[id^=\'jsplumb\']', 110, false); this.JsplumbBridge.repaintEverything(); } @@ -178,7 +188,7 @@ export class PipelineAssemblyComponent implements OnInit { this.currentModifiedPipelineId = undefined; } this.clearAssembly(); - this.EditorService.makePipelineAssemblyEmpty(true); + this.editorService.makePipelineAssemblyEmpty(true); } }); } @@ -194,8 +204,8 @@ export class PipelineAssemblyComponent implements OnInit { this.JsplumbBridge.setZoom(this.currentZoomLevel); this.JsplumbBridge.repaintEverything(); - const removePipelineFromCache = this.EditorService.removePipelineFromCache(); - const removeCanvasMetadataFromCache = this.EditorService.removeCanvasMetadataFromCache(); + const removePipelineFromCache = this.editorService.removePipelineFromCache(); + const removeCanvasMetadataFromCache = this.editorService.removeCanvasMetadataFromCache(); forkJoin([removePipelineFromCache, removeCanvasMetadataFromCache]).subscribe(msg => { this.pipelineCached = false; this.pipelineCacheRunning = false; @@ -206,8 +216,8 @@ export class PipelineAssemblyComponent implements OnInit { * Sends the pipeline to the server */ submit() { - const pipeline = this.ObjectProvider.makeFinalPipeline(this.rawPipelineModel); - this.PipelinePositioningService.collectPipelineElementPositions(this.pipelineCanvasMetadata, this.rawPipelineModel); + const pipeline = this.objectProvider.makeFinalPipeline(this.rawPipelineModel); + this.pipelinePositioningService.collectPipelineElementPositions(this.pipelineCanvasMetadata, this.rawPipelineModel); pipeline.name = this.currentPipelineName; pipeline.description = this.currentPipelineDescription; if (this.currentModifiedPipelineId) { @@ -226,8 +236,8 @@ export class PipelineAssemblyComponent implements OnInit { } checkAndDisplayCachedPipeline() { - const cachedPipeline = this.EditorService.getCachedPipeline(); - const cachedCanvasMetadata = this.EditorService.getCachedPipelineCanvasMetadata(); + const cachedPipeline = this.editorService.getCachedPipeline(); + const cachedCanvasMetadata = this.editorService.getCachedPipelineCanvasMetadata(); forkJoin([cachedPipeline, cachedCanvasMetadata]).subscribe(results => { if (results[0] && results[0].length > 0) { this.rawPipelineModel = results[0] as PipelineElementConfig[]; @@ -237,13 +247,13 @@ export class PipelineAssemblyComponent implements OnInit { } displayPipelineById() { - const pipelineRequest = this.PipelineService.getPipelineById(this.currentModifiedPipelineId); + const pipelineRequest = this.pipelineService.getPipelineById(this.currentModifiedPipelineId); const canvasRequest = this.pipelineCanvasMetadataService.getPipelineCanvasMetadata(this.currentModifiedPipelineId); pipelineRequest.subscribe(pipelineResp => { const pipeline = pipelineResp; this.currentPipelineName = pipeline.name; this.currentPipelineDescription = pipeline.description; - this.rawPipelineModel = this.JsplumbService.makeRawPipeline(pipeline, false); + this.rawPipelineModel = this.jsplumbService.makeRawPipeline(pipeline, false); canvasRequest.subscribe(canvasResp => { this.handleCanvasMetadataResponse(canvasResp); }, error => { @@ -266,10 +276,10 @@ export class PipelineAssemblyComponent implements OnInit { displayPipelineInEditor(autoLayout, pipelineCanvasMetadata?: PipelineCanvasMetadata) { setTimeout(() => { - this.PipelinePositioningService.displayPipeline(this.rawPipelineModel, '#assembly', false, autoLayout, pipelineCanvasMetadata); - this.EditorService.makePipelineAssemblyEmpty(false); + this.pipelinePositioningService.displayPipeline(this.rawPipelineModel, '#assembly', false, autoLayout, pipelineCanvasMetadata); + this.editorService.makePipelineAssemblyEmpty(false); this.ngZone.run(() => { - this.pipelineValid = this.PipelineValidationService + this.pipelineValid = this.pipelineValidationService .isValidPipeline(this.rawPipelineModel.filter(pe => !(pe.settings.disabled)), false); }); }); diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts b/ui/src/app/editor/components/pipeline/pipeline.component.ts index f353df0..ee4a47e 100644 --- a/ui/src/app/editor/components/pipeline/pipeline.component.ts +++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts @@ -100,14 +100,14 @@ export class PipelineComponent implements OnInit, OnDestroy { previewModeActive = false; pipelinePreview: PipelinePreviewModel; - constructor(private JsplumbService: JsplumbService, - private PipelineEditorService: PipelineEditorService, - private PipelinePositioningService: PipelinePositioningService, - private JsplumbFactoryService: JsplumbFactoryService, - private ObjectProvider: ObjectProvider, - private EditorService: EditorService, - private ShepherdService: ShepherdService, - private PipelineValidationService: PipelineValidationService, + constructor(private jsplumbService: JsplumbService, + private pipelineEditorService: PipelineEditorService, + private pipelinePositioningService: PipelinePositioningService, + private jsplumbFactoryService: JsplumbFactoryService, + private objectProvider: ObjectProvider, + private editorService: EditorService, + private shepherdService: ShepherdService, + private pipelineValidationService: PipelineValidationService, private dialogService: DialogService, private dialog: MatDialog, private ngZone: NgZone, ) { @@ -120,7 +120,7 @@ export class PipelineComponent implements OnInit, OnDestroy { } ngOnInit() { - this.JsplumbBridge = this.JsplumbFactoryService.getJsplumbBridge(this.preview); + this.JsplumbBridge = this.jsplumbFactoryService.getJsplumbBridge(this.preview); this.initAssembly(); this.initPlumb(); } @@ -128,7 +128,7 @@ export class PipelineComponent implements OnInit, OnDestroy { validatePipeline() { setTimeout(() => { this.ngZone.run(() => { - this.pipelineValid = this.PipelineValidationService + this.pipelineValid = this.pipelineValidationService .isValidPipeline(this.rawPipelineModel.filter(pe => !(pe.settings.disabled)), this.preview); }); }); @@ -136,7 +136,7 @@ export class PipelineComponent implements OnInit, OnDestroy { ngOnDestroy() { this.deletePipelineElementPreview(false); - this.JsplumbFactoryService.destroy(this.preview); + this.jsplumbFactoryService.destroy(this.preview); this.plumbReady = false; } @@ -145,11 +145,7 @@ export class PipelineComponent implements OnInit, OnDestroy { } updateOptionsClick(elementId) { - if (this.currentMouseOverElement == elementId) { - this.currentMouseOverElement = ''; - } else { - this.currentMouseOverElement = elementId; - } + this.currentMouseOverElement = this.currentMouseOverElement === elementId ? '' : elementId; } getElementCss(currentPipelineElementSettings) { @@ -175,7 +171,7 @@ export class PipelineComponent implements OnInit, OnDestroy { } isInPipeline(type) { - return this.rawPipelineModel.some(x => (x.type == type && !(x.settings.disabled))); + return this.rawPipelineModel.some(x => (x.type === type && !(x.settings.disabled))); } showMixedStreamAlert() { @@ -200,39 +196,52 @@ export class PipelineComponent implements OnInit, OnDestroy { const pipelineElementId = ui.draggable.data('pe'); const pipelineElement: PipelineElementUnion = this.findPipelineElementByElementId(pipelineElementId); if (ui.draggable.hasClass('draggable-icon')) { - this.EditorService.makePipelineAssemblyEmpty(false); - const newElementId = pipelineElement.elementId + ':' + this.JsplumbService.makeId(5); - const pipelineElementConfig = this.JsplumbService.createNewPipelineElementConfig(pipelineElement, - this.PipelineEditorService.getCoordinates(ui, this.currentZoomLevel), + this.editorService.makePipelineAssemblyEmpty(false); + const newElementId = pipelineElement.elementId + ':' + this.jsplumbService.makeId(5); + const pipelineElementConfig = this.jsplumbService.createNewPipelineElementConfig(pipelineElement, + this.pipelineEditorService.getCoordinates(ui, this.currentZoomLevel), false, false, newElementId); - if ((this.isStreamInPipeline() && pipelineElementConfig.type == 'set') || - this.isSetInPipeline() && pipelineElementConfig.type == 'stream') { + if ((this.isStreamInPipeline() && pipelineElementConfig.type === 'set') || + this.isSetInPipeline() && pipelineElementConfig.type === 'stream') { this.showMixedStreamAlert(); } else { this.rawPipelineModel.push(pipelineElementConfig); if (ui.draggable.hasClass('set')) { setTimeout(() => { - this.EditorService.updateDataSet(pipelineElementConfig.payload).subscribe(data => { + this.editorService.updateDataSet(pipelineElementConfig.payload).subscribe(data => { (pipelineElementConfig.payload as SpDataSet).eventGrounding = data.eventGrounding; (pipelineElementConfig.payload as SpDataSet).datasetInvocationId = data.invocationId; - this.JsplumbService.dataStreamDropped(pipelineElementConfig.payload.dom, pipelineElementConfig.payload as SpDataSet, true, false); + this.jsplumbService.dataStreamDropped( + pipelineElementConfig.payload.dom, + pipelineElementConfig.payload as SpDataSet, + true, + false); }); }, 0); } else if (ui.draggable.hasClass('stream')) { this.checkTopicModel(pipelineElementConfig); } else if (ui.draggable.hasClass('sepa')) { setTimeout(() => { - this.JsplumbService.dataProcessorDropped(pipelineElementConfig.payload.dom, pipelineElementConfig.payload as DataProcessorInvocation, true, false); + this.jsplumbService.dataProcessorDropped( + pipelineElementConfig.payload.dom, + pipelineElementConfig.payload as DataProcessorInvocation, + true, + false + ); }, 10); } else if (ui.draggable.hasClass('action')) { setTimeout(() => { - this.JsplumbService.dataSinkDropped(pipelineElementConfig.payload.dom, pipelineElementConfig.payload as DataSinkInvocation, true, false); + this.jsplumbService.dataSinkDropped( + pipelineElementConfig.payload.dom, + pipelineElementConfig.payload as DataSinkInvocation, + true, + false); }, 10); } - if (this.ShepherdService.isTourActive()) { - this.ShepherdService.trigger('drop-' + pipelineElementConfig.type); + if (this.shepherdService.isTourActive()) { + this.shepherdService.trigger('drop-' + pipelineElementConfig.type); } } } @@ -246,7 +255,7 @@ export class PipelineComponent implements OnInit, OnDestroy { checkTopicModel(pipelineElementConfig: PipelineElementConfig) { setTimeout(() => { - this.JsplumbService.dataStreamDropped(pipelineElementConfig.payload.dom, + this.jsplumbService.dataStreamDropped(pipelineElementConfig.payload.dom, pipelineElementConfig.payload as SpDataStream, true, false); @@ -264,12 +273,12 @@ export class PipelineComponent implements OnInit, OnDestroy { handleDeleteOption(pipelineElement: PipelineElementConfig) { this.JsplumbBridge.removeAllEndpoints(pipelineElement.payload.dom); this.rawPipelineModel.forEach(pe => { - if (pe.payload.dom == pipelineElement.payload.dom) { + if (pe.payload.dom === pipelineElement.payload.dom) { pe.settings.disabled = true; } }); if (this.rawPipelineModel.every(pe => pe.settings.disabled)) { - this.EditorService.makePipelineAssemblyEmpty(true); + this.editorService.makePipelineAssemblyEmpty(true); } this.JsplumbBridge.repaintEverything(); this.validatePipeline(); @@ -283,14 +292,14 @@ export class PipelineComponent implements OnInit, OnDestroy { this.JsplumbBridge.unbind(EVENT_CONNECTION); 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); + 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); + const pe = this.objectProvider.findElement(info.targetEndpoint.elementId, this.rawPipelineModel); (pe.payload as InvocablePipelineElementUnion).configured = false; pe.settings.openCustomize = true; info.targetEndpoint.setType('empty'); @@ -316,17 +325,17 @@ export class PipelineComponent implements OnInit, OnDestroy { }); this.JsplumbBridge.bind(EVENT_CONNECTION, (info) => { - const pe = this.ObjectProvider.findElement(info.target.id, this.rawPipelineModel); + const pe = this.objectProvider.findElement(info.target.id, this.rawPipelineModel); if (pe.settings.openCustomize) { - this.currentPipelineModel = this.ObjectProvider.makePipeline(this.rawPipelineModel); + this.currentPipelineModel = this.objectProvider.makePipeline(this.rawPipelineModel); pe.settings.loadingStatus = true; - this.ObjectProvider.updatePipeline(this.currentPipelineModel) + this.objectProvider.updatePipeline(this.currentPipelineModel) .subscribe(pipelineModificationMessage => { pe.settings.loadingStatus = false; info.targetEndpoint.setType('token'); this.validatePipeline(); this.modifyPipeline(pipelineModificationMessage.pipelineModifications); - if (this.JsplumbService.isFullyConnected(pe, this.preview)) { + if (this.jsplumbService.isFullyConnected(pe, this.preview)) { const payload = pe.payload as InvocablePipelineElementUnion; if ((payload.staticProperties && payload.staticProperties.length > 0) || this.isCustomOutput(pe)) { this.showCustomizeDialog({a: false, b: pe}); @@ -363,7 +372,7 @@ export class PipelineComponent implements OnInit, OnDestroy { pipelineModifications.forEach(modification => { const id = modification.domId; if (id !== 'undefined') { - const pe = this.ObjectProvider.findElement(id, this.rawPipelineModel); + const pe = this.objectProvider.findElement(id, this.rawPipelineModel); (pe.payload as InvocablePipelineElementUnion).staticProperties = modification.staticProperties; (pe.payload as DataProcessorInvocation).outputStrategies = modification.outputStrategies; (pe.payload as InvocablePipelineElementUnion).inputStreams = modification.inputStreams; @@ -386,9 +395,9 @@ export class PipelineComponent implements OnInit, OnDestroy { setTimeout(() => { this.pipelineCacheRunning = true; this.pipelineCacheRunningChanged.emit(this.pipelineCacheRunning); - this.PipelinePositioningService.collectPipelineElementPositions(this.pipelineCanvasMetadata, this.rawPipelineModel); - const updateCachedPipeline = this.EditorService.updateCachedPipeline(this.rawPipelineModel); - const updateCachedCanvasMetadata = this.EditorService.updateCachedCanvasMetadata(this.pipelineCanvasMetadata); + this.pipelinePositioningService.collectPipelineElementPositions(this.pipelineCanvasMetadata, this.rawPipelineModel); + const updateCachedPipeline = this.editorService.updateCachedPipeline(this.rawPipelineModel); + const updateCachedCanvasMetadata = this.editorService.updateCachedCanvasMetadata(this.pipelineCanvasMetadata); forkJoin([updateCachedPipeline, updateCachedCanvasMetadata]).subscribe(() => { this.pipelineCacheRunning = false; this.pipelineCacheRunningChanged.emit(this.pipelineCacheRunning); @@ -420,7 +429,7 @@ export class PipelineComponent implements OnInit, OnDestroy { }); } - showCustomizeDialog(pipelineElementInfo: Tuple2<Boolean, PipelineElementConfig>) { + showCustomizeDialog(pipelineElementInfo: Tuple2<boolean, PipelineElementConfig>) { const dialogRef = this.dialogService.open(CustomizeComponent, { panelType: PanelType.SLIDE_IN_PANEL, title: 'Customize ' + pipelineElementInfo.b.payload.name, @@ -450,13 +459,13 @@ export class PipelineComponent implements OnInit, OnDestroy { } announceConfiguredElement(pe: PipelineElementConfig) { - this.EditorService.announceConfiguredElement(pe.payload.dom); + this.editorService.announceConfiguredElement(pe.payload.dom); } initiatePipelineElementPreview() { if (!this.previewModeActive) { - const pipeline = this.ObjectProvider.makePipeline(this.rawPipelineModel); - this.EditorService.initiatePipelinePreview(pipeline).subscribe(response => { + const pipeline = this.objectProvider.makePipeline(this.rawPipelineModel); + this.editorService.initiatePipelinePreview(pipeline).subscribe(response => { this.pipelinePreview = response; this.previewModeActive = true; }); @@ -467,7 +476,7 @@ export class PipelineComponent implements OnInit, OnDestroy { deletePipelineElementPreview(resume: boolean) { if (this.previewModeActive) { - this.EditorService.deletePipelinePreviewRequest(this.pipelinePreview.previewId).subscribe(() => { + this.editorService.deletePipelinePreviewRequest(this.pipelinePreview.previewId).subscribe(() => { this.previewModeActive = false; if (resume) { this.initiatePipelineElementPreview(); diff --git a/ui/src/app/editor/services/editor-dialog-manager.service.ts b/ui/src/app/editor/services/editor-dialog-manager.service.ts deleted file mode 100644 index 83d218a..0000000 --- a/ui/src/app/editor/services/editor-dialog-manager.service.ts +++ /dev/null @@ -1,164 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -import * as angular from 'angular'; -import {MatchingErrorController} from "../../editor/dialog/matching-error/matching-error.controller"; -import {TopicSelectionDialog} from "../../editor/dialog/topic/topic-selection-modal.controller"; -import {PossibleElementsController} from "../../editor/dialog/possible-elements/possible-elements-dialog.controller"; -import {HelpDialogController} from "../../editor/dialog/help/help-dialog.controller"; -import {SavePipelineController} from "../../editor/dialog/save-pipeline/save-pipeline.controller"; -import {WelcomeTourDialogController} from "../../editor/dialog/welcome-tour/welcome-tour-dialog.controller"; -import {MissingElementsForTutorialDialogController} from "../../editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial-dialog.controller"; - -declare const require: any; - -export class EditorDialogManager { - - $mdDialog: any; - DialogBuilder: any; - $mdToast: any; - - constructor($mdDialog, DialogBuilder) { - this.$mdDialog = $mdDialog; - this.DialogBuilder = DialogBuilder; - } - - showMatchingErrorDialog(elementData) { - var dialogContent = this.DialogBuilder.getDialogTemplate(MatchingErrorController, require('../../editor/dialog/matching-error/matching-error.tmpl.html')); - dialogContent.locals = { - elementData: elementData - } - this.$mdDialog.show(dialogContent); - } - - showCustomizeStreamDialog(streamDescription) { - var dialogContent = this.DialogBuilder.getDialogTemplate(TopicSelectionDialog, require('../../editor/dialog/topic/topic-selection-modal.tmpl.html')); - dialogContent.locals = { - streamDescription: streamDescription - } - this.$mdDialog.show(dialogContent); - } - - showSavePipelineDialog(pipelineNew, modificationModeOn) { - var dialogContent = this.DialogBuilder.getDialogTemplate(SavePipelineController, require('../../editor/dialog/save-pipeline/submitPipelineModal.tmpl.html')); - dialogContent.locals = { - pipeline: pipelineNew, - modificationMode: modificationModeOn - } - this.$mdDialog.show(dialogContent); - } - - openHelpDialog(pipelineElementPayload) { - this.$mdDialog.show({ - controller: HelpDialogController, - controllerAs: 'ctrl', - template: require('../../editor/dialog/help/help-dialog.tmpl.html'), - parent: angular.element(document.body), - // must be false, otherwise polling of live data is not stopped in help-dialog.controller.js when dialog is closed - clickOutsideToClose: false, - locals: { - pipelineElement: pipelineElementPayload, - }, - bindToController: true - }) - }; - - openPossibleElementsDialog(rawPipelineModel, possibleElements, pipelineElementDomId) { - this.$mdDialog.show({ - controller: PossibleElementsController, - controllerAs: 'ctrl', - template: require('../../editor/dialog/possible-elements/possible-elements-dialog.tmpl.html'), - parent: angular.element(document.body), - clickOutsideToClose: true, - bindToController: true, - locals: { - rawPipelineModel: rawPipelineModel, - possibleElements: possibleElements, - pipelineElementDomId: pipelineElementDomId - } - }) - }; - - showToast(type, title, description) { - this.$mdToast.show( - this.$mdToast.simple() - .textContent(title) - .position("top right") - .hideDelay(3000) - ); - } - - showWelcomeDialog(user) { - this.$mdDialog.show({ - controller: WelcomeTourDialogController, - controllerAs: 'ctrl', - template: require('../../editor/dialog/welcome-tour/welcome-tour-dialog.tmpl.html'), - parent: angular.element(document.body), - clickOutsideToClose: false, - bindToController: true, - locals: { - user: user - } - }) - } - - showMissingElementsForTutorialDialog(pipelineElements) { - this.$mdDialog.show({ - controller: MissingElementsForTutorialDialogController, - controllerAs: 'ctrl', - template: require('../../editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial-dialog.tmpl.html'), - parent: angular.element(document.body), - clickOutsideToClose: false, - bindToController: true, - locals: { - pipelineElements: pipelineElements - } - }) - } - - showTutorialDialog() { - var confirm = this.$mdDialog.confirm() - .title('Welcome to StreamPipes!') - .textContent('If you are new to StreamPipes, check out our user guide') - .ok('Show tutorial') - .cancel('Cancel'); - - return this.$mdDialog.show(confirm); - } - - showClearAssemblyDialog(ev) { - var confirm = this.$mdDialog.confirm() - .title('Clear assembly area?') - .textContent('All pipeline elements in the assembly area will be removed.') - .targetEvent(ev) - .ok('Clear assembly') - .cancel('Cancel'); - return this.$mdDialog.show(confirm); - } - - showMixedStreamAlert(ev) { - var confirm = this.$mdDialog.confirm() - .title('Not allowed') - .textContent('Currently, it is not possible to mix data streams and data sets in a single pipeline.') - .targetEvent(ev) - .ok('Ok') - return this.$mdDialog.show(confirm); - } -} - -EditorDialogManager.$inject = ['$mdDialog', 'DialogBuilder']; \ No newline at end of file diff --git a/ui/src/app/editor/services/jsplumb-bridge.service.ts b/ui/src/app/editor/services/jsplumb-bridge.service.ts index 6a3eb77..69883a4 100644 --- a/ui/src/app/editor/services/jsplumb-bridge.service.ts +++ b/ui/src/app/editor/services/jsplumb-bridge.service.ts @@ -17,7 +17,7 @@ */ import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui'; -import { SelectOptions } from "@jsplumb/core"; +import { SelectOptions } from '@jsplumb/core'; export class JsplumbBridge { @@ -25,7 +25,7 @@ export class JsplumbBridge { } activateEndpoint(endpointId: string, endpointEnabled: boolean) { - let endpoint = this.getEndpointById(endpointId); + const endpoint = this.getEndpointById(endpointId); endpoint.enabled = endpointEnabled; } @@ -35,7 +35,7 @@ export class JsplumbBridge { } setEndpointType(endpointId: string, endpointType: string) { - let endpoint = this.getEndpointById(endpointId); + const endpoint = this.getEndpointById(endpointId); // @ts-ignore endpoint.setType(endpointType); } @@ -54,8 +54,8 @@ export class JsplumbBridge { deleteEveryEndpoint() { // TODO - //this.jsPlumbInstance.destroy(); - //this.jsPlumbInstance.deleteEveryEndpoint(); + // this.jsPlumbInstance.destroy(); + // this.jsPlumbInstance.deleteEveryEndpoint(); } setContainer(container) { @@ -110,7 +110,7 @@ export class JsplumbBridge { addEndpoint(pipelineElementDomId: string, options: any) { - options.cssClass = "sp-no-pan"; + options.cssClass = 'sp-no-pan'; return this.jsPlumbInstance.addEndpoint(document.getElementById(pipelineElementDomId), options); } diff --git a/ui/src/app/editor/services/jsplumb-config.service.ts b/ui/src/app/editor/services/jsplumb-config.service.ts index 2ddacd9..77735a7 100644 --- a/ui/src/app/editor/services/jsplumb-config.service.ts +++ b/ui/src/app/editor/services/jsplumb-config.service.ts @@ -16,10 +16,10 @@ * */ -import { Injectable } from "@angular/core"; -import { JsplumbSettings } from "../model/jsplumb.model"; -import { BezierConnector } from "@jsplumb/connector-bezier"; -import { EndpointTypeDescriptor } from "@jsplumb/core"; +import { Injectable } from '@angular/core'; +import { JsplumbSettings } from '../model/jsplumb.model'; +import { BezierConnector } from '@jsplumb/connector-bezier'; +import { EndpointTypeDescriptor } from '@jsplumb/core'; @Injectable() export class JsplumbConfigService { @@ -37,37 +37,37 @@ export class JsplumbConfigService { getEndpointTypeConfig(): Record<string, EndpointTypeDescriptor> { return { - "empty": { + 'empty': { paintStyle: { - fill: "white", - stroke: "#9E9E9E", + fill: 'white', + stroke: '#9E9E9E', strokeWidth: 2, } }, - "token": { + 'token': { paintStyle: { - fill: "#BDBDBD", - stroke: "#9E9E9E", + fill: '#BDBDBD', + stroke: '#9E9E9E', strokeWidth: 2 }, hoverPaintStyle: { - fill: "#BDBDBD", - stroke: "#4CAF50", + fill: '#BDBDBD', + stroke: '#4CAF50', strokeWidth: 4, } }, - "highlight": { + 'highlight': { paintStyle: { - fill: "white", - stroke: "#4CAF50", + fill: 'white', + stroke: '#4CAF50', strokeWidth: 4 } } - } + }; } makeConfig(settings) { - let config = {} as any; + const config = {} as any; config.streamEndpointOptions = this.makeStreamEndpointOptions(settings); config.sepaEndpointOptions = this.makeSepaEndpointOptions(settings); config.leftTargetPointOptions = this.makeLeftTargetPointOptions(settings); @@ -80,7 +80,7 @@ export class JsplumbConfigService { arrowLength: number, arrowLineWidth: number, curviness: number) { - let settings = {} as JsplumbSettings; + const settings = {} as JsplumbSettings; settings.dotRadius = dotRadius; settings.lineWidth = lineWidth; settings.arrowWidth = arrowWidth; @@ -92,50 +92,50 @@ export class JsplumbConfigService { makeStreamEndpointOptions(settings: JsplumbSettings) { return { - endpoint: {type: "Dot", options: {radius: settings.dotRadius}}, - connectorStyle: {stroke: "#BDBDBD", outlineStroke: "#BDBDBD", strokeWidth: settings.lineWidth}, + endpoint: {type: 'Dot', options: {radius: settings.dotRadius}}, + connectorStyle: {stroke: '#BDBDBD', outlineStroke: '#BDBDBD', strokeWidth: settings.lineWidth}, connector: {type: BezierConnector.type, options: {curviness: settings.curviness}}, source: true, - type: "token", + type: 'token', maxConnections: -1, - anchor: "Right", + anchor: 'Right', connectorOverlays: this.defaultConnectorOverlay(settings) - } + }; } makeSepaEndpointOptions(settings) { return { - endpoint: {type: "Dot", options: {radius: settings.dotRadius}}, + endpoint: {type: 'Dot', options: {radius: settings.dotRadius}}, connectorStyle: { - stroke: "#BDBDBD", outlineStroke: "#9E9E9E", strokeWidth: settings.lineWidth + stroke: '#BDBDBD', outlineStroke: '#9E9E9E', strokeWidth: settings.lineWidth }, connector: {type: BezierConnector.type, options: {curviness: settings.curviness}}, source: true, maxConnections: -1, - anchor: "Right", - type: "empty", + anchor: 'Right', + type: 'empty', connectorOverlays: this.defaultConnectorOverlay(settings), parameters: { - endpointType: "output" + endpointType: 'output' } - } + }; } makeLeftTargetPointOptions(settings) { return { - endpoint: {type: "Dot", options: {radius: settings.dotRadius}}, - type: "empty", - anchor: "Left", + endpoint: {type: 'Dot', options: {radius: settings.dotRadius}}, + type: 'empty', + anchor: 'Left', target: true - } + }; } defaultConnectorOverlay(settings) { return [{ - type: "Arrow", options: { - width: settings.arrowWidth, length: settings.arrowLength, location: 0.5, id: "arrow", paintStyle: { - fillStyle: "#BDBDBD", - stroke: "#9E9E9E", + type: 'Arrow', options: { + width: settings.arrowWidth, length: settings.arrowLength, location: 0.5, id: 'arrow', paintStyle: { + fillStyle: '#BDBDBD', + stroke: '#9E9E9E', strokeWidth: settings.arrowLineWidth } } diff --git a/ui/src/app/editor/services/jsplumb-endpoint.service.ts b/ui/src/app/editor/services/jsplumb-endpoint.service.ts index e3e7be3..fc554e4 100644 --- a/ui/src/app/editor/services/jsplumb-endpoint.service.ts +++ b/ui/src/app/editor/services/jsplumb-endpoint.service.ts @@ -16,8 +16,8 @@ * */ -import {Injectable} from "@angular/core"; -import {JsplumbConfigService} from "./jsplumb-config.service"; +import { Injectable } from '@angular/core'; +import { JsplumbConfigService } from './jsplumb-config.service'; @Injectable() export class JsplumbEndpointService { @@ -32,29 +32,29 @@ export class JsplumbEndpointService { getStreamEndpoint(preview: boolean, pipelineElementDomId: string) { - let jsplumbConfig = this.getJsplumbConfig(preview); - let config = jsplumbConfig.streamEndpointOptions; - config.uuid = "out-" + pipelineElementDomId; + const jsplumbConfig = this.getJsplumbConfig(preview); + const config = jsplumbConfig.streamEndpointOptions; + config.uuid = 'out-' + pipelineElementDomId; return config; } getInputEndpoint(preview, pipelineElementDomId, index): any { - let jsplumbConfig = this.getJsplumbConfig(preview); - let inConfig = jsplumbConfig.leftTargetPointOptions; - inConfig.uuid = "in-" + index + "-" + pipelineElementDomId; + const jsplumbConfig = this.getJsplumbConfig(preview); + const inConfig = jsplumbConfig.leftTargetPointOptions; + inConfig.uuid = 'in-' + index + '-' + pipelineElementDomId; return inConfig; } getOutputEndpoint(preview, pipelineElementDomId): any { - let jsplumbConfig = this.getJsplumbConfig(preview); - let outConfig = jsplumbConfig.sepaEndpointOptions; - outConfig.uuid = "out-" + pipelineElementDomId; + const jsplumbConfig = this.getJsplumbConfig(preview); + const outConfig = jsplumbConfig.sepaEndpointOptions; + outConfig.uuid = 'out-' + pipelineElementDomId; return outConfig; } getNewTargetPoint(preview, x, y, pipelineElementDomId, index): any { - let inConfig = this.getInputEndpoint(preview, pipelineElementDomId, index); - inConfig.type = "empty"; + const inConfig = this.getInputEndpoint(preview, pipelineElementDomId, index); + inConfig.type = 'empty'; inConfig.anchor = [x, y, -1, 0]; inConfig.isTarget = true; diff --git a/ui/src/app/editor/services/jsplumb-factory.service.ts b/ui/src/app/editor/services/jsplumb-factory.service.ts index 6671a82..a0f98c9 100644 --- a/ui/src/app/editor/services/jsplumb-factory.service.ts +++ b/ui/src/app/editor/services/jsplumb-factory.service.ts @@ -16,12 +16,12 @@ * */ -import { JsPlumbInstance } from "@jsplumb/core"; -import { JsplumbBridge } from "./jsplumb-bridge.service"; -import { Injectable } from "@angular/core"; -import { BrowserJsPlumbInstance, ContainmentType, newInstance } from "@jsplumb/browser-ui"; -import { PipelineElementDraggedService } from "./pipeline-element-dragged.service"; -import { JsplumbConfigService } from "./jsplumb-config.service"; +import { JsPlumbInstance } from '@jsplumb/core'; +import { JsplumbBridge } from './jsplumb-bridge.service'; +import { Injectable } from '@angular/core'; +import { BrowserJsPlumbInstance, ContainmentType, newInstance } from '@jsplumb/browser-ui'; +import { PipelineElementDraggedService } from './pipeline-element-dragged.service'; +import { JsplumbConfigService } from './jsplumb-config.service'; @Injectable() export class JsplumbFactoryService { @@ -56,7 +56,7 @@ export class JsplumbFactoryService { makePipelineEditorInstance(): BrowserJsPlumbInstance { return newInstance({ - container: document.getElementById("assembly"), dragOptions: { + container: document.getElementById('assembly'), dragOptions: { containment: ContainmentType.parent, cursor: 'pointer', zIndex: 2000, @@ -69,7 +69,7 @@ export class JsplumbFactoryService { makePipelinePreviewInstance(): BrowserJsPlumbInstance { return newInstance({ - container: document.getElementById("assembly-preview"), + container: document.getElementById('assembly-preview'), elementsDraggable: false }); } diff --git a/ui/src/app/editor/services/jsplumb.service.ts b/ui/src/app/editor/services/jsplumb.service.ts index 7ac0e1c..e36d669 100644 --- a/ui/src/app/editor/services/jsplumb.service.ts +++ b/ui/src/app/editor/services/jsplumb.service.ts @@ -16,11 +16,11 @@ * */ -import { JsplumbConfigService } from "./jsplumb-config.service"; -import { JsplumbBridge } from "./jsplumb-bridge.service"; -import { Injectable } from "@angular/core"; -import { InvocablePipelineElementUnion, PipelineElementConfig, PipelineElementUnion } from "../model/editor.model"; -import { PipelineElementTypeUtils } from "../utils/editor.utils"; +import { JsplumbConfigService } from './jsplumb-config.service'; +import { JsplumbBridge } from './jsplumb-bridge.service'; +import { Injectable } from '@angular/core'; +import { InvocablePipelineElementUnion, PipelineElementConfig, PipelineElementUnion } from '../model/editor.model'; +import { PipelineElementTypeUtils } from '../utils/editor.utils'; import { DataProcessorInvocation, DataSinkInvocation, @@ -28,26 +28,26 @@ import { SpDataSet, SpDataStream, SpDataStreamUnion -} from "../../core-model/gen/streampipes-model"; -import { JsplumbEndpointService } from "./jsplumb-endpoint.service"; -import { JsplumbFactoryService } from "./jsplumb-factory.service"; +} from '../../core-model/gen/streampipes-model'; +import { JsplumbEndpointService } from './jsplumb-endpoint.service'; +import { JsplumbFactoryService } from './jsplumb-factory.service'; import { EditorService } from './editor.service'; @Injectable() export class JsplumbService { - idCounter: number = 0; + idCounter = 0; - constructor(private JsplumbConfigService: JsplumbConfigService, - private JsplumbFactory: JsplumbFactoryService, + constructor(private jsplumbConfigService: JsplumbConfigService, + private jsplumbFactory: JsplumbFactoryService, private jsplumbEndpointService: JsplumbEndpointService, private editorService: EditorService) { } isFullyConnected(pipelineElementConfig: PipelineElementConfig, previewConfig: boolean) { - let jsplumbBridge = this.JsplumbFactory.getJsplumbBridge(previewConfig); - let payload = pipelineElementConfig.payload as InvocablePipelineElementUnion; + const jsplumbBridge = this.jsplumbFactory.getJsplumbBridge(previewConfig); + const payload = pipelineElementConfig.payload as InvocablePipelineElementUnion; return payload.inputStreams == null || jsplumbBridge.getConnections({target: document.getElementById(payload.dom)}).length == payload.inputStreams.length; } @@ -56,9 +56,9 @@ export class JsplumbService { isPreview: boolean) { return pipelineModel .streams - .map(s => this.toConfig(s, "stream", isPreview)) - .concat(pipelineModel.sepas.map(s => this.toConfig(s, "sepa", isPreview))) - .concat(pipelineModel.actions.map(s => this.toConfig(s, "action", isPreview))); + .map(s => this.toConfig(s, 'stream', isPreview)) + .concat(pipelineModel.sepas.map(s => this.toConfig(s, 'sepa', isPreview))) + .concat(pipelineModel.actions.map(s => this.toConfig(s, 'action', isPreview))); } toConfig(pe: PipelineElementUnion, @@ -72,7 +72,7 @@ export class JsplumbService { pipelineElement: PipelineElementUnion, x: number, y: number) { - let pipelineElementConfig = this.createNewPipelineElementConfigAtPosition(x, y, pipelineElement, false); + const pipelineElementConfig = this.createNewPipelineElementConfigAtPosition(x, y, pipelineElement, false); pipelineModel.push(pipelineElementConfig); if (pipelineElementConfig.payload instanceof SpDataSet) { @@ -101,9 +101,9 @@ export class JsplumbService { createElement(pipelineModel: PipelineElementConfig[], pipelineElement: InvocablePipelineElementUnion, pipelineElementDomId: string) { - let pipelineElementDom = $("#" + pipelineElementDomId); + const pipelineElementDom = $('#' + pipelineElementDomId); - let pipelineElementConfig = this.createNewPipelineElementConfigWithFixedCoordinates(pipelineElementDom, pipelineElement, false); + const pipelineElementConfig = this.createNewPipelineElementConfigWithFixedCoordinates(pipelineElementDom, pipelineElement, false); pipelineModel.push(pipelineElementConfig); setTimeout(() => { this.createAssemblyElement(pipelineElementConfig.payload.dom, @@ -131,18 +131,15 @@ export class JsplumbService { $target, previewConfig: boolean) { let options; - let jsplumbBridge = this.getBridge(previewConfig); - if ($parentElement.hasClass("stream")) { - // TODO: getJsplumbConfig depends on isPreview. Not implemented yet - options = this.jsplumbEndpointService.getJsplumbConfig(true).streamEndpointOptions; - } else { - // TODO: getJsplumbConfig depends on isPreview. Not implemented yet - options = this.jsplumbEndpointService.getJsplumbConfig(true).sepaEndpointOptions; - } + const jsplumbBridge = this.getBridge(previewConfig); + // TODO: getJsplumbConfig depends on isPreview. Not implemented yet + const jsplumbConfig = this.jsplumbEndpointService.getJsplumbConfig(true); + options = $parentElement.hasClass('stream') ? + jsplumbConfig.streamEndpointOptions : jsplumbConfig.sepaEndpointOptions; let sourceEndPoint; if (jsplumbBridge.selectEndpoints({source: $parentElement}).length > 0) { if (!(jsplumbBridge.selectEndpoints({source: $parentElement}).get(0).isFull())) { - sourceEndPoint = jsplumbBridge.selectEndpoints({source: $parentElement}).get(0) + sourceEndPoint = jsplumbBridge.selectEndpoints({source: $parentElement}).get(0); } else { sourceEndPoint = jsplumbBridge.addEndpoint($parentElement, options); } @@ -150,15 +147,15 @@ export class JsplumbService { sourceEndPoint = jsplumbBridge.addEndpoint($parentElement, options); } - let targetEndPoint = jsplumbBridge.selectEndpoints({target: $target}).get(0); + const targetEndPoint = jsplumbBridge.selectEndpoints({target: $target}).get(0); jsplumbBridge.connect({source: sourceEndPoint, target: targetEndPoint, detachable: true}); jsplumbBridge.repaintEverything(); } createNewPipelineElementConfigWithFixedCoordinates($parentElement, json, isPreview): PipelineElementConfig { - let x = $parentElement.position().left; - let y = $parentElement.position().top; + const x = $parentElement.position().left; + const y = $parentElement.position().top; return this.createNewPipelineElementConfigAtPosition(x, y, json, isPreview); } @@ -166,7 +163,7 @@ export class JsplumbService { y: number, json: any, isPreview: boolean): PipelineElementConfig { - let coord = {'x': x + 200, 'y': y}; + const coord = {'x': x + 200, 'y': y}; return this.createNewPipelineElementConfig(json, coord, isPreview, false); } @@ -175,25 +172,25 @@ export class JsplumbService { isPreview: boolean, isCompleted: boolean, newElementId?: string): PipelineElementConfig { - let displaySettings = isPreview ? 'connectable-preview' : 'connectable-editor'; - let connectable = "connectable"; - let pipelineElementConfig = {} as PipelineElementConfig; + const displaySettings = isPreview ? 'connectable-preview' : 'connectable-editor'; + const connectable = 'connectable'; + const pipelineElementConfig = {} as PipelineElementConfig; pipelineElementConfig.type = PipelineElementTypeUtils - .toCssShortHand(PipelineElementTypeUtils.fromType(pipelineElement)) + .toCssShortHand(PipelineElementTypeUtils.fromType(pipelineElement)); pipelineElementConfig.payload = this.clone(pipelineElement, newElementId); - pipelineElementConfig.settings = {connectable: connectable, + pipelineElementConfig.settings = {connectable, openCustomize: !(pipelineElement as any).configured, preview: isPreview, completed: (pipelineElement instanceof SpDataStream || pipelineElement instanceof SpDataSet || isPreview || isCompleted), disabled: false, loadingStatus: false, - displaySettings: displaySettings, + displaySettings, position: { x: coordinates.x, y: coordinates.y }}; if (!pipelineElementConfig.payload.dom) { - pipelineElementConfig.payload.dom = "jsplumb_" + this.idCounter + "_" + this.makeId(4); + pipelineElementConfig.payload.dom = 'jsplumb_' + this.idCounter + '_' + this.makeId(4); this.idCounter++; } @@ -206,13 +203,13 @@ export class JsplumbService { } else if (pipelineElement instanceof SpDataStream) { return SpDataStream.fromData(pipelineElement, new SpDataStream()); } else if (pipelineElement instanceof DataProcessorInvocation) { - let clonedPe = DataProcessorInvocation.fromData(pipelineElement, new DataProcessorInvocation()); + const clonedPe = DataProcessorInvocation.fromData(pipelineElement, new DataProcessorInvocation()); if (newElementId) { - this.updateElementIds(clonedPe, newElementId) + this.updateElementIds(clonedPe, newElementId); } return clonedPe; } else { - let clonedPe = DataSinkInvocation.fromData(pipelineElement, new DataSinkInvocation()); + const clonedPe = DataSinkInvocation.fromData(pipelineElement, new DataSinkInvocation()); if (newElementId) { this.updateElementIds(clonedPe, newElementId); } @@ -226,11 +223,12 @@ export class JsplumbService { } makeId(count: number) { - let text = ""; - const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + let text = ''; + const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - for (let i = 0; i < count; i++) + for (let i = 0; i < count; i++) { text += possible.charAt(Math.floor(Math.random() * possible.length)); + } return text; } @@ -254,47 +252,47 @@ export class JsplumbService { pipelineElement: SpDataSet, endpoints: boolean, preview: boolean) { - let jsplumbBridge = this.getBridge(preview); + const jsplumbBridge = this.getBridge(preview); if (endpoints) { - let endpointOptions = this.jsplumbEndpointService.getStreamEndpoint(preview, pipelineElementDomId); + const endpointOptions = this.jsplumbEndpointService.getStreamEndpoint(preview, pipelineElementDomId); jsplumbBridge.addEndpoint(pipelineElementDomId, endpointOptions); } return pipelineElementDomId; - }; + } dataStreamDropped(pipelineElementDomId: string, pipelineElement: SpDataStreamUnion, endpoints: boolean, preview: boolean) { - let jsplumbBridge = this.getBridge(preview); + const jsplumbBridge = this.getBridge(preview); if (endpoints) { - let endpointOptions = this.jsplumbEndpointService.getStreamEndpoint(preview, pipelineElementDomId); + const endpointOptions = this.jsplumbEndpointService.getStreamEndpoint(preview, pipelineElementDomId); jsplumbBridge.addEndpoint(pipelineElementDomId, endpointOptions); } return pipelineElementDomId; - }; + } dataProcessorDropped(pipelineElementDomId: string, pipelineElement: DataProcessorInvocation, endpoints: boolean, preview: boolean): string { - let jsplumbBridge = this.getBridge(preview); + const jsplumbBridge = this.getBridge(preview); this.dataSinkDropped(pipelineElementDomId, pipelineElement, endpoints, preview); if (endpoints) { jsplumbBridge.addEndpoint(pipelineElementDomId, this.jsplumbEndpointService.getOutputEndpoint(preview, pipelineElementDomId)); } return pipelineElementDomId; - }; + } dataSinkDropped(pipelineElementDomId: string, pipelineElement: InvocablePipelineElementUnion, endpoints: boolean, preview: boolean): string { - let jsplumbBridge = this.getBridge(preview); + const jsplumbBridge = this.getBridge(preview); if (endpoints) { - if (pipelineElement.inputStreams.length < 2) { //1 InputNode + if (pipelineElement.inputStreams.length < 2) { // 1 InputNode jsplumbBridge.addEndpoint(pipelineElementDomId, this.jsplumbEndpointService.getInputEndpoint(preview, pipelineElementDomId, 0)); } else { @@ -305,9 +303,9 @@ export class JsplumbService { } } return pipelineElementDomId; - }; + } getBridge(previewConfig: boolean): JsplumbBridge { - return this.JsplumbFactory.getJsplumbBridge(previewConfig); + return this.jsplumbFactory.getJsplumbBridge(previewConfig); } } diff --git a/ui/src/app/editor/services/object-provider.service.ts b/ui/src/app/editor/services/object-provider.service.ts index e644181..5c6a0cd 100644 --- a/ui/src/app/editor/services/object-provider.service.ts +++ b/ui/src/app/editor/services/object-provider.service.ts @@ -16,19 +16,19 @@ * */ -import { Injectable } from "@angular/core"; -import { RestApi } from "../../services/rest-api.service"; -import { InvocablePipelineElementUnion, PipelineElementConfig } from "../model/editor.model"; -import { DataSinkInvocation, Pipeline } from "../../core-model/gen/streampipes-model"; -import { EditorService } from "./editor.service"; -import { JsplumbFactoryService } from "./jsplumb-factory.service"; +import { Injectable } from '@angular/core'; +import { RestApi } from '../../services/rest-api.service'; +import { InvocablePipelineElementUnion, PipelineElementConfig } from '../model/editor.model'; +import { DataSinkInvocation, Pipeline } from '../../core-model/gen/streampipes-model'; +import { EditorService } from './editor.service'; +import { JsplumbFactoryService } from './jsplumb-factory.service'; @Injectable() export class ObjectProvider { - constructor(private RestApi: RestApi, - private EditorService: EditorService, - private JsplumbFactoryService: JsplumbFactoryService) { + constructor(private restApi: RestApi, + private editorService: EditorService, + private jsplumbFactoryService: JsplumbFactoryService) { } prepareElement(pipelineElement: InvocablePipelineElementUnion) { @@ -37,9 +37,9 @@ export class ObjectProvider { } preparePipeline(): Pipeline { - var pipeline = new Pipeline(); - pipeline.name = ""; - pipeline.description = ""; + const pipeline = new Pipeline(); + pipeline.name = ''; + pipeline.description = ''; pipeline.streams = []; pipeline.sepas = []; pipeline.actions = []; @@ -52,21 +52,21 @@ export class ObjectProvider { } makePipeline(currentPipelineElements): Pipeline { - var pipeline = this.preparePipeline(); + let pipeline = this.preparePipeline(); pipeline = this.addElementNew(pipeline, currentPipelineElements); return pipeline; } hasConnectedPipelineElement(pipelineElementDomId: string, rawPipelineModel: PipelineElementConfig[]) { - let pipelineElement = this.findElement(pipelineElementDomId, rawPipelineModel); + const pipelineElement = this.findElement(pipelineElementDomId, rawPipelineModel); if (pipelineElement.payload instanceof DataSinkInvocation) { return false; } else { return rawPipelineModel .filter(pe => !pe.settings.disabled && pe.payload.connectedTo) .find(pe => (pe.payload.connectedTo.indexOf(pipelineElementDomId) > -1)) - != undefined; + !== undefined; } } @@ -75,13 +75,13 @@ export class ObjectProvider { } addElementNew(pipeline, currentPipelineElements: PipelineElementConfig[]): Pipeline { - let JsplumbBridge = this.JsplumbFactoryService.getJsplumbBridge(false); + const JsplumbBridge = this.jsplumbFactoryService.getJsplumbBridge(false); currentPipelineElements.forEach(pe => { - if (pe.settings.disabled == undefined || !(pe.settings.disabled)) { + if (pe.settings.disabled === undefined || !(pe.settings.disabled)) { if (pe.type === 'sepa' || pe.type === 'action') { let payload = pe.payload; payload = this.prepareElement(payload as InvocablePipelineElementUnion); - let connections = JsplumbBridge.getConnections({ + const connections = JsplumbBridge.getConnections({ target: document.getElementById(payload.dom) }); for (let i = 0; i < connections.length; i++) { @@ -90,8 +90,7 @@ export class ObjectProvider { if (payload.connectedTo && payload.connectedTo.length > 0) { pe.type === 'action' ? pipeline.actions.push(payload) : pipeline.sepas.push(payload); } - } - else { + } else { pipeline.streams.push(pe.payload); } } @@ -100,6 +99,6 @@ export class ObjectProvider { } updatePipeline(pipeline: Pipeline) { - return this.EditorService.updatePartialPipeline(pipeline); + return this.editorService.updatePartialPipeline(pipeline); } } diff --git a/ui/src/app/editor/services/pipeline-canvas-scrolling.service.ts b/ui/src/app/editor/services/pipeline-canvas-scrolling.service.ts index 4eef96e..5be904d 100644 --- a/ui/src/app/editor/services/pipeline-canvas-scrolling.service.ts +++ b/ui/src/app/editor/services/pipeline-canvas-scrolling.service.ts @@ -16,8 +16,8 @@ * */ -import {Injectable} from "@angular/core"; -import {Subject} from "rxjs"; +import { Injectable } from '@angular/core'; +import { Subject } from 'rxjs'; @Injectable() export class PipelineCanvasScrollingService { diff --git a/ui/src/app/editor/services/pipeline-editor.service.ts b/ui/src/app/editor/services/pipeline-editor.service.ts index fea88eb..1057188 100644 --- a/ui/src/app/editor/services/pipeline-editor.service.ts +++ b/ui/src/app/editor/services/pipeline-editor.service.ts @@ -16,7 +16,7 @@ * */ -import {Injectable} from "@angular/core"; +import { Injectable } from '@angular/core'; @Injectable() export class PipelineEditorService { @@ -25,9 +25,8 @@ export class PipelineEditorService { } getCoordinates(ui, currentZoomLevel) { - - var newLeft = this.getDropPositionX(ui.helper, currentZoomLevel); - var newTop = this.getDropPositionY(ui.helper, currentZoomLevel); + const newLeft = this.getDropPositionX(ui.helper, currentZoomLevel); + const newTop = this.getDropPositionY(ui.helper, currentZoomLevel); return { 'x': newLeft, 'y': newTop @@ -35,19 +34,19 @@ export class PipelineEditorService { } getDropPositionY(helper, currentZoomLevel) { - var newTop; - var helperPos = helper.offset(); - var divPos = $('#assembly').offset(); - newTop = (helperPos.top - divPos.top) + (1 - currentZoomLevel) * ((helperPos.top - divPos.top) * 2); - return newTop; + const helperPos = helper.offset(); + const divPos = this.getDivPos(); + return (helperPos.top - divPos.top) + (1 - currentZoomLevel) * ((helperPos.top - divPos.top) * 2); } getDropPositionX(helper, currentZoomLevel) { - var newLeft; - var helperPos = helper.offset(); - var divPos = $('#assembly').offset(); - newLeft = (helperPos.left - divPos.left) + (1 - currentZoomLevel) * ((helperPos.left - divPos.left) * 2); - return newLeft; + const helperPos = helper.offset(); + const divPos = this.getDivPos(); + return (helperPos.left - divPos.left) + (1 - currentZoomLevel) * ((helperPos.left - divPos.left) * 2); + } + + getDivPos() { + return $('#assembly').offset(); } } diff --git a/ui/src/app/editor/services/pipeline-element-dragged.service.ts b/ui/src/app/editor/services/pipeline-element-dragged.service.ts index e209ee4..16ae51e 100644 --- a/ui/src/app/editor/services/pipeline-element-dragged.service.ts +++ b/ui/src/app/editor/services/pipeline-element-dragged.service.ts @@ -16,9 +16,9 @@ * */ -import {Injectable} from "@angular/core"; -import {Subject} from "rxjs"; -import {PipelineElementPosition} from "../model/editor.model"; +import { Injectable } from '@angular/core'; +import { Subject } from 'rxjs'; +import { PipelineElementPosition } from '../model/editor.model'; @Injectable() export class PipelineElementDraggedService { diff --git a/ui/src/app/editor/services/pipeline-element-recommendation.service.ts b/ui/src/app/editor/services/pipeline-element-recommendation.service.ts index d8df30c..d6e01c9 100644 --- a/ui/src/app/editor/services/pipeline-element-recommendation.service.ts +++ b/ui/src/app/editor/services/pipeline-element-recommendation.service.ts @@ -16,39 +16,38 @@ * */ -import {Injectable} from "@angular/core"; -import {EditorService} from "./editor.service"; -import {PipelineElementUnion} from "../model/editor.model"; +import { Injectable } from '@angular/core'; +import { PipelineElementUnion } from '../model/editor.model'; import { InvocableStreamPipesEntity, PipelineElementRecommendation, SpDataStream -} from "../../core-model/gen/streampipes-model"; +} from '../../core-model/gen/streampipes-model'; @Injectable() export class PipelineElementRecommendationService { - constructor(private EditorService: EditorService) { + constructor() { } collectPossibleElements(allElements: PipelineElementUnion[], possibleElements: PipelineElementRecommendation[]) { - var possibleElementConfigs = []; + const possibleElementConfigs = []; possibleElements.forEach(pe => { possibleElementConfigs.push(this.getPipelineElementContents(allElements, pe.elementId)[0]); - }) + }); return possibleElementConfigs; } populateRecommendedList(allElements, recs) { - let elementRecommendations: any = []; - recs.sort(function (a, b) { + const elementRecommendations: any = []; + recs.sort((a, b) => { return (a.count > b.count) ? -1 : ((b.count > a.count) ? 1 : 0); }); - let maxRecs = recs.length > 7 ? 7 : recs.length; + const maxRecs = recs.length > 7 ? 7 : recs.length; for (let i = 0; i < maxRecs; i++) { - let el = recs[i]; - let elements = this.getPipelineElementContents(allElements, el.elementId); - let element = elements[0]; + const el = recs[i]; + const elements = this.getPipelineElementContents(allElements, el.elementId); + const element = elements[0]; (element as any).weight = el.weight; elementRecommendations.push(element); } diff --git a/ui/src/app/editor/services/pipeline-positioning.service.ts b/ui/src/app/editor/services/pipeline-positioning.service.ts index 8e6b682..889fd9d 100644 --- a/ui/src/app/editor/services/pipeline-positioning.service.ts +++ b/ui/src/app/editor/services/pipeline-positioning.service.ts @@ -16,30 +16,30 @@ * */ -import * as dagre from "dagre"; -import { JsplumbBridge } from "./jsplumb-bridge.service"; -import { JsplumbConfigService } from "./jsplumb-config.service"; -import { JsplumbService } from "./jsplumb.service"; -import { Injectable } from "@angular/core"; -import { PipelineElementConfig } from "../model/editor.model"; +import * as dagre from 'dagre'; +import { JsplumbBridge } from './jsplumb-bridge.service'; +import { JsplumbConfigService } from './jsplumb-config.service'; +import { JsplumbService } from './jsplumb.service'; +import { Injectable } from '@angular/core'; +import { PipelineElementConfig } from '../model/editor.model'; import { DataProcessorInvocation, DataSinkInvocation, PipelineCanvasMetadata, PipelineElementMetadata, SpDataStream -} from "../../core-model/gen/streampipes-model"; -import { JsplumbFactoryService } from "./jsplumb-factory.service"; -import { ObjectProvider } from "./object-provider.service"; -import { Connection } from "@jsplumb/core"; +} from '../../core-model/gen/streampipes-model'; +import { JsplumbFactoryService } from './jsplumb-factory.service'; +import { ObjectProvider } from './object-provider.service'; +import { Connection } from '@jsplumb/core'; @Injectable() export class PipelinePositioningService { - constructor(private JsplumbService: JsplumbService, - private JsplumbConfigService: JsplumbConfigService, - private JsplumbFactoryService: JsplumbFactoryService, - private ObjectProvider: ObjectProvider) { + constructor(private jsplumbService: JsplumbService, + private jsplumbConfigService: JsplumbConfigService, + private jsplumbFactoryService: JsplumbFactoryService, + private objectProvider: ObjectProvider) { } collectPipelineElementPositions(pipelineCanvasMetadata: PipelineCanvasMetadata, @@ -52,10 +52,10 @@ export class PipelinePositioningService { collectPipelineElementPosition(domId: string, pipelineCanvasMetadata: PipelineCanvasMetadata) { - let elementRef = $(`#${domId}`); + const elementRef = $(`#${domId}`); if (elementRef && elementRef.position()) { - let leftPos = elementRef.position().left; - let topPos = elementRef.position().top; + const leftPos = elementRef.position().left; + const topPos = elementRef.position().top; if (!pipelineCanvasMetadata.pipelineElementMetadata) { pipelineCanvasMetadata.pipelineElementMetadata = {}; } @@ -74,32 +74,32 @@ export class PipelinePositioningService { previewConfig: boolean, autoLayout: boolean, pipelineCanvasMetadata?: PipelineCanvasMetadata) { - let jsPlumbBridge = this.JsplumbFactoryService.getJsplumbBridge(previewConfig); + const jsPlumbBridge = this.jsplumbFactoryService.getJsplumbBridge(previewConfig); - let jsplumbConfig = previewConfig ? - this.JsplumbConfigService.getPreviewConfig() : - this.JsplumbConfigService.getEditorConfig(); + const jsplumbConfig = previewConfig ? + this.jsplumbConfigService.getPreviewConfig() : + this.jsplumbConfigService.getEditorConfig(); rawPipelineModel.forEach(currentPe => { if (!currentPe.settings.disabled) { - if (currentPe.type === "stream" || currentPe.type === "set") { - this.JsplumbService.dataStreamDropped( + if (currentPe.type === 'stream' || currentPe.type === 'set') { + this.jsplumbService.dataStreamDropped( currentPe.payload.dom, currentPe.payload as SpDataStream, true, previewConfig ); } - if (currentPe.type === "sepa") { - this.JsplumbService.dataProcessorDropped( + if (currentPe.type === 'sepa') { + this.jsplumbService.dataProcessorDropped( currentPe.payload.dom, currentPe.payload as DataProcessorInvocation, true, previewConfig ); } - if (currentPe.type === "action") { - this.JsplumbService.dataSinkDropped( + if (currentPe.type === 'action') { + this.jsplumbService.dataSinkDropped( currentPe.payload.dom, currentPe.payload as DataSinkInvocation, true, @@ -113,7 +113,7 @@ export class PipelinePositioningService { if (autoLayout) { this.layoutGraph( targetCanvas, - "div[id^='jsplumb']", + 'div[id^=\'jsplumb\']', previewConfig ? 75 : 110, previewConfig ); @@ -128,37 +128,37 @@ export class PipelinePositioningService { dimension: number, previewConfig: boolean) { - let jsPlumbBridge = this.JsplumbFactoryService.getJsplumbBridge(previewConfig); - let g = new dagre.graphlib.Graph(); - g.setGraph({rankdir: "LR", ranksep: previewConfig ? "50" : "100"}); + const jsPlumbBridge = this.jsplumbFactoryService.getJsplumbBridge(previewConfig); + const g = new dagre.graphlib.Graph(); + g.setGraph({rankdir: 'LR', ranksep: previewConfig ? '50' : '100'}); g.setDefaultEdgeLabel(function () { - return {} + return {}; }); - let nodes = $(canvasId).find(nodeIdentifier).get(); + const nodes = $(canvasId).find(nodeIdentifier).get(); nodes.forEach((n) => { g.setNode(n.id, {label: n.id, width: dimension, height: dimension}); }); - let edges = jsPlumbBridge.getAllConnections() as Connection[]; + const edges = jsPlumbBridge.getAllConnections() as Connection[]; edges.forEach(edge => { g.setEdge(edge.source.id, edge.target.id); }); dagre.layout(g); g.nodes().forEach(v => { - let elementRef = $(`#${v}`); - elementRef.css("left", g.node(v).x + "px"); - elementRef.css("top", g.node(v).y + "px"); + const elementRef = $(`#${v}`); + elementRef.css('left', g.node(v).x + 'px'); + elementRef.css('top', g.node(v).y + 'px'); }); } layoutGraphFromCanvasMetadata(pipelineCanvasMetadata: PipelineCanvasMetadata) { Object.entries(pipelineCanvasMetadata.pipelineElementMetadata).forEach( ([key, value]) => { - let elementRef = $(`#${key}`); + const elementRef = $(`#${key}`); if (elementRef) { - elementRef.css("left", value.position.x + "px"); - elementRef.css("top", value.position.y + "px"); + elementRef.css('left', value.position.x + 'px'); + elementRef.css('top', value.position.y + 'px'); } } ); @@ -168,30 +168,31 @@ export class PipelinePositioningService { previewConfig: boolean, jsplumbConfig: any, jsPlumbBridge: JsplumbBridge) { - let source, target; + let source; + let target; jsPlumbBridge.setSuspendDrawing(true); rawPipelineModel.forEach(pe => { - if (pe.type == "sepa" || pe.type == "action") { + if (pe.type === 'sepa' || pe.type === 'action') { if (!(pe.settings.disabled) && pe.payload.connectedTo) { pe.payload.connectedTo.forEach((connection, index) => { source = connection; target = pe.payload.dom; - let sourceEndpointId = "out-" + connection; - let inTargetEndpointId = "in-" + index + "-" + pe.payload.dom; + const sourceEndpointId = 'out-' + connection; + const inTargetEndpointId = 'in-' + index + '-' + pe.payload.dom; jsPlumbBridge.connect( { uuids: [sourceEndpointId, inTargetEndpointId], detachable: !previewConfig } ); - jsPlumbBridge.activateEndpointWithType(sourceEndpointId, true, "token"); - jsPlumbBridge.activateEndpointWithType(inTargetEndpointId, true, "token"); + jsPlumbBridge.activateEndpointWithType(sourceEndpointId, true, 'token'); + jsPlumbBridge.activateEndpointWithType(inTargetEndpointId, true, 'token'); if (!(pe.payload instanceof DataSinkInvocation) && - !(this.ObjectProvider.hasConnectedPipelineElement(pe.payload.dom, rawPipelineModel))) { - let outTargetEndpointId = "out-" + pe.payload.dom; - jsPlumbBridge.activateEndpointWithType(outTargetEndpointId, true, "token"); + !(this.objectProvider.hasConnectedPipelineElement(pe.payload.dom, rawPipelineModel))) { + const outTargetEndpointId = 'out-' + pe.payload.dom; + jsPlumbBridge.activateEndpointWithType(outTargetEndpointId, true, 'token'); } }); } diff --git a/ui/src/app/editor/services/pipeline-validation.service.ts b/ui/src/app/editor/services/pipeline-validation.service.ts index b3329fe..3233509 100644 --- a/ui/src/app/editor/services/pipeline-validation.service.ts +++ b/ui/src/app/editor/services/pipeline-validation.service.ts @@ -23,7 +23,7 @@ import { PipelineElementConfig } from '../model/editor.model'; import { DataProcessorInvocation, DataSinkInvocation } from '../../core-model/gen/streampipes-model'; import { JsplumbFactoryService } from './jsplumb-factory.service'; import { UserErrorMessage } from '../../core-model/base/UserErrorMessage'; -import { Connection } from "@jsplumb/core"; +import { Connection } from '@jsplumb/core'; @Injectable() export class PipelineValidationService { @@ -131,7 +131,7 @@ export class PipelineValidationService { const g = this.makeGraph(rawPipelineModel, jsplumbBridge); const tarjan = dagre.graphlib.alg.tarjan(g); - return tarjan.length == 1; + return tarjan.length === 1; } isInAssembly(rawPipelineModel: PipelineElementConfig[], type) { diff --git a/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.ts b/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.ts index 9125e2f..549c30c 100644 --- a/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.ts +++ b/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.ts @@ -16,13 +16,13 @@ * */ -import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core"; -import {Pipeline} from "../../../core-model/gen/streampipes-model"; -import {PipelineElementConfig, PipelineElementUnion} from "../../../editor/model/editor.model"; -import {PipelinePositioningService} from "../../../editor/services/pipeline-positioning.service"; -import {JsplumbService} from "../../../editor/services/jsplumb.service"; -import {ObjectProvider} from "../../../editor/services/object-provider.service"; -import {JsplumbFactoryService} from "../../../editor/services/jsplumb-factory.service"; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Pipeline } from '../../../core-model/gen/streampipes-model'; +import { PipelineElementConfig, PipelineElementUnion } from '../../../editor/model/editor.model'; +import { PipelinePositioningService } from '../../../editor/services/pipeline-positioning.service'; +import { JsplumbService } from '../../../editor/services/jsplumb.service'; +import { ObjectProvider } from '../../../editor/services/object-provider.service'; +import { JsplumbFactoryService } from '../../../editor/services/jsplumb-factory.service'; @Component({ selector: 'pipeline-preview', @@ -42,26 +42,24 @@ export class PipelinePreviewComponent implements OnInit { @Output() selectedElementEmitter: EventEmitter<PipelineElementUnion> = new EventEmitter<PipelineElementUnion>(); - constructor(private PipelinePositioningService: PipelinePositioningService, - private JsplumbService: JsplumbService, - private JsplumbFactoryService: JsplumbFactoryService, - private ObjectProvider: ObjectProvider) { - this.PipelinePositioningService = PipelinePositioningService; - this.ObjectProvider = ObjectProvider; + constructor(private pipelinePositioningService: PipelinePositioningService, + private jsplumbService: JsplumbService, + private jsplumbFactoryService: JsplumbFactoryService, + private objectProvider: ObjectProvider) { } ngOnInit() { setTimeout(() => { - var elid = "#" + this.jspcanvas; - this.rawPipelineModel = this.JsplumbService.makeRawPipeline(this.pipeline, true); + const elid = '#' + this.jspcanvas; + this.rawPipelineModel = this.jsplumbService.makeRawPipeline(this.pipeline, true); setTimeout(() => { - this.PipelinePositioningService.displayPipeline(this.rawPipelineModel, elid, true, true); - var existingEndpointIds = []; + this.pipelinePositioningService.displayPipeline(this.rawPipelineModel, elid, true, true); + const existingEndpointIds = []; setTimeout(() => { - this.JsplumbFactoryService.getJsplumbBridge(true).selectEndpoints().each(endpoint => { + this.jsplumbFactoryService.getJsplumbBridge(true).selectEndpoints().each(endpoint => { if (existingEndpointIds.indexOf(endpoint.element.id) === -1) { $(endpoint.element).click(() => { - let payload = this.ObjectProvider.findElement(endpoint.element.id, this.rawPipelineModel).payload; + const payload = this.objectProvider.findElement(endpoint.element.id, this.rawPipelineModel).payload; this.selectedElementEmitter.emit(payload); }); existingEndpointIds.push(endpoint.element.id);
