npm - @tmagic/stage - Versions diffs - 1.3.5 → 1.3.6 - Mend

@tmagic/stage 1.3.5 → 1.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/tmagic-stage.js +65 -30
package/dist/tmagic-stage.js.map +1 -1
package/dist/tmagic-stage.umd.cjs +65 -29
package/dist/tmagic-stage.umd.cjs.map +1 -1
package/package.json +7 -7
package/src/ActionManager.ts +3 -3
package/src/StageCore.ts +5 -4
package/src/StageRender.ts +69 -28
package/src/TargetShadow.ts +1 -1
package/src/types.ts +8 -1
package/types/StageRender.d.ts +7 -3
package/types/types.d.ts +7 -1

package/dist/tmagic-stage.umd.cjs CHANGED Viewed

@@ -279,7 +279,7 @@
       el.id = `${this.idPrefix}${target.id}`;
       el.style.cssText = getTargetElStyle(target, this.zIndex);
       if (typeof this.updateDragEl === "function") {
-        this.updateDragEl(el, target);
+        this.updateDragEl(el, target, this.container);
       }
       const isFixed = isFixedParent(target);
       const mode = this.container.dataset.mode || Mode.ABSOLUTE;
@@ -584,6 +584,11 @@
     ContainerHighlightType2["ALT"] = "alt";
     return ContainerHighlightType2;
   })(ContainerHighlightType || {});
+  var RenderType = /* @__PURE__ */ ((RenderType2) => {
+    RenderType2["IFRAME"] = "iframe";
+    RenderType2["NATIVE"] = "native";
+    return RenderType2;
+  })(RenderType || {});
   var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
     SelectStatus2["SELECT"] = "select";
     SelectStatus2["MULTI_SELECT"] = "multiSelect";
@@ -1788,13 +1793,13 @@
     /**
      * 在up事件中负责对外通知选中事件，通知画布之外的编辑器更新
      */
