@fusion.dev/helix-graph 0.184.0 → 0.186.0

package/dist/isometric/isometric-driver.js

@@ -0,0 +1,591 @@
+import { linkKey } from '../connect-graph/diff.js';
+import { mixRgb } from '../connect-graph/looks.js';
+import { clearOf, ease, gesturesHeld, isLight } from '../overlay/overlay.js';
+import { depthOrder, floorLine, ISOMETRIC, LOWEST_TILT, layered, plate, projectionOf, snapToCells, solid, solidOf, } from './geometry.js';
+const SVG = 'http://www.w3.org/2000/svg';
+const STEP = 250;
+const ZOOM = 1.5;
+const PADDING = 32;
+const LARGEST = 120;
+const SMALLEST = 4;
+const FOOTPRINT = 0.62;
+const MARGIN = 0.55;
+const NAME = 12;
+const GROUP = 10;
+const DRAG = 4;
+const heightOf = (size) => 0.3 + 0.16 * Math.max(size, 0);
+const escaped = (text) => text.replace(/[&<>"']/g, (character) => ({ "'": '&#39;', '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' })[character]);
+const widthOf = (text, size) => text.length * size * 0.56;
+const shaded = (color, darken) => darken <= 0 ? color : mixRgb(color, 'rgb(0, 0, 0)', darken);
+const TURN_PER_PIXEL = 0.5;
+const TILT_PER_PIXEL = 0.35;
+const still = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+const edgeOf = (face) => mixRgb(face, isLight(face) ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)', 0.25);
+export const isometricDriver = (container, options = {}) => {
+    const svg = document.createElementNS(SVG, 'svg');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('data-helix-isometric', '');
+    svg.style.cssText =
+        'display:block;inline-size:100%;block-size:100%;overflow:hidden;user-select:none;-webkit-user-select:none';
+    const layer = (name) => {
+        const group = document.createElementNS(SVG, 'g');
+        group.setAttribute('data-layer', name);
+        svg.append(group);
+        return group;
+    };
+    const plates = layer('plates');
+    const lines = layer('links');
+    const notes = layer('notes');
+    const names = layer('names');
+    names.setAttribute('paint-order', 'stroke');
+    names.setAttribute('stroke-linejoin', 'round');
+    names.setAttribute('pointer-events', 'none');
+    container.append(svg);
+    const nodes = new Map();
+    const links = new Map();
+    let looks;
+    let groups = [];
+    let hovered;
+    let mode = 'free';
+    let view = { scale: 48, x: 0, y: 0 };
+    let camera = {
+        tilt: Math.min(Math.max(options.tilt ?? ISOMETRIC.tilt, LOWEST_TILT), 90),
+        turn: options.turn ?? ISOMETRIC.turn,
+    };
+    let projection = projectionOf(camera);
+    let turning = 0;
+    let framed = false;
+    let measured;
+    let gliding = 0;
+    let press;
+    const held = gesturesHeld(container);
+    const sizeOfBox = () => {
+        const box = svg.getBoundingClientRect();
+        return { height: box.height || 1, width: box.width || 1 };
+    };
+    const groupOf = (id) => groups.find((group) => group.ids.includes(id))?.name;
+    const shapeOf = (id) => solidOf(looks?.node(id).shape ?? options.shape ?? 'square');
+    const tallness = (node) => (options.flat ? 0 : heightOf(node.size));
+    const solids = () => depthOrder(projection, [...nodes.values()].map((node) => ({
+        drawn: solid(projection, shapeOf(node.id), node.x, node.y, FOOTPRINT, tallness(node)),
+        height: tallness(node),
+        node,
+        x: node.x,
+        y: node.y,
+    })));
+    const boundsOf = (ids) => {
+        const chosen = ids ? ids.flatMap((id) => nodes.get(id) ?? []) : [...nodes.values()];
+        if (chosen.length === 0) {
+            return undefined;
+        }
+        const points = [];
+        for (const node of chosen) {
+            const half = FOOTPRINT / 2 + (ids ? 0 : MARGIN);
+            for (const [dx, dy] of [
+                [-1, -1],
+                [1, -1],
+                [1, 1],
+                [-1, 1],
+            ]) {
+                points.push(projection.at(node.x + dx * half, node.y + dy * half), projection.at(node.x + dx * half, node.y + dy * half, tallness(node) + 0.5));
+            }
+        }
+        if (!ids) {
+            for (const group of groups) {
+                const members = group.ids.flatMap((id) => nodes.get(id) ?? []);
+                if (members.length === 0) {
+                    continue;
+                }
+                const reach = MARGIN + FOOTPRINT / 2;
+                const xs = members.map((node) => node.x);
+                const ys = members.map((node) => node.y);
+                for (const x of [Math.min(...xs) - reach, Math.max(...xs) + reach]) {
+                    for (const y of [Math.min(...ys) - reach, Math.max(...ys) + reach]) {
+                        points.push(projection.at(x, y));
+                    }
+                }
+            }
+        }
+        const xs = points.map((point) => point.x);
+        const ys = points.map((point) => point.y);
+        return {
+            bottom: Math.max(...ys),
+            left: Math.min(...xs),
+            right: Math.max(...xs),
+            top: Math.min(...ys),
+        };
+    };
+    const show = () => {
+        const { height, width } = sizeOfBox();
+        const across = width / view.scale;
+        const down = height / view.scale;
+        svg.setAttribute('viewBox', `${view.x - across / 2} ${view.y - down / 2} ${across} ${down}`);
+        drawNames();
+    };
+    const go = (next, animate, whole = false) => {
+        framed = whole;
+        cancelAnimationFrame(gliding);
+        if (!animate) {
+            view = next;
+            show();
+            return;
+        }
+        const from = view;
+        const started = performance.now();
+        const frame = (now) => {
+            const at = Math.min((now - started) / STEP, 1);
+            const eased = ease(at);
+            view = {
+                scale: from.scale * (next.scale / from.scale) ** eased,
+                x: from.x + (next.x - from.x) * eased,
+                y: from.y + (next.y - from.y) * eased,
+            };
+            show();
+            if (at < 1) {
+                gliding = requestAnimationFrame(frame);
+            }
+        };
+        gliding = requestAnimationFrame(frame);
+    };
+    const framing = (box) => {
+        const { height, width } = sizeOfBox();
+        const across = Math.max(box.right - box.left, 0.001);
+        const down = Math.max(box.bottom - box.top, 0.001);
+        const scale = Math.min(Math.max(Math.min((width - PADDING * 2) / across, (height - PADDING * 2) / down), SMALLEST), LARGEST);
+        return { scale, x: (box.left + box.right) / 2, y: (box.top + box.bottom) / 2 };
+    };
+    const drawPlates = () => {
+        const own = new Set(nodes.keys());
+        const marks = [];
+        for (const group of groups) {
+            const places = group.ids.flatMap((id) => {
+                const node = nodes.get(id);
+                return node && own.has(id) && !looks?.node(id).hidden ? [{ x: node.x, y: node.y }] : [];
+            });
+            const drawn = plate(projection, places, MARGIN + FOOTPRINT / 2);
+            if (!drawn) {
+                continue;
+            }
+            const fill = group.faded ? 0.04 : 0.1;
+            const stroke = group.faded ? 0.18 : 0.5;
+            marks.push(`<path d="${drawn.d}" fill="${group.color}" fill-opacity="${fill}" stroke="${group.color}" stroke-opacity="${stroke}" stroke-width="1" vector-effect="non-scaling-stroke"/>`);
+        }
+        plates.innerHTML = marks.join('');
+    };
+    const drawLinks = () => {
+        const rest = [];
+        const raised = [];
+        for (const link of links.values()) {
+            const from = nodes.get(link.source);
+            const to = nodes.get(link.target);
+            if (!from || !to) {
+                continue;
+            }
+            const look = looks?.link(link.source, link.target);
+            if (look?.hidden) {
+                continue;
+            }
+            const color = look?.color ?? 'currentColor';
+            const width = look?.raised ? 2 : 1.25;
+            const dx = to.x - from.x;
+            const dy = to.y - from.y;
+            const length = Math.hypot(dx, dy) || 1;
+            const along = { x: dx / length, y: dy / length };
+            const side = { x: -along.y, y: along.x };
+            const middle = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
+            const tip = projection.at(middle.x + along.x * 0.14, middle.y + along.y * 0.14);
+            const wing = (sign) => projection.at(middle.x - along.x * 0.14 + side.x * 0.12 * sign, middle.y - along.y * 0.14 + side.y * 0.12 * sign);
+            const [one, other] = [wing(1), wing(-1)];
+            (look?.raised ? raised : rest).push(`<path d="${floorLine(projection, from, to)}" fill="none" stroke="${color}" stroke-linecap="round" stroke-width="${width}" vector-effect="non-scaling-stroke"/>` +
+                `<path d="M${one.x} ${one.y}L${tip.x} ${tip.y}L${other.x} ${other.y}Z" fill="${color}"/>`);
+        }
+        lines.innerHTML = rest.join('') + raised.join('');
+    };
+    const drawNotes = () => {
+        const marks = [];
+        for (const { drawn, node } of solids()) {
+            const look = looks?.node(node.id);
+            if (look?.hidden) {
+                continue;
+            }
+            const color = look?.color ?? 'rgb(128, 128, 128)';
+            const faces = drawn.faces
+                .map((face) => {
+                const fill = shaded(color, face.darken);
+                return `<path d="${face.d}" fill="${fill}" stroke="${edgeOf(fill)}" stroke-linejoin="round" stroke-width="1" vector-effect="non-scaling-stroke"/>`;
+            })
+                .join('');
+            const ink = looks?.ink ?? 'currentColor';
+            const ringed = look?.selected ? 2.5 : node.id === hovered || look?.keyed ? 1.5 : 0;
+            const glow = look?.selected
+                ? `<path d="${solid(projection, shapeOf(node.id), node.x, node.y, FOOTPRINT + 0.5, 0).outline}" fill="${color}" fill-opacity="0.22"/>`
+                : '';
+            const ring = ringed > 0
+                ? `<path d="${drawn.outline}" fill="none" stroke="${ink}" stroke-linejoin="round" stroke-width="${ringed}" vector-effect="non-scaling-stroke"/>`
+                : '';
+            marks.push(`<g data-id="${escaped(node.id)}" style="cursor:pointer">${glow}${faces}${ring}</g>`);
+        }
+        notes.innerHTML = marks.join('');
+    };
+    function drawNames() {
+        if (!looks) {
+            names.innerHTML = '';
+            return;
+        }
+        const current = looks;
+        const size = NAME / view.scale;
+        const taken = [];
+        const marks = [];
+        const order = solids()
+            .filter(({ node }) => {
+            const look = current.node(node.id);
+            return !look.hidden && (look.label !== 'never' || node.id === hovered);
+        })
+            .sort((one, other) => {
+            const rank = (id) => {
+                const look = current.node(id);
+                return look.selected || id === hovered ? 2 : look.label === 'always' ? 1 : 0;
+            };
+            return rank(other.node.id) - rank(one.node.id) || other.height - one.height;
+        });
+        for (const { drawn, node } of order) {
+            const look = current.node(node.id);
+            const wide = widthOf(node.label, size);
+            const line = drawn.crown - size * 0.55;
+            const box = {
+                bottom: line + size * 0.3,
+                left: drawn.peak.x - wide / 2,
+                right: drawn.peak.x + wide / 2,
+                top: line - size,
+            };
+            const forced = look.selected || look.label === 'always' || node.id === hovered;
+            if (!forced && !clearOf(box, taken)) {
+                continue;
+            }
+            taken.push(box);
+            const strong = look.selected || look.raised || node.id === hovered;
+            marks.push(`<text fill="${strong ? current.ink : current.quiet}" font-weight="${strong ? 600 : 500}" stroke="${current.ground}" text-anchor="middle" x="${drawn.peak.x}" y="${line}">${escaped(node.label)}</text>`);
+        }
+        if (options.groupLabels !== false) {
+            for (const group of groups) {
+                const places = group.ids.flatMap((id) => {
+                    const node = nodes.get(id);
+                    return node && !current.node(id).hidden ? [{ x: node.x, y: node.y }] : [];
+                });
+                const drawn = plate(projection, places, MARGIN + FOOTPRINT / 2);
+                if (!drawn) {
+                    continue;
+                }
+                const small = GROUP / view.scale;
+                const length = group.name.length * small * 0.74;
+                const end = {
+                    x: drawn.start.x + drawn.along.x * length,
+                    y: drawn.start.y + drawn.along.y * length,
+                };
+                const box = {
+                    bottom: Math.max(drawn.start.y, end.y) + small * 0.6,
+                    left: Math.min(drawn.start.x, end.x),
+                    right: Math.max(drawn.start.x, end.x),
+                    top: Math.min(drawn.start.y, end.y) - small * 0.6,
+                };
+                if (!clearOf(box, taken)) {
+                    continue;
+                }
+                taken.push(box);
+                marks.push(`<text fill="${group.color}" fill-opacity="${group.faded ? 0.4 : 0.95}" font-size="${small}" font-weight="650" letter-spacing="${small * 0.12}" stroke="none" transform="${drawn.transform}">${escaped(group.name.toLocaleUpperCase())}</text>`);
+            }
+        }
+        names.setAttribute('font-family', current.font);
+        names.setAttribute('font-size', String(size));
+        names.setAttribute('stroke-width', String(3 / view.scale));
+        names.innerHTML = marks.join('');
+    }
+    const render = () => {
+        drawPlates();
+        drawLinks();
+        drawNotes();
+        drawNames();
+    };
+    const fitAll = (animate) => {
+        const box = boundsOf();
+        if (box) {
+            go(framing(box), animate, true);
+        }
+    };
+    const showsAll = () => {
+        const box = boundsOf();
+        if (!box) {
+            return false;
+        }
+        const { height, width } = sizeOfBox();
+        const across = width / view.scale / 2;
+        const down = height / view.scale / 2;
+        const slack = 1 / view.scale;
+        return (box.left >= view.x - across - slack &&
+            box.right <= view.x + across + slack &&
+            box.top >= view.y - down - slack &&
+            box.bottom <= view.y + down + slack);
+    };
+    const place = (next, whole) => {
+        const middle = projection.floorAt({ x: view.x, y: view.y });
+        camera = { tilt: Math.min(Math.max(next.tilt, LOWEST_TILT), 90), turn: next.turn };
+        projection = projectionOf(camera);
+        const box = whole ? boundsOf() : undefined;
+        if (box) {
+            view = framing(box);
+            framed = true;
+        }
+        else {
+            const at = projection.at(middle.x, middle.y);
+            view = { ...view, x: at.x, y: at.y };
+        }
+        render();
+        show();
+    };
+    const aim = (next, animate) => {
+        cancelAnimationFrame(turning);
+        const from = camera;
+        const whole = framed || showsAll();
+        const turn = from.turn + ((((next.turn - from.turn) % 360) + 540) % 360) - 180;
+        if (!animate) {
+            place({ tilt: next.tilt, turn }, whole);
+            return;
+        }
+        const started = performance.now();
+        const frame = (now) => {
+            const at = Math.min((now - started) / (STEP * 2), 1);
+            const eased = ease(at);
+            place({
+                tilt: from.tilt + (next.tilt - from.tilt) * eased,
+                turn: from.turn + (turn - from.turn) * eased,
+            }, whole);
+            if (at < 1) {
+                turning = requestAnimationFrame(frame);
+            }
+        };
+        turning = requestAnimationFrame(frame);
+    };
+    let dragging;
+    const onDown = (event) => {
+        if (event.button !== 0 ||
+            mode === 'off' ||
+            (mode === 'cooperative' && event.pointerType === 'touch')) {
+            dragging = undefined;
+            return;
+        }
+        dragging = {
+            id: event.pointerId,
+            moved: false,
+            turning: event.shiftKey,
+            whole: event.shiftKey && (framed || showsAll()),
+            x: event.clientX,
+            y: event.clientY,
+        };
+    };
+    const onMove = (event) => {
+        const target = event.target?.closest?.('[data-id]');
+        const over = target?.getAttribute('data-id') ?? undefined;
+        if (over !== hovered && !dragging?.moved) {
+            hovered = over;
+            drawNotes();
+            drawNames();
+        }
+        if (!dragging || dragging.id !== event.pointerId) {
+            return;
+        }
+        const dx = event.clientX - dragging.x;
+        const dy = event.clientY - dragging.y;
+        if (!dragging.moved && Math.hypot(dx, dy) < DRAG) {
+            return;
+        }
+        if (!dragging.moved) {
+            dragging.moved = true;
+            try {
+                svg.setPointerCapture?.(event.pointerId);
+            }
+            catch {
+            }
+        }
+        dragging.x = event.clientX;
+        dragging.y = event.clientY;
+        cancelAnimationFrame(gliding);
+        if (dragging.turning) {
+            cancelAnimationFrame(turning);
+            place({
+                tilt: camera.tilt + dy * TILT_PER_PIXEL,
+                turn: camera.turn - dx * TURN_PER_PIXEL,
+            }, dragging.whole);
+            return;
+        }
+        framed = false;
+        view = { ...view, x: view.x - dx / view.scale, y: view.y - dy / view.scale };
+        show();
+    };
+    const onUp = (event) => {
+        const was = dragging;
+        dragging = undefined;
+        if (!was || was.moved || was.id !== event.pointerId) {
+            return;
+        }
+        const target = event.target?.closest?.('[data-id]');
+        press?.(target?.getAttribute('data-id') ?? undefined);
+    };
+    const onLeave = () => {
+        if (hovered !== undefined) {
+            hovered = undefined;
+            drawNotes();
+            drawNames();
+        }
+    };
+    const onWheel = (event) => {
+        if (mode === 'off') {
+            return;
+        }
+        event.preventDefault();
+        const box = svg.getBoundingClientRect();
+        const px = event.clientX - box.left - box.width / 2;
+        const py = event.clientY - box.top - box.height / 2;
+        const factor = Math.exp(-event.deltaY * 0.0015);
+        const scale = Math.min(Math.max(view.scale * factor, SMALLEST), LARGEST);
+        const at = { x: view.x + px / view.scale, y: view.y + py / view.scale };
+        cancelAnimationFrame(gliding);
+        framed = false;
+        view = { scale, x: at.x - px / scale, y: at.y - py / scale };
+        show();
+    };
+    svg.addEventListener('pointerdown', onDown);
+    svg.addEventListener('pointermove', onMove);
+    svg.addEventListener('pointerup', onUp);
+    svg.addEventListener('pointerleave', onLeave);
+    svg.addEventListener('wheel', onWheel, { passive: false });
+    const resized = () => {
+        const next = sizeOfBox();
+        const before = measured;
+        measured = next;
+        if (framed) {
+            fitAll(false);
+            return;
+        }
+        if (before) {
+            const ratio = Math.min(next.width, next.height) / Math.min(before.width, before.height);
+            view = { ...view, scale: Math.min(Math.max(view.scale * ratio, SMALLEST), LARGEST) };
+        }
+        show();
+    };
+    const sized = typeof ResizeObserver === 'function' ? new ResizeObserver(resized) : undefined;
+    sized?.observe(svg);
+    const set = (list) => {
+        for (const node of list) {
+            nodes.set(node.id, node);
+        }
+    };
+    return {
+        camera: () => ({ tilt: camera.tilt, turn: ((camera.turn % 360) + 360) % 360 }),
+        center: (id, animate) => {
+            const node = nodes.get(id);
+            if (node) {
+                const peak = projection.at(node.x, node.y, tallness(node) / 2);
+                go({ ...view, x: peak.x, y: peak.y }, animate);
+            }
+        },
+        draw: (graph) => {
+            nodes.clear();
+            links.clear();
+            set(graph.nodes);
+            for (const link of graph.links) {
+                links.set(linkKey(link), link);
+            }
+            render();
+            fitAll(false);
+        },
+        fit: (ids, animate) => {
+            const box = boundsOf(ids);
+            if (box) {
+                const next = framing(box);
+                go({ ...next, scale: Math.min(next.scale, 72) }, animate);
+            }
+        },
+        focusTarget: () => null,
+        gestures: (next) => {
+            mode = next;
+            held.set(next);
+        },
+        groups: (next) => {
+            groups = next;
+            drawPlates();
+            if (framed) {
+                fitAll(false);
+            }
+            else {
+                drawNames();
+            }
+        },
+        look: (next) => {
+            looks = next;
+            render();
+        },
+        onPress: (listener) => {
+            press = listener;
+            return () => {
+                press = undefined;
+            };
+        },
+        panBy: (x, y, animate) => {
+            go({ ...view, x: view.x + x / view.scale, y: view.y + y / view.scale }, animate);
+        },
+        settle: (unplaced, placed) => {
+            const seeded = new Map([...nodes].map(([id, node]) => [id, { x: node.x, y: node.y }]));
+            const cells = unplaced.size === nodes.size
+                ? layered([...nodes.keys()].map((id) => ({ group: groupOf(id), id })), [...links.values()])
+                : snapToCells(seeded, unplaced);
+            for (const [id, cell] of cells) {
+                const node = nodes.get(id);
+                if (node) {
+                    nodes.set(id, { ...node, x: cell.x, y: cell.y });
+                }
+            }
+            render();
+            fitAll(false);
+            const told = setTimeout(() => {
+                placed(new Map([...nodes].map(([id, node]) => [id, { x: node.x, y: node.y }])));
+            }, 0);
+            return () => clearTimeout(told);
+        },
+        stop: () => {
+            cancelAnimationFrame(gliding);
+            cancelAnimationFrame(turning);
+            sized?.disconnect();
+            held.stop();
+            svg.removeEventListener('pointerdown', onDown);
+            svg.removeEventListener('pointermove', onMove);
+            svg.removeEventListener('pointerup', onUp);
+            svg.removeEventListener('pointerleave', onLeave);
+            svg.removeEventListener('wheel', onWheel);
+            svg.remove();
+        },
+        turnBy: (degrees, animate = !still()) => {
+            aim({ tilt: camera.tilt, turn: camera.turn + degrees }, animate);
+        },
+        turnTo: (next, animate = !still()) => {
+            aim({ tilt: next.tilt ?? camera.tilt, turn: next.turn ?? camera.turn }, animate);
+        },
+        update: (changes) => {
+            for (const id of changes.removeNodes) {
+                nodes.delete(id);
+            }
+            for (const link of changes.removeLinks) {
+                links.delete(linkKey(link));
+            }
+            set(changes.addNodes);
+            set(changes.changeNodes);
+            for (const link of changes.addLinks) {
+                links.set(linkKey(link), link);
+            }
+            render();
+        },
+        zoomBy: (direction, animate) => {
+            const scale = Math.min(Math.max(view.scale * (direction > 0 ? ZOOM : 1 / ZOOM), SMALLEST), LARGEST);
+            go({ ...view, scale }, animate);
+        },
+    };
+};

package/dist/three/budget.d.ts

@@ -0,0 +1,49 @@
+/**
+ * How many WebGL contexts the three.js driver keeps live on one page.
+ *
+ * **A browser holds only so many, and drops the oldest without asking**:
+ * Chrome about sixteen on a desktop and fewer on a phone. A page of 3D panels
+ * past that lost a graph it could not get back, and the maps, Aura, and
+ * Strands on the same page count against the same limit. Six leaves them
+ * room.
+ */
+export declare const LIVE = 6;
+/** One drawing that holds a context: it gives the context back, and takes it again. */
+export interface Holder {
+    release(): void;
+    restore(): void;
+}
+/**
+ * Keeps the contexts a page's drawings hold under `cap`.
+ *
+ * **A drawing near the screen always keeps its context.** Past the cap, the
+ * drawings off screen give theirs back, the one away longest first, and each
+ * takes its context again as it comes near. So a page of any number of
+ * graphs holds as many contexts as it shows at once, and never more than
+ * `cap` beyond that.
+ */
+export declare const contextBudget: (cap?: number) => {
+    /** A drawing far from the screen, from `now`. */
+    far(holder: Holder, now: number): void;
+    /** How many drawings hold a context now. */
+    readonly holding: number;
+    /** A new drawing, which made a context to draw with. */
+    join(holder: Holder): void;
+    /** A drawing that ended and freed its context itself. */
+    leave(holder: Holder): void;
+    /** A drawing near the screen, which takes its context again where it gave it back. */
+    near(holder: Holder): void;
+};
+/** The budget every three.js driver on the page shares. */
+export declare const pageBudget: {
+    /** A drawing far from the screen, from `now`. */
+    far(holder: Holder, now: number): void;
+    /** How many drawings hold a context now. */
+    readonly holding: number;
+    /** A new drawing, which made a context to draw with. */
+    join(holder: Holder): void;
+    /** A drawing that ended and freed its context itself. */
+    leave(holder: Holder): void;
+    /** A drawing near the screen, which takes its context again where it gave it back. */
+    near(holder: Holder): void;
+};

package/dist/three/budget.js

@@ -0,0 +1,43 @@
+export const LIVE = 6;
+export const contextBudget = (cap = LIVE) => {
+    const holding = new Set();
+    const away = new Map();
+    const balance = () => {
+        const longest = [...away]
+            .filter(([holder]) => holding.has(holder))
+            .sort((one, other) => one[1] - other[1]);
+        for (const [holder] of longest) {
+            if (holding.size <= cap) {
+                return;
+            }
+            holding.delete(holder);
+            holder.release();
+        }
+    };
+    return {
+        far(holder, now) {
+            away.set(holder, now);
+            balance();
+        },
+        get holding() {
+            return holding.size;
+        },
+        join(holder) {
+            holding.add(holder);
+            balance();
+        },
+        leave(holder) {
+            holding.delete(holder);
+            away.delete(holder);
+        },
+        near(holder) {
+            away.delete(holder);
+            if (!holding.has(holder)) {
+                holding.add(holder);
+                holder.restore();
+            }
+            balance();
+        },
+    };
+};
+export const pageBudget = contextBudget();