Merge branch 'fix/filter-bug' into 'release/0.9.0'

Fix/filter bug



See merge request !909935

packages/designer/src/document/document-model.ts

@@ -178,7 +178,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);
         }
@@ -577,6 +577,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 {

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.internalSetParent(null, useMutator);
-      deleted.purge();
+      deleted.purge(useMutator);
     }
     this.emitter.emit('change');
+    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
+  //  * @deprecated
-   * 为了兼容vision体系存量api
+  //  * 为了兼容vision体系存量api
-   */
+  //  */
-  getChildrenArray() {
+  // getChildrenArray() {
-    return this.children;
+  //   return this.children;
-  }
+  // }
 
   private reportModified(node: Node, owner: Node, options = {}) {
     if (!node) {
@@ -313,18 +323,9 @@ export class NodeChildren {
       return;
     }
     const callbacks = owner.componentMeta.getMetadata().experimental?.callbacks;
-    if (callbacks?.onSubtreeModified && options?.type !== 'insert') {
+    if (callbacks?.onSubtreeModified) {
       try {
-        // 此处传入的 owner节点需要对getChildren进行处理，兼容老的数据结构
+        callbacks?.onSubtreeModified.call(node, owner, options);
-        callbacks?.onSubtreeModified.call(node, owner.getVisionCapabledNode(), options);
-      } catch (e) {
-        console.error('error when excute experimental.callbacks.onNodeAdd', e);
-      }
-    }
-
-    if (callbacks?.onNodeAdd && options?.type === 'insert') {
-      try {
-        callbacks?.onNodeAdd.call(owner, node.getVisionCapabledNode(), owner);
       } catch (e) {
         console.error('error when excute experimental.callbacks.onNodeAdd', e);
       }

packages/designer/src/document/node/node.ts

@@ -98,7 +98,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
   /**
    * 属性抽象
    */
-  readonly props: Props;
+  props: Props;
   protected _children?: NodeChildren;
   /**
    * @deprecated
@@ -239,10 +239,22 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
     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<Schema extends NodeSchema = NodeSchema> {
       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<Schema extends NodeSchema = NodeSchema> {
           this.setConditionGroup(grp);
         }
       }
+
+      if (useMutator) {
+        parent.didDropIn(this);
+      }
     }
   }
 
@@ -283,12 +299,12 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
   /**
    * 移除当前节点
    */
-  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<Schema extends NodeSchema = NodeSchema> {
       delete data.id;
       const newNode = this.document.createNode(data);
 
-      this.insertBefore(newNode, node);
+      this.insertBefore(newNode, node, false);
-      node.remove();
+      node.remove(false);
 
       if (selected) {
         this.document.selection.select(newNode.id);
@@ -473,7 +489,11 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
   /**
    * 设置多个属性值，替换原有值
    */
-  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<Schema extends NodeSchema = NodeSchema> {
   }
 
   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<Schema extends NodeSchema = NodeSchema> {
   /**
    * 销毁
    */
-  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<Schema extends NodeSchema = NodeSchema> {
   getComponentName() {
     return this.componentName;
   }
-  insertBefore(node: Node, ref?: Node) {
+  insertBefore(node: Node, ref?: Node, useMutator = true) {
-    this.children?.insert(node, ref ? ref.index : null);
+    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<Schema extends NodeSchema = NodeSchema> {
         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;
@@ -818,33 +838,6 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
   toString() {
     return this.id;
   }
-
-  /**
-   * 慎用，可能有极端未知后果
-   * @deprecated
-   */
-  getVisionCapabledNode() {
-    // 判断是否已经是 nodeForVision
-    if (!this.isVisionNode) {
-      const children = this.getChildren();
-      this.getChildren = () => {
-        return children?.getChildrenArray() || [];
-      };
-      this.getProps = () => {
-        const props = this.props.export();
-        props.getPropValue = (key) => {
-          return this.props.getPropValue(key);
-        };
-        props.getNode = () => {
-          return this;
-        };
-        return props;
-      };
-      this.isVisionNode = true;
-    } 
-    return this;
-  }
-
 }
 
 export interface ParentalNode<T extends NodeSchema = NodeSchema> extends Node<T> {

packages/designer/src/document/node/props/props.ts

@@ -331,11 +331,9 @@ export class Props implements IPropParent {
   }
 
   /**
-   * @deprecated
+   * 获取 props 对应的 node
-   * 兼容vision体系
    */
   getNode() {
-    const nodeForVision = this.owner?.getVisionCapabledNode();
+    return this.owner;
-    return nodeForVision;
   }
 }

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

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 === '高级')) {
+      // if (item.type === 'group' && (item.title === '高级' || item.title?.label === '高级')) {
-        advanceGroup = item.items || [];
+      //   advanceGroup = item.items || [];
-        propsGroup.splice(l, 1);
+      //   propsGroup.splice(l, 1);
-      } else if (item.name === '__style__' || item.name === 'containerStyle' || item.name === 'pageStyle') {
+      // } 
+      if (item.name === '__style__' || item.name === 'containerStyle' || item.name === 'pageStyle') {
         propsGroup.splice(l, 1);
         stylesGroup.push(item);
         if (item.extraProps?.defaultCollapsed && item.name !== 'containerStyle') {

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) => {
+      Object.keys(result).map((key: string) => {
-        if (propsSchema[key].type === 'JSExpression') {
+        if (result[key].type === 'JSExpression') {
-          const { value } = propsSchema[key];
+          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 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) => getElement(componentsMap, item, propsMap));
+          children = schema.children.map((item: any) => createElement(Ele, {schema: item, propsMap}));
+        }
+
+        return createElement(Com, { ...this.renderProps, _leaf: node }, children);
+      }
     }
-      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;
     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);
       }