From 6f643d26949523300fae188543bd33d48b2e1723 Mon Sep 17 00:00:00 2001 From: kangwei Date: Tue, 5 May 2020 16:58:45 +0800 Subject: [PATCH 1/9] fix style --- .../editor-skeleton/src/transducers/addon-combine.ts | 9 +++++---- packages/vision-preset/src/vision.less | 3 ++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/editor-skeleton/src/transducers/addon-combine.ts b/packages/editor-skeleton/src/transducers/addon-combine.ts index c0ee2a480..cbbf1af17 100644 --- a/packages/editor-skeleton/src/transducers/addon-combine.ts +++ b/packages/editor-skeleton/src/transducers/addon-combine.ts @@ -46,7 +46,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp const supportedLifecycles = events.supportedLifecycles || (isRoot - ? [ + ? /*[ { description: '初始化时', name: 'constructor', @@ -63,7 +63,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp description: '卸载时', name: 'componentWillUnmount', }, - ] + ]*/ null : null); if (supportedLifecycles) { eventsDefinition.push({ @@ -81,6 +81,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp } // 通用设置 const propsGroup = props || []; + /* propsGroup.push({ name: '#generals', title: { type: 'i18n', 'zh-CN': '通用', 'en-US': 'General' }, @@ -101,14 +102,14 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp title: 'Ref', setter: 'StringSetter', }, - /* { name: '!more', title: '更多', setter: 'PropertiesSetter', - },*/ + }, ], }); + */ const combined: FieldConfig[] = [ { title: { type: 'i18n', 'zh-CN': '属性', 'en-US': 'Props' }, diff --git a/packages/vision-preset/src/vision.less b/packages/vision-preset/src/vision.less index d0c17fcc0..7c04b0955 100644 --- a/packages/vision-preset/src/vision.less +++ b/packages/vision-preset/src/vision.less @@ -92,7 +92,8 @@ html.engine-blur #engine { .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-year-picker, + .next-breadcrumb-item,.next-calendar-header,.next-calendar-table { pointer-events: auto !important; } } From 4396689dad0fe50ef3c55ec31f4a627dfc42b778 Mon Sep 17 00:00:00 2001 From: kangwei Date: Tue, 5 May 2020 17:08:10 +0800 Subject: [PATCH 2/9] add outline builtin --- packages/designer/src/document/node/node.ts | 2 +- packages/vision-preset/src/editor.ts | 29 ++++++--------------- 2 files changed, 9 insertions(+), 22 deletions(-) diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index a8d469309..1aae13208 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -358,7 +358,7 @@ export class Node { @computed hasCondition() { const v = this.getExtraProp('condition', false)?.getValue(); - return v != null && v !== ''; + return v != null && v !== '' && v !== true; } @computed hasLoop() { diff --git a/packages/vision-preset/src/editor.ts b/packages/vision-preset/src/editor.ts index 5c064a3b0..1b9a21263 100644 --- a/packages/vision-preset/src/editor.ts +++ b/packages/vision-preset/src/editor.ts @@ -2,17 +2,14 @@ import { isJSBlock, isJSSlot } from '@ali/lowcode-types'; import { isPlainObject } from '@ali/lowcode-utils'; import { globalContext, Editor } from '@ali/lowcode-editor-core'; import { Designer, TransformStage, addBuiltinComponentAction } from '@ali/lowcode-designer'; -import { registerSetters } from '@ali/lowcode-setters'; -// import Outline from '@ali/lowcode-plugin-outline-pane'; +// 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 { i18nReducer } from './i18n-reducer'; import { InstanceNodeSelector } from './components'; -import { Divider } from '@alifd/next'; export const editor = new Editor(); globalContext.register(editor, Editor); @@ -81,24 +78,14 @@ skeleton.add({ type: 'Panel', content: SettingsPrimaryPane, }); -// skeleton.add({ -// area: 'leftArea', -// name: 'outlinePane', -// type: 'PanelDock', -// content: Outline, -// panelProps: { -// area: 'leftFixedArea', -// }, -// }); - skeleton.add({ - area: 'topArea', - type: 'Dock', - name: 'preview', - props: { - align: 'right', + area: 'leftArea', + name: 'outlinePane', + type: 'PanelDock', + content: Outline, + panelProps: { + area: 'leftFixedArea', }, - content: Preview, }); // skeleton.add({ From 3762a0d85c0a270c7ee699ef8fbb05a6e6eec73c Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Tue, 5 May 2020 17:11:56 +0800 Subject: [PATCH 3/9] bug fix --- packages/editor-skeleton/src/widget/widget-container.ts | 4 ++-- packages/vision-preset/src/panes.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/editor-skeleton/src/widget/widget-container.ts b/packages/editor-skeleton/src/widget/widget-container.ts index 268f5fcfb..522648301 100644 --- a/packages/editor-skeleton/src/widget/widget-container.ts +++ b/packages/editor-skeleton/src/widget/widget-container.ts @@ -39,7 +39,7 @@ export default class WidgetContainer { return { type: "Panel", + name: title, content, props: { title, From 0eaac97eedfdf225131eb56b2e06e5fdf1ffa94e Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Tue, 5 May 2020 18:06:25 +0800 Subject: [PATCH 4/9] =?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 5/9] 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 6/9] =?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 7/9] =?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 8/9] =?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 9/9] =?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);