@woosh/meep-engine 2.46.28 → 2.46.30

package/editor/tools/v2/prototypeTransformControls.js

@@ -0,0 +1,92 @@
+import { EngineHarness } from "../../../src/engine/EngineHarness.js";
+import EntityBuilder from "../../../src/engine/ecs/EntityBuilder.js";
+import { ShadedGeometry } from "../../../src/engine/graphics/ecs/mesh-v2/ShadedGeometry.js";
+import { BoxBufferGeometry, MeshStandardMaterial } from "three";
+import { Transform } from "../../../src/engine/ecs/transform/Transform.js";
+import { ShadedGeometrySystem } from "../../../src/engine/graphics/ecs/mesh-v2/ShadedGeometrySystem.js";
+import { TransformControls } from "./TransformControls.js";
+import { Camera } from "../../../src/engine/graphics/ecs/camera/Camera.js";
+import { TransformAttachmentSystem } from "../../../src/engine/ecs/transform-attachment/TransformAttachmentSystem.js";
+import InputController from "../../../src/engine/input/ecs/components/InputController.js";
+import InputControllerSystem from "../../../src/engine/input/ecs/systems/InputControllerSystem.js";
+import { GLTFAssetLoader } from "../../../src/engine/asset/loaders/GLTFAssetLoader.js";
+import {
+    three_object_to_entity_composition
+} from "../../../src/engine/graphics/ecs/mesh-v2/three_object_to_entity_composition.js";
+
+const harness = new EngineHarness();
+
+/**
+ *
+ * @param {Engine} engine
+ */
+async function main(engine) {
+    await EngineHarness.buildBasics({
+        engine,
+        cameraController: false
+    });
+
+    const gltf_asset = await engine.assetManager.promise('data/models/sponza-pbr/gltf/sponza.glb', 'gltf');
+
+
+    const ecd = engine.entityManager.dataset;
+
+    // create something to drag
+    const cube_entity = new EntityBuilder()
+        .add(ShadedGeometry.from(
+            new BoxBufferGeometry(1, 1, 1),
+            new MeshStandardMaterial({
+                color: 0xFFAAAA
+            })
+        ))
+        .add(Transform.fromJSON({
+            position: {
+                x: 10,
+                y: 0,
+                z: 10
+            }
+        }))
+        .build(ecd);
+
+    const camera = ecd.getAnyComponent(Camera);
+
+    const controls = new TransformControls(camera.component.object, engine.gameView.el);
+
+    const entityNode = three_object_to_entity_composition(gltf_asset.create());
+    entityNode.build(ecd);
+    entityNode.transform.scale.multiplyScalar(0.1);
+
+    controls.build(ecd); // add controls to the scene
+    // controls.attach(cube_entity); // make controls target the cube
+    controls.attach(entityNode.entity.entity); // make controls target the cube
+
+    new EntityBuilder()
+        .add(new InputController([{
+            path: 'keyboard/keys/w/down',
+            listener() {
+                controls.mode = "translate"
+            }
+        }, {
+            path: 'keyboard/keys/e/down',
+            listener() {
+                controls.mode = "scale"
+            }
+        }, {
+            path: 'keyboard/keys/r/down',
+            listener() {
+                controls.mode = "rotate"
+            }
+        }]))
+        .build(ecd);
+
+}
+
+harness.initialize({
+    configuration(config, engine) {
+        config.addSystem(new ShadedGeometrySystem(engine));
+        config.addSystem(new TransformAttachmentSystem(engine));
+        config.addSystem(new InputControllerSystem(engine.devices));
+
+        config.addLoader('gltf', new GLTFAssetLoader());
+    }
+}).then(main);

package/editor/view/EditorView.js

