Compare commits
11 Commits
feat/vite
...
@antv/x6-r
| Author | SHA1 | Date | |
|---|---|---|---|
| 96010e3b52 | |||
| a98e97db11 | |||
| 30c2ed2655 | |||
| 3a020d17c3 | |||
| d8e1e637d8 | |||
| 2d04848d52 | |||
| e2bb71d954 | |||
| 8b145941ec | |||
| 2c7a04a6f4 | |||
| dfa8c492da | |||
| 3b668feb4e |
@ -13,6 +13,7 @@ Indomi <indomi126@gmail.com>
|
||||
James <san>
|
||||
Jógvan <lse>
|
||||
Ken <ei>
|
||||
Kent <oo>
|
||||
Limbo <49612796+JUST-Limbo@users.noreply.github.com>
|
||||
Lixu <37231473+wflixu@users.noreply.github.com>
|
||||
Lloyd <ho>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 12 MiB After Width: | Height: | Size: 12 MiB |
@ -1,3 +1,10 @@
|
||||
## @antv/x6-common [2.0.4](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.3...@antv/x6-common@2.0.4) (2022-12-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix window incompatibility problem ([#3070](https://github.com/antvis/x6/issues/3070)) ([d8e1e63](https://github.com/antvis/x6/commit/d8e1e637d8027b9494cd26efc87815d74bd51366))
|
||||
|
||||
## @antv/x6-common [2.0.1](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.0...@antv/x6-common@2.0.1) (2022-11-25)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-common",
|
||||
"version": "2.0.3",
|
||||
"version": "2.0.4",
|
||||
"description": "Basic toolkit for X6",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
// compatible with NodeList.prototype.forEach() before chrome 51
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
|
||||
if (window.NodeList && !NodeList.prototype.forEach) {
|
||||
if (
|
||||
typeof window === 'object' &&
|
||||
window.NodeList &&
|
||||
!NodeList.prototype.forEach
|
||||
) {
|
||||
NodeList.prototype.forEach = Array.prototype.forEach as any
|
||||
}
|
||||
|
||||
|
||||
@ -26,10 +26,7 @@ export class ReactShapeView extends NodeView<ReactShape> {
|
||||
const node = this.cell
|
||||
|
||||
if (container) {
|
||||
const graph = node.model ? node.model.graph : null
|
||||
// Actually in the dnd plugin, this graph is empty,
|
||||
// in order to make the external perception type of graph is a graph, rather than graph | null, so hack this.
|
||||
const elem = React.createElement(Wrap, { node, graph: graph! })
|
||||
const elem = React.createElement(Wrap, { node, graph: this.graph })
|
||||
if (Portal.isActive()) {
|
||||
const portal = createPortal(elem, container) as ReactPortal
|
||||
Portal.connect(this.cell.id, portal)
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { defineComponent, h, reactive, isVue3, Vue } from 'vue-demi'
|
||||
import { Graph } from '@antv/x6'
|
||||
import { VueShape } from './node'
|
||||
|
||||
let active = false
|
||||
@ -9,6 +10,7 @@ export function connect(
|
||||
component: any,
|
||||
container: HTMLDivElement,
|
||||
node: VueShape,
|
||||
graph: Graph,
|
||||
) {
|
||||
if (active) {
|
||||
const { Teleport, markRaw } = Vue as any
|
||||
@ -17,6 +19,7 @@ export function connect(
|
||||
render: () => h(Teleport, { to: container } as any, [h(component)]),
|
||||
provide: () => ({
|
||||
getNode: () => node,
|
||||
getGraph: () => graph,
|
||||
}),
|
||||
}),
|
||||
)
|
||||
|
||||
@ -40,12 +40,13 @@ export class VueShapeView extends NodeView<VueShape> {
|
||||
provide() {
|
||||
return {
|
||||
getNode: () => node,
|
||||
getGraph: () => this.graph,
|
||||
}
|
||||
},
|
||||
})
|
||||
} else if (isVue3) {
|
||||
if (isActive()) {
|
||||
connect(this.targetId(), component, root, node)
|
||||
connect(this.targetId(), component, root, node, this.graph)
|
||||
} else {
|
||||
this.vm = createApp({
|
||||
render() {
|
||||
@ -54,6 +55,7 @@ export class VueShapeView extends NodeView<VueShape> {
|
||||
provide() {
|
||||
return {
|
||||
getNode: () => node,
|
||||
getGraph: () => this.graph,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@ -1,3 +1,11 @@
|
||||
## @antv/x6 [2.1.1](https://github.com/antvis/x6/compare/@antv/x6@2.1.0...@antv/x6@2.1.1) (2022-12-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* arrowhead not get options bug ([#3065](https://github.com/antvis/x6/issues/3065)) ([3b668fe](https://github.com/antvis/x6/commit/3b668feb4eac47994f52d0cc977d22a8a2c06acd))
|
||||
* set snapToGrid to false by default ([#3066](https://github.com/antvis/x6/issues/3066)) ([e2bb71d](https://github.com/antvis/x6/commit/e2bb71d95484b29187fafca97f1a386e9b984095))
|
||||
|
||||
# @antv/x6 [2.1.0](https://github.com/antvis/x6/compare/@antv/x6@2.0.9...@antv/x6@2.1.0) (2022-12-19)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6",
|
||||
"version": "2.1.0",
|
||||
"version": "2.1.1",
|
||||
"description": "JavaScript diagramming library that uses SVG and HTML for rendering",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -55,6 +55,8 @@ export namespace Options {
|
||||
|
||||
onPortRendered?: (args: OnPortRenderedArgs) => void
|
||||
onEdgeLabelRendered?: (args: OnEdgeLabelRenderedArgs) => void
|
||||
|
||||
createCellView?: (this: Graph, cell: Cell) => CellView | null | undefined
|
||||
}
|
||||
|
||||
export interface ManualBooleans {
|
||||
|
||||
@ -265,6 +265,32 @@ function findRoute(
|
||||
return null
|
||||
}
|
||||
|
||||
function snap(vertices: Point[], gridSize = 10) {
|
||||
if (vertices.length <= 1) {
|
||||
return vertices
|
||||
}
|
||||
|
||||
for (let i = 0, len = vertices.length; i < len - 1; i += 1) {
|
||||
const first = vertices[i]
|
||||
const second = vertices[i + 1]
|
||||
if (first.x === second.x) {
|
||||
const x = gridSize * Math.round(first.x / gridSize)
|
||||
if (first.x !== x) {
|
||||
first.x = x
|
||||
second.x = x
|
||||
}
|
||||
} else if (first.y === second.y) {
|
||||
const y = gridSize * Math.round(first.y / gridSize)
|
||||
if (first.y !== y) {
|
||||
first.y = y
|
||||
second.y = y
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return vertices
|
||||
}
|
||||
|
||||
export const router: Router.Definition<ManhattanRouterOptions> = function (
|
||||
vertices,
|
||||
optionsRaw,
|
||||
@ -282,7 +308,7 @@ export const router: Router.Definition<ManhattanRouterOptions> = function (
|
||||
)
|
||||
|
||||
const oldVertices = vertices.map((p) => Point.create(p))
|
||||
let newVertices: Point[] = []
|
||||
const newVertices: Point[] = []
|
||||
|
||||
// The origin of first route's grid, does not need snapping
|
||||
let tailPoint = sourceEndpoint
|
||||
@ -351,10 +377,7 @@ export const router: Router.Definition<ManhattanRouterOptions> = function (
|
||||
}
|
||||
|
||||
if (options.snapToGrid) {
|
||||
newVertices = newVertices.map((vertice) => {
|
||||
const gridSize = edgeView.graph.grid.getGridSize()
|
||||
return vertice.snapToGrid(gridSize)
|
||||
})
|
||||
return snap(newVertices, edgeView.graph.grid.getGridSize())
|
||||
}
|
||||
|
||||
return newVertices
|
||||
|
||||
@ -74,6 +74,7 @@ class Arrowhead extends ToolsView.ToolItem<EdgeView, Arrowhead.Options> {
|
||||
x: coords.x,
|
||||
y: coords.y,
|
||||
options: {
|
||||
...this.options,
|
||||
toolId: this.cid,
|
||||
},
|
||||
})
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { KeyValue, Dom, Disposable } from '@antv/x6-common'
|
||||
import { KeyValue, Dom, Disposable, FunctionExt } from '@antv/x6-common'
|
||||
import { Rectangle } from '@antv/x6-geometry'
|
||||
import { Model, Cell } from '../model'
|
||||
import { View, CellView, NodeView, EdgeView } from '../view'
|
||||
@ -181,13 +181,15 @@ export class Scheduler extends Disposable {
|
||||
}
|
||||
}
|
||||
|
||||
this.requestViewUpdate(
|
||||
viewItem.view,
|
||||
flag,
|
||||
options,
|
||||
cell.isNode() ? JOB_PRIORITY.RenderNode : JOB_PRIORITY.RenderEdge,
|
||||
false,
|
||||
)
|
||||
if (viewItem) {
|
||||
this.requestViewUpdate(
|
||||
viewItem.view,
|
||||
flag,
|
||||
options,
|
||||
cell.isNode() ? JOB_PRIORITY.RenderNode : JOB_PRIORITY.RenderEdge,
|
||||
false,
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
this.flush()
|
||||
@ -375,15 +377,22 @@ export class Scheduler extends Disposable {
|
||||
}
|
||||
|
||||
protected createCellView(cell: Cell) {
|
||||
const options = { graph: this.graph }
|
||||
const createViewHook = this.graph.options.createCellView
|
||||
if (createViewHook) {
|
||||
const ret = FunctionExt.call(createViewHook, this.graph, cell)
|
||||
if (ret || ret === null) {
|
||||
return ret
|
||||
}
|
||||
}
|
||||
|
||||
const view = cell.view
|
||||
const options = { graph: this.graph }
|
||||
|
||||
if (view != null && typeof view === 'string') {
|
||||
const def = CellView.registry.get(view)
|
||||
if (def) {
|
||||
return new def(cell, options) // eslint-disable-line new-cap
|
||||
}
|
||||
|
||||
return CellView.registry.onNotFound(view)
|
||||
}
|
||||
|
||||
|
||||
@ -847,7 +847,6 @@ export class NodeView<
|
||||
) {
|
||||
this.graph.model.startBatch('add-edge')
|
||||
const edgeView = this.createEdgeFromMagnet(magnet, x, y)
|
||||
edgeView.notifyMouseDown(e, x, y) // backwards compatibility events
|
||||
edgeView.setEventData(
|
||||
e,
|
||||
edgeView.prepareArrowheadDragging('target', {
|
||||
@ -858,6 +857,7 @@ export class NodeView<
|
||||
}),
|
||||
)
|
||||
this.setEventData<Partial<EventData.Magnet>>(e, { edgeView })
|
||||
edgeView.notifyMouseDown(e, x, y)
|
||||
}
|
||||
|
||||
protected getDefaultEdge(sourceView: CellView, sourceMagnet: Element) {
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
title: Graph
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /zh/docs
|
||||
- /zh/docs/api
|
||||
- /zh/docs/api/graph
|
||||
+ /zh/docs
|
||||
+ /zh/docs/api
|
||||
+ /zh/docs/api/graph
|
||||
---
|
||||
|
||||
## 配置
|
||||
@ -15,24 +15,27 @@ new Graph(options: Options)
|
||||
|
||||
| 选项 | 类型 | 必选 | 默认值 | 描述 |
|
||||
| ------------------------------------------------------------------------------ | ------------------------------ | :--: | ------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
|
||||
| [container](#container) | HTMLElement | ✓ | | 画布的容器。 |
|
||||
| [width](#width) | number | | `undefined` | 画布宽度，默认使用容器宽度。 |
|
||||
| [height](#height) | number | | `undefined` | 画布高度，默认使用容器高度。 |
|
||||
| [autoResize](#autoresize) | boolean \| Element \| Document | | `false` | 是否监听容器大小改变，并自动更新画布大小。默认监听画布容器，也可以指定监听的元素，如 `Document`。 |
|
||||
| [panning](/zh/docs/api/graph/panning) | object | | { enabled: false, eventTypes: ['leftMouseDown'],} | 画布是否可以拖动 |
|
||||
| [grid](/zh/docs/api/graph/grid) | boolean \| number \| object | | `false` | 网格，默认使用 `10px` 的网格，但不绘制网格背景。 |
|
||||
| [background](/zh/docs/api/graph/background) | false \| object | | `false` | 背景，默认不绘制背景。 |
|
||||
| [mousewheel](/zh/docs/api/graph/mousewheel) | boolean \| object | | `false` | 鼠标滚轮缩放，默认禁用。 |
|
||||
| [translating](/zh/docs/api/graph/transform#translating) | object | | object | 平移节点。 |
|
||||
| [embedding](/zh/docs/api/graph/interaction#embedding) | boolean \| object | | `false` | 嵌套节点，默认禁用。 |
|
||||
| [connecting](/zh/docs/api/graph/interaction#connecting) | object | | object | 连线选项。 |
|
||||
| [highlighting](/zh/docs/api/graph/interaction#highlighting) | object | | object | 高亮选项。 |
|
||||
| [interacting](/zh/docs/api/graph/interaction#interacting) | object \| function | | `{ edgeLabelMovable: false }` | 定制节点和边的交互行为。 |
|
||||
| [magnetThreshold](/zh/docs/api/graph/view#magnetThreshold) | number \| 'onleave' | | `0` | 鼠标移动多少次后才触发连线，或者设置为 `'onleave'` 时表示鼠标移出元素时才触发连线。 |
|
||||
| [moveThreshold](/zh/docs/api/graph/view#moveThreshold) | number | | `0` | 触发 `'mousemove'` 事件之前，允许鼠标移动的次数。 |
|
||||
| [clickThreshold](/zh/docs/api/graph/view#clickThreshold) | number | | `0` | 当鼠标移动次数超过指定的数字时，将不触发鼠标点击事件。 |
|
||||
| [preventDefaultContextMenu](/zh/docs/api/graph/view#preventDefaultContextMenu) | boolean | | `true` | 是否禁用浏览器默认右键菜单。 |
|
||||
| [preventDefaultBlankAction](/zh/docs/api/graph/view#preventDefaultBlankAction) | boolean | | `true` | 在画布空白位置响应鼠标事件时，是否禁用鼠标默认行为。 |
|
||||
| [guard](/zh/docs/api/graph/view#guard) | function | | `() => false` | 返回是否应该忽略某个鼠标事件，返回 `true` 时忽略指定的鼠标事件。 |
|
||||
| [async](/zh/docs/api/graph/view#async) | boolean | | `true` | 是否异步渲染 |
|
||||
| [virtual](/zh/docs/api/graph/view#virtual) | boolean | | `false` | 是否只渲染可视区域内容 |
|
||||
| containers | HTMLElement | ✓ | | 画布的容器。 |
|
||||
| width | number | | - | 画布宽度，默认使用容器宽度。 |
|
||||
| height | number | | - | 画布高度，默认使用容器高度。 |
|
||||
| scaling | { min?: number, max?: number } | | { min: 0.01, max: 16 } | 画布的最小最大缩放级别。 |
|
||||
| [autoResize](/zh/docs/tutorial/basic/graph#画布大小) | boolean \| Element \| Document | | `false` | 是否监听容器大小改变，并自动更新画布大小。 |
|
||||
| [panning](/zh/docs/api/graph/panning) | boolean \| `PanningManager.Options` | | `false` | 画布是否可以拖拽平移，默认禁用。 |
|
||||
| [mousewheel](/zh/docs/api/graph/mousewheel) | boolean \| `MouseWheel.Options` | | `false` | 鼠标滚轮缩放，默认禁用。 |
|
||||
| [grid](/zh/docs/api/graph/grid) | boolean \| number \| `GridManager.Options` | | `false` | 网格，默认使用 `10px` 的网格，但不绘制网格背景。 |
|
||||
| [background](/zh/docs/api/graph/background) | false \| `BackgroundManager.Options` | | `false` | 背景，默认不绘制背景。 |
|
||||
| [translating](/zh/docs/api/interacting/interaction#trasnlating) | `Translating.Options` | | { restrict: false } | 限制节点移动。 |
|
||||
| [embedding](/zh/docs/api/interacting/interaction#embedding) | boolean \| `Embedding.Options` | | `false` | 嵌套节点，默认禁用。 |
|
||||
| [connecting](/zh/docs/api/interacting/interaction#connecting) | `Connecting.Options` | | { snap: false, ... } | 连线选项。 |
|
||||
| [highlighting](/zh/docs/api/interacting/interaction#highlighting) | `Highlighting.Options` | | {...} | 高亮选项。 |
|
||||
| [interacting](/zh/docs/api/interacting/interaction#interacting) | `Interacting.Options` | | { edgeLabelMovable: false } | 定制节点和边的交互行为。 |
|
||||
| [magnetThreshold](/zh/docs/api/graph/view#magnetthreshold) | number \| 'onleave' | | `0` | 鼠标移动多少次后才触发连线，或者设置为 `'onleave'` 时表示鼠标移出元素时才触发连线。 |
|
||||
| [moveThreshold](/zh/docs/api/graph/view#movethreshold) | number | | `0` | 触发 `'mousemove'` 事件之前，允许鼠标移动的次数。 |
|
||||
| [clickThreshold](/zh/docs/api/graph/view#clickthreshold) | number | | `0` | 当鼠标移动次数超过指定的数字时，将不触发鼠标点击事件。 |
|
||||
| [preventDefaultContextMenu](/zh/docs/api/graph/view#preventdefaultcontextmenu) | boolean | | `true` | 是否禁用浏览器默认右键菜单。 |
|
||||
| [preventDefaultBlankAction](/zh/docs/api/graph/view#preventdefaultblankaction) | boolean | | `true` | 在画布空白位置响应鼠标事件时，是否禁用鼠标默认行为。 |
|
||||
| [async](/zh/docs/api/graph/view#async) | boolean | | `true` | 是否异步渲染 |
|
||||
| [virtual](/zh/docs/api/graph/view#virtual) | boolean | | `false` | 是否只渲染可视区域内容 |
|
||||
| [onPortRendered](/zh/docs/api/graph/view#onportrendered) | (args: OnPortRenderedArgs) => void | | - | 当某个连接桩渲染完成时触发的回调。 |
|
||||
| [onEdgeLabelRendered](/zh/docs/api/graph/view#onedgelabelrendered) | (args: OnEdgeLabelRenderedArgs) => void | | - | 当边的文本标签渲染完成时触发的回调。 |
|
||||
| [createCellView](/zh/docs/api/graph/view#createcellview) | (this: Graph, cell: Cell) => CellView \| null \| undefined | | - | 是自定义元素的视图。 |
|
||||
|
||||
@ -10,10 +10,14 @@ redirect_from:
|
||||
|
||||
### async
|
||||
|
||||
是否是异步渲染的画布。异步渲染不会阻塞 UI，对需要添加大量节点和边时的性能提升非常明显。但需要注意的是，一些同步操作可能会出现意外结果，比如获取某个节点的视图、获取节点/边的包围盒等，因为这些同步操作触发时异步渲染可能并没有完成，此时只能通过监听 `render:done` 事件来确保所有变更都已经生效，然后在事件回调中进行这些操作。
|
||||
是否是异步渲染的画布。异步渲染不会阻塞 UI，对需要添加大量节点和边时的性能提升非常明显。但需要注意的是，一些同步操作可能会出现意外结果，比如获取某个节点的视图、获取节点/边的包围盒等，因为这些同步操作触发时异步渲染可能并没有完成。
|
||||
|
||||
<!-- <iframe src="/demos/api/graph/async"></iframe> -->
|
||||
|
||||
### virtual
|
||||
|
||||
是否只渲染可视区域内的元素，默认为 `false`，如果设置为 `true`，首屏加载只会渲染当前可视区域内的元素，当拖动画布或者缩放画布时，会根据画布窗口大小自动加载剩余元素。在元素数量很大的场景，性能提升非常明显。
|
||||
|
||||
### magnetThreshold
|
||||
|
||||
鼠标移动多少次后才触发连线，或者设置为 'onleave' 时表示鼠标移出元素时才触发连线，默认为 `0`。
|
||||
@ -34,14 +38,6 @@ redirect_from:
|
||||
|
||||
在画布空白位置响应鼠标事件时，是否禁用鼠标默认行为，默认为 `true`。
|
||||
|
||||
### guard
|
||||
|
||||
```sign
|
||||
(e: Dom.EventObject, view?: CellView | null) => boolean
|
||||
```
|
||||
|
||||
是否应该忽略某个鼠标事件，返回 `true` 时忽略指定的鼠标事件，否则不忽略。
|
||||
|
||||
### onPortRendered
|
||||
|
||||
```sign
|
||||
@ -60,9 +56,7 @@ redirect_from:
|
||||
) => void
|
||||
```
|
||||
|
||||
当某个连接桩渲染完成时触发的回调。
|
||||
|
||||
<span class="tag-param">args 参数<span>
|
||||
当某个连接桩渲染完成时触发的回调,参数如下：
|
||||
|
||||
| 名称 | 类型 | 非空 | 描述 |
|
||||
| ---------------- | ---------------- | :--: | ---------------------------------------- |
|
||||
@ -75,7 +69,6 @@ redirect_from:
|
||||
| contentContainer | Element | ✓ | 连接桩内容的容器元素。 |
|
||||
| contentSelectors | Markup.Selectors | | 连接桩内容 Markup 渲染后的选择器键值对。 |
|
||||
|
||||
<span class="tag-example">使用<span>
|
||||
|
||||
例如，我们可以渲染一个 React 类型的连接桩。
|
||||
|
||||
@ -97,7 +90,7 @@ const graph = new Graph({
|
||||
});
|
||||
```
|
||||
|
||||
<iframe src="/demos/tutorial/advanced/react/react-port"></iframe>
|
||||
<!-- <iframe src="/demos/tutorial/advanced/react/react-port"></iframe> -->
|
||||
|
||||
### onEdgeLabelRendered
|
||||
|
||||
@ -113,9 +106,8 @@ const graph = new Graph({
|
||||
) => void
|
||||
```
|
||||
|
||||
当边的文本标签渲染完成时触发的回调。
|
||||
当边的文本标签渲染完成时触发的回调，参数如下：
|
||||
|
||||
<span class="tag-param">args 参数<span>
|
||||
|
||||
| 名称 | 类型 | 非空 | 描述 |
|
||||
| --------- | ---------------- | :--: | -------------------------------------- |
|
||||
@ -124,7 +116,6 @@ const graph = new Graph({
|
||||
| container | Element | ✓ | 文本标签容器。 |
|
||||
| selectors | Markup.Selectors | ✓ | 文本标签 Markup 渲染后的选择器键值对。 |
|
||||
|
||||
<span class="tag-example">使用<span>
|
||||
|
||||
例如，我们可以在标签上渲染任何想要的元素。
|
||||
|
||||
@ -164,7 +155,7 @@ const graph = new Graph({
|
||||
});
|
||||
```
|
||||
|
||||
<iframe src="/demos/tutorial/advanced/react/react-label-base"></iframe>
|
||||
<!-- <iframe src="/demos/tutorial/advanced/react/react-label-base"></iframe> -->
|
||||
|
||||
我们也可以在定义 Label 的 Markup 时添加 `<foreignObject>` 元素来支持 HTML 和 React 的渲染能力。
|
||||
|
||||
@ -185,72 +176,21 @@ const graph = new Graph({
|
||||
});
|
||||
```
|
||||
|
||||
<iframe src="/demos/tutorial/advanced/react/react-label-markup"></iframe>
|
||||
<!-- <iframe src="/demos/tutorial/advanced/react/react-label-markup"></iframe> -->
|
||||
|
||||
### onToolItemCreated
|
||||
### createCellView
|
||||
|
||||
```sign
|
||||
(
|
||||
this: Graph,
|
||||
args: {
|
||||
name: string
|
||||
cell: Cell
|
||||
view: CellView
|
||||
tool: View
|
||||
},
|
||||
) => void
|
||||
cell: Cell,
|
||||
) => CellView | null | undefined
|
||||
```
|
||||
|
||||
当工具项渲染完成时触发的回调。
|
||||
|
||||
<span class="tag-param">args 参数<span>
|
||||
|
||||
| 名称 | 类型 | 非空 | 描述 |
|
||||
| ---- | -------- | :--: | ------------- |
|
||||
| cell | Cell | ✓ | 节点/边实例。 |
|
||||
| view | CellView | ✓ | 节点/边视图。 |
|
||||
| name | string | ✓ | 工具项名称。 |
|
||||
| tool | View | ✓ | 工具视图。 |
|
||||
|
||||
<span class="tag-example">使用<span>
|
||||
|
||||
例如，我们为 `vertices` 工具设置间隔填充效果。
|
||||
|
||||
```ts
|
||||
const graph = new Graph({
|
||||
container: this.container,
|
||||
grid: true,
|
||||
onToolItemCreated({ name, cell, tool }) {
|
||||
if (name === "vertices" && cell === edge2) {
|
||||
const options = (tool as any).options;
|
||||
if (options && options.index % 2 === 1) {
|
||||
tool.setAttrs({ fill: "red" });
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
<iframe src="/demos/api/registry/edge-tool/vertices"></iframe>
|
||||
自定义元素的视图，可以返回一个 `CellView`，会替换默认的视图，如果返回 `null`，则不会渲染，如果返回 `undefined`，会按照默认方式渲染。
|
||||
|
||||
## 方法
|
||||
|
||||
### isAsync()
|
||||
|
||||
```sign
|
||||
isAsync(): boolean
|
||||
```
|
||||
|
||||
返回画布是否是异步渲染模式。异步渲染不会阻塞 UI，对需要添加大量节点和边时的性能提升非常明显，异步画布的使用细节请参考 [`async`](#async) 选项。
|
||||
|
||||
### isFrozen()
|
||||
|
||||
```sign
|
||||
isFrozen(): boolean
|
||||
```
|
||||
|
||||
返回[异步画布](#async)是否处于冻结状态。处于冻结状态的画布不会立即响应画布中节点和边的变更，直到调用 [`unfreeze(...)`](#unfreeze) 方法来解除冻结并重新渲染画布。
|
||||
|
||||
### findView(...)
|
||||
|
||||
```sign
|
||||
|
||||
@ -72,7 +72,7 @@ export interface Connecting {
|
||||
|
||||
### snap
|
||||
|
||||
当 `snap` 设置为 `true` 时连线的过程中距离节点或者连接桩 `50px` 时会触发自动吸附，可以通过配置 `radius` 属性自定义触发吸附的距离。当 `snap` 设置为 `false` 时不会触发自动吸附。默认值为 `false`。
|
||||
当 `snap` 设置为 `true` 时连线的过程中距离节点或者连接桩 `50px` 时会触发自动吸附，可以通过配置 `radius` 属性自定义触发吸附的距离。当 `snap` 设置为 `false` 时不会触发自动吸附。默认值为 `false` 。
|
||||
|
||||
```ts
|
||||
const graph = new Graph({
|
||||
@ -92,35 +92,35 @@ const graph = new Graph({
|
||||
|
||||
### allowBlank
|
||||
|
||||
是否允许连接到画布空白位置的点，默认为 `true`。
|
||||
是否允许连接到画布空白位置的点，默认为 `true` 。
|
||||
|
||||
### allowMulti
|
||||
|
||||
是否允许在相同的起始节点和终止之间创建多条边，默认为 `true`。当设置为 `false` 时，在起始和终止节点之间只允许创建一条边，当设置为 `'withPort'` 时，在起始和终止节点的相同连接桩之间只允许创建一条边（即，起始和终止节点之间可以创建多条边，但必须要要链接在不同的连接桩上）。
|
||||
是否允许在相同的起始节点和终止之间创建多条边，默认为 `true` 。当设置为 `false` 时，在起始和终止节点之间只允许创建一条边，当设置为 `'withPort'` 时，在起始和终止节点的相同连接桩之间只允许创建一条边（即，起始和终止节点之间可以创建多条边，但必须要要链接在不同的连接桩上）。
|
||||
|
||||
### allowLoop
|
||||
|
||||
是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 `true`。
|
||||
是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 `true` 。
|
||||
|
||||
### allowNode
|
||||
|
||||
是否允许边链接到节点（非节点上的连接桩），默认为 `true`。
|
||||
是否允许边链接到节点（非节点上的连接桩），默认为 `true` 。
|
||||
|
||||
### allowEdge
|
||||
|
||||
是否允许边链接到另一个边，默认为 `true`。
|
||||
是否允许边链接到另一个边，默认为 `true` 。
|
||||
|
||||
### allowPort
|
||||
|
||||
是否允许边链接到连接桩，默认为 `true`。
|
||||
是否允许边链接到连接桩，默认为 `true` 。
|
||||
|
||||
### highlight
|
||||
|
||||
拖动边时，是否高亮显示所有可用的连接桩或节点，默认值为 `false`。
|
||||
拖动边时，是否高亮显示所有可用的连接桩或节点，默认值为 `false` 。
|
||||
|
||||
### anchor
|
||||
|
||||
当连接到节点时，通过 [`anchor`](/zh/docs/api/registry/node-anchor) 来指定被连接的节点的锚点，默认值为 `center`。
|
||||
当连接到节点时，通过 [ `anchor` ](/zh/docs/api/registry/node-anchor) 来指定被连接的节点的锚点，默认值为 `center` 。
|
||||
|
||||
#### sourceAnchor
|
||||
|
||||
@ -132,7 +132,7 @@ const graph = new Graph({
|
||||
|
||||
### edgeAnchor
|
||||
|
||||
当连接到边时，通过 [`edgeAnchor`](/zh/docs/api/registry/edge-anchor) 来指定被连接的边的锚点，默认值为 `ratio`。
|
||||
当连接到边时，通过 [ `edgeAnchor` ](/zh/docs/api/registry/edge-anchor) 来指定被连接的边的锚点，默认值为 `ratio` 。
|
||||
|
||||
### sourceEdgeAnchor
|
||||
|
||||
@ -144,7 +144,7 @@ const graph = new Graph({
|
||||
|
||||
### connectionPoint
|
||||
|
||||
指定[连接点](/zh/docs/api/registry/connector)，默认值为 `boundary`。
|
||||
指定[连接点](/zh/docs/api/registry/connector)，默认值为 `boundary` 。
|
||||
|
||||
### sourceConnectionPoint
|
||||
|
||||
@ -156,11 +156,11 @@ const graph = new Graph({
|
||||
|
||||
#### router
|
||||
|
||||
[路由](/zh/docs/api/registry/router)将边的路径点 `vertices` 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 `normal`。
|
||||
[路由](/zh/docs/api/registry/router)将边的路径点 `vertices` 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 `normal` 。
|
||||
|
||||
### connector
|
||||
|
||||
[连接器](/zh/docs/api/registry/connector)将起点、路由返回的点、终点加工为 <path> 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 `normal`。
|
||||
[连接器](/zh/docs/api/registry/connector)将起点、路由返回的点、终点加工为 <path> 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 `normal` 。
|
||||
|
||||
### createEdge
|
||||
|
||||
@ -168,7 +168,7 @@ const graph = new Graph({
|
||||
|
||||
### validateMagnet
|
||||
|
||||
点击 `magnet` 时 根据 `validateMagnet` 返回值来判断是否新增边，触发时机是 `magnet` 被按下，如果返回 `false`，则没有任何反应，如果返回 `true`，会在当前 `magnet` 创建一条新的边。
|
||||
点击 `magnet` 时 根据 `validateMagnet` 返回值来判断是否新增边，触发时机是 `magnet` 被按下，如果返回 `false` ，则没有任何反应，如果返回 `true` ，会在当前 `magnet` 创建一条新的边。
|
||||
|
||||
```ts
|
||||
validateMagnet({ e, magnet, view, cell }) {
|
||||
@ -178,7 +178,7 @@ validateMagnet({ e, magnet, view, cell }) {
|
||||
|
||||
### validateConnection
|
||||
|
||||
在移动边的时候判断连接是否有效，如果返回 `false`，当鼠标放开的时候，不会连接到当前元素，否则会连接到当前元素。
|
||||
在移动边的时候判断连接是否有效，如果返回 `false` ，当鼠标放开的时候，不会连接到当前元素，否则会连接到当前元素。
|
||||
|
||||
```ts
|
||||
validateConnection({
|
||||
@ -200,7 +200,7 @@ validateConnection({
|
||||
|
||||
### validateEdge
|
||||
|
||||
当停止拖动边的时候根据 `validateEdge` 返回值来判断边是否生效，如果返回 `false`, 该边会被清除。
|
||||
当停止拖动边的时候根据 `validateEdge` 返回值来判断边是否生效，如果返回 `false` , 该边会被清除。
|
||||
|
||||
```ts
|
||||
validateEdge({ edge, type, previous }) {
|
||||
@ -240,19 +240,19 @@ export interface Embedding {
|
||||
|
||||
### enabled
|
||||
|
||||
是否允许节点之间嵌套，默认值为 `false`。
|
||||
是否允许节点之间嵌套，默认值为 `false` 。
|
||||
|
||||
### findParent
|
||||
|
||||
在节点被移动时通过 `findParent` 指定的方法返回父节点。默认值为 `bbox`。
|
||||
在节点被移动时通过 `findParent` 指定的方法返回父节点。默认值为 `bbox` 。
|
||||
|
||||
### frontOnly
|
||||
|
||||
如果 `frontOnly` 为 `true`，则只能嵌入显示在最前面的节点，默认值为 `true`。
|
||||
如果 `frontOnly` 为 `true` ，则只能嵌入显示在最前面的节点，默认值为 `true` 。
|
||||
|
||||
### validate
|
||||
|
||||
`validate` 为判断节点能否被嵌入父节点的函数，默认返回 `true`。
|
||||
`validate` 为判断节点能否被嵌入父节点的函数，默认返回 `true` 。
|
||||
|
||||
## interacting
|
||||
|
||||
@ -283,17 +283,17 @@ export type Interacting =
|
||||
| ((this: Graph, cellView: CellView) => InteractionMap | boolean);
|
||||
```
|
||||
|
||||
- `boolean` 节点或边是否可交互
|
||||
- `InteractionMap` 节点或边的交互细节，支持以下属性：
|
||||
- `'nodeMovable'` 节点是否可以被移动。
|
||||
- `'magnetConnectable'` 当在具有 `'magnet'` 属性的元素上按下鼠标开始拖动时，是否触发连线交互。
|
||||
- `'edgeMovable'` 边是否可以被移动。
|
||||
- `'edgeLabelMovable'` 边的标签是否可以被移动。
|
||||
- `'arrowheadMovable'` 边的起始/终止箭头是否可以被移动。
|
||||
- `'vertexMovable'` 边的路径点是否可以被移动。
|
||||
- `'vertexAddable'` 是否可以添加边的路径点。
|
||||
- `'vertexDeletable'` 边的路径点是否可以被删除。
|
||||
- `(this: Graph, cellView: CellView) => InteractionMap | boolean`
|
||||
* `boolean` 节点或边是否可交互
|
||||
* `InteractionMap` 节点或边的交互细节，支持以下属性：
|
||||
+ `'nodeMovable'` 节点是否可以被移动。
|
||||
+ `'magnetConnectable'` 当在具有 `'magnet'` 属性的元素上按下鼠标开始拖动时，是否触发连线交互。
|
||||
+ `'edgeMovable'` 边是否可以被移动。
|
||||
+ `'edgeLabelMovable'` 边的标签是否可以被移动。
|
||||
+ `'arrowheadMovable'` 边的起始/终止箭头是否可以被移动。
|
||||
+ `'vertexMovable'` 边的路径点是否可以被移动。
|
||||
+ `'vertexAddable'` 是否可以添加边的路径点。
|
||||
+ `'vertexDeletable'` 边的路径点是否可以被删除。
|
||||
* `(this: Graph, cellView: CellView) => InteractionMap | boolean`
|
||||
|
||||
```ts
|
||||
const graph = new Graph({
|
||||
@ -334,10 +334,41 @@ new Graph({
|
||||
|
||||
支持的 `highlighting` 配置项有：
|
||||
|
||||
- `'default'` 默认高亮选项，当以下几种高亮配置缺省时被使用。
|
||||
- `'embedding'` 拖动节点进行嵌入操作过程中，节点可以被嵌入时被使用。
|
||||
- `'nodeAvailable'` 连线过程中，节点可以被链接时被使用。
|
||||
- `'magnetAvailable'` 连线过程中，连接桩可以被链接时被使用。
|
||||
- `'magnetAdsorbed'` 连线过程中，自动吸附到连接桩时被使用。
|
||||
* `'default'` 默认高亮选项，当以下几种高亮配置缺省时被使用。
|
||||
* `'embedding'` 拖动节点进行嵌入操作过程中，节点可以被嵌入时被使用。
|
||||
* `'nodeAvailable'` 连线过程中，节点可以被链接时被使用。
|
||||
* `'magnetAvailable'` 连线过程中，连接桩可以被链接时被使用。
|
||||
* `'magnetAdsorbed'` 连线过程中，自动吸附到连接桩时被使用。
|
||||
|
||||
上面 `magnetAvailable.name` 其实是高亮器的名称，X6 内置了 `stroke` 和 `className` 两种高亮器，详细信息参考 [Highlighter](/zh/docs/api/registry/highlighter)
|
||||
|
||||
## trasnlating
|
||||
|
||||
可以在全局配置 `translating` 来限制节点的移动范围。
|
||||
|
||||
```ts
|
||||
const graph = new Graph({
|
||||
translating: {
|
||||
restrict: true,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### restrict
|
||||
|
||||
节点的可移动范围。支持以下两种方式：
|
||||
|
||||
* `boolean` 如果设置为 `true`, 节点不能移动超出画布区域
|
||||
* `Rectangle.RectangleLike | (arg: CellView) => Rectangle.RectangleLike` 指定一个节点的移动范围
|
||||
|
||||
```ts
|
||||
const graph = new Graph({
|
||||
translating: {
|
||||
restrict: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user