fix: add createView options (#3075)

[@antv/x6-common@2.0.4](https://www.npmjs.com/package/@antv/x6-common/v/2.0.4)
[@antv/x6-common@2.0.4](https://github.com/antvis/X6/releases/tag/%40antv/x6-common%402.0.4)

CONTRIBUTORS

@@ -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>

examples/x6-example-features/CHANGELOG.md

@@ -1,3 +1,10 @@
+## @antv/x6-example-features [2.0.1](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.0...@antv/x6-example-features@2.0.1) (2022-12-16)
+
+
+### Bug Fixes
+
+* make resizing options take effect ([#3014](https://github.com/antvis/X6/issues/3014)) ([604c024](https://github.com/antvis/X6/commit/604c0244cd71ec8e911754dfe524f12c04e4e9ad))
+
 # @antv/x6-example-features [2.0.0](https://github.com/antvis/X6/compare/@antv/x6-example-features@1.1.2...@antv/x6-example-features@2.0.0) (2022-11-24)
 
 

examples/x6-example-features/package.json

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

packages/x6-common/CHANGELOG.md

@@ -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)
 
 

packages/x6-common/package.json

@@ -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",

packages/x6-common/src/polyfill/index.ts

@@ -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
 }
 

packages/x6-plugin-scroller/package.json

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

packages/x6-plugin-scroller/src/scroller.ts

@@ -47,6 +47,7 @@ export class ScrollerImpl extends View<ScrollerImpl.EventArgs> {
     super()
 
     this.options = ScrollerImpl.getOptions(options)
+    this.onUpdate = FunctionExt.debounce(this.onUpdate, 200)
 
     const scale = this.graph.transform.getScale()
     this.sx = scale.sx

packages/x6-react-shape/src/view.ts

@@ -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)

packages/x6-vue-shape/src/teleport.ts

@@ -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,
         }),
       }),
     )

packages/x6-vue-shape/src/view.ts

@@ -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,
                 }
               },
             })

packages/x6/CHANGELOG.md

