@woosh/meep-engine 2.46.28 → 2.46.30

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

@@ -0,0 +1,107 @@
+import { TypeEditor } from "../TypeEditor.js";
+import { StringEditor } from "./primitive/StringEditor.js";
+import ObservedString from "../../../../src/core/model/ObservedString.js";
+import { ObservedStringEditor } from "./ObservedStringEditor.js";
+import EmptyView from "../../../../src/view/elements/EmptyView.js";
+import LabelView from "../../../../src/view/common/LabelView.js";
+import { MouseEvents } from "../../../../src/engine/input/devices/events/MouseEvents.js";
+import Signal from "../../../../src/core/events/signal/Signal.js";
+
+/**
+ * If path is larger than this - it will be truncated and displayed as non-input
+ * @readonly
+ * @type {number}
+ */
+const MAX_PATH_LENGTH_EDITABLE = 256;
+/**
+ * How long to crop to
+ * @readonly
+ * @type {number}
+ */
+const MAX_CROP_LENGTH = 32;
+
+export class LargeStrongEditor extends TypeEditor {
+    inline = true;
+
+    build(parent, field, registry) {
+        let url_editor;
+
+        if (field.type === String) {
+
+            url_editor = new StringEditor();
+
+        } else if (field.type === ObservedString) {
+
+            url_editor = new ObservedStringEditor();
+
+        } else {
+            throw new Error(`Unsupported type`);
+        }
+
+        let in_focus = false;
+
+        const vEditor = url_editor.build(parent, field, registry);
+
+        const truncated_url = new ObservedString('');
+        const vTruncated = new LabelView(truncated_url);
+
+        vTruncated.el.addEventListener(MouseEvents.Click, () => {
+            in_focus = true;
+            update();
+            vEditor.el.focus();
+        });
+        vEditor.el.addEventListener('focusin', () => {
+            in_focus = true;
+            update();
+        });
+        vEditor.el.addEventListener('blur', () => {
+            in_focus = false;
+            update();
+        });
+
+        const r = new EmptyView();
+
+        function update() {
+            const url = field.adapter.read(parent, field.name);
+
+            if (typeof url === "string" && url.length > MAX_PATH_LENGTH_EDITABLE && !in_focus) {
+                r.removeChild(vEditor);
+
+                truncated_url.set('[...]'+url.slice(0, MAX_CROP_LENGTH));
+
+                if (!r.hasChild(vTruncated)) {
+                    r.addChild(vTruncated);
+                }
+
+            } else if(!r.hasChild(vEditor)){
+                r.removeChild(vTruncated);
+                r.addChild(vEditor);
+            }
+        }
+
+        const input_changed = new Signal();
+
+        vEditor.el.addEventListener('input', () => {
+
+            const value = vEditor.el.value;
+
+            input_changed.send1(value);
+
+            update();
+        });
+        r.on.linked.add(update);
+
+        return {
+            view: r, signals: {
+                input_changed
+            },
+            methods: {
+                set_value(v) {
+                    field.adapter.write(parent, field.name, v);
+                    update();
+                    vEditor.el.value = v;
+                }
+            }
+        };
+    }
+}

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

@@ -0,0 +1,86 @@
+import { TypeEditor } from "../TypeEditor.js";
+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";
+
+export class NumericIntervalEditor extends TypeEditor {
+    build(parent, field, registry) {
+
+        /**
+         * @type {NumericInterval}
+         */
+        const interval = field.adapter?.read(parent, field.name);
+
+        const r = new EmptyView({
+            classList: ["inline-field-row-editor"]
+        });
+
+        const c_0 = new NumberController({ value: interval.min });
+        const c_1 = new NumberController({ value: interval.max });
+
+
+        r.addChild(new LabelView("min"))
+        r.addChild(c_0);
+        r.addChild(new LabelView("max"))
+        r.addChild(c_1);
+
+        let lock = false;
+
+        const sync_up = () => {
+            if (lock) {
+                return;
+            }
+
+            lock = true;
+
+            c_0.value.set(interval.min);
+            c_1.value.set(interval.max);
+
+            lock = false;
+        };
+
+        const sync_down = () => {
+
+            if (lock) {
+                return;
+            }
+
+            lock = true;
+
+            const v0 = c_0.value.getValue();
+            const v1 = c_1.value.getValue();
+
+            if (v0 <= v1) {
+
+                interval.set(
+                    v0,
+                    v1,
+                );
+            }
+
+            lock = false;
+        };
+
+        r.on.linked.add(sync_up);
+
+        r.bindSignal(interval.onChanged, sync_up);
+
+        r.bindSignal(c_0.value.onChanged, sync_down);
+        r.bindSignal(c_1.value.onChanged, sync_down);
+
+
+        const validate = () => {
+            // validation
+
+            if (c_0.value.getValue() > c_1.value.getValue()) {
+                // restore
+                sync_up();
+            }
+        };
+
+        c_0.el.addEventListener('blur', validate);
+        c_1.el.addEventListener('blur', validate);
+
+        return r;
+    }
+}

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

