@fps-games/editor 0.2.0-beta.4 → 0.2.1-beta.2

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

@@ -0,0 +1,366 @@
+import { CLASS_FOCUS, CLASS_MULTIPLE_VALUES } from '../../class.mjs';
+import { Element } from '../Element/index.mjs';
+import { NumericInput } from '../NumericInput/index.mjs';
+
+const CLASS_VECTOR_INPUT = 'pcui-vector-input';
+/**
+ * A vector input. The vector can have 2 to 4 dimensions with each dimension being a {@link NumericInput}.
+ */
+class VectorInput extends Element {
+    /**
+     * Creates a new VectorInput.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args = {}) {
+        const elementArgs = { ...args };
+        // set binding after inputs have been created
+        delete elementArgs.binding;
+        super(elementArgs);
+        this._inputs = [];
+        this._applyingChange = false;
+        this._bindAllInputs = false;
+        this.class.add(CLASS_VECTOR_INPUT);
+        const dimensions = Math.max(2, Math.min(4, args.dimensions ?? 3));
+        for (let i = 0; i < dimensions; i++) {
+            const input = new NumericInput({
+                min: args.min,
+                max: args.max,
+                precision: args.precision ?? 7,
+                step: args.step ?? 1,
+                stepPrecision: args.stepPrecision,
+                renderChanges: args.renderChanges,
+                placeholder: args.placeholder ? (Array.isArray(args.placeholder) ? args.placeholder[i] : args.placeholder) : null
+            });
+            input.on('slider:mousedown', (evt) => {
+                this._bindAllInputs = !!evt.altKey;
+                if (this._bindAllInputs) {
+                    input.focus();
+                    for (let i = 0; i < this._inputs.length; i++) {
+                        this._inputs[i].class.add(CLASS_FOCUS);
+                    }
+                    if (this.binding) {
+                        this.binding.historyCombine = true;
+                    }
+                }
+            });
+            input.on('slider:mouseup', () => {
+                this._onInputChange(input);
+                this._bindAllInputs = false;
+                for (let i = 0; i < this._inputs.length; i++) {
+                    this._inputs[i].class.remove(CLASS_FOCUS);
+                }
+                input.blur();
+                if (this.binding) {
+                    this.binding.historyCombine = false;
+                }
+            });
+            input.on('change', () => {
+                this._onInputChange(input);
+            });
+            input.on('focus', () => {
+                this.emit('focus');
+            });
+            input.on('blur', () => {
+                this.emit('blur');
+            });
+            this.dom.appendChild(input.dom);
+            input.parent = this;
+            this._inputs.push(input);
+        }
+        // set the binding after the inputs have been created
+        // because we rely on them in the overridden setter
+        if (args.binding) {
+            this.binding = args.binding;
+        }
+        if (args.value !== undefined) {
+            this.value = args.value;
+        }
+    }
+    _onInputChange(input) {
+        if (this._applyingChange)
+            return;
+        // check if any of our inputs have the MULTIPLE_VALUES class and if so inherit it for us as well
+        const multipleValues = this._inputs.some(input => input.class.contains(CLASS_MULTIPLE_VALUES));
+        if (multipleValues) {
+            this.class.add(CLASS_MULTIPLE_VALUES);
+        }
+        else {
+            this.class.remove(CLASS_MULTIPLE_VALUES);
+        }
+        if (this._bindAllInputs) {
+            const value = Array(this._inputs.length).fill(input.value);
+            const changed = this._updateValue(value);
+            if (changed && this._binding) {
+                this._binding.setValue(value);
+            }
+        }
+        else {
+            this.emit('change', this.value);
+        }
+    }
+    _updateValue(value) {
+        this.class.remove(CLASS_MULTIPLE_VALUES);
+        if (JSON.stringify(this.value) === JSON.stringify(value))
+            return false;
+        this._applyingChange = true;
+        this._inputs.forEach((input, i) => {
+            // disable binding for each individual input when we use
+            // the 'value' setter for the whole vector value. That is because
+            // we do not want the individual inputs to emit their own binding events
+            // since we are setting the whole vector value here
+            const binding = input.binding;
+            let applyingChange = false;
+            if (binding) {
+                applyingChange = binding.applyingChange;
+                binding.applyingChange = true;
+            }
+            input.value = (value && value[i] !== undefined ? value[i] : null);
+            if (binding) {
+                binding.applyingChange = applyingChange;
+            }
+        });
+        this.emit('change', this.value);
+        this._applyingChange = false;
+        return true;
+    }
+    link(observers, paths) {
+        super.link(observers, paths);
+        observers = Array.isArray(observers) ? observers : [observers];
+        paths = Array.isArray(paths) ? paths : [paths];
+        const useSinglePath = paths.length === 1 || observers.length !== paths.length;
+        if (useSinglePath) {
+            for (let i = 0; i < this._inputs.length; i++) {
+                // link observers to path.i for each dimension
+                this._inputs[i].link(observers, `${paths[0]}.${i}`);
+            }
+        }
+        else {
+            for (let i = 0; i < this._inputs.length; i++) {
+                // link observers to paths[i].i for each dimension
+                this._inputs[i].link(observers, paths.map(path => `${path}.${i}`));
+            }
+        }
+    }
+    unlink() {
+        super.unlink();
+        for (const input of this._inputs) {
+            input.unlink();
+        }
+    }
+    /**
+     * Focuses the first input element.
+     */
+    focus() {
+        this._inputs[0].focus();
+    }
+    /**
+     * Unfocuses (blurs) all input elements.
+     */
+    blur() {
+        for (const input of this._inputs) {
+            input.blur();
+        }
+    }
+    /**
+     * Sets the value of the VectorInput. This should be an array of numbers matching the
+     * dimensions of the vector (e.g. [x, y] for 2D, [x, y, z] for 3D).
+     */
+    set value(value) {
+        if (typeof value === 'string') {
+            try {
+                // try to parse the string
+                value = JSON.parse(value);
+                // if the string could be converted to an array but some of its values aren't numbers
+                // then use a default array also
+                if (Array.isArray(value) && value.some(i => !Number.isFinite(i))) {
+                    throw new Error('VectorInput value set to string which doesn\'t contain an array of numbers');
+                }
+            }
+            catch (e) {
+                console.error(e);
+                value = [];
+            }
+        }
+        if (!Array.isArray(value)) {
+            value = [];
+        }
+        const changed = this._updateValue(value);
+        if (changed && this._binding) {
+            this._binding.setValue(value);
+        }
+    }
+    /**
+     * Gets the value of the VectorInput as an array of numbers.
+     */
+    get value() {
+        return this._inputs.map(input => input.value);
+    }
+    /**
+     * Sets multiple values on the VectorInput. Each value should be an array representing the
+     * vector dimensions. If all values are the same, the VectorInput will display that value.
+     * Otherwise, it will display a "multiple values" state.
+     */
+    /* eslint accessor-pairs: 0 */
+    set values(values) {
+        // create an array for each dimension (e.g. one array for x one for y one for z)
+        values = this._inputs.map((_, i) => values.map((arr) => {
+            return arr ? arr[i] : undefined;
+        }));
+        this._inputs.forEach((input, i) => {
+            input.values = values[i];
+        });
+    }
+    /**
+     * Sets the Binding object for the VectorInput. The binding is cloned for each input.
+     */
+    set binding(value) {
+        super.binding = value;
+        for (const input of this._inputs) {
+            input.binding = value ? value.clone() : null;
+        }
+    }
+    /**
+     * Gets the Binding object for the VectorInput.
+     */
+    get binding() {
+        return super.binding;
+    }
+    /**
+     * Sets the placeholder text for all inputs. Can be a single string applied to all inputs,
+     * or an array of strings for each input.
+     */
+    set placeholder(value) {
+        for (let i = 0; i < this._inputs.length; i++) {
+            this._inputs[i].placeholder = (Array.isArray(value) ? value[i] : value) || null;
+        }
+    }
+    /**
+     * Gets the placeholder text of all inputs as an array.
+     */
+    get placeholder() {
+        return this._inputs.map(input => input.placeholder);
+    }
+    /**
+     * Gets the array of NumericInput elements owned by this vector.
+     */
+    get inputs() {
+        return this._inputs.slice();
+    }
+    /**
+     * Sets whether inputs should flash when their values change.
+     */
+    set renderChanges(value) {
+        for (const input of this._inputs) {
+            input.renderChanges = value;
+        }
+    }
+    /**
+     * Gets whether inputs should flash when their values change.
+     */
+    get renderChanges() {
+        return this._inputs[0].renderChanges;
+    }
+    /**
+     * Sets the minimum value accepted by all inputs of the vector.
+     */
+    set min(value) {
+        for (const input of this._inputs) {
+            input.min = value;
+        }
+    }
+    /**
+     * Gets the minimum value accepted by all inputs of the vector.
+     */
+    get min() {
+        return this._inputs[0].min;
+    }
+    /**
+     * Sets the maximum value accepted by all inputs of the vector.
+     */
+    set max(value) {
+        for (const input of this._inputs) {
+            input.max = value;
+        }
+    }
+    /**
+     * Gets the maximum value accepted by all inputs of the vector.
+     */
+    get max() {
+        return this._inputs[0].max;
+    }
+    /**
+     * Sets the maximum number of decimal places supported by all inputs of the vector.
+     */
+    set precision(value) {
+        for (const input of this._inputs) {
+            input.precision = value;
+        }
+    }
+    /**
+     * Gets the maximum number of decimal places supported by all inputs of the vector.
+     */
+    get precision() {
+        return this._inputs[0].precision;
+    }
+    /**
+     * Sets the amount that the value will be increased or decreased when using the arrow keys and
+     * the slider input for all inputs of the vector.
+     */
+    set step(value) {
+        for (const input of this._inputs) {
+            input.step = value;
+        }
+    }
+    /**
+     * Gets the amount that the value will be increased or decreased when using the arrow keys and
+     * the slider input for all inputs of the vector.
+     */
+    get step() {
+        return this._inputs[0].step;
+    }
+}
+/**
+ * Fired when the value of the VectorInput changes.
+ *
+ * @event
+ * @example
+ * ```ts
+ * const vectorInput = new VectorInput({ dimensions: 3 });
+ * vectorInput.on('change', (value: number[]) => {
+ *     console.log('Value changed to:', value);
+ * });
+ * ```
+ */
+VectorInput.EVENT_CHANGE = 'change';
+/**
+ * Fired when the VectorInput receives focus.
+ *
+ * @event
+ * @example
+ * ```ts
+ * const vectorInput = new VectorInput();
+ * vectorInput.on('focus', () => {
+ *     console.log('VectorInput focused');
+ * });
+ * ```
+ */
+VectorInput.EVENT_FOCUS = 'focus';
+/**
+ * Fired when the VectorInput loses focus.
+ *
+ * @event
+ * @example
+ * ```ts
+ * const vectorInput = new VectorInput();
+ * vectorInput.on('blur', () => {
+ *     console.log('VectorInput blurred');
+ * });
+ * ```
+ */
+VectorInput.EVENT_BLUR = 'blur';
+Element.register('vec2', VectorInput, { dimensions: 2, renderChanges: true });
+Element.register('vec3', VectorInput, { dimensions: 3, renderChanges: true });
+Element.register('vec4', VectorInput, { dimensions: 4, renderChanges: true });
+
+export { VectorInput };

