@fusion.dev/helix-graph 0.126.0 → 0.127.0

package/dist/overlay/overlay.js

@@ -1,55 +1,28 @@
-import { mixRgb } from '../connect-graph/looks.js';
+import { mixRgb, rgbOf } from '../connect-graph/looks.js';
 const SPEED = 340;
 const QUICKEST = 450;
 const SLOWEST = 1400;
 const ARRIVAL = 520;
 const FLYING = 400;
 const withAlpha = (color, alpha) => {
-    const [red = 128, green = 128, blue = 128] = color.match(/[\d.]+/g)?.map(Number) ?? [];
+    const [red, green, blue] = rgbOf(color);
     return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 };
 const TAIL = 120;
 const PIECES = 14;
-const BOW = 0.16;
-const BOW_MOST = 90;
 const SPARK = 0.22;
-const on = (a, c, b, t) => {
-    const u = 1 - t;
-    return {
-        x: u * u * a.x + 2 * u * t * c.x + t * t * b.x,
-        y: u * u * a.y + 2 * u * t * c.y + t * t * b.y,
-    };
-};
-const bowed = (from, to) => {
-    const dx = to.x - from.x;
-    const dy = to.y - from.y;
-    const length = Math.hypot(dx, dy) || 1;
-    const bow = Math.min(length * BOW, BOW_MOST) * 2;
-    return {
-        x: (from.x + to.x) / 2 - (dy / length) * bow,
-        y: (from.y + to.y) / 2 + (dx / length) * bow,
-    };
-};
-const bounded = (from, to, toward) => {
-    const middle = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
-    const far = Math.hypot(toward.x - middle.x, toward.y - middle.y);
-    const most = Math.max(Math.hypot(to.x - from.x, to.y - from.y) * 0.9, 12);
-    if (far <= most) {
-        return toward;
-    }
-    return {
-        x: middle.x + ((toward.x - middle.x) * most) / far,
-        y: middle.y + ((toward.y - middle.y) * most) / far,
-    };
-};
-const trace = (context, a, c, b) => {
+const on = (a, b, t) => ({
+    x: a.x + (b.x - a.x) * t,
+    y: a.y + (b.y - a.y) * t,
+});
+const trace = (context, a, b) => {
     context.beginPath();
     context.moveTo(a.x, a.y);
-    context.quadraticCurveTo(c.x, c.y, b.x, b.y);
+    context.lineTo(b.x, b.y);
 };
-const comet = (context, leaves, arrives, from, bend, to, along, through, glowing) => {
+const comet = (context, leaves, arrives, from, to, along, through, glowing) => {
     const strength = glowing ? 1.25 : 1;
-    const length = Math.hypot(bend.x - from.x, bend.y - from.y) + Math.hypot(to.x - bend.x, to.y - bend.y) || 1;
+    const length = Math.hypot(to.x - from.x, to.y - from.y) || 1;
     const color = mixRgb(leaves, arrives, along);
     context.lineCap = 'round';
     const line = context.createLinearGradient(from.x, from.y, to.x, to.y);
@@ -57,15 +30,15 @@ const comet = (context, leaves, arrives, from, bend, to, along, through, glowing
     line.addColorStop(1, withAlpha(arrives, 0.16 * Math.sin(Math.PI * through)));
     context.strokeStyle = line;
     context.lineWidth = 1;
-    trace(context, from, bend, to);
+    trace(context, from, to);
     context.stroke();
     const reach = Math.min(TAIL / length, along);
     context.lineCap = 'butt';
-    let behind = on(from, bend, to, along - reach);
+    let behind = on(from, to, along - reach);
     for (let piece = 1; piece <= PIECES; piece++) {
         const share = piece / PIECES;
         const t = along - reach * (1 - share);
-        const ahead = on(from, bend, to, t);
+        const ahead = on(from, to, t);
         context.strokeStyle = withAlpha(mixRgb(leaves, arrives, t), (glowing ? 0.85 : 1) * share * share);
         context.lineWidth = (0.4 + 2.2 * share) * strength;
         context.beginPath();
@@ -74,7 +47,7 @@ const comet = (context, leaves, arrives, from, bend, to, along, through, glowing
         context.stroke();
         behind = ahead;
     }
-    const head = on(from, bend, to, along);
+    const head = on(from, to, along);
     const bloom = 9 * strength;
     const light = context.createRadialGradient(head.x, head.y, 0, head.x, head.y, bloom);
     light.addColorStop(0, glowing ? 'rgba(255, 255, 255, 0.95)' : withAlpha(color, 1));
@@ -109,24 +82,28 @@ const arrive = (context, color, at, gone) => {
     context.stroke();
 };
 export const isLight = (color) => {
-    const [red = 0, green = 0, blue = 0] = color.match(/[\d.]+/g)?.map(Number) ?? [];
+    const [red, green, blue] = rgbOf(color, 0);
     return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255 > 0.5;
 };
 export const ease = (at) => (at < 0.5 ? 2 * at * at : 1 - (-2 * at + 2) ** 2 / 2);
-const nameGroups = (context, groups, looks, at) => {
+const SAMPLED = 96;
+const nameGroups = (context, groups, looks, at, avoid) => {
     context.font = `650 11px ${looks.font}`;
     context.letterSpacing = '0.14em';
     context.textAlign = 'center';
     context.textBaseline = 'middle';
     context.shadowColor = looks.ground;
-    const taken = [];
+    const taken = [...avoid];
     for (const group of groups) {
         let x = 0;
         let y = 0;
         let count = 0;
         const points = [];
-        for (const id of group.ids) {
-            const point = at(id);
+        const step = Math.max(1, Math.floor(group.ids.length / SAMPLED));
+        let asked = 0;
+        for (let index = 0; index < group.ids.length; index += step) {
+            asked += 1;
+            const point = at(group.ids[index]);
             if (point) {
                 x += point.x;
                 y += point.y;
@@ -134,7 +111,7 @@ const nameGroups = (context, groups, looks, at) => {
                 points.push(point);
             }
         }
-        if (count < Math.max(2, group.ids.length * 0.3)) {
+        if (count < Math.max(2, asked * 0.3)) {
             continue;
         }
         x /= count;
@@ -186,12 +163,13 @@ const layer = (container, kind) => {
     }
     return canvas;
 };
+export const overlayDensity = () => Math.min(Math.max(window.devicePixelRatio || 1, 2), 3);
 const fresh = (canvas, container) => {
     const context = canvas.getContext('2d');
     if (!context) {
         return null;
     }
-    const ratio = window.devicePixelRatio || 1;
+    const ratio = overlayDensity();
     const width = Math.round(container.clientWidth * ratio);
     const height = Math.round(container.clientHeight * ratio);
     if (canvas.width !== width || canvas.height !== height) {
@@ -202,14 +180,14 @@ const fresh = (canvas, container) => {
     context.clearRect(0, 0, width, height);
     return context;
 };
-export const signalsOver = (container, onScreen, bend) => {
+export const signalsOver = (container, onScreen) => {
     let overlay;
     let flights = [];
     let flying = 0;
     let ink = 'rgb(128, 128, 128)';
     let glowing = false;
     const fly = (now) => {
-        const context = overlay ? fresh(overlay, container) : null;
+        const context = overlay && container.isConnected ? fresh(overlay, container) : null;
         if (!context) {
             flights = [];
             return;
@@ -221,17 +199,16 @@ export const signalsOver = (container, onScreen, bend) => {
             if (!from || !to) {
                 return false;
             }
-            flight.crossing ??= Math.min(Math.max(((Math.hypot(to.x - from.x, to.y - from.y) * 1.08) / SPEED) * 1000, QUICKEST), SLOWEST);
+            flight.crossing ??= Math.min(Math.max((Math.hypot(to.x - from.x, to.y - from.y) / SPEED) * 1000, QUICKEST), SLOWEST);
             const crossing = flight.crossing;
             const gone = (now - flight.started) / crossing;
             if (gone >= 1 + ARRIVAL / crossing) {
                 return false;
             }
-            const toward = bounded(from, to, bend?.(flight.from, flight.to) ?? bowed(from, to));
             context.save();
             if (gone < 1) {
                 if (flight.animate) {
-                    comet(context, flight.leaves, flight.arrives, from, toward, to, ease(gone), gone, glowing);
+                    comet(context, flight.leaves, flight.arrives, from, to, ease(gone), gone, glowing);
                     if (gone < SPARK) {
                         spark(context, flight.leaves, from, gone / SPARK);
                     }
@@ -243,7 +220,7 @@ export const signalsOver = (container, onScreen, bend) => {
                     context.globalAlpha = 1 - gone;
                     context.strokeStyle = line;
                     context.lineWidth = 2;
-                    trace(context, from, toward, to);
+                    trace(context, from, to);
                     context.stroke();
                 }
             }
@@ -261,6 +238,9 @@ export const signalsOver = (container, onScreen, bend) => {
             glowing = isLight(looks.ink);
         },
         signal: (from, to, colors, animate) => {
+            if (!container.isConnected) {
+                return;
+            }
             overlay ??= layer(container, 'signals');
             flights.push({
                 animate,
@@ -288,13 +268,15 @@ export const signalsOver = (container, onScreen, bend) => {
 };
 export const namesOver = (container, onScreen) => {
     const canvas = layer(container, 'names');
+    let taken = [];
     return {
+        boxes: () => taken,
         draw: (looks, named) => {
             const context = looks ? fresh(canvas, container) : null;
             if (!context || !looks) {
                 return;
             }
-            const taken = [];
+            taken = [];
             for (const { id, name, strong } of named) {
                 const at = onScreen(id);
                 if (!at || looks.node(id).hidden) {
@@ -330,14 +312,14 @@ export const namesOver = (container, onScreen) => {
         },
     };
 };
-export const groupsOver = (container, onScreen) => {
+export const groupsOver = (container, onScreen, avoid = () => []) => {
     let canvas;
     let groups = [];
     let looks;
     const draw = () => {
         const context = canvas && looks ? fresh(canvas, container) : null;
         if (context && looks) {
-            nameGroups(context, groups, looks, onScreen);
+            nameGroups(context, groups, looks, onScreen, avoid());
         }
     };
     return {
@@ -357,14 +339,29 @@ export const groupsOver = (container, onScreen) => {
         },
     };
 };
+const GESTURES = 'data-helix-graph-gestures';
+const touchRule = (container) => {
+    const root = container.getRootNode();
+    const holder = root instanceof ShadowRoot ? root : document.head;
+    if (!holder || holder.querySelector(`style[${GESTURES}]`)) {
+        return;
+    }
+    const style = document.createElement('style');
+    style.setAttribute(GESTURES, '');
+    style.textContent = `[${GESTURES}="cooperative"], [${GESTURES}="cooperative"] * { touch-action: pan-x pan-y !important; }
+[${GESTURES}="off"], [${GESTURES}="off"] * { touch-action: auto !important; }`;
+    holder.append(style);
+};
 export const gesturesHeld = (container) => {
     let mode = 'free';
-    const touchAction = container.style.touchAction;
     const hold = (event) => {
         if (mode === 'free') {
             return;
         }
         if (mode === 'off') {
+            if (event.type === 'click' && event.detail < 2) {
+                return;
+            }
             event.stopImmediatePropagation();
             return;
         }
@@ -383,21 +380,26 @@ export const gesturesHeld = (container) => {
             }
         }
     };
-    const held = ['wheel', 'touchstart', 'touchmove', 'mousedown'];
+    const held = ['wheel', 'touchstart', 'touchmove', 'mousedown', 'click', 'dblclick'];
     for (const type of held) {
         container.addEventListener(type, hold, { capture: true, passive: false });
     }
     return {
         set: (next) => {
             mode = next;
-            container.style.touchAction =
-                next === 'free' ? touchAction : next === 'cooperative' ? 'pan-x pan-y' : 'auto';
+            if (next === 'free') {
+                container.removeAttribute(GESTURES);
+            }
+            else {
+                touchRule(container);
+                container.setAttribute(GESTURES, next);
+            }
         },
         stop: () => {
             for (const type of held) {
                 container.removeEventListener(type, hold, { capture: true });
             }
-            container.style.touchAction = touchAction;
+            container.removeAttribute(GESTURES);
         },
     };
 };

package/dist/shapes/flat.d.ts

@@ -1,4 +1,4 @@
-import { type ShapeField } from '../connect-graph/shape-field.js';
+import { type ShapeField } from './shape-field.js';
 /**
  * A flat field from an SVG: an `<svg>` element, or its markup. Its box is
  * its `viewBox`, and its shape every path, rectangle, circle, ellipse and

package/dist/shapes/flat.js

@@ -1,4 +1,4 @@
-import { FLAT, fieldFromCells, fieldFromPath, } from '../connect-graph/shape-field.js';
+import { FLAT, fieldFromCells, fieldFromPath } from './shape-field.js';
 const pathOf = (element) => {
     const number = (name) => Number(element.getAttribute(name) ?? 0);
     switch (element.localName) {
@@ -27,24 +27,27 @@ export const shapeFromSvg = (svg, resolution = FLAT) => {
     const element = typeof svg === 'string'
         ? new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement
         : svg;
-    const [, , width = 0, height = 0] = (element.getAttribute('viewBox') ?? '')
+    const [left = 0, top = 0, width = 0, height = 0] = (element.getAttribute('viewBox') ?? '')
         .trim()
         .split(/[\s,]+/)
         .map(Number);
+    const origin = { x: Number.isFinite(left) ? left : 0, y: Number.isFinite(top) ? top : 0 };
     const box = {
         height: height || Number(element.getAttribute('height') ?? 0),
         width: width || Number(element.getAttribute('width') ?? 0),
     };
     const shapes = [...element.querySelectorAll('path, rect, circle, ellipse, polygon')];
     const path = shapes.map(pathOf).join(' ');
-    const field = fieldFromPath(path, box.width || 1, box.height || 1, resolution);
+    const field = fieldFromPath(path, box.width || 1, box.height || 1, resolution, origin);
     const named = shapes.flatMap((shape) => {
         const name = shape.closest('[id]')?.getAttribute('id');
         return name && shape.closest('[id]') !== element ? [{ name, path: pathOf(shape) }] : [];
     });
-    return named.length > 0 ? { ...field, regionOf: partsOf(named, field, resolution) } : field;
+    return named.length > 0
+        ? { ...field, regionOf: partsOf(named, field, resolution, origin) }
+        : field;
 };
-const partsOf = (named, box, resolution) => {
+const partsOf = (named, box, resolution, origin) => {
     const cell = Math.max(box.width, box.height, 1) / resolution;
     const nx = Math.max(1, Math.ceil(box.width / cell));
     const ny = Math.max(1, Math.ceil(box.height / cell));
@@ -55,6 +58,7 @@ const partsOf = (named, box, resolution) => {
     const labels = new Uint16Array(nx * ny);
     if (context) {
         context.scale(1 / cell, 1 / cell);
+        context.translate(-origin.x, -origin.y);
         named.forEach(({ path }, at) => {
             const label = at + 1;
             context.fillStyle = `rgb(${label & 255}, ${(label >> 8) & 255}, 0)`;

package/dist/shapes/index.d.ts

@@ -1,6 +1,5 @@
-export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, type ShapeField, } from '../connect-graph/shape-field.js';
-export { surfaceOf } from '../three/surface.js';
 export { type ImageOptions, shapeFromImage, shapeFromSvg } from './flat.js';
-export { shapeFromModel } from './model.js';
-export { box, onSphere, sphere, torus } from './solids.js';
+export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, type ShapeField, } from './shape-field.js';
+export { cuboid, onSphere, sphere, torus } from './solids.js';
+export { surfaceOf } from './surface.js';
 export { shapeFromTriangles, type TriangleOptions } from './triangles.js';

package/dist/shapes/index.js

@@ -1,6 +1,5 @@
-export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, } from '../connect-graph/shape-field.js';
-export { surfaceOf } from '../three/surface.js';
 export { shapeFromImage, shapeFromSvg } from './flat.js';
-export { shapeFromModel } from './model.js';
-export { box, onSphere, sphere, torus } from './solids.js';
+export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, } from './shape-field.js';
+export { cuboid, onSphere, sphere, torus } from './solids.js';
+export { surfaceOf } from './surface.js';
 export { shapeFromTriangles } from './triangles.js';

package/dist/{connect-graph → shapes}/shape-field.d.ts

@@ -34,7 +34,7 @@ export interface ShapeField {
 }
 /** How many cells a field has along its longer side, flat and solid. */
 export declare const FLAT = 512;
-export declare const SOLID = 96;
+export declare const SOLID = 144;
 /**
  * A field from a grid of cells marked inside, `cell` box units a cell, x
  * fastest and z slowest: the distance to the nearest outside cell, taken
@@ -58,9 +58,13 @@ export declare const fieldFromInside: (inside: (x: number, y: number, z: number)
 /**
  * A flat field from an SVG path in a box `width` by `height`, its holes cut by
  * the even-odd rule. Drawn once to a canvas and read off it, which is what
- * lets a detailed outline become a field in a moment.
+ * lets a detailed outline become a field in a moment. A box that starts
+ * somewhere other than 0, as an SVG `viewBox` can, is given as `origin`.
  */
-export declare const fieldFromPath: (path: string, width: number, height: number, resolution?: number) => ShapeField;
+export declare const fieldFromPath: (path: string, width: number, height: number, resolution?: number, origin?: {
+    x: number;
+    y: number;
+}) => ShapeField;
 /**
  * A solid puffed out of a flat shape, as a cushion is: as thick as `depth`
  * where the shape is widest, rounding to nothing at its edge, and cut

package/dist/{connect-graph → shapes}/shape-field.js

@@ -1,5 +1,5 @@
 export const FLAT = 512;
-export const SOLID = 96;
+export const SOLID = 144;
 const FAR = 1e20;
 const line = (values, count, out) => {
     const hull = new Int32Array(count);
@@ -126,7 +126,7 @@ export const fieldFromInside = (inside, box, resolution = box.depth ? SOLID : FL
         width: box.width,
     });
 };
-export const fieldFromPath = (path, width, height, resolution = FLAT) => {
+export const fieldFromPath = (path, width, height, resolution = FLAT, origin = { x: 0, y: 0 }) => {
     const cell = Math.max(width, height, 1) / resolution;
     const nx = Math.max(1, Math.ceil(width / cell));
     const ny = Math.max(1, Math.ceil(height / cell));
@@ -137,6 +137,7 @@ export const fieldFromPath = (path, width, height, resolution = FLAT) => {
     const cells = new Uint8Array(nx * ny);
     if (context) {
         context.scale(1 / cell, 1 / cell);
+        context.translate(-origin.x, -origin.y);
         context.fill(new Path2D(path), 'evenodd');
         const alpha = context.getImageData(0, 0, nx, ny).data;
         for (let at = 0; at < cells.length; at++) {
@@ -168,5 +169,6 @@ export const inflate = (flat, { depth, roundness = 1 }) => {
         },
         height: flat.height,
         width: flat.width,
+        ...(flat.regionOf ? { regionOf: (x, y) => flat.regionOf?.(x, y) } : {}),
     };
 };

package/dist/shapes/solids.d.ts

@@ -1,4 +1,4 @@
-import type { ShapeField } from '../connect-graph/shape-field.js';
+import type { ShapeField } from './shape-field.js';
 /** A ball `radius` across from its middle. */
 export declare const sphere: ({ radius }?: {
     radius?: number;
@@ -8,8 +8,8 @@ export declare const torus: ({ radius, tube, }?: {
     radius?: number;
     tube?: number;
 }) => ShapeField;
-/** A box `width` by `height` by `depth`, its edges rounded `round` in. */
-export declare const box: ({ depth, height, round, width, }?: {
+/** A cuboid `width` by `height` by `depth`, its edges rounded `round` in. */
+export declare const cuboid: ({ depth, height, round, width, }?: {
     depth?: number;
     height?: number;
     round?: number;

package/dist/shapes/solids.js

@@ -13,7 +13,7 @@ export const torus = ({ radius = 50, tube = 18, } = {}) => {
         width: reach * 2,
     };
 };
-export const box = ({ depth = 100, height = 100, round = 0, width = 100, } = {}) => ({
+export const cuboid = ({ depth = 100, height = 100, round = 0, width = 100, } = {}) => ({
     depth,
     distance: (x, y, z = depth / 2) => {
         const qx = Math.abs(x - width / 2) - width / 2 + round;
@@ -28,20 +28,36 @@ export const box = ({ depth = 100, height = 100, round = 0, width = 100, } = {})
 });
 export const onSphere = (flat, { radius = 50, thickness = radius * 0.08 } = {}) => {
     const along = (Math.PI * 2 * radius) / Math.max(flat.width, 1e-9);
+    const onMap = (x, y, z) => {
+        const dx = x - radius;
+        const dy = y - radius;
+        const dz = z - radius;
+        const out = Math.hypot(dx, dy, dz);
+        const longitude = Math.atan2(dx, dz);
+        const latitude = Math.acos(Math.min(Math.max(dy / (out || 1), -1), 1));
+        return {
+            out,
+            u: ((longitude + Math.PI) / (Math.PI * 2)) * flat.width,
+            v: (latitude / Math.PI) * flat.height,
+        };
+    };
+    const regionOf = flat.regionOf;
     return {
         depth: radius * 2,
         distance: (x, y, z = radius) => {
-            const dx = x - radius;
-            const dy = y - radius;
-            const dz = z - radius;
-            const out = Math.hypot(dx, dy, dz);
+            const { out, u, v } = onMap(x, y, z);
             const shell = Math.abs(out - (radius - thickness / 2)) - thickness / 2;
-            const longitude = Math.atan2(dx, dz);
-            const latitude = Math.acos(Math.min(Math.max(dy / (out || 1), -1), 1));
-            const map = flat.distance(((longitude + Math.PI) / (Math.PI * 2)) * flat.width, (latitude / Math.PI) * flat.height);
-            return Math.max(shell, map * along);
+            return Math.max(shell, flat.distance(u, v) * along);
         },
         height: radius * 2,
         width: radius * 2,
+        ...(regionOf
+            ? {
+                regionOf: (x, y, z = radius) => {
+                    const { u, v } = onMap(x, y, z);
+                    return regionOf(u, v);
+                },
+            }
+            : {}),
     };
 };

package/dist/{three → shapes}/surface.d.ts

@@ -1,4 +1,4 @@
-import type { ShapeField } from '../connect-graph/shape-field.js';
+import type { ShapeField } from './shape-field.js';
 /**
  * The surface of a solid field where its distance is `at`, as triangles:
  * corners three numbers each in the field's box, and triangles three corners

package/dist/shapes/triangles.d.ts

@@ -1,4 +1,4 @@
-import { type ShapeField } from '../connect-graph/shape-field.js';
+import { type ShapeField } from './shape-field.js';
 /** How a solid is read from triangles. */
 export interface TriangleOptions {
     /**
@@ -10,7 +10,7 @@ export interface TriangleOptions {
         names: readonly string[];
         ofTriangle: ArrayLike<number>;
     } | undefined;
-    /** How many cells the field has along the solid's longest side. 96 by default. */
+    /** How many cells the field has along the solid's longest side. 144 by default. */
     resolution?: number | undefined;
 }
 /**

package/dist/shapes/triangles.js

@@ -1,43 +1,62 @@
-import { fieldFromCells, SOLID } from '../connect-graph/shape-field.js';
+import { fieldFromCells, SOLID } from './shape-field.js';
 const NUDGE = 1e-6 * Math.PI;
 const NEAREST = 40;
 const nearestPart = (middles, parts, names, box) => {
-    const size = Math.max(box.width, box.height, box.depth) / NEAREST;
-    const cells = new Map();
-    const key = (cx, cy, cz) => `${cx},${cy},${cz}`;
+    const size = Math.max(box.width, box.height, box.depth) / NEAREST || 1;
+    const nx = Math.ceil(box.width / size) + 1;
+    const ny = Math.ceil(box.height / size) + 1;
+    const nz = Math.ceil(box.depth / size) + 1;
+    const clamp = (value, most) => Math.min(most - 1, Math.max(0, value));
+    const cellOf = (x, y, z) => clamp(Math.floor(x / size), nx) +
+        nx * (clamp(Math.floor(y / size), ny) + ny * clamp(Math.floor(z / size), nz));
     const count = middles.length / 3;
+    const start = new Int32Array(nx * ny * nz + 1);
+    const cellAt = new Int32Array(count);
     for (let at = 0; at < count; at++) {
-        const k = key(Math.floor(middles[at * 3] / size), Math.floor(middles[at * 3 + 1] / size), Math.floor(middles[at * 3 + 2] / size));
-        const list = cells.get(k);
-        if (list) {
-            list.push(at);
-        }
-        else {
-            cells.set(k, [at]);
-        }
+        const cell = cellOf(middles[at * 3], middles[at * 3 + 1], middles[at * 3 + 2]);
+        cellAt[at] = cell;
+        start[cell + 1] = start[cell + 1] + 1;
+    }
+    for (let cell = 0; cell < nx * ny * nz; cell++) {
+        start[cell + 1] = start[cell + 1] + start[cell];
+    }
+    const filled = start.slice(0, -1);
+    const order = new Int32Array(count);
+    for (let at = 0; at < count; at++) {
+        const cell = cellAt[at];
+        order[filled[cell]] = at;
+        filled[cell] = filled[cell] + 1;
     }
+    const furthest = Math.max(nx, ny, nz);
     return (x, y, z = box.depth / 2) => {
-        const cx = Math.floor(x / size);
-        const cy = Math.floor(y / size);
-        const cz = Math.floor(z / size);
+        const cx = clamp(Math.floor(x / size), nx);
+        const cy = clamp(Math.floor(y / size), ny);
+        const cz = clamp(Math.floor(z / size), nz);
         let best = -1;
         let nearest = Number.POSITIVE_INFINITY;
-        for (let ring = 0; ring <= NEAREST; ring++) {
-            for (let dx = -ring; dx <= ring; dx++) {
+        const search = (ix, iy, iz) => {
+            if (ix < 0 || iy < 0 || iz < 0 || ix >= nx || iy >= ny || iz >= nz) {
+                return;
+            }
+            const cell = ix + nx * (iy + ny * iz);
+            for (let at = start[cell]; at < start[cell + 1]; at++) {
+                const one = order[at];
+                const far = (middles[one * 3] - x) ** 2 +
+                    (middles[one * 3 + 1] - y) ** 2 +
+                    (middles[one * 3 + 2] - z) ** 2;
+                if (far < nearest) {
+                    nearest = far;
+                    best = one;
+                }
+            }
+        };
+        for (let ring = 0; ring <= furthest; ring++) {
+            for (let dz = -ring; dz <= ring; dz++) {
+                const face = Math.abs(dz) === ring;
                 for (let dy = -ring; dy <= ring; dy++) {
-                    for (let dz = -ring; dz <= ring; dz++) {
-                        if (Math.max(Math.abs(dx), Math.abs(dy), Math.abs(dz)) !== ring) {
-                            continue;
-                        }
-                        for (const at of cells.get(key(cx + dx, cy + dy, cz + dz)) ?? []) {
-                            const far = (middles[at * 3] - x) ** 2 +
-                                (middles[at * 3 + 1] - y) ** 2 +
-                                (middles[at * 3 + 2] - z) ** 2;
-                            if (far < nearest) {
-                                nearest = far;
-                                best = at;
-                            }
-                        }
+                    const edge = face || Math.abs(dy) === ring;
+                    for (let dx = -ring; dx <= ring; dx += edge || ring === 0 ? 1 : 2 * ring) {
+                        search(cx + dx, cy + dy, cz + dz);
                     }
                 }
             }