From 0eaac97eedfdf225131eb56b2e06e5fdf1ffa94e Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Tue, 5 May 2020 18:06:25 +0800 Subject: [PATCH 1/7] =?UTF-8?q?topArea=20=E5=A2=9E=E5=8A=A0=20prop=20itemC?= =?UTF-8?q?lassName?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../editor-skeleton/src/layouts/top-area.tsx | 21 ++++++++++++------- .../editor-skeleton/src/layouts/workbench.tsx | 6 +++--- packages/vision-preset/src/index.ts | 1 + 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/editor-skeleton/src/layouts/top-area.tsx b/packages/editor-skeleton/src/layouts/top-area.tsx index 2b8535117..94b78654f 100644 --- a/packages/editor-skeleton/src/layouts/top-area.tsx +++ b/packages/editor-skeleton/src/layouts/top-area.tsx @@ -4,23 +4,23 @@ import { observer } from '@ali/lowcode-editor-core'; import Area from '../area'; @observer -export default class TopArea extends Component<{ area: Area }> { +export default class TopArea extends Component<{ area: Area, itemClassName?: string }> { render() { - const { area } = this.props; + const { area, itemClassName } = this.props; return (
- +
); } } @observer -class Contents extends Component<{ area: Area }> { +class Contents extends Component<{ area: Area, itemClassName?: string }> { render() { - const { area } = this.props; + const { area, itemClassName } = this.props; const left: any[] = []; const center: any[] = []; const right: any[] = []; @@ -29,12 +29,17 @@ class Contents extends Component<{ area: Area }> { const index2 = b.config?.index || 0; return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1); }).forEach(item => { + const content = ( +
+ {item.content} +
+ ); if (item.align === 'center') { - center.push(item.content); + center.push(content); } else if (item.align === 'left') { - left.push(item.content); + left.push(content); } else { - right.push(item.content); + right.push(content); } }); return ( diff --git a/packages/editor-skeleton/src/layouts/workbench.tsx b/packages/editor-skeleton/src/layouts/workbench.tsx index af50045c4..06f0b5055 100644 --- a/packages/editor-skeleton/src/layouts/workbench.tsx +++ b/packages/editor-skeleton/src/layouts/workbench.tsx @@ -13,16 +13,16 @@ import RightArea from './right-area'; import './workbench.less'; @observer -export class Workbench extends Component<{ skeleton: Skeleton, className?: string }> { +export class Workbench extends Component<{ skeleton: Skeleton, className?: string, topAreaItemClassName?: string }> { shouldComponentUpdate() { return false; } render() { - const { skeleton, className } = this.props; + const { skeleton, className, topAreaItemClassName } = this.props; return (
- +
diff --git a/packages/vision-preset/src/index.ts b/packages/vision-preset/src/index.ts index b3eaa9b01..23dbe607a 100644 --- a/packages/vision-preset/src/index.ts +++ b/packages/vision-preset/src/index.ts @@ -44,6 +44,7 @@ function init(container?: Element) { createElement(Workbench, { skeleton, className: 'engine-main', + topAreaItemClassName: 'engine-actionitem', }), container, ); From 79b07967525da44b3060a468f301dc308bdfc4b0 Mon Sep 17 00:00:00 2001 From: kangwei Date: Tue, 5 May 2020 18:07:58 +0800 Subject: [PATCH 2/7] support hide --- packages/designer/src/component-meta.ts | 15 +++++++ packages/designer/src/locale/en-US.json | 1 + packages/designer/src/locale/zh-CN.json | 1 + .../src/transducers/addon-combine.ts | 41 ++++++++----------- .../src/views/tree-title.tsx | 2 +- packages/react-renderer/src/engine/base.jsx | 5 +++ 6 files changed, 41 insertions(+), 24 deletions(-) diff --git a/packages/designer/src/component-meta.ts b/packages/designer/src/component-meta.ts index 0de4a9224..f892f7dd8 100644 --- a/packages/designer/src/component-meta.ts +++ b/packages/designer/src/component-meta.ts @@ -20,6 +20,7 @@ import { IconComponent } from './icons/component'; import { IconRemove } from './icons/remove'; import { IconClone } from './icons/clone'; import { ReactElement } from 'react'; +import { IconHidden } from './icons/hidden'; function ensureAList(list?: string | string[]): string[] | null { if (!list) { @@ -341,6 +342,20 @@ const builtinComponentActions: ComponentAction[] = [ }, important: true, }, + { + name: 'hide', + content: { + icon: IconHidden, + title: intlNode('hide'), + action(node: Node) { + node.getExtraProp('hidden', true)?.setValue(true); + }, + }, + condition: (node: Node) => { + return node.componentMeta.isModal; + }, + important: true, + }, ]; export function removeBuiltinComponentAction(name: string) { diff --git a/packages/designer/src/locale/en-US.json b/packages/designer/src/locale/en-US.json index 69eb61330..d895e4aba 100644 --- a/packages/designer/src/locale/en-US.json +++ b/packages/designer/src/locale/en-US.json @@ -1,6 +1,7 @@ { "copy": "Copy", "remove": "Remove", + "hide": "Hide", "Condition Group": "Condition Group", "No opened document": "No opened document, open some document to editing" } diff --git a/packages/designer/src/locale/zh-CN.json b/packages/designer/src/locale/zh-CN.json index cafba4f51..dc57f75ff 100644 --- a/packages/designer/src/locale/zh-CN.json +++ b/packages/designer/src/locale/zh-CN.json @@ -1,6 +1,7 @@ { "copy": "复制", "remove": "删除", + "hide": "隐藏", "Condition Group": "条件组", "No opened document": "没有打开的页面，请选择页面打开编辑" } diff --git a/packages/editor-skeleton/src/transducers/addon-combine.ts b/packages/editor-skeleton/src/transducers/addon-combine.ts index cbbf1af17..d9d2b0161 100644 --- a/packages/editor-skeleton/src/transducers/addon-combine.ts +++ b/packages/editor-skeleton/src/transducers/addon-combine.ts @@ -183,8 +183,12 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp items: [ { name: '___condition', - title: { type: 'i18n', 'zh-CN': '条件显示', 'en-US': 'Condition' }, - setter: 'ExpressionSetter', + title: { type: 'i18n', 'zh-CN': '是否渲染', 'en-US': 'Condition' }, + setter: [{ + componentName: 'BoolSetter', + }, { + componentName: 'VariableSetter' + }], }, { name: '#loop', @@ -193,27 +197,14 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp { name: '___loop', title: { type: 'i18n', 'zh-CN': '循环数据', 'en-US': 'Loop Data' }, - setter: { - componentName: 'MixinSetter', + setter: [{ + componentName: 'JsonSetter', props: { - // TODO: - setters: [ - { - componentName: 'JSONSetter', - props: { - mode: 'popup', - placeholder: { type: 'i18n', 'zh-CN': '编辑数据', 'en-US': 'Edit Data' }, - }, - }, - { - componentName: 'ExpressionSetter', - props: { - placeholder: { type: 'i18n', 'zh-CN': '绑定数据', 'en-US': 'Bind Data' }, - }, - }, - ], + label: { type: 'i18n', 'zh-CN': '编辑数据', 'en-US': 'Edit Data'}, }, - }, + }, { + componentName: 'VariableSetter' + }], }, { name: '___loopArgs.0', @@ -237,8 +228,12 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp }, { name: 'key', - title: 'Key', - setter: 'ExpressionSetter', + title: '循环 Key', + setter: [{ + componentName: 'StringSetter', + }, { + componentName: 'VariableSetter' + }], }, ], }, diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx index 3d7c6b373..507712f42 100644 --- a/packages/plugin-outline-pane/src/views/tree-title.tsx +++ b/packages/plugin-outline-pane/src/views/tree-title.tsx @@ -126,7 +126,7 @@ export default class TreeTitle extends Component<{ )}
{isCNode && isNodeParent && } - {isCNode && isNodeParent && } + {/*isCNode && isNodeParent && */}
); } diff --git a/packages/react-renderer/src/engine/base.jsx b/packages/react-renderer/src/engine/base.jsx index 6bf45fe3f..742c24574 100644 --- a/packages/react-renderer/src/engine/base.jsx +++ b/packages/react-renderer/src/engine/base.jsx @@ -228,6 +228,11 @@ export default class BaseEngine extends PureComponent { let Comp = components[schema.componentName] || Div; + console.info('node schema', schema, engine.props); + if (schema.hidden) { + return null; + } + if (schema.loop !== undefined) { return this.__createLoopVirtualDom( { From 61ac8da3a7b44b11574da95d266aa5cfe1df1f2b Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Tue, 5 May 2020 18:15:16 +0800 Subject: [PATCH 3/7] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E9=9D=A2=E6=9D=BF=20icon?= =?UTF-8?q?=20=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor-skeleton/src/layouts/workbench.less | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less index 4efca072d..e87427624 100644 --- a/packages/editor-skeleton/src/layouts/workbench.less +++ b/packages/editor-skeleton/src/layouts/workbench.less @@ -268,6 +268,13 @@ body { .lc-title{ padding: 12px; flex-direction: column; + width: 46px; + height: 46px; + + svg { + fill: var(--color-icon-normal,rgba(31,56,88,.4)); + } + &.has-tip{ cursor: pointer; } From c88ea6bf4ef33b87cebe7d0798232c48f311e35d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E7=86=A0?= Date: Tue, 5 May 2020 18:29:22 +0800 Subject: [PATCH 4/7] =?UTF-8?q?fix:=20=F0=9F=90=9B=20style=20setter=20not?= =?UTF-8?q?=20working?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-simulator-renderer/package.json | 1 + .../src/renderer-view.tsx | 30 +++++++++++++++++++ 2 files changed, 31 insertions(+) diff --git a/packages/react-simulator-renderer/package.json b/packages/react-simulator-renderer/package.json index d031eb62c..b62d92110 100644 --- a/packages/react-simulator-renderer/package.json +++ b/packages/react-simulator-renderer/package.json @@ -21,6 +21,7 @@ "@recore/obx-react": "^1.0.7", "classnames": "^2.2.6", "react": "^16", + "@ali/vu-css-style": "^1.0.2", "react-dom": "^16.7.0" }, "devDependencies": { diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx index e964c2be9..f8ad8c747 100644 --- a/packages/react-simulator-renderer/src/renderer-view.tsx +++ b/packages/react-simulator-renderer/src/renderer-view.tsx @@ -1,9 +1,11 @@ import LowCodeRenderer from '@ali/lowcode-react-renderer'; +import { isObject } from 'lodash'; import { ReactInstance, Fragment, Component, createElement } from 'react'; import { observer } from '@recore/obx-react'; import { SimulatorRenderer } from './renderer'; import { host } from './host'; import './renderer.less'; +import { toCss } from '@ali/vu-css-style'; // patch cloneElement avoid lost keyProps const originCloneElement = window.React.cloneElement; @@ -84,6 +86,10 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> { const { __id, __desingMode, ...viewProps } = props; viewProps.componentId = __id; viewProps._leaf = host.document.getNode(__id); + + // FIXME: 此处未来使用propsReducer方式处理 + this.createNodeStyleSheet(viewProps); + return createElement( Component, viewProps, @@ -99,4 +105,28 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> { /> ); } + createNodeStyleSheet(props: any) { + if (props && props.fieldId) { + let styleProp = props.__style__; + + if (isObject(styleProp)) { + styleProp = toCss(styleProp); + } + + if (typeof styleProp === 'string') { + const s = document.createElement('style'); + const cssId = '_style_pesudo_' + props.fieldId; + const cssClass = '_css_pesudo_' + props.fieldId; + + props.className = cssClass; + s.setAttribute('type', 'text/css'); + s.setAttribute('id', cssId); + document.getElementsByTagName('head')[0].appendChild(s); + + s.appendChild(document.createTextNode(styleProp.replace(/:root/g, '.' + cssClass))); + + return s; + } + } + } } From c3b075b7d5ea9f0c7ee39958857d0916ee2fee73 Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Tue, 5 May 2020 18:51:37 +0800 Subject: [PATCH 5/7] =?UTF-8?q?=E9=A1=B6=E9=83=A8=E4=B8=AD=E9=97=B4?= =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor-skeleton/src/layouts/workbench.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less index e87427624..6c7348cfd 100644 --- a/packages/editor-skeleton/src/layouts/workbench.less +++ b/packages/editor-skeleton/src/layouts/workbench.less @@ -185,12 +185,12 @@ body { display: flex; margin-bottom: 2px; padding: 8px; - .lc-top-area-left{} + .lc-top-area-center{ flex: 1; display: flex; - justify-content: flex-end; - margin-right: 8px; + justify-content: center; + margin: 0 8px; } .lc-top-area-right{ display: flex; @@ -274,7 +274,7 @@ body { svg { fill: var(--color-icon-normal,rgba(31,56,88,.4)); } - + &.has-tip{ cursor: pointer; } From 48f3be132635b8edd928a0cdbdd82ceee2b764d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E7=86=A0?= Date: Tue, 5 May 2020 19:19:34 +0800 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20=F0=9F=90=9B=20history=20pane=20zind?= =?UTF-8?q?ex?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor-skeleton/src/layouts/workbench.less | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less index 6c7348cfd..a6f3a9359 100644 --- a/packages/editor-skeleton/src/layouts/workbench.less +++ b/packages/editor-skeleton/src/layouts/workbench.less @@ -331,6 +331,7 @@ body { flex: 1; display: flex; flex-direction: column; + z-index: 10; .lc-toolbar { height: var(--toolbar-height); background-color: var(--color-pane-background); From 1ea0d73d09bf5b6b2bf34051c8c58699f93c9bbc Mon Sep 17 00:00:00 2001 From: "xiaoxian.xlf" Date: Tue, 5 May 2020 19:22:17 +0800 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20documentModel=20toData=20=E6=96=B9?= =?UTF-8?q?=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/designer/src/document/document-model.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/designer/src/document/document-model.ts b/packages/designer/src/document/document-model.ts index ac739d625..39d50f3de 100644 --- a/packages/designer/src/document/document-model.ts +++ b/packages/designer/src/document/document-model.ts @@ -461,14 +461,16 @@ export class DocumentModel { return config.checkNestingDown(parent, obj) && this.checkNestingUp(parent, obj); } - // ======= compatibles + // ======= compatibles for vision getRoot() { return this.rootNode; } - /** - * 兼容vision - */ + // add toData + toData() { + return { componentsTree: [this.project?.currentDocument?.export()] }; + } + getHistory(): History { return this.history; }