pixifact 0.1.3 → 0.1.4

package/README.md

@@ -2,7 +2,7 @@
 
 Pixifact is a Bun-first framework for AI-editable 2D game UI, HUDs, menus, and lightweight scenes on top of PixiJS v8.
 
-Use `pixifact` for runtime APIs, Scene instantiation, compiler APIs, and generated Scene runtime support.
+Use `pixifact` for project config helpers, the `Group` runtime node, compiler APIs, and generated Scene runtime support.
 
 ## Install
 
@@ -13,8 +13,8 @@ bun add pixifact pixi.js
 ## Usage
 
 ```ts
-import { Application } from 'pixifact/runtime';
-import { scene, container, text } from 'pixifact/scene';
+import { parseSceneTemplate } from 'pixifact/compiler';
+import { Group } from 'pixifact/runtime';
 ```
 
 Compiler Scene projects usually also install the CLI:

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

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

package/dist/builtin-scenes/CenterContainer.js

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

package/dist/builtin-scenes/CenterContainer.scene

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

package/dist/builtin-scenes/CenterContainer.ts

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

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

@@ -0,0 +1,44 @@
+import { Container } from 'pixi.js';
+import { Group } from 'pixifact/runtime';
+import { type ControlLayoutProps, type Size } from './controlLayout.js';
+export declare class Control extends Group {
+    #private;
+    readonly default: Container;
+    get width(): number;
+    set width(value: number);
+    get height(): number;
+    set height(value: number);
+    getSize(out?: Size): Size;
+    setSize(value: number | {
+        width: number;
+        height?: number;
+    }, height?: number): void;
+    get minWidth(): number;
+    set minWidth(value: number);
+    get minHeight(): number;
+    set minHeight(value: number);
+    get hSize(): string;
+    set hSize(value: string);
+    get vSize(): string;
+    set vSize(value: string);
+    get stretch(): number;
+    set stretch(value: number);
+    get alignX(): string;
+    set alignX(value: string);
+    get alignY(): string;
+    set alignY(value: string);
+    onMounted(): void;
+    getControlLayoutProps(): ControlLayoutProps;
+    measureControlNaturalSize(): Size;
+    setControlLayoutBox(x: number, y: number, width: number, height: number): void;
+    layout(): void;
+    protected layoutDefaultSlot(size?: Size): void;
+    protected syncControlBoxSize(): Size;
+    protected getControlBoxSize(): Size;
+    protected getAssignedControlBoxSize(): {
+        width: number | undefined;
+        height: number | undefined;
+    };
+    protected refreshControlLayout(): void;
+    protected requestParentLayout(): void;
+}

package/dist/builtin-scenes/Control.js

