summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/directives/graphs-v2/common
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2018-07-29 16:13:45 +0300
committerMichael Lando <ml636r@att.com>2018-07-29 16:20:34 +0300
commit5b593496b8f1b8e8be8d7d2dbcc223332e65a49b (patch)
tree2f9dfc45191e723da69cf74be7829784e9741b94 /catalog-ui/src/app/directives/graphs-v2/common
parent9200382f2ce7b4bb729aa287d0878004b2d2b4f9 (diff)
re base code
Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5 Issue-ID: SDC-1566 Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/directives/graphs-v2/common')
-rw-r--r--catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts100
1 files changed, 61 insertions, 39 deletions
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
index 596dcecc13..194845c238 100644
--- 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
@@ -22,6 +22,7 @@ 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.
*/
@@ -102,8 +103,10 @@ export class ComponentInstanceNodesStyle {
'background-image': 'data(img)',
'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
- 'width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
- '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,
@@ -120,8 +123,10 @@ export class ComponentInstanceNodesStyle {
'background-image': 'data(img)',
'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
- 'width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
- '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,
@@ -167,6 +172,16 @@ export class ComponentInstanceNodesStyle {
}
},
{
+ 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,
@@ -222,7 +237,7 @@ export class ComponentInstanceNodesStyle {
css: {
'shape': 'rectangle',
'background-image': (ele:Cy.Collection) => {
- return ele.data().initUncertifiedImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE)
+ return ele.data().setUncertifiedImageBgStyle(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE);//Change name to setUncertifiedImageBgStyle??
},
"border-width": 0
}
@@ -256,8 +271,10 @@ export class ComponentInstanceNodesStyle {
'background-image': 'data(img)',
'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
- 'width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
- '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,
@@ -268,52 +285,57 @@ export class ComponentInstanceNodesStyle {
]
}
- public static getBasicNodeHanlde = () => {
+ public static getAddEdgeHandle = () => {
return {
- positionX: "right",
- positionY: "top",
- offsetX: 15,
- offsetY: -20,
- color: "#27a337",
- type: "default",
+
single: false,
- nodeTypeNames: ["basic-node"],
+ type: CanvasHandleTypes.ADD_EDGE,
imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
+ lineColor: '#27a337',
lineWidth: 2,
lineStyle: 'dashed'
}
}
- public static getBasicSmallNodeHandle = () => {
+ public static getTagHandle = () => {
return {
- positionX: "right",
- positionY: "top",
- offsetX: 3,
- offsetY: -25,
- color: "#27a337",
- type: "default",
single: false,
- nodeTypeNames: ["basic-small-node"],
- imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
- lineWidth: 2,
- lineStyle: 'dashed'
- }
+ type: CanvasHandleTypes.TAG_AVAILABLE,
+ imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_TAG_ICON,
+ }
}
- public static getUcpeCpNodeHandle = () => {
+ public static getTaggedPolicyHandle = () => {
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'
- }
+ 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'
+ // }
+ // }
}