@@ -0,0 +1,462 @@
+/**
+ * Created by Alex on 14/01/2017.
+ */
+
+
+import View from "../../src/view/View.js";
+import dom from "../../src/view/DOM.js";
+
+import EntityListView from './ecs/EntityList.js';
+import EntityEditorView from './ecs/EntityEditor.js';
+import ComponentControlFactory from './ecs/ComponentControlFactory.js';
+import VirtualListView from '../../src/view/common/VirtualListView.js';
+import LabelView from '../../src/view/common/LabelView.js';
+import ToolView from './tools/ToolView.js';
+
+import SimpleWindow from '../../src/view/elements/SimpleWindow.js';
+import ToolSettingsView from "./tools/ToolSettingsView.js";
+import GridPickCoordinateView from "./GridPickCoordinateView.js";
+import ListView from "../../src/view/common/ListView.js";
+import ProcessView from "./process/ProcessView.js";
+import MeshLibraryView from "./library/MeshLibraryView.js";
+import BottomLeftResizeHandleView from "../../src/view/elements/BottomLeftResizeHandleView.js";
+import Vector2 from "../../src/core/geom/Vector2.js";
+import Vector3 from "../../src/core/geom/Vector3.js";
+import Mesh from "../../src/engine/graphics/ecs/mesh/Mesh.js";
+import { Transform } from "../../src/engine/ecs/transform/Transform.js";
+import SelectionClearAction from "../actions/concrete/SelectionClearAction.js";
+import EntityCreateAction from "../actions/concrete/EntityCreateAction.js";
+import ComponentAddAction from "../actions/concrete/ComponentAddAction.js";
+import SelectionAddAction from "../actions/concrete/SelectionAddAction.js";
+import { passThrough } from "../../src/core/function/Functions.js";
+import { ProcessState } from "../../src/core/process/ProcessState.js";
+import { MeshEvents } from "../../src/engine/graphics/ecs/mesh/MeshEvents.js";
+import { obtainTerrain } from "../../src/engine/ecs/terrain/util/obtainTerrain.js";
+import { SurfacePoint3 } from "../../src/core/geom/3d/SurfacePoint3.js";
+
+class ViewManager extends View {
+    constructor() {
+        super();
+        const dRoot = dom('div');
+        dRoot.addClass('view-manager');
+
+        this.el = dRoot.el;
+
+        this.storage = [];
+
+        //store parameters of previously opened windows
+        this.memory = {};
+    }
+
+    add(view, title) {
+        const simpleWindow = new SimpleWindow(
+            view,
+            {
+                draggable: true,
+                closeable: false,
+                resizable: true,
+                title: title
+            }
+        );
+
+        this.storage.push({
+            original: view,
+            window: simpleWindow
+        });
+
+        this.addChild(simpleWindow);
+
+        if (this.memory.hasOwnProperty(title)) {
+            const windowParams = this.memory[title];
+            view.size.copy(windowParams.size);
+            simpleWindow.position.copy(windowParams.position);
+        }
+
+        return simpleWindow;
+    }
+
+    exists(view) {
+        return this.getInternalIndex(view) !== -1;
+    }
+
+    getInternalIndex(view) {
+        for (let i = 0; i < this.storage.length; i++) {
+            const el = this.storage[i];
+            if (el.original === view) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    remove(view) {
+        //find the window
+        const internalIndex = this.getInternalIndex(view);
+
+        if (internalIndex === -1) {
+            return false;
+        }
+
+        const el = this.storage[internalIndex];
+        //cut from internal index
+        this.storage.splice(internalIndex, 1);
+
+        const vWindow = el.window;
+        this.removeChild(vWindow);
+
+        //remember window parameters
+        this.memory[vWindow.title.get()] = {
+            position: vWindow.position.clone(),
+            size: view.size.clone()
+        };
+
+        return true;
+    }
+}
+
+
+/**
+ *
+ * @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
+
+        graphics.normalizeViewportPoint(position, normalizedPosition);
+
+        const source = new Vector3();
+        const direction = new Vector3();
+
+        graphics.viewportProjectionRay(normalizedPosition.x, normalizedPosition.y, source, 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);
+
+    const resizeHandleView = new BottomLeftResizeHandleView(meshLibraryView);
+    meshLibraryView.addChild(resizeHandleView);
+
+    return meshLibraryView;
+}
+
+class EditorView extends View {
+    /**
+     *
+     * @param {Editor} editor
+     * @constructor
+     */
+    constructor(editor) {
+        super(editor);
+
+        const dRoot = dom('div');
+        dRoot.addClass('editor-view');
+
+        this.el = dRoot.el;
+
+        /**
+         *
+         * @type {Editor}
+         */
+        this.editor = editor;
+
+        /**
+         *
+         * @type {View|null}
+         */
+        this.gameView = null;
+
+
+        const entityListView = new EntityListView(editor);
+        this.entityListView = entityListView;
+
+        //entity editor
+        const controllerFactory = new ComponentControlFactory();
+        const entityEditor = new EntityEditorView(controllerFactory, editor);
+
+        this.entityEditor = entityEditor;
+
+        function inspectEntity(entity) {
+            const em = editor.engine.entityManager;
+            entityEditor.entityManager.set(em);
+            entityEditor.model.set(entity);
+        }
+
+        this.bindSignal(editor.selection.on.added, function (entity) {
+            if (editor.selection.length === 1) {
+                //when first thing is selected - inspect it automatically
+                inspectEntity(entity);
+            }
+        });
+
+        entityListView.on.interaction.add(inspectEntity);
+        this.entityListView = entityListView;
+
+        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 });
+
+                toolView.el.addEventListener('click', function () {
+                    editor.toolEngine.activate(tool.name);
+                    toolSettings.setTool(tool);
+                });
+
+                const activeTool = editor.toolEngine.active;
+
+                function handleActivation() {
+                    toolView.el.classList.toggle('active', activeTool.getValue() === tool);
+                }
+
+                toolView.on.linked.add(handleActivation);
+                toolView.bindSignal(activeTool.onChanged, handleActivation);
+
+                return toolView;
+            },
+            classList: ['editor-tool-bar']
+        });
+        this.toolBar = toolBar;
+
+        //tool bar
+        const processBar = new ListView(editor.processEngine.processes, {
+            elementFactory: function (process) {
+                const toolView = new ProcessView(process);
+                toolView.el.addEventListener('click', function () {
+                    if (process.__state.getValue() !== ProcessState.Running) {
+                        editor.processEngine.startByName(process.name);
+                    } else {
+                        editor.processEngine.stopByName(process.name);
+                    }
+                });
+
+                return toolView;
+            },
+            classList: ['editor-process-bar']
+        });
+        this.processBar = processBar;
+
+        //selection list
+        const selectionView = new VirtualListView(editor.selection, {
+            elementFactory: function (entity) {
+                const labelView = new LabelView(entity, { format: passThrough });
+                labelView.el.addEventListener('click', function () {
+                    inspectEntity(entity);
+                });
+                return labelView;
+            },
+            classList: ['selected-entities']
+        });
+
+        selectionView.size.set(70, 120);
+        this.selectionView = selectionView;
+
+
+        const coordinateView = new GridPickCoordinateView(editor);
+        this.coordinateView = coordinateView;
+
+        this.meshLibraryView = prepareMeshLibrary(editor);
+        this.meshLibraryView.size.set(340, 200);
+
+        //
+        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);
+    }
+
+    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);
+
+        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);
+        }
+    }
+
+    link() {
+        super.link();
+
+        //hijack game view from the engine
+        this.gameView = this.editor.engine.gameView;
+        this.addChild(this.gameView);
+
+        this.layout();
+    }
+
+    unlink() {
+        super.unlink();
+        if (this.gameView !== null) {
+            //release game view
+            this.removeChild(this.gameView);
+            this.gameView = null;
+        }
+    }
+}
+
+
+export default EditorView;

