pixifact 0.1.3

package/dist/nodes/Input.d.ts

@@ -0,0 +1,91 @@
+import type { FederatedPointerEvent } from "pixi.js";
+import { Graphics, Group, Label, LabelStyle } from "../runtime/index.js";
+export declare class Input extends Group {
+    /**
+     * 背景样式
+     */
+    graphics: Graphics;
+    /**
+     * 使用html标签进行输入处理
+     */
+    element: HTMLTextAreaElement | HTMLInputElement;
+    /**
+     * 输入框失去焦点时显示的内容
+     */
+    valueLabel: Label;
+    /**
+     * HTML 输入元素对齐的 canvas。默认取文档中的第一个 canvas。
+     */
+    canvas?: Element;
+    private _mask;
+    private _value;
+    private _destroyed;
+    private _isFocused;
+    private _textColor;
+    private _focusedBorderColor;
+    private _blurredBorderColor;
+    private readonly _globalTransform;
+    protected _isUpdateTransform: boolean;
+    set width(val: number);
+    get width(): number;
+    set height(val: number);
+    get height(): number;
+    /**
+     * 更新mask，条件：1、padding改变 2、宽高改变
+     */
+    protected updateMask(): void;
+    protected _isUpdateElementSize: boolean;
+    protected updateElementSize(): void;
+    protected updateElementLineHeight(): void;
+    protected updateHitArea(): void;
+    /**
+     * 更新2d变换，位置，缩放，斜切，旋转
+     */
+    updateTransform(): void;
+    private getCanvasOffset;
+    private getCanvasView;
+    protected _isResize: boolean;
+    /**
+     * 更新大小
+     */
+    resize(): void;
+    protected createElement(): void;
+    render(): void;
+    update(): void;
+    private handleViewportChange;
+    private handleTransformChange;
+    private _stokeStyle;
+    private _backgroundColor;
+    set backgroundColor(val: number);
+    set borderColor(val: number);
+    set borderSize(val: number);
+    protected _labelStyle: LabelStyle;
+    set fontFamily(val: string | string[]);
+    get fontFamily(): string | string[];
+    set fontSize(val: number);
+    get fontSize(): number;
+    private _isDrawStyle;
+    /**
+     * 绘制背景样式
+     */
+    drawStyle(): void;
+    protected _padding: number[];
+    protected get contentWidth(): number;
+    protected get contentHeight(): number;
+    set paddingLeft(val: number);
+    get paddingLeft(): number;
+    set paddingRight(val: number);
+    get paddingRight(): number;
+    set paddingTop(val: number);
+    get paddingTop(): number;
+    set paddingBottom(val: number);
+    get paddingBottom(): number;
+    get value(): string;
+    set value(val: string);
+    private onFocus;
+    focus(event?: FederatedPointerEvent): void;
+    private onInput;
+    private onBlur;
+    blur(): void;
+    onDestroy(): void;
+}

package/dist/nodes/Input.js

