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

package/dist/tmagic-stage.es.js

@@ -163,21 +163,14 @@ const addSelectedClassName = (el) => {
 };
 
 class StageDragResize extends 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");
@@ -514,10 +507,6 @@ const up = (deltaTop, target) => {
 };
 
 class StageHighlight extends EventEmitter {
-  core;
-  container;
-  target;
-  moveable;
   constructor(config) {
     super();
     this.core = config.core;
@@ -547,14 +536,41 @@ class StageHighlight extends EventEmitter {
 }
 
 class Rule extends EventEmitter$1 {
-  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(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);
@@ -623,37 +639,6 @@ class Rule extends EventEmitter$1 {
     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(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";
@@ -691,28 +676,66 @@ const createWrapper = () => {
   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;
-  maxScrollTop = 0;
-  maxScrollLeft = 0;
-  mode = Mode.ABSOLUTE;
-  pageResizeObserver = null;
-  wrapperResizeObserver = null;
-  highlightHandler = 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 = 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);
@@ -821,53 +844,51 @@ class StageMask extends Rule {
     if (this.maxScrollLeft < this.scrollLeft)
       this.scrollLeft = this.maxScrollLeft;
   }
-  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;
-    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);
-  };
-  mouseLeaveHandler = () => {
-    setTimeout(() => this.emit("clearHighlight"), throttleTime);
-  };
 }
 
 class StageRender extends 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;
@@ -880,14 +901,6 @@ class StageRender extends EventEmitter {
     `;
     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) {
@@ -904,17 +917,6 @@ class StageRender extends EventEmitter {
       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;
@@ -922,40 +924,12 @@ class StageRender extends EventEmitter {
     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 {
-  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);