From 7f3d6c5438bb0ab537b2c8d2eab1a129228e8f9c Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 30 Mar 2022 21:51:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(stage):=20=E5=A2=9E=E5=8A=A0=E5=BD=93?=
 =?UTF-8?q?=E5=89=8D=E6=8B=96=E5=8A=A8=E7=9A=84=E8=8A=82=E7=82=B9=E7=9A=84?=
 =?UTF-8?q?z-index?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/stage/src/StageCore.ts   | 11 ++++++++++-
 packages/stage/src/StageRender.ts | 13 +++++++++++++
 packages/stage/src/const.ts       |  3 +++
 packages/stage/src/util.ts        | 16 +++++++++++++++-
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/packages/stage/src/StageCore.ts b/packages/stage/src/StageCore.ts
index 6bd57423..96c8b6c5 100644
--- a/packages/stage/src/StageCore.ts
+++ b/packages/stage/src/StageCore.ts
@@ -35,6 +35,7 @@ import {
   UpdateData,
   UpdateEventData,
 } from './types';
+import { addSelectedClassName, removeSelectedClassName } from './util';
 
 export default class StageCore extends EventEmitter {
   public selectedDom: Element | undefined;
@@ -135,7 +136,8 @@ export default class StageCore extends EventEmitter {
 
     if (el === this.selectedDom) return;
 
-    const runtime = await this.renderer?.getRuntime();
+    const runtime = await this.renderer.getRuntime();
+
     if (runtime?.beforeSelect) {
       await runtime.beforeSelect(el);
     }
@@ -143,6 +145,13 @@ export default class StageCore extends EventEmitter {
     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);
+      }
+    }
   }
 
   /**
diff --git a/packages/stage/src/StageRender.ts b/packages/stage/src/StageRender.ts
index c31d45eb..5485fd64 100644
--- a/packages/stage/src/StageRender.ts
+++ b/packages/stage/src/StageRender.ts
@@ -18,6 +18,7 @@
 
 import { EventEmitter } from 'events';
 
+import { SELECTED_CLASS, ZIndex } from './const';
 import StageCore from './StageCore';
 import type { Runtime, RuntimeWindow, StageRenderConfig } from './types';
 import { getHost, isSameDomain } from './util';
@@ -114,11 +115,23 @@ export default class StageRender extends EventEmitter {
 
   private 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);
+    }
   };
 }
diff --git a/packages/stage/src/const.ts b/packages/stage/src/const.ts
index a18c050a..40d742a5 100644
--- a/packages/stage/src/const.ts
+++ b/packages/stage/src/const.ts
@@ -29,6 +29,7 @@ export enum GuidesType {
 
 export enum ZIndex {
   MASK = '99999',
+  SELECTED_EL = '666',
 }
 
 export enum MouseButton {
@@ -42,3 +43,5 @@ export enum Mode {
   FIXED = 'fixed',
   SORTABLE = 'sortable',
 }
+
+export const SELECTED_CLASS = 'tmagic-stage-selected-area';
diff --git a/packages/stage/src/util.ts b/packages/stage/src/util.ts
index 7a75c47d..25cab0b9 100644
--- a/packages/stage/src/util.ts
+++ b/packages/stage/src/util.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Mode } from './const';
+import { Mode, SELECTED_CLASS } from './const';
 import type { Offset } from './types';
 
 export const getOffset = (el: HTMLElement): Offset => {
@@ -154,3 +154,17 @@ export const createDiv = ({ className, cssText }: { className: string; cssText:
   el.style.cssText = cssText;
   return el;
 };
+
+export const removeSelectedClassName = (doc: Document) => {
+  const oldEl = doc.querySelector(`.${SELECTED_CLASS}`);
+
+  if (oldEl) {
+    oldEl.classList.remove(SELECTED_CLASS);
+    (oldEl.parentNode as HTMLDivElement)?.classList.remove(`${SELECTED_CLASS}-parent`);
+  }
+};
+
+export const addSelectedClassName = (el: Element) => {
+  el.classList.add(SELECTED_CLASS);
+  (el.parentNode as Element)?.classList.add(`${SELECTED_CLASS}-parent`);
+};