@woosh/meep-engine 2.46.28 → 2.46.30

package/editor/view/ecs/ComponentControlView.js

@@ -0,0 +1,214 @@
+import View from "../../../src/view/View.js";
+import Signal from "../../../src/core/events/signal/Signal.js";
+import dom from "../../../src/view/DOM.js";
+import ObservedBoolean from "../../../src/core/model/ObservedBoolean.js";
+import LabelView from "../../../src/view/common/LabelView.js";
+import ButtonView from "../../../src/view/elements/button/ButtonView.js";
+import EmptyView from "../../../src/view/elements/EmptyView.js";
+import { downloadAsFile } from "../../../src/core/binary/ByteArrayTools.js";
+
+export async function obtainClipBoard() {
+    if (navigator.clipboard === undefined) {
+        const queries = [{
+            name: "clipboard-read"
+        }, {
+            name: "clipboard-write"
+        }];
+
+        const permission_queries = queries.map(q => navigator.permissions.query(q));
+
+        const statuses = await Promise.all(permission_queries);
+
+        for (let i = 0; i < statuses.length; i++) {
+            const permissionStatus = statuses[i];
+
+            if (permissionStatus.state !== "granted") {
+                throw new Error(`Permission for query not granted (actual state = ${permissionStatus.state}). Query:${JSON.stringify(queries[i])}`)
+            }
+        }
+    }
+
+    return navigator.clipboard;
+}
+
+/**
+ *
+ * @param {string} text
+ * @param {string} [data_name]
+ * @returns {Promise<void>}
+ */
+export async function safeClipboardWriteText(text, data_name = "data") {
+
+    return obtainClipBoard().then(
+        () => {
+            return navigator.clipboard.writeText(text);
+        },
+        () => {
+            // no clipboard available
+            console.log(`No clipboard available, downloading instead`);
+            downloadAsFile(text, `${data_name}.json`);
+        }
+    );
+}
+
+export async function safeClipboardReadText() {
+
+    return obtainClipBoard().then(() => {
+
+        return navigator.clipboard.readText();
+    }, () => {
+        // clipboard not available
+        console.log(`No clipboard available, using a prompt instead`);
+
+        function clickElem(elem) {
+            // Thx user1601638 on Stack Overflow (6/6/2018 - https://stackoverflow.com/questions/13405129/javascript-create-and-save-file )
+            var eventMouse = document.createEvent("MouseEvents")
+            eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
+            elem.dispatchEvent(eventMouse)
+        }
+
+        function openFile(func) {
+            const fileInput = document.createElement("input");
+
+            const readFile = function (e) {
+                var file = e.target.files[0];
+                if (!file) {
+                    return;
+                }
+                var reader = new FileReader();
+                reader.onload = function (e) {
+                    var contents = e.target.result;
+                    fileInput.func(contents)
+                    document.body.removeChild(fileInput)
+                }
+                reader.readAsText(file)
+            }
+            fileInput.type = 'file'
+            fileInput.style.display = 'none'
+            fileInput.onchange = readFile
+            fileInput.func = func
+            document.body.appendChild(fileInput)
+            clickElem(fileInput)
+        }
+
+        return new Promise((resolve, reject) => {
+            openFile(resolve);
+        });
+
+
+    });
+
+}
+
+/**
+ * @template T
+ */
+export class ComponentControlView extends View {
+    /**
+     * @template T
+     * @param {number} entity
+     * @param {T} component
+     * @param {EntityManager} entityManager
+     * @param {View} vController
+     * @param engine
+     * @constructor
+     */
+    constructor(entity, component, entityManager, vController, engine) {
+        super();
+
+        this.signal = {
+            remove: new Signal()
+        };
+
+        const dRoot = dom('div');
+
+        dRoot.addClass('entity-editor-component-control-view');
+
+        this.el = dRoot.el;
+
+        const folded = this.folded = new ObservedBoolean(false);
+
+        const componentType = component.constructor;
+        const typeName = componentType.typeName;
+
+        const vComponentName = new LabelView(typeName);
+
+        const bFold = new ButtonView({
+            classList: ['fold-toggle'],
+            action() {
+                folded.invert();
+            }
+        });
+
+        const bRemove = new ButtonView({
+            classList: ['remove'],
+            action() {
+                self.signal.remove.dispatch();
+            }
+        });
+
+        const bCopy = new ButtonView({
+            classList: ['copy'],
+            async action() {
+                const json = component.toJSON();
+
+                const data = JSON.stringify({
+                    type: typeName,
+                    data: json
+                }, 3, 3);
+
+                safeClipboardWriteText(data, typeName).then(() => {
+                    console.log(`${entity}:${typeName} dumped`);
+                });
+            }
+        });
+
+        bCopy.setClass('disabled', component.hasOwnProperty('toJSON') && typeof component.toJSON !== "function");
+
+        const bPaste = new ButtonView({
+            classList: ['paste'],
+            async action() {
+
+                safeClipboardReadText().then(text => {
+                    const json = JSON.parse(text);
+
+                    if (json.type !== typeName) {
+                        throw new Error(`Component type(=${json.type}) in clipboard does not match current component type(=${typeName})`);
+                    }
+
+                    //get system
+                    component.fromJSON(json.data, engine);
+
+                    console.log(`${entity}:${typeName} pasted from clip`);
+                });
+
+            }
+        });
+
+        bPaste.setClass('disabled', component.hasOwnProperty('fromJSON') && typeof component.fromJSON !== "function");
+
+        const vTitleBar = new EmptyView();
+        dom(vTitleBar.el).addClass('title-bar');
+
+        vTitleBar.addChild(vComponentName);
+        vTitleBar.addChild(bCopy);
+        vTitleBar.addChild(bPaste);
+        vTitleBar.addChild(bFold);
+        vTitleBar.addChild(bRemove);
+
+        this.addChild(vTitleBar);
+
+        const self = this;
+
+        folded.process(function (v) {
+
+            dRoot.setClass('folded', v);
+
+            if (v) {
+                self.removeChild(vController);
+            } else {
+                self.addChild(vController);
+            }
+        });
+    }
+}

