github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-13 01:21:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'polyfill/vision' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into polyfill/vision

Browse Source
This commit is contained in:
xiaoxian.xlf 2020-05-05 19:22:20 +08:00
commit 7830c72c6c
17 changed files with 119 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/designer/src/component-meta.ts
View File

@ -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) {

2
packages/designer/src/document/node/node.ts
View File

@ -358,7 +358,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
@computed hasCondition() {
const v = this.getExtraProp('condition', false)?.getValue();
return v != null && v !== '';
return v != null && v !== '' && v !== true;
}
@computed hasLoop() {

1
packages/designer/src/locale/en-US.json
View File

@ -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"
}

1
packages/designer/src/locale/zh-CN.json
View File

@ -1,6 +1,7 @@
{
"copy": "复制",
"remove": "删除",
"hide": "隐藏",
"Condition Group": "条件组",
"No opened document": "没有打开的页面，请选择页面打开编辑"
}

21
packages/editor-skeleton/src/layouts/top-area.tsx
View File

@ -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 (
<div className={classNames("lc-top-area", {
'lc-area-visible': area.visible
})}>
<Contents area={area} />
<Contents area={area} itemClassName={itemClassName} />
</div>
);
}
}
@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 = (
<div className={itemClassName || ''}>
{item.content}
</div>
);
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 (

14
packages/editor-skeleton/src/layouts/workbench.less
View File

@ -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);

6
packages/editor-skeleton/src/layouts/workbench.tsx
View File

@ -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 (
<div className={classNames('lc-workbench', className)}>
<TopArea area={skeleton.topArea} />
<TopArea area={skeleton.topArea} itemClassName={topAreaItemClassName} />
<div className="lc-workbench-body">
<LeftArea area={skeleton.leftArea} />
<LeftFloatPane area={skeleton.leftFloatArea} />

50
packages/editor-skeleton/src/transducers/addon-combine.ts
View File

@ -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' },
@ -182,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',
@ -192,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',
@ -236,8 +228,12 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
},
{
name: 'key',
title: 'Key',
setter: 'ExpressionSetter',
title: '循环 Key',
setter: [{
componentName: 'StringSetter',
}, {
componentName: 'VariableSetter'
}],
},
],
},

4
packages/editor-skeleton/src/widget/widget-container.ts
View File

@ -39,7 +39,7 @@ export default class WidgetContainer<T extends WidgetItem = any, G extends Widge
if (nameOrItem && typeof nameOrItem === 'string') {
item = this.get(nameOrItem);
}
if (!isActiveable(nameOrItem)) {
if (!isActiveable(item)) {
item = null;
}
@ -63,7 +63,7 @@ export default class WidgetContainer<T extends WidgetItem = any, G extends Widge
if (nameOrItem && typeof nameOrItem === 'string') {
item = this.get(nameOrItem);
}
if (!isActiveable(nameOrItem)) {
if (!isActiveable(item)) {
item = null;
}
if (this._current === item) {

2
packages/plugin-outline-pane/src/views/tree-title.tsx
View File

@ -126,7 +126,7 @@ export default class TreeTitle extends Component<{
)}
</div>
{isCNode && isNodeParent && <HideBtn treeNode={treeNode} />}
{isCNode && isNodeParent && <LockBtn treeNode={treeNode} />}
{/*isCNode && isNodeParent && <LockBtn treeNode={treeNode} />*/}
</div>
);
}

5
packages/react-renderer/src/engine/base.jsx
View File

@ -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(
{

1
packages/react-simulator-renderer/package.json
View File

@ -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": {

30
packages/react-simulator-renderer/src/renderer-view.tsx
View File

@ -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;
}
}
}
}

29
packages/vision-preset/src/editor.ts
View File

@ -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({

1
packages/vision-preset/src/index.ts
View File

@ -44,6 +44,7 @@ function init(container?: Element) {
createElement(Workbench, {
skeleton,
className: 'engine-main',
topAreaItemClassName: 'engine-actionitem',
}),
container,
);

1
packages/vision-preset/src/panes.ts
View File

@ -98,6 +98,7 @@ function upgradeConfig(config: OldPaneConfig): IWidgetBaseConfig & { area: strin
newConfig.content = contents.map(({ title, content, tip }) => {
return {
type: "Panel",
name: title,
content,
props: {
title,

3
packages/vision-preset/src/vision.less
View File

@ -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;
}
}