Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Xflow #1591

Merged
merged 26 commits into from
Dec 16, 2024
Merged

Xflow #1591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
ba41627
fix:更新工具栏图标
Dec 5, 2024
0439a9a
Merge branch 'xflow' of https://github.com/alibaba/x-render into xflow
Dec 5, 2024
6011766
更换指针图标
Dec 5, 2024
e4e9f44
feat:工具栏新增禁用以及手模式和指针模式的选中样式
Dec 5, 2024
76932de
fix:条件节点更改为暴露{data,index}
Dec 9, 2024
0219408
fix:1.文字缩略气泡白底黑字 2.switchData改名为list
Dec 9, 2024
6fe577d
1.iconfont新增remove和运行图标 2.节点图标点击出现节点描述气泡
Dec 9, 2024
9cca384
feat:新增配置面板宽度配置：nodeConfigPanelWidth和configPanelWidth
Dec 9, 2024
d14868c
feat:条件内置节点，条件展示框，增加最大高度缩略展示
Dec 9, 2024
aaa650f
feat:两个节点连线之前的插入按钮配置化
Dec 10, 2024
eb5a0f8
feat:Icon兼容svg
Dec 11, 2024
72eeb9f
feat:新增画布全屏功能，所有的tooltip,popover,drawer需要挂载到父节点上，而不是body上面
Dec 13, 2024
7799ad9
feat：弹窗的描述内容改为可配置
Dec 13, 2024
c35bd43
fix:Icon兼容svg补充弹窗中的Icon
Dec 13, 2024
8b34f6d
chore: 优化 FlowProvider 组件和文档
youngjuning Dec 13, 2024
8fe3444
Merge branch 'xflow' of https://github.com/alibaba/x-render into xflow
youngjuning Dec 13, 2024
e8fa864
chore: 节点自动连线
youngjuning Dec 13, 2024
3404a27
chore: zoomIn、zoomOut、getZoom、setViewport、getViewport、fitView、setCent…
youngjuning Dec 16, 2024
13e3334
chore: 更新 FlowProvider 值
youngjuning Dec 16, 2024
6a2537b
chore: 解决添加节点跟手性能问题
youngjuning Dec 16, 2024
b6b81c8
feat: git pull
Dec 16, 2024
a7dba31
feat: git pull
Dec 16, 2024
2521810
feat: 兼容 antd4 版本样式
Dec 16, 2024
28f1c5d
feat: 兼容 antd4 版本样式
Dec 16, 2024
951ed7c
feat: 兼容 antd4 版本样式
Dec 16, 2024
709f02b
feat: 兼容 antd4 版本样式
Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 40 additions & 2 deletions docs/xflow/FlowProvider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,50 @@
---
order: 3
title: '多实例画布'
title: '<FlowProvider/>'
mobile: false
group:
title: 最佳展示
order: 4
---

# 基础交互
## 基础交互

`<FlowProvider/>` 组件是一个 Context Provider，使得在 `<XFlow/>` 组件之外访问流的内部状态成为可能。我们提供的 `useFlow()`、`useNodes()` 和 `useEdges()` 钩子依赖于这个组件才能工作。

<code src="./demo/flow-provider/index.tsx"></code>

## useFlow

`useFlow()` 钩子返回 XFlow 实例，包含了一些实用的内部方法。

- setNodes：设置节点
- addNodes：添加一个或多个节点
- setEdges：设置边
- addEdges：添加一个或多个边
- getNodes：获取节点数据
- getEdges：获取边数据
- toObject：将画布数据转换为对象返回
- zoomIn：放大画布
- zoomOut：缩小画布
- zoomTo：缩放画布
- getZoom：获取缩放比例
- setViewport：设置视口
- getViewport：获取视口
- fitView：适应画布
- setCenter：设置画布中心
- fitBounds：适应边界
- screenToFlowPosition：将屏幕坐标转换为画布坐标
- flowToScreenPosition：将画布坐标转换为屏幕坐标

## useNodes

`useFlow` 的 `getNodes` 是瞬时值。想要监听节点状态，请使用 `useNodes` 钩子来返回实时 nodes 状态。

## useEdges

`useFlow` 的 `getEdges` 是瞬时值。想要监听节点状态，请使用 `useEdges` 钩子来返回实时 edges 状态。

## 注意

- 如果你正在使用路由器并且希望流程的状态在不同路由之间保持持久，那么将 `<FlowProvider/>` 组件放置在路由器外部是至关重要的。
- 如果在同一页面上有多个 `<XFlow/>`，则需要为每个 `<XFlow/>` 使用单独的 `<FlowProvider/>`
44 changes: 24 additions & 20 deletions docs/xflow/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,16 @@ title: API

## XFlow

