@tmagic/stage 1.3.16 → 1.4.0-beta.1

package/README.md

@@ -35,7 +35,7 @@ mask是一个盖在画布区域的一个蒙层，主要作用是隔离鼠标事
 ## ActionManager
 - 负责监听鼠标和键盘事件，基于这些事件，形成单选、多选、高亮行为。主要监听的是蒙层上的鼠标事件，通过StageRender.getElementsFromPoint计算获得鼠标下方的组件，实现事件监听和实际组件的解构。
 - 向上负责跟StageCore双向通信，提供接口供core调用，并向core抛出事件
-- 向下管理StageDragResize、StageMultiDragResize、StageHightlight这三个单选、多选、高亮类，让它们协同工作
+- 向下管理StageDragResize、StageMultiDragResize、StageHighlight这三个单选、多选、高亮类，让它们协同工作
 <br/><br/>
 ## StageDragResize
 负责单选相关逻辑，拖拽、改变大小、旋转等行为是依赖于开源库Moveable实现的，这些行为并不是直接作用于组件本身，而是在蒙层上创建了一个跟组件同等大小的边框div，实际拖拽的是边框div，在拖拽过程中同步更新组件。
@@ -47,7 +47,7 @@ mask是一个盖在画布区域的一个蒙层，主要作用是隔离鼠标事
 ## StageMultiDragResize
 功能跟StageDragResize类似，只是这个类是负责多选操作的，通过ctrl健选中多个组件，多选状态下不支持通过表单配置组件。
 <br/><br/>
-## StageHightlight
+## StageHighlight
 在鼠标经过画布中的组件、或者鼠标经过组件目录树中的组件时，会触发组件高亮，高亮也是通过moveable实现的，这个类主要负责初始化moveable并管理高亮状态。
 <br/><br/>
 ## MoveableOptionsManager

package/dist/tmagic-stage.js

