@woosh/meep-engine 2.46.29 → 2.46.31

package/editor/ecs/component/FieldValueAdapter.js

@@ -0,0 +1,20 @@
+import { assert } from "../../../src/core/assert.js";
+
+export class FieldValueAdapter {
+    constructor() {
+        this.writable = true;
+        this.readable = true;
+
+    }
+
+    read(object, field_name) {
+        assert.isString(field_name, 'field_name');
+
+
+        return object[field_name];
+    }
+
+    write(object, field_name, value) {
+        object[field_name] = value;
+    }
+}

package/editor/ecs/component/TypeEditor.js

@@ -0,0 +1,33 @@
+/**
+ * @class
+ * @template T
+ */
+export class TypeEditor {
+    inline = true;
+
+    /**
+     * Class is hidden and editor should not be displayed
+     * @returns {boolean}
+     */
+    get hidden() {
+        return false;
+    }
+
+    /**
+     *
+     * @returns {TypeSchema|undefined}
+     */
+    get schema() {
+        return undefined;
+    }
+
+    /**
+     * @param {*} parent
+     * @param {FieldDescriptor} field
+     * @param {Map<*, TypeEditor>} registry
+     * @returns {View|void}
+     */
+    build(parent, field, registry) {
+        throw new Error('Not Implemented');
+    }
+}

package/editor/ecs/component/TypeSchema.d.ts

@@ -0,0 +1,38 @@
+import {DataType} from "../../../src/core/parser/simple/DataType";
+
+interface Type<T> extends Function {
+    new(...args: any[]): T;
+}
+
+interface PropertiesSchema {
+    [key: string]: FieldSchema<any>;
+}
+
+export interface TypeSchema {
+    additionalProperties?: boolean
+    properties: PropertiesSchema
+}
+
+interface TypeEditor {
+
+}
+
+export interface FieldSchema<T> {
+    type: Type<T>
+    type_parameters?: any[]
+    transient?: boolean
+    description?: string,
+    editor?: TypeEditor
+    deprecated?: boolean,
+    enum?: T[],
+    numeric_type: DataType,
+    /**
+     * Small image to be displayed next to field name
+     */
+    thumbnail: string,
+    /**
+     * @see https://datatracker.ietf.org/doc/html/draft-bhutton-json-schema-validation-00#section-6.2.2
+     */
+    maximum?: number,
+    minimum?: number
+}

package/editor/ecs/component/createFieldEditor.js

@@ -0,0 +1,92 @@
+import EmptyView from "../../../src/view/elements/EmptyView.js";
+import LabelView from "../../../src/view/common/LabelView.js";
+
+function format_field_name(name) {
+    return name
+        .replace(/([a-z])([A-Z])/g, '$1 $2') // break up camel case
+        .replace(/([^.])_([^.])/g, '$1 $2') // break up underscore case
+        .replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase()); // capitalize every word
+}
+
+/**
+ * @template CTX
+ * @param {Object} object
+ * @param {FieldDescriptor} field
+ * @param {Map<*, TypeEditor>} registry
+ */
+export function createFieldEditor(object, field, registry) {
+
+    const field_schema = field.schema;
+
+    let vValue;
+
+    /**
+     * @type {TypeEditor}
+     */
+    let factory;
+    if (field_schema !== undefined) {
+        const specific_field_editor = field_schema.editor;
+
+        if (specific_field_editor !== undefined) {
+            // field has a dedicated editor
+            factory = specific_field_editor;
+        }
+    }
+
+    if (factory === undefined) {
+        factory = registry.get(field.type);
+    }
+
+    let orientation_inline = true;
+
+    if (factory !== undefined) {
+        if (factory.hidden) {
+            // hidden class
+            return null;
+        }
+
+        vValue = factory.build(object, field, registry);
+
+        if (vValue) {
+            orientation_inline = factory.inline;
+        }
+    }
+
+    if (vValue === null || vValue === undefined) {
+        // no view
+        return null;
+    }
+
+    vValue.addClass('field-value');
+
+    const vResult = new EmptyView({
+        classList: ['auto-field-editor']
+    });
+
+    if (orientation_inline) {
+        vResult.addClass('orientation-inline');
+    }
+
+    const field_formatted_name = format_field_name(field.name);
+
+    const vLabel = new LabelView(field_formatted_name, { classList: ['field-name'] });
+
+    vResult.addChild(vLabel);
+    vResult.addChild(vValue);
+
+
+    if (field_schema !== undefined) {
+        if (field_schema.description !== undefined && field_schema.description.length > 0) {
+            // add tooltip
+            vLabel.attr({
+                title: field_schema.description
+            });
+        }
+
+        if (field_schema.deprecated) {
+            vResult.addClass('field-deprecated');
+        }
+    }
+
+    return vResult;
+}