package/node_modules/@playcanvas/pcui/react/dist/module/src/helpers/search.mjs

@@ -0,0 +1,194 @@
+// calculate, how many string `a`
+// requires edits, to become string `b`
+const searchStringEditDistance = (a, b) => {
+    // Levenshtein distance
+    // https://en.wikibooks.org/wiki/Algorithm_Implementation/Strings/Levenshtein_distance#JavaScript
+    if (a.length === 0)
+        return b.length;
+    if (b.length === 0)
+        return a.length;
+    if (a === b)
+        return 0;
+    const matrix = [];
+    for (let i = 0; i <= b.length; i++) {
+        matrix[i] = [i];
+    }
+    for (let j = 0; j <= a.length; j++) {
+        matrix[0][j] = j;
+    }
+    for (let i = 1; i <= b.length; i++) {
+        for (let j = 1; j <= a.length; j++) {
+            if (b.charAt(i - 1) === a.charAt(j - 1)) {
+                matrix[i][j] = matrix[i - 1][j - 1];
+            }
+            else {
+                matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, Math.min(matrix[i][j - 1] + 1, matrix[i - 1][j] + 1));
+            }
+        }
+    }
+    return matrix[b.length][a.length];
+};
+// calculate, how many characters string `b`
+// contains of a string `a`
+const searchCharsContains = (a, b) => {
+    if (a === b) {
+        return a.length;
+    }
+    let contains = 0;
+    const ind = new Set();
+    for (let i = 0; i < b.length; i++) {
+        ind.add(b.charAt(i));
+    }
+    for (let i = 0; i < a.length; i++) {
+        if (ind.has(a.charAt(i))) {
+            contains++;
+        }
+    }
+    return contains;
+};
+// tokenize string into array of tokens
+const searchStringTokenize = (name) => {
+    const tokens = [];
+    // camelCase
+    // upperCASE123
+    const string = name.replace(/([^A-Z])([A-Z][^A-Z])/g, '$1 $2').replace(/([A-Z0-9]{2,})/g, ' $1');
+    // space notation
+    // dash-notation
+    // underscore_notation
+    const parts = string.split(/([\s\-_])/);
+    // filter valid tokens
+    for (let i = 0; i < parts.length; i++) {
+        parts[i] = parts[i].toLowerCase().trim();
+        if (parts[i] && parts[i] !== '-' && parts[i] !== '_') {
+            tokens.push(parts[i]);
+        }
+    }
+    return tokens;
+};
+const _searchItems = (items, search, args) => {
+    const results = [];
+    for (const item of items) {
+        // direct hit
+        if (item.subFull !== Infinity) {
+            results.push(item);
+            if (item.edits === Infinity) {
+                item.edits = 0;
+            }
+            if (item.sub === Infinity) {
+                item.sub = item.subFull;
+            }
+            continue;
+        }
+        else if (item.name === search || item.name.indexOf(search) === 0) {
+            results.push(item);
+            if (item.edits === Infinity) {
+                item.edits = 0;
+            }
+            if (item.sub === Infinity) {
+                item.sub = 0;
+            }
+            continue;
+        }
+        // check if name contains enough of search characters
+        const contains = searchCharsContains(search, item.name);
+        if (contains / search.length < args.containsCharsTolerance) {
+            continue;
+        }
+        let editsCandidate = Infinity;
+        let subCandidate = Infinity;
+        // for each token
+        for (let t = 0; t < item.tokens.length; t++) {
+            // direct token match
+            if (item.tokens[t] === search) {
+                editsCandidate = 0;
+                subCandidate = t;
+                break;
+            }
+            const edits = searchStringEditDistance(search, item.tokens[t]);
+            if ((subCandidate === Infinity || edits < editsCandidate) && item.tokens[t].indexOf(search) !== -1) {
+                // search is a substring of a token
+                subCandidate = t;
+                editsCandidate = edits;
+                continue;
+            }
+            else if (subCandidate === Infinity && edits < editsCandidate) {
+                // new edits candidate, not a substring of a token
+                if ((edits / Math.max(search.length, item.tokens[t].length)) <= args.editsDistanceTolerance) {
+                    // check if edits tolerance is satisfied
+                    editsCandidate = edits;
+                }
+            }
+        }
+        // no match candidate
+        if (editsCandidate === Infinity) {
+            continue;
+        }
+        // add new result
+        results.push(item);
+        item.edits = item.edits === Infinity ? editsCandidate : item.edits + editsCandidate;
+        item.sub = item.sub === Infinity ? subCandidate : item.sub + subCandidate;
+    }
+    return results;
+};
+/**
+ * Perform search through items.
+ *
+ * @param items - Array of objects to search through.
+ * @param searchKey - The property name to search within each item.
+ * @param search - String to search for.
+ * @param args - Search arguments.
+ * @returns Array of found items.
+ * @example
+ * const items = [
+ *     { text: 'Item 1', id: 1 },
+ *     { text: 'Item 2', id: 2 }
+ * ];
+ * const results = searchItems(items, 'text', 'item');
+ */
+const searchItems = (items, searchKey, search = '', args = {}) => {
+    search = search.toLowerCase().trim();
+    if (!search)
+        return [];
+    const searchTokens = searchStringTokenize(search);
+    if (!searchTokens.length)
+        return [];
+    args.containsCharsTolerance = args.containsCharsTolerance ?? 0.5;
+    args.editsDistanceTolerance = args.editsDistanceTolerance ?? 0.5;
+    let records = items.map((item) => {
+        const subInd = item[searchKey].toLowerCase().trim().indexOf(search);
+        return {
+            name: item[searchKey],
+            item: item,
+            tokens: searchStringTokenize(item[searchKey]),
+            edits: Infinity,
+            subFull: (subInd !== -1) ? subInd : Infinity,
+            sub: Infinity
+        };
+    });
+    // search each token
+    for (let i = 0; i < searchTokens.length; i++) {
+        records = _searchItems(records, searchTokens[i], args);
+    }
+    // sort result first by substring? then by edits number
+    records.sort((a, b) => {
+        if (a.subFull !== b.subFull) {
+            return a.subFull - b.subFull;
+        }
+        else if (a.sub !== b.sub) {
+            return a.sub - b.sub;
+        }
+        else if (a.edits !== b.edits) {
+            return a.edits - b.edits;
+        }
+        return a.name.length - b.name.length;
+    });
+    // return only items without match information
+    let recordItems = records.map((record) => record.item);
+    // limit number of results
+    if (args.hasOwnProperty('limitResults') && recordItems.length > args.limitResults) {
+        recordItems = recordItems.slice(0, args.limitResults);
+    }
+    return recordItems;
+};
+
+export { searchItems };

