chore(release): @antv/x6@2.0.1 [skip ci]

* docs: add interacting demo

* docs: add serialization demo

* docs: add tools demo

* docs: add html render demo

* docs: add demos for react render

* docs: add demo for vue node

.codecov.yml

@@ -11,6 +11,10 @@ coverage:
         threshold: 1%
         flags:
           - x6
+      x6-common:
+        threshold: 1%
+        flags:
+          - x6-common
       x6-geometry:
         threshold: 1%
         flags:
@@ -21,6 +25,9 @@ flags:
     paths:
       # filter the folder(s) you wish to measure by that flag
       - packages/x6
+  x6-common:
+    paths:
+      - packages/x6-common
   x6-geometry:
     paths:
       - packages/x6-geometry

.eslintrc

@@ -1,3 +1,156 @@
 {
-  "extends": "@antv/eslint-config"
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint",
+    "eslint-comments",
+    "import",
+    "flowtype",
+    "jest",
+    "jsx-a11y",
+    "prettier",
+    "promise",
+    "react",
+    "react-hooks",
+    "unicorn"
+  ],
+  "extends": [
+    "airbnb-base",
+    "eslint:recommended",
+    "prettier",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:promise/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "jest": true,
+    "node": true,
+    "mocha": true,
+    "jasmine": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "requireConfigFile": false
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "no-bitwise": 0,
+    "no-continue": 0,
+    "no-lonely-if": 0,
+    "no-multi-assign": 0,
+    "no-nested-ternary": 0,
+    "no-inner-declarations": 0,
+    "no-unused-expressions": 0,
+    "max-classes-per-file": 0,
+    "prefer-destructuring": 0,
+    "class-methods-use-this": 0,
+    "implicit-arrow-linebreak": 0,
+    "lines-between-class-members": 0,
+    "@typescript-eslint/lines-between-class-members": 0,
+    "consistent-return": 0,
+    "no-return-assign": [2, "except-parens"],
+    "no-param-reassign": [
+      2,
+      {
+        "props": false
+      }
+    ],
+    "no-cond-assign": [2, "except-parens"],
+    "no-console": [
+      2,
+      {
+        "allow": ["warn", "error"]
+      }
+    ],
+    "@typescript-eslint/no-unused-expressions": [
+      2,
+      {
+        "allowShortCircuit": true,
+        "allowTernary": true
+      }
+    ],
+    "eqeqeq": [
+      2,
+      "always",
+      {
+        "null": "ignore"
+      }
+    ],
+    "func-names": [
+      1,
+      "never",
+      {
+        "generators": "as-needed"
+      }
+    ],
+    "import/export": 0,
+    "import/no-cycle": 0,
+    "import/extensions": 0,
+    "import/no-unresolved": 0,
+    "import/prefer-default-export": 0,
+    "import/no-extraneous-dependencies": 0,
+    "promise/always-return": 0,
+    "promise/catch-or-return": 0,
+    "@typescript-eslint/no-namespace": 0,
+    "@typescript-eslint/no-var-requires": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-non-null-assertion": 0,
+    "@typescript-eslint/no-empty-function": 0,
+    "@typescript-eslint/no-empty-interface": 0,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "no-shadow": 0,
+    "@typescript-eslint/no-shadow": 0,
+    "camelcase": 0,
+    "@typescript-eslint/camelcase": 0,
+    "no-use-before-define": 0,
+    "@typescript-eslint/no-use-before-define": 0,
+    "no-useless-constructor": 0,
+    "@typescript-eslint/no-useless-constructor": 0,
+    "no-unused-vars": 0,
+    "@typescript-eslint/no-unused-vars": [
+      2,
+      {
+        "vars": "all",
+        "args": "after-used",
+        "ignoreRestSiblings": true
+      }
+    ],
+    "no-redeclare": 0,
+    "@typescript-eslint/no-redeclare": [
+      2,
+      {
+        "ignoreDeclarationMerge": true
+      }
+    ],
+    "react/sort-comp": 0,
+    "react/prop-types": 0,
+    "react/jsx-props-no-spreading": 0,
+    "react/destructuring-assignment": 0,
+    "react/no-access-state-in-setstate": 0
+  },
+  "overrides": [
+    {
+      "files": ["**/*.js"],
+      "rules": {
+        "no-console": 0,
+        "global-require": 0
+      }
+    }
+  ]
 }

.github/workflows/auto-close-fixed-issues.yml

@@ -8,13 +8,12 @@ jobs:
   run:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
       - uses: wow-actions/auto-close-fixed-issues@v1
         with:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
           comment: |
             This issue was closed by #{{ pr }}.

.github/workflows/auto-comment.yml

@@ -4,11 +4,10 @@ jobs:
   comment:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
       - uses: wow-actions/auto-comment@v1
         with:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}

.github/workflows/backup/auto-assign.yml

@@ -8,12 +8,12 @@ jobs:
   run:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: wow-actions/auto-assign@v1
         with:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
           CONFIG_FILE: .github/workflows/config/auto-assign.yml

.github/workflows/backup/delete-stale-releases.yml

@@ -0,0 +1,48 @@
+name: 🚫　Delete Stale Releases
+# on:
+#   repository_dispatch:
+#     types: [released]
+# jobs:
+#   clean:
+#     runs-on: ubuntu-latest
+#     steps:
+#       - uses: wow-actions/use-app-token@v2
+#         with:
+#           app_id: ${{ secrets.APP_ID }}
+#           private_key: ${{ secrets.PRIVATE_KEY }}
+#
+#       - uses: wow-actions/delete-stale-releases@v1
+#         with:
+#           GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
+#           delete_tags: true
+#           keep_latest_count: 3
+#           group: '(?!^)@.*$'
+#           exclude: |
+#             @antv/x6@**
+#             @antv/x6-common@**
+#             @antv/x6-geometry@**
+#             @antv/x6-plugin-**@**
+#             @antv/x6-vue-shape@**
+#             @antv/x6-react-shape@**
+#             @antv/x6-angular-shape@**
+#             @antv/x6-react-components@**
+
+# delete all releases and tag
+on:
+  push:
+    branches:
+      - master
+jobs:
+  clean:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: wow-actions/use-app-token@v2
+        with:
+          app_id: ${{ secrets.APP_ID }}
+          private_key: ${{ secrets.PRIVATE_KEY }}
+
+      - uses: wow-actions/delete-stale-releases@v1
+        with:
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
+          delete_tags: true
+          keep_latest_count: -1

.github/workflows/backup/gitleaks.yml

@@ -1,6 +1,6 @@
 name: 🥤　GitLeaks
 on:
-  pull_request_target:
+  pull_request:
   push:
     branches:
       - master
@@ -10,7 +10,7 @@ jobs:
   gitleaks:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
       with:
         fetch-depth: '1'
     - name: wget

.github/workflows/ci.yml

@@ -10,53 +10,82 @@ on:
       - beta
 jobs:
   ci:
-    runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        codecov: [x6, x6-common, x6-geometry]
+    runs-on: ubuntu-latest
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v2
-      - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/checkout@v3
+
+      - name: 🎉　Setup nodejs
+        uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
-      - name: 🌱　Get Cache Directory
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: 🚸　Setup Cache
-        uses: actions/cache@v2
+          node-version: 16.x
+
+      - name: 🎉　Setup pnpm
+        uses: pnpm/action-setup@v2
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          version: 7
+          run_install: false
+
+      - name: 🌱　Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: 🚸　Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: 🚧　Prepare
-        run: yarn global add lerna
-      - name: 🚀　Bootstrap
-        run: yarn bootstrap
+            ${{ runner.os }}-pnpm-store-
+
+      - name: 🚧　Install
+        run: pnpm install --no-frozen-lockfile --ignore-scripts
+
+      - name: 🚀　Build
+        run: pnpm run build
+
       - name: ✅　Test
-        run: yarn test
+        run: pnpm run test
+
       - name: 🔑　Generate Token
-        uses: wow-actions/use-app-token@v1
+        uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
-      - name: 💡　Coveralls
-        uses: coverallsapp/github-action@master
-        with:
-          github-token: ${{ env.bot_token }}
-          path-to-lcov: ./packages/x6/test/coverage/lcov.info
-      - name: 💡　Codecov(x6)
+
+
+      - name: 💡　Codecov
         uses: codecov/codecov-action@v1
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
-          files: ./packages/x6/test/coverage/lcov.info
-          flags: x6
-      - name: 💡　Codecov(x6-geometry)
-        uses: codecov/codecov-action@v1
+          files: ./packages/${{ matrix.codecov }}/test/coverage/lcov.info
+          flags: ${{ matrix.codecov }}
+
+      - name: 🔀　Dispatch(ci_passed)
+        uses: peter-evans/repository-dispatch@v2
         with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          files: ./packages/x6-geometry/test/coverage/lcov.info
-          flags: x6-geometry
+          token: ${{ env.BOT_TOKEN }}
+          event-type: ci_passed
+
+      - name: 🔀　Dispatch(ci_pr_passed)
+        if: github.event_name == 'pull_request_target'
+        uses: peter-evans/repository-dispatch@v2
+        with:
+          token: ${{ env.BOT_TOKEN }}
+          event-type: ci_pr_passed
+
+      - name: 🔀　Dispatch(ci_master_passed)
+        if: github.event_name == 'push'
+        uses: peter-evans/repository-dispatch@v2
+        with:
+          token: ${{ env.BOT_TOKEN }}
+          event-type: ci_master_passed
+

.github/workflows/create-issue-branch.yml

@@ -6,12 +6,11 @@ jobs:
   cib:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: robvanderleek/create-issue-branch@main
         env:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}

.github/workflows/delete-stale-releases.yml

@@ -1,26 +0,0 @@
-name: 🚫　Delete Stale Releases
-on:
-  repository_dispatch:
-    types: [released]
-jobs:
-  clean:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: wow-actions/use-app-token@v1
-        with:
-          app_id: ${{ secrets.APP_ID }}
-          private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
-      - uses: wow-actions/delete-stale-releases@v1
-        with:
-          GITHUB_TOKEN: ${{ env.bot_token }}
-          delete_tags: true
-          keep_latest_count: 3
-          group: '(?!^)@.*$'
-          exclude: |
-            @antv/x6@**
-            @antv/x6-vue-shape@**
-            @antv/x6-react-shape@**
-            @antv/x6-angular-shape@**
-            @antv/x6-react-components@**

.github/workflows/deploy-sites.yml

@@ -10,7 +10,7 @@ jobs:
         node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
@@ -64,15 +64,15 @@ jobs:
         run: yarn build:sites
 
       - name: 🔑　Generate Token
-        uses: wow-actions/use-app-token@v1
+        uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
 
       - name: ✅　Deploy sites
         uses: peaceiris/actions-gh-pages@v3
         with:
-          github_token: ${{ env.bot_token }}
+          github_token: ${{ env.BOT_TOKEN }}
           publish_dir: ./sites/x6-sites/public
           publish_branch: gh-pages

.github/workflows/label-commands.yml

@@ -8,12 +8,12 @@ jobs:
   cmd:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: wow-actions/label-commands@v1
         with:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
           CONFIG_FILE: .github/workflows/config/label-commands.yml

.github/workflows/lock.yml

@@ -6,14 +6,14 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: dessant/lock-threads@v2
         with:
-          github-token: ${{ env.bot_token }}
+          github-token: ${{ env.BOT_TOKEN }}
           issue-lock-inactive-days: 365
           issue-lock-comment: |
             This thread has been automatically locked because it has not had recent activity.

.github/workflows/needs-more-info.yml

@@ -8,13 +8,13 @@ jobs:
   evaluate:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: wow-actions/needs-more-info@v1
         with:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
           CONFIG_FILE: .github/workflows/config/needs-more-info.yml
 

.github/workflows/potential-duplicates.yml

@@ -6,11 +6,11 @@ jobs:
   run:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: wow-actions/potential-duplicates@v1
         with:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}

.github/workflows/pr-label-branch-name.yml

@@ -6,13 +6,13 @@ jobs:
   label:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: TimonVS/pr-labeler-action@v3
         with:
           configuration-path: .github/workflows/config/pr-label-branch-name.yml
         env:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}

.github/workflows/pr-label-file-paths.yml

@@ -4,12 +4,12 @@ jobs:
   label:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: actions/labeler@v2
         with:
-          repo-token: ${{ env.bot_token }}
+          repo-token: ${{ env.BOT_TOKEN }}
           configuration-path: .github/workflows/config/pr-label-file-paths.yml

.github/workflows/pr-label-patch-size.yml

@@ -4,13 +4,12 @@ jobs:
   label:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: pascalgn/size-label-action@v0.4.3
         env:
-          GITHUB_TOKEN: ${{ env.bot_token }}
-          IGNORED: "!.gitignore\nyarn.lock"
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
+          IGNORED: "!.gitignore\nyarn.lock\npnpm-lock.yaml"

.github/workflows/pr-label-status.yml

@@ -9,12 +9,12 @@ jobs:
   triage:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: wow-actions/pr-triage@v1
         with:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
           WORKFLOW-ID: ${{ github.event.workflow_run.id }}

.github/workflows/pr-label-title-body.yml

@@ -11,15 +11,15 @@ jobs:
   label:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: Naturalclar/issue-action@v2.0.1
         with:
           title-or-body: title
-          github-token: ${{ env.bot_token }}
+          github-token: ${{ env.BOT_TOKEN }}
           parameters: >
             [
               {

.github/workflows/preview.yml

@@ -13,7 +13,7 @@ jobs:
       matrix:
         node-version: [16.x]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: 🌱　Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -69,17 +69,17 @@ jobs:
         run: yarn build:sites
 
       - name: 🔑　Generate Token
-        uses: wow-actions/use-app-token@v1
+        uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
 
       - name: ✅　Deploy Sites
         uses: afc163/surge-preview@v1
         with:
           surge_token: ${{ secrets.SURGE_TOKEN }}
-          github_token: ${{ env.bot_token }}
+          github_token: ${{ env.BOT_TOKEN }}
           build: |
             echo Create sites preview
           dist: sites/x6-sites/public

.github/workflows/rebase.yml

@@ -10,11 +10,11 @@ jobs:
       - uses: actions/checkout@master
         with:
           fetch-depth: 0
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: cirrus-actions/rebase@master
         env:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}

.github/workflows/release.yml

@@ -12,55 +12,64 @@ on:
 jobs:
   release:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v2
-      - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/checkout@v3
+
+      - name: 🎉　Setup nodejs
+        uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
-      - name: 🌱　Get Cache Directory
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: 🚸　Setup Cache
-        uses: actions/cache@v2
+          node-version: 16.x
+
+      - name: 🎉　Setup pnpm
+        uses: pnpm/action-setup@v2
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          version: 7
+          run_install: false
+
+      - name: 🌱　Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: 🚸　Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: 🚧　Prepare
-        run: yarn global add lerna
-      - name: 🚀　Bootstrap
-        run: yarn bootstrap
-      - name: ✅　Test
-        run: yarn test
+            ${{ runner.os }}-pnpm-store-
+
+      - name: 🚧　Install dependencies
+        run: pnpm install --no-frozen-lockfile --ignore-scripts
+
+      - name: 📦　build
+        run: pnpm run build
+
+      # - name: ✅　Test
+      #   run: pnpm run test
 
       - name: 🔑　Generate Token
-        uses: wow-actions/use-app-token@v1
+        uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
 
       - name: 📦　Semantic Release
-        run: |
-          sh ./scripts/release
+        run: pnpm srm --debug --comment-footer 'Thanks for being a part of the [AntV](https://github.com/antvis) community! 💪💯'
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GITHUB_TOKEN: ${{ env.bot_token }}
-          ACTION_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          GIT_AUTHOR_NAME: x6-bot
-          GIT_AUTHOR_EMAIL: x6-bot@users.noreply.github.com
-          GIT_COMMITTER_NAME: x6-bot
-          GIT_COMMITTER_EMAIL: x6-bot@users.noreply.github.com
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
+          GIT_AUTHOR_NAME: ${{ env.BOT_NAME }}
+          GIT_AUTHOR_EMAIL: ${{ env.BOT_NAME }}@users.noreply.github.com
+          GIT_COMMITTER_NAME: ${{ env.BOT_NAME }}
+          GIT_COMMITTER_EMAIL: ${{ env.BOT_NAME }}@users.noreply.github.com
 
       - name: 🔀　Repository Dispatch
         if: github.ref == 'refs/heads/master'
-        uses: peter-evans/repository-dispatch@v1
+        uses: peter-evans/repository-dispatch@v2
         with:
-          token: ${{ env.bot_token }}
+          token: ${{ env.BOT_TOKEN }}
           event-type: released

.github/workflows/report-monthly.yml

@@ -6,11 +6,11 @@ jobs:
   run:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: wow-actions/activity-report@v1
         with:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}

.github/workflows/report-weekly.yml

@@ -6,11 +6,11 @@ jobs:
   run:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: wow-actions/activity-report@v1
         with:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}

.github/workflows/slash-commands.yml

@@ -6,12 +6,12 @@ jobs:
   cmd:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: wow-actions/slash-commands@v1
         with:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
           CONFIG_FILE: .github/workflows/config/slash-commands.yml

.github/workflows/stale.yml

@@ -6,14 +6,14 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: actions/stale@v3
         with:
-          repo-token: ${{ env.bot_token }}
+          repo-token: ${{ env.BOT_TOKEN }}
           stale-issue-message: |
             Hiya!
 