@@ -1,3 +1,25 @@
+## @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)
+
+
+### Features
+
+* add snapToGrid options for manhattan router ([#3062](https://github.com/antvis/x6/issues/3062)) ([824560d](https://github.com/antvis/x6/commit/824560ddda7016158cce3166773e1af009bfe498))
+
+## @antv/x6 [2.0.9](https://github.com/antvis/x6/compare/@antv/x6@2.0.8...@antv/x6@2.0.9) (2022-12-16)
+
+
+### Bug Fixes
+
+* :bug: char ghosting when edit text ([#2560](https://github.com/antvis/x6/issues/2560)) ([#3043](https://github.com/antvis/x6/issues/3043)) ([15284e7](https://github.com/antvis/x6/commit/15284e778a09f4f2e5a8f777330744b0cfe88e9e))
+
 ## @antv/x6 [2.0.8](https://github.com/antvis/x6/compare/@antv/x6@2.0.7...@antv/x6@2.0.8) (2022-12-08)
 
 

packages/x6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6",
-  "version": "2.0.8",
+  "version": "2.1.1",
   "description": "JavaScript diagramming library that uses SVG and HTML for rendering",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6/src/graph/options.ts

@@ -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 {

packages/x6/src/registry/index.ts

@@ -12,3 +12,5 @@ export * from './edge-anchor'
 export * from './connection-point'
 export * from './router'
 export * from './connector'
+
+export * from './registry'

packages/x6/src/registry/router/manhattan/obstacle-map.ts

@@ -71,15 +71,17 @@ export class ObstacleMap {
     const mapGridSize = this.mapGridSize
 
     model.getNodes().reduce((map, node) => {
-      const shape = node.shape
-      const excludeShapes = options.excludeShapes
-      const excType = shape ? excludeShapes.includes(shape) : false
-      const excTerminal = excludedTerminals.some((cell) => cell.id === node.id)
-      const excNode = options.excludeNodes.includes(node)
-      const excAncestor = excludedAncestors.includes(node.id)
-      const excHidden = options.excludeHiddenNodes && !node.isVisible()
-      const excluded =
-        excType || excTerminal || excNode || excAncestor || excHidden
+      const excludedTerminal = excludedTerminals.some(
+        (cell) => cell.id === node.id,
+      )
+      const excludedNode = options.excludeNodes.some((item) => {
+        if (typeof item === 'string') {
+          return node.id === item
+        }
+        return item === node
+      })
+      const excludedAncestor = excludedAncestors.includes(node.id)
+      const excluded = excludedTerminal || excludedNode || excludedAncestor
 
       if (!excluded) {
         const bbox = node.getBBox().moveAndExpand(options.paddingBox)

packages/x6/src/registry/router/manhattan/options.ts

@@ -41,20 +41,10 @@ export interface ResolvedOptions {
    */
   excludeTerminals: Edge.TerminalType[]
 
-  /**
-   * Should certain types of nodes not be considered as obstacles?
-   */
-  excludeShapes: string[]
-
-  /**
-   * Should certain hidden nodes not be considered as obstacles?
-   */
-  excludeHiddenNodes: boolean
-
   /**
    * Should certain nodes not be considered as obstacles?
    */
-  excludeNodes: Node[]
+  excludeNodes: (Node | string)[]
 
   /**
    * Possible starting directions from a node.
@@ -132,6 +122,9 @@ export interface ResolvedOptions {
   ) => Point[] | null
 
   previousDirectionAngle?: number | null
+
+  // Whether the calculation results are aligned with the grid
+  snapToGrid?: boolean
 }
 
 export type ManhattanRouterOptions = {
@@ -145,9 +138,7 @@ export const defaults: ManhattanRouterOptions = {
   maxDirectionChange: 90,
   perpendicular: true,
   excludeTerminals: [],
-  excludeShapes: [], // ['text']
   excludeNodes: [],
-  excludeHiddenNodes: false,
   startDirections: ['top', 'right', 'bottom', 'left'],
   endDirections: ['top', 'right', 'bottom', 'left'],
   directionMap: {
@@ -195,6 +186,7 @@ export const defaults: ManhattanRouterOptions = {
 
   fallbackRouter: orth,
   draggingRouter: null,
+  snapToGrid: true,
 }
 
 export function resolve<T>(

packages/x6/src/registry/router/manhattan/router.ts

@@ -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,
@@ -350,5 +376,9 @@ export const router: Router.Definition<ManhattanRouterOptions> = function (
     newVertices.push(...partialRoute)
   }
 
+  if (options.snapToGrid) {
+    return snap(newVertices, edgeView.graph.grid.getGridSize())
+  }
+
   return newVertices
 }

packages/x6/src/registry/tool/arrowhead.ts

@@ -74,6 +74,7 @@ class Arrowhead extends ToolsView.ToolItem<EdgeView, Arrowhead.Options> {
         x: coords.x,
         y: coords.y,
         options: {
+          ...this.options,
           toolId: this.cid,
         },
       })

packages/x6/src/renderer/scheduler.ts

@@ -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)
     }
 

packages/x6/src/view/node.ts

@@ -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) {

sites/x6-sites/CHANGELOG.md

@@ -0,0 +1,51 @@
+# @antv/x6-sites [1.2.0](https://github.com/antvis/X6/compare/@antv/x6-sites@1.1.2...@antv/x6-sites@1.2.0) (2022-12-16)
+
+
+### Bug Fixes
+
+* 🐛 add keepId for node clone ([#1254](https://github.com/antvis/X6/issues/1254)) ([cef5862](https://github.com/antvis/X6/commit/cef58628902aa97efa62f022203ebcaca3639092))
+* 🐛 add updateCellId api ([#1739](https://github.com/antvis/X6/issues/1739)) ([78cdb3b](https://github.com/antvis/X6/commit/78cdb3bd56e7655ffcb2e5046d00f5d4f932cd3c))
+* 🐛 alerts on lgtm.com ([#1104](https://github.com/antvis/X6/issues/1104)) ([eb2791d](https://github.com/antvis/X6/commit/eb2791dee16440d8c8600b7819552892c2ce2c02))
+* 🐛 change home path in speedup js ([#1369](https://github.com/antvis/X6/issues/1369)) ([31f8960](https://github.com/antvis/X6/commit/31f8960e72b0567bb13683e51db8b97207604c0b))
+* 🐛 change type of padding in ScaleContentToFitOptions ([#1203](https://github.com/antvis/X6/issues/1203)) ([1031d06](https://github.com/antvis/X6/commit/1031d0653b4641adfc27b7572b57d23fec0cc182))
+* 🐛 fix add tools not work ([f5d1d6a](https://github.com/antvis/X6/commit/f5d1d6a326021247ee8967675fc9490ddbb6d0aa))
+* 🐛 fix validateEdge trigger timming ([48b72a1](https://github.com/antvis/X6/commit/48b72a1332d536a8b640fbfc6a3e4c463f5b79bc))
+* 🐛 not create label when text is empty ([#1783](https://github.com/antvis/X6/issues/1783)) ([ed1fcd1](https://github.com/antvis/X6/commit/ed1fcd1f26601150d1b7913b8eaaf329a958af53))
+* 🐛 optimize addTools params ([1366eac](https://github.com/antvis/X6/commit/1366eac7f554ede24db6c558c581142ecb7c1a37))
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/X6/issues/1391)) ([cc01fdf](https://github.com/antvis/X6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 optimize usage of mousewheel ([37b3010](https://github.com/antvis/X6/commit/37b3010f763926fbd04d822e74238f6e206c024c))
+* 🐛 release x6 v1.28.2 ([#1654](https://github.com/antvis/X6/issues/1654)) ([745b90a](https://github.com/antvis/X6/commit/745b90ac94dbbd9443ecf1456e6a5aa9eb646594))
+* 🐛 remove single tool by name or index ([#565](https://github.com/antvis/X6/issues/565)) ([73d5d67](https://github.com/antvis/X6/commit/73d5d67541d4950a9c362a3bc7c7e6200640b40f)), closes [#552](https://github.com/antvis/X6/issues/552)
+* 🐛 unified panning api ([#1151](https://github.com/antvis/X6/issues/1151)) ([d60e9d8](https://github.com/antvis/X6/commit/d60e9d882dfa85bf39b47ba75a6379b5cbd1a965))
+* 🐛 update layout version ([35abd4a](https://github.com/antvis/X6/commit/35abd4a04d04d2f4ff84cf2604f39b69f5303f8e))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/X6/issues/1425)) ([4208846](https://github.com/antvis/X6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+* add `placeholder` and `notFoundText` for stencil component ([#574](https://github.com/antvis/X6/issues/574)) ([c42464b](https://github.com/antvis/X6/commit/c42464b376835dc5c4e2139582fbe09df4183153)), closes [#555](https://github.com/antvis/X6/issues/555)
+* curve demo ([#1306](https://github.com/antvis/X6/issues/1306)) ([de13692](https://github.com/antvis/X6/commit/de1369282f00e24180c7269e3373e67ae79aa338))
+* fix angular typo ([#1154](https://github.com/antvis/X6/issues/1154)) ([25b47c3](https://github.com/antvis/X6/commit/25b47c39b9d036a6d55a28450792d4f788bf903f))
+* fix can not create node when mouseup in demo ([#628](https://github.com/antvis/X6/issues/628)) ([c336262](https://github.com/antvis/X6/commit/c336262cc7d1697a2a5f8e8ff229767415f136e0))
+* fix contextmenu show multiple times ([5d437ce](https://github.com/antvis/X6/commit/5d437cef07427bf9f2cbae9b2e08dd4a6544ff70))
+* fix demo import path error ([2ebf581](https://github.com/antvis/X6/commit/2ebf581dc1ec9c5ee4501917a7cbddbbb4b69c0f))
+* fix editable cell demo ([7e6d003](https://github.com/antvis/X6/commit/7e6d003d7d937c35a41ed326cdb1d78041826da9))
+* fix path error in custom router demo ([#620](https://github.com/antvis/X6/issues/620)) ([7cd3a7e](https://github.com/antvis/X6/commit/7cd3a7e57d772481ad33949ee832a36aab59ef3a))
+* fix trigger multiple moved event when close movable config ([3eb9d69](https://github.com/antvis/X6/commit/3eb9d6934efc5d73f7dd830d169a166ccb7bd9ac))
+* remove useless repo url ([2f92e33](https://github.com/antvis/X6/commit/2f92e33d0e42801624b9e32f3e508445ed34e6d0))
+* x6 support ie 11 ([#585](https://github.com/antvis/X6/issues/585)) ([5df9aaa](https://github.com/antvis/X6/commit/5df9aaaa88f943402d18fed6b7e5ae0abd5ed9b9))
+
+
+### Features
+
+* ✨  allow disable auto resize in some high performance scenario ([9bfa702](https://github.com/antvis/X6/commit/9bfa7025c05b29c0774a499d88961a9cf4394dda))
+* ✨ add cell-editor tool ([#1202](https://github.com/antvis/X6/issues/1202)) ([98e80d1](https://github.com/antvis/X6/commit/98e80d10c9bfbd0c8486944dd212db2db731a225))
+* ✨ add containerParent config for dnd ([fc6498f](https://github.com/antvis/X6/commit/fc6498f6e2d52d05eab6790851c3437c6c28ee2b))
+* ✨ add direction option for midside node-anchor ([ee62cc0](https://github.com/antvis/X6/commit/ee62cc07ba706037e0a10e08d5440472e1ce97c9))
+* ✨ add excludeHiddenNodes for manhattan router ([#1400](https://github.com/antvis/X6/issues/1400)) ([28a472a](https://github.com/antvis/X6/commit/28a472ab8e3097ffd12be0fb8909c084156e5afd))
+* ✨ add insertPort api ([#1763](https://github.com/antvis/X6/issues/1763)) ([6809dba](https://github.com/antvis/X6/commit/6809dba2d86308d0b315d0c6164f91d80e8a40ff))
+* ✨ add resizeGroup for stencil ([#1388](https://github.com/antvis/X6/issues/1388)) ([d9bec60](https://github.com/antvis/X6/commit/d9bec60ce3819f45151ac8d1336e2ae94842d3d4))
+* ✨ add rubberNode and rubberEdge config ([#949](https://github.com/antvis/X6/issues/949)) ([a2f6fb3](https://github.com/antvis/X6/commit/a2f6fb38d03ecac123f006ed33b3f71da7952355))
+* ✨ auto resize graph when container resized ([9c7bc9a](https://github.com/antvis/X6/commit/9c7bc9a4bb210451283663cd99a29bd6c79e2ec4)), closes [#531](https://github.com/antvis/X6/issues/531)
+* ✨ panning support rightMouseDown and mousehwheel ([728977c](https://github.com/antvis/X6/commit/728977c5843a9868736e7f2f3b9d0d77e8837d3c))
+* ✨ support minimap in normal graph ([f42160f](https://github.com/antvis/X6/commit/f42160f8259ca7cf290fe8a431a5fe1900b729a8))
+* add angualr shape ([#1141](https://github.com/antvis/X6/issues/1141)) ([398cca4](https://github.com/antvis/X6/commit/398cca43d3697c97f32f831b5fec73e416c0d733))
+* add following config for selection ([#687](https://github.com/antvis/X6/issues/687)) ([4de6701](https://github.com/antvis/X6/commit/4de6701c0b29f8e71293403b5b813bb64a27f3a5))
+* sync code from master ([#2004](https://github.com/antvis/X6/issues/2004)) ([c681405](https://github.com/antvis/X6/commit/c68140504bd21f654870f3d2fc1ad2f16f1113c8)), closes [#1974](https://github.com/antvis/X6/issues/1974) [#1977](https://github.com/antvis/X6/issues/1977) [#1985](https://github.com/antvis/X6/issues/1985) [#1988](https://github.com/antvis/X6/issues/1988) [#1991](https://github.com/antvis/X6/issues/1991) [#1989](https://github.com/antvis/X6/issues/1989)
+* x6-angular-shape support pass arguments ([#1250](https://github.com/antvis/X6/issues/1250)) ([b683f82](https://github.com/antvis/X6/commit/b683f82d70c05f993db46394bcc50d221b02443e))

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

@@ -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                        |      | - | 是自定义元素的视图。                                                                          |

sites/x6-sites/docs/api/graph/view.zh.md

@@ -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

sites/x6-sites/docs/api/interacting/interaction.zh.md

@@ -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,
+    }
+  }
+})

sites/x6-sites/docs/tutorial/getting-started.en.md

@@ -0,0 +1,88 @@
+---
+title: Quickstart
+order: 1
+redirect_from:
+  - /en/docs
+  - /en/docs/tutorial
+---
+
+## Installation
+
+X6 is published on npm as @antv/x6.
+
+```shell
+# npm
+$ npm install @antv/x6 --save
+
+# yarn
+$ yarn add @antv/x6
+```
+
+If using the umd package, you can use any of the following CDN.
+
+- https://unpkg.com/@antv/x6/dist/index.js
+- https://cdn.jsdelivr.net/npm/@antv/x6/dist/index.js
+- https://cdnjs.cloudflare.com/ajax/libs/antv-x6/2.0.0/index.js
+
+## Basic Usage
+
+It's recommended to learn [SVG Basics](https://codepen.io/HunorMarton/full/PoGbgqj) before you begin, and with some basic SVG knowledge in mind, let's start with a simple example to play with X6.
+
+### 1. Init Graph
+
+Creating a graph container on the page and then initializing the graph object, then you can set the graph style through configuration, such as the background color.
+
+```html
+<div id="container"></div>
+```
+
+```ts
+import { Graph } from "@antv/x6";
+
+const graph = new Graph({
+  container: document.getElementById("container"),
+  width: 800,
+  height: 600,
+  background: {
+    color: "#F2F7FA",
+  },
+});
+```
+
+### 2. Render nodes and edges
+
+X6 supports json data, you can also use the `attrs` attribute to customize the styles of nodes and edges (like `CSS`).
+
+<code id="helloworld" src="@/src/tutorial/getting-started/helloworld/index.tsx"></code>
+
+### 3. Using the React Node
+
+X6 supports using `SVG` and `HTML` to render node content. On this basis, we can also use `React` and `Vue` components to render nodes, which will be very convenient in the development process.
+
+For example, we have a new requirement: add a right-click menu to the node. It would be more complicated to implement using `SVG`, We can easily implement it with react node. We can use the React render package `@antv/x6-react-shape` that comes with X6.
+
+<code id="react-shape" src="@/src/tutorial/getting-started/react-shape/index.tsx"></code>
+
+### 4. Using the Plugins
+
+In addition to the basic element rendering capabilities, X6 also comes with a large number of built-in plugins for graph editing. Using these mature plugins, we can improve the development efficiency. For example, we add a snapline plugin to the graph, when a moving node is aligned with other nodes, the snapline will automatically appear.
+
+```ts
+import { Snapline } from "@antv/x6-plugin-snapline";
+
+graph.use(
+  new Snapline({
+    enabled: true,
+  })
+);
+```
+
+<code id="use-plugin" src="@/src/tutorial/getting-started/use-plugin/index.tsx"></code>
+
+### 5. Export the Data
+
+In addition to using `fromJSON` to render JSON data to the graph, of course, there is also support for exporting the data from the graph width `toJSON`, so that we can serialize the graph data and store it to the server.
+
+```ts
+graph.toJSON();
+```

sites/x6-sites/package.json

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