Error during import - Githubissues

cage81 commented 3 years ago

https://github.com/jerosoler/Drawflow/blob/9d98a71c38d89ab700376af205b9e593627fe81a/src/drawflow.js#L1415

Hi Jero, I'm trying to import drawflow data i saved in current storage (Vuex) but I'm getting this error (screenshot attached):

Uncaught TypeError: Cannot read property 'options' of undefined

If it could be useful, I'm not using options during nodes creation (I tried to set it to empty object or null, but it gave me same error). Any help? Could it be e bug?

jerosoler commented 3 years ago

Hello

editor.start()???

Can vuex transform the object?

Try:

var exportvalue = null;
exportvalue = editor.export();
editor.import(exportvalue);

This gives you an error?

Can you show the values of vuex and editor.export() in console, are they the same?

cage81 commented 3 years ago

Can vuex transform the object?

It seems that this is not the case

Try:

var exportvalue = null;
exportvalue = editor.export();
editor.import(exportvalue);

No, no error with this. I also tried to store the exportvalue in the Vuex and then import it from the Vuex and it works if I do it consecutively. But if I try to store drawflow's data in the Vuex (in the Vue's beforeRouteLeave method) and then reload drawflow's data (in the Vue's beforeRouteEnter method) I receive the error I showed you...I'm investigating about it...

Can you show the values of vuex and editor.export() in console, are they the same?

Yes, they are the same.

jerosoler commented 3 years ago

The only thing that occurs to me seeing that the word is marked is "options".

Are the nodes registered?

How are you registering the nodes?

What does the following code show you before importing?

console.log(editor.noderegister);

cage81 commented 3 years ago

Are the nodes registered?

