@tmagic/stage 1.0.0-beta.10 → 1.0.0-beta.13

package/dist/tmagic-stage.umd.js

@@ -170,21 +170,14 @@
   };
 
   class StageDragResize extends EventEmitter.EventEmitter {
-    core;
-    container;
-    target;
-    dragEl;
-    moveable;
-    horizontalGuidelines = [];
-    verticalGuidelines = [];
-    elementGuidelines = [];
-    moveableOptions = {};
-    dragStatus = "end" /* END */;
-    ghostEl;
-    mode = Mode.ABSOLUTE;
-    moveableHelper;
     constructor(config) {
       super();
+      this.horizontalGuidelines = [];
+      this.verticalGuidelines = [];
+      this.elementGuidelines = [];
+      this.moveableOptions = {};
+      this.dragStatus = "end" /* END */;
+      this.mode = Mode.ABSOLUTE;
       this.core = config.core;
       this.container = config.container;
       this.dragEl = globalThis.document.createElement("div");
@@ -416,6 +409,7 @@
       if (!this.target)
         return {};
       const isAbsolute = this.mode === Mode.ABSOLUTE;
+      const isFixed = this.mode === Mode.FIXED;
       let { moveableOptions = {} } = this.core.config;
       if (typeof moveableOptions === "function") {
         moveableOptions = moveableOptions(this.core);
@@ -427,8 +421,8 @@
         dragArea: false,
         draggable: true,
         resizable: true,
-        snappable: isAbsolute,
-        snapGap: isAbsolute,
+        snappable: isAbsolute || isFixed,
+        snapGap: isAbsolute || isFixed,
         snapThreshold: 5,
         snapDigit: 0,
         throttleDrag: 0,
@@ -520,10 +514,6 @@
   };
 
   class StageHighlight extends EventEmitter.EventEmitter {
-    core;
-    container;
-    target;
-    moveable;
     constructor(config) {
       super();
       this.core = config.core;
@@ -543,6 +533,7 @@
     clearHighlight() {
       if (!this.moveable)
         return;
+      this.target = void 0;
       this.moveable.target = null;
       this.moveable.updateTarget();
     }
@@ -552,14 +543,41 @@
   }
 
   class Rule extends EventEmitter__default["default"] {
-    hGuides;
-    vGuides;
-    horizontalGuidelines = [];
-    verticalGuidelines = [];
-    container;
-    containerResizeObserver;
     constructor(container) {
       super();
+      this.horizontalGuidelines = [];
+      this.verticalGuidelines = [];
+      this.getGuidesStyle = (type) => ({
+        position: "fixed",
+        zIndex: 1,
+        left: type === GuidesType.HORIZONTAL ? 0 : "-30px",
+        top: type === GuidesType.HORIZONTAL ? "-30px" : 0,
+        width: type === GuidesType.HORIZONTAL ? "100%" : "30px",
+        height: type === GuidesType.HORIZONTAL ? "30px" : "100%"
+      });
+      this.createGuides = (type, defaultGuides = []) => new Guides__default["default"](this.container, {
+        type,
+        defaultGuides,
+        displayDragPos: true,
+        backgroundColor: "#fff",
+        lineColor: "#000",
+        textColor: "#000",
+        style: this.getGuidesStyle(type)
+      });
+      this.hGuidesChangeGuidesHandler = (e) => {
+        this.horizontalGuidelines = e.guides;
+        this.emit("changeGuides", {
+          type: GuidesType.HORIZONTAL,
+          guides: this.horizontalGuidelines
+        });
+      };
+      this.vGuidesChangeGuidesHandler = (e) => {
+        this.verticalGuidelines = e.guides;
+        this.emit("changeGuides", {
+          type: GuidesType.VERTICAL,
+          guides: this.verticalGuidelines
+        });
+      };
       this.container = container;
       this.hGuides = this.createGuides(GuidesType.HORIZONTAL);
       this.vGuides = this.createGuides(GuidesType.VERTICAL);
@@ -628,41 +646,10 @@
       this.containerResizeObserver.disconnect();
       this.removeAllListeners();
     }
-    getGuidesStyle = (type) => ({
-      position: "fixed",
-      zIndex: 1,
-      left: type === GuidesType.HORIZONTAL ? 0 : "-30px",
-      top: type === GuidesType.HORIZONTAL ? "-30px" : 0,
-      width: type === GuidesType.HORIZONTAL ? "100%" : "30px",
-      height: type === GuidesType.HORIZONTAL ? "30px" : "100%"
-    });
-    createGuides = (type, defaultGuides = []) => new Guides__default["default"](this.container, {
-      type,
-      defaultGuides,
-      displayDragPos: true,
-      backgroundColor: "#fff",
-      lineColor: "#000",
-      textColor: "#000",
-      style: this.getGuidesStyle(type)
-    });
-    hGuidesChangeGuidesHandler = (e) => {
-      this.horizontalGuidelines = e.guides;
-      this.emit("changeGuides", {
-        type: GuidesType.HORIZONTAL,
-        guides: this.horizontalGuidelines
-      });
-    };
-    vGuidesChangeGuidesHandler = (e) => {
-      this.verticalGuidelines = e.guides;
-      this.emit("changeGuides", {
-        type: GuidesType.VERTICAL,
-        guides: this.verticalGuidelines
-      });
-    };
   }
 
   const wrapperClassName = "editor-mask-wrapper";
-  const throttleTime = 300;
+  const throttleTime = 100;
   const hideScrollbar = () => {
     const style = globalThis.document.createElement("style");
     style.innerHTML = `
@@ -696,32 +683,73 @@
     return el;
   };
   class StageMask extends Rule {
-    content = createContent();
-    wrapper;
-    core;
-    page = null;
-    pageScrollParent = null;
-    scrollTop = 0;
-    scrollLeft = 0;
-    width = 0;
-    height = 0;
-    wrapperHeight = 0;
-    wrapperWidth = 0;
-    mode = Mode.ABSOLUTE;
-    pageResizeObserver = null;
-    wrapperResizeObserver = null;
-    highlightHandler = lodashEs.throttle((event) => {
-      this.emit("highlight", event);
-    }, throttleTime);
     constructor(config) {
       const wrapper = createWrapper();
       super(wrapper);
+      this.content = createContent();
+      this.page = null;
+      this.pageScrollParent = null;
+      this.scrollTop = 0;
+      this.scrollLeft = 0;
+      this.width = 0;
+      this.height = 0;
+      this.wrapperHeight = 0;
+      this.wrapperWidth = 0;
+      this.maxScrollTop = 0;
+      this.maxScrollLeft = 0;
+      this.mode = Mode.ABSOLUTE;
+      this.pageResizeObserver = null;
+      this.wrapperResizeObserver = null;
+      this.highlightHandler = lodashEs.throttle((event) => {
+        this.emit("highlight", event);
+      }, throttleTime);
+      this.mouseDownHandler = (event) => {
+        this.emit("clearHighlight");
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
+          return;
+        if (event.target.className.indexOf("moveable-control") !== -1) {
+          return;
+        }
+        this.content.removeEventListener("mousemove", this.highlightHandler);
+        this.emit("beforeSelect", event);
+        globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
+      };
+      this.mouseUpHandler = () => {
+        globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
+        this.content.addEventListener("mousemove", this.highlightHandler);
+        this.emit("select");
+      };
+      this.mouseWheelHandler = (event) => {
+        this.emit("clearHighlight");
+        if (!this.page)
+          throw new Error("page \u672A\u521D\u59CB\u5316");
+        const { deltaY, deltaX } = event;
+        if (this.page.clientHeight < this.wrapperHeight && deltaY)
+          return;
+        if (this.page.clientWidth < this.wrapperWidth && deltaX)
+          return;
+        if (this.maxScrollTop > 0) {
+          this.scrollTop = this.scrollTop + deltaY;
+        }
+        if (this.maxScrollLeft > 0) {
+          this.scrollLeft = this.scrollLeft + deltaX;
+        }
+        this.fixScrollValue();
+        this.scroll();
+        this.emit("scroll", event);
+      };
+      this.mouseLeaveHandler = () => {
+        setTimeout(() => this.emit("clearHighlight"), throttleTime);
+      };
       this.wrapper = wrapper;
       this.core = config.core;
       this.content.addEventListener("mousedown", this.mouseDownHandler);
       this.wrapper.appendChild(this.content);
       this.content.addEventListener("wheel", this.mouseWheelHandler);
       this.content.addEventListener("mousemove", this.highlightHandler);
+      this.content.addEventListener("mouseleave", this.mouseLeaveHandler);
     }
     setMode(mode) {
       this.mode = mode;
@@ -746,6 +774,9 @@
           const { clientHeight, clientWidth } = entry.target;
           this.setHeight(clientHeight);
           this.setWidth(clientWidth);
+          this.fixScrollValue();
+          this.scroll();
+          this.core.dr.updateMoveable();
         });
         this.pageResizeObserver.observe(page);
         this.wrapperResizeObserver = new ResizeObserver((entries) => {
@@ -753,6 +784,8 @@
           const { clientHeight, clientWidth } = entry.target;
           this.wrapperHeight = clientHeight;
           this.wrapperWidth = clientWidth;
+          this.setMaxScrollLeft();
+          this.setMaxScrollTop();
         });
         this.wrapperResizeObserver.observe(this.wrapper);
       }
@@ -771,10 +804,17 @@
       this.pageScrollParent = null;
       this.pageResizeObserver?.disconnect();
       this.wrapperResizeObserver?.disconnect();
+      this.content.removeEventListener("mouseleave", this.mouseLeaveHandler);
       super.destroy();
     }
     scroll() {
       let { scrollLeft, scrollTop } = this;
+      if (this.pageScrollParent) {
+        this.pageScrollParent.scrollTo({
+          top: scrollTop,
+          left: scrollLeft
+        });
+      }
       if (this.mode === Mode.FIXED) {
         scrollLeft = 0;
         scrollTop = 0;
@@ -787,75 +827,75 @@
     }
     setHeight(height) {
       this.height = height;
+      this.setMaxScrollTop();
       this.content.style.height = `${height}px`;
     }
     setWidth(width) {
       this.width = width;
+      this.setMaxScrollLeft();
       this.content.style.width = `${width}px`;
     }
-    mouseDownHandler = (event) => {
-      this.emit("clearHighlight");
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
-        return;
-      if (event.target.className.indexOf("moveable-control") !== -1) {
-        return;
-      }
-      this.content.removeEventListener("mousemove", this.highlightHandler);
-      this.emit("beforeSelect", event);
-      globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
-    };
-    mouseUpHandler = () => {
-      globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
-      this.content.addEventListener("mousemove", this.highlightHandler);
-      this.emit("select");
-    };
-    mouseWheelHandler = (event) => {
-      this.emit("clearHighlight");
-      if (!this.page)
-        throw new Error("page \u672A\u521D\u59CB\u5316");
-      const { deltaY, deltaX } = event;
-      const { height, wrapperHeight, width, wrapperWidth } = this;
-      const maxScrollTop = height - wrapperHeight;
-      const maxScrollLeft = width - wrapperWidth;
-      if (maxScrollTop > 0) {
-        if (deltaY > 0) {
-          this.scrollTop = this.scrollTop + Math.min(maxScrollTop - this.scrollTop, deltaY);
-        } else {
-          this.scrollTop = Math.max(this.scrollTop + deltaY, 0);
-        }
-      }
-      if (width > wrapperWidth) {
-        if (deltaX > 0) {
-          this.scrollLeft = this.scrollLeft + Math.min(maxScrollLeft - this.scrollLeft, deltaX);
-        } else {
-          this.scrollLeft = Math.max(this.scrollLeft + deltaX, 0);
-        }
-      }
-      if (this.mode !== Mode.FIXED) {
-        this.scrollTo(this.scrollLeft, this.scrollTop);
-      }
-      if (this.pageScrollParent) {
-        this.pageScrollParent.scrollTo({
-          top: this.scrollTop,
-          left: this.scrollLeft
-        });
-      }
-      this.scroll();
-      this.emit("scroll", event);
-    };
+    setMaxScrollLeft() {
+      this.maxScrollLeft = this.width - this.wrapperWidth;
+    }
+    setMaxScrollTop() {
+      this.maxScrollTop = this.height - this.wrapperHeight;
+    }
+    fixScrollValue() {
+      if (this.scrollTop < 0)
+        this.scrollTop = 0;
+      if (this.scrollLeft < 0)
+        this.scrollLeft = 0;
+      if (this.maxScrollTop < this.scrollTop)
+        this.scrollTop = this.maxScrollTop;
+      if (this.maxScrollLeft < this.scrollLeft)
+        this.scrollLeft = this.maxScrollLeft;
+    }
   }
 
   class StageRender extends EventEmitter.EventEmitter {
-    contentWindow = null;
-    runtime = null;
-    iframe;
-    runtimeUrl;
-    core;
-    render;
     constructor({ core }) {
       super();
+      this.contentWindow = null;
+      this.runtime = null;
+      this.getMagicApi = () => ({
+        onPageElUpdate: (el) => this.emit("page-el-update", el),
+        onRuntimeReady: (runtime) => {
+          this.runtime = runtime;
+          globalThis.runtime = runtime;
+          this.emit("runtime-ready", runtime);
+        }
+      });
+      this.getRuntime = () => {
+        if (this.runtime)
+          return Promise.resolve(this.runtime);
+        return new Promise((resolve) => {
+          const listener = (runtime) => {
+            this.off("runtime-ready", listener);
+            resolve(runtime);
+          };
+          this.on("runtime-ready", listener);
+        });
+      };
+      this.loadHandler = async () => {
+        this.emit("onload");
+        if (this.render) {
+          const el = await this.render(this.core);
+          if (el) {
+            this.iframe?.contentDocument?.body?.appendChild(el);
+          }
+        }
+        if (this.contentWindow) {
+          const style = this.contentWindow.document.createElement("style");
+          style.id = "tmagic-stage-render";
+          style.innerHTML = `
+        .${SELECTED_CLASS}, .${SELECTED_CLASS}-parent {
+          z-index: ${ZIndex.SELECTED_EL};
+        }
+      `;
+          this.contentWindow.document.head.appendChild(style);
+        }
+      };
       this.core = core;
       this.runtimeUrl = core.config.runtimeUrl || "";
       this.render = core.config.render;
@@ -868,14 +908,6 @@
     `;
       this.iframe.addEventListener("load", this.loadHandler);
     }
-    getMagicApi = () => ({
-      onPageElUpdate: (el) => this.emit("page-el-update", el),
-      onRuntimeReady: (runtime) => {
-        this.runtime = runtime;
-        globalThis.runtime = runtime;
-        this.emit("runtime-ready", runtime);
-      }
-    });
     async mount(el) {
       if (this.iframe) {
         if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
@@ -892,17 +924,6 @@
         throw Error("mount \u5931\u8D25");
       }
     }
-    getRuntime = () => {
-      if (this.runtime)
-        return Promise.resolve(this.runtime);
-      return new Promise((resolve) => {
-        const listener = (runtime) => {
-          this.off("runtime-ready", listener);
-          resolve(runtime);
-        };
-        this.on("runtime-ready", listener);
-      });
-    };
     destroy() {
       this.iframe?.removeEventListener("load", this.loadHandler);
       this.contentWindow = null;
@@ -910,40 +931,12 @@
       this.iframe = void 0;
       this.removeAllListeners();
     }
-    loadHandler = async () => {
-      this.emit("onload");
-      if (this.render) {
-        const el = await this.render(this.core);
-        if (el) {
-          this.iframe?.contentDocument?.body?.appendChild(el);
-        }
-      }
-      if (this.contentWindow) {
-        const style = this.contentWindow.document.createElement("style");
-        style.id = "tmagic-stage-render";
-        style.innerHTML = `
-        .${SELECTED_CLASS}, .${SELECTED_CLASS}-parent {
-          z-index: ${ZIndex.SELECTED_EL};
-        }
-      `;
-        this.contentWindow.document.head.appendChild(style);
-      }
-    };
   }
 
   class StageCore extends EventEmitter.EventEmitter {
-    selectedDom;
-    highlightedDom;
-    renderer;
-    mask;
-    dr;
-    highlightLayer;
-    config;
-    zoom = DEFAULT_ZOOM;
-    container;
-    canSelect;
     constructor(config) {
       super();
+      this.zoom = DEFAULT_ZOOM;
       this.config = config;
       this.setZoom(config.zoom);
       this.canSelect = config.canSelect || ((el) => !!el.id);
@@ -1030,7 +1023,7 @@
     }
     update(data) {
       const { config } = data;
-      this.renderer?.getRuntime().then((runtime) => {
+      return this.renderer?.getRuntime().then((runtime) => {
         runtime?.update?.(data);
         setTimeout(() => {
           const el = this.renderer.contentWindow?.document.getElementById(`${config.id}`);
@@ -1056,13 +1049,13 @@
       this.highlightedDom = el;
     }
     sortNode(data) {
-      this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
+      return this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
     }
     add(data) {
-      this.renderer?.getRuntime().then((runtime) => runtime?.add?.(data));
+      return this.renderer?.getRuntime().then((runtime) => runtime?.add?.(data));
     }
     remove(data) {
-      this.renderer?.getRuntime().then((runtime) => runtime?.remove?.(data));
+      return this.renderer?.getRuntime().then((runtime) => runtime?.remove?.(data));
     }
     setZoom(zoom = DEFAULT_ZOOM) {
       this.zoom = zoom;
@@ -1103,8 +1096,7 @@
   exports.StageRender = StageRender;
   exports["default"] = StageCore;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-  exports[Symbol.toStringTag] = 'Module';
+  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 }));
 //# sourceMappingURL=tmagic-stage.umd.js.map