pixifact 0.1.3 → 0.1.4

package/dist/builtin-scenes/MarginContainer.js

@@ -0,0 +1,131 @@
+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 { alignOffset, controlChildProps, controlMinSize, fillOrExpand, finiteNumber, parseAlign, setControlChildBox, } from './controlLayout.js';
+let MarginContainer = class MarginContainer extends Control {
+    #margin = 0;
+    #marginLeft;
+    #marginRight;
+    #marginTop;
+    #marginBottom;
+    #alignX = 'start';
+    #alignY = 'start';
+    #baseSizes = new WeakMap();
+    get margin() {
+        return this.#margin;
+    }
+    set margin(value) {
+        this.#margin = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+    get marginLeft() {
+        return this.#marginLeft ?? this.#margin;
+    }
+    set marginLeft(value) {
+        this.#marginLeft = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+    get marginRight() {
+        return this.#marginRight ?? this.#margin;
+    }
+    set marginRight(value) {
+        this.#marginRight = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+    get marginTop() {
+        return this.#marginTop ?? this.#margin;
+    }
+    set marginTop(value) {
+        this.#marginTop = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+    get marginBottom() {
+        return this.#marginBottom ?? this.#margin;
+    }
+    set marginBottom(value) {
+        this.#marginBottom = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+    get alignX() {
+        return this.#alignX;
+    }
+    set alignX(value) {
+        this.#alignX = parseAlign(value);
+        this.layout();
+    }
+    get alignY() {
+        return this.#alignY;
+    }
+    set alignY(value) {
+        this.#alignY = parseAlign(value);
+        this.layout();
+    }
+    layout() {
+        const size = this.syncControlBoxSize();
+        const children = this.default?.children;
+        if (!children || children.length === 0) {
+            return;
+        }
+        const innerWidth = Math.max(0, size.width - this.marginLeft - this.marginRight);
+        const innerHeight = Math.max(0, size.height - this.marginTop - this.marginBottom);
+        for (const child of children) {
+            const props = controlChildProps(child);
+            const childSize = controlMinSize(child, this.#baseSizes);
+            const childWidth = fillOrExpand(props.hSize) ? innerWidth : childSize.width;
+            const childHeight = fillOrExpand(props.vSize) ? innerHeight : childSize.height;
+            setControlChildBox(child, {
+                x: this.marginLeft + alignOffset(this.#alignX, Math.max(0, innerWidth - childWidth)),
+                y: this.marginTop + alignOffset(this.#alignY, Math.max(0, innerHeight - childHeight)),
+                width: childWidth,
+                height: childHeight,
+            });
+        }
+    }
+    measureControlNaturalSize() {
+        const children = this.default?.children;
+        if (!children || children.length === 0) {
+            return {
+                width: this.marginLeft + this.marginRight,
+                height: this.marginTop + this.marginBottom,
+            };
+        }
+        const sizes = children.map((child) => controlMinSize(child, this.#baseSizes));
+        return {
+            width: this.marginLeft + this.marginRight + sizes.reduce((max, size) => Math.max(max, size.width), 0),
+            height: this.marginTop + this.marginBottom + sizes.reduce((max, size) => Math.max(max, size.height), 0),
+        };
+    }
+};
+__decorate([
+    slot()
+], MarginContainer.prototype, "default", void 0);
+__decorate([
+    prop({ type: Number, default: 0 })
+], MarginContainer.prototype, "margin", null);
+__decorate([
+    prop({ type: Number })
+], MarginContainer.prototype, "marginLeft", null);
+__decorate([
+    prop({ type: Number })
+], MarginContainer.prototype, "marginRight", null);
+__decorate([
+    prop({ type: Number })
+], MarginContainer.prototype, "marginTop", null);
+__decorate([
+    prop({ type: Number })
+], MarginContainer.prototype, "marginBottom", null);
+__decorate([
+    prop({ type: String, default: 'start' })
+], MarginContainer.prototype, "alignX", null);
+__decorate([
+    prop({ type: String, default: 'start' })
+], MarginContainer.prototype, "alignY", null);
+MarginContainer = __decorate([
+    scene()
+], MarginContainer);
+export { MarginContainer };

package/dist/builtin-scenes/MarginContainer.scene

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

package/dist/builtin-scenes/MarginContainer.ts

@@ -0,0 +1,139 @@
+import { Container } from 'pixi.js';
+import { prop, scene, slot } from 'pixifact/compiler';
+import { Control } from './Control';
+import {
+    alignOffset,
+    controlChildProps,
+    controlMinSize,
+    fillOrExpand,
+    finiteNumber,
+    parseAlign,
+    setControlChildBox,
+    type ControlAlign,
+    type ControlLayoutChild,
+    type Size,
+} from './controlLayout';
+
+@scene()
+export class MarginContainer extends Control {
+    @slot()
+    declare readonly default: Container;
+
+    #margin = 0;
+    #marginLeft: number | undefined;
+    #marginRight: number | undefined;
+    #marginTop: number | undefined;
+    #marginBottom: number | undefined;
+    #alignX: ControlAlign = 'start';
+    #alignY: ControlAlign = 'start';
+    #baseSizes = new WeakMap<object, Size>();
+
+    get margin() {
+        return this.#margin;
+    }
+
+    @prop({ type: Number, default: 0 })
+    set margin(value: number) {
+        this.#margin = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+
+    get marginLeft() {
+        return this.#marginLeft ?? this.#margin;
+    }
+
+    @prop({ type: Number })
+    set marginLeft(value: number) {
+        this.#marginLeft = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+
+    get marginRight() {
+        return this.#marginRight ?? this.#margin;
+    }
+
+    @prop({ type: Number })
+    set marginRight(value: number) {
+        this.#marginRight = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+
+    get marginTop() {
+        return this.#marginTop ?? this.#margin;
+    }
+
+    @prop({ type: Number })
+    set marginTop(value: number) {
+        this.#marginTop = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+
+    get marginBottom() {
+        return this.#marginBottom ?? this.#margin;
+    }
+
+    @prop({ type: Number })
+    set marginBottom(value: number) {
+        this.#marginBottom = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+
+    get alignX() {
+        return this.#alignX;
+    }
+
+    @prop({ type: String, default: 'start' })
+    set alignX(value: string) {
+        this.#alignX = parseAlign(value);
+        this.layout();
+    }
+
+    get alignY() {
+        return this.#alignY;
+    }
+
+    @prop({ type: String, default: 'start' })
+    set alignY(value: string) {
+        this.#alignY = parseAlign(value);
+        this.layout();
+    }
+
+    override layout() {
+        const size = this.syncControlBoxSize();
+        const children = this.default?.children as ControlLayoutChild[] | undefined;
+        if (!children || children.length === 0) {
+            return;
+        }
+
+        const innerWidth = Math.max(0, size.width - this.marginLeft - this.marginRight);
+        const innerHeight = Math.max(0, size.height - this.marginTop - this.marginBottom);
+
+        for (const child of children) {
+            const props = controlChildProps(child);
+            const childSize = controlMinSize(child, this.#baseSizes);
+            const childWidth = fillOrExpand(props.hSize) ? innerWidth : childSize.width;
+            const childHeight = fillOrExpand(props.vSize) ? innerHeight : childSize.height;
+            setControlChildBox(child, {
+                x: this.marginLeft + alignOffset(this.#alignX, Math.max(0, innerWidth - childWidth)),
+                y: this.marginTop + alignOffset(this.#alignY, Math.max(0, innerHeight - childHeight)),
+                width: childWidth,
+                height: childHeight,
+            });
+        }
+    }
+
+    override measureControlNaturalSize(): Size {
+        const children = this.default?.children as ControlLayoutChild[] | undefined;
+        if (!children || children.length === 0) {
+            return {
+                width: this.marginLeft + this.marginRight,
+                height: this.marginTop + this.marginBottom,
+            };
+        }
+        const sizes = children.map((child) => controlMinSize(child, this.#baseSizes));
+        return {
+            width: this.marginLeft + this.marginRight + sizes.reduce((max, size) => Math.max(max, size.width), 0),
+            height: this.marginTop + this.marginBottom + sizes.reduce((max, size) => Math.max(max, size.height), 0),
+        };
+    }
+}

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

@@ -0,0 +1,15 @@
+import { Container } from 'pixi.js';
+import { Control } from './Control.js';
+import { type Size } from './controlLayout.js';
+export declare class VBoxContainer extends Control {
+    #private;
+    readonly default: Container;
+    get gap(): number;
+    set gap(value: number);
+    get alignX(): string;
+    set alignX(value: string);
+    get justify(): string;
+    set justify(value: string);
+    layout(): void;
+    measureControlNaturalSize(): Size;
+}

package/dist/builtin-scenes/VBoxContainer.js

@@ -0,0 +1,70 @@
+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 { finiteNumber, layoutStack, measureStackNaturalSize, parseAlign, parseJustify, } from './controlLayout.js';
+let VBoxContainer = class VBoxContainer extends Control {
+    #gap = 0;
+    #alignX = 'start';
+    #justify = 'start';
+    #baseSizes = new WeakMap();
+    get gap() {
+        return this.#gap;
+    }
+    set gap(value) {
+        this.#gap = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+    get alignX() {
+        return this.#alignX;
+    }
+    set alignX(value) {
+        this.#alignX = parseAlign(value);
+        this.layout();
+    }
+    get justify() {
+        return this.#justify;
+    }
+    set justify(value) {
+        this.#justify = parseJustify(value);
+        this.layout();
+    }
+    layout() {
+        this.syncControlBoxSize();
+        const assigned = this.getAssignedControlBoxSize();
+        layoutStack({
+            axis: 'vertical',
+            children: this.default?.children,
+            gap: this.#gap,
+            alignCross: this.#alignX,
+            justify: this.#justify,
+            baseSizes: this.#baseSizes,
+            width: assigned.width,
+            height: assigned.height,
+            naturalSize: () => this.measureControlNaturalSize(),
+        });
+    }
+    measureControlNaturalSize() {
+        return measureStackNaturalSize('vertical', this.default?.children, this.#gap, this.#baseSizes);
+    }
+};
+__decorate([
+    slot()
+], VBoxContainer.prototype, "default", void 0);
+__decorate([
+    prop({ type: Number, default: 0 })
+], VBoxContainer.prototype, "gap", null);
+__decorate([
+    prop({ type: String, default: 'start' })
+], VBoxContainer.prototype, "alignX", null);
+__decorate([
+    prop({ type: String, default: 'start' })
+], VBoxContainer.prototype, "justify", null);
+VBoxContainer = __decorate([
+    scene()
+], VBoxContainer);
+export { VBoxContainer };

package/dist/builtin-scenes/VBoxContainer.scene

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

package/dist/builtin-scenes/VBoxContainer.ts

@@ -0,0 +1,75 @@
+import { Container } from 'pixi.js';
+import { prop, scene, slot } from 'pixifact/compiler';
+import { Control } from './Control';
+import {
+    finiteNumber,
+    layoutStack,
+    measureStackNaturalSize,
+    parseAlign,
+    parseJustify,
+    type ControlAlign,
+    type ControlJustify,
+    type ControlLayoutChild,
+    type Size,
+} from './controlLayout';
+
+@scene()
+export class VBoxContainer extends Control {
+    @slot()
+    declare readonly default: Container;
+
+    #gap = 0;
+    #alignX: ControlAlign = 'start';
+    #justify: ControlJustify = 'start';
+    #baseSizes = new WeakMap<object, Size>();
+
+    get gap() {
+        return this.#gap;
+    }
+
+    @prop({ type: Number, default: 0 })
+    set gap(value: number) {
+        this.#gap = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+
+    get alignX() {
+        return this.#alignX;
+    }
+
+    @prop({ type: String, default: 'start' })
+    set alignX(value: string) {
+        this.#alignX = parseAlign(value);
+        this.layout();
+    }
+
+    get justify() {
+        return this.#justify;
+    }
+
+    @prop({ type: String, default: 'start' })
+    set justify(value: string) {
+        this.#justify = parseJustify(value);
+        this.layout();
+    }
+
+    override layout() {
+        this.syncControlBoxSize();
+        const assigned = this.getAssignedControlBoxSize();
+        layoutStack({
+            axis: 'vertical',
+            children: this.default?.children as ControlLayoutChild[] | undefined,
+            gap: this.#gap,
+            alignCross: this.#alignX,
+            justify: this.#justify,
+            baseSizes: this.#baseSizes,
+            width: assigned.width,
+            height: assigned.height,
+            naturalSize: () => this.measureControlNaturalSize(),
+        });
+    }
+
+    override measureControlNaturalSize(): Size {
+        return measureStackNaturalSize('vertical', this.default?.children as ControlLayoutChild[] | undefined, this.#gap, this.#baseSizes);
+    }
+}

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

@@ -0,0 +1,57 @@
+import { Container, type ContainerChild } from 'pixi.js';
+export type ControlSizeMode = 'content' | 'fill' | 'expand';
+export type ControlAlign = 'start' | 'center' | 'end';
+export type ControlJustify = 'start' | 'center' | 'end' | 'space-between';
+export type ControlAxis = 'horizontal' | 'vertical';
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Rect extends Size {
+    x: number;
+    y: number;
+}
+export interface ControlLayoutProps {
+    minWidth: number;
+    minHeight: number;
+    hSize: ControlSizeMode;
+    vSize: ControlSizeMode;
+    stretch: number;
+}
+export type ControlLayoutChild = ContainerChild & {
+    getControlLayoutProps?: () => ControlLayoutProps;
+    measureControlNaturalSize?: () => Size;
+    setControlLayoutBox?: (x: number, y: number, width: number, height: number) => void;
+};
+export declare const defaultControlLayoutProps: ControlLayoutProps;
+export declare function measureChildren(container: Container): Size;
+export declare function measureChildrenBounds(container: Container): Rect;
+export declare function measureControlChild(child: ControlLayoutChild, baseSizes: WeakMap<object, Size>): Size;
+export declare function controlChildProps(child: ControlLayoutChild): ControlLayoutProps;
+export declare function controlMinSize(child: ControlLayoutChild, baseSizes: WeakMap<object, Size>): Size;
+export declare function setControlChildBox(child: ControlLayoutChild, rect: Rect): void;
+export interface StackLayoutOptions {
+    axis: ControlAxis;
+    children: ControlLayoutChild[] | undefined;
+    gap: number;
+    alignCross: ControlAlign;
+    justify: ControlJustify;
+    baseSizes: WeakMap<object, Size>;
+    width: number | undefined;
+    height: number | undefined;
+    naturalSize: () => Size;
+}
+export declare function layoutStack(options: StackLayoutOptions): void;
+export declare function measureStackNaturalSize(axis: ControlAxis, children: ControlLayoutChild[] | undefined, gap: number, baseSizes: WeakMap<object, Size>): Size;
+export declare function fillOrExpand(mode: ControlSizeMode): mode is "fill" | "expand";
+export declare function crossAxis(axis: ControlAxis): ControlAxis;
+export declare function alignOffset(align: ControlAlign, available: number): number;
+export declare function justifyOffset(justify: ControlJustify, available: number): number;
+export declare function parseSizeMode(value: string): ControlSizeMode;
+export declare function parseAlign(value: string): ControlAlign;
+export declare function parseJustify(value: string): ControlJustify;
+export declare function finiteNumber(value: number, fallback: number): number;
+export declare function boxSize(value: number | {
+    width: number;
+    height?: number;
+}, height?: number): Size;