aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/directives/graphs-v2
diff options
context:
space:
mode:
authorys9693 <ys9693@att.com>2020-01-19 13:50:02 +0200
committerOfir Sonsino <ofir.sonsino@intl.att.com>2020-01-22 12:33:31 +0000
commit16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch)
tree03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/directives/graphs-v2
parentaa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff)
Catalog alignment
Issue-ID: SDC-2724 Signed-off-by: ys9693 <ys9693@att.com> Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
Diffstat (limited to 'catalog-ui/src/app/directives/graphs-v2')
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html28
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less64
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts55
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts487
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts361
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts103
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts947
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html67
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less50
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts323
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts301
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts277
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts183
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts86
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts195
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts204
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts155
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html19
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less14
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts43
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts86
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts7
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts338
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/palette/palette.html76
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/palette/palette.less92
25 files changed, 0 insertions, 4561 deletions
diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html
deleted file mode 100644
index b07668d6d9..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
- ~
- ~ Licensed under the Apache License, Version 2.0 (the "License");
- ~ you may not use this file except in compliance with the License.
- ~ You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- -->
-
-
-<div class="assetPopover" ng-class="assetPopoverObj.menuSide" ng-style="{left: assetPopoverObj.menuPosition.x, top: assetPopoverObj.menuPosition.y}">
- <div class="display-name-tooltip" >{{assetPopoverObj.displayName}}</div>
-
- <div class="assetMenu">
- <!--<div class="sprite-new expand-asset-icon" uib-tooltip="Open" tooltip-class="uib-custom-tooltip" tooltip-placement="{{tooltipSide}}"></div>-->
- <div class="sprite-new view-info-icon" uib-tooltip="Information" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div>
- <div class="sprite-new cp-icon" uib-tooltip="Connection Points" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div>
- <div class="sprite-new vl-icon" uib-tooltip="Links" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div>
- <div class="sprite-new trash-icon" uib-tooltip="Delete" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}" ng-click="deleteAsset()" data-ng-class="{'disabled-icon': assetPopoverObj.isViewOnly}"></div>
- </div>
-</div>
diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less
deleted file mode 100644
index 1a113e5bdc..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less
+++ /dev/null
@@ -1,64 +0,0 @@
-.assetPopover {
- font-family: @font-opensans-regular;
- font-size: 13px;
- width:230px;
- padding:0 15px;
- position:absolute;
- display:flex;
- flex-direction:column;
- align-items:flex-start;
-
- &.left {
- align-items:flex-end;
-
- .uib-custom-tooltip {
- margin-left:-10px;
- }
- }
-
- .display-name-tooltip {
-
- border:solid 1px @main_color_p;
- color: @main_color_p;
- padding:5px 10px;
- width:200px;
- margin-bottom:10px;
- border-radius: 2px;
- background-color: rgba(80, 99, 113, 0.8);
- box-shadow: 0px 3px 7.44px 0.56px rgba(0, 0, 0, 0.33);
- }
-
- .uib-custom-tooltip {
- margin-left:20px;
- font-family: @font-opensans-regular;
- font-size: 13px;
- }
-
- .assetMenu {
-
- border-radius: 2px;
- border: solid 1px @main_color_p;
- background-color: rgba(234, 234, 234, 0.7);
- box-shadow: 0px 3px 7.44px 0.56px rgba(0, 0, 0, 0.33);
- display:flex;
- flex-direction: column;
- justify-content: center;
- align-items:center;
-
- .sprite-new {
- border-bottom:solid 1px #CCC;
- &:hover:not(.disabled-icon) {
- .hand;
- }
- &:active:not(.disabled-icon) {
- background-color: @main_color_a;
- border-bottom-color: @main_color_a;
- }
- &.trash-icon {
- border-bottom: none;
- }
- }
-
-
- }
-}
diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts
deleted file mode 100644
index ad3197c6da..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {AssetPopoverObj} from "app/models";
-
-export interface IAssetPopoverScope extends ng.IScope {
- assetPopoverObj:AssetPopoverObj;
- deleteAsset:Function;
-}
-
-export class AssetPopoverDirective implements ng.IDirective {
-
- constructor() {
- }
-
- scope = {
- assetPopoverObj: '=',
- deleteAsset: '&'
- };
-
- restrict = 'E';
- replace = true;
- template = ():string => {
- return require('app/directives/graphs-v2/asset-popover/asset-popover.html');
- };
-
- link = (scope:IAssetPopoverScope, element:JQuery, $attr:ng.IAttributes) => {
-
- };
-
- public static factory = ()=> {
- return new AssetPopoverDirective();
- };
-}
-
-AssetPopoverDirective.factory.$inject = [];
-
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts b/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts
deleted file mode 100644
index 81d41509e7..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts
+++ /dev/null
@@ -1,487 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import {CommonNodeBase, CompositionCiLinkBase, RelationshipModel, Relationship, CompositionCiNodeBase, NodesFactory, LinksFactory} from "app/models";
-import {GraphUIObjects} from "app/utils";
-import {CompositionCiServicePathLink} from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
-import {Requirement, Capability} from "app/models";
-/**
- * Created by obarda on 12/21/2016.
- */
-export class CommonGraphUtils {
-
- constructor(private NodesFactory:NodesFactory, private LinksFactory:LinksFactory) {
-
- }
-
- public safeApply = (scope:ng.IScope, fn:any) => { //todo remove to general utils
- let phase = scope.$root.$$phase;
- if (phase == '$apply' || phase == '$digest') {
- if (fn && (typeof(fn) === 'function')) {
- fn();
- }
- } else {
- scope.$apply(fn);
- }
- };
-
- /**
- * Draw node on the graph
- * @param cy
- * @param compositionGraphNode
- * @param position
- * @returns {CollectionElements}
- */
- public addNodeToGraph(cy:Cy.Instance, compositionGraphNode:CommonNodeBase, position?:Cy.Position):Cy.CollectionElements {
-
- let node = cy.add(<Cy.ElementDefinition> {
- group: 'nodes',
- position: position,
- data: compositionGraphNode,
- classes: compositionGraphNode.classes
- });
-
- if(!node.data().isUcpe) { //ucpe should not have tooltip
- this.initNodeTooltip(node);
- }
- return node;
- };
-
- /**
- * The function will create a component instance node by the componentInstance position.
- * If the node is UCPE the function will create all cp lan&wan for the ucpe
- * @param cy
- * @param compositionGraphNode
- * @returns {Cy.CollectionElements}
- */
- public addComponentInstanceNodeToGraph(cy:Cy.Instance, compositionGraphNode:CompositionCiNodeBase):Cy.CollectionElements {
-
- let nodePosition = {
- x: +compositionGraphNode.componentInstance.posX,
- y: +compositionGraphNode.componentInstance.posY
- };
-
- let node = this.addNodeToGraph(cy, compositionGraphNode, nodePosition);
- if (compositionGraphNode.isUcpe) {
- this.createUcpeCpNodes(cy, node);
- }
- return node;
- };
-
- /**
- * This function will create CP_WAN & CP_LAN for the UCPE. this is a special node on the group that will behave like ports on the ucpe
- * @param cy
- * @param ucpeGraphNode
- */
- private createUcpeCpNodes(cy:Cy.Instance, ucpeGraphNode:Cy.CollectionNodes):void {
-
- let requirementsArray:Array<any> = ucpeGraphNode.data().componentInstance.requirements["tosca.capabilities.Node"];
- //show only LAN or WAN requirements
- requirementsArray = _.reject(requirementsArray, (requirement:any) => {
- let name:string = requirement.ownerName.toLowerCase();
- return name.indexOf('lan') === -1 && name.indexOf('wan') === -1;
- });
- requirementsArray.sort(function (a, b) {
- let nameA = a.ownerName.toLowerCase().match(/[^ ]+/)[0];
- let nameB = b.ownerName.toLowerCase().match(/[^ ]+/)[0];
- let numA = _.last(a.ownerName.toLowerCase().split(' '));
- let numB = _.last(b.ownerName.toLowerCase().split(' '));
-
- if (nameA === nameB) return numA > numB ? 1 : -1;
- return nameA < nameB ? 1 : -1;
- });
- let position = angular.copy(ucpeGraphNode.boundingbox());
- //add CP nodes to group
- let topCps:number = 0;
- for (let i = 0; i < requirementsArray.length; i++) {
-
- let cpNode = this.NodesFactory.createUcpeCpNode(angular.copy(ucpeGraphNode.data().componentInstance));
- cpNode.componentInstance.capabilities = requirementsArray[i];
- cpNode.id = requirementsArray[i].ownerId;
- cpNode.group = ucpeGraphNode.data().componentInstance.uniqueId;
- cpNode.name = requirementsArray[i].ownerName; //for tooltip
- cpNode.displayName = requirementsArray[i].ownerName;
- cpNode.displayName = cpNode.displayName.length > 5 ? cpNode.displayName.substring(0, 5) + '...' : cpNode.displayName;
-
-
- if (cpNode.name.toLowerCase().indexOf('lan') > -1) {
- cpNode.textPosition = "top";
- cpNode.componentInstance.posX = position.x1 + (i * 90) - (topCps * 90) + 53;
- cpNode.componentInstance.posY = position.y1 + 400 + 27;
- } else {
- cpNode.textPosition = "bottom";
- cpNode.componentInstance.posX = position.x1 + (topCps * 90) + 53;
- cpNode.componentInstance.posY = position.y1 + 27;
- topCps++;
- }
- let cyCpNode = this.addComponentInstanceNodeToGraph(cy, cpNode);
- cyCpNode.lock();
- }
- };
-
- /**
- * Returns relation source and target nodes.
- * @param nodes - all nodes in graph in order to find the edge connecting the two nodes
- * @param fromNodeId
- * @param toNodeId
- * @returns [source, target] array of source node and target node.
- */
- public getRelationNodes(nodes:Cy.CollectionNodes, fromNodeId:string, toNodeId:string) {
- return [
- _.find(nodes, (node:Cy.CollectionFirst) => node.data().id === fromNodeId),
- _.find(nodes, (node:Cy.CollectionFirst) => node.data().id === toNodeId)
- ];
- }
-
- /**
- * Add link to graph - only draw the link
- * @param cy
- * @param link
- * @param getRelationRequirementCapability
- */
- public insertLinkToGraph = (cy:Cy.Instance, link:CompositionCiLinkBase, getRelationRequirementCapability:Function) => {
- const relationNodes = this.getRelationNodes(cy.nodes(), link.source, link.target);
- const sourceNode:CompositionCiNodeBase = relationNodes[0] && relationNodes[0].data();
- const targetNode:CompositionCiNodeBase = relationNodes[1] && relationNodes[1].data();
- if ((sourceNode && !sourceNode.certified) || (targetNode && !targetNode.certified)) {
- link.classes = 'not-certified-link';
- }
- let linkElement = cy.add({
- group: 'edges',
- data: link,
- classes: link.classes
- });
- const getLinkRequirementCapability = () =>
- getRelationRequirementCapability(link.relation.relationships[0], sourceNode.componentInstance, targetNode.componentInstance);
- this.initLinkTooltip(linkElement, link.relation.relationships[0], getLinkRequirementCapability);
- };
-
- /**
- * Add service path link to graph - only draw the link
- * @param cy
- * @param link
- */
- public insertServicePathLinkToGraph = (cy:Cy.Instance, link:CompositionCiServicePathLink) => {
- let linkElement = cy.add({
- group: 'edges',
- data: link,
- classes: link.classes
- });
- this.initServicePathTooltip(linkElement, link);
- };
-
- /**
- * Returns function for the link tooltip content
- * @param {Relationship} linkRelation
- * @param {Requirement} requirement
- * @param {Capability} capability
- * @returns {() => string}
- * @private
- */
- private _getLinkTooltipContent(linkRelation:Relationship, requirement?:Requirement, capability?:Capability):string {
- return '<div class="line">' +
- '<span class="req-cap-label">R: </span>' +
- '<span>' + (requirement ? requirement.getTitle() : linkRelation.relation.requirement) + '</span>' +
- '</div>' +
- '<div class="line">' +
- '<div class="sprite-new link-tooltip-arrow"></div>' +
- '<span class="req-cap-label">C: </span>' +
- '<span>' + (capability ? capability.getTitle() : linkRelation.relation.capability) + '</span>' +
- '</div>';
- }
-
- /**
- * This function will init qtip tooltip on the link
- * @param linkElement - the link we want the tooltip to apply on,
- * @param link
- * @param getLinkRequirementCapability
- * link - the link obj
- */
- public initLinkTooltip(linkElement:Cy.CollectionElements, link:Relationship, getLinkRequirementCapability:Function) {
- const content = () => this._getLinkTooltipContent(link); // base tooltip content without owner names
- const render = (event, api) => {
- // on render (called once at first show), get the link requirement and capability and change to full tooltip content (with owner names)
- getLinkRequirementCapability().then((linkReqCap) => {
- const fullContent = () => this._getLinkTooltipContent(link, linkReqCap.requirement, linkReqCap.capability);
- api.set('content.text', fullContent);
- });
- };
- linkElement.qtip(this.prepareInitTooltipData({content, events: {render}}));
- };
-
- /**
- *
- * @param linkElement
- * @param link
- */
- public initServicePathTooltip(linkElement:Cy.CollectionElements, link:CompositionCiServicePathLink) {
- let content = function () {
- return '<div class="line">' +
- '<div>'+link.pathName+'</div>' +
- '</div>';
- };
- linkElement.qtip(this.prepareInitTooltipData({content}));
- };
-
- private prepareInitTooltipData(options?:Object) {
- return _.merge({
- position: {
- my: 'top center',
- at: 'bottom center',
- adjust: {x:0, y:0},
- effect: false
- },
- style: {
- classes: 'qtip-dark qtip-rounded qtip-custom link-qtip',
- tip: {
- width: 16,
- height: 8
- }
- },
- show: {
- event: 'mouseover',
- delay: 1000
- },
- hide: {event: 'mouseout mousedown'},
- includeLabels: true,
- events: {}
- }, options);
- }
-
- /**
- * go over the relations and draw links on the graph
- * @param cy
- * @param instancesRelations
- * @param getRelationRequirementCapability - function to get requirement and capability of a relation
- */
- public initGraphLinks(cy:Cy.Instance, instancesRelations:Array<RelationshipModel>, getRelationRequirementCapability:Function) {
-
- if (instancesRelations) {
- _.forEach(instancesRelations, (relationshipModel:RelationshipModel) => {
- _.forEach(relationshipModel.relationships, (relationship:Relationship) => {
- let linkToCreate = this.LinksFactory.createGraphLink(cy, relationshipModel, relationship);
- this.insertLinkToGraph(cy, linkToCreate, getRelationRequirementCapability);
- });
- });
- }
- }
-
- /**
- * Determine which nodes are in the UCPE and set child data for them.
- * @param cy
- */
- public initUcpeChildren(cy:Cy.Instance) {
- let ucpe:Cy.CollectionNodes = cy.nodes('[?isUcpe]'); // Get ucpe on graph if exist
- _.each(cy.edges('.ucpe-host-link'), (link)=> {
-
- let ucpeChild:Cy.CollectionNodes = (link.source().id() == ucpe.id()) ? link.target() : link.source();
- this.initUcpeChildData(ucpeChild, ucpe);
-
- //vls dont have ucpe-host-link connection, so need to find them and iterate separately
- let connectedVLs = ucpeChild.connectedEdges().connectedNodes('.vl-node');
- _.forEach(connectedVLs, (vl)=> { //all connected vls must be UCPE children because not allowed to connect to a VL outside of the UCPE
- this.initUcpeChildData(vl, ucpe);
- });
- });
- }
-
- /**
- * Set properties for nodes contained by the UCPE
- * @param childNode- node contained in UCPE
- * @param ucpe- ucpe container node
- */
- public initUcpeChildData(childNode:Cy.CollectionNodes, ucpe:Cy.CollectionNodes) {
-
- if (!childNode.data('isInsideGroup')) {
- this.updateUcpeChildPosition(childNode, ucpe);
- childNode.data({isInsideGroup: true});
- }
-
- }
-
- /**
- * Updates UCPE child node offset, which allows child nodes to be dragged in synchronization with ucpe
- * @param childNode- node contained in UCPE
- * @param ucpe- ucpe container node
- */
- public updateUcpeChildPosition(childNode:Cy.CollectionNodes, ucpe:Cy.CollectionNodes) {
- let childPos:Cy.Position = childNode.relativePosition();
- let ucpePos:Cy.Position = ucpe.relativePosition();
- let offset:Cy.Position = {
- x: childPos.x - ucpePos.x,
- y: childPos.y - ucpePos.y
- };
- childNode.data("ucpeOffset", offset);
- }
-
- /**
- * Removes ucpe-child properties from the node
- * @param childNode- node being removed from UCPE
- */
- public removeUcpeChildData(childNode:Cy.CollectionNodes) {
- childNode.removeData("ucpeOffset");
- childNode.data({isInsideGroup: false});
-
- }
-
-
- public HTMLCoordsToCytoscapeCoords(cytoscapeBoundingBox:Cy.Extent, mousePos:Cy.Position):Cy.Position {
- return {x: mousePos.x + cytoscapeBoundingBox.x1, y: mousePos.y + cytoscapeBoundingBox.y1}
- };
-
-
- public getCytoscapeNodePosition = (cy:Cy.Instance, event:IDragDropEvent):Cy.Position => {
- let targetOffset = $(event.target).offset();
- let x = (event.pageX - targetOffset.left) / cy.zoom();
- let y = (event.pageY - targetOffset.top) / cy.zoom();
-
- return this.HTMLCoordsToCytoscapeCoords(cy.extent(), {
- x: x,
- y: y
- });
- };
-
-
- public getNodePosition(node:Cy.CollectionFirstNode):Cy.Position {
- let nodePosition = node.relativePoint();
- if (node.data().isUcpe) { //UCPEs use bounding box and not relative point.
- nodePosition = {x: node.boundingbox().x1, y: node.boundingbox().y1};
- }
-
- return nodePosition;
- }
-
- /**
- * Generic function that can be used for any html elements overlaid on canvas
- * Returns the html position of a node on canvas, including left palette and header offsets. Option to pass in additional offset to add to return position.
- * @param node
- * @param additionalOffset
- * @returns {Cy.Position}
-
- public getNodePositionWithOffset = (node:Cy.CollectionFirstNode, additionalOffset?:Cy.Position): Cy.Position => {
- if(!additionalOffset) additionalOffset = {x: 0, y:0};
-
- let nodePosition = node.renderedPosition();
- let posWithOffset:Cy.Position = {
- x: nodePosition.x + GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET + additionalOffset.x,
- y: nodePosition.y + GraphUIObjects.COMPOSITION_HEADER_OFFSET + additionalOffset.y
- };
- return posWithOffset;
- };*/
-
- /**
- * return true/false if first node contains in second - this used in order to verify is node is entirely inside ucpe
- * @param firstBox
- * @param secondBox
- * @returns {boolean}
- */
- public isFirstBoxContainsInSecondBox(firstBox:Cy.BoundingBox, secondBox:Cy.BoundingBox) {
-
- return firstBox.x1 > secondBox.x1 && firstBox.x2 < secondBox.x2 && firstBox.y1 > secondBox.y1 && firstBox.y2 < secondBox.y2;
-
- };
-
-
- /**
- * Check if node node bounds position is inside any ucpe on graph, and return the ucpe
- * @param {diagram} the diagram.
- * @param {nodeActualBounds} the actual bound position of the node.
- * @return the ucpe if found else return null
- */
- public isInUcpe = (cy:Cy.Instance, nodeBounds:Cy.BoundingBox):Cy.CollectionElements => {
-
- let ucpeNodes = cy.nodes('[?isUcpe]').filterFn((ucpeNode) => {
- return this.isFirstBoxContainsInSecondBox(nodeBounds, ucpeNode.boundingbox());
- });
- return ucpeNodes;
- };
-
- /**
- *
- * @param cy
- * @param node
- * @returns {Array}
- */
- public getLinkableNodes(cy:Cy.Instance, node:Cy.CollectionFirstNode):Array<CompositionCiNodeBase> {
- let compatibleNodes = [];
- _.each(cy.nodes(), (tempNode)=> {
- if (this.nodeLocationsCompatible(cy, node, tempNode)) {
- compatibleNodes.push(tempNode.data());
- }
- });
- return compatibleNodes;
- }
-
- /**
- * Checks whether node locations are compatible in reference to UCPEs.
- * Returns true if both nodes are in UCPE or both nodes out, or one node is UCPEpart.
- * @param node1
- * @param node2
- */
- public nodeLocationsCompatible(cy:Cy.Instance, node1:Cy.CollectionFirstNode, node2:Cy.CollectionFirstNode) {
-
- let ucpe = cy.nodes('[?isUcpe]');
- if(!ucpe.length){ return true; }
- if(node1.data().isUcpePart || node2.data().isUcpePart) { return true; }
-
- return (this.isFirstBoxContainsInSecondBox(node1.boundingbox(), ucpe.boundingbox()) == this.isFirstBoxContainsInSecondBox(node2.boundingbox(), ucpe.boundingbox()));
-
- }
-
- /**
- * This function will init qtip tooltip on the node
- * @param node - the node we want the tooltip to apply on
- */
- public initNodeTooltip(node:Cy.CollectionNodes) {
-
- let opts = {
- content: function () {
- return this.data('name');
- },
- position: {
- my: 'top center',
- at: 'bottom center',
- adjust: {x:0, y:-5}
- },
- style: {
- classes: 'qtip-dark qtip-rounded qtip-custom',
- tip: {
- width: 16,
- height: 8
- }
- },
- show: {
- event: 'mouseover',
- delay: 1000
- },
- hide: {event: 'mouseout mousedown'},
- includeLabels: true
- };
-
- if (node.data().isUcpePart){ //fix tooltip positioning for UCPE-cps
- opts.position.adjust = {x:0, y:20};
- }
-
- node.qtip(opts);
- };
-}
-
-CommonGraphUtils.$inject = ['NodesFactory', 'LinksFactory'];
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
deleted file mode 100644
index dd50524444..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
+++ /dev/null
@@ -1,361 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { GraphColors, GraphUIObjects} from "app/utils/constants";
-import constant = require("lodash/constant");
-import {ImagesUrl} from "app/utils/constants";
-import {AngularJSBridge} from "app/services/angular-js-bridge-service";
-import { CanvasHandleTypes } from "app/utils";
-/**
- * Created by obarda on 12/18/2016.
- */
-export class ComponentInstanceNodesStyle {
-
- public static getCompositionGraphStyle = ():Array<Cy.Stylesheet> => {
- return [
- {
- selector: 'core',
- css: {
- 'shape': 'rectangle',
- 'active-bg-size': 0,
- 'selection-box-color': 'rgb(0, 159, 219)',
- 'selection-box-opacity': 0.2,
- 'selection-box-border-color': '#009fdb',
- 'selection-box-border-width': 1
-
- }
- },
- {
- selector: 'node',
- css: {
- 'font-family': 'OpenSans-Regular,sans-serif',
-
- 'font-size': 14,
- 'events': 'yes',
- 'text-events': 'yes',
- 'text-border-width': 15,
- 'text-border-color': GraphColors.NODE_UCPE,
- 'text-margin-y': 5
- }
- },
- {
- selector: '.vf-node',
- css: {
- 'background-color': 'transparent',
- 'shape': 'rectangle',
- 'label': 'data(displayName)',
- 'background-image': 'data(img)',
- 'width': GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
- 'height': GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
- 'background-opacity': 0,
- "background-width": GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
- "background-height": GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
- 'text-valign': 'bottom',
- 'text-halign': 'center',
- 'background-fit': 'cover',
- 'background-clip': 'node',
- 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
- 'overlay-opacity': 0
- }
- },
-
- {
- selector: '.service-node',
- css: {
- 'background-color': 'transparent',
- 'label': 'data(displayName)',
- 'events': 'yes',
- 'text-events': 'yes',
- 'background-image': 'data(img)',
- 'width': 64,
- 'height': 64,
- "border-width": 0,
- 'text-valign': 'bottom',
- 'text-halign': 'center',
- 'background-opacity': 0,
- 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
- 'overlay-opacity': 0
- }
- },
- {
- selector: '.cp-node',
- css: {
- 'background-color': 'rgb(255,255,255)',
- 'shape': 'rectangle',
- 'label': 'data(displayName)',
- 'background-image': 'data(img)',
- 'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
- 'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
- 'width': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE,
- 'height': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE/2,
- 'background-position-x': GraphUIObjects.HANDLE_SIZE / 2,
- 'background-position-y': GraphUIObjects.HANDLE_SIZE / 2,
- 'text-valign': 'bottom',
- 'text-halign': 'center',
- 'background-opacity': 0,
- 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
- 'overlay-opacity': 0
- }
- },
- {
- selector: '.vl-node',
- css: {
- 'background-color': 'rgb(255,255,255)',
- 'shape': 'rectangle',
- 'label': 'data(displayName)',
- 'background-image': 'data(img)',
- 'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
- 'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
- 'background-position-x': GraphUIObjects.HANDLE_SIZE / 2,
- 'background-position-y': GraphUIObjects.HANDLE_SIZE / 2,
- 'width': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE,
- 'height': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE / 2,
- 'text-valign': 'bottom',
- 'text-halign': 'center',
- 'background-opacity': 0,
- 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
- 'overlay-opacity': 0
- }
- },
- {
- selector: '.ucpe-cp',
- css: {
- 'background-color': GraphColors.NODE_UCPE_CP,
- 'background-width': 15,
- 'background-height': 15,
- 'width': 15,
- 'height': 15,
- 'text-halign': 'center',
- 'overlay-opacity': 0,
- 'label': 'data(displayName)',
- 'text-valign': 'data(textPosition)',
- 'text-margin-y': (ele:Cy.Collection) => {
- return (ele.data('textPosition') == 'top') ? -5 : 5;
- },
- 'font-size': 12
- }
- },
- {
- selector: '.ucpe-node',
- css: {
- 'background-fit': 'cover',
- 'padding-bottom': 0,
- 'padding-top': 0
- }
- },
- {
- selector: '.simple-link',
- css: {
- 'width': 1,
- 'line-color': GraphColors.BASE_LINK,
- 'target-arrow-color': '#3b7b9b',
- 'target-arrow-shape': 'triangle',
- 'curve-style': 'bezier',
- 'control-point-step-size': 30
- }
- },
- {
- selector: '.archived',
- css: {
- 'shape': 'rectangle',
- 'background-image': (ele:Cy.Collection) => {
- return ele.data().setArchivedImageBgStyle(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE); //Change name to setArchivedImageBgStyle ??
- },
- "border-width": 0
- }
- },
- {
- selector: '.vl-link',
- css: {
- 'width': 3,
- 'line-color': GraphColors.VL_LINK,
- 'curve-style': 'bezier',
- 'control-point-step-size': 30
- }
- },
- {
- selector: '.vl-link-1',
- css: {
- 'width': 3,
- 'line-color': GraphColors.ACTIVE_LINK,
- 'curve-style': 'unbundled-bezier',
- 'target-arrow-color': '#3b7b9b',
- 'target-arrow-shape': 'triangle',
- 'control-point-step-size': 30
- }
- },
- {
- selector: '.ucpe-host-link',
- css: {
- 'width': 0
- }
- },
- {
- selector: '.not-certified-link',
- css: {
- 'width': 1,
- 'line-color': GraphColors.NOT_CERTIFIED_LINK,
- 'curve-style': 'bezier',
- 'control-point-step-size': 30,
- 'line-style': 'dashed',
- 'target-arrow-color': '#3b7b9b',
- 'target-arrow-shape': 'triangle'
-
- }
- },
-
- {
- selector: '.service-path-link',
- css: {
- 'width': 2,
- 'line-color': GraphColors.SERVICE_PATH_LINK,
- 'target-arrow-color': GraphColors.SERVICE_PATH_LINK,
- 'target-arrow-shape': 'triangle',
- 'curve-style': 'bezier',
- 'control-point-step-size': 30
- }
- },
- {
- selector: '.not-certified',
- css: {
- 'shape': 'rectangle',
- 'background-image': (ele:Cy.Collection) => {
- return ele.data().initUncertifiedImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE);
- },
- "border-width": 0
- }
- },
- {
- selector: '.dependent',
- css: {
- 'shape': 'rectangle',
- 'background-image': (ele:Cy.Collection) => {
- return ele.data().initDependentImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE)
- },
- "border-width": 0
- }
- },
- {
- selector: '.dependent.not-certified',
- css: {
- 'shape': 'rectangle',
- 'background-image': (ele:Cy.Collection) => {
- return ele.data().initUncertifiedDependentImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE)
- },
- "border-width": 0
- }
- },
- {
- selector: 'node:selected',
- css: {
- "border-width": 2,
- "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
- 'shape': 'rectangle'
- }
- },
- {
- selector: 'edge:selected',
- css: {
- 'line-color': GraphColors.ACTIVE_LINK
-
- }
- },
- {
- selector: 'edge:active',
- css: {
- 'overlay-opacity': 0
- }
- }, {
- selector: '.configuration-node',
- css: {
- 'background-color': 'rgb(255,255,255)',
- 'shape': 'rectangle',
- 'label': 'data(displayName)',
- 'background-image': 'data(img)',
- 'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
- 'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
- 'background-position-x': GraphUIObjects.HANDLE_SIZE / 2,
- 'background-position-y': GraphUIObjects.HANDLE_SIZE / 2,
- 'width': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE,
- 'height': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE/2,
- 'text-valign': 'bottom',
- 'text-halign': 'center',
- 'background-opacity': 0,
- 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
- 'overlay-opacity': 0
- }
- }
- ]
- }
-
- public static getAddEdgeHandle = () => {
- return {
-
- single: false,
- type: CanvasHandleTypes.ADD_EDGE,
- imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
- lineColor: '#27a337',
- lineWidth: 2,
- lineStyle: 'dashed'
-
- }
- }
-
- public static getTagHandle = () => {
- return {
- single: false,
- type: CanvasHandleTypes.TAG_AVAILABLE,
- imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_TAG_ICON,
- }
- }
-
- public static getTaggedPolicyHandle = () => {
- return {
- single: false,
- type: CanvasHandleTypes.TAGGED_POLICY,
- imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_POLICY_TAGGED_ICON,
- }
- }
-
- public static getTaggedGroupHandle = () => {
- return {
- single: false,
- type: CanvasHandleTypes.TAGGED_GROUP,
- imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_GROUP_TAGGED_ICON,
- }
- }
-
-
- // public static getUcpeCpNodeHandle = () => {
- // return {
- // positionX: "center",
- // positionY: "center",
- // offsetX: -8,
- // offsetY: -10,
- // color: "#27a337",
- // type: "default",
- // single: false,
- // nodeTypeNames: ["ucpe-cp-node"],
- // imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
- // lineWidth: 2,
- // lineStyle: 'dashed'
- // }
- // }
-}
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts
deleted file mode 100644
index bf71e1c868..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import {GraphColors} from "app/utils";
-export class ModulesNodesStyle {
-
- public static getModuleGraphStyle = ():Array<Cy.Stylesheet> => {
-
- return [
- {
- selector: '.cy-expand-collapse-collapsed-node',
- css: {
- 'background-image': 'data(img)',
- 'width': 34,
- 'height': 32,
- 'background-opacity': 0,
- 'shape': 'rectangle',
- 'label': 'data(displayName)',
- 'events': 'yes',
- 'text-events': 'yes',
- 'text-valign': 'bottom',
- 'text-halign': 'center',
- 'text-margin-y': 5,
- 'border-opacity': 0
- }
- },
- {
- selector: '.module-node',
- css: {
- 'background-color': 'transparent',
- 'background-opacity': 0,
- "border-width": 2,
- "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
- 'border-style': 'dashed',
- 'label': 'data(displayName)',
- 'events': 'yes',
- 'text-events': 'yes',
- 'text-valign': 'bottom',
- 'text-halign': 'center',
- 'text-margin-y': 8
- }
- },
- {
- selector: 'node:selected',
- css: {
- "border-opacity": 0
- }
- },
- {
- selector: '.simple-link:selected',
- css: {
- 'line-color': GraphColors.BASE_LINK,
- }
- },
- {
- selector: '.vl-link:selected',
- css: {
- 'line-color': GraphColors.VL_LINK,
- }
- },
- {
- selector: '.cy-expand-collapse-collapsed-node:selected',
- css: {
- "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
- 'border-opacity': 1,
- 'border-style': 'solid',
- 'border-width': 2
- }
- },
- {
- selector: '.module-node:selected',
- css: {
- "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
- 'border-opacity': 1
- }
- },
- {
- selector: '.dummy-node',
- css: {
- 'width': 20,
- 'height': 20
- }
- },
- ]
- }
-}
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
deleted file mode 100644
index e6c2fb395b..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts
+++ /dev/null
@@ -1,947 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import {
- Match,
- LinkMenu,
- ComponentInstance,
- LeftPaletteComponent,
- Relationship,
- Component,
- Service,
- ConnectRelationModel,
- CompositionCiNodeBase,
- CompositionCiNodeVl,
- ModalModel,
- ButtonModel,
- NodesFactory,
- Point
-} from "app/models";
-import { ComponentInstanceFactory, ComponentFactory, GRAPH_EVENTS, GraphColors, DEPENDENCY_EVENTS } 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";
-
-
-export interface ICompositionGraphScope extends ng.IScope {
-
- 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;
- zoneBackgroundClicked() :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[]>;
-
- //modify link menu - for now only delete menu
- 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;
-
- //Links menus
- 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;
-}
-
-export class CompositionGraph implements ng.IDirective {
- 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) {
-
- }
-
- restrict = 'E';
- template = require('./composition-graph.html');
- scope = {
- component: '=',
- isViewOnly: '=',
- withSidebar: '='
- };
-
- link = (scope: ICompositionGraphScope, el: JQuery) => {
- this.loadGraph(scope, el);
-
- if (!scope.component.groupInstances || !scope.component.policies) {
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED, () => {
- this.loadGraphData(scope);
- });
- } else {
- this.loadGraphData(scope);
- }
-
-
- scope.$on('$destroy', () => {
- this._cy.destroy();
- _.forEach(GRAPH_EVENTS, (event) => {
- this.eventListenerService.unRegisterObserver(event);
- });
- this.eventListenerService.unRegisterObserver(EVENTS.SHOW_LOADER_EVENT + 'composition-graph');
- this.eventListenerService.unRegisterObserver(EVENTS.HIDE_LOADER_EVENT + 'composition-graph');
- this.eventListenerService.unRegisterObserver(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE);
- });
-
- };
-
- 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);
- this.compositionGraphZoneUtils.initZoneInstances(scope.zones, scope.component);
- setTimeout(() => {//Need settimeout so that angular canvas changes will take effect before resize & center
- this.GeneralGraphUtils.zoomAllWithMax(this._cy, 1);
- });
- }
-
- private loadGraph = (scope: ICompositionGraphScope, el: JQuery) => {
- let graphEl = el.find('.sdc-composition-graph-wrapper');
- this.initGraph(graphEl, scope.isViewOnly);
- this.initDropZone(scope);
- this.initZones(scope);
- this.registerCytoscapeGraphEvents(scope);
- this.registerCustomEvents(scope, el);
- this.initViewMode(scope.isViewOnly);
- };
-
- private initGraph(graphEl: JQuery, isViewOnly: boolean) {
-
- this._cy = cytoscape({
- container: graphEl,
- style: ComponentInstanceNodesStyle.getCompositionGraphStyle(),
- zoomingEnabled: true,
- maxZoom: 1.2,
- minZoom: .1,
- userZoomingEnabled: false,
- userPanningEnabled: true,
- selectionType: 'single',
- boxSelectionEnabled: true,
- autolock: isViewOnly,
- autoungrabify: isViewOnly
- });
- }
-
- private initViewMode(isViewOnly: boolean) {
-
- if (isViewOnly) {
- //remove event listeners
- this._cy.off('drag');
- this._cy.off('handlemouseout');
- this._cy.off('handlemouseover');
- this._cy.off('canvasredraw');
- this._cy.off('handletagclick')
- this._cy.edges().unselectify();
- }
- };
-
- private registerCustomEvents(scope: ICompositionGraphScope, el: JQuery) {
-
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, (groupInstance: GroupInstance) => {
- this.compositionGraphZoneUtils.findAndUpdateZoneInstanceData(scope.zones, groupInstance);
- this.GeneralGraphUtils.showGroupUpdateSuccess();
- });
-
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, (policyInstance: PolicyInstance) => {
- this.compositionGraphZoneUtils.findAndUpdateZoneInstanceData(scope.zones, policyInstance);
- this.GeneralGraphUtils.showPolicyUpdateSuccess();
- });
-
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (leftPaletteComponent: LeftPaletteComponent) => {
- if (scope.isOnDrag) {
- return;
- }
-
- this.$log.info(`composition-graph::registerEventServiceEvents:: palette hover on component: ${leftPaletteComponent.uniqueId}`);
-
- let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes());
- let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy);
-
- if (this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(leftPaletteComponent.uniqueId)) {
- let cacheComponent = this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(leftPaletteComponent.uniqueId);
- let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(cacheComponent, nodesData, nodesLinks);
-
- this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy);
- this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy);
-
- return;
- }
-
- //----------------------- ORIT TO FIX------------------------//
-
- this.ComponentServiceNg2.getCapabilitiesAndRequirements(leftPaletteComponent.componentType, leftPaletteComponent.uniqueId).subscribe((response: ComponentGenericResponse) => {
-
- let component = this.ComponentFactory.createEmptyComponent(leftPaletteComponent.componentType);
- component.uniqueId = component.uniqueId;
- component.capabilities = response.capabilities;
- component.requirements = response.requirements;
- this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.setValue(leftPaletteComponent.uniqueId, component);
- });
- });
-
- 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);
- this.compositionGraphZoneUtils.showZone(scope.zones[zoneType]);
-
- this.LoaderService.showLoader('composition-graph');
- 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) => {
- this.LoaderService.hideLoader('composition-graph');
- });
- });
-
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT, () => {
-
- this._cy.emit('hidehandles');
- this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy);
- });
-
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, (dragElement, dragComponent) => {
-
- this.dragElement = dragElement;
- this.dragComponent = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent);
- });
-
- 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) => {
-
- let selectedNode = this._cy.getElementById(component.uniqueId);
- selectedNode.data().componentInstance.name = component.name;
- selectedNode.data('name', component.name); //used for tooltip
- selectedNode.data('displayName', selectedNode.data().getDisplayName()); //abbreviated
-
- });
-
- 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) => {
-
- 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);
- }
- //remove it from zones
- scope.zones[deletedInstance.type].removeInstance(deletedInstance.uniqueId);
- if (deletedInstance.type === ZoneInstanceType.GROUP && !_.isEmpty(scope.zones[ZoneInstanceType.POLICY])) {
- this.compositionGraphZoneUtils.updateTargetsOrMembersOnCanvasDelete(deletedInstance.uniqueId, [scope.zones[ZoneInstanceType.POLICY]], ZoneInstanceAssignmentType.GROUPS);
- }
- this.eventListenerService.notifyObservers(EVENTS.UPDATE_PANEL);
- });
-
- 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);
- }
- });
-
- 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.commonGraphUtils.initUcpeChildData(node, ucpe);
- //check if item is a VL, and if so, skip adding the binding to ucpe
- if (!(node.data() instanceof CompositionCiNodeVl)) {
- this.CompositionGraphLinkUtils.createVfToUcpeLink(scope.component, this._cy, ucpe.data(), node.data()); //create link from the node to the ucpe
- }
-
- if (updateExistingNode) {
- 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.commonGraphUtils.removeUcpeChildData(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) => {
- scope.component = component;
- this._cy.elements().remove();
- this.loadGraphData(scope);
- });
-
- this.eventListenerService.registerObserverCallback(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE, (ischecked: boolean) => {
- if (ischecked) {
- this._cy.$('node:selected').addClass('dependent');
- } else {
- // due to defect in cytoscape, just changing the class does not replace the icon, and i need to revert to original icon with no markings.
- this._cy.$('node:selected').removeClass('dependent');
- this._cy.$('node:selected').style({'background-image': this._cy.$('node:selected').data('originalImg')});
- }
- });
-
- scope.zoom = (zoomIn: boolean): void => {
- let currentZoom: number = this._cy.zoom();
- if (zoomIn) {
- this.GeneralGraphUtils.zoomGraphTo(this._cy, currentZoom + .1);
- } else {
- this.GeneralGraphUtils.zoomGraphTo(this._cy, currentZoom - .1);
- }
- }
-
-
- scope.zoomAllWithoutSidebar = () => {
- scope.withSidebar = false;
- setTimeout(() => { //wait for sidebar changes to take effect before zooming
- this.GeneralGraphUtils.zoomAll(this._cy);
- });
- };
-
- 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);
- scope.componentInstanceNames = _.map(nodes, node => node.data('name'));
- } else {
- scope.componentInstanceNames = [];
- }
- };
-
- scope.highlightSearchMatches = (searchTerm: string) => {
- this.NodesGraphUtils.highlightMatchingNodesByName(this._cy, searchTerm);
- let matchingNodes: Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm);
- this.GeneralGraphUtils.zoomAll(this._cy, matchingNodes);
- };
-
- scope.saveChangedCapabilityProperties = (): Promise<PropertyBEModel[]> => {
- return new Promise<PropertyBEModel[]>((resolve) => {
- 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;
- return propBE;
- });
- if (capabilityPropertiesBE.length > 0) {
- // if there are capability properties to update, then first update capability properties and then resolve promise
- this.ComponentInstanceServiceNg2
- .updateInstanceCapabilityProperties(
- scope.component,
- this.ConnectionWizardServiceNg2.selectedMatch.toNode,
- this.ConnectionWizardServiceNg2.selectedMatch.capability,
- capabilityPropertiesBE
- )
- .subscribe((response) => {
- console.log("Update resource instance capability properties response: ", response);
- this.ConnectionWizardServiceNg2.changedCapabilityProperties = [];
- resolve(capabilityPropertiesBE);
- });
- } else {
- // no capability properties to update, immediately resolve promise
- resolve(capabilityPropertiesBE);
- }
- });
- };
-
- scope.createLinkFromMenu = (): void => {
- scope.isLinkMenuOpen = false;
-
- scope.saveChangedCapabilityProperties().then(() => {
- //create link:
- this.CompositionGraphLinkUtils
- .createLinkFromMenu(this._cy, this.ConnectionWizardServiceNg2.selectedMatch, scope.component);
- });
- };
-
- scope.hideRelationMenu = () => {
- this.commonGraphUtils.safeApply(scope, () => {
- delete scope.canvasMenuProps;
- this.$timeout.cancel(scope.relationMenuTimeout);
- });
- };
-
- scope.createOrUpdateServicePath = (data: any) => {
- this.servicePathGraphUtils.createOrUpdateServicePath(scope, data);
- };
- scope.deletePathsOnCy = () => {
- this.servicePathGraphUtils.deletePathsFromGraph(this._cy, <Service>scope.component);
- };
- scope.drawPathOnCy = (data: ForwardingPath) => {
- this.servicePathGraphUtils.drawPath(this._cy, data, <Service>scope.component);
- };
-
- 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];
-
- scope.component.getRelationRequirementCapability(relationship, sourceNode.componentInstance, targetNode.componentInstance).then((objReqCap) => {
- const capability = objReqCap.capability;
- const requirement = objReqCap.requirement;
-
- this.ConnectionWizardServiceNg2.currentComponent = scope.component;
- this.ConnectionWizardServiceNg2.connectRelationModel = new ConnectRelationModel(sourceNode, targetNode, []);
- this.ConnectionWizardServiceNg2.selectedMatch = new Match(requirement, capability, true, linkData.source, linkData.target);
- this.ConnectionWizardServiceNg2.selectedMatch.relationship = relationship;
-
- const title = `Connection Properties`;
- const saveButton: ButtonModel = new ButtonModel('Save', 'blue', () => {
- scope.saveChangedCapabilityProperties().then(() => {
- this.ModalServiceNg2.closeCurrentModal();
- })
- });
- const cancelButton: ButtonModel = new ButtonModel('Cancel', 'white', () => {
- this.ModalServiceNg2.closeCurrentModal();
- });
- const modal = new ModalModel('xl', title, '', [saveButton, cancelButton]);
- const modalInstance = this.ModalServiceNg2.createCustomModal(modal);
- this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent);
- modalInstance.instance.open();
-
- new Promise((resolve) => {
- if (!this.ConnectionWizardServiceNg2.selectedMatch.capability.properties) {
- this.ComponentInstanceServiceNg2.getInstanceCapabilityProperties(scope.component, linkData.target, capability)
- .subscribe(() => {
- resolve();
- }, (error) => {
- });
- } else {
- resolve();
- }
- }).then(() => {
- this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent);
- })
-
- }, (error) => {
- });
- };
-
- scope.deleteRelation = (link: Cy.CollectionEdges) => {
- scope.hideRelationMenu();
-
- //if multiple edges selected, delete the VL itself so edges get deleted automatically
- if (this._cy.$('edge:selected').length > 1) {
- this.NodesGraphUtils.deleteNode(this._cy, scope.component, this._cy.$('node:selected'));
- } else {
- this.CompositionGraphLinkUtils.deleteLink(this._cy, scope.component, true, link);
- }
- };
- }
-
- private registerCytoscapeGraphEvents(scope: ICompositionGraphScope) {
-
- this._cy.on('addedgemouseup', (event, data) => {
- scope.relationMenuDirectiveObj = this.CompositionGraphLinkUtils.onLinkDrawn(this._cy, data.source, data.target);
- if (scope.relationMenuDirectiveObj != null) {
- this.ConnectionWizardServiceNg2.setRelationMenuDirectiveObj(scope.relationMenuDirectiveObj);
- this.ConnectionWizardServiceNg2.currentComponent = scope.component;
- //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;
- 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._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);
- }
- });
-
- this._cy.on('drag', 'node', (event: Cy.EventObject) => {
-
- if (event.cyTarget.data().isDraggable) {
- event.cyTarget.style({ 'overlay-opacity': 0.24 });
- if (this.GeneralGraphUtils.isValidDrop(this._cy, event.cyTarget)) {
- event.cyTarget.style({ 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR });
- } else {
- 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) => {
- return {
- x: pos.x + node.data("ucpeOffset").x,
- y: pos.y + node.data("ucpeOffset").y
- }
- });
- }
- });
-
- 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
- return;
- }
-
- if (scope.zoneTagMode) {
- scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getHoverTagModeId();
- return;
- }
-
- let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes());
- let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy);
-
- let linkableNodes = this.commonGraphUtils.getLinkableNodes(this._cy, payload.node);
- let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(payload.node.data().componentInstance, linkableNodes, nodesLinks);
- this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy);
- this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy, payload.node.data());
-
- this._cy.scratch()._edge_editation_highlights = true;
- });
-
- this._cy.on('handlemouseout', () => {
- if (scope.zoneTagMode) {
- scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getTagModeId();
- return;
- }
- if (this._cy.scratch('_edge_editation_highlights') === true) {
- this._cy.removeScratch('_edge_editation_highlights');
- this._cy.emit('hidehandles');
- this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy);
- }
- });
-
-
- this._cy.on('tapend', (event: Cy.EventObject) => {
- scope.isOnDrag = false;
- if (scope.zoneTagMode) {
- return;
- }
- if (event.cyTarget === this._cy) { //On Background clicked
- if (this._cy.$('node:selected').length === 0) { //if the background click but not dragged
- if (scope.activeZoneInstance) {
- scope.unsetActiveZoneInstance();
- }
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED);
- }
- scope.hideRelationMenu();
- }
-
- else if (event.cyTarget.isEdge()) { //On Edge clicked
- this.CompositionGraphLinkUtils.handleLinkClick(this._cy, event);
- if (event.cyTarget.data().type === CompositionCiServicePathLink.LINK_TYPE) {
- return;
- }
- this.openModifyLinkMenu(scope, this.CompositionGraphLinkUtils.getModifyLinkMenu(event.cyTarget[0], event), 6000);
- }
-
- else { //On Node clicked
-
- this._cy.nodes(':grabbed').style({ 'overlay-opacity': 0 });
-
- 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');
- 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.
- }
- this.NodesGraphUtils.onNodesPositionChanged(this._cy, scope.component, nodesMoved);
- } else {
- this.$log.debug('composition-graph::onNodeSelectedEvent:: fired');
- if (scope.activeZoneInstance) {
- scope.unsetActiveZoneInstance();
- }
- scope.$apply(() => {
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance);
- });
- }
-
- if (isUcpe) {
- this._cy.nodes('.ucpe-cp').lock();
- event.cyTarget.style('opacity', 1);
- }
-
- }
- });
-
- 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) => {
- if (scope.zoneTagMode) {
- this.compositionGraphZoneUtils.showZoneTagIndications(this._cy, scope.activeZoneInstance);
- }
- });
-
- 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) => {
- scope.hideRelationMenu();
- this.$timeout(() => {
- scope.canvasMenuProps = {
- open: true,
- styleClass: 'w-sdc-canvas-menu-list',
- items: [],
- position: {
- x: `${linkMenuObject.position.x}px`,
- y: `${linkMenuObject.position.y}px`
- }
- };
-
- if (this._cy.$('edge:selected').length === 1) {
- scope.canvasMenuProps.items.push({
- contents: 'View',
- styleClass: 'w-sdc-canvas-menu-item-view',
- action: () => {
- scope.viewRelation(<Cy.CollectionEdges>linkMenuObject.link);
- }
- });
- }
- if (!scope.isViewOnly) {
- scope.canvasMenuProps.items.push({
- contents: 'Delete',
- styleClass: 'w-sdc-canvas-menu-item-delete',
- action: () => {
- scope.deleteRelation(<Cy.CollectionEdges>linkMenuObject.link);
- }
- });
- }
- scope.relationMenuTimeout = this.$timeout(() => {
- scope.hideRelationMenu();
- }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000);
- });
- };
-
- private initGraphNodes(componentInstances: ComponentInstance[], isViewOnly: boolean) {
-
-
- setTimeout(() => {
- let handles = new CytoscapeEdgeEditation;
- handles.init(this._cy);
- if (!isViewOnly) { //Init nodes handle extension - enable dynamic links
- handles.initNodeEvents();
- handles.registerHandle(ComponentInstanceNodesStyle.getAddEdgeHandle());
- }
- handles.registerHandle(ComponentInstanceNodesStyle.getTagHandle());
- handles.registerHandle(ComponentInstanceNodesStyle.getTaggedPolicyHandle());
- handles.registerHandle(ComponentInstanceNodesStyle.getTaggedGroupHandle());
- }, 0);
-
-
- _.each(componentInstances, (instance) => {
- let compositionGraphNode: CompositionCiNodeBase = this.NodesFactory.createNode(instance);
- this.commonGraphUtils.addComponentInstanceNodeToGraph(this._cy, compositionGraphNode);
- });
- }
-
-
- private initDropZone(scope: ICompositionGraphScope) {
-
- if (scope.isViewOnly) {
- return;
- }
- scope.dropCallback = (event: IDragDropEvent) => {
- this.$log.debug(`composition-graph::dropCallback:: fired`);
- this.CompositionGraphPaletteUtils.addNodeFromPalette(this._cy, event, scope.component);
- };
-
- 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>();
- if (this.dragElement.hasClass('red')) {
- deferred.reject();
- } else {
- deferred.resolve();
- }
-
- return deferred.promise;
- }
- }
-
-
- private initZones = (scope: ICompositionGraphScope): void => {
- scope.zones = this.compositionGraphZoneUtils.createCompositionZones();
-
-
- scope.zoneMinimizeToggle = (zoneType: ZoneInstanceType): void => {
- scope.zones[zoneType].minimized = !scope.zones[zoneType].minimized;
- };
-
- 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
- instance.mode = newMode;
- }
-
- if (newMode == ZoneInstanceMode.NONE) {
- this.compositionGraphZoneUtils.hideZoneTagIndications(this._cy);
- if (scope.zones[ZoneInstanceType.GROUP]) {
- this.compositionGraphZoneUtils.hideGroupZoneIndications(scope.zones[ZoneInstanceType.GROUP].instances);
- }
- }
- if (newMode >= ZoneInstanceMode.HOVER) {
- this.compositionGraphZoneUtils.showZoneTagIndications(this._cy, instance);
- if (instance.type == ZoneInstanceType.POLICY && scope.zones[ZoneInstanceType.GROUP]) {
- this.compositionGraphZoneUtils.showGroupZoneIndications(scope.zones[ZoneInstanceType.GROUP].instances, instance);
- }
- }
- if (newMode >= ZoneInstanceMode.SELECTED) {
- this._cy.$('node:selected').unselect();
- if (scope.activeZoneInstance && scope.activeZoneInstance != instance && newMode >= ZoneInstanceMode.SELECTED) {
- scope.activeZoneInstance.mode = ZoneInstanceMode.NONE;
- }
- scope.activeZoneInstance = instance;
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, instance);
- }
- if (newMode == ZoneInstanceMode.TAG) {
- this.compositionGraphZoneUtils.startCyTagMode(this._cy);
- scope.zoneTagMode = scope.zones[zoneId].getTagModeId();
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CANVAS_TAG_START, zoneId);
- }
- }
- };
-
- scope.zoneInstanceTagged = (taggedInstance: ZoneInstance) => {
- scope.activeZoneInstance.addOrRemoveAssignment(taggedInstance.instanceData.uniqueId, ZoneInstanceAssignmentType.GROUPS);
- let newHandle: string = this.compositionGraphZoneUtils.getCorrectHandleForNode(taggedInstance.instanceData.uniqueId, scope.activeZoneInstance);
- taggedInstance.showHandle(newHandle);
- }
-
- scope.zoneBackgroundClicked = (): void => {
- if (!scope.zoneTagMode && scope.activeZoneInstance) {
- scope.unsetActiveZoneInstance();
- }
- };
-
- scope.zoneAssignmentSaveStart = () => {
- this.LoaderService.showLoader('composition-graph');
- }
-
- scope.zoneAssignmentSaveComplete = (success: boolean) => {
- this.LoaderService.hideLoader('composition-graph');
- if (!success) {
- this.GeneralGraphUtils.showUpdateFailure();
- }
- };
-
- scope.unsetActiveZoneInstance = (): void => {
- if (scope.activeZoneInstance) {
- scope.activeZoneInstance.mode = ZoneInstanceMode.NONE;
- scope.activeZoneInstance = null;
- scope.zoneTagMode = null;
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED);
- }
- };
- };
-
-
- public static factory = ($q,
- $log,
- $timeout,
- NodesFactory,
- LinksGraphUtils,
- GeneralGraphUtils,
- ComponentInstanceFactory,
- NodesGraphUtils,
- EventListenerService,
- ComponentFactory,
- LoaderService,
- CommonGraphUtils,
- MatchCapabilitiesRequirementsUtils,
- CompositionGraphPaletteUtils,
- CompositionGraphZoneUtils,
- ComponentServiceNg2,
- ModalService,
- ConnectionWizardService,
- ComponentInstanceServiceNg2,
- ServicePathGraphUtils) => {
- return new CompositionGraph(
- $q,
- $log,
- $timeout,
- NodesFactory,
- LinksGraphUtils,
- GeneralGraphUtils,
- ComponentInstanceFactory,
- NodesGraphUtils,
- EventListenerService,
- ComponentFactory,
- LoaderService,
- CommonGraphUtils,
- MatchCapabilitiesRequirementsUtils,
- CompositionGraphPaletteUtils,
- CompositionGraphZoneUtils,
- ComponentServiceNg2,
- ModalService,
- ConnectionWizardService,
- ComponentInstanceServiceNg2,
- ServicePathGraphUtils);
- }
-}
-
-CompositionGraph.factory.$inject = [
- '$q',
- '$log',
- '$timeout',
- 'NodesFactory',
- 'CompositionGraphLinkUtils',
- 'CompositionGraphGeneralUtils',
- 'ComponentInstanceFactory',
- 'CompositionGraphNodesUtils',
- 'EventListenerService',
- 'ComponentFactory',
- 'LoaderService',
- 'CommonGraphUtils',
- 'MatchCapabilitiesRequirementsUtils',
- 'CompositionGraphPaletteUtils',
- 'CompositionGraphZoneUtils',
- 'ComponentServiceNg2',
- 'ModalServiceNg2',
- 'ConnectionWizardServiceNg2',
- 'ComponentInstanceServiceNg2',
- 'ServicePathGraphUtils'
-];
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html
deleted file mode 100644
index b473f44628..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
- ~
- ~ Licensed under the Apache License, Version 2.0 (the "License");
- ~ you may not use this file except in compliance with the License.
- ~ You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- -->
-
-
-<loader display="isLoading" loader-type="composition-graph"></loader>
-<div class="sdc-composition-graph-wrapper {{zoneTagMode}}" ng-class="{'with-sidebar': withSidebar, 'view-only':isViewOnly}"
- data-drop="!zoneTagMode"
- data-jqyoui-options="{accept: verifyDrop}"
- data-jqyoui-droppable="{onDrop:'dropCallback', beforeDrop: 'beforeDropCallback'}">
-</div>
-
-<!-- <relation-menu relation-menu-directive-obj="relationMenuDirectiveObj" is-link-menu-open="isLinkMenuOpen"
- create-relation="createLinkFromMenu" cancel="cancelRelationMenu()"></relation-menu> -->
-
-<menu-list-ng2 [props]="canvasMenuProps"></menu-list-ng2>
-
- <div class="w-sdc-search-menu" data-ng-class="{'with-sidebar': withSidebar}">
-
- <ng2-service-path-selector
- ng-if="component.isService()"
- [service]="component"
- [draw-path]="drawPathOnCy"
- [delete-paths]="deletePathsOnCy"
- [selected-path-id]="selectedPathId">
- </ng2-service-path-selector>
- <ng2-service-path
- ng-if="component.isService()"
- [service]="component"
- [on-create]="createOrUpdateServicePath"
- [is-view-only]="isViewOnly">
- </ng2-service-path>
- <ng2-search-with-autocomplete
- [search-placeholder]="'Type to search'"
- [auto-complete-values]="componentInstanceNames"
- (search-changed)="getAutoCompleteValues($event)"
- (search-button-clicked)="highlightSearchMatches($event)"
- [search-bar-class]="'composition-search'">
- </ng2-search-with-autocomplete>
- <div class="zoom-icons sprite-new canvas-fit-all" data-ng-click="zoomAllWithoutSidebar()"></div>
- <div class="zoom-icons sprite-new zoom-plus" data-ng-click="zoom(true)"></div>
- <div class="zoom-icons sprite-new zoom-minus" data-ng-click="zoom(false)"></div>
- </div>
-<!--<asset-popover ng-if="assetPopoverOpen" asset-popover-obj="assetPopoverObj" delete-asset="deleteNode(assetPopoverObj.nodeId)"></asset-popover>-->
-<div class="sdc-canvas-zones__wrapper {{zoneTagMode}}" data-ng-class="{'with-sidebar': withSidebar}">
- <ng2-zone-container data-ng-repeat="zone in zones" [title]="zone.title" [type]="zone.type" [count]="zone.instances.length"
- [visible]="zone.visible" [minimized]="zone.minimized" (minimize)="zoneMinimizeToggle(zone.type)" (background-click)="zoneBackgroundClicked()">
- <ng2-zone-instance
- data-ng-repeat="instance in zone.instances" [hidden]="instance.hidden"
- [zone-instance]="instance" [default-icon-text]="zone.defaultIconText" [is-active]="activeZoneInstance == instance" [active-instance-mode]="activeZoneInstance && activeZoneInstance.mode"
- [is-view-only]="isViewOnly" [force-save]="instance.forceSave" (mode-change)="zoneInstanceModeChanged($event.newMode, $event.instance, zone.type)" (tag-handle-click)="zoneInstanceTagged($event)"
- (assignment-save-start)="zoneAssignmentSaveStart()" (assignment-save-complete)="zoneAssignmentSaveComplete($event)">
- </ng2-zone-instance>
- </ng2-zone-container>
-</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less
deleted file mode 100644
index 7124a4b5a6..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less
+++ /dev/null
@@ -1,50 +0,0 @@
-composition-graph {
- display: block;
- height:100%;
- width: 100%;
-
- .sdc-composition-graph-wrapper{
- height:100%;
- width: 100%;
-
- &.with-sidebar {
- width: calc(~'100% - 300px');
- }
- }
-
- .view-only{
- background-color:rgb(248, 248, 248);
- }
-
- .sdc-canvas-zones__wrapper {
- position: absolute;
- bottom: 10px;
- right: 12px;
- display:flex;
- transition: right 0.2s;
-
- &.with-sidebar {
- right:310px;
- }
-
- ng2-zone-container {
- display:flex;
- margin-left: 10px;
- }
- }
-
-
- .group-tagging {
- cursor: url("../../../../assets/styles/images/canvas-tagging-icons/group_1.svg"), pointer;
- }
- .group-tagging-hover {
- cursor: url("../../../../assets/styles/images/canvas-tagging-icons/group_2.svg"), pointer;
- }
- .policy-tagging {
- cursor: url("../../../../assets/styles/images/canvas-tagging-icons/policy_1.svg"), pointer;
- }
- .policy-tagging-hover {
- cursor: url("../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer;
- }
-
-}
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts
deleted file mode 100644
index 329af56e87..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts
+++ /dev/null
@@ -1,323 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import {ComponentInstance, Component, Match, CompositionCiLinkBase, CompositionCiNodeUcpeCp} from "app/models";
-import {QueueUtils, Dictionary, GraphUIObjects} from "app/utils";
-import {LoaderService} from "app/services";
-import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils";
-import {CommonGraphUtils} from "../../common/common-graph-utils";
-
-
-export class CompositionGraphGeneralUtils {
-
- public componentRequirementsAndCapabilitiesCaching = new Dictionary<string, Component>();
- protected static graphUtilsUpdateQueue:QueueUtils;
-
- constructor(private $q:ng.IQService,
- private LoaderService:LoaderService,
- private commonGraphUtils:CommonGraphUtils,
- private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils,
- private Notification:any) {
- CompositionGraphGeneralUtils.graphUtilsUpdateQueue = new QueueUtils(this.$q);
- }
-
-
- /**
- * Get the offset for the link creation Menu
- * @param point
- * @returns {Cy.Position}
- */
- public calcMenuOffset:Function = (point:Cy.Position):Cy.Position => {
- point.x = point.x + 60;
- point.y = point.y + 105;
- return point;
- };
-
- /**
- * return the top left position of the link menu
- * @param cy
- * @param targetNodePosition
- * @returns {Cy.Position}
- */
- public getLinkMenuPosition = (cy:Cy.Instance, targetNodePosition:Cy.Position) => {
- let menuPosition:Cy.Position = this.calcMenuOffset(targetNodePosition); //get the link mid point
- if ($(document.body).height() < menuPosition.y + GraphUIObjects.LINK_MENU_HEIGHT + $(document.getElementsByClassName('sdc-composition-graph-wrapper')).offset().top) { // if position menu is overflow bottom
- menuPosition.y = $(document.body).height() - GraphUIObjects.TOP_HEADER_HEIGHT - GraphUIObjects.LINK_MENU_HEIGHT;
- }
- return menuPosition;
- };
-
-
- public zoomGraphTo = (cy:Cy.Instance, zoomLevel: number):void => {
- let zy = cy.height() / 2;
- let zx = cy.width() / 2;
- cy.zoom({
- level: zoomLevel,
- renderedPosition: { x: zx, y: zy }
- });
- }
-
-
- //saves the current zoom, and then sets a temporary maximum zoom for zoomAll, and then reverts to old value
- public zoomAllWithMax = (cy:Cy.Instance, maxZoom:number):void => {
-
- let oldMaxZoom:number = cy.maxZoom();
-
- cy.maxZoom(maxZoom);
- this.zoomAll(cy);
- cy.maxZoom(oldMaxZoom);
-
- };
-
-
- //Zooms to fit all of the nodes in the collection passed in. If no nodes are passed in, will zoom to fit all nodes on graph
- public zoomAll = (cy:Cy.Instance, nodes?:Cy.CollectionNodes):void => {
-
- if (!nodes || !nodes.length) {
- nodes = cy.nodes();
- }
-
- cy.resize();
- cy.animate({
- fit: { eles: nodes, padding: 20 },
- center: { eles: nodes }
- }, { duration: 400 });
- };
-
- /**
- * will return true/false if two nodes overlapping
- *
- * @param graph node
- */
- private isNodesOverlapping(node:Cy.CollectionFirstNode, draggedNode:Cy.CollectionFirstNode):boolean {
-
- let nodeBoundingBox:Cy.BoundingBox = node.renderedBoundingBox();
- let secondNodeBoundingBox:Cy.BoundingBox = draggedNode.renderedBoundingBox();
-
- return this.isBBoxOverlapping(nodeBoundingBox, secondNodeBoundingBox);
- }
-
- /**
- * Checks whether the bounding boxes of two nodes are overlapping on any side
- * @param nodeOneBBox
- * @param nodeTwoBBox
- * @returns {boolean}
- */
- private isBBoxOverlapping(nodeOneBBox:Cy.BoundingBox, nodeTwoBBox:Cy.BoundingBox) {
- return (((nodeOneBBox.x1 < nodeTwoBBox.x1 && nodeOneBBox.x2 > nodeTwoBBox.x1) ||
- (nodeOneBBox.x1 < nodeTwoBBox.x2 && nodeOneBBox.x2 > nodeTwoBBox.x2) ||
- (nodeTwoBBox.x1 < nodeOneBBox.x1 && nodeTwoBBox.x2 > nodeOneBBox.x2)) &&
- ((nodeOneBBox.y1 < nodeTwoBBox.y1 && nodeOneBBox.y2 > nodeTwoBBox.y1) ||
- (nodeOneBBox.y1 < nodeTwoBBox.y2 && nodeOneBBox.y2 > nodeTwoBBox.y2) ||
- (nodeTwoBBox.y1 < nodeOneBBox.y1 && nodeTwoBBox.y2 > nodeOneBBox.y2)))
- }
-
-
- /**
- * Checks whether a specific component instance can be hosted on the UCPE instance
- * @param cy - Cytoscape instance
- * @param fromUcpeInstance
- * @param toComponentInstance
- * @returns {Match}
- */
- public canBeHostedOn(cy:Cy.Instance, fromUcpeInstance:ComponentInstance, toComponentInstance:ComponentInstance):Match {
-
- let matches:Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy));
- let hostedOnMatch:Match = _.find(matches, (match:Match) => {
- return match.requirement.capability.toLowerCase() === 'tosca.capabilities.container';
- });
-
- return hostedOnMatch;
- };
-
-
- /**
- * Checks whether node can be dropped into UCPE
- * @param cy
- * @param nodeToInsert
- * @param ucpeNode
- * @returns {boolean}
- */
- private isValidDropInsideUCPE(cy:Cy.Instance, nodeToInsert:ComponentInstance, ucpeNode:ComponentInstance):boolean {
-
- let hostedOnMatch:Match = this.canBeHostedOn(cy, ucpeNode, nodeToInsert);
- let result:boolean = !angular.isUndefined(hostedOnMatch) || nodeToInsert.isVl(); //group validation
- return result;
-
- };
-
-
- /**
- * For drops from palette, checks whether the node can be dropped. If node is being held over another node, check if capable of hosting
- * @param cy
- * @param pseudoNodeBBox
- * @param paletteComponentInstance
- * @returns {boolean}
- */
- public isPaletteDropValid(cy:Cy.Instance, pseudoNodeBBox:Cy.BoundingBox, paletteComponentInstance:ComponentInstance) {
-
- let componentIsUCPE:boolean = (paletteComponentInstance.capabilities && paletteComponentInstance.capabilities['tosca.capabilities.Container'] && paletteComponentInstance.name.toLowerCase().indexOf('ucpe') > -1);
-
- if (componentIsUCPE && cy.nodes('[?isUcpe]').length > 0) { //second UCPE not allowed
- return false;
- }
-
- let illegalOverlappingNodes = _.filter(cy.nodes("[isSdcElement]"), (graphNode:Cy.CollectionFirstNode) => {
-
- if (this.isBBoxOverlapping(pseudoNodeBBox, graphNode.renderedBoundingBox())) {
- if (!componentIsUCPE && graphNode.data().isUcpe) {
- return !this.isValidDropInsideUCPE(cy, paletteComponentInstance, graphNode.data().componentInstance); //if this is valid insert into ucpe, we return false - no illegal overlapping nodes
- }
- return true;
- }
-
- return false;
- });
-
- return illegalOverlappingNodes.length === 0;
- }
-
- /**
- * will return true/false if a drop of a single node is valid
- *
- * @param graph node
- */
- public isValidDrop(cy:Cy.Instance, draggedNode:Cy.CollectionFirstNode):boolean {
-
- let illegalOverlappingNodes = _.filter(cy.nodes("[isSdcElement]"), (graphNode:Cy.CollectionFirstNode) => { //all sdc nodes, removing child nodes (childe node allways collaps
-
- if (draggedNode.data().isUcpe && (graphNode.isChild() || graphNode.data().isInsideGroup)) { //ucpe cps always inside ucpe, no overlapping
- return false;
- }
- if (draggedNode.data().isInsideGroup && (!draggedNode.active() || graphNode.data().isUcpe)) {
- return false;
- }
-
- if (!draggedNode.data().isUcpe && !(draggedNode.data() instanceof CompositionCiNodeUcpeCp) && graphNode.data().isUcpe) { //case we are dragging a node into UCPE
- let isEntirelyInUCPE:boolean = this.commonGraphUtils.isFirstBoxContainsInSecondBox(draggedNode.renderedBoundingBox(), graphNode.renderedBoundingBox());
- if (isEntirelyInUCPE) {
- if (this.isValidDropInsideUCPE(cy, draggedNode.data().componentInstance, graphNode.data().componentInstance)) { //if this is valid insert into ucpe, we return false - no illegal overlapping nodes
- return false;
- }
- }
- }
- return graphNode.data().id !== draggedNode.data().id && this.isNodesOverlapping(draggedNode, graphNode);
-
- });
- // return false;
- return illegalOverlappingNodes.length === 0;
- };
-
- /**
- * will return true/false if the move of the nodes is valid (no node overlapping and verifying if insert into UCPE is valid)
- *
- * @param nodesArray - the selected drags nodes
- */
- public isGroupValidDrop(cy:Cy.Instance, nodesArray:Cy.CollectionNodes):boolean {
- let filterDraggedNodes = nodesArray.filter('[?isDraggable]');
- let isValidDrop = _.every(filterDraggedNodes, (node:Cy.CollectionFirstNode) => {
- return this.isValidDrop(cy, node);
-
- });
- return isValidDrop;
- };
-
- /**
- * get all links in diagram
- * @param cy
- * @returns {any[]|boolean[]}
- */
- public getAllCompositionCiLinks = (cy:Cy.Instance):Array<CompositionCiLinkBase> => {
- return _.map(cy.edges("[isSdcElement]"), (edge:Cy.CollectionEdges) => {
- return edge.data();
- });
- };
-
-
- public showPolicyUpdateSuccess = () => {
- this.Notification.success({
- message: "Policy Updated",
- title: "Success"
- });
- }
-
- public showGroupUpdateSuccess = () => {
- this.Notification.success({
- message: "Group Updated",
- title: "Success"
- });
- }
-
- public showUpdateFailure = () => {
- this.Notification.error({
- message: "Update Failed",
- title: "Error"
- });
- };
-
- /**
- * Get Graph Utils server queue
- * @returns {QueueUtils}
- */
- public getGraphUtilsServerUpdateQueue():QueueUtils {
- return CompositionGraphGeneralUtils.graphUtilsUpdateQueue;
- }
- ;
-
- /**
- *
- * @param blockAction - true/false if this is a block action
- * @param instances
- * @param component
- */
- public pushMultipleUpdateComponentInstancesRequestToQueue = (blockAction:boolean, instances:Array<ComponentInstance>, component:Component):void => {
- if (blockAction) {
- this.getGraphUtilsServerUpdateQueue().addBlockingUIAction(
- () => component.updateMultipleComponentInstances(instances)
- );
- } else {
- this.getGraphUtilsServerUpdateQueue().addNonBlockingUIAction(
- () => component.updateMultipleComponentInstances(instances),
- () => this.LoaderService.hideLoader('composition-graph'));
- }
- };
-
- /**
- * this function will update component instance data
- * @param blockAction - true/false if this is a block action
- * @param updatedInstance
- */
- public pushUpdateComponentInstanceActionToQueue = (component:Component, blockAction:boolean, updatedInstance:ComponentInstance):void => {
-
- if (blockAction) {
- this.LoaderService.showLoader('composition-graph');
- this.getGraphUtilsServerUpdateQueue().addBlockingUIAction(
- () => component.updateComponentInstance(updatedInstance)
- );
- } else {
- this.getGraphUtilsServerUpdateQueue().addNonBlockingUIAction(
- () => component.updateComponentInstance(updatedInstance),
- () => this.LoaderService.hideLoader('composition-graph'));
- }
- };
-}
-
-CompositionGraphGeneralUtils.$inject = ['$q', 'LoaderService', 'CommonGraphUtils', 'MatchCapabilitiesRequirementsUtils', 'Notification'];
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts
deleted file mode 100644
index 705367c5f7..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts
+++ /dev/null
@@ -1,301 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- * Created by obarda on 6/28/2016.
- */
-import * as _ from "lodash";
-import {GraphUIObjects} from "app/utils";
-import {LoaderService} from "app/services";
-import {
- NodeUcpe,
- CompositionCiNodeVf,
- Match,
- CompositionCiNodeBase,
- RelationshipModel,
- ConnectRelationModel,
- LinksFactory,
- Component,
- LinkMenu,
- Point,
- CompositionCiLinkBase
-} from "app/models";
-import {CommonGraphUtils} from "../../common/common-graph-utils";
-import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils";
-import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils";
-import {CompositionCiServicePathLink} from "../../../../models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
-
-export class CompositionGraphLinkUtils {
-
- constructor(private linksFactory:LinksFactory,
- private loaderService:LoaderService,
- private generalGraphUtils:CompositionGraphGeneralUtils,
- private commonGraphUtils:CommonGraphUtils,
- private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils) {
- }
-
-
- /**
- * Delete the link on server and then remove it from graph
- * @param component
- * @param releaseLoading - true/false release the loader when finished
- * @param link - the link to delete
- */
- public deleteLink = (cy:Cy.Instance, component:Component, releaseLoading:boolean, link:Cy.CollectionEdges) => {
-
- this.loaderService.showLoader('composition-graph');
- let onSuccessDeleteRelation = (response) => {
- cy.remove(link);
- };
-
- if (!releaseLoading) {
- this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction(
- () => component.deleteRelation(link.data().relation).then(onSuccessDeleteRelation)
- );
- } else {
- this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
- () => component.deleteRelation(link.data().relation).then(onSuccessDeleteRelation),
- () => this.loaderService.hideLoader('composition-graph'));
- }
- };
-
- /**
- * create the link on server and than draw it on graph
- * @param link - the link to create
- * @param cy
- * @param component
- */
- public createLink = (link:CompositionCiLinkBase, cy:Cy.Instance, component:Component):void => {
-
- this.loaderService.showLoader('composition-graph');
-
- let onSuccess:(response:RelationshipModel) => void = (relation:RelationshipModel) => {
- link.setRelation(relation);
- this.commonGraphUtils.insertLinkToGraph(cy, link, component.getRelationRequirementCapability.bind(component));
- };
-
- link.updateLinkDirection();
-
- this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
- () => component.createRelation(link.relation).then(onSuccess),
- () => this.loaderService.hideLoader('composition-graph')
- );
- };
-
- private createSimpleLink = (match:Match, cy:Cy.Instance, component:Component):void => {
- let newRelation:RelationshipModel = match.matchToRelationModel();
- let linkObg:CompositionCiLinkBase = this.linksFactory.createGraphLink(cy, newRelation, newRelation.relationships[0]);
- this.createLink(linkObg, cy, component);
- };
-
- public createLinkFromMenu = (cy:Cy.Instance, chosenMatch:Match, component:Component):void => {
-
- if (chosenMatch) {
- if (chosenMatch && chosenMatch instanceof Match) {
- this.createSimpleLink(chosenMatch, cy, component);
- }
- }
- };
-
-
- /**
- * Filters the matches for UCPE links so that shown requirements and capabilites are only related to the selected ucpe-cp
- * @param fromNode
- * @param toNode
- * @param matchesArray
- * @returns {Array<MatchBase>}
- */
- public filterUcpeLinks(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, matchesArray:Array<Match>):any {
-
- let matchLink:Array<Match>;
-
- if (fromNode.isUcpePart) {
- matchLink = _.filter(matchesArray, (match:Match) => {
- return match.isOwner(fromNode.id);
- });
- }
-
- if (toNode.isUcpePart) {
- matchLink = _.filter(matchesArray, (match:Match) => {
- return match.isOwner(toNode.id);
- });
- }
- return matchLink ? matchLink : matchesArray;
- }
-
-
- /**
- * open the connect link menu if the link drawn is valid - match requirements & capabilities
- * @param cy
- * @param fromNode
- * @param toNode
- * @returns {any}
- */
- public onLinkDrawn(cy:Cy.Instance, fromNode:Cy.CollectionFirstNode, toNode:Cy.CollectionFirstNode):ConnectRelationModel {
-
- if (!this.commonGraphUtils.nodeLocationsCompatible(cy, fromNode, toNode)) {
- return null;
- }
- let linkModel:Array<CompositionCiLinkBase> = this.generalGraphUtils.getAllCompositionCiLinks(cy);
-
- let possibleRelations:Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromNode.data().componentInstance,
- toNode.data().componentInstance, linkModel);
-
- //filter relations found to limit to specific ucpe-cp
- possibleRelations = this.filterUcpeLinks(fromNode.data(), toNode.data(), possibleRelations);
-
- //if found possibleRelations between the nodes we create relation menu directive and open the link menu
- if (possibleRelations.length) {
- // let menuPosition = this.generalGraphUtils.getLinkMenuPosition(cy, toNode.renderedPoint());
- return new ConnectRelationModel(fromNode.data(), toNode.data(), possibleRelations);
- }
- return null;
- };
-
-
- /**
- * when we drag instance in to UCPE or out of UCPE - get all links we need to delete - one node in ucpe and one node outside of ucpe
- * @param node - the node we dragged into or out of the ucpe
- */
- public deleteLinksWhenNodeMovedFromOrToUCPE(component:Component, cy:Cy.Instance, nodeMoved:Cy.CollectionNodes, vlsPendingDeletion?:Cy.CollectionNodes):void {
-
-
- let linksToDelete:Cy.CollectionElements = cy.collection();
- _.forEach(nodeMoved.neighborhood('node'), (neighborNode)=> {
-
- if (neighborNode.data().isUcpePart) { //existing connections to ucpe or ucpe-cp - we want to delete even though nodeLocationsCompatible will technically return true
- linksToDelete = linksToDelete.add(nodeMoved.edgesWith(neighborNode)); // This will delete the ucpe-host-link, or the vl-ucpe-link if nodeMoved is vl
- } else if (!this.commonGraphUtils.nodeLocationsCompatible(cy, nodeMoved, neighborNode)) { //connection to regular node or vl - check if locations are compatible
- if (!vlsPendingDeletion || !vlsPendingDeletion.intersect(neighborNode).length) { //Check if this is a link to a VL pending deletion, to prevent double deletion of between the node moved and vl
- linksToDelete = linksToDelete.add(nodeMoved.edgesWith(neighborNode));
- }
- }
- });
-
- linksToDelete.each((i, link)=> {
- this.deleteLink(cy, component, false, link);
- });
-
- };
-
- /**
- * Creates a hostedOn link between a VF and UCPE
- * @param component
- * @param cy
- * @param ucpeNode
- * @param vfNode
- */
- public createVfToUcpeLink = (component:Component, cy:Cy.Instance, ucpeNode:NodeUcpe, vfNode:CompositionCiNodeVf):void => {
- let hostedOnMatch:Match = this.generalGraphUtils.canBeHostedOn(cy, ucpeNode.componentInstance, vfNode.componentInstance);
- /* create relation */
- let newRelation = new RelationshipModel();
- newRelation.fromNode = ucpeNode.id;
- newRelation.toNode = vfNode.id;
-
- let link:CompositionCiLinkBase = this.linksFactory.createUcpeHostLink(newRelation);
- link.relation = hostedOnMatch.matchToRelationModel();
- this.createLink(link, cy, component);
- };
-
- private handlePathLink(cy:Cy.Instance, event:Cy.EventObject) {
- let linkData = event.cyTarget.data();
- let selectedPathId = linkData.pathId;
- let pathEdges = cy.collection(`[pathId='${selectedPathId}']`);
- if (pathEdges.length > 1) {
- setTimeout(() => {
- pathEdges.select();
- }, 0);
- }
- }
-
- private handleVLLink(event:Cy.EventObject) {
- let vl:Cy.CollectionNodes = event.cyTarget[0].target('.vl-node');
- let connectedEdges:Cy.CollectionEdges = vl.connectedEdges(`[type!="${CompositionCiServicePathLink.LINK_TYPE}"]`);
- if (vl.length && connectedEdges.length > 1) {
- setTimeout(() => {
- vl.select();
- connectedEdges.select();
- }, 0);
- }
- }
-
-
- /**
- * Handles click event on links.
- * If one edge selected: do nothing.
- * Two or more edges: first click - select all, secondary click - select single.
- * @param cy
- * @param event
- */
- public handleLinkClick(cy:Cy.Instance, event:Cy.EventObject) {
- if (cy.$('edge:selected').length > 1 && event.cyTarget[0].selected()) {
- cy.$(':selected').unselect();
- } else {
- if (event.cyTarget[0].data().type === CompositionCiServicePathLink.LINK_TYPE) {
- this.handlePathLink(cy, event);
- }
- else {
- this.handleVLLink(event);
- }
- }
- }
-
-
- /**
- * Calculates the position for the menu that modifies an existing link
- * @param event
- * @param elementWidth
- * @param elementHeight
- * @returns {Point}
- */
- public calculateLinkMenuPosition(event, elementWidth, elementHeight):Point {
- let point:Point = new Point(event.originalEvent.clientX, event.originalEvent.clientY);
- if (event.originalEvent.view.screen.height - elementHeight < point.y) {
- point.y = event.originalEvent.view.screen.height - elementHeight;
- }
- if (event.originalEvent.view.screen.width - elementWidth < point.x) {
- point.x = event.originalEvent.view.screen.width - elementWidth;
- }
- return point;
- };
-
-
- /**
- * Gets the menu that is displayed when you click an existing link.
- * @param link
- * @param event
- * @returns {LinkMenu}
- */
- public getModifyLinkMenu(link:Cy.CollectionFirstEdge, event:Cy.EventObject):LinkMenu {
- let point:Point = this.calculateLinkMenuPosition(event, GraphUIObjects.MENU_LINK_VL_WIDTH_OFFSET, GraphUIObjects.MENU_LINK_VL_HEIGHT_OFFSET);
- let menu:LinkMenu = new LinkMenu(point, true, link);
- return menu;
- };
-
-}
-
-
-CompositionGraphLinkUtils.$inject = [
- 'LinksFactory',
- 'LoaderService',
- 'CompositionGraphGeneralUtils',
- 'CommonGraphUtils',
- 'MatchCapabilitiesRequirementsUtils'
-];
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts
deleted file mode 100644
index c6c732b7df..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { Component, NodesFactory, ComponentInstance, CompositionCiNodeVl, IAppMenu, AssetPopoverObj, Service } from "app/models";
-import { EventListenerService, LoaderService } from "app/services";
-import { GRAPH_EVENTS, ModalsHandler, GraphUIObjects } from "app/utils";
-import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils";
-import { CommonGraphUtils } from "../../common/common-graph-utils";
-import { CompositionCiServicePathLink } from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
-import { ServiceGenericResponse } from "app/ng2/services/responses/service-generic-response";
-import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service';
-/**
- * Created by obarda on 11/9/2016.
- */
-export class CompositionGraphNodesUtils {
- constructor(private NodesFactory: NodesFactory, private $log: ng.ILogService,
- private GeneralGraphUtils: CompositionGraphGeneralUtils,
- private commonGraphUtils: CommonGraphUtils,
- private eventListenerService: EventListenerService,
- private loaderService: LoaderService,
- private serviceService: ServiceServiceNg2) {
-
- }
-
- /**
- * Returns component instances for all nodes passed in
- * @param nodes - Cy nodes
- * @returns {any[]}
- */
- public getAllNodesData(nodes: Cy.CollectionNodes) {
- return _.map(nodes, (node: Cy.CollectionFirstNode) => {
- return node.data();
- })
- };
-
-
- public highlightMatchingNodesByName = (cy: Cy.Instance, nameToMatch: string) => {
-
- cy.batch(() => {
- cy.nodes("[name !@^= '" + nameToMatch + "']").style({ 'background-image-opacity': 0.4 });
- cy.nodes("[name @^= '" + nameToMatch + "']").style({ 'background-image-opacity': 1 });
- })
-
- }
-
- //Returns all nodes whose name starts with searchTerm
- public getMatchingNodesByName = (cy: Cy.Instance, nameToMatch: string): Cy.CollectionNodes => {
- return cy.nodes("[name @^= '" + nameToMatch + "']");
- };
-
- /**
- * Deletes component instances on server and then removes it from the graph as well
- * @param cy
- * @param component
- * @param nodeToDelete
- */
- public deleteNode(cy: Cy.Instance, component: Component, nodeToDelete: Cy.CollectionNodes): void {
-
- this.loaderService.showLoader('composition-graph');
- let onSuccess: (response: ComponentInstance) => void = (response: ComponentInstance) => {
- console.info('onSuccess', response);
-
- //if node to delete is a UCPE, remove all children (except UCPE-CPs) and remove their "hostedOn" links
- if (nodeToDelete.data().isUcpe) {
- _.each(cy.nodes('[?isInsideGroup]'), (node) => {
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, node, nodeToDelete);
- });
- }
-
- //check whether the node is connected to any VLs that only have one other connection. If so, delete that VL as well
- if (!(nodeToDelete.data() instanceof CompositionCiNodeVl)) {
- let connectedVls: Array<Cy.CollectionFirstNode> = this.getConnectedVlToNode(nodeToDelete);
- this.handleConnectedVlsToDelete(connectedVls);
- }
-
- // check whether there is a service path going through this node, and if so clean it from the graph.
- let nodeId = nodeToDelete.data().id;
- let connectedPathLinks = cy.collection(`[type="${CompositionCiServicePathLink.LINK_TYPE}"][source="${nodeId}"], [type="${CompositionCiServicePathLink.LINK_TYPE}"][target="${nodeId}"]`);
- _.forEach(connectedPathLinks, (link, key) => {
- cy.remove(`[pathId="${link.data().pathId}"]`);
- });
-
- // update service path list
- this.serviceService.getComponentCompositionData(component).subscribe((response: ServiceGenericResponse) => {
- (<Service>component).forwardingPaths = response.forwardingPaths;
- });
-
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, nodeId);
-
- //update UI
- cy.remove(nodeToDelete);
- };
-
- let onFailed: (response: any) => void = (response: any) => {
- console.info('onFailed', response);
- };
-
-
- this.GeneralGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
- () => component.deleteComponentInstance(nodeToDelete.data().componentInstance.uniqueId).then(onSuccess, onFailed),
- () => this.loaderService.hideLoader('composition-graph')
- );
-
- };
-
- /**
- * Finds all VLs connected to a single node
- * @param node
- * @returns {Array<Cy.CollectionFirstNode>}
- */
- public getConnectedVlToNode = (node: Cy.CollectionNodes): Array<Cy.CollectionFirstNode> => {
- let connectedVls: Array<Cy.CollectionFirstNode> = new Array<Cy.CollectionFirstNode>();
- _.forEach(node.connectedEdges().connectedNodes(), (node: Cy.CollectionFirstNode) => {
- if (node.data() instanceof CompositionCiNodeVl) {
- connectedVls.push(node);
- }
- });
- return connectedVls;
- };
-
-
- /**
- * Delete all VLs that have only two connected nodes (this function is called when deleting a node)
- * @param connectedVls
- */
- public handleConnectedVlsToDelete = (connectedVls: Array<Cy.CollectionFirstNode>) => {
- _.forEach(connectedVls, (vlToDelete: Cy.CollectionNodes) => {
-
- if (vlToDelete.connectedEdges().length === 2) { // if vl connected only to 2 nodes need to delete the vl
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, vlToDelete.data().componentInstance);
- }
- });
- };
-
-
- /**
- * This function is called when moving a node in or out of UCPE.
- * Deletes all connected VLs that have less than 2 valid connections remaining after the move
- * Returns the collection of vls that are in the process of deletion (async) to prevent duplicate calls while deletion is in progress
- * @param component
- * @param cy
- * @param node - node that was moved in/out of ucpe
- */
- public deleteNodeVLsUponMoveToOrFromUCPE = (component: Component, cy: Cy.Instance, node: Cy.CollectionNodes): Cy.CollectionNodes => {
- if (node.data() instanceof CompositionCiNodeVl) {
- return;
- }
-
- let connectedVLsToDelete: Cy.CollectionNodes = cy.collection();
- _.forEach(node.neighborhood('node'), (connectedNode) => {
-
- //Find all neighboring nodes that are VLs
- if (connectedNode.data() instanceof CompositionCiNodeVl) {
-
- //check VL's neighbors to see if it has 2 or more nodes whose location is compatible with VL (regardless of whether VL is in or out of UCPE)
- let compatibleNodeCount = 0;
- let vlNeighborhood = connectedNode.neighborhood('node');
- _.forEach(vlNeighborhood, (vlNeighborNode) => {
- if (this.commonGraphUtils.nodeLocationsCompatible(cy, connectedNode, vlNeighborNode)) {
- compatibleNodeCount++;
- }
- });
-
- if (compatibleNodeCount < 2) {
- connectedVLsToDelete = connectedVLsToDelete.add(connectedNode);
- }
- }
- });
-
- connectedVLsToDelete.each((i, vlToDelete: Cy.CollectionNodes) => {
- this.deleteNode(cy, component, vlToDelete);
- });
- return connectedVLsToDelete;
- };
-
- /**
- * This function will update nodes position. if the new position is into or out of ucpe, the node will trigger the ucpe events
- * @param cy
- * @param component
- * @param nodesMoved - the node/multiple nodes now moved by the user
- */
- public onNodesPositionChanged = (cy: Cy.Instance, component: Component, nodesMoved: Cy.CollectionNodes): void => {
-
- if (nodesMoved.length === 0) {
- return;
- }
-
- let isValidMove: boolean = this.GeneralGraphUtils.isGroupValidDrop(cy, nodesMoved);
- if (isValidMove) {
-
- this.$log.debug(`composition-graph::ValidDrop:: updating node position`);
- let instancesToUpdateInNonBlockingAction: Array<ComponentInstance> = new Array<ComponentInstance>();
-
- _.each(nodesMoved, (node: Cy.CollectionFirstNode) => { //update all nodes new position
-
- if (node.data().isUcpePart && !node.data().isUcpe) {
- return;
- }//No need to update UCPE-CPs
-
- //update position
- let newPosition: Cy.Position = this.commonGraphUtils.getNodePosition(node);
- node.data().componentInstance.updatePosition(newPosition.x, newPosition.y);
-
- //check if node moved to or from UCPE
- let ucpe = this.commonGraphUtils.isInUcpe(node.cy(), node.boundingbox());
- if (node.data().isInsideGroup || ucpe.length) {
- this.handleUcpeChildMove(node, ucpe, instancesToUpdateInNonBlockingAction);
- } else {
- instancesToUpdateInNonBlockingAction.push(node.data().componentInstance);
- }
-
- });
-
- if (instancesToUpdateInNonBlockingAction.length > 0) {
- this.GeneralGraphUtils.pushMultipleUpdateComponentInstancesRequestToQueue(false, instancesToUpdateInNonBlockingAction, component);
- }
- } else {
- this.$log.debug(`composition-graph::notValidDrop:: node return to latest position`);
- //reset nodes position
- nodesMoved.positions((i, node) => {
- return {
- x: +node.data().componentInstance.posX,
- y: +node.data().componentInstance.posY
- };
- })
- }
-
- this.GeneralGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(() => {
- }, () => {
- this.loaderService.hideLoader('composition-graph');
- });
-
- };
-
- /**
- * Checks whether the node has been added or removed from UCPE and triggers appropriate events
- * @param node - node moved
- * @param ucpeContainer - UCPE container that the node has been moved to. When moving a node out of ucpe, param will be empty
- * @param instancesToUpdateInNonBlockingAction
- */
- public handleUcpeChildMove(node: Cy.CollectionFirstNode, ucpeContainer: Cy.CollectionElements, instancesToUpdateInNonBlockingAction: Array<ComponentInstance>) {
-
- if (node.data().isInsideGroup) {
- if (ucpeContainer.length) { //moving node within UCPE. Simply update position
- this.commonGraphUtils.updateUcpeChildPosition(<Cy.CollectionNodes>node, ucpeContainer);
- instancesToUpdateInNonBlockingAction.push(node.data().componentInstance);
- } else { //removing node from UCPE. Notify observers
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, node, ucpeContainer);
- }
- } else if (!node.data().isInsideGroup && ucpeContainer.length && !node.data().isUcpePart) { //adding node to UCPE
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, node, ucpeContainer, true);
- }
- }
-
-}
-
-
-CompositionGraphNodesUtils.$inject = ['NodesFactory', '$log', 'CompositionGraphGeneralUtils', 'CommonGraphUtils', 'EventListenerService', 'LoaderService', 'ServiceServiceNg2' /*, 'sdcMenu', 'ModalsHandler'*/]
-
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts
deleted file mode 100644
index 10d0d42922..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { EventListenerService, LoaderService } from "app/services";
-import { CapabilitiesGroup, NodesFactory, ComponentInstance, Component, CompositionCiNodeBase, RequirementsGroup } from "app/models";
-import { ComponentFactory, ComponentInstanceFactory, GRAPH_EVENTS, GraphUIObjects } from "app/utils";
-import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils";
-import { CommonGraphUtils } from "../../common/common-graph-utils";
-import 'sdc-angular-dragdrop';
-import { LeftPaletteComponent } from "../../../../models/components/displayComponent";
-
-export class CompositionGraphPaletteUtils {
-
- constructor(private ComponentFactory: ComponentFactory,
- private $filter: ng.IFilterService,
- private loaderService: LoaderService,
- private generalGraphUtils: CompositionGraphGeneralUtils,
- private componentInstanceFactory: ComponentInstanceFactory,
- private nodesFactory: NodesFactory,
- private commonGraphUtils: CommonGraphUtils,
- private eventListenerService: EventListenerService) {
- }
-
- /**
- * Calculate the dragged element (html element) position on canvas
- * @param cy
- * @param event
- * @param position
- * @returns {Cy.BoundingBox}
- * @private
- */
- private _getNodeBBox(cy: Cy.Instance, event: IDragDropEvent, position?: Cy.Position) {
- let bbox = <Cy.BoundingBox>{};
- if (!position) {
- position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event);
- }
- let cushionWidth: number = 40;
- let cushionHeight: number = 40;
-
- bbox.x1 = position.x - cushionWidth / 2;
- bbox.y1 = position.y - cushionHeight / 2;
- bbox.x2 = position.x + cushionWidth / 2;
- bbox.y2 = position.y + cushionHeight / 2;
- return bbox;
- }
-
- /**
- * Create the component instance, update data from parent component in the left palette and notify on_insert_to_ucpe if component was dragg into ucpe
- * @param cy
- * @param fullComponent
- * @param event
- * @param component
- */
- private _createComponentInstanceOnGraphFromPaletteComponent(cy: Cy.Instance, fullComponent: LeftPaletteComponent, event: IDragDropEvent, component: Component) {
-
- let componentInstanceToCreate: ComponentInstance = this.componentInstanceFactory.createComponentInstanceFromComponent(fullComponent);
- let cytoscapePosition: Cy.Position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event);
-
- componentInstanceToCreate.posX = cytoscapePosition.x;
- componentInstanceToCreate.posY = cytoscapePosition.y;
-
-
- let onFailedCreatingInstance: (error: any) => void = (error: any) => {
- this.loaderService.hideLoader('composition-graph');
- };
-
- //on success - update node data
- let onSuccessCreatingInstance = (createInstance: ComponentInstance): void => {
-
- this.loaderService.hideLoader('composition-graph');
-
- createInstance.name = this.$filter('resourceName')(createInstance.name);
- createInstance.requirements = new RequirementsGroup(createInstance.requirements);
- createInstance.capabilities = new CapabilitiesGroup(createInstance.capabilities);
- createInstance.componentVersion = fullComponent.version;
- createInstance.icon = fullComponent.icon;
- createInstance.setInstanceRC();
-
- let newNode: CompositionCiNodeBase = this.nodesFactory.createNode(createInstance);
- let cyNode: Cy.CollectionNodes = this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, newNode);
-
- //check if node was dropped into a UCPE
- let ucpe: Cy.CollectionElements = this.commonGraphUtils.isInUcpe(cy, cyNode.boundingbox());
- if (ucpe.length > 0) {
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, cyNode, ucpe, false);
- }
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE);
-
- };
-
- this.loaderService.showLoader('composition-graph');
-
- // Create the component instance on server
- this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction(() => {
- component.createComponentInstance(componentInstanceToCreate).then(onSuccessCreatingInstance, onFailedCreatingInstance);
- });
- }
-
- /**
- * Thid function applay red/green background when component dragged from palette
- * @param cy
- * @param event
- * @param dragElement
- * @param dragComponent
- */
- public onComponentDrag(cy: Cy.Instance, event: IDragDropEvent, dragElement: JQuery, dragComponent: ComponentInstance) {
-
- if (event.clientX < GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET || event.clientY < GraphUIObjects.DIAGRAM_HEADER_OFFSET) { //hovering over palette. Dont bother computing validity of drop
- dragElement.removeClass('red');
- return;
- }
-
- let offsetPosition = {
- x: event.clientX - GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET,
- y: event.clientY - GraphUIObjects.DIAGRAM_HEADER_OFFSET
- };
- let bbox = this._getNodeBBox(cy, event, offsetPosition);
-
- if (this.generalGraphUtils.isPaletteDropValid(cy, bbox, dragComponent)) {
- dragElement.removeClass('red');
- } else {
- dragElement.addClass('red');
- }
- }
-
- /**
- * This function is called when after dropping node on canvas
- * Check if the capability & requirements fulfilled and if not get from server
- * @param cy
- * @param event
- * @param component
- */
- public addNodeFromPalette(cy: Cy.Instance, event: IDragDropEvent, component: Component) {
- this.loaderService.showLoader('composition-graph');
-
- let draggedComponent: LeftPaletteComponent = event.dataTransfer.component;
-
- if (this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(draggedComponent.uniqueId)) {
- let fullComponent = this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(draggedComponent.uniqueId);
- draggedComponent.capabilities = fullComponent.capabilities;
- draggedComponent.requirements = fullComponent.requirements;
- this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component);
-
- } else {
-
- this.ComponentFactory.getComponentFromServer(draggedComponent.getComponentSubType(), draggedComponent.uniqueId)
- .then((fullComponent: Component) => {
- draggedComponent.capabilities = fullComponent.capabilities;
- draggedComponent.requirements = fullComponent.requirements;
- this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component);
- });
- }
- }
-}
-
-
-CompositionGraphPaletteUtils.$inject = [
- 'ComponentFactory',
- '$filter',
- 'LoaderService',
- 'CompositionGraphGeneralUtils',
- 'ComponentInstanceFactory',
- 'NodesFactory',
- 'CommonGraphUtils',
- 'EventListenerService'
-];
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts
deleted file mode 100644
index 48befef22d..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { LoaderService } from "app/services";
-import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils";
-import { ICompositionGraphScope } from "../composition-graph.directive";
-import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service';
-import { Service } from "../../../../models/components/service";
-import { ForwardingPath } from "app/models/forwarding-path";
-import { ForwardingPathLink } from "app/models/forwarding-path-link";
-import { CompositionCiServicePathLink } from "../../../../models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
-import { CommonGraphUtils } from "app/directives/graphs-v2/common/common-graph-utils";
-
-export class ServicePathGraphUtils {
-
- constructor(
- private loaderService: LoaderService,
- private generalGraphUtils: CompositionGraphGeneralUtils,
- private serviceService: ServiceServiceNg2,
- private commonGraphUtils: CommonGraphUtils
- ) { }
-
- public deletePathsFromGraph(cy: Cy.Instance, service: Service) {
- cy.remove(`[type="${CompositionCiServicePathLink.LINK_TYPE}"]`);
- }
-
- public drawPath(cy: Cy.Instance, forwardingPath: ForwardingPath, service: Service) {
- let pathElements = forwardingPath.pathElements.listToscaDataDefinition;
-
- _.forEach(pathElements, (link: ForwardingPathLink) => {
- let data: CompositionCiServicePathLink = new CompositionCiServicePathLink(link);
- data.source = _.find(
- service.componentInstances,
- instance => instance.name === data.forwardingPathLink.fromNode
- ).uniqueId;
- data.target = _.find(
- service.componentInstances,
- instance => instance.name === data.forwardingPathLink.toNode
- ).uniqueId;
- data.pathId = forwardingPath.uniqueId;
- data.pathName = forwardingPath.name;
- this.commonGraphUtils.insertServicePathLinkToGraph(cy, data);
- });
- }
-
- public createOrUpdateServicePath = (scope: ICompositionGraphScope, path: any): void => {
- let service = <Service>scope.component;
- this.loaderService.showLoader('composition-graph');
-
- let onSuccess: (response: ForwardingPath) => void = (response: ForwardingPath) => {
-
- service.forwardingPaths[response.uniqueId] = response;
- scope.selectedPathId = response.uniqueId;
- };
-
- this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
- () => this.serviceService.createOrUpdateServicePath(service, path).subscribe(onSuccess),
- () => this.loaderService.hideLoader('composition-graph')
- );
- };
-}
-
-ServicePathGraphUtils.$inject = [
- 'LoaderService',
- 'CompositionGraphGeneralUtils',
- 'ServiceServiceNg2',
- 'CommonGraphUtils'
-];
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts
deleted file mode 100644
index cf6c7e3bd6..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-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) {
- }
-
-
- 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 => {
- zone.visible = true;
- zone.minimized = false;
- }
-
- public getZoneTypeForPaletteComponent = (componentCategory: LeftPaletteMetadataTypes) => {
- if (componentCategory == LeftPaletteMetadataTypes.Group) {
- return ZoneInstanceType.GROUP;
- } else if (componentCategory == LeftPaletteMetadataTypes.Policy) {
- return ZoneInstanceType.POLICY;
- }
- };
-
- public initZoneInstances(zones: Array<Zone>, component: Component) {
- if (component.groupInstances && component.groupInstances.length) {
- this.showZone(zones[ZoneInstanceType.GROUP]);
- _.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) => {
- 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) {
- zoneInstance.updateInstanceData(instanceData);
- }
- });
- });
- }
-
- public updateTargetsOrMembersOnCanvasDelete = (canvasNodeID: string, zones: Array<Zone>, type: ZoneInstanceAssignmentType): void => {
- _.forEach(zones, (zone) => {
- _.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).
- zoneInstance.instanceData.setSavedAssignments(zoneInstance.assignments);
- }
- });
- });
- };
-
- 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);
- component.policies.push(newInstance);
- return new ZoneInstance(newInstance, component);
- });
- } else if (zoneType === ZoneInstanceType.GROUP) {
- return this.groupsService.createGroupInstance(component.componentType, component.uniqueId, paletteComponentType).map(response => {
- let newInstance = new GroupInstance(response);
- component.groupInstances.push(newInstance);
- return new ZoneInstance(newInstance, component);
- });
- }
- }
-
- 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);
- let zone = angular.element(document.querySelector('.' + zoneType + '-zone'));
- let wrapperZone = zone.offsetParent();
- point.x = zone.prop('offsetLeft') + wrapperZone.prop('offsetLeft');
- point.y = zone.prop('offsetTop') + wrapperZone.prop('offsetTop');
- return point;
- }
-
- 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.type = zoneType;
- paletteToZoneAnimation.instance.to = this.findZoneCoordinates(zoneTypeName);
- paletteToZoneAnimation.instance.zoneInstance = newInstance;
- paletteToZoneAnimation.instance.iconName = zoneTypeName;
- paletteToZoneAnimation.instance.runAnimation();
- }
-
- 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) => {
- cy.emit('tagend');
- cy.nodes().selectify();
- cy.autolock(false);
- };
-
- 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);
- groupInstance.showHandle(handle);
- })
- };
-
- public hideGroupZoneIndications = (instances: Array<ZoneInstance>) => {
- instances.forEach((instance) => {
- instance.hideHandle();
- })
- }
-
- public showZoneTagIndications = (cy: Cy.Instance, zoneInstance: ZoneInstance) => {
-
- cy.nodes().forEach(node => {
- let handleType: string = this.getCorrectHandleForNode(node.id(), zoneInstance);
- cy.emit('showhandle', [node, handleType]);
- });
- };
-
- public showZoneTagIndicationForNode = (nodeId: string, zoneInstance: ZoneInstance, cy: Cy.Instance) => {
- let node = cy.getElementById(nodeId);
- let handleType: string = this.getCorrectHandleForNode(nodeId, zoneInstance);
- cy.emit('showhandle', [node, handleType]);
- }
-
- public hideZoneTagIndications = (cy: Cy.Instance) => {
- cy.emit('hidehandles');
- };
-
- public getCorrectHandleForNode = (nodeId: string, zoneInstance: ZoneInstance): string => {
- if (zoneInstance.isAlreadyAssigned(nodeId)) {
- if (zoneInstance.type == ZoneInstanceType.POLICY) {
- return CanvasHandleTypes.TAGGED_POLICY;
- } else {
- return CanvasHandleTypes.TAGGED_GROUP;
- }
- } else {
- return CanvasHandleTypes.TAG_AVAILABLE;
- }
- };
-}
-
-CompositionGraphZoneUtils.$inject = [
- 'DynamicComponentService',
- 'PoliciesServiceNg2',
- 'GroupsServiceNg2'
-]; \ No newline at end of file
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts
deleted file mode 100644
index aa1991069e..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import {
- Requirement, CompositionCiLinkBase, CapabilitiesGroup, RequirementsGroup, Match,
- CompositionCiNodeBase, Component, Capability
-} from "app/models";
-import { ComponentInstance } from "../../../../models/componentsInstances/componentInstance";
-/**
- * Created by obarda on 1/1/2017.
- */
-
-export class MatchCapabilitiesRequirementsUtils {
-
- /**
- * Shows + icon in corner of each node passed in
- * @param filteredNodesData
- * @param cy
- */
- public highlightMatchingComponents(filteredNodesData, cy: Cy.Instance) {
- _.each(filteredNodesData, (data: any) => {
- let node = cy.getElementById(data.id);
- cy.emit('showhandle', [node]);
- });
- }
-
- /**
- * Adds opacity to each node that cannot be linked to hovered node
- * @param filteredNodesData
- * @param nodesData
- * @param cy
- * @param 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(() => {
- _.each(fadeNodes, (node) => {
- 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 });
- })
- }
-
- private static isRequirementFulfilled(fromNodeId: string, requirement: any, links: Array<CompositionCiLinkBase>): boolean {
- if (requirement.maxOccurrences === 'UNBOUNDED') {
- return false;
- }
- let linksWithThisReq: Array<CompositionCiLinkBase> = _.filter(links, {
- 'relation': {
- 'fromNode': fromNodeId,
- 'relationships': [{
- 'relation': {
- 'requirementOwnerId': requirement.ownerId,
- 'requirement': requirement.name,
- 'relationship': {
- 'type': requirement.capability
- }
-
- }
- }]
- }
- });
- return linksWithThisReq.length == requirement.maxOccurrences;
- };
-
- private static isMatch(requirement: Requirement, capability: Capability): boolean {
- if (capability.type === requirement.capability) {
- if (requirement.node) {
- if (_.includes(capability.capabilitySources, requirement.node)) {
- return true;
- }
- } else {
- return true;
- }
- }
- return false;
- };
-
- 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,
- fromComponentInstance.capabilities,
- links,
- fromComponentInstance.uniqueId,
- toComponentInstance.uniqueId, false);
-
- return fromToMatches.concat(toFromMatches);
- }
-
- /***** 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> = [];
- let unfulfilledReqs = this.getUnfulfilledRequirements(fromId, requirements, links);
- _.forEach(unfulfilledReqs, (req) => {
- _.forEach(_.flatten(_.values(capabilities)), (capability: Capability) => {
- if (MatchCapabilitiesRequirementsUtils.isMatch(req, capability)) {
- if (isFromTo) {
- matches.push(new Match(req, capability, isFromTo, fromId, toId));
- } else {
- matches.push(new Match(req, capability, isFromTo, toId, fromId));
- }
- }
- });
- });
- return matches;
- }
-
- public getUnfulfilledRequirements = (fromNodeId: string, requirements: RequirementsGroup, links: Array<CompositionCiLinkBase>): Array<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);
- }
- });
- return requirementArray;
- };
-
-
- /**
- * Returns true if there is a match between the capabilities and requirements that are passed in
- * @param requirements
- * @param capabilities
- * @returns {boolean}
- */
- 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);
- });
- });
- };
-
- /**
- * Returns array of nodes that can connect to the component.
- * In order to connect, one of the following conditions must be met:
- * 1. component has an unfulfilled requirement that matches a node's capabilities
- * 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
- {
- 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)
- if (componentRequirements.length && node.category !== 'groupCp' && this.containsMatch(componentRequirements, node.componentInstance.capabilities)) {
- 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);
- if (!nodeRequirements.length) return false;
- if (this.containsMatch(nodeRequirements, component.capabilities)) {
- return true;
- }
- }
- }
- });
- }
-}
-
-MatchCapabilitiesRequirementsUtils.$inject = [];
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
deleted file mode 100644
index 159a1c8347..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { Component, Module, NodesFactory, ComponentInstance } from "app/models";
-import { ComponentInstanceFactory } from "app/utils";
-import { DeploymentGraphGeneralUtils } from "./deployment-utils/deployment-graph-general-utils";
-import { CommonGraphUtils } from "../common/common-graph-utils";
-import { ComponentInstanceNodesStyle } from "../common/style/component-instances-nodes-style";
-import { ModulesNodesStyle } from "../common/style/module-node-style";
-import { GRAPH_EVENTS } from "app/utils";
-import { EventListenerService } from "app/services";
-import '@bardit/cytoscape-expand-collapse';
-import { AngularJSBridge } from "../../../services/angular-js-bridge-service";
-
-interface IDeploymentGraphScope extends ng.IScope {
- component: Component;
-}
-
-export class DeploymentGraph implements ng.IDirective {
- private _cy: Cy.Instance;
-
- constructor(private NodesFactory: NodesFactory,
- private commonGraphUtils: CommonGraphUtils,
- private deploymentGraphGeneralUtils: DeploymentGraphGeneralUtils,
- private ComponentInstanceFactory: ComponentInstanceFactory,
- private eventListenerService: EventListenerService) {
- }
-
- restrict = 'E';
- template = require('./deployment-graph.html');
- scope = {
- component: '=',
- isViewOnly: '='
- };
-
- link = (scope: IDeploymentGraphScope, el: JQuery) => {
-
- if (scope.component.isResource()) {
- if (scope.component.componentInstances && scope.component.componentInstancesRelations && scope.component.modules) {
- this.loadGraph(scope, el);
- } else {
- this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DEPLOYMENT_GRAPH_DATA_LOADED, () => {
- this.loadGraph(scope, el);
- });
- }
- }
- };
-
- public initGraphNodes = (cy: Cy.Instance, component: Component): void => {
- if (component.modules) { // Init module nodes
- _.each(component.modules, (groupModule: Module) => {
- let moduleNode = this.NodesFactory.createModuleNode(groupModule);
- this.commonGraphUtils.addNodeToGraph(cy, moduleNode);
-
- });
- }
- _.each(component.componentInstances, (instance: ComponentInstance) => { // Init component instance nodes
- let componentInstanceNode = this.NodesFactory.createNode(instance);
- componentInstanceNode.parent = this.deploymentGraphGeneralUtils.findInstanceModule(component.modules, instance.uniqueId);
- if (componentInstanceNode.parent) { // we are not drawing instances that are not a part of a module
- this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, componentInstanceNode);
- }
- });
-
- // This is a special functionality to pass the cytoscape default behavior - we can't create Parent module node without children's
- // so we must add an empty dummy child node
- _.each(this._cy.nodes('[?isGroup]'), (moduleNode: Cy.CollectionFirstNode) => {
- if (!moduleNode.isParent()) {
- let dummyInstance = this.ComponentInstanceFactory.createEmptyComponentInstance();
- let componentInstanceNode = this.NodesFactory.createNode(dummyInstance);
- componentInstanceNode.parent = moduleNode.id();
- let dummyNode = this.commonGraphUtils.addNodeToGraph(cy, componentInstanceNode, moduleNode.position());
- dummyNode.addClass('dummy-node');
- }
- })
- };
-
- private registerGraphEvents() {
-
- this._cy.on('afterExpand', (event) => {
- event.cyTarget.qtip({});
- });
-
- this._cy.on('afterCollapse', (event) => {
- this.commonGraphUtils.initNodeTooltip(event.cyTarget);
- });
- }
-
- private loadGraph = (scope: IDeploymentGraphScope, el: JQuery) => {
-
- let graphEl = el.find('.sdc-deployment-graph-wrapper');
- const imagePath = AngularJSBridge.getAngularConfig().imagesPath;
- this._cy = cytoscape({
- container: graphEl,
- style: ComponentInstanceNodesStyle.getCompositionGraphStyle().concat(ModulesNodesStyle.getModuleGraphStyle()),
- zoomingEnabled: false,
- selectionType: 'single',
-
- });
-
- //adding expand collapse extension
- this._cy.expandCollapse({
- layoutBy: {
- name: "grid",
- animate: true,
- randomize: false,
- fit: true
- },
- fisheye: false,
- undoable: false,
- expandCollapseCueSize: 18,
- expandCueImage: imagePath + '/assets/styles/images/resource-icons/' + 'closeModule.png',
- collapseCueImage: imagePath + '/assets/styles/images/resource-icons/' + 'openModule.png',
- expandCollapseCueSensitivity: 2,
- cueOffset: -20
- });
-
- this.initGraphNodes(this._cy, scope.component); //creating instances nodes
- this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations, scope.component.getRelationRequirementCapability.bind(scope.component));
- this._cy.collapseAll();
- this.registerGraphEvents();
-
- scope.$on('$destroy', () => {
- this._cy.destroy();
- _.forEach(GRAPH_EVENTS, (event) => {
- this.eventListenerService.unRegisterObserver(event);
- });
- });
-
- };
-
- public static factory = (NodesFactory: NodesFactory, CommonGraphUtils: CommonGraphUtils, DeploymentGraphGeneralUtils: DeploymentGraphGeneralUtils, ComponentInstanceFactory: ComponentInstanceFactory, EventListenerService: EventListenerService) => {
- return new DeploymentGraph(NodesFactory, CommonGraphUtils, DeploymentGraphGeneralUtils, ComponentInstanceFactory, EventListenerService)
- }
-}
-
-DeploymentGraph.factory.$inject = ['NodesFactory', 'CommonGraphUtils', 'DeploymentGraphGeneralUtils', 'ComponentInstanceFactory', 'EventListenerService'];
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html
deleted file mode 100644
index 1bca4bb531..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
- ~
- ~ Licensed under the Apache License, Version 2.0 (the "License");
- ~ you may not use this file except in compliance with the License.
- ~ You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- -->
-
-
-<div class="sdc-deployment-graph-wrapper" ng-class="{'view-only':isViewOnly}">
-</div>
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less
deleted file mode 100644
index f83ee8a891..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less
+++ /dev/null
@@ -1,14 +0,0 @@
-deployment-graph {
- display: block;
- height:100%;
- width: 100%;
-
- .sdc-deployment-graph-wrapper {
- height:100%;
- width: 100%;
- }
-
- .view-only{
- background-color:rgb(248, 248, 248);
- }
-}
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts
deleted file mode 100644
index 5d0f38fd5e..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { Module } from "app/models";
-/**
- * Created by obarda on 12/21/2016.
- */
-
-export class DeploymentGraphGeneralUtils {
-
- constructor() {
-
- }
-
- public findInstanceModule = (groupsArray: Array<Module>, componentInstanceId: string): string => {
- let parentGroup: Module = _.find(groupsArray, (group: Module) => {
- return _.find((<any>Object).values(group.members), (member: string) => {
- return member === componentInstanceId;
- });
- });
- return parentGroup ? parentGroup.uniqueId : "";
- };
-}
-
-DeploymentGraphGeneralUtils.$inject = [];
diff --git a/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts b/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts
deleted file mode 100644
index 19c86a254b..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-export interface ICanvasImage {
- src: string;
- width: number
- height: number;
- x: number;
- y: number;
-}
-
-'use strict';
-export class ImageCreatorService {
- static '$inject' = ['$q'];
- private _canvas: HTMLCanvasElement;
-
- constructor(private $q: ng.IQService) {
- this._canvas = <HTMLCanvasElement>$('<canvas>')[0];
- this._canvas.setAttribute('style', 'display:none');
-
- let body = document.getElementsByTagName('body')[0];
- body.appendChild(this._canvas);
- }
-
- /**
- * Create an image composed of different image layers
- * @param canvasImages
- * @param canvasWidth
- * @param canvasHeight
- * returns a PROMISE
- */
- getMultiLayerBase64Image(canvasImages: ICanvasImage[], canvasWidth?: number, canvasHeight?: number): ng.IPromise<string> {
- const deferred = this.$q.defer<string>();
-
- if (canvasImages && canvasImages.length === 0) {
- return null;
- }
-
- //If only width was set, use it for height, otherwise use first canvasImage height
- canvasHeight = canvasHeight || canvasImages[0].height;
- canvasWidth = canvasWidth || canvasImages[0].width;
-
- const images = [];
- let imagesLoaded = 0;
- const onImageLoaded = () => {
- imagesLoaded++;
- if (imagesLoaded < canvasImages.length) {
- return;
- }
- this._canvas.setAttribute('width', canvasWidth.toString());
- this._canvas.setAttribute('height', canvasHeight.toString());
- const canvasCtx = this._canvas.getContext('2d');
- canvasCtx.clearRect(0, 0, this._canvas.width, this._canvas.height);
- images.forEach((image, index) => {
- const canvasImage = canvasImages[index];
- canvasCtx.drawImage(image, canvasImage.x, canvasImage.y, canvasImage.width, canvasImage.height);
- });
- let base64Image = this._canvas.toDataURL();
- deferred.resolve(base64Image);
- };
- canvasImages.forEach(canvasImage => {
- let image = new Image();
- image.onload = onImageLoaded;
- image.src = canvasImage.src;
- images.push(image);
- });
- return deferred.promise;
- }
-}
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts b/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts
deleted file mode 100644
index 26c042611c..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-interface IDragDropEvent extends JQueryEventObject {
- dataTransfer: any;
- toElement: {
- naturalWidth: number;
- naturalHeight: number;
- }
-} \ No newline at end of file
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
deleted file mode 100644
index 01ddb146ac..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
+++ /dev/null
@@ -1,338 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-import * as _ from "lodash";
-import { Component, IAppMenu, LeftPanelModel, NodesFactory, LeftPaletteComponent, CompositionCiNodeBase, ComponentInstance, Point } from "app/models";
-import { CompositionGraphGeneralUtils } from "../composition-graph/utils/composition-graph-general-utils";
-import { EventListenerService } from "app/services";
-import { ResourceType, GRAPH_EVENTS, EVENTS, ComponentInstanceFactory, ModalsHandler } from "app/utils";
-import 'sdc-angular-dragdrop';
-import { LeftPaletteLoaderService } from "../../../services/components/utils/composition-left-palette-service";
-import { Resource } from "app/models/components/resource";
-import { ComponentType } from "app/utils/constants";
-import { LeftPaletteMetadataTypes } from "../../../models/components/displayComponent";
-import { IDirectiveLinkFn, IScope } from "angular";
-
-
-interface IPaletteScope extends IScope {
- components: Array<LeftPaletteComponent>;
- currentComponent: Component;
- model: any;
- displaySortedCategories: any;
- expandedSection: string;
- dragElement: JQuery;
- dragbleNode: {
- event: JQueryEventObject,
- components: LeftPaletteComponent,
- ui: any
- }
-
- addInstanceClick: () => void; // added code
- onPopupMouseOver: () => void // added code
- onPopupMouseOut: () => void // added code
-
- sectionClick: (section: string) => void;
- searchComponents: (searchText: string) => void;
- onMouseOver: (displayComponent: LeftPaletteComponent, elem: HTMLElement) => void;
- onMouseOut: (displayComponent: LeftPaletteComponent) => void;
-
- dragStartCallback: (event: JQueryEventObject, ui, displayComponent: LeftPaletteComponent) => void;
- dragStopCallback: () => void;
- onDragCallback: (event: JQueryEventObject) => void;
-
- setElementTemplate: (e: JQueryEventObject) => void;
-
- isOnDrag: boolean;
- isDragable: boolean;
- isLoading: boolean;
- isViewOnly: boolean;
-}
-
-export class Palette implements ng.IDirective {
- constructor(private $log: ng.ILogService,
- private LeftPaletteLoaderService: LeftPaletteLoaderService,
- private sdcConfig,
- private ComponentFactory,
- private ComponentInstanceFactory: ComponentInstanceFactory,
- private NodesFactory: NodesFactory,
- private CompositionGraphGeneralUtils: CompositionGraphGeneralUtils,
- private EventListenerService: EventListenerService,
- private sdcMenu: IAppMenu,
- private ModalsHandler: ModalsHandler
- ) {
- }
-
- private fetchingComponentFromServer: boolean = false;
- private nodeHtmlSubstitute: JQuery;
-
- scope = {
- currentComponent: '=',
- isViewOnly: '=',
- isLoading: '='
- };
- restrict = 'E';
- template = require('./palette.html');
-
- link: IDirectiveLinkFn = (scope: IPaletteScope, el: JQuery) => {
- this.LeftPaletteLoaderService.loadLeftPanel(scope.currentComponent);
- this.nodeHtmlSubstitute = $('<div class="node-substitute"><span></span><img /></div>');
- el.append(this.nodeHtmlSubstitute);
- this.registerEventListenerForLeftPalette(scope);
-
- this.initComponents(scope);
- this.initEvents(scope);
- this.initDragEvents(scope);
- this._initExpandedSection(scope, '');
- el.on('$destroy', () => {
- //remove listener of download event
- this.unRegisterEventListenerForLeftPalette(scope);
- });
- };
-
-
- private registerEventListenerForLeftPalette = (scope: IPaletteScope): void => {
- this.EventListenerService.registerObserverCallback(EVENTS.LEFT_PALETTE_UPDATE_EVENT, () => {
- this.updateLeftPanelDisplay(scope);
- });
- };
-
- private unRegisterEventListenerForLeftPalette = (scope: IPaletteScope): void => {
- this.EventListenerService.unRegisterObserver(EVENTS.LEFT_PALETTE_UPDATE_EVENT);
- };
-
- private leftPanelResourceFilter(resourcesNotAbstract: Array<LeftPaletteComponent>, resourceFilterTypes: Array<string>): Array<LeftPaletteComponent> {
- let filterResources = _.filter(resourcesNotAbstract, (component) => {
- return resourceFilterTypes.indexOf(component.getComponentSubType()) > -1;
- });
- return filterResources;
- }
-
- private initLeftPanel(leftPanelComponents: Array<LeftPaletteComponent>, resourceFilterTypes: Array<string>): LeftPanelModel {
- let leftPanelModel = new LeftPanelModel();
-
- if (resourceFilterTypes && resourceFilterTypes.length) {
- leftPanelComponents = this.leftPanelResourceFilter(leftPanelComponents, resourceFilterTypes);
- }
- leftPanelModel.numberOfElements = leftPanelComponents && leftPanelComponents.length || 0;
-
- if (leftPanelComponents && leftPanelComponents.length) {
-
- let categories: any = _.groupBy(leftPanelComponents, 'mainCategory');
- for (let category in categories)
- categories[category] = _.groupBy(categories[category], 'subCategory');
-
- leftPanelModel.sortedCategories = categories;
- }
- return leftPanelModel;
- }
-
-
- private initEvents(scope: IPaletteScope) {
- scope.sectionClick = (section: string) => {
- if (section === scope.expandedSection) {
- scope.expandedSection = '';
- return;
- }
- scope.expandedSection = section;
- };
-
- scope.onMouseOver = (displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => {
- if (this.isGroupOrPolicy(displayComponent)) {
- this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL, scope.currentComponent, displayComponent, sectionElem);
- } else {
- if (scope.isOnDrag) {
- return;
- }
- scope.isOnDrag = true;
- this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, displayComponent);
- this.$log.debug('palette::onMouseOver:: fired');
- }
-
- };
-
- scope.onMouseOut = (displayComponent: LeftPaletteComponent) => {
- if (this.isGroupOrPolicy(displayComponent)) {
- this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL);
- } else {
- scope.isOnDrag = false;
- this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT);
- }
- };
- }
-
- private isGroupOrPolicy(component: LeftPaletteComponent): boolean {
- if (component &&
- (component.categoryType === LeftPaletteMetadataTypes.Group ||
- component.categoryType === LeftPaletteMetadataTypes.Policy)) {
- return true;
- }
- return false;
- }
-
- private initComponents(scope: IPaletteScope) {
- scope.searchComponents = (searchText: any): void => {
- scope.displaySortedCategories = this._searchComponents(searchText, scope.model.sortedCategories);
- this._initExpandedSection(scope, searchText);
- };
-
- scope.isDragable = scope.currentComponent.isComplex();
- this.updateLeftPanelDisplay(scope);
- }
-
- private updateLeftPanelDisplay(scope: IPaletteScope) {
- let entityType: string = scope.currentComponent.componentType.toLowerCase();
- let resourceFilterTypes: Array<string> = this.sdcConfig.resourceTypesFilter[entityType];
- scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent);
- //remove the container component from the list
- let componentTempToDisplay = angular.copy(scope.components);
- componentTempToDisplay = _.remove(componentTempToDisplay, function (leftPalettecomponent) {
- return leftPalettecomponent.invariantUUID !== scope.currentComponent.invariantUUID;
- });
- scope.model = this.initLeftPanel(componentTempToDisplay, resourceFilterTypes);
- scope.displaySortedCategories = angular.copy(scope.model.sortedCategories);
- };
-
- private _initExpandedSection(scope: IPaletteScope, searchText: string): void {
- if (searchText == '') {
- let isContainingCategory: boolean = false;
- let categoryToExpand: string;
- if (scope.currentComponent && scope.currentComponent.categories && scope.currentComponent.categories[0]) {
- categoryToExpand = this.sdcMenu.categoriesDictionary[scope.currentComponent.categories[0].name];
- for (let category in scope.model.sortedCategories) {
- if (categoryToExpand == category) {
- isContainingCategory = true;
- break;
- }
- }
- }
- isContainingCategory ? scope.expandedSection = categoryToExpand : scope.expandedSection = 'Generic';
- }
- else {
- scope.expandedSection = Object.keys(scope.displaySortedCategories).sort()[0];
- }
- };
-
- private initDragEvents(scope: IPaletteScope) {
- scope.dragStartCallback = (event: IDragDropEvent, ui, displayComponent: LeftPaletteComponent): void => {
- if (scope.isLoading || !scope.isDragable || scope.isViewOnly || this.isGroupOrPolicy(displayComponent)) {
- return;
- }
-
- let component = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent), (componentFullData: LeftPaletteComponent) => {
- return displayComponent.uniqueId === componentFullData.uniqueId;
- });
- this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, scope.dragElement, component);
-
- scope.isOnDrag = true;
-
- // this.graphUtils.showMatchingNodes(component, myDiagram, scope.sdcConfig.imagesPath);
- // document.addEventListener('mousemove', moveOnDocument);
- event.dataTransfer.component = component;
- };
-
- scope.dragStopCallback = () => {
- scope.isOnDrag = false;
- };
-
- scope.onDragCallback = (event: IDragDropEvent): void => {
- this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, event);
- };
- scope.setElementTemplate = (e) => {
- let dragComponent: LeftPaletteComponent = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent),
- (fullComponent: LeftPaletteComponent) => {
- return (<any>angular.element(e.currentTarget).scope()).component.uniqueId === fullComponent.uniqueId;
- });
- let componentInstance: ComponentInstance = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent);
- let node: CompositionCiNodeBase = this.NodesFactory.createNode(componentInstance);
-
- // myDiagram.dragFromPalette = node;
- this.nodeHtmlSubstitute.find("img").attr('src', node.img);
- scope.dragElement = this.nodeHtmlSubstitute.clone().show();
-
- return scope.dragElement;
- };
- }
-
- private _searchComponents = (searchText: string, categories: any): void => {
- let displaySortedCategories = angular.copy(categories);
- if (searchText != '') {
- angular.forEach(categories, function (category: any, categoryKey) {
-
- angular.forEach(category, function (subcategory: Array<LeftPaletteComponent>, subcategoryKey) {
- let filteredResources = [];
- angular.forEach(subcategory, function (component: LeftPaletteComponent) {
-
- let resourceFilterTerm: string = component.searchFilterTerms.toLowerCase();
- if (resourceFilterTerm.indexOf(searchText.toLowerCase()) >= 0) {
- filteredResources.push(component);
- }
- });
- if (filteredResources.length > 0) {
- displaySortedCategories[categoryKey][subcategoryKey] = filteredResources;
- }
- else {
- delete displaySortedCategories[categoryKey][subcategoryKey];
- }
- });
- if (!(Object.keys(displaySortedCategories[categoryKey]).length > 0)) {
- delete displaySortedCategories[categoryKey];
- }
-
- });
- }
- return displaySortedCategories;
- };
-
- public static factory = ($log,
- LeftPaletteLoaderService,
- sdcConfig,
- ComponentFactory,
- ComponentInstanceFactory,
- NodesFactory,
- CompositionGraphGeneralUtils,
- EventListenerService,
- sdcMenu,
- ModalsHandler
- ) => {
- return new Palette($log,
- LeftPaletteLoaderService,
- sdcConfig,
- ComponentFactory,
- ComponentInstanceFactory,
- NodesFactory,
- CompositionGraphGeneralUtils,
- EventListenerService,
- sdcMenu,
- ModalsHandler
- );
- };
-}
-
-Palette.factory.$inject = [
- '$log',
- 'LeftPaletteLoaderService',
- 'sdcConfig',
- 'ComponentFactory',
- 'ComponentInstanceFactory',
- 'NodesFactory',
- 'CompositionGraphGeneralUtils',
- 'EventListenerService',
- 'sdcMenu',
- 'ModalsHandler'
-];
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html b/catalog-ui/src/app/directives/graphs-v2/palette/palette.html
deleted file mode 100644
index 1fed02782f..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
- ~
- ~ Licensed under the Apache License, Version 2.0 (the "License");
- ~ you may not use this file except in compliance with the License.
- ~ You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- -->
-
-
-<div class="w-sdc-designer-leftbar">
- <div class="w-sdc-designer-leftbar-title">Elements <span class="w-sdc-designer-leftbar-title-count">{{model.numberOfElements}}</span>
- </div>
-
- <div class="w-sdc-designer-leftbar-search">
- <input type="text" class="w-sdc-designer-leftbar-search-input" placeholder="Search..."
- data-ng-model="searchText" data-ng-change="searchComponents(searchText)"
- ng-model-options="{ debounce: 500 }" data-tests-id="searchAsset"/>
- <span class="w-sdc-search-icon leftbar" data-ng-class="{'cancel':searchText, 'magnification':!searchText}"
- data-ng-click="searchText=''; searchComponents('',categories)"></span>
- </div>
- <div class="i-sdc-designer-leftbar-section"
- data-ng-repeat="(entityCategory, objCategory) in displaySortedCategories track by $index"
- data-ng-class="{'expanded': expandedSection.indexOf(entityCategory) !== -1}">
- <div class="i-sdc-designer-leftbar-section-title pointer" data-ng-click="sectionClick(entityCategory)"
- data-tests-id="leftbar-section-title-{{entityCategory}}">
- {{entityCategory}}
- <div class="i-sdc-designer-leftbar-section-title-icon"></div>
- </div>
- <div class="i-sdc-designer-leftbar-section-content"
- data-ng-repeat="(subCategory, components) in objCategory track by $index">
- <div class="i-sdc-designer-leftbar-section-content-subcat i-sdc-designer-leftbar-section-content-item">
- {{subCategory}}
- </div>
- <div class="i-sdc-designer-leftbar-section-content-item"
- data-ng-class="{'default-pointer': isViewOnly}"
- data-ng-mouseover="!isViewOnly && onMouseOver(component, $event.currentTarget)"
- data-ng-mouseleave="!isViewOnly && onMouseOut(component)"
- data-drag="!isViewOnly && component.isDraggable"
- data-jqyoui-options="{revert: 'invalid', helper:setElementTemplate, appendTo:'body', cursorAt: {left:38, top: 38}, cursor:'move'}"
- jqyoui-draggable="{index:{{$index}},animate:true,onStart:'dragStartCallback(component)',onStop:'dragStopCallback()', onDrag:'onDragCallback()'}"
- data-ng-repeat="component in components | orderBy: 'displayName' track by $index"
- data-tests-id={{component.displayName}}>
- <div class="i-sdc-designer-leftbar-section-content-item-icon-ph">
- <div class="medium small {{component.iconClass}}"
- data-tests-id="leftbar-section-content-item-{{component.displayName}}">
- <div class="{{component.certifiedIconClass}}" uib-tooltip="Not certified"
- tooltip-class="uib-custom-tooltip" tooltip-placement="bottom" tooltip-popup-delay="700">
- </div>
- </div>
- </div>
- <div class="i-sdc-designer-leftbar-section-content-item-info">
- <span class="i-sdc-designer-leftbar-section-content-item-info-title"
- uib-tooltip="{{component.displayName}}" tooltip-class="uib-custom-tooltip"
- tooltip-placement="bottom" tooltip-popup-delay="700">
- {{component.displayName}}</span>
- <div class="i-sdc-designer-leftbar-section-content-item-info-text">
- V.{{component.version}}
- </div>
- <div class="i-sdc-designer-leftbar-section-content-item-info-text"
- uib-tooltip="{{component.type}}" tooltip-class="uib-custom-tooltip"
- tooltip-placement="top" tooltip-popup-delay="700"> Type:
- {{component.componentSubType}}
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.less b/catalog-ui/src/app/directives/graphs-v2/palette/palette.less
deleted file mode 100644
index 85657a43a5..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.less
+++ /dev/null
@@ -1,92 +0,0 @@
-.drag-icon-border{
- border: 7px solid red;
- border-radius: 500px;
- -webkit-border-radius: 500px;
- -moz-border-radius: 500px;
- width: 53px;
- height: 53px;
-}
-
-.drag-icon-circle{
- width: 60px;
- height: 60px;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- border-radius: 50%;
- position: relative;
-
-}
-
-
-@green-shadow: rgba(29, 154, 149, 0.3);
-@red-shadow: rgba(218, 31, 61, 0.3);
-.drag-icon-circle .sprite-resource-icons {
- position: absolute;
- top: 10px;
- left: 10px;
-}
-
-.drag-icon-circle.red {
- background: @red-shadow;
-}
-
-.drag-icon-circle.green {
- background: @green-shadow;
-}
-
-
-.node-substitute {
- display: none;
- position: absolute;
- z-index: 9999;
- height: 80px;
- width: 80px;
- border-radius: 50%;
- text-align: center;
-
- span {
- display: inline-block;
- vertical-align: middle;
- height: 100%;
- }
-
- img {
- height: 40px;
- width: 40px;
- box-shadow: 0 0 0 10px @green-shadow;
- border-radius: 50%;
-
- -webkit-user-drag: none;
- -moz-user-drag: none;
- user-drag: none;
- }
- &.red img {
- box-shadow: 0 0 0 10px @red-shadow;
- }
- &.bounce img {
- -moz-animation:bounceOut 0.3s linear;
- -webkit-animation:bounceOut 0.3s linear;
- animation:bounceOut 0.3s linear;
- }
-}
-
-@keyframes bounceOut {
- 0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
- 60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
- 85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
- 100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
-}
-
-@-moz-keyframes bounceOut {
- 0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
- 60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
- 85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
- 100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
-}
-
-@-webkit-keyframes bounceOut {
- 0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
- 60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
- 85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
- 100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
-}