Version 1.0 model/engine/renderer

[zhzLuke96]

graph TD
    %% --- 定义样式 ---
    classDef core fill:#e1f5fe,stroke:#01579b,color:#01579b,stroke-width:2px;
    classDef view fill:#fff3e0,stroke:#e65100,color:#e65100,stroke-width:2px;
    classDef engine fill:#e8f5e9,stroke:#1b5e20,color:#1b5e20,stroke-width:2px;
    classDef ext fill:#f3e5f5,stroke:#4a148c,color:#4a148c,stroke-width:1px,stroke-dasharray: 5 5;

    %% --- 1. Core 层: 纯数据定义 (Universal) ---
    subgraph Core_Package [📦 @litegraph-ts/model - 数据模型]
        GraphModel(LGraph: 图数据容器)
        NodeModel(LNode: 节点逻辑定义)
        LinkModel(LLink: 连接数据)
        
        GraphModel --包含--> NodeModel
        GraphModel --包含--> LinkModel
        
        NodeModel --定义--> Slots(Input/Output Slots)
        NodeModel --定义--> Props(Properties JSON)
        
        noteCore[❌ 无 DOM<br/>❌ 无 Canvas代码<br/>❌ 无 执行状态]
    end

    %% --- 2. View 层: 渲染与交互 (Browser Only) ---
    subgraph View_Package [📦 @litegraph-ts/renderer - 视图渲染]
        Canvas(LGraphCanvas: 画布管理)
        ViewRegistry(ViewRegistry: 视图注册表)
        Renderer(NodeRenderer: 渲染器接口)
        Widgets(UI Widgets: 按钮/输入框)
        
        Canvas --读取--> GraphModel
        Canvas --查询外观--> ViewRegistry
        ViewRegistry --映射 Type--> Renderer
        Renderer --绘制--> Canvas
        Widgets --修改--> Props
        
        EventSystem(交互事件系统)
        EventSystem --Mouse/Touch--> Canvas
    end

    %% --- 3. Engine 层: 调度与执行 (Universal) ---
    subgraph Engine_Package [📦 @litegraph-ts/engine - 执行引擎]
        Scheduler(GraphEngine: 调度器)
        TopoSort(拓扑排序算法)
        TaskQueue(异步任务队列)
        StateStore(运行时状态存储)
        
        Scheduler --读取--> GraphModel
        Scheduler --调用--> TopoSort
        Scheduler --执行--> NodeModel
        Scheduler --更新--> StateStore
        
        Context(Context Interface: 上下文接口)
        NodeModel --依赖--> Context
    end

    %% --- 4. 外部环境与连接 ---
    subgraph Environment [🌍 外部环境注入]
        BrowserCtx(Browser Context<br/>fetch / DOM / WebGL)
        ServerCtx(Node.js Context<br/>fs / DB / API)
    end

    %% --- 关系连线 ---
    Environment --注入 (DI)--> Scheduler
    Scheduler --Emit Events (Start/Progress/End)--> Canvas
    StateStore --Sync Visual Status--> Renderer
    
    %% 应用样式
    class GraphModel,NodeModel,LinkModel,noteCore core;
    class Canvas,ViewRegistry,Renderer,Widgets,EventSystem view;
    class Scheduler,TopoSort,TaskQueue,StateStore,Context engine;
    class BrowserCtx,ServerCtx ext;

Loading

goals

• 拆分 数据/调度/渲染
• render 不等于 execute，而 execute 等于 on event
• 调度流程可测试

expected

import { LiteGraph, LGraph } from "@litegraph-ts/model"
import { LGraphCanvas } from "@litegraph-ts/renderer"
import { LGraphEngine } from "@litegraph-ts/engine"
import { ConstantNumber, Watch } from "@litegraph-ts/nodes-basic"

import "@litegraph-ts/renderer/css/litegraph.css"

const root = document.getElementById("main") as HTMLDivElement;
const canvas = root.querySelector<HTMLCanvasElement>(".graphCanvas");

const graph = new LGraph();
const lgCanvas = new LGraphCanvas(canvas, graph);

const engine = new LGraphEngine(graph);

engine.on("done", console.log);
while(await engine.next()) {
    lgCanvas.draw();
    // ...
};