@woosh/meep-engine 2.46.29 → 2.46.31

package/editor/ecs/component/editors/common/BitFlagsEditor.js

@@ -0,0 +1,80 @@
+import { TypeEditor } from "../../TypeEditor.js";
+import { assert } from "../../../../../src/core/assert.js";
+import EmptyView from "../../../../../src/view/elements/EmptyView.js";
+import { CheckboxView } from "../../../../../src/view/elements/CheckboxView.js";
+import ObservedBoolean from "../../../../../src/core/model/ObservedBoolean.js";
+
+
+/**
+ *
+ * @param {Object} parent
+ * @param {FieldDescriptor} field
+ * @param {string} key
+ * @param {Object<number>} definition
+ */
+function make_flag_editor(parent, field, key, definition) {
+    const mask = definition[key];
+
+    function get_field_value() {
+        return field.adapter.read(parent, field.name);
+    }
+
+    function read() {
+        const flags = get_field_value();
+
+        return (flags & mask) !== 0;
+    }
+
+    const flag = new ObservedBoolean(read());
+
+    const r = new CheckboxView({ value: flag });
+
+    r.attr({
+        // Tooltip
+        title: key
+    })
+
+    flag.onChanged.add((v) => {
+        const flags = get_field_value();
+
+        let new_flags;
+
+        if (v) {
+            new_flags = flags | mask;
+        } else {
+            new_flags = flags & ~(mask);
+        }
+
+        field.adapter.write(parent, field.name, new_flags);
+    });
+
+    return r;
+}
+
+export class BitFlagsEditor extends TypeEditor {
+    /**
+     *
+     * @param {Object<number>} definition
+     */
+    constructor(definition) {
+        super();
+
+        assert.defined(definition, 'definition');
+
+        this.definition = definition;
+    }
+
+    build(parent, field, registry) {
+        const flag_names = Object.keys(this.definition);
+
+        const r = new EmptyView();
+
+        for (let i = 0; i < flag_names.length; i++) {
+            const flag_key = flag_names[i];
+
+            r.addChild(make_flag_editor(parent, field, flag_key, this.definition));
+        }
+
+        return r;
+    }
+}

package/editor/ecs/component/editors/common/EnumEditor.js

@@ -0,0 +1,41 @@
+import { TypeEditor } from "../../TypeEditor.js";
+import DropDownSelectionView from "../../../../../src/view/elements/DropDownSelectionView.js";
+import List from "../../../../../src/core/collection/list/List.js";
+import { objectKeyByValue } from "../../../../../src/core/model/object/objectKeyByValue.js";
+
+export class EnumEditor extends TypeEditor {
+    constructor(type) {
+        super();
+
+        this.type = type;
+    }
+
+    build(parent, field, registry) {
+
+        const valueSet = this.type;
+
+        function read() {
+            return field.adapter.read(parent, field.name);
+        }
+
+        function write(v) {
+            field.adapter.write(parent, field.name, v);
+        }
+
+        const ctrl = new DropDownSelectionView(
+            new List(Object.keys(valueSet)), {
+                changeListener(key) {
+                    const v = valueSet[key];
+
+                    write(v);
+                }
+            }
+        );
+
+        ctrl.on.linked.add(() => {
+            ctrl.setSelectedValue(objectKeyByValue(valueSet, read()));
+        })
+
+        return ctrl;
+    }
+}

package/editor/ecs/component/editors/common/makeV3_editor.js

