@tmagic/stage 1.3.0-alpha.19 → 1.3.0-alpha.20

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.19",
+  "version": "1.3.0-alpha.20",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": [
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.29.2",
-    "@tmagic/core": "1.3.0-alpha.19",
-    "@tmagic/schema": "1.3.0-alpha.19",
-    "@tmagic/utils": "1.3.0-alpha.19",
+    "@tmagic/core": "1.3.0-alpha.20",
+    "@tmagic/schema": "1.3.0-alpha.20",
+    "@tmagic/utils": "1.3.0-alpha.20",
     "events": "^3.3.0",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",

package/src/StageDragResize.ts

@@ -95,14 +95,14 @@ export default class StageDragResize extends MoveableOptionsManager {
     Object.entries(options).forEach(([key, value]) => {
       (this.moveable as any)[key] = value;
     });
-    this.moveable.updateTarget();
+    this.moveable.updateRect();
   }
 
   public clearSelectStatus(): void {
     if (!this.moveable) return;
     this.dragResizeHelper.destroyShadowEl();
     this.moveable.target = null;
-    this.moveable.updateTarget();
+    this.moveable.updateRect();
   }
 
   /**

package/src/StageHighlight.ts

@@ -28,7 +28,7 @@ export default class StageHighlight extends EventEmitter {
   public container: HTMLElement;
   public target?: HTMLElement;
   public moveable?: Moveable;
-  public targetShadow: TargetShadow;
+  public targetShadow?: TargetShadow;
   private getRootContainer: GetRootContainer;
 
   constructor(config: StageHighlightConfig) {
@@ -52,14 +52,19 @@ export default class StageHighlight extends EventEmitter {
   public highlight(el: HTMLElement): void {
     if (!el || el === this.target) return;
     this.target = el;
-    this.moveable?.destroy();
 
-    this.moveable = new Moveable(this.container, {
-      target: this.targetShadow.update(el),
-      origin: false,
-      rootContainer: this.getRootContainer(),
-      zoom: 2,
-    });
+    this.targetShadow?.update(el);
+    if (this.moveable) {
+      this.moveable.zoom = 2;
+      this.moveable.updateRect();
+    } else {
+      this.moveable = new Moveable(this.container, {
+        target: this.targetShadow?.el,
+        origin: false,
+        rootContainer: this.getRootContainer(),
+        zoom: 2,
+      });
+    }
   }
 
   /**
@@ -67,9 +72,9 @@ export default class StageHighlight extends EventEmitter {
    */
   public clearHighlight(): void {
     if (!this.moveable || !this.target) return;
+    this.moveable.zoom = 0;
+    this.moveable.updateRect();
     this.target = undefined;
-    this.moveable.target = null;
-    this.moveable.updateTarget();
   }
 
   /**
@@ -77,6 +82,8 @@ export default class StageHighlight extends EventEmitter {
    */
   public destroy(): void {
     this.moveable?.destroy();
-    this.targetShadow.destroy();
+    this.targetShadow?.destroy();
+    this.moveable = undefined;
+    this.targetShadow = undefined;
   }
 }

package/src/StageMultiDragResize.ts

@@ -170,8 +170,6 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
       target: this.dragResizeHelper.getShadowEls(),
     });
 
-    console.log(options);
-
     Object.entries(options).forEach(([key, value]) => {
       (this.moveableForMulti as any)[key] = value;
     });

package/types/StageHighlight.d.ts

@@ -7,7 +7,7 @@ export default class StageHighlight extends EventEmitter {
     container: HTMLElement;
     target?: HTMLElement;
     moveable?: Moveable;
-    targetShadow: TargetShadow;
+    targetShadow?: TargetShadow;
     private getRootContainer;
     constructor(config: StageHighlightConfig);
     /**