pixifact 0.1.3

package/dist/scene/nodesDsl.js

@@ -0,0 +1,169 @@
+import { component, container, shape, text } from "./dsl.js";
+export function buttonScene(name, options = {}) {
+    const key = options.key ?? options.id ?? 'button';
+    const width = options.width ?? 120;
+    const height = options.height ?? 36;
+    const background = `${key}Bg`;
+    const components = [
+        component('ui.Button', {
+            targetGraphic: background,
+            ...(options.onClick ? { onClick: options.onClick } : {}),
+        }, `${key}Button`),
+    ];
+    return container(name, {
+        id: options.id,
+        key,
+        role: options.role ?? 'button',
+        x: options.x,
+        y: options.y,
+        width,
+        height,
+        components,
+        children: [
+            shape('背景', {
+                id: background,
+                key: background,
+                width,
+                height,
+                type: 'roundedRect',
+                color: options.color ?? 0x2563eb,
+                radius: options.radius ?? 6,
+            }),
+            text('文字', {
+                id: `${key}Label`,
+                key: `${key}Label`,
+                width,
+                height,
+                value: options.label ?? '按钮',
+                color: options.textColor ?? 0xffffff,
+                fontSize: 14,
+                center: true,
+            }),
+        ],
+    });
+}
+export function progressBarScene(name, options = {}) {
+    const key = options.key ?? options.id ?? 'progressBar';
+    const width = options.width ?? 180;
+    const height = options.height ?? 18;
+    const min = options.min ?? 0;
+    const max = options.max ?? 1;
+    const value = options.value ?? 0.5;
+    const range = max - min;
+    const normalized = range === 0 ? 0 : Math.min(1, Math.max(0, (value - min) / range));
+    const fillNode = `${key}Fill`;
+    return container(name, {
+        id: options.id,
+        key,
+        role: options.role ?? 'progress-bar',
+        x: options.x,
+        y: options.y,
+        width,
+        height,
+        components: [
+            component('ui.ProgressBar', {
+                value,
+                min,
+                max,
+                fillNode,
+            }, `${key}Progress`),
+        ],
+        children: [
+            shape('背景', {
+                id: `${key}Bg`,
+                key: `${key}Bg`,
+                width,
+                height,
+                type: 'roundedRect',
+                color: options.backgroundColor ?? 0xe2e8f0,
+                radius: options.radius ?? 9,
+            }),
+            shape('填充', {
+                id: fillNode,
+                key: fillNode,
+                width: width * normalized,
+                height,
+                type: 'roundedRect',
+                color: options.fillColor ?? 0x22c55e,
+                radius: options.radius ?? 9,
+            }),
+        ],
+    });
+}
+export function scrollViewScene(name, options = {}) {
+    const key = options.key ?? options.id ?? 'scrollView';
+    const width = options.width ?? 220;
+    const height = options.height ?? 160;
+    const contentHeight = options.contentHeight ?? 320;
+    const viewport = `${key}Viewport`;
+    const content = `${key}Content`;
+    return container(name, {
+        id: options.id,
+        key,
+        role: options.role ?? 'scroll-view',
+        x: options.x,
+        y: options.y,
+        width,
+        height,
+        components: [
+            component('ui.ScrollRect', {
+                viewport,
+                content,
+                contentHeight,
+                wheelSensitivity: options.wheelSensitivity ?? 1,
+                dragEnabled: options.dragEnabled ?? true,
+            }, `${key}Scroll`),
+        ],
+        children: [
+            shape('背景', {
+                id: `${key}Bg`,
+                key: `${key}Bg`,
+                width,
+                height,
+                type: 'roundedRect',
+                color: 0xf8fafc,
+                radius: 8,
+                strokeColor: 0xcbd5e1,
+                strokeWidth: 1,
+            }),
+            container('视口', {
+                id: viewport,
+                key: viewport,
+                role: 'scroll-viewport',
+                width,
+                height,
+                children: [
+                    container('内容', {
+                        id: content,
+                        key: content,
+                        role: 'scroll-content',
+                        width,
+                        height: contentHeight,
+                        children: [
+                            shape('内容背景', {
+                                id: `${key}ContentBg`,
+                                key: `${key}ContentBg`,
+                                width,
+                                height: contentHeight,
+                                type: 'roundedRect',
+                                color: 0xffffff,
+                                radius: 8,
+                            }),
+                            text('内容提示', {
+                                id: `${key}Hint`,
+                                key: `${key}Hint`,
+                                x: 16,
+                                y: 16,
+                                width: width - 32,
+                                height: 24,
+                                value: '滚动内容',
+                                color: 0x334155,
+                                fontSize: 14,
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ],
+    });
+}

package/dist/scene/spec.d.ts

@@ -0,0 +1,100 @@
+export type ComponentRefSpec = string | {
+    node?: string;
+    component: string;
+};
+export interface RectTransformSpec {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    anchorX?: number;
+    anchorY?: number;
+    scaleX?: number;
+    scaleY?: number;
+    rotation?: number;
+}
+export interface ComponentSpec {
+    id?: string;
+    type: string;
+    props?: Record<string, unknown>;
+}
+export type SceneNodeKind = 'container' | 'image' | 'text' | 'input' | 'shape';
+export interface BaseNodeSpec {
+    id?: string;
+    key?: string;
+    role?: string;
+    name?: string;
+    kind: SceneNodeKind;
+    transform?: RectTransformSpec;
+    components?: ComponentSpec[];
+}
+export interface ContainerNodeSpec extends BaseNodeSpec {
+    kind: 'container';
+    children?: NodeSpec[];
+}
+export interface ImageNodeSpec extends BaseNodeSpec {
+    kind: 'image';
+    image?: {
+        mode?: 'sprite' | 'nineSlice';
+        src?: string;
+        tint?: number;
+        leftWidth?: number;
+        rightWidth?: number;
+        topHeight?: number;
+        bottomHeight?: number;
+    };
+}
+export interface TextNodeSpec extends BaseNodeSpec {
+    kind: 'text';
+    text?: {
+        value?: string;
+        color?: number;
+        fontSize?: number;
+        fontFamily?: string | string[];
+        fontWeight?: string;
+        center?: boolean;
+    };
+}
+export interface InputNodeSpec extends BaseNodeSpec {
+    kind: 'input';
+    input?: {
+        value?: string;
+        backgroundColor?: number;
+        borderColor?: number;
+        borderSize?: number;
+        textColor?: string;
+        fontSize?: number;
+        fontFamily?: string | string[];
+        paddingLeft?: number;
+        paddingRight?: number;
+        paddingTop?: number;
+        paddingBottom?: number;
+    };
+}
+export interface ShapeNodeSpec extends BaseNodeSpec {
+    kind: 'shape';
+    shape?: {
+        type?: 'rect' | 'roundedRect';
+        color?: number;
+        fillAlpha?: number;
+        radius?: number;
+        strokeColor?: number;
+        strokeWidth?: number;
+        strokeAlpha?: number;
+    };
+}
+export type NodeSpec = ContainerNodeSpec | ImageNodeSpec | TextNodeSpec | InputNodeSpec | ShapeNodeSpec;
+export interface SceneSpec {
+    version: number;
+    type: 'scene';
+    name: string;
+    root: ContainerNodeSpec;
+}
+export interface InstantiateContext {
+    actions?: Record<string, (...args: unknown[]) => void>;
+}
+export interface InstantiateResult<T = unknown> {
+    root: T;
+    nodes: Map<string, T>;
+    components: Map<string, unknown>;
+}

package/dist/scene/spec.js

@@ -0,0 +1 @@
+export {};

package/dist/scene/templates.d.ts

@@ -0,0 +1,21 @@
+import type { SceneCommand } from "../commands/index.js";
+import type { NodeSpec } from "./spec.js";
+export interface InventoryTemplateOptions {
+    parent?: string;
+    keyPrefix?: string;
+    columns?: number;
+    rows?: number;
+    x?: number;
+    y?: number;
+}
+export declare function inventoryPanelNode(options?: InventoryTemplateOptions): NodeSpec;
+export declare function createInventoryPanelCommands(options?: InventoryTemplateOptions): SceneCommand[];
+export type SceneTemplateKind = 'button' | 'progressBar' | 'scrollView' | 'loginForm';
+export interface SceneTemplateAddOptions {
+    kind: SceneTemplateKind | string;
+    parent?: string;
+    key: string;
+    label?: string;
+}
+export declare function sceneTemplateNode(options: SceneTemplateAddOptions): NodeSpec;
+export declare function createSceneTemplateCommands(options: SceneTemplateAddOptions): SceneCommand[];

package/dist/scene/templates.js

@@ -0,0 +1,239 @@
+import { buttonScene, progressBarScene, scrollViewScene } from "./nodesDsl.js";
+import { container, input, shape, text } from "./dsl.js";
+function inventorySlot(keyPrefix, index, x, y) {
+    const slotKey = `${keyPrefix}Slot${index + 1}`;
+    return container(`格子 ${index + 1}`, {
+        id: slotKey,
+        key: slotKey,
+        role: 'inventory-slot',
+        x,
+        y,
+        width: 104,
+        height: 120,
+        children: [
+            shape('背景', {
+                id: `${slotKey}Bg`,
+                key: `${slotKey}Bg`,
+                width: 104,
+                height: 120,
+                type: 'roundedRect',
+                color: 0xffffff,
+                radius: 8,
+                strokeColor: 0xcbd5e1,
+                strokeWidth: 1,
+            }),
+            shape('图标', {
+                id: `${slotKey}Icon`,
+                key: `${slotKey}Icon`,
+                role: 'item-icon',
+                x: 12,
+                y: 10,
+                width: 80,
+                height: 64,
+                type: 'roundedRect',
+                color: 0xe2e8f0,
+                radius: 6,
+            }),
+            text('数量', {
+                id: `${slotKey}Quantity`,
+                key: `${slotKey}Quantity`,
+                role: 'item-quantity',
+                x: 64,
+                y: 56,
+                width: 28,
+                height: 20,
+                value: 'x1',
+                color: 0x334155,
+                fontSize: 12,
+                fontWeight: '700',
+                center: true,
+            }),
+            buttonScene('使用按钮', {
+                id: `${slotKey}UseButton`,
+                key: `${slotKey}UseButton`,
+                role: 'item-use-button',
+                x: 12,
+                y: 84,
+                width: 80,
+                height: 26,
+                label: '使用',
+                color: 0x2563eb,
+                textColor: 0xffffff,
+                radius: 6,
+                onClick: 'useInventoryItem',
+            }),
+        ],
+    });
+}
+export function inventoryPanelNode(options = {}) {
+    const keyPrefix = options.keyPrefix ?? 'inventory';
+    const columns = options.columns ?? 4;
+    const rows = options.rows ?? 3;
+    const children = [
+        shape('背景', {
+            id: `${keyPrefix}PanelBg`,
+            key: `${keyPrefix}PanelBg`,
+            width: 512,
+            height: 480,
+            type: 'roundedRect',
+            color: 0xf8fafc,
+            radius: 12,
+            strokeColor: 0x94a3b8,
+            strokeWidth: 1,
+            strokeAlpha: 0.6,
+        }),
+        text('标题', {
+            id: `${keyPrefix}Title`,
+            key: `${keyPrefix}Title`,
+            role: 'panel-title',
+            x: 24,
+            y: 18,
+            width: 360,
+            height: 30,
+            value: '背包',
+            color: 0x172033,
+            fontSize: 22,
+            fontWeight: '800',
+        }),
+    ];
+    for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < columns; col++) {
+            children.push(inventorySlot(keyPrefix, row * columns + col, 24 + col * 116, 66 + row * 132));
+        }
+    }
+    return container('背包面板', {
+        id: `${keyPrefix}Panel`,
+        key: `${keyPrefix}Panel`,
+        role: 'inventory-panel',
+        x: options.x ?? 80,
+        y: options.y ?? 48,
+        width: 512,
+        height: 480,
+        children,
+    });
+}
+export function createInventoryPanelCommands(options = {}) {
+    return [{
+            op: 'createNode',
+            parent: options.parent,
+            node: inventoryPanelNode(options),
+        }];
+}
+function loginFormNode(options) {
+    const key = options.key;
+    return container('登录表单', {
+        id: key,
+        key,
+        role: 'login-form',
+        x: 40,
+        y: 28,
+        width: 280,
+        height: 220,
+        children: [
+            shape('背景', {
+                id: `${key}Card`,
+                key: `${key}Card`,
+                width: 280,
+                height: 220,
+                type: 'roundedRect',
+                color: 0xffffff,
+                radius: 10,
+                strokeColor: 0xcbd5e1,
+                strokeWidth: 1,
+            }),
+            text('标题', {
+                id: `${key}Title`,
+                key: `${key}Title`,
+                x: 24,
+                y: 20,
+                width: 232,
+                height: 32,
+                value: options.label ?? '登录',
+                color: 0x111827,
+                fontSize: 24,
+                fontWeight: '700',
+            }),
+            input('用户名', {
+                id: `${key}Username`,
+                key: `${key}Username`,
+                x: 24,
+                y: 72,
+                width: 232,
+                height: 36,
+                value: '',
+                backgroundColor: 0xffffff,
+                borderColor: 0x94a3b8,
+                borderSize: 1,
+                fontSize: 16,
+            }),
+            input('密码', {
+                id: `${key}Password`,
+                key: `${key}Password`,
+                x: 24,
+                y: 120,
+                width: 232,
+                height: 36,
+                value: '',
+                backgroundColor: 0xffffff,
+                borderColor: 0x94a3b8,
+                borderSize: 1,
+                fontSize: 16,
+            }),
+            buttonScene('提交按钮', {
+                id: `${key}Submit`,
+                key: `${key}Submit`,
+                x: 24,
+                y: 172,
+                width: 232,
+                height: 36,
+                label: options.label ?? '登录',
+                color: 0x2563eb,
+                radius: 6,
+            }),
+        ],
+    });
+}
+export function sceneTemplateNode(options) {
+    switch (options.kind) {
+        case 'button':
+            return buttonScene(options.label ?? '按钮', {
+                id: options.key,
+                key: options.key,
+                width: 120,
+                height: 36,
+                label: options.label ?? '按钮',
+                color: 0x2563eb,
+                radius: 6,
+            });
+        case 'progressBar':
+            return progressBarScene(options.label ?? '进度条', {
+                id: options.key,
+                key: options.key,
+                width: 180,
+                height: 18,
+                value: 0.5,
+            });
+        case 'scrollView':
+            return scrollViewScene(options.label ?? '滚动视图', {
+                id: options.key,
+                key: options.key,
+                width: 220,
+                height: 160,
+                contentHeight: 320,
+            });
+        case 'loginForm':
+            return loginFormNode({
+                key: options.key,
+                label: options.label,
+            });
+        default:
+            throw new Error(`Unknown template kind "${options.kind}".`);
+    }
+}
+export function createSceneTemplateCommands(options) {
+    return [{
+            op: 'createNode',
+            parent: options.parent,
+            node: sceneTemplateNode(options),
+        }];
+}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "pixifact",
+  "version": "0.1.3",
+  "description": "Pixif semantic framework for 2D UI and lightweight game scenes.",
+  "packageManager": "bun@1.3.13",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist/"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hxg2050/pixifact.git",
+    "directory": "packages/pixifact"
+  },
+  "keywords": [
+    "pixif",
+    "pixifact",
+    "game-editor",
+    "pixijs",
+    "scene",
+    "runtime"
+  ],
+  "author": "youxia <243802688@qq.com>",
+  "license": "MIT",
+  "scripts": {
+    "build": "bun scripts/clean-dist.mjs && bunx --no-install tsc -p tsconfig.build.json && bun scripts/fix-dist-esm-imports.mjs"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js",
+      "require": "./dist/runtime/index.js"
+    },
+    "./nodes": {
+      "types": "./dist/nodes/index.d.ts",
+      "import": "./dist/nodes/index.js",
+      "require": "./dist/nodes/index.js"
+    },
+    "./scene": {
+      "types": "./dist/scene/index.d.ts",
+      "import": "./dist/scene/index.js",
+      "require": "./dist/scene/index.js"
+    },
+    "./compiler": {
+      "types": "./dist/compiler/index.d.ts",
+      "import": "./dist/compiler/index.js",
+      "require": "./dist/compiler/index.js"
+    },
+    "./compiler-node": {
+      "types": "./dist/compiler-node/index.d.ts",
+      "import": "./dist/compiler-node/index.js",
+      "require": "./dist/compiler-node/index.js"
+    },
+    "./authoring": {
+      "types": "./dist/authoring/index.d.ts",
+      "import": "./dist/authoring/index.js",
+      "require": "./dist/authoring/index.js"
+    },
+    "./commands": {
+      "types": "./dist/commands/index.d.ts",
+      "import": "./dist/commands/index.js",
+      "require": "./dist/commands/index.js"
+    }
+  },
+  "peerDependencies": {
+    "pixi.js": ">=8.3.0"
+  },
+  "dependencies": {
+    "@math.gl/core": "^4.0.1",
+    "eventemitter3": "^5.0.1",
+    "typescript": "^5.3.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/node": "^25.9.1",
+    "rollup": "^4.9.4",
+    "tslib": "^2.6.2"
+  }
+}