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

bump to 2.0

BREAKING CHANGE: bump to 2.0

.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/backup/create-release-branch.yml

@@ -0,0 +1,27 @@
+name: 🚀　Create Release Branch
+on:
+  push:
+    branches:
+      - master
+jobs:
+  crb:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: |
+          echo "${{ github.sha }}" > .releasing
+      - uses: wow-actions/use-app-token@v1
+        with:
+          app_id: ${{ secrets.APP_ID }}
+          private_key: ${{ secrets.PRIVATE_KEY }}
+          env_name: bot_token
+      - uses: peter-evans/create-pull-request@v4
+        with:
+          token: ${{ env.bot_token }}
+          branch: semantic-release
+          commit-message: "trigger semantic release..."
+          delete-branch: true
+          labels: semantic-release
+          title: "chore: semantic release [skip ci]"
+          body: |
+            Your **[semantic-release-monorepo](https://github.com/bubkoo/semantic-release-monorepo)** bot base on **[semantic-release](https://github.com/semantic-release/semantic-release)** :package::rocket:`

.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
         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,7 +6,6 @@ jobs:
   cib:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}

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

@@ -1,12 +1,41 @@
 name: 🚫　Delete Stale Releases
+# on:
+#   repository_dispatch:
+#     types: [released]
+# jobs:
+#   clean:
+#     runs-on: ubuntu-latest
+#     steps:
+#       - 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-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:
-  repository_dispatch:
-    types: [released]
+  push:
+    branches:
+      - master
 jobs:
   clean:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}
@@ -16,11 +45,4 @@ jobs:
         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@**
+          keep_latest_count: -1

.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:

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

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

.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

.github/workflows/release.yml

@@ -12,32 +12,43 @@ 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
@@ -47,20 +58,26 @@ jobs:
           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 }}
+          NODE_AUTH_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
 
+      # - uses: actions/github-script@v6
+      #   with:
+      #     github-token: ${{ env.bot_token }}
+      #     script: |
+      #       const action = require('./scripts/finalize-release.js')
+      #       return await action({github, context, core})
+
       - 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 }}
           event-type: released

.github/workflows/sync-labels.yml

@@ -9,7 +9,6 @@ jobs:
   sync:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}

.github/workflows/update-authors.yml

@@ -3,13 +3,15 @@ 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
@@ -20,4 +22,5 @@ jobs:
       - uses: wow-actions/update-authors@v1
         with:
           GITHUB_TOKEN: ${{ env.bot_token  }}
+          path: CONTRIBUTORS
           bots: false

.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,6 +5,8 @@ on:
   push:
     branches:
       - master
+      - next
+      - next-major
       - alpha
       - beta
 jobs:

.github/workflows/update-license.yml

@@ -6,7 +6,7 @@ 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

.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/prepush

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

