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

package/dist/tmagic-stage.es.js

@@ -1,8 +1,12 @@
 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_";
+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";
@@ -11,6 +15,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,7 +30,17 @@ var Mode = /* @__PURE__ */ ((Mode2) => {
   Mode2["SORTABLE"] = "sortable";
   return Mode2;
 })(Mode || {});
+const SELECTED_CLASS = "tmagic-stage-selected-area";
 
+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;
@@ -145,46 +160,64 @@ 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`);
+    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`);
+  });
+};
 
 class StageDragResize extends EventEmitter {
-  core;
-  container;
-  target;
-  dragEl;
-  moveable;
-  horizontalGuidelines = [];
-  verticalGuidelines = [];
-  moveableOptions = {};
-  dragStatus = "end" /* END */;
-  ghostEl;
-  mode = Mode.ABSOLUTE;
   constructor(config) {
     super();
+    this.horizontalGuidelines = [];
+    this.verticalGuidelines = [];
+    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";
+    this.init(el);
+    if (!this.moveable || this.target !== oldTarget) {
+      this.moveableHelper = MoveableHelper.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();
@@ -192,15 +225,19 @@ class StageDragResize extends EventEmitter {
   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();
@@ -209,6 +246,17 @@ class StageDragResize extends EventEmitter {
     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
+    });
+  }
   initMoveable() {
     this.moveable?.destroy();
     this.moveable = new Moveable(this.container, {
@@ -253,27 +301,31 @@ class StageDragResize extends EventEmitter {
   bindDragEvent() {
     if (!this.moveable)
       throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
-    this.moveable.on("dragStart", () => {
+    let offset = null;
+    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 }) => {
+    }).on("drag", (e) => {
       if (!this.target || !this.dragEl)
         return;
+      if (!offset) {
+        offset = getAbsolutePosition(this.target, { left: 0, top: 0 });
+      }
       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) {
@@ -284,17 +336,18 @@ class StageDragResize extends EventEmitter {
             this.update();
         }
       }
+      offset = null;
       this.dragStatus = "end" /* END */;
       this.destroyGhostEl();
     });
   }
-  async getSnapElements(el) {
-    const { renderer } = this.core;
-    const getSnapElements = (await renderer.getRuntime())?.getSnapElements || (() => {
+  getSnapElements(runtime, el) {
+    const { renderer, mask } = this.core;
+    const getSnapElements = runtime?.getSnapElements || (() => {
       const doc = renderer.contentWindow?.document;
       return doc ? Array.from(doc.querySelectorAll("[id]")) : [];
     });
-    return getSnapElements(el).filter((element) => element !== this.target && !this.target?.contains(element));
+    return getSnapElements(el).filter((element) => element !== this.target && !this.target?.contains(element) && element !== mask.page);
   }
   sort() {
     if (!this.target || !this.ghostEl)
@@ -333,7 +386,7 @@ class StageDragResize extends EventEmitter {
     }
     const ghostEl = el.cloneNode(true);
     const { top, left } = getAbsolutePosition(el, getOffset(el));
-    ghostEl.id = `${GHOST_EL_ID_PREFIX}${ghostEl.id}`;
+    ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
     ghostEl.style.zIndex = "5";
     ghostEl.style.opacity = ".5";
     ghostEl.style.position = "absolute";
@@ -346,49 +399,62 @@ class StageDragResize extends EventEmitter {
     this.ghostEl?.remove();
     this.ghostEl = void 0;
   }
-  generateDragEl(el) {
-    if (this.dragEl) {
-      this.destroyDragEl();
-    }
+  updateDragEl(el) {
     const { width, height } = el.getBoundingClientRect();
     const offset = getOffset(el);
-    const dragEl = globalThis.document.createElement("div");
-    dragEl.style.cssText = `
+    this.dragEl.style.cssText = `
       position: absolute;
       left: ${offset.left}px;
       top: ${offset.top}px;
       width: ${width}px;
       height: ${height}px;
+      z-index: 9;
     `;
-    this.container.append(dragEl);
-    return dragEl;
+    this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
   }
   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);
     }
     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) : [],
+      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,
@@ -457,15 +523,159 @@ const up = (deltaTop, target) => {
   };
 };
 
+class TargetCalibrate extends EventEmitter {
+  constructor(config) {
+    super();
+    this.parent = config.parent;
+    this.mask = config.mask;
+    this.dr = config.dr;
+    this.operationEl = globalThis.document.createElement("div");
+    this.parent.append(this.operationEl);
+  }
+  update(el, prefix) {
+    const { width, height } = el.getBoundingClientRect();
+    const { left, top } = this.getOffset(el);
+    this.operationEl.style.cssText = `
+      position: absolute;
+      left: ${left}px;
+      top: ${top}px;
+      width: ${width}px;
+      height: ${height}px;
+    `;
+    this.operationEl.id = `${prefix}${el.id}`;
+    return this.operationEl;
+  }
+  destroy() {
+    this.operationEl?.remove();
+  }
+  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;
+    }
+    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 {
+  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
+    });
+  }
+  highlight(el) {
+    if (!el || el === this.target)
+      return;
+    this.target = el;
+    this.moveable?.destroy();
+    this.moveable = new Moveable(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$1 {
-  hGuides;
-  vGuides;
-  horizontalGuidelines = [];
-  verticalGuidelines = [];
-  container;
-  containerResizeObserver;
   constructor(container) {
     super();
+    this.horizontalGuidelines = [];
+    this.verticalGuidelines = [];
+    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(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
+      });
+    };
+    this.vGuidesChangeGuidesHandler = (e) => {
+      this.verticalGuidelines = e.guides;
+      this.emit("changeGuides", {
+        type: GuidesType.VERTICAL,
+        guides: this.verticalGuidelines
+      });
+    };
     this.container = container;
     this.hGuides = this.createGuides(GuidesType.HORIZONTAL);
     this.vGuides = this.createGuides(GuidesType.VERTICAL);
@@ -534,40 +744,10 @@ class Rule extends EventEmitter$1 {
     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(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 = `
@@ -601,28 +781,73 @@ const createWrapper = () => {
   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.mode = Mode.ABSOLUTE;
+    this.pageResizeObserver = null;
+    this.wrapperResizeObserver = null;
+    this.highlightHandler = 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.fixScrollValue();
+      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;
@@ -647,6 +872,9 @@ class StageMask extends Rule {
         const { clientHeight, clientWidth } = entry.target;
         this.setHeight(clientHeight);
         this.setWidth(clientWidth);
+        this.fixScrollValue();
+        this.scroll();
+        this.core.dr.updateMoveable();
       });
       this.pageResizeObserver.observe(page);
       this.wrapperResizeObserver = new ResizeObserver((entries) => {
@@ -654,6 +882,8 @@ class StageMask extends Rule {
         const { clientHeight, clientWidth } = entry.target;
         this.wrapperHeight = clientHeight;
         this.wrapperWidth = clientWidth;
+        this.setMaxScrollLeft();
+        this.setMaxScrollTop();
       });
       this.wrapperResizeObserver.observe(this.wrapper);
     }
@@ -666,16 +896,33 @@ class StageMask extends Rule {
   setLayout(el) {
     this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
   }
+  scrollIntoView(el) {
+    if (this.mode === Mode.FIXED)
+      return;
+    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() {
     let { scrollLeft, scrollTop } = this;
+    if (this.pageScrollParent) {
+      this.pageScrollParent.scrollTo({
+        top: scrollTop,
+        left: scrollLeft
+      });
+    }
     if (this.mode === Mode.FIXED) {
       scrollLeft = 0;
       scrollTop = 0;
@@ -688,71 +935,75 @@ class StageMask extends Rule {
   }
   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 = this.width - this.wrapperWidth;
+  }
+  setMaxScrollTop() {
+    this.maxScrollTop = this.height - this.wrapperHeight;
+  }
+  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 {
-  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);
+        }
+      }
+      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);
+      }
+    };
     this.core = core;
     this.runtimeUrl = core.config.runtimeUrl || "";
     this.render = core.config.render;
@@ -765,14 +1016,6 @@ class StageRender extends EventEmitter {
     `;
     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) {
@@ -789,17 +1032,6 @@ class StageRender extends EventEmitter {
       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;
@@ -807,35 +1039,25 @@ class StageRender extends EventEmitter {
     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 {
-  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", () => {
@@ -843,6 +1065,16 @@ 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);
+      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));
@@ -866,60 +1098,79 @@ class StageCore extends EventEmitter {
     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);
+    this.mask.scrollIntoView(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);
@@ -930,11 +1181,22 @@ 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) {
+    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;
   }
 }