From d43b2551e8de482ec59d16ced6174b609e348ffe Mon Sep 17 00:00:00 2001 From: "zhanning.bzn" Date: Sat, 12 Oct 2019 12:02:37 +0800 Subject: [PATCH] default node support color property --- package.json | 2 +- src/global.js | 2 +- src/shape/nodes/circle.js | 19 +++++++++---------- src/shape/nodes/diamond.js | 18 +++++++++--------- src/shape/nodes/ellipse.js | 22 +++++++++------------- src/shape/nodes/modelRect.js | 20 +++++++++----------- src/shape/nodes/rect.js | 22 +++++++--------------- src/shape/nodes/star.js | 18 +++++++++--------- src/shape/nodes/triangle.js | 19 ++++++++++--------- 9 files changed, 64 insertions(+), 78 deletions(-) diff --git a/package.json b/package.json index c0f6bb3cd7..af6063e508 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6", - "version": "3.1.1", + "version": "3.1.2", "description": "graph visualization frame work", "main": "build/g6.js", "homepage": "https://github.com/antvis/g6", diff --git a/src/global.js b/src/global.js index 28d7fdff4f..d5813a950a 100755 --- a/src/global.js +++ b/src/global.js @@ -3,7 +3,7 @@ */ module.exports = { - version: '3.1.1', + version: '3.1.2', rootContainerClassName: 'root-container', nodeContainerClassName: 'node-container', edgeContainerClassName: 'edge-container', diff --git a/src/shape/nodes/circle.js b/src/shape/nodes/circle.js index 21dfd9b98a..f7ae53d5ce 100644 --- a/src/shape/nodes/circle.js +++ b/src/shape/nodes/circle.js @@ -58,17 +58,12 @@ Shape.registerNode('circle', { labelPosition: 'center', drawShape(cfg, group) { const customOptions = this.getCustomConfig(cfg) || {}; - const { style: defaultStyle, icon: defaultIcon } = this.options; - const { style: customStyle, icon: customIcon } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); + const { icon: defaultIcon } = this.options; + const { icon: customIcon } = customOptions; + const style = this.getShapeStyle(cfg); const icon = deepMix({}, defaultIcon, customIcon, cfg.icon); - const size = this.getSize(cfg); - const r = size[0] / 2; const keyShape = group.addShape('circle', { - attrs: { - ...style, - r - } + attrs: style }); const { width, height, show } = icon; @@ -165,7 +160,11 @@ Shape.registerNode('circle', { const customOptions = this.getCustomConfig(cfg) || {}; const { style: defaultStyle } = this.options; const { style: customStyle } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); + const strokeStyle = { + stroke: cfg.color + }; + // 如果设置了color，则覆盖默认的stroke属性 + const style = deepMix({}, defaultStyle, customStyle, strokeStyle, cfg.style); const size = this.getSize(cfg); const r = size[0] / 2; const styles = Util.mix({}, { diff --git a/src/shape/nodes/diamond.js b/src/shape/nodes/diamond.js index fa00b41368..c75cb7e8af 100644 --- a/src/shape/nodes/diamond.js +++ b/src/shape/nodes/diamond.js @@ -55,17 +55,13 @@ Shape.registerNode('diamond', { labelPosition: 'center', drawShape(cfg, group) { const customOptions = this.getCustomConfig(cfg) || {}; - const { style: defaultStyle, icon: defaultIcon } = this.options; - const { style: customStyle, icon: customIcon } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); + const { icon: defaultIcon } = this.options; + const { icon: customIcon } = customOptions; + const style = this.getShapeStyle(cfg); const icon = deepMix({}, defaultIcon, customIcon, cfg.icon); - const path = this.getPath(cfg); const keyShape = group.addShape('path', { - attrs: { - path, - ...style - } + attrs: style }); const { width: w, height: h, show } = icon; @@ -176,7 +172,11 @@ Shape.registerNode('diamond', { const customOptions = this.getCustomConfig(cfg) || {}; const { style: defaultStyle } = this.options; const { style: customStyle } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); + const strokeStyle = { + stroke: cfg.color + }; + // 如果设置了color，则覆盖默认的stroke属性 + const style = deepMix({}, defaultStyle, customStyle, strokeStyle, cfg.style); const path = this.getPath(cfg); const styles = { path, ...style }; return styles; diff --git a/src/shape/nodes/ellipse.js b/src/shape/nodes/ellipse.js index 6ee275b695..85265aaa07 100644 --- a/src/shape/nodes/ellipse.js +++ b/src/shape/nodes/ellipse.js @@ -60,21 +60,13 @@ Shape.registerNode('ellipse', { labelPosition: 'center', drawShape(cfg, group) { const customOptions = this.getCustomConfig(cfg) || {}; - const { style: defaultStyle, icon: defaultIcon } = this.options; - const { style: customStyle, icon: customIcon } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); + const { icon: defaultIcon } = this.options; + const { icon: customIcon } = customOptions; + const style = this.getShapeStyle(cfg); const icon = deepMix({}, defaultIcon, customIcon, cfg.icon); - const size = this.getSize(cfg); - - const rx = size[0] / 2; - const ry = size[1] / 2; const keyShape = group.addShape('ellipse', { - attrs: { - ...style, - rx, - ry - } + attrs: style }); const { width, height, show } = icon; @@ -173,7 +165,11 @@ Shape.registerNode('ellipse', { const customOptions = this.getCustomConfig(cfg) || {}; const { style: defaultStyle } = this.options; const { style: customStyle } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); + const strokeStyle = { + stroke: cfg.color + }; + // 如果设置了color，则覆盖默认的stroke属性 + const style = deepMix({}, defaultStyle, customStyle, strokeStyle, cfg.style); const size = this.getSize(cfg); const rx = size[0] / 2; const ry = size[1] / 2; diff --git a/src/shape/nodes/modelRect.js b/src/shape/nodes/modelRect.js index c66cf5f9b1..8232cdab8d 100644 --- a/src/shape/nodes/modelRect.js +++ b/src/shape/nodes/modelRect.js @@ -86,21 +86,15 @@ Shape.registerNode('modelRect', { shapeType: 'modelRect', drawShape(cfg, group) { const customOptions = this.getCustomConfig(cfg) || {}; - const { style: defaultStyle, preRect: defaultPreRect } = this.options; - const { style: customStyle, preRect: customPreRect } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); + const { preRect: defaultPreRect } = this.options; + const { preRect: customPreRect } = customOptions; + const style = this.getShapeStyle(cfg); const size = this.getSize(cfg); const width = size[0]; const height = size[1]; const keyShape = group.addShape('rect', { - attrs: { - ...style, - x: -width / 2, - y: -height / 2, - width, - height - } + attrs: style }); const preRect = deepMix({}, defaultPreRect, customPreRect, cfg.preRect); @@ -314,7 +308,11 @@ Shape.registerNode('modelRect', { const customOptions = this.getCustomConfig(cfg) || {}; const { style: defaultStyle } = this.options; const { style: customStyle } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); + const strokeStyle = { + stroke: cfg.color + }; + // 如果设置了color，则覆盖默认的stroke属性 + const style = deepMix({}, defaultStyle, customStyle, strokeStyle, cfg.style); const size = this.getSize(cfg); const width = size[0]; const height = size[1]; diff --git a/src/shape/nodes/rect.js b/src/shape/nodes/rect.js index 4553a58fab..20e5099118 100644 --- a/src/shape/nodes/rect.js +++ b/src/shape/nodes/rect.js @@ -48,22 +48,10 @@ Shape.registerNode('rect', { }, shapeType: 'rect', drawShape(cfg, group) { - const customOptions = this.getCustomConfig(cfg) || {}; - const { style: defaultStyle } = this.options; - const { style: customStyle } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); - const size = this.getSize(cfg); - const width = size[0]; - const height = size[1]; + const style = this.getShapeStyle(cfg); const keyShape = group.addShape('rect', { - attrs: { - ...style, - x: -width / 2, - y: -height / 2, - width, - height - }, + attrs: style, className: 'rect-keyShape' }); @@ -148,7 +136,11 @@ Shape.registerNode('rect', { const customOptions = this.getCustomConfig(cfg) || {}; const { style: defaultStyle } = this.options; const { style: customStyle } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); + const strokeStyle = { + stroke: cfg.color + }; + // 如果设置了color，则覆盖默认的stroke属性 + const style = deepMix({}, defaultStyle, customStyle, strokeStyle, cfg.style); const size = this.getSize(cfg); const width = size[0]; const height = size[1]; diff --git a/src/shape/nodes/star.js b/src/shape/nodes/star.js index 105a201aa4..d49cebf1fb 100644 --- a/src/shape/nodes/star.js +++ b/src/shape/nodes/star.js @@ -57,17 +57,13 @@ Shape.registerNode('star', { labelPosition: 'center', drawShape(cfg, group) { const customOptions = this.getCustomConfig(cfg) || {}; - const { style: defaultStyle, icon: defaultIcon } = this.options; - const { style: customStyle, icon: customIcon } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); + const { icon: defaultIcon } = this.options; + const { icon: customIcon } = customOptions; + const style = this.getShapeStyle(cfg); const icon = deepMix({}, defaultIcon, customIcon, cfg.icon); - const path = this.getPath(cfg); const keyShape = group.addShape('path', { - attrs: { - path, - ...style - } + attrs: style }); const { width: w, height: h, show } = icon; @@ -232,7 +228,11 @@ Shape.registerNode('star', { const customOptions = this.getCustomConfig(cfg) || {}; const { style: defaultStyle } = this.options; const { style: customStyle } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); + const strokeStyle = { + stroke: cfg.color + }; + // 如果设置了color，则覆盖默认的stroke属性 + const style = deepMix({}, defaultStyle, customStyle, strokeStyle, cfg.style); const path = this.getPath(cfg); const styles = { path, ...style }; return styles; diff --git a/src/shape/nodes/triangle.js b/src/shape/nodes/triangle.js index 206e23572c..640184a36c 100644 --- a/src/shape/nodes/triangle.js +++ b/src/shape/nodes/triangle.js @@ -58,18 +58,15 @@ Shape.registerNode('triangle', { labelPosition: 'bottom', drawShape(cfg, group) { const customOptions = this.getCustomConfig(cfg) || {}; - const { style: defaultStyle, icon: defaultIcon, direction: defaultDirection } = this.options; - const { style: customStyle, icon: customIcon, direction: customDirection } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); + const { icon: defaultIcon, direction: defaultDirection } = this.options; + const { icon: customIcon, direction: customDirection } = customOptions; + const style = this.getShapeStyle(cfg); const icon = deepMix({}, defaultIcon, customIcon, cfg.icon); const direction = cfg.direction || customDirection || defaultDirection; - const path = this.getPath(cfg); + const keyShape = group.addShape('path', { - attrs: { - path, - ...style - } + attrs: style }); const { width: w, height: h, show, offset } = icon; @@ -275,7 +272,11 @@ Shape.registerNode('triangle', { const customOptions = this.getCustomConfig(cfg) || {}; const { style: defaultStyle } = this.options; const { style: customStyle } = customOptions; - const style = deepMix({}, defaultStyle, customStyle, cfg.style); + const strokeStyle = { + stroke: cfg.color + }; + // 如果设置了color，则覆盖默认的stroke属性 + const style = deepMix({}, defaultStyle, customStyle, strokeStyle, cfg.style); const path = this.getPath(cfg); const styles = { path, ...style }; return styles;