chore: commit history cleaning

2024-11-29 10:18:14 +08:00 · 2023-02-02 10:31:36 +08:00 · 2023-02-02 10:31:36 +08:00 · 3095544cdf
commit 3095544cdf
983 changed files with 112400 additions and 0 deletions
--- a/.babelrc.js
+++ b/.babelrc.js
@ -0,0 +1,26 @@
+module.exports = api => {
+  api.cache(() => process.env.NODE_ENV);
+
+  if (process.env.GATSBY === 'true') {
+    return {
+      presets: ['@babel/preset-env', 'babel-preset-gatsby'],
+    };
+  }
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          loose: true,
+          modules: false,
+        },
+      ],
+      '@babel/preset-react',
+      {
+        "plugins": [
+          "@babel/plugin-proposal-class-properties"
+        ]
+      }
+    ]
+  };
+};
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,10 @@
+# Browsers that we support
+
+[production staging]
+> 1%
+last 2 version
+ie 11
+
+[development]
+> 1%
+last 2 version
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,20 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size  = 2
+
+[Makefile]
+indent_style = tab
+indent_size  = 1
+
+[*.md]
+trim_trailing_whitespace = false
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,14 @@
+lib/
+dist/
+node_modules/
+.cache
+public
+bin
+esm/
+es/
+tests/
+webpack.*.js
+gatsby-*.js
+global.d.ts
+jest.config.js
+.eslintrc.*
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,51 @@
+module.exports = {
+  extends: [require.resolve('@umijs/fabric/dist/eslint')],
+  globals: {
+    $: true,
+    _: true,
+  },
+  rules: {
+    'no-bitwise': 0,
+    'import/order': 0,
+    'no-plusplus': 0,
+    'no-console': ['error', { allow: ['warn', 'error'] }],
+    'operator-assignment': 0,
+    'consistent-return': 0,
+    'lines-between-class-members': 0,
+    'class-methods-use-this': 0,
+    'lines-between-class-members': 0,
+    'no-multi-assign': 0,
+    'no-continue': 0,
+    'no-underscore-dangle': 0,
+    'no-useless-constructor': 0,
+    'prefer-destructuring': 0,
+    'guard-for-in': 0,
+    'no-restricted-globals': 0,
+    'max-classes-per-file': 0,
+    // 后面需要去掉
+    'no-restricted-syntax': 0,
+    'prefer-spread': 0,
+    '@typescript-eslint/camelcase': 0,
+    'no-loop-func': 0,
+    '@typescript-eslint/no-loop-func': 0,
+    '@typescript-eslint/no-redeclare': 0,
+    '@typescript-eslint/no-shadow': 0,
+    '@typescript-eslint/no-unused-vars': 0,
+    'no-param-reassign': 0,
+    'import/no-extraneous-dependencies': 0,
+    'no-unused-expressions': 0,
+    'dot-notation': 0,
+    'array-callback-return': 0,
+    'one-var': 0,
+    'no-lonely-if': 0,
+    '@typescript-eslint/consistent-type-imports': 0,
+    "@typescript-eslint/no-this-alias": 0,
+    "@typescript-eslint/consistent-indexed-object-style": 0,
+    "@typescript-eslint/no-invalid-this": 0,
+    "@typescript-eslint/array-type": 0,
+    "@typescript-eslint/consistent-type-definitions": 0,
+    // using Record<string, unknown> instead
+    "@typescript-eslint/ban-types": 0,
+    "@typescript-eslint/no-useless-constructor": 0
+  },
+};
--- a/.fatherrc.js
+++ b/.fatherrc.js
@ -0,0 +1,5 @@
+export default {
+  entry: './src/index.ts',
+  esm: 'babel',
+  cjs: 'babel',
+};
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@ -0,0 +1,24 @@
+<!--
+Thank you for reporting an issue.
+
+1. It's RECOMMENDED to submit PR for typo or tiny bug fix.
+2. If this's a FEATURE request, please provide: details, pseudo codes if necessary.
+3. If this's a BUG, please provide: course repetition, error log and configuration. Fill in as much of the template below as you're able.
+4. It will be nice to use to provide a CodePen Link which can reproduce the issue, we provide a CodePen template [g6-github-issue](https://codepen.io/DoriTong/pen/pKbLVw).
+
+感谢您向我们反馈问题。
+
+1. 提交问题前，请先阅读 https://antv.alipay.com/zh-cn/g6/1.x/index.html 上的文档。
+2. 我们推荐如果是小问题（错别字修改，小的 bug fix）直接提交 PR。
+3. 如果是一个新需求，请提供：详细需求描述，最好是有伪代码实现。
+4. 如果是一个 BUG，请提供：复现步骤，错误日志以及相关配置，并尽量填写下面的模板中的条目。
+5. 如果可以，请提供尽可能精简的 CodePen 链接，可使用 CodePen 模板 https://codepen.io/DoriTong/pen/pKbLVw，方便我们排查问题。
+6. 扩展阅读：[如何向开源项目提交无法解答的问题](https://zhuanlan.zhihu.com/p/25795393)
+-->
+
+- **G6 Version**:
+- **Platform**:
+- **Mini Showcase(like screenshots)**:
+- **CodePen Link**:
+
+<!-- Enter your issue details below this comment. -->
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@ -0,0 +1,85 @@
+name: 'Bug report'
+description: Create a report to help us improve
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for reporting an issue :pray:.
+
+        This issue tracker is for reporting bugs found in G6 (https://github.com/antvis/G6).
+        If you have a question about how to achieve something and are struggling, please post a question
+        inside of G6's Discussion's tab: https://github.com/antvis/G6/discussions
+
+        Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already:
+         - G6's Issue's tab: https://github.com/antvis/G6/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc
+         - G6's closed issues tab: https://github.com/antvis/G6/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed
+         - G6 Discussion's tab: https://github.com/antvis/G6/discussions
+
+        The more information you fill in, the better the community can help you.
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: Provide a clear and concise description of the challenge you are running into.
+    validations:
+      required: true
+  - type: input
+    id: link
+    attributes:
+      label: Your Example Website or App
+      description: |
+        Which website or app were you using when the bug happened?
+        Note:
+        - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the G6 npm package.
+        - To create a shareable code example you can use Stackblitz (https://stackblitz.com/) or CodeSandbox (https://codesandbox.io/s/new). Please no localhost URLs.
+        - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.
+      placeholder: |
+        e.g. Stackblitz, Code Sandbox app url
+    validations:
+      required: true
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to Reproduce the Bug or Issue
+      description: Describe the steps we have to take to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior
+      description: Provide a clear and concise description of what you expected to happen.
+      placeholder: |
+        As a user, I expected ___ behavior but i am seeing ___
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots_or_videos
+    attributes:
+      label: Screenshots or Videos
+      description: |
+        If applicable, add screenshots or a video to help explain your problem.
+        For more information on the supported file image/file types and the file size limits, please refer
+        to the following link: https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/attaching-files
+      placeholder: |
+        You can drag your video or image files inside of this editor ↓
+  - type: textarea
+    id: platform
+    attributes:
+      label: Platform
+      value: |
+        - OS: [e.g. macOS, Windows, Linux]
+        - Browser: [e.g. Chrome, Safari, Firefox]
+        - Version: [e.g. 91.1]
+    validations:
+      required: true
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
--- a/.github/ISSUE_TEMPLATE/bug_report_chinese.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report_chinese.yml
@ -0,0 +1,69 @@
+name: '🐞 新 Issue'
+description: 创建一个新的 issue，如果你的 issue 不符合规范，它将会被自动关闭。
+body:
+  - type: markdown
+    attributes:
+      value: |
+        在提交新 issue 之前，先通过以下链接查看有没有类似的 bug 或者建议:
+         - [G6 Issues](https://github.com/antvis/G6/issues)
+         - [G6 Closed Issues](https://github.com/antvis/G6/issues?q=is%3Aissue+is%3Aclosed)
+         - [G6 Discussions](https://github.com/antvis/G6/discussions)
+  - type: textarea
+    id: description
+    attributes:
+      label: 问题描述
+      description: 简洁清晰地描述你遇到的问题。
+    validations:
+      required: true
+  - type: input
+    id: link
+    attributes:
+      label: 重现链接
+      description: |
+        可以使用 CodeSandbox(https://codesandbox.io/s/new) 或者 StackBlitz(https://stackblitz.com/) 重现你的问题。
+      placeholder: |
+        示例: CodeSandBox 或者 StackBlitz URL
+    validations:
+      required: true
+  - type: textarea
+    id: steps
+    attributes:
+      label: 重现步骤
+      description: 简洁清晰的重现步骤能够帮助我们更迅速地定位问题所在。
+      placeholder: |
+        1.进入页面...
+        2.点击....
+        3.查看错误....
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: 预期行为
+      description: 描述你期望的结果以及实际的结果。
+      placeholder: |
+        我期望看到...，但我看到了...
+    validations:
+      required: true
+  - type: textarea
+    id: platform
+    attributes:
+      label: 平台
+      value: |
+        - 操作系统: [macOS, Windows, Linux, React Native ...]
+        - 网页浏览器: [Google Chrome, Safari, Firefox]
+        - G6 版本: [4.5.1 ... ]
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots_or_videos
+    attributes:
+      label: 屏幕截图或视频（可选）
+      description: 可以添加屏幕截图或视频帮助你解释问题。
+      placeholder: |
+        可以将你的图片或者视频拖拽到此处↓
+  - type: textarea
+    id: additional
+    attributes:
+      label: 补充说明（可选）
+      description: 比如：遇到这个 bug 的业务场景、上下文。
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Feature Requests & Questions
+    url: https://github.com/antvis/G6/discussions
+    about: Please ask and answer questions here.
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -0,0 +1,21 @@
+<!--
+Thank you for your pull request. Please review below requirements.
+Bug fixes and new features should include tests and possibly benchmarks.
+Contributors guide: https://github.com/antvis/g6/blob/master/CONTRIBUTING.md
+
+感谢您贡献代码。请确认下列 checklist 的完成情况。
+Bug 修复和新功能必须包含测试，必要时请附上性能测试。
+Contributors guide: https://github.com/antvis/g6/blob/master/CONTRIBUTING.md
+-->
+
+##### Checklist
+
+<!-- Remove items that do not apply. For completed items, change [ ] to [x]. -->
+
+- [ ] `npm test` passes
+- [ ] tests and/or benchmarks are included
+- [ ] commit message follows commit guidelines
+
+##### Description of change
+
+<!-- Provide a description of the change below this comment. -->
--- a/.github/workflows/gitleaks.yml
+++ b/.github/workflows/gitleaks.yml
@ -0,0 +1,17 @@
+name: gitleaks
+
+on: [push,pull_request]
+
+jobs:
+  gitleaks:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        fetch-depth: '1'
+    - name: wget
+      uses: wei/wget@v1
+      with:
+        args: -O .gitleaks.toml https://raw.githubusercontent.com/ycjcl868/gitleaks/master/.gitleaks.toml
+    - name: gitleaks-action
+      uses: zricethezav/gitleaks-action@v1.6.0
--- a/.github/workflows/preview.yml
+++ b/.github/workflows/preview.yml
@ -0,0 +1,18 @@
+name: 🔂 Surge PR Preview
+
+on: pull_request
+
+jobs:
+  preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: afc163/surge-preview@v1
+        with:
+          surge_token: ${{ secrets.SURGE_TOKEN }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          build: |
+            npm install
+            npm run build
+            npm run site:build
+          dist: public
--- a/.github/workflows/rebase.yml
+++ b/.github/workflows/rebase.yml
@ -0,0 +1,17 @@
+on:
+  issue_comment:
+    types: [created]
+name: Automatic Rebase
+jobs:
+  rebase:
+    name: Rebase
+    if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/rebase')
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@master
+      with:
+        fetch-depth: 0
+    - name: Automatic Rebase
+      uses: cirrus-actions/rebase@1.3
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,88 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+yarn.lock
+es
+
+# lock
+package-lock.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+build
+dist
+temp
+.DS_Store
+.idea
+demos
+lib
+
+*.sw*
+*.un~
+
+# cache
+*.cache
+public
+
+esm
+
+es
+
+.github
+# .storybook
+.vscode/
+
+stats.json
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -0,0 +1,19 @@
+# 不要修改该文件, 会自动生成, 详见 http://gitlab.alibaba-inc.com/node/ci
+# 不要使用 ci 生成，直接按照 gitlab 文档自己写吧！
+before_script:
+  - export PATH=$PWD/node_modules/.bin:$PWD/.node/bin:$PATH
+  - time enclose install tnpm:tnpm
+  - tnpm -v
+stages:
+  - test
+
+# job1
+test:
+  image: reg.docker.alibaba-inc.com/dockerlab/node-ci:3.2.0
+  stage: test
+  script:
+    - env -u CI tnpm i --silent --internal-oss-cache --install-node=10
+    #   - tnpm run ci      ci 环境问题导致 electron 安装失败暂时跑不了
+    - tnpm run lint
+  tags:
+    - swarm
--- a/.npmignore
+++ b/.npmignore
@ -0,0 +1,83 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# lock
+package-lock.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+.DS_Store
+
+# npmignore - content above this line is automatically generated and modifications may be omitted
+# see npmjs.com/npmignore for more details.
+test
+
+*.sw*
+*.un~
+.idea
+bin
+demos
+docs
+temp
+webpack-dev.config.js
+webpack.config.js
+public
+.cache
+site
+examples
+gatsby-browser.js
+gatsby-config.js
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,10 @@
+.cache
+package.json
+package-lock.json
+public
+dist
+es
+lib
+.*
+*.png
+**/assets/**
--- a/.prettierrc.js
+++ b/.prettierrc.js
@ -0,0 +1,5 @@
+const fabric = require('@umijs/fabric');
+
+module.exports = {
+  ...fabric.prettier,
+};
--- a/.travis.yml
+++ b/.travis.yml
@ -0,0 +1,30 @@
+language: node_js
+
+node_js:
+  - '12'
+
+env:
+  - NODE_ENV=test
+
+addons:
+  apt:
+    packages:
+      - xvfb
+      - libgconf-2-4
+
+install:
+  - export DISPLAY=':99.0'
+  - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
+  - yarn
+
+script:
+  - |
+    if [ "$TEST_TYPE" = test ]; then
+      yarn ci && bash <(curl -s https://codecov.io/bash)
+    else
+      yarn $TEST_TYPE
+    fi
+env:
+  matrix:
+    - TEST_TYPE=lint
+    - TEST_TYPE=test
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,6 @@
+{
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    }
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Alipay.inc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.en-US.md
+++ b/README.en-US.md
@ -0,0 +1,170 @@
+# G6: A Graph Visualization Framework in TypeScript
+
+![](https://user-images.githubusercontent.com/6113694/45008751-ea465300-b036-11e8-8e2a-166cbb338ce2.png)
+
+[![travis-ci](https://img.shields.io/travis/antvis/g6/master.svg)](https://travis-ci.org/antvis/g6) [![codecov](https://codecov.io/gh/antvis/G6/branch/master/graph/badge.svg)](https://codecov.io/gh/antvis/G6) ![typescript](https://img.shields.io/badge/language-typescript-red.svg) ![MIT](https://img.shields.io/badge/license-MIT-000000.svg) [![npm package](https://img.shields.io/npm/v/@antv/g6.svg)](https://www.npmjs.com/package/@antv/g6) [![NPM downloads](http://img.shields.io/npm/dm/@antv/g6.svg)](https://npmjs.org/package/@antv/g6) [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g6.svg)](http://isitmaintained.com/project/antvis/g6 'Percentage of issues still open')
+
+[中文 README](README.md)
+
+## What is G6
+
+[G6](https://github.com/antvis/g6) is a graph visualization engine, which provides a set of basic mechanisms, including rendering, layout, analysis, interaction, animation, and other auxiliary tools. G6 aims to simplify the relationships, and help people to obtain the insight of relational data.
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zTjwQaXokeQAAAAAAAAAAABkARQnAQ' width=550 alt='' />
+
+Developers are able to build graph visualization **analysis** applications or graph visualization **modeling** applications easily.
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zau8QJcVpDQAAAAAAAAAAABkARQnAQ' height=200 alt='' /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*RIlETY_S6IoAAAAAAAAAAABkARQnAQ' height=200 alt='' />
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*cDzXR4jIWr8AAAAAAAAAAABkARQnAQ' height=150 alt='' /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*DifbSahOblAAAAAAAAAAAABkARQnAQ' height=150 alt='' /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*HTasSJGC4koAAAAAAAAAAABkARQnAQ' height=150 alt='' />
+
+> Powerful Animation and Interactions
+
+<img src="https://user-images.githubusercontent.com/6113694/44995293-02858600-afd5-11e8-840c-349e4730d63d.gif" height=150 alt='' /><img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*I9OdTbXJIi0AAAAAAAAAAABkARQnAQ" height=150 alt='' /><img src="https://user-images.githubusercontent.com/6113694/44995332-2ba61680-afd5-11e8-8cab-db0e9d08ceb7.gif" height=150 alt='' />
+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/HQxYguinFOMIXrGQOABY.gif" height=150 alt='' /><img src="https://gw.alipayobjects.com/zos/rmsportal/nAugyFgrbrUWPmDIDiQm.gif" height=150 alt='' /><img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*xoufSYcjK2AAAAAAAAAAAABkARQnAQ" height=150 alt='' />
+
+> Powerful Layouts
+
+## Features
+
+- Abundant Built-in Items: Nodes and edges with free configurations;
+- Steerable Interactions: More than 10 basic interaction behaviors ;
+- Powerful Layout: More than 10 layout algorithms;
+- Convenient Components: Outstanding ability and performance;
+- Friendly User Experience: Complete documents for different levels of user requirements. TypeScript supported.
+
+G6 concentrates on the principle of 'good by default'. In addition, the custom mechanism of the item, interation behavior, and layout satisfies the customazation requirements.
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Y0c6S7cxjVkAAAAAAAAAAABkARQnAQ' width=800 height=200 alt='' />
+
+> Abundant Built-in Items
+
+## Installation
+
+```bash
+$ npm install @antv/g6
+```
+
+## Usage
+
+<img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*khbvSrptr0kAAAAAAAAAAABkARQnAQ" width=437 height=148 alt='' />
+
+```js
+import G6 from '@antv/g6';
+
+const data = {
+  nodes: [
+    {
+      id: 'node1',
+      label: 'Circle1',
+      x: 150,
+      y: 150,
+    },
+    {
+      id: 'node2',
+      label: 'Circle2',
+      x: 400,
+      y: 150,
+    },
+  ],
+  edges: [
+    {
+      source: 'node1',
+      target: 'node2',
+    },
+  ],
+};
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  defaultNode: {
+    type: 'circle',
+    size: [100],
+    color: '#5B8FF9',
+    style: {
+      fill: '#9EC9FF',
+      lineWidth: 3,
+    },
+    labelCfg: {
+      style: {
+        fill: '#fff',
+        fontSize: 20,
+      },
+    },
+  },
+  defaultEdge: {
+    style: {
+      stroke: '#e2e2e2',
+    },
+  },
+});
+
+graph.data(data);
+graph.render();
+```
+
+[![Edit compassionate-lalande-5lxm7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark)
+
+For more information of the usage, please refer to [Getting Started](https://g6.antv.antgroup.com/en/manual/getting-started).
+
+## Development
+
+```bash
+$ npm install
+
+# lerna bootstrap for multiple packages
+$ npm run bootstrap
+
+# build the packages
+$ npm run build:all
+
+# if you wanna watch one of the packages, e.g. packages/core
+$ cd ./packages/core
+$ npm run watch
+
+# run test case
+$ npm test
+
+# run test case in watch mode
+npm test -- --watch ./tests/unit/algorithm/find-path-spec
+DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
+```
+
+## Documents
+
+- <a href='https://g6.antv.antgroup.com/en/manual/tutorial/preface' target='_blank'>Tutorial</a>
+- <a href='https://g6.antv.antgroup.com/en/manual/middle/overview' target='_blank'>Middle Guides</a>
+- <a href='https://g6.antv.antgroup.com/en/manual/advanced/coordinate-system' target='_blank'>Further Reading</a>
+- <a href='https://g6.antv.antgroup.com/en/api/graph' target='_blank'>API Reference</a>
+
+## React project integration
+
+For React project integration, we have an independent product recommendation: [Graphin](https://graphin.antv.vision), which is a toolkit based on G6 and React, that focuses on relational visual analysis. It's simple, efficient, out of the box.
+
+At present, Graphin has good practices in business graph analysis projects. For details, see [《Who uses Graphin》](https://github.com/antvis/Graphin/issues/212)
+
+## G6 Communication Group
+
+Welcome to join the **G6 Communication Group** or **G6 Communication Group-2** (DingTalk groups). We also welcome the github issues.
+
+<p>
+  <a href="https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*yCTQR78ipZEAAAAAAAAAAAAADmJ7AQ" >
+    <img src='https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*yCTQR78ipZEAAAAAAAAAAAAADmJ7AQ' style='width:250px;display:inline-block;vertical-align:top;' alt='' />
+  </a>
+  <a href="https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*WVxyRpjxrEMAAAAAAAAAAAAADmJ7AQ" >
+    <img src='https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*WVxyRpjxrEMAAAAAAAAAAAAADmJ7AQ' style='width:250px;display:inline-block;vertical-align:top;' alt='' />
+  </a>
+  <a href="https://graphin.antv.vision/" >
+   <img src='https://camo.githubusercontent.com/5e6624abcdde991f9fd89fce4933ad133a48d8fb603d1852c670da329df73ef7/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f6d646e2f726d735f3430326331612f616674732f696d672f412a2d717a6f54704c672d3163414141414141414141414141414152516e4151' style='width:250px;display:inline-block;vertical-align: top;' alt='' />
+  </a>
+</p>
+## How to Contribute
+
+Please let us know what you are you going to help. Do check out [issues](https://github.com/antvis/g6/issues) for bug reports or suggestions first.
+
+## License
+
+[MIT license](./LICENSE).
--- a/README.md
+++ b/README.md
@ -0,0 +1,177 @@
+# G6：图分析引擎
+
+![](https://user-images.githubusercontent.com/6113694/45008751-ea465300-b036-11e8-8e2a-166cbb338ce2.png)
+
+[![travis-ci](https://img.shields.io/travis/antvis/g6.svg)](https://travis-ci.org/antvis/g6) [![codecov](https://codecov.io/gh/antvis/G6/branch/master/graph/badge.svg)](https://codecov.io/gh/antvis/G6) ![typescript](https://img.shields.io/badge/language-typescript-red.svg) ![MIT](https://img.shields.io/badge/license-MIT-000000.svg) [![npm package](https://img.shields.io/npm/v/@antv/g6.svg)](https://www.npmjs.com/package/@antv/g6) [![NPM downloads](http://img.shields.io/npm/dm/@antv/g6.svg)](https://npmjs.org/package/@antv/g6) [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g6.svg)](http://isitmaintained.com/project/antvis/g6 'Percentage of issues still open')
+
+[English README](README.en-US.md)
+
+## 什么是 G6
+
+[G6](https://github.com/antvis/g6) 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zTjwQaXokeQAAAAAAAAAAABkARQnAQ' width=550 alt='' />
+
+基于 G6，用户可以快速搭建自己的 **图分析** 或 **图编辑** 应用。
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zau8QJcVpDQAAAAAAAAAAABkARQnAQ' height=200 alt='' /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*RIlETY_S6IoAAAAAAAAAAABkARQnAQ' height=200 alt='' />
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*cDzXR4jIWr8AAAAAAAAAAABkARQnAQ' height=150 alt='' /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*DifbSahOblAAAAAAAAAAAABkARQnAQ' height=150 /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*HTasSJGC4koAAAAAAAAAAABkARQnAQ' height=150 alt='' />
+
+> 强大的动画及交互
+
+<img src="https://user-images.githubusercontent.com/6113694/44995293-02858600-afd5-11e8-840c-349e4730d63d.gif" height=150 alt='' /><img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*I9OdTbXJIi0AAAAAAAAAAABkARQnAQ" height=150 alt='' /><img src="https://user-images.githubusercontent.com/6113694/44995332-2ba61680-afd5-11e8-8cab-db0e9d08ceb7.gif" height=150 alt='' />
+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/HQxYguinFOMIXrGQOABY.gif" height=150><img src="https://gw.alipayobjects.com/zos/rmsportal/nAugyFgrbrUWPmDIDiQm.gif" height=150 alt='' /><img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*xoufSYcjK2AAAAAAAAAAAABkARQnAQ" height=150 alt='' />
+
+> 强大的布局
+
+## G6 的特性
+
+G6 作为一款专业的图可视化引擎，具有以下特性：
+
+- 丰富的元素：内置丰富的节点与边元素，自由配置，支持自定义；
+- 可控的交互：内置 10+ 交互行为，支持自定义交互；
+- 强大的布局：内置了 10+ 常用的图布局，支持自定义布局；
+- 便捷的组件：优化内置组件功能及性能；
+- 友好的体验：根据用户需求分层梳理文档，支持 TypeScript 类型推断。
+
+除了默认好用、配置自由的内置功能，元素、交互、布局均具有高可扩展的自定义机制。
+
+<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Y0c6S7cxjVkAAAAAAAAAAABkARQnAQ' width=800 height=200 alt='' />
+
+> 丰富的图元素
+
+## 安装
+
+```bash
+$ npm install @antv/g6
+```
+
+## 使用
+
+<img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*khbvSrptr0kAAAAAAAAAAABkARQnAQ" width=437 height=148 alt='' />
+
+```js
+import G6 from '@antv/g6';
+
+const data = {
+  nodes: [
+    {
+      id: 'node1',
+      label: 'Circle1',
+      x: 150,
+      y: 150,
+    },
+    {
+      id: 'node2',
+      label: 'Circle2',
+      x: 400,
+      y: 150,
+    },
+  ],
+  edges: [
+    {
+      source: 'node1',
+      target: 'node2',
+    },
+  ],
+};
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  defaultNode: {
+    type: 'circle',
+    size: [100],
+    color: '#5B8FF9',
+    style: {
+      fill: '#9EC9FF',
+      lineWidth: 3,
+    },
+    labelCfg: {
+      style: {
+        fill: '#fff',
+        fontSize: 20,
+      },
+    },
+  },
+  defaultEdge: {
+    style: {
+      stroke: '#e2e2e2',
+    },
+  },
+});
+
+graph.data(data);
+graph.render();
+```
+
+[![Edit compassionate-lalande-5lxm7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark)
+
+更多关于 G6 使用的问题，请参考[快速上手](https://g6.antv.antgroup.com/manual/getting-started)。
+
+## 开发
+
+```bash
+$ npm install
+
+# lerna bootstrap for multiple packages
+$ npm run bootstrap
+
+# build the packages
+$ npm run build:all
+
+# if you wanna watch one of the packages, e.g. packages/core
+$ cd ./packages/core
+$ npm run watch
+
+# run test case
+$ npm test
+
+# run test case in watch mode
+npm test -- --watch ./tests/unit/algorithm/find-path-spec
+DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
+```
+
+## 文档
+
+- <a href='https://g6.antv.antgroup.com/manual/tutorial/preface' target='_blank'>入门教程</a>
+- <a href='https://g6.antv.antgroup.com/manual/middle/overview' target='_blank'>核心概念</a>
+- <a href='https://g6.antv.antgroup.com/manual/advanced/coordinate-system' target='_blank'>扩展阅读</a>
+- <a href='https://g6.antv.antgroup.com/api/graph' target='_blank'>API</a>
+
+## React 项目集成
+
+针对 React 项目集成，我们有一款单独的产品推荐：[Graphin](https://graphin.antv.vision)，它是基于 G6 封装的 React 组件库，专注在关系分析领域，简单高效，开箱即用。
+
+目前 Graphin 在商业图分析项目中均有良好的实践，具体查看[《谁在使用 Graphin》](https://github.com/antvis/Graphin/issues/212)
+
+## G6 图可视化交流群
+
+欢迎各界 G6 使用者、图可视化爱好者加入 **G6 图可视化交流群** 及 **G6 图可视化交流二群**（钉钉群，使用钉钉扫一扫加入）讨论与交流。Graphin 的使用者，爱好者请加入 **Graphin's Group Chat**
+
+> **G6 图可视化交流群** 已满员，该群会不定期移除不活跃的成员。
+
+> 由于维护精力有限，**G6 图可视化交流群** 仅供社区同学相互交流，不进行答疑。欢迎对 G6 感兴趣的同学加入到答疑中来，非常感谢！
+
+<p >
+  <a href="https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*yCTQR78ipZEAAAAAAAAAAAAADmJ7AQ" >
+    <img src='https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*yCTQR78ipZEAAAAAAAAAAAAADmJ7AQ' style='width:250px;display:inline-block;vertical-align:top;' alt='' />
+  </a>
+  <a href="https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*WVxyRpjxrEMAAAAAAAAAAAAADmJ7AQ" >
+    <img src='https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*WVxyRpjxrEMAAAAAAAAAAAAADmJ7AQ' style='width:250px;display:inline-block;vertical-align:top;' alt='' />
+  </a>
+  <a href="https://graphin.antv.vision/" >
+   <img src='https://camo.githubusercontent.com/5e6624abcdde991f9fd89fce4933ad133a48d8fb603d1852c670da329df73ef7/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f6d646e2f726d735f3430326331612f616674732f696d672f412a2d717a6f54704c672d3163414141414141414141414141414152516e4151' style='width:250px;display:inline-block;vertical-align: top;' alt='' />
+  </a>
+</p>
+
+## 如何贡献
+
+请让我们知道您要解决或贡献什么，所以在贡献之前请先提交 [issues](https://github.com/antvis/g6/issues) 描述 bug 或建议。
+
+## License
+
+[MIT license](./LICENSE).
--- a/lerna.json
+++ b/lerna.json
@ -0,0 +1,29 @@
+{
+  "version": "*",
+  "npmClient": "yarn",
+  "packages": ["packages/*"],
+  "useWorkspaces": true,
+  "command": {
+    "version": {
+      "ignoreChanges": ["*.md", "**/*.test.ts", "**/*.spec.ts"],
+      "message": "chore(release): publish"
+    },
+    "bootstrap": {
+      "npmClientArgs": ["--no-package-lock", "--no-ci"]
+    }
+  },
+  "changelog": {
+    "labels": {
+      "pr(fix)": ":bug: Bug Fix",
+      "pr(chore)": ":turtle: Chore",
+      "pr(feature)": ":tada: New feature",
+      "pr(breaking)": ":boom: Breaking Change",
+      "pr(internal)": ":house: Internal",
+      "pr(dependency)": ":shamrock: Dependency",
+      "pr(documentation)": ":book: Documentation",
+      "pr(enhancement)": ":rocket: Enhancement",
+      "pr(refactor)": ":100: Refactoring",
+      "pr(test)": ":white_check_mark: Test Case"
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,90 @@
+{
+  "name": "g6",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "build:demos": "cd ./packages/pc && npm run demos",
+    "build:site": "cd ./packages/site && npm run start",
+    "build:core": "cd ./packages/core && npm run build",
+    "build:element": "cd ./packages/element && npm run build",
+    "build:plugin": "cd ./packages/plugin && npm run build",
+    "build:pc": "cd ./packages/pc && npm run build",
+    "build:g6": "cd ./packages/g6 && npm run build",
+    "build:react-node": "cd ./packages/react-node && npm run build",
+    "build:all": "npm run build:core && npm run build:element && npm run build:plugin && npm run build:pc && npm run build:g6",
+    "lint:core": "cd ./packages/core && npm run lint",
+    "lint:element": "cd ./packages/element && npm run lint",
+    "lint:plugin": "cd ./packages/plugin && npm run lint",
+    "lint:pc": "cd ./packages/pc && npm run lint",
+    "lint:g6": "cd ./packages/g6 && npm run lint",
+    "lint:all": "npm run lint:core && npm run lint:element && npm run lint:plugin && npm run lint:pc && npm run lint:g6",
+    "build": "lerna run build --include-dependencies --stream",
+    "lint": "npm run lint:all",
+    "test:core": "cd ./packages/core && npm run test",
+    "test:element": "cd ./packages/element && npm run test",
+    "test:plugin": "cd ./packages/plugin && npm run test",
+    "test:pc": "cd ./packages/pc && npm run test",
+    "test": "npm run test:core && npm run test:element && npm run test:plugin && npm run test:pc",
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "pretty-quick": "pretty-quick",
+    "clean": "lerna clean -y",
+    "clear": "lerna clean && lerna clean -y",
+    "clean:modules": "rimraf node_modules",
+    "bootstrap": "lerna bootstrap",
+    "ci": "npm run clean && npm run clean:modules && npm install && npm run bootstrap && npm run build:all && npm run lint:all && npm run test",
+    "ls": "lerna list"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged && lerna run --concurrency 1 --stream precommit"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,tsx,ts,less,md,json}": [
+      "pretty-quick —-staged"
+    ]
+  },
+  "dependencies": {
+    "eslint": "^7.11.0",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-plugin-import": "^2.22.1",
+    "husky": "^4.2.5",
+    "lerna": "^3.19.0",
+    "lint-staged": "^10.2.2",
+    "monaco-editor": "0.29.1",
+    "monaco-editor-webpack-plugin": "5.0.0",
+    "normalize-url": "^7.0.3",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.1.2",
+    "pretty-quick": "^3.0.2",
+    "react-monaco-editor": "0.40.0",
+    "rimraf": "^3.0.0",
+    "tslint": "^6.1.3",
+    "tslint-config-airbnb": "^5.11.2",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-eslint-rules": "^5.4.0",
+    "typescript": "^4.6.3"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "@umijs/fabric": "^2.3.1",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-unicorn": "^27.0.0",
+    "pre-commit": "^1.2.2",
+    "react-scripts": "3.1.2"
+  },
+  "resolutions": {
+    "@types/react": "^16.9.35",
+    "monaco-editor": "0.29.1",
+    "monaco-editor-webpack-plugin": "5.0.0",
+    "react-monaco-editor": "^0.40.0",
+    "normalize-url": "^4.1.0",
+    "sharp": "^0.30.4"
+  }
+}
--- a/packages/core/.eslintignore
+++ b/packages/core/.eslintignore
@ -0,0 +1,22 @@
+build/
+coverage/
+lib/
+dist/
+mocks/
+node_modules/
+demos/
+.cache
+public
+bin
+esm/
+es/
+examples/
+tests/
+stories/
+gatsby-browser.js
+site/
+webpack.*.js
+gatsby-*.js
+global.d.ts
+jest.config.js
+.eslintrc.*
--- a/packages/core/.fatherrc.js
+++ b/packages/core/.fatherrc.js
@ -0,0 +1,5 @@
+export default {
+  entry: './src/index.ts',
+  esm: 'babel',
+  cjs: 'babel',
+};
--- a/packages/core/.npmignore
+++ b/packages/core/.npmignore
@ -0,0 +1,83 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# lock
+package-lock.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+.DS_Store
+
+# npmignore - content above this line is automatically generated and modifications may be omitted
+# see npmjs.com/npmignore for more details.
+test
+
+*.sw*
+*.un~
+.idea
+bin
+demos
+docs
+temp
+webpack-dev.config.js
+webpack.config.js
+public
+.cache
+site
+examples
+gatsby-browser.js
+gatsby-config.js
--- a/packages/core/jest.config.js
+++ b/packages/core/jest.config.js
@ -0,0 +1,19 @@
+module.exports = {
+  runner: 'jest-electron/runner',
+  testEnvironment: 'jest-electron/environment',
+  preset: 'ts-jest',
+  collectCoverage: false,
+  collectCoverageFrom: ['src/**/*.{ts,js}', '!**/node_modules/**', '!**/vendor/**'],
+  testRegex: '/tests/.*-spec\\.ts?$',
+  moduleDirectories: ['node_modules', 'src'],
+  moduleFileExtensions: ['js', 'ts', 'json'],
+  moduleNameMapper: {
+    '@g6/types': '<rootDir>/types',
+    '@g6/(.*)': '<rootDir>/src/$1',
+  },
+  globals: {
+    'ts-jest': {
+      diagnostics: false,
+    },
+  },
+};
--- a/packages/core/package.json
+++ b/packages/core/package.json
@ -0,0 +1,85 @@
+{
+  "name": "@antv/g6-core",
+  "version": "5.0.0",
+  "description": "A Graph Visualization Framework in JavaScript",
+  "keywords": [
+    "antv",
+    "g6",
+    "graph",
+    "graph analysis",
+    "graph editor",
+    "graph visualization",
+    "relational data"
+  ],
+  "homepage": "https://g6.antv.antgroup.com/",
+  "bugs": {
+    "url": "https://github.com/antvis/g6/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antvis/g6"
+  },
+  "license": "MIT",
+  "author": "https://github.com/orgs/antvis/people",
+  "files": [
+    "package.json",
+    "es",
+    "lib",
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "start": "father build --watch",
+    "build": "npm run clean && father build",
+    "ci": "npm run build && npm run coverage",
+    "clean": "rimraf es lib",
+    "coverage": "jest --coverage",
+    "doc": "rimraf apis && typedoc",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx --format=pretty \"./\"",
+    "lint:src": "eslint --ext .ts --format=pretty \"./src\"",
+    "prettier": "prettier -c --write \"**/*\"",
+    "test": "jest",
+    "test-live": "DEBUG_MODE=1 jest --watch  ./tests/unit/graph/graph-spec.ts",
+    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
+    "watch": "father build -w"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged & npm run test"
+    }
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "npm run lint-staged:js"
+    ]
+  },
+  "dependencies": {
+  },
+  "devDependencies": {
+    "@types/jest": "^25.2.1",
+    "@types/node": "13.11.1",
+    "@typescript-eslint/eslint-plugin": "^4.11.1",
+    "@umijs/fabric": "^2.0.0",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.0.6",
+    "eslint": "^7.7.0",
+    "event-simulate": "~1.0.0",
+    "father": "^2.29.1",
+    "husky": "^4.2.5",
+    "jest": "^26.0.1",
+    "jest-electron": "^0.1.7",
+    "jest-extended": "^0.11.2",
+    "lint-staged": "^10.2.11",
+    "pre-commit": "^1.2.2",
+    "prettier": "^2.0.5",
+    "rimraf": "^3.0.0",
+    "ts-jest": "^24.1.0",
+    "ts-loader": "^7.0.3",
+    "typescript": "^4.6.3",
+    "stats-js": "^1.0.1"
+  }
+}
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@ -0,0 +1,5 @@
+export * from './types';
+
+export {};
+
+export default {};
--- a/packages/core/src/interface/index.ts
+++ b/packages/core/src/interface/index.ts
@ -0,0 +1,4 @@
+export * from './graph';
+export * from './behavior';
+export * from './item';
+export * from './shape';
--- a/packages/core/src/types/index.ts
+++ b/packages/core/src/types/index.ts
--- a/packages/core/src/util/index.ts
+++ b/packages/core/src/util/index.ts
@ -0,0 +1,2 @@
+const Util = { };
+export default Util;
--- a/packages/core/tests/unit/template-spec.ts
+++ b/packages/core/tests/unit/template-spec.ts
@ -0,0 +1,10 @@
+describe('template', () => {
+  const el = document.createElement('div');
+  el.id = 'test-div-id';
+  el.innerHTML = 'hello g6';
+  document.querySelector('body').appendChild(el);
+
+  it('div content', () => {
+    expect(document.querySelector('#test-div-id').innerHTML).toBe('hello g6');
+  });
+});
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "rootDir": "./",
+    "module": "esnext",
+    "declaration": true,
+    "sourceMap": true,
+    "target": "es5",
+    "outDir": "lib",
+    "jsx": "react",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": ["jest"],
+    "skipLibCheck": true
+  },
+  "include": ["src", "tests"],
+  "typedocOptions": {
+    "mode": "modules",
+    "out": "docs/api-ts",
+    "excludePrivate": true,
+    "excludeProtected": true,
+    "excludeExternals": true,
+    "plugin": "typedoc-plugin-markdown",
+    "theme": "docusaurus2"
+  }
+}
--- a/packages/element/.eslintignore
+++ b/packages/element/.eslintignore
@ -0,0 +1,12 @@
+lib/
+dist/
+node_modules/
+bin
+esm/
+es/
+tests/
+webpack.*.js
+gatsby-*.js
+global.d.ts
+jest.config.js
+.eslintrc.*
--- a/packages/element/.fatherrc.js
+++ b/packages/element/.fatherrc.js
@ -0,0 +1,5 @@
+export default {
+  entry: './src/index.ts',
+  esm: 'babel',
+  cjs: 'babel',
+};
--- a/packages/element/.npmignore
+++ b/packages/element/.npmignore
@ -0,0 +1,83 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# lock
+package-lock.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+.DS_Store
+
+# npmignore - content above this line is automatically generated and modifications may be omitted
+# see npmjs.com/npmignore for more details.
+test
+
+*.sw*
+*.un~
+.idea
+bin
+demos
+docs
+temp
+webpack-dev.config.js
+webpack.config.js
+public
+.cache
+site
+examples
+gatsby-browser.js
+gatsby-config.js
--- a/packages/element/.prettierignore
+++ b/packages/element/.prettierignore
@ -0,0 +1,8 @@
+package.json
+package-lock.json
+dist
+es
+lib
+.*
+*.png
+**/assets/**
--- a/packages/element/.prettierrc.js
+++ b/packages/element/.prettierrc.js
@ -0,0 +1,5 @@
+const fabric = require('@umijs/fabric');
+
+module.exports = {
+  ...fabric.prettier,
+};
--- a/packages/element/jest.config.js
+++ b/packages/element/jest.config.js
@ -0,0 +1,19 @@
+module.exports = {
+  runner: 'jest-electron/runner',
+  testEnvironment: 'jest-electron/environment',
+  preset: 'ts-jest',
+  collectCoverage: false,
+  collectCoverageFrom: ['src/**/*.{ts,js}', '!**/node_modules/**', '!**/vendor/**'],
+  testRegex: '/tests/.*-spec\\.ts?$',
+  moduleDirectories: ['node_modules', 'src'],
+  moduleFileExtensions: ['js', 'ts', 'json'],
+  moduleNameMapper: {
+    '@g6/types': '<rootDir>/types',
+    '@g6/(.*)': '<rootDir>/src/$1',
+  },
+  globals: {
+    'ts-jest': {
+      diagnostics: false,
+    },
+  },
+};
--- a/packages/element/package.json
+++ b/packages/element/package.json
@ -0,0 +1,89 @@
+{
+  "name": "@antv/g6-element",
+  "version": "0.8.0",
+  "description": "A Graph Visualization Framework in JavaScript",
+  "keywords": [
+    "antv",
+    "g6",
+    "graph",
+    "graph analysis",
+    "graph editor",
+    "graph visualization",
+    "relational data"
+  ],
+  "homepage": "https://g6.antv.antgroup.com",
+  "bugs": {
+    "url": "https://github.com/antvis/g6/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antvis/g6"
+  },
+  "license": "MIT",
+  "author": "https://github.com/orgs/antvis/people",
+  "files": [
+    "package.json",
+    "es",
+    "lib",
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "npm run clean && father build",
+    "ci": "npm run build && npm run coverage",
+    "clean": "rimraf es esm lib dist",
+    "coverage": "jest --coverage",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx --format=pretty \"./\"",
+    "lint:src": "eslint --ext .ts --format=pretty \"./src\"",
+    "prettier": "prettier -c --write \"**/*\"",
+    "test": "jest",
+    "test-live": "DEBUG_MODE=1 jest --watch  ./tests/unit/graph/graph-watermarker-spec.ts",
+    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
+    "watch": "father build -w"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "npm run lint-staged:js",
+      "prettier --write"
+    ],
+    "**/*.{less,md,json}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@antv/g6-core": "*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.7",
+    "@types/jest": "^25.2.1",
+    "@types/node": "13.11.1",
+    "@typescript-eslint/eslint-plugin": "^4.11.1",
+    "@umijs/fabric": "^2.0.0",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.0.6",
+    "eslint": "^7.7.0",
+    "event-simulate": "~1.0.0",
+    "father": "^2.29.1",
+    "husky": "^4.2.5",
+    "jest": "^26.0.1",
+    "jest-electron": "^0.1.7",
+    "jest-extended": "^0.11.2",
+    "lint-staged": "^10.2.11",
+    "pre-commit": "^1.2.2",
+    "prettier": "^2.0.5",
+    "rimraf": "^3.0.0",
+    "ts-jest": "^24.1.0",
+    "ts-loader": "^7.0.3",
+    "typescript": "^4.6.3",
+    "@antv/g6": "4.5.1"
+  }
+}
--- a/packages/element/src/edges/index.ts
+++ b/packages/element/src/edges/index.ts
--- a/packages/element/src/index.ts
+++ b/packages/element/src/index.ts
@ -0,0 +1,2 @@
+import './nodes';
+import './edges';
--- a/packages/element/src/nodes/index.ts
+++ b/packages/element/src/nodes/index.ts
--- a/packages/element/tsconfig.json
+++ b/packages/element/tsconfig.json
@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "rootDir": "./",
+    "module": "esnext",
+    "declaration": true,
+    "sourceMap": true,
+    "target": "es5",
+    "outDir": "lib",
+    "jsx": "react",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": ["jest"],
+    "skipLibCheck": true
+  },
+  "include": ["src", "tests"],
+  "typedocOptions": {
+    "mode": "modules",
+    "out": "docs/api-ts",
+    "excludePrivate": true,
+    "excludeProtected": true,
+    "excludeExternals": true,
+    "plugin": "typedoc-plugin-markdown",
+    "theme": "docusaurus2"
+  }
+}
--- a/packages/g6/.babelrc.js
+++ b/packages/g6/.babelrc.js
@ -0,0 +1,26 @@
+module.exports = api => {
+  api.cache(() => process.env.NODE_ENV);
+
+  if (process.env.GATSBY === 'true') {
+    return {
+      presets: ['@babel/preset-env', 'babel-preset-gatsby'],
+    };
+  }
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          loose: true,
+          modules: false,
+        },
+      ],
+      '@babel/preset-react',
+      {
+        "plugins": [
+          "@babel/plugin-proposal-class-properties"
+        ]
+      }
+    ]
+  };
+};
--- a/packages/g6/.eslintignore
+++ b/packages/g6/.eslintignore
@ -0,0 +1,12 @@
+lib/
+dist/
+node_modules/
+bin
+esm/
+es/
+tests/
+webpack.*.js
+gatsby-*.js
+global.d.ts
+jest.config.js
+.eslintrc.*
--- a/packages/g6/.fatherrc.js
+++ b/packages/g6/.fatherrc.js
@ -0,0 +1,5 @@
+export default {
+  entry: './src/index.ts',
+  esm: 'babel',
+  cjs: 'babel',
+};
--- a/packages/g6/.npmignore
+++ b/packages/g6/.npmignore
@ -0,0 +1,83 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# lock
+package-lock.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+.DS_Store
+
+# npmignore - content above this line is automatically generated and modifications may be omitted
+# see npmjs.com/npmignore for more details.
+test
+
+*.sw*
+*.un~
+.idea
+bin
+demos
+docs
+temp
+webpack-dev.config.js
+webpack.config.js
+public
+.cache
+site
+examples
+gatsby-browser.js
+gatsby-config.js
--- a/packages/g6/package.json
+++ b/packages/g6/package.json
@ -0,0 +1,90 @@
+{
+  "name": "@antv/g6",
+  "version": "5.0.0",
+  "description": "A Graph Visualization Framework in JavaScript",
+  "keywords": [
+    "antv",
+    "g6",
+    "graph",
+    "graph analysis",
+    "graph editor",
+    "graph visualization",
+    "relational data"
+  ],
+  "homepage": "https://g6.antv.antgroup.com",
+  "bugs": {
+    "url": "https://github.com/antvis/g6/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antvis/g6"
+  },
+  "license": "MIT",
+  "author": "https://github.com/orgs/antvis/people",
+  "files": [
+    "package.json",
+    "es",
+    "lib",
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "unpkg": "dist/g6.min.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "start": "father build --watch",
+    "build": "npm run clean && father build && npm run build:umd",
+    "build:umd": "webpack --config webpack.config.js --mode production",
+    "ci": "npm run build && npm run coverage",
+    "clean": "rimraf es esm lib dist",
+    "coverage": "jest --coverage",
+    "doc": "rimraf apis && typedoc",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx --format=pretty \"./\"",
+    "lint:src": "eslint --ext .ts --format=pretty \"./src\"",
+    "prettier": "prettier -c --write \"**/*\"",
+    "test": "jest --passWithNoTests",
+    "test-live": "DEBUG_MODE=1 jest --watch  ./tests/unit/graph/graph-watermarker-spec.ts",
+    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
+    "watch": "father build -w",
+    "cdn": "antv-bin upload -n @antv/g6"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "npm run lint-staged:js",
+      "prettier --write"
+    ],
+    "**/*.{less,md,json}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@antv/g6-pc": "*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.7",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@types/jest": "^25.2.1",
+    "@types/node": "13.11.1",
+    "@typescript-eslint/eslint-plugin": "^4.11.1",
+    "@umijs/fabric": "^2.0.0",
+    "babel-loader": "^8.0.6",
+    "eslint": "^7.7.0",
+    "father": "^2.29.1",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.11",
+    "pre-commit": "^1.2.2",
+    "prettier": "^2.0.5",
+    "rimraf": "^3.0.0",
+    "ts-loader": "^7.0.3",
+    "typescript": "^4.6.3",
+    "webpack": "^4.41.4",
+    "webpack-cli": "^3.3.10"
+  }
+}
--- a/packages/g6/src/index.ts
+++ b/packages/g6/src/index.ts
@ -0,0 +1,7 @@
+import G6 from '@antv/g6-pc';
+
+G6.version = '5.0.0';
+
+export * from '@antv/g6-pc';
+export default G6;
+export const version = '5.0.0';
--- a/packages/g6/tsconfig.json
+++ b/packages/g6/tsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "rootDir": "./",
+    "module": "esnext",
+    "declaration": true,
+    "sourceMap": true,
+    "target": "es5",
+    "outDir": "lib",
+    "jsx": "react",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}
--- a/packages/g6/webpack.config.js
+++ b/packages/g6/webpack.config.js
@ -0,0 +1,47 @@
+const webpack = require('webpack');
+// eslint-disable-next-line prefer-destructuring
+const resolve = require('path').resolve;
+
+module.exports = {
+  entry: {
+    g6: './src/index.ts',
+  },
+  output: {
+    filename: '[name].min.js',
+    library: 'G6',
+    libraryTarget: 'umd',
+    libraryExport: 'default',
+    path: resolve(process.cwd(), 'dist/'),
+    globalObject: 'this',
+  },
+  resolve: {
+    // Add `.ts` as a resolvable extension.
+    extensions: ['.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            // babelrc: true,
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+      {
+        test: /\.ts$/,
+        use: {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true,
+          },
+        },
+      },
+    ],
+  },
+  plugins: [new webpack.NoEmitOnErrorsPlugin(), new webpack.optimize.AggressiveMergingPlugin()],
+  devtool: 'source-map',
+};
--- a/packages/g6/webpack.dev.config.js
+++ b/packages/g6/webpack.dev.config.js
@ -0,0 +1,14 @@
+const webpackConfig = require('./webpack.config');
+
+module.exports = Object.assign(
+  {
+    devtool: 'cheap-source-map',
+    watch: true,
+    watchOptions: {
+      aggregateTimeout: 300,
+      poll: 1000,
+      ignored: /node_modules/,
+    },
+  },
+  webpackConfig,
+);
--- a/packages/pc/.babelrc.js
+++ b/packages/pc/.babelrc.js
@ -0,0 +1,26 @@
+module.exports = api => {
+  api.cache(() => process.env.NODE_ENV);
+
+  if (process.env.GATSBY === 'true') {
+    return {
+      presets: ['@babel/preset-env', 'babel-preset-gatsby'],
+    };
+  }
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          loose: true,
+          modules: false,
+        },
+      ],
+      '@babel/preset-react',
+      {
+        "plugins": [
+          "@babel/plugin-proposal-class-properties"
+        ]
+      }
+    ]
+  };
+};
--- a/packages/pc/.eslintignore
+++ b/packages/pc/.eslintignore
@ -0,0 +1,12 @@
+lib/
+dist/
+node_modules/
+bin
+esm/
+es/
+tests/
+webpack.*.js
+gatsby-*.js
+global.d.ts
+jest.config.js
+.eslintrc.*
--- a/packages/pc/.fatherrc.js
+++ b/packages/pc/.fatherrc.js
@ -0,0 +1,5 @@
+export default {
+  entry: './src/index.ts',
+  esm: 'babel',
+  cjs: 'babel',
+};
--- a/packages/pc/.npmignore
+++ b/packages/pc/.npmignore
@ -0,0 +1,83 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# lock
+package-lock.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+.DS_Store
+
+# npmignore - content above this line is automatically generated and modifications may be omitted
+# see npmjs.com/npmignore for more details.
+test
+
+*.sw*
+*.un~
+.idea
+bin
+demos
+docs
+temp
+webpack-dev.config.js
+webpack.config.js
+public
+.cache
+site
+examples
+gatsby-browser.js
+gatsby-config.js
--- a/packages/pc/global.d.ts
+++ b/packages/pc/global.d.ts
@ -0,0 +1,4 @@
+declare module '*.json' {
+  export const version: string;
+  export const value: any;
+}
--- a/packages/pc/jest.config.js
+++ b/packages/pc/jest.config.js
@ -0,0 +1,19 @@
+module.exports = {
+  runner: 'jest-electron/runner',
+  testEnvironment: 'jest-electron/environment',
+  preset: 'ts-jest',
+  collectCoverage: false,
+  collectCoverageFrom: ['src/**/*.{ts,js}', '!**/node_modules/**', '!**/vendor/**'],
+  testRegex: '/tests/.*-spec\\.ts?$',
+  moduleDirectories: ['node_modules', 'src'],
+  moduleFileExtensions: ['js', 'ts', 'json'],
+  moduleNameMapper: {
+    '@g6/types': '<rootDir>/types',
+    '@g6/(.*)': '<rootDir>/src/$1',
+  },
+  globals: {
+    'ts-jest': {
+      diagnostics: false,
+    },
+  },
+};
--- a/packages/pc/package.json
+++ b/packages/pc/package.json
@ -0,0 +1,103 @@
+{
+  "name": "@antv/g6-pc",
+  "version": "0.8.0",
+  "description": "A Graph Visualization Framework in JavaScript",
+  "keywords": [
+    "antv",
+    "g6",
+    "graph",
+    "graph analysis",
+    "graph editor",
+    "graph visualization",
+    "relational data"
+  ],
+  "homepage": "https://g6.antv.antgroup.com",
+  "bugs": {
+    "url": "https://github.com/antvis/g6/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antvis/g6"
+  },
+  "license": "MIT",
+  "author": "https://github.com/orgs/antvis/people",
+  "files": [
+    "package.json",
+    "es",
+    "lib",
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "unpkg": "dist/g6.min.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "start": "father build --watch",
+    "build": "npm run clean && father build && npm run build:umd",
+    "build:umd": "webpack --config webpack.config.js --mode production",
+    "build:umd:profile": "webpack --config webpack.config.js --mode production --profile --json > stats.json",
+    "ci": "npm run build && npm run coverage",
+    "clean": "rimraf es esm lib dist",
+    "coverage": "jest --coverage",
+    "doc": "rimraf apis && typedoc",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx --format=pretty \"./\"",
+    "lint:src": "eslint --ext .ts --format=pretty \"./src\"",
+    "prettier": "prettier -c --write \"**/*\"",
+    "test": "jest",
+    "test-live": "DEBUG_MODE=1 jest --watch  ./tests/unit/layout/pipes-spec.ts",
+    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
+    "watch": "father build -w",
+    "cdn": "antv-bin upload -n @antv/g6"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "npm run lint-staged:js",
+      "prettier --write"
+    ],
+    "**/*.{less,md,json}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@antv/g6-core": "*",
+    "@antv/g6-element": "*",
+    "@antv/g6-plugin": "*",
+    "@antv/hierarchy": "^0.6.7",
+    "@antv/algorithm": "^0.1.8",
+    "@antv/layout": "^0.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.7",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/preset-react": "^7.7.4",
+    "@types/jest": "^25.2.1",
+    "@types/node": "13.11.1",
+    "@typescript-eslint/eslint-plugin": "^4.11.1",
+    "@umijs/fabric": "^2.0.0",
+    "babel-loader": "^8.0.6",
+    "eslint": "^7.7.0",
+    "father": "^2.29.1",
+    "husky": "^4.2.5",
+    "jest": "^26.0.1",
+    "jest-electron": "^0.1.7",
+    "jest-extended": "^0.11.2",
+    "lint-staged": "^10.2.11",
+    "pre-commit": "^1.2.2",
+    "prettier": "^2.0.5",
+    "rimraf": "^3.0.0",
+    "ts-jest": "^24.1.0",
+    "ts-loader": "^7.0.3",
+    "typescript": "^4.6.3",
+    "webpack": "^4.41.4",
+    "webpack-cli": "^3.3.10",
+    "worker-loader": "^3.0.0",
+    "stats-js": "1.0.1"
+  }
+}
--- a/packages/pc/src/index.ts
+++ b/packages/pc/src/index.ts
@ -0,0 +1,3 @@
+export {};
+
+export default {};
--- a/packages/pc/tests/unit/template-spec.ts
+++ b/packages/pc/tests/unit/template-spec.ts
@ -0,0 +1,10 @@
+describe('template', () => {
+  const el = document.createElement('div');
+  el.id = 'test-div-id';
+  el.innerHTML = 'hello g6';
+  document.querySelector('body').appendChild(el);
+
+  it('div content', () => {
+    expect(document.querySelector('#test-div-id').innerHTML).toBe('hello g6');
+  });
+});
--- a/packages/pc/tsconfig.json
+++ b/packages/pc/tsconfig.json
@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "rootDir": "./",
+    "module": "esnext",
+    "declaration": true,
+    "sourceMap": true,
+    "target": "es5",
+    "outDir": "lib",
+    "jsx": "react",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "types": [
+      "jest"
+    ],
+    "skipLibCheck": true
+  },
+  "include": [
+    "src",
+    "tests"
+  ],
+  "typedocOptions": {
+    "mode": "modules",
+    "out": "docs/api-ts",
+    "excludePrivate": true,
+    "excludeProtected": true,
+    "excludeExternals": true,
+    "plugin": "typedoc-plugin-markdown",
+    "theme": "docusaurus2"
+  }
+}
--- a/packages/pc/webpack.config.js
+++ b/packages/pc/webpack.config.js
@ -0,0 +1,47 @@
+const webpack = require('webpack');
+// eslint-disable-next-line prefer-destructuring
+const resolve = require('path').resolve;
+
+module.exports = {
+  entry: {
+    g6: './src/index.ts',
+  },
+  output: {
+    filename: '[name].min.js',
+    library: 'G6',
+    libraryTarget: 'umd',
+    libraryExport: 'default',
+    path: resolve(process.cwd(), 'dist/'),
+    globalObject: 'this',
+  },
+  resolve: {
+    // Add `.ts` as a resolvable extension.
+    extensions: ['.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            // babelrc: true,
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+      {
+        test: /\.ts$/,
+        use: {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true,
+          },
+        },
+      },
+    ],
+  },
+  plugins: [new webpack.NoEmitOnErrorsPlugin(), new webpack.optimize.AggressiveMergingPlugin()],
+  devtool: 'source-map',
+};
--- a/packages/pc/webpack.dev.config.js
+++ b/packages/pc/webpack.dev.config.js
@ -0,0 +1,14 @@
+const webpackConfig = require('./webpack.config');
+
+module.exports = Object.assign(
+  {
+    devtool: 'cheap-source-map',
+    watch: true,
+    watchOptions: {
+      aggregateTimeout: 300,
+      poll: 1000,
+      ignored: /node_modules/
+    },
+  },
+  webpackConfig,
+);
--- a/packages/plugin/.eslintignore
+++ b/packages/plugin/.eslintignore
@ -0,0 +1,15 @@
+lib/
+dist/
+mocks/
+node_modules/
+demos/
+.cache
+public
+bin
+esm/
+es/
+examples/
+tests/
+webpack.*.js
+jest.config.js
+.eslintrc.*
--- a/packages/plugin/.fatherrc.js
+++ b/packages/plugin/.fatherrc.js
@ -0,0 +1,6 @@
+export default {
+    entry: './src/index.ts',
+    esm: 'babel',
+    cjs: 'babel',
+  };
+  
--- a/packages/plugin/.npmignore
+++ b/packages/plugin/.npmignore
@ -0,0 +1,49 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log
+.DS_Store
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Dependency directories
+node_modules
+**/node_modules
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Output of 'npm pack'
+*.tgz
+
+
+# dotenv environment variables file
+.env
+
+# IDE
+.idea
+
+# lock
+package-lock.json
+
+
+# yarn-lock
+yarn.lock
+
+
+# ignore dist files
+.vscode/
+src
+jest.config.js
+.fatherrc.js
+__mock__
+public
+tsconfig.json
--- a/packages/plugin/jest.config.js
+++ b/packages/plugin/jest.config.js
@ -0,0 +1,25 @@
+module.exports = {
+  runner: 'jest-electron/runner',
+  testEnvironment: 'jest-electron/environment',
+  preset: 'ts-jest',
+  collectCoverage: false,
+  collectCoverageFrom: ['src/**/*.{ts,js}', '!**/node_modules/**', '!**/vendor/**'],
+  testRegex: '/tests/unit/.*-spec\\.ts?$',
+  moduleDirectories: ['node_modules', 'src'],
+  moduleFileExtensions: ['js', 'ts', 'json'],
+  moduleNameMapper: {
+    '@g6/types': '<rootDir>/types',
+    '@g6/(.*)': '<rootDir>/src/$1',
+  },
+  transformIgnorePatterns: ['./node_modules/'],
+
+  globals: {
+    'ts-jest': {
+      diagnostics: false,
+    },
+  },
+  testPathIgnorePatterns: [
+    '/tests/unit/image-minimap-spec.ts',
+    '/tests/unit/edge-filter-lens-spec.ts',
+  ],
+};
--- a/packages/plugin/package.json
+++ b/packages/plugin/package.json
@ -0,0 +1,53 @@
+{
+  "name": "@antv/g6-plugin",
+  "version": "0.8.0",
+  "description": "G6 Plugin",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "scripts": {
+    "build": "npm run clean && father build",
+    "ci": "npm run build && npm run coverage",
+    "clean": "rimraf es esm lib dist",
+    "coverage": "jest --coverage",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx --format=pretty \"./\"",
+    "lint:src": "eslint --ext .ts --format=pretty \"./src\"",
+    "prettier": "prettier -c --write \"**/*\"",
+    "test": "jest",
+    "test-live": "DEBUG_MODE=1 jest --watch ./tests/unit/snapline-spec.ts",
+    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
+    "watch": "father build -w"
+  },
+  "dependencies": {
+    "@antv/g6-core": "*",
+    "@antv/g6-element": "*"
+  },
+  "sideEffects": false,
+  "author": "",
+  "license": "MIT",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "npm run lint-staged:js",
+      "prettier --write"
+    ],
+    "**/*.{less,md,json}": [
+      "prettier --write"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/jest": "^26.0.18",
+    "father": "^2.30.0",
+    "jest": "^26.6.3",
+    "jest-electron": "^0.1.11",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^26.4.4",
+    "@antv/g6": "^4.7.10"
+  }
+}
--- a/packages/plugin/src/index.ts
+++ b/packages/plugin/src/index.ts
@ -0,0 +1,5 @@
+export {};
+
+const Plugin = {};
+
+export default Plugin;
--- a/packages/plugin/tsconfig.json
+++ b/packages/plugin/tsconfig.json
@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "allowJs": true,
+    "declaration": true,
+    "target": "es5",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "resolveJsonModule": true,
+    "noImplicitAny": false,
+    "lib": ["dom", "esnext"],
+    "module": "esnext",
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src", "tests"],
+  "exclude": ["./node_modules"]
+}
--- a/packages/react-node/.editorconfig
+++ b/packages/react-node/.editorconfig
@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab
--- a/packages/react-node/.fatherrc.ts
+++ b/packages/react-node/.fatherrc.ts
@ -0,0 +1,4 @@
+export default {
+  esm: 'rollup',
+  cjs: 'rollup',
+};
--- a/packages/react-node/.gitignore
+++ b/packages/react-node/.gitignore
@ -0,0 +1,21 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+/docs-dist
+
+# misc
+.DS_Store
+
+# umi
+.umi
+.umi-production
+.umi-test
+.env.local
--- a/packages/react-node/.npmignore
+++ b/packages/react-node/.npmignore
@ -0,0 +1,3 @@
+docs
+src/.umi
+docs-dist
--- a/packages/react-node/.prettierignore
+++ b/packages/react-node/.prettierignore
@ -0,0 +1,7 @@
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test
--- a/packages/react-node/.prettierrc
+++ b/packages/react-node/.prettierrc
@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}
--- a/packages/react-node/.umirc.ts
+++ b/packages/react-node/.umirc.ts
@ -0,0 +1,18 @@
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  title: 'G6 React Node',
+  favicon:
+    'https://gw.alipayobjects.com/zos/antfincdn/cfg5jFqgVt/DiceGraph.png',
+  logo: 'https://gw.alipayobjects.com/zos/antfincdn/cfg5jFqgVt/DiceGraph.png',
+  outputPath: 'docs',
+  locales: [
+    ['zh-CN', '中文'],
+    ['en-US', 'English'],
+  ],
+  resolve: { includes: ['docs', 'src'] },
+  dynamicImport: {
+    loading: '@/Loading',
+  },
+  // more config: https://d.umijs.org/config
+});
--- a/packages/react-node/README.md
+++ b/packages/react-node/README.md
@ -0,0 +1,90 @@
+# G6 React Node
+
+> Using React Component to custom your g6 node
+
+## Docs
+
+[https://dicegraph.github.io/](https://dicegraph.github.io/g6-react-node)
+
+## Example
+
+```jsx
+import {
+  Group,
+  Rect,
+  Text,
+  Circle,
+  Image,
+  createNodeFromReact,
+} from '@antv/g6-react-node';
+const ReactNode = ({ cfg = {} }) => {
+  const { description, meta = {}, label = 'label' } = cfg;
+  return (
+    <Group>
+      <Rect>
+        <Rect
+          style={{
+            width: 150,
+            height: 20,
+            fill: cfg.color,
+            radius: [6, 6, 0, 0],
+            cursor: 'move',
+            stroke: cfg.color,
+          }}
+          draggable
+        >
+          <Text
+            style={{
+              marginTop: 2,
+              marginLeft: 75,
+              textAlign: 'center',
+              fontWeight: 'bold',
+              fill: '#fff',
+            }}
+          >
+            {label}
+          </Text>
+        </Rect>
+        <Rect
+          style={{
+            width: 150,
+            height: 55,
+            stroke: cfg.color,
+            fill: '#ffffff',
+            radius: [0, 0, 6, 6],
+          }}
+        >
+          <Text style={{ marginTop: 5, fill: '#333', marginLeft: 4 }}>
+            Desc: {description}
+          </Text>
+          <Text style={{ marginTop: 10, fill: '#333', marginLeft: 4 }}>
+            Creator: {meta.creatorName}
+          </Text>
+        </Rect>
+      </Rect>
+      <Circle
+        style={{
+          stroke: cfg.color,
+          r: 10,
+          fill: '#fff',
+          marginLeft: 75,
+          cursor: 'pointer',
+        }}
+        name="circle"
+      >
+        <Image
+          style={{
+            img:
+              'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+            width: 12,
+            height: 12,
+            marginLeft: 69,
+            marginTop: -5,
+          }}
+        />
+      </Circle>
+    </Group>
+  );
+};
+G6.registerNode('yourNode', createNodeFromReact(ReactNode));
+```
--- a/packages/react-node/docs/index.en-US.md
+++ b/packages/react-node/docs/index.en-US.md
@ -0,0 +1,174 @@
+# Register Node Using React
+
+How about building your G6 node using React Component with correct type inference.
+
+```jsx
+import React from 'react';
+import G6 from '@antv/g6';
+import {
+  Group,
+  Rect,
+  Text,
+  Circle,
+  Image,
+  createNodeFromReact,
+} from '@antv/g6-react-node';
+import { G6MiniDemo } from '../src/ReactNode/demo';
+
+const ReactNode = ({ cfg = {} }) => {
+  const { description, meta = {}, label = 'label' } = cfg;
+  return (
+    <Group>
+      <Rect>
+        <Rect
+          style={{
+            width: 150,
+            height: 20,
+            fill: cfg.color,
+            radius: [6, 6, 0, 0],
+            cursor: 'move',
+            stroke: cfg.color,
+          }}
+          draggable
+        >
+          <Text
+            style={{
+              marginTop: 2,
+              marginLeft: 75,
+              textAlign: 'center',
+              fontWeight: 'bold',
+              fill: '#fff',
+            }}
+          >
+            {label}
+          </Text>
+        </Rect>
+        <Rect
+          style={{
+            width: 150,
+            height: 55,
+            stroke: cfg.color,
+            fill: '#ffffff',
+            radius: [0, 0, 6, 6],
+          }}
+        >
+          <Text style={{ marginTop: 5, fill: '#333', marginLeft: 4 }}>
+            Desc: {description}
+          </Text>
+          <Text style={{ marginTop: 10, fill: '#333', marginLeft: 4 }}>
+            Creator: {meta.creatorName}
+          </Text>
+        </Rect>
+      </Rect>
+      <Circle
+        style={{
+          stroke: cfg.color,
+          r: 10,
+          fill: '#fff',
+          marginLeft: 75,
+          cursor: 'pointer',
+        }}
+        name="circle"
+      >
+        <Image
+          style={{
+            img:
+              'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+            width: 12,
+            height: 12,
+            marginLeft: 69,
+            marginTop: -5,
+          }}
+        />
+      </Circle>
+    </Group>
+  );
+};
+
+G6.registerNode('test', createNodeFromReact(ReactNode));
+
+export default () => <G6MiniDemo nodeType="test" count={2} />;
+```
+
+```jsx | pure
+import {
+  Group,
+  Rect,
+  Text,
+  Circle,
+  Image,
+  createNodeFromReact,
+} from '@antv/g6-react-node';
+
+const ReactNode = ({ cfg = {} }) => {
+  const { description, meta = {}, label = 'label' } = cfg;
+  return (
+    <Group>
+      <Rect>
+        <Rect
+          style={{
+            width: 150,
+            height: 20,
+            fill: cfg.color,
+            radius: [6, 6, 0, 0],
+            cursor: 'move',
+            stroke: cfg.color,
+          }}
+          draggable
+        >
+          <Text
+            style={{
+              marginTop: 2,
+              marginLeft: 75,
+              textAlign: 'center',
+              fontWeight: 'bold',
+              fill: '#fff',
+            }}
+          >
+            {label}
+          </Text>
+        </Rect>
+        <Rect
+          style={{
+            width: 150,
+            height: 55,
+            stroke: cfg.color,
+            fill: '#ffffff',
+            radius: [0, 0, 6, 6],
+          }}
+        >
+          <Text style={{ marginTop: 5, fill: '#333', marginLeft: 4 }}>
+            描述: {description}
+          </Text>
+          <Text style={{ marginTop: 10, fill: '#333', marginLeft: 4 }}>
+            创建者: {meta.creatorName}
+          </Text>
+        </Rect>
+      </Rect>
+      <Circle
+        style={{
+          stroke: cfg.color,
+          r: 10,
+          fill: '#fff',
+          marginLeft: 75,
+          cursor: 'pointer',
+        }}
+        name="circle"
+      >
+        <Image
+          style={{
+            img:
+              'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+            width: 12,
+            height: 12,
+            marginLeft: 69,
+            marginTop: -5,
+          }}
+        />
+      </Circle>
+    </Group>
+  );
+};
+
+G6.registerNode('yourNode', createNodeFromReact(ReactNode));
+```
--- a/packages/react-node/docs/index.md
+++ b/packages/react-node/docs/index.md
@ -0,0 +1,170 @@
+# 用 React 定义节点
+
+直接用 React 组件定义你的 G6 组件，自带类型提示。
+
+```jsx
+import React from 'react';
+import G6 from '@antv/g6';
+import {
+  Group,
+  Rect,
+  Text,
+  Circle,
+  Image,
+  createNodeFromReact,
+} from '@antv/g6-react-node';
+import { G6MiniDemo } from '../src/ReactNode/demo';
+
+const ReactNode = ({ cfg = {} }) => {
+  const { description, meta = {}, label = 'label' } = cfg;
+  return (
+    <Group>
+      <Rect>
+        <Rect
+          style={{
+            width: 150,
+            height: 20,
+            fill: cfg.color,
+            radius: [6, 6, 0, 0],
+            cursor: 'move',
+            stroke: cfg.color,
+            justifyContent: 'center',
+          }}
+          draggable
+        >
+          <Text
+            style={{
+              margin: [4, 5],
+              fontWeight: 'bold',
+              fill: '#fff',
+            }}
+          >
+            {label}
+          </Text>
+        </Rect>
+        <Rect
+          style={{
+            width: 150,
+            height: 55,
+            stroke: cfg.color,
+            fill: '#ffffff',
+            radius: [0, 0, 6, 6],
+          }}
+        >
+          <Text style={{ fill: '#333', margin: [8, 4] }}>
+            描述: {description}
+          </Text>
+          <Text style={{ fill: '#333', margin: [6, 4] }}>
+            创建者: {meta.creatorName}
+          </Text>
+        </Rect>
+      </Rect>
+      <Circle
+        style={{
+          stroke: cfg.color,
+          r: 10,
+          fill: '#fff',
+          cursor: 'pointer',
+          margin: [0, 'auto'],
+        }}
+        name="circle"
+      >
+        <Image
+          style={{
+            img:
+              'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+            width: 12,
+            height: 12,
+            margin: [4, 'auto'],
+          }}
+        />
+      </Circle>
+    </Group>
+  );
+};
+
+G6.registerNode('test', createNodeFromReact(ReactNode));
+
+export default () => <G6MiniDemo nodeType="test" count={3} />;
+```
+
+```jsx | pure
+import {
+  Group,
+  Rect,
+  Text,
+  Circle,
+  Image,
+  createNodeFromReact,
+} from '@antv/g6-react-node';
+
+const ReactNode = ({ cfg = {} }) => {
+  const { description, meta = {}, label = 'label' } = cfg;
+  return (
+    <Group>
+      <Rect>
+        <Rect
+          style={{
+            width: 150,
+            height: 20,
+            fill: cfg.color,
+            radius: [6, 6, 0, 0],
+            cursor: 'move',
+            stroke: cfg.color,
+            justifyContent: 'center',
+          }}
+          draggable
+        >
+          <Text
+            style={{
+              margin: [4, 5],
+              fontWeight: 'bold',
+              fill: '#fff',
+            }}
+          >
+            {label}
+          </Text>
+        </Rect>
+        <Rect
+          style={{
+            width: 150,
+            height: 55,
+            stroke: cfg.color,
+            fill: '#ffffff',
+            radius: [0, 0, 6, 6],
+          }}
+        >
+          <Text style={{ marginTop: 5, fill: '#333', margin: [8, 4] }}>
+            描述: {description}
+          </Text>
+          <Text style={{ marginTop: 10, fill: '#333', margin: [6, 4] }}>
+            创建者: {meta.creatorName}
+          </Text>
+        </Rect>
+      </Rect>
+      <Circle
+        style={{
+          stroke: cfg.color,
+          r: 10,
+          fill: '#fff',
+          cursor: 'pointer',
+          margin: [0, 'auto'],
+        }}
+        name="circle"
+      >
+        <Image
+          style={{
+            img:
+              'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+            width: 12,
+            height: 12,
+            margin: [4, 'auto'],
+          }}
+        />
+      </Circle>
+    </Group>
+  );
+};
+
+G6.registerNode('yourNode', createNodeFromReact(ReactNode));
+```
--- a/packages/react-node/package.json
+++ b/packages/react-node/package.json
@ -0,0 +1,47 @@
+{
+  "name": "@antv/g6-react-node",
+  "description": "Using React Component to Define Your G6 Graph Node",
+  "version": "1.4.5",
+  "scripts": {
+    "start": "dumi dev",
+    "build": "father-build",
+    "deploy": "npm run docs:build && npm run docs:deploy",
+    "release": "npm run build && npm publish",
+    "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
+    "docs:build": "dumi build",
+    "docs:deploy": "gh-pages -d docs-dist",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,less,md,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "dependencies": {
+    "@antv/g6-core": "^0.0.7",
+    "@antv/g-base": "^0.5.1",
+    "@types/yoga-layout": "^1.9.3",
+    "react": "^16.12.0",
+    "yoga-layout-prebuilt": "^1.10.0"
+  },
+  "devDependencies": {
+    "@umijs/test": "^3.0.5",
+    "dumi": "^1.1.1",
+    "father-build": "^1.17.2",
+    "gh-pages": "^3.0.0",
+    "lint-staged": "^10.0.7",
+    "prettier": "^1.19.1",
+    "yorkie": "^2.0.0"
+  }
+}
--- a/packages/react-node/src/API/CircleStyle.tsx
+++ b/packages/react-node/src/API/CircleStyle.tsx
@ -0,0 +1,5 @@
+import { CircleStyle } from '../ReactNode/Shape/Circle';
+import React from 'react';
+
+const Circle: React.FC<CircleStyle> = (props) => <div>{props}</div>;
+export default Circle;
--- a/packages/react-node/src/API/EllipseStyle.tsx
+++ b/packages/react-node/src/API/EllipseStyle.tsx
@ -0,0 +1,5 @@
+import { EllipseStyle } from '../ReactNode/Shape/Ellipse';
+import React from 'react';
+
+const Ellipse: React.FC<EllipseStyle> = (props) => <div>{props}</div>;
+export default Ellipse;
--- a/packages/react-node/src/API/Event.tsx
+++ b/packages/react-node/src/API/Event.tsx
@ -0,0 +1,5 @@
+import React from 'react';
+import { EventAttrs } from '../Register/event';
+
+const Event: React.FC<EventAttrs> = (props) => <div>{props}</div>;
+export default Event;
--- a/packages/react-node/src/API/ImageStyle.tsx
+++ b/packages/react-node/src/API/ImageStyle.tsx
@ -0,0 +1,5 @@
+import { ImageStyle } from '../ReactNode/Shape/Image';
+import React from 'react';
+
+const Image: React.FC<ImageStyle> = (props) => <div>{props}</div>;
+export default Image;
--- a/packages/react-node/src/API/MarkerStyle.tsx
+++ b/packages/react-node/src/API/MarkerStyle.tsx
@ -0,0 +1,5 @@
+import { MarkerStyle } from '../ReactNode/Shape/Marker';
+import React from 'react';
+
+const Marker: React.FC<MarkerStyle> = (props) => <div>{props}</div>;
+export default Marker;
--- a/packages/react-node/src/API/PathStyle.tsx
+++ b/packages/react-node/src/API/PathStyle.tsx
@ -0,0 +1,5 @@
+import { PathStyle } from '../ReactNode/Shape/Path';
+import React from 'react';
+
+const Path: React.FC<PathStyle> = (props) => <div>{props}</div>;
+export default Path;
--- a/packages/react-node/src/API/PolygonStyle.tsx
+++ b/packages/react-node/src/API/PolygonStyle.tsx
@ -0,0 +1,5 @@
+import { PolygonStyle } from '../ReactNode/Shape/Polygon';
+import React from 'react';
+
+const Polygon: React.FC<PolygonStyle> = (props) => <div>{props}</div>;
+export default Polygon;
--- a/packages/react-node/src/API/RectStyle.tsx
+++ b/packages/react-node/src/API/RectStyle.tsx
@ -0,0 +1,5 @@
+import { RectStyle } from '../ReactNode/Shape/Rect';
+import React from 'react';
+
+const Rect: React.FC<RectStyle> = (props) => <div {...props} />;
+export default Rect;
--- a/packages/react-node/src/API/TextStyle.tsx
+++ b/packages/react-node/src/API/TextStyle.tsx
@ -0,0 +1,5 @@
+import { TextStyle } from '../ReactNode/Shape/Text';
+import React from 'react';
+
+const Text: React.FC<TextStyle> = (props) => <div>{props}</div>;
+export default Text;
--- a/packages/react-node/src/API/circle.en-US.md
+++ b/packages/react-node/src/API/circle.en-US.md
@ -0,0 +1,28 @@
+# Circle Style
+
+```jsx
+import React from 'react';
+import G6 from '@antv/g6';
+import { Group, Circle, createNodeFromReact } from '@antv/g6-react-node';
+import { G6MiniDemo } from '../ReactNode/demo';
+
+const ReactNode = ({ cfg = {} }) => (
+  <Group>
+    <Circle
+      style={{
+        r: 45,
+        fill: cfg.color,
+        radius: [6, 6, 0, 0],
+        cursor: 'move',
+        stroke: '#eee',
+      }}
+    />
+  </Group>
+);
+
+G6.registerNode('test', createNodeFromReact(ReactNode));
+
+export default () => <G6MiniDemo nodeType="test" count={2} />;
+```
+
+<API src="./CircleStyle.tsx" ></API>
--- a/packages/react-node/src/API/circle.md
+++ b/packages/react-node/src/API/circle.md
@ -0,0 +1,29 @@
+# 圆 (Circle) 样式属性
+
+```jsx
+import React from 'react';
+import G6 from '@antv/g6';
+import { Group, Circle, createNodeFromReact } from '@antv/g6-react-node';
+import { G6MiniDemo } from '../ReactNode/demo';
+
+const ReactNode = ({ cfg = {} }) => (
+  <Group>
+    <Circle
+      style={{
+        r: 45,
+        fill: cfg.color,
+        radius: [6, 6, 0, 0],
+        cursor: 'move',
+        stroke: '#eee',
+      }}
+      draggable
+    />
+  </Group>
+);
+
+G6.registerNode('test', createNodeFromReact(ReactNode));
+
+export default () => <G6MiniDemo nodeType="test" count={2} />;
+```
+
+<API src="./CircleStyle.tsx" ></API>
--- a/packages/react-node/src/API/ellipse.en-US.md
+++ b/packages/react-node/src/API/ellipse.en-US.md
@ -0,0 +1,29 @@
+# Ellipse Style
+
+```jsx
+import React from 'react';
+import G6 from '@antv/g6';
+import { Group, Ellipse, createNodeFromReact } from '@antv/g6-react-node';
+import { G6MiniDemo } from '../ReactNode/demo';
+
+const ReactNode = ({ cfg = {} }) => (
+  <Group>
+    <Ellipse
+      style={{
+        rx: 45,
+        ry: 20,
+        fill: cfg.color,
+        cursor: 'move',
+        stroke: '#888',
+      }}
+      draggable
+    />
+  </Group>
+);
+
+G6.registerNode('test', createNodeFromReact(ReactNode));
+
+export default () => <G6MiniDemo nodeType="test" count={2} />;
+```
+
+<API src="./EllipseStyle.tsx" ></API>
--- a/Show More
+++ b/Show More