Reduced pressure on browser with ResizeObserver

src/assets/javascripts/browser/element/index.ts

@@ -24,3 +24,4 @@ export * from "./_"
 export * from "./focus"
 export * from "./offset"
 export * from "./select"
+export * from "./size"

src/assets/javascripts/browser/element/size/index.ts

@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { Observable, fromEventPattern } from "rxjs"
+import { shareReplay, startWith } from "rxjs/operators"
+
+/* ----------------------------------------------------------------------------
+ * Types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Element offset
+ */
+export interface ElementSize {
+  width: number                        /* Element width */
+  height: number                       /* Element height */
+}
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Retrieve element size
+ *
+ * @param el - Element
+ *
+ * @return Element size
+ */
+export function getElementSize(el: HTMLElement): ElementSize {
+  return {
+    width:  el.offsetWidth,
+    height: el.offsetHeight
+  }
+}
+
+/* ------------------------------------------------------------------------- */
+
+/**
+ * Watch element size
+ *
+ * @param el - Element
+ *
+ * @return Element size observable
+ */
+export function watchElementSize(
+  el: HTMLElement
+): Observable<ElementSize> {
+  return fromEventPattern<ElementSize>(next => {
+    new ResizeObserver(([{ contentRect }]) => next({
+      width:  Math.round(contentRect.width),
+      height: Math.round(contentRect.height)
+    }))
+      .observe(el, { box: "border-box" }) // TODO: centralize, .observe and .unobserve
+  })
+    .pipe(
+      startWith(getElementSize(el)),
+      shareReplay(1)
+    )
+}

src/assets/javascripts/browser/worker/index.ts

@@ -88,11 +88,11 @@ export function watchWorker<T extends WorkerMessage>(
 ): Observable<T> {
 
   /* Intercept messages from worker-like objects */
-  const rx$ = fromEventPattern<Event>(next =>
+  const rx$ = fromEventPattern<MessageEvent>(next =>
     worker.addEventListener("message", next)
   )
     .pipe(
-      pluck<Event, T>("data")
+      pluck<MessageEvent, T>("data")
     )
 
   /* Send and receive messages, return hot observable */

src/assets/javascripts/components/main/react/index.ts

@@ -33,10 +33,11 @@ import {
   map,
   observeOn,
   pluck,
+  shareReplay,
   tap
 } from "rxjs/operators"
 
-import { Viewport } from "browser"
+import { Viewport, watchElementSize } from "browser"
 
 import { Header } from "../../header"
 import { Main } from "../_"
@@ -83,14 +84,23 @@ export function watchMain(
       pluck("height")
     )
 
-  /* Compute the main area's visible height */
-  const height$ = combineLatest([adjust$, viewport$])
+  /* Compute the main area's top and bottom markers */
+  const marker$ = watchElementSize(el)
     .pipe(
-      map(([adjust, { offset: { y }, size: { height } }]) => {
-        const top    = el.offsetTop
-        const bottom = el.offsetHeight + top
+      map(({ height }) => [
+        el.offsetTop,
+        el.offsetTop + height
+      ]),
+      distinctUntilChanged(),
+      shareReplay(1)
+    )
+
+  /* Compute the main area's visible height */
+  const height$ = combineLatest([adjust$, marker$, viewport$])
+    .pipe(
+      map(([header, [top, bottom], { offset: { y }, size: { height } }]) => {
         return height
-          - Math.max(0, top    - y,  adjust)
+          - Math.max(0, top    - y,  header)
           - Math.max(0, height + y - bottom)
       }),
       map(height => Math.max(0, height)),
@@ -98,17 +108,17 @@ export function watchMain(
     )
 
   /* Compute whether the viewport offset is past the main area's top */
-  const active$ = combineLatest([adjust$, viewport$])
+  const active$ = combineLatest([adjust$, marker$, viewport$])
     .pipe(
-      map(([adjust, { offset: { y } }]) => y >= el.offsetTop - adjust),
+      map(([header, [top], { offset: { y } }]) => y >= top - header),
       distinctUntilChanged()
     )
 
   /* Combine into a single observable */
-  return combineLatest([adjust$, height$, active$])
+  return combineLatest([adjust$, marker$, height$, active$])
     .pipe(
-      map(([adjust, height, active]) => ({
-        offset: el.offsetTop - adjust,
+      map(([header, [top], height, active]) => ({
+        offset: top - header,
         height,
         active
       }))

src/assets/javascripts/index.ts

@@ -26,6 +26,8 @@
 import "../stylesheets/main.scss"
 import "../stylesheets/palette.scss"
 
+import "resize-observer-polyfill"
+
 import { values } from "ramda"
 import {
   merge,
@@ -33,8 +35,7 @@ import {
   animationFrameScheduler,
   fromEvent,
   of,
-  NEVER,
-  from
+  NEVER
 } from "rxjs"
 import {
   delay,