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

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

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

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

@@ -1,6 +1,5 @@
 import React from 'react'
-import { Graph, Node, Cell } from '@antv/x6'
-import { Path } from '@antv/x6-geometry'
+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'
@@ -51,10 +50,11 @@ export class AlgoNode extends React.Component<{ node?: Node }> {
   }
 }
 
-register(AlgoNode, {
+register({
   shape: 'dag-node',
   width: 180,
   height: 36,
+  component: AlgoNode,
   ports: {
     groups: {
       top: {

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/connector/xmind-definitions.ts

@@ -1,5 +1,4 @@
-import { Graph } from '@antv/x6'
-import { Path, Point } from '@antv/x6-geometry'
+import { Graph, Path, Point } from '@antv/x6'
 import { Connector } from '@antv/x6/lib/registry'
 
 export const connectors = {

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

@@ -1,468 +1,399 @@
-// import React from 'react'
-// import { Graph } from '@antv/x6'
-// import { Marker } from '@antv/x6/es/registry'
-// import '../index.less'
+import React from 'react'
+import { Graph } from '@antv/x6'
+import { Marker } from '@antv/x6/es/registry'
+import '../index.less'
 
-// export default class Example extends React.Component {
-//   private container: HTMLDivElement
+export default class Example extends React.Component {
+  private container: HTMLDivElement
 
-//   componentDidMount() {
-//     const graph = new Graph({
-//       container: this.container,
-//       width: 800,
-//       height: 600,
-//       interacting: { edgeMovable: false },
-//       connecting: {
-//         connectionPoint: {
-//           name: 'boundary',
-//           args: {
-//             extrapolate: true,
-//             sticky: true,
-//           },
-//         },
-//         validateConnection: function () {
-//           return false
-//         },
-//       },
-//     })
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+      interacting: { edgeMovable: false },
+      connecting: {
+        connectionPoint: {
+          name: 'boundary',
+          args: {
+            extrapolate: true,
+            sticky: true,
+          },
+        },
+        validateConnection: function () {
+          return false
+        },
+      },
+    })
 
-//     graph.addEdge({
-//       source: { x: 20, y: 20 },
-//       target: { x: 350, y: 20 },
-//       attrs: {
-//         line: {
-//           stroke: '#222138',
-//           sourceMarker: {
-//             name: 'classic',
-//             fill: '#31d0c6',
-//             stroke: 'none',
-//             size: 20,
-//           },
-//           targetMarker: {
-//             name: 'block',
-//             fill: '#fe854f',
-//             stroke: 'none',
-//             size: 20,
-//           },
-//         },
-//       },
-//     })
+    graph.addEdge({
+      source: { x: 20, y: 20 },
+      target: { x: 350, y: 20 },
+      attrs: {
+        line: {
+          stroke: '#222138',
+          sourceMarker: {
+            name: 'classic',
+            fill: '#31d0c6',
+            stroke: 'none',
+            size: 20,
+          },
+          targetMarker: {
+            name: 'block',
+            fill: '#fe854f',
+            stroke: 'none',
+            size: 20,
+          },
+        },
+      },
+    })
 
-//     graph.addEdge({
-//       source: { x: 20, y: 80 },
-//       target: { x: 350, y: 80 },
-//       attrs: {
-//         line: {
-//           stroke: '#fe854f',
-//           strokeWidth: 1,
-//           sourceMarker: 'block',
-//           targetMarker: {
-//             tagName: 'circle',
-//             r: 5,
-//           },
-//         },
-//       },
-//     })
+    graph.addEdge({
+      source: { x: 20, y: 80 },
+      target: { x: 350, y: 80 },
+      attrs: {
+        line: {
+          stroke: '#fe854f',
+          strokeWidth: 1,
+          sourceMarker: 'block',
+          targetMarker: {
+            tagName: 'circle',
+            r: 5,
+          },
+        },
+      },
+    })
 
-//     graph.addEdge({
-//       source: { x: 20, y: 400 },
-//       target: { x: 280, y: 400 },
-//       attrs: {
-//         line: {
-//           stroke: '#fe854f',
-//           strokeWidth: 1,
-//           sourceMarker: 'block',
-//           targetMarker: {
-//             name: 'block',
-//             width: 12,
-//             height: 6,
-//             open: true,
-//           },
-//         },
-//       },
-//     })
+    graph.addEdge({
+      source: { x: 20, y: 400 },
+      target: { x: 280, y: 400 },
+      attrs: {
+        line: {
+          stroke: '#fe854f',
+          strokeWidth: 1,
+          sourceMarker: 'block',
+          targetMarker: {
+            name: 'block',
+            width: 12,
+            height: 6,
+            open: true,
+          },
+        },
+      },
+    })
 
-//     graph.addEdge({
-//       source: { x: 20, y: 430 },
-//       target: { x: 280, y: 430 },
-//       attrs: {
-//         line: {
-//           stroke: '#fe854f',
-//           strokeWidth: 1,
-//           sourceMarker: 'diamond',
-//           targetMarker: {
-//             name: 'diamond',
-//             width: 12,
-//             height: 6,
-//           },
-//         },
-//       },
-//     })
+    graph.addEdge({
+      source: { x: 20, y: 430 },
+      target: { x: 280, y: 430 },
+      attrs: {
+        line: {
+          stroke: '#fe854f',
+          strokeWidth: 1,
+          sourceMarker: 'diamond',
+          targetMarker: {
+            name: 'diamond',
+            width: 12,
+            height: 6,
+          },
+        },
+      },
+    })
 
-//     graph.addEdge({
-//       source: { x: 20, y: 460 },
-//       target: { x: 280, y: 460 },
-//       attrs: {
-//         line: {
-//           stroke: '#fe854f',
-//           strokeWidth: 1,
-//           sourceMarker: 'ellipse',
-//           targetMarker: {
-//             name: 'ellipse',
-//             rx: 6,
-//             ry: 4,
-//           },
-//         },
-//       },
-//     })
+    graph.addEdge({
+      source: { x: 20, y: 460 },
+      target: { x: 280, y: 460 },
+      attrs: {
+        line: {
+          stroke: '#fe854f',
+          strokeWidth: 1,
+          sourceMarker: 'ellipse',
+          targetMarker: {
+            name: 'ellipse',
+            rx: 6,
+            ry: 4,
+          },
+        },
+      },
+    })
 
-//     graph.addEdge({
-//       source: { x: 20, y: 490 },
-//       target: { x: 280, y: 490 },
-//       attrs: {
-//         line: {
-//           stroke: '#fe854f',
-//           strokeWidth: 1,
-//           sourceMarker: 'circle',
-//           targetMarker: {
-//             name: 'circlePlus',
-//             r: 10,
-//           },
-//         },
-//       },
-//     })
+    graph.addEdge({
+      source: { x: 20, y: 490 },
+      target: { x: 280, y: 490 },
+      attrs: {
+        line: {
+          stroke: '#fe854f',
+          strokeWidth: 1,
+          sourceMarker: 'circle',
+          targetMarker: {
+            name: 'circlePlus',
+            r: 10,
+          },
+        },
+      },
+    })
 
-//     graph.addEdge({
-//       source: { x: 20, y: 520 },
-//       target: { x: 280, y: 520 },
-//       attrs: {
-//         line: {
-//           stroke: '#fe854f',
-//           strokeWidth: 1,
-//           sourceMarker: 'cross',
-//           targetMarker: {
-//             name: 'cross',
-//             width: 12,
-//             height: 8,
-//             offset: -10,
-//           },
-//         },
-//       },
-//     })
+    graph.addEdge({
+      source: { x: 20, y: 520 },
+      target: { x: 280, y: 520 },
+      attrs: {
+        line: {
+          stroke: '#fe854f',
+          strokeWidth: 1,
+          sourceMarker: 'cross',
+          targetMarker: {
+            name: 'cross',
+            width: 12,
+            height: 8,
+            offset: -10,
+          },
+        },
+      },
+    })
 
-//     graph.addEdge({
-//       source: { x: 20, y: 550 },
-//       target: { x: 280, y: 550 },
-//       attrs: {
-//         line: {
-//           stroke: '#fe854f',
-//           strokeWidth: 1,
-//           sourceMarker: 'async',
-//           targetMarker: {
-//             name: 'async',
-//             width: 12,
-//             height: 8,
-//             offset: -10,
-//             open: true,
-//             flip: true,
-//           },
-//         },
-//       },
-//     })
+    graph.addEdge({
+      source: { x: 20, y: 550 },
+      target: { x: 280, y: 550 },
+      attrs: {
+        line: {
+          stroke: '#fe854f',
+          strokeWidth: 1,
+          sourceMarker: 'async',
+          targetMarker: {
+            name: 'async',
+            width: 12,
+            height: 8,
+            offset: -10,
+            open: true,
+            flip: true,
+          },
+        },
+      },
+    })
 
-//     graph.addEdge({
-//       source: { x: 10, y: 140 },
-//       target: { x: 350, y: 140 },
-//       attrs: {
-//         line: {
-//           stroke: '#31d0c6',
-//           strokeWidth: 3,
-//           strokeDasharray: '5 2',
-//           sourceMarker: {
-//             stroke: '#31d0c6',
-//             fill: '#31d0c6',
-//             d: Marker.normalize(
-//               'M5.5,15.499,15.8,21.447,15.8,15.846,25.5,21.447,25.5,9.552,15.8,15.152,15.8,9.552z',
-//             ),
-//           },
-//           targetMarker: {
-//             stroke: '#31d0c6',
-//             fill: '#31d0c6',
-//             name: 'path',
-//             d: 'M4.834,4.834L4.833,4.833c-5.889,5.892-5.89,15.443,0.001,21.334s15.44,5.888,21.33-0.002c5.891-5.891,5.893-15.44,0.002-21.33C20.275-1.056,10.725-1.056,4.834,4.834zM25.459,5.542c0.833,0.836,1.523,1.757,2.104,2.726l-4.08,4.08c-0.418-1.062-1.053-2.06-1.912-2.918c-0.859-0.859-1.857-1.494-2.92-1.913l4.08-4.08C23.7,4.018,24.622,4.709,25.459,5.542zM10.139,20.862c-2.958-2.968-2.959-7.758-0.001-10.725c2.966-2.957,7.756-2.957,10.725,0c2.954,2.965,2.955,7.757-0.001,10.724C17.896,23.819,13.104,23.817,10.139,20.862zM5.542,25.459c-0.833-0.837-1.524-1.759-2.105-2.728l4.081-4.081c0.418,1.063,1.055,2.06,1.914,2.919c0.858,0.859,1.855,1.494,2.917,1.913l-4.081,4.081C7.299,26.982,6.379,26.292,5.542,25.459zM8.268,3.435l4.082,4.082C11.288,7.935,10.29,8.571,9.43,9.43c-0.858,0.859-1.494,1.855-1.912,2.918L3.436,8.267c0.58-0.969,1.271-1.89,2.105-2.727C6.377,4.707,7.299,4.016,8.268,3.435zM22.732,27.563l-4.082-4.082c1.062-0.418,2.061-1.053,2.919-1.912c0.859-0.859,1.495-1.857,1.913-2.92l4.082,4.082c-0.58,0.969-1.271,1.891-2.105,2.728C24.623,26.292,23.701,26.983,22.732,27.563z',
-//             offsetX: 10,
-//           },
-//         },
-//       },
-//     })
+    graph.addEdge({
+      source: { x: 10, y: 140 },
+      target: { x: 350, y: 140 },
+      attrs: {
+        line: {
+          stroke: '#31d0c6',
+          strokeWidth: 3,
+          strokeDasharray: '5 2',
+          sourceMarker: {
+            stroke: '#31d0c6',
+            fill: '#31d0c6',
+            d: Marker.normalize(
+              'M5.5,15.499,15.8,21.447,15.8,15.846,25.5,21.447,25.5,9.552,15.8,15.152,15.8,9.552z',
+            ),
+          },
+          targetMarker: {
+            stroke: '#31d0c6',
+            fill: '#31d0c6',
+            name: 'path',
+            d: 'M4.834,4.834L4.833,4.833c-5.889,5.892-5.89,15.443,0.001,21.334s15.44,5.888,21.33-0.002c5.891-5.891,5.893-15.44,0.002-21.33C20.275-1.056,10.725-1.056,4.834,4.834zM25.459,5.542c0.833,0.836,1.523,1.757,2.104,2.726l-4.08,4.08c-0.418-1.062-1.053-2.06-1.912-2.918c-0.859-0.859-1.857-1.494-2.92-1.913l4.08-4.08C23.7,4.018,24.622,4.709,25.459,5.542zM10.139,20.862c-2.958-2.968-2.959-7.758-0.001-10.725c2.966-2.957,7.756-2.957,10.725,0c2.954,2.965,2.955,7.757-0.001,10.724C17.896,23.819,13.104,23.817,10.139,20.862zM5.542,25.459c-0.833-0.837-1.524-1.759-2.105-2.728l4.081-4.081c0.418,1.063,1.055,2.06,1.914,2.919c0.858,0.859,1.855,1.494,2.917,1.913l-4.081,4.081C7.299,26.982,6.379,26.292,5.542,25.459zM8.268,3.435l4.082,4.082C11.288,7.935,10.29,8.571,9.43,9.43c-0.858,0.859-1.494,1.855-1.912,2.918L3.436,8.267c0.58-0.969,1.271-1.89,2.105-2.727C6.377,4.707,7.299,4.016,8.268,3.435zM22.732,27.563l-4.082-4.082c1.062-0.418,2.061-1.053,2.919-1.912c0.859-0.859,1.495-1.857,1.913-2.92l4.082,4.082c-0.58,0.969-1.271,1.891-2.105,2.728C24.623,26.292,23.701,26.983,22.732,27.563z',
+            offsetX: 10,
+          },
+        },
+      },
+    })
 
-//     graph.addEdge({
-//       source: { x: 400, y: 20 },
-//       target: { x: 740, y: 20 },
-//       vertices: [
-//         { x: 400, y: 60 },
-//         { x: 550, y: 60 },
-//         { x: 550, y: 20 },
-//       ],
-//       attrs: {
-//         line: {
-//           stroke: '#3c4260',
-//           strokeWidth: 2,
-//           sourceMarker: {
-//             fill: '#4b4a67',
-//             stroke: '#4b4a67',
-//             d: Marker.normalize(
-//               'M5.5,15.499,15.8,21.447,15.8,15.846,25.5,21.447,25.5,9.552,15.8,15.152,15.8,9.552z',
-//             ),
-//           },
-//           targetMarker: {
-//             fill: '#4b4a67',
-//             stroke: '#4b4a67',
-//             d: Marker.normalize(
-//               'M5.5,15.499,15.8,21.447,15.8,15.846,25.5,21.447,25.5,9.552,15.8,15.152,15.8,9.552z',
-//             ),
-//           },
-//           vertexMarker: {
-//             tagName: 'circle',
-//             r: 4,
-//             strokeWidth: 2,
-//             fill: 'white',
-//           },
-//         },
-//       },
-//     })
+    graph.addEdge({
+      source: { x: 400, y: 20 },
+      target: { x: 740, y: 20 },
+      vertices: [
+        { x: 400, y: 60 },
+        { x: 550, y: 60 },
+        { x: 550, y: 20 },
+      ],
+      attrs: {
+        line: {
+          stroke: '#3c4260',
+          strokeWidth: 2,
+          sourceMarker: {
+            fill: '#4b4a67',
+            stroke: '#4b4a67',
+            d: Marker.normalize(
+              'M5.5,15.499,15.8,21.447,15.8,15.846,25.5,21.447,25.5,9.552,15.8,15.152,15.8,9.552z',
+            ),
+          },
+          targetMarker: {
+            fill: '#4b4a67',
+            stroke: '#4b4a67',
+            d: Marker.normalize(
+              'M5.5,15.499,15.8,21.447,15.8,15.846,25.5,21.447,25.5,9.552,15.8,15.152,15.8,9.552z',
+            ),
+          },
+          vertexMarker: {
+            tagName: 'circle',
+            r: 4,
+            strokeWidth: 2,
+            fill: 'white',
+          },
+        },
+      },
+    })
 
-//     graph.addEdge({
-//       source: { x: 440, y: 100 },
-//       target: { x: 740, y: 100 },
-//       vertices: [
-//         { x: 400, y: 140 },
-//         { x: 550, y: 100 },
-//         { x: 600, y: 140 },
-//       ],
-//       smooth: true,
-//       attrs: {
-//         line: {
-//           stroke: '#7c68fc',
-//           strokeWidth: 3,
-//           sourceMarker: {
-//             stroke: '#7c68fc',
-//             fill: '#7c68fc',
-//             d: Marker.normalize(
-//               'M24.316,5.318,9.833,13.682,9.833,5.5,5.5,5.5,5.5,25.5,9.833,25.5,9.833,17.318,24.316,25.682z',
-//             ),
-//           },
-//           targetMarker: {
-//             stroke: '#feb663',
-//             fill: '#feb663',
-//             d: Marker.normalize(
-//               'M14.615,4.928c0.487-0.986,1.284-0.986,1.771,0l2.249,4.554c0.486,0.986,1.775,1.923,2.864,2.081l5.024,0.73c1.089,0.158,1.335,0.916,0.547,1.684l-3.636,3.544c-0.788,0.769-1.28,2.283-1.095,3.368l0.859,5.004c0.186,1.085-0.459,1.553-1.433,1.041l-4.495-2.363c-0.974-0.512-2.567-0.512-3.541,0l-4.495,2.363c-0.974,0.512-1.618,0.044-1.432-1.041l0.858-5.004c0.186-1.085-0.307-2.6-1.094-3.368L3.93,13.977c-0.788-0.768-0.542-1.525,0.547-1.684l5.026-0.73c1.088-0.158,2.377-1.095,2.864-2.081L14.615,4.928z',
-//             ),
-//           },
-//         },
-//       },
-//     })
+    graph.addEdge({
+      source: { x: 440, y: 100 },
+      target: { x: 740, y: 100 },
+      vertices: [
+        { x: 400, y: 140 },
+        { x: 550, y: 100 },
+        { x: 600, y: 140 },
+      ],
+      smooth: true,
+      attrs: {
+        line: {
+          stroke: '#7c68fc',
+          strokeWidth: 3,
+          sourceMarker: {
+            stroke: '#7c68fc',
+            fill: '#7c68fc',
+            d: Marker.normalize(
+              'M24.316,5.318,9.833,13.682,9.833,5.5,5.5,5.5,5.5,25.5,9.833,25.5,9.833,17.318,24.316,25.682z',
+            ),
+          },
+          targetMarker: {
+            stroke: '#feb663',
+            fill: '#feb663',
+            d: Marker.normalize(
+              'M14.615,4.928c0.487-0.986,1.284-0.986,1.771,0l2.249,4.554c0.486,0.986,1.775,1.923,2.864,2.081l5.024,0.73c1.089,0.158,1.335,0.916,0.547,1.684l-3.636,3.544c-0.788,0.769-1.28,2.283-1.095,3.368l0.859,5.004c0.186,1.085-0.459,1.553-1.433,1.041l-4.495-2.363c-0.974-0.512-2.567-0.512-3.541,0l-4.495,2.363c-0.974,0.512-1.618,0.044-1.432-1.041l0.858-5.004c0.186-1.085-0.307-2.6-1.094-3.368L3.93,13.977c-0.788-0.768-0.542-1.525,0.547-1.684l5.026-0.73c1.088-0.158,2.377-1.095,2.864-2.081L14.615,4.928z',
+            ),
+          },
+        },
+      },
+    })
 
-//     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 },
+      connector: { name: 'smooth' },
+      attrs: {
+        line: {
+          targetMarker: {
+            d: 'M 0 -5 L -10 0 L 0 5 Z',
+          },
+        },
+      },
+      labels: [
+        {
+          markup: [
+            {
+              tagName: 'rect',
+              selector: 'labelBody',
+            },
+            {
+              tagName: 'text',
+              selector: 'labelText',
+            },
+          ],
+          attrs: {
+            labelText: {
+              text: 'First',
+              fill: '#7c68fc',
+              fontFamily: 'sans-serif',
+              textAnchor: 'middle',
+              textVerticalAnchor: 'middle',
+            },
+            labelBody: {
+              ref: 'labelText',
+              refX: -5,
+              refY: -5,
+              refWidth: '100%',
+              refHeight: '100%',
+              refWidth2: 10,
+              refHeight2: 10,
+              stroke: '#7c68fc',
+              fill: 'white',
+              strokeWidth: 2,
+              rx: 5,
+              ry: 5,
+            },
+          },
+          position: {
+            distance: 0.3,
+            options: {
+              keepGradient: true,
+              ensureLegibility: true,
+            },
+          },
+        },
+        {
+          markup: [
+            {
+              tagName: 'ellipse',
+              selector: 'labelBody',
+            },
+            {
+              tagName: 'text',
+              selector: 'labelText',
+            },
+          ],
+          attrs: {
+            labelText: {
+              text: 'Second',
+              fill: '#31d0c6',
+              fontFamily: 'sans-serif',
+              textAnchor: 'middle',
+              textVerticalAnchor: 'middle',
+            },
+            labelBody: {
+              ref: 'labelText',
+              refRx: '70%',
+              refRy: '80%',
+              stroke: '#31d0c6',
+              fill: 'white',
+              strokeWidth: 2,
+            },
+          },
+          position: {
+            distance: 0.7,
+            angle: 45,
+          },
+        },
+      ],
+    })
 
-//     graph.addEdge({
-//       source: { x: 400, y: 200 },
-//       target: { x: 740, y: 200 },
-//       connector: { name: 'smooth' },
-//       attrs: {
-//         line: {
-//           targetMarker: {
-//             d: 'M 0 -5 L -10 0 L 0 5 Z',
-//           },
-//         },
-//       },
-//       labels: [
-//         {
-//           markup: [
-//             {
-//               tagName: 'rect',
-//               selector: 'labelBody',
-//             },
-//             {
-//               tagName: 'text',
-//               selector: 'labelText',
-//             },
-//           ],
-//           attrs: {
-//             labelText: {
-//               text: 'First',
-//               fill: '#7c68fc',
-//               fontFamily: 'sans-serif',
-//               textAnchor: 'middle',
-//               textVerticalAnchor: 'middle',
-//             },
-//             labelBody: {
-//               ref: 'labelText',
-//               refX: -5,
-//               refY: -5,
-//               refWidth: '100%',
-//               refHeight: '100%',
-//               refWidth2: 10,
-//               refHeight2: 10,
-//               stroke: '#7c68fc',
-//               fill: 'white',
-//               strokeWidth: 2,
-//               rx: 5,
-//               ry: 5,
-//             },
-//           },
-//           position: {
-//             distance: 0.3,
-//             options: {
-//               keepGradient: true,
-//               ensureLegibility: true,
-//             },
-//           },
-//         },
-//         {
-//           markup: [
-//             {
-//               tagName: 'ellipse',
-//               selector: 'labelBody',
-//             },
-//             {
-//               tagName: 'text',
-//               selector: 'labelText',
-//             },
-//           ],
-//           attrs: {
-//             labelText: {
-//               text: 'Second',
-//               fill: '#31d0c6',
-//               fontFamily: 'sans-serif',
-//               textAnchor: 'middle',
-//               textVerticalAnchor: 'middle',
-//             },
-//             labelBody: {
-//               ref: 'labelText',
-//               refRx: '70%',
-//               refRy: '80%',
-//               stroke: '#31d0c6',
-//               fill: 'white',
-//               strokeWidth: 2,
-//             },
-//           },
-//           position: {
-//             distance: 0.7,
-//             angle: 45,
-//           },
-//         },
-//       ],
-//     })
+    // Custom Edge
+    // -----------
 
-//     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',
-//         },
-//       },
-//     })
+    const node1 = graph.addNode({
+      shape: 'path',
+      x: 500,
+      y: 450,
+      width: 100,
+      height: 100,
+      attrs: {
+        body: {
+          fill: '#31d0c6',
+          refD: 'M 0 20 10 20 10 30 30 30 30 0 40 0 40 40 0 40 z',
+        },
+      },
+    })
 
-//     // Custom Edge
-//     // -----------
+    graph.addEdge({
+      source: { x: 300, y: 400 },
+      target: node1,
+      attrs: {
+        line: {
+          sourceMarker: {
+            d: 'M 0 0 15 0',
+            stroke: 'white',
+            strokeWidth: 3,
+          },
+        },
+      },
+    })
+  }
 
-//     const node1 = graph.addNode({
-//       shape: 'path',
-//       x: 500,
-//       y: 450,
-//       width: 100,
-//       height: 100,
-//       attrs: {
-//         body: {
-//           fill: '#31d0c6',
-//           refD: 'M 0 20 10 20 10 30 30 30 30 0 40 0 40 40 0 40 z',
-//         },
-//       },
-//     })
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
 
-//     graph.addEdge({
-//       source: { x: 300, y: 400 },
-//       target: node1,
-//       attrs: {
-//         line: {
-//           sourceMarker: {
-//             d: 'M 0 0 15 0',
-//             stroke: 'white',
-//             strokeWidth: 3,
-//           },
-//         },
-//       },
-//     })
-//   }
-
-//   refContainer = (container: HTMLDivElement) => {
-//     this.container = container
-//   }
-
-//   render() {
-//     return (
-//       <div className="x6-graph-wrap">
-//         <div ref={this.refContainer} className="x6-graph" />
-//       </div>
-//     )
-//   }
-// }
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

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

@@ -1,75 +1,75 @@
-// import React from 'react'
-// import { Graph, Point } from '@antv/x6'
-// import { Router } from '@antv/x6/es/registry/router'
-// import '../index.less'
+import React from 'react'
+import { Graph, Point } from '@antv/x6'
+import { Router } from '@antv/x6/es/registry/router'
+import '../index.less'
 
-// Router.registry.register(
-//   'random',
-//   (vertices, args, view) => {
-//     const BOUNCES = args.bounces || 20
-//     const points = vertices.map((p) => Point.create(p))
+Router.registry.register(
+  'random',
+  (vertices, args, view) => {
+    const BOUNCES = args.bounces || 20
+    const points = vertices.map((p) => Point.create(p))
 
-//     for (var i = 0; i < BOUNCES; i++) {
-//       const sourceCorner = view.sourceBBox.getCenter()
-//       const targetCorner = view.targetBBox.getCenter()
-//       const randomPoint = Point.random(
-//         sourceCorner.x,
-//         targetCorner.x,
-//         sourceCorner.y,
-//         targetCorner.y,
-//       )
-//       points.push(randomPoint)
-//     }
+    for (var i = 0; i < BOUNCES; i++) {
+      const sourceCorner = view.sourceBBox.getCenter()
+      const targetCorner = view.targetBBox.getCenter()
+      const randomPoint = Point.random(
+        sourceCorner.x,
+        targetCorner.x,
+        sourceCorner.y,
+        targetCorner.y,
+      )
+      points.push(randomPoint)
+    }
 
-//     return points
-//   },
-//   true,
-// )
+    return points
+  },
+  true,
+)
 
-// export default class Example extends React.Component {
-//   private container: HTMLDivElement
+export default class Example extends React.Component {
+  private container: HTMLDivElement
 
-//   componentDidMount() {
-//     const graph = new Graph({
-//       container: this.container,
-//       width: 1000,
-//       height: 600,
-//       grid: 10,
-//     })
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 1000,
+      height: 600,
+      grid: 10,
+    })
 
-//     const source = graph.addNode({
-//       x: 50,
-//       y: 50,
-//       width: 120,
-//       height: 80,
-//       attrs: { label: { text: 'Source' } },
-//     })
+    const source = graph.addNode({
+      x: 50,
+      y: 50,
+      width: 120,
+      height: 80,
+      attrs: { label: { text: 'Source' } },
+    })
 
-//     const target = graph.addNode(
-//       source.clone().translate(600, 400).attr('label/text', 'Target'),
-//     )
+    const target = graph.addNode(
+      source.clone().translate(600, 400).attr('label/text', 'Target'),
+    )
 
-//     graph.addEdge({
-//       source,
-//       target,
-//       router: {
-//         name: 'random',
-//         args: {
-//           bounces: 10,
-//         },
-//       },
-//     })
-//   }
+    graph.addEdge({
+      source,
+      target,
+      router: {
+        name: 'random',
+        args: {
+          bounces: 10,
+        },
+      },
+    })
+  }
 
-//   refContainer = (container: HTMLDivElement) => {
-//     this.container = container
-//   }
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
 
-//   render() {
-//     return (
-//       <div className="x6-graph-wrap">
-//         <div ref={this.refContainer} className="x6-graph" />
-//       </div>
-//     )
-//   }
-// }
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/x6-example-features/src/pages/edge/data-mapping/index.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { Graph } from '@antv/x6'
-import '../../index.less'
-
-export default class Example extends React.Component {
-  private container: HTMLDivElement
-
-  componentDidMount() {
-    const graph = new Graph({
-      container: this.container,
-      width: 800,
-      height: 1400,
-    })
-
-    console.log(graph)
-  }
-
-  refContainer = (container: HTMLDivElement) => {
-    this.container = container
-  }
-
-  render() {
-    return (
-      <div className="x6-graph-wrap">
-        <div ref={this.refContainer} className="x6-graph" />
-      </div>
-    )
-  }
-}

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

@@ -1,92 +0,0 @@
-import React from 'react'
-import { Edge, Graph } from '@antv/x6'
-
-export default class Example extends React.Component {
-  private container: HTMLDivElement
-
-  componentDidMount() {
-    const graph = new Graph({
-      container: this.container,
-      width: 800,
-      height: 600,
-      grid: true,
-      connecting: {
-        allowBlank: true,
-        createEdge() {
-          return new Edge()
-        },
-      },
-    })
-
-    graph.addNode({
-      shape: 'rect',
-      x: 80,
-      y: 80,
-      width: 160,
-      height: 60,
-      label: 'source',
-      ports: [
-        {
-          id: 'a',
-        },
-      ],
-      attrs: {
-        body: {
-          magnet: true,
-        },
-      },
-    })
-
-    graph.addNode({
-      shape: 'rect',
-      x: 320,
-      y: 320,
-      width: 160,
-      height: 60,
-      ports: [
-        {
-          id: 'b',
-        },
-      ],
-      attrs: {
-        body: {
-          magnet: true,
-        },
-      },
-    })
-
-    graph.addNode({
-      shape: 'rect',
-      x: 520,
-      y: 60,
-      width: 160,
-      height: 60,
-      ports: [
-        {
-          id: 'c',
-        },
-      ],
-      attrs: {
-        body: {
-          magnet: true,
-        },
-      },
-    })
-
-    graph.on('edge:connected', (args) => {
-      console.log(args)
-    })
-  }
-
-  refContainer = (container: HTMLDivElement) => {
-    this.container = container
-  }
-
-  render() {
-    return (
-      <div className="x6-graph-wrap">
-        <div ref={this.refContainer} className="x6-graph" />
-      </div>
-    )
-  }
-}

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

@@ -1,73 +1,7 @@
 import React from 'react'
-import { Graph, Edge, CellView, EdgeView, Vector } from '@antv/x6'
+import { Graph } from '@antv/x6'
 import '../index.less'
 
-class CustomEdgeView extends EdgeView {
-  onDblClick(e: JQuery.DoubleClickEvent, x: number, y: number) {
-    if (this.cell.getProp('customLinkInteractions')) {
-      this.addVertex(x, y)
-    }
-  }
-
-  onContextMenu(e: JQuery.ContextMenuEvent, x: number, y: number) {
-    if (this.cell.getProp('customLinkInteractions')) {
-      this.addLabel(x, y, {
-        reverseDistance: true,
-        absoluteDistance: true,
-      })
-    }
-  }
-}
-
-CustomEdgeView.config<EdgeView.Options>({ doubleTools: true })
-EdgeView.registry.register('customEdgeView', CustomEdgeView, true)
-
-const CustomEdge = Edge.define({
-  name: 'custom-edge',
-  defaultLabel: {
-    markup: [
-      {
-        tagName: 'circle',
-        selector: 'body',
-      },
-      {
-        tagName: 'text',
-        selector: 'label',
-      },
-    ],
-    attrs: {
-      label: {
-        text: '%', // default label text
-        fill: '#ff0000', // default text color
-        fontSize: 14,
-        textAnchor: 'middle',
-        yAlign: 'middle',
-        pointerEvents: 'none',
-      },
-      body: {
-        ref: 'label',
-        fill: '#ffffff',
-        stroke: '#000000',
-        strokeWidth: 1,
-        refRCircumscribed: '60%',
-        refCx: 0,
-        refCy: 0,
-      },
-    },
-    position: {
-      distance: 0.5, // place label at midpoint by default
-      offset: {
-        y: -20, // offset label by 20px upwards by default
-      },
-      options: {
-        absoluteOffset: true, // keep offset absolute when moving by default
-      },
-    },
-  },
-})
-
-Edge.registry.register('customEdge', CustomEdge, true)
-
 export default class Example extends React.Component {
   private container: HTMLDivElement
 
@@ -77,27 +11,19 @@ export default class Example extends React.Component {
       width: 800,
       height: 1400,
       grid: 10,
-      interacting: function (cellView: CellView) {
-        if (cellView.cell.getProp('customLinkInteractions')) {
-          return { vertexAdd: false }
-        }
-
-        // all interactions enabled
-        return true
-      },
     })
 
-    const marker = 'M 10 0 L 0 5 L 10 10 z'
-
     // Default connection of two elements.
     // -----------------------------------
 
     const r1 = graph.addNode({
-      shape: 'basic.rect',
-      size: { width: 70, height: 30 },
-      position: { x: 335, y: 50 },
+      shape: 'rect',
+      width: 70,
+      height: 30,
+      x: 200,
+      y: 50,
       attrs: {
-        rect: { fill: '#1890ff', stroke: '#1890ff' },
+        body: { fill: '#1890ff', stroke: '#1890ff' },
         text: { text: 'box', fill: '#fff', magnet: true },
       },
     })
@@ -109,11 +35,11 @@ export default class Example extends React.Component {
     graph.addEdge({
       source: r1,
       target: r2,
+      label: 'default',
     })
 
-    // Custom link interactions.
-    // -------------------------
-
+    // Changing source and target selectors of the edge.
+    // -------------------------------------------------
     var r3 = r1.clone()
     graph.addNode(r3)
     r3.translate(0, 80)
@@ -123,20 +49,13 @@ export default class Example extends React.Component {
     r4.translate(300)
 
     graph.addEdge({
-      shape: 'customEdge',
-      view: 'customEdgeView',
-      customLinkInteractions: true,
-      source: r3,
-      target: r4,
-      attrs: {
-        '.source-marker': { d: marker },
-        '.target-marker': { d: marker },
-      },
+      source: { cell: r3.id },
+      target: { cell: r4.id, selector: 'text' },
+      label: 'link to selector',
     })
 
-    // Custom .source-marker and .target-marker.
-    // -----------------------------------------
-
+    // Vertices.
+    // ---------
     var r5 = r3.clone()
     graph.addNode(r5)
     r5.translate(0, 80)
@@ -148,337 +67,53 @@ export default class Example extends React.Component {
     graph.addEdge({
       source: r5,
       target: r6,
-      attrs: {
-        '.source-marker': { d: marker },
-        '.target-marker': { d: marker },
-      },
+      vertices: [
+        { x: 235, y: 280 },
+        { x: 535, y: 280 },
+      ],
+      label: 'vertices',
     })
 
-    // Changing source and target selectors of the edge.
-    // -------------------------------------------------
+    // // Manhattan routing.
+    // // ------------------
     var r7 = r5.clone()
     graph.addNode(r7)
-    r7.translate(0, 80)
+    r7.translate(0, 100)
 
     var r8 = r7.clone()
     graph.addNode(r8)
-    r8.translate(300)
+    r8.translate(200, 80)
 
     graph.addEdge({
-      source: { cell: r7.id },
-      target: { cell: r8.id, selector: 'text' },
-      attrs: {
-        '.source-marker': { d: marker },
-        '.target-marker': { d: marker },
-      },
+      source: r7,
+      target: r8,
+      vertices: [{ x: 620, y: 325 }],
+      router: { name: 'metro' },
+      label: 'metro router',
+    })
+    graph.addEdge({
+      source: r7,
+      target: r8,
+      vertices: [{ x: 350, y: 405 }],
+      router: { name: 'manhattan' },
+      connector: { name: 'rounded' },
+      label: 'manhattan router',
     })
 
-    // Vertices.
-    // ---------
+    // // OneSide routing.
+    // // ----------------
     var r9 = r7.clone()
     graph.addNode(r9)
-    r9.translate(0, 80)
+    r9.translate(0, 150)
 
     var r10 = r9.clone()
     graph.addNode(r10)
-    r10.translate(300)
-
+    r10.translate(300, 0)
     graph.addEdge({
       source: r9,
       target: r10,
-      vertices: [
-        { x: 370, y: 470 },
-        { x: 670, y: 470 },
-      ],
-      attrs: {
-        '.source-marker': { d: marker },
-        '.target-marker': { d: marker },
-      },
-    })
-
-    // Custom vertex/connection markups. (ADVANCED)
-    // --------------------------------------------
-
-    var r11 = r9.clone()
-    graph.addNode(r11)
-    r11.translate(0, 120)
-
-    var r12 = r11.clone()
-    graph.addNode(r12)
-    r12.translate(300)
-
-    graph.addEdge({
-      source: r11,
-      target: r12,
-      vertices: [
-        { x: 370, y: 600 },
-        { x: 520, y: 640 },
-        { x: 670, y: 600 },
-      ],
-      vertexMarkup: [
-        '<g class="vertex-group" transform="translate(<%= x %>, <%= y %>)">',
-        '<image class="vertex" data-index="<%= index %>" xlink:href="https://cdn1.iconfinder.com/data/icons/ecommerce-61/48/eccomerce_-_location-32.png" width="25" height="25" transform="translate(-12.5, -12.5)"/>',
-        '<rect class="vertex-remove-area" data-index="<%= index %>" fill="red" width="19.5" height="19" transform="translate(11, -26)" rx="3" ry="3" />',
-        '<path class="vertex-remove" data-index="<%= index %>" transform="scale(.8) translate(9.5, -37)" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z">',
-        '<title>Remove vertex.</title>',
-        '</path>',
-        '</g>',
-      ].join(''),
-      markup: [
-        '<path class="connection"/>',
-        '<image class="source-marker" xlink:href="http://cdn3.iconfinder.com/data/icons/49handdrawing/24x24/left.png" width="25" height="25"/>',
-        '<image class="target-marker" xlink:href="http://cdn3.iconfinder.com/data/icons/49handdrawing/24x24/left.png" width="25" height="25"/>',
-        '<path class="connection-wrap"/>',
-        '<g class="vertices"/>',
-      ].join(''),
-      attrs: {
-        '.connection': {
-          strokeWidth: 4,
-          strokeDasharray: [5, 5, 5].join(','),
-          stroke: 'gray',
-        },
-      },
-    })
-
-    // Labels.
-    // -------
-    var r13 = r11.clone()
-    graph.addNode(r13)
-    r13.translate(0, 230)
-
-    var r14 = r13.clone()
-    graph.addNode(r14)
-    r14.translate(300)
-
-    const edge7 = new CustomEdge({
-      source: r13,
-      target: r14,
-      attrs: {
-        '.source-marker': { d: marker },
-        '.target-marker': { d: marker },
-      },
-      labels: [
-        {
-          attrs: {
-            label: {
-              text: '1..n',
-            },
-          },
-          position: {
-            distance: 29, // individual absolute positioning
-            offset: null, // remove default offset
-            options: {
-              absoluteOffset: null, // disable absolute offset when moving
-            },
-          },
-        },
-        {
-          markup: [
-            // individual markup
-            {
-              tagName: 'rect',
-              selector: 'body',
-            },
-            {
-              tagName: 'text',
-              selector: 'label',
-            },
-          ],
-          attrs: {
-            label: {
-              text: 'X6',
-              fill: 'white',
-              fontFamily: 'sans-serif',
-              textAnchor: 'left',
-            },
-            body: {
-              stroke: 'red',
-              strokeWidth: 2,
-              fill: '#F39C12',
-              rx: 5,
-              ry: 5,
-              refWidth: '140%',
-              refHeight: '140%',
-              refX: '-20%',
-              refY: '-20%',
-              refRCircumscribed: null,
-              refCx: null,
-              refCy: null,
-            },
-          },
-          position: {
-            distance: 0.5,
-            offset: {
-              // individual absolute offset
-              x: 10,
-              y: 25,
-            },
-            // keep default args
-          },
-        },
-        {
-          markup: [
-            {
-              tagName: 'circle',
-              selector: 'body',
-            },
-            {
-              tagName: 'path',
-              selector: 'symbol',
-            },
-          ],
-          attrs: {
-            body: {
-              ref: null,
-              fill: 'lightgray',
-              stroke: 'black',
-              strokeWidth: 2,
-              r: 15,
-              refRCircumscribed: null,
-              refCx: null,
-              refCy: null,
-            },
-            symbol: {
-              // add attrs for individually added `path`
-              d: 'M 0 -15 0 -35 20 -35',
-              stroke: 'black',
-              strokeWidth: 2,
-              fill: 'none',
-            },
-          },
-          position: 0.5, // erase default position object, use relative distance
-        },
-        {
-          position: {
-            distance: 0.89, // individual relative distance
-            // keep default offset
-            // keep default args
-          },
-        },
-      ],
-    })
-
-    graph.addEdge(edge7)
-
-    // Custom tools.
-    // -------------
-    var r15 = r13.clone()
-    graph.addNode(r15)
-    r15.translate(0, 100)
-
-    var r16 = r15.clone()
-    graph.addNode(r16)
-    r16.translate(300)
-
-    graph.addEdge({
-      source: r15,
-      target: r16,
-      attrs: {
-        '.source-marker': { d: marker },
-        '.target-marker': { d: marker },
-      },
-      toolMarkup: [
-        '<g class="edge-tool">',
-        '<g class="tool-remove" event="edge:remove">',
-        '<circle r="11" />',
-        '<path transform="scale(.8) translate(-16, -16)" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z"/>',
-        '<title>Remove link.</title>',
-        '</g>',
-        '<g event="edge:options">',
-        '<circle r="11" transform="translate(25)"/>',
-        '<path fill="white" transform="scale(.55) translate(29, -16)" d="M31.229,17.736c0.064-0.571,0.104-1.148,0.104-1.736s-0.04-1.166-0.104-1.737l-4.377-1.557c-0.218-0.716-0.504-1.401-0.851-2.05l1.993-4.192c-0.725-0.91-1.549-1.734-2.458-2.459l-4.193,1.994c-0.647-0.347-1.334-0.632-2.049-0.849l-1.558-4.378C17.165,0.708,16.588,0.667,16,0.667s-1.166,0.041-1.737,0.105L12.707,5.15c-0.716,0.217-1.401,0.502-2.05,0.849L6.464,4.005C5.554,4.73,4.73,5.554,4.005,6.464l1.994,4.192c-0.347,0.648-0.632,1.334-0.849,2.05l-4.378,1.557C0.708,14.834,0.667,15.412,0.667,16s0.041,1.165,0.105,1.736l4.378,1.558c0.217,0.715,0.502,1.401,0.849,2.049l-1.994,4.193c0.725,0.909,1.549,1.733,2.459,2.458l4.192-1.993c0.648,0.347,1.334,0.633,2.05,0.851l1.557,4.377c0.571,0.064,1.148,0.104,1.737,0.104c0.588,0,1.165-0.04,1.736-0.104l1.558-4.377c0.715-0.218,1.399-0.504,2.049-0.851l4.193,1.993c0.909-0.725,1.733-1.549,2.458-2.458l-1.993-4.193c0.347-0.647,0.633-1.334,0.851-2.049L31.229,17.736zM16,20.871c-2.69,0-4.872-2.182-4.872-4.871c0-2.69,2.182-4.872,4.872-4.872c2.689,0,4.871,2.182,4.871,4.872C20.871,18.689,18.689,20.871,16,20.871z"/>',
-        '<title>Link options.</title>',
-        '</g>',
-        '</g>',
-      ].join(''),
-    })
-
-    // Manhattan routing.
-    // ------------------
-    var r17 = r15.clone()
-    graph.addNode(r17)
-    r17.translate(0, 100)
-
-    var r18 = r17.clone()
-    graph.addNode(r18)
-    r18.translate(200, 80)
-
-    graph.addEdge({
-      source: r17,
-      target: r18,
-      vertices: [{ x: 700, y: 990 }],
-      router: { name: 'metro' },
-    })
-    graph.addEdge({
-      source: r17,
-      target: r18,
-      vertices: [{ x: 450, y: 1015 }],
-      router: { name: 'manhattan' },
-      connector: { name: 'rounded' },
-    })
-
-    // Markers.
-    // ------------------
-    var r19 = r17.clone()
-    graph.addNode(r19)
-    r19.translate(0, 200)
-
-    var r20 = r19.clone()
-    graph.addNode(r20)
-    r20.translate(200, 0)
-
-    var circleMarker = Vector.create(
-      '<marker id="circle-marker" markerUnits="userSpaceOnUse" viewBox = "0 0 12 12" refX = "6" refY = "6" markerWidth = "15" markerHeight = "15" stroke = "none" stroke-width = "0" fill = "red" orient = "auto"> <circle r = "5" cx="6" cy="6" fill="blue"/> </marker>',
-    )
-    var diamondMarker = Vector.create(
-      '<marker id="diamond-marker" viewBox = "0 0 5 20" refX = "0" refY = "6" markerWidth = "30" markerHeight = "30" stroke = "none" stroke-width = "0" fill = "red" > <rect x="0" y="0" width = "10" height="10" transform="rotate(45)"  /> </marker>',
-    )
-
-    const defs = graph.view.svg.querySelector('defs')!
-    defs.appendChild(circleMarker.node)
-    defs.appendChild(diamondMarker.node)
-
-    graph.addEdge({
-      source: r19,
-      target: r20,
-      vertices: [
-        { x: 400, y: 1080 },
-        { x: 600, y: 1080 },
-      ],
-      attrs: {
-        '.connection': {
-          'marker-mid': 'url(#circle-marker)',
-        },
-      },
-    })
-
-    graph.addEdge({
-      source: r19,
-      target: r20,
-      vertices: [
-        { x: 400, y: 1190 },
-        { x: 600, y: 1190 },
-      ],
-      attrs: {
-        '.connection': {
-          'marker-mid': 'url(#diamond-marker)',
-        },
-      },
-    })
-
-    // OneSide routing.
-    // ----------------
-    var r21 = r19.clone()
-    graph.addNode(r21)
-    r21.translate(0, 150)
-
-    var r22 = r21.clone()
-    graph.addNode(r22)
-    r22.translate(200, 0)
-    graph.addEdge({
-      source: r21,
-      target: r22,
       router: { name: 'oneSide', args: { side: 'bottom' } },
+      label: 'oneSide rounter',
     })
   }