package/editor/ecs/component/createObjectEditor.js

@@ -0,0 +1,361 @@
+import EmptyView from "../../../src/view/elements/EmptyView.js";
+import { FieldDescriptor } from "./FieldDescriptor.js";
+import { FieldValueAdapter } from "./FieldValueAdapter.js";
+import { createFieldEditor } from "./createFieldEditor.js";
+import { findNearestRegisteredType } from "./findNearestRegisteredType.js";
+import LabelView from "../../../src/view/common/LabelView.js";
+
+/**
+ * @template T
+ * @param {T|undefined} value
+ */
+function objectToClass(value) {
+    if (value === null || value === undefined) {
+        return;
+    }
+
+    const type = typeof value;
+
+    switch (type) {
+        case "object":
+            const proto = Object.getPrototypeOf(value);
+
+            if (proto === null) {
+                return;
+            }
+
+            return proto.constructor;
+        case "boolean":
+            return Boolean;
+        case "function":
+            return Function;
+        case "string":
+            return String;
+        case "number":
+            return Number;
+        default:
+            throw new Error(`Unsupported type '${type}'`);
+    }
+}
+
+/**
+ *
+ * @param {Object} object
+ * @param {string} field_name
+ * @returns {boolean}
+ */
+function isPublicField(object, field_name) {
+    if (field_name.startsWith('_')) {
+        // private
+        return false;
+    }
+
+    return true;
+}
+
+/**
+ *
+ * @param {Object} object
+ * @param {string} field_name
+ * @returns {boolean}
+ */
+function isReservedField(object, field_name) {
+    if (field_name.startsWith('@')) {
+        return true;
+    }
+
+    return false;
+}
+
+/**
+ *
+ * @type {string[]}
+ */
+const reserved_prototype_names = [
+    "constructor"
+];
+
+const reserved_prototypes = [
+    Object,
+    Object.prototype
+];
+
+/**
+ *
+ * @param {Object} object
+ * @param {FieldDescriptor[]} result
+ * @param {*} object_proto
+ */
+function extract_object_fields_reflection(object, result, object_proto) {
+    const keys = Object.keys(object);
+
+    for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+
+        if (!isPublicField(object, key)) {
+            continue;
+        }
+
+        if (isReservedField(object, key)) {
+            continue;
+        }
+
+        const field_type = objectToClass(object[key]);
+
+        if (field_type === undefined) {
+            continue;
+        }
+
+        const descriptor = new FieldDescriptor();
+        descriptor.name = key;
+        descriptor.type = field_type;
+        descriptor.adapter = new FieldValueAdapter();
+
+        result.push(descriptor);
+    }
+
+    if (!reserved_prototypes.includes(object_proto)) {
+
+        const descriptors = Object.getOwnPropertyDescriptors(object_proto);
+
+        for (let d_name in descriptors) {
+
+            if (reserved_prototype_names.includes(d_name)) {
+                // reserved name, skip
+                continue;
+            }
+
+            const d = descriptors[d_name];
+
+            const adapter = new FieldValueAdapter();
+
+            if (d.get === undefined && d.value === undefined) {
+                adapter.readable = false;
+            }
+
+            if (d.get !== undefined && d.set === undefined) {
+                adapter.writable = false;
+            }
+
+            if (!adapter.readable) {
+                continue;
+            }
+
+
+            let field_value;
+
+            try {
+                field_value = adapter.read(object, d_name);
+            } catch (e) {
+                console.warn(e);
+                continue;
+            }
+
+            const field_type = objectToClass(field_value);
+
+            if (field_type === undefined) {
+                continue;
+            }
+
+            const descriptor = new FieldDescriptor();
+
+            descriptor.name = d_name;
+            descriptor.type = field_type;
+            descriptor.adapter = adapter;
+
+            result.push(descriptor);
+        }
+
+    }
+}
+
+/**
+ *
+ * @param {Object} object
+ * @param {Map<*, TypeEditor>} registry
+ * @returns {FieldDescriptor[]}
+ */
+function extractObjectFields(object, registry) {
+
+    const result = [];
+
+    const object_proto = Object.getPrototypeOf(object);
+    const Klass = object_proto.constructor;
+
+    const editor = registry.get(Klass);
+
+    if (!(editor?.schema?.additionalProperties === false)) {
+
+        extract_object_fields_reflection(object, result, object_proto);
+
+    }
+
+
+    if (editor !== undefined) {
+
+        const schema = editor.schema;
+
+        if (schema !== undefined) {
+            // has schema, apply
+            const prop_keys = Object.keys(schema.properties);
+
+            for (let i = 0; i < prop_keys.length; i++) {
+                const key = prop_keys[i];
+
+                const property = schema.properties[key];
+
+                const field_index = result.findIndex(a => a.name === key);
+
+                let field;
+
+                if (field_index === -1) {
+                    // not in schema yet, build
+                    field = new FieldDescriptor();
+                    field.name = key;
+                    field.adapter = new FieldValueAdapter();
+
+                    result.push(field);
+                } else {
+                    field = result[field_index];
+                }
+
+                let actual_type = field.type;
+
+                if (actual_type === undefined || actual_type === null) {
+                    let actual_value;
+
+                    try {
+                        actual_value = field.adapter.read(object, key);
+                    } catch (e) {
+                        // silent failure
+                    }
+
+                    if (actual_value !== undefined && actual_value !== null) {
+                        actual_type = objectToClass(actual_value);
+                    }
+                }
+
+                if (property.type) {
+                    // validate type
+                    if (actual_type !== undefined && actual_type !== null) {
+                        if (actual_type !== property.type) {
+                            console.error(`Schema violation at field '${key}', schema type is different from actual type`, schema, actual_type);
+                        }
+                    }
+
+                    field.type = property.type;
+                } else if (actual_type !== undefined && field.type !== actual_type) {
+                    field.type = actual_type;
+                }
+
+
+                field.schema = property;
+
+                if (property.transient === true) {
+                    // no point in editing transient
+                    result.splice(field_index, 1);
+                }
+            }
+        }
+    }
+
+    return result;
+}
+
+const build_path = [];
+let build_path_offset = 0;
+
+
+/**
+ * @param {Object} object
+ * @param {Map<*, TypeEditor>} registry
+ * @param {FieldDescriptor} [field_descriptor]
+ */
+export function buildObjectEditorFromRegistry(object, registry, field_descriptor) {
+
+    const editor = findNearestRegisteredType(registry, object);
+
+    let fd;
+
+    if (field_descriptor === undefined) {
+
+        fd = new FieldDescriptor();
+        fd.adapter = new FieldValueAdapter();
+
+        fd.adapter.read = () => object;
+        fd.adapter.writable = false;
+
+        if (editor.schema) {
+            fd.schema = editor.schema;
+        }
+
+    } else {
+        fd = field_descriptor;
+    }
+
+    return editor.build(null, fd, registry);
+}
+
+const MAX_DEPTH = 7;
+
+/**
+ * @param {Object} object
+ * @param {Map<*, TypeEditor>} registry
+ */
+export function createObjectEditor(object, registry) {
+
+    if (build_path_offset > MAX_DEPTH) {
+        // too deep
+        return undefined;
+    }
+
+    const seen_index = build_path.indexOf(object);
+    if (seen_index >= 0 && seen_index < build_path_offset) {
+        // recursion
+        return undefined;
+    }
+
+
+    build_path[build_path_offset++] = object;
+
+
+    const vResult = new EmptyView({
+        classList: ['auto-object-editor'],
+        css: {}
+    });
+
+
+    const fields = extractObjectFields(object, registry);
+
+    const field_views = [];
+
+    for (let i = 0; i < fields.length; i++) {
+        const field = fields[i];
+
+        let vField;
+
+        try {
+            vField = createFieldEditor(object, field, registry);
+        } catch (e) {
+            vField = new LabelView('ERROR');
+            console.warn(e);
+        }
+
+        if (vField === null) {
+            continue;
+        }
+
+        field_views.push(vField);
+    }
+
+    build_path_offset--;
+
+    if (field_views.length === 0) {
+        // skip containers with no data
+        return null;
+    }
+
+    vResult.addChildren(field_views);
+
+    return vResult;
+}

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

