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

package/node_modules/@playcanvas/pcui/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2011-2026 PlayCanvas Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/node_modules/@playcanvas/pcui/README.md

@@ -0,0 +1,164 @@
+# PlayCanvas UI (PCUI) - User Interface Component Library for the Web
+
+[![NPM Version](https://img.shields.io/npm/v/@playcanvas/pcui)](https://www.npmjs.com/package/@playcanvas/pcui)
+[![NPM Downloads](https://img.shields.io/npm/dw/@playcanvas/pcui)](https://npmtrends.com/@playcanvas/pcui)
+[![License](https://img.shields.io/npm/l/@playcanvas/pcui)](https://github.com/playcanvas/pcui/blob/main/LICENSE)
+[![Discord](https://img.shields.io/badge/Discord-5865F2?style=flat&logo=discord&logoColor=white&color=black)](https://discord.gg/RSaMRzg)
+[![Reddit](https://img.shields.io/badge/Reddit-FF4500?style=flat&logo=reddit&logoColor=white&color=black)](https://www.reddit.com/r/PlayCanvas)
+[![X](https://img.shields.io/badge/X-000000?style=flat&logo=x&logoColor=white&color=black)](https://x.com/intent/follow?screen_name=playcanvas)
+
+| [User Manual](https://developer.playcanvas.com/user-manual/pcui) | [API Reference](https://api.playcanvas.com/pcui) | [ESM Examples](https://playcanvas.github.io/pcui/examples/) | [React Examples](https://playcanvas.github.io/pcui/storybook/) | [Blog](https://blog.playcanvas.com) | [Forum](https://forum.playcanvas.com) |
+
+This library enables the creation of reliable and visually pleasing user interfaces by providing fully styled components that you can use directly on your site. The components are useful in a wide range of use cases, from creating simple forms to building graphical user interfaces for complex web tools.
+
+![PCUI Banner](https://forum-files-playcanvas-com.s3.dualstack.eu-west-1.amazonaws.com/original/2X/7/7e51de8ae69fa499dcad292efd21d7722dcf2dbd.jpeg)
+
+A full guide to using the PCUI library can be found [here](https://developer.playcanvas.com/user-manual/pcui/).
+
+</div>
+
+## Getting Started
+
+To install the PCUI NPM module, run the following command:
+
+    npm install @playcanvas/pcui --save-dev
+
+You can then import each individual element from PCUI. In the example below, you can see how the PCUI `Label` component is imported from the PCUI library. The styles for PCUI are then imported into the example. Styles only need to be imported once per project.
+
+```javascript
+import { Label } from '@playcanvas/pcui';
+import '@playcanvas/pcui/styles';
+
+const label = new Label({
+    text: 'Hello World'
+});
+document.body.appendChild(label.dom);
+```
+
+If you'd like to include PCUI in your React project, you can import the individual components as follows:
+
+```javascript
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { TextInput } from '@playcanvas/pcui/react';
+import '@playcanvas/pcui/styles';
+
+ReactDOM.render(
+    <TextInput text='Hello World'/>,
+    document.body
+);
+```
+
+## Building a UMD bundle
+
+If you need a UMD version of the PCUI library (say, to use it in a PlayCanvas Editor project), please refer to our [build guide](BUILDGUIDE.md).
+
+## Fonts in PCUI
+
+PCUI uses four CSS classes for fonts across its components: `.font-regular`, `.font-bold`, `.font-thin` and `.font-light`. By default, these use the Helvetica Neue font stack:
+
+```css
+    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+```
+
+### Using your own Font
+
+You can override PCUI's default font by adding your own `font-family` CSS rules to these classes on your webpage:
+
+```css
+.font-regular, .font-bold, .font-thin, .font-light {
+    font-family: 'Your Font', sans-serif;
+}
+```
+
+## Data Binding
+
+The PCUI library offers a data binding layer that can be used to synchronize data across multiple components. It offers two way binding to a given observer object, so updates made in a component are reflected in the observer's data and distributed out to all other subscribed components. A simple use case is shown below:
+
+```javascript
+import { Observer } from '@playcanvas/observer';
+import { Label, TextInput, BindingObserversToElement, BindingElementToObservers } from '@playcanvas/pcui';
+import '@playcanvas/pcui/styles';
+
+// create a new observer for a simple object which contains a text string
+const observer = new Observer({
+    text: 'Hello World'
+});
+
+// create a label which will listen to updates from the observer
+const label = new Label({
+    binding: new BindingObserversToElement()
+});
+
+// link the observer to the label, telling it to use the text variable as its value
+label.link(observer, 'text');
+
+// create a text input which will send updates to the observer
+const textInput = new TextInput({
+    binding: new BindingElementToObservers()
+});
+
+// link the observer to the label, telling it to set the text variable on change
+textInput.link(observer, 'text');
+```
+
+In the above example, the created label will start with `Hello World` as its text value. When a user enters a value into the text input, the label will be updated with the new value.
+
+Observers can also be bound bi-directionally, in which case an element can both send and receive updates through its observer. The following example shows a two way binding between two text inputs, where either input can update the value of the other. It's been written in React to showcase binding with React components:
+
+```jsx
+import { Observer } from '@playcanvas/observer';
+import { BindingTwoWay, TextInput } from '@playcanvas/pcui/react';
+import '@playcanvas/pcui/styles';
+
+// create a new observer for a simple object which contains a text string
+const observer = new Observer({
+    text: 'Hello World'
+});
+
+// create two text inputs, which can both send and receive updates through the linked observer
+const TextInput1 = () => <TextInput binding={new BindingTwoWay()} link={{ observer, path: 'text'} />;
+const TextInput2 = () => <TextInput binding={new BindingTwoWay()} link={{ observer, path: 'text'} />;
+```
+
+## Development
+
+Each component exists in its own folder within the `./src/components` directory. They each contain:
+
+- `index.ts`: The PCUI element.
+- `style.scss`: The SASS styles for the PCUI element.
+- `component.tsx`: A React component wrapping the PCUI element.
+- `component.stories.tsx`: The Storybook entry for the React component.
+
+Locally developed components can be viewed & tested by running the Storybook app, as mentioned in the following section.
+
+If you'd like to build your own custom version of the library you can run the `npm run build` command which will create a `dist` directory with your custom build.
+
+## Storybook
+
+If you wish to view all components available to you in the library, you can run a local version Storybook. It allows you to browse the entire collection of components and test any changes you make to them. Each component page also includes component documentation and allows you to test each component in all of its configuration states.
+
+Run Storybook as follows:
+
+    npm install
+    npm run storybook
+
+## API Documentation
+
+To build the PCUI API Reference to the `docs` folder, do:
+
+```bash
+npm run docs
+```
+
+[resolution-badge]: https://isitmaintained.com/badge/resolution/playcanvas/pcui.svg
+[open-issues-badge]: https://isitmaintained.com/badge/open/playcanvas/pcui.svg
+[isitmaintained-url]: https://isitmaintained.com/project/playcanvas/pcui
+[npm-version-badge]: https://img.shields.io/npm/v/@playcanvas/pcui.svg?style=flat?style=flat
+[npm-package-url]: https://www.npmjs.com/package/@playcanvas/pcui
+[npm-downloads-badge]: https://img.shields.io/npm/dw/@playcanvas/pcui
+[npm-downloads-url]: https://npmtrends.com/@playcanvas/pcui
+[github-license-badge]: https://img.shields.io/badge/license-MIT-blue.svg
+[github-license-url]: https://github.com/playcanvas/pcui/blob/main/LICENSE
+[twitter-badge]: https://img.shields.io/twitter/follow/playcanvas.svg?style=social&label=Follow
+[twitter-url]: https://twitter.com/intent/follow?screen_name=playcanvas

package/node_modules/@playcanvas/pcui/dist/module/node_modules/playcanvas/build/playcanvas/src/core/math/constants.mjs

@@ -0,0 +1,6 @@
+const CURVE_LINEAR = 0;
+const CURVE_SMOOTHSTEP = 1;
+const CURVE_SPLINE = 4;
+const CURVE_STEP = 5;
+
+export { CURVE_LINEAR, CURVE_SMOOTHSTEP, CURVE_SPLINE, CURVE_STEP };

package/node_modules/@playcanvas/pcui/dist/module/node_modules/playcanvas/build/playcanvas/src/core/math/curve-evaluator.mjs

@@ -0,0 +1,119 @@
+import { CURVE_STEP, CURVE_LINEAR, CURVE_SMOOTHSTEP, CURVE_SPLINE } from './constants.mjs';
+import { math } from './math.mjs';
+
+class CurveEvaluator {
+		evaluate(time, forceReset = false) {
+				if (forceReset || time < this._left || time >= this._right) {
+						this._reset(time);
+				}
+				let result;
+				const type = this._curve.type;
+				if (type === CURVE_STEP) {
+						result = this._p0;
+				} else {
+						const t = this._recip === 0 ? 0 : (time - this._left) * this._recip;
+						if (type === CURVE_LINEAR) {
+								result = math.lerp(this._p0, this._p1, t);
+						} else if (type === CURVE_SMOOTHSTEP) {
+								result = math.lerp(this._p0, this._p1, t * t * (3 - 2 * t));
+						} else {
+								result = this._evaluateHermite(this._p0, this._p1, this._m0, this._m1, t);
+						}
+				}
+				return result;
+		}
+		_reset(time) {
+				const keys = this._curve.keys;
+				const len = keys.length;
+				if (!len) {
+						this._left = -Infinity;
+						this._right = Infinity;
+						this._recip = 0;
+						this._p0 = this._p1 = this._m0 = this._m1 = 0;
+				} else {
+						if (time < keys[0][0]) {
+								this._left = -Infinity;
+								this._right = keys[0][0];
+								this._recip = 0;
+								this._p0 = this._p1 = keys[0][1];
+								this._m0 = this._m1 = 0;
+						} else if (time >= keys[len - 1][0]) {
+								this._left = keys[len - 1][0];
+								this._right = Infinity;
+								this._recip = 0;
+								this._p0 = this._p1 = keys[len - 1][1];
+								this._m0 = this._m1 = 0;
+						} else {
+								let index = 0;
+								while(time >= keys[index + 1][0]){
+										index++;
+								}
+								this._left = keys[index][0];
+								this._right = keys[index + 1][0];
+								const diff = 1.0 / (this._right - this._left);
+								this._recip = isFinite(diff) ? diff : 0;
+								this._p0 = keys[index][1];
+								this._p1 = keys[index + 1][1];
+								if (this._curve.type === CURVE_SPLINE) {
+										this._calcTangents(keys, index);
+								}
+						}
+				}
+		}
+		_calcTangents(keys, index) {
+				let a;
+				const b = keys[index];
+				const c = keys[index + 1];
+				let d;
+				if (index === 0) {
+						a = [
+								keys[0][0] + (keys[0][0] - keys[1][0]),
+								keys[0][1] + (keys[0][1] - keys[1][1])
+						];
+				} else {
+						a = keys[index - 1];
+				}
+				if (index === keys.length - 2) {
+						d = [
+								keys[index + 1][0] + (keys[index + 1][0] - keys[index][0]),
+								keys[index + 1][1] + (keys[index + 1][1] - keys[index][1])
+						];
+				} else {
+						d = keys[index + 2];
+				}
+				if (this._curve.type === CURVE_SPLINE) {
+						const s1_ = 2 * (c[0] - b[0]) / (c[0] - a[0]);
+						const s2_ = 2 * (c[0] - b[0]) / (d[0] - b[0]);
+						this._m0 = this._curve.tension * (isFinite(s1_) ? s1_ : 0) * (c[1] - a[1]);
+						this._m1 = this._curve.tension * (isFinite(s2_) ? s2_ : 0) * (d[1] - b[1]);
+				} else {
+						const s1 = (c[0] - b[0]) / (b[0] - a[0]);
+						const s2 = (c[0] - b[0]) / (d[0] - c[0]);
+						const a_ = b[1] + (a[1] - b[1]) * (isFinite(s1) ? s1 : 0);
+						const d_ = c[1] + (d[1] - c[1]) * (isFinite(s2) ? s2 : 0);
+						const tension = this._curve.tension;
+						this._m0 = tension * (c[1] - a_);
+						this._m1 = tension * (d_ - b[1]);
+				}
+		}
+		_evaluateHermite(p0, p1, m0, m1, t) {
+				const t2 = t * t;
+				const twot = t + t;
+				const omt = 1 - t;
+				const omt2 = omt * omt;
+				return p0 * ((1 + twot) * omt2) + m0 * (t * omt2) + p1 * (t2 * (3 - twot)) + m1 * (t2 * (t - 1));
+		}
+		constructor(curve, time = 0){
+				this._left = -Infinity;
+				this._right = Infinity;
+				this._recip = 0;
+				this._p0 = 0;
+				this._p1 = 0;
+				this._m0 = 0;
+				this._m1 = 0;
+				this._curve = curve;
+				this._reset(time);
+		}
+}
+
+export { CurveEvaluator };

package/node_modules/@playcanvas/pcui/dist/module/node_modules/playcanvas/build/playcanvas/src/core/math/curve-set.mjs

@@ -0,0 +1,82 @@
+import { CURVE_SMOOTHSTEP } from './constants.mjs';
+import { Curve } from './curve.mjs';
+import { CurveEvaluator } from './curve-evaluator.mjs';
+
+class CurveSet {
+		get length() {
+				return this.curves.length;
+		}
+		set type(value) {
+				this._type = value;
+				for(let i = 0; i < this.curves.length; i++){
+						this.curves[i].type = value;
+				}
+		}
+		get type() {
+				return this._type;
+		}
+		get(index) {
+				return this.curves[index];
+		}
+		value(time, result = []) {
+				const length = this.curves.length;
+				result.length = length;
+				for(let i = 0; i < length; i++){
+						result[i] = this.curves[i].value(time);
+				}
+				return result;
+		}
+		clone() {
+				const result = new this.constructor();
+				result.curves = [];
+				for(let i = 0; i < this.curves.length; i++){
+						result.curves.push(this.curves[i].clone());
+				}
+				result._type = this._type;
+				return result;
+		}
+		quantize(precision) {
+				precision = Math.max(precision, 2);
+				const numCurves = this.curves.length;
+				const values = new Float32Array(precision * numCurves);
+				const step = 1.0 / (precision - 1);
+				for(let c = 0; c < numCurves; c++){
+						const ev = new CurveEvaluator(this.curves[c]);
+						for(let i = 0; i < precision; i++){
+								values[i * numCurves + c] = ev.evaluate(step * i);
+						}
+				}
+				return values;
+		}
+		quantizeClamped(precision, min, max) {
+				const result = this.quantize(precision);
+				for(let i = 0; i < result.length; ++i){
+						result[i] = Math.min(max, Math.max(min, result[i]));
+				}
+				return result;
+		}
+		constructor(...args){
+				this.curves = [];
+				this._type = CURVE_SMOOTHSTEP;
+				if (args.length > 1) {
+						for(let i = 0; i < args.length; i++){
+								this.curves.push(new Curve(args[i]));
+						}
+				} else if (args.length === 0) {
+						this.curves.push(new Curve());
+				} else {
+						const arg = args[0];
+						if (typeof arg === 'number') {
+								for(let i = 0; i < arg; i++){
+										this.curves.push(new Curve());
+								}
+						} else {
+								for(let i = 0; i < arg.length; i++){
+										this.curves.push(new Curve(arg[i]));
+								}
+						}
+				}
+		}
+}
+
+export { CurveSet };

package/node_modules/@playcanvas/pcui/dist/module/node_modules/playcanvas/build/playcanvas/src/core/math/curve.mjs

@@ -0,0 +1,92 @@
+import { CURVE_SMOOTHSTEP } from './constants.mjs';
+import { CurveEvaluator } from './curve-evaluator.mjs';
+
+class Curve {
+		get length() {
+				return this.keys.length;
+		}
+		add(time, value) {
+				const keys = this.keys;
+				const len = keys.length;
+				let i = 0;
+				for(; i < len; i++){
+						if (keys[i][0] > time) {
+								break;
+						}
+				}
+				const key = [
+						time,
+						value
+				];
+				this.keys.splice(i, 0, key);
+				return key;
+		}
+		get(index) {
+				return this.keys[index];
+		}
+		sort() {
+				this.keys.sort((a, b)=>a[0] - b[0]);
+		}
+		value(time) {
+				return this._eval.evaluate(time, true);
+		}
+		closest(time) {
+				const keys = this.keys;
+				const length = keys.length;
+				let min = 2;
+				let result = null;
+				for(let i = 0; i < length; i++){
+						const diff = Math.abs(time - keys[i][0]);
+						if (min >= diff) {
+								min = diff;
+								result = keys[i];
+						} else {
+								break;
+						}
+				}
+				return result;
+		}
+		clone() {
+				const result = new this.constructor();
+				result.keys = this.keys.map((key)=>[
+								...key
+						]);
+				result.type = this.type;
+				result.tension = this.tension;
+				return result;
+		}
+		quantize(precision) {
+				precision = Math.max(precision, 2);
+				const values = new Float32Array(precision);
+				const step = 1.0 / (precision - 1);
+				values[0] = this._eval.evaluate(0, true);
+				for(let i = 1; i < precision; i++){
+						values[i] = this._eval.evaluate(step * i);
+				}
+				return values;
+		}
+		quantizeClamped(precision, min, max) {
+				const result = this.quantize(precision);
+				for(let i = 0; i < result.length; ++i){
+						result[i] = Math.min(max, Math.max(min, result[i]));
+				}
+				return result;
+		}
+		constructor(data){
+				this.keys = [];
+				this.type = CURVE_SMOOTHSTEP;
+				this.tension = 0.5;
+				this._eval = new CurveEvaluator(this);
+				if (data) {
+						for(let i = 0; i < data.length - 1; i += 2){
+								this.keys.push([
+										data[i],
+										data[i + 1]
+								]);
+						}
+				}
+				this.sort();
+		}
+}
+
+export { Curve };

package/node_modules/@playcanvas/pcui/dist/module/node_modules/playcanvas/build/playcanvas/src/core/math/math.mjs

@@ -0,0 +1,105 @@
+const math = {
+		DEG_TO_RAD: Math.PI / 180,
+		RAD_TO_DEG: 180 / Math.PI,
+		clamp (value, min, max) {
+				if (value >= max) return max;
+				if (value <= min) return min;
+				return value;
+		},
+		intToBytes24 (i) {
+				const r = i >> 16 & 0xff;
+				const g = i >> 8 & 0xff;
+				const b = i & 0xff;
+				return [
+						r,
+						g,
+						b
+				];
+		},
+		intToBytes32 (i) {
+				const r = i >> 24 & 0xff;
+				const g = i >> 16 & 0xff;
+				const b = i >> 8 & 0xff;
+				const a = i & 0xff;
+				return [
+						r,
+						g,
+						b,
+						a
+				];
+		},
+		bytesToInt24 (r, g, b) {
+				if (r.length) {
+						b = r[2];
+						g = r[1];
+						r = r[0];
+				}
+				return r << 16 | g << 8 | b;
+		},
+		bytesToInt32 (r, g, b, a) {
+				if (r.length) {
+						a = r[3];
+						b = r[2];
+						g = r[1];
+						r = r[0];
+				}
+				return (r << 24 | g << 16 | b << 8 | a) >>> 0;
+		},
+		lerp (a, b, alpha) {
+				return a + (b - a) * math.clamp(alpha, 0, 1);
+		},
+		lerpAngle (a, b, alpha) {
+				if (b - a > 180) {
+						b -= 360;
+				}
+				if (b - a < -180) {
+						b += 360;
+				}
+				return math.lerp(a, b, math.clamp(alpha, 0, 1));
+		},
+		powerOfTwo (x) {
+				return x !== 0 && !(x & x - 1);
+		},
+		nextPowerOfTwo (val) {
+				val--;
+				val |= val >> 1;
+				val |= val >> 2;
+				val |= val >> 4;
+				val |= val >> 8;
+				val |= val >> 16;
+				val++;
+				return val;
+		},
+		nearestPowerOfTwo (val) {
+				return Math.pow(2, Math.round(Math.log2(val)));
+		},
+		random (min, max) {
+				const diff = max - min;
+				return Math.random() * diff + min;
+		},
+		smoothstep (min, max, x) {
+				if (x <= min) return 0;
+				if (x >= max) return 1;
+				x = (x - min) / (max - min);
+				return x * x * (3 - 2 * x);
+		},
+		smootherstep (min, max, x) {
+				if (x <= min) return 0;
+				if (x >= max) return 1;
+				x = (x - min) / (max - min);
+				return x * x * x * (x * (x * 6 - 15) + 10);
+		},
+		roundUp (numToRound, multiple) {
+				if (multiple === 0) {
+						return numToRound;
+				}
+				return Math.ceil(numToRound / multiple) * multiple;
+		},
+		between (num, a, b, inclusive) {
+				const min = Math.min(a, b);
+				const max = Math.max(a, b);
+				return inclusive ? num >= min && num <= max : num > min && num < max;
+		}
+};
+
+export { math };

package/node_modules/@playcanvas/pcui/dist/module/src/Math/color-value.mjs

@@ -0,0 +1,77 @@
+function _rgb2hsv(rgb) {
+    const r = rgb[0] / 255, g = rgb[1] / 255, b = rgb[2] / 255;
+    let h, s;
+    const v = Math.max(r, g, b);
+    const diff = v - Math.min(r, g, b);
+    const diffc = (c) => (v - c) / 6 / diff + 1 / 2;
+    if (diff === 0) {
+        h = s = 0;
+        return [h, s, v];
+    }
+    s = diff / v;
+    const rr = diffc(r);
+    const gg = diffc(g);
+    const bb = diffc(b);
+    if (r === v) {
+        h = bb - gg;
+    }
+    else if (g === v) {
+        h = (1 / 3) + rr - bb;
+    }
+    else if (b === v) {
+        h = (2 / 3) + gg - rr;
+    }
+    if (h < 0) {
+        h += 1;
+    }
+    else if (h > 1) {
+        h -= 1;
+    }
+    return [h, s, v];
+}
+function _hsv2rgb(hsv) {
+    const h = hsv[0];
+    const s = hsv[1];
+    const v = hsv[2];
+    let r, g, b;
+    const i = Math.floor(h * 6);
+    const f = h * 6 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    switch (i % 6) {
+        case 0:
+            r = v;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = v;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = v;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = v;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = v;
+            break;
+        case 5:
+            r = v;
+            g = p;
+            b = q;
+            break;
+    }
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+export { _hsv2rgb, _rgb2hsv };