@woosh/meep-engine 3.18.0 → 3.19.0

package/editor/view/particles/effect/ParticleGradientEditorView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ParticleGradientEditorView.d.ts","sourceRoot":"","sources":["../../../../../editor/view/particles/effect/ParticleGradientEditorView.js"],"names":[],"mappings":"AAkDA;IAsCI;;;;;;OAMG;IACH;QALqC,IAAI;QACA,KAAK,mBAAnB,IAAI;QACF,KAAK,GAAvB,OAAO;OAqFjB;IA3EG,mBAAuC;IAyF3C;;;OAGG;IACH,gBAWC;IAoLD,eAoDC;;CACJ;iBAnbgB,8BAA8B"}
+{"version":3,"file":"ParticleGradientEditorView.d.ts","sourceRoot":"","sources":["../../../../../editor/view/particles/effect/ParticleGradientEditorView.js"],"names":[],"mappings":"AAwDA;IAyCI;;;;;;OAMG;IACH;QALqC,IAAI;QACA,KAAK,mBAAnB,IAAI;QACF,KAAK,GAAvB,OAAO;OAgGjB;IAtFG,mBAAuC;IA0G3C;;;OAGG;IACH,gBAaC;IA8LD,eAsDC;;CACJ;iBA3dgB,8BAA8B"}

package/editor/view/particles/effect/ParticleGradientEditorView.js

@@ -26,13 +26,19 @@ import View from "../../../../src/view/View.js";
  */
 
 /** How wide the strip is drawn, in CSS pixels. @type {number} */
-const WIDTH = 208;
+const WIDTH = 240;
 
 /** How tall the colour strip is. @type {number} */
 const STRIP_HEIGHT = 24;
 
 /** How tall the lane of stop markers under it is. @type {number} */
-const LANE_HEIGHT = 13;
+const LANE_HEIGHT = 18;
+
+/** Keep the complete marker and its hit area inside the canvas, including at t = 0 and 1. */
+const MARGIN = 10;
+const STRIP_TOP = 4;
+const STRIP_WIDTH = WIDTH - MARGIN * 2;
+const HEIGHT = STRIP_TOP + STRIP_HEIGHT + LANE_HEIGHT;
 
 /** How near a stop marker a press has to be to take hold of it rather than make a new one. */
 const GRAB_RADIUS = 7;
