From 803dae36903dee976a8ffd657cd44afed10a6e5d Mon Sep 17 00:00:00 2001 From: allenve Date: Tue, 24 Dec 2024 15:40:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E5=BD=A2=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=BE=B9=E6=A1=86=E5=92=8C=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E5=8A=A8=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/shape.md | 91 ++++++++++++++++++++ packages/amis-ui/scss/components/_shape.scss | 1 + packages/amis-ui/src/components/Shape.tsx | 48 ++++++++++- packages/amis/src/renderers/Shape.tsx | 20 ++++- 4 files changed, 157 insertions(+), 3 deletions(-) diff --git a/docs/zh-CN/components/shape.md b/docs/zh-CN/components/shape.md index 1511a148fd6..34ec6f6f248 100644 --- a/docs/zh-CN/components/shape.md +++ b/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: '派发点击事件' + } + } + ] + } + } +} +``` + ## 属性表 | 属性名 | 类型 | 默认值 | 说明 | diff --git a/packages/amis-ui/scss/components/_shape.scss b/packages/amis-ui/scss/components/_shape.scss index 14c4223e25d..3b2c3c8dd29 100644 --- a/packages/amis-ui/scss/components/_shape.scss +++ b/packages/amis-ui/scss/components/_shape.scss @@ -14,5 +14,6 @@ height: 200px; &-svg { position: absolute; + overflow: visible; } } diff --git a/packages/amis-ui/src/components/Shape.tsx b/packages/amis-ui/src/components/Shape.tsx index b20b4a45004..334969f41de 100644 --- a/packages/amis-ui/src/components/Shape.tsx +++ b/packages/amis-ui/src/components/Shape.tsx @@ -35,6 +35,7 @@ export type IShapeType = | 'leaf'; export type IShapeCustomType = 'custom'; +export type ISHapeStrokeType = 'line' | 'dash' | 'dot'; export interface IShapeProps extends ThemeProps { shapeType: IShapeType | IShapeCustomType; @@ -42,7 +43,11 @@ export interface IShapeProps extends ThemeProps { 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 = 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 = props => { ); return ( -
+
= props => { viewBox={`0 0 ${BASE_SIZE} ${BASE_SIZE}`} > {paths.map((path, index) => ( - + ))}
diff --git a/packages/amis/src/renderers/Shape.tsx b/packages/amis/src/renderers/Shape.tsx index 583df5c5332..4f44592e400 100644 --- a/packages/amis/src/renderers/Shape.tsx +++ b/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 { + @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 { className={cx(className)} shapeType={shapeTypeValue} radius={radiusValue} + onClick={this.handleClick} /> ); }