Compare commits

..

20 Commits

Author SHA1 Message Date
c018065a42 chore(release): @antv/x6@1.1.1 [skip ci] 2022-11-05 07:57:48 +00:00
190d0978ef chore(release): @antv/x6-example-features@1.0.1 [skip ci] 2022-11-05 07:57:45 +00:00
75fa88ec80 chore(release): @antv/x6-plugin-dnd@1.0.3 [skip ci] 2022-11-05 07:57:43 +00:00
a02ca20f05 chore: bump to 2.0
force bump to 2.0

BREAKING CHANGE: bump to 2.0
2022-11-05 15:49:05 +08:00
5c1dc137d5 chore(release): @antv/x6-vue-shape@1.1.0 [skip ci] 2022-11-05 07:23:30 +00:00
b903dc0539 chore(release): @antv/x6-react-shape@1.0.2 [skip ci] 2022-11-05 07:23:27 +00:00
4c61c7f74d chore(release): @antv/x6-react-components@1.1.0 [skip ci] 2022-11-05 07:23:24 +00:00
6f591418d2 chore(release): @antv/x6-plugin-transform@1.0.2 [skip ci] 2022-11-05 07:23:21 +00:00
b1ec2def7b chore(release): @antv/x6-plugin-stencil@1.0.2 [skip ci] 2022-11-05 07:23:18 +00:00
8f57a63206 chore(release): @antv/x6-plugin-snapline@1.0.2 [skip ci] 2022-11-05 07:23:16 +00:00
23120ffc65 chore(release): @antv/x6-plugin-selection@1.0.2 [skip ci] 2022-11-05 07:23:12 +00:00
daac3e5fdc chore(release): @antv/x6-plugin-scroller@1.1.0 [skip ci] 2022-11-05 07:23:10 +00:00
cbb415fc19 chore(release): @antv/x6-plugin-minimap@1.0.2 [skip ci] 2022-11-05 07:23:07 +00:00
75ef37b761 chore(release): @antv/x6-plugin-keyboard@1.0.2 [skip ci] 2022-11-05 07:23:04 +00:00
99e2bea2d8 chore(release): @antv/x6-plugin-history@1.0.2 [skip ci] 2022-11-05 07:23:01 +00:00
bd72005ee2 chore(release): @antv/x6-plugin-export@1.0.2 [skip ci] 2022-11-05 07:22:58 +00:00
0cc1d89eec chore(release): @antv/x6-plugin-clipboard@1.0.2 [skip ci] 2022-11-05 07:22:55 +00:00
1ebf0912d1 chore(release): @antv/x6-common@1.1.0 [skip ci] 2022-11-05 07:22:52 +00:00
da41870afd chore(release): @antv/x6@1.1.0 [skip ci] 2022-11-05 07:22:49 +00:00
db0c31deb0 chore(release): @antv/x6-plugin-dnd@1.0.2 [skip ci] 2022-11-05 07:22:47 +00:00
2448 changed files with 123316 additions and 90091 deletions
.changeset
.github
.gitignore.gitlab-ci.yml
.husky
.lgtm.yml.npmrc.prettierignore.releaserc.stylelintrcCODE_OF_CONDUCT.mdCONTRIBUTING.mdCONTRIBUTING.zh-CN.mdCONTRIBUTORSCONTRIBUTORS.svgLICENSEREADME.en-us.mdREADME.mdSECURITY.md
examples/x6-example-features
karma.conf.jspackage.json
packages
x6-angular-shape
x6-common
x6-devtool
x6-geometry
x6-plugin-clipboard
x6-plugin-dnd
x6-plugin-export
x6-plugin-history
x6-plugin-keyboard
x6-plugin-minimap
x6-plugin-scroller
x6-plugin-selection
x6-plugin-snapline
x6-plugin-stencil
x6-plugin-transform
x6-react-components
CHANGELOG.mdLICENSEREADME.mdpackage.json
src
auto-scroll-box/style
color-picker
context-menu/style
dropdown/style
menu/style
menubar
scroll-box/style
scrollbar/style
split-box/style
style
toolbar
x6-react-shape
x6-vue-shape
x6
pnpm-lock.yamlpnpm-workspace.yamlrollup.config.js
scripts
sites
x6-sites-demos-helper
x6-sites-demos
CHANGELOG.mdpackage.json
packages
api
graph
registry
attr
background
connection-point/playground
connector
edge-anchor/playground
edge-tool
filter
grid
node-anchor/playground
node-tool
port-label-layout
port-layout
router
ui
scene/sankey
tutorial
advanced
animation
layout
react
basic
background/playground
clipboard/playground
dnd
edge
grid/playground
group
history/playground
keyboard/playground
minimap/playground
mousewheel/playground
node/style
port
scroller/playground
selection/playground
snapline/playground
getting-started
intermediate
attrs
custom-edge/custom-edge
custom-node/custom-node
edge-labels
events
interacting
marker
serialization
tools
x6-sites
.dumi
.dumirc.ts.eslintrc.gitignoreCHANGELOG.mdCNAMELEGAL.md
docs
api
graph
model
mvc
registry
ui
view
temp
tutorial
about.en.mdabout.zh.md
advanced
basic
contact.en.mdcontact.zh.mddevtool.en.mddevtool.zh.mdepilog.en.mdepilog.zh.mdgetting-started.en.mdgetting-started.zh.md
intermediate
log.en.mdlog.zh.md
plugins
update.en.mdupdate.zh.md
xflow
examples
gatsby-browser.jsgatsby-config.jsgatsby-node.jspackage.json
public
site
src
api
attrs
edge-relative-position
edge-subelement-labels
ref-elem
ref-node
text-anchor
text-wrap
x-align
background/playground
connection-point/playground
connector
coord/playground
edge-anchor/playground
edge-tool
arrowhead
boundary
button-remove
button
custom-arrowhead
custom-vertices
segments
vertices
filter
blur
brightness
contrast
drop-shadow
gray-scale
highlight
hue-rotate
invert
outline
saturate
sepia
grid/playground
label
append-label
label-attrs
label-markup
label-offset
label-position
label-rotate
marker
custom
image
native
normalize-path
path
tagname
mousewheel/playground
node-anchor/playground
node-tool
boundary
button-remove
button
custom-button
node-editor
panning/playground
port-label-layout
inside-outside
radial
side
port-layout
absolute
ellipse-spread
ellipse
line
side
sin
router
tutorial
basic
getting-started
intermediate
plugins
typings
xflow
x6-svg-to-shape
tsconfig.jsonturbo.json

@ -1,8 +0,0 @@
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

@ -1,11 +0,0 @@
{
"$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
"changelog": "@changesets/cli/changelog",
"commit": false,
"fixed": [],
"linked": [],
"access": "restricted",
"baseBranch": "master",
"updateInternalDependencies": "patch",
"ignore": []
}

@ -75,7 +75,7 @@ body:
value: |
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 2.11.1]
- Version: [e.g. 91.1]
validations:
required: true
- type: textarea

