/** * Licensed Materials - Property of IBM * IBM Cognos Products: Modeling UI (C) Copyright IBM Corp. 2016, 2020 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP * Schedule Contract with IBM Corp. */ define([], function() { var DEFAULT_ICON_COLOR = ''; var DEFAULT_ICON = ''; var styleMap = { 'copy': {color: '', icon: ''}, 'reference': {color: '#00B4A0', icon: '#link_16_v7'}, 'danger': {color: '#E62325', icon: '#warning_16_v7', backgroundColor: 'rgba(255,80,80,0.1)'}, 'info': {color: '#595859', icon: '#information_16_v7', backgroundColor: 'rgba(255,80,80,0.1)'}, 'warning': {color: '#FFB000', icon: '#warning--alt_16_v7', backgroundColor: 'rgba(255,80,80,0.1)'}, 'package': {color: '#00B4A0', icon: '#repository_16_v7'} }; var sizeMap = { nodeValues: { // Used to calculate width of rectangle based on label length EM_PIXEL_VALUE: 14, // Standard height of rectangle RECT_HEIGHT: 50, // Length, in pixels, of filter icon offset to center the icon FILTER_ICON_OFFSET: 26, // Standard height of an icon in the diagram ICON_HEIGHT: 16, // Standard width (should be square) ICON_WIDTH: 16, // Offset to center the text vertically in the rect TEXT_Y_OFFSET: 5, // Max width for a node (pixels) MAX_NODE_WIDTH: 160, // Length, in pixels, of error icon offset to center the icon VALIDATION_ICON_OFFSET: 8, // Height of an error icon in the diagram VALIDATION_ICON_HEIGHT: 16, // Width error (should be square) VALIDATION_ICON_WIDTH: 16, // Standard height of the details box TABLE_DETAILS_HEIGHT: 15, // Offset to center the table details text vertically in the rect TABLE_DETAILS_TEXT_Y_OFFSET: 36, }, linkValues: { RECT_SIZE: 20, RECT_ROUNDED: 10, TEXT_Y_OFFSET: 3 } }; var NodeStylesUtils = { /** * Return the style for the given type. * * @param {String} the style type * @return {Object} the style for the given type */ getStyle: function(type) { return styleMap[type]; }, /** * Return the style color for a node of a given type * @param {String} type - What type a node is (reference, copy, etc) */ getColor: function(type){ if( !(type && styleMap[type]) ){ return DEFAULT_ICON_COLOR; } return styleMap[type].color; }, /** * Return the style icon for a node of a given type (if needed) * @param {String} type - What type a node is (reference, copy, etc) */ getIcon: function(type){ if( !(type && styleMap[type]) ){ return DEFAULT_ICON; } return styleMap[type].icon; }, /** * Calculate the required length of a diagram node box based on length of label * @param {Object} d - A d3 selection of type 'node' */ _nodeRectEMLength: function(d) { return Math.min(sizeMap.nodeValues.MAX_NODE_WIDTH / sizeMap.nodeValues.EM_PIXEL_VALUE, (sizeMap.nodeValues.ICON_WIDTH / 2) + (d.label ? (d.label.length / 2) : 0)); }, /*-- PSEUDO CSS STYLES FOR SVG ELEMENTS --*/ /** * Provides styling for diagram nodes based on d3 selections */ diagramNodeStyles: { boxColorStyle: { 'stroke': function(d) { return NodeStylesUtils.getColor(d.instanceType); } }, boxStyle: { 'class': 'mui-diagram-node-box', 'height': sizeMap.nodeValues.RECT_HEIGHT, 'fill': '#FFFFFF', 'stroke-width': '2', 'transition': 'fill 150ms', 'width': function(d) { return NodeStylesUtils._nodeRectEMLength(d) + 'em'; }, 'transform': function(d) { return 'translate(-' + (NodeStylesUtils._nodeRectEMLength(d)) * (sizeMap.nodeValues.EM_PIXEL_VALUE / 2) + ', ' + -(sizeMap.nodeValues.RECT_HEIGHT / 2) + ')'; }, }, validationNodeIconStyle: { 'class': 'mui_validationIcon', 'height': sizeMap.nodeValues.VALIDATION_ICON_HEIGHT, 'width': sizeMap.nodeValues.VALIDATION_ICON_WIDTH, 'xlink:href': function(d){ return d.severityInfo ? NodeStylesUtils.getIcon(d.severityInfo.intent) : DEFAULT_ICON; }, 'fill': function(d){ return d.severityInfo ? NodeStylesUtils.getColor(d.severityInfo.intent) : DEFAULT_ICON_COLOR; }, 'x': function(d) { return -((NodeStylesUtils._nodeRectEMLength(d)) * (sizeMap.nodeValues.EM_PIXEL_VALUE / 2) - sizeMap.nodeValues.VALIDATION_ICON_OFFSET); }, 'y': -(sizeMap.nodeValues.VALIDATION_ICON_HEIGHT / 2), 'opacity': function(d) { return d.isValid ? 0 : 1; } }, validationNodeCircleStyle: { 'r': 6, 'fill': 'transparent', 'cx': function(d) { return -((NodeStylesUtils._nodeRectEMLength(d)) * (sizeMap.nodeValues.EM_PIXEL_VALUE / 2) - sizeMap.nodeValues.VALIDATION_ICON_OFFSET) + 6; }, 'cy': -(sizeMap.nodeValues.VALIDATION_ICON_HEIGHT / 2) + 6 }, validationLinkIconStyle: { 'class': 'mui_validationIcon', 'height': sizeMap.nodeValues.VALIDATION_ICON_HEIGHT, 'width': sizeMap.nodeValues.VALIDATION_ICON_WIDTH, 'xlink:href': function(d){ return d.severityInfo ? NodeStylesUtils.getIcon(d.severityInfo.intent) : DEFAULT_ICON; }, 'fill': function(d){ return d.severityInfo ? NodeStylesUtils.getColor(d.severityInfo.intent) : DEFAULT_ICON_COLOR; }, 'x': function(d) { return 0; }, // 'y': -(sizeMap.nodeValues.VALIDATION_ICON_HEIGHT / 2), 'y': 0, 'opacity': function(d) { return d.isValid ? 0 : 1; } }, validationLinkCircleStyle: { 'r': 6, 'cx': 6, 'cy': 6, 'fill': 'transparent' }, validationLinkGroupIconStyle: { 'class': 'mui_validationIcon', 'height': sizeMap.nodeValues.VALIDATION_ICON_HEIGHT, 'width': sizeMap.nodeValues.VALIDATION_ICON_WIDTH, 'x': function(d) { return 0; }, 'y': 0 }, textStyle: { 'dy': sizeMap.nodeValues.TEXT_Y_OFFSET, 'class': function(d) { return d.hidden ? 'mui-hidden' : ''; } }, filterIconStyle: { 'height': sizeMap.nodeValues.ICON_HEIGHT, 'width': sizeMap.nodeValues.ICON_WIDTH, 'xlink:href': '#filter_16_v7', 'fill': function(d){ return NodeStylesUtils.getColor(d.instanceType); }, 'x': function(d) { return ((NodeStylesUtils._nodeRectEMLength(d)) * (sizeMap.nodeValues.EM_PIXEL_VALUE / 2) - sizeMap.nodeValues.FILTER_ICON_OFFSET); }, 'y': -sizeMap.nodeValues.ICON_HEIGHT, 'opacity': function(d) { if(d.filter) { return d.hidden ? 0.5 : 1; } return 0; } }, referenceIconStyle: { 'height': sizeMap.nodeValues.ICON_HEIGHT, 'width': sizeMap.nodeValues.ICON_WIDTH, 'xlink:href': function(d){ return NodeStylesUtils.getIcon(d.instanceType); }, 'fill': function(d){ return NodeStylesUtils.getColor(d.instanceType); }, 'x': function(d) { return ((NodeStylesUtils._nodeRectEMLength(d)) * (sizeMap.nodeValues.EM_PIXEL_VALUE / 2) - sizeMap.nodeValues.FILTER_ICON_OFFSET); }, 'y': 0, 'opacity': function(d) { return d.instanceType === 'reference' || d.instanceType === 'package' ? 1 : 0; } }, tableDetailsBoxStyle: { 'class': 'mui-diagram-table-details-box', 'height': sizeMap.nodeValues.TABLE_DETAILS_HEIGHT, 'fill': function(d){ return NodeStylesUtils.getColor(d.instanceType); }, 'stroke': function(d){ return NodeStylesUtils.getColor(d.instanceType); }, 'stroke-width': '2', 'transition': 'fill 150ms', 'width': function(d) { return NodeStylesUtils._nodeRectEMLength(d) + 'em'; }, 'transform': function(d) { return 'translate(-' + (NodeStylesUtils._nodeRectEMLength(d)) * (sizeMap.nodeValues.EM_PIXEL_VALUE / 2) + ', ' + (sizeMap.nodeValues.RECT_HEIGHT / 2) + ')'; }, 'visibility': function(d) { return d.displayTableInfo ? 'visible' : 'hidden'; } }, tableDetailsTextStyle: { 'visibility': function(d) { return d.displayTableInfo ? 'visible' : 'hidden'; }, 'dy': sizeMap.nodeValues.TABLE_DETAILS_TEXT_Y_OFFSET, } }, /** * Provides styling for diagram cardinality markers */ CardinalityStyle: { boxStyle: { 'width': sizeMap.linkValues.RECT_SIZE, 'height': sizeMap.linkValues.RECT_SIZE, 'rx': sizeMap.linkValues.RECT_ROUNDED, 'ry': sizeMap.linkValues.RECT_ROUNDED }, textStyle: { 'dx': sizeMap.linkValues.RECT_SIZE / 2, 'dy': (sizeMap.linkValues.RECT_SIZE / 2) + sizeMap.linkValues.TEXT_Y_OFFSET } } }; return NodeStylesUtils; });