@playcanvas/web-components 0.5.0 → 0.7.0

package/src/components/layoutchild-component.ts

@@ -0,0 +1,232 @@
+import { LayoutChildComponent } from 'playcanvas';
+
+import { ComponentElement } from './component';
+
+/**
+ * The LayoutChildComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-layoutchild/ | `<pc-layoutchild>`} elements.
+ * The LayoutChildComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+class LayoutChildComponentElement extends ComponentElement {
+    private _minWidth = 0;
+
+    private _minHeight = 0;
+
+    private _maxWidth: number | null = null;
+
+    private _maxHeight: number | null = null;
+
+    private _fitWidthProportion = 0;
+
+    private _fitHeightProportion = 0;
+
+    private _excludeFromLayout = false;
+
+    /** @ignore */
+    constructor() {
+        super('layoutchild');
+    }
+
+    getInitialComponentData() {
+        return {
+            minWidth: this._minWidth,
+            minHeight: this._minHeight,
+            maxWidth: this._maxWidth,
+            maxHeight: this._maxHeight,
+            fitWidthProportion: this._fitWidthProportion,
+            fitHeightProportion: this._fitHeightProportion,
+            excludeFromLayout: this._excludeFromLayout
+        };
+    }
+
+    /**
+     * Gets the underlying PlayCanvas layout child component.
+     * @returns The layout child component.
+     */
+    get component(): LayoutChildComponent | null {
+        return super.component as LayoutChildComponent | null;
+    }
+
+    /**
+     * Sets the minimum width the element should be laid out with.
+     * @param value - The minimum width.
+     */
+    set minWidth(value: number) {
+        this._minWidth = value;
+        if (this.component) {
+            this.component.minWidth = value;
+        }
+    }
+
+    /**
+     * Gets the minimum width the element should be laid out with.
+     * @returns The minimum width.
+     */
+    get minWidth() {
+        return this._minWidth;
+    }
+
+    /**
+     * Sets the minimum height the element should be laid out with.
+     * @param value - The minimum height.
+     */
+    set minHeight(value: number) {
+        this._minHeight = value;
+        if (this.component) {
+            this.component.minHeight = value;
+        }
+    }
+
+    /**
+     * Gets the minimum height the element should be laid out with.
+     * @returns The minimum height.
+     */
+    get minHeight() {
+        return this._minHeight;
+    }
+
+    /**
+     * Sets the maximum width the element should be laid out with (or `null` for no limit).
+     * @param value - The maximum width.
+     */
+    set maxWidth(value: number | null) {
+        this._maxWidth = value;
+        if (this.component) {
+            this.component.maxWidth = value as number;
+        }
+    }
+
+    /**
+     * Gets the maximum width the element should be laid out with.
+     * @returns The maximum width.
+     */
+    get maxWidth() {
+        return this._maxWidth;
+    }
+
+    /**
+     * Sets the maximum height the element should be laid out with (or `null` for no limit).
+     * @param value - The maximum height.
+     */
+    set maxHeight(value: number | null) {
+        this._maxHeight = value;
+        if (this.component) {
+            this.component.maxHeight = value as number;
+        }
+    }
+
+    /**
+     * Gets the maximum height the element should be laid out with.
+     * @returns The maximum height.
+     */
+    get maxHeight() {
+        return this._maxHeight;
+    }
+
+    /**
+     * Sets the proportion of the container's spare width this element should take (when the layout
+     * group's `width-fitting` is set to stretch or shrink).
+     * @param value - The fit width proportion.
+     */
+    set fitWidthProportion(value: number) {
+        this._fitWidthProportion = value;
+        if (this.component) {
+            this.component.fitWidthProportion = value;
+        }
+    }
+
+    /**
+     * Gets the proportion of the container's spare width this element should take.
+     * @returns The fit width proportion.
+     */
+    get fitWidthProportion() {
+        return this._fitWidthProportion;
+    }
+
+    /**
+     * Sets the proportion of the container's spare height this element should take (when the layout
+     * group's `height-fitting` is set to stretch or shrink).
+     * @param value - The fit height proportion.
+     */
+    set fitHeightProportion(value: number) {
+        this._fitHeightProportion = value;
+        if (this.component) {
+            this.component.fitHeightProportion = value;
+        }
+    }
+
+    /**
+     * Gets the proportion of the container's spare height this element should take.
+     * @returns The fit height proportion.
+     */
+    get fitHeightProportion() {
+        return this._fitHeightProportion;
+    }
+
+    /**
+     * Sets whether the element should be excluded from the layout (and thus not take up space).
+     * @param value - Whether to exclude the element from layout.
+     */
+    set excludeFromLayout(value: boolean) {
+        this._excludeFromLayout = value;
+        if (this.component) {
+            this.component.excludeFromLayout = value;
+        }
+    }
+
+    /**
+     * Gets whether the element is excluded from the layout.
+     * @returns Whether the element is excluded from layout.
+     */
+    get excludeFromLayout() {
+        return this._excludeFromLayout;
+    }
+
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'min-width',
+            'min-height',
+            'max-width',
+            'max-height',
+            'fit-width-proportion',
+            'fit-height-proportion',
+            'exclude-from-layout'
+        ];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'min-width':
+                this.minWidth = Number(newValue);
+                break;
+            case 'min-height':
+                this.minHeight = Number(newValue);
+                break;
+            case 'max-width':
+                this.maxWidth = newValue === '' ? null : Number(newValue);
+                break;
+            case 'max-height':
+                this.maxHeight = newValue === '' ? null : Number(newValue);
+                break;
+            case 'fit-width-proportion':
+                this.fitWidthProportion = Number(newValue);
+                break;
+            case 'fit-height-proportion':
+                this.fitHeightProportion = Number(newValue);
+                break;
+            case 'exclude-from-layout':
+                this.excludeFromLayout = newValue !== 'false';
+                break;
+        }
+    }
+}
+
+customElements.define('pc-layoutchild', LayoutChildComponentElement);
+
+export { LayoutChildComponentElement };

