rxjs/operators#buffer TypeScript Examples

ngOnInit(): void {
    const cap = (val:number, max:number) => val > max ? max : val < -max ? -max : val;
    const throttler = throttleTime(20, undefined, {leading: false, trailing: true});
    this.wheel$
      .pipe( buffer(this.wheel$.pipe(throttler)) )
      .pipe( map(ev => ({
          event: ev[0],
          deltaY: ev.reduce((acc, cur) => acc + cap(cur.deltaY, 50), 0)
      })))
      .subscribe(this.mousewheel.bind(this));
  }

export function copyHeadings() {
  const renderer = getRenderer();

  onReady(() => {
    let sub: Subscription;

    const _exec = () => {
      if (sub) sub.unsubscribe();
      sub = new Subscription();

      document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]').forEach(heading$ => {
        const link = headingLink(heading$);
  
        if (link) {
          const click$ = fromEvent(heading$, 'mousedown').pipe(
            filter(event => (event as MouseEvent).button === 0),
            concatMap(start => 
              fromEvent(heading$, 'mouseup').pipe(
                take(1),
                map(end => [start, end])
              )
            )
          );

          sub.add(
            click$.pipe(
              buffer(click$.pipe(debounceTime(200))),
              filter(buffer => buffer.length === 1),
              map(buffer => buffer[0]),
            )
            .subscribe(([start, end]) => {
              const [ms, me] = [start as MouseEvent, end as MouseEvent];
              const dx = ms.clientX - me.clientX;
              const dy = ms.clientY - me.clientY;
              if (Math.sqrt(dx * dx + dy * dy) < 10) {
                copyToClipboard(link, () => renderer.render(<Toast>
                  Link Copied to Clipboard!
                </Toast>).on(document.body));
              };
            })
          );
        }
      });
    };

    _exec(); window.addEventListener('navigation', _exec);
  });
}

export function watch(
  root: string,
  config: CodedocConfig,
  notifier?: Observable<void>,
) {
  const watchbase = join(root, config.src.base, '/');
  const filechange$ = new Subject<string>();
  const request$ = new Subject<string[] | 'all' | 'queued'>();
  const build$ = new BehaviorSubject<boolean>(false);

  _watch(watchbase, {
    recursive: true,
    filter: (f: string) => (
      config.src.pick.test(f) && !config.src.drop.test(f) ||
      config.src.toc === f.substr(watchbase.length)
    ),
  }, (event, filename) => {
    if (event === 'update')
      filechange$.next(filename.substr(watchbase.length))
  });

  filechange$.pipe(
    tap(filename => {
      if (notifier)
        console.log(chalk`{blue # Changes in {magenta ${join(config.src.base, filename)}} queueing ...}`);
      request$.next('queued');
    }),
    buffer(
      filechange$.pipe(
        debounceTime(500), 
        delayWhen(() => !build$.value ? of(true) : build$.pipe(filter(_ => !_)))
      )
    ),
    filter(chanegs => chanegs.length > 0)
  ).subscribe(changedFiles => {
    if (notifier) {
      build$.next(true);
      console.log(chalk`{gray # Rebuilding due to changes ...}`);
    }
    changedFiles = changedFiles.filter((file, index) => changedFiles.indexOf(file) === index);
    if (changedFiles.includes(config.src.toc)) {
      request$.next('all');
    } else {
      request$.next(changedFiles);
    }

    notifier?.subscribe(() => build$.next(false));
  });

  return request$;
}

versionClick$ = this.versionClick.pipe(
    buffer(this.versionClick
      .pipe(debounceTime(500))
    ),
    map(stream => stream.length),
    filter(length => length >= 5), // Only when 5 click events emits, interval of each < 500
    tap(() => this.showDeveloperOptions = true),
  );