pixifact 0.1.3 → 0.1.4

package/dist/nodes/Input.js

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

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

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

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

@@ -1,45 +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 { 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

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

@@ -1,53 +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 { 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

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

@@ -1,66 +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 { 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 };

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

@@ -1,23 +0,0 @@
-import { Component } from "../../runtime/index.js";
-import type { Group } from "../../runtime/index.js";
-export declare class ScrollRect extends Component<Group> {
-    viewport?: Group;
-    content?: Group;
-    contentHeight: number;
-    wheelSensitivity: number;
-    dragEnabled: boolean;
-    private scrollY;
-    private dragging;
-    private dragStartY;
-    private dragStartScrollY;
-    awake(): void;
-    get maxScrollY(): number;
-    scrollTo(y: number): void;
-    scrollBy(deltaY: number): void;
-    private applyScroll;
-    private handleWheel;
-    private handlePointerDown;
-    private handleGlobalPointerMove;
-    private handlePointerUp;
-    onDestroy(): void;
-}