pixifact 0.1.5 → 0.2.0

package/dist/runtime/Image.js

@@ -0,0 +1,220 @@
+import { Mesh, MeshGeometry, ObservablePoint, Rectangle, Texture } from 'pixi.js';
+import { frameLayoutProp, setFrameLayoutProp } from './frameLayoutAccessors.js';
+const quadIndices = new Uint32Array([0, 1, 2, 0, 2, 3]);
+const initializedImages = new WeakSet();
+export class Image extends Mesh {
+    #width = 96;
+    #height = 96;
+    #fit = 'stretch';
+    #anchor = new ObservablePoint({
+        _onUpdate: () => this.#syncGeometry(),
+    });
+    constructor(options = {}) {
+        const { texture, width, height, fit, anchorX, anchorY, ...meshOptions } = options;
+        super({
+            ...meshOptions,
+            texture: texture ?? Texture.EMPTY,
+            geometry: new MeshGeometry({
+                positions: new Float32Array(8),
+                uvs: new Float32Array(8),
+                indices: quadIndices,
+            }),
+        });
+        initializedImages.add(this);
+        this.texture.on('update', this.#syncGeometry, this);
+        this.#width = width ?? this.#width;
+        this.#height = height ?? this.#height;
+        this.#fit = fit ?? this.#fit;
+        this.#anchor.set(anchorX ?? 0, anchorY ?? 0);
+        this.#syncHitArea();
+        this.#syncGeometry();
+    }
+    get width() {
+        return this.#width;
+    }
+    set width(value) {
+        this.#setBoxSize(value, this.#height);
+    }
+    get height() {
+        return this.#height;
+    }
+    set height(value) {
+        this.#setBoxSize(this.#width, value);
+    }
+    getSize(out = { width: 0, height: 0 }) {
+        out.width = this.#width;
+        out.height = this.#height;
+        return out;
+    }
+    setSize(value, height) {
+        if (typeof value === 'number') {
+            this.#setBoxSize(value, height ?? value);
+        }
+        else {
+            this.#setBoxSize(value.width, value.height ?? value.width);
+        }
+    }
+    get texture() {
+        return super.texture;
+    }
+    set texture(value) {
+        if (!initializedImages.has(this)) {
+            super.texture = value;
+            return;
+        }
+        const currentTexture = super.texture;
+        currentTexture?.off('update', this.#syncGeometry, this);
+        super.texture = value;
+        value.on('update', this.#syncGeometry, this);
+        this.#syncGeometry();
+    }
+    get fit() {
+        return this.#fit;
+    }
+    set fit(value) {
+        this.#fit = value;
+        this.#syncGeometry();
+    }
+    get anchor() {
+        return this.#anchor;
+    }
+    set anchor(value) {
+        if (typeof value === 'number') {
+            this.#anchor.set(value);
+        }
+        else {
+            this.#anchor.set(value.x, value.y);
+        }
+    }
+    get left() {
+        return this.#layoutProp('left');
+    }
+    set left(value) {
+        this.#setLayoutProp('left', value);
+    }
+    get right() {
+        return this.#layoutProp('right');
+    }
+    set right(value) {
+        this.#setLayoutProp('right', value);
+    }
+    get top() {
+        return this.#layoutProp('top');
+    }
+    set top(value) {
+        this.#setLayoutProp('top', value);
+    }
+    get bottom() {
+        return this.#layoutProp('bottom');
+    }
+    set bottom(value) {
+        this.#setLayoutProp('bottom', value);
+    }
+    get horizontal() {
+        return this.#layoutProp('horizontal');
+    }
+    set horizontal(value) {
+        this.#setLayoutProp('horizontal', value);
+    }
+    get vertical() {
+        return this.#layoutProp('vertical');
+    }
+    set vertical(value) {
+        this.#setLayoutProp('vertical', value);
+    }
+    #layoutProp(prop) {
+        return frameLayoutProp(this, prop);
+    }
+    #setLayoutProp(prop, value) {
+        setFrameLayoutProp(this, prop, value);
+    }
+    #setBoxSize(width, height) {
+        this.#width = width;
+        this.#height = height;
+        this.#syncHitArea();
+        this.#syncGeometry();
+    }
+    #syncHitArea() {
+        const bounds = this.#boxBounds();
+        this.hitArea = bounds;
+        this.boundsArea = bounds;
+    }
+    #syncGeometry() {
+        this.#syncPositions();
+        this.#syncUvs();
+        this.geometry.positions = this.geometry.positions;
+        this.geometry.uvs = this.geometry.uvs;
+    }
+    #syncPositions() {
+        const positions = this.geometry.positions;
+        const draw = this.#drawRect();
+        positions[0] = draw.x;
+        positions[1] = draw.y;
+        positions[2] = draw.x + draw.width;
+        positions[3] = draw.y;
+        positions[4] = draw.x + draw.width;
+        positions[5] = draw.y + draw.height;
+        positions[6] = draw.x;
+        positions[7] = draw.y + draw.height;
+    }
+    #syncUvs() {
+        const uvs = this.geometry.uvs;
+        const crop = this.#uvCrop();
+        uvs[0] = crop.u0;
+        uvs[1] = crop.v0;
+        uvs[2] = crop.u1;
+        uvs[3] = crop.v0;
+        uvs[4] = crop.u1;
+        uvs[5] = crop.v1;
+        uvs[6] = crop.u0;
+        uvs[7] = crop.v1;
+    }
+    #drawRect() {
+        const box = this.#boxBounds();
+        if (this.#fit === 'contain') {
+            const size = containSize(this.texture.width, this.texture.height, this.#width, this.#height);
+            return centeredRect(size.width, size.height, box.x, box.y, box.width, box.height);
+        }
+        if (this.#fit === 'none') {
+            return new Rectangle(box.x, box.y, this.texture.width, this.texture.height);
+        }
+        return box;
+    }
+    #uvCrop() {
+        if (this.#fit !== 'cover') {
+            return { u0: 0, v0: 0, u1: 1, v1: 1 };
+        }
+        return coverUvCrop(this.texture.width, this.texture.height, this.#width, this.#height);
+    }
+    #boxBounds() {
+        return new Rectangle(-this.#anchor.x * this.#width, -this.#anchor.y * this.#height, this.#width, this.#height);
+    }
+}
+function containSize(textureWidth, textureHeight, boxWidth, boxHeight) {
+    if (textureWidth <= 0 || textureHeight <= 0 || boxWidth <= 0 || boxHeight <= 0) {
+        return { width: 0, height: 0 };
+    }
+    const scale = Math.min(boxWidth / textureWidth, boxHeight / textureHeight);
+    return {
+        width: textureWidth * scale,
+        height: textureHeight * scale,
+    };
+}
+function coverUvCrop(textureWidth, textureHeight, boxWidth, boxHeight) {
+    if (textureWidth <= 0 || textureHeight <= 0 || boxWidth <= 0 || boxHeight <= 0) {
+        return { u0: 0, v0: 0, u1: 1, v1: 1 };
+    }
+    const textureRatio = textureWidth / textureHeight;
+    const boxRatio = boxWidth / boxHeight;
+    if (textureRatio > boxRatio) {
+        const visibleWidth = boxRatio / textureRatio;
+        const inset = (1 - visibleWidth) / 2;
+        return { u0: inset, v0: 0, u1: 1 - inset, v1: 1 };
+    }
+    const visibleHeight = textureRatio / boxRatio;
+    const inset = (1 - visibleHeight) / 2;
+    return { u0: 0, v0: inset, u1: 1, v1: 1 - inset };
+}
+function centeredRect(width, height, boxX, boxY, boxWidth, boxHeight) {
+    return new Rectangle(boxX + (boxWidth - width) / 2, boxY + (boxHeight - height) / 2, width, height);
+}