@@ -0,0 +1,13 @@
+import { TypeEditor } from "../TypeEditor.js";
+import { CheckboxView } from "../../../../src/view/elements/CheckboxView.js";
+
+export class ObservedBooleanEditor extends TypeEditor {
+    build(parent, field, registry) {
+
+        const ctrl = new CheckboxView({
+            value: field.adapter.read(parent, field.name)
+        });
+
+        return ctrl;
+    }
+}

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

@@ -0,0 +1,32 @@
+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 ObservedEnumEditor extends TypeEditor {
+    build(parent, field, registry) {
+
+        /**
+         * @type {ObservedEnum}
+         */
+        const value = field.adapter.read(parent, field.name);
+
+        const valueSet = value.getValidValueSet();
+
+        const ctrl = new DropDownSelectionView(
+            new List(Object.keys(valueSet)), {
+                changeListener(key) {
+                    const v = valueSet[key];
+
+                    value.set(v);
+                }
+            }
+        );
+
+        ctrl.on.linked.add(() => {
+            ctrl.setSelectedValue(objectKeyByValue(valueSet, value.getValue()));
+        })
+
+        return ctrl;
+    }
+}

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

@@ -0,0 +1,43 @@
+import { TypeEditor } from "../TypeEditor.js";
+import { NumberController } from "../../../view/ecs/components/common/NumberController.js";
+
+export class ObservedIntegerEditor extends TypeEditor {
+    build(parent, field, registry) {
+        const instance = field.adapter.read(parent, field.name);
+        const ctrl = new NumberController();
+
+        let lock = false;
+
+        function sync_down() {
+
+            if (lock) {
+                return;
+            }
+
+            lock = true;
+
+            instance.set(ctrl.value.getValue());
+
+            lock = false;
+        }
+
+        function sync_up() {
+            if (lock) {
+                return;
+            }
+
+            lock = true;
+
+            ctrl.value.set(instance.getValue());
+
+            lock = false;
+        }
+
+        ctrl.on.linked.add(sync_up);
+
+        ctrl.value.onChanged.add(sync_down);
+        ctrl.bindSignal(instance.onChanged, sync_up);
+
+        return ctrl;
+    }
+}

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

@@ -0,0 +1,51 @@
+import { TypeEditor } from "../TypeEditor.js";
+import EmptyView from "../../../../src/view/elements/EmptyView.js";
+
+export class ObservedStringEditor extends TypeEditor {
+    build(parent, field, registry) {
+
+        const ctrl = new EmptyView({
+            tag: 'input'
+        });
+
+        ctrl.attr({
+            type: 'text'
+        });
+
+        const value = field.adapter.read(parent, field.name);
+
+        let lock = false;
+
+        function sync_up() {
+            if (lock) {
+                return;
+            }
+
+            lock = true;
+
+            ctrl.el.value = value.getValue();
+
+            lock = false;
+        }
+
+        function sync_down() {
+            if (lock) {
+                return;
+            }
+
+            lock = true;
+            const str = ctrl.el.value;
+
+            value.set(str);
+
+            lock = false;
+        }
+
+        ctrl.on.linked.add(sync_up);
+        ctrl.bindSignal(value.onChanged, sync_up);
+        ctrl.el.addEventListener('input', sync_down);
+
+
+        return ctrl;
+    }
+}

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

