@woosh/meep-engine 2.84.9 → 2.84.11

package/editor/view/EditorView.js

@@ -4,37 +4,26 @@
 
 
 import { passThrough } from "../../src/core/function/passThrough.js";
-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 { ProcessState } from "../../src/core/process/ProcessState.js";
-import { obtainTerrain } from "../../src/engine/ecs/terrain/util/obtainTerrain.js";
-import { Transform } from "../../src/engine/ecs/transform/Transform.js";
-import Mesh from "../../src/engine/graphics/ecs/mesh/Mesh.js";
-import { MeshEvents } from "../../src/engine/graphics/ecs/mesh/MeshEvents.js";
-import { make_ray_from_viewport_position } from "../../src/engine/graphics/make_ray_from_viewport_position.js";
 import LabelView from '../../src/view/common/LabelView.js';
 import ListView from "../../src/view/common/ListView.js";
 import VirtualListView from '../../src/view/common/VirtualListView.js';
 import dom from "../../src/view/DOM.js";
-import BottomLeftResizeHandleView from "../../src/view/elements/BottomLeftResizeHandleView.js";
+import EmptyView from "../../src/view/elements/EmptyView.js";
 
 import SimpleWindow from '../../src/view/elements/SimpleWindow.js';
 import View from "../../src/view/View.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";
 import ComponentControlFactory from './ecs/ComponentControlFactory.js';
 import EntityEditorView from './ecs/EntityEditor.js';
 
 import EntityListView from './ecs/EntityList.js';
+import { HierarchicalEntityListView } from "./ecs/HierarchicalEntityListView.js";
 import GridPickCoordinateView from "./GridPickCoordinateView.js";
-import MeshLibraryView from "./library/MeshLibraryView.js";
 import { makeEntityDecorators } from "./makeEntityDecorators.js";
 import ProcessView from "./process/ProcessView.js";
 import ToolSettingsView from "./tools/ToolSettingsView.js";
 import ToolView from './tools/ToolView.js';
