fix: 1. 修复dialog拖入不显示问题 2. dialog 只能在根节点下 3. 引入 modalNodeManager

packages/designer/src/builtin-simulator/host.ts

@@ -824,6 +824,15 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
       event: e,
     };
 
+    if (e.dragObject.nodes[0].getPrototype().isModal()) {
+      return this.designer.createLocation({
+        target: this.document.rootNode,
+        detail,
+        source: 'simulator' + this.document.id,
+        event: e,
+      }); 
+    }
+
     if (!children || children.size < 1 || !edge) {
       return this.designer.createLocation(locationData);
     }

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

@@ -10,6 +10,7 @@ import { Selection } from './selection';
 import { History } from './history';
 import { TransformStage } from './node';
 import { uniqueId } from '@ali/lowcode-utils';
+import ModalNodesManager from './node/modalNodesManager';
 
 export type GetDataType<T, NodeType> = T extends undefined
   ? NodeType extends {
@@ -43,6 +44,7 @@ export class DocumentModel {
   private _simulator?: ISimulatorHost;
   private emitter: EventEmitter;
   private rootNodeVisitorMap: { [visitorName: string]: any } = {};
+  private modalNodesManager: ModalNodesManager;
 
   /**
    * 模拟器
@@ -97,6 +99,7 @@ export class DocumentModel {
       (schema) => this.import(schema as RootSchema, true),
     );
     this.setupListenActiveNodes();
+    this.modalNodesManager = new ModalNodesManager(this);
     this.inited = true;
   }
 

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

@@ -0,0 +1,135 @@
+import { EventEmitter } from 'events';
+import { Node } from './node';
+import { DocumentModel } from '../document-model';
+
+function getModalNodes(node: Node) {
+  let nodes: any = [];
+  const prototype = node.getPrototype();
+  if (prototype && prototype.isModal()) {
+    nodes.push(node);
+  }
+  const children = node.getChildren();
+  if (children) {
+    children.forEach((child) => {
+      nodes = nodes.concat(getModalNodes(child));
+    });
+  }
+  return nodes;
+}
+
+export default class ModalNodesManager {
+  public willDestroy: any;
+
+  private page: DocumentModel;
+  private modalNodes: [Node];
+  private nodeRemoveEvents: any;
+  private emitter: EventEmitter;
+
+  constructor(page: DocumentModel) {
+    this.page = page;
+    this.emitter = new EventEmitter();
+    this.nodeRemoveEvents = {};
+    this.setNodes();
+    this.hideModalNodes();
+    this.willDestroy = [
+      page.onNodeCreate((node) => this.addNode(node)),
+      page.onNodeDestroy((node) => this.removeNode(node)),
+    ];
+  }
+
+  public getModalNodes() {
+    return this.modalNodes;
+  }
+
+  public getVisibleModalNode() {
+    const visibleNode = this.modalNodes
+      ? this.modalNodes.find((node: Node) => {
+          return !node.getExtraProp('hidden');
+        })
+      : null;
+    return visibleNode;
+  }
+
+  public hideModalNodes() {
+    if (this.modalNodes) {
+      this.modalNodes.forEach((node: Node) => {
+        node.getExtraProp('hidden')?.setValue(true);
+      });
+    }
+  }
+
+  public setVisible(node: Node) {
+    this.hideModalNodes();
+    node.getExtraProp('hidden')?.setValue(false);
+  }
+
+  public setInvisible(node: Node) {
+    node.getExtraProp('hidden')?.setValue(true);
+  }
+
+  public onVisibleChange(func: () => any) {
+    this.emitter.on('visibleChange', func);
+    return () => {
+      this.emitter.removeListener('visibleChange', func);
+    };
+  }
+
+  public onModalNodesChange(func: () => any) {
+    this.emitter.on('modalNodesChange', func);
+    return () => {
+      this.emitter.removeListener('modalNodesChange', func);
+    };
+  }
+
+  private addNode(node: Node) {
+    const prototype = node.getPrototype();
+    if (prototype && prototype.isModal()) {
+      this.hideModalNodes();
+      this.modalNodes.push(node);
+      this.addNodeEvent(node);
+      this.emitter.emit('modalNodesChange');
+      this.emitter.emit('visibleChange');
+    }
+  }
+
+  private removeNode(node: Node) {
+    const prototype = node.getPrototype();
+    if (prototype && prototype.isModal()) {
+      const index = this.modalNodes.indexOf(node);
+      if (index >= 0) {
+        this.modalNodes.splice(index, 1);
+      }
+      this.removeNodeEvent(node);
+      this.emitter.emit('modalNodesChange');
+      if (!node.getExtraProp('hidden')) {
+        this.emitter.emit('visibleChange');
+      }
+    }
+  }
+
+  private addNodeEvent(node: Node) {
+    // this.nodeRemoveEvents[node.getId()] =
+    //     node.onStatusChange((status: any, field: any) => {
+    //       if (field === 'visibility') { 
+    //         this.emitter.emit('visibleChange');
+    //       }
+    //     });
+  }
+
+  private removeNodeEvent(node: Node) {
+    // if (this.nodeRemoveEvents[node.getId()]) {
+    //   this.nodeRemoveEvents[node.getId()]();
+    //   delete this.nodeRemoveEvents[node.getId()];
+    // }
+  }
+
+  private setNodes() {
+    const nodes = getModalNodes(this.page.getRoot());
+    this.modalNodes = nodes;
+    this.modalNodes.forEach((node: Node) => {
+      this.addNodeEvent(node);
+    });
+
+    this.emitter.emit('modalNodesChange');
+  }
+}

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

@@ -161,9 +161,6 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
       this.setupAutoruns();
     }
 
-    if (this.componentMeta.isModal) {
-      this.getExtraProp('hidden', true)?.setValue(true);
-    }
     this.settingEntry = this.document.designer.createSettingEntry([ this ]);
   }