@@ -0,0 +1,85 @@
+import EmptyView from "../../../../../src/view/elements/EmptyView.js";
+import { NumberController } from "../../../../view/ecs/components/common/NumberController.js";
+import LabelView from "../../../../../src/view/common/LabelView.js";
+
+/**
+ *
+ * @param {string[]} props
+ * @param {} value
+ * @param {Signal} change_signal
+ */
+export function make_row_editor(props, value, change_signal = value.onChanged) {
+
+    const r = new EmptyView({
+        classList: ['inline-field-row-editor']
+    });
+
+    const ctrls = [];
+
+    for (let i = 0; i < props.length; i++) {
+        const prop_name = props[i];
+
+        const ctrl = new NumberController({
+            value: value[prop_name]
+        });
+
+        r.addChild(new LabelView(prop_name));
+        r.addChild(ctrl);
+
+        ctrls[i] = ctrl;
+    }
+
+    let lock = false;
+
+    const sync_up = () => {
+        if (lock) {
+            return;
+        }
+
+        lock = true;
+
+        for (let i = 0; i < props.length; i++) {
+            const prop_name = props[i];
+
+            ctrls[i].value.set(value[prop_name]);
+        }
+
+
+        lock = false;
+    };
+
+    const sync_down = () => {
+
+        if (lock) {
+            return;
+        }
+
+        lock = true;
+
+        const params = ctrls.map(c => c.value.getValue());
+
+        value.set.apply(value, params);
+
+        lock = false;
+    };
+
+    r.on.linked.add(sync_up);
+
+    r.bindSignal(change_signal, sync_up);
+
+    for (let i = 0; i < props.length; i++) {
+
+        ctrls[i].value.onChanged.add(sync_down);
+    }
+
+    return r;
+}
+
+/**
+ *
+ * @param {Vector3} v3
+ * @returns {EmptyView}
+ */
+export function makeV3_editor(v3) {
+    return make_row_editor(['x', 'y', 'z'], v3);
+}

package/editor/ecs/component/editors/common/noEditor.js

@@ -0,0 +1,9 @@
+import { TypeEditor } from "../../TypeEditor.js";
+
+export function noEditor() {
+    const editor = new TypeEditor();
+
+    Object.defineProperty(editor, "hidden", { value: true });
+
+    return editor;
+}

package/editor/ecs/component/editors/ecs/GridObstacleEditor.js

@@ -0,0 +1,17 @@
+import { TypeEditor } from "../../TypeEditor.js";
+import { CanvasView } from "../../../../../src/view/elements/CanvasView.js";
+import { buildGridObstaclePreview } from "../../../../view/ecs/components/GridObstacleController.js";
+
+export class GridObstacleEditor extends TypeEditor {
+    inline = false
+
+    build(parent, field, registry) {
+        const v = new CanvasView();
+
+        v.size.set(100, 100);
+
+        buildGridObstaclePreview(field.adapter.read(parent, field.name), v.el);
+
+        return v;
+    }
+}

package/editor/ecs/component/editors/ecs/MinimapMarkerEditor.js

@@ -0,0 +1,16 @@
+import { ObjectEditor } from "../primitive/ObjectEditor.js";
+import ObservedString from "../../../../../src/core/model/ObservedString.js";
+import { ImagePathEditor } from "../ImagePathEditor.js";
+
+export class MinimapMarkerEditor extends ObjectEditor {
+    get schema() {
+        return {
+            properties: {
+                iconURL: {
+                    type: ObservedString,
+                    editor: new ImagePathEditor()
+                }
+            }
+        };
+    }
+}

package/editor/ecs/component/editors/ecs/ParameterLookupTableEditor.js