@@ -0,0 +1,39 @@
+import { TypeEditor } from "../TypeEditor.js";
+import EmptyView from "../../../../src/view/elements/EmptyView.js";
+import { rgb2hex } from "../../../../src/core/color/rgb2hex.js";
+
+export class ColorEditor extends TypeEditor {
+    build(parent, field) {
+
+        /**
+         * @type {Color}
+         */
+        const color = field.adapter.read(parent, field.name);
+
+        const view = new EmptyView({
+            tag: 'input'
+        });
+
+        view.attr({
+            type: "color"
+        });
+
+        function sync_up() {
+            view.attr({
+                value: `#${rgb2hex(color.r * 255, color.g * 255, color.b * 255)}`
+            })
+        }
+
+        function sync_down(e) {
+            const color_value = e.target.value;
+
+            color.parse(color_value);
+        }
+
+        view.on.linked.add(sync_up);
+        view.el.addEventListener('input', sync_down, false);
+        view.el.addEventListener('change', sync_down, false);
+
+        return view;
+    }
+}

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

@@ -0,0 +1,17 @@
+import { TypeEditor } from "../TypeEditor.js";
+import View from "../../../../src/view/View.js";
+
+export class HTMLElementEditor extends TypeEditor {
+    build(parent, field, registry) {
+        const el = field.adapter?.read(parent, field.name);
+
+        const view = new View();
+
+        view.el = el;
+
+        // make the size small
+        view.size.setScalar(32);
+
+        return view;
+    }
+}

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

