diff --git a/sites/x6-sites/.dumirc.ts b/sites/x6-sites/.dumirc.ts index 7646da0e5fa..743b10ef063 100644 --- a/sites/x6-sites/.dumirc.ts +++ b/sites/x6-sites/.dumirc.ts @@ -67,6 +67,14 @@ export default defineConfig({ }, order: 4, }, + { + slug: 'docs/xflow/guide/introduction.md', + title: { + zh: 'XFlow', + en: 'XFlow', + }, + order: 5, + }, ], detail: { engine: { @@ -248,6 +256,30 @@ export default defineConfig({ }, order: 4, }, + { + slug: 'xflow/guide', + title: { + zh: '开始', + en: 'start', + }, + order: 1, + }, + { + slug: 'xflow/components', + title: { + zh: '组件', + en: 'component', + }, + order: 2, + }, + { + slug: 'xflow/hooks', + title: { + zh: 'Hook', + en: 'Hook', + }, + order: 3, + }, ], examples: [ { diff --git a/sites/x6-sites/docs/xflow/components/background.md b/sites/x6-sites/docs/xflow/components/background.md new file mode 100644 index 00000000000..cf8196c4fc0 --- /dev/null +++ b/sites/x6-sites/docs/xflow/components/background.md @@ -0,0 +1,61 @@ +--- +title: Background 背景 +order: 3 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/components +--- + +画布的背景 + +## 基础用法 + +:::info{title="注意"} + + `` 组件只能在 `` 组件之内方可正常使用 + +::: + +引入 `` 组件后, 即可设置 `` 的画布背景。 + +```tsx + + ... + + +``` + +## 背景颜色 + +通过 `color` 属性指定画布的背景颜色 + + + +## 背景图片 + +添加 `image` 属性, 指定一张背景图设置为画布的背景图片 + + + +## 背景水印 + +将 `repeat` 属性 设置为 `watermark`, 则将背景图片设置为水印效果，可以使用 `angle` 属性控制水印旋转角度 + + + +## API + +### Background + +| 参数名 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| image | 背景图片URL | string | - | +| color | 背景颜色 支持所有 [CSS background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) 属性 | string | - | +| size | 背景图片大小 支持所有 [CSS background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) 属性| string | - | +| position| 背景图片位置 支持所有 [CSS background-position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) 属性 | string | `center` | +| repeat | 背景图片重复方式 支持所有 [CSS background-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) 属性 以及内置属性 `watermark` `flip-x` `flip-y` `flip-xy` | string| `no-repeat` | +| angle | 水印旋转角度 仅当 `repeat` 属性为 `watermark` 时有效 | number | 20 | +| opacity | 背景图片透明度 | number | 1 | +| quality | 背景图片质量 | number | 1 | + diff --git a/sites/x6-sites/docs/xflow/components/clipboard.md b/sites/x6-sites/docs/xflow/components/clipboard.md new file mode 100644 index 00000000000..21678c87fab --- /dev/null +++ b/sites/x6-sites/docs/xflow/components/clipboard.md @@ -0,0 +1,39 @@ +--- +title: Clipboard 复制粘贴 +order: 5 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/components +--- + +复制粘贴节点和边 + +## 基础用法 + +:::info{title="注意"} + + `` 组件只能在 `` 组件之内方可正常使用 + +::: + +在 XFlow 组件下引入该组件，即可使画布开启复制粘贴节点和边的能力 + +配合 [useClipboard](/xflow/hooks/use-clipboard) 可快速实现复制粘贴功能 + +```tsx + + ... + + +``` + + + +## API + +### Clipboard + +| 参数名 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| useLocalStorage| 开启后被复制的节点/边同时被保存到 `localStorage` 中，浏览器刷新或者关闭后重新打开，复制/粘贴也能正常工作 | boolean | `false` | diff --git a/sites/x6-sites/docs/xflow/components/control.md b/sites/x6-sites/docs/xflow/components/control.md new file mode 100644 index 00000000000..bf82361612c --- /dev/null +++ b/sites/x6-sites/docs/xflow/components/control.md @@ -0,0 +1,46 @@ +--- +title: Control 控制器 +order: 10 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/components +--- + +画布常用操作控制器 + +## 基础用法 + +:::info{title="注意"} + + `` 组件只能在 `` 组件之内方可正常使用 + +::: + +Control 组件对画布的常用操作提供了快捷方式 + +```tsx + + ... + + +``` + + + +## API + +### Control + +| 参数名 | 描述 | 类型 | 默认值 | +| ------ | ---- | ---- | ------ | +| items | 控制器展示的items | ControlAction[] | - | +| direction | 控制器展示的类型 | `horizontal` ｜ `vertical` | `horizontal` | +| placement | 控制器Tooltip展示的方向 | `top` ｜ `right` ｜ `bottom` ｜ `left` | `top` | + +ControlAction 的类型 +| 参数名 | 类型 | 默认值 | +| ------ | ---- | ------ | +| ControlAction | ("zoomTo" ｜ "zoomToFit" ｜ "zoomIn" ｜"zoomOut" ｜ "zoomToOrigin")[] | - | diff --git a/sites/x6-sites/docs/xflow/components/graph.md b/sites/x6-sites/docs/xflow/components/graph.md new file mode 100644 index 00000000000..c4360b32010 --- /dev/null +++ b/sites/x6-sites/docs/xflow/components/graph.md @@ -0,0 +1,324 @@ +--- +title: XFlowGraph 画布 +order: 2 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/components +--- + +XFlow画布组件 + +## 基础用法 + +:::info{title="注意"} + + `` 组件只能在 `` 组件之内方可正常使用 + +::: + +在 `` 下引入 `` 后, 其组件内部会将画布的实例保存到 `` 的 context 中，以供 `` 的 children 使用, 可以在组件中使用 [useGraphInstance](#基础用法) Hook 快速获取画布实例 + +```tsx + + ... + + + +``` + + + +画布默认拥有快捷键和框选功能 + +## 画布只读 + +禁止节点和边的交互 + +当 `readonly` 为 `false` 时候, 如果节点/边的 `draggable` 属性为 `true` 的时候, 则节点/边可以进行移动 + +```tsx + +``` + +## 画布缩放 + +- 画布的最小最大缩放级别 + +通过设置 `minScale` `maxScale` 来设置画布缩放 + +```tsx + +``` + +- 通过滚轮缩放画布 + +具体的 `zoomOptions` 配置 可以参考 [mousewheel 配置](/api/graph/mousewheel#配置) + +```tsx + +``` + +## 画布滚动 + +开启画布滚动功能 + +```tsx + +``` + +## 画布平移 + +开启 `pannable` 来支持画布拖拽平移, 通过 `panOptions` 来进行拖拽平移配置。 + +```tsx + +``` + +`panOptions` 的配置参数如下: + +| 参数名 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| modifiers | 配置修饰键, 需要按下修饰键并点击鼠标才能触发画布拖拽 | `string \| ('alt' \| 'ctrl' \| 'meta' \| 'shift')[] \| null` |-| +| eventTypes | 触发画布平移的交互方式 | `('leftMouseDown' \| 'rightMouseDown' \| 'mouseWheel', 'mouseWheelDown')[]`|-| + +拖拽可能和其他操作冲突，此时可以设置 `modifiers` 参数，设置修饰键后需要按下修饰键并点击鼠标才能触发画布拖拽。 + +`ModifierKey` 支持以下几种形式： + +- `alt` 表示按下 `alt`。 +- `[alt, ctrl]` 表示按下 `alt` 或 `ctrl`。 +- `alt|ctrl` 表示按下 `alt` 或 `ctrl`。 +- `alt&ctrl` 表示同时按下 `alt` 和 `ctrl`。 +- `alt|ctrl&shift` 表示同时按下 `alt` 和 `shift` 或者同时按下 `ctrl` 和 `shift`。 + +`eventTypes` 支持三种形式或者他们之间的组合： + +- `leftMouseDown`: 按下鼠标左键移动进行拖拽 +- `rightMouseDown`: 按下鼠标右键移动进行拖拽 +- `mouseWheel`: 使用鼠标滚轮滚动拖拽 +- `mouseWheelDown`: 按下鼠标滚轮进行拖拽 + +## 视口变换 + +- centerView 设置为 true 后, 画布的内容中心将和视口中心对齐, 可通过 `centerViewOptions` 来进行配置。 + +```tsx + +``` + +`centerViewOptions` 的配置参数如下: +| 参数名 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +|padding|边距，只在 `scroller` 画布中生效| number \| Padding | | -| +|useCellGeometry|是否通过节点/边的几何信息(Model)计算内容区域|boolean| `true` | + +- fitView 缩放画布内容，使画布内容充满视口, 可通过 `fitView` 来进行配置。 +`fitViewOptions` 的配置参数如下: + +| 参数名 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +|padding | 边距 | number \| `{ left: number, top: number, right: number, bottom: number }` | - | +|contentArea | 内容区域，默认获取画布内容区域 | `Rectangle.RectangleLike` | - | +|viewportArea | 视口区域，默认获取画布视口 |`Rectangle.RectangleLike` | - | +|scaleGrid | 修正缩放比例为 `scaleGrid` 的整倍数 | number | - | +|minScale | 最小缩放比例 | number | - | +|maxScale | 最大缩放比例 | number | - | +|minScaleX | X 轴方向的最小缩放比例 | number | - | +|maxScaleX | X 轴方向的最大缩放比例 | number | - | +|minScaleY | Y 轴方向的最小缩放比例 | number| - | +|maxScaleY | Y 轴方向的最大缩放比例 | number | - | +|preserveAspectRatio | 是否保持长宽比 | boolean | `false` | +|useCellGeometry | 是否使用节点/边的几何信息(Model)计算包围盒 | boolean | `true` | + +## 节点组合 + +将一个节点拖动到另一个节点中，使其成为另一节点的子节点 + +```tsx + true, + }} +/> +``` + +embedOptions 参数配置如下: + +| 参数名 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +|findParent| 在节点被移动时通过 `findParent` 指定的方法返回父节点。默认值为 |[findParent](/api/model/interaction#findparent)| `bbox` | +|frontOnly| 如果 `frontOnly` 为 `true` ，则只能嵌入显示在最前面的节点| boolean | true | +|validate|`validate` 为判断节点能否被嵌入父节点的函数| [validate](/api/model/interaction#validate) |`() => true`| + +## 节点移动范围 + +通过配置 `restrict` 来限制节点移动范围, 通过 restrictOptions 可以指定节点移动范围 + +```tsx + +``` + +restrictOptions 可以指定一个节点的移动范围, 如果没有设置，默认节点不能移动超出画布区域 + +```tsx +restrictOptions?: { + bound: + | Rectangle.RectangleLike + | ((arg: CellView | null) => Rectangle.RectangleLike | null); + }; +``` + +## 连线配置 + +配置 `connectionOptions` 可以实现连线交互, 具体的配置可以参考 [连线配置](/api/model/interaction#连线) + +```tsx + +``` + +注意: 与连线配置不同的是，如果你想要自定义新建的边的样式, 那么需要设置 `connectionEdgeOptions` 参数,而不是在 `connectionOptions` 中设置 `createEdge` + +```tsx +connectionEdgeOptions={{ + animated: true, + draggable: false, + selected: false, + attrs: { + line: { + stroke: 'rgb(72, 203, 164)', + strokeWidth: 2, + targetMarker: { + name: 'block', + width: 14, + height: 10, + }, + }, + }, + zIndex: 0, +}} +``` + +connectionEdgeOptions 参数除了继承 [Edge](/api/model/edge#属性),还额外有 `selected` | `draggable` | `animated` 三个属性 + +```tsx +export interface EdgeOptions extends Edge.Metadata { + selected?: boolean; // 是否被选中 + draggable?: boolean; // 是否可拖拽 + animated?: boolean; // 是都展示动画 +} +``` + +## 交互高亮 + +指定触发某种交互时节点/边的高亮样式 + +HighlightManager.Options 有两个参数, `name` 以及其对应的 `args` , `name` 默认内置了两种高亮器，一种是 [stroke](/api/registry/highlighter#stroke)， 一种是 [className](/api/registry/highlighter#classname) + +注意：当 `embedHighlightOptions` `nodeAvailableHighlightOptions` `magnetAvailableHighlightOptions` `magnetAdsorbedHighlightOptions` 这几种高亮配置缺省时, 默认使用 `defaultHighlightOptions` 配置 + +```tsx +// stroke + + + +// className + +``` + +## API + +### XFlowGraph + +| 参数名 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| style | 语义化结构 style | CSSProperties | - | +| classNames | 语义化结构 class | string | - | +| readonly | 禁止画布交互 | boolean | false | +| virtual | 是否只渲染可视区域内容 | boolean | false | +| minScale | 画布的最小缩放级别 | number | 0.01| +| maxScale | 画布的最大缩放级别 ｜ number | 16 | +| zoomable |是否启用了鼠标滚轮来缩放画布 | boolean | false | +| zoomOptions | 启用鼠标滚轮缩放画布的配置 | [Omit](/api/graph/mousewheel#配置) | - | +| pannable | 是否开启画布平移交互 | boolean | false | +| panOptions | 开启画布平移交互的配置 | [panOptions](#panOptions-配置参数) | - | +| centerView | 将画布内容中心与视口中心对齐 | boolean | false | +| centerViewOptions | 将画布内容中心与视口中心对齐配置 | [centerViewOptions](#centerViewOptions-配置参数) | - | +| fitView | 缩放画布内容，使画布内容充满视口 | boolean | false | +| fitViewOptions | 缩放画布内容配置 | [fitViewOptions](#fitViewOptions-配置参数) | - | +| scroller |是否开启滚动画布功能|boolean| false | +| scrollerOptions|开启滚动画布功能的配置| [scrollerOptions](/tutorial/plugins/scroller#选项) |-| +| connectionOptions | 连线配置 | [Omit](/api/model/interaction#连线) | -| +| connectionEdgeOptions | 连线选项中的自定义边 | [EdgeOptions](#connectionEdgeOptions) | - | +| embedable | 是否允许节点之间组合 | boolean | false | +| embedOptions | 节点组合配置 | [embedOptions](#embedOptions-参数配置) | - | +| restrict | 是否限制节点的移动范围 | boolean | false | +| restrictOptions | 限制节点移动范围配置 | [restrict配置](#restrictOptions-节点的移动范围) | - | +| selectOptions | 框选配置 | [Selection配置](/tutorial/plugins/selection#配置) | - | +| keyboardOptions | 快捷键配置 | [Keyboard配置](/tutorial/plugins/keyboard#配置) | - | +| defaultHighlightOptions | 默认高亮选项，当以下高亮配置缺省时被使用 | [HighlightManager.Options](#高亮-HighlightManager.Options) | - | +| embedHighlightOptions | 拖动节点进行嵌入操作过程中，节点可以被嵌入时被使用 |[HighlightManager.Options](#高亮-HighlightManager.Options) | - | +| nodeAvailableHighlightOptions | 连线过程中，节点可以被链接时被使用 |[HighlightManager.Options](#高亮-HighlightManager.Options) | - | +| magnetAvailableHighlightOptions | 连线过程中，连接桩可以被链接时被使用 |[HighlightManager.Options](#高亮-HighlightManager.Options) | - | +| magnetAdsorbedHighlightOptions | 连线过程中，自动吸附到连接桩时被使用 |[HighlightManager.Options](#高亮-HighlightManager.Options) | - | diff --git a/sites/x6-sites/docs/xflow/components/grid.md b/sites/x6-sites/docs/xflow/components/grid.md new file mode 100644 index 00000000000..1c98a21ae58 --- /dev/null +++ b/sites/x6-sites/docs/xflow/components/grid.md @@ -0,0 +1,78 @@ +--- +title: Grid 网格 +order: 4 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/components +--- + +画布的网格 + +## 基础用法 + +:::info{title="注意"} + + `` 组件只能在 `` 组件之内方可正常使用 + +::: + +引入 `` 组件后, 即可设置 `` 的画布网格 + +```tsx + + ... + + +``` + +## 网格大小 + +通过设置 `size` 属性可以控制网格大小,网格默认大小为 10px，渲染节点时表示以 10 为最小单位对齐到网格，如位置为 { x: 24, y: 38 }的节点渲染到画布后的实际位置为 { x: 20, y: 40 }， 移动节点时表示每次移动最小距离为 10px。 + +## 网格隐藏 + +添加 `visible` 属性即可让网格处于隐藏状态 + +## 点状网格 + +`type` 属性为 `dot` 的点状网格, 通过 `options` 属性来设置网格颜色和宽度 + + + +## 固定网点大小的点状网格 + +`type` 属性为 `fixedDot` 的固定网点大小的点状网格类型, 通过 `options` 属性来设置网格颜色和宽度。 +注意： 当画布的缩放比例小于 1 时，网点大小随着画布缩放比例缩放，当画布缩放比例大于 1 时，网点大小为给定的 thickness 的值。 + + + +## 网状网格 + +`type` 属性为 `mesh` 的网状网格, 通过 `options` 属性来设置网格颜色和宽度 + + + +## 双线网状网格 + +`type` 属性为 `doubleMesh` 的双网线网格, 通过 `options` 属性来设置主次网格线的颜色和宽度 + + +## API + +### Grid + +| 参数名 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| visible | 网格是否显示 | boolean | `true` | +| size | 网格大小 | number | 10 | +| type | 网格类型 | `dot` \| `fixedDot` \| `mesh` \| `doubleMesh` | - | +| options | 网格类型对应的网格参数 | [args](#options-对应的-args-参数如下) \| [args](#options-对应的-args-参数如下)[] | - | + +

options 对应的 args 参数如下:

+ +| 参数名 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +|color | 网格线颜色 | string | - | +|thickness | 网格线宽度或网点大小 | string | -| +|factor |主次网格线间隔, 仅在 `type` 类型为 `doubleMesh` 时生效 |number | - | diff --git a/sites/x6-sites/docs/xflow/components/history.md b/sites/x6-sites/docs/xflow/components/history.md new file mode 100644 index 00000000000..45cc67cf35d --- /dev/null +++ b/sites/x6-sites/docs/xflow/components/history.md @@ -0,0 +1,35 @@ +--- +title: History 撤销重做 +order: 6 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/components +--- + +元素操作的撤销与重做 + +## 基础用法 + +:::info{title="注意"} + + `` 组件只能在 `` 组件之内方可正常使用 + +::: + +引入 `History` 组件, 配合 [useHistory](/xflow/hooks/use-history) 可快速实现元素操作的撤销与重做功能 + +```tsx + + ... + + +``` + + + +## API + +### History + +详细配置请参考 [X6 配置](/tutorial/plugins/history#配置) diff --git a/sites/x6-sites/docs/xflow/components/minimap.md b/sites/x6-sites/docs/xflow/components/minimap.md new file mode 100644 index 00000000000..06729f1045d --- /dev/null +++ b/sites/x6-sites/docs/xflow/components/minimap.md @@ -0,0 +1,47 @@ +--- +title: Minimap 小地图 +order: 7 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/components +--- + +画布小地图 + +## 基础用法 + +:::info{title="注意"} + + `` 组件只能在 `` 组件之内方可正常使用 + +::: + +引入 `Minimap` 组件, 可快速实现画布的小地图功能 + +```tsx + + ... + + +``` + + + +## API + +### Minimap + +| 参数名 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| style | 语义化结构 style | CSSProperties | - | +| classNames | 语义化结构 class | string | - | +| simple|是否展示简单试图|boolean|`false`| +| simpleNodeBackground|简单视图下的节点背景色|string|-| +| minScale|最小缩放比例|number |`0.01` | +|maxScale|最大缩放比例|number |`16` | +|width|小地图的宽度|number|`300`| +|height|小地图的高度 |number|`200`| +|padding|小地图容器的 padding 边距|number|`10`| +|scalable|是否可缩放 |boolean|`true`| +|graphOptions|创建小地图 Graph 的选项|Graph.Options|`null`| diff --git a/sites/x6-sites/docs/xflow/components/snapline.md b/sites/x6-sites/docs/xflow/components/snapline.md new file mode 100644 index 00000000000..18414de2b9e --- /dev/null +++ b/sites/x6-sites/docs/xflow/components/snapline.md @@ -0,0 +1,35 @@ +--- +title: Snapline 对齐线 +order: 8 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/components +--- + +画布对齐线, 移动节点排版的辅助工具 + +## 基础用法 + +:::info{title="注意"} + + `` 组件只能在 `` 组件之内方可正常使用 + +::: + +引入 `` 后, 即可开启节点对齐辅助线 + +```tsx + + ... + + +``` + + + +## API + +### Snapline + +详细配置请参考 [Snapline 配置](/tutorial/plugins/snapline#配置) diff --git a/sites/x6-sites/docs/xflow/components/transform.md b/sites/x6-sites/docs/xflow/components/transform.md new file mode 100644 index 00000000000..f3a8f5504a1 --- /dev/null +++ b/sites/x6-sites/docs/xflow/components/transform.md @@ -0,0 +1,40 @@ +--- +title: Transform 图形变换 +order: 9 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/components +--- + +调整节点大小和节点旋转角度 + +## 基础用法 + +:::info{title="注意"} + + `` 组件只能在 `` 组件之内方可正常使用 + +::: + +使用 `` 组件 开启调整节点能力 + +```tsx + + ... + + +``` + +Transform 组件的 `resizing` 和 `rotating` 属性设置为 `true` ，即可开启调整节点大小及旋转角度, 也可以对 `resizing` 和 `rotating` 属性进行配置 + + + +## API + +### Transform + +| 参数名 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +|resizing|调整节点尺寸配置| [Transform.Resizing](/tutorial/plugins/transform#调整尺寸) \| `boolean` | - | +|rotating|调整节点角度配置| [Transform.Rotating](/tutorial/plugins/transform#调整角度) \| `boolean` | - | diff --git a/sites/x6-sites/docs/xflow/components/wrapper.md b/sites/x6-sites/docs/xflow/components/wrapper.md new file mode 100644 index 00000000000..2dd5f12d161 --- /dev/null +++ b/sites/x6-sites/docs/xflow/components/wrapper.md @@ -0,0 +1,26 @@ +--- +title: Wrapper 包裹组件 +order: 1 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/components +--- + +画布包裹组件, 只有当画布实例存在的时候，才去渲染 `children` + +## 基础用法 + +```tsx + + {children} + +``` + +## API + +### Wrapper + +| 参数名 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| children| 渲染元素 | ReactNode | - | diff --git a/sites/x6-sites/docs/xflow/components/xflow.md b/sites/x6-sites/docs/xflow/components/xflow.md new file mode 100644 index 00000000000..4facca55dde --- /dev/null +++ b/sites/x6-sites/docs/xflow/components/xflow.md @@ -0,0 +1,26 @@ +--- +title: XFlow 根组件 +order: 0 +redirect_from: +- /zh/docs +- /zh/docs/xflow +- /zh/docs/xflow/components +--- + +XFlow 的根组件，提供画布消费上下文的默认环境。 + +## 基础用法 + +```tsx + + {children} + +``` + +## API + +### XFlow + +| 参数名 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| children| 渲染元素 | ReactNode | - | diff --git a/sites/x6-sites/docs/xflow/guide/introduction.md b/sites/x6-sites/docs/xflow/guide/introduction.md new file mode 100644 index 00000000000..2c4221f2a8b --- /dev/null +++ b/sites/x6-sites/docs/xflow/guide/introduction.md @@ -0,0 +1,48 @@ +--- +title: 简介 +order: 0 +redirect\_from: + - /zh/docs + - /zh/docs/tutorial + +--- + +:::info{title="你正在阅读的是 XFlow 2.0 的文档"} + +- XFlow 1.x 将于 2023 年 12 月 31 日停止维护。详见 [XFlow 1.x 教程](https://xflow.antv.vision/zh-CN/docs/tutorial/intro/about) + +::: + +## 什么是 XFlow + +XFlow 是基于 X6 图编辑引擎、面向 React 技术栈用户的应用级解决方案, 像使用 React 组件一样开发图编辑应用，帮助你高效地开发用户界面。无论是简单还是复杂的界面，XFlow 都可以胜任 + +## XFlow 特性 + +🚀 极简易用: 没有复杂概念，像使用 React 组件 一样使用 +🛠️ 配套齐全: 内置常用图编辑配套组件 +📦 开箱即用: 上层提供 DAG 图、ER 图、流程图等成熟解决方案 + +## 如何交流 + +如果您有任何的问题、建议、反馈或者交流意愿，可以通过如下方式联系我们： + +- 官方推荐: [GitHub issues](https://github.com/antvis/XFlow/issues/new/choose) +- 邮件： +- 语雀专栏： + + + XFlow 图可视化交流群 + + +## 如何参与贡献 + +如果您在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/x6/issues) 看看有没有类似的 bug 或者建议。 + +在你报告一个 bug 之前，请先确保已经搜索过已有的 issue 和阅读了我们的 [FAQ]("/xflow/faq")。 + +如需提交代码，请遵从我们的[贡献指南](https://github.com/antvis/X6/blob/master/CONTRIBUTING.zh-CN.md)。 + + + Contributors + diff --git a/sites/x6-sites/docs/xflow/guide/quick-start.md b/sites/x6-sites/docs/xflow/guide/quick-start.md new file mode 100644 index 00000000000..1bda6aab3e2 --- /dev/null +++ b/sites/x6-sites/docs/xflow/guide/quick-start.md @@ -0,0 +1,52 @@ +--- +title: 快速上手 +order: 1 +redirect_from: + - /zh/docs + - /zh/docs/tutorial + - /zh/docs/tutorial/basic +--- + +# 安装 + +:::info{title="前提条件"} + +- 熟悉命令行 +- 已安装 18.0 或更高版本的 Node.js + +::: + +## 通过包管理器 + +```bash [NPM] +# 使用 npm +$ npm install @antv/xflow --save + +# 使用yarn +$ yarn add @antv/xflow + +# 使用pnpm +$ pnpm add @antv/xflow +``` + +## 通过 CDN + +你可以借助 script 标签直接通过 CDN 来使用 XFlow： + +```html + +``` + +这里我们使用了 [unpkg](https://unpkg.com/@antv/xflow/dist/index.umd.js)，但你也可以使用任何提供 npm 包服务的 CDN，例如 [jsdelivr](https://cdn.jsdelivr.net/npm/@antv/xflow/dist/index.umd.js)。当然你也可以下载此文件并自行提供服务。 + +对于生产环境, 我们推荐使用一个明确的版本号, 以避免新版本升级造成不可预期的破坏, 例如： + +- + +- + +# 基础使用 + +接下来我们就一起使用 XFlow 来构建一个简单的图形应用，来体验一下 XFlow 的魅力吧。 + + \ No newline at end of file diff --git a/sites/x6-sites/docs/xflow/hooks/useClipboard.md b/sites/x6-sites/docs/xflow/hooks/useClipboard.md new file mode 100644 index 00000000000..43edfbae4c0 --- /dev/null +++ b/sites/x6-sites/docs/xflow/hooks/useClipboard.md @@ -0,0 +1,56 @@ +--- +title: useClipboard +order: 4 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/hooks +--- + +用于复制粘贴节点和边的 Hook + +## 基础用法 + +```tsx + const { copy, paste, cut } = useClipboard(); +``` + +## API + +```tsx + +const { + copy: (ids, copyOptions) => void, + paste: (ids, cutOptions) => void, + cut: (pasteOptions) => void +} = useClipboard(); + +``` + +## 返回值 + +| 参数 | 描述 | 类型 | +|--------|------|------| +| copy | 复制元素 | (ids: string[], copyOptions?: [CopyOptions](#CopyOptions-参数如下)) => void | +| paste | 渲染元素 | (ids: string[], cutOptions?: [CopyOptions](#CopyOptions-参数如下)) => void | +| cut | 渲染元素 | (pasteOptions?: [PasteOptions](#PasteOptions-参数如下)) => [Cell](/zh/docs/api/model/cell#属性)[] | + +

CopyOptions 参数如下

+ +| 参数 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| deep | 是否递归复制所有子节点/边。 | `boolean` | - | +| useLocalStorage | 是否将复制的节点/边保存在 `localStorage` 中 | `boolean` | - | + +

PasteOptions 参数如下

+ +| 参数 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| offset | 粘贴到画布的节点/边的偏移量 | `number` \| `{ dx: number; dy: number }` | 20 | +| useLocalStorage | 是否使用 `localStorage` 中的节点/边 | `boolean` | - | +| nodeProps | 粘贴到画布的节点的额外属性 | `Node.Properties` | - | +| edgeProps | 粘贴到画布的边的额外属性 | `Edge.Properties` | - | + +## 参数 + +无 diff --git a/sites/x6-sites/docs/xflow/hooks/useDnd.md b/sites/x6-sites/docs/xflow/hooks/useDnd.md new file mode 100644 index 00000000000..3ac9f585a96 --- /dev/null +++ b/sites/x6-sites/docs/xflow/hooks/useDnd.md @@ -0,0 +1,60 @@ +--- +title: useDnd +order: 3 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/hooks +--- + +快速实现节点拖拽的 Hook + +## 基础用法 + +```tsx + const { startDrag } = useDnd(); +``` + + + +## API + +```tsx + const { + startDrag: (n, e) => void + } = useDnd(options: Options); +``` + +## 返回值 + +| 参数 | 描述 | 类型 | 默认值 | +|--------|------|------|-----| +| startDrag | 拖拽节点函数 | (n: [NodeOptions](#use-dnd-startDrag-options), e: React.MouseEvent) => void |-| + +

NodeOptions 除了继承 Node 类型之外，还拥有两个属性

+ +Node相关文档请参考 [Node](/api/model/node) + +```tsx +interface NodeOptions extends Node { + selected?: boolean; // 是否被选中 + draggable?: boolean; // 是否可拖拽 +} +``` + +## 参数 + +| 参数 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| options| 拖拽配置 | [Options](#use-dnd-options) | - | + +使用 `useDnd` 进行拖拽的时候，可以对其进行配置 + +

Options 类型如下:

+ +| 参数 | 描述 | 类型 | 默认值 | +|--------|------|------|-----| +| scaled | 是否应该缩放拖动节点 | `boolean` | `false` | +| dndContainer | 如果设置 `dndContainer`，在 `dndContainer` 上放开鼠标不会放置节点，常用于 `dnd` 容器处于画布上面的场景 | `HTMLElement` | - | +| draggingContainer | 自定义拖拽画布容器 | `HTMLElement` | `document.body` | +| validateNode | 是否应该缩放拖动节点 | `(droppingNode: Node, options: ValidateNodeOptions) => boolean ｜ Promins` | - | diff --git a/sites/x6-sites/docs/xflow/hooks/useExport.md b/sites/x6-sites/docs/xflow/hooks/useExport.md new file mode 100644 index 00000000000..55741b938c8 --- /dev/null +++ b/sites/x6-sites/docs/xflow/hooks/useExport.md @@ -0,0 +1,40 @@ +--- +title: useExport +order: 5 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/hooks +--- + +画布内容通过图片形式导出的 Hook + +## 基础用法 + +```tsx + const { exportPNG, exportJPEG, exportSVG } = useExport(); +``` + +## API + +```tsx + +const { + exportPNG: (fileName, options) => void, + exportJPEG: (fileName, options) => void, + exportSVG: (fileName, options) => void +} = useExport(); + +``` + +## 返回值 + +| 参数 | 描述 | 类型 | 默认值 +|--------|------|------| ------| +| exportPNG | 导出PNG | (fileName:string, options: [Export.ToImageOptions]((/tutorial/plugins/export#graphexportsvg)) = {}) => void |`('chart', {}) => void`| +| exportJPEG | 导出JPEG | (fileName:string, options: [Export.ToImageOptions]((/tutorial/plugins/export#graphexportsvg)) = {}) => void |`('chart', {}) => void`| +| exportSVG | 导出SVG | (fileName:string, options: [Export.ToSVGOptions]((/tutorial/plugins/export#graphexportsvg)) = {}) => void |`('chart', {}) => void`| + +## 参数 + +无 diff --git a/sites/x6-sites/docs/xflow/hooks/useGraphEvent.md b/sites/x6-sites/docs/xflow/hooks/useGraphEvent.md new file mode 100644 index 00000000000..603f3e72e1a --- /dev/null +++ b/sites/x6-sites/docs/xflow/hooks/useGraphEvent.md @@ -0,0 +1,42 @@ +--- +title: useGraphEvent +order: 2 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/hooks +--- + +画布事件监听的 Hook + +## 基础用法 + +```tsx + useGraphEvent('blank:click', () => { ... }); +``` + +下面是使用 `useGraphEvent` 的简单示例 +监听节点点击事件，随机改变节点颜色 + + +## API + +```tsx + useGraphEvent( + name:T, + callback: (args: EventArgs[T]) => void +); +``` + +## 返回值 + +无 + +## 参数 + +具体监听的事件类型请参考 [X6-事件](/tutorial/basic/events) +| 参数 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| name| 监听的事件 | `T` | - | +| callback| 监听事件的回调 | `(args: EventArgs[T]) => void` | - | + diff --git a/sites/x6-sites/docs/xflow/hooks/useGraphInstance.md b/sites/x6-sites/docs/xflow/hooks/useGraphInstance.md new file mode 100644 index 00000000000..e2edf796550 --- /dev/null +++ b/sites/x6-sites/docs/xflow/hooks/useGraphInstance.md @@ -0,0 +1,34 @@ +--- +title: useGraphInstance +order: 0 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/hooks +--- + +用于获取画布实例的 Hook + +## 基础用法 + +```tsx + const graph = useGraphInstance(); +``` + +## API + +```tsx + + const graph: Graph = useGraphInstance() + +``` + +## 返回值 + +| 参数 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| graph | 画布实例 | `Graph` | `null` | + +## 参数 + +无 diff --git a/sites/x6-sites/docs/xflow/hooks/useGraphStore.md b/sites/x6-sites/docs/xflow/hooks/useGraphStore.md new file mode 100644 index 00000000000..34e7cb06144 --- /dev/null +++ b/sites/x6-sites/docs/xflow/hooks/useGraphStore.md @@ -0,0 +1,56 @@ +--- +title: useGraphStore +order: 1 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/hooks +--- + +获取当前画布 store 以及改变 store 的 Hook + +## 基础用法 + +```tsx + const nodes = useGraphStore((state) => state.nodes); +``` + +使用 `useGraphStore` 可以方便的对画布的数据进行增删改查 +下面是使用 `useGraphStore` 添加节点和删除节点的简单示例 + + +## API + +```tsx + + useGraphStore(selector: (state: U) => T): U + +``` + +## 返回值 + +| 参数 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| `U` | 画布store的action | [Options](#Options-参数如下) | - | + +## 参数 + +| 参数 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| selector| 获取store的action的函数 | (state: [Options](#Options-参数如下)) => [Options](#Options-参数如下) | - | + +

Options 参数如下

+ +| 参数 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| nodes | 画布所有节点 | [NodeOptions](/api/model/node)[] | - | +| edges | 画布所有边 | [EdgeOptions](/api/model/edge)[] | - | +| changeList | store操作记录 | (`init` \| `addNodes` \| `removeNodes` \| `updateNode` \| `addEdges` \| `removeEdges` \| `updateEdge` )[] | - | +| initData | 初始化数据 | `(data: {nodes: NodeOptions[], edges: EdgeOptions[] }, options?: {silent?: boolean}) => void` | - | +| addNodes | 添加节点 | `(ns: NodeOptions[], options?: {silent?: boolean}) => void` | - | +| removeNodes | 移除节点 | `(ids: string[], options?: {silent?: boolean}) => void` | - | +| updateNode | 更新节点 | `(id: string, data: UpdateNodeDataOrFn, options?: {silent?: boolean}) => void` | - | +| addEdges | 添加边 | `(es: EdgeOptions[], options?: {silent?: boolean}) => void` | - | +| removeEdges | 移除边 | `(ids: string[], options?: {silent?: boolean}) => void` | - | +| updateEdge | 更新边 | `(id: string, data: UpdateEdgeDataOrFn, options?: {silent?: boolean}) => void` | - | +| clearChangeList | 情况操作记录 | `() => void` | - | diff --git a/sites/x6-sites/docs/xflow/hooks/useHistory.md b/sites/x6-sites/docs/xflow/hooks/useHistory.md new file mode 100644 index 00000000000..e559820714d --- /dev/null +++ b/sites/x6-sites/docs/xflow/hooks/useHistory.md @@ -0,0 +1,42 @@ +--- +title: useHistory +order: 6 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/hooks +--- + +用于实现画布历史记录的 Hook + +## 基础用法 + +```tsx + const { undo, redo, canUndo, canRedo } = useHistory(); +``` + +## API + +```tsx + +const { + undo: (options) => Graph | null, + redo: (options) => Graph | null, + canUndo: boolean, + canRedo: boolean +} = useHistory(); + +``` + +## 返回值 + +| 参数 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| undo| 撤销 `options` 将被传递到事件回调中 | `(options?: KeyValue) => Graph` \| `null` | - | +| redo| 重做 `options` 将被传递到事件回调中| `(options?: KeyValue) => Graph` \| `null` | - | +| canUndo| 是否可以撤销 | `boolean` | `false` | +| canRedo| 是否可以重做 | `boolean` | `false` | + +## 参数 + +无 diff --git a/sites/x6-sites/docs/xflow/hooks/useKeyboard.md b/sites/x6-sites/docs/xflow/hooks/useKeyboard.md new file mode 100644 index 00000000000..231dccc242b --- /dev/null +++ b/sites/x6-sites/docs/xflow/hooks/useKeyboard.md @@ -0,0 +1,46 @@ +--- +title: useKeyboard +order: 7 +redirect_from: + - /zh/docs + - /zh/docs/xflow + - /zh/docs/xflow/hooks +--- + +实现画布快捷键的 Hook + +## 基础用法 + +```tsx + useKeyboard('ctrl+c', () => { ... }); +``` + +下面是使用 `useKeyboard` 的简单示例 +`Ctrl + C` 复制节点 +`Ctrl + V` 粘贴节点 + + + +## API + +```tsx + +useKeyboard( + key: string | string[], + callback: (e) => void, + action?: 'keypress' | 'keydown' | 'keyup' +) + +``` + +## 返回值 + +无 + +## 参数 + +| 参数 | 描述 | 类型 | 默认值 | +|--------|------|------|-------| +| key | 绑定的快捷键 | `string` \| `string[]` | - | +| callback | 执行快捷键的回调 | `(e: KeyboardEvent) => void` | - | +| action | 触发类型 | `keypress` \| `keydown` \| `keyup` | - | diff --git a/sites/x6-sites/docs/xflow/store.md b/sites/x6-sites/docs/xflow/store.md new file mode 100644 index 00000000000..d41ef8e5476 --- /dev/null +++ b/sites/x6-sites/docs/xflow/store.md @@ -0,0 +1,88 @@ +--- +title: Store +order: 4 +redirect_from: + - /zh/docs + - /zh/docs/xflow +--- + +xflow 对画布的数据进行了统一的管理，整个画布的数据存在一个 `store` 中，这让开发变得非常容易 + +你可以使用 [useGraphStore]((/xflow/hooks/use-graph-store)) 方便快捷的操作 `store` , 从而更新画布数据, 实现更新画布 + +## 初始化状态 + +### `initData(data, options)` + +这个函数用于初始化状态管理器，设置初始的节点和边。 + +参数： + +- `data`：一个对象，包含`nodes`和`edges`两个数组，分别存储节点和边的数据。 +- `options`：一个可选的对象，当设置为`{ silent: true }`时，初始化的操作不会被记录在变动列表`changeList`中。 + +## 节点操作 + +### `addNodes(ns, options)` + +添加新的节点到状态管理器中。 + +参数： + +- `ns`：一个节点对象数组。 +- `options`：一个可选的对象。当`{ silent: true }`时，添加操作不会被记录在变动列表中。 + +### `removeNodes(ids, options)` + +通过ID数组移除节点。 + +参数： + +- `ids`：一个包含节点ID的数组。 +- `options`：一个可选的对象。当`{ silent: true }`时，移除操作不会被记录在变动列表中。 + +### `updateNode(id, data, options)` + +通过ID更新某个节点。不允许修改节点的`id`或`shape`属性。 + +参数： + +- `id`：要更新的节点的ID。 +- `data`：一个对象或者一个函数，包含要更新的数据。 +- `options`：一个可选的对象。当`{ silent: true }`时，更新操作不会被记录在变动列表中。 + +## 边操作 + +### `addEdges(es, options)` + +添加新的边到状态管理器中。 + +参数： + +- `es`：一个边对象数组。 +- `options`：一个可选的对象。当`{ silent: true }`时，添加操作不会被记录在变动列表中。 + +### `removeEdges(ids, options)` + +通过ID数组移除边。 + +参数： + +- `ids`：一个包含边ID的数组。 +- `options`：一个可选的对象。当`{ silent: true }`时，移除操作不会被记录在变动列表中。 + +### `updateEdge(id, data, options)` + +通过ID更新某个边。不允许修改边的`id`或`shape`属性。 + +参数： + +- `id`：要更新的边的ID。 +- `data`：一个对象或者一个函数，包含要更新的数据。 +- `options`：一个可选的对象。当`{ silent: true }`时，更新操作不会被记录在变动列表中。 + +## 变动列表操作 + +### `clearChangeList()` + +清空变动列表`changeList`，这个列表记录了所有非静默（非silent）的操作。 diff --git a/sites/x6-sites/package.json b/sites/x6-sites/package.json index 49956c53b25..dadaa8475bf 100644 --- a/sites/x6-sites/package.json +++ b/sites/x6-sites/package.json @@ -31,15 +31,16 @@ "@antv/x6-plugin-transform": "^2.x", "@antv/x6-react-components": "^2.x", "@antv/x6-react-shape": "^2.x", + "@antv/xflow": "^2.0.3", "antd": "^5.7.3", + "classnames": "^2.2.6", "dagre": "^0.8.5", "dumi": "^2.1.14", "elkjs": "^0.8.2", "highlight.js": "^10.1.2", "react": "^18.0.0", "react-dom": "^18.0.0", - "react-i18next": "^11.5.0", - "classnames": "^2.2.6" + "react-i18next": "^11.5.0" }, "repository": "https://github.com/antvis/x6" } diff --git a/sites/x6-sites/src/xflow/components/background/color/index.less b/sites/x6-sites/src/xflow/components/background/color/index.less new file mode 100644 index 00000000000..b7e2e89e600 --- /dev/null +++ b/sites/x6-sites/src/xflow/components/background/color/index.less @@ -0,0 +1,4 @@ +.xflow-background-color { + height: 388px; + padding: 16px; +} diff --git a/sites/x6-sites/src/xflow/components/background/color/index.tsx b/sites/x6-sites/src/xflow/components/background/color/index.tsx new file mode 100644 index 00000000000..d355a424d89 --- /dev/null +++ b/sites/x6-sites/src/xflow/components/background/color/index.tsx @@ -0,0 +1,16 @@ +import { XFlow, XFlowGraph, Background } from '@antv/xflow' +import React from 'react' +import './index.less' + +const Page = () => { + return ( +
+ + + + +
+ ) +} + +export default Page diff --git a/sites/x6-sites/src/xflow/components/background/image/index.less b/sites/x6-sites/src/xflow/components/background/image/index.less new file mode 100644 index 00000000000..5e3053e1648 --- /dev/null +++ b/sites/x6-sites/src/xflow/components/background/image/index.less @@ -0,0 +1,4 @@ +.xflow-background-image { + height: 388px; + padding: 16px; +} diff --git a/sites/x6-sites/src/xflow/components/background/image/index.tsx b/sites/x6-sites/src/xflow/components/background/image/index.tsx new file mode 100644 index 00000000000..33a71b36983 --- /dev/null +++ b/sites/x6-sites/src/xflow/components/background/image/index.tsx @@ -0,0 +1,19 @@ +import { XFlow, XFlowGraph, Background } from '@antv/xflow' +import React from 'react' +import './index.less' + +const bgImageDataURL = + 'data:image/png;base64,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' + +const Page = () => { + return ( +
+ + + + +
+ ) +} + +export default Page diff --git a/sites/x6-sites/src/xflow/components/background/node.tsx b/sites/x6-sites/src/xflow/components/background/node.tsx new file mode 100644 index 00000000000..0c6180944f3 --- /dev/null +++ b/sites/x6-sites/src/xflow/components/background/node.tsx @@ -0,0 +1,34 @@ +import { useGraphStore } from '@antv/xflow' +import { useCallback, useEffect } from 'react' + +export const InitNode = () => { + const addNodes = useGraphStore((state) => state.addNodes) + const addNodeInit = useCallback(() => { + addNodes([ + { + id: '1', + shape: 'rect', + x: 300, + y: 150, + width: 100, + height: 40, + attrs: { + body: { + stroke: '#8f8f8f', + strokeWidth: 1, + fill: '#fff', + rx: 6, + ry: 6, + }, + }, + label: '节点', + }, + ]) + }, [addNodes]) + + useEffect(() => { + addNodeInit() + }, [addNodeInit]) + + return null +} diff --git a/sites/x6-sites/src/xflow/components/background/watermark/index.less b/sites/x6-sites/src/xflow/components/background/watermark/index.less new file mode 100644 index 00000000000..e1a7bebe9f9 --- /dev/null +++ b/sites/x6-sites/src/xflow/components/background/watermark/index.less @@ -0,0 +1,4 @@ +.xflow-background-watermark { + height: 388px; + padding: 16px; +} diff --git a/sites/x6-sites/src/xflow/components/background/watermark/index.tsx b/sites/x6-sites/src/xflow/components/background/watermark/index.tsx new file mode 100644 index 00000000000..7f1b0b51f56 --- /dev/null +++ b/sites/x6-sites/src/xflow/components/background/watermark/index.tsx @@ -0,0 +1,24 @@ +import { XFlow, XFlowGraph, Background } from '@antv/xflow' +import React from 'react' +import './index.less' + +const bgImageDataURL = + 'data:image/png;base64,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' + +const Page = () => { + return ( +
+ + + + +
+ ) +} + +export default Page diff --git a/sites/x6-sites/src/xflow/components/clipboard/index.less b/sites/x6-sites/src/xflow/components/clipboard/index.less new file mode 100644 index 00000000000..ded92d31a64 --- /dev/null +++ b/sites/x6-sites/src/xflow/components/clipboard/index.less @@ -0,0 +1,10 @@ +.xflow-clipboard-content-setting { + flex-basis: 300px; + width: 300px; + height: 388px; +} + +.xflow-clipboard-content-graph { + flex: 1; + height: 388px; +} diff --git a/sites/x6-sites/src/xflow/components/clipboard/index.tsx b/sites/x6-sites/src/xflow/components/clipboard/index.tsx new file mode 100644 index 00000000000..a63213ab7a3 --- /dev/null +++ b/sites/x6-sites/src/xflow/components/clipboard/index.tsx @@ -0,0 +1,154 @@ +import { + XFlow, + XFlowGraph, + Background, + useGraphStore, + useClipboard, + Clipboard, +} from '@antv/xflow' +import React, { useEffect, useState, useCallback } from 'react' +import { Card, Row, Col, Slider, Checkbox, Button, Badge } from 'antd' +import './index.less' + +const Page = () => { + const [localStorage, setLocalStorage] = useState(true) + + return ( + + +
+ +
+
+ +
+ + + + + ) +} + +export default Page + +const Setting = (props) => { + const initData = useGraphStore((state) => state.initData) + + const setInitData = useCallback(() => { + initData({ + nodes: [ + { + id: '1', + x: 32, + y: 32, + width: 100, + height: 40, + label: 'Hello', + attrs: { + body: { + stroke: '#8f8f8f', + strokeWidth: 1, + fill: '#fff', + rx: 6, + ry: 6, + }, + }, + }, + { + id: '2', + shape: 'circle', + x: 160, + y: 180, + width: 60, + height: 60, + label: 'World', + attrs: { + body: { + stroke: '#8f8f8f', + strokeWidth: 1, + fill: '#fff', + }, + }, + }, + ], + edges: [ + { + source: '1', + target: '2', + attrs: { + line: { + stroke: '#8f8f8f', + strokeWidth: 1, + }, + }, + }, + ], + }) + }, [initData]) + + useEffect(() => { + setInitData() + }, [setInitData]) + const [offset, setOffset] = useState(30) + const nodes = useGraphStore((state) => state.nodes) + const { copy, paste } = useClipboard() + + const onCopy = () => { + const selected = nodes.filter((node) => node.selected) + const ids: string[] = selected.map((node) => node.id || '') + copy(ids) + } + + const onPaste = () => { + paste({ offset }) + } + + return ( +
+ + + Paste Offset + + + + + + + setOffset(value)} + /> + + + + + props.setLocalStorage(e.target.checked)} + > + useLocalStorage + + + + + + + + + + + + +
+ ) +} diff --git a/sites/x6-sites/src/xflow/components/control/index.less b/sites/x6-sites/src/xflow/components/control/index.less new file mode 100644 index 00000000000..06203404954 --- /dev/null +++ b/sites/x6-sites/src/xflow/components/control/index.less @@ -0,0 +1,10 @@ +.xflow-control-content-setting { + flex-basis: 300px; + width: 300px; + height: 420px; +} + +.xflow-control-content-graph { + flex: 1; + height: 420px; +} diff --git a/sites/x6-sites/src/xflow/components/control/index.tsx b/sites/x6-sites/src/xflow/components/control/index.tsx new file mode 100644 index 00000000000..916546bba89 --- /dev/null +++ b/sites/x6-sites/src/xflow/components/control/index.tsx @@ -0,0 +1,181 @@ +import { + XFlow, + XFlowGraph, + Background, + useGraphStore, + Control, +} from '@antv/xflow' +import React, { useEffect, useState, useCallback } from 'react' +import { Card, Row, Col, Segmented, Select } from 'antd' +import './index.less' + +const Page = () => { + const [options, setOptions] = useState({ + direction: 'horizontal' as const, + placement: 'top' as const, + items: ['zoomOut', 'zoomTo', 'zoomIn', 'zoomToFit', 'zoomToOrigin'] as ( + | 'zoomOut' + | 'zoomTo' + | 'zoomIn' + | 'zoomToFit' + | 'zoomToOrigin' + )[], + }) + + return ( + +
+ +
+ +
+
+ +
+ + +
+ +
+
+ + ) +} + +export default Page + +const Setting = ({ setOptions }) => { + const initData = useGraphStore((state) => state.initData) + + const setInitData = useCallback(() => { + initData({ + nodes: [ + { + id: '1', + x: 32, + y: 32, + width: 100, + height: 40, + label: 'Hello', + attrs: { + body: { + stroke: '#8f8f8f', + strokeWidth: 1, + fill: '#fff', + rx: 6, + ry: 6, + }, + }, + }, + { + id: '2', + shape: 'circle', + x: 160, + y: 180, + width: 60, + height: 60, + label: 'World', + attrs: { + body: { + stroke: '#8f8f8f', + strokeWidth: 1, + fill: '#fff', + }, + }, + }, + ], + edges: [ + { + source: '1', + target: '2', + attrs: { + line: { + stroke: '#8f8f8f', + strokeWidth: 1, + }, + }, + }, + ], + }) + }, [initData]) + + useEffect(() => { + setInitData() + }, [setInitData]) + + const controlItems = [ + 'zoomOut', + 'zoomTo', + 'zoomIn', + 'zoomToFit', + 'zoomToOrigin', + ] + const selectOptions = controlItems.map((item) => ({ + label: item, + value: item, + })) + + return ( +
+ + + + + setOptions((prev) => ({ ...prev, direction: value })) + } + /> + + + Tooltip + + + + setOptions((prev) => ({ ...prev, placement: value })) + } + /> + + + + Options + +