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 import { CanvasHandleTypes } from "app/utils";
  26 /**
  27  * Created by obarda on 12/18/2016.
  28  */
  29 export class ComponentInstanceNodesStyle {
  30
  31     public static getCompositionGraphStyle = ():Array<Cy.Stylesheet>  => {
  32         return [
  33             {
  34                 selector: 'core',
  35                 css: {
  36                     'shape': 'rectangle',
  37                     'active-bg-size': 0,
  38                     'selection-box-color': 'rgb(0, 159, 219)',
  39                     'selection-box-opacity': 0.2,
  40                     'selection-box-border-color': '#009fdb',
  41                     'selection-box-border-width': 1
  42
  43                 }
  44             },
  45             {
  46                 selector: 'node',
  47                 css: {
  48                     'font-family': 'OpenSans-Regular,sans-serif',
  49
  50                     'font-size': 14,
  51                     'events': 'yes',
  52                     'text-events': 'yes',
  53                     'text-border-width': 15,
  54                     'text-border-color': GraphColors.NODE_UCPE,
  55                     'text-margin-y': 5
  56                 }
  57             },
  58             {
  59                 selector: '.vf-node',
  60                 css: {
  61                     'background-color': 'transparent',
  62                     'shape': 'rectangle',
  63                     'label': 'data(displayName)',
  64                     'background-image': 'data(img)',
  65                     'width': GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
  66                     'height': GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
  67                     'background-opacity': 0,
  68                     "background-width": GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
  69                     "background-height": GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
  70                     'text-valign': 'bottom',
  71                     'text-halign': 'center',
  72                     'background-fit': 'cover',
  73                     'background-clip': 'node',
  74                     'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
  75                     'overlay-opacity': 0
  76                 }
  77             },
  78
  79             {
  80                 selector: '.service-node',
  81                 css: {
  82                     'background-color': 'transparent',
  83                     'label': 'data(displayName)',
  84                     'events': 'yes',
  85                     'text-events': 'yes',
  86                     'background-image': 'data(img)',
  87                     'width': 64,
  88                     'height': 64,
  89                     "border-width": 0,
  90                     'text-valign': 'bottom',
  91                     'text-halign': 'center',
  92                     'background-opacity': 0,
  93                     'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
  94                     'overlay-opacity': 0
  95                 }
  96             },
  97             {
  98                 selector: '.cp-node',
  99                 css: {
 100                     'background-color': 'rgb(255,255,255)',
 101                     'shape': 'rectangle',
 102                     'label': 'data(displayName)',
 103                     'background-image': 'data(img)',
 104                     'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 105                     'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 106                     'width': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE,
 107                     'height': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE/2,
 108                     'background-position-x': GraphUIObjects.HANDLE_SIZE / 2,
 109                     'background-position-y': GraphUIObjects.HANDLE_SIZE / 2,
 110                     'text-valign': 'bottom',
 111                     'text-halign': 'center',
 112                     'background-opacity': 0,
 113                     'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
 114                     'overlay-opacity': 0
 115                 }
 116             },
 117             {
 118                 selector: '.vl-node',
 119                 css: {
 120                     'background-color': 'rgb(255,255,255)',
 121                     'shape': 'rectangle',
 122                     'label': 'data(displayName)',
 123                     'background-image': 'data(img)',
 124                     'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 125                     'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 126                     'background-position-x': GraphUIObjects.HANDLE_SIZE / 2,
 127                     'background-position-y': GraphUIObjects.HANDLE_SIZE / 2,
 128                     'width': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE,
 129                     'height': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE / 2,
 130                     'text-valign': 'bottom',
 131                     'text-halign': 'center',
 132                     'background-opacity': 0,
 133                     'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
 134                     'overlay-opacity': 0
 135                 }
 136             },
 137             {
 138                 selector: '.ucpe-cp',
 139                 css: {
 140                     'background-color': GraphColors.NODE_UCPE_CP,
 141                     'background-width': 15,
 142                     'background-height': 15,
 143                     'width': 15,
 144                     'height': 15,
 145                     'text-halign': 'center',
 146                     'overlay-opacity': 0,
 147                     'label': 'data(displayName)',
 148                     'text-valign': 'data(textPosition)',
 149                     'text-margin-y': (ele:Cy.Collection) => {
 150                         return (ele.data('textPosition') == 'top') ? -5 : 5;
 151                     },
 152                     'font-size': 12
 153                 }
 154             },
 155             {
 156                 selector: '.ucpe-node',
 157                 css: {
 158                     'background-fit': 'cover',
 159                     'padding-bottom': 0,
 160                     'padding-top': 0
 161                 }
 162             },
 163             {
 164                 selector: '.simple-link',
 165                 css: {
 166                     'width': 1,
 167                     'line-color': GraphColors.BASE_LINK,
 168                     'target-arrow-color': '#3b7b9b',
 169                     'target-arrow-shape': 'triangle',
 170                     'curve-style': 'bezier',
 171                     'control-point-step-size': 30
 172                 }
 173             },
 174             {
 175                 selector: '.archived',
 176                 css: {
 177                     'shape': 'rectangle',
 178                     'background-image': (ele:Cy.Collection) => {
 179                         return ele.data().setArchivedImageBgStyle(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE); //Change name to setArchivedImageBgStyle ??
 180                     },
 181                     "border-width": 0
 182                 }
 183             },
 184             {
 185                 selector: '.vl-link',
 186                 css: {
 187                     'width': 3,
 188                     'line-color': GraphColors.VL_LINK,
 189                     'curve-style': 'bezier',
 190                     'control-point-step-size': 30
 191                 }
 192             },
 193             {
 194                 selector: '.vl-link-1',
 195                 css: {
 196                     'width': 3,
 197                     'line-color': GraphColors.ACTIVE_LINK,
 198                     'curve-style': 'unbundled-bezier',
 199                     'target-arrow-color': '#3b7b9b',
 200                     'target-arrow-shape': 'triangle',
 201                     'control-point-step-size': 30
 202                 }
 203             },
 204             {
 205                 selector: '.ucpe-host-link',
 206                 css: {
 207                     'width': 0
 208                 }
 209             },
 210             {
 211                 selector: '.not-certified-link',
 212                 css: {
 213                     'width': 1,
 214                     'line-color': GraphColors.NOT_CERTIFIED_LINK,
 215                     'curve-style': 'bezier',
 216                     'control-point-step-size': 30,
 217                     'line-style': 'dashed',
 218                     'target-arrow-color': '#3b7b9b',
 219                     'target-arrow-shape': 'triangle'
 220
 221                 }
 222             },
 223
 224             {
 225                 selector: '.service-path-link',
 226                 css: {
 227                     'width': 2,
 228                     'line-color': GraphColors.SERVICE_PATH_LINK,
 229                     'target-arrow-color': GraphColors.SERVICE_PATH_LINK,
 230                     'target-arrow-shape': 'triangle',
 231                     'curve-style': 'bezier',
 232                     'control-point-step-size': 30
 233                 }
 234             },
 235             {
 236                 selector: '.not-certified',
 237                 css: {
 238                     'shape': 'rectangle',
 239                     'background-image': (ele:Cy.Collection) => {
 240                         return ele.data().setUncertifiedImageBgStyle(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE);//Change name to setUncertifiedImageBgStyle??
 241                     },
 242                     "border-width": 0
 243                 }
 244             },
 245             {
 246                 selector: 'node:selected',
 247                 css: {
 248                     "border-width": 2,
 249                     "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
 250                     'shape': 'rectangle'
 251                 }
 252             },
 253             {
 254                 selector: 'edge:selected',
 255                 css: {
 256                     'line-color': GraphColors.ACTIVE_LINK
 257
 258                 }
 259             },
 260             {
 261                 selector: 'edge:active',
 262                 css: {
 263                     'overlay-opacity': 0
 264                 }
 265             }, {
 266                 selector: '.configuration-node',
 267                 css: {
 268                     'background-color': 'rgb(255,255,255)',
 269                     'shape': 'rectangle',
 270                     'label': 'data(displayName)',
 271                     'background-image': 'data(img)',
 272                     'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 273                     'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 274                     'background-position-x': GraphUIObjects.HANDLE_SIZE / 2,
 275                     'background-position-y': GraphUIObjects.HANDLE_SIZE / 2,
 276                     'width': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE,
 277                     'height': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE/2,
 278                     'text-valign': 'bottom',
 279                     'text-halign': 'center',
 280                     'background-opacity': 0,
 281                     'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
 282                     'overlay-opacity': 0
 283                 }
 284             }
 285         ]
 286     }
 287
 288     public static getAddEdgeHandle = () => {
 289         return {
 290
 291             single: false,
 292             type: CanvasHandleTypes.ADD_EDGE,
 293             imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
 294             lineColor: '#27a337',
 295             lineWidth: 2,
 296             lineStyle: 'dashed'
 297
 298         }
 299     }
 300
 301     public static getTagHandle = () => {
 302         return {
 303             single: false,
 304             type: CanvasHandleTypes.TAG_AVAILABLE,
 305             imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_TAG_ICON,
 306         }
 307     }
 308
 309     public static getTaggedPolicyHandle = () => {
 310         return {
 311             single: false,
 312             type: CanvasHandleTypes.TAGGED_POLICY,
 313             imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_POLICY_TAGGED_ICON,
 314         }
 315     }
 316
 317     public static getTaggedGroupHandle = () => {
 318         return {
 319             single: false,
 320             type: CanvasHandleTypes.TAGGED_GROUP,
 321             imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_GROUP_TAGGED_ICON,
 322         }
 323     }
 324
 325
 326     // public static getUcpeCpNodeHandle = () => {
 327     //     return {
 328     //         positionX: "center",
 329     //         positionY: "center",
 330     //         offsetX: -8,
 331     //         offsetY: -10,
 332     //         color: "#27a337",
 333     //         type: "default",
 334     //         single: false,
 335     //         nodeTypeNames: ["ucpe-cp-node"],
 336     //         imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
 337     //         lineWidth: 2,
 338     //         lineStyle: 'dashed'
 339     //     }
 340     // }
 341 }