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 'fix/jsslot-schema-format' into 'release/0.9.0'

Browse Source 
Fix/jsslot schema format



See merge request !898101
This commit is contained in:
康为 2020-07-21 21:18:24 +08:00
commit 20fcfe6b29
19 changed files with 304 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/designer/src/builtin-simulator/host.ts
View File

@ -878,7 +878,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
event: e,
};
if (e.dragObject.type === 'node' && e.dragObject.nodes[0].getPrototype().isModal()) {
if (e.dragObject.type === 'node' && e.dragObject.nodes[0]?.getPrototype()?.isModal()) {
return this.designer.createLocation({
target: this.document.rootNode,
detail: {

7
packages/designer/src/designer/designer.ts
View File

@ -386,6 +386,8 @@ export class Designer {
let meta = this._componentMetasMap.get(key);
if (meta) {
meta.setMetadata(data);
this._componentMetasMap.set(key, meta);
} else {
meta = this._lostComponentMetasMap.get(key);
@ -426,10 +428,11 @@ export class Designer {
@computed get componentsMap(): { [key: string]: NpmInfo | Component } {
const maps: any = {};
this._componentMetasMap.forEach((config, key) => {
const designer = this;
designer._componentMetasMap.forEach((config, key) => {
const metaData = config.getMetadata();
if (metaData.devMode === 'lowcode') {
maps[key] = this.currentDocument?.simulator?.createComponent(metaData.schema!);
maps[key] = metaData.schema;
} else {
const view = metaData.experimental?.view;
if (view) {

19
packages/designer/src/designer/setting/setting-field.ts
View File

@ -5,6 +5,18 @@ import { SettingEntry } from './setting-entry';
import { computed, obx } from '@ali/lowcode-editor-core';
import { cloneDeep } from '@ali/lowcode-utils';
function getSettingFieldCollectorKey(parent: SettingEntry, config: FieldConfig) {
let top = parent;
const path = [config.name];
while (top !== parent.top) {
if (top instanceof SettingField && top.type !== 'group') {
path.unshift(top.name);
}
top = top.parent;
}
return path.join('.');
}
export class SettingField extends SettingPropEntry implements SettingEntry {
readonly isSettingField = true;
readonly isRequired: boolean;
@ -51,10 +63,11 @@ export class SettingField extends SettingPropEntry implements SettingEntry {
this._expanded = extraProps?.defaultCollapsed ? false : true;
// initial items
if (this.type === 'group' && items) {
if (items && items.length > 0) {
this.initItems(items, settingFieldCollector);
} else if (settingFieldCollector && config.name) {
settingFieldCollector(config.name, this);
}
if (this.type !== 'group' && settingFieldCollector && config.name) {
settingFieldCollector(getSettingFieldCollectorKey(parent, config), this);
}
// compatiable old config

18
packages/designer/src/document/node/node-children.ts
View File

@ -79,6 +79,10 @@ export class NodeChildren {
return this.size > 0;
}
@computed length() {
return this.children.length;
}
/**
* 删除一个节点
*/
@ -94,6 +98,7 @@ export class NodeChildren {
deleted.purge();
}
this.emitter.emit('change');
this.reportModified(node, this.owner, {type: 'remove', removeIndex: i, removeNode: node});
return false;
}
@ -290,4 +295,17 @@ export class NodeChildren {
// 保证向前兼容性
return "Array";
}
private reportModified(node: Node, owner: Node, options = {}) {
if (!node) { return; }
if (node.isRoot()) { return; }
const callbacks = owner.componentMeta.getMetadata().experimental?.callbacks;
if (callbacks?.onSubtreeModified) {
callbacks?.onSubtreeModified.call(node, owner, options);
}
if (owner.parent && !owner.parent.isRoot()) {
this.reportModified(node, owner.parent, options);
}
}
}

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

@ -634,6 +634,14 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
this._slots.push(slotNode);
}
/**
* 删除一个节点
* @param node
*/
removeChild(node: Node) {
this.children?.delete(node);
}
private purged = false;
/**
* 是否已销毁

2
packages/designer/src/project/project.ts
View File

@ -102,7 +102,7 @@ export class Project {
| string,
): any {}
open(doc?: string | DocumentModel | RootSchema): void {
open(doc?: string | DocumentModel | RootSchema): DocumentModel {
if (!doc) {
const got = this.documents.find((item) => item.isBlank());
if (got) {

5
packages/editor-preset-vision/src/bundle/prototype.ts
View File

@ -220,6 +220,9 @@ class Prototype {
readonly isPrototype = true;
readonly meta: ComponentMeta;
readonly options: OldPrototypeConfig | ComponentMetadata;
get packageName() {
return this.meta.npm?.package;
}
constructor(input: OldPrototypeConfig | ComponentMetadata | ComponentMeta, lookup: boolean = false) {
if (lookup) {
@ -251,7 +254,7 @@ class Prototype {
}
getPackageName() {
return this.meta.npm?.package;
return this.packageName;
}
getContextInfo(name: string): any {

53
packages/editor-preset-vision/src/bundle/upgrade-metadata.ts
View File

@ -332,27 +332,29 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec
const setterInitial = getInitialFromSetter(setter);
collector.addInitial({
// FIXME! name could be "xxx.xxx"
name: slotName || name,
initial: (field: Field, currentValue: any) => {
// FIXME! read from prototype.defaultProps
const defaults = extraProps.defaultValue;
if (typeof initialFn !== 'function') {
initialFn = defaultInitial;
}
const v = initialFn.call(field, currentValue, defaults);
if (setterInitial) {
return setterInitial.call(field, v, defaults);
}
return v;
},
});
if (type !== 'composite') {
collector.addInitial({
// FIXME! name could be "xxx.xxx"
name: slotName || name,
initial: (field: Field, currentValue: any) => {
// FIXME! read from prototype.defaultProps
const defaults = extraProps.defaultValue;
if (typeof initialFn !== 'function') {
initialFn = defaultInitial;
}
const v = initialFn.call(field, currentValue, defaults);
if (setterInitial) {
return setterInitial.call(field, v, defaults);
}
return v;
},
});
}
if (ignore != null || disabled != null) {
collector.addFilter({
// FIXME! name should be "xxx.xxx"
@ -431,9 +433,11 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec
autorun: item.autorun,
});
},
}
},
)
: [];
newConfig.items = objItems;
const initial = (target: SettingTarget, value?: any) => {
// TODO:
const defaults = extraProps.defaultValue;
@ -749,10 +753,7 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) {
callbacks.onNodeRemove = didDropOut;
}
if (subtreeModified) {
callbacks.onSubtreeModified = (...args: any[]) => {
// FIXME! args not correct
subtreeModified.apply(args[0], args as any);
};
callbacks.onSubtreeModified = subtreeModified;
}
if (onResize) {
callbacks.onResize = (e: any, currentNode: any) => {

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

@ -85,17 +85,35 @@ designer.addPropsReducer((props, node) => {
const newProps: any = {
...props,
};
const getRealValue = (propValue: any) => {
if (isVariable(propValue)) {
return propValue.value;
}
if (isJSExpression(propValue)) {
return propValue.mock;
}
return propValue;
};
initials.forEach((item) => {
// FIXME! this implements SettingTarget
try {
// FIXME! item.name could be 'xxx.xxx'
const ov = props[item.name];
const v = item.initial(node as any, isJSExpression(ov) ? ov.mock : ov);
const v = item.initial(node as any, getRealValue(ov));
if (v !== undefined) {
newProps[item.name] = isJSExpression(ov) ? {
...ov,
mock: v,
} : v;
if (isVariable(ov)) {
newProps[item.name] = {
...ov,
value: v,
};
} else if (isJSExpression(ov)) {
newProps[item.name] = {
...ov,
mock: v,
};
} else {
newProps[item.name] = v;
}
}
} catch (e) {
if (hasOwnProperty(props, item.name)) {
@ -153,6 +171,14 @@ function compatiableReducer(props: any) {
},
}
}
// 为了能降级到老版本，建议在后期版本去掉以下代码
if (isJSExpression(val) && !val.events) {
val = {
type: 'variable',
value: val.mock,
variable: val.value,
}
}
newProps[key] = val;
});
return newProps;

4
packages/editor-skeleton/src/area.ts
View File

@ -34,6 +34,10 @@ export default class Area<C extends IWidgetBaseConfig = any, T extends IWidget =
return this.container.add(config);
}
remove(config: T | string): number {
return this.container.remove(config);
}
private lastCurrent: T | null = null;
setVisible(flag: boolean) {
if (this.exclusive) {

11
packages/editor-skeleton/src/icons/fix.tsx Normal file
View File

@ -0,0 +1,11 @@
import { SVGIcon, IconProps } from "@ali/lowcode-utils";
export function IconFix(props: IconProps) {
return (
<SVGIcon viewBox="0 0 1024 1024" {...props}>
<path d="M750.848 28.928l245.248 242.944a66.048 66.048 0 1 1-93.184 93.184l-25.6-19.456-249.6 353.792 78.336 78.336a66.048 66.048 0 0 1-93.184 92.672l-460.8-464.64a66.048 66.048 0 0 1 93.184-93.184l76.8 78.336 354.048-249.856-18.176-18.944a66.048 66.048 0 1 1 93.184-93.184zM380.672 732.416l-91.904-90.88c-74.24 89.6-191.488 219.904-212.736 247.04a419.84 419.84 0 0 0-70.656 128 419.84 419.84 0 0 0 128-70.144c27.136-21.248 157.44-138.496 246.528-214.016z"></path>
</SVGIcon>
);
}
IconFix.displayName = 'Fix';

12
packages/editor-skeleton/src/icons/float.tsx Normal file
View File

@ -0,0 +1,12 @@
import { SVGIcon, IconProps } from "@ali/lowcode-utils";
export function IconFloat(props: IconProps) {
return (
<SVGIcon viewBox="0 0 1024 1024" {...props}>
<path d="M160.256 816.64C116.224 872.448 102.4 921.6 102.4 921.6s49.152-13.824 104.96-57.856c22.016-17.408 128-112.64 200.704-174.08l-73.728-73.728c-61.44 72.704-157.184 178.688-174.08 200.704zM648.704 209.408L442.368 355.328l226.304 226.304 145.92-206.336 15.872 15.872c20.992 20.992 54.784 20.992 75.776 0s20.992-54.784 0-75.776l-197.12-197.12c-20.992-20.992-54.784-20.992-75.776 0-20.992 20.992-20.992 54.784 0 75.776l15.36 15.36zM247.808 334.848c-9.728 2.048-18.944 6.656-26.624 14.336-20.992 20.992-20.992 54.784 0 75.776l377.856 377.856c20.992 20.992 54.784 20.992 75.776 0 7.68-7.68 12.288-16.896 14.336-26.624L247.808 334.848z"></path>
<path d="M840.704 879.104c-9.728 0-19.456-3.584-27.136-11.264L155.648 210.432c-14.848-14.848-14.848-39.424 0-54.272 14.848-14.848 39.424-14.848 54.272 0L867.84 814.08c14.848 14.848 14.848 39.424 0 54.272-7.168 7.168-16.896 10.752-27.136 10.752z"></path>
</SVGIcon>
);
}
IconFloat.displayName = 'Float';

42
packages/editor-skeleton/src/layouts/left-fixed-pane.tsx
View File

@ -6,16 +6,31 @@ import Area from '../area';
import { PanelConfig } from '../types';
import Panel from '../widget/panel';
import { Designer } from '@ali/lowcode-designer';
import { IconFloat } from '../icons/float';
@observer
export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, Panel> }> {
shouldComponentUpdate() {
return false;
}
componentDidUpdate() {
// FIXME: dirty fix, need deep think
this.props.area.skeleton.editor.get(Designer)?.touchOffsetObserver();
}
// 取消固定
setFloat() {
const { area } = this.props;
const { current } = area;
if (!current) {
return;
}
area.skeleton.leftFixedArea.remove(current);
area.skeleton.leftFloatArea.add(current);
area.skeleton.leftFloatArea.container.active(current);
}
render() {
const { area } = this.props;
const hideTitleBar = area.current?.config.props?.hideTitleBar;
@ -34,15 +49,24 @@ export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, P
style={style}
>
{!hideTitleBar && (
<Button
text
className="lc-pane-close"
onClick={() => {
area.setVisible(false);
}}
>
<Icon type="close" />
</Button>
<Fragment>
<Button
text
className="lc-pane-icon-float"
onClick={this.setFloat.bind(this)}
>
<IconFloat />
</Button>
<Button
text
className="lc-pane-icon-close"
onClick={() => {
area.setVisible(false);
}}
>
<Icon type="close" />
</Button>
</Fragment>
)}
<Contents area={area} />
</div>

40
packages/editor-skeleton/src/layouts/left-float-pane.tsx
View File

@ -2,6 +2,7 @@ import { Component, Fragment } from 'react';
import classNames from 'classnames';
import { observer, Focusable, focusTracker } from '@ali/lowcode-editor-core';
import { Button, Icon } from '@alifd/next';
import { IconFix } from '../icons/fix';
import Area from '../area';
import Panel from '../widget/panel';
@ -76,6 +77,18 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
this.dispose?.();
}
// 固定
setFixed() {
const { area } = this.props;
const { current } = area;
if (!current) {
return;
}
area.skeleton.leftFloatArea.remove(current);
area.skeleton.leftFixedArea.add(current);
area.skeleton.leftFixedArea.container.active(current);
}
render() {
const { area } = this.props;
const width = area.current?.config.props?.width;
@ -93,15 +106,24 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
>
{
!hideTitleBar && (
<Button
text
className="lc-pane-close"
onClick={() => {
area.setVisible(false);
}}
>
<Icon type="close" />
</Button>
<Fragment>
<Button
text
className="lc-pane-icon-fix"
onClick={this.setFixed.bind(this)}
>
<IconFix />
</Button>
<Button
text
className="lc-pane-icon-close"
onClick={() => {
area.setVisible(false);
}}
>
<Icon type="close" />
</Button>
</Fragment>
)
}
<Contents area={area} />

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

@ -175,6 +175,65 @@ body {
display: flex;
min-height: 0;
position: relative;
.lc-tabs-title {
width: 100%;
height: 32px;
position: relative;
display: center;
display: flex;
justify-content: center;
align-items: center;
// background: rgba(31,56,88,0.04);
border-bottom: 1px solid #EDEFF3;
.lc-tab-title{
flex: 1;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: 12px;
&.actived {
color: #0079F2;
border-bottom-color: #0079F2;
}
}
}
.lc-tabs-content {
position: absolute;
top: 32px;
bottom: 0;
left: 0;
right: 0;
}
.lc-pane-icon-close {
position: absolute;
right: 16px;
top: 14px;
height: auto;
z-index: 2;
.next-icon{
line-height: 1;
color: rgba(0,0,0,0.6);
}
}
.lc-pane-icon-fix, .lc-pane-icon-float{
position: absolute;
right: 38px;
top: 14px;
height: auto;
z-index: 2;
svg {
vertical-align: middle;
color: rgba(0,0,0,0.6);
}
}
.lc-left-float-pane {
position: absolute;
top: 0;
@ -190,48 +249,6 @@ body {
&.lc-area-visible {
display: block;
}
.lc-pane-close{
position: absolute;
right: 16px;
top: 16px;
height: auto;
z-index: 2;
.next-icon{
line-height: 1;
}
}
.lc-tabs-title {
width: 100%;
height: 32px;
position: relative;
display: center;
display: flex;
justify-content: center;
align-items: center;
// background: rgba(31,56,88,0.04);
border-bottom: 1px solid #EDEFF3;
.lc-tab-title{
flex: 1;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: 12px;
&.actived {
color: #0079F2;
border-bottom-color: #0079F2;
}
}
}
.lc-tabs-content {
position: absolute;
top: 32px;
bottom: 0;
left: 0;
right: 0;
}
}
.lc-left-area {
height: 100%;
@ -293,16 +310,6 @@ body {
&.lc-area-visible {
display: block;
}
.lc-pane-close {
position: absolute;
right: 16px;
top: 16px;
height: auto;
z-index: 2;
.next-icon {
line-height: 1;
}
}
}
.lc-left-area.lc-area-visible ~ .lc-left-fixed-pane {
margin-left: 1px;

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

@ -71,7 +71,7 @@ class TreeNodeChildren extends Component<{
/>
);
treeNode.children?.forEach((child, index) => {
const childIsModal = child.node.getPrototype().isModal();
const childIsModal = child.node.getPrototype()?.isModal() || false;
if (isModal != childIsModal) {
return;
}

30
packages/react-renderer/src/engine/blockEngine.jsx
View File

@ -59,7 +59,7 @@ export default class BlockEngine extends BaseEngine {
}
render() {
const { __schema } = this.props;
const { __schema, __components } = this.props;
if (!isSchema(__schema, true) || (__schema.componentName !== 'Block' && __schema.componentName !== 'Div')) {
return '区块schema结构异常！';
@ -69,7 +69,33 @@ export default class BlockEngine extends BaseEngine {
this.__generateCtx();
this.__render();
const { id, className, style, autoLoading, defaultHeight = 300, loading } = this.__parseData(__schema.props);
const props = this.__parseData(__schema.props);
const { id, className, style, autoLoading, defaultHeight = 300, loading } = props;
const { Block } = __components;
if (Block) {
const { engine } = this.context || {};
return (
<AppContext.Provider
value={{
...this.context,
blockContext: this,
}}
>
{engine.createElement(
Block,
{
...props,
ref: this.__getRef,
className: classnames(getFileCssName(__schema.fileName), className, this.props.className),
__id: __schema.id,
},
this.__createDom(),
)}
</AppContext.Provider>
);
}
const renderContent = () => (
<AppContext.Provider
value={{

17
packages/react-simulator-renderer/src/renderer.ts
View File

@ -74,7 +74,7 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
}
private _libraryMap: { [key: string]: string } = {};
private buildComponents() {
this._components = buildComponents(this._libraryMap, this._componentsMap);
this._components = buildComponents(this._libraryMap, this._componentsMap, this.createComponent.bind(this));
}
@obx.ref private _components: any = {};
@computed get components(): object {
@ -247,8 +247,10 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
}
const _leaf = host.document.designer.currentDocument?.createNode(schema);
const node = host.document.createNode(schema);
let props = processPropsSchema(schema.props, propsMap);
let { props } = schema;
props = host.document.designer.transformProps(props, node, TransformStage.Init);
props = host.document.designer.transformProps(props, node, TransformStage.Upgrade);
props = processPropsSchema(props, propsMap);
props = host.document.designer.transformProps(props, node, TransformStage.Render);
return createElement(Com, { ...props, _leaf }, children);
};
@ -386,16 +388,17 @@ const builtinComponents = {
Leaf,
};
function buildComponents(
libraryMap: LibraryMap,
componentsMap: { [componentName: string]: NpmInfo | ComponentType<any> },
) {
function buildComponents(libraryMap: LibraryMap,
componentsMap: { [componentName: string]: NpmInfo | ComponentType<any> | ComponentSchema },
createComponent: (schema: ComponentSchema) => Component | null) {
const components: any = {
...builtinComponents,
};
Object.keys(componentsMap).forEach((componentName) => {
let component = componentsMap[componentName];
if (isReactComponent(component)) {
if (component && (component as ComponentSchema).componentName === 'Component') {
components[componentName] = createComponent(component as ComponentSchema);
} else if (isReactComponent(component)) {
components[componentName] = component;
} else {
component = findComponent(libraryMap, componentName, component);

4
packages/types/src/value-type.ts
View File

@ -11,6 +11,10 @@ export interface JSExpression {
* 模拟值
*/
mock?: any;
/**
* 额外扩展属性，如 extType、events
*/
[key: string]: any;
}
export interface JSSlot {