Compare commits
1 Commits
@antv/x6-s
...
feat/vite
| Author | SHA1 | Date | |
|---|---|---|---|
| 8e2616dfe1 |
.github/workflows
CONTRIBUTORSCONTRIBUTORS.svgLICENSEREADME.mdexamples
vite-example
.gitignoreindex.htmlpackage.json
public
src
tsconfig.jsontsconfig.node.jsonvite.config.tsx6-example-features
packages
x6-angular-shape
x6-common
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
x6-react-shape
x6-vue-shape
x6
scripts
sites
x6-site/docs/tutorial
x6-sites
.dumi
.dumirc.tsCHANGELOG.mdLEGAL.mddocs
api
graph
interacting
model
registry
temp
tutorial
examples/showcase/practices/demo
package.jsonpublic/data
src/tutorial
basic
edge
connector
custom-marker
labels
native-marker
prop
registry
router
vertices
event/custom-click
graph
auto-resize
background-grid
panning-mousewheel
transform
interacting
connecting
embedding
highlighting
interacting
validate
node
ports
serialization/to-json
getting-started
intermediate
connection-point/multi
group
collapsable
embed-edge
expand-shrink
restrict
html
react
tools
plugins
clipboard
dnd
history
keyboard
minimap
scroller
selection
snapline
stencil
transform
3
.github/workflows/release.yml
vendored
3
.github/workflows/release.yml
vendored
@ -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:
|
||||
|
||||
2
.github/workflows/welcome.yml
vendored
2
.github/workflows/welcome.yml
vendored
@ -20,7 +20,9 @@ jobs:
|
||||
👋 @{{ 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: |
|
||||
|
||||
41
CONTRIBUTORS
41
CONTRIBUTORS
@ -1,24 +1,21 @@
|
||||
BARM <284942955@qq.com>
|
||||
Candy <563378816@qq.com>
|
||||
Chaoqi ZHANG <prncoprs@163.com>
|
||||
Clifford Fajardo <cliffordfajardo@users.noreply.github.com>
|
||||
Chaoqi <HAN>
|
||||
Clifford <ajard>
|
||||
DaiGang <42136433+daigang666@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>
|
||||
Gossypol <31892817+gossypol@users.noreply.github.com>
|
||||
HQidea <HQidea@users.noreply.github.com>
|
||||
ImgBotApp <ImgBotHelp@gmail.com>
|
||||
Indomi <indomi126@gmail.com>
|
||||
James Tsang <wtzeng1@gmail.com>
|
||||
Jógvan Olsen <jogvanolsen@hotmail.com>
|
||||
Ken Geis <geis.ken@gmail.com>
|
||||
Kent Wood <minzojian@hotmail.com>
|
||||
Ko.Rei <32183014+Ko-Rei@users.noreply.github.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>
|
||||
@ -28,22 +25,17 @@ NewByVector <NewByVector@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>
|
||||
Simon <>
|
||||
Sindori <441933726@qq.com>
|
||||
Struggle <1178825961@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>
|
||||
XLZY <1017866168@qq.com>
|
||||
Xia Wenqi <xiawenqi90@gmail.com>
|
||||
Xingjian Zhang <44231913+THUzxj@users.noreply.github.com>
|
||||
Zhenyu Hou <skyking_H@hotmail.com>
|
||||
_XiaoTian <istianlei@qq.com>
|
||||
Xingjian <han>
|
||||
Zhenyu <o>
|
||||
arthur657834 <kingkom7834@126.com>
|
||||
boyu.zlj <boyu.zlj@antgroup.com>
|
||||
breezefaith <nyzhangzc@qq.com>
|
||||
@ -59,8 +51,6 @@ kelin.zrh <34393362+AricZhu@users.noreply.github.com>
|
||||
kingshuaishuai <ken.wang@mrs.ai>
|
||||
kio <1421104933@qq.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>
|
||||
@ -70,20 +60,17 @@ 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>
|
||||
@ -92,12 +79,10 @@ zdc1111 <39116292+zdc1111@users.noreply.github.com>
|
||||
€alix <qq287649920@gmail.com>
|
||||
九思⚡⚡⚡ <2228429150@qq.com>
|
||||
何腾飞 <avrin.live.cn@outlook.com>
|
||||
依枫 <deng25st@163.com>
|
||||
偏右 <afc163@gmail.com>
|
||||
小耀 <jinyue.gjy@antfin.com>
|
||||
崖 <bubkoo.wy@gmail.com>
|
||||
崖崖崖 <bubkoo.wy@gmail.com>
|
||||
张子睿 <411489774@qq.com>
|
||||
文瑀 <wenyu.jqq@antfin.com>
|
||||
映月 <38279397+orientMoon@users.noreply.github.com>
|
||||
杨凌 <89915256@qq.com>
|
||||
|
||||
141
CONTRIBUTORS.svg
141
CONTRIBUTORS.svg
File diff suppressed because one or more lines are too long
|
Before 
(image error) Size: 14 MiB After 
(image error) Size: 12 MiB
|
2
LICENSE
2
LICENSE
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
README.md
17
README.md
@ -6,17 +6,18 @@
|
||||
<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/actions/workflow/status/antvis/x6/ci.yml?branch=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.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>
|
||||
</p>
|
||||
|
||||
## 特性
|
||||
|
||||
24
examples/vite-example/.gitignore
vendored
Normal file
24
examples/vite-example/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
13
examples/vite-example/index.html
Normal file
13
examples/vite-example/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/antv.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>s</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
30
examples/vite-example/package.json
Normal file
30
examples/vite-example/package.json
Normal file
@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "@antv/vite-project",
|
||||
"private": true,
|
||||
"version": "2.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"prebuild": "rimraf dist",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"lodash-es": "^4.17.15",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-helmet": "^6.0.0",
|
||||
"react-router": "^6.5.0",
|
||||
"react-router-dom": "^6.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash-es": "^4.17.4",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/react-helmet": "^6.0.0",
|
||||
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||
"less": "^4.1.1",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0"
|
||||
}
|
||||
}
|
||||
1
examples/vite-example/public/antv.svg
Normal file
1
examples/vite-example/public/antv.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="28"><defs><linearGradient id="a" x1=".004%" x2="100.131%" y1="49.993%" y2="49.993%"><stop offset="0%" stop-color="#6500FF"/><stop offset="16%" stop-color="#6A09FF"/><stop offset="43%" stop-color="#7623FF"/><stop offset="77%" stop-color="#8A4CFF"/><stop offset="99%" stop-color="#996BFF"/></linearGradient><linearGradient id="b" x1="50.004%" x2="50.004%" y1="100.012%" y2="0%"><stop offset="0%" stop-color="#6500FF"/><stop offset="16%" stop-color="#6909FF"/><stop offset="43%" stop-color="#7523FF"/><stop offset="77%" stop-color="#894CFF"/><stop offset="99%" stop-color="#976BFF"/></linearGradient><linearGradient id="c" x1="49.854%" x2="49.854%" y1="100.255%" y2="0%"><stop offset="0%" stop-color="#FF6E06"/><stop offset="28%" stop-color="#FF770C"/><stop offset="75%" stop-color="#FF911C"/><stop offset="100%" stop-color="#FFA126"/></linearGradient><linearGradient id="d" x1="57351%" x2="57351%" y1="59860%" y2="35023%"><stop offset="0%" stop-color="#FF6E06"/><stop offset="28%" stop-color="#FF770C"/><stop offset="75%" stop-color="#FF911C"/><stop offset="100%" stop-color="#FFA126"/></linearGradient></defs><g fill="none" fill-rule="nonzero"><path fill="url(#a)" d="M1.955.004c-.029 0-.057 0-.088.002a1.41 1.41 0 0 0-.197.017A2.312 2.312 0 0 0 1.4.08a3.479 3.479 0 0 0-.179.061 3.768 3.768 0 0 0-.075.032l-.029.013-.057.028-.031.016L.98.257.95.275.91.298.883.317.825.355.79.381l-.03.022L.728.43.7.453C.68.468.662.483.645.5L.621.521.588.553l-.02.02A1.898 1.898 0 0 0 .46.691L.446.709.414.75A2.707 2.707 0 0 0 .348.84L.337.857.308.9l-.01.017L.29.931l3.784 2.214.801.855a.406.406 0 0 1-.019-.42.446.446 0 0 1 .37-.227H18.12c.045.003.09.005.137.005.961-.014 1.734-.758 1.737-1.674.002-.916-.765-1.664-1.726-1.683L1.955.004Z" transform="translate(.006)"/><path fill="url(#b)" d="m22.737 11.315-6.392 11.01a.438.438 0 0 1-.74.025l-4.063-6.995a1.724 1.724 0 0 0-.117-.23L4.667 3.459a2.32 2.32 0 0 1-.005-2.248A2.345 2.345 0 0 1 6.57.005L1.981.001A1.899 1.899 0 0 0 .908.294l-.1.068a2.405 2.405 0 0 0-.15.12A1.7 1.7 0 0 0 .462.69a1.797 1.797 0 0 0-.17.243 1.767 1.767 0 0 0-.028 1.9l.166.289 13.874 23.895a1.882 1.882 0 0 0 .793.776l.108.05a2.537 2.537 0 0 0 .18.069 2.14 2.14 0 0 0 .28.066 2.148 2.148 0 0 0 .19.02l.106.002c.04 0 .063 0 .086-.002a1.206 1.206 0 0 0 .19-.016 2.065 2.065 0 0 0 .27-.06 1.927 1.927 0 0 0 .168-.06l.089-.038.07-.036c.058-.03.073-.04.088-.048a2.596 2.596 0 0 0 .207-.142 1.851 1.851 0 0 0 .464-.537l.376-.64.081-.14 7.68-13.225a1.716 1.716 0 0 0 .047-1.75 1.74 1.74 0 0 0-3.039.01Z" transform="translate(.006)"/><path fill="url(#c)" d="M30.137 0h-6.459c-.935.018-1.684.847-1.684 1.863s.75 1.845 1.684 1.864c.046 0 .09-.003.134-.006h2.925c.214.032.374.23.374.465a.501.501 0 0 1-.025.157l-1.542 2.9c-.454.904-.147 2.036.685 2.53.832.492 1.874.159 2.328-.745l3.19-6c.029-.055.056-.111.08-.17l.003-.007c.015-.036.03-.072.043-.11l.002-.005.017-.052.008-.027c.008-.024.015-.048.021-.073l.012-.042.01-.04a2.826 2.826 0 0 0 .033-.191 2.31 2.31 0 0 0 .01-.077v-.011l.005-.09v-.022l.003-.091c0-1.115-.83-2.019-1.857-2.02Z" transform="translate(.006)"/><path fill="url(#d)" d="M19.881 7.41a.84.84 0 0 0-.725-.41h-6.325a.84.84 0 0 0-.725.41.804.804 0 0 0 0 .82l3.163 5.36a.84.84 0 0 0 .725.41.84.84 0 0 0 .725-.41l3.162-5.36a.804.804 0 0 0 0-.82Z" transform="translate(.006)"/></g></svg>
|
||||
|
After 
(image error) Size: 3.3 KiB |
72
examples/vite-example/src/index.less
Normal file
72
examples/vite-example/src/index.less
Normal file
@ -0,0 +1,72 @@
|
||||
:root {
|
||||
color: rgb(255 255 255 / 87%);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 24px;
|
||||
background-color: #242424;
|
||||
|
||||
color-scheme: light dark;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizelegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #646cff;
|
||||
font-weight: 500;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.6em 1.2em;
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
14
examples/vite-example/src/index.tsx
Normal file
14
examples/vite-example/src/index.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
|
||||
import { getRoutes } from './routes'
|
||||
import './index.less'
|
||||
|
||||
const routes = getRoutes()
|
||||
const router = createBrowserRouter(routes)
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
43
examples/vite-example/src/pages/_layout.module.less
Normal file
43
examples/vite-example/src/pages/_layout.module.less
Normal file
@ -0,0 +1,43 @@
|
||||
.wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 220px;
|
||||
padding: 0 16px;
|
||||
border-right: 1px solid #e9e9e9;
|
||||
|
||||
section {
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
> ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 16px;
|
||||
|
||||
li {
|
||||
line-height: 1.6;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
padding: 24px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
}
|
||||
57
examples/vite-example/src/pages/_layout.tsx
Normal file
57
examples/vite-example/src/pages/_layout.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import React from 'react'
|
||||
import { RouteObject } from 'react-router'
|
||||
import { Outlet, NavLink } from 'react-router-dom'
|
||||
import style from './_layout.module.less'
|
||||
|
||||
function renderLink(route: RouteObject, parentPath: string) {
|
||||
let children = route.children
|
||||
let indexRoute: RouteObject | null = null
|
||||
if (children) {
|
||||
children = children.slice()
|
||||
const idx = children.findIndex((r) => r.index)
|
||||
if (idx >= 0) {
|
||||
indexRoute = children[idx]
|
||||
children.splice(idx, 1)
|
||||
}
|
||||
}
|
||||
|
||||
const routeName = route.path
|
||||
const routePath = `${parentPath}/${routeName}`
|
||||
const element = indexRoute ? indexRoute.element : route.element
|
||||
|
||||
return (
|
||||
<React.Fragment key={routePath}>
|
||||
<li>
|
||||
{element ? (
|
||||
<NavLink
|
||||
to={routePath}
|
||||
className={({ isActive }) => (isActive ? 'active' : undefined)}
|
||||
>
|
||||
{routeName}
|
||||
</NavLink>
|
||||
) : (
|
||||
routeName
|
||||
)}
|
||||
</li>
|
||||
{children && <li>{renderLinks(children, routePath)}</li>}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
function renderLinks(routes: RouteObject[], parentPath = '') {
|
||||
return <ul>{routes.map((route) => renderLink(route, parentPath))}</ul>
|
||||
}
|
||||
|
||||
export default function Layout(props: { routes: RouteObject[] }) {
|
||||
return (
|
||||
<div className={style.wrap}>
|
||||
<div className={style.nav}>
|
||||
<h2>Examples</h2>
|
||||
<section>{renderLinks(props.routes)}</section>
|
||||
</div>
|
||||
<div className={style.content}>
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
5
examples/vite-example/src/pages/animation/transition.tsx
Normal file
5
examples/vite-example/src/pages/animation/transition.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function transition() {
|
||||
return <div>transition</div>
|
||||
}
|
||||
5
examples/vite-example/src/pages/auto-resize/index.tsx
Normal file
5
examples/vite-example/src/pages/auto-resize/index.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function transition() {
|
||||
return <div>auto-size</div>
|
||||
}
|
||||
87
examples/vite-example/src/routes.tsx
Normal file
87
examples/vite-example/src/routes.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
import React from 'react'
|
||||
import { set } from 'lodash-es'
|
||||
import { RouteObject } from 'react-router'
|
||||
import { Helmet } from 'react-helmet'
|
||||
|
||||
function parseRouteConfig() {
|
||||
const modules = import.meta.glob(`/src/pages/**/*.tsx`)
|
||||
const config: Record<string, any> = {}
|
||||
Object.keys(modules).forEach((filePath) => {
|
||||
const routeParts = filePath
|
||||
.replace(/^\/src\/pages\//, '') // 去除 /src/pages
|
||||
.replace(/.tsx$/, '') // 去除文件名后缀
|
||||
.replace(/\[([\w-]+)]/, ':$1') // 转换动态路由 [foo].tsx => :foo
|
||||
.split('/')
|
||||
|
||||
set(config, routeParts, modules[filePath])
|
||||
})
|
||||
return config
|
||||
}
|
||||
|
||||
function wrapSuspense(
|
||||
mod: () => Promise<{
|
||||
default: React.ComponentType<{ routes?: RouteObject[] }>
|
||||
}>,
|
||||
routes?: RouteObject[],
|
||||
title?: string,
|
||||
) {
|
||||
if (!mod) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const Component = React.lazy(mod)
|
||||
// 结合 Suspense ，这里可以自定义 loading 组件
|
||||
return (
|
||||
<React.Suspense fallback={null}>
|
||||
{title && (
|
||||
<Helmet>
|
||||
<title>{title}</title>
|
||||
</Helmet>
|
||||
)}
|
||||
{title ? <Component /> : <Component routes={routes} />}
|
||||
</React.Suspense>
|
||||
)
|
||||
}
|
||||
|
||||
function wrapLayout(
|
||||
routePath: string,
|
||||
routeConfig: Record<string, any>,
|
||||
): RouteObject {
|
||||
const { _layout, ...rest } = routeConfig
|
||||
const routes = routeConfigToRoute(rest, routePath)
|
||||
return {
|
||||
path: routePath,
|
||||
element: wrapSuspense(_layout, routes),
|
||||
children: routes,
|
||||
}
|
||||
}
|
||||
|
||||
function routeConfigToRoute(
|
||||
config: Record<string, any>,
|
||||
parentPath: string,
|
||||
): RouteObject[] {
|
||||
return Object.entries(config).map(([routePath, child]) => {
|
||||
// () => import() 语法判断
|
||||
if (typeof child === 'function') {
|
||||
// 等于 index 则映射为当前根路由
|
||||
const isIndex = routePath === 'index'
|
||||
return {
|
||||
index: isIndex,
|
||||
path: isIndex ? undefined : routePath,
|
||||
// 转换为组件
|
||||
element: wrapSuspense(
|
||||
child,
|
||||
undefined,
|
||||
isIndex ? parentPath : `${parentPath}/${routePath}`,
|
||||
),
|
||||
}
|
||||
}
|
||||
// 否则为目录，则查找下一层级
|
||||
return wrapLayout(routePath, child)
|
||||
})
|
||||
}
|
||||
|
||||
export function getRoutes(): RouteObject[] {
|
||||
const routeConfig = parseRouteConfig()
|
||||
return [wrapLayout('/', routeConfig)]
|
||||
}
|
||||
1
examples/vite-example/src/vite-env.d.ts
vendored
Normal file
1
examples/vite-example/src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
21
examples/vite-example/tsconfig.json
Normal file
21
examples/vite-example/tsconfig.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
9
examples/vite-example/tsconfig.node.json
Normal file
9
examples/vite-example/tsconfig.node.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
7
examples/vite-example/vite.config.ts
Normal file
7
examples/vite-example/vite.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
@ -1,24 +1,3 @@
|
||||
## @antv/x6-example-features [2.1.1](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.1.0...@antv/x6-example-features@2.1.1) (2023-02-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* mindmap demo duplicate node id, close [#3256](https://github.com/antvis/X6/issues/3256) ([#3257](https://github.com/antvis/X6/issues/3257)) ([c510756](https://github.com/antvis/X6/commit/c510756fe4e96c8e7471c2fb558e6019ec69b057))
|
||||
|
||||
# @antv/x6-example-features [2.1.0](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.3...@antv/x6-example-features@2.1.0) (2023-02-17)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* history add max stack size ([#3253](https://github.com/antvis/X6/issues/3253)) ([fba5310](https://github.com/antvis/X6/commit/fba531064ad8027c451a81b60d5efd7f7314a0fa))
|
||||
|
||||
## @antv/x6-example-features [2.0.2](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.1...@antv/x6-example-features@2.0.2) (2023-01-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **mindmap demo:** can not find target id when create edge ([#3144](https://github.com/antvis/X6/issues/3144)) ([bfc8d7f](https://github.com/antvis/X6/commit/bfc8d7f17ac900f70b696c1fa7a3f3f3a389103f))
|
||||
|
||||
## @antv/x6-example-features [2.0.1](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.0...@antv/x6-example-features@2.0.1) (2022-12-16)
|
||||
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "@antv/x6-example-features",
|
||||
"version": "2.1.1",
|
||||
"version": "2.0.1",
|
||||
"scripts": {
|
||||
"start": "umi dev",
|
||||
"build": "umi build",
|
||||
|
||||
@ -212,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 {
|
||||
const node = graph.addNode({
|
||||
cells.push(
|
||||
graph.createNode({
|
||||
id: data.id,
|
||||
shape: data.type === 'topic-child' ? 'topic-child' : 'topic',
|
||||
x: hierarchyItem.x,
|
||||
@ -229,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,
|
||||
@ -265,13 +257,15 @@ export default class Example extends React.Component {
|
||||
name: 'left',
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
}),
|
||||
)
|
||||
traverse(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
traverse(result)
|
||||
graph.resetCells(cells)
|
||||
graph.centerContent()
|
||||
}
|
||||
|
||||
@ -309,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,
|
||||
@ -324,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,
|
||||
@ -345,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
|
||||
|
||||
@ -1,104 +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 '../index.less'
|
||||
|
||||
export default class Example extends React.Component<
|
||||
{},
|
||||
{ graph: Graph | undefined }
|
||||
> {
|
||||
private container: HTMLDivElement
|
||||
|
||||
componentDidMount() {
|
||||
const graph = new Graph({
|
||||
container: this.container,
|
||||
width: 800,
|
||||
height: 600,
|
||||
grid: true,
|
||||
})
|
||||
|
||||
this.setState({ graph })
|
||||
|
||||
const selection = new Selection({ enabled: true })
|
||||
const keyboard = new Keyboard({ enabled: true })
|
||||
const history = new History({ enabled: true, 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()
|
||||
})
|
||||
}
|
||||
|
||||
refContainer = (container: HTMLDivElement) => {
|
||||
this.container = container
|
||||
}
|
||||
|
||||
enablePlugins = () => {
|
||||
const { graph } = this.state
|
||||
graph?.enablePlugins('keyboard')
|
||||
}
|
||||
|
||||
disablePlugins = () => {
|
||||
const { graph } = this.state
|
||||
graph?.disablePlugins('keyboard')
|
||||
}
|
||||
|
||||
undo = () => {
|
||||
const { graph } = this.state
|
||||
const history = graph?.getPlugin('history') as History
|
||||
history?.undo()
|
||||
}
|
||||
|
||||
redo = () => {
|
||||
const { graph } = this.state
|
||||
const history = 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>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -179,10 +179,6 @@ const dataSource = [
|
||||
example: 'animation/transition',
|
||||
description: '动画',
|
||||
},
|
||||
{
|
||||
example: 'history',
|
||||
description: '时光回溯',
|
||||
},
|
||||
].map((item, index) => ({ key: index, ...item }))
|
||||
|
||||
const columns = [
|
||||
|
||||
@ -4,10 +4,7 @@ import { Keyboard } from '@antv/x6-plugin-keyboard'
|
||||
import { Selection } from '@antv/x6-plugin-selection'
|
||||
import '../index.less'
|
||||
|
||||
export default class Example extends React.Component<
|
||||
{},
|
||||
{ graph: Graph | undefined }
|
||||
> {
|
||||
export default class Example extends React.Component {
|
||||
private container: HTMLDivElement
|
||||
|
||||
componentDidMount() {
|
||||
@ -18,8 +15,6 @@ export default class Example extends React.Component<
|
||||
grid: true,
|
||||
})
|
||||
|
||||
this.setState({ graph })
|
||||
|
||||
const selection = new Selection({ enabled: true })
|
||||
const keyboard = new Keyboard({ enabled: true })
|
||||
graph.use(selection)
|
||||
@ -58,22 +53,10 @@ export default class Example extends React.Component<
|
||||
this.container = container
|
||||
}
|
||||
|
||||
enablePlugins = () => {
|
||||
const { graph } = this.state
|
||||
graph.enablePlugins('keyboard')
|
||||
}
|
||||
|
||||
disablePlugins = () => {
|
||||
const { graph } = this.state
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "x6",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"preinstall": "npx only-allow pnpm",
|
||||
"preinstall": "node ./scripts/preinstall",
|
||||
"lint:ts": "eslint '**/src/**/*.{js,ts}?(x)' --cache --fix",
|
||||
"lint:style": "stylelint '**/src/**/*.less' --customSyntax postcss-less --cache --fix",
|
||||
"lint": "run-s lint:ts lint:style",
|
||||
@ -51,7 +51,7 @@
|
||||
"prettier --write --ignore-unknown"
|
||||
],
|
||||
"*.less": [
|
||||
"stylelint --customSyntax postcss-less --fix"
|
||||
"stylelint --custom-syntax postcss-less --fix"
|
||||
],
|
||||
"*.js": [
|
||||
"prettier --write"
|
||||
@ -137,7 +137,6 @@
|
||||
"lodash": "^4.17.21",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.20",
|
||||
"postcss-less": "^6.0.0",
|
||||
"prettier": "^2.8.0",
|
||||
"pretty-quick": "^3.1.1",
|
||||
"rimraf": "^3.0.2",
|
||||
@ -162,6 +161,7 @@
|
||||
"typescript": "^4.9.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-terser": "^0.2.0"
|
||||
"@rollup/plugin-terser": "^0.2.0",
|
||||
"postcss-less": "^6.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,65 +0,0 @@
|
||||
{
|
||||
"name": "@antv/x6-angular-shape",
|
||||
"version": "2.0.0",
|
||||
"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"
|
||||
],
|
||||
"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": ">= 14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antv/x6": "^2.x"
|
||||
},
|
||||
"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'
|
||||
@ -1,102 +0,0 @@
|
||||
import { Node, Markup, ObjectExt } from '@antv/x6'
|
||||
|
||||
export class AngularShape<
|
||||
Properties extends AngularShape.Properties = AngularShape.Properties,
|
||||
> extends Node<Properties> {}
|
||||
|
||||
export namespace AngularShape {
|
||||
export type Primer =
|
||||
| 'rect'
|
||||
| 'circle'
|
||||
| 'path'
|
||||
| 'ellipse'
|
||||
| 'polygon'
|
||||
| 'polyline'
|
||||
|
||||
export interface Properties extends Node.Properties {
|
||||
primer?: Primer
|
||||
}
|
||||
}
|
||||
|
||||
export namespace AngularShape {
|
||||
function getMarkup(primer?: Primer) {
|
||||
const markup: Markup.JSONMarkup[] = []
|
||||
const content = Markup.getForeignObjectMarkup()
|
||||
|
||||
if (primer) {
|
||||
markup.push(
|
||||
...[
|
||||
{
|
||||
tagName: primer,
|
||||
selector: 'body',
|
||||
},
|
||||
content,
|
||||
],
|
||||
)
|
||||
} else {
|
||||
markup.push(content)
|
||||
}
|
||||
|
||||
return markup
|
||||
}
|
||||
|
||||
AngularShape.config<Properties>({
|
||||
view: 'angular-shape-view',
|
||||
markup: getMarkup(),
|
||||
attrs: {
|
||||
body: {
|
||||
fill: 'none',
|
||||
stroke: 'none',
|
||||
refWidth: '100%',
|
||||
refHeight: '100%',
|
||||
},
|
||||
fo: {
|
||||
refWidth: '100%',
|
||||
refHeight: '100%',
|
||||
},
|
||||
},
|
||||
propHooks(metadata: Properties) {
|
||||
if (metadata.markup == null) {
|
||||
const primer = metadata.primer
|
||||
if (primer) {
|
||||
metadata.markup = getMarkup(primer)
|
||||
|
||||
let attrs = {}
|
||||
switch (primer) {
|
||||
case 'circle':
|
||||
attrs = {
|
||||
refCx: '50%',
|
||||
refCy: '50%',
|
||||
refR: '50%',
|
||||
}
|
||||
break
|
||||
case 'ellipse':
|
||||
attrs = {
|
||||
refCx: '50%',
|
||||
refCy: '50%',
|
||||
refRx: '50%',
|
||||
refRy: '50%',
|
||||
}
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
metadata.attrs = ObjectExt.merge(
|
||||
{},
|
||||
{
|
||||
body: {
|
||||
refWidth: null,
|
||||
refHeight: null,
|
||||
...attrs,
|
||||
},
|
||||
},
|
||||
metadata.attrs || {},
|
||||
)
|
||||
}
|
||||
}
|
||||
return metadata
|
||||
},
|
||||
})
|
||||
|
||||
Node.registry.register('angular-shape', AngularShape, true)
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
import { Injector, TemplateRef, Type } from '@angular/core'
|
||||
import { Graph, Node } from '@antv/x6'
|
||||
|
||||
export type Content = TemplateRef<any> | Type<any>
|
||||
|
||||
export type AngularShapeConfig = Node.Properties & {
|
||||
shape: string
|
||||
injector: Injector
|
||||
content: Content
|
||||
}
|
||||
|
||||
export const registerInfo: Map<
|
||||
string,
|
||||
{
|
||||
injector: Injector
|
||||
content: Content
|
||||
}
|
||||
> = new Map()
|
||||
|
||||
export function register(config: AngularShapeConfig) {
|
||||
const { shape, injector, content, ...others } = config
|
||||
registerInfo.set(shape, { injector, content })
|
||||
|
||||
Graph.registerNode(
|
||||
shape,
|
||||
{
|
||||
inherit: 'angular-shape',
|
||||
...others,
|
||||
},
|
||||
true,
|
||||
)
|
||||
}
|
||||
@ -1,124 +0,0 @@
|
||||
import {
|
||||
ComponentRef,
|
||||
EmbeddedViewRef,
|
||||
TemplateRef,
|
||||
ViewContainerRef,
|
||||
} from '@angular/core'
|
||||
import { Dom, NodeView } from '@antv/x6'
|
||||
import { AngularShape } from './node'
|
||||
import { Content, registerInfo } from './registry'
|
||||
|
||||
export class AngularShapeView extends NodeView<AngularShape> {
|
||||
getNodeContainer(): HTMLDivElement {
|
||||
return this.selectors && (this.selectors.foContent as HTMLDivElement)
|
||||
}
|
||||
|
||||
override confirmUpdate(flag: number): number {
|
||||
const ret = super.confirmUpdate(flag)
|
||||
return this.handleAction(ret, AngularShapeView.action, () =>
|
||||
this.renderAngularContent(),
|
||||
)
|
||||
}
|
||||
|
||||
private getNgArguments(): Record<string, any> {
|
||||
const input = (this.cell.data?.ngArguments as Record<string, any>) || {}
|
||||
return input
|
||||
}
|
||||
|
||||
/** 当执行 node.setData() 时需要对实例设置新的输入值 */
|
||||
private setInstanceInput(
|
||||
content: Content,
|
||||
ref: EmbeddedViewRef<any> | ComponentRef<any>,
|
||||
): void {
|
||||
const ngArguments = this.getNgArguments()
|
||||
if (content instanceof TemplateRef) {
|
||||
const embeddedViewRef = ref as EmbeddedViewRef<any>
|
||||
embeddedViewRef.context = { ngArguments }
|
||||
} else {
|
||||
const componentRef = ref as ComponentRef<any>
|
||||
Object.keys(ngArguments).forEach((v) =>
|
||||
componentRef.setInput(v, ngArguments[v]),
|
||||
)
|
||||
componentRef.changeDetectorRef.detectChanges()
|
||||
}
|
||||
}
|
||||
|
||||
protected renderAngularContent(): void {
|
||||
this.unmountAngularContent()
|
||||
const container = this.getNodeContainer()
|
||||
if (container) {
|
||||
const node = this.cell
|
||||
const { injector, content } = registerInfo.get(node.shape)!
|
||||
const viewContainerRef = injector.get(ViewContainerRef)
|
||||
if (content instanceof TemplateRef) {
|
||||
const ngArguments = this.getNgArguments()
|
||||
const embeddedViewRef = viewContainerRef.createEmbeddedView(content, {
|
||||
ngArguments,
|
||||
})
|
||||
embeddedViewRef.rootNodes.forEach((node) => container.appendChild(node))
|
||||
embeddedViewRef.detectChanges()
|
||||
node.on('change:data', () =>
|
||||
this.setInstanceInput(content, embeddedViewRef),
|
||||
)
|
||||
} else {
|
||||
const componentRef = viewContainerRef.createComponent(content)
|
||||
const insertNode = (componentRef.hostView as EmbeddedViewRef<any>)
|
||||
.rootNodes[0] as HTMLElement
|
||||
container.appendChild(insertNode)
|
||||
this.setInstanceInput(content, componentRef)
|
||||
node.on('change:data', () =>
|
||||
this.setInstanceInput(content, componentRef),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected unmountAngularContent(): HTMLDivElement {
|
||||
const container = this.getNodeContainer()
|
||||
container.innerHTML = ''
|
||||
return container
|
||||
}
|
||||
|
||||
override onMouseDown(e: Dom.MouseDownEvent, x: number, y: number) {
|
||||
const target = e.target as Element
|
||||
const tagName = target.tagName.toLowerCase()
|
||||
if (tagName === 'input') {
|
||||
const type = target.getAttribute('type')
|
||||
if (
|
||||
type == null ||
|
||||
[
|
||||
'text',
|
||||
'password',
|
||||
'number',
|
||||
'email',
|
||||
'search',
|
||||
'tel',
|
||||
'url',
|
||||
].includes(type)
|
||||
) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
super.onMouseDown(e, x, y)
|
||||
}
|
||||
|
||||
override unmount(): this {
|
||||
this.unmountAngularContent()
|
||||
super.unmount()
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
export namespace AngularShapeView {
|
||||
export const action = 'angular' as any
|
||||
|
||||
AngularShapeView.config({
|
||||
bootstrap: [action],
|
||||
actions: {
|
||||
component: action,
|
||||
},
|
||||
})
|
||||
|
||||
NodeView.registry.register('angular-shape-view', AngularShapeView, true)
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json"
|
||||
}
|
||||
@ -1,38 +1,3 @@
|
||||
## @antv/x6-common [2.0.10](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.9...@antv/x6-common@2.0.10) (2023-02-24)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add textLength & lengthAdjust to CASE_SENSITIVE_ATTR ([#3281](https://github.com/antvis/x6/issues/3281)) ([76fb1ac](https://github.com/antvis/x6/commit/76fb1acf74b0f1c308f7c824d02c12244b7ac8f3))
|
||||
|
||||
## @antv/x6-common [2.0.8](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.7...@antv/x6-common@2.0.8) (2023-02-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix typo for dom event handlers ([#3255](https://github.com/antvis/x6/issues/3255)) ([9b4fa86](https://github.com/antvis/x6/commit/9b4fa86daa587fe8818f3615bc1e40738a0f2319))
|
||||
|
||||
## @antv/x6-common [2.0.6](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.5...@antv/x6-common@2.0.6) (2023-01-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix index error for priorityQueue ([#3179](https://github.com/antvis/x6/issues/3179)) ([d64150b](https://github.com/antvis/x6/commit/d64150bfadf10fe21f44734a0267261260b8c53b))
|
||||
|
||||
## @antv/x6-common [2.0.5](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.4...@antv/x6-common@2.0.5) (2023-01-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* optimize css loader ([#3156](https://github.com/antvis/x6/issues/3156)) ([9c48ad8](https://github.com/antvis/x6/commit/9c48ad8dfc99e623a57855295d07c35be5483073))
|
||||
|
||||
## @antv/x6-common [2.0.4](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.3...@antv/x6-common@2.0.4) (2022-12-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix window incompatibility problem ([#3070](https://github.com/antvis/x6/issues/3070)) ([d8e1e63](https://github.com/antvis/x6/commit/d8e1e637d8027b9494cd26efc87815d74bd51366))
|
||||
|
||||
## @antv/x6-common [2.0.1](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.0...@antv/x6-common@2.0.1) (2022-11-25)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-common",
|
||||
"version": "2.0.10",
|
||||
"version": "2.0.3",
|
||||
"description": "Basic toolkit for X6",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -45,7 +45,7 @@ export class PriorityQueue<T> {
|
||||
*/
|
||||
insert(priority: number, value: T, id?: string) {
|
||||
const item: PriorityQueue.DataItem<T> = { priority, value }
|
||||
const index = this.data.length
|
||||
const index = this.data.length - 1
|
||||
if (id) {
|
||||
item.id = id
|
||||
this.index[id] = index
|
||||
@ -96,9 +96,7 @@ export class PriorityQueue<T> {
|
||||
const data = this.data
|
||||
const peek = data[0]
|
||||
const last = data.pop()!
|
||||
if (peek.id) {
|
||||
delete this.index[peek.id]
|
||||
}
|
||||
delete this.index[data.length]
|
||||
|
||||
if (data.length > 0) {
|
||||
data[0] = last
|
||||
|
||||
@ -2,7 +2,6 @@ import { Platform } from '../platform'
|
||||
|
||||
interface CssModule {
|
||||
name: string
|
||||
loadTimes: number
|
||||
styleElement: HTMLStyleElement | null
|
||||
}
|
||||
|
||||
@ -11,10 +10,7 @@ const cssModules: CssModule[] = []
|
||||
export function ensure(name: string, content: string) {
|
||||
const cssModule = cssModules.find((m) => m.name === name)
|
||||
if (cssModule) {
|
||||
cssModule.loadTimes += 1
|
||||
if (cssModule.loadTimes > 1) {
|
||||
return
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (!Platform.isApplyingHMR()) {
|
||||
@ -29,7 +25,6 @@ export function ensure(name: string, content: string) {
|
||||
|
||||
cssModules.push({
|
||||
name,
|
||||
loadTimes: 1,
|
||||
styleElement,
|
||||
})
|
||||
}
|
||||
@ -39,13 +34,7 @@ export function clean(name: string) {
|
||||
const index = cssModules.findIndex((m) => m.name === name)
|
||||
|
||||
if (index > -1) {
|
||||
const cssModule = cssModules[index]
|
||||
cssModule.loadTimes -= 1
|
||||
if (cssModule.loadTimes > 0) {
|
||||
return
|
||||
}
|
||||
|
||||
let styleElement = cssModule.styleElement
|
||||
let styleElement = cssModules[index].styleElement
|
||||
if (styleElement && styleElement.parentNode) {
|
||||
styleElement.parentNode.removeChild(styleElement)
|
||||
}
|
||||
|
||||
@ -6,8 +6,6 @@ export const CASE_SENSITIVE_ATTR = [
|
||||
'attributeName',
|
||||
'attributeType',
|
||||
'repeatCount',
|
||||
'textLength',
|
||||
'lengthAdjust',
|
||||
]
|
||||
|
||||
export type Attributes = { [key: string]: string | number | null | undefined }
|
||||
|
||||
@ -729,7 +729,7 @@ type TypeEventHandlersBase<TDelegateTarget, TData, TCurrentTarget, TTarget> = {
|
||||
TCurrentTarget,
|
||||
TTarget
|
||||
>]?:
|
||||
| TypeEventHandler<TDelegateTarget, TData, TCurrentTarget, TTarget, string>
|
||||
| TypeEventHandler<TDelegateTarget, TData, TCurrentTarget, TTarget, TType>
|
||||
| false
|
||||
| Record<string, unknown>
|
||||
}
|
||||
|
||||
@ -198,14 +198,7 @@ export function text(
|
||||
const autoLineHeight = defaultLineHeight === 'auto'
|
||||
const lineHeight = autoLineHeight ? '1.5em' : defaultLineHeight || '1em'
|
||||
|
||||
let needEmptyElem = true
|
||||
const childs = elem.children
|
||||
if (childs.length === 1 && childs[0].tagName.toUpperCase() === 'TITLE') {
|
||||
needEmptyElem = false
|
||||
}
|
||||
if (needEmptyElem) {
|
||||
empty(elem)
|
||||
}
|
||||
empty(elem)
|
||||
|
||||
attr(elem, {
|
||||
// Preserve spaces, do not consecutive spaces to get collapsed to one.
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export { debounce, throttle } from 'lodash-es'
|
||||
export { debounce } from 'lodash-es'
|
||||
|
||||
type Fn = (...args: any[]) => any
|
||||
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
// compatible with NodeList.prototype.forEach() before chrome 51
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
|
||||
if (
|
||||
typeof window === 'object' &&
|
||||
window.NodeList &&
|
||||
!NodeList.prototype.forEach
|
||||
) {
|
||||
if (window.NodeList && !NodeList.prototype.forEach) {
|
||||
NodeList.prototype.forEach = Array.prototype.forEach as any
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -7,7 +7,7 @@ declare module '@antv/x6/lib/graph/graph' {
|
||||
enableClipboard: () => Graph
|
||||
disableClipboard: () => Graph
|
||||
toggleClipboard: (enabled?: boolean) => Graph
|
||||
isClipboardEmpty: (options?: Clipboard.Options) => boolean
|
||||
isClipboardEmpty: () => boolean
|
||||
getCellsInClipboard: () => Cell[]
|
||||
cleanClipboard: () => Graph
|
||||
copy: (cells: Cell[], options?: Clipboard.CopyOptions) => Graph
|
||||
@ -55,10 +55,10 @@ Graph.prototype.toggleClipboard = function (enabled?: boolean) {
|
||||
return this
|
||||
}
|
||||
|
||||
Graph.prototype.isClipboardEmpty = function (options?: Clipboard.Options) {
|
||||
Graph.prototype.isClipboardEmpty = function () {
|
||||
const clipboard = this.getPlugin('clipboard') as Clipboard
|
||||
if (clipboard) {
|
||||
return clipboard.isEmpty(options)
|
||||
return clipboard.isEmpty()
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
@ -89,12 +89,7 @@ export class ClipboardImpl {
|
||||
}
|
||||
}
|
||||
|
||||
isEmpty(options: ClipboardImpl.Options = {}) {
|
||||
if (options.useLocalStorage) {
|
||||
// With useLocalStorage turned on, no real cells can be obtained without deserialize first
|
||||
// https://github.com/antvis/X6/issues/2573
|
||||
this.deserialize(options)
|
||||
}
|
||||
isEmpty() {
|
||||
return this.cells.length <= 0
|
||||
}
|
||||
|
||||
|
||||
@ -32,12 +32,14 @@ export class Clipboard
|
||||
if (this.disabled) {
|
||||
this.options.enabled = true
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
disable() {
|
||||
if (!this.disabled) {
|
||||
this.options.enabled = false
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
toggleEnabled(enabled?: boolean) {
|
||||
@ -58,8 +60,8 @@ export class Clipboard
|
||||
return this
|
||||
}
|
||||
|
||||
isEmpty(options: Clipboard.Options = {}) {
|
||||
return this.clipboardImpl.isEmpty(options)
|
||||
isEmpty() {
|
||||
return this.clipboardImpl.isEmpty()
|
||||
}
|
||||
|
||||
getCellsInClipboard() {
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
## @antv/x6-plugin-dnd [2.0.4](https://github.com/antvis/x6/compare/@antv/x6-plugin-dnd@2.0.3...@antv/x6-plugin-dnd@2.0.4) (2023-01-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* change dragging container options ([#3139](https://github.com/antvis/x6/issues/3139)) ([7b091f3](https://github.com/antvis/x6/commit/7b091f35dee147c5e7bf97577e14e11ceb7e8e3d))
|
||||
|
||||
## @antv/x6-plugin-dnd [2.0.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-dnd@2.0.2...@antv/x6-plugin-dnd@2.0.3) (2022-11-25)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-plugin-dnd",
|
||||
"version": "2.0.4",
|
||||
"version": "2.0.3",
|
||||
"description": "dnd plugin for X6",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -81,10 +81,7 @@ export class Dnd extends View {
|
||||
|
||||
this.targetModel.startBatch('dnd')
|
||||
Dom.addClass(this.container, 'dragging')
|
||||
Dom.appendTo(
|
||||
this.container,
|
||||
this.options.draggingContainer || document.body,
|
||||
)
|
||||
Dom.appendTo(this.container, this.options.containerParent || document.body)
|
||||
|
||||
this.sourceNode = node
|
||||
this.prepareDragging(node, e.clientX, e.clientY)
|
||||
@ -484,7 +481,7 @@ export namespace Dnd {
|
||||
// duration?: number
|
||||
// easing?: string
|
||||
// }
|
||||
draggingContainer?: HTMLElement
|
||||
containerParent?: HTMLElement
|
||||
/**
|
||||
* dnd tool box container.
|
||||
*/
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
# @antv/x6-plugin-history [2.2.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-history@2.1.3...@antv/x6-plugin-history@2.2.0) (2023-02-17)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* history add max stack size ([#3253](https://github.com/antvis/x6/issues/3253)) ([fba5310](https://github.com/antvis/x6/commit/fba531064ad8027c451a81b60d5efd7f7314a0fa))
|
||||
|
||||
## @antv/x6-plugin-history [2.1.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-history@2.1.2...@antv/x6-plugin-history@2.1.3) (2022-11-25)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-plugin-history",
|
||||
"version": "2.2.0",
|
||||
"version": "2.1.3",
|
||||
"description": "history plugin for X6",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -25,7 +25,6 @@ export class History
|
||||
protected batchLevel = 0
|
||||
protected lastBatchIndex = -1
|
||||
protected freezed = false
|
||||
protected stackSize = 0 // 0: not limit
|
||||
|
||||
protected readonly handlers: (<T extends History.ModelEvents>(
|
||||
event: T,
|
||||
@ -34,8 +33,6 @@ export class History
|
||||
|
||||
constructor(options: History.Options) {
|
||||
super()
|
||||
const { stackSize = 0 } = options
|
||||
this.stackSize = stackSize
|
||||
this.options = Util.getOptions(options)
|
||||
this.validator = new History.Validator({
|
||||
history: this,
|
||||
@ -104,7 +101,7 @@ export class History
|
||||
const cmd = this.redoStack.pop()
|
||||
if (cmd) {
|
||||
this.applyCommand(cmd, options)
|
||||
this.undoStackPush(cmd)
|
||||
this.undoStack.push(cmd)
|
||||
this.notify('redo', cmd, options)
|
||||
}
|
||||
}
|
||||
@ -427,7 +424,7 @@ export class History
|
||||
const cmds = this.filterBatchCommand(this.batchCommands)
|
||||
if (cmds.length > 0) {
|
||||
this.redoStack = []
|
||||
this.undoStackPush(cmds)
|
||||
this.undoStack.push(cmds)
|
||||
this.consolidateCommands()
|
||||
this.notify('add', cmds, options)
|
||||
}
|
||||
@ -501,7 +498,7 @@ export class History
|
||||
this.lastBatchIndex = Math.max(this.lastBatchIndex, 0)
|
||||
this.emit('batch', { cmd, options })
|
||||
} else {
|
||||
this.undoStackPush(cmd)
|
||||
this.undoStack.push(cmd)
|
||||
this.consolidateCommands()
|
||||
this.notify('add', cmd, options)
|
||||
}
|
||||
@ -563,17 +560,6 @@ export class History
|
||||
this.undoStack.pop()
|
||||
}
|
||||
|
||||
protected undoStackPush(cmd: History.Commands) {
|
||||
if (this.stackSize === 0) {
|
||||
this.undoStack.push(cmd)
|
||||
return
|
||||
}
|
||||
if (this.undoStack.length >= this.stackSize) {
|
||||
this.undoStack.shift()
|
||||
}
|
||||
this.undoStack.push(cmd)
|
||||
}
|
||||
|
||||
@Basecoat.dispose()
|
||||
dispose() {
|
||||
this.validator.dispose()
|
||||
@ -628,9 +614,7 @@ export namespace History {
|
||||
cancelInvalid?: boolean
|
||||
}
|
||||
|
||||
export interface Options extends Partial<CommonOptions> {
|
||||
stackSize?: number
|
||||
}
|
||||
export interface Options extends Partial<CommonOptions> {}
|
||||
|
||||
interface Data {
|
||||
id?: string
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
# @antv/x6-plugin-keyboard [2.2.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-keyboard@2.1.4...@antv/x6-plugin-keyboard@2.2.0) (2023-02-06)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* keyboard support clear and custom trigger ([#3202](https://github.com/antvis/x6/issues/3202)) ([668c932](https://github.com/antvis/x6/commit/668c93242fbcebb987cccc3dcfd56982f7c66252))
|
||||
|
||||
## @antv/x6-plugin-keyboard [2.1.4](https://github.com/antvis/x6/compare/@antv/x6-plugin-keyboard@2.1.3...@antv/x6-plugin-keyboard@2.1.4) (2022-11-29)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-plugin-keyboard",
|
||||
"version": "2.2.0",
|
||||
"version": "2.1.4",
|
||||
"description": "keyboard plugin for X6",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -14,8 +14,6 @@ declare module '@antv/x6/lib/graph/graph' {
|
||||
action?: KeyboardImpl.Action,
|
||||
) => Graph
|
||||
unbindKey: (keys: string | string[], action?: KeyboardImpl.Action) => Graph
|
||||
clearKeys: () => Graph
|
||||
triggerKey: (key: string, action: KeyboardImpl.Action) => Graph
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,19 +71,3 @@ Graph.prototype.unbindKey = function (
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
Graph.prototype.clearKeys = function() {
|
||||
const keyboard = this.getPlugin('keyboard') as Keyboard
|
||||
if(keyboard) {
|
||||
keyboard.clear()
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
Graph.prototype.triggerKey = function(key: string, action: KeyboardImpl.Action) {
|
||||
const keyboard = this.getPlugin('keyboard') as Keyboard
|
||||
if(keyboard) {
|
||||
keyboard.trigger(key, action)
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
@ -27,10 +27,12 @@ export class Keyboard extends Disposable {
|
||||
|
||||
enable() {
|
||||
this.keyboardImpl.enable()
|
||||
return this
|
||||
}
|
||||
|
||||
disable() {
|
||||
this.keyboardImpl.disable()
|
||||
return this
|
||||
}
|
||||
|
||||
toggleEnabled(enabled?: boolean) {
|
||||
@ -59,17 +61,6 @@ export class Keyboard extends Disposable {
|
||||
return this
|
||||
}
|
||||
|
||||
trigger(key: string, action?: KeyboardImpl.Action) {
|
||||
this.keyboardImpl.trigger(key, action)
|
||||
return this
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.keyboardImpl.clear()
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
unbindKey(keys: string | string[], action?: KeyboardImpl.Action) {
|
||||
this.keyboardImpl.off(keys, action)
|
||||
return this
|
||||
|
||||
@ -21,6 +21,7 @@ export class KeyboardImpl extends Disposable implements IDisablable {
|
||||
private readonly options: KeyboardImpl.Options & { graph: Graph },
|
||||
) {
|
||||
super()
|
||||
|
||||
const scroller = this.graph.getPlugin('scroller') as any
|
||||
this.container = scroller ? scroller.container : this.graph.container
|
||||
|
||||
@ -75,14 +76,6 @@ export class KeyboardImpl extends Disposable implements IDisablable {
|
||||
this.mousetrap.unbind(this.getKeys(keys), action)
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.mousetrap.reset()
|
||||
}
|
||||
|
||||
trigger(key: string, action?: KeyboardImpl.Action) {
|
||||
this.mousetrap.trigger(key, action)
|
||||
}
|
||||
|
||||
private focus(e: EventArgs['node:mouseup']) {
|
||||
const isInputEvent = this.isInputEvent(e.e)
|
||||
if (isInputEvent) {
|
||||
@ -102,7 +95,7 @@ export class KeyboardImpl extends Disposable implements IDisablable {
|
||||
|
||||
protected formatkey(key: string) {
|
||||
const formated = key
|
||||
.toLocaleLowerCase()
|
||||
.toLowerCase()
|
||||
.replace(/\s/g, '')
|
||||
.replace('delete', 'del')
|
||||
.replace('cmd', 'command')
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-plugin-scroller",
|
||||
"version": "2.0.8",
|
||||
"version": "2.0.7",
|
||||
"description": "scroller plugin for X6",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -35,16 +35,17 @@ export class Scroller extends Basecoat<Scroller.EventArgs> {
|
||||
return this.scrollerImpl.container
|
||||
}
|
||||
|
||||
constructor(public options: Scroller.Options) {
|
||||
constructor(public readonly options: Scroller.Options) {
|
||||
super()
|
||||
CssLoader.ensure(this.name, content)
|
||||
}
|
||||
|
||||
public init(graph: Graph) {
|
||||
this.graph = graph
|
||||
const options = ScrollerImpl.getOptions({ ...this.options, graph })
|
||||
this.options = options
|
||||
this.scrollerImpl = new ScrollerImpl(options)
|
||||
this.scrollerImpl = new ScrollerImpl({
|
||||
...this.options,
|
||||
graph,
|
||||
})
|
||||
this.setup()
|
||||
this.startListening()
|
||||
this.updateClassName()
|
||||
@ -400,10 +401,8 @@ export namespace Scroller {
|
||||
export interface EventArgs extends ScrollerImpl.EventArgs {}
|
||||
|
||||
type EventType = 'leftMouseDown' | 'rightMouseDown'
|
||||
interface ScrollerOptions extends ScrollerImpl.Options {
|
||||
export interface Options extends ScrollerImpl.CommonOptions {
|
||||
pannable?: boolean | { enabled: boolean; eventTypes: EventType[] }
|
||||
modifiers?: string | ModifierKey[] | null // alt, ctrl, shift, meta
|
||||
}
|
||||
|
||||
export type Options = Omit<ScrollerOptions, 'graph'>
|
||||
}
|
||||
|
||||
@ -1128,8 +1128,7 @@ export namespace ScrollerImpl {
|
||||
panning: { e: Dom.MouseMoveEvent }
|
||||
'pan:stop': { e: Dom.MouseUpEvent }
|
||||
}
|
||||
export interface Options {
|
||||
graph: Graph
|
||||
export interface CommonOptions {
|
||||
enabled?: boolean
|
||||
className?: string
|
||||
width?: number
|
||||
@ -1152,6 +1151,10 @@ export namespace ScrollerImpl {
|
||||
scroller: ScrollerImpl,
|
||||
) => TransformManager.FitToContentFullOptions)
|
||||
}
|
||||
|
||||
export interface Options extends CommonOptions {
|
||||
graph: Graph
|
||||
}
|
||||
export interface CenterOptions {
|
||||
padding?: NumberExt.SideOptions
|
||||
}
|
||||
@ -1263,7 +1266,7 @@ export namespace ScrollerImpl {
|
||||
result.background == null
|
||||
) {
|
||||
result.background = graphOptions.background
|
||||
options.graph.background.clear()
|
||||
delete graphOptions.background
|
||||
}
|
||||
|
||||
return result as ScrollerImpl.Options
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -62,12 +62,14 @@ export class Selection extends Basecoat<SelectionImpl.EventArgs> {
|
||||
if (this.disabled) {
|
||||
this.options.enabled = true
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
disable() {
|
||||
if (!this.disabled) {
|
||||
this.options.enabled = false
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
toggleEnabled(enabled?: boolean) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -29,10 +29,12 @@ export class Snapline extends Disposable {
|
||||
|
||||
enable() {
|
||||
this.snaplineImpl.enable()
|
||||
return this
|
||||
}
|
||||
|
||||
disable() {
|
||||
this.snaplineImpl.disable()
|
||||
return this
|
||||
}
|
||||
|
||||
toggleEnabled(enabled?: boolean) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -1,17 +1,3 @@
|
||||
## @antv/x6-plugin-transform [2.1.6](https://github.com/antvis/x6/compare/@antv/x6-plugin-transform@2.1.5...@antv/x6-plugin-transform@2.1.6) (2023-02-24)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* transform active-handle class should remove when active removed ([#3298](https://github.com/antvis/x6/issues/3298)) ([709a141](https://github.com/antvis/x6/commit/709a141e28e9f25d54ece0ade353bd343ac0e55f))
|
||||
|
||||
## @antv/x6-plugin-transform [2.1.5](https://github.com/antvis/x6/compare/@antv/x6-plugin-transform@2.1.4...@antv/x6-plugin-transform@2.1.5) (2022-12-24)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add defense for view in transform plugin ([#3092](https://github.com/antvis/x6/issues/3092)) ([fb8098c](https://github.com/antvis/x6/commit/fb8098c1c06440dd69f4e93881fd36f7e6de2a56))
|
||||
|
||||
## @antv/x6-plugin-transform [2.1.4](https://github.com/antvis/x6/compare/@antv/x6-plugin-transform@2.1.3...@antv/x6-plugin-transform@2.1.4) (2022-12-07)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-plugin-transform",
|
||||
"version": "2.1.6",
|
||||
"version": "2.1.4",
|
||||
"description": "transform plugin for X6",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -7,7 +7,6 @@ export class Transform extends Basecoat<Transform.EventArgs> {
|
||||
private graph: Graph
|
||||
protected widgets: Map<Node, TransformImpl> = new Map()
|
||||
public name = 'transform'
|
||||
private disabled = false
|
||||
|
||||
constructor(public readonly options: Transform.Options) {
|
||||
super()
|
||||
@ -16,9 +15,6 @@ export class Transform extends Basecoat<Transform.EventArgs> {
|
||||
|
||||
init(graph: Graph) {
|
||||
this.graph = graph
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
this.startListening()
|
||||
}
|
||||
|
||||
@ -32,24 +28,6 @@ export class Transform extends Basecoat<Transform.EventArgs> {
|
||||
this.graph.off('blank:mousedown', this.onBlankMouseDown, this)
|
||||
}
|
||||
|
||||
enable() {
|
||||
if (this.disabled) {
|
||||
this.disabled = false
|
||||
this.startListening()
|
||||
}
|
||||
}
|
||||
|
||||
disable() {
|
||||
if (!this.disabled) {
|
||||
this.disabled = true
|
||||
this.stopListening()
|
||||
}
|
||||
}
|
||||
|
||||
isEnabled() {
|
||||
return !this.disabled
|
||||
}
|
||||
|
||||
protected onNodeClick({ node }: EventArgs['node:click']) {
|
||||
this.clearWidgets()
|
||||
const widget = this.createTransform(node)
|
||||
|
||||
@ -107,11 +107,7 @@ export class TransformImpl extends View<TransformImpl.EventArgs> {
|
||||
|
||||
render() {
|
||||
this.renderHandles()
|
||||
|
||||
if (this.view) {
|
||||
this.view.addClass(Private.NODE_CLS)
|
||||
}
|
||||
|
||||
this.view.addClass(Private.NODE_CLS)
|
||||
Dom.addClass(this.container, this.containerClassName)
|
||||
Dom.toggleClass(
|
||||
this.container,
|
||||
@ -157,9 +153,7 @@ export class TransformImpl extends View<TransformImpl.EventArgs> {
|
||||
}
|
||||
|
||||
remove() {
|
||||
if (this.view) {
|
||||
this.view.removeClass(Private.NODE_CLS)
|
||||
}
|
||||
this.view.removeClass(Private.NODE_CLS)
|
||||
return super.remove()
|
||||
}
|
||||
|
||||
@ -493,7 +487,7 @@ export class TransformImpl extends View<TransformImpl.EventArgs> {
|
||||
Dom.removeClass(this.container, `${this.containerClassName}-active`)
|
||||
|
||||
if (this.handle) {
|
||||
Dom.removeClass(this.handle, `${this.containerClassName}-active-handle`)
|
||||
Dom.removeClass(this.handle, `${this.containerClassName}-active`)
|
||||
|
||||
const pos = this.handle.getAttribute(
|
||||
'data-position',
|
||||
|
||||
@ -1,17 +1,3 @@
|
||||
## @antv/x6-react-components [2.0.7](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.6...@antv/x6-react-components@2.0.7) (2023-01-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* don't hide when click on color picker ([#3172](https://github.com/antvis/x6/issues/3172)) ([cae8625](https://github.com/antvis/x6/commit/cae8625feb20fd93cc8002fa6ed00d345d3cf33c))
|
||||
|
||||
## @antv/x6-react-components [2.0.6](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.5...@antv/x6-react-components@2.0.6) (2023-01-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* stop propagation when click menu item ([#3147](https://github.com/antvis/x6/issues/3147)) ([90dad14](https://github.com/antvis/x6/commit/90dad14d7e1ad8639b80b215596c8f4bad7b00ed))
|
||||
|
||||
## @antv/x6-react-components [2.0.5](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.4...@antv/x6-react-components@2.0.5) (2022-11-25)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-react-components",
|
||||
"version": "2.0.7",
|
||||
"version": "2.0.5",
|
||||
"description": "React components for building x6 editors",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -37,9 +37,7 @@ export class ColorPicker extends React.Component<
|
||||
|
||||
onDocumentClick = (e: React.MouseEvent) => {
|
||||
const target = e.target as HTMLDivElement
|
||||
const picker = this.container.querySelector('.sketch-picker')!
|
||||
|
||||
if (target === picker || picker.contains(target)) {
|
||||
if (target === this.container || this.container.contains(target)) {
|
||||
return
|
||||
}
|
||||
|
||||
@ -61,9 +59,12 @@ export class ColorPicker extends React.Component<
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(value, event)
|
||||
}
|
||||
|
||||
this.setState({
|
||||
active: false,
|
||||
color: value.rgb,
|
||||
})
|
||||
this.unbindDocEvent()
|
||||
}
|
||||
|
||||
handleClick = (e: React.MouseEvent) => {
|
||||
@ -83,10 +84,8 @@ export class ColorPicker extends React.Component<
|
||||
}
|
||||
}
|
||||
|
||||
refContainer = (popoverRef: { getContainer: () => HTMLDivElement }) => {
|
||||
if (popoverRef) {
|
||||
this.container = popoverRef.getContainer()
|
||||
}
|
||||
refContainer = (container: HTMLDivElement) => {
|
||||
this.container = container
|
||||
}
|
||||
|
||||
renderPicker() {
|
||||
@ -124,12 +123,10 @@ export class ColorPicker extends React.Component<
|
||||
{...popoverProps}
|
||||
content={this.renderPicker()}
|
||||
overlayClassName={`${baseCls}-overlay`}
|
||||
destroyTooltipOnHide
|
||||
ref={this.refContainer}
|
||||
trigger={[]}
|
||||
>
|
||||
<div
|
||||
style={style}
|
||||
ref={this.refContainer}
|
||||
onClick={this.handleClick}
|
||||
className={classNames(baseCls, {
|
||||
[`${baseCls}-disabled`]: disabled,
|
||||
|
||||
@ -26,7 +26,6 @@ class MenubarItemInner extends React.PureComponent<
|
||||
}
|
||||
|
||||
onClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
this.props.context.activeMenubar()
|
||||
this.removeDeactive(e.currentTarget.parentElement)
|
||||
this.active()
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -26,7 +26,10 @@ export class ReactShapeView extends NodeView<ReactShape> {
|
||||
const node = this.cell
|
||||
|
||||
if (container) {
|
||||
const elem = React.createElement(Wrap, { node, graph: this.graph })
|
||||
const graph = node.model ? node.model.graph : null
|
||||
// Actually in the dnd plugin, this graph is empty,
|
||||
// in order to make the external perception type of graph is a graph, rather than graph | null, so hack this.
|
||||
const elem = React.createElement(Wrap, { node, graph: graph! })
|
||||
if (Portal.isActive()) {
|
||||
const portal = createPortal(elem, container) as ReactPortal
|
||||
Portal.connect(this.cell.id, portal)
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
## @antv/x6-vue-shape [2.0.9](https://github.com/antvis/x6/compare/@antv/x6-vue-shape@2.0.8...@antv/x6-vue-shape@2.0.9) (2022-12-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* get graph from right place ([#3078](https://github.com/antvis/x6/issues/3078)) ([844ee5f](https://github.com/antvis/x6/commit/844ee5fa043cbcd788ec1693f88576e797426228))
|
||||
|
||||
## @antv/x6-vue-shape [2.0.7](https://github.com/antvis/x6/compare/@antv/x6-vue-shape@2.0.6...@antv/x6-vue-shape@2.0.7) (2022-12-09)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-vue-shape",
|
||||
"version": "2.0.9",
|
||||
"version": "2.0.7",
|
||||
"description": "X6 shape for rendering vue components.",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { defineComponent, h, reactive, isVue3, Vue } from 'vue-demi'
|
||||
import { Graph } from '@antv/x6'
|
||||
import { VueShape } from './node'
|
||||
|
||||
let active = false
|
||||
@ -10,7 +9,6 @@ export function connect(
|
||||
component: any,
|
||||
container: HTMLDivElement,
|
||||
node: VueShape,
|
||||
graph: Graph,
|
||||
) {
|
||||
if (active) {
|
||||
const { Teleport, markRaw } = Vue as any
|
||||
@ -19,7 +17,6 @@ export function connect(
|
||||
render: () => h(Teleport, { to: container } as any, [h(component)]),
|
||||
provide: () => ({
|
||||
getNode: () => node,
|
||||
getGraph: () => graph,
|
||||
}),
|
||||
}),
|
||||
)
|
||||
|
||||
@ -26,7 +26,6 @@ export class VueShapeView extends NodeView<VueShape> {
|
||||
this.unmountVueComponent()
|
||||
const root = this.getComponentContainer()
|
||||
const node = this.cell
|
||||
const graph = this.graph
|
||||
|
||||
if (root) {
|
||||
const { component } = shapeMaps[node.shape]
|
||||
@ -41,13 +40,12 @@ export class VueShapeView extends NodeView<VueShape> {
|
||||
provide() {
|
||||
return {
|
||||
getNode: () => node,
|
||||
getGraph: () => graph,
|
||||
}
|
||||
},
|
||||
})
|
||||
} else if (isVue3) {
|
||||
if (isActive()) {
|
||||
connect(this.targetId(), component, root, node, graph)
|
||||
connect(this.targetId(), component, root, node)
|
||||
} else {
|
||||
this.vm = createApp({
|
||||
render() {
|
||||
@ -56,7 +54,6 @@ export class VueShapeView extends NodeView<VueShape> {
|
||||
provide() {
|
||||
return {
|
||||
getNode: () => node,
|
||||
getGraph: () => graph,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@ -1,60 +1,3 @@
|
||||
# @antv/x6 [2.3.0](https://github.com/antvis/x6/compare/@antv/x6@2.2.1...@antv/x6@2.3.0) (2023-02-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **scheduler:** remove spammy console.log ([#3200](https://github.com/antvis/x6/issues/3200)) ([1f83a2b](https://github.com/antvis/x6/commit/1f83a2b8a84b53303293e724e7f9d0ee49182efc))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add options for positionCell api ([#3208](https://github.com/antvis/x6/issues/3208)) ([58c0fe4](https://github.com/antvis/x6/commit/58c0fe459c0314997440b4af7dc0443abe199924))
|
||||
|
||||
## @antv/x6 [2.2.1](https://github.com/antvis/x6/compare/@antv/x6@2.2.0...@antv/x6@2.2.1) (2023-02-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* ensure the container in html view ([#3196](https://github.com/antvis/x6/issues/3196)) ([3a59703](https://github.com/antvis/x6/commit/3a59703f1c2da3ac8c8471eb9b864ac4cf468f97))
|
||||
|
||||
# @antv/x6 [2.2.0](https://github.com/antvis/x6/compare/@antv/x6@2.1.7...@antv/x6@2.2.0) (2023-01-31)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add port events ([#3185](https://github.com/antvis/x6/issues/3185)) ([3265fe5](https://github.com/antvis/x6/commit/3265fe5b983f22e34d60c647212824961ecfdab5))
|
||||
|
||||
## @antv/x6 [2.1.6](https://github.com/antvis/x6/compare/@antv/x6@2.1.5...@antv/x6@2.1.6) (2023-01-19)
|
||||
|
||||
## @antv/x6 [2.1.5](https://github.com/antvis/x6/compare/@antv/x6@2.1.4...@antv/x6@2.1.5) (2023-01-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* update group even group is empty ([#3117](https://github.com/antvis/x6/issues/3117)) ([6abd068](https://github.com/antvis/x6/commit/6abd0683eab22eb0fa1a4702642ab76b91320694))
|
||||
|
||||
## @antv/x6 [2.1.4](https://github.com/antvis/x6/compare/@antv/x6@2.1.3...@antv/x6@2.1.4) (2023-01-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* optimize rendering logic to prevent loops ([#3108](https://github.com/antvis/x6/issues/3108)) ([45337e4](https://github.com/antvis/x6/commit/45337e4a62224aaffd60fc8b2670a071c5560796))
|
||||
|
||||
## @antv/x6 [2.1.3](https://github.com/antvis/x6/compare/@antv/x6@2.1.2...@antv/x6@2.1.3) (2022-12-24)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* schedule edge when source and target is not ready ([#3090](https://github.com/antvis/x6/issues/3090)) ([019333d](https://github.com/antvis/x6/commit/019333d79d7f22c44c400f29d501497f4323af1a))
|
||||
|
||||
## @antv/x6 [2.1.1](https://github.com/antvis/x6/compare/@antv/x6@2.1.0...@antv/x6@2.1.1) (2022-12-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* arrowhead not get options bug ([#3065](https://github.com/antvis/x6/issues/3065)) ([3b668fe](https://github.com/antvis/x6/commit/3b668feb4eac47994f52d0cc977d22a8a2c06acd))
|
||||
* set snapToGrid to false by default ([#3066](https://github.com/antvis/x6/issues/3066)) ([e2bb71d](https://github.com/antvis/x6/commit/e2bb71d95484b29187fafca97f1a386e9b984095))
|
||||
|
||||
# @antv/x6 [2.1.0](https://github.com/antvis/x6/compare/@antv/x6@2.0.9...@antv/x6@2.1.0) (2022-12-19)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021-2023 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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6",
|
||||
"version": "2.5.1",
|
||||
"version": "2.1.0",
|
||||
"description": "JavaScript diagramming library that uses SVG and HTML for rendering",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { Dom } from '@antv/x6-common'
|
||||
import { Model } from '../model'
|
||||
import { CellView } from '../view'
|
||||
import { Scheduler } from '../renderer/scheduler'
|
||||
|
||||
interface CommonEventArgs<E> {
|
||||
e: E
|
||||
@ -14,8 +13,7 @@ interface PositionEventArgs<E> extends CommonEventArgs<E> {
|
||||
|
||||
export interface EventArgs
|
||||
extends Omit<Model.EventArgs, 'sorted' | 'updated' | 'reseted'>,
|
||||
CellView.EventArgs,
|
||||
Scheduler.EventArgs {
|
||||
CellView.EventArgs {
|
||||
'model:sorted'?: Model.EventArgs['sorted']
|
||||
'model:updated': Model.EventArgs['updated']
|
||||
'model:reseted': Model.EventArgs['reseted']
|
||||
|
||||
@ -702,8 +702,8 @@ export class Graph extends Basecoat<EventArgs> {
|
||||
/**
|
||||
* Position the center of graph to the center of the viewport.
|
||||
*/
|
||||
center(options?: Transform.CenterOptions) {
|
||||
return this.centerPoint(options)
|
||||
center() {
|
||||
return this.centerPoint()
|
||||
}
|
||||
|
||||
/**
|
||||
@ -712,25 +712,13 @@ export class Graph extends Basecoat<EventArgs> {
|
||||
* only center along the specified dimension and keep the other coordinate
|
||||
* unchanged.
|
||||
*/
|
||||
centerPoint(
|
||||
x: number,
|
||||
y: null | number,
|
||||
options?: Transform.CenterOptions,
|
||||
): this
|
||||
centerPoint(
|
||||
x: null | number,
|
||||
y: number,
|
||||
options?: Transform.CenterOptions,
|
||||
): this
|
||||
centerPoint(optons?: Transform.CenterOptions): this
|
||||
centerPoint(
|
||||
x?: number | null | Transform.CenterOptions,
|
||||
y?: number | null,
|
||||
options?: Transform.CenterOptions,
|
||||
) {
|
||||
centerPoint(x: number, y: null | number): this
|
||||
centerPoint(x: null | number, y: number): this
|
||||
centerPoint(): this
|
||||
centerPoint(x?: number | null, y?: number | null) {
|
||||
const scroller = this.getPlugin<any>('scroller')
|
||||
if (scroller) {
|
||||
scroller.centerPoint(x as number, y as number, options)
|
||||
scroller.centerPoint(x as number, y as number)
|
||||
} else {
|
||||
this.transform.centerPoint(x as number, y as number)
|
||||
}
|
||||
@ -749,10 +737,10 @@ export class Graph extends Basecoat<EventArgs> {
|
||||
return this
|
||||
}
|
||||
|
||||
centerCell(cell: Cell, options?: Transform.PositionContentOptions) {
|
||||
centerCell(cell: Cell) {
|
||||
const scroller = this.getPlugin<any>('scroller')
|
||||
if (scroller) {
|
||||
scroller.centerCell(cell, options)
|
||||
scroller.centerCell(cell)
|
||||
} else {
|
||||
this.transform.centerCell(cell)
|
||||
}
|
||||
@ -764,11 +752,10 @@ export class Graph extends Basecoat<EventArgs> {
|
||||
point: Point.PointLike,
|
||||
x: number | string,
|
||||
y: number | string,
|
||||
options: Transform.CenterOptions = {},
|
||||
) {
|
||||
const scroller = this.getPlugin<any>('scroller')
|
||||
if (scroller) {
|
||||
scroller.positionPoint(point, x, y, options)
|
||||
scroller.positionPoint(point, x, y)
|
||||
} else {
|
||||
this.transform.positionPoint(point, x, y)
|
||||
}
|
||||
@ -776,14 +763,10 @@ export class Graph extends Basecoat<EventArgs> {
|
||||
return this
|
||||
}
|
||||
|
||||
positionRect(
|
||||
rect: Rectangle.RectangleLike,
|
||||
direction: Transform.Direction,
|
||||
options?: Transform.CenterOptions,
|
||||
) {
|
||||
positionRect(rect: Rectangle.RectangleLike, direction: Transform.Direction) {
|
||||
const scroller = this.getPlugin<any>('scroller')
|
||||
if (scroller) {
|
||||
scroller.positionRect(rect, direction, options)
|
||||
scroller.positionRect(rect, direction)
|
||||
} else {
|
||||
this.transform.positionRect(rect, direction)
|
||||
}
|
||||
@ -791,14 +774,10 @@ export class Graph extends Basecoat<EventArgs> {
|
||||
return this
|
||||
}
|
||||
|
||||
positionCell(
|
||||
cell: Cell,
|
||||
direction: Transform.Direction,
|
||||
options?: Transform.CenterOptions,
|
||||
) {
|
||||
positionCell(cell: Cell, direction: Transform.Direction) {
|
||||
const scroller = this.getPlugin<any>('scroller')
|
||||
if (scroller) {
|
||||
scroller.positionCell(cell, direction, options)
|
||||
scroller.positionCell(cell, direction)
|
||||
} else {
|
||||
this.transform.positionCell(cell, direction)
|
||||
}
|
||||
@ -1214,56 +1193,15 @@ export class Graph extends Basecoat<EventArgs> {
|
||||
}
|
||||
|
||||
getPlugin<T extends Graph.Plugin>(pluginName: string): T | undefined {
|
||||
return Array.from(this.installedPlugins).find(
|
||||
(plugin) => plugin.name === pluginName,
|
||||
) as T
|
||||
}
|
||||
let result: Graph.Plugin | undefined
|
||||
|
||||
getPlugins<T extends Graph.Plugin[]>(pluginName: string[]): T | undefined {
|
||||
return Array.from(this.installedPlugins).filter((plugin) =>
|
||||
pluginName.includes(plugin.name),
|
||||
) as T
|
||||
}
|
||||
|
||||
disablePlugins(plugins: string[] | string) {
|
||||
let postPlugins = plugins
|
||||
if (!Array.isArray(postPlugins)) {
|
||||
postPlugins = [postPlugins]
|
||||
}
|
||||
const aboutToChangePlugins = this.getPlugins(postPlugins)
|
||||
aboutToChangePlugins?.forEach((plugin) => {
|
||||
plugin?.disable?.()
|
||||
this.installedPlugins.forEach((plugin) => {
|
||||
if (plugin.name === pluginName) {
|
||||
result = plugin
|
||||
}
|
||||
})
|
||||
return this
|
||||
}
|
||||
|
||||
enablePlugins(plugins: string[] | string) {
|
||||
let postPlugins = plugins
|
||||
if (!Array.isArray(postPlugins)) {
|
||||
postPlugins = [postPlugins]
|
||||
}
|
||||
const aboutToChangePlugins = this.getPlugins(postPlugins)
|
||||
aboutToChangePlugins?.forEach((plugin) => {
|
||||
plugin?.enable?.()
|
||||
})
|
||||
return this
|
||||
}
|
||||
|
||||
disposePlugins(plugins: string[] | string) {
|
||||
let postPlugins = plugins
|
||||
if (!Array.isArray(postPlugins)) {
|
||||
postPlugins = [postPlugins]
|
||||
}
|
||||
const aboutToChangePlugins = this.getPlugins(postPlugins)
|
||||
aboutToChangePlugins?.forEach((plugin) => {
|
||||
plugin.dispose()
|
||||
})
|
||||
return this
|
||||
}
|
||||
|
||||
isPluginEnabled(pluginName: string) {
|
||||
const pluginIns = this.getPlugin(pluginName)
|
||||
return pluginIns?.isEnabled?.()
|
||||
return result as T
|
||||
}
|
||||
|
||||
// #endregion
|
||||
@ -1411,8 +1349,5 @@ export namespace Graph {
|
||||
name: string
|
||||
init: (graph: Graph, ...options: any[]) => any
|
||||
dispose: () => void
|
||||
disable?: () => void
|
||||
enable?: () => void
|
||||
isEnabled?: () => boolean
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,8 +55,6 @@ export namespace Options {
|
||||
|
||||
onPortRendered?: (args: OnPortRenderedArgs) => void
|
||||
onEdgeLabelRendered?: (args: OnEdgeLabelRenderedArgs) => void
|
||||
|
||||
createCellView?: (this: Graph, cell: Cell) => CellView | null | undefined
|
||||
}
|
||||
|
||||
export interface ManualBooleans {
|
||||
|
||||
@ -3,9 +3,7 @@ import { Base } from './base'
|
||||
|
||||
export class VirtualRenderManager extends Base {
|
||||
protected init() {
|
||||
this.resetRenderArea = FunctionExt.throttle(this.resetRenderArea, 200, {
|
||||
leading: true,
|
||||
})
|
||||
this.resetRenderArea = FunctionExt.debounce(this.resetRenderArea, 200)
|
||||
this.resetRenderArea()
|
||||
this.startListening()
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user