@@ -0,0 +1,221 @@
+import { TypeEditor } from "../TypeEditor.js";
+import { CanvasView } from "../../../../src/view/elements/CanvasView.js";
+import sampler2D2Canvas from "../../../../src/engine/graphics/texture/sampler/Sampler2D2Canvas.js";
+import { scaleSampler2D } from "../../../../src/engine/graphics/texture/sampler/scaleSampler2D.js";
+import { Sampler2D } from "../../../../src/engine/graphics/texture/sampler/Sampler2D.js";
+import {
+    typedArrayConstructorByInstance
+} from "../../../../src/engine/graphics/texture/sampler/typedArrayConstructorByInstance.js";
+import { FrameRunner } from "../../../../src/engine/graphics/FrameRunner.js";
+import canvas2Sampler2D from "../../../../src/engine/graphics/texture/Canvas2Sampler2D.js";
+import {
+    copy_Sampler2D_channel_data
+} from "../../../../src/engine/graphics/texture/sampler/copy_Sampler2D_channel_data.js";
+import { MouseEvents } from "../../../../src/engine/input/devices/events/MouseEvents.js";
+import { downloadSampler2DAsPNG } from "../../../../src/engine/graphics/texture/sampler/downloadSamplerAsPNG.js";
+import {
+    sampler2d_compute_texel_value_conversion_scale_to_uint8
+} from "../../../../src/engine/graphics/texture/sampler/sampler2d_compute_texel_value_conversion_scale_to_uint8.js";
+import EmptyView from "../../../../src/view/elements/EmptyView.js";
+
+const UPDATE_DELAY = 200;
+
+/**
+ *
+ * @param {Sampler2D} sampler
+ * @param {HTMLCanvasElement} domElement
+ */
+function draw_sampler(sampler, domElement) {
+
+
+    let TypedArrayConstructor = typedArrayConstructorByInstance(sampler.data);
+
+    if (TypedArrayConstructor === Uint8Array) {
+        // use clamped array to avoid filtering artifacts
+        TypedArrayConstructor = Uint8ClampedArray;
+    }
+
+    const res = 32;
+    const result_sampler = new Sampler2D(new TypedArrayConstructor(sampler.itemSize * res * res), sampler.itemSize, res, res);
+
+    scaleSampler2D(sampler, result_sampler);
+
+
+    const { scale, offset } = sampler2d_compute_texel_value_conversion_scale_to_uint8(result_sampler);
+
+    sampler2D2Canvas(result_sampler, scale, offset, domElement);
+
+}
+
+/**
+ *
+ * @param {*} parent
+ * @param {HTMLCanvasElement} element
+ * @param {FieldDescriptor} field
+ */
+function enable_drop(parent, element, field) {
+    /**
+     *
+     * @param {DragEvent} ev
+     */
+    function handleDrop(ev) {
+        ev.preventDefault();
+
+        let processed = false;
+
+        /**
+         *
+         * @param {File} file
+         */
+        function processFile(file) {
+            if (processed) {
+                return;
+            }
+
+            var img = new Image();
+            // URL @ Mozilla, webkitURL @ Chrome
+            img.src = (window.webkitURL ? webkitURL : URL).createObjectURL(file);
+
+            // call ctx.drawImage when the image got loaded
+            img.onload = function () {
+                var canvas = document.createElement("canvas");
+                var ctx = canvas.getContext("2d");
+
+                const width = img.width;
+                const height = img.height;
+
+                canvas.style.width = `${width}px`;
+                canvas.style.height = `${height}px`;
+
+                canvas.width = width;
+                canvas.height = height;
+
+                // ctx.drawImage(img, 0, 0);
+                ctx.drawImage(img, 0, 0, width, height, 0, 0, width, height); // stretch img to canvas size
+
+                const file_data_sampler = canvas2Sampler2D(canvas);
+
+                /**
+                 * @type {Sampler2D}
+                 */
+                const sampler = field.adapter.read(parent, field.name);
+
+                sampler.resize(width, height, false);
+
+                copy_Sampler2D_channel_data(file_data_sampler, sampler);
+            };
+
+
+            processed = true;
+        }
+
+        if (ev.dataTransfer.items) {
+            // Use DataTransferItemList interface to access the file(s)
+            for (var i = 0; i < ev.dataTransfer.items.length; i++) {
+                // If dropped items aren't files, reject them
+                if (ev.dataTransfer.items[i].kind === 'file') {
+                    var file = ev.dataTransfer.items[i].getAsFile();
+
+                    processFile(file);
+                }
+            }
+        } else {
+            // Use DataTransfer interface to access the file(s)
+            for (var i = 0; i < ev.dataTransfer.files.length; i++) {
+                const file = ev.dataTransfer.files[i];
+
+                processFile(file);
+            }
+        }
+    }
+
+    function handleDragOver(ev) {
+
+        // Prevent default behavior (Prevent file from being opened)
+        ev.preventDefault();
+    }
+
+    element.addEventListener('dragover', handleDragOver);
+    element.addEventListener('drop', handleDrop);
+}
+
+export class Sampler2DEditor extends TypeEditor {
+
+    build(parent, field, context) {
+
+        /**
+         * @type {Sampler2D}
+         */
+        const sampler = field.adapter.read(parent, field.name);
+
+        let last_version = -1;
+        let last_update_time = 0;
+        let last_update_duration = 0;
+
+        const view_container = new EmptyView({
+            css:{
+                width: "min-content",
+                height:"min-content"
+            }
+        });
+
+        const canvas_view = new CanvasView();
+        canvas_view.css({
+            background: 'black',
+            position: 'relative',
+        });
+
+        function draw() {
+            const draw_start_time = performance.now();
+
+            draw_sampler(sampler, canvas_view.el);
+
+            last_version = sampler.version;
+
+            const draw_end_time = performance.now();
+            last_update_duration = draw_end_time - draw_start_time;
+
+            last_update_time = draw_end_time;
+        }
+
+
+        canvas_view.on.linked.add(try_update);
+
+        function try_update() {
+            if (sampler.version !== last_version) {
+
+                const time_now = performance.now();
+
+                if ((time_now - last_update_time) >= UPDATE_DELAY) {
+                    draw();
+                }
+            }
+        }
+
+        const frameRunner = new FrameRunner(try_update);
+
+        canvas_view.on.linked.add(frameRunner.startup, frameRunner);
+        canvas_view.on.unlinked.add(frameRunner.shutdown, frameRunner);
+
+        //drop target
+        const allow_drop = true;
+        if (allow_drop) {
+
+            enable_drop(parent, canvas_view.el, field);
+
+        }
+
+        const allow_download = true;
+        if (allow_download) {
+            canvas_view.el.addEventListener(MouseEvents.Click, () => {
+                downloadSampler2DAsPNG(sampler, field.name);
+            });
+            // add download marker
+            view_container.addClass('downloadable');
+        }
+
+        view_container.addChild(canvas_view);
+
+        return view_container;
+    }
+}

