default node support color property

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",

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',

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 { icon: defaultIcon } = this.options;
-    const { style: customStyle, icon: customIcon } = customOptions;
+    const { icon: customIcon } = customOptions;
-    const style = deepMix({}, defaultStyle, customStyle, cfg.style);
+    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: {
+      attrs: style
-        ...style,
-        r
-      }
     });
 
     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({}, {

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 { icon: defaultIcon } = this.options;
-    const { style: customStyle, icon: customIcon } = customOptions;
+    const { icon: customIcon } = customOptions;
-    const style = deepMix({}, defaultStyle, customStyle, cfg.style);
+    const style = this.getShapeStyle(cfg);
     const icon = deepMix({}, defaultIcon, customIcon, cfg.icon);
 
-    const path = this.getPath(cfg);
     const keyShape = group.addShape('path', {
-      attrs: {
+      attrs: style
-        path,
-        ...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;

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 { icon: defaultIcon } = this.options;
-    const { style: customStyle, icon: customIcon } = customOptions;
+    const { icon: customIcon } = customOptions;
-    const style = deepMix({}, defaultStyle, customStyle, cfg.style);
+    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: {
+      attrs: style
-        ...style,
-        rx,
-        ry
-      }
     });
 
     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;

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 { preRect: defaultPreRect } = this.options;
-    const { style: customStyle, preRect: customPreRect } = customOptions;
+    const { preRect: customPreRect } = customOptions;
-    const style = deepMix({}, defaultStyle, customStyle, cfg.style);
+    const style = this.getShapeStyle(cfg);
     const size = this.getSize(cfg);
     const width = size[0];
     const height = size[1];
 
     const keyShape = group.addShape('rect', {
-      attrs: {
+      attrs: style
-        ...style,
-        x: -width / 2,
-        y: -height / 2,
-        width,
-        height
-      }
     });
 
     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];

src/shape/nodes/rect.js

@@ -48,22 +48,10 @@ Shape.registerNode('rect', {
   },
   shapeType: 'rect',
   drawShape(cfg, group) {
-    const customOptions = this.getCustomConfig(cfg) || {};
+    const style = this.getShapeStyle(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 keyShape = group.addShape('rect', {
-      attrs: {
+      attrs: style,
-        ...style,
-        x: -width / 2,
-        y: -height / 2,
-        width,
-        height
-      },
       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];

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 { icon: defaultIcon } = this.options;
-    const { style: customStyle, icon: customIcon } = customOptions;
+    const { icon: customIcon } = customOptions;
-    const style = deepMix({}, defaultStyle, customStyle, cfg.style);
+    const style = this.getShapeStyle(cfg);
     const icon = deepMix({}, defaultIcon, customIcon, cfg.icon);
 
-    const path = this.getPath(cfg);
     const keyShape = group.addShape('path', {
-      attrs: {
+      attrs: style
-        path,
-        ...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;

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 { icon: defaultIcon, direction: defaultDirection } = this.options;
-    const { style: customStyle, icon: customIcon, direction: customDirection } = customOptions;
+    const { icon: customIcon, direction: customDirection } = customOptions;
-    const style = deepMix({}, defaultStyle, customStyle, cfg.style);
+    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: {
+      attrs: style
-        path,
-        ...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;