From 2e3f60d86c780b7dc4c3fa4fa4bef2f185733766 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B9=BD=E5=9F=8E?= Date: Sun, 3 May 2020 21:02:52 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8D=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E5=88=87=E6=8D=A2=E5=A4=B1=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../designer/setting/setting-prop-entry.ts | 34 +++++++++++++++---- packages/designer/src/document/node/node.ts | 33 ++++++++++++++---- packages/types/src/index.ts | 1 + packages/types/src/node.ts | 5 +++ 4 files changed, 60 insertions(+), 13 deletions(-) create mode 100644 packages/types/src/node.ts diff --git a/packages/designer/src/designer/setting/setting-prop-entry.ts b/packages/designer/src/designer/setting/setting-prop-entry.ts index 7a4913e69..a231eaf2b 100644 --- a/packages/designer/src/designer/setting/setting-prop-entry.ts +++ b/packages/designer/src/designer/setting/setting-prop-entry.ts @@ -1,10 +1,11 @@ -import { obx, computed } from '@ali/lowcode-editor-core'; +import { obx, computed, autorun } from '@ali/lowcode-editor-core'; import { IEditor, isJSExpression } from '@ali/lowcode-types'; import { uniqueId } from '@ali/lowcode-utils'; import { SettingEntry } from './setting-entry'; import { Node } from '../../document'; import { ComponentMeta } from '../../component-meta'; import { Designer } from '../designer'; +import { EventEmitter } from 'events'; export class SettingPropEntry implements SettingEntry { // === static properties === @@ -20,6 +21,8 @@ export class SettingPropEntry implements SettingEntry { readonly type: 'field' | 'group'; readonly id = uniqueId('entry'); + readonly emitter = new EventEmitter(); + // ==== dynamic properties ==== @obx.ref private _name: string | number; get name() { @@ -59,6 +62,14 @@ export class SettingPropEntry implements SettingEntry { this.isSingle = parent.isSingle; this.designer = parent.designer; this.top = parent.top; + + autorun(({ firstRun }) => { + const value = this.getValue(); + if (firstRun) { + return; + } + this.emitter.emit('valuechange', value); + }); } getId() { @@ -88,7 +99,7 @@ export class SettingPropEntry implements SettingEntry { const propName = this.path.join('.'); let l = this.nodes.length; while (l-- > 1) { - this.nodes[l].getProp(propName)?.remove() + this.nodes[l].getProp(propName)?.remove(); } } @@ -117,7 +128,6 @@ export class SettingPropEntry implements SettingEntry { if (setValue) { setValue(this, val); } - // TODO: emit value change } /** @@ -170,9 +180,21 @@ export class SettingPropEntry implements SettingEntry { return this.top; } - onValueChange() { - // TODO: - return () => {}; + onValueChange(func: () => any) { + this.emitter.on('valuechange', func); + + return () => { + this.emitter.removeListener('valuechange', func); + }; + } + + /** + * @deprecated + */ + valueChange() { + console.warn('valueChange deprecated'); + + this.emitter.emit('valuechange'); } getDefaultValue() { diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index cd4d1db5b..1406ce2fe 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -10,6 +10,7 @@ import { SlotSchema, PageSchema, ComponentSchema, + NodeStatus, } from '@ali/lowcode-types'; import { Props, EXTRA_KEY_PREFIX } from './props/props'; import { DocumentModel } from '../document-model'; @@ -483,7 +484,7 @@ export class Node { } const { props = {}, extras } = this.props.export(stage) || {}; - const _extras_: {[key: string]: any} = { + const _extras_: { [key: string]: any } = { ...extras, }; if (_extras_) { @@ -597,16 +598,34 @@ export class Node { this.children?.mergeChildren(remover, adder, sorter); } + @obx.val status: NodeStatus = { + inPlaceEditing: false, + locking: false, + pseudo: false, + }; + /** * @deprecated */ - getStatus() { - return 'default'; + getStatus(field?: keyof NodeStatus) { + if (field && this.status[field] != null) { + return this.status[field]; + } + + return this.status; } /** * @deprecated */ - setStatus() {} + setStatus(field: keyof NodeStatus, flag: boolean) { + if (!this.status.hasOwnProperty(field)) { + return; + } + + if (flag !== this.status[field]) { + this.status[field] = flag; + } + } /** * @deprecated */ @@ -666,9 +685,9 @@ export interface LeafNode extends Node { readonly children: null; } -export interface SlotNode extends ParentalNode {} -export interface PageNode extends ParentalNode {} -export interface ComponentNode extends ParentalNode {} +export type SlotNode = ParentalNode; +export type PageNode = ParentalNode; +export type ComponentNode = ParentalNode; export type RootNode = PageNode | ComponentNode; export function isNode(node: any): node is Node { diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 31aa669f3..4129097f2 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -13,3 +13,4 @@ export * from './utils'; export * from './value-type'; export * from './setter-config'; export * from './setting-target'; +export * from './node'; diff --git a/packages/types/src/node.ts b/packages/types/src/node.ts new file mode 100644 index 000000000..400f6d987 --- /dev/null +++ b/packages/types/src/node.ts @@ -0,0 +1,5 @@ +export interface NodeStatus { + locking: boolean; + pseudo: boolean; + inPlaceEditing: boolean; +} From edb480d74c88cd1d5415f9c4aad581a61f819900 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A4=E7=9F=97?= Date: Mon, 4 May 2020 13:18:01 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=AF=8C=E6=96=87=E6=9C=AC=E9=AB=98=E7=BA=A7=E5=86=85=E5=AE=B9?= =?UTF-8?q?=E5=BC=B9=E5=B1=82=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 顶层缺少容器class，导致下游组件样式失效。 --- packages/vision-preset/src/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/vision-preset/src/index.ts b/packages/vision-preset/src/index.ts index 31185f2d2..db32da4d9 100644 --- a/packages/vision-preset/src/index.ts +++ b/packages/vision-preset/src/index.ts @@ -26,6 +26,11 @@ import { designer, editor } from './editor'; import './vision.less'; function init(container?: Element) { + //TODO: dirty fix + // 之前的组件库依赖了这个样式，临时fix一下。 + // 取决于预览模式是否保留。 + document.documentElement.classList.add('engine-design-mode'); + if (!container) { container = document.createElement('div'); document.body.appendChild(container); From 5a2bd6f86f0a4390241509ab0f74d81a6ca6269e Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Mon, 4 May 2020 13:55:17 +0800 Subject: [PATCH 3/3] =?UTF-8?q?vision=20demo=20=E6=94=AF=E6=8C=81=20Action?= =?UTF-8?q?Pane?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/package.json | 2 - packages/demo/src/editor/config/components.js | 4 +- packages/demo/src/editor/index.tsx | 4 +- packages/demo/src/vision/index.ts | 38 +++++++++++++++++++ .../editor-skeleton/src/layouts/workbench.tsx | 7 ++-- packages/editor-skeleton/src/widget/panel.ts | 15 ++++++++ packages/vision-preset/package.json | 1 - packages/vision-preset/src/editor.ts | 6 +-- packages/vision-preset/src/index.ts | 1 + packages/vision-preset/src/vision.less | 17 +++++++++ 10 files changed, 82 insertions(+), 13 deletions(-) diff --git a/packages/demo/package.json b/packages/demo/package.json index 14f8c4162..ed3092db1 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -20,13 +20,11 @@ "@ali/lowcode-plugin-sample-logo": "^0.8.8", "@ali/lowcode-plugin-sample-preview": "^0.8.11", "@ali/lowcode-plugin-settings-pane": "^0.8.8", - "@ali/lowcode-plugin-source-editor": "^0.8.5", "@ali/lowcode-plugin-undo-redo": "^0.8.9", "@ali/lowcode-plugin-variable-bind-dialog": "^0.8.7", "@ali/lowcode-plugin-zh-en": "^0.8.11", "@ali/lowcode-react-renderer": "^0.8.5", "@ali/lowcode-runtime": "^0.8.13", - "@ali/lowcode-setters": "^0.8.11", "@ali/lowcode-utils": "^0.8.2", "@ali/ve-action-pane": "^4.7.0-beta.0", "@ali/ve-datapool-pane": "^6.4.3", diff --git a/packages/demo/src/editor/config/components.js b/packages/demo/src/editor/config/components.js index e844c44ed..95831f033 100644 --- a/packages/demo/src/editor/config/components.js +++ b/packages/demo/src/editor/config/components.js @@ -9,7 +9,7 @@ import settingsPane from '@ali/lowcode-plugin-settings-pane'; import designer from '@ali/lowcode-plugin-designer'; import eventBindDialog from '@ali/lowcode-plugin-event-bind-dialog'; import variableBindDialog from '@ali/lowcode-plugin-variable-bind-dialog'; -import sourceEditor from '@ali/lowcode-plugin-source-editor'; +// import sourceEditor from '@ali/lowcode-plugin-source-editor'; export default { LowcodeSkeleton, logo, @@ -22,5 +22,5 @@ export default { designer, eventBindDialog, variableBindDialog, - sourceEditor + // sourceEditor }; diff --git a/packages/demo/src/editor/index.tsx b/packages/demo/src/editor/index.tsx index ab2d9526f..48c99732c 100644 --- a/packages/demo/src/editor/index.tsx +++ b/packages/demo/src/editor/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { registerSetters } from '@ali/lowcode-setters'; +// import { registerSetters } from '@ali/lowcode-setters'; import config from './config/skeleton'; import components from './config/components'; import utils from './config/utils'; @@ -8,7 +8,7 @@ import utils from './config/utils'; import './global.scss'; import './config/theme.scss'; -registerSetters(); +// registerSetters(); const Skeleton = components.LowcodeSkeleton; const LCE_CONTAINER = document.getElementById('lce-container'); diff --git a/packages/demo/src/vision/index.ts b/packages/demo/src/vision/index.ts index 7e46e904e..83b03730c 100644 --- a/packages/demo/src/vision/index.ts +++ b/packages/demo/src/vision/index.ts @@ -2,6 +2,7 @@ import { createElement } from 'react'; import { Button } from '@alifd/next'; import Engine, { Panes } 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 I18nPane from '@ali/ve-i18n-pane'; @@ -259,6 +260,43 @@ function initI18nPane() { // 动作面板 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, diff --git a/packages/editor-skeleton/src/layouts/workbench.tsx b/packages/editor-skeleton/src/layouts/workbench.tsx index 857fb8540..af50045c4 100644 --- a/packages/editor-skeleton/src/layouts/workbench.tsx +++ b/packages/editor-skeleton/src/layouts/workbench.tsx @@ -1,5 +1,6 @@ import { Component } from 'react'; import { TipContainer, observer } from '@ali/lowcode-editor-core'; +import classNames from 'classnames'; import { Skeleton } from '../skeleton'; import TopArea from './top-area'; import LeftArea from './left-area'; @@ -12,15 +13,15 @@ import RightArea from './right-area'; import './workbench.less'; @observer -export class Workbench extends Component<{ skeleton: Skeleton}> { +export class Workbench extends Component<{ skeleton: Skeleton, className?: string }> { shouldComponentUpdate() { return false; } render() { - const { skeleton } = this.props; + const { skeleton, className } = this.props; return ( -
+
diff --git a/packages/editor-skeleton/src/widget/panel.ts b/packages/editor-skeleton/src/widget/panel.ts index f75e69a3d..0fbcd809d 100644 --- a/packages/editor-skeleton/src/widget/panel.ts +++ b/packages/editor-skeleton/src/widget/panel.ts @@ -93,6 +93,7 @@ export default class Panel implements IWidget { editor: this.skeleton.editor, config: this.config, panel: this, + pane: this, }); } } @@ -159,6 +160,20 @@ export default class Panel implements IWidget { show() { this.setActive(true); } + + /** + * @deprecated + */ + getCurrentPosition() { + return 'left'; + } + + /** + * @deprecated + */ + getSupportedPositions() { + return ['left']; + } } export function isPanel(obj: any): obj is Panel { diff --git a/packages/vision-preset/package.json b/packages/vision-preset/package.json index a99baaeab..2010ea9b0 100644 --- a/packages/vision-preset/package.json +++ b/packages/vision-preset/package.json @@ -20,7 +20,6 @@ "@ali/lowcode-plugin-outline-pane": "^0.8.12", "@ali/lowcode-plugin-undo-redo": "^0.8.9", "@ali/lowcode-plugin-zh-en": "^0.8.11", - "@ali/lowcode-setters": "^0.8.11", "@ali/ve-i18n-util": "^2.0.2", "@ali/ve-icons": "^4.1.9", "@ali/ve-less-variables": "2.0.3", diff --git a/packages/vision-preset/src/editor.ts b/packages/vision-preset/src/editor.ts index 6f15ec6e6..770c8e0db 100644 --- a/packages/vision-preset/src/editor.ts +++ b/packages/vision-preset/src/editor.ts @@ -2,16 +2,16 @@ import { isJSBlock } from '@ali/lowcode-types'; import { isPlainObject } from '@ali/lowcode-utils'; import { globalContext, Editor } from '@ali/lowcode-editor-core'; import { Designer, TransformStage } from '@ali/lowcode-designer'; -import { registerSetters } from '@ali/lowcode-setters'; +// import { registerSetters } from '@ali/lowcode-setters'; import Outline from '@ali/lowcode-plugin-outline-pane'; import DesignerPlugin from '@ali/lowcode-plugin-designer'; import { Skeleton, SettingsPrimaryPane } from '@ali/lowcode-editor-skeleton'; import Preview from '@ali/lowcode-plugin-sample-preview'; -import SourceEditor from '@ali/lowcode-plugin-source-editor'; +// import SourceEditor from '@ali/lowcode-plugin-source-editor'; import { i18nReducer } from './i18n-reducer'; -registerSetters(); +// registerSetters(); export const editor = new Editor(); globalContext.register(editor, Editor); diff --git a/packages/vision-preset/src/index.ts b/packages/vision-preset/src/index.ts index 51e39de0e..90d3070bb 100644 --- a/packages/vision-preset/src/index.ts +++ b/packages/vision-preset/src/index.ts @@ -35,6 +35,7 @@ function init(container?: Element) { render( createElement(Workbench, { skeleton, + className: 'engine-main', }), container, ); diff --git a/packages/vision-preset/src/vision.less b/packages/vision-preset/src/vision.less index 16d9ddc3c..492464688 100644 --- a/packages/vision-preset/src/vision.less +++ b/packages/vision-preset/src/vision.less @@ -46,6 +46,23 @@ html.engine-blur #engine { -webkit-filter: blur(4px); } +.engine-main { + width: 100%; + height: 100%; + position: relative; + + .ve-icon-button { + > .ve-icon-contents { + color: var(--color-text, rgba(51,51,51,.6)); + } + &:hover, &.active { + > .ve-icon-contents { + color: var(--color-text-light, rgba(51,51,51,.8)); + } + } + } +} + .engine-empty { background: #f2f3f5; color: #a7b1bd;