package/src/components/layoutgroup-component.ts

@@ -0,0 +1,297 @@
+import { FITTING_NONE, FITTING_STRETCH, FITTING_SHRINK, FITTING_BOTH, LayoutGroupComponent, ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL, Vec2, Vec4 } from 'playcanvas';
+
+import { ComponentElement } from './component';
+import { parseEnum, parseVec2, parseVec4 } from '../utils';
+
+const orientations = new Map<string, number>([
+    ['horizontal', ORIENTATION_HORIZONTAL],
+    ['vertical', ORIENTATION_VERTICAL]
+]);
+
+const fittings = new Map<string, number>([
+    ['none', FITTING_NONE],
+    ['stretch', FITTING_STRETCH],
+    ['shrink', FITTING_SHRINK],
+    ['both', FITTING_BOTH]
+]);
+
+/**
+ * The LayoutGroupComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-layoutgroup/ | `<pc-layoutgroup>`} elements.
+ * The LayoutGroupComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+class LayoutGroupComponentElement extends ComponentElement {
+    private _orientation: number = ORIENTATION_HORIZONTAL;
+
+    private _reverseX = false;
+
+    private _reverseY = false;
+
+    private _alignment = new Vec2(0, 1);
+
+    private _padding = new Vec4(0, 0, 0, 0);
+
+    private _spacing = new Vec2(0, 0);
+
+    private _widthFitting: number = FITTING_NONE;
+
+    private _heightFitting: number = FITTING_NONE;
+
+    private _wrap = false;
+
+    /** @ignore */
+    constructor() {
+        super('layoutgroup');
+    }
+
+    getInitialComponentData() {
+        return {
+            orientation: this._orientation,
+            reverseX: this._reverseX,
+            reverseY: this._reverseY,
+            alignment: this._alignment,
+            padding: this._padding,
+            spacing: this._spacing,
+            widthFitting: this._widthFitting,
+            heightFitting: this._heightFitting,
+            wrap: this._wrap
+        };
+    }
+
+    /**
+     * Gets the underlying PlayCanvas layout group component.
+     * @returns The layout group component.
+     */
+    get component(): LayoutGroupComponent | null {
+        return super.component as LayoutGroupComponent | null;
+    }
+
+    /**
+     * Sets the orientation of the layout group. Can be `horizontal` (0) or `vertical` (1).
+     * @param value - The orientation.
+     */
+    set orientation(value: number) {
+        this._orientation = value;
+        if (this.component) {
+            this.component.orientation = value;
+        }
+    }
+
+    /**
+     * Gets the orientation of the layout group.
+     * @returns The orientation.
+     */
+    get orientation() {
+        return this._orientation;
+    }
+
+    /**
+     * Sets whether the order of children is reversed along the horizontal axis.
+     * @param value - Whether to reverse the horizontal order.
+     */
+    set reverseX(value: boolean) {
+        this._reverseX = value;
+        if (this.component) {
+            this.component.reverseX = value;
+        }
+    }
+
+    /**
+     * Gets whether the order of children is reversed along the horizontal axis.
+     * @returns Whether the horizontal order is reversed.
+     */
+    get reverseX() {
+        return this._reverseX;
+    }
+
+    /**
+     * Sets whether the order of children is reversed along the vertical axis.
+     * @param value - Whether to reverse the vertical order.
+     */
+    set reverseY(value: boolean) {
+        this._reverseY = value;
+        if (this.component) {
+            this.component.reverseY = value;
+        }
+    }
+
+    /**
+     * Gets whether the order of children is reversed along the vertical axis.
+     * @returns Whether the vertical order is reversed.
+     */
+    get reverseY() {
+        return this._reverseY;
+    }
+
+    /**
+     * Sets the horizontal and vertical alignment of the child elements (each component 0 to 1).
+     * @param value - The alignment.
+     */
+    set alignment(value: Vec2) {
+        this._alignment = value;
+        if (this.component) {
+            this.component.alignment = value;
+        }
+    }
+
+    /**
+     * Gets the alignment of the child elements.
+     * @returns The alignment.
+     */
+    get alignment() {
+        return this._alignment;
+    }
+
+    /**
+     * Sets the padding around the layout group, as a Vec4 (left, bottom, right, top).
+     * @param value - The padding.
+     */
+    set padding(value: Vec4) {
+        this._padding = value;
+        if (this.component) {
+            this.component.padding = value;
+        }
+    }
+
+    /**
+     * Gets the padding around the layout group.
+     * @returns The padding.
+     */
+    get padding() {
+        return this._padding;
+    }
+
+    /**
+     * Sets the spacing between child elements, as a Vec2 (x, y).
+     * @param value - The spacing.
+     */
+    set spacing(value: Vec2) {
+        this._spacing = value;
+        if (this.component) {
+            this.component.spacing = value;
+        }
+    }
+
+    /**
+     * Gets the spacing between child elements.
+     * @returns The spacing.
+     */
+    get spacing() {
+        return this._spacing;
+    }
+
+    /**
+     * Sets the fitting mode along the horizontal axis. Can be `none` (0), `stretch` (1), `shrink`
+     * (2) or `both` (3).
+     * @param value - The width fitting mode.
+     */
+    set widthFitting(value: number) {
+        this._widthFitting = value;
+        if (this.component) {
+            this.component.widthFitting = value;
+        }
+    }
+
+    /**
+     * Gets the fitting mode along the horizontal axis.
+     * @returns The width fitting mode.
+     */
+    get widthFitting() {
+        return this._widthFitting;
+    }
+
+    /**
+     * Sets the fitting mode along the vertical axis. Can be `none` (0), `stretch` (1), `shrink` (2)
+     * or `both` (3).
+     * @param value - The height fitting mode.
+     */
+    set heightFitting(value: number) {
+        this._heightFitting = value;
+        if (this.component) {
+            this.component.heightFitting = value;
+        }
+    }
+
+    /**
+     * Gets the fitting mode along the vertical axis.
+     * @returns The height fitting mode.
+     */
+    get heightFitting() {
+        return this._heightFitting;
+    }
+
+    /**
+     * Sets whether children wrap onto a new line/column when they overflow the group.
+     * @param value - Whether to wrap children.
+     */
+    set wrap(value: boolean) {
+        this._wrap = value;
+        if (this.component) {
+            this.component.wrap = value;
+        }
+    }
+
+    /**
+     * Gets whether children wrap onto a new line/column when they overflow the group.
+     * @returns Whether children wrap.
+     */
+    get wrap() {
+        return this._wrap;
+    }
+
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'orientation',
+            'reverse-x',
+            'reverse-y',
+            'alignment',
+            'padding',
+            'spacing',
+            'width-fitting',
+            'height-fitting',
+            'wrap'
+        ];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'orientation':
+                this.orientation = parseEnum(newValue, orientations, ORIENTATION_HORIZONTAL);
+                break;
+            case 'reverse-x':
+                this.reverseX = newValue !== 'false';
+                break;
+            case 'reverse-y':
+                this.reverseY = newValue !== 'false';
+                break;
+            case 'alignment':
+                this.alignment = parseVec2(newValue);
+                break;
+            case 'padding':
+                this.padding = parseVec4(newValue);
+                break;
+            case 'spacing':
+                this.spacing = parseVec2(newValue);
+                break;
+            case 'width-fitting':
+                this.widthFitting = parseEnum(newValue, fittings, FITTING_NONE);
+                break;
+            case 'height-fitting':
+                this.heightFitting = parseEnum(newValue, fittings, FITTING_NONE);
+                break;
+            case 'wrap':
+                this.wrap = newValue !== 'false';
+                break;
+        }
+    }
+}
+
+customElements.define('pc-layoutgroup', LayoutGroupComponentElement);
+
+export { LayoutGroupComponentElement };

