Improved export / import functionality documentation

[pokecheater]

Description

Hi,

it's me againg the nuisance in person ;-).

I noticed that the export / import examples are very badly documented. With this it is only possible to export the nodes itself, but the connections and positions can not be restored with that. Therefore I want to provide my code in case you want to update that part of your documentation.

  export() {
    const exported_nodes = [];
    const nodes = this.editor.getNodes();
    const connections = this.editor.getConnections();

    for (const node of nodes) {
      const node_view = this.area_plugin.nodeViews.get(node.id);
      exported_nodes.push({
        node_class: node.constructor.name,
        id: node.id,
        name: node.name,
        config: node.config,
        params_schema: node.params_schema,
        position: node_view.position
      });
    }

    return {
      nodes: exported_nodes,
      connections: connections
    };
  }
 
 
 getNodeClass(node_class_name) {
    const node_class = nodes_list.find(node_class => {
      return node_class.name === node_class_name;
    })

    if (!node_class) {
      throw Error(`Node class not found: ${node_class_name}.`);
    } else {
      return node_class;
    }
  }
  
  
  
  async import(flow) {
    const flow_data = flow?.flow_data;
    if (flow_data?.nodes) {
      for(const node of flow_data.nodes) {
        const node_class = this.getNodeClass(node.node_class);
        await this.createNode(
          node_class,
          [node.position.x, node.position.y],
          node.config, 
          node.id
        );
      }
    }

    if (flow_data?.nodes && flow_data?.connections) {

      for(const conn of flow_data.connections) {
        const connection = new ClassicPreset.Connection(
          this.editor.getNode(conn.source),
          conn.sourceOutput,
          this.editor.getNode(conn.target),
          conn.targetInput
        );

        await this.editor.addConnection(connection);
      }
    }
  }
  
    async createNode(node_class, position, config=null, id=null) {
      const node = new node_class(config);
  
      if(id) node.id = id; // reset the id in case it is given (for example during the export)
      node.editor = this.editor; // give each node a reference to the editor, for advanced functions...
      node.area = this.area_plugin; // give each node a reference to the area plugin, for advanced functions...
      node.render = this.render; // give each node a reference to the render plugin, for advanced functions...
      await this.editor.addNode(node);
      await this.area_plugin.translate(node.id, { x: position[0], y: position[1] });
    }

this.editor is the editor plugin reference
this.area_plugin the reference to the area plugin.

and a short example for the nodes list. There are basically the classes that derive from your ClassicPreset.Node.

import TextInputNode from "./nodes/text_input_node.js";
import TextOutputNode from "./nodes/text_output_node.js";
import CallAgentNode from "./nodes/call_agent_node.js";

const nodes_list = [
    TextInputNode,
    TextOutputNode,
    CallAgentNode
]

Suggested Solution

Show in your tutorial how to export connections and positions of nodes.

Code of Conduct

• I agree to follow this project's Code of Conduct