@@ -0,0 +1,225 @@
+import { TypeEditor } from "../../TypeEditor.js";
+import { CanvasView } from "../../../../../src/view/elements/CanvasView.js";
+import { plot_data } from "../../../../../src/engine/animation/curve/draw/plot_data.js";
+import Vector2 from "../../../../../src/core/geom/Vector2.js";
+import EmptyView from "../../../../../src/view/elements/EmptyView.js";
+import { MouseEvents } from "../../../../../src/engine/input/devices/events/MouseEvents.js";
+
+export class ParameterLookupTableEditor extends TypeEditor {
+    get schema() {
+        return {
+            properties: {
+                on: {
+                    transient: true
+                }
+            }
+        };
+    }
+
+    build(parent, field,registry) {
+
+        /**
+         * @type {ParameterLookupTable}
+         */
+        const lut = field.adapter.read(parent, field.name);
+        const trackName = field.adapter.read(parent, "name");
+
+        // if it is a track scale
+        if (trackName === "scale"){
+            const canvasView = new CanvasView();
+            canvasView.size.set(200, 100);
+            const ctx = canvasView.context2d;
+
+            const data = [];
+
+            const sample = [];
+            for (let i = 0; i < canvasView.size.x; i++) {
+                const f = i / (canvasView.size.x - 1);
+
+                lut.sample(f, sample);
+
+                data[i] = sample[0];
+            }
+
+            plot_data({ ctx, data, width: canvasView.size.x, height: canvasView.size.y, margin: new Vector2(4, 4) });
+
+            return canvasView;
+        } else if (trackName === "color"){
+            // if it is color track
+            const resultView = new EmptyView();
+            const canvasView = new CanvasView();
+            canvasView.css({borderColor: 'white', borderStyle: 'solid', borderWidth: '1px',});
+            canvasView.size.set(200, 70);
+
+            const ctx = canvasView.context2d;
+
+            const colorView = new EmptyView({tag: "input", attr: {type: "color"}, css: {padding: "0px", border: "0px"}});
+
+            resultView.addChild(canvasView);
+            resultView.addChild(colorView);
+
+            //canvas internal configuration, such as background
+            let config = {
+                tileSize: new Vector2(10, 10),
+                tileColor1: "rgb(255, 255, 255)",
+                tileColor2: "rgb(119,119,119)",
+                gradientBoxYRange: new Vector2(30, canvasView.size.y),
+            };
+
+            this.DrawBackground(canvasView, ctx, config);
+            this.DrawGradient(canvasView, lut, ctx, config);
+            let stops = this.DrawStops(canvasView, lut, ctx, colorView, config, 0);
+
+            canvasView.el.addEventListener(MouseEvents.Click, (e) => {
+                const rect = canvasView.el.getBoundingClientRect();
+                let x = e.clientX - rect.left,
+                    y = e.clientY - rect.top;
+                for (let i = 0; i < stops.length; i++) {
+                    if (stops[i].x <= x && stops[i].x + stops[i].width >= x &&
+                        stops[i].y <= y && stops[i].y + stops[i].height >= y){
+                        let s = [];
+                        lut.sample(lut.positions[i], s);
+
+                        this.convertRGB(s);
+
+                        colorView.el.value = this.RGBToHex(s[0], s[1], s[2]);
+                        canvasView.clear();
+
+                        this.DrawBackground(canvasView, ctx, config);
+                        this.DrawGradient(canvasView, lut, ctx, config);
+                        stops = this.DrawStops(canvasView, lut, ctx, colorView, config, i);
+
+                        break;
+                    }
+                }
+            });
+
+            return resultView;
+        }
+    }
+    /**
+     * converts rgb to hex string
+     * @param {Float} r
+     * @param {Float} g
+     * @param {Float} b
+     */
+    RGBToHex(r,g,b) {
+        r = r.toString(16);
+        g = g.toString(16);
+        b = b.toString(16);
+
+        if (r.length == 1)
+            r = "0" + r;
+        if (g.length == 1)
+            g = "0" + g;
+        if (b.length == 1)
+            b = "0" + b;
+
+        return "#" + r + g + b;
+    }
+
+    /**
+     * converts lut color sample to RGB
+     * @param {[]} sample
+     */
+    convertRGB(sample){
+        sample[0] = Math.floor(sample[0] * 255);
+        sample[1] = Math.floor(sample[1] * 255);
+        sample[2] = Math.floor(sample[2] * 255);
+    }
+    /**
+     * draws tiled background
+     * @param {CanvasView} canvasView
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {{}} config
+     */
+    DrawBackground(canvasView, ctx, config){
+        for (let i = 0; i < canvasView.size.x; i += config.tileSize.x) {
+            for (let j = config.gradientBoxYRange.x; j < config.gradientBoxYRange.y; j += config.tileSize.y){
+                ctx.fillStyle = (((i / config.tileSize.x) + (j / config.tileSize.y)) % 2 === 0 ? config.tileColor1 : config.tileColor2);
+                ctx.fillRect(i, j, config.tileSize.x, config.tileSize.y);
+            }
+        }
+    }
+
+    /**
+     * draws gradient
+     * @param {CanvasView} canvasView
+     * @param {ParameterLookupTable} lut
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {{}} config
+     */
+    DrawGradient(canvasView, lut, ctx, config){
+        const sample = [];
+        for (let i = 0; i < canvasView.size.x; i++) {
+            const f = i / (canvasView.size.x - 1);
+            lut.sample(f, sample);
+
+            this.convertRGB(sample);
+
+            ctx.fillStyle = `rgba(${sample[0]},${sample[1]},${sample[2]}, ${sample[3]})`;
+            ctx.fillRect(i, config.gradientBoxYRange.x, 1, config.gradientBoxYRange.y - config.gradientBoxYRange.x);
+        }
+    }
+
+    /**
+     * draws gradient stops
+     * @param {CanvasView} canvasView
+     * @param {ParameterLookupTable} lut
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {EmptyView} colorView
+     * @param {{}} config
+     * @param {Integer} selectedInd
+     * @returns {*[]}
+     */
+    DrawStops(canvasView, lut, ctx, colorView, config, selectedInd){
+        const sample = [];
+
+        let stops = [];
+        for (let i = 0; i < lut.positions.length; i++){
+            const posX = lut.positions[i] * canvasView.size.x;
+            if (i === selectedInd){
+                lut.sample(lut.positions[i], sample);
+
+                this.convertRGB(sample);
+
+                colorView.el.value = this.RGBToHex(sample[0], sample[1], sample[2]);
+            }
+            stops.push(this.DrawStop(ctx, config, posX, i=== selectedInd));
+        }
+        return stops;
+    }
+    /**
+     * draws gradient stop
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {Object} config
+     * @param {Integer} posX
+     * @param {Boolean} isSelected
+     */
+    DrawStop(ctx, config, posX, isSelected){
+        ctx.beginPath();
+        ctx.moveTo(posX, config.gradientBoxYRange.x + 7);
+        ctx.lineTo(posX - 5, config.gradientBoxYRange.x);
+        ctx.lineTo(posX - 5, config.gradientBoxYRange.x - 12);
+        ctx.lineTo(posX + 5, config.gradientBoxYRange.x - 12);
+        ctx.lineTo(posX + 5, config.gradientBoxYRange.x);
+        ctx.closePath();
+
+        ctx.lineWidth = (isSelected ? 4 : 2);
+        if (!isSelected)
+            ctx.strokeStyle = "rgb(114,114,114)";
+        else
+            ctx.strokeStyle = "rgb(0,23,255)";
+        ctx.stroke();
+        ctx.fillStyle = "rgb(255, 255, 255)";
+        ctx.fill();
+
+        return {
+            x: posX - 5,
+            y: config.gradientBoxYRange.x - 12,
+            width: 10,
+            height: 12,
+            posX: posX,
+        };
+    }
+}

