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

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

@@ -0,0 +1,108 @@
+import { Container } from '../Container/index.mjs';
+import { Element } from '../Element/index.mjs';
+
+const CLASS_OVERLAY = 'pcui-overlay';
+const CLASS_OVERLAY_INNER = `${CLASS_OVERLAY}-inner`;
+const CLASS_OVERLAY_CLICKABLE = `${CLASS_OVERLAY}-clickable`;
+const CLASS_OVERLAY_TRANSPARENT = `${CLASS_OVERLAY}-transparent`;
+const CLASS_OVERLAY_CONTENT = `${CLASS_OVERLAY}-content`;
+/**
+ * An overlay element.
+ */
+class Overlay extends Container {
+    /**
+     * Creates a new Overlay.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args = {}) {
+        super(args);
+        this._onPointerDown = (evt) => {
+            if (!this.clickable || this.domContent.contains(evt.target)) {
+                return;
+            }
+            // some field might be in focus
+            document.body.blur();
+            // wait till blur is done
+            requestAnimationFrame(() => {
+                this.hidden = true;
+            });
+            evt.preventDefault();
+            evt.stopPropagation();
+        };
+        this.class.add(CLASS_OVERLAY);
+        this._domClickableOverlay = document.createElement('div');
+        this._domClickableOverlay.ui = this;
+        this._domClickableOverlay.classList.add(CLASS_OVERLAY_INNER);
+        this.dom.appendChild(this._domClickableOverlay);
+        this.on('show', () => {
+            document.body.addEventListener('pointerdown', this._onPointerDown, true);
+        });
+        this.on('hide', () => {
+            document.body.removeEventListener('pointerdown', this._onPointerDown, true);
+        });
+        this.domContent = document.createElement('div');
+        this.domContent.ui = this;
+        this.domContent.classList.add(CLASS_OVERLAY_CONTENT);
+        this.dom.appendChild(this.domContent);
+        this.clickable = args.clickable ?? false;
+        this.transparent = args.transparent ?? false;
+    }
+    destroy() {
+        if (this._destroyed)
+            return;
+        super.destroy();
+    }
+    /**
+     * Position the overlay at specific x, y coordinates.
+     *
+     * @param x - The x coordinate.
+     * @param y - The y coordinate.
+     */
+    position(x, y) {
+        const area = this._domClickableOverlay.getBoundingClientRect();
+        const rect = this.domContent.getBoundingClientRect();
+        x = Math.max(0, Math.min(area.width - rect.width, x));
+        y = Math.max(0, Math.min(area.height - rect.height, y));
+        this.domContent.style.position = 'absolute';
+        this.domContent.style.left = `${x}px`;
+        this.domContent.style.top = `${y}px`;
+    }
+    /**
+     * Sets whether the overlay can be hidden by clicking on it.
+     */
+    set clickable(value) {
+        if (value) {
+            this.class.add(CLASS_OVERLAY_CLICKABLE);
+        }
+        else {
+            this.class.remove(CLASS_OVERLAY_CLICKABLE);
+        }
+    }
+    /**
+     * Gets whether the overlay can be hidden by clicking on it.
+     */
+    get clickable() {
+        return this.class.contains(CLASS_OVERLAY_CLICKABLE);
+    }
+    /**
+     * Sets whether the overlay is transparent or not.
+     */
+    set transparent(value) {
+        if (value) {
+            this.class.add(CLASS_OVERLAY_TRANSPARENT);
+        }
+        else {
+            this.class.remove(CLASS_OVERLAY_TRANSPARENT);
+        }
+    }
+    /**
+     * Gets whether the overlay is transparent or not.
+     */
+    get transparent() {
+        return this.class.contains(CLASS_OVERLAY_TRANSPARENT);
+    }
+}
+Element.register('overlay', Overlay);
+
+export { Overlay };

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

