@woosh/meep-engine 3.15.0 → 3.17.0

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

@@ -0,0 +1,644 @@
+/*
+ Styling for the particle effect editor's panels.
+
+ Companion to `../../node-graph/node-graph.css`, which dresses the graph views this builds on;
+ a host includes both. Plain CSS for the same reason: a playground page has no sass toolchain.
+
+ Colours go through the same --meep-* tokens as the rest of the editor, with dark fallbacks, so a
+ host theme re-skins these panels along with everything else.
+*/
+
+.ui-particle-effect-editor,
+.ui-particle-graph-editor,
+.ui-particle-code-editor,
+.ui-particle-emitter-inspector,
+.ui-particle-preview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    font: var(--meep-font, 12px 'Segoe UI', sans-serif);
+    color: var(--meep-fg, #d6d8da);
+    overflow: hidden;
+}
+
+.ui-particle-effect-editor {
+    background: var(--meep-panel-bg, #1a1e25);
+}
+
+/* --- toolbars ------------------------------------------------------------------------------- */
+
+.ui-particle-effect-editor > .toolbar,
+.ui-particle-graph-editor > .toolbar,
+.ui-particle-code-editor > .header {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    box-sizing: border-box;
+    padding: 0 8px;
+
+    border-bottom: 1px solid var(--meep-divider-color, #232527);
+    background: var(--meep-header-bg, #2b2d2f);
+
+    user-select: none;
+}
+
+.ui-particle-effect-editor .spacer,
+.ui-particle-graph-editor .spacer {
+    flex: 1 1 auto;
+}
+
+.toolbar-button,
+.layer-toggle,
+.phase-toggle {
+    padding: 3px 10px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    color: var(--meep-fg-muted, #9da0a3);
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.toolbar-button:hover,
+.layer-toggle:hover,
+.phase-toggle:hover {
+    border-color: var(--meep-graph-node-border, #363c46);
+    color: var(--meep-fg, #d6d8da);
+}
+
+.layer-toggle.active,
+.phase-toggle.active {
+    border-color: var(--meep-accent, #2d7dd2);
+    background: var(--meep-accent, #2d7dd2);
+    color: #fff;
+}
+
+.phase-toggle .label {
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    font-size: 11px;
+    letter-spacing: 0.06em;
+}
+
+/* --- graph layer ---------------------------------------------------------------------------- */
+
+.ui-particle-graph-editor > .body {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+}
+
+/* --- problems, shared by both layers -------------------------------------------------------- */
+
+.ui-particle-graph-editor > .problems,
+.ui-particle-code-editor > .footer {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    box-sizing: border-box;
+    padding: 4px 0;
+
+    border-top: 1px solid var(--meep-divider-color, #232527);
+    background: var(--meep-panel-bg, #1a1e25);
+
+    overflow-y: auto;
+    font-size: 11.5px;
+}
+
+.problem {
+    display: flex;
+    gap: 10px;
+    align-items: baseline;
+    padding: 2px 10px;
+    cursor: pointer;
+}
+
+.problem:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.problem > .where {
+    flex: 0 0 auto;
+    min-width: 11ch;
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    font-size: 10.5px;
+    color: var(--meep-fg-muted, #9da0a3);
+}
+
+.problem.error > .where {
+    color: var(--meep-error, #ff7a7a);
+}
+
+.problem.warning > .where {
+    color: var(--meep-warning, #e2b341);
+}
+
+/* a note is not a problem: it reads as quietly as the graph it is about is running */
+.problem.info {
+    opacity: 0.7;
+}
+
+.problems > .none {
+    padding: 4px 10px;
+    color: var(--meep-fg-muted, #9da0a3);
+}
+
+/* a node a diagnostic names, marked in the graph as well as in the list below it */
+.ui-node-view.has-error {
+    border-color: var(--meep-error, #ff7a7a);
+}
+
+.ui-node-view.has-warning {
+    border-color: var(--meep-warning, #e2b341);
+}
+
+/* nothing reads this node, so it is not compiled — drawn as the aside it is, not as a fault */
+.ui-node-view.has-info {
+    opacity: 0.6;
+    border-style: dashed;
+}
+
+/* --- particle node parameters --------------------------------------------------------------- */
+
+.ui-particle-node-parameters {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.ui-particle-node-parameters .vector,
+.ui-particle-node-parameters .vector .lanes,
+.ui-particle-node-parameters .color {
+    display: flex;
+    gap: 2px;
+}
+
+.ui-particle-node-parameters .vector .lane {
+    width: 3.5em;
+}
+
+.ui-particle-node-parameters .color .swatch {
+    width: 3.5em;
+    padding: 0;
+}
+
+.ui-particle-node-parameters .color .alpha {
+    width: 3.5em;
+}
+
+.ui-particle-node-parameters .swizzle {
+    width: 4.5em;
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    text-align: center;
+}
+
+.ui-particle-node-parameters .integer {
+    width: 4.5em;
+}
+
+.ui-particle-node-parameters select {
+    max-width: 15em;
+}
+
+.ui-particle-node-parameters option.missing {
+    color: var(--meep-error, #ff7a7a);
+}
+
+/*
+ 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.
+*/
+
+.ui-particle-node-parameters .parameter-row.kind-gradient,
+.ui-particle-node-parameters .parameter-row.kind-curve {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 3px;
+}
+
+.ui-particle-gradient,
+.ui-particle-curve {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.ui-particle-gradient > .strip,
+.ui-particle-curve > .plot {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid 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 */
+    touch-action: none;
+    user-select: none;
+}
+
+.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;
+}
+
+.ui-particle-gradient .remove,
+.ui-particle-curve .remove {
+    flex: 0 0 auto;
+    width: 1.8em;
+    padding: 2px 0;
+    border: 1px solid var(--meep-graph-node-border, #363c46);
+    border-radius: 3px;
+    background: var(--meep-graph-input-bg, #171b21);
+    color: var(--meep-fg, #d6d8da);
+    cursor: pointer;
+    line-height: 1;
+}
+
+.ui-particle-gradient .remove:hover,
+.ui-particle-curve .remove:hover {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+/* --- code layer ----------------------------------------------------------------------------- */
+
+.ui-particle-code-editor > .header > .authority {
+    flex: 1 1 auto;
+    color: var(--meep-fg-muted, #9da0a3);
+    font-size: 11px;
+}
+
+.ui-particle-code-editor:not(.read-only) > .header > .authority {
+    color: var(--meep-warning, #e2b341);
+}
+
+.ui-particle-code-editor > .header > .savings {
+    flex: 0 0 auto;
+    color: var(--meep-fg-muted, #9da0a3);
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    font-size: 10.5px;
+    white-space: nowrap;
+}
+
+.ui-particle-code-editor > .header > .optimize-toggle {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--meep-fg-muted, #9da0a3);
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.ui-particle-code-editor > .header > .optimize-toggle:hover {
+    color: var(--meep-fg, #d6d8da);
+}
+
+.ui-particle-code-editor > .header > .optimize-toggle > .optimize {
+    margin: 0;
+    cursor: pointer;
+}
+
+.ui-particle-code-editor > .editor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    background: var(--meep-graph-input-bg, #171b21);
+}
+
+.ui-particle-code-editor .gutter {
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    width: 4ch;
+    padding: 8px 6px 8px 0;
+    border-right: 1px solid var(--meep-divider-color, #232527);
+    overflow: hidden;
+    text-align: right;
+    color: var(--meep-fg-muted, #6d7278);
+    font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
+    user-select: none;
+}
+
+.ui-particle-code-editor .gutter .line.bad {
+    color: var(--meep-error, #ff7a7a);
+    font-weight: 700;
+}
+
+.ui-particle-code-editor .source {
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    padding: 8px 10px;
+    border: none;
+    background: transparent;
+    color: var(--meep-fg, #d6d8da);
+    font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
+    resize: none;
+    white-space: pre;
+    overflow: auto;
+}
+
+.ui-particle-code-editor .source:focus {
+    outline: none;
+}
+
+.ui-particle-code-editor.read-only .source {
+    color: var(--meep-fg-muted, #9da0a3);
+}
+
+.ui-particle-code-editor .status {
+    padding: 2px 10px 4px;
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    font-size: 10.5px;
+    color: var(--meep-fg-muted, #9da0a3);
+}
+
+.ui-particle-code-editor .status .bad {
+    color: var(--meep-error, #ff7a7a);
+}
+
+/* --- emitter inspector ---------------------------------------------------------------------- */
+
+.ui-particle-emitter-inspector {
+    padding: 4px 0 12px;
+    border-left: 1px solid var(--meep-divider-color, #232527);
+    background: var(--meep-panel-bg, #1a1e25);
+    overflow-y: auto;
+}
+
+.ui-particle-emitter-inspector .heading {
+    padding: 10px 10px 4px;
+    color: var(--meep-fg-muted, #9da0a3);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.ui-particle-emitter-inspector .field-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 2px 10px;
+}
+
+.ui-particle-emitter-inspector .field-row > .name {
+    color: var(--meep-fg-muted, #9da0a3);
+    font-size: 11px;
+}
+
+.ui-particle-emitter-inspector input,
+.ui-particle-emitter-inspector select {
+    box-sizing: border-box;
+    min-width: 0;
+    padding: 2px 4px;
+    border: 1px solid var(--meep-graph-node-border, #363c46);
+    border-radius: 3px;
+    background: var(--meep-graph-input-bg, #171b21);
+    color: inherit;
+    font: inherit;
+    font-size: 11px;
+}
+
+.ui-particle-emitter-inspector input:focus,
+.ui-particle-emitter-inspector select:focus {
+    outline: none;
+    border-color: var(--meep-accent, #2d7dd2);
+}
+
+.ui-particle-emitter-inspector input[type="number"] {
+    width: 6em;
+}
+
+.ui-particle-emitter-inspector input[type="checkbox"] {
+    width: auto;
+}
+
+.ui-particle-emitter-inspector .vector {
+    display: flex;
+    gap: 2px;
+}
+
+.ui-particle-emitter-inspector .vector .lane {
+    width: 3.6em;
+}
+
+/*
+ A render channel bound to an attribute narrower than the pass reads. Not an error — the offsets are
+ the record's, and an author who knows what is packed after it may mean it — so it is marked rather
+ than refused, with the reason on the row's tooltip.
+*/
+.ui-particle-emitter-inspector .field-row.mismatched > .name {
+    color: var(--meep-warning, #e2b341);
+}
+
+.ui-particle-emitter-inspector .field-row.mismatched > .name::after {
+    content: " ⚠";
+}
+
+.ui-particle-emitter-inspector .attribute {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 2px 10px;
+}
+
+.ui-particle-emitter-inspector .attribute > .name {
+    flex: 1 1 auto;
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    font-size: 11.5px;
+}
+
+.ui-particle-emitter-inspector .attribute > .where {
+    color: var(--meep-fg-muted, #6d7278);
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    font-size: 10.5px;
+}
+
+.ui-particle-emitter-inspector .attribute > .remove {
+    color: var(--meep-fg-muted, #6d7278);
+    cursor: pointer;
+}
+
+.ui-particle-emitter-inspector .attribute > .remove:hover {
+    color: var(--meep-error, #ff7a7a);
+}
+
+.ui-particle-emitter-inspector .add-attribute {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 10px 0;
+}
+
+.ui-particle-emitter-inspector .add-attribute input[type="text"] {
+    flex: 1 1 6em;
+}
+
+.ui-particle-emitter-inspector .problem {
+    flex-basis: 100%;
+    padding: 2px 0;
+    color: var(--meep-error, #ff7a7a);
+    font-size: 10.5px;
+    cursor: default;
+}
+
+.ui-particle-emitter-inspector .problem:hover {
+    background: none;
+}
+
+/* --- preview -------------------------------------------------------------------------------- */
+
+.ui-particle-preview {
+    background: #0a0d12;
+    border-left: 1px solid var(--meep-divider-color, #232527);
+    border-bottom: 1px solid var(--meep-divider-color, #232527);
+}
+
+.ui-particle-preview > .surface {
+    display: block;
+    cursor: grab;
+    touch-action: none;
+}
+
+.ui-particle-preview > .surface:active {
+    cursor: grabbing;
+}
+
+.ui-particle-preview > .hud {
+    position: absolute;
+    left: 8px;
+    bottom: 6px;
+    color: var(--meep-fg-muted, #9da0a3);
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    font-size: 10.5px;
+    pointer-events: none;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+/* --- node groups ---------------------------------------------------------------------------- */
+
+/*
+ The way back out of whatever groups are open. Empty — and so invisible — while none is, which is
+ most of the time.
+*/
+.ui-particle-graph-editor > .toolbar > .group-trail {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+
+.ui-particle-graph-editor .group-trail > .crumb {
+    display: flex;
+    align-items: baseline;
+    gap: 5px;
+
+    padding: 3px 8px;
+    border-radius: 4px;
+    color: var(--meep-fg-muted, #9da0a3);
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+/* a separator between crumbs, drawn rather than added as an element nobody can click */
+.ui-particle-graph-editor .group-trail > .crumb + .crumb::before {
+    content: "\203A";
+    margin-right: 3px;
+    opacity: 0.6;
+}
+
+.ui-particle-graph-editor .group-trail > .crumb:hover {
+    color: var(--meep-fg, #d6d8da);
+}
+
+.ui-particle-graph-editor .group-trail > .crumb.current {
+    color: var(--meep-fg, #d6d8da);
+}
+
+.ui-particle-graph-editor .group-trail .locked {
+    font-size: 9.5px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    opacity: 0.7;
+}
+
+/*
+ A node made of other nodes reads as one: a doubled left edge, which is the only hint on the canvas
+ that there is an inside to open.
+*/
+.ui-node-view.is-group {
+    border-left: 3px double var(--meep-accent, #2d7dd2);
+}
+
+.ui-node-view.is-group > .name {
+    cursor: pointer;
+}
+
+/* the two blocks a group's body is wired to, which are its edge rather than part of its work */
+.ui-node-view.is-group-boundary {
+    border-style: dashed;
+    opacity: 0.92;
+}
+
+/*
+ A group's name, while an author is inside it. Sized to the text rather than to a form field: it
+ lives in a breadcrumb and has to read as part of one until it is being typed in.
+*/
+.ui-particle-graph-editor .group-trail input.rename {
+    width: 11ch;
+    padding: 1px 4px;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+}
+
+.ui-particle-graph-editor .group-trail input.rename:hover {
+    border-color: var(--meep-graph-node-border, #363c46);
+}
+
+.ui-particle-graph-editor .group-trail input.rename:focus {
+    outline: none;
+    border-color: var(--meep-accent, #2d7dd2);
+    background: var(--meep-graph-input-bg, #171b21);
+}
+
+/* a command that does not apply to what is selected; the title says why */
+.toolbar-button.disabled {
+    opacity: 0.45;
+    cursor: default;
+}
+
+.toolbar-button.disabled:hover {
+    border-color: transparent;
+    color: var(--meep-fg-muted, #9da0a3);
+}

package/editor/view/prepareMeshLibrary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prepareMeshLibrary.d.ts","sourceRoot":"","sources":["../../../editor/view/prepareMeshLibrary.js"],"names":[],"mappings":"AAiBA;;;GAGG;AACH,oEAuKC;4BA/K2B,8BAA8B"}
+{"version":3,"file":"prepareMeshLibrary.d.ts","sourceRoot":"","sources":["../../../editor/view/prepareMeshLibrary.js"],"names":[],"mappings":"AAiBA;;;GAGG;AACH,oEA2KC;4BAnL2B,8BAA8B"}

package/editor/view/prepareMeshLibrary.js

@@ -3,7 +3,7 @@ import { SurfacePoint3 } from "../../src/core/geom/3d/SurfacePoint3.js";
 import Vector2 from "../../src/core/geom/Vector2.js";
 import Vector3 from "../../src/core/geom/Vector3.js";
 import { obtainTerrain } from "../../src/engine/ecs/terrain/util/obtainTerrain.js";
-import { Transform } from "../../src/engine/ecs/transform/Transform.js";
+import { Transform64 } from "../../src/engine/ecs/transform/Transform64.js";
 import { SGMesh } from "../../src/engine/graphics/ecs/mesh-v2/aggregate/SGMesh.js";
 import { SGMeshEvents } from "../../src/engine/graphics/ecs/mesh-v2/aggregate/SGMeshEvents.js";
 import { make_ray_from_viewport_position } from "../../src/engine/graphics/make_ray_from_viewport_position.js";
@@ -81,7 +81,7 @@ export function prepareMeshLibrary(editor) {
         mesh.castShadow = true;
         mesh.receiveShadow = true;
 
-        const transform = new Transform();
+        const transform = new Transform64();
 
         const actions = editor.actions;
         actions.mark('New SGMesh Placed from Library');
@@ -112,7 +112,11 @@ export function prepareMeshLibrary(editor) {
 
             const offset = direction.clone().multiplyScalar(diagonal);
 
-            transform.position.add(offset);
+            transform.setTranslation(
+                transform.translation_x + offset.x,
+                transform.translation_y + offset.y,
+                transform.translation_z + offset.z
+            );
 
             //remove listener
             ecd.removeEntityEventListener(entityCreateAction.entity, SGMeshEvents.AssetLoaded, handleMeshSetEvent);
@@ -136,7 +140,7 @@ export function prepareMeshLibrary(editor) {
             ecd.addEntityEventListener(entityCreateAction.entity, SGMeshEvents.AssetLoaded, handleMeshSetEvent);
         }
 
-        transform.position.copy(worldPosition);
+        transform.setTranslation(worldPosition.x, worldPosition.y, worldPosition.z);
 
         mesh.url = url;
 

package/package.json

@@ -6,7 +6,7 @@
   "description": "Advanced 3D game engine",
   "type": "module",
   "author": "Alexander Goldring",
-  "version": "3.15.0",
+  "version": "3.17.0",
   "exports": {
     "./build/*": "./build/*",
     "./src/*": "./src/*",