@woosh/meep-engine 2.169.4 → 2.170.0

package/editor/process/symbolic/makeSolidArrowGeometry.d.ts

@@ -1,26 +1,26 @@
-export function makeSolidArrowGeometry(): ArrowBufferGeometry;
-declare class ArrowBufferGeometry extends BufferGeometry {
-    constructor({ radiusTop, radiusBottom, height, heightTop, radialSegments, heightSegments, openEnded, heightIncludesHead }?: {
-        radiusTop?: number;
-        radiusBottom?: number;
-        height?: number;
-        heightTop?: number;
-        radialSegments?: number;
-        heightSegments?: number;
-        openEnded?: boolean;
-        heightIncludesHead?: boolean;
-    });
-    parameters: {
-        radiusTop: number;
-        radiusBottom: number;
-        height: number;
-        heightTop: number;
-        radialSegments: number;
-        heightSegments: number;
-        openEnded: boolean;
-        heightIncludesHead: boolean;
-    };
-}
-import { BufferGeometry } from "three/src/core/BufferGeometry.js";
-export {};
+export function makeSolidArrowGeometry(): ArrowBufferGeometry;
+declare class ArrowBufferGeometry extends BufferGeometry {
+    constructor({ radiusTop, radiusBottom, height, heightTop, radialSegments, heightSegments, openEnded, heightIncludesHead }?: {
+        radiusTop?: number;
+        radiusBottom?: number;
+        height?: number;
+        heightTop?: number;
+        radialSegments?: number;
+        heightSegments?: number;
+        openEnded?: boolean;
+        heightIncludesHead?: boolean;
+    });
+    parameters: {
+        radiusTop: number;
+        radiusBottom: number;
+        height: number;
+        heightTop: number;
+        radialSegments: number;
+        heightSegments: number;
+        openEnded: boolean;
+        heightIncludesHead: boolean;
+    };
+}
+import { BufferGeometry } from "three/src/core/BufferGeometry.js";
+export {};
 //# sourceMappingURL=makeSolidArrowGeometry.d.ts.map

package/editor/process/symbolic/makeSoundEmitterSymbolicDisplay.d.ts

@@ -1,6 +1,6 @@
-/**
- *
- * @param {Engine} engine
- */
-export function makeSoundEmitterSymbolicDisplay(engine: Engine): import("./ComponentSymbolicDisplay.js").ComponentSymbolicDisplay;
+/**
+ *
+ * @param {Engine} engine
+ */
+export function makeSoundEmitterSymbolicDisplay(engine: Engine): import("./ComponentSymbolicDisplay.js").ComponentSymbolicDisplay;
 //# sourceMappingURL=makeSoundEmitterSymbolicDisplay.d.ts.map

package/editor/process/symbolic/synchronizeTransform.d.ts

@@ -1,12 +1,12 @@
-/**
- *
- * @param {!Transform} source
- * @param {!Transform} target
- * @param {SignalBinding[]} bindings
- * @param {boolean} [syncPosition=true]
- * @param {boolean} [syncRotation=true]
- * @param {boolean} [syncScale=true]
- */
-export function synchronizeTransform(source: Transform, target: Transform, bindings: SignalBinding[], syncPosition?: boolean, syncRotation?: boolean, syncScale?: boolean): void;
-import { SignalBinding } from "../../../src/core/events/signal/SignalBinding.js";
+/**
+ *
+ * @param {!Transform} source
+ * @param {!Transform} target
+ * @param {SignalBinding[]} bindings
+ * @param {boolean} [syncPosition=true]
+ * @param {boolean} [syncRotation=true]
+ * @param {boolean} [syncScale=true]
+ */
+export function synchronizeTransform(source: Transform, target: Transform, bindings: SignalBinding[], syncPosition?: boolean, syncRotation?: boolean, syncScale?: boolean): void;
+import { SignalBinding } from "../../../src/core/events/signal/SignalBinding.js";
 //# sourceMappingURL=synchronizeTransform.d.ts.map

package/editor/prototypeEditorShell.js