@@ -0,0 +1,206 @@
+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 { Group } from 'pixifact/runtime';
+import { alignOffset, boxSize, defaultControlLayoutProps, finiteNumber, measureChildren, measureChildrenBounds, parseAlign, parseSizeMode, } from './controlLayout.js';
+let Control = class Control extends Group {
+    default;
+    #explicitWidth;
+    #explicitHeight;
+    #layoutWidth;
+    #layoutHeight;
+    #minWidth = 0;
+    #minHeight = 0;
+    #hSize = 'content';
+    #vSize = 'content';
+    #stretch = 1;
+    #alignX = 'start';
+    #alignY = 'start';
+    get width() {
+        return this.getControlBoxSize().width;
+    }
+    set width(value) {
+        this.#explicitWidth = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+    get height() {
+        return this.getControlBoxSize().height;
+    }
+    set height(value) {
+        this.#explicitHeight = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+    getSize(out = { width: 0, height: 0 }) {
+        out.width = this.width;
+        out.height = this.height;
+        return out;
+    }
+    setSize(value, height) {
+        const size = boxSize(value, height);
+        this.#explicitWidth = size.width;
+        this.#explicitHeight = size.height;
+        this.refreshControlLayout();
+    }
+    get minWidth() {
+        return this.#minWidth;
+    }
+    set minWidth(value) {
+        this.#minWidth = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+    get minHeight() {
+        return this.#minHeight;
+    }
+    set minHeight(value) {
+        this.#minHeight = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+    get hSize() {
+        return this.#hSize;
+    }
+    set hSize(value) {
+        this.#hSize = parseSizeMode(value);
+        this.requestParentLayout();
+    }
+    get vSize() {
+        return this.#vSize;
+    }
+    set vSize(value) {
+        this.#vSize = parseSizeMode(value);
+        this.requestParentLayout();
+    }
+    get stretch() {
+        return this.#stretch;
+    }
+    set stretch(value) {
+        this.#stretch = Math.max(0, finiteNumber(value, 1));
+        this.requestParentLayout();
+    }
+    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();
+    }
+    onMounted() {
+        this.default.on('childAdded', this.#refreshFromChildren, this);
+        this.default.on('childRemoved', this.#refreshFromChildren, this);
+        this.once('destroyed', this.#unmountLayout, this);
+        this.layout();
+    }
+    #unmountLayout() {
+        this.default.off('childAdded', this.#refreshFromChildren, this);
+        this.default.off('childRemoved', this.#refreshFromChildren, this);
+    }
+    #refreshFromChildren() {
+        this.refreshControlLayout();
+    }
+    getControlLayoutProps() {
+        return {
+            ...defaultControlLayoutProps,
+            minWidth: this.#minWidth,
+            minHeight: this.#minHeight,
+            hSize: this.#hSize,
+            vSize: this.#vSize,
+            stretch: this.#stretch,
+        };
+    }
+    measureControlNaturalSize() {
+        const contentSize = this.default ? measureChildren(this.default) : { width: 0, height: 0 };
+        return {
+            width: Math.max(this.#minWidth, contentSize.width),
+            height: Math.max(this.#minHeight, contentSize.height),
+        };
+    }
+    setControlLayoutBox(x, y, width, height) {
+        this.position.set(x, y);
+        this.#layoutWidth = Math.max(0, finiteNumber(width, 0));
+        this.#layoutHeight = Math.max(0, finiteNumber(height, 0));
+        this.layout();
+    }
+    layout() {
+        const size = this.syncControlBoxSize();
+        this.layoutDefaultSlot(size);
+    }
+    layoutDefaultSlot(size = this.getControlBoxSize()) {
+        if (!this.default) {
+            return;
+        }
+        const bounds = measureChildrenBounds(this.default);
+        const offsetX = alignOffset(this.#alignX, Math.max(0, size.width - bounds.width)) - bounds.x;
+        const offsetY = alignOffset(this.#alignY, Math.max(0, size.height - bounds.height)) - bounds.y;
+        this.default.position.set(offsetX, offsetY);
+    }
+    syncControlBoxSize() {
+        const size = this.getControlBoxSize();
+        super.setSize(Math.max(0, finiteNumber(size.width, 0)), Math.max(0, finiteNumber(size.height, 0)));
+        return size;
+    }
+    getControlBoxSize() {
+        const natural = this.measureControlNaturalSize();
+        return {
+            width: this.#layoutWidth ?? this.#explicitWidth ?? natural.width,
+            height: this.#layoutHeight ?? this.#explicitHeight ?? natural.height,
+        };
+    }
+    getAssignedControlBoxSize() {
+        return {
+            width: this.#layoutWidth ?? this.#explicitWidth,
+            height: this.#layoutHeight ?? this.#explicitHeight,
+        };
+    }
+    refreshControlLayout() {
+        this.layout();
+        this.requestParentLayout();
+    }
+    requestParentLayout() {
+        let parent = this.parent;
+        while (parent) {
+            if (typeof parent.layout === 'function') {
+                parent.layout();
+                return;
+            }
+            parent = parent.parent;
+        }
+    }
+};
+__decorate([
+    slot()
+], Control.prototype, "default", void 0);
+__decorate([
+    prop({ type: Number, default: 0 })
+], Control.prototype, "minWidth", null);
+__decorate([
+    prop({ type: Number, default: 0 })
+], Control.prototype, "minHeight", null);
+__decorate([
+    prop({ type: String, default: 'content' })
+], Control.prototype, "hSize", null);
+__decorate([
+    prop({ type: String, default: 'content' })
+], Control.prototype, "vSize", null);
+__decorate([
+    prop({ type: Number, default: 1 })
+], Control.prototype, "stretch", null);
+__decorate([
+    prop({ type: String, default: 'start' })
+], Control.prototype, "alignX", null);
+__decorate([
+    prop({ type: String, default: 'start' })
+], Control.prototype, "alignY", null);
+Control = __decorate([
+    scene()
+], Control);
+export { Control };

package/dist/builtin-scenes/Control.scene

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

package/dist/builtin-scenes/Control.ts

@@ -0,0 +1,233 @@
+import { Container } from 'pixi.js';
+import { prop, scene, slot } from 'pixifact/compiler';
+import { Group } from 'pixifact/runtime';
+import {
+    alignOffset,
+    boxSize,
+    defaultControlLayoutProps,
+    finiteNumber,
+    measureChildren,
+    measureChildrenBounds,
+    parseAlign,
+    parseSizeMode,
+    type ControlAlign,
+    type ControlLayoutProps,
+    type ControlSizeMode,
+    type Size,
+} from './controlLayout';
+
+@scene()
+export class Control extends Group {
+    @slot()
+    readonly default!: Container;
+
+    #explicitWidth: number | undefined;
+    #explicitHeight: number | undefined;
+    #layoutWidth: number | undefined;
+    #layoutHeight: number | undefined;
+    #minWidth = 0;
+    #minHeight = 0;
+    #hSize: ControlSizeMode = 'content';
+    #vSize: ControlSizeMode = 'content';
+    #stretch = 1;
+    #alignX: ControlAlign = 'start';
+    #alignY: ControlAlign = 'start';
+
+    override get width() {
+        return this.getControlBoxSize().width;
+    }
+
+    override set width(value: number) {
+        this.#explicitWidth = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+
+    override get height() {
+        return this.getControlBoxSize().height;
+    }
+
+    override set height(value: number) {
+        this.#explicitHeight = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+
+    override getSize(out: Size = { width: 0, height: 0 }) {
+        out.width = this.width;
+        out.height = this.height;
+        return out;
+    }
+
+    override setSize(value: number | { width: number; height?: number }, height?: number) {
+        const size = boxSize(value, height);
+        this.#explicitWidth = size.width;
+        this.#explicitHeight = size.height;
+        this.refreshControlLayout();
+    }
+
+    get minWidth() {
+        return this.#minWidth;
+    }
+
+    @prop({ type: Number, default: 0 })
+    set minWidth(value: number) {
+        this.#minWidth = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+
+    get minHeight() {
+        return this.#minHeight;
+    }
+
+    @prop({ type: Number, default: 0 })
+    set minHeight(value: number) {
+        this.#minHeight = Math.max(0, finiteNumber(value, 0));
+        this.refreshControlLayout();
+    }
+
+    get hSize() {
+        return this.#hSize;
+    }
+
+    @prop({ type: String, default: 'content' })
+    set hSize(value: string) {
+        this.#hSize = parseSizeMode(value);
+        this.requestParentLayout();
+    }
+
+    get vSize() {
+        return this.#vSize;
+    }
+
+    @prop({ type: String, default: 'content' })
+    set vSize(value: string) {
+        this.#vSize = parseSizeMode(value);
+        this.requestParentLayout();
+    }
+
+    get stretch() {
+        return this.#stretch;
+    }
+
+    @prop({ type: Number, default: 1 })
+    set stretch(value: number) {
+        this.#stretch = Math.max(0, finiteNumber(value, 1));
+        this.requestParentLayout();
+    }
+
+    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();
+    }
+
+    onMounted() {
+        this.default.on('childAdded', this.#refreshFromChildren, this);
+        this.default.on('childRemoved', this.#refreshFromChildren, this);
+        this.once('destroyed', this.#unmountLayout, this);
+        this.layout();
+    }
+
+    #unmountLayout() {
+        this.default.off('childAdded', this.#refreshFromChildren, this);
+        this.default.off('childRemoved', this.#refreshFromChildren, this);
+    }
+
+    #refreshFromChildren() {
+        this.refreshControlLayout();
+    }
+
+    getControlLayoutProps(): ControlLayoutProps {
+        return {
+            ...defaultControlLayoutProps,
+            minWidth: this.#minWidth,
+            minHeight: this.#minHeight,
+            hSize: this.#hSize,
+            vSize: this.#vSize,
+            stretch: this.#stretch,
+        };
+    }
+
+    measureControlNaturalSize(): Size {
+        const contentSize = this.default ? measureChildren(this.default) : { width: 0, height: 0 };
+        return {
+            width: Math.max(this.#minWidth, contentSize.width),
+            height: Math.max(this.#minHeight, contentSize.height),
+        };
+    }
+
+    setControlLayoutBox(x: number, y: number, width: number, height: number) {
+        this.position.set(x, y);
+        this.#layoutWidth = Math.max(0, finiteNumber(width, 0));
+        this.#layoutHeight = Math.max(0, finiteNumber(height, 0));
+        this.layout();
+    }
+
+    layout() {
+        const size = this.syncControlBoxSize();
+        this.layoutDefaultSlot(size);
+    }
+
+    protected layoutDefaultSlot(size: Size = this.getControlBoxSize()) {
+        if (!this.default) {
+            return;
+        }
+        const bounds = measureChildrenBounds(this.default);
+        const offsetX = alignOffset(this.#alignX, Math.max(0, size.width - bounds.width)) - bounds.x;
+        const offsetY = alignOffset(this.#alignY, Math.max(0, size.height - bounds.height)) - bounds.y;
+        this.default.position.set(offsetX, offsetY);
+    }
+
+    protected syncControlBoxSize() {
+        const size = this.getControlBoxSize();
+        super.setSize(
+            Math.max(0, finiteNumber(size.width, 0)),
+            Math.max(0, finiteNumber(size.height, 0)),
+        );
+        return size;
+    }
+
+    protected getControlBoxSize(): Size {
+        const natural = this.measureControlNaturalSize();
+        return {
+            width: this.#layoutWidth ?? this.#explicitWidth ?? natural.width,
+            height: this.#layoutHeight ?? this.#explicitHeight ?? natural.height,
+        };
+    }
+
+    protected getAssignedControlBoxSize() {
+        return {
+            width: this.#layoutWidth ?? this.#explicitWidth,
+            height: this.#layoutHeight ?? this.#explicitHeight,
+        };
+    }
+
+    protected refreshControlLayout() {
+        this.layout();
+        this.requestParentLayout();
+    }
+
+    protected requestParentLayout() {
+        let parent = this.parent as (Container & { layout?: () => void }) | null;
+        while (parent) {
+            if (typeof parent.layout === 'function') {
+                parent.layout();
+                return;
+            }
+            parent = parent.parent as (Container & { layout?: () => void }) | null;
+        }
+    }
+}