@woosh/meep-engine 2.46.29 → 2.46.30

package/editor/tools/TransformTool.js

@@ -0,0 +1,370 @@
+import { TransformControls } from "../../src/engine/graphics/three/TransfromControls.js";
+import { Camera } from "../../src/engine/graphics/ecs/camera/Camera.js";
+
+import { Group, Object3D } from 'three';
+import { SignalBinding } from "../../src/core/events/signal/SignalBinding.js";
+import { Transform } from "../../src/engine/ecs/transform/Transform.js";
+import Tool from "./engine/Tool.js";
+import { KeyCodes } from "../../src/engine/input/devices/KeyCodes.js";
+import TransformModifyAction from "../actions/concrete/TransformModifyAction.js";
+import { assert } from "../../src/core/assert.js";
+import { threeUpdateTransform } from "../../src/engine/graphics/util/threeUpdateTransform.js";
+
+
+function TransformContainer(entity) {
+    this.entity = entity;
+
+    //create a surrogate object
+    this.surrogate = new Object3D();
+}
+
+/**
+ *
+ * @param {Editor} editor
+ * @param {Transform} transform
+ */
+TransformContainer.prototype.link = function (editor, transform) {
+    const engine = editor.engine;
+
+    let allowWriteToModel = true;
+    let allowWriteToSurrogate = true;
+
+    const activeCamera = editor.cameraEntity.getComponent(Camera);
+
+    this.controls = new TransformControls(activeCamera.object, engine.gameView.el);
+
+    //make controls smaller, this was requested by Joao originally, to match other editors where gizmos are not as large
+    this.controls.size = 0.7;
+
+
+    const surrogate = this.surrogate;
+
+    function patchThreeVector3(vector, target) {
+        let x = vector.x;
+        let y = vector.y;
+        let z = vector.z;
+        Object.defineProperties(vector, {
+            x: {
+                get() {
+                    return x;
+                },
+                set(v) {
+                    x = v;
+
+                    if (allowWriteToModel) {
+                        allowWriteToSurrogate = false;
+                        target.setX(v);
+                        allowWriteToSurrogate = true;
+                    }
+                }
+            },
+            y: {
+                get() {
+                    return y;
+                },
+                set(v) {
+                    y = v;
+
+                    if (allowWriteToModel) {
+                        allowWriteToSurrogate = false;
+                        target.setY(v);
+                        allowWriteToSurrogate = true;
+                    }
+                }
+            },
+            z: {
+                get() {
+                    return z;
+                },
+                set(v) {
+                    z = v;
+
+                    if (allowWriteToModel) {
+                        allowWriteToSurrogate = false;
+                        target.setZ(v);
+                        allowWriteToSurrogate = true;
+                    }
+                }
+            }
+        });
+    }
+
+    patchThreeVector3(surrogate.position, transform.position);
+
+    patchThreeVector3(surrogate.scale, transform.scale);
+
+    assert.typeOf(surrogate.rotation._onChange, 'function', 'rotation._onChange');
+
+    surrogate.rotation._onChange(function () {
+        if (!allowWriteToModel) {
+            return;
+        }
+
+        allowWriteToSurrogate = false;
+
+        try {
+            transform.rotation.__setFromEuler(surrogate.rotation.x, surrogate.rotation.y, surrogate.rotation.z, 'XYZ');
+        } catch (e) {
+            console.error(e);
+        }
+
+        allowWriteToSurrogate = true;
+    });
+
+    assert.typeOf(surrogate.quaternion._onChange, 'function', 'quaternion._onChange');
+
+    surrogate.quaternion._onChange(function () {
+        if (!allowWriteToModel) {
+            return;
+        }
+
+        allowWriteToSurrogate = false;
+
+        try {
+            transform.rotation.copy(surrogate.quaternion);
+        } catch (e) {
+            console.error(e);
+        }
+
+        allowWriteToSurrogate = true;
+    });
+
+    //set surrogate transform to match component
+    surrogate.position.copy(transform.position);
+    transform.rotation.__setThreeEuler(surrogate.rotation);
+    surrogate.quaternion.copy(transform.rotation);
+    surrogate.scale.copy(transform.scale);
+
+    this.bindings = [
+        new SignalBinding(transform.position.onChanged, function (x, y, z) {
+            allowWriteToModel = false;
+
+            if (allowWriteToSurrogate) {
+                surrogate.position.set(x, y, z);
+            }
+
+            allowWriteToModel = true;
+        }),
+        new SignalBinding(transform.scale.onChanged, function (x, y, z) {
+            allowWriteToModel = false;
+
+            if (allowWriteToSurrogate) {
+                surrogate.scale.set(x, y, z);
+            }
+
+            allowWriteToModel = true;
+        }),
+        new SignalBinding(transform.rotation.onChanged, function () {
+            allowWriteToModel = false;
+
+            if (allowWriteToSurrogate) {
+                const rotation = transform.rotation;
+                rotation.__setThreeEuler(surrogate.rotation);
+                surrogate.quaternion.set(rotation.x, rotation.y, rotation.z, rotation.w);
+            }
+
+            allowWriteToModel = true;
+        }),
+    ];
+
+    this.bindings.forEach(function (b) {
+        b.link();
+    });
+
+    this.controls.attach(surrogate);
+};
+
+TransformContainer.prototype.unlink = function () {
+    this.bindings.forEach(function (b) {
+        b.unlink();
+    });
+
+    this.controls.detach();
+};
+
+/**
+ *
+ * @enum {string}
+ */
+export const TransformerMode = {
+    Scale: 'scale',
+    Translation: 'translate',
+    Rotation: 'rotate'
+};
+
+export class TransformTool extends Tool {
+    /**
+     *
+     * @constructor
+     */
+    constructor() {
+        super();
+        this.name = "spatial_transform";
+
+        this.mode.set(TransformerMode.Translation);
+
+        /**
+         *
+         * @type {TransformContainer[]}
+         */
+        this.surrogates = [];
+        this.actions = [];
+
+        /**
+         *
+         * @type {Group}
+         */
+        this.editObject = new Group();
+    }
+
+    initialize() {
+        super.initialize();
+
+        const editor = this.editor;
+
+        const self = this;
+
+        this.mode.onChanged.add(function (mode) {
+            self.surrogates.forEach(function (s) {
+                s.controls.setMode(mode);
+            });
+        });
+
+        /**
+         *
+         * @returns {EntityManager}
+         */
+        function getEM() {
+            return self.editor.engine.entityManager;
+        }
+
+        function handleSelectionAdded(entity) {
+            const em = getEM();
+
+            const t = em.getComponent(entity, Transform);
+
+            if (t === null) {
+                return;
+            }
+
+            //create a surrogate object
+            const surrogate = new TransformContainer(entity);
+
+            surrogate.link(self.editor, t);
+            surrogate.controls.setMode(self.mode.getValue());
+
+            self.editObject.add(surrogate.controls);
+            self.editObject.add(surrogate.surrogate);
+
+            self.surrogates[entity] = surrogate;
+        }
+
+        function handleSelectionRemoved(entity) {
+            const surrogate = self.surrogates[entity];
+
+            if (surrogate === undefined) {
+                //no surrogate
+                return;
+            }
+
+            self.editObject.remove(surrogate.controls);
+            self.editObject.remove(surrogate.surrogate);
+
+            surrogate.unlink();
+            //cleanup
+            surrogate.controls.dispose();
+
+            delete self.surrogates[entity];
+        }
+
+        this.bindings = [
+            new SignalBinding(editor.selection.on.added, handleSelectionAdded),
+            new SignalBinding(editor.selection.on.removed, handleSelectionRemoved)
+        ];
+
+        this.handlers = {
+            handleSelectionAdded,
+            handleSelectionRemoved
+        };
+
+
+        this.surrogates = [];
+
+        this.editor.selection.forEach(this.handlers.handleSelectionAdded);
+
+        this.bindings.forEach(function (b) {
+            b.link();
+        });
+
+        this.editor.engine.graphics.scene.add(this.editObject);
+    }
+
+    shutdown() {
+        this.editor.selection.forEach(this.handlers.handleSelectionRemoved);
+        this.bindings.forEach(function (b) {
+            b.unlink();
+        });
+
+        this.editor.engine.graphics.scene.remove(this.editObject);
+    }
+
+    update() {
+        this.surrogates.forEach(s => {
+            threeUpdateTransform(s.controls);
+            threeUpdateTransform(s.surrogate);
+        });
+    }
+
+    start() {
+
+        const self = this;
+        this.actions = this.surrogates.map(function (s) {
+            const entity = s.entity;
+
+            const t = self.engine.entityManager.getComponent(entity, Transform);
+
+            const action = new TransformModifyAction(entity, null);
+
+            action.oldState = t.clone();
+
+            return action;
+        });
+
+    }
+
+    stop() {
+        const self = this;
+        this.actions.forEach(function (action) {
+            const entity = action.entity;
+
+            const t = self.engine.entityManager.getComponent(entity, Transform);
+
+            if (!t.equals(action.oldState)) {
+                action.modified = t.clone();
+
+                //restore state before transform. This is a hack, but a functional one
+                t.copy(action.oldState);
+
+                const actionProcessor = self.editor.actions;
+                actionProcessor.mark('transform modification');
+                actionProcessor.do(action);
+            }
+        });
+    }
+
+    /**
+     *
+     * @param {KeyboardEvent} event
+     */
+    handleKeyboardEvent(event) {
+        const keyCode = event.keyCode;
+
+        if (keyCode === KeyCodes.w) {
+            this.mode.set(TransformerMode.Translation);
+        } else if (keyCode === KeyCodes.e) {
+            this.mode.set(TransformerMode.Rotation);
+        } else if (keyCode === KeyCodes.r) {
+            this.mode.set(TransformerMode.Scale);
+        }
+    }
+}

