docs: fix a broken link in model.zh.md (#3275)

feat: refactor the virtual rendering logic

CONTRIBUTORS

@@ -8,6 +8,7 @@ Draco <Draco.coder@gmail.com>
 Eve-Sama <17764594863@163.com>
 Eve-Sama <948832626@qq.com>
 Gossypol <31892817+gossypol@users.noreply.github.com>
+HQidea <HQidea@users.noreply.github.com>
 ImgBotApp <ImgBotHelp@gmail.com>
 Indomi <indomi126@gmail.com>
 James Tsang <wtzeng1@gmail.com>
@@ -57,6 +58,8 @@ kelin.zrh <34393362+AricZhu@users.noreply.github.com>
 kingshuaishuai <ken.wang@mrs.ai>
 kio <1421104933@qq.com>
 lijing666 <lijing241@yeah.net>
+linkun <33945539+linkun-wang@users.noreply.github.com>
+linkun <linkun0922@163.com>
 lopn <lopnxrp@126.com>
 luchunwei <luchunwei@gmail.com>
 luzhuang <364439895@qq.com>
@@ -91,6 +94,7 @@ zdc1111 <39116292+zdc1111@users.noreply.github.com>
 小耀 <jinyue.gjy@antfin.com>
 崖 <bubkoo.wy@gmail.com>
 崖崖崖 <bubkoo.wy@gmail.com>
+张子睿 <411489774@qq.com>
 文瑀 <wenyu.jqq@antfin.com>
 映月 <38279397+orientMoon@users.noreply.github.com>
 杨凌 <89915256@qq.com>

examples/x6-example-features/CHANGELOG.md

@@ -1,3 +1,17 @@
+## @antv/x6-example-features [2.1.1](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.1.0...@antv/x6-example-features@2.1.1) (2023-02-18)
+
+
+### Bug Fixes
+
+* mindmap demo duplicate node id, close [#3256](https://github.com/antvis/X6/issues/3256) ([#3257](https://github.com/antvis/X6/issues/3257)) ([c510756](https://github.com/antvis/X6/commit/c510756fe4e96c8e7471c2fb558e6019ec69b057))
+
+# @antv/x6-example-features [2.1.0](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.3...@antv/x6-example-features@2.1.0) (2023-02-17)
+
+
+### Features
+
+* history add max stack size ([#3253](https://github.com/antvis/X6/issues/3253)) ([fba5310](https://github.com/antvis/X6/commit/fba531064ad8027c451a81b60d5efd7f7314a0fa))
+
 ## @antv/x6-example-features [2.0.2](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.1...@antv/x6-example-features@2.0.2) (2023-01-17)
 
 

examples/x6-example-features/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-example-features",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "scripts": {
     "start": "umi dev",
     "build": "umi build",

examples/x6-example-features/src/pages/case/mind.tsx

@@ -309,9 +309,14 @@ export default class Example extends React.Component {
       if (dataItem) {
         let item: MindMapData | null = null
         const length = dataItem.children ? dataItem.children.length : 0
+        let nid = `${id}-${length + 1}`
+        if (graph.hasCell(nid)) {
+          // 如果通过length + 1拼接出来的节点id在画布中存在了，就在id后面加上随机数
+          nid = nid + Math.random()
+        }
         if (type === 'topic') {
           item = {
-            id: `${id}-${length + 1}`,
+            id: nid,
             type: 'topic-branch',
             label: `分支主题${length + 1}`,
             width: 100,
@@ -319,7 +324,7 @@ export default class Example extends React.Component {
           }
         } else if (type === 'topic-branch') {
           item = {
-            id: `${id}-${length + 1}`,
+            id: nid,
             type: 'topic-child',
             label: `子主题${length + 1}`,
             width: 60,

examples/x6-example-features/src/pages/history/index.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { Graph } from '@antv/x6'
+import { Keyboard } from '@antv/x6-plugin-keyboard'
+import { Selection } from '@antv/x6-plugin-selection'
+import { History } from '@antv/x6-plugin-history'
+import '../index.less'
+
+export default class Example extends React.Component<
+  {},
+  { graph: Graph | undefined }
+> {
+  private container: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+      grid: true,
+    })
+
+    this.setState({ graph })
+
+    const selection = new Selection({ enabled: true })
+    const keyboard = new Keyboard({ enabled: true })
+    const history = new History({ enabled: true, stackSize: 5 })
+
+    graph.use(selection)
+    graph.use(keyboard)
+    graph.use(history)
+
+    graph.addNode({
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 40,
+      attrs: { label: { text: 'A' } },
+    })
+
+    graph.addNode({
+      x: 250,
+      y: 50,
+      width: 100,
+      height: 40,
+      attrs: { label: { text: 'B' } },
+    })
+
+    graph.addNode({
+      x: 350,
+      y: 150,
+      width: 100,
+      height: 40,
+      attrs: { label: { text: 'C' } },
+    })
+
+    keyboard.bindKey('backspace', () => {
+      graph.removeCells(selection.getSelectedCells())
+    })
+    keyboard.bindKey('command+z', () => {
+      this.undo()
+    })
+    keyboard.bindKey('command+shift+z', () => {
+      this.redo()
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  enablePlugins = () => {
+    const { graph } = this.state
+    graph?.enablePlugins('keyboard')
+  }
+
+  disablePlugins = () => {
+    const { graph } = this.state
+    graph?.disablePlugins('keyboard')
+  }
+
+  undo = () => {
+    const { graph } = this.state
+    const history = graph?.getPlugin('history') as History
+    history?.undo()
+  }
+
+  redo = () => {
+    const { graph } = this.state
+    const history = graph?.getPlugin('history') as History
+    history?.redo()
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+        <button onClick={this.enablePlugins}>enable</button>
+        <button onClick={this.disablePlugins}>disable</button>
+        <button onClick={this.undo}>undo</button>
+        <button onClick={this.redo}>redo</button>
+      </div>
+    )
+  }
+}

examples/x6-example-features/src/pages/index.tsx

@@ -179,6 +179,10 @@ const dataSource = [
     example: 'animation/transition',
     description: '动画',
   },
+  {
+    example: 'history',
+    description: '时光回溯',
+  },
 ].map((item, index) => ({ key: index, ...item }))
 
 const columns = [

packages/x6-common/CHANGELOG.md

@@ -1,3 +1,10 @@
+## @antv/x6-common [2.0.8](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.7...@antv/x6-common@2.0.8) (2023-02-18)
+
+
+### Bug Fixes
+
+* fix typo for dom event handlers ([#3255](https://github.com/antvis/x6/issues/3255)) ([9b4fa86](https://github.com/antvis/x6/commit/9b4fa86daa587fe8818f3615bc1e40738a0f2319))
+
 ## @antv/x6-common [2.0.6](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.5...@antv/x6-common@2.0.6) (2023-01-31)
 
 

packages/x6-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-common",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "Basic toolkit for X6",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-common/src/dom/event/types.ts

@@ -729,7 +729,7 @@ type TypeEventHandlersBase<TDelegateTarget, TData, TCurrentTarget, TTarget> = {
     TCurrentTarget,
     TTarget
   >]?:
-    | TypeEventHandler<TDelegateTarget, TData, TCurrentTarget, TTarget, TType>
+    | TypeEventHandler<TDelegateTarget, TData, TCurrentTarget, TTarget, string>
     | false
     | Record<string, unknown>
 }

packages/x6-common/src/function/function.ts

@@ -1,4 +1,4 @@
-export { debounce } from 'lodash-es'
+export { debounce, throttle } from 'lodash-es'
 
 type Fn = (...args: any[]) => any
 

packages/x6-plugin-history/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @antv/x6-plugin-history [2.2.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-history@2.1.3...@antv/x6-plugin-history@2.2.0) (2023-02-17)
+
+
+### Features
+
+* history add max stack size ([#3253](https://github.com/antvis/x6/issues/3253)) ([fba5310](https://github.com/antvis/x6/commit/fba531064ad8027c451a81b60d5efd7f7314a0fa))
+
 ## @antv/x6-plugin-history [2.1.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-history@2.1.2...@antv/x6-plugin-history@2.1.3) (2022-11-25)
 
 

packages/x6-plugin-history/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-plugin-history",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "history plugin for X6",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-plugin-history/src/index.ts

@@ -25,6 +25,7 @@ export class History
   protected batchLevel = 0
   protected lastBatchIndex = -1
   protected freezed = false
+  protected stackSize = 0 // 0: not limit
 
   protected readonly handlers: (<T extends History.ModelEvents>(
     event: T,
@@ -33,6 +34,8 @@ export class History
 
   constructor(options: History.Options) {
     super()
+    const { stackSize = 0 } = options
+    this.stackSize = stackSize
     this.options = Util.getOptions(options)
     this.validator = new History.Validator({
       history: this,
@@ -101,7 +104,7 @@ export class History
       const cmd = this.redoStack.pop()
       if (cmd) {
         this.applyCommand(cmd, options)
-        this.undoStack.push(cmd)
+        this.undoStackPush(cmd)
         this.notify('redo', cmd, options)
       }
     }
@@ -424,7 +427,7 @@ export class History
       const cmds = this.filterBatchCommand(this.batchCommands)
       if (cmds.length > 0) {
         this.redoStack = []
-        this.undoStack.push(cmds)
+        this.undoStackPush(cmds)
         this.consolidateCommands()
         this.notify('add', cmds, options)
       }
@@ -498,7 +501,7 @@ export class History
       this.lastBatchIndex = Math.max(this.lastBatchIndex, 0)
       this.emit('batch', { cmd, options })
     } else {
-      this.undoStack.push(cmd)
+      this.undoStackPush(cmd)
       this.consolidateCommands()
       this.notify('add', cmd, options)
     }
@@ -560,6 +563,17 @@ export class History
     this.undoStack.pop()
   }
 
+  protected undoStackPush(cmd: History.Commands) {
+    if (this.stackSize === 0) {
+      this.undoStack.push(cmd)
+      return
+    }
+    if (this.undoStack.length >= this.stackSize) {
+      this.undoStack.shift()
+    }
+    this.undoStack.push(cmd)
+  }
+
   @Basecoat.dispose()
   dispose() {
     this.validator.dispose()
@@ -614,7 +628,9 @@ export namespace History {
     cancelInvalid?: boolean
   }
 
-  export interface Options extends Partial<CommonOptions> {}
+  export interface Options extends Partial<CommonOptions> {
+    stackSize?: number
+  }
 
   interface Data {
     id?: string

packages/x6/src/graph/virtual-render.ts

@@ -3,7 +3,9 @@ import { Base } from './base'
 
 export class VirtualRenderManager extends Base {
   protected init() {
-    this.resetRenderArea = FunctionExt.debounce(this.resetRenderArea, 200)
+    this.resetRenderArea = FunctionExt.throttle(this.resetRenderArea, 200, {
+      leading: true,
+    })
     this.resetRenderArea()
     this.startListening()
   }

packages/x6/src/renderer/scheduler.ts

@@ -450,10 +450,12 @@ export class Scheduler extends Disposable {
     for (let i = 0, n = edges.length; i < n; i += 1) {
       const edge = edges[i]
       const viewItem = this.views[edge.id]
-      if (!viewItem) {
+      const edgeView = viewItem.view
+
+      if (!viewItem || !this.isViewMounted(edgeView)) {
         continue
       }
-      const edgeView = viewItem.view
+
       const flagLabels: FlagManager.Action[] = ['update']
       if (edge.getTargetCell() === cell) {
         flagLabels.push('target')
@@ -472,10 +474,33 @@ export class Scheduler extends Disposable {
   }
 
   protected isInRenderArea(view: CellView) {
-    return (
-      !this.renderArea ||
-      this.renderArea.isIntersectWithRect(view.cell.getBBox())
-    )
+    if (!this.renderArea) {
+      return true
+    }
+    if (view.isNodeView()) {
+      const node = view.cell
+      return this.renderArea.isIntersectWithRect(node.getBBox())
+    }
+    if (view.isEdgeView()) {
+      const edge = view.cell
+      const sourceCell = edge.getSourceCell()
+      const targetCell = edge.getTargetCell()
+      if (sourceCell) {
+        const sourceViewItem = this.views[sourceCell.id]
+        if (sourceViewItem && !this.isViewMounted(sourceViewItem.view)) {
+          return false
+        }
+      }
+
+      if (targetCell) {
+        const targetViewItem = this.views[targetCell.id]
+        if (targetViewItem && !this.isViewMounted(targetViewItem.view)) {
+          return false
+        }
+      }
+    }
+
+    return true
   }
 
   protected getRenderPriority(view: CellView) {

sites/x6-sites/CHANGELOG.md

@@ -1,3 +1,5 @@
+## @antv/x6-sites [1.5.2](https://github.com/antvis/x6/compare/@antv/x6-sites@1.5.1...@antv/x6-sites@1.5.2) (2023-02-18)
+
 # @antv/x6-sites [1.5.0](https://github.com/antvis/x6/compare/@antv/x6-sites@1.4.1...@antv/x6-sites@1.5.0) (2023-02-06)
 
 

sites/x6-sites/docs/api/model/labels.zh.md

@@ -499,7 +499,7 @@ function parseStringLabel(label: string): Label {
 
 ```ts
 Edge.config({
-  defaultlabel: {
+  defaultLabel: {
     markup: [
       {
         tagName: "rect",

sites/x6-sites/docs/api/model/model.zh.md

@@ -716,7 +716,7 @@ toJSON(options?: ToJSONOptions): object
 
 | 名称         | 类型 | 必选 | 默认值  | 描述                                                                                                      |
 | ------------ | ---- | :--: | ------- | --------------------------------------------------------------------------------------------------------- |
-| options.deep | diff |      | `false` | 是否导出节点和边的差异数据（与节点和边的[默认配置](/zh/docs/tutorial/basic/cell#选项默认值)不同的部分）。 |
+| options.deep | diff |      | `false` | 是否导出节点和边的差异数据（与节点和边的[默认配置](/zh/docs/api/model/cell#选项默认值)不同的部分）。 |
 
 ### parseJSON(...)
 

sites/x6-sites/docs/tutorial/plugins/history.zh.md

@@ -54,6 +54,7 @@ graph.use(
 | 属性名           | 类型                            | 默认值  | 必选 | 描述                                                                                                 |
 | ---------------- | ------------------------------- | ------- | ---- | ---------------------------------------------------------------------------------------------------- |
 | enabled          | boolean                         | `false` |      | 是否开启撤销重做功能                                                                                 |
+| stackSize         | number                         | `0` |      | `stackSize` 为 0 表示不限制历史记录栈的长度，如果设置为其他数字表示最多只会记录该数字长度的历史记录                                                                                 |
 | ignoreAdd        | boolean                         | `false` |      | `ignoreAdd` 如果为 `true`，添加添加元素不会被记录到历史记录                                          |
 | ignoreRemove     | boolean                         | `false` |      | `ignoreRemove` 如果为 `true`，删除元素不会被记录到历史记录                                           |
 | ignoreChange     | boolean                         | `false` |      | `ignoreChange` 如果为 `true`，元素属性变化是否被记录到历史记录                                       |

sites/x6-sites/docs/tutorial/plugins/stencil.md

@@ -97,7 +97,7 @@ export interface Group {
   graphWidth?: number; // 模板画布宽度
   graphHeight?: number; // 模板画布高度
   graphPadding?: number; // 模板画布边距
-  graphOptions?: Graph.Options; // 模板画布线下
+  graphOptions?: Graph.Options; // 模板画布选项
   layout?: (this: Stencil, model: Model, group?: Group | null) => any;
   layoutOptions?: any; // 布局选项
 }

sites/x6-sites/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-sites",
-  "version": "2.3.0",
+  "version": "1.5.2",
   "description": "X6 sites deployed on gh-pages",
   "scripts": {
     "dev": "dumi dev",