.github/workflows/sync-labels.yml

@@ -9,14 +9,13 @@ jobs:
   sync:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: micnncim/action-label-syncer@v1
         env:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
         with:
           manifest: .github/workflows/config/labels.yml

.github/workflows/update-authors.yml

@@ -3,21 +3,25 @@ on:
   push:
     branches:
       - master
+      - next
+      - next-major
       - alpha
       - beta
 jobs:
   authors:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: wow-actions/update-authors@v1
         with:
-          GITHUB_TOKEN: ${{ env.bot_token  }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN  }}
           bots: false
+          path: CONTRIBUTORS
+          commit: 'chore: update CONTRIBUTORS [skip ci]'

.github/workflows/update-cache.yaml

@@ -1,39 +0,0 @@
-# Auto update cahe
-
-name: 🌈　Update Cache
-on:
-  pull_request_target:
-  push:
-    branches:
-      - master
-      - next
-      - next-major
-      - alpha
-      - beta
-jobs:
-  cache:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [16.x]
-    steps:
-      - name: ⤵️　Checkout
-        uses: actions/checkout@v2
-      - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node-version }}
-      - name: 🌱　Get Cache Directory
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: 🚸　Setup Cache
-        id: cache
-        uses: actions/cache@v2
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-      - name: 🚧　Update Cache
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: |
-          yarn global add lerna
-          lerna bootstrap

.github/workflows/update-contributors.yml

@@ -5,18 +5,20 @@ on:
   push:
     branches:
       - master
+      - next
+      - next-major
       - alpha
       - beta
 jobs:
   contributors:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: wow-actions/contributors-list@v1
         with:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
           excludeUsers: semantic-release-bot ImgBotApp

.github/workflows/update-license.yml

@@ -6,14 +6,14 @@ jobs:
   update:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
       with:
         fetch-depth: 0
-    - uses: wow-actions/use-app-token@v1
+    - uses: wow-actions/use-app-token@v2
       with:
         app_id: ${{ secrets.APP_ID }}
         private_key: ${{ secrets.PRIVATE_KEY }}
-        env_name: bot_token
+
     - uses: FantasticFiasco/action-update-license-year@v2
       with:
-        token: ${{ env.bot_token }}
+        token: ${{ env.BOT_TOKEN }}

.github/workflows/welcome.yml

@@ -8,14 +8,14 @@ jobs:
   welcome:
     runs-on: ubuntu-latest
     steps:
-      - uses: wow-actions/use-app-token@v1
+      - uses: wow-actions/use-app-token@v2
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
-          env_name: bot_token
+
       - uses: wow-actions/welcome@v1
         with:
-          GITHUB_TOKEN: ${{ env.bot_token }}
+          GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
           FIRST_ISSUE: |
             👋 @{{ author }}
 

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .vscode
 .idea
+.turbo
 npm-debug.log
 yarn-error.log
 lerna-debug.log
@@ -12,4 +13,5 @@ dist
 *.pem
 !mock-cert.pem
 tmp
-test
+test/coverage
+packages/**/src/style/raw.ts

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx @commitlint/cli --edit "$1"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.husky/pre-push

@@ -0,0 +1,14 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+branch="$(git rev-parse --abbrev-ref HEAD)"
+user="$(git config user.name)"
+whitelist=("bubkoo" "NewByVector")
+
+if [[ ! " ${whitelist[@]} " =~ " ${user} " ]]; then
+  if [ "$branch" = "master" ]; then
+    echo "Push to master branch is forbidden."
+    echo "Checkout your owne branch then submit a pr."
+    exit 1
+  fi
+fi

.prettierrc

@@ -9,6 +9,7 @@
   "overrides": [
     { "files": ".eslintrc", "options": { "parser": "json" } },
     { "files": ".prettierrc", "options": { "parser": "json" } },
+    { "files": ".releaserc", "options": { "parser": "json" } },
     { "files": ".stylelintrc", "options": { "parser": "json" } }
   ]
 }

.releaserc

@@ -0,0 +1,56 @@
+{
+  "branches": [
+    "+([0-9])?(.{+([0-9]),x}).x",
+    "master",
+    "next",
+    "next-major",
+    { "name": "beta", "prerelease": true },
+    { "name": "alpha", "prerelease": true }
+  ],
+  "plugins": [
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "angular",
+        "parserOpts": {
+          "noteKeywords": ["BREAKING CHANGE", "BREAKING CHANGES"]
+        },
+        "releaseRules": [
+          { "breaking": true, "release": "major" },
+          { "revert": true, "release": "patch" },
+          { "type": "feat", "release": "minor" },
+          { "type": "ci", "release": "patch" },
+          { "type": "build", "release": "patch" },
+          { "type": "chore", "release": "patch" },
+          { "type": "docs", "release": "patch" },
+          { "type": "perf", "release": "patch" },
+          { "type": "style", "release": "patch" },
+          { "type": "test", "release": "patch" },
+          { "type": "refactor", "release": "patch" },
+          { "scope": "no-release", "release": false }
+        ]
+      }
+    ],
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    [
+      "@semantic-release/npm",
+      {
+        "npmPublish": false
+      }
+    ],
+    [
+      "@semantic-release/github",
+      {
+        "addReleases": "bottom"
+      }
+    ],
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json", "CHANGELOG.md"],
+        "message": "chore(release): ${nextRelease.gitTag} [skip ci]"
+      }
+    ]
+  ]
+}

.stylelintrc

@@ -1,3 +1,20 @@
 {
-  "extends": ["@antv/stylelint-config"]
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-rational-order",
+    "stylelint-config-prettier"
+  ],
+  "plugins": [
+    "stylelint-order",
+    "stylelint-declaration-block-no-ignored-properties"
+  ],
+  "rules": {
+    "block-no-empty": null,
+    "function-name-case": "lower",
+    "comment-empty-line-before": null,
+    "no-invalid-double-slash-comments": null,
+    "no-descending-specificity": null,
+    "declaration-empty-line-before": null,
+    "no-duplicate-selectors": null
+  }
 }

.travis.yml

@@ -1,19 +0,0 @@
-language: node_js
-node_js:
-  - 12
-branches:
-  only:
-    - master
-cache:
-  yarn: true
-  directories:
-    - node_modules
-install:
-  - npm install -g yarn
-  - npm install -g lerna
-  - yarn bootstrap
-script:
-  - yarn build:dev
-#   - yarn test
-# after_script:
-#   - yarn coveralls

CONTRIBUTING.md

@@ -41,7 +41,7 @@ No one can guarantee how much will be remembered about certain PR after some tim
 
 ### Style Guide
 
-eslint can help to identify styling issues that may exist in your code. Your code is required to pass the test from eslint. Run the test locally by `$ yarn lint`.
+eslint can help to identify styling issues that may exist in your code. Your code is required to pass the test from eslint. Run the test locally by `$ npm run lint`.
 
 ### Commit Message Format
 

CONTRIBUTING.zh-CN.md

@@ -41,7 +41,7 @@ $ git push origin branch-name
 
 ### 代码风格
 
-你的代码风格必须通过 eslint，你可以运行 `$ yarn lint` 本地测试。
+你的代码风格必须通过 eslint，你可以运行 `$ npm run lint` 本地测试。
 
 ### Commit 提交规范
 

CONTRIBUTORS

@@ -1,4 +1,5 @@
 BARM <284942955@qq.com>
+Candy <563378816@qq.com>
 Chaoqi <HAN>
 Clifford <ajard>
 DaiGang <42136433+daigang666@users.noreply.github.com>
@@ -6,11 +7,20 @@ Dong <48054715+halodong@users.noreply.github.com>
 Draco <Draco.coder@gmail.com>
 Eve-Sama <17764594863@163.com>
 Eve-Sama <948832626@qq.com>
+Gossypol <31892817+gossypol@users.noreply.github.com>
 ImgBotApp <ImgBotHelp@gmail.com>
+Indomi <indomi126@gmail.com>
 James <san>
 Jógvan <lse>
 Ken <ei>
+Limbo <49612796+JUST-Limbo@users.noreply.github.com>
+Lixu <37231473+wflixu@users.noreply.github.com>
+Lloyd <ho>
 Lyn <47809781+lyn-boyu@users.noreply.github.com>
+MOMO <329053928@qq.com>
+Mingfei <az8641683@163.com>
+MrMengJ <2646973632@qq.com>
+Naveen <172697+naveensrinivasan@users.noreply.github.com>
 NewByVector <NewByVector@users.noreply.github.com>
 Olive.Wang <olivewind.wang@gmail.com>
 Opportunity <opportunity@live.in>
@@ -18,18 +28,25 @@ Questions <chip@twostewards.com>
 RuiLin <on>
 SSC <273702440@qq.com>
 Sindori <441933726@qq.com>
+Susan <527971893@qq.com>
+Thomas <eugne>
 Tony <>
 Utopia <greatauk11@gmail.com>
 XLZY <1017866168@qq.com>
+Xingjian <han>
 Zhenyu <o>
+arthur657834 <kingkom7834@126.com>
 boyu.zlj <boyu.zlj@antgroup.com>
 breezefaith <nyzhangzc@qq.com>
 bubkoo <bubkoo.wy@gmail.com>
 bubkoo <bubkoo@users.noreply.github.com>
 budlion <dongqi.ldq@alibaba-inc.com>
+cuidong626 <cuidong1234@outlook.com>
 daigang <1210242662@qq.com>
 doublewu <592581554@qq.com>
 iceytea <liyunheasap@yeah.net>
+jiqili <43718732+jiqili@users.noreply.github.com>
+kelin.zrh <34393362+AricZhu@users.noreply.github.com>
 kingshuaishuai <ken.wang@mrs.ai>
 kio <1421104933@qq.com>
 lijing666 <lijing241@yeah.net>
@@ -37,27 +54,38 @@ lopn <lopnxrp@126.com>
 luchunwei <luchunwei@gmail.com>
 luzhuang <364439895@qq.com>
 lvhuiyang <ilvhuiyang@gmail.com>
+myzxlin <myzxlin@163.com>
 newbyvector <vectorse@126.com>
 niexq <1879633916@qq.com>
 niexq <niexq@firstgrid.cn>
 pengxingjian.pxj <pengxingjian.pxj@alibaba-inc.com>
+pfdgithub <pfdgithub@users.noreply.github.com>
 qingchi <qinky94@163.com>
+qu <33251372+Qujh97@users.noreply.github.com>
+sallen450 <qinghua10199@gmail.com>
 semantic-release-bot <semantic-release-bot@martynus.net>
 vector <vectorse@126.com>
+wenbei <38773084+wb-wenbei@users.noreply.github.com>
 wgf <34190465+evelope@users.noreply.github.com>
+wind <>
 wjqsummer <52412389+wjqsummer@users.noreply.github.com>
 wtzeng1 <wtzeng1@gmail.com>
 x6-bot <x6-bot@users.noreply.github.com>
 xrkffgg <xrkffgg@gmail.com>
+yaojin2070 <48686959+yaojin2070@users.noreply.github.com>
 zdc1111 <39116292+zdc1111@users.noreply.github.com>
+€alix <qq287649920@gmail.com>
 九思⚡⚡⚡ <2228429150@qq.com>
 何腾飞 <avrin.live.cn@outlook.com>
 偏右 <afc163@gmail.com>
 小耀 <jinyue.gjy@antfin.com>
+崖 <bubkoo.wy@gmail.com>
 崖崖崖 <bubkoo.wy@gmail.com>
 文瑀 <wenyu.jqq@antfin.com>
 杨凌 <89915256@qq.com>
 柏愚 <boyu.zlj@antfin.com>
+粑粑超 <842486229@qq.com>
+诸岳 <dengfuping_private@163.com>
 金强强 <wenyu.jqq@antfin.com>
 问崖 <bubkoo.wy@gmail.com>
 问崖 <pengxingjian.pxj@antfin.com>

README.en-us.md

@@ -33,8 +33,8 @@
 - Server-side Rendering
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
-| --- | --- | --- | --- |
-| IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
+|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| IE11, Edge                                                                                                                                                                                                     | last 2 versions                                                                                                                                                                                                  | last 2 versions                                                                                                                                                                                              | last 2 versions                                                                                                                                                                                              |
 
 ## Installation
 
