From 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 Mon Sep 17 00:00:00 2001 From: ys9693 Date: Sun, 19 Jan 2020 13:50:02 +0200 Subject: Catalog alignment Issue-ID: SDC-2724 Signed-off-by: ys9693 Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe --- .../graphs-v2/common/common-graph-utils.ts | 487 --------------------- .../style/component-instances-nodes-style.ts | 361 --------------- .../graphs-v2/common/style/module-node-style.ts | 103 ----- 3 files changed, 951 deletions(-) delete mode 100644 catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts delete mode 100644 catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts delete mode 100644 catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts (limited to 'catalog-ui/src/app/directives/graphs-v2/common') 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( { - 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 = 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 '
' + - 'R: ' + - '' + (requirement ? requirement.getTitle() : linkRelation.relation.requirement) + '' + - '
' + - '
' + - '
' + - 'C: ' + - '' + (capability ? capability.getTitle() : linkRelation.relation.capability) + '' + - '
'; - } - - /** - * 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 '
' + - '
'+link.pathName+'
' + - '
'; - }; - 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, 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 { - 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 => { - 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 => { - - 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 - } - }, - ] - } -} -- cgit 1.2.3-korg