pixifact 0.1.3 → 0.1.5

package/dist/builtin-scenes/FlexItem.d.ts

@@ -0,0 +1,45 @@
+import { Container } from 'pixi.js';
+import { Control } from './Control.js';
+import { type Size } from './controlLayout.js';
+export type FlexAlignSelf = 'auto' | 'start' | 'center' | 'end' | 'stretch';
+export type FlexBasis = number | 'auto';
+export interface FlexItemLayoutProps {
+    grow: number;
+    shrink: number;
+    basis: FlexBasis;
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+    marginLeft: number;
+    marginRight: number;
+    marginTop: number;
+    marginBottom: number;
+    alignSelf: FlexAlignSelf;
+}
+export declare class FlexItem extends Control {
+    #private;
+    readonly default: Container;
+    get grow(): number;
+    set grow(value: number);
+    get shrink(): number;
+    set shrink(value: number);
+    get basis(): string | number;
+    set basis(value: string | number);
+    get maxWidth(): number;
+    set maxWidth(value: number);
+    get maxHeight(): number;
+    set maxHeight(value: number);
+    get marginLeft(): number;
+    set marginLeft(value: number);
+    get marginRight(): number;
+    set marginRight(value: number);
+    get marginTop(): number;
+    set marginTop(value: number);
+    get marginBottom(): number;
+    set marginBottom(value: number);
+    get alignSelf(): string;
+    set alignSelf(value: string);
+    getFlexItemLayoutProps(): FlexItemLayoutProps;
+    measureControlNaturalSize(): Size;
+}

package/dist/builtin-scenes/FlexItem.js

@@ -0,0 +1,164 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { prop, scene, slot } from 'pixifact/compiler';
+import { Control } from './Control.js';
+import { measureChildren } from './controlLayout.js';
+let FlexItem = class FlexItem extends Control {
+    #grow = 0;
+    #shrink = 1;
+    #basis = 'auto';
+    #maxWidth = -1;
+    #maxHeight = -1;
+    #marginLeft = 0;
+    #marginRight = 0;
+    #marginTop = 0;
+    #marginBottom = 0;
+    #alignSelf = 'auto';
+    get grow() {
+        return this.#grow;
+    }
+    set grow(value) {
+        this.#grow = Math.max(0, finiteNumber(value, 0));
+        this.requestParentLayout();
+    }
+    get shrink() {
+        return this.#shrink;
+    }
+    set shrink(value) {
+        this.#shrink = Math.max(0, finiteNumber(value, 1));
+        this.requestParentLayout();
+    }
+    get basis() {
+        return this.#basis;
+    }
+    set basis(value) {
+        this.#basis = parseBasis(value);
+        this.requestParentLayout();
+    }
+    get maxWidth() {
+        return this.#maxWidth;
+    }
+    set maxWidth(value) {
+        this.#maxWidth = finiteNumber(value, -1);
+        this.requestParentLayout();
+    }
+    get maxHeight() {
+        return this.#maxHeight;
+    }
+    set maxHeight(value) {
+        this.#maxHeight = finiteNumber(value, -1);
+        this.requestParentLayout();
+    }
+    get marginLeft() {
+        return this.#marginLeft;
+    }
+    set marginLeft(value) {
+        this.#marginLeft = finiteNumber(value, 0);
+        this.requestParentLayout();
+    }
+    get marginRight() {
+        return this.#marginRight;
+    }
+    set marginRight(value) {
+        this.#marginRight = finiteNumber(value, 0);
+        this.requestParentLayout();
+    }
+    get marginTop() {
+        return this.#marginTop;
+    }
+    set marginTop(value) {
+        this.#marginTop = finiteNumber(value, 0);
+        this.requestParentLayout();
+    }
+    get marginBottom() {
+        return this.#marginBottom;
+    }
+    set marginBottom(value) {
+        this.#marginBottom = finiteNumber(value, 0);
+        this.requestParentLayout();
+    }
+    get alignSelf() {
+        return this.#alignSelf;
+    }
+    set alignSelf(value) {
+        this.#alignSelf = parseAlignSelf(value);
+        this.requestParentLayout();
+    }
+    getFlexItemLayoutProps() {
+        const controlProps = this.getControlLayoutProps();
+        return {
+            grow: this.#grow,
+            shrink: this.#shrink,
+            basis: this.#basis,
+            minWidth: controlProps.minWidth,
+            minHeight: controlProps.minHeight,
+            maxWidth: this.#maxWidth,
+            maxHeight: this.#maxHeight,
+            marginLeft: this.#marginLeft,
+            marginRight: this.#marginRight,
+            marginTop: this.#marginTop,
+            marginBottom: this.#marginBottom,
+            alignSelf: this.#alignSelf,
+        };
+    }
+    measureControlNaturalSize() {
+        return measureChildren(this.default ?? this);
+    }
+};
+__decorate([
+    slot()
+], FlexItem.prototype, "default", void 0);
+__decorate([
+    prop({ type: Number, default: 0 })
+], FlexItem.prototype, "grow", null);
+__decorate([
+    prop({ type: Number, default: 1 })
+], FlexItem.prototype, "shrink", null);
+__decorate([
+    prop({ type: Number, default: -1 })
+], FlexItem.prototype, "basis", null);
+__decorate([
+    prop({ type: Number, default: -1 })
+], FlexItem.prototype, "maxWidth", null);
+__decorate([
+    prop({ type: Number, default: -1 })
+], FlexItem.prototype, "maxHeight", null);
+__decorate([
+    prop({ type: Number, default: 0 })
+], FlexItem.prototype, "marginLeft", null);
+__decorate([
+    prop({ type: Number, default: 0 })
+], FlexItem.prototype, "marginRight", null);
+__decorate([
+    prop({ type: Number, default: 0 })
+], FlexItem.prototype, "marginTop", null);
+__decorate([
+    prop({ type: Number, default: 0 })
+], FlexItem.prototype, "marginBottom", null);
+__decorate([
+    prop({ type: String, default: 'auto' })
+], FlexItem.prototype, "alignSelf", null);
+FlexItem = __decorate([
+    scene()
+], FlexItem);
+export { FlexItem };
+function parseBasis(value) {
+    if (value === 'auto') {
+        return 'auto';
+    }
+    const basis = finiteNumber(Number(value), -1);
+    return basis >= 0 ? basis : 'auto';
+}
+function parseAlignSelf(value) {
+    if (value === 'start' || value === 'center' || value === 'end' || value === 'stretch') {
+        return value;
+    }
+    return 'auto';
+}
+function finiteNumber(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}

