@elicdavis/node-flow 0.1.16 → 0.1.18

package/dist/index.d.mts

@@ -199,6 +199,8 @@ interface PortConfig {
  * anything. They connect when those sets overlap.
  */
 declare function portsCompatible(a: Port | undefined | null, b: Port | undefined | null): boolean;
+declare function typeSetsCompatible(a: Array<string>, b: Array<string>): boolean;
+declare function portConfigTypes(config: PortConfig): Array<string>;
 declare class Port {
     #private;
     constructor(node: FlowNode, portType: PortType, config?: PortConfig);
@@ -373,11 +375,36 @@ declare class FlowNode {
     outputs(): number;
     addMessage(message: NodeMessageConfig): void;
     clearMessages(): void;
+    hasBeenLaidOut(): boolean;
     render(ctx: CanvasRenderingContext2D, camera: Camera, state: NodeState, mousePosition: Vector2 | undefined, postProcess: PassSubsystem): void;
+    layoutPortsWithoutDrawing(bounds: Box, zoom: number): boolean;
 }
 
 type NodeAddedCallback = (node: FlowNode) => void;
 type NodeRemovedCallback = (node: FlowNode) => void;
+/**
+ * A connection between two nodes of a copied set, by their position in that
+ * set rather than by node, so it can be rebuilt against the copies.
+ */
+interface InternalConnection {
+    fromNode: number;
+    fromPort: number;
+    toNode: number;
+    toPort: number;
+}
+/**
+ * A connection that was dragged out and dropped on empty canvas. Describes
+ * what a node would have to offer to finish it, and joins the two up once
+ * one has been made.
+ */
+interface DanglingConnection {
+    /** The side the new node has to offer. */
+    needs: PortType;
+    /** The types that side has to accept. Empty takes anything. */
+    types: Array<string>;
+    /** Wires the new node to the port the drag started from. */
+    connectTo: (node: FlowNode) => void;
+}
 interface ConnectionRendererConfiguration {
     size?: number;
     color?: string;
@@ -400,6 +427,8 @@ declare class NodeSubsystem {
     clickStart(mousePosition: Vector2, camera: Camera, ctrlKey: boolean): boolean;
     mouseDragEvent(delta: Vector2, scale: number): boolean;
     clearNodeInputConnection(node: FlowNode, index: number): void;
+    connectionsWithin(nodes: Array<FlowNode>): Array<InternalConnection>;
+    setConnectionReleasedHandler(handler: (dangling: DanglingConnection) => void): void;
     clickEnd(): void;
     connectNodes(nodeOut: FlowNode, outPort: number, nodeIn: FlowNode, inPort: number): Connection | undefined;
     getNodes(): Array<FlowNode>;
@@ -422,9 +451,26 @@ declare class NodeSubsystem {
     removeNode(node: FlowNode): void;
     organize(ctx: CanvasRenderingContext2D): void;
     openContextMenu(ctx: CanvasRenderingContext2D, position: Vector2): ContextMenuConfig | null;
+    /** Drops the selection entirely. */
+    unselectAllNodes(): void;
+    /**
+     * Removes every selected node, and the connections that touched them.
+     */
+    removeSelectedNodes(): Array<FlowNode>;
     render(ctx: CanvasRenderingContext2D, camera: Camera, mousePosition: Vector2 | undefined): RenderResults | undefined;
 }
 
+/**
+ * Narrows a "new node" menu to the nodes that could actually be wired to a
+ * particular port.
+ */
+interface NodeMenuFilter {
+    /** Which side the new node has to offer. */
+    needs: PortType;
+    /** Types that side has to accept. An empty list takes anything. */
+    types: Array<string>;
+    onCreated?: (node: FlowNode) => void;
+}
 interface PublisherNodes {
     [name: string]: FlowNodeConfig;
 }
@@ -440,7 +486,7 @@ declare class Publisher {
     nodes(): Map<string, FlowNodeConfig>;
     register(nodeType: string, config: FlowNodeConfig): void;
     unregister(nodeType: string): boolean;
-    contextMenu(graph: NodeSubsystem, position: Vector2): ContextMenuConfig;
+    contextMenu(graph: NodeSubsystem, position: Vector2, filter?: NodeMenuFilter): ContextMenuConfig;
     create(nodeType: string): FlowNode;
 }
 
@@ -458,8 +504,8 @@ declare class NodeFactory {
     addOnNodeCreatedListener(callback: NodeCreatedCallback): void;
     addPublisher(identifier: string, publisher: Publisher): void;
     create(publisher: string, nodeType: string): FlowNode;
-    newNodeSubmenus(graph: NodeSubsystem, position: Vector2): Array<ContextMenuConfig>;
-    openMenu(graph: NodeSubsystem, position: Vector2): ContextMenuConfig;
+    newNodeSubmenus(graph: NodeSubsystem, position: Vector2, filter?: NodeMenuFilter): Array<ContextMenuConfig>;
+    openMenu(graph: NodeSubsystem, position: Vector2, filter?: NodeMenuFilter): ContextMenuConfig;
 }
 
 type NoteContentChangeCallback = (node: FlowNote, newContents: string) => void;
@@ -518,7 +564,33 @@ interface NoteSubsystemConfig {
     notes?: Array<FlowNoteConfig>;
 }
 
+interface MinimapConfig {
+    enabled?: boolean;
+    width?: number;
+    height?: number;
+    margin?: number;
+    /** Overrides Theme.Minimap.BackgroundColor for this minimap alone. */
+    backgroundColor?: string;
+    /** Overrides Theme.Minimap.BorderColor for this minimap alone. */
+    borderColor?: string;
+    /** Overrides Theme.Minimap.NodeColor for this minimap alone. */
+    nodeColor?: string;
+    /** Overrides Theme.Minimap.ViewportColor for this minimap alone. */
+    viewportColor?: string;
+}
+declare class Minimap {
+    #private;
+    constructor(config?: MinimapConfig);
+    enabled(): boolean;
+    setEnabled(enabled: boolean): void;
+    contains(position: Vector2): boolean;
+    graphPositionOf(position: Vector2, out: Vector2): void;
+    render(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, camera: Camera, nodes: Array<FlowNode>): void;
+}
+
 type GraphRenderer = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, position: Vector2, scale: number) => void;
+type CopyCallback = (nodes: Array<FlowNode>, connections: Array<InternalConnection>) => void;
+type PasteCallback = (position: Vector2) => void;
 interface FlowNodeGraphConfiguration {
     backgroundRenderer?: GraphRenderer;
     backgroundColor?: string;
@@ -526,6 +598,7 @@ interface FlowNodeGraphConfiguration {
     contextMenu?: ContextMenuConfig;
     nodes?: NodeFactoryConfig;
     board?: NoteSubsystemConfig;
+    minimap?: MinimapConfig;
 }
 declare class GraphView {
     #private;
@@ -540,11 +613,15 @@ declare class GraphView {
 declare class NodeFlowGraph {
     #private;
     constructor(canvas: HTMLCanvasElement, config?: FlowNodeGraphConfiguration);
+    addCopyListener(callback: CopyCallback): void;
+    addPasteListener(callback: PasteCallback): void;
     addNoteAddedListener(callback: NoteAddedCallback): void;
     addNoteRemovedListener(callback: NoteRemovedCallback): void;
     addNoteDragStartListener(callback: NoteDragStartCallback): void;
     addNoteDragStopListener(callback: NoteDragStopCallback): void;
     zoom(amount: number, anchor?: Vector2): void;
+    /** The minimap, so it can be turned on and sized by the host. */
+    minimap(): Minimap;
     currentView(): GraphView;
     organize(): void;
     addPublisher(identifier: string, publisher: Publisher): void;
@@ -554,6 +631,8 @@ declare class NodeFlowGraph {
      * state used by Ctrl+click and box-select styling via FlowNode.selected()).
      */
     getSelectedNodes(): Array<FlowNode>;
+    unselectAllNodes(): void;
+    removeSelectedNodes(): Array<FlowNode>;
     /**
      * Returns a copy of the current camera orientation (screen-space pan + zoom).
      */
@@ -583,6 +662,9 @@ declare class NodeFlowGraph {
     addOnNodeCreatedListener(callback: NodeCreatedCallback): void;
     addOnNodeAddedListener(callback: NodeAddedCallback): void;
     addOnNodeRemovedListener(callback: NodeRemovedCallback): void;
+    requestRender(): void;
+    renderContinuously(): () => void;
+    dispose(): void;
 }
 
 declare const Theme: {
@@ -646,6 +728,14 @@ declare const Theme: {
         FontColor: string;
         DisabledFontColor: string;
     };
+    Minimap: {
+        BackgroundColor: string;
+        BorderColor: string;
+        BorderRadius: number;
+        Padding: number;
+        NodeColor: string;
+        ViewportColor: string;
+    };
     Note: {
         FontColor: string;
         FontSize: number;
@@ -670,6 +760,9 @@ declare const Theme: {
     };
 };
 
+declare function requestRender(): void;
+declare function renderContinuously(): () => void;
+
 interface TextBoxStyleConfig {
     box?: BoxStyleConfig;
     text?: TextStyleConfig;
@@ -889,4 +982,4 @@ declare class WidgetFactory {
 }
 declare const GlobalWidgetFactory: WidgetFactory;
 
-export { type Box, ButtonWidget, type ButtonWidgetConfig, type CameraOrientation, ColorWidget, type ColorWidgetConfig, Connection, type ConnectionRenderer, type ConnectionRendererParams, type ContextMenuConfig, type ContextMenuItemConfig, ContextMenuItemState, DefaultConnectionRenderer, FlowNode, type FlowNodeConfig, type FlowNodeGraphConfiguration, type FlowNodeStyle, type FlowNodeTitleConfig, FlowNote, type FlowNoteConfig, GlobalWidgetFactory, type GraphRenderer, ImageWidget, type ImageWidgetConfig, MessageType, type NodeCreatedCallback, NodeFactory, type NodeFactoryConfig, NodeFlowGraph, type NodeIntersection, type NodeMessageConfig, NodeState, type NoteAddedCallback, type NoteContentChangeCallback, type NoteDragStartCallback, type NoteDragStopCallback, type NoteRemovedCallback, type NoteSubsystemConfig, type NoteWidthChangeCallback, NumberWidget, type NumberWidgetConfig, Port, type PortConfig, type PortStyle, PortType, Publisher, type PublisherConfig, SliderWidget, type SliderWidgetConfig, StringWidget, type StringWidgetConfig, TextWidget, type TextWidgetConfig, Theme, type ToggleStyleConfig, ToggleWidget, type ToggleWidgetConfig, type Vector2, type Widget, type WidgetBuilder, type WidgetConfig, WidgetFactory, portsCompatible };
+export { type Box, ButtonWidget, type ButtonWidgetConfig, type CameraOrientation, ColorWidget, type ColorWidgetConfig, Connection, type ConnectionRenderer, type ConnectionRendererParams, type ContextMenuConfig, type ContextMenuItemConfig, ContextMenuItemState, type CopyCallback, type DanglingConnection, DefaultConnectionRenderer, FlowNode, type FlowNodeConfig, type FlowNodeGraphConfiguration, type FlowNodeStyle, type FlowNodeTitleConfig, FlowNote, type FlowNoteConfig, GlobalWidgetFactory, type GraphRenderer, ImageWidget, type ImageWidgetConfig, type InternalConnection, MessageType, Minimap, type MinimapConfig, type NodeCreatedCallback, NodeFactory, type NodeFactoryConfig, NodeFlowGraph, type NodeIntersection, type NodeMenuFilter, type NodeMessageConfig, NodeState, type NoteAddedCallback, type NoteContentChangeCallback, type NoteDragStartCallback, type NoteDragStopCallback, type NoteRemovedCallback, type NoteSubsystemConfig, type NoteWidthChangeCallback, NumberWidget, type NumberWidgetConfig, type PasteCallback, Port, type PortConfig, type PortStyle, PortType, Publisher, type PublisherConfig, SliderWidget, type SliderWidgetConfig, StringWidget, type StringWidgetConfig, TextWidget, type TextWidgetConfig, Theme, type ToggleStyleConfig, ToggleWidget, type ToggleWidgetConfig, type Vector2, type Widget, type WidgetBuilder, type WidgetConfig, WidgetFactory, portConfigTypes, portsCompatible, renderContinuously, requestRender, typeSetsCompatible };

package/dist/index.d.ts

@@ -199,6 +199,8 @@ interface PortConfig {
  * anything. They connect when those sets overlap.
  */
 declare function portsCompatible(a: Port | undefined | null, b: Port | undefined | null): boolean;
+declare function typeSetsCompatible(a: Array<string>, b: Array<string>): boolean;
+declare function portConfigTypes(config: PortConfig): Array<string>;
 declare class Port {
     #private;
     constructor(node: FlowNode, portType: PortType, config?: PortConfig);
@@ -373,11 +375,36 @@ declare class FlowNode {
     outputs(): number;
     addMessage(message: NodeMessageConfig): void;
     clearMessages(): void;
+    hasBeenLaidOut(): boolean;
     render(ctx: CanvasRenderingContext2D, camera: Camera, state: NodeState, mousePosition: Vector2 | undefined, postProcess: PassSubsystem): void;
+    layoutPortsWithoutDrawing(bounds: Box, zoom: number): boolean;
 }
 
 type NodeAddedCallback = (node: FlowNode) => void;
 type NodeRemovedCallback = (node: FlowNode) => void;
+/**
+ * A connection between two nodes of a copied set, by their position in that
+ * set rather than by node, so it can be rebuilt against the copies.
+ */
+interface InternalConnection {
+    fromNode: number;
+    fromPort: number;
+    toNode: number;
+    toPort: number;
+}
+/**
+ * A connection that was dragged out and dropped on empty canvas. Describes
+ * what a node would have to offer to finish it, and joins the two up once
+ * one has been made.
+ */
+interface DanglingConnection {
+    /** The side the new node has to offer. */
+    needs: PortType;
+    /** The types that side has to accept. Empty takes anything. */
+    types: Array<string>;
+    /** Wires the new node to the port the drag started from. */
+    connectTo: (node: FlowNode) => void;
+}
 interface ConnectionRendererConfiguration {
     size?: number;
     color?: string;
@@ -400,6 +427,8 @@ declare class NodeSubsystem {
     clickStart(mousePosition: Vector2, camera: Camera, ctrlKey: boolean): boolean;
     mouseDragEvent(delta: Vector2, scale: number): boolean;
     clearNodeInputConnection(node: FlowNode, index: number): void;
+    connectionsWithin(nodes: Array<FlowNode>): Array<InternalConnection>;
+    setConnectionReleasedHandler(handler: (dangling: DanglingConnection) => void): void;
     clickEnd(): void;
     connectNodes(nodeOut: FlowNode, outPort: number, nodeIn: FlowNode, inPort: number): Connection | undefined;
     getNodes(): Array<FlowNode>;
@@ -422,9 +451,26 @@ declare class NodeSubsystem {
     removeNode(node: FlowNode): void;
     organize(ctx: CanvasRenderingContext2D): void;
     openContextMenu(ctx: CanvasRenderingContext2D, position: Vector2): ContextMenuConfig | null;
+    /** Drops the selection entirely. */
+    unselectAllNodes(): void;
+    /**
+     * Removes every selected node, and the connections that touched them.
+     */
+    removeSelectedNodes(): Array<FlowNode>;
     render(ctx: CanvasRenderingContext2D, camera: Camera, mousePosition: Vector2 | undefined): RenderResults | undefined;
 }
 
+/**
+ * Narrows a "new node" menu to the nodes that could actually be wired to a
+ * particular port.
+ */
+interface NodeMenuFilter {
+    /** Which side the new node has to offer. */
+    needs: PortType;
+    /** Types that side has to accept. An empty list takes anything. */
+    types: Array<string>;
+    onCreated?: (node: FlowNode) => void;
+}
 interface PublisherNodes {
     [name: string]: FlowNodeConfig;
 }
@@ -440,7 +486,7 @@ declare class Publisher {
     nodes(): Map<string, FlowNodeConfig>;
     register(nodeType: string, config: FlowNodeConfig): void;
     unregister(nodeType: string): boolean;
-    contextMenu(graph: NodeSubsystem, position: Vector2): ContextMenuConfig;
+    contextMenu(graph: NodeSubsystem, position: Vector2, filter?: NodeMenuFilter): ContextMenuConfig;
     create(nodeType: string): FlowNode;
 }
 
@@ -458,8 +504,8 @@ declare class NodeFactory {
     addOnNodeCreatedListener(callback: NodeCreatedCallback): void;
     addPublisher(identifier: string, publisher: Publisher): void;
     create(publisher: string, nodeType: string): FlowNode;
-    newNodeSubmenus(graph: NodeSubsystem, position: Vector2): Array<ContextMenuConfig>;
-    openMenu(graph: NodeSubsystem, position: Vector2): ContextMenuConfig;
+    newNodeSubmenus(graph: NodeSubsystem, position: Vector2, filter?: NodeMenuFilter): Array<ContextMenuConfig>;
+    openMenu(graph: NodeSubsystem, position: Vector2, filter?: NodeMenuFilter): ContextMenuConfig;
 }
 
 type NoteContentChangeCallback = (node: FlowNote, newContents: string) => void;
@@ -518,7 +564,33 @@ interface NoteSubsystemConfig {
     notes?: Array<FlowNoteConfig>;
 }
 
+interface MinimapConfig {
+    enabled?: boolean;
+    width?: number;
+    height?: number;
+    margin?: number;
+    /** Overrides Theme.Minimap.BackgroundColor for this minimap alone. */
+    backgroundColor?: string;
+    /** Overrides Theme.Minimap.BorderColor for this minimap alone. */
+    borderColor?: string;
+    /** Overrides Theme.Minimap.NodeColor for this minimap alone. */
+    nodeColor?: string;
+    /** Overrides Theme.Minimap.ViewportColor for this minimap alone. */
+    viewportColor?: string;
+}
+declare class Minimap {
+    #private;
+    constructor(config?: MinimapConfig);
+    enabled(): boolean;
+    setEnabled(enabled: boolean): void;
+    contains(position: Vector2): boolean;
+    graphPositionOf(position: Vector2, out: Vector2): void;
+    render(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, camera: Camera, nodes: Array<FlowNode>): void;
+}
+
 type GraphRenderer = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, position: Vector2, scale: number) => void;
+type CopyCallback = (nodes: Array<FlowNode>, connections: Array<InternalConnection>) => void;
+type PasteCallback = (position: Vector2) => void;
 interface FlowNodeGraphConfiguration {
     backgroundRenderer?: GraphRenderer;
     backgroundColor?: string;
@@ -526,6 +598,7 @@ interface FlowNodeGraphConfiguration {
     contextMenu?: ContextMenuConfig;
     nodes?: NodeFactoryConfig;
     board?: NoteSubsystemConfig;
+    minimap?: MinimapConfig;
 }
 declare class GraphView {
     #private;
@@ -540,11 +613,15 @@ declare class GraphView {
 declare class NodeFlowGraph {
     #private;
     constructor(canvas: HTMLCanvasElement, config?: FlowNodeGraphConfiguration);
+    addCopyListener(callback: CopyCallback): void;
+    addPasteListener(callback: PasteCallback): void;
     addNoteAddedListener(callback: NoteAddedCallback): void;
     addNoteRemovedListener(callback: NoteRemovedCallback): void;
     addNoteDragStartListener(callback: NoteDragStartCallback): void;
     addNoteDragStopListener(callback: NoteDragStopCallback): void;
     zoom(amount: number, anchor?: Vector2): void;
+    /** The minimap, so it can be turned on and sized by the host. */
+    minimap(): Minimap;
     currentView(): GraphView;
     organize(): void;
     addPublisher(identifier: string, publisher: Publisher): void;
@@ -554,6 +631,8 @@ declare class NodeFlowGraph {
      * state used by Ctrl+click and box-select styling via FlowNode.selected()).
      */
     getSelectedNodes(): Array<FlowNode>;
+    unselectAllNodes(): void;
+    removeSelectedNodes(): Array<FlowNode>;
     /**
      * Returns a copy of the current camera orientation (screen-space pan + zoom).
      */
@@ -583,6 +662,9 @@ declare class NodeFlowGraph {
     addOnNodeCreatedListener(callback: NodeCreatedCallback): void;
     addOnNodeAddedListener(callback: NodeAddedCallback): void;
     addOnNodeRemovedListener(callback: NodeRemovedCallback): void;
+    requestRender(): void;
+    renderContinuously(): () => void;
+    dispose(): void;
 }
 
 declare const Theme: {
@@ -646,6 +728,14 @@ declare const Theme: {
         FontColor: string;
         DisabledFontColor: string;
     };
+    Minimap: {
+        BackgroundColor: string;
+        BorderColor: string;
+        BorderRadius: number;
+        Padding: number;
+        NodeColor: string;
+        ViewportColor: string;
+    };
     Note: {
         FontColor: string;
         FontSize: number;
@@ -670,6 +760,9 @@ declare const Theme: {
     };
 };
 
+declare function requestRender(): void;
+declare function renderContinuously(): () => void;
+
 interface TextBoxStyleConfig {
     box?: BoxStyleConfig;
     text?: TextStyleConfig;
@@ -889,4 +982,4 @@ declare class WidgetFactory {
 }
 declare const GlobalWidgetFactory: WidgetFactory;
 
-export { type Box, ButtonWidget, type ButtonWidgetConfig, type CameraOrientation, ColorWidget, type ColorWidgetConfig, Connection, type ConnectionRenderer, type ConnectionRendererParams, type ContextMenuConfig, type ContextMenuItemConfig, ContextMenuItemState, DefaultConnectionRenderer, FlowNode, type FlowNodeConfig, type FlowNodeGraphConfiguration, type FlowNodeStyle, type FlowNodeTitleConfig, FlowNote, type FlowNoteConfig, GlobalWidgetFactory, type GraphRenderer, ImageWidget, type ImageWidgetConfig, MessageType, type NodeCreatedCallback, NodeFactory, type NodeFactoryConfig, NodeFlowGraph, type NodeIntersection, type NodeMessageConfig, NodeState, type NoteAddedCallback, type NoteContentChangeCallback, type NoteDragStartCallback, type NoteDragStopCallback, type NoteRemovedCallback, type NoteSubsystemConfig, type NoteWidthChangeCallback, NumberWidget, type NumberWidgetConfig, Port, type PortConfig, type PortStyle, PortType, Publisher, type PublisherConfig, SliderWidget, type SliderWidgetConfig, StringWidget, type StringWidgetConfig, TextWidget, type TextWidgetConfig, Theme, type ToggleStyleConfig, ToggleWidget, type ToggleWidgetConfig, type Vector2, type Widget, type WidgetBuilder, type WidgetConfig, WidgetFactory, portsCompatible };
+export { type Box, ButtonWidget, type ButtonWidgetConfig, type CameraOrientation, ColorWidget, type ColorWidgetConfig, Connection, type ConnectionRenderer, type ConnectionRendererParams, type ContextMenuConfig, type ContextMenuItemConfig, ContextMenuItemState, type CopyCallback, type DanglingConnection, DefaultConnectionRenderer, FlowNode, type FlowNodeConfig, type FlowNodeGraphConfiguration, type FlowNodeStyle, type FlowNodeTitleConfig, FlowNote, type FlowNoteConfig, GlobalWidgetFactory, type GraphRenderer, ImageWidget, type ImageWidgetConfig, type InternalConnection, MessageType, Minimap, type MinimapConfig, type NodeCreatedCallback, NodeFactory, type NodeFactoryConfig, NodeFlowGraph, type NodeIntersection, type NodeMenuFilter, type NodeMessageConfig, NodeState, type NoteAddedCallback, type NoteContentChangeCallback, type NoteDragStartCallback, type NoteDragStopCallback, type NoteRemovedCallback, type NoteSubsystemConfig, type NoteWidthChangeCallback, NumberWidget, type NumberWidgetConfig, type PasteCallback, Port, type PortConfig, type PortStyle, PortType, Publisher, type PublisherConfig, SliderWidget, type SliderWidgetConfig, StringWidget, type StringWidgetConfig, TextWidget, type TextWidgetConfig, Theme, type ToggleStyleConfig, ToggleWidget, type ToggleWidgetConfig, type Vector2, type Widget, type WidgetBuilder, type WidgetConfig, WidgetFactory, portConfigTypes, portsCompatible, renderContinuously, requestRender, typeSetsCompatible };