fix: throw error when render edge without terminal (#3331)

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

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-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-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-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/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-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/package.json

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

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 {
@@ -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/CHANGELOG.md

@@ -1,3 +1,9 @@
+## @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/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/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/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.3",
   "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' }}>

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

@@ -1,14 +1,14 @@
-.app {
+.restrict-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/restrict/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',
@@ -73,8 +73,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="restrict-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/intermediate/html/basic/index.less

@@ -1,43 +1,42 @@
-.app {
+.html-basic-app {
   display: flex;
   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;
+  }
 
-.custom-html {
-  width: 100%;
-  height: 100%;
-  background: #333232;
-  border-radius: 1em;
-  box-shadow: 0 0.125em 0.3125em rgb(0 0 0 / 25%),
-    0 0.02125em 0.06125em rgb(0 0 0 / 25%);
-  perspective: 600px;
-
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: 0;
+  .custom-html {
     width: 100%;
-    height: 50%;
-    background: #333232
-      linear-gradient(180deg, rgb(0 0 0 / 10%) 50%, rgb(0 0 0 / 40%));
-    border-radius: 0 0 1em 1em;
-    transform: rotateX(180deg);
-    transform-origin: center top;
-    transition: 0.7s ease-in-out transform;
-    content: ' ';
-  }
+    height: 100%;
+    background: #333232;
+    border-radius: 1em;
+    box-shadow: 0 0.125em 0.3125em rgb(0 0 0 / 25%),
+      0 0.02125em 0.06125em rgb(0 0 0 / 25%);
+    perspective: 600px;
 
-  &:hover::before {
-    transform: rotateX(0);
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: 50%;
+      background: #333232
+        linear-gradient(180deg, rgb(0 0 0 / 10%) 50%, rgb(0 0 0 / 40%));
+      border-radius: 0 0 1em 1em;
+      transform: rotateX(180deg);
+      transform-origin: center top;
+      transition: 0.7s ease-in-out transform;
+      content: ' ';
+    }
+
+    &:hover::before {
+      transform: rotateX(0);
+    }
   }
-}
+}

sites/x6-sites/src/tutorial/intermediate/html/basic/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph, Shape } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Shape.HTML.register({
   shape: 'custom-html',
@@ -9,7 +9,7 @@ Shape.HTML.register({
   effect: ['data'],
   html() {
     const div = document.createElement('div')
-    div.className = styles['custom-html']
+    div.className = 'custom-html'
     return div
   },
 })
@@ -40,8 +40,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="html-basic-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/intermediate/html/update/index.less

@@ -1,43 +1,42 @@
-.app {
+.html-update-app {
   display: flex;
   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;
+  }
 
-.custom-html {
-  width: 100%;
-  height: 100%;
-  background: #333232;
-  border-radius: 1em;
-  box-shadow: 0 0.125em 0.3125em rgb(0 0 0 / 25%),
-    0 0.02125em 0.06125em rgb(0 0 0 / 25%);
-  perspective: 600px;
-
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: 0;
+  .custom-html {
     width: 100%;
-    height: 50%;
-    background: #333232
-      linear-gradient(180deg, rgb(0 0 0 / 10%) 50%, rgb(0 0 0 / 40%));
-    border-radius: 0 0 1em 1em;
-    transform: rotateX(180deg);
-    transform-origin: center top;
-    transition: 0.7s ease-in-out transform;
-    content: ' ';
-  }
+    height: 100%;
+    background: #333232;
+    border-radius: 1em;
+    box-shadow: 0 0.125em 0.3125em rgb(0 0 0 / 25%),
+      0 0.02125em 0.06125em rgb(0 0 0 / 25%);
+    perspective: 600px;
 
-  &:hover::before {
-    transform: rotateX(0);
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: 50%;
+      background: #333232
+        linear-gradient(180deg, rgb(0 0 0 / 10%) 50%, rgb(0 0 0 / 40%));
+      border-radius: 0 0 1em 1em;
+      transform: rotateX(180deg);
+      transform-origin: center top;
+      transition: 0.7s ease-in-out transform;
+      content: ' ';
+    }
+
+    &:hover::before {
+      transform: rotateX(0);
+    }
   }
-}
+}

sites/x6-sites/src/tutorial/intermediate/html/update/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph, Shape, Color } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Shape.HTML.register({
   shape: 'custom-update-html',
@@ -10,7 +10,7 @@ Shape.HTML.register({
   html(cell) {
     const { color } = cell.getData()
     const div = document.createElement('div')
-    div.className = styles['custom-html']
+    div.className = 'custom-html'
     div.style.background = color
     return div
   },
@@ -51,8 +51,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="html-update-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/intermediate/react/basic/index.less

@@ -1,24 +1,23 @@
-.app {
+.react-basic-app {
   display: flex;
   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;
+  }
 
-.react-node {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border: 1px solid #8f8f8f;
-  border-radius: 6px;
+  .react-node {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #8f8f8f;
+    border-radius: 6px;
+  }
 }

sites/x6-sites/src/tutorial/intermediate/react/basic/index.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 import { Graph } from '@antv/x6'
 import { register } from '@antv/x6-react-shape'
 import { Progress } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 const NodeComponent = () => {
   return (
-    <div className={styles['react-node']}>
+    <div className="react-node">
       <Progress type="circle" percent={30} width={80} />
     </div>
   )
@@ -45,8 +45,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="react-basic-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/intermediate/react/portal/index.less

@@ -1,31 +1,29 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.react-portal-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%);
+  }
 
-.react-node {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border: 1px solid #8f8f8f;
-  border-radius: 6px;
+  .react-node {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #8f8f8f;
+    border-radius: 6px;
+  }
 }

sites/x6-sites/src/tutorial/intermediate/react/portal/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Graph } from '@antv/x6'
 import { register, Portal } from '@antv/x6-react-shape'
 import { Progress, Button } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 const X6ReactPortalProvider = Portal.getProvider() // 注意，一个 graph 只能申明一个 portal provider
 const ProgressContext = React.createContext(30)
@@ -10,7 +10,7 @@ const ProgressContext = React.createContext(30)
 const NodeComponent = () => {
   const progress = React.useContext(ProgressContext)
   return (
-    <div className={styles['react-node']}>
+    <div className="react-node">
       <Progress type="circle" percent={progress} width={80} />
     </div>
   )
@@ -59,14 +59,14 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
+      <div className="react-portal-app">
         <ProgressContext.Provider value={this.state.progress}>
           <X6ReactPortalProvider />
         </ProgressContext.Provider>
-        <div className={styles['app-btns']}>
+        <div className="app-btns">
           <Button onClick={this.changeProgress}>Add</Button>
         </div>
-        <div className={styles['app-content']} ref={this.refContainer} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/intermediate/react/update/index.less

@@ -1,24 +1,23 @@
-.app {
+.react-update-app {
   display: flex;
   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;
+  }
 
-.react-node {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border: 1px solid #8f8f8f;
-  border-radius: 6px;
+  .react-node {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #8f8f8f;
+    border-radius: 6px;
+  }
 }

sites/x6-sites/src/tutorial/intermediate/react/update/index.tsx

@@ -2,12 +2,12 @@ import React from 'react'
 import { Graph, Node } from '@antv/x6'
 import { register } from '@antv/x6-react-shape'
 import { Progress } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 const NodeComponent = ({ node }: { node: Node }) => {
   const { progress } = node.getData()
   return (
-    <div className={styles['react-node']}>
+    <div className="react-node">
       <Progress type="circle" percent={progress} width={80} />
     </div>
   )
@@ -57,8 +57,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="react-update-app ">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/intermediate/tools/basic/index.less

@@ -1,14 +1,14 @@
-.app {
+.tools-basic-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/intermediate/tools/basic/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-tools-node',
@@ -70,8 +70,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="tools-basic-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/intermediate/tools/onhover/index.less

@@ -1,14 +1,13 @@
-.app {
+.tools-onhover-app {
   display: flex;
   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/intermediate/tools/onhover/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-tools-node',
@@ -99,8 +99,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="tools-onhover-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/plugins/clipboard/index.less

@@ -1,28 +1,36 @@
-.app {
+.clipboard-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-btns {
-  display: flex;
-  margin-top: 16px;
-}
+    .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;
+    }
 
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+    .app-btns {
+      display: flex;
+      margin-top: 16px;
+    }
+  }
+
+  .app-content {
+    flex: 1;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-:global {
   .ant-btn {
     flex: 1;
     margin-right: 8px;
@@ -35,11 +43,11 @@
   .ant-card {
     box-shadow: 0 0 10px 1px #e9e9e9;
   }
-  
+
   .ant-card-head-title {
     text-align: center;
   }
-  
+
   .ant-row {
     margin: 16px 0;
     text-align: left;
@@ -48,19 +56,8 @@
   .x6-widget-selection-box {
     border: 2px dashed #239edd;
   }
-  
+
   .x6-widget-selection-inner {
     border: 1px solid #239edd;
   }
 }
-
-.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/plugins/clipboard/index.tsx

@@ -4,7 +4,7 @@ import { Graph } from '@antv/x6'
 import { Clipboard } from '@antv/x6-plugin-clipboard'
 import { Selection } from '@antv/x6-plugin-selection'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -126,10 +126,10 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="clipboard-app">
+        <div className="app-side">
           <Settings onChange={this.onSettingsChanged} />
-          <div className={styles['app-btns']}>
+          <div className="app-btns">
             <Button onClick={this.onCopy} type="primary">
               Copy Selected Cells
             </Button>
@@ -138,7 +138,7 @@ export default class Example extends React.Component {
             </Button>
           </div>
         </div>
-        <div className={styles['app-content']} ref={this.refContainer} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/plugins/clipboard/settings.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Checkbox, Slider, Card, Row, Col } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 export interface Props {
   onChange: (res: State) => void
@@ -50,7 +50,7 @@ export class Settings extends React.Component<Props, State> {
         <Row align="middle">
           <Col span={8}>Paste Offset</Col>
           <Col span={2} offset={1}>
-            <div className={styles['slider-value']}>{this.state.offset}</div>
+            <div className="slider-value">{this.state.offset}</div>
           </Col>
         </Row>
         <Row align="middle">

sites/x6-sites/src/tutorial/plugins/dnd/index.less

@@ -1,46 +1,45 @@
-.app {
+.dnd-app {
   display: flex;
   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;
+  }
 
-.dnd-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 200px;
-  padding: 16px;
-  border: 1px solid #f0f0f0;
-  user-select: none;
-}
+  .dnd-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 200px;
+    padding: 16px;
+    border: 1px solid #f0f0f0;
+    user-select: none;
 
-.dnd-rect {
-  width: 100px;
-  height: 40px;
-  margin: 16px;
-  line-height: 40px;
-  text-align: center;
-  border: 1px solid #8f8f8f;
-  border-radius: 6px;
-  cursor: move;
-}
+    .dnd-rect {
+      width: 100px;
+      height: 40px;
+      margin: 16px;
+      line-height: 40px;
+      text-align: center;
+      border: 1px solid #8f8f8f;
+      border-radius: 6px;
+      cursor: move;
+    }
 
-.dnd-circle {
-  width: 60px;
-  height: 60px;
-  margin: 16px;
-  line-height: 60px;
-  text-align: center;
-  border: 1px solid #8f8f8f;
-  border-radius: 100%;
-  cursor: move;
+    .dnd-circle {
+      width: 60px;
+      height: 60px;
+      margin: 16px;
+      line-height: 60px;
+      text-align: center;
+      border: 1px solid #8f8f8f;
+      border-radius: 100%;
+      cursor: move;
+    }
+  }
 }

sites/x6-sites/src/tutorial/plugins/dnd/index.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Graph } from '@antv/x6'
 import { Dnd } from '@antv/x6-plugin-dnd'
 import { Snapline } from '@antv/x6-plugin-snapline'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private graph: Graph
@@ -130,25 +130,25 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['dnd-wrap']} ref={this.dndContainerRef}>
+      <div className="dnd-app">
+        <div className="dnd-wrap" ref={this.dndContainerRef}>
           <div
             data-type="rect"
-            className={styles['dnd-rect']}
+            className="dnd-rect"
             onMouseDown={this.startDrag}
           >
             Rect
           </div>
           <div
             data-type="circle"
-            className={styles['dnd-circle']}
+            className="dnd-circle"
             onMouseDown={this.startDrag}
           >
             Circle
           </div>
         </div>
 
-        <div className={styles['app-content']} ref={this.refContainer} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/plugins/history/index.less

@@ -1,20 +1,18 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.history-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;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    width: 100%;
+    height: 240px;
+    margin: 0;
+    margin-top: 16px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }

sites/x6-sites/src/tutorial/plugins/history/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Button } from 'antd'
 import { Graph } from '@antv/x6'
 import { History } from '@antv/x6-plugin-history'
-import styles from './index.less'
+import './index.less'
 
 interface Props {}
 
@@ -75,8 +75,8 @@ export default class App extends React.Component<Props, State> {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-btns']}>
+      <div className="history-app">
+        <div className="app-btns">
           <Button.Group>
             <Button onClick={this.onUndo} disabled={!this.state.canUndo}>
               Undo
@@ -86,7 +86,7 @@ export default class App extends React.Component<Props, State> {
             </Button>
           </Button.Group>
         </div>
-        <div ref={this.refContainer} className={styles['app-content']} />
+        <div ref={this.refContainer} className="app-content" />
       </div>
     )
   }

sites/x6-sites/src/tutorial/plugins/keyboard/index.less

@@ -1,39 +1,36 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.keyboard-app {
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-info {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-info {
+    bottom: 0;
+    margin: 0;
+    padding: 0 8px;
+  }
 
-.app-info span {
-  display: inline-block;
-  margin-right: 8px;
-  padding: 2px 8px;
-  font-size: 12px;
-  line-height: 18px;
-  background: #e9e9e9;
-  border-radius: 4px;
-}
+  .app-info span {
+    display: inline-block;
+    margin-right: 8px;
+    padding: 2px 8px;
+    font-size: 12px;
+    line-height: 18px;
+    background: #e9e9e9;
+    border-radius: 4px;
+  }
 
-.app-content {
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-content {
+    width: 100%;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-:global {
   .x6-widget-selection-box {
     border: 2px dashed #239edd;
   }
-  
+
   .x6-widget-selection-inner {
     border: 1px solid #239edd;
-  }  
-}
+  }
+}

sites/x6-sites/src/tutorial/plugins/keyboard/index.tsx

@@ -3,7 +3,7 @@ import { Graph } from '@antv/x6'
 import { Clipboard } from '@antv/x6-plugin-clipboard'
 import { Selection } from '@antv/x6-plugin-selection'
 import { Keyboard } from '@antv/x6-plugin-keyboard'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -120,14 +120,14 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-info']}>
+      <div className="keyboard-app">
+        <div className="app-info">
           <p>
             <span>Ctrl + C</span>Copy Cell
             <span style={{ marginLeft: 24 }}>Ctrl + V</span>Paste Cell
           </p>
         </div>
-        <div className={styles['app-content']} ref={this.refContainer} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/plugins/minimap/index.less

@@ -1,35 +1,32 @@
-.app {
+.minimap-app {
   display: flex;
   height: 320px;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  width: 400px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-content {
+    flex: 1;
+    width: 400px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-.x6-graph-scroller {
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-minimap {
+    width: 200px;
+    height: 150px;
+    margin-top: -10px;
+  }
 
-.app-minimap {
-  width: 200px;
-  height: 150px;
-  margin-top: -10px;
-}
-
-:global {
   .x6-widget-minimap-viewport {
     border: 2px solid #8f8f8f;
   }
-  
+
   .x6-widget-minimap-viewport-zoom {
     border: 2px solid #8f8f8f;
-  }  
-}
+  }
+
+  .x6-graph-scroller {
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
+}

sites/x6-sites/src/tutorial/plugins/minimap/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Graph } from '@antv/x6'
 import { MiniMap } from '@antv/x6-plugin-minimap'
 import { Scroller } from '@antv/x6-plugin-scroller'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -109,9 +109,9 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
-        <div className={styles['app-minimap']} ref={this.refMiniMapContainer} />
+      <div className="minimap-app">
+        <div className="app-content" ref={this.refContainer} />
+        <div className="app-minimap" ref={this.refMiniMapContainer} />
       </div>
     )
   }

sites/x6-sites/src/tutorial/plugins/scroller/index.less

@@ -1,64 +1,63 @@
-.app {
+.scroller-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-main {
-  display: flex;
-  flex-direction: column;
-  width: 600px;
-  margin-right: 8px;
-  margin-left: 8px;
-}
+    .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;
+    }
+  }
 
-.app-btns {
-  display: flex;
-  padding-top: 4px;
-  padding-bottom: 12px;
-}
+  .app-main {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-right: 8px;
+    margin-left: 8px;
 
-.app-btns .ant-btn {
-  flex: 1;
-  margin-right: 16px;
-}
+    .app-btns {
+      display: flex;
+      padding-top: 4px;
+      padding-bottom: 12px;
+    }
 
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
-}
+    .app-btns .ant-btn {
+      flex: 1;
+      margin-right: 16px;
+    }
 
-.x6-graph-scroller {
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+    .app-content {
+      flex: 1;
+      margin-right: 8px;
+      margin-left: 8px;
+    }
+  }
 
-.ant-card {
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .x6-graph-scroller {
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-.ant-card-head-title {
-  text-align: center;
-}
+  .ant-card {
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-.ant-row {
-  margin: 16px 0;
-  text-align: left;
-}
+  .ant-card-head-title {
+    text-align: center;
+  }
 
-.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;
+  .ant-row {
+    margin: 16px 0;
+    text-align: left;
+  }
 }

sites/x6-sites/src/tutorial/plugins/scroller/index.tsx

@@ -3,7 +3,7 @@ import { Button } from 'antd'
 import { Graph } from '@antv/x6'
 import { Scroller } from '@antv/x6-plugin-scroller'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 const data = {
   hello: {
@@ -131,17 +131,17 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="scroller-app">
+        <div className="app-side">
           <Settings onChange={this.onSettingsChanged} />
         </div>
-        <div className={styles['app-main']}>
-          <div className={styles['app-btns']}>
+        <div className="app-main">
+          <div className="app-btns">
             <Button onClick={this.onCenter}>Center Graph</Button>
             <Button onClick={this.onCenterContent}>Center Whole Content</Button>
             <Button onClick={this.onCenterCircle}>Center The Circle</Button>
           </div>
-          <div className={styles['app-content']} ref={this.refContainer} />
+          <div className="app-content" ref={this.refContainer} />
         </div>
       </div>
     )

sites/x6-sites/src/tutorial/plugins/scroller/settings.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Checkbox, Slider, Card, Row, Col } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 export interface Props {
   onChange: (res: State) => void
@@ -127,9 +127,7 @@ export class Settings extends React.Component<Props, State> {
             Min Visible Width
           </Col>
           <Col span={2} offset={1}>
-            <div className={styles['slider-value']}>
-              {this.state.minVisibleWidth}
-            </div>
+            <div className="slider-value">{this.state.minVisibleWidth}</div>
           </Col>
         </Row>
         <Row align="middle" style={{ marginTop: 0 }}>
@@ -155,9 +153,7 @@ export class Settings extends React.Component<Props, State> {
             Min Visible Height
           </Col>
           <Col span={2} offset={1}>
-            <div className={styles['slider-value']}>
-              {this.state.minVisibleHeight}
-            </div>
+            <div className="slider-value">{this.state.minVisibleHeight}</div>
           </Col>
         </Row>
         <Row align="middle" style={{ marginTop: 0 }}>

sites/x6-sites/src/tutorial/plugins/selection/index.less

@@ -1,40 +1,37 @@
-.app {
+.selection-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;
-  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;
+  }
 
-: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;
   }
-  
+
   .x6-widget-selection-box {
     border: 2px dashed #239edd;
   }
-  
+
   .x6-widget-selection-inner {
     border: 1px solid #239edd;
   }

sites/x6-sites/src/tutorial/plugins/selection/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Graph } from '@antv/x6'
 import { Selection } from '@antv/x6-plugin-selection'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -112,11 +112,11 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="selection-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/plugins/snapline/index.less

@@ -1,44 +1,41 @@
-.app {
+.snapline-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;
-  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;
+    }
+  }
+
+  .app-content {
+    flex: 1;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-: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/plugins/snapline/index.tsx

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