diff --git a/src/components/graph/graph.builder.js b/src/components/graph/graph.builder.js index e66a7228e..3d3ddd353 100644 --- a/src/components/graph/graph.builder.js +++ b/src/components/graph/graph.builder.js @@ -33,7 +33,7 @@ function _getNodeOpacity(node, highlightedNode, highlightedLink, config) { } else if (someNodeHighlighted) { opacity = highlight ? config.node.opacity : config.highlightOpacity; } else { - opacity = config.node.opacity; + opacity = node.opacity || config.node.opacity; } return opacity; @@ -81,7 +81,7 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo target === (highlightedLink && highlightedLink.target); const highlight = reasonNode || reasonLink; - let opacity = config.link.opacity; + let opacity = link.opacity || config.link.opacity; if (highlightedNode || (highlightedLink && highlightedLink.source)) { opacity = highlight ? config.link.opacity : config.highlightOpacity; @@ -93,7 +93,7 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo stroke = config.link.highlightColor === CONST.KEYWORDS.SAME ? config.link.color : config.link.highlightColor; } - let strokeWidth = config.link.strokeWidth * (1 / transform); + let strokeWidth = (link.strokeWidth || config.link.strokeWidth) * (1 / transform); if (config.link.semanticStrokeWidth) { const linkValue = links[source][target] || links[target][source] || 1; @@ -137,6 +137,7 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl (node.id === (highlightedLink && highlightedLink.source) || node.id === (highlightedLink && highlightedLink.target)); const opacity = _getNodeOpacity(node, highlightedNode, highlightedLink, config); + let fill = node.color || config.node.color; if (highlight && config.node.highlightColor !== CONST.KEYWORDS.SAME) { @@ -155,11 +156,16 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl label = config.node.labelProperty(node); } + let strokeWidth = node.strokeWidth || config.node.strokeWidth; + + if (highlight && config.node.highlightStrokeWidth !== CONST.KEYWORDS.SAME) { + strokeWidth = config.node.highlightStrokeWidth; + } + const t = 1 / transform; const nodeSize = node.size || config.node.size; const fontSize = highlight ? config.node.highlightFontSize : config.node.fontSize; const dx = fontSize * t + nodeSize / 100 + 1.5; - const strokeWidth = highlight ? config.node.highlightStrokeWidth : config.node.strokeWidth; const svg = node.svg || config.node.svg; const fontColor = node.fontColor || config.node.fontColor; diff --git a/src/components/graph/graph.config.js b/src/components/graph/graph.config.js index dd354992c..dcc484796 100644 --- a/src/components/graph/graph.config.js +++ b/src/components/graph/graph.config.js @@ -107,7 +107,7 @@ * @param {number} [node.highlightFontSize=8] - fontSize in highlighted state. * @param {string} [node.highlightFontWeight='normal'] - fontWeight in highlighted state. * @param {string} [node.highlightStrokeColor='SAME'] - strokeColor in highlighted state. - * @param {number} [node.highlightStrokeWidth=1.5] - strokeWidth in highlighted state. + * @param {number} [node.highlightStrokeWidth='SAME'] - strokeWidth in highlighted state. * @param {string|Function} [node.labelProperty='id'] - this is the node property that will be used in runtime to * fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set * node.labelProperty to be **'firstName'**. **This can also be a function!**, if you pass a function here it will be called @@ -123,12 +123,12 @@ *
* @param {string} [node.mouseCursor='pointer'] - {@link https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control|cursor} * property for when some node is mouse hovered. - * @param {number} [node.opacity=1] - by default all nodes will have this opacity value. + * @param {number} [node.opacity=1] 🔍🔍🔍 - by default all nodes will have this opacity value. * @param {boolean} [node.renderLabel=true] - when set to false no labels will appear along side nodes in the * graph. * @param {number} [node.size=200] - 🔍🔍🔍 defines the size of all nodes. * @param {string} [node.strokeColor='none'] - 🔍🔍🔍 this is the stroke color that will be applied to the node if no **strokeColor property** is found inside the node itself (yes **you can pass a property 'strokeColor' inside the node and that stroke color will override this default one** ). - * @param {number} [node.strokeWidth=1.5] - the width of the all node strokes. + * @param {number} [node.strokeWidth=1.5] 🔍🔍🔍 - the width of the all node strokes. * @param {string} [node.svg=''] - 🔍🔍🔍 render custom svg for nodes in alternative to **node.symbolType**. This svg can * be provided as a string to either a remote svg resource or for a local one. *
@@ -154,14 +154,14 @@ * * @param {string} [link.mouseCursor='pointer'] - {@link https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control|cursor} * property for when link is mouse hovered. - * @param {number} [link.opacity=1] - the default opacity value for links. + * @param {number} [link.opacity=1] 🔍🔍🔍 - the default opacity value for links. * @param {boolean} [link.semanticStrokeWidth=false] - when set to true all links will have * *"semantic width"*, this means that the width of the connections will be proportional to the value of each link. * This is how link strokeWidth will be calculated: * ```javascript * strokeWidth += (linkValue * strokeWidth) / 10; * ``` - * @param {number} [link.strokeWidth=1.5] - strokeWidth for all links. By default the actual value is obtain by the + * @param {number} [link.strokeWidth=1.5] 🔍🔍🔍 - strokeWidth for all links. By default the actual value is obtain by the * following expression: * ```javascript * link.strokeWidth * (1 / transform); // transform is a zoom delta Δ value @@ -219,7 +219,7 @@ export default { highlightFontSize: 8, highlightFontWeight: "normal", highlightStrokeColor: "SAME", - highlightStrokeWidth: 1.5, + highlightStrokeWidth: "SAME", labelProperty: "id", mouseCursor: "pointer", opacity: 1,