chore(stage): 优化高亮性能

This commit is contained in:
roymondchen 2023-08-21 19:39:14 +08:00
parent 0274c36afd
commit 5de5fc933a
2 changed files with 20 additions and 13 deletions

View File

@ -95,14 +95,14 @@ export default class StageDragResize extends MoveableOptionsManager {
Object.entries(options).forEach(([key, value]) => { Object.entries(options).forEach(([key, value]) => {
(this.moveable as any)[key] = value; (this.moveable as any)[key] = value;
}); });
this.moveable.updateTarget(); this.moveable.updateRect();
} }
public clearSelectStatus(): void { public clearSelectStatus(): void {
if (!this.moveable) return; if (!this.moveable) return;
this.dragResizeHelper.destroyShadowEl(); this.dragResizeHelper.destroyShadowEl();
this.moveable.target = null; this.moveable.target = null;
this.moveable.updateTarget(); this.moveable.updateRect();
} }
/** /**

View File

@ -28,7 +28,7 @@ export default class StageHighlight extends EventEmitter {
public container: HTMLElement; public container: HTMLElement;
public target?: HTMLElement; public target?: HTMLElement;
public moveable?: Moveable; public moveable?: Moveable;
public targetShadow: TargetShadow; public targetShadow?: TargetShadow;
private getRootContainer: GetRootContainer; private getRootContainer: GetRootContainer;
constructor(config: StageHighlightConfig) { constructor(config: StageHighlightConfig) {
@ -52,24 +52,29 @@ export default class StageHighlight extends EventEmitter {
public highlight(el: HTMLElement): void { public highlight(el: HTMLElement): void {
if (!el || el === this.target) return; if (!el || el === this.target) return;
this.target = el; this.target = el;
this.moveable?.destroy();
this.targetShadow?.update(el);
if (this.moveable) {
this.moveable.zoom = 2;
this.moveable.updateRect();
} else {
this.moveable = new Moveable(this.container, { this.moveable = new Moveable(this.container, {
target: this.targetShadow.update(el), target: this.targetShadow?.el,
origin: false, origin: false,
rootContainer: this.getRootContainer(), rootContainer: this.getRootContainer(),
zoom: 2, zoom: 2,
}); });
} }
}
/** /**
* *
*/ */
public clearHighlight(): void { public clearHighlight(): void {
if (!this.moveable || !this.target) return; if (!this.moveable || !this.target) return;
this.moveable.zoom = 0;
this.moveable.updateRect();
this.target = undefined; this.target = undefined;
this.moveable.target = null;
this.moveable.updateTarget();
} }
/** /**
@ -77,6 +82,8 @@ export default class StageHighlight extends EventEmitter {
*/ */
public destroy(): void { public destroy(): void {
this.moveable?.destroy(); this.moveable?.destroy();
this.targetShadow.destroy(); this.targetShadow?.destroy();
this.moveable = undefined;
this.targetShadow = undefined;
} }
} }