pixifact 0.4.0 → 0.5.0

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/scene/decorators.d.ts

@@ -1,6 +1,7 @@
-import type { SceneClassDecorator, SceneEventDecoratorOptions, SceneMemberDecorator, ScenePartDecoratorOptions, ScenePropDecoratorOptions, SceneSlotDecoratorOptions } from '../compiler/spec.js';
+import type { SceneClassDecorator, SceneEventDecoratorOptions, SceneMemberDecorator, ScenePartDecoratorOptions, ScenePropDecoratorOptions, SceneSlotDecoratorOptions, SceneVariants } from '../compiler/spec.js';
 export declare function scene(): SceneClassDecorator;
 export declare function prop(options: ScenePropDecoratorOptions): SceneMemberDecorator;
+export declare function defineVariants<const TVariants extends SceneVariants>(variants: TVariants): TVariants;
 export declare function event(_options?: SceneEventDecoratorOptions): SceneMemberDecorator;
 export declare function slot(options?: SceneSlotDecoratorOptions): SceneMemberDecorator;
 export declare function part(options?: ScenePartDecoratorOptions): SceneMemberDecorator;

package/dist/scene/decorators.js

@@ -1,15 +1,21 @@
+import { activateRuntimeTree } from '../runtime/runtimeBehavior.js';
 import { mountSceneClass } from './sceneRuntime.js';