package/editor/ecs/component/editors/ecs/ParameterTrackEditor.js

@@ -0,0 +1,17 @@
+import { ObjectEditor } from "../primitive/ObjectEditor.js";
+import { EnumEditor } from "../common/EnumEditor.js";
+
+export class ParameterTrackEditor extends ObjectEditor {
+    get schema() {
+        return {
+            properties: {
+                name: {
+                    editor: new EnumEditor({
+                        Color: "color",
+                        Scale: "scale"
+                    })
+                }
+            }
+        };
+    }
+}

package/editor/ecs/component/editors/ecs/ParameterTrackSetEditor.js

@@ -0,0 +1,18 @@
+import List from "../../../../../src/core/collection/list/List.js";
+import { ObjectEditor } from "../primitive/ObjectEditor.js";
+import {
+    ParameterTrack
+} from "../../../../../src/engine/graphics/particles/particular/engine/parameter/ParameterTrack.js";
+
+export class ParameterTrackSetEditor extends ObjectEditor {
+    get schema() {
+        return {
+            properties: {
+                tracks: {
+                    type: List,
+                    type_parameters: [ParameterTrack],
+                },
+            }
+        };
+    }
+}

package/editor/ecs/component/editors/ecs/ParticleEmitterEditor.js

@@ -0,0 +1,58 @@
+import List from "../../../../../src/core/collection/list/List.js";
+import { ParticleLayer } from "../../../../../src/engine/graphics/particles/particular/engine/emitter/ParticleLayer.js";
+import { BitFlagsEditor } from "../common/BitFlagsEditor.js";
+import {
+    ParticleEmitterFlag
+} from "../../../../../src/engine/graphics/particles/particular/engine/emitter/ParticleEmitterFlag.js";
+import { ObjectEditor } from "../primitive/ObjectEditor.js";
+import { EnumEditor } from "../common/EnumEditor.js";
+import { BlendingType } from "../../../../../src/engine/graphics/texture/sampler/BlendingType.js";
+
+export class ParticleEmitterEditor extends ObjectEditor {
+    get schema() {
+        return {
+            properties: {
+                parameters: {
+                    transient: true
+                },
+                layers: {
+                    type: List,
+                    type_parameters: [ParticleLayer]
+                },
+                particles: {
+                    transient: true
+                },
+                mesh: {
+                    transient: true
+                },
+                bvhLeaf: {
+                    transient: true
+                },
+                particleBounds: {
+                    transient: true
+                },
+                emisionBounds: {
+                    transient: true
+                },
+                flags: {
+                    editor: new BitFlagsEditor(ParticleEmitterFlag)
+                },
+                blendingMode: {
+                    editor: new EnumEditor(BlendingType)
+                },
+                sleepTime: {
+                    transient: true,
+                },
+                position: {
+                    transient: true
+                },
+                rotation: {
+                    transient: true
+                },
+                scale: {
+                    transient: true
+                }
+            }
+        };
+    }
+}

