mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-04 17:27:09 +00:00
feat: 加上 plugin-outline-pane
This commit is contained in:
力皓
parent
e599acd2f0
commit
83c0772bc5
106
packages/plugin-outline-pane/.gitignore
vendored
Normal file
106
packages/plugin-outline-pane/.gitignore
vendored
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
# project custom
|
||||||
|
build
|
||||||
|
dist
|
||||||
|
packages/*/lib/
|
||||||
|
packages/*/es/
|
||||||
|
packages/*/dist/
|
||||||
|
packages/*/output/
|
||||||
|
package-lock.json
|
||||||
|
yarn.lock
|
||||||
|
deploy-space/packages
|
||||||
|
deploy-space/.env
|
||||||
|
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
lib
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# TypeScript v1 declaration files
|
||||||
|
typings/
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
.env.test
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# next.js build output
|
||||||
|
.next
|
||||||
|
|
||||||
|
# nuxt.js build output
|
||||||
|
.nuxt
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# mac config files
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# codealike
|
||||||
|
codealike.json
|
||||||
665
packages/plugin-outline-pane/CHANGELOG.md
Normal file
665
packages/plugin-outline-pane/CHANGELOG.md
Normal file
@ -0,0 +1,665 @@
|
|||||||
|
# Change Log
|
||||||
|
|
||||||
|
All notable changes to this project will be documented in this file.
|
||||||
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
<a name="1.0.21"></a>
|
||||||
|
## [1.0.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.20...@ali/lowcode-plugin-outline-pane@1.0.21) (2020-11-16)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.20"></a>
|
||||||
|
## [1.0.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.19...@ali/lowcode-plugin-outline-pane@1.0.20) (2020-11-10)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.19"></a>
|
||||||
|
## [1.0.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.18...@ali/lowcode-plugin-outline-pane@1.0.19) (2020-11-10)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.18"></a>
|
||||||
|
## [1.0.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.17...@ali/lowcode-plugin-outline-pane@1.0.18) (2020-11-05)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.17"></a>
|
||||||
|
## [1.0.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.16...@ali/lowcode-plugin-outline-pane@1.0.17) (2020-11-05)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.16"></a>
|
||||||
|
## [1.0.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.15...@ali/lowcode-plugin-outline-pane@1.0.16) (2020-11-05)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.15"></a>
|
||||||
|
## [1.0.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.14...@ali/lowcode-plugin-outline-pane@1.0.15) (2020-11-04)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.14"></a>
|
||||||
|
## [1.0.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.13...@ali/lowcode-plugin-outline-pane@1.0.14) (2020-11-04)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.13"></a>
|
||||||
|
## [1.0.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.12...@ali/lowcode-plugin-outline-pane@1.0.13) (2020-11-02)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.12"></a>
|
||||||
|
## [1.0.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.11...@ali/lowcode-plugin-outline-pane@1.0.12) (2020-10-20)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.11"></a>
|
||||||
|
## [1.0.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.10...@ali/lowcode-plugin-outline-pane@1.0.11) (2020-10-19)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.10"></a>
|
||||||
|
## [1.0.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.9...@ali/lowcode-plugin-outline-pane@1.0.10) (2020-09-29)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.9"></a>
|
||||||
|
## [1.0.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.8...@ali/lowcode-plugin-outline-pane@1.0.9) (2020-09-28)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.8"></a>
|
||||||
|
## [1.0.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.8-0...@ali/lowcode-plugin-outline-pane@1.0.8) (2020-09-28)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.8-0"></a>
|
||||||
|
## [1.0.8-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.61...@ali/lowcode-plugin-outline-pane@1.0.8-0) (2020-09-09)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* 合并master分支 ([bd2c6ad](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/bd2c6ad))
|
||||||
|
* 兼容modal模式 ([1092ee9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/1092ee9))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="1.0.7-0"></a>
|
||||||
|
## [1.0.7-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.6-0...@ali/lowcode-plugin-outline-pane@1.0.7-0) (2020-09-02)
|
||||||
|
|
||||||
|
|
||||||
|
<a name="0.8.61"></a>
|
||||||
|
## [0.8.61](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.60...@ali/lowcode-plugin-outline-pane@0.8.61) (2020-09-08)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.60"></a>
|
||||||
|
## [0.8.60](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.59...@ali/lowcode-plugin-outline-pane@0.8.60) (2020-09-03)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.59"></a>
|
||||||
|
## [0.8.59](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.58...@ali/lowcode-plugin-outline-pane@0.8.59) (2020-09-03)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.58"></a>
|
||||||
|
## [0.8.58](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.57...@ali/lowcode-plugin-outline-pane@0.8.58) (2020-08-27)
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.6-0"></a>
|
||||||
|
## [1.0.6-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.58...@ali/lowcode-plugin-outline-pane@1.0.6-0) (2020-09-02)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* 合并master分支 ([bd2c6ad](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/bd2c6ad))
|
||||||
|
* 兼容modal模式 ([1092ee9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/1092ee9))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="1.0.5-0"></a>
|
||||||
|
## [1.0.5-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.4-0...@ali/lowcode-plugin-outline-pane@1.0.5-0) (2020-08-20)
|
||||||
|
<a name="0.8.54"></a>
|
||||||
|
## [0.8.54](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.53...@ali/lowcode-plugin-outline-pane@0.8.54) (2020-08-20)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.4-0"></a>
|
||||||
|
## [1.0.4-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.3-0...@ali/lowcode-plugin-outline-pane@1.0.4-0) (2020-08-20)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.3-0"></a>
|
||||||
|
## [1.0.3-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.2-0...@ali/lowcode-plugin-outline-pane@1.0.3-0) (2020-08-20)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.2-0"></a>
|
||||||
|
## [1.0.2-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@1.0.1-0...@ali/lowcode-plugin-outline-pane@1.0.2-0) (2020-08-20)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="1.0.1-0"></a>
|
||||||
|
## [1.0.1-0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.53...@ali/lowcode-plugin-outline-pane@1.0.1-0) (2020-08-20)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* 兼容modal模式 ([1092ee9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/1092ee9))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="1.0.0"></a>
|
||||||
|
# [1.0.0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.13.0...@ali/lowcode-plugin-outline-pane@1.0.0) (2020-08-17)
|
||||||
|
<a name="0.8.53"></a>
|
||||||
|
## [0.8.53](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.52...@ali/lowcode-plugin-outline-pane@0.8.53) (2020-08-19)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.52"></a>
|
||||||
|
## [0.8.52](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.51...@ali/lowcode-plugin-outline-pane@0.8.52) (2020-08-19)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.51"></a>
|
||||||
|
## [0.8.51](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.50...@ali/lowcode-plugin-outline-pane@0.8.51) (2020-08-19)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.50"></a>
|
||||||
|
## [0.8.50](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.49...@ali/lowcode-plugin-outline-pane@0.8.50) (2020-08-17)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.49"></a>
|
||||||
|
## [0.8.49](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.48...@ali/lowcode-plugin-outline-pane@0.8.49) (2020-08-14)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.13.0"></a>
|
||||||
|
# [0.13.0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.12.0...@ali/lowcode-plugin-outline-pane@0.13.0) (2020-08-17)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.12.0"></a>
|
||||||
|
# [0.12.0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.10.0...@ali/lowcode-plugin-outline-pane@0.12.0) (2020-08-17)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.11.0"></a>
|
||||||
|
# [0.11.0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.10.0...@ali/lowcode-plugin-outline-pane@0.11.0) (2020-08-17)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.10.0"></a>
|
||||||
|
# [0.10.0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.9.0...@ali/lowcode-plugin-outline-pane@0.10.0) (2020-08-16)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.9.0"></a>
|
||||||
|
# [0.9.0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.43...@ali/lowcode-plugin-outline-pane@0.9.0) (2020-08-14)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* 兼容modal模式 ([1092ee9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/1092ee9))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="0.8.43"></a>
|
||||||
|
## [0.8.43](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.42...@ali/lowcode-plugin-outline-pane@0.8.43) (2020-08-04)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.42"></a>
|
||||||
|
## [0.8.42](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.40...@ali/lowcode-plugin-outline-pane@0.8.42) (2020-08-04)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.41"></a>
|
||||||
|
## [0.8.41](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.40...@ali/lowcode-plugin-outline-pane@0.8.41) (2020-08-04)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.40"></a>
|
||||||
|
## [0.8.40](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.39...@ali/lowcode-plugin-outline-pane@0.8.40) (2020-07-29)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.39"></a>
|
||||||
|
## [0.8.39](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.38...@ali/lowcode-plugin-outline-pane@0.8.39) (2020-07-28)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* 🐛 getPrototype is undefined ([95b3409](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/95b3409))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="0.8.38"></a>
|
||||||
|
## [0.8.38](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.37...@ali/lowcode-plugin-outline-pane@0.8.38) (2020-07-23)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.37"></a>
|
||||||
|
## [0.8.37](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.36...@ali/lowcode-plugin-outline-pane@0.8.37) (2020-07-22)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.36"></a>
|
||||||
|
## [0.8.36](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.35...@ali/lowcode-plugin-outline-pane@0.8.36) (2020-07-21)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* 修复导入的组件拖入画布报错 ([caf9915](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/caf9915))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="0.8.35"></a>
|
||||||
|
## [0.8.35](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.34...@ali/lowcode-plugin-outline-pane@0.8.35) (2020-07-21)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.34"></a>
|
||||||
|
## [0.8.34](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.33...@ali/lowcode-plugin-outline-pane@0.8.34) (2020-07-21)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* modal node locate ([9a72dd7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/9a72dd7))
|
||||||
|
* 大纲树节点显示隐藏埋点 ([e91ab1f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/e91ab1f))
|
||||||
|
* 没有 modal node 时不显示模态视图 ([555824c](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/555824c))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* 大纲树展开折叠埋点 ([d9828f2](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/d9828f2))
|
||||||
|
* 大纲树支持模态视图 ([3785e1c](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/3785e1c))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="0.8.33"></a>
|
||||||
|
## [0.8.33](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.32...@ali/lowcode-plugin-outline-pane@0.8.33) (2020-07-14)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.32"></a>
|
||||||
|
## [0.8.32](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.31...@ali/lowcode-plugin-outline-pane@0.8.32) (2020-07-13)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.31"></a>
|
||||||
|
## [0.8.31](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.30...@ali/lowcode-plugin-outline-pane@0.8.31) (2020-07-12)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.30"></a>
|
||||||
|
## [0.8.30](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.29...@ali/lowcode-plugin-outline-pane@0.8.30) (2020-07-12)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.29"></a>
|
||||||
|
## [0.8.29](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.27...@ali/lowcode-plugin-outline-pane@0.8.29) (2020-06-23)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.27"></a>
|
||||||
|
## [0.8.27](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.26...@ali/lowcode-plugin-outline-pane@0.8.27) (2020-06-23)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* 大纲树埋点 ([fa24821](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/fa24821))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="0.8.26"></a>
|
||||||
|
## [0.8.26](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.25...@ali/lowcode-plugin-outline-pane@0.8.26) (2020-06-16)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.25"></a>
|
||||||
|
## [0.8.25](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.24...@ali/lowcode-plugin-outline-pane@0.8.25) (2020-06-15)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.24"></a>
|
||||||
|
## [0.8.24](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.23...@ali/lowcode-plugin-outline-pane@0.8.24) (2020-05-20)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.23"></a>
|
||||||
|
## [0.8.23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.22...@ali/lowcode-plugin-outline-pane@0.8.23) (2020-05-19)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.22"></a>
|
||||||
|
## [0.8.22](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.21...@ali/lowcode-plugin-outline-pane@0.8.22) (2020-05-18)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.21"></a>
|
||||||
|
## [0.8.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.20...@ali/lowcode-plugin-outline-pane@0.8.21) (2020-05-16)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.20"></a>
|
||||||
|
## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.19...@ali/lowcode-plugin-outline-pane@0.8.20) (2020-05-16)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.19"></a>
|
||||||
|
## [0.8.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.18...@ali/lowcode-plugin-outline-pane@0.8.19) (2020-05-16)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.18"></a>
|
||||||
|
## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.17...@ali/lowcode-plugin-outline-pane@0.8.18) (2020-05-15)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.17"></a>
|
||||||
|
## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.16...@ali/lowcode-plugin-outline-pane@0.8.17) (2020-05-15)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.16"></a>
|
||||||
|
## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.15...@ali/lowcode-plugin-outline-pane@0.8.16) (2020-05-15)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.15"></a>
|
||||||
|
## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.14...@ali/lowcode-plugin-outline-pane@0.8.15) (2020-05-13)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* show value state ([bd49e50](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/bd49e50))
|
||||||
|
* support plaintext liveediting ([ea62f12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/ea62f12))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="0.8.14"></a>
|
||||||
|
## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.13...@ali/lowcode-plugin-outline-pane@0.8.14) (2020-05-08)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.13"></a>
|
||||||
|
## [0.8.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.12...@ali/lowcode-plugin-outline-pane@0.8.13) (2020-05-07)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* intl ([8a061ab](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/8a061ab))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="0.8.12"></a>
|
||||||
|
## [0.8.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.11...@ali/lowcode-plugin-outline-pane@0.8.12) (2020-04-27)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.11"></a>
|
||||||
|
## [0.8.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.10...@ali/lowcode-plugin-outline-pane@0.8.11) (2020-04-27)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.10"></a>
|
||||||
|
## [0.8.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.9...@ali/lowcode-plugin-outline-pane@0.8.10) (2020-04-27)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.9"></a>
|
||||||
|
## [0.8.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.8...@ali/lowcode-plugin-outline-pane@0.8.9) (2020-04-16)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.8"></a>
|
||||||
|
## [0.8.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.7...@ali/lowcode-plugin-outline-pane@0.8.8) (2020-04-15)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* plugin-designer ([2dfbcd4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/2dfbcd4))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="0.8.7"></a>
|
||||||
|
## [0.8.7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.6...@ali/lowcode-plugin-outline-pane@0.8.7) (2020-03-31)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.6"></a>
|
||||||
|
## [0.8.6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.5...@ali/lowcode-plugin-outline-pane@0.8.6) (2020-03-30)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.5"></a>
|
||||||
|
## [0.8.5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.4...@ali/lowcode-plugin-outline-pane@0.8.5) (2020-03-30)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.4"></a>
|
||||||
|
## [0.8.4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.3...@ali/lowcode-plugin-outline-pane@0.8.4) (2020-03-30)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
|
||||||
|
|
||||||
|
<a name="0.8.3"></a>
|
||||||
|
## 0.8.3 (2020-03-30)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* double outline & ZH_EN support ([b379bd7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/b379bd7))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a name="0.8.2"></a>
|
||||||
|
## 0.8.2 (2020-03-30)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* double outline & ZH_EN support ([b379bd7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/b379bd7))
|
||||||
1
packages/plugin-outline-pane/README.md
Normal file
1
packages/plugin-outline-pane/README.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
大纲面板
|
||||||
9
packages/plugin-outline-pane/build.json
Normal file
9
packages/plugin-outline-pane/build.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"plugins": [
|
||||||
|
"build-plugin-component",
|
||||||
|
"build-plugin-fusion",
|
||||||
|
["build-plugin-moment-locales", {
|
||||||
|
"locales": ["zh-cn"]
|
||||||
|
}]
|
||||||
|
]
|
||||||
|
}
|
||||||
50
packages/plugin-outline-pane/package.json
Normal file
50
packages/plugin-outline-pane/package.json
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"name": "@ali/lowcode-plugin-outline-pane",
|
||||||
|
"version": "1.0.21",
|
||||||
|
"description": "Outline pane for Ali lowCode engine",
|
||||||
|
"files": [
|
||||||
|
"es",
|
||||||
|
"lib"
|
||||||
|
],
|
||||||
|
"main": "lib/index.js",
|
||||||
|
"module": "es/index.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "build-scripts build --skip-demo",
|
||||||
|
"test": "ava",
|
||||||
|
"test:snapshot": "ava --update-snapshots"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@ali/lowcode-designer": "^1.0.22",
|
||||||
|
"@ali/lowcode-editor-core": "^1.0.22",
|
||||||
|
"@ali/lowcode-types": "^1.0.20",
|
||||||
|
"@ali/lowcode-utils": "^1.0.21",
|
||||||
|
"@alifd/next": "^1.19.16",
|
||||||
|
"classnames": "^2.2.6",
|
||||||
|
"react": "^16",
|
||||||
|
"react-dom": "^16.7.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@alib/build-scripts": "^0.1.18",
|
||||||
|
"@types/classnames": "^2.2.7",
|
||||||
|
"@types/node": "^13.7.1",
|
||||||
|
"@types/react": "^16",
|
||||||
|
"@types/react-dom": "^16",
|
||||||
|
"build-plugin-component": "^0.2.10",
|
||||||
|
"build-plugin-fusion": "^0.1.1",
|
||||||
|
"build-plugin-moment-locales": "^0.1.0"
|
||||||
|
},
|
||||||
|
"ava": {
|
||||||
|
"compileEnhancements": false,
|
||||||
|
"snapshotDir": "test/fixtures/__snapshots__",
|
||||||
|
"extensions": [
|
||||||
|
"ts"
|
||||||
|
],
|
||||||
|
"require": [
|
||||||
|
"ts-node/register"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"publishConfig": {
|
||||||
|
"registry": "https://registry.npm.alibaba-inc.com"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
packages/plugin-outline-pane/src/README.md
Normal file
1
packages/plugin-outline-pane/src/README.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
大纲树
|
||||||
55
packages/plugin-outline-pane/src/helper/dwell-timer.ts
Normal file
55
packages/plugin-outline-pane/src/helper/dwell-timer.ts
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import { ParentalNode, DropLocation, isLocationChildrenDetail, LocateEvent } from '@ali/lowcode-designer';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 停留检查计时器
|
||||||
|
*/
|
||||||
|
export default class DwellTimer {
|
||||||
|
private timer: number | undefined;
|
||||||
|
|
||||||
|
private previous?: ParentalNode;
|
||||||
|
|
||||||
|
private event?: LocateEvent;
|
||||||
|
|
||||||
|
private decide: (node: ParentalNode, event: LocateEvent) => void;
|
||||||
|
|
||||||
|
private timeout = 500;
|
||||||
|
|
||||||
|
constructor(decide: (node: ParentalNode, event: LocateEvent) => void, timeout = 500) {
|
||||||
|
this.decide = decide;
|
||||||
|
this.timeout = timeout;
|
||||||
|
}
|
||||||
|
|
||||||
|
focus(node: ParentalNode, event: LocateEvent) {
|
||||||
|
this.event = event;
|
||||||
|
if (this.previous === node) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.reset();
|
||||||
|
this.previous = node;
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.previous && this.decide(this.previous, this.event!);
|
||||||
|
this.reset();
|
||||||
|
}, this.timeout) as any;
|
||||||
|
}
|
||||||
|
|
||||||
|
tryFocus(loc?: DropLocation | null) {
|
||||||
|
if (!loc || !isLocationChildrenDetail(loc.detail)) {
|
||||||
|
this.reset();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (loc.detail.focus?.type === 'node') {
|
||||||
|
this.focus(loc.detail.focus.node, loc.event);
|
||||||
|
} else {
|
||||||
|
this.reset();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
if (this.timer) {
|
||||||
|
clearTimeout(this.timer);
|
||||||
|
this.timer = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.previous = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
54
packages/plugin-outline-pane/src/helper/indent-track.ts
Normal file
54
packages/plugin-outline-pane/src/helper/indent-track.ts
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import { DropLocation, ParentalNode, isLocationChildrenDetail } from '@ali/lowcode-designer';
|
||||||
|
|
||||||
|
const IndentSensitive = 15;
|
||||||
|
export class IndentTrack {
|
||||||
|
private indentStart: number | null = null;
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.indentStart = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
getIndentParent(lastLoc: DropLocation, loc: DropLocation): [ParentalNode, number] | null {
|
||||||
|
if (
|
||||||
|
lastLoc.target !== loc.target ||
|
||||||
|
!isLocationChildrenDetail(lastLoc.detail) ||
|
||||||
|
!isLocationChildrenDetail(loc.detail) ||
|
||||||
|
lastLoc.source !== loc.source ||
|
||||||
|
lastLoc.detail.index !== loc.detail.index ||
|
||||||
|
loc.detail.index == null
|
||||||
|
) {
|
||||||
|
this.indentStart = null;
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (this.indentStart == null) {
|
||||||
|
this.indentStart = lastLoc.event.globalX;
|
||||||
|
}
|
||||||
|
const delta = loc.event.globalX - this.indentStart;
|
||||||
|
const indent = Math.floor(Math.abs(delta) / IndentSensitive);
|
||||||
|
if (indent < 1) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
this.indentStart = loc.event.globalX;
|
||||||
|
const direction = delta < 0 ? 'left' : 'right';
|
||||||
|
|
||||||
|
let parent = loc.target;
|
||||||
|
const { index } = loc.detail;
|
||||||
|
|
||||||
|
if (direction === 'left') {
|
||||||
|
if (!parent.parent || index < parent.children.size || parent.isSlot()) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return [(parent as any).parent, parent.index + 1];
|
||||||
|
} else {
|
||||||
|
if (index === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
parent = parent.children.get(index - 1) as any;
|
||||||
|
if (parent && parent.isContainer()) {
|
||||||
|
return [parent, parent.children.size];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
11
packages/plugin-outline-pane/src/icons/arrow-right.tsx
Normal file
11
packages/plugin-outline-pane/src/icons/arrow-right.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
|
||||||
|
|
||||||
|
export function IconArrowRight(props: IconProps) {
|
||||||
|
return (
|
||||||
|
<SVGIcon viewBox="0 0 1024 1024" {...props}>
|
||||||
|
<path d="M512.002047 771.904425c-10.152221 0.518816-20.442588-2.800789-28.202319-10.598382L77.902254 315.937602c-14.548344-14.618952-14.548344-38.318724 0-52.933583 14.544251-14.614859 38.118156-14.614859 52.662407 0l381.437385 418.531212L893.432269 263.004019c14.544251-14.614859 38.125319-14.614859 52.662407 0 14.552437 14.614859 14.552437 38.314631 0 52.933583L540.205389 761.307066C532.451798 769.103636 522.158361 772.424264 512.002047 771.904425z" />
|
||||||
|
</SVGIcon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
IconArrowRight.displayName = 'IconArrowRight';
|
||||||
11
packages/plugin-outline-pane/src/icons/cond.tsx
Normal file
11
packages/plugin-outline-pane/src/icons/cond.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
|
||||||
|
|
||||||
|
export function IconCond(props: IconProps) {
|
||||||
|
return (
|
||||||
|
<SVGIcon viewBox="0 0 1024 1024" {...props}>
|
||||||
|
<path d="M479.552 276.544l296.896 2.752v75.712L960 249.024l-183.552-106.048v92.48h-271.36l-46.656-2.752-190.784 203.648 30.976 30.976 180.928-190.784z m296.896 484.928l-253.056-2.816-262.976-263.04H64v43.904h175.296l262.912 262.976 274.176 2.816v75.712L960 774.976l-183.616-105.984 0.064 92.48z" />
|
||||||
|
</SVGIcon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
IconCond.displayName = 'IconCond';
|
||||||
12
packages/plugin-outline-pane/src/icons/eye-close.tsx
Normal file
12
packages/plugin-outline-pane/src/icons/eye-close.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
|
||||||
|
|
||||||
|
export function IconEyeClose(props: IconProps) {
|
||||||
|
return (
|
||||||
|
<SVGIcon viewBox="0 0 1024 1024" {...props}>
|
||||||
|
<path d="M512.7 700.9c-102.1 0-184.9-82.8-184.9-184.9 0-28.6 6.5-55.6 18-79.7l-93.7-93.7C138.9 418.1 65.2 514 65.2 514s200.4 260.7 447.6 260.7c50.2 0 98.6-10.8 143.6-27.9l-63.9-63.9c-24.2 11.5-51.2 18-79.8 18z" />
|
||||||
|
<path d="M960.3 514S759.9 253.3 512.7 253.3c-49.5 0-97.2 10.5-141.7 27.2L243.5 153.1l-45.3 45.3 262.3 262.2c-13.1 13.3-21.2 31.5-21.2 51.6 0 40.6 32.9 73.4 73.4 73.4 20.1 0 38.4-8.1 51.6-21.2l260.9 260.8 45.3-45.3-95.6-95.6C887.2 609.1 960.3 514 960.3 514z m-376.7-20.9c-6.8-25.2-26.6-45.1-51.9-51.9L437.5 347c23-10.3 48.5-16 75.3-16 102.1 0 184.9 82.8 184.9 184.9 0 26.8-5.7 52.2-15.9 75.2l-98.2-98z" />
|
||||||
|
</SVGIcon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
IconEyeClose.displayName = 'IconEyeClose';
|
||||||
12
packages/plugin-outline-pane/src/icons/eye.tsx
Normal file
12
packages/plugin-outline-pane/src/icons/eye.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
|
||||||
|
|
||||||
|
export function IconEye(props: IconProps) {
|
||||||
|
return (
|
||||||
|
<SVGIcon viewBox="0 0 1024 1024" {...props}>
|
||||||
|
<path d="M512 256c-163.8 0-291.4 97.6-448 256 134.8 135.4 248 256 448 256 199.8 0 346.8-152.8 448-253.2C856.4 397.2 709.6 256 512 256z m0 438.6c-98.8 0-179.2-82-179.2-182.6 0-100.8 80.4-182.6 179.2-182.6s179.2 82 179.2 182.6c0 100.8-80.4 182.6-179.2 182.6z" />
|
||||||
|
<path d="M512 448c0-15.8 5.8-30.2 15.2-41.4-5-0.8-10-1.2-15.2-1.2-57.6 0-104.6 47.8-104.6 106.6s47 106.6 104.6 106.6 104.6-47.8 104.6-106.6c0-4.6-0.4-9.2-0.8-13.8-11 8.6-24.6 13.8-39.6 13.8-35.6 0-64.2-28.6-64.2-64z" />
|
||||||
|
</SVGIcon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
IconEye.displayName = 'IconEye';
|
||||||
11
packages/plugin-outline-pane/src/icons/lock.tsx
Normal file
11
packages/plugin-outline-pane/src/icons/lock.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
|
||||||
|
|
||||||
|
export function IconLock(props: IconProps) {
|
||||||
|
return (
|
||||||
|
<SVGIcon viewBox="0 0 1024 1024" {...props}>
|
||||||
|
<path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM540 701v53c0 4.4-3.6 8-8 8h-40c-4.4 0-8-3.6-8-8v-53c-12.1-8.7-20-22.9-20-39 0-26.5 21.5-48 48-48s48 21.5 48 48c0 16.1-7.9 30.3-20 39z m152-237H332V240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224z" />
|
||||||
|
</SVGIcon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
IconLock.displayName = 'IconLock';
|
||||||
11
packages/plugin-outline-pane/src/icons/loop.tsx
Normal file
11
packages/plugin-outline-pane/src/icons/loop.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
|
||||||
|
|
||||||
|
export function IconLoop(props: IconProps) {
|
||||||
|
return (
|
||||||
|
<SVGIcon viewBox="0 0 1024 1024" {...props}>
|
||||||
|
<path d="M60.235294 542.117647c0 132.879059 103.062588 240.941176 229.677176 240.941176l0 60.235294c-159.864471 0-289.912471-135.107765-289.912471-301.176471s130.048-301.176471 289.912471-301.176471l254.735059 0-99.147294-99.147294 42.586353-42.586353 171.911529 171.851294-171.851294 171.911529-42.646588-42.646588 99.207529-99.147294-254.795294 0c-126.614588 0-229.677176 108.062118-229.677176 240.941176zM734.087529 240.941176l0 60.235294c126.614588 0 229.677176 108.062118 229.677176 240.941176s-103.062588 240.941176-229.677176 240.941176l-254.795294 0 99.147294-99.147294-42.586353-42.586353-171.851294 171.851294 171.911529 171.911529 42.586353-42.586353-99.207529-99.207529 254.735059 0c159.924706 0 289.972706-135.107765 289.972706-301.176471s-130.048-301.176471-289.912471-301.176471z" />
|
||||||
|
</SVGIcon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
IconLoop.displayName = 'IconLoop';
|
||||||
12
packages/plugin-outline-pane/src/icons/outline.tsx
Normal file
12
packages/plugin-outline-pane/src/icons/outline.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
|
||||||
|
|
||||||
|
export function IconOutline(props: IconProps) {
|
||||||
|
return (
|
||||||
|
<SVGIcon viewBox="0 0 1024 1024" {...props}>
|
||||||
|
<path d="M128 96h512a64 64 0 0 1 64 64v64a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V160a64 64 0 0 1 64-64z m32 64a32 32 0 1 0 0 64h448a32 32 0 0 0 0-64H160z m224 576h512a64 64 0 0 1 64 64v64a64 64 0 0 1-64 64H384a64 64 0 0 1-64-64v-64a64 64 0 0 1 64-64z m32 64a32 32 0 0 0 0 64h448a32 32 0 0 0 0-64H416z m-32-384h512a64 64 0 0 1 64 64v64a64 64 0 0 1-64 64H384a64 64 0 0 1-64-64v-64a64 64 0 0 1 64-64z m32 64a32 32 0 0 0 0 64h448a32 32 0 0 0 0-64H416z" />
|
||||||
|
</SVGIcon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
IconOutline.displayName = 'IconOutline';
|
||||||
|
|
||||||
12
packages/plugin-outline-pane/src/icons/radio-active.tsx
Normal file
12
packages/plugin-outline-pane/src/icons/radio-active.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
|
||||||
|
|
||||||
|
export function IconRadioActive(props: IconProps) {
|
||||||
|
return (
|
||||||
|
<SVGIcon viewBox="0 0 1024 1024" {...props}>
|
||||||
|
<path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m0-256a256 256 0 1 0 0-512 256 256 0 0 0 0 512z" />
|
||||||
|
</SVGIcon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
IconRadioActive.displayName = 'IconRadioActive';
|
||||||
|
|
||||||
12
packages/plugin-outline-pane/src/icons/radio.tsx
Normal file
12
packages/plugin-outline-pane/src/icons/radio.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
|
||||||
|
|
||||||
|
export function IconRadio(props: IconProps) {
|
||||||
|
return (
|
||||||
|
<SVGIcon viewBox="0 0 1024 1024" {...props}>
|
||||||
|
<path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m0-64A448 448 0 1 0 512 64a448 448 0 0 0 0 896z" />
|
||||||
|
</SVGIcon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
IconRadio.displayName = 'IconRadio';
|
||||||
|
|
||||||
12
packages/plugin-outline-pane/src/icons/unlock.tsx
Normal file
12
packages/plugin-outline-pane/src/icons/unlock.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
|
||||||
|
|
||||||
|
export function IconUnlock(props: IconProps) {
|
||||||
|
return (
|
||||||
|
<SVGIcon viewBox="0 0 1024 1024" {...props}>
|
||||||
|
<path d="M832 464H332V240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v68c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-68c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32z m-40 376H232V536h560v304z" />
|
||||||
|
<path d="M484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53c12.1-8.7 20-22.9 20-39 0-26.5-21.5-48-48-48s-48 21.5-48 48c0 16.1 7.9 30.3 20 39z" />
|
||||||
|
</SVGIcon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
IconUnlock.displayName = 'IconUnlock';
|
||||||
16
packages/plugin-outline-pane/src/index.ts
Normal file
16
packages/plugin-outline-pane/src/index.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { OutlinePane } from './views/pane';
|
||||||
|
import { OutlineBackupPane } from './views/backup-pane';
|
||||||
|
import { IconOutline } from './icons/outline';
|
||||||
|
import { intlNode } from './locale';
|
||||||
|
import { getTreeMaster } from './tree-master';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'outline-pane',
|
||||||
|
props: {
|
||||||
|
icon: IconOutline,
|
||||||
|
description: intlNode('Outline Tree'),
|
||||||
|
},
|
||||||
|
content: OutlinePane,
|
||||||
|
};
|
||||||
|
|
||||||
|
export { OutlinePane, OutlineBackupPane, getTreeMaster };
|
||||||
14
packages/plugin-outline-pane/src/locale/en-US.json
Normal file
14
packages/plugin-outline-pane/src/locale/en-US.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"Initializing": "Initializing",
|
||||||
|
"Hide": "Hide",
|
||||||
|
"Show": "Show",
|
||||||
|
"Lock": "Lock",
|
||||||
|
"Unlock": "Unlock",
|
||||||
|
"Expand": "Expand",
|
||||||
|
"Collapse": "Collapse",
|
||||||
|
"Conditional": "Condition",
|
||||||
|
"Loop": "Loop",
|
||||||
|
"Slots": "Slots",
|
||||||
|
"Slot for {prop}": "Slot for {prop}",
|
||||||
|
"Outline Tree": "Outline Tree"
|
||||||
|
}
|
||||||
10
packages/plugin-outline-pane/src/locale/index.ts
Normal file
10
packages/plugin-outline-pane/src/locale/index.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { createIntl } from '@ali/lowcode-editor-core';
|
||||||
|
import en_US from './en-US.json';
|
||||||
|
import zh_CN from './zh-CN.json';
|
||||||
|
|
||||||
|
const { intl, intlNode, getLocale, setLocale } = createIntl({
|
||||||
|
'en-US': en_US,
|
||||||
|
'zh-CN': zh_CN,
|
||||||
|
});
|
||||||
|
|
||||||
|
export { intl, intlNode, getLocale, setLocale };
|
||||||
14
packages/plugin-outline-pane/src/locale/zh-CN.json
Normal file
14
packages/plugin-outline-pane/src/locale/zh-CN.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"Initializing": "正在初始化",
|
||||||
|
"Hide": "隐藏",
|
||||||
|
"Show": "显示",
|
||||||
|
"Lock": "锁定",
|
||||||
|
"Unlock": "解锁",
|
||||||
|
"Expand": "展开",
|
||||||
|
"Collapse": "收起",
|
||||||
|
"Conditional": "条件式",
|
||||||
|
"Loop": "循环",
|
||||||
|
"Slots": "插槽",
|
||||||
|
"Slot for {prop}": "属性 {prop} 的插槽",
|
||||||
|
"Outline Tree": "大纲树"
|
||||||
|
}
|
||||||
667
packages/plugin-outline-pane/src/main.ts
Normal file
667
packages/plugin-outline-pane/src/main.ts
Normal file
@ -0,0 +1,667 @@
|
|||||||
|
import { computed, obx } from '@ali/lowcode-editor-core';
|
||||||
|
import {
|
||||||
|
Designer,
|
||||||
|
ISensor,
|
||||||
|
LocateEvent,
|
||||||
|
isDragNodeObject,
|
||||||
|
isDragAnyObject,
|
||||||
|
DragObject,
|
||||||
|
Scroller,
|
||||||
|
ScrollTarget,
|
||||||
|
IScrollable,
|
||||||
|
DropLocation,
|
||||||
|
isLocationChildrenDetail,
|
||||||
|
LocationChildrenDetail,
|
||||||
|
LocationDetailType,
|
||||||
|
ParentalNode,
|
||||||
|
contains,
|
||||||
|
Node,
|
||||||
|
} from '@ali/lowcode-designer';
|
||||||
|
import TreeNode from './tree-node';
|
||||||
|
import { IndentTrack } from './helper/indent-track';
|
||||||
|
import DwellTimer from './helper/dwell-timer';
|
||||||
|
import { uniqueId } from '@ali/lowcode-utils';
|
||||||
|
import { Backup } from './views/backup-pane';
|
||||||
|
import { IEditor } from '@ali/lowcode-types';
|
||||||
|
import { ITreeBoard, TreeMaster, getTreeMaster } from './tree-master';
|
||||||
|
|
||||||
|
export class OutlineMain implements ISensor, ITreeBoard, IScrollable {
|
||||||
|
private _designer?: Designer;
|
||||||
|
|
||||||
|
@obx.ref private _master?: TreeMaster;
|
||||||
|
|
||||||
|
get master() {
|
||||||
|
return this._master;
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get currentTree() {
|
||||||
|
return this._master?.currentTree;
|
||||||
|
}
|
||||||
|
|
||||||
|
readonly id = uniqueId('outline');
|
||||||
|
|
||||||
|
@obx.ref _visible = false;
|
||||||
|
|
||||||
|
get visible() {
|
||||||
|
return this._visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
readonly editor: IEditor;
|
||||||
|
|
||||||
|
readonly at: string | symbol;
|
||||||
|
|
||||||
|
constructor(editor: IEditor, at: string | symbol) {
|
||||||
|
this.editor = editor;
|
||||||
|
this.at = at;
|
||||||
|
let inited = false;
|
||||||
|
const setup = async () => {
|
||||||
|
if (inited) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
inited = true;
|
||||||
|
const designer = await editor.onceGot(Designer);
|
||||||
|
this.setupDesigner(designer);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (at === Backup) {
|
||||||
|
setup();
|
||||||
|
} else {
|
||||||
|
editor.on('skeleton.panel.show', (key: string) => {
|
||||||
|
if (key === at) {
|
||||||
|
setup();
|
||||||
|
this._visible = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
editor.on('skeleton.panel.hide', (key: string) => {
|
||||||
|
if (key === at) {
|
||||||
|
this._visible = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @see ISensor
|
||||||
|
*/
|
||||||
|
fixEvent(e: LocateEvent): LocateEvent {
|
||||||
|
if (e.fixed) {
|
||||||
|
return e;
|
||||||
|
}
|
||||||
|
|
||||||
|
const notMyEvent = e.originalEvent.view?.document !== document;
|
||||||
|
|
||||||
|
if (!e.target || notMyEvent) {
|
||||||
|
e.target = document.elementFromPoint(e.canvasX!, e.canvasY!);
|
||||||
|
}
|
||||||
|
|
||||||
|
// documentModel : 目标文档
|
||||||
|
e.documentModel = this._designer?.currentDocument;
|
||||||
|
|
||||||
|
// 事件已订正
|
||||||
|
e.fixed = true;
|
||||||
|
return e;
|
||||||
|
}
|
||||||
|
|
||||||
|
private indentTrack = new IndentTrack();
|
||||||
|
|
||||||
|
private dwell = new DwellTimer((target, event) => {
|
||||||
|
const { document } = target;
|
||||||
|
const { designer } = document;
|
||||||
|
let index: any;
|
||||||
|
let focus: any;
|
||||||
|
let valid = true;
|
||||||
|
if (target.hasSlots()) {
|
||||||
|
index = null;
|
||||||
|
focus = { type: 'slots' };
|
||||||
|
} else {
|
||||||
|
index = 0;
|
||||||
|
valid = document.checkNesting(target, event.dragObject as any);
|
||||||
|
}
|
||||||
|
designer.createLocation({
|
||||||
|
target,
|
||||||
|
source: this.id,
|
||||||
|
event,
|
||||||
|
detail: {
|
||||||
|
type: LocationDetailType.Children,
|
||||||
|
index,
|
||||||
|
focus,
|
||||||
|
valid,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @see ISensor
|
||||||
|
*/
|
||||||
|
locate(e: LocateEvent): DropLocation | undefined | null {
|
||||||
|
this.sensing = true;
|
||||||
|
this.scroller?.scrolling(e);
|
||||||
|
const { globalY, dragObject } = e;
|
||||||
|
const { nodes } = dragObject;
|
||||||
|
|
||||||
|
const tree = this._master?.currentTree;
|
||||||
|
if (!tree || !this._shell) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const operationalNodes = nodes?.filter((node: any) => {
|
||||||
|
const onMoveHook = node.componentMeta?.getMetadata()?.experimental?.callbacks?.onMoveHook;
|
||||||
|
const canMove = onMoveHook && typeof onMoveHook === 'function' ? onMoveHook() : true;
|
||||||
|
|
||||||
|
return canMove;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!operationalNodes || operationalNodes.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { document } = tree;
|
||||||
|
const { designer } = document;
|
||||||
|
const pos = getPosFromEvent(e, this._shell);
|
||||||
|
const irect = this.getInsertionRect();
|
||||||
|
const originLoc = document.dropLocation;
|
||||||
|
|
||||||
|
const componentMeta = e.dragObject.nodes ? e.dragObject.nodes[0].componentMeta : null;
|
||||||
|
if (e.dragObject.type === 'node' && componentMeta && componentMeta.isModal) {
|
||||||
|
return designer.createLocation({
|
||||||
|
target: document.rootNode,
|
||||||
|
detail: {
|
||||||
|
type: LocationDetailType.Children,
|
||||||
|
index: 0,
|
||||||
|
valid: true,
|
||||||
|
},
|
||||||
|
source: this.id,
|
||||||
|
event: e,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (originLoc && ((pos && pos === 'unchanged') || (irect && globalY >= irect.top && globalY <= irect.bottom))) {
|
||||||
|
const loc = originLoc.clone(e);
|
||||||
|
const indented = this.indentTrack.getIndentParent(originLoc, loc);
|
||||||
|
if (indented) {
|
||||||
|
const [parent, index] = indented;
|
||||||
|
if (checkRecursion(parent, dragObject)) {
|
||||||
|
if (tree.getTreeNode(parent).expanded) {
|
||||||
|
this.dwell.reset();
|
||||||
|
return designer.createLocation({
|
||||||
|
target: parent,
|
||||||
|
source: this.id,
|
||||||
|
event: e,
|
||||||
|
detail: {
|
||||||
|
type: LocationDetailType.Children,
|
||||||
|
index,
|
||||||
|
valid: document.checkNesting(parent, e.dragObject as any),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
(originLoc.detail as LocationChildrenDetail).focus = {
|
||||||
|
type: 'node',
|
||||||
|
node: parent,
|
||||||
|
};
|
||||||
|
// focus try expand go on
|
||||||
|
this.dwell.focus(parent, e);
|
||||||
|
} else {
|
||||||
|
this.dwell.reset();
|
||||||
|
}
|
||||||
|
// FIXME: recreate new location
|
||||||
|
} else if ((originLoc.detail as LocationChildrenDetail).near) {
|
||||||
|
(originLoc.detail as LocationChildrenDetail).near = undefined;
|
||||||
|
this.dwell.reset();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.indentTrack.reset();
|
||||||
|
|
||||||
|
if (pos && pos !== 'unchanged') {
|
||||||
|
let treeNode = tree.getTreeNodeById(pos.nodeId);
|
||||||
|
if (treeNode) {
|
||||||
|
let { focusSlots } = pos;
|
||||||
|
let { node } = treeNode;
|
||||||
|
if (isDragNodeObject(dragObject)) {
|
||||||
|
const newNodes = operationalNodes;
|
||||||
|
let i = newNodes.length;
|
||||||
|
let p: any = node;
|
||||||
|
while (i-- > 0) {
|
||||||
|
if (contains(newNodes[i], p)) {
|
||||||
|
p = newNodes[i].parent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (p !== node) {
|
||||||
|
node = p || document.rootNode;
|
||||||
|
treeNode = tree.getTreeNode(node);
|
||||||
|
focusSlots = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (focusSlots) {
|
||||||
|
this.dwell.reset();
|
||||||
|
return designer.createLocation({
|
||||||
|
target: node as ParentalNode,
|
||||||
|
source: this.id,
|
||||||
|
event: e,
|
||||||
|
detail: {
|
||||||
|
type: LocationDetailType.Children,
|
||||||
|
index: null,
|
||||||
|
valid: false,
|
||||||
|
focus: { type: 'slots' },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!treeNode.isRoot()) {
|
||||||
|
const loc = this.getNear(treeNode, e);
|
||||||
|
this.dwell.tryFocus(loc);
|
||||||
|
return loc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const loc = this.drillLocate(tree.root, e);
|
||||||
|
this.dwell.tryFocus(loc);
|
||||||
|
return loc;
|
||||||
|
}
|
||||||
|
|
||||||
|
private getNear(treeNode: TreeNode, e: LocateEvent, index?: number, rect?: DOMRect) {
|
||||||
|
const { document } = treeNode.tree;
|
||||||
|
const { designer } = document;
|
||||||
|
const { globalY, dragObject } = e;
|
||||||
|
// TODO: check dragObject is anyData
|
||||||
|
const { node, expanded } = treeNode;
|
||||||
|
if (!rect) {
|
||||||
|
rect = this.getTreeNodeRect(treeNode);
|
||||||
|
if (!rect) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (index == null) {
|
||||||
|
index = node.index;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (node.isSlot()) {
|
||||||
|
// 是个插槽根节点
|
||||||
|
if (!treeNode.isContainer() && !treeNode.hasSlots()) {
|
||||||
|
return designer.createLocation({
|
||||||
|
target: node.parent!,
|
||||||
|
source: this.id,
|
||||||
|
event: e,
|
||||||
|
detail: {
|
||||||
|
type: LocationDetailType.Children,
|
||||||
|
index: null,
|
||||||
|
near: { node, pos: 'replace' },
|
||||||
|
valid: true, // TODO: future validation the slot limit
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const loc1 = this.drillLocate(treeNode, e);
|
||||||
|
if (loc1) {
|
||||||
|
return loc1;
|
||||||
|
}
|
||||||
|
|
||||||
|
return designer.createLocation({
|
||||||
|
target: node.parent!,
|
||||||
|
source: this.id,
|
||||||
|
event: e,
|
||||||
|
detail: {
|
||||||
|
type: LocationDetailType.Children,
|
||||||
|
index: null,
|
||||||
|
valid: false,
|
||||||
|
focus: { type: 'slots' },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let focusNode: Node | undefined;
|
||||||
|
// focus
|
||||||
|
if (!expanded && (treeNode.isContainer() || treeNode.hasSlots())) {
|
||||||
|
focusNode = node;
|
||||||
|
}
|
||||||
|
|
||||||
|
// before
|
||||||
|
const titleRect = this.getTreeTitleRect(treeNode) || rect;
|
||||||
|
if (globalY < titleRect.top + titleRect.height / 2) {
|
||||||
|
return designer.createLocation({
|
||||||
|
target: node.parent!,
|
||||||
|
source: this.id,
|
||||||
|
event: e,
|
||||||
|
detail: {
|
||||||
|
type: LocationDetailType.Children,
|
||||||
|
index,
|
||||||
|
valid: document.checkNesting(node.parent!, dragObject as any),
|
||||||
|
near: { node, pos: 'before' },
|
||||||
|
focus: checkRecursion(focusNode, dragObject) ? { type: 'node', node: focusNode } : undefined,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (globalY > titleRect.bottom) {
|
||||||
|
focusNode = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (expanded) {
|
||||||
|
// drill
|
||||||
|
const loc = this.drillLocate(treeNode, e);
|
||||||
|
if (loc) {
|
||||||
|
return loc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// after
|
||||||
|
return designer.createLocation({
|
||||||
|
target: node.parent!,
|
||||||
|
source: this.id,
|
||||||
|
event: e,
|
||||||
|
detail: {
|
||||||
|
type: LocationDetailType.Children,
|
||||||
|
index: index + 1,
|
||||||
|
valid: document.checkNesting(node.parent!, dragObject as any),
|
||||||
|
near: { node, pos: 'after' },
|
||||||
|
focus: checkRecursion(focusNode, dragObject) ? { type: 'node', node: focusNode } : undefined,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private drillLocate(treeNode: TreeNode, e: LocateEvent): DropLocation | null {
|
||||||
|
const { document } = treeNode.tree;
|
||||||
|
const { designer } = document;
|
||||||
|
const { dragObject, globalY } = e;
|
||||||
|
|
||||||
|
if (!checkRecursion(treeNode.node, dragObject)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isDragAnyObject(dragObject)) {
|
||||||
|
// TODO: future
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const container = treeNode.node as ParentalNode;
|
||||||
|
const detail: LocationChildrenDetail = {
|
||||||
|
type: LocationDetailType.Children,
|
||||||
|
};
|
||||||
|
const locationData: any = {
|
||||||
|
target: container,
|
||||||
|
detail,
|
||||||
|
source: this.id,
|
||||||
|
event: e,
|
||||||
|
};
|
||||||
|
const isSlotContainer = treeNode.hasSlots();
|
||||||
|
const isContainer = treeNode.isContainer();
|
||||||
|
|
||||||
|
if (container.isSlot() && !treeNode.expanded) {
|
||||||
|
// 未展开，直接定位到内部第一个节点
|
||||||
|
if (isSlotContainer) {
|
||||||
|
detail.index = null;
|
||||||
|
detail.focus = { type: 'slots' };
|
||||||
|
detail.valid = false;
|
||||||
|
} else {
|
||||||
|
detail.index = 0;
|
||||||
|
detail.valid = document.checkNesting(container, dragObject);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let items: TreeNode[] | null = null;
|
||||||
|
let slotsRect: DOMRect | undefined;
|
||||||
|
let focusSlots = false;
|
||||||
|
// isSlotContainer
|
||||||
|
if (isSlotContainer) {
|
||||||
|
slotsRect = this.getTreeSlotsRect(treeNode);
|
||||||
|
if (slotsRect) {
|
||||||
|
if (globalY <= slotsRect.bottom) {
|
||||||
|
focusSlots = true;
|
||||||
|
items = treeNode.slots;
|
||||||
|
} else if (!isContainer) {
|
||||||
|
// 不在 slots 范围，又不是 container 的情况，高亮 slots 区
|
||||||
|
detail.index = null;
|
||||||
|
detail.focus = { type: 'slots' };
|
||||||
|
detail.valid = false;
|
||||||
|
return designer.createLocation(locationData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!items && isContainer) {
|
||||||
|
items = treeNode.children;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!items) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const l = items.length;
|
||||||
|
let index = 0;
|
||||||
|
let before = l < 1;
|
||||||
|
let current: TreeNode | undefined;
|
||||||
|
let currentIndex = index;
|
||||||
|
for (; index < l; index++) {
|
||||||
|
current = items[index];
|
||||||
|
currentIndex = index;
|
||||||
|
const rect = this.getTreeNodeRect(current);
|
||||||
|
if (!rect) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// rect
|
||||||
|
if (globalY < rect.top) {
|
||||||
|
before = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (globalY > rect.bottom) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const loc = this.getNear(current, e, index, rect);
|
||||||
|
if (loc) {
|
||||||
|
return loc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (focusSlots) {
|
||||||
|
detail.focus = { type: 'slots' };
|
||||||
|
detail.valid = false;
|
||||||
|
detail.index = null;
|
||||||
|
} else {
|
||||||
|
if (current) {
|
||||||
|
detail.index = before ? currentIndex : currentIndex + 1;
|
||||||
|
detail.near = { node: current.node, pos: before ? 'before' : 'after' };
|
||||||
|
} else {
|
||||||
|
detail.index = l;
|
||||||
|
}
|
||||||
|
detail.valid = document.checkNesting(container, dragObject);
|
||||||
|
}
|
||||||
|
|
||||||
|
return designer.createLocation(locationData);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @see ISensor
|
||||||
|
*/
|
||||||
|
isEnter(e: LocateEvent): boolean {
|
||||||
|
if (!this._shell) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const rect = this._shell.getBoundingClientRect();
|
||||||
|
return e.globalY >= rect.top && e.globalY <= rect.bottom && e.globalX >= rect.left && e.globalX <= rect.right;
|
||||||
|
}
|
||||||
|
|
||||||
|
private tryScrollAgain: number | null = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @see IScrollBoard
|
||||||
|
*/
|
||||||
|
scrollToNode(treeNode: TreeNode, detail?: any, tryTimes = 0) {
|
||||||
|
if (tryTimes < 1 && this.tryScrollAgain) {
|
||||||
|
(window as any).cancelIdleCallback(this.tryScrollAgain);
|
||||||
|
this.tryScrollAgain = null;
|
||||||
|
}
|
||||||
|
if (this.sensing || !this.bounds || !this.scroller || !this.scrollTarget) {
|
||||||
|
// is a active sensor
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let rect: ClientRect | undefined;
|
||||||
|
if (detail && isLocationChildrenDetail(detail)) {
|
||||||
|
rect = this.getInsertionRect();
|
||||||
|
} else {
|
||||||
|
rect = this.getTreeNodeRect(treeNode);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!rect) {
|
||||||
|
if (tryTimes < 3) {
|
||||||
|
this.tryScrollAgain = (window as any).requestIdleCallback(() => this.scrollToNode(treeNode, detail, tryTimes + 1));
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { scrollHeight, top: scrollTop } = this.scrollTarget;
|
||||||
|
const { height, top, bottom } = this.bounds;
|
||||||
|
if (rect.top < top || rect.bottom > bottom) {
|
||||||
|
const opt: any = {};
|
||||||
|
opt.top = Math.min(rect.top + rect.height / 2 + scrollTop - top - height / 2, scrollHeight - height);
|
||||||
|
if (rect.height >= height) {
|
||||||
|
opt.top = Math.min(scrollTop + rect.top - top, opt.top);
|
||||||
|
}
|
||||||
|
this.scroller.scrollTo(opt);
|
||||||
|
}
|
||||||
|
// make tail scroll be sure
|
||||||
|
if (tryTimes < 4) {
|
||||||
|
this.tryScrollAgain = (window as any).requestIdleCallback(() => this.scrollToNode(treeNode, detail, 4));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private sensing = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @see ISensor
|
||||||
|
*/
|
||||||
|
deactiveSensor() {
|
||||||
|
this.sensing = false;
|
||||||
|
this.scroller?.cancel();
|
||||||
|
this.dwell.reset();
|
||||||
|
this.indentTrack.reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @see IScrollable
|
||||||
|
*/
|
||||||
|
get bounds(): DOMRect | null {
|
||||||
|
if (!this._shell) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return this._shell.getBoundingClientRect();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _scrollTarget?: ScrollTarget;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @see IScrollable
|
||||||
|
*/
|
||||||
|
get scrollTarget() {
|
||||||
|
return this._scrollTarget;
|
||||||
|
}
|
||||||
|
|
||||||
|
private scroller?: Scroller;
|
||||||
|
|
||||||
|
private setupDesigner(designer: Designer) {
|
||||||
|
this._designer = designer;
|
||||||
|
this._master = getTreeMaster(designer);
|
||||||
|
this._master.addBoard(this);
|
||||||
|
designer.dragon.addSensor(this);
|
||||||
|
this.scroller = designer.createScroller(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
purge() {
|
||||||
|
this._designer?.dragon.removeSensor(this);
|
||||||
|
this._master?.removeBoard(this);
|
||||||
|
// todo purge treeMaster if needed
|
||||||
|
}
|
||||||
|
|
||||||
|
private _sensorAvailable = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @see ISensor
|
||||||
|
*/
|
||||||
|
get sensorAvailable() {
|
||||||
|
return this._sensorAvailable;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _shell: HTMLDivElement | null = null;
|
||||||
|
|
||||||
|
mount(shell: HTMLDivElement | null) {
|
||||||
|
if (this._shell === shell) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this._shell = shell;
|
||||||
|
if (shell) {
|
||||||
|
this._scrollTarget = new ScrollTarget(shell);
|
||||||
|
this._sensorAvailable = true;
|
||||||
|
} else {
|
||||||
|
this._scrollTarget = undefined;
|
||||||
|
this._sensorAvailable = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private getInsertionRect(): DOMRect | undefined {
|
||||||
|
if (!this._shell) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
return this._shell.querySelector('.insertion')?.getBoundingClientRect();
|
||||||
|
}
|
||||||
|
|
||||||
|
private getTreeNodeRect(treeNode: TreeNode): DOMRect | undefined {
|
||||||
|
if (!this._shell) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
return this._shell.querySelector(`.tree-node[data-id="${treeNode.id}"]`)?.getBoundingClientRect();
|
||||||
|
}
|
||||||
|
|
||||||
|
private getTreeTitleRect(treeNode: TreeNode): DOMRect | undefined {
|
||||||
|
if (!this._shell) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
return this._shell.querySelector(`.tree-node-title[data-id="${treeNode.id}"]`)?.getBoundingClientRect();
|
||||||
|
}
|
||||||
|
|
||||||
|
private getTreeSlotsRect(treeNode: TreeNode): DOMRect | undefined {
|
||||||
|
if (!this._shell) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
return this._shell.querySelector(`.tree-node-slots[data-id="${treeNode.id}"]`)?.getBoundingClientRect();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkRecursion(parent: Node | undefined | null, dragObject: DragObject): parent is ParentalNode {
|
||||||
|
if (!parent) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (isDragNodeObject(dragObject)) {
|
||||||
|
const { nodes } = dragObject;
|
||||||
|
if (nodes.some((node) => node.contains(parent))) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPosFromEvent(
|
||||||
|
{ target }: LocateEvent,
|
||||||
|
stop: Element,
|
||||||
|
): null | 'unchanged' | { nodeId: string; focusSlots: boolean } {
|
||||||
|
if (!target || !stop.contains(target)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (target.matches('.insertion')) {
|
||||||
|
return 'unchanged';
|
||||||
|
}
|
||||||
|
target = target.closest('[data-id]');
|
||||||
|
if (!target || !stop.contains(target)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nodeId = (target as HTMLDivElement).dataset.id!;
|
||||||
|
return {
|
||||||
|
focusSlots: target.matches('.tree-node-slots'),
|
||||||
|
nodeId,
|
||||||
|
};
|
||||||
|
}
|
||||||
122
packages/plugin-outline-pane/src/tree-master.ts
Normal file
122
packages/plugin-outline-pane/src/tree-master.ts
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
import { computed, obx } from '@ali/lowcode-editor-core';
|
||||||
|
import { Designer, isLocationChildrenDetail } from '@ali/lowcode-designer';
|
||||||
|
import TreeNode from './tree-node';
|
||||||
|
import { Tree } from './tree';
|
||||||
|
import { Backup } from './views/backup-pane';
|
||||||
|
|
||||||
|
export interface ITreeBoard {
|
||||||
|
readonly visible: boolean;
|
||||||
|
readonly at: string | symbol;
|
||||||
|
scrollToNode(treeNode: TreeNode, detail?: any): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class TreeMaster {
|
||||||
|
readonly designer: Designer;
|
||||||
|
|
||||||
|
constructor(designer: Designer) {
|
||||||
|
this.designer = designer;
|
||||||
|
let startTime: any;
|
||||||
|
designer.dragon.onDragstart(() => {
|
||||||
|
startTime = Date.now() / 1000;
|
||||||
|
// needs?
|
||||||
|
this.toVision();
|
||||||
|
});
|
||||||
|
designer.activeTracker.onChange(({ node, detail }) => {
|
||||||
|
const tree = this.currentTree;
|
||||||
|
if (!tree || node.document !== tree.document) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const treeNode = tree.getTreeNode(node);
|
||||||
|
if (detail && isLocationChildrenDetail(detail)) {
|
||||||
|
treeNode.expand(true);
|
||||||
|
} else {
|
||||||
|
treeNode.expandParents();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.boards.forEach((board) => {
|
||||||
|
board.scrollToNode(treeNode, detail);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
designer.dragon.onDragend(() => {
|
||||||
|
const endTime: any = Date.now() / 1000;
|
||||||
|
const editor = designer?.editor;
|
||||||
|
const nodes = designer.currentSelection?.getNodes();
|
||||||
|
editor?.emit('outlinePane.drag', {
|
||||||
|
selected: nodes
|
||||||
|
?.map((n) => {
|
||||||
|
if (!n) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const npm = n?.componentMeta?.npm;
|
||||||
|
return (
|
||||||
|
[npm?.package, npm?.componentName].filter((item) => !!item).join('-') || n?.componentMeta?.componentName
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.join('&'),
|
||||||
|
time: (endTime - startTime).toFixed(2),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
designer.editor.on('designer.document.remove', ({ id }) => {
|
||||||
|
this.treeMap.delete(id);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private toVision() {
|
||||||
|
const tree = this.currentTree;
|
||||||
|
if (tree) {
|
||||||
|
tree.document.selection.getTopNodes().forEach((node) => {
|
||||||
|
tree.getTreeNode(node).setExpanded(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@obx.val private boards = new Set<ITreeBoard>();
|
||||||
|
|
||||||
|
addBoard(board: ITreeBoard) {
|
||||||
|
this.boards.add(board);
|
||||||
|
}
|
||||||
|
|
||||||
|
removeBoard(board: ITreeBoard) {
|
||||||
|
this.boards.delete(board);
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed hasVisibleTreeBoard() {
|
||||||
|
for (const item of this.boards) {
|
||||||
|
if (item.visible && item.at !== Backup) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
purge() {
|
||||||
|
// todo others purge
|
||||||
|
}
|
||||||
|
|
||||||
|
private treeMap = new Map<string, Tree>();
|
||||||
|
|
||||||
|
@computed get currentTree(): Tree | null {
|
||||||
|
const doc = this.designer?.currentDocument;
|
||||||
|
if (doc) {
|
||||||
|
const { id } = doc;
|
||||||
|
if (this.treeMap.has(id)) {
|
||||||
|
return this.treeMap.get(id)!;
|
||||||
|
}
|
||||||
|
const tree = new Tree(doc);
|
||||||
|
this.treeMap.set(id, tree);
|
||||||
|
return tree;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const mastersMap = new Map<Designer, TreeMaster>();
|
||||||
|
export function getTreeMaster(designer: Designer): TreeMaster {
|
||||||
|
let master = mastersMap.get(designer);
|
||||||
|
if (!master) {
|
||||||
|
master = new TreeMaster(designer);
|
||||||
|
mastersMap.set(designer, master);
|
||||||
|
}
|
||||||
|
return master;
|
||||||
|
}
|
||||||
235
packages/plugin-outline-pane/src/tree-node.ts
Normal file
235
packages/plugin-outline-pane/src/tree-node.ts
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
import { TitleContent, isI18nData } from '@ali/lowcode-types';
|
||||||
|
import { computed, obx, intl } from '@ali/lowcode-editor-core';
|
||||||
|
import { Node, DocumentModel, isLocationChildrenDetail, LocationChildrenDetail, Designer } from '@ali/lowcode-designer';
|
||||||
|
import { Tree } from './tree';
|
||||||
|
|
||||||
|
export default class TreeNode {
|
||||||
|
get id(): string {
|
||||||
|
return this.node.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否可以展开
|
||||||
|
*/
|
||||||
|
@computed get expandable(): boolean {
|
||||||
|
return this.hasChildren() || this.hasSlots() || this.dropDetail?.index != null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 插入"线"位置信息
|
||||||
|
*/
|
||||||
|
@computed get dropDetail(): LocationChildrenDetail | undefined | null {
|
||||||
|
const loc = this.node.document.dropLocation;
|
||||||
|
return loc && this.isResponseDropping() && isLocationChildrenDetail(loc.detail) ? loc.detail : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get depth(): number {
|
||||||
|
return this.node.zLevel;
|
||||||
|
}
|
||||||
|
|
||||||
|
isRoot() {
|
||||||
|
return this.tree.root === this;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否是响应投放区
|
||||||
|
*/
|
||||||
|
@computed isResponseDropping(): boolean {
|
||||||
|
const loc = this.node.document.dropLocation;
|
||||||
|
if (!loc) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return loc.target === this.node;
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed isFocusingNode(): boolean {
|
||||||
|
const loc = this.node.document.dropLocation;
|
||||||
|
if (!loc) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
isLocationChildrenDetail(loc.detail) && loc.detail.focus?.type === 'node' && loc.detail.focus.node === this.node
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 默认为折叠状态
|
||||||
|
* 在初始化根节点时，设置为展开状态
|
||||||
|
*/
|
||||||
|
@obx.ref private _expanded = false;
|
||||||
|
|
||||||
|
get expanded(): boolean {
|
||||||
|
return this.isRoot() || (this.expandable && this._expanded);
|
||||||
|
}
|
||||||
|
|
||||||
|
setExpanded(value: boolean) {
|
||||||
|
this._expanded = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get detecting() {
|
||||||
|
return this.designer.detecting.current === this.node;
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get hidden(): boolean {
|
||||||
|
const cv = this.node.isConditionalVisible();
|
||||||
|
if (cv == null) {
|
||||||
|
return !this.node.getVisible();
|
||||||
|
}
|
||||||
|
return !cv;
|
||||||
|
}
|
||||||
|
|
||||||
|
setHidden(flag: boolean) {
|
||||||
|
if (this.node.conditionGroup) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.node.setVisible(!flag);
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get locked(): boolean {
|
||||||
|
return this.node.getExtraProp('locked', false)?.getValue() === true;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLocked(flag: boolean) {
|
||||||
|
if (flag) {
|
||||||
|
this.node.getExtraProp('locked', true)?.setValue(true);
|
||||||
|
} else {
|
||||||
|
this.node.getExtraProp('locked', false)?.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get selected(): boolean {
|
||||||
|
// TODO: check is dragging
|
||||||
|
const { selection } = this.document;
|
||||||
|
return selection.has(this.node.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get title(): TitleContent {
|
||||||
|
return this.node.title;
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get titleLabel() {
|
||||||
|
let { title } = this;
|
||||||
|
if (!title) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
if ((title as any).label) {
|
||||||
|
title = (title as any).label;
|
||||||
|
}
|
||||||
|
if (typeof title === 'string') {
|
||||||
|
return title;
|
||||||
|
}
|
||||||
|
if (isI18nData(title)) {
|
||||||
|
return intl(title) as string;
|
||||||
|
}
|
||||||
|
return this.node.componentName;
|
||||||
|
}
|
||||||
|
|
||||||
|
setTitleLabel(label: string) {
|
||||||
|
const origLabel = this.titleLabel;
|
||||||
|
if (label === origLabel) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (label === '') {
|
||||||
|
this.node.getExtraProp('title', false)?.remove();
|
||||||
|
} else {
|
||||||
|
this.node.getExtraProp('title', true)?.setValue(label);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get icon() {
|
||||||
|
return this.node.componentMeta.icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get parent() {
|
||||||
|
const { parent } = this.node;
|
||||||
|
if (parent) {
|
||||||
|
return this.tree.getTreeNode(parent);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get slots(): TreeNode[] {
|
||||||
|
// todo: shallowEqual
|
||||||
|
return this.node.slots.map((node) => this.tree.getTreeNode(node));
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed get children(): TreeNode[] | null {
|
||||||
|
return this.node.children?.map((node) => this.tree.getTreeNode(node)) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否是容器，允许子节点拖入
|
||||||
|
*/
|
||||||
|
isContainer(): boolean {
|
||||||
|
return this.node.isContainer();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断是否有"插槽"
|
||||||
|
*/
|
||||||
|
hasSlots(): boolean {
|
||||||
|
return this.node.hasSlots();
|
||||||
|
}
|
||||||
|
|
||||||
|
hasChildren(): boolean {
|
||||||
|
return !!(this.isContainer() && this.node.children?.notEmpty());
|
||||||
|
}
|
||||||
|
|
||||||
|
select(isMulti: boolean) {
|
||||||
|
const { node } = this;
|
||||||
|
|
||||||
|
const { selection } = node.document;
|
||||||
|
if (isMulti) {
|
||||||
|
selection.add(node.id);
|
||||||
|
} else {
|
||||||
|
selection.select(node.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 展开节点，支持依次展开父节点
|
||||||
|
*/
|
||||||
|
expand(tryExpandParents = false) {
|
||||||
|
// 这边不能直接使用 expanded，需要额外判断是否可以展开
|
||||||
|
// 如果只使用 expanded，会漏掉不可以展开的情况，即在不可以展开的情况下，会触发展开
|
||||||
|
if (this.expandable && !this._expanded) {
|
||||||
|
this.setExpanded(true);
|
||||||
|
}
|
||||||
|
if (tryExpandParents) {
|
||||||
|
this.expandParents();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
expandParents() {
|
||||||
|
let p = this.node.parent;
|
||||||
|
while (p) {
|
||||||
|
this.tree.getTreeNode(p).setExpanded(true);
|
||||||
|
p = p.parent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
readonly designer: Designer;
|
||||||
|
|
||||||
|
readonly document: DocumentModel;
|
||||||
|
|
||||||
|
@obx.ref private _node: Node;
|
||||||
|
|
||||||
|
get node() {
|
||||||
|
return this._node;
|
||||||
|
}
|
||||||
|
|
||||||
|
readonly tree: Tree;
|
||||||
|
|
||||||
|
constructor(tree: Tree, node: Node) {
|
||||||
|
this.tree = tree;
|
||||||
|
this.document = node.document;
|
||||||
|
this.designer = this.document.designer;
|
||||||
|
this._node = node;
|
||||||
|
}
|
||||||
|
|
||||||
|
setNode(node: Node) {
|
||||||
|
if (this._node !== node) {
|
||||||
|
this._node = node;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
34
packages/plugin-outline-pane/src/tree.ts
Normal file
34
packages/plugin-outline-pane/src/tree.ts
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { DocumentModel, Node } from '@ali/lowcode-designer';
|
||||||
|
import TreeNode from './tree-node';
|
||||||
|
|
||||||
|
export class Tree {
|
||||||
|
private treeNodesMap = new Map<string, TreeNode>();
|
||||||
|
|
||||||
|
readonly root: TreeNode;
|
||||||
|
|
||||||
|
readonly id: string;
|
||||||
|
|
||||||
|
readonly document: DocumentModel;
|
||||||
|
|
||||||
|
constructor(document: DocumentModel) {
|
||||||
|
this.document = document;
|
||||||
|
this.root = this.getTreeNode(document.rootNode);
|
||||||
|
this.id = document.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
getTreeNode(node: Node): TreeNode {
|
||||||
|
if (this.treeNodesMap.has(node.id)) {
|
||||||
|
const tnode = this.treeNodesMap.get(node.id)!;
|
||||||
|
tnode.setNode(node);
|
||||||
|
return tnode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const treeNode = new TreeNode(this, node);
|
||||||
|
this.treeNodesMap.set(node.id, treeNode);
|
||||||
|
return treeNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
getTreeNodeById(id: string) {
|
||||||
|
return this.treeNodesMap.get(id);
|
||||||
|
}
|
||||||
|
}
|
||||||
18
packages/plugin-outline-pane/src/views/backup-pane.tsx
Normal file
18
packages/plugin-outline-pane/src/views/backup-pane.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { PureComponent } from 'react';
|
||||||
|
import { PluginProps } from '@ali/lowcode-types';
|
||||||
|
import { OutlinePane } from './pane';
|
||||||
|
|
||||||
|
export const Backup = Symbol.for('backup-outline');
|
||||||
|
|
||||||
|
export class OutlineBackupPane extends PureComponent<PluginProps> {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<OutlinePane
|
||||||
|
editor={this.props.editor}
|
||||||
|
config={{
|
||||||
|
name: Backup,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
40
packages/plugin-outline-pane/src/views/pane.tsx
Normal file
40
packages/plugin-outline-pane/src/views/pane.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import { observer } from '@ali/lowcode-editor-core';
|
||||||
|
import { intl } from '../locale';
|
||||||
|
import { OutlineMain } from '../main';
|
||||||
|
import TreeView from './tree';
|
||||||
|
import './style.less';
|
||||||
|
import { IEditor } from '@ali/lowcode-types';
|
||||||
|
|
||||||
|
@observer
|
||||||
|
export class OutlinePane extends Component<{ config: any; editor: IEditor }> {
|
||||||
|
private main = new OutlineMain(this.props.editor, this.props.config.name || this.props.config.pluginKey);
|
||||||
|
|
||||||
|
shouldComponentUpdate() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this.main.purge();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const tree = this.main.currentTree;
|
||||||
|
|
||||||
|
if (!tree) {
|
||||||
|
return (
|
||||||
|
<div className="lc-outline-pane">
|
||||||
|
<p className="lc-outline-notice">{intl('Initializing')}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="lc-outline-pane">
|
||||||
|
<div ref={(shell) => this.main.mount(shell)} className="lc-outline-tree-container">
|
||||||
|
<TreeView key={tree.id} tree={tree} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
94
packages/plugin-outline-pane/src/views/root-tree-node.tsx
Normal file
94
packages/plugin-outline-pane/src/views/root-tree-node.tsx
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
import { Component } from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { observer } from '@ali/lowcode-editor-core';
|
||||||
|
import TreeNode from '../tree-node';
|
||||||
|
import TreeTitle from './tree-title';
|
||||||
|
import TreeBranches from './tree-branches';
|
||||||
|
import { ModalNodesManager } from '@ali/lowcode-designer';
|
||||||
|
import { IconEyeClose } from '../icons/eye-close';
|
||||||
|
|
||||||
|
@observer
|
||||||
|
class ModalTreeNodeView extends Component<{ treeNode: TreeNode }> {
|
||||||
|
private modalNodesManager: ModalNodesManager;
|
||||||
|
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
// 模态管理对象
|
||||||
|
this.modalNodesManager = props.treeNode.document.modalNodesManager;
|
||||||
|
}
|
||||||
|
|
||||||
|
shouldComponentUpdate() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
hideAllNodes() {
|
||||||
|
this.modalNodesManager.hideModalNodes();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { treeNode } = this.props;
|
||||||
|
const modalNodes = treeNode.children?.filter((item) => {
|
||||||
|
return item.node.componentMeta.isModal;
|
||||||
|
});
|
||||||
|
if (!modalNodes || modalNodes.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasVisibleModalNode = !!this.modalNodesManager.getVisibleModalNode();
|
||||||
|
return (
|
||||||
|
<div className="tree-node-modal">
|
||||||
|
<div className="tree-node-modal-title">
|
||||||
|
<span>模态视图层</span>
|
||||||
|
<div
|
||||||
|
className="tree-node-modal-title-visible-icon"
|
||||||
|
onClick={this.hideAllNodes.bind(this)}
|
||||||
|
>
|
||||||
|
{hasVisibleModalNode ? <IconEyeClose /> : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="tree-pane-modal-content">
|
||||||
|
<TreeBranches treeNode={treeNode} isModal />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@observer
|
||||||
|
export default class RootTreeNodeView extends Component<{ treeNode: TreeNode }> {
|
||||||
|
shouldComponentUpdate() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { treeNode } = this.props;
|
||||||
|
const className = classNames('tree-node', {
|
||||||
|
// 是否展开
|
||||||
|
expanded: treeNode.expanded,
|
||||||
|
// 是否悬停中
|
||||||
|
detecting: treeNode.detecting,
|
||||||
|
// 是否选中的
|
||||||
|
selected: treeNode.selected,
|
||||||
|
// 是否隐藏的
|
||||||
|
hidden: treeNode.hidden,
|
||||||
|
// 是否忽略的
|
||||||
|
// ignored: treeNode.ignored,
|
||||||
|
// 是否锁定的
|
||||||
|
locked: treeNode.locked,
|
||||||
|
// 是否投放响应
|
||||||
|
dropping: treeNode.dropDetail?.index != null,
|
||||||
|
'is-root': treeNode.isRoot(),
|
||||||
|
'condition-flow': treeNode.node.conditionGroup != null,
|
||||||
|
highlight: treeNode.isFocusingNode(),
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={className} data-id={treeNode.id}>
|
||||||
|
<TreeTitle treeNode={treeNode} />
|
||||||
|
<ModalTreeNodeView treeNode={treeNode} />
|
||||||
|
<TreeBranches treeNode={treeNode} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
388
packages/plugin-outline-pane/src/views/style.less
Normal file
388
packages/plugin-outline-pane/src/views/style.less
Normal file
@ -0,0 +1,388 @@
|
|||||||
|
.lc-outline-pane {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
|
> .lc-outline-tree-container {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lc-outline-tree {
|
||||||
|
@treeNodeHeight: 30px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: @treeNodeHeight;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
.tree-node-modal {
|
||||||
|
margin: 5px;
|
||||||
|
border: 1px solid rgba(31, 56, 88, 0.2);
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 0 1px 4px 0 rgba(31, 56, 88, 0.15);
|
||||||
|
|
||||||
|
.tree-node-modal-title {
|
||||||
|
position: relative;
|
||||||
|
background: rgba(31, 56, 88, 0.04);
|
||||||
|
padding: 0 10px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
border-bottom: 1px solid rgba(31, 56, 88, 0.2);
|
||||||
|
|
||||||
|
.tree-node-modal-title-visible-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
right: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-pane-modal-content {
|
||||||
|
& > .tree-node-branches::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-node-modal-radio, .tree-node-modal-radio-active {
|
||||||
|
margin-right: 4px;
|
||||||
|
opacity: 0.8;
|
||||||
|
position: absolute;
|
||||||
|
top: 7px;
|
||||||
|
left: 6px;
|
||||||
|
}
|
||||||
|
.tree-node-modal-radio-active {
|
||||||
|
color: #006cff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-node-branches::before {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
border-left: 1px solid transparent;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 6px;
|
||||||
|
content: ' ';
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.tree-node-branches::before {
|
||||||
|
border-left-color: #ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.insertion {
|
||||||
|
pointer-events: all !important;
|
||||||
|
border: 1px dashed var(--color-brand-light);
|
||||||
|
height: @treeNodeHeight;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transform: translateZ(0);
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
&.invalid {
|
||||||
|
border-color: red;
|
||||||
|
background-color: rgba(240, 154, 154, 0.719);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.condition-group-container {
|
||||||
|
border-bottom: 1px solid #7b605b;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
border-left: 0.5px solid #7b605b;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
content: ' ';
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
>.condition-group-title {
|
||||||
|
text-align: center;
|
||||||
|
background-color: #7b605b;
|
||||||
|
height: 14px;
|
||||||
|
> .lc-title {
|
||||||
|
font-size: 12px;
|
||||||
|
transform: scale(0.8);
|
||||||
|
transform-origin: top;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0px 0px 2px black;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tree-node-slots {
|
||||||
|
border-bottom: 1px solid rgb(144, 94, 190);
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
border-left: 0.5px solid rgb(144, 94, 190);
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
content: ' ';
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
>.tree-node-slots-title {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgb(144, 94, 190);
|
||||||
|
height: 14px;
|
||||||
|
> .lc-title {
|
||||||
|
font-size: 12px;
|
||||||
|
transform: scale(0.8);
|
||||||
|
transform-origin: top;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0px 0px 2px black;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.insertion-at-slots {
|
||||||
|
padding-bottom: @treeNodeHeight;
|
||||||
|
border-bottom-color: rgb(182, 55, 55);
|
||||||
|
>.tree-node-slots-title {
|
||||||
|
background-color: rgb(182, 55, 55);
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
border-left-color: rgb(182, 55, 55);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-node {
|
||||||
|
.tree-node-expand-btn {
|
||||||
|
width: 12px;
|
||||||
|
line-height: 0;
|
||||||
|
align-self: stretch;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: color 200ms ease;
|
||||||
|
color: var(--color-icon-normal);
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-icon-hover);
|
||||||
|
}
|
||||||
|
> svg {
|
||||||
|
transform-origin: center;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
transition: transform 100ms ease;
|
||||||
|
}
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
.tree-node-expand-placeholder {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-node-icon {
|
||||||
|
transform: translateZ(0);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 4px;
|
||||||
|
color: var(--color-text);
|
||||||
|
|
||||||
|
& > svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
* {
|
||||||
|
fill: var(--color-icon-normal, rgba(31, 56, 88, 0.4));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
* {
|
||||||
|
fill: var(--color-icon-normal, rgba(31, 56, 88, 0.4));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-node-title {
|
||||||
|
font-size: var(--font-size-text);
|
||||||
|
cursor: pointer;
|
||||||
|
background: var(--color-pane-background);
|
||||||
|
border-bottom: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: @treeNodeHeight;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
transform: translateZ(0);
|
||||||
|
padding-right: 5px;
|
||||||
|
& > :first-child {
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-node-title-label {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
align-self: stretch;
|
||||||
|
overflow: visible;
|
||||||
|
margin-right: 5px;
|
||||||
|
|
||||||
|
.tree-node-title-input {
|
||||||
|
flex: 1;
|
||||||
|
border: 1px solid var(--color-brand-light);
|
||||||
|
background-color: var(--color-pane-background);
|
||||||
|
color: var(--color-text);
|
||||||
|
line-height: 18px;
|
||||||
|
padding: 2px;
|
||||||
|
outline: none;
|
||||||
|
margin-left: -3px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-node-hide-btn, .tree-node-lock-btn {
|
||||||
|
opacity: 0;
|
||||||
|
color: var(--color-text);
|
||||||
|
line-height: 0;
|
||||||
|
align-self: stretch;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 22px;
|
||||||
|
&:hover {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.tree-node-hide-btn, .tree-node-lock-btn {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
html.lc-cursor-dragging & {
|
||||||
|
// FIXME: only hide hover shows
|
||||||
|
.tree-node-hide-btn, .tree-node-lock-btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.editing {
|
||||||
|
& > .tree-node-hide-btn, & >.tree-node-lock-btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-node-tag {
|
||||||
|
margin-left: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 0;
|
||||||
|
&.cond {
|
||||||
|
color: rgb(179, 52, 6);
|
||||||
|
}
|
||||||
|
&.loop {
|
||||||
|
color: rgb(103, 187, 187);
|
||||||
|
}
|
||||||
|
&.slot {
|
||||||
|
color: rgb(211, 90, 211);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-root {
|
||||||
|
> .tree-node-title {
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.expanded {
|
||||||
|
& > .tree-node-title > .tree-node-expand-btn > svg {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.detecting > .tree-node-title {
|
||||||
|
background: var(--color-block-background-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选中节点处理
|
||||||
|
&.selected {
|
||||||
|
& > .tree-node-title {
|
||||||
|
background: var(--color-block-background-shallow);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .tree-node-branches::before {
|
||||||
|
border-left-color: var(--color-brand-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hidden {
|
||||||
|
.tree-node-title-label {
|
||||||
|
color: #9b9b9b;
|
||||||
|
}
|
||||||
|
& > .tree-node-title > .tree-node-hide-btn {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.tree-node-branches {
|
||||||
|
.tree-node-hide-btn {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.condition-flow {
|
||||||
|
& > .tree-node-title > .tree-node-hide-btn {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
&.hidden > .tree-node-title > .tree-node-hide-btn {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.locked {
|
||||||
|
& > .tree-node-title > .tree-node-lock-btn {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.tree-node-branches {
|
||||||
|
.tree-node-lock-btn, .tree-node-hide-btn {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理拖入节点
|
||||||
|
&.dropping {
|
||||||
|
& > .tree-node-branches::before {
|
||||||
|
border-left: 1px solid var(--color-brand);
|
||||||
|
}
|
||||||
|
& > .tree-node-title {
|
||||||
|
.tree-node-expand-btn {
|
||||||
|
color: var(--color-brand);
|
||||||
|
}
|
||||||
|
.tree-node-icon {
|
||||||
|
color: var(--color-brand);
|
||||||
|
}
|
||||||
|
.tree-node-title-label > .lc-title {
|
||||||
|
color: var(--color-brand);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.highlight {
|
||||||
|
& > .tree-node-title {
|
||||||
|
background: var(--color-block-background-shallow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-node-branches {
|
||||||
|
padding-left: 12px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
140
packages/plugin-outline-pane/src/views/tree-branches.tsx
Normal file
140
packages/plugin-outline-pane/src/views/tree-branches.tsx
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
import { Component } from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { observer, Title } from '@ali/lowcode-editor-core';
|
||||||
|
import { ExclusiveGroup } from '@ali/lowcode-designer';
|
||||||
|
import TreeNode from '../tree-node';
|
||||||
|
import TreeNodeView from './tree-node';
|
||||||
|
import { intlNode } from '../locale';
|
||||||
|
|
||||||
|
@observer
|
||||||
|
export default class TreeBranches extends Component<{
|
||||||
|
treeNode: TreeNode;
|
||||||
|
isModal?: boolean;
|
||||||
|
}> {
|
||||||
|
shouldComponentUpdate() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { treeNode, isModal } = this.props;
|
||||||
|
const { expanded } = treeNode;
|
||||||
|
|
||||||
|
if (!expanded) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="tree-node-branches">
|
||||||
|
{
|
||||||
|
!isModal && <TreeNodeSlots treeNode={treeNode} />
|
||||||
|
}
|
||||||
|
<TreeNodeChildren treeNode={treeNode} isModal={isModal || false} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@observer
|
||||||
|
class TreeNodeChildren extends Component<{
|
||||||
|
treeNode: TreeNode;
|
||||||
|
isModal?: boolean;
|
||||||
|
}> {
|
||||||
|
shouldComponentUpdate() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { treeNode, isModal } = this.props;
|
||||||
|
const children: any = [];
|
||||||
|
let groupContents: any[] = [];
|
||||||
|
let currentGrp: ExclusiveGroup;
|
||||||
|
const endGroup = () => {
|
||||||
|
if (groupContents.length > 0) {
|
||||||
|
children.push(
|
||||||
|
<div key={currentGrp.id} className="condition-group-container" data-id={currentGrp.firstNode.id}>
|
||||||
|
<div className="condition-group-title">
|
||||||
|
<Title title={currentGrp.title} />
|
||||||
|
</div>
|
||||||
|
{groupContents}
|
||||||
|
</div>,
|
||||||
|
);
|
||||||
|
groupContents = [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const { dropDetail } = treeNode;
|
||||||
|
const dropIndex = dropDetail?.index;
|
||||||
|
const insertion = (
|
||||||
|
<div
|
||||||
|
key="insertion"
|
||||||
|
className={classNames('insertion', {
|
||||||
|
invalid: dropDetail?.valid === false,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
treeNode.children?.forEach((child, index) => {
|
||||||
|
const childIsModal = child.node.componentMeta.isModal || false;
|
||||||
|
if (isModal != childIsModal) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { conditionGroup } = child.node;
|
||||||
|
if (conditionGroup !== currentGrp) {
|
||||||
|
endGroup();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (conditionGroup) {
|
||||||
|
currentGrp = conditionGroup;
|
||||||
|
if (index === dropIndex) {
|
||||||
|
if (groupContents.length > 0) {
|
||||||
|
groupContents.push(insertion);
|
||||||
|
} else {
|
||||||
|
children.push(insertion);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
groupContents.push(<TreeNodeView key={child.id} treeNode={child} isModal={isModal} />);
|
||||||
|
} else {
|
||||||
|
if (index === dropIndex) {
|
||||||
|
children.push(insertion);
|
||||||
|
}
|
||||||
|
children.push(<TreeNodeView key={child.id} treeNode={child} isModal={isModal} />);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
endGroup();
|
||||||
|
const length = treeNode.children?.length || 0;
|
||||||
|
if (dropIndex != null && dropIndex >= length) {
|
||||||
|
children.push(insertion);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className="tree-node-children">{children}</div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@observer
|
||||||
|
class TreeNodeSlots extends Component<{
|
||||||
|
treeNode: TreeNode;
|
||||||
|
}> {
|
||||||
|
shouldComponentUpdate() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { treeNode } = this.props;
|
||||||
|
if (!treeNode.hasSlots()) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={classNames('tree-node-slots', {
|
||||||
|
'insertion-at-slots': treeNode.dropDetail?.focus?.type === 'slots',
|
||||||
|
})}
|
||||||
|
data-id={treeNode.id}
|
||||||
|
>
|
||||||
|
<div className="tree-node-slots-title">
|
||||||
|
<Title title={{ type: 'i18n', intl: intlNode('Slots') }} />
|
||||||
|
</div>
|
||||||
|
{treeNode.slots.map(tnode => (
|
||||||
|
<TreeNodeView key={tnode.id} treeNode={tnode} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
46
packages/plugin-outline-pane/src/views/tree-node.tsx
Normal file
46
packages/plugin-outline-pane/src/views/tree-node.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { Component } from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { observer } from '@ali/lowcode-editor-core';
|
||||||
|
import TreeNode from '../tree-node';
|
||||||
|
import TreeTitle from './tree-title';
|
||||||
|
import TreeBranches from './tree-branches';
|
||||||
|
|
||||||
|
@observer
|
||||||
|
export default class TreeNodeView extends Component<{
|
||||||
|
treeNode: TreeNode;
|
||||||
|
isModal?: boolean;
|
||||||
|
}> {
|
||||||
|
shouldComponentUpdate() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { treeNode, isModal } = this.props;
|
||||||
|
const className = classNames('tree-node', {
|
||||||
|
// 是否展开
|
||||||
|
expanded: treeNode.expanded,
|
||||||
|
// 是否悬停中
|
||||||
|
detecting: treeNode.detecting,
|
||||||
|
// 是否选中的
|
||||||
|
selected: treeNode.selected,
|
||||||
|
// 是否隐藏的
|
||||||
|
hidden: treeNode.hidden,
|
||||||
|
// 是否忽略的
|
||||||
|
// ignored: treeNode.ignored,
|
||||||
|
// 是否锁定的
|
||||||
|
locked: treeNode.locked,
|
||||||
|
// 是否投放响应
|
||||||
|
dropping: treeNode.dropDetail?.index != null,
|
||||||
|
'is-root': treeNode.isRoot(),
|
||||||
|
'condition-flow': treeNode.node.conditionGroup != null,
|
||||||
|
highlight: treeNode.isFocusingNode(),
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={className} data-id={treeNode.id}>
|
||||||
|
<TreeTitle treeNode={treeNode} isModal={isModal} />
|
||||||
|
<TreeBranches treeNode={treeNode} isModal={false} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
295
packages/plugin-outline-pane/src/views/tree-title.tsx
Normal file
295
packages/plugin-outline-pane/src/views/tree-title.tsx
Normal file
@ -0,0 +1,295 @@
|
|||||||
|
import { Component, KeyboardEvent, FocusEvent, Fragment } from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { observer, Title, Tip, globalContext, Editor } from '@ali/lowcode-editor-core';
|
||||||
|
import { IconArrowRight } from '../icons/arrow-right';
|
||||||
|
import { IconEyeClose } from '../icons/eye-close';
|
||||||
|
import { intl, intlNode } from '../locale';
|
||||||
|
import TreeNode from '../tree-node';
|
||||||
|
import { IconEye } from '../icons/eye';
|
||||||
|
import { IconCond } from '../icons/cond';
|
||||||
|
import { IconLoop } from '../icons/loop';
|
||||||
|
import { IconRadioActive } from '../icons/radio-active';
|
||||||
|
import { IconRadio } from '../icons/radio';
|
||||||
|
import { createIcon } from '@ali/lowcode-utils';
|
||||||
|
|
||||||
|
function emitOutlineEvent(type: string, treeNode: TreeNode, rest?: Record<string, unknown>) {
|
||||||
|
const editor = globalContext.get(Editor);
|
||||||
|
const node = treeNode?.node;
|
||||||
|
const npm = node?.componentMeta?.npm;
|
||||||
|
const selected =
|
||||||
|
[npm?.package, npm?.componentName].filter((item) => !!item).join('-') || node?.componentMeta?.componentName || '';
|
||||||
|
editor?.emit(`outlinePane.${type}`, {
|
||||||
|
selected,
|
||||||
|
...rest,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
@observer
|
||||||
|
export default class TreeTitle extends Component<{
|
||||||
|
treeNode: TreeNode;
|
||||||
|
isModal?: boolean;
|
||||||
|
}> {
|
||||||
|
state: {
|
||||||
|
editing: boolean;
|
||||||
|
} = {
|
||||||
|
editing: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
private enableEdit = () => {
|
||||||
|
this.setState({
|
||||||
|
editing: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
private cancelEdit() {
|
||||||
|
this.setState({
|
||||||
|
editing: false,
|
||||||
|
});
|
||||||
|
this.lastInput = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
private saveEdit = (e: FocusEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
const { treeNode } = this.props;
|
||||||
|
const value = (e.target as HTMLInputElement).value || '';
|
||||||
|
treeNode.setTitleLabel(value);
|
||||||
|
emitOutlineEvent('rename', treeNode, { value });
|
||||||
|
this.cancelEdit();
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
if (e.keyCode === 13) {
|
||||||
|
this.saveEdit(e);
|
||||||
|
}
|
||||||
|
if (e.keyCode === 27) {
|
||||||
|
this.cancelEdit();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private lastInput?: HTMLInputElement;
|
||||||
|
|
||||||
|
private setCaret = (input: HTMLInputElement | null) => {
|
||||||
|
if (!input || this.lastInput === input) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
input.focus();
|
||||||
|
input.select();
|
||||||
|
// 光标定位最后一个
|
||||||
|
// input.selectionStart = input.selectionEnd;
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { treeNode, isModal } = this.props;
|
||||||
|
const { editing } = this.state;
|
||||||
|
const isCNode = !treeNode.isRoot();
|
||||||
|
const { node } = treeNode;
|
||||||
|
const isNodeParent = node.isParental();
|
||||||
|
let style: any;
|
||||||
|
if (isCNode) {
|
||||||
|
const { depth } = treeNode;
|
||||||
|
const indent = depth * 12;
|
||||||
|
style = {
|
||||||
|
paddingLeft: indent + (isModal ? 12 : 0),
|
||||||
|
marginLeft: -indent,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={classNames('tree-node-title', {
|
||||||
|
editing,
|
||||||
|
})}
|
||||||
|
style={style}
|
||||||
|
data-id={treeNode.id}
|
||||||
|
onClick={() => {
|
||||||
|
if (isModal) {
|
||||||
|
node.document.modalNodesManager.setVisible(node);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (node.conditionGroup) {
|
||||||
|
node.setConditionalVisible();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isModal && node.getVisible() && (
|
||||||
|
<div onClick={() => {
|
||||||
|
node.document.modalNodesManager.setInvisible(node);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconRadioActive className="tree-node-modal-radio-active" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{isModal && !node.getVisible() && (
|
||||||
|
<div onClick={() => {
|
||||||
|
node.document.modalNodesManager.setVisible(node);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconRadio className="tree-node-modal-radio" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{isCNode && <ExpandBtn treeNode={treeNode} />}
|
||||||
|
<div className="tree-node-icon">{createIcon(treeNode.icon)}</div>
|
||||||
|
<div className="tree-node-title-label" onDoubleClick={isNodeParent ? this.enableEdit : undefined}>
|
||||||
|
{editing ? (
|
||||||
|
<input
|
||||||
|
className="tree-node-title-input"
|
||||||
|
defaultValue={treeNode.titleLabel}
|
||||||
|
onBlur={this.saveEdit}
|
||||||
|
ref={this.setCaret}
|
||||||
|
onKeyUp={this.handleKeyUp}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Fragment>
|
||||||
|
<Title title={treeNode.title} />
|
||||||
|
{node.slotFor && (
|
||||||
|
<a className="tree-node-tag slot">
|
||||||
|
{/* todo: click redirect to prop */}
|
||||||
|
<Tip>{intlNode('Slot for {prop}', { prop: node.slotFor.key })}</Tip>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{node.hasLoop() && (
|
||||||
|
<a className="tree-node-tag loop">
|
||||||
|
{/* todo: click todo something */}
|
||||||
|
<IconLoop />
|
||||||
|
<Tip>{intlNode('Loop')}</Tip>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{node.hasCondition() && !node.conditionGroup && (
|
||||||
|
<a className="tree-node-tag cond">
|
||||||
|
{/* todo: click todo something */}
|
||||||
|
<IconCond />
|
||||||
|
<Tip>{intlNode('Conditional')}</Tip>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</Fragment>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{isCNode && isNodeParent && !isModal && <HideBtn treeNode={treeNode} />}
|
||||||
|
{/* isCNode && isNodeParent && <LockBtn treeNode={treeNode} /> */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// @observer
|
||||||
|
// class LockBtn extends Component<{ treeNode: TreeNode }> {
|
||||||
|
// shouldComponentUpdate() {
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// render() {
|
||||||
|
// const { treeNode } = this.props;
|
||||||
|
// return (
|
||||||
|
// <div
|
||||||
|
// className="tree-node-lock-btn"
|
||||||
|
// onClick={(e) => {
|
||||||
|
// e.stopPropagation();
|
||||||
|
// treeNode.setLocked(!treeNode.locked);
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// {treeNode.locked ? <IconLock /> : <IconUnlock />}
|
||||||
|
// <Tip>{treeNode.locked ? intl('Unlock') : intl('Lock')}</Tip>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
@observer
|
||||||
|
class HideBtn extends Component<{ treeNode: TreeNode }> {
|
||||||
|
shouldComponentUpdate() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { treeNode } = this.props;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="tree-node-hide-btn"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
emitOutlineEvent(treeNode.hidden ? 'show' : 'hide', treeNode);
|
||||||
|
treeNode.setHidden(!treeNode.hidden);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{treeNode.hidden ? <IconEyeClose /> : <IconEye />}
|
||||||
|
<Tip>{treeNode.hidden ? intl('Show') : intl('Hide')}</Tip>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@observer
|
||||||
|
class ExpandBtn extends Component<{ treeNode: TreeNode }> {
|
||||||
|
shouldComponentUpdate() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { treeNode } = this.props;
|
||||||
|
if (!treeNode.expandable) {
|
||||||
|
return <i className="tree-node-expand-placeholder" />;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="tree-node-expand-btn"
|
||||||
|
onClick={(e) => {
|
||||||
|
if (treeNode.expanded) {
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
emitOutlineEvent(treeNode.expanded ? 'collapse' : 'expand', treeNode);
|
||||||
|
treeNode.setExpanded(!treeNode.expanded);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconArrowRight size="small" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
interface Point {
|
||||||
|
clientX: number;
|
||||||
|
clientY: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setCaret(point: Point) {
|
||||||
|
debugger;
|
||||||
|
const range = getRangeFromPoint(point);
|
||||||
|
if (range) {
|
||||||
|
selectRange(range);
|
||||||
|
setTimeout(() => selectRange(range), 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRangeFromPoint(point: Point): Range | undefined {
|
||||||
|
const x = point.clientX;
|
||||||
|
const y = point.clientY;
|
||||||
|
let range;
|
||||||
|
let pos: CaretPosition | null = null;
|
||||||
|
if (document.caretRangeFromPoint) {
|
||||||
|
range = document.caretRangeFromPoint(x, y);
|
||||||
|
} else if ((pos = document.caretPositionFromPoint(x, y))) {
|
||||||
|
range = document.createRange();
|
||||||
|
range.setStart(pos.offsetNode, pos.offset);
|
||||||
|
range.collapse(true);
|
||||||
|
|
||||||
|
}
|
||||||
|
return range;
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectRange(range: Range) {
|
||||||
|
const selection = document.getSelection();
|
||||||
|
if (selection) {
|
||||||
|
selection.removeAllRanges();
|
||||||
|
selection.addRange(range);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setCaretAfter(elem) {
|
||||||
|
const range = document.createRange();
|
||||||
|
const node = elem.lastChild;
|
||||||
|
if (!node) return;
|
||||||
|
range.setStartAfter(node);
|
||||||
|
range.setEndAfter(node);
|
||||||
|
selectRange(range);
|
||||||
|
}
|
||||||
|
*/
|
||||||
165
packages/plugin-outline-pane/src/views/tree.tsx
Normal file
165
packages/plugin-outline-pane/src/views/tree.tsx
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
import { Component, MouseEvent as ReactMouseEvent } from 'react';
|
||||||
|
import { observer, Editor, globalContext } from '@ali/lowcode-editor-core';
|
||||||
|
import { isRootNode, Node, DragObjectType, isShaken } from '@ali/lowcode-designer';
|
||||||
|
import { isFormEvent } from '@ali/lowcode-utils';
|
||||||
|
import { Tree } from '../tree';
|
||||||
|
import RootTreeNodeView from './root-tree-node';
|
||||||
|
|
||||||
|
function getTreeNodeIdByEvent(e: ReactMouseEvent, stop: Element): null | string {
|
||||||
|
let target: Element | null = e.target as Element;
|
||||||
|
if (!target || !stop.contains(target)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
target = target.closest('[data-id]');
|
||||||
|
if (!target || !stop.contains(target)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (target as HTMLDivElement).dataset.id || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
@observer
|
||||||
|
export default class TreeView extends Component<{ tree: Tree }> {
|
||||||
|
private shell: HTMLDivElement | null = null;
|
||||||
|
|
||||||
|
private hover(e: ReactMouseEvent) {
|
||||||
|
const { tree } = this.props;
|
||||||
|
|
||||||
|
const doc = tree.document;
|
||||||
|
const { detecting } = doc.designer;
|
||||||
|
if (!detecting.enable) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const node = this.getTreeNodeFromEvent(e)?.node;
|
||||||
|
detecting.capture(node || null);
|
||||||
|
}
|
||||||
|
|
||||||
|
private onClick = (e: ReactMouseEvent) => {
|
||||||
|
if (this.ignoreUpSelected) {
|
||||||
|
this.boostEvent = undefined;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.boostEvent && isShaken(this.boostEvent, e.nativeEvent)) {
|
||||||
|
this.boostEvent = undefined;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.boostEvent = undefined;
|
||||||
|
const treeNode = this.getTreeNodeFromEvent(e);
|
||||||
|
if (!treeNode) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { node } = treeNode;
|
||||||
|
const { designer } = treeNode;
|
||||||
|
const doc = node.document;
|
||||||
|
const { selection } = doc;
|
||||||
|
const { id } = node;
|
||||||
|
const isMulti = e.metaKey || e.ctrlKey || e.shiftKey;
|
||||||
|
designer.activeTracker.track(node);
|
||||||
|
if (isMulti && !isRootNode(node) && selection.has(id)) {
|
||||||
|
if (!isFormEvent(e.nativeEvent)) {
|
||||||
|
selection.remove(id);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
selection.select(id);
|
||||||
|
const editor = globalContext.get(Editor);
|
||||||
|
const selectedNode = designer.currentSelection?.getNodes()?.[0];
|
||||||
|
const npm = selectedNode?.componentMeta?.npm;
|
||||||
|
const selected =
|
||||||
|
[npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
|
||||||
|
selectedNode?.componentMeta?.componentName ||
|
||||||
|
'';
|
||||||
|
editor?.emit('outlinePane.select', {
|
||||||
|
selected,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private onMouseOver = (e: ReactMouseEvent) => {
|
||||||
|
this.hover(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
private getTreeNodeFromEvent(e: ReactMouseEvent) {
|
||||||
|
if (!this.shell) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const id = getTreeNodeIdByEvent(e, this.shell);
|
||||||
|
if (!id) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { tree } = this.props;
|
||||||
|
return tree.getTreeNodeById(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
private ignoreUpSelected = false;
|
||||||
|
|
||||||
|
private boostEvent?: MouseEvent;
|
||||||
|
|
||||||
|
private onMouseDown = (e: ReactMouseEvent) => {
|
||||||
|
if (isFormEvent(e.nativeEvent)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const treeNode = this.getTreeNodeFromEvent(e);
|
||||||
|
if (!treeNode) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { node } = treeNode;
|
||||||
|
const { designer } = treeNode;
|
||||||
|
const doc = node.document;
|
||||||
|
const { selection } = doc;
|
||||||
|
|
||||||
|
// TODO: shift selection
|
||||||
|
const isMulti = e.metaKey || e.ctrlKey || e.shiftKey;
|
||||||
|
const isLeftButton = e.button === 0;
|
||||||
|
|
||||||
|
if (isLeftButton && !isRootNode(node)) {
|
||||||
|
let nodes: Node[] = [node];
|
||||||
|
this.ignoreUpSelected = false;
|
||||||
|
if (isMulti) {
|
||||||
|
// multi select mode, directily add
|
||||||
|
if (!selection.has(node.id)) {
|
||||||
|
designer.activeTracker.track(node);
|
||||||
|
selection.add(node.id);
|
||||||
|
this.ignoreUpSelected = true;
|
||||||
|
}
|
||||||
|
selection.remove(doc.rootNode.id);
|
||||||
|
// 获得顶层 nodes
|
||||||
|
nodes = selection.getTopNodes();
|
||||||
|
} else if (selection.has(node.id)) {
|
||||||
|
nodes = selection.getTopNodes();
|
||||||
|
}
|
||||||
|
this.boostEvent = e.nativeEvent;
|
||||||
|
designer.dragon.boost(
|
||||||
|
{
|
||||||
|
type: DragObjectType.Node,
|
||||||
|
nodes,
|
||||||
|
},
|
||||||
|
this.boostEvent,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private onMouseLeave = () => {
|
||||||
|
const { tree } = this.props;
|
||||||
|
const doc = tree.document;
|
||||||
|
doc.designer.detecting.leave(doc);
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { tree } = this.props;
|
||||||
|
const { root } = tree;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="lc-outline-tree"
|
||||||
|
ref={(shell) => { this.shell = shell; }}
|
||||||
|
onMouseDownCapture={this.onMouseDown}
|
||||||
|
onMouseOver={this.onMouseOver}
|
||||||
|
onClick={this.onClick}
|
||||||
|
onMouseLeave={this.onMouseLeave}
|
||||||
|
>
|
||||||
|
<RootTreeNodeView key={root.id} treeNode={root} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user