import { ContextMenu } from './ContextMenu'; import { CustomEventDispatcher, ICustomEventTarget } from './infrastructure/CustomEventTarget'; import { LGraphCanvasEventMap } from './infrastructure/LGraphCanvasEventMap'; import { CanvasColour, ColorOption, ConnectingLink, DefaultConnectionColors, Dictionary, Direction, IBoundaryNodes, IContextMenuOptions, IContextMenuValue, INodeInputSlot, INodeOutputSlot, INodeSlotContextItem, ISlotType, LinkSegment, NullableProperties, Point, Positionable, ReadOnlyPoint, ReadOnlyRect, Rect, Size } from './interfaces'; import { LGraph } from './LGraph'; import { CanvasPointerEvent, CanvasPointerExtensions } from './types/events'; import { SubgraphIO } from './types/serialisation'; import { NeverNever, PickNevers } from './types/utility'; import { IBaseWidget } from './types/widgets'; import { UUID } from './utils/uuid'; import { LinkConnector } from './canvas/LinkConnector'; import { CanvasPointer } from './CanvasPointer'; import { AnimationOptions, DragAndScale } from './DragAndScale'; import { LGraphGroup } from './LGraphGroup'; import { LGraphNode, NodeId, NodeProperty } from './LGraphNode'; import { LiteGraph, Rectangle } from './litegraph'; import { LinkId, LLink } from './LLink'; import { Reroute, RerouteId } from './Reroute'; import { Subgraph } from './subgraph/Subgraph'; import { SubgraphInputNode } from './subgraph/SubgraphInputNode'; import { SubgraphOutputNode } from './subgraph/SubgraphOutputNode'; import { CanvasItem, LinkDirection, LinkMarkerShape, RenderShape } from './types/globalEnums'; interface IShowSearchOptions { node_to?: LGraphNode | null; node_from?: LGraphNode | null; slot_from: number | INodeOutputSlot | INodeInputSlot | null | undefined; type_filter_in?: ISlotType; type_filter_out?: ISlotType | false; do_type_filter?: boolean; show_general_if_none_on_typefilter?: boolean; show_general_after_typefiltered?: boolean; hide_on_mouse_leave?: boolean; show_all_if_empty?: boolean; show_all_on_open?: boolean; } interface ICreateNodeOptions { /** input */ nodeFrom?: SubgraphInputNode | LGraphNode | null; /** input */ slotFrom?: number | INodeOutputSlot | INodeInputSlot | SubgraphIO | null; /** output */ nodeTo?: SubgraphOutputNode | LGraphNode | null; /** output */ slotTo?: number | INodeOutputSlot | INodeInputSlot | SubgraphIO | null; /** pass the event coords */ /** Create the connection from a reroute */ afterRerouteId?: RerouteId; /** choose a nodetype to add, AUTO to set at first good */ nodeType?: string; e?: CanvasPointerEvent; allow_searchbox?: boolean; } interface ICreateDefaultNodeOptions extends ICreateNodeOptions { /** Position of new node */ position: Point; /** adjust x,y */ posAdd?: Point; /** alpha, adjust the position x,y based on the new node size w,h */ posSizeFix?: Point; } interface ICloseable { close(): void; } interface IDialogExtensions extends ICloseable { modified(): void; is_modified: boolean; } interface IDialog extends HTMLDivElement, IDialogExtensions { } type PromptDialog = Omit; interface IDialogOptions { position?: Point; event?: MouseEvent; checkForInput?: boolean; closeOnLeave?: boolean; onclose?(): void; } /** @inheritdoc {@link LGraphCanvas.state} */ export interface LGraphCanvasState { /** {@link Positionable} items are being dragged on the canvas. */ draggingItems: boolean; /** The canvas itself is being dragged. */ draggingCanvas: boolean; /** The canvas is read-only, preventing changes to nodes, disconnecting links, moving items, etc. */ readOnly: boolean; /** Bit flags indicating what is currently below the pointer. */ hoveringOver: CanvasItem; /** If `true`, pointer move events will set the canvas cursor style. */ shouldSetCursor: boolean; /** * Dirty flag indicating that {@link selectedItems} has changed. * Downstream consumers may reset to false once actioned. */ selectionChanged: boolean; } /** * The items created by a clipboard paste operation. * Includes maps of original copied IDs to newly created items. */ interface ClipboardPasteResult { /** All successfully created items */ created: Positionable[]; /** Map: original node IDs to newly created nodes */ nodes: Map; /** Map: original link IDs to new link IDs */ links: Map; /** Map: original reroute IDs to newly created reroutes */ reroutes: Map; /** Map: original subgraph IDs to newly created subgraphs */ subgraphs: Map; } /** Options for {@link LGraphCanvas.pasteFromClipboard}. */ interface IPasteFromClipboardOptions { /** If `true`, always attempt to connect inputs of pasted nodes - including to nodes that were not pasted. */ connectInputs?: boolean; /** The position to paste the items at. */ position?: Point; } interface ICreatePanelOptions { closable?: any; window?: any; onOpen?: () => void; onClose?: () => void; width?: any; height?: any; } /** * This class is in charge of rendering one graph inside a canvas. And provides all the interaction required. * Valid callbacks are: onNodeSelected, onNodeDeselected, onShowNodePanel, onNodeDblClicked */ export declare class LGraphCanvas implements CustomEventDispatcher { #private; static DEFAULT_BACKGROUND_IMAGE: string; static DEFAULT_EVENT_LINK_COLOR: string; /** Link type to colour dictionary. */ static link_type_colors: Dictionary; static gradients: Record; static search_limit: number; static node_colors: Record; /** * @internal Exclusively a workaround for design limitation in {@link LGraphNode.computeSize}. */ static _measureText?: (text: string, fontStyle?: string) => number; /** * The state of this canvas, e.g. whether it is being dragged, or read-only. * * Implemented as a POCO that can be proxied without side-effects. */ state: LGraphCanvasState; get subgraph(): Subgraph | undefined; set subgraph(value: Subgraph | undefined); /** Dispatches a custom event on the canvas. */ dispatch>(type: T, detail: LGraphCanvasEventMap[T]): boolean; dispatch>(type: T): boolean; dispatchEvent(type: TEvent, detail: LGraphCanvasEventMap[TEvent]): void; private _previously_dragging_canvas; /** @deprecated @inheritdoc {@link LGraphCanvasState.readOnly} */ get read_only(): boolean; set read_only(value: boolean); get isDragging(): boolean; set isDragging(value: boolean); get hoveringOver(): CanvasItem; set hoveringOver(value: CanvasItem); /** @deprecated Replace all references with {@link pointer}.{@link CanvasPointer.isDown isDown}. */ get pointer_is_down(): boolean; /** @deprecated Replace all references with {@link pointer}.{@link CanvasPointer.isDouble isDouble}. */ get pointer_is_double(): boolean; /** @deprecated @inheritdoc {@link LGraphCanvasState.draggingCanvas} */ get dragging_canvas(): boolean; set dragging_canvas(value: boolean); /** * @deprecated Use {@link LGraphNode.titleFontStyle} instead. */ get title_text_font(): string; get inner_text_font(): string; /** Maximum frames per second to render. 0: unlimited. Default: 0 */ get maximumFps(): number; set maximumFps(value: number); /** * @deprecated Use {@link LiteGraphGlobal.ROUND_RADIUS} instead. */ get round_radius(): number; /** * @deprecated Use {@link LiteGraphGlobal.ROUND_RADIUS} instead. */ set round_radius(value: number); /** * Render low quality when zoomed out. */ get low_quality(): boolean; options: { skip_events?: any; viewport?: any; skip_render?: any; autoresize?: any; }; background_image: string; readonly ds: DragAndScale; readonly pointer: CanvasPointer; zoom_modify_alpha: boolean; zoom_speed: number; node_title_color: string; default_link_color: string; default_connection_color: { input_off: string; input_on: string; output_off: string; output_on: string; }; default_connection_color_byType: Dictionary; default_connection_color_byTypeOff: Dictionary; /** Gets link colours. Extremely basic impl. until the legacy object dictionaries are removed. */ colourGetter: DefaultConnectionColors; highquality_render: boolean; use_gradients: boolean; editor_alpha: number; pause_rendering: boolean; clear_background: boolean; clear_background_color: string; render_only_selected: boolean; show_info: boolean; allow_dragcanvas: boolean; allow_dragnodes: boolean; allow_interaction: boolean; multi_select: boolean; allow_searchbox: boolean; allow_reconnect_links: boolean; align_to_grid: boolean; drag_mode: boolean; dragging_rectangle: Rect | null; filter?: string | null; set_canvas_dirty_on_mouse_event: boolean; always_render_background: boolean; render_shadows: boolean; render_canvas_border: boolean; render_connections_shadows: boolean; render_connections_border: boolean; render_curved_connections: boolean; render_connection_arrows: boolean; render_collapsed_slots: boolean; render_execution_order: boolean; render_link_tooltip: boolean; /** Shape of the markers shown at the midpoint of links. Default: Circle */ linkMarkerShape: LinkMarkerShape; links_render_mode: number; /** Zoom threshold for low quality rendering. Zoom below this threshold will render low quality. */ low_quality_zoom_threshold: number; /** mouse in canvas coordinates, where 0,0 is the top-left corner of the blue rectangle */ readonly mouse: Point; /** mouse in graph coordinates, where 0,0 is the top-left corner of the blue rectangle */ readonly graph_mouse: Point; /** @deprecated LEGACY: REMOVE THIS, USE {@link graph_mouse} INSTEAD */ canvas_mouse: Point; /** to personalize the search box */ onSearchBox?: (helper: Element, str: string, canvas: LGraphCanvas) => any; onSearchBoxSelection?: (name: any, event: any, canvas: LGraphCanvas) => void; onMouse?: (e: CanvasPointerEvent) => boolean; /** to render background objects (behind nodes and connections) in the canvas affected by transform */ onDrawBackground?: (ctx: CanvasRenderingContext2D, visible_area: any) => void; /** to render foreground objects (above nodes and connections) in the canvas affected by transform */ onDrawForeground?: (arg0: CanvasRenderingContext2D, arg1: any) => void; connections_width: number; /** The current node being drawn by {@link drawNode}. This should NOT be used to determine the currently selected node. See {@link selectedItems} */ current_node: LGraphNode | null; /** used for widgets */ node_widget?: [LGraphNode, IBaseWidget] | null; /** The link to draw a tooltip for. */ over_link_center?: LinkSegment; last_mouse_position: Point; /** The visible area of this canvas. Tightly coupled with {@link ds}. */ visible_area: Rectangle; /** Contains all links and reroutes that were rendered. Repopulated every render cycle. */ renderedPaths: Set; /** @deprecated Replaced by {@link renderedPaths}, but length is set to 0 by some extensions. */ visible_links: LLink[]; /** @deprecated This array is populated and cleared to support legacy extensions. The contents are ignored by Litegraph. */ connecting_links: ConnectingLink[] | null; linkConnector: LinkConnector; /** The viewport of this canvas. Tightly coupled with {@link ds}. */ readonly viewport?: Rect; autoresize: boolean; static active_canvas: LGraphCanvas; frame: number; last_draw_time: number; render_time: number; fps: number; /** @deprecated See {@link LGraphCanvas.selectedItems} */ selected_nodes: Dictionary; /** All selected nodes, groups, and reroutes */ selectedItems: Set; /** The group currently being resized. */ resizingGroup: LGraphGroup | null; /** @deprecated See {@link LGraphCanvas.selectedItems} */ selected_group: LGraphGroup | null; /** The nodes that are currently visible on the canvas. */ visible_nodes: LGraphNode[]; node_over?: LGraphNode; node_capturing_input?: LGraphNode | null; highlighted_links: Dictionary; dirty_canvas: boolean; dirty_bgcanvas: boolean; /** A map of nodes that require selective-redraw */ dirty_nodes: Map; dirty_area?: Rect | null; /** @deprecated Unused */ node_in_panel?: LGraphNode | null; last_mouse: ReadOnlyPoint; last_mouseclick: number; graph: LGraph | Subgraph | null; get _graph(): LGraph | Subgraph; canvas: HTMLCanvasElement & ICustomEventTarget; bgcanvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D; _events_binded?: boolean; _mousedown_callback?(e: PointerEvent): void; _mousewheel_callback?(e: WheelEvent): void; _mousemove_callback?(e: PointerEvent): void; _mouseup_callback?(e: PointerEvent): void; _mouseout_callback?(e: PointerEvent): void; _mousecancel_callback?(e: PointerEvent): void; _key_callback?(e: KeyboardEvent): void; bgctx?: CanvasRenderingContext2D | null; is_rendering?: boolean; /** @deprecated Panels */ block_click?: boolean; /** @deprecated Panels */ last_click_position?: Point | null; resizing_node?: LGraphNode | null; /** @deprecated See {@link LGraphCanvas.resizingGroup} */ selected_group_resizing?: boolean; /** @deprecated See {@link pointer}.{@link CanvasPointer.dragStarted dragStarted} */ last_mouse_dragging?: boolean; onMouseDown?: (arg0: CanvasPointerEvent) => void; _highlight_pos?: Point; _highlight_input?: INodeInputSlot; /** @deprecated Panels */ node_panel?: any; /** @deprecated Panels */ options_panel?: any; _bg_img?: HTMLImageElement; _pattern?: CanvasPattern; _pattern_img?: HTMLImageElement; prompt_box?: PromptDialog | null; search_box?: HTMLDivElement; /** @deprecated Panels */ SELECTED_NODE?: LGraphNode; /** @deprecated Panels */ NODEPANEL_IS_OPEN?: boolean; /** If true, enable drag zoom. Ctrl+Shift+Drag Up/Down: zoom canvas. */ dragZoomEnabled: boolean; getMenuOptions?(): IContextMenuValue[]; getExtraMenuOptions?(canvas: LGraphCanvas, options: IContextMenuValue[]): IContextMenuValue[]; static active_node: LGraphNode; /** called before modifying the graph */ onBeforeChange?(graph: LGraph): void; /** called after modifying the graph */ onAfterChange?(graph: LGraph): void; onClear?: () => void; /** called after moving a node @deprecated Does not handle multi-node move, and can return the wrong node. */ onNodeMoved?: (node_dragged: LGraphNode | undefined) => void; /** @deprecated Called with the deprecated {@link selected_nodes} when the selection changes. Replacement not yet impl. */ onSelectionChange?: (selected: Dictionary) => void; /** called when rendering a tooltip */ onDrawLinkTooltip?: (ctx: CanvasRenderingContext2D, link: LLink | null, canvas?: LGraphCanvas) => boolean; /** to render foreground objects not affected by transform (for GUIs) */ onDrawOverlay?: (ctx: CanvasRenderingContext2D) => void; onRenderBackground?: (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => boolean; onNodeDblClicked?: (n: LGraphNode) => void; onShowNodePanel?: (n: LGraphNode) => void; onNodeSelected?: (node: LGraphNode) => void; onNodeDeselected?: (node: LGraphNode) => void; onRender?: (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => void; /** * Creates a new instance of LGraphCanvas. * @param canvas The canvas HTML element (or its id) to use, or null / undefined to leave blank. * @param graph The graph that owns this canvas. * @param options */ constructor(canvas: HTMLCanvasElement, graph: LGraph, options?: LGraphCanvas["options"]); static onGroupAdd(info: unknown, entry: unknown, mouse_event: MouseEvent): void; /** * @deprecated Functionality moved to {@link getBoundaryNodes}. The new function returns null on failure, instead of an object with all null properties. * Determines the furthest nodes in each direction * @param nodes the nodes to from which boundary nodes will be extracted * @returns */ static getBoundaryNodes(nodes: LGraphNode[] | Dictionary): NullableProperties; /** * @deprecated Functionality moved to {@link alignNodes}. The new function does not set dirty canvas. * @param nodes a list of nodes * @param direction Direction to align the nodes * @param align_to Node to align to (if null, align to the furthest node in the given direction) */ static alignNodes(nodes: Dictionary, direction: Direction, align_to?: LGraphNode): void; static onNodeAlign(value: IContextMenuValue, options: IContextMenuOptions, event: MouseEvent, prev_menu: ContextMenu, node: LGraphNode): void; static onGroupAlign(value: IContextMenuValue, options: IContextMenuOptions, event: MouseEvent, prev_menu: ContextMenu): void; static createDistributeMenu(value: IContextMenuValue, options: IContextMenuOptions, event: MouseEvent, prev_menu: ContextMenu): void; static onMenuAdd(value: unknown, options: unknown, e: MouseEvent, prev_menu?: ContextMenu, callback?: (node: LGraphNode | null) => void): boolean | undefined; static onMenuCollapseAll(): void; static onMenuNodeEdit(): void; /** @param _options Parameter is never used */ static showMenuNodeOptionalOutputs(v: unknown, /** Unused - immediately overwritten */ _options: INodeOutputSlot[], e: MouseEvent, prev_menu: ContextMenu, node: LGraphNode): boolean | undefined; /** @param value Parameter is never used */ static onShowMenuNodeProperties(value: NodeProperty | undefined, options: unknown, e: MouseEvent, prev_menu: ContextMenu, node: LGraphNode): boolean | undefined; /** @deprecated */ static decodeHTML(str: string): string; static onMenuResizeNode(value: IContextMenuValue, options: IContextMenuOptions, e: MouseEvent, menu: ContextMenu, node: LGraphNode): void; static onShowPropertyEditor(item: { property: keyof LGraphNode; type: string; }, options: IContextMenuOptions, e: MouseEvent, menu: ContextMenu, node: LGraphNode): void; static getPropertyPrintableValue(value: unknown, values: unknown[] | object | undefined): string | undefined; static onMenuNodeCollapse(value: IContextMenuValue, options: IContextMenuOptions, e: MouseEvent, menu: ContextMenu, node: LGraphNode): void; static onMenuToggleAdvanced(value: IContextMenuValue, options: IContextMenuOptions, e: MouseEvent, menu: ContextMenu, node: LGraphNode): void; static onMenuNodeMode(value: IContextMenuValue, options: IContextMenuOptions, e: MouseEvent, menu: ContextMenu, node: LGraphNode): boolean; /** @param value Parameter is never used */ static onMenuNodeColors(value: IContextMenuValue, options: IContextMenuOptions, e: MouseEvent, menu: ContextMenu, node: LGraphNode): boolean; static onMenuNodeShapes(value: IContextMenuValue, options: IContextMenuOptions, e: MouseEvent, menu?: ContextMenu, node?: LGraphNode): boolean; static onMenuNodeRemove(): void; static onMenuNodeClone(value: IContextMenuValue, options: IContextMenuOptions, e: MouseEvent, menu: ContextMenu, node: LGraphNode): void; /** * clears all the data inside * */ clear(): void; /** * Assigns a new graph to this canvas. */ setGraph(newGraph: LGraph | Subgraph): void; openSubgraph(subgraph: Subgraph): void; /** * @returns the visually active graph (in case there are more in the stack) */ getCurrentGraph(): LGraph | null; /** * Sets the current HTML canvas element. * Calls bindEvents to add input event listeners, and (re)creates the background canvas. * @param canvas The canvas element to assign, or its HTML element ID. If null or undefined, the current reference is cleared. * @param skip_events If true, events on the previous canvas will not be removed. Has no effect on the first invocation. */ setCanvas(canvas: string | HTMLCanvasElement, skip_events?: boolean): void; /** Captures an event and prevents default - returns false. */ _doNothing(e: Event): boolean; /** Captures an event and prevents default - returns true. */ _doReturnTrue(e: Event): boolean; /** * binds mouse, keyboard, touch and drag events to the canvas */ bindEvents(): void; /** * unbinds mouse events from the canvas */ unbindEvents(): void; /** * Ensures the canvas will be redrawn on the next frame by setting the dirty flag(s). * Without parameters, this function does nothing. * @todo Impl. `setDirty()` or similar as shorthand to redraw everything. * @param fgcanvas If true, marks the foreground canvas as dirty (nodes and anything drawn on top of them). Default: false * @param bgcanvas If true, mark the background canvas as dirty (background, groups, links). Default: false */ setDirty(fgcanvas: boolean, bgcanvas?: boolean): void; /** * Used to attach the canvas in a popup * @returns returns the window where the canvas is attached (the DOM root node) */ getCanvasWindow(): Window; /** * starts rendering the content of the canvas when needed * */ startRendering(): void; /** * stops rendering the content of the canvas (to save resources) * */ stopRendering(): void; blockClick(): void; /** * Gets the widget at the current cursor position. * @param node Optional node to check for widgets under cursor * @returns The widget located at the current cursor position, if any is found. * @deprecated Use {@link LGraphNode.getWidgetOnPos} instead. * ```ts * const [x, y] = canvas.graph_mouse * const widget = canvas.node_over?.getWidgetOnPos(x, y, true) * ``` */ getWidgetAtCursor(node?: LGraphNode): IBaseWidget | undefined; /** * Clears highlight and mouse-over information from nodes that should not have it. * * Intended to be called when the pointer moves away from a node. * @param node The node that the mouse is now over * @param e MouseEvent that is triggering this */ updateMouseOverNodes(node: LGraphNode | null, e: CanvasPointerEvent): void; processMouseDown(e: PointerEvent): void; /** * Called when a mouse move event has to be processed */ processMouseMove(e: PointerEvent): void; /** * Called when a mouse up event has to be processed */ processMouseUp(e: PointerEvent): void; /** * Called when the mouse moves off the canvas. Clears all node hover states. * @param e */ processMouseOut(e: PointerEvent): void; processMouseCancel(): void; /** * Called when a mouse wheel event has to be processed */ processMouseWheel(e: WheelEvent): void; /** * process a key event */ processKey(e: KeyboardEvent): void; /** * Copies canvas items to an internal, app-specific clipboard backed by local storage. * When called without parameters, it copies {@link selectedItems}. * @param items The items to copy. If nullish, all selected items are copied. */ copyToClipboard(items?: Iterable): void; emitEvent(detail: LGraphCanvasEventMap["litegraph:canvas"]): void; /** @todo Refactor to where it belongs - e.g. Deleting / creating nodes is not actually canvas event. */ emitBeforeChange(): void; /** @todo See {@link emitBeforeChange} */ emitAfterChange(): void; /** * Pastes the items from the canvas "clipbaord" - a local storage variable. */ _pasteFromClipboard(options?: IPasteFromClipboardOptions): ClipboardPasteResult | undefined; pasteFromClipboard(options?: IPasteFromClipboardOptions): void; processNodeDblClicked(n: LGraphNode): void; /** * Determines whether to select or deselect an item that has received a pointer event. Will deselect other nodes if * @param item Canvas item to select/deselect * @param e The MouseEvent to handle * @param sticky Prevents deselecting individual nodes (as used by aux/right-click) * @remarks * Accessibility: anyone using {@link mutli_select} always deselects when clicking empty space. */ processSelect(item: TPositionable | null | undefined, e: CanvasPointerEvent | undefined, sticky?: boolean): void; /** * Selects a {@link Positionable} item. * @param item The canvas item to add to the selection. */ select(item: TPositionable): void; /** * Deselects a {@link Positionable} item. * @param item The canvas item to remove from the selection. */ deselect(item: TPositionable): void; /** @deprecated See {@link LGraphCanvas.processSelect} */ processNodeSelected(item: LGraphNode, e: CanvasPointerEvent): void; /** @deprecated See {@link LGraphCanvas.select} */ selectNode(node: LGraphNode, add_to_current_selection?: boolean): void; get empty(): boolean; get positionableItems(): Generator; /** * Selects several items. * @param items Items to select - if falsy, all items on the canvas will be selected * @param add_to_current_selection If set, the items will be added to the current selection instead of replacing it */ selectItems(items?: Positionable[], add_to_current_selection?: boolean): void; /** * selects several nodes (or adds them to the current selection) * @deprecated See {@link LGraphCanvas.selectItems} */ selectNodes(nodes?: LGraphNode[], add_to_current_selection?: boolean): void; /** @deprecated See {@link LGraphCanvas.deselect} */ deselectNode(node: LGraphNode): void; /** * Deselects all items on the canvas. * @param keepSelected If set, this item will not be removed from the selection. */ deselectAll(keepSelected?: Positionable): void; /** @deprecated See {@link LGraphCanvas.deselectAll} */ deselectAllNodes(): void; /** * Deletes all selected items from the graph. * @todo Refactor deletion task to LGraph. Selection is a canvas property, delete is a graph action. */ deleteSelected(): void; /** * deletes all nodes in the current selection from the graph * @deprecated See {@link LGraphCanvas.deleteSelected} */ deleteSelectedNodes(): void; /** * centers the camera on a given node */ centerOnNode(node: LGraphNode): void; /** * adds some useful properties to a mouse event, like the position in graph coordinates */ adjustMouseEvent(e: T & Partial): asserts e is T & CanvasPointerEvent; /** * changes the zoom level of the graph (default is 1), you can pass also a place used to pivot the zoom */ setZoom(value: number, zooming_center: Point): void; /** * converts a coordinate from graph coordinates to canvas2D coordinates */ convertOffsetToCanvas(pos: Point, out: Point): Point; /** * converts a coordinate from Canvas2D coordinates to graph space */ convertCanvasToOffset(pos: Point, out?: Point): Point; convertEventToCanvasOffset(e: MouseEvent): Point; /** * brings a node to front (above all other nodes) */ bringToFront(node: LGraphNode): void; /** * sends a node to the back (below all other nodes) */ sendToBack(node: LGraphNode): void; /** * Determines which nodes are visible and populates {@link out} with the results. * @param nodes The list of nodes to check - if falsy, all nodes in the graph will be checked * @param out Array to write visible nodes into - if falsy, a new array is created instead * @returns Array passed ({@link out}), or a new array containing all visible nodes */ computeVisibleNodes(nodes?: LGraphNode[], out?: LGraphNode[]): LGraphNode[]; /** * Checks if a node is visible on the canvas. * @param node The node to check * @returns `true` if the node is visible, otherwise `false` */ isNodeVisible(node: LGraphNode): boolean; /** * renders the whole canvas content, by rendering in two separated canvas, one containing the background grid and the connections, and one containing the nodes) */ draw(force_canvas?: boolean, force_bgcanvas?: boolean): void; /** * draws the front canvas (the one containing all the nodes) */ drawFrontCanvas(): void; /** * draws some useful stats in the corner of the canvas */ renderInfo(ctx: CanvasRenderingContext2D, x: number, y: number): void; /** * draws the back canvas (the one containing the background and the connections) */ drawBackCanvas(): void; /** * draws the given node inside the canvas */ drawNode(node: LGraphNode, ctx: CanvasRenderingContext2D): void; /** * Draws the link mouseover effect and tooltip. * @param ctx Canvas 2D context to draw on * @param link The link to render the mouseover effect for * @remarks * Called against {@link LGraphCanvas.over_link_center}. * @todo Split tooltip from hover, so it can be drawn / eased separately */ drawLinkTooltip(ctx: CanvasRenderingContext2D, link: LinkSegment): void; /** * Draws the shape of the given node on the canvas * @param node The node to draw * @param ctx 2D canvas rendering context used to draw * @param size Size of the background to draw, in graph units. Differs from node size if collapsed, etc. * @param fgcolor Foreground colour - used for text * @param bgcolor Background colour of the node * @param _selected Whether to render the node as selected. Likely to be removed in future, as current usage is simply the selected property of the node. */ drawNodeShape(node: LGraphNode, ctx: CanvasRenderingContext2D, size: Size, fgcolor: CanvasColour, bgcolor: CanvasColour, _selected: boolean): void; /** * Draws a snap guide for a {@link Positionable} item. * * Initial design was a simple white rectangle representing the location the * item would land if dropped. * @param ctx The 2D canvas context to draw on * @param item The item to draw a snap guide for * @param shape The shape of the snap guide to draw * @todo Update to align snapping with boundingRect * @todo Shapes */ drawSnapGuide(ctx: CanvasRenderingContext2D, item: Positionable, shape?: RenderShape): void; drawConnections(ctx: CanvasRenderingContext2D): void; /** * draws a link between two points * @param ctx Canvas 2D rendering context * @param a start pos * @param b end pos * @param link the link object with all the link info * @param skip_border ignore the shadow of the link * @param flow show flow animation (for events) * @param color the color for the link * @param start_dir the direction enum * @param end_dir the direction enum */ renderLink(ctx: CanvasRenderingContext2D, a: ReadOnlyPoint, b: ReadOnlyPoint, link: LLink | null, skip_border: boolean, flow: number | null, color: CanvasColour | null, start_dir: LinkDirection, end_dir: LinkDirection, { startControl, endControl, reroute, num_sublines, disabled, }?: { /** When defined, render data will be saved to this reroute instead of the {@link link}. */ reroute?: Reroute; /** Offset of the bezier curve control point from {@link a point a} (output side) */ startControl?: ReadOnlyPoint; /** Offset of the bezier curve control point from {@link b point b} (input side) */ endControl?: ReadOnlyPoint; /** Number of sublines (useful to represent vec3 or rgb) @todo If implemented, refactor calculations out of the loop */ num_sublines?: number; /** Whether this is a floating link segment */ disabled?: boolean; }): void; /** * Finds a point along a spline represented by a to b, with spline endpoint directions dictacted by start_dir and end_dir. * @param a Start point * @param b End point * @param t Time: distance between points (e.g 0.25 is 25% along the line) * @param start_dir Spline start direction * @param end_dir Spline end direction * @returns The point at {@link t} distance along the spline a-b. */ computeConnectionPoint(a: ReadOnlyPoint, b: ReadOnlyPoint, t: number, start_dir: LinkDirection, end_dir: LinkDirection): Point; drawExecutionOrder(ctx: CanvasRenderingContext2D): void; /** * draws the widgets stored inside a node * @deprecated Use {@link LGraphNode.drawWidgets} instead. * @remarks Currently there are extensions hijacking this function, so we cannot remove it. */ drawNodeWidgets(node: LGraphNode, _posY: null, ctx: CanvasRenderingContext2D): void; /** * draws every group area in the background */ drawGroups(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D): void; /** * resizes the canvas to a given size, if no size is passed, then it tries to fill the parentNode * @todo Remove or rewrite */ resize(width?: number, height?: number): void; onNodeSelectionChange(): void; /** * Determines the furthest nodes in each direction for the currently selected nodes */ boundaryNodesForSelection(): NullableProperties; showLinkMenu(segment: LinkSegment, e: CanvasPointerEvent): boolean; createDefaultNodeForSlot(optPass: ICreateDefaultNodeOptions): boolean; showConnectionMenu(optPass: Partial): ContextMenu | undefined; prompt(title: string, value: any, callback: (arg0: any) => void, event: CanvasPointerEvent, multiline?: boolean): HTMLDivElement; showSearchBox(event: MouseEvent, searchOptions?: IShowSearchOptions): HTMLDivElement; showEditPropertyValue(node: LGraphNode, property: string, options: IDialogOptions): IDialog | undefined; createDialog(html: string, options: IDialogOptions): IDialog; createPanel(title: string, options: ICreatePanelOptions): any; closePanels(): void; showShowNodePanel(node: LGraphNode): void; checkPanels(): void; getCanvasMenuOptions(): IContextMenuValue[]; getNodeMenuOptions(node: LGraphNode): (IContextMenuValue | IContextMenuValue | IContextMenuValue | IContextMenuValue<"default" | "box" | "round" | "card", unknown, unknown> | IContextMenuValue | null)[]; /** @deprecated */ getGroupMenuOptions(group: LGraphGroup): (IContextMenuValue | IContextMenuValue | null)[]; processContextMenu(node: LGraphNode | undefined, event: CanvasPointerEvent): void; /** * Starts an animation to fit the view around the specified selection of nodes. * @param bounds The bounds to animate the view to, defined by a rectangle. */ animateToBounds(bounds: ReadOnlyRect, options?: AnimationOptions): void; /** * Fits the view to the selected nodes with animation. * If nothing is selected, the view is fitted around all items in the graph. */ fitViewToSelectionAnimated(options?: AnimationOptions): void; } export {};