package/editor/view/GridPickCoordinateView.js

@@ -0,0 +1,88 @@
+import View from "../../src/view/View.js";
+import domify from "../../src/view/DOM.js";
+import { PointerDevice } from "../../src/engine/input/devices/PointerDevice.js";
+import { obtainTerrain } from "../../src/engine/ecs/terrain/util/obtainTerrain.js";
+import { pick } from "../../src/ecs/grid/pick.js";
+
+class GridPickCoordinateView extends View {
+    /**
+     *
+     * @param {Editor} editor
+     * @constructor
+     */
+    constructor(editor) {
+        super();
+
+        this.$el = domify('div');
+
+        this.el = this.$el.el;
+
+        this.addClass('ui-grid-pick-coordinate-view');
+
+        this.pointer = new PointerDevice(null);
+
+        this.editor = editor;
+
+    }
+
+    pick(x, y) {
+        const $el = this.$el;
+        const engine = this.editor.engine;
+
+        const vp = engine.gameView.position;
+
+        const em = engine.entityManager;
+
+        const ecd = em.dataset;
+
+        if (ecd === null) {
+            return;
+        }
+
+        const terrain = obtainTerrain(ecd);
+
+        if (terrain === null) {
+            //no terrain
+            return;
+        }
+
+        pick(x - vp.x, y - vp.y, engine.graphics, terrain, function (v2, v3, normal) {
+            v2.floor();
+            $el.text(`x: ${v2.x}, y: ${v2.y}`);
+        });
+    }
+
+    /**
+     *
+     * @return {PointerDevice}
+     */
+    getPointer() {
+        return this.editor.engine.devices.pointer;
+    }
+
+    link() {
+        super.link();
+
+        const viewport = this.editor.engine.graphics.viewport;
+
+        this.pointer.domElement = viewport.el;
+
+        this.pointer.start();
+
+        const position = this.getPointer().position;
+        this.pick(position.x, position.y);
+
+        position.onChanged.add(this.pick, this);
+    }
+
+    unlink() {
+        super.unlink();
+
+        this.pointer.stop();
+
+        this.getPointer().position.onChanged.remove(this.pick, this);
+    }
+}
+
+
+export default GridPickCoordinateView;

package/editor/view/ecs/ComponentControlFactory.js

@@ -0,0 +1,48 @@
+/**
+ * Created by Alex on 14/01/2017.
+ */
+
+
+//TODO consider making more abstract and using as a ViewFactory elsewhere
+
+import { assert } from "../../../src/core/assert.js";
+
+/**
+ *
+ * @constructor
+ */
+function ComponentControlFactory() {
+    this.controllerTypes = {};
+}
+
+/**
+ *
+ * @param {string} componentTypeName
+ * @param {function} factory
+ * @returns {ComponentControlFactory}
+ */
+ComponentControlFactory.prototype.register = function (componentTypeName, factory) {
+    assert.equal(typeof factory, 'function');
+    assert.equal(typeof componentTypeName, 'string');
+
+    this.controllerTypes[componentTypeName] = factory;
+
+    return this;
+};
+
+/**
+ *
+ * @param {string} componentTypeName
+ * @returns {object} instance of a controller for given component type
+ */
+ComponentControlFactory.prototype.create = function (componentTypeName) {
+    const factory = this.controllerTypes[componentTypeName];
+    return factory();
+};
+
+ComponentControlFactory.prototype.exists = function (typeName) {
+    return this.controllerTypes.hasOwnProperty(typeName);
+};
+
+export default ComponentControlFactory;
+