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

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

@@ -0,0 +1,122 @@
+import { CLASS_NOT_FLEXIBLE, CLASS_MULTIPLE_VALUES } from '../../class.mjs';
+import { Element } from '../Element/index.mjs';
+
+const CLASS_BOOLEAN_INPUT = 'pcui-boolean-input';
+const CLASS_BOOLEAN_INPUT_TICKED = `${CLASS_BOOLEAN_INPUT}-ticked`;
+const CLASS_BOOLEAN_INPUT_TOGGLE = `${CLASS_BOOLEAN_INPUT}-toggle`;
+/**
+ * A checkbox element.
+ */
+class BooleanInput extends Element {
+    /**
+     * Creates a new BooleanInput.
+     *
+     * @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 = () => {
+            this.emit('focus');
+        };
+        this._onBlur = () => {
+            this.emit('blur');
+        };
+        if (args.type === 'toggle') {
+            this.class.add(CLASS_BOOLEAN_INPUT_TOGGLE);
+        }
+        else {
+            this.class.add(CLASS_BOOLEAN_INPUT);
+        }
+        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 = null;
+        if (args.value !== undefined) {
+            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_BOOLEAN_INPUT_TICKED);
+        }
+        else {
+            this.class.remove(CLASS_BOOLEAN_INPUT_TICKED);
+        }
+        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(value) {
+        this._renderChanges = value;
+    }
+    get renderChanges() {
+        return this._renderChanges;
+    }
+}
+Element.register('boolean', BooleanInput, { renderChanges: true });
+
+export { BooleanInput };

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

@@ -0,0 +1,119 @@
+import { Element } from '../Element/index.mjs';
+
+const CLASS_BUTTON = 'pcui-button';
+/**
+ * User input with click interaction.
+ */
+class Button extends Element {
+    /**
+     * Creates a new Button.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args = {}) {
+        super({ dom: 'button', ...args });
+        this._onKeyDown = (evt) => {
+            if (evt.key === 'Escape') {
+                this.blur();
+            }
+            else if (evt.key === 'Enter') {
+                this._onClick(evt);
+            }
+        };
+        this.class.add(CLASS_BUTTON);
+        this._unsafe = args.unsafe;
+        this.text = args.text;
+        this.size = args.size;
+        this.icon = args.icon;
+        this.dom.addEventListener('keydown', this._onKeyDown);
+    }
+    destroy() {
+        if (this._destroyed)
+            return;
+        this.dom.removeEventListener('keydown', this._onKeyDown);
+        super.destroy();
+    }
+    _onClick(evt) {
+        this.blur();
+        if (this.readOnly)
+            return;
+        super._onClick(evt);
+    }
+    /**
+     * Focuses the button.
+     */
+    focus() {
+        this.dom.focus();
+    }
+    /**
+     * Unfocuses (blurs) the button.
+     */
+    blur() {
+        this.dom.blur();
+    }
+    /**
+     * Sets the text of the button.
+     */
+    set text(value) {
+        if (this._text === value)
+            return;
+        this._text = value;
+        if (this._unsafe) {
+            this.dom.innerHTML = value;
+        }
+        else {
+            this.dom.textContent = value;
+        }
+    }
+    /**
+     * Gets the text of the button.
+     */
+    get text() {
+        return this._text;
+    }
+    /**
+     * Sets the CSS code for an icon for the button. e.g. 'E401' (notice we omit the '\\' character).
+     */
+    set icon(value) {
+        if (this._icon === value || !value.match(/^E\d{0,4}$/))
+            return;
+        this._icon = value;
+        if (value) {
+            // set data-icon attribute but first convert the value to a code point
+            this.dom.setAttribute('data-icon', String.fromCodePoint(parseInt(value, 16)));
+        }
+        else {
+            this.dom.removeAttribute('data-icon');
+        }
+    }
+    /**
+     * Gets the CSS code for an icon for the button.
+     */
+    get icon() {
+        return this._icon;
+    }
+    /**
+     * Sets the 'size' type of the button. Can be null or 'small'.
+     */
+    set size(value) {
+        if (this._size === value)
+            return;
+        if (this._size) {
+            this.class.remove(`pcui-${this._size}`);
+            this._size = null;
+        }
+        this._size = value;
+        if (this._size) {
+            this.class.add(`pcui-${this._size}`);
+        }
+    }
+    /**
+     * Gets the 'size' type of the button.
+     */
+    get size() {
+        return this._size;
+    }
+}
+Element.register('button', Button);
+
+export { Button };

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

@@ -0,0 +1,104 @@
+import { Element } from '../Element/index.mjs';
+
+const CLASS_ROOT = 'pcui-canvas';
+/**
+ * Represents a Canvas.
+ */
+class Canvas extends Element {
+    /**
+     * Creates a new Canvas.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args = {}) {
+        super({ dom: 'canvas', ...args });
+        this._width = 300;
+        this._height = 150;
+        this._ratio = 1;
+        this.class.add(CLASS_ROOT);
+        const { useDevicePixelRatio = false } = args;
+        this._ratio = useDevicePixelRatio ? window.devicePixelRatio : 1;
+        // Disable I-bar cursor on click+drag
+        this.dom.onselectstart = (evt) => {
+            return false;
+        };
+    }
+    /**
+     * Resize the canvas using the given width and height parameters.
+     *
+     * @param width - The new width of the canvas.
+     * @param height - The new height of the canvas.
+     */
+    resize(width, height) {
+        if (this._width === width && this._height === height) {
+            return;
+        }
+        this._width = width;
+        this._height = height;
+        const canvas = this._dom;
+        canvas.width = this.pixelWidth;
+        canvas.height = this.pixelHeight;
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+        this.emit('resize', width, height);
+    }
+    /**
+     * Sets the width of the canvas.
+     */
+    set width(value) {
+        if (this._width === value) {
+            return;
+        }
+        this._width = value;
+        const canvas = this._dom;
+        canvas.width = this.pixelWidth;
+        canvas.style.width = `${value}px`;
+        this.emit('resize', this._width, this._height);
+    }
+    /**
+     * Gets the width of the canvas.
+     */
+    get width() {
+        return this._width;
+    }
+    /**
+     * Sets the height of the canvas.
+     */
+    set height(value) {
+        if (this._height === value) {
+            return;
+        }
+        this._height = value;
+        const canvas = this._dom;
+        canvas.height = this.pixelHeight;
+        canvas.style.height = `${value}px`;
+        this.emit('resize', this._width, this._height);
+    }
+    /**
+     * Gets the height of the canvas.
+     */
+    get height() {
+        return this._height;
+    }
+    /**
+     * Gets the pixel height of the canvas.
+     */
+    get pixelWidth() {
+        return Math.floor(this._width * this._ratio);
+    }
+    /**
+     * Gets the pixel height of the canvas.
+     */
+    get pixelHeight() {
+        return Math.floor(this._height * this._ratio);
+    }
+    /**
+     * Gets the pixel ratio of the canvas.
+     */
+    get pixelRatio() {
+        return this._ratio;
+    }
+}
+Element.register('canvas', Canvas);
+
+export { Canvas };

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

@@ -0,0 +1,43 @@
+import { Container } from '../Container/index.mjs';
+import { Element } from '../Element/index.mjs';
+import { Label } from '../Label/index.mjs';
+
+const CLASS_ROOT = 'pcui-code';
+const CLASS_INNER = `${CLASS_ROOT}-inner`;
+/**
+ * Represents a code block.
+ */
+class Code extends Container {
+    /**
+     * Creates a new Code.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args = {}) {
+        super(args);
+        this.class.add(CLASS_ROOT);
+        this._inner = new Label({
+            class: CLASS_INNER
+        });
+        this.append(this._inner);
+        if (args.text) {
+            this.text = args.text;
+        }
+    }
+    /**
+     * Sets the text to display in the code block.
+     */
+    set text(value) {
+        this._text = value;
+        this._inner.text = value;
+    }
+    /**
+     * Gets the text to display in the code block.
+     */
+    get text() {
+        return this._text;
+    }
+}
+Element.register('code', Code);
+
+export { Code };