package/dist/runtime/NineImage.d.ts

@@ -0,0 +1,22 @@
+import { NineSliceSprite, Texture, type NineSliceSpriteOptions } from 'pixi.js';
+export type NineImageOptions = Omit<NineSliceSpriteOptions, 'texture' | 'anchor'> & {
+    texture?: Texture;
+    anchorX?: number;
+    anchorY?: number;
+};
+export declare class NineImage extends NineSliceSprite {
+    #private;
+    constructor(options?: NineImageOptions);
+    get left(): number | undefined;
+    set left(value: number | undefined);
+    get right(): number | undefined;
+    set right(value: number | undefined);
+    get top(): number | undefined;
+    set top(value: number | undefined);
+    get bottom(): number | undefined;
+    set bottom(value: number | undefined);
+    get horizontal(): number | undefined;
+    set horizontal(value: number | undefined);
+    get vertical(): number | undefined;
+    set vertical(value: number | undefined);
+}

package/dist/runtime/NineImage.js

@@ -0,0 +1,54 @@
+import { NineSliceSprite, Texture } from 'pixi.js';
+import { frameLayoutProp, setFrameLayoutProp } from './frameLayoutAccessors.js';
+export class NineImage extends NineSliceSprite {
+    constructor(options = {}) {
+        const { texture, anchorX, anchorY, ...spriteOptions } = options;
+        super({
+            texture: texture ?? Texture.EMPTY,
+            ...spriteOptions,
+        });
+        this.anchor.set(anchorX ?? 0, anchorY ?? 0);
+    }
+    get left() {
+        return this.#layoutProp('left');
+    }
+    set left(value) {
+        this.#setLayoutProp('left', value);
+    }
+    get right() {
+        return this.#layoutProp('right');
+    }
+    set right(value) {
+        this.#setLayoutProp('right', value);
+    }
+    get top() {
+        return this.#layoutProp('top');
+    }
+    set top(value) {
+        this.#setLayoutProp('top', value);
+    }
+    get bottom() {
+        return this.#layoutProp('bottom');
+    }
+    set bottom(value) {
+        this.#setLayoutProp('bottom', value);
+    }
+    get horizontal() {
+        return this.#layoutProp('horizontal');
+    }
+    set horizontal(value) {
+        this.#setLayoutProp('horizontal', value);
+    }
+    get vertical() {
+        return this.#layoutProp('vertical');
+    }
+    set vertical(value) {
+        this.#setLayoutProp('vertical', value);
+    }
+    #layoutProp(prop) {
+        return frameLayoutProp(this, prop);
+    }
+    #setLayoutProp(prop, value) {
+        setFrameLayoutProp(this, prop, value);
+    }
+}

