@woosh/meep-engine 3.18.0 → 3.20.0

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

@@ -1,6 +1,7 @@
 import { AnimationCurve } from "../../../../src/engine/animation/curve/AnimationCurve.js";
 import { Keyframe } from "../../../../src/engine/animation/curve/Keyframe.js";
-import { clamp01 } from "../../../../src/core/math/clamp01.js";
+import { clamp01 } from "../../../../src/core/math/clamp01.js";
+import { spline3_hermite_bounds } from "../../../../src/core/math/spline/spline3_hermite_bounds.js";
 import {
     particle_curve_animation,
     particle_curve_from_animation,
@@ -8,12 +9,12 @@ import {
 import View from "../../../../src/view/View.js";
 
 /**
- * A curve, edited in the unit square: `t` across, the value up, and the keys that make it draggable.
+ * A curve with normalized time across and an unrestricted value up.
  *
  * Drag a key to move it. Click where there is no key and one is added there, with tangents that
  * leave the curve looking like it did — so adding a key is somewhere to make an edit *from* rather
- * than an edit in itself. Middle-click a key, or press the remove button, and it goes. The picker
- * below sets the selected key's tangents, which is what shapes the curve on either side of it.
+ * than an edit in itself. Middle-click a key, or press the remove button, and it goes. The fields
+ * below edit its exact time, value and tangents.
  *
  * ## It is an AnimationCurve
  *
@@ -26,27 +27,26 @@ import View from "../../../../src/view/View.js";
  * {@link ../../../../src/shade/renderer/particles/graph/particle_ramp.js} — and its agreeing with
  * this one is what `particle_ramp.spec.js` checks.
  *
- * ## The unit square
+ * ## The viewport
  *
- * Drawn from 0 to 1 on both axes, and keys are held inside it, because that is what the node is for:
- * `t` normalised in, a factor out. A curve that wants to go to eleven is that curve times eleven,
- * which is a `mul` node and is visible in the graph — where a value of eleven hidden inside a
- * control would not be.
+ * Time spans 0 to 1. The value axis fits the curve, including extrema between keys. Its scale stays
+ * fixed throughout a pointer gesture so the mapping under the pointer cannot shift during a drag.
+ * Dragging beyond the plot continues along that scale; releasing refits the viewport.
  *
  * ## When an edit is committed
  *
  * On pointer up, for the reason set out in {@link ./ParticleGradientEditorView.js}: a key dragged
- * across the square is one thing to undo, not the hundred pointer events it was made of.
+ * across the plot is one thing to undo, not the hundred pointer events it was made of.
  */
 
 /** @type {number} */
-const WIDTH = 208;
+const WIDTH = 240;
 
 /** @type {number} */
-const HEIGHT = 84;
+const HEIGHT = 132;
 
-/** Room around the plot, so a key at 0 or 1 is drawn whole rather than clipped in half. */
-const MARGIN = 7;
+/** Separate gutters for axis labels and complete endpoint handles. Used by drawing and picking. */
+const PLOT = Object.freeze({ left: 52, top: 10, right: WIDTH - 12, bottom: HEIGHT - 20 });
 
 /** How near a key a press has to be to take hold of it rather than make a new one. */
 const GRAB_RADIUS = 8;
@@ -59,7 +59,8 @@ const GRAB_RADIUS = 8;
 const TANGENT_MODES = Object.freeze({
     Smooth: "smooth",
     Linear: "linear",
-    Flat: "flat",
+    Flat: "flat",
+    Custom: "custom",
 });
 
 export class ParticleCurveEditorView extends View {
@@ -67,7 +68,12 @@ export class ParticleCurveEditorView extends View {
      * The curve being edited — a working copy, drawn continuously and committed on release.
      * @type {AnimationCurve}
      */
-    #curve = new AnimationCurve();
+    #curve = new AnimationCurve();
+
+    /** Value bounds and tick spacing of the viewport, never limits on the authored data.
+     * @type {{min: number, max: number, step: number}}
+     */
+    #range = { min: 0, max: 1, step: 0.25 };
 
     /** @type {HTMLCanvasElement} */
     #canvas;
@@ -78,14 +84,17 @@ export class ParticleCurveEditorView extends View {
     /** @type {number} */
     #selected = 0;
 
-    /** @type {boolean} */
-    #dragging = false;
+    /** @type {number|null} */
+    #pointerId = null;
+
+    /** @type {boolean} ignore our commit's synchronous parameter-change notification */
+    #writing = false;
 
     /** @type {function():object} */
     #read;
 
     /** @type {function(object):void} */
-    #commit;
+    #write;
 
     /**
      * Which rule each key's tangents came from, by key.
@@ -105,7 +114,13 @@ export class ParticleCurveEditorView extends View {
     #modes = new WeakMap();
 
     /** @type {HTMLSelectElement} */
-    #tangents;
+    #tangents;
+
+    /** @type {HTMLInputElement} */
+    #time;
+
+    /** @type {HTMLInputElement} */
+    #value;
 
     /**
      * @param {object} options
@@ -116,7 +131,7 @@ export class ParticleCurveEditorView extends View {
         super();
 
         this.#read = read;
-        this.#commit = write;
+        this.#write = write;
 
         this.el = document.createElement('div');
 
@@ -126,7 +141,9 @@ export class ParticleCurveEditorView extends View {
 
         canvas.width = WIDTH;
         canvas.height = HEIGHT;
-        canvas.classList.add('plot');
+        canvas.classList.add('plot');
+        canvas.tabIndex = 0;
+        canvas.setAttribute('aria-label', 'Curve: normalized time t and value. Drag keys; click to add; Escape to cancel.');
 
         this.el.appendChild(canvas);
 
@@ -134,7 +151,16 @@ export class ParticleCurveEditorView extends View {
 
         fields.classList.add('key-fields');
 
-        this.el.appendChild(fields);
+        this.el.appendChild(fields);
+
+        this.#time = coordinate_field(fields, 'time', 'Time (t)');
+        this.#time.min = '0';
+        this.#time.max = '1';
+        this.#value = coordinate_field(fields, 'value', 'Value');
+
+        const tangentLabel = document.createElement('label');
+        tangentLabel.classList.add('ramp-field', 'field-tangents');
+        tangentLabel.appendChild(document.createTextNode('Tangents'));
 
         const tangents = this.#tangents = document.createElement('select');
 
@@ -145,12 +171,15 @@ export class ParticleCurveEditorView extends View {
             const option = document.createElement('option');
 
             option.value = mode;
-            option.textContent = label;
+            option.textContent = label;
+            // Authored slopes are preserved, but this picker cannot manufacture custom tangents.
+            option.disabled = mode === TANGENT_MODES.Custom;
 
             tangents.appendChild(option);
         }
 
-        fields.appendChild(tangents);
+        tangentLabel.appendChild(tangents);
+        fields.appendChild(tangentLabel);
 
         const remove = document.createElement('button');
 
@@ -164,7 +193,27 @@ export class ParticleCurveEditorView 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());
+
+        for (const input of [this.#time, this.#value]) {
+            input.addEventListener('change', () => {
+                const key = this.#curve.keys[this.#selected];
+                if (key === undefined) return;
+                const time = input === this.#time ? Number.parseFloat(input.value) : key.time;
+                const value = input === this.#value ? Number.parseFloat(input.value) : key.value;
+                this.#moveSelected(Number.isFinite(time) ? clamp01(time) : key.time,
+                    Number.isFinite(value) ? value : key.value);
+                this.#commit();
+            });
+        }
 
         tangents.addEventListener('change', () => {
             const key = this.#curve.keys[this.#selected];
@@ -176,7 +225,7 @@ export class ParticleCurveEditorView extends View {
             this.#modes.set(key, tangents.value);
             this.#applyTangents(this.#selected, tangents.value);
 
-            this.#commit(particle_curve_from_animation(this.#curve));
+            this.#commit();
             this.render();
         });
 
@@ -196,8 +245,10 @@ export class ParticleCurveEditorView extends View {
     /**
      * Re-read the parameter and redraw.
      */
-    refresh() {
-        const value = this.#read();
+    refresh() {
+        if (this.#writing) return;
+        this.#endDrag();
+        const value = this.#read();
 
         this.#curve = particle_curve_animation(
             value !== null && typeof value === "object" && Array.isArray(value.keys) ? value : { keys: [] }
@@ -209,25 +260,36 @@ export class ParticleCurveEditorView extends View {
         this.#curve.keys.forEach((key, index) => this.#modes.set(key, this.#modeOf(index)));
 
         this.#writeFields();
-        this.render();
-    }
+        this.render();
+    }
+
+    #commit() {
+        const value = particle_curve_from_animation(this.#curve);
+        if (JSON.stringify(value) === JSON.stringify(this.#read())) return;
+        this.#writing = true;
+        try {
+            this.#write(value);
+        } finally {
+            this.#writing = false;
+        }
+    }
 
     /**
      * @param {PointerEvent} event
-     * @returns {{time: number, value: number}} where in the unit square the pointer is
+     * @returns {{time: number, value: number}} the pointer in curve coordinates
      */
     #pointOf(event) {
         const rect = this.#canvas.getBoundingClientRect();
 
         const scale = rect.width / WIDTH;
 
-        const x = (event.clientX - rect.left) / scale - MARGIN;
-        const y = (event.clientY - rect.top) / (rect.height / HEIGHT) - MARGIN;
+        const x = (event.clientX - rect.left) / scale - PLOT.left;
+        const y = (event.clientY - rect.top) / (rect.height / HEIGHT) - PLOT.top;
 
         return {
-            time: clamp01(x / (WIDTH - MARGIN * 2)),
+            time: clamp01(x / (PLOT.right - PLOT.left)),
             // the plot runs upward and the canvas runs downward
-            value: clamp01(1 - y / (HEIGHT - MARGIN * 2)),
+            value: this.#range.min + (1 - y / (PLOT.bottom - PLOT.top)) * (this.#range.max - this.#range.min),
         };
     }
 
@@ -238,8 +300,8 @@ export class ParticleCurveEditorView extends View {
      */
     #plot(time, value) {
         return {
-            x: MARGIN + clamp01(time) * (WIDTH - MARGIN * 2),
-            y: MARGIN + (1 - clamp01(value)) * (HEIGHT - MARGIN * 2),
+            x: PLOT.left + time * (PLOT.right - PLOT.left),
+            y: PLOT.top + (this.#range.max - value) / (this.#range.max - this.#range.min) * (PLOT.bottom - PLOT.top),
         };
     }
 
@@ -263,7 +325,7 @@ export class ParticleCurveEditorView extends View {
 
             const away = Math.hypot(point.x - x, point.y - y);
 
-            if (away <= GRAB_RADIUS && away < distance) {
+            if (away <= GRAB_RADIUS && (away < distance || (away === distance && index === this.#selected))) {
                 nearest = index;
                 distance = away;
             }
@@ -275,8 +337,9 @@ export class ParticleCurveEditorView extends View {
     /**
      * @param {PointerEvent} event
      */
-    #press(event) {
-        const key = this.#keyUnder(event);
+    #press(event) {
+        if (this.#pointerId !== null) return;
+        const key = this.#keyUnder(event);
 
         if (event.button === 1) {
             if (key !== -1) {
@@ -294,20 +357,20 @@ export class ParticleCurveEditorView extends View {
 
         if (key !== -1) {
             this.#selected = key;
-        } else {
-            const { time } = this.#pointOf(event);
-
-            // On the curve where it already is, with tangents that keep it looking the same, so the
-            // click is somewhere to edit from rather than an edit.
-            this.#selected = this.#curve.add(Keyframe.from(time, this.#curve.evaluate(time)));
-
-            this.#modes.set(this.#curve.keys[this.#selected], TANGENT_MODES.Smooth);
-            this.#applyTangents(this.#selected, TANGENT_MODES.Smooth);
-
-            this.#commit(particle_curve_from_animation(this.#curve));
-        }
-
-        this.#dragging = true;
+        } else {
+            const { time } = this.#pointOf(event);
+
+            // Labels and gutters are not an insertion surface.
+            const rect = this.#canvas.getBoundingClientRect();
+            const x = (event.clientX - rect.left) / rect.width * WIDTH;
+            const y = (event.clientY - rect.top) / rect.height * HEIGHT;
+            if (x < PLOT.left || x > PLOT.right || y < PLOT.top || y > PLOT.bottom) return;
+            this.#insertAt(time);
+        }
+
+        event.preventDefault();
+        this.#canvas.focus({ preventScroll: true });
+        this.#pointerId = event.pointerId ?? 0;
 
         if (typeof this.#canvas.setPointerCapture === "function") {
             this.#canvas.setPointerCapture(event.pointerId);
@@ -320,18 +383,24 @@ export class ParticleCurveEditorView extends View {
     /**
      * @param {PointerEvent} event
      */
-    #move(event) {
-        if (!this.#dragging) {
+    #move(event) {
+        if (this.#pointerId !== (event.pointerId ?? 0)) {
             return;
         }
 
-        const key = this.#curve.keys[this.#selected];
-
-        if (key === undefined) {
-            return;
-        }
-
-        const { time, value } = this.#pointOf(event);
+        const { time, value } = this.#pointOf(event);
+        this.#moveSelected(time, value);
+    }
+
+    /** @param {number} time @param {number} value */
+    #moveSelected(time, value) {
+        const key = this.#curve.keys[this.#selected];
+        if (key === undefined) {
+            return;
+        }
+
+        // Crossing several keys changes neighbours at BOTH the old and new locations.
+        const affected = new Set(this.#curve.keys.slice(Math.max(0, this.#selected - 1), this.#selected + 2));
 
         key.time = time;
         key.value = value;
@@ -339,35 +408,73 @@ export class ParticleCurveEditorView extends View {
         // The curve keeps its keys in time order and this one may have crossed a neighbour. Sorting
         // by hand rather than removing and re-adding, so that the key object — and the selection
         // pointing at it — survive the move.
-        this.#selected = resort(this.#curve.keys, this.#selected);
-
-        this.render();
+        this.#selected = resort(this.#curve.keys, this.#selected);
+
+        this.#curve.keys.slice(Math.max(0, this.#selected - 1), this.#selected + 2).forEach(other => affected.add(other));
+        for (const other of affected) {
+            this.#applyTangents(this.#curve.keys.indexOf(other), this.#modes.get(other) ?? TANGENT_MODES.Custom);
+        }
+
+        this.#writeFields();
+        this.render();
     }
 
     /**
      * @param {PointerEvent} event
      */
     #release(event) {
-        if (!this.#dragging) {
+        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);
-        }
-
-        // A key that moved changed the slope on both sides of it, so whichever rule its neighbours
-        // were following has to be applied again — otherwise a "Linear" segment stops being straight
-        // the moment either of its ends is dragged.
-        this.#reapplyAround(this.#selected);
-
-        this.#commit(particle_curve_from_animation(this.#curve));
+        this.#endDrag();
+        this.#commit();
 
         this.#writeFields();
-        this.render();
-    }
+        this.render();
+    }
+
+    #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();
+    }
+
+    /** Split a Hermite segment using its exact derivative, preserving even custom curves.
+     * @param {number} time
+     */
+    #insertAt(time) {
+        const keys = this.#curve.keys;
+        const existing = keys.findIndex(key => Math.abs(key.time - time) < 1e-9);
+        if (existing !== -1) {
+            this.#selected = existing;
+            return;
+        }
+        const previous = keys[this.#curve.getKeyIndexLow(time)];
+        const next = keys[this.#curve.getKeyIndexLow(time) + 1];
+        let slope = 0;
+        if (previous !== undefined && next !== undefined && time > previous.time && time < next.time) {
+            const span = next.time - previous.time;
+            const u = (time - previous.time) / span;
+            const rise = next.value - previous.value;
+            const m0 = previous.outTangent * span;
+            const m1 = next.inTangent * span;
+            slope = ((3 * (m0 + m1 - 2 * rise) * u + 2 * (3 * rise - 2 * m0 - m1)) * u + m0) / span;
+        } else if (keys.length > 0) {
+            // The engine holds the endpoint value outside the keyed interval.
+            if (time < keys[0].time) keys[0].inTangent = 0;
+            if (time > keys[keys.length - 1].time) keys[keys.length - 1].outTangent = 0;
+        }
+        this.#selected = this.#curve.add(Keyframe.from(time, this.#curve.evaluate(time), slope, slope));
+        this.#modes.set(keys[this.#selected], this.#modeOf(this.#selected));
+    }
 
     #removeSelected() {
         // A curve with one key is a constant, which is a thing to be; a curve with none is nothing,
@@ -382,7 +489,7 @@ export class ParticleCurveEditorView extends View {
 
         this.#reapplyAround(this.#selected);
 
-        this.#commit(particle_curve_from_animation(this.#curve));
+        this.#commit();
         this.#writeFields();
         this.render();
     }
@@ -401,7 +508,7 @@ export class ParticleCurveEditorView extends View {
             const key = this.#curve.keys[neighbour];
 
             if (key !== undefined) {
-                this.#applyTangents(neighbour, this.#modes.get(key) ?? TANGENT_MODES.Smooth);
+                this.#applyTangents(neighbour, this.#modes.get(key) ?? TANGENT_MODES.Custom);
             }
         }
     }
@@ -415,9 +522,11 @@ export class ParticleCurveEditorView extends View {
 
         const key = keys[index];
 
-        if (key === undefined) {
-            return;
-        }
+        if (key === undefined) {
+            return;
+        }
+
+        if (mode === TANGENT_MODES.Custom) return;
 
         if (mode === TANGENT_MODES.Flat) {
             key.inTangent = 0;
@@ -449,8 +558,8 @@ export class ParticleCurveEditorView extends View {
     /**
      * Which rule a key's tangents look like they came from. There is nowhere to *store* the answer —
      * a curve is keys and tangents, and adding a mode to it would be inventing a format the rest of
-     * the engine does not read — so it is recovered from the numbers, which is exact for the two
-     * cases that matter and falls back to Smooth.
+     * the engine does not read — so it is recovered from the numbers for the preset rules.
+     * Slopes that do not match a rule stay Custom until explicitly changed.
      *
      * @param {number} index
      * @returns {string} a {@link TANGENT_MODES}
@@ -471,19 +580,28 @@ export class ParticleCurveEditorView extends View {
         linear.keys = this.#curve.keys.map(other => other.clone());
         linear.alignTangents(index);
 
-        return linear.keys[index].inTangent === key.inTangent && linear.keys[index].outTangent === key.outTangent
-            ? TANGENT_MODES.Linear
-            : TANGENT_MODES.Smooth;
+        const close = (a, b) => Math.abs(a - b) <= 1e-9 * Math.max(1, Math.abs(a), Math.abs(b));
+        if (close(linear.keys[index].inTangent, key.inTangent) && close(linear.keys[index].outTangent, key.outTangent)) {
+            return TANGENT_MODES.Linear;
+        }
+        const previous = this.#curve.keys[index - 1] ?? key;
+        const next = this.#curve.keys[index + 1] ?? key;
+        const slope = next.time === previous.time ? 0 : (next.value - previous.value) / (next.time - previous.time);
+        return close(slope, key.inTangent) && close(slope, key.outTangent) ? TANGENT_MODES.Smooth : TANGENT_MODES.Custom;
     }
 
     #writeFields() {
         const key = this.#curve.keys[this.#selected];
 
-        this.#tangents.value = (key === undefined ? undefined : this.#modes.get(key)) ?? TANGENT_MODES.Smooth;
+        this.#tangents.value = (key === undefined ? undefined : this.#modes.get(key)) ?? TANGENT_MODES.Smooth;
+        this.#time.value = key === undefined ? '' : String(Number(key.time.toFixed(6)));
+        this.#value.value = key === undefined ? '' : String(key.value);
+        for (const field of [this.#time, this.#value, this.#tangents]) field.disabled = key === undefined;
     }
 
-    render() {
-        const context = this.#context;
+    render() {
+        if (this.#pointerId === null) this.#range = value_range(this.#curve);
+        const context = this.#context;
 
         if (context === null) {
             return;
@@ -496,45 +614,62 @@ export class ParticleCurveEditorView extends View {
         context.fillStyle = '#171b21';
         context.fillRect(0, 0, canvas.width, canvas.height);
 
-        // the unit square, so "0" and "1" are somewhere rather than implied
+        // Numeric values on Y, normalized time on X. Both use the same mapping as the handles.
         context.strokeStyle = '#2c323b';
         context.lineWidth = 1;
         context.beginPath();
 
-        for (const fraction of [0, 0.5, 1]) {
-            const horizontal = this.#plot(0, fraction);
-            const vertical = this.#plot(fraction, 0);
-
-            context.moveTo(MARGIN, horizontal.y + 0.5);
-            context.lineTo(WIDTH - MARGIN, horizontal.y + 0.5);
-
-            context.moveTo(vertical.x + 0.5, MARGIN);
-            context.lineTo(vertical.x + 0.5, HEIGHT - MARGIN);
+        context.font = '10px sans-serif';
+        context.fillStyle = '#9da0a3';
+        const { min, max, step } = this.#range;
+        const ticks = Math.round((max - min) / step);
+        for (let i = 0; i <= ticks; i++) {
+            const value = min + i * step;
+            const horizontal = this.#plot(0, value);
+            context.moveTo(PLOT.left, horizontal.y + 0.5);
+            context.lineTo(PLOT.right, horizontal.y + 0.5);
+            context.textAlign = 'right';
+            context.fillText(String(Number(value.toPrecision(12))), PLOT.left - 9, horizontal.y + 3, PLOT.left - 12);
+        }
+        for (const fraction of [0, 0.25, 0.5, 0.75, 1]) {
+            const vertical = this.#plot(fraction, min);
+            context.moveTo(vertical.x + 0.5, PLOT.top);
+            context.lineTo(vertical.x + 0.5, PLOT.bottom);
+            context.textAlign = 'center';
+            context.fillText(String(fraction), vertical.x, PLOT.bottom + 15);
         }
 
-        context.stroke();
+        context.stroke();
 
         // The curve itself, asked of the AnimationCurve a pixel at a time — the same evaluation the
         // rest of the engine does, so what is drawn is what the curve is.
-        context.strokeStyle = '#7fb5ff';
-        context.lineWidth = 1.5;
-        context.beginPath();
-
-        for (let x = MARGIN; x <= WIDTH - MARGIN; x++) {
-            const time = (x - MARGIN) / (WIDTH - MARGIN * 2);
-
-            const point = this.#plot(time, this.#curve.evaluate(time));
-
-            if (x === MARGIN) {
+        context.strokeStyle = '#7fb5ff';
+        context.lineWidth = 1.5;
+        context.save();
+        context.beginPath();
+        context.rect(PLOT.left, PLOT.top, PLOT.right - PLOT.left, PLOT.bottom - PLOT.top);
+        context.clip();
+        context.beginPath();
+
+        for (let x = PLOT.left; x <= PLOT.right; x++) {
+            const time = (x - PLOT.left) / (PLOT.right - PLOT.left);
+
+            const value = this.#curve.evaluate(time);
+            const point = this.#plot(time, value);
+
+            if (x === PLOT.left) {
                 context.moveTo(point.x, point.y);
             } else {
                 context.lineTo(point.x, point.y);
             }
         }
 
-        context.stroke();
-
-        this.#curve.keys.forEach((key, index) => {
+        context.stroke();
+        context.restore();
+
+        const ordered = this.#curve.keys.map((key, index) => ({ key, index }))
+            .sort((a, b) => Number(a.index === this.#selected) - Number(b.index === this.#selected));
+        ordered.forEach(({ key, index }) => {
             const point = this.#plot(key.time, key.value);
 
             context.beginPath();
@@ -548,7 +683,55 @@ export class ParticleCurveEditorView extends View {
             context.stroke();
         });
     }
-}
+}
+
+/** @param {HTMLElement} parent @param {string} name @param {string} text
+ * @returns {HTMLInputElement}
+ */
+function coordinate_field(parent, name, text) {
+    const label = document.createElement('label');
+    label.classList.add('ramp-field', `field-${name}`);
+    label.appendChild(document.createTextNode(text));
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.classList.add(name);
+    input.step = 'any';
+    label.appendChild(input);
+    parent.appendChild(label);
+    return input;
+}
+
+/** Fit rounded value ticks to the entire spline, rather than just its keys or pixel samples.
+ * @param {AnimationCurve} curve
+ * @returns {{min: number, max: number, step: number}}
+ */
+function value_range(curve) {
+    const keys = curve.keys;
+    if (keys.length === 0) return { min: 0, max: 1, step: 0.25 };
+
+    let min = keys[0].value;
+    let max = min;
+    const bounds = [0, 0];
+    for (let i = 1; i < keys.length; i++) {
+        const previous = keys[i - 1];
+        const key = keys[i];
+        const span = key.time - previous.time;
+        spline3_hermite_bounds(bounds, 0, 1, previous.value, key.value,
+            previous.outTangent * span, key.inTangent * span);
+        min = Math.min(min, bounds[0]);
+        max = Math.max(max, bounds[1]);
+    }
+    if (min === max) {
+        const padding = min === 0 ? 0.5 : Math.abs(min) * 0.1;
+        min -= padding;
+        max += padding;
+    }
+    const roughStep = (max - min) / 4;
+    const magnitude = 10 ** Math.floor(Math.log10(roughStep));
+    const multiple = [1, 2, 2.5, 5, 10].find(value => value * magnitude >= roughStep) ?? 10;
+    const step = multiple * magnitude;
+    return { min: Math.floor(min / step) * step, max: Math.ceil(max / step) * step, step };
+}
 
 /**
  * Move one element of an already-sorted-but-for-it array back into place, and say where it went.