@tmagic/stage 1.0.0-beta.5 → 1.0.0-beta.6

package/dist/tmagic-stage.es.js

@@ -93,11 +93,11 @@ class StageDragResize extends EventEmitter {
   container;
   target;
   moveable;
+  horizontalGuidelines = [];
+  verticalGuidelines = [];
   dragStatus = "end" /* END */;
   elObserver;
   ghostEl;
-  horizontalGuidelines = [];
-  verticalGuidelines = [];
   mode = Mode.ABSOLUTE;
   constructor(config) {
     super();
@@ -242,10 +242,9 @@ class StageDragResize extends EventEmitter {
     const { renderer } = this.core;
     const getSnapElements = (await renderer.getRuntime())?.getSnapElements || (() => {
       const doc = renderer.contentWindow?.document;
-      const elementGuidelines = (doc ? Array.from(doc.querySelectorAll("[id]")) : []).filter((element) => element !== this.target && !this.target?.contains(element));
-      return elementGuidelines;
+      return doc ? Array.from(doc.querySelectorAll("[id]")) : [];
     });
-    return getSnapElements(el);
+    return getSnapElements(el).filter((element) => element !== this.target && !this.target?.contains(element));
   }
   sort() {
     if (!this.target || !this.ghostEl)
@@ -325,11 +324,8 @@ class StageDragResize extends EventEmitter {
       resizable: true,
       snappable: !isSortable,
       snapGap: !isSortable,
-      snapElement: !isSortable,
-      snapVertical: !isSortable,
-      snapHorizontal: !isSortable,
-      snapCenter: !isSortable,
-      container: renderer.contentWindow?.document.body,
+      snapDirections: { center: !isSortable, middle: !isSortable },
+      elementSnapDirections: { center: !isSortable, middle: !isSortable },
       elementGuidelines: isSortable ? [] : await this.getSnapElements(this.target),
       horizontalGuidelines: this.horizontalGuidelines,
       verticalGuidelines: this.verticalGuidelines,
@@ -17683,8 +17679,8 @@ class StageMask extends EventEmitter {
     this.core = config.core;
     const { config: coreConfig } = config.core;
     this.canSelect = coreConfig.canSelect || ((el) => !!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");
     this.vGuides = this.createGuides("vertical");
@@ -17742,16 +17738,23 @@ class StageMask extends EventEmitter {
     });
   }
   showRule(show = true) {
-    this.hGuides.setState({
-      rulerStyle: {
-        visibility: show ? "" : "hidden"
-      }
-    });
-    this.vGuides.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: "hidden"
+        }
+      });
+    }
   }
   clearGuides() {
     this.vGuides.setState({
@@ -17773,13 +17776,21 @@ class StageMask extends EventEmitter {
     if (event.target.className.indexOf("moveable-control") !== -1) {
       return;
     }
+    this.content.addEventListener("mousemove", this.mouseMoveHandler);
     this.select(event);
   };
   mouseUpHandler = () => {
-    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;
   };
+  mouseMoveHandler = (event) => {
+    if (event.buttons) {
+      this.core.dr.moveable?.dragStart(event);
+    }
+    this.content.removeEventListener("mousemove", this.mouseMoveHandler);
+  };
   contextmenuHandler = async (event) => {
     await this.select(event);
     this.mouseUpHandler();
@@ -17805,7 +17816,7 @@ class StageMask extends EventEmitter {
           break;
         this.emit("select", el, event);
         this.target = el;
-        this.content?.addEventListener("mouseup", this.mouseUpHandler, true);
+        this.content.addEventListener("mouseup", this.mouseUpHandler);
         break;
       }
     }
@@ -17817,8 +17828,9 @@ class StageMask extends EventEmitter {
     width: type === "horizontal" ? "100%" : "30px",
     height: type === "horizontal" ? "30px" : "100%"
   });
-  createGuides = (type) => new Guides(this.wrapper, {
+  createGuides = (type, defaultGuides = []) => new Guides(this.wrapper, {
     type,
+    defaultGuides,
     displayDragPos: true,
     backgroundColor: "#fff",
     lineColor: "#000",
@@ -17915,9 +17927,8 @@ class StageCore extends EventEmitter {
     this.dr = new StageDragResize({ core: this, container: this.mask.content });
     this.renderer.on("runtime-ready", (runtime) => this.emit("runtime-ready", runtime));
     this.renderer.on("page-el-update", (el) => this.mask?.observe(el));
-    this.mask.on("select", async (el, event) => {
+    this.mask.on("select", async (el) => {
       await this.dr?.select(el);
-      setTimeout(() => this.dr?.moveable?.dragStart(event));
     });
     this.mask.on("selected", (el) => {
       this.select(el);