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().initUncertifiedImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE);
 241                     },
 242                     "border-width": 0
 243                 }
 244             },
 245             {
 246                 selector: '.dependent',
 247                 css: {
 248                     'shape': 'rectangle',
 249                     'background-image': (ele:Cy.Collection) => {
 250                         return ele.data().initDependentImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE)
 251                     },
 252                     "border-width": 0
 253                 }
 254             },
 255             {
 256                 selector: '.dependent.not-certified',
 257                 css: {
 258                     'shape': 'rectangle',
 259                     'background-image': (ele:Cy.Collection) => {
 260                         return ele.data().initUncertifiedDependentImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE)
 261                     },
 262                     "border-width": 0
 263                 }
 264             },
 265             {
 266                 selector: 'node:selected',
 267                 css: {
 268                     "border-width": 2,
 269                     "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
 270                     'shape': 'rectangle'
 271                 }
 272             },
 273             {
 274                 selector: 'edge:selected',
 275                 css: {
 276                     'line-color': GraphColors.ACTIVE_LINK
 277
 278                 }
 279             },
 280             {
 281                 selector: 'edge:active',
 282                 css: {
 283                     'overlay-opacity': 0
 284                 }
 285             }, {
 286                 selector: '.configuration-node',
 287                 css: {
 288                     'background-color': 'rgb(255,255,255)',
 289                     'shape': 'rectangle',
 290                     'label': 'data(displayName)',
 291                     'background-image': 'data(img)',
 292                     'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 293                     'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
 294                     'background-position-x': GraphUIObjects.HANDLE_SIZE / 2,
 295                     'background-position-y': GraphUIObjects.HANDLE_SIZE / 2,
 296                     'width': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE,
 297                     'height': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE/2,
 298                     'text-valign': 'bottom',
 299                     'text-halign': 'center',
 300                     'background-opacity': 0,
 301                     'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
 302                     'overlay-opacity': 0
 303                 }
 304             }
 305         ]
 306     }
 307
 308     public static getAddEdgeHandle = () => {
 309         return {
 310
 311             single: false,
 312             type: CanvasHandleTypes.ADD_EDGE,
 313             imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
 314             lineColor: '#27a337',
 315             lineWidth: 2,
 316             lineStyle: 'dashed'
 317
 318         }
 319     }
 320
 321     public static getTagHandle = () => {
 322         return {
 323             single: false,
 324             type: CanvasHandleTypes.TAG_AVAILABLE,
 325             imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_TAG_ICON,
 326         }
 327     }
 328
 329     public static getTaggedPolicyHandle = () => {
 330         return {
 331             single: false,
 332             type: CanvasHandleTypes.TAGGED_POLICY,
 333             imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_POLICY_TAGGED_ICON,
 334         }
 335     }
 336
 337     public static getTaggedGroupHandle = () => {
 338         return {
 339             single: false,
 340             type: CanvasHandleTypes.TAGGED_GROUP,
 341             imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_GROUP_TAGGED_ICON,
 342         }
 343     }
 344
 345
 346     // public static getUcpeCpNodeHandle = () => {
 347     //     return {
 348     //         positionX: "center",
 349     //         positionY: "center",
 350     //         offsetX: -8,
 351     //         offsetY: -10,
 352     //         color: "#27a337",
 353     //         type: "default",
 354     //         single: false,
 355     //         nodeTypeNames: ["ucpe-cp-node"],
 356     //         imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
 357     //         lineWidth: 2,
 358     //         lineStyle: 'dashed'
 359     //     }
 360     // }
 361 }