I register the node when I create them (on an add button's click)

How are you registering the nodes?

Look:

const options = null;
props = { title: 'Node title', nodeText: 'Write here...', nodeHasInput: true, canHaveInput: canHaveInput, canHaveOutput: canHaveOutput };
this.editor.registerNode('GenericNode', GenericNode, props, options);

What does the following code show you before importing?
console.log(editor.noderegister);

An empty object...
Let me explain better: editor.noderegister has the GenericNode in the beforeRouteLeave, but it's empty in the beforeRouteEnter method.

jerosoler commented 3 years ago

You have to register the nodes before importing.

When importing it does not find the GenericNode node

cage81 commented 3 years ago

You have to register the nodes before importing.

When importing it does not find the GenericNode node

Ok, registering the GenericNode before import it works. It was a my mistake, I think it's not clear in the Export/Import section...but you are very helpful: thanks!

As you can see, my node is called "generic" because I can have three node types: start node (can have outputs and content, but not inputs), intermediate nodes (with an input, content and outputs) and an end node (with only one input), it depends on the button's type user clicks (and content can be of two types). Obviously, to use my customized bodies, I'm going to rewrite the addNodeImport method...but how can I handle this three kind of node (to be registered) before import? Any suggestion? Thanks a lot!

jerosoler commented 3 years ago

If you only have 3 nodes. Register the nodes before import and voila. If not, another option is to read the export file and see which nodes are registered.

I don't understand why you are going to override the addNodeImport method.

It all also depends on the content of the node.

cage81 commented 3 years ago

If you only have 3 nodes. Register the nodes before import and voila.

The node is only the GenericNode, but each one differs by its content (buttons or text) and if it can have input/outputs or not

If not, another option is to read the export file and see which nodes are registered.

I think I should try this...

I don't understand why you are going to override the addNodeImport method.

To set node's buttons label or text in the content

It all also depends on the content of the node.

Exactly, I customized a lot the node content (also to maintain an output for each content element)

jerosoler commented 3 years ago

Perfect!

I close the issue

cage81 commented 3 years ago

The only thing that occurs to me seeing that the word is marked is "options".

Are the nodes registered?

How are you registering the nodes?

What does the following code show you before importing?
console.log(editor.noderegister);

Nodes are registered but I still have the error "Cannot read property 'options' of undefined"

It should occur at this line:

https://github.com/jerosoler/Drawflow/blob/561192ac72ca980d15d54409a5d64d7b87e774ea/src/drawflow.js#L1476

What does it should do? I have no options (empty object) when i register the nodes and empty object in the console.log(JSON.stringify(editor.noderegister));

If I save nodes without content and without connections, it works and it draw the separated nodes. When I change nodes content/connections I get the error.

I'm going crazy...

jerosoler commented 3 years ago

Hello

You code:

const options = null;
props = { title: 'Node title', nodeText: 'Write here...', nodeHasInput: true, canHaveInput: canHaveInput, canHaveOutput: canHaveOutput };
this.editor.registerNode('GenericNode', GenericNode, props, options);

Try:

this.editor.registerNode('GenericNode', GenericNode, props);

The options no is required.

Can we see your code?

jerosoler commented 3 years ago

I just checked with Vue:

This code correct:

  mounted() {

    const id = document.getElementById("drawflow");
    this.editor = new Drawflow(id, Vue);
    const props = {};
    const options = {};
    this.editor.registerNode('NodeExample', NodeExample, props, options);
    this.editor.start();
    this.editor.import({"drawflow":{"Home":{"data":{"1":{"id":1,"name":"Name","data":{"action":"move","options":"up"},"class":"Class","html":"NodeExample","typenode":"vue","inputs":{"input_1":{"connections":[]},"input_2":{"connections":[]},"input_3":{"connections":[]}},"outputs":{"output_1":{"connections":[{"node":"2","output":"input_2"}]},"output_2":{"connections":[]}},"pos_x":10,"pos_y":200},"2":{"id":2,"name":"Name","data":{"action":"move2","options":"down"},"class":"Class","html":"NodeExample","typenode":"vue","inputs":{"input_1":{"connections":[]},"input_2":{"connections":[{"node":"1","input":"output_1"}]},"input_3":{"connections":[]}},"outputs":{"output_1":{"connections":[]},"output_2":{"connections":[]}},"pos_x":300,"pos_y":200}}}}});

This code produces your error: Node is not registered.

  mounted() {

    const id = document.getElementById("drawflow");
    this.editor = new Drawflow(id, Vue);
    const props = {};
    const options = {};
    // this.editor.registerNode('NodeExample', NodeExample, props, options);
    this.editor.start();
    this.editor.import({"drawflow":{"Home":{"data":{"1":{"id":1,"name":"Name","data":{"action":"move","options":"up"},"class":"Class","html":"NodeExample","typenode":"vue","inputs":{"input_1":{"connections":[]},"input_2":{"connections":[]},"input_3":{"connections":[]}},"outputs":{"output_1":{"connections":[{"node":"2","output":"input_2"}]},"output_2":{"connections":[]}},"pos_x":10,"pos_y":200},"2":{"id":2,"name":"Name","data":{"action":"move2","options":"down"},"class":"Class","html":"NodeExample","typenode":"vue","inputs":{"input_1":{"connections":[]},"input_2":{"connections":[{"node":"1","input":"output_1"}]},"input_3":{"connections":[]}},"outputs":{"output_1":{"connections":[]},"output_2":{"connections":[]}},"pos_x":300,"pos_y":200}}}}});

cage81 commented 3 years ago

Take a look at next answer...it was a my mistake.

cage81 commented 3 years ago

Ok, my mistake...as it was clear from the start. Sorry.

Problem was I modified the drawflow['Home'].data[nodeId].html in a piece of code.

Solving this issue, import works! It draws "empty nodes" (lets say without title, content, buttons/options)...I think I have to set properties, right?

jerosoler commented 3 years ago

Hello!

It should return the painted nodes. Unless when you load them you add some content.

cage81 commented 3 years ago

Hello!

It should return the painted nodes. Unless when you load them you add some content.

I'm going to override addNodeImport method because I have to set the input and output style.top position. Then I'll set the node content too. Thank you very much Mr. Jero!

Really cool library and a great developer support by the creator!

zaqisilverano commented 3 years ago

I got same issue, I check console and the node are registered. but still same error "Uncaught TypeError: Cannot read property 'options' of undefined". Do you know why?

This my code using vue typescript:


    const id = document.getElementById("pipelineCanvas");
    /* @ts-ignore */
    this.editor = new Drawflow(id, Vue);
    const props = { someProps: "some" };
    /* @ts-ignore */
    this.editor.registerNode("dataset",  BatchFileInput, props);
    this.editor.start();
    setTimeout(() => {
      this.editor.import({
        "drawflow": {
          "Home": {
            "data": {
              "1": {
                "id": 1,
                "name": "dataset",
                "data": {},
                "class": "BatchFileInput",
                "html": "BatchFileInput",
                "typenode": "vue",
                "inputs": {},
                "outputs": {
                  "output_1": {
                    "connections": []
                  }
                },
                "pos_x": 532,
                "pos_y": 207
              }
            }
          },
          "Sub": {
            "data": {
              "1": {
                "id": 1,
                "name": "dataset",
                "data": {},
                "class": "BatchFileInput",
                "html": "BatchFileInput",
                "typenode": "vue",
                "inputs": {},
                "outputs": {
                  "output_1": {
                    "connections": []
                  }
                },
                "pos_x": 832,
                "pos_y": 207
              }
            }
          }
        }
      })
    }, 300)
  }```

jerosoler / Drawflow

Error during import #58