fix: force gutter events cancellation when inputs change affects sizes

Harpush · Harpush · commit 5fc3aa95440a · 2024-06-12T12:55:35.000+03:00
diff --git a/projects/angular-split/src/lib/split-custom-events-behavior.directive.ts b/projects/angular-split/src/lib/split-custom-events-behavior.directive.ts
@@ -5,6 +5,7 @@ import {
   filter,
   fromEvent,
   map,
+  merge,
   mergeMap,
   of,
   repeat,
@@ -17,6 +18,7 @@ import {
 } from 'rxjs'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { DOCUMENT } from '@angular/common'
+import { SplitComponent } from './split/split.component'
 
 /**
  * Emits mousedown, click, double click and keydown out of zone
@@ -31,6 +33,7 @@ import { DOCUMENT } from '@angular/common'
   standalone: true,
 })
 export class SplitCustomEventsBehaviorDirective {
+  private readonly split = inject(SplitComponent)
   private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef)
   private readonly document = inject(DOCUMENT)
 
@@ -84,8 +87,8 @@ export class SplitCustomEventsBehaviorDirective {
                 ),
           ),
         ),
-        // Discard everything once drag started and listen again (repeat) to mouse down
-        takeUntil(dragStarted$),
+        // Discard everything once drag started or force cancel and listen again (repeat) to mouse down
+        takeUntil(merge(dragStarted$, this.split._forceCancelGutterEvents$)),
         repeat(),
         leaveNgZone(),
         takeUntilDestroyed(),
diff --git a/projects/angular-split/src/lib/split/split.component.ts b/projects/angular-split/src/lib/split/split.component.ts
@@ -18,7 +18,20 @@ import {
 } from '@angular/core'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { SplitAreaComponent } from '../split-area/split-area.component'
-import { Subject, filter, fromEvent, map, pairwise, skipWhile, startWith, switchMap, take, takeUntil, tap } from 'rxjs'
+import {
+  Subject,
+  filter,
+  fromEvent,
+  map,
+  pairwise,
+  repeat,
+  skipWhile,
+  startWith,
+  switchMap,
+  take,
+  takeUntil,
+  tap,
+} from 'rxjs'
 import {
   ClientPoint,
   createClassesString,
@@ -76,6 +89,10 @@ export class SplitComponent {
   private readonly ngZone = inject(NgZone)
   private readonly defaultOptions = inject(ANGULAR_SPLIT_DEFAULT_OPTIONS)
 
+  /**
+   * @internal
+   */
+  readonly _forceCancelGutterEvents$ = new Subject<void>()
   private readonly gutterMouseDown$ = new Subject<MouseDownContext>()
   private readonly dragProgressSubject = new Subject<SplitGutterInteractionEvent>()
 
@@ -196,6 +213,7 @@ export class SplitComponent {
             return
           }
 
+          this._forceCancelGutterEvents$.next()
           visibleAreas.forEach((area) => area._internalSize.reset())
 
           const isValid = areAreasValid(visibleAreas, unit)
@@ -281,6 +299,8 @@ export class SplitComponent {
             ),
           ),
         ),
+        takeUntil(this._forceCancelGutterEvents$),
+        repeat(),
         takeUntilDestroyed(),
       )
       .subscribe()
