@tmagic/stage 1.0.0-beta.8 → 1.0.0-rc.10

package/dist/tmagic-stage.umd.js

@@ -1,16 +1,19 @@
 (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_";
+  const DRAG_EL_ID_PREFIX = "drag_el_";
+  const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
   const DEFAULT_ZOOM = 1;
   var GuidesType = /* @__PURE__ */ ((GuidesType2) => {
     GuidesType2["HORIZONTAL"] = "horizontal";
@@ -19,6 +22,9 @@
   })(GuidesType || {});
   var ZIndex = /* @__PURE__ */ ((ZIndex2) => {
     ZIndex2["MASK"] = "99999";
+    ZIndex2["SELECTED_EL"] = "666";
+    ZIndex2["GHOST_EL"] = "700";
+    ZIndex2["DRAG_EL"] = "9";
     return ZIndex2;
   })(ZIndex || {});
   var MouseButton = /* @__PURE__ */ ((MouseButton2) => {
@@ -33,31 +39,23 @@
     Mode2["SORTABLE"] = "sortable";
     return Mode2;
   })(Mode || {});
+  const SELECTED_CLASS = "tmagic-stage-selected-area";
+  const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
+  const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
 
+  const getParents = (el, relative) => {
+    let cur = el.parentElement;
+    const parents = [];
+    while (cur && cur !== relative) {
+      parents.push(cur);
+      cur = cur.parentElement;
+    }
+    return parents;
+  };
   const getOffset = (el) => {
-    const { transform } = getComputedStyle(el);
     const { offsetParent } = el;
-    let left = el.offsetLeft;
-    let top = el.offsetTop;
-    if (transform.indexOf("matrix") > -1) {
-      let a = 1;
-      let b = 1;
-      let c = 1;
-      let d = 1;
-      let e = 0;
-      let f = 0;
-      transform.replace(/matrix\((.+), (.+), (.+), (.+), (.+), (.+)\)/, ($0, $1, $2, $3, $4, $5, $6) => {
-        a = +$1;
-        b = +$2;
-        c = +$3;
-        d = +$4;
-        e = +$5;
-        f = +$6;
-        return transform;
-      });
-      left = a * left + c * top + e;
-      top = b * left + d * top + f;
-    }
+    const left = el.offsetLeft;
+    const top = el.offsetTop;
     if (offsetParent) {
       const parentOffset = getOffset(offsetParent);
       return {
@@ -153,46 +151,81 @@
     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`);
+      doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
+        item.classList.remove(`${SELECTED_CLASS}-parents`);
+      });
+    }
+  };
+  const addSelectedClassName = (el, doc) => {
+    el.classList.add(SELECTED_CLASS);
+    el.parentNode?.classList.add(`${SELECTED_CLASS}-parent`);
+    getParents(el, doc.body).forEach((item) => {
+      item.classList.add(`${SELECTED_CLASS}-parents`);
+    });
+  };
+  const getGuideLineFromCache = (type) => {
+    const key = {
+      [GuidesType.HORIZONTAL]: H_GUIDE_LINE_STORAGE_KEY,
+      [GuidesType.VERTICAL]: V_GUIDE_LINE_STORAGE_KEY
+    }[type];
+    if (!key)
+      return [];
+    const guideLineCacheData = globalThis.localStorage.getItem(key);
+    if (guideLineCacheData) {
+      try {
+        return JSON.parse(guideLineCacheData) || [];
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    return [];
+  };
 
   class StageDragResize extends EventEmitter.EventEmitter {
-    core;
-    container;
-    target;
-    dragEl;
-    moveable;
-    horizontalGuidelines = [];
-    verticalGuidelines = [];
-    moveableOptions = {};
-    dragStatus = "end" /* END */;
-    ghostEl;
-    mode = Mode.ABSOLUTE;
     constructor(config) {
       super();
+      this.horizontalGuidelines = getGuideLineFromCache(GuidesType.HORIZONTAL);
+      this.verticalGuidelines = getGuideLineFromCache(GuidesType.VERTICAL);
+      this.elementGuidelines = [];
+      this.mode = Mode.ABSOLUTE;
+      this.moveableOptions = {};
+      this.dragStatus = "end" /* END */;
       this.core = config.core;
       this.container = config.container;
+      this.dragEl = globalThis.document.createElement("div");
+      this.container.append(this.dragEl);
     }
-    async select(el, event) {
+    select(el, event) {
+      const oldTarget = this.target;
       this.target = el;
-      if (/(auto|scroll)/.test(this.target.style.overflow)) {
-        this.target.style.overflow = "hidden";
+      if (!this.moveable || this.target !== oldTarget) {
+        this.init(el);
+        this.moveableHelper = MoveableHelper__default["default"].create({
+          useBeforeRender: true,
+          useRender: false,
+          createAuto: true
+        });
+        this.initMoveable();
+      } else {
+        this.updateMoveable();
       }
-      this.mode = getMode(el);
-      this.destroyDragEl();
-      this.destroyGhostEl();
-      this.dragEl = this.generateDragEl(el);
-      this.moveableOptions = await this.getOptions({
-        target: this.dragEl || this.target
-      });
-      this.initMoveable();
       if (event) {
         this.moveable?.dragStart(event);
       }
     }
-    async refresh() {
+    updateMoveable(el = this.target) {
       if (!this.moveable)
         throw new Error("\u672A\u521D\u59CB\u5316moveable");
-      const options = await this.getOptions();
-      Object.entries(options).forEach(([key, value]) => {
+      if (!el)
+        throw new Error("\u4E3A\u9009\u4E2D\u4EFB\u4F55\u8282\u70B9");
+      this.target = el;
+      this.init(el);
+      Object.entries(this.moveableOptions).forEach(([key, value]) => {
         this.moveable[key] = value;
       });
       this.moveable.updateTarget();
@@ -200,15 +233,19 @@
     setGuidelines(type, guidelines) {
       if (type === GuidesType.HORIZONTAL) {
         this.horizontalGuidelines = guidelines;
+        this.moveableOptions.horizontalGuidelines = guidelines;
       } else if (type === GuidesType.VERTICAL) {
         this.verticalGuidelines = guidelines;
+        this.moveableOptions.verticalGuidelines = guidelines;
       }
-      this.refresh();
+      this.updateMoveable();
     }
     clearGuides() {
-      this.verticalGuidelines = [];
       this.horizontalGuidelines = [];
-      this.refresh();
+      this.verticalGuidelines = [];
+      this.moveableOptions.horizontalGuidelines = [];
+      this.moveableOptions.verticalGuidelines = [];
+      this.updateMoveable();
     }
     destroy() {
       this.moveable?.destroy();
@@ -217,6 +254,37 @@
       this.dragStatus = "end" /* END */;
       this.removeAllListeners();
     }
+    init(el) {
+      if (/(auto|scroll)/.test(el.style.overflow)) {
+        el.style.overflow = "hidden";
+      }
+      this.mode = getMode(el);
+      this.destroyGhostEl();
+      this.updateDragEl(el);
+      this.moveableOptions = this.getOptions({
+        target: this.dragEl
+      });
+    }
+    setElementGuidelines(nodes) {
+      this.elementGuidelines.forEach((node) => {
+        node.remove();
+      });
+      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);
+      }
+    }
     initMoveable() {
       this.moveable?.destroy();
       this.moveable = new Moveable__default["default"](this.container, {
@@ -224,35 +292,38 @@
       });
       this.bindResizeEvent();
       this.bindDragEvent();
+      this.bindRotateEvent();
+      this.bindScaleEvent();
     }
     bindResizeEvent() {
       if (!this.moveable)
         throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
+      const frame = {
+        left: 0,
+        top: 0
+      };
       this.moveable.on("resizeStart", (e) => {
-        if (e.dragStart) {
-          const rect = this.moveable.getRect();
-          const offset = getAbsolutePosition(e.target, rect);
-          e.dragStart.set([offset.left, offset.top]);
-        }
-      }).on("resize", ({ width, height, drag }) => {
+        if (!this.target)
+          return;
+        this.dragStatus = "start" /* START */;
+        this.moveableHelper?.onResizeStart(e);
+        frame.top = this.target.offsetTop;
+        frame.left = this.target.offsetLeft;
+      }).on("resize", (e) => {
+        const { width, height, drag } = e;
         if (!this.moveable || !this.target || !this.dragEl)
           return;
         const { beforeTranslate } = drag;
         this.dragStatus = "ing" /* ING */;
-        this.target.style.width = `${width}px`;
-        this.target.style.height = `${height}px`;
-        this.dragEl.style.width = `${width}px`;
-        this.dragEl.style.height = `${height}px`;
+        this.moveableHelper?.onResize(e);
         if (this.mode === Mode.SORTABLE) {
-          this.dragEl.style.top = `${beforeTranslate[1]}px`;
-          this.target.style.top = `0px`;
-          return;
+          this.target.style.top = "0px";
+        } else {
+          this.target.style.left = `${frame.left + beforeTranslate[0]}px`;
+          this.target.style.top = `${frame.top + beforeTranslate[1]}px`;
         }
-        this.dragEl.style.left = `${beforeTranslate[0]}px`;
-        this.dragEl.style.top = `${beforeTranslate[1]}px`;
-        const offset = getAbsolutePosition(this.target, { left: beforeTranslate[0], top: beforeTranslate[1] });
-        this.target.style.left = `${offset.left}px`;
-        this.target.style.top = `${offset.top}px`;
+        this.target.style.width = `${width}px`;
+        this.target.style.height = `${height}px`;
       }).on("resizeEnd", () => {
         this.dragStatus = "end" /* END */;
         this.update(true);
@@ -261,27 +332,31 @@
     bindDragEvent() {
       if (!this.moveable)
         throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
-      this.moveable.on("dragStart", () => {
+      const frame = {
+        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);
         if (this.mode === Mode.SORTABLE) {
           this.ghostEl = this.generateGhostEl(this.target);
         }
-      }).on("drag", ({ left, top }) => {
+        frame.top = this.target.offsetTop;
+        frame.left = this.target.offsetLeft;
+      }).on("drag", (e) => {
         if (!this.target || !this.dragEl)
           return;
         this.dragStatus = "ing" /* ING */;
-        const offset = getAbsolutePosition(this.target, { left, top });
         if (this.ghostEl) {
-          this.dragEl.style.top = `${top}px`;
-          this.ghostEl.style.top = `${offset.top}px`;
+          this.ghostEl.style.top = `${frame.top + e.beforeTranslate[1]}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 = `${frame.left + e.beforeTranslate[0]}px`;
+        this.target.style.top = `${frame.top + e.beforeTranslate[1]}px`;
       }).on("dragEnd", () => {
         if (this.dragStatus === "ing" /* ING */) {
           switch (this.mode) {
@@ -296,13 +371,53 @@
         this.destroyGhostEl();
       });
     }
-    async getSnapElements(el) {
-      const { renderer } = this.core;
-      const getSnapElements = (await renderer.getRuntime())?.getSnapElements || (() => {
-        const doc = renderer.contentWindow?.document;
-        return doc ? Array.from(doc.querySelectorAll("[id]")) : [];
+    bindRotateEvent() {
+      if (!this.moveable)
+        throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
+      this.moveable.on("rotateStart", (e) => {
+        this.dragStatus = "start" /* START */;
+        this.moveableHelper?.onRotateStart(e);
+      }).on("rotate", (e) => {
+        if (!this.target || !this.dragEl)
+          return;
+        this.dragStatus = "ing" /* ING */;
+        this.moveableHelper?.onRotate(e);
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.target.style.transform = frame?.toCSSObject().transform || "";
+      }).on("rotateEnd", (e) => {
+        this.dragStatus = "end" /* END */;
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.emit("update", {
+          el: this.target,
+          style: {
+            transform: frame?.get("transform")
+          }
+        });
+      });
+    }
+    bindScaleEvent() {
+      if (!this.moveable)
+        throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
+      this.moveable.on("scaleStart", (e) => {
+        this.dragStatus = "start" /* START */;
+        this.moveableHelper?.onScaleStart(e);
+      }).on("scale", (e) => {
+        if (!this.target || !this.dragEl)
+          return;
+        this.dragStatus = "ing" /* ING */;
+        this.moveableHelper?.onScale(e);
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.target.style.transform = frame?.toCSSObject().transform || "";
+      }).on("scaleEnd", (e) => {
+        this.dragStatus = "end" /* END */;
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.emit("update", {
+          el: this.target,
+          style: {
+            transform: frame?.get("transform")
+          }
+        });
       });
-      return getSnapElements(el).filter((element) => element !== this.target && !this.target?.contains(element));
     }
     sort() {
       if (!this.target || !this.ghostEl)
@@ -324,12 +439,13 @@
       }
     }
     update(isResize = false) {
-      const rect = this.moveable.getRect();
-      const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : getAbsolutePosition(this.target, rect);
+      if (!this.target)
+        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(rect.width);
-      const height = this.calcValueByFontsize(rect.height);
+      const width = this.calcValueByFontsize(this.target.clientWidth);
+      const height = this.calcValueByFontsize(this.target.clientHeight);
       this.emit("update", {
         el: this.target,
         style: isResize ? { left, top, width, height } : { left, top }
@@ -341,8 +457,8 @@
       }
       const ghostEl = el.cloneNode(true);
       const { top, left } = getAbsolutePosition(el, getOffset(el));
-      ghostEl.id = `${GHOST_EL_ID_PREFIX}${ghostEl.id}`;
-      ghostEl.style.zIndex = "5";
+      ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
+      ghostEl.style.zIndex = ZIndex.GHOST_EL;
       ghostEl.style.opacity = ".5";
       ghostEl.style.position = "absolute";
       ghostEl.style.left = `${left}px`;
@@ -354,49 +470,73 @@
       this.ghostEl?.remove();
       this.ghostEl = void 0;
     }
-    generateDragEl(el) {
-      if (this.dragEl) {
-        this.destroyDragEl();
-      }
-      const { width, height } = el.getBoundingClientRect();
+    updateDragEl(el) {
       const offset = getOffset(el);
-      const dragEl = globalThis.document.createElement("div");
-      dragEl.style.cssText = `
+      const { transform } = getComputedStyle(el);
+      this.dragEl.style.cssText = `
       position: absolute;
+      transform: ${transform};
       left: ${offset.left}px;
       top: ${offset.top}px;
-      width: ${width}px;
-      height: ${height}px;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+      z-index: ${ZIndex.DRAG_EL};
     `;
-      this.container.append(dragEl);
-      return dragEl;
+      this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
+      if (typeof this.core.config.updateDragEl === "function") {
+        this.core.config.updateDragEl(this.dragEl, el);
+      }
     }
     destroyDragEl() {
       this.dragEl?.remove();
-      this.dragEl = void 0;
     }
-    async getOptions(options = {}) {
+    getOptions(options = {}) {
       if (!this.target)
         return {};
       const isAbsolute = this.mode === Mode.ABSOLUTE;
+      const isFixed = this.mode === Mode.FIXED;
       let { moveableOptions = {} } = this.core.config;
       if (typeof moveableOptions === "function") {
         moveableOptions = moveableOptions(this.core);
       }
+      const elementGuidelines = moveableOptions.elementGuidelines || this.target.parentElement?.children || [];
+      this.setElementGuidelines(elementGuidelines);
+      if (moveableOptions.elementGuidelines) {
+        delete moveableOptions.elementGuidelines;
+      }
       return {
-        scrollable: true,
-        origin: true,
+        origin: false,
+        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) : [],
+        scalable: false,
+        rotatable: false,
+        snappable: isAbsolute || isFixed,
+        snapGap: isAbsolute || isFixed,
+        snapThreshold: 5,
+        snapDigit: 0,
+        throttleDrag: 0,
+        isDisplaySnapDigit: isAbsolute,
+        snapDirections: {
+          top: isAbsolute,
+          right: isAbsolute,
+          bottom: isAbsolute,
+          left: isAbsolute,
+          center: isAbsolute,
+          middle: isAbsolute
+        },
+        elementSnapDirections: {
+          top: isAbsolute,
+          right: isAbsolute,
+          bottom: isAbsolute,
+          left: isAbsolute
+        },
+        isDisplayInnerSnapDigit: true,
         horizontalGuidelines: this.horizontalGuidelines,
         verticalGuidelines: this.verticalGuidelines,
+        elementGuidelines: this.elementGuidelines,
         bounds: {
           top: 0,
           left: 0,
@@ -465,18 +605,150 @@
     };
   };
 
+  class TargetCalibrate extends EventEmitter.EventEmitter {
+    constructor(config) {
+      super();
+      this.parent = config.parent;
+      this.mask = config.mask;
+      this.dr = config.dr;
+      this.core = config.core;
+      this.operationEl = globalThis.document.createElement("div");
+      this.parent.append(this.operationEl);
+    }
+    update(el, prefix) {
+      const { left, top } = this.getOffset(el);
+      const { transform } = getComputedStyle(el);
+      this.operationEl.style.cssText = `
+      position: absolute;
+      transform: ${transform};
+      left: ${left}px;
+      top: ${top}px;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+    `;
+      this.operationEl.id = `${prefix}${el.id}`;
+      if (typeof this.core.config.updateDragEl === "function") {
+        this.core.config.updateDragEl(this.operationEl, el);
+      }
+      return this.operationEl;
+    }
+    destroy() {
+      this.operationEl?.remove();
+    }
+    getOffset(el) {
+      const { offsetParent } = el;
+      const left = el.offsetLeft;
+      const top = el.offsetTop;
+      if (offsetParent) {
+        const parentOffset = this.getOffset(offsetParent);
+        return {
+          left: left + parentOffset.left,
+          top: top + parentOffset.top
+        };
+      }
+      if (this.dr.mode === Mode.FIXED) {
+        if (getMode(el) === Mode.FIXED) {
+          return {
+            left,
+            top
+          };
+        }
+        return {
+          left: left - this.mask.scrollLeft,
+          top: top - this.mask.scrollTop
+        };
+      }
+      if (getMode(el) === Mode.FIXED) {
+        return {
+          left: left + this.mask.scrollLeft,
+          top: top + this.mask.scrollTop
+        };
+      }
+      return {
+        left,
+        top
+      };
+    }
+  }
+
+  class StageHighlight extends EventEmitter.EventEmitter {
+    constructor(config) {
+      super();
+      this.core = config.core;
+      this.container = config.container;
+      this.calibrationTarget = new TargetCalibrate({
+        parent: this.core.mask.content,
+        mask: this.core.mask,
+        dr: this.core.dr,
+        core: this.core
+      });
+    }
+    highlight(el) {
+      if (!el || el === this.target)
+        return;
+      this.target = el;
+      this.moveable?.destroy();
+      this.moveable = new Moveable__default["default"](this.container, {
+        target: this.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
+        origin: false,
+        rootContainer: this.core.container,
+        zoom: 1
+      });
+    }
+    clearHighlight() {
+      if (!this.moveable)
+        return;
+      this.target = void 0;
+      this.moveable.target = null;
+      this.moveable.updateTarget();
+    }
+    destroy() {
+      this.moveable?.destroy();
+      this.calibrationTarget.destroy();
+    }
+  }
+
   class Rule extends EventEmitter__default["default"] {
-    hGuides;
-    vGuides;
-    horizontalGuidelines = [];
-    verticalGuidelines = [];
-    container;
-    containerResizeObserver;
     constructor(container) {
       super();
+      this.horizontalGuidelines = getGuideLineFromCache(GuidesType.HORIZONTAL);
+      this.verticalGuidelines = getGuideLineFromCache(GuidesType.VERTICAL);
+      this.getGuidesStyle = (type) => ({
+        position: "fixed",
+        zIndex: 1,
+        left: type === GuidesType.HORIZONTAL ? 0 : "-30px",
+        top: type === GuidesType.HORIZONTAL ? "-30px" : 0,
+        width: type === GuidesType.HORIZONTAL ? "100%" : "30px",
+        height: type === GuidesType.HORIZONTAL ? "30px" : "100%"
+      });
+      this.createGuides = (type, defaultGuides = []) => new Guides__default["default"](this.container, {
+        type,
+        defaultGuides,
+        displayDragPos: true,
+        backgroundColor: "#fff",
+        lineColor: "#000",
+        textColor: "#000",
+        style: this.getGuidesStyle(type)
+      });
+      this.hGuidesChangeGuidesHandler = (e) => {
+        this.horizontalGuidelines = e.guides;
+        this.emit("changeGuides", {
+          type: GuidesType.HORIZONTAL,
+          guides: this.horizontalGuidelines
+        });
+        globalThis.localStorage.setItem(H_GUIDE_LINE_STORAGE_KEY, JSON.stringify(e.guides));
+      };
+      this.vGuidesChangeGuidesHandler = (e) => {
+        this.verticalGuidelines = e.guides;
+        this.emit("changeGuides", {
+          type: GuidesType.VERTICAL,
+          guides: this.verticalGuidelines
+        });
+        globalThis.localStorage.setItem(V_GUIDE_LINE_STORAGE_KEY, JSON.stringify(e.guides));
+      };
       this.container = container;
-      this.hGuides = this.createGuides(GuidesType.HORIZONTAL);
-      this.vGuides = this.createGuides(GuidesType.VERTICAL);
+      this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
+      this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
       this.hGuides.on("changeGuides", this.hGuidesChangeGuidesHandler);
       this.vGuides.on("changeGuides", this.vGuidesChangeGuidesHandler);
       this.containerResizeObserver = new ResizeObserver(() => {
@@ -510,6 +782,8 @@
         type: GuidesType.HORIZONTAL,
         guides: []
       });
+      globalThis.localStorage.setItem(V_GUIDE_LINE_STORAGE_KEY, "[]");
+      globalThis.localStorage.setItem(H_GUIDE_LINE_STORAGE_KEY, "[]");
     }
     showRule(show = true) {
       if (show) {
@@ -542,40 +816,10 @@
       this.containerResizeObserver.disconnect();
       this.removeAllListeners();
     }
-    getGuidesStyle = (type) => ({
-      position: "fixed",
-      zIndex: 1,
-      left: type === GuidesType.HORIZONTAL ? 0 : "-30px",
-      top: type === GuidesType.HORIZONTAL ? "-30px" : 0,
-      width: type === GuidesType.HORIZONTAL ? "100%" : "30px",
-      height: type === GuidesType.HORIZONTAL ? "30px" : "100%"
-    });
-    createGuides = (type, defaultGuides = []) => new Guides__default["default"](this.container, {
-      type,
-      defaultGuides,
-      displayDragPos: true,
-      backgroundColor: "#fff",
-      lineColor: "#000",
-      textColor: "#000",
-      style: this.getGuidesStyle(type)
-    });
-    hGuidesChangeGuidesHandler = (e) => {
-      this.horizontalGuidelines = e.guides;
-      this.emit("changeGuides", {
-        type: GuidesType.HORIZONTAL,
-        guides: this.horizontalGuidelines
-      });
-    };
-    vGuidesChangeGuidesHandler = (e) => {
-      this.verticalGuidelines = e.guides;
-      this.emit("changeGuides", {
-        type: GuidesType.VERTICAL,
-        guides: this.verticalGuidelines
-      });
-    };
   }
 
   const wrapperClassName = "editor-mask-wrapper";
+  const throttleTime = 100;
   const hideScrollbar = () => {
     const style = globalThis.document.createElement("style");
     style.innerHTML = `
@@ -609,28 +853,73 @@
     return el;
   };
   class StageMask extends Rule {
-    content = createContent();
-    wrapper;
-    core;
-    page = null;
-    pageScrollParent = null;
-    scrollTop = 0;
-    scrollLeft = 0;
-    width = 0;
-    height = 0;
-    wrapperHeight = 0;
-    wrapperWidth = 0;
-    mode = Mode.ABSOLUTE;
-    pageResizeObserver = null;
-    wrapperResizeObserver = null;
     constructor(config) {
       const wrapper = createWrapper();
       super(wrapper);
+      this.content = createContent();
+      this.page = null;
+      this.pageScrollParent = null;
+      this.scrollTop = 0;
+      this.scrollLeft = 0;
+      this.width = 0;
+      this.height = 0;
+      this.wrapperHeight = 0;
+      this.wrapperWidth = 0;
+      this.maxScrollTop = 0;
+      this.maxScrollLeft = 0;
+      this.intersectionObserver = null;
+      this.mode = Mode.ABSOLUTE;
+      this.pageResizeObserver = null;
+      this.wrapperResizeObserver = null;
+      this.highlightHandler = lodashEs.throttle((event) => {
+        this.emit("highlight", event);
+      }, throttleTime);
+      this.mouseDownHandler = (event) => {
+        this.emit("clearHighlight");
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
+          return;
+        if (event.target.className.indexOf("moveable-control") !== -1) {
+          return;
+        }
+        this.content.removeEventListener("mousemove", this.highlightHandler);
+        this.emit("beforeSelect", event);
+        globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
+      };
+      this.mouseUpHandler = () => {
+        globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
+        this.content.addEventListener("mousemove", this.highlightHandler);
+        this.emit("select");
+      };
+      this.mouseWheelHandler = (event) => {
+        this.emit("clearHighlight");
+        if (!this.page)
+          throw new Error("page \u672A\u521D\u59CB\u5316");
+        const { deltaY, deltaX } = event;
+        if (this.page.clientHeight < this.wrapperHeight && deltaY)
+          return;
+        if (this.page.clientWidth < this.wrapperWidth && deltaX)
+          return;
+        if (this.maxScrollTop > 0) {
+          this.scrollTop = this.scrollTop + deltaY;
+        }
+        if (this.maxScrollLeft > 0) {
+          this.scrollLeft = this.scrollLeft + deltaX;
+        }
+        this.scroll();
+        this.emit("scroll", event);
+      };
+      this.mouseLeaveHandler = () => {
+        setTimeout(() => this.emit("clearHighlight"), throttleTime);
+      };
       this.wrapper = wrapper;
       this.core = config.core;
       this.content.addEventListener("mousedown", this.mouseDownHandler);
       this.wrapper.appendChild(this.content);
       this.content.addEventListener("wheel", this.mouseWheelHandler);
+      this.content.addEventListener("mousemove", this.highlightHandler);
+      this.content.addEventListener("mouseleave", this.mouseLeaveHandler);
     }
     setMode(mode) {
       this.mode = mode;
@@ -649,12 +938,33 @@
       this.page = page;
       this.pageScrollParent = getScrollParent(page) || this.core.renderer.contentWindow?.document.documentElement || null;
       this.pageResizeObserver?.disconnect();
+      this.wrapperResizeObserver?.disconnect();
+      this.intersectionObserver?.disconnect();
+      if (typeof IntersectionObserver !== "undefined") {
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            const { target, intersectionRatio } = entry;
+            if (intersectionRatio <= 0) {
+              this.scrollIntoView(target);
+            }
+            this.intersectionObserver?.unobserve(target);
+          });
+        }, {
+          root: this.pageScrollParent,
+          rootMargin: "0px",
+          threshold: 1
+        });
+      }
       if (typeof ResizeObserver !== "undefined") {
         this.pageResizeObserver = new ResizeObserver((entries) => {
           const [entry] = entries;
           const { clientHeight, clientWidth } = entry.target;
           this.setHeight(clientHeight);
           this.setWidth(clientWidth);
+          this.scroll();
+          if (this.core.dr.moveable) {
+            this.core.dr.updateMoveable();
+          }
         });
         this.pageResizeObserver.observe(page);
         this.wrapperResizeObserver = new ResizeObserver((entries) => {
@@ -662,6 +972,8 @@
           const { clientHeight, clientWidth } = entry.target;
           this.wrapperHeight = clientHeight;
           this.wrapperWidth = clientWidth;
+          this.setMaxScrollLeft();
+          this.setMaxScrollTop();
         });
         this.wrapperResizeObserver.observe(this.wrapper);
       }
@@ -674,16 +986,32 @@
     setLayout(el) {
       this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
     }
+    scrollIntoView(el) {
+      el.scrollIntoView();
+      if (!this.pageScrollParent)
+        return;
+      this.scrollLeft = this.pageScrollParent.scrollLeft;
+      this.scrollTop = this.pageScrollParent.scrollTop;
+      this.scroll();
+    }
     destroy() {
       this.content?.remove();
       this.page = null;
       this.pageScrollParent = null;
       this.pageResizeObserver?.disconnect();
       this.wrapperResizeObserver?.disconnect();
+      this.content.removeEventListener("mouseleave", this.mouseLeaveHandler);
       super.destroy();
     }
     scroll() {
+      this.fixScrollValue();
       let { scrollLeft, scrollTop } = this;
+      if (this.pageScrollParent) {
+        this.pageScrollParent.scrollTo({
+          top: scrollTop,
+          left: scrollLeft
+        });
+      }
       if (this.mode === Mode.FIXED) {
         scrollLeft = 0;
         scrollTop = 0;
@@ -696,71 +1024,65 @@
     }
     setHeight(height) {
       this.height = height;
+      this.setMaxScrollTop();
       this.content.style.height = `${height}px`;
     }
     setWidth(width) {
       this.width = width;
+      this.setMaxScrollLeft();
       this.content.style.width = `${width}px`;
     }
-    mouseDownHandler = async (event) => {
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
-        return;
-      if (event.target.className.indexOf("moveable-control") !== -1) {
-        return;
-      }
-      this.emit("beforeSelect", event);
-      globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
-    };
-    mouseUpHandler = () => {
-      globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
-      this.emit("select");
-    };
-    mouseWheelHandler = (event) => {
-      if (!this.page)
-        throw new Error("page \u672A\u521D\u59CB\u5316");
-      const { deltaY, deltaX } = event;
-      const { height, wrapperHeight, width, wrapperWidth } = this;
-      const maxScrollTop = height - wrapperHeight;
-      const maxScrollLeft = width - wrapperWidth;
-      if (maxScrollTop > 0) {
-        if (deltaY > 0) {
-          this.scrollTop = this.scrollTop + Math.min(maxScrollTop - this.scrollTop, deltaY);
-        } else {
-          this.scrollTop = Math.max(this.scrollTop + deltaY, 0);
-        }
-      }
-      if (width > wrapperWidth) {
-        if (deltaX > 0) {
-          this.scrollLeft = this.scrollLeft + Math.min(maxScrollLeft - this.scrollLeft, deltaX);
-        } else {
-          this.scrollLeft = Math.max(this.scrollLeft + deltaX, 0);
-        }
-      }
-      if (this.mode !== Mode.FIXED) {
-        this.scrollTo(this.scrollLeft, this.scrollTop);
-      }
-      if (this.pageScrollParent) {
-        this.pageScrollParent.scrollTo({
-          top: this.scrollTop,
-          left: this.scrollLeft
-        });
-      }
-      this.scroll();
-      this.emit("scroll", event);
-    };
+    setMaxScrollLeft() {
+      this.maxScrollLeft = Math.max(this.width - this.wrapperWidth, 0);
+    }
+    setMaxScrollTop() {
+      this.maxScrollTop = Math.max(this.height - this.wrapperHeight, 0);
+    }
+    fixScrollValue() {
+      if (this.scrollTop < 0)
+        this.scrollTop = 0;
+      if (this.scrollLeft < 0)
+        this.scrollLeft = 0;
+      if (this.maxScrollTop < this.scrollTop)
+        this.scrollTop = this.maxScrollTop;
+      if (this.maxScrollLeft < this.scrollLeft)
+        this.scrollLeft = this.maxScrollLeft;
+    }
   }
 
   class StageRender extends EventEmitter.EventEmitter {
-    contentWindow = null;
-    runtime = null;
-    iframe;
-    runtimeUrl;
-    core;
-    render;
     constructor({ core }) {
       super();
+      this.contentWindow = null;
+      this.runtime = null;
+      this.getMagicApi = () => ({
+        onPageElUpdate: (el) => this.emit("page-el-update", el),
+        onRuntimeReady: (runtime) => {
+          this.runtime = runtime;
+          globalThis.runtime = runtime;
+          this.emit("runtime-ready", runtime);
+        }
+      });
+      this.getRuntime = () => {
+        if (this.runtime)
+          return Promise.resolve(this.runtime);
+        return new Promise((resolve) => {
+          const listener = (runtime) => {
+            this.off("runtime-ready", listener);
+            resolve(runtime);
+          };
+          this.on("runtime-ready", listener);
+        });
+      };
+      this.loadHandler = async () => {
+        this.emit("onload");
+        if (this.render) {
+          const el = await this.render(this.core);
+          if (el) {
+            this.iframe?.contentDocument?.body?.appendChild(el);
+          }
+        }
+      };
       this.core = core;
       this.runtimeUrl = core.config.runtimeUrl || "";
       this.render = core.config.render;
@@ -773,14 +1095,6 @@
     `;
       this.iframe.addEventListener("load", this.loadHandler);
     }
-    getMagicApi = () => ({
-      onPageElUpdate: (el) => this.emit("page-el-update", el),
-      onRuntimeReady: (runtime) => {
-        this.runtime = runtime;
-        globalThis.runtime = runtime;
-        this.emit("runtime-ready", runtime);
-      }
-    });
     async mount(el) {
       if (this.iframe) {
         if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
@@ -797,17 +1111,6 @@
         throw Error("mount \u5931\u8D25");
       }
     }
-    getRuntime = () => {
-      if (this.runtime)
-        return Promise.resolve(this.runtime);
-      return new Promise((resolve) => {
-        const listener = (runtime) => {
-          this.off("runtime-ready", listener);
-          resolve(runtime);
-        };
-        this.on("runtime-ready", listener);
-      });
-    };
     destroy() {
       this.iframe?.removeEventListener("load", this.loadHandler);
       this.contentWindow = null;
@@ -815,35 +1118,25 @@
       this.iframe = void 0;
       this.removeAllListeners();
     }
-    loadHandler = async () => {
-      this.emit("onload");
-      if (this.render) {
-        const el = await this.render(this.core);
-        if (el) {
-          this.iframe?.contentDocument?.body?.appendChild(el);
-        }
-      }
-    };
   }
 
   class StageCore extends EventEmitter.EventEmitter {
-    selectedDom;
-    renderer;
-    mask;
-    dr;
-    config;
-    zoom = DEFAULT_ZOOM;
-    canSelect;
     constructor(config) {
       super();
+      this.zoom = DEFAULT_ZOOM;
       this.config = config;
       this.setZoom(config.zoom);
       this.canSelect = config.canSelect || ((el) => !!el.id);
       this.renderer = new StageRender({ core: this });
       this.mask = new StageMask({ core: this });
       this.dr = new StageDragResize({ 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.highlightLayer = new StageHighlight({ core: this, container: this.mask.wrapper });
+      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) => {
         this.setElementFromPoint(event);
       }).on("select", () => {
@@ -851,6 +1144,16 @@
       }).on("changeGuides", (data) => {
         this.dr.setGuidelines(data.type, data.guides);
         this.emit("changeGuides", data);
+      }).on("highlight", async (event) => {
+        await this.setElementFromPoint(event);
+        if (this.highlightedDom === this.selectedDom) {
+          this.highlightLayer.clearHighlight();
+          return;
+        }
+        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));
@@ -874,60 +1177,81 @@
       let stopped = false;
       const stop = () => stopped = true;
       for (const el of els) {
-        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.canSelect(el, stop)) {
+        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.canSelect(el, event, 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();
+      await runtime?.select?.(el.id);
       if (runtime?.beforeSelect) {
         await runtime.beforeSelect(el);
       }
       this.mask.setLayout(el);
-      this.dr?.select(el, event);
+      this.dr.select(el, event);
+      if (this.config.autoScrollIntoView || el.dataset.autoScrollIntoView) {
+        this.mask.intersectionObserver?.observe(el);
+      }
       this.selectedDom = el;
+      if (this.renderer.contentWindow) {
+        removeSelectedClassName(this.renderer.contentWindow.document);
+        if (this.selectedDom) {
+          addSelectedClassName(this.selectedDom, this.renderer.contentWindow.document);
+        }
+      }
     }
     update(data) {
       const { config } = data;
-      this.renderer?.getRuntime().then((runtime) => {
+      return this.renderer?.getRuntime().then((runtime) => {
         runtime?.update?.(data);
         setTimeout(() => {
           const el = this.renderer.contentWindow?.document.getElementById(`${config.id}`);
-          if (el) {
+          if (el && el.id === this.selectedDom?.id) {
+            this.selectedDom = el;
             this.mask.setLayout(el);
-            this.dr?.select(el);
+            this.dr.updateMoveable(el);
           }
         }, 0);
       });
     }
+    async highlight(idOrEl) {
+      let el;
+      try {
+        el = await this.getTargetElement(idOrEl);
+      } catch (error) {
+        this.highlightLayer.clearHighlight();
+        return;
+      }
+      if (el === this.highlightedDom)
+        return;
+      this.highlightLayer.highlight(el);
+      this.highlightedDom = el;
+    }
     sortNode(data) {
-      this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
+      return this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
     }
     add(data) {
-      this.renderer?.getRuntime().then((runtime) => runtime?.add?.(data));
+      return this.renderer?.getRuntime().then((runtime) => runtime?.add?.(data));
     }
     remove(data) {
-      this.renderer?.getRuntime().then((runtime) => runtime?.remove?.(data));
+      return this.renderer?.getRuntime().then((runtime) => runtime?.remove?.(data));
     }
     setZoom(zoom = DEFAULT_ZOOM) {
       this.zoom = zoom;
     }
     mount(el) {
+      this.container = el;
       const { mask, renderer } = this;
       renderer.mount(el);
       mask.mount(el);
@@ -938,11 +1262,22 @@
       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) {
+      if (typeof idOrEl === "string" || typeof idOrEl === "number") {
+        const el = this.renderer.contentWindow?.document.getElementById(`${idOrEl}`);
+        if (!el)
+          throw new Error(`\u4E0D\u5B58\u5728ID\u4E3A${idOrEl}\u7684\u5143\u7D20`);
+        return el;
+      }
+      return idOrEl;
     }
   }
 
@@ -951,8 +1286,7 @@
   exports.StageRender = StageRender;
   exports["default"] = StageCore;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-  exports[Symbol.toStringTag] = 'Module';
+  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 }));
 //# sourceMappingURL=tmagic-stage.umd.js.map