@nulib/clover 0.0.0-stage → 4.0.0-beta.0

package/dist/lib/renderer/input/GestureController.mjs

@@ -0,0 +1,252 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { isInteractive, isHovering, TAP_SLOP, TAP_MS, isDirect, DOUBLE_TAP_SLOP, scrollsWithin } from "../../pointer.mjs";
+const DEFAULT_GESTURES = {
+  clickToZoom: true,
+  dblClickToZoom: true,
+  pinchToZoom: true,
+  scrollToZoom: false,
+  navigable: true
+};
+const CLICK_ZOOM = 2;
+const KEY_ZOOM = 1.5;
+const KEY_PAN_FRACTION = 0.1;
+const VELOCITY_WINDOW_MS = 100;
+const MIN_FLICK_SPEED = 200;
+const WHEEL_ZOOM_RATE = 2e-3;
+const PINCH_WHEEL_ZOOM_RATE = 0.01;
+class GestureController {
+  constructor(element, target, options = DEFAULT_GESTURES) {
+    __publicField(this, "pointers", /* @__PURE__ */ new Map());
+    __publicField(this, "samples", []);
+    __publicField(this, "down", null);
+    __publicField(this, "pinch", null);
+    __publicField(this, "lastTap", null);
+    __publicField(this, "lastPointerType", "");
+    /** A pen has hovered over the Body, so pens here are pointed as a mouse is. */
+    __publicField(this, "penHovers", false);
+    __publicField(this, "onPointerDown", (event) => {
+      var _a, _b;
+      this.lastPointerType = event.pointerType;
+      if (event.pointerType === "mouse" && event.button !== 0) return;
+      if (isInteractive(event.target, this.element)) return;
+      (_b = (_a = this.element).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+      const p = this.local(event);
+      this.pointers.set(event.pointerId, p);
+      if (this.pointers.size === 1) {
+        this.down = { x: p.x, y: p.y, t: event.timeStamp, moved: false };
+        this.samples = [{ x: p.x, y: p.y, t: event.timeStamp }];
+        this.target.setInteracting(true);
+      } else if (this.pointers.size === 2) {
+        this.pinch = this.pinchState();
+        if (this.down) this.down.moved = true;
+      }
+    });
+    __publicField(this, "onPointerMove", (event) => {
+      var _a;
+      if (isHovering(event)) this.penHovers = true;
+      const previous = this.pointers.get(event.pointerId);
+      if (!previous) return;
+      const p = this.local(event);
+      this.pointers.set(event.pointerId, p);
+      if (this.pointers.size === 1) {
+        const dx = p.x - previous.x;
+        const dy = p.y - previous.y;
+        if (this.down && Math.hypot(p.x - this.down.x, p.y - this.down.y) > TAP_SLOP) {
+          this.down.moved = true;
+        }
+        if (((_a = this.down) == null ? void 0 : _a.moved) && this.options.navigable) {
+          this.target.panBy(dx, dy, false);
+        }
+        this.samples.push({ x: p.x, y: p.y, t: event.timeStamp });
+        const cutoff = event.timeStamp - VELOCITY_WINDOW_MS;
+        while (this.samples.length > 2 && this.samples[0].t < cutoff) {
+          this.samples.shift();
+        }
+      } else if (this.pointers.size === 2 && this.pinch && this.options.navigable) {
+        const next = this.pinchState();
+        if (this.options.pinchToZoom && this.pinch.distance > 0) {
+          this.target.zoomBy(
+            next.distance / this.pinch.distance,
+            next.mid,
+            false
+          );
+        }
+        this.target.panBy(
+          next.mid.x - this.pinch.mid.x,
+          next.mid.y - this.pinch.mid.y,
+          false
+        );
+        this.pinch = next;
+      }
+    });
+    __publicField(this, "onPointerUp", (event) => {
+      var _a, _b, _c, _d, _e, _f;
+      if (!this.pointers.has(event.pointerId)) return;
+      this.pointers.delete(event.pointerId);
+      (_b = (_a = this.element).releasePointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+      if (this.pointers.size === 1) {
+        this.pinch = null;
+        const [remaining] = this.pointers.values();
+        this.samples = [{ ...remaining, t: event.timeStamp }];
+        return;
+      }
+      if (this.pointers.size > 0) return;
+      const down = this.down;
+      this.down = null;
+      this.pinch = null;
+      this.target.setInteracting(false);
+      if (!down) return;
+      const p = this.local(event);
+      const isTap = !down.moved && event.type === "pointerup" && event.timeStamp - down.t < TAP_MS;
+      if (isTap) {
+        if ((_d = (_c = this.target).dismiss) == null ? void 0 : _d.call(_c)) {
+          this.lastTap = null;
+          return;
+        }
+        if (isDirect(event.pointerType, this.penHovers)) {
+          const last2 = this.lastTap;
+          if (this.options.navigable && (this.options.clickToZoom || this.options.dblClickToZoom) && last2 && event.timeStamp - last2.t < TAP_MS && Math.hypot(p.x - last2.x, p.y - last2.y) < DOUBLE_TAP_SLOP) {
+            this.lastTap = null;
+            this.zoomIn(p);
+          } else {
+            this.lastTap = { x: p.x, y: p.y, t: event.timeStamp };
+          }
+          return;
+        }
+        if (this.options.clickToZoom && this.options.navigable) {
+          if (event.shiftKey) this.target.zoomBy(1 / CLICK_ZOOM, p, true);
+          else this.zoomIn(p);
+        } else {
+          (_f = (_e = this.target).tap) == null ? void 0 : _f.call(_e, p);
+        }
+        return;
+      }
+      if (!this.options.navigable) return;
+      const first = this.samples[0];
+      const last = this.samples[this.samples.length - 1];
+      const span = ((last == null ? void 0 : last.t) ?? 0) - ((first == null ? void 0 : first.t) ?? 0);
+      if (first && last && span > 0 && event.timeStamp - last.t < 50) {
+        const vx = (last.x - first.x) / span * 1e3;
+        const vy = (last.y - first.y) / span * 1e3;
+        if (Math.hypot(vx, vy) > MIN_FLICK_SPEED) this.target.flick(vx, vy);
+      }
+    });
+    __publicField(this, "onDoubleClick", (event) => {
+      if (!this.options.navigable) return;
+      if (this.options.clickToZoom || !this.options.dblClickToZoom) return;
+      if (isDirect(this.lastPointerType, this.penHovers)) return;
+      if (isInteractive(event.target, this.element)) return;
+      if (event.shiftKey)
+        this.target.zoomBy(1 / CLICK_ZOOM, this.local(event), true);
+      else this.zoomIn(this.local(event));
+    });
+    __publicField(this, "onWheel", (event) => {
+      const pinch = event.ctrlKey;
+      if (!this.options.navigable) return;
+      if (!pinch && !this.options.scrollToZoom) return;
+      if (!pinch && scrollsWithin(event.target, this.element, event.deltaY))
+        return;
+      event.preventDefault();
+      const delta = normalizeWheel(event);
+      const rate = pinch ? PINCH_WHEEL_ZOOM_RATE : WHEEL_ZOOM_RATE;
+      this.target.zoomBy(Math.exp(-delta * rate), this.local(event), !pinch);
+    });
+    __publicField(this, "onKeyDown", (event) => {
+      if (event.target !== this.element || !this.options.navigable) return;
+      if (event.altKey || event.metaKey || event.ctrlKey) return;
+      const rect = this.element.getBoundingClientRect();
+      const stepX = rect.width * KEY_PAN_FRACTION * (event.shiftKey ? 3 : 1);
+      const stepY = rect.height * KEY_PAN_FRACTION * (event.shiftKey ? 3 : 1);
+      switch (event.key) {
+        case "ArrowLeft":
+          this.target.panBy(stepX, 0, true);
+          break;
+        case "ArrowRight":
+          this.target.panBy(-stepX, 0, true);
+          break;
+        case "ArrowUp":
+          this.target.panBy(0, stepY, true);
+          break;
+        case "ArrowDown":
+          this.target.panBy(0, -stepY, true);
+          break;
+        case "+":
+        case "=":
+          this.target.zoomBy(KEY_ZOOM, void 0, true);
+          break;
+        case "-":
+        case "_":
+          this.target.zoomBy(1 / KEY_ZOOM, void 0, true);
+          break;
+        case "0":
+          this.target.home();
+          break;
+        case "r":
+          this.target.rotateBy(90);
+          break;
+        case "R":
+          this.target.rotateBy(-90);
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+    });
+    this.element = element;
+    this.target = target;
+    this.options = options;
+    element.addEventListener("pointerdown", this.onPointerDown);
+    element.addEventListener("pointermove", this.onPointerMove);
+    element.addEventListener("pointerup", this.onPointerUp);
+    element.addEventListener("pointercancel", this.onPointerUp);
+    element.addEventListener("dblclick", this.onDoubleClick);
+    element.addEventListener("wheel", this.onWheel, { passive: false });
+    element.addEventListener("keydown", this.onKeyDown);
+  }
+  setOptions(options) {
+    this.options = options;
+  }
+  dispose() {
+    const el = this.element;
+    el.removeEventListener("pointerdown", this.onPointerDown);
+    el.removeEventListener("pointermove", this.onPointerMove);
+    el.removeEventListener("pointerup", this.onPointerUp);
+    el.removeEventListener("pointercancel", this.onPointerUp);
+    el.removeEventListener("dblclick", this.onDoubleClick);
+    el.removeEventListener("wheel", this.onWheel);
+    el.removeEventListener("keydown", this.onKeyDown);
+  }
+  local(event) {
+    const rect = this.element.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  }
+  /**
+   * A pointer's zoom in: a click, a double click or a double tap. Zoomed in as far as it
+   * goes, it goes home instead, so one pointer can always zoom back out, whichever
+   * controls the host shows (WCAG 2.5.1).
+   */
+  zoomIn(at) {
+    var _a, _b;
+    if ((_b = (_a = this.target).atMaxZoom) == null ? void 0 : _b.call(_a)) this.target.home();
+    else this.target.zoomBy(CLICK_ZOOM, at, true);
+  }
+  pinchState() {
+    const [a, b] = [...this.pointers.values()];
+    return {
+      distance: Math.hypot(b.x - a.x, b.y - a.y),
+      mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }
+    };
+  }
+}
+function normalizeWheel(event) {
+  if (event.deltaMode === 1) return event.deltaY * 16;
+  if (event.deltaMode === 2) return event.deltaY * 400;
+  return event.deltaY;
+}
+export {
+  DEFAULT_GESTURES,
+  GestureController
+};

package/dist/lib/renderer/io/TileCache.mjs

@@ -0,0 +1,207 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { releaseImage } from "./decode.mjs";
+const DEFAULT_BUDGET = 192 * 1024 * 1024;
+const DEFAULT_IN_FLIGHT = 6;
+const MAX_ATTEMPTS = 2;
+class TileCache {
+  constructor(options) {
+    __publicField(this, "entries", /* @__PURE__ */ new Map());
+    __publicField(this, "inFlight", 0);
+    __publicField(this, "frame", 0);
+    __publicField(this, "bytes", 0);
+    __publicField(this, "wanted", []);
+    __publicField(this, "disposed", false);
+    __publicField(this, "budget");
+    __publicField(this, "maxInFlight");
+    this.options = options;
+    this.budget = options.byteBudget ?? DEFAULT_BUDGET;
+    this.maxInFlight = options.maxInFlight ?? DEFAULT_IN_FLIGHT;
+  }
+  /** The decoded tile, if ready. Marks it used this frame. */
+  get(url) {
+    const entry = this.entries.get(url);
+    if ((entry == null ? void 0 : entry.state) !== "ready") return void 0;
+    entry.lastUsed = this.frame;
+    return entry.image;
+  }
+  has(url) {
+    var _a;
+    return ((_a = this.entries.get(url)) == null ? void 0 : _a.state) === "ready";
+  }
+  failed(url) {
+    var _a;
+    return ((_a = this.entries.get(url)) == null ? void 0 : _a.state) === "failed";
+  }
+  get byteSize() {
+    return this.bytes;
+  }
+  get pending() {
+    return this.inFlight;
+  }
+  /** Put an already-decoded image in the cache (a static image loaded to learn its size). */
+  seed(url, image) {
+    var _a;
+    const existing = this.entries.get(url);
+    if ((existing == null ? void 0 : existing.state) === "ready") return;
+    (_a = existing == null ? void 0 : existing.controller) == null ? void 0 : _a.abort();
+    this.entries.set(url, {
+      url,
+      state: "ready",
+      image,
+      bytes: bytesOf(image),
+      lastUsed: this.frame,
+      attempts: 0,
+      pinned: false,
+      waiters: (existing == null ? void 0 : existing.waiters) ?? []
+    });
+    this.bytes += bytesOf(image);
+    this.flushWaiters(url);
+  }
+  /**
+   * Resolve once each tile is ready or has failed for good — how a new scene waits for
+   * its coarsest tiles before replacing the old one, so a swap never shows a blank.
+   * These loads are not tied to the required set, so a frame cannot abort them.
+   */
+  prefetch(tiles) {
+    return Promise.all(
+      tiles.map(
+        (tile) => new Promise((resolve) => {
+          const entry = this.entries.get(tile.url);
+          if (entry && entry.state !== "loading") return resolve();
+          if (entry) {
+            entry.waiters.push(resolve);
+            return;
+          }
+          this.start({ ...tile, priority: -1 }, resolve);
+        })
+      )
+    ).then(() => void 0);
+  }
+  /** Called once per frame with what this frame wants, highest priority first. */
+  update(wants) {
+    if (this.disposed) return;
+    this.frame++;
+    const wanted = new Set(wants.map((w) => w.url));
+    this.wanted = [...wants].sort((a, b) => a.priority - b.priority);
+    for (const entry of this.entries.values()) {
+      if (entry.state === "loading" && !entry.pinned && !wanted.has(entry.url) && entry.controller) {
+        entry.controller.abort();
+        this.entries.delete(entry.url);
+        this.inFlight--;
+      }
+    }
+    for (const want of this.wanted) {
+      const entry = this.entries.get(want.url);
+      if (entry) entry.lastUsed = this.frame;
+    }
+    this.pump();
+    this.evict(wanted);
+  }
+  dispose() {
+    var _a;
+    this.disposed = true;
+    for (const entry of this.entries.values()) {
+      (_a = entry.controller) == null ? void 0 : _a.abort();
+      this.flushWaiters(entry.url);
+    }
+    this.entries.clear();
+    this.bytes = 0;
+  }
+  /** Every ready tile, for a context restore or a consumer clearing memory. */
+  forEachReady(callback) {
+    for (const entry of this.entries.values()) {
+      if (entry.state === "ready" && entry.image)
+        callback(entry.url, entry.image);
+    }
+  }
+  pump() {
+    for (const want of this.wanted) {
+      if (this.inFlight >= this.maxInFlight) break;
+      if (!this.entries.has(want.url)) this.start(want);
+    }
+  }
+  start(want, waiter) {
+    const controller = new AbortController();
+    const entry = {
+      url: want.url,
+      state: "loading",
+      bytes: 0,
+      lastUsed: this.frame,
+      attempts: 0,
+      controller,
+      pinned: Boolean(waiter),
+      waiters: waiter ? [waiter] : []
+    };
+    this.entries.set(want.url, entry);
+    this.inFlight++;
+    this.attempt(entry, want, controller, want.url);
+  }
+  attempt(entry, want, controller, url) {
+    entry.attempts++;
+    this.options.load(url, controller.signal).then(
+      (image) => {
+        if (this.disposed || this.entries.get(entry.url) !== entry) {
+          releaseImage(image);
+          return;
+        }
+        entry.state = "ready";
+        entry.image = image;
+        entry.bytes = bytesOf(image);
+        entry.controller = void 0;
+        entry.pinned = false;
+        this.bytes += entry.bytes;
+        this.settle(entry);
+      },
+      (error) => {
+        if (controller.signal.aborted || this.disposed) return;
+        if (this.entries.get(entry.url) !== entry) return;
+        if (entry.attempts < MAX_ATTEMPTS && !isPermanent(error, want)) {
+          this.attempt(entry, want, controller, want.fallbackUrl ?? want.url);
+          return;
+        }
+        entry.state = "failed";
+        entry.controller = void 0;
+        entry.pinned = false;
+        this.settle(entry);
+      }
+    );
+  }
+  settle(entry) {
+    this.inFlight--;
+    this.flushWaiters(entry.url);
+    this.options.onSettled();
+    this.pump();
+  }
+  flushWaiters(url) {
+    const entry = this.entries.get(url);
+    if (!entry) return;
+    const waiters = entry.waiters;
+    entry.waiters = [];
+    waiters.forEach((resolve) => resolve());
+  }
+  evict(required) {
+    if (this.bytes <= this.budget) return;
+    const candidates = [...this.entries.values()].filter((e) => e.state === "ready" && !required.has(e.url)).sort((a, b) => a.lastUsed - b.lastUsed);
+    for (const entry of candidates) {
+      if (this.bytes <= this.budget) break;
+      this.entries.delete(entry.url);
+      this.bytes -= entry.bytes;
+      if (entry.image) releaseImage(entry.image);
+      this.options.onEvict(entry.url);
+    }
+  }
+}
+function bytesOf(image) {
+  return image.width * image.height * 4;
+}
+function isPermanent(error, want) {
+  if (want.fallbackUrl) return false;
+  const status = error == null ? void 0 : error.status;
+  return typeof status === "number" && status >= 400 && status < 500 && status !== 408 && status !== 429;
+}
+export {
+  TileCache
+};

package/dist/lib/renderer/io/decode.mjs

@@ -0,0 +1,156 @@
+"use client";
+import { sendsCredentials, cloverFetch } from "../../../core/request.mjs";
+class ImageLoadError extends Error {
+  constructor(message, url, status) {
+    super(message);
+    this.url = url;
+    this.status = status;
+    this.name = "ImageLoadError";
+  }
+}
+const opaqueOrigins = /* @__PURE__ */ new Set();
+async function loadImage(url, options = {}) {
+  const { signal, maxTextureSize, request } = options;
+  const withCredentials = sendsCredentials(request);
+  const origin = originOf(url);
+  if (typeof createImageBitmap !== "function" || typeof fetch !== "function") {
+    return loadElement(url, { signal, cors: true, withCredentials });
+  }
+  if (origin && opaqueOrigins.has(origin)) {
+    return loadElement(url, { signal, cors: false, withCredentials });
+  }
+  let response;
+  try {
+    response = await cloverFetch(request, url, { mode: "cors", signal });
+  } catch (error) {
+    if (isAbort(error, signal)) throw error;
+    const loaded = await loadElement(url, {
+      signal,
+      cors: false,
+      withCredentials
+    });
+    if (origin) opaqueOrigins.add(origin);
+    return loaded;
+  }
+  if (!response.ok) {
+    throw new ImageLoadError(
+      `Image request failed with ${response.status}`,
+      url,
+      response.status
+    );
+  }
+  const blob = await response.blob();
+  let bitmap = await decodeBitmap(blob);
+  const naturalWidth = bitmap.width;
+  const naturalHeight = bitmap.height;
+  if (maxTextureSize && (bitmap.width > maxTextureSize || bitmap.height > maxTextureSize)) {
+    const ratio = maxTextureSize / Math.max(bitmap.width, bitmap.height);
+    const resized = await createImageBitmap(bitmap, {
+      resizeWidth: Math.max(1, Math.floor(bitmap.width * ratio)),
+      resizeHeight: Math.max(1, Math.floor(bitmap.height * ratio)),
+      resizeQuality: "high"
+    });
+    bitmap.close();
+    bitmap = resized;
+  }
+  if (signal == null ? void 0 : signal.aborted) {
+    bitmap.close();
+    throw abortError();
+  }
+  return {
+    kind: "bitmap",
+    source: bitmap,
+    width: bitmap.width,
+    height: bitmap.height,
+    naturalWidth,
+    naturalHeight,
+    opaque: false
+  };
+}
+async function decodeBitmap(blob) {
+  const options = {
+    // Honor EXIF orientation, as an <img> would.
+    imageOrientation: "from-image",
+    premultiplyAlpha: "premultiply",
+    colorSpaceConversion: "default"
+  };
+  try {
+    return await createImageBitmap(blob, options);
+  } catch (error) {
+    if (error instanceof TypeError) return createImageBitmap(blob);
+    throw error;
+  }
+}
+function loadElement(url, {
+  signal,
+  cors,
+  withCredentials
+}) {
+  return new Promise((resolve, reject) => {
+    if (signal == null ? void 0 : signal.aborted) {
+      reject(abortError());
+      return;
+    }
+    const img = new Image();
+    img.decoding = "async";
+    if (cors)
+      img.crossOrigin = withCredentials ? "use-credentials" : "anonymous";
+    const cleanup = () => {
+      img.onload = null;
+      img.onerror = null;
+      signal == null ? void 0 : signal.removeEventListener("abort", onAbort);
+    };
+    const onAbort = () => {
+      cleanup();
+      img.src = "";
+      reject(abortError());
+    };
+    signal == null ? void 0 : signal.addEventListener("abort", onAbort);
+    img.onload = () => {
+      cleanup();
+      const finish = () => resolve({
+        kind: "element",
+        source: img,
+        width: img.naturalWidth,
+        height: img.naturalHeight,
+        naturalWidth: img.naturalWidth,
+        naturalHeight: img.naturalHeight,
+        opaque: !cors
+      });
+      if (typeof img.decode === "function") {
+        img.decode().then(finish, finish);
+      } else {
+        finish();
+      }
+    };
+    img.onerror = () => {
+      cleanup();
+      reject(new ImageLoadError("Image failed to load", url));
+    };
+    img.src = url;
+  });
+}
+function originOf(url) {
+  var _a;
+  try {
+    return new URL(url, (_a = globalThis.location) == null ? void 0 : _a.href).origin;
+  } catch {
+    return null;
+  }
+}
+function isAbort(error, signal) {
+  return Boolean(signal == null ? void 0 : signal.aborted) || typeof error === "object" && error !== null && error.name === "AbortError";
+}
+function abortError() {
+  const error = new Error("Aborted");
+  error.name = "AbortError";
+  return error;
+}
+function releaseImage(image) {
+  if (image.kind === "bitmap") image.source.close();
+}
+export {
+  ImageLoadError,
+  loadImage,
+  releaseImage
+};

package/dist/lib/renderer/loop/FrameLoop.mjs

@@ -0,0 +1,50 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const MAX_DT = 0.1;
+class FrameLoop {
+  constructor(tick, raf = (cb) => requestAnimationFrame(cb), caf = (handle) => cancelAnimationFrame(handle)) {
+    __publicField(this, "handle", 0);
+    __publicField(this, "last", 0);
+    __publicField(this, "disposed", false);
+    __publicField(this, "frame", (now) => {
+      this.handle = 0;
+      if (this.disposed) return;
+      const dt = this.last ? Math.min((now - this.last) / 1e3, MAX_DT) : 1 / 60;
+      this.last = now;
+      const again = this.tick(dt, now);
+      if (again) {
+        this.invalidate();
+      } else {
+        this.last = 0;
+      }
+    });
+    this.tick = tick;
+    this.raf = raf;
+    this.caf = caf;
+  }
+  invalidate() {
+    if (this.disposed || this.handle) return;
+    this.handle = this.raf(this.frame);
+  }
+  /**
+   * Draws at once rather than at the next frame, taking the place of a frame already
+   * asked for. For a resize: changing a canvas's size clears it, and a ResizeObserver
+   * runs after this frame's animation callbacks but before its paint, so a frame left to
+   * the next one paints blank.
+   */
+  drawNow() {
+    if (this.disposed) return;
+    if (this.handle) this.caf(this.handle);
+    this.frame(performance.now());
+  }
+  dispose() {
+    this.disposed = true;
+    if (this.handle) this.caf(this.handle);
+    this.handle = 0;
+  }
+}
+export {
+  FrameLoop
+};