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

package/dist/tmagic-stage.umd.js

@@ -1,13 +1,14 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('events'), require('moveable'), require('@scena/guides')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'events', 'moveable', '@scena/guides'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.Moveable, global.Guides));
-})(this, (function (exports, EventEmitter, Moveable, Guides) { 'use strict';
+  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';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
   var Moveable__default = /*#__PURE__*/_interopDefaultLegacy(Moveable);
+  var MoveableHelper__default = /*#__PURE__*/_interopDefaultLegacy(MoveableHelper);
   var Guides__default = /*#__PURE__*/_interopDefaultLegacy(Guides);
 
   const GHOST_EL_ID_PREFIX = "ghost_el_";
@@ -19,6 +20,7 @@
   })(GuidesType || {});
   var ZIndex = /* @__PURE__ */ ((ZIndex2) => {
     ZIndex2["MASK"] = "99999";
+    ZIndex2["SELECTED_EL"] = "666";
     return ZIndex2;
   })(ZIndex || {});
   var MouseButton = /* @__PURE__ */ ((MouseButton2) => {
@@ -33,6 +35,7 @@
     Mode2["SORTABLE"] = "sortable";
     return Mode2;
   })(Mode || {});
+  const SELECTED_CLASS = "tmagic-stage-selected-area";
 
   const getOffset = (el) => {
     const { transform } = getComputedStyle(el);
@@ -153,6 +156,17 @@
     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.EventEmitter {
     core;
@@ -166,6 +180,7 @@
     dragStatus = "end" /* END */;
     ghostEl;
     mode = Mode.ABSOLUTE;
+    moveableHelper;
     constructor(config) {
       super();
       this.core = config.core;
@@ -183,6 +198,11 @@
       this.moveableOptions = await this.getOptions({
         target: this.dragEl || this.target
       });
+      this.moveableHelper = MoveableHelper__default["default"].create({
+        useBeforeRender: true,
+        useRender: false,
+        createAuto: true
+      });
       this.initMoveable();
       if (event) {
         this.moveable?.dragStart(event);
@@ -261,27 +281,32 @@
     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) {
@@ -384,17 +409,26 @@
         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: {
@@ -465,6 +499,36 @@
     };
   };
 
+  class StageHighlight extends EventEmitter.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__default["default"](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__default["default"] {
     hGuides;
     vGuides;
@@ -576,6 +640,7 @@
   }
 
   const wrapperClassName = "editor-mask-wrapper";
+  const throttleTime = 100;
   const hideScrollbar = () => {
     const style = globalThis.document.createElement("style");
     style.innerHTML = `
@@ -623,6 +688,9 @@
     mode = Mode.ABSOLUTE;
     pageResizeObserver = null;
     wrapperResizeObserver = null;
+    highlightHandler = lodashEs.throttle((event) => {
+      this.emit("highlight", event);
+    }, throttleTime);
     constructor(config) {
       const wrapper = createWrapper();
       super(wrapper);
@@ -631,6 +699,7 @@
       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;
@@ -702,7 +771,7 @@
       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)
@@ -712,9 +781,12 @@
       }
       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) => {
@@ -823,16 +895,29 @@
           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.EventEmitter {
     selectedDom;
+    highlightedDom;
     renderer;
     mask;
     dr;
+    highlightLayer;
     config;
     zoom = DEFAULT_ZOOM;
+    container;
     canSelect;
     constructor(config) {
       super();
@@ -842,6 +927,7 @@
       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) => {
@@ -851,6 +937,12 @@
       }).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));
@@ -877,30 +969,32 @@
         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;
@@ -915,6 +1009,13 @@
         }, 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));
     }
@@ -928,6 +1029,7 @@
       this.zoom = zoom;
     }
     mount(el) {
+      this.container = el;
       const { mask, renderer } = this;
       renderer.mount(el);
       mask.mount(el);
@@ -938,11 +1040,25 @@
       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;
     }
   }