fix(components/splitter): issue #266

zyfra · May 16, 2023 · 5bbad83 · 5bbad83
1 parent a9830a4
commit 5bbad83
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 34 deletions.
diff --git a/...ts/splitter/examples/areas-control-display-none/areas-control-display-none.component.html b/...ts/splitter/examples/areas-control-display-none/areas-control-display-none.component.html
@@ -52,7 +52,7 @@ <h3>area 4</h3>
  </div>
  </prizm-splitter-area>
 </prizm-splitter>
-
+<br />
 <div>
  <button prizmButton appearance="primary" size="xl" (click)="change()">
  Control areas with display:none

diff --git a/...src/app/components/splitter/examples/areas-control-ngif/areas-control-ngif.component.html b/...src/app/components/splitter/examples/areas-control-ngif/areas-control-ngif.component.html
@@ -52,7 +52,7 @@ <h3>area 4</h3>
  </div>
  </prizm-splitter-area>
 </prizm-splitter>
-
+<br />
 <div>
  <button prizmButton appearance="primary" size="xl" (click)="change()">Control areas with *ngIf</button>
 </div>
diff --git a/libs/components/src/lib/components/splitter/area/area.component.ts b/libs/components/src/lib/components/splitter/area/area.component.ts
@@ -25,22 +25,19 @@ export class PrizmSplitterAreaComponent {
 
  private _size: number | null;
  @Input() set size(value: number | null) {
- if ((value === null && this._size !== null) || (value !== null && this._size === null)) {
- this.splitterService.areasUpdate$$.next();
- }
-
  if (value === null) {
  this.hide();
+ this.setSize(value);
+ this.setCurrentSize(0);
  }
 
  if (value !== null) {
  this.show();
- this.splitterService.areaInputSizeChange$$.next(this);
  this.setCurrentSize(value);
  this.setSize(value);
  }
 
- this._size = value;
+ this.splitterService.areaInputSizeChange$$.next(this);
  }
  get size(): number | null {
  return this._size;

diff --git a/libs/components/src/lib/components/splitter/splitter.component.html b/libs/components/src/lib/components/splitter/splitter.component.html
@@ -1,6 +1,6 @@
 <div class="container container--{{ orientation }}" #container>
  <prizm-splitter-gutter
- *ngFor="let gutter of guttersData$ | async"
+ *ngFor="let gutter of guttersData"
  [areaBefore]="gutter.areaBefore"
  [areaAfter]="gutter.areaAfter"
  [order]="gutter.order"

diff --git a/libs/components/src/lib/components/splitter/splitter.component.ts b/libs/components/src/lib/components/splitter/splitter.component.ts
@@ -70,11 +70,12 @@ export class PrizmSplitterComponent implements AfterViewInit, AfterContentInit {
 
  areas$: Observable<PrizmSplitterAreaComponent[]>;
 
- guttersData$: Observable<Array<GutterData>>;
+ guttersData: Array<GutterData> = [];
 
  containerSize$$ = new BehaviorSubject(0);
 
  lastGap = 0;
+
  constructor(
  private cdr: ChangeDetectorRef,
  private destroy$: PrizmDestroyService,
@@ -87,47 +88,44 @@ export class PrizmSplitterComponent implements AfterViewInit, AfterContentInit {
  startWith<QueryList<PrizmSplitterAreaComponent>>(this.splitterAreaQueryList),
  map(ql => ql.toArray())
  ),
- this.splitterService.areasUpdate$$.pipe(map(() => this.splitterAreaQueryList.toArray()))
- ).pipe(map(areas => areas.filter(area => area.size !== null)));
+ this.splitterService.areaInputSizeChange$$.pipe(map(() => this.splitterAreaQueryList.toArray()))
+ ).pipe(
+ map(areas => areas.filter(area => area.size !== null)),
+ observeOn(asyncScheduler)
+ );
 
- this.areas$.subscribe(areas => {
+ this.areas$.pipe(takeUntil(this.destroy$)).subscribe(areas => {
  const gap = ((areas.length - 1) * this.gutterElementSize) / areas.length;
  if (gap !== this.lastGap) {
  areas.forEach(area => area.setCurrentSizeWithCalc(gap));
  }
 
  this.lastGap = gap;
+
+ this.guttersData = [];
+ areas.forEach((area, index) => {
+ area.order = index;
+ if (index < areas.length - 1) {
+ this.guttersData.push({ areaBefore: index, areaAfter: index + 1, order: index + 1 });
+ }
+ });
+
  this.cdr.markForCheck();
  });
 
  this.splitterService.areaInputSizeChange$$
- .pipe(observeOn(asyncScheduler), withLatestFrom(this.areas$))
+ .pipe(withLatestFrom(this.areas$), takeUntil(this.destroy$))
  .subscribe(([changedArea, areas]) => {
  const gap = ((areas.length - 1) * this.gutterElementSize) / areas.length;
  changedArea.setCurrentSizeWithCalc(gap);
  this.cdr.markForCheck();
  });
-
- this.guttersData$ = this.areas$.pipe(
- map(areas => {
- const gutters: Array<GutterData> = [];
- areas.forEach((area, index) => {
- area.order = index;
- if (index < areas.length - 1) {
- gutters.push({ areaBefore: index, areaAfter: index + 1, order: index + 1 });
- }
- });
- return gutters;
- }),
- observeOn(asyncScheduler)
- );
  }
 
  public ngAfterViewInit(): void {
  const guttersComponents$ = this.splitterGutterQueryList.changes.pipe(
  startWith<QueryList<PrizmSplitterGutterComponent>>(this.splitterGutterQueryList),
- map(ql => ql.toArray()),
- shareReplay(1)
+ map(ql => ql.toArray())
  );
 
  guttersComponents$
@@ -138,8 +136,8 @@ export class PrizmSplitterComponent implements AfterViewInit, AfterContentInit {
  const elem = gutter.elementRef.nativeElement;
 
  return fromEvent<PointerEvent>(elem, 'pointerdown').pipe(
- withLatestFrom(this.areas$, this.guttersData$),
- switchMap(([event, areas, gutters]) => {
+ withLatestFrom(this.areas$),
+ switchMap(([event, areas]) => {
  event.preventDefault();
  elem.setPointerCapture(event.pointerId);
 

diff --git a/libs/components/src/lib/components/splitter/splitter.service.ts b/libs/components/src/lib/components/splitter/splitter.service.ts
@@ -4,8 +4,6 @@ import { PrizmSplitterAreaComponent } from './area/area.component';
 export class PrizmSplitterService {
  areaInputSizeChange$$ = new Subject<PrizmSplitterAreaComponent>();
 
- areasUpdate$$ = new Subject<void>();
-
  accuracy = 8;
 
  private toFixed(num: number): number {