pixifact 0.1.4 → 0.2.0

package/dist/runtime/index.d.ts

@@ -1 +1,13 @@
 export * from './Group.js';
+export * from './Control.js';
+export * from './Rect.js';
+export * from './Image.js';
+export * from './NineImage.js';
+export * from './TileImage.js';
+export * from './frameLayout.js';
+export * from './GridContainer.js';
+export * from './HBoxContainer.js';
+export * from './ScrollContainer.js';
+export * from './VBoxContainer.js';
+export * from './stackLayout.js';
+export * from '../viewport.js';

package/dist/runtime/index.js

@@ -1 +1,13 @@
 export * from './Group.js';
+export * from './Control.js';
+export * from './Rect.js';
+export * from './Image.js';
+export * from './NineImage.js';
+export * from './TileImage.js';
+export * from './frameLayout.js';
+export * from './GridContainer.js';
+export * from './HBoxContainer.js';
+export * from './ScrollContainer.js';
+export * from './VBoxContainer.js';
+export * from './stackLayout.js';
+export * from '../viewport.js';

package/dist/runtime/stackLayout.d.ts

@@ -0,0 +1,16 @@
+import type { ContainerChild } from 'pixi.js';
+export type StackAlign = 'start' | 'center' | 'end';
+export type StackJustify = 'start' | 'center' | 'end' | 'space-between';
+export type StackAxis = 'horizontal' | 'vertical';
+export interface StackSize {
+    width: number;
+    height: number;
+}
+export declare function finiteNumber(value: number, fallback: number): number;
+export declare function parseStackAlign(value: string): StackAlign;
+export declare function parseStackJustify(value: string): StackJustify;
+export declare function stackAlignOffset(align: StackAlign, available: number): number;
+export declare function stackJustifyOffset(justify: StackJustify, available: number): number;
+export declare function stackChildSize(child: ContainerChild): StackSize;
+export declare function measureStackNaturalSize(axis: StackAxis, children: readonly ContainerChild[], gap: number): StackSize;
+export declare function layoutChild(child: ContainerChild): void;

package/dist/runtime/stackLayout.js

