type Size = "large" | "default" | "small";

type Align = "left" | "center" | "right";

type Effect = "dark" | "light";

type Layout = "fixed" | "auto";

type DefaultLanguage = "en" | "zhCn" | "zhTw";

type Language = {
    name: string;
    el: TranslatePair;
};

type TranslatePair = {
    [key: string]: string | string[] | TranslatePair;
};

type TableColumnType = "selection" | "index" | "expand";

type TableColumnSortable = false | true | "custom";

type TableColumnFixed = true | "left" | "right";

type TableColumnSortOrders = "ascending" | "descending" | null;

type TableColumnFilterPlacement = "top-start" | "top-end" | "top" | "bottom-start" | "bottom-end" | "bottom" | "left-start" | "left-end" | "left" | "right-start" | "right-end" | "right";

import type { PureTableProps, TableColumns } from '@pureadmin/table';

const columns: TableColumns[] = [
  {
    label: '姓名',
    prop: 'name',
    width: 120
  },
  {
    label: '年龄',
    prop: 'age',
    width: 80,
    sortable: true
  }
];

const tableProps: PureTableProps = {
  data: [],
  columns,
  loading: false,
  pagination: {
    pageSize: 10,
    total: 0,
    currentPage: 1
  }
};

const columns: TableColumns[] = [
  {
    label: '操作',
    prop: 'action',
    cellRenderer: ({ row, index }) => {
      return (
        <el-button
          type="primary"
          size="small"
          onClick={() => handleEdit(row, index)}
        >
          编辑
        </el-button>
      );
    }
  }
];

type Vector2 = [number, number];

type Vector4 = [number, number, number, number];

type widgetTypes = "button" | "toggle" | "slider" | "number" | "combo" | "text";

type SlotShape = 0 | 1 | 2 | 3 | 4;

interface INodeSlot {
    name: string;        // 插槽名称
    type: string;        // 插槽数据类型
    link?: number;       // 连接的链接ID（可选）
    label?: string;      // 显示标签（可选）
    dir?: "UP" | "RIGHT" | "DOWN" | "LEFT";  // 插槽方向（可选）
    color_on?: string;   // 激活状态颜色（可选）
    color_off?: string;  // 非激活状态颜色（可选）
    shape?: SlotShape;   // 插槽形状（可选）
}

interface INodeInputSlot extends INodeSlot {
    link: number | null;  // 输入插槽的链接ID
}

interface INodeOutputSlot extends INodeSlot {
    links: number[] | null;  // 输出插槽连接的所有链接ID数组
}

type WidgetCallback<T extends IWidget> = (
    this: T,
    value: T["value"],
    canvas: LGraphCanvas,
    node: LGraphNode,
    pos: Vector2,
    event?: Event
) => void;

interface IWidget {
    name: string;           // 小部件名称
    value: any;            // 小部件当前值
    type: widgetTypes;     // 小部件类型
    options?: any;         // 小部件选项配置
    callback?: WidgetCallback<this>;  // 值变化回调
    marker?: boolean;      // 是否显示标记
    disabled?: boolean;    // 是否禁用
    readonly?: boolean;    // 是否只读
    property?: string;     // 关联的节点属性名
}

interface IButtonWidget extends IWidget {
    type: "button";
    value: undefined;
}

interface IToggleWidget extends IWidget {
    type: "toggle";
    value: boolean;
}

interface ISliderWidget extends IWidget {
    type: "slider";
    value: number;
    options: {
        min?: number;      // 最小值
        max?: number;      // 最大值
        step?: number;     // 步长
        precision?: number; // 精度
    };
}

interface INumberWidget extends IWidget {
    type: "number";
    value: number;
    options: {
        min?: number;      // 最小值
        max?: number;      // 最大值
        step?: number;     // 步长
        precision?: number; // 精度
    };
}

interface IComboWidget extends IWidget {
    type: "combo";
    value: string;
    options: {
        values: string[] | ((widget: IComboWidget, node: LGraphNode) => string[]);
    };
}

