diff --git a/deploy-space/static/index.html b/deploy-space/static/index.html index 1e79181e9..3b4cbddc2 100644 --- a/deploy-space/static/index.html +++ b/deploy-space/static/index.html @@ -15,9 +15,7 @@ - - - + - - + diff --git a/deploy-space/static/preview.html b/deploy-space/static/preview.html index e37a87391..1e79181e9 100644 --- a/deploy-space/static/preview.html +++ b/deploy-space/static/preview.html @@ -4,20 +4,80 @@ - LowCodeEngine Preview DEMO + LowCodeEngine Editor DEMO + - - + - + + + + + + + - +
+ + + + + + + + diff --git a/package.json b/package.json index c02fc675c..b3c803aea 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ ] }, "scripts": { - "build": "lerna run build --stream", + "build": "./scripts/build.sh", "clean": "rm -rf ./packages/*/lib ./packages/*/es ./packages/*/dist ./packages/*/build", "commit": "git-cz", "pub": "lerna publish --cd-version patch", @@ -48,5 +48,9 @@ }, "engines": { "node": ">=10.0.0" + }, + "tnpm": { + "mode": "yarn", + "lockfile": "enable" } } diff --git a/packages/code-generator/src/demo/simpleDemo.ts b/packages/code-generator/src/demo/simpleDemo.ts index cf124ceb9..2e1f28a76 100644 --- a/packages/code-generator/src/demo/simpleDemo.ts +++ b/packages/code-generator/src/demo/simpleDemo.ts @@ -58,7 +58,7 @@ const demoData: IProjectSchema = { componentsTree: [ { componentName: 'Page', - id: 'node$1', + id: 'node_1', meta: { title: '测试', router: '/', @@ -74,7 +74,7 @@ const demoData: IProjectSchema = { children: [ { componentName: 'Form', - id: 'node$2', + id: 'node_2', props: { labelCol: 4, style: {}, @@ -83,7 +83,7 @@ const demoData: IProjectSchema = { children: [ { componentName: 'Form.Item', - id: 'node$3', + id: 'node_3', props: { label: '姓名：', name: 'name', @@ -92,7 +92,7 @@ const demoData: IProjectSchema = { children: [ { componentName: 'Input', - id: 'node$4', + id: 'node_4', props: { placeholder: '请输入', size: 'medium', @@ -105,7 +105,7 @@ const demoData: IProjectSchema = { }, { componentName: 'Form.Item', - id: 'node$5', + id: 'node_5', props: { label: '年龄：', name: 'age', @@ -114,7 +114,7 @@ const demoData: IProjectSchema = { children: [ { componentName: 'NumberPicker', - id: 'node$6', + id: 'node_6', props: { size: 'medium', type: 'normal', @@ -124,7 +124,7 @@ const demoData: IProjectSchema = { }, { componentName: 'Form.Item', - id: 'node$7', + id: 'node_7', props: { label: '职业：', name: 'profession', @@ -132,7 +132,7 @@ const demoData: IProjectSchema = { children: [ { componentName: 'Select', - id: 'node$8', + id: 'node_8', props: { dataSource: [ { @@ -154,7 +154,7 @@ const demoData: IProjectSchema = { }, { componentName: 'Div', - id: 'node$9', + id: 'node_9', props: { style: { textAlign: 'center', @@ -163,12 +163,12 @@ const demoData: IProjectSchema = { children: [ { componentName: 'Button.Group', - id: 'node$a', + id: 'node_a', props: {}, children: [ { componentName: 'Button', - id: 'node$b', + id: 'node_b', props: { type: 'primary', style: { @@ -180,7 +180,7 @@ const demoData: IProjectSchema = { }, { componentName: 'Button', - id: 'node$d', + id: 'node_d', props: { type: 'normal', style: { diff --git a/packages/demo/CHANGELOG.md b/packages/demo/CHANGELOG.md index 11ff8ccc8..6d6ae33a7 100644 --- a/packages/demo/CHANGELOG.md +++ b/packages/demo/CHANGELOG.md @@ -3,6 +3,89 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.8.30](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.29...@ali/lowcode-demo@0.8.30) (2020-06-16) + + + + +**Note:** Version bump only for package @ali/lowcode-demo + + +## [0.8.29](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.28...@ali/lowcode-demo@0.8.29) (2020-06-15) + + +### Bug Fixes + +* style ([4694331](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/4694331)) + + + + + +## [0.8.28](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.27...@ali/lowcode-demo@0.8.28) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-demo + + +## [0.8.27](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.26...@ali/lowcode-demo@0.8.27) (2020-05-19) + + + + +**Note:** Version bump only for package @ali/lowcode-demo + + +## [0.8.26](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.25...@ali/lowcode-demo@0.8.26) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-demo + + +## [0.8.25](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.24...@ali/lowcode-demo@0.8.25) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-demo + + +## [0.8.24](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.23...@ali/lowcode-demo@0.8.24) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-demo + + +## [0.8.23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.22...@ali/lowcode-demo@0.8.23) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-demo + + +## [0.8.22](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.21...@ali/lowcode-demo@0.8.22) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-demo + + +## [0.8.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.20...@ali/lowcode-demo@0.8.21) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-demo + ## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.19...@ali/lowcode-demo@0.8.20) (2020-05-15) diff --git a/packages/demo/build.json b/packages/demo/build.json index 87aca0907..83cf581dd 100644 --- a/packages/demo/build.json +++ b/packages/demo/build.json @@ -1,6 +1,7 @@ { "entry": { - "index": "src/index.ts", + "index": "src/index", + "editor-preset-vision": "../editor-preset-vision/src/index.ts", "react-simulator-renderer": "../react-simulator-renderer/src/index.ts" }, "vendor": false, diff --git a/packages/demo/cloud-build.json b/packages/demo/cloud-build.json index 1333ee8de..934ab050f 100644 --- a/packages/demo/cloud-build.json +++ b/packages/demo/cloud-build.json @@ -7,9 +7,12 @@ "react": "window.React", "react-dom": "window.ReactDOM", "prop-types": "window.PropTypes", - "@ali/lowcode-editor-core": "window.LCECore", "@ali/visualengine": "window.VisualEngine", - "@ali/visualengine-utils": "window.VisualEngineUtils" + "@ali/visualengine-utils": "window.VisualEngineUtils", + "@ali/lowcode-editor-preset-general": "window.LowcodeEditor", + "@ali/lowcode-editor-core": "window.LowcodeEditor", + "@ali/lowcode-editor-skeleton": "window.LowcodeEditor", + "@ali/lowcode-designer": "window.LowcodeEditor" }, "minify": false, "sourcemap": true, diff --git a/packages/demo/package.json b/packages/demo/package.json index edd17d66f..b7fef79f9 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-demo", - "version": "0.8.20", + "version": "0.8.30", "private": true, "description": "低代码引擎 DEMO", "scripts": { @@ -9,21 +9,32 @@ }, "config": {}, "dependencies": { - "@ali/lowcode-editor-core": "^0.8.12", - "@ali/lowcode-editor-skeleton": "^0.8.17", - "@ali/lowcode-plugin-components-pane": "^0.8.13", - "@ali/lowcode-plugin-designer": "^0.9.11", - "@ali/lowcode-plugin-event-bind-dialog": "^0.8.12", - "@ali/lowcode-plugin-outline-pane": "^0.8.17", - "@ali/lowcode-plugin-sample-logo": "^0.8.11", - "@ali/lowcode-plugin-sample-preview": "^0.8.16", + "@ali/lowcode-editor-core": "^0.8.16", + "@ali/lowcode-editor-skeleton": "^0.8.26", + "@ali/lowcode-plugin-components-pane": "^0.8.23", + "@ali/lowcode-plugin-designer": "^0.9.20", + "@ali/lowcode-plugin-event-bind-dialog": "^0.8.16", + "@ali/lowcode-plugin-outline-pane": "^0.8.26", + "@ali/lowcode-plugin-sample-logo": "^0.8.15", + "@ali/lowcode-plugin-sample-preview": "^0.8.25", "@ali/lowcode-plugin-settings-pane": "^0.8.8", - "@ali/lowcode-plugin-undo-redo": "^0.8.16", - "@ali/lowcode-plugin-variable-bind-dialog": "^0.8.10", - "@ali/lowcode-plugin-zh-en": "^0.8.14", - "@ali/lowcode-react-renderer": "^0.8.8", + "@ali/lowcode-plugin-undo-redo": "^0.8.25", + "@ali/lowcode-plugin-variable-bind-dialog": "^0.8.14", + "@ali/lowcode-plugin-zh-en": "^0.8.18", + "@ali/lowcode-react-renderer": "^0.8.0", "@ali/lowcode-runtime": "^0.8.13", - "@ali/lowcode-utils": "^0.8.4", + "@ali/lowcode-utils": "^0.8.7", + "@ali/ve-action-pane": "^4.7.0-beta.0", + "@ali/ve-datapool-pane": "^6.4.3", + "@ali/ve-history-pane": "4.0.0", + "@ali/ve-i18n-manage-pane": "^4.3.0", + "@ali/ve-i18n-pane": "^4.0.0-beta.0", + "@ali/ve-page-history": "1.2.0", + "@ali/ve-page-history-pane": "^5.0.0-beta.0", + "@ali/ve-trunk-pane": "^5.1.0-beta.14", + "@ali/vs-variable-setter": "^3.1.0", + "@ali/vu-function-parser": "^2.5.0-beta.0", + "@ali/vu-legao-design-fetch-context": "^1.0.3", "@alifd/next": "^1.19.12", "@alife/theme-lowcode-light": "^0.1.0", "compare-versions": "^3.0.1", diff --git a/packages/demo/public/index.html b/packages/demo/public/index.html index b359afbf4..e219c8bad 100644 --- a/packages/demo/public/index.html +++ b/packages/demo/public/index.html @@ -12,13 +12,63 @@ + + + -
+ + diff --git a/packages/demo/public/legao-assets.json b/packages/demo/public/legao-assets.json index d3feb0cc8..778f0c4fd 100644 --- a/packages/demo/public/legao-assets.json +++ b/packages/demo/public/legao-assets.json @@ -97,22 +97,6 @@ "packageName": "@ali/vc-div", "version": "1.0.1" }, - { - "prototypeConfigsUrl": [ - "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-page/1.0.5/proto.899e4b1.css", - "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-page/1.0.5/proto.451d5fc.js" - ], - "prototypeViewsUrl": null, - "alias": "", - "library": "AliVcPage", - "urls": [ - "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-page/1.0.5/view.3fdc557.css", - "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-page/1.0.5/view.ae881b7.js" - ], - "components": null, - "packageName": "@ali/vc-page", - "version": "1.0.5" - }, { "prototypeConfigsUrl": [ "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.1.12/proto.611ab53.css", diff --git a/packages/demo/public/schema.json b/packages/demo/public/schema.json index 591992766..de5926577 100644 --- a/packages/demo/public/schema.json +++ b/packages/demo/public/schema.json @@ -1,13 +1,6 @@ { "componentName": "Page", - "fileName": "test", - "dataSource": { - "list": [], - "online": [] - }, - "state": { - "text": "outter" - }, + "id": "node_1", "props": { "ref": "outterView", "autoLoading": true, @@ -15,5 +8,884 @@ "padding": 20 } }, - "children": [] + "fileName": "test", + "dataSource": { + "list": [] + }, + "state": { + "text": "outter", + "abc": [ + 1, + 2, + 3 + ] + }, + "children": [ + { + "componentName": "Steps", + "id": "node_1i", + "props": { + "dataSource": [ + { + "title": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "报名" + }, + "status": "", + "content": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "Open the refrigerator door" + }, + "customSwitcher": false + }, + { + "title": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "信息收集" + }, + "status": "", + "content": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "Put the elephant in the refrigerator" + }, + "customSwitcher": false + }, + { + "title": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "审核" + }, + "status": "", + "content": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "Close the refrigerator door" + }, + "customSwitcher": false + } + ], + "current": 1, + "shape": "circle", + "direction": "horizontal", + "labelPlacement": "vertical", + "readOnly": false, + "animation": true, + "__style__": {}, + "fieldId": "steps_kadcb0ov" + } + }, + { + "componentName": "Title", + "id": "node_b", + "props": { + "text": "请填写以下人员信息表单", + "type": "primary", + "noDecoration": false, + "__style__": {}, + "fieldId": "title_kadcb0nw" + } + }, + { + "componentName": "Paragraph", + "id": "node_e", + "props": { + "content": "人最宝贵的是生命。它给予我们只有一次。人的一生应当这样度过：当他回首往事时不因虚度年华而悔恨，也不因碌碌无为而羞耻。这样在他临死的时侯就能够说:我已把我整个的生命和全部精力都献给最壮丽的事业——为人类的解放而斗争。", + "size": "medium", + "type": "long", + "__style__": {}, + "fieldId": "paragraph_kadcb0nz" + } + }, + { + "componentName": "ColumnsLayout", + "id": "node_r", + "props": { + "layout": "6:6", + "columnGap": "16px", + "rowGap": "16px", + "__style__": { + "marginTop": "24px" + }, + "fieldId": "columnsLayout_kadcb0ob" + }, + "children": [ + { + "componentName": "Column", + "id": "node_s", + "props": { + "fieldId": "column_kadcb0o9", + "__style__": {} + }, + "children": [ + { + "componentName": "Card", + "id": "node_n", + "props": { + "title": "基本信息", + "subTitle": { + "type": "i18n", + "zh_CN": "", + "en_US": "" + }, + "extra": { + "type": "JSSlot", + "params": null, + "value": [ + { + "componentName": "Icon", + "id": "node_q", + "props": { + "type": { + "useType": true, + "baseType": "smile", + "otherType": "smile" + }, + "size": "medium", + "__style__": {}, + "fieldId": "icon_kadcb0o8" + } + } + ] + }, + "showTitleBullet": true, + "showHeadDivider": true, + "dividerNoInset": false, + "contentHeight": "", + "__style__": {}, + "fieldId": "card_kadcb0o7" + }, + "children": [ + { + "componentName": "CardContent", + "id": "node_o", + "props": {}, + "children": [ + { + "componentName": "Form", + "id": "node_f", + "props": { + "labelAlign": "top", + "size": "medium", + "behavior": "NORMAL", + "autoValidate": true, + "scrollToFirstError": true, + "autoUnmount": true, + "fieldOptions": {}, + "__style__": { + "marginTop": "24px" + }, + "fieldId": "form_kadcb0o5" + }, + "children": [ + { + "componentName": "TextField", + "id": "node_g", + "props": { + "__category__": "form", + "__useMediator": "value", + "label": "姓名", + "value": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "labelAlign": "top", + "labelColSpan": 4, + "labelColOffset": 0, + "wrapperColSpan": 0, + "wrapperColOffset": 0, + "labelTextAlign": "right", + "placeholder": { + "type": "i18n", + "use": "zh_CN", + "en_US": "Please enter", + "zh_CN": "请输入" + }, + "tips": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "size": "medium", + "behavior": "NORMAL", + "labelTipsTypes": "none", + "labelTipsIcon": "", + "labelTipsText": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "htmlType": "input", + "state": "", + "rows": 4, + "autoHeight": false, + "hasClear": false, + "trim": false, + "autoFocus": false, + "addonBefore": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "addonAfter": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "validation": [], + "hasLimitHint": false, + "cutString": false, + "__style__": {}, + "fieldId": "textField_kadcb0o0" + } + }, + { + "componentName": "RadioField", + "id": "node_14", + "props": { + "__category__": "form", + "__useMediator": "value", + "label": "性别", + "value": "", + "labelAlign": "top", + "labelColSpan": 4, + "labelColOffset": 0, + "wrapperColSpan": 0, + "wrapperColOffset": 0, + "labelTextAlign": "right", + "tips": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "size": "medium", + "behavior": "NORMAL", + "labelTipsTypes": "none", + "labelTipsIcon": "", + "labelTipsText": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "shape": "default", + "itemDirection": "hoz", + "dataSource": [ + { + "text": { + "zh_CN": "选项一", + "en_US": "Option 1", + "type": "i18n", + "use": "zh_CN" + }, + "value": "1", + "disable": false + }, + { + "text": { + "zh_CN": "选项二", + "en_US": "Option 2", + "type": "i18n", + "use": "zh_CN" + }, + "value": "2", + "disable": false + }, + { + "text": { + "zh_CN": "选项三", + "en_US": "Option 3", + "type": "i18n", + "use": "zh_CN" + }, + "value": "3", + "disable": true + } + ], + "validation": [], + "__style__": {}, + "fieldId": "radioField_kadcb0ok" + } + }, + { + "componentName": "SelectField", + "id": "node_h", + "props": { + "__category__": "form", + "__useMediator": "value", + "label": "学校", + "value": "", + "labelAlign": "top", + "labelColSpan": 4, + "labelColOffset": 0, + "wrapperColSpan": 0, + "wrapperColOffset": 0, + "labelTextAlign": "right", + "placeholder": { + "type": "i18n", + "use": "zh_CN", + "en_US": "please select", + "zh_CN": "请选择" + }, + "tips": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "size": "medium", + "behavior": "NORMAL", + "labelTipsTypes": "none", + "labelTipsIcon": "", + "labelTipsText": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "mode": "single", + "hasClear": false, + "hasSelectAll": false, + "showSearch": false, + "filterLocal": true, + "dataSource": [ + { + "text": { + "zh_CN": "选项一", + "en_US": "Option 1", + "type": "i18n" + }, + "value": "1" + }, + { + "text": { + "zh_CN": "选项二", + "en_US": "Option 2", + "type": "i18n" + }, + "value": "2" + }, + { + "text": { + "zh_CN": "选项三", + "en_US": "Option 3", + "type": "i18n" + }, + "value": "3" + } + ], + "validation": [], + "notFoundContent": { + "type": "i18n", + "use": "zh_CN", + "en_US": null + }, + "hasArrow": true, + "hasBorder": true, + "autoWidth": true, + "searchDelay": 300, + "__style__": {}, + "fieldId": "select_kadcb0o1" + } + }, + { + "componentName": "Div", + "id": "node_i", + "props": { + "behavior": "NORMAL", + "__style__": {}, + "fieldId": "div_kadcb0o4" + }, + "children": [ + { + "componentName": "Button", + "id": "node_j", + "props": { + "content": { + "type": "i18n", + "en_US": "Ok", + "zh_CN": "提交" + }, + "type": "primary", + "size": "medium", + "behavior": "NORMAL", + "baseIcon": "", + "otherIcon": "", + "loading": false, + "triggerEventsWhenLoading": false, + "__style__": ":root {\n margin-right: 15px;\n}", + "fieldId": "button_kadcb0o2", + "onClick": { + "type": "JSExpression", + "value": "function onSubmit(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').submit(function(data, error) {\n if (data) {\n console.log(data);\n // 往后端提交数据，一般写法如下\n // this.dataSourceMap['xxx'].load(data).then(() => {\n // this.utils.toast({\n // type: 'success',\n // title: '提交成功'\n // });\n // });\n }\n });\n}", + "extType": "function", + "events": [ + { + "name": "onClick", + "params": {}, + "func": { + "type": "js", + "source": "function onSubmit(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').submit(function(data, error) {\n if (data) {\n console.log(data);\n // 往后端提交数据，一般写法如下\n // this.dataSourceMap['xxx'].load(data).then(() => {\n // this.utils.toast({\n // type: 'success',\n // title: '提交成功'\n // });\n // });\n }\n });\n}", + "compiled": "function onSubmit(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').submit(function(data, error) {\n if (data) {\n console.log(data);\n // 往后端提交数据，一般写法如下\n // this.dataSourceMap['xxx'].load(data).then(() => {\n // this.utils.toast({\n // type: 'success',\n // title: '提交成功'\n // });\n // });\n }\n });\n}" + } + } + ] + } + } + }, + { + "componentName": "Button", + "id": "node_k", + "props": { + "content": { + "type": "i18n", + "en_US": "Reset", + "zh_CN": "重置" + }, + "type": "secondary", + "size": "medium", + "behavior": "NORMAL", + "baseIcon": "", + "otherIcon": "", + "loading": false, + "triggerEventsWhenLoading": false, + "__style__": {}, + "fieldId": "button_kadcb0o3", + "onClick": { + "type": "JSExpression", + "value": "function onReset(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').reset();\n}", + "extType": "function", + "events": [ + { + "name": "onClick", + "params": {}, + "func": { + "type": "js", + "source": "function onReset(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').reset();\n}", + "compiled": "function onReset(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').reset();\n}" + } + } + ] + } + } + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "componentName": "Column", + "id": "node_t", + "props": { + "fieldId": "column_kadcb0oa", + "__style__": {} + }, + "children": [ + { + "componentName": "Card", + "id": "node_u", + "props": { + "title": { + "type": "JSSlot", + "params": null, + "value": [ + { + "componentName": "Icon", + "id": "node_18", + "props": { + "type": { + "useType": true, + "baseType": "smile", + "otherType": "smile" + }, + "size": "medium", + "__style__": {}, + "fieldId": "icon_kadcb0on" + } + }, + { + "componentName": "Link", + "id": "node_19", + "props": { + "content": { + "type": "i18n", + "use": "zh_CN", + "en_US": "link text", + "zh_CN": "扩展信息" + }, + "textOverflow": false, + "link": { + "type": "page", + "page": null, + "router": { + "type": "JSExpression", + "value": "this.utils.router" + } + }, + "__style__": {}, + "fieldId": "link_kadcb0oo" + } + } + ] + }, + "subTitle": { + "type": "i18n", + "zh_CN": "", + "en_US": "" + }, + "extra": { + "type": "JSSlot", + "params": null, + "value": [ + { + "componentName": "Icon", + "id": "node_1a", + "props": { + "type": { + "useType": true, + "baseType": "smile", + "otherType": "smile" + }, + "size": "xl", + "__style__": {}, + "fieldId": "icon_kadcb0op" + } + } + ] + }, + "showTitleBullet": true, + "showHeadDivider": true, + "dividerNoInset": false, + "contentHeight": "", + "__style__": {}, + "fieldId": "card_kadcb0oc" + }, + "children": [ + { + "componentName": "CardContent", + "id": "node_v", + "props": {}, + "children": [ + { + "componentName": "Form", + "id": "node_x", + "props": { + "labelAlign": "top", + "size": "medium", + "behavior": "NORMAL", + "autoValidate": true, + "scrollToFirstError": true, + "autoUnmount": true, + "fieldOptions": {}, + "__style__": { + "marginTop": "24px" + }, + "fieldId": "form_kadcb0oi" + }, + "children": [ + { + "componentName": "TextField", + "id": "node_y", + "props": { + "__category__": "form", + "__useMediator": "value", + "label": "职位", + "value": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "labelAlign": "top", + "labelColSpan": 4, + "labelColOffset": 0, + "wrapperColSpan": 0, + "wrapperColOffset": 0, + "labelTextAlign": "right", + "placeholder": { + "type": "i18n", + "use": "zh_CN", + "en_US": "Please enter", + "zh_CN": "请输入" + }, + "tips": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "size": "medium", + "behavior": "NORMAL", + "labelTipsTypes": "none", + "labelTipsIcon": "", + "labelTipsText": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "htmlType": "input", + "state": "", + "rows": 4, + "autoHeight": false, + "hasClear": false, + "trim": false, + "autoFocus": false, + "addonBefore": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "addonAfter": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "validation": [], + "hasLimitHint": false, + "cutString": false, + "__style__": {}, + "fieldId": "textField_kadcb0od" + } + }, + { + "componentName": "DateField", + "id": "node_15", + "props": { + "__category__": "form", + "__useMediator": "value", + "label": "入职时间", + "value": "", + "labelAlign": "top", + "labelColSpan": 4, + "labelColOffset": 0, + "wrapperColSpan": 0, + "wrapperColOffset": 0, + "labelTextAlign": "right", + "placeholder": { + "type": "i18n", + "use": "zh_CN", + "en_US": "please select", + "zh_CN": "请选择" + }, + "tips": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "size": "medium", + "behavior": "NORMAL", + "format": "YYYY-MM-DD", + "returnType": "timestamp", + "labelTipsTypes": "none", + "labelTipsIcon": "", + "labelTipsText": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "hasClear": true, + "resetTime": false, + "disabledDate": false, + "validation": [], + "__style__": {}, + "fieldId": "dateField_kadcb0ol" + } + }, + { + "componentName": "SelectField", + "id": "node_z", + "props": { + "__category__": "form", + "__useMediator": "value", + "label": "下拉选择", + "value": "", + "labelAlign": "top", + "labelColSpan": 4, + "labelColOffset": 0, + "wrapperColSpan": 0, + "wrapperColOffset": 0, + "labelTextAlign": "right", + "placeholder": { + "type": "i18n", + "use": "zh_CN", + "en_US": "please select", + "zh_CN": "请选择" + }, + "tips": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "size": "medium", + "behavior": "NORMAL", + "labelTipsTypes": "none", + "labelTipsIcon": "", + "labelTipsText": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "mode": "single", + "hasClear": false, + "hasSelectAll": false, + "showSearch": false, + "filterLocal": true, + "dataSource": [ + { + "text": { + "zh_CN": "选项一", + "en_US": "Option 1", + "type": "i18n" + }, + "value": "1" + }, + { + "text": { + "zh_CN": "选项二", + "en_US": "Option 2", + "type": "i18n" + }, + "value": "2" + }, + { + "text": { + "zh_CN": "选项三", + "en_US": "Option 3", + "type": "i18n" + }, + "value": "3" + } + ], + "validation": [], + "notFoundContent": { + "type": "i18n", + "use": "zh_CN", + "en_US": null + }, + "hasArrow": true, + "hasBorder": true, + "autoWidth": true, + "searchDelay": 300, + "__style__": {}, + "fieldId": "select_kadcb0oe" + } + }, + { + "componentName": "Div", + "id": "node_10", + "props": { + "behavior": "NORMAL", + "__style__": {}, + "fieldId": "div_kadcb0oh" + }, + "children": [ + { + "componentName": "Button", + "id": "node_11", + "props": { + "content": { + "type": "i18n", + "en_US": "Ok", + "zh_CN": "提交" + }, + "type": "primary", + "size": "medium", + "behavior": "NORMAL", + "baseIcon": "", + "otherIcon": "", + "loading": false, + "triggerEventsWhenLoading": false, + "__style__": ":root {\n margin-right: 15px;\n}", + "fieldId": "button_kadcb0of", + "onClick": { + "type": "JSExpression", + "value": "function onSubmit(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').submit(function(data, error) {\n if (data) {\n console.log(data);\n // 往后端提交数据，一般写法如下\n // this.dataSourceMap['xxx'].load(data).then(() => {\n // this.utils.toast({\n // type: 'success',\n // title: '提交成功'\n // });\n // });\n }\n });\n}", + "extType": "function", + "events": [ + { + "name": "onClick", + "params": {}, + "func": { + "type": "js", + "source": "function onSubmit(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').submit(function(data, error) {\n if (data) {\n console.log(data);\n // 往后端提交数据，一般写法如下\n // this.dataSourceMap['xxx'].load(data).then(() => {\n // this.utils.toast({\n // type: 'success',\n // title: '提交成功'\n // });\n // });\n }\n });\n}", + "compiled": "function onSubmit(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').submit(function(data, error) {\n if (data) {\n console.log(data);\n // 往后端提交数据，一般写法如下\n // this.dataSourceMap['xxx'].load(data).then(() => {\n // this.utils.toast({\n // type: 'success',\n // title: '提交成功'\n // });\n // });\n }\n });\n}" + } + } + ] + } + } + }, + { + "componentName": "Button", + "id": "node_12", + "props": { + "content": { + "type": "i18n", + "en_US": "Reset", + "zh_CN": "重置" + }, + "type": "secondary", + "size": "medium", + "behavior": "NORMAL", + "baseIcon": "", + "otherIcon": "", + "loading": false, + "triggerEventsWhenLoading": false, + "__style__": {}, + "fieldId": "button_kadcb0og", + "onClick": { + "type": "JSExpression", + "value": "function onReset(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').reset();\n}", + "extType": "function", + "events": [ + { + "name": "onClick", + "params": {}, + "func": { + "type": "js", + "source": "function onReset(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').reset();\n}", + "compiled": "function onReset(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').reset();\n}" + } + } + ] + } + } + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] } diff --git a/packages/demo/src/index.ts b/packages/demo/src/index.ts index eae3b122e..a59aa122c 100644 --- a/packages/demo/src/index.ts +++ b/packages/demo/src/index.ts @@ -1 +1 @@ -import './editor'; +import './vision'; diff --git a/packages/demo/src/vision/index.ts b/packages/demo/src/vision/index.ts new file mode 100644 index 000000000..3916b8233 --- /dev/null +++ b/packages/demo/src/vision/index.ts @@ -0,0 +1,517 @@ +/* eslint-disable */ +import { createElement } from 'react'; +import { Button } from '@alifd/next'; +import Engine, { Panes, Prototype } from '@ali/visualengine'; +import { ActionUtil as actionUtil } from '@ali/visualengine-utils'; +import getTrunkPane from '@ali/ve-trunk-pane'; +import DatapoolPane from '@ali/ve-datapool-pane'; +import PageHistoryManager from '@ali/ve-page-history'; +import HistoryPane from '@ali/ve-history-pane'; +import PageHistoryPane from '@ali/ve-page-history-pane'; +// import I18nPane from '@ali/ve-i18n-pane'; +import I18nManagePane from '@ali/ve-i18n-manage-pane'; +import ActionPane from '@ali/ve-action-pane'; +import SourceEditor from '@ali/lowcode-plugin-source-editor'; +import fetchContext from '@ali/vu-legao-design-fetch-context'; +import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog'; +import loadUrls from './loader'; +import { upgradeAssetsBundle } from './upgrade-assets'; +import { isCSSUrl } from '@ali/lowcode-utils'; +import VariableSetter from '@ali/vs-variable-setter'; +import _isArray from "lodash/isArray"; +import _isObject from "lodash/isObject"; +import _get from 'lodash/get'; +import funcParser from '@ali/vu-function-parser'; +import { + NumberSetter, + BoolSetter, + ChoiceSetter, + CodeSetter, + ColorSetter, + DateSetter, + I18nSetter, + JsonSetter, + ListSetter, + SelectSetter, + OptionsSetter, + TextSetter, + ValidationSetter, + ActionSetter, +} from '@ali/visualengine-utils'; + +const { editor, skeleton, context, HOOKS, Trunk } = Engine; + +Trunk.registerSetter('Input', TextSetter); +Trunk.registerSetter('StringSetter', TextSetter); +Trunk.registerSetter('TextArea', TextSetter); +Trunk.registerSetter('Object', JsonSetter); +Trunk.registerSetter('Function', ActionSetter); +Trunk.registerSetter('Node', CodeSetter); +Trunk.registerSetter('Mixin', CodeSetter); +Trunk.registerSetter('Expression', CodeSetter); +Trunk.registerSetter('List', ListSetter); +Trunk.registerSetter('Switch', BoolSetter); +Trunk.registerSetter('Number', NumberSetter); +Trunk.registerSetter('Select', SelectSetter); + +Trunk.registerSetter('ActionSetter', ActionSetter); +Trunk.registerSetter('BoolSetter', BoolSetter); +Trunk.registerSetter('ChoiceSetter', ChoiceSetter); +Trunk.registerSetter('CodeSetter', CodeSetter); +Trunk.registerSetter('ColorSetter', ColorSetter); +Trunk.registerSetter('DateSetter', DateSetter); +Trunk.registerSetter('JsonSetter', JsonSetter); +Trunk.registerSetter('ListSetter', ListSetter); +Trunk.registerSetter('SelectSetter', SelectSetter); +Trunk.registerSetter('OptionsSetter', OptionsSetter); +Trunk.registerSetter('TextSetter', TextSetter); +Trunk.registerSetter('NumberSetter', NumberSetter); +Trunk.registerSetter('ValidationSetter', ValidationSetter); + +// 需要额外覆盖配置的 setters + +function wrapSetter(component: any, title: any, initialValueWrapper: any) { + return { + component, + title, + recommend: true, + initialValue: initialValueWrapper ? (field: any) => { + let defaultValueFromSetter; + if (component.initial) { + defaultValueFromSetter = component.initial.call(field, field.getValue()); + } + const defaultValue = initialValueWrapper(defaultValueFromSetter); + return defaultValue; + } : undefined, + } +} + +Trunk.registerSetter('I18nSetter', wrapSetter( + I18nSetter, + { type: 'i18n', 'zh-CN': '国际化输入', 'en-US': 'International Input' }, + (defaultValue: any) => { + if (defaultValue[defaultValue.use] && typeof defaultValue[defaultValue.use] !== 'string') { + defaultValue[defaultValue.use] = null; + } + return defaultValue; + } +)); + +context.use(HOOKS.VE_SETTING_FIELD_VARIABLE_SETTER, VariableSetter); + +const externals = ['react', 'react-dom', 'prop-types', 'react-router', 'react-router-dom', '@ali/recore']; + +async function loadAssets() { + const legaoAssets = await editor.utils.get('./legao-assets.json'); + + const assets = upgradeAssetsBundle(legaoAssets); + + if (assets.packages) { + assets.packages.forEach((item: any) => { + if (item.package && externals.indexOf(item.package) > -1) { + item.urls = null; + } + }); + } + + if (assets['x-prototypes']) { + const tasks: Array> = []; + const prototypeStyles: string[] = []; + assets['x-prototypes'].forEach((pkg: any) => { + if (pkg?.urls) { + const urls = Array.isArray(pkg.urls) ? pkg.urls : [pkg.urls]; + urls.forEach((url: string) => { + if (isCSSUrl(url)) { + prototypeStyles.push(url); + } + }); + tasks.push(loadUrls(urls)); + } + }); + if (prototypeStyles.length > 0) { + assets.packages.push({ + library: '_prototypesStyle', + package: '_prototypes-style', + urls: prototypeStyles, + }); + } + await Promise.all(tasks); + // proccess snippets + } + + editor.set('legao-assets', legaoAssets); + editor.set('assets', assets); +} + +async function loadSchema() { + const schema = await editor.utils.get('./schema.json'); + editor.set('schema', schema); +} + +// demo +function initDemoPanes() { + skeleton.add({ + name: 'eventBindDialog', + type: 'Widget', + content: EventBindDialog, + }); + + // skeleton.add({ + // area: 'left', + // name: 'sourceEditor', + // type: "PanelDock", + // content: SourceEditor, + // props: { + // align: undefined, + // description: "动作面板", + // onDestroy: undefined, + // icon: 'set', + // onInit: undefined + // }, + // panelProps:{ + // height: 300, + // help: undefined, + // hideTitleBar: true, + // maxHeight: 800, + // maxWidth: 1200, + // title: "动作面板", + // width: 600 + // } + + // }); + + // skeleton.add({ + // area: 'leftArea', + // name: 'icon1', + // type: 'PanelDock', + // props: { + // align: 'bottom', + // icon: 'set', + // description: '设置' + // }, + // }); + + + skeleton.add({ + area: 'leftArea', + name: 'icon2', + type: 'Dock', + props: { + align: 'bottom', + icon: 'help', + description: '帮助' + }, + }); + + skeleton.add({ + area: 'topArea', + type: 'Dock', + name: 'publish', + props: { + align: 'right', + }, + content: createElement(Button, { + size: 'small', + type: 'secondary', + children: '发布', + }), + }); + + + skeleton.add({ + area: 'topArea', + type: 'Dock', + name: 'save', + props: { + align: 'right', + }, + content: createElement(Button, { + size: 'small', + type: 'primary', + children: '保存', + }), + }); + // skeleton.add({ + // area: 'topArea', + // type: 'Dock', + // name: 'preview4', + // props: { + // align: 'center', + // }, + // content: createElement('img', { + // src: 'https://img.alicdn.com/tfs/TB1WW.VC.z1gK0jSZLeXXb9kVXa-486-64.png', + // style: { + // height: 32, + // }, + // }), + // }); + skeleton.add({ + area: 'topArea', + type: 'Dock', + name: 'preview1', + props: { + align: 'left', + }, + content: createElement('img', { + src: 'https://img.alicdn.com/tfs/TB1zqBfDlr0gK0jSZFnXXbRRXXa-440-64.png', + style: { + height: 32, + }, + }), + }); +} + +async function initTrunkPane() { + const assets = await editor.onceGot('legao-assets'); + const config = { + disableLowCodeComponent: true, + disableComponentStore: true, + app: { + getAssetsData() { + return assets; + // return data; + }, + }, + }; + const TrunkPane = getTrunkPane(config); + Panes.add(TrunkPane); +} + +// 数据源面板 +function initDataPoolPane() { + const dpConfigs = {}; + + if (!dpConfigs) { + return; + } + + fetchContext.create('DataPoolPaneAPI', { + saveGlobalConfig: { + url: 'query/appConfig/saveGlobalConfig.json', + method: 'POST', + }, + saveOrUpdateAppDataPool: { + url: 'query/appDataPool/saveOrUpdateAppDataPool.json', + method: 'POST', + }, + batchSaveOrUpdateAppDataPool: { + url: 'query/appDataPool/batchSaveOrUpdateAppDataPool.json', + method: 'POST' + }, + listAppDataPool: { + url: 'query/appDataPool/listAppDataPool.json', + method: 'GET', + }, + getAppDataPool: { + url: 'query/appDataPool/getAppDataPool.json', + method: 'POST', + }, + getEpaasApiInApp: { + url: 'query/formdesign/getEpaasApiInApp.jsonp', + method: 'GET', + }, + getFormListOrder: { + url: 'query/formdesign/getFormListOrder.json', + method: 'GET', + }, + // 实时修改 effectForm + operateAppDpBind: { + url: 'query/appDataPool/operateAppDpBind.json', + method: 'POST', + }, + // 校验全局数据源是否被其他页面修改 + checkAppDataPoolModified: { + url: 'query/appDataPool/checkAppDataPoolModified.json', + method: 'POST', + }, + }); + + const props = { + enableGateService: true, + enableGlobalFitConfig: true, + enableOneAPIService: true, + formUuid: 'xxx', + api: fetchContext.api.DataPoolPaneAPI, + }; + + Panes.add(DatapoolPane, { + props, + }); +} + +// 国际化面板 +function initI18nPane() { + fetchContext.create('I18nManagePaneAPI', { + // 绑定美杜莎 + bindMedusa: { + url: 'query/app/createMedusa.json', + }, + + // 解除绑定 + unbindMedusa: { + url: 'query/app/removeMedusa.json', + }, + + // 同步美杜莎 + syncMedusa: { + url: 'query/formi18n/syncI18n.json', + }, + }); + + Panes.add(I18nManagePane, { + props: { + enableMedusa: true, + api: fetchContext.api.I18nManagePaneAPI, + }, + }); +} + +// 动作面板 +function initActionPane() { + actionUtil.setActions({ + module: { + compiled: "'use strict';\n\nexports.__esModule = true;\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nexports.submit = submit;\nexports.onLoadData = onLoadData;\nexports.add = add;\nexports.edit = edit;\nexports.del = del;\nexports.search = search;\nexports.reset = reset;\n/**\n* 点击弹框的“确认”\n*/\nfunction submit() {\n var _this = this;\n\n this.$('form').submit(function (data, error) {\n if (data) {\n _this.dataSourceMap['table_submit'].load(data).then(function (res) {\n _this.utils.toast({\n type: 'success',\n title: '提交成功'\n });\n _this.$('dialog').hide();\n _this.dataSourceMap['table_list'].load();\n }).catch(function () {\n _this.utils.toast({\n type: 'error',\n title: '提交失败'\n });\n });\n }\n });\n}\n\n/**\n* tablePc onLoadData\n* @param currentPage 当前页码\n* @param pageSize 每页显示条数\n* @param searchKey 搜索关键字\n* @param orderColumn 排序列\n* @param orderType 排序方式（desc,asc）\n* @param from 触发来源（order,search,pagination）\n*/\nfunction onLoadData(currentPage, pageSize, searchKey, orderColumn, orderType, from) {\n var tableParams = {\n currentPage: from === 'search' ? 1 : currentPage,\n pageSize: pageSize,\n searchKey: searchKey,\n orderColumn: orderColumn,\n orderType: orderType\n };\n this.setState({ tableParams: tableParams });\n}\n\n// 点击新增\nfunction add() {\n this.setState({\n formData: null\n });\n this.$('dialog').show();\n}\n\n// 点击编辑\nfunction edit(rowData) {\n this.setState({\n formData: rowData\n });\n this.$('dialog').show();\n}\n\n// 点击删除\nfunction del(rowData) {\n var _this2 = this;\n\n this.utils.dialog({\n method: 'confirm',\n title: '提示',\n content: '确认删除该条目吗？',\n onOk: function onOk() {\n _this2.dataSourceMap['table_delete'].load({ id: rowData.id }).then(function () {\n _this2.utils.toast({\n type: 'success',\n title: '删除成功'\n });\n _this2.dataSourceMap['table_list'].load();\n }).catch(function () {\n _this2.utils.toast({\n type: 'error',\n title: '删除失败'\n });\n });\n }\n });\n}\n\n/**\n* button onClick\n*/\nfunction search() {\n var filterData = this.$('filter').getValue();\n this.setState({\n filterData: filterData,\n tableParams: _extends({}, this.state.tableParams, {\n time: Date.now(),\n currentPage: 1\n })\n });\n}\n\n/**\n* button onClick\n*/\nfunction reset() {\n this.$('filter').reset();\n this.setState({\n filterData: {},\n tableParams: _extends({}, this.state.tableParams, {\n time: Date.now(),\n currentPage: 1\n })\n });\n}", + source: "/**\n* 点击弹框的“确认”\n*/\nexport function submit() {\n this.$('form').submit((data, error) => {\n if (data) {\n this.dataSourceMap['table_submit'].load(data).then((res) => {\n this.utils.toast({\n type: 'success',\n title: '提交成功'\n });\n this.$('dialog').hide();\n this.dataSourceMap['table_list'].load();\n }).catch(()=>{\n this.utils.toast({\n type: 'error',\n title: '提交失败'\n });\n })\n }\n })\n}\n\n/**\n* tablePc onLoadData\n* @param currentPage 当前页码\n* @param pageSize 每页显示条数\n* @param searchKey 搜索关键字\n* @param orderColumn 排序列\n* @param orderType 排序方式（desc,asc）\n* @param from 触发来源（order,search,pagination）\n*/\nexport function onLoadData(currentPage, pageSize, searchKey, orderColumn, orderType, from) {\n const tableParams = {\n currentPage: from === 'search' ? 1 : currentPage,\n pageSize,\n searchKey,\n orderColumn,\n orderType\n };\n this.setState({ tableParams });\n}\n\n// 点击新增\nexport function add() {\n this.setState({\n formData: null,\n });\n this.$('dialog').show();\n}\n\n\n// 点击编辑\nexport function edit(rowData) {\n this.setState({\n formData: rowData\n });\n this.$('dialog').show();\n}\n\n// 点击删除\nexport function del(rowData) {\n this.utils.dialog({\n method: 'confirm',\n title: '提示',\n content: '确认删除该条目吗？',\n onOk: () => {\n this.dataSourceMap['table_delete'].load({ id: rowData.id }).then(() => {\n this.utils.toast({\n type: 'success',\n title: '删除成功'\n });\n this.dataSourceMap['table_list'].load();\n }).catch(()=>{\n this.utils.toast({\n type: 'error',\n title: '删除失败'\n });\n })\n }\n })\n}\n\n/**\n* button onClick\n*/\nexport function search(){\n const filterData = this.$('filter').getValue();\n this.setState({\n filterData,\n tableParams: {\n ...this.state.tableParams,\n time: Date.now(),\n currentPage: 1\n }\n });\n}\n\n/**\n* button onClick\n*/\nexport function reset(){\n this.$('filter').reset();\n this.setState({\n filterData: {},\n tableParams: {\n ...this.state.tableParams,\n time: Date.now(),\n currentPage: 1\n }\n });\n}" + }, + type: "FUNCTION", + list: [ + { + "id": "submit", + "title": "submit" + }, + { + "id": "onLoadData", + "title": "onLoadData" + }, + { + "id": "add", + "title": "add" + }, + { + "id": "edit", + "title": "edit" + }, + { + "id": "del", + "title": "del" + }, + { + "id": "search", + "title": "search" + }, + { + "id": "reset", + "title": "reset" + } + ] + }); + const props = { + enableGlobalJS: false, + enableVsCodeEdit: false, + enableHeaderTip: true, + }; + + + Panes.add(ActionPane, { + props, + }); +} +function replaceFuncProp(props?: any){ + const replaceProps: any = {}; + for (const name in props) { + const prop = props[name]; + if (!prop) { + continue; + } + if ((prop.compiled && prop.source) || prop.type === 'actionRef' || prop.type === 'js') { + replaceProps[name] = funcParser(prop); + } else if (_isObject(prop)) { + replaceFuncProp(prop); + } else if (_isArray(prop)) { + prop.map((propItem) => { + replaceFuncProp(propItem); + }); + } + } + + for (const name in replaceProps) { + props[name] = replaceProps[name]; + } + return props; +}; + +// 操作历史与页面历史面板 +function initHistoryPane() { + // let historyConfigs = {getDesignerModuleConfigs( + // this.designerConfigs, + // 'history', + // )}; + let historyConfigs = { + enableRedoAndUndo: true, + enablePageHistory: true, + };; + + const isDemoMode = false; + const isEnvSupportsHistoryPane = true; + const historyManager = PageHistoryManager.getManager(); + + console.log('PageHistoryManager', historyManager); + console.log('PageHistoryManager.onOpenPane', historyManager.onOpenPane); + // 历史撤销、重做以及唤起页面历史按钮 + if (typeof HistoryPane === 'function') { + Panes.add(HistoryPane, { + props : { + showPageHistory: + isEnvSupportsHistoryPane + // && this.app.isForm() + && !isDemoMode, + historyManager, + historyConfigs, + index: -940, + } + }); + } else { + Panes.add(HistoryPane, { + index: -940, + }); + } + + // 页面历史 UI 面板 + if ( + PageHistoryPane + && !isDemoMode + && isEnvSupportsHistoryPane + ) { + Panes.add(PageHistoryPane, { + props : { + historyManager: { + historyManager, + app: { + + } + }, + index: -940, + }, + }); + } +} + + +async function init() { + Engine.Env.setEnv('RE_VERSION', '7.2.0'); + Engine.Env.setSupportFeatures({ + subview: true, + i18nPane: true, + }); + Prototype.addGlobalPropsReducer(replaceFuncProp); + await loadAssets(); + await loadSchema(); + await initTrunkPane(); + // initDataPoolPane(); + // initI18nPane(); + // initActionPane(); + initDemoPanes(); + // initHistoryPane(); + Engine.init(); +} +init(); diff --git a/packages/demo/src/vision/loader.js b/packages/demo/src/vision/loader.js new file mode 100644 index 000000000..4f4bd1a24 --- /dev/null +++ b/packages/demo/src/vision/loader.js @@ -0,0 +1,172 @@ +/* eslint-disable */ +function getStylePoint(id, level) { + if (stylePointTable[id]) { + return stylePointTable[id]; + } + + const base = getBasePoint(); + + if (id === 'base') { + return base; + } + + const point = new StylePoint(id, level || 2000); + if (level >= base.level) { + let prev = base; + let next = prev.next; + while (next && level >= next.level) { + prev = next; + next = prev.next; + } + prev.next = point; + point.prev = prev; + if (next) { + point.next = next; + next.prev = point; + } + } else { + let next = base; + let prev = next.prev; + while (prev && level < prev.level) { + next = prev; + prev = next.prev; + } + next.prev = point; + point.next = next; + if (prev) { + point.prev = prev; + prev.next = point; + } + } + point.insert(); + stylePointTable[id] = point; + + return point; +} + +const stylePointTable = {}; + +function getBasePoint() { + if (!stylePointTable.base) { + stylePointTable.base = new StylePoint('base', 1000); + stylePointTable.base.insert(); + } + return stylePointTable.base; +} + +class StylePoint { + constructor(id, level, placeholder) { + this.lastContent = null; + this.lastUrl = null; + this.next = null; + this.prev = null; + this.id = id; + this.level = level; + if (placeholder) { + this.placeholder = placeholder; + } else { + this.placeholder = document.createTextNode(''); + } + } + + insert() { + if (this.next) { + document.head.insertBefore(this.placeholder, this.next.placeholder); + } else if (this.prev) { + document.head.insertBefore(this.placeholder, this.prev.placeholder.nextSibling); + } else { + document.head.appendChild(this.placeholder); + } + } + + applyText(content) { + if (this.lastContent === content) { + return; + } + this.lastContent = content; + this.lastUrl = undefined; + const element = document.createElement('style'); + element.setAttribute('type', 'text/css'); + element.setAttribute('data-for', this.id); + element.appendChild(document.createTextNode(content)); + document.head.insertBefore(element, this.placeholder); + document.head.removeChild(this.placeholder); + this.placeholder = element; + } + + applyUrl(url) { + if (this.lastUrl === url) { + return; + } + this.lastContent = undefined; + this.lastUrl = url; + const element = document.createElement('link'); + element.href = url; + element.rel = 'stylesheet'; + element.setAttribute('data-for', this.id); + document.head.insertBefore(element, this.placeholder); + document.head.removeChild(this.placeholder); + this.placeholder = element; + } +} + +function loadCSS(url) { + getStylePoint(url).applyUrl(url); +} + +function isCSSUrl(url) { + return /\.css$/.test(url); +} + +function loadScript(url) { + const node = document.createElement('script'); + + // node.setAttribute('crossorigin', 'anonymous'); + + node.onload = onload; + node.onerror = onload; + + const i = {}; + const promise = new Promise((resolve, reject) => { + i.resolve = resolve; + i.reject = reject; + }); + + function onload(e) { + node.onload = null; + node.onerror = null; + if (e.type === 'load') { + i.resolve(); + } else { + i.reject(); + } + // document.head.removeChild(node); + // node = null; + } + + // node.async = true; + node.src = url; + + document.head.appendChild(node); + + return promise; +} + +export default function loadUrls(urls) { + if (!urls || urls.length < 1) { + return Promise.resolve(); + } + + let promise = null; + urls.forEach((url) => { + if (isCSSUrl(url)) { + loadCSS(url); + } else if (!promise) { + promise = loadScript(url); + } else { + promise = promise.then(() => loadScript(url)); + } + }); + + return promise || Promise.resolve(); +} diff --git a/packages/demo/src/vision/module.d.ts b/packages/demo/src/vision/module.d.ts new file mode 100644 index 000000000..be53328de --- /dev/null +++ b/packages/demo/src/vision/module.d.ts @@ -0,0 +1,13 @@ +declare module '@ali/visualengine'; +declare module '@ali/visualengine-utils'; +declare module '@ali/ve-trunk-pane'; +declare module '@ali/vs-variable-setter'; +declare module '@ali/ve-datapool-pane'; +declare module '@ali/ve-history-pane'; +declare module '@ali/ve-page-history-pane'; +declare module '@ali/ve-page-history'; +declare module '@ali/ve-i18n-manage-pane'; +declare module '@ali/ve-action-pane'; +declare module '@ali/vu-legao-design-fetch-context'; +declare module "@ali/vu-function-parser"; +declare module "compare-versions"; diff --git a/packages/demo/src/vision/upgrade-assets.js b/packages/demo/src/vision/upgrade-assets.js new file mode 100644 index 000000000..3548aaac5 --- /dev/null +++ b/packages/demo/src/vision/upgrade-assets.js @@ -0,0 +1,68 @@ +/* eslint-disable */ +export function upgradeAssetsBundle(assets) { + const components = []; + const xPrototypes = []; + const componentList = []; + const packages = assets.externals.map(({ urls, library, name, version }) => { + return { + package: name, + version, + urls, + library, + }; + }); + assets.componentDependencies.forEach((item) => { + const componentName = item.alias || item.library; + const metadata = { + componentName, + npm: { + package: item.packageName, + library: item.library, + version: item.version, + destructuring: false, + }, + props: [], + }; + + if (item.prototypeConfigsUrl) { + xPrototypes.push({ + package: item.packageName, + urls: item.prototypeConfigsUrl, + }); + } else if (item.components) { + packages.push({ + urls: item.urls, + library: item.library, + package: item.packageName, + version: item.version, + }); + const meta = item.components[0]; + metadata.componentName = meta.componentName; + metadata.configure = meta.configure; + metadata.title = meta.title; + components.push(metadata); + // TODO: + if (meta.snippets) { + componentList.push({ + title: meta.category, + icon: '', + children: [ + { + title: 'json格式化展示', + icon: '', + snippets: meta.snippets, + }, + ], + }); + } + } + }); + + return { + "version": "1.0.0", + packages, + 'x-prototypes': xPrototypes, + components, + componentList + }; +} diff --git a/packages/designer/CHANGELOG.md b/packages/designer/CHANGELOG.md index d0ad33327..142f815fc 100644 --- a/packages/designer/CHANGELOG.md +++ b/packages/designer/CHANGELOG.md @@ -3,6 +3,98 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.9.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.19...@ali/lowcode-designer@0.9.20) (2020-06-16) + + + + +**Note:** Version bump only for package @ali/lowcode-designer + + +## [0.9.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.18...@ali/lowcode-designer@0.9.19) (2020-06-15) + + +### Bug Fixes + +* force schema ([6d0a8ff](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/6d0a8ff)) +* patch prototype ([f20bfaa](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/f20bfaa)) +* try get settingfield ([56f242f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/56f242f)) +* 禁止组件拉到 Page 的直接子节点, 以及替换 tab 组件 ([d93a291](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/d93a291)) + + +### Features + +* complete live-editing expr & i18n ([3ac08ba](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/3ac08ba)) +* get SettingField instead of SettingPropEntry for compatibility ([2787a12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/2787a12)) +* support prop.autorun ([c0a5235](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/c0a5235)) +* ve事件埋点 ([700e5b0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/700e5b0)) + + + + + +## [0.9.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.17...@ali/lowcode-designer@0.9.18) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-designer + + +## [0.9.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.16...@ali/lowcode-designer@0.9.17) (2020-05-19) + + + + +**Note:** Version bump only for package @ali/lowcode-designer + + +## [0.9.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.15...@ali/lowcode-designer@0.9.16) (2020-05-18) + + +### Bug Fixes + +* uniqueid ([8db52f0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/8db52f0)) + + + + + +## [0.9.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.14...@ali/lowcode-designer@0.9.15) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-designer + + +## [0.9.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.13...@ali/lowcode-designer@0.9.14) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-designer + + +## [0.9.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.12...@ali/lowcode-designer@0.9.13) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-designer + + +## [0.9.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.11...@ali/lowcode-designer@0.9.12) (2020-05-15) + + +### Features + +* change reducer stage ([c2e83c7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/c2e83c7)) + + + + ## [0.9.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.10...@ali/lowcode-designer@0.9.11) (2020-05-15) diff --git a/packages/designer/package.json b/packages/designer/package.json index ad1e0dce9..7e4cc07c3 100644 --- a/packages/designer/package.json +++ b/packages/designer/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-designer", - "version": "0.9.11", + "version": "0.9.20", "description": "Designer for Ali LowCode Engine", "main": "lib/index.js", "module": "es/index.js", @@ -15,9 +15,9 @@ }, "license": "MIT", "dependencies": { - "@ali/lowcode-editor-core": "^0.8.12", - "@ali/lowcode-types": "^0.8.3", - "@ali/lowcode-utils": "^0.8.4", + "@ali/lowcode-editor-core": "^0.8.16", + "@ali/lowcode-types": "^0.8.6", + "@ali/lowcode-utils": "^0.8.7", "classnames": "^2.2.6", "event": "^1.0.0", "react": "^16", diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx index b0036c5c4..a4947ad7d 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx @@ -1,6 +1,6 @@ import { Component, Fragment } from 'react'; import DragResizeEngine from './drag-resize-engine'; -import { observer, computed } from '@ali/lowcode-editor-core'; +import { observer, computed, globalContext, Editor } from '@ali/lowcode-editor-core'; import classNames from 'classnames'; import { SimulatorContext } from '../context'; import { BuiltinSimulatorHost } from '../host'; @@ -177,6 +177,17 @@ export class BoxResizingInstance extends Component<{ e.trigger = direction; metaData.experimental.callbacks.onResizeStart(e, node); } + + const editor = globalContext.get(Editor); + const npm = node?.componentMeta?.npm; + const selected = + [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || + node?.componentMeta?.componentName || + ''; + editor?.emit('designer.border.resize', { + selected, + layout: node?.parent?.getPropValue('layout') || '', + }); }; this.dragEngine.onResize(resize); diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx index 33303c2fc..7adce76b4 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx @@ -9,7 +9,7 @@ import { ComponentType, } from 'react'; import classNames from 'classnames'; -import { observer, computed, Tip } from '@ali/lowcode-editor-core'; +import { observer, computed, Tip, globalContext, Editor } from '@ali/lowcode-editor-core'; import { createIcon, isReactComponent } from '@ali/lowcode-utils'; import { ActionContentObject, isActionContentObject } from '@ali/lowcode-types'; import { BuiltinSimulatorHost } from '../host'; @@ -124,6 +124,16 @@ function createAction(content: ReactNode | ComponentType | ActionContentObj className="lc-borders-action" onClick={() => { action && action(node); + const editor = globalContext.get(Editor); + const npm = node?.componentMeta?.npm; + const target = + [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || + node?.componentMeta?.componentName || + ''; + editor?.emit('designer.border.action', { + name: key, + target, + }); }} > {icon && createIcon(icon)} diff --git a/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts b/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts index 11308316e..895084878 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts +++ b/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts @@ -1,6 +1,6 @@ -import * as EventEmitter from 'events'; -import { ISimulatorHost, isSimulatorHost } from '../../../../designer/src/simulator'; -import { Designer } from '../../../../designer/src/designer/designer'; +import { EventEmitter } from 'events'; +import { ISimulatorHost, isSimulatorHost } from '../../simulator'; +import { Designer, Point } from '../../designer'; import { setNativeSelection, cursor } from '@ali/lowcode-utils'; // import Cursor from './cursor'; // import Pages from './pages'; @@ -66,21 +66,37 @@ export default class DragResizeEngine { */ from(shell: Element, direction: string, boost: (e: MouseEvent) => any) { let node: any; - let startEvent: MouseEvent; + let startEvent: Point; if (!shell) { return () => {}; } const move = (e: MouseEvent) => { - const moveX = e.clientX - startEvent.clientX; - const moveY = e.clientY - startEvent.clientY; + const x = createResizeEvent(e); + const moveX = x.clientX - startEvent.clientX; + const moveY = x.clientY - startEvent.clientY; this.emitter.emit('resize', e, direction, node, moveX, moveY); }; const masterSensors = this.getMasterSensors(); + const createResizeEvent = (e: MouseEvent | DragEvent): Point => { + const evt: any = {}; + + const sourceDocument = e.view?.document; + + if (!sourceDocument || sourceDocument === document) { + return e; + } + const srcSim = masterSensors.find((sim) => sim.contentDocument === sourceDocument); + if (srcSim) { + return srcSim.viewport.toGlobalPoint(e); + } + return e; + }; + const over = (e: MouseEvent) => { const handleEvents = makeEventsHandler(e, masterSensors); handleEvents((doc) => { @@ -96,7 +112,7 @@ export default class DragResizeEngine { const mousedown = (e: MouseEvent) => { node = boost(e); - startEvent = e; + startEvent = createResizeEvent(e); const handleEvents = makeEventsHandler(e, masterSensors); handleEvents((doc) => { doc.addEventListener('mousemove', move, true); diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index 04aad80ad..a29ae0156 100644 --- a/packages/designer/src/builtin-simulator/host.ts +++ b/packages/designer/src/builtin-simulator/host.ts @@ -1,10 +1,10 @@ -import { obx, autorun, computed, getPublicPath, hotkey, focusTracker } from '@ali/lowcode-editor-core'; +import { obx, autorun, computed, getPublicPath, hotkey, focusTracker, globalContext, Editor } from '@ali/lowcode-editor-core'; import { ISimulatorHost, Component, NodeInstance, ComponentInstance } from '../simulator'; import Viewport from './viewport'; import { createSimulator } from './create-simulator'; import { Node, ParentalNode, DocumentModel, isNode, contains, isRootNode } from '../document'; import ResourceConsumer from './resource-consumer'; -import { AssetLevel, Asset, AssetList, assetBundle, assetItem, AssetType, isElement } from '@ali/lowcode-utils'; +import { AssetLevel, Asset, AssetList, assetBundle, assetItem, AssetType, isElement, isFormEvent } from '@ali/lowcode-utils'; import { DragObjectType, isShaken, @@ -22,7 +22,7 @@ import { CanvasPoint, } from '../designer'; import { parseMetadata } from './utils/parse-metadata'; -import { ComponentMetadata } from '@ali/lowcode-types'; +import { ComponentMetadata, ComponentSchema } from '@ali/lowcode-types'; import { BuiltinSimulatorRenderer } from './renderer'; import clipboard from '../designer/clipboard'; import { LiveEditing } from './live-editing/live-editing'; @@ -227,6 +227,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost { + // fix for popups close logic + document.dispatchEvent(new Event('mousedown')); if (this.liveEditing.editing) { return; } @@ -247,6 +250,9 @@ export class BuiltinSimulatorHost implements ISimulatorHost !!item).join('-') || + node?.componentMeta?.componentName || + ''; + editor?.emit('designer.builtinSimulator.select', { + selected, + }); } } }; @@ -303,9 +318,14 @@ export class BuiltinSimulatorHost implements ISimulatorHost { + // fix for popups close logic + document.dispatchEvent(new Event('click')); + const target = e.target as HTMLElement; + if (isFormEvent(e) || target?.closest('.next-input-group,.next-checkbox-group,.next-date-picker,.next-input,.next-month-picker,.next-number-picker,.next-radio-group,.next-range,.next-range-picker,.next-rating,.next-select,.next-switch,.next-time-picker,.next-upload,.next-year-picker,.next-breadcrumb-item,.next-calendar-header,.next-calendar-table')) { + e.preventDefault(); + e.stopPropagation(); + } // stop response document click event - // e.preventDefault(); - // e.stopPropagation(); // todo: catch link redirect }, true, @@ -400,6 +420,30 @@ export class BuiltinSimulatorHost implements ISimulatorHost { + const targetElement = e.target as HTMLElement; + const nodeInst = this.getNodeInstanceFromElement(targetElement); + if (!nodeInst) { + return; + } + const node = nodeInst.node || this.document.rootNode; + if (!node) { + return; + } + const editor = globalContext.get(Editor); + const npm = node?.componentMeta?.npm; + const selected = + [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || + node?.componentMeta?.componentName || + ''; + editor?.emit('desiger.builtinSimulator.contextmenu', { + selected, + }); + }); + } + /** * @see ISimulator */ @@ -437,6 +481,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost(); setInstance(id: string, instances: ComponentInstance[] | null) { if (instances == null) { @@ -739,7 +787,9 @@ export class BuiltinSimulatorHost implements ISimulatorHost !!item).join('-') || node?.componentMeta?.componentName || ''; + editor?.emit('designer.builinSimulator.LiveEditing', { + selected, + }); + let setterPropElement = getSetterPropElement(targetElement, rootElement); let propTarget = setterPropElement?.dataset.setterProp; let matched: (LiveTextEditingConfig & { propElement?: HTMLElement; }) | undefined | null; @@ -98,7 +106,6 @@ export class LiveEditing { const onSaveContent = matched?.onSaveContent || saveHandlers.find(item => item.condition(prop))?.onSaveContent || defaultSaveContent; setterPropElement.setAttribute('contenteditable', matched?.mode && matched.mode !== 'plaintext' ? 'true' : 'plaintext-only'); - setterPropElement.removeAttribute('for'); setterPropElement.classList.add('engine-live-editing'); // be sure setterPropElement.focus(); @@ -110,6 +117,13 @@ export class LiveEditing { const keydown = (e: KeyboardEvent) => { console.info(e.code); + switch (e.code) { + case 'Enter': + // TODO: check is richtext? + case 'Escape': + case 'Tab': + setterPropElement?.blur(); + } // esc // enter // tab @@ -134,9 +148,7 @@ export class LiveEditing { // TODO: upward testing for b/i/a html elements - // 非文本编辑 - // 国际化数据，改变当前 - // JSExpression, 改变 mock 或 弹出绑定变量 + } get editing() { diff --git a/packages/designer/src/builtin-simulator/node-selector/index.tsx b/packages/designer/src/builtin-simulator/node-selector/index.tsx index 5d1118294..554ef78e7 100644 --- a/packages/designer/src/builtin-simulator/node-selector/index.tsx +++ b/packages/designer/src/builtin-simulator/node-selector/index.tsx @@ -1,7 +1,7 @@ import { Overlay } from '@alifd/next'; import React from 'react'; +import { Title, globalContext, Editor } from '@ali/lowcode-editor-core'; import './index.less'; -import { Title } from '@ali/lowcode-editor-core'; import { Node, ParentalNode } from '@ali/lowcode-designer'; @@ -46,6 +46,16 @@ export default class InstanceNodeSelector extends React.Component () => { if (node && typeof node.select === 'function') { node.select(); + const editor = globalContext.get(Editor); + const npm = node?.componentMeta?.npm; + const selected = + [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || + node?.componentMeta?.componentName || + ''; + editor?.emit('designer.border.action', { + name: 'select', + selected, + }); } }; onMouseOver = (node: Node) => (_: any, flag = true) => { diff --git a/packages/designer/src/builtin-simulator/renderer.ts b/packages/designer/src/builtin-simulator/renderer.ts index 13db7bcd4..3994d67c4 100644 --- a/packages/designer/src/builtin-simulator/renderer.ts +++ b/packages/designer/src/builtin-simulator/renderer.ts @@ -1,7 +1,9 @@ import { ComponentInstance, NodeInstance, Component } from '../simulator'; +import { ComponentSchema } from '@ali/lowcode-types'; export interface BuiltinSimulatorRenderer { readonly isSimulatorRenderer: true; + createComponent(schema: ComponentSchema): Component | null; getComponent(componentName: string): Component; getComponentInstances(id: string): ComponentInstance[] | null; getClosestNodeInstance(from: ComponentInstance, nodeId?: string): NodeInstance | null; diff --git a/packages/designer/src/component-meta.ts b/packages/designer/src/component-meta.ts index 411a23ae3..b7aab79e2 100644 --- a/packages/designer/src/component-meta.ts +++ b/packages/designer/src/component-meta.ts @@ -13,7 +13,7 @@ import { FieldConfig, } from '@ali/lowcode-types'; import { computed } from '@ali/lowcode-editor-core'; -import { Node, ParentalNode } from './document'; +import { Node, ParentalNode, TransformStage } from './document'; import { Designer } from './designer'; import { intlNode } from './locale'; import { IconContainer } from './icons/container'; @@ -249,6 +249,9 @@ export class ComponentMeta { } return true; } + + // compatiable vision + prototype?: any; } export function isComponentMeta(obj: any): obj is ComponentMeta { @@ -379,8 +382,8 @@ const builtinComponentActions: ComponentAction[] = [ title: intlNode('copy'), action(node: Node) { // node.remove(); - const { document: doc, parent, schema, index } = node; - parent && doc.insertNode(parent, schema, index); + const { document: doc, parent, index } = node; + parent && doc.insertNode(parent, node, index, true); }, }, important: true, diff --git a/packages/designer/src/designer/builtin-hotkey.ts b/packages/designer/src/designer/builtin-hotkey.ts index 8e01bbfff..a30ee0ad4 100644 --- a/packages/designer/src/designer/builtin-hotkey.ts +++ b/packages/designer/src/designer/builtin-hotkey.ts @@ -106,7 +106,9 @@ hotkey.bind(['command+c', 'ctrl+c', 'command+x', 'ctrl+x'], (e, action) => { if (!selected || selected.length < 1) return; const componentsMap = {}; - const componentsTree = selected.map((item) => item.export(TransformStage.Save)); + const componentsTree = selected.map((item) => item.export(TransformStage.Clone)); + + // FIXME: clear node.id const data = { type: 'nodeSchema', componentsMap, componentsTree }; diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts index 066e2a481..c4c8f2050 100644 --- a/packages/designer/src/designer/designer.ts +++ b/packages/designer/src/designer/designer.ts @@ -67,10 +67,19 @@ export class Designer { this.project = new Project(this, props.defaultSchema); + let startTime: any; + let src = ''; this.dragon.onDragstart((e) => { + startTime = Date.now() / 1000; this.detecting.enable = false; const { dragObject } = e; if (isDragNodeObject(dragObject)) { + const node = dragObject.nodes[0]?.parent; + const npm = node?.componentMeta?.npm; + src = + [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || + node?.componentMeta?.componentName || + ''; if (dragObject.nodes.length === 1) { if (dragObject.nodes[0].parent) { // ensure current selecting @@ -111,6 +120,32 @@ export class Designer { if (nodes) { loc.document.selection.selectAll(nodes.map((o) => o.id)); setTimeout(() => this.activeTracker.track(nodes![0]), 10); + const endTime: any = Date.now() / 1000; + const parent = nodes[0]?.parent; + const npm = parent?.componentMeta?.npm; + const dest = + [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || + parent?.componentMeta?.componentName || + ''; + this.editor?.emit('designer.drag', { + time: (endTime - startTime).toFixed(2), + 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('&'), + align: loc?.detail?.near?.align || '', + pos: loc?.detail?.near?.pos || '', + src, + dest, + }); } } } @@ -228,7 +263,7 @@ export class Designer { touchOffsetObserver() { this.clearOobxList(true); - this.oobxList.forEach(item => item.compute()); + this.oobxList.forEach((item) => item.compute()); } createSettingEntry(editor: IEditor, nodes: Node[]) { @@ -392,11 +427,16 @@ export class Designer { @computed get componentsMap(): { [key: string]: NpmInfo | Component } { const maps: any = {}; this._componentMetasMap.forEach((config, key) => { - const view = config.getMetadata().experimental?.view; - if (view) { - maps[key] = view; - } else if (config.npm) { - maps[key] = config.npm; + const metaData = config.getMetadata(); + if (metaData.devMode === 'lowcode') { + maps[key] = this.currentDocument?.simulator?.createComponent(metaData.schema!); + } else { + const view = metaData.experimental?.view; + if (view) { + maps[key] = view; + } else if (config.npm) { + maps[key] = config.npm; + } } }); return maps; diff --git a/packages/designer/src/designer/dragon.ts b/packages/designer/src/designer/dragon.ts index feadee53e..8cb020ca4 100644 --- a/packages/designer/src/designer/dragon.ts +++ b/packages/designer/src/designer/dragon.ts @@ -159,20 +159,15 @@ function makeEventsHandler( const topDoc = window.top.document; const sourceDoc = boostEvent.view?.document || topDoc; // TODO: optimize this logic, reduce listener - // const boostPrevented = boostEvent.defaultPrevented; const docs = new Set(); - // if (boostPrevented || isDragEvent(boostEvent)) { docs.add(topDoc); - // } docs.add(sourceDoc); - // if (sourceDoc !== topDoc || isDragEvent(boostEvent)) { sensors.forEach((sim) => { const sdoc = sim.contentDocument; if (sdoc) { docs.add(sdoc); } }); - // } return (handle: (sdoc: Document) => void) => { docs.forEach((doc) => handle(doc)); diff --git a/packages/designer/src/designer/setting/setting-field.ts b/packages/designer/src/designer/setting/setting-field.ts index 7bc53370a..f15969b75 100644 --- a/packages/designer/src/designer/setting/setting-field.ts +++ b/packages/designer/src/designer/setting/setting-field.ts @@ -37,7 +37,7 @@ export class SettingField extends SettingPropEntry implements SettingEntry { this._expanded = value; } - constructor(readonly parent: SettingEntry, config: FieldConfig) { + constructor(readonly parent: SettingEntry, config: FieldConfig, settingFieldCollector?: (name: string | number, field: SettingField) => void) { super(parent, config.name, config.type); const { title, items, setter, extraProps, ...rest } = config; @@ -52,7 +52,9 @@ export class SettingField extends SettingPropEntry implements SettingEntry { // initial items if (this.type === 'group' && items) { - this.initItems(items); + this.initItems(items, settingFieldCollector); + } else if (settingFieldCollector && config.name) { + settingFieldCollector(config.name, this); } // compatiable old config @@ -65,12 +67,12 @@ export class SettingField extends SettingPropEntry implements SettingEntry { return this._items; } - private initItems(items: Array) { + private initItems(items: Array, settingFieldCollector?: { (name: string | number, field: SettingField): void; (name: string, field: SettingField): void; }) { this._items = items.map((item) => { if (isCustomView(item)) { return item; } - return new SettingField(this, item); + return new SettingField(this, item, settingFieldCollector); }); } @@ -88,8 +90,21 @@ export class SettingField extends SettingPropEntry implements SettingEntry { this.disposeItems(); } + private hotValue: any; + // ======= compatibles for vision ====== + setValue(val: any, isHotValue?: boolean, force?: boolean, extraOptions?: any) { + if (isHotValue) { + this.setHotValue(val, extraOptions); + return; + } + super.setValue(val, false, false, extraOptions); + } + getHotValue(): any { + if (this.hotValue) { + return this.hotValue; + } // avoid View modify let v = cloneDeep(this.getMockOrValue()); if (v == null) { @@ -98,7 +113,8 @@ export class SettingField extends SettingPropEntry implements SettingEntry { return this.transducer.toHot(v); } - setHotValue(data: any) { + setHotValue(data: any, options?: any) { + this.hotValue = data; const v = this.transducer.toNative(data); if (this.isUseVariable()) { const ov = this.getValue(); @@ -106,10 +122,16 @@ export class SettingField extends SettingPropEntry implements SettingEntry { type: 'JSExpression', value: ov.value, mock: v, - }); + }, false, false, options); } else { - this.setValue(v); + this.setValue(v, false, false, options); } + + // dirty fix list setter + if (Array.isArray(data) && data[0] && data[0].__sid__) { + return; + } + this.valueChange(); } diff --git a/packages/designer/src/designer/setting/setting-prop-entry.ts b/packages/designer/src/designer/setting/setting-prop-entry.ts index 21ce01b0a..d6988543e 100644 --- a/packages/designer/src/designer/setting/setting-prop-entry.ts +++ b/packages/designer/src/designer/setting/setting-prop-entry.ts @@ -144,12 +144,15 @@ export class SettingPropEntry implements SettingEntry { /** * 设置当前属性值 */ - setValue(val: any) { + setValue(val: any, isHotValue?: boolean, force?: boolean, extraOptions?: any) { if (this.type === 'field') { this.parent.setPropValue(this.name, val); } + if (!extraOptions) { + extraOptions = {}; + } const { setValue } = this.extraProps; - if (setValue) { + if (setValue && !extraOptions.disableMutator) { setValue(this, val); } } @@ -294,6 +297,9 @@ export class SettingPropEntry implements SettingEntry { isUseVariable() { return isJSExpression(this.getValue()); } + get useVariable() { + return this.isUseVariable(); + } getMockOrValue() { const v = this.getValue(); if (isJSExpression(v)) { diff --git a/packages/designer/src/designer/setting/setting-top-entry.ts b/packages/designer/src/designer/setting/setting-top-entry.ts index 9690b8dca..5c276afb2 100644 --- a/packages/designer/src/designer/setting/setting-top-entry.ts +++ b/packages/designer/src/designer/setting/setting-top-entry.ts @@ -2,7 +2,7 @@ import { EventEmitter } from 'events'; import { CustomView, isCustomView, IEditor } from '@ali/lowcode-types'; import { computed } from '@ali/lowcode-editor-core'; import { SettingEntry } from './setting-entry'; -import { SettingField } from './setting-field'; +import { SettingField, isSettingField } from './setting-field'; import { SettingPropEntry } from './setting-prop-entry'; import { Node } from '../../document'; import { ComponentMeta } from '../../component-meta'; @@ -20,6 +20,7 @@ export class SettingTopEntry implements SettingEntry { private _items: Array = []; private _componentMeta: ComponentMeta | null = null; private _isSame: boolean = true; + private _settingFieldMap: { [prop: string]: SettingField } = {}; readonly path = []; readonly top = this; readonly parent = this; @@ -96,12 +97,17 @@ export class SettingTopEntry implements SettingEntry { private setupItems() { if (this.componentMeta) { + const settingFieldMap: { [prop: string]: SettingField } = {}; + const settingFieldCollector = (name: string | number, field: SettingField) => { + settingFieldMap[name] = field; + } this._items = this.componentMeta.configure.map((item) => { if (isCustomView(item)) { return item; } - return new SettingField(this, item as any); + return new SettingField(this, item as any, settingFieldCollector); }); + this._settingFieldMap = settingFieldMap; } } @@ -124,7 +130,7 @@ export class SettingTopEntry implements SettingEntry { * 获取子项 */ get(propName: string | number): SettingPropEntry { - return new SettingPropEntry(this, propName); + return this._settingFieldMap[propName] || (new SettingPropEntry(this, propName)); } /** diff --git a/packages/designer/src/designer/setting/utils.js b/packages/designer/src/designer/setting/utils.js index 055f2fb8b..991918c54 100644 --- a/packages/designer/src/designer/setting/utils.js +++ b/packages/designer/src/designer/setting/utils.js @@ -39,7 +39,7 @@ export class Transducer { } else if (isValidElement(setter) && setter.type.displayName === 'MixedSetter') { setter = setter.props.setters[0]; } else if (typeof setter === 'object' && setter.componentName === 'MixedSetter') { - setter = setter.props.setters[0]; + setter = setter.props.setters?.[0]; } if (isSetterConfig(setter)) { @@ -47,9 +47,6 @@ export class Transducer { } if (typeof setter === 'string') { setter = getSetter(setter)?.component; - if (!setter) { - // debugger; - } } this.setterTransducer = combineTransducer( diff --git a/packages/designer/src/document/document-model.ts b/packages/designer/src/document/document-model.ts index fe7908500..3f4805e83 100644 --- a/packages/designer/src/document/document-model.ts +++ b/packages/designer/src/document/document-model.ts @@ -66,6 +66,7 @@ export class DocumentModel { return this.modalNode || this.rootNode; } + private inited = false; constructor(readonly project: Project, schema?: RootSchema) { /* // TODO @@ -88,10 +89,11 @@ export class DocumentModel { ); this.history = new History( - () => this.schema, + () => this.export(TransformStage.Serilize), (schema) => this.import(schema as RootSchema, true), ); this.setupListenActiveNodes(); + this.inited = true; } @obx.val private willPurgeSpace: Node[] = []; @@ -161,6 +163,9 @@ export class DocumentModel { } let node: Node | null = null; + if (!this.inited) { + schema.id = null; + } if (schema.id) { node = this.getNode(schema.id); if (node && node.componentName === schema.componentName) { @@ -483,7 +488,7 @@ export class DocumentModel { // add toData toData() { - const node = this.project?.currentDocument?.export(TransformStage.Serilize); + const node = this.project?.currentDocument?.export(TransformStage.Save); return { componentsTree: [node] }; } diff --git a/packages/designer/src/document/history.ts b/packages/designer/src/document/history.ts index 8a37f1032..44c9010c6 100644 --- a/packages/designer/src/document/history.ts +++ b/packages/designer/src/document/history.ts @@ -1,5 +1,5 @@ import { EventEmitter } from 'events'; -import { autorun, Reaction, untracked } from '@ali/lowcode-editor-core'; +import { autorun, Reaction, untracked, globalContext, Editor } from '@ali/lowcode-editor-core'; import { NodeSchema } from '@ali/lowcode-types'; // TODO: cache to localStorage @@ -114,6 +114,11 @@ export class History { } const cursor = this.session.cursor - 1; this.go(cursor); + const editor = globalContext.get(Editor); + if (!editor) { + return; + } + editor.emit('history.back', cursor); } forward() { @@ -122,6 +127,11 @@ export class History { } const cursor = this.session.cursor + 1; this.go(cursor); + const editor = globalContext.get(Editor); + if (!editor) { + return; + } + editor.emit('history.forward', cursor); } savePoint() { diff --git a/packages/designer/src/document/node/node-children.ts b/packages/designer/src/document/node/node-children.ts index ec038685b..68026e831 100644 --- a/packages/designer/src/document/node/node-children.ts +++ b/packages/designer/src/document/node/node-children.ts @@ -158,6 +158,13 @@ export class NodeChildren { return this.children.indexOf(node); } + /** + * + */ + splice(start: number, deleteCount: number, node: Node): Node[] { + return this.children.splice(start, deleteCount, node); + } + /** * 根据索引获得节点 */ diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index e5c18d33d..9dd21f6f8 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -1,4 +1,4 @@ -import { obx, computed } from '@ali/lowcode-editor-core'; +import { obx, computed, autorun } from '@ali/lowcode-editor-core'; import { isDOMText, isJSExpression, @@ -13,7 +13,7 @@ import { ComponentSchema, NodeStatus, } from '@ali/lowcode-types'; -import { Props, EXTRA_KEY_PREFIX } from './props/props'; +import { Props, getConvertedExtraKey } from './props/props'; import { DocumentModel } from '../document-model'; import { NodeChildren } from './node-children'; import { Prop } from './props/prop'; @@ -144,7 +144,7 @@ export class Node { constructor(readonly document: DocumentModel, nodeSchema: Schema) { const { componentName, id, children, props, ...extras } = nodeSchema; - this.id = id || `node$${document.nextId()}`; + this.id = id || `node_${document.nextId()}`; this.componentName = componentName; if (this.componentName === 'Leaf') { this.props = new Props(this, { @@ -155,17 +155,33 @@ export class Node { this._children = new NodeChildren(this as ParentalNode, this.initialChildren(children)); this._children.interalInitParent(); this.props.import(this.transformProps(props || {}), extras); + this.setupAutoruns(); + } + + if (this.componentMeta.isModal) { + this.getExtraProp('hidden', true)?.setValue(true); } } private transformProps(props: any): any { // FIXME! support PropsList - const x = this.document.designer.transformProps(props, this, TransformStage.Init); - - return x; + return this.document.designer.transformProps(props, this, TransformStage.Init); // TODO: run transducers in metadata.experimental } + private autoruns?: Array<() => void>; + private setupAutoruns() { + const autoruns = this.componentMeta.getMetadata().experimental?.autoruns; + if (!autoruns || autoruns.length < 1) { + return; + } + this.autoruns = autoruns.map((item) => { + return autorun(() => { + item.autorun(this.props.get(item.name, true) as any); + }, true); + }); + } + private initialChildren(children: any): NodeData[] { // FIXME! this is dirty code if (children == null) { @@ -368,9 +384,33 @@ export class Node { // todo } - replaceWith(schema: Schema, migrate = true) { + replaceWith(schema: Schema, migrate = false) { // reuse the same id? or replaceSelection - // + schema = Object.assign({}, migrate ? this.export() : {}, schema); + return this.parent?.replaceChild(this, schema); + } + + /** + * 替换子节点 + * + * @param {Node} node + * @param {object} data + */ + replaceChild(node: Node, data: any) { + if (this.children?.has(node)) { + const selected = this.document.selection.has(node.id); + + delete data.id; + const newNode = this.document.createNode(data); + + this.insertBefore(newNode, node); + node.remove(); + + if (selected) { + this.document.selection.select(newNode.id); + } + } + return node; } getProp(path: string, stash = true): Prop | null { @@ -378,7 +418,7 @@ export class Node { } getExtraProp(key: string, stash = true): Prop | null { - return this.props.get(EXTRA_KEY_PREFIX + key, stash) || null; + return this.props.get(getConvertedExtraKey(key), stash) || null; } /** @@ -426,7 +466,6 @@ export class Node { return this.parent.children.indexOf(this); } - /** * 获取下一个兄弟节点 */ @@ -481,13 +520,11 @@ export class Node { * 导出 schema */ export(stage: TransformStage = TransformStage.Save): Schema { - // run transducers - // run const baseSchema: any = { componentName: this.componentName, }; - if (stage !== TransformStage.Save) { + if (stage !== TransformStage.Clone) { baseSchema.id = this.id; } @@ -593,6 +630,7 @@ export class Node { if (this.isParental()) { this.children.purge(); } + this.autoruns?.forEach((dispose) => dispose()); this.props.purge(); this.document.internalRemoveAndPurgeNode(this); } @@ -610,7 +648,16 @@ export class Node { insertBefore(node: Node, ref?: Node) { this.children?.insert(node, ref ? ref.index : null); } - insertAfter(node: Node, ref?: Node) { + insertAfter(node: any, ref?: Node) { + if (!isNode(node)) { + if (node.getComponentName) { + node = this.document.createNode({ + componentName: node.getComponentName(), + }); + } else { + node = this.document.createNode(node); + } + } this.children?.insert(node, ref ? ref.index + 1 : null); } getParent() { @@ -689,6 +736,7 @@ export class Node { * @deprecated */ getSuitablePlace(node: Node, ref: any): any { + // TODO: if (this.isRoot()) { return { container: this, ref }; } @@ -723,7 +771,7 @@ export class Node { } getPrototype() { - return this; + return this.componentMeta.prototype; } getIcon() { @@ -827,7 +875,7 @@ export function comparePosition(node1: Node, node2: Node): PositionNO { export function insertChild(container: ParentalNode, thing: Node | NodeData, at?: number | null, copy?: boolean): Node { let node: Node; if (isNode(thing) && (copy || thing.isSlot())) { - thing = thing.export(TransformStage.Save); + thing = thing.export(TransformStage.Clone); } if (isNode(thing)) { node = thing; diff --git a/packages/designer/src/document/node/props/prop-stash.ts b/packages/designer/src/document/node/props/prop-stash.ts index 0cf754f92..1c62617ef 100644 --- a/packages/designer/src/document/node/props/prop-stash.ts +++ b/packages/designer/src/document/node/props/prop-stash.ts @@ -1,6 +1,7 @@ import { obx, autorun, untracked, computed } from '@ali/lowcode-editor-core'; import { Prop, IPropParent, UNSET } from './prop'; import { Props } from './props'; +import { Node } from '../node'; export type PendingItem = Prop[]; export class PropStash implements IPropParent { @@ -15,8 +16,10 @@ export class PropStash implements IPropParent { return maps; } private willPurge: () => void; + readonly owner: Node; constructor(readonly props: Props, write: (item: Prop) => void) { + this.owner = props.owner; this.willPurge = autorun(() => { if (this.space.size < 1) { return; diff --git a/packages/designer/src/document/node/props/prop.ts b/packages/designer/src/document/node/props/prop.ts index 518f62d26..fadbdbf8b 100644 --- a/packages/designer/src/document/node/props/prop.ts +++ b/packages/designer/src/document/node/props/prop.ts @@ -4,7 +4,7 @@ import { uniqueId, isPlainObject, hasOwnProperty } from '@ali/lowcode-utils'; import { PropStash } from './prop-stash'; import { valueToSource } from './value-to-source'; import { Props } from './props'; -import { SlotNode } from '../node'; +import { SlotNode, Node } from '../node'; import { TransformStage } from '../transform-stage'; export const UNSET = Symbol.for('unset'); @@ -13,12 +13,35 @@ export type UNSET = typeof UNSET; export interface IPropParent { delete(prop: Prop): void; readonly props: Props; + readonly owner: Node; } export type ValueTypes = 'unset' | 'literal' | 'map' | 'list' | 'expression' | 'slot'; export class Prop implements IPropParent { readonly isProp = true; + readonly owner: Node; + + /** + * @see SettingTarget + */ + getPropValue(propName: string | number): any { + return this.get(propName)!.getValue(); + } + + /** + * @see SettingTarget + */ + setPropValue(propName: string | number, value: any): void { + this.set(propName, value); + } + + /** + * @see SettingTarget + */ + clearPropValue(propName: string | number): void { + this.get(propName, false)?.unset(); + } readonly id = uniqueId('prop$'); @@ -74,7 +97,7 @@ export class Prop implements IPropParent { this.items!.forEach((prop, key) => { const v = prop.export(stage); if (v !== UNSET) { - maps[key] = v; + maps[prop.key == null ? key : prop.key] = v; } }); return maps; @@ -329,6 +352,7 @@ export class Prop implements IPropParent { key?: string | number, spread = false, ) { + this.owner = parent.owner; this.props = parent.props; if (value !== UNSET) { this.setValue(value); @@ -341,7 +365,7 @@ export class Prop implements IPropParent { * 获取某个属性 * @param stash 如果不存在，临时获取一个待写入 */ - get(path: string | number, stash = true): Prop | null { + get(path: string | number, stash: boolean = true): Prop | null { const type = this._type; if (type !== 'map' && type !== 'list' && type !== 'unset' && !stash) { return null; @@ -588,6 +612,14 @@ export class Prop implements IPropParent { return isMap ? fn(item, item.key) : fn(item, index); }); } + + getProps() { + return this.parent; + } + + getNode() { + return this.owner; + } } export function isProp(obj: any): obj is Prop { diff --git a/packages/designer/src/document/node/props/props.ts b/packages/designer/src/document/node/props/props.ts index 98ac7a765..3e7cabbce 100644 --- a/packages/designer/src/document/node/props/props.ts +++ b/packages/designer/src/document/node/props/props.ts @@ -7,6 +7,19 @@ import { Node } from '../node'; import { TransformStage } from '../transform-stage'; export const EXTRA_KEY_PREFIX = '___'; +export function getConvertedExtraKey(key: string): string { + if (!key) { + return ''; + } + let _key = key; + if (key.indexOf('.') > 0) { + _key = key.split('.')[0]; + } + return EXTRA_KEY_PREFIX + _key + EXTRA_KEY_PREFIX + key.substr(_key.length); +} +export function getOriginalExtraKey(key: string): string { + return key.replace(new RegExp(`${EXTRA_KEY_PREFIX}`, 'g'), ''); +} export class Props implements IPropParent { readonly id = uniqueId('props'); @@ -50,7 +63,7 @@ export class Props implements IPropParent { } if (extras) { Object.keys(extras).forEach(key => { - this.items.push(new Prop(this, (extras as any)[key], EXTRA_KEY_PREFIX + key)); + this.items.push(new Prop(this, (extras as any)[key], getConvertedExtraKey(key))); }); } } @@ -70,7 +83,7 @@ export class Props implements IPropParent { } if (extras) { Object.keys(extras).forEach(key => { - this.items.push(new Prop(this, (extras as any)[key], EXTRA_KEY_PREFIX + key)); + this.items.push(new Prop(this, (extras as any)[key], getConvertedExtraKey(key))); }); } originItems.forEach(item => item.purge()); @@ -97,7 +110,7 @@ export class Props implements IPropParent { } let name = item.key as string; if (name && typeof name === 'string' && name.startsWith(EXTRA_KEY_PREFIX)) { - name = name.substr(EXTRA_KEY_PREFIX.length); + name = getOriginalExtraKey(name); extras[name] = value; } else { props.push({ @@ -119,7 +132,7 @@ export class Props implements IPropParent { value = null; } if (typeof name === 'string' && name.startsWith(EXTRA_KEY_PREFIX)) { - name = name.substr(EXTRA_KEY_PREFIX.length); + name = getOriginalExtraKey(name); extras[name] = value; } else { props[name] = value; diff --git a/packages/designer/src/document/node/transform-stage.ts b/packages/designer/src/document/node/transform-stage.ts index 5baec4675..e415d44ae 100644 --- a/packages/designer/src/document/node/transform-stage.ts +++ b/packages/designer/src/document/node/transform-stage.ts @@ -2,5 +2,6 @@ export enum TransformStage { Render = 1, Serilize = 2, Save = 3, - Init = 4, + Clone = 4, + Init = 5, } diff --git a/packages/designer/src/simulator.ts b/packages/designer/src/simulator.ts index 0979ce40e..f051bc1f8 100644 --- a/packages/designer/src/simulator.ts +++ b/packages/designer/src/simulator.ts @@ -1,5 +1,5 @@ import { Component as ReactComponent, ComponentType } from 'react'; -import { ComponentMetadata } from '@ali/lowcode-types'; +import { ComponentMetadata, ComponentSchema } from '@ali/lowcode-types'; import { ISensor, Point, ScrollTarget, IScrollable } from './designer'; import { Node } from './document'; @@ -126,6 +126,10 @@ export interface ISimulatorHost

extends ISensor { * 根据节点获取节点的组件实例 */ getComponentInstances(node: Node): ComponentInstance[] | null; + /** + * 根据低代码组件 schema 创建组件类 + */ + createComponent(schema: ComponentSchema): Component | null; /** * 根据节点获取节点的组件运行上下文 */ diff --git a/packages/editor-core/CHANGELOG.md b/packages/editor-core/CHANGELOG.md index fc3c2e52b..a1eecb91f 100644 --- a/packages/editor-core/CHANGELOG.md +++ b/packages/editor-core/CHANGELOG.md @@ -3,6 +3,43 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.15...@ali/lowcode-editor-core@0.8.16) (2020-06-15) + + +### Features + +* add Monitor ([f915d19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/f915d19)) +* add URL link for setter titles ([4678408](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/4678408)) +* ve事件埋点 ([700e5b0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/700e5b0)) + + + + + +## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.14...@ali/lowcode-editor-core@0.8.15) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-core + + +## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.13...@ali/lowcode-editor-core@0.8.14) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-core + + +## [0.8.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.12...@ali/lowcode-editor-core@0.8.13) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-core + ## [0.8.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.11...@ali/lowcode-editor-core@0.8.12) (2020-05-13) diff --git a/packages/editor-core/package.json b/packages/editor-core/package.json index 5e1aa66be..39461e56c 100644 --- a/packages/editor-core/package.json +++ b/packages/editor-core/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-editor-core", - "version": "0.8.12", + "version": "0.8.16", "description": "Core Api for Ali lowCode engine", "license": "MIT", "main": "lib/index.js", @@ -15,8 +15,8 @@ "cloud-build": "build-scripts build --skip-demo" }, "dependencies": { - "@ali/lowcode-types": "^0.8.3", - "@ali/lowcode-utils": "^0.8.4", + "@ali/lowcode-types": "^0.8.6", + "@ali/lowcode-utils": "^0.8.7", "@alifd/next": "^1.19.16", "@recore/obx": "^1.0.9", "@recore/obx-react": "^1.0.8", diff --git a/packages/editor-core/src/hotkey.ts b/packages/editor-core/src/hotkey.ts index 293d5179c..3bf51b550 100644 --- a/packages/editor-core/src/hotkey.ts +++ b/packages/editor-core/src/hotkey.ts @@ -1,3 +1,6 @@ +import { globalContext } from './di'; +import { Editor } from './editor'; + interface KeyMap { [key: number]: string; } @@ -329,6 +332,19 @@ function fireCallback(callback: HotkeyCallback, e: KeyboardEvent, combo?: string e.preventDefault(); e.stopPropagation(); } + const editor = globalContext.get(Editor); + const designer = editor.get('designer'); + const node = designer?.currentSelection?.getNodes()?.[0]; + const npm = node?.componentMeta?.npm; + const selected = + [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || node?.componentMeta?.componentName || ''; + editor?.emit('hotkey.callback.call', { + callback, + e, + combo, + sequence, + selected, + }); } export class Hotkey { diff --git a/packages/editor-core/src/utils/goldlog.ts b/packages/editor-core/src/utils/goldlog.ts deleted file mode 100644 index 4e594b15c..000000000 --- a/packages/editor-core/src/utils/goldlog.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * 黄金令箭埋点 - * @param {String} gmKey 为黄金令箭业务类型 - * @param {Object} params 参数 - * @param {String} logKey 属性串 - */ -export function goldlog(gmKey: string, params: object = {}, logKey: string = 'other'): void { - -} - - diff --git a/packages/editor-core/src/utils/index.ts b/packages/editor-core/src/utils/index.ts index 6a4ef399a..8f37753ac 100644 --- a/packages/editor-core/src/utils/index.ts +++ b/packages/editor-core/src/utils/index.ts @@ -1,5 +1,5 @@ export * from './get-public-path'; -export * from './goldlog'; +export * from './monitor'; export * from './obx'; export * from './request'; export * from './focus-tracker'; diff --git a/packages/editor-core/src/utils/monitor.ts b/packages/editor-core/src/utils/monitor.ts new file mode 100644 index 000000000..0c616c3ce --- /dev/null +++ b/packages/editor-core/src/utils/monitor.ts @@ -0,0 +1,46 @@ +class Monitor { + fn = (params: any) => { + const { AES } = window as any; + if (typeof AES.log === 'function') { + const { p1, p2, p3, p4 = 'OTHER', ...rest } = params || {}; + AES.log('event', { + p1, + p2, + p3, + p4, + ...rest, + }); + } + }; + + constructor() { + (window as any).AES = (window as any).AES || {}; + } + + register(fn: () => any) { + if (typeof fn === 'function') { + this.fn = fn; + } + } + + log(params: any) { + if (typeof this.fn === 'function') { + this.fn(params); + } + } + + setConfig(key: string | object, value?: string): void { + const { AES } = window as any; + if (typeof AES?.setConfig !== 'function') { + return; + } + if (typeof key === 'string' && value) { + AES.setConfig(key, value); + } else if (typeof key === 'object') { + AES.setConfig(key); + } + } +} + +const monitor = new Monitor(); +export { monitor }; diff --git a/packages/editor-core/src/widgets/title/index.tsx b/packages/editor-core/src/widgets/title/index.tsx index daeba7df4..1006935ed 100644 --- a/packages/editor-core/src/widgets/title/index.tsx +++ b/packages/editor-core/src/widgets/title/index.tsx @@ -7,8 +7,26 @@ import { Tip } from '../tip'; import './title.less'; export class Title extends Component<{ title: TitleContent; className?: string; onClick?: () => void }> { + constructor(props: any) { + super(props); + this.handleClick = this.handleClick.bind(this); + } + handleClick(e: React.MouseEvent) { + const { title, onClick } = this.props as any; + const url = title && (title.docUrl || title.url); + if (url) { + window.open(url); + // 防止触发行操作（如折叠面板） + e.stopPropagation(); + } + // TODO: 操作交互冲突，目前 mixedSetter 仅有 2 个 setter 注册时用到了 onClick + onClick && onClick(e); + } render() { - let { title, className, onClick } = this.props; + let { title, className } = this.props; + if (title == null) { + return null; + } if (isValidElement(title)) { return title; } @@ -37,7 +55,7 @@ export class Title extends Component<{ title: TitleContent; className?: string; 'has-tip': !!tip, 'only-icon': !title.label })} - onClick={onClick} + onClick={this.handleClick} > {icon ? {icon} : null} {title.label ? intl(title.label) : null} diff --git a/packages/editor-preset-general/CHANGELOG.md b/packages/editor-preset-general/CHANGELOG.md new file mode 100644 index 000000000..b4cfaaada --- /dev/null +++ b/packages/editor-preset-general/CHANGELOG.md @@ -0,0 +1,52 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + + +## [0.9.6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.5...@ali/lowcode-editor-preset-general@0.9.6) (2020-06-16) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-preset-general + + +## [0.9.5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.4...@ali/lowcode-editor-preset-general@0.9.5) (2020-06-15) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-preset-general + + +## [0.9.4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.3...@ali/lowcode-editor-preset-general@0.9.4) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-preset-general + + +## [0.9.3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.2...@ali/lowcode-editor-preset-general@0.9.3) (2020-05-19) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-preset-general + + +## [0.9.2](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-general@0.9.1...@ali/lowcode-editor-preset-general@0.9.2) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-preset-general + + +## 0.9.1 (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-preset-general diff --git a/packages/editor-preset-general/build.json b/packages/editor-preset-general/build.json index 123bf141b..79af05222 100644 --- a/packages/editor-preset-general/build.json +++ b/packages/editor-preset-general/build.json @@ -4,7 +4,7 @@ "build-plugin-component", { "filename": "editor-preset-general", - "library": "LowcodeEditorPresetGeneral", + "library": "LowcodeEditor", "libraryTarget": "umd", "externals": { "react": "var window.React", diff --git a/packages/editor-preset-general/package.json b/packages/editor-preset-general/package.json index 5996e04e8..08f7e2e83 100644 --- a/packages/editor-preset-general/package.json +++ b/packages/editor-preset-general/package.json @@ -1,6 +1,7 @@ { "name": "@ali/lowcode-editor-preset-general", - "version": "0.9.0", + "version": "0.9.6", + "private": true, "description": "Ali General Editor Preset", "main": "lib/index.js", "files": [ @@ -9,17 +10,17 @@ "lib" ], "scripts": { + "build": "build-scripts build --skip-demo", "cloud-build": "build-scripts build --skip-demo" }, "license": "MIT", "dependencies": { - "@ali/lowcode-utils": "^0.8.0", - "@ali/lowcode-types": "^0.8.0", - "@ali/lowcode-editor-core": "^0.8.12", - "@ali/lowcode-editor-skeleton": "^0.8.17", - "@ali/lowcode-plugin-designer": "^0.9.11", - "@ali/lowcode-plugin-outline-pane": "^0.8.17", - "@ali/lowcode-editor-setters": "^0.9.0", + "@ali/lowcode-editor-core": "^0.8.16", + "@ali/lowcode-editor-skeleton": "^0.8.26", + "@ali/lowcode-plugin-designer": "^0.9.20", + "@ali/lowcode-plugin-outline-pane": "^0.8.26", + "@ali/lowcode-types": "^0.8.6", + "@ali/lowcode-utils": "^0.8.7", "@alifd/next": "^1.19.12", "@alife/theme-lowcode-dark": "^0.1.0", "@alife/theme-lowcode-light": "^0.1.0", @@ -27,6 +28,7 @@ "react-dom": "^16.8.1" }, "devDependencies": { + "@ali/lowcode-editor-setters": "^0.9.3", "@alib/build-scripts": "^0.1.18", "@types/events": "^3.0.0", "@types/react": "^16.8.3", @@ -35,5 +37,8 @@ "build-plugin-moment-locales": "^0.1.0", "build-plugin-react-app": "^1.1.2", "tsconfig-paths-webpack-plugin": "^3.2.0" + }, + "publishConfig": { + "registry": "https://registry.npm.alibaba-inc.com" } } diff --git a/packages/editor-preset-general/src/index.ts b/packages/editor-preset-general/src/index.ts index cc07747d6..4d6a340db 100644 --- a/packages/editor-preset-general/src/index.ts +++ b/packages/editor-preset-general/src/index.ts @@ -3,7 +3,7 @@ import { createElement } from 'react'; import { Workbench, Skeleton, SettingsPrimaryPane } from '@ali/lowcode-editor-skeleton'; import { globalContext, Editor } from '@ali/lowcode-editor-core'; import { Designer } from '@ali/lowcode-designer'; -import { OutlineBackupPane, getTreeMaster } from '@ali/lowcode-plugin-outline-pane'; +import Outline, { OutlineBackupPane, getTreeMaster } from '@ali/lowcode-plugin-outline-pane'; import DesignerPlugin from '@ali/lowcode-plugin-designer'; import '@ali/lowcode-editor-setters'; @@ -30,6 +30,15 @@ skeleton.add({ type: 'Widget', content: DesignerPlugin, }); +skeleton.add({ + area: 'leftArea', + name: 'outlinePane', + type: 'PanelDock', + content: Outline, + panelProps: { + area: 'leftFixedArea', + }, +}); skeleton.add({ area: 'rightArea', name: 'settingsPane', @@ -74,7 +83,7 @@ export function init(container?: Element) { } console.log( - `%cLowcodeEditorPresetGeneral %cv${version}`, + `%cLowcodeEngine %cv${version}`, "color:#000;font-weight:bold;", "color:green;font-weight:bold;" ); diff --git a/packages/editor-preset-vision/CHANGELOG.md b/packages/editor-preset-vision/CHANGELOG.md index e208100e3..0de13ca5f 100644 --- a/packages/editor-preset-vision/CHANGELOG.md +++ b/packages/editor-preset-vision/CHANGELOG.md @@ -3,6 +3,113 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.8.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.20...@ali/lowcode-editor-preset-vision@0.8.21) (2020-06-16) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-preset-vision + + +## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.19...@ali/lowcode-editor-preset-vision@0.8.20) (2020-06-15) + + +### Bug Fixes + +* compatiable old VE api ([45af1c5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/45af1c5)) +* i18n parser & setting ([dbdd9e4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/dbdd9e4)) +* patch prototype ([f20bfaa](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/f20bfaa)) +* render children ([487f257](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/487f257)) +* style ([4694331](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/4694331)) +* 调整保存成功弹出框位置 ([5198dae](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/5198dae)) + + +### Features + +* complete live-editing expr & i18n ([3ac08ba](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/3ac08ba)) +* support prop.autorun ([c0a5235](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/c0a5235)) +* ve事件埋点 ([700e5b0](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/700e5b0)) + + + + + +## [0.8.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.18...@ali/lowcode-editor-preset-vision@0.8.19) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-preset-vision + + +## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.17...@ali/lowcode-editor-preset-vision@0.8.18) (2020-05-19) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-preset-vision + + +## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.16...@ali/lowcode-editor-preset-vision@0.8.17) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-preset-vision + + +## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-preset-vision@0.8.15...@ali/lowcode-editor-preset-vision@0.8.16) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-preset-vision + + +## 0.8.15 (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-preset-vision + + +## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-vision-preset@0.8.13...@ali/lowcode-vision-preset@0.8.14) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-vision-preset + + +## [0.8.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-vision-preset@0.8.12...@ali/lowcode-vision-preset@0.8.13) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-vision-preset + + +## [0.8.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-vision-preset@0.8.11...@ali/lowcode-vision-preset@0.8.12) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-vision-preset + + +## [0.8.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-vision-preset@0.8.10...@ali/lowcode-vision-preset@0.8.11) (2020-05-15) + + +### Features + +* add filter reducer ([17c6ed3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/17c6ed3)) +* change reducer stage ([c2e83c7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/c2e83c7)) + + + + ## [0.8.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-vision-preset@0.8.9...@ali/lowcode-vision-preset@0.8.10) (2020-05-15) diff --git a/packages/editor-preset-vision/build.json b/packages/editor-preset-vision/build.json index 00ecb45ff..b9babfe67 100644 --- a/packages/editor-preset-vision/build.json +++ b/packages/editor-preset-vision/build.json @@ -3,8 +3,8 @@ [ "build-plugin-component", { - "filename": "vision-preset", - "library": "VisualEngine", + "filename": "editor-preset-vision", + "library": "LowcodeEditor", "libraryTarget": "umd", "externals": { "react": "var window.React", diff --git a/packages/editor-preset-vision/package.json b/packages/editor-preset-vision/package.json index f0e9ddd17..a5ca322b0 100644 --- a/packages/editor-preset-vision/package.json +++ b/packages/editor-preset-vision/package.json @@ -1,7 +1,7 @@ { "name": "@ali/lowcode-editor-preset-vision", + "version": "0.8.21", "private": true, - "version": "0.8.10", "description": "Vision Polyfill for Ali lowCode engine", "main": "lib/index.js", "files": [ @@ -10,15 +10,17 @@ "lib" ], "scripts": { + "build": "build-scripts build --skip-demo", "cloud-build": "build-scripts build --skip-demo" }, "license": "MIT", "dependencies": { - "@ali/lowcode-editor-core": "^0.8.12", - "@ali/lowcode-editor-skeleton": "^0.8.17", - "@ali/lowcode-plugin-designer": "^0.9.11", - "@ali/lowcode-plugin-outline-pane": "^0.8.17", - "@ali/ve-i18n-util": "^2.0.2", + "@ali/lowcode-designer": "^0.9.20", + "@ali/lowcode-editor-core": "^0.8.16", + "@ali/lowcode-editor-skeleton": "^0.8.26", + "@ali/lowcode-plugin-designer": "^0.9.20", + "@ali/lowcode-plugin-outline-pane": "^0.8.26", + "@ali/ve-i18n-util": "^2.0.0", "@ali/ve-icons": "^4.1.9", "@ali/ve-less-variables": "2.0.3", "@ali/ve-popups": "^4.2.5", @@ -44,5 +46,8 @@ "build-plugin-moment-locales": "^0.1.0", "build-plugin-react-app": "^1.1.2", "tsconfig-paths-webpack-plugin": "^3.2.0" + }, + "publishConfig": { + "registry": "https://registry.npm.alibaba-inc.com" } } diff --git a/packages/editor-preset-vision/src/bundle/prototype.ts b/packages/editor-preset-vision/src/bundle/prototype.ts index 4ea036ffc..fa715382e 100644 --- a/packages/editor-preset-vision/src/bundle/prototype.ts +++ b/packages/editor-preset-vision/src/bundle/prototype.ts @@ -1,5 +1,5 @@ import { ComponentType, ReactElement } from 'react'; -import { ComponentMetadata, FieldConfig, InitialItem } from '@ali/lowcode-types'; +import { ComponentMetadata, FieldConfig, InitialItem, FilterItem, AutorunItem } from '@ali/lowcode-types'; import { ComponentMeta, addBuiltinComponentAction, @@ -18,22 +18,42 @@ import { import { designer } from '../editor'; import { uniqueId } from '@ali/lowcode-utils'; -const GlobalPropsConfigure: Array<{ position: string; initials?: InitialItem[]; config: FieldConfig }> = []; +const GlobalPropsConfigure: Array<{ + position: string; + initials?: InitialItem[]; + filters?: FilterItem[]; + autoruns?: AutorunItem[]; + config: FieldConfig +}> = []; const Overrides: { [componentName: string]: { initials?: InitialItem[]; + filters?: FilterItem[]; + autoruns?: AutorunItem[]; override: any; }; } = {}; function addGlobalPropsConfigure(config: OldGlobalPropConfig) { const initials: InitialItem[] = []; + const filters: FilterItem[] = []; + const autoruns: AutorunItem[] = []; GlobalPropsConfigure.push({ position: config.position || 'bottom', initials, - config: upgradePropConfig(config, (item) => { - initials.push(item); - }), + filters, + autoruns, + config: upgradePropConfig(config, { + addInitial: (item) => { + initials.push(item); + }, + addFilter: (item) => { + filters.push(item); + }, + addAutorun: (item) => { + autoruns.push(item); + }, + }) }); } function removeGlobalPropsConfigure(name: string) { @@ -46,20 +66,30 @@ function removeGlobalPropsConfigure(name: string) { } function overridePropsConfigure(componentName: string, config: { [name: string]: OldPropConfig } | OldPropConfig[]) { const initials: InitialItem[] = []; + const filters: FilterItem[] = []; + const autoruns: AutorunItem[] = []; const addInitial = (item: InitialItem) => { initials.push(item); }; + const addFilter = (item: FilterItem) => { + filters.push(item); + }; + const addAutorun = (item: AutorunItem) => { + autoruns.push(item); + }; let override: any; if (Array.isArray(config)) { - override = upgradeConfigure(config, addInitial); + override = upgradeConfigure(config, { addInitial, addFilter, addAutorun }); } else { override = {}; Object.keys(config).forEach(key => { - override[key] = upgradePropConfig(config[key], addInitial); + override[key] = upgradePropConfig(config[key], { addInitial, addFilter, addAutorun }); }); } Overrides[componentName] = { initials, + filters, + autoruns, override, }; } @@ -89,6 +119,7 @@ registerMetadataTransducer( } else if (position === 'bottom') { bottom.push(item.config); } + // TODO: replace autoruns,initials,filters }); const override = Overrides[componentName]?.override; @@ -109,6 +140,7 @@ registerMetadataTransducer( } } } + // TODO: replace autoruns,initials,filters } return metadata; @@ -184,7 +216,7 @@ class Prototype { return new Prototype(config); } - private id: string; + readonly isPrototype = true; private meta: ComponentMeta; readonly options: OldPrototypeConfig | ComponentMetadata; @@ -197,11 +229,11 @@ class Prototype { const metadata = isNewSpec(input) ? input : upgradeMetadata(input); this.meta = designer.createComponentMeta(metadata); } - this.id = uniqueId('prototype'); + (this.meta as any).prototype = this; } getId() { - return this.id; + return this.getComponentName(); } getConfig(configName?: keyof (OldPrototypeConfig | ComponentMetadata)) { @@ -298,4 +330,8 @@ class Prototype { } } +export function isPrototype(obj: any): obj is Prototype { + return obj && obj.isPrototype; +} + export default Prototype; diff --git a/packages/editor-preset-vision/src/bundle/trunk.ts b/packages/editor-preset-vision/src/bundle/trunk.ts index 04efc2f10..e4e41e35d 100644 --- a/packages/editor-preset-vision/src/bundle/trunk.ts +++ b/packages/editor-preset-vision/src/bundle/trunk.ts @@ -1,6 +1,6 @@ import { ReactElement, ComponentType } from 'react'; import { EventEmitter } from 'events'; -import { registerSetter, RegisteredSetter } from '@ali/lowcode-editor-core'; +import { registerSetter, RegisteredSetter, getSetter } from '@ali/lowcode-editor-core'; import Bundle from './bundle'; import { CustomView } from '@ali/lowcode-types'; @@ -41,6 +41,38 @@ export class Trunk { return this.metaBundle.getFromMeta(name); } + getPrototypeById(id: string) { + return this.getPrototype(id); + } + + listByCategory() { + const categories: any[] = []; + const categoryMap: any = {}; + const categoryItems: any[] = []; + const defaultCategory = { + items: categoryItems, + name: '*', + }; + categories.push(defaultCategory); + categoryMap['*'] = defaultCategory; + this.getList().forEach((prototype) => { + const cat = prototype.getCategory(); + if (!cat) { + return; + } + if (!categoryMap.hasOwnProperty(cat)) { + const categoryMapItems: any[] = []; + categoryMap[cat] = { + items: categoryMapItems, + name: cat, + }; + categories.push(categoryMap[cat]); + } + categoryMap[cat].items.push(prototype); + }); + return categories; + } + getPrototypeView(componentName: string) { return this.getPrototype(componentName)?.getView(); } @@ -72,6 +104,14 @@ export class Trunk { setPackages() { console.warn('Trunk.setPackages is deprecated'); } + + getSetter(type: string): any{ + const setter = getSetter(type); + if (setter?.component) { + return setter.component; + } + return setter; + } } export default new Trunk(); diff --git a/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts b/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts index cf10a6cd5..d6ebc41a1 100644 --- a/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts +++ b/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts @@ -1,6 +1,8 @@ import { ComponentType, ReactElement, isValidElement, ComponentClass } from 'react'; import { isPlainObject } from '@ali/lowcode-utils'; -import { isI18nData, SettingTarget, InitialItem, isJSSlot, isJSExpression } from '@ali/lowcode-types'; +import { isI18nData, SettingTarget, InitialItem, FilterItem, isJSSlot, ProjectSchema, AutorunItem } from '@ali/lowcode-types'; +import { untracked } from '@ali/lowcode-editor-core'; +import { editor, designer } from '../editor'; type Field = SettingTarget; @@ -166,6 +168,8 @@ export interface OldPrototypeConfig { onResizeStart?: (e: MouseEvent, triggerDirection: string, dragment: Node) => void; onResize?: (e: MouseEvent, triggerDirection: string, dragment: Node, moveX: number, moveY: number) => void; onResizeEnd?: (e: MouseEvent, triggerDirection: string, dragment: Node) => void; + devMode?: string; + schema?: ProjectSchema; } export interface ISetterConfig { @@ -178,7 +182,7 @@ type SetterGetter = (this: Field, value: any) => ComponentClass; type ReturnBooleanFunction = (this: Field, value: any) => boolean; -export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) { +export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollector) { const { type, name, @@ -209,7 +213,9 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) liveTextEditing, } = config; - const extraProps: any = {}; + const extraProps: any = { + display: DISPLAY_TYPE.BLOCK, + }; const newConfig: any = { type: type === 'group' ? 'group' : 'field', name, @@ -261,22 +267,9 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) } else if (hidden != null || disabled != null) { extraProps.condition = (field: Field) => !(isHidden(field) || isDisabled(field)); } - if (ignore != null || disabled != null) { - // FIXME! addFilter - extraProps.virtual = (field: Field) => { - if (isDisabled(field)) { - return true; - } - - if (typeof ignore === 'function') { - return ignore.call(field, field.getValue()) === true; - } - return ignore === true; - }; - } if (type === 'group') { - newConfig.items = items ? upgradeConfigure(items, addInitial) : []; + newConfig.items = items ? upgradeConfigure(items, collector) : []; return newConfig; } @@ -303,18 +296,44 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) }; } - if (accessor && !slotName) { - extraProps.getValue = (field: Field, fieldValue: any) => { - return accessor.call(field, fieldValue); - }; - if (!initialFn) { - initialFn = accessor; + if (!slotName) { + if (accessor) { + extraProps.getValue = (field: Field, fieldValue: any) => { + return accessor.call(field, fieldValue); + }; + } + + if (sync || accessor) { + collector.addAutorun({ + name, + autorun: (field: Field) => { + let fieldValue = untracked(() => field.getValue()); + if (accessor) { + fieldValue = accessor.call(field, fieldValue) + } + if (sync) { + fieldValue = sync.call(field, fieldValue); + if (fieldValue !== undefined) { + field.setValue(fieldValue); + } + } else { + field.setValue(fieldValue); + } + } + }); + } + + if (mutator) { + extraProps.setValue = (field: Field, value: any) => { + mutator.call(field, value, value); + }; } } const setterInitial = getInitialFromSetter(setter); - addInitial({ + collector.addInitial({ + // FIXME! name could be "xxx.xxx" name: slotName || name, initial: (field: Field, currentValue: any) => { // FIXME! read from prototype.defaultProps @@ -334,18 +353,27 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) }, }); - if (sync) { - extraProps.autorun = (field: Field) => { - const value = sync.call(field, field.getValue()); - if (value !== undefined) { - field.setValue(value); + if (ignore != null || disabled != null) { + collector.addFilter({ + // FIXME! name should be "xxx.xxx" + name: slotName || name, + filter: (field: Field, currentValue: any) => { + let disabledValue: boolean; + if (typeof disabled === 'function') { + disabledValue = disabled.call(field, currentValue) === true; + } + else { + disabledValue = disabled === true; + } + if (disabledValue) { + return false; + } + if (typeof ignore === 'function') { + return ignore.call(field, currentValue) !== true; + } + return ignore !== true; } - }; - } - if (mutator && !slotName) { - extraProps.setValue = (field: Field, value: any) => { - mutator.call(field, value, value); - }; + }); } if (slotName) { @@ -371,7 +399,7 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) }, }, ]; - if (allowTextInput !== false) { + if (allowTextInput) { setters.unshift('I18nSetter'); } if (supportVariable) { @@ -386,9 +414,25 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) if (type === 'composite') { const initials: InitialItem[] = []; const objItems = items - ? upgradeConfigure(items, (item) => { - initials.push(item); - }) + ? upgradeConfigure(items, + { + addInitial: (item) => { + initials.push(item); + }, + addFilter: (item) => { + collector.addFilter({ + name: `${name}.${item.name}`, + filter: item.filter, + }); + }, + addAutorun: (item) => { + collector.addAutorun({ + name: `${name}.${item.name}`, + autorun: item.autorun, + }); + }, + } + ) : []; const initial = (target: SettingTarget, value?: any) => { // TODO: @@ -400,7 +444,7 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) }); return data; }; - addInitial({ + collector.addInitial({ name, initial, }); @@ -460,7 +504,15 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) return newConfig; } -type AddIntial = (initialItem: InitialItem) => void; +type AddInitial = (initialItem: InitialItem) => void; +type AddFilter = (filterItem: FilterItem) => void; +type AddAutorun = (autorunItem: AutorunItem) => void; + +type ConfigCollector = { + addInitial: AddInitial; + addFilter: AddFilter; + addAutorun: AddAutorun; +} function getInitialFromSetter(setter: any) { return setter && ( @@ -474,7 +526,7 @@ function defaultInitial(value: any, defaultValue: any) { } -export function upgradeConfigure(items: OldPropConfig[], addInitial: AddIntial) { +export function upgradeConfigure(items: OldPropConfig[], collector: ConfigCollector) { const configure: any[] = []; let ignoreSlotName: any = null; items.forEach((config) => { @@ -487,7 +539,7 @@ export function upgradeConfigure(items: OldPropConfig[], addInitial: AddIntial) } ignoreSlotName = null; } - configure.push(upgradePropConfig(config, addInitial)); + configure.push(upgradePropConfig(config, collector)); }); return configure; } @@ -560,6 +612,8 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) { onResizeStart, // onResizeStart onResize, // onResize onResizeEnd, // onResizeEnd + devMode, + schema, } = oldConfig; const meta: any = { @@ -567,7 +621,8 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) { title, icon, docUrl, - devMode: 'procode', + devMode: devMode || 'procode', + schema: schema?.componentsTree[0], }; if (category) { @@ -655,8 +710,9 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) { if (initialChildren) { experimental.initialChildren = typeof initialChildren === 'function' - ? (field: Field) => { - return initialChildren.call(field, (field as any).props); + ? (node: any) => { + const props = designer.createSettingEntry(editor, [ node ]); + return initialChildren.call(node, props); } : initialChildren; } @@ -724,10 +780,24 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) { experimental.callbacks = callbacks; const initials: InitialItem[] = []; - const props = upgradeConfigure(configure || [], (item) => { - initials.push(item); - }); + const filters: FilterItem[] = []; + const autoruns: AutorunItem[] = []; + const props = upgradeConfigure(configure || [], + { + addInitial: (item) => { + initials.push(item); + }, + addFilter: (item) => { + filters.push(item); + }, + addAutorun: (item) => { + autoruns.push(item); + } + } + ); experimental.initials = initials; + experimental.filters = filters; + experimental.autoruns = autoruns; const supports: any = {}; if (canUseCondition != null) { diff --git a/packages/editor-preset-vision/src/bus.ts b/packages/editor-preset-vision/src/bus.ts index c8554d99f..dd6b8386a 100644 --- a/packages/editor-preset-vision/src/bus.ts +++ b/packages/editor-preset-vision/src/bus.ts @@ -1,5 +1,6 @@ import logger from '@ali/vu-logger'; import { EventEmitter } from 'events'; +import { editor } from './editor'; /** * Bus class as an EventEmitter @@ -19,7 +20,6 @@ export class Bus { // alias to unsub off(event: string, func: (...args: any[]) => any) { this.unsub(event, func); - } // alias to pub @@ -62,4 +62,18 @@ export class Bus { } } -export default new Bus(); +const bus = new Bus(); + +editor.on('hotkey.callback.call', (data) => { + bus.emit('ve.hotkey.callback.call', data); +}); + +editor.on('history.back', (data) => { + bus.emit('ve.history.back', data); +}); + +editor.on('history.forward', (data) => { + bus.emit('ve.history.forward', data); +}); + +export default bus; diff --git a/packages/editor-preset-vision/src/deep-value-parser.ts b/packages/editor-preset-vision/src/deep-value-parser.ts new file mode 100644 index 000000000..227e5da09 --- /dev/null +++ b/packages/editor-preset-vision/src/deep-value-parser.ts @@ -0,0 +1,41 @@ +import Env from './env'; +import { isJSSlot, isI18nData, isJSExpression } from '@ali/lowcode-types'; +import { isPlainObject } from '@ali/lowcode-utils'; +import i18nUtil from './i18n-util'; + +// FIXME: 表达式使用 mock 值，未来live 模式直接使用原始值 +export function deepValueParser(obj?: any): any { + if (isJSExpression(obj)) { + obj = obj.mock; + } + if (!obj) { + return obj; + } + if (Array.isArray(obj)) { + return obj.map((item) => deepValueParser(item)); + } + if (isPlainObject(obj)) { + if (isI18nData(obj)) { + // FIXME! use editor.get + let locale = Env.getLocale(); + if (obj.key) { + // FIXME: 此处需要升级I18nUtil，改成响应式 + return i18nUtil.get(obj.key, locale); + } + if (locale !== 'zh_CN' && locale !== 'zh_TW' && !obj[locale]) { + locale = 'en_US'; + } + return obj[obj.use || locale] || obj.zh_CN; + } + + if (isJSSlot(obj)) { + return obj; + } + const out: any = {}; + Object.keys(obj).forEach((key) => { + out[key] = deepValueParser(obj[key]); + }); + return out; + } + return obj; +} diff --git a/packages/editor-preset-vision/src/drag-engine.ts b/packages/editor-preset-vision/src/drag-engine.ts index a4ecaaa1f..c1844c38a 100644 --- a/packages/editor-preset-vision/src/drag-engine.ts +++ b/packages/editor-preset-vision/src/drag-engine.ts @@ -1,5 +1,6 @@ import { designer } from './editor'; import { DragObjectType, isNode, isDragNodeDataObject } from '@ali/lowcode-designer'; +import { isPrototype } from './bundle/prototype'; const dragon = designer.dragon; const DragEngine = { @@ -9,7 +10,14 @@ const DragEngine = { if (!r) { return null; } - if (isNode(r)) { + if (isPrototype(r)) { + return { + type: DragObjectType.NodeData, + data: { + componentName: r.getComponentName(), + }, + }; + } else if (isNode(r)) { return { type: DragObjectType.Node, nodes: [r], diff --git a/packages/editor-preset-vision/src/editor.ts b/packages/editor-preset-vision/src/editor.ts index 954235f6c..2e75c0366 100644 --- a/packages/editor-preset-vision/src/editor.ts +++ b/packages/editor-preset-vision/src/editor.ts @@ -1,16 +1,16 @@ -import { isJSBlock, isJSExpression, isJSSlot } from '@ali/lowcode-types'; -import { isPlainObject } from '@ali/lowcode-utils'; +import { isJSBlock, isJSExpression, isJSSlot, isI18nData } from '@ali/lowcode-types'; +import { isPlainObject, hasOwnProperty } from '@ali/lowcode-utils'; import { globalContext, Editor } from '@ali/lowcode-editor-core'; -import { Designer, LiveEditing, TransformStage, addBuiltinComponentAction } from '@ali/lowcode-designer'; +import { Designer, LiveEditing, TransformStage, Node } from '@ali/lowcode-designer'; import Outline, { OutlineBackupPane, getTreeMaster } from '@ali/lowcode-plugin-outline-pane'; import { toCss } from '@ali/vu-css-style'; +import logger from '@ali/vu-logger'; import DesignerPlugin from '@ali/lowcode-plugin-designer'; import { Skeleton, SettingsPrimaryPane } from '@ali/lowcode-editor-skeleton'; -import { i18nReducer } from './i18n-reducer'; -import { InstanceNodeSelector } from './components'; -import { liveEditingRule } from './vc-live-editing'; +import { deepValueParser } from './deep-value-parser'; +import { liveEditingRule, liveEditingSaveHander } from './vc-live-editing'; export const editor = new Editor(); globalContext.register(editor, Editor); @@ -31,9 +31,16 @@ designer.addPropsReducer((props, node) => { const newProps: any = {}; initials.forEach((item) => { // FIXME! this implements SettingTarget - const v = item.initial(node as any, props[item.name]); - if (v !== undefined) { - newProps[item.name] = v; + try { + // FIXME! item.name could be 'xxx.xxx' + const v = item.initial(node as any, props[item.name]); + if (v !== undefined) { + newProps[item.name] = v; + } + } catch (e) { + if (hasOwnProperty(props, item.name)) { + newProps[item.name] = props[item.name]; + } } }); return newProps; @@ -41,8 +48,31 @@ designer.addPropsReducer((props, node) => { return props; }, TransformStage.Init); -// 国际化渲染时处理 -designer.addPropsReducer(i18nReducer, TransformStage.Render); + +function filterReducer(props: any, node: Node): any { + const filters = node.componentMeta.getMetadata().experimental?.filters; + if (filters && filters.length) { + const newProps = { ...props }; + filters.forEach((item) => { + // FIXME! item.name could be 'xxx.xxx' + if (!hasOwnProperty(newProps, item.name)) { + return; + } + try { + if (item.filter(node.getProp(item.name) as any, props[item.name]) === false) { + delete newProps[item.name]; + } + } catch (e) { + console.warn(e); + logger.trace(e); + } + }); + return newProps; + } + return props; +} +designer.addPropsReducer(filterReducer, TransformStage.Save); +designer.addPropsReducer(filterReducer, TransformStage.Render); function upgradePropsReducer(props: any) { if (!isPlainObject(props)) { @@ -72,6 +102,32 @@ function upgradePropsReducer(props: any) { // 升级 Props designer.addPropsReducer(upgradePropsReducer, TransformStage.Init); +function compatiableReducer(props: any) { + if (!isPlainObject(props)) { + return props; + } + const newProps: any = {}; + Object.entries(props).forEach(([key, val]) => { + if (isJSSlot(val)) { + val.value + val = { + type: 'JSBlock', + value: { + componentName: 'Slot', + children: val.value, + props: { + slotTitle: val.title, + }, + }, + } + } + newProps[key] = val; + }); + return newProps; +} +// Dirty fix: will remove this reducer +designer.addPropsReducer(compatiableReducer, TransformStage.Save); + // 设计器组件样式处理 function stylePropsReducer(props: any, node: any) { if (props && typeof props === 'object' && props.__style__) { @@ -119,30 +175,8 @@ function appendStyleNode(props: any, styleProp: any, cssClass: string, cssId: st } designer.addPropsReducer(stylePropsReducer, TransformStage.Render); -// FIXME: 表达式使用 mock 值，未来live 模式直接使用原始值 -function expressionReducer(obj?: any): any { - if (!obj) { - return obj; - } - if (Array.isArray(obj)) { - return obj.map((item) => expressionReducer(item)); - } - if (isPlainObject(obj)) { - if (isJSExpression(obj)) { - return obj.mock; - } - if (isJSSlot(obj)) { - return obj; - } - const out: any = {}; - Object.keys(obj).forEach((key) => { - out[key] = expressionReducer(obj[key]); - }); - return out; - } - return obj; -} -designer.addPropsReducer(expressionReducer, TransformStage.Render); +// 国际化 & Expression 渲染时处理 +designer.addPropsReducer(deepValueParser, TransformStage.Render); skeleton.add({ area: 'mainArea', @@ -178,11 +212,4 @@ skeleton.add({ }); LiveEditing.addLiveEditingSpecificRule(liveEditingRule); - -// 实例节点选择器，线框高亮 -// addBuiltinComponentAction({ -// name: 'instance-node-selector', -// content: InstanceNodeSelector, -// important: true, -// condition: 'always' -// }); +LiveEditing.addLiveEditingSaveHandler(liveEditingSaveHander); diff --git a/packages/editor-preset-vision/src/i18n-reducer.ts b/packages/editor-preset-vision/src/i18n-reducer.ts deleted file mode 100644 index a1a153932..000000000 --- a/packages/editor-preset-vision/src/i18n-reducer.ts +++ /dev/null @@ -1,38 +0,0 @@ -import Env from './env'; -const I18nUtil = require('@ali/ve-i18n-util'); - -interface I18nObject { - type?: string; - use?: string; - key?: string; - [lang: string]: string | undefined; -} - -export function i18nReducer(obj?: any): any { - if (!obj) { - return obj; - } - if (Array.isArray(obj)) { - return obj.map((item) => i18nReducer(item)); - } - if (typeof obj === 'object') { - if (obj.type === 'i18n') { - // FIXME! use editor.get - let locale = Env.getLocale(); - if (obj.key) { - // FIXME: 此处需要升级I18nUtil，改成响应式 - return I18nUtil.get(obj.key, locale); - } - if (locale !== 'zh_CN' && locale !== 'zh_TW' && !obj[locale]) { - locale = 'en_US'; - } - return obj[obj.use || locale] || obj.zh_CN; - } - const out: I18nObject = {}; - Object.keys(obj).forEach((key) => { - out[key] = i18nReducer(obj[key]); - }); - return out; - } - return obj; -} diff --git a/packages/editor-preset-vision/src/i18n-util/index.d.ts b/packages/editor-preset-vision/src/i18n-util/index.d.ts new file mode 100644 index 000000000..d258fe9d2 --- /dev/null +++ b/packages/editor-preset-vision/src/i18n-util/index.d.ts @@ -0,0 +1,79 @@ +declare enum LANGUAGES { + zh_CN = 'zh_CN', + en_US = 'en_US' +} + +export interface I18nRecord { + type?: 'i18n'; + [key: string]: string; + /** + * i18n unique key + */ + key?: string; +} + +export interface I18nRecordData { + gmtCreate: Date; + gmtModified: Date; + i18nKey: string; + i18nText: I18nRecord; + id: number; +} + +export interface II18nUtilConfigs { + items?: {}; + /** + * 是否禁用初始化加载 + */ + disableInstantLoad?: boolean; + /** + * 初始化的时候是否全量加载 + */ + disableFullLoad?: boolean; + loader?: (configs: ILoaderConfigs) => Promise; + remover?: (key: string, dic: I18nRecord) => Promise; + saver?: (key: string, dic: I18nRecord) => Promise; +} + +export interface ILoaderConfigs { + /** + * search keywords + */ + keyword?: string; + /** + * should load all i18n items + */ + isFull?: boolean; + /** + * search i18n item based on uniqueKey + */ + key?: string; +} + +export interface II18nUtil { + init(config: II18nUtilConfigs): void; + isInitialized(): boolean; + isReady(): boolean; + attach(prop: object, value: I18nRecord, updator: () => any); + search(keyword: string, silent?: boolean); + load(configs: ILoaderConfigs): Promise; + /** + * Get local i18n Record + * @param key + * @param lang + */ + get(key: string, lang: string): string | I18nRecord; + getFromRemote(key: string): Promise; + getItem(key: string, forceData?: boolean): any; + getItems(): I18nRecord[]; + update(key: string, doc: I18nRecord, lang: LANGUAGES); + create(doc: I18nRecord, lang: LANGUAGES): string; + remove(key: string): Promise; + + onReady(func: () => any); + onRowsChange(func: () => any); + onChange(func: (dic: I18nRecord) => any); +} + +declare const i18nUtil: II18nUtil; +export default i18nUtil; diff --git a/packages/editor-preset-vision/src/i18n-util/index.js b/packages/editor-preset-vision/src/i18n-util/index.js new file mode 100644 index 000000000..06bd973ac --- /dev/null +++ b/packages/editor-preset-vision/src/i18n-util/index.js @@ -0,0 +1,310 @@ +import { EventEmitter } from 'events'; +import { obx } from '@ali/lowcode-editor-core'; + + +let keybase = Date.now(); +function keygen(maps) { + let key; + do { + key = `i18n-${(keybase).toString(36)}`; + keybase += 1; + } while (key in maps); + return key; +} + +class DocItem { + constructor(parent, doc, unInitial) { + this.parent = parent; + const { use, ...strings } = doc; + this.doc = obx.val({ + type: 'i18n', + ...strings, + }); + this.emitter = new EventEmitter; + this.inited = unInitial !== true; + } + + getKey() { + return this.doc.key; + } + + getDoc(lang) { + if (lang) { + return this.doc[lang]; + } + return this.doc; + } + + setDoc(doc, lang, initial) { + if (lang) { + this.doc[lang] = doc; + } else { + const { use, strings } = doc || {}; + Object.assign(this.doc, strings); + } + this.emitter.emit('change', this.doc); + + if (initial) { + this.inited = true; + } else if (this.inited) { + this.parent._saveChange(this.doc.key, this.doc); + } + } + + remove() { + if (!this.inited) return Promise.reject('not initialized'); + + const { key, ...doc } = this.doc; // eslint-disable-line + this.emitter.emit('change', doc); + return this.parent.remove(this.getKey()); + } + + onChange(func) { + this.emitter.on('change', func); + return () => { + this.emitter.removeListener('change', func); + }; + } +} + +class I18nUtil { + constructor() { + this.emitter = new EventEmitter; + // original data source from remote + this.i18nData = {}; + // current i18n records on the left pane + this.items = []; + this.maps = {}; + // full list of i18n records for synchronized call + this.fullList = []; + this.fullMap = {}; + + this.config = {}; + this.ready = false; + this.isInited = false; + } + + _prepareItems(items, isFull = false, isSilent = false) { + this[isFull ? 'fullList' : 'items'] = items.map((dict) => { + let item = this[isFull ? 'fullMap' : 'maps'][dict.key]; + if (item) { + item.setDoc(dict, null, true); + } else { + item = new DocItem(this, dict); + this[isFull ? 'fullMap' : 'maps'][dict.key] = item; + } + return item; + }); + + if (this.ready && !isSilent) { + this.emitter.emit('rowschange'); + this.emitter.emit('change'); + } else { + this.ready = true; + this.emitter.emit('ready'); + } + } + + _load(configs = {}, silent) { + if (!this.config.loader) { + console.error(new Error('Please load loader while init I18nUtil.')); + return Promise.reject(); + } + + return this.config.loader(configs).then((data) => { + if (configs.i18nKey) { + return Promise.resolve(data.i18nText); + } + this._prepareItems(data.data, configs.isFull, silent); + // set pagination data to i18nData + this.i18nData = data; + if (!silent) { + this.emitter.emit('rowschange'); + this.emitter.emit('change'); + } + return Promise.resolve(this.items.map(i => i.getDoc())); + }); + } + + _saveToItems(key, dict) { + let item = null; + item = this.items.find(doc => doc.getKey() === key); + if (!item) { + item = this.fullList.find(doc => doc.getKey() === key); + } + + if (item) { + item.setDoc(dict); + } else { + item = new DocItem(this, { + key, + ...dict, + }); + this.items.unshift(item); + this.fullList.unshift(item); + this.maps[key] = item; + this.fullMap[key] = item; + this._saveChange(key, dict, true); + } + } + + _saveChange(key, dict, rowschange) { + if (rowschange) { + this.emitter.emit('rowschange'); + } + this.emitter.emit('change'); + if (dict === null) { + delete this.maps[key]; + delete this.fullMap[key]; + } + return this._save(key, dict); + } + + _save(key, dict) { + const saver = dict === null ? this.config.remover : this.config.saver; + if (!saver) return Promise.reject('Saver function is not set'); + return saver(key, dict); + } + + init(config) { + if (this.isInited) return; + this.config = config || {}; + if (this.config.items) { + // inject to current page + this._prepareItems(this.config.items); + } + if (!this.config.disableInstantLoad) { + this._load({ isFull: !this.config.disableFullLoad }); + } + this.isInited = true; + } + + isInitialized() { + return this.isInited; + } + + isReady() { + return this.ready; + } + + // add events updater when i18n record change + // we should notify engine's view to change + attach(prop, value, updator) { + const isI18nValue = value && value.type === 'i18n' && value.key; + const key = isI18nValue ? value.key : null; + if (prop.i18nLink) { + if (isI18nValue && (key === prop.i18nLink.key)) { + return prop.i18nLink; + } + prop.i18nLink.detach(); + } + + if (isI18nValue) { + return { + key, + detach: this.getItem(key, value).onChange(updator), + }; + } + + return null; + } + + /** + * 搜索 i18n 词条 + * + * @param {any} keyword 搜索关键字 + * @param {boolean} [silent=false] 是否刷新左侧的 i18n 数据 + * @returns + * + * @memberof I18nUtil + */ + search(keyword, silent = false) { + return this._load({ keyword }, silent); + } + + load(configs = {}) { + return this._load(configs); + } + + get(key, lang) { + const item = this.getItem(key); + if (item) { + return item.getDoc(lang); + } + return null; + } + + getFromRemote(key) { + return this._load({ i18nKey: key }); + } + + getItem(key, forceData) { + if (forceData && !this.maps[key] && !this.fullList[key]) { + const item = new DocItem(this, { + key, + ...forceData, + }, true); + this.maps[key] = item; + this.fullMap[key] = item; + this.fullList.push(item); + this.items.push(item); + } + return this.maps[key] || this.fullMap[key]; + } + + getItems() { + return this.items; + } + + update(key, doc, lang) { + let dict = this.get(key) || {}; + if (!lang) { + dict = doc; + } else { + dict[lang] = doc; + } + this._saveToItems(key, dict); + } + + create(doc, lang) { + const dict = lang ? { [lang]: doc } : doc; + const key = keygen(this.fullMap); + this._saveToItems(key, dict); + return key; + } + + remove(key) { + const index = this.items.findIndex(item => item.getKey() === key); + const indexG = this.fullList.findIndex(item => item.getKey() === key); + if (index > -1) { + this.items.splice(index, 1); + } + if (indexG > -1) { + this.fullList.splice(index, 1); + } + return this._saveChange(key, null, true); + } + + onReady(func) { + this.emitter.on('ready', func); + return () => { + this.emitter.removeListener('ready', func); + }; + } + + onRowsChange(func) { + this.emitter.on('rowschange', func); + return () => { + this.emitter.removeListener('rowschange', func); + }; + } + + onChange(func) { + this.emitter.on('change', func); + return () => { + this.emitter.removeListener('change', func); + }; + } +} + +export default new I18nUtil(); diff --git a/packages/editor-preset-vision/src/index.ts b/packages/editor-preset-vision/src/index.ts index ed632b3ef..556fa050d 100644 --- a/packages/editor-preset-vision/src/index.ts +++ b/packages/editor-preset-vision/src/index.ts @@ -3,7 +3,7 @@ import Popup from '@ali/ve-popups'; import Icons from '@ali/ve-icons'; import logger from '@ali/vu-logger'; import { render } from 'react-dom'; -import I18nUtil from '@ali/ve-i18n-util'; +import I18nUtil from './i18n-util'; import { hotkey as Hotkey } from '@ali/lowcode-editor-core'; import { createElement } from 'react'; import { VE_EVENTS as EVENTS, VE_HOOKS as HOOKS, VERSION as Version } from './base/const'; @@ -161,11 +161,10 @@ export { Symbols, }; +const version = '6.0.0(LowcodeEngine 0.9.0-beta)'; -/* console.log( - `%cLowcodeEngine %cv${VERSION}`, - "color:#000;font-weight:bold;", - "color:green;font-weight:bold;" + `%c VisionEngine %c v${version} `, + "padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060;font-weight:bold;", + "padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e;font-weight:bold;" ); -*/ diff --git a/packages/editor-preset-vision/src/pages.ts b/packages/editor-preset-vision/src/pages.ts index ada3dfc97..23ad9fe23 100644 --- a/packages/editor-preset-vision/src/pages.ts +++ b/packages/editor-preset-vision/src/pages.ts @@ -4,33 +4,60 @@ import { DocumentModel } from '@ali/lowcode-designer'; const { project } = designer; -export interface OldPageData { +export interface PageDataV1 { + id: string; + componentsTree: RootSchema[]; + layout: RootSchema; + [dataAddon: string]: any; +} + +export interface PageDataV2 { id: string; componentsTree: RootSchema[]; [dataAddon: string]: any; } +function isPageDataV1(obj: any): obj is PageDataV1 { + return obj && obj.layout; +} +function isPageDataV2(obj: any): obj is PageDataV2 { + return obj && obj.componentsTree && Array.isArray(obj.componentsTree); +} + +type OldPageData = PageDataV1 | PageDataV2; + const pages = Object.assign(project, { setPages(pages: OldPageData[]) { if (!pages || !Array.isArray(pages) || pages.length === 0) { throw new Error('pages schema 不合法'); } - if (pages[0].componentsTree[0]) { - pages[0].componentsTree[0].componentName = 'Page'; - // FIXME - pages[0].componentsTree[0].lifeCycles = {}; - pages[0].componentsTree[0].methods = {}; + let componentsTree: any; + if (isPageDataV1(pages[0])) { + componentsTree = [pages[0].layout]; + } else { + componentsTree = pages[0].componentsTree; + if (componentsTree[0]) { + componentsTree[0].componentName = 'Page'; + // FIXME + componentsTree[0].lifeCycles = {}; + componentsTree[0].methods = {}; + } } project.load({ version: '1.0.0', componentsMap: [], - componentsTree: pages[0].componentsTree, + componentsTree, }, true); }, - addPage(data: OldPageData) { - return project.open(data.layout); + addPage(data: OldPageData | RootSchema) { + if (isPageDataV1(data)) { + data = data.layout; + } else if (isPageDataV2(data)) { + data = data.componentsTree[0]; + } + return project.open(data); }, getPage(fnOrIndex: ((page: DocumentModel) => boolean) | number) { if (typeof fnOrIndex === 'number') { diff --git a/packages/editor-preset-vision/src/panes.ts b/packages/editor-preset-vision/src/panes.ts index fdbd75fc9..5f4b9fdce 100644 --- a/packages/editor-preset-vision/src/panes.ts +++ b/packages/editor-preset-vision/src/panes.ts @@ -2,6 +2,7 @@ import { skeleton, editor } from './editor'; import { ReactElement } from 'react'; import { IWidgetBaseConfig, Skeleton } from '@ali/lowcode-editor-skeleton'; import { uniqueId } from '@ali/lowcode-utils'; +import bus from './bus'; export interface IContentItemConfig { title: string; @@ -92,6 +93,7 @@ function upgradeConfig(config: OldPaneConfig): IWidgetBaseConfig & { area: strin type: 'Panel', name: typeof title === 'string' ? title : `${name}:${index}`, content, + contentProps: props, props: { title, help: tip, @@ -132,7 +134,18 @@ function add(config: (() => OldPaneConfig) | OldPaneConfig, extraConfig?: any) { config = { ...config, ...extraConfig }; } - skeleton.add(upgradeConfig(config)); + const upgraded = upgradeConfig(config); + if (upgraded.area === 'stages') { + if (upgraded.id) { + upgraded.name = upgraded.id; + } else if (!upgraded.name) { + upgraded.name = uniqueId('stage'); + } + const stage = skeleton.add(upgraded); + return stage?.getName(); + } else { + return skeleton.add(upgraded); + } } const actionPane = Object.assign(skeleton.topArea, { @@ -164,6 +177,7 @@ const dockPane = Object.assign(skeleton.leftArea, { console.warn(`Could not find pane with name ${name}`); } pane?.active(); + bus.emit('ve.dock_pane.active_doc', pane); }, /** diff --git a/packages/editor-preset-vision/src/project.ts b/packages/editor-preset-vision/src/project.ts index ba5d2309b..9239a9497 100644 --- a/packages/editor-preset-vision/src/project.ts +++ b/packages/editor-preset-vision/src/project.ts @@ -1,4 +1,4 @@ -class Project { +export class Project { private schema: any; constructor() { diff --git a/packages/editor-preset-vision/src/vc-live-editing.ts b/packages/editor-preset-vision/src/vc-live-editing.ts index 9f1ec6410..3a03161a6 100644 --- a/packages/editor-preset-vision/src/vc-live-editing.ts +++ b/packages/editor-preset-vision/src/vc-live-editing.ts @@ -1,7 +1,7 @@ -import { EditingTarget, Node as DocNode } from '@ali/lowcode-designer'; +import { EditingTarget, Node as DocNode, SaveHandler } from '@ali/lowcode-designer'; import Env from './env'; -import { isJSExpression } from '@ali/lowcode-types'; -const I18nUtil = require('@ali/ve-i18n-util'); +import { isJSExpression, isI18nData } from '@ali/lowcode-types'; +import i18nUtil from './i18n-util'; interface I18nObject { type?: string; @@ -13,7 +13,7 @@ interface I18nObject { function getI18nText(obj: I18nObject) { let locale = Env.getLocale(); if (obj.key) { - return I18nUtil.get(obj.key, locale); + return i18nUtil.get(obj.key, locale); } if (locale !== 'zh_CN' && locale !== 'zh_TW' && !obj[locale]) { locale = 'en_US'; @@ -26,7 +26,10 @@ function getText(node: DocNode, prop: string) { if (!p || p.isUnset()) { return null; } - const v = p.getValue(); + let v = p.getValue(); + if (isJSExpression(v)) { + v = v.mock; + } if (v == null) { return null; } @@ -36,9 +39,7 @@ function getText(node: DocNode, prop: string) { if ((v as any).type === 'i18n') { return getI18nText(v as any); } - if (isJSExpression(v)) { - return v.mock; - } + return Symbol.for('not-literal'); } export function liveEditingRule(target: EditingTarget) { @@ -53,8 +54,7 @@ export function liveEditingRule(target: EditingTarget) { const innerText = targetElement.innerText; const propTarget = ['title', 'label', 'text', 'content'].find(prop => { - // TODO: enhance compare text logic - return getText(node, prop) === innerText; + return equalText(getText(node, prop), innerText); }); if (propTarget) { @@ -66,7 +66,51 @@ export function liveEditingRule(target: EditingTarget) { return null; } -// TODO: -export function liveEditingSaveHander() { - +function equalText(v: any, innerText: string) { + // TODO: enhance compare text logic + if (typeof v !== 'string') { + return false; + } + return v.trim() === innerText } + +export const liveEditingSaveHander: SaveHandler = { + condition: (prop) => { + const v = prop.getValue(); + return prop.type === 'expression' || isI18nData(v); + }, + onSaveContent: (content, prop) => { + const v = prop.getValue(); + const locale = Env.getLocale(); + let data = v; + if (isJSExpression(v)) { + data = v.mock; + } + if (isI18nData(data)) { + const i18n = data.key ? i18nUtil.getItem(data.key) : null; + if (i18n) { + i18n.setDoc(content, locale); + return; + } + data = { + ...(data as any), + [locale]: content, + }; + } else { + data = content; + } + if (isJSExpression(v)) { + prop.setValue({ + type: 'JSExpression', + value: v.value, + mock: data, + }); + } else { + prop.setValue(data); + } + } +} +// TODO: +// 非文本编辑 +// 国际化数据，改变当前 +// JSExpression, 改变 mock 或 弹出绑定变量 diff --git a/packages/editor-preset-vision/src/vision.less b/packages/editor-preset-vision/src/vision.less index d188878a5..df469d567 100644 --- a/packages/editor-preset-vision/src/vision.less +++ b/packages/editor-preset-vision/src/vision.less @@ -43,7 +43,7 @@ html { } html.engine-blur #engine { - -webkit-filter: blur(4px); + filter: blur(4px); } .engine-main { @@ -98,6 +98,11 @@ html.engine-blur #engine { } } +.vs-icon .vs-icon-del, .vs-icon .vs-icon-entry { + width: 16px!important; + height: 16px!important; +} + .lc-left-float-pane { font-size: 14px; } @@ -107,3 +112,13 @@ html.engine-preview-mode { display: none !important; } } + +.ve-popups .ve-message { + right: 290px; + + .ve-message-content { + display: flex; + align-items: center; + line-height: 22px; + } +} \ No newline at end of file diff --git a/packages/editor-setters/CHANGELOG.md b/packages/editor-setters/CHANGELOG.md index 943285574..0bd60714f 100644 --- a/packages/editor-setters/CHANGELOG.md +++ b/packages/editor-setters/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.9.3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.2...@ali/lowcode-editor-setters@0.9.3) (2020-06-15) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-setters + + +## [0.9.2](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-setters@0.9.1...@ali/lowcode-editor-setters@0.9.2) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-setters + + +## 0.9.1 (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-setters + + +## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.14...@ali/lowcode-setters@0.8.15) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-setters + ## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-setters@0.8.13...@ali/lowcode-setters@0.8.14) (2020-05-13) diff --git a/packages/editor-setters/package.json b/packages/editor-setters/package.json index d5cd4f71d..edc6a1f17 100644 --- a/packages/editor-setters/package.json +++ b/packages/editor-setters/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-editor-setters", - "version": "0.9.0", + "version": "0.9.3", "description": "Builtin setters for Ali lowCode engine", "files": [ "es", @@ -22,7 +22,7 @@ "@ali/iceluna-comp-react-node": "^1.0.5", "@ali/iceluna-sdk": "^1.0.5-beta.24", "@ali/lc-style-setter": "^0.0.1", - "@ali/lowcode-editor-core": "^0.8.12", + "@ali/lowcode-editor-core": "^0.8.16", "@alifd/next": "^1.19.16", "acorn": "^6.4.1", "classnames": "^2.2.6", diff --git a/packages/editor-skeleton/CHANGELOG.md b/packages/editor-skeleton/CHANGELOG.md index 34c16eb9c..639f93044 100644 --- a/packages/editor-skeleton/CHANGELOG.md +++ b/packages/editor-skeleton/CHANGELOG.md @@ -3,6 +3,93 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.8.26](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.25...@ali/lowcode-editor-skeleton@0.8.26) (2020-06-16) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-skeleton + + +## [0.8.25](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.24...@ali/lowcode-editor-skeleton@0.8.25) (2020-06-15) + + +### Bug Fixes + +* 修复bool类型对应的setter ([2df6230](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/2df6230)) +* 禁止组件拉到 Page 的直接子节点, 以及替换 tab 组件 ([d93a291](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/d93a291)) +* 调整保存成功弹出框位置 ([5198dae](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/5198dae)) + + +### Features + +* add URL link for setter titles ([4678408](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/4678408)) +* panel增加自动埋点 ([afc7758](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/afc7758)) +* 自动埋点 ([fecf34d](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/fecf34d)) + + + + + +## [0.8.24](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.23...@ali/lowcode-editor-skeleton@0.8.24) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-skeleton + + +## [0.8.23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.22...@ali/lowcode-editor-skeleton@0.8.23) (2020-05-19) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-skeleton + + +## [0.8.22](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.21...@ali/lowcode-editor-skeleton@0.8.22) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-skeleton + + +## [0.8.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.20...@ali/lowcode-editor-skeleton@0.8.21) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-skeleton + + +## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.19...@ali/lowcode-editor-skeleton@0.8.20) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-skeleton + + +## [0.8.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.18...@ali/lowcode-editor-skeleton@0.8.19) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-skeleton + + +## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.17...@ali/lowcode-editor-skeleton@0.8.18) (2020-05-15) + + +### Bug Fixes + +* 解决点击数据源，自动隐藏的问题 ([7dcd61c](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/7dcd61c)) + + + + ## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.16...@ali/lowcode-editor-skeleton@0.8.17) (2020-05-15) diff --git a/packages/editor-skeleton/package.json b/packages/editor-skeleton/package.json index 55f224f02..0ec27050b 100644 --- a/packages/editor-skeleton/package.json +++ b/packages/editor-skeleton/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-editor-skeleton", - "version": "0.8.17", + "version": "0.8.26", "description": "alibaba lowcode editor skeleton", "main": "lib/index.js", "module": "es/index.js", @@ -19,11 +19,11 @@ "editor" ], "dependencies": { - "@ali/lowcode-designer": "^0.9.11", - "@ali/lowcode-editor-core": "^0.8.12", - "@ali/lowcode-types": "^0.8.3", - "@ali/lowcode-utils": "^0.8.4", - "@alifd/next": "^1.x", + "@ali/lowcode-designer": "^0.9.20", + "@ali/lowcode-editor-core": "^0.8.16", + "@ali/lowcode-types": "^0.8.6", + "@ali/lowcode-utils": "^0.8.7", + "@alifd/next": "^1.20.12", "classnames": "^2.2.6", "react": "^16.8.1", "react-dom": "^16.8.1" diff --git a/packages/editor-skeleton/src/components/field/fields.tsx b/packages/editor-skeleton/src/components/field/fields.tsx index 51b7a2232..797fc361a 100644 --- a/packages/editor-skeleton/src/components/field/fields.tsx +++ b/packages/editor-skeleton/src/components/field/fields.tsx @@ -12,6 +12,7 @@ import InlineTip from './inlinetip'; export interface FieldProps { className?: string; + meta?: { package: string; componentName: string } | string; title?: TitleContent | null; defaultDisplay?: 'accordion' | 'inline' | 'block'; collapsed?: boolean; @@ -28,6 +29,11 @@ export class Field extends Component { display: this.props.defaultDisplay || 'inline', }; + constructor(props: any) { + super(props); + this.handleClear = this.handleClear.bind(this); + } + private toggleExpand = () => { const { onExpandChange } = this.props; const collapsed = !this.state.collapsed; @@ -68,6 +74,10 @@ export class Field extends Component { }); this.dispose = () => observer.disconnect(); } + private handleClear(e: React.MouseEvent) { + e.stopPropagation(); + this.props.onClear && this.props.onClear(); + } componentDidMount() { const { defaultDisplay } = this.props; if (!defaultDisplay || defaultDisplay === 'inline') { @@ -106,19 +116,27 @@ export class Field extends Component { } render() { - const { className, children, title, valueState, onClear, name: propName, tip } = this.props; + const { className, children, meta, title, valueState, onClear, name: propName, tip } = this.props; const { display, collapsed } = this.state; const isAccordion = display === 'accordion'; + let hostName = ''; + if (typeof meta === 'object') { + hostName = `${meta?.package || ''}-${meta.componentName || ''}`; + } else if (typeof meta === 'string') { + hostName = meta; + } + const id = `${hostName}-${propName || (title as any)['en-US'] || (title as any)['zh-CN']}`; const tipContent = this.getTipContent(propName!, tip); return (

- {createValueState(valueState, onClear)} + {createValueState(valueState, this.handleClear)} <InlineTip position="top">{tipContent}</InlineTip> </div> @@ -143,7 +161,7 @@ export class Field extends Component<FieldProps> { * * TODO: turn number to enum */ -function createValueState(valueState?: number, onClear?: () => void) { +function createValueState(valueState?: number, onClear?: (e: React.MouseEvent) => void) { let tip: any = null; let className = 'lc-valuestate'; let icon: any = null; diff --git a/packages/editor-skeleton/src/components/field/index.less b/packages/editor-skeleton/src/components/field/index.less index f1b155b2f..1ba86368d 100644 --- a/packages/editor-skeleton/src/components/field/index.less +++ b/packages/editor-skeleton/src/components/field/index.less @@ -67,16 +67,16 @@ } } - &.lc-plain-field { - // for top-level style - // padding: 8px 10px; - > .lc-field-body { - flex: 1; - min-width: 0; - display: flex; - align-items: center; - } - } + // &.lc-plain-field { + // // for top-level style + // // padding: 8px 10px; + // > .lc-field-body { + // flex: 1; + // min-width: 0; + // display: flex; + // align-items: center; + // } + // } &.lc-inline-field { display: flex; @@ -211,14 +211,14 @@ } // 3rd level field title width should short - .lc-field-body .lc-inline-field { - > .lc-field-head { - width: 50px; - .lc-title-label { - width: 50px; - } - } - } + // .lc-field-body .lc-inline-field { + // > .lc-field-head { + // width: 50px; + // .lc-title-label { + // width: 50px; + // } + // } + // } >.lc-block-setter { flex: 1; } diff --git a/packages/editor-skeleton/src/components/popup/index.tsx b/packages/editor-skeleton/src/components/popup/index.tsx index 9018531cb..f52b7904d 100644 --- a/packages/editor-skeleton/src/components/popup/index.tsx +++ b/packages/editor-skeleton/src/components/popup/index.tsx @@ -59,8 +59,8 @@ export class PopupPipe { } } -export default class PopupService extends Component<{ actionKey?: string; safeId?: string }> { - private popupPipe = new PopupPipe(); +export default class PopupService extends Component<{ popupPipe?: PopupPipe; actionKey?: string; safeId?: string }> { + private popupPipe = this.props.popupPipe || new PopupPipe(); componentWillUnmount() { this.popupPipe.purge(); @@ -121,6 +121,7 @@ export class PopupContent extends PureComponent<{ safeId?: string }> { className="lc-ballon" align="l" id={this.props.safeId} + alignEdge safeNode={id} visible={visible} style={{ width }} @@ -135,7 +136,7 @@ export class PopupContent extends PureComponent<{ safeId?: string }> { trigger={<div className="lc-popup-placeholder" style={pos} />} triggerType="click" animation={false} - // needAdjust + needAdjust shouldUpdatePosition > <div className="lc-ballon-title">{title}</div> diff --git a/packages/editor-skeleton/src/components/popup/style.less b/packages/editor-skeleton/src/components/popup/style.less index b115fd371..720a5d9c3 100644 --- a/packages/editor-skeleton/src/components/popup/style.less +++ b/packages/editor-skeleton/src/components/popup/style.less @@ -13,10 +13,16 @@ } .lc-ballon-content { margin-top: 10px; - // width: 300px; + // FIXME: popup position is bad + max-height: calc(60vh); + overflow-x: hidden; + overflow-y: auto; + } + &.next-balloon-closable { + padding: 10px !important; } .next-balloon-close { - top: 4px; - right: 4px; + top: 4px !important; + right: 4px !important; } } diff --git a/packages/editor-skeleton/src/components/settings/settings-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-pane.tsx index cb6ed7ec9..5b75bddfa 100644 --- a/packages/editor-skeleton/src/components/settings/settings-pane.tsx +++ b/packages/editor-skeleton/src/components/settings/settings-pane.tsx @@ -1,11 +1,13 @@ -import { Component } from 'react'; +import { Component, MouseEvent } from 'react'; import { shallowIntl, createSetterContent, observer } from '@ali/lowcode-editor-core'; import { createContent } from '@ali/lowcode-utils'; import { Field, createField } from '../field'; -import PopupService from '../popup'; +import PopupService, { PopupPipe } from '../popup'; +import { SkeletonContext } from '../../context'; import { SettingField, isSettingField, SettingTopEntry, SettingEntry } from '@ali/lowcode-designer'; import { isSetterConfig, CustomView } from '@ali/lowcode-types'; import { intl } from '../../locale'; +import { Skeleton } from 'editor-skeleton/src/skeleton'; @observer class SettingFieldView extends Component<{ field: SettingField }> { @@ -61,6 +63,7 @@ class SettingFieldView extends Component<{ field: SettingField }> { return createField( { + meta: field?.componentMeta?.npm || field?.componentMeta?.componentName || '', title: field.title, collapsed: !field.expanded, valueState: field.isRequired ? 10 : field.valueState, @@ -119,6 +122,7 @@ class SettingGroupView extends Component<{ field: SettingField }> { return ( <Field defaultDisplay="accordion" + meta={field?.componentMeta?.npm || field?.componentMeta?.componentName || ''} title={field.title} collapsed={!field.expanded} onExpandChange={(expandState) => { @@ -145,17 +149,54 @@ export function createSettingFieldView(item: SettingField | CustomView, field: S @observer export class SettingsPane extends Component<{ target: SettingTopEntry | SettingField }> { + static contextType = SkeletonContext; shouldComponentUpdate() { return false; } + private popupPipe = new PopupPipe(); + private pipe = this.popupPipe.create(); + + private handleClick = (e: MouseEvent) => { + // compatiable vision stageBox + // TODO: optimize these codes + const pane = e.currentTarget as HTMLDivElement; + let entry: any; + function getTarget(node: any): any { + if (!pane.contains(node) || (node.nodeName === 'A' && node.getAttribute('href'))) { + return null; + } + + const target = node.dataset ? node.dataset.stageTarget : null; + if (target) { + entry = node; + return target; + } + return getTarget(node.parentNode); + } + const target = getTarget(e.target); + if (!target) { + return; + } + + const skeleton = this.context as Skeleton; + if (!skeleton || !skeleton.stages) { + return; + } + const stage = skeleton.stages.container.get(target); + if (stage) { + this.pipe.send(stage.content, stage.title); + this.pipe.show(entry); + } + }; + render() { const { target } = this.props; const items = target.items; return ( - <div className="lc-settings-pane"> + <div className="lc-settings-pane" onClick={this.handleClick}> {/* todo: add head for single use */} - <PopupService> + <PopupService popupPipe={this.popupPipe}> <div className="lc-settings-content"> {items.map((item, index) => createSettingFieldView(item, target, index))} </div> diff --git a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx index 182a521b7..7ce04e9ca 100644 --- a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx +++ b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { Tab, Breadcrumb } from '@alifd/next'; -import { Title, observer, Editor } from '@ali/lowcode-editor-core'; -import { Node, isSettingField, SettingField } from '@ali/lowcode-designer'; +import { Title, observer, Editor, obx, globalContext } from '@ali/lowcode-editor-core'; +import { Node, isSettingField, SettingField, Designer } from '@ali/lowcode-designer'; import { SettingsMain } from './main'; import { SettingsPane } from './settings-pane'; import { createIcon } from '@ali/lowcode-utils'; @@ -10,6 +10,8 @@ import { createIcon } from '@ali/lowcode-utils'; export class SettingsPrimaryPane extends Component<{ editor: Editor }> { private main = new SettingsMain(this.props.editor); + @obx.ref private _activeKey?: any; + shouldComponentUpdate() { return false; } @@ -26,13 +28,16 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> { if (settings.isMultiple) { return ( <div className="lc-settings-navigator"> - {createIcon(settings.componentMeta?.icon, { className: 'lc-settings-navigator-icon'})} + {createIcon(settings.componentMeta?.icon, { className: 'lc-settings-navigator-icon' })} <Title title={settings.componentMeta!.title} /> <span>x {settings.nodes.length}</span> </div> ); } + const editor = globalContext.get(Editor); + const designer = editor.get(Designer); + const current = designer?.currentSelection?.getNodes()?.[0]; let node: Node | null = settings.first; const items = []; let l = 3; @@ -41,17 +46,35 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> { l === 2 ? {} : { - onMouseOver: hoverNode.bind(null, node, true), - onMouseOut: hoverNode.bind(null, node, false), - onClick: selectNode.bind(null, node), - }; - items.unshift(<Breadcrumb.Item {...props} key={node.id}><Title title={node.title} /></Breadcrumb.Item>); + onMouseOver: hoverNode.bind(null, node, true), + onMouseOut: hoverNode.bind(null, node, false), + onClick: () => { + selectNode.call(null, node); + const getName = (node) => { + const npm = node?.componentMeta?.npm; + return [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || + node?.componentMeta?.componentName || + ''; + }; + const selected = getName(current); + const target = getName(node); + editor?.emit('skeleton.settingsPane.Breadcrumb', { + selected, + target, + }); + }, + }; + items.unshift( + <Breadcrumb.Item {...props} key={node.id}> + <Title title={node.title} /> + </Breadcrumb.Item>, + ); node = node.parent; } return ( <div className="lc-settings-navigator"> - {createIcon(this.main.componentMeta?.icon, { className: 'lc-settings-navigator-icon'})} + {createIcon(this.main.componentMeta?.icon, { className: 'lc-settings-navigator-icon' })} <Breadcrumb className="lc-settings-node-breadcrumb">{items}</Breadcrumb> </div> ); @@ -82,7 +105,7 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> { } const { items } = settings; - if (items.length > 5 || items.some(item => !isSettingField(item) || !item.isGroup)) { + if (items.length > 5 || items.some((item) => !isSettingField(item) || !item.isGroup)) { return ( <div className="lc-settings-main"> {this.renderBreadcrumb()} @@ -93,21 +116,34 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> { ); } + let matched = false; + const tabs = (items as SettingField[]).map((field) => { + if (this._activeKey === field.name) { + matched = true; + } + return ( + <Tab.Item className="lc-settings-tab-item" title={<Title title={field.title} />} key={field.name}> + <SettingsPane target={field} key={field.id} /> + </Tab.Item> + ); + }); + const activeKey = matched ? this._activeKey : (items[0] as SettingField).name; + return ( <div className="lc-settings-main"> <Tab - key={settings.id} + activeKey={activeKey} + onChange={(tabKey) => { + this._activeKey = tabKey; + }} navClassName="lc-settings-tabs" animation={false} excessMode="dropdown" contentClassName="lc-settings-tabs-content" + disableKeyboard={true} extra={this.renderBreadcrumb()} > - {(items as SettingField[]).map(field => ( - <Tab.Item className="lc-settings-tab-item" title={<Title title={field.title} />} key={field.name}> - <SettingsPane target={field} key={field.id} /> - </Tab.Item> - ))} + {tabs} </Tab> </div> ); diff --git a/packages/editor-skeleton/src/components/widget-views.tsx b/packages/editor-skeleton/src/components/widget-views.tsx index 13dad59f8..e14b2e2df 100644 --- a/packages/editor-skeleton/src/components/widget-views.tsx +++ b/packages/editor-skeleton/src/components/widget-views.tsx @@ -1,7 +1,7 @@ import { Component, ReactElement } from 'react'; import { Icon } from '@alifd/next'; import classNames from 'classnames'; -import { Title, observer, Tip } from '@ali/lowcode-editor-core'; +import { Title, observer, Tip, globalContext, Editor } from '@ali/lowcode-editor-core'; import { DockProps } from '../types'; import PanelDock from '../widget/panel-dock'; import { composeTitle } from '../widget/utils'; @@ -27,7 +27,7 @@ function HelpTip({ tip }: any) { return ( <div> <a href={tip.url} target="_blank" rel="noopener noreferrer"> - <Icon type="help" size="small" className="lc-help-tip"/> + <Icon type="help" size="small" className="lc-help-tip" /> </a> <Tip>{tip.content}</Tip> </div> @@ -35,10 +35,10 @@ function HelpTip({ tip }: any) { } return ( <div> - <Icon type="help" size="small" className="lc-help-tip"/> + <Icon type="help" size="small" className="lc-help-tip" /> <Tip>{tip.content}</Tip> </div> - ) + ); } @observer @@ -49,7 +49,7 @@ export class PanelDockView extends Component<DockProps & { dock: PanelDock }> { componentDidUpdate() { this.checkActived(); } - private lastActived: boolean = false; + private lastActived = false; checkActived() { const { dock } = this.props; if (dock.actived !== this.lastActived) { @@ -77,12 +77,10 @@ export class PanelDockView extends Component<DockProps & { dock: PanelDock }> { } } -export class DialogDockView extends Component { - -} +export class DialogDockView extends Component {} @observer -export class TitledPanelView extends Component<{ panel: Panel }> { +export class TitledPanelView extends Component<{ panel: Panel; area?: string }> { shouldComponentUpdate() { return false; } @@ -92,7 +90,7 @@ export class TitledPanelView extends Component<{ panel: Panel }> { componentDidUpdate() { this.checkVisible(); } - private lastVisible: boolean = false; + private lastVisible = false; checkVisible() { const { panel } = this.props; const currentVisible = panel.inited && panel.visible; @@ -106,14 +104,23 @@ export class TitledPanelView extends Component<{ panel: Panel }> { } } render() { - const { panel } = this.props; + const { panel, area } = this.props; if (!panel.inited) { return null; } + const editor = globalContext.get(Editor); + const panelName = area ? `${area}-${panel.name}` : panel.name; + editor?.emit('skeleton.panel.toggle', { + name: panelName || '', + status: panel.visible ? 'show' : 'hide', + }); return ( - <div className={classNames('lc-titled-panel', { - hidden: !panel.visible, - })}> + <div + className={classNames('lc-titled-panel', { + hidden: !panel.visible, + })} + id={panelName} + > <PanelTitle panel={panel} /> <div className="lc-panel-body">{panel.body}</div> </div> @@ -122,7 +129,7 @@ export class TitledPanelView extends Component<{ panel: Panel }> { } @observer -export class PanelView extends Component<{ panel: Panel }> { +export class PanelView extends Component<{ panel: Panel; area?: string }> { shouldComponentUpdate() { return false; } @@ -132,7 +139,7 @@ export class PanelView extends Component<{ panel: Panel }> { componentDidUpdate() { this.checkVisible(); } - private lastVisible: boolean = false; + private lastVisible = false; checkVisible() { const { panel } = this.props; const currentVisible = panel.inited && panel.visible; @@ -150,15 +157,22 @@ export class PanelView extends Component<{ panel: Panel }> { } } render() { - const { panel } = this.props; + const { panel, area } = this.props; if (!panel.inited) { return null; } + const editor = globalContext.get(Editor); + const panelName = area ? `${area}-${panel.name}` : panel.name; + editor?.emit('skeleton.panel.toggle', { + name: panelName || '', + status: panel.visible ? 'show' : 'hide', + }); return ( <div className={classNames('lc-panel', { hidden: !panel.visible, })} + id={panelName} > {panel.body} </div> @@ -233,7 +247,7 @@ export class WidgetView extends Component<{ widget: IWidget }> { componentDidUpdate() { this.checkVisible(); } - private lastVisible: boolean = false; + private lastVisible = false; checkVisible() { const { widget } = this.props; const currentVisible = widget.visible; diff --git a/packages/editor-skeleton/src/context.ts b/packages/editor-skeleton/src/context.ts new file mode 100644 index 000000000..ee213e886 --- /dev/null +++ b/packages/editor-skeleton/src/context.ts @@ -0,0 +1,4 @@ +import { createContext } from 'react'; +import { Skeleton } from './skeleton'; + +export const SkeletonContext = createContext<Skeleton>({} as any); diff --git a/packages/editor-skeleton/src/index.ts b/packages/editor-skeleton/src/index.ts index 2a8dcdbf8..05c35594d 100644 --- a/packages/editor-skeleton/src/index.ts +++ b/packages/editor-skeleton/src/index.ts @@ -3,5 +3,6 @@ export * from './skeleton'; export * from './types'; export * from './components/settings'; export * from './components/field'; +export * from './context'; import './register-defaults'; diff --git a/packages/editor-skeleton/src/layouts/left-area.tsx b/packages/editor-skeleton/src/layouts/left-area.tsx index 00a83a328..53dd4805b 100644 --- a/packages/editor-skeleton/src/layouts/left-area.tsx +++ b/packages/editor-skeleton/src/layouts/left-area.tsx @@ -24,11 +24,12 @@ class Contents extends Component<{ area: Area }> { const { area } = this.props; const top: any[] = []; const bottom: any[] = []; - area.container.items.forEach(item => { + area.container.items.forEach((item) => { + const content = <div id={`left-area-${item.name}`}>{item.content}</div>; if (item.align === 'bottom') { - bottom.push(item.content); + bottom.push(content); } else { - top.push(item.content); + top.push(content); } }); return ( diff --git a/packages/editor-skeleton/src/layouts/left-fixed-pane.tsx b/packages/editor-skeleton/src/layouts/left-fixed-pane.tsx index 2ad17c903..1a7359d38 100644 --- a/packages/editor-skeleton/src/layouts/left-fixed-pane.tsx +++ b/packages/editor-skeleton/src/layouts/left-fixed-pane.tsx @@ -25,19 +25,17 @@ export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, P 'lc-area-visible': area.visible, })} > - { - !hideTitleBar && ( - <Button - text - className="lc-pane-close" - onClick={() => { - area.setVisible(false); - }} - > - <Icon type="close" /> - </Button> - ) - } + {!hideTitleBar && ( + <Button + text + className="lc-pane-close" + onClick={() => { + area.setVisible(false); + }} + > + <Icon type="close" /> + </Button> + )} <Contents area={area} /> </div> ); @@ -51,10 +49,6 @@ class Contents extends Component<{ area: Area<PanelConfig, Panel> }> { } render() { const { area } = this.props; - return ( - <Fragment> - {area.container.items.map((panel) => panel.content)} - </Fragment> - ); + return <Fragment>{area.container.items.map((panel) => panel.content)}</Fragment>; } } diff --git a/packages/editor-skeleton/src/layouts/left-float-pane.tsx b/packages/editor-skeleton/src/layouts/left-float-pane.tsx index 44a8df171..d904887f7 100644 --- a/packages/editor-skeleton/src/layouts/left-float-pane.tsx +++ b/packages/editor-skeleton/src/layouts/left-float-pane.tsx @@ -31,6 +31,15 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }> if (this.shell?.contains(target)) { return true; } + // 点击了 iframe 内容，算失焦 + if (document.querySelector('.lc-simulator-content-frame') + .contentWindow.document.documentElement.contains(target)) { + return false; + } + // 点击非编辑区域的 popup / dialog 等，不触发失焦 + if (!document.querySelector('.lc-workbench')?.contains(target)) { + return true; + } const docks = area.current?.getAssocDocks(); if (docks && docks?.length) { return docks.some(dock => dock.getDOMNode()?.contains(target)); @@ -41,6 +50,7 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }> this.props.area.setVisible(false); }, onBlur: () => { + // debugger this.props.area.setVisible(false); }, }); diff --git a/packages/editor-skeleton/src/layouts/top-area.tsx b/packages/editor-skeleton/src/layouts/top-area.tsx index b9dee5c38..4e4b05258 100644 --- a/packages/editor-skeleton/src/layouts/top-area.tsx +++ b/packages/editor-skeleton/src/layouts/top-area.tsx @@ -30,7 +30,7 @@ class Contents extends Component<{ area: Area, itemClassName?: string }> { return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1); }).forEach(item => { const content = ( - <div className={itemClassName || ''}> + <div className={itemClassName || ''} id={`top-area-${item.name}`}> {item.content} </div> ); diff --git a/packages/editor-skeleton/src/layouts/workbench.tsx b/packages/editor-skeleton/src/layouts/workbench.tsx index c5e75c691..7d116172b 100644 --- a/packages/editor-skeleton/src/layouts/workbench.tsx +++ b/packages/editor-skeleton/src/layouts/workbench.tsx @@ -11,6 +11,7 @@ import MainArea from './main-area'; import BottomArea from './bottom-area'; import RightArea from './right-area'; import './workbench.less'; +import { SkeletonContext } from '../context'; import { EditorConfig, PluginClassSet } from '@ali/lowcode-types'; @observer @@ -28,19 +29,21 @@ export class Workbench extends Component<{ skeleton: Skeleton; config?: EditorCo const { skeleton, className, topAreaItemClassName } = this.props; return ( <div className={classNames('lc-workbench', className)}> - <TopArea area={skeleton.topArea} itemClassName={topAreaItemClassName} /> - <div className="lc-workbench-body"> - <LeftArea area={skeleton.leftArea} /> - <LeftFloatPane area={skeleton.leftFloatArea} /> - <LeftFixedPane area={skeleton.leftFixedArea} /> - <div className="lc-workbench-center"> - <Toolbar area={skeleton.toolbar} /> - <MainArea area={skeleton.mainArea} /> - <BottomArea area={skeleton.bottomArea} /> + <SkeletonContext.Provider value={this.props.skeleton}> + <TopArea area={skeleton.topArea} itemClassName={topAreaItemClassName} /> + <div className="lc-workbench-body"> + <LeftArea area={skeleton.leftArea} /> + <LeftFloatPane area={skeleton.leftFloatArea} /> + <LeftFixedPane area={skeleton.leftFixedArea} /> + <div className="lc-workbench-center"> + <Toolbar area={skeleton.toolbar} /> + <MainArea area={skeleton.mainArea} /> + <BottomArea area={skeleton.bottomArea} /> + </div> + <RightArea area={skeleton.rightArea} /> </div> - <RightArea area={skeleton.rightArea} /> - </div> - <TipContainer /> + <TipContainer /> + </SkeletonContext.Provider> </div> ); } diff --git a/packages/editor-skeleton/src/skeleton.ts b/packages/editor-skeleton/src/skeleton.ts index 4b47e8ad6..6ed4ce842 100644 --- a/packages/editor-skeleton/src/skeleton.ts +++ b/packages/editor-skeleton/src/skeleton.ts @@ -294,7 +294,7 @@ export class Skeleton { let { area } = parsedConfig; if (!area) { if (parsedConfig.type === 'Panel') { - area = 'leftFloatArea' + area = 'leftFloatArea'; } else if (parsedConfig.type === 'Widget') { area = 'mainArea'; } else { diff --git a/packages/editor-skeleton/src/transducers/addon-combine.ts b/packages/editor-skeleton/src/transducers/addon-combine.ts index 8c2f55639..35844ab29 100644 --- a/packages/editor-skeleton/src/transducers/addon-combine.ts +++ b/packages/editor-skeleton/src/transducers/addon-combine.ts @@ -1,5 +1,6 @@ import { TransformedComponentMetadata, FieldConfig, SettingTarget } from '@ali/lowcode-types'; import { IconSlot } from '../icons/slot'; +import { getConvertedExtraKey } from '@ali/lowcode-designer'; export default function(metadata: TransformedComponentMetadata): TransformedComponentMetadata { const { componentName, configure = {} } = metadata; @@ -86,7 +87,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp if (componentName === 'Slot') { basicInfo.icon = IconSlot; propsGroup = [{ - name: '___title', + name: getConvertedExtraKey('title'), title: { type: 'i18n', 'en-US': 'Slot Title', @@ -203,7 +204,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp if (!isRoot) { if (supports.condition !== false) { advanceGroup.push({ - name: '___condition', + name: getConvertedExtraKey('condition'), title: { type: 'i18n', 'zh-CN': '是否渲染', 'en-US': 'Condition' }, defaultValue: true, setter: [{ @@ -219,7 +220,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp title: { type: 'i18n', 'zh-CN': '循环', 'en-US': 'Loop' }, items: [ { - name: '___loop', + name: getConvertedExtraKey('loop'), title: { type: 'i18n', 'zh-CN': '循环数据', 'en-US': 'Loop Data' }, defaultValue: [], setter: [{ @@ -232,7 +233,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp }], }, { - name: '___loopArgs.0', + name: getConvertedExtraKey('loopArgs.0'), title: { type: 'i18n', 'zh-CN': '迭代变量名', 'en-US': 'Loop Item' }, setter: { componentName: 'StringSetter', @@ -242,7 +243,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp }, }, { - name: '___loopArgs.1', + name: getConvertedExtraKey('loopArgs.1'), title: { type: 'i18n', 'zh-CN': '索引变量名', 'en-US': 'Loop Index' }, setter: { componentName: 'StringSetter', diff --git a/packages/editor-skeleton/src/transducers/parse-props.ts b/packages/editor-skeleton/src/transducers/parse-props.ts index 2ea525ef2..3c216c396 100644 --- a/packages/editor-skeleton/src/transducers/parse-props.ts +++ b/packages/editor-skeleton/src/transducers/parse-props.ts @@ -53,7 +53,7 @@ function propTypeToSetter(propType: PropType): SetterType { }; case 'bool': return { - componentName: 'NumberSetter', + componentName: 'BoolSetter', isRequired, initialValue: false, }; diff --git a/packages/editor-skeleton/src/types.ts b/packages/editor-skeleton/src/types.ts index 43896fee2..a33e7776d 100644 --- a/packages/editor-skeleton/src/types.ts +++ b/packages/editor-skeleton/src/types.ts @@ -18,6 +18,7 @@ export interface WidgetConfig extends IWidgetBaseConfig { props?: { align?: "left" | "right" | "bottom" | "center" | "top"; onInit?: (widget: IWidget) => void; + title?: TitleContent; }; content?: string | ReactElement | ComponentType<any>; // children } diff --git a/packages/editor-skeleton/src/widget/panel.ts b/packages/editor-skeleton/src/widget/panel.ts index 3f2699fe9..25c343cd0 100644 --- a/packages/editor-skeleton/src/widget/panel.ts +++ b/packages/editor-skeleton/src/widget/panel.ts @@ -53,13 +53,16 @@ export default class Panel implements IWidget { } get content(): ReactNode { + const area = this.config?.area || this.parent?.name; + console.log(area); if (this.plain) { return createElement(PanelView, { panel: this, key: this.id, + area, }); } - return createElement(TitledPanelView, { panel: this, key: this.id }); + return createElement(TitledPanelView, { panel: this, key: this.id, area }); } readonly title: TitleContent; diff --git a/packages/editor-skeleton/src/widget/widget.ts b/packages/editor-skeleton/src/widget/widget.ts index 92bd7ae0f..a7edb3ff9 100644 --- a/packages/editor-skeleton/src/widget/widget.ts +++ b/packages/editor-skeleton/src/widget/widget.ts @@ -4,6 +4,7 @@ import { createContent, uniqueId } from '@ali/lowcode-utils'; import { WidgetConfig, IWidgetBaseConfig } from '../types'; import { Skeleton } from '../skeleton'; import { WidgetView } from '../components/widget-views'; +import { TitleContent } from '@ali/lowcode-types'; export interface IWidget { readonly name: string; @@ -56,10 +57,13 @@ export default class Widget implements IWidget { }); } + readonly title: TitleContent; + constructor(readonly skeleton: Skeleton, readonly config: WidgetConfig) { const { props = {}, name } = config; this.name = name; this.align = props.align; + this.title = props.title || name; if (props.onInit) { props.onInit.call(this, this); } diff --git a/packages/plugin-components-pane/CHANGELOG.md b/packages/plugin-components-pane/CHANGELOG.md index 008953cdf..113e4a732 100644 --- a/packages/plugin-components-pane/CHANGELOG.md +++ b/packages/plugin-components-pane/CHANGELOG.md @@ -3,6 +3,89 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.23"></a> +## [0.8.23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.22...@ali/lowcode-plugin-components-pane@0.8.23) (2020-06-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-components-pane + +<a name="0.8.22"></a> +## [0.8.22](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.21...@ali/lowcode-plugin-components-pane@0.8.22) (2020-06-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-components-pane + +<a name="0.8.21"></a> +## [0.8.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.20...@ali/lowcode-plugin-components-pane@0.8.21) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-components-pane + +<a name="0.8.20"></a> +## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.19...@ali/lowcode-plugin-components-pane@0.8.20) (2020-05-19) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-components-pane + +<a name="0.8.19"></a> +## [0.8.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.18...@ali/lowcode-plugin-components-pane@0.8.19) (2020-05-18) + + +### Features + +* use new ComponentPane ([56ae5ad](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/56ae5ad)) + + + + +<a name="0.8.18"></a> +## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.17...@ali/lowcode-plugin-components-pane@0.8.18) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-components-pane + +<a name="0.8.17"></a> +## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.16...@ali/lowcode-plugin-components-pane@0.8.17) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-components-pane + +<a name="0.8.16"></a> +## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.15...@ali/lowcode-plugin-components-pane@0.8.16) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-components-pane + +<a name="0.8.15"></a> +## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.14...@ali/lowcode-plugin-components-pane@0.8.15) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-components-pane + +<a name="0.8.14"></a> +## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.13...@ali/lowcode-plugin-components-pane@0.8.14) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-components-pane + <a name="0.8.13"></a> ## [0.8.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.12...@ali/lowcode-plugin-components-pane@0.8.13) (2020-05-15) diff --git a/packages/plugin-components-pane/package.json b/packages/plugin-components-pane/package.json index 5ab72d625..576e7aa0c 100644 --- a/packages/plugin-components-pane/package.json +++ b/packages/plugin-components-pane/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-components-pane", - "version": "0.8.13", + "version": "0.8.23", "description": "alibaba lowcode editor component-list plugin", "files": [ "es/", @@ -20,11 +20,11 @@ ], "author": "xiayang.xy", "dependencies": { - "@ali/lowcode-designer": "^0.9.11", - "@ali/lowcode-editor-core": "^0.8.12", - "@ali/lowcode-types": "^0.8.3", - "@alifd/next": "^1.19.19", + "@ali/lowcode-designer": "^0.9.20", + "@ali/lowcode-editor-core": "^0.8.16", + "@ali/lowcode-types": "^0.8.6", "@ali/ve-component-list": "^1.1.1", + "@alifd/next": "^1.19.19", "react": "^16.8.1" }, "devDependencies": { diff --git a/packages/plugin-designer/CHANGELOG.md b/packages/plugin-designer/CHANGELOG.md index 2e493a99c..2ff2dcc36 100644 --- a/packages/plugin-designer/CHANGELOG.md +++ b/packages/plugin-designer/CHANGELOG.md @@ -3,6 +3,78 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.9.20"></a> +## [0.9.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.19...@ali/lowcode-plugin-designer@0.9.20) (2020-06-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-designer + +<a name="0.9.19"></a> +## [0.9.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.18...@ali/lowcode-plugin-designer@0.9.19) (2020-06-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-designer + +<a name="0.9.18"></a> +## [0.9.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.17...@ali/lowcode-plugin-designer@0.9.18) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-designer + +<a name="0.9.17"></a> +## [0.9.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.16...@ali/lowcode-plugin-designer@0.9.17) (2020-05-19) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-designer + +<a name="0.9.16"></a> +## [0.9.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.15...@ali/lowcode-plugin-designer@0.9.16) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-designer + +<a name="0.9.15"></a> +## [0.9.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.14...@ali/lowcode-plugin-designer@0.9.15) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-designer + +<a name="0.9.14"></a> +## [0.9.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.13...@ali/lowcode-plugin-designer@0.9.14) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-designer + +<a name="0.9.13"></a> +## [0.9.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.12...@ali/lowcode-plugin-designer@0.9.13) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-designer + +<a name="0.9.12"></a> +## [0.9.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.11...@ali/lowcode-plugin-designer@0.9.12) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-designer + <a name="0.9.11"></a> ## [0.9.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.10...@ali/lowcode-plugin-designer@0.9.11) (2020-05-15) diff --git a/packages/plugin-designer/package.json b/packages/plugin-designer/package.json index bde4e28f2..f5b6bf450 100644 --- a/packages/plugin-designer/package.json +++ b/packages/plugin-designer/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-designer", - "version": "0.9.11", + "version": "0.9.20", "description": "alibaba lowcode editor designer plugin", "files": [ "es", @@ -20,8 +20,8 @@ ], "author": "xiayang.xy", "dependencies": { - "@ali/lowcode-designer": "^0.9.11", - "@ali/lowcode-editor-core": "^0.8.12", + "@ali/lowcode-designer": "^0.9.20", + "@ali/lowcode-editor-core": "^0.8.16", "react": "^16.8.1", "react-dom": "^16.8.1" }, diff --git a/packages/plugin-event-bind-dialog/CHANGELOG.md b/packages/plugin-event-bind-dialog/CHANGELOG.md index 00b293cc5..395845187 100644 --- a/packages/plugin-event-bind-dialog/CHANGELOG.md +++ b/packages/plugin-event-bind-dialog/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.16"></a> +## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-event-bind-dialog@0.8.15...@ali/lowcode-plugin-event-bind-dialog@0.8.16) (2020-06-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-event-bind-dialog + +<a name="0.8.15"></a> +## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-event-bind-dialog@0.8.14...@ali/lowcode-plugin-event-bind-dialog@0.8.15) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-event-bind-dialog + +<a name="0.8.14"></a> +## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-event-bind-dialog@0.8.13...@ali/lowcode-plugin-event-bind-dialog@0.8.14) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-event-bind-dialog + +<a name="0.8.13"></a> +## [0.8.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-event-bind-dialog@0.8.12...@ali/lowcode-plugin-event-bind-dialog@0.8.13) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-event-bind-dialog + <a name="0.8.12"></a> ## [0.8.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-event-bind-dialog@0.8.11...@ali/lowcode-plugin-event-bind-dialog@0.8.12) (2020-05-13) diff --git a/packages/plugin-event-bind-dialog/package.json b/packages/plugin-event-bind-dialog/package.json index b7c044896..5bd955f74 100644 --- a/packages/plugin-event-bind-dialog/package.json +++ b/packages/plugin-event-bind-dialog/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-event-bind-dialog", - "version": "0.8.12", + "version": "0.8.16", "description": "alibaba lowcode editor event bind dialog plugin", "files": [ "es", @@ -19,8 +19,8 @@ ], "author": "zude.hzd", "dependencies": { - "@ali/lowcode-editor-core": "^0.8.12", - "@ali/lowcode-types": "^0.8.3", + "@ali/lowcode-editor-core": "^0.8.16", + "@ali/lowcode-types": "^0.8.6", "@alifd/next": "^1.19.16", "react": "^16.8.1", "react-dom": "^16.8.1" diff --git a/packages/plugin-outline-pane/CHANGELOG.md b/packages/plugin-outline-pane/CHANGELOG.md index 747908330..ee74cd541 100644 --- a/packages/plugin-outline-pane/CHANGELOG.md +++ b/packages/plugin-outline-pane/CHANGELOG.md @@ -3,6 +3,78 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<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) diff --git a/packages/plugin-outline-pane/package.json b/packages/plugin-outline-pane/package.json index 9f566d1c4..64cec1af9 100644 --- a/packages/plugin-outline-pane/package.json +++ b/packages/plugin-outline-pane/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-outline-pane", - "version": "0.8.17", + "version": "0.8.26", "description": "Outline pane for Ali lowCode engine", "files": [ "es", @@ -14,10 +14,10 @@ "test:snapshot": "ava --update-snapshots" }, "dependencies": { - "@ali/lowcode-designer": "^0.9.11", - "@ali/lowcode-editor-core": "^0.8.12", - "@ali/lowcode-types": "^0.8.3", - "@ali/lowcode-utils": "^0.8.4", + "@ali/lowcode-designer": "^0.9.20", + "@ali/lowcode-editor-core": "^0.8.16", + "@ali/lowcode-types": "^0.8.6", + "@ali/lowcode-utils": "^0.8.7", "@alifd/next": "^1.19.16", "classnames": "^2.2.6", "react": "^16", diff --git a/packages/plugin-outline-pane/src/views/tree.tsx b/packages/plugin-outline-pane/src/views/tree.tsx index b629d6c44..8512825d6 100644 --- a/packages/plugin-outline-pane/src/views/tree.tsx +++ b/packages/plugin-outline-pane/src/views/tree.tsx @@ -52,7 +52,7 @@ export default class TreeView extends Component<{ tree: Tree }> { const doc = node.document; const selection = doc.selection; const id = node.id; - const isMulti = e.metaKey || e.ctrlKey; + const isMulti = e.metaKey || e.ctrlKey || e.shiftKey; designer.activeTracker.track(node); if (isMulti && !isRootNode(node) && selection.has(id)) { if (!isFormEvent(e.nativeEvent)) { @@ -96,7 +96,8 @@ export default class TreeView extends Component<{ tree: Tree }> { const doc = node.document; const selection = doc.selection; - const isMulti = e.metaKey || e.ctrlKey; + // TODO: shift selection + const isMulti = e.metaKey || e.ctrlKey || e.shiftKey; const isLeftButton = e.button === 0; if (isLeftButton && !isRootNode(node)) { diff --git a/packages/plugin-sample-logo/CHANGELOG.md b/packages/plugin-sample-logo/CHANGELOG.md index ca30c410e..86c7c4ffe 100644 --- a/packages/plugin-sample-logo/CHANGELOG.md +++ b/packages/plugin-sample-logo/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.15"></a> +## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-logo@0.8.14...@ali/lowcode-plugin-sample-logo@0.8.15) (2020-06-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-logo + +<a name="0.8.14"></a> +## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-logo@0.8.13...@ali/lowcode-plugin-sample-logo@0.8.14) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-logo + +<a name="0.8.13"></a> +## [0.8.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-logo@0.8.12...@ali/lowcode-plugin-sample-logo@0.8.13) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-logo + +<a name="0.8.12"></a> +## [0.8.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-logo@0.8.11...@ali/lowcode-plugin-sample-logo@0.8.12) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-logo + <a name="0.8.11"></a> ## [0.8.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-logo@0.8.10...@ali/lowcode-plugin-sample-logo@0.8.11) (2020-05-13) diff --git a/packages/plugin-sample-logo/package.json b/packages/plugin-sample-logo/package.json index 2cb9f1eeb..e1b3e9cd3 100644 --- a/packages/plugin-sample-logo/package.json +++ b/packages/plugin-sample-logo/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-sample-logo", - "version": "0.8.11", + "version": "0.8.15", "description": "alibaba lowcode editor logo plugin", "files": [ "es/", @@ -20,7 +20,7 @@ ], "author": "xiayang.xy", "dependencies": { - "@ali/lowcode-editor-core": "^0.8.12", + "@ali/lowcode-editor-core": "^0.8.16", "react": "^16.8.1" }, "devDependencies": { diff --git a/packages/plugin-sample-preview/CHANGELOG.md b/packages/plugin-sample-preview/CHANGELOG.md index 0cc662a19..b4f29a5e7 100644 --- a/packages/plugin-sample-preview/CHANGELOG.md +++ b/packages/plugin-sample-preview/CHANGELOG.md @@ -3,6 +3,78 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.25"></a> +## [0.8.25](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.24...@ali/lowcode-plugin-sample-preview@0.8.25) (2020-06-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview + +<a name="0.8.24"></a> +## [0.8.24](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.23...@ali/lowcode-plugin-sample-preview@0.8.24) (2020-06-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview + +<a name="0.8.23"></a> +## [0.8.23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.22...@ali/lowcode-plugin-sample-preview@0.8.23) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview + +<a name="0.8.22"></a> +## [0.8.22](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.21...@ali/lowcode-plugin-sample-preview@0.8.22) (2020-05-19) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview + +<a name="0.8.21"></a> +## [0.8.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.20...@ali/lowcode-plugin-sample-preview@0.8.21) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview + +<a name="0.8.20"></a> +## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.19...@ali/lowcode-plugin-sample-preview@0.8.20) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview + +<a name="0.8.19"></a> +## [0.8.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.18...@ali/lowcode-plugin-sample-preview@0.8.19) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview + +<a name="0.8.18"></a> +## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.17...@ali/lowcode-plugin-sample-preview@0.8.18) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview + +<a name="0.8.17"></a> +## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.16...@ali/lowcode-plugin-sample-preview@0.8.17) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview + <a name="0.8.16"></a> ## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.15...@ali/lowcode-plugin-sample-preview@0.8.16) (2020-05-15) diff --git a/packages/plugin-sample-preview/package.json b/packages/plugin-sample-preview/package.json index c0d4bfeae..7eb98093b 100644 --- a/packages/plugin-sample-preview/package.json +++ b/packages/plugin-sample-preview/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-sample-preview", - "version": "0.8.16", + "version": "0.8.25", "description": "alibaba lowcode editor sample preview plugin", "files": [ "es", @@ -18,8 +18,8 @@ "editor" ], "dependencies": { - "@ali/lowcode-designer": "^0.9.11", - "@ali/lowcode-editor-core": "^0.8.12", + "@ali/lowcode-designer": "^0.9.20", + "@ali/lowcode-editor-core": "^0.8.16", "@alifd/next": "^1.x", "react": "^16.8.1" }, diff --git a/packages/plugin-source-editor/CHANGELOG.md b/packages/plugin-source-editor/CHANGELOG.md index e401f19c3..135a7bf97 100644 --- a/packages/plugin-source-editor/CHANGELOG.md +++ b/packages/plugin-source-editor/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.13"></a> +## [0.8.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.12...@ali/lowcode-plugin-source-editor@0.8.13) (2020-06-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-source-editor + +<a name="0.8.12"></a> +## [0.8.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.11...@ali/lowcode-plugin-source-editor@0.8.12) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-source-editor + +<a name="0.8.11"></a> +## [0.8.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.10...@ali/lowcode-plugin-source-editor@0.8.11) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-source-editor + +<a name="0.8.10"></a> +## [0.8.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.9...@ali/lowcode-plugin-source-editor@0.8.10) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-source-editor + <a name="0.8.9"></a> ## [0.8.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.8...@ali/lowcode-plugin-source-editor@0.8.9) (2020-05-15) diff --git a/packages/plugin-source-editor/package.json b/packages/plugin-source-editor/package.json index 6f2be4dbe..69ca4e671 100644 --- a/packages/plugin-source-editor/package.json +++ b/packages/plugin-source-editor/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-source-editor", - "version": "0.8.9", + "version": "0.8.13", "description": "alibaba lowcode editor source-editor plugin", "files": [ "es", @@ -19,7 +19,7 @@ ], "author": "zude.hzd", "dependencies": { - "@ali/lowcode-editor-core": "^0.8.12", + "@ali/lowcode-editor-core": "^0.8.16", "@alifd/next": "^1.19.16", "js-beautify": "^1.10.1", "prettier": "^1.18.2", diff --git a/packages/plugin-undo-redo/CHANGELOG.md b/packages/plugin-undo-redo/CHANGELOG.md index 7e35b45bc..3de8b34f3 100644 --- a/packages/plugin-undo-redo/CHANGELOG.md +++ b/packages/plugin-undo-redo/CHANGELOG.md @@ -3,6 +3,78 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.25"></a> +## [0.8.25](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.24...@ali/lowcode-plugin-undo-redo@0.8.25) (2020-06-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo + +<a name="0.8.24"></a> +## [0.8.24](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.23...@ali/lowcode-plugin-undo-redo@0.8.24) (2020-06-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo + +<a name="0.8.23"></a> +## [0.8.23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.22...@ali/lowcode-plugin-undo-redo@0.8.23) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo + +<a name="0.8.22"></a> +## [0.8.22](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.21...@ali/lowcode-plugin-undo-redo@0.8.22) (2020-05-19) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo + +<a name="0.8.21"></a> +## [0.8.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.20...@ali/lowcode-plugin-undo-redo@0.8.21) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo + +<a name="0.8.20"></a> +## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.19...@ali/lowcode-plugin-undo-redo@0.8.20) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo + +<a name="0.8.19"></a> +## [0.8.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.18...@ali/lowcode-plugin-undo-redo@0.8.19) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo + +<a name="0.8.18"></a> +## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.17...@ali/lowcode-plugin-undo-redo@0.8.18) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo + +<a name="0.8.17"></a> +## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.16...@ali/lowcode-plugin-undo-redo@0.8.17) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo + <a name="0.8.16"></a> ## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.15...@ali/lowcode-plugin-undo-redo@0.8.16) (2020-05-15) diff --git a/packages/plugin-undo-redo/package.json b/packages/plugin-undo-redo/package.json index 94f17770e..9acd6597a 100644 --- a/packages/plugin-undo-redo/package.json +++ b/packages/plugin-undo-redo/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-undo-redo", - "version": "0.8.16", + "version": "0.8.25", "description": "alibaba lowcode editor undo redo plugin", "files": [ "es", @@ -19,11 +19,11 @@ ], "author": "xiayang.xy", "dependencies": { - "@ali/lowcode-designer": "^0.9.11", - "@ali/lowcode-editor-core": "^0.8.12", - "@ali/lowcode-editor-skeleton": "^0.8.17", - "@ali/lowcode-types": "^0.8.3", - "@ali/lowcode-utils": "^0.8.4", + "@ali/lowcode-designer": "^0.9.20", + "@ali/lowcode-editor-core": "^0.8.16", + "@ali/lowcode-editor-skeleton": "^0.8.26", + "@ali/lowcode-types": "^0.8.6", + "@ali/lowcode-utils": "^0.8.7", "react": "^16.8.1", "react-dom": "^16.8.1" }, diff --git a/packages/plugin-variable-bind-dialog/CHANGELOG.md b/packages/plugin-variable-bind-dialog/CHANGELOG.md index 378f71b52..a1e8169f3 100644 --- a/packages/plugin-variable-bind-dialog/CHANGELOG.md +++ b/packages/plugin-variable-bind-dialog/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.14"></a> +## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-variable-bind-dialog@0.8.13...@ali/lowcode-plugin-variable-bind-dialog@0.8.14) (2020-06-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-variable-bind-dialog + +<a name="0.8.13"></a> +## [0.8.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-variable-bind-dialog@0.8.12...@ali/lowcode-plugin-variable-bind-dialog@0.8.13) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-variable-bind-dialog + +<a name="0.8.12"></a> +## [0.8.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-variable-bind-dialog@0.8.11...@ali/lowcode-plugin-variable-bind-dialog@0.8.12) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-variable-bind-dialog + +<a name="0.8.11"></a> +## [0.8.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-variable-bind-dialog@0.8.10...@ali/lowcode-plugin-variable-bind-dialog@0.8.11) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-variable-bind-dialog + <a name="0.8.10"></a> ## [0.8.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-variable-bind-dialog@0.8.9...@ali/lowcode-plugin-variable-bind-dialog@0.8.10) (2020-05-13) diff --git a/packages/plugin-variable-bind-dialog/package.json b/packages/plugin-variable-bind-dialog/package.json index 324b9933b..38334c573 100644 --- a/packages/plugin-variable-bind-dialog/package.json +++ b/packages/plugin-variable-bind-dialog/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-variable-bind-dialog", - "version": "0.8.10", + "version": "0.8.14", "description": "alibaba lowcode editor variable bind dialog plugin", "files": [ "es", @@ -19,7 +19,7 @@ ], "author": "zude.hzd", "dependencies": { - "@ali/lowcode-editor-core": "^0.8.12", + "@ali/lowcode-editor-core": "^0.8.16", "@alifd/next": "^1.19.16", "react": "^16.8.1", "react-dom": "^16.8.1" diff --git a/packages/plugin-zh-en/CHANGELOG.md b/packages/plugin-zh-en/CHANGELOG.md index d6fd1b773..93eaaeb67 100644 --- a/packages/plugin-zh-en/CHANGELOG.md +++ b/packages/plugin-zh-en/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.18"></a> +## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-zh-en@0.8.17...@ali/lowcode-plugin-zh-en@0.8.18) (2020-06-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-zh-en + +<a name="0.8.17"></a> +## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-zh-en@0.8.16...@ali/lowcode-plugin-zh-en@0.8.17) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-zh-en + +<a name="0.8.16"></a> +## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-zh-en@0.8.15...@ali/lowcode-plugin-zh-en@0.8.16) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-zh-en + +<a name="0.8.15"></a> +## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-zh-en@0.8.14...@ali/lowcode-plugin-zh-en@0.8.15) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-zh-en + <a name="0.8.14"></a> ## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-zh-en@0.8.13...@ali/lowcode-plugin-zh-en@0.8.14) (2020-05-13) diff --git a/packages/plugin-zh-en/package.json b/packages/plugin-zh-en/package.json index a45d5eb95..1bc9dde9e 100644 --- a/packages/plugin-zh-en/package.json +++ b/packages/plugin-zh-en/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-zh-en", - "version": "0.8.14", + "version": "0.8.18", "description": "alibaba lowcode editor zhong english plugin", "files": [ "es", @@ -14,9 +14,9 @@ "test:snapshot": "ava --update-snapshots" }, "dependencies": { - "@ali/lowcode-editor-core": "^0.8.12", - "@ali/lowcode-types": "^0.8.3", - "@ali/lowcode-utils": "^0.8.4", + "@ali/lowcode-editor-core": "^0.8.16", + "@ali/lowcode-types": "^0.8.6", + "@ali/lowcode-utils": "^0.8.7", "react": "^16.8.1", "react-dom": "^16.8.1" }, diff --git a/packages/react-simulator-renderer/CHANGELOG.md b/packages/react-simulator-renderer/CHANGELOG.md index fbc0420a2..6f7ed6dd4 100644 --- a/packages/react-simulator-renderer/CHANGELOG.md +++ b/packages/react-simulator-renderer/CHANGELOG.md @@ -3,6 +3,89 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.26"></a> +## [0.8.26](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.25...@ali/lowcode-react-simulator-renderer@0.8.26) (2020-06-16) + + + + +**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer + +<a name="0.8.25"></a> +## [0.8.25](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.24...@ali/lowcode-react-simulator-renderer@0.8.25) (2020-06-15) + + +### Bug Fixes + +* render children ([487f257](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/487f257)) + + + + +<a name="0.8.24"></a> +## [0.8.24](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.23...@ali/lowcode-react-simulator-renderer@0.8.24) (2020-05-20) + + + + +**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer + +<a name="0.8.23"></a> +## [0.8.23](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.22...@ali/lowcode-react-simulator-renderer@0.8.23) (2020-05-19) + + + + +**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer + +<a name="0.8.22"></a> +## [0.8.22](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.21...@ali/lowcode-react-simulator-renderer@0.8.22) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer + +<a name="0.8.21"></a> +## [0.8.21](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.20...@ali/lowcode-react-simulator-renderer@0.8.21) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer + +<a name="0.8.20"></a> +## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.19...@ali/lowcode-react-simulator-renderer@0.8.20) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer + +<a name="0.8.19"></a> +## [0.8.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.18...@ali/lowcode-react-simulator-renderer@0.8.19) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer + +<a name="0.8.18"></a> +## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.17...@ali/lowcode-react-simulator-renderer@0.8.18) (2020-05-16) + + + + +**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer + +<a name="0.8.17"></a> +## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.16...@ali/lowcode-react-simulator-renderer@0.8.17) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer + <a name="0.8.16"></a> ## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.15...@ali/lowcode-react-simulator-renderer@0.8.16) (2020-05-15) diff --git a/packages/react-simulator-renderer/package.json b/packages/react-simulator-renderer/package.json index ff2fe733e..7d03e7032 100644 --- a/packages/react-simulator-renderer/package.json +++ b/packages/react-simulator-renderer/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@ali/lowcode-react-simulator-renderer", - "version": "0.8.16", + "version": "0.8.26", "description": "react simulator renderer for alibaba lowcode designer", "main": "lib/index.js", "module": "es/index.js", @@ -13,10 +13,10 @@ "test:snapshot": "ava --update-snapshots" }, "dependencies": { - "@ali/lowcode-designer": "^0.9.11", - "@ali/lowcode-react-renderer": "^0.8.8", - "@ali/lowcode-types": "^0.8.3", - "@ali/lowcode-utils": "^0.8.4", + "@ali/lowcode-designer": "^0.9.20", + "@ali/lowcode-react-renderer": "^0.8.0", + "@ali/lowcode-types": "^0.8.6", + "@ali/lowcode-utils": "^0.8.7", "@ali/vu-css-style": "^1.0.2", "@recore/obx": "^1.0.8", "@recore/obx-react": "^1.0.7", diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx index c2f2e03ab..a7c400dbd 100644 --- a/packages/react-simulator-renderer/src/renderer-view.tsx +++ b/packages/react-simulator-renderer/src/renderer-view.tsx @@ -105,12 +105,13 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> { customCreateElement={(Component: any, props: any, children: any) => { const { __id, __desingMode, ...viewProps } = props; viewProps.componentId = __id; - viewProps._leaf = host.document.getNode(__id); + const leaf = host.document.getNode(__id); + viewProps._leaf = leaf; return createElement( getDeviceView(Component, device, designMode), viewProps, - children == null ? [] : Array.isArray(children) ? children : [children], + leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : null, ); }} onCompGetRef={(schema: any, ref: ReactInstance | null) => { diff --git a/packages/react-simulator-renderer/src/renderer.less b/packages/react-simulator-renderer/src/renderer.less index c4f1d352b..76d83aacf 100644 --- a/packages/react-simulator-renderer/src/renderer.less +++ b/packages/react-simulator-renderer/src/renderer.less @@ -83,6 +83,16 @@ body.engine-document { &:after { clear: both; } + + /* + .next-input-group, + .next-checkbox-group,.next-date-picker,.next-input,.next-month-picker, + .next-number-picker,.next-radio-group,.next-range,.next-range-picker, + .next-rating,.next-select,.next-switch,.next-time-picker,.next-upload, + .next-year-picker, + .next-breadcrumb-item,.next-calendar-header,.next-calendar-table { + pointer-events: none !important; + }*/ } .engine-live-editing { diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts index a5bee9da7..c5441de93 100644 --- a/packages/react-simulator-renderer/src/renderer.ts +++ b/packages/react-simulator-renderer/src/renderer.ts @@ -1,4 +1,4 @@ -import { createElement, ReactInstance, ComponentType } from 'react'; +import React, { createElement, ReactInstance, ComponentType, ReactElement } from 'react'; import { render as reactRender } from 'react-dom'; import { host } from './host'; import SimulatorRendererView from './renderer-view'; @@ -8,9 +8,9 @@ import { getClientRects } from './utils/get-client-rects'; import loader from './utils/loader'; import { reactFindDOMNodes, FIBER_KEY } from './utils/react-find-dom-nodes'; import { isESModule, isElement, cursor, setNativeSelection } from '@ali/lowcode-utils'; -import { RootSchema, NpmInfo } from '@ali/lowcode-types'; +import { RootSchema, NpmInfo, ComponentSchema } from '@ali/lowcode-types'; // just use types -import { BuiltinSimulatorRenderer, NodeInstance } from '@ali/lowcode-designer'; +import { BuiltinSimulatorRenderer, NodeInstance, Component } from '@ali/lowcode-designer'; import Slot from './builtin-components/slot'; import Leaf from './builtin-components/leaf'; @@ -210,6 +210,39 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer { return this.instancesMap.get(id) || null; } + createComponent(schema: ComponentSchema): Component | null { + const _schema = { + ...schema, + }; + _schema.methods = {}; + _schema.lifeCycles = {}; + + const getElement = (componentsMap: any, schema: any): ReactElement => { + const Com = componentsMap[schema.componentName]; + let children = null; + if (schema.children && schema.children.length > 0) { + children = schema.children.map((item: any) => getElement(componentsMap, item)); + } + const _leaf = host.document.designer.currentDocument?.createNode(schema); + const props = host.document.designer.transformProps(schema.props || {}, host.document.createNode(schema), 1 /*TransformStage.Render*/); + return createElement(Com, {...props, _leaf}, children); + } + + const renderer = this; + class Com extends React.Component { + render() { + const componentsMap = renderer.componentsMap; + let children = null; + if (_schema.children && Array.isArray(_schema.children)) { + children = _schema.children?.map((item:any) => getElement(componentsMap, item)); + } + return createElement(React.Fragment, {}, children); + } + } + + return Com; + } + getClosestNodeInstance(from: ReactInstance, nodeId?: string): NodeInstance<ReactInstance> | null { return getClosestNodeInstance(from, nodeId); } diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md index ecf357478..0a854bb2c 100644 --- a/packages/types/CHANGELOG.md +++ b/packages/types/CHANGELOG.md @@ -3,6 +3,36 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.6"></a> +## [0.8.6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-types@0.8.5...@ali/lowcode-types@0.8.6) (2020-06-15) + + +### Features + +* support prop.autorun ([c0a5235](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/c0a5235)) + + + + +<a name="0.8.5"></a> +## [0.8.5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-types@0.8.4...@ali/lowcode-types@0.8.5) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-types + +<a name="0.8.4"></a> +## [0.8.4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-types@0.8.3...@ali/lowcode-types@0.8.4) (2020-05-15) + + +### Features + +* add filter reducer ([17c6ed3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/17c6ed3)) + + + + <a name="0.8.3"></a> ## [0.8.3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-types@0.8.2...@ali/lowcode-types@0.8.3) (2020-05-13) diff --git a/packages/types/package.json b/packages/types/package.json index 9ec880c2d..2c83c0d54 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-types", - "version": "0.8.3", + "version": "0.8.6", "description": "Types for Ali lowCode engine", "files": [ "es", diff --git a/packages/types/src/metadata.ts b/packages/types/src/metadata.ts index b3b11aed0..d5a3c59bc 100644 --- a/packages/types/src/metadata.ts +++ b/packages/types/src/metadata.ts @@ -5,7 +5,7 @@ import { TitleContent } from './title'; import { PropConfig } from './prop-config'; import { NpmInfo } from './npm'; import { FieldConfig } from './field-config'; -import { NodeSchema, NodeData } from './schema'; +import { NodeSchema, NodeData, ComponentSchema } from './schema'; import { SettingTarget } from './setting-target'; export type NestingFilter = (testNode: any, currentNode: any) => boolean; @@ -45,6 +45,15 @@ export interface InitialItem { name: string; initial: (target: SettingTarget, currentValue: any) => any; } +export interface FilterItem { + name: string; + filter: (target: SettingTarget, currentValue: any) => any; +} +export interface AutorunItem { + name: string; + autorun: (target: SettingTarget) => any; +} + export interface Experimental { context?: { [contextInfoName: string]: any }; @@ -52,8 +61,9 @@ export interface Experimental { view?: ComponentType<any>; transducers?: any; // ? should support initials?: InitialItem[]; + filters?: FilterItem[]; + autoruns?: AutorunItem[]; callbacks?: Callbacks; - // TODO: thinkof function initialChildren?: NodeData[] | ((target: SettingTarget) => NodeData[]); // 样式 及 位置，handle上必须有明确的标识以便事件路由判断，或者主动设置事件独占模式 @@ -80,7 +90,7 @@ export interface Experimental { liveTextEditing?: LiveTextEditingConfig[]; } -// thinkof Array +// thinkof Array export interface LiveTextEditingConfig { propTarget: string; selector?: string; @@ -153,6 +163,7 @@ export interface ComponentMetadata { props?: PropConfig[]; configure?: FieldConfig[] | Configure; experimental?: Experimental; + schema?: ComponentSchema; } export interface TransformedComponentMetadata extends ComponentMetadata { diff --git a/packages/utils/CHANGELOG.md b/packages/utils/CHANGELOG.md index 60c543810..a62cb4ab8 100644 --- a/packages/utils/CHANGELOG.md +++ b/packages/utils/CHANGELOG.md @@ -3,6 +3,30 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.7"></a> +## [0.8.7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-utils@0.8.6...@ali/lowcode-utils@0.8.7) (2020-06-15) + + + + +**Note:** Version bump only for package @ali/lowcode-utils + +<a name="0.8.6"></a> +## [0.8.6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-utils@0.8.5...@ali/lowcode-utils@0.8.6) (2020-05-18) + + + + +**Note:** Version bump only for package @ali/lowcode-utils + +<a name="0.8.5"></a> +## [0.8.5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-utils@0.8.4...@ali/lowcode-utils@0.8.5) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-utils + <a name="0.8.4"></a> ## [0.8.4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-utils@0.8.3...@ali/lowcode-utils@0.8.4) (2020-05-13) diff --git a/packages/utils/package.json b/packages/utils/package.json index fdde7f0f8..0c2ec1653 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-utils", - "version": "0.8.4", + "version": "0.8.7", "description": "Utils for Ali lowCode engine", "files": [ "es", @@ -14,7 +14,7 @@ "test:snapshot": "ava --update-snapshots" }, "dependencies": { - "@ali/lowcode-types": "^0.8.3", + "@ali/lowcode-types": "^0.8.6", "@alifd/next": "^1.19.16", "react": "^16" }, diff --git a/scripts/build.sh b/scripts/build.sh new file mode 100755 index 000000000..2db229212 --- /dev/null +++ b/scripts/build.sh @@ -0,0 +1,5 @@ +#!/usr/bin/env bash + +lerna run build --stream +cp -R ./packages/react-simulator-renderer/dist/* ./packages/editor-preset-general/dist +cp -R ./packages/react-simulator-renderer/dist/* ./packages/editor-preset-vision/dist diff --git a/scripts/deploy.sh b/scripts/deploy.sh index 037f18614..a07e6f797 100755 --- a/scripts/deploy.sh +++ b/scripts/deploy.sh @@ -21,18 +21,18 @@ echo "" # work mkdir packages -# cp -r $WORK_DIR/packages/demo packages/demo +cp -r $WORK_DIR/packages/demo packages/demo cp -r $WORK_DIR/packages/react-simulator-renderer packages/react-simulator-renderer -# cp -r $WORK_DIR/packages/editor-core packages/editor-core -cp -r $WORK_DIR/packages/vision-preset packages/vision-preset +cp -r $WORK_DIR/packages/editor-preset-vision packages/editor-preset-vision +# cp -r $WORK_DIR/packages/editor-preset-general packages/editor-preset-general lerna bootstrap lerna run cloud-build --stream cd $WORK_DIR -# mv deploy-space/packages/demo/build $BUILD_DEST -mv deploy-space/packages/react-simulator-renderer/dist $BUILD_DEST -# mv deploy-space/packages/editor-core/dist/* $BUILD_DEST -mv deploy-space/packages/vision-preset/dist/* $BUILD_DEST +mv deploy-space/packages/demo/build $BUILD_DEST +mv deploy-space/packages/react-simulator-renderer/dist/* $BUILD_DEST +mv deploy-space/packages/editor-preset-vision/dist/* $BUILD_DEST +# mv deploy-space/packages/editor-preset-general/dist/* $BUILD_DEST cp deploy-space/static/* $BUILD_DEST echo "complete"