@fps-games/editor 0.2.0-beta.3 → 0.2.1-beta.1

package/node_modules/@playcanvas/pcui/react/dist/module/src/components/GridView/component.mjs

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Element } from '../Element/component.mjs';
+import { GridViewItem } from '../GridViewItem/index.mjs';
+import { GridView as GridView$1 } from './index.mjs';
+
+/**
+ * Represents a container that shows a flexible wrappable list of items that looks like a grid.
+ * Contains GridViewItems.
+ */
+class GridView extends Element {
+    constructor(props) {
+        super(props);
+        this.element = new GridView$1({ ...props });
+        this.loadChildren(this.props.children, this.element);
+    }
+    loadChildren(children, element) {
+        if (!children)
+            return;
+        if (!Array.isArray(children)) {
+            children = [children];
+        }
+        children.forEach((child) => {
+            const childElement = new GridViewItem({ text: child.props.text });
+            element.append(childElement);
+            this.loadChildren(child.props.children, childElement);
+        });
+    }
+    render() {
+        return React.createElement("div", { ref: (nodeElement) => {
+                if (nodeElement) {
+                    nodeElement.appendChild(this.element.dom);
+                }
+            } });
+    }
+}
+GridView.ctor = GridView$1;
+
+export { GridView };

package/node_modules/@playcanvas/pcui/react/dist/module/src/components/GridView/index.mjs