@@ -94,20 +94,16 @@ graph.addEdge({
 ## Development
 
 ```shell
-# install yarn and lerna
-$ npm install yarn -g
-$ npm install lerna -g
-
 # install deps and build
-$ yarn bootstrap
+$ pnpm install
 
 # enter the specified project development and debugging
 cd packages/x6
-yarn build:watch
+pnpm run build:watch
 
 # start example to see the effect
 cd examples/x6-example-features
-yarn start
+pnpm run start
 ```
 
 ## Contributing

README.md

@@ -33,8 +33,8 @@
 - 支持服务端渲染。
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
-| --- | --- | --- | --- |
-| IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
+|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| IE11, Edge                                                                                                                                                                                                     | last 2 versions                                                                                                                                                                                                  | last 2 versions                                                                                                                                                                                              | last 2 versions                                                                                                                                                                                              |
 
 ## 安装
 
@@ -94,20 +94,16 @@ graph.addEdge({
 ## 本地开发
 
 ```shell
-# 全局安装 yarn 和 lerna 工具
-$ npm install yarn -g
-$ npm install lerna -g
-
 # 安装项目依赖和初始化构建
-$ yarn bootstrap
+$ pnpm install
 
 # 进入到指定项目开发和调试
 cd packages/x6
-yarn build:watch
+pnpm run build:watch
 
 # 启动 example 查看效果
 cd examples/x6-example-features
-yarn start
+pnpm run start
 ```
 
 ## 参与共建
@@ -115,9 +111,10 @@ yarn start
 如果希望参与到 X6 的开发中，请遵从我们的[贡献指南](/CONTRIBUTING.zh-CN.md)。如果你贡献度足够活跃，你可以申请成为社区协作者。
 
 <a href="https://github.com/antvis/x6/graphs/contributors">
-  <img src="/CONTRIBUTORS.svg" alt="Contributors" width="740" />
+  <img src="https://raw.githubusercontent.com/antvis/X6/master/CONTRIBUTORS.svg" alt="Contributors" />
 </a>
 
+
 ## 开源协议
 
 该项目的代码和文档基于 [MIT License](/LICENSE) 开源协议。

configs/eslint-config/CHANGELOG.md

@@ -1,113 +0,0 @@
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-11-14)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-11-08)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-11-08)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-11-07)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-11-05)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-11-03)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-11-01)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-10-22)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-10-19)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-10-12)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-10-12)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-10-08)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-10-02)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-10-02)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-10-01)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-10-01)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-10-01)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-10-01)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-09-30)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-09-22)
-
-## @antv/eslint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/eslint-config@1.0.0...@antv/eslint-config@1.0.1) (2021-09-13)
-
-# @antv/eslint-config 1.0.0 (2021-06-17)
-
-
-### Bug Fixes
-
-* 🐛 fix eslint errors ([06ba121](https://github.com/antvis/x6/commit/06ba121e3b937c5aeebbbe2b24e6db67fc141cb9))
-* update dependencies and fix type errors ([#1103](https://github.com/antvis/x6/issues/1103)) ([056b862](https://github.com/antvis/x6/commit/056b862b4efe7dbdc559cac7194c2453996acc07))
-
-
-### Features
-
-* ✨ add lint rules for *.js files ([21f5436](https://github.com/antvis/x6/commit/21f54366776a304e8abb9df087c645653fb22ed5))
-* ✨ add unicorn plugin ([3e8515b](https://github.com/antvis/x6/commit/3e8515bedf0da8ca10119c8a00ffd972f3a1e3aa))
-* ✨ support bitwise ([d9bc9d9](https://github.com/antvis/x6/commit/d9bc9d92e8bec74e780a44364f9e21da5f34096b))
-
-# @antv/eslint-config 1.0.0 (2021-06-16)
-
-
-### Bug Fixes
-
-* 🐛 fix eslint errors ([06ba121](https://github.com/antvis/x6/commit/06ba121e3b937c5aeebbbe2b24e6db67fc141cb9))
-* update dependencies and fix type errors ([#1103](https://github.com/antvis/x6/issues/1103)) ([056b862](https://github.com/antvis/x6/commit/056b862b4efe7dbdc559cac7194c2453996acc07))
-
-
-### Features
-
-* ✨ add lint rules for *.js files ([21f5436](https://github.com/antvis/x6/commit/21f54366776a304e8abb9df087c645653fb22ed5))
-* ✨ add unicorn plugin ([3e8515b](https://github.com/antvis/x6/commit/3e8515bedf0da8ca10119c8a00ffd972f3a1e3aa))
-* ✨ support bitwise ([d9bc9d9](https://github.com/antvis/x6/commit/d9bc9d92e8bec74e780a44364f9e21da5f34096b))
-
-# @antv/eslint-config 1.0.0 (2021-06-15)
-
-
-### Bug Fixes
-
-* 🐛 fix eslint errors ([06ba121](https://github.com/antvis/x6/commit/06ba121e3b937c5aeebbbe2b24e6db67fc141cb9))
-
-
-### Features
-
-* ✨ add lint rules for *.js files ([21f5436](https://github.com/antvis/x6/commit/21f54366776a304e8abb9df087c645653fb22ed5))
-* ✨ add unicorn plugin ([3e8515b](https://github.com/antvis/x6/commit/3e8515bedf0da8ca10119c8a00ffd972f3a1e3aa))
-* ✨ support bitwise ([d9bc9d9](https://github.com/antvis/x6/commit/d9bc9d92e8bec74e780a44364f9e21da5f34096b))
-
-# @antv/eslint-config 1.0.0 (2021-06-15)
-
-
-### Bug Fixes
-
-* 🐛 fix eslint errors ([06ba121](https://github.com/antvis/x6/commit/06ba121e3b937c5aeebbbe2b24e6db67fc141cb9))
-
-
-### Features
-
-* ✨ add lint rules for *.js files ([21f5436](https://github.com/antvis/x6/commit/21f54366776a304e8abb9df087c645653fb22ed5))
-* ✨ add unicorn plugin ([3e8515b](https://github.com/antvis/x6/commit/3e8515bedf0da8ca10119c8a00ffd972f3a1e3aa))
-* ✨ support bitwise ([d9bc9d9](https://github.com/antvis/x6/commit/d9bc9d92e8bec74e780a44364f9e21da5f34096b))
-
-# @antv/eslint-config 1.0.0 (2021-06-11)
-
-
-### Bug Fixes
-
-* 🐛 fix eslint errors ([06ba121](https://github.com/antvis/x6/commit/06ba121e3b937c5aeebbbe2b24e6db67fc141cb9))
-
-
-### Features
-
-* ✨ add lint rules for *.js files ([21f5436](https://github.com/antvis/x6/commit/21f54366776a304e8abb9df087c645653fb22ed5))
-* ✨ add unicorn plugin ([3e8515b](https://github.com/antvis/x6/commit/3e8515bedf0da8ca10119c8a00ffd972f3a1e3aa))
-* ✨ support bitwise ([d9bc9d9](https://github.com/antvis/x6/commit/d9bc9d92e8bec74e780a44364f9e21da5f34096b))

configs/eslint-config/package.json

@@ -1,55 +0,0 @@
-{
-  "private": true,
-  "name": "@antv/eslint-config",
-  "version": "1.0.1",
-  "main": "./lib/index.js",
-  "license": "MIT",
-  "files": [
-    "lib"
-  ],
-  "scripts": {
-    "clean": "rimraf lib",
-    "lint": "eslint 'src/**/*.{js,ts}?(x)' --fix",
-    "build": "tsc --outDir ./lib",
-    "build:watch": "yarn build --w",
-    "prebuild": "run-s clean",
-    "postinstall": "run-s build",
-    "prepare": "run-s build",
-    "precommit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.ts": [
-      "eslint --fix"
-    ]
-  },
-  "inherits": [
-    "@antv/x6-package-json/cli.json",
-    "@antv/x6-package-json/eslint.json"
-  ],
-  "devDependencies": {
-    "@types/node": "^16.9.1",
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.4.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.25.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-unicorn": "^36.0.0",
-    "fs-extra": "^10.0.0",
-    "lint-staged": "^11.1.2",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.4.0",
-    "pretty-quick": "^3.1.1",
-    "rimraf": "^3.0.2",
-    "ts-node": "^10.2.1",
-    "typescript": "^4.4.3",
-    "watch": "^1.0.2"
-  }
-}

configs/eslint-config/src/index.ts

@@ -1,133 +0,0 @@
-module.exports = {
-  root: true,
-  parser: '@typescript-eslint/parser',
-  plugins: [
-    '@typescript-eslint',
-    'eslint-comments',
-    'import',
-    'flowtype',
-    'jest',
-    'jsx-a11y',
-    'prettier',
-    'promise',
-    'react',
-    'react-hooks',
-    'unicorn',
-  ],
-  extends: [
-    'airbnb-base',
-    'eslint:recommended',
-    'prettier',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:jsx-a11y/recommended',
-    'plugin:import/errors',
-    'plugin:import/warnings',
-    'plugin:promise/recommended',
-    'plugin:prettier/recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  env: {
-    browser: true,
-    commonjs: true,
-    es6: true,
-    jest: true,
-    node: true,
-    mocha: true,
-    jasmine: true,
-  },
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    // project: './tsconfig.json',
-    ecmaFeatures: {
-      jsx: true,
-    },
-    requireConfigFile: false,
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
-  rules: {
-    'no-bitwise': 0,
-    'no-continue': 0,
-    'no-lonely-if': 0,
-    'no-multi-assign': 0,
-    'no-nested-ternary': 0,
-    'no-inner-declarations': 0,
-    'no-unused-expressions': 0,
-    'max-classes-per-file': 0,
-    'prefer-destructuring': 0,
-    'class-methods-use-this': 0,
-    'implicit-arrow-linebreak': 0,
-    'lines-between-class-members': 0,
-    '@typescript-eslint/lines-between-class-members': 0,
-    'consistent-return': 0,
-    'no-return-assign': [2, 'except-parens'],
-    'no-param-reassign': [2, { props: false }],
-    'no-cond-assign': [2, 'except-parens'],
-    'no-console': [2, { allow: ['warn', 'error'] }],
-    '@typescript-eslint/no-unused-expressions': [
-      2,
-      { allowShortCircuit: true, allowTernary: true },
-    ],
-    eqeqeq: [2, 'always', { null: 'ignore' }],
-    'func-names': [1, 'never', { generators: 'as-needed' }],
-
-    'import/export': 0,
-    'import/no-cycle': 0,
-    'import/extensions': 0,
-    'import/no-unresolved': 0,
-    'import/prefer-default-export': 0,
-    'import/no-extraneous-dependencies': 0,
-
-    'promise/always-return': 0,
-    'promise/catch-or-return': 0,
-
-    '@typescript-eslint/no-namespace': 0,
-    '@typescript-eslint/no-var-requires': 0,
-    '@typescript-eslint/no-explicit-any': 0,
-    '@typescript-eslint/no-non-null-assertion': 0,
-    '@typescript-eslint/no-empty-function': 0,
-    '@typescript-eslint/no-empty-interface': 0,
-    '@typescript-eslint/explicit-module-boundary-types': 0,
-
-    'no-shadow': 0,
-    '@typescript-eslint/no-shadow': 0,
-
-    camelcase: 0,
-    '@typescript-eslint/camelcase': 0,
-
-    'no-use-before-define': 0,
-    '@typescript-eslint/no-use-before-define': 0,
-
-    'no-useless-constructor': 0,
-    '@typescript-eslint/no-useless-constructor': 0,
-
-    'no-unused-vars': 0,
-    '@typescript-eslint/no-unused-vars': [
-      2,
-      { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
-    ],
-
-    'no-redeclare': 0,
-    '@typescript-eslint/no-redeclare': [2, { ignoreDeclarationMerge: true }],
-
-    'react/sort-comp': 0,
-    'react/prop-types': 0,
-    'react/jsx-props-no-spreading': 0,
-    'react/destructuring-assignment': 0,
-    'react/no-access-state-in-setstate': 0,
-  },
-  overrides: [
-    {
-      files: ['**/*.js'],
-      rules: {
-        'no-console': 0,
-        'global-require': 0,
-      },
-    },
-  ],
-}

configs/husky-config/commit-msg

@@ -1,5 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-. "$(dirname "$0")/common.sh"
-
-yarn commitlint --edit "$1"

configs/husky-config/common.sh

@@ -1 +0,0 @@
-echo

configs/husky-config/pre-commit

@@ -1,5 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-. "$(dirname "$0")/common.sh"
-
-yarn precommit

configs/husky-config/prepare-commit-msg

@@ -1,5 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-. "$(dirname "$0")/common.sh"
-
-npx devmoji -e --lint

configs/husky-config/prepush

@@ -1,5 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-. "$(dirname "$0")/common.sh"
-
-./scripts/pre-push-check

configs/package-json/CHANGELOG.md

@@ -1,151 +0,0 @@
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-11-14)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-11-08)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-11-08)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-11-07)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-11-05)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-11-03)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-11-01)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-10-22)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-10-19)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-10-12)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-10-12)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-10-08)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-10-02)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-10-02)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-10-01)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-10-01)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-10-01)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-10-01)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-09-30)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-09-22)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-09-13)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-08-31)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-08-24)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-08-18)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-08-17)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-08-16)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-08-06)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-08-06)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-08-03)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-07-27)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-07-22)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-07-21)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-07-21)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-07-10)
-
-## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-07-09)
-
-# @antv/x6-package-json 1.0.0 (2021-06-17)
-
-
-### Bug Fixes
-
-* 🐛 fix karma can not process lodash-es ([f7ae6b1](https://github.com/antvis/x6/commit/f7ae6b1f6b961a01c58d8827a9aaa2d5a984a6e0))
-* 🐛 should only read json files ([af9d87f](https://github.com/antvis/x6/commit/af9d87fedccf4ba791db5570ca73228520107e2a))
-* update dependencies and fix type errors ([#1103](https://github.com/antvis/x6/issues/1103)) ([056b862](https://github.com/antvis/x6/commit/056b862b4efe7dbdc559cac7194c2453996acc07))
-
-
-### Features
-
-* ✨ add deps for jest ([4c831b8](https://github.com/antvis/x6/commit/4c831b84d032cc92f1c914143f4182772202620d))
-* ✨ add package inherit, compare commands ([d494b9f](https://github.com/antvis/x6/commit/d494b9f92e4e98816fb00acc02296bf5aa63f1b4))
-* ✨ sharing partial(devDependencies, peerDependencies, dependencies, scripts) package.json ([95c1112](https://github.com/antvis/x6/commit/95c1112c4e226c060dd94019f6ce5530a922a92f))
-* ✨ update vue deps ([37eae0b](https://github.com/antvis/x6/commit/37eae0b12502fba373d30153e0d1ac2085e843e8))
-
-# @antv/x6-package-json 1.0.0 (2021-06-16)
-
-
-### Bug Fixes
-
-* 🐛 fix karma can not process lodash-es ([f7ae6b1](https://github.com/antvis/x6/commit/f7ae6b1f6b961a01c58d8827a9aaa2d5a984a6e0))
-* 🐛 should only read json files ([af9d87f](https://github.com/antvis/x6/commit/af9d87fedccf4ba791db5570ca73228520107e2a))
-* update dependencies and fix type errors ([#1103](https://github.com/antvis/x6/issues/1103)) ([056b862](https://github.com/antvis/x6/commit/056b862b4efe7dbdc559cac7194c2453996acc07))
-
-
-### Features
-
-* ✨ add deps for jest ([4c831b8](https://github.com/antvis/x6/commit/4c831b84d032cc92f1c914143f4182772202620d))
-* ✨ add package inherit, compare commands ([d494b9f](https://github.com/antvis/x6/commit/d494b9f92e4e98816fb00acc02296bf5aa63f1b4))
-* ✨ sharing partial(devDependencies, peerDependencies, dependencies, scripts) package.json ([95c1112](https://github.com/antvis/x6/commit/95c1112c4e226c060dd94019f6ce5530a922a92f))
-* ✨ update vue deps ([37eae0b](https://github.com/antvis/x6/commit/37eae0b12502fba373d30153e0d1ac2085e843e8))
-
-# @antv/x6-package-json 1.0.0 (2021-06-15)
-
-
-### Bug Fixes
-
-* 🐛 fix karma can not process lodash-es ([f7ae6b1](https://github.com/antvis/x6/commit/f7ae6b1f6b961a01c58d8827a9aaa2d5a984a6e0))
-* 🐛 should only read json files ([af9d87f](https://github.com/antvis/x6/commit/af9d87fedccf4ba791db5570ca73228520107e2a))
-
-
-### Features
-
-* ✨ add deps for jest ([4c831b8](https://github.com/antvis/x6/commit/4c831b84d032cc92f1c914143f4182772202620d))
-* ✨ add package inherit, compare commands ([d494b9f](https://github.com/antvis/x6/commit/d494b9f92e4e98816fb00acc02296bf5aa63f1b4))
-* ✨ sharing partial(devDependencies, peerDependencies, dependencies, scripts) package.json ([95c1112](https://github.com/antvis/x6/commit/95c1112c4e226c060dd94019f6ce5530a922a92f))
-* ✨ update vue deps ([37eae0b](https://github.com/antvis/x6/commit/37eae0b12502fba373d30153e0d1ac2085e843e8))
-
-# @antv/x6-package-json 1.0.0 (2021-06-15)
-
-
-### Bug Fixes
-
-* 🐛 fix karma can not process lodash-es ([f7ae6b1](https://github.com/antvis/x6/commit/f7ae6b1f6b961a01c58d8827a9aaa2d5a984a6e0))
-* 🐛 should only read json files ([af9d87f](https://github.com/antvis/x6/commit/af9d87fedccf4ba791db5570ca73228520107e2a))
-
-
-### Features
-
-* ✨ add deps for jest ([4c831b8](https://github.com/antvis/x6/commit/4c831b84d032cc92f1c914143f4182772202620d))
-* ✨ add package inherit, compare commands ([d494b9f](https://github.com/antvis/x6/commit/d494b9f92e4e98816fb00acc02296bf5aa63f1b4))
-* ✨ sharing partial(devDependencies, peerDependencies, dependencies, scripts) package.json ([95c1112](https://github.com/antvis/x6/commit/95c1112c4e226c060dd94019f6ce5530a922a92f))
-* ✨ update vue deps ([37eae0b](https://github.com/antvis/x6/commit/37eae0b12502fba373d30153e0d1ac2085e843e8))
-
-# @antv/x6-package-json 1.0.0 (2021-06-11)
-
-
-### Bug Fixes
-
-* 🐛 fix karma can not process lodash-es ([f7ae6b1](https://github.com/antvis/x6/commit/f7ae6b1f6b961a01c58d8827a9aaa2d5a984a6e0))
-* 🐛 should only read json files ([af9d87f](https://github.com/antvis/x6/commit/af9d87fedccf4ba791db5570ca73228520107e2a))
-
-
-### Features
-
-* ✨ add deps for jest ([4c831b8](https://github.com/antvis/x6/commit/4c831b84d032cc92f1c914143f4182772202620d))
-* ✨ add package inherit, compare commands ([d494b9f](https://github.com/antvis/x6/commit/d494b9f92e4e98816fb00acc02296bf5aa63f1b4))
-* ✨ sharing partial(devDependencies, peerDependencies, dependencies, scripts) package.json ([95c1112](https://github.com/antvis/x6/commit/95c1112c4e226c060dd94019f6ce5530a922a92f))
-* ✨ update vue deps ([37eae0b](https://github.com/antvis/x6/commit/37eae0b12502fba373d30153e0d1ac2085e843e8))

configs/package-json/angular.json

@@ -1,12 +0,0 @@
-{
-  "peerDependencies": {
-    "@angular/core": ">=10.2.3",
-    "@angular/cdk": ">=10.2.3",
-    "@angular/common": "^10.2.3"
-  },
-  "devDependencies": {
-    "@angular/core": "^10.2.3",
-    "@angular/cdk": "^10.2.3",
-    "@angular/common": "^10.2.3"
-  }
-}

configs/package-json/antd.json

@@ -1,8 +0,0 @@
-{
-  "peerDependencies": {
-    "antd": ">=4.4.2"
-  },
-  "devDependencies": {
-    "antd": "^4.4.2"
-  }
-}

configs/package-json/bin/package-compare.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-require('../lib/compare/cli')

configs/package-json/bin/package-inherit.js

@@ -1,5 +0,0 @@
-#!/usr/bin/env node
-
-// @see https://github.com/microsoft/package-inherit
-
-require('../lib/inherit/cli')

configs/package-json/cli.json

@@ -1,13 +0,0 @@
-{
-  "devDependencies": {
-    "@types/node": "^16.9.1",
-    "fs-extra": "^10.0.0",
-    "lint-staged": "^11.1.2",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.4.0",
-    "pretty-quick": "^3.1.1",
-    "rimraf": "^3.0.2",
-    "ts-node": "^10.2.1",
-    "typescript": "^4.4.3"
-  }
-}

configs/package-json/eslint.json

@@ -1,18 +0,0 @@
-{
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.4.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.25.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-unicorn": "^36.0.0"
-  }
-}

configs/package-json/jest.json

@@ -1,8 +0,0 @@
-{
-  "devDependencies": {
-    "@types/jest": "^27.0.1",
-    "coveralls": "^3.1.1",
-    "jest": "^27.1.1",
-    "ts-jest": "^27.0.5"
-  }
-}

configs/package-json/karma.json

@@ -1,16 +0,0 @@
-{
-  "devDependencies": {
-    "@types/jasmine": "^3.9.0",
-    "@types/sinon": "^10.0.2",
-    "coveralls": "^3.1.1",
-    "jasmine-core": "^3.9.0",
-    "karma": "^6.3.4",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-cli": "^2.0.0",
-    "karma-jasmine": "^4.0.1",
-    "karma-spec-reporter": "^0.0.32",
-    "karma-typescript": "5.3.0",
-    "karma-typescript-es6-transform": "5.3.0",
-    "sinon": "^11.1.2"
-  }
-}

configs/package-json/karma.md

@@ -1,3 +0,0 @@
-保持下面两个模块的版本，不然 x6 主包的测试跑步起来
-- "karma-typescript": "^5.3.0"
-- "karma-typescript-es6-transform": "^5.3.0"

configs/package-json/less.json

@@ -1,11 +0,0 @@
-{
-  "devDependencies": {
-    "less": "^4.1.1",
-    "stylelint": "^13.13.1",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard": "^22.0.0",
-    "stylelint-declaration-block-no-ignored-properties": "^2.4.0",
-    "stylelint-order": "^4.1.0"
-  }
-}

configs/package-json/package.json

@@ -1,79 +0,0 @@
-{
-  "private": true,
-  "name": "@antv/x6-package-json",
-  "version": "1.0.1",
-  "bin": {
-    "package-compare": "./bin/package-compare.js",
-    "package-inherit": "./bin/package-inherit.js"
-  },
-  "files": [
-    "lib",
-    "bin"
-  ],
-  "scripts": {
-    "clean": "rimraf lib",
-    "lint": "eslint 'src/**/*.{js,ts}?(x)' --fix",
-    "build": "tsc --outDir ./lib",
-    "build:watch": "yarn build --w",
-    "prebuild": "run-s clean",
-    "postinstall": "run-s build",
-    "prepare": "run-s build",
-    "precommit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.ts": [
-      "eslint --fix"
-    ]
-  },
-  "inherits": [
-    "@antv/x6-package-json/cli.json",
-    "@antv/x6-package-json/eslint.json",
-    "@antv/x6-package-json/rollup.json"
-  ],
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@rollup/plugin-typescript": "^8.2.5",
-    "@types/node": "^16.9.1",
-    "@types/parse-package-name": "^0.1.0",
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.4.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.25.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-unicorn": "^36.0.0",
-    "fs-extra": "^10.0.0",
-    "lint-staged": "^11.1.2",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.6",
-    "prettier": "^2.4.0",
-    "pretty-quick": "^3.1.1",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.56.3",
-    "rollup-plugin-auto-external": "^2.0.0",
-    "rollup-plugin-filesize": "^9.1.1",
-    "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-progress": "^1.1.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "ts-node": "^10.2.1",
-    "tslib": "^2.3.1",
-    "typescript": "^4.4.3"
-  },
-  "dependencies": {
-    "latest-version": "^5.1.0",
-    "chalk": "^4.1.0",
-    "detect-newline": "^3.1.0",
-    "parse-package-name": "^0.1.0",
-    "workspace-tools": "^0.12.3",
-    "yargs-parser": "^20.2.7"
-  }
-}

configs/package-json/react.json

@@ -1,11 +0,0 @@
-{
-  "peerDependencies": {
-    "react": ">=16.8.6 || >=17.0.0",
-    "react-dom": ">=16.8.6 || >=17.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^16.9.13",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
-  }
-}

configs/package-json/rollup.json

@@ -1,16 +0,0 @@
-{
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@rollup/plugin-typescript": "^8.2.5",
-    "postcss": "^8.3.6",
-    "rollup": "^2.56.3",
-    "rollup-plugin-auto-external": "^2.0.0",
-    "rollup-plugin-filesize": "^9.1.1",
-    "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-progress": "^1.1.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "tslib": "^2.3.1"
-  }
-}

configs/package-json/src/.eslintrc

@@ -1,6 +0,0 @@
-{
-  "extends": "../../../.eslintrc",
-  "rules": {
-    "no-console": 0
-  }
-}

configs/package-json/src/compare/cli.ts

@@ -1,102 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import chalk from 'chalk'
-import latestVersion from 'latest-version'
-
-const root = path.resolve(__dirname, '../../')
-const reserved = 'package.json'
-const sections = ['dependencies', 'devDependencies']
-const pad = (str: string, max: number) => {
-  return str.length < max
-    ? `${str}${Array(max - str.length).join(' ')}`
-    : `${str.substr(0, max - 4)}...`
-}
-
-const pkgs = []
-const files = fs.readdirSync(root)
-files.forEach((name: string) => {
-  const file = path.join(root, name)
-  const stat = fs.statSync(file)
-  if (stat.isFile() && path.extname(file) === '.json' && name !== reserved) {
-    pkgs.push(file)
-  }
-})
-
-pkgs.unshift(path.resolve(__dirname, '../../../../', reserved))
-
-const moduleNames: string[] = []
-pkgs.forEach((file) => {
-  const content = fs.readFileSync(file, { encoding: 'utf-8' })
-  const pkgJSON = JSON.parse(content)
-  sections.forEach((section) => {
-    const deps = pkgJSON[section]
-    if (deps) {
-      moduleNames.push(...Object.keys(deps))
-    }
-  })
-})
-
-const paths = pkgs.map((file) => path.relative(process.cwd(), file))
-const maxFileLength = Math.max(...paths.map((item) => item.length)) + 2
-const maxNameLength = Math.min(
-  Math.max(...moduleNames.map((item) => item.length)) + 2,
-  40,
-)
-const maxSectionLength = Math.max(...sections.map((item) => item.length)) + 2
-const log = (
-  pkg: string,
-  section: string,
-  name: string,
-  local: string,
-  remote: string,
-  highlight?: boolean,
-) => {
-  const line = `${pad(pkg, maxFileLength)}  ${pad(
-    section,
-    maxSectionLength,
-  )}  ${pad(name, maxNameLength)}  ${pad(local, 10)}  ${remote}`
-  console.log(highlight ? chalk.gray(line) : line)
-}
-
-console.log()
-console.log(
-  'Comapre packages local version with latest version on npm registry.',
-)
-console.log()
-
-log('file', 'section', 'name', 'local', 'remote')
-console.log(
-  Array(maxFileLength + maxSectionLength + maxNameLength + 21).join('-'),
-)
-
-pkgs.forEach((file) => {
-  const content = fs.readFileSync(file, { encoding: 'utf-8' })
-  const pkgJSON = JSON.parse(content)
-  const defers: Promise<any>[] = []
-  sections.forEach((section) => {
-    const deps = pkgJSON[section]
-    if (deps) {
-      Object.keys(deps).forEach(async (name) => {
-        const pkg = path.relative(process.cwd(), file)
-        const local = deps[name]
-        const defer = latestVersion(name).then((remote) => {
-          return {
-            pkg,
-            section,
-            name,
-            local,
-            remote,
-          }
-        })
-        defers.push(defer)
-      })
-    }
-  })
-
-  Promise.all(defers).then((arr) => {
-    arr.forEach(({ pkg, section, name, local, remote }) => {
-      const localv = local.replace(/^[\^~]|>=/, '')
-      log(pkg, section, name, local, remote, localv !== remote)
-    })
-  })
-})

configs/package-json/src/inherit/check.ts

@@ -1,21 +0,0 @@
-import { collect } from './collect'
-
-export function check(cwd: string, args: any) {
-  const updatedInfo = collect(cwd)
-  if (updatedInfo.modifiedPackages.length > 0) {
-    const recoveryCommand = args.recovery || 'package-inherit update'
-    console.error(
-      `
-The inheritance of package.json is in an inconsistent state.
-These packages are inconsistent:
-
-${updatedInfo.modifiedPackages.sort().join('\n')}
-
-Please run the following command:
-> ${recoveryCommand}
-`,
-    )
-  } else {
-    console.log('Nothing needs to be updated.')
-  }
-}

configs/package-json/src/inherit/cli.ts

@@ -1,42 +0,0 @@
-import yargsParser from 'yargs-parser'
-import { update } from './update'
-import { check } from './check'
-
-const args = yargsParser(process.argv.slice(2))
-
-const command = args._[0]
-
-switch (command) {
-  case 'update':
-    update(process.cwd())
-    break
-
-  case 'check':
-    check(process.cwd(), args)
-    break
-
-  default:
-    console.log(`
-Usage: package-inherit [command] [--recovery]
-
-This utility will update package.json in a monorepo to inherit from another
-package.json template. Currently, support the following sections to merge
-into the package.json
-
-  - scripts
-  - dependencies
-  - devDependencies
-  - peerDependencies
-
-Commands:
-
-  update      updates the package.json for all packages in a monorepo to
-              match inheritance.
-  check       checks all the package.json inheritance are consistent.
-
-Options:
-
-  --recovery  custom recovery command to show developers when the check has failed
-`)
-    break
-}

configs/package-json/src/inherit/collect.ts

@@ -1,102 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import parsePackageName from 'parse-package-name'
-import { PackageInfos } from 'workspace-tools/lib/types/PackageInfo'
-import { getPackageInfos } from 'workspace-tools/lib/getPackageInfos'
-
-type KeyValue = { [key: string]: string }
-
-export function collect(cwd: string) {
-  const allPackages = getPackageInfos(cwd)
-  const modifiedPackages: string[] = []
-  const sections = [
-    'devDependencies',
-    'peerDependencies',
-    'dependencies',
-    'scripts',
-  ]
-
-  // eslint-disable-next-line no-restricted-syntax
-  for (const [pkg, pkgInfo] of Object.entries(allPackages)) {
-    // workspace-tools typings are not comprehensive about what is possible,
-    // so we force cast it
-    const inherits = pkgInfo.inherits as string[]
-    if (inherits) {
-      const merged: { [section: string]: KeyValue } = {}
-
-      // eslint-disable-next-line no-restricted-syntax
-      for (const inherit of inherits) {
-        const file = resolveInRepo(pkg, inherit, allPackages)
-        if (!file) {
-          throw new Error(`${file} does not exist`)
-        }
-        const inheritInfo = JSON.parse(fs.readFileSync(file, 'utf-8'))
-
-        // Merge inherit infos for given package together before checking
-        // shouldUpdate. This will allows inherit check behavior to be
-        // symmetric with update behavior, which updates packages defined
-        // in multiple inherit files to their last occurrence.
-        // eslint-disable-next-line no-restricted-syntax
-        for (const section of sections) {
-          merged[section] = {
-            ...merged[section],
-            ...inheritInfo[section],
-          }
-        }
-      }
-
-      // eslint-disable-next-line no-restricted-syntax
-      for (const section of sections) {
-        const prev = pkgInfo[section] as KeyValue
-        const next = merged[section]
-
-        if (shouldUpdate(prev, next)) {
-          const combined = { ...prev, ...next }
-          const sorted: KeyValue = {}
-          Object.keys(combined)
-            .sort()
-            .forEach(function (name) {
-              sorted[name] = combined[name]
-            })
-
-          pkgInfo[section] = sorted
-          modifiedPackages.push(pkg)
-        }
-      }
-    }
-  }
-
-  return { allPackages, modifiedPackages }
-}
-
-function resolveInRepo(
-  pkg: string,
-  inherit: string,
-  allPackages: PackageInfos,
-) {
-  const parsedInfo = parsePackageName(inherit)
-
-  if (parsedInfo.name === '.') {
-    parsedInfo.name = pkg
-  }
-
-  const info = allPackages[parsedInfo.name]
-  if (info) {
-    return path.join(path.dirname(info.packageJsonPath), parsedInfo.path)
-  }
-}
-
-function shouldUpdate(mine: KeyValue, theirs?: KeyValue) {
-  if (!theirs) {
-    return false
-  }
-
-  // eslint-disable-next-line no-restricted-syntax
-  for (const [key, value] of Object.entries(theirs)) {
-    if (mine[key] !== value) {
-      return true
-    }
-  }
-
-  return false
-}

configs/package-json/src/inherit/index.ts

@@ -1,6 +0,0 @@
-// Please see: https://github.com/microsoft/package-inherit
-
-import { update } from './update'
-import { check } from './check'
-
-export { update, check }

configs/package-json/src/inherit/update.ts

@@ -1,27 +0,0 @@
-import fs from 'fs'
-import os from 'os'
-import detectNewline from 'detect-newline'
-import { collect } from './collect'
-
-export function update(cwd: string) {
-  const updatedInfo = collect(cwd)
-  if (updatedInfo.modifiedPackages.length > 0) {
-    // eslint-disable-next-line no-restricted-syntax
-    for (const pkg of updatedInfo.modifiedPackages) {
-      const info = updatedInfo.allPackages[pkg]
-      const { packageJsonPath, ...output } = info
-
-      const newLine =
-        detectNewline(fs.readFileSync(info.packageJsonPath, 'utf-8')) || os.EOL
-
-      fs.writeFileSync(
-        info.packageJsonPath,
-        JSON.stringify(output, null, 2).replace(/\n/g, newLine) + newLine,
-      )
-    }
-    console.log(`Updated these packages: `)
-    console.log(updatedInfo.modifiedPackages.sort().join('\n'))
-  } else {
-    console.log('Nothing needs to be updated.')
-  }
-}

configs/package-json/vue.json

@@ -1,13 +0,0 @@
-{
-  "dependencies": {
-    "vue-demi": "^0.7.4"
-  },
-  "peerDependencies": {
-    "@vue/composition-api": "^1.0.0-rc.6",
-    "vue": "^2.6.12 || ^3.0.0"
-  },
-  "devDependencies": {
-    "@vue/composition-api": "^1.0.0-rc.6",
-    "vue": "^2.6.12"
-  }
-}

configs/rollup-config.js

@@ -1,26 +0,0 @@
-import { terser } from 'rollup-plugin-terser'
-import replace from '@rollup/plugin-replace'
-import resolve from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-import filesize from 'rollup-plugin-filesize'
-import typescript from '@rollup/plugin-typescript'
-
-export default (config) => {
-  const { plugins = [], ...others } = config
-  return {
-    input: './src/index.ts',
-    plugins: [
-      typescript({ declaration: false }),
-      resolve(),
-      commonjs(),
-      replace({
-        preventAssignment: true,
-        'process.env.NODE_ENV': JSON.stringify('production'),
-      }),
-      terser(),
-      filesize(),
-      ...plugins,
-    ],
-    ...others,
-  }
-}

configs/stylelint-config/CHANGELOG.md

@@ -1,86 +0,0 @@
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-11-14)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-11-08)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-11-08)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-11-07)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-11-05)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-11-03)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-11-01)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-10-22)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-10-19)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-10-12)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-10-12)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-10-08)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-10-02)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-10-02)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-10-01)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-10-01)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-10-01)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-10-01)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-09-30)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-09-22)
-
-## @antv/stylelint-config [1.0.1](https://github.com/antvis/x6/compare/@antv/stylelint-config@1.0.0...@antv/stylelint-config@1.0.1) (2021-09-13)
-
-# @antv/stylelint-config 1.0.0 (2021-06-17)
-
-
-### Bug Fixes
-
-* update dependencies and fix type errors ([#1103](https://github.com/antvis/x6/issues/1103)) ([056b862](https://github.com/antvis/x6/commit/056b862b4efe7dbdc559cac7194c2453996acc07))
-
-
-### Features
-
-* ✨ sharing stylelint configurations ([5061c5d](https://github.com/antvis/x6/commit/5061c5ddf875f43578e8f0f81801151f80c51ee9))
-
-# @antv/stylelint-config 1.0.0 (2021-06-16)
-
-
-### Bug Fixes
-
-* update dependencies and fix type errors ([#1103](https://github.com/antvis/x6/issues/1103)) ([056b862](https://github.com/antvis/x6/commit/056b862b4efe7dbdc559cac7194c2453996acc07))
-
-
-### Features
-
-* ✨ sharing stylelint configurations ([5061c5d](https://github.com/antvis/x6/commit/5061c5ddf875f43578e8f0f81801151f80c51ee9))
-
-# @antv/stylelint-config 1.0.0 (2021-06-15)
-
-
-### Features
-
-* ✨ sharing stylelint configurations ([5061c5d](https://github.com/antvis/x6/commit/5061c5ddf875f43578e8f0f81801151f80c51ee9))
-
-# @antv/stylelint-config 1.0.0 (2021-06-15)
-
-
-### Features
-
-* ✨ sharing stylelint configurations ([5061c5d](https://github.com/antvis/x6/commit/5061c5ddf875f43578e8f0f81801151f80c51ee9))
-
-# @antv/stylelint-config 1.0.0 (2021-06-11)
-
-
-### Features
-
-* ✨ sharing stylelint configurations ([5061c5d](https://github.com/antvis/x6/commit/5061c5ddf875f43578e8f0f81801151f80c51ee9))

configs/stylelint-config/package.json

@@ -1,63 +0,0 @@
-{
-  "private": true,
-  "name": "@antv/stylelint-config",
-  "version": "1.0.1",
-  "main": "./lib/index.js",
-  "license": "MIT",
-  "files": [
-    "lib"
-  ],
-  "scripts": {
-    "clean": "rimraf lib",
-    "lint": "eslint 'src/**/*.{js,ts}?(x)' --fix",
-    "build": "tsc --outDir ./lib",
-    "build:watch": "yarn build --w",
-    "prebuild": "run-s clean",
-    "postinstall": "run-s build",
-    "prepare": "run-s build",
-    "precommit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.ts": [
-      "eslint --fix"
-    ]
-  },
-  "inherits": [
-    "@antv/x6-package-json/cli.json",
-    "@antv/x6-package-json/less.json",
-    "@antv/x6-package-json/eslint.json"
-  ],
-  "devDependencies": {
-    "@types/node": "^16.9.1",
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.4.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.25.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-unicorn": "^36.0.0",
-    "fs-extra": "^10.0.0",
-    "less": "^4.1.1",
-    "lint-staged": "^11.1.2",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.4.0",
-    "pretty-quick": "^3.1.1",
-    "rimraf": "^3.0.2",
-    "stylelint": "^13.13.1",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard": "^22.0.0",
-    "stylelint-declaration-block-no-ignored-properties": "^2.4.0",
-    "stylelint-order": "^4.1.0",
-    "ts-node": "^10.2.1",
-    "typescript": "^4.4.3",
-    "watch": "^1.0.2"
-  }
-}

configs/stylelint-config/src/index.ts

@@ -1,20 +0,0 @@
-module.exports = {
-  extends: [
-    'stylelint-config-standard',
-    'stylelint-config-rational-order',
-    'stylelint-config-prettier',
-  ],
-  plugins: [
-    'stylelint-order',
-    'stylelint-declaration-block-no-ignored-properties',
-  ],
-  rules: {
-    'block-no-empty': null,
-    'function-name-case': 'lower',
-    'comment-empty-line-before': null,
-    'no-invalid-double-slash-comments': null,
-    'no-descending-specificity': null,
-    'declaration-empty-line-before': null,
-    'no-duplicate-selectors': null,
-  },
-}

examples/x6-example-features/package.json

@@ -9,16 +9,28 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
-    "@antv/x6": "^2.0.6-beta.0",
-    "@antv/x6-react-components": "^2.0.6-beta.0",
-    "@antv/x6-react-shape": "^2.0.6-beta.0",
+    "@antv/x6": "^2.x",
+    "@antv/x6-plugin-clipboard": "^2.x",
+    "@antv/x6-plugin-dnd": "^2.x",
+    "@antv/x6-plugin-history": "^2.x",
+    "@antv/x6-plugin-keyboard": "^2.x",
+    "@antv/x6-plugin-minimap": "^2.x",
+    "@antv/x6-plugin-scroller": "^2.x",
+    "@antv/x6-plugin-selection": "^2.x",
+    "@antv/x6-plugin-snapline": "^2.x",
+    "@antv/x6-plugin-stencil": "^2.x",
+    "@antv/x6-plugin-transform": "^2.x",
+    "@antv/x6-plugin-export": "^2.x",
+    "@antv/x6-react-components": "^2.x",
+    "@antv/x6-react-shape": "^2.x",
     "antd": "^4.4.2",
     "classnames": "^2.2.6",
     "dagre": "^0.8.5",
     "elkjs": "^0.7.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-helmet": "^6.0.0"
+    "react-helmet": "^6.0.0",
+    "@antv/hierarchy": "^0.6.8"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.2.2",
@@ -37,7 +49,8 @@
     "react-test-renderer": "^16.7.0",
     "umi": "^2.9.0",
     "umi-plugin-react": "^1.8.0",
-    "umi-types": "^0.3.0"
+    "umi-types": "^0.3.0",
+    "babel-plugin-import": "^1.13.5"
   },
   "lint-staged": {
     "src/**/*.ts": [

examples/x6-example-features/src/pages/animation/football.tsx

@@ -1,262 +0,0 @@
-import React from 'react'
-import { Graph, Node, Edge, NodeView, Point, Angle, Interp } from '@antv/x6'
-import '../index.less'
-
-class BallView extends NodeView {
-  protected speed: number = 0
-  protected angle: number = 0
-  protected edge: Edge | null
-
-  protected init() {
-    this.cell.transition('attrs/label/opacity', 1, {
-      delay: 0,
-      duration: 3000,
-      timing: 'inout',
-      interp: function (a: number, b: number) {
-        return function (t: number) {
-          return a + b * (1 - Math.abs(1 - 2 * t))
-        }
-      },
-    })
-
-    this.cell.on('transition:complete', ({ cell, path }) => {
-      if (path === 'position' && this.speed > 5) {
-        this.speed /= cell.prop<number>('bounciness') || 2
-        this.fly({ angle: 180 - this.angle, speed: this.speed })
-      }
-    })
-
-    this.cell.on('change:position', ({ cell, current }) => {
-      const node = cell as any as Node
-      this.angle = Point.create(node.getPosition()).theta(
-        node.previous('position'),
-      )
-      //this.speed = we are using constant speed for simplicity
-
-      if (current) {
-        if (
-          current.x < 0 ||
-          current.x > this.graph.options.width - node.getSize().width
-        ) {
-          this.angle -= 180
-          node.position(node.previous('position')!.x, current.y, {
-            silent: true,
-          })
-          cell.stopTransition('position')
-        }
-      }
-    })
-  }
-
-  fly(opts: { speed?: number; angle?: number } = {}) {
-    const options = {
-      speed: 100,
-      angle: 90,
-      ...opts,
-    }
-    const pos = this.cell.getPosition()
-    const size = this.cell.getSize()
-    const ga = 9.81
-    const h0 = this.graph.options.height - pos.y - size.height
-    const v0 = options.speed
-    const sin1 = Math.sin(Angle.toRad(options.angle))
-
-    const flightTime =
-      (v0 * sin1 +
-        Math.sqrt(Math.pow(v0, 2) * Math.pow(sin1, 2) + 2 * h0 * ga)) /
-      ga
-
-    this.cell.transition('position', options, {
-      duration: 100 * flightTime,
-      interp(
-        position: Point.PointLike,
-        params: { speed: number; angle: number },
-      ) {
-        return function (t: number) {
-          t = flightTime * t
-          return {
-            x:
-              position.x +
-              params.speed * t * Math.cos((Math.PI / 180) * params.angle),
-            y:
-              position.y -
-              params.speed * t * Math.sin((Math.PI / 180) * params.angle) +
-              (ga / 2) * t * t,
-          }
-        }
-      },
-    })
-
-    this.cell.transition('angle', -options.angle, {
-      duration: 100 * flightTime,
-    })
-
-    this.speed = options.speed
-    this.angle = options.angle
-  }
-
-  onMouseDown(e: JQuery.MouseDownEvent, x: number, y: number) {
-    console.log('mousedown1')
-    // Do not allow drag element while it's still in a transition.
-    if (this.cell.getTransitions().indexOf('position') > -1) {
-      console.log('mousedown2')
-      return
-    }
-
-    this.edge = this.graph.addEdge({
-      shape: 'edge',
-      source: this.cell.getBBox().getCenter(),
-      target: { x, y },
-      zIndex: -1,
-      attrs: {
-        line: {
-          stroke: 'rgba(0,0,0,0.1)',
-          strokeWidth: 6,
-          targetMarker: {
-            stroke: 'black',
-            strokeWidth: 2,
-            d: 'M 20 -10 L 0 0 L 20 10 z',
-          },
-        },
-      },
-    })
-
-    // Change the marker arrow color.
-    this.edge.on('change:target', ({ cell }) => {
-      const edge = cell as any as Edge
-      const sourcePoint = edge.getSourcePoint()!
-      const targetPoint = edge.getTargetPoint()!
-      const dist = sourcePoint.distance(targetPoint)
-      const maxDist = Math.max(
-        this.graph.options.width,
-        this.graph.options.height,
-      )
-      const interp = Interp.color('#ffffff', '#ff0000')
-      edge.attr('line/targetMarker/fill', interp(dist / maxDist / Math.sqrt(2)))
-    })
-  }
-
-  onMouseMove(e: JQuery.MouseMoveEvent, x: number, y: number) {
-    if (this.edge) {
-      this.edge.setTarget({ x, y })
-    }
-  }
-
-  onMouseUp(e: JQuery.MouseUpEvent, x: number, y: number) {
-    if (!this.edge) {
-      return
-    }
-
-    const sourcePoint = this.edge.getSourcePoint()!
-    const targetPoint = this.edge.getTargetPoint()!
-
-    this.edge.remove()
-    this.edge = null
-
-    this.fly({
-      angle: Math.abs(targetPoint.theta(sourcePoint) - 180),
-      speed: sourcePoint.distance(targetPoint) / 2,
-    })
-  }
-}
-
-NodeView.registry.register('ball', BallView as any, true)
-
-Node.registry.register(
-  'ball',
-  {
-    view: 'ball',
-    markup: [
-      {
-        tagName: 'text',
-        selector: 'label',
-      },
-      {
-        tagName: 'image',
-        selector: 'ball',
-      },
-    ],
-    attrs: {
-      label: {
-        text: 'Drag me!',
-        fontSize: 40,
-        fontWeight: 900,
-        refX: 0.5,
-        refY: -20,
-        textVerticalAnchor: 'middle',
-        textAnchor: 'middle',
-        fill: 'white',
-        strokeWidth: 2,
-        stroke: 'black',
-        opacity: 0,
-        pointerEvents: 'none',
-      },
-      ball: {
-        refWidth: 1,
-        refHeight: 1,
-      },
-    },
-  },
-  true,
-)
-
-export default class Example extends React.Component {
-  private container: HTMLDivElement
-
-  componentDidMount() {
-    const graph = new Graph({
-      container: this.container,
-      width: 650,
-      height: 400,
-      grid: 1,
-    })
-
-    graph.addNode({
-      shape: 'ball',
-      x: 250,
-      y: 370,
-      width: 30,
-      height: 30,
-      bounciness: 3,
-      attrs: {
-        image: {
-          'xlink:href':
-            'data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgaWQ9InN2ZzIiIHZpZXdCb3g9IjAgMCA1MTAgNTEwIiB2ZXJzaW9uPSIxLjEiIGlua3NjYXBlOnZlcnNpb249IjAuNDcgcjIyNTgzIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzb2RpcG9kaTpkb2NuYW1lPSJibHVlIGJhbGwuc3ZnIj4KICA8c29kaXBvZGk6bmFtZWR2aWV3IHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgYm9yZGVyY29sb3I9IiM2NjY2NjYiIGJvcmRlcm9wYWNpdHk9IjEiIG9iamVjdHRvbGVyYW5jZT0iMTAiIGdyaWR0b2xlcmFuY2U9IjEwIiBndWlkZXRvbGVyYW5jZT0iMTAiIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIiBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEwMjQiIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjU0OCIgaWQ9Im5hbWVkdmlldzE2IiBzaG93Z3JpZD0iZmFsc2UiIGlua3NjYXBlOnNuYXAtZ2xvYmFsPSJmYWxzZSIgaW5rc2NhcGU6em9vbT0iMC40MzY2Mzc1MyIgaW5rc2NhcGU6Y3g9IjI1Ni4yMzMxMSIgaW5rc2NhcGU6Y3k9IjI1OC44NTEwNyIgaW5rc2NhcGU6d2luZG93LXg9Ii04IiBpbmtzY2FwZTp3aW5kb3cteT0iLTgiIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImxheWVyMSIvPgogIDxkZWZzIGlkPSJkZWZzNCI+CiAgICA8aW5rc2NhcGU6cGF0aC1lZmZlY3QgZWZmZWN0PSJzcGlybyIgaWQ9InBhdGgtZWZmZWN0MzYyMCIgaXNfdmlzaWJsZT0idHJ1ZSIvPgogICAgPGlua3NjYXBlOnBlcnNwZWN0aXZlIHNvZGlwb2RpOnR5cGU9Imlua3NjYXBlOnBlcnNwM2QiIGlua3NjYXBlOnZwX3g9IjAgOiAyNTUgOiAxIiBpbmtzY2FwZTp2cF95PSIwIDogMTAwMCA6IDAiIGlua3NjYXBlOnZwX3o9IjUxMCA6IDI1NSA6IDEiIGlua3NjYXBlOnBlcnNwM2Qtb3JpZ2luPSIyNTUgOiAxNzAgOiAxIiBpZD0icGVyc3BlY3RpdmUxOCIvPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXJHcmFkaWVudDM1OTQiPgogICAgICA8c3RvcCBpZD0ic3RvcDM1OTYiIHN0b3AtY29sb3I9IiNGRkYiIG9mZnNldD0iMCIvPgogICAgICA8c3RvcCBpZD0ic3RvcDM1OTgiIHN0b3AtY29sb3I9IiMwMDAiIHN0b3Atb3BhY2l0eT0iMC40MTA3MTQzIiBvZmZzZXQ9IjEiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8ZmlsdGVyIGlkPSJmaWx0ZXI0MDY3IiBoZWlnaHQ9IjEuMjYwMTk3MiIgd2lkdGg9IjEuMjg0MjYyOCIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIiB5PSItMC4xMzAwOTg1OCIgeD0iLTAuMTQyMTMxNCI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBpZD0iZmVHYXVzc2lhbkJsdXI0MDY5IiBzdGREZXZpYXRpb249IjEuOTEyMzg5NCIvPgogICAgPC9maWx0ZXI+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9InJhZGlhbEdyYWRpZW50NDA4MyIgeGxpbms6aHJlZj0iI2xpbmVhckdyYWRpZW50MzU5NCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN5PSI0NzkuNTQiIGN4PSIyNzIuMTUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLTAuMzExNjQ5OTIsMS4zMTAxMDczLC0xLjMxMDE2NjEsLTAuMzExNjYzODksMTA0MS4yNzkxLDE5OS4yMDMwOSkiIHI9IjI1My4yNiIvPgogICAgPGZpbHRlciB4PSItMC4xNDMxMjQ1NSIgeT0iLTAuMTMxMDEwNzYiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgd2lkdGg9IjEuMjg2MjQ5IiBoZWlnaHQ9IjEuMjYyMDIxNSIgaWQ9ImZpbHRlcjM2MDEiPgogICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyMy4xMDkyNDgiIGlkPSJmZUdhdXNzaWFuQmx1cjM2MDMiLz4KICAgIDwvZmlsdGVyPgogICAgPGZpbHRlciB4PSItMC4xNDIxMzE0IiB5PSItMC4xMzAwOTg1OCIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIiB3aWR0aD0iMS4yODQyNjI4IiBoZWlnaHQ9IjEuMjYwMTk3MiIgaWQ9ImZpbHRlcjM2MDUiPgogICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyMi45NDg2NzMiIGlkPSJmZUdhdXNzaWFuQmx1cjM2MDciLz4KICAgIDwvZmlsdGVyPgogICAgPGZpbHRlciB4PSItMC4xNDIxMzE0IiB5PSItMC4xMzAwOTg1OCIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIiB3aWR0aD0iMS4yODQyNjI4IiBoZWlnaHQ9IjEuMjYwMTk3MiIgaWQ9ImZpbHRlcjM2MDkiPgogICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyMi45NDg2NzMiIGlkPSJmZUdhdXNzaWFuQmx1cjM2MTEiLz4KICAgIDwvZmlsdGVyPgogICAgPGZpbHRlciBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiIGlkPSJmaWx0ZXIzNzU2Ij4KICAgICAgPGZlR2F1c3NpYW5CbHVyIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIgc3RkRGV2aWF0aW9uPSI3LjMxNTE1MzMiIGlkPSJmZUdhdXNzaWFuQmx1cjM3NTgiLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4KICAgICAgICA8ZGM6dGl0bGUvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZyBpZD0ibGF5ZXIxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTQuMjg1NjksLTIyOC4wNzY0OSkiPgogICAgPHBhdGggaWQ9InBhdGgyODE4IiBzdHJva2UtbGluZWpvaW49ImJldmVsIiBzdHlsZT0ic3Ryb2tlLWRhc2hhcnJheTpub25lOyIgZD0iTTY2MCw0ODUuNzhhMjUyLjg2LDI1Mi44NiwwLDEsMSwwLC0wLjU2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LC0yKSIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAuNDc5IiBzdHJva2U9IiM3ODc4NzgiIHN0cm9rZS1taXRlcmxpbWl0PSI0IiBzdHJva2Utd2lkdGg9IjAuODAwMDAwMDEiIGZpbGw9IiMxMDZkZDUiLz4KICAgIDxwYXRoIGlkPSJwYXRoMzU5MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCwtMikiIGZpbGw9InVybCgjcmFkaWFsR3JhZGllbnQ0MDgzKSIgZD0iTTY2MCw0ODUuNzhhMjUyLjg2LDI1Mi44NiwwLDEsMSwwLC0wLjU2Ii8+CiAgICA8cGF0aCBpZD0icGF0aDQwNzgiIGQ9Ik02NjAsNDg1Ljc4YTI1Mi44NiwyNTIuODYsMCwxLDEsMCwtMC41NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCwtMikiIGZpbGw9InVybCgjcmFkaWFsR3JhZGllbnQ0MDgzKSIvPgogIDwvZz4KPC9zdmc+',
-        },
-      },
-    })
-
-    graph.addNode({
-      shape: 'ball',
-      x: 400,
-      y: 350,
-      width: 50,
-      height: 50,
-      bounciness: 1.5,
-      attrs: {
-        image: {
-          'xlink:href':
-            'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iLTEwNSAtMTA1IDIxMCAyMTAiPgogICA8ZGVmcz4KICAgICAgPGNsaXBQYXRoIGlkPSJiYWxsIj4KICAgICAgICAgPGNpcmNsZSByPSIxMDAiIHN0cm9rZS13aWR0aD0iMCIvPgogICAgICA8L2NsaXBQYXRoPgogICAgICA8cmFkaWFsR3JhZGllbnQgaWQ9InNoYWRvdzEiIGN4PSIuNCIgY3k9Ii4zIiByPSIuOCI+CiAgICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJ3aGl0ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICAgICAgPHN0b3Agb2Zmc2V0PSIuNCIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgICAgIDxzdG9wIG9mZnNldD0iLjgiIHN0b3AtY29sb3I9IiNFRUVFRUUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgICA8cmFkaWFsR3JhZGllbnQgaWQ9InNoYWRvdzIiIGN4PSIuNSIgY3k9Ii41IiByPSIuNSI+CiAgICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJ3aGl0ZSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICAgICAgPHN0b3Agb2Zmc2V0PSIuOCIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgICAgIDxzdG9wIG9mZnNldD0iLjk5IiBzdG9wLWNvbG9yPSJibGFjayIgc3RvcC1vcGFjaXR5PSIuMyIvPgogICAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iYmxhY2siIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgICA8ZyBpZD0iYmxhY2tfc3R1ZmYiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsaXAtcGF0aD0idXJsKCNiYWxsKSI+CiAgICAgICAgIDxnIGZpbGw9ImJsYWNrIj4KICAgICAgICAgICAgPHBhdGggZD0iTSA2LC0zMiBRIDI2LC0yOCA0NiwtMTkgUSA1NywtMzUgNjQsLTQ3IFEgNTAsLTY4IDM3LC03NiBRIDE3LC03NSAxLC02OCBRIDQsLTUxIDYsLTMyIi8+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0gLTI2LC0yIFEgLTQ1LC04IC02MiwtMTEgUSAtNzQsNSAtNzYsMjIgUSAtNjksNDAgLTUwLDU0IFEgLTMyLDQ3IC0xNywzOSBRIC0yMywxNSAtMjYsLTIiLz4KICAgICAgICAgICAgPHBhdGggZD0iTSAtOTUsMjIgUSAtMTAyLDEyIC0xMDIsLTggViA4MCBIIC04NSBRIC05NSw0NSAtOTUsMjIiLz4KICAgICAgICAgICAgPHBhdGggZD0iTSA1NSwyNCBRIDQxLDQxIDI0LDUyIFEgMjgsNjUgMzEsNzkgUSA1NSw3OCA2OCw2NyBRIDc4LDUwIDgwLDM1IFEgNjUsMjggNTUsMjQiLz4KICAgICAgICAgICAgPHBhdGggZD0iTSAwLDEyMCBMIC0zLDk1IFEgLTI1LDkzIC00Miw4MiBRIC01MCw4NCAtNjAsODEiLz4KICAgICAgICAgICAgPHBhdGggZD0iTSAtOTAsLTQ4IFEgLTgwLC01MiAtNjgsLTQ5IFEgLTUyLC03MSAtMzUsLTc3IFEgLTM1LC0xMDAgLTQwLC0xMDAgSCAtMTAwIi8+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0gMTAwLC01NSBMIDg3LC0zNyBRIDk4LC0xMCA5Nyw1IEwgMTAwLDYiLz4KICAgICAgICAgPC9nPgogICAgICAgICA8ZyBmaWxsPSJub25lIj4KICAgICAgICAgICAgPHBhdGggZD0iTSA2LC0zMiBRIC0xOCwtMTIgLTI2LC0yICAgICAgICAgICAgICAgICAgICAgIE0gNDYsLTE5IFEgNTQsNSA1NSwyNCAgICAgICAgICAgICAgICAgICAgICBNIDY0LC00NyBRIDc3LC00NCA4NywtMzcgICAgICAgICAgICAgICAgICAgICAgTSAzNywtNzYgUSAzOSwtOTAgMzYsLTEwMCAgICAgICAgICAgICAgICAgICAgICBNIDEsLTY4IFEgLTEzLC03NyAtMzUsLTc3ICAgICAgICAgICAgICAgICAgICAgIE0gLTYyLC0xMSBRIC02NywtMjUgLTY4LC00OSAgICAgICAgICAgICAgICAgICAgICBNIC03NiwyMiBRIC04NSwyNCAtOTUsMjIgICAgICAgICAgICAgICAgICAgICAgTSAtNTAsNTQgUSAtNDksNzAgLTQyLDgyICAgICAgICAgICAgICAgICAgICAgIE0gLTE3LDM5IFEgMCw0OCAyNCw1MiAgICAgICAgICAgICAgICAgICAgICBNIDMxLDc5IFEgMjAsOTIgLTMsOTUgICAgICAgICAgICAgICAgICAgICAgTSA2OCw2NyBMIDgwLDgwICAgICAgICAgICAgICAgICAgICAgIE0gODAsMzUgUSA5MCwyNSA5Nyw1ICAgICAgICAgICAgICIvPgogICAgICAgICA8L2c+CiAgICAgIDwvZz4KICAgPC9kZWZzPgogICA8Y2lyY2xlIHI9IjEwMCIgZmlsbD0id2hpdGUiIHN0cm9rZT0ibm9uZSIvPgogICA8Y2lyY2xlIHI9IjEwMCIgZmlsbD0idXJsKCNzaGFkb3cxKSIgc3Ryb2tlPSJub25lIi8+CiAgIDx1c2UgeGxpbms6aHJlZj0iI2JsYWNrX3N0dWZmIiBzdHJva2U9IiNFRUUiIHN0cm9rZS13aWR0aD0iNyIvPgogICA8dXNlIHhsaW5rOmhyZWY9IiNibGFja19zdHVmZiIgc3Ryb2tlPSIjREREIiBzdHJva2Utd2lkdGg9IjQiLz4KICAgPHVzZSB4bGluazpocmVmPSIjYmxhY2tfc3R1ZmYiIHN0cm9rZT0iIzk5OSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgIDx1c2UgeGxpbms6aHJlZj0iI2JsYWNrX3N0dWZmIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz4KICAgPGNpcmNsZSByPSIxMDAiIGZpbGw9InVybCgjc2hhZG93MikiIHN0cm9rZT0ibm9uZSIvPgo8L3N2Zz4=',
-        },
-      },
-    })
-  }
-
-  refContainer = (container: HTMLDivElement) => {
-    this.container = container
-  }
-
-  render() {
-    return (
-      <div className="x6-graph-wrap">
-        <div
-          ref={this.refContainer}
-          className="x6-graph"
-          style={{
-            backgroundImage: 'linear-gradient(to bottom, #00BFFF , #FFFFFF)',
-          }}
-        />
-      </div>
-    )
-  }
-}

examples/x6-example-features/src/pages/animation/transition.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import { Graph, Cell } from '@antv/x6'
-import { Point } from '@antv/x6-geometry'
-import { Timing, Interp } from '@antv/x6-common'
+import { Graph, Cell, Point, Timing, Interp  } from '@antv/x6'
 import '../index.less'
 
 export default class Example extends React.Component {
@@ -12,7 +10,6 @@ export default class Example extends React.Component {
       container: this.container,
       width: 650,
       height: 400,
-      grid: 1,
       background: {
         color: '#F2F7FA',
       },

examples/x6-example-features/src/pages/auto-resize/index.less

@@ -0,0 +1,9 @@
+.full {
+  width: 100%;
+  height: 100%;
+}
+
+.x6-split-box-horizontal > .x6-split-box-resizer,
+.x6-split-box-vertical > .x6-split-box-resizer {
+  background: #ffe58f;
+}

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

@@ -1,68 +1,45 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
+import { Scroller } from '@antv/x6-plugin-scroller'
+import { SplitBox } from '@antv/x6-react-components'
+import '@antv/x6-react-components/es/split-box/style/index.css'
 import '../index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private graphContainer1: HTMLDivElement
   private graphContainer2: HTMLDivElement
+  private graphContainer3: HTMLDivElement
 
   componentDidMount() {
-    const graph1 = new Graph({
+    new Graph({
       container: this.graphContainer1,
       background: {
-        color: '#f5f5f5',
+        color: '#D94111',
       },
-      grid: true,
-      scroller: true,
       autoResize: true,
     })
 
-    const rect = graph1.addNode({
-      x: 300,
-      y: 300,
-      width: 90,
-      height: 60,
-    })
-
-    const circle = graph1.addNode({
-      x: 400,
-      y: 400,
-      width: 40,
-      height: 40,
-    })
-
-    graph1.addEdge({
-      source: rect,
-      target: circle,
-    })
-
-    const graph2 = new Graph({
+    new Graph({
       container: this.graphContainer2,
       background: {
-        color: '#f5f5f5',
+        color: '#90C54C',
       },
-      grid: true,
       autoResize: true,
     })
 
-    const source = graph2.addNode({
-      x: 40,
-      y: 40,
-      width: 80,
-      height: 40,
-    })
-
-    const target = graph2.addNode({
-      x: 120,
-      y: 100,
-      width: 80,
-      height: 40,
-    })
-
-    graph2.addEdge({
-      source,
-      target,
+    const graph = new Graph({
+      container: this.graphContainer3,
+      background: {
+        color: '#0491E4',
+      },
+      autoResize: true,
     })
+    graph.use(
+      new Scroller({
+        enabled: true,
+      }),
+    )
   }
 
   refContainer1 = (container: HTMLDivElement) => {
@@ -73,23 +50,29 @@ export default class Example extends React.Component {
     this.graphContainer2 = container
   }
 
+  refContainer3 = (container: HTMLDivElement) => {
+    this.graphContainer3 = container
+  }
+
   render() {
     return (
-      <div style={{ width: '100%', height: '100%' }}>
-        <div className="x6-graph-wrap" style={{ display: 'flex' }}>
-          <div
-            ref={this.refContainer1}
-            style={{ flex: 1, margin: '0 32px' }}
-            className="x6-graph"
-          />
-        </div>
-        <div className="x6-graph-wrap" style={{ display: 'flex' }}>
-          <div
-            ref={this.refContainer2}
-            style={{ flex: 1, margin: '0 32px' }}
-            className="x6-graph"
-          />
-        </div>
+      <div
+        className="x6-graph-wrap"
+        style={{ width: 800, height: 800, margin: '0 auto' }}
+      >
+        <SplitBox split="horizontal">
+          <div className="full">
+            <div ref={this.refContainer1} className="x6-graph" />
+          </div>
+          <SplitBox split="vertical">
+            <div className="full">
+              <div ref={this.refContainer2} className="x6-graph" />
+            </div>
+            <div className="full">
+              <div ref={this.refContainer3} className="x6-graph" />
+            </div>
+          </SplitBox>
+        </SplitBox>
       </div>
     )
   }

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

@@ -9,24 +9,31 @@ export default class Example extends React.Component {
     const graph = new Graph({
       container: this.container,
       width: 800,
-      height: 400,
+      height: 600,
       grid: true,
-      async: true,
     })
 
-    graph.addNode({
-      x: 120,
+    const source = graph.addNode({
+      shape: 'rect',
+      x: 80,
       y: 80,
-      width: 100,
-      height: 40,
-      label: 'rect',
-      zIndex: 10,
+      width: 160,
+      height: 60,
+      label: 'source',
+    })
+
+    const target = graph.addNode({
+      shape: 'rect',
+      x: 320,
+      y: 320,
+      width: 160,
+      height: 60,
+      label: 'target',
     })
 
     graph.addEdge({
-      source: { x: 10, y: 10 },
-      target: { x: 300, y: 200 },
-      zIndex: 1,
+      source,
+      target,
     })
   }
 

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

@@ -3,7 +3,7 @@ import { Graph, Cell } from '@antv/x6'
 import '../index.less'
 
 Graph.registerNode(
-  'event',
+  'bpmn-event',
   {
     inherit: 'circle',
     attrs: {
@@ -18,7 +18,7 @@ Graph.registerNode(
 )
 
 Graph.registerNode(
-  'activity',
+  'bpmn-activity',
   {
     inherit: 'rect',
     markup: [
@@ -61,7 +61,7 @@ Graph.registerNode(
 )
 
 Graph.registerNode(
-  'gateway',
+  'bpmn-gateway',
   {
     inherit: 'polygon',
     attrs: {
@@ -98,14 +98,14 @@ Graph.registerEdge(
 const data = [
   {
     id: '1',
-    shape: 'event',
+    shape: 'bpmn-event',
     width: 40,
     height: 40,
     position: { x: 50, y: 180 },
   },
   {
     id: '2',
-    shape: 'activity',
+    shape: 'bpmn-activity',
     width: 100,
     height: 60,
     position: { x: 20, y: 280 },
@@ -119,7 +119,7 @@ const data = [
   },
   {
     id: '4',
-    shape: 'gateway',
+    shape: 'bpmn-gateway',
     width: 55,
     height: 55,
     position: { x: 170, y: 282.5 },
@@ -132,7 +132,7 @@ const data = [
   },
   {
     id: '6',
-    shape: 'activity',
+    shape: 'bpmn-activity',
     width: 100,
     height: 60,
     position: { x: 300, y: 240 },
@@ -140,7 +140,7 @@ const data = [
   },
   {
     id: '7',
-    shape: 'activity',
+    shape: 'bpmn-activity',
     width: 100,
     height: 60,
     position: { x: 300, y: 320 },
@@ -160,7 +160,7 @@ const data = [
   },
   {
     id: '10',
-    shape: 'gateway',
+    shape: 'bpmn-gateway',
     width: 55,
     height: 55,
     position: { x: 460, y: 282.5 },
@@ -179,7 +179,7 @@ const data = [
   },
   {
     id: '13',
-    shape: 'activity',
+    shape: 'bpmn-activity',
     width: 100,
     height: 60,
     position: { x: 560, y: 280 },
@@ -193,7 +193,7 @@ const data = [
   },
   {
     id: '15',
-    shape: 'event',
+    shape: 'bpmn-event',
     width: 40,
     height: 40,
     position: { x: 710, y: 290 },

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Graph, ObjectExt, Cell } from '@antv/x6'
+import { Graph, Cell, ObjectExt } from '@antv/x6'
 import '../index.less'
 
 Graph.registerNode(

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

@@ -1,453 +1,454 @@
-// import React from 'react'
-// import { Graph, Node, Path, Cell } from '@antv/x6'
-// import '@antv/x6-react-shape'
-// import '../index.less'
-// import './index.less'
-// interface NodeStatus {
-//   id: string
-//   status: 'default' | 'success' | 'failed' | 'running'
-//   label?: string
-// }
+import React from 'react'
+import { Graph, Node, Cell, Path } from '@antv/x6'
+import { register } from '@antv/x6-react-shape'
+import { Selection } from '@antv/x6-plugin-selection'
+import { Snapline } from '@antv/x6-plugin-snapline'
+import '../index.less'
+import './index.less'
+interface NodeStatus {
+  id: string
+  status: string
+  label?: string
+}
 
-// const image = {
-//   logo: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
-//   success:
-//     'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ',
-//   failed:
-//     'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ',
-//   running:
-//     'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t8fURKfgSOgAAAAAAAAAAAAAARQnAQ',
-// }
-// export class AlgoNode extends React.Component<{ node?: Node }> {
-//   shouldComponentUpdate() {
-//     const { node } = this.props
-//     if (node) {
-//       if (node.hasChanged('data')) {
-//         return true
-//       }
-//     }
-//     return false
-//   }
+const image = {
+  logo: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
+  success:
+    'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ',
+  failed:
+    'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ',
+  running:
+    'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t8fURKfgSOgAAAAAAAAAAAAAARQnAQ',
+}
+export class AlgoNode extends React.Component<{ node?: Node }> {
+  shouldComponentUpdate() {
+    const { node } = this.props
+    if (node) {
+      if (node.hasChanged('data')) {
+        return true
+      }
+    }
+    return false
+  }
 
-//   render() {
-//     const { node } = this.props
-//     const data = node?.getData() as NodeStatus
-//     const { label, status = 'default' } = data
+  render() {
+    const { node } = this.props
+    const data = node?.getData() as NodeStatus
+    const { label, status = 'default' } = data
 
-//     return (
-//       <div className={`node ${status}`}>
-//         <img src={image.logo} alt="logo" />
-//         <span className="label">{label}</span>
-//         <span className="status">
-//           {status === 'success' && <img src={image.success} alt="success" />}
-//           {status === 'failed' && <img src={image.failed} alt="failed" />}
-//           {status === 'running' && <img src={image.running} alt="running" />}
-//         </span>
-//       </div>
-//     )
-//   }
-// }
+    return (
+      <div className={`node ${status}`}>
+        <img src={image.logo} alt="logo" />
+        <span className="label">{label}</span>
+        <span className="status">
+          {status === 'success' && <img src={image.success} alt="success" />}
+          {status === 'failed' && <img src={image.failed} alt="failed" />}
+          {status === 'running' && <img src={image.running} alt="running" />}
+        </span>
+      </div>
+    )
+  }
+}
 
-// Graph.registerNode(
-//   'dag-node',
-//   {
-//     inherit: 'react-shape',
-//     width: 180,
-//     height: 36,
-//     component: <AlgoNode />,
-//     ports: {
-//       groups: {
-//         top: {
-//           position: 'top',
-//           attrs: {
-//             circle: {
-//               r: 4,
-//               magnet: true,
-//               stroke: '#C2C8D5',
-//               strokeWidth: 1,
-//               fill: '#fff',
-//             },
-//           },
-//         },
-//         bottom: {
-//           position: 'bottom',
-//           attrs: {
-//             circle: {
-//               r: 4,
-//               magnet: true,
-//               stroke: '#C2C8D5',
-//               strokeWidth: 1,
-//               fill: '#fff',
-//             },
-//           },
-//         },
-//       },
-//     },
-//   },
-//   true,
-// )
+register({
+  shape: 'dag-node',
+  width: 180,
+  height: 36,
+  component: AlgoNode,
+  ports: {
+    groups: {
+      top: {
+        position: 'top',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#C2C8D5',
+            strokeWidth: 1,
+            fill: '#fff',
+          },
+        },
+      },
+      bottom: {
+        position: 'bottom',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#C2C8D5',
+            strokeWidth: 1,
+            fill: '#fff',
+          },
+        },
+      },
+    },
+  },
+})
 
-// Graph.registerEdge(
-//   'dag-edge',
-//   {
-//     inherit: 'edge',
-//     attrs: {
-//       line: {
-//         stroke: '#C2C8D5',
-//         strokeWidth: 1,
-//         targetMarker: null,
-//       },
-//     },
-//   },
-//   true,
-// )
+Graph.registerEdge(
+  'dag-edge',
+  {
+    inherit: 'edge',
+    attrs: {
+      line: {
+        stroke: '#C2C8D5',
+        strokeWidth: 1,
+        targetMarker: null,
+      },
+    },
+  },
+  true,
+)
 
-// Graph.registerConnector(
-//   'algo-connector',
-//   (s, e) => {
-//     const offset = 4
-//     const deltaY = Math.abs(e.y - s.y)
-//     const control = Math.floor((deltaY / 3) * 2)
+Graph.registerConnector(
+  'algo-connector',
+  (s, e) => {
+    const offset = 4
+    const deltaY = Math.abs(e.y - s.y)
+    const control = Math.floor((deltaY / 3) * 2)
 
-//     const v1 = { x: s.x, y: s.y + offset + control }
-//     const v2 = { x: e.x, y: e.y - offset - control }
+    const v1 = { x: s.x, y: s.y + offset + control }
+    const v2 = { x: e.x, y: e.y - offset - control }
 
-//     return Path.normalize(
-//       `M ${s.x} ${s.y}
-//        L ${s.x} ${s.y + offset}
-//        C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${e.x} ${e.y - offset}
-//        L ${e.x} ${e.y}
-//       `,
-//     )
-//   },
-//   true,
-// )
+    return Path.normalize(
+      `M ${s.x} ${s.y}
+       L ${s.x} ${s.y + offset}
+       C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${e.x} ${e.y - offset}
+       L ${e.x} ${e.y}
+      `,
+    )
+  },
+  true,
+)
 
-// const data = [
-//   {
-//     id: '1',
-//     shape: 'dag-node',
-//     x: 290,
-//     y: 110,
-//     data: {
-//       label: '读数据',
-//       status: 'success',
-//     },
-//     ports: [
-//       {
-//         id: '1-1',
-//         group: 'bottom',
-//       },
-//     ],
-//   },
-//   {
-//     id: '2',
-//     shape: 'dag-node',
-//     x: 290,
-//     y: 225,
-//     data: {
-//       label: '读数据',
-//       status: 'success',
-//     },
-//     ports: [
-//       {
-//         id: '2-1',
-//         group: 'top',
-//       },
-//       {
-//         id: '2-2',
-//         group: 'bottom',
-//       },
-//       {
-//         id: '2-3',
-//         group: 'bottom',
-//       },
-//     ],
-//   },
-//   {
-//     id: '3',
-//     shape: 'dag-node',
-//     x: 170,
-//     y: 350,
-//     data: {
-//       label: '读数据',
-//       status: 'success',
-//     },
-//     ports: [
-//       {
-//         id: '3-1',
-//         group: 'top',
-//       },
-//       {
-//         id: '3-2',
-//         group: 'bottom',
-//       },
-//     ],
-//   },
-//   {
-//     id: '4',
-//     shape: 'dag-node',
-//     x: 450,
-//     y: 350,
-//     data: {
-//       label: '读数据',
-//       status: 'success',
-//     },
-//     ports: [
-//       {
-//         id: '4-1',
-//         group: 'top',
-//       },
-//       {
-//         id: '4-2',
-//         group: 'bottom',
-//       },
-//     ],
-//   },
-//   {
-//     id: '5',
-//     shape: 'dag-edge',
-//     source: {
-//       cell: '1',
-//       port: '1-1',
-//     },
-//     target: {
-//       cell: '2',
-//       port: '2-1',
-//     },
-//     zIndex: 0,
-//   },
-//   {
-//     id: '6',
-//     shape: 'dag-edge',
-//     source: {
-//       cell: '2',
-//       port: '2-2',
-//     },
-//     target: {
-//       cell: '3',
-//       port: '3-1',
-//     },
-//     zIndex: 0,
-//   },
-//   {
-//     id: '7',
-//     shape: 'dag-edge',
-//     source: {
-//       cell: '2',
-//       port: '2-3',
-//     },
-//     target: {
-//       cell: '4',
-//       port: '4-1',
-//     },
-//     zIndex: 0,
-//   },
-// ]
+const data = [
+  {
+    id: '1',
+    shape: 'dag-node',
+    x: 290,
+    y: 110,
+    data: {
+      label: '读数据',
+      status: 'success',
+    },
+    ports: [
+      {
+        id: '1-1',
+        group: 'bottom',
+      },
+    ],
+  },
+  {
+    id: '2',
+    shape: 'dag-node',
+    x: 290,
+    y: 225,
+    data: {
+      label: '读数据',
+      status: 'success',
+    },
+    ports: [
+      {
+        id: '2-1',
+        group: 'top',
+      },
+      {
+        id: '2-2',
+        group: 'bottom',
+      },
+      {
+        id: '2-3',
+        group: 'bottom',
+      },
+    ],
+  },
+  {
+    id: '3',
+    shape: 'dag-node',
+    x: 170,
+    y: 350,
+    data: {
+      label: '读数据',
+      status: 'success',
+    },
+    ports: [
+      {
+        id: '3-1',
+        group: 'top',
+      },
+      {
+        id: '3-2',
+        group: 'bottom',
+      },
+    ],
+  },
+  {
+    id: '4',
+    shape: 'dag-node',
+    x: 450,
+    y: 350,
+    data: {
+      label: '读数据',
+      status: 'success',
+    },
+    ports: [
+      {
+        id: '4-1',
+        group: 'top',
+      },
+      {
+        id: '4-2',
+        group: 'bottom',
+      },
+    ],
+  },
+  {
+    id: '5',
+    shape: 'dag-edge',
+    source: {
+      cell: '1',
+      port: '1-1',
+    },
+    target: {
+      cell: '2',
+      port: '2-1',
+    },
+    zIndex: 0,
+  },
+  {
+    id: '6',
+    shape: 'dag-edge',
+    source: {
+      cell: '2',
+      port: '2-2',
+    },
+    target: {
+      cell: '3',
+      port: '3-1',
+    },
+    zIndex: 0,
+  },
+  {
+    id: '7',
+    shape: 'dag-edge',
+    source: {
+      cell: '2',
+      port: '2-3',
+    },
+    target: {
+      cell: '4',
+      port: '4-1',
+    },
+    zIndex: 0,
+  },
+]
 
-// const nodeStatusList = [
-//   [
-//     {
-//       id: '1',
-//       status: 'running',
-//     },
-//     {
-//       id: '2',
-//       status: 'default',
-//     },
-//     {
-//       id: '3',
-//       status: 'default',
-//     },
-//     {
-//       id: '4',
-//       status: 'default',
-//     },
-//   ],
-//   [
-//     {
-//       id: '1',
-//       status: 'success',
-//     },
-//     {
-//       id: '2',
-//       status: 'running',
-//     },
-//     {
-//       id: '3',
-//       status: 'default',
-//     },
-//     {
-//       id: '4',
-//       status: 'default',
-//     },
-//   ],
-//   [
-//     {
-//       id: '1',
-//       status: 'success',
-//     },
-//     {
-//       id: '2',
-//       status: 'success',
-//     },
-//     {
-//       id: '3',
-//       status: 'running',
-//     },
-//     {
-//       id: '4',
-//       status: 'running',
-//     },
-//   ],
-//   [
-//     {
-//       id: '1',
-//       status: 'success',
-//     },
-//     {
-//       id: '2',
-//       status: 'success',
-//     },
-//     {
-//       id: '3',
-//       status: 'success',
-//     },
-//     {
-//       id: '4',
-//       status: 'failed',
-//     },
-//   ],
-// ]
-// export default class Example extends React.Component {
-//   private container: HTMLDivElement
+const nodeStatusList = [
+  [
+    {
+      id: '1',
+      status: 'running',
+    },
+    {
+      id: '2',
+      status: 'default',
+    },
+    {
+      id: '3',
+      status: 'default',
+    },
+    {
+      id: '4',
+      status: 'default',
+    },
+  ],
+  [
+    {
+      id: '1',
+      status: 'success',
+    },
+    {
+      id: '2',
+      status: 'running',
+    },
+    {
+      id: '3',
+      status: 'default',
+    },
+    {
+      id: '4',
+      status: 'default',
+    },
+  ],
+  [
+    {
+      id: '1',
+      status: 'success',
+    },
+    {
+      id: '2',
+      status: 'success',
+    },
+    {
+      id: '3',
+      status: 'running',
+    },
+    {
+      id: '4',
+      status: 'running',
+    },
+  ],
+  [
+    {
+      id: '1',
+      status: 'success',
+    },
+    {
+      id: '2',
+      status: 'success',
+    },
+    {
+      id: '3',
+      status: 'success',
+    },
+    {
+      id: '4',
+      status: 'failed',
+    },
+  ],
+]
+export default class Example extends React.Component {
+  private container: HTMLDivElement
 
-//   componentDidMount() {
-//     const graph: Graph = new Graph({
-//       container: this.container,
-//       width: 800,
-//       height: 600,
-//       panning: {
-//         enabled: true,
-//         eventTypes: ['leftMouseDown', 'mouseWheel'],
-//       },
-//       mousewheel: {
-//         enabled: true,
-//         modifiers: 'ctrl',
-//         factor: 1.1,
-//         maxScale: 1.5,
-//         minScale: 0.5,
-//       },
-//       highlighting: {
-//         magnetAdsorbed: {
-//           name: 'stroke',
-//           args: {
-//             attrs: {
-//               fill: '#fff',
-//               stroke: '#31d0c6',
-//               strokeWidth: 4,
-//             },
-//           },
-//         },
-//       },
-//       connecting: {
-//         snap: true,
-//         allowBlank: false,
-//         allowLoop: false,
-//         highlight: true,
-//         connector: 'algo-connector',
-//         connectionPoint: 'anchor',
-//         anchor: 'center',
-//         validateMagnet({ magnet }) {
-//           return magnet.getAttribute('port-group') !== 'top'
-//         },
-//         createEdge() {
-//           return graph.createEdge({
-//             shape: 'dag-edge',
-//             attrs: {
-//               line: {
-//                 strokeDasharray: '5 5',
-//               },
-//             },
-//             zIndex: -1,
-//           })
-//         },
-//       },
-//       selecting: {
-//         enabled: true,
-//         multiple: true,
-//         rubberEdge: true,
-//         rubberNode: true,
-//         modifiers: 'shift',
-//         rubberband: true,
-//       },
-//     })
+  componentDidMount() {
+    const graph: Graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+      panning: {
+        enabled: true,
+        eventTypes: ['leftMouseDown', 'mouseWheel'],
+      },
+      mousewheel: {
+        enabled: true,
+        modifiers: 'ctrl',
+        factor: 1.1,
+        maxScale: 1.5,
+        minScale: 0.5,
+      },
+      highlighting: {
+        magnetAdsorbed: {
+          name: 'stroke',
+          args: {
+            attrs: {
+              fill: '#fff',
+              stroke: '#31d0c6',
+              strokeWidth: 4,
+            },
+          },
+        },
+      },
+      connecting: {
+        snap: true,
+        allowBlank: false,
+        allowLoop: false,
+        highlight: true,
+        connector: 'algo-connector',
+        connectionPoint: 'anchor',
+        anchor: 'center',
+        validateMagnet({ magnet }) {
+          return magnet.getAttribute('port-group') !== 'top'
+        },
+        createEdge() {
+          return graph.createEdge({
+            shape: 'dag-edge',
+            attrs: {
+              line: {
+                strokeDasharray: '5 5',
+              },
+            },
+            zIndex: -1,
+          })
+        },
+      },
+    })
 
-//     graph.on('edge:connected', ({ edge }) => {
-//       edge.attr({
-//         line: {
-//           strokeDasharray: '',
-//         },
-//       })
-//     })
+    const selection = new Selection({
+      enabled: true,
+      multiple: true,
+      rubberEdge: true,
+      rubberNode: true,
+      modifiers: 'shift',
+      rubberband: true,
+    })
+    graph.use(selection)
+    graph.use(new Snapline({ enabled: true }))
 
-//     graph.on('node:change:data', ({ node }) => {
-//       const edges = graph.getIncomingEdges(node)
-//       const { status } = node.getData() as NodeStatus
-//       edges?.forEach((edge) => {
-//         if (status === 'running') {
-//           edge.attr('line/strokeDasharray', 5)
-//           edge.attr('line/style/animation', 'running-line 30s infinite linear')
-//         } else {
-//           edge.attr('line/strokeDasharray', '')
-//           edge.attr('line/style/animation', '')
-//         }
-//       })
-//     })
+    graph.on('edge:connected', ({ edge }) => {
+      edge.attr({
+        line: {
+          strokeDasharray: '',
+        },
+      })
+    })
 
-//     // 初始化节点/边
-//     const init = (data: Cell.Metadata[]) => {
-//       const cells: Cell[] = []
-//       data.forEach((item) => {
-//         if (item.shape === 'dag-node') {
-//           cells.push(graph.createNode(item))
-//         } else {
-//           cells.push(graph.createEdge(item))
-//         }
-//       })
-//       graph.resetCells(cells)
-//     }
+    graph.on('node:change:data', ({ node }) => {
+      const edges = graph.getIncomingEdges(node)
+      const { status } = node.getData() as NodeStatus
+      edges?.forEach((edge) => {
+        if (status === 'running') {
+          edge.attr('line/strokeDasharray', 5)
+          edge.attr('line/style/animation', 'running-line 30s infinite linear')
+        } else {
+          edge.attr('line/strokeDasharray', '')
+          edge.attr('line/style/animation', '')
+        }
+      })
+    })
 
-//     // 显示节点状态
-//     const showNodeStatus = async (statusList: NodeStatus[][]) => {
-//       const status = statusList.shift()
-//       status?.forEach((item) => {
-//         const { id, status } = item
-//         const node = graph.getCellById(id)
-//         const data = node.getData() as NodeStatus
-//         node.setData({
-//           ...data,
-//           status: status,
-//         })
-//       })
-//       setTimeout(() => {
-//         showNodeStatus(statusList)
-//       }, 3000)
-//     }
+    // 初始化节点/边
+    const init = (data: Cell.Metadata[]) => {
+      const cells: Cell[] = []
+      data.forEach((item) => {
+        if (item.shape === 'dag-node') {
+          cells.push(graph.createNode(item))
+        } else {
+          cells.push(graph.createEdge(item))
+        }
+      })
+      graph.resetCells(cells)
+    }
 
-//     init(data)
-//     showNodeStatus(nodeStatusList)
-//   }
+    // 显示节点状态
+    const showNodeStatus = async (statusList: NodeStatus[][]) => {
+      const status = statusList.shift()
+      status?.forEach((item) => {
+        const { id, status } = item
+        const node = graph.getCellById(id)
+        const data = node.getData() as NodeStatus
+        node.setData({
+          ...data,
+          status: status,
+        })
+      })
+      setTimeout(() => {
+        showNodeStatus(statusList)
+      }, 3000)
+    }
 
-//   refContainer = (container: HTMLDivElement) => {
-//     this.container = container
-//   }
+    init(data)
+    showNodeStatus(nodeStatusList)
+  }
 
-//   render() {
-//     return (
-//       <div className="x6-graph-wrap">
-//         <div ref={this.refContainer} className="dag" />
-//       </div>
-//     )
-//   }
-// }
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="dag" />
+      </div>
+    )
+  }
+}

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

@@ -2,6 +2,8 @@ import React from 'react'
 import { Graph, Cell, Node } from '@antv/x6'
 import { connectors } from '../connector/xmind-definitions'
 import Hierarchy from '@antv/hierarchy'
+import { Selection } from '@antv/x6-plugin-selection'
+import { Keyboard } from '@antv/x6-plugin-keyboard'
 import '../index.less'
 import './mind.less'
 
@@ -181,13 +183,15 @@ export default class Example extends React.Component {
       connecting: {
         connectionPoint: 'anchor',
       },
-      selecting: {
-        enabled: true,
-      },
-      keyboard: {
-        enabled: true,
-      },
     })
+    const selection = new Selection({
+      enabled: true,
+    })
+    graph.use(selection)
+    const keyboard = new Keyboard({
+      enabled: true,
+    })
+    graph.use(keyboard)
 
     const render = () => {
       const result: HierarchyResult = Hierarchy.mindmap(data, {
@@ -346,8 +350,8 @@ export default class Example extends React.Component {
         render()
       }
     })
-    graph.bindKey(['backspace', 'delete'], () => {
-      const selectedNodes = graph
+    keyboard.bindKey(['backspace', 'delete'], () => {
+      const selectedNodes = selection
         .getSelectedCells()
         .filter((item) => item.isNode())
       if (selectedNodes.length) {
@@ -358,9 +362,9 @@ export default class Example extends React.Component {
       }
     })
 
-    graph.bindKey('tab', (e) => {
+    keyboard.bindKey('tab', (e) => {
       e.preventDefault()
-      const selectedNodes = graph
+      const selectedNodes = selection
         .getSelectedCells()
         .filter((item) => item.isNode())
       if (selectedNodes.length) {

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

@@ -1,11 +1,15 @@
 import React from 'react'
 import { Button } from 'antd'
 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 '../index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
-  private graph: Graph
+  private selection: Selection
+  private clipboard: Clipboard
 
   componentDidMount() {
     const graph = new Graph({
@@ -13,14 +17,24 @@ export default class Example extends React.Component {
       width: 800,
       height: 600,
       grid: true,
-      selecting: {
-        enabled: true,
-      },
-      clipboard: {
-        enabled: true,
-        useLocalStorage: true,
-      },
     })
+    const clipboard = new Clipboard({
+      enabled: true,
+      useLocalStorage: true,
+    })
+    const selection = new Selection({
+      enabled: true,
+      rubberband: true,
+      multiple: true,
+      strict: true,
+    })
+    const keyboard = new Keyboard({
+      enabled: true,
+    })
+
+    graph.use(clipboard)
+    graph.use(selection)
+    graph.use(keyboard)
 
     graph.addNode({
       x: 50,
@@ -46,24 +60,22 @@ export default class Example extends React.Component {
       attrs: { label: { text: 'C' } },
     })
 
-    graph.bindKey('meta+c', () => {
-      const cells = graph.getSelectedCells()
-      if (cells.length) {
-        graph.copy(cells)
-      }
-      return false
+    keyboard.bindKey('meta+c', (e) => {
+      e.preventDefault()
+      this.onCopy()
     })
 
-    graph.bindKey('meta+v', () => {
-      if (!graph.isClipboardEmpty()) {
-        const cells = graph.paste({ offset: 32 })
-        graph.cleanSelection()
-        graph.select(cells)
-      }
-      return false
+    keyboard.bindKey('meta+v', (e) => {
+      e.preventDefault()
+      this.onPaste()
     })
 
-    this.graph = graph
+    clipboard.on('clipboard:changed', ({ cells }) => {
+      console.log(cells)
+    })
+
+    this.selection = selection
+    this.clipboard = clipboard
   }
 
   refContainer = (container: HTMLDivElement) => {
@@ -71,18 +83,15 @@ export default class Example extends React.Component {
   }
 
   onCopy = () => {
-    const cells = this.graph.getSelectedCells()
+    const cells = this.selection.getSelectedCells()
     if (cells && cells.length) {
-      console.log(cells)
-      this.graph.copy(cells)
+      this.clipboard.copy(cells)
     }
   }
 
   onPaste = () => {
-    if (!this.graph.isClipboardEmpty()) {
-      this.graph.paste()
-    } else {
-      console.log('empty')
+    if (!this.clipboard.isEmpty()) {
+      this.clipboard.paste()
     }
   }
 

examples/x6-example-features/src/pages/connector/multi.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Graph, Line, Edge } from '@antv/x6'
+import { Graph, Edge, Line } from '@antv/x6'
 import '../index.less'
 
 export default class Example extends React.Component {

examples/x6-example-features/src/pages/connector/offset-rounded.tsx

@@ -2,17 +2,17 @@ import React from 'react'
 import { Graph, Point, Path } from '@antv/x6'
 import '../index.less'
 
-export interface ErRoundedArgs {
+export interface OffsetRoundedArgs {
   raw?: boolean
   radius?: number
   offset?: number
 }
 
-function erRounded(
+function offsetRounded(
   sourcePoint: Point.PointLike,
   targetPoint: Point.PointLike,
   routePoints: Point.PointLike[],
-  args: ErRoundedArgs,
+  args: OffsetRoundedArgs,
 ) {
   const path = new Path()
 
@@ -75,7 +75,7 @@ function erRounded(
 
   return args.raw ? path : path.serialize()
 }
-Graph.registerConnector('erRounded', erRounded, true)
+Graph.registerConnector('offsetRounded', offsetRounded, true)
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -113,7 +113,7 @@ export default class Example extends React.Component {
       source,
       target,
       connector: {
-        name: 'erRounded',
+        name: 'offsetRounded',
         args: {
           radius: 20,
           offset: -20,
@@ -125,7 +125,7 @@ export default class Example extends React.Component {
       source,
       target,
       connector: {
-        name: 'erRounded',
+        name: 'offsetRounded',
         args: {
           radius: 20,
           offset: 0,
@@ -137,7 +137,7 @@ export default class Example extends React.Component {
       source,
       target,
       connector: {
-        name: 'erRounded',
+        name: 'offsetRounded',
         args: {
           radius: 20,
           offset: 20,

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

@@ -1,238 +1,176 @@
-// import React from 'react'
-// import { Button } from 'antd'
-// import { Graph, Dom } from '@antv/x6'
-// import { Dnd } from '@antv/x6/es/addon/dnd'
-// import '../index.less'
-// import './index.less'
+import React from 'react'
+import { Graph, Node } from '@antv/x6'
+import { Dnd } from '@antv/x6-plugin-dnd'
+import '../index.less'
 
-// export default class Example extends React.Component {
-//   private graph: Graph
-//   private dnd: Dnd
-//   private container: HTMLDivElement
+export default class Example extends React.Component {
+  private graph: Graph
+  private dnd: Dnd
+  private container: HTMLDivElement
 
-//   componentDidMount() {
-//     const graph = (this.graph = new Graph({
-//       container: this.container,
-//       width: 800,
-//       height: 800,
-//       history: true,
-//       snapline: {
-//         enabled: true,
-//         sharp: true,
-//       },
-//       grid: {
-//         visible: true,
-//       },
-//       scroller: {
-//         enabled: true,
-//         width: 600,
-//         height: 400,
-//         pageVisible: true,
-//         pageBreak: false,
-//         pannable: true,
-//       },
-//       embedding: {
-//         enabled: true,
-//         findParent({ node }) {
-//           const bbox = node.getBBox()
-//           return this.getNodes().filter((parent) => {
-//             const targetBBox = parent.getBBox()
-//             return targetBBox.containsRect(bbox)
-//           })
-//         },
-//       },
-//     }))
+  componentDidMount() {
+    const graph = (this.graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 800,
+      grid: {
+        visible: true,
+      },
+      embedding: {
+        enabled: true,
+        findParent({ node }) {
+          const bbox = node.getBBox()
+          return this.getNodes().filter((parent) => {
+            const targetBBox = parent.getBBox()
+            return targetBBox.containsRect(bbox)
+          })
+        },
+      },
+    }))
 
-//     const source = graph.addNode({
-//       x: 130,
-//       y: 30,
-//       width: 200,
-//       height: 80,
-//       attrs: {
-//         label: {
-//           text: 'Hello',
-//           fill: '#6a6c8a',
-//         },
-//         body: {
-//           stroke: '#31d0c6',
-//           strokeWidth: 2,
-//         },
-//       },
-//     })
+    const source = graph.addNode({
+      x: 130,
+      y: 30,
+      width: 200,
+      height: 80,
+      attrs: {
+        label: {
+          text: 'Hello',
+          fill: '#6a6c8a',
+        },
+        body: {
+          stroke: '#31d0c6',
+          strokeWidth: 2,
+        },
+      },
+    })
 
-//     const target = graph.addNode({
-//       x: 320,
-//       y: 240,
-//       width: 100,
-//       height: 40,
-//       attrs: {
-//         label: {
-//           text: 'World',
-//           fill: '#6a6c8a',
-//         },
-//         body: {
-//           stroke: '#31d0c6',
-//           strokeWidth: 2,
-//         },
-//       },
-//     })
+    const target = graph.addNode({
+      x: 320,
+      y: 240,
+      width: 100,
+      height: 40,
+      attrs: {
+        label: {
+          text: 'World',
+          fill: '#6a6c8a',
+        },
+        body: {
+          stroke: '#31d0c6',
+          strokeWidth: 2,
+        },
+      },
+    })
 
-//     graph.addEdge({ source, target })
+    graph.addEdge({ source, target })
+    graph.centerContent()
 
-//     graph.on('node:change:parent', (args) => {
-//       console.log('node:change:parent', args)
-//     })
+    this.dnd = new Dnd({
+      target: graph,
+    })
+    this.graph = graph
+  }
 
-//     graph.on('node:added', (args) => {
-//       console.log('node:added', args)
-//     })
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
 
-//     graph.centerContent()
+  startDrag = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const target = e.currentTarget
+    const type = target.getAttribute('data-type')
+    let node: Node | undefined
+    if (type === 'rect') {
+      node = this.graph.createNode({
+        shape: 'rect',
+        width: 100,
+        height: 40,
+        attrs: {
+          label: {
+            text: 'Rect',
+            fill: '#6a6c8a',
+          },
+          body: {
+            stroke: '#31d0c6',
+            strokeWidth: 2,
+          },
+        },
+      })
+    } else if (type === 'circle') {
+      node = this.graph.createNode({
+        shape: 'circle',
+        width: 60,
+        height: 60,
+        attrs: {
+          label: {
+            text: 'Circle',
+            fill: '#6a6c8a',
+          },
+          body: {
+            stroke: '#31d0c6',
+            strokeWidth: 2,
+          },
+        },
+      })
+    }
 
-//     this.dnd = new Dnd({
-//       target: graph,
-//       animation: true,
-//       getDragNode(sourceNode, options) {
-//         console.log('getDragNode', sourceNode, options)
-//         return sourceNode.clone()
-//       },
-//       getDropNode(draggingNode, options) {
-//         console.log('getDropNode', draggingNode, options)
-//         return draggingNode.clone()
-//       },
-//       validateNode(droppingNode, options) {
-//         console.log('validateNode', droppingNode, options)
+    if (node) {
+      this.dnd.start(node, e.nativeEvent as any)
+    }
+  }
 
-//         return droppingNode.shape === 'html'
-//           ? new Promise<boolean>((resolve) => {
-//               const { draggingNode, draggingGraph } = options
-//               const view = draggingGraph.findView(draggingNode)
-//               const contentElem = view.findOne('foreignObject > body > div')
-//               Dom.addClass(contentElem, 'validating')
-//               setTimeout(() => {
-//                 Dom.removeClass(contentElem, 'validating')
-//                 resolve(true)
-//               }, 3000)
-//             })
-//           : true
-//       },
-//     })
-//     this.graph = graph
-//   }
-
-//   onUndo = () => {
-//     this.graph.undo()
-//   }
-
-//   onRedo = () => {
-//     this.graph.redo()
-//   }
-
-//   refContainer = (container: HTMLDivElement) => {
-//     this.container = container
-//   }
-
-//   startDrag = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-//     const target = e.currentTarget
-//     const type = target.getAttribute('data-type')
-//     const node =
-//       type === 'rect'
-//         ? this.graph.createNode({
-//             width: 100,
-//             height: 40,
-//             attrs: {
-//               label: {
-//                 text: 'Rect',
-//                 fill: '#6a6c8a',
-//               },
-//               body: {
-//                 stroke: '#31d0c6',
-//                 strokeWidth: 2,
-//               },
-//             },
-//           })
-//         : this.graph.createNode({
-//             width: 60,
-//             height: 60,
-//             shape: 'html',
-//             html: () => {
-//               const wrap = document.createElement('div')
-//               wrap.style.width = '100%'
-//               wrap.style.height = '100%'
-//               wrap.style.display = 'flex'
-//               wrap.style.alignItems = 'center'
-//               wrap.style.justifyContent = 'center'
-//               wrap.style.border = '2px solid rgb(49, 208, 198)'
-//               wrap.style.background = '#fff'
-//               wrap.style.borderRadius = '100%'
-//               wrap.innerText = 'Circle'
-//               return wrap
-//             },
-//           })
-
-//     this.dnd.start(node, e.nativeEvent as any)
-//   }
-
-//   render() {
-//     return (
-//       <div className="x6-graph-wrap">
-//         <h1>Dnd</h1>
-//         <div
-//           style={{
-//             position: 'absolute',
-//             left: 32,
-//             top: 40,
-//             width: 200,
-//             height: 300,
-//             padding: 16,
-//             border: '1px solid #f0f0f0',
-//             display: 'flex',
-//             flexDirection: 'column',
-//             alignItems: 'center',
-//             userSelect: 'none',
-//           }}
-//         >
-//           <div
-//             data-type="rect"
-//             onMouseDown={this.startDrag}
-//             style={{
-//               width: 100,
-//               height: 40,
-//               border: '2px solid #31d0c6',
-//               textAlign: 'center',
-//               lineHeight: '40px',
-//               margin: 16,
-//               cursor: 'move',
-//             }}
-//           >
-//             Rect
-//           </div>
-//           <div
-//             data-type="circle"
-//             onMouseDown={this.startDrag}
-//             style={{
-//               width: 60,
-//               height: 60,
-//               borderRadius: '100%',
-//               border: '2px solid #31d0c6',
-//               textAlign: 'center',
-//               lineHeight: '60px',
-//               margin: 16,
-//               cursor: 'move',
-//             }}
-//           >
-//             Circle
-//           </div>
-//         </div>
-
-//         <div className="x6-graph-tools">
-//           <Button.Group>
-//             <Button onClick={this.onUndo}>Undo</Button>
-//             <Button onClick={this.onRedo}>Redo</Button>
-//           </Button.Group>
-//         </div>
-//         <div ref={this.refContainer} className="x6-graph" />
-//       </div>
-//     )
-//   }
-// }
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <h1>Dnd</h1>
+        <div
+          style={{
+            position: 'absolute',
+            left: 32,
+            top: 40,
+            width: 200,
+            height: 300,
+            padding: 16,
+            border: '1px solid #f0f0f0',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            userSelect: 'none',
+          }}
+        >
+          <div
+            data-type="rect"
+            onMouseDown={this.startDrag}
+            style={{
+              width: 100,
+              height: 40,
+              border: '2px solid #31d0c6',
+              textAlign: 'center',
+              lineHeight: '40px',
+              margin: 16,
+              cursor: 'move',
+            }}
+          >
+            Rect
+          </div>
+          <div
+            data-type="circle"
+            onMouseDown={this.startDrag}
+            style={{
+              width: 60,
+              height: 60,
+              borderRadius: '100%',
+              border: '2px solid #31d0c6',
+              textAlign: 'center',
+              lineHeight: '60px',
+              margin: 16,
+              cursor: 'move',
+            }}
+          >
+            Circle
+          </div>
+        </div>
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/x6-example-features/src/pages/edge/custom-connector.tsx

@@ -4,7 +4,7 @@ import '../index.less'
 
 Graph.registerConnector(
   'wobble',
-  (sourcePoint, targetPoint, vertices, args) => {
+  (sourcePoint, targetPoint, vertices, args: any) => {
     const spread = args.spread || 20
     const points = [...vertices, targetPoint].map((p) => Point.create(p))
     let prev = Point.create(sourcePoint)

examples/x6-example-features/src/pages/edge/custom-edge.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Graph, Shape, Edge, Timing } from '@antv/x6'
+import { Graph, Edge, Timing } from '@antv/x6'
 import '../index.less'
 
 export default class Example extends React.Component {
@@ -174,31 +174,6 @@ export default class Example extends React.Component {
       },
     })
 
-    graph.addEdge({
-      shape: 'shadow-edge',
-      source: { x: 100, y: 200 },
-      target: { x: 500, y: 200 },
-      vertices: [{ x: 300, y: 300 }],
-      connector: { name: 'smooth' },
-      markup: Shape.ShadowEdge.getMarkup().slice().reverse().concat({
-        tagName: 'text',
-        selector: 'label',
-      }),
-      attrs: {
-        line: {
-          stroke: '#5654a0',
-          strokeWith: 3,
-        },
-        label: {
-          textPath: { selector: 'line', startOffset: '50%' },
-          textAnchor: 'middle',
-          textVerticalAnchor: 'middle',
-          text: 'Label Along Path',
-          fill: 'yellow',
-        },
-      },
-    })
-
     Edge.registry.register('arrow', {
       markup: [
         {

examples/x6-example-features/src/pages/edge/custom-marker.tsx

@@ -263,26 +263,6 @@ export default class Example extends React.Component {
       },
     })
 
-    graph.addEdge({
-      shape: 'double-edge',
-      source: { x: 10, y: 200 },
-      target: { x: 350, y: 200 },
-      attrs: {
-        line: {
-          stroke: '#7c68fc',
-        },
-      },
-      labels: [
-        {
-          attrs: { text: { text: 'Label' } },
-          position: {
-            offset: 15,
-            distance: 0.5,
-          },
-        },
-      ],
-    })
-
     graph.addEdge({
       source: { x: 400, y: 200 },
       target: { x: 740, y: 200 },
@@ -373,55 +353,6 @@ export default class Example extends React.Component {
       ],
     })
 
-    graph.addEdge({
-      shape: 'shadow-edge',
-      source: { x: 10, y: 280 },
-      target: { x: 440, y: 280 },
-      vertices: [
-        { x: 150, y: 350 },
-        { x: 300, y: 280 },
-      ],
-      connector: { name: 'smooth' },
-      markup: [
-        {
-          tagName: 'path',
-          selector: 'shadow',
-          attrs: {
-            fill: 'none',
-          },
-        },
-        {
-          tagName: 'path',
-          selector: 'line',
-          attrs: {
-            fill: 'none',
-          },
-        },
-        {
-          tagName: 'text',
-          selector: 'label',
-        },
-      ],
-      attrs: {
-        line: {
-          stroke: '#3c4260',
-        },
-        label: {
-          textPath: {
-            selector: 'line',
-            startOffset: '50%',
-          },
-          textAnchor: 'middle',
-          textVerticalAnchor: 'middle',
-          text: 'Label Along Path',
-          fill: '#f6f6f6',
-          fontSize: 15,
-          fontWeight: 'bold',
-          fontFamily: 'fantasy',
-        },
-      },
-    })
-
     // Custom Edge
     // -----------