package/editor/ecs/component/editors/ecs/ParticleEmitterLayerEditor.js

@@ -0,0 +1,58 @@
+import List from "../../../../../src/core/collection/list/List.js";
+import {
+    SimulationStepDefinition
+} from "../../../../../src/engine/graphics/particles/particular/engine/simulator/SimulationStepDefinition.js";
+import { ObjectEditor } from "../primitive/ObjectEditor.js";
+import { ImagePathEditor } from "../ImagePathEditor.js";
+import { EnumEditor } from "../common/EnumEditor.js";
+import {
+    EmissionShapeType
+} from "../../../../../src/engine/graphics/particles/particular/engine/emitter/EmissionShapeType.js";
+import {
+    EmissionFromType
+} from "../../../../../src/engine/graphics/particles/particular/engine/emitter/EmissionFromType.js";
+import { DataType } from "../../../../../src/core/collection/table/DataType.js";
+import { ParameterTrackSetEditor } from "./ParameterTrackSetEditor.js";
+
+export class ParticleEmitterLayerEditor extends ObjectEditor {
+    get schema() {
+        return {
+            properties: {
+                imageURL: {
+                    type: String,
+                    editor: new ImagePathEditor()
+                },
+                emissionShape: {
+                    editor: new EnumEditor(EmissionShapeType)
+                },
+                emissionFrom: {
+                    editor: new EnumEditor(EmissionFromType)
+                },
+                emissionRate: {
+                    type: Number,
+                    numeric_type: DataType.Uint32
+                },
+                emissionImmediate: {
+                    type: Number,
+                    numeric_type: DataType.Uint32
+                },
+                parameterTracks: {
+                    editor: new ParameterTrackSetEditor()
+                },
+                scaledSpriteHalfSize: {
+                    transient: true
+                },
+                baseBoundingBox: {
+                    transient: true
+                },
+                steps: {
+                    type: List,
+                    type_parameters: [SimulationStepDefinition]
+                },
+                timeSinceLastEmission: {
+                    transient: true
+                }
+            }
+        };
+    }
+}

package/editor/ecs/component/editors/ecs/SimulationStepDefinitionEditor.js

@@ -0,0 +1,21 @@
+import { ObjectEditor } from "../primitive/ObjectEditor.js";
+import { EnumEditor } from "../common/EnumEditor.js";
+import {
+    SimulationStepType
+} from "../../../../../src/engine/graphics/particles/particular/engine/simulator/SimulationStepType.js";
+
+export class SimulationStepDefinitionEditor extends ObjectEditor {
+    get schema() {
+        return {
+            properties: {
+                type: {
+                    editor: new EnumEditor(SimulationStepType)
+                },
+                parameters: {
+                    type: Array,
+                    type_parameters: [Number]
+                }
+            }
+        };
+    }
+}

package/editor/ecs/component/editors/ecs/Trail2DEditor.js

@@ -0,0 +1,33 @@
+import { BitFlagsEditor } from "../common/BitFlagsEditor.js";
+import { Trail2DFlags } from "../../../../../src/engine/graphics/ecs/trail2d/Trail2D.js";
+import { ObjectEditor } from "../primitive/ObjectEditor.js";
+
+export class Trail2DEditor extends ObjectEditor {
+    get schema() {
+        return {
+            properties: {
+                maxAge: {
+                    description: "How long does the trail persist in time"
+                },
+                time: {
+                    transient: true
+                },
+                trailingIndex: {
+                    transient: true
+                },
+                timeSinceLastUpdate: {
+                    transient: true
+                },
+                ribbon: {
+                    transient: true
+                },
+                bvhLeaf: {
+                    transient: true
+                },
+                flags: {
+                    editor: new BitFlagsEditor(Trail2DFlags)
+                }
+            }
+        };
+    }
+}