package/editor/view/ecs/EntityEditor.js

@@ -0,0 +1,258 @@
+/**
+ * Created by Alex on 15/01/2017.
+ */
+import View from "../../../src/view/View.js";
+import dom from "../../../src/view/DOM.js";
+
+import List from '../../../src/core/collection/list/List.js';
+import ObservedValue from '../../../src/core/model/ObservedValue.js';
+import LabelView from '../../../src/view/common/LabelView.js';
+import ButtonView from '../../../src/view/elements/button/ButtonView.js';
+import DropDownSelectionView from '../../../src/view/elements/DropDownSelectionView.js';
+import EmptyView from "../../../src/view/elements/EmptyView.js";
+import { EntityManager, EventType } from "../../../src/engine/ecs/EntityManager.js";
+import ComponentRemoveAction from "../../actions/concrete/ComponentRemoveAction.js";
+import ComponentAddAction from "../../actions/concrete/ComponentAddAction.js";
+import { LineView } from "./components/common/LineView.js";
+import { ComponentControlView } from "./ComponentControlView.js";
+import { buildObjectEditorFromRegistry } from "../../ecs/component/createObjectEditor.js";
+import { isDefined } from "../../../src/core/process/matcher/Matchers.js";
+
+
+class EntityEditor extends View {
+    /**
+     *
+     * @param {ComponentControlFactory} componentControlFactory
+     * @param {Editor} editor
+     * @constructor
+     */
+    constructor(componentControlFactory, editor) {
+
+        super();
+
+
+        const dRoot = dom('div');
+
+        dRoot.addClass('entity-editor-view');
+
+        this.el = dRoot.el;
+        const self = this;
+
+        this.model = new ObservedValue(null);
+        /**
+         * @type {ObservedValue<EntityManager>}
+         */
+        this.entityManager = new ObservedValue(null);
+        this.components = new List();
+
+        const vComponentList = new EmptyView({ classList: ['component-list'] });
+
+        /**
+         *
+         * @type {Map<any, TypeEditor>}
+         */
+        const registry = editor.type_editor_registry;
+
+        /**
+         *
+         * @type {Map<Object, ComponentControlView>}
+         */
+        this.componentControllers = new Map();
+
+        /**
+         *
+         * @returns {EntityComponentDataset}
+         */
+        function get_dataset() {
+            return self.entityManager.get().dataset;
+        }
+
+        function addComponent(event) {
+            if (event.instance === undefined) {
+                return;
+            }
+
+            self.components.add(event.instance);
+        }
+
+        function removeComponent(event) {
+            // console.log('removeComponent.Event',event, self.components);
+
+            if (event.instance === undefined) {
+                return;
+            }
+
+            try {
+                self.components.removeOneOf(event.instance);
+            } catch (e) {
+                console.error(e);
+            }
+        }
+
+        function watchEntity(entity) {
+
+            const dataset = get_dataset();
+
+            if (!dataset.entityExists(entity)) {
+                //doesn't exist, nothing to do
+                return;
+            }
+
+            dataset.addEntityEventListener(entity, EventType.ComponentAdded, addComponent);
+            dataset.addEntityEventListener(entity, EventType.ComponentRemoved, removeComponent);
+            dataset.addEntityEventListener(entity, EventType.EntityRemoved, unwatchEntity);
+        }
+
+        function unwatchEntity(entity) {
+
+            const dataset = get_dataset();
+
+            if (!dataset.entityExists(entity)) {
+                //doesn't exist, nothing to do
+                return;
+            }
+
+            dataset.removeEntityEventListener(entity, EventType.ComponentAdded, addComponent);
+            dataset.removeEntityEventListener(entity, EventType.ComponentRemoved, removeComponent);
+            dataset.removeEntityEventListener(entity, EventType.EntityRemoved, unwatchEntity);
+        }
+
+        this.model.onChanged.add(function (entity, oldEntity) {
+            if (oldEntity !== undefined && oldEntity !== null) {
+                unwatchEntity(oldEntity);
+            }
+            watchEntity(entity);
+
+            self.components.reset();
+
+
+            /**
+             *
+             * @type {EntityComponentDataset}
+             */
+            const dataset = get_dataset();
+
+            unattachedTypes.reset();
+            unattachedTypes.addAll(dataset.getComponentTypeMap().map(a => a.typeName).filter(isDefined));
+
+            const components = dataset.getAllComponents(entity);
+            components.forEach(function (c) {
+                self.components.add(c);
+            });
+        });
+
+        this.vLabelEntity = new LabelView(this.model, {
+            classList: ['id', 'label']
+        });
+
+        this.addChild(vComponentList);
+
+
+        const unattachedTypes = new List();
+
+        /**
+         * @template T
+         * @param {T} component
+         */
+        function handleComponentAdded(component) {
+            let view;
+
+            try {
+                view = buildObjectEditorFromRegistry(component, registry);
+            } catch (e) {
+                view = new LabelView(`ERROR: ${e.message}\n${e.stack}`);
+
+                console.warn('Failed to build editor', e);
+            }
+
+            if (!view) {
+                view = new LabelView('EMPTY');
+            }
+
+            /**
+             *
+             * @type {EntityManager}
+             */
+            const entityManager = self.entityManager.getValue();
+
+            const entityId = self.model.getValue();
+
+            const vBody = new EmptyView({
+                classList: ['body']
+            });
+            vBody.addChild(view);
+
+            const controlView = new ComponentControlView(entityId, component, entityManager, vBody, editor.engine);
+
+            const Klass = component.constructor;
+
+            controlView.signal.remove.add(function () {
+
+                editor.actions.mark('Remove Component');
+                editor.actions.do(new ComponentRemoveAction(entityId, Klass));
+            });
+
+
+            vComponentList.addChild(controlView);
+            self.componentControllers.set(component, controlView);
+
+            unattachedTypes.removeOneOf(Klass.typeName);
+
+        }
+
+        function handleComponentRemoved(c) {
+            // console.log("handleComponentRemoved",c);
+            if (self.componentControllers.has(c)) {
+                const controlView = self.componentControllers.get(c);
+                self.componentControllers.delete(c);
+                vComponentList.removeChild(controlView);
+
+                const Klass = c.constructor;
+
+                unattachedTypes.add(Klass.typeName);
+            }
+        }
+
+        this.components.on.added.add(handleComponentAdded);
+        this.components.on.removed.add(handleComponentRemoved);
+
+
+        const typeSelection = new DropDownSelectionView(unattachedTypes);
+
+        const buttonView = new ButtonView({
+            classList: ['add-component'],
+            name: "Add",
+            action: function () {
+                const selectedValue = typeSelection.getSelectedValue();
+                const em = self.entityManager.get();
+                const ComponentClass = em.getComponentClassByName(selectedValue);
+                const component = new ComponentClass();
+
+                const entityIndex = self.model.get();
+
+                editor.actions.mark('Add Component');
+                editor.actions.do(new ComponentAddAction(entityIndex, component));
+            }
+        });
+
+        this.addChild(new LineView({
+            elements: [this.vLabelEntity, buttonView, typeSelection],
+            classList: ['component-adder']
+        }));
+
+        this.handlers = {};
+    }
+
+    link() {
+        super.link()
+
+
+    }
+
+    unlink() {
+        super.unlink();
+    }
+}
+
+
+export default EntityEditor;