@bodil/dom 0.1.0

package/src/geometry.ts

@@ -0,0 +1,147 @@
+export type Rectangle = DOMRect | Element;
+
+function rectFor(value: Rectangle): DOMRect {
+    const bounds = value instanceof Element ? value.getBoundingClientRect() : value;
+    return new DOMRect(
+        roundByDPR(bounds.x),
+        roundByDPR(bounds.y),
+        roundByDPR(bounds.width),
+        roundByDPR(bounds.height),
+    );
+}
+
+function rectPoints(rect: DOMRect): [DOMPoint, DOMPoint, DOMPoint, DOMPoint] {
+    return [
+        DOMPoint.fromPoint({ x: rect.left, y: rect.top }),
+        DOMPoint.fromPoint({ x: rect.right, y: rect.top }),
+        DOMPoint.fromPoint({ x: rect.right, y: rect.bottom }),
+        DOMPoint.fromPoint({ x: rect.left, y: rect.bottom }),
+    ];
+}
+
+function normalsIntersect(
+    left1: number,
+    right1: number,
+    y1: number,
+    x2: number,
+    top2: number,
+    bottom2: number,
+): boolean {
+    return left1 <= x2 && right1 >= x2 && top2 <= y1 && bottom2 >= y1;
+}
+
+/**
+ * Test whether the rectangle `inner` is fully contained inside the rectangle
+ * `outer`.
+ */
+export function contains(inner: Rectangle, outer: Rectangle): boolean {
+    const a = rectFor(inner),
+        b = rectFor(outer);
+    return a.top >= b.top && a.bottom <= b.bottom && a.left >= b.left && a.right <= b.right;
+}
+
+/**
+ * Test whether the point `p` lies inside the rectangle `rect`.
+ */
+export function containsPoint(p: DOMPoint, rect: Rectangle): boolean {
+    const r = rectFor(rect);
+    return p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom;
+}
+
+/**
+ * Test whether the rectangles `rectA` and `rectB` intersect.
+ */
+export function intersects(rectA: Rectangle, rectB: Rectangle): boolean {
+    const a = rectFor(rectA),
+        b = rectFor(rectB);
+    // For each of the two horizontal edges in each rectangle, check if they
+    // intersect with any of the two vertical edges in the opposite rectangle.
+    // If no edges intersect, we check to see if any of the four corner points
+    // of each rectangle lies inside the other rectangle. If none of these
+    // conditions are true, the rectangles don't intersect.
+    return (
+        normalsIntersect(a.left, a.right, a.top, b.left, b.top, b.bottom) ||
+        normalsIntersect(a.left, a.right, a.bottom, b.left, b.top, b.bottom) ||
+        normalsIntersect(a.left, a.right, a.top, b.right, b.top, b.bottom) ||
+        normalsIntersect(a.left, a.right, a.bottom, b.right, b.top, b.bottom) ||
+        normalsIntersect(b.left, b.right, b.top, a.left, a.top, a.bottom) ||
+        normalsIntersect(b.left, b.right, b.bottom, a.left, a.top, a.bottom) ||
+        normalsIntersect(b.left, b.right, b.top, a.right, a.top, a.bottom) ||
+        normalsIntersect(b.left, b.right, b.bottom, a.right, a.top, a.bottom) ||
+        rectPoints(a).some((p) => containsPoint(p, b)) ||
+        rectPoints(b).some((p) => containsPoint(p, a))
+    );
+}
+
+/**
+ * Test if a rectangle intersects with a given Y coordinate bound.
+ */
+export function intersectsHeightRange(rect: Rectangle, top: number, bottom: number): boolean {
+    const r = rectFor(rect);
+    return r.bottom >= top && r.top <= bottom;
+}
+
+/**
+ * Test if a rectangle intersects with a given Y coordinate.
+ */
+export function intersectsHeight(rect: Rectangle, y: number, margin = 0) {
+    return intersectsHeightRange(rect, y - margin, y + margin);
+}
+
+/**
+ * Test if a rectangle lies fully within a given Y coordinate bound.
+ */
+export function containsHeightRange(rect: Rectangle, top: number, bottom: number): boolean {
+    const r = rectFor(rect);
+    return r.top >= top && r.bottom <= bottom;
+}
+
+/**
+ * Decide how much of a rectangle lies within a given Y coordinate bound.
+ * Returns a value between 0 and 1.
+ */
+export function containsHeightRatio(rect: Rectangle, top: number, bottom: number): number {
+    const r = rectFor(rect);
+    if (r.bottom < top || r.top > bottom) {
+        return 0;
+    }
+    if (r.top >= top && r.bottom <= bottom) {
+        return 1;
+    }
+    if (r.top < top) {
+        return (r.bottom - top) / r.height;
+    } else if (r.bottom > bottom) {
+        return (bottom - r.top) / r.height;
+    }
+    throw new Error("unexpected fallthrough case in containsHeightRatio()");
+}
+
+/**
+ * Return a {@link DOMRect} that is aligned inside `outer` while preserving the
+ * aspect ratio of `inner`.
+ */
+export function fitRect(
+    inner: { width: number; height: number },
+    outer: { width: number; height: number },
+): DOMRect {
+    if (inner.width / inner.height < outer.width / outer.height) {
+        // portrait
+        const scale = outer.height / inner.height;
+        const targetWidth = inner.width * scale;
+        return new DOMRect(outer.width / 2 - targetWidth / 2, 0, targetWidth, outer.height);
+    }
+    // landscape
+    const scale = outer.width / inner.width;
+    const targetHeight = inner.height * scale;
+    return new DOMRect(0, outer.height / 2 - targetHeight / 2, outer.width, targetHeight);
+}
+
+/**
+ * Round a value to the window's device pixel ratio.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
+ */
+export function roundByDPR(value: number): number {
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+/**
+ * DOM and web component tools.
+ * @module
+ */
+
+import * as component from "./component";
+import * as css from "./css";
+import * as dom from "./dom";
+import * as event from "./event";
+import * as geometry from "./geometry";
+
+export { component, css, dom, event, geometry };

package/src/scheduler.ts

@@ -0,0 +1,58 @@
+import { DisposableContext, timeout } from "@bodil/core/disposable";
+
+import type { Component } from "./component";
+import { animationFrame } from "./dom";
+
+const MAX_BATCH_TIME: number = 1000 / 15; // 30fps
+const MIN_JOBS_PER_BATCH = 32;
+let schedulerRequested = false;
+const scheduledJobs = new Set<Component>();
+const schedulerContext = new DisposableContext();
+
+function shiftSet<A>(set: Set<A>): A | undefined {
+    const result = set[Symbol.iterator]().next();
+    if (result.done === true) {
+        return undefined;
+    }
+    const item = result.value;
+    set.delete(item);
+    return item;
+}
+
+function runScheduler() {
+    schedulerContext.dispose();
+    const startTime = performance.now();
+    let count = 0;
+    let item;
+    while ((item = shiftSet(scheduledJobs)) !== undefined) {
+        count += 1;
+        try {
+            (item as unknown as { performUpdate(): void }).performUpdate();
+        } catch (e) {
+            // eslint-disable-next-line no-console
+            console.error("error while updating:", e);
+        }
+        const elapsedTime = performance.now() - startTime;
+        if (elapsedTime > MAX_BATCH_TIME && count >= MIN_JOBS_PER_BATCH) {
+            break;
+        }
+    }
+    if (scheduledJobs.size > 0) {
+        startScheduler();
+    } else {
+        schedulerRequested = false;
+    }
+}
+
+function startScheduler() {
+    schedulerContext.use(animationFrame(runScheduler));
+    schedulerContext.use(timeout(runScheduler, 1000));
+}
+
+export function scheduler(component: Component) {
+    scheduledJobs.add(component);
+    if (!schedulerRequested) {
+        schedulerRequested = true;
+        startScheduler();
+    }
+}

package/src/slot.ts

@@ -0,0 +1,95 @@
+import { DisposableContext } from "@bodil/core/disposable";
+import type { Signal } from "@bodil/signal";
+import type { ReactiveController } from "lit";
+import type { Constructor } from "type-fest";
+
+import type { Component } from "./component";
+import { eventListener } from "./event";
+
+export interface QuerySlotOptions extends AssignedNodesOptions {
+    /** The name of the slot to query, or `undefined` for the default slot. */
+    slot?: string;
+    /** Whether to include all nodes instead of just elements. */
+    nodes?: boolean;
+    /** A CSS selector to filter by. */
+    selector?: string;
+    /** A class constructor to filter by, eg. `instanceOf: HTMLDivElement` */
+    instanceOf?: Constructor<unknown>;
+    /** Create a signal which will update with changes to the slot's contents. */
+    reactive?: boolean;
+}
+
+export function findSlot(root: Component, slot: string | undefined): HTMLSlotElement | null {
+    const slotSelector = `slot${slot !== undefined ? `[name=${slot}]` : ":not([name])"}`;
+    return root.renderRoot.querySelector<HTMLSlotElement>(slotSelector);
+}
+
+export class SlotChangeController implements ReactiveController {
+    private readonly context = new DisposableContext();
+
+    constructor(
+        private readonly host: Component,
+        private readonly slot: string | undefined,
+        private readonly sig: Signal.State<Array<Node>>,
+        private readonly query: (slot: HTMLSlotElement) => Array<Node>,
+    ) {}
+
+    updateSlot(slot: HTMLSlotElement) {
+        this.sig.set(this.query(slot));
+    }
+
+    hostDisconnected() {
+        this.context.dispose();
+    }
+
+    hostConnected() {
+        this.hostUpdated();
+    }
+
+    hostUpdated() {
+        this.context.dispose();
+        const slot = findSlot(this.host, this.slot);
+        if (slot !== null) {
+            this.context.use(eventListener(slot, "slotchange", this.updateSlot.bind(this, slot)));
+            this.updateSlot(slot);
+        }
+    }
+}
+
+const queryCache = new WeakMap<object, Map<string, Map<unknown, unknown>>>();
+
+export function getOrSetQuery<A>(obj: object, options: QuerySlotOptions, create: () => A): A {
+    let stringCache = queryCache.get(obj);
+    if (stringCache === undefined) {
+        stringCache = new Map();
+        queryCache.set(obj, stringCache);
+    }
+    const key = `query:${options.selector ?? ""}:${options.nodes ?? false}:${options.flatten ?? false}`;
+    let constructorCache = stringCache.get(key);
+    if (constructorCache === undefined) {
+        constructorCache = new Map();
+        stringCache.set(key, constructorCache);
+    }
+    let query = constructorCache.get(options.instanceOf);
+    if (query === undefined) {
+        query = create();
+        constructorCache.set(options.instanceOf, query);
+    }
+    return query as A;
+}
+
+const signalCache = new WeakMap<object, Map<unknown, unknown>>();
+
+export function getOrSetSignal<A>(obj: object, query: unknown, create: () => A): A {
+    let innerCache = signalCache.get(obj);
+    if (innerCache === undefined) {
+        innerCache = new Map();
+        signalCache.set(obj, innerCache);
+    }
+    let signal = innerCache.get(query);
+    if (signal === undefined) {
+        signal = create();
+        innerCache.set(query, signal);
+    }
+    return signal as A;
+}

package/src/test-global.ts

@@ -0,0 +1,5 @@
+// Shut up, Wesley! https://github.com/lit/lit/issues/4877
+(globalThis as any).litIssuedWarnings ??= new Set();
+(globalThis as any).litIssuedWarnings.add(
+    "Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.",
+);