+import { SplitView } from "./v2/SplitView.js";
 
 
 class ViewManager extends View {
@@ -51,7 +40,13 @@ class ViewManager extends View {
         this.memory = {};
     }
 
-    add(view, title) {
+    /**
+     *
+     * @param {View} view
+     * @param {string} [title]
+     * @returns {SimpleWindowView}
+     */
+    add(view, title = "") {
         const simpleWindow = new SimpleWindow(
             view,
             {
@@ -118,171 +113,11 @@ class ViewManager extends View {
 }
 
 
-/**
- *
- * @param {Editor} editor
- */
-function prepareMeshLibrary(editor) {
-    let resolveEngine;
-
-    const pEngine = new Promise(function (resolve, reject) {
-        resolveEngine = resolve;
-
-    });
-
-    /**
-     *
-     * @type {Promise<GraphicsEngine>}
-     */
-    const pGraphicsEngine = pEngine.then(function (e) {
-        return e.graphics;
-    });
-
-    const pRenderer = pGraphicsEngine.then(function (graphicsEngine) {
-        return graphicsEngine.renderer;
-    });
-
-    const pAssetManager = pEngine.then(e => e.assetManager);
-
-    const meshLibraryView = new MeshLibraryView(
-        editor.meshLibrary,
-        pAssetManager,
-        pRenderer
-    );
-
-    function handleDropEvent(event) {
-        event.stopPropagation();
-        event.preventDefault();
-
-        const dataText = event.dataTransfer.getData('text/json');
-        if (dataText === "") {
-            //no data
-            return;
-        }
-
-        const data = JSON.parse(dataText);
-
-        const type = data.type;
-
-        if (type !== "Mesh") {
-            //wrong type
-            return;
-        }
-
-        const url = data.url;
-
-        const engine = editor.engine;
-        const graphics = engine.graphics;
-
-        const position = new Vector2(event.clientX, event.clientY);
-
-        graphics.viewport.positionGlobalToLocal(position, position);
-
-        const normalizedPosition = new Vector2();
-
-        //compute world position for drop
-        const ray = make_ray_from_viewport_position(engine, position);
-
-        const source = ray.origin;
-        const direction = ray.direction;
-
-
-        const entityManager = engine.entityManager;
-        const ecd = entityManager.dataset;
-
-        const terrain = obtainTerrain(ecd);
-
-        const worldPosition = new Vector3();
-
-        const mesh = new Mesh();
-
-        mesh.castShadow = true;
-        mesh.receiveShadow = true;
-
-        const transform = new Transform();
-
-        const actions = editor.actions;
-        actions.mark('New Mesh Placed from Library');
-        const entityCreateAction = new EntityCreateAction();
-        actions.do(entityCreateAction);
-
-        const sp3 = new SurfacePoint3();
-
-        const hit_found = terrain.raycastFirstSync(sp3, source.x, source.y, source.z, direction.x, direction.y, direction.z);
-
-        function handleMeshSetEvent() {
-            const bb = mesh.boundingBox;
-
-            const c0 = new Vector3(bb.x0, bb.y0, bb.z0);
-            const c1 = new Vector3(bb.x1, bb.y1, bb.z1);
-
-            const diagonal = c0.distanceTo(c1);
-
-            const offset = direction.clone().multiplyScalar(diagonal);
-
-            transform.position.add(offset);
-
-            //remove listener
-            ecd.removeEntityEventListener(entityCreateAction.entity, MeshEvents.DataSet, handleMeshSetEvent);
-        }
-
-        if (hit_found) {
-            //got a terrain ray hit, set world placement position to that point
-            worldPosition.copy(sp3.position);
-        } else {
-            //set position to the source of the ray pick if there's nothing else available
-            worldPosition.copy(source);
-
-
-            //wait for mesh to load
-            ecd.addEntityEventListener(entityCreateAction.entity, MeshEvents.DataSet, handleMeshSetEvent);
-        }
-
-        transform.position.copy(worldPosition);
-
-        mesh.url = url;
-
-
-        actions.doMany([
-            new ComponentAddAction(entityCreateAction.entity, transform),
-            new ComponentAddAction(entityCreateAction.entity, mesh),
-            //automatically select newly placed object
-            new SelectionClearAction(),
-            new SelectionAddAction([entityCreateAction.entity])
-        ]);
-
-    }
-
-    function handleDragOverEvent(event) {
-        event.preventDefault();
-    }
-
-
-    meshLibraryView.on.linked.add(function () {
-        resolveEngine(editor.engine);
-
-        const viewport = editor.engine.graphics.viewport;
-
-        viewport.el.addEventListener('drop', handleDropEvent);
-        viewport.el.addEventListener('dragover', handleDragOverEvent);
-    });
-
-    meshLibraryView.on.unlinked.add(function () {
-        const viewport = editor.engine.graphics.viewport;
-
-        viewport.el.removeEventListener('drop', handleDropEvent);
-        viewport.el.removeEventListener('dragover', handleDragOverEvent);
-    });
-
-    meshLibraryView.size.set(400, 400);
+class EditorView extends View {
+    main = new EmptyView()
 
-    const resizeHandleView = new BottomLeftResizeHandleView(meshLibraryView);
-    meshLibraryView.addChild(resizeHandleView);
+    mainViewport = new EmptyView();
 
-    return meshLibraryView;
-}
-
-class EditorView extends View {
     /**
      *
      * @param {Editor} editor
@@ -311,6 +146,11 @@ class EditorView extends View {
         const decorators = makeEntityDecorators();
 
 
+        const entity_list_view = new HierarchicalEntityListView();
+
+        entity_list_view.dataset = editor.engine.entityManager.dataset;
+        entity_list_view.on.interact.add(inspectEntity);
+
         const entityListView = new EntityListView({ editor, decorators });
         this.entityListView = entityListView;
 
@@ -324,6 +164,8 @@ class EditorView extends View {
             const em = editor.engine.entityManager;
             entityEditor.entityManager.set(em);
             entityEditor.model.set(entity);
+
+            entity_list_view.selection = [entity];
         }
 
         this.bindSignal(editor.selection.on.added, function (entity) {
@@ -339,7 +181,6 @@ class EditorView extends View {
         const toolSettings = new ToolSettingsView({});
         this.toolSettings = toolSettings;
 
-        //tool bar
         const toolBar = new ListView(editor.toolEngine.tools, {
             elementFactory: function (tool) {
                 const toolView = new ToolView({ tool, editor });
@@ -398,46 +239,46 @@ class EditorView extends View {
         this.selectionView = selectionView;
 
 
-        const coordinateView = new GridPickCoordinateView(editor);
-        this.coordinateView = coordinateView;
-
-        this.meshLibraryView = prepareMeshLibrary(editor);
-        this.meshLibraryView.size.set(340, 200);
+        this.coordinateView = new GridPickCoordinateView(editor);
 
         //
         this.bindSignal(this.size.onChanged, this.layout.bind(this));
 
 
-        this.addChild(this.coordinateView);
-        this.addChild(this.selectionView);
-        this.addChild(this.entityEditor);
-        this.addChild(this.entityListView);
-        this.addChild(this.toolBar);
-        this.addChild(this.processBar);
-        this.addChild(this.meshLibraryView);
-        this.addChild(this.toolSettings);
+        this.mainViewport.addChild(this.coordinateView);
+        this.mainViewport.addChild(this.selectionView);
+        this.mainViewport.addChild(this.toolBar);
+        this.mainViewport.addChild(this.processBar);
+        this.mainViewport.addChild(this.toolSettings);
+
+
+        const split = SplitView.from({
+            fraction: 0.2,
+            a: entity_list_view,
+            b: SplitView.from({
+                fraction: 0.7,
+                a: this.mainViewport,
+                b: this.entityEditor,
+            })
+        });
+        this.main.addChild(split);
+
+        this.main.size.onChanged.add(split.size.set, split.size);
+
+        this.addChild(this.main);
     }
 
     layout() {
         const size = this.size;
 
-        this.entityEditor.size.set(360, size.y);
-        this.entityEditor.position.set(size.x - this.entityEditor.size.x, 0);
-
-        this.entityListView.size.set(200, size.y);
-        this.entityListView.position.set(0, 0);
-
+        this.main.size.copy(size);
         if (this.gameView !== null) {
-            this.gameView.position.set(this.entityListView.position.x + this.entityListView.size.x, 0);
-            this.gameView.size.set(size.x - (this.entityEditor.size.x + this.entityListView.size.x), size.y);
-
             this.toolBar.size.set(this.gameView.size.x, 36);
             this.toolBar.position.set(this.gameView.position.x + 5, this.gameView.position.y + this.gameView.size.y - (this.toolBar.size.y + 5));
 
             // this.processBar.size.set(this.gameView.size.x, 36);
             // this.processBar.position.set(this.toolBar.position.x, 5);
 
-            this.meshLibraryView.position.set(this.gameView.position.x + this.gameView.size.x - (this.meshLibraryView.size.x + 5), 5);
         }
     }
 
@@ -446,7 +287,9 @@ class EditorView extends View {
 
         //hijack game view from the engine
         this.gameView = this.editor.engine.gameView;
-        this.addChild(this.gameView);
+        this.mainViewport.addChild(this.gameView);
+
+        this.mainViewport.size.onChanged.add(this.gameView.size.set, this.gameView.size);
 
         this.layout();
     }
@@ -455,7 +298,8 @@ class EditorView extends View {
         super.unlink();
         if (this.gameView !== null) {
             //release game view
-            this.removeChild(this.gameView);
+            this.mainViewport.removeChild(this.gameView);
+            this.mainViewport.size.onChanged.remove(this.gameView.size.set, this.gameView.size);
             this.gameView = null;
         }
     }

package/editor/view/ecs/HierarchicalEntityListView.js

@@ -0,0 +1,191 @@
+import Name from "../../../../model/game/ecs/component/Name.js";
+import { arraySetSortingDiff } from "../../../src/core/collection/array/arraySetSortingDiff.js";
+import List from "../../../src/core/collection/list/List.js";
+import Signal from "../../../src/core/events/signal/Signal.js";
+import { number_compare_ascending } from "../../../src/core/primitives/numbers/number_compare_ascending.js";
+import { ParentEntity } from "../../../src/engine/ecs/parent/ParentEntity.js";
+import { MouseEvents } from "../../../src/engine/input/devices/events/MouseEvents.js";
+import LabelView from "../../../src/view/common/LabelView.js";
+import ListView from "../../../src/view/common/ListView.js";
+import EmptyView from "../../../src/view/elements/EmptyView.js";
+import style from "./HierarchicalEntityListView.module.scss";
+
+export class HierarchicalEntityListView extends EmptyView {
+
+    /**
+     *
+     * @type {EntityComponentDataset|null}
+     */
+    #dataset = null;
+
+    #roots = new List();
+
+    #child_map = new Map();
+
+    #selected = new List();
+
+
+    #update_roots() {
+        const new_roots = [];
+
+        const ecd = this.#dataset;
+
+        ecd.traverseEntityIndices(id => {
+
+            const parent = ecd.getComponent(id, ParentEntity);
+
+            if (parent !== undefined) {
+                const childMap = this.#child_map;
+                let children = childMap.get(parent.entity);
+                if (children === undefined) {
+                    children = [];
+                    childMap.set(parent.entity, children);
+                }
+                children.push(id);
+
+                return;
+            }
+
+            new_roots.push(id);
+        });
+
+        // perform patch
+        const diff = arraySetSortingDiff(new_roots, this.#roots.asArray(), number_compare_ascending);
+
+        for (let i = 0; i < diff.uniqueB.length; i++) {
+            const removal_id = diff.uniqueB[i];
+
+            this.#roots.removeOneOf(removal_id);
+        }
+
+
+        for (let i = 0; i < diff.uniqueA.length; i++) {
+            const addition_id = diff.uniqueA[i];
+
+            this.#roots.add(addition_id);
+        }
+    }
+
+    set selection(entities) {
+        this.#selected.patch(entities);
+    }
+
+    set dataset(v) {
+        this.#roots.reset();
+
+        this.#dataset = v;
+
+        this.#update_roots();
+    }
+
+    /**
+     *
+     * @param {number} entity
+     */
+    #make_entity_view(entity) {
+
+        const ecd = this.#dataset;
+
+        const children = this.#child_map.get(entity);
+
+        const has_children = children !== undefined;
+
+        const entity_view = new EmptyView({
+            classList:[style.entityView],
+            css: {
+                position: 'relative',
+                pointerEvents: "auto",
+            }
+        });
+
+        let label_text = `${entity}`;
+
+        const name = ecd.getComponent(entity, Name);
+
+        if (name !== undefined) {
+            label_text += `: ${name}`
+        }
+
+        entity_view.addChild(new LabelView(label_text, {
+            css: {
+                position: 'relative'
+            }
+        }));
+
+        if (has_children) {
+
+            const children_container = new EmptyView({
+                css: {
+                    paddingLeft: "8px"
+                }
+            });
+
+            for (let i = 0; i < children.length; i++) {
+
+                const child = children[i];
+
+                const child_view = this.#make_entity_view(child);
+
+                children_container.addChild(child_view);
+
+            }
+
+            entity_view.addChild(children_container);
+
+        }
+
+        entity_view.el.addEventListener(MouseEvents.Click, (evt) => {
+            this.on.interact.send1(entity);
+
+            evt.stopPropagation();
+        });
+
+
+        const update_selection = () => {
+            const is_selected = this.#selected.contains(entity);
+
+            entity_view.setClass("selected", is_selected);
+        }
+
+        entity_view.bindSignal(this.#selected.on.added, update_selection);
+        entity_view.bindSignal(this.#selected.on.removed, update_selection);
+        entity_view.on.linked.add(update_selection);
+
+        return entity_view;
+    }
+
+    constructor() {
+        super();
+
+        const listView = new ListView(this.#roots, {
+            classList: [
+                style.main
+            ],
+            elementFactory: (entity) => {
+
+                return this.#make_entity_view(entity);
+            },
+        });
+
+        listView.css({
+            display: 'flex',
+            flexDirection: 'column'
+        })
+
+        this.size.onChanged.add(listView.size.set, listView.size);
+
+        this.on.interact = new Signal();
+
+        this.addChild(listView);
+    }
+
+    link() {
+        super.link();
+
+        this.#update_roots();
+    }
+
+    unlink() {
+        super.unlink();
+    }
+}

package/editor/view/ecs/HierarchicalEntityListView.module.scss

@@ -0,0 +1,13 @@
+.main {
+  padding-left: 2px;
+  background: white;
+
+  overflow-y: auto; // enable scrolling
+  pointer-events: auto; // enable scroll-bar to capture pointer events
+}
+
+.entityView:nth-child(2n) {
+  padding-top: 1px;
+  padding-bottom: 1px;
+  background: #efefef;
+}