@@ -0,0 +1,352 @@
+import { Matrix, Rectangle, Graphics as PIXIGraphics } from "pixi.js";
+import { GameObject, Graphics, Group, Label, LabelStyle } from "../runtime/index.js";
+export class Input extends Group {
+    /**
+     * 背景样式
+     */
+    graphics;
+    /**
+     * 使用html标签进行输入处理
+     */
+    element;
+    /**
+     * 输入框失去焦点时显示的内容
+     */
+    valueLabel;
+    /**
+     * HTML 输入元素对齐的 canvas。默认取文档中的第一个 canvas。
+     */
+    canvas;
+    _mask;
+    _value = '';
+    _destroyed = false;
+    _isFocused = false;
+    _textColor = '#23272a';
+    _focusedBorderColor = 0x0000ff;
+    _blurredBorderColor = 0x828282;
+    _globalTransform = new Matrix();
+    _isUpdateTransform = false;
+    set width(val) {
+        super.width = val;
+        this._isResize = true;
+    }
+    get width() {
+        return super.width;
+    }
+    set height(val) {
+        super.height = val;
+        this._isResize = true;
+    }
+    get height() {
+        return super.height;
+    }
+    /**
+     * 更新mask，条件：1、padding改变 2、宽高改变
+     */
+    updateMask() {
+        if (!this._mask) {
+            return;
+        }
+        this._mask.x = this.paddingLeft;
+        this._mask.y = this.paddingTop;
+        this._mask.width = this.contentWidth;
+        this._mask.height = this.contentHeight;
+    }
+    _isUpdateElementSize = false;
+    updateElementSize() {
+        this._isUpdateElementSize = false;
+        this.element.style.width = this.width + 'px';
+        this.element.style.height = this.height + 'px';
+        this.element.style.padding = this._padding.map((value) => value + 'px').join(' ');
+        this.element.style.borderWidth = '0';
+        this.element.style.fontSize = this.fontSize + 'px';
+        this.updateElementLineHeight();
+        this.updateMask();
+    }
+    updateElementLineHeight() {
+        this.element.style.lineHeight = this.contentHeight + 'px';
+    }
+    updateHitArea() {
+        this.display.hitArea = new Rectangle(0, 0, this.width, this.height);
+    }
+    /**
+     * 更新2d变换，位置，缩放，斜切，旋转
+     */
+    updateTransform() {
+        const { a, b, c, d, tx, ty } = this.display.getGlobalTransform(this._globalTransform);
+        const offset = this.getCanvasOffset();
+        this.element.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, ${tx + offset.x}, ${ty + offset.y})`;
+        this.element.style.transformOrigin = `${this.anchorX * 100}% ${this.anchorY * 100}%`;
+        this.element.style.opacity = String(this.display.alpha);
+        this._isUpdateTransform = false;
+        this.updateMask();
+    }
+    getCanvasOffset() {
+        const view = this.getCanvasView();
+        if (!view) {
+            return { x: 0, y: 0 };
+        }
+        const rect = view.getBoundingClientRect();
+        return { x: rect.left, y: rect.top };
+    }
+    getCanvasView() {
+        return this.canvas ?? document.querySelector('canvas') ?? undefined;
+    }
+    _isResize = false;
+    /**
+     * 更新大小
+     */
+    resize() {
+        this._isResize = false;
+        this._isUpdateElementSize = true;
+        this._isUpdateTransform = true;
+        this.updateHitArea();
+        this.valueLabel.x = this.paddingLeft;
+        this.valueLabel.y = this.paddingTop;
+        this._labelStyle.lineHeight = this.contentHeight;
+        this.updateMask();
+    }
+    createElement() {
+        const element = document.createElement('input');
+        element.type = 'text';
+        this.element = element;
+    }
+    render() {
+        const mask = new PIXIGraphics();
+        mask.rect(0, 0, 100, 50);
+        mask.fill(0x0000ff);
+        this.display.addChild(mask);
+        this._mask = mask;
+        this.createElement();
+        this.element.className = 'textarea';
+        this.element.style.boxSizing = 'border-box';
+        this.element.style.position = 'fixed';
+        this.element.style.left = '0';
+        this.element.style.top = '0';
+        this.element.style.zIndex = '10';
+        this.element.style.margin = '0';
+        this.element.style.borderStyle = 'solid';
+        this.element.style.borderRadius = '0';
+        this.element.style.display = 'none';
+        this.element.style.color = 'transparent';
+        this.element.style.background = 'transparent';
+        this.element.style.caretColor = this._textColor;
+        this.element.style.outline = 'none';
+        this.element.style.padding = '0 6px';
+        this.element.style.fontFamily = Array.isArray(this._labelStyle.fontFamily)
+            ? this._labelStyle.fontFamily.join(',')
+            : this._labelStyle.fontFamily;
+        this.element.style.fontSize = this._labelStyle.fontSize + 'px';
+        this.element.onfocus = this.onFocus.bind(this);
+        this.element.onblur = this.onBlur.bind(this);
+        this.element.oninput = this.onInput.bind(this);
+        this.fontFamily = this._labelStyle.fontFamily;
+        this.fontSize = this._labelStyle.fontSize;
+        window.document.body.append(this.element);
+        this.graphics = GameObject.instantiate(Graphics, this);
+        this.valueLabel = GameObject.instantiate(Label, this, {
+            style: this._labelStyle,
+            x: this.paddingLeft
+        });
+        this.valueLabel.display.mask = mask;
+        this.value = this._value;
+        this.display.eventMode = 'static';
+        this.display.interactiveChildren = false;
+        this.display.cursor = 'text';
+        this.display.on('pointerdown', this.focus, this);
+        this.display.once('destroyed', this.onDestroy, this);
+        this.emitter.on(GameObject.Event.TRANSFORM_CHANGE, this.handleTransformChange, this);
+        window.addEventListener('resize', this.handleViewportChange);
+        window.addEventListener('scroll', this.handleViewportChange, true);
+        this._isResize = true;
+        this._isDrawStyle = true;
+        this._isUpdateElementSize = true;
+        this._isUpdateTransform = true;
+    }
+    update() {
+        if (this._isResize) {
+            this.resize();
+        }
+        if (this._isDrawStyle) {
+            this.drawStyle();
+        }
+        if (this._isUpdateElementSize) {
+            this.updateElementSize();
+        }
+        if (this._isUpdateTransform || this.element.style.display !== 'none') {
+            this.updateTransform();
+        }
+    }
+    handleViewportChange = () => {
+        this._isUpdateTransform = true;
+    };
+    handleTransformChange = () => {
+        this._isUpdateTransform = true;
+    };
+    _stokeStyle = { width: 1, color: this._blurredBorderColor };
+    _backgroundColor = 0xffffff;
+    set backgroundColor(val) {
+        this._backgroundColor = val;
+        this._isDrawStyle = true;
+    }
+    set borderColor(val) {
+        this._stokeStyle.color = val;
+        this._isDrawStyle = true;
+    }
+    set borderSize(val) {
+        this._stokeStyle.width = val;
+        this._isDrawStyle = true;
+    }
+    _labelStyle = new LabelStyle({
+        fontSize: 16,
+        lineHeight: 16
+    });
+    set fontFamily(val) {
+        this._labelStyle.fontFamily = val;
+        if (this.element) {
+            this.element.style.fontFamily = Array.isArray(val) ? val.join(',') : val;
+        }
+    }
+    get fontFamily() {
+        return this._labelStyle.fontFamily;
+    }
+    set fontSize(val) {
+        this._labelStyle.fontSize = val;
+        if (this.element) {
+            this.element.style.fontSize = val + 'px';
+        }
+        this._isUpdateElementSize = true;
+        this._isUpdateTransform = true;
+    }
+    get fontSize() {
+        return this._labelStyle.fontSize;
+    }
+    _isDrawStyle = true;
+    /**
+     * 绘制背景样式
+     */
+    drawStyle() {
+        this._isDrawStyle = false;
+        this.graphics.clear();
+        this.graphics.rect(0, 0, this.width, this.height);
+        this.graphics.fill(this._backgroundColor);
+        this.graphics.stroke(this._stokeStyle);
+    }
+    _padding = [0, 6, 0, 6];
+    get contentWidth() {
+        return Math.max(0, this.width - this.paddingLeft - this.paddingRight);
+    }
+    get contentHeight() {
+        return Math.max(0, this.height - this.paddingTop - this.paddingBottom);
+    }
+    set paddingLeft(val) {
+        this._padding[3] = val;
+        this._isResize = true;
+        this._isUpdateElementSize = true;
+    }
+    get paddingLeft() {
+        return this._padding[3];
+    }
+    set paddingRight(val) {
+        this._padding[1] = val;
+        this._isResize = true;
+        this._isUpdateElementSize = true;
+    }
+    get paddingRight() {
+        return this._padding[1];
+    }
+    set paddingTop(val) {
+        this._padding[0] = val;
+        this._isResize = true;
+        this._isUpdateElementSize = true;
+    }
+    get paddingTop() {
+        return this._padding[0];
+    }
+    set paddingBottom(val) {
+        this._padding[2] = val;
+        this._isResize = true;
+        this._isUpdateElementSize = true;
+    }
+    get paddingBottom() {
+        return this._padding[2];
+    }
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        this._value = val;
+        if (this.element && this.element.value !== val) {
+            this.element.value = val;
+        }
+        if (this.valueLabel) {
+            this.valueLabel.value = val;
+        }
+    }
+    onFocus() {
+        this._isFocused = true;
+        this.valueLabel.display.visible = false;
+        this.element.style.color = this._textColor;
+        this.borderColor = this._focusedBorderColor;
+        this.borderSize = 2;
+        this.emitter.emit('focus');
+    }
+    focus(event) {
+        if (event?.pointerType !== 'touch') {
+            event?.preventDefault();
+        }
+        event?.stopPropagation();
+        if (this._isResize) {
+            this.resize();
+        }
+        if (this._isDrawStyle) {
+            this.drawStyle();
+        }
+        if (this._isUpdateElementSize) {
+            this.updateElementSize();
+        }
+        this.updateTransform();
+        this.element.style.display = 'block';
+        if (!this._destroyed && this.element.isConnected) {
+            this.element.focus();
+        }
+    }
+    onInput() {
+        this._value = this.element.value;
+    }
+    onBlur() {
+        if (!this._isFocused && this.element.style.display === 'none') {
+            return;
+        }
+        this._isFocused = false;
+        this.value = this.element.value;
+        this.borderColor = this._blurredBorderColor;
+        this.borderSize = 1;
+        this.element.style.color = 'transparent';
+        this.element.style.display = 'none';
+        this.valueLabel.display.visible = true;
+        this.emitter.emit('blur');
+    }
+    blur() {
+        this.element.blur();
+        if (this._isFocused || this.element.style.display !== 'none') {
+            this.onBlur();
+        }
+    }
+    onDestroy() {
+        if (this._destroyed) {
+            return;
+        }
+        this._destroyed = true;
+        this.display.off('pointerdown', this.focus, this);
+        this.emitter.off(GameObject.Event.TRANSFORM_CHANGE, this.handleTransformChange, this);
+        window.removeEventListener('resize', this.handleViewportChange);
+        window.removeEventListener('scroll', this.handleViewportChange, true);
+        if (this.element) {
+            this.element.onfocus = null;
+            this.element.onblur = null;
+            this.element.oninput = null;
+            this.element.remove();
+        }
+    }
+}

package/dist/nodes/Textarea.d.ts

@@ -0,0 +1,10 @@
+import { Input } from "./Input.js";
+export declare class Textarea extends Input {
+    set lineHeight(val: number);
+    get lineHeight(): number;
+    protected updateElementLineHeight(): void;
+    protected _padding: number[];
+    protected createElement(): void;
+    render(): void;
+    resize(): void;
+}

package/dist/nodes/Textarea.js

@@ -0,0 +1,38 @@
+import { Input } from "./Input.js";
+export class Textarea extends Input {
+    set lineHeight(val) {
+        this._labelStyle.lineHeight = val;
+        if (this.element) {
+            this.element.style.lineHeight = val + 'px';
+        }
+        this._isUpdateElementSize = true;
+    }
+    get lineHeight() {
+        return this._labelStyle.lineHeight;
+    }
+    updateElementLineHeight() {
+        this.element.style.lineHeight = this._labelStyle.lineHeight + 'px';
+    }
+    _padding = [6, 6, 6, 6];
+    createElement() {
+        this.element = document.createElement('textarea');
+        this.element.style.resize = 'none';
+        this.element.style.overflow = 'hidden';
+    }
+    render() {
+        super.render();
+        this.lineHeight = this._labelStyle.lineHeight;
+        this._labelStyle.wordWrap = true;
+        this._labelStyle.breakWords = true;
+    }
+    resize() {
+        this._isResize = false;
+        this._isUpdateElementSize = true;
+        this._isUpdateTransform = true;
+        this.updateHitArea();
+        this.valueLabel.x = this.paddingLeft;
+        this.valueLabel.y = this.paddingTop;
+        this._labelStyle.wordWrapWidth = this.contentWidth;
+        this.updateMask();
+    }
+}

package/dist/nodes/components/Button.d.ts

@@ -0,0 +1,8 @@
+import type { FederatedPointerEvent } from "pixi.js";
+import { Selectable } from "./Selectable.js";
+export declare class Button extends Selectable {
+    onClick?: string | ((event: FederatedPointerEvent) => void);
+    awake(): void;
+    private handlePointerTap;
+    onDestroy(): void;
+}

package/dist/nodes/components/Button.js

@@ -0,0 +1,45 @@
+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 { ComponentMeta, Prop } from "../../runtime/index.js";
+import { Selectable } from "./Selectable.js";
+let Button = class Button extends Selectable {
+    onClick;
+    awake() {
+        super.awake();
+        this.gameObject.display.on('pointertap', this.handlePointerTap, this);
+    }
+    handlePointerTap(event) {
+        if (!this.interactable) {
+            return;
+        }
+        if (typeof this.onClick === 'function') {
+            this.onClick(event);
+        }
+        this.gameObject.emitter.emit('tap', event);
+    }
+    onDestroy() {
+        this.gameObject.display.off('pointertap', this.handlePointerTap, this);
+        super.onDestroy();
+    }
+};
+__decorate([
+    Prop({
+        type: 'event',
+        description: 'Action invoked when the button receives a pointer tap.',
+    })
+], Button.prototype, "onClick", void 0);
+Button = __decorate([
+    ComponentMeta({
+        type: 'ui.Button',
+        displayName: 'Button',
+        category: 'UI/Interaction',
+        icon: 'mouse-pointer',
+        description: 'Handles pointer interaction and invokes an action when clicked.',
+        disallowMultiple: true,
+    })
+], Button);
+export { Button };

package/dist/nodes/components/InputField.d.ts

@@ -0,0 +1,12 @@
+import { Component } from "../../runtime/index.js";
+import type { Group } from "../../runtime/index.js";
+import type { TextGraphic } from "../graphics/index.js";
+export declare class InputField extends Component<Group> {
+    value: string;
+    placeholder: string;
+    multiline: boolean;
+    textGraphic?: TextGraphic;
+    awake(): void;
+    setValue(value: string): void;
+    applyText(): void;
+}

package/dist/nodes/components/InputField.js

@@ -0,0 +1,53 @@
+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 { Component, ComponentMeta, Prop } from "../../runtime/index.js";
+let InputField = class InputField extends Component {
+    value = '';
+    placeholder = '';
+    multiline = false;
+    textGraphic;
+    awake() {
+        this.applyText();
+    }
+    setValue(value) {
+        this.value = value;
+        this.applyText();
+    }
+    applyText() {
+        if (!this.textGraphic) {
+            return;
+        }
+        this.textGraphic.text = this.value || this.placeholder;
+        this.textGraphic.setDirty();
+    }
+};
+__decorate([
+    Prop({ type: 'string', default: '' })
+], InputField.prototype, "value", void 0);
+__decorate([
+    Prop({ type: 'string', default: '' })
+], InputField.prototype, "placeholder", void 0);
+__decorate([
+    Prop({ type: 'boolean', default: false })
+], InputField.prototype, "multiline", void 0);
+__decorate([
+    Prop({
+        type: 'componentRef',
+        component: 'ui.TextGraphic',
+        description: 'Text graphic used to display the current value or placeholder.',
+    })
+], InputField.prototype, "textGraphic", void 0);
+InputField = __decorate([
+    ComponentMeta({
+        type: 'ui.InputField',
+        displayName: 'Input Field',
+        category: 'UI/Input',
+        description: 'Stores editable text state and can drive text graphic placeholders.',
+        disallowMultiple: true,
+    })
+], InputField);
+export { InputField };

package/dist/nodes/components/ProgressBar.d.ts

@@ -0,0 +1,14 @@
+import { Component } from "../../runtime/index.js";
+import type { Group } from "../../runtime/index.js";
+import type { RoundedRectGraphic } from "../graphics/index.js";
+export declare class ProgressBar extends Component<Group> {
+    value: number;
+    min: number;
+    max: number;
+    fillNode?: Group;
+    fillGraphic?: RoundedRectGraphic;
+    awake(): void;
+    setValue(value: number): void;
+    applyValue: () => void;
+    onDestroy(): void;
+}

package/dist/nodes/components/ProgressBar.js

@@ -0,0 +1,66 @@
+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 { Component, ComponentMeta, GameObject, Prop } from "../../runtime/index.js";
+let ProgressBar = class ProgressBar extends Component {
+    value = 0;
+    min = 0;
+    max = 1;
+    fillNode;
+    fillGraphic;
+    awake() {
+        this.gameObject.emitter.on(GameObject.Event.RESIZE, this.applyValue, this);
+        this.applyValue();
+    }
+    setValue(value) {
+        this.value = value;
+        this.applyValue();
+    }
+    applyValue = () => {
+        const range = this.max - this.min;
+        const normalized = range === 0 ? 0 : Math.min(1, Math.max(0, (this.value - this.min) / range));
+        if (this.fillNode) {
+            this.fillNode.width = this.gameObject.width * normalized;
+            this.fillNode.height = this.gameObject.height;
+        }
+        this.fillGraphic?.setDirty();
+    };
+    onDestroy() {
+        this.gameObject.emitter.off(GameObject.Event.RESIZE, this.applyValue, this);
+    }
+};
+__decorate([
+    Prop({ type: 'number', default: 0, min: 0, max: 1 })
+], ProgressBar.prototype, "value", void 0);
+__decorate([
+    Prop({ type: 'number', default: 0 })
+], ProgressBar.prototype, "min", void 0);
+__decorate([
+    Prop({ type: 'number', default: 1 })
+], ProgressBar.prototype, "max", void 0);
+__decorate([
+    Prop({
+        type: 'nodeRef',
+        description: 'Node resized horizontally to represent the current value.',
+    })
+], ProgressBar.prototype, "fillNode", void 0);
+__decorate([
+    Prop({
+        type: 'componentRef',
+        component: 'ui.Graphic',
+        description: 'Optional fill graphic redrawn when value changes.',
+    })
+], ProgressBar.prototype, "fillGraphic", void 0);
+ProgressBar = __decorate([
+    ComponentMeta({
+        type: 'ui.ProgressBar',
+        displayName: 'Progress Bar',
+        category: 'UI/Display',
+        description: 'Controls a fill node or graphic based on a normalized value.',
+        disallowMultiple: true,
+    })
+], ProgressBar);
+export { ProgressBar };