@@ -302,7 +302,7 @@ class TargetShadow {
   }
   updateEl(target, src) {
     const el = src || globalThis.document.createElement("div");
-    el.id = `${this.idPrefix}${target.id}`;
+    el.id = `${this.idPrefix}_${target.id}`;
     el.style.cssText = getTargetElStyle(target, this.zIndex);
     if (typeof this.updateDragEl === "function") {
       this.updateDragEl(el, target, this.container);
@@ -478,6 +478,7 @@ class DragResizeHelper {
    */
   onResizeGroup(e) {
     const { events } = e;
+    this.moveableHelper.onResizeGroup(e);
     events.forEach((ev) => {
       const { width, height, beforeTranslate } = ev.drag;
       const frameSnapShot = this.framesSnapShot.find(
@@ -499,23 +500,23 @@ class DragResizeHelper {
       targeEl.style.width = `${width}px`;
       targeEl.style.height = `${height}px`;
     });
-    this.moveableHelper.onResizeGroup(e);
   }
   onDragGroupStart(e) {
-    const { events } = e;
     this.moveableHelper.onDragGroupStart(e);
+    const { events } = e;
     this.setFramesSnapShot(events);
   }
   onDragGroup(e) {
+    this.moveableHelper.onDragGroup(e);
     const { events } = e;
     events.forEach((ev) => {
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+        (frameItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(frameItem.id)
       );
       if (!frameSnapShot)
         return;
       const targeEl = this.targetList.find(
-        (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+        (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id)
       );
       if (!targeEl)
         return;
@@ -526,7 +527,6 @@ class DragResizeHelper {
         targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1] - marginTop}px`;
       }
     });
-    this.moveableHelper.onDragGroup(e);
   }
   getUpdatedElRect(el, parentEl, doc) {
     const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: el.offsetLeft, top: el.offsetTop };
@@ -561,7 +561,7 @@ class DragResizeHelper {
       return;
     events.forEach((ev) => {
       const matchEventTarget = this.targetList.find(
-        (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+        (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id)
       );
       if (!matchEventTarget)
         return;
@@ -622,7 +622,7 @@ const MoveableActionsAble = (handler) => ({
         left: 0px;
         top: 0px;
         will-change: transform;
-        transform-origin: 0px 0px;
+        transform-origin: 60px 28px;
         display: flex;
       }
       ${ableCss}
@@ -1305,6 +1305,10 @@ class StageMultiDragResize extends MoveableOptionsManager {
       this.dragResizeHelper.onDragGroup(e);
       this.dragStatus = StageDragStatus.ING;
     }).on("dragGroupEnd", () => {
+      if (timeout) {
+        globalThis.clearTimeout(timeout);
+        timeout = void 0;
+      }
       const parentEl = this.markContainerEnd();
       this.update(false, parentEl);
       this.dragStatus = StageDragStatus.END;

package/dist/tmagic-stage.umd.cjs

@@ -299,7 +299,7 @@
     }
     updateEl(target, src) {
       const el = src || globalThis.document.createElement("div");
-      el.id = `${this.idPrefix}${target.id}`;
+      el.id = `${this.idPrefix}_${target.id}`;
       el.style.cssText = getTargetElStyle(target, this.zIndex);
       if (typeof this.updateDragEl === "function") {
         this.updateDragEl(el, target, this.container);
@@ -475,6 +475,7 @@
      */
     onResizeGroup(e) {
       const { events } = e;
+      this.moveableHelper.onResizeGroup(e);
       events.forEach((ev) => {
         const { width, height, beforeTranslate } = ev.drag;
         const frameSnapShot = this.framesSnapShot.find(
@@ -496,23 +497,23 @@
         targeEl.style.width = `${width}px`;
         targeEl.style.height = `${height}px`;
       });
-      this.moveableHelper.onResizeGroup(e);
     }
     onDragGroupStart(e) {
-      const { events } = e;
       this.moveableHelper.onDragGroupStart(e);
+      const { events } = e;
       this.setFramesSnapShot(events);
     }
     onDragGroup(e) {
+      this.moveableHelper.onDragGroup(e);
       const { events } = e;
       events.forEach((ev) => {
         const frameSnapShot = this.framesSnapShot.find(
-          (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+          (frameItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(frameItem.id)
         );
         if (!frameSnapShot)
           return;
         const targeEl = this.targetList.find(
-          (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+          (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id)
         );
         if (!targeEl)
           return;
@@ -523,7 +524,6 @@
           targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1] - marginTop}px`;
         }
       });
-      this.moveableHelper.onDragGroup(e);
     }
     getUpdatedElRect(el, parentEl, doc) {
       const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: el.offsetLeft, top: el.offsetTop };
@@ -558,7 +558,7 @@
         return;
       events.forEach((ev) => {
         const matchEventTarget = this.targetList.find(
-          (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+          (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id)
         );
         if (!matchEventTarget)
           return;
@@ -619,7 +619,7 @@
         left: 0px;
         top: 0px;
         will-change: transform;
-        transform-origin: 0px 0px;
+        transform-origin: 60px 28px;
         display: flex;
       }
       ${ableCss}
@@ -1302,6 +1302,10 @@
         this.dragResizeHelper.onDragGroup(e);
         this.dragStatus = StageDragStatus.ING;
       }).on("dragGroupEnd", () => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = void 0;
+        }
         const parentEl = this.markContainerEnd();
         this.update(false, parentEl);
         this.dragStatus = StageDragStatus.END;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.16",
+  "version": "1.4.0-beta.1",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": [
@@ -26,9 +26,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.29.2",
-    "@tmagic/core": "1.3.16",
-    "@tmagic/schema": "1.3.16",
-    "@tmagic/utils": "1.3.16",
+    "@tmagic/core": "1.4.0-beta.1",
+    "@tmagic/schema": "1.4.0-beta.1",
+    "@tmagic/utils": "1.4.0-beta.1",
     "events": "^3.3.0",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
@@ -41,8 +41,8 @@
     "@types/node": "^18.19.0",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
-    "typescript": "^5.0.4",
-    "vite": "^5.0.7"
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6"
   },
   "scripts": {
     "build": "npm run build:type && vite build",

package/src/DragResizeHelper.ts

@@ -230,6 +230,9 @@ export default class DragResizeHelper {
    */
   public onResizeGroup(e: OnResizeGroup): void {
     const { events } = e;
+
+    this.moveableHelper.onResizeGroup(e);
+
     // 拖动过程更新
     events.forEach((ev) => {
       const { width, height, beforeTranslate } = ev.drag;
@@ -255,26 +258,28 @@ export default class DragResizeHelper {
       targeEl.style.width = `${width}px`;
       targeEl.style.height = `${height}px`;
     });
-    this.moveableHelper.onResizeGroup(e);
   }
 
   public onDragGroupStart(e: OnDragGroupStart): void {
-    const { events } = e;
     this.moveableHelper.onDragGroupStart(e);
+
+    const { events } = e;
     // 记录拖动前快照
     this.setFramesSnapShot(events);
   }
 
   public onDragGroup(e: OnDragGroup): void {
+    this.moveableHelper.onDragGroup(e);
+
     const { events } = e;
     // 拖动过程更新
     events.forEach((ev) => {
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+        (frameItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(frameItem.id),
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+        (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id),
       );
       if (!targeEl) return;
       // 元素与其所属组同时加入多选列表时，只更新父元素
@@ -286,7 +291,6 @@ export default class DragResizeHelper {
         targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1] - marginTop}px`;
       }
     });
-    this.moveableHelper.onDragGroup(e);
   }
 
   public getUpdatedElRect(el: HTMLElement, parentEl: HTMLElement | null, doc: Document): Rect {
@@ -342,7 +346,7 @@ export default class DragResizeHelper {
     events.forEach((ev) => {
       // 实际目标元素
       const matchEventTarget = this.targetList.find(
-        (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+        (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id),
       );
       if (!matchEventTarget) return;
       this.framesSnapShot.push({

package/src/MoveableActionsAble.ts

@@ -20,7 +20,7 @@ export default (handler: (type: AbleActionEventType) => void) => ({
         left: 0px;
         top: 0px;
         will-change: transform;
-        transform-origin: 0px 0px;
+        transform-origin: 60px 28px;
         display: flex;
       }
       ${ableCss}

package/src/StageMultiDragResize.ts

@@ -120,6 +120,10 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
         this.dragStatus = StageDragStatus.ING;
       })
       .on('dragGroupEnd', () => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = undefined;
+        }
         const parentEl = this.markContainerEnd();
         this.update(false, parentEl);
         this.dragStatus = StageDragStatus.END;

package/src/TargetShadow.ts

@@ -93,7 +93,7 @@ export default class TargetShadow {
   private updateEl(target: ShadowElement, src?: ShadowElement): ShadowElement {
     const el = src || globalThis.document.createElement('div');
 
-    el.id = `${this.idPrefix}${target.id}`;
+    el.id = `${this.idPrefix}_${target.id}`;
 
     el.style.cssText = getTargetElStyle(target, this.zIndex);