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

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

@@ -0,0 +1,12 @@
+import { Element } from '../Element/component.mjs';
+import { SliderInput as SliderInput$1 } from './index.mjs';
+
+/**
+ * The SliderInput shows a NumericInput and a slider widget next to it. It acts as a proxy of the
+ * NumericInput.
+ */
+class SliderInput extends Element {
+}
+SliderInput.ctor = SliderInput$1;
+
+export { SliderInput };

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

@@ -0,0 +1,333 @@
+import { CLASS_MULTIPLE_VALUES } from '../../class.mjs';
+import { Element } from '../Element/index.mjs';
+import { NumericInput } from '../NumericInput/index.mjs';
+
+const CLASS_SLIDER = 'pcui-slider';
+const CLASS_SLIDER_CONTAINER = `${CLASS_SLIDER}-container`;
+const CLASS_SLIDER_BAR = `${CLASS_SLIDER}-bar`;
+const CLASS_SLIDER_HANDLE = `${CLASS_SLIDER}-handle`;
+const CLASS_SLIDER_ACTIVE = `${CLASS_SLIDER}-active`;
+const IS_CHROME = /Chrome\//.test(globalThis.navigator?.userAgent);
+/**
+ * The SliderInput shows a NumericInput and a slider widget next to it. It acts as a proxy of the
+ * NumericInput.
+ */
+class SliderInput extends Element {
+    /**
+     * Creates a new SliderInput.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args = {}) {
+        super(args);
+        this._historyCombine = false;
+        this._historyPostfix = null;
+        this._cursorHandleOffset = 0;
+        this._pointerId = null;
+        this._onPointerDown = (evt) => {
+            if ((evt.pointerType === 'mouse' && evt.button !== 0) || !this.enabled || this.readOnly || this._pointerId !== null)
+                return;
+            evt.stopPropagation();
+            this._domSlider.setPointerCapture(evt.pointerId);
+            this._pointerId = evt.pointerId;
+            this._onSlideStart(evt.pageX);
+        };
+        this._onPointerMove = (evt) => {
+            if (evt.pointerId !== this._pointerId)
+                return;
+            evt.stopPropagation();
+            evt.preventDefault();
+            this._onSlideMove(evt.pageX);
+        };
+        this._onPointerUp = (evt) => {
+            if (evt.pointerId !== this._pointerId || this._pointerId === null)
+                return;
+            evt.stopPropagation();
+            this._domSlider.releasePointerCapture(evt.pointerId);
+            this._onSlideEnd(evt.pageX);
+            this._pointerId = null;
+        };
+        this._onKeyDown = (evt) => {
+            if (evt.key === 'Escape') {
+                this.blur();
+                return;
+            }
+            if (!this.enabled || this.readOnly)
+                return;
+            // move slider with left / right arrow keys
+            if (evt.key !== 'ArrowLeft' && evt.key !== 'ArrowRight')
+                return;
+            evt.stopPropagation();
+            evt.preventDefault();
+            let x = evt.key === 'ArrowLeft' ? -1 : 1;
+            if (evt.shiftKey) {
+                x *= 10;
+            }
+            this.value += x * this.step;
+        };
+        this.class.add(CLASS_SLIDER);
+        const numericInput = new NumericInput({
+            allowNull: args.allowNull,
+            hideSlider: true,
+            min: args.min,
+            max: args.max,
+            keyChange: args.keyChange,
+            placeholder: args.placeholder,
+            precision: args.precision ?? 2,
+            renderChanges: args.renderChanges,
+            step: args.step
+        });
+        // propagate change event
+        numericInput.on('change', (value) => {
+            this._onValueChange(value);
+        });
+        // propagate focus / blur events
+        numericInput.on('focus', () => {
+            this.emit('focus');
+        });
+        numericInput.on('blur', () => {
+            this.emit('blur');
+        });
+        numericInput.parent = this;
+        this.dom.appendChild(numericInput.dom);
+        this._numericInput = numericInput;
+        this._sliderMin = args.sliderMin ?? args.min ?? 0;
+        this._sliderMax = args.sliderMax ?? args.max ?? 1;
+        this._domSlider = document.createElement('div');
+        this._domSlider.classList.add(CLASS_SLIDER_CONTAINER);
+        this.dom.appendChild(this._domSlider);
+        this._domBar = document.createElement('div');
+        this._domBar.classList.add(CLASS_SLIDER_BAR);
+        this._domBar.ui = this;
+        this._domSlider.appendChild(this._domBar);
+        this._domHandle = document.createElement('div');
+        this._domHandle.ui = this;
+        this._domHandle.tabIndex = 0;
+        this._domHandle.classList.add(CLASS_SLIDER_HANDLE);
+        this._domBar.appendChild(this._domHandle);
+        this._domSlider.addEventListener('pointerdown', this._onPointerDown);
+        this._domHandle.addEventListener('keydown', this._onKeyDown);
+        if (args.value !== undefined) {
+            this.value = args.value;
+        }
+        if (args.values !== undefined) {
+            this.values = args.values;
+        }
+        // update the handle in case a 0 value has been
+        // passed through the constructor
+        if (this.value === 0) {
+            this._updateHandle(0);
+        }
+    }
+    destroy() {
+        if (this._destroyed)
+            return;
+        this._domSlider.removeEventListener('pointerdown', this._onPointerDown);
+        this._domHandle.removeEventListener('keydown', this._onKeyDown);
+        super.destroy();
+    }
+    _updateHandle(value) {
+        const left = Math.max(0, Math.min(1, ((value || 0) - this._sliderMin) / (this._sliderMax - this._sliderMin))) * 100;
+        const handleWidth = this._domHandle.getBoundingClientRect().width;
+        this._domHandle.style.left = `calc(${left}% + ${handleWidth / 2}px)`;
+    }
+    _onValueChange(value) {
+        this._updateHandle(value);
+        if (!this._suppressChange) {
+            this.emit('change', value);
+        }
+        if (this._binding) {
+            this._binding.setValue(value);
+        }
+    }
+    // Calculates the distance in pixels between
+    // the cursor x and the middle of the handle.
+    // If the cursor is not on the handle sets the offset to 0
+    _calculateCursorHandleOffset(pageX) {
+        // not sure why but the left side needs a margin of a couple of pixels
+        // to properly determine if the cursor is on the handle (in Chrome)
+        const margin = IS_CHROME ? 2 : 0;
+        const rect = this._domHandle.getBoundingClientRect();
+        const left = rect.left - margin;
+        const right = rect.right;
+        if (pageX >= left && pageX <= right) {
+            this._cursorHandleOffset = pageX - (left + (right - left) / 2);
+        }
+        else {
+            this._cursorHandleOffset = 0;
+        }
+        return this._cursorHandleOffset;
+    }
+    _onSlideStart(pageX) {
+        this._domHandle.focus();
+        this._domSlider.addEventListener('pointermove', this._onPointerMove);
+        this._domSlider.addEventListener('pointerup', this._onPointerUp);
+        this.class.add(CLASS_SLIDER_ACTIVE);
+        // calculate the cursor - handle offset. If there is
+        // an offset that means the cursor is on the handle so
+        // do not move the handle until the cursor moves.
+        if (!this._calculateCursorHandleOffset(pageX)) {
+            this._onSlideMove(pageX);
+        }
+        if (this.binding) {
+            this._historyCombine = this.binding.historyCombine;
+            this._historyPostfix = this.binding.historyPostfix;
+            this.binding.historyCombine = true;
+            this.binding.historyPostfix = `(${Date.now()})`;
+        }
+    }
+    _onSlideMove(pageX) {
+        const rect = this._domBar.getBoundingClientRect();
+        // reduce pageX by the initial cursor - handle offset
+        pageX -= this._cursorHandleOffset;
+        const x = Math.max(0, Math.min(1, (pageX - rect.left) / rect.width));
+        const range = this._sliderMax - this._sliderMin;
+        let value = (x * range) + this._sliderMin;
+        value = parseFloat(value.toFixed(this.precision));
+        this.value = value;
+    }
+    _onSlideEnd(pageX) {
+        // when slide ends only move the handle if the cursor is no longer
+        // on the handle
+        if (!this._calculateCursorHandleOffset(pageX)) {
+            this._onSlideMove(pageX);
+        }
+        this.class.remove(CLASS_SLIDER_ACTIVE);
+        this._domSlider.removeEventListener('pointermove', this._onPointerMove);
+        this._domSlider.removeEventListener('pointerup', this._onPointerUp);
+        if (this.binding) {
+            this.binding.historyCombine = this._historyCombine;
+            this.binding.historyPostfix = this._historyPostfix;
+            this._historyCombine = false;
+            this._historyPostfix = null;
+        }
+    }
+    focus() {
+        this._numericInput.focus();
+    }
+    blur() {
+        this._domHandle.blur();
+        this._numericInput.blur();
+    }
+    /**
+     * Sets the minimum value that the slider field can take.
+     */
+    set sliderMin(value) {
+        if (this._sliderMin === value)
+            return;
+        this._sliderMin = value;
+        this._updateHandle(this.value);
+    }
+    /**
+     * Gets the minimum value that the slider field can take.
+     */
+    get sliderMin() {
+        return this._sliderMin;
+    }
+    /**
+     * Sets the maximum value that the slider field can take.
+     */
+    set sliderMax(value) {
+        if (this._sliderMax === value)
+            return;
+        this._sliderMax = value;
+        this._updateHandle(this.value);
+    }
+    /**
+     * Gets the maximum value that the slider field can take.
+     */
+    get sliderMax() {
+        return this._sliderMax;
+    }
+    set value(value) {
+        this._numericInput.value = value;
+        if (this._numericInput.class.contains(CLASS_MULTIPLE_VALUES)) {
+            this.class.add(CLASS_MULTIPLE_VALUES);
+        }
+        else {
+            this.class.remove(CLASS_MULTIPLE_VALUES);
+        }
+    }
+    get value() {
+        return this._numericInput.value;
+    }
+    /* eslint accessor-pairs: 0 */
+    set values(values) {
+        this._numericInput.values = values;
+        if (this._numericInput.class.contains(CLASS_MULTIPLE_VALUES)) {
+            this.class.add(CLASS_MULTIPLE_VALUES);
+        }
+        else {
+            this.class.remove(CLASS_MULTIPLE_VALUES);
+        }
+    }
+    set renderChanges(value) {
+        this._numericInput.renderChanges = value;
+    }
+    get renderChanges() {
+        return this._numericInput.renderChanges;
+    }
+    /**
+     * Sets the minimum value that the numeric input field can take.
+     */
+    set min(value) {
+        this._numericInput.min = value;
+    }
+    /**
+     * Gets the minimum value that the numeric input field can take.
+     */
+    get min() {
+        return this._numericInput.min;
+    }
+    /**
+     * Sets the maximum value that the numeric input field can take.
+     */
+    set max(value) {
+        this._numericInput.max = value;
+    }
+    /**
+     * Gets the maximum value that the numeric input field can take.
+     */
+    get max() {
+        return this._numericInput.max;
+    }
+    /**
+     * Sets the amount that the value will be increased or decreased when using the arrow keys. Holding Shift will use 10x the step.
+     */
+    set step(value) {
+        this._numericInput.step = value;
+    }
+    /**
+     * Gets the amount that the value will be increased or decreased when using the arrow keys.
+     */
+    get step() {
+        return this._numericInput.step;
+    }
+    /**
+     * Sets the maximum number of decimals a value can take.
+     */
+    set precision(value) {
+        this._numericInput.precision = value;
+    }
+    /**
+     * Gets the maximum number of decimals a value can take.
+     */
+    get precision() {
+        return this._numericInput.precision;
+    }
+    set keyChange(value) {
+        this._numericInput.keyChange = value;
+    }
+    get keyChange() {
+        return this._numericInput.keyChange;
+    }
+    set placeholder(value) {
+        this._numericInput.placeholder = value;
+    }
+    get placeholder() {
+        return this._numericInput.placeholder;
+    }
+}
+Element.register('slider', SliderInput, { renderChanges: true });
+
+export { SliderInput };

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

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

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

