flowfig 0.6.0 → 0.8.0

package/dist/geometry.js

@@ -1,27 +1,14 @@
 import { STUB } from './model.js';
-/** The least gap between a label pill and a lane border. */
 const LABEL_CLEAR = 4;
 const cx = (r) => r.x + r.w / 2;
 const cy = (r) => r.y + r.h / 2;
-/** A point on the cubic Bézier at `t`, as `check` samples an edge. */
 const bezier = ([p0, p1, p2, p3], t) => {
     const u = 1 - t;
     const [a, b, c, d] = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];
     return { x: a * p0.x + b * p1.x + c * p2.x + d * p3.x, y: a * p0.y + b * p1.y + c * p2.y + d * p3.y };
 };
-// Turns edges between measured boxes into curved SVG paths.
-// Boxes stacked on top of each other connect bottom->top, otherwise side->side.
-// Several edges leaving the same side of a box are spread out so they don't overlap,
-// except on `tips` boxes (diamonds), where they all meet at the point.
-// `elbow` draws a right-angle path, from a right end to a left end: its four curve points are the corners.
-// `sides` fixes the two sides an edge uses (a timeline uses right to left).
-// `around` makes an edge leave and enter from the top or bottom, arcing over whatever sits between.
-// `bands` (with `stub`) are the lane bands of the source and of the target: each pill stays inside its band, 4 px clear of the border.
-// `labelW` is the width of an edge's label pill: a stub pill keeps clear of it.
-// `stub` (wrapped lanes: the source pill width, the target pill width, and the width of a shorter source pill) draws a short stub from the source to a pill, and from a second pill into the target.
-export function route(edges, rects, tips = new Set(), avoid = [], // what an elbow's vertical run and a stub pill must not cross (the timeline's outside labels; the boxes and gutters of lanes)
-area, // where a stub pill may sit: the lanes right of the gutter
-lanes) {
+/** Routes edges between measured boxes as curved SVG paths. `elbow` draws right-angle paths; `stub` splits a cross-lane edge in two. */
+export function route(edges, rects, tips = new Set(), avoid = [], area, lanes) {
     const picks = [];
     for (const e of edges) {
         const a = rects[e.from], b = rects[e.to];
@@ -45,7 +32,6 @@ lanes) {
                             : ['l', 'r'];
         picks.push({ ...e, a, b, sa, sb });
     }
-    // For every (box, side), list the edge ends that sit there, sorted by where the other end is.
     const ends = new Map();
     for (const pick of picks) {
         for (const start of [true, false]) {
@@ -64,7 +50,7 @@ lanes) {
             const r = x.start ? x.pick.b : x.pick.a;
             return horiz ? cx(r) : cy(r);
         };
-        list.sort((p, q) => other(p) - other(q)); // stable: ties keep declaration order
+        list.sort((p, q) => other(p) - other(q));
         list.forEach((x, i) => {
             const r = x.start ? x.pick.a : x.pick.b;
             const f = tip ? 0.5 : (i + 1) / (list.length + 1);
@@ -78,16 +64,12 @@ lanes) {
             anchor.set(x.pick.id + (x.start ? ':s' : ':e'), pt);
         });
     }
-    // The four points travel with the path string: `flowfig check` samples the curve, and nothing has to parse `d`.
     const drawn = (id, curve, mid) => {
         const [s, c1, c2, e] = curve;
         return { id, d: `M ${s.x} ${s.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${e.x} ${e.y}`, mid, curve };
     };
-    // Stub pills are placed after the other edges. Each pill keeps clear of `avoid`, of the edge labels, of the pills and stubs
-    // before it, and of every edge path (sampled as `check` samples it).
     const pills = [];
     const paths = [];
-    // The same samples as segments: a stub line must not cross one.
     const runs = [];
     const track = (pts) => {
         paths.push(...pts);
@@ -101,11 +83,6 @@ lanes) {
     const one = (p) => {
         const s = anchor.get(p.id + ':s'), e = anchor.get(p.id + ':e');
         if (p.stub) {
-            // The source pill goes right of the source and the target pill left of the target, at the nearest clear place: it slides
-            // away from the box in 8 px steps, and up or down inside the band in 4 px steps. The stub then runs on a slant. The last
-            // places are below and above the box. A place is clear if the pill and its stub keep clear of everything, and the pill stays
-            // inside its band. If no place is clear, the source pill tries its shorter text. If no place is clear then, the first place
-            // stays and `check` reports it.
             const [ow, iw, sw] = p.stub;
             const [sb, tb] = p.bands ?? [];
             const rows = (box, y0, band) => {
@@ -114,14 +91,11 @@ lanes) {
                     : [box.y + box.h + 2, box.y - 20];
                 return [y0, ...ys.filter((y) => y !== y0)];
             };
-            // A place and its stub. Beside the box, the stub runs from the box side to the near end of the pill. Under or over the box,
-            // it runs straight down or up between the box and the pill. `dir` is 1 for the source (box to pill), -1 for the target.
             const place = (box, from, dir, r, side, tip) => {
                 let a, b;
                 if (side)
                     [a, b] = [from, { x: dir > 0 ? r.x : r.x + r.w, y: r.y + 9 }];
                 else {
-                    // A diamond has its point at the middle: the stub meets the point.
                     const x = tip ? cx(box) : Math.min(Math.max(r.x + r.w / 2, box.x + 8, r.x + 8), box.x + box.w - 8, r.x + r.w - 8);
                     const under = r.y >= box.y + box.h;
                     [a, b] = [
@@ -131,22 +105,49 @@ lanes) {
                 }
                 return dir > 0 ? [r, a, b] : [r, b, a];
             };
-            const beside = (w, box, from, dir, band) => {
+            function* beside(w, box, from, dir, band) {
                 const tip = tips.has(dir > 0 ? p.from : p.to);
-                const out = [];
-                for (let dx = STUB - 8 * Math.ceil((box.w + w) / 8); dx <= STUB + 240; dx += 8)
-                    for (const y of rows(box, from.y - 9, band)) {
-                        // Closer than STUB to the box side, a pill sits under or over the box, with room for the stub.
-                        const x = dir > 0 ? from.x + dx : from.x - dx - w;
-                        if (dx < STUB && !(y >= box.y + box.h + STUB / 2 || y + 18 <= box.y - STUB / 2))
-                            continue;
-                        if (dx < STUB && tip && !(x + 8 <= cx(box) && cx(box) <= x + w - 8))
-                            continue;
-                        out.push([...place(box, from, dir, { x, y, w, h: 18 }, dx >= STUB, tip), Math.abs(dx - STUB) + Math.abs(y + 9 - from.y)]);
+                const ys = rows(box, from.y - 9, band)
+                    .map((y, i) => ({ y, d: Math.abs(y + 9 - from.y), i }))
+                    .sort((m, q) => m.d - q.d || m.i - q.i);
+                const heap = [];
+                for (let dx = STUB - 8 * Math.ceil((box.w + w) / 8); dx <= STUB + 240; dx += 8) {
+                    const x = dir > 0 ? from.x + dx : from.x - dx - w;
+                    if (dx < STUB && tip && !(x + 8 <= cx(box) && cx(box) <= x + w - 8))
+                        continue;
+                    if (ys.length)
+                        heap.push({ dx, x, k: 0, key: Math.abs(dx - STUB) + ys[0].d, i: heap.length });
+                }
+                // Equal keys must keep the dx order, then the row order, or a pill moves.
+                const less = (m, q) => m.key < q.key || (m.key === q.key && m.i < q.i);
+                heap.sort((m, q) => m.key - q.key || m.i - q.i);
+                while (heap.length) {
+                    const h = heap[0];
+                    const { y } = ys[h.k++];
+                    if (h.k < ys.length)
+                        h.key = Math.abs(h.dx - STUB) + ys[h.k].d;
+                    else {
+                        const last = heap.pop();
+                        if (heap.length)
+                            heap[0] = last;
                     }
-                return out.sort((m, q) => m[3] - q[3]).map(([r, a, b]) => [r, a, b]);
-            };
-            // A diamond with no room beside its point: the stub leaves the side point straight down or up, to a pill that spans its x.
+                    for (let i = 0;;) {
+                        const l = 2 * i + 1;
+                        let m = i;
+                        if (l < heap.length && less(heap[l], heap[m]))
+                            m = l;
+                        if (l + 1 < heap.length && less(heap[l + 1], heap[m]))
+                            m = l + 1;
+                        if (m === i)
+                            break;
+                        [heap[i], heap[m]] = [heap[m], heap[i]];
+                        i = m;
+                    }
+                    if (h.dx < STUB && !(y >= box.y + box.h + STUB / 2 || y + 18 <= box.y - STUB / 2))
+                        continue;
+                    yield place(box, from, dir, { x: h.x, y, w, h: 18 }, h.dx >= STUB, tip);
+                }
+            }
             const along = (w, box, from, dir, band) => {
                 if (!tips.has(dir > 0 ? p.from : p.to))
                     return [];
@@ -162,49 +163,54 @@ lanes) {
                     }
                 return out.sort((m, q) => m[3] - q[3]).map(([r, a, b]) => [r, a, b]);
             };
-            const outs = (w) => [
-                ...beside(w, p.a, s, 1, sb),
-                [
+            function* outs(w) {
+                yield* beside(w, p.a, s, 1, sb);
+                yield [
                     { x: cx(p.a) - w / 2, y: p.a.y + p.a.h + STUB, w, h: 18 },
                     { x: cx(p.a), y: p.a.y + p.a.h },
                     { x: cx(p.a), y: p.a.y + p.a.h + STUB },
-                ],
-                [
+                ];
+                yield [
                     { x: cx(p.a) - w / 2, y: p.a.y - STUB - 18, w, h: 18 },
                     { x: cx(p.a), y: p.a.y },
                     { x: cx(p.a), y: p.a.y - STUB },
-                ],
-                ...along(w, p.a, s, 1, sb),
-            ];
-            const ins = [
-                ...beside(iw, p.b, e, -1, tb),
-                [
+                ];
+                yield* along(w, p.a, s, 1, sb);
+            }
+            function* ins() {
+                yield* beside(iw, p.b, e, -1, tb);
+                yield [
                     { x: cx(p.b) - iw / 2, y: p.b.y - STUB - 18, w: iw, h: 18 },
                     { x: cx(p.b), y: p.b.y - STUB },
                     { x: cx(p.b), y: p.b.y },
-                ],
-                [
+                ];
+                yield [
                     { x: cx(p.b) - iw / 2, y: p.b.y + p.b.h + STUB, w: iw, h: 18 },
                     { x: cx(p.b), y: p.b.y + p.b.h + STUB },
                     { x: cx(p.b), y: p.b.y + p.b.h },
-                ],
-                ...along(iw, p.b, e, -1, tb),
-            ];
+                ];
+                yield* along(iw, p.b, e, -1, tb);
+            }
             const seg = (a, b) => Array.from({ length: 9 }, (_, i) => ({ x: a.x + ((b.x - a.x) * i) / 8, y: a.y + ((b.y - a.y) * i) / 8 }));
-            // A stub must not run through a box other than its own, nor through a pill or a label, nor cross an edge path.
             const free = (a, b, own) => seg(a, b).every((q) => ![...avoid, ...pills].some((r) => r !== own && q.x > r.x + 2 && q.x < r.x + r.w - 2 && q.y > r.y + 2 && q.y < r.y + r.h - 2));
             const whole = (a, b) => !runs.some(([c, d]) => crosses(a, b, c, d));
             const fits = (own, band, strict) => ([r, a, b]) => clear(r, band) && free(a, b, own) && (!strict || whole(a, b));
-            // The first place whose stub crosses no edge path. If none, the first place that clears everything else: in a dense
-            // figure no place may avoid every edge, and `check` then warns about the crossing.
-            const first = (own, band, lists) => [true, false].flatMap((strict) => lists.map((l, i) => [l.find(fits(own, band, strict)), i, !strict])).find(([x]) => x);
-            const hit = first(p.a, sb, [outs(ow), ...(sw == null ? [] : [outs(sw)])]);
+            const first = (own, band, lists) => {
+                for (const strict of [true, false]) {
+                    const ok = fits(own, band, strict);
+                    for (const [i, list] of lists.entries())
+                        for (const c of list())
+                            if (ok(c))
+                                return [c, i, !strict];
+                }
+            };
+            const hit = first(p.a, sb, [() => outs(ow), ...(sw == null ? [] : [() => outs(sw)])]);
             const cut = hit?.[1] === 1;
-            const [po, o1, o2] = hit?.[0] ?? outs(ow)[0];
+            const [po, o1, o2] = hit?.[0] ?? outs(ow).next().value;
             pills.push(po);
             track(seg(o1, o2));
             const hit2 = first(p.b, tb, [ins]);
-            const [pi, i1, i2] = hit2?.[0] ?? ins[0];
+            const [pi, i1, i2] = hit2?.[0] ?? ins().next().value;
             pills.push(pi);
             track(seg(i1, i2));
             const line = (a, b) => `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
@@ -227,10 +233,7 @@ lanes) {
             };
         }
         if (p.elbow) {
-            // Under 16 px of gap, the elbow detours: out 8 px past the start, back to 8 px before the end, then forward into the target.
-            // A gap of 0 px or less takes the same detour.
             if (e.x - s.x < 16 && s.y === e.y) {
-                // One row: a straight line, since a detour would only double back.
                 return { id: p.id, d: `M ${s.x} ${s.y} H ${e.x}`, mid: { x: (s.x + e.x) / 2, y: s.y }, curve: [s, s, e, e], elbow: [s, e] };
             }
             if (e.x - s.x < 16) {
@@ -243,26 +246,20 @@ lanes) {
                     elbow: [s, { x: mx, y: s.y }, { x: mx, y: my }, { x: ex, y: my }, { x: ex, y: e.y }, e],
                 };
             }
-            // Over 16 px, the vertical run tries the midpoint, 8 px before the end, 8 px after the start, then any x in the gap.
-            // A vertical run keeps clear of every label and box; a horizontal run keeps clear of every box but the two ends.
             const own = (r) => [p.a, p.b].some((q) => q.x === r.x && q.y === r.y && q.w === r.w && q.h === r.h);
             const all = avoid.filter((r) => !own(r));
             const boxes = all.filter((r) => r.box);
-            // `m` is the margin: 2 px in the gap, 8 px on a detour, so a detour does not run along a box side.
             const vClear = (x, ya, yb, m = 2) => !all.some((r) => x > r.x - m && x < r.x + r.w + m && Math.max(ya, yb) > r.y && Math.min(ya, yb) < r.y + r.h);
             const hClear = (y, xa, xb, list = boxes, m = 2) => !list.some((r) => y > r.y - m && y < r.y + r.h + m && Math.max(xa, xb) > r.x && Math.min(xa, xb) < r.x + r.w);
             const mid = (s.x + e.x) / 2;
             const gap = Array.from({ length: Math.floor((e.x - s.x - 16) / 4) + 1 }, (_, i) => s.x + 8 + i * 4).sort((u, w) => Math.abs(u - mid) - Math.abs(w - mid));
             const mx = [mid, e.x - 8, s.x + 8, ...gap].find((x) => vClear(x, s.y, e.y) && hClear(s.y, s.x, x) && hClear(e.y, x, e.x));
             if (mx == null && boxes.length) {
-                // No x in the gap is clear: the elbow goes around. It runs right past the boxes in its way, along a clear row, back to
-                // a clear x at or before 8 px before the target, then down or up and forward into the target. The shortest clear
-                // detour wins; ties take the row nearest the middle.
                 const right = Math.max(...boxes.map((r) => r.x + r.w)) + 12;
                 const left = Math.min(...boxes.map((r) => r.x));
                 const [top, bottom] = [Math.min(...boxes.map((r) => r.y)) - 12, Math.max(...boxes.map((r) => r.y + r.h)) + 12];
                 let best;
-                // ponytail: a grid search in 4 px steps, about 10^5 tries for a figure the size of the roadmap.
+                // ponytail: grid search in 4 px steps, about 10^5 tries on the roadmap.
                 for (let x = s.x + 8; x <= right; x += 4) {
                     if (!hClear(s.y, s.x, x))
                         continue;
@@ -290,7 +287,6 @@ lanes) {
                     };
                 }
             }
-            // If no path is clear, the midpoint stays and `check` reports the crossing.
             const x = mx ?? mid;
             const c1 = { x, y: s.y }, c2 = { x, y: e.y };
             return {
@@ -302,7 +298,7 @@ lanes) {
             };
         }
         if (p.around) {
-            // ponytail: arcs 50px past the two ends' boxes; a taller box in between can still be crossed.
+            // ponytail: arcs 50 px past the box ends; a taller box between can be crossed.
             const y = p.around === 'above' ? Math.min(p.a.y, p.b.y) - 50 : Math.max(p.a.y + p.a.h, p.b.y + p.b.h) + 50;
             return drawn(p.id, [s, { x: s.x, y }, { x: e.x, y }, e], { x: (s.x + e.x) / 2, y: (s.y + 6 * y + e.y) / 8 });
         }
@@ -330,9 +326,6 @@ lanes) {
             done.set(p, one(p));
     return picks.map((p) => done.get(p));
 }
-/** The point of the path nearest its middle where a label pill of width `w` sits inside one band, LABEL_CLEAR from the border, clear of the boxes
- * and the earlier pills. If a short run leaves no such point, the pill keeps the x of a path point and moves up or down into the nearest
- * band, still on the path. If that fails too, the middle. Both renderers route through this, so they place the label alike. */
 function labelInBand(r, w, { bands, boxes }, pills) {
     const hit = (a, b, m) => a.x < b.x + b.w + m && b.x < a.x + a.w + m && a.y < b.y + b.h + m && b.y < a.y + a.h + m;
     const ts = Array.from({ length: 65 }, (_, i) => i / 64).sort((a, b) => Math.abs(a - 0.5) - Math.abs(b - 0.5));
@@ -356,7 +349,7 @@ function labelInBand(r, w, { bands, boxes }, pills) {
         }
     return r.mid;
 }
-/** True if the segment a-b crosses the segment c-d. The ends of a-b are trimmed by 1.5 px, so a touch at a box side does not count. */
+/** True if segment a-b crosses c-d. The ends of a-b are trimmed by 1.5 px. */
 export function crosses(a, b, c, d) {
     const len = Math.hypot(b.x - a.x, b.y - a.y);
     if (len < 4)

package/dist/gif.d.ts

@@ -1,6 +1,5 @@
 import type { Image } from './png.ts';
-/** One frame: `load` returns the pixels (called twice per frame); `delay` is in centiseconds.
- * `same` says the pixels equal the frame before: the encoder then never calls `load`. */
+/** One frame. `load` returns the pixels, `delay` is in cs, `same` skips `load`. */
 export type GifFrame = {
     load: () => Image;
     delay: number;

package/dist/gif.js

@@ -1,12 +1,41 @@
+import { endianness } from 'node:os';
 /** The delay of each of `count` frames in cs. The sum is round(count * 100 / fps). */
 export function delays(count, fps) {
-    // Each delay is a whole cs: the rounding error moves between frames and does not add up.
     return Array.from({ length: count }, (_, i) => Math.round(((i + 1) * 100) / fps) - Math.round((i * 100) / fps));
 }
-// A color bin: 5 bits per channel, 32768 bins.
 const binOf = (rgb) => ((rgb >> 9) & 0x7c00) | ((rgb >> 6) & 0x3e0) | ((rgb >> 3) & 0x1f);
+// Little-endian: a pixel word is A B G R, so this swaps R and B.
+const rgbOf = (v) => ((v & 255) << 16) | (v & 0xff00) | ((v >> 16) & 255);
+const CROP_LIMIT = 64 << 20;
+function changedBox(a, b, width, height) {
+    let x0 = width, x1 = -1, y0 = -1, y1 = -1;
+    for (let y = 0; y < height; y++) {
+        const o = y * width;
+        let lo = 0;
+        while (lo < width && a[o + lo] === b[o + lo])
+            lo++;
+        if (lo === width)
+            continue;
+        let hi = width - 1;
+        while (a[o + hi] === b[o + hi])
+            hi--;
+        if (lo < x0)
+            x0 = lo;
+        if (hi > x1)
+            x1 = hi;
+        if (y0 < 0)
+            y0 = y;
+        y1 = y;
+    }
+    return y1 < 0 ? null : [x0, y0, x1, y1];
+}
 const channel = (bin, c) => (bin >> (10 - 5 * c)) & 31;
-/** Median cut: split the box with the widest channel range at its weighted median, until 256 boxes or one bin per box. */
+function cropOf(px, [x0, y0, x1, y1], width) {
+    const w = x1 - x0 + 1, out = new Uint32Array(w * (y1 - y0 + 1));
+    for (let y = y0; y <= y1; y++)
+        out.set(px.subarray(y * width + x0, y * width + x1 + 1), (y - y0) * w);
+    return out;
+}
 function medianCut(bins, counts) {
     const boxes = [bins];
     while (boxes.length < 256) {
@@ -36,7 +65,6 @@ function medianCut(bins, counts) {
     }
     return boxes;
 }
-/** The palette: the exact colors if there are 256 or fewer, else median cut over the bins. No dither. */
 function palette(exact, counts, sums) {
     const colors = new Uint8Array(768);
     if (exact) {
@@ -59,7 +87,6 @@ function palette(exact, counts, sums) {
         }
         colors.set([Math.round(r / n), Math.round(g / n), Math.round(b / n)], k * 3);
     });
-    // Each bin maps to the palette color nearest to the mean color of the bin.
     const table = new Uint8Array(32768);
     for (const x of bins) {
         const r = sums[x * 3] / counts[x], g = sums[x * 3 + 1] / counts[x], b = sums[x * 3 + 2] / counts[x];
@@ -73,7 +100,6 @@ function palette(exact, counts, sums) {
     }
     return { colors, index: (rgb) => table[binOf(rgb)] };
 }
-/** GIF LZW: minimum code size 8, a clear code first, codes up to 12 bits, data in sub-blocks of 255 bytes or fewer. */
 function lzw(px, width, rect, byte) {
     const [x0, y0, x1, y1] = rect;
     const CLEAR = 256, END = 257;
@@ -115,7 +141,7 @@ function lzw(px, width, rect, byte) {
                 [next, size] = [258, 9];
             }
             else {
-                // The decoder runs one code behind: grow the size when the new code no longer fits.
+                // The decoder runs one code behind: grow the size one code early.
                 if (next >= 1 << size)
                     size++;
                 dict.set((prefix << 8) | k, next++);
@@ -134,17 +160,19 @@ function lzw(px, width, rect, byte) {
     byte(0);
 }
 /** An animated GIF that loops forever. All frames have the size of the first frame. */
-// It yields to the event loop between frames, so a signal handler can run while the encode goes on.
+// It yields between frames so a signal handler can run.
 export async function encodeGif(frames) {
     if (!frames.length)
         throw new Error('a GIF needs at least one frame');
-    // Pass 1: count the colors of all frames.
+    if (endianness() !== 'LE')
+        throw new Error('flowfig gif needs a little-endian CPU');
     const counts = new Uint32Array(32768), sums = new Float64Array(32768 * 3);
     let exact = new Map(), width = 0, height = 0;
+    let before = null, kept = 0;
+    const crops = [];
     for (let f = 0; f < frames.length; f++) {
         if (frames[f].same && f > 0)
             continue;
-        // A run of equal frames counts once, with the weight of the run.
         let weight = 1;
         while (f + weight < frames.length && frames[f + weight].same)
             weight++;
@@ -154,20 +182,39 @@ export async function encodeGif(frames) {
             [width, height] = [w, h];
         else if (w !== width || h !== height)
             throw new Error(`frame ${f + 1} is ${w} x ${h}; the first frame is ${width} x ${height}`);
-        let last = -1, bin = 0;
-        for (let i = 0; i < data.length; i += 4) {
-            const rgb = (data[i] << 16) | (data[i + 1] << 8) | data[i + 2];
-            if (rgb !== last) {
-                last = rgb;
-                bin = binOf(rgb);
-                if (exact && !exact.has(rgb))
-                    exact = exact.size < 256 ? exact.set(rgb, exact.size) : null;
+        const px = new Uint32Array(data.buffer, data.byteOffset, data.length >> 2);
+        let last = px[0] & 0xffffff, run = 0;
+        const add = (v, n) => {
+            const rgb = rgbOf(v), bin = binOf(rgb), k = n * weight;
+            if (exact && !exact.has(rgb))
+                exact = exact.size < 256 ? exact.set(rgb, exact.size) : null;
+            counts[bin] += k;
+            sums[bin * 3] += (rgb >> 16) * k;
+            sums[bin * 3 + 1] += ((rgb >> 8) & 255) * k;
+            sums[bin * 3 + 2] += (rgb & 255) * k;
+        };
+        for (let i = 0; i < px.length; i++) {
+            const v = px[i] & 0xffffff;
+            if (v === last)
+                run++;
+            else {
+                add(last, run);
+                [last, run] = [v, 1];
             }
-            counts[bin] += weight;
-            sums[bin * 3] += data[i] * weight;
-            sums[bin * 3 + 1] += data[i + 1] * weight;
-            sums[bin * 3 + 2] += data[i + 2] * weight;
         }
+        add(last, run);
+        const box = before ? changedBox(px, before, width, height) : [0, 0, width - 1, height - 1];
+        if (!box)
+            crops[f] = null;
+        else {
+            const [x0, y0, x1, y1] = box;
+            const size = (x1 - x0 + 1) * (y1 - y0 + 1) * 4;
+            if (kept + size <= CROP_LIMIT) {
+                kept += size;
+                crops[f] = { x0, y0, x1, y1, px: before ? cropOf(px, box, width) : px };
+            }
+        }
+        before = px;
     }
     const { colors, index } = palette(exact, counts, sums);
     let buf = new Uint8Array(1 << 20), len = 0;
@@ -196,20 +243,34 @@ export async function encodeGif(frames) {
     bytes(0x21, 0xff, 11);
     text('NETSCAPE2.0');
     bytes(3, 1, 0, 0, 0); // loop count 0: loop forever
-    // Pass 2: each frame as palette indices. A later frame sends only the rectangle that changed.
     let prev = null;
-    for (const frame of frames) {
+    for (let i = 0; i < frames.length; i++) {
+        const frame = frames[i], crop = crops[i];
         await new Promise(setImmediate);
         let cur = prev;
-        if (!(frame.same && prev)) {
-            const { data } = frame.load();
+        if (crop === null && prev)
+            cur = prev;
+        else if (!(frame.same && prev)) {
             cur = new Uint8Array(width * height);
             let last = -1, k = 0;
-            for (let p = 0, i = 0; p < cur.length; p++, i += 4) {
-                const rgb = (data[i] << 16) | (data[i + 1] << 8) | data[i + 2];
-                if (rgb !== last)
-                    [last, k] = [rgb, index(rgb)];
+            const put = (p, v) => {
+                v &= 0xffffff;
+                if (v !== last)
+                    [last, k] = [v, index(rgbOf(v))];
                 cur[p] = k;
+            };
+            if (crop) {
+                if (prev)
+                    cur.set(prev);
+                for (let y = crop.y0, q = 0; y <= crop.y1; y++)
+                    for (let x = crop.x0; x <= crop.x1; x++)
+                        put(y * width + x, crop.px[q++]);
+            }
+            else {
+                const { data } = frame.load();
+                const px = new Uint32Array(data.buffer, data.byteOffset, data.length >> 2);
+                for (let p = 0; p < cur.length; p++)
+                    put(p, px[p]);
             }
         }
         let rect = [0, 0, width - 1, height - 1];
@@ -217,19 +278,31 @@ export async function encodeGif(frames) {
             rect = [0, 0, -1, -1];
         else if (prev) {
             rect = [width, height, -1, -1];
-            for (let y = 0, p = 0; y < height; y++)
-                for (let x = 0; x < width; x++, p++)
-                    if (cur[p] !== prev[p]) {
-                        if (x < rect[0])
-                            rect[0] = x;
-                        if (x > rect[2])
-                            rect[2] = x;
-                        if (y < rect[1])
-                            rect[1] = y;
-                        rect[3] = y;
-                    }
+            const wide = (width & 3) === 0;
+            const a32 = wide ? new Uint32Array(cur.buffer) : cur, b32 = wide ? new Uint32Array(prev.buffer) : prev, row = wide ? width >> 2 : width;
+            for (let y = crop?.y0 ?? 0; y <= (crop?.y1 ?? height - 1); y++) {
+                let x = y * row;
+                const end = x + row;
+                while (x < end && a32[x] === b32[x])
+                    x++;
+                if (x === end)
+                    continue;
+                const o = y * width;
+                let x0 = 0, x1 = width - 1;
+                while (cur[o + x0] === prev[o + x0])
+                    x0++;
+                while (cur[o + x1] === prev[o + x1])
+                    x1--;
+                if (x0 < rect[0])
+                    rect[0] = x0;
+                if (x1 > rect[2])
+                    rect[2] = x1;
+                if (y < rect[1])
+                    rect[1] = y;
+                rect[3] = y;
+            }
         }
-        // No change: a 1 x 1 frame that paints the old color keeps the frame and its delay.
+        // A 1 x 1 frame in the old color keeps the frame and its delay.
         if (rect[2] < 0)
             rect = [0, 0, 0, 0];
         bytes(0x21, 0xf9, 4, 1 << 2); // disposal method 1: the next frame draws over this frame