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

package/dist/tmagic-stage.umd.js

@@ -100,11 +100,11 @@
     container;
     target;
     moveable;
+    horizontalGuidelines = [];
+    verticalGuidelines = [];
     dragStatus = "end" /* END */;
     elObserver;
     ghostEl;
-    horizontalGuidelines = [];
-    verticalGuidelines = [];
     mode = Mode.ABSOLUTE;
     constructor(config) {
       super();
@@ -249,10 +249,9 @@
       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)
@@ -332,11 +331,8 @@
         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,
@@ -17690,8 +17686,8 @@
       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");
@@ -17749,16 +17745,23 @@
       });
     }
     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({
@@ -17780,13 +17783,21 @@
       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();
@@ -17812,7 +17823,7 @@
             break;
           this.emit("select", el, event);
           this.target = el;
-          this.content?.addEventListener("mouseup", this.mouseUpHandler, true);
+          this.content.addEventListener("mouseup", this.mouseUpHandler);
           break;
         }
       }
@@ -17824,8 +17835,9 @@
       width: type === "horizontal" ? "100%" : "30px",
       height: type === "horizontal" ? "30px" : "100%"
     });
-    createGuides = (type) => new Guides__default["default"](this.wrapper, {
+    createGuides = (type, defaultGuides = []) => new Guides__default["default"](this.wrapper, {
       type,
+      defaultGuides,
       displayDragPos: true,
       backgroundColor: "#fff",
       lineColor: "#000",
@@ -17922,9 +17934,8 @@
       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);