interface ITextWidget extends IWidget {
    type: "text";
    value: string;
    options?: {
        multiline?: boolean;  // 是否多行文本
        max_length?: number;  // 最大长度
        password?: boolean;   // 是否密码输入
    };
}

interface IContextMenuItem {
    content: string;                    // 菜单项内容
    value?: any;                       // 菜单项值
    callback?: ContextMenuEventListener; // 点击回调
    submenu?: {
        options: ContextMenuItem[];
        callback?: ContextMenuEventListener;
    };                                 // 子菜单
    disabled?: boolean;                // 是否禁用
    title?: string;                    // 标题
    has_submenu?: boolean;             // 是否有子菜单
    className?: string;                // CSS类名
}

interface IContextMenuOptions {
    callback?: ContextMenuEventListener;  // 菜单回调
    event?: MouseEvent | CustomEvent;    // 触发事件
    parentMenu?: any;                    // 父菜单
    ignore_item_callbacks?: boolean;     // 是否忽略项回调
    title?: string;                      // 菜单标题
    extra?: any;                         // 额外数据
    autoopen?: boolean;                  // 是否自动打开
}

declare const LiteGraph: {
    // 方向常量
    LEFT: 1;
    RIGHT: 2;
    UP: 3;
    DOWN: 4;
    
    // 链接类型
    STRAIGHT_LINK: 0;
    LINEAR_LINK: 1;
    SPLINE_LINK: 2;
    
    // 输入输出类型
    INPUT: 1;
    OUTPUT: 2;
    
    // 事件类型
    EVENT: -1;
    ACTION: -1;
    
    // 节点模式
    ALWAYS: 0;
    ON_EVENT: 1;
    NEVER: 2;
    ON_TRIGGER: 3;
    
    // 节点形状
    BOX_SHAPE: 1;
    ROUND_SHAPE: 2;
    CIRCLE_SHAPE: 3;
    CARD_SHAPE: 4;
    ARROW_SHAPE: 5;
    GRID_SHAPE: 6;
    
    // 插槽形状
    DEFAULT_SHAPE: 0;
    BOX_SHAPE: 1;
    ARROW_SHAPE: 2;
    GRID_SHAPE: 3;
    CIRCLE_SHAPE: 4;
    
    // 全局配置
    node_images_path: string;           // 节点图片路径
    debug: boolean;                     // 调试模式
    catch_exceptions: boolean;          // 是否捕获异常
    throw_errors: boolean;              // 是否抛出错误
    allow_scripts: boolean;             // 是否允许脚本
    registered_node_types: Record<string, LGraphNodeConstructor>; // 已注册的节点类型
    Nodes: Record<string, LGraphNodeConstructor>; // 节点类型映射
    searchbox_extras: Record<string, any>; // 搜索框扩展
    auto_sort_node_types: boolean;      // 是否自动排序节点类型
    node_types_by_file_extension: Record<string, string>; // 按文件扩展名分类的节点类型
    
    // 方法
    registerNodeType(type: string, baseClass: LGraphNodeConstructor): void;
    createNode(type: string): LGraphNode | null;
    getNodeType(type: string): LGraphNodeConstructor | null;
    getNodeTypesInCategory(category?: string): string[];
    getNodeCategories(): string[];
    clearRegisteredTypes(): void;
    
    // 工具函数
    compareObjects(a: any, b: any): boolean;
    distance(a: Vector2, b: Vector2): number;
    colorToString(c: [number, number, number]): string;
    isInsideRectangle(x: number, y: number, left: number, top: number, width: number, height: number): boolean;
    growBounding(bounding: Vector4, x: number, y: number): Vector4;
    isInsideBounding(p: Vector2, bb: Vector4): boolean;
    hex2num(hex: string): [number, number, number];
    num2hex(triplet: [number, number, number]): string;
    extendClass(target: any, origin: any): any;
    getParameterNames(func: Function): string[];
    cloneObject<T>(obj: T, target?: T): T;
    overlapBounding(a: Vector4, b: Vector4): boolean;
    pointerListenerAdd(oDOM: any, sEvType: string, fCall: any, capture?: boolean): void;
    pointerListenerRemove(oDOM: any, sEvType: string, fCall: any, capture?: boolean): void;
    pointerEventType(sType: string): string;
    getTime(): number;
};

