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

fix(stage): 标尺销毁后没有移除对应的dom

Browse Source 
fix #617
This commit is contained in:
roymondchen 2024-06-28 19:12:36 +08:00
parent a164e2be62
commit 079679997a
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/stage/src/Rule.ts
View File

@ -5,6 +5,8 @@ import Guides, { type GuidesEvents, type GuidesOptions } from '@scena/guides';
import { GuidesType } from './const'; import { GuidesType } from './const';
import type { RuleOptions } from './types'; import type { RuleOptions } from './types';
const guidesClass = 'tmagic-stage-guides';
export default class Rule extends EventEmitter { export default class Rule extends EventEmitter {
public hGuides: Guides; public hGuides: Guides;
public vGuides: Guides; public vGuides: Guides;
@ -84,12 +86,11 @@ export default class Rule extends EventEmitter {
* @param show 是否显示 * @param show 是否显示
*/ */
public showRule(show = true) { public showRule(show = true) {
// 当尺子隐藏时发现大小变化，显示后会变形，所以这里做重新初始化处理 // 当尺子隐藏时发生大小变化，显示后会变形，所以这里做重新初始化处理
if (show) { if (show) {
this.hGuides.destroy(); this.destroyGuides();
this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
this.vGuides.destroy(); this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines); this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
} else { } else {
this.hGuides.setState({ this.hGuides.setState({
@ -115,12 +116,22 @@ export default class Rule extends EventEmitter {
} }
public destroy(): void { public destroy(): void {
this.destroyGuides();
this.hGuides.off('changeGuides', this.hGuidesChangeGuidesHandler); this.hGuides.off('changeGuides', this.hGuidesChangeGuidesHandler);
this.vGuides.off('changeGuides', this.vGuidesChangeGuidesHandler); this.vGuides.off('changeGuides', this.vGuidesChangeGuidesHandler);
this.containerResizeObserver.disconnect(); this.containerResizeObserver.disconnect();
this.removeAllListeners(); this.removeAllListeners();
} }
public destroyGuides(): void {
this.hGuides.destroy();
this.vGuides.destroy();
this.container.querySelectorAll(`.${guidesClass}`).forEach((el) => {
el.remove();
});
}
private getGuidesStyle = (type: GuidesType) => ({ private getGuidesStyle = (type: GuidesType) => ({
position: 'fixed', position: 'fixed',
zIndex: 1, zIndex: 1,
@ -135,6 +146,7 @@ export default class Rule extends EventEmitter {
type, type,
defaultGuides, defaultGuides,
displayDragPos: true, displayDragPos: true,
className: guidesClass,
backgroundColor: '#fff', backgroundColor: '#fff',
lineColor: '#000', lineColor: '#000',
textColor: '#000', textColor: '#000',

4
packages/stage/src/StageMask.ts
View File

@ -170,12 +170,12 @@ export default class StageMask extends Rule {
* 销毁实例 * 销毁实例
*/ */
public destroy(): void { public destroy(): void {
super.destroy();
this.content?.remove(); this.content?.remove();
this.page = null; this.page = null;
this.pageScrollParent = null; this.pageScrollParent = null;
this.wrapperResizeObserver?.disconnect(); this.wrapperResizeObserver?.disconnect();
super.destroy();
} }
public on<Name extends keyof MaskEvents, Param extends MaskEvents[Name]>( public on<Name extends keyof MaskEvents, Param extends MaskEvents[Name]>(