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/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; } 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/layouts/top-area.tsx b/packages/editor-skeleton/src/layouts/top-area.tsx index 062399a32..b9dee5c38 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.less b/packages/editor-skeleton/src/layouts/workbench.less index 4efca072d..a6f3a9359 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; @@ -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; } @@ -324,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); 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/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( { 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; + } + } + } } 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, );