@tmagic/stage 1.0.3 → 1.1.0-beta.0

package/dist/tmagic-stage.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('events'), require('moveable'), require('moveable-helper'), require('lodash-es'), require('@scena/guides')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'events', 'moveable', 'moveable-helper', 'lodash-es', '@scena/guides'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.Moveable, global.MoveableHelper, global.lodashEs, global.Guides));
-})(this, (function (exports, EventEmitter, Moveable, MoveableHelper, lodashEs, Guides) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('events'), require('moveable'), require('moveable-helper'), require('@tmagic/utils'), require('lodash-es'), require('@scena/guides')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'events', 'moveable', 'moveable-helper', '@tmagic/utils', 'lodash-es', '@scena/guides'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.Moveable, global.MoveableHelper, global.utils, global.lodashEs, global.Guides));
+})(this, (function (exports, EventEmitter, Moveable, MoveableHelper, utils, lodashEs, Guides) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,6 +14,7 @@
   const GHOST_EL_ID_PREFIX = "ghost_el_";
   const DRAG_EL_ID_PREFIX = "drag_el_";
   const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
+  const CONTAINER_HIGHLIGHT_CLASS = "tmagic-stage-container-highlight";
   const DEFAULT_ZOOM = 1;
   var GuidesType = /* @__PURE__ */ ((GuidesType2) => {
     GuidesType2["HORIZONTAL"] = "horizontal";
@@ -77,13 +78,6 @@
     }
     return { left, top };
   };
-  const getHost = (targetUrl) => targetUrl.match(/\/\/([^/]+)/)?.[1];
-  const isSameDomain = (targetUrl = "", source = globalThis.location.host) => {
-    const isHttpUrl = /^(http[s]?:)?\/\//.test(targetUrl);
-    if (!isHttpUrl)
-      return true;
-    return getHost(targetUrl) === source;
-  };
   const isAbsolute = (style) => style.position === "absolute";
   const isRelative = (style) => style.position === "relative";
   const isStatic = (style) => style.position === "static";
@@ -127,19 +121,14 @@
     }
     return null;
   };
-  const createDiv = ({ className, cssText }) => {
-    const el = globalThis.document.createElement("div");
-    el.className = className;
-    el.style.cssText = cssText;
-    return el;
-  };
   const removeSelectedClassName = (doc) => {
     const oldEl = doc.querySelector(`.${SELECTED_CLASS}`);
     if (oldEl) {
-      oldEl.classList.remove(SELECTED_CLASS);
-      oldEl.parentNode?.classList.remove(`${SELECTED_CLASS}-parent`);
+      utils.removeClassName(oldEl, SELECTED_CLASS);
+      if (oldEl.parentNode)
+        utils.removeClassName(oldEl.parentNode, `${SELECTED_CLASS}-parent`);
       doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
-        item.classList.remove(`${SELECTED_CLASS}-parents`);
+        utils.removeClassName(item, `${SELECTED_CLASS}-parents`);
       });
     }
   };
@@ -150,6 +139,14 @@
       item.classList.add(`${SELECTED_CLASS}-parents`);
     });
   };
+  const calcValueByFontsize = (doc, value) => {
+    const { fontSize } = doc.documentElement.style;
+    if (fontSize) {
+      const times = globalThis.parseFloat(fontSize) / 100;
+      return Number((value / times).toFixed(2));
+    }
+    return value;
+  };
 
   class StageDragResize extends EventEmitter.EventEmitter {
     constructor(config) {
@@ -238,19 +235,22 @@
       });
       this.elementGuidelines = [];
       if (this.mode === Mode.ABSOLUTE) {
-        const frame = document.createDocumentFragment();
-        for (const node of nodes) {
-          const { width, height } = node.getBoundingClientRect();
-          if (node === this.target)
-            continue;
-          const { left, top } = getOffset(node);
-          const elementGuideline = document.createElement("div");
-          elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
-          this.elementGuidelines.push(elementGuideline);
-          frame.append(elementGuideline);
-        }
-        this.container.append(frame);
+        this.container.append(this.createGuidelineElements(nodes));
+      }
+    }
+    createGuidelineElements(nodes) {
+      const frame = globalThis.document.createDocumentFragment();
+      for (const node of nodes) {
+        const { width, height } = node.getBoundingClientRect();
+        if (node === this.target)
+          continue;
+        const { left, top } = getOffset(node);
+        const elementGuideline = globalThis.document.createElement("div");
+        elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
+        this.elementGuidelines.push(elementGuideline);
+        frame.append(elementGuideline);
       }
+      return frame;
     }
     initMoveable() {
       this.moveable?.destroy();
@@ -303,6 +303,9 @@
         left: 0,
         top: 0
       };
