feat(core): Add stroke-dasharray vlaue to outline of node & edge

xinxin93 · xinxin93 · commit 4cb1bca0f509 · 2021-01-31T21:35:46.000+08:00
1. Add stroke-dasharray vlaue to outline of node & edge 2. This close #12
diff --git a/docs/guide/advance/theme.md b/docs/guide/advance/theme.md
@@ -99,6 +99,7 @@ lf.setTheme({
 |strokeOpacity|number|边框透明度|1|
 |opacity|number|整体透明度|1|
 |outlineColor|color|hover外边框颜色|1|
+|outlineStrokeDashArray|string|控制用来描外边框的点划线的图案范式, 设置为空是为实线|'3,3'|
 <details>
 <summary>点击展开查看矩形样式设置</summary>
 
@@ -115,6 +116,7 @@ lf.setTheme({
     strokeOpacity: 1,
     opacity: 1,
     outlineColor: '#000000',
+    outlineStrokeDashArray: '3,3',
   },
 })
 ```
@@ -132,6 +134,7 @@ lf.setTheme({
 |strokeOpacity|number|边框透明度|1|
 |opacity|number|整体透明度|1|
 |outlineColor|color|hover外边框颜色|1|
+|outlineStrokeDashArray|string|控制用来描外边框的点划线的图案范式, 设置为空是为实线|'3,3'|
 <details>
 <summary>点击展开查看圆形样式设置</summary>
 
@@ -146,6 +149,7 @@ lf.setTheme({
     strokeOpacity: 1,
     opacity: 1,
     outlineColor: '#000000',
+    outlineStrokeDashArray: '3,3',
   },
 })
 ```
@@ -164,6 +168,7 @@ lf.setTheme({
 |strokeOpacity|number|边框透明度|1|
 |opacity|number|整体透明度|1|
 |outlineColor|color|hover外边框颜色|1|
+|outlineStrokeDashArray|string|控制用来描外边框的点划线的图案范式, 设置为空是为实线|'3,3'|
 <details>
 <summary>点击展开查看椭圆样式设置</summary>
 
@@ -179,6 +184,7 @@ lf.setTheme({
     strokeOpacity: 1,
     opacity: 1,
     outlineColor: '#000000',
+    outlineStrokeDashArray: '3,3',
   },
 })
 ```
@@ -242,6 +248,7 @@ lf.setTheme({
 |strokeOpacity|number|边框透明度|1|
 |opacity|number|整体透明度|1|
 |outlineColor|color|hover外边框颜色|1|
+|outlineStrokeDashArray|string|控制用来描外边框的点划线的图案范式, 设置为空是为实线|'3,3'|
 <details>
 <summary>点击展开查看多边形样式设置</summary>
 
@@ -255,6 +262,7 @@ lf.setTheme({
     strokeOpacity: 1,
     opacity: 1,
     outlineColor: '#000000',
+    outlineStrokeDashArray: '3,3',
   },
 })
 ```
@@ -272,6 +280,7 @@ lf.setTheme({
 |strokeOpacity|number|边框透明度|1|
 |opacity|number|整体透明度|1|
 |outlineColor|color|外边框颜色|#000000|
+|outlineStrokeDashArray|string|控制用来描外边框的点划线的图案范式, 设置为空是为实线|'3,3'|
 <details>
 <summary>点击展开查看锚点样式设置</summary>
 
@@ -285,6 +294,7 @@ lf.setTheme({
     strokeOpacity: 1,
     opacity: 1,
     outlineColor: '#000000',
+    outlineStrokeDashArray: '3,3',
   },
 })
 ```
@@ -350,6 +360,7 @@ lf.setTheme({
 |hoverStroke|color|连线hover颜色|#000000|
 |selectedStroke|color|连线选中颜色|#000000|
 |outlineColor|color|外边框颜色|#000000|
+|outlineStrokeDashArray|string|控制用来描外边框的点划线的图案范式, 设置为空是为实线|'3,3'|
 <details>
 <summary>点击展开查看直线样式设置</summary>
 
@@ -361,6 +372,8 @@ lf.setTheme({
     hoverStroke: '#000000',
     selectedStroke: '#000000',
     selectedShadow: true,
+    outlineColor: '#000000',
+    outlineStrokeDashArray: '3,3',
   },
 })
 ```
@@ -376,6 +389,7 @@ lf.setTheme({
 |selectedStroke|color|连线选中颜色|#000000|
 |outlineColor|color|外边框颜色|#000000|
 |offset|number|折线起终点距离节点的偏移|30|
+|outlineStrokeDashArray|string|控制用来描外边框的点划线的图案范式, 设置为空是为实线|'3,3'|
 <details>
 <summary>点击展开查看折线样式设置</summary>
 
@@ -388,6 +402,8 @@ lf.setTheme({
     selectedStroke: '#000000',
     selectedShadow: true,
     offset: 30,
+    outlineColor: '#000000',
+    outlineStrokeDashArray: '3,3',
   },
 })
 ```
diff --git a/packages/core/src/constant/DefaultTheme.ts b/packages/core/src/constant/DefaultTheme.ts
@@ -8,6 +8,7 @@ const commonStyle = {
   strokeOpacity: 1,
   opacity: 1,
   outlineColor: '#000000',
+  outlineStrokeDashArray: '3,3',
 };
 const rect = {
   ...commonStyle,
@@ -51,6 +52,7 @@ const edge = {
   hoverStroke: '#000000',
   selectedStroke: '#000000',
   outlineColor: '#000000',
+  outlineStrokeDashArray: '3,3',
 };
 const line = {
   ...edge,
diff --git a/packages/core/src/model/edge/BaseEdgeModel.ts b/packages/core/src/model/edge/BaseEdgeModel.ts
@@ -52,6 +52,7 @@ class BaseEdgeModel implements IBaseModel {
   @observable strokeWidth = defaultData.strokeWidth;
   @observable stroke = defaultData.stroke;
   @observable outlineColor = defaultData.outlineColor;
+  @observable outlineStrokeDashArray = defaultData.outlineStrokeDashArray;
   @observable strokeOpacity = defaultData.strokeOpacity;
   @observable zIndex = defaultData.zIndex;
   @observable isSelected = defaultData.isSelected;
diff --git a/packages/core/src/model/node/BaseNodeModel.ts b/packages/core/src/model/node/BaseNodeModel.ts
@@ -63,6 +63,7 @@ export default class BaseNodeModel implements IBaseModel {
   @observable strokeOpacity = defaultConfig.strokeOpacity;
   @observable opacity = defaultConfig.opacity;
   @observable outlineColor = defaultConfig.outlineColor;
+  @observable outlineStrokeDashArray = defaultConfig.outlineStrokeDashArray;
   @observable isSelected = false;
   @observable isHovered = false;
   @observable isHitable = true; // 细粒度控制节点是否对用户操作进行反应
diff --git a/packages/core/src/view/overlay/OutlineOverlay.tsx b/packages/core/src/view/overlay/OutlineOverlay.tsx
@@ -12,8 +12,6 @@ type IProps = {
   graphModel: GraphModel;
 };
 
-const STROKE_DASH_ARRAY = '3, 3';
-
 @observer
 export default class OutlineOverlay extends Component<IProps> {
   // 节点outline
@@ -24,7 +22,7 @@ export default class OutlineOverlay extends Component<IProps> {
     for (let i = 0; i < nodeList.length; i++) {
       const node = nodeList[i];
       const {
-        isSelected, x, y, width, height, outlineColor,
+        isSelected, x, y, width, height, outlineColor, outlineStrokeDashArray,
       } = node;
       if (isSelected) {
         nodeOutline.push(
@@ -36,7 +34,7 @@ export default class OutlineOverlay extends Component<IProps> {
             radius={0}
             fill="none"
             stroke={outlineColor}
-            strokeDasharray={STROKE_DASH_ARRAY}
+            strokeDasharray={outlineStrokeDashArray}
           />,
         );
       }
@@ -70,7 +68,7 @@ export default class OutlineOverlay extends Component<IProps> {
     const width = Math.abs(startPoint.x - endPoint.x) + 10;
     const height = Math.abs(startPoint.y - endPoint.y) + 10;
     const { graphModel } = this.props;
-    const { outlineColor } = graphModel.theme.line;
+    const { outlineColor, outlineStrokeDashArray } = graphModel.theme.line;
     return (
       <Rect
         className="lf-outline-edge"
@@ -80,7 +78,7 @@ export default class OutlineOverlay extends Component<IProps> {
         radius={0}
         fill="none"
         stroke={outlineColor}
-        strokeDasharray={STROKE_DASH_ARRAY}
+        strokeDasharray={outlineStrokeDashArray}
       />
     );
   }
@@ -93,7 +91,7 @@ export default class OutlineOverlay extends Component<IProps> {
       x, y, width, height,
     } = bbox;
     const { graphModel } = this.props;
-    const { outlineColor } = graphModel.theme.polyline;
+    const { outlineColor, outlineStrokeDashArray } = graphModel.theme.polyline;
     return (
       <Rect
         className="lf-outline"
@@ -103,7 +101,7 @@ export default class OutlineOverlay extends Component<IProps> {
         radius={0}
         fill="none"
         stroke={outlineColor}
-        strokeDasharray={STROKE_DASH_ARRAY}
+        strokeDasharray={outlineStrokeDashArray}
       />
     );
   }
@@ -116,7 +114,7 @@ export default class OutlineOverlay extends Component<IProps> {
       x, y, width, height,
     } = bbox;
     const { graphModel } = this.props;
-    const { outlineColor } = graphModel.theme.bezier;
+    const { outlineColor, outlineStrokeDashArray } = graphModel.theme.bezier;
     return (
       <Rect
         className="lf-outline"
@@ -126,7 +124,7 @@ export default class OutlineOverlay extends Component<IProps> {
         radius={0}
         fill="none"
         stroke={outlineColor}
-        strokeDasharray={STROKE_DASH_ARRAY}
+        strokeDasharray={outlineStrokeDashArray}
       />
     );
   }
