/** * Created by obarda on 12/18/2016. */ /** * Created by obarda on 12/13/2016. */ /// module Sdc.Graph.Utils.ComponentIntanceNodesStyle { export function getCompositionGraphStyle():Array { return [ { selector: 'core', css: { 'shape': 'rectangle', 'active-bg-size': 0, 'selection-box-color': 'rgb(0, 159, 219)', 'selection-box-opacity': 0.2, 'selection-box-border-color': '#009fdb', 'selection-box-border-width': 1 } }, { selector: 'node', css: { 'font-family': 'omnes-regular,sans-serif', 'font-size': 14, 'events': 'yes', 'text-events': 'yes', 'text-border-width': 15, 'text-border-color': Sdc.Utils.Constants.GraphColors.NODE_UCPE, 'text-margin-y': 5 } }, { selector: '.vf-node', css: { 'background-color': 'transparent', 'shape': 'rectangle', 'label': 'data(displayName)', 'background-image': 'data(img)', 'width': 65, 'height': 65, 'background-opacity': 0, "background-width": 65, "background-height": 65, 'text-valign': 'bottom', 'text-halign': 'center', 'background-fit': 'cover', 'background-clip': 'node', 'overlay-color': Sdc.Utils.Constants.GraphColors.NODE_BACKGROUND_COLOR, 'overlay-opacity': 0 } }, { selector: '.service-node', css: { 'background-color': 'transparent', 'label': 'data(displayName)', 'events': 'yes', 'text-events': 'yes', 'background-image': 'data(img)', 'width': 64, 'height': 64, "border-width": 0, 'text-valign': 'bottom', 'text-halign': 'center', 'background-opacity': 0, 'overlay-color': Sdc.Utils.Constants.GraphColors.NODE_BACKGROUND_COLOR, 'overlay-opacity': 0 } }, { selector: '.cp-node', css: { 'background-color': 'rgb(255,255,255)', 'shape': 'rectangle', 'label': 'data(displayName)', 'background-image': 'data(img)', 'background-width': 21, 'background-height': 21, 'width': 21, 'height': 21, 'text-valign': 'bottom', 'text-halign': 'center', 'background-opacity': 0, 'overlay-color': Sdc.Utils.Constants.GraphColors.NODE_BACKGROUND_COLOR, 'overlay-opacity': 0 } }, { selector: '.vl-node', css: { 'background-color': 'rgb(255,255,255)', 'shape': 'rectangle', 'label': 'data(displayName)', 'background-image': 'data(img)', 'background-width': 21, 'background-height': 21, 'width': 21, 'height': 21, 'text-valign': 'bottom', 'text-halign': 'center', 'background-opacity': 0, 'overlay-color': Sdc.Utils.Constants.GraphColors.NODE_BACKGROUND_COLOR, 'overlay-opacity': 0 } }, { selector: '.ucpe-cp', css: { 'background-color': Sdc.Utils.Constants.GraphColors.NODE_UCPE_CP, 'background-width': 15, 'background-height': 15, 'width': 15, 'height': 15, 'text-halign': 'center', 'overlay-opacity': 0, 'label': 'data(displayName)', 'text-valign': 'data(textPosition)', 'text-margin-y': (ele:Cy.Collection) => { return (ele.data('textPosition') == 'top')? -5 : 5; }, 'font-size': 12 } }, { selector: '.ucpe-node', css: { 'background-fit': 'cover', 'padding-bottom': 0, 'padding-top': 0 } }, { selector: '.simple-link', css: { 'width': 1, 'line-color': Sdc.Utils.Constants.GraphColors.BASE_LINK, 'target-arrow-color': '#3b7b9b', 'target-arrow-shape': 'triangle', 'curve-style': 'bezier', 'control-point-step-size': 30 } }, { selector: '.vl-link', css: { 'width': 3, 'line-color': Sdc.Utils.Constants.GraphColors.VL_LINK, 'curve-style': 'bezier', 'control-point-step-size': 30 } }, { selector: '.ucpe-host-link', css: { 'width': 0 } }, { selector: '.not-certified-link', css: { 'width': 1, 'line-color': Sdc.Utils.Constants.GraphColors.NOT_CERTIFIED_LINK, 'curve-style': 'bezier', 'control-point-step-size': 30, 'line-style': 'dashed', 'target-arrow-color': '#3b7b9b', 'target-arrow-shape': 'triangle' } }, { selector: '.not-certified', css: { 'shape': 'rectangle', 'background-image': (ele:Cy.Collection) => { return ele.data().initImage(ele) }, "border-width": 0 } }, { selector: 'node:selected', css: { "border-width": 2, "border-color": Sdc.Utils.Constants.GraphColors.NODE_SELECTED_BORDER_COLOR, 'shape': 'rectangle' } }, { selector: 'edge:selected', css: { 'line-color': Sdc.Utils.Constants.GraphColors.ACTIVE_LINK } }, { selector: 'edge:active', css: { 'overlay-opacity': 0 } } ] } export function getBasicNodeHanlde() { return { positionX: "center", positionY: "top", offsetX: 15, offsetY: -20, color: "#27a337", type: "default", single: false, nodeTypeNames: ["basic-node"], imageUrl: Sdc.Utils.Constants.IMAGE_PATH + '/styles/images/resource-icons/' + 'canvasPlusIcon.png', lineWidth: 2, lineStyle: 'dashed' } } export function getBasicSmallNodeHandle() { return { positionX: "center", positionY: "top", offsetX: 3, offsetY: -25, color: "#27a337", type: "default", single: false, nodeTypeNames: ["basic-small-node"], imageUrl: Sdc.Utils.Constants.IMAGE_PATH + '/styles/images/resource-icons/' + 'canvasPlusIcon.png', lineWidth: 2, lineStyle: 'dashed' } } export function getUcpeCpNodeHandle() { return { positionX: "center", positionY: "center", offsetX: -8, offsetY: -10, color: "#27a337", type: "default", single: false, nodeTypeNames: ["ucpe-cp-node"], imageUrl: Sdc.Utils.Constants.IMAGE_PATH + '/styles/images/resource-icons/' + 'canvasPlusIcon.png', lineWidth: 2, lineStyle: 'dashed' } } }