Skip to content

Commit

Permalink
fix: add createView options (#3075)
Browse files Browse the repository at this point in the history
  • Loading branch information
@NewByVector
NewByVector authored Dec 20, 2022
1 parent a98e97d commit 96010e3
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 144 deletions.
2 changes: 2 additions & 0 deletions packages/x6/src/graph/options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
29 changes: 19 additions & 10 deletions packages/x6/src/renderer/scheduler.ts
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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)
}

Expand Down
51 changes: 27 additions & 24 deletions sites/x6-sites/docs/api/graph/graph.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
---

## 配置
Expand All @@ -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 | | - | 是自定义元素的视图。 |
Loading

0 comments on commit 96010e3

Please sign in to comment.