@@ -0,0 +1,82 @@
+import { TypeEditor } from "../TypeEditor.js";
+import EmptyView from "../../../../src/view/elements/EmptyView.js";
+import ImageView from "../../../../src/view/elements/image/ImageView.js";
+import ButtonView from "../../../../src/view/elements/button/ButtonView.js";
+import { url_to_data_url } from "../../../../src/core/binary/url_to_data_url.js";
+import { is_data_url } from "../../../../src/core/binary/is_data_url.js";
+import { LargeStrongEditor } from "./LargeStrongEditor.js";
+
+export class ImagePathEditor extends TypeEditor {
+    inline = true;
+
+    build(parent, field, registry) {
+        const url_editor = new LargeStrongEditor();
+
+        const editor = url_editor.build(parent, field, registry);
+
+        const r = new EmptyView({
+            css: {
+                display: "flex",
+                flexDirection: "row"
+            }
+        });
+
+        const vPreview = new ImageView(field.adapter.read(parent, field.name));
+
+        vPreview.size.set(32, 32);
+
+        const b_toDataURL = new ButtonView({
+            classList: ['convert-to-data-url', 'embed'],
+            async action() {
+                const url = await url_to_data_url(field.adapter.read(parent, field.name));
+
+                field.adapter.write(parent, field.name, url);
+
+                // update editor value
+                editor.methods.set_value(url);
+
+                input_changed();
+            }
+        });
+
+        b_toDataURL.attr({
+            title: 'Convert URL into DATA_URL, embedding the data. This allows to bypass CORRS restrictions if the URL points to a different origin from the one where the texture resides'
+        });
+
+        function update_data_url_status() {
+            const url = field.adapter.read(parent, field.name);
+
+            const can_convert = typeof url === "string"
+                && field.adapter.writable
+                && !is_data_url(url)
+            ;
+
+            if (can_convert) {
+                // offer encoding option
+                r.addChild(b_toDataURL);
+            } else {
+                // nothing
+                if (r.hasChild(b_toDataURL)) {
+                    r.removeChild(b_toDataURL);
+                }
+            }
+        }
+
+        function input_changed() {
+            const url = field.adapter.read(parent, field.name);
+
+            vPreview.__setSource(url);
+
+            update_data_url_status();
+        }
+
+        r.addChild(vPreview);
+        r.addChild(editor.view);
+
+        editor.signals.input_changed.add(input_changed);
+
+        r.on.linked.add(update_data_url_status);
+
+        return r;
+    }
+}