JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-11-05 03:16:37 +08:00
Code Issues Projects Releases Wiki Activity

feat(stage): 选中节点时，给所有父节点添加一个className

Browse Source
This commit is contained in:
roymondchen 2022-05-24 16:28:06 +08:00 committed by jia000
parent bb97c4c6d0
commit d47828976a
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/stage/src/StageCore.ts
View File

@ -160,7 +160,7 @@ export default class StageCore extends EventEmitter {
if (this.renderer.contentWindow) { if (this.renderer.contentWindow) {
removeSelectedClassName(this.renderer.contentWindow.document); removeSelectedClassName(this.renderer.contentWindow.document);
if (this.selectedDom) { if (this.selectedDom) {
addSelectedClassName(this.selectedDom); addSelectedClassName(this.selectedDom, this.renderer.contentWindow.document);
} }
} }
} }

18
packages/stage/src/util.ts
View File

@ -19,6 +19,16 @@
import { Mode, SELECTED_CLASS } from './const'; import { Mode, SELECTED_CLASS } from './const';
import type { Offset } from './types'; 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 => { export const getOffset = (el: HTMLElement): Offset => {
const { transform } = getComputedStyle(el); const { transform } = getComputedStyle(el);
const { offsetParent } = el; const { offsetParent } = el;
@ -161,10 +171,16 @@ export const removeSelectedClassName = (doc: Document) => {
if (oldEl) { if (oldEl) {
oldEl.classList.remove(SELECTED_CLASS); oldEl.classList.remove(SELECTED_CLASS);
(oldEl.parentNode as HTMLDivElement)?.classList.remove(`${SELECTED_CLASS}-parent`); (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.classList.add(SELECTED_CLASS);
(el.parentNode as Element)?.classList.add(`${SELECTED_CLASS}-parent`); (el.parentNode as Element)?.classList.add(`${SELECTED_CLASS}-parent`);
getParents(el, doc.body).forEach((item) => {
item.classList.add(`${SELECTED_CLASS}-parents`);
});
}; };