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

package/node_modules/@playcanvas/pcui/react/types/components/Panel/index.d.ts

@@ -0,0 +1,178 @@
+import { Button } from '../Button';
+import { Container, ContainerArgs } from '../Container';
+import { Label } from '../Label';
+/**
+ * The arguments for the {@link Panel} constructor.
+ */
+interface PanelArgs extends ContainerArgs {
+    /**
+     * Sets whether the Element is collapsible.
+     */
+    collapsible?: boolean;
+    /**
+     * Sets whether the Element should be collapsed.
+     */
+    collapsed?: boolean;
+    /**
+     * Sets whether the panel can be reordered.
+     */
+    sortable?: boolean;
+    /**
+     * Sets whether the panel collapses horizontally - this would be the case for side panels. Defaults to `false`.
+     */
+    collapseHorizontally?: boolean;
+    /**
+     * Sets whether the panel can be removed.
+     */
+    removable?: boolean;
+    /**
+     * The height of the header in pixels. Defaults to 32.
+     */
+    headerSize?: number;
+    /**
+     * The header text of the panel. Defaults to the empty string.
+     */
+    headerText?: string;
+    /**
+     * Sets the panel type.
+     */
+    panelType?: 'normal';
+    /**
+     * A DOM element to use for the content container.
+     */
+    content?: HTMLElement;
+    /**
+     * A DOM element to use for the header container.
+     */
+    header?: HTMLElement;
+}
+/**
+ * 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.
+ */
+declare class Panel extends Container {
+    /**
+     * Fired when the panel gets collapsed.
+     *
+     * @event
+     * @example
+     * ```ts
+     * const panel = new Panel();
+     * panel.on('collapse', () => {
+     *     console.log('Panel collapsed');
+     * });
+     * ```
+     */
+    static readonly EVENT_COLLAPSE = "collapse";
+    /**
+     * Fired when the panel gets expanded.
+     *
+     * @event
+     * @example
+     * ```ts
+     * const panel = new Panel();
+     * panel.on('expand', () => {
+     *     console.log('Panel expanded');
+     * });
+     * ```
+     */
+    static readonly EVENT_EXPAND = "expand";
+    protected _suspendReflow: boolean;
+    protected _reflowTimeout: number;
+    protected _widthBeforeCollapse: string;
+    protected _heightBeforeCollapse: string;
+    protected _iconSort: Label;
+    protected _btnRemove: Button;
+    protected _containerContent: Container;
+    protected _containerHeader: Container;
+    protected _labelTitle: Label;
+    protected _collapsible: boolean;
+    protected _collapseHorizontally: boolean;
+    protected _draggedChild: this;
+    protected _collapsed: boolean;
+    protected _sortable: boolean;
+    protected _headerSize: number;
+    protected _onDragEndEvt: (event: MouseEvent) => void;
+    /**
+     * 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?: Readonly<PanelArgs>);
+    destroy(): void;
+    protected _initializeHeader(args: PanelArgs): void;
+    protected _onHeaderClick: (evt: MouseEvent) => void;
+    protected _onClickRemove(evt: MouseEvent): void;
+    protected _initializeContent(args: PanelArgs): void;
+    protected _reflow(): void;
+    protected _onDragStart: (evt: MouseEvent) => void;
+    protected _onDragMove: (evt: MouseEvent) => void;
+    protected _onDragEnd(evt: MouseEvent): void;
+    /**
+     * Sets whether the Element is collapsible.
+     */
+    set collapsible(value: boolean);
+    /**
+     * Gets whether the Element is collapsible.
+     */
+    get collapsible(): boolean;
+    /**
+     * Sets whether the Element should be collapsed.
+     */
+    set collapsed(value: boolean);
+    /**
+     * Gets whether the Element should be collapsed.
+     */
+    get collapsed(): boolean;
+    /**
+     * Sets whether the panel can be reordered.
+     */
+    set sortable(value: boolean);
+    /**
+     * Gets whether the panel can be reordered.
+     */
+    get sortable(): boolean;
+    /**
+     * Sets whether the panel can be removed
+     */
+    set removable(value: boolean);
+    /**
+     * Gets whether the panel can be removed
+     */
+    get removable(): boolean;
+    /**
+     * Sets whether the panel collapses horizontally. This would be the case for side panels. Defaults to `false`.
+     */
+    set collapseHorizontally(value: boolean);
+    /**
+     * Gets whether the panel collapses horizontally.
+     */
+    get collapseHorizontally(): boolean;
+    /**
+     * Gets the content container.
+     */
+    get content(): Container;
+    /**
+     * Gets the header container.
+     */
+    get header(): Container;
+    /**
+     * Sets the header text of the panel. Defaults to the empty string.
+     */
+    set headerText(value: string);
+    /**
+     * Gets the header text of the panel.
+     */
+    get headerText(): string;
+    /**
+     * Sets the height of the header in pixels. Defaults to 32.
+     */
+    set headerSize(value: number);
+    /**
+     * Gets the height of the header in pixels.
+     */
+    get headerSize(): number;
+}
+export { Panel, PanelArgs };