+      let timeout;
+      const { contentWindow } = this.core.renderer;
+      const doc = contentWindow?.document;
       this.moveable.on("dragStart", (e) => {
         if (!this.target)
           throw new Error("\u672A\u9009\u4E2D\u7EC4\u4EF6");
@@ -316,6 +319,19 @@
       }).on("drag", (e) => {
         if (!this.target || !this.dragEl)
           return;
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = void 0;
+        }
+        timeout = globalThis.setTimeout(async () => {
+          const els = this.core.getElementsFromPoint(e.inputEvent);
+          for (const el of els) {
+            if (doc && !el.id.startsWith(GHOST_EL_ID_PREFIX) && el !== this.target && await this.core.isContainer(el)) {
+              utils.addClassName(el, doc, this.core.containerHighlightClassName);
+              break;
+            }
+          }
+        }, this.core.containerHighlightDuration);
         this.dragStatus = "ing" /* ING */;
         if (this.ghostEl) {
           this.ghostEl.style.top = `${frame.top + e.beforeTranslate[1]}px`;
@@ -325,13 +341,25 @@
         this.target.style.left = `${frame.left + e.beforeTranslate[0]}px`;
         this.target.style.top = `${frame.top + e.beforeTranslate[1]}px`;
       }).on("dragEnd", () => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = void 0;
+        }
+        let parentEl = null;
+        if (doc) {
+          parentEl = utils.removeClassNameByClassName(doc, this.core.containerHighlightClassName);
+        }
         if (this.dragStatus === "ing" /* ING */) {
-          switch (this.mode) {
-            case Mode.SORTABLE:
-              this.sort();
-              break;
-            default:
-              this.update();
+          if (parentEl) {
+            this.update(false, parentEl);
+          } else {
+            switch (this.mode) {
+              case Mode.SORTABLE:
+                this.sort();
+                break;
+              default:
+                this.update();
+            }
           }
         }
         this.dragStatus = "end" /* END */;
@@ -405,16 +433,27 @@
         });
       }
     }
-    update(isResize = false) {
+    update(isResize = false, parentEl = null) {
       if (!this.target)
         return;
+      const { contentWindow } = this.core.renderer;
+      const doc = contentWindow?.document;
+      if (!doc)
+        return;
       const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: this.target.offsetLeft, top: this.target.offsetTop };
-      const left = this.calcValueByFontsize(offset.left);
-      const top = this.calcValueByFontsize(offset.top);
-      const width = this.calcValueByFontsize(this.target.clientWidth);
-      const height = this.calcValueByFontsize(this.target.clientHeight);
+      let left = calcValueByFontsize(doc, offset.left);
+      let top = calcValueByFontsize(doc, offset.top);
+      const width = calcValueByFontsize(doc, this.target.clientWidth);
+      const height = calcValueByFontsize(doc, this.target.clientHeight);
+      if (parentEl && this.mode === Mode.ABSOLUTE && this.dragEl) {
+        const [translateX, translateY] = this.moveableHelper?.getFrame(this.dragEl).properties.transform.translate.value;
+        const { left: parentLeft, top: parentTop } = getOffset(parentEl);
+        left = calcValueByFontsize(doc, this.dragEl.offsetLeft) + parseFloat(translateX) - calcValueByFontsize(doc, parentLeft);
+        top = calcValueByFontsize(doc, this.dragEl.offsetTop) + parseFloat(translateY) - calcValueByFontsize(doc, parentTop);
+      }
       this.emit("update", {
         el: this.target,
+        parentEl,
         style: isResize ? { left, top, width, height } : { left, top }
       });
     }
@@ -515,15 +554,6 @@
         ...moveableOptions
       };
     }