static supported_types: string[];      // 支持的数据类型
static STATUS_STOPPED: number;         // 停止状态
static STATUS_RUNNING: number;         // 运行状态

constructor(o?: any);

list_of_graphcanvas: LGraphCanvas[];    // 关联的画布列表
config: any;                           // 图配置
status: number;                        // 图状态
elapsed_time: number;                  // 已运行时间
last_update_time: number;              // 最后更新时间
iteration: number;                     // 迭代次数
_version: number;                      // 版本号
_last_trigger_time: number;            // 最后触发时间
_nodes: LGraphNode[];                  // 节点数组
_nodes_by_id: Record<number, LGraphNode>; // 按ID索引的节点
_nodes_in_order: LGraphNode[];         // 按执行顺序排列的节点
_groups: LGraphGroup[];                // 组数组
_links: Record<number, LLink>;         // 链接映射
_links_by_id: Record<number, LLink>;   // 按ID索引的链接
inputs: Record<string, any>;           // 图输入
outputs: Record<string, any>;          // 图输出

clear(): void;                         // 清空图
attachCanvas(graphCanvas: LGraphCanvas): void; // 附加画布
detachCanvas(graphCanvas: LGraphCanvas): void; // 分离画布
start(interval?: number): void;        // 开始执行
stop(): void;                         // 停止执行
runStep(num?: number, do_not_catch_errors?: boolean): void; // 执行步骤

add(node: LGraphNode, skipComputeOrder?: boolean): void; // 添加节点
remove(node: LGraphNode): void;        // 移除节点
getNodeById(id: number): LGraphNode | null; // 根据ID获取节点
findNodesByTitle(title: string): LGraphNode[]; // 根据标题查找节点
findNodesByType(type: string): LGraphNode[]; // 根据类型查找节点
findNodesByClass(classObject: any, result?: LGraphNode[]): LGraphNode[]; // 根据类查找节点
findNodeByTitle(title: string): LGraphNode | null; // 根据标题查找单个节点

connect(nodeA_id: number, slotA: number, nodeB_id: number, slotB: number): LLink | null; // 连接节点
disconnect(nodeA_id: number, slotA: number, nodeB_id: number, slotB: number): boolean; // 断开连接

serialize(): any;                      // 序列化图
configure(data: any, keep_old?: boolean): void; // 配置图
toJSON(): string;                      // 转换为JSON

updateExecutionOrder(): void;          // 更新执行顺序
fixLinks(): void;                      // 修复链接
checkNodeTypes(): void;                // 检查节点类型

constructor(
    id: number,
    type: string,
    origin_id: number,
    origin_slot: number,
    target_id: number,
    target_slot: number
);

id: number;                           // 链接ID
type: string;                         // 数据类型
origin_id: number;                    // 源节点ID
origin_slot: number;                  // 源插槽索引
target_id: number;                    // 目标节点ID
target_slot: number;                  // 目标插槽索引
data?: any;                          // 传输的数据

serialize(): any;                     // 序列化链接
configure(o: any): void;              // 配置链接