package/node_modules/@playcanvas/pcui/react/types/components/Progress/component.d.ts

@@ -0,0 +1,9 @@
+import { Element } from '../Element/component';
+import { Progress as ProgressClass, ProgressArgs } from './index';
+/**
+ * Represents a bar that can highlight progress of an activity.
+ */
+declare class Progress extends Element<ProgressArgs, any> {
+    static ctor: typeof ProgressClass;
+}
+export { Progress };

package/node_modules/@playcanvas/pcui/react/types/components/Progress/index.d.ts

@@ -0,0 +1,33 @@
+import { Container, ContainerArgs } from '../Container';
+import { Element } from '../Element';
+/**
+ * The arguments for the {@link Progress} constructor.
+ */
+interface ProgressArgs extends ContainerArgs {
+    /**
+     * Sets the value of the progress bar (between 0 and 100).
+     */
+    value?: number;
+}
+/**
+ * Represents a bar that can highlight progress of an activity.
+ */
+declare class Progress extends Container {
+    protected _inner: Element;
+    protected _value: number;
+    /**
+     * Creates a new Progress.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args?: Readonly<ProgressArgs>);
+    /**
+     * Sets the value of the progress bar. The range is from 0 to 100.
+     */
+    set value(val: number);
+    /**
+     * Gets the value of the progress bar.
+     */
+    get value(): number;
+}
+export { Progress, ProgressArgs };

package/node_modules/@playcanvas/pcui/react/types/components/RadioButton/component.d.ts

@@ -0,0 +1,9 @@
+import { Element } from '../Element/component';
+import { RadioButton as RadioButtonClass, RadioButtonArgs } from './index';
+/**
+ * A radio button element.
+ */
+declare class RadioButton extends Element<RadioButtonArgs, any> {
+    static ctor: typeof RadioButtonClass;
+}
+export { RadioButton };

package/node_modules/@playcanvas/pcui/react/types/components/RadioButton/index.d.ts

