refactor: 重构自定义style逻辑

Author: fanyang

packages/core/src/model/node/CircleNodeModel.ts

@@ -41,12 +41,10 @@ export class CircleNodeModel extends BaseNodeModel {
   setAttributes() {
     super.setAttributes()
 
-    const { r, style } = this.properties
+    const { r } = this.properties
     if (r) {
       this.r = r
     }
-    // style 需挂载到实例上: 可以通过properties设置每个节点样式属性
-    if (style) this.style = cloneDeep(style)
   }
 
   getNodeStyle() {
@@ -56,11 +54,11 @@ export class CircleNodeModel extends BaseNodeModel {
         theme: { circle },
       },
     } = this
-    const { style: customStyle } = this.properties
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
-      ...(customStyle ?? {}),
       ...cloneDeep(circle),
+      ...cloneDeep(customStyle),
     }
   }
 

packages/core/src/model/node/DiamondNodeModel.ts

@@ -37,15 +37,13 @@ export class DiamondNodeModel extends BaseNodeModel {
   setAttributes() {
     super.setAttributes()
 
-    const { rx, ry, style } = this.properties
+    const { rx, ry } = this.properties
     if (rx) {
       this.rx = rx
     }
     if (ry) {
       this.ry = ry
     }
-    // style 需挂载到实例上: 可以通过properties设置每个节点样式属性
-    if (style) this.style = cloneDeep(style)
   }
 
   getNodeStyle() {
@@ -55,9 +53,11 @@ export class DiamondNodeModel extends BaseNodeModel {
         theme: { diamond },
       },
     } = this
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(diamond),
+      ...cloneDeep(customStyle),
     }
   }
 

packages/core/src/model/node/EllipseNodeModel.ts

@@ -35,15 +35,13 @@ export class EllipseNodeModel extends BaseNodeModel {
   setAttributes() {
     super.setAttributes()
 
-    const { rx, ry, style } = this.properties
+    const { rx, ry } = this.properties
     if (rx) {
       this.rx = rx
     }
     if (ry) {
       this.ry = ry
     }
-    // style 需挂载到实例上: 可以通过properties设置每个节点样式属性
-    if (style) this.style = cloneDeep(style)
   }
 
   getNodeStyle() {
@@ -53,9 +51,11 @@ export class EllipseNodeModel extends BaseNodeModel {
         theme: { ellipse },
       },
     } = this
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(ellipse),
+      ...cloneDeep(customStyle),
     }
   }
 

packages/core/src/model/node/PolygonNodeModel.ts

@@ -48,7 +48,7 @@ export class PolygonNodeModel extends BaseNodeModel {
   setAttributes() {
     super.setAttributes()
 
-    const { points, width, height, style } = this.properties
+    const { points, width, height } = this.properties
     // DONE: 如果设置了 points，又设置了节点的宽高，则需要做如下操作
     // 1. 将 points 的位置置零，即将图形向原点移动（找到 points 中 x,y 的最小值，所有坐标值减掉该值）
     // 2. 按宽高的比例重新计算最新的 points
@@ -57,8 +57,6 @@ export class PolygonNodeModel extends BaseNodeModel {
     // }
     const nextPoints = points || this.points
     this.points = normalizePolygon(nextPoints, width, height)
-    // style 需挂载到实例上: 可以通过properties设置每个节点样式属性
-    if (style) this.style = cloneDeep(style)
   }
 
   getNodeStyle() {
@@ -68,11 +66,11 @@ export class PolygonNodeModel extends BaseNodeModel {
         theme: { polygon },
       },
     } = this
-    const { style: customStyle } = this.properties
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(polygon),
-      ...(cloneDeep(customStyle) || {}),
+      ...cloneDeep(customStyle),
     }
   }
 

packages/core/src/model/node/RectNodeModel.ts

@@ -8,6 +8,7 @@ import { ModelType } from '../../constant'
 export type IRectNodeModel = {
   width?: number
   height?: number
+  radius?: number
   style?: LogicFlow.CommonTheme
   textStyle?: LogicFlow.CommonTheme
 
@@ -30,13 +31,11 @@ export class RectNodeModel extends BaseNodeModel {
   setAttributes() {
     super.setAttributes()
 
-    const { width, height, style } = this.properties
+    const { width, height, radius } = this.properties
     if (width) this.width = width
     if (height) this.height = height
-    // style 需挂载到实例上: 可以通过properties设置每个节点样式属性
-    if (style) this.style = cloneDeep(style)
     // 矩形特有
-    if (style?.radius) this.radius = style.radius
+    if (radius) this.radius = radius
   }
 
   getDefaultAnchor() {
@@ -52,9 +51,11 @@ export class RectNodeModel extends BaseNodeModel {
   getNodeStyle() {
     const style = super.getNodeStyle()
     const { rect } = this.graphModel.theme
+    const { style: customStyle = {} } = this.properties
     return {
       ...style,
       ...cloneDeep(rect),
+      ...cloneDeep(customStyle),
     }
   }
 }

sites/docs/docs/tutorial/basic-node.md

@@ -98,11 +98,13 @@ class customRectModel extends RectNodeModel {
     super.initNodeData(data);
     this.width = 200;
     this.height = 80;
+    this.radius = 20; // 矩形特有
   }
   // or
   setAttributes() {
     this.width = 200;
     this.height = 80;
+    this.radius = 20; // 矩形特有
   }
 }
 ```

sites/docs/src/tutorial/basic/node/properties/data.ts

@@ -21,9 +21,9 @@ export default {
         statu: 'pass', // 业务属性
         width: 100, // 形状属性
         height: 100,
+        radius: 20,
         style: {
           // 样式属性
-          radius: 20,
           strokeWidth: 3,
         },
       },