.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,47 @@
+{
+  "branches": [
+    "+([0-9])?(.{+([0-9]),x}).x",
+    "master",
+    "next",
+    "next-major",
+    { "name": "beta", "prerelease": true },
+    { "name": "alpha", "prerelease": true }
+  ],
+  "plugins": [
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "releaseRules": [
+          { "type": "build", "release": "patch" },
+          { "type": "ci", "release": "patch" },
+          { "type": "chore", "release": "patch" },
+          { "type": "docs", "release": "patch" },
+          { "type": "refactor", "release": "patch" },
+          { "type": "style", "release": "patch" },
+          { "type": "test", "release": "patch" }
+        ]
+      }
+    ],
+    "@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,19 @@ 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>
+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 +27,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 +53,36 @@ 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>
 九思⚡⚡⚡ <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>
 金强强 <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
 ```
 
 ## 参与共建

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

@@ -1,3 +1,272 @@
+# @antv/x6-example-features 1.0.0 (2022-11-05)
+
+
+### Bug Fixes
+
+* 🐛 'blank:click' was not triggered when rubberband is enabled ([5046487](https://github.com/antvis/X6/commit/50464871862a362df19bf2ef598892a41297ffe1)), closes [#222](https://github.com/antvis/X6/issues/222)
+* 🐛 add return value for autoScroller in scroller plugin ([5e102a3](https://github.com/antvis/X6/commit/5e102a39c5bd14a478edd4f36c4264997027c2a9))
+* 🐛 add timeout for schedule ([#2303](https://github.com/antvis/X6/issues/2303)) ([a6a2d12](https://github.com/antvis/X6/commit/a6a2d12b07add27ef19eebbf7b5ca7cd17dde09e))
+* 🐛 alerts on LGTM.com ([87d8140](https://github.com/antvis/X6/commit/87d81405d65e9947319a525616f276244202a543))
+* 🐛 auto rotate token ([fb5b6aa](https://github.com/antvis/X6/commit/fb5b6aa9e73552ca7ef1c025d9468244dca77891))
+* 🐛 break text with chinese characters(double byte character) ([14199bc](https://github.com/antvis/X6/commit/14199bc8529adddb347ef934926503a789b64980)), closes [#596](https://github.com/antvis/X6/issues/596)
+* 🐛 cell view in minimap ([8bc9978](https://github.com/antvis/X6/commit/8bc99787af1c80d4e8ede878ae02474e929b9582))
+* 🐛 change component -> render ([9239d81](https://github.com/antvis/X6/commit/9239d81a97e84cb8c82eebc5effaa98b869fc4df))
+* 🐛 change jobqueue to transient ([0e39d94](https://github.com/antvis/X6/commit/0e39d9447bc8c0ba0b11c272bf9b64df9ba95a33))
+* 🐛 change rerender -> shouldComponentUpdate ([575329b](https://github.com/antvis/X6/commit/575329bce4c8df8e20d6673d9cfd27e9c0001343))
+* 🐛 dnd events ([3e94b0b](https://github.com/antvis/X6/commit/3e94b0b1eafab8f43cff2601b088df24d1b062a4)), closes [#271](https://github.com/antvis/X6/issues/271)
+* 🐛 dnd node style ([ff21a54](https://github.com/antvis/X6/commit/ff21a5459d21487649bd497148604bc0f7a38481))
+* 🐛 do not generate new commands on redoing/undoing ([5b3d713](https://github.com/antvis/X6/commit/5b3d7133f3a7b4841f461e67af5963ec84820741)), closes [#627](https://github.com/antvis/X6/issues/627)
+* 🐛 do not trigger getDropNode when drop at invalid area ([c6068ad](https://github.com/antvis/X6/commit/c6068ada6b967fa81be5c4b39c5e0d6b0402ce9c))
+* 🐛 do not update pagesize automatically when set graph size ([949a42d](https://github.com/antvis/X6/commit/949a42dacfc5023d25bcabc0a3a1a7d8578f1b96)), closes [#644](https://github.com/antvis/X6/issues/644) [#564](https://github.com/antvis/X6/issues/564)
+* 🐛 edge connection error ([b3a5d03](https://github.com/antvis/X6/commit/b3a5d032a3d75d4c094db90150c19c84b1ba787f)), closes [#245](https://github.com/antvis/X6/issues/245)
+* 🐛 filter not working when select cell by calling `select()` api or by click ([#314](https://github.com/antvis/X6/issues/314)) ([7a3e547](https://github.com/antvis/X6/commit/7a3e54731940f5dcc2a15b8d338aedf64fc63619)), closes [#305](https://github.com/antvis/X6/issues/305)
+* 🐛 findParent args ([ba39109](https://github.com/antvis/X6/commit/ba39109ee6ff3f570610d3ab6acb060711711153))
+* 🐛 fix add tools not work ([f5d1d6a](https://github.com/antvis/X6/commit/f5d1d6a326021247ee8967675fc9490ddbb6d0aa))
+* 🐛 fix model event trigger twice ([#789](https://github.com/antvis/X6/issues/789)) ([7638143](https://github.com/antvis/X6/commit/7638143b04c0a50a333200423753f6bd19a6ceb3))
+* 🐛 fix running error of x6-example-demo ([#1111](https://github.com/antvis/X6/issues/1111)) ([d5c854f](https://github.com/antvis/X6/commit/d5c854f644e4926dba2913a216870bdbaafd425a))
+* 🐛 fix sourceMarker and targetMaker position ([e1b927f](https://github.com/antvis/X6/commit/e1b927fa21dab980abfb273eb8fe8ae5a1cc224e))
+* 🐛 fix the error in selected nodes position when snapline enabled ([#2797](https://github.com/antvis/X6/issues/2797)) ([1e7f132](https://github.com/antvis/X6/commit/1e7f132bed15006cc5535f1294f0b8a545dd6441))
+* 🐛 fix the interaction of arrowhead ([1319429](https://github.com/antvis/X6/commit/1319429312d9476ae8449cd00845f91601269e67))
+* 🐛 fix type definition of node and edge registry ([eb5f0cd](https://github.com/antvis/X6/commit/eb5f0cdec2a7dab709d4baa319a26e403b22787e)), closes [#478](https://github.com/antvis/X6/issues/478)
+* 🐛 fix type error ([30ca7a9](https://github.com/antvis/X6/commit/30ca7a92817d28e58589413e36d3d2931360b8ae))
+* 🐛 fix x6-react-components version in demo ([709cdae](https://github.com/antvis/X6/commit/709cdae33d13acfd77af11e8bb5fb4f493dd5bd5))
+* 🐛 get completed picture when execue toPNG ([c48a5cf](https://github.com/antvis/X6/commit/c48a5cf15da4f51641890f880a509aab7476d6ab))
+* 🐛 html shape ([45c9109](https://github.com/antvis/X6/commit/45c9109c9125ce1791698d01710984e5fd71b4c3))
+* 🐛 interact with input rendered in react component ([82478b1](https://github.com/antvis/X6/commit/82478b1d66e3b8b4346dab9041cb00e54fea9be1))
+* 🐛 jump over ([eb812f5](https://github.com/antvis/X6/commit/eb812f5fcd375319a34d70cd58e5228ebf8f3458))
+* 🐛 linear gradient along edge path ([669fc5b](https://github.com/antvis/X6/commit/669fc5bd2d57635ce9d45dc0470674dad74f4add)), closes [#635](https://github.com/antvis/X6/issues/635)
+* 🐛 liner gradient not available on horizontal and vertical edges ([333689a](https://github.com/antvis/X6/commit/333689a880a30dbc0879705b7f655cec8d30f1df)), closes [#635](https://github.com/antvis/X6/issues/635)
+* 🐛 lost remove batch event when cell was removed ([2f9899c](https://github.com/antvis/X6/commit/2f9899cf98ee40e5c2c2ef6eafeb5fd8c26a545d))
+* 🐛 modifer key of panning and selecting ([8050aff](https://github.com/antvis/X6/commit/8050aff3d9980391acf558706ffc80e292e3b53c))
+* 🐛 modifier keys of panning and selecting ([3e749a8](https://github.com/antvis/X6/commit/3e749a84f933d6230128effe192ed3d5009f11d3))
+* 🐛 mouse event on start dnd ([242c44c](https://github.com/antvis/X6/commit/242c44cad4e6272a0d4c0c3dec0b847cef28ea72))
+* 🐛 node:xxx event was not triggered when interact with selection boxes ([34cd5a0](https://github.com/antvis/X6/commit/34cd5a0737b291357d398b8ef2f5c58b113a1fc3)), closes [#297](https://github.com/antvis/X6/issues/297)
+* 🐛 optimize cell remove method ([391fe8f](https://github.com/antvis/X6/commit/391fe8fd88f10d936c5860f465c7a423632f30f9))
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/X6/issues/1391)) ([cc01fdf](https://github.com/antvis/X6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 optimize params for edge:connected event ([f27c840](https://github.com/antvis/X6/commit/f27c840c425ff701e2ea2e46b84f142e5aae5940))
+* 🐛 registry ([effadf0](https://github.com/antvis/X6/commit/effadf00646e4eecca24676c7336eec1be11951e))
+* 🐛 registry ([f93b790](https://github.com/antvis/X6/commit/f93b790449bd7da83793d321a732c2cf2e5eded4))
+* 🐛 registry ([9cb1e9d](https://github.com/antvis/X6/commit/9cb1e9d14540ac65c4850e220771588400c0533f))
+* 🐛 registry ([5c942a3](https://github.com/antvis/X6/commit/5c942a32463c744bb78c6ca266a97013e5734a1b))
+* 🐛 remove default points attr of polygon and polyline ([ccab7a2](https://github.com/antvis/X6/commit/ccab7a2a1c30955239891149d1c1e9250160bbe5)), closes [#304](https://github.com/antvis/X6/issues/304) [#304](https://github.com/antvis/X6/issues/304)
+* 🐛 reset dragging status ([d274b5d](https://github.com/antvis/X6/commit/d274b5d8fd2352a2447a0006ee0d90b02b71688b))
+* 🐛 resize scroller and graph ([2a69150](https://github.com/antvis/X6/commit/2a691501ec89f60ce61e8bab4e22483ce7ebf44a))
+* 🐛 save iframe size ([061e871](https://github.com/antvis/X6/commit/061e8714eabdf325a1680d687a2af7360f9a0e3a))
+* 🐛 set the async of minimapGraph to be the same as sourceGraph ([9dded68](https://github.com/antvis/X6/commit/9dded6853d66b86e7bbeb738b2df15b51d1a8627))
+* 🐛 should auto normalize path data when parse path from string ([b438eea](https://github.com/antvis/X6/commit/b438eeabd574487f7082f9a15a1a0ed57f5ce124))
+* 🐛 should auto remove tools on cell was removed ([8194056](https://github.com/antvis/X6/commit/81940566cc3f561e27ab52d62ccfca40920b988b)), closes [#383](https://github.com/antvis/X6/issues/383)
+* 🐛 should auto remove tools when removing cells ([e8d2bf0](https://github.com/antvis/X6/commit/e8d2bf0f5ccf1a36043f550cec01b079e1df8f11))
+* 🐛 should auto update scroller when unfreeze ([be5f51c](https://github.com/antvis/X6/commit/be5f51cc03b873b46c08f132a3ade9f015a312c5))
+* 🐛 should remove selection box after cell was removed ([90e706f](https://github.com/antvis/X6/commit/90e706f9f4ad78035299e50460ab09aab2221a0f))
+* 🐛 should render vertices tool with lowest z-index ([213a01f](https://github.com/antvis/X6/commit/213a01fca28b1e790ce58d228aa460ea798bb98f)), closes [#638](https://github.com/antvis/X6/issues/638)
+* 🐛 should return `stop` method when calling `sendToken` ([45a3320](https://github.com/antvis/X6/commit/45a3320978ebe059e8f2016bd0e46e5ab6ed0745))
+* 🐛 should stop dragging when validate node async ([02e5c2f](https://github.com/antvis/X6/commit/02e5c2fbdf6bc0cd0fb1f3b2fe3acb662dbe3268)), closes [#429](https://github.com/antvis/X6/issues/429)
+* 🐛 should unselect previous selected cell when single selecting ([49c3ca7](https://github.com/antvis/X6/commit/49c3ca7aa1b462536eada7f78456a3c733b907fe))
+* 🐛 sort views after async graph rendered ([37ea8bb](https://github.com/antvis/X6/commit/37ea8bbfe049018d879d5a2b6d584ef60c0aca09))
+* 🐛 take the stroke-width into account when calc connection point ([9a8cb11](https://github.com/antvis/X6/commit/9a8cb11fb4c29ac04ac939403c3ace4fe574c06a))
+* 🐛 typos ([8b81d09](https://github.com/antvis/X6/commit/8b81d0945f3e12452d353046ac7eb8ac531128af))
+* 🐛 unselect cell by clicking cell and holding on the meta key ([289ca84](https://github.com/antvis/X6/commit/289ca84a685dfcc4ffec19c8c66e26d945fdfd39))
+* 🐛 update node's incomings and outgoings when edge was removed ([e6fa34c](https://github.com/antvis/X6/commit/e6fa34c872c2231ed8b2c20046f0d4ef346be010)), closes [#241](https://github.com/antvis/X6/issues/241)
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/X6/issues/1425)) ([4208846](https://github.com/antvis/X6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+* 🐛 use `graph.createNode` to create node ([405e2d6](https://github.com/antvis/X6/commit/405e2d6a6a6be3fc912f553fd395b995d815c032))
+* 🐛 used in unpkg "Uncaught ReferenceError: module is not defined" ([2863a29](https://github.com/antvis/X6/commit/2863a29da595a4a690e0b6c786669924dd8151aa)), closes [#329](https://github.com/antvis/X6/issues/329)
+* 🐛 version error ([5c80d69](https://github.com/antvis/X6/commit/5c80d69f66217e131176fce89b95d30bd47e3c4c))
+* 🐛 version error ([fd57688](https://github.com/antvis/X6/commit/fd5768861fedda32d341c774f6e80da67646426f))
+* 🐛 version not found ([8166346](https://github.com/antvis/X6/commit/8166346771f11ef5997a6e1ed376987408e57cde))
+* 🐛 x6 version ([f2e01c4](https://github.com/antvis/X6/commit/f2e01c44a1f1acd9390c9de0b5ade913cfd8b03b))
+* 🐛 x6-react-shape version ([9426a89](https://github.com/antvis/X6/commit/9426a898003f041c22da55439f6b9715731f69f6))
+* 🐛 x6-react-shape version ([482ce10](https://github.com/antvis/X6/commit/482ce10f1daeee1a154757c6009295d03363df56))
+* alert on lgtm.com ([31b713e](https://github.com/antvis/X6/commit/31b713eeaaeb05321c3d19b0df71892adfed11f6))
+* alerts on lgtm.com ([0dbf4b5](https://github.com/antvis/X6/commit/0dbf4b56075ae7956207969b227379598c4b3a29))
+* animation examples ([e439f5b](https://github.com/antvis/X6/commit/e439f5b2fa72fcca7a71f3495aa9df0b47a71aa4))
+* cell's id are diff on cell's prop and cell's data ([1d9f91d](https://github.com/antvis/X6/commit/1d9f91da54209a9c2a6ec45af602c0277bb0e0d1)), closes [#178](https://github.com/antvis/X6/issues/178)
+* circle deps ([f0b3314](https://github.com/antvis/X6/commit/f0b3314955a509bc7199f5eeb7e7270b6e22d4d3))
+* deal with alerts on lgtm.com ([cd6556e](https://github.com/antvis/X6/commit/cd6556ef8ad66eb9fa37b3819e9a1c929f613b1d))
+* demos ([7ae21d2](https://github.com/antvis/X6/commit/7ae21d24abd5ee17f26c9759383c76abe33cb1ab))
+* do not set tabindex attr when keyboard is disabled ([613d25f](https://github.com/antvis/X6/commit/613d25f8a05e21f8b8ffb9a14a18ef3845f618a4))
+* edge lost reference when update graph with the exported same json ([df5a605](https://github.com/antvis/X6/commit/df5a6053e9aa9fb4192f7a09a3c0ac54326239f0)), closes [#187](https://github.com/antvis/X6/issues/187)
+* ensure cell's type when defined it ([a2cf40f](https://github.com/antvis/X6/commit/a2cf40f939bab349a80482b43e30a6b3aec49752))
+* **events:** update event names ([0ad8013](https://github.com/antvis/X6/commit/0ad8013d04542a448e9f418ec57dfc8c6ae001c1))
+* export layout methods ([1ab393a](https://github.com/antvis/X6/commit/1ab393a4d878730e45979f6f3896635442f88c50))
+* fix contextmenu show multiple times ([5d437ce](https://github.com/antvis/X6/commit/5d437cef07427bf9f2cbae9b2e08dd4a6544ff70))
+* fix demo import path error ([2ebf581](https://github.com/antvis/X6/commit/2ebf581dc1ec9c5ee4501917a7cbddbbb4b69c0f))
+* fix examples ([3c4fe7b](https://github.com/antvis/X6/commit/3c4fe7b2a3cadb64e3b315f6651f771e4ac3c47c))
+* fix examples after graph refactor ([8212ff4](https://github.com/antvis/X6/commit/8212ff459cde670b04ad1abb7fd38676180a9eac)), closes [#12](https://github.com/antvis/X6/issues/12)
+* fix path error in custom router demo ([#620](https://github.com/antvis/X6/issues/620)) ([7cd3a7e](https://github.com/antvis/X6/commit/7cd3a7e57d772481ad33949ee832a36aab59ef3a))
+* fix size invalid on image node ([#397](https://github.com/antvis/X6/issues/397)) ([438e192](https://github.com/antvis/X6/commit/438e192585095e3e17e4fe5c1360d1deeb81e488))
+* fix warnings from lgtm.com ([580832e](https://github.com/antvis/X6/commit/580832eb9ca7f861fbeb1cc9fbeafda97d65b427))
+* fix x6-react-shape typo 'getPovider' ([83be5e1](https://github.com/antvis/X6/commit/83be5e10eecc687a7d389c17141ebd49d6fcc7f2))
+* graph examples ([23fb270](https://github.com/antvis/X6/commit/23fb27093f3870afaf500e960a53c1485ccca729))
+* handle alert on lgtm.com ([1764317](https://github.com/antvis/X6/commit/1764317e429223eb6747a557edeb910c5ee72bad))
+* highlighting ([9996342](https://github.com/antvis/X6/commit/99963423edec11cd63ddd2e25784301daea292f7))
+* live preview connection ([157e0a8](https://github.com/antvis/X6/commit/157e0a8b200a6502d46f2cb18c6bf1a620f4d752))
+* marker offset ([ed0fd14](https://github.com/antvis/X6/commit/ed0fd1437170d8688cbbffc3d9e5244efad1fa54)), closes [#184](https://github.com/antvis/X6/issues/184)
+* refactor example ([#2831](https://github.com/antvis/X6/issues/2831)) ([3d8f005](https://github.com/antvis/X6/commit/3d8f005696021f1d9f91a96812ebadce179f2d73))
+* registry context ([b44d699](https://github.com/antvis/X6/commit/b44d6994f6ad644185f70e5c691f909eea0ace72))
+* remove background image demo ([5db9db0](https://github.com/antvis/X6/commit/5db9db060d993b8be442ced7083f418c503957be)), closes [#11](https://github.com/antvis/X6/issues/11)
+* remove background image of container ([4c39e17](https://github.com/antvis/X6/commit/4c39e17ceb6e0a12afb324508f43c7c2713cc80f)), closes [#6](https://github.com/antvis/X6/issues/6)
+* remove unused labelPadding style ([8d08ba9](https://github.com/antvis/X6/commit/8d08ba9b24d033d423d581a9cb3526d5da1350a4)), closes [#36](https://github.com/antvis/X6/issues/36)
+* remove x6-common and x6-geometry deps ([#2830](https://github.com/antvis/X6/issues/2830)) ([5b5f5aa](https://github.com/antvis/X6/commit/5b5f5aa7ea6fded1b15abc79b9b5a5e2281b3ab9))
+* render react component ([ad1fa2f](https://github.com/antvis/X6/commit/ad1fa2f0a4d00ee073b14e9f021fa880be6a4124))
+* selection work only for cells ([6c80efe](https://github.com/antvis/X6/commit/6c80efea2c4a771edaf6189fec61fcfc4743ab0a))
+* shoule handle `Delete` key in Windows ([5499014](https://github.com/antvis/X6/commit/549901402c15851e4aced51e01b5b69f54054294))
+* snapline work with scroller ([fb159b6](https://github.com/antvis/X6/commit/fb159b6e257f4e0de5574d4a1cb296cebec7a6f8))
+* support backgroundColor of grid or graph ([300cc7d](https://github.com/antvis/X6/commit/300cc7d5701cc8689898d7ff03960f9312a88873))
+* update custom shapes ([f922640](https://github.com/antvis/X6/commit/f922640a6f6b144d589afbbdb70662a22f4228b2))
+* update demo for minimap ([ca2b5d1](https://github.com/antvis/X6/commit/ca2b5d1c9b8521001877ea2269338e557614b068))
+* update dependencies and fix type errors ([#1103](https://github.com/antvis/X6/issues/1103)) ([49d4371](https://github.com/antvis/X6/commit/49d43716ada672e609e4e6d9c6fdca3f494b6f68))
+* update example after refactor ([40e7ded](https://github.com/antvis/X6/commit/40e7dedf4a22d3877c9bc7a5678d4d856b8d97d1))
+* update example for react-shape ([af04b38](https://github.com/antvis/X6/commit/af04b38666852118feca6d582a9c5a5afbbb52e4))
+* update examples ([f80942a](https://github.com/antvis/X6/commit/f80942ae3d7c54775d39f866e308e5e4e15e887a))
+* update examples ([0dfc95f](https://github.com/antvis/X6/commit/0dfc95f1da9c10a8007fb725993dafd8f1fd22eb))
+* usage of graph.render ([627a48b](https://github.com/antvis/X6/commit/627a48bf7ef2bb879e92156a3eb1d3620a044ebd))
+* **wip:** 🐛 click event of contextmenu was not triggered ([2c9363e](https://github.com/antvis/X6/commit/2c9363e46904979901d4b467995d289c094d329a))
+
+
+### chore
+
+* release beta ([b5f3cfa](https://github.com/antvis/X6/commit/b5f3cfa2042f5196a995a38a8f41f140cabdce57))
+
+
+### Features
+
+* ✨ add 'loop' and 'loose' option for connecting ([cd8e997](https://github.com/antvis/X6/commit/cd8e997619603445998d6fb68d70120729d87c51)), closes [#390](https://github.com/antvis/X6/issues/390)
+* ✨ add `primer` and `useForeignObject` option for react-shape ([ab6a06f](https://github.com/antvis/X6/commit/ab6a06f1fe70b71ae31acc47b0d9cb02c86097e2))
+* ✨ add autoResize feature ([5aeae97](https://github.com/antvis/X6/commit/5aeae976cd7638b2b5c05bc12bc56b562366fe5f))
+* ✨ add clipboard plugin ([8107f6d](https://github.com/antvis/X6/commit/8107f6df5de52a33e1b8094a44d59ee7fd2a8042))
+* ✨ add connector demos ([2adb463](https://github.com/antvis/X6/commit/2adb4636621ffb7afa37a5c75a38ea005bc30a23))
+* ✨ add dnd plugin ([269fae9](https://github.com/antvis/X6/commit/269fae9e5eeb969c6a7884373aa3a32002c064e6))
+* ✨ add flowchart shapes ([a7c6477](https://github.com/antvis/X6/commit/a7c6477f5e71f3393fc09f87772f8a61486aaa8b))
+* ✨ add history plugin ([#2819](https://github.com/antvis/X6/issues/2819)) ([fd8d384](https://github.com/antvis/X6/commit/fd8d384a29d0f2e02bf066efd19ed3f92614c524))
+* ✨ add html shape ([8d75504](https://github.com/antvis/X6/commit/8d7550413f9f6f3177eab9d0f7fef14c55949fb8))
+* ✨ add keyboard plugin ([#2665](https://github.com/antvis/X6/issues/2665)) ([bf53677](https://github.com/antvis/X6/commit/bf536778ca7ee3229390dfcfcb085ec55edd9fb2))
+* ✨ add library for manipulating and animating SVG ([c07a177](https://github.com/antvis/X6/commit/c07a17785fc99372baaa66ea2525acf1d332fa11))
+* ✨ add loading for demo ([4c7f285](https://github.com/antvis/X6/commit/4c7f285412e0574709f230dd1109930b378418d9))
+* ✨ add loop line ([8326e1c](https://github.com/antvis/X6/commit/8326e1ca90edc5d19c5122581d7ea4b4b7986789)), closes [#392](https://github.com/antvis/X6/issues/392)
+* ✨ add minimap plugin ([6cdecbb](https://github.com/antvis/X6/commit/6cdecbbba9a4db1f67189e23fb89f2a7ba2af99e))
+* ✨ add minScale and maxScale options for mousewheel ([e474ac3](https://github.com/antvis/X6/commit/e474ac3c6a7c224ab5e9a9039c7b419f91554891)), closes [#283](https://github.com/antvis/X6/issues/283) [#283](https://github.com/antvis/X6/issues/283)
+* ✨ add panning and mousewheel module ([#2243](https://github.com/antvis/X6/issues/2243)) ([55d36e4](https://github.com/antvis/X6/commit/55d36e46808a4c79b086d7798bce396d5211a1dc))
+* ✨ add scroller api ([12173bf](https://github.com/antvis/X6/commit/12173bf500624f197ed56cf6a797499587178cba))
+* ✨ add selection plugin ([#2742](https://github.com/antvis/X6/issues/2742)) ([50a5dc7](https://github.com/antvis/X6/commit/50a5dc7cd8c2e39a1f8bf8359a0eb189dda8cb86))
+* ✨ add snapline plugin ([294672b](https://github.com/antvis/X6/commit/294672b3066b15ab834ce2a3172facc49004c950))
+* ✨ add some connecting option ([fb25aa5](https://github.com/antvis/X6/commit/fb25aa500d1554c15e9ade501523a5bbc07984ed))
+* ✨ add some missing api ([1dcb3d9](https://github.com/antvis/X6/commit/1dcb3d92fd83e5dfd1a1af9670d539a99dd9f55a))
+* ✨ add some ui events ([7781435](https://github.com/antvis/X6/commit/77814353097a96cc444d347f26309ce6ae8e7453)), closes [#275](https://github.com/antvis/X6/issues/275) [#273](https://github.com/antvis/X6/issues/273)
+* ✨ add stencil plugin ([#2815](https://github.com/antvis/X6/issues/2815)) ([4e1fb7b](https://github.com/antvis/X6/commit/4e1fb7bef8ff5548edf2529eb27be0a66a600996))
+* ✨ add switch demo with animation ([2c5399d](https://github.com/antvis/X6/commit/2c5399d97078c2cae27a7e61b2954834003b4711))
+* ✨ add tool manage api on cell ([ebaee93](https://github.com/antvis/X6/commit/ebaee93eb294cacba4c82b55dfa34d90619677bf))
+* ✨ add transform plugin ([#2818](https://github.com/antvis/X6/issues/2818)) ([660e2d7](https://github.com/antvis/X6/commit/660e2d7689bfa59a0f4a4a5e3c0ace70dec21e9e))
+* ✨ add virtual render feature ([#2198](https://github.com/antvis/X6/issues/2198)) ([fcba5e1](https://github.com/antvis/X6/commit/fcba5e14808d44c80b658c090cc2a4ebcdc64f6d))
+* ✨ add xmind demo ([adb2c98](https://github.com/antvis/X6/commit/adb2c98e23e93b7084fd20f05801f2595d4ac990))
+* ✨ add zoomTo api ([c8241ef](https://github.com/antvis/X6/commit/c8241ef7740cff2d2bb4eef701db5b372badc051))
+* ✨ angle measurement ([c435878](https://github.com/antvis/X6/commit/c435878c563047641bc9acb2a702c036fc9815a5))
+* ✨ auto resize graph when container resized ([9c7bc9a](https://github.com/antvis/X6/commit/9c7bc9a4bb210451283663cd99a29bd6c79e2ec4)), closes [#531](https://github.com/antvis/X6/issues/531)
+* ✨ collapsable tree ([491d151](https://github.com/antvis/X6/commit/491d151f1aab8fb28cf7789ee28ce0d767031f09))
+* ✨ connect to scollable ports ([3d6de21](https://github.com/antvis/X6/commit/3d6de21d06dee68cfa85061b90ce1b4b3d44e1db))
+* ✨ distance measurement ([9acc7a7](https://github.com/antvis/X6/commit/9acc7a77e1a0de1fbe02d6df2b70fb214f936c2e))
+* ✨ dnd example ([1bf6d57](https://github.com/antvis/X6/commit/1bf6d5790878a2d741b16860861dccc0432c18c0))
+* ✨ draw background on scroller when scroller's backgound is null ([da9aaf4](https://github.com/antvis/X6/commit/da9aaf47574e245b4b06856496a7da165cfc3eb9))
+* ✨ export common and geometry in x6 package ([#2820](https://github.com/antvis/X6/issues/2820)) ([df28200](https://github.com/antvis/X6/commit/df282000cc5e17521147c77c210e172c444c9938))
+* ✨ expose the selection api ([#2756](https://github.com/antvis/X6/issues/2756)) ([f3edbbc](https://github.com/antvis/X6/commit/f3edbbc95d2038a61116fa71bb0c3016f1c92d5e))
+* ✨ get predecessors/successors by distance ([d18fde3](https://github.com/antvis/X6/commit/d18fde3746dd82f28b335bfa050201b76c5a31ae))
+* ✨ group demo ([0d21b3a](https://github.com/antvis/X6/commit/0d21b3a1465a3fc4fdcffd80857a57d52f068b81))
+* ✨ improve auto-resize feature ([40d5335](https://github.com/antvis/X6/commit/40d53355cedc0bbbeb1e26948b67254dc6a40d85))
+* ✨ multi smooth edges ([44b3e95](https://github.com/antvis/X6/commit/44b3e95bf94d8c26d9c99aeed37d69067e104ebd))
+* ✨ node and edge selection ([0622b0e](https://github.com/antvis/X6/commit/0622b0e17dcff22c33126e6551fe49e853a9f98f))
+* ✨ node/edge move events ([67efad9](https://github.com/antvis/X6/commit/67efad9f9dac1657c0f04de15ca80c8fd50d395e))
+* ✨ option of selecting cell on cell moved ([c68ffed](https://github.com/antvis/X6/commit/c68ffed8370029c2e2ce19a7d59a233ae6ffca8a))
+* ✨ option of selecting cell on cell moved ([7c39f81](https://github.com/antvis/X6/commit/7c39f81603f7f767941bb3859dfa5e8621b91821))
+* ✨ parse markup from xml string ([6ccdf65](https://github.com/antvis/X6/commit/6ccdf65061ceed0e346917294ceefd2efa3c92aa))
+* ✨ passive event ([74fbaf5](https://github.com/antvis/X6/commit/74fbaf5eca8d7fc654b50f88e484e555784ba5fd))
+* ✨ random path demo ([38ec683](https://github.com/antvis/X6/commit/38ec683673e2da64296521f23a91f951a442adc0))
+* ✨ react table demo ([b353832](https://github.com/antvis/X6/commit/b353832b4f55007faa010df100210372e2bf494b))
+* ✨ render html/react label ([f4e6c09](https://github.com/antvis/X6/commit/f4e6c096473dd3f2e93e8585503d0528f1b41f2a))
+* ✨ select cell on start ([a2933d5](https://github.com/antvis/X6/commit/a2933d586ea5333f8ec7100ce37bde603d483b5d))
+* ✨ start panning when mousedown on no-interactive node/edge ([7435c32](https://github.com/antvis/X6/commit/7435c32076da25aa6f60d8efc9c5f2e28f371149))
+* ✨ support inherit options for react-shape registry ([#2596](https://github.com/antvis/X6/issues/2596)) ([ad63046](https://github.com/antvis/X6/commit/ad63046e89fa5853b0cf15947af1ed2a7b625188))
+* ✨ support moving when selection box is disabled ([eacd3d0](https://github.com/antvis/X6/commit/eacd3d0aa2228308228a2bb81d23c9872d1a4261))
+* ✨ support panning scroller graph byrightmousedown ([6ffdb50](https://github.com/antvis/X6/commit/6ffdb5004401b30ff5852a08de9286a934780be3))
+* ✨ support react portal ([c20c0c4](https://github.com/antvis/X6/commit/c20c0c473ee311b12a09193bb43209f47e7363b9))
+* ✨ ui event for final status ([9feaafb](https://github.com/antvis/X6/commit/9feaafbff6d10ea34186959591de0bda11416c66))
+* ✨ 支持调节手柄,如圆柱,通过调节手柄修改圆柱椭圆面的大小 ([8f24a62](https://github.com/antvis/X6/commit/8f24a6216f9bb2967c648be12238a96215dd2f4b))
+* add demo for tranform method ([2a585f4](https://github.com/antvis/X6/commit/2a585f4fde4044f0aa9d6f720bcc996c69401471))
+* add example for group ([4d43adb](https://github.com/antvis/X6/commit/4d43adb3167c04627976293275197e90588e8bba))
+* add scroller plugin ([#2580](https://github.com/antvis/X6/issues/2580)) ([5e0e2ac](https://github.com/antvis/X6/commit/5e0e2acde7d7e259ea27d001983e950878d0ecc8))
+* **anchor:** simplify the creation of Anchor ([e703cfa](https://github.com/antvis/X6/commit/e703cfa2b57f96648e5afd2b38d9c7d0256c3deb)), closes [#28](https://github.com/antvis/X6/issues/28)
+* cell view hooks ([ec584ac](https://github.com/antvis/X6/commit/ec584acc7f68d13173d69901764e74c9f4d163eb))
+* custom render for react components ([eee8dca](https://github.com/antvis/X6/commit/eee8dca6bb161103dd19f82ef6747e13373dbf47))
+* dnd and stencil ([8eb9877](https://github.com/antvis/X6/commit/8eb98770f96f8fb1f36990a8ee4a8fa285463587))
+* **dnd:** update example for dnd ([e3451ea](https://github.com/antvis/X6/commit/e3451ead5fdcbe83f2c5c22cf4733ee99ca2eb96))
+* dynamic update react node ([58539a4](https://github.com/antvis/X6/commit/58539a48ed461c717b8278d3088eb54608e2175f))
+* er router ([89227ad](https://github.com/antvis/X6/commit/89227ad942f8e17051a47996dcbd6643aef1e076))
+* example for basic shapes ([8d1cf6b](https://github.com/antvis/X6/commit/8d1cf6b468fedc19246af7dc85cacc5dc0aa042b))
+* example for minimap ([dbd53f4](https://github.com/antvis/X6/commit/dbd53f43490f812335faa1925689832bb8630843))
+* examples ([1afbdc9](https://github.com/antvis/X6/commit/1afbdc9243c50f09244c77771d55d4fd8778e1a8))
+* examples for rendering react component with a shape ([b013dbe](https://github.com/antvis/X6/commit/b013dbe4c83ab1887aae7874a09f34793201b1f9))
+* fix demo bug and optimize the x6-example-draw ([#224](https://github.com/antvis/X6/issues/224)) ([7a52c31](https://github.com/antvis/X6/commit/7a52c31da4429f5fdf8798ab8da5700ab875c068))
+* flowchart render, dnd, settings ([0c95345](https://github.com/antvis/X6/commit/0c953455f89b45540e43b0f84e2303bc488fac3a))
+* force release 2.0-beta ([6987d9c](https://github.com/antvis/X6/commit/6987d9ce64454cd76f697d33f96715dbdf56524a))
+* generate random color ([afe58ac](https://github.com/antvis/X6/commit/afe58aca4bb01a7e66c9f5fdc436a31809e92cb4))
+* infinite canvas example ([21c780a](https://github.com/antvis/X6/commit/21c780a5828ba742e5a38d9cca97a5a47cc5395f))
+* infinite canvas example ([e048d91](https://github.com/antvis/X6/commit/e048d918da57d9c28dbb845db2616ecc597bc6c3))
+* **label:** update examples that have labels ([49522f3](https://github.com/antvis/X6/commit/49522f3dc27495b79118ce8619493ce992776fda)), closes [#31](https://github.com/antvis/X6/issues/31)
+* **minimap:** examples for minimap ([eed4b66](https://github.com/antvis/X6/commit/eed4b66f0b6308e770ce37aa0ce64f86b26f502f))
+* prop hooks ([4c47b8d](https://github.com/antvis/X6/commit/4c47b8d3d1daea3642046b9a2ce03d55a83bfbe6))
+* remove unused variable ([befefb4](https://github.com/antvis/X6/commit/befefb40709ab28a76942a37219908bde19a7437))
+* render 400 shapes with react component ([1a89c01](https://github.com/antvis/X6/commit/1a89c0163703a9ee7d18b20afde2bc0c9bc2128e))
+* research ([0325a0d](https://github.com/antvis/X6/commit/0325a0d9a9e65150bcd768a8f33fe45eadcedb52))
+* support dropping cell into a group ([2b9348d](https://github.com/antvis/X6/commit/2b9348d0f6814090ed588bbf5ef255b4d9f7d1c5))
+* support mouseenter and mouseleave event ([#2559](https://github.com/antvis/X6/issues/2559)) ([ecfd426](https://github.com/antvis/X6/commit/ecfd4263b1266a128bf8651c4dd745ff8ab038b3))
+* support mousewheel zooming and keyboard shortcuts ([4146b04](https://github.com/antvis/X6/commit/4146b04aa344765a1b2463396b39d25c78bc71d3))
+* support panning on normal graph ([#352](https://github.com/antvis/X6/issues/352)) ([5c55e11](https://github.com/antvis/X6/commit/5c55e11d4a4e2c920963f713ded7ad3da7f83231)), closes [#339](https://github.com/antvis/X6/issues/339)
+* sync code from master ([#2004](https://github.com/antvis/X6/issues/2004)) ([c681405](https://github.com/antvis/X6/commit/c68140504bd21f654870f3d2fc1ad2f16f1113c8)), closes [#1974](https://github.com/antvis/X6/issues/1974) [#1977](https://github.com/antvis/X6/issues/1977) [#1985](https://github.com/antvis/X6/issues/1985) [#1988](https://github.com/antvis/X6/issues/1988) [#1991](https://github.com/antvis/X6/issues/1991) [#1989](https://github.com/antvis/X6/issues/1989)
+* toJSON()导出画布功能ok ([a847ab8](https://github.com/antvis/X6/commit/a847ab8aa85aaf2861e51db79f6075279af84aad))
+* tool registry and examples ([88a125a](https://github.com/antvis/X6/commit/88a125a1c1413ee3236bcd44f1e60def35177f90))
+* update anchor examples ([9784add](https://github.com/antvis/X6/commit/9784add45ec4cfb39f85b5e84099047a28ff0b0e))
+* update examples for [#10](https://github.com/antvis/X6/issues/10) ([0b89eb2](https://github.com/antvis/X6/commit/0b89eb2a153cb8fd109131f095724a7c089f5c5a))
+* upgrade react to 18 in react-components ([#2836](https://github.com/antvis/X6/issues/2836)) ([5138562](https://github.com/antvis/X6/commit/5138562515ddbd3975adc9d93514f21d6fc2bb3e))
+* 添加toJSON导出画布数据demo ([321e0ce](https://github.com/antvis/X6/commit/321e0ce10c9379a599f88febeb6b287b7d66d791))
+* 用户编辑过程中动态生成的连线也可以被渲染 ([c09fdbd](https://github.com/antvis/X6/commit/c09fdbd09d81bd4278cc8d5b112efe491b32f110))
+
+
+### Performance Improvements
+
+* ⚡️ add getMatrixByElementAttr and getBBoxByElementAttr to reduce reflow ([ba5b22a](https://github.com/antvis/X6/commit/ba5b22a33a0af067d77735c5cc46a60a45734dca))
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/X6/issues/1449)) ([0b5f241](https://github.com/antvis/X6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+* ⚡️ add transition callbacks and events for animation lifecycle ([69db3cc](https://github.com/antvis/X6/commit/69db3cc8257fef6528a3ea70c78131bcdf0738ce)), closes [#419](https://github.com/antvis/X6/issues/419) [#420](https://github.com/antvis/X6/issues/420)
+* ⚡️ check whether label existed in port ([#2063](https://github.com/antvis/X6/issues/2063)) ([5ae7271](https://github.com/antvis/X6/commit/5ae7271a25e804a9321aa80e31dcf6e43144728b))
+* ⚡️ optimize breakText for a high performance version ([#2242](https://github.com/antvis/X6/issues/2242)) ([0aced58](https://github.com/antvis/X6/commit/0aced58056d908ec092bca1889b5ef367a94fe68))
+* ⚡️ optimize node render performance ([6554959](https://github.com/antvis/X6/commit/65549599d2f82f8052d16776c8d36ce7ee2fba9b))
+* ⚡️ repalce getTransformToElement and getBBox to improve performance ([#2177](https://github.com/antvis/X6/issues/2177)) ([1436586](https://github.com/antvis/X6/commit/1436586f85cc2e2f6ec71548f6d6c232be793154))
+* ⚡️ restrict on resizing ([36107bf](https://github.com/antvis/X6/commit/36107bf81871b6ce083ae02bbd9ba72deb6aa9b8)), closes [#289](https://github.com/antvis/X6/issues/289)
+
+
+### BREAKING CHANGES
+
+* force release 2.0-beta
+* 2.0-beta
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.0.0
+* **@antv/x6-plugin-clipboard:** upgraded to 1.0.0
+* **@antv/x6-plugin-dnd:** upgraded to 1.0.0
+* **@antv/x6-plugin-history:** upgraded to 1.0.0
+* **@antv/x6-plugin-keyboard:** upgraded to 1.0.0
+* **@antv/x6-plugin-minimap:** upgraded to 1.0.0
+* **@antv/x6-plugin-scroller:** upgraded to 1.0.0
+* **@antv/x6-plugin-selection:** upgraded to 1.0.0
+* **@antv/x6-plugin-snapline:** upgraded to 1.0.0
+* **@antv/x6-plugin-stencil:** upgraded to 1.0.0
+* **@antv/x6-plugin-transform:** upgraded to 1.0.0
+* **@antv/x6-plugin-export:** upgraded to 1.0.0
+* **@antv/x6-react-components:** upgraded to 1.0.0
+* **@antv/x6-react-shape:** upgraded to 1.0.0
+
 ## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-03-10)
 
 

examples/x6-example-features/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-example-features",
-  "version": "2.0.0",
+  "version": "1.0.0",
   "scripts": {
     "start": "umi dev",
     "build": "umi build",
@@ -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": "1.0.0",
+    "@antv/x6-plugin-clipboard": "1.0.0",
+    "@antv/x6-plugin-dnd": "1.0.0",
+    "@antv/x6-plugin-history": "1.0.0",
+    "@antv/x6-plugin-keyboard": "1.0.0",
+    "@antv/x6-plugin-minimap": "1.0.0",
+    "@antv/x6-plugin-scroller": "1.0.0",
+    "@antv/x6-plugin-selection": "1.0.0",
+    "@antv/x6-plugin-snapline": "1.0.0",
+    "@antv/x6-plugin-stencil": "1.0.0",
+    "@antv/x6-plugin-transform": "1.0.0",
+    "@antv/x6-plugin-export": "1.0.0",
+    "@antv/x6-react-components": "1.0.0",
+    "@antv/x6-react-shape": "1.0.0",
     "antd": "^4.4.2",
     "classnames": "^2.2.6",
     "dagre": "^0.8.5",
     "elkjs": "^0.7.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-helmet": "^6.0.0"
+    "react-helmet": "^6.0.0",
+    "@antv/hierarchy": "^0.6.8"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.2.2",
@@ -37,7 +49,8 @@
     "react-test-renderer": "^16.7.0",
     "umi": "^2.9.0",
     "umi-plugin-react": "^1.8.0",
-    "umi-types": "^0.3.0"
+    "umi-types": "^0.3.0",
+    "babel-plugin-import": "^1.13.5"
   },
   "lint-staged": {
     "src/**/*.ts": [

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

examples/x6-example-features/src/pages/edge/jump-over.tsx

@@ -10,7 +10,6 @@ export default class Example extends React.Component {
       container: this.container,
       width: 1000,
       height: 600,
-      gridSize: 10,
     })
 
     const rect = graph.createNode({

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

@@ -1,154 +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: 400,
-      grid: true,
-      connecting: {
-        allowNode: false,
-        allowEdge: true,
-        allowLoop: false,
-        allowBlank: false,
-        allowMulti: 'withPort',
-      },
-    })
-
-    graph.addNode({
-      x: 60,
-      y: 50,
-      width: 120,
-      height: 64,
-      ports: {
-        groups: {
-          in: {
-            attrs: {
-              circle: {
-                r: 6,
-                magnet: true,
-                stroke: '#31d0c6',
-                strokeWidth: 2,
-                fill: '#fff',
-              },
-            },
-            position: 'top',
-          },
-          out: {
-            attrs: {
-              circle: {
-                r: 6,
-                magnet: true,
-                stroke: '#31d0c6',
-                strokeWidth: 2,
-                fill: '#fff',
-              },
-            },
-            position: 'bottom',
-          },
-        },
-        items: [
-          {
-            id: 'port1',
-            group: 'in',
-          },
-          {
-            id: 'port2',
-            group: 'in',
-          },
-          {
-            id: 'port3',
-            group: 'in',
-          },
-          {
-            id: 'port4',
-            group: 'out',
-          },
-          {
-            id: 'port5',
-            group: 'out',
-          },
-        ],
-      },
-    })
-
-    graph.addNode({
-      x: 160,
-      y: 240,
-      width: 120,
-      height: 64,
-      ports: {
-        groups: {
-          in: {
-            attrs: {
-              circle: {
-                r: 6,
-                magnet: true,
-                stroke: '#31d0c6',
-                strokeWidth: 2,
-                fill: '#fff',
-              },
-            },
-            position: 'top',
-          },
-          out: {
-            attrs: {
-              circle: {
-                r: 6,
-                magnet: true,
-                stroke: '#31d0c6',
-                strokeWidth: 2,
-                fill: '#fff',
-              },
-            },
-            position: 'bottom',
-          },
-        },
-        items: [
-          {
-            id: 'port1',
-            group: 'in',
-          },
-          {
-            id: 'port2',
-            group: 'in',
-          },
-          {
-            id: 'port3',
-            group: 'in',
-          },
-          {
-            id: 'port4',
-            group: 'out',
-          },
-          {
-            id: 'port5',
-            group: 'out',
-          },
-        ],
-      },
-    })
-
-    graph.addEdge({
-      source: [360, 80],
-      target: [560, 200],
-    })
-  }
-
-  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/tool/arrowhead.tsx

@@ -1,39 +1,44 @@
 import React from 'react'
-import { Graph, Shape } from '@antv/x6'
+import { Graph } from '@antv/x6'
 import '../../index.less'
 
-Shape.Rect.config({
-  attrs: {
-    body: {
-      fill: '#f5f5f5',
-      stroke: '#d9d9d9',
-      strokeWidth: 1,
+Graph.registerNode(
+  'custom-port-rect',
+  {
+    inherit: 'rect',
+    attrs: {
+      body: {
+        fill: '#f5f5f5',
+        stroke: '#d9d9d9',
+        strokeWidth: 1,
+      },
     },
+    ports: {
+      groups: {
+        in: {
+          position: { name: 'top' },
+        },
+        out: {
+          position: { name: 'bottom' },
+        },
+      },
+    },
+    portMarkup: [
+      {
+        tagName: 'circle',
+        selector: 'portBody',
+        attrs: {
+          r: 5,
+          magnet: true,
+          stroke: '#31d0c6',
+          fill: '#fff',
+          strokeWidth: 2,
+        },
+      },
+    ],
   },
-  ports: {
-    groups: {
-      in: {
-        position: { name: 'top' },
-      },
-      out: {
-        position: { name: 'bottom' },
-      },
-    },
-  },
-  portMarkup: [
-    {
-      tagName: 'circle',
-      selector: 'portBody',
-      attrs: {
-        r: 5,
-        magnet: true,
-        stroke: '#31d0c6',
-        fill: '#fff',
-        strokeWidth: 2,
-      },
-    },
-  ],
-})
+  true,
+)
 
 const magnetAvailabilityHighlighter = {
   name: 'stroke',
@@ -54,7 +59,6 @@ export default class Example extends React.Component {
       container: this.container,
       width: 800,
       height: 400,
-      // grid: true,
       highlighting: {
         magnetAvailable: magnetAvailabilityHighlighter,
       },
@@ -91,6 +95,7 @@ export default class Example extends React.Component {
     })
 
     const source = graph.addNode({
+      shape: 'custom-port-rect',
       x: 40,
       y: 40,
       width: 100,
@@ -104,6 +109,7 @@ export default class Example extends React.Component {
     })
 
     const target = graph.addNode({
+      shape: 'custom-port-rect',
       x: 140,
       y: 240,
       width: 100,
@@ -117,6 +123,7 @@ export default class Example extends React.Component {
     })
 
     graph.addNode({
+      shape: 'custom-port-rect',
       x: 320,
       y: 120,
       width: 100,

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Graph, Util, Timing } from '@antv/x6'
+import { Graph, Timing } from '@antv/x6'
+import { Marker } from '@antv/x6/lib/registry/marker'
 import '../index.less'
 
 function registerEdgeTool(name: string, inherit: string, options: any) {
@@ -131,14 +132,14 @@ export default class Example extends React.Component {
           sourceMarker: {
             stroke: '#31d0c6',
             fill: '#31d0c6',
-            d: Util.normalizeMarker(
+            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',
-            d: Util.normalizeMarker(
+            d: Marker.normalize(
               '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',
               10,
             ),
@@ -162,14 +163,14 @@ export default class Example extends React.Component {
           sourceMarker: {
             fill: '#4b4a67',
             stroke: '#4b4a67',
-            d: Util.normalizeMarker(
+            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: Util.normalizeMarker(
+            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',
             ),
           },
@@ -199,14 +200,14 @@ export default class Example extends React.Component {
           sourceMarker: {
             stroke: '#7c68fc',
             fill: '#7c68fc',
-            d: Util.normalizeMarker(
+            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: Util.normalizeMarker(
+            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',
             ),
           },
@@ -214,26 +215,6 @@ export default class Example extends React.Component {
       },
     })
 
-    const edge6 = graph.addEdge({
-      shape: 'double-edge',
-      source: { x: 10, y: 200 },
-      target: { x: 350, y: 200 },
-      attrs: {
-        line: {
-          stroke: '#7c68fc',
-        },
-      },
-      labels: [
-        {
-          attrs: { text: { text: 'double edge' } },
-          position: {
-            offset: 15,
-            distance: 0.5,
-          },
-        },
-      ],
-    })
-
     const edge7 = graph.addEdge({
       source: { x: 400, y: 200 },
       target: { x: 740, y: 200 },
@@ -324,55 +305,6 @@ export default class Example extends React.Component {
       ],
     })
 
-    const edge8 = 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: '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 edge9 = graph.addEdge({
       markup: [
         {
@@ -804,14 +736,6 @@ export default class Example extends React.Component {
           break
         }
 
-        case edge6: {
-          items.push('vertices', {
-            name: 'custom-boundary',
-            args: { padding: 25 },
-          })
-          break
-        }
-
         case edge7: {
           items.push('source-arrowhead', 'target-arrowhead', {
             name: 'button-remove',
@@ -820,8 +744,7 @@ export default class Example extends React.Component {
           break
         }
 
-        case edge9:
-        case edge8: {
+        case edge9: {
           items.push({
             name: 'vertices',
             args: {

examples/x6-example-features/src/pages/edge/validate-connection-count.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { Graph, Edge, EdgeView } 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: {
+        validateMagnet({ cell, magnet }) {
+          let count = 0
+          const connectionCount = magnet.getAttribute('connection-count')
+          const max = connectionCount
+            ? parseInt(connectionCount, 10)
+            : Number.MAX_SAFE_INTEGER
+          const outgoingEdges = graph.getOutgoingEdges(cell)
+          if (outgoingEdges) {
+            outgoingEdges.forEach((edge: Edge) => {
+              const edgeView = graph.findViewByCell(edge) as EdgeView
+              if (edgeView.sourceMagnet === magnet) {
+                count += 1
+              }
+            })
+          }
+          return count < max
+        },
+      },
+    })
+
+    graph.addNode({
+      shape: 'rect',
+      x: 80,
+      y: 80,
+      width: 160,
+      height: 60,
+      label: 'source',
+      ports: [
+        {
+          id: 'a',
+          attrs: {
+            circle: {
+              magnet: true,
+              connectionCount: 3, // 自定义属性，控制连接桩可连接多少条边
+            },
+          },
+        },
+        {
+          id: 'b',
+          attrs: {
+            circle: {
+              magnet: true,
+              connectionCount: 0, // 自定义属性，控制连接桩可连接多少条边
+            },
+          },
+        },
+      ],
+      attrs: {
+        body: {
+          magnet: true,
+          connectionCount: 2, // 自定义属性，控制节点可连接多少条边
+        },
+      },
+    })
+  }
+
+  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/validate-connection.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Graph, Edge, EdgeView } from '@antv/x6'
+import { Graph } from '@antv/x6'
+import '../index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -8,63 +9,135 @@ export default class Example extends React.Component {
     const graph = new Graph({
       container: this.container,
       width: 800,
-      height: 600,
+      height: 400,
       grid: true,
       connecting: {
-        validateMagnet({ cell, magnet }) {
-          let count = 0
-          const connectionCount = magnet.getAttribute('connection-count')
-          const max = connectionCount
-            ? parseInt(connectionCount, 10)
-            : Number.MAX_SAFE_INTEGER
-          const outgoingEdges = graph.getOutgoingEdges(cell)
-          if (outgoingEdges) {
-            outgoingEdges.forEach((edge: Edge) => {
-              const edgeView = graph.findViewByCell(edge) as EdgeView
-              if (edgeView.sourceMagnet === magnet) {
-                count += 1
-              }
-            })
-          }
-          return count < max
-        },
+        allowNode: false,
+        allowEdge: true,
+        allowLoop: false,
+        allowBlank: false,
+        allowMulti: 'withPort',
       },
     })
 
     graph.addNode({
-      shape: 'rect',
-      x: 80,
-      y: 80,
-      width: 160,
-      height: 60,
-      label: 'source',
-      ports: [
-        {
-          id: 'a',
-          attrs: {
-            circle: {
-              magnet: true,
-              connectionCount: 3, // 自定义属性，控制连接桩可连接多少条边
+      x: 60,
+      y: 50,
+      width: 120,
+      height: 64,
+      ports: {
+        groups: {
+          in: {
+            attrs: {
+              circle: {
+                r: 6,
+                magnet: true,
+                stroke: '#31d0c6',
+                strokeWidth: 2,
+                fill: '#fff',
+              },
             },
+            position: 'top',
+          },
+          out: {
+            attrs: {
+              circle: {
+                r: 6,
+                magnet: true,
+                stroke: '#31d0c6',
+                strokeWidth: 2,
+                fill: '#fff',
+              },
+            },
+            position: 'bottom',
           },
         },
-        {
-          id: 'b',
-          attrs: {
-            circle: {
-              magnet: true,
-              connectionCount: 0, // 自定义属性，控制连接桩可连接多少条边
-            },
+        items: [
+          {
+            id: 'port1',
+            group: 'in',
           },
-        },
-      ],
-      attrs: {
-        body: {
-          magnet: true,
-          connectionCount: 2, // 自定义属性，控制节点可连接多少条边
-        },
+          {
+            id: 'port2',
+            group: 'in',
+          },
+          {
+            id: 'port3',
+            group: 'in',
+          },
+          {
+            id: 'port4',
+            group: 'out',
+          },
+          {
+            id: 'port5',
+            group: 'out',
+          },
+        ],
       },
     })
+
+    graph.addNode({
+      x: 160,
+      y: 240,
+      width: 120,
+      height: 64,
+      ports: {
+        groups: {
+          in: {
+            attrs: {
+              circle: {
+                r: 6,
+                magnet: true,
+                stroke: '#31d0c6',
+                strokeWidth: 2,
+                fill: '#fff',
+              },
+            },
+            position: 'top',
+          },
+          out: {
+            attrs: {
+              circle: {
+                r: 6,
+                magnet: true,
+                stroke: '#31d0c6',
+                strokeWidth: 2,
+                fill: '#fff',
+              },
+            },
+            position: 'bottom',
+          },
+        },
+        items: [
+          {
+            id: 'port1',
+            group: 'in',
+          },
+          {
+            id: 'port2',
+            group: 'in',
+          },
+          {
+            id: 'port3',
+            group: 'in',
+          },
+          {
+            id: 'port4',
+            group: 'out',
+          },
+          {
+            id: 'port5',
+            group: 'out',
+          },
+        ],
+      },
+    })
+
+    graph.addEdge({
+      source: [360, 80],
+      target: [560, 200],
+    })
   }
 
   refContainer = (container: HTMLDivElement) => {

examples/x6-example-features/src/pages/embed/dnd.less

@@ -1,6 +0,0 @@
-.x6-node-selected {
-  rect {
-    fill: #e6f7ff;
-    stroke: #1890ff;
-  }
-}

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

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Graph, Node, Color } from '@antv/x6'
 import '../index.less'
-import './dnd.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -12,10 +11,6 @@ export default class Example extends React.Component {
       width: 880,
       height: 600,
       grid: true,
-      selecting: {
-        enabled: true,
-        // showNodeSelectionBox: true,
-      },
       embedding: {
         enabled: true,
         findParent({ node }) {

examples/x6-example-features/src/pages/embed/group/index.tsx

@@ -1,178 +0,0 @@
-import React from 'react'
-import { Graph, Node } from '@antv/x6'
-import '@antv/x6-react-shape'
-import { PlusSquareOutlined, MinusSquareOutlined } from '@ant-design/icons'
-import { Group } from './shape'
-import '../../index.less'
-
-export default class Example extends React.Component {
-  private container: HTMLDivElement
-
-  componentDidMount() {
-    const graph = new Graph({
-      container: this.container,
-      width: 1000,
-      height: 600,
-      grid: true,
-    })
-
-    const createGroup = (
-      id: string,
-      x: number,
-      y: number,
-      width: number,
-      height: number,
-      fill: string,
-    ) => {
-      const group = new Group({
-        id,
-        x,
-        y,
-        width,
-        height,
-        attrs: {
-          body: { fill },
-        },
-      })
-      graph.addNode(group)
-      return group
-    }
-
-    const createNode = (
-      id: string,
-      x: number,
-      y: number,
-      width: number,
-      height: number,
-      fill: string,
-    ) => {
-      return graph.addNode({
-        id,
-        x,
-        y,
-        width,
-        height,
-        attrs: {
-          body: {
-            fill: fill || 'blue',
-          },
-          label: {
-            text: id,
-            fill: 'white',
-            refX: 10,
-            refY: 10,
-            textAnchor: 'start',
-          },
-        },
-      })
-    }
-
-    const createEdge = (
-      id: string,
-      source: string,
-      target: string,
-      vertices?: { x: number; y: number }[],
-    ) => {
-      return graph.addEdge({
-        id,
-        source,
-        target,
-        vertices: vertices,
-        label: id,
-      })
-    }
-
-    const a = createGroup('a', 100, 30, 480, 320, 'lightblue')
-    const aa = createGroup('aa', 180, 80, 160, 140, 'green')
-    const aaa = createGroup('aaa', 200, 120, 120, 40, 'gray')
-    const c = createNode('c', 450, 200, 50, 50, 'orange')
-
-    a.addChild(aa)
-    aa.addChild(aaa)
-    a.addChild(c)
-
-    console.log(aa)
-
-    createNode('d', 680, 80, 50, 50, 'black')
-
-    const l1 = createEdge('l1', 'aa', 'c') // auto embed to common ancestor `a`
-    console.log(l1)
-    createEdge('l3', 'c', 'd')
-    aa.addChild(
-      createEdge('l2', 'aa', 'aaa', [
-        { x: 50, y: 110 },
-        { x: 50, y: 180 },
-      ]),
-    )
-
-    graph.on('node:collapse', ({ node }: { node: Group }) => {
-      node.toggleCollapse()
-      const collapsed = node.isCollapsed()
-      const cells = node.getDescendants()
-      cells.forEach((node) => {
-        if (collapsed) {
-          node.hide()
-        } else {
-          node.show()
-        }
-      })
-    })
-
-    graph.addNode({
-      shape: 'react-shape',
-      x: 320,
-      y: 420,
-      width: 160,
-      height: 60,
-      component: (node: Node) => {
-        const data = node.getData<any>() || {}
-        const collapsed = data.collapsed === true
-        return (
-          <div style={{ background: '#f5f5f5', width: '100%', height: '100%' }}>
-            {collapsed ? (
-              <PlusSquareOutlined
-                style={{ cursor: 'pointer' }}
-                event="react:collapse"
-              />
-            ) : (
-              <MinusSquareOutlined
-                style={{ cursor: 'pointer' }}
-                event="react:collapse"
-              />
-            )}
-
-            {node.attr('body/fill')}
-          </div>
-        )
-      },
-    })
-
-    graph.on('react:collapse', ({ node }: { node: Node }) => {
-      const data = node.getData<any>() || {}
-      const collapsed = !(data.collapsed === true)
-      node.updateData({ collapsed })
-      node.resize(collapsed ? 80 : 160, collapsed ? 30 : 60)
-      const cells = node.getDescendants()
-      cells.forEach((node) => {
-        if (collapsed) {
-          node.hide()
-        } else {
-          node.show()
-        }
-      })
-      console.log(node)
-    })
-  }
-
-  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/embed/nested-clone.tsx

@@ -1,150 +0,0 @@
-import React from 'react'
-import { Graph, Cell, CellView } from '@antv/x6'
-import '../index.less'
-
-export default class Example extends React.Component {
-  private info: HTMLDivElement
-  private container: HTMLDivElement
-
-  componentDidMount() {
-    const graph = new Graph({
-      container: this.container,
-      width: 1000,
-      height: 600,
-    })
-
-    const me = (
-      id: string,
-      x: number,
-      y: number,
-      width: number,
-      height: number,
-      fill: string,
-    ) => {
-      return graph.addNode({
-        id,
-        name: id,
-        x,
-        y,
-        width,
-        height,
-        attrs: {
-          body: {
-            fill: fill || 'blue',
-          },
-          label: {
-            text: id,
-            fill: 'white',
-            refX: 10,
-            refY: 10,
-            textAnchor: 'start',
-          },
-        },
-      })
-    }
-
-    const ml = (
-      id: string,
-      source: string,
-      target: string,
-      vertices?: { x: number; y: number }[],
-    ) => {
-      return graph.addEdge({
-        id,
-        source,
-        target,
-        name: id,
-        vertices: vertices,
-        label: id,
-      })
-    }
-
-    const a = me('a', 100, 30, 420, 200, 'lightblue')
-    const aa = me('aa', 130, 50, 160, 140, 'green')
-    const aaa = me('aaa', 150, 120, 120, 40, 'gray')
-    const c = me('c', 400, 50, 50, 50, 'orange')
-    a.addChild(aa)
-    aa.addChild(aaa)
-    a.addChild(c)
-
-    console.log(aa)
-
-    me('d', 620, 50, 50, 50, 'black')
-    const l1 = ml('l1', 'aa', 'c') // auto embed to common ancestor `a`
-    console.log(l1)
-    ml('l3', 'c', 'd')
-    aa.addChild(
-      ml('l2', 'aa', 'aaa', [
-        { x: 50, y: 110 },
-        { x: 50, y: 140 },
-      ]),
-    )
-
-    const model = graph.model
-    graph.on('cell:mouseleave', this.resetInfo)
-    graph.on('cell:mouseenter', ({ view }: { view: CellView }) => {
-      const cell = view.cell
-      const i: { [key: string]: string } = {}
-      const toString = (cloned: { [key: string]: Cell }) =>
-        Object.keys(cloned)
-          .map((id) => {
-            const cell = cloned[id]
-            return cell.prop('name')
-          })
-          .join(', ')
-
-      let key = `graph.cloneCells([${cell.id}])`
-      let cloned = model.cloneCells([cell])
-      i[key] = toString(cloned)
-
-      key = `Cell.deepClone(${cell.id})`
-      cloned = Cell.deepClone(cell)
-      i[key] = toString(cloned)
-
-      key = `${cell.id}.clone({ deep: true })`
-      cloned = { [cell.id]: cell.clone({ deep: true }) }
-      i[key] = toString(cloned)
-
-      key = `graph.cloneSubGraph([${cell.id}], { deep: true })`
-      cloned = model.cloneSubGraph([cell], { deep: true })
-      i[key] = toString(cloned)
-
-      key = `graph.getSubGraph([${cell.id}], { deep: true })`
-      const cells = model.getSubGraph([cell], { deep: true })
-      i[key] = cells.map((c) => c.prop('name')).join(', ')
-
-      key = `graph.getConnectedLinks(${cell.id}, { deep: true })`
-      const edges = model.getConnectedEdges(cell, { deep: true })
-      i[key] = edges.map((c) => c.prop('name')).join(', ')
-
-      this.info.innerText = JSON.stringify(i, null, '\t')
-    })
-
-    this.resetInfo()
-  }
-
-  resetInfo = () => {
-    this.info.innerText =
-      'Hover over cells to see\nhow cloning and graph search works\non nested graphs.'
-  }
-
-  refContainer = (container: HTMLDivElement) => {
-    this.container = container
-  }
-
-  refInfo = (div: HTMLDivElement) => {
-    this.info = div
-  }
-
-  render() {
-    return (
-      <div className="x6-graph-wrap">
-        <div
-          ref={this.refInfo}
-          style={{ position: 'fixed', right: 50, bottom: 50 }}
-        />
-        <div ref={this.refContainer} className="x6-graph" />
-      </div>
-    )
-  }
-}

examples/x6-example-features/src/pages/embed/nested.tsx

@@ -1,56 +1,76 @@
 import React from 'react'
-import { Graph } from '@antv/x6'
+import { Checkbox } from 'antd'
+import { Graph, Node, Edge } from '@antv/x6'
 import '../index.less'
 
-export default class Example extends React.Component {
+export default class Example extends React.Component<
+  Example.Props,
+  Example.State
+> {
   private container: HTMLDivElement
+  private parent: Node
+  private edge1: Edge
+  private edge2: Edge
+
+  // default embeded
+  state = { embedEdges: true }
 
   componentDidMount() {
     const graph = new Graph({
       container: this.container,
       width: 800,
       height: 600,
-      grid: 10,
     })
 
-    const r1 = graph.addNode({
-      size: { width: 600, height: 240 },
+    const parent = graph.addNode({
+      size: { width: 100, height: 30 },
       position: { x: 100, y: 40 },
       attrs: {
-        body: { fill: 'orange' },
-        label: { text: 'Box' },
+        body: { fill: 'blue' },
+        label: { text: 'parent', fill: 'white' },
       },
     })
 
-    var r11 = r1.clone()
-    r11
-      .resize(240, 120)
-      .attr({ body: { fill: 'yellow' } })
-      .translate(24, 24)
-      .addTo(r1)
-
-    var r12 = r11.clone()
-    r12
-      .resize(120, 80)
-      .attr({ body: { fill: 'yellow' } })
-      .translate(400, 80)
-      .addTo(r1)
-
-    // auto update parent
-    graph.addEdge({
-      source: r11,
-      target: r12,
-    })
-
-    graph
-      .addEdge({
-        source: { x: 160, y: 100 },
-        target: { x: 240, y: 240 },
+    const child1 = graph
+      .addNode({
+        x: 70,
+        y: 130,
+        width: 80,
+        height: 30,
+        attrs: {
+          body: { fill: 'lightgreen', rx: 5, ry: 5 },
+          label: { text: 'child', fill: 'white' },
+        },
       })
-      .addTo(r1)
+      .addTo(parent)
 
-    const r2 = r1.clone({ deep: true }).translate(0, 300)
-    graph.addNode(r2)
+    const child2 = child1.clone().translate(100).addTo(parent)
+
+    this.parent = parent
+    this.edge1 = graph.addEdge({
+      source: parent,
+      target: child1,
+    })
+    this.edge2 = graph.addEdge({
+      source: parent,
+      target: child2,
+      vertices: [
+        { x: 210, y: 75 },
+        { x: 190, y: 105 },
+      ],
+    })
+  }
+
+  onEmbedEdgesChanged = (e: any) => {
+    const embedEdges = e.target.checked
+    this.setState({ embedEdges })
+    if (embedEdges) {
+      this.parent.embed(this.edge1)
+      this.parent.embed(this.edge2)
+    } else {
+      this.parent.unembed(this.edge1)
+      this.parent.unembed(this.edge2)
+    }
   }
 
   refContainer = (container: HTMLDivElement) => {
@@ -60,8 +80,24 @@ export default class Example extends React.Component {
   render() {
     return (
       <div className="x6-graph-wrap">
+        <div className="x6-graph-tools">
+          <Checkbox
+            checked={this.state.embedEdges}
+            onChange={this.onEmbedEdgesChanged}
+          >
+            Embed Edges
+          </Checkbox>
+        </div>
         <div ref={this.refContainer} className="x6-graph" />
       </div>
     )
   }
 }
+
+// eslint-disable-next-line
+namespace Example {
+  export interface Props {}
+  export interface State {
+    embedEdges: boolean
+  }
+}

examples/x6-example-features/src/pages/embed/nested2.tsx

@@ -1,103 +0,0 @@
-import React from 'react'
-import { Checkbox } from 'antd'
-import { Graph, Node, Edge } from '@antv/x6'
-import '../index.less'
-
-export default class Example extends React.Component<
-  Example.Props,
-  Example.State
-> {
-  private container: HTMLDivElement
-  private parent: Node
-  private edge1: Edge
-  private edge2: Edge
-
-  // default embeded
-  state = { embedEdges: true }
-
-  componentDidMount() {
-    const graph = new Graph({
-      container: this.container,
-      width: 800,
-      height: 600,
-    })
-
-    const parent = graph.addNode({
-      size: { width: 100, height: 30 },
-      position: { x: 100, y: 40 },
-      attrs: {
-        body: { fill: 'blue' },
-        label: { text: 'parent', fill: 'white' },
-      },
-    })
-
-    const child1 = graph
-      .addNode({
-        x: 70,
-        y: 130,
-        width: 80,
-        height: 30,
-        attrs: {
-          body: { fill: 'lightgreen', rx: 5, ry: 5 },
-          label: { text: 'child', fill: 'white' },
-        },
-      })
-      .addTo(parent)
-
-    const child2 = child1.clone().translate(100).addTo(parent)
-
-    this.parent = parent
-    this.edge1 = graph.addEdge({
-      source: parent,
-      target: child1,
-    })
-    this.edge2 = graph.addEdge({
-      source: parent,
-      target: child2,
-      vertices: [
-        { x: 210, y: 75 },
-        { x: 190, y: 105 },
-      ],
-    })
-  }
-
-  onEmbedEdgesChanged = (e: any) => {
-    const embedEdges = e.target.checked
-    this.setState({ embedEdges })
-    if (embedEdges) {
-      this.parent.embed(this.edge1)
-      this.parent.embed(this.edge2)
-    } else {
-      this.parent.unembed(this.edge1)
-      this.parent.unembed(this.edge2)
-    }
-  }
-
-  refContainer = (container: HTMLDivElement) => {
-    this.container = container
-  }
-
-  render() {
-    return (
-      <div className="x6-graph-wrap">
-        <div className="x6-graph-tools">
-          <Checkbox
-            checked={this.state.embedEdges}
-            onChange={this.onEmbedEdgesChanged}
-          >
-            Embed Edges
-          </Checkbox>
-        </div>
-        <div ref={this.refContainer} className="x6-graph" />
-      </div>
-    )
-  }
-}
-
-// eslint-disable-next-line
-namespace Example {
-  export interface Props {}
-  export interface State {
-    embedEdges: boolean
-  }
-}

examples/x6-example-features/src/pages/expand/index.less

@@ -1,3 +0,0 @@
-.x6-port .collapsed {
-  cursor: pointer;
-}