@@ -0,0 +1,33 @@
+import { Element, ElementArgs, IBindable, IBindableArgs, IFocusable } from '../Element';
+/**
+ * The arguments for the {@link RadioButton} constructor.
+ */
+interface RadioButtonArgs extends ElementArgs, IBindableArgs {
+}
+/**
+ * A radio button element.
+ */
+declare class RadioButton extends Element implements IBindable, IFocusable {
+    protected _value: boolean;
+    protected _renderChanges: boolean;
+    /**
+     * Creates a new RadioButton.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args?: Readonly<RadioButtonArgs>);
+    destroy(): void;
+    protected _onClick(evt: MouseEvent): void;
+    protected _onKeyDown: (evt: KeyboardEvent) => void;
+    protected _onFocus: (evt: FocusEvent) => void;
+    protected _onBlur: (evt: FocusEvent) => void;
+    protected _updateValue(value: boolean): boolean;
+    focus(): void;
+    blur(): void;
+    set value(value: boolean);
+    get value(): boolean;
+    set values(values: boolean[]);
+    set renderChanges(renderChanges: boolean);
+    get renderChanges(): boolean;
+}
+export { RadioButton, RadioButtonArgs };

package/node_modules/@playcanvas/pcui/react/types/components/SelectInput/component.d.ts

@@ -0,0 +1,12 @@
+import { Element } from '../Element/component';
+import { SelectInput as SelectInputClass, SelectInputArgs } from './index';
+/**
+ * An input that allows selecting from a dropdown or entering tags.
+ */
+declare class SelectInput extends Element<SelectInputArgs, any> {
+    static ctor: typeof SelectInputClass;
+    onSelect?: (value: string) => void;
+    constructor(props: SelectInputArgs);
+    onAttachFn(): void;
+}
+export { SelectInput };

package/node_modules/@playcanvas/pcui/react/types/components/SelectInput/index.d.ts

@@ -0,0 +1,278 @@
+import { Container } from '../Container';
+import { Element, ElementArgs, IBindable, IBindableArgs, IFocusable, IPlaceholderArgs } from '../Element';
+import { Label } from '../Label';
+import { TextInput } from '../TextInput';
+/**
+ * The arguments for the {@link SelectInput} constructor.
+ */
+interface SelectInputArgs extends ElementArgs, IBindableArgs, IPlaceholderArgs {
+    /**
+     * Used to map the options.
+     */
+    optionsFn?: any;
+    /**
+     * Default value for the input.
+     */
+    defaultValue?: any;
+    /**
+     * If `true` then the input value becomes an array allowing the selection of multiple options. Defaults to `false`.
+     */
+    multiSelect?: boolean;
+    /**
+     * The dropdown options of the input. Contains an array of objects with the following format \{v: Any, t: String\} where v is the value and t is the text of the option.
+     */
+    options?: {
+        t: string;
+        v: boolean | number | string;
+    }[];
+    /**
+     * An array of values against which new values are checked before they are created. If a value is in the array it will not be created.
+     */
+    invalidOptions?: Array<any>;
+    /**
+     * If `true` then null is a valid input value. Defaults to `false`.
+     */
+    allowNull?: boolean;
+    /**
+     * If `true` then a text field is shown for the user to search for values or enter new ones. Defaults to `false`.
+     */
+    allowInput?: boolean;
+    /**
+     * If `true` then the input allows creating new values from the text field. Only used when allowInput is true. Defaults to `false`.
+     */
+    allowCreate?: boolean;
+    /**
+     * A function to be executed when the user selects to create a new value. The function takes the new value as a parameter.
+     */
+    createFn?: (value: string) => void;
+    /**
+     * The placeholder text to show when creating a new value. Used when allowInput and allowCreate are both true.
+     */
+    createLabelText?: string;
+    /**
+     * The type of each value. Can be one of 'string', 'number' or 'boolean'. Defaults to 'string'.
+     */
+    type?: 'string' | 'number' | 'boolean';
+    /**
+     * The order that the options should be checked in to find a valid fallback option that isn't included in the disabledOptions object.
+     */
+    fallbackOrder?: Array<string>;
+    /**
+     * All the option values that should be disabled. The keys of the object are the values of the options and the values are the text to show when the option is disabled.
+     */
+    disabledOptions?: Record<string, string>;
+    /**
+     * If provided, this function will be called each time an option is selected.
+     */
+    onSelect?: (value: string) => void;
+    /**
+     * Text to display in the SelectInput before the selected option.
+     */
+    prefix?: string;
+}
+/**
+ * An input that allows selecting from a dropdown or entering tags.
+ */
+declare class SelectInput extends Element implements IBindable, IFocusable {
+    /**
+     * Fired when the value of the SelectInput changes.
+     *
+     * @event
+     * @example
+     * ```ts
+     * const selectInput = new SelectInput();
+     * selectInput.on('change', (value) => {
+     *     console.log('Value changed to:', value);
+     * });
+     * ```
+     */
+    static readonly EVENT_CHANGE = "change";
+    /**
+     * Fired when the SelectInput receives focus.
+     *
+     * @event
+     * @example
+     * ```ts
+     * const selectInput = new SelectInput();
+     * selectInput.on('focus', () => {
+     *     console.log('SelectInput focused');
+     * });
+     * ```
+     */
+    static readonly EVENT_FOCUS = "focus";
+    /**
+     * Fired when the SelectInput loses focus.
+     *
+     * @event
+     * @example
+     * ```ts
+     * const selectInput = new SelectInput();
+     * selectInput.on('blur', () => {
+     *     console.log('SelectInput blurred');
+     * });
+     * ```
+     */
+    static readonly EVENT_BLUR = "blur";
+    protected _container: Container;
+    protected _containerValue: Container;
+    protected _domShadow: HTMLDivElement;
+    protected _allowInput: boolean;
+    protected _allowCreate: boolean;
+    protected _createFn?: (value: string) => void;
+    protected _createLabelText?: string;
+    protected _labelValue: Label;
+    protected _timeoutLabelValueTabIndex: number;
+    protected _labelIcon: Label;
+    protected _input: TextInput;
+    protected _lastInputValue: string;
+    protected _suspendInputChange: boolean;
+    protected _containerOptions: Container;
+    protected _containerTags: Container;
+    protected _type: string;
+    protected _valueToText: Record<string, string>;
+    protected _valueToLabel: Record<string, Label>;
+    protected _labelToValue: Map<Label, any>;
+    protected _labelHighlighted: Label;
+    protected _optionsFn: any;
+    protected _allowNull: boolean;
+    protected _values: any;
+    protected _value: any;
+    protected _createLabelContainer: Container;
+    protected _options: {
+        t: string;
+        v: boolean | number | string;
+    }[];
+    protected _invalidOptions: any;
+    protected _renderChanges: boolean;
+    protected _disabledOptions: Record<string, string>;
+    protected _fallbackOrder: Array<string>;
+    protected _disabledValue: string;
+    protected _onSelect: (value: string) => void;
+    protected _prefix: string;
+    /**
+     * Creates a new SelectInput.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args?: Readonly<SelectInputArgs>);
+    destroy(): void;
+    protected _initializeCreateLabel(): Container;
+    protected _convertSingleValue(value: any): any;
+    protected _convertValue(value: any): any;
+    protected _onSelectValue(value: any): void;
+    protected _highlightLabel(label: Label): void;
+    protected _onValueChange(value: any): void;
+    protected _onMultipleValuesChange(values: any): void;
+    protected _addTag(value: unknown): Container;
+    protected _removeTag(tagElement: Container, value: unknown): void;
+    protected _onInputChange: (value: any) => void;
+    protected _filterOptions(filter: string): void;
+    protected _onInputKeyDown: (evt: KeyboardEvent) => void;
+    /**
+     * Handles pointer down events on the document. It has to be the document instead of the window
+     * because otherwise `pointerdown` is not fired when the PCUI app is running in an iframe.
+     * @param evt - Pointer event.
+     */
+    protected _onDocumentPointerDown: (evt: PointerEvent) => void;
+    protected _onKeyDown: (evt: KeyboardEvent) => void;
+    protected _resizeShadow(): void;
+    protected _onPointerDown: () => void;
+    protected _onFocus: () => void;
+    protected _onBlur: () => void;
+    protected _onWheel: (evt: WheelEvent) => void;
+    protected _updateInputFieldsVisibility(focused?: boolean): void;
+    /**
+     * Focuses the SelectInput.
+     */
+    focus(): void;
+    /**
+     * Unfocuses (blurs) the SelectInput.
+     */
+    blur(): void;
+    /**
+     * Opens the dropdown menu.
+     */
+    open(): void;
+    /**
+     * Closes the dropdown menu.
+     */
+    close(): void;
+    /**
+     * Toggles the dropdown menu.
+     */
+    toggle(): void;
+    unlink(): void;
+    _updateValue(value: string): void;
+    _updateDisabledValue(value: string): string;
+    /**
+     * Sets the dropdown options. Each option should have the format `{v: value, t: text}` where `v`
+     * is the value and `t` is the display text.
+     */
+    set options(value: {
+        t: string;
+        v: boolean | number | string;
+    }[]);
+    /**
+     * Gets the dropdown options.
+     */
+    get options(): {
+        t: string;
+        v: boolean | number | string;
+    }[];
+    /**
+     * Sets an array of values that should not be allowed when creating new options.
+     */
+    set invalidOptions(value: any);
+    /**
+     * Gets the array of invalid options.
+     */
+    get invalidOptions(): any;
+    /**
+     * Sets the value that is currently disabled (shown but not selectable).
+     */
+    set disabledValue(value: string | null);
+    /**
+     * Sets the options that should be disabled. The keys are the option values and the values are
+     * the text to show when the option is disabled.
+     */
+    set disabledOptions(value: any);
+    /**
+     * Sets the order in which options should be checked for a valid fallback when the current
+     * value becomes disabled.
+     */
+    set fallbackOrder(value: string[]);
+    /**
+     * Gets whether the SelectInput allows selecting multiple options.
+     */
+    get multiSelect(): boolean;
+    /**
+     * Sets the value of the SelectInput. For multi-select inputs, this should be an array.
+     */
+    set value(value: any);
+    /**
+     * Gets the value of the SelectInput. For multi-select inputs, this returns an array.
+     */
+    get value(): any;
+    /**
+     * Sets multiple values on the SelectInput. If all values are the same, the SelectInput will
+     * display that value. Otherwise, it will display a "multiple values" state.
+     */
+    set values(values: Array<any>);
+    /**
+     * Sets the placeholder text for the input field.
+     */
+    set placeholder(value: string);
+    /**
+     * Gets the placeholder text for the input field.
+     */
+    get placeholder(): string;
+    /**
+     * Sets whether the SelectInput should flash when its value changes.
+     */
+    set renderChanges(value: boolean);
+    /**
+     * Gets whether the SelectInput should flash when its value changes.
+     */
+    get renderChanges(): boolean;
+}
+export { SelectInput, SelectInputArgs };

package/node_modules/@playcanvas/pcui/react/types/components/SliderInput/component.d.ts

@@ -0,0 +1,10 @@
+import { Element } from '../Element/component';
+import { SliderInput as SliderInputClass, SliderInputArgs } from './index';
+/**
+ * The SliderInput shows a NumericInput and a slider widget next to it. It acts as a proxy of the
+ * NumericInput.
+ */
+declare class SliderInput extends Element<SliderInputArgs, any> {
+    static ctor: typeof SliderInputClass;
+}
+export { SliderInput };

package/node_modules/@playcanvas/pcui/react/types/components/SliderInput/index.d.ts

@@ -0,0 +1,133 @@
+import { Element, ElementArgs, IBindable, IBindableArgs, IFocusable, IPlaceholder, IPlaceholderArgs } from '../Element';
+import { NumericInput } from '../NumericInput';
+/**
+ * The arguments for the {@link SliderInput} constructor.
+ */
+interface SliderInputArgs extends ElementArgs, IBindableArgs, IPlaceholderArgs {
+    /**
+     * Sets whether any key up event will cause a change event to be fired.
+     */
+    keyChange?: boolean;
+    /**
+     * Sets the minimum value that the numeric input field can take.
+     */
+    min?: number;
+    /**
+     * Sets the maximum value that the numeric input field can take.
+     */
+    max?: number;
+    /**
+     * Sets the minimum value that the slider field can take. Defaults to 0.
+     */
+    sliderMin?: number;
+    /**
+     * Sets the maximum value that the slider field can take. Defaults to 1.
+     */
+    sliderMax?: number;
+    /**
+     * Sets the maximum number of decimals a value can take. Defaults to 2.
+     */
+    precision?: number;
+    /**
+     * Sets the amount that the value will be increased or decreased when using the arrow
+     * keys. Holding Shift will use 10x the step.
+     */
+    step?: number;
+    /**
+     * Sets whether the value can be null. If not then it will be 0 instead of null.
+     */
+    allowNull?: boolean;
+}
+/**
+ * The SliderInput shows a NumericInput and a slider widget next to it. It acts as a proxy of the
+ * NumericInput.
+ */
+declare class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder {
+    protected _historyCombine: boolean;
+    protected _historyPostfix: string;
+    protected _numericInput: NumericInput;
+    protected _sliderMin: number;
+    protected _sliderMax: number;
+    protected _domSlider: HTMLDivElement;
+    protected _domBar: HTMLDivElement;
+    protected _domHandle: HTMLDivElement;
+    protected _cursorHandleOffset: number;
+    protected _pointerId: number;
+    /**
+     * Creates a new SliderInput.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args?: Readonly<SliderInputArgs>);
+    destroy(): void;
+    protected _onPointerDown: (evt: PointerEvent) => void;
+    protected _onPointerMove: (evt: PointerEvent) => void;
+    protected _onPointerUp: (evt: PointerEvent) => void;
+    protected _onKeyDown: (evt: KeyboardEvent) => void;
+    protected _updateHandle(value: number): void;
+    protected _onValueChange(value: number): void;
+    protected _calculateCursorHandleOffset(pageX: number): number;
+    protected _onSlideStart(pageX: number): void;
+    protected _onSlideMove(pageX: number): void;
+    protected _onSlideEnd(pageX: number): void;
+    focus(): void;
+    blur(): void;
+    /**
+     * Sets the minimum value that the slider field can take.
+     */
+    set sliderMin(value: number);
+    /**
+     * Gets the minimum value that the slider field can take.
+     */
+    get sliderMin(): number;
+    /**
+     * Sets the maximum value that the slider field can take.
+     */
+    set sliderMax(value: number);
+    /**
+     * Gets the maximum value that the slider field can take.
+     */
+    get sliderMax(): number;
+    set value(value: number);
+    get value(): number;
+    set values(values: Array<number>);
+    set renderChanges(value: boolean);
+    get renderChanges(): boolean;
+    /**
+     * Sets the minimum value that the numeric input field can take.
+     */
+    set min(value: number);
+    /**
+     * Gets the minimum value that the numeric input field can take.
+     */
+    get min(): number;
+    /**
+     * Sets the maximum value that the numeric input field can take.
+     */
+    set max(value: number);
+    /**
+     * Gets the maximum value that the numeric input field can take.
+     */
+    get max(): number;
+    /**
+     * 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: number);
+    /**
+     * Gets the amount that the value will be increased or decreased when using the arrow keys.
+     */
+    get step(): number;
+    /**
+     * Sets the maximum number of decimals a value can take.
+     */
+    set precision(value: number);
+    /**
+     * Gets the maximum number of decimals a value can take.
+     */
+    get precision(): number;
+    set keyChange(value: boolean);
+    get keyChange(): boolean;
+    set placeholder(value: string);
+    get placeholder(): string;
+}
+export { SliderInput, SliderInputArgs };