How to import connection

[linonetwo]

https://retejs.org/docs/guides/import-export/ and https://codesandbox.io/s/rete-js-v2-import-export-999y8z?file=/src/index.ts

didn't mention how to do this.

And my trial also failed (learn from https://retejs.org/examples/performance ), connection is in the editor.getConnections(), but not shown in the UI.

export class ReteConnection<A extends ReteNode, B extends ReteNode> extends ClassicPreset.Connection<
  A,
  B
> {
  selected?: boolean;
}

export async function importGraphJSON(
  data: IExportedGraphJSON,
  editor: NodeEditor<EditorSchemes>,
  area: AreaPlugin<EditorSchemes, AreaExtra>,
  availableConfigs: Record<string, INodeDefinitionData>,
) {
  const addNodeTasks: Array<Promise<unknown>> = [];
  for (const nodeData of data.nodes) {
    /**
     * Node config that can be used to build a runtime node
     */
    const nodeConfig = availableConfigs[nodeData.type];
    if (nodeConfig === undefined) {
      // TODO: emit error to UI or output to console
      console.error(`Node ${nodeData.type} is not found in availableConfigs`);
      continue;
    }
    // node definition data -> rete ui node instance
    const node = buildNodeFromNodeData(nodeConfig);
    applyNodeDataToReteNode(node, nodeData);

    const task = editor.addNode(node).then(async () => {
      await applyNodeInfoToArea(node, nodeData, area);
    });
    addNodeTasks.push(task);
  }
  await Promise.all(addNodeTasks);
  const addConnectionTasks: Array<Promise<unknown>> = [];
  for (const connectionData of data.connections) {
    const connection = new ReteConnection(
      editor.getNode(connectionData.from.id),
      connectionData.from.portName,
      editor.getNode(connectionData.to.id),
      connectionData.to.portName,
    );
    connection.id = connectionData.id ?? connection.id;
    // DEBUG: console connection
    console.log(`connection`, connection);
    addConnectionTasks.push(editor.addConnection(
      connection,
    ));
  }
  await Promise.all(addConnectionTasks);
  // DEBUG: console editor.getConnections()
  console.log(`editor.getConnections()`, editor.getConnections());
}

async function applyNodeInfoToArea(node: ReteNode, nodeData: INodeExportedJSON, area: AreaPlugin<EditorSchemes, AreaExtra>) {
  if (nodeData.x !== undefined && nodeData.y !== undefined) {
    await area.translate(node.id, { x: nodeData.x, y: nodeData.y });
  }
}

[linonetwo]

editor.getNode(connectionData.from.id) is undefined, after editor.addNode(node). I will check why.

The connection data is exported by

    data.connections.push(
      {
        id: connection.id,
        from: {
          id: connection.source,
          portName: connection.sourceOutput,
        },
        to: {
          id: connection.target,
          portName: connection.targetInput,
        },
      } satisfies IConnectionExportedJSON,
    );

Maybe node id here is wrong.

[linonetwo]

Solved, forget to apply id back to the node. This will work.

/**
 * ReteNode is a wrapper of Rete's ClassicPreset.Node, it contains all the information of a memeloop node.
 * This class can used for showing available nodes in the node list for user to place, also can be used for rendering the node from a saved graph.
 */
export class ReteNode<InputObject = Record<string, unknown>, OutputObject = Record<string, unknown>> extends ClassicPreset.Node
  implements INodeMetadata, INodeSize
{
  width: number;
  height: number;
  name: string;
  description: string;
  /**
   * Corresponding to plugin provided node's id field
   */
  type: string;
  executionType: BaseNodeType;
  usage: string;
  /**
   * Store the runtime value of latest input data.
   * Mainly used for debugging and exporting.
   */
  public latestInput: InputObject = {} as InputObject;
  /**
   * Store the runtime value of latest output data.
   * Mainly used for debugging and exporting.
   */
  public latestOutputs: OutputObject = {} as OutputObject;

  constructor(config: INodeDefinitionData) {
    // TODO: translate name using i18n
    super(config.name ?? 'Unnamed Node');
    this.width = config.width ?? 200;
    this.height = config.height ?? 200;
    this.name = config.name ?? '';
    this.type = config.type ?? '';
    this.description = config.description ?? '';
    this.executionType = config.executionType ?? BaseNodeType.controlFlowNode;
    this.usage = config.usage ?? '';
    this.id = config.id ?? nanoid();
  }
}

[Ni55aN]

instead of nanoid you can use getUID() from rete