static title: string;                 // 节点标题
static desc: string;                  // 节点描述
static size: Vector2;                 // 默认大小
static color: string;                 // 默认颜色
static bgcolor: string;               // 默认背景色
static boxcolor: string;              // 默认边框色
static shape: number;                 // 默认形状
static slot_start_y: number;          // 插槽起始Y位置
static node_width: number;            // 节点宽度
static title_height: number;          // 标题高度
static title_text_font: string;       // 标题字体
static title_color: string;           // 标题颜色
static TITLE_HEIGHT: number;          // 标题高度常量
static SLOT_HEIGHT: number;           // 插槽高度
static WIDGET_HEIGHT: number;         // 小部件高度
static MAX_NUMBER_OF_SLOTS: number;   // 最大插槽数
static DEFAULT_BGCOLOR: string;       // 默认背景色
static DEFAULT_BOXCOLOR: string;      // 默认边框色
static DEFAULT_SHAPE: number;         // 默认形状
static BOX_SHAPE: number;             // 盒子形状
static ROUND_SHAPE: number;           // 圆角形状
static CIRCLE_SHAPE: number;          // 圆形形状
static CARD_SHAPE: number;            // 卡片形状
static ARROW_SHAPE: number;           // 箭头形状
static GRID_SHAPE: number;            // 网格形状
static title_mode: number;            // 标题模式
static NORMAL_TITLE: number;          // 普通标题
static NO_TITLE: number;              // 无标题
static TRANSPARENT_TITLE: number;     // 透明标题
static AUTOHIDE_TITLE: number;        // 自动隐藏标题
static ignore_remove: boolean;        // 是否忽略移除

constructor(title?: string);

id: number;                           // 节点ID
title: string;                        // 节点标题
type: string;                         // 节点类型
pos: Vector2;                         // 节点位置
size: Vector2;                        // 节点大小
graph: LGraph | null;                 // 所属图
flags: any;                          // 节点标志
mode: number;                        // 执行模式
inputs: INodeInputSlot[] | null;      // 输入插槽
outputs: INodeOutputSlot[] | null;    // 输出插槽
properties: Record<string, any>;      // 节点属性
properties_info: Record<string, any>; // 属性信息
widgets: IWidget[] | null;            // 小部件数组
widgets_up: boolean;                 // 小部件是否在上方
widgets_start_y: number;             // 小部件起始Y位置
widgets_values: Record<string, any>;  // 小部件值
color: string;                       // 节点颜色
bgcolor: string;                     // 背景颜色
boxcolor: string;                    // 边框颜色
shape: number;                       // 节点形状
order: number;                       // 执行顺序
horizontal: boolean;                 // 是否水平布局
skip_subgraph_button: boolean;       // 是否跳过子图按钮
subgraph: LGraph;                    // 子图
clipper: any;                        // 裁剪器
isSelected: boolean;                 // 是否选中
mouseOver: boolean;                  // 鼠标是否悬停

configure(info: any): void;           // 配置节点
serialize(): any;                     // 序列化节点
clone(): LGraphNode;                  // 克隆节点

setProperty(name: string, value: any): void; // 设置属性
getProperty(name: string): any;       // 获取属性
addProperty(name: string, default_value: any, type?: string, extra_info?: any): void; // 添加属性
removeProperty(name: string): void;   // 移除属性

getInputData(slot: number, force_update?: boolean): any; // 获取输入数据
setOutputData(slot: number, data: any): void; // 设置输出数据
trigger(action: string, param?: any): void; // 触发动作
triggerSlot(slot: number, param?: any, link_id?: number): void; // 触发插槽

addInput(name: string, type: string, extra_info?: any): INodeInputSlot; // 添加输入
addOutput(name: string, type: string, extra_info?: any): INodeOutputSlot; // 添加输出
removeInput(slot: number): void;      // 移除输入
removeOutput(slot: number): void;     // 移除输出
findInputSlot(name: string): number;  // 查找输入插槽
findOutputSlot(name: string): number; // 查找输出插槽

connect(slot: number | string, targetNode: LGraphNode, targetSlot: number | string): any | null; // 连接到其他节点
disconnectOutput(slot: number | string, targetNode?: LGraphNode): boolean; // 断开输出连接
disconnectInput(slot: number | string): boolean; // 断开输入连接
getConnectionPos(is_input: boolean, slot: number | string, out?: Vector2): Vector2; // 获取连接位置

