diff options
author | 2020-01-19 13:50:02 +0200 | |
---|---|---|
committer | 2020-01-22 12:33:31 +0000 | |
commit | 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch) | |
tree | 03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts | |
parent | aa83a2da4f911c3ac89318b8e9e8403b072942e1 (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/common/common-graph-utils.ts')
-rw-r--r-- | catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts | 487 |
1 files changed, 0 insertions, 487 deletions
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']; |