@@ -0,0 +1,59 @@
+export function finiteNumber(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+export function parseStackAlign(value) {
+    if (value === 'center' || value === 'end') {
+        return value;
+    }
+    return 'start';
+}
+export function parseStackJustify(value) {
+    if (value === 'center' || value === 'end' || value === 'space-between') {
+        return value;
+    }
+    return 'start';
+}
+export function stackAlignOffset(align, available) {
+    if (align === 'center') {
+        return available / 2;
+    }
+    if (align === 'end') {
+        return available;
+    }
+    return 0;
+}
+export function stackJustifyOffset(justify, available) {
+    if (justify === 'center') {
+        return available / 2;
+    }
+    if (justify === 'end') {
+        return available;
+    }
+    return 0;
+}
+export function stackChildSize(child) {
+    return {
+        width: child.width,
+        height: child.height,
+    };
+}
+export function measureStackNaturalSize(axis, children, gap) {
+    if (children.length === 0) {
+        return { width: 0, height: 0 };
+    }
+    const gapTotal = gap * Math.max(0, children.length - 1);
+    const sizes = children.map(stackChildSize);
+    if (axis === 'horizontal') {
+        return {
+            width: sizes.reduce((sum, size) => sum + size.width, 0) + gapTotal,
+            height: sizes.reduce((max, size) => Math.max(max, size.height), 0),
+        };
+    }
+    return {
+        width: sizes.reduce((max, size) => Math.max(max, size.width), 0),
+        height: sizes.reduce((sum, size) => sum + size.height, 0) + gapTotal,
+    };
+}
+export function layoutChild(child) {
+    child.layout?.();
+}

package/dist/viewport.d.ts

@@ -0,0 +1,43 @@
+export declare const pixifactViewportModes: readonly ["showAll", "cover", "fixedWidth", "fixedHeight"];
+export type PixifactViewportMode = typeof pixifactViewportModes[number];
+export interface PixifactViewportConfig {
+    mode: PixifactViewportMode;
+}
+export interface PixifactViewportSize {
+    width: number;
+    height: number;
+}
+export interface PixifactViewportPoint {
+    x: number;
+    y: number;
+}
+export interface PixifactViewportRect extends PixifactViewportPoint, PixifactViewportSize {
+}
+export interface PixifactViewportLayout {
+    mode: PixifactViewportMode;
+    resolution: PixifactViewportSize;
+    screen: PixifactViewportSize;
+    scene: PixifactViewportSize;
+    visibleRect: PixifactViewportRect;
+    scale: number;
+    offset: PixifactViewportPoint;
+}
+export interface PixifactViewportLayoutTarget {
+    root: {
+        setSize(width: number, height: number): void;
+    };
+    stage: {
+        position: {
+            set(x: number, y: number): void;
+        };
+        scale: {
+            set(x: number, y?: number): void;
+        };
+    };
+}
+export declare function calculatePixifactViewportLayout(options: {
+    mode: PixifactViewportMode;
+    resolution: PixifactViewportSize;
+    screen: PixifactViewportSize;
+}): PixifactViewportLayout;
+export declare function applyPixifactViewportLayout(target: PixifactViewportLayoutTarget, layout: PixifactViewportLayout): void;

package/dist/viewport.js

@@ -0,0 +1,93 @@
+export const pixifactViewportModes = [
+    'showAll',
+    'cover',
+    'fixedWidth',
+    'fixedHeight',
+];
+export function calculatePixifactViewportLayout(options) {
+    const { mode, resolution, screen } = options;
+    if (mode === 'showAll') {
+        const scale = Math.min(screen.width / resolution.width, screen.height / resolution.height);
+        return {
+            mode,
+            resolution,
+            screen,
+            scene: { ...resolution },
+            visibleRect: { x: 0, y: 0, ...resolution },
+            scale,
+            offset: centeredOffset(resolution, screen, scale),
+        };
+    }
+    if (mode === 'cover') {
+        const scale = Math.max(screen.width / resolution.width, screen.height / resolution.height);
+        const visibleRect = centeredVisibleRect(resolution, screen, scale);
+        return {
+            mode,
+            resolution,
+            screen,
+            scene: { ...resolution },
+            visibleRect,
+            scale,
+            offset: {
+                x: cleanZero(-visibleRect.x * scale),
+                y: cleanZero(-visibleRect.y * scale),
+            },
+        };
+    }
+    if (mode === 'fixedWidth') {
+        const scale = screen.width / resolution.width;
+        const scene = {
+            width: resolution.width,
+            height: screen.height / scale,
+        };
+        return fixedViewportLayout(mode, resolution, screen, scene, scale);
+    }
+    const scale = screen.height / resolution.height;
+    const scene = {
+        width: screen.width / scale,
+        height: resolution.height,
+    };
+    return fixedViewportLayout(mode, resolution, screen, scene, scale);
+}
+export function applyPixifactViewportLayout(target, layout) {
+    target.root.setSize(layout.scene.width, layout.scene.height);
+    target.stage.position.set(layout.offset.x, layout.offset.y);
+    target.stage.scale.set(layout.scale, layout.scale);
+}
+function fixedViewportLayout(mode, resolution, screen, scene, scale) {
+    return {
+        mode,
+        resolution,
+        screen,
+        scene,
+        visibleRect: {
+            x: 0,
+            y: 0,
+            ...scene,
+        },
+        scale,
+        offset: {
+            x: 0,
+            y: 0,
+        },
+    };
+}
+function centeredOffset(scene, screen, scale) {
+    return {
+        x: cleanZero((screen.width - scene.width * scale) / 2),
+        y: cleanZero((screen.height - scene.height * scale) / 2),
+    };
+}
+function centeredVisibleRect(resolution, screen, scale) {
+    const width = screen.width / scale;
+    const height = screen.height / scale;
+    return {
+        x: cleanZero((resolution.width - width) / 2),
+        y: cleanZero((resolution.height - height) / 2),
+        width,
+        height,
+    };
+}
+function cleanZero(value) {
+    return Object.is(value, -0) ? 0 : value;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixifact",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Pixifact 2D UI 和轻量游戏 Scene 语义框架。",
   "packageManager": "bun@1.3.13",
   "main": "./dist/index.js",
@@ -26,7 +26,7 @@
   "author": "youxia <243802688@qq.com>",
   "license": "MIT",
   "scripts": {
-    "build": "bun scripts/clean-dist.mjs && bunx --no-install tsc -p tsconfig.build.json && bun scripts/fix-dist-esm-imports.mjs && bun scripts/copy-scene-assets.mjs"
+    "build": "bun scripts/clean-dist.mjs && bunx --no-install tsc -p tsconfig.build.json && bun scripts/fix-dist-esm-imports.mjs"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

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

@@ -1,13 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

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

package/dist/builtin-scenes/CenterContainer.ts

@@ -1,77 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,206 +0,0 @@
-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

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