package/dist/builtin-scenes/FlexItem.scene

@@ -0,0 +1,3 @@
+<Scene name="FlexItem">
+    <slot name="default" />
+</Scene>

package/dist/builtin-scenes/FlexItem.ts

@@ -0,0 +1,180 @@
+import { Container } from 'pixi.js';
+import { prop, scene, slot } from 'pixifact/compiler';
+import { Control } from './Control';
+import { measureChildren, type Size } from './controlLayout';
+
+export type FlexAlignSelf = 'auto' | 'start' | 'center' | 'end' | 'stretch';
+export type FlexBasis = number | 'auto';
+
+export interface FlexItemLayoutProps {
+    grow: number;
+    shrink: number;
+    basis: FlexBasis;
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+    marginLeft: number;
+    marginRight: number;
+    marginTop: number;
+    marginBottom: number;
+    alignSelf: FlexAlignSelf;
+}
+
+@scene()
+export class FlexItem extends Control {
+    @slot()
+    declare readonly default: Container;
+
+    #grow = 0;
+    #shrink = 1;
+    #basis: FlexBasis = 'auto';
+    #maxWidth = -1;
+    #maxHeight = -1;
+    #marginLeft = 0;
+    #marginRight = 0;
+    #marginTop = 0;
+    #marginBottom = 0;
+    #alignSelf: FlexAlignSelf = 'auto';
+
+    get grow() {
+        return this.#grow;
+    }
+
+    @prop({ type: Number, default: 0 })
+    set grow(value: number) {
+        this.#grow = Math.max(0, finiteNumber(value, 0));
+        this.requestParentLayout();
+    }
+
+    get shrink() {
+        return this.#shrink;
+    }
+
+    @prop({ type: Number, default: 1 })
+    set shrink(value: number) {
+        this.#shrink = Math.max(0, finiteNumber(value, 1));
+        this.requestParentLayout();
+    }
+
+    get basis() {
+        return this.#basis;
+    }
+
+    @prop({ type: Number, default: -1 })
+    set basis(value: string | number) {
+        this.#basis = parseBasis(value);
+        this.requestParentLayout();
+    }
+
+    get maxWidth() {
+        return this.#maxWidth;
+    }
+
+    @prop({ type: Number, default: -1 })
+    set maxWidth(value: number) {
+        this.#maxWidth = finiteNumber(value, -1);
+        this.requestParentLayout();
+    }
+
+    get maxHeight() {
+        return this.#maxHeight;
+    }
+
+    @prop({ type: Number, default: -1 })
+    set maxHeight(value: number) {
+        this.#maxHeight = finiteNumber(value, -1);
+        this.requestParentLayout();
+    }
+
+    get marginLeft() {
+        return this.#marginLeft;
+    }
+
+    @prop({ type: Number, default: 0 })
+    set marginLeft(value: number) {
+        this.#marginLeft = finiteNumber(value, 0);
+        this.requestParentLayout();
+    }
+
+    get marginRight() {
+        return this.#marginRight;
+    }
+
+    @prop({ type: Number, default: 0 })
+    set marginRight(value: number) {
+        this.#marginRight = finiteNumber(value, 0);
+        this.requestParentLayout();
+    }
+
+    get marginTop() {
+        return this.#marginTop;
+    }
+
+    @prop({ type: Number, default: 0 })
+    set marginTop(value: number) {
+        this.#marginTop = finiteNumber(value, 0);
+        this.requestParentLayout();
+    }
+
+    get marginBottom() {
+        return this.#marginBottom;
+    }
+
+    @prop({ type: Number, default: 0 })
+    set marginBottom(value: number) {
+        this.#marginBottom = finiteNumber(value, 0);
+        this.requestParentLayout();
+    }
+
+    get alignSelf() {
+        return this.#alignSelf;
+    }
+
+    @prop({ type: String, default: 'auto' })
+    set alignSelf(value: string) {
+        this.#alignSelf = parseAlignSelf(value);
+        this.requestParentLayout();
+    }
+
+    getFlexItemLayoutProps(): FlexItemLayoutProps {
+        const controlProps = this.getControlLayoutProps();
+        return {
+            grow: this.#grow,
+            shrink: this.#shrink,
+            basis: this.#basis,
+            minWidth: controlProps.minWidth,
+            minHeight: controlProps.minHeight,
+            maxWidth: this.#maxWidth,
+            maxHeight: this.#maxHeight,
+            marginLeft: this.#marginLeft,
+            marginRight: this.#marginRight,
+            marginTop: this.#marginTop,
+            marginBottom: this.#marginBottom,
+            alignSelf: this.#alignSelf,
+        };
+    }
+
+    override measureControlNaturalSize(): Size {
+        return measureChildren(this.default ?? this);
+    }
+}
+
+function parseBasis(value: string | number): FlexBasis {
+    if (value === 'auto') {
+        return 'auto';
+    }
+    const basis = finiteNumber(Number(value), -1);
+    return basis >= 0 ? basis : 'auto';
+}
+
+function parseAlignSelf(value: string): FlexAlignSelf {
+    if (value === 'start' || value === 'center' || value === 'end' || value === 'stretch') {
+        return value;
+    }
+    return 'auto';
+}
+
+function finiteNumber(value: number, fallback: number) {
+    return Number.isFinite(value) ? value : fallback;
+}

package/dist/builtin-scenes/FlexLayout.d.ts

@@ -0,0 +1,29 @@
+import { Container } from 'pixi.js';
+import { Control } from './Control.js';
+import type { Size } from './controlLayout.js';
+export declare class FlexLayout extends Control {
+    #private;
+    readonly default: Container;
+    get direction(): string;
+    set direction(value: string);
+    get align(): string;
+    set align(value: string);
+    get justify(): string;
+    set justify(value: string);
+    get gap(): number;
+    set gap(value: number);
+    get paddingX(): number;
+    set paddingX(value: number);
+    get paddingY(): number;
+    set paddingY(value: number);
+    get paddingLeft(): number;
+    set paddingLeft(value: number);
+    get paddingRight(): number;
+    set paddingRight(value: number);
+    get paddingTop(): number;
+    set paddingTop(value: number);
+    get paddingBottom(): number;
+    set paddingBottom(value: number);
+    layout(): void;
+    measureControlNaturalSize(): Size;
+}