@tmagic/stage 1.0.0-beta.8 → 1.0.0-beta.9

package/dist/tmagic-stage.es.js

@@ -1,5 +1,7 @@
 import EventEmitter$1, { EventEmitter } from 'events';
 import Moveable from 'moveable';
+import MoveableHelper from 'moveable-helper';
+import { throttle } from 'lodash-es';
 import Guides from '@scena/guides';
 
 const GHOST_EL_ID_PREFIX = "ghost_el_";
@@ -11,6 +13,7 @@ var GuidesType = /* @__PURE__ */ ((GuidesType2) => {
 })(GuidesType || {});
 var ZIndex = /* @__PURE__ */ ((ZIndex2) => {
   ZIndex2["MASK"] = "99999";
+  ZIndex2["SELECTED_EL"] = "666";
   return ZIndex2;
 })(ZIndex || {});
 var MouseButton = /* @__PURE__ */ ((MouseButton2) => {
@@ -25,6 +28,7 @@ var Mode = /* @__PURE__ */ ((Mode2) => {
   Mode2["SORTABLE"] = "sortable";
   return Mode2;
 })(Mode || {});
+const SELECTED_CLASS = "tmagic-stage-selected-area";
 
 const getOffset = (el) => {
   const { transform } = getComputedStyle(el);
@@ -145,6 +149,17 @@ const createDiv = ({ className, cssText }) => {
   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`);
+  }
+};
+const addSelectedClassName = (el) => {
+  el.classList.add(SELECTED_CLASS);
+  el.parentNode?.classList.add(`${SELECTED_CLASS}-parent`);
+};
 
 class StageDragResize extends EventEmitter {
   core;
@@ -158,6 +173,7 @@ class StageDragResize extends EventEmitter {
   dragStatus = "end" /* END */;
   ghostEl;
   mode = Mode.ABSOLUTE;
+  moveableHelper;
   constructor(config) {
     super();
     this.core = config.core;
@@ -175,6 +191,11 @@ class StageDragResize extends EventEmitter {
     this.moveableOptions = await this.getOptions({
       target: this.dragEl || this.target
     });
+    this.moveableHelper = MoveableHelper.create({
+      useBeforeRender: true,
+      useRender: false,
+      createAuto: true
+    });
     this.initMoveable();
     if (event) {
       this.moveable?.dragStart(event);
@@ -253,27 +274,32 @@ class StageDragResize extends EventEmitter {
   bindDragEvent() {
     if (!this.moveable)
       throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
-    this.moveable.on("dragStart", () => {
+    let offset = {
+      left: 0,
+      top: 0
+    };
+    this.moveable.on("dragStart", (e) => {
       if (!this.target)
         throw new Error("\u672A\u9009\u4E2D\u7EC4\u4EF6");
       this.dragStatus = "start" /* START */;
+      this.moveableHelper?.onDragStart(e);
+      offset = getAbsolutePosition(this.target, { left: 0, top: 0 });
       if (this.mode === Mode.SORTABLE) {
         this.ghostEl = this.generateGhostEl(this.target);
       }
-    }).on("drag", ({ left, top }) => {
+    }).on("drag", (e) => {
       if (!this.target || !this.dragEl)
         return;
       this.dragStatus = "ing" /* ING */;
-      const offset = getAbsolutePosition(this.target, { left, top });
+      const { left, top } = e;
       if (this.ghostEl) {
         this.dragEl.style.top = `${top}px`;
-        this.ghostEl.style.top = `${offset.top}px`;
+        this.ghostEl.style.top = `${top + offset.top}px`;
         return;
       }
-      this.dragEl.style.left = `${left}px`;
-      this.dragEl.style.top = `${top}px`;
-      this.target.style.left = `${offset.left}px`;
-      this.target.style.top = `${offset.top}px`;
+      this.moveableHelper?.onDrag(e);
+      this.target.style.left = `${left + offset.left}px`;
+      this.target.style.top = `${top + offset.top}px`;
     }).on("dragEnd", () => {
       if (this.dragStatus === "ing" /* ING */) {
         switch (this.mode) {
@@ -376,17 +402,26 @@ class StageDragResize extends EventEmitter {
       moveableOptions = moveableOptions(this.core);
     }
     return {
-      scrollable: true,
       origin: true,
+      rootContainer: this.core.container,
       zoom: 1,
-      dragArea: true,
+      dragArea: false,
       draggable: true,
       resizable: true,
       snappable: isAbsolute,
       snapGap: isAbsolute,
-      snapDirections: { center: isAbsolute, middle: isAbsolute },
-      elementSnapDirections: { center: isAbsolute, middle: isAbsolute },
-      elementGuidelines: isAbsolute ? await this.getSnapElements(this.target) : [],
+      snapThreshold: 5,
+      snapDigit: 0,
+      throttleDrag: 0,
+      isDisplaySnapDigit: isAbsolute,
+      snapDirections: {
+        top: isAbsolute,
+        right: isAbsolute,
+        bottom: isAbsolute,
+        left: isAbsolute,
+        center: isAbsolute,
+        middle: isAbsolute
+      },
       horizontalGuidelines: this.horizontalGuidelines,
       verticalGuidelines: this.verticalGuidelines,
       bounds: {
@@ -457,6 +492,36 @@ const up = (deltaTop, target) => {
   };
 };
 
+class StageHighlight extends EventEmitter {
+  core;
+  container;
+  target;
+  moveable;
+  constructor(config) {
+    super();
+    this.core = config.core;
+    this.container = config.container;
+  }
+  highlight(el) {
+    if (!el || el === this.target)
+      return;
+    this.target = el;
+    this.moveable?.destroy();
+    this.moveable = new Moveable(this.container, {
+      target: this.target
+    });
+  }
+  clearHighlight() {
+    if (!this.moveable)
+      return;
+    this.moveable.target = null;
+    this.moveable.updateTarget();
+  }
+  destroy() {
+    this.moveable?.destroy();
+  }
+}
+
 class Rule extends EventEmitter$1 {
   hGuides;
   vGuides;
@@ -568,6 +633,7 @@ class Rule extends EventEmitter$1 {
 }
 
 const wrapperClassName = "editor-mask-wrapper";
+const throttleTime = 100;
 const hideScrollbar = () => {
   const style = globalThis.document.createElement("style");
   style.innerHTML = `
@@ -615,6 +681,9 @@ class StageMask extends Rule {
   mode = Mode.ABSOLUTE;
   pageResizeObserver = null;
   wrapperResizeObserver = null;
+  highlightHandler = throttle((event) => {
+    this.emit("highlight", event);
+  }, throttleTime);
   constructor(config) {
     const wrapper = createWrapper();
     super(wrapper);
@@ -623,6 +692,7 @@ class StageMask extends Rule {
     this.content.addEventListener("mousedown", this.mouseDownHandler);
     this.wrapper.appendChild(this.content);
     this.content.addEventListener("wheel", this.mouseWheelHandler);
+    this.content.addEventListener("mousemove", this.highlightHandler);
   }
   setMode(mode) {
     this.mode = mode;
@@ -694,7 +764,7 @@ class StageMask extends Rule {
     this.width = width;
     this.content.style.width = `${width}px`;
   }
-  mouseDownHandler = async (event) => {
+  mouseDownHandler = (event) => {
     event.stopImmediatePropagation();
     event.stopPropagation();
     if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
@@ -704,9 +774,12 @@ class StageMask extends Rule {
     }
     this.emit("beforeSelect", event);
     globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
+    this.content.removeEventListener("mousemove", this.highlightHandler);
+    this.emit("clearHighlight");
   };
   mouseUpHandler = () => {
     globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
+    this.content.addEventListener("mousemove", this.highlightHandler);
     this.emit("select");
   };
   mouseWheelHandler = (event) => {
@@ -815,16 +888,29 @@ class StageRender extends EventEmitter {
         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();
@@ -834,6 +920,7 @@ class StageCore extends EventEmitter {
     this.renderer = new StageRender({ core: this });
     this.mask = new StageMask({ core: this });
     this.dr = new StageDragResize({ core: this, container: this.mask.content });
+    this.highlightLayer = new StageHighlight({ core: this, container: this.mask.content });
     this.renderer.on("runtime-ready", (runtime) => this.emit("runtime-ready", runtime));
     this.renderer.on("page-el-update", (el) => this.mask?.observe(el));
     this.mask.on("beforeSelect", (event) => {
@@ -843,6 +930,12 @@ class StageCore extends EventEmitter {
     }).on("changeGuides", (data) => {
       this.dr.setGuidelines(data.type, data.guides);
       this.emit("changeGuides", data);
+    }).on("highlight", async (event) => {
+      await this.setElementFromPoint(event);
+      this.highlightLayer.highlight(this.highlightedDom);
+      this.emit("highlight", this.highlightedDom);
+    }).on("clearHighlight", async () => {
+      this.highlightLayer.clearHighlight();
     });
     this.dr.on("update", (data) => {
       setTimeout(() => this.emit("update", data));
@@ -869,30 +962,32 @@ class StageCore extends EventEmitter {
       if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.canSelect(el, stop)) {
         if (stopped)
           break;
+        if (event.type === "mousemove") {
+          this.highlight(el);
+          break;
+        }
         this.select(el, event);
         break;
       }
     }
   }
   async select(idOrEl, event) {
-    let el;
-    if (typeof idOrEl === "string" || typeof idOrEl === "number") {
-      const runtime2 = await this.renderer?.getRuntime();
-      el = await runtime2?.select?.(`${idOrEl}`);
-      if (!el)
-        throw new Error(`\u4E0D\u5B58\u5728ID\u4E3A${idOrEl}\u7684\u5143\u7D20`);
-    } else {
-      el = idOrEl;
-    }
+    const el = await this.getTargetElement(idOrEl);
     if (el === this.selectedDom)
       return;
-    const runtime = await this.renderer?.getRuntime();
+    const runtime = await this.renderer.getRuntime();
     if (runtime?.beforeSelect) {
       await runtime.beforeSelect(el);
     }
     this.mask.setLayout(el);
     this.dr?.select(el, event);
     this.selectedDom = el;
+    if (this.renderer.contentWindow) {
+      removeSelectedClassName(this.renderer.contentWindow.document);
+      if (this.selectedDom) {
+        addSelectedClassName(this.selectedDom);
+      }
+    }
   }
   update(data) {
     const { config } = data;
@@ -907,6 +1002,13 @@ class StageCore extends EventEmitter {
       }, 0);
     });
   }
+  async highlight(idOrEl) {
+    const el = await this.getTargetElement(idOrEl);
+    if (el === this.highlightedDom)
+      return;
+    this.highlightLayer.highlight(el);
+    this.highlightedDom = el;
+  }
   sortNode(data) {
     this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
   }
@@ -920,6 +1022,7 @@ class StageCore extends EventEmitter {
     this.zoom = zoom;
   }
   mount(el) {
+    this.container = el;
     const { mask, renderer } = this;
     renderer.mount(el);
     mask.mount(el);
@@ -930,11 +1033,25 @@ class StageCore extends EventEmitter {
     this.dr.clearGuides();
   }
   destroy() {
-    const { mask, renderer, dr } = this;
+    const { mask, renderer, dr, highlightLayer } = this;
     renderer.destroy();
     mask.destroy();
     dr.destroy();
+    highlightLayer.destroy();
     this.removeAllListeners();
+    this.container = void 0;
+  }
+  async getTargetElement(idOrEl) {
+    let el;
+    if (typeof idOrEl === "string" || typeof idOrEl === "number") {
+      const runtime = await this.renderer?.getRuntime();
+      el = await runtime?.select?.(`${idOrEl}`);
+      if (!el)
+        throw new Error(`\u4E0D\u5B58\u5728ID\u4E3A${idOrEl}\u7684\u5143\u7D20`);
+    } else {
+      el = idOrEl;
+    }
+    return el;
   }
 }