addWidget<T extends IWidget>(
    type: T["type"],
    name: string,
    value: T["value"],
    callback?: WidgetCallback<T> | string,
    options?: T["options"]
): T; // 添加小部件
addCustomWidget<T extends IWidget>(customWidget: T): T; // 添加自定义小部件

computeSize(minHeight?: Vector2): Vector2; // 计算大小
getBounding(out?: Vector4, compute_outer?: boolean): Vector4; // 获取边界
isPointInside(x: number, y: number, margin?: number, skipTitle?: boolean): boolean; // 检查点是否在内部
getSlotInPosition(x: number, y: number): any; // 获取位置上的插槽

alignToGrid(): void;                  // 对齐到网格
trace(msg: string): void;             // 控制台输出
setDirtyCanvas(fg: boolean, bg: boolean): void; // 设置画布为脏
loadImage(url: string): void;         // 加载图片
captureInput(v: any): void;           // 捕获输入
collapse(force: boolean): void;       // 折叠节点
pin(v?: boolean): void;               // 固定节点
localToScreen(x: number, y: number, graphCanvas: LGraphCanvas): Vector2; // 本地坐标转屏幕坐标

// 绘制事件
onDrawBackground?(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void; // 绘制背景
onDrawForeground?(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void; // 绘制前景

// 鼠标事件
onMouseDown?(event: MouseEvent, pos: Vector2, graphCanvas: LGraphCanvas): void; // 鼠标按下
onMouseMove?(event: MouseEvent, pos: Vector2, graphCanvas: LGraphCanvas): void; // 鼠标移动
onMouseUp?(event: MouseEvent, pos: Vector2, graphCanvas: LGraphCanvas): void; // 鼠标释放
onMouseEnter?(event: MouseEvent, pos: Vector2, graphCanvas: LGraphCanvas): void; // 鼠标进入
onMouseLeave?(event: MouseEvent, pos: Vector2, graphCanvas: LGraphCanvas): void; // 鼠标离开

// 键盘事件
onKey?(event: KeyboardEvent, pos: Vector2, graphCanvas: LGraphCanvas): void; // 键盘事件

// 生命周期事件
onSelected?(): void;                  // 节点被选中
onDeselected?(): void;                // 节点取消选中
onExecute?(): void;                   // 节点执行
onSerialize?(o: any): void;           // 序列化时
onConfigure?(o: any): void;           // 配置时
onAdded?(graph: LGraph): void;        // 添加到图时
onRemoved?(): void;                   // 从图移除时

// 连接事件
onConnectInput?(inputIndex: number, outputType: string, outputSlot: INodeOutputSlot, outputNode: LGraphNode, outputIndex: number): boolean; // 输入连接时
onConnectOutput?(outputIndex: number, inputType: string, inputSlot: INodeInputSlot, inputNode: LGraphNode, inputIndex: number): boolean; // 输出连接时
onBeforeConnectInput?(inputIndex: number): number; // 连接输入前
onConnectionsChange(type: number, slotIndex: number, isConnected: boolean, link: LLink, ioSlot: INodeOutputSlot | INodeInputSlot): void; // 连接变化

// 属性事件
onPropertyChanged?(property: string, value: any, prevValue: any): void | boolean; // 属性变化

// 菜单事件
getMenuOptions?(graphCanvas: LGraphCanvas): ContextMenuItem[]; // 获取菜单选项
getSlotMenuOptions?(slot: INodeSlot): ContextMenuItem[]; // 获取插槽菜单选项

title: string;                        // 组标题
color: string;                        // 组颜色
font: string;                         // 字体

configure(o: any): void;              // 配置组
serialize(): any;                     // 序列化组
move(deltaX: number, deltaY: number, ignoreNodes?: boolean): void; // 移动组
recomputeInsideNodes(): void;         // 重新计算内部节点
isPointInside: LGraphNode["isPointInside"]; // 检查点是否在内部
setDirtyCanvas: LGraphNode["setDirtyCanvas"]; // 设置画布为脏

constructor(element?: HTMLElement, skipEvents?: boolean);

offset: [number, number];             // 偏移量
scale: number;                        // 缩放比例
max_scale: number;                    // 最大缩放
min_scale: number;                    // 最小缩放
onredraw: Function | null;           // 重绘回调
enabled: boolean;                     // 是否启用
last_mouse: Vector2;                  // 最后鼠标位置
element: HTMLElement | null;         // 关联元素
visible_area: Vector4;                // 可见区域

bindEvents(element: HTMLElement): void; // 绑定事件
computeVisibleArea(): void;           // 计算可见区域
onMouse(e: MouseEvent): void;         // 鼠标事件处理
toCanvasContext(ctx: CanvasRenderingContext2D): void; // 应用到画布上下文
convertOffsetToCanvas(pos: Vector2): Vector2; // 偏移坐标转画布坐标
convertCanvasToOffset(pos: Vector2): Vector2; // 画布坐标转偏移坐标
mouseDrag(x: number, y: number): void; // 鼠标拖拽
changeScale(value: number, zooming_center?: Vector2): void; // 改变缩放
changeDeltaScale(value: number, zooming_center?: Vector2): void; // 改变缩放增量
reset(): void;                        // 重置

static node_colors: Record<string, { color: string; bgcolor: string; groupcolor: string; }>; // 节点颜色配置
static link_type_colors: Record<string, string>; // 链接类型颜色
static gradients: object;             // 渐变配置
static search_limit: number;          // 搜索限制
static active_canvas: HTMLCanvasElement; // 当前活动画布

static getFileExtension(url: string): string; // 获取文件扩展名
static decodeHTML(str: string): string; // 解码HTML
static onMenuCollapseAll(): void;     // 折叠所有菜单
static onMenuNodeEdit(): void;        // 编辑节点菜单
static onShowPropertyEditor(item: any, options: any, e: any, menu: any, node: any): void; // 显示属性编辑器
static onGroupAdd: ContextMenuEventListener; // 添加组菜单
static onMenuAdd: ContextMenuEventListener; // 添加菜单
// ... 更多静态菜单方法

constructor(
    canvas: HTMLCanvasElement | string,
    graph?: LGraph,
    options?: {
        skip_render?: boolean;
        autoresize?: boolean;
    }
);

allow_dragcanvas: boolean;            // 允许拖拽画布
allow_dragnodes: boolean;             // 允许拖拽节点
allow_interaction: boolean;           // 允许交互
allow_reconnect_links: boolean;       // 允许重连链接
multi_select: boolean;                // 多选模式
allow_searchbox: boolean;             // 允许搜索框
always_render_background: boolean;    // 总是渲染背景
autoresize?: boolean;                 // 自动调整大小

canvas: HTMLCanvasElement;            // 主画布
bgcanvas: HTMLCanvasElement;          // 背景画布
ctx: CanvasRenderingContext2D;        // 主画布上下文
bgctx: CanvasRenderingContext2D;      // 背景画布上下文
ds: DragAndScale;                     // 拖拽缩放控制器
graph: LGraph;                        // 关联的图

render_shadows: boolean;              // 渲染阴影
render_canvas_border: boolean;        // 渲染画布边框
render_connections_border: boolean;   // 渲染连接边框
render_connections_shadows: boolean;  // 渲染连接阴影
render_curved_connections: boolean;   // 渲染曲线连接
render_connection_arrows: boolean;    // 渲染连接箭头
render_collapsed_slots: boolean;      // 渲染折叠插槽
render_execution_order: boolean;      // 渲染执行顺序
render_title_colored: boolean;        // 渲染彩色标题
render_only_selected: boolean;        // 仅渲染选中的
use_gradients: boolean;               // 使用渐变
highquality_render: boolean;          // 高质量渲染

selected_nodes: Record<number, LGraphNode>; // 选中的节点
selected_group: LGraphGroup | null;   // 选中的组
current_node: LGraphNode | null;      // 当前节点
node_over: LGraphNode | null;         // 鼠标悬停的节点
node_capturing_input: LGraphNode | null; // 捕获输入的节点
node_dragged: LGraphNode | null;      // 被拖拽的节点
connecting_node: LGraphNode | null;   // 正在连接的节点
dragging_canvas: boolean;             // 是否在拖拽画布
dragging_rectangle: Vector4 | null;   // 拖拽矩形

onDrawBackground: ((ctx: CanvasRenderingContext2D, visibleArea: Vector4) => void) | null; // 绘制背景回调
onDrawForeground: ((ctx: CanvasRenderingContext2D, visibleArea: Vector4) => void) | null; // 绘制前景回调
onDrawOverlay: ((ctx: CanvasRenderingContext2D) => void) | null; // 绘制覆盖层回调
onMouse: ((event: MouseEvent) => boolean) | null; // 鼠标事件回调
onNodeSelected: ((node: LGraphNode) => void) | null; // 节点选中回调
onNodeDeselected: ((node: LGraphNode) => void) | null; // 节点取消选中回调
onNodeMoved: ((node: LGraphNode) => void) | null; // 节点移动回调
onShowNodePanel: ((node: LGraphNode) => void) | null; // 显示节点面板回调
onNodeDblClicked: ((node: LGraphNode) => void) | null; // 节点双击回调
onSelectionChange: ((nodes: Record<number, LGraphNode>) => void) | null; // 选择变化回调

clear(): void;                        // 清空画布
setGraph(graph: LGraph, skipClear?: boolean): void; // 设置图
setCanvas(canvas: HTMLCanvasElement, skipEvents?: boolean): void; // 设置画布
bindEvents(): void;                   // 绑定事件
unbindEvents(): void;                 // 解绑事件

startRendering(): void;               // 开始渲染
stopRendering(): void;                // 停止渲染
setDirty(fg: boolean, bg: boolean): void; // 设置脏标记
draw(forceFG?: boolean, forceBG?: boolean): void; // 绘制
drawFrontCanvas(): void;              // 绘制前景画布
drawBackCanvas(): void;               // 绘制背景画布

selectNode(node: LGraphNode, add?: boolean): void; // 选择节点
selectNodes(nodes?: LGraphNode[], add?: boolean): void; // 选择多个节点
deselectNode(node: LGraphNode): void; // 取消选择节点
deselectAllNodes(): void;             // 取消选择所有节点
deleteSelectedNodes(): void;          // 删除选中节点
centerOnNode(node: LGraphNode): void; // 居中到节点
bringToFront(node: LGraphNode): void; // 置于前景
sendToBack(node: LGraphNode): void;   // 置于背景

setZoom(value: number, center: Vector2): void; // 设置缩放
computeVisibleNodes(nodes: LGraphNode[]): LGraphNode[]; // 计算可见节点
convertEventToCanvasOffset(e: MouseEvent): Vector2; // 事件坐标转画布坐标
convertOffsetToCanvas: DragAndScale["convertOffsetToCanvas"]; // 偏移转画布坐标
convertCanvasToOffset: DragAndScale["convertCanvasToOffset"]; // 画布转偏移坐标

processMouseDown(e: MouseEvent): boolean | undefined; // 处理鼠标按下
processMouseMove(e: MouseEvent): boolean | undefined; // 处理鼠标移动
processMouseUp(e: MouseEvent): boolean | undefined; // 处理鼠标释放
processMouseWheel(e: MouseEvent): boolean | undefined; // 处理鼠标滚轮
processKey(e: KeyboardEvent): boolean | undefined; // 处理键盘事件
processDrop(e: DragEvent): void;      // 处理拖放

drawNode(node: LGraphNode, ctx: CanvasRenderingContext2D): void; // 绘制节点
drawNodeShape(node: LGraphNode, ctx: CanvasRenderingContext2D, size: [number, number], fgColor: string, bgColor: string, selected: boolean, mouseOver: boolean): void; // 绘制节点形状
drawConnections(ctx: CanvasRenderingContext2D): void; // 绘制连接
renderLink(a: Vector2, b: Vector2, link: object, skipBorder: boolean, flow: boolean, color?: string, startDir?: number, endDir?: number, numSublines?: number): void; // 渲染链接
drawNodeWidgets(node: LGraphNode, posY: number, ctx: CanvasRenderingContext2D, activeWidget: object): void; // 绘制节点小部件
drawGroups(canvas: any, ctx: CanvasRenderingContext2D): void; // 绘制组

resize(width?: number, height?: number): void; // 调整大小
switchLiveMode(transition?: boolean): void; // 切换实时模式
showSearchBox(event?: MouseEvent): void; // 显示搜索框
showEditPropertyValue(node: LGraphNode, property: any, options: any): void; // 显示编辑属性值
createDialog(html: string, options?: { position?: Vector2; event?: MouseEvent }): void; // 创建对话框
getCanvasMenuOptions(): ContextMenuItem[]; // 获取画布菜单选项
getNodeMenuOptions(node: LGraphNode): ContextMenuItem[]; // 获取节点菜单选项
processContextMenu(node: LGraphNode, event: Event): void; // 处理上下文菜单

static trigger(element: HTMLElement, event_name: string, params: any, origin: any): void; // 触发事件
static isCursorOverElement(event: MouseEvent, element: HTMLElement): void; // 检查光标是否在元素上
static closeAllContextMenus(window: Window): void; // 关闭所有上下文菜单

constructor(values: ContextMenuItem[], options?: IContextMenuOptions, window?: Window);

options: IContextMenuOptions;         // 菜单选项
parentMenu?: ContextMenu;             // 父菜单
lock: boolean;                        // 是否锁定
current_submenu?: ContextMenu;        // 当前子菜单

addItem(name: string, value: ContextMenuItem, options?: IContextMenuOptions): void; // 添加菜单项
close(e?: MouseEvent, ignore_parent_menu?: boolean): void; // 关闭菜单
getTopMenu(): void;                   // 获取顶级菜单
getFirstEvent(): void;                // 获取首个事件

function clamp(v: number, min: number, max: number): number;

// 创建图
const graph = new LGraph();

// 创建画布
const canvas = document.getElementById('mycanvas') as HTMLCanvasElement;
const graphCanvas = new LGraphCanvas(canvas, graph);

// 创建节点
const nodeA = LiteGraph.createNode('basic/const');
const nodeB = LiteGraph.createNode('basic/watch');

// 添加到图中
graph.add(nodeA);
graph.add(nodeB);

// 连接节点
nodeA.connect(0, nodeB, 0);

// 开始执行
graph.start();

class MyCustomNode extends LGraphNode {
    static title = "我的自定义节点";
    static desc = "这是一个自定义节点示例";
    
    constructor() {
        super();
        this.addInput("输入", "number");
        this.addOutput("输出", "number");
        this.addProperty("乘数", 1.0);
    }
    
    onExecute() {
        const input = this.getInputData(0);
        if (input != null) {
            const multiplier = this.getProperty("乘数");
            this.setOutputData(0, input * multiplier);
        }
    }
}

// 注册节点类型
LiteGraph.registerNodeType("custom/multiply", MyCustomNode);

class NodeWithWidgets extends LGraphNode {
    constructor() {
        super();
        
        // 添加数字滑块
        this.addWidget("slider", "值", 0.5, (value) => {
            console.log("滑块值变化:", value);
        }, { min: 0, max: 1, step: 0.01 });
        
        // 添加下拉选择
        this.addWidget("combo", "选项", "选项1", null, {
            values: ["选项1", "选项2", "选项3"]
        });
        
        // 添加按钮
        this.addWidget("button", "点击我", undefined, () => {
            console.log("按钮被点击!");
        });
    }
}