Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Resize observer fix

Browse Source
This commit is contained in:
Adina Țeudan 2021-12-02 03:37:31 +02:00
parent f207f649c9
commit 67ae381607
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/listing/workflow/workflow.component.ts
View File

@ -20,6 +20,7 @@ import { LoadingService } from '../../loading';
import { IListable } from '../models';
import { EntitiesService, ListingService } from '../services';
import { BehaviorSubject } from 'rxjs';
import { filter, tap } from 'rxjs/operators';
export interface WorkflowColumn<T, K> {
key: K;
@ -65,6 +66,9 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
selectionColumn?: WorkflowColumn<T, K>;
@ViewChildren(CdkDropList) private readonly _dropLists!: QueryList<CdkDropList>;
private _existingEntities: { [key: string]: T } = {};
private _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
this._updateItemWidth(entries[0]);
});
constructor(
@Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent<T>,
@ -99,7 +103,13 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
}
ngOnInit(): void {
this.addSubscription = this.listingService.displayed$.subscribe(entities => this._updateConfigItems(entities));
this.addSubscription = this.listingService.displayed$.pipe(tap(entities => this._updateConfigItems(entities))).subscribe();
this.addSubscription = this.entitiesService.noData$
.pipe(
filter(noData => noData),
tap(() => this._setupResizeObserver()),
)
.subscribe();
this._setupResizeObserver();
}
@ -130,15 +140,18 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
}
private _setupResizeObserver(): void {
const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
this._updateItemWidth(entries[0]);
});
observer.observe(this._elementRef.nativeElement.querySelector('.cdk-drag'));
const cdkDragElement: Element = this._elementRef.nativeElement.querySelector('.cdk-drag') as Element;
if (cdkDragElement) {
this._observer.observe(cdkDragElement);
}
}
@Debounce(30)
private _updateItemWidth(entry: ResizeObserverEntry): void {
if (entry.contentRect.width === 0) {
this._observer.unobserve(entry.target);
this._setupResizeObserver();
}
this.itemWidth = entry.contentRect.width;
this.itemHeight = entry.contentRect.height;
this._changeRef.markForCheck();