package/dist/runtime/Rect.d.ts

@@ -0,0 +1,48 @@
+import { Graphics, type GraphicsOptions, type Size } from 'pixi.js';
+export type RectOptions = GraphicsOptions & {
+    width?: number;
+    height?: number;
+    fillColor?: number;
+    fillAlpha?: number;
+    strokeColor?: number;
+    strokeAlpha?: number;
+    strokeWidth?: number;
+    radius?: number;
+};
+export declare class Rect extends Graphics {
+    #private;
+    constructor(options?: RectOptions);
+    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 fillColor(): number;
+    set fillColor(value: number);
+    get fillAlpha(): number;
+    set fillAlpha(value: number);
+    get strokeColor(): number;
+    set strokeColor(value: number);
+    get strokeAlpha(): number;
+    set strokeAlpha(value: number);
+    get strokeWidth(): number;
+    set strokeWidth(value: number);
+    get radius(): number;
+    set radius(value: number);
+    get left(): number | undefined;
+    set left(value: number | undefined);
+    get right(): number | undefined;
+    set right(value: number | undefined);
+    get top(): number | undefined;
+    set top(value: number | undefined);
+    get bottom(): number | undefined;
+    set bottom(value: number | undefined);
+    get horizontal(): number | undefined;
+    set horizontal(value: number | undefined);
+    get vertical(): number | undefined;
+    set vertical(value: number | undefined);
+}

package/dist/runtime/Rect.js

