pixifact 0.4.0 → 0.6.0

package/dist/errors.js

@@ -8,8 +8,11 @@ export function hintForCommandError(error) {
     if (error.includes('Unknown template kind')) {
         return 'Use one of: button, progressBar, scrollView, loginForm.';
     }
+    if (error.includes('Node locator') && error.includes('was not found')) {
+        return 'Run scene inspect --scene <scene-path> and pass one of the returned node locator values.';
+    }
     if (error.includes('was not found')) {
-        return 'Re-run scene get or node inspect to refresh locators before regenerating the command.';
+        return 'Inspect the current project state again before regenerating the command.';
     }
     if (error.includes('Only container nodes')) {
         return 'Choose a container node as the parent, or create a container template before adding children.';

package/dist/runtime/BitmapLabel.d.ts

@@ -0,0 +1,9 @@
+import { BitmapText } from 'pixi.js';
+import { TextBoxControl, type TextBoxAlign, type TextBoxFontWeight, type TextBoxOptions, type TextBoxOverflow } from './TextBoxControl.js';
+export type BitmapLabelAlign = TextBoxAlign;
+export type BitmapLabelOverflow = TextBoxOverflow;
+export type BitmapLabelFontWeight = TextBoxFontWeight;
+export type BitmapLabelOptions = TextBoxOptions;
+export declare class BitmapLabel extends TextBoxControl<BitmapText> {
+    constructor(options?: BitmapLabelOptions);
+}

package/dist/runtime/BitmapLabel.js

@@ -0,0 +1,7 @@
+import { BitmapText } from 'pixi.js';
+import { TextBoxControl, } from './TextBoxControl.js';
+export class BitmapLabel extends TextBoxControl {
+    constructor(options = {}) {
+        super(options, (textOptions) => new BitmapText(textOptions));
+    }
+}

package/dist/runtime/Label.d.ts

@@ -0,0 +1,9 @@
+import { Text } from 'pixi.js';
+import { TextBoxControl, type TextBoxAlign, type TextBoxFontWeight, type TextBoxOptions, type TextBoxOverflow } from './TextBoxControl.js';
+export type LabelAlign = TextBoxAlign;
+export type LabelOverflow = TextBoxOverflow;
+export type LabelFontWeight = TextBoxFontWeight;
+export type LabelOptions = TextBoxOptions;
+export declare class Label extends TextBoxControl<Text> {
+    constructor(options?: LabelOptions);
+}

package/dist/runtime/Label.js

@@ -0,0 +1,7 @@
+import { Text } from 'pixi.js';
+import { TextBoxControl, } from './TextBoxControl.js';
+export class Label extends TextBoxControl {
+    constructor(options = {}) {
+        super(options, (textOptions) => new Text(textOptions));
+    }
+}

package/dist/runtime/ScrollContainer.d.ts

@@ -1,6 +1,7 @@
 import { Container, type ContainerChild, type DestroyOptions } from 'pixi.js';
 import { Control } from './Control.js';
 import type { GroupOptions } from './Group.js';
+import { runtimeBehavior } from './runtimeBehavior.js';
 export type ScrollDirection = 'vertical' | 'horizontal' | 'both';
 export type ScrollContainerOptions = GroupOptions & {
     direction?: ScrollDirection;
@@ -11,6 +12,7 @@ export declare class ScrollContainer extends Control {
     #private;
     readonly contentLayer: Container<ContainerChild>;
     constructor(options?: ScrollContainerOptions);
+    [runtimeBehavior](): void;
     get direction(): ScrollDirection;
     set direction(value: ScrollDirection);
     get scrollX(): number;

package/dist/runtime/ScrollContainer.js

@@ -1,5 +1,6 @@
 import { Container, Graphics, Ticker, } from 'pixi.js';
 import { Control } from './Control.js';
+import { runtimeBehavior } from './runtimeBehavior.js';
 const elasticResistance = 0.5;
 const inertiaFriction = 0.92;
 const springStrength = 0.18;
@@ -26,19 +27,21 @@ export class ScrollContainer extends Control {
         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.layout();
+    }
+    [runtimeBehavior]() {
+        this.eventMode = 'static';
         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;
@@ -116,6 +119,13 @@ export class ScrollContainer extends Control {
     destroy(options) {
         this.#destroying = true;
         this.#stopMomentum();
+        this.#drag = undefined;
+        this.off('wheel', this.#handleWheel, this);
+        this.off('pointerdown', this.#handlePointerDown, this);
+        this.off('globalpointermove', this.#handleGlobalPointerMove, this);
+        this.off('pointerup', this.#handlePointerUp, this);
+        this.off('pointerupoutside', this.#handlePointerUp, this);
+        this.off('pointercancel', this.#handlePointerUp, this);
         this.contentLayer.off('childAdded', this.#handleContentChildAdded, this);
         this.contentLayer.off('childRemoved', this.#handleContentChildRemoved, this);
         for (const child of this.#watchedContent) {

package/dist/runtime/TextBoxControl.d.ts

@@ -0,0 +1,48 @@
+import { BitmapText, Text, type TextOptions } from 'pixi.js';
+import { Control } from './Control.js';
+import type { GroupOptions } from './Group.js';
+export type TextBoxAlign = 'start' | 'center' | 'end';
+export type TextBoxOverflow = 'visible' | 'clip';
+export type TextBoxFontWeight = 400 | 500 | 600 | 700 | '400' | '500' | '600' | '700' | 'bold';
+export type TextBoxOptions = GroupOptions & {
+    text?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: TextBoxFontWeight;
+    fill?: number;
+    lineHeight?: number;
+    letterSpacing?: number;
+    wordWrap?: boolean;
+    alignX?: TextBoxAlign;
+    alignY?: TextBoxAlign;
+    overflow?: TextBoxOverflow;
+};
+type TextBoxRenderer = Text | BitmapText;
+export declare class TextBoxControl<T extends TextBoxRenderer> extends Control {
+    #private;
+    constructor(options: TextBoxOptions, createTextNode: (options: TextOptions) => T);
+    get text(): string;
+    set text(value: string);
+    get fontFamily(): string;
+    set fontFamily(value: string);
+    get fontSize(): number;
+    set fontSize(value: number);
+    get fontWeight(): TextBoxFontWeight;
+    set fontWeight(value: TextBoxFontWeight);
+    get fill(): number;
+    set fill(value: number);
+    get lineHeight(): number;
+    set lineHeight(value: number);
+    get letterSpacing(): number;
+    set letterSpacing(value: number);
+    get wordWrap(): boolean;
+    set wordWrap(value: boolean);
+    get alignX(): TextBoxAlign;
+    set alignX(value: TextBoxAlign);
+    get alignY(): TextBoxAlign;
+    set alignY(value: TextBoxAlign);
+    get overflow(): TextBoxOverflow;
+    set overflow(value: TextBoxOverflow);
+    layout(): void;
+}
+export {};

package/dist/runtime/TextBoxControl.js

@@ -0,0 +1,162 @@
+import { Graphics, } from 'pixi.js';
+import { Control } from './Control.js';
+export class TextBoxControl extends Control {
+    #textNode;
+    #clipMask = new Graphics();
+    #fontFamily = 'Arial';
+    #fontSize = 16;
+    #fontWeight = 400;
+    #fill = 0x111827;
+    #lineHeight = 0;
+    #letterSpacing = 0;
+    #wordWrap = false;
+    #alignX = 'start';
+    #alignY = 'start';
+    #overflow = 'visible';
+    constructor(options, createTextNode) {
+        const { text = 'Text', width = 120, height = 28, fontFamily = 'Arial', fontSize = 16, fontWeight = 400, fill = 0x111827, lineHeight = 0, letterSpacing = 0, wordWrap = false, alignX = 'start', alignY = 'start', overflow = 'visible', ...groupOptions } = options;
+        super({ ...groupOptions, width, height });
+        this.#fontFamily = fontFamily;
+        this.#fontSize = fontSize;
+        this.#fontWeight = fontWeight;
+        this.#fill = fill;
+        this.#lineHeight = lineHeight;
+        this.#letterSpacing = letterSpacing;
+        this.#wordWrap = wordWrap;
+        this.#alignX = alignX;
+        this.#alignY = alignY;
+        this.#overflow = overflow;
+        this.#textNode = createTextNode({
+            text,
+            style: {
+                fontFamily,
+                fontSize,
+                fontWeight: String(fontWeight),
+                fill,
+                lineHeight,
+                letterSpacing,
+                wordWrap,
+                wordWrapWidth: width,
+                align: horizontalTextAlign(alignX),
+            },
+        });
+        super.addChild(this.#textNode, this.#clipMask);
+        this.layout();
+    }
+    get text() {
+        return this.#textNode.text;
+    }
+    set text(value) {
+        this.#textNode.text = value;
+        this.layout();
+    }
+    get fontFamily() {
+        return this.#fontFamily;
+    }
+    set fontFamily(value) {
+        this.#fontFamily = value;
+        this.#textNode.style.fontFamily = value;
+        this.layout();
+    }
+    get fontSize() {
+        return this.#fontSize;
+    }
+    set fontSize(value) {
+        this.#fontSize = value;
+        this.#textNode.style.fontSize = value;
+        this.layout();
+    }
+    get fontWeight() {
+        return this.#fontWeight;
+    }
+    set fontWeight(value) {
+        this.#fontWeight = value;
+        this.#textNode.style.fontWeight = String(value);
+        this.layout();
+    }
+    get fill() {
+        return this.#fill;
+    }
+    set fill(value) {
+        this.#fill = value;
+        this.#textNode.style.fill = value;
+        this.layout();
+    }
+    get lineHeight() {
+        return this.#lineHeight;
+    }
+    set lineHeight(value) {
+        this.#lineHeight = value;
+        this.#textNode.style.lineHeight = value;
+        this.layout();
+    }
+    get letterSpacing() {
+        return this.#letterSpacing;
+    }
+    set letterSpacing(value) {
+        this.#letterSpacing = value;
+        this.#textNode.style.letterSpacing = value;
+        this.layout();
+    }
+    get wordWrap() {
+        return this.#wordWrap;
+    }
+    set wordWrap(value) {
+        this.#wordWrap = value;
+        this.#textNode.style.wordWrap = value;
+        this.layout();
+    }
+    get alignX() {
+        return this.#alignX;
+    }
+    set alignX(value) {
+        this.#alignX = value;
+        this.#textNode.style.align = horizontalTextAlign(value);
+        this.layout();
+    }
+    get alignY() {
+        return this.#alignY;
+    }
+    set alignY(value) {
+        this.#alignY = value;
+        this.layout();
+    }
+    get overflow() {
+        return this.#overflow;
+    }
+    set overflow(value) {
+        this.#overflow = value;
+        this.layout();
+    }
+    layout() {
+        super.layout();
+        if (!this.#textNode) {
+            return;
+        }
+        this.#textNode.style.wordWrapWidth = this.width;
+        this.#textNode.anchor.set(alignmentFactor(this.#alignX), alignmentFactor(this.#alignY));
+        this.#textNode.position.set(this.width * alignmentFactor(this.#alignX), this.height * alignmentFactor(this.#alignY));
+        this.#clipMask.clear().rect(0, 0, this.width, this.height).fill(0xffffff);
+        const clip = this.#overflow === 'clip';
+        this.#clipMask.visible = clip;
+        this.#textNode.mask = clip ? this.#clipMask : null;
+    }
+}
+function horizontalTextAlign(align) {
+    if (align === 'center') {
+        return 'center';
+    }
+    if (align === 'end') {
+        return 'right';
+    }
+    return 'left';
+}
+function alignmentFactor(align) {
+    if (align === 'center') {
+        return 0.5;
+    }
+    if (align === 'end') {
+        return 1;
+    }
+    return 0;
+}

package/dist/runtime/index.d.ts

@@ -1,5 +1,7 @@
 export * from './Group.js';
 export * from './Control.js';
+export * from './Label.js';
+export * from './BitmapLabel.js';
 export * from './Rect.js';
 export * from './Image.js';
 export * from './NineImage.js';

package/dist/runtime/index.js

@@ -1,5 +1,7 @@
 export * from './Group.js';
 export * from './Control.js';
+export * from './Label.js';
+export * from './BitmapLabel.js';
 export * from './Rect.js';
 export * from './Image.js';
 export * from './NineImage.js';

package/dist/runtime/runtimeBehavior.d.ts

@@ -0,0 +1,3 @@
+import type { Container } from 'pixi.js';
+export declare const runtimeBehavior: unique symbol;
+export declare function activateRuntimeTree(root: Container): void;

package/dist/runtime/runtimeBehavior.js

@@ -0,0 +1,11 @@
+export const runtimeBehavior = Symbol('pixifact.runtimeBehavior');
+const activatedContainers = new WeakSet();
+export function activateRuntimeTree(root) {
+    if (runtimeBehavior in root && !activatedContainers.has(root)) {
+        activatedContainers.add(root);
+        root[runtimeBehavior]();
+    }
+    for (const child of root.children) {
+        activateRuntimeTree(child);
+    }
+}

package/dist/runtime-dev/index.d.ts

@@ -0,0 +1,5 @@
+import type { Application } from 'pixi.js';
+import { type RegisterPixiRuntimeOptions } from './runtimeClient.js';
+export declare function registerPixiRuntime(app: Application, options?: RegisterPixiRuntimeOptions): void;
+export type { RegisterPixiRuntimeOptions } from './runtimeClient.js';
+export type { RuntimeJsonValue, RuntimeLogLevel, RuntimePageDescriptor, RuntimeRequest, } from './protocol.js';

package/dist/runtime-dev/index.js

@@ -0,0 +1,22 @@
+import { createPixifactRuntimeClient, } from './runtimeClient.js';
+const runtimeHotKey = Symbol.for('pixifact.runtime.hot');
+const runtimeClientKey = Symbol.for('pixifact.runtime.client');
+const runtimeGlobal = globalThis;
+const injectedHot = runtimeGlobal[runtimeHotKey];
+const existingRuntimeClient = runtimeGlobal[runtimeClientKey];
+const runtimeClient = existingRuntimeClient ?? (injectedHot
+    ? createPixifactRuntimeClient({
+        runtimeId: crypto.randomUUID(),
+        hot: injectedHot,
+        console,
+        window,
+    })
+    : undefined);
+if (runtimeClient && !existingRuntimeClient)
+    runtimeGlobal[runtimeClientKey] = runtimeClient;
+export function registerPixiRuntime(app, options = {}) {
+    if (!runtimeClient) {
+        throw new Error('registerPixiRuntime requires pixifactRuntimePlugin in the Vite development server.');
+    }
+    runtimeClient.register(app, options);
+}

package/dist/runtime-dev/protocol.d.ts

@@ -0,0 +1,58 @@
+export declare const pixifactRuntimeProtocolVersion = 1;
+export type RuntimeJsonPrimitive = boolean | number | string | null;
+export type RuntimeJsonValue = RuntimeJsonPrimitive | RuntimeJsonValue[] | {
+    [key: string]: RuntimeJsonValue;
+};
+export type RuntimeLogLevel = 'debug' | 'log' | 'info' | 'warn' | 'error';
+export interface RuntimeLogEntry {
+    seq: number;
+    time: string;
+    level: RuntimeLogLevel;
+    message: string;
+    args: RuntimeJsonValue[];
+    stack?: string;
+}
+export type RuntimeInputRequest = {
+    type: 'input';
+    action: 'click' | 'move';
+    x: number;
+    y: number;
+} | {
+    type: 'input';
+    action: 'key' | 'keydown' | 'keyup';
+    key: string;
+};
+export type RuntimeRequest = {
+    type: 'tree';
+} | {
+    type: 'node';
+    uid: number;
+} | {
+    type: 'state';
+} | {
+    type: 'logs';
+    after?: number;
+    level?: RuntimeLogLevel;
+} | RuntimeInputRequest;
+export interface RuntimePageDescriptor {
+    runtimeId: string;
+    url: string;
+    title: string;
+    ready: boolean;
+}
+export interface RuntimeHmrRequest {
+    requestId: string;
+    runtimeId: string;
+    request: RuntimeRequest;
+}
+export type RuntimeHmrResponse = {
+    requestId: string;
+    runtimeId: string;
+    ok: true;
+    result: RuntimeJsonValue;
+} | {
+    requestId: string;
+    runtimeId: string;
+    ok: false;
+    error: string;
+};

package/dist/runtime-dev/protocol.js

@@ -0,0 +1 @@
+export const pixifactRuntimeProtocolVersion = 1;

package/dist/runtime-dev/runtimeClient.d.ts

@@ -0,0 +1,22 @@
+import { type Application } from 'pixi.js';
+import { type RuntimeJsonValue, type RuntimeRequest } from './protocol.js';
+export interface RegisterPixiRuntimeOptions {
+    getState?: () => RuntimeJsonValue;
+}
+export interface PixifactRuntimeHotContext {
+    on(event: string, listener: (data: unknown) => void): void;
+    send(event: string, data: unknown): void;
+}
+interface RuntimeClientOptions {
+    runtimeId: string;
+    hot: PixifactRuntimeHotContext;
+    console: Console;
+    window: Window;
+    now?: () => Date;
+}
+export declare function createPixifactRuntimeClient(options: RuntimeClientOptions): {
+    register(application: Application, registerOptions?: RegisterPixiRuntimeOptions): void;
+    handleRequest: (request: RuntimeRequest) => Promise<RuntimeJsonValue>;
+    dispose: () => void;
+};
+export {};