@@ -0,0 +1,102 @@
+import './style/editor.scss';
+
+import Vector2 from "../src/core/geom/Vector2.js";
+import { GameAssetType } from "../src/engine/asset/GameAssetType.js";
+import { ArrayBufferLoader } from "../src/engine/asset/loaders/ArrayBufferLoader.js";
+import { GLTFAssetLoader } from "../src/engine/asset/loaders/GLTFAssetLoader.js";
+import { ImageRGBADataLoader } from "../src/engine/asset/loaders/image/ImageRGBADataLoader.js";
+import { TextureAssetLoader } from "../src/engine/asset/loaders/texture/TextureAssetLoader.js";
+import { ParentEntitySystem } from "../src/engine/ecs/parent/ParentEntitySystem.js";
+import { obtainTerrain } from "../src/engine/ecs/terrain/util/obtainTerrain.js";
+import { populateEngineSerializationRegistry } from "../src/engine/ecs/storage/populateEngineSerializationRegistry.js";
+import { TransformAttachmentSystem } from "../src/engine/ecs/transform-attachment/TransformAttachmentSystem.js";
+import { EngineHarness } from "../src/engine/EngineHarness.js";
+import TopDownCameraController from "../src/engine/graphics/ecs/camera/topdown/TopDownCameraController.js";
+import { ShadedGeometrySystem } from "../src/engine/graphics/ecs/mesh-v2/ShadedGeometrySystem.js";
+import { MeshSystem } from "../src/engine/graphics/ecs/mesh/MeshSystem.js";
+import { ParticleEmitterSystem } from "../src/engine/graphics/particles/ecs/ParticleEmitterSystem.js";
+import { enableEditor } from "./enableEditor.js";
+
+/**
+ * Point the camera at the middle of the terrain, standing off by its own extent.
+ *
+ * The harness anchors terrain at the world origin and aims the camera at the origin too,
+ * so the default view sits on the terrain's corner with three quadrants of empty space —
+ * and every orbit pivots on that corner. The editor camera inherits this state when it
+ * takes over the scene's active camera.
+ *
+ * Standing off by the terrain's extent frames most of it while keeping the far corners
+ * inside the camera's clip range; the rest is a wheel away.
+ *
+ * @param {Engine} engine
+ * @param {Terrain} terrain
+ */
+function frameTerrain(engine, terrain) {
+    const world_x = terrain.size.x * terrain.gridScale;
+    const world_y = terrain.size.y * terrain.gridScale;
+
+    engine.entityManager.dataset.traverseComponents(TopDownCameraController, controller => {
+        controller.target.set(world_x / 2, 0, world_y / 2);
+        controller.distance = Math.max(world_x, world_y);
+    });
+}
+
+/**
+ * Standalone editor shell harness: engine + terrain + lights + camera, the systems the
+ * editor tooling relies on, a seeded mesh library, and the editor enabled from the start.
+ */
+async function main() {
+    const harness = new EngineHarness();
+
+    const engine = await harness.initialize({
+        configuration(config) {
+            const gltfAssetLoader = new GLTFAssetLoader();
+
+            config.addLoader(GameAssetType.ModelGLTF, gltfAssetLoader);
+            config.addLoader(GameAssetType.ModelGLTF_JSON, gltfAssetLoader);
+            config.addLoader(GameAssetType.ArrayBuffer, new ArrayBufferLoader());
+            config.addLoader(GameAssetType.Texture, new TextureAssetLoader());
+            config.addLoader(GameAssetType.Image, new ImageRGBADataLoader());
+        }
+    });
+
+    populateEngineSerializationRegistry(engine.binarySerializationRegistry);
+
+    const em = engine.entityManager;
+
+    await em.addSystem(new MeshSystem(engine));
+    await em.addSystem(new ShadedGeometrySystem(engine));
+    await em.addSystem(new TransformAttachmentSystem(engine));
+    await em.addSystem(new ParentEntitySystem());
+    await em.addSystem(new ParticleEmitterSystem(engine));
+
+    await EngineHarness.buildBasics({
+        engine,
+        terrainSize: new Vector2(32, 32),
+        enableWater: false,
+        cameraController: false,
+        pitch: 0.9
+    });
+
+    // the default terrain has a 1x1 height sampler; height painting needs real resolution
+    const terrain = obtainTerrain(engine.entityManager.dataset);
+    terrain.samplerHeight.resize(256, 256);
+    terrain.updateHeights();
+
+    frameTerrain(engine, terrain);
+
+    const editorControl = enableEditor(engine);
+
+    const editor = editorControl.editor;
+
+    // console access for debugging, mirrors the window.engine convention
+    window.editor = editor;
+
+    editor.meshLibrary.add('data/models/samples/susanne.glb');
+    editor.meshLibrary.add('data/models/samples/teapot.gltf');
+    editor.meshLibrary.add('data/models/samples/textured_unit_cube.gltf');
+
+    editorControl.enable();
+}
+
+main();

package/editor/style/controls.scss