| 属性 | 描述 | 类型 | 默认值 |
| ------------- | ------------------------------------ | ----------------------------------------------------------- | ------ |
| initialValues | 初始的节点和边数据 | `{nodes:any[],edges:any[]}` | - | - |
| layout | 节点布局的方向 | `LR \| TB` | LR | - |
| widgets | 自定义组件 | `Record<string, ReactNode>` | - | - |
| settings | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] | |
| nodeSelector | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector`
| iconFontUrl | iconfont url，用于配置图标渲染 | `String` | |
| |
| 属性 | 描述 | 类型 | 默认值 |
| ----------------- | ------------------------------------------ | ----------------------------------------------------------- | ------ |
| initialValues | 初始的节点和边数据 | `{nodes:any[],edges:any[]}` | - | - |
| layout | 节点布局的方向 | `LR \| TB` | LR | - |
| widgets | 自定义组件 | `Record<string, ReactNode>` | - | - |
| settings | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] | |
| nodeSelector | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector` |
| iconFontUrl | iconfont url，用于配置图标渲染 | `String` | |
| configPanelWidth | 统一设置配置面板宽度 | `number` | 400 |
| hideLineInsertBtn | 是否隐藏两个节点之间，连线上的增加节点按钮 | `boolean` | false |

### TNodeGroup

Expand All @@ -31,17 +32,20 @@ title: API

单个节点配置

| 属性 | 描述 | 类型 | 默认值 |
| ------------------ | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| title | 节点名称 | `string` | |
| type | 节点类型 | `string` | |
| hidden | 是否在配置面板中显示节点 | `boolean` | false |
| targetHandleHidden | 是否隐藏左侧输入连接头 | `boolean` | false |
| sourceHandleHidden | 是否隐藏右侧输出连接头 | `boolean` | false |
| icon | 节点的图标配置 | `{type:string;bgColor:string}` | |
| settingSchema | 节点的业务配置信息，详见[form-render 文档](/form-render/api-schema)。同时设置`settingSchema`和`settingWidget`只生效`settingWidget` | <a target="_blank" href="https://github.com/alibaba/x-render/blob/e2feff8fdb3bef5537b92a2157dbbf40b9d4eb17/packages/form-render/src/type.ts#L32">SchemaBase</a> | |
| settingWidget | 自定义节点的业务配置组件，在弹窗中展示。同时设置`settingSchema`和`settingWidget`只生效`settingWidget`。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
| nodeWidget | 自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
| 属性 | 描述 | 类型 | 默认值 |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| title | 节点名称 | `string` | |
| type | 节点类型 | `string` | |
| hidden | 是否在配置面板中显示节点 | `boolean` | false |
| hideDesc | 是否在配置面板中显示节点的描述信息 | `boolean` | false |
| targetHandleHidden | 是否隐藏左侧输入连接头 | `boolean` | false |
| sourceHandleHidden | 是否隐藏右侧输出连接头 | `boolean` | false |
| icon | 节点的图标配置 | `{type:string;bgColor:string}` | |
| iconSvg | 节点的图标配置Svg格式 | `SVGSVGElement` | |
| settingSchema | 节点的业务配置信息，详见[form-render 文档](/form-render/api-schema)。同时设置`settingSchema`和`settingWidget`只生效`settingWidget` | <a target="_blank" href="https://github.com/alibaba/x-render/blob/e2feff8fdb3bef5537b92a2157dbbf40b9d4eb17/packages/form-render/src/type.ts#L32">SchemaBase</a> | |
| settingWidget | 自定义节点的业务配置组件，在弹窗中展示。同时设置`settingSchema`和`settingWidget`只生效`settingWidget`。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
| nodeWidget | 自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
| nodeConfigPanelWidth | 单独设置节点配置面板宽度 | `string` | 400 |

## TNodeSelector

Expand Down
32 changes: 16 additions & 16 deletions docs/xflow/demo/flow-provider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import * as React from "react";

import XFlow, { FlowProvider, useNodes } from '@xrenders/xflow';
import { edges as initialEdges } from './edges';
Expand All @@ -7,18 +7,18 @@ import settings from './setting';

const App = () => {
return (
<FlowProvider>
<div style={{ height: '600px' }}>
<XFlow
initialValues={{ nodes: initialNodes, edges: initialEdges }}
settings={settings}
nodeSelector={{
showSearch: true,
}}
/>
</div>
<Sidebar />
</FlowProvider>
<FlowProvider>
<div style={{ height: '600px' }}>
<XFlow
initialValues={{ nodes: initialNodes, edges: initialEdges }}
settings={settings as any[]}
nodeSelector={{
showSearch: true,
}}
/>
</div>
<Sidebar />
</FlowProvider>
);
};

Expand All @@ -30,9 +30,9 @@ function Sidebar() {
return (
<aside>
{nodes?.map(node => (
<div key={node.id}>
Node {node.id} - x: {node.position.x.toFixed(2)}, y:{' '}
{node.position.y.toFixed(2)}
<div key={node?.id}>
Node {node?.id} - x: {node?.position?.x?.toFixed(2)}, y:{' '}
{node?.position?.y?.toFixed(2)}
</div>
))}
</aside>
Expand Down
4 changes: 2 additions & 2 deletions docs/xflow/demo/layout/TB/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,11 @@ export default () => {
<div style={{ height: '600px' }}>
<XFlow
initialValues={{ nodes, edges }}
settings={settings}
settings={settings as any}
nodeSelector={{
showSearch: true,
}}
layout="TB"
layout="LR"
/>
</div>
);
Expand Down
Loading
Loading