@tmagic/stage 1.0.0-beta.4 → 1.0.0-beta.7

package/dist/types/src/StageDragResize.d.ts

@@ -11,11 +11,11 @@ export default class StageDragResize extends EventEmitter {
     container: HTMLElement;
     target?: HTMLElement;
     moveable?: Moveable;
+    horizontalGuidelines: number[];
+    verticalGuidelines: number[];
     private dragStatus;
     private elObserver?;
     private ghostEl;
-    private horizontalGuidelines;
-    private verticalGuidelines;
     private mode;
     constructor(config: StageDragResizeConfig);
     /**

package/dist/types/src/StageMask.d.ts

@@ -72,6 +72,7 @@ export default class StageMask extends EventEmitter {
      */
     private mouseDownHandler;
     private mouseUpHandler;
+    private mouseMoveHandler;
     private contextmenuHandler;
     private select;
     private getGuidesStyle;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.7",
   "name": "@tmagic/stage",
   "sideEffects": false,
   "main": "dist/tmagic-stage.umd.js",
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/schema": "^1.0.0-beta.4",
-    "@tmagic/utils": "^1.0.0-beta.4",
+    "@tmagic/schema": "^1.0.0-beta.6",
+    "@tmagic/utils": "^1.0.0-beta.6",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
     "moveable": "^0.25.3"

package/src/StageCore.ts

@@ -52,9 +52,8 @@ export default class StageCore extends EventEmitter {
     this.renderer.on('runtime-ready', (runtime: Runtime) => this.emit('runtime-ready', runtime));
     this.renderer.on('page-el-update', (el: HTMLElement) => this.mask?.observe(el));
 
-    this.mask.on('select', async (el: Element, event: MouseEvent) => {
+    this.mask.on('select', async (el: Element) => {
       await this.dr?.select(el as HTMLElement);
-      setTimeout(() => this.dr?.moveable?.dragStart(event));
     });
     this.mask.on('selected', (el: Element) => {
       this.select(el as HTMLElement);

package/src/StageDragResize.ts

@@ -41,12 +41,12 @@ export default class StageDragResize extends EventEmitter {
   public container: HTMLElement;
   public target?: HTMLElement;
   public moveable?: Moveable;
+  public horizontalGuidelines: number[] = [];
+  public verticalGuidelines: number[] = [];
 
   private dragStatus: ActionStatus = ActionStatus.END;
   private elObserver?: ResizeObserver;
   private ghostEl: HTMLElement | undefined;
-  private horizontalGuidelines: number[] = [];
-  private verticalGuidelines: number[] = [];
   private mode: Mode = Mode.ABSOLUTE;
 
   constructor(config: StageDragResizeConfig) {
@@ -341,9 +341,6 @@ export default class StageDragResize extends EventEmitter {
       resizable: true,
       snappable: !isSortable,
       snapGap: !isSortable,
-      snapElement: !isSortable,
-      snapVertical: !isSortable,
-      snapHorizontal: !isSortable,
       snapCenter: !isSortable,
       container: renderer.contentWindow?.document.body,
 

package/src/StageMask.ts

@@ -91,8 +91,8 @@ export default class StageMask extends EventEmitter {
     const { config: coreConfig } = config.core;
 
     this.canSelect = coreConfig.canSelect || ((el: HTMLElement) => !!el.id);
-    this.content.addEventListener('mousedown', this.mouseDownHandler, true);
-    this.content.addEventListener('contextmenu', this.contextmenuHandler, true);
+    this.content.addEventListener('mousedown', this.mouseDownHandler);
+    this.content.addEventListener('contextmenu', this.contextmenuHandler);
     this.wrapper.appendChild(this.content);
 
     this.hGuides = this.createGuides('horizontal');
@@ -189,17 +189,26 @@ export default class StageMask extends EventEmitter {
    * @param show 是否显示
    */
   public showRule(show = true) {
-    this.hGuides.setState({
-      rulerStyle: {
-        visibility: show ? '' : 'hidden',
-      },
-    });
+    // 当尺子隐藏时发现大小变化，显示后会变形，所以这里做重新初始化处理
+    if (show) {
+      this.hGuides.destroy();
+      this.hGuides = this.createGuides('horizontal', this.core.dr.horizontalGuidelines);
+
+      this.vGuides.destroy();
+      this.vGuides = this.createGuides('vertical', this.core.dr.verticalGuidelines);
+    } else {
+      this.hGuides.setState({
+        rulerStyle: {
+          visibility: 'hidden',
+        },
+      });
 
-    this.vGuides.setState({
-      rulerStyle: {
-        visibility: show ? '' : 'hidden',
-      },
-    });
+      this.vGuides.setState({
+        rulerStyle: {
+          visibility: 'hidden',
+        },
+      });
+    }
   }
 
   /**
@@ -242,15 +251,26 @@ export default class StageMask extends EventEmitter {
       return;
     }
 
+    this.content.addEventListener('mousemove', this.mouseMoveHandler);
+
     this.select(event);
   };
 
   private mouseUpHandler = (): void => {
-    this.content?.removeEventListener('mouseup', this.mouseUpHandler, true);
+    this.content.removeEventListener('mousemove', this.mouseMoveHandler);
+    this.content.removeEventListener('mouseup', this.mouseUpHandler);
     this.emit('selected', this.target);
     this.target = null;
   };
 
+  private mouseMoveHandler = (event: MouseEvent): void => {
+    // 避免触摸板轻触移动拖动组件
+    if (event.buttons) {
+      this.core.dr.moveable?.dragStart(event);
+    }
+    this.content.removeEventListener('mousemove', this.mouseMoveHandler);
+  };
+
   private contextmenuHandler = async (event: MouseEvent): Promise<void> => {
     await this.select(event);
     this.mouseUpHandler();
@@ -282,7 +302,7 @@ export default class StageMask extends EventEmitter {
         this.emit('select', el, event);
         this.target = el;
         // 如果是右键点击，这里的mouseup事件监听没有效果
-        this.content?.addEventListener('mouseup', this.mouseUpHandler, true);
+        this.content.addEventListener('mouseup', this.mouseUpHandler);
         break;
       }
     }
@@ -296,9 +316,10 @@ export default class StageMask extends EventEmitter {
     height: type === 'horizontal' ? '30px' : '100%',
   });
 
-  private createGuides = (type: 'horizontal' | 'vertical'): Guides =>
+  private createGuides = (type: 'horizontal' | 'vertical', defaultGuides: number[] = []): Guides =>
     new Guides(this.wrapper, {
       type,
+      defaultGuides,
       displayDragPos: true,
       backgroundColor: '#fff',
       lineColor: '#000',