@@ -0,0 +1,168 @@
+/*
+ Skin for the view framework's generic controls (`src/view/elements/**`,
+ `src/view/controller/**`) as they appear inside the editor shell.
+
+ These widgets ship no styling of their own — `ButtonView` for instance renders an empty
+ `div.ui-button-view` with `.foreground`/`.background` slots — so without a skin they are
+ invisible. Scoped to `.meep-editor-shell` so the editor never restyles a host application
+ that uses the same widgets.
+
+ Appearance only: sizing that depends on the surrounding layout belongs to the stylesheet
+ that owns that layout (e.g. `inspector.scss`).
+*/
+
+.meep-editor-shell {
+
+  input,
+  select,
+  button,
+  textarea {
+    font: var(--meep-font);
+  }
+
+  /* text-ish fields: the editor builds all of them as <input type="text"> */
+
+  input[type="text"],
+  input[type="number"],
+  input[type="search"],
+  select,
+  textarea {
+    box-sizing: border-box;
+    min-width: 0;
+
+    background: var(--meep-header-bg);
+    border: 1px solid var(--meep-divider-color);
+    color: var(--meep-fg);
+    padding: 2px 6px;
+    outline: none;
+
+    &:focus {
+      border-color: var(--meep-accent);
+    }
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  input[type="checkbox"] {
+    box-sizing: border-box;
+    margin: 0;
+    width: 13px;
+    height: 13px;
+    accent-color: var(--meep-accent);
+  }
+
+  input[type="color"] {
+    box-sizing: border-box;
+    height: 18px;
+    padding: 1px;
+
+    background: var(--meep-header-bg);
+    border: 1px solid var(--meep-divider-color);
+    cursor: pointer;
+  }
+
+  /*
+   ButtonView. Icon buttons carry no text of their own, the glyph comes from the class
+   the constructing view assigns. Plain Unicode only — the editor must not depend on a
+   host-supplied icon font.
+  */
+
+  .ui-button-view {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+
+    min-width: 18px;
+    min-height: 18px;
+    padding: 0 4px;
+
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--meep-fg-muted);
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+
+    /* styling slots the widget emits, empty and unused by this skin */
+
+    > .foreground,
+    > .background {
+      display: none;
+    }
+
+    &:hover {
+      background: var(--meep-accent);
+      color: #ffffff;
+    }
+
+    &.disabled {
+      opacity: 0.35;
+      pointer-events: none;
+    }
+
+    &.fold-toggle::after {
+      content: '▾';
+    }
+
+    &.copy::after {
+      content: '⧉';
+    }
+
+    &.paste::after {
+      content: '⎘';
+    }
+
+    &.remove::after {
+      content: '✕';
+    }
+
+    &.add::after {
+      content: '+';
+    }
+
+    &.embed::after {
+      content: '⤓';
+    }
+  }
+
+  /* NativeListController: a column of removable elements over an add button */
+
+  .ui-native-list-controller {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+
+    > .ui-list-view {
+      display: flex;
+      flex-direction: column;
+      align-self: stretch;
+      gap: 2px;
+
+      .element-wrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4px;
+
+        > .wrapped-element {
+          flex: 1 1 auto;
+          min-width: 0;
+        }
+      }
+    }
+  }
+
+  /* LineView: a horizontal run of controls */
+
+  .ui-line-view {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+  }
+}

package/editor/style/editor.scss

