@woosh/meep-engine 2.169.4 → 2.170.0

package/editor/style/inspector.scss

@@ -0,0 +1,223 @@
+/*
+ Inspector styling — the reflection-driven component editor tree.
+
+ The inspector's markup is *generated*: `createObjectEditor`/`createFieldEditor` walk the
+ component and delegate each field to a registered `TypeEditor`. The class names below are
+ therefore the contract between those builders and this file; nothing else pins the layout
+ down, so an unstyled class means a stacked, unreadable panel rather than a mild skin
+ regression.
+
+   .entity-editor-view                        panel root, px-sized by the dock
+     .component-list                          scrolling column of components
+       .entity-editor-component-control-view
+         .title-bar                           name + copy/paste/fold/remove
+         .body > .auto-object-editor          field container
+           .auto-field-editor                 one field
+             .label.field-name
+             *.field-value                    control built by the field's TypeEditor,
+                                              e.g. .inline-field-row-editor for a Vector3
+                                              or a nested .auto-object-editor
+     .ui-line-view.component-adder            entity id + component type picker
+
+ `.orientation-inline` on a field is set from `TypeEditor.inline` and asks for the
+ label and the control to share a row; without it the control goes under its label.
+
+ Colors come from the --meep-* tokens declared on the shell root.
+*/
+
+.entity-editor-view {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* the component list scrolls, the adder stays reachable at the bottom */
+
+  > .component-list {
+    flex: 1 1 auto;
+    min-height: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  > .component-adder {
+    flex: 0 0 auto;
+
+    box-sizing: border-box;
+    padding: 4px 6px;
+
+    background: var(--meep-header-bg);
+    border-top: 1px solid var(--meep-divider-color);
+
+    > .label.id {
+      flex: 0 0 auto;
+      color: var(--meep-fg-muted);
+      font-weight: 600;
+    }
+
+    > select {
+      flex: 1 1 auto;
+    }
+  }
+}
+
+/* component card */
+
+.entity-editor-component-control-view {
+  flex: 0 0 auto;
+
+  margin: 4px;
+  border: 1px solid var(--meep-divider-color);
+  border-radius: 3px;
+  background: var(--meep-panel-bg);
+  overflow: hidden;
+
+  > .title-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
+
+    box-sizing: border-box;
+    padding: 3px 4px;
+
+    background: var(--meep-header-bg);
+    border-bottom: 1px solid var(--meep-divider-color);
+
+    > .label {
+      flex: 1 1 auto;
+      min-width: 0;
+
+      font-weight: 600;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      user-select: none;
+    }
+  }
+
+  &.folded > .title-bar > .ui-button-view.fold-toggle {
+    transform: rotate(-90deg);
+  }
+
+  > .body {
+    box-sizing: border-box;
+    padding: 4px 6px;
+  }
+}
+
+/* field tree */
+
+.auto-object-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  min-width: 0;
+}
+
+.auto-field-editor {
+  min-width: 0;
+
+  /* default orientation: control under its label */
+
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  &.orientation-inline {
+    display: grid;
+    grid-template-columns: minmax(56px, 40%) 1fr;
+    gap: 4px;
+    align-items: center;
+  }
+
+  > .field-name {
+    min-width: 0;
+
+    color: var(--meep-fg-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &.field-deprecated > .field-name {
+    text-decoration: line-through;
+  }
+
+  > .field-value {
+    position: relative;
+    min-width: 0;
+
+    /* controls fill the value column; checkboxes and buttons keep their intrinsic size */
+
+    &:is(input[type="text"], input[type="number"], input[type="color"], select, textarea) {
+      width: 100%;
+    }
+  }
+
+  /* an object-valued field is framed so its nesting depth reads at a glance */
+
+  > .auto-object-editor {
+    box-sizing: border-box;
+    padding: 4px;
+
+    border: 1px solid var(--meep-divider-color);
+    border-radius: 3px;
+    background: rgba(0, 0, 0, 0.15);
+  }
+}
+
+/* a row of scalar sub-fields, e.g. the x/y/z of a Vector3 */
+
+.inline-field-row-editor {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+
+  min-width: 0;
+
+  /* the dock puts no floor under a zone's width; wrap rather than spill out of the panel */
+  flex-wrap: wrap;
+
+  > .label {
+    flex: 0 0 auto;
+    color: var(--meep-fg-muted);
+  }
+
+  > input {
+    flex: 1 1 0;
+    min-width: 0;
+    width: 0;
+  }
+}
+
+/* a preview that downloads its contents when clicked (Sampler2D, Texture) */
+
+.field-value.downloadable {
+  cursor: pointer;
+
+  &:hover::after {
+    content: '⤓';
+
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+
+    box-sizing: border-box;
+    pointer-events: none;
+
+    color: #ffffff;
+    font-size: 24px;
+    text-align: center;
+    text-shadow: 0 0 2px black;
+    background: rgba(0, 0, 0, 0.4);
+  }
+}

package/editor/templates/entity_templates.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Create an entity from a list of components as one undoable group, select it.
+ *
+ * @param {Editor} editor
+ * @param {string} name template name, used for the undo mark and the Name component
+ * @param {[]} components
+ * @returns {Promise<number>} the created entity
+ */
+export function spawnEntityFromTemplate(editor: Editor, name: string, components: []): Promise<number>;
+/**
+ * The entity creation menu. Every template attaches a Transform and a Name.
+ *
+ * @type {ReadonlyArray<{name: string, build: function(Editor): Promise<number>}>}
+ */
+export const ENTITY_TEMPLATES: ReadonlyArray<{
+    name: string;
+    build: (arg0: Editor) => Promise<number>;
+}>;
+//# sourceMappingURL=entity_templates.d.ts.map

package/editor/templates/entity_templates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity_templates.d.ts","sourceRoot":"","sources":["entity_templates.js"],"names":[],"mappings":"AAkBA;;;;;;;GAOG;AACH,8DAJW,MAAM,cACN,EAAE,GACA,QAAQ,MAAM,CAAC,CA4B3B;AAED;;;;GAIG;AACH,+BAFU,cAAc;IAAC,MAAM,MAAM,CAAC;IAAC,KAAK,oBAAoB,QAAQ,MAAM,CAAC,CAAA;CAAC,CAAC,CA6G/E"}

package/editor/templates/entity_templates.js

@@ -0,0 +1,167 @@
+import { Name } from "../../src/engine/ecs/name/Name.js";
+import { TerrainLayer } from "../../src/engine/ecs/terrain/ecs/layers/TerrainLayer.js";
+import Terrain from "../../src/engine/ecs/terrain/ecs/Terrain.js";
+import { Transform } from "../../src/engine/ecs/transform/Transform.js";
+import { Camera } from "../../src/engine/graphics/ecs/camera/Camera.js";
+import { Light } from "../../src/engine/graphics/ecs/light/Light.js";
+import Mesh from "../../src/engine/graphics/ecs/mesh/Mesh.js";
+import CheckersTextureURI from "../../src/engine/graphics/texture/CheckersTextureURI.js";
+import { ParticleEmitter } from "../../src/engine/graphics/particles/particular/engine/emitter/ParticleEmitter.js";
+import { ParticleLayer } from "../../src/engine/graphics/particles/particular/engine/emitter/ParticleLayer.js";
+import { ParticleParameters } from "../../src/engine/graphics/particles/particular/engine/emitter/ParticleParameters.js";
+import { ParameterLookupTable } from "../../src/engine/graphics/particles/particular/engine/parameter/ParameterLookupTable.js";
+import { ParameterTrack } from "../../src/engine/graphics/particles/particular/engine/parameter/ParameterTrack.js";
+import ComponentAddAction from "../actions/concrete/ComponentAddAction.js";
+import EntityCreateAction from "../actions/concrete/EntityCreateAction.js";
+import SelectionAddAction from "../actions/concrete/SelectionAddAction.js";
+import SelectionClearAction from "../actions/concrete/SelectionClearAction.js";
+
+/**
+ * Create an entity from a list of components as one undoable group, select it.
+ *
+ * @param {Editor} editor
+ * @param {string} name template name, used for the undo mark and the Name component
+ * @param {[]} components
+ * @returns {Promise<number>} the created entity
+ */
+export async function spawnEntityFromTemplate(editor, name, components) {
+    const actions = editor.actions;
+
+    const ecd = editor.engine.entityManager.dataset;
+
+    // template components may be of types nothing in the host registered yet
+    for (const component of components) {
+        if (!ecd.isComponentTypeRegistered(component.constructor)) {
+            ecd.registerComponentType(component.constructor);
+        }
+    }
+
+    actions.mark(`create ${name}`);
+
+    const create = new EntityCreateAction();
+
+    await actions.do(create);
+
+    for (const component of components) {
+        await actions.do(new ComponentAddAction(create.entity, component));
+    }
+
+    await actions.do(new SelectionClearAction());
+    await actions.do(new SelectionAddAction([create.entity]));
+
+    return create.entity;
+}
+
+/**
+ * The entity creation menu. Every template attaches a Transform and a Name.
+ *
+ * @type {ReadonlyArray<{name: string, build: function(Editor): Promise<number>}>}
+ */
+export const ENTITY_TEMPLATES = [
+    {
+        name: 'Empty',
+        build(editor) {
+            return spawnEntityFromTemplate(editor, 'Empty', [
+                new Transform(),
+                new Name('Entity')
+            ]);
+        }
+    },
+    {
+        name: 'Mesh',
+        build(editor) {
+            const mesh = new Mesh();
+
+            return spawnEntityFromTemplate(editor, 'Mesh', [
+                new Transform(),
+                new Name('Mesh'),
+                mesh
+            ]);
+        }
+    },
+    {
+        name: 'Light',
+        build(editor) {
+            const light = new Light();
+
+            light.type.set(Light.Type.POINT);
+            light.intensity.set(1);
+
+            return spawnEntityFromTemplate(editor, 'Light', [
+                new Transform(),
+                new Name('Light'),
+                light
+            ]);
+        }
+    },
+    {
+        name: 'Camera',
+        build(editor) {
+            const camera = new Camera();
+
+            // inactive so it does not fight the editor camera; activated on scene export
+            camera.active.set(false);
+
+            return spawnEntityFromTemplate(editor, 'Camera', [
+                new Transform(),
+                new Name('Camera'),
+                camera
+            ]);
+        }
+    },
+    {
+        name: 'Particle Emitter',
+        build(editor) {
+            const emitter = new ParticleEmitter();
+
+            const layer = new ParticleLayer();
+            layer.imageURL = 'data/textures/particle/UETools/x64/Circle_04.png';
+            layer.emissionRate = 20;
+
+            // editable parameter tracks: constant size, warm fade-out
+            const scale_lut = new ParameterLookupTable(1);
+            scale_lut.write([1, 1], [0, 1]);
+            layer.parameterTracks.add(new ParameterTrack(ParticleParameters.Scale, scale_lut));
+
+            const color_lut = new ParameterLookupTable(4);
+            color_lut.write([
+                1, 0.85, 0.4, 1,
+                1, 0.25, 0.05, 0
+            ], [0, 1]);
+            layer.parameterTracks.add(new ParameterTrack(ParticleParameters.Color, color_lut));
+
+            emitter.layers.add(layer);
+
+            return spawnEntityFromTemplate(editor, 'Particle Emitter', [
+                new Transform(),
+                new Name('Particle Emitter'),
+                emitter
+            ]);
+        }
+    },
+    {
+        name: 'Terrain',
+        build(editor) {
+            // a functional terrain, not a bare component: allocated splat, one paintable layer
+            const terrain = new Terrain();
+
+            terrain.size.set(32, 32);
+            terrain.resolution = 64;
+            terrain.gridScale = 2;
+
+            terrain.layers.addLayer(TerrainLayer.from(CheckersTextureURI, 5, 5));
+
+            terrain.splat.resize(64, 64, 1);
+            terrain.splat.fillLayerWeights(0, 255);
+
+            // height painting needs allocated height data, the component default is a 1x1 sampler
+            terrain.samplerHeight.resize(256, 256);
+
+            return spawnEntityFromTemplate(editor, 'Terrain', [
+                new Transform(),
+                new Name('Terrain'),
+                terrain
+            ]);
+        }
+    }
+];

package/editor/tools/GridPaintTool.d.ts

@@ -1,17 +1,18 @@
-export default GridPaintTool;
-declare class GridPaintTool extends Tool {
-    name: string;
-    terrain: import("../../src/engine/ecs/terrain/ecs/Terrain.js").default;
-    cameraController: {
-        start: Function;
-        stop: Function;
-    };
-    buildColor(): Vector4;
-    paint(): void;
-    traverse(callback: any): void;
-    affectTile(_x: any, _y: any): void;
-    affectTileByMousePosition(position: any): void;
-}
-import Tool from "./engine/Tool.js";
-import Vector4 from "../../src/core/geom/Vector4.js";
+export default GridPaintTool;
+declare class GridPaintTool extends Tool {
+    name: string;
+    terrain: import("../../src/engine/ecs/terrain/ecs/Terrain.js").default;
+    terrainEntity: number;
+    cameraController: {
+        start: Function;
+        stop: Function;
+    };
+    buildColor(): Vector4;
+    paint(): void;
+    traverse(callback: any): void;
+    affectTile(_x: any, _y: any): void;
+    affectTileByMousePosition(position: any): void;
+}
+import Tool from "./engine/Tool.js";
+import Vector4 from "../../src/core/geom/Vector4.js";
 //# sourceMappingURL=GridPaintTool.d.ts.map

package/editor/tools/GridPaintTool.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridPaintTool.d.ts","sourceRoot":"","sources":["GridPaintTool.js"],"names":[],"mappings":";AAiBA;IAGQ,aAAwB;IAexB,uEAEE;IAcF;;;MAA2E;IAI/E,sBAQC;IAED,cAyBC;IAED,8BAyBC;IAiBD,mCAuCC;IAED,+CAQC;CAcJ;iBAtLgB,kBAAkB;oBAZf,gCAAgC"}
+{"version":3,"file":"GridPaintTool.d.ts","sourceRoot":"","sources":["GridPaintTool.js"],"names":[],"mappings":";AAiBA;IACI,aAAoB;IAgBhB,uEAEE;IADE,sBAA2B;IAe/B;;;MAA2E;IAI/E,sBAQC;IAED,cAyBC;IAED,8BAyBC;IAiBD,mCAuCC;IAED,+CAQC;CAcJ;iBArLgB,kBAAkB;oBAZf,gCAAgC"}

package/editor/tools/GridPaintTool.js

@@ -16,14 +16,13 @@ import WriteGridValueAction from "../actions/concrete/WriteGridValueAction.js";
 import Tool from "./engine/Tool.js";
 
 class GridPaintTool extends Tool {
+    name = "grid_paint";
+
     constructor() {
         super();
-        this.name = "grid_paint";
-
         this.settings.value = new Vector1(1);
         this.settings.alphaMultiplier = new Vector1(0.15);
         this.settings.color = new ObservedValue("#00FF00");
-
     }
 
 
@@ -33,8 +32,8 @@ class GridPaintTool extends Tool {
         const engine = this.engine;
         const editor = this.editor;
 
-        this.terrain = obtainTerrain(engine.entityManager.dataset, function (t, entity) {
-            self.terrainEntity = entity;
+        this.terrain = obtainTerrain(engine.entityManager.dataset, (t, entity) => {
+            this.terrainEntity = entity;
         });
 
         this.terrain.overlay.push();
@@ -92,24 +91,24 @@ class GridPaintTool extends Tool {
 
     traverse(callback) {
         /**
-         * @type {EntityManager}
+         * @type {EntityComponentDataset}
          */
-        const entityManger = this.engine.entityManager;
+        const ecd = this.engine.entityManager.dataset;
         this.editor.selection.forEach(function (entity) {
 
             /**
              *
-             * @type {GridPosition}
+             * @type {GridPosition|undefined}
              */
-            const gp = entityManger.getComponent(entity, GridPosition);
+            const gp = ecd.getComponent(entity, GridPosition);
 
             /**
              *
-             * @type {GridObstacle}
+             * @type {GridObstacle|undefined}
              */
-            const obstacle = entityManger.getComponent(entity, GridObstacle);
+            const obstacle = ecd.getComponent(entity, GridObstacle);
 
-            if (gp === null || obstacle === null) {
+            if (gp === undefined || obstacle === undefined) {
                 //do nothing
                 return;
             }
@@ -183,7 +182,7 @@ class GridPaintTool extends Tool {
         });
     }
 
-    start() {
+    handleStart() {
         this.editor.actions.mark('Paining Tiles');
         this.update();
     }
@@ -210,7 +209,7 @@ function buildCameraController(engine, em) {
 
 
     let cameraController = null;
-    em.traverseEntities([TopDownCameraController], function (c) {
+    em.dataset.traverseEntities([TopDownCameraController], function (c) {
         cameraController = c;
     });
 

package/editor/tools/SelectionTool.d.ts

@@ -1,27 +1,26 @@
-/**
- *
- * @param {Vector2} point
- * @param {Engine} engine
- * @param {THREE.Camera} camera
- * @returns {number[]} entities
- */
-export function pickingEntitySelection(point: Vector2, engine: Engine, camera: THREE.Camera): number[];
-export default SelectionTool;
-import Vector2 from '../../src/core/geom/Vector2.js';
-import { Camera } from '../../src/engine/graphics/ecs/camera/Camera.js';
-declare class SelectionTool extends Tool {
-    name: string;
-    anchorPoint: Vector2;
-    targetPoint: Vector2;
-    box: AABB2;
-    selectionMarker: SelectionView;
-    readPosition(target: any): void;
-}
-import Tool from './engine/Tool.js';
-import AABB2 from '../../src/core/geom/2d/aabb/AABB2.js';
-declare class SelectionView extends View<HTMLElement> {
-    constructor();
-    el: HTMLDivElement;
-}
-import View from '../../src/view/View.js';
+/**
+ *
+ * @param {Vector2} point
+ * @param {Engine} engine
+ * @param {THREE.Camera} camera
+ * @returns {number[]} entities
+ */
+export function pickingEntitySelection(point: Vector2, engine: Engine, camera: THREE.Camera): number[];
+export default SelectionTool;
+import Vector2 from '../../src/core/geom/Vector2.js';
+import { Camera } from '../../src/engine/graphics/ecs/camera/Camera.js';
+declare class SelectionTool extends Tool {
+    name: string;
+    anchorPoint: Vector2;
+    targetPoint: Vector2;
+    box: AABB2;
+    selectionMarker: SelectionView;
+    readPosition(target: any): void;
+}
+import Tool from './engine/Tool.js';
+import AABB2 from '../../src/core/geom/2d/aabb/AABB2.js';
+declare class SelectionView extends View {
+    el: HTMLDivElement;
+}
+import View from '../../src/view/View.js';
 //# sourceMappingURL=SelectionTool.d.ts.map

package/editor/tools/SelectionTool.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionTool.d.ts","sourceRoot":"","sources":["SelectionTool.js"],"names":[],"mappings":"AA8MA;;;;;;GAMG;AACH,8CALW,OAAO,0BAEP,YAAY,GACV,MAAM,EAAE,CAkEpB;;oBAnRmB,gCAAgC;uBAE7B,gDAAgD;AA6BvE;IAGQ,aAA+B;IAE/B,qBAAgC;IAChC,qBAAgC;IAChC,WAAsB;IAEtB,+BAA0C;IAG9C,gCAIC;CA2GJ;iBAhJgB,kBAAkB;kBAXjB,sCAAsC;AAaxD;IACI,cAcC;IAZG,mBAAuC;CAa9C;iBAvBgB,wBAAwB"}
+{"version":3,"file":"SelectionTool.d.ts","sourceRoot":"","sources":["SelectionTool.js"],"names":[],"mappings":"AA0MA;;;;;;GAMG;AACH,8CALW,OAAO,0BAEP,YAAY,GACV,MAAM,EAAE,CAkEpB;;oBA/QmB,gCAAgC;uBAE7B,gDAAgD;AA6BvE;IACI,aAA2B;IAE3B,qBAA4B;IAC5B,qBAA4B;IAC5B,WAAkB;IAClB,+BAAsC;IAEtC,gCAIC;CA2GJ;iBA5IgB,kBAAkB;kBAXjB,sCAAsC;AAaxD;IAGQ,mBAAuC;CAa9C;iBAvBgB,wBAAwB"}

package/editor/tools/SelectionTool.js

@@ -32,16 +32,12 @@ class SelectionView extends View {
 
 
 class SelectionTool extends Tool {
-    constructor() {
-        super();
-        this.name = "marquee_selection";
-        this.settings = {};
-        this.anchorPoint = new Vector2();
-        this.targetPoint = new Vector2();
-        this.box = new AABB2();
-
-        this.selectionMarker = new SelectionView();
-    }
+    name = "marquee_selection";
+    settings = {};
+    anchorPoint = new Vector2();
+    targetPoint = new Vector2();
+    box = new AABB2();
+    selectionMarker = new SelectionView();
 
     readPosition(target) {
         const pointerPosition = this.engine.devices.pointer.position;
@@ -49,7 +45,7 @@ class SelectionTool extends Tool {
         target.copy(pointerPosition).sub(this.engine.gameView.position);
     }
 
-    start() {
+    handleStart() {
         //read mouse position
         //set anchor point
         this.readPosition(this.anchorPoint);
@@ -74,7 +70,7 @@ class SelectionTool extends Tool {
         this.selectionMarker.size.set(x1 - x0, y1 - y0);
     }
 
-    stop() {
+    handleStop() {
         const self = this;
         //finish selection
 
@@ -263,7 +259,7 @@ export function pickingEntitySelection(point, engine, camera) {
 
     if (sgm !== undefined && sgm !== null) {
         const hits = sgm.raycast(
-            ray_origin.x, ray_origin.y, ray_origin.y,
+            ray_origin.x, ray_origin.y, ray_origin.z,
             ray_direction.x, ray_direction.y, ray_direction.z
         );
 
@@ -305,8 +301,45 @@ function marqueeSelection(box, editor, camera) {
 
     makeScreenScissorFrustum(frustum, normalizedBox, camera);
 
+    // pack the three.js planes into the flat [nx,ny,nz,w]*6 layout the BVH frustum query consumes
+    const planes = new Float64Array(24);
+
+    for (let i = 0; i < 6; i++) {
+        const plane = frustum.planes[i];
+
+        const address = i * 4;
+
+        planes[address] = plane.normal.x;
+        planes[address + 1] = plane.normal.y;
+        planes[address + 2] = plane.normal.z;
+        planes[address + 3] = plane.constant;
+    }
+
     const selection = [];
 
+    /**
+     * @type {ShadedGeometrySystem|null|undefined}
+     */
+    const sgm = engine.entityManager.getSystem(ShadedGeometrySystem);
+
+    if (sgm !== undefined && sgm !== null) {
+        const overlaps = [];
+        const overlap_count = sgm.queryOverlapFrustum(overlaps, 0, planes);
+
+        for (let i = 0; i < overlap_count; i++) {
+            const entity = dereferenceEntity(overlaps[i], dataset);
+
+            if (entity === -1) {
+                // editor helper with no source entity
+                continue;
+            }
+
+            if (selection.indexOf(entity) === -1) {
+                selection.push(entity);
+            }
+        }
+    }
+
     return selection;
 }