@ -51,8 +51,8 @@ body:
label: 平台
value: |
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox ...]
- X6 版本: [2.11.1 ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- X6 版本: [1.28.2 ... ]
validations:
required: true
- type: textarea

@ -35,4 +35,4 @@
- [ ] I have updated the documentation accordingly.
- [ ] I have read the [**CONTRIBUTING**](https://github.com/antvis/x6/blob/master/CONTRIBUTING.md) document.
- [ ] I have added tests to cover my changes.
- [ ] All new and existing tests passed.
- [ ] All new and existing tests passed.

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

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

@ -0,0 +1,19 @@
name: 🧑 Auto Assign
on:
issues:
types: [opened]
pull_request_target:
types: [opened]
jobs:
run:
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/auto-assign@v1
with:
GITHUB_TOKEN: ${{ env.bot_token }}
CONFIG_FILE: .github/workflows/config/auto-assign.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:`

@ -0,0 +1,48 @@
name: 🚫 Delete Stale Releases
# on:
# repository_dispatch:
# types: [released]
# jobs:
# clean:
# runs-on: ubuntu-latest
# steps:
# - uses: wow-actions/use-app-token@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:
push:
branches:
- master
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: -1

21
.github/workflows/backup/gitleaks.yml vendored Normal file

@ -0,0 +1,21 @@
name: 🥤 GitLeaks
on:
pull_request:
push:
branches:
- master
- alpha
- beta
jobs:
gitleaks:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
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@master

@ -10,12 +10,16 @@ on:
- beta
jobs:
ci:
strategy:
matrix:
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@v3
with:
persist-credentials: false
- name: 🎉 Setup nodejs
uses: actions/setup-node@v3
@ -52,36 +56,36 @@ jobs:
run: pnpm run test
- name: 🔑 Generate Token
uses: wow-actions/use-app-token@v2
uses: wow-actions/use-app-token@v1
with:
app_id: ${{ secrets.APP_ID }}
private_key: ${{ secrets.PRIVATE_KEY }}
env_name: bot_token
- name: 💡 Codecov
uses: codecov/codecov-action@v3
uses: codecov/codecov-action@v1
with:
token: ${{ secrets.CODECOV_TOKEN }}
files: ./packages/x6/test/coverage/lcov.info
flags: x6
files: ./packages/${{ matrix.codecov }}/test/coverage/lcov.info
flags: ${{ matrix.codecov }}
- name: 🔀 Dispatch(ci_passed)
uses: peter-evans/repository-dispatch@v2
with:
token: ${{ env.BOT_TOKEN }}
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 }}
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 }}
token: ${{ env.bot_token }}
event-type: ci_master_passed

@ -0,0 +1,7 @@
assignees:
- NewByVector
reviewers:
- bubkoo
- NewByVector
skipKeywords:
- wip

@ -0,0 +1,16 @@
name: 🚧 Create Issue Branch
on:
issue_comment:
types: [created]
jobs:
cib:
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: robvanderleek/create-issue-branch@main
env:
GITHUB_TOKEN: ${{ env.bot_token }}

78
.github/workflows/deploy-sites.yml vendored Normal file

@ -0,0 +1,78 @@
name: 🚀 Deploy Sites
on:
repository_dispatch:
types: [released]
jobs:
deploy:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- name:  Checkout
uses: actions/checkout@v3
- name: 🎉 Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: 🌱 Get Yarn Cache Directory
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"
- name: 🚸 Setup Cache
uses: actions/cache@v2
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
## cache webpack(babel-loader, eslint-loader)
- name: 💩 Setup Webpack Cache
uses: actions/cache@v2
with:
path: |
node_modules
sites/x6-sites-demos/packages/**/node_modules
key: ${{ runner.os }}-webpack-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-webpack-
## cache sites
- name: 💩 Setup Sites Cache
uses: actions/cache@v2
with:
path: sites/x6-sites/static/demos
key: ${{ runner.os }}-sites-${{ hashFiles('./packages/x6/package.json', './sites/x6-sites-demos/**/src') }}
restore-keys: |
${{ runner.os }}-sites-
- name: 🚧 Prepare
run: yarn global add lerna
- name: 🚀 Bootstrap
run: yarn bootstrap
- name: 🧲 Build Apps
run: yarn build:apps
- name: 📦 Build Demos
run: yarn build:demos
- name:  Build Sites
run: yarn build:sites
- 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:  Deploy sites
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ env.bot_token }}
publish_dir: ./sites/x6-sites/public
publish_branch: gh-pages

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

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

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

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

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

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

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

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

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

85
.github/workflows/preview.yml vendored Normal file

@ -0,0 +1,85 @@
name: 🔂 Surge PR Preview
on:
pull_request_target:
paths:
- sites/x6-sites/**
- sites/x6-sites-demos/**
- sites/x6-sites-demos-helper/**
- examples/x6-app-**
jobs:
surge:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v3
- name: 🌱 Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"
- name: 🚸 Setup yarn cacha
uses: actions/cache@v2
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
## cache webpack(babel-loader, eslint-loader)
- name: 💩 Setup webpack cache
uses: actions/cache@v2
with:
path: |
node_modules
sites/x6-sites-demos/packages/**/node_modules
key: ${{ runner.os }}-webpack-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-webpack-
## cache sites
- name: 💩 Setup sites cache
uses: actions/cache@v2
with:
path: sites/x6-sites/static/demos
key: ${{ runner.os }}-sites-${{ hashFiles('./packages/x6/package.json', './sites/x6-sites-demos/**/src') }}
restore-keys: |
${{ runner.os }}-sites-
- name: 🎉 Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: 🚧 Prepare Environment
run: |
yarn global add lerna
- name: 🚀 Bootstrap
run: yarn bootstrap
- name: 📦 Build Demos
run: yarn build:demos
- name: 🧲 Build Apps
run: yarn build:apps
- name:  Build Sites
run: yarn build:sites
- 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:  Deploy Sites
uses: afc163/surge-preview@v1
with:
surge_token: ${{ secrets.SURGE_TOKEN }}
github_token: ${{ env.bot_token }}
build: |
echo Create sites preview
dist: sites/x6-sites/public

@ -1,24 +0,0 @@
on: [push]
jobs:
build:
runs-on: ubuntu-latest
name: Web Build
steps:
- uses: actions/checkout@v4
- name: Setup node
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node }}
- name: Prepare NPM Stuff
run: |
npm install -g pnpm
pnpm install --no-frozen-lockfile --ignore-scripts
pnpm run build
rm .npmrc
npm set registry https://git.ahri.cloud/api/packages/ahri-cloud-projects/npm/:_authToken=${{ secrets.PAT_TOKEN }}
echo "registry=https://git.ahri.cloud/api/packages/ahri-cloud-projects/npm/" > .npmrc
echo "//git.ahri.cloud/api/packages/ahri-cloud-projects/npm/:_authToken=${{ secrets.PAT_TOKEN }}" >> .npmrc
for i in $(find packages/ -path '*/package.json' -type f); do jq -r '.publishConfig.registry="https://git.ahri.cloud/api/packages/ahri-cloud-projects/npm/"' $i > $i.tmp && rm $i && mv $i.tmp $i; done
- run: pnpm publish --no-git-checks -r --tag latest
name: Publish NPM Packages

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

@ -15,8 +15,7 @@ jobs:
steps:
- name:  Checkout
uses: actions/checkout@v3
with:
persist-credentials: false
- name: 🎉 Setup nodejs
uses: actions/setup-node@v3
with:
@ -45,33 +44,40 @@ jobs:
- name: 🚧 Install dependencies
run: pnpm install --no-frozen-lockfile --ignore-scripts
- name: 📦 build
run: pnpm run build
# - name: 📦 build
# run: pnpm run build
# - name: ✅ Test
# run: pnpm run test
- name: 🔑 Generate Token
uses: wow-actions/use-app-token@v2
uses: wow-actions/use-app-token@v1
with:
app_id: ${{ secrets.APP_ID }}
private_key: ${{ secrets.PRIVATE_KEY }}
env_name: bot_token
- name: 📦 Semantic Release
run: pnpm srm --combine-commits --comment-footer 'Thanks for being a part of the [AntV](https://github.com/antvis) community! 💪💯'
run: pnpm srm --debug --comment-footer 'Thanks for being a part of the [AntV](https://github.com/antvis) community! 💪💯'
env:
SRM_DEBUG: ${{ secrets.SRM_DEBUG }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
GIT_AUTHOR_NAME: ${{ env.BOT_NAME }}[bot]
GIT_AUTHOR_EMAIL: ${{ env.BOT_NAME }}[bot]@users.noreply.github.com
GIT_COMMITTER_NAME: ${{ env.BOT_NAME }}[bot]
GIT_COMMITTER_EMAIL: ${{ env.BOT_NAME }}[bot]@users.noreply.github.com
GITHUB_TOKEN: ${{ env.bot_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@v2
with:
token: ${{ env.BOT_TOKEN }}
token: ${{ env.bot_token }}
event-type: released

16
.github/workflows/report-monthly.yml vendored Normal file

@ -0,0 +1,16 @@
name: 📆 Monthly Report
on:
schedule:
- cron: '0 3 1 * *'
jobs:
run:
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/activity-report@v1
with:
GITHUB_TOKEN: ${{ env.bot_token }}

16
.github/workflows/report-weekly.yml vendored Normal file

@ -0,0 +1,16 @@
name: 📆 Weekly Report
on:
schedule:
- cron: '30 17 * * 5'
jobs:
run:
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/activity-report@v1
with:
GITHUB_TOKEN: ${{ env.bot_token }}

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

58
.github/workflows/stale.yml vendored Normal file

@ -0,0 +1,58 @@
name: 👻 Stale
on:
schedule:
- cron: "0 0 * * *"
jobs:
stale:
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: actions/stale@v3
with:
repo-token: ${{ env.bot_token }}
stale-issue-message: |
Hiya!
This issue has gone quiet. Spooky quiet. 👻
We get a lot of issues, so we currently close issues after 60 days of inactivity. Its been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out [contribute](https://github.com/antvis/X6/blob/master/CONTRIBUTING.md) for more information about opening PRs, triaging issues, and contributing!
Thanks for being a part of the AntV community! 💪💯
close-issue-message: |
Hey again!
Its been 60 days since anything happened on this issue, so our friendly neighborhood robot (thats me!) is going to close it. Please keep in mind that Im only a robot 🤖, so if Ive closed this issue in error, Im `HUMAN_EMOTION_SORRY`. Please feel free to comment on this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out [contribute](https://github.com/antvis/X6/blob/master/CONTRIBUTING.md) for more information about opening PRs, triaging issues, and contributing!
Thanks again for being part of the AntV community! 💪💯
stale-pr-message: |
Hiya!
This PR has gone quiet. Spooky quiet. 👻
We get a lot of PRs, so we currently close PRs after 60 days of inactivity. Its been at least 20 days since the last update here. If we missed this PR or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this PR open!
Thanks for being a part of the AntV community! 💪💯
close-pr-message: |
Hey again!
Its been 60 days since anything happened on this PR, so our friendly neighborhood robot (thats me!) is going to close it. Please keep in mind that Im only a robot 🤖, so if Ive closed this PR in error, Im `HUMAN_EMOTION_SORRY`. Please feel free to comment on this PR or create a new one if you need anything else.
Thanks again for being part of the AntV community! 💪💯
days-before-stale: 20
days-before-close: 40
stale-issue-label: 'stale'
exempt-issue-label: 'not-stale,awaiting-approval,work-in-progress'
stale-pr-label: 'stale'
exempt-pr-label: 'not-stale,awaiting-approval,work-in-progress'

21
.github/workflows/sync-labels.yml vendored Normal file

@ -0,0 +1,21 @@
name: 🔄 Sync Labels
on:
push:
branches:
- master
paths:
- .github/workflows/config/labels.yml
jobs:
sync:
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: micnncim/action-label-syncer@v1
env:
GITHUB_TOKEN: ${{ env.bot_token }}
with:
manifest: .github/workflows/config/labels.yml

34
.github/workflows/sync-to-gitee.yml vendored Normal file

@ -0,0 +1,34 @@
# https://github.com/marketplace/actions/gitee-pages-action
# 配置步骤如下
# 1. 在命令行终端或 Git Bash 使用命令 ssh-keygen -t rsa -C "youremail@example.com" 生成 SSH Key注意替换为自己的邮箱。生成的 id_rsa 是私钥id_rsa.pub 是公钥。(⚠️注意此处不要设置密码)
# 2. 在 GitHub 项目的「Settings -> Secrets」路径下配置好命名为 GITEE_RSA_PRIVATE_KEY 和 GITEE_PASSWORD 的两个密钥。其中GITEE_RSA_PRIVATE_KEY 存放 id_rsa 私钥GITEE_PASSWORD 存放 Gitee 帐号的密码。
# 3. 在 GitHub 的个人设置页面「Settings -> SSH and GPG keys」 配置 SSH 公钥id_rsa.pub命名随意。或者在仓库设置页面添加一个部署公钥。
# 4. 在 Gitee 的个人设置页面「安全设置 -> SSH 公钥」​ 配置 SSH 公钥id_rsa.pub命名随意。
name: 🔁 Sync to Gitee
on: [push]
jobs:
sync:
runs-on: ubuntu-latest
steps:
- name: 🔁 Sync to Gitee
uses: wearerequired/git-mirror-action@master
env:
# 注意在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
with:
# 注意替换为你的 GitHub 源仓库地址
source-repo: 'git@github.com:antvis/X6.git'
# 注意替换为你的 Gitee 目标仓库地址
destination-repo: 'git@gitee.com:antv-x6/antv-x6.git'
- name: 📦 Build Gitee Pages
uses: yanglbme/gitee-pages-action@master
with:
# 注意替换为你的 Gitee 用户名
gitee-username: afc163
# 注意在 Settings->Secrets 配置 GITEE_PASSWORD
gitee-password: ${{ secrets.GITEE_PASSWORD }}
# 注意替换为你的 Gitee 仓库
gitee-repo: antv-x6/antv-x6
# 要部署的分支
branch: gh-pages

@ -14,14 +14,13 @@ jobs:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- uses: wow-actions/use-app-token@v2
- uses: wow-actions/use-app-token@v1
with:
app_id: ${{ secrets.APP_ID }}
private_key: ${{ secrets.PRIVATE_KEY }}
env_name: bot_token
- uses: wow-actions/update-authors@v1
with:
GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
bots: false
GITHUB_TOKEN: ${{ env.bot_token }}
path: CONTRIBUTORS
commit: 'chore: update CONTRIBUTORS [skip ci]'
bots: false

@ -13,12 +13,12 @@ jobs:
contributors:
runs-on: ubuntu-latest
steps:
- uses: wow-actions/use-app-token@v2
- uses: wow-actions/use-app-token@v1
with:
app_id: ${{ secrets.APP_ID }}
private_key: ${{ secrets.PRIVATE_KEY }}
env_name: bot_token
- uses: wow-actions/contributors-list@v1
with:
GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
GITHUB_TOKEN: ${{ env.bot_token }}
excludeUsers: semantic-release-bot ImgBotApp

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

@ -8,19 +8,21 @@ jobs:
welcome:
runs-on: ubuntu-latest
steps:
- uses: wow-actions/use-app-token@v2
- uses: wow-actions/use-app-token@v1
with:
app_id: ${{ secrets.APP_ID }}
private_key: ${{ secrets.PRIVATE_KEY }}
env_name: bot_token
- uses: wow-actions/welcome@v1
with:
GITHUB_TOKEN: ${{ env.BOT_TOKEN }}
GITHUB_TOKEN: ${{ env.bot_token }}
FIRST_ISSUE: |
👋 @{{ author }}
Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the [contributing guidelines](https://github.com/antvis/X6/blob/master/CONTRIBUTING.md).
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
FIRST_PR: |

2
.gitignore vendored

@ -15,5 +15,3 @@ dist
tmp
test/coverage
packages/**/src/style/raw.ts
.eslintcache
.stylelintcache

@ -1,17 +0,0 @@
stages:
- deploy
deploy:
image: node:18
stage: deploy
script:
- apt update && apt install jq -y
- npm install -g pnpm
- pnpm install --no-frozen-lockfile --ignore-scripts
- pnpm run build
- rm .npmrc
- npm set registry https://gitlab.cloud.ln-c.net/api/v4/projects/504/packages/npm/:_authToken=${CI_JOB_TOKEN}
- echo "registry=https://gitlab.cloud.ln-c.net/api/v4/projects/504/packages/npm/" > .npmrc
- echo "//gitlab.cloud.ln-c.net/api/v4/projects/504/packages/npm/:_authToken=${CI_JOB_TOKEN}" >> .npmrc
- for i in $(find packages/ -path '*/package.json' -type f); do jq -r '.publishConfig.registry="https://gitlab.cloud.ln-c.net/api/v4/projects/504/packages/npm/"' $i > $i.tmp && rm $i && mv $i.tmp $i; done
- pnpm publish --no-git-checks -r --tag latest

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

4
.husky/prepush Executable file

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

12
.lgtm.yml Normal file

@ -0,0 +1,12 @@
# @see https://help.semmle.com/lgtm-enterprise/user/help/lgtm.yml-configuration-file.html
# @template https://lgtm.com/static/downloads/lgtm.template.yml
queries:
- exclude: js/use-before-declaration
- exclude: js/polynomial-redos
extraction:
javascript:
index:
filters:
- exclude: "sites/x6-sites/static"

1
.npmrc

@ -1 +0,0 @@
strict-peer-dependencies=false

@ -1,9 +1,9 @@
*.md
*.sh
*.yml
*.svg
*.gif
*.log
*.md
.DS_Store
CNAME
AUTHORS
@ -11,9 +11,6 @@ LICENSE
es/
lib/
dist/
public/
.dumi/
coverage/
sites/public
sites/x6-sites/static/demos
csstype.ts
ui.js

@ -12,17 +12,13 @@
"@semantic-release/commit-analyzer",
{
"releaseRules": [
{ "revert": true, "release": "patch" },
{ "type": "feat", "release": "minor" },
{ "type": "build", "release": "patch" },
{ "type": "ci", "release": "patch" },
{ "type": "chore", "release": "patch" },
{ "type": "docs", "release": "patch" },
{ "type": "perf", "release": "patch" },
{ "type": "style", "release": "patch" },
{ "type": "test", "release": "patch" },
{ "type": "refactor", "release": "patch" },
{ "type": "ci", "release": false },
{ "type": "chore", "release": false },
{ "scope": "no-release", "release": false }
{ "type": "style", "release": "patch" },
{ "type": "test", "release": "patch" }
]
}
],
@ -31,7 +27,7 @@
[
"@semantic-release/npm",
{
"npmPublish": true
"npmPublish": false
}
],
[

@ -15,11 +15,6 @@
"no-invalid-double-slash-comments": null,
"no-descending-specificity": null,
"declaration-empty-line-before": null,
"no-duplicate-selectors": null,
"value-no-vendor-prefix": null,
"selector-pseudo-class-no-unknown": null,
"selector-class-pattern": null,
"keyframes-name-pattern": null,
"number-max-precision": null
"no-duplicate-selectors": null
}
}

@ -2,46 +2,75 @@
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
Examples of behavior that contributes to creating a positive environment
include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a professional setting
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at antv@antfin.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at antv@antfin.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq

@ -1,6 +1,7 @@
# Contribution Guide
If you have any comment or advice, please report your [issue](https://github.com/antvis/x6/issues), or make any change as you wish and submit a [PR](https://github.com/antvis/x6/pulls).
If you have any comment or advice, please report your [issue](https://github.com/antvis/x6/issues),
or make any change as you wish and submit a [PR](https://github.com/antvis/x6/pulls).
## Reporting New Issues

@ -45,7 +45,8 @@ $ git push origin branch-name
### Commit 提交规范
根据 [angular 规范](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format)提交 commit这样 history 看起来更加清晰,还可以自动生成 changelog。
根据 [angular 规范](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format)提交 commit
这样 history 看起来更加清晰,还可以自动生成 changelog。
```xml
<type>(<scope>): <subject>
@ -120,7 +121,7 @@ X6 基于 [semver](http://semver.org/lang/zh-CN/) 语义化版本号进行发布
### 发布策略
在每个大版本的发布中,都会有一个 PM他在发布的不同阶段负有以下职责
在每个大版本的发布中都会有一个PM他在发布的不同阶段负有以下职责
#### 准备工作:

@ -1,148 +1,88 @@
91jojo <jstxhl@live.com>
@thinkinggis <lzx199065@gmail.com>
Aflext Yang <aflext@gmail.com>
BARM <284942955@qq.com>
CJrZhang <39872522+CJrZhang@users.noreply.github.com>
Candy <563378816@qq.com>
Chaoqi ZHANG <prncoprs@163.com>
Claudiu Ivan <contact@claudiu-ivan.com>
Clifford Fajardo <cliffordfajardo@users.noreply.github.com>
Chaoqi <HAN>
Clifford <ajard>
DaiGang <42136433+daigang666@users.noreply.github.com>
David <36500514+qiufeihong2018@users.noreply.github.com>
Dong <48054715+halodong@users.noreply.github.com>
Draco <Draco.coder@gmail.com>
Eve-Sama <17764594863@163.com>
Eve-Sama <948832626@qq.com>
Frank William <65594180+ai-qing-hai@users.noreply.github.com>
Gomi <gxy880520@qq.com>
Gossypol <31892817+gossypol@users.noreply.github.com>
HQidea <HQidea@users.noreply.github.com>
ImgBotApp <ImgBotHelp@gmail.com>
Indigo-w <59961969+Indigo-w@users.noreply.github.com>
Indomi <indomi126@gmail.com>
JackyChen02 <70377567+JackyChen02@users.noreply.github.com>
James Tsang <wtzeng1@gmail.com>
JasonSun <42314340+LolipopJ@users.noreply.github.com>
Jie <51285767+DimplesY@users.noreply.github.com>
Jimwan <897527394@qq.com>
Jinxing Lin <172601673@qq.com>
Jógvan Olsen <jogvanolsen@hotmail.com>
Ken Geis <geis.ken@gmail.com>
Kent Wood <minzojian@hotmail.com>
KevinXi <48853785+Sorryhx@users.noreply.github.com>
Ko.Rei <32183014+Ko-Rei@users.noreply.github.com>
LNAhri <lukas@lukas-craft.de>
Libin Song <songlibin1994@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 Zhou <lloydzhou@users.noreply.github.com>
Lloyd <ho>
Lyn <47809781+lyn-boyu@users.noreply.github.com>
MOMO <329053928@qq.com>
Mingfei <az8641683@163.com>
Mingfei Ding <35296199+aMoonkin@users.noreply.github.com>
MrMengJ <2646973632@qq.com>
Naveen <172697+naveensrinivasan@users.noreply.github.com>
NewByVector <NewByVector@users.noreply.github.com>
OZiyuTao <127707782+OZiyuTao@users.noreply.github.com>
Olive.Wang <olivewind.wang@gmail.com>
Opportunity <opportunity@live.in>
Questions <chip@twostewards.com>
RuiLin Dong <48054715+halodong@users.noreply.github.com>
RuiLin <on>
SSC <273702440@qq.com>
Samuel Bodin <1637651+bodinsamuel@users.noreply.github.com>
Simon He <57086651+Simon-He95@users.noreply.github.com>
Sindori <441933726@qq.com>
Struggle Roue <47975400+struggleRoue@users.noreply.github.com>
Susan <527971893@qq.com>
Thomas Zeugner <tomsoftware@gmx.de>
Tony Wu <93302820+tonywu6@users.noreply.github.com>
Thomas <eugne>
Tony <>
Utopia <greatauk11@gmail.com>
WBbug <1056342711@qq.com>
XLZY <1017866168@qq.com>
Xia Wenqi <xiawenqi90@gmail.com>
Xingjian Zhang <44231913+THUzxj@users.noreply.github.com>
Yue JIN <40021217+kingyue737@users.noreply.github.com>
Zhenyu Hou <skyking_H@hotmail.com>
_XiaoTian <istianlei@qq.com>
aimagic <40253639+aimagic@users.noreply.github.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>
chenBoy <129058082+myBoringCode@users.noreply.github.com>
cuidong626 <cuidong1234@outlook.com>
cyrilluce <cyrilluce@gmail.com>
daigang <1210242662@qq.com>
doublewu <592581554@qq.com>
fang-ng4 <907648506@qq.com>
hylerrix <hylerrix@gmail.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>
leondt <168417370+leondt1@users.noreply.github.com>
lijing666 <lijing241@yeah.net>
linkun <33945539+linkun-wang@users.noreply.github.com>
linkun <linkun0922@163.com>
lopn <lopnxrp@126.com>
luchunwei <luchunwei@gmail.com>
luzhuang <364439895@qq.com>
lvhuiyang <ilvhuiyang@gmail.com>
markliao <liaodalin19903@126.com>
myzxlin <myzxlin@163.com>
newbyvector <vectorse@126.com>
niexq <1879633916@qq.com>
niexq <niexq@firstgrid.cn>
njshuisheng <34205271+njshuisheng@users.noreply.github.com>
nobugforever <84232410+mengYu-Jin@users.noreply.github.com>
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>
siaikin <abc1310054026@outlook.com>
vector <vectorse@126.com>
wenbei <38773084+wb-wenbei@users.noreply.github.com>
wgf <34190465+evelope@users.noreply.github.com>
wind X <35559153+XueMeijing@users.noreply.github.com>
wind <>
wjqsummer <52412389+wjqsummer@users.noreply.github.com>
wseven7677 <caoyu_92@126.com>
wtzeng1 <wtzeng1@gmail.com>
x6-bot <x6-bot@users.noreply.github.com>
xrkffgg <xrkffgg@gmail.com>
yaojin2070 <48686959+yaojin2070@users.noreply.github.com>
yinhf <yinhangfeng@gmail.com>
yuxuan-ctrl <83435945+yuxuan-ctrl@users.noreply.github.com>
zdc1111 <39116292+zdc1111@users.noreply.github.com>
zzyyu <33147972+zzyyu@users.noreply.github.com>
€alix <qq287649920@gmail.com>
一纸忘忧 <54543761+ikxin@users.noreply.github.com>
九思⚡⚡⚡ <2228429150@qq.com>
云剪者 <584518260@qq.com>
何腾飞 <avrin.live.cn@outlook.com>
你捉不到的this <2228429150@qq.com>
依枫 <deng25st@163.com>
偏右 <afc163@gmail.com>
大A <623037142@qq.com>
大卫 <36500514+qiufeihong2018@users.noreply.github.com>
小耀 <jinyue.gjy@antfin.com>
崖 <bubkoo.wy@gmail.com>
崖崖崖 <bubkoo.wy@gmail.com>
张子睿 <411489774@qq.com>
徒言 <chaimaoyuan@foxmail.com>
德布罗煜 <1056317718@qq.com>
文瑀 <wenyu.jqq@antfin.com>
映月 <38279397+orientMoon@users.noreply.github.com>
杨凌 <89915256@qq.com>
柏愚 <boyu.zlj@antfin.com>
粑粑超 <842486229@qq.com>
練氣士 <62411296+hongfaqiu@users.noreply.github.com>
诸岳 <dengfuping_private@163.com>
迷悟 <1010953107@qq.com>
金强强 <wenyu.jqq@antfin.com>
问崖 <bubkoo.wy@gmail.com>
问崖 <pengxingjian.pxj@antfin.com>

File diff suppressed because one or more lines are too long

Before

(image error) Size: 23 MiB

After

(image error) Size: 9.7 MiB

@ -1,6 +1,6 @@
MIT License
Copyright (c) 2021-2024 Alipay.inc
Copyright (c) 2021-2022 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

@ -17,15 +17,15 @@
<a href="/LICENSE"><img src="https://img.shields.io/github/license/antvis/x6?style=flat-square" alt="MIT License"></a>
<a href="https://www.typescriptlang.org"><img alt="Language" src="https://img.shields.io/badge/language-TypeScript-blue.svg?style=flat-square"></a>
<a href="https://github.com/antvis/x6/pulls"><img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=flat-square"></a>
<a href="https://x6.antv.antgroup.com/"><img alt="website" src="https://img.shields.io/static/v1?label=&labelColor=505050&message=website&color=0076D6&style=flat-square&logo=google-chrome&logoColor=0076D6"></a>
<a href="https://x6.antv.vision"><img alt="website" src="https://img.shields.io/static/v1?label=&labelColor=505050&message=website&color=0076D6&style=flat-square&logo=google-chrome&logoColor=0076D6"></a>
</p>
## Features
- 🌱   Easy-to-customize: based on well known SVG/HTML/CSS or React/Vue/Angular to custom nodes and edges
- 🚀   Out-of-the-box: built-in 10+ plugins, such as selection, dnd, redo/undo, snapline, minimap, etc.
- 🧲   Data-driven: base on MVC architecture, you can focus on data logic and business logic
- 💯   Highly-event-driven: you can react on any event that happens inside the graph
- 🌱 Easy-to-customize: based on well known SVG/HTML/CSS or React/Vue/Angular to custom nodes and edges
- 🚀 Out-of-the-box: built-in 10+ plugins, such as selection, dnd, redo/undo, snapline, minimap, etc.
- 🧲 Data-driven: base on MVC architecture, you can focus on data logic and business logic
- 💯 Highly-event-driven: you can react on any event that happens inside the graph
## Environment Support
@ -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
@ -57,7 +57,7 @@ import { Graph } from '@antv/x6'
const graph = new Graph({
container: document.getElementById('container'),
grid: true,
grid: true
})
const source = graph.addNode({
@ -84,13 +84,12 @@ graph.addEdge({
## Links
- [Documents](https://x6.antv.antgroup.com/tutorial/about)
- [Samples](https://x6.antv.antgroup.com/examples)
- [Documents](https://x6.antv.vision/zh/docs/tutorial/about)
- [Samples](https://x6.antv.vision/zh/examples/gallery)
- [Blog](https://www.yuque.com/antv/x6/gcinvi)
- [Versioning Release Note](https://www.yuque.com/antv/x6/bbfu6r)
- [FAQ](https://www.yuque.com/antv/x6/be9pfx)
- [Template](https://codesandbox.io/s/qosj0?file=/src/app.tsx)
- [awesome-x6](https://github.com/lloydzhou/awesome-x6)
- [CodeSanbox Template](https://codesandbox.io/s/qosj0?file=/src/app.tsx)
## Development

@ -6,34 +6,35 @@
<p align="center"><strong>提供简单易用的节点定制能力和开箱即用的交互组件方便我们快速搭建流程图、DAG 图、ER 图等图应用</strong></p>
<p align="center">
<a href="https://github.com/antvis/X6/actions/workflows/ci.yml"><img alt="build" src="https://img.shields.io/github/actions/workflow/status/antvis/x6/ci.yml?branch=master&style=for-the-badge&logo=github"></a>
<!-- <a href="https://app.codecov.io/gh/antvis/X6"><img alt="coverage" src="https://img.shields.io/codecov/c/gh/antvis/x6?logo=codecov&style=for-the-badge&token=15CO54WYUV"></a> -->
<a href="https://www.npmjs.com/package/@antv/x6"><img alt="NPM Package" src="https://img.shields.io/npm/v/@antv/x6.svg?logo=npm&style=for-the-badge"></a>
<a href="https://www.npmjs.com/package/@antv/x6"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@antv/x6?logo=npm&style=for-the-badge"></a>
<a href="https://github.com/antvis/X6/actions/workflows/ci.yml"><img alt="build" src="https://img.shields.io/github/workflow/status/antvis/x6/%F0%9F%91%B7%E3%80%80CI/master?logo=github&style=flat-square"></a>
<a href="https://app.codecov.io/gh/antvis/X6"><img alt="coverage" src="https://img.shields.io/codecov/c/gh/antvis/x6?logo=codecov&style=flat-square&token=15CO54WYUV"></a>
<a href="https://lgtm.com/projects/g/antvis/x6/context:javascript"><img alt="Language grade: JavaScript" src="https://img.shields.io/lgtm/grade/javascript/g/antvis/x6.svg?logo=lgtm&style=flat-square"></a>
<a href="https://www.npmjs.com/package/@antv/x6"><img alt="NPM Package" src="https://img.shields.io/npm/v/@antv/x6.svg?style=flat-square"></a>
<a href="https://www.npmjs.com/package/@antv/x6"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@antv/x6?logo=npm&style=flat-square"></a>
</p>
<p align="center">
<a href="/LICENSE"><img src="https://img.shields.io/github/license/antvis/x6?style=for-the-badge" alt="MIT License"></a>
<a href="https://www.typescriptlang.org"><img alt="Language" src="https://img.shields.io/badge/language-TypeScript-blue.svg?style=for-the-badge"></a>
<a href="https://github.com/antvis/x6/pulls"><img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=for-the-badge"></a>
<a href="https://x6.antv.antgroup.com"><img alt="website" src="https://img.shields.io/static/v1?label=&labelColor=505050&message=website&color=0076D6&style=for-the-badge&logo=google-chrome&logoColor=f5f5f5"></a>
<a href="/LICENSE"><img src="https://img.shields.io/github/license/antvis/x6?style=flat-square" alt="MIT License"></a>
<a href="https://www.typescriptlang.org"><img alt="Language" src="https://img.shields.io/badge/language-TypeScript-blue.svg?style=flat-square"></a>
<a href="https://github.com/antvis/x6/pulls"><img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=flat-square"></a>
<a href="https://x6.antv.vision"><img alt="website" src="https://img.shields.io/static/v1?label=&labelColor=505050&message=website&color=0076D6&style=flat-square&logo=google-chrome&logoColor=0076D6"></a>
</p>
## 特性
- 🌱  极易定制:支持使用 SVG/HTML/React/Vue/Angular 定制节点样式和交互
- 🚀  开箱即用:内置 10+ 图编辑配套扩展,如框选、对齐线、小地图等
- 🧲  数据驱动:基于 MVC 架构,用户更加专注于数据逻辑和业务逻辑
- 💯  事件驱动:完备的事件系统,可以监听图表内发生的任何事件
- 🌱 极易定制:支持使用 SVG/HTML/React/Vue/Angular 定制节点样式和交互
- 🚀 开箱即用:内置 10+ 图编辑配套扩展,如框选、对齐线、小地图等
- 🧲 数据驱动:基于 MVC 架构,用户更加专注于数据逻辑和业务逻辑
- 💯 事件驱动:完备的事件系统,可以监听图表内发生的任何事件
## 兼容环境
- 现代浏览器
- 现代浏览器和 IE11需要 polyfills
- 支持服务端渲染。
| [<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 |
| --- | --- | --- |
| last 2 versions | last 2 versions | last 2 versions |
| [<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 |
## 安装
@ -56,7 +57,7 @@ import { Graph } from '@antv/x6'
const graph = new Graph({
container: document.getElementById('container'),
grid: true,
grid: true
})
const source = graph.addNode({
@ -83,13 +84,12 @@ graph.addEdge({
## 链接
- [文档](http://x6.antv.antgroup.com/tutorial/about)
- [示例](http://x6.antv.antgroup.com/examples)
- [博客](https://www.yuque.com/antv/x6/huhla47wqalq5n7r)
- [文档](https://x6.antv.vision/zh/docs/tutorial/about)
- [示例](https://x6.antv.vision/zh/examples/gallery)
- [博客](https://www.yuque.com/antv/x6/gcinvi)
- [更新日志](https://www.yuque.com/antv/x6/bbfu6r)
- [常见问题](https://www.yuque.com/antv/x6/tox1ukbz5cw57qfy)
- [复现模板](https://codesandbox.io/s/mo-ban-55i8dp)
- [awesome-x6](https://github.com/lloydzhou/awesome-x6)
- [常见问题](https://www.yuque.com/antv/x6/be9pfx)
- [CodeSanbox 模板](https://codesandbox.io/s/qosj0?file=/src/app.tsx)
## 本地开发
@ -111,7 +111,7 @@ pnpm run start
如果希望参与到 X6 的开发中,请遵从我们的[贡献指南](/CONTRIBUTING.zh-CN.md)。如果你贡献度足够活跃,你可以申请成为社区协作者。
<a href="https://github.com/antvis/x6/graphs/contributors">
<img src="https://raw.githubusercontent.com/antvis/X6/master/CONTRIBUTORS.svg" alt="Contributors" />
<img src="/CONTRIBUTORS.svg" alt="Contributors" width="740" />
</a>
## 开源协议

@ -2,7 +2,8 @@
## Supported Versions
Use this section to tell people about which versions of your project are currently being supported with security updates.
Use this section to tell people about which versions of your project are
currently being supported with security updates.
| Version | Supported |
| ------- | ------------------ |
@ -15,4 +16,6 @@ Use this section to tell people about which versions of your project are current
Use this section to tell people how to report a vulnerability.
Tell them where to go, how often they can expect to get an update on a reported vulnerability, what to expect if the vulnerability is accepted or declined, etc.
Tell them where to go, how often they can expect to get an update on a
reported vulnerability, what to expect if the vulnerability is accepted or
declined, etc.

File diff suppressed because it is too large Load Diff

@ -1,57 +1,61 @@
{
"private": true,
"name": "@antv/x6-example-features",
"version": "2.1.1",
"version": "1.0.1",
"scripts": {
"start": "export NODE_OPTIONS=--openssl-legacy-provider && umi dev",
"start": "umi dev",
"build": "umi build",
"lint": "eslint 'src/**/*.{js,ts}?(x)' --fix"
"lint": "eslint 'src/**/*.{js,ts}?(x)' --fix",
"precommit": "lint-staged"
},
"dependencies": {
"@antv/hierarchy": "^0.6.8",
"@antv/x6": "workspace:latest",
"@antv/x6-plugin-clipboard": "workspace:latest",
"@antv/x6-plugin-dnd": "workspace:latest",
"@antv/x6-plugin-export": "workspace:latest",
"@antv/x6-plugin-history": "workspace:latest",
"@antv/x6-plugin-keyboard": "workspace:latest",
"@antv/x6-plugin-minimap": "workspace:latest",
"@antv/x6-plugin-scroller": "workspace:latest",
"@antv/x6-plugin-selection": "workspace:latest",
"@antv/x6-plugin-snapline": "workspace:latest",
"@antv/x6-plugin-stencil": "workspace:latest",
"@antv/x6-plugin-transform": "workspace:latest",
"@antv/x6-react-components": "workspace:latest",
"@antv/x6-react-shape": "workspace:latest",
"@antv/x6": "1.1.1",
"@antv/x6-plugin-clipboard": "1.0.3",
"@antv/x6-plugin-dnd": "1.0.3",
"@antv/x6-plugin-history": "1.0.3",
"@antv/x6-plugin-keyboard": "1.0.3",
"@antv/x6-plugin-minimap": "1.0.3",
"@antv/x6-plugin-scroller": "1.1.1",
"@antv/x6-plugin-selection": "1.0.3",
"@antv/x6-plugin-snapline": "1.0.3",
"@antv/x6-plugin-stencil": "1.0.3",
"@antv/x6-plugin-transform": "1.0.3",
"@antv/x6-plugin-export": "1.0.3",
"@antv/x6-react-components": "1.1.1",
"@antv/x6-react-shape": "1.0.3",
"antd": "^4.4.2",
"classnames": "^2.2.6",
"dagre": "^0.8.5",
"elkjs": "^0.8.2",
"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",
"@types/jest": "^29.2.4",
"@types/jest": "^25.2.1",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/react-helmet": "^6.0.0",
"@types/react-test-renderer": "^18.0.0",
"babel-plugin-import": "^1.13.5",
"eslint": "^8.29.0",
"@types/react-test-renderer": "^16.0.3",
"eslint": "^7.16.0",
"eslint-config-umi": "^1.4.0",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-flowtype": "^4.7.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.11.1",
"lint-staged": "^10.5.3",
"react-test-renderer": "^16.7.0",
"umi": "^2.9.0",
"umi-plugin-react": "^1.8.0",
"umi-types": "^0.3.0",
"@fluidframework/aqueduct": "^0.33.5",
"@fluidframework/get-tinylicious-container": "^0.33.5",
"@fluidframework/map": "^0.33.5"
"babel-plugin-import": "^1.13.5"
},
"lint-staged": {
"src/**/*.ts": [
"eslint --fix"
]
},
"engines": {
"node": ">=8.0.0"

@ -1,52 +0,0 @@
/*!
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
*/
import type { Graph } from '@antv/x6'
import { getDefaultObjectFromContainer } from '@fluidframework/aqueduct'
import { getTinyliciousContainer } from '@fluidframework/get-tinylicious-container'
import { GraphDataObjectContainerRuntimeFactory } from './containerCode'
import type { IGraphDataObject } from './dataObject'
import { connectGraph } from './view'
// In interacting with the service, we need to be explicit about whether we're creating a new document vs. loading
// an existing one. We also need to provide the unique ID for the document we are creating or loading from.
// In this app, we'll choose to create a new document when navigating directly to http://localhost:8080. For the ID,
// we'll choose to use the current timestamp. We'll also choose to interpret the URL hash as an existing document's
// ID to load from, so the URL for a document load will look something like http://localhost:8080/#1596520748752.
// These policy choices are arbitrary for demo purposes, and can be changed however you'd like.
const createNew = false
// if (location.hash.length === 0) {
// createNew = true;
// location.hash = Date.now().toString();
// }
// const documentId = location.hash.substring(1);
// document.title = documentId;
export async function start(graph: Graph): Promise<void> {
// The getTinyliciousContainer helper function facilitates loading our container code into a Container and
// connecting to a locally-running test service called Tinylicious. This will look different when moving to a
// production service, but ultimately we'll still be getting a reference to a Container object. The helper
// function takes the ID of the document we're creating or loading, the container code to load into it, and a
// flag to specify whether we're creating a new document or loading an existing one.
const container = await getTinyliciousContainer(
'test',
GraphDataObjectContainerRuntimeFactory,
createNew,
)
// In this app, we know our container code provides a default data object that is an IGraphDataObject.
const graphDataObject: IGraphDataObject =
await getDefaultObjectFromContainer<IGraphDataObject>(container)
connectGraph(graphDataObject, graph)
// Reload the page on any further hash changes, e.g. in case you want to paste in a different document ID.
// window.addEventListener('hashchange', () => {
// location.reload();
// });
}

@ -1,24 +0,0 @@
/*!
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
*/
import { ContainerRuntimeFactoryWithDefaultDataStore } from '@fluidframework/aqueduct'
import { GraphDataObjectInstantiationFactory } from './dataObject'
/**
* The GraphDataObjectContainerRuntimeFactory is the container code for our scenario.
*
* Since we only need to instantiate and retrieve a single dice roller for our scenario, we can use a
* ContainerRuntimeFactoryWithDefaultDataStore. We provide it with the type of the data object we want to create
* and retrieve by default, and the registry entry mapping the type to the factory.
*
* This container code will create the single default data object on our behalf and make it available on the
* Container with a URL of "/", so it can be retrieved via container.request("/").
*/
export const GraphDataObjectContainerRuntimeFactory =
new ContainerRuntimeFactoryWithDefaultDataStore(
GraphDataObjectInstantiationFactory,
new Map([GraphDataObjectInstantiationFactory.registryEntry]),
)

@ -1,252 +0,0 @@
/*!
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
*/
import type { EventEmitter } from 'events'
import { StringExt } from '@antv/x6'
import { DataObject, DataObjectFactory } from '@fluidframework/aqueduct'
import type { IFluidHandle } from '@fluidframework/core-interfaces'
import type { IValueChanged } from '@fluidframework/map'
import { SharedMap } from '@fluidframework/map'
/**
* IGraphDataObject describes the public API surface for our graph data object.
*/
export interface IGraphDataObject extends EventEmitter {
cells: SharedMap
users: SharedMap
userId: string
on(event: string, listener: (id: string, attributes: any) => void): this
on(
event: string,
listener: (id: string, attributes: any, prevAttributes: any) => void,
): this
setCell(id: string, attributes: any): void
deleteCell(id: string): void
updateUser(attributes: any): void
}
export interface IUser {
id: string
name: string
color: string
x?: number
y?: number
selection?: string
}
export const initialCells = [
{
id: 'test_node_1',
x: 100,
y: 100,
shape: 'dag-node',
data: {
id: 'test_node_1',
codeName: 'ss_sgd_train',
label: '逻辑回归',
status: 0,
},
ports: [
{
id: 'test_node_1_input_0',
group: 'top',
type: 'sf.table.vtable',
},
{
id: 'test_node_1_input_1',
group: 'top',
type: 'sf.table.individual',
},
{
id: 'test_node_1_output_0',
group: 'bottom',
type: 'sf.model.ss_sgb',
},
],
},
{
id: 'test_node_2',
x: 300,
y: 300,
shape: 'dag-node',
data: {
id: 'test_node_2',
codeName: 'ss_sgd_predict',
label: '模型预测',
status: 2,
},
ports: [
{
id: 'test_node_2_input_0',
group: 'top',
type: 'sf.model.ss_sgb',
},
{
id: 'test_node_2_input_1',
group: 'top',
type: 'sf.table.vtable',
},
{
id: 'test_node_2_output_0',
group: 'bottom',
type: 'sf.table.individual',
},
],
},
{
shape: 'dag-edge',
id: 'test_node_1_output_0__test_node_2_input_0',
source: {
cell: 'test_node_1',
port: 'test_node_1_output_0',
},
target: {
cell: 'test_node_2',
port: 'test_node_2_input_0',
},
data: {
id: 'test_node_1_output_0__test_node_2_input_0',
source: 'test_node_1',
sourceAnchor: 'test_node_1_output_0',
target: 'test_node_2',
targetAnchor: 'test_node_2_input_0',
},
zIndex: -1,
},
]
/**
* The GraphDataObject is our data object that implements the IGraphDataObject interface.
*/
export class GraphDataObject extends DataObject implements IGraphDataObject {
/**
* initializingFirstTime is run only once by the first client to create the DataObject. Here we use it to
* initialize the state of the DataObject.
*/
private _cells: SharedMap
private _users: SharedMap
protected async initializingFirstTime() {
const cellsMap = SharedMap.create(this.runtime)
const usersMap = SharedMap.create(this.runtime)
this.root.set('cellsMap', cellsMap.handle)
this.root.set('usersMap', usersMap.handle)
await this.initMaps()
initialCells.forEach((cell) => {
this.setCell(cell.id, { ...cell })
})
}
/**
* hasInitialized is run by each client as they load the DataObject. Here we use it to set up usage of the
* DataObject, by registering an event listener for graph data object.
*/
protected async hasInitialized() {
await this.initMaps()
this.cells.on('valueChanged', (changed: IValueChanged) => {
this.emit('cellChanged', changed.key, this.cells.get(changed.key))
})
this.users.on('valueChanged', (changed: IValueChanged) => {
this.emit(
'userChanged',
changed.key,
this.users.get(changed.key),
changed.previousValue,
)
})
this.addUser()
}
private async initMaps() {
if (!this._cells) {
const mapHandle = this.root.get<IFluidHandle<SharedMap>>('cellsMap')
if (!mapHandle) throw Error('Something went wrong')
this._cells = await mapHandle.get()
}
if (!this._users) {
const mapHandle = this.root.get<IFluidHandle<SharedMap>>('usersMap')
if (!mapHandle) throw Error('Something went wrong')
this._users = await mapHandle.get()
}
}
public get cells() {
return this._cells
}
public get users() {
return this._users
}
public setCell(id: string, attributes: any) {
this.cells.set(id, attributes)
}
public deleteCell(id: string) {
if (this.cells.has(id)) {
this.cells.delete(id)
}
}
public userId: string
public addUser() {
if (
sessionStorage.getItem('userId') &&
this.users.get<IUser>(<string>sessionStorage.getItem('userId'))
) {
this.userId = <string>sessionStorage.getItem('userId') //This session might have has a user
} else {
const user: IUser = {
id: StringExt.uuid(),
name: 'Fake',
color: getRandomColor(),
}
this.userId = user.id
sessionStorage.setItem('userId', user.id)
this.users.set(user.id, user)
}
}
public getUser(): IUser | undefined {
return this.users.get<IUser>(this.userId)
}
public updateUser(attributes: any) {
return this.users.set(this.userId, { ...this.getUser(), ...attributes })
}
}
function getRandomColor(): string {
const letters = '0123456789ABCDEF'
let color = '#'
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)]
}
return color
}
/**
* The DataObjectFactory is used by Fluid Framework to instantiate our DataObject. We provide it with a unique name
* and the constructor it will call. In this scenario, the third and fourth arguments are not used.
*/
export const GraphDataObjectInstantiationFactory = new DataObjectFactory(
'graph-data-object',
GraphDataObject,
[],
{},
)

@ -1 +0,0 @@
export * from './app'

@ -1,92 +0,0 @@
import type { Graph } from '@antv/x6'
import { Vector } from '@antv/x6'
import type { IGraphDataObject, IUser } from './dataObject'
export function connectGraph(graphDataObject: IGraphDataObject, graph: Graph) {
const updateCell = (id: string, attributes: any) => {
const cell = graph.getCellById(id)
if (cell) {
if (attributes) {
cell.setProp(attributes)
} else {
cell.remove()
}
} else {
if (!attributes) return
if (attributes.shape === 'dag-edge') {
graph.addEdge(attributes)
} else if (attributes.shape === 'dag-node') {
graph.addNode(attributes)
}
}
}
graphDataObject.cells.forEach((cell) => updateCell(cell.id, cell))
graphDataObject.on('cellChanged', updateCell)
graph.on('cell:added', function ({ cell }) {
graphDataObject.setCell(cell.id, cell.prop())
})
graph.on('cell:change:*', function ({ cell }) {
graphDataObject.setCell(cell.id, cell.prop())
})
graph.on('cell:removed', function ({ cell }) {
graphDataObject.deleteCell(cell.id)
})
const remoteCursors: { [userId: string]: Vector } = {}
graphDataObject.on(
'userChanged',
function (id: string, user: IUser, previous: IUser) {
if (user.selection) {
const cell = graph.getCellById(user.selection)
if (cell) {
graph.select(cell)
}
}
if (
previous &&
previous.selection &&
previous.selection !== user.selection
) {
const cell = graph.getCellById(previous.selection)
if (cell) {
graph.unselect(cell)
}
}
if (id === graphDataObject.userId) return
let circle: Vector
if (!remoteCursors[id]) {
circle = Vector.create('circle').attr({
r: 5,
'pointer-events': 'none',
})
circle.appendTo(graph.view.decorator)
remoteCursors[id] = circle
} else {
circle = remoteCursors[id]
}
circle.attr({ cx: user.x || 0, cy: user.y || 0, fill: user.color })
},
)
graph.container.addEventListener('mousemove', (evt: any) => {
const point = graph.clientToLocal(evt.clientX, evt.clientY)
graphDataObject.updateUser(point.toJSON())
})
graph.on('node:click', function ({ cell }) {
graphDataObject.updateUser({ selection: cell.id })
})
graph.on('blank:click', function () {
graphDataObject.updateUser({ selection: '' })
})
}

@ -7,17 +7,17 @@
.nav {
position: absolute;
z-index: 101;
top: 0;
bottom: 0;
left: 0;
z-index: 101;
box-sizing: border-box;
width: 220px;
padding: 0 16px;
font-size: 13px;
overflow-x: hidden;
overflow-y: auto;
font-size: 13px;
width: 220px;
padding: 0 16px;
border-right: 1px solid #e9e9e9;
box-sizing: border-box;
ul {
padding-left: 16px;
@ -29,11 +29,11 @@
}
.content {
flex-grow: 1;
box-sizing: border-box;
margin-left: 220px;
padding: 34px;
overflow-x: hidden;
overflow-y: auto;
background: #fff;
flex-grow: 1;
margin-left: 220px;
background: #ffffff;
padding: 34px;
}

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

@ -35,7 +35,11 @@ export default class Example extends React.Component {
},
autoResize: true,
})
graph.use(new Scroller())
graph.use(
new Scroller({
enabled: true,
}),
)
}
refContainer1 = (container: HTMLDivElement) => {

@ -10,6 +10,7 @@ export default class Example extends React.Component {
container: this.container,
width: 800,
height: 600,
grid: true,
})
const source = graph.addNode({

@ -374,6 +374,7 @@ export default class Example extends React.Component {
})
const selection = new Selection({
enabled: true,
multiple: true,
rubberEdge: true,
rubberNode: true,
@ -381,7 +382,7 @@ export default class Example extends React.Component {
rubberband: true,
})
graph.use(selection)
graph.use(new Snapline())
graph.use(new Snapline({ enabled: true }))
graph.on('edge:connected', ({ edge }) => {
edge.attr({

@ -8,15 +8,13 @@
border: 1px solid #c2c8d5;
border-left: 4px solid #1890ff;
border-radius: 4px;
box-shadow: 0 2px 5px 1px rgb(0 0 0 / 6%);
box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
img {
flex-shrink: 0;
width: 20px;
height: 20px;
flex-shrink: 0;
margin-left: 8px;
}
.label {
display: inline-block;
flex-shrink: 0;
@ -25,19 +23,15 @@
color: #666;
font-size: 12px;
}
.status {
flex-shrink: 0;
}
&.success {
border-left: 4px solid #52c41a;
}
&.failed {
border-left: 4px solid #ff4d4f;
}
&.running .status img {
animation: spin 1s linear infinite;
}
@ -49,13 +43,11 @@
border-radius: 2px;
box-shadow: 0 0 0 4px #d4e8fe;
}
.node.success {
border-color: #52c41a;
border-radius: 2px;
box-shadow: 0 0 0 4px #ccecc0;
}
.node.failed {
border-color: #ff4d4f;
border-radius: 2px;
@ -88,7 +80,6 @@
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}

@ -4,7 +4,6 @@
visibility: hidden;
cursor: pointer;
}
&:hover image {
visibility: visible;
}

@ -1,5 +1,5 @@
import React from 'react'
import { Graph, Node } from '@antv/x6'
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'
@ -184,9 +184,13 @@ export default class Example extends React.Component {
connectionPoint: 'anchor',
},
})
const selection = new Selection()
const selection = new Selection({
enabled: true,
})
graph.use(selection)
const keyboard = new Keyboard()
const keyboard = new Keyboard({
enabled: true,
})
graph.use(keyboard)
const render = () => {
@ -208,15 +212,12 @@ export default class Example extends React.Component {
return 'right'
},
})
const cells: Cell[] = []
const traverse = (hierarchyItem: HierarchyResult) => {
if (hierarchyItem) {
const { data, children } = hierarchyItem
// 检查当前遍历的节点已经存在还是需要新添加?
if (graph.hasCell(data.id)) {
const node = graph.getCellById(data.id)
node.prop('position', { x: hierarchyItem.x, y: hierarchyItem.y })
} else {
graph.addNode({
cells.push(
graph.createNode({
id: data.id,
shape: data.type === 'topic-child' ? 'topic-child' : 'topic',
x: hierarchyItem.x,
@ -225,18 +226,13 @@ export default class Example extends React.Component {
height: data.height,
label: data.label,
type: data.type,
})
}
}),
)
if (children) {
children.forEach((item: HierarchyResult) => {
const { id, data } = item
// 先遍历子节点里面包含创建逻辑如果画布没有开启async的时候创建边会提示找不到target节点
traverse(item)
const eid = `${hierarchyItem.id}-->${id}`
// 检查当前边是否已经存在
if (!graph.hasCell(eid)) {
graph.addEdge({
id: eid,
cells.push(
graph.createEdge({
shape: 'mindmap-edge',
source: {
cell: hierarchyItem.id,
@ -261,13 +257,15 @@ export default class Example extends React.Component {
name: 'left',
},
},
})
}
}),
)
traverse(item)
})
}
}
}
traverse(result)
graph.resetCells(cells)
graph.centerContent()
}
@ -305,14 +303,9 @@ export default class Example extends React.Component {
if (dataItem) {
let item: MindMapData | null = null
const length = dataItem.children ? dataItem.children.length : 0
let nid = `${id}-${length + 1}`
if (graph.hasCell(nid)) {
// 如果通过length + 1拼接出来的节点id在画布中存在了就在id后面加上随机数
nid = nid + Math.random()
}
if (type === 'topic') {
item = {
id: nid,
id: `${id}-${length + 1}`,
type: 'topic-branch',
label: `分支主题${length + 1}`,
width: 100,
@ -320,7 +313,7 @@ export default class Example extends React.Component {
}
} else if (type === 'topic-branch') {
item = {
id: nid,
id: `${id}-${length + 1}`,
type: 'topic-child',
label: `子主题${length + 1}`,
width: 60,
@ -341,16 +334,10 @@ export default class Example extends React.Component {
const removeNode = (id: string) => {
const res = findItem(data, id)
const parentItem = res?.parent
const nodeItem = res?.node
if (parentItem && parentItem.children) {
const { children } = parentItem
const dataItem = res?.parent
if (dataItem && dataItem.children) {
const { children } = dataItem
const index = children.findIndex((item) => item.id === id)
// 删除的时候先删节点以及可能存在的子节点再调用render对data数据进行遍历
if (nodeItem && nodeItem.children) {
nodeItem.children.forEach((item) => graph.removeCell(item.id))
}
graph.removeCell(id)
return children.splice(index, 1)
}
return null

@ -18,13 +18,19 @@ export default class Example extends React.Component {
height: 600,
grid: true,
})
const clipboard = new Clipboard()
const clipboard = new Clipboard({
enabled: true,
useLocalStorage: true,
})
const selection = new Selection({
enabled: true,
rubberband: true,
multiple: true,
strict: true,
})
const keyboard = new Keyboard()
const keyboard = new Keyboard({
enabled: true,
})
graph.use(clipboard)
graph.use(selection)

@ -2,25 +2,24 @@
position: relative;
}
.validating::after {
.validating:after {
position: absolute;
top: 4px;
left: 4px;
content: ' ';
display: block;
width: 50px;
height: 50px;
border: 6px solid #873bf4;
border-color: #873bf4 transparent;
border-radius: 50%;
border: 6px solid #873bf4;
border-color: #873bf4 transparent #873bf4 transparent;
animation: lds-dual-ring 1.2s linear infinite;
content: ' ';
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}

@ -2,14 +2,14 @@
.x6-example-wrap {
width: 100%;
height: 100%;
background-color: #fff;
background-color: #ffffff;
.left-side {
position: fixed;
top: 0;
bottom: 0;
left: 24px;
width: 336px;
left: 24px;
top: 0px;
bottom: 0;
padding: 0 8px;
overflow-x: visible;
overflow-y: auto;
@ -17,18 +17,18 @@
.right-side {
position: fixed;
top: 0;
right: 24px;
bottom: 0;
width: 336px;
padding: 0 8px;
top: 0px;
bottom: 0;
overflow-x: visible;
overflow-y: auto;
}
.ant-card {
margin-top: 24px;
box-shadow: 0 0 10px 1px #e9e9e9;
margin-top: 24px;
}
.ant-row-flex {
@ -36,14 +36,14 @@
}
.slider-value {
display: inline-block;
margin-left: 8px;
padding: 3px 7px;
color: #333;
font-size: 12px;
line-height: 1.25;
background: #eee;
color: #333333;
padding: 3px 7px;
border-radius: 10px;
display: inline-block;
font-size: 12px;
margin-left: 8px;
line-height: 1.25;
}
.x6-graph {
@ -52,15 +52,15 @@
.x6-node {
path {
transition: fill 0.1s;
fill: #6a6c8a;
stroke-width: 0;
stroke-width: 0px;
transition: fill 0.1s;
}
text {
font-weight: lighter;
font-size: 12px;
fill: #fff;
font-size: 12px;
font-weight: lighter;
}
&:hover path {
@ -80,37 +80,37 @@
}
.bbox {
transition-duration: 0.5s;
transition-property: stroke-opacity;
pointer-events: none;
fill: none;
stroke: #16a085;
stroke-width: 2;
stroke-opacity: 0;
fill: none;
transition-property: stroke-opacity;
transition-duration: 0.5s;
pointer-events: none;
}
.axis {
pointer-events: none;
stroke: #95a5a6;
stroke-dasharray: 2, 4;
stroke-width: 1;
pointer-events: none;
}
.padding {
transition-duration: 1s;
transition-property: stroke-opacity;
pointer-events: none;
stroke: #1abc9c;
stroke-opacity: 0;
transition-property: stroke-opacity;
transition-duration: 1s;
pointer-events: none;
}
.grid {
transition-duration: 1s;
transition-property: stroke-opacity;
pointer-events: none;
stroke: #16a085;
stroke-width: 0.5;
stroke-opacity: 0;
transition-property: stroke-opacity;
transition-duration: 1s;
pointer-events: none;
}
.active {

@ -1,99 +0,0 @@
import React from 'react'
import { Graph } from '@antv/x6'
import { Keyboard } from '@antv/x6-plugin-keyboard'
import { Selection } from '@antv/x6-plugin-selection'
import { History } from '@antv/x6-plugin-history'
import { Button } from 'antd'
import '../index.less'
export default class Example extends React.Component {
private container: HTMLDivElement
private graph: Graph
componentDidMount() {
const graph = new Graph({
container: this.container,
width: 800,
height: 600,
grid: true,
})
const selection = new Selection()
const keyboard = new Keyboard()
const history = new History({ stackSize: 5 })
graph.use(selection)
graph.use(keyboard)
graph.use(history)
graph.addNode({
x: 50,
y: 50,
width: 100,
height: 40,
attrs: { label: { text: 'A' } },
})
graph.addNode({
x: 250,
y: 50,
width: 100,
height: 40,
attrs: { label: { text: 'B' } },
})
graph.addNode({
x: 350,
y: 150,
width: 100,
height: 40,
attrs: { label: { text: 'C' } },
})
keyboard.bindKey('backspace', () => {
graph.removeCells(selection.getSelectedCells())
})
keyboard.bindKey('command+z', () => {
this.undo()
})
keyboard.bindKey('command+shift+z', () => {
this.redo()
})
this.graph = graph
}
refContainer = (container: HTMLDivElement) => {
this.container = container
}
enablePlugins = () => {
this.graph.enablePlugins('history')
}
disablePlugins = () => {
this.graph.disablePlugins('history')
}
undo = () => {
const history = this.graph.getPlugin('history') as History
history.undo()
}
redo = () => {
const history = this.graph.getPlugin('history') as History
history.redo()
}
render() {
return (
<div className="x6-graph-wrap">
<div ref={this.refContainer} className="x6-graph" />
<Button onClick={this.enablePlugins}>enable</Button>
<Button onClick={this.disablePlugins}>disable</Button>
<Button onClick={this.undo}>undo</Button>
<Button onClick={this.redo}>redo</Button>
</div>
)
}
}

@ -1,9 +1,9 @@
.custom-html {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #000;
font-size: 16px;
border: 1px solid #000;

@ -1,27 +1,27 @@
.x6-graph-wrap {
width: 100%;
height: 100%;
padding: 32px 0;
background-color: #ffffff;
overflow: auto;
background-color: #fff;
padding: 32px 0;
> h1 {
display: block;
width: 800px;
margin: 0 auto 32px;
margin: 0 auto 32px auto;
}
}
.x6-graph-tools {
width: 800px;
margin: 0 auto 32px;
margin: 0 auto 32px auto;
}
.x6-graph {
width: 100%;
height: 100%;
margin: 0 auto;
box-shadow: 0 0 10px 1px #e9e9e9;
margin: 0 auto;
}
.x6-node-selected {

@ -179,10 +179,6 @@ const dataSource = [
example: 'animation/transition',
description: '动画',
},
{
example: 'history',
description: '时光回溯',
},
].map((item, index) => ({ key: index, ...item }))
const columns = [

@ -2,12 +2,10 @@ import React from 'react'
import { Graph } from '@antv/x6'
import { Keyboard } from '@antv/x6-plugin-keyboard'
import { Selection } from '@antv/x6-plugin-selection'
import { Button } from 'antd'
import '../index.less'
export default class Example extends React.Component {
private container: HTMLDivElement
private graph: Graph
componentDidMount() {
const graph = new Graph({
@ -17,8 +15,8 @@ export default class Example extends React.Component {
grid: true,
})
const selection = new Selection()
const keyboard = new Keyboard()
const selection = new Selection({ enabled: true })
const keyboard = new Keyboard({ enabled: true })
graph.use(selection)
graph.use(keyboard)
@ -49,28 +47,16 @@ export default class Example extends React.Component {
keyboard.bindKey('backspace', () => {
graph.removeCells(selection.getSelectedCells())
})
this.graph = graph
}
refContainer = (container: HTMLDivElement) => {
this.container = container
}
enablePlugins = () => {
this.graph.enablePlugins('keyboard')
}
disablePlugins = () => {
this.graph.disablePlugins('keyboard')
}
render() {
return (
<div className="x6-graph-wrap">
<div ref={this.refContainer} className="x6-graph" />
<Button onClick={this.enablePlugins}>enable</Button>
<Button onClick={this.disablePlugins}>disable</Button>
</div>
)
}

@ -1,25 +0,0 @@
.minimap-app {
position: relative;
padding: 0;
font-family: sans-serif;
.app-btns {
margin-bottom: 8px;
}
.app-minimap {
position: absolute;
bottom: 0;
left: 620px;
width: 200px;
height: 150px;
}
.x6-widget-minimap-viewport {
border: 2px solid #8f8f8f;
}
.x6-widget-minimap-viewport-zoom {
border: 2px solid #8f8f8f;
}
}

@ -1,168 +0,0 @@
import * as React from 'react'
import { Graph } from '@antv/x6'
import { MiniMap } from '@antv/x6-plugin-minimap'
import { Scroller } from '@antv/x6-plugin-scroller'
import { Radio } from 'antd'
import { SimpleNodeView } from './simple-view'
import './index.less'
const options = [
{ label: '简单视图', value: 'simple' },
{ label: '详细视图', value: 'detailed' },
]
export default class Example extends React.Component {
private container: HTMLDivElement
private minimapContainer: HTMLDivElement
private graph: Graph
componentDidMount() {
this.graph = new Graph({
container: this.container,
width: 600,
height: 320,
background: {
color: '#F2F7FA',
},
})
this.graph.use(
new Scroller({
pageVisible: true,
pageBreak: false,
pannable: true,
}),
)
this.graph.use(
new MiniMap({
container: this.minimapContainer,
width: 200,
height: 160,
padding: 10,
}),
)
this.graph.addNode({
x: 200,
y: 100,
width: 100,
height: 40,
label: 'Rect',
attrs: {
body: {
stroke: '#8f8f8f',
strokeWidth: 1,
fill: '#fff',
rx: 6,
ry: 6,
},
},
})
const source = this.graph.addNode({
x: 32,
y: 32,
width: 100,
height: 40,
label: 'Hello',
attrs: {
body: {
stroke: '#8f8f8f',
strokeWidth: 1,
fill: '#fff',
rx: 6,
ry: 6,
},
},
})
const target = this.graph.addNode({
shape: 'circle',
x: 160,
y: 180,
width: 60,
height: 60,
label: 'World',
attrs: {
body: {
stroke: '#8f8f8f',
strokeWidth: 1,
fill: '#fff',
},
},
})
this.graph.addEdge({
source,
target,
attrs: {
line: {
stroke: '#8f8f8f',
strokeWidth: 1,
},
},
})
}
onMinimapViewChange = (val: string) => {
this.graph.disposePlugins('minimap')
if (val === 'simple') {
this.graph.use(
new MiniMap({
container: this.minimapContainer,
width: 200,
height: 160,
padding: 10,
graphOptions: {
createCellView(cell) {
// 可以返回三种类型数据
// 1. null: 不渲染
// 2. undefined: 使用 X6 默认渲染方式
// 3. CellView: 自定义渲染
if (cell.isEdge()) {
return null
}
if (cell.isNode()) {
return SimpleNodeView
}
},
},
}),
)
} else {
this.graph.use(
new MiniMap({
container: this.minimapContainer,
width: 200,
height: 160,
padding: 10,
}),
)
}
}
refContainer = (container: HTMLDivElement) => {
this.container = container
}
refMiniMapContainer = (container: HTMLDivElement) => {
this.minimapContainer = container
}
render() {
return (
<div className="minimap-app">
<div className="app-btns">
<Radio.Group
options={options}
onChange={(e) => this.onMinimapViewChange(e.target.value)}
defaultValue={'detailed'}
optionType="button"
/>
</div>
<div className="app-content" ref={this.refContainer} />
<div className="app-minimap" ref={this.refMiniMapContainer} />
</div>
)
}
}

@ -26,7 +26,7 @@ export default class Example extends React.Component {
grid: true,
})
this.scroller = new Scroller()
this.scroller = new Scroller({ enabled: true })
this.graph2.use(this.scroller)
const data = [

@ -1,10 +1,10 @@
.react-algo-node {
display: flex;
align-items: center;
width: 100%;
height: 100%;
border: 1px solid #5f95ff;
border-radius: 14px;
display: flex;
align-items: center;
img {
width: 24px;
@ -13,8 +13,8 @@
span {
margin-left: 4px;
color: #000000a6;
font-size: 12px;
color: #000000a6;
}
&.dark {

@ -2,20 +2,20 @@
.my-port {
width: 100%;
height: 100%;
background: #eee;
border: 1px solid #808080;
border-radius: 100%;
background: #eee;
&.connected {
width: 0;
height: 0;
margin-top: 5px;
margin-left: 1px;
background-color: transparent;
border-color: #808080 transparent transparent;
border-style: solid;
border-width: 5px 4px 0;
border-style: solid;
border-color: #808080 transparent transparent;
border-radius: 0;
background-color: transparent;
}
}
@ -30,30 +30,30 @@
}
body > div::before {
content: ' ';
float: left;
box-sizing: border-box;
width: 20px;
height: 20px;
margin-top: -5px;
margin-left: -5px;
background-color: rgb(57 202 116 / 60%);
border-radius: 50%;
content: ' ';
background-color: rgba(57, 202, 116, 0.6);
box-sizing: border-box;
}
body > div::after {
position: relative;
z-index: 10;
content: ' ';
float: left;
clear: both;
box-sizing: border-box;
width: 10px;
height: 10px;
margin-top: -15px;
border-radius: 50%;
background-color: #fff;
border: 1px solid #39ca74;
border-radius: 50%;
content: ' ';
position: relative;
z-index: 10;
box-sizing: border-box;
}
}
@ -65,30 +65,30 @@
}
body > div::before {
content: ' ';
float: left;
box-sizing: border-box;
width: 28px;
height: 28px;
margin-top: -9px;
margin-left: -9px;
background-color: rgb(57 202 116 / 60%);
border-radius: 50%;
content: ' ';
background-color: rgba(57, 202, 116, 0.6);
box-sizing: border-box;
}
body > div::after {
position: relative;
z-index: 10;
content: ' ';
float: left;
clear: both;
box-sizing: border-box;
width: 10px;
height: 10px;
margin-top: -19px;
border-radius: 50%;
background-color: #fff;
border: 1px solid #39ca74;
border-radius: 50%;
content: ' ';
position: relative;
z-index: 10;
box-sizing: border-box;
}
}
}

@ -1,4 +1,4 @@
.x6-graph-scroller {
margin: 0 auto;
box-shadow: 0 0 10px 1px #e9e9e9;
margin: 0 auto;
}

@ -13,7 +13,7 @@ export default class Example extends React.Component {
private minimapContainer: HTMLDivElement
private scroller: Scroller
private selection: Selection
private exportInstance: Export
private exportObj: Export
componentDidMount() {
this.graph = new Graph({
@ -36,6 +36,7 @@ export default class Example extends React.Component {
})
this.scroller = new Scroller({
enabled: true,
pageVisible: true,
pageBreak: true,
pannable: {
@ -44,6 +45,7 @@ export default class Example extends React.Component {
},
})
this.selection = new Selection({
enabled: true,
rubberband: true,
modifiers: 'shift',
})
@ -53,12 +55,12 @@ export default class Example extends React.Component {
height: 200,
padding: 10,
})
this.exportInstance = new Export()
this.exportObj = new Export()
this.graph.use(this.scroller)
this.graph.use(this.selection)
this.graph.use(minimap)
this.graph.use(this.exportInstance)
this.graph.use(this.exportObj)
const rect = this.graph.addNode({
shape: 'rect',
@ -120,7 +122,7 @@ export default class Example extends React.Component {
}
onDownload = () => {
this.exportInstance.exportPNG('scroller')
this.exportObj.exportPNG('scroller')
}
render() {

@ -13,19 +13,19 @@ export default class Example extends React.Component {
width: 800,
height: 600,
grid: true,
panning: {
enabled: true,
eventTypes: ['mouseWheelDown'],
},
})
const keyboard = new Keyboard()
const keyboard = new Keyboard({
enabled: true,
})
const selection = new Selection({
enabled: true,
rubberband: true,
multiple: true,
strict: true,
showNodeSelectionBox: true,
selectCellOnMoved: false,
useCellGeometry: true,
filter(cell) {
return cell !== a
},

@ -1,4 +1,4 @@
import { Shape, Path, Point, NumberExt, JSONObject } from '@antv/x6'
import { Shape, Path, Point, NumberExt, JSONObject } from '@antv/x6'
interface KnobsAttrValue extends JSONObject {
round: boolean | string | number

@ -15,6 +15,7 @@ export default class Example extends React.Component {
})
const snapline = new Snapline({
enabled: true,
sharp: true,
})
graph.use(snapline)

@ -1,20 +1,20 @@
.react-table {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #fff;
border: 1px solid #edf2f5;
background-color: #fff;
border-radius: 5px;
overflow: hidden;
.inner {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 12px;
background: #edf2f5;
border: 1px solid #fff;
background: #edf2f5;
border-radius: 5px;
display: flex;
flex-direction: column;
}
.header {
@ -36,21 +36,21 @@
}
ul {
margin: 0;
padding: 0;
margin: 0;
}
li {
height: 40px;
padding-left: 16px;
line-height: 40px;
list-style: none;
height: 40px;
line-height: 40px;
padding-left: 16px;
border: 1px solid transparent;
&:hover {
border: 1px solid #1890ff;
// background: rgba(230,247,255,.92);
z-index: 0;
border: 1px solid #1890ff;
}
}
}
@ -58,8 +58,8 @@
.react-table-port {
width: 100%;
height: 100%;
overflow: hidden;
background: #eee;
border: 1px solid #808080;
border-radius: 100%;
background: #eee;
overflow: hidden;
}

@ -1,5 +1,3 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/anchor-has-content */
import React from 'react'
import ReactDom from 'react-dom'
import { Menu, Dropdown } from 'antd'

@ -24,7 +24,9 @@ export default class Example extends React.Component<
grid: true,
})
this.history = new History()
this.history = new History({
enabled: true,
})
this.history.on('change', () => {
this.setState({
canRedo: this.history.canRedo(),

@ -1,44 +1,41 @@
.tools {
width: 800px;
margin: 32px auto;
.ant-input {
margin-bottom: 16px;
}
}
.react-node {
display: flex;
align-items: center;
width: 100%;
height: 100%;
border: 1px solid #5f95ff;
border-radius: 14px;
display: flex;
align-items: center;
img {
width: 24px;
height: 24px;
}
span {
margin-left: 4px;
color: #000000a6;
font-size: 12px;
color: #000000a6;
}
}
.stutterer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 310px;
height: 310px;
margin: auto;
border-radius: 200px;
box-shadow: 0 0 10px 10px rgb(0 0 0 / 20%);
transform: scale(1.5);
height: 310px;
width: 310px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
border-radius: 200px;
}
.clockHand {
@ -53,12 +50,12 @@
}
.innerLine {
position: absolute;
top: 0%;
left: 47.5%;
width: 5%;
height: 149px;
background-color: red;
border-radius: 6px;
position: absolute;
height: 149px;
left: 47.5%;
top: 0%;
width: 5%;
background-color: red;
transform-origin: bottom center;
}

@ -1,7 +1,6 @@
import React from 'react'
import { Graph } from '@antv/x6'
import data from './data'
import { Button } from 'antd'
import './index.less'
import { register } from '@antv/x6-react-shape'
@ -139,7 +138,7 @@ export default class Canvas extends React.Component {
return (
<div className="x6-graph-wrap">
<div ref={this.refContainer} className="x6-graph" />
<Button id="add-btn">add</Button>
<button id="add-btn">add</button>
</div>
)
}

@ -96,7 +96,7 @@ module.exports = function (config, base, karmaTypescriptConfig) {
},
coverageOptions: {
instrumentation: !isDebug,
exclude: /\.(test|spec)\.ts$/,
exclude: /\.test|spec\.ts$/,
},
reports: {
html: reportsDir,

@ -2,58 +2,31 @@
"name": "x6",
"private": true,
"scripts": {
"preinstall": "npx only-allow pnpm",
"lint:ts": "eslint '**/src/**/*.{js,ts}?(x)' --cache --fix",
"lint:style": "stylelint '**/src/**/*.less' --customSyntax postcss-less --cache --fix",
"preinstall": "node ./scripts/preinstall.js",
"lint:ts": "eslint '**/src/**/*.{js,ts}?(x)' --fix",
"lint:style": "stylelint '**/src/**/*.less' --syntax less --fix",
"lint": "run-s lint:ts lint:style",
"prettier": "prettier --write '**/*.{js,mjs,jsx,tsx,ts,less,md,json}'",
"pretty-quick": "pretty-quick",
"test": "turbo run test --filter=./packages/*",
"build": "turbo run build --filter=./packages/*",
"build:cjs": "turbo run build:cjs --filter=./packages/*",
"build:esm": "turbo run build:esm --filter=./packages/*",
"build:dev": "turbo run build:dev --filter=./packages/*",
"build:umd": "turbo run build:umd --filter=./packages/*",
"build:demos": "sh ./scripts/build-demos",
"build:sites": "sh ./scripts/build-sites",
"update:deps": "pnpm update --interactive --latest --recursive",
"clean:turbo": "pnpm -r --if-present --parallel --filter=./packages/* run clean:turbo",
"clean:build": "pnpm -r --if-present --parallel --filter=./packages/* run clean",
"clean:modules": "pnpm -r --parallel exec rimraf node_modules && rimraf node_modules",
"clean": "run-s clean:build clean:turbo clean:modules",
"update:deps": "pnpm update --interactive --latest --recursive",
"clean": "run-s clean:build clean:modules",
"setup:husky": "husky install .husky",
"prepare": "is-ci || run-p setup:husky build:dev",
"start:demo": "cd ./examples/x6-example-features && pnpm start",
"start:site": "cd ./sites/x6-sites && pnpm start",
"release": "pnpm publish --no-git-checks -r --filter @antv/x6"
},
"rss": {
"clean:turbo": "rimraf .turbo",
"clean:build": "rimraf dist es lib",
"clean:coverage": "rimraf ./test/coverage",
"clean": "run-p clean:**",
"build:less": {
"file": "./scripts/build-less"
},
"build:esm": "tsc --module esnext --target es6 --outDir ./es",
"build:cjs": "tsc --module commonjs --target es6 --outDir ./lib",
"build:umd": "pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs",
"build:dev": "pnpm run --if-present build:less && run-p -s build:cjs build:esm",
"build:watch": "run-s -s build:watch:esm",
"build:watch:esm": "run-s -s \"build:esm -- -w\"",
"build:watch:cjs": "run-s -s \"build:cjs -- -w\"",
"build": "run-p -s build:dev build:umd",
"prebuild": "run-s -s clean:build",
"test": {
"file": "./scripts/run-test"
},
"coveralls": "cat ./test/coverage/lcov.info | coveralls",
"pretest": "run-s -s clean:coverage"
"prepare": "is-ci || run-p setup:husky build:dev"
},
"lint-staged": {
"*": [
"prettier --write --ignore-unknown"
],
"*.less": [
"stylelint --customSyntax postcss-less --fix"
"stylelint --syntax less --fix"
],
"*.js": [
"prettier --write"
@ -65,7 +38,7 @@
},
"commitlint": {
"extends": [
"@commitlint/config-conventional"
"@commitlint/config-angular"
]
},
"pnpm": {
@ -90,71 +63,70 @@
}
},
"dependencies": {
"@babel/core": "^7.20.5",
"@antv/x6-build-tools": "workspace:*",
"@babel/core": "^7.19.6",
"@babel/plugin-syntax-flow": "^7.18.6",
"@babel/plugin-transform-react-jsx": "^7.19.0",
"@commitlint/config-conventional": "^17.3.0",
"@rollup/plugin-commonjs": "^23.0.5",
"@commitlint/config-angular": "^17.2.0",
"@commitlint/config-conventional": "^17.2.0",
"@rollup/plugin-commonjs": "^23.0.2",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-replace": "^5.0.1",
"@rollup/plugin-typescript": "^10.0.1",
"@rollup/plugin-terser": "^0.2.0",
"@semantic-release-monorepo/cli": "^2.1.2",
"@semantic-release/changelog": "^6.0.2",
"@rollup/plugin-typescript": "^8.2.5",
"@semantic-release-monorepo/cli": "^1.0.28",
"@semantic-release/changelog": "^6.0.1",
"@semantic-release/git": "^10.0.1",
"@types/jasmine": "^4.3.0",
"@types/jest": "^29.2.4",
"@types/node": "^18.11.15",
"@types/jest": "^29.2.1",
"@types/node": "^18.11.9",
"@types/sinon": "^10.0.2",
"@typescript-eslint/eslint-plugin": "^5.46.1",
"@typescript-eslint/parser": "^5.46.1",
"@typescript-eslint/eslint-plugin": "^5.41.0",
"@typescript-eslint/parser": "^5.41.0",
"boxen": "^7.0.0",
"colors": "^1.4.0",
"coveralls": "^3.1.1",
"cross-spawn": "^7.0.3",
"eslint": "^8.29.0",
"eslint": "^8.26.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-jest": "^27.1.7",
"eslint-plugin-jest": "^27.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react": "^7.25.1",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-unicorn": "^45.0.2",
"fs-extra": "^11.1.0",
"eslint-plugin-unicorn": "^44.0.2",
"fs-extra": "^10.0.0",
"husky": "^8.0.1",
"is-ci": "^3.0.0",
"jasmine-core": "^4.5.0",
"jest": "^29.3.1",
"jest": "^29.2.2",
"karma": "^6.3.4",
"karma-chrome-launcher": "^3.1.0",
"karma-cli": "^2.0.0",
"karma-jasmine": "^5.1.0",
"karma-spec-reporter": "^0.0.36",
"karma-spec-reporter": "^0.0.34",
"karma-typescript": "5.5.3",
"karma-typescript-es6-transform": "5.5.3",
"less": "^4.1.1",
"lodash": "^4.17.21",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.31",
"postcss-less": "^6.0.0",
"prettier": "^2.8.0",
"postcss": "^8.3.6",
"prettier": "^2.4.0",
"pretty-quick": "^3.1.1",
"rimraf": "^3.0.2",
"rollup": "^3.7.4",
"rollup": "^3.2.5",
"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",
"run-shared-scripts": "^1.1.5",
"rollup-plugin-terser": "^7.0.2",
"semantic-release": "^19.0.5",
"sinon": "^15.0.1",
"stylelint": "^15.10.1",
"stylelint-config-prettier": "^9.0.4",
"sinon": "^14.0.1",
"stylelint": "^14.14.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-rational-order": "^0.1.2",
"stylelint-config-standard": "^29.0.0",
"stylelint-declaration-block-no-ignored-properties": "^2.4.0",
@ -163,10 +135,6 @@
"ts-node": "^10.2.1",
"tslib": "^2.4.1",
"turbo": "^1.6.3",
"typescript": "^4.9.3",
"@changesets/cli": "2.26.2"
},
"engines": {
"pnpm": ">=7"
"typescript": "^4.4.3"
}
}

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2021-2023 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.

@ -1,136 +0,0 @@
# @antv/x6-angular-shape
## 渲染节点
我们提供了一个独立的包 `@antv/x6-angular-shape` 以支持将 Angular 的组件/模板作为节点进行渲染。
### Component 渲染
```ts
@Component({
selector: 'app-node',
templateUrl: './node.component.html',
styleUrls: ['./node.component.scss'],
})
export class NodeComponent implements AfterViewInit, OnChanges {
@Input() value: string
}
```
```ts
import { register } from '@antv/x6-angular-shape'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
ngAfterViewInit(): void {
register({
shape: 'custom-angular-component-node',
width: 120,
height: 20,
content: NodeComponent,
injector: this.injector,
})
this.graph.addNode({
shape: 'custom-angular-component-node',
x: 100,
y: 100,
data: {
// Input 的参数必须放在这里
ngArguments: {
value: '糟糕糟糕 Oh my god',
},
},
})
}
}
```
### TemplateRef 渲染
```html
<ng-template #template let-data="ngArguments">
<section class="template-container">
<span class="value">{{ data.value }}</span>
</section>
</ng-template>
```
```ts
import { register } from '@antv/x6-angular-shape'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
@ViewChild('template') template: TemplateRef<{}>
ngAfterViewInit(): void {
register({
shape: 'custom-angular-template-node',
width: 120,
height: 20,
content: this.template,
injector: this.injector,
})
this.graph.addNode({
shape: 'custom-angular-template-node',
x: 100,
y: 100,
data: {
ngArguments: {
value: '魔法怎么失灵啦',
},
},
})
}
}
```
## 更新节点
无论是使用 Component 还是 TemplateRef, 都是一样的更新方式.
```ts
node.setData({
ngArguments: {
value: '晚风中闪过 几帧从前啊',
},
})
```
## 有 demo 吗?
有的, 因为 X6 渲染节点部分与框架是解耦的. 因此 `x6-angular-shape` 包并非是直接在源代码里改的, 而是在一个单独的 Angular 环境中开发的. 该 demo 还提供了多种节点类型的性能测试, 详情请参考[Eve-Sama/x6-angular-shape](https://github.com/Eve-Sama/x6-angular-shape)、[X6 与 G6 的性能对比, 以及 X6 多节点类型下的 FPS 临界点讨论](https://github.com/antvis/X6/issues/3266)
## FAQ
### 为什么输入属性不能直接放在 data 中而需要放在 ngArguments 中? 且为什么不叫 ngInput?
因为并非所有 `node.data` 中的属性都是输入属性, 所以遍历 `data` 中的所有属性进行赋值是不合适的. 至于为什么叫 `ngArguments` 主要是有两点考虑.
- 1.x 版本中已经这么用了, 沿用该 API 可以降低用户升级成本
- `Input` 的概念其实是来自 `Component`, 而 `TemplateRef` 中是 `context`, 在二者的基础上抽象一个 `Arguments` 的概念更通用些
### 2.x 版本的 x6-angular-shape 相比较 1.x 版本有什么新特性吗?
实现思路其实和之前是差不多的. 但是确实有几个点值得一提.
#### demo 更聚焦
1.x 版本的 demo 除了渲染组件外, 还写了连线、清除等一系列案例. 看似扩展, 实则眼花缭乱. 作为 `x6-angular-shape`的 demo, 2.x 版本更加聚焦, 更加聚焦于 shape 的使用与性能测试等, 与插件无关的内容请查看 X6 官网.
#### 功能更稳定
在 1.x 版本中, 虽然实现了功能, 但是使用场景的思考不够全面. 比如`ngArguments`的变化, 对 `TemplateRef`的场景并不生效. 虽然对`Component`生效但是无法触发`ngOnChanges`. 而在新版本中, 这些问题都将不复存在.
### 版本要求
你的 Angular 版本至少在 14 及以上才可以. 14 以下需要用 hack 的方式实现一些特性, 比较麻烦. 暂时不提供, 如有需要可提 issue, 我再专门介绍下如何实现.

@ -1,67 +0,0 @@
{
"name": "@antv/x6-angular-shape",
"version": "2.1.2",
"description": "X6 shape for rendering angular components.",
"main": "lib/index.js",
"module": "es/index.js",
"unpkg": "dist/index.js",
"jsdelivr": "dist/index.js",
"types": "lib/index.d.ts",
"files": [
"dist",
"es",
"lib",
"src"
],
"keywords": [
"shape",
"angular",
"render",
"x6",
"antv"
],
"scripts": {
"clean:turbo": "rss",
"clean:build": "rss",
"clean:coverage": "rss",
"clean": "rss",
"build:esm": "rss",
"build:cjs": "rss",
"build:umd": "rss",
"build:dev": "rss",
"build:watch": "rss",
"build:watch:esm": "rss",
"build:watch:cjs": "rss",
"build": "rss",
"prebuild": "rss",
"test": "rss",
"coveralls": "rss",
"pretest": "rss"
},
"peerDependencies": {
"@antv/x6": "^2.x",
"@angular/core": ">= 17"
},
"devDependencies": {
"@antv/x6": "^2.x",
"@angular/core": ">= 17"
},
"author": {
"name": "Eve-Sama",
"email": "948832626@qq.com"
},
"license": "MIT",
"homepage": "https://x6.antv.antgroup.com/tutorial/intermediate/angular",
"bugs": {
"url": "https://github.com/antvis/x6/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/antvis/x6.git",
"directory": "packages/x6-angular-shape"
},
"publishConfig": {
"access": "public",
"registry": "https://registry.npmjs.org"
}
}

@ -1,3 +0,0 @@
export * from './node'
export * from './view'
export * from './registry'

Some files were not shown because too many files have changed in this diff Show More