catalog-ui/src/app/directives/graphs-v2/common/style/module-node-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} from "app/utils";
  22 export class ModulesNodesStyle {
  23
  24     public static getModuleGraphStyle = ():Array<Cy.Stylesheet> => {
  25
  26         return [
  27             {
  28                 selector: '.cy-expand-collapse-collapsed-node',
  29                 css: {
  30                     'background-image': 'data(img)',
  31                     'width': 34,
  32                     'height': 32,
  33                     'background-opacity': 0,
  34                     'shape': 'rectangle',
  35                     'label': 'data(displayName)',
  36                     'events': 'yes',
  37                     'text-events': 'yes',
  38                     'text-valign': 'bottom',
  39                     'text-halign': 'center',
  40                     'text-margin-y': 5,
  41                     'border-opacity': 0
  42                 }
  43             },
  44             {
  45                 selector: '.module-node',
  46                 css: {
  47                     'background-color': 'transparent',
  48                     'background-opacity': 0,
  49                     "border-width": 2,
  50                     "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
  51                     'border-style': 'dashed',
  52                     'label': 'data(displayName)',
  53                     'events': 'yes',
  54                     'text-events': 'yes',
  55                     'text-valign': 'bottom',
  56                     'text-halign': 'center',
  57                     'text-margin-y': 8
  58                 }
  59             },
  60             {
  61                 selector: 'node:selected',
  62                 css: {
  63                     "border-opacity": 0
  64                 }
  65             },
  66             {
  67                 selector: '.simple-link:selected',
  68                 css: {
  69                     'line-color': GraphColors.BASE_LINK,
  70                 }
  71             },
  72             {
  73                 selector: '.vl-link:selected',
  74                 css: {
  75                     'line-color': GraphColors.VL_LINK,
  76                 }
  77             },
  78             {
  79                 selector: '.cy-expand-collapse-collapsed-node:selected',
  80                 css: {
  81                     "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
  82                     'border-opacity': 1,
  83                     'border-style': 'solid',
  84                     'border-width': 2
  85                 }
  86             },
  87             {
  88                 selector: '.module-node:selected',
  89                 css: {
  90                     "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
  91                     'border-opacity': 1
  92                 }
  93             },
  94             {
  95                 selector: '.dummy-node',
  96                 css: {
  97                     'width': 20,
  98                     'height': 20
  99                 }
 100             },
 101         ]
 102     }
 103 }