@woosh/meep-engine 3.16.0 → 3.17.1

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

@@ -0,0 +1,472 @@
+import { hex_to_rgb } from "../../../../src/core/color/hex/hex_to_rgb.js";
+import { rgb_to_hex } from "../../../../src/core/color/hex/rgb_to_hex.js";
+import { clamp01 } from "../../../../src/core/math/clamp01.js";
+import { particle_gradient_sample } from "../../../../src/shade/renderer/particles/graph/particle_ramp.js";
+import View from "../../../../src/view/View.js";
+
+/**
+ * A colour gradient, edited the way everybody edits one: a strip of the colour it produces, with the
+ * stops that make it sitting under it.
+ *
+ * Drag a stop to move it. Click the lane under the strip where there is no stop and one is added
+ * there, in the colour the gradient already is at that point — so adding a stop never changes the
+ * gradient, it only gives you somewhere to change it *from*. Middle-click a stop, or press the
+ * remove button, and it goes. The swatch and the fields below edit whichever stop is selected.
+ *
+ * There is nothing clever here and that is deliberate: this control exists in Photoshop, in every
+ * game engine and in every vector editor, it works the same way in all of them, and an author should
+ * not have to find out how this one is different.
+ *
+ * ## When an edit is committed
+ *
+ * On pointer *up*, not on every move. Each commit is one entry on the editor's undo timeline, and a
+ * stop dragged across the strip is one edit an author means to undo once — not the ninety pointer
+ * events it was made of. The strip redraws continuously while the drag is happening, so it looks
+ * live; it is only the timeline that waits.
+ */
+
+/** How wide the strip is drawn, in CSS pixels. @type {number} */
+const WIDTH = 208;
+
+/** 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;
+
+/** 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;
+
+/** Squares of the checkerboard drawn behind the strip, so alpha reads as transparency. */
+const CHECKER = 6;
+
+/**
+ * @param {number} channel `0..1`
+ * @returns {number} `0..255`
+ */
+function byte_of(channel) {
+    return Math.round(clamp01(channel) * 255);
+}
+
+export class ParticleGradientEditorView extends View {
+    /**
+     * The stops being edited. A working copy: it is what is drawn, and it becomes the parameter when
+     * an edit is committed.
+     * @type {import("../../../../src/shade/renderer/particles/graph/particle_ramp.js").ParticleGradientStop[]}
+     */
+    #stops = [];
+
+    /** @type {HTMLCanvasElement} */
+    #canvas;
+
+    /** @type {CanvasRenderingContext2D|null} */
+    #context = null;
+
+    /** @type {number} which stop the swatch and the fields below are about */
+    #selected = 0;
+
+    /** @type {boolean} */
+    #dragging = false;
+
+    /** @type {function(Array):void} */
+    #write;
+
+    /** @type {function():Array} */
+    #read;
+
+    /** @type {boolean} whether this gradient's alpha is read by the node it belongs to */
+    #has_alpha;
+
+    /** @type {HTMLInputElement} */
+    #swatch;
+
+    /** @type {HTMLInputElement} */
+    #alpha;
+
+    /** @type {HTMLInputElement} */
+    #position;
+
+    /**
+     * @param {object} options
+     * @param {function():Array} options.read the parameter's current value
+     * @param {function(Array):void} options.write commit a new value
+     * @param {boolean} [options.alpha] whether the node reads the alpha channel; an RGB gradient
+     *        still *stores* one — see {@link ./particle_ramp.js} — but does not offer it for editing
+     */
+    constructor({ read, write, alpha = true }) {
+        super();
+
+        this.#read = read;
+        this.#write = write;
+        this.#has_alpha = alpha;
+
+        this.el = document.createElement('div');
+
+        this.addClass('ui-particle-gradient');
+
+        const canvas = this.#canvas = document.createElement('canvas');
+
+        canvas.width = WIDTH;
+        canvas.height = STRIP_HEIGHT + LANE_HEIGHT;
+        canvas.classList.add('strip');
+
+        this.el.appendChild(canvas);
+
+        const fields = document.createElement('div');
+
+        fields.classList.add('stop-fields');
+
+        this.el.appendChild(fields);
+
+        this.#swatch = field(fields, 'color', 'swatch');
+        this.#alpha = field(fields, 'number', 'alpha');
+        this.#position = field(fields, 'number', 'position');
+
+        for (const input of [this.#alpha, this.#position]) {
+            input.setAttribute('min', '0');
+            input.setAttribute('max', '1');
+            input.setAttribute('step', 'any');
+        }
+
+        this.#alpha.hidden = !alpha;
+
+        const remove = document.createElement('button');
+
+        remove.type = 'button';
+        remove.classList.add('remove');
+        remove.textContent = '−';
+        remove.title = "Remove the selected stop (or middle-click it)";
+
+        fields.appendChild(remove);
+
+        this.#swatch.title = "The selected stop's colour";
+        this.#alpha.title = "The selected stop's alpha";
+        this.#position.title = "Where the selected stop sits along t";
+
+        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));
+
+        this.#swatch.addEventListener('change', () => this.#editSelected(stop => {
+            const rgb = hex_to_rgb(this.#swatch.value);
+
+            stop.color = [rgb.r / 255, rgb.g / 255, rgb.b / 255, stop.color[3] ?? 1];
+        }));
+
+        this.#alpha.addEventListener('change', () => this.#editSelected(stop => {
+            const [r = 0, g = 0, b = 0, a = 1] = stop.color;
+
+            stop.color = [r, g, b, clamp01(number_in(this.#alpha, a))];
+        }));
+
+        this.#position.addEventListener('change', () => this.#editSelected(stop => {
+            stop.position = number_in(this.#position, stop.position);
+        }));
+
+        remove.addEventListener('click', () => this.#removeSelected());
+
+        this.on.linked.add(() => {
+            if (this.#context === null) {
+                this.#context = canvas.getContext('2d');
+            }
+
+            this.refresh();
+        });
+
+        this.refresh();
+    }
+
+    /**
+     * Hand the working stops to the parameter, as a copy.
+     *
+     * A copy because this view goes on mutating its own array — the next drag writes straight into
+     * it — and what the node holds has to be what was committed rather than whatever this is doing
+     * 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));
+    }
+
+    /**
+     * 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();
+
+        this.#stops = Array.isArray(value)
+            ? value.map(stop => ({ position: stop.position, color: (stop.color ?? []).slice() }))
+            : [];
+
+        this.#selected = Math.min(this.#selected, Math.max(0, this.#stops.length - 1));
+
+        this.#writeFields();
+        this.render();
+    }
+
+    /**
+     * The stops in the order they are drawn and committed in, paired with where they were.
+     *
+     * Sorted for drawing and for the rollout, but the *selection* is an index into the unsorted
+     * array — so dragging a stop past its neighbour does not hand the selection to the neighbour,
+     * which is what makes a stop draggable all the way across the strip in one gesture.
+     *
+     * @returns {Array<{stop: object, index: number}>}
+     */
+    #ordered() {
+        return this.#stops
+            .map((stop, index) => ({ stop, index }))
+            .sort((a, b) => a.stop.position - b.stop.position);
+    }
+
+    /**
+     * @param {PointerEvent} event
+     * @returns {number} where along the strip the pointer is, `0..1`
+     */
+    #positionOf(event) {
+        const rect = this.#canvas.getBoundingClientRect();
+
+        return clamp01((event.clientX - rect.left) / rect.width);
+    }
+
+    /**
+     * @param {PointerEvent} event
+     * @returns {number} the index of the stop under the pointer, or -1
+     */
+    #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);
+
+        let nearest = -1;
+        let distance = Infinity;
+
+        this.#stops.forEach((stop, index) => {
+            const away = Math.abs(stop.position * rect.width - x);
+
+            if (away <= radius && away < distance) {
+                nearest = index;
+                distance = away;
+            }
+        });
+
+        return nearest;
+    }
+
+    /**
+     * @param {PointerEvent} event
+     */
+    #press(event) {
+        const stop = this.#stopUnder(event);
+
+        if (event.button === 1) {
+            // the power-user path to the remove button beside the fields
+            if (stop !== -1) {
+                this.#selected = stop;
+                this.#removeSelected();
+            }
+
+            event.preventDefault();
+            return;
+        }
+
+        if (event.button !== 0) {
+            return;
+        }
+
+        if (stop !== -1) {
+            this.#selected = stop;
+        } else {
+            const position = this.#positionOf(event);
+
+            // in the colour the gradient already is here, so adding a stop is not itself an edit to
+            // the gradient — it is somewhere to make one from
+            this.#stops.push({
+                position,
+                color: particle_gradient_sample(this.#stops, position),
+            });
+
+            this.#selected = this.#stops.length - 1;
+
+            this.#commit();
+        }
+
+        this.#dragging = true;
+
+        if (typeof this.#canvas.setPointerCapture === "function") {
+            this.#canvas.setPointerCapture(event.pointerId);
+        }
+
+        this.#writeFields();
+        this.render();
+    }
+
+    /**
+     * @param {PointerEvent} event
+     */
+    #move(event) {
+        if (!this.#dragging) {
+            return;
+        }
+
+        this.#stops[this.#selected].position = this.#positionOf(event);
+
+        this.#writeFields();
+        this.render();
+    }
+
+    /**
+     * @param {PointerEvent} event
+     */
+    #release(event) {
+        if (!this.#dragging) {
+            return;
+        }
+
+        this.#dragging = false;
+
+        if (typeof this.#canvas.releasePointerCapture === "function" && this.#canvas.hasPointerCapture?.(event.pointerId)) {
+            this.#canvas.releasePointerCapture(event.pointerId);
+        }
+
+        // one entry on the timeline for the whole drag; see the note at the top of this file
+        this.#commit();
+    }
+
+    /**
+     * @param {function(object):void} edit applied to the selected stop
+     */
+    #editSelected(edit) {
+        const stop = this.#stops[this.#selected];
+
+        if (stop === undefined) {
+            return;
+        }
+
+        edit(stop);
+
+        this.#commit();
+        this.#writeFields();
+        this.render();
+    }
+
+    #removeSelected() {
+        // A gradient with no stops has no colour to be, and the validator says so. Rather than let
+        // an author reach that state by clicking one button too many, the last stop stays.
+        if (this.#stops.length <= 1) {
+            return;
+        }
+
+        this.#stops.splice(this.#selected, 1);
+
+        this.#selected = Math.min(this.#selected, this.#stops.length - 1);
+
+        this.#commit();
+        this.#writeFields();
+        this.render();
+    }
+
+    /**
+     * Put the selected stop into the fields under the strip.
+     */
+    #writeFields() {
+        const stop = this.#stops[this.#selected];
+
+        const colour = stop === undefined ? [0, 0, 0, 1] : stop.color;
+
+        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);
+    }
+
+    render() {
+        const context = this.#context;
+
+        if (context === null) {
+            return;
+        }
+
+        const canvas = this.#canvas;
+
+        context.clearRect(0, 0, canvas.width, canvas.height);
+
+        // 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 y = 0; y < STRIP_HEIGHT; y += CHECKER) {
+                    context.fillStyle = ((x + y) / CHECKER) % 2 === 0 ? '#4c4f54' : '#6a6e74';
+                    context.fillRect(x, y, CHECKER, 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));
+
+            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;
+            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.closePath();
+
+            // the marker carries the stop's own colour, so the lane reads as the stops rather than
+            // as a row of identical arrows
+            context.fillStyle = `rgb(${byte_of(stop.color[0])}, ${byte_of(stop.color[1])}, ${byte_of(stop.color[2])})`;
+            context.fill();
+
+            context.lineWidth = selected ? 2 : 1;
+            context.strokeStyle = selected ? '#ffd35c' : '#20242a';
+            context.stroke();
+        }
+    }
+}
+
+/**
+ * @param {HTMLElement} parent
+ * @param {string} type
+ * @param {string} className
+ * @returns {HTMLInputElement}
+ */
+function field(parent, type, className) {
+    const input = document.createElement('input');
+
+    input.setAttribute('type', type);
+    input.classList.add(className);
+
+    parent.appendChild(input);
+
+    return input;
+}
+
+/**
+ * What a number field holds, or `fallback` where it holds nothing a number can be made of — a
+ * half-typed value should snap back rather than become zero.
+ *
+ * @param {HTMLInputElement} input
+ * @param {number} fallback
+ * @returns {number}
+ */
+function number_in(input, fallback) {
+    const parsed = Number.parseFloat(input.value);
+
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+

package/editor/view/particles/effect/ParticleGraphEditorView.d.ts

@@ -131,6 +131,11 @@ export class ParticleGraphEditorView extends View {
      * Everything is listed, whichever phase it belongs to, because a problem in the phase an author
      * is not looking at is exactly the one they would otherwise hunt for. Nodes carrying a problem
      * are marked in the graph as well.
+     *
+     * Loudest first, so a strip too short to show everything shows what matters. What is left over
+     * at the bottom is the notes — a node nothing reads, most of all — and a graph with nothing but
+     * those still says it has no problems, because it has none: they are things worth knowing about
+     * an effect that compiles.
      */
     refreshProblems(): void;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"ParticleGraphEditorView.d.ts","sourceRoot":"","sources":["../../../../../editor/view/particles/effect/ParticleGraphEditorView.js"],"names":[],"mappings":"AA4KA;IAgFI;;;;;OAKG;IACH;QAJyG,MAAM,EAApG,OAAO,qDAAqD,EAAE,sBAAsB;QAC1D,eAAe;OAsDnD;IAhDG,mBAAuC;IAIvC;;OAEG;IACH,QAFU,OAAO,qDAAqD,EAAE,sBAAsB,CAE1E;IAEpB;;OAEG;IACH,2CAAsC;IAsX1C;;;;;;;;;;;;;;;OAeG;IACH,kBAHa,QAAQ,eAAa,IAAI,CAAC,CAwEtC;IAED;;;;;;;;OAQG;IACH,oBAFa,QAAQ,cAAc,CAAC,CAgCnC;IA6ID;;;;;;;;;;;;;OAaG;IACH,iBAHW,OAAO,qEAAqE,EAAE,iBAAiB,GAC7F,IAAI,CAsDhB;IAED;;;OAGG;IACH,cAFa,IAAI,CAIhB;IAED;;;;;OAKG;IACH,sBAHW,MAAM,GACJ,IAAI,CAWhB;IAED;;;;OAIG;IACH,cAFa,OAAO,qEAAqE,EAAE,iBAAiB,EAAE,CAI7G;IAED;;;;;;;;;;OAUG;IACH,gBAuCC;IAwBD;;;;;;;OAOG;IACH,wDAHW,MAAM,GACJ,qBAAqB,CAiBjC;IAiED;;;;OAIG;IACH,gBAFa,mBAAmB,CAQ/B;IAED;;OAEG;IACH,eAFa,MAAM,CAIlB;IAED;;;OAGG;IACH,aAFW,MAAM,QAmBhB;IAoGD;;;;;;;;;OASG;IACH,mBAJW,OAAO,qEAAqE,EAAE,iBAAiB,SAC/F,MAAM,GACJ,IAAI,CAqBhB;IAED;;;;;;OAMG;IACH,wBAgCC;IAgDD;;;;;OAKG;IACH,qBAHW,MAAM,WACN,MAAM,QA2BhB;IAED;;;;;OAKG;IACH,cAFa,OAAO,6CAA6C,EAAE,uBAAuB,GAAC,IAAI,CAI9F;IAED,eAuBC;;CAgCJ;iBA99CgB,8BAA8B;gCA/Bf,sDAAsD;oCAiClD,yCAAyC"}
+{"version":3,"file":"ParticleGraphEditorView.d.ts","sourceRoot":"","sources":["../../../../../editor/view/particles/effect/ParticleGraphEditorView.js"],"names":[],"mappings":"AA0LA;IA6FI;;;;;OAKG;IACH;QAJyG,MAAM,EAApG,OAAO,qDAAqD,EAAE,sBAAsB;QAC1D,eAAe;OAsDnD;IAhDG,mBAAuC;IAIvC;;OAEG;IACH,QAFU,OAAO,qDAAqD,EAAE,sBAAsB,CAE1E;IAEpB;;OAEG;IACH,2CAAsC;IA4X1C;;;;;;;;;;;;;;;OAeG;IACH,kBAHa,QAAQ,eAAa,IAAI,CAAC,CAwEtC;IAED;;;;;;;;OAQG;IACH,oBAFa,QAAQ,cAAc,CAAC,CAgCnC;IA+ID;;;;;;;;;;;;;OAaG;IACH,iBAHW,OAAO,qEAAqE,EAAE,iBAAiB,GAC7F,IAAI,CAsDhB;IAED;;;OAGG;IACH,cAFa,IAAI,CAIhB;IAED;;;;;OAKG;IACH,sBAHW,MAAM,GACJ,IAAI,CAWhB;IAED;;;;OAIG;IACH,cAFa,OAAO,qEAAqE,EAAE,iBAAiB,EAAE,CAI7G;IAED;;;;;;;;;;OAUG;IACH,gBAuCC;IAwBD;;;;;;;OAOG;IACH,wDAHW,MAAM,GACJ,qBAAqB,CAiBjC;IAiED;;;;OAIG;IACH,gBAFa,mBAAmB,CAQ/B;IAED;;OAEG;IACH,eAFa,MAAM,CAIlB;IAED;;;OAGG;IACH,aAFW,MAAM,QAmBhB;IAoGD;;;;;;;;;OASG;IACH,mBAJW,OAAO,qEAAqE,EAAE,iBAAiB,SAC/F,MAAM,GACJ,IAAI,CAqBhB;IAED;;;;;;;;;;;OAWG;IACH,wBAoCC;IAoDD;;;;;OAKG;IACH,qBAHW,MAAM,WACN,MAAM,QA2BhB;IAED;;;;;OAKG;IACH,cAFa,OAAO,6CAA6C,EAAE,uBAAuB,GAAC,IAAI,CAI9F;IAED,eAuBC;;CAgCJ;iBAtgDgB,8BAA8B;gCAvCf,sDAAsD;oCA0ClD,yCAAyC"}

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

@@ -3,13 +3,21 @@ import { PortDirection } from "../../../../src/core/model/node-graph/node/PortDi
 import { ActionProcessor } from "../../../../src/core/process/undo/ActionProcessor.js";
 import { infer_particle_graph_types } from "../../../../src/shade/renderer/particles/graph/infer_particle_graph_types.js";
 import { particle_group_from_nodes } from "../../../../src/shade/renderer/particles/graph/make_particle_group.js";
+import {
+    PARTICLE_GRAPH_ERROR,
+    PARTICLE_GRAPH_INFO,
+    PARTICLE_GRAPH_SEVERITY_RANK,
+    PARTICLE_GRAPH_WARNING,
+} from "../../../../src/shade/renderer/particles/graph/particle_graph_diagnostic.js";
 import {
     particle_group_descriptions,
 } from "../../../../src/shade/renderer/particles/graph/particle_group_json.js";
 import {
+    is_particle_group_boundary,
     is_particle_group_description,
 } from "../../../../src/shade/renderer/particles/graph/ParticleNodeGroup.js";
 import {
+    clone_particle_parameters,
     particle_node_default_parameters,
     particle_node_parameters,
 } from "../../../../src/shade/renderer/particles/graph/particle_node_parameters.js";
@@ -33,6 +41,7 @@ import LabelView from "../../../../src/view/common/LabelView.js";
 import EmptyView from "../../../../src/view/elements/EmptyView.js";
 import View from "../../../../src/view/View.js";
 import { NodeGraphCamera } from "../../node-graph/NodeGraphCamera.js";
+import { NodeGraphClipboard } from "../../node-graph/NodeGraphClipboard.js";
 import { NodeGraphEditorView } from "../../node-graph/NodeGraphEditorView.js";
 import { NodeCreateAction } from "../../node-graph/actions/NodeCreateAction.js";
 import { NodeDeleteAction } from "../../node-graph/actions/NodeDeleteAction.js";
@@ -48,8 +57,9 @@ import { ParticleNodeParametersView } from "./ParticleNodeParametersView.js";
  *
  * Built *with* the node-graph editor rather than in it. Everything particle-specific arrives
  * through the seams the base offers — the node library the canvas's add-node menu offers, a
- * parameter-view factory that draws vector, enum, attribute and swizzle controls, and a problems
- * list fed by the document's own compile. The base is left knowing nothing about particles.
+ * parameter-view factory that draws vector, enum, attribute and swizzle controls, the one rule the
+ * clipboard needs (a group's boundary blocks are not something there can be a second of), and a
+ * problems list fed by the document's own compile. The base is left knowing nothing about particles.
  *
  * ## Adding a node
  *
@@ -79,8 +89,8 @@ import { ParticleNodeParametersView } from "./ParticleNodeParametersView.js";
  * ## What is undoable
  *
  * Everything that touches a graph, through the {@link ActionProcessor} the host supplies. Adding a
- * node from the menu, wiring, moving, deleting, and every parameter edit inside a node all land
- * on one timeline, so a host editor's global undo covers particle authoring without knowing it
+ * node from the menu, wiring, moving, deleting, pasting, and every parameter edit inside a node all
+ * land on one timeline, so a host editor's global undo covers particle authoring without knowing it
  * exists.
  */
 
@@ -127,13 +137,17 @@ const PARTICLE_TYPE_COLORS = new Map([
 const PALETTE_CATEGORIES = [
     { name: "sources", types: ["const", "color", "builtin", "attribute", "random", "curve"] },
     { name: "output", types: ["setAttribute", "kill"] },
-    { name: "arithmetic", types: ["add", "sub", "mul", "div", "mad", "scale", "min", "max", "pow", "step", "mix", "clamp", "smoothstep", "remap", "oneMinus"] },
-    { name: "math", types: ["neg", "abs", "floor", "fract", "round", "ceil", "sqrt", "sin", "cos", "exp", "log"] },
+    // 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
+    // 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"] },
+    { name: "math", types: ["neg", "abs", "floor", "fract", "round", "ceil", "sqrt", "rsqrt", "sin", "cos", "tan", "asin", "acos", "atan2", "exp", "log"] },
     { name: "vector", types: ["vec2", "vec3", "vec4", "decompose2", "decompose3", "decompose4", "swizzle", "dot", "cross", "length", "normalize", "distance", "angleBetween2", "angleBetween3"] },
     { name: "logic", types: ["compare", "select"] },
     { name: "rotation", types: ["quatFromAxisAngle", "quatLookRotation", "quatRotate"] },
     { name: "sampling", types: ["sampleSphereSurface", "sampleSphereVolume"] },
-    { name: "noise", types: ["simplex3", "simplex4", "curl3", "curl4"] },
+    { name: "noise", types: ["simplex3", "simplex4", "curl3", "curl4", "srdnoise3", "psrdnoise3"] },
 ];
 
 /**
@@ -221,6 +235,19 @@ export class ParticleGraphEditorView extends View {
      */
     #open_groups = [];
 
+    /**
+     * One clipboard for every canvas this view builds — both phases, and the body of every group
+     * opened inside them.
+     *
+     * `Ctrl+C` in INIT and `Ctrl+V` in UPDATE is the same gesture an author expects it to be, and a
+     * clipboard per canvas would make it two. It belongs to this view rather than to the module,
+     * because what it holds is node types this document knows — a group an author made here has no
+     * meaning in another document's graph.
+     *
+     * @type {NodeGraphClipboard}
+     */
+    #clipboard = new NodeGraphClipboard();
+
     /**
      * Phases whose camera has not yet been pointed at their contents. A graph that has just been
      * arranged for the first time is somewhere in particular, and it is not the origin.
@@ -438,6 +465,12 @@ export class ParticleGraphEditorView extends View {
             camera: new NodeGraphCamera(),
             actionProcessor: this.actionProcessor,
             readOnly,
+            clipboard: this.#clipboard,
+            // A group body's input and output blocks are its edge, not its contents: there is one of
+            // each, the group holds them by reference, and a second would survive flattening and
+            // reach the compiler. So they are left out of a copy rather than the copy being refused
+            // — an author who dragged a box around a whole group body wants what is inside it.
+            copyable: node => !is_particle_group_boundary(node),
             library: {
                 // The menu heads each *run* of one category, so the order it is handed decides the
                 // order it shows; sorting here keeps that decision on the particle side of the seam.
@@ -815,7 +848,9 @@ export class ParticleGraphEditorView extends View {
                 inner.description,
                 (placed?.x ?? 0) + (at === undefined ? 0 : at.x - origin.x),
                 (placed?.y ?? 0) + (at === undefined ? 0 : at.y - origin.y),
-                clone_parameters(inner.parameters)
+                // deeply: an ungrouped node must not share so much as a gradient stop with the group
+                // definition it came out of
+                clone_particle_parameters(inner.parameters)
             ));
         }
 
@@ -1354,6 +1389,11 @@ export class ParticleGraphEditorView extends View {
      * Everything is listed, whichever phase it belongs to, because a problem in the phase an author
      * is not looking at is exactly the one they would otherwise hunt for. Nodes carrying a problem
      * are marked in the graph as well.
+     *
+     * Loudest first, so a strip too short to show everything shows what matters. What is left over
+     * at the bottom is the notes — a node nothing reads, most of all — and a graph with nothing but
+     * those still says it has no problems, because it has none: they are things worth knowing about
+     * an effect that compiles.
      */
     refreshProblems() {
         // The graph's own problems, not the running program's: with the code layer authoritative the
@@ -1363,9 +1403,13 @@ export class ParticleGraphEditorView extends View {
 
         this.#diagnostics = diagnostics;
 
+        // stable within a level, so the order the checks found them in survives
+        diagnostics.sort((a, b) =>
+            PARTICLE_GRAPH_SEVERITY_RANK[b.severity] - PARTICLE_GRAPH_SEVERITY_RANK[a.severity]);
+
         this.#problems.removeAllChildren();
 
-        if (diagnostics.length === 0) {
+        if (!diagnostics.some(diagnostic => diagnostic.severity !== PARTICLE_GRAPH_INFO)) {
             this.#problems.addChild(new LabelView("No problems.", { classList: ['none'] }));
         }
 
@@ -1425,14 +1469,18 @@ export class ParticleGraphEditorView extends View {
                 continue;
             }
 
-            // an error outranks a warning on the same node
-            if (diagnostic.severity === "error" || severity === undefined) {
+            // a node wears the loudest thing said about it: an error over a warning, either over a note
+            if (
+                severity === undefined
+                || PARTICLE_GRAPH_SEVERITY_RANK[diagnostic.severity] > PARTICLE_GRAPH_SEVERITY_RANK[severity]
+            ) {
                 severity = diagnostic.severity;
             }
         }
 
-        nodeView.setClass('has-error', severity === "error");
-        nodeView.setClass('has-warning', severity === "warning");
+        nodeView.setClass('has-error', severity === PARTICLE_GRAPH_ERROR);
+        nodeView.setClass('has-warning', severity === PARTICLE_GRAPH_WARNING);
+        nodeView.setClass('has-info', severity === PARTICLE_GRAPH_INFO);
     }
 
     /**
@@ -1596,24 +1644,6 @@ function body_origin(group) {
     return Number.isFinite(x) ? { x, y } : { x: 0, y: 0 };
 }
 
-/**
- * A node's parameters, deep enough that the copy and the original cannot write through to each
- * other — an ungrouped node must not share an array with the group's definition.
- *
- * @param {object} parameters
- * @returns {object}
- */
-function clone_parameters(parameters) {
-    const result = {};
-
-    for (const key of Object.keys(parameters)) {
-        const value = parameters[key];
-
-        result[key] = Array.isArray(value) ? value.slice() : value;
-    }
-
-    return result;
-}
 
 /**
  * @param {string} type node type name