From a7d436a0525a0ce0c7229710077111f283b452f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?LeoYuan=20=E8=A2=81=E5=8A=9B=E7=9A=93?= Date: Mon, 21 Feb 2022 20:24:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=20skeleton=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E5=87=A0=E4=B8=AA=E6=96=B9=E6=B3=95=E5=92=8C=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- packages/engine/README.md | 20 +++++---- packages/shell/src/skeleton.ts | 79 ++++++++++++++++++++++++++++++++++ 3 files changed, 91 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 1f05922cd..e0bc85bb9 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "typescript": "^4.5.5" }, "engines": { - "node": ">=14.17.0" + "node": ">=14.17.0 <16" }, "tnpm": { "mode": "yarn", diff --git a/packages/engine/README.md b/packages/engine/README.md index 6947a7d22..e0ca76362 100644 --- a/packages/engine/README.md +++ b/packages/engine/README.md @@ -114,14 +114,16 @@ https://cdn.jsdelivr.net/npm/@alilc/lowcode-react-simulator-renderer@1.0.0/dist/ #### 方式 3：使用自有 cdn 将源码中 packages/engine/dist 和 packages/(react|rax)-simulator-renderer/dist 下的文件传至你的 cdn 提供商 -## 🔗 链接 +## 🔗 相关链接 -- [官网首页 WIP](http://lowcode-engine.cn/) -- [官方物料 WIP](http://lowcode-engine.cn/) -- [官方设置器（setter）WIP](http://lowcode-engine.cn/) -- [官方插件（plugin）WIP](http://lowcode-engine.cn/) -- [用户文档 WIP](http://lowcode-engine.cn/#/doc) -- [更新日志](http://lowcode-engine.cn/#/doc?url=engine-changelog) +- [官网首页](http://lowcode-engine.cn/) +- [Demo 马上玩](https://alifd.alicdn.com/npm/@alilc/lowcode-demo@1.0.0/build/index.html) | [引擎 Demo 仓库](https://github.com/alibaba/lowcode-demo) +- [官方物料](https://github.com/alibaba/lowcode-materials) +- [官方设置器（setter）](https://github.com/alibaba/lowcode-engine-ext) +- [官方插件（plugin）](https://github.com/alibaba/lowcode-plugins) +- [用户文档](http://lowcode-engine.cn/doc) +- [API WIP](http://lowcode-engine.cn/doc?url=vlmeme) +- [更新日志](http://lowcode-engine.cn/doc?url=engine-changelog) ## 💻 本地调试 @@ -135,9 +137,9 @@ $ npm start > 📢 npm 访问速度较慢，阿里员工可以使用 tnpm，其他同学建议使用 cnpm 或者指定镜像 registry。 > -> ❕node 版本限制在 14 +> 📢 node 版本限制在 14 > -> ❕windows 环境尽量使用 [WSL](https://docs.microsoft.com/zh-cn/windows/wsl/install) +> 📢 windows 环境尽量使用 [WSL](https://docs.microsoft.com/zh-cn/windows/wsl/install) lowcode-engine 启动后，提供了几个 umd 文件，可以结合 [lowcode-demo](https://github.com/alibaba/lowcode-demo) 项目做调试，文件代理规则参考这里。 diff --git a/packages/shell/src/skeleton.ts b/packages/shell/src/skeleton.ts index 3f7a63d3d..15872635b 100644 --- a/packages/shell/src/skeleton.ts +++ b/packages/shell/src/skeleton.ts @@ -2,6 +2,7 @@ import { Skeleton as InnerSkeleton, IWidgetBaseConfig, IWidgetConfigArea, + SkeletonEvents, } from '@alilc/lowcode-editor-skeleton'; import { skeletonSymbol } from './symbols'; @@ -58,6 +59,14 @@ export default class Skeleton { this[skeletonSymbol].getWidget(name)?.show(); } + /** + * enable widget + * @param name + */ + enableWidget(name: string) { + this[skeletonSymbol].getWidget(name)?.enable?.(); + } + /** * 隐藏 widget * @param name @@ -65,6 +74,74 @@ export default class Skeleton { hideWidget(name: string) { this[skeletonSymbol].getWidget(name)?.hide(); } + + /** + * disable widget，不可点击 + * @param name + */ + disableWidget(name: string) { + this[skeletonSymbol].getWidget(name)?.disable?.(); + } + + /** + * 监听 panel 显示事件 + * @param listener + * @returns + */ + onShowPanel(listener: (...args: unknown[]) => void) { + const { editor } = this[skeletonSymbol]; + editor.on(SkeletonEvents.PANEL_SHOW, (name: any, panel: any) => { + // 不泄漏 skeleton + const { skeleton, ...restPanel } = panel; + listener(name, restPanel); + }); + return () => editor.off(SkeletonEvents.PANEL_SHOW, listener); + } + + /** + * 监听 panel 隐藏事件 + * @param listener + * @returns + */ + onHidePanel(listener: (...args: unknown[]) => void) { + const { editor } = this[skeletonSymbol]; + editor.on(SkeletonEvents.PANEL_HIDE, (name: any, panel: any) => { + // 不泄漏 skeleton + const { skeleton, ...restPanel } = panel; + listener(name, restPanel); + }); + return () => editor.off(SkeletonEvents.PANEL_HIDE, listener); + } + + /** + * 监听 widget 显示事件 + * @param listener + * @returns + */ + onShowWidget(listener: (...args: unknown[]) => void) { + const { editor } = this[skeletonSymbol]; + editor.on(SkeletonEvents.WIDGET_SHOW, (name: any, panel: any) => { + // 不泄漏 skeleton + const { skeleton, ...rest } = panel; + listener(name, rest); + }); + return () => editor.off(SkeletonEvents.WIDGET_SHOW, listener); + } + + /** + * 监听 widget 隐藏事件 + * @param listener + * @returns + */ + onHideWidget(listener: (...args: unknown[]) => void) { + const { editor } = this[skeletonSymbol]; + editor.on(SkeletonEvents.WIDGET_HIDE, (name: any, panel: any) => { + // 不泄漏 skeleton + const { skeleton, ...rest } = panel; + listener(name, rest); + }); + return () => editor.off(SkeletonEvents.WIDGET_HIDE, listener); + } } function normalizeArea(area: IWidgetConfigArea | undefined) { @@ -94,5 +171,7 @@ function normalizeArea(area: IWidgetConfigArea | undefined) { return 'leftFloatArea'; case 'stages': return 'stages'; + default: + throw new Error(`${area} not supported`); } }