🐛 fix: vercel workflow, constants export. add CanvasLoading tips. (#73)

* 📝 feat: pressure test * fix: CI and vercel (#67) * 🐛 fix: src/index export * 🐛 fix: refact type export * 🐛 fix: ci --------- Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com> * fix(minimap): import Language from './constants' (#71) * 🐛 fix: src/index export * 🐛 fix: refact type export * 🐛 fix: ci * 🐛 fix: import --------- Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com> * 🐛 fix(flowview): flow view md (#72) Co-authored-by: liangchaofei <liangchaofei@liangchaofeideMacBook-Pro.local> * ✨ 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 <jiangchu.wzy@antgroup.com> Co-authored-by: curry <chaofei_liang@126.com> Co-authored-by: liangchaofei <liangchaofei@liangchaofeideMacBook-Pro.local> Co-authored-by: zhangqimeng <36561218+supuwoerc@users.noreply.github.com>
ant-design · Jan 4, 2024 · dbf9b07 · dbf9b07
1 parent 39927cd
commit dbf9b07
Show file tree

Hide file tree

Showing 12 changed files with 132 additions and 175 deletions.
diff --git a/docs/caseShow/demos/pressureTest.tsx 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 (
+    <div
+      style={{
+        width: '100%',
+        height: '800px',
+      }}
+    >
+      <FlowView minZoom={0.01} stepLessZooming={false} nodes={nodes} edges={edges}></FlowView>
+    </div>
+  );
+}
+
+export default App;
diff --git a/docs/caseShow/presureTest.md b/docs/caseShow/presureTest.md
@@ -0,0 +1,13 @@
+---
+nav: 案例展示
+order: 100
+group:
+  title: 压力测试
+  order: 1
+title: 1000节点
+description:
+---
+
+## Default
+
+<code src='./demos/pressureTest.tsx'></code>
diff --git 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<string, React.ComponentType<NodeProps>>` | 节点类型 | -    | -  |
-| edgeTypes  | `Record<string, React.ComponentType<EdgeProps>>` | 边缘类型 | -    | -  |
+| 属性名     | 类型                                             | 描述     | 默认值 | 必选 |
+| ---------- | ------------------------------------------------ | -------- | ------ | ---- |
+| nodes      | `FlowViewNode`                                   | 边数据   | -      | -    |
+| edges      | `FlowViewEdge`                                   | 节点数据 | -      | -    |
+| className  | `string`                                         | 边数据   | -      | -    |
+| style      | `CSSProperties`                                  | 节点数据 | -      | -    |
+| miniMap    | `boolean`                                        | 边数据   | -      | -    |
+| autoLayout | `boolean`                                        | 自动布局 | true   | -    |
+| background | `boolean`                                        | 节点数据 | -      | -    |
+| children   | `React.ReactNode`                                | 边数据   | -      | -    |
+| nodeTypes  | `Record<string, React.ComponentType<NodeProps>>` | 节点类型 | -      | -    |
+| edgeTypes  | `Record<string, React.ComponentType<EdgeProps>>` | 边缘类型 | -      | -    |
 
 ## 更多信息
 

diff --git 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
@@ -7,7 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 
 export default () => (
   <Flexbox gap={8}>
-    <CanvasLoading>
+    <CanvasLoading tip={'loading...'}>
       <Alert showIcon message={'hello'} description={'world'} />
       <Alert showIcon type={'error'} message={'hello'} description={'world'} />
       <Alert showIcon type={'success'} message={'hello'} description={'world'} />

diff --git a/src/CanvasLoading/index.md b/src/CanvasLoading/index.md
@@ -16,4 +16,6 @@ description:
 
 ## APIs
 
-<API></API>
+| 属性名 | 类型             | 描述           | 默认值        | 必选 |
+| ------ | ---------------- | -------------- | ------------- | ---- |
+| tip    | `string \| null` | 加载中提示文字 | 画布初始化... | 否   |
diff --git 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,18 +55,18 @@ const useStyles = createStyles(({ css, token }) => ({
 interface CanvasLoadingProps {
   children?: ReactNode;
   loading?: boolean;
+  tip?: string | null;
 }
 
-const CanvasLoading = memo<CanvasLoadingProps>(({ children, loading }) => {
+const CanvasLoading = memo<CanvasLoadingProps>(({ children, loading, tip = '画布初始化...' }) => {
   const { styles } = useStyles();
 
   const content = (
     <Center gap={12} className={styles.container}>
       <Center width={100} height={100}>
         <div className={styles.loader}></div>
       </Center>
-
-      <div className={styles.tip}>画布初始化...</div>
+      {!isNull(tip) && <div className={styles.tip}>{tip}</div>}
     </Center>
   );
 

diff --git a/src/FlowEditor/index.zh-CN.md b/src/FlowEditor/index.zh-CN.md
diff --git 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
@@ -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
@@ -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
@@ -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';