@@ -0,0 +1,400 @@
+import { CLASS_FONT_BOLD, CLASS_COLLAPSED, CLASS_COLLAPSIBLE } from '../../class.mjs';
+import { Button } from '../Button/index.mjs';
+import { Container } from '../Container/index.mjs';
+import { Element } from '../Element/index.mjs';
+import { Label } from '../Label/index.mjs';
+
+const CLASS_PANEL = 'pcui-panel';
+const CLASS_PANEL_HEADER = `${CLASS_PANEL}-header`;
+const CLASS_PANEL_HEADER_TITLE = `${CLASS_PANEL_HEADER}-title`;
+const CLASS_PANEL_CONTENT = `${CLASS_PANEL}-content`;
+const CLASS_PANEL_HORIZONTAL = `${CLASS_PANEL}-horizontal`;
+const CLASS_PANEL_SORTABLE_ICON = `${CLASS_PANEL}-sortable-icon`;
+const CLASS_PANEL_REMOVE = `${CLASS_PANEL}-remove`;
+/**
+ * The Panel is a {@link Container} that itself contains a header container and a content
+ * container. The respective Container functions work using the content container. One can also
+ * append elements to the header of the Panel.
+ */
+class Panel extends Container {
+    /**
+     * Creates a new Panel.
+     *
+     * @param args - The arguments. Extends the Container constructor arguments. All settable
+     * properties can also be set through the constructor.
+     */
+    constructor(args = {}) {
+        const containerArgs = { ...args, flex: true };
+        delete containerArgs.grid;
+        delete containerArgs.flexDirection;
+        delete containerArgs.scrollable;
+        super(containerArgs);
+        this._reflowTimeout = null;
+        this._widthBeforeCollapse = null;
+        this._heightBeforeCollapse = null;
+        this._iconSort = null;
+        this._btnRemove = null;
+        this._onHeaderClick = (evt) => {
+            if (!this._collapsible)
+                return;
+            if (evt.target !== this.header.dom && evt.target !== this._labelTitle.dom)
+                return;
+            // toggle collapsed
+            this.collapsed = !this.collapsed;
+        };
+        this._onDragStart = (evt) => {
+            if (!this.enabled || this.readOnly)
+                return;
+            evt.stopPropagation();
+            evt.preventDefault();
+            window.addEventListener('mouseup', this._onDragEndEvt);
+            window.addEventListener('mouseleave', this._onDragEndEvt);
+            window.addEventListener('mousemove', this._onDragMove);
+            this.emit('dragstart');
+            // @ts-ignore accessing protected methods
+            if (this.parent && this.parent._onChildDragStart) {
+                // @ts-ignore accessing protected methods
+                this.parent._onChildDragStart(evt, this);
+            }
+        };
+        this._onDragMove = (evt) => {
+            this.emit('dragmove');
+            // @ts-ignore accessing protected methods
+            if (this.parent && this.parent._onChildDragStart) {
+                // @ts-ignore accessing protected methods
+                this.parent._onChildDragMove(evt, this);
+            }
+        };
+        this.class.add(CLASS_PANEL);
+        if (args.panelType) {
+            this.class.add(`${CLASS_PANEL}-${args.panelType}`);
+        }
+        // do not call reflow on every update while
+        // we are initializing
+        this._suspendReflow = true;
+        // initialize header container
+        this._initializeHeader(args);
+        // initialize content container
+        this._initializeContent(args);
+        // header size
+        this.headerSize = args.headerSize ?? 32;
+        // collapse related
+        this.collapsible = args.collapsible ?? false;
+        this.collapsed = args.collapsed ?? false;
+        this.collapseHorizontally = args.collapseHorizontally ?? false;
+        this.sortable = args.sortable ?? false;
+        this.removable = args.removable || !!args.onRemove || false;
+        // Set the contents container to be the content DOM element. From now on, calling append
+        // functions on the panel will append the elements to the contents container.
+        this.domContent = this._containerContent.dom;
+        // execute reflow now after all fields have been initialized
+        this._suspendReflow = false;
+        this._reflow();
+        this._onDragEndEvt = this._onDragEnd.bind(this);
+    }
+    destroy() {
+        if (this._destroyed)
+            return;
+        if (this._reflowTimeout) {
+            cancelAnimationFrame(this._reflowTimeout);
+            this._reflowTimeout = null;
+        }
+        window.removeEventListener('mouseup', this._onDragEndEvt);
+        window.removeEventListener('mouseleave', this._onDragEndEvt);
+        window.removeEventListener('mousemove', this._onDragMove);
+        super.destroy();
+    }
+    _initializeHeader(args) {
+        // header container
+        this._containerHeader = new Container({
+            flex: true,
+            flexDirection: 'row',
+            class: [CLASS_PANEL_HEADER, CLASS_FONT_BOLD]
+        });
+        // header title
+        this._labelTitle = new Label({
+            text: args.headerText,
+            class: [CLASS_PANEL_HEADER_TITLE, CLASS_FONT_BOLD]
+        });
+        this._containerHeader.append(this._labelTitle);
+        // use native click listener because the Element#click event is only fired if the element
+        // is enabled. However we still want to catch header click events in order to collapse them
+        this._containerHeader.dom.addEventListener('click', this._onHeaderClick);
+        this.append(this._containerHeader);
+    }
+    _onClickRemove(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.emit('click:remove');
+    }
+    _initializeContent(args) {
+        // containers container
+        this._containerContent = new Container({
+            class: CLASS_PANEL_CONTENT,
+            grid: args.grid,
+            flex: args.flex,
+            flexDirection: args.flexDirection,
+            scrollable: args.scrollable,
+            dom: args.content
+        });
+        this.append(this._containerContent);
+    }
+    // Collapses or expands the panel as needed
+    _reflow() {
+        if (this._suspendReflow) {
+            return;
+        }
+        if (this._reflowTimeout) {
+            cancelAnimationFrame(this._reflowTimeout);
+            this._reflowTimeout = null;
+        }
+        if (this.hidden || !this.collapsible)
+            return;
+        if (this.collapsed && this.collapseHorizontally) {
+            this._containerHeader.style.top = `${-this.headerSize}px`;
+        }
+        else {
+            this._containerHeader.style.top = '';
+        }
+        // we rely on the content width / height and we have to
+        // wait for 1 frame before we can get the final values back
+        this._reflowTimeout = requestAnimationFrame(() => {
+            this._reflowTimeout = null;
+            if (this.collapsed) {
+                // remember size before collapse
+                if (!this._widthBeforeCollapse) {
+                    this._widthBeforeCollapse = this.style.width;
+                }
+                if (!this._heightBeforeCollapse) {
+                    this._heightBeforeCollapse = this.style.height;
+                }
+                if (this._collapseHorizontally) {
+                    this.height = '';
+                    this.width = this.headerSize;
+                }
+                else {
+                    this.height = this.headerSize;
+                }
+                // add collapsed class after getting the width and height
+                // because if we add it before then because of overflow:hidden
+                // we might get inaccurate width/heights.
+                this.class.add(CLASS_COLLAPSED);
+            }
+            else {
+                // remove collapsed class first and the restore width and height
+                // (opposite order of collapsing)
+                this.class.remove(CLASS_COLLAPSED);
+                if (this._collapseHorizontally) {
+                    this.height = '';
+                    if (this._widthBeforeCollapse !== null) {
+                        this.width = this._widthBeforeCollapse;
+                    }
+                }
+                else {
+                    if (this._heightBeforeCollapse !== null) {
+                        this.height = this._heightBeforeCollapse;
+                    }
+                }
+                // reset before collapse vars
+                this._widthBeforeCollapse = null;
+                this._heightBeforeCollapse = null;
+            }
+        });
+    }
+    _onDragEnd(evt) {
+        window.removeEventListener('mouseup', this._onDragEndEvt);
+        window.removeEventListener('mouseleave', this._onDragEndEvt);
+        window.removeEventListener('mousemove', this._onDragMove);
+        if (this._draggedChild === this) {
+            this._draggedChild = null;
+        }
+        this.emit('dragend');
+        // @ts-ignore accessing protected methods
+        if (this.parent && this.parent._onChildDragStart) {
+            // @ts-ignore accessing protected methods
+            this.parent._onChildDragEnd(evt, this);
+        }
+    }
+    /**
+     * Sets whether the Element is collapsible.
+     */
+    set collapsible(value) {
+        if (value === this._collapsible)
+            return;
+        this._collapsible = value;
+        if (value) {
+            this.class.add(CLASS_COLLAPSIBLE);
+        }
+        else {
+            this.class.remove(CLASS_COLLAPSIBLE);
+        }
+        this._reflow();
+        if (this.collapsed) {
+            this.emit(value ? 'collapse' : 'expand');
+        }
+    }
+    /**
+     * Gets whether the Element is collapsible.
+     */
+    get collapsible() {
+        return this._collapsible;
+    }
+    /**
+     * Sets whether the Element should be collapsed.
+     */
+    set collapsed(value) {
+        if (this._collapsed === value)
+            return;
+        this._collapsed = value;
+        this._reflow();
+        if (this.collapsible) {
+            this.emit(value ? 'collapse' : 'expand');
+        }
+    }
+    /**
+     * Gets whether the Element should be collapsed.
+     */
+    get collapsed() {
+        return this._collapsed;
+    }
+    /**
+     * Sets whether the panel can be reordered.
+     */
+    set sortable(value) {
+        if (this._sortable === value)
+            return;
+        this._sortable = value;
+        if (value) {
+            this._iconSort = new Label({
+                class: CLASS_PANEL_SORTABLE_ICON
+            });
+            this._iconSort.dom.addEventListener('mousedown', this._onDragStart);
+            this.header.prepend(this._iconSort);
+        }
+        else if (this._iconSort) {
+            this._iconSort.destroy();
+            this._iconSort = null;
+        }
+    }
+    /**
+     * Gets whether the panel can be reordered.
+     */
+    get sortable() {
+        return this._sortable;
+    }
+    /**
+     * Sets whether the panel can be removed
+     */
+    set removable(value) {
+        if (this.removable === value)
+            return;
+        if (value) {
+            this._btnRemove = new Button({
+                icon: 'E289',
+                class: CLASS_PANEL_REMOVE
+            });
+            this._btnRemove.on('click', this._onClickRemove.bind(this));
+            this.header.append(this._btnRemove);
+        }
+        else {
+            this._btnRemove.destroy();
+            this._btnRemove = null;
+        }
+    }
+    /**
+     * Gets whether the panel can be removed
+     */
+    get removable() {
+        return !!this._btnRemove;
+    }
+    /**
+     * Sets whether the panel collapses horizontally. This would be the case for side panels. Defaults to `false`.
+     */
+    set collapseHorizontally(value) {
+        if (this._collapseHorizontally === value)
+            return;
+        this._collapseHorizontally = value;
+        if (value) {
+            this.class.add(CLASS_PANEL_HORIZONTAL);
+        }
+        else {
+            this.class.remove(CLASS_PANEL_HORIZONTAL);
+        }
+        this._reflow();
+    }
+    /**
+     * Gets whether the panel collapses horizontally.
+     */
+    get collapseHorizontally() {
+        return this._collapseHorizontally;
+    }
+    /**
+     * Gets the content container.
+     */
+    get content() {
+        return this._containerContent;
+    }
+    /**
+     * Gets the header container.
+     */
+    get header() {
+        return this._containerHeader;
+    }
+    /**
+     * Sets the header text of the panel. Defaults to the empty string.
+     */
+    set headerText(value) {
+        this._labelTitle.text = value;
+    }
+    /**
+     * Gets the header text of the panel.
+     */
+    get headerText() {
+        return this._labelTitle.text;
+    }
+    /**
+     * Sets the height of the header in pixels. Defaults to 32.
+     */
+    set headerSize(value) {
+        this._headerSize = value;
+        const style = this._containerHeader.dom.style;
+        style.height = `${Math.max(0, value)}px`;
+        style.lineHeight = style.height;
+        this._reflow();
+    }
+    /**
+     * Gets the height of the header in pixels.
+     */
+    get headerSize() {
+        return this._headerSize;
+    }
+}
+/**
+ * Fired when the panel gets collapsed.
+ *
+ * @event
+ * @example
+ * ```ts
+ * const panel = new Panel();
+ * panel.on('collapse', () => {
+ *     console.log('Panel collapsed');
+ * });
+ * ```
+ */
+Panel.EVENT_COLLAPSE = 'collapse';
+/**
+ * Fired when the panel gets expanded.
+ *
+ * @event
+ * @example
+ * ```ts
+ * const panel = new Panel();
+ * panel.on('expand', () => {
+ *     console.log('Panel expanded');
+ * });
+ * ```
+ */
+Panel.EVENT_EXPAND = 'expand';
+Element.register('panel', Panel);
+
+export { Panel };

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

