Merge pull request #11423 from allenve/feat-shape-event

feat: 图形组件支持边框和事件动作

docs/zh-CN/components/shape.md

@@ -97,6 +97,60 @@ icon:
 }
 ```
 
+## 配置边框
+
+```schema
+{
+    type: "page",
+    body: [
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'triangle',
+        width: 100,
+        height: 100,
+        color: '#eee',
+        stroke: '#000',
+        strokeWidth: 4,
+        strokeType: 'line',
+      },
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'square',
+        width: 100,
+        height: 100,
+        color: '#eee',
+        stroke: '#000',
+        strokeWidth: 4,
+        strokeType: 'dash',
+      },
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'pentagon',
+        width: 100,
+        height: 100,
+        color: '#eee',
+        stroke: '#000',
+        strokeWidth: 4,
+        strokeType: 'dot',
+      },
+      {
+        type: 'shape',
+        className: 'm-2',
+        shapeType: 'star',
+        width: 100,
+        height: 100,
+        color: '#eee',
+        stroke: '#000',
+        strokeWidth: 4,
+        strokeType: 'dot',
+      }
+    ]
+}
+```
+
 ## 配置颜色
 
 ```schema
@@ -203,6 +257,43 @@ icon:
 }
 ```
 
+## 事件表
+
+> 2.6.1 及以上版本
+
+当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
+
+| 事件名称 | 事件参数                     | 说明         |
+| -------- | ---------------------------- | ------------ |
+| click    | `label: string` 鼠标事件对象 | `点击`时触发 |
+
+### click
+
+鼠标点击。
+
+```schema: scope="body"
+ {
+  type: 'shape',
+  className: 'm-2',
+  shapeType: 'triangle',
+  "width": 100,
+  "height": 100,
+  onEvent: {
+    click: {
+      actions: [
+        {
+          actionType: 'toast',
+          args: {
+            msgType: 'info',
+            msg: '派发点击事件'
+          }
+        }
+      ]
+    }
+  }
+}
+```
+
 ## 属性表
 
 | 属性名    | 类型         | 默认值    | 说明                  |

packages/amis-ui/scss/components/_shape.scss

@@ -14,5 +14,6 @@
   height: 200px;
   &-svg {
     position: absolute;
+    overflow: visible;
   }
 }

packages/amis-ui/src/components/Shape.tsx

@@ -35,14 +35,19 @@ export type IShapeType =
   | 'leaf';
 
 export type IShapeCustomType = 'custom';
+export type ISHapeStrokeType = 'line' | 'dash' | 'dot';
 
 export interface IShapeProps extends ThemeProps {
   shapeType: IShapeType | IShapeCustomType;
   radius: number;
   width?: number;
   height?: number;
   color?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  strokeType?: 'line' | 'dash' | 'dot';
   paths?: string[];
+  onClick?: (event: React.MouseEvent) => void;
 }
 
 class SvgPathGenerator {
@@ -65,6 +70,33 @@ class SvgPathGenerator {
     return genFun(radius * 10);
   }
 
+  static getStrokeProps(
+    stroke: string,
+    strokeWidth: number,
+    strokeType: ISHapeStrokeType
+  ): any {
+    if (strokeType === 'line') {
+      return {
+        stroke,
+        strokeWidth
+      };
+    } else if (strokeType === 'dash') {
+      return {
+        stroke,
+        strokeWidth,
+        strokeDasharray: `${strokeWidth * 2},${strokeWidth}`
+      };
+    } else if (strokeType === 'dot') {
+      return {
+        stroke,
+        strokeWidth,
+        strokeDasharray: `1,${strokeWidth * 2}`,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'miter'
+      };
+    }
+  }
+
   toRadians(degrees: number) {
     return degrees * (Math.PI / 180);
   }
@@ -549,10 +581,18 @@ const Shape: React.FC<IShapeProps> = props => {
     className,
     shapeType,
     color,
+    stroke = 'currentColor',
+    strokeWidth = 0,
+    strokeType = 'line',
     width = BASE_SIZE,
     height = BASE_SIZE
   } = props;
   const paths = SvgPathGenerator.getPath(shapeType, props);
+  const strokeProps = SvgPathGenerator.getStrokeProps(
+    stroke,
+    strokeWidth,
+    strokeType
+  );
   const getStyle = React.useCallback(
     () => [
       {
@@ -567,7 +607,11 @@ const Shape: React.FC<IShapeProps> = props => {
   );
 
   return (
-    <div className={cx('Shape', className)} style={getStyle()[0]}>
+    <div
+      className={cx('Shape', className)}
+      style={getStyle()[0]}
+      onClick={props.onClick}
+    >
       <svg
         className={cx('Shape-svg')}
         width={BASE_SIZE}
@@ -577,7 +621,7 @@ const Shape: React.FC<IShapeProps> = props => {
         viewBox={`0 0 ${BASE_SIZE} ${BASE_SIZE}`}
       >
         {paths.map((path, index) => (
-          <path key={index} d={path} />
+          <path {...strokeProps} key={index} d={path} />
         ))}
       </svg>
     </div>

packages/amis/src/renderers/Shape.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {filter, Renderer, RendererProps} from 'amis-core';
+import {autobind, filter, Renderer, RendererProps} from 'amis-core';
 import {Shape, IShapeType} from 'amis-ui';
 import cx from 'classnames';
 import {BaseSchema} from '../Schema';
@@ -38,6 +38,18 @@ export interface IShapeSchema extends BaseSchema {
    * 自定义路径，仅 shapeType 为 custom 时有效
    */
   paths?: string[];
+  /**
+   * 边框颜色
+   */
+  stroke?: string;
+  /**
+   * 边框宽度
+   */
+  strokeWidth?: number;
+  /**
+   * 边框类型
+   */
+  strokeType?: 'line' | 'dash' | 'dot';
 }
 
 interface IShapeRenderProps
@@ -48,6 +60,11 @@ interface IShapeRenderProps
   type: 'shape'
 })
 export class ShapeRenderer extends React.Component<IShapeRenderProps> {
+  @autobind
+  handleClick() {
+    this.props.dispatchEvent('click', this.props.data);
+  }
+
   render() {
     const {className, radius, shapeType, data, ...rest} = this.props;
     const shapeTypeValue = (filter(shapeType, data) as IShapeType) || shapeType;
@@ -59,6 +76,7 @@ export class ShapeRenderer extends React.Component<IShapeRenderProps> {
         className={cx(className)}
         shapeType={shapeTypeValue}
         radius={radiusValue}
+        onClick={this.handleClick}
       />
     );
   }