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<Zone>;
- 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<Zone>;
+ 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<PropertyBEModel[]>;
+ relationMenuDirectiveObj: ConnectRelationModel;
+ isLinkMenuOpen: boolean;
+ createLinkFromMenu: (chosenMatch: Match, vl: Component) => void;
+ saveChangedCapabilityProperties:
() => Promise<PropertyBEModel[]>;
//modify link menu - for now only delete menu
- relationMenuTimeout:ng.IPromise<any>;
- linkMenuObject:LinkMenu;
- isOnDrag:boolean;
+ relationMenuTimeout:
ng.IPromise<any>;
+ 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<string>; //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<string>; //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) {
}
withSidebar: '='
};
- link = (scope:ICompositionGraphScope, el:JQuery) => {
+ link = (scope: ICompositionGraphScope, el: JQuery) => {
this.loadGraph(scope, el);
if (!scope.component.groupInstances || !scope.component.policies) {
this.loadGraphData(scope);
}
-
+
scope.$on('$destroy', () => {
this._cy.destroy();
_.forEach(GRAPH_EVENTS, (event) => {
};
- 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);
});
}
- 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);
this.initViewMode(scope.isViewOnly);
};
- private initGraph(graphEl:JQuery, isViewOnly:boolean) {
+ private initGraph(graphEl: JQuery, isViewOnly: boolean) {
this._cy = cytoscape({
container: graphEl,
});
}
- private initViewMode(isViewOnly:boolean) {
+ private initViewMode(isViewOnly: boolean) {
if (isViewOnly) {
//remove event listeners
}
};
- 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();
});
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;
}
//----------------------- 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;
});
});
- 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');
});
});
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;
});
- 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);
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
}
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 {
});
};
- 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<PropertyBEModel[]> => {
+ scope.saveChangedCapabilityProperties = ():
Promise<PropertyBEModel[]> => {
return new Promise<PropertyBEModel[]>((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;
});
};
- scope.createLinkFromMenu = ():void => {
+ scope.createLinkFromMenu = (): void => {
scope.isLinkMenuOpen = false;
scope.saveChangedCapabilityProperties().then(() => {
});
};
- scope.createOrUpdateServicePath = (data:any) => {
+ scope.createOrUpdateServicePath = (data: any) => {
this.servicePathGraphUtils.createOrUpdateServicePath(scope, data);
};
scope.deletePathsOnCy = () => {
- this.servicePathGraphUtils.deletePathsFromGraph(this._cy, <Service> scope.component);
+ this.servicePathGraphUtils.deletePathsFromGraph(this._cy, <Service>scope.component);
};
- scope.drawPathOnCy = (data:ForwardingPath) => {
- this.servicePathGraphUtils.drawPath(this._cy, data, <Service> scope.component);
+ scope.drawPathOnCy = (data: ForwardingPath) => {
+ this.servicePathGraphUtils.drawPath(this._cy, data, <Service>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;
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]);
});
};
- 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
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);
//TODO: init with the selected values
this.ConnectionWizardServiceNg2.selectedMatch = null;
- let steps:Array<StepModel> = [];
- let fromNodeName:string = scope.relationMenuDirectiveObj.fromNode.componentInstance.name;
- let toNodeName:string = scope.relationMenuDirectiveObj.toNode.componentInstance.name;
+ let steps: Array<StepModel> = [];
+ 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
}
});
- /* 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
}
if (scope.zoneTagMode) {
- scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getHoverTagModeId();
+ scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getHoverTagModeId();
return;
}
this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy, payload.node.data());
this._cy.scratch()._edge_editation_highlights = true;
- /*scope.hideAssetPopover();*/
});
this._cy.on('handlemouseout', () => {
});
- this._cy.on('tapend', (event:Cy.EventObject) => {
+ this._cy.on('tapend', (event: Cy.EventObject) => {
scope.isOnDrag = false;
if (scope.zoneTagMode) {
return;
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.
}
}
scope.$apply(() => {
this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance);
- //open node popover menu
- //this.showNodePopoverMenu(scope, event.cyTarget[0]);
});
}
}
});
- 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 = {
}
});
}
- if(!scope.isViewOnly){
+ if (!scope.isViewOnly) {
scope.canvasMenuProps.items.push({
contents: 'Delete',
styleClass: 'w-sdc-canvas-menu-item-delete',
});
};
- 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
_.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;
return true;
};
- scope.beforeDropCallback = (event:IDragDropEvent):ng.IPromise<void> => {
- let deferred:ng.IDeferred<void> = this.$q.defer<void>();
+ scope.beforeDropCallback = (event: IDragDropEvent): ng.IPromise<void> => {
+ let deferred: ng.IDeferred<void> = this.$q.defer<void>();
if (this.dragElement.hasClass('red')) {
deferred.reject();
} else {
}
- 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
}
};
- 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();
}
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;
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,
-import {PolicyInstance} from "app/models/graph/zones/policy-instance";
-import {ZoneInstance, ZoneInstanceType, ZoneInstanceAssignmentType} from "app/models/graph/zones/zone-instance";
-import {Zone} from "app/models/graph/zones/zone";
-import {DynamicComponentService} from "app/ng2/services/dynamic-component.service";
-import {PaletteAnimationComponent} from "app/ng2/components/ui/palette-animation/palette-animation.component";
-import {Point, LeftPaletteMetadataTypes, Component} from "../../../../models";
-import {CanvasHandleTypes} from "app/utils";
-import {PoliciesService} from "../../../../ng2/services/policies.service";
-import {Observable} from "rxjs";
-import {GroupsService} from "../../../../ng2/services/groups.service";
-import {GroupInstance} from "app/models/graph/zones/group-instance";
+import { PolicyInstance } from "app/models/graph/zones/policy-instance";
+import { ZoneInstance, ZoneInstanceType, ZoneInstanceAssignmentType } from "app/models/graph/zones/zone-instance";
+import { Zone } from "app/models/graph/zones/zone";
+import { DynamicComponentService } from "app/ng2/services/dynamic-component.service";
+import { PaletteAnimationComponent } from "app/ng2/components/ui/palette-animation/palette-animation.component";
+import { Point, LeftPaletteMetadataTypes, Component } from "../../../../models";
+import { CanvasHandleTypes } from "app/utils";
+import { PoliciesService } from "../../../../ng2/services/policies.service";
+import { Observable } from "rxjs";
+import { GroupsService } from "../../../../ng2/services/groups.service";
+import { GroupInstance } from "app/models/graph/zones/group-instance";
export class CompositionGraphZoneUtils {
- constructor(private dynamicComponentService:DynamicComponentService,
- private policiesService:PoliciesService,
- private groupsService:GroupsService) {
+ constructor(private dynamicComponentService: DynamicComponentService,
+ private policiesService: PoliciesService,
+ private groupsService: GroupsService) {
}
- public createCompositionZones = ():Array<Zone> => {
- let zones:Array<Zone> = [];
+ public createCompositionZones = (): Array<Zone> => {
+ let zones: Array<Zone> = [];
zones[ZoneInstanceType.POLICY] = new Zone('Policies', 'P', ZoneInstanceType.POLICY);
zones[ZoneInstanceType.GROUP] = new Zone('Groups', 'G', ZoneInstanceType.GROUP);
return zones;
}
- public showZone = (zone:Zone):void => {
+ public showZone = (zone: Zone): void => {
zone.visible = true;
zone.minimized = false;
}
- public getZoneTypeForPaletteComponent = (componentCategory:LeftPaletteMetadataTypes) => {
+ public getZoneTypeForPaletteComponent = (componentCategory: LeftPaletteMetadataTypes) => {
if (componentCategory == LeftPaletteMetadataTypes.Group) {
return ZoneInstanceType.GROUP;
} else if (componentCategory == LeftPaletteMetadataTypes.Policy) {
}
};
- public initZoneInstances(zones:Array<Zone>, component:Component) {
+ public initZoneInstances(zones: Array<Zone>, component: Component) {
if (component.groupInstances && component.groupInstances.length) {
this.showZone(zones[ZoneInstanceType.GROUP]);
- _.forEach(component.groupInstances, (group:GroupInstance) => {
+ _.forEach(component.groupInstances, (group: GroupInstance) => {
let newInstance = new ZoneInstance(group, component);
this.addInstanceToZone(zones[ZoneInstanceType.GROUP], newInstance);
});
if (component.policies && component.policies.length) {
this.showZone(zones[ZoneInstanceType.POLICY]);
- _.forEach(component.policies, (policy:PolicyInstance) => {
+ _.forEach(component.policies, (policy: PolicyInstance) => {
let newInstance = new ZoneInstance(policy, component);
this.addInstanceToZone(zones[ZoneInstanceType.POLICY], newInstance);
}
}
- public findAndUpdateZoneInstanceData (zones: Array<Zone>, instanceData:PolicyInstance | GroupInstance) {
- _.forEach(zones, (zone:Zone) => {
- _.forEach(zone.instances, (zoneInstance:ZoneInstance) => {
- if(zoneInstance.instanceData.uniqueId === instanceData.uniqueId){
+ public findAndUpdateZoneInstanceData(zones: Array<Zone>, instanceData: PolicyInstance | GroupInstance) {
+ _.forEach(zones, (zone: Zone) => {
+ _.forEach(zone.instances, (zoneInstance: ZoneInstance) => {
+ if (zoneInstance.instanceData.uniqueId === instanceData.uniqueId) {
zoneInstance.updateInstanceData(instanceData);
}
});
});
}
- public updateTargetsOrMembersOnCanvasDelete = (canvasNodeID:string, zones:Array<Zone>, type:ZoneInstanceAssignmentType):void => {
+ public updateTargetsOrMembersOnCanvasDelete = (canvasNodeID: string, zones: Array<Zone>, type: ZoneInstanceAssignmentType): void => {
_.forEach(zones, (zone) => {
- _.forEach(zone.instances, (zoneInstance:ZoneInstance) => {
+ _.forEach(zone.instances, (zoneInstance: ZoneInstance) => {
if (zoneInstance.isAlreadyAssigned(canvasNodeID)) {
zoneInstance.addOrRemoveAssignment(canvasNodeID, type);
//remove it from our list of BE targets and members as well (so that it will not be sent in future calls to BE).
});
};
- public createZoneInstanceFromLeftPalette = (zoneType:ZoneInstanceType, component:Component, paletteComponentType:string):Observable<ZoneInstance> => {
+ public createZoneInstanceFromLeftPalette = (zoneType: ZoneInstanceType, component: Component, paletteComponentType: string): Observable<ZoneInstance> => {
if (zoneType === ZoneInstanceType.POLICY) {
return this.policiesService.createPolicyInstance(component.componentType, component.uniqueId, paletteComponentType).map(response => {
let newInstance = new PolicyInstance(response);
}
}
- public addInstanceToZone(zone:Zone, instance:ZoneInstance, hide?:boolean) {
- if(hide){
+ public addInstanceToZone(zone: Zone, instance: ZoneInstance, hide?: boolean) {
+ if (hide) {
instance.hidden = true;
}
zone.instances.push(instance);
};
- private findZoneCoordinates(zoneType):Point {
- let point:Point = new Point(0, 0);
+ private findZoneCoordinates(zoneType): Point {
+ let point: Point = new Point(0, 0);
let zone = angular.element(document.querySelector('.' + zoneType + '-zone'));
let wrapperZone = zone.offsetParent();
point.x = zone.prop('offsetLeft') + wrapperZone.prop('offsetLeft');
return point;
}
- public createPaletteToZoneAnimation = (startPoint:Point, zoneType:ZoneInstanceType, newInstance:ZoneInstance) => {
+ public createPaletteToZoneAnimation = (startPoint: Point, zoneType: ZoneInstanceType, newInstance: ZoneInstance) => {
let zoneTypeName = ZoneInstanceType[zoneType].toLowerCase();
let paletteToZoneAnimation = this.dynamicComponentService.createDynamicComponent(PaletteAnimationComponent);
paletteToZoneAnimation.instance.from = startPoint;
paletteToZoneAnimation.instance.runAnimation();
}
- public startCyTagMode = (cy:Cy.Instance) => {
+ public startCyTagMode = (cy: Cy.Instance) => {
cy.autolock(true);
cy.nodes().unselectify();
cy.emit('tagstart'); //dont need to show handles because they're already visible bcz of hover event
};
- public endCyTagMode = (cy:Cy.Instance) => {
+ public endCyTagMode = (cy: Cy.Instance) => {
cy.emit('tagend');
cy.nodes().selectify();
cy.autolock(false);
};
- public handleTagClick = (cy:Cy.Instance, zoneInstance:ZoneInstance, nodeId:string) => {
+ public handleTagClick = (cy: Cy.Instance, zoneInstance: ZoneInstance, nodeId: string) => {
zoneInstance.addOrRemoveAssignment(nodeId, ZoneInstanceAssignmentType.COMPONENT_INSTANCES);
this.showZoneTagIndicationForNode(nodeId, zoneInstance, cy);
};
- public showGroupZoneIndications = (groupInstances:Array<ZoneInstance>, policyInstance:ZoneInstance) => {
- groupInstances.forEach((groupInstance:ZoneInstance)=> {
- let handle:string = this.getCorrectHandleForNode(groupInstance.instanceData.uniqueId, policyInstance);
+ public showGroupZoneIndications = (groupInstances: Array<ZoneInstance>, policyInstance: ZoneInstance) => {
+ groupInstances.forEach((groupInstance: ZoneInstance) => {
+ let handle: string = this.getCorrectHandleForNode(groupInstance.instanceData.uniqueId, policyInstance);
groupInstance.showHandle(handle);
})
};
- public hideGroupZoneIndications = (instances:Array<ZoneInstance>) => {
+ public hideGroupZoneIndications = (instances: Array<ZoneInstance>) => {
instances.forEach((instance) => {
instance.hideHandle();
})
}
- public showZoneTagIndications = (cy:Cy.Instance, zoneInstance:ZoneInstance) => {
+ public showZoneTagIndications = (cy: Cy.Instance, zoneInstance: ZoneInstance) => {
cy.nodes().forEach(node => {
- let handleType:string = this.getCorrectHandleForNode(node.id(), zoneInstance);
+ let handleType: string = this.getCorrectHandleForNode(node.id(), zoneInstance);
cy.emit('showhandle', [node, handleType]);
});
};
- public showZoneTagIndicationForNode = (nodeId:string, zoneInstance:ZoneInstance, cy:Cy.Instance) => {
+ public showZoneTagIndicationForNode = (nodeId: string, zoneInstance: ZoneInstance, cy: Cy.Instance) => {
let node = cy.getElementById(nodeId);
- let handleType:string = this.getCorrectHandleForNode(nodeId, zoneInstance);
+ let handleType: string = this.getCorrectHandleForNode(nodeId, zoneInstance);
cy.emit('showhandle', [node, handleType]);
}
- public hideZoneTagIndications = (cy:Cy.Instance) => {
+ public hideZoneTagIndications = (cy: Cy.Instance) => {
cy.emit('hidehandles');
};
- public getCorrectHandleForNode = (nodeId:string, zoneInstance:ZoneInstance):string => {
+ public getCorrectHandleForNode = (nodeId: string, zoneInstance: ZoneInstance): string => {
if (zoneInstance.isAlreadyAssigned(nodeId)) {
if (zoneInstance.type == ZoneInstanceType.POLICY) {
return CanvasHandleTypes.TAGGED_POLICY;
Requirement, CompositionCiLinkBase, CapabilitiesGroup, RequirementsGroup, Match,
CompositionCiNodeBase, Component, Capability
} from "app/models";
-import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance";
+import { ComponentInstance } from "../../../../models/componentsInstances/componentInstance";
/**
* Created by obarda on 1/1/2017.
*/
* @param filteredNodesData
* @param cy
*/
- public highlightMatchingComponents(filteredNodesData, cy:Cy.Instance) {
- _.each(filteredNodesData, (data:any) => {
+ public highlightMatchingComponents(filteredNodesData, cy: Cy.Instance) {
+ _.each(filteredNodesData, (data: any) => {
let node = cy.getElementById(data.id);
cy.emit('showhandle', [node]);
});
* @param cy
* @param hoveredNodeData
*/
- public fadeNonMachingComponents(filteredNodesData, nodesData, cy:Cy.Instance, hoveredNodeData?) {
+ public fadeNonMachingComponents(filteredNodesData, nodesData, cy: Cy.Instance, hoveredNodeData?) {
let fadeNodes = _.xorWith(nodesData, filteredNodesData, (node1, node2) => {
return node1.id === node2.id;
});
if (hoveredNodeData) {
_.remove(fadeNodes, hoveredNodeData);
}
- cy.batch(()=> {
+ cy.batch(() => {
_.each(fadeNodes, (node) => {
- cy.getElementById(node.id).style({'background-image-opacity': 0.4});
+ cy.getElementById(node.id).style({ 'background-image-opacity': 0.4 });
});
})
}
* Resets all nodes to regular opacity
* @param cy
*/
- public resetFadedNodes(cy:Cy.Instance) {
- cy.batch(()=> {
- cy.nodes().style({'background-image-opacity': 1});
+ public resetFadedNodes(cy: Cy.Instance) {
+ cy.batch(() => {
+ cy.nodes().style({ 'background-image-opacity': 1 });
})
}
- private static isRequirementFulfilled(fromNodeId:string, requirement:any, links:Array<CompositionCiLinkBase>):boolean {
- if(requirement.maxOccurrences === 'UNBOUNDED'){
+ private static isRequirementFulfilled(fromNodeId: string, requirement: any, links: Array<CompositionCiLinkBase>): boolean {
+ if (requirement.maxOccurrences === 'UNBOUNDED') {
return false;
}
- let linksWithThisReq:Array<CompositionCiLinkBase> = _.filter(links, {
+ let linksWithThisReq: Array<CompositionCiLinkBase> = _.filter(links, {
'relation': {
'fromNode': fromNodeId,
'relationships': [{
- 'relation':{
+ 'relation': {
'requirementOwnerId': requirement.ownerId,
'requirement': requirement.name,
'relationship': {
return linksWithThisReq.length == requirement.maxOccurrences;
};
- private static isMatch(requirement:Requirement, capability:Capability):boolean {
+ private static isMatch(requirement: Requirement, capability: Capability): boolean {
if (capability.type === requirement.capability) {
if (requirement.node) {
if (_.includes(capability.capabilitySources, requirement.node)) {
return false;
};
- public getMatchedRequirementsCapabilities(fromComponentInstance:ComponentInstance,
- toComponentInstance:ComponentInstance,
- links:Array<CompositionCiLinkBase>):Array<Match> {
- let fromToMatches:Array<Match> = this.getMatches(fromComponentInstance.requirements,
+ public getMatchedRequirementsCapabilities(fromComponentInstance: ComponentInstance,
+ toComponentInstance: ComponentInstance,
+ links: Array<CompositionCiLinkBase>): Array<Match> {
+ let fromToMatches: Array<Match> = this.getMatches(fromComponentInstance.requirements,
toComponentInstance.capabilities,
links,
fromComponentInstance.uniqueId,
toComponentInstance.uniqueId, true);
- let toFromMatches:Array<Match> = this.getMatches(toComponentInstance.requirements,
+ let toFromMatches: Array<Match> = this.getMatches(toComponentInstance.requirements,
fromComponentInstance.capabilities,
links,
fromComponentInstance.uniqueId,
/***** REFACTORED FUNCTIONS START HERE *****/
- public getMatches(requirements:RequirementsGroup, capabilities:CapabilitiesGroup, links:Array<CompositionCiLinkBase>,
- fromId:string, toId:string, isFromTo: boolean):Array<Match> {
- let matches:Array<Match> = [];
+ public getMatches(requirements: RequirementsGroup, capabilities: CapabilitiesGroup, links: Array<CompositionCiLinkBase>,
+ fromId: string, toId: string, isFromTo: boolean): Array<Match> {
+ let matches: Array<Match> = [];
let unfulfilledReqs = this.getUnfulfilledRequirements(fromId, requirements, links);
- _.forEach(unfulfilledReqs, (req)=> {
- _.forEach(_.flatten(_.values(capabilities)), (capability:Capability)=> {
+ _.forEach(unfulfilledReqs, (req) => {
+ _.forEach(_.flatten(_.values(capabilities)), (capability: Capability) => {
if (MatchCapabilitiesRequirementsUtils.isMatch(req, capability)) {
- if(isFromTo) {
+ if (isFromTo) {
matches.push(new Match(req, capability, isFromTo, fromId, toId));
- } else{
+ } else {
matches.push(new Match(req, capability, isFromTo, toId, fromId));
}
}
return matches;
}
- public getUnfulfilledRequirements = (fromNodeId:string, requirements:RequirementsGroup, links:Array<CompositionCiLinkBase>):Array<Requirement>=> {
+ public getUnfulfilledRequirements = (fromNodeId: string, requirements: RequirementsGroup, links: Array<CompositionCiLinkBase>): Array<Requirement> => {
- let requirementArray:Array<Requirement> = [];
- _.forEach(_.flatten(_.values(requirements)), (requirement:Requirement)=> {
+ let requirementArray: Array<Requirement> = [];
+ _.forEach(_.flatten(_.values(requirements)), (requirement: Requirement) => {
if (requirement.name !== 'dependency' && requirement.parentName !== 'dependency' && !MatchCapabilitiesRequirementsUtils.isRequirementFulfilled(fromNodeId, requirement, links)) {
requirementArray.push(requirement);
}
* @param capabilities
* @returns {boolean}
*/
- public containsMatch = (requirements:Array<Requirement>, capabilities:CapabilitiesGroup):boolean => {
- return _.some(requirements, (req:Requirement)=> {
- return _.some(_.flatten(_.values(capabilities)), (capability:Capability) => {
+ public containsMatch = (requirements: Array<Requirement>, capabilities: CapabilitiesGroup): boolean => {
+ return _.some(requirements, (req: Requirement) => {
+ return _.some(_.flatten(_.values(capabilities)), (capability: Capability) => {
return MatchCapabilitiesRequirementsUtils.isMatch(req, capability);
});
});
* 2. node has an unfulfilled requirement that matches the component's capabilities
* 3. vl is passed in which has the capability to fulfill requirement from component and requirement on node.
*/
- public findMatchingNodes(component:Component, nodeDataArray:Array<CompositionCiNodeBase>,
-
links:Array<CompositionCiLinkBase>):Array<any> //TODO allow for VL array and TEST
+ public findMatchingNodes(component: Component, nodeDataArray: Array<CompositionCiNodeBase>,
+
links: Array<CompositionCiLinkBase>): Array<any> //TODO allow for VL array and TEST
{
- let componentRequirements:Array<Requirement> = this.getUnfulfilledRequirements(component.uniqueId, component.requirements, links);
- return _.filter(nodeDataArray, (node:any)=> {
+ let componentRequirements: Array<Requirement> = this.getUnfulfilledRequirements(component.uniqueId, component.requirements, links);
+ return _.filter(nodeDataArray, (node: any) => {
if (node && node.componentInstance) {
//Check if component has an unfulfilled requirement that can be met by one of nodes's capabilities (#1)
return true;
} else { //Check if node has unfulfilled requirement that can be filled by component (#2)
- let nodeRequirements:Array<Requirement> = this.getUnfulfilledRequirements(node.componentInstance.uniqueId, node.componentInstance.requirements, links);
+ let nodeRequirements: Array<Requirement> = this.getUnfulfilledRequirements(node.componentInstance.uniqueId, node.componentInstance.requirements, links);
if (!nodeRequirements.length) return false;
if (this.containsMatch(nodeRequirements, component.capabilities)) {
return true;
Code Review / sdc.git / commitdiff