-    mouseUpHandler = () => {
+    mouseUpHandler = (event) => {
       utils.getDocument().removeEventListener("mouseup", this.mouseUpHandler);
       this.container.addEventListener("mousemove", this.mouseMoveHandler);
       if (this.isMultiSelectStatus) {
-        this.emit("multi-select", this.selectedElList);
+        this.emit("multi-select", this.selectedElList, event);
       } else {
-        this.emit("select", this.selectedEl);
+        this.emit("select", this.selectedEl, event);
       }
     };
     mouseLeaveHandler = (event) => {
@@ -2203,22 +2208,22 @@
     contentWindow = null;
     runtime = null;
     iframe;
+    nativeContainer;
     runtimeUrl;
     zoom = DEFAULT_ZOOM;
+    renderType;
     customizedRender;
-    constructor({ runtimeUrl, zoom, customizedRender }) {
+    constructor({ runtimeUrl, zoom, customizedRender, renderType = RenderType.IFRAME }) {
       super();
+      this.renderType = renderType;
       this.runtimeUrl = runtimeUrl || "";
       this.customizedRender = customizedRender;
       this.setZoom(zoom);
-      this.iframe = globalThis.document.createElement("iframe");
-      this.iframe.src = utils.isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
-      this.iframe.style.cssText = `
-      border: 0;
-      width: 100%;
-      height: 100%;
-    `;
-      this.iframe.addEventListener("load", this.loadHandler);
+      if (this.renderType === RenderType.IFRAME) {
+        this.createIframe();
+      } else if (this.renderType === RenderType.NATIVE) {
+        this.createNativeContainer();
+      }
     }
     getMagicApi = () => ({
       onPageElUpdate: (el) => this.emit("page-el-update", el),
@@ -2258,18 +2263,19 @@
      * @param el 将页面挂载到该Dom节点上
      */
     async mount(el) {
-      if (!this.iframe) {
-        throw Error("mount 失败");
-      }
-      if (!utils.isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
-        let html = await fetch(this.runtimeUrl).then((res) => res.text());
-        const base = `${location.protocol}//${utils.getHost(this.runtimeUrl)}`;
-        html = html.replace("<head>", `<head>
+      if (this.iframe) {
+        if (!utils.isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
+          let html = await fetch(this.runtimeUrl).then((res) => res.text());
+          const base = `${location.protocol}//${utils.getHost(this.runtimeUrl)}`;
+          html = html.replace("<head>", `<head>
 <base href="${base}">`);
-        this.iframe.srcdoc = html;
+          this.iframe.srcdoc = html;
+        }
+        el.appendChild(this.iframe);
+        this.postTmagicRuntimeReady();
+      } else if (this.nativeContainer) {
+        el.appendChild(this.nativeContainer);
       }
-      el.appendChild(this.iframe);
-      this.postTmagicRuntimeReady();
     }
     getRuntime = () => {
       if (this.runtime)
@@ -2299,6 +2305,12 @@
           x = x - rect.left;
           y = y - rect.top;
         }
+      } else if (this.nativeContainer) {
+        const rect = this.nativeContainer.getClientRects()[0];
+        if (rect) {
+          x = x - rect.left;
+          y = y - rect.top;
+        }
       }
       return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom);
     }
@@ -2315,12 +2327,34 @@
      * 销毁实例
      */
     destroy() {
-      this.iframe?.removeEventListener("load", this.loadHandler);
+      this.iframe?.removeEventListener("load", this.iframeLoadHandler);
       this.contentWindow = null;
       this.iframe?.remove();
       this.iframe = void 0;
       this.removeAllListeners();
     }
+    createIframe() {
+      this.iframe = globalThis.document.createElement("iframe");
+      this.iframe.src = this.runtimeUrl && utils.isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
+      this.iframe.style.cssText = `
+      border: 0;
+      width: 100%;
+      height: 100%;
+    `;
+      this.iframe.addEventListener("load", this.iframeLoadHandler);
+      return this.iframe;
+    }
+    async createNativeContainer() {
+      this.contentWindow = globalThis;
+      this.nativeContainer = globalThis.document.createElement("div");
+      this.contentWindow.magic = this.getMagicApi();
+      if (this.customizedRender) {
+        const el = await this.customizedRender();
+        if (el) {
+          this.nativeContainer.appendChild(el);
+        }
+      }
+    }
     /**
      * 在runtime中对被选中的元素进行标记，部分组件有对选中态进行特殊显示的需求
      * @param el 被选中的元素
@@ -2332,7 +2366,7 @@
         addSelectedClassName(el, doc);
       }
     }
-    loadHandler = async () => {
+    iframeLoadHandler = async () => {
       if (!this.contentWindow?.magic) {
         this.postTmagicRuntimeReady();
       }
@@ -2374,6 +2408,7 @@
       this.renderer = new StageRender({
         runtimeUrl: config.runtimeUrl,
         zoom: config.zoom,
+        renderType: config.renderType,
         customizedRender: async () => {
           if (this?.customizedRender) {
             return await this.customizedRender(this);
@@ -2575,12 +2610,12 @@
     initActionManagerEvent() {
       this.actionManager.on("before-select", (idOrEl, event) => {
         this.select(idOrEl, event);
-      }).on("select", (selectedEl) => {
-        this.emit("select", selectedEl);
+      }).on("select", (selectedEl, event) => {
+        this.emit("select", selectedEl, event);
       }).on("before-multi-select", (idOrElList) => {
         this.multiSelect(idOrElList);
-      }).on("multi-select", (selectedElList) => {
-        this.emit("multi-select", selectedElList);
+      }).on("multi-select", (selectedElList, event) => {
+        this.emit("multi-select", selectedElList, event);
       });
     }
     /**
@@ -2641,6 +2676,7 @@
   exports.Mode = Mode;
   exports.MouseButton = MouseButton;
   exports.PAGE_CLASS = PAGE_CLASS;
+  exports.RenderType = RenderType;
   exports.SELECTED_CLASS = SELECTED_CLASS;
   exports.SelectStatus = SelectStatus;
   exports.StageDragResize = StageDragResize;