package/editor/ecs/component/editors/collection/ListEditor.js

@@ -0,0 +1,83 @@
+import { TypeEditor } from "../../TypeEditor.js";
+import { NativeListController } from "../../../../../src/view/controller/controls/NativeListController.js";
+import { buildObjectEditorFromRegistry } from "../../createObjectEditor.js";
+import LabelView from "../../../../../src/view/common/LabelView.js";
+import { FieldDescriptor } from "../../FieldDescriptor.js";
+import { FieldValueAdapter } from "../../FieldValueAdapter.js";
+
+export class ListEditor extends TypeEditor {
+    inline = false;
+
+    build(parent, field, registry) {
+
+
+        const list = field.adapter.read(parent, field.name);
+
+        if (list.length > 100) {
+            return new LabelView(`List is too big (length = ${list.length})`);
+        }
+
+        let ElementType;
+
+        const field_schema = field.schema;
+
+        if (field_schema !== undefined) {
+
+            const type_parameters = field_schema.type_parameters;
+
+
+            if (type_parameters === undefined || type_parameters.length < 1) {
+                // no type specified on schema
+
+            } else {
+
+                ElementType = type_parameters[0];
+
+            }
+        }
+
+        let inferred_type = false;
+
+        if (ElementType === undefined && list.length > 0) {
+            ElementType = list.get(0).constructor;
+            inferred_type = true;
+        }
+
+        if (ElementType === undefined) {
+            return undefined;
+        }
+
+        if (inferred_type && !registry.has(ElementType)) {
+            // only work with known types when type is inferred, too messy otherwise
+            return undefined;
+        }
+
+        return new NativeListController({
+            model: list,
+            elementFactory() {
+                return new ElementType();
+            },
+            elementViewFactory(el) {
+                const fd = new FieldDescriptor();
+
+                let last_known = el;
+
+                fd.type = ElementType;
+                fd.adapter = new FieldValueAdapter();
+                fd.adapter.read = (object, field_name) => {
+                    return last_known;
+                };
+                fd.adapter.write = (object, field_name, value) => {
+                    const i = list.indexOf(last_known);
+
+                    list.set(i, value);
+
+                    last_known = value;
+                };
+
+                return buildObjectEditorFromRegistry(el, registry, fd);
+            }
+        })
+
+    }
+}