package/editor/tools/engine/Tool.js

@@ -0,0 +1,121 @@
+/**
+ * Created by Alex on 14/01/2017.
+ */
+
+
+import ObservedValue from '../../../src/core/model/ObservedValue.js';
+import { buildToolStateMachine } from "./ToolStateMachine.js";
+import { ToolState } from "./ToolState.js";
+import ObservedString from "../../../src/core/model/ObservedString.js";
+
+class Tool {
+    /**
+     *
+     * @constructor
+     * @property {ObservedValue.<String>} mode
+     */
+    constructor() {
+        this.name = null;
+        this.mode = new ObservedValue();
+        this.settings = {};
+        this.modifiers = {
+            shift: false,
+            alternative: false
+        };
+        /**
+         *
+         * @type {Engine|null}
+         */
+        this.engine = null;
+        /**
+         *
+         * @type {Editor|null}
+         */
+        this.editor = null;
+
+        /**
+         *
+         * @type {ObservedString}
+         */
+        this.icon = new ObservedString("");
+
+        /**
+         *
+         * @type {StateMachine}
+         */
+        this.stateMachine = buildToolStateMachine(this);
+    }
+
+    /**
+     *
+     * @param {Editor} editor
+     */
+    updateIcon(editor) {
+
+    }
+
+    /**
+     *
+     * @returns {ToolState|number}
+     */
+    getState() {
+        return this.stateMachine.getState();
+    }
+
+    isRunning() {
+        return this.getState() === ToolState.Running;
+    }
+
+    /**
+     *
+     * @param {ToolState} s
+     * @returns {Promise}
+     */
+    moveToState(s) {
+        const sm = this.stateMachine;
+
+        return sm.navigateTo(s);
+    }
+
+    /**
+     * Activate the tool and prepare it for usage
+     */
+    initialize() {
+    }
+
+    /**
+     * Deactivate the tool and remove and influence it may have
+     */
+    shutdown() {
+
+    }
+
+    /**
+     * Update loop
+     */
+    update() {
+
+    }
+
+    /**
+     * Start usage of the tool.
+     * @example Start painting with a brush
+     */
+    start() {
+    }
+
+    /**
+     * Finish usage of the tool
+     * @example Finish brush stroke
+     */
+    stop() {
+
+    }
+
+    handleKeyboardEvent(e) {
+
+    }
+}
+
+
+export default Tool;

