From d47828976a5dc3a3f46e84016e0e15b673aed278 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 24 May 2022 16:28:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(stage):=20=E9=80=89=E4=B8=AD=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E6=97=B6=EF=BC=8C=E7=BB=99=E6=89=80=E6=9C=89=E7=88=B6?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=B7=BB=E5=8A=A0=E4=B8=80=E4=B8=AAclassName?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/stage/src/StageCore.ts |  2 +-
 packages/stage/src/util.ts      | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/stage/src/StageCore.ts b/packages/stage/src/StageCore.ts
index 2228a552..b0f9e91c 100644
--- a/packages/stage/src/StageCore.ts
+++ b/packages/stage/src/StageCore.ts
@@ -160,7 +160,7 @@ export default class StageCore extends EventEmitter {
     if (this.renderer.contentWindow) {
       removeSelectedClassName(this.renderer.contentWindow.document);
       if (this.selectedDom) {
-        addSelectedClassName(this.selectedDom);
+        addSelectedClassName(this.selectedDom, this.renderer.contentWindow.document);
       }
     }
   }
diff --git a/packages/stage/src/util.ts b/packages/stage/src/util.ts
index 25cab0b9..83523367 100644
--- a/packages/stage/src/util.ts
+++ b/packages/stage/src/util.ts
@@ -19,6 +19,16 @@
 import { Mode, SELECTED_CLASS } from './const';
 import type { Offset } from './types';
 
+const getParents = (el: Element, relative: Element) => {
+  let cur: Element | null = el.parentElement;
+  const parents: Element[] = [];
+  while (cur && cur !== relative) {
+    parents.push(cur);
+    cur = cur.parentElement;
+  }
+  return parents;
+};
+
 export const getOffset = (el: HTMLElement): Offset => {
   const { transform } = getComputedStyle(el);
   const { offsetParent } = el;
@@ -161,10 +171,16 @@ export const removeSelectedClassName = (doc: Document) => {
   if (oldEl) {
     oldEl.classList.remove(SELECTED_CLASS);
     (oldEl.parentNode as HTMLDivElement)?.classList.remove(`${SELECTED_CLASS}-parent`);
+    doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
+      item.classList.remove(`${SELECTED_CLASS}-parents`);
+    });
   }
 };
 
-export const addSelectedClassName = (el: Element) => {
+export const addSelectedClassName = (el: Element, doc: Document) => {
   el.classList.add(SELECTED_CLASS);
   (el.parentNode as Element)?.classList.add(`${SELECTED_CLASS}-parent`);
+  getParents(el, doc.body).forEach((item) => {
+    item.classList.add(`${SELECTED_CLASS}-parents`);
+  });
 };