@@ -65,8 +71,11 @@ export class ParticleGradientEditorView extends View {
     /** @type {number} which stop the swatch and the fields below are about */
     #selected = 0;
 
-    /** @type {boolean} */
-    #dragging = false;
+    /** @type {number|null} the pointer that owns the current gesture */
+    #pointerId = null;
+
+    /** @type {boolean} ignore the synchronous echo of our own commit */
+    #writing = false;
 
     /** @type {function(Array):void} */
     #write;
@@ -107,8 +116,10 @@ export class ParticleGradientEditorView extends View {
         const canvas = this.#canvas = document.createElement('canvas');
 
         canvas.width = WIDTH;
-        canvas.height = STRIP_HEIGHT + LANE_HEIGHT;
-        canvas.classList.add('strip');
+        canvas.height = HEIGHT;
+        canvas.classList.add('strip');
+        canvas.tabIndex = 0;
+        canvas.setAttribute('aria-label', 'Gradient stops. Drag to move; click to add; Escape to cancel.');
 
         this.el.appendChild(canvas);
 
@@ -118,9 +129,9 @@ export class ParticleGradientEditorView extends View {
 
         this.el.appendChild(fields);
 
-        this.#swatch = field(fields, 'color', 'swatch');
-        this.#alpha = field(fields, 'number', 'alpha');
-        this.#position = field(fields, 'number', 'position');
+        this.#swatch = field(fields, 'color', 'swatch', 'Color');
+        this.#alpha = field(fields, 'number', 'alpha', 'Alpha');
+        this.#position = field(fields, 'number', 'position', 'Position');
 
         for (const input of [this.#alpha, this.#position]) {
             input.setAttribute('min', '0');
@@ -128,7 +139,8 @@ export class ParticleGradientEditorView extends View {
             input.setAttribute('step', 'any');
         }
 
-        this.#alpha.hidden = !alpha;
+        this.#alpha.hidden = !alpha;
+        this.#alpha.parentElement.hidden = !alpha;
 
         const remove = document.createElement('button');
 
@@ -146,7 +158,15 @@ export class ParticleGradientEditorView extends View {
         canvas.addEventListener('pointerdown', event => this.#press(event));
         canvas.addEventListener('pointermove', event => this.#move(event));
         canvas.addEventListener('pointerup', event => this.#release(event));
-        canvas.addEventListener('pointercancel', event => this.#release(event));
+        canvas.addEventListener('pointercancel', event => this.#cancel(event));
+        canvas.addEventListener('lostpointercapture', event => this.#cancel(event));
+        canvas.addEventListener('keydown', event => {
+            if (event.key === 'Escape' && this.#pointerId !== null) {
+                event.stopPropagation();
+                this.refresh();
+            }
+        });
+        this.on.unlinked.add(() => this.refresh());
 
         this.#swatch.addEventListener('change', () => this.#editSelected(stop => {
             const rgb = hex_to_rgb(this.#swatch.value);
@@ -161,7 +181,7 @@ export class ParticleGradientEditorView extends View {
         }));
 
         this.#position.addEventListener('change', () => this.#editSelected(stop => {
-            stop.position = number_in(this.#position, stop.position);
+            stop.position = clamp01(number_in(this.#position, stop.position));
         }));
 
         remove.addEventListener('click', () => this.#removeSelected());
@@ -185,16 +205,24 @@ export class ParticleGradientEditorView extends View {
      * next. It is also what makes each commit a distinct value, which is how the node knows anything
      * changed at all.
      */
-    #commit() {
-        this.#write(structuredClone(this.#stops));
+    #commit() {
+        if (JSON.stringify(this.#stops) === JSON.stringify(this.#read())) return;
+        this.#writing = true;
+        try {
+            this.#write(structuredClone(this.#stops));
+        } finally {
+            this.#writing = false;
+        }
     }
 
     /**
      * Re-read the parameter and redraw. Called when the value changed somewhere else — an undo, the
      * code layer, a script.
      */
-    refresh() {
-        const value = this.#read();
+    refresh() {
+        if (this.#writing) return;
+        this.#endDrag();
+        const value = this.#read();
 
         this.#stops = Array.isArray(value)
             ? value.map(stop => ({ position: stop.position, color: (stop.color ?? []).slice() }))
@@ -228,7 +256,7 @@ export class ParticleGradientEditorView extends View {
     #positionOf(event) {
         const rect = this.#canvas.getBoundingClientRect();
 
-        return clamp01((event.clientX - rect.left) / rect.width);
+        return clamp01(((event.clientX - rect.left) / rect.width * WIDTH - MARGIN) / STRIP_WIDTH);
     }
 
     /**
@@ -238,18 +266,15 @@ export class ParticleGradientEditorView extends View {
     #stopUnder(event) {
         const rect = this.#canvas.getBoundingClientRect();
 
-        const x = event.clientX - rect.left;
-
-        // in CSS pixels, so the grab radius is the same however far the graph is zoomed out
-        const radius = GRAB_RADIUS * (rect.width / WIDTH);
+        const x = (event.clientX - rect.left) / rect.width * WIDTH;
 
         let nearest = -1;
         let distance = Infinity;
 
         this.#stops.forEach((stop, index) => {
-            const away = Math.abs(stop.position * rect.width - x);
+            const away = Math.abs(MARGIN + clamp01(stop.position) * STRIP_WIDTH - x);
 
-            if (away <= radius && away < distance) {
+            if (away <= GRAB_RADIUS && (away < distance || (away === distance && index === this.#selected))) {
                 nearest = index;
                 distance = away;
             }
@@ -261,8 +286,12 @@ export class ParticleGradientEditorView extends View {
     /**
      * @param {PointerEvent} event
      */
-    #press(event) {
-        const stop = this.#stopUnder(event);
+    #press(event) {
+        if (this.#pointerId !== null) return;
+        const rect = this.#canvas.getBoundingClientRect();
+        const y = (event.clientY - rect.top) / rect.height * HEIGHT;
+        if (y < STRIP_TOP || y > STRIP_TOP + STRIP_HEIGHT + LANE_HEIGHT) return;
+        const stop = this.#stopUnder(event);
 
         if (event.button === 1) {
             // the power-user path to the remove button beside the fields
@@ -291,12 +320,12 @@ export class ParticleGradientEditorView extends View {
                 color: particle_gradient_sample(this.#stops, position),
             });
 
-            this.#selected = this.#stops.length - 1;
-
-            this.#commit();
-        }
-
-        this.#dragging = true;
+            this.#selected = this.#stops.length - 1;
+        }
+
+        event.preventDefault();
+        this.#canvas.focus({ preventScroll: true });
+        this.#pointerId = event.pointerId ?? 0;
 
         if (typeof this.#canvas.setPointerCapture === "function") {
             this.#canvas.setPointerCapture(event.pointerId);
@@ -309,8 +338,8 @@ export class ParticleGradientEditorView extends View {
     /**
      * @param {PointerEvent} event
      */
-    #move(event) {
-        if (!this.#dragging) {
+    #move(event) {
+        if (this.#pointerId !== (event.pointerId ?? 0)) {
             return;
         }
 
@@ -323,20 +352,29 @@ export class ParticleGradientEditorView extends View {
     /**
      * @param {PointerEvent} event
      */
-    #release(event) {
-        if (!this.#dragging) {
+    #release(event) {
+        if (this.#pointerId !== (event.pointerId ?? 0)) {
             return;
         }
 
-        this.#dragging = false;
-
-        if (typeof this.#canvas.releasePointerCapture === "function" && this.#canvas.hasPointerCapture?.(event.pointerId)) {
-            this.#canvas.releasePointerCapture(event.pointerId);
-        }
+        this.#endDrag();
 
         // one entry on the timeline for the whole drag; see the note at the top of this file
-        this.#commit();
-    }
+        this.#commit();
+    }
+
+    #endDrag() {
+        const pointerId = this.#pointerId;
+        this.#pointerId = null;
+        if (pointerId !== null && this.#canvas.hasPointerCapture?.(pointerId)) {
+            this.#canvas.releasePointerCapture(pointerId);
+        }
+    }
+
+    /** @param {PointerEvent} event */
+    #cancel(event) {
+        if (this.#pointerId === (event.pointerId ?? 0)) this.refresh();
+    }
 
     /**
      * @param {function(object):void} edit applied to the selected stop
@@ -381,7 +419,7 @@ export class ParticleGradientEditorView extends View {
 
         this.#swatch.value = `#${rgb_to_hex(byte_of(colour[0]), byte_of(colour[1]), byte_of(colour[2]))}`;
         this.#alpha.value = String(colour[3] ?? 1);
-        this.#position.value = String(stop === undefined ? 0 : stop.position);
+        this.#position.value = String(stop === undefined ? 0 : Number(stop.position.toFixed(6)));
     }
 
     render() {
@@ -398,33 +436,35 @@ export class ParticleGradientEditorView extends View {
         // A checkerboard behind the strip, so that a stop's alpha is visible as transparency rather
         // than as a colour that happens to look like the panel behind it.
         if (this.#has_alpha) {
-            for (let x = 0; x < canvas.width; x += CHECKER) {
+            for (let x = 0; x < STRIP_WIDTH; x += CHECKER) {
                 for (let y = 0; y < STRIP_HEIGHT; y += CHECKER) {
                     context.fillStyle = ((x + y) / CHECKER) % 2 === 0 ? '#4c4f54' : '#6a6e74';
-                    context.fillRect(x, y, CHECKER, CHECKER);
+                    context.fillRect(MARGIN + x, STRIP_TOP + y, Math.min(CHECKER, STRIP_WIDTH - x), CHECKER);
                 }
             }
         }
 
         // The strip is drawn by sampling the same function the node compiles to, so what is on
         // screen is what the effect will do — including a hard edge where two stops share a place.
-        for (let x = 0; x < canvas.width; x++) {
-            const colour = particle_gradient_sample(this.#stops, x / (canvas.width - 1));
+        for (let x = 0; x <= STRIP_WIDTH; x++) {
+            const colour = particle_gradient_sample(this.#stops, x / STRIP_WIDTH);
 
             const alpha = this.#has_alpha ? clamp01(colour[3] ?? 1) : 1;
 
             context.fillStyle = `rgba(${byte_of(colour[0])}, ${byte_of(colour[1])}, ${byte_of(colour[2])}, ${alpha})`;
-            context.fillRect(x, 0, 1, STRIP_HEIGHT);
-        }
-
-        for (const { stop, index } of this.#ordered()) {
-            const x = clamp01(stop.position) * canvas.width;
+            context.fillRect(MARGIN + x, STRIP_TOP, 1, STRIP_HEIGHT);
+        }
+
+        // Paint selection last so a coincident stop cannot hide its outline.
+        const ordered = this.#ordered().sort((a, b) => Number(a.index === this.#selected) - Number(b.index === this.#selected));
+        for (const { stop, index } of ordered) {
+            const x = MARGIN + clamp01(stop.position) * STRIP_WIDTH;
             const selected = index === this.#selected;
 
             context.beginPath();
-            context.moveTo(x, STRIP_HEIGHT + 1);
-            context.lineTo(x - 5, STRIP_HEIGHT + LANE_HEIGHT - 1);
-            context.lineTo(x + 5, STRIP_HEIGHT + LANE_HEIGHT - 1);
+            context.moveTo(x, STRIP_TOP + STRIP_HEIGHT + 2);
+            context.lineTo(x - 5, STRIP_TOP + STRIP_HEIGHT + LANE_HEIGHT - 4);
+            context.lineTo(x + 5, STRIP_TOP + STRIP_HEIGHT + LANE_HEIGHT - 4);
             context.closePath();
 
             // the marker carries the stop's own colour, so the lane reads as the stops rather than
@@ -434,24 +474,29 @@ export class ParticleGradientEditorView extends View {
 
             context.lineWidth = selected ? 2 : 1;
             context.strokeStyle = selected ? '#ffd35c' : '#20242a';
-            context.stroke();
-        }
-    }
-}
+            context.stroke();
+        }
+    }
+}
 
 /**
  * @param {HTMLElement} parent
  * @param {string} type
- * @param {string} className
+ * @param {string} className
+ * @param {string} text
  * @returns {HTMLInputElement}
  */
-function field(parent, type, className) {
-    const input = document.createElement('input');
+function field(parent, type, className, text) {
+    const label = document.createElement('label');
+    label.classList.add('ramp-field', `field-${className}`);
+    label.appendChild(document.createTextNode(text));
+    const input = document.createElement('input');
 
     input.setAttribute('type', type);
     input.classList.add(className);
 
-    parent.appendChild(input);
+    label.appendChild(input);
+    parent.appendChild(label);
 
     return input;
 }

package/editor/view/particles/effect/ParticleGraphEditorView.js

@@ -138,7 +138,7 @@ const PALETTE_CATEGORIES = [
     { name: "sources", types: ["const", "color", "builtin", "attribute", "random", "curve"] },
     { name: "output", types: ["setAttribute", "kill"] },
     // The three that are authored data rather than wiring, and are edited as a picture: a gradient
-    // strip and a curve in the unit square. Their own heading, because "a colour ramp" is a thing an
+    // strip and a curve plot. Their own heading, because "a colour ramp" is a thing an
     // author goes looking for by name and would not think to look for under `sources`.
     { name: "ramps", types: ["gradientRGBA", "gradientRGB", "curveLiteral"] },
     { name: "arithmetic", types: ["add", "sub", "mul", "div", "mad", "scale", "min", "max", "pow", "step", "mix", "clamp", "saturate", "smoothstep", "remap", "oneMinus"] },

package/editor/view/particles/effect/ParticleNodeParametersView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ParticleNodeParametersView.d.ts","sourceRoot":"","sources":["../../../../../editor/view/particles/effect/ParticleNodeParametersView.js"],"names":[],"mappings":"AAqCA;IAOI;;;;;;OAMG;IACH;QALyG,MAAM,EAApG,OAAO,qDAAqD,EAAE,sBAAsB;QAE9D,IAAI;QACG,MAAM,SAA1B,MAAM;OA6BzB;IAxBG,mBAAuC;IAIvC;;OAEG;IACH,mBAAgB;;CA0cvB;iBAlgBgB,8BAA8B"}
+{"version":3,"file":"ParticleNodeParametersView.d.ts","sourceRoot":"","sources":["../../../../../editor/view/particles/effect/ParticleNodeParametersView.js"],"names":[],"mappings":"AAqCA;IAOI;;;;;;OAMG;IACH;QALyG,MAAM,EAApG,OAAO,qDAAqD,EAAE,sBAAsB;QAE9D,IAAI;QACG,MAAM,SAA1B,MAAM;OA6BzB;IAxBG,mBAAuC;IAIvC;;OAEG;IACH,mBAAgB;;CA4cvB;iBApgBgB,8BAA8B"}

package/editor/view/particles/effect/ParticleNodeParametersView.js

@@ -87,7 +87,9 @@ export class ParticleNodeParametersView extends View {
     #buildRow(effect, parameter, commit) {
         const row = new EmptyView({ classList: ['parameter-row', `kind-${parameter.kind}`] });
 
-        row.addChild(new LabelView(parameter.name, { classList: ['name'] }));
+        if (parameter.kind !== PARTICLE_PARAMETER_KIND.GRADIENT && parameter.kind !== PARTICLE_PARAMETER_KIND.CURVE) {
+            row.addChild(new LabelView(parameter.name, { classList: ['name'] }));
+        }
 
         if (typeof parameter.description === "string") {
             row.el.setAttribute('title', parameter.description);

package/editor/view/particles/effect/particle-editor.css

@@ -213,10 +213,9 @@
 /*
  The ramp controls — a gradient's strip and a curve's plot.
 
- Both are wider than a label and a field side by side, so their rows put the label on its own line
- and give the control the width of the node. The canvases scale with the row rather than holding
- their drawn size: the graph is zoomable, and a control that stayed 208 pixels while everything
- around it grew would be the one thing on the node that could not be read.
+ Both controls use the width of the node. The canvases scale with the row rather than holding
+ their drawn size: the graph is zoomable, and a control that stayed 240 pixels while everything
+ around it grew would be the one thing on the node that could not be read.
 */
 
 .ui-particle-node-parameters .parameter-row.kind-gradient,
@@ -226,11 +225,13 @@
     gap: 3px;
 }
 
-.ui-particle-gradient,
-.ui-particle-curve {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
+.ui-particle-gradient,
+.ui-particle-curve {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    width: 240px;
+    max-width: 100%;
 }
 
 .ui-particle-gradient > .strip,
@@ -238,7 +239,10 @@
     display: block;
     width: 100%;
     height: auto;
-    border: 1px solid var(--meep-graph-node-border, #363c46);
+    /* An inset border keeps the canvas's drawing and pointer coordinate spaces identical. */
+    border: 0;
+    padding: 0;
+    box-shadow: inset 0 0 0 1px var(--meep-graph-node-border, #363c46);
     border-radius: 3px;
     background: var(--meep-graph-input-bg, #171b21);
     /* the strip and the plot are both dragged in, and a drag that selects text is a drag that fights */
@@ -248,30 +252,56 @@
 
 .ui-particle-gradient > .stop-fields,
 .ui-particle-curve > .key-fields {
-    display: flex;
-    gap: 2px;
-    align-items: center;
-}
-
-.ui-particle-gradient .swatch {
-    flex: 1 1 auto;
-    min-width: 3em;
-    padding: 0;
-}
-
-.ui-particle-gradient .alpha,
-.ui-particle-gradient .position {
-    flex: 0 0 auto;
-    width: 4em;
-}
-
-.ui-particle-curve .tangents {
-    flex: 1 1 auto;
+    display: grid;
+    gap: 5px;
+    align-items: end;
+}
+
+.ui-particle-gradient > .stop-fields {
+    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
+}
+
+.ui-particle-gradient > .stop-fields:has(.field-alpha[hidden]) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
+}
+
+.ui-particle-curve > .key-fields {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.ramp-field {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    color: var(--meep-fg-muted, #9da0a3);
+    font-size: 10px;
+}
+
+.ramp-field[hidden] {
+    display: none;
+}
+
+.ramp-field > input,
+.ramp-field > select {
+    width: 100%;
+    min-width: 0;
+}
+
+.ui-particle-gradient .swatch {
+    height: 23px;
+    padding: 0;
+}
+
+.ui-particle-gradient > .strip:focus-visible,
+.ui-particle-curve > .plot:focus-visible {
+    outline: 1px solid var(--meep-accent, #2d7dd2);
 }
 
 .ui-particle-gradient .remove,
 .ui-particle-curve .remove {
-    flex: 0 0 auto;
+    flex: 0 0 auto;
+    justify-self: end;
     width: 1.8em;
     padding: 2px 0;
     border: 1px solid var(--meep-graph-node-border, #363c46);

package/package.json

@@ -6,7 +6,7 @@
   "description": "Advanced 3D game engine",
   "type": "module",
   "author": "Alexander Goldring",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "exports": {
     "./build/*": "./build/*",
     "./src/*": "./src/*",
@@ -48,7 +48,6 @@
   ],
   "dependencies": {
     "opentype.js": "1.3.3",
-    "pako": "2.0.3",
     "robust-predicates": "3.0.2"
   },
   "peerDependencies": {

package/samples/engine/README.md

@@ -19,7 +19,7 @@ export default {
         // CommonJS dependencies, so those have to be named. Without this, the first thing a new
         // consumer sees is a SyntaxError about a package their application never referenced,
         // a blank page, and no stack trace pointing anywhere near the engine.
-        include: ['dat.gui', 'pako', 'opentype.js'],
+        include: ['dat.gui', 'opentype.js'],
     },
 };
 ```

package/src/core/binary/compression/decompress_bytes.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Decompress pieces of one stream using the platform's compression API.
+ *
+ * Feed the input through a pipe so that read failures also cancel the input and settle the
+ * writable side. Awaiting writes before draining the output can deadlock on backpressure.
+ * The input views must remain unchanged until the returned promise settles.
+ *
+ * @param {Uint8Array[]} chunks
+ * @param {"deflate"|"deflate-raw"|"gzip"} [format] `deflate` includes the zlib header and checksum
+ * @returns {Promise<Uint8Array>}
+ */
+export function decompress_bytes(chunks: Uint8Array[], format?: "deflate" | "deflate-raw" | "gzip"): Promise<Uint8Array>;
+//# sourceMappingURL=decompress_bytes.d.ts.map

package/src/core/binary/compression/decompress_bytes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decompress_bytes.d.ts","sourceRoot":"","sources":["../../../../../src/core/binary/compression/decompress_bytes.js"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,yCAJW,UAAU,EAAE,WACZ,SAAS,GAAC,aAAa,GAAC,MAAM,GAC5B,QAAQ,UAAU,CAAC,CAkB/B"}

package/src/core/binary/compression/decompress_bytes.js

@@ -0,0 +1,28 @@
+/**
+ * Decompress pieces of one stream using the platform's compression API.
+ *
+ * Feed the input through a pipe so that read failures also cancel the input and settle the
+ * writable side. Awaiting writes before draining the output can deadlock on backpressure.
+ * The input views must remain unchanged until the returned promise settles.
+ *
+ * @param {Uint8Array[]} chunks
+ * @param {"deflate"|"deflate-raw"|"gzip"} [format] `deflate` includes the zlib header and checksum
+ * @returns {Promise<Uint8Array>}
+ */
+export async function decompress_bytes(chunks, format = "deflate") {
+    let index = 0;
+
+    const input = new ReadableStream({
+        pull(controller) {
+            if (index === chunks.length) {
+                controller.close();
+            } else {
+                controller.enqueue(chunks[index++]);
+            }
+        }
+    });
+
+    const output = input.pipeThrough(new DecompressionStream(format));
+
+    return new Uint8Array(await new Response(output).arrayBuffer());
+}