@woosh/meep-engine 3.15.0 → 3.16.0

package/editor/view/node-graph/node-graph.css

@@ -0,0 +1,678 @@
+/*
+ Styling for the node-graph editor views.
+
+ Plain CSS, and co-located with the views it dresses the way `src/view/layout/layout.scss` is with
+ the layout constructs — a host includes it with a <link> or a bundler import. Plain rather than SCSS
+ so a page with no sass toolchain (the playgrounds) can serve it directly.
+
+ Use-case agnostic, like the views: nothing here knows what a graph is for. Colours and fonts go
+ through --meep-* custom properties with dark fallbacks, so a host theme re-skins the editor by
+ defining the tokens on an ancestor.
+
+ The view framework positions everything by writing `transform` and `width`/`height` inline, so
+ every view that is placed by its parent is `position: absolute` here. The exceptions are the ones
+ that are content rather than layout — a node's ports and parameter rows, a palette entry — which
+ flow, and are measured afterwards rather than placed in advance.
+*/
+
+.ui-node-graph-editor-view,
+.ui-node-graph-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+}
+
+/*
+ Dragging across the canvas is a gesture of the editor's — panning, or pulling a selection box — and
+ the browser answering it by highlighting every node title the box crossed is not what was asked
+ for. The fields are the exception: text in one is text meant to be selected.
+*/
+.ui-node-graph-view {
+    user-select: none;
+}
+
+.ui-node-graph-view input,
+.ui-node-graph-view textarea {
+    user-select: text;
+}
+
+.ui-node-graph-editor-view {
+    background:
+        radial-gradient(circle at 50% 30%, var(--meep-graph-bg-glow, #1a1e26) 0%, var(--meep-graph-bg, #12151b) 70%);
+}
+
+/* The canvas nodes are laid out on. Scaled and translated as one, so the camera is a transform. */
+.ui-node-graph-view > .block-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    /* nodes are placed inside it and it is never measured, so it must not clip them */
+    overflow: visible;
+    /* wires are drawn on the canvas above; nodes have to be reachable through it */
+    z-index: 2;
+}
+
+/*
+ Wires are drawn on this. It is an AutoCanvasView, which re-renders at whatever size a
+ ResizeObserver reports for it — so it has to fill its parent in CSS as well as being sized
+ programmatically. A canvas element's intrinsic size is 300x150, and without this the observer's
+ first delivery reports that and writes it back over the size the graph view had just set, leaving
+ the wires drawn into a 300x150 corner.
+*/
+.ui-node-graph-view > .connection-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    pointer-events: none;
+}
+
+/*
+ The rubber-band selection box. Over the nodes rather than under them — a box whose far edge is
+ hidden behind a node is not showing what it is about to select — and never in the way of the
+ pointer that is drawing it.
+*/
+.ui-node-graph-view > .marquee {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 4;
+    pointer-events: none;
+    border: 1px dashed var(--meep-accent, #2d7dd2);
+    background: var(--meep-graph-marquee-fill, rgba(45, 125, 210, 0.14));
+}
+
+/*
+ What letting go will do, while there is still time to change it: a box that adds to the selection
+ (SHIFT) and one that toggles what it covers (CTRL) are not the one that replaces it.
+*/
+.ui-node-graph-view > .marquee.additive {
+    border-style: solid;
+    border-color: var(--meep-graph-marquee-add, #4caf76);
+    background: var(--meep-graph-marquee-add-fill, rgba(76, 175, 118, 0.14));
+}
+
+.ui-node-graph-view > .marquee.toggle {
+    border-style: dotted;
+    border-color: var(--meep-graph-marquee-toggle, #d2a12d);
+    background: var(--meep-graph-marquee-toggle-fill, rgba(210, 161, 45, 0.12));
+}
+
+/* --- the action bar that floats over the graph --------------------------------------------- */
+
+.ui-node-graph-editor-view > .user-interface {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 3;
+}
+
+.ui-node-graph-editor-view > .user-interface > .actions {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    display: flex;
+    gap: 6px;
+    pointer-events: auto;
+}
+
+.ui-node-graph-editor-view > .user-interface > .actions > * {
+    width: 26px;
+    height: 26px;
+    border: 1px solid var(--meep-graph-node-border, #363c46);
+    border-radius: 4px;
+    background: var(--meep-graph-node-bg, #232830);
+    color: var(--meep-fg, #d6d8da);
+    cursor: pointer;
+}
+
+.ui-node-graph-editor-view > .user-interface > .actions > *:hover {
+    border-color: var(--meep-accent, #2d7dd2);
+}
+
+.ui-node-graph-editor-view > .user-interface > .actions > .contain-all::after {
+    content: "⤢";
+    display: block;
+    line-height: 24px;
+    text-align: center;
+}
+
+/* --- minimap -------------------------------------------------------------------------------- */
+
+/*
+ The map of the whole graph, parked above the action bar in the same corner. Its size is written
+ inline by the view — it is a decision the view makes, not one the layout makes — so nothing here
+ sets a width or a height; this places it and dresses it.
+
+ The colours the map draws with are read from these tokens by NodeGraphMinimapView, which is why
+ they are declared here rather than only in its fallbacks: a host that re-skins the editor re-skins
+ the map with it.
+*/
+.ui-node-graph-minimap-view {
+    position: absolute;
+    right: 8px;
+    bottom: 42px;
+
+    /*
+     Content box, deliberately and explicitly: the view writes its own width and height, the canvas
+     inside is given the same pair, and a border counted into that box would leave the canvas two
+     pixels wider than the space it is drawn in — which is two pixels of error in where a click on
+     the map lands. Stated rather than left to the default, so a host's `* { box-sizing: border-box }`
+     does not quietly reintroduce it.
+    */
+    box-sizing: content-box;
+    border: 1px solid var(--meep-graph-node-border, #363c46);
+    border-radius: 4px;
+    background: var(--meep-minimap-bg, rgba(14, 17, 22, 0.82));
+    overflow: hidden;
+
+    pointer-events: auto;
+    /* dragging the map is a camera gesture, not a text selection */
+    user-select: none;
+
+    --meep-minimap-wire: rgba(120, 132, 150, 0.5);
+    --meep-minimap-node: rgba(198, 206, 218, 0.72);
+    --meep-minimap-viewport: rgba(255, 255, 255, 0.85);
+}
+
+.ui-node-graph-minimap-view:hover {
+    border-color: var(--meep-accent, #2d7dd2);
+}
+
+.ui-node-graph-minimap-view > .map {
+    position: absolute;
+    top: 0;
+    left: 0;
+    /* the canvas is sized programmatically; its 300x150 intrinsic size must not show through */
+    width: 100%;
+    height: 100%;
+    display: block;
+    cursor: pointer;
+}
+
+/*
+ The control that folds the map away, and the whole of the map once it is folded. It sits over the
+ map's top-right corner rather than in a title bar of its own: a strip above the map would cost as
+ much room as the map's own top edge and say nothing.
+*/
+.ui-node-graph-minimap-view > .toggle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 18px;
+    height: 18px;
+    /* centred by the box rather than by a line height, which would have to be kept equal to a size
+       the view decides in JS */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--meep-fg-muted, #9da0a3);
+    font-size: 13px;
+    line-height: 1;
+}
+
+/* The glyph is the literal character, the way `.contain-all` above does it: an escape says the
+   same thing with one more layer between the stylesheet and the screen, and that layer is where
+   it gets miscopied. */
+.ui-node-graph-minimap-view > .toggle::after {
+    content: "–";
+}
+
+.ui-node-graph-minimap-view > .toggle:hover {
+    color: var(--meep-fg, #d6d8da);
+}
+
+/* folded away, the view is the button: it fills it, and says which way it will go */
+.ui-node-graph-minimap-view.collapsed {
+    background: var(--meep-graph-node-bg, #232830);
+}
+
+.ui-node-graph-minimap-view.collapsed > .toggle {
+    width: 100%;
+    height: 100%;
+    font-size: 15px;
+}
+
+.ui-node-graph-minimap-view.collapsed > .toggle::after {
+    content: "◱";
+}
+
+/* --- nodes ---------------------------------------------------------------------------------- */
+
+.ui-node-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    box-sizing: border-box;
+    padding: 0;
+
+    border: 1px solid var(--meep-graph-node-border, #363c46);
+    border-radius: 6px;
+    background: var(--meep-graph-node-bg, #232830);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
+
+    font: var(--meep-font, 12px 'Segoe UI', sans-serif);
+    color: var(--meep-fg, #d6d8da);
+
+    /* a node is a handle: dragging one must not sweep up its own label as a text selection */
+    user-select: none;
+
+    /*
+     A node is exactly as big as what is in it.
+
+     Nothing writes a width or a height here: the visual data's box is an estimate for a node nobody
+     has drawn yet, and a node that is on screen is the authority on its own size — a picker is as
+     wide as the longest thing it can say, and a host's own control is whatever the host drew.
+     NodeView measures the result and writes it back, so the model still has a box for the router,
+     the camera and the file to work from. See NodeView.
+
+     `max-content` rather than the shrink-to-fit an absolutely positioned box would otherwise get:
+     the canvas nodes sit on has no width of its own to fit into, and every row would collapse to
+     its longest word. The cap keeps one long picker from stretching a node across the graph;
+     content past it wraps.
+    */
+    width: max-content;
+    min-width: 72px;
+    max-width: 340px;
+}
+
+.ui-node-view.selected {
+    border-color: var(--meep-accent, #2d7dd2);
+    box-shadow: 0 0 0 1px var(--meep-accent, #2d7dd2), 0 2px 10px rgba(0, 0, 0, 0.5);
+}
+
+/* The name is written after the parameters in the DOM; ordering puts it back on top where it reads. */
+.ui-node-view > .name {
+    order: -1;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    border-bottom: 1px solid var(--meep-graph-node-border, #363c46);
+    border-radius: 5px 5px 0 0;
+    background: var(--meep-graph-node-header, #2b313b);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+}
+
+/* the label may wrap; the glyph beside it must not be squeezed into a sliver by that */
+.ui-node-view > .name > .label {
+    min-width: 0;
+}
+
+/* a node that is nothing but its name has no row under the rule, so there is no rule */
+.ui-node-view > .name:only-child {
+    border-bottom: none;
+    border-radius: 5px;
+}
+
+/* The ports are written after the parameters in the DOM; wires read better leaving the top of a
+   node, so ordering puts them above. */
+.ui-node-view > .ports {
+    order: 1;
+}
+
+.ui-node-view > .parameters-container {
+    order: 2;
+}
+
+/* --- icons ---------------------------------------------------------------------------------- */
+
+/*
+ A node type's glyph, wherever it is shown. The artwork is path data in a 24x24 box and carries no
+ colour of its own (see NodeIconView), so everything about how it looks is here: it takes the
+ colour of the text beside it, and one rule changes every icon in the editor at once.
+
+ `non-scaling-stroke` is what keeps the line weight the same in a node's header and in a palette
+ row, which are different sizes: without it the stroke scales with the box and the small one goes
+ spidery while the large one goes fat.
+*/
+.ui-node-icon-view {
+    flex: 0 0 auto;
+    width: 14px;
+    height: 14px;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    /* the name says what the node is; the glyph is not a second, worse copy of that */
+    pointer-events: none;
+}
+
+.ui-node-icon-view path {
+    vector-effect: non-scaling-stroke;
+}
+
+/* a header is bolder than the text around it, and an icon drawn at the text's weight reads as
+   dimmer than the word next to it rather than as part of it */
+.ui-node-view > .name > .ui-node-icon-view {
+    width: 15px;
+    height: 15px;
+    opacity: 0.85;
+}
+
+/* --- ports ---------------------------------------------------------------------------------- */
+
+/*
+ Ports are content: inputs down the left, outputs down the right, and anything else wrapped onto a
+ row of its own underneath. Which is the arrangement the wires assume — one leaves an output
+ rightwards and arrives at an input from the left — so a node reads the way its graph flows.
+
+ The markers are where the wires meet, and nothing here says where those are: NodeView measures them
+ once the browser has placed them. Moving a port is a matter of changing this stylesheet.
+*/
+.ui-node-view > .ports {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    padding: 5px 4px;
+    /* an output column and an input column that would otherwise touch on a narrow node */
+    column-gap: 14px;
+}
+
+.ui-node-view > .ports > .inputs,
+.ui-node-view > .ports > .outputs {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.ui-node-view > .ports > .outputs {
+    /* the right edge, whether or not there is an input column to sit beside */
+    margin-left: auto;
+    align-items: flex-end;
+}
+
+/* a full basis forces the wrap, so these sit under both columns rather than beside them */
+.ui-node-view > .ports > .unspecified {
+    flex-basis: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 2px 10px;
+    padding-top: 4px;
+}
+
+/*
+ The dot is the handle, and only the dot: a port row reaches across its label, and a press there is
+ an author moving the node rather than pulling a wire out of it. Events on the marker still reach
+ the row, which is where the drag is listened for.
+*/
+.ui-port-view {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    min-height: 14px;
+    pointer-events: none;
+}
+
+/* The marker is written first; on an output it belongs on the outside, past the label, so that the
+   dot is the thing at the node's edge and the wire reaches it without crossing its own name. */
+.ui-port-view.direction-out > .marker {
+    order: 1;
+}
+
+.ui-port-view > .marker {
+    flex: 0 0 auto;
+    width: 10px;
+    height: 10px;
+    box-sizing: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.55);
+    border-radius: 50%;
+    cursor: crosshair;
+    pointer-events: auto;
+}
+
+.ui-port-view > .marker:hover {
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
+}
+
+.ui-port-view > .name {
+    white-space: nowrap;
+    color: var(--meep-fg-muted, #9da0a3);
+    font-size: 11px;
+}
+
+/* --- parameters ----------------------------------------------------------------------------- */
+
+.ui-node-view .parameters {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 6px 10px;
+}
+
+/*
+ Wraps rather than overflows. Controls keep their natural size (below) and the node grows to hold
+ them, but the node has a maximum width — and a row wider than that has to break somewhere. Breaking
+ puts the control on its own line and makes the node taller, which the measurement then records;
+ not breaking would put it outside the node's border, which is the thing this layout exists to stop.
+*/
+.ui-node-view .parameter-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    justify-content: space-between;
+}
+
+.ui-node-view .parameter-row > .name {
+    color: var(--meep-fg-muted, #9da0a3);
+    font-size: 11px;
+    white-space: nowrap;
+    /* a label squeezed by the rule above has nowhere to put the rest of itself */
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/*
+ Controls keep their natural size and the node grows to hold them, rather than being squeezed into a
+ box decided in advance — a picker narrower than the option it is showing is a picker that does not
+ say what the node does.
+
+ They give way only at the node's maximum width, and in that order: the node grows first, then the
+ row wraps, then — for a single control too wide to wrap out of trouble — it shrinks and its text is
+ cut. A cut label is a poor last resort; a control drawn outside the node it belongs to is a worse
+ one.
+
+ The last step is a flex item's `min-width`, not a `max-width`: a `max-width` here would be more
+ specific than the plain `.some-panel select` rule a host caps its own controls with, and quietly
+ win it. Nothing in this file should out-argue the host about the host's own controls.
+*/
+.ui-node-view .parameter-row > * {
+    flex: 0 1 auto;
+    min-width: 0;
+}
+
+.ui-node-view input,
+.ui-node-view select {
+    box-sizing: border-box;
+    padding: 2px 4px;
+    border: 1px solid var(--meep-graph-node-border, #363c46);
+    border-radius: 3px;
+    background: var(--meep-graph-input-bg, #171b21);
+    color: var(--meep-fg, #d6d8da);
+    font: inherit;
+    font-size: 11px;
+}
+
+.ui-node-view input:focus,
+.ui-node-view select:focus {
+    outline: none;
+    border-color: var(--meep-accent, #2d7dd2);
+}
+
+.ui-node-view input[type="checkbox"] {
+    width: auto;
+}
+
+/* --- palette -------------------------------------------------------------------------------- */
+
+.ui-node-graph-palette-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    box-sizing: border-box;
+    border-right: 1px solid var(--meep-divider-color, #232527);
+    background: var(--meep-panel-bg, #1a1e25);
+
+    font: var(--meep-font, 12px 'Segoe UI', sans-serif);
+    color: var(--meep-fg, #d6d8da);
+}
+
+.ui-node-graph-palette-view > .search {
+    box-sizing: border-box;
+    margin: 6px;
+    padding: 4px 6px;
+    border: 1px solid var(--meep-graph-node-border, #363c46);
+    border-radius: 4px;
+    background: var(--meep-graph-input-bg, #171b21);
+    color: inherit;
+    font: inherit;
+}
+
+.ui-node-graph-palette-view > .search:focus {
+    outline: none;
+    border-color: var(--meep-accent, #2d7dd2);
+}
+
+.ui-node-graph-palette-view > .entries {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    padding-bottom: 8px;
+}
+
+.ui-node-graph-palette-view .category {
+    padding: 8px 10px 2px;
+    color: var(--meep-fg-muted, #9da0a3);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.ui-node-graph-palette-view .entry {
+    display: flex;
+    align-items: flex-start;
+    gap: 7px;
+    padding: 3px 10px;
+    cursor: pointer;
+    user-select: none;
+}
+
+/* the glyph sits against the name's line, not against the middle of a two-line entry */
+.ui-node-graph-palette-view .entry > .ui-node-icon-view {
+    margin-top: 2px;
+    opacity: 0.8;
+}
+
+.ui-node-graph-palette-view .entry > .text {
+    min-width: 0;
+}
+
+.ui-node-graph-palette-view .entry.highlighted {
+    background: var(--meep-accent, #2d7dd2);
+}
+
+/*
+ The label, not the type name — so this is prose and is set as prose. It was monospace while it was
+ the mnemonic `smoothstep`, which is code and reads as code; "Smooth Step" set in a terminal font
+ reads as a mistake.
+*/
+.ui-node-graph-palette-view .entry .name {
+    font-size: 11.5px;
+}
+
+.ui-node-graph-palette-view .entry .description {
+    color: var(--meep-fg-muted, #9da0a3);
+    font-size: 10.5px;
+}
+
+.ui-node-graph-palette-view .entry.highlighted .description {
+    color: rgba(255, 255, 255, 0.82);
+}
+
+.ui-node-graph-palette-view .empty {
+    padding: 10px;
+    color: var(--meep-fg-muted, #9da0a3);
+    font-style: italic;
+}
+
+/*
+ The library as a menu, opened on the canvas at the point the author asked from — a right-click, or a
+ wire let go over nothing. It is the palette in a box: the same list, the same keys, put where the
+ cursor is instead of down the side of the window.
+
+ The palette inside it is docked by a host normally and positions itself absolutely for that; here it
+ fills the menu instead, and the menu is what has a size.
+*/
+.ui-node-graph-search-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 30;
+
+    display: flex;
+    flex-direction: column;
+
+    width: 260px;
+    max-height: 340px;
+
+    box-sizing: border-box;
+    border: 1px solid var(--meep-graph-node-border, #363c46);
+    border-radius: 6px;
+    background: var(--meep-panel-bg, #1a1e25);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+
+    overflow: hidden;
+}
+
+.ui-node-graph-search-menu > .heading {
+    padding: 6px 10px 0;
+    color: var(--meep-fg-muted, #9da0a3);
+    font: var(--meep-font, 12px 'Segoe UI', sans-serif);
+    font-size: 10.5px;
+    font-style: italic;
+}
+
+.ui-node-graph-search-menu > .ui-node-graph-palette-view {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+    border-right: none;
+    background: transparent;
+}
+
+.ui-node-graph-search-menu > .ui-node-graph-palette-view > .entries {
+    max-height: 280px;
+}
+
+/*
+ A graph shown but not offered for editing — the inside of a locked group. The controls are still
+ drawn, because a locked graph is worth reading in full, and they are still live enough to focus and
+ scroll; what they cannot do is commit, which is enforced above rather than here.
+*/
+.ui-node-graph-view.read-only .ui-node-view .parameters-container {
+    opacity: 0.75;
+}
+
+.ui-node-graph-view.read-only .ui-node-view .ui-port-view .marker {
+    cursor: default;
+}

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

@@ -0,0 +1,37 @@
+export class ParticleCodeEditorView extends View {
+    /**
+     * @param {object} options
+     * @param {import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument} options.effect
+     */
+    constructor({ effect }: {
+        effect: import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument;
+    });
+    el: HTMLDivElement;
+    /**
+     * @type {import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument}
+     */
+    effect: import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument;
+    /**
+     * Move authority between the layers, in whichever direction it currently is not.
+     */
+    toggleAuthority(): void;
+    /**
+     * Redraw everything the document decides: the text, the gutter, the status line and the
+     * problems. Skipped while the author is typing into this very pane — the document's change came
+     * from here, and replacing the text would move the caret out from under them.
+     */
+    refresh(): void;
+    /**
+     * Put the caret at the start of a line and scroll it into view.
+     * @param {number} line 1-based
+     */
+    revealLine(line: number): void;
+    /**
+     * Push the text into the document now, without waiting for typing to settle.
+     */
+    commit(): void;
+    layout(): void;
+    #private;
+}
+import View from "../../../../src/view/View.js";
+//# sourceMappingURL=ParticleCodeEditorView.d.ts.map