From 31ea5d560129271d3706576317a47406c98a44f8 Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Tue, 28 Jul 2020 10:12:53 +0800 Subject: [PATCH 1/3] fix: vc-filter bug fix --- .../designer/src/document/document-model.ts | 9 ++- .../src/document/node/node-children.ts | 58 +++++++++++-------- packages/designer/src/document/node/node.ts | 52 ++++++++++++----- .../designer/src/document/node/props/props.ts | 9 +-- .../src/bundle/upgrade-metadata.ts | 5 ++ 5 files changed, 85 insertions(+), 48 deletions(-) diff --git a/packages/designer/src/document/document-model.ts b/packages/designer/src/document/document-model.ts index 46cb51af5..f6615ecce 100644 --- a/packages/designer/src/document/document-model.ts +++ b/packages/designer/src/document/document-model.ts @@ -173,7 +173,7 @@ export class DocumentModel { node = this.getNode(schema.id); if (node && node.componentName === schema.componentName) { if (node.parent) { - node.internalSetParent(null); + node.internalSetParent(null, false); // will move to another position // todo: this.activeNodes?.push(node); } @@ -546,6 +546,13 @@ export class DocumentModel { this.emitter.removeListener('nodedestroy', func); }; } + + /** + * @deprecated + */ + refresh() { + console.warn('refresh method is deprecated'); + } } export function isDocumentModel(obj: any): obj is DocumentModel { diff --git a/packages/designer/src/document/node/node-children.ts b/packages/designer/src/document/node/node-children.ts index dc6bd2aac..a255277e9 100644 --- a/packages/designer/src/document/node/node-children.ts +++ b/packages/designer/src/document/node/node-children.ts @@ -61,6 +61,14 @@ export class NodeChildren { } } + /** + * @deprecated + * @param nodes + */ + concat(nodes: Node[]) { + return this.children.concat(nodes); + } + /** * 元素个数 */ @@ -86,7 +94,7 @@ export class NodeChildren { /** * 删除一个节点 */ - delete(node: Node, purge = false): boolean { + delete(node: Node, purge = false, useMutator = true): boolean { const i = this.children.indexOf(node); if (i < 0) { return false; @@ -94,18 +102,20 @@ export class NodeChildren { const deleted = this.children.splice(i, 1)[0]; if (purge) { // should set parent null - deleted.internalSetParent(null); - deleted.purge(); + deleted.internalSetParent(null, useMutator); + deleted.purge(useMutator); } this.emitter.emit('change'); - this.reportModified(node, this.owner, {type: 'remove', removeIndex: i, removeNode: node}); + if (useMutator) { + this.reportModified(node, this.owner, {type: 'remove', removeIndex: i, removeNode: node}); + } return false; } /** * 插入一个节点，返回新长度 */ - insert(node: Node, at?: number | null): void { + insert(node: Node, at?: number | null, useMutator = true): void { const children = this.children; let index = at == null || at === -1 ? children.length : at; @@ -117,7 +127,7 @@ export class NodeChildren { } else { children.push(node); } - node.internalSetParent(this.owner); + node.internalSetParent(this.owner, useMutator); } else { if (index > i) { index -= 1; @@ -132,7 +142,7 @@ export class NodeChildren { } this.emitter.emit('change'); - this.reportModified(node, this.owner, { type: 'insert' }); + // this.reportModified(node, this.owner, { type: 'insert' }); // check condition group if (node.conditionGroup) { @@ -247,7 +257,7 @@ export class NodeChildren { const i = this.children.indexOf(node); if (i > -1) { this.children.splice(i, 1); - node.remove(); + node.remove(false); } }); changed = true; @@ -284,12 +294,12 @@ export class NodeChildren { /** * 回收销毁 */ - purge() { + purge(useMutator = true) { if (this.purged) { return; } this.purged = true; - this.children.forEach((child) => child.purge()); + this.children.forEach((child) => child.purge(useMutator)); } get [Symbol.toStringTag]() { @@ -297,13 +307,13 @@ export class NodeChildren { return 'Array'; } - /** - * @deprecated - * 为了兼容vision体系存量api - */ - getChildrenArray() { - return this.children; - } + // /** + // * @deprecated + // * 为了兼容vision体系存量api + // */ + // getChildrenArray() { + // return this.children; + // } private reportModified(node: Node, owner: Node, options = {}) { if (!node) { @@ -321,13 +331,13 @@ export class NodeChildren { } } - if (callbacks?.onNodeAdd && options?.type === 'insert') { - try { - callbacks?.onNodeAdd.call(owner, node, owner); - } catch (e) { - console.error('error when excute experimental.callbacks.onNodeAdd', e); - } - } + // if (callbacks?.onNodeAdd && options?.type === 'insert') { + // try { + // callbacks?.onNodeAdd.call(owner, node, owner); + // } catch (e) { + // console.error('error when excute experimental.callbacks.onNodeAdd', e); + // } + // } if (owner.parent && !owner.parent.isRoot()) { this.reportModified(node, owner.parent, options); diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index b6f0ed4c3..3b7c507e0 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -98,7 +98,7 @@ export class Node { /** * 属性抽象 */ - readonly props: Props; + props: Props; protected _children?: NodeChildren; /** * @deprecated @@ -239,10 +239,22 @@ export class Node { this.internalSetParent(null); this.document.addWillPurge(this); } + + private didDropIn(dragment: Node) { + const callbacks = this.componentMeta.getMetadata().experimental?.callbacks; + if (callbacks?.onNodeAdd) { + callbacks?.onNodeAdd.call(this, dragment, this); + } + if (this._parent) { + this._parent.didDropIn(dragment); + } + } + /** * 内部方法，请勿使用 + * @param useMutator 是否触发联动逻辑 */ - internalSetParent(parent: ParentalNode | null) { + internalSetParent(parent: ParentalNode | null, useMutator = false) { if (this._parent === parent) { return; } @@ -251,7 +263,7 @@ export class Node { if (this.isSlot()) { this._parent.removeSlot(this, false); } else { - this._parent.children.delete(this); + this._parent.children.delete(this, false, useMutator); } } @@ -265,6 +277,10 @@ export class Node { this.setConditionGroup(grp); } } + + if (useMutator) { + parent.didDropIn(this); + } } } @@ -283,12 +299,12 @@ export class Node { /** * 移除当前节点 */ - remove() { + remove(useMutator = true) { if (this.parent) { if (this.isSlot()) { this.parent.removeSlot(this, true); } else { - this.parent.children.delete(this, true); + this.parent.children.delete(this, true, useMutator); } } } @@ -408,8 +424,8 @@ export class Node { delete data.id; const newNode = this.document.createNode(data); - this.insertBefore(newNode, node); - node.remove(); + this.insertBefore(newNode, node, false); + node.remove(false); if (selected) { this.document.selection.select(newNode.id); @@ -473,7 +489,11 @@ export class Node { /** * 设置多个属性值，替换原有值 */ - setProps(props?: PropsMap | PropsList | null) { + setProps(props?: PropsMap | PropsList | Props | null) { + if(props instanceof Props) { + this.props = props; + return; + } this.props.import(props); } @@ -630,7 +650,7 @@ export class Node { } addSlot(slotNode: Node) { - slotNode.internalSetParent(this as ParentalNode); + slotNode.internalSetParent(this as ParentalNode, true); this._slots.push(slotNode); } @@ -652,18 +672,18 @@ export class Node { /** * 销毁 */ - purge() { + purge(useMutator = true) { if (this.purged) { return; } if (this._parent) { // should remove thisNode before purge - this.remove(); + this.remove(useMutator); return; } this.purged = true; if (this.isParental()) { - this.children.purge(); + this.children.purge(useMutator); } this.autoruns?.forEach((dispose) => dispose()); this.props.purge(); @@ -682,10 +702,10 @@ export class Node { getComponentName() { return this.componentName; } - insertBefore(node: Node, ref?: Node) { - this.children?.insert(node, ref ? ref.index : null); + insertBefore(node: Node, ref?: Node, useMutator = true) { + this.children?.insert(node, ref ? ref.index : null, useMutator); } - insertAfter(node: any, ref?: Node) { + insertAfter(node: any, ref?: Node, useMutator = true) { if (!isNode(node)) { if (node.getComponentName) { node = this.document.createNode({ @@ -695,7 +715,7 @@ export class Node { node = this.document.createNode(node); } } - this.children?.insert(node, ref ? ref.index + 1 : null); + this.children?.insert(node, ref ? ref.index + 1 : null, useMutator); } getParent() { return this.parent; diff --git a/packages/designer/src/document/node/props/props.ts b/packages/designer/src/document/node/props/props.ts index 19b8b30c7..91f598a7e 100644 --- a/packages/designer/src/document/node/props/props.ts +++ b/packages/designer/src/document/node/props/props.ts @@ -331,14 +331,9 @@ export class Props implements IPropParent { } /** - * @deprecated - * 兼容vision体系 + * 获取 props 对应的 node */ getNode() { - const nodeForVision = this.owner; - nodeForVision.getChildren = () => { - return this.owner?.getChildren()?.getChildrenArray() || []; - }; - return nodeForVision; + return this.owner; } } diff --git a/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts b/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts index d46a06929..aebbcbcbd 100644 --- a/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts +++ b/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts @@ -3,6 +3,7 @@ import { isPlainObject, uniqueId } from '@ali/lowcode-utils'; import { isI18nData, SettingTarget, InitialItem, FilterItem, isJSSlot, ProjectSchema, AutorunItem } from '@ali/lowcode-types'; import { untracked } from '@ali/lowcode-editor-core'; import { editor, designer } from '../editor'; +import { SettingField } from '@ali/lowcode-designer'; type Field = SettingTarget; @@ -325,6 +326,10 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec if (mutator) { extraProps.setValue = (field: Field, value: any) => { + // TODO: 兼容代码，不触发查询组件的 Mutator + if (field instanceof SettingField && field.componentMeta?.componentName === 'Filter') { + return; + } mutator.call(field, value, value); }; } From 655192135fbb25a75c431ddb0500c78b9c7fec43 Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Tue, 28 Jul 2020 14:04:15 +0800 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=E9=AB=98=E7=BA=A7=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E6=94=BE=E5=88=B0=E3=80=8C=E5=B1=9E=E6=80=A7=E3=80=8D?= =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../editor-skeleton/src/transducers/addon-combine.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/editor-skeleton/src/transducers/addon-combine.ts b/packages/editor-skeleton/src/transducers/addon-combine.ts index 1cc54dd50..dfd206535 100644 --- a/packages/editor-skeleton/src/transducers/addon-combine.ts +++ b/packages/editor-skeleton/src/transducers/addon-combine.ts @@ -132,10 +132,11 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp let l = propsGroup.length; while (l-- > 0) { const item = propsGroup[l]; - if (item.type === 'group' && (item.title === '高级' || item.title?.label === '高级')) { - advanceGroup = item.items || []; - propsGroup.splice(l, 1); - } else if (item.name === '__style__' || item.name === 'containerStyle' || item.name === 'pageStyle') { + // if (item.type === 'group' && (item.title === '高级' || item.title?.label === '高级')) { + // advanceGroup = item.items || []; + // propsGroup.splice(l, 1); + // } + if (item.name === '__style__' || item.name === 'containerStyle' || item.name === 'pageStyle') { propsGroup.splice(l, 1); stylesGroup.push(item); if (item.extraProps?.defaultCollapsed && item.name !== 'containerStyle') { From 99fac5512de162b2d28fec0e84a4f21a3cef8b6e Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Tue, 28 Jul 2020 14:04:54 +0800 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=E4=BD=8E=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=A4=84=E7=90=86=20modal=20node=EF=BC=8C?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B8=B2=E6=9F=93=E6=80=A7=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-simulator-renderer/src/renderer.ts | 81 +++++++++++++------ 1 file changed, 58 insertions(+), 23 deletions(-) diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts index afe970ef7..399432aa0 100644 --- a/packages/react-simulator-renderer/src/renderer.ts +++ b/packages/react-simulator-renderer/src/renderer.ts @@ -219,16 +219,19 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer { _schema.methods = {}; _schema.lifeCycles = {}; - const processPropsSchema = (propsSchema: any, propsMap: any): any => { + const processPropsSchema = (propsSchema: any, propsMap: any, node: any): any => { if (!propsSchema) { return {}; } - const result = { ...propsSchema }; + let result = { ...propsSchema }; + result = host.document.designer.transformProps(result, node, TransformStage.Init); + result = host.document.designer.transformProps(result, node, TransformStage.Upgrade); + const reg = /^(?:this\.props|props)\.(\S+)$/; - Object.keys(propsSchema).map((key: string) => { - if (propsSchema[key].type === 'JSExpression') { - const { value } = propsSchema[key]; + Object.keys(result).map((key: string) => { + if (result[key].type === 'JSExpression') { + const { value } = result[key]; const matched = reg.exec(value); if (matched) { const propName = matched[1]; @@ -236,32 +239,64 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer { } } }); + + result = host.document.designer.transformProps(result, node, TransformStage.Render); return result; }; - const getElement = (componentsMap: any, schema: any, propsMap: any): ReactElement => { - const Com = componentsMap[schema.componentName]; - let children = null; - if (schema.children && schema.children.length > 0) { - children = schema.children.map((item: any) => getElement(componentsMap, item, propsMap)); - } - const _leaf = host.document.designer.currentDocument?.createNode(schema); - const node = host.document.createNode(schema); - 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); - }; - const renderer = this; + const componentsMap = renderer.componentsMap; + + class Ele extends React.Component<{ schema: any, propsMap: any }> { + private isModal: boolean; + private node: any; + private renderProps: any; + + constructor(props: any){ + super(props); + const componentMeta = host.document.getComponentMeta(props.schema.componentName); + if (componentMeta?.prototype?.isModal()) { + this.isModal = true; + return; + } + this.node = host.document.createNode(props.schema); + this.renderProps = processPropsSchema(props.schema.props, props.propsMap, this.node); + } + + shouldComponentUpdate(nextProps: any) { + if (this.isModal) { + return false; + } + const renderProps = processPropsSchema(nextProps.schema.props, nextProps.propsMap, this.node); + if (renderProps && this.renderProps && JSON.stringify({...renderProps, fieldId: ''}) === JSON.stringify({...this.renderProps, fieldId: ''})) { + return false; + } + this.renderProps = renderProps; + return true; + } + + render() { + if (this.isModal) { + return null; + } + const { schema, propsMap } = this.props; + const { node } = this; + const Com = componentsMap[schema.componentName]; + let children = null; + if (schema.children && schema.children.length > 0) { + children = schema.children.map((item: any) => createElement(Ele, {schema: item, propsMap})); + } + + return createElement(Com, { ...this.renderProps, _leaf: node }, children); + } + } + class Com extends React.Component { render() { - const componentsMap = renderer.componentsMap; let children = null; + const propsMap = this.props; if (_schema.children && Array.isArray(_schema.children)) { - children = _schema.children?.map((item: any) => getElement(componentsMap, item, this.props)); + children = _schema.children?.map((item: any) => createElement(Ele, {schema: item, propsMap})); } return createElement(React.Fragment, {}, children); }