mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-04-06 21:40:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #560 from smartxworks/fix/mask-container-resize

Browse Source 
observe mask container resize
This commit is contained in:
yz-yu 2022-08-04 18:58:47 +08:00 committed by GitHub
commit 6304215a8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/editor/src/components/EditorMaskWrapper/EditorMaskManager.ts
View File

@ -20,6 +20,7 @@ export class EditorMaskManager {
// rect of mask container
private maskContainerRect: DOMRect | null = null;
private resizeObserver: ResizeObserver;
private containerResizeObserver: ResizeObserver | null = null;
private visibleMap = new Map<Element, boolean>();
private intersectionObserver: IntersectionObserver;
private MaskPadding = 4;
@ -49,9 +50,7 @@ export class EditorMaskManager {
}
init() {
this.maskContainerRect =
this.maskContainerRef.current?.getBoundingClientRect() || null;
this.observeContainerResize();
this.observeIntersection();
this.observeResize();
this.refreshElementIdMap();
@ -83,6 +82,7 @@ export class EditorMaskManager {
destroy() {
this.intersectionObserver.disconnect();
this.resizeObserver.disconnect();
this.containerResizeObserver?.disconnect();
this.services.eventBus.off('HTMLElementsUpdated', this.onHTMLElementsUpdated);
// listen scroll events
@ -116,6 +116,14 @@ export class EditorMaskManager {
});
}
private observeContainerResize() {
this.containerResizeObserver = new ResizeObserver(e => {
this.maskContainerRect = e[0].contentRect;
});
this.containerResizeObserver.observe(this.maskContainerRef.current!);
}
private observeIntersection() {
this.intersectionObserver.disconnect();
this.eleMap.forEach(ele => {