@tmagic/stage 1.5.13 → 1.5.15

package/dist/tmagic-stage.js

@@ -522,9 +522,13 @@ class DragResizeHelper {
         (frameItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(frameItem.id)
       );
       if (!frameSnapShot) return;
-      const targeEl = this.targetList.find(
-        (targetItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(targetItem) && getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem))
-      );
+      const findTargetElFuctin = (targetItem) => {
+        const getId = getIdFromEl();
+        const targetId = getId(ev.target);
+        const targetItemId = getId(targetItem);
+        return targetId?.startsWith(DRAG_EL_ID_PREFIX) && targetItemId && targetId?.endsWith(targetItemId);
+      };
+      const targeEl = this.targetList.find(findTargetElFuctin);
       if (!targeEl) return;
       const isParentIncluded = this.targetList.find(
         (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement)
@@ -1417,18 +1421,21 @@ class ActionManager extends EventEmitter {
   getRenderDocument;
   disabledMultiSelect = false;
   config;
-  mouseMoveHandler = throttle(async (event) => {
-    if (event.target?.classList?.contains("moveable-direction")) {
-      return;
-    }
-    const el = await this.getElementFromPoint(event);
-    const id = getIdFromEl()(el);
-    if (!id) {
-      this.clearHighlight();
-      return;
-    }
-    this.emit("mousemove", event);
-    this.highlight(id);
+  mouseMoveHandler = throttle((event) => {
+    const handler = async () => {
+      if (event.target?.classList?.contains("moveable-direction")) {
+        return;
+      }
+      const el = await this.getElementFromPoint(event);
+      const id = getIdFromEl()(el);
+      if (!id) {
+        this.clearHighlight();
+        return;
+      }
+      this.emit("mousemove", event);
+      this.highlight(id);
+    };
+    handler();
   }, throttleTime);
   constructor(config) {
     super();
@@ -1590,6 +1597,7 @@ class ActionManager extends EventEmitter {
       el = this.getTargetElement(id);
     } catch (error) {
       this.clearHighlight();
+      console.warn("getTargetElement error:", error);
       return;
     }
     if (el === this.getSelectedEl() || this.multiDr?.dragStatus === StageDragStatus.ING) {
@@ -1830,23 +1838,26 @@ class ActionManager extends EventEmitter {
   /**
    * 在down事件中集中cpu处理画布中选中操作渲染，在up事件中再通知外面的编辑器更新
    */
-  mouseDownHandler = async (event) => {
-    this.clearHighlight();
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-    if (this.isStopTriggerSelect(event)) return;
-    this.container.removeEventListener("mousemove", this.mouseMoveHandler);
-    if (this.isMultiSelectStatus) {
-      await this.beforeMultiSelect(event);
-      if (this.selectedElList.length > 0) {
-        this.emit("before-multi-select", this.selectedElList);
+  mouseDownHandler = (event) => {
+    const handler = async () => {
+      this.clearHighlight();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      if (this.isStopTriggerSelect(event)) return;
+      this.container.removeEventListener("mousemove", this.mouseMoveHandler);
+      if (this.isMultiSelectStatus) {
+        await this.beforeMultiSelect(event);
+        if (this.selectedElList.length > 0) {
+          this.emit("before-multi-select", this.selectedElList);
+        }
+      } else {
+        const el = await this.getElementFromPoint(event);
+        if (!el) return;
+        this.emit("before-select", el, event);
       }
-    } else {
-      const el = await this.getElementFromPoint(event);
-      if (!el) return;
-      this.emit("before-select", el, event);
-    }
-    getDocument().addEventListener("mouseup", this.mouseUpHandler);
+      getDocument().addEventListener("mouseup", this.mouseUpHandler);
+    };
+    handler();
   };
   isStopTriggerSelect(event) {
     if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT) return true;
@@ -2451,19 +2462,22 @@ class StageRender extends EventEmitter$1 {
       el && addSelectedClassName(el, doc);
     }
   }
-  iframeLoadHandler = async () => {
-    if (!this.contentWindow?.magic) {
-      this.postTmagicRuntimeReady();
-    }
-    if (!this.contentWindow) return;
-    if (this.customizedRender) {
-      const el = await this.customizedRender();
-      if (el) {
-        this.contentWindow.document?.body?.appendChild(el);
+  iframeLoadHandler = () => {
+    const handler = async () => {
+      if (!this.contentWindow?.magic) {
+        this.postTmagicRuntimeReady();
       }
-    }
-    this.emit("onload");
-    injectStyle(this.contentWindow.document, style);
+      if (!this.contentWindow) return;
+      if (this.customizedRender) {
+        const el = await this.customizedRender();
+        if (el) {
+          this.contentWindow.document?.body?.appendChild(el);
+        }
+      }
+      this.emit("onload");
+      injectStyle(this.contentWindow.document, style);
+    };
+    handler();
   };
 }
 

package/dist/tmagic-stage.umd.cjs

@@ -2995,9 +2995,13 @@
           (frameItem) => core.getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && core.getIdFromEl()(ev.target)?.endsWith(frameItem.id)
         );
         if (!frameSnapShot) return;
-        const targeEl = this.targetList.find(
-          (targetItem) => core.getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && core.getIdFromEl()(targetItem) && core.getIdFromEl()(ev.target)?.endsWith(core.getIdFromEl()(targetItem))
-        );
+        const findTargetElFuctin = (targetItem) => {
+          const getId = core.getIdFromEl();
+          const targetId = getId(ev.target);
+          const targetItemId = getId(targetItem);
+          return targetId?.startsWith(DRAG_EL_ID_PREFIX) && targetItemId && targetId?.endsWith(targetItemId);
+        };
+        const targeEl = this.targetList.find(findTargetElFuctin);
         if (!targeEl) return;
         const isParentIncluded = this.targetList.find(
           (targetItem) => core.getIdFromEl()(targetItem) === core.getIdFromEl()(targeEl.parentElement)
@@ -3890,18 +3894,21 @@
     getRenderDocument;
     disabledMultiSelect = false;
     config;
-    mouseMoveHandler = throttle(async (event) => {
-      if (event.target?.classList?.contains("moveable-direction")) {
-        return;
-      }
-      const el = await this.getElementFromPoint(event);
-      const id = core.getIdFromEl()(el);
-      if (!id) {
-        this.clearHighlight();
-        return;
-      }
-      this.emit("mousemove", event);
-      this.highlight(id);
+    mouseMoveHandler = throttle((event) => {
+      const handler = async () => {
+        if (event.target?.classList?.contains("moveable-direction")) {
+          return;
+        }
+        const el = await this.getElementFromPoint(event);
+        const id = core.getIdFromEl()(el);
+        if (!id) {
+          this.clearHighlight();
+          return;
+        }
+        this.emit("mousemove", event);
+        this.highlight(id);
+      };
+      handler();
     }, throttleTime);
     constructor(config) {
       super();
@@ -4063,6 +4070,7 @@
         el = this.getTargetElement(id);
       } catch (error) {
         this.clearHighlight();
+        console.warn("getTargetElement error:", error);
         return;
       }
       if (el === this.getSelectedEl() || this.multiDr?.dragStatus === StageDragStatus.ING) {
@@ -4303,23 +4311,26 @@
     /**
      * 在down事件中集中cpu处理画布中选中操作渲染，在up事件中再通知外面的编辑器更新
      */
-    mouseDownHandler = async (event) => {
-      this.clearHighlight();
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      if (this.isStopTriggerSelect(event)) return;
-      this.container.removeEventListener("mousemove", this.mouseMoveHandler);
-      if (this.isMultiSelectStatus) {
-        await this.beforeMultiSelect(event);
-        if (this.selectedElList.length > 0) {
-          this.emit("before-multi-select", this.selectedElList);
+    mouseDownHandler = (event) => {
+      const handler = async () => {
+        this.clearHighlight();
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        if (this.isStopTriggerSelect(event)) return;
+        this.container.removeEventListener("mousemove", this.mouseMoveHandler);
+        if (this.isMultiSelectStatus) {
+          await this.beforeMultiSelect(event);
+          if (this.selectedElList.length > 0) {
+            this.emit("before-multi-select", this.selectedElList);
+          }
+        } else {
+          const el = await this.getElementFromPoint(event);
+          if (!el) return;
+          this.emit("before-select", el, event);
         }
-      } else {
-        const el = await this.getElementFromPoint(event);
-        if (!el) return;
-        this.emit("before-select", el, event);
-      }
-      core.getDocument().addEventListener("mouseup", this.mouseUpHandler);
+        core.getDocument().addEventListener("mouseup", this.mouseUpHandler);
+      };
+      handler();
     };
     isStopTriggerSelect(event) {
       if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT) return true;
@@ -4924,19 +4935,22 @@
         el && addSelectedClassName(el, doc);
       }
     }
-    iframeLoadHandler = async () => {
-      if (!this.contentWindow?.magic) {
-        this.postTmagicRuntimeReady();
-      }
-      if (!this.contentWindow) return;
-      if (this.customizedRender) {
-        const el = await this.customizedRender();
-        if (el) {
-          this.contentWindow.document?.body?.appendChild(el);
+    iframeLoadHandler = () => {
+      const handler = async () => {
+        if (!this.contentWindow?.magic) {
+          this.postTmagicRuntimeReady();
         }
-      }
-      this.emit("onload");
-      core.injectStyle(this.contentWindow.document, style);
+        if (!this.contentWindow) return;
+        if (this.customizedRender) {
+          const el = await this.customizedRender();
+          if (el) {
+            this.contentWindow.document?.body?.appendChild(el);
+          }
+        }
+        this.emit("onload");
+        core.injectStyle(this.contentWindow.document, style);
+      };
+      handler();
     };
   }
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.13",
+  "version": "1.5.15",
   "name": "@tmagic/stage",
   "type": "module",
   "main": "dist/tmagic-stage.umd.cjs",
@@ -42,7 +42,7 @@
   },
   "peerDependencies": {
     "typescript": "*",
-    "@tmagic/core": "1.5.13"
+    "@tmagic/core": "1.5.15"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/ActionManager.ts

@@ -92,20 +92,24 @@ export default class ActionManager extends EventEmitter {
   private disabledMultiSelect = false;
   private config: ActionManagerConfig;
 
-  private mouseMoveHandler = throttle(async (event: MouseEvent): Promise<void> => {
-    if ((event.target as HTMLDivElement)?.classList?.contains('moveable-direction')) {
-      return;
-    }
+  private mouseMoveHandler = throttle((event: MouseEvent): void => {
+    const handler = async () => {
+      if ((event.target as HTMLDivElement)?.classList?.contains('moveable-direction')) {
+        return;
+      }
 
-    const el = await this.getElementFromPoint(event);
-    const id = getIdFromEl()(el);
-    if (!id) {
-      this.clearHighlight();
-      return;
-    }
+      const el = await this.getElementFromPoint(event);
+      const id = getIdFromEl()(el);
+      if (!id) {
+        this.clearHighlight();
+        return;
+      }
+
+      this.emit('mousemove', event);
+      this.highlight(id);
+    };
 
-    this.emit('mousemove', event);
-    this.highlight(id);
+    handler();
   }, throttleTime);
 
   constructor(config: ActionManagerConfig) {
@@ -299,6 +303,7 @@ export default class ActionManager extends EventEmitter {
       el = this.getTargetElement(id);
     } catch (error) {
       this.clearHighlight();
+      console.warn('getTargetElement error:', error);
       return;
     }
 
@@ -606,29 +611,33 @@ export default class ActionManager extends EventEmitter {
   /**
    * 在down事件中集中cpu处理画布中选中操作渲染，在up事件中再通知外面的编辑器更新
    */
-  private mouseDownHandler = async (event: MouseEvent): Promise<void> => {
-    this.clearHighlight();
-    event.stopImmediatePropagation();
-    event.stopPropagation();
+  private mouseDownHandler = (event: MouseEvent): void => {
+    const handler = async () => {
+      this.clearHighlight();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
 
-    if (this.isStopTriggerSelect(event)) return;
+      if (this.isStopTriggerSelect(event)) return;
 
-    // 点击状态下不触发高亮事件
-    this.container.removeEventListener('mousemove', this.mouseMoveHandler);
+      // 点击状态下不触发高亮事件
+      this.container.removeEventListener('mousemove', this.mouseMoveHandler);
 
-    // 判断触发多选还是单选
-    if (this.isMultiSelectStatus) {
-      await this.beforeMultiSelect(event);
-      if (this.selectedElList.length > 0) {
-        this.emit('before-multi-select', this.selectedElList);
+      // 判断触发多选还是单选
+      if (this.isMultiSelectStatus) {
+        await this.beforeMultiSelect(event);
+        if (this.selectedElList.length > 0) {
+          this.emit('before-multi-select', this.selectedElList);
+        }
+      } else {
+        const el = await this.getElementFromPoint(event);
+        if (!el) return;
+        this.emit('before-select', el, event);
       }
-    } else {
-      const el = await this.getElementFromPoint(event);
-      if (!el) return;
-      this.emit('before-select', el, event);
-    }
 
-    getDocument().addEventListener('mouseup', this.mouseUpHandler);
+      getDocument().addEventListener('mouseup', this.mouseUpHandler);
+    };
+
+    handler();
   };
 
   private isStopTriggerSelect(event: MouseEvent): boolean {

package/src/DragResizeHelper.ts

@@ -285,13 +285,18 @@ export default class DragResizeHelper {
           getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(frameItem.id),
       );
       if (!frameSnapShot) return;
-      const targeEl = this.targetList.find(
-        (targetItem) =>
-          getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
-          getIdFromEl()(targetItem) &&
-          getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem)!),
-      );
+
+      const findTargetElFuctin = (targetItem: HTMLElement) => {
+        const getId = getIdFromEl();
+        const targetId = getId(ev.target);
+        const targetItemId = getId(targetItem);
+        return targetId?.startsWith(DRAG_EL_ID_PREFIX) && targetItemId && targetId?.endsWith(targetItemId);
+      };
+
+      const targeEl = this.targetList.find(findTargetElFuctin);
+
       if (!targeEl) return;
+
       // 元素与其所属组同时加入多选列表时，只更新父元素
       const isParentIncluded = this.targetList.find(
         (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement),

package/src/StageDragResize.ts

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-/* eslint-disable no-param-reassign */
 import Moveable, { MoveableOptions } from 'moveable';
 
 import { getIdFromEl } from '@tmagic/core';

package/src/StageRender.ts

@@ -235,22 +235,26 @@ export default class StageRender extends EventEmitter {
     }
   }
 
-  private iframeLoadHandler = async () => {
-    if (!this.contentWindow?.magic) {
-      this.postTmagicRuntimeReady();
-    }
+  private iframeLoadHandler = () => {
+    const handler = async () => {
+      if (!this.contentWindow?.magic) {
+        this.postTmagicRuntimeReady();
+      }
 
-    if (!this.contentWindow) return;
+      if (!this.contentWindow) return;
 
-    if (this.customizedRender) {
-      const el = await this.customizedRender();
-      if (el) {
-        this.contentWindow.document?.body?.appendChild(el);
+      if (this.customizedRender) {
+        const el = await this.customizedRender();
+        if (el) {
+          this.contentWindow.document?.body?.appendChild(el);
+        }
       }
-    }
 
-    this.emit('onload');
+      this.emit('onload');
+
+      injectStyle(this.contentWindow.document, style);
+    };
 
-    injectStyle(this.contentWindow.document, style);
+    handler();
   };
 }