package/src/components/scrollbar-component.ts

@@ -0,0 +1,166 @@
+import { ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL, ScrollbarComponent } from 'playcanvas';
+
+import { ComponentElement } from './component';
+import { getEntity, parseEnum } from '../utils';
+
+const orientations = new Map<string, number>([
+    ['horizontal', ORIENTATION_HORIZONTAL],
+    ['vertical', ORIENTATION_VERTICAL]
+]);
+
+/**
+ * The ScrollbarComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scrollbar/ | `<pc-scrollbar>`} elements.
+ * The ScrollbarComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+class ScrollbarComponentElement extends ComponentElement {
+    private _orientation: number = ORIENTATION_HORIZONTAL;
+
+    private _value = 0;
+
+    private _handleSize = 0.5;
+
+    private _handle = '';
+
+    /** @ignore */
+    constructor() {
+        super('scrollbar');
+    }
+
+    getInitialComponentData() {
+        const data: Record<string, any> = {
+            orientation: this._orientation,
+            value: this._value,
+            handleSize: this._handleSize
+        };
+
+        const handle = getEntity(this._handle);
+        if (handle) {
+            data.handleEntity = handle;
+        }
+
+        return data;
+    }
+
+    /**
+     * Gets the underlying PlayCanvas scrollbar component.
+     * @returns The scrollbar component.
+     */
+    get component(): ScrollbarComponent | null {
+        return super.component as ScrollbarComponent | null;
+    }
+
+    /**
+     * Sets the orientation of the scrollbar. Can be `horizontal` (0) or `vertical` (1).
+     * @param value - The orientation.
+     */
+    set orientation(value: number) {
+        this._orientation = value;
+        if (this.component) {
+            this.component.orientation = value;
+        }
+    }
+
+    /**
+     * Gets the orientation of the scrollbar.
+     * @returns The orientation.
+     */
+    get orientation() {
+        return this._orientation;
+    }
+
+    /**
+     * Sets the current position value of the scrollbar, in the range 0 to 1.
+     * @param value - The scrollbar value.
+     */
+    set value(value: number) {
+        this._value = value;
+        if (this.component) {
+            this.component.value = value;
+        }
+    }
+
+    /**
+     * Gets the current position value of the scrollbar.
+     * @returns The scrollbar value.
+     */
+    get value() {
+        return this._value;
+    }
+
+    /**
+     * Sets the size of the handle relative to the size of the track, in the range 0 to 1.
+     * @param value - The handle size.
+     */
+    set handleSize(value: number) {
+        this._handleSize = value;
+        if (this.component) {
+            this.component.handleSize = value;
+        }
+    }
+
+    /**
+     * Gets the size of the handle relative to the size of the track.
+     * @returns The handle size.
+     */
+    get handleSize() {
+        return this._handleSize;
+    }
+
+    /**
+     * Sets the reference (CSS selector, element id or entity name) to the `<pc-entity>` used as the
+     * scrollbar handle.
+     * @param value - The handle entity reference.
+     */
+    set handle(value: string) {
+        this._handle = value;
+        const entity = getEntity(value);
+        if (this.component && entity) {
+            this.component.handleEntity = entity;
+        }
+    }
+
+    /**
+     * Gets the reference to the `<pc-entity>` used as the scrollbar handle.
+     * @returns The handle entity reference.
+     */
+    get handle() {
+        return this._handle;
+    }
+
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'orientation',
+            'value',
+            'handle-size',
+            'handle'
+        ];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'orientation':
+                this.orientation = parseEnum(newValue, orientations, ORIENTATION_HORIZONTAL);
+                break;
+            case 'value':
+                this.value = Number(newValue);
+                break;
+            case 'handle-size':
+                this.handleSize = Number(newValue);
+                break;
+            case 'handle':
+                this.handle = newValue;
+                break;
+        }
+    }
+}
+
+customElements.define('pc-scrollbar', ScrollbarComponentElement);
+
+export { ScrollbarComponentElement };