package/editor/tools/engine/ToolEngine.js

@@ -0,0 +1,193 @@
+/**
+ * Created by Alex on 14/01/2017.
+ */
+
+
+import List from '../../../src/core/collection/list/List.js';
+import ObservedValue from '../../../src/core/model/ObservedValue.js';
+import { decodeMouseEventButtons, PointerDevice } from '../../../src/engine/input/devices/PointerDevice.js';
+
+import SelectionTool from '../SelectionTool.js';
+import TopDownCameraControlTool from '../TopDownCameraControlTool.js';
+import GridPaintTool from "../GridPaintTool.js";
+import FoliagePaintTool from "../FoliagePaintTool.js";
+import { TransformTool } from "../TransformTool.js";
+import { ToolState } from "./ToolState.js";
+import Clock from "../../../src/engine/Clock.js";
+import { TerrainHeightPaintTool } from "../paint/TerrainHeightPaintTool.js";
+import { TerrainTexturePaintTool } from "../paint/TerrainTexturePaintTool.js";
+
+/**
+ *
+ * @constructor
+ * @property {List.<Tool>} tools
+ * @property {ObservedValue.<Tool>} active
+ */
+function ToolEngine() {
+    this.tools = new List();
+    this.active = new ObservedValue(null);
+    this.engine = null;
+    this.isRunning = false;
+    this.shutdownCallbacks = [];
+    this.pointer = null;
+}
+
+ToolEngine.prototype.activate = function (toolName) {
+    const self = this;
+    this.tools.visitFirstMatch(function (tool) {
+        return tool.name === toolName;
+    }, function (tool) {
+        self.active.set(tool);
+    });
+};
+
+ToolEngine.prototype.initialize = function () {
+
+    this.active.onChanged.add((newTool, oldTool) => {
+        console.log("active tool changed. Old: ", oldTool, ", New :", newTool);
+
+        if (oldTool !== null && typeof oldTool === "object") {
+            oldTool.moveToState(ToolState.Initial);
+        }
+
+        if (newTool !== null && typeof newTool === "object") {
+            newTool.editor = this.editor;
+            newTool.engine = this.engine;
+
+            newTool.moveToState(ToolState.Ready);
+        }
+    });
+
+    const terrainPaintToolRaise = new TerrainHeightPaintTool();
+    terrainPaintToolRaise.name = "terrain-height";
+
+    const terrainTexturePaintTool0 = new TerrainTexturePaintTool();
+    terrainTexturePaintTool0.name = `terrain-texture-0`;
+    terrainTexturePaintTool0.settings.splatIndex = 0;
+
+    const terrainTexturePaintTool1 = new TerrainTexturePaintTool();
+    terrainTexturePaintTool1.name = `terrain-texture-1`;
+    terrainTexturePaintTool1.settings.splatIndex = 1;
+
+    const terrainTexturePaintTool2 = new TerrainTexturePaintTool();
+    terrainTexturePaintTool2.name = `terrain-texture-2`;
+    terrainTexturePaintTool2.settings.splatIndex = 2;
+
+    const terrainTexturePaintTool3 = new TerrainTexturePaintTool();
+    terrainTexturePaintTool3.name = `terrain-texture-3`;
+    terrainTexturePaintTool3.settings.splatIndex = 3;
+
+    const tools = this.tools;
+    tools
+        .add(new SelectionTool())
+        .add(new TopDownCameraControlTool())
+        .add(new GridPaintTool())
+        .add(new TransformTool())
+        .add(terrainPaintToolRaise)
+        .add(terrainTexturePaintTool0)
+        .add(terrainTexturePaintTool1)
+        .add(terrainTexturePaintTool2)
+        .add(terrainTexturePaintTool3)
+        .add(new FoliagePaintTool());
+};
+
+/**
+ *
+ * @param {Engine} engine
+ * @param {Editor} editor
+ */
+ToolEngine.prototype.startup = function (engine, editor) {
+    this.engine = engine;
+    this.editor = editor;
+    this.isRunning = true;
+    const pointer = this.pointer = new PointerDevice(engine.graphics.domElement);
+
+    const self = this;
+
+    const clock = new Clock();
+
+    clock.start();
+
+    function update() {
+        if (!self.isRunning) {
+            return;
+        }
+        requestAnimationFrame(update);
+
+        const tool = self.active.get();
+
+        const delta = clock.getDelta();
+
+        if (tool !== null) {
+            tool.update(delta);
+        }
+    }
+
+    //start update loop
+    update();
+
+    //hook up interaction controls
+    function pointerDown(position, event) {
+        const tool = self.active.get();
+        if (tool !== null) {
+            tool.modifiers.shift = event.shiftKey;
+
+            if (typeof event.buttons === "number") {
+                const decodedButtons = decodeMouseEventButtons(event.buttons);
+
+                const isPrimaryPressed = decodedButtons[0];
+
+                if (!isPrimaryPressed) {
+                    //when working with mouse, only activate on primary mouse button
+                    return;
+                }
+
+            }
+
+            tool.moveToState(ToolState.Running);
+        }
+    }
+
+    function pointerUp(position, event) {
+        const tool = self.active.get();
+        if (tool !== null) {
+
+            tool.moveToState(ToolState.Ready);
+        }
+    }
+
+
+    pointer.on.down.add(pointerDown);
+    pointer.on.up.add(pointerUp);
+    pointer.start();
+
+
+    function cleanup() {
+        pointer.on.down.remove(pointerDown);
+        pointer.on.up.remove(pointerUp);
+        pointer.stop();
+    }
+
+    this.shutdownCallbacks.push(cleanup);
+};
+
+ToolEngine.prototype.shutdown = function () {
+    this.isRunning = false;
+    const toolProxy = this.active;
+
+    const tool = toolProxy.getValue();
+
+    if (tool !== null) {
+        toolProxy.set(null);
+    }
+
+    //execute cleanup
+    this.shutdownCallbacks.forEach(function (cb) {
+        cb();
+    });
+
+    this.shutdownCallbacks = [];
+};
+
+
+export default ToolEngine;

package/editor/tools/engine/ToolState.js

@@ -0,0 +1,9 @@
+/**
+ *
+ * @enum {number}
+ */
+export const ToolState = {
+    Initial: 0,
+    Ready: 1,
+    Running:2,
+};