pixifact 0.1.4 → 0.2.0

package/dist/runtime/ScrollContainer.js

@@ -0,0 +1,370 @@
+import { Container, Graphics, Ticker, } from 'pixi.js';
+import { Control } from './Control.js';
+const elasticResistance = 0.5;
+const inertiaFriction = 0.92;
+const springStrength = 0.18;
+const springFriction = 0.72;
+const settleDistance = 0.05;
+const settleVelocity = 0.05;
+export class ScrollContainer extends Control {
+    contentLayer = new Container();
+    #mask = new Graphics();
+    #direction = 'vertical';
+    #targetScrollX = 0;
+    #targetScrollY = 0;
+    #scrollX = 0;
+    #scrollY = 0;
+    #velocityX = 0;
+    #velocityY = 0;
+    #animating = false;
+    #watchedContent = new Set();
+    #destroying = false;
+    #drag;
+    constructor(options = {}) {
+        const { direction, scrollX, scrollY, ...groupOptions } = options;
+        super(groupOptions);
+        this.#direction = direction ?? this.#direction;
+        this.#targetScrollX = scrollX ?? this.#targetScrollX;
+        this.#targetScrollY = scrollY ?? this.#targetScrollY;
+        this.eventMode = 'static';
+        this.contentLayer.mask = this.#mask;
+        this.contentLayer.on('childAdded', this.#handleContentChildAdded, this);
+        this.contentLayer.on('childRemoved', this.#handleContentChildRemoved, this);
+        super.addChild(this.contentLayer);
+        super.addChild(this.#mask);
+        this.on('wheel', this.#handleWheel, this);
+        this.on('pointerdown', this.#handlePointerDown, this);
+        this.on('globalpointermove', this.#handleGlobalPointerMove, this);
+        this.on('pointerup', this.#handlePointerUp, this);
+        this.on('pointerupoutside', this.#handlePointerUp, this);
+        this.on('pointercancel', this.#handlePointerUp, this);
+        this.layout();
+    }
+    get direction() {
+        return this.#direction;
+    }
+    set direction(value) {
+        this.#stopMomentum();
+        this.#direction = value;
+        this.#applyScroll();
+    }
+    get scrollX() {
+        return this.#scrollX;
+    }
+    set scrollX(value) {
+        this.#stopMomentum();
+        this.#targetScrollX = value;
+        this.#applyScroll();
+    }
+    get scrollY() {
+        return this.#scrollY;
+    }
+    set scrollY(value) {
+        this.#stopMomentum();
+        this.#targetScrollY = value;
+        this.#applyScroll();
+    }
+    addChild(...children) {
+        const child = this.contentLayer.addChild(...children);
+        this.layout();
+        return child;
+    }
+    addChildAt(child, index) {
+        const added = this.contentLayer.addChildAt(child, index);
+        this.layout();
+        return added;
+    }
+    removeChild(...children) {
+        const allContentChildren = children.every((child) => child.parent === this.contentLayer);
+        const child = allContentChildren
+            ? this.contentLayer.removeChild(...children)
+            : super.removeChild(...children);
+        this.layout();
+        return child;
+    }
+    setChildIndex(child, index) {
+        if (child.parent === this.contentLayer) {
+            this.contentLayer.setChildIndex(child, index);
+        }
+        else {
+            super.setChildIndex(child, index);
+        }
+        this.layout();
+    }
+    getChildIndex(child) {
+        return child.parent === this.contentLayer
+            ? this.contentLayer.getChildIndex(child)
+            : super.getChildIndex(child);
+    }
+    swapChildren(child, child2) {
+        if (child.parent === this.contentLayer && child2.parent === this.contentLayer) {
+            this.contentLayer.swapChildren(child, child2);
+        }
+        else {
+            super.swapChildren(child, child2);
+        }
+        this.layout();
+    }
+    layout() {
+        if (this.#destroying || this.destroyed) {
+            return;
+        }
+        super.layout();
+        this.#syncMask();
+        this.#applyScroll();
+    }
+    destroy(options) {
+        this.#destroying = true;
+        this.#stopMomentum();
+        this.contentLayer.off('childAdded', this.#handleContentChildAdded, this);
+        this.contentLayer.off('childRemoved', this.#handleContentChildRemoved, this);
+        for (const child of this.#watchedContent) {
+            child.off('childAdded', this.#handleWatchedContentChildAdded, this);
+            child.off('childRemoved', this.#handleWatchedContentChildRemoved, this);
+        }
+        this.#watchedContent.clear();
+        super.destroy(options);
+    }
+    #handleContentChildAdded(child) {
+        this.#watchContentSubtree(child);
+        this.layout();
+    }
+    #handleContentChildRemoved(child) {
+        this.#unwatchContentSubtree(child);
+        this.layout();
+    }
+    #handleWatchedContentChildAdded(child) {
+        this.#watchContentSubtree(child);
+        this.layout();
+    }
+    #handleWatchedContentChildRemoved(child) {
+        this.#unwatchContentSubtree(child);
+        this.layout();
+    }
+    #watchContentSubtree(child) {
+        if (this.#watchedContent.has(child)) {
+            return;
+        }
+        this.#watchedContent.add(child);
+        child.on('childAdded', this.#handleWatchedContentChildAdded, this);
+        child.on('childRemoved', this.#handleWatchedContentChildRemoved, this);
+        for (const descendant of child.children) {
+            this.#watchContentSubtree(descendant);
+        }
+    }
+    #unwatchContentSubtree(child) {
+        if (!this.#watchedContent.delete(child)) {
+            return;
+        }
+        child.off('childAdded', this.#handleWatchedContentChildAdded, this);
+        child.off('childRemoved', this.#handleWatchedContentChildRemoved, this);
+        for (const descendant of child.children) {
+            this.#unwatchContentSubtree(descendant);
+        }
+    }
+    #handleWheel(event) {
+        this.#stopMomentum();
+        const beforeX = this.#scrollX;
+        const beforeY = this.#scrollY;
+        if (this.#direction !== 'vertical') {
+            this.#targetScrollX = this.#scrollX + event.deltaX;
+        }
+        if (this.#direction !== 'horizontal') {
+            this.#targetScrollY = this.#scrollY + event.deltaY;
+        }
+        this.#applyScroll();
+        if (beforeX !== this.#scrollX || beforeY !== this.#scrollY) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    #handlePointerDown(event) {
+        this.#stopMomentum();
+        this.#velocityX = 0;
+        this.#velocityY = 0;
+        this.#drag = {
+            pointerId: event.pointerId,
+            globalX: event.global.x,
+            globalY: event.global.y,
+            scrollX: this.#scrollX,
+            scrollY: this.#scrollY,
+        };
+    }
+    #handleGlobalPointerMove(event) {
+        if (!this.#drag || event.pointerId !== this.#drag.pointerId) {
+            return;
+        }
+        const deltaX = event.global.x - this.#drag.globalX;
+        const deltaY = event.global.y - this.#drag.globalY;
+        const beforeX = this.#scrollX;
+        const beforeY = this.#scrollY;
+        if (this.#direction !== 'vertical') {
+            this.#drag.scrollX -= deltaX;
+            this.#targetScrollX = this.#drag.scrollX;
+        }
+        if (this.#direction !== 'horizontal') {
+            this.#drag.scrollY -= deltaY;
+            this.#targetScrollY = this.#drag.scrollY;
+        }
+        this.#applyElasticScroll();
+        this.#velocityX = this.#scrollX - beforeX;
+        this.#velocityY = this.#scrollY - beforeY;
+        this.#drag.globalX = event.global.x;
+        this.#drag.globalY = event.global.y;
+    }
+    #handlePointerUp(event) {
+        if (!this.#drag || event.pointerId !== this.#drag.pointerId) {
+            return;
+        }
+        this.#drag = undefined;
+        this.#startMomentum();
+    }
+    #syncMask() {
+        this.#mask.clear();
+        this.#mask.rect(0, 0, this.width, this.height).fill(0xffffff);
+    }
+    #applyScroll() {
+        const limits = this.#scrollLimits();
+        this.#setScrollPosition(clamp(this.#direction === 'vertical' ? 0 : this.#targetScrollX, 0, limits.x), clamp(this.#direction === 'horizontal' ? 0 : this.#targetScrollY, 0, limits.y));
+    }
+    #applyElasticScroll() {
+        const limits = this.#scrollLimits();
+        this.#setScrollPosition(this.#direction === 'vertical' ? 0 : elasticClamp(this.#targetScrollX, 0, limits.x), this.#direction === 'horizontal' ? 0 : elasticClamp(this.#targetScrollY, 0, limits.y));
+    }
+    #setScrollPosition(scrollX, scrollY) {
+        this.#scrollX = scrollX;
+        this.#scrollY = scrollY;
+        this.contentLayer.position.set(-this.#scrollX, -this.#scrollY);
+    }
+    #scrollLimits() {
+        const size = this.#contentSize();
+        return {
+            x: Math.max(0, size.width - this.width),
+            y: Math.max(0, size.height - this.height),
+        };
+    }
+    #startMomentum() {
+        if (this.#animating || !this.#needsMomentum()) {
+            return;
+        }
+        this.#animating = true;
+        Ticker.shared.add(this.#handleTick, this);
+    }
+    #stopMomentum() {
+        if (!this.#animating) {
+            return;
+        }
+        Ticker.shared.remove(this.#handleTick, this);
+        this.#animating = false;
+    }
+    #handleTick(ticker) {
+        if (this.#destroying || this.destroyed || this.#drag) {
+            this.#stopMomentum();
+            return;
+        }
+        const deltaTime = Math.min(ticker.deltaTime, 4);
+        const limits = this.#scrollLimits();
+        const nextX = this.#direction === 'vertical'
+            ? { value: 0, velocity: 0 }
+            : stepMomentumAxis(this.#scrollX, this.#velocityX, 0, limits.x, deltaTime);
+        const nextY = this.#direction === 'horizontal'
+            ? { value: 0, velocity: 0 }
+            : stepMomentumAxis(this.#scrollY, this.#velocityY, 0, limits.y, deltaTime);
+        this.#velocityX = nextX.velocity;
+        this.#velocityY = nextY.velocity;
+        this.#setScrollPosition(nextX.value, nextY.value);
+        this.#targetScrollX = this.#scrollX;
+        this.#targetScrollY = this.#scrollY;
+        if (!this.#needsMomentum()) {
+            this.#stopMomentum();
+        }
+    }
+    #needsMomentum() {
+        const limits = this.#scrollLimits();
+        return this.#direction !== 'vertical' && needsMomentumAxis(this.#scrollX, this.#velocityX, 0, limits.x)
+            || this.#direction !== 'horizontal' && needsMomentumAxis(this.#scrollY, this.#velocityY, 0, limits.y);
+    }
+    #contentSize() {
+        let width = 0;
+        let height = 0;
+        for (const child of this.contentLayer.children) {
+            const bounds = transformedLocalBounds(child);
+            width = Math.max(width, bounds.right);
+            height = Math.max(height, bounds.bottom);
+        }
+        return { width, height };
+    }
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function elasticClamp(value, min, max) {
+    if (value < min) {
+        return min + (value - min) * elasticResistance;
+    }
+    if (value > max) {
+        return max + (value - max) * elasticResistance;
+    }
+    return value;
+}
+function stepMomentumAxis(value, velocity, min, max, deltaTime) {
+    let nextVelocity = velocity;
+    const bound = nearestBound(value, min, max);
+    if (bound === undefined) {
+        nextVelocity *= Math.pow(inertiaFriction, deltaTime);
+    }
+    else {
+        nextVelocity += (bound - value) * springStrength * deltaTime;
+        nextVelocity *= Math.pow(springFriction, deltaTime);
+    }
+    let nextValue = value + nextVelocity * deltaTime;
+    const nextBound = nearestBound(nextValue, min, max);
+    if (bound !== undefined && nextBound === undefined) {
+        return {
+            value: bound,
+            velocity: 0,
+        };
+    }
+    if (nextBound !== undefined
+        && Math.abs(nextValue - nextBound) <= settleDistance
+        && Math.abs(nextVelocity) <= settleVelocity) {
+        nextValue = nextBound;
+        nextVelocity = 0;
+    }
+    return {
+        value: nextValue,
+        velocity: nextVelocity,
+    };
+}
+function needsMomentumAxis(value, velocity, min, max) {
+    return Math.abs(velocity) > settleVelocity || nearestBound(value, min, max) !== undefined;
+}
+function nearestBound(value, min, max) {
+    if (value < min) {
+        return min;
+    }
+    if (value > max) {
+        return max;
+    }
+    return undefined;
+}
+function transformedLocalBounds(child) {
+    child.updateLocalTransform();
+    const bounds = child.getLocalBounds();
+    if (!bounds.isValid) {
+        return { right: 0, bottom: 0 };
+    }
+    const transform = child.localTransform;
+    const x0 = transform.a * bounds.minX + transform.c * bounds.minY + transform.tx;
+    const y0 = transform.b * bounds.minX + transform.d * bounds.minY + transform.ty;
+    const x1 = transform.a * bounds.maxX + transform.c * bounds.minY + transform.tx;
+    const y1 = transform.b * bounds.maxX + transform.d * bounds.minY + transform.ty;
+    const x2 = transform.a * bounds.maxX + transform.c * bounds.maxY + transform.tx;
+    const y2 = transform.b * bounds.maxX + transform.d * bounds.maxY + transform.ty;
+    const x3 = transform.a * bounds.minX + transform.c * bounds.maxY + transform.tx;
+    const y3 = transform.b * bounds.minX + transform.d * bounds.maxY + transform.ty;
+    return {
+        right: Math.max(0, x0, x1, x2, x3),
+        bottom: Math.max(0, y0, y1, y2, y3),
+    };
+}

package/dist/runtime/TileImage.d.ts

@@ -0,0 +1,27 @@
+import { Texture, TilingSprite, type TilingSpriteOptions } from 'pixi.js';
+export type TileImageOptions = Omit<TilingSpriteOptions, 'texture' | 'anchor' | 'tilePosition' | 'tileScale' | 'tileRotation'> & {
+    texture?: Texture;
+    tilePositionX?: number;
+    tilePositionY?: number;
+    tileScaleX?: number;
+    tileScaleY?: number;
+    tileRotation?: number;
+    anchorX?: number;
+    anchorY?: number;
+};
+export declare class TileImage extends TilingSprite {
+    #private;
+    constructor(options?: TileImageOptions);
+    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/TileImage.js

@@ -0,0 +1,57 @@
+import { Texture, TilingSprite } from 'pixi.js';
+import { frameLayoutProp, setFrameLayoutProp } from './frameLayoutAccessors.js';
+export class TileImage extends TilingSprite {
+    constructor(options = {}) {
+        const { texture, tilePositionX, tilePositionY, tileScaleX, tileScaleY, tileRotation, anchorX, anchorY, ...spriteOptions } = options;
+        super({
+            texture: texture ?? Texture.EMPTY,
+            ...spriteOptions,
+        });
+        this.tilePosition.set(tilePositionX ?? 0, tilePositionY ?? 0);
+        this.tileScale.set(tileScaleX ?? 1, tileScaleY ?? 1);
+        this.tileRotation = tileRotation ?? 0;
+        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/VBoxContainer.d.ts

@@ -0,0 +1,21 @@
+import { Control } from './Control.js';
+import type { GroupOptions } from './Group.js';
+export declare class VBoxContainer extends Control {
+    #private;
+    constructor(options?: GroupOptions);
+    get width(): number;
+    set width(value: number);
+    get height(): number;
+    set height(value: number);
+    setSize(value: number | {
+        width: number;
+        height?: number;
+    }, height?: number): void;
+    get gap(): number;
+    set gap(value: number);
+    get alignX(): string;
+    set alignX(value: string);
+    get justify(): string;
+    set justify(value: string);
+    layout(): void;
+}

package/dist/runtime/VBoxContainer.js

@@ -0,0 +1,74 @@
+import { Control } from './Control.js';
+import { finiteNumber, layoutChild, measureStackNaturalSize, parseStackAlign, parseStackJustify, stackAlignOffset, stackChildSize, stackJustifyOffset, } from './stackLayout.js';
+export class VBoxContainer extends Control {
+    #gap = 0;
+    #alignX = 'start';
+    #justify = 'start';
+    #explicitWidth = false;
+    #explicitHeight = false;
+    constructor(options = {}) {
+        super(options);
+        this.#explicitWidth = options.width !== undefined;
+        this.#explicitHeight = options.height !== undefined;
+    }
+    get width() {
+        return super.width;
+    }
+    set width(value) {
+        this.#explicitWidth = true;
+        super.width = value;
+    }
+    get height() {
+        return super.height;
+    }
+    set height(value) {
+        this.#explicitHeight = true;
+        super.height = value;
+    }
+    setSize(value, height) {
+        this.#explicitWidth = true;
+        this.#explicitHeight = true;
+        super.setSize(value, height);
+    }
+    get gap() {
+        return this.#gap;
+    }
+    set gap(value) {
+        this.#gap = Math.max(0, finiteNumber(value, 0));
+        this.layout();
+    }
+    get alignX() {
+        return this.#alignX;
+    }
+    set alignX(value) {
+        this.#alignX = parseStackAlign(value);
+        this.layout();
+    }
+    get justify() {
+        return this.#justify;
+    }
+    set justify(value) {
+        this.#justify = parseStackJustify(value);
+        this.layout();
+    }
+    layout() {
+        const children = this.children;
+        const natural = measureStackNaturalSize('vertical', children, this.#gap);
+        const width = this.#explicitWidth ? this.width : natural.width;
+        const height = this.#explicitHeight ? this.height : natural.height;
+        if (width !== this.width || height !== this.height) {
+            this.setBoxSize(width, height);
+        }
+        const remaining = Math.max(0, height - natural.height);
+        const gap = this.#justify === 'space-between' && children.length > 1
+            ? this.#gap + remaining / (children.length - 1)
+            : this.#gap;
+        let cursor = stackJustifyOffset(this.#justify, remaining);
+        for (const child of children) {
+            const size = stackChildSize(child);
+            child.position.set(stackAlignOffset(this.#alignX, Math.max(0, width - size.width)), cursor);
+            layoutChild(child);
+            cursor += size.height + gap;
+        }
+    }
+}

package/dist/runtime/frameLayout.d.ts

@@ -0,0 +1,11 @@
+import type { Container } from 'pixi.js';
+export declare const frameLayoutProps: readonly ["left", "right", "top", "bottom", "horizontal", "vertical"];
+export type FrameLayoutProp = typeof frameLayoutProps[number];
+export type FrameLayout = Partial<Record<FrameLayoutProp, number>>;
+export declare function getFrameLayout(target: object): FrameLayout;
+export declare function setFrameLayout(target: Container, layout: FrameLayout): void;
+export declare function layoutFrameChildren(parent: Container & {
+    width: number;
+    height: number;
+}): void;
+export declare function requestFrameLayout(target: Container | null | undefined): void;

package/dist/runtime/frameLayout.js

@@ -0,0 +1,116 @@
+export const frameLayoutProps = [
+    'left',
+    'right',
+    'top',
+    'bottom',
+    'horizontal',
+    'vertical',
+];
+const frameLayouts = new WeakMap();
+export function getFrameLayout(target) {
+    return frameLayouts.get(target) ?? {};
+}
+export function setFrameLayout(target, layout) {
+    const next = { ...getFrameLayout(target) };
+    for (const key of frameLayoutProps) {
+        if (!(key in layout)) {
+            continue;
+        }
+        const value = layout[key];
+        if (value === undefined) {
+            delete next[key];
+        }
+        else {
+            next[key] = value;
+        }
+    }
+    if (Object.keys(next).length === 0) {
+        frameLayouts.delete(target);
+    }
+    else {
+        frameLayouts.set(target, next);
+    }
+    requestFrameLayout(target.parent);
+}
+export function layoutFrameChildren(parent) {
+    for (const child of parent.children) {
+        layoutFrameChild(parent, child);
+    }
+}
+export function requestFrameLayout(target) {
+    let current = target;
+    while (current) {
+        if (typeof current.layout === 'function') {
+            current.layout();
+            return;
+        }
+        current = current.parent;
+    }
+}
+function layoutFrameChild(parent, child) {
+    const layout = frameLayouts.get(child);
+    if (!layout) {
+        return;
+    }
+    const horizontal = resolveAxis({
+        start: layout.left,
+        end: layout.right,
+        center: layout.horizontal,
+        parentSize: parent.width,
+        childSize: child.width,
+    });
+    const vertical = resolveAxis({
+        start: layout.top,
+        end: layout.bottom,
+        center: layout.vertical,
+        parentSize: parent.height,
+        childSize: child.height,
+    });
+    if (horizontal.position !== undefined || vertical.position !== undefined) {
+        child.position.set(horizontal.position ?? child.x, vertical.position ?? child.y);
+    }
+    if (horizontal.size !== undefined || vertical.size !== undefined) {
+        setChildSize(child, horizontal.size ?? child.width, vertical.size ?? child.height);
+    }
+    const childLayout = child;
+    childLayout.layout?.();
+}
+function setChildSize(child, width, height) {
+    const sizedChild = child;
+    if (sizedChild.setSize) {
+        sizedChild.setSize(width, height);
+        return;
+    }
+    child.width = width;
+    child.height = height;
+}
+function resolveAxis(options) {
+    if (options.start !== undefined && options.end !== undefined) {
+        return {
+            position: options.start,
+            size: Math.max(0, options.parentSize - options.start - options.end),
+        };
+    }
+    if (options.start !== undefined) {
+        return {
+            position: options.start,
+            size: undefined,
+        };
+    }
+    if (options.end !== undefined) {
+        return {
+            position: options.parentSize - options.end - options.childSize,
+            size: undefined,
+        };
+    }
+    if (options.center !== undefined) {
+        return {
+            position: (options.parentSize - options.childSize) / 2 + options.center,
+            size: undefined,
+        };
+    }
+    return {
+        position: undefined,
+        size: undefined,
+    };
+}

package/dist/runtime/frameLayoutAccessors.d.ts

@@ -0,0 +1,4 @@
+import type { Container } from 'pixi.js';
+import { type FrameLayoutProp } from './frameLayout.js';
+export declare function frameLayoutProp(target: object, prop: FrameLayoutProp): number | undefined;
+export declare function setFrameLayoutProp(target: Container, prop: FrameLayoutProp, value: number | undefined): void;

package/dist/runtime/frameLayoutAccessors.js

@@ -0,0 +1,7 @@
+import { getFrameLayout, setFrameLayout, } from './frameLayout.js';
+export function frameLayoutProp(target, prop) {
+    return getFrameLayout(target)[prop];
+}
+export function setFrameLayoutProp(target, prop, value) {
+    setFrameLayout(target, { [prop]: value });
+}