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

feat(stage): 增加当前拖动的节点的z-index

Browse Source
This commit is contained in:
roymondchen 2022-03-30 21:51:48 +08:00 committed by khuntoriia
parent bfdd813531
commit 7f3d6c5438
4 changed files with 41 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,7 @@ import {
UpdateData, UpdateData,
UpdateEventData, UpdateEventData,
} from './types'; } from './types';
import { addSelectedClassName, removeSelectedClassName } from './util';
export default class StageCore extends EventEmitter { export default class StageCore extends EventEmitter {
public selectedDom: Element | undefined; public selectedDom: Element | undefined;
@ -135,7 +136,8 @@ export default class StageCore extends EventEmitter {
if (el === this.selectedDom) return; if (el === this.selectedDom) return;
const runtime = await this.renderer?.getRuntime(); const runtime = await this.renderer.getRuntime();
if (runtime?.beforeSelect) { if (runtime?.beforeSelect) {
await runtime.beforeSelect(el); await runtime.beforeSelect(el);
} }
@ -143,6 +145,13 @@ export default class StageCore extends EventEmitter {
this.mask.setLayout(el); this.mask.setLayout(el);
this.dr?.select(el, event); this.dr?.select(el, event);
this.selectedDom = el; this.selectedDom = el;
if (this.renderer.contentWindow) {
removeSelectedClassName(this.renderer.contentWindow.document);
if (this.selectedDom) {
addSelectedClassName(this.selectedDom);
}
}
} }
/** /**

13
packages/stage/src/StageRender.ts
View File

@ -18,6 +18,7 @@
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import { SELECTED_CLASS, ZIndex } from './const';
import StageCore from './StageCore'; import StageCore from './StageCore';
import type { Runtime, RuntimeWindow, StageRenderConfig } from './types'; import type { Runtime, RuntimeWindow, StageRenderConfig } from './types';
import { getHost, isSameDomain } from './util'; import { getHost, isSameDomain } from './util';
@ -114,11 +115,23 @@ export default class StageRender extends EventEmitter {
private loadHandler = async () => { private loadHandler = async () => {
this.emit('onload'); this.emit('onload');
if (this.render) { if (this.render) {
const el = await this.render(this.core); const el = await this.render(this.core);
if (el) { if (el) {
this.iframe?.contentDocument?.body?.appendChild(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);
}
}; };
} }

3
packages/stage/src/const.ts
View File

@ -29,6 +29,7 @@ export enum GuidesType {
export enum ZIndex { export enum ZIndex {
MASK = '99999', MASK = '99999',
SELECTED_EL = '666',
} }
export enum MouseButton { export enum MouseButton {
@ -42,3 +43,5 @@ export enum Mode {
FIXED = 'fixed', FIXED = 'fixed',
SORTABLE = 'sortable', SORTABLE = 'sortable',
} }
export const SELECTED_CLASS = 'tmagic-stage-selected-area';

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

@ -16,7 +16,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { Mode } from './const'; import { Mode, SELECTED_CLASS } from './const';
import type { Offset } from './types'; import type { Offset } from './types';
export const getOffset = (el: HTMLElement): Offset => { export const getOffset = (el: HTMLElement): Offset => {
@ -154,3 +154,17 @@ export const createDiv = ({ className, cssText }: { className: string; cssText:
el.style.cssText = cssText; el.style.cssText = cssText;
return el; 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`);
};