@@ -0,0 +1,45 @@
+import { Container } from '../Container/index.mjs';
+import { Element } from '../Element/index.mjs';
+
+const CLASS_ROOT = 'pcui-progress';
+const CLASS_INNER = `${CLASS_ROOT}-inner`;
+/**
+ * Represents a bar that can highlight progress of an activity.
+ */
+class Progress extends Container {
+    /**
+     * Creates a new Progress.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args = {}) {
+        super(args);
+        this._inner = new Element({
+            class: CLASS_INNER
+        });
+        this.class.add(CLASS_ROOT);
+        this.append(this._inner);
+        if (args.value !== undefined) {
+            this.value = args.value;
+        }
+    }
+    /**
+     * Sets the value of the progress bar. The range is from 0 to 100.
+     */
+    set value(val) {
+        if (this._value === val)
+            return;
+        this._value = val;
+        this._inner.width = `${this._value}%`;
+        this.emit('change', val);
+    }
+    /**
+     * Gets the value of the progress bar.
+     */
+    get value() {
+        return this._value;
+    }
+}
+Element.register('progress', Progress);
+
+export { Progress };

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

@@ -0,0 +1,113 @@
+import { CLASS_NOT_FLEXIBLE, CLASS_MULTIPLE_VALUES } from '../../class.mjs';
+import { Element } from '../Element/index.mjs';
+
+const CLASS_RADIO_BUTTON = 'pcui-radio-button';
+const CLASS_RADIO_BUTTON_SELECTED = `${CLASS_RADIO_BUTTON}-selected`;
+/**
+ * A radio button element.
+ */
+class RadioButton extends Element {
+    /**
+     * Creates a new RadioButton.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args = {}) {
+        super({ tabIndex: 0, ...args });
+        this._onKeyDown = (evt) => {
+            if (evt.key === 'Escape') {
+                this.blur();
+                return;
+            }
+            if (!this.enabled || this.readOnly)
+                return;
+            if (evt.key === ' ') {
+                evt.stopPropagation();
+                evt.preventDefault();
+                this.value = !this.value;
+            }
+        };
+        this._onFocus = (evt) => {
+            this.emit('focus');
+        };
+        this._onBlur = (evt) => {
+            this.emit('blur');
+        };
+        this.class.add(CLASS_RADIO_BUTTON);
+        this.class.add(CLASS_NOT_FLEXIBLE);
+        this.dom.addEventListener('keydown', this._onKeyDown);
+        this.dom.addEventListener('focus', this._onFocus);
+        this.dom.addEventListener('blur', this._onBlur);
+        this.value = args.value;
+        this._renderChanges = args.renderChanges ?? false;
+    }
+    destroy() {
+        if (this._destroyed)
+            return;
+        this.dom.removeEventListener('keydown', this._onKeyDown);
+        this.dom.removeEventListener('focus', this._onFocus);
+        this.dom.removeEventListener('blur', this._onBlur);
+        super.destroy();
+    }
+    _onClick(evt) {
+        if (this.enabled) {
+            this.focus();
+        }
+        if (this.enabled && !this.readOnly) {
+            this.value = !this.value;
+        }
+        return super._onClick(evt);
+    }
+    _updateValue(value) {
+        this.class.remove(CLASS_MULTIPLE_VALUES);
+        if (value === this.value)
+            return false;
+        this._value = value;
+        if (value) {
+            this.class.add(CLASS_RADIO_BUTTON_SELECTED);
+        }
+        else {
+            this.class.remove(CLASS_RADIO_BUTTON_SELECTED);
+        }
+        if (this.renderChanges) {
+            this.flash();
+        }
+        this.emit('change', value);
+        return true;
+    }
+    focus() {
+        this.dom.focus();
+    }
+    blur() {
+        this.dom.blur();
+    }
+    set value(value) {
+        const changed = this._updateValue(value);
+        if (changed && this._binding) {
+            this._binding.setValue(value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    /* eslint accessor-pairs: 0 */
+    set values(values) {
+        const different = values.some(v => v !== values[0]);
+        if (different) {
+            this._updateValue(null);
+            this.class.add(CLASS_MULTIPLE_VALUES);
+        }
+        else {
+            this._updateValue(values[0]);
+        }
+    }
+    set renderChanges(renderChanges) {
+        this._renderChanges = renderChanges;
+    }
+    get renderChanges() {
+        return this._renderChanges;
+    }
+}
+Element.register('radio', RadioButton, { renderChanges: true });
+
+export { RadioButton };