From dbf9b079905404e47827258b5e37351058605094 Mon Sep 17 00:00:00 2001 From: ModestFun <61576426+ModestFun@users.noreply.github.com> Date: Thu, 4 Jan 2024 15:44:37 +0800 Subject: [PATCH] :bug: fix: vercel workflow, constants export. add CanvasLoading tips. (#73) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :memo: feat: pressure test * fix: CI and vercel (#67) * :bug: fix: src/index export * :bug: fix: refact type export * :bug: fix: ci --------- Co-authored-by: jiangchu * fix(minimap): import Language from './constants' (#71) * :bug: fix: src/index export * :bug: fix: refact type export * :bug: fix: ci * :bug: fix: import --------- Co-authored-by: jiangchu * :bug: fix(flowview): flow view md (#72) Co-authored-by: liangchaofei * ✨ feat: CanvasLoading supports custom tips (#69) * 🐛 fix: fixed an error in the progress component of demo * 🐛 fix(floweditor): flow editor md parse waring * ✨ feat: CanvasLoading supports custom tips --------- Co-authored-by: jiangchu Co-authored-by: curry Co-authored-by: liangchaofei Co-authored-by: zhangqimeng <36561218+supuwoerc@users.noreply.github.com> --- docs/caseShow/demos/pressureTest.tsx | 57 +++++++++++ docs/caseShow/presureTest.md | 13 +++ docs/guide/flowViewIntro.zh-CN.md | 24 ++--- src/BasicNode/demos/default/data.tsx | 2 +- src/CanvasLoading/demos/index.tsx | 2 +- src/CanvasLoading/index.md | 4 +- src/CanvasLoading/index.tsx | 7 +- src/FlowEditor/index.zh-CN.md | 137 ++++----------------------- src/FlowView/demos/data.tsx | 2 +- src/FlowView/index.zh-CN.md | 14 +-- src/MiniMap/index.tsx | 2 +- src/index.ts | 43 +++------ 12 files changed, 132 insertions(+), 175 deletions(-) create mode 100644 docs/caseShow/demos/pressureTest.tsx create mode 100644 docs/caseShow/presureTest.md diff --git a/docs/caseShow/demos/pressureTest.tsx b/docs/caseShow/demos/pressureTest.tsx new file mode 100644 index 0000000..dfd79ba --- /dev/null +++ b/docs/caseShow/demos/pressureTest.tsx @@ -0,0 +1,57 @@ +/** + * compact: true + * defaultShowCode: true + */ +import { FlowEdge, FlowNode, FlowView } from '@ant-design/pro-flow'; + +const nodes: FlowNode[] = []; +const edges: FlowEdge[] = []; + +nodes.push({ + id: `a${0}`, + data: { + title: `节点${0}`, + logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', + describe: 'XXX_XXX_XXX_API', + }, +}); + +for (let i = 1; i < 1000; i += 1) { + nodes.push({ + id: `a${i}`, + data: { + title: `节点${i}`, + logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', + describe: 'XXX_XXX_XXX_API', + }, + }); + + if ((i - 1) % 10 === 0) { + edges.push({ + id: `a${i}-${Math.random()}-${Date.now() * Math.random()}`, + source: 'a0', + target: `a${i}`, + }); + } else { + edges.push({ + id: `a${i}-${Math.random()}-${Date.now() * Math.random()}`, + source: `a${i - 1}`, + target: `a${i}`, + }); + } +} + +function App() { + return ( +
+ +
+ ); +} + +export default App; diff --git a/docs/caseShow/presureTest.md b/docs/caseShow/presureTest.md new file mode 100644 index 0000000..796e2d3 --- /dev/null +++ b/docs/caseShow/presureTest.md @@ -0,0 +1,13 @@ +--- +nav: 案例展示 +order: 100 +group: + title: 压力测试 + order: 1 +title: 1000节点 +description: +--- + +## Default + + diff --git a/docs/guide/flowViewIntro.zh-CN.md b/docs/guide/flowViewIntro.zh-CN.md index c82fd5a..774aa47 100644 --- a/docs/guide/flowViewIntro.zh-CN.md +++ b/docs/guide/flowViewIntro.zh-CN.md @@ -86,18 +86,18 @@ const nodes = [ ### FlowView -| 属性名 | 类型 | 描述 | 默认值 | 必选 | -| ---------- | ------------------------------------------------ | ---- | ---- | -- | -| nodes | `FlowViewNode` | 边数据 | - | - | -| edges | `FlowViewEdge` | 节点数据 | - | - | -| className | `string` | 边数据 | - | - | -| style | `CSSProperties` | 节点数据 | - | - | -| miniMap | `boolean` | 边数据 | - | - | -| autoLayout | `boolean` | 自动布局 | true | - | -| background | `boolean` | 节点数据 | - | - | -| children | `React.ReactNode` | 边数据 | - | - | -| nodeTypes | `Record>` | 节点类型 | - | - | -| edgeTypes | `Record>` | 边缘类型 | - | - | +| 属性名 | 类型 | 描述 | 默认值 | 必选 | +| ---------- | ------------------------------------------------ | -------- | ------ | ---- | +| nodes | `FlowViewNode` | 边数据 | - | - | +| edges | `FlowViewEdge` | 节点数据 | - | - | +| className | `string` | 边数据 | - | - | +| style | `CSSProperties` | 节点数据 | - | - | +| miniMap | `boolean` | 边数据 | - | - | +| autoLayout | `boolean` | 自动布局 | true | - | +| background | `boolean` | 节点数据 | - | - | +| children | `React.ReactNode` | 边数据 | - | - | +| nodeTypes | `Record>` | 节点类型 | - | - | +| edgeTypes | `Record>` | 边缘类型 | - | - | ## 更多信息 diff --git a/src/BasicNode/demos/default/data.tsx b/src/BasicNode/demos/default/data.tsx index 2263c2a..d59ca9b 100644 --- a/src/BasicNode/demos/default/data.tsx +++ b/src/BasicNode/demos/default/data.tsx @@ -13,7 +13,7 @@ const ApiScore: React.FC<{ score: number }> = ({ score }) => { percent={score === 0 ? 1 : score * 20} strokeColor={score * 20 > 60 ? '#30a46c' : '#e5484d'} format={() => `${score}`} - size={[28, 6]} + size={28} /> ); }; diff --git a/src/CanvasLoading/demos/index.tsx b/src/CanvasLoading/demos/index.tsx index 61895e6..68a1a8d 100644 --- a/src/CanvasLoading/demos/index.tsx +++ b/src/CanvasLoading/demos/index.tsx @@ -7,7 +7,7 @@ import { Flexbox } from 'react-layout-kit'; export default () => ( - + diff --git a/src/CanvasLoading/index.md b/src/CanvasLoading/index.md index d2211e2..a82b4ea 100644 --- a/src/CanvasLoading/index.md +++ b/src/CanvasLoading/index.md @@ -16,4 +16,6 @@ description: ## APIs - +| 属性名 | 类型 | 描述 | 默认值 | 必选 | +| ------ | ---------------- | -------------- | ------------- | ---- | +| tip | `string \| null` | 加载中提示文字 | 画布初始化... | 否 | diff --git a/src/CanvasLoading/index.tsx b/src/CanvasLoading/index.tsx index 4714711..5ecbd71 100644 --- a/src/CanvasLoading/index.tsx +++ b/src/CanvasLoading/index.tsx @@ -1,4 +1,5 @@ import { createStyles } from 'antd-style'; +import { isNull } from 'lodash-es'; import { rgba } from 'polished'; import { memo, ReactNode } from 'react'; import { Center } from 'react-layout-kit'; @@ -54,9 +55,10 @@ const useStyles = createStyles(({ css, token }) => ({ interface CanvasLoadingProps { children?: ReactNode; loading?: boolean; + tip?: string | null; } -const CanvasLoading = memo(({ children, loading }) => { +const CanvasLoading = memo(({ children, loading, tip = '画布初始化...' }) => { const { styles } = useStyles(); const content = ( @@ -64,8 +66,7 @@ const CanvasLoading = memo(({ children, loading }) => {
- -
画布初始化...
+ {!isNull(tip) &&
{tip}
} ); diff --git a/src/FlowEditor/index.zh-CN.md b/src/FlowEditor/index.zh-CN.md index 566f2f1..3dc055a 100644 --- a/src/FlowEditor/index.zh-CN.md +++ b/src/FlowEditor/index.zh-CN.md @@ -20,134 +20,31 @@ FlowEditor 为数据驱动解决方案，需搭配 [useFlowEditor](/api-docs/use ### 画布交互说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
用户操作画布交互
触控板鼠标目标行为
点击交互
点击mouse-pointer-2.png 选中元素
点击拖拽无操作 / mouse-pointer-2 (1).png 创建选区
shift + 点击拖拽无操作 / mouse-pointer-2 (1).png扩展选区（在选中其他元素的基础上）
空格 + 点击拖拽mouse-pointer-2 (2).png 滚动画布（空格等于切换为拖动工具）
滚动交互

滚轮滚动mouse-pointer-2 (3).png上下滚动画布
shift + 滚轮滚动 mouse-pointer-2 (4).png水平滚动画布
ctrl + 滚轮滚动mouse-pointer-2 (5).png 围绕指针缩放
平移（pan）
mouse-pointer-2 (6).png 滚动画布（此时鼠标指针不变）
缩放（zoom）mouse-pointer-2 (5).png 围绕指针缩放
键盘交互
macwin
⌘ + actrl + a选中全部节点
⌘ + zctrl + z撤销上一步操作
⌘ + cctrl + c复制选中的部分
⌘ + vctrl + v粘贴选中的部分
⌘ + shift + zctrl + Y重做上一步操作
backspacebackspace删除选中区域
+
用户操作画布交互
触控板鼠标目标行为
点击交互
点击mouse-pointer-2.png选中元素
点击拖拽无操作/mouse-pointer-2 (1).png创建选区
shift+点击拖拽无操作/mouse-pointer-2 (1).png扩展选区（在选中其他元素的基础上）
空格+点击拖拽mouse-pointer-2 (2).png滚动画布（空格等于切换为拖动工具）
滚动交互

滚轮滚动mouse-pointer-2 (3).png上下滚动画布
shift+滚轮滚动mouse-pointer-2 (4).png水平滚动画布
ctrl+滚轮滚动mouse-pointer-2 (5).png围绕指针缩放
平移（pan）
mouse-pointer-2 (6).png滚动画布（此时鼠标指针不变）
缩放（zoom）mouse-pointer-2 (5).png围绕指针缩放
键盘交互
macwin
⌘+actrl+a选中全部节点
⌘+zctrl+z撤销上一步操作
⌘+cctrl+c复制选中的部分
⌘+vctrl+v粘贴选中的部分
⌘+shift+zctrl+Y重做上一步操作
backspacebackspace删除选中区域
## API ### FlowEditor -| 属性名 | 类型 | 描述 | 默认值 | 必选 | -| --------------- | -------------------------------------- | --------------- | --- | -- | -| defaultViewport | `Viewport` | 画布的初始窗口位置 | - | - | -| flowProps | `ComponentProps` | reactflow props | - | - | -| onNodesInit | `(editor: FlowEditorInstance) => void` | 节点加载完成回调 | - | - | -| className | `string` | 边数据 | - | - | -| style | `CSSProperties` | 节点数据 | - | - | -| children | `React.ReactNode` | 边数据 | - | - | -| nodeTypes | NodeTypes\` | 节点类型 | - | - | -| miniMap | `boolean` | 边数据 | - | - | -| background | `boolean` | 节点数据 | - | - | +| 属性名 | 类型 | 描述 | 默认值 | 必选 | +| --------------- | -------------------------------------- | ------------------ | ------ | ---- | +| defaultViewport | `Viewport` | 画布的初始窗口位置 | - | - | +| flowProps | `ComponentProps` | reactflow props | - | - | +| onNodesInit | `(editor: FlowEditorInstance) => void` | 节点加载完成回调 | - | - | +| className | `string` | 边数据 | - | - | +| style | `CSSProperties` | 节点数据 | - | - | +| children | `React.ReactNode` | 边数据 | - | - | +| nodeTypes | NodeTypes\` | 节点类型 | - | - | +| miniMap | `boolean` | 边数据 | - | - | +| background | `boolean` | 节点数据 | - | - | ### Viewport -| 属性名 | 类型 | 描述 | 默认值 | 必选 | -| ---- | -------- | ---- | --- | -- | -| x | `number` | x 坐标 | - | - | -| y | `number` | y 坐标 | - | - | -| zoom | `number` | 缩放比例 | - | - | +| 属性名 | 类型 | 描述 | 默认值 | 必选 | +| ------ | -------- | -------- | ------ | ---- | +| x | `number` | x 坐标 | - | - | +| y | `number` | y 坐标 | - | - | +| zoom | `number` | 缩放比例 | - | - | ### ReactFlow Props diff --git a/src/FlowView/demos/data.tsx b/src/FlowView/demos/data.tsx index bb2592f..8e808a7 100644 --- a/src/FlowView/demos/data.tsx +++ b/src/FlowView/demos/data.tsx @@ -14,7 +14,7 @@ const ApiScore: React.FC<{ score: number }> = ({ score }) => { percent={score === 0 ? 1 : score * 20} strokeColor={score * 20 > 60 ? '#30a46c' : '#e5484d'} format={() => `${score}`} - size={[28, 6]} + size={28} /> ); }; diff --git a/src/FlowView/index.zh-CN.md b/src/FlowView/index.zh-CN.md index 890814e..02fe180 100644 --- a/src/FlowView/index.zh-CN.md +++ b/src/FlowView/index.zh-CN.md @@ -7,7 +7,7 @@ group: order: 1 title: FlowView 基础画布容器 order: 1 -description: +description: 基础画布容器 --- ## default @@ -92,12 +92,12 @@ export enum SelectType { #### Connection -| 属性名 | 类型 | 描述 | 默认值 | 必选 | -| ------------ | ------- | ----- | -------------------- | ---- | --- | -| source | `string | null` | 来源节点 id | - | - | -| target | `string | null` | 目标节点 id | - | - | -| sourceHandle | `string | null` | 来源节点的 Handle id | - | - | -| targetHandle | `string | null` | 目标节点的 Handle id | - | - | +| 属性名 | 类型 | 描述 | 默认值 | 必选 | +| ------------ | ---------------- | -------------------- | ------ | ---- | +| source | `string \| null` | 来源节点 id | - | - | +| target | `string \| null` | 目标节点 id | - | - | +| sourceHandle | `string \| null` | 来源节点的 Handle id | - | - | +| targetHandle | `string \| null` | 目标节点的 Handle id | - | - | ### FlowViewEdge diff --git a/src/MiniMap/index.tsx b/src/MiniMap/index.tsx index db92792..1cc681e 100644 --- a/src/MiniMap/index.tsx +++ b/src/MiniMap/index.tsx @@ -4,7 +4,7 @@ import { createStyles } from 'antd-style'; import React from 'react'; import { Flexbox } from 'react-layout-kit'; import { MiniMap as FlowMiniMap, useReactFlow, useViewport } from 'reactflow'; -import { Language, MiniMapPosition } from '..'; +import { Language, MiniMapPosition } from '../constants'; const useStyles = createStyles(({ css, token }, props: { x: number; y: number }) => { const { x, y } = props; diff --git a/src/index.ts b/src/index.ts index 213079b..8d0e145 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,48 +1,35 @@ -import { +export { BaseEdge, - Connection, - EdgeChange, EdgeLabelRenderer, - EdgeProps, Handle, - NodeChange, Position, getBezierPath, getSmoothStepPath, } from 'reactflow'; - -export * from './Background'; export { default as Background } from './Background'; export { default as BasicNode } from './BasicNode'; export { default as CanvasLoading } from './CanvasLoading'; -export * from './ControlInput'; export { default as EditNode } from './EditNode'; export { default as EditableText } from './EditableText'; -export * from './FlowEditor'; -export * from './FlowPanel'; export { default as FlowPanel } from './FlowPanel'; -export { FlowStoreProvider, type FlowEditorStoreProviderProps } from './FlowStoreProvider'; +export { FlowStoreProvider } from './FlowStoreProvider'; export { default as FlowView } from './FlowView/FlowView'; export { useEdgesState, useNodesState } from './FlowView/hooks/useFlowState'; -export * from './FlowView/hooks/useFlowView'; -export * from './FlowView/provider/FlowViewProvider'; -export * from './Input'; export { default as Inspector } from './Inspector'; -export * from './MiniMap'; export { default as MiniMap } from './MiniMap'; export { NodeField, useNodeFieldStyles } from './NodeField'; -export type { ExtraAction } from './NodeField'; export { default as RadiusEdge } from './RadiusEdge'; + +export * from './Background'; +export * from './ControlInput'; +export * from './FlowEditor'; +export * from './FlowPanel'; +export * from './FlowView/hooks/useFlowView'; +export * from './FlowView/provider/FlowViewProvider'; +export * from './Input'; +export * from './MiniMap'; export * from './constants'; -export { - BaseEdge, - Connection, - EdgeChange, - EdgeLabelRenderer, - EdgeProps, - Handle, - NodeChange, - Position, - getBezierPath, - getSmoothStepPath, -}; + +export type { Connection, EdgeChange, EdgeProps, NodeChange } from 'reactflow'; +export type { FlowEditorStoreProviderProps } from './FlowStoreProvider'; +export type { ExtraAction } from './NodeField';