@tmagic/editor 1.3.12 → 1.3.13

package/dist/tmagic-editor.js

@@ -2993,6 +2993,7 @@ class Editor extends BaseService {
     this.addModifiedNodeId(config.id);
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
+    this.emit("drag-to", { index, targetIndex, config, parent, targetParent });
   }
   /**
    * 撤销当前操作
@@ -5218,14 +5219,17 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     const selectNode = async (id) => {
       await services?.editorService.select(id);
       services?.editorService.get("stage")?.select(id);
+      services?.stageOverlayService.get("stage")?.select(id);
     };
     const highlight = throttle((id) => {
       services?.editorService.highlight(id);
       services?.editorService.get("stage")?.highlight(id);
+      services?.stageOverlayService.get("stage")?.highlight(id);
     }, 150);
     const unhightlight = () => {
       services?.editorService.set("highlightNode", null);
       services?.editorService.get("stage")?.clearHighlight();
+      services?.stageOverlayService.get("stage")?.clearHighlight();
     };
     return (_ctx, _cache) => {
       return uiSelectMode.value ? (openBlock(), createElementBlock("div", {
@@ -7893,6 +7897,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
     } else {
       await services?.editorService.select(data);
       services?.editorService.get("stage")?.select(data.id);
+      services?.stageOverlayService.get("stage")?.select(data.id);
     }
   };
   const multiSelect = async (data) => {
@@ -7911,6 +7916,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
     }
     await services?.editorService.multiSelect(newNodes);
     services?.editorService.get("stage")?.multiSelect(newNodes);
+    services?.stageOverlayService.get("stage")?.multiSelect(newNodes);
   };
   const throttleTime = 300;
   const highlightHandler = throttle((event, data) => {
@@ -7919,6 +7925,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
   const highlight = (data) => {
     services?.editorService?.highlight(data);
     services?.editorService?.get("stage")?.highlight(data.id);
+    services?.stageOverlayService?.get("stage")?.highlight(data.id);
   };
   const nodeClickHandler = (event, data) => {
     if (!nodeStatusMap?.value)
@@ -10579,6 +10586,8 @@ class StageOverlay extends BaseService {
     editorService.on("update", this.updateHandler);
     editorService.on("add", this.addHandler);
     editorService.on("remove", this.removeHandler);
+    editorService.on("drag-to", this.updateHandler);
+    editorService.on("move-layer", this.updateHandler);
   }
   closeOverlay() {
     this.set("stageOverlayVisible", false);
@@ -10592,6 +10601,8 @@ class StageOverlay extends BaseService {
     editorService.off("update", this.updateHandler);
     editorService.off("add", this.addHandler);
     editorService.off("remove", this.removeHandler);
+    editorService.off("drag-to", this.updateHandler);
+    editorService.off("move-layer", this.updateHandler);
   }
   updateOverlay() {
     const sourceEl = this.get("sourceEl");
@@ -10618,12 +10629,6 @@ class StageOverlay extends BaseService {
           });
         }
         const wrapDiv = this.get("wrapDiv");
-        const sourceEl = this.get("sourceEl");
-        wrapDiv.style.cssText = `
-            width: ${sourceEl?.scrollWidth}px;
-            height: ${sourceEl?.scrollHeight}px;
-            background-color: #fff;
-          `;
         await this.render();
         return wrapDiv;
       }
@@ -10650,11 +10655,17 @@ class StageOverlay extends BaseService {
   async render() {
     this.createContentEl();
     const contentEl = this.get("contentEl");
+    const sourceEl = this.get("sourceEl");
     const wrapDiv = this.get("wrapDiv");
     const subStage = this.get("stage");
     const stageOptions = this.get("stageOptions");
     if (!contentEl)
       return;
+    wrapDiv.style.cssText = `
+      width: ${sourceEl?.scrollWidth}px;
+      height: ${sourceEl?.scrollHeight}px;
+      background-color: #fff;
+    `;
     Array.from(wrapDiv.children).forEach((element) => {
       element.remove();
     });
@@ -10667,17 +10678,31 @@ class StageOverlay extends BaseService {
     }
   }
   updateHandler = () => {
-    this.render();
-    this.updateOverlay();
+    setTimeout(() => {
+      this.render();
+      this.updateOverlay();
+      this.updateSelectStatus();
+    });
   };
   addHandler = () => {
     this.render();
     this.updateOverlay();
+    this.updateSelectStatus();
   };
   removeHandler = () => {
     this.render();
     this.updateOverlay();
+    this.updateSelectStatus();
   };
+  updateSelectStatus() {
+    const subStage = this.get("stage");
+    const nodes = editorService.get("nodes");
+    if (nodes.length > 1) {
+      subStage?.multiSelect(nodes.map((n) => n.id));
+    } else {
+      subStage?.select(nodes[0].id);
+    }
+  }
 }
 const stageOverlayService = new StageOverlay();
 

package/dist/tmagic-editor.umd.cjs

@@ -2998,6 +2998,7 @@
       this.addModifiedNodeId(config.id);
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
+      this.emit("drag-to", { index, targetIndex, config, parent, targetParent });
     }
     /**
      * 撤销当前操作
@@ -5223,14 +5224,17 @@
       const selectNode = async (id) => {
         await services?.editorService.select(id);
         services?.editorService.get("stage")?.select(id);
+        services?.stageOverlayService.get("stage")?.select(id);
       };
       const highlight = lodashEs.throttle((id) => {
         services?.editorService.highlight(id);
         services?.editorService.get("stage")?.highlight(id);
+        services?.stageOverlayService.get("stage")?.highlight(id);
       }, 150);
       const unhightlight = () => {
         services?.editorService.set("highlightNode", null);
         services?.editorService.get("stage")?.clearHighlight();
+        services?.stageOverlayService.get("stage")?.clearHighlight();
       };
       return (_ctx, _cache) => {
         return uiSelectMode.value ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -7898,6 +7902,7 @@
       } else {
         await services?.editorService.select(data);
         services?.editorService.get("stage")?.select(data.id);
+        services?.stageOverlayService.get("stage")?.select(data.id);
       }
     };
     const multiSelect = async (data) => {
@@ -7916,6 +7921,7 @@
       }
       await services?.editorService.multiSelect(newNodes);
       services?.editorService.get("stage")?.multiSelect(newNodes);
+      services?.stageOverlayService.get("stage")?.multiSelect(newNodes);
     };
     const throttleTime = 300;
     const highlightHandler = lodashEs.throttle((event, data) => {
@@ -7924,6 +7930,7 @@
     const highlight = (data) => {
       services?.editorService?.highlight(data);
       services?.editorService?.get("stage")?.highlight(data.id);
+      services?.stageOverlayService?.get("stage")?.highlight(data.id);
     };
     const nodeClickHandler = (event, data) => {
       if (!nodeStatusMap?.value)
@@ -10584,6 +10591,8 @@
       editorService.on("update", this.updateHandler);
       editorService.on("add", this.addHandler);
       editorService.on("remove", this.removeHandler);
+      editorService.on("drag-to", this.updateHandler);
+      editorService.on("move-layer", this.updateHandler);
     }
     closeOverlay() {
       this.set("stageOverlayVisible", false);
@@ -10597,6 +10606,8 @@
       editorService.off("update", this.updateHandler);
       editorService.off("add", this.addHandler);
       editorService.off("remove", this.removeHandler);
+      editorService.off("drag-to", this.updateHandler);
+      editorService.off("move-layer", this.updateHandler);
     }
     updateOverlay() {
       const sourceEl = this.get("sourceEl");
@@ -10623,12 +10634,6 @@
             });
           }
           const wrapDiv = this.get("wrapDiv");
-          const sourceEl = this.get("sourceEl");
-          wrapDiv.style.cssText = `
-            width: ${sourceEl?.scrollWidth}px;
-            height: ${sourceEl?.scrollHeight}px;
-            background-color: #fff;
-          `;
           await this.render();
           return wrapDiv;
         }
@@ -10655,11 +10660,17 @@
     async render() {
       this.createContentEl();
       const contentEl = this.get("contentEl");
+      const sourceEl = this.get("sourceEl");
       const wrapDiv = this.get("wrapDiv");
       const subStage = this.get("stage");
       const stageOptions = this.get("stageOptions");
       if (!contentEl)
         return;
+      wrapDiv.style.cssText = `
+      width: ${sourceEl?.scrollWidth}px;
+      height: ${sourceEl?.scrollHeight}px;
+      background-color: #fff;
+    `;
       Array.from(wrapDiv.children).forEach((element) => {
         element.remove();
       });
@@ -10672,17 +10683,31 @@
       }
     }
     updateHandler = () => {
-      this.render();
-      this.updateOverlay();
+      setTimeout(() => {
+        this.render();
+        this.updateOverlay();
+        this.updateSelectStatus();
+      });
     };
     addHandler = () => {
       this.render();
       this.updateOverlay();
+      this.updateSelectStatus();
     };
     removeHandler = () => {
       this.render();
       this.updateOverlay();
+      this.updateSelectStatus();
     };
+    updateSelectStatus() {
+      const subStage = this.get("stage");
+      const nodes = editorService.get("nodes");
+      if (nodes.length > 1) {
+        subStage?.multiSelect(nodes.map((n) => n.id));
+      } else {
+        subStage?.select(nodes[0].id);
+      }
+    }
   }
   const stageOverlayService = new StageOverlay();
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.12",
+  "version": "1.3.13",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -42,14 +42,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.3.12",
-    "@tmagic/dep": "1.3.12",
-    "@tmagic/design": "1.3.12",
-    "@tmagic/form": "1.3.12",
-    "@tmagic/schema": "1.3.12",
-    "@tmagic/stage": "1.3.12",
-    "@tmagic/table": "1.3.12",
-    "@tmagic/utils": "1.3.12",
+    "@tmagic/core": "1.3.13",
+    "@tmagic/dep": "1.3.13",
+    "@tmagic/design": "1.3.13",
+    "@tmagic/form": "1.3.13",
+    "@tmagic/schema": "1.3.13",
+    "@tmagic/stage": "1.3.13",
+    "@tmagic/table": "1.3.13",
+    "@tmagic/utils": "1.3.13",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.12",
-    "@tmagic/form": "1.3.12",
+    "@tmagic/design": "1.3.13",
+    "@tmagic/form": "1.3.13",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.8"
   },

package/src/fields/UISelect.vue

@@ -106,16 +106,19 @@ const deleteHandler = () => {
 const selectNode = async (id: Id) => {
   await services?.editorService.select(id);
   services?.editorService.get('stage')?.select(id);
+  services?.stageOverlayService.get('stage')?.select(id);
 };
 
 const highlight = throttle((id: Id) => {
   services?.editorService.highlight(id);
   services?.editorService.get('stage')?.highlight(id);
+  services?.stageOverlayService.get('stage')?.highlight(id);
 }, 150);
 
 const unhightlight = () => {
   services?.editorService.set('highlightNode', null);
   services?.editorService.get('stage')?.clearHighlight();
+  services?.stageOverlayService.get('stage')?.clearHighlight();
 };
 </script>
 

package/src/layouts/sidebar/layer/use-click.ts

@@ -26,6 +26,7 @@ export const useClick = (
     } else {
       await services?.editorService.select(data);
       services?.editorService.get('stage')?.select(data.id);
+      services?.stageOverlayService.get('stage')?.select(data.id);
     }
   };
 
@@ -50,6 +51,7 @@ export const useClick = (
 
     await services?.editorService.multiSelect(newNodes);
     services?.editorService.get('stage')?.multiSelect(newNodes);
+    services?.stageOverlayService.get('stage')?.multiSelect(newNodes);
   };
 
   const throttleTime = 300;
@@ -62,6 +64,7 @@ export const useClick = (
   const highlight = (data: TreeNodeData) => {
     services?.editorService?.highlight(data);
     services?.editorService?.get('stage')?.highlight(data.id);
+    services?.stageOverlayService?.get('stage')?.highlight(data.id);
   };
 
   const nodeClickHandler = (event: MouseEvent, data: TreeNodeData) => {

package/src/services/editor.ts

@@ -892,6 +892,8 @@ class Editor extends BaseService {
     this.addModifiedNodeId(parent.id);
 
     this.pushHistoryState();
+
+    this.emit('drag-to', { index, targetIndex, config, parent, targetParent });
   }
 
   /**

package/src/services/stageOverlay.ts

@@ -51,6 +51,8 @@ class StageOverlay extends BaseService {
     editorService.on('update', this.updateHandler);
     editorService.on('add', this.addHandler);
     editorService.on('remove', this.removeHandler);
+    editorService.on('drag-to', this.updateHandler);
+    editorService.on('move-layer', this.updateHandler);
   }
 
   public closeOverlay() {
@@ -67,6 +69,8 @@ class StageOverlay extends BaseService {
     editorService.off('update', this.updateHandler);
     editorService.off('add', this.addHandler);
     editorService.off('remove', this.removeHandler);
+    editorService.off('drag-to', this.updateHandler);
+    editorService.off('move-layer', this.updateHandler);
   }
 
   public updateOverlay() {
@@ -99,13 +103,6 @@ class StageOverlay extends BaseService {
         }
 
         const wrapDiv = this.get('wrapDiv');
-        const sourceEl = this.get('sourceEl');
-
-        wrapDiv.style.cssText = `
-            width: ${sourceEl?.scrollWidth}px;
-            height: ${sourceEl?.scrollHeight}px;
-            background-color: #fff;
-          `;
 
         await this.render();
 
@@ -141,12 +138,19 @@ class StageOverlay extends BaseService {
     this.createContentEl();
 
     const contentEl = this.get('contentEl');
+    const sourceEl = this.get('sourceEl');
     const wrapDiv = this.get('wrapDiv');
     const subStage = this.get('stage');
     const stageOptions = this.get('stageOptions');
 
     if (!contentEl) return;
 
+    wrapDiv.style.cssText = `
+      width: ${sourceEl?.scrollWidth}px;
+      height: ${sourceEl?.scrollHeight}px;
+      background-color: #fff;
+    `;
+
     Array.from(wrapDiv.children).forEach((element) => {
       element.remove();
     });
@@ -162,19 +166,37 @@ class StageOverlay extends BaseService {
   }
 
   private updateHandler = () => {
-    this.render();
-    this.updateOverlay();
+    setTimeout(() => {
+      this.render();
+      this.updateOverlay();
+
+      this.updateSelectStatus();
+    });
   };
 
   private addHandler = () => {
     this.render();
     this.updateOverlay();
+
+    this.updateSelectStatus();
   };
 
   private removeHandler = () => {
     this.render();
     this.updateOverlay();
+
+    this.updateSelectStatus();
   };
+
+  private updateSelectStatus() {
+    const subStage = this.get('stage');
+    const nodes = editorService.get('nodes');
+    if (nodes.length > 1) {
+      subStage?.multiSelect(nodes.map((n) => n.id));
+    } else {
+      subStage?.select(nodes[0].id);
+    }
+  }
 }
 
 export type StageOverlayService = StageOverlay;

package/types/services/stageOverlay.d.ts

@@ -16,6 +16,7 @@ declare class StageOverlay extends BaseService {
     private updateHandler;
     private addHandler;
     private removeHandler;
+    private updateSelectStatus;
 }
 export type StageOverlayService = StageOverlay;
 declare const _default: StageOverlay;