@@ -0,0 +1,162 @@
+import { Graphics, Rectangle } from 'pixi.js';
+import { getFrameLayout, setFrameLayout, } from './frameLayout.js';
+export class Rect extends Graphics {
+    #width = 100;
+    #height = 60;
+    #fillColor = 0xffffff;
+    #fillAlpha = 1;
+    #strokeColor = 0x000000;
+    #strokeAlpha = 1;
+    #strokeWidth = 0;
+    #radius = 0;
+    constructor(options = {}) {
+        const { width, height, fillColor, fillAlpha, strokeColor, strokeAlpha, strokeWidth, radius, ...graphicsOptions } = options;
+        super(graphicsOptions);
+        this.#width = width ?? this.#width;
+        this.#height = height ?? this.#height;
+        this.#fillColor = fillColor ?? this.#fillColor;
+        this.#fillAlpha = fillAlpha ?? this.#fillAlpha;
+        this.#strokeColor = strokeColor ?? this.#strokeColor;
+        this.#strokeAlpha = strokeAlpha ?? this.#strokeAlpha;
+        this.#strokeWidth = strokeWidth ?? this.#strokeWidth;
+        this.#radius = radius ?? this.#radius;
+        this.#syncHitArea();
+        this.#redraw();
+    }
+    get width() {
+        return this.#width;
+    }
+    set width(value) {
+        this.#setBoxSize(value, this.#height);
+    }
+    get height() {
+        return this.#height;
+    }
+    set height(value) {
+        this.#setBoxSize(this.#width, value);
+    }
+    getSize(out = { width: 0, height: 0 }) {
+        out.width = this.#width;
+        out.height = this.#height;
+        return out;
+    }
+    setSize(value, height) {
+        if (typeof value === 'number') {
+            this.#setBoxSize(value, height ?? value);
+        }
+        else {
+            this.#setBoxSize(value.width, value.height ?? value.width);
+        }
+    }
+    get fillColor() {
+        return this.#fillColor;
+    }
+    set fillColor(value) {
+        this.#fillColor = value;
+        this.#redraw();
+    }
+    get fillAlpha() {
+        return this.#fillAlpha;
+    }
+    set fillAlpha(value) {
+        this.#fillAlpha = value;
+        this.#redraw();
+    }
+    get strokeColor() {
+        return this.#strokeColor;
+    }
+    set strokeColor(value) {
+        this.#strokeColor = value;
+        this.#redraw();
+    }
+    get strokeAlpha() {
+        return this.#strokeAlpha;
+    }
+    set strokeAlpha(value) {
+        this.#strokeAlpha = value;
+        this.#redraw();
+    }
+    get strokeWidth() {
+        return this.#strokeWidth;
+    }
+    set strokeWidth(value) {
+        this.#strokeWidth = value;
+        this.#redraw();
+    }
+    get radius() {
+        return this.#radius;
+    }
+    set radius(value) {
+        this.#radius = value;
+        this.#redraw();
+    }
+    get left() {
+        return this.#layoutProp('left');
+    }
+    set left(value) {
+        this.#setLayoutProp('left', value);
+    }
+    get right() {
+        return this.#layoutProp('right');
+    }
+    set right(value) {
+        this.#setLayoutProp('right', value);
+    }
+    get top() {
+        return this.#layoutProp('top');
+    }
+    set top(value) {
+        this.#setLayoutProp('top', value);
+    }
+    get bottom() {
+        return this.#layoutProp('bottom');
+    }
+    set bottom(value) {
+        this.#setLayoutProp('bottom', value);
+    }
+    get horizontal() {
+        return this.#layoutProp('horizontal');
+    }
+    set horizontal(value) {
+        this.#setLayoutProp('horizontal', value);
+    }
+    get vertical() {
+        return this.#layoutProp('vertical');
+    }
+    set vertical(value) {
+        this.#setLayoutProp('vertical', value);
+    }
+    #layoutProp(prop) {
+        return getFrameLayout(this)[prop];
+    }
+    #setLayoutProp(prop, value) {
+        setFrameLayout(this, { [prop]: value });
+    }
+    #setBoxSize(width, height) {
+        this.#width = width;
+        this.#height = height;
+        this.#syncHitArea();
+        this.#redraw();
+    }
+    #syncHitArea() {
+        const bounds = new Rectangle(0, 0, this.#width, this.#height);
+        this.hitArea = bounds;
+        this.boundsArea = bounds;
+    }
+    #redraw() {
+        this.clear();
+        const radius = Math.max(0, Math.min(this.#radius, this.#width / 2, this.#height / 2));
+        const shape = radius > 0
+            ? this.roundRect(0, 0, this.#width, this.#height, radius)
+            : this.rect(0, 0, this.#width, this.#height);
+        shape.fill({ color: this.#fillColor, alpha: this.#fillAlpha });
+        if (this.#strokeWidth > 0) {
+            shape.stroke({
+                width: this.#strokeWidth,
+                color: this.#strokeColor,
+                alpha: this.#strokeAlpha,
+                alignment: 1,
+            });
+        }
+    }
+}

package/dist/runtime/ScrollContainer.d.ts

@@ -0,0 +1,28 @@
+import { Container, type ContainerChild, type DestroyOptions } from 'pixi.js';
+import { Control } from './Control.js';
+import type { GroupOptions } from './Group.js';
+export type ScrollDirection = 'vertical' | 'horizontal' | 'both';
+export type ScrollContainerOptions = GroupOptions & {
+    direction?: ScrollDirection;
+    scrollX?: number;
+    scrollY?: number;
+};
+export declare class ScrollContainer extends Control {
+    #private;
+    readonly contentLayer: Container<ContainerChild>;
+    constructor(options?: ScrollContainerOptions);
+    get direction(): ScrollDirection;
+    set direction(value: ScrollDirection);
+    get scrollX(): number;
+    set scrollX(value: number);
+    get scrollY(): number;
+    set scrollY(value: number);
+    addChild<U extends ContainerChild[]>(...children: U): U[0];
+    addChildAt<U extends ContainerChild>(child: U, index: number): U;
+    removeChild<U extends ContainerChild[]>(...children: U): U[0];
+    setChildIndex(child: ContainerChild, index: number): void;
+    getChildIndex(child: ContainerChild): number;
+    swapChildren(child: ContainerChild, child2: ContainerChild): void;
+    layout(): void;
+    destroy(options?: DestroyOptions): void;
+}