@@ -0,0 +1,313 @@
+/*
+ Editor shell styling. Self-contained: everything the editor renders is styled from here
+ (plus the layout construct styles it imports); no app-side stylesheets are required.
+
+ The --meep-* tokens defined on the shell root feed both this file and layout.scss.
+*/
+
+@use "../../src/view/layout/layout";
+@use "controls";
+@use "inspector";
+
+.meep-editor-shell {
+  --meep-panel-bg: #3c3f41;
+  --meep-header-bg: #2b2d2f;
+  --meep-divider-color: #232527;
+  --meep-fg: #d6d8da;
+  --meep-fg-muted: #9da0a3;
+  --meep-accent: #2d7dd2;
+  --meep-font: 12px 'Segoe UI', sans-serif;
+
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+
+  font: var(--meep-font);
+  color: var(--meep-fg);
+
+  overflow: hidden;
+
+  /*
+   The shell is pushed onto the engine's ViewStack, whose root carries
+   `pointer-events: none` so a game HUD lets clicks fall through to the 3D scene.
+   The editor is the opposite case — its chrome is the interaction surface — so the
+   whole shell opts back in here. Anything below that wants clicks to pass through
+   (selection marquee, symbolic-display decorators) opts out for itself.
+  */
+  pointer-events: auto;
+}
+
+.meep-editor-toolbar {
+  background: var(--meep-header-bg);
+  border-bottom: 1px solid var(--meep-divider-color);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  padding: 0 6px;
+}
+
+.meep-editor-toolbar-button {
+  display: flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 3px;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+
+  &:hover {
+    background: var(--meep-panel-bg);
+  }
+}
+
+.meep-editor-toolbar-separator {
+  width: 1px;
+  height: 20px;
+  margin: 0 6px;
+  background: var(--meep-divider-color);
+}
+
+.meep-editor-tool-strip {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+
+  .tool-view {
+    cursor: pointer;
+    border-radius: 3px;
+    padding: 3px 8px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    .icon {
+      display: none;
+    }
+
+    &:hover {
+      background: var(--meep-panel-bg);
+    }
+
+    &.active {
+      background: var(--meep-accent);
+
+      .label {
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+.meep-editor-viewport {
+  background: #191b1d;
+  overflow: hidden;
+}
+
+/* scene tree */
+
+.meep-scene-tree-panel {
+  overflow: hidden;
+}
+
+.meep-scene-tree-filter {
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  box-sizing: border-box;
+  background: var(--meep-header-bg);
+
+  input {
+    flex: 1;
+    background: var(--meep-panel-bg);
+    border: 1px solid var(--meep-divider-color);
+    color: var(--meep-fg);
+    font: var(--meep-font);
+    padding: 2px 6px;
+    outline: none;
+
+    &:focus {
+      border-color: var(--meep-accent);
+    }
+  }
+}
+
+.meep-entity-tree-container {
+  overflow: hidden;
+}
+
+.meep-entity-tree {
+  padding-left: 2px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+.meep-entity-tree-row {
+  cursor: pointer;
+  user-select: none;
+
+  > .meep-entity-tree-label {
+    display: flex;
+    flex-direction: row;
+    gap: 6px;
+    padding: 1px 4px;
+    border-radius: 2px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.06);
+    }
+  }
+
+  &.selected > .meep-entity-tree-label {
+    background: var(--meep-accent);
+    color: #ffffff;
+  }
+}
+
+.meep-entity-tree-id {
+  color: var(--meep-fg-muted);
+}
+
+/* tool settings */
+
+.meep-tool-settings {
+  overflow-y: auto;
+}
+
+.meep-tool-settings-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+}
+
+.meep-tool-settings-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+
+  > *:first-child {
+    flex: 0 0 40%;
+    color: var(--meep-fg-muted);
+  }
+}
+
+.meep-layer-swatch-strip {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 4px 0;
+}
+
+.meep-layer-swatch {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border: 2px solid var(--meep-divider-color);
+  border-radius: 3px;
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--meep-fg-muted);
+  }
+
+  &.meep-layer-swatch-active {
+    border-color: var(--meep-accent);
+  }
+}
+
+/* asset library */
+
+.ui-mesh-library-view {
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+
+  /*
+   MeshLibraryView places its cells itself, and View.position is a transform — a
+   transform on an in-flow block only offsets it, so every cell would still consume a
+   flow row and the grid would come out as a diagonal. Taking the cells out of flow is
+   what makes the computed coordinates the whole story.
+  */
+  position: relative;
+
+  > .ui-mesh-library-asset-view {
+    position: absolute;
+    left: 0;
+    top: 0;
+    cursor: grab;
+    user-select: none;
+    overflow: hidden;
+
+    > .ui-mesh-library-asset-thumbnail {
+      background: var(--meep-header-bg);
+      border-radius: 3px;
+      overflow: hidden;
+
+      /* an outline draws over the tile instead of growing it, so the sized placeholder
+         stays exactly the extent the grid was computed against */
+      outline: 1px solid var(--meep-divider-color);
+      outline-offset: -1px;
+
+      img {
+        display: block;
+      }
+    }
+
+    /* the label fills whatever strip the cell has left below the thumbnail, so its height
+       lives in one place: the cell extent the view itself computes */
+    > .label {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      font-size: 11px;
+      line-height: 1;
+      color: var(--meep-fg-muted);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &:hover {
+      > .ui-mesh-library-asset-thumbnail {
+        outline-color: var(--meep-accent);
+      }
+
+      > .label {
+        color: var(--meep-fg);
+      }
+    }
+  }
+}
+
+/* processes panel */
+
+.meep-editor-process-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+
+  > * {
+    padding: 3px 8px;
+    border-radius: 3px;
+    cursor: pointer;
+    background: var(--meep-header-bg);
+
+    &.process-state-running {
+      background: var(--meep-accent);
+      color: #ffffff;
+    }
+  }
+}
+