importing node with custom dropdown are not properly initilaized

[Rajeshwaran2001]

Describe the bug

storing node and connection data to local storage

const nodes = editor.getNodes();
      const nodesString = JSON.stringify(nodes);
      const connections = JSON.stringify(editor.getConnections());

importing stored node and connection from local storage

const storedNodesString = localStorage.getItem('nodesData');
  const connectionDetails = localStorage.getItem('connectionData');
  async function importForParent(nodes: any[], parent = undefined) {
    const ctnodes = nodes.filter(node => node.parent === parent)
      for (const node of ctnodes) {
      await editor.addNode(node)
      await importForParent(nodes, node.id)
    }
  }

  async function importConnection(data: any[]) {
    const connections  = data;
    for (const c of connections) {
      const source = editor.getNode(c.source);
      const target = editor.getNode(c.target);

      if (
        source &&
        target &&
        (source.outputs as any)[c.sourceOutput] &&
        (target.inputs as any)[c.targetInput]
      ) {
        const conn = new Connection(
          source,
          c.sourceOutput as never,
          target,
          c.targetInput as never
        );

        await editor.addConnection(conn);
      }
    }
  }

  if (storedNodesString !== null) {
    const storedNodes = JSON.parse(storedNodesString);
    await importForParent(storedNodes)
  }
  else {
    await editor.addNode(startNode);
    await editor.addNode(endNode);
  }

  if(connectionDetails !== null) {
    const nodeconnection = JSON.parse(connectionDetails);
    await importConnection(nodeconnection);
  }

class AddNode extends Classic.Node implements DataflowNode {
  width = 209;
  height = 315;

  constructor(private customService: CustomDropdownService) {
    super('Processing Setup');
    this.addInput('a', new Classic.Input(socket, 'connect'));
    this.addOutput('b', new Classic.Output(socket, 'Success'));
    this.addOutput('value', new Classic.Output(socket, 'Failed'));

    this.addControl('CustomLinkControl', new CustomLinkControl());
    this.addControl('CustomDropDownControl', new CustomDropDownControl(customService));
    this.addControl('CustomMultilineTextControl', new CustomMultilineTextControl());

  }

  data() {
    return {};
  }
}

this is my node here CustomDropDownControl is not rendering when i am importing from json

Example to reproduce

No response

How to reproduce

• Export node with custom drop down to JSON
• Import JSON data to editor

Expected behavior

i have a custom drop down and Link Control but when am importing from JSON it renders default input control but i want it to render my custom controls

Dependencies

rete - 2.0.1

Platform

No response

Relevant log output

No response

Code of Conduct

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

[Ni55aN]

editor.addNode should accept AddNode instance. Instead, it receives JSON object

[Rajeshwaran2001]

Thanks that worked but how to set value to each control.

async function importForParent(nodes: any[], parent = undefined) {
    const ctnodes = nodes.filter(node => node.parent === parent)    
    for (const node of ctnodes) {
      if (node.label =='Processing Setup') {
        var addNode = new AddNode(customDropdownService);
        addNode.id = node.id;
        addNode.label = node.label;
        await editor.addNode(addNode)
      }
      else
        await editor.addNode(node)      
      await importForParent(nodes, node.id)
    }
  }

[Ni55aN]

Thanks that worked but how to set value to each control.

It depends on the implementation of your control class

[rete-js[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[rete-js[bot]]

This issue was closed because it has been stalled for 10 days with no activity.