@@ -0,0 +1,34 @@
+import { Element } from '../Element/index.mjs';
+
+const CLASS_ROOT = 'pcui-spinner';
+function createSmallThick(size, dom) {
+    const spinner = dom || document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    spinner.classList.add('spin');
+    spinner.setAttribute('width', size);
+    spinner.setAttribute('height', size);
+    spinner.setAttribute('viewBox', '0 0 14 14');
+    spinner.setAttribute('fill', 'none');
+    spinner.innerHTML = '<path d="M7 14C3.13871 14 0 10.8613 0 7C0 3.13871 3.13871 0 7 0C10.8613 0 14 3.13871 14 7C14 10.8613 10.8613 14 7 14ZM7 2.25806C4.38064 2.25806 2.25806 4.38064 2.25806 7C2.25806 9.61935 4.38064 11.7419 7 11.7419C9.61935 11.7419 11.7419 9.61935 11.7419 7C11.7419 4.38064 9.61935 2.25806 7 2.25806Z" fill="#773417"/><path class="pcui-spinner-highlight" d="M7 14V11.7419C9.61935 11.7419 11.7419 9.61935 11.7419 7H14C14 10.8613 10.8613 14 7 14Z" fill="#FF6600"/>';
+    return spinner;
+}
+/**
+ * Represents a spinning icon.
+ */
+class Spinner extends Element {
+    /**
+     * Creates a new Spinner.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args = {}) {
+        if ((args.type ?? 'small-thick') === Spinner.TYPE_SMALL_THICK) {
+            const dom = createSmallThick(args.size ?? 12, args.dom);
+            args = { ...args, dom };
+        }
+        super(args);
+        this.class.add(CLASS_ROOT);
+    }
+}
+Spinner.TYPE_SMALL_THICK = 'small-thick';
+
+export { Spinner };

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

@@ -0,0 +1,11 @@
+import { Element } from '../Element/component.mjs';
+import { TextAreaInput as TextAreaInput$1 } from './index.mjs';
+
+/**
+ * The TextAreaInput wraps a textarea element. It has the same interface as TextInput.
+ */
+class TextAreaInput extends Element {
+}
+TextAreaInput.ctor = TextAreaInput$1;
+
+export { TextAreaInput };

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

@@ -0,0 +1,50 @@
+import { Element } from '../Element/index.mjs';
+import { TextInput } from '../TextInput/index.mjs';
+
+const CLASS_TEXT_AREA_INPUT = 'pcui-text-area-input';
+const CLASS_TEXT_AREA_INPUT_RESIZABLE = `${CLASS_TEXT_AREA_INPUT}-resizable`;
+const CLASS_TEXT_AREA_INPUT_RESIZABLE_NONE = `${CLASS_TEXT_AREA_INPUT_RESIZABLE}-none`;
+const CLASS_TEXT_AREA_INPUT_RESIZABLE_BOTH = `${CLASS_TEXT_AREA_INPUT_RESIZABLE}-both`;
+const CLASS_TEXT_AREA_INPUT_RESIZABLE_HORIZONTAL = `${CLASS_TEXT_AREA_INPUT_RESIZABLE}-horizontal`;
+const CLASS_TEXT_AREA_INPUT_RESIZABLE_VERTICAL = `${CLASS_TEXT_AREA_INPUT_RESIZABLE}-vertical`;
+/**
+ * The TextAreaInput wraps a textarea element. It has the same interface as {@link TextInput}.
+ */
+class TextAreaInput extends TextInput {
+    /**
+     * Creates a new TextAreaInput.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args = {}) {
+        args = Object.assign({
+            input: document.createElement('textarea')
+        }, args);
+        super(args);
+        this.class.add(CLASS_TEXT_AREA_INPUT);
+        switch (args.resizable) {
+            case 'both':
+                this.class.add(CLASS_TEXT_AREA_INPUT_RESIZABLE_BOTH);
+                break;
+            case 'horizontal':
+                this.class.add(CLASS_TEXT_AREA_INPUT_RESIZABLE_HORIZONTAL);
+                break;
+            case 'vertical':
+                this.class.add(CLASS_TEXT_AREA_INPUT_RESIZABLE_VERTICAL);
+                break;
+            case 'none':
+            default:
+                this.class.add(CLASS_TEXT_AREA_INPUT_RESIZABLE_NONE);
+                break;
+        }
+    }
+    _onInputKeyDown(evt) {
+        if ((evt.key === 'Escape' && this.blurOnEscape) || (evt.key === 'Enter' && this.blurOnEnter && !evt.shiftKey)) {
+            this._domInput.blur();
+        }
+        this.emit('keydown', evt);
+    }
+}
+Element.register('text', TextAreaInput, { renderChanges: true });
+
+export { TextAreaInput };

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

@@ -0,0 +1,23 @@
+import { Element } from '../Element/component.mjs';
+import { TextInput as TextInput$1 } from './index.mjs';
+
+/**
+ * The TextInput is an input element of type text.
+ */
+class TextInput extends Element {
+    constructor(props = {}) {
+        super(props);
+        if (props.onValidate) {
+            this.onValidate = props.onValidate;
+        }
+        this.onAttach = this.onAttachFn.bind(this);
+    }
+    onAttachFn() {
+        if (this.onValidate) {
+            this.element.onValidate = this.onValidate;
+        }
+    }
+}
+TextInput.ctor = TextInput$1;
+
+export { TextInput };

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

@@ -0,0 +1,98 @@
+import { CLASS_MULTIPLE_VALUES } from '../../class.mjs';
+import { Element } from '../Element/index.mjs';
+import { InputElement } from '../InputElement/index.mjs';
+
+const CLASS_TEXT_INPUT = 'pcui-text-input';
+/**
+ * The TextInput is an input element of type text.
+ */
+class TextInput extends InputElement {
+    /**
+     * Creates a new TextInput.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args = {}) {
+        super(args);
+        this.class.add(CLASS_TEXT_INPUT);
+        if (args.onValidate) {
+            this.onValidate = args.onValidate;
+        }
+    }
+    _onInputChange(evt) {
+        if (this._suspendInputChangeEvt)
+            return;
+        if (this.onValidate) {
+            const error = !this.onValidate(this.value);
+            this.error = error;
+            if (error) {
+                return;
+            }
+        }
+        else {
+            this.error = false;
+        }
+        this.emit('change', this.value);
+        if (this._binding) {
+            this._binding.setValue(this.value);
+        }
+    }
+    _updateValue(value) {
+        this.class.remove(CLASS_MULTIPLE_VALUES);
+        if (value && typeof (value) === 'object') {
+            if (Array.isArray(value)) {
+                let isObject = false;
+                for (let i = 0; i < value.length; i++) {
+                    if (value[i] && typeof value[i] === 'object') {
+                        isObject = true;
+                        break;
+                    }
+                }
+                value = isObject ? '[Not available]' : value.map((val) => {
+                    return val === null ? 'null' : val;
+                }).join(',');
+            }
+            else {
+                value = '[Not available]';
+            }
+        }
+        if (value === this.value)
+            return false;
+        this._suspendInputChangeEvt = true;
+        this._domInput.value = (value === null || value === undefined) ? '' : String(value);
+        this._suspendInputChangeEvt = false;
+        this.emit('change', value);
+        return true;
+    }
+    set value(value) {
+        const changed = this._updateValue(value);
+        if (changed) {
+            // reset error
+            this.error = false;
+        }
+        if (changed && this._binding) {
+            this._binding.setValue(value);
+        }
+    }
+    get value() {
+        return this._domInput.value;
+    }
+    /**
+     * Sets multiple values on the input. If all values are the same, the input will display that
+     * value. Otherwise, it will be empty and display a "multiple values" state.
+     */
+    /* 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]);
+        }
+    }
+}
+Element.register('string', TextInput, { renderChanges: true });
+
+export { TextInput };

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Element } from '../Element/component.mjs';
+import { TreeViewItem } from '../TreeViewItem/index.mjs';
+import { TreeView as TreeView$1 } from './index.mjs';
+
+/**
+ * A container that can show a TreeView like a hierarchy. The TreeView contains
+ * TreeViewItems.
+ */
+class TreeView extends Element {
+    constructor(props) {
+        super(props);
+        this.element = new TreeView$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 TreeViewItem({ text: child.props.text, icon: child.props.icon, open: false });
+            if (child.props.onSelect) {
+                childElement.on('select', child.props.onSelect);
+            }
+            if (child.props.onDeselect) {
+                childElement.on('deselect', child.props.onDeselect);
+            }
+            element.append(childElement);
+            this.loadChildren(child.props.children, childElement);
+        });
+    }
+    componentDidUpdate() {
+        this.parentElement.removeChild(this.element.dom);
+        this.element = new TreeView$1({ ...this.props });
+        this.loadChildren(this.props.children, this.element);
+        this.parentElement.appendChild(this.element.dom);
+    }
+    parentElementRendered(element) {
+        if (!element)
+            return;
+        this.parentElement = element;
+        this.parentElement.appendChild(this.element.dom);
+    }
+    render() {
+        return React.createElement("div", { ref: this.parentElementRendered.bind(this) });
+    }
+}
+TreeView.ctor = TreeView$1;
+
+export { TreeView };