@@ -0,0 +1,448 @@
+import { Container } from '../Container/index.mjs';
+import { GridViewItem } from '../GridViewItem/index.mjs';
+
+const CLASS_ROOT = 'pcui-gridview';
+const CLASS_VERTICAL = `${CLASS_ROOT}-vertical`;
+/**
+ * Represents a container that shows a flexible wrappable list of items that looks like a grid.
+ * Contains {@link GridViewItem}s.
+ */
+let GridView$1 = class GridView extends Container {
+    /**
+     * Creates a new GridView.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args = {}) {
+        super(args);
+        this._filterAnimationFrame = null;
+        this._filterCanceled = false;
+        this._selected = [];
+        this._activeItem = null;
+        this._onFocusIn = (evt) => {
+            let node = evt.target;
+            while (node && node !== this.dom) {
+                if (node.ui instanceof GridViewItem) {
+                    this._setActiveItem(node.ui);
+                    return;
+                }
+                node = node.parentElement;
+            }
+        };
+        this._onKeyDown = (evt) => {
+            if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter'].indexOf(evt.key) === -1)
+                return;
+            const element = evt.target;
+            if (element.tagName === 'INPUT')
+                return;
+            // Walk up from the event target to find the GridViewItem
+            let targetElement = element;
+            let item = null;
+            while (targetElement && targetElement !== this.dom) {
+                if (targetElement.ui instanceof GridViewItem) {
+                    item = targetElement.ui;
+                    break;
+                }
+                targetElement = targetElement.parentElement;
+            }
+            if (!item)
+                return;
+            evt.preventDefault();
+            evt.stopPropagation();
+            if (evt.key === 'Enter') {
+                this.emit(GridView.EVENT_ACTIVATE, item);
+                return;
+            }
+            if (!item.allowSelect)
+                return;
+            let target = null;
+            if (this._vertical) {
+                switch (evt.key) {
+                    case 'ArrowUp':
+                        target = item.previousSibling;
+                        break;
+                    case 'ArrowDown':
+                        target = item.nextSibling;
+                        break;
+                    case 'ArrowLeft':
+                        target = this._findItemInAdjacentRow(item, -1);
+                        break;
+                    case 'ArrowRight':
+                        target = this._findItemInAdjacentRow(item, 1);
+                        break;
+                }
+            }
+            else {
+                switch (evt.key) {
+                    case 'ArrowLeft':
+                        target = item.previousSibling;
+                        break;
+                    case 'ArrowRight':
+                        target = item.nextSibling;
+                        break;
+                    case 'ArrowUp':
+                        target = this._findItemInAdjacentRow(item, -1);
+                        break;
+                    case 'ArrowDown':
+                        target = this._findItemInAdjacentRow(item, 1);
+                        break;
+                }
+            }
+            if (target) {
+                this._selectSingleItem(target);
+                target.focus();
+            }
+        };
+        this._onDblClick = (evt) => {
+            let targetElement = evt.target;
+            let item = null;
+            while (targetElement && targetElement !== this.dom) {
+                if (targetElement.ui instanceof GridViewItem) {
+                    item = targetElement.ui;
+                    break;
+                }
+                targetElement = targetElement.parentElement;
+            }
+            if (item) {
+                evt.preventDefault();
+                evt.stopPropagation();
+                this.emit(GridView.EVENT_ACTIVATE, item);
+            }
+        };
+        this._vertical = !!args.vertical;
+        this.class.add(this._vertical ? CLASS_VERTICAL : CLASS_ROOT);
+        this.on('append', (element) => {
+            this._onAppendGridViewItem(element);
+        });
+        this.on('remove', (element) => {
+            this._onRemoveGridViewItem(element);
+        });
+        this._filterFn = args.filterFn;
+        // Default options for GridView layout
+        this._multiSelect = args.multiSelect ?? true;
+        this._allowDeselect = args.allowDeselect ?? true;
+        this.dom.addEventListener('keydown', this._onKeyDown);
+        this.dom.addEventListener('dblclick', this._onDblClick);
+        this.dom.addEventListener('focusin', this._onFocusIn);
+    }
+    _setActiveItem(item) {
+        if (this._activeItem === item)
+            return;
+        if (this._activeItem && !this._activeItem.destroyed) {
+            this._activeItem.dom.tabIndex = -1;
+        }
+        this._activeItem = item;
+        if (item) {
+            item.dom.tabIndex = 0;
+        }
+    }
+    _onAppendGridViewItem(item) {
+        if (!(item instanceof GridViewItem))
+            return;
+        if (!this._activeItem) {
+            this._setActiveItem(item);
+        }
+        else {
+            item.dom.tabIndex = -1;
+        }
+        let evtClick;
+        if (this._clickFn) {
+            evtClick = item.on('click', evt => this._clickFn(evt, item));
+        }
+        else {
+            evtClick = item.on('click', evt => this._onClickItem(evt, item));
+        }
+        let evtSelect = item.on('select', () => this._onSelectItem(item));
+        let evtDeselect;
+        if (this._allowDeselect) {
+            evtDeselect = item.on('deselect', () => this._onDeselectItem(item));
+        }
+        if (this._filterFn && !this._filterFn(item)) {
+            item.hidden = true;
+        }
+        item.once('griditem:remove', () => {
+            evtClick.unbind();
+            evtClick = null;
+            evtSelect.unbind();
+            evtSelect = null;
+            if (this._allowDeselect) {
+                evtDeselect.unbind();
+                evtDeselect = null;
+            }
+        });
+    }
+    _onRemoveGridViewItem(item) {
+        if (!(item instanceof GridViewItem))
+            return;
+        item.selected = false;
+        if (this._activeItem === item) {
+            this._setActiveItem(null);
+            this._validateActiveItem();
+        }
+        item.emit('griditem:remove');
+        item.unbind('griditem:remove');
+    }
+    _onClickItem(evt, item) {
+        if ((evt.ctrlKey || evt.metaKey) && this._multiSelect) {
+            item.selected = !item.selected;
+        }
+        else if (evt.shiftKey && this._multiSelect) {
+            const lastSelected = this._selected[this._selected.length - 1];
+            if (lastSelected) {
+                const comparePosition = lastSelected.dom.compareDocumentPosition(item.dom);
+                if (comparePosition & Node.DOCUMENT_POSITION_FOLLOWING) {
+                    let sibling = lastSelected.nextSibling;
+                    while (sibling) {
+                        sibling.selected = true;
+                        if (sibling === item)
+                            break;
+                        sibling = sibling.nextSibling;
+                    }
+                }
+                else {
+                    let sibling = lastSelected.previousSibling;
+                    while (sibling) {
+                        sibling.selected = true;
+                        if (sibling === item)
+                            break;
+                        sibling = sibling.previousSibling;
+                    }
+                }
+            }
+            else {
+                item.selected = true;
+            }
+        }
+        else {
+            let othersSelected = false;
+            let i = this._selected.length;
+            while (i--) {
+                if (this._selected[i] && this._selected[i] !== item) {
+                    this._selected[i].selected = false;
+                    othersSelected = true;
+                }
+            }
+            if (othersSelected) {
+                item.selected = true;
+            }
+            else {
+                item.selected = !item.selected;
+            }
+        }
+    }
+    _onSelectItem(item) {
+        this._selected.push(item);
+        this._setActiveItem(item);
+        this.emit('select', item);
+    }
+    _onDeselectItem(item) {
+        const index = this._selected.indexOf(item);
+        if (index !== -1) {
+            this._selected.splice(index, 1);
+            this.emit('deselect', item);
+        }
+    }
+    _selectSingleItem(item) {
+        let i = this._selected.length;
+        while (i--) {
+            if (this._selected[i] && this._selected[i] !== item) {
+                this._selected[i].selected = false;
+            }
+        }
+        item.selected = true;
+    }
+    _findItemInAdjacentRow(item, direction) {
+        const positionProp = this._vertical ? 'offsetLeft' : 'offsetTop';
+        const itemPos = item.dom[positionProp];
+        // Determine the index of the current item within its row
+        let index = 0;
+        let sibling = item.previousSibling;
+        while (sibling && sibling.dom[positionProp] === itemPos) {
+            index++;
+            sibling = sibling.previousSibling;
+        }
+        // Find the first item in the adjacent row
+        let firstInRow = null;
+        if (direction > 0) {
+            let current = item.nextSibling;
+            while (current) {
+                if (current.dom[positionProp] !== itemPos) {
+                    firstInRow = current;
+                    break;
+                }
+                current = current.nextSibling;
+            }
+        }
+        else {
+            let lastInPrevRow = null;
+            let current = item.previousSibling;
+            while (current) {
+                if (current.dom[positionProp] !== itemPos) {
+                    lastInPrevRow = current;
+                    break;
+                }
+                current = current.previousSibling;
+            }
+            if (!lastInPrevRow)
+                return null;
+            const prevPos = lastInPrevRow.dom[positionProp];
+            firstInRow = lastInPrevRow;
+            while (firstInRow.previousSibling && firstInRow.previousSibling.dom[positionProp] === prevPos) {
+                firstInRow = firstInRow.previousSibling;
+            }
+        }
+        if (!firstInRow)
+            return null;
+        // Navigate to the same column position, or the last item if the row is shorter
+        let target = firstInRow;
+        const targetPos = target.dom[positionProp];
+        for (let i = 0; i < index; i++) {
+            const next = target.nextSibling;
+            if (!next || next.dom[positionProp] !== targetPos)
+                break;
+            target = next;
+        }
+        return target;
+    }
+    _validateActiveItem() {
+        if (this._activeItem && !this._activeItem.hidden && !this._activeItem.destroyed) {
+            return;
+        }
+        this._setActiveItem(null);
+        const children = this.dom.children;
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i].ui;
+            if (child instanceof GridViewItem && !child.hidden) {
+                this._setActiveItem(child);
+                return;
+            }
+        }
+    }
+    /**
+     * Deselects all selected grid view items.
+     */
+    deselect() {
+        let i = this._selected.length;
+        while (i--) {
+            if (this._selected[i]) {
+                this._selected[i].selected = false;
+            }
+        }
+    }
+    /**
+     * Filters grid view items with the filter function provided in the constructor.
+     */
+    filter() {
+        this.forEachChild((child) => {
+            if (child instanceof GridViewItem) {
+                child.hidden = this._filterFn && !this._filterFn(child);
+            }
+        });
+        this._validateActiveItem();
+    }
+    /**
+     * Filters grid view items asynchronously by only allowing up to the specified number of grid
+     * view item operations. Fires the following events:
+     *
+     * - filter:start - When filtering starts.
+     * - filter:end - When filtering ends.
+     * - filter:delay - When an animation frame is requested to process another batch.
+     * - filter:cancel - When filtering is canceled.
+     *
+     * @param batchLimit - The maximum number of items to show before requesting another animation frame.
+     */
+    filterAsync(batchLimit = 100) {
+        let i = 0;
+        const children = this.dom.childNodes;
+        const len = children.length;
+        this.emit('filter:start');
+        this._filterCanceled = false;
+        const next = () => {
+            this._filterAnimationFrame = null;
+            let visible = 0;
+            let activeItemHidden = false;
+            for (; i < len && visible < batchLimit; i++) {
+                if (this._filterCanceled) {
+                    this._filterCanceled = false;
+                    this.emit('filter:cancel');
+                    return;
+                }
+                const child = children[i].ui;
+                if (child instanceof GridViewItem) {
+                    if (this._filterFn && !this._filterFn(child)) {
+                        child.hidden = true;
+                        if (child === this._activeItem) {
+                            activeItemHidden = true;
+                        }
+                    }
+                    else {
+                        child.hidden = false;
+                        visible++;
+                    }
+                }
+            }
+            if (activeItemHidden) {
+                this._validateActiveItem();
+            }
+            if (i < len) {
+                this.emit('filter:delay');
+                this._filterAnimationFrame = requestAnimationFrame(next);
+            }
+            else {
+                this.emit('filter:end');
+            }
+        };
+        next();
+    }
+    /**
+     * Cancels asynchronous filtering.
+     */
+    filterAsyncCancel() {
+        if (this._filterAnimationFrame) {
+            cancelAnimationFrame(this._filterAnimationFrame);
+            this._filterAnimationFrame = null;
+        }
+        else {
+            this._filterCanceled = true;
+        }
+    }
+    destroy() {
+        if (this._destroyed)
+            return;
+        this.dom.removeEventListener('keydown', this._onKeyDown);
+        this.dom.removeEventListener('dblclick', this._onDblClick);
+        this.dom.removeEventListener('focusin', this._onFocusIn);
+        if (this._filterAnimationFrame) {
+            cancelAnimationFrame(this._filterAnimationFrame);
+            this._filterAnimationFrame = null;
+        }
+        super.destroy();
+    }
+    /**
+     * Gets the selected GridViewItems.
+     */
+    get selected() {
+        return this._selected.slice();
+    }
+    /**
+     * Gets whether the grid layout is vertical or not.
+     */
+    get vertical() {
+        return this._vertical;
+    }
+};
+/**
+ * Fired when user activates a {@link GridViewItem} by pressing Enter or double-clicking.
+ *
+ * @event
+ * @example
+ * ```ts
+ * const gridView = new GridView();
+ * gridView.on('activate', (item: GridViewItem) => {
+ *     console.log(`Activated item ${item.text}`);
+ * });
+ * ```
+ */
+GridView$1.EVENT_ACTIVATE = 'activate';
+
+export { GridView$1 as GridView };