+import { initializeSceneProps } from './sceneBindingRuntime.js';
 const metadataByConstructor = new WeakMap();
 export function scene() {
     return ((constructor) => {
         const SceneClass = class extends constructor {
             constructor(...args) {
-                super(...args);
+                super();
                 if (new.target !== SceneClass) {
                     return;
                 }
-                const result = mountSceneClass(this, SceneClass);
                 const metadata = sceneMetadata(constructor);
+                const initialProps = args[0] && typeof args[0] === 'object'
+                    ? args[0]
+                    : {};
+                initializeSceneProps(this, metadata.props, initialProps);
+                const result = mountSceneClass(this, SceneClass);
                 for (const [property, id] of metadata.parts) {
                     Object.defineProperty(this, property, {
                         configurable: true,
@@ -26,11 +32,7 @@ export function scene() {
                         writable: false,
                     });
                 }
-                for (const [property, propOptions] of metadata.props) {
-                    if (propOptions.default !== undefined) {
-                        this[property] = propOptions.default;
-                    }
-                }
+                activateRuntimeTree(this);
                 const ready = this.onMounted;
                 if (ready) {
                     ready.call(this);
@@ -46,6 +48,9 @@ export function prop(options) {
         sceneMetadata(target.constructor).props.set(memberName(propertyKey), options);
     });
 }
+export function defineVariants(variants) {
+    return variants;
+}
 export function event(_options = {}) {
     return noopMemberDecorator;
 }

package/dist/scene/index.d.ts

@@ -1,5 +1,6 @@
 export * from './decorators.js';
 export * from './eventRuntime.js';
 export * from './sceneAssetRuntime.js';
+export * from './sceneBindingRuntime.js';
 export * from './sceneRuntime.js';
 export * from './slotRuntime.js';

package/dist/scene/index.js

@@ -1,5 +1,6 @@
 export * from './decorators.js';
 export * from './eventRuntime.js';
 export * from './sceneAssetRuntime.js';
+export * from './sceneBindingRuntime.js';
 export * from './sceneRuntime.js';
 export * from './slotRuntime.js';

package/dist/scene/sceneBindingRuntime.d.ts

@@ -0,0 +1,10 @@
+import type { Container } from 'pixi.js';
+import type { ScenePropDecoratorOptions, SceneTemplateBindingValue, SceneTemplateInterface, SceneTemplateScalarValue } from '../compiler/spec.js';
+export declare function initializeSceneProps(target: object, definitions: ReadonlyMap<string, ScenePropDecoratorOptions>, initialProps?: Record<string, unknown>): void;
+export declare function initializeScenePropsFromInterface(target: object, sceneInterface: SceneTemplateInterface, initialProps?: Record<string, unknown>): void;
+export declare function setSceneProp(target: object, name: string, value: unknown): void;
+export declare function getSceneProp<T = unknown>(target: object, name: string): T;
+export declare function readSceneBindingValue<T = unknown>(target: object, binding: SceneTemplateBindingValue): T;
+export declare function bindSceneNodeProp(root: object, binding: SceneTemplateBindingValue, target: Container, prop: string): void;
+export declare function applySceneNodeProp(target: Container, prop: string, sourceValue: unknown): void;
+export type SceneBindingInitialValue = SceneTemplateScalarValue | object;

package/dist/scene/sceneBindingRuntime.js

@@ -0,0 +1,124 @@
+import { setFrameLayout } from '../runtime/index.js';
+const states = new WeakMap();
+const layoutProps = new Set(['left', 'right', 'top', 'bottom', 'horizontal', 'vertical']);
+const textStyleProps = new Set(['fontSize', 'fontFamily', 'fontWeight', 'fill']);
+const colorProps = new Set(['fill', 'fillColor', 'strokeColor', 'tint']);
+export function initializeSceneProps(target, definitions, initialProps = {}) {
+    const state = {
+        definitions: Object.fromEntries(definitions),
+        subscribers: new Map(),
+        values: {},
+    };
+    states.set(target, state);
+    for (const [name, definition] of Object.entries(state.definitions)) {
+        state.values[name] = Object.hasOwn(initialProps, name)
+            ? initialProps[name]
+            : definition.default;
+        Object.defineProperty(target, name, {
+            configurable: true,
+            enumerable: true,
+            get: () => state.values[name],
+            set: (value) => setSceneProp(target, name, value),
+        });
+    }
+}
+export function initializeScenePropsFromInterface(target, sceneInterface, initialProps = {}) {
+    initializeSceneProps(target, new Map(Object.entries(sceneInterface.props).map(([name, contract]) => [
+        name,
+        {
+            ...('default' in contract ? { default: contract.default } : {}),
+            ...(contract.type === 'variant' ? { variants: contract.variants } : {}),
+        },
+    ])), initialProps);
+}
+export function setSceneProp(target, name, value) {
+    const state = sceneBindingState(target);
+    if (Object.is(state.values[name], value)) {
+        return;
+    }
+    state.values[name] = value;
+    for (const update of state.subscribers.get(name) ?? []) {
+        update();
+    }
+}
+export function getSceneProp(target, name) {
+    return sceneBindingState(target).values[name];
+}
+export function readSceneBindingValue(target, binding) {
+    const state = sceneBindingState(target);
+    const [prop, field] = binding.path;
+    const value = state.values[prop];
+    if (!field) {
+        return value;
+    }
+    const selected = String(value);
+    return state.definitions[prop]?.variants?.[selected]?.[field];
+}
+export function bindSceneNodeProp(root, binding, target, prop) {
+    const state = sceneBindingState(root);
+    const update = () => applySceneNodeProp(target, prop, readSceneBindingValue(root, binding));
+    const subscribers = state.subscribers.get(binding.path[0]) ?? new Set();
+    subscribers.add(update);
+    state.subscribers.set(binding.path[0], subscribers);
+    update();
+}
+export function applySceneNodeProp(target, prop, sourceValue) {
+    if (prop === 'text') {
+        target.text = String(sourceValue ?? '');
+        return;
+    }
+    const value = normalizeBindingValue(prop, sourceValue);
+    if (layoutProps.has(prop)) {
+        setFrameLayout(target, { [prop]: value });
+        return;
+    }
+    const record = target;
+    if (textStyleProps.has(prop) && 'text' in record && record.style) {
+        record.style[prop] = value;
+        return;
+    }
+    if (prop === 'scaleX' || prop === 'scaleY') {
+        const point = record.scale;
+        point[prop === 'scaleX' ? 'x' : 'y'] = value;
+        return;
+    }
+    if (prop === 'pivotX' || prop === 'pivotY') {
+        const point = record.pivot;
+        point[prop === 'pivotX' ? 'x' : 'y'] = value;
+        return;
+    }
+    if (prop === 'skewX' || prop === 'skewY') {
+        const point = record.skew;
+        point[prop === 'skewX' ? 'x' : 'y'] = value;
+        return;
+    }
+    if (prop === 'anchorX' || prop === 'anchorY') {
+        const point = record.anchor;
+        point[prop === 'anchorX' ? 'x' : 'y'] = value;
+        return;
+    }
+    if (prop === 'tilePositionX' || prop === 'tilePositionY') {
+        const point = record.tilePosition;
+        point[prop === 'tilePositionX' ? 'x' : 'y'] = value;
+        return;
+    }
+    if (prop === 'tileScaleX' || prop === 'tileScaleY') {
+        const point = record.tileScale;
+        point[prop === 'tileScaleX' ? 'x' : 'y'] = value;
+        return;
+    }
+    record[prop] = value;
+}
+function normalizeBindingValue(prop, value) {
+    if (colorProps.has(prop) && typeof value === 'string' && /^#[0-9a-fA-F]{6}$/.test(value)) {
+        return Number.parseInt(value.slice(1), 16);
+    }
+    return value;
+}
+function sceneBindingState(target) {
+    const state = states.get(target);
+    if (!state) {
+        throw new Error('Scene props must be initialized before bindings are mounted.');
+    }
+    return state;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixifact",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Pixifact 2D UI 和轻量游戏 Scene 语义框架。",
   "packageManager": "bun@1.3.13",
   "main": "./dist/index.js",