package/node_modules/@playcanvas/pcui/react/dist/module/src/helpers/utils.mjs

@@ -0,0 +1,43 @@
+function deepCopy(data) {
+    if (data == null || typeof (data) !== 'object') {
+        return data;
+    }
+    if (data instanceof Array) {
+        const arr = [];
+        for (let i = 0; i < data.length; i++) {
+            arr[i] = deepCopy(data[i]);
+        }
+        return arr;
+    }
+    const obj = {};
+    for (const key in data) {
+        if (data.hasOwnProperty(key)) {
+            obj[key] = deepCopy(data[key]);
+        }
+    }
+    return obj;
+}
+function arrayEquals(lhs, rhs) {
+    if (!lhs) {
+        return false;
+    }
+    if (!rhs) {
+        return false;
+    }
+    if (lhs.length !== rhs.length) {
+        return false;
+    }
+    for (let i = 0, l = lhs.length; i < l; i++) {
+        if (lhs[i] instanceof Array && rhs[i] instanceof Array) {
+            if (!lhs[i].equals(rhs[i])) {
+                return false;
+            }
+        }
+        else if (lhs[i] !== rhs[i]) {
+            return false;
+        }
+    }
+    return true;
+}
+
+export { arrayEquals, deepCopy };

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

@@ -0,0 +1,39 @@
+export { ArrayInput } from './components/ArrayInput/component.mjs';
+export { BindingBase } from './binding/BindingBase/index.mjs';
+export { BindingElementToObservers } from './binding/BindingElementToObservers/index.mjs';
+export { BindingObserversToElement } from './binding/BindingObserversToElement/index.mjs';
+export { BindingTwoWay } from './binding/BindingTwoWay/index.mjs';
+export { BooleanInput } from './components/BooleanInput/component.mjs';
+export { Button } from './components/Button/component.mjs';
+export { Canvas } from './components/Canvas/component.mjs';
+export { Code } from './components/Code/component.mjs';
+export { ColorPicker } from './components/ColorPicker/component.mjs';
+export { Container } from './components/Container/component.mjs';
+export { Divider } from './components/Divider/component.mjs';
+export { Element } from './components/Element/component.mjs';
+export { GradientPicker } from './components/GradientPicker/component.mjs';
+export { GridView } from './components/GridView/component.mjs';
+export { GridViewItem } from './components/GridViewItem/component.mjs';
+export { InfoBox } from './components/InfoBox/component.mjs';
+export { Label } from './components/Label/component.mjs';
+export { LabelGroup } from './components/LabelGroup/component.mjs';
+export { Menu } from './components/Menu/component.mjs';
+export { NumericInput } from './components/NumericInput/component.mjs';
+export { Overlay } from './components/Overlay/component.mjs';
+export { Panel } from './components/Panel/component.mjs';
+export { Progress } from './components/Progress/component.mjs';
+export { RadioButton } from './components/RadioButton/component.mjs';
+export { SelectInput } from './components/SelectInput/component.mjs';
+export { SliderInput } from './components/SliderInput/component.mjs';
+export { Spinner } from './components/Spinner/component.mjs';
+export { TextAreaInput } from './components/TextAreaInput/component.mjs';
+export { TextInput } from './components/TextInput/component.mjs';
+export { TreeView } from './components/TreeView/component.mjs';
+export { TreeViewItem } from './components/TreeViewItem/component.mjs';
+export { VectorInput } from './components/VectorInput/component.mjs';
+
+// these strings are set by the build script
+const version = '6.1.4';
+const revision = '89cf9a3';
+
+export { revision, version };

package/node_modules/@playcanvas/pcui/react/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "pcui-react",
+  "version": "1.0.0",
+  "author": "PlayCanvas <support@playcanvas.com>",
+  "homepage": "https://playcanvas.github.io/pcui",
+  "description": "PCUI components for react",
+  "private": true,
+  "main": "dist/module/src/index.mjs",
+  "types": "types/index.d.ts",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/playcanvas/pcui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/playcanvas/pcui.git"
+  }
+}

package/node_modules/@playcanvas/pcui/react/types/Math/color-value.d.ts

@@ -0,0 +1,3 @@
+declare function _rgb2hsv(rgb: Array<number>): number[];
+declare function _hsv2rgb(hsv: number[]): number[];
+export { _hsv2rgb, _rgb2hsv };