catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 import { GraphColors, GraphUIObjects} from "app/utils/constants";
  22 import constant = require("lodash/constant");
  23 import {ImagesUrl} from "app/utils/constants";
  24 import {AngularJSBridge} from "app/services/angular-js-bridge-service";
  25 /**
  26  * Created by obarda on 12/18/2016.
  27  */
  28 export class ComponentInstanceNodesStyle {
  29
  30     public static getCompositionGraphStyle = ():Array<Cy.Stylesheet>  => {
  31         return [
  32             {
  33                 selector: 'core',
  34                 css: {
  35                     'shape': 'rectangle',
  36                     'active-bg-size': 0,
  37                     'selection-box-color': 'rgb(0, 159, 219)',
  38                     'selection-box-opacity': 0.2,
  39                     'selection-box-border-color': '#009fdb',
  40                     'selection-box-border-width': 1
  41
  42                 }
  43             },
  44             {
  45                 selector: 'node',
  46                 css: {
  47                     'font-family': 'OpenSans-Regular,sans-serif',
  48
  49                     'font-size': 14,
  50                     'events': 'yes',
  51                     'text-events': 'yes',
  52                     'text-border-width': 15,
  53                     'text-border-color': GraphColors.NODE_UCPE,
  54                     'text-margin-y': 5
  55                 }
  56             },
  57             {
  58                 selector: '.vf-node',
  59                 css: {
  60                     'background-color': 'transparent',
  61                     'shape': 'rectangle',
  62                     'label': 'data(displayName)',
  63                     'background-image': 'data(img)',
  64                     'width': GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
  65                     'height': GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
  66                     'background-opacity': 0,
  67                     "background-width": GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
  68                     "background-height": GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
  69                     'text-valign': 'bottom',
  70                     'text-halign': 'center',
  71                     'background-fit': 'cover',
  72                     'background-clip': 'node',
  73                     'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
  74                     'overlay-opacity': 0
  75                 }
  76             },
  77
  78             {
  79                 selector: '.service-node',
  80                 css: {
  81                     'background-color': 'transparent',
  82                     'label': 'data(displayName)',
  83                     'events': 'yes',
  84                     'text-events': 'yes',
  85                     'background-image': 'data(img)',
  86                     'width': 64,
  87                     'height': 64,
  88                     "border-width": 0,
  89                     'text-valign': 'bottom',
  90                     'text-halign': 'center',
  91                     'background-opacity': 0,
  92                     'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
  93                     'overlay-opacity': 0
  94                 }
  95             },
  96             {
  97                 selector: '.cp-node',
  98                 css: {
  99                     'background-color': 'rgb(255,255,255)',
 100                     'shape': 'rectangle',
 101                     'label': 'data(displayName)',
 102                     'background-image': 'data(img)',
 103                     'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 104                     'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 105                     'width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 106                     'height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 107                     'text-valign': 'bottom',
 108                     'text-halign': 'center',
 109                     'background-opacity': 0,
 110                     'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
 111                     'overlay-opacity': 0
 112                 }
 113             },
 114             {
 115                 selector: '.vl-node',
 116                 css: {
 117                     'background-color': 'rgb(255,255,255)',
 118                     'shape': 'rectangle',
 119                     'label': 'data(displayName)',
 120                     'background-image': 'data(img)',
 121                     'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 122                     'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 123                     'width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 124                     'height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 125                     'text-valign': 'bottom',
 126                     'text-halign': 'center',
 127                     'background-opacity': 0,
 128                     'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
 129                     'overlay-opacity': 0
 130                 }
 131             },
 132             {
 133                 selector: '.ucpe-cp',
 134                 css: {
 135                     'background-color': GraphColors.NODE_UCPE_CP,
 136                     'background-width': 15,
 137                     'background-height': 15,
 138                     'width': 15,
 139                     'height': 15,
 140                     'text-halign': 'center',
 141                     'overlay-opacity': 0,
 142                     'label': 'data(displayName)',
 143                     'text-valign': 'data(textPosition)',
 144                     'text-margin-y': (ele:Cy.Collection) => {
 145                         return (ele.data('textPosition') == 'top') ? -5 : 5;
 146                     },
 147                     'font-size': 12
 148                 }
 149             },
 150             {
 151                 selector: '.ucpe-node',
 152                 css: {
 153                     'background-fit': 'cover',
 154                     'padding-bottom': 0,
 155                     'padding-top': 0
 156                 }
 157             },
 158             {
 159                 selector: '.simple-link',
 160                 css: {
 161                     'width': 1,
 162                     'line-color': GraphColors.BASE_LINK,
 163                     'target-arrow-color': '#3b7b9b',
 164                     'target-arrow-shape': 'triangle',
 165                     'curve-style': 'bezier',
 166                     'control-point-step-size': 30
 167                 }
 168             },
 169             {
 170                 selector: '.vl-link',
 171                 css: {
 172                     'width': 3,
 173                     'line-color': GraphColors.VL_LINK,
 174                     'curve-style': 'bezier',
 175                     'control-point-step-size': 30
 176                 }
 177             },
 178             {
 179                 selector: '.vl-link-1',
 180                 css: {
 181                     'width': 3,
 182                     'line-color': GraphColors.ACTIVE_LINK,
 183                     'curve-style': 'unbundled-bezier',
 184                     'target-arrow-color': '#3b7b9b',
 185                     'target-arrow-shape': 'triangle',
 186                     'control-point-step-size': 30
 187                 }
 188             },
 189             {
 190                 selector: '.ucpe-host-link',
 191                 css: {
 192                     'width': 0
 193                 }
 194             },
 195             {
 196                 selector: '.not-certified-link',
 197                 css: {
 198                     'width': 1,
 199                     'line-color': GraphColors.NOT_CERTIFIED_LINK,
 200                     'curve-style': 'bezier',
 201                     'control-point-step-size': 30,
 202                     'line-style': 'dashed',
 203                     'target-arrow-color': '#3b7b9b',
 204                     'target-arrow-shape': 'triangle'
 205
 206                 }
 207             },
 208
 209             {
 210                 selector: '.service-path-link',
 211                 css: {
 212                     'width': 2,
 213                     'line-color': GraphColors.SERVICE_PATH_LINK,
 214                     'target-arrow-color': GraphColors.SERVICE_PATH_LINK,
 215                     'target-arrow-shape': 'triangle',
 216                     'curve-style': 'bezier',
 217                     'control-point-step-size': 30
 218                 }
 219             },
 220             {
 221                 selector: '.not-certified',
 222                 css: {
 223                     'shape': 'rectangle',
 224                     'background-image': (ele:Cy.Collection) => {
 225                         return ele.data().initUncertifiedImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE)
 226                     },
 227                     "border-width": 0
 228                 }
 229             },
 230             {
 231                 selector: 'node:selected',
 232                 css: {
 233                     "border-width": 2,
 234                     "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
 235                     'shape': 'rectangle'
 236                 }
 237             },
 238             {
 239                 selector: 'edge:selected',
 240                 css: {
 241                     'line-color': GraphColors.ACTIVE_LINK
 242
 243                 }
 244             },
 245             {
 246                 selector: 'edge:active',
 247                 css: {
 248                     'overlay-opacity': 0
 249                 }
 250             }, {
 251                 selector: '.configuration-node',
 252                 css: {
 253                     'background-color': 'rgb(255,255,255)',
 254                     'shape': 'rectangle',
 255                     'label': 'data(displayName)',
 256                     'background-image': 'data(img)',
 257                     'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 258                     'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 259                     'width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 260                     'height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 261                     'text-valign': 'bottom',
 262                     'text-halign': 'center',
 263                     'background-opacity': 0,
 264                     'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
 265                     'overlay-opacity': 0
 266                 }
 267             }
 268         ]
 269     }
 270
 271     public static getBasicNodeHanlde = () => {
 272         return {
 273             positionX: "right",
 274             positionY: "top",
 275             offsetX: 15,
 276             offsetY: -20,
 277             color: "#27a337",
 278             type: "default",
 279             single: false,
 280             nodeTypeNames: ["basic-node"],
 281             imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
 282             lineWidth: 2,
 283             lineStyle: 'dashed'
 284
 285         }
 286     }
 287
 288     public static getBasicSmallNodeHandle = () => {
 289         return {
 290             positionX: "right",
 291             positionY: "top",
 292             offsetX: 3,
 293             offsetY: -25,
 294             color: "#27a337",
 295             type: "default",
 296             single: false,
 297             nodeTypeNames: ["basic-small-node"],
 298             imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
 299             lineWidth: 2,
 300             lineStyle: 'dashed'
 301         }
 302     }
 303
 304     public static getUcpeCpNodeHandle = () => {
 305         return {
 306             positionX: "center",
 307             positionY: "center",
 308             offsetX: -8,
 309             offsetY: -10,
 310             color: "#27a337",
 311             type: "default",
 312             single: false,
 313             nodeTypeNames: ["ucpe-cp-node"],
 314             imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
 315             lineWidth: 2,
 316             lineStyle: 'dashed'
 317         }
 318     }
 319 }