@tmagic/stage 1.0.3 → 1.1.0-beta.0

package/dist/tmagic-stage.es.js

@@ -1,12 +1,14 @@
 import EventEmitter$1, { EventEmitter } from 'events';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
+import { removeClassName, addClassName, removeClassNameByClassName, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/utils';
 import { throttle } from 'lodash-es';
 import Guides from '@scena/guides';
 
 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";
@@ -70,13 +72,6 @@ const getAbsolutePosition = (el, { top, left }) => {
   }
   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";
@@ -120,19 +115,14 @@ const getScrollParent = (element, includeHidden = false) => {
   }
   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`);
+    removeClassName(oldEl, SELECTED_CLASS);
+    if (oldEl.parentNode)
+      removeClassName(oldEl.parentNode, `${SELECTED_CLASS}-parent`);
     doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
-      item.classList.remove(`${SELECTED_CLASS}-parents`);
+      removeClassName(item, `${SELECTED_CLASS}-parents`);
     });
   }
 };
@@ -143,6 +133,14 @@ const addSelectedClassName = (el, doc) => {
     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 {
   constructor(config) {
@@ -231,19 +229,22 @@ class StageDragResize extends EventEmitter {
     });
     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();
@@ -296,6 +297,9 @@ class StageDragResize extends EventEmitter {
       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");
@@ -309,6 +313,19 @@ class StageDragResize extends EventEmitter {
     }).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)) {
+            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`;
@@ -318,13 +335,25 @@ class StageDragResize extends EventEmitter {
       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 = 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 */;
@@ -398,16 +427,27 @@ class StageDragResize extends EventEmitter {
       });
     }
   }
-  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 }
     });
   }
@@ -508,15 +548,6 @@ class StageDragResize extends EventEmitter {
       ...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;
@@ -780,11 +811,7 @@ class Rule extends EventEmitter$1 {
 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);
+  injectStyle(globalThis.document, `.${wrapperClassName}::-webkit-scrollbar { width: 0 !important; display: none }`);
 };
 const createContent = () => createDiv({
   className: "editor-mask",
@@ -1009,6 +1036,8 @@ class StageMask extends Rule {
   }
 }
 
+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 {
   constructor({ core }) {
     super();
@@ -1046,6 +1075,7 @@ class StageRender extends EventEmitter {
       this.contentWindow.postMessage({
         tmagicRuntimeReady: true
       }, "*");
+      injectStyle(this.contentWindow.document, style);
     };
     this.core = core;
     this.runtimeUrl = core.config.runtimeUrl || "";
@@ -1089,6 +1119,9 @@ class StageCore extends EventEmitter {
     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 });
@@ -1123,7 +1156,7 @@ class StageCore extends EventEmitter {
       setTimeout(() => this.emit("sort", data));
     });
   }
-  async setElementFromPoint(event) {
+  getElementsFromPoint(event) {
     const { renderer, zoom } = this;
     const doc = renderer.contentWindow?.document;
     let x = event.clientX;
@@ -1135,7 +1168,10 @@ class StageCore extends EventEmitter {
         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) {
@@ -1243,5 +1279,5 @@ class StageCore extends EventEmitter {
   }
 }
 
-export { DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, SELECTED_CLASS, StageDragResize, StageMask, StageRender, ZIndex, StageCore as default };
+export { CONTAINER_HIGHLIGHT_CLASS, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, SELECTED_CLASS, StageDragResize, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, getAbsolutePosition, getMode, getOffset, getScrollParent, isAbsolute, isFixed, isFixedParent, isRelative, isStatic, removeSelectedClassName };
 //# sourceMappingURL=tmagic-stage.es.js.map