bot-flow-editor

Design

export type Event<T = any, D = any> = {
  type: string;
  target: T;
  data: D;
};

export interface Point {
  x: number;
  y: number;
}

export interface Size {
  width: number;
  height: number;
}
export interface Distance {
  dx: number;
  dy: number;
}
export type NodeEvent<D> = Event<ActionNode, D>;
export type EditorEvent<D> = Event<FlowEditor, D>;

export interface ActionNodePort {
  readonly index: number;
  readonly actionNode: ActionNode;
}

export class ActionNode {
  readonly x: number;
  readonly y: number;
  readonly width: number;
  readonly selected: boolean;

  height: number;

  getPort(index: number): Point[];

  draw(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;

  copy(options: { dx: number; dy: number }): ActionNode;
}

interface NodeGraph<TNode = unknown> {
  nodes: Iterable<TNode>;
  getNextNodes(node: TNode): Iterable<TNode>;
}

export interface FlowEditor {
  import(graph: NodeGraph<ActionNode>): void;
  export(): NodeGraph<ActionNode>;

  zoom(scale: number): void;
  readonly zoomScale: number;

  readonly hasMoreUndo: boolean;
  readonly hasMoreRedo: boolean;
  undo(): void;
  redo(): void;

  autoLayout(): void;
  selectAll(): void;

  // 3 cases:
  //   1) port is not connected
  //   2) port is already connected to another node, disconnect it first
  //   3) port is connected to a new node, add node to the graph and connect it
  connectTo(
    fromNode: ActionNode,
    fromNodePortIndex: number,
    toNode: ActionNode,
  ): void;

  addNode(node: ActionNode, pos: Point): void;
  removeNode(node: ActionNode): void;
  removeSelectedNodes(): void;
  addNodePort(node: ActionNode, index?: number): void;
  removeNodePort(node: ActionNode, index: number): void;

  beginEditNode(): void;
  endEditNode(): void;

  onSelectNode(
    callback: (e: NodeEvent<{ selectedNodes: ActionNode[] }>) => void,
  ): void;
  onNewNode(
    callback: (
      e: EditorEvent<{
        fromNode?: ActionNode;
        fromPortIndex?: number;
        x: number;
        y: number;
      }>,
    ) => void,
  ): void;

  readonly isModified: boolean;
  onIsModifiedChanged(
    callback: (
      e: EditorEvent<{
        cmd:
          | "undo"
          | "redo"
          | "zoom"
          | "auto-layout"
          | "select-all"
          | "node-cmd"
          | "edge-cmd";
      }>,
    ) => void,
  ): void;
}