chore: release 1 packages (#3347)

[@antv/x6@2.5.2](https://www.npmjs.com/package/@antv/x6/v/2.5.2)
[@antv/x6@2.5.2](https://github.com/antvis/X6/releases/tag/%40antv/x6%402.5.2)

[@antv/x6-sites@1.6.5](https://github.com/antvis/X6/releases/tag/%40antv/x6-sites%401.6.5)

README.en-us.md

@@ -90,6 +90,7 @@ graph.addEdge({
 - [Versioning Release Note](https://www.yuque.com/antv/x6/bbfu6r)
 - [FAQ](https://www.yuque.com/antv/x6/be9pfx)
 - [CodeSanbox Template](https://codesandbox.io/s/qosj0?file=/src/app.tsx)
+- [awesome-x6](https://github.com/lloydzhou/awesome-x6)
 
 ## Development
 

README.md

@@ -89,6 +89,7 @@ graph.addEdge({
 - [更新日志](https://www.yuque.com/antv/x6/bbfu6r)
 - [常见问题](https://www.yuque.com/antv/x6/tox1ukbz5cw57qfy)
 - [CodeSanbox 模板](https://codesandbox.io/s/mo-ban-wchooy?file=/src/App.tsx)
+- [awesome-x6](https://github.com/lloydzhou/awesome-x6)
 
 ## 本地开发
 

package.json

@@ -163,5 +163,8 @@
   },
   "devDependencies": {
     "@rollup/plugin-terser": "^0.2.0"
+  },
+  "engines": {
+    "pnpm": ">=7"
   }
 }

packages/x6-angular-shape/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "shape",

packages/x6-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-common",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "Basic toolkit for X6",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "util",

packages/x6-geometry/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "geometry",

packages/x6-plugin-clipboard/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "plugin",

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

@@ -11,7 +11,7 @@ export class Clipboard
   public options: Clipboard.Options
   public name = 'clipboard'
 
-  constructor(options: Clipboard.Options) {
+  constructor(options: Clipboard.Options = { enabled: true }) {
     super()
     this.options = options
   }

packages/x6-plugin-dnd/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "plugin",

packages/x6-plugin-export/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "plugin",

packages/x6-plugin-history/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "plugin",

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

@@ -12,6 +12,10 @@ declare module '@antv/x6/lib/graph/graph' {
     undoAndCancel: (options?: KeyValue) => Graph
     canUndo: () => boolean
     canRedo: () => boolean
+    getHistoryStackSize: () => number
+    getUndoStackSize: () => number
+    getRedoStackSize: () => number
+    getUndoRemainSize: () => number
     cleanHistory: (options?: KeyValue) => Graph
   }
 }
@@ -107,3 +111,23 @@ Graph.prototype.cleanHistory = function (options?: KeyValue) {
   }
   return this
 }
+
+Graph.prototype.getHistoryStackSize = function () {
+  const history = this.getPlugin('history') as History
+  return history.getSize()
+}
+
+Graph.prototype.getUndoStackSize = function () {
+  const history = this.getPlugin('history') as History
+  return history.getUndoSize()
+}
+
+Graph.prototype.getRedoStackSize = function () {
+  const history = this.getPlugin('history') as History
+  return history.getRedoSize()
+}
+
+Graph.prototype.getUndoRemainSize = function () {
+  const history = this.getPlugin('history') as History
+  return history.getUndoRemainSize()
+}

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

@@ -127,6 +127,23 @@ export class History
     return this
   }
 
+  getSize() {
+    return this.stackSize
+  }
+
+  getUndoRemainSize() {
+    const ul = this.undoStack.length
+    return this.stackSize - ul
+  }
+
+  getUndoSize() {
+    return this.undoStack.length
+  }
+
+  getRedoSize() {
+    return this.redoStack.length
+  }
+
   canUndo() {
     return !this.disabled && this.undoStack.length > 0
   }

packages/x6-plugin-keyboard/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "plugin",

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

@@ -7,7 +7,7 @@ export class Keyboard extends Disposable {
   public name = 'keyboard'
   public options: KeyboardImpl.Options
 
-  constructor(options: KeyboardImpl.Options) {
+  constructor(options: KeyboardImpl.Options = { enabled: true }) {
     super()
     this.options = options
   }
@@ -69,7 +69,6 @@ export class Keyboard extends Disposable {
     return this
   }
 
-
   unbindKey(keys: string | string[], action?: KeyboardImpl.Action) {
     this.keyboardImpl.off(keys, action)
     return this

packages/x6-plugin-minimap/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "plugin",

packages/x6-plugin-scroller/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "plugin",

packages/x6-plugin-selection/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "plugin",

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

@@ -36,7 +36,7 @@ export class Selection extends Basecoat<SelectionImpl.EventArgs> {
     return this.selectionImpl.cells
   }
 
-  constructor(options: Selection.Options) {
+  constructor(options: Selection.Options = { enabled: true }) {
     super()
     this.options = ObjectExt.merge({}, Selection.defaultOptions, options)
     CssLoader.ensure(this.name, content)

packages/x6-plugin-snapline/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "plugin",

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

@@ -8,7 +8,7 @@ export class Snapline extends Disposable {
   public options: Snapline.Options
   public name = 'snapline'
 
-  constructor(options: Snapline.Options) {
+  constructor(options: Snapline.Options = { enabled: true }) {
     super()
     this.options = { tolerance: 10, ...options }
     CssLoader.ensure(this.name, content)

packages/x6-plugin-stencil/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "plugin",

packages/x6-plugin-transform/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "plugin",

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

@@ -9,7 +9,7 @@ export class Transform extends Basecoat<Transform.EventArgs> {
   public name = 'transform'
   private disabled = false
 
-  constructor(public readonly options: Transform.Options) {
+  constructor(public readonly options: Transform.Options = {}) {
     super()
     CssLoader.ensure(this.name, content)
   }

packages/x6-react-components/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "sideEffects": [
     "es/**/style/*",

packages/x6-react-shape/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "shape",

packages/x6-vue-shape/package.json

@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "shape",

packages/x6/CHANGELOG.md

@@ -1,3 +1,10 @@
+## @antv/x6 [2.5.2](https://github.com/antvis/x6/compare/@antv/x6@2.5.1...@antv/x6@2.5.2) (2023-03-02)
+
+
+### Bug Fixes
+
+* add excludeShapes options for manhattan router ([#3334](https://github.com/antvis/x6/issues/3334)) ([c76a23b](https://github.com/antvis/x6/commit/c76a23b53425f5cbb7f767c0fe5510f3f81c417c))
+
 # @antv/x6 [2.3.0](https://github.com/antvis/x6/compare/@antv/x6@2.2.1...@antv/x6@2.3.0) (2023-02-06)
 
 

packages/x6/package.json

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

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

@@ -74,6 +74,9 @@ export class ObstacleMap {
       const excludedTerminal = excludedTerminals.some(
         (cell) => cell.id === node.id,
       )
+      const excludedShape = node.shape
+        ? options.excludeShapes.includes(node.shape)
+        : false
       const excludedNode = options.excludeNodes.some((item) => {
         if (typeof item === 'string') {
           return node.id === item
@@ -81,7 +84,8 @@ export class ObstacleMap {
         return item === node
       })
       const excludedAncestor = excludedAncestors.includes(node.id)
-      const excluded = excludedTerminal || excludedNode || excludedAncestor
+      const excluded =
+        excludedShape || excludedTerminal || excludedNode || excludedAncestor
 
       if (!excluded) {
         const bbox = node.getBBox().moveAndExpand(options.paddingBox)

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

@@ -46,6 +46,11 @@ export interface ResolvedOptions {
    */
   excludeNodes: (Node | string)[]
 
+  /**
+   * Should certain types of nodes not be considered as obstacles?
+   */
+  excludeShapes: string[]
+
   /**
    * Possible starting directions from a node.
    */
@@ -139,6 +144,7 @@ export const defaults: ManhattanRouterOptions = {
   perpendicular: true,
   excludeTerminals: [],
   excludeNodes: [],
+  excludeShapes: [],
   startDirections: ['top', 'right', 'bottom', 'left'],
   endDirections: ['top', 'right', 'bottom', 'left'],
   directionMap: {

packages/x6/src/renderer/queueJob.ts

@@ -46,11 +46,7 @@ export class JobQueue {
 
     let job
     while ((job = this.queue.shift())) {
-      try {
-        job.cb()
-      } catch (error) {
-        // pass
-      }
+      job.cb()
       if (this.getCurrentTime() - startTime >= this.frameInterval) {
         break
       }

packages/x6/src/renderer/scheduler.ts

@@ -202,7 +202,7 @@ export class Scheduler extends Disposable {
     }
 
     let result = 0
-    if (this.isInRenderArea(view)) {
+    if (this.isUpdateable(view)) {
       result = this.updateView(view, flag, options)
       viewItem.flag = result
     } else {
@@ -318,9 +318,9 @@ export class Scheduler extends Disposable {
   }
 
   protected resetViews() {
-    this.willRemoveViews = { ...this.views }
-    Object.keys(this.willRemoveViews).forEach((id) => {
-      const viewItem = this.willRemoveViews[id]
+    const willRemoveViews = { ...this.views, ...this.willRemoveViews }
+    Object.keys(willRemoveViews).forEach((id) => {
+      const viewItem = willRemoveViews[id]
       if (viewItem) {
         this.removeView(viewItem.view)
       }
@@ -479,11 +479,11 @@ export class Scheduler extends Disposable {
     return effectedEdges
   }
 
-  protected isInRenderArea(view: CellView) {
-    if (!this.renderArea) {
-      return true
-    }
+  protected isUpdateable(view: CellView) {
     if (view.isNodeView()) {
+      if (!this.renderArea) {
+        return true
+      }
       const node = view.cell
       return this.renderArea.isIntersectWithRect(node.getBBox())
     }

sites/x6-sites/.gitignore

@@ -3,4 +3,5 @@ node_modules
 static/apps
 static/demos
 .dumi/tmp
-.dumi/tmp-production
+.dumi/tmp-production
+dist

sites/x6-sites/CHANGELOG.md

@@ -1,3 +1,16 @@
+## @antv/x6-sites [1.6.5](https://github.com/antvis/x6/compare/@antv/x6-sites@1.6.4...@antv/x6-sites@1.6.5) (2023-03-02)
+
+
+### Bug Fixes
+
+* add excludeShapes options for manhattan router ([#3334](https://github.com/antvis/x6/issues/3334)) ([c76a23b](https://github.com/antvis/x6/commit/c76a23b53425f5cbb7f767c0fe5510f3f81c417c))
+
+## @antv/x6-sites [1.6.3](https://github.com/antvis/x6/compare/@antv/x6-sites@1.6.2...@antv/x6-sites@1.6.3) (2023-03-02)
+
+## @antv/x6-sites [1.6.2](https://github.com/antvis/x6/compare/@antv/x6-sites@1.6.1...@antv/x6-sites@1.6.2) (2023-02-28)
+
+## @antv/x6-sites [1.6.1](https://github.com/antvis/x6/compare/@antv/x6-sites@1.6.0...@antv/x6-sites@1.6.1) (2023-02-27)
+
 ## @antv/x6-sites [1.5.5](https://github.com/antvis/x6/compare/@antv/x6-sites@1.5.4...@antv/x6-sites@1.5.5) (2023-02-27)
 
 ## @antv/x6-sites [1.5.4](https://github.com/antvis/x6/compare/@antv/x6-sites@1.5.3...@antv/x6-sites@1.5.4) (2023-02-24)

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

@@ -242,7 +242,7 @@ getBBox(): Rectangle
 返回边的包围盒。
 
 :::warning{title=注意：}
-| 需要注意的是，该方法通过边的端点和路径点计算包围盒，并不是渲染到画布后的包围盒，涉及的计算只是一些算数运算。
+需要注意的是，该方法通过边的端点和路径点计算包围盒，并不是渲染到画布后的包围盒，涉及的计算只是一些算数运算。
 :::
 
 #### getPolyline()

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

@@ -248,7 +248,7 @@ getBBox(options: { deep?: boolean }): Rectangle
 获取节点的包围盒。
 
 :::warning{title=注意：}
-| 需要注意的是，该方法通过节点的大小和位置计算包围盒，并不是渲染到画布后的包围盒，涉及的计算只是一些算数运算。
+需要注意的是，该方法通过节点的大小和位置计算包围盒，并不是渲染到画布后的包围盒，涉及的计算只是一些算数运算。
 :::
 
 <span class="tag-param">参数<span>

sites/x6-sites/docs/api/registry/attr.zh.md

@@ -79,7 +79,7 @@ redirect_from:
 - 当其值 `<0` 或 `>1` 时，表示元素的宽度在参照宽度的基础上减少或增加多少。例如 `refWidth: 20` 表示元素比相对元素宽 `20px`。
 
 :::warning{title=注意：}
-| 需要注意的是，该属性只适用于那些支持宽度 `width` 和高度 `height` 的元素，如 `<rect>` 元素。
+需要注意的是，该属性只适用于那些支持宽度 `width` 和高度 `height` 的元素，如 `<rect>` 元素。
 :::
 
 ### refWidth2
@@ -103,7 +103,7 @@ redirect_from:
 - 当其值 `<0` 或 `>1` 时，表示元素的高度在参照高度的基础上减少或增加多少。例如 `refHeight: 20` 表示元素比相对元素高 `20px`。
 
 :::warning{title=注意：}
-| 需要注意的是，该属性只适用于那些支持宽度 `width` 和高度 `height` 的元素，如 `<rect>` 元素。
+需要注意的是，该属性只适用于那些支持宽度 `width` 和高度 `height` 的元素，如 `<rect>` 元素。
 :::
 
 ### refHeight2
@@ -127,7 +127,7 @@ redirect_from:
 - 当其值 `<0` 或 `>1` 时，表示元素的 `cx` 是在参照宽度的基础上减少或增加多少。例如 `refCx: 20` 表示元素中心 `x` 坐标位于参照宽度加 `20px` 处。
 
 :::warning{title=注意：}
-| 需要注意的是，该属性只适用于那些支持 `cx` 和 `cy` 属性的元素，如 `<ellipse>` 元素。
+需要注意的是，该属性只适用于那些支持 `cx` 和 `cy` 属性的元素，如 `<ellipse>` 元素。
 :::
 
 ### refCy
@@ -138,7 +138,7 @@ redirect_from:
 - 当其值 `<0` 或 `>1` 时，表示元素的 `cy` 是在参照宽度的基础上减少或增加多少。例如 `refCy: 20` 表示元素中心 `y` 坐标位于参照高度加 `20px` 处。
 
 :::warning{title=注意：}
-| 需要注意的是，该属性只适用于那些支持 `cx` 和 `cy` 属性的元素，如 `<ellipse>` 元素。
+需要注意的是，该属性只适用于那些支持 `cx` 和 `cy` 属性的元素，如 `<ellipse>` 元素。
 :::
 
 ### refRx
@@ -149,7 +149,7 @@ redirect_from:
 - 当其值 `<0` 或 `>1` 时，表示元素的 `rx` 是在参照宽度的基础上减少或增加多少。例如 `refRx: 20` 表示元素的 `rx` 是参照宽度加 `20px`。
 
 :::warning{title=注意：}
-| 需要注意的是，该属性只适用于那些支持 `rx` 和 `ry` 属性的元素，如 `<rect>` 元素。
+需要注意的是，该属性只适用于那些支持 `rx` 和 `ry` 属性的元素，如 `<rect>` 元素。
 :::
 
 ### refRy
@@ -160,7 +160,7 @@ redirect_from:
 - 当其值 `<0` 或 `>1` 时，表示元素的 `ry` 是在参照宽度的基础上减少或增加多少。例如 `refRy: 20` 表示元素的 `ry` 是参照高度加 `20px`。
 
 :::warning{title=注意：}
-| 需要注意的是，该属性只适用于那些支持 `rx` 和 `ry` 属性的元素，如 `<rect>` 元素。
+需要注意的是，该属性只适用于那些支持 `rx` 和 `ry` 属性的元素，如 `<rect>` 元素。
 :::
 
 ### refRCircumscribed
@@ -171,7 +171,7 @@ redirect_from:
 - 当其值 `<0` 或 `>1` 时，表示 `r` 是在参照长度的基础上减少或增加多少。例如 `refRCircumscribed: 20` 表示 `r` 是参照长度加 `20px`。
 
 :::warning{title=注意：}
-| 需要注意的是，该属性只适用于那些支持 `r` 属性的元素，如 `<rect>` 元素。
+需要注意的是，该属性只适用于那些支持 `r` 属性的元素，如 `<rect>` 元素。
 :::
 
 ### refRInscribed
@@ -184,7 +184,7 @@ _简称_：**`refR`**
 - 当其值 `<0` 或 `>1` 时，表示 `r` 是在参照长度的基础上减少或增加多少。例如 `refRInscribed: 20` 表示 `r` 是参照长度加 `20px`。
 
 :::warning{title=注意：}
-| 需要注意的是，该属性只适用于那些支持 `r` 属性的元素，如 `<rect>` 元素。
+需要注意的是，该属性只适用于那些支持 `r` 属性的元素，如 `<rect>` 元素。
 :::
 
 ### refDKeepOffset
@@ -570,7 +570,7 @@ edge.attr("connection/sourceMarker", {
 适用于所有 `<path>` 元素，在路径的终点添加一个 SVG 元素（如终点箭头），并自动旋转该元素，使其与根据路径方向保持一致。了解更多详情请参考[这篇教程](/zh/docs/tutorial/intermediate/marker)。
 
 :::warning{title=注意：}
-| 需要注意的是，该元素初始时就被旋转了 `180` 度，在此基础上再自动调整旋转角度，并与路径的方向保持一致。例如，对于一个水平的直线，我们为其起点指定了一个向左的箭头，我们也可以为其重点指定相同的箭头，这个箭头会自动指向右侧（自动旋转了 `180` 度）。
+需要注意的是，该元素初始时就被旋转了 `180` 度，在此基础上再自动调整旋转角度，并与路径的方向保持一致。例如，对于一个水平的直线，我们为其起点指定了一个向左的箭头，我们也可以为其重点指定相同的箭头，这个箭头会自动指向右侧（自动旋转了 `180` 度）。
 :::
 
 ### vertexMarker

sites/x6-sites/docs/api/registry/router.zh.md

@@ -170,7 +170,6 @@ graph.addEdge({
 | excludeTerminals   | ('source' \| 'target')[] |    否    | `[]`                                 | 忽略起始或终止节点，忽略后不参与障碍物计算。                                                    |
 | excludeShapes      | string[]                 |    否    | `[]`                                 | 忽略指定形状的节点，忽略后不参与障碍物计算。                                                    |
 | excludeNodes       | Node[]                   |    否    | `[]`                                 | 忽略的节点，忽略后不参与障碍物计算。                                                            |
-| excludeHiddenNodes | boolean                  |    否    | `false`                              | 忽略隐藏的节点，忽略后不参与障碍物计算。                                                        |
 | startDirections    | string[]                 |    否    | `['top', 'right', 'bottom', 'left']` | 支持从哪些方向开始路由。                                                                        |
 | endDirections      | string[]                 |    否    | `['top', 'right', 'bottom', 'left']` | 支持从哪些方向结束路由。                                                                        |
 | padding            | SideOptions              |    否    | 20                                   | 设置锚点距离转角的最小距离，和 orth 路由配置一致。                                              |

sites/x6-sites/docs/temp/attrs.zh.md

@@ -63,7 +63,7 @@ graph.addNode({
 上面这些属性默认相对于节点的大小进行计算，另外我们可以通过 `ref` 属性来提供一个子元素选择器，这时所有的计算都相对于 `ref` 指代的元素，从而实现相对于子元素的大小和位置。
 
 :::warning{title=注意：}
-| 需要注意的是，设置 `ref` 后，所有计算都依赖子元素在浏览器中的 bbox 测量，所以性能会比相对于节点的方式要慢。
+需要注意的是，设置 `ref` 后，所有计算都依赖子元素在浏览器中的 bbox 测量，所以性能会比相对于节点的方式要慢。
 :::
 
 ```ts

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

@@ -68,7 +68,7 @@ X6 支持使用 `SVG`、`HTML` 来渲染节点内容，在此基础上，我们
 
 ### 4. 使用插件
 
-除了基本的元素渲染能力，X6 还内置了大量的图编辑配套插件，使用这些成熟的插件，能很大程度上降低开发成本。下面为画布增加对齐线功能，当移动的节点与其他节点对齐时，会自动出现对齐线，可以方面用户进行位置排版。
+除了基本的元素渲染能力，X6 还内置了大量的图编辑配套插件，使用这些成熟的插件，能很大程度上降低开发成本。下面为画布增加对齐线功能，当移动的节点与其他节点对齐时，会自动出现对齐线，可以方便用户进行位置排版。
 
 ```ts
 import { Snapline } from "@antv/x6-plugin-snapline";

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

@@ -132,6 +132,37 @@ cleanHistory(options?: KeyValue): this
 
 清空历史队列。`options` 将被传递到事件回调中。
 
+### graph.getHistoryStackSize(...)
+```sign
+getHistoryStackSize(): number
+```
+
+获取history栈的尺寸。
+
+
+### graph.getUndoRemainSize(...)
+```sign
+getUndoRemainSize(): number
+```
+
+获取history undo栈的剩余尺寸。
+
+### graph.getUndoStackSize(...)
+```sign
+getUndoStackSize(): number
+```
+
+获取history undo栈的尺寸。
+
+### graph.getRedoStackSize(...)
+```sign
+getRedoStackSize(): number
+```
+
+获取history redo栈的尺寸。
+
+
+
 ### graph.isHistoryEnabled()
 
 ```sign

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

@@ -7,7 +7,7 @@ redirect_from:
   - /zh/docs/tutorial/plugins
 ---
 
-:::info{title=在本章节中，主要介绍图形图形变换插件，通过阅读，你可以了解到：}
+:::info{title=在本章节中，主要介绍图形变换插件，通过阅读，你可以了解到：}
 
 - 如何通过交互插件调整节点大小
 - 如果通过交互插件调整节点旋转角度

sites/x6-sites/examples/edge/connector/demo/meta.json

@@ -38,7 +38,7 @@
         "zh": "二次贝塞尔曲线",
         "en": "Quadratic Bessel Curve"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*WJj5ToqfFz8AAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*rQ1RT61kot8AAAAAAAAAAAAADtOHAQ/original"
     },
     {
       "filename": "wobble.ts",

sites/x6-sites/examples/node/custom-node/demo/cylinder.ts

@@ -0,0 +1,137 @@
+import { Graph, NumberExt } from '@antv/x6'
+
+Graph.registerNode('cylinder', {
+  markup: [
+    {
+      tagName: 'path',
+      selector: 'body',
+    },
+    {
+      tagName: 'ellipse',
+      selector: 'top',
+    },
+    {
+      tagName: 'text',
+      selector: 'label',
+    },
+  ],
+  attrs: {
+    body: {
+      fill: '#ffffff',
+      stroke: '#333333',
+      strokeWidth: 2,
+      lateral: 10,
+    },
+    top: {
+      fill: '#ffffff',
+      stroke: '#333333',
+      strokeWidth: 2,
+      refCx: '50%',
+      refRx: '50%',
+      cy: 10,
+      ry: 10,
+    },
+  },
+  attrHooks: {
+    lateral: {
+      set(t: number | string, { refBBox }) {
+        const isPercentage = NumberExt.isPercentage(t)
+        if (isPercentage) {
+          // eslint-disable-next-line
+          t = parseFloat(t as string) / 100
+        }
+
+        const x = refBBox.x
+        const y = refBBox.y
+        const w = refBBox.width
+        const h = refBBox.height
+
+        // curve control point variables
+        const rx = w / 2
+        const ry = isPercentage ? h * (t as number) : (t as number)
+
+        const kappa = 0.551784
+        const cx = kappa * rx
+        const cy = kappa * ry
+
+        // shape variables
+        const xLeft = x
+        const xCenter = x + w / 2
+        const xRight = x + w
+
+        const ySideTop = y + ry
+        const yCurveTop = ySideTop - ry
+        const ySideBottom = y + h - ry
+        const yCurveBottom = y + h
+
+        // return calculated shape
+        const data = [
+          'M',
+          xLeft,
+          ySideTop,
+          'L',
+          xLeft,
+          ySideBottom,
+          'C',
+          x,
+          ySideBottom + cy,
+          xCenter - cx,
+          yCurveBottom,
+          xCenter,
+          yCurveBottom,
+          'C',
+          xCenter + cx,
+          yCurveBottom,
+          xRight,
+          ySideBottom + cy,
+          xRight,
+          ySideBottom,
+          'L',
+          xRight,
+          ySideTop,
+          'C',
+          xRight,
+          ySideTop - cy,
+          xCenter + cx,
+          yCurveTop,
+          xCenter,
+          yCurveTop,
+          'C',
+          xCenter - cx,
+          yCurveTop,
+          xLeft,
+          ySideTop - cy,
+          xLeft,
+          ySideTop,
+          'Z',
+        ]
+
+        return { d: data.join(' ') }
+      },
+    },
+  },
+})
+
+const graph = new Graph({
+  container: document.getElementById('container'),
+  grid: true,
+})
+
+graph.addNode({
+  shape: 'cylinder',
+  x: 320,
+  y: 120,
+  width: 80,
+  height: 120,
+  label: 'cylinder',
+  attrs: {
+    top: {
+      fill: '#fe854f',
+      fillOpacity: 0.5,
+    },
+    body: {
+      fill: '#ED8A19',
+      fillOpacity: 0.8,
+    },
+  },
+})

sites/x6-sites/examples/node/custom-node/demo/meta.json

@@ -8,6 +8,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*PJn8T5hMua8AAAAAAAAAAAAAARQnAQ"
     },
+    {
+      "filename": "cylinder.ts",
+      "title": {
+        "zh": "Cylinder",
+        "en": "Cylinder"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*MkDMTaYuFAUAAAAAAAAAAAAAARQnAQ"
+    },
     {
       "filename": "custom-icon-with-svg.ts",
       "title": {

sites/x6-sites/examples/node/native-node/demo/cylinder.ts

@@ -1,25 +0,0 @@
-import { Graph } from '@antv/x6'
-
-const graph = new Graph({
-  container: document.getElementById('container'),
-  grid: true,
-})
-
-graph.addNode({
-  shape: 'cylinder',
-  x: 320,
-  y: 120,
-  width: 80,
-  height: 120,
-  label: 'cylinder',
-  attrs: {
-    top: {
-      fill: '#fe854f',
-      fillOpacity: 0.5,
-    },
-    body: {
-      fill: '#ED8A19',
-      fillOpacity: 0.8,
-    },
-  },
-})

sites/x6-sites/examples/node/native-node/demo/meta.json

@@ -48,14 +48,6 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t6wZQarashoAAAAAAAAAAAAAARQnAQ"
     },
-    {
-      "filename": "cylinder.ts",
-      "title": {
-        "zh": "Cylinder",
-        "en": "Cylinder"
-      },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*MkDMTaYuFAUAAAAAAAAAAAAAARQnAQ"
-    },
     {
       "filename": "image.ts",
       "title": {

sites/x6-sites/examples/showcase/practices/demo/orgchart.ts

@@ -199,14 +199,12 @@ function setup() {
       'New Employee',
       Math.random() < 0.5 ? male : female,
     )
-    graph.freeze()
     graph.addCell([member, createEdge(node, member)])
     layout()
   })
 
   graph.on('node:delete', ({ e, node }) => {
     e.stopPropagation()
-    graph.freeze()
     graph.removeCell(node)
     layout()
   })
@@ -248,8 +246,6 @@ function layout() {
     const sourceBBox = source.getBBox()
     const targetBBox = target.getBBox()
 
-    console.log(sourceBBox, targetBBox)
-
     if ((dir === 'LR' || dir === 'RL') && sourceBBox.y !== targetBBox.y) {
       const gap =
         dir === 'LR'

sites/x6-sites/package.json

@@ -1,10 +1,10 @@
 {
   "private": true,
   "name": "@antv/x6-sites",
-  "version": "1.5.5",
+  "version": "1.6.5",
   "description": "X6 sites deployed on gh-pages",
   "scripts": {
-    "dev": "dumi dev",
+    "start": "dumi dev",
     "build": "dumi build",
     "clean": ""
   },

sites/x6-sites/src/tutorial/basic/edge/connector/index.less

@@ -1,14 +1,14 @@
-.app {
+.connector-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }

sites/x6-sites/src/tutorial/basic/edge/connector/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -92,8 +92,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="connector-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.less

@@ -1,14 +1,14 @@
-.app {
+.custom-marker-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }

sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -43,8 +43,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="custom-marker-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/edge/labels/index.less

@@ -1,14 +1,14 @@
-.app {
+.labels-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }

sites/x6-sites/src/tutorial/basic/edge/labels/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -106,8 +106,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="labels-app ">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/edge/native-marker/index.less

@@ -1,14 +1,14 @@
-.app {
+.native-marker-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }

sites/x6-sites/src/tutorial/basic/edge/native-marker/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 const markers = [
   'block',
@@ -47,8 +47,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="native-marker-app ">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/edge/prop/index.less

@@ -1,21 +1,19 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.prop-app {
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-btns {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-btns {
+    bottom: 0;
+    margin: 0;
+    padding: 0 8px;
+  }
 
-.app-content {
-  height: 240px;
-  margin-top: 16px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  .app-content {
+    width: 100%;
+    height: 240px;
+    margin: 0;
+    margin-top: 16px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 }

sites/x6-sites/src/tutorial/basic/edge/prop/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph, Color } from '@antv/x6'
 import { Button } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 const commands = [
   {
@@ -103,8 +103,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-btns']}>
+      <div className="prop-app">
+        <div className="app-btns">
           <Button.Group>
             {commands.map((item) => (
               <Button onClick={() => this.change(item.key)} key={item.key}>
@@ -113,7 +113,7 @@ export default class Example extends React.Component {
             ))}
           </Button.Group>
         </div>
-        <div className={styles['app-content']} ref={this.refContainer} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/edge/registry/index.less

@@ -1,15 +1,15 @@
-.app {
+.registry-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
-}
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
+}

sites/x6-sites/src/tutorial/basic/edge/registry/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerEdge('double-edge', {
   inherit: 'edge',
@@ -134,8 +134,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="registry-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/edge/router/index.less

@@ -1,14 +1,14 @@
-.app {
+.router-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }

sites/x6-sites/src/tutorial/basic/edge/router/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -91,8 +91,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="router-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/edge/vertices/index.less

@@ -1,14 +1,14 @@
-.app {
+.vertices-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }

sites/x6-sites/src/tutorial/basic/edge/vertices/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -90,8 +90,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="vertices-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/event/custom-click/index.less

@@ -1,14 +1,14 @@
-.app {
+.custom-click-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 200px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 200px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }

sites/x6-sites/src/tutorial/basic/event/custom-click/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-click-node',
@@ -134,8 +134,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="custom-click-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/interacting/connecting/index.less

@@ -1,45 +1,18 @@
-.app {
+.connecting-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-side {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-side {
+    bottom: 0;
+    height: 100%;
+    padding: 0 8px;
+  }
 
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
-
-:global {
-  .ant-card {
-    min-height: 250px;
+  .app-content {
+    flex: 1;
+    margin-top: 0;
     box-shadow: 0 0 10px 1px #e9e9e9;
   }
-  
-  .ant-card-head-title {
-    text-align: center;
-  }
-  
-  .ant-row {
-    margin: 16px 0;
-    text-align: left;
-  }
-}
-
-.slider-value {
-  display: inline-block;
-  margin-left: 8px;
-  padding: 3px 7px;
-  color: #333;
-  font-size: 12px;
-  line-height: 1.25;
-  background: #eee;
-  border-radius: 10px;
 }

sites/x6-sites/src/tutorial/basic/interacting/connecting/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -192,11 +192,11 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="connecting-app">
+        <div className="app-side">
           <Settings onChange={this.onSettingChanged} />
         </div>
-        <div className={styles['app-content']} ref={this.refContainer} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/interacting/embedding/index.less

@@ -1,14 +1,14 @@
-.app {
+.embedding-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }

sites/x6-sites/src/tutorial/basic/interacting/embedding/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -94,8 +94,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="embedding-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/interacting/highlighting/index.less

@@ -1,15 +1,15 @@
-.app {
+.highlighting-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 }

sites/x6-sites/src/tutorial/basic/interacting/highlighting/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node-width-port',
@@ -142,8 +142,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="highlighting-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/interacting/interacting/index.less

@@ -1,36 +1,33 @@
-.app {
+.interacting-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
+
+  .app-side {
+    bottom: 0;
+    height: 100%;
+    padding: 0 8px;
+  }
+
+  .app-content {
+    flex: 1;
+    margin-top: 0;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
 
-.app-side {
-  bottom: 0;
-  padding: 0 8px;
-}
-
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
+.ant-card {
+  min-height: 250px;
   box-shadow: 0 0 10px 1px #e9e9e9;
 }
 
-:global {
-  .ant-card {
-    min-height: 250px;
-    box-shadow: 0 0 10px 1px #e9e9e9;
-  }
-  
-  .ant-card-head-title {
-    text-align: center;
-  }
-  
-  .ant-row {
-    margin: 16px 0;
-    text-align: left;
-  }
+.ant-card-head-title {
+  text-align: center;
+}
+
+.ant-row {
+  margin: 16px 0;
+  text-align: left;
 }
 
 .slider-value {

sites/x6-sites/src/tutorial/basic/interacting/interacting/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -193,11 +193,11 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="interacting-app">
+        <div className="app-side">
           <Settings onChange={this.onSettingChanged} />
         </div>
-        <div className={styles['app-content']} ref={this.refContainer} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/interacting/validate/index.less

@@ -1,15 +1,15 @@
-.app {
+.validate-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 }

sites/x6-sites/src/tutorial/basic/interacting/validate/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node-width-port',
@@ -196,8 +196,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="validate-app ">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/node/prop/index.less

@@ -1,21 +1,19 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.node-prop-app {
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-btns {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-btns {
+    bottom: 0;
+    margin: 0;
+    padding: 0 8px;
+  }
 
-.app-content {
-  height: 240px;
-  margin-top: 16px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  .app-content {
+    width: 100%;
+    height: 240px;
+    margin: 0;
+    margin-top: 16px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 }

sites/x6-sites/src/tutorial/basic/node/prop/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph, Color } from '@antv/x6'
 import { Button } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -123,8 +123,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-btns']}>
+      <div className="node-prop-app ">
+        <div className="app-btns">
           <Button.Group>
             {commands.map((item) => (
               <Button onClick={() => this.change(item.key)} key={item.key}>
@@ -133,7 +133,7 @@ export default class Example extends React.Component {
             ))}
           </Button.Group>
         </div>
-        <div className={styles['app-content']} ref={this.refContainer} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/node/registry/index.less

@@ -1,15 +1,15 @@
-.app {
+.registry-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 }

sites/x6-sites/src/tutorial/basic/node/registry/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -88,8 +88,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="registry-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/node/shapes/index.less

@@ -1,15 +1,15 @@
-.app {
+.shapes-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 }

sites/x6-sites/src/tutorial/basic/node/shapes/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 const commonAttrs = {
   body: {
@@ -116,8 +116,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="shapes-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/ports/config/index.less

@@ -1,15 +1,15 @@
-.app {
+.config-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 }

sites/x6-sites/src/tutorial/basic/ports/config/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node-width-port',
@@ -114,8 +114,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="config-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/ports/dynamic/index.less

@@ -1,21 +1,19 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.dynamic-app {
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-btns {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-btns {
+    bottom: 0;
+    margin: 0;
+    padding: 0 8px;
+  }
 
-.app-content {
-  height: 240px;
-  margin-top: 16px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  .app-content {
+    width: 100%;
+    height: 240px;
+    margin: 0;
+    margin-top: 16px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 }

sites/x6-sites/src/tutorial/basic/ports/dynamic/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph, Node, Color } from '@antv/x6'
 import { Button } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node-width-port',
@@ -128,8 +128,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-btns']}>
+      <div className="dynamic-app">
+        <div className="app-btns">
           <Button.Group>
             {commands.map((item) => (
               <Button onClick={() => this.change(item.key)} key={item.key}>
@@ -138,7 +138,7 @@ export default class Example extends React.Component {
             ))}
           </Button.Group>
         </div>
-        <div className={styles['app-content']} ref={this.refContainer} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/basic/serialization/to-json/index.less

@@ -1,19 +1,18 @@
-.app {
+.to-json-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-side {
-  width: 320px;
-  height: 280px;
-  overflow: auto;
-}
+  .app-side {
+    width: 320px;
+    height: 280px;
+    overflow: auto;
+  }
 
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }

sites/x6-sites/src/tutorial/basic/serialization/to-json/index.tsx

@@ -3,7 +3,7 @@ import { Graph } from '@antv/x6'
 import hljs from 'highlight.js/lib/core'
 import json from 'highlight.js/lib/languages/json'
 import 'highlight.js/styles/github.css'
-import styles from './index.less'
+import './index.less'
 
 hljs.registerLanguage('json', json)
 
@@ -86,13 +86,13 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="to-json-app">
+        <div className="app-side">
           <pre>
             <code className="language-json" ref={this.refCode} />
           </pre>
         </div>
-        <div className={styles['app-content']} ref={this.refContainer} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/intermediate/connection-point/multi/index.less

@@ -1,15 +1,15 @@
-.app {
+.multi-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 }

sites/x6-sites/src/tutorial/intermediate/connection-point/multi/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -136,8 +136,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="multi-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/intermediate/group/collapsable/index.less

@@ -1,14 +1,14 @@
-.app {
+.collapsable-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 360px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 360px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }

sites/x6-sites/src/tutorial/intermediate/group/collapsable/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
 import { Group } from './shape'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-group-node',
@@ -146,8 +146,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="collapsable-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/intermediate/group/embed-edge/index.less

@@ -1,14 +1,14 @@
-.app {
+.embed-edge-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 240px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 240px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }

sites/x6-sites/src/tutorial/intermediate/group/embed-edge/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-group-node',
@@ -82,8 +82,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="embed-edge-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/index.less

@@ -1,45 +1,42 @@
-.app {
+.expand-shrink-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-side {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-side {
+    bottom: 0;
+    padding: 0 8px;
+  }
 
-.app-content {
-  flex: 1;
-  height: 240px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-content {
+    flex: 1;
+    height: 240px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
+
+  .slider-value {
+    display: inline-block;
+    margin-left: 8px;
+    padding: 3px 7px;
+    color: #333;
+    font-size: 12px;
+    line-height: 1.25;
+    background: #eee;
+    border-radius: 10px;
+  }
 
-:global {
   .ant-card {
     box-shadow: 0 0 10px 1px #e9e9e9;
   }
-  
+
   .ant-card-head-title {
     text-align: center;
   }
-  
+
   .ant-row {
     margin: 16px 0;
     text-align: left;
   }
 }
-
-.slider-value {
-  display: inline-block;
-  margin-left: 8px;
-  padding: 3px 7px;
-  color: #333;
-  font-size: 12px;
-  line-height: 1.25;
-  background: #eee;
-  border-radius: 10px;
-}

sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph, Dom } from '@antv/x6'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-group-node',
@@ -171,11 +171,11 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="expand-shrink-app">
+        <div className="app-side">
           <Settings onChange={this.onSettingsChanged} />
         </div>
-        <div className={styles['app-content']} ref={this.refContainer} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/settings.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Card, Row, Col, Slider } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 export interface Props {
   onChange: (res: State) => void
@@ -47,7 +47,7 @@ export class Settings extends React.Component<Props, State> {
             />
           </Col>
           <Col span={1} offset={1}>
-            <div className={styles['slider-value']}>{this.state.padding}</div>
+            <div className="slider-value">{this.state.padding}</div>
           </Col>
         </Row>
         <Row align="middle" style={{ borderTop: '1px solid #f0f0f0' }}>