@woosh/meep-engine 2.37.18 → 2.38.0

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,37 @@ 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;
+}
+
+/**
+ *
+ * @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++) {
@@ -91,6 +96,10 @@ function extractObjectFields(object) {
             continue;
         }
 
+        if (isReservedField(object, key)) {
+            continue;
+        }
+
         const field_type = objectToClass(object[key]);
 
         if (field_type === undefined) {
@@ -100,56 +109,253 @@ function extractObjectFields(object) {
         const descriptor = new FieldDescriptor();
         descriptor.name = key;
         descriptor.type = field_type;
+        descriptor.adapter = new FieldValueAdapter();
 
         result.push(descriptor);
     }
 
-    return result;
+    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 {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) {
 
-    vResult.addChild(new LabelView(field.name));
+    const result = [];
 
-    let vValue;
+    const object_proto = Object.getPrototypeOf(object);
+    const Klass = object_proto.constructor;
 
-    const factory = registry.get(field.type);
+    const editor = registry.get(Klass);
+
+    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;
+    }
+}

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

@@ -0,0 +1,86 @@
+import { TypeEditor } from "../TypeEditor.js";
+import EmptyView from "../../../../view/elements/EmptyView.js";
+import { NumberController } from "../../../view/ecs/components/common/NumberController.js";
+import LabelView from "../../../../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 "../../../../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 "../../../../view/elements/DropDownSelectionView.js";
+import List from "../../../../core/collection/list/List.js";
+import { objectKeyByValue } from "../../../../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;
+    }
+}