package/node_modules/@playcanvas/pcui/react/dist/module/src/components/GridViewItem/component.mjs

@@ -0,0 +1,11 @@
+import { Element } from '../Element/component.mjs';
+import { GridViewItem as GridViewItem$1 } from './index.mjs';
+
+/**
+ * Represents a grid view item used in GridView.
+ */
+class GridViewItem extends Element {
+}
+GridViewItem.ctor = GridViewItem$1;
+
+export { GridViewItem };

package/node_modules/@playcanvas/pcui/react/dist/module/src/components/GridViewItem/index.mjs

@@ -0,0 +1,152 @@
+import { BindingObserversToElement } from '../../binding/BindingObserversToElement/index.mjs';
+import { Container } from '../Container/index.mjs';
+import { Label } from '../Label/index.mjs';
+import { RadioButton } from '../RadioButton/index.mjs';
+
+const CLASS_ROOT = 'pcui-gridview-item';
+const CLASS_ROOT_RADIO = 'pcui-gridview-radio-container';
+const CLASS_SELECTED = `${CLASS_ROOT}-selected`;
+const CLASS_TEXT = `${CLASS_ROOT}-text`;
+const CLASS_RADIO_BUTTON = 'pcui-gridview-radiobtn';
+/**
+ *  Represents a grid view item used in {@link GridView}.
+ */
+class GridViewItem extends Container {
+    /**
+     * Creates a new GridViewItem.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args = {}) {
+        super({ tabIndex: 0, ...args });
+        /**
+         * Determines whether the item can be selected. Defaults to `true`.
+         */
+        this.allowSelect = true;
+        this._onRadioButtonClick = () => {
+            this._radioButton.value = this.selected;
+        };
+        this._onFocus = () => {
+            this.emit('focus');
+        };
+        this._onBlur = () => {
+            this.emit('blur');
+        };
+        this.allowSelect = args.allowSelect ?? true;
+        this._type = args.type ?? null;
+        this._selected = false;
+        if (args.type === 'radio') {
+            this.class.add(CLASS_ROOT_RADIO);
+            this._radioButton = new RadioButton({
+                class: CLASS_RADIO_BUTTON,
+                binding: new BindingObserversToElement()
+            });
+            // @ts-ignore Remove radio button click event listener
+            this._radioButton.dom.removeEventListener('click', this._radioButton._onClick);
+            this._radioButton.dom.addEventListener('click', this._onRadioButtonClick);
+            this.append(this._radioButton);
+        }
+        else {
+            this.class.add(CLASS_ROOT);
+        }
+        this._labelText = new Label({
+            class: CLASS_TEXT,
+            binding: new BindingObserversToElement(),
+            text: args.text ?? ''
+        });
+        this.append(this._labelText);
+        this.dom.addEventListener('focus', this._onFocus);
+        this.dom.addEventListener('blur', this._onBlur);
+    }
+    destroy() {
+        if (this._destroyed)
+            return;
+        this.dom.removeEventListener('focus', this._onFocus);
+        this.dom.removeEventListener('blur', this._onBlur);
+        super.destroy();
+    }
+    focus() {
+        this.dom.focus();
+    }
+    blur() {
+        this.dom.blur();
+    }
+    link(observers, paths) {
+        this._labelText.link(observers, paths);
+    }
+    unlink() {
+        this._labelText.unlink();
+    }
+    /**
+     * Sets whether the item is selected.
+     */
+    set selected(value) {
+        if (this._selected === value)
+            return;
+        this._selected = value;
+        if (value) {
+            if (this._radioButton) {
+                this._radioButton.value = value;
+            }
+            else {
+                this.class.add(CLASS_SELECTED);
+            }
+            this.emit('select', this);
+        }
+        else {
+            if (this._radioButton) {
+                this._radioButton.value = false;
+            }
+            else {
+                this.class.remove(CLASS_SELECTED);
+            }
+            this.emit('deselect', this);
+        }
+    }
+    /**
+     * Gets whether the item is selected.
+     */
+    get selected() {
+        return this._selected;
+    }
+    /**
+     * Sets the text of the item.
+     */
+    set text(value) {
+        this._labelText.text = value;
+    }
+    /**
+     * Gets the text of the item.
+     */
+    get text() {
+        return this._labelText.text;
+    }
+    /**
+     * Gets the next visible sibling grid view item.
+     */
+    get nextSibling() {
+        let sibling = this.dom.nextSibling;
+        while (sibling) {
+            if (sibling.ui instanceof GridViewItem && !sibling.ui.hidden) {
+                return sibling.ui;
+            }
+            sibling = sibling.nextSibling;
+        }
+        return null;
+    }
+    /**
+     * Gets the previous visible sibling grid view item.
+     */
+    get previousSibling() {
+        let sibling = this.dom.previousSibling;
+        while (sibling) {
+            if (sibling.ui instanceof GridViewItem && !sibling.ui.hidden) {
+                return sibling.ui;
+            }
+            sibling = sibling.previousSibling;
+        }
+        return null;
+    }
+}
+
+export { GridViewItem };

package/node_modules/@playcanvas/pcui/react/dist/module/src/components/InfoBox/component.mjs

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Element } from '../Element/component.mjs';
+import { InfoBox as InfoBox$1 } from './index.mjs';
+
+/**
+ * Represents an information box.
+ */
+class InfoBox extends Element {
+    render() {
+        // @ts-ignore
+        return React.createElement("span", { ref: this.attachElement });
+    }
+}
+InfoBox.ctor = InfoBox$1;
+
+export { InfoBox };