From ee2eb99f5e996b941757c2e747af6df0db61ffc6 Mon Sep 17 00:00:00 2001 From: Anjali walsatwar Date: Wed, 10 Oct 2018 11:58:51 +0530 Subject: composition-graph refactoring Issue-ID: SDC-1789 Change-Id: I65f8b68fd79dc9e9cbc78fe1b7f06af24f777985 Signed-off-by: Anjali walsatwar --- .../composition-graph.directive.ts | 448 +++++++++------------ 1 file changed, 197 insertions(+), 251 deletions(-) (limited to 'catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts') diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts index e40792dc7e..804e772ac4 100644 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts @@ -35,133 +35,126 @@ import { NodesFactory, Point } from "app/models"; -import {ComponentInstanceFactory, ComponentFactory, GRAPH_EVENTS, GraphColors} from "app/utils"; -import {EventListenerService, LoaderService} from "app/services"; -import {CompositionGraphLinkUtils} from "./utils/composition-graph-links-utils"; -import {CompositionGraphGeneralUtils} from "./utils/composition-graph-general-utils"; -import {CompositionGraphNodesUtils} from "./utils/composition-graph-nodes-utils"; -import {CommonGraphUtils} from "../common/common-graph-utils"; -import {MatchCapabilitiesRequirementsUtils} from "./utils/match-capability-requierment-utils"; -import {CompositionGraphPaletteUtils} from "./utils/composition-graph-palette-utils"; -import {ComponentInstanceNodesStyle} from "../common/style/component-instances-nodes-style"; -import {CytoscapeEdgeEditation} from 'third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js'; -import {ComponentServiceNg2} from "../../../ng2/services/component-services/component.service"; -import {ComponentGenericResponse} from "../../../ng2/services/responses/component-generic-response"; -import {ModalService} from "../../../ng2/services/modal.service"; -import {ConnectionWizardService} from "../../../ng2/pages/connection-wizard/connection-wizard.service"; -import {StepModel} from "../../../models/wizard-step"; -import {FromNodeStepComponent} from "app/ng2/pages/connection-wizard/from-node-step/from-node-step.component"; -import {PropertiesStepComponent} from "app/ng2/pages/connection-wizard/properties-step/properties-step.component"; -import {ToNodeStepComponent} from "app/ng2/pages/connection-wizard/to-node-step/to-node-step.component"; -import {ConnectionWizardHeaderComponent} from "app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component"; -import {ConnectionPropertiesViewComponent} from "../../../ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component"; -import {ComponentInstanceServiceNg2} from "../../../ng2/services/component-instance-services/component-instance.service"; -import {EVENTS} from "../../../utils/constants"; -import {PropertyBEModel} from "../../../models/properties-inputs/property-be-model"; -import {ForwardingPath} from "app/models/forwarding-path"; -import {ServicePathGraphUtils} from "./utils/composition-graph-service-path-utils"; -import {CompositionCiServicePathLink} from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link"; +import { ComponentInstanceFactory, ComponentFactory, GRAPH_EVENTS, GraphColors } from "app/utils"; +import { EventListenerService, LoaderService } from "app/services"; +import { CompositionGraphLinkUtils } from "./utils/composition-graph-links-utils"; +import { CompositionGraphGeneralUtils } from "./utils/composition-graph-general-utils"; +import { CompositionGraphNodesUtils } from "./utils/composition-graph-nodes-utils"; +import { CommonGraphUtils } from "../common/common-graph-utils"; +import { MatchCapabilitiesRequirementsUtils } from "./utils/match-capability-requierment-utils"; +import { CompositionGraphPaletteUtils } from "./utils/composition-graph-palette-utils"; +import { ComponentInstanceNodesStyle } from "../common/style/component-instances-nodes-style"; +import { CytoscapeEdgeEditation } from 'third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js'; +import { ComponentServiceNg2 } from "../../../ng2/services/component-services/component.service"; +import { ComponentGenericResponse } from "../../../ng2/services/responses/component-generic-response"; +import { ModalService } from "../../../ng2/services/modal.service"; +import { ConnectionWizardService } from "../../../ng2/pages/connection-wizard/connection-wizard.service"; +import { StepModel } from "../../../models/wizard-step"; +import { FromNodeStepComponent } from "app/ng2/pages/connection-wizard/from-node-step/from-node-step.component"; +import { PropertiesStepComponent } from "app/ng2/pages/connection-wizard/properties-step/properties-step.component"; +import { ToNodeStepComponent } from "app/ng2/pages/connection-wizard/to-node-step/to-node-step.component"; +import { ConnectionWizardHeaderComponent } from "app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component"; +import { ConnectionPropertiesViewComponent } from "../../../ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component"; +import { ComponentInstanceServiceNg2 } from "../../../ng2/services/component-instance-services/component-instance.service"; +import { EVENTS } from "../../../utils/constants"; +import { PropertyBEModel } from "../../../models/properties-inputs/property-be-model"; +import { ForwardingPath } from "app/models/forwarding-path"; +import { ServicePathGraphUtils } from "./utils/composition-graph-service-path-utils"; +import { CompositionCiServicePathLink } from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link"; import { ZoneInstance, ZoneInstanceMode, ZoneInstanceType, ZoneInstanceAssignmentType } from "app/models/graph/zones/zone-instance"; -import {Zone} from "app/models/graph/zones/zone"; -import {CompositionGraphZoneUtils} from "./utils/composition-graph-zone-utils"; -import {UIZoneInstanceObject} from "../../../models/ui-models/ui-zone-instance-object"; -import {GroupInstance} from "../../../models/graph/zones/group-instance"; -import {PolicyInstance} from "../../../models/graph/zones/policy-instance"; +import { Zone } from "app/models/graph/zones/zone"; +import { CompositionGraphZoneUtils } from "./utils/composition-graph-zone-utils"; +import { UIZoneInstanceObject } from "../../../models/ui-models/ui-zone-instance-object"; +import { GroupInstance } from "../../../models/graph/zones/group-instance"; +import { PolicyInstance } from "../../../models/graph/zones/policy-instance"; export interface ICompositionGraphScope extends ng.IScope { - component:Component; - isLoading:boolean; - isViewOnly:boolean; - withSidebar:boolean; + component: Component; + isLoading: boolean; + isViewOnly: boolean; + withSidebar: boolean; //zones newZoneInstance; - zoneTagMode:string; - activeZoneInstance:ZoneInstance; - zones:Array; - zoneMinimizeToggle(zoneType:ZoneInstanceType):void; - zoneInstanceTagged(taggedInstance:ZoneInstance):void; - zoneInstanceModeChanged(newMode:ZoneInstanceMode, instance:ZoneInstance, zoneId:ZoneInstanceType); - unsetActiveZoneInstance():void; - clickOutsideZoneInstance():void; - zoneAssignmentSaveStart():void; - zoneAssignmentSaveComplete(success:boolean):void; + zoneTagMode: string; + activeZoneInstance: ZoneInstance; + zones: Array; + zoneMinimizeToggle(zoneType: ZoneInstanceType): void; + zoneInstanceTagged(taggedInstance: ZoneInstance): void; + zoneInstanceModeChanged(newMode: ZoneInstanceMode, instance: ZoneInstance, zoneId: ZoneInstanceType); + unsetActiveZoneInstance(): void; + clickOutsideZoneInstance(): void; + zoneAssignmentSaveStart(): void; + zoneAssignmentSaveComplete(success: boolean): void; // Link menu - create link menu - relationMenuDirectiveObj:ConnectRelationModel; - isLinkMenuOpen:boolean; - createLinkFromMenu:(chosenMatch:Match, vl:Component)=>void; - saveChangedCapabilityProperties:()=>Promise; + relationMenuDirectiveObj: ConnectRelationModel; + isLinkMenuOpen: boolean; + createLinkFromMenu: (chosenMatch: Match, vl: Component) => void; + saveChangedCapabilityProperties: () => Promise; //modify link menu - for now only delete menu - relationMenuTimeout:ng.IPromise; - linkMenuObject:LinkMenu; - isOnDrag:boolean; + relationMenuTimeout: ng.IPromise; + linkMenuObject: LinkMenu; + isOnDrag: boolean; //left palette functions callbacks - dropCallback(event:JQueryEventObject, ui:any):void; - beforeDropCallback(event:IDragDropEvent):void; - verifyDrop(event:JQueryEventObject, ui:any):void; + dropCallback(event: JQueryEventObject, ui: any): void; + beforeDropCallback(event: IDragDropEvent): void; + verifyDrop(event: JQueryEventObject, ui: any): void; //Links menus - viewRelation(link:Cy.CollectionEdges):void; - deleteRelation(link:Cy.CollectionEdges):void; + viewRelation(link: Cy.CollectionEdges): void; + deleteRelation(link: Cy.CollectionEdges): void; hideRelationMenu(); //search,zoom in/out/all - componentInstanceNames:Array; //id, name - zoom(zoomIn:boolean):void; - zoomAllWithoutSidebar():void; - getAutoCompleteValues(searchTerm:string):void; - highlightSearchMatches(searchTerm:string):void; - - canvasMenuProps:any; - - createOrUpdateServicePath(data:any):void; - deletePathsOnCy():void; - drawPathOnCy(data:ForwardingPath):void; - selectedPathId:string; - - /*//asset popover menu - assetPopoverObj:AssetPopoverObj; - assetPopoverOpen:boolean; - hideAssetPopover():void; - deleteNode(nodeId:string):void;*/ + componentInstanceNames: Array; //id, name + zoom(zoomIn: boolean): void; + zoomAllWithoutSidebar(): void; + getAutoCompleteValues(searchTerm: string): void; + highlightSearchMatches(searchTerm: string): void; + + canvasMenuProps: any; + + createOrUpdateServicePath(data: any): void; + deletePathsOnCy(): void; + drawPathOnCy(data: ForwardingPath): void; + selectedPathId: string; } export class CompositionGraph implements ng.IDirective { - private _cy:Cy.Instance; - private _currentlyCLickedNodePosition:Cy.Position; - // private $document:JQuery = $(document); - private dragElement:JQuery; - private dragComponent:ComponentInstance; - - constructor(private $q:ng.IQService, - private $log:ng.ILogService, - private $timeout:ng.ITimeoutService, - private NodesFactory:NodesFactory, - private CompositionGraphLinkUtils:CompositionGraphLinkUtils, - private GeneralGraphUtils:CompositionGraphGeneralUtils, - private ComponentInstanceFactory:ComponentInstanceFactory, - private NodesGraphUtils:CompositionGraphNodesUtils, - private eventListenerService:EventListenerService, - private ComponentFactory:ComponentFactory, - private LoaderService:LoaderService, - private commonGraphUtils:CommonGraphUtils, - private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils, - private CompositionGraphPaletteUtils:CompositionGraphPaletteUtils, - private compositionGraphZoneUtils:CompositionGraphZoneUtils, - private ComponentServiceNg2:ComponentServiceNg2, - private ModalServiceNg2:ModalService, - private ConnectionWizardServiceNg2:ConnectionWizardService, - private ComponentInstanceServiceNg2:ComponentInstanceServiceNg2, - private servicePathGraphUtils:ServicePathGraphUtils) { + private _cy: Cy.Instance; + private _currentlyCLickedNodePosition: Cy.Position; + private dragElement: JQuery; + private dragComponent: ComponentInstance; + + constructor(private $q: ng.IQService, + private $log: ng.ILogService, + private $timeout: ng.ITimeoutService, + private NodesFactory: NodesFactory, + private CompositionGraphLinkUtils: CompositionGraphLinkUtils, + private GeneralGraphUtils: CompositionGraphGeneralUtils, + private ComponentInstanceFactory: ComponentInstanceFactory, + private NodesGraphUtils: CompositionGraphNodesUtils, + private eventListenerService: EventListenerService, + private ComponentFactory: ComponentFactory, + private LoaderService: LoaderService, + private commonGraphUtils: CommonGraphUtils, + private matchCapabilitiesRequirementsUtils: MatchCapabilitiesRequirementsUtils, + private CompositionGraphPaletteUtils: CompositionGraphPaletteUtils, + private compositionGraphZoneUtils: CompositionGraphZoneUtils, + private ComponentServiceNg2: ComponentServiceNg2, + private ModalServiceNg2: ModalService, + private ConnectionWizardServiceNg2: ConnectionWizardService, + private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2, + private servicePathGraphUtils: ServicePathGraphUtils) { } @@ -173,7 +166,7 @@ export class CompositionGraph implements ng.IDirective { withSidebar: '=' }; - link = (scope:ICompositionGraphScope, el:JQuery) => { + link = (scope: ICompositionGraphScope, el: JQuery) => { this.loadGraph(scope, el); if (!scope.component.groupInstances || !scope.component.policies) { @@ -184,7 +177,7 @@ export class CompositionGraph implements ng.IDirective { this.loadGraphData(scope); } - + scope.$on('$destroy', () => { this._cy.destroy(); _.forEach(GRAPH_EVENTS, (event) => { @@ -196,7 +189,7 @@ export class CompositionGraph implements ng.IDirective { }; - private loadGraphData = (scope:ICompositionGraphScope) => { + private loadGraphData = (scope: ICompositionGraphScope) => { this.initGraphNodes(scope.component.componentInstances, scope.isViewOnly); this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations, scope.component.getRelationRequirementCapability.bind(scope.component)); this.commonGraphUtils.initUcpeChildren(this._cy); @@ -206,7 +199,7 @@ export class CompositionGraph implements ng.IDirective { }); } - private loadGraph = (scope:ICompositionGraphScope, el:JQuery) => { + private loadGraph = (scope: ICompositionGraphScope, el: JQuery) => { let graphEl = el.find('.sdc-composition-graph-wrapper'); this.initGraph(graphEl, scope.isViewOnly); this.initDropZone(scope); @@ -216,7 +209,7 @@ export class CompositionGraph implements ng.IDirective { this.initViewMode(scope.isViewOnly); }; - private initGraph(graphEl:JQuery, isViewOnly:boolean) { + private initGraph(graphEl: JQuery, isViewOnly: boolean) { this._cy = cytoscape({ container: graphEl, @@ -233,7 +226,7 @@ export class CompositionGraph implements ng.IDirective { }); } - private initViewMode(isViewOnly:boolean) { + private initViewMode(isViewOnly: boolean) { if (isViewOnly) { //remove event listeners @@ -246,9 +239,9 @@ export class CompositionGraph implements ng.IDirective { } }; - private registerCustomEvents(scope:ICompositionGraphScope, el:JQuery) { + private registerCustomEvents(scope: ICompositionGraphScope, el: JQuery) { - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, (groupInstance:GroupInstance) => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, (groupInstance: GroupInstance) => { this.compositionGraphZoneUtils.findAndUpdateZoneInstanceData(scope.zones, groupInstance); this.GeneralGraphUtils.showGroupUpdateSuccess(); }); @@ -258,7 +251,7 @@ export class CompositionGraph implements ng.IDirective { this.GeneralGraphUtils.showPolicyUpdateSuccess(); }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (leftPaletteComponent:LeftPaletteComponent) => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (leftPaletteComponent: LeftPaletteComponent) => { if (scope.isOnDrag) { return; } @@ -280,7 +273,7 @@ export class CompositionGraph implements ng.IDirective { //----------------------- ORIT TO FIX------------------------// - this.ComponentServiceNg2.getCapabilitiesAndRequirements(leftPaletteComponent.componentType, leftPaletteComponent.uniqueId).subscribe((response:ComponentGenericResponse) => { + this.ComponentServiceNg2.getCapabilitiesAndRequirements(leftPaletteComponent.componentType, leftPaletteComponent.uniqueId).subscribe((response: ComponentGenericResponse) => { let component = this.ComponentFactory.createEmptyComponent(leftPaletteComponent.componentType); component.uniqueId = component.uniqueId; @@ -290,17 +283,17 @@ export class CompositionGraph implements ng.IDirective { }); }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, (component:Component, paletteComponent:LeftPaletteComponent, startPosition:Point) => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, (component: Component, paletteComponent: LeftPaletteComponent, startPosition: Point) => { - let zoneType:ZoneInstanceType = this.compositionGraphZoneUtils.getZoneTypeForPaletteComponent(paletteComponent.categoryType); + let zoneType: ZoneInstanceType = this.compositionGraphZoneUtils.getZoneTypeForPaletteComponent(paletteComponent.categoryType); this.compositionGraphZoneUtils.showZone(scope.zones[zoneType]); this.LoaderService.showLoader('composition-graph'); - this.compositionGraphZoneUtils.createZoneInstanceFromLeftPalette(zoneType, component, paletteComponent.type).subscribe((zoneInstance:ZoneInstance) => { + this.compositionGraphZoneUtils.createZoneInstanceFromLeftPalette(zoneType, component, paletteComponent.type).subscribe((zoneInstance: ZoneInstance) => { this.LoaderService.hideLoader('composition-graph'); this.compositionGraphZoneUtils.addInstanceToZone(scope.zones[zoneInstance.type], zoneInstance, true); this.compositionGraphZoneUtils.createPaletteToZoneAnimation(startPosition, zoneType, zoneInstance); - }, (error)=> { + }, (error) => { this.LoaderService.hideLoader('composition-graph'); }); }); @@ -317,12 +310,12 @@ export class CompositionGraph implements ng.IDirective { this.dragComponent = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent); }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, (event:IDragDropEvent) => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, (event: IDragDropEvent) => { this.CompositionGraphPaletteUtils.onComponentDrag(this._cy, event, this.dragElement, this.dragComponent); }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, (component:ComponentInstance) => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, (component: ComponentInstance) => { let selectedNode = this._cy.getElementById(component.uniqueId); selectedNode.data().componentInstance.name = component.name; @@ -331,14 +324,14 @@ export class CompositionGraph implements ng.IDirective { }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, (componentInstance:ComponentInstance) => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, (componentInstance: ComponentInstance) => { let nodeToDelete = this._cy.getElementById(componentInstance.uniqueId); this.NodesGraphUtils.deleteNode(this._cy, scope.component, nodeToDelete); }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE, (deletedInstance:UIZoneInstanceObject) => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE, (deletedInstance: UIZoneInstanceObject) => { - if(deletedInstance.type === ZoneInstanceType.POLICY){ + if (deletedInstance.type === ZoneInstanceType.POLICY) { scope.component.policies = scope.component.policies.filter(policy => policy.uniqueId !== deletedInstance.uniqueId); } else if (deletedInstance.type === ZoneInstanceType.GROUP) { scope.component.groupInstances = scope.component.groupInstances.filter(group => group.uniqueId !== deletedInstance.uniqueId); @@ -351,25 +344,17 @@ export class CompositionGraph implements ng.IDirective { this.eventListenerService.notifyObservers(EVENTS.UPDATE_PANEL); }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, (componentInstanceId:string)=> { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, (componentInstanceId: string) => { if (!_.isEmpty(scope.zones)) { this.compositionGraphZoneUtils.updateTargetsOrMembersOnCanvasDelete(componentInstanceId, scope.zones, ZoneInstanceAssignmentType.COMPONENT_INSTANCES); } }); - // not in use; commenting out - // this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_MULTIPLE_COMPONENTS, () => { - - // this._cy.$('node:selected').each((i:number, node:Cy.CollectionNodes) => { - // this.NodesGraphUtils.deleteNode(this._cy, scope.component, node); - // }); - // }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_EDGE, (releaseLoading:boolean, linksToDelete:Cy.CollectionEdges) => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_EDGE, (releaseLoading: boolean, linksToDelete: Cy.CollectionEdges) => { this.CompositionGraphLinkUtils.deleteLink(this._cy, scope.component, releaseLoading, linksToDelete); }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, (node:Cy.CollectionNodes, ucpe:Cy.CollectionNodes, updateExistingNode:boolean) => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, (node: Cy.CollectionNodes, ucpe: Cy.CollectionNodes, updateExistingNode: boolean) => { this.commonGraphUtils.initUcpeChildData(node, ucpe); //check if item is a VL, and if so, skip adding the binding to ucpe @@ -378,29 +363,29 @@ export class CompositionGraph implements ng.IDirective { } if (updateExistingNode) { - let vlsPendingDeletion:Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node); //delete connected VLs that no longer have 2 links + let vlsPendingDeletion: Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node); //delete connected VLs that no longer have 2 links this.CompositionGraphLinkUtils.deleteLinksWhenNodeMovedFromOrToUCPE(scope.component, node.cy(), node, vlsPendingDeletion); //delete all connected links if needed this.GeneralGraphUtils.pushUpdateComponentInstanceActionToQueue(scope.component, true, node.data().componentInstance); //update componentInstance position } }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, (node:Cy.CollectionNodes, ucpe:Cy.CollectionNodes) => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, (node: Cy.CollectionNodes, ucpe: Cy.CollectionNodes) => { this.commonGraphUtils.removeUcpeChildData(node); - let vlsPendingDeletion:Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node); + let vlsPendingDeletion: Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node); this.CompositionGraphLinkUtils.deleteLinksWhenNodeMovedFromOrToUCPE(scope.component, node.cy(), node, vlsPendingDeletion); //delete all connected links if needed this.GeneralGraphUtils.pushUpdateComponentInstanceActionToQueue(scope.component, true, node.data().componentInstance); //update componentInstance position }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_VERSION_CHANGED, (component:Component) => { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_VERSION_CHANGED, (component: Component) => { scope.component = component; this._cy.elements().remove(); this.loadGraphData(scope); }); - scope.zoom = (zoomIn:boolean):void => { - let currentZoom:number = this._cy.zoom(); + scope.zoom = (zoomIn: boolean): void => { + let currentZoom: number = this._cy.zoom(); if (zoomIn) { this.GeneralGraphUtils.zoomGraphTo(this._cy, currentZoom + .1); } else { @@ -416,24 +401,24 @@ export class CompositionGraph implements ng.IDirective { }); }; - scope.getAutoCompleteValues = (searchTerm:string) => { + scope.getAutoCompleteValues = (searchTerm: string) => { if (searchTerm.length > 1) { //US requirement: only display search results after 2nd letter typed. - let nodes:Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm); + let nodes: Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm); scope.componentInstanceNames = _.map(nodes, node => node.data('name')); } else { scope.componentInstanceNames = []; } }; - scope.highlightSearchMatches = (searchTerm:string) => { + scope.highlightSearchMatches = (searchTerm: string) => { this.NodesGraphUtils.highlightMatchingNodesByName(this._cy, searchTerm); - let matchingNodes:Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm); + let matchingNodes: Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm); this.GeneralGraphUtils.zoomAll(this._cy, matchingNodes); }; - scope.saveChangedCapabilityProperties = ():Promise => { + scope.saveChangedCapabilityProperties = (): Promise => { return new Promise((resolve) => { - const capabilityPropertiesBE:PropertyBEModel[] = this.ConnectionWizardServiceNg2.changedCapabilityProperties.map((prop) => { + const capabilityPropertiesBE: PropertyBEModel[] = this.ConnectionWizardServiceNg2.changedCapabilityProperties.map((prop) => { prop.value = prop.getJSONValue(); const propBE = new PropertyBEModel(prop); propBE.parentUniqueId = this.ConnectionWizardServiceNg2.selectedMatch.relationship.relation.capabilityOwnerId; @@ -460,7 +445,7 @@ export class CompositionGraph implements ng.IDirective { }); }; - scope.createLinkFromMenu = ():void => { + scope.createLinkFromMenu = (): void => { scope.isLinkMenuOpen = false; scope.saveChangedCapabilityProperties().then(() => { @@ -477,23 +462,23 @@ export class CompositionGraph implements ng.IDirective { }); }; - scope.createOrUpdateServicePath = (data:any) => { + scope.createOrUpdateServicePath = (data: any) => { this.servicePathGraphUtils.createOrUpdateServicePath(scope, data); }; scope.deletePathsOnCy = () => { - this.servicePathGraphUtils.deletePathsFromGraph(this._cy, scope.component); + this.servicePathGraphUtils.deletePathsFromGraph(this._cy, scope.component); }; - scope.drawPathOnCy = (data:ForwardingPath) => { - this.servicePathGraphUtils.drawPath(this._cy, data, scope.component); + scope.drawPathOnCy = (data: ForwardingPath) => { + this.servicePathGraphUtils.drawPath(this._cy, data, scope.component); }; - scope.viewRelation = (link:Cy.CollectionEdges) => { + scope.viewRelation = (link: Cy.CollectionEdges) => { scope.hideRelationMenu(); const linkData = link.data(); - const sourceNode:CompositionCiNodeBase = link.source().data(); - const targetNode:CompositionCiNodeBase = link.target().data(); - const relationship:Relationship = linkData.relation.relationships[0]; + const sourceNode: CompositionCiNodeBase = link.source().data(); + const targetNode: CompositionCiNodeBase = link.target().data(); + const relationship: Relationship = linkData.relation.relationships[0]; scope.component.getRelationRequirementCapability(relationship, sourceNode.componentInstance, targetNode.componentInstance).then((objReqCap) => { const capability = objReqCap.capability; @@ -505,12 +490,12 @@ export class CompositionGraph implements ng.IDirective { this.ConnectionWizardServiceNg2.selectedMatch.relationship = relationship; const title = `Connection Properties`; - const saveButton:ButtonModel = new ButtonModel('Save', 'blue', () => { + const saveButton: ButtonModel = new ButtonModel('Save', 'blue', () => { scope.saveChangedCapabilityProperties().then(() => { this.ModalServiceNg2.closeCurrentModal(); }) }); - const cancelButton:ButtonModel = new ButtonModel('Cancel', 'white', () => { + const cancelButton: ButtonModel = new ButtonModel('Cancel', 'white', () => { this.ModalServiceNg2.closeCurrentModal(); }); const modal = new ModalModel('xl', title, '', [saveButton, cancelButton]); @@ -536,7 +521,7 @@ export class CompositionGraph implements ng.IDirective { }); }; - scope.deleteRelation = (link:Cy.CollectionEdges) => { + scope.deleteRelation = (link: Cy.CollectionEdges) => { scope.hideRelationMenu(); //if multiple edges selected, delete the VL itself so edges get deleted automatically @@ -546,25 +531,9 @@ export class CompositionGraph implements ng.IDirective { this.CompositionGraphLinkUtils.deleteLink(this._cy, scope.component, true, link); } }; - - /* - scope.hideAssetPopover = ():void => { - - this.commonGraphUtils.safeApply(scope, () => { - scope.assetPopoverOpen = false; - scope.assetPopoverObj = null; - }); - }; - - scope.deleteNode = (nodeId:string):void => { - if (!scope.isViewOnly) { - this.NodesGraphUtils.confirmDeleteNode(nodeId, this._cy, scope.component); - //scope.hideAssetPopover(); - } - };*/ } - private registerCytoscapeGraphEvents(scope:ICompositionGraphScope) { + private registerCytoscapeGraphEvents(scope: ICompositionGraphScope) { this._cy.on('addedgemouseup', (event, data) => { scope.relationMenuDirectiveObj = this.CompositionGraphLinkUtils.onLinkDrawn(this._cy, data.source, data.target); @@ -574,48 +543,41 @@ export class CompositionGraph implements ng.IDirective { //TODO: init with the selected values this.ConnectionWizardServiceNg2.selectedMatch = null; - let steps:Array = []; - let fromNodeName:string = scope.relationMenuDirectiveObj.fromNode.componentInstance.name; - let toNodeName:string = scope.relationMenuDirectiveObj.toNode.componentInstance.name; + let steps: Array = []; + let fromNodeName: string = scope.relationMenuDirectiveObj.fromNode.componentInstance.name; + let toNodeName: string = scope.relationMenuDirectiveObj.toNode.componentInstance.name; steps.push(new StepModel(fromNodeName, FromNodeStepComponent)); steps.push(new StepModel(toNodeName, ToNodeStepComponent)); steps.push(new StepModel('Properties', PropertiesStepComponent)); let wizardTitle = 'Connect: ' + fromNodeName + ' to ' + toNodeName; let modalInstance = this.ModalServiceNg2.createMultiStepsWizard(wizardTitle, steps, scope.createLinkFromMenu, ConnectionWizardHeaderComponent); modalInstance.instance.open(); - - // - // this.ModalServiceNg2.createMultiStepsWizard('Connect', )Connect - // scope.$apply(() => { - // scope.isLinkMenuOpen = true; - // }); } }); - this._cy.on('tapstart', 'node', (event:Cy.EventObject) => { + this._cy.on('tapstart', 'node', (event: Cy.EventObject) => { scope.isOnDrag = true; this._currentlyCLickedNodePosition = angular.copy(event.cyTarget[0].position()); //update node position on drag if (event.cyTarget.data().isUcpe) { this._cy.nodes('.ucpe-cp').unlock(); event.cyTarget.style('opacity', 0.5); } - //scope.hideAssetPopover(); }); - this._cy.on('drag', 'node', (event:Cy.EventObject) => { + this._cy.on('drag', 'node', (event: Cy.EventObject) => { if (event.cyTarget.data().isDraggable) { - event.cyTarget.style({'overlay-opacity': 0.24}); + event.cyTarget.style({ 'overlay-opacity': 0.24 }); if (this.GeneralGraphUtils.isValidDrop(this._cy, event.cyTarget)) { - event.cyTarget.style({'overlay-color': GraphColors.NODE_BACKGROUND_COLOR}); + event.cyTarget.style({ 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR }); } else { - event.cyTarget.style({'overlay-color': GraphColors.NODE_OVERLAPPING_BACKGROUND_COLOR}); + event.cyTarget.style({ 'overlay-color': GraphColors.NODE_OVERLAPPING_BACKGROUND_COLOR }); } } if (event.cyTarget.data().isUcpe) { let pos = event.cyTarget.position(); - this._cy.nodes('[?isInsideGroup]').positions((i, node)=> { + this._cy.nodes('[?isInsideGroup]').positions((i, node) => { return { x: pos.x + node.data("ucpeOffset").x, y: pos.y + node.data("ucpeOffset").y @@ -624,19 +586,6 @@ export class CompositionGraph implements ng.IDirective { } }); - /* this._cy.on('mouseover', 'node', (event:Cy.EventObject) => { - if (!this._cy.scratch('_edge_editation_highlights')) { - this.commonGraphUtils.safeApply(scope, () => { - this.showNodePopoverMenu(scope, event.cyTarget[0]); - }); - } - }); - - this._cy.on('mouseout', 'node', (event:Cy.EventObject) => { - scope.hideAssetPopover(); - });*/ - - this._cy.on('handlemouseover', (event, payload) => { if (payload.node.grabbed() || this._cy.scratch('_edge_editation_highlights') === true) { //no need to add opacity while we are dragging and hovering othe nodes- or if opacity was already calculated for these nodes @@ -644,7 +593,7 @@ export class CompositionGraph implements ng.IDirective { } if (scope.zoneTagMode) { - scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getHoverTagModeId(); + scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getHoverTagModeId(); return; } @@ -657,7 +606,6 @@ export class CompositionGraph implements ng.IDirective { this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy, payload.node.data()); this._cy.scratch()._edge_editation_highlights = true; - /*scope.hideAssetPopover();*/ }); this._cy.on('handlemouseout', () => { @@ -673,7 +621,7 @@ export class CompositionGraph implements ng.IDirective { }); - this._cy.on('tapend', (event:Cy.EventObject) => { + this._cy.on('tapend', (event: Cy.EventObject) => { scope.isOnDrag = false; if (scope.zoneTagMode) { return; @@ -698,13 +646,13 @@ export class CompositionGraph implements ng.IDirective { else { //On Node clicked - this._cy.nodes(':grabbed').style({'overlay-opacity': 0}); + this._cy.nodes(':grabbed').style({ 'overlay-opacity': 0 }); - let isUcpe:boolean = event.cyTarget.data().isUcpe; + let isUcpe: boolean = event.cyTarget.data().isUcpe; let newPosition = event.cyTarget[0].position(); //node position changed (drop after drag event) - we need to update position if (this._currentlyCLickedNodePosition.x !== newPosition.x || this._currentlyCLickedNodePosition.y !== newPosition.y) { - let nodesMoved:Cy.CollectionNodes = this._cy.$(':grabbed'); + let nodesMoved: Cy.CollectionNodes = this._cy.$(':grabbed'); if (isUcpe) { nodesMoved = nodesMoved.add(this._cy.nodes('[?isInsideGroup]:free')); //'child' nodes will not be recognized as "grabbed" elements within cytoscape. manually add them to collection of nodes moved. } @@ -716,8 +664,6 @@ export class CompositionGraph implements ng.IDirective { } scope.$apply(() => { this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance); - //open node popover menu - //this.showNodePopoverMenu(scope, event.cyTarget[0]); }); } @@ -729,25 +675,25 @@ export class CompositionGraph implements ng.IDirective { } }); - this._cy.on('boxselect', 'node', (event:Cy.EventObject) => { + this._cy.on('boxselect', 'node', (event: Cy.EventObject) => { scope.unsetActiveZoneInstance(); this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance); }); - this._cy.on('canvasredraw', (event:Cy.EventObject) => { + this._cy.on('canvasredraw', (event: Cy.EventObject) => { if (scope.zoneTagMode) { this.compositionGraphZoneUtils.showZoneTagIndications(this._cy, scope.activeZoneInstance); } }); - this._cy.on('handletagclick', (event:Cy.EventObject, eventData:any) => { + this._cy.on('handletagclick', (event: Cy.EventObject, eventData: any) => { this.compositionGraphZoneUtils.handleTagClick(this._cy, scope.activeZoneInstance, eventData.nodeId); }); } - private openModifyLinkMenu = (scope:ICompositionGraphScope, linkMenuObject:LinkMenu, timeOutInMilliseconds?:number) => { + private openModifyLinkMenu = (scope: ICompositionGraphScope, linkMenuObject: LinkMenu, timeOutInMilliseconds?: number) => { scope.hideRelationMenu(); this.$timeout(() => { scope.canvasMenuProps = { @@ -769,7 +715,7 @@ export class CompositionGraph implements ng.IDirective { } }); } - if(!scope.isViewOnly){ + if (!scope.isViewOnly) { scope.canvasMenuProps.items.push({ contents: 'Delete', styleClass: 'w-sdc-canvas-menu-item-delete', @@ -784,10 +730,10 @@ export class CompositionGraph implements ng.IDirective { }); }; - private initGraphNodes(componentInstances:ComponentInstance[], isViewOnly:boolean) { + private initGraphNodes(componentInstances: ComponentInstance[], isViewOnly: boolean) { - setTimeout(()=> { + setTimeout(() => { let handles = new CytoscapeEdgeEditation; handles.init(this._cy); if (!isViewOnly) { //Init nodes handle extension - enable dynamic links @@ -801,23 +747,23 @@ export class CompositionGraph implements ng.IDirective { _.each(componentInstances, (instance) => { - let compositionGraphNode:CompositionCiNodeBase = this.NodesFactory.createNode(instance); + let compositionGraphNode: CompositionCiNodeBase = this.NodesFactory.createNode(instance); this.commonGraphUtils.addComponentInstanceNodeToGraph(this._cy, compositionGraphNode); }); } - private initDropZone(scope:ICompositionGraphScope) { + private initDropZone(scope: ICompositionGraphScope) { if (scope.isViewOnly) { return; } - scope.dropCallback = (event:IDragDropEvent) => { + scope.dropCallback = (event: IDragDropEvent) => { this.$log.debug(`composition-graph::dropCallback:: fired`); this.CompositionGraphPaletteUtils.addNodeFromPalette(this._cy, event, scope.component); }; - scope.verifyDrop = (event:JQueryEventObject) => { + scope.verifyDrop = (event: JQueryEventObject) => { if (!this.dragElement || this.dragElement.hasClass('red')) { return false; @@ -825,8 +771,8 @@ export class CompositionGraph implements ng.IDirective { return true; }; - scope.beforeDropCallback = (event:IDragDropEvent):ng.IPromise => { - let deferred:ng.IDeferred = this.$q.defer(); + scope.beforeDropCallback = (event: IDragDropEvent): ng.IPromise => { + let deferred: ng.IDeferred = this.$q.defer(); if (this.dragElement.hasClass('red')) { deferred.reject(); } else { @@ -838,22 +784,22 @@ export class CompositionGraph implements ng.IDirective { } - private initZones = (scope:ICompositionGraphScope):void => { + private initZones = (scope: ICompositionGraphScope): void => { scope.zones = this.compositionGraphZoneUtils.createCompositionZones(); - scope.zoneMinimizeToggle = (zoneType:ZoneInstanceType):void => { + scope.zoneMinimizeToggle = (zoneType: ZoneInstanceType): void => { scope.zones[zoneType].minimized = !scope.zones[zoneType].minimized; }; - scope.zoneInstanceModeChanged = (newMode:ZoneInstanceMode, instance:ZoneInstance, zoneId:ZoneInstanceType):void => { + scope.zoneInstanceModeChanged = (newMode: ZoneInstanceMode, instance: ZoneInstance, zoneId: ZoneInstanceType): void => { if (scope.zoneTagMode) { //we're in tag mode. if (instance == scope.activeZoneInstance && newMode == ZoneInstanceMode.NONE) { //we want to turn tag mode off. scope.zoneTagMode = null; scope.activeZoneInstance.mode = ZoneInstanceMode.SELECTED; this.compositionGraphZoneUtils.endCyTagMode(this._cy); this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CANVAS_TAG_END, instance); - + } } else { if (instance != scope.activeZoneInstance || (instance == scope.activeZoneInstance && newMode > ZoneInstanceMode.HOVER)) { //when active zone instance gets hover/none,dont actually change mode, just show/hide indications @@ -888,13 +834,13 @@ export class CompositionGraph implements ng.IDirective { } }; - scope.zoneInstanceTagged = (taggedInstance:ZoneInstance) => { + scope.zoneInstanceTagged = (taggedInstance: ZoneInstance) => { scope.activeZoneInstance.addOrRemoveAssignment(taggedInstance.instanceData.uniqueId, ZoneInstanceAssignmentType.GROUPS); - let newHandle:string = this.compositionGraphZoneUtils.getCorrectHandleForNode(taggedInstance.instanceData.uniqueId, scope.activeZoneInstance); + let newHandle: string = this.compositionGraphZoneUtils.getCorrectHandleForNode(taggedInstance.instanceData.uniqueId, scope.activeZoneInstance); taggedInstance.showHandle(newHandle); } - scope.zoneBackgroundClicked = ():void => { + scope.zoneBackgroundClicked = (): void => { if (!scope.zoneTagMode && scope.activeZoneInstance) { scope.unsetActiveZoneInstance(); } @@ -904,15 +850,15 @@ export class CompositionGraph implements ng.IDirective { this.LoaderService.showLoader('composition-graph'); } - scope.zoneAssignmentSaveComplete = (success:boolean) => { + scope.zoneAssignmentSaveComplete = (success: boolean) => { this.LoaderService.hideLoader('composition-graph'); if (!success) { this.GeneralGraphUtils.showUpdateFailure(); } }; - scope.unsetActiveZoneInstance = ():void => { - if(scope.activeZoneInstance){ + scope.unsetActiveZoneInstance = (): void => { + if (scope.activeZoneInstance) { scope.activeZoneInstance.mode = ZoneInstanceMode.NONE; scope.activeZoneInstance = null; scope.zoneTagMode = null; @@ -923,25 +869,25 @@ export class CompositionGraph implements ng.IDirective { public static factory = ($q, - $log, - $timeout, - NodesFactory, - LinksGraphUtils, - GeneralGraphUtils, - ComponentInstanceFactory, - NodesGraphUtils, - EventListenerService, - ComponentFactory, - LoaderService, - CommonGraphUtils, - MatchCapabilitiesRequirementsUtils, - CompositionGraphPaletteUtils, - CompositionGraphZoneUtils, - ComponentServiceNg2, - ModalService, - ConnectionWizardService, - ComponentInstanceServiceNg2, - ServicePathGraphUtils) => { + $log, + $timeout, + NodesFactory, + LinksGraphUtils, + GeneralGraphUtils, + ComponentInstanceFactory, + NodesGraphUtils, + EventListenerService, + ComponentFactory, + LoaderService, + CommonGraphUtils, + MatchCapabilitiesRequirementsUtils, + CompositionGraphPaletteUtils, + CompositionGraphZoneUtils, + ComponentServiceNg2, + ModalService, + ConnectionWizardService, + ComponentInstanceServiceNg2, + ServicePathGraphUtils) => { return new CompositionGraph( $q, $log, -- cgit 1.2.3-korg