-    calcValueByFontsize(value) {
-      const { contentWindow } = this.core.renderer;
-      const fontSize = contentWindow?.document.documentElement.style.fontSize;
-      if (fontSize) {
-        const times = globalThis.parseFloat(fontSize) / 100;
-        return (value / times).toFixed(2);
-      }
-      return value;
-    }
   }
   const down = (deltaTop, target) => {
     let swapIndex = 0;
@@ -787,13 +817,9 @@
   const wrapperClassName = "editor-mask-wrapper";
   const throttleTime = 100;
   const hideScrollbar = () => {
-    const style = globalThis.document.createElement("style");
-    style.innerHTML = `
-    .${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }
-  `;
-    globalThis.document.head.appendChild(style);
+    utils.injectStyle(globalThis.document, `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
   };
-  const createContent = () => createDiv({
+  const createContent = () => utils.createDiv({
     className: "editor-mask",
     cssText: `
     position: absolute;
@@ -803,7 +829,7 @@
   `
   });
   const createWrapper = () => {
-    const el = createDiv({
+    const el = utils.createDiv({
       className: wrapperClassName,
       cssText: `
       position: absolute;
@@ -1016,6 +1042,8 @@
     }
   }
 
+  var style = ".tmagic-stage-container-highlight::after {\n  content: '';\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background-color: #000;\n  opacity: .1;\n}\n";
+
   class StageRender extends EventEmitter.EventEmitter {
     constructor({ core }) {
       super();
@@ -1053,12 +1081,13 @@
         this.contentWindow.postMessage({
           tmagicRuntimeReady: true
         }, "*");
+        utils.injectStyle(this.contentWindow.document, style);
       };
       this.core = core;
       this.runtimeUrl = core.config.runtimeUrl || "";
       this.render = core.config.render;
       this.iframe = globalThis.document.createElement("iframe");
-      this.iframe.src = isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
+      this.iframe.src = utils.isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
       this.iframe.style.cssText = `
       border: 0;
       width: 100%;
@@ -1068,9 +1097,9 @@
     }
     async mount(el) {
       if (this.iframe) {
-        if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
+        if (!utils.isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
           let html = await fetch(this.runtimeUrl).then((res) => res.text());
-          const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
+          const base = `${location.protocol}//${utils.getHost(this.runtimeUrl)}`;
           html = html.replace("<head>", `<head>
 <base href="${base}">`);
           this.iframe.srcdoc = html;
@@ -1096,6 +1125,9 @@
       this.config = config;
       this.setZoom(config.zoom);
       this.canSelect = config.canSelect || ((el) => !!el.id);
+      this.isContainer = config.isContainer;
+      this.containerHighlightClassName = config.containerHighlightClassName;
+      this.containerHighlightDuration = config.containerHighlightDuration;
       this.renderer = new StageRender({ core: this });
       this.mask = new StageMask({ core: this });
       this.dr = new StageDragResize({ core: this, container: this.mask.content });
@@ -1130,7 +1162,7 @@
         setTimeout(() => this.emit("sort", data));
       });
     }
-    async setElementFromPoint(event) {
+    getElementsFromPoint(event) {
       const { renderer, zoom } = this;
       const doc = renderer.contentWindow?.document;
       let x = event.clientX;
@@ -1142,7 +1174,10 @@
           y = y - rect.top;
         }
       }
-      const els = doc?.elementsFromPoint(x / zoom, y / zoom);
+      return doc?.elementsFromPoint(x / zoom, y / zoom);
+    }
+    async setElementFromPoint(event) {
+      const els = this.getElementsFromPoint(event);
       let stopped = false;
       const stop = () => stopped = true;
       for (const el of els) {
@@ -1250,6 +1285,7 @@
     }
   }
 
+  exports.CONTAINER_HIGHLIGHT_CLASS = CONTAINER_HIGHLIGHT_CLASS;
   exports.DEFAULT_ZOOM = DEFAULT_ZOOM;
   exports.DRAG_EL_ID_PREFIX = DRAG_EL_ID_PREFIX;
   exports.GHOST_EL_ID_PREFIX = GHOST_EL_ID_PREFIX;
@@ -1262,7 +1298,19 @@
   exports.StageMask = StageMask;
   exports.StageRender = StageRender;
   exports.ZIndex = ZIndex;
+  exports.addSelectedClassName = addSelectedClassName;
+  exports.calcValueByFontsize = calcValueByFontsize;
   exports["default"] = StageCore;
+  exports.getAbsolutePosition = getAbsolutePosition;
+  exports.getMode = getMode;
+  exports.getOffset = getOffset;
+  exports.getScrollParent = getScrollParent;
+  exports.isAbsolute = isAbsolute;
+  exports.isFixed = isFixed;
+  exports.isFixedParent = isFixedParent;
+  exports.isRelative = isRelative;
+  exports.isStatic = isStatic;
+  exports.removeSelectedClassName = removeSelectedClassName;
 
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });