@woosh/meep-engine 2.46.29 → 2.46.30

package/editor/view/node-graph/NodeView.js

@@ -0,0 +1,135 @@
+import View from "../../../src/view/View.js";
+import { PortView } from "./PortView.js";
+import EmptyView from "../../../src/view/elements/EmptyView.js";
+import LabelView from "../../../src/view/common/LabelView.js";
+import { DraggableAspect } from "../../../src/engine/ui/DraggableAspect.js";
+import Vector2 from "../../../src/core/geom/Vector2.js";
+import { noop } from "../../../src/core/function/Functions.js";
+import { NodeParameterDataType } from "../../../src/core/model/node-graph/node/parameter/NodeParameterDataType.js";
+import DatGuiController from "../ecs/components/DatGuiController.js";
+import { PortDirection } from "../../../src/core/model/node-graph/node/PortDirection.js";
+
+export class NodeView extends View {
+    /**
+     *
+     * @param {NodeInstance} node
+     * @param {NodeVisualData} visual
+     * @param {NodeGraphVisualData} visualData
+     * @param {boolean} enableDrag
+     * @param {function(PortView, Port)} portCreationCallback
+     */
+    constructor({ node, visual, visualData, enableDrag = true, portCreationCallback = noop }) {
+        super();
+
+        /**
+         *
+         * @type {NodeInstance}
+         */
+        this.node = node;
+        /**
+         *
+         * @type {NodeVisualData}
+         */
+        this.visual = visual;
+
+        this.el = document.createElement('div');
+
+        this.addClass('ui-node-view');
+
+        const vPorts = new EmptyView({
+            classList: ['ports']
+        });
+
+        const nodeDescription = node.description;
+        const vName = new LabelView(nodeDescription.name, {
+            classList: ['name']
+        });
+
+        const v2_prev_position = new Vector2();
+
+        const self = this;
+
+        if (enableDrag) {
+            const draggableAspect = new DraggableAspect({
+                el: this.el,
+                dragStart(p) {
+                    v2_prev_position.copy(p);
+                },
+                drag(position, origin, delta) {
+                    const p = delta.clone();
+
+                    const scale = new Vector2(1, 1);
+
+                    self.computeGlobalScale(scale);
+
+                    p.divide(scale);
+
+                    // p.add(v2_origin);
+
+                    visual.dimensions.position.add(p);
+                }
+            });
+            this.on.linked.add(draggableAspect.start, draggableAspect);
+            this.on.unlinked.add(draggableAspect.stop, draggableAspect);
+        }
+
+        //create parameters
+
+        const vParamContainer = new EmptyView({ classList: ['parameters-container'] });
+
+        const vParams = new DatGuiController({ classList: ['parameters'] });
+        vParamContainer.addChild(vParams);
+
+        nodeDescription.parameters.forEach(param => {
+            const id = param.id;
+
+            const type = param.type;
+
+            let controller = null;
+
+            if (type === NodeParameterDataType.Number) {
+                controller = vParams.addControl({ v: node.getParameterValue(id) }, 'v');
+            } else if (type === NodeParameterDataType.String) {
+                controller = vParams.addControl({ v: node.getParameterValue(id) }, 'v');
+            } else if (type === NodeParameterDataType.Boolean) {
+                controller = vParams.addControl({ v: node.getParameterValue(id) }, 'v');
+            }
+
+            controller.name(param.name);
+            controller.onChange((v) => {
+                node.setParameterValue(id, v);
+            });
+        });
+
+
+        this.addChild(vParamContainer);
+
+        this.addChild(vName);
+
+        this.addChild(vPorts);
+
+        nodeDescription.getPorts().forEach(port => {
+
+            const portVisualData = visual.getPort(port.id);
+
+            const portView = new PortView({ port, visual: portVisualData, visualData });
+
+            portCreationCallback(portView, port);
+
+            vPorts.addChild(portView);
+
+        });
+
+        this.setClass('has-inputs', nodeDescription.getPorts().some(p => p.direction === PortDirection.In));
+        this.setClass('has-outputs', nodeDescription.getPorts().some(p => p.direction === PortDirection.Out));
+
+        this.on.linked.add(this.update, this);
+        this.bindSignal(visual.dimensions.position.onChanged, this.update, this);
+        this.bindSignal(visual.dimensions.size.onChanged, this.update, this);
+    }
+
+    update() {
+        this.position.copy(this.visual.dimensions.position);
+        this.size.copy(this.visual.dimensions.size);
+    }
+}

package/editor/view/node-graph/PortView.js

@@ -0,0 +1,69 @@
+import View from "../../../src/view/View.js";
+import { PortDirection } from "../../../src/core/model/node-graph/node/PortDirection.js";
+import { camelToKebab } from "../../../src/core/primitives/strings/StringUtils.js";
+import LabelView from "../../../src/view/common/LabelView.js";
+import EmptyView from "../../../src/view/elements/EmptyView.js";
+import { Color } from "../../../src/core/color/Color.js";
+import { objectKeyByValue } from "../../../src/core/model/object/objectKeyByValue.js";
+
+const DEFAULT_TYPE_COLOR = new Color(1, 1, 1);
+
+export class PortView extends View {
+    /**
+     *
+     * @param {Port} port
+     * @param {PortVisualData} visual
+     * @param {NodeGraphVisualData} visualData
+     */
+    constructor({ port, visual, visualData }) {
+        super();
+
+        /**
+         *
+         * @type {Port}
+         */
+        this.port = port;
+        /**
+         *
+         * @type {PortVisualData}
+         */
+        this.visual = visual;
+
+        this.el = document.createElement('div');
+
+        this.addClass('ui-port-view');
+
+        this.addClass(`direction-${objectKeyByValue(PortDirection, port.direction).toLocaleLowerCase()}`);
+
+        this.addClass(`data-type-${camelToKebab(port.dataType.name)}`);
+
+        //add port name label
+        const vName = new LabelView(port.name, {
+            classList: ['name']
+        });
+
+        this.addChild(vName);
+
+        let color = visualData.getDataColor(port.dataType.id);
+
+        if (color === undefined) {
+            console.warn(`No color for data type ${port.dataType}, using default`);
+
+            color = DEFAULT_TYPE_COLOR;
+        }
+
+        this.addChild(new EmptyView({
+            classList: ['marker'],
+            css: {
+                backgroundColor: `rgb(${color.r * 255}, ${color.g * 255}, ${color.b * 255})`
+            }
+        }));
+
+        this.on.linked.add(this.update, this);
+        this.bindSignal(visual.position.onChanged, this.update, this);
+    }
+
+    update() {
+        this.position.copy(this.visual.position);
+    }
+}

package/editor/view/process/ProcessView.js

@@ -0,0 +1,63 @@
+import View from "../../../src/view/View.js";
+import dom from "../../../src/view/DOM.js";
+
+import LabelView from '../../../src/view/common/LabelView.js';
+import { ProcessState } from "../../../src/core/process/ProcessState.js";
+
+/**
+ *
+ * @param {ProcessState} state
+ * @returns {string}
+ */
+function processState2ClassName(state) {
+    return `process-state-${state}`;
+}
+
+class ProcessView extends View {
+    /**
+     *
+     * @param {BaseProcess} process
+     * @constructor
+     */
+    constructor(process) {
+
+        super(process);
+
+        this.model = process;
+
+        const dRoot = dom('div');
+
+        dRoot.addClass('process-view');
+
+        dRoot.addClass(`editor-process-${process.name}`);
+
+        this.$el = dRoot;
+        this.el = dRoot.el;
+
+        //add process name
+        const lName = new LabelView(process.name);
+        this.addChild(lName);
+
+        this.bindSignal(process.getState().onChanged, function (newValue, oldValue) {
+            dRoot.removeClass(processState2ClassName(oldValue));
+            dRoot.addClass(processState2ClassName(newValue));
+        });
+    }
+
+    link() {
+        const $el = this.$el;
+
+        //clear status classes
+        Object.values(ProcessState).map(processState2ClassName).forEach(function (state) {
+            $el.removeClass(state);
+        });
+
+        //set active status class
+        $el.addClass(processState2ClassName(this.model.getState().getValue()));
+
+        super.link();
+    }
+}
+
+
+export default ProcessView;

package/editor/view/tools/ToolSettingsView.js

@@ -0,0 +1,143 @@
+import View from "../../../src/view/View.js";
+import { clear } from "../../../src/view/controller/dat/DatGuiUtils.js";
+import dat from 'dat.gui'
+
+class ToolSettingsView extends View {
+    constructor(tool) {
+        super(tool);
+
+        this.model = tool;
+
+        const gui = new dat.GUI({
+            autoPlace: false,
+            closed: false,
+            resizable: false
+        });
+        this.gui = gui;
+
+        this.el = gui.domElement;
+
+        this.addClass('editor-tool-settings-view');
+
+        this.build();
+    }
+
+    setTool(tool) {
+        this.model = tool;
+        this.build();
+    }
+
+    build() {
+
+        let rowCount = 0;
+
+        function isObservedValue(v) {
+            return typeof v === "object" && typeof v.onChanged === "object" && typeof v.get === "function";
+        }
+
+        function isVector1(v) {
+            return typeof v === "object" && v.constructor !== undefined && v.constructor.typeName === "Vector1";
+        }
+
+        function addProperties(folder, object) {
+            for (let propertyName in object) {
+                const propertyValue = object[propertyName];
+                if (typeof propertyValue === object) {
+                    //check for observed values
+                    if (isObservedValue(propertyValue) || isVector1(propertyValue)) {
+                        makeProperty(folder, object, propertyName);
+                    } else {
+                        makeFolder(folder, propertyValue, propertyName);
+                    }
+                } else {
+                    makeProperty(folder, object, propertyName);
+                }
+            }
+        }
+
+        function makeFolder(parentFolder, object, name) {
+            rowCount++;
+
+            const folder = parentFolder.addFolder(name);
+
+            folder.closed = false;
+
+            addProperties(folder, object);
+
+            return folder;
+        }
+
+        function wrapObservedValue(value) {
+            const op = {
+                v: null
+            };
+
+            Object.defineProperty(op, "v", {
+                get: function () {
+                    return value.get();
+                },
+                set: function (v) {
+                    return value.set(v);
+                }
+            });
+
+            return op;
+        }
+
+        function wrapVector1(value) {
+            const op = {
+                v: null
+            };
+
+            Object.defineProperty(op, "v", {
+                get: function () {
+                    return value.getValue();
+                },
+                set: function (v) {
+                    return value.set(v);
+                }
+            });
+
+            return op;
+        }
+
+        function makeProperty(parentFolder, owner, name) {
+            rowCount++;
+
+            let control;
+
+            try {
+                const propertyValue = owner[name];
+                if (isObservedValue(propertyValue)) {
+                    control = parentFolder.add(wrapObservedValue(propertyValue), "v");
+                    control.name(name);
+                } else if (isVector1(propertyValue)) {
+                    control = parentFolder.add(wrapVector1(propertyValue), "v");
+                    control.name(name);
+                } else {
+                    control = parentFolder.add(owner, name);
+                }
+            } catch (e) {
+                console.error("Failed to add option controller", name, e);
+            }
+
+            return control;
+        }
+
+        const gui = this.gui;
+
+
+        clear(gui);
+
+        const tool = this.model;
+
+        if (tool !== undefined && typeof tool.settings === "object") {
+            addProperties(gui, tool.settings);
+        }
+
+        this.size.set(gui.width, rowCount * 30 + 20);
+    }
+}
+
+
+export default ToolSettingsView;

package/editor/view/tools/ToolView.js

@@ -0,0 +1,58 @@
+/**
+ * Created by Alex on 16/01/2017.
+ */
+
+
+import View from "../../../src/view/View.js";
+import dom from "../../../src/view/DOM.js";
+
+import LabelView from '../../../src/view/common/LabelView.js';
+import ImageView from "../../../src/view/elements/image/ImageView.js";
+
+class ToolView extends View {
+    /**
+     *
+     * @param {Tool} tool
+     * @param {Editor} editor
+     * @constructor
+     */
+    constructor({ tool, editor }) {
+
+        super(tool);
+
+        const dRoot = dom('div');
+
+        dRoot.addClass('tool-view');
+
+        dRoot.addClass(`editor-tool-${tool.name}`);
+
+        this.el = dRoot.el;
+
+        //add tool name
+        const lName = new LabelView(tool.name);
+
+        const icon = new ImageView(tool.icon, { classList: ['icon'] });
+
+        icon.size.set(32, 32);
+        icon.position.set(2, 2);
+
+        this.addChild(icon);
+
+        this.addChild(lName);
+
+
+        this.on.linked.add(() => {
+            tool.updateIcon(editor);
+        });
+
+        function updateIconVisibility() {
+            icon.visible = (tool.icon.getValue() !== "");
+        }
+
+        tool.icon.onChanged.add(updateIconVisibility);
+        this.on.linked.add(updateIconVisibility);
+    }
+}
+
+
+export default ToolView;

package/package.json

@@ -5,7 +5,7 @@
   "description": "Fully featured ECS game engine written in JavaScript",
   "type": "module",
   "author": "Alexander Goldring",
-  "version": "2.46.29",
+  "version": "2.46.30",
   "main": "build/meep.module.js",
   "module": "build/meep.module.js",
   "exports": {
@@ -27,6 +27,7 @@
   "files": [
     "build",
     "src",
+    "editor",
     "samples",
     "package.json",
     "README.md"