@woosh/meep-engine 2.37.16 → 2.37.19

package/editor/ecs/component/FieldDescriptor.js

@@ -0,0 +1,34 @@
+/**
+ * @template T
+ */
+export class FieldDescriptor {
+    constructor() {
+        /**
+         *
+         * @type {string}
+         */
+        this.name = "";
+
+        /**
+         * typeof field
+         * @type {Class<T>}
+         */
+        this.type = null;
+
+        /**
+         *
+         * @type {FieldValueAdapter|null}
+         */
+        this.adapter = null;
+
+        /**
+         *
+         * @type {{}|undefined}
+         */
+        this.schema = undefined;
+    }
+
+    toString() {
+        return `FieldDescriptor[name='${this.name}']`;
+    }
+}

package/editor/ecs/component/FieldValueAdapter.js

@@ -0,0 +1,20 @@
+import { assert } from "../../../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 "../../../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,90 @@
+import EmptyView from "../../../view/elements/EmptyView.js";
+import LabelView from "../../../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;
+    }
+
+    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

@@ -1,52 +1,30 @@
 import EmptyView from "../../../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 "../../../view/common/LabelView.js";
 
-class FieldValueAdapter {
-    read(object, field_name) {
-
-    }
-
-    write(object, field_name, value) {
-
-    }
-}
-
 /**
  * @template T
+ * @param {T|undefined} value
  */
-class FieldDescriptor {
-    constructor() {
-        /**
-         *
-         * @type {string}
-         */
-        this.name = "";
-
-        /**
-         * typeof field
-         * @type {Class<T>}
-         */
-        this.type = null;
-
-        /**
-         *
-         * @type {FieldValueAdapter|null}
-         */
-        this.adapter = null;
-
+function objectToClass(value) {
+    if (value === null || value === undefined) {
+        return;
     }
-}
 
-/**
- * @template T
- * @param {T} value
- */
-function objectToClass(value) {
     const type = typeof value;
 
     switch (type) {
         case "object":
-            return value.__ptoto__.constructor;
+            const proto = Object.getPrototypeOf(value);
+
+            if (proto === null) {
+                return;
+            }
+
+            return proto.constructor;
         case "boolean":
             return Boolean;
         case "function":
@@ -78,10 +56,24 @@ function isPublicField(object, field_name) {
 /**
  *
  * @param {Object} object
- * @returns {FieldDescriptor[]}
+ * @param {string} field_name
+ * @returns {boolean}
  */
-function extractObjectFields(object) {
-    const result = [];
+function isReservedField(object, field_name) {
+    if (field_name.startsWith('@')) {
+        return true;
+    }
+
+    return false;
+}
+
+/**
+ *
+ * @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++) {
@@ -91,6 +83,10 @@ function extractObjectFields(object) {
             continue;
         }
 
+        if (isReservedField(object, key)) {
+            continue;
+        }
+
         const field_type = objectToClass(object[key]);
 
         if (field_type === undefined) {
@@ -100,56 +96,242 @@ function extractObjectFields(object) {
         const descriptor = new FieldDescriptor();
         descriptor.name = key;
         descriptor.type = field_type;
+        descriptor.adapter = new FieldValueAdapter();
 
         result.push(descriptor);
     }
 
-    return result;
+    const descriptors = Object.getOwnPropertyDescriptors(object_proto);
+
+    for (let d_name in descriptors) {
+        const d = descriptors[d_name];
+
+        const adapter = new FieldValueAdapter();
+
+        if (d.get === undefined) {
+            adapter.readable = false;
+        }
+
+        if (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 {FieldDescriptor} field
- * @param {Map<*, (parent:*, field:FieldDescriptor)=>View>} registry
+ * @param {Map<*, TypeEditor>} registry
+ * @returns {FieldDescriptor[]}
  */
-export function createFieldEditor(object, field, registry) {
-    const vResult = new EmptyView({});
+function extractObjectFields(object, registry) {
+    const result = [];
 
-    vResult.addChild(new LabelView(field.name));
+    const object_proto = Object.getPrototypeOf(object);
+    const Klass = object_proto.constructor;
 
-    let vValue;
+    const editor = registry.get(Klass);
 
-    const factory = registry.get(field.type);
+    if (!(editor?.schema?.additionalProperties === false)) {
+
+        extract_object_fields_reflection(object, result, object_proto);
 
-    if (factory !== undefined) {
-        vValue = factory(object, field);
-    } else {
-        vValue = createObjectEditor(object, registry);
     }
 
-    vResult.addChild(vValue);
 
-    return vResult;
+    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<*, (parent:*, field:FieldDescriptor)=>View>} registry
+ * @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) {
-    const fields = extractObjectFields(object);
 
-    const vResult = new EmptyView({});
+    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];
 
-        const vField = createFieldEditor(object, field, registry);
+        let vField;
+
+        try {
+            vField = createFieldEditor(object, field, registry);
+        } catch (e) {
+            vField = new LabelView('ERROR');
+            console.warn(e);
+        }
 
-        vResult.addChild(vField);
+        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 "../../../../view/elements/EmptyView.js";
+import { rgb2hex } from "../../../../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 "../../../../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,50 @@
+import { TypeEditor } from "../TypeEditor.js";
+import { StringEditor } from "./primitive/StringEditor.js";
+import EmptyView from "../../../../view/elements/EmptyView.js";
+import ImageView from "../../../../view/elements/image/ImageView.js";
+import ObservedString from "../../../../core/model/ObservedString.js";
+import { ObservedStringEditor } from "./ObservedStringEditor.js";
+
+export class ImagePathEditor 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`);
+        }
+
+        const vEditor = 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);
+
+        function update() {
+            vPreview.__setSource(vEditor.el.value);
+        }
+
+        r.addChild(vPreview);
+        r.addChild(vEditor);
+
+        vEditor.el.addEventListener('input', update);
+
+        return r;
+    }
+}