jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.78k stars 741 forks source link

Cannot read properties of null (reading 'querySelectorAll') when import #427

Closed mbadr2200 closed 2 years ago

mbadr2200 commented 2 years ago

This is the data that i imported { "AILNKvHXhMq8": { "id": "AILNKvHXhMq8", "name": "Node2", "data": { "name": "root😲", "objectId": "LNKvHXhMq8", "children": [ "TF51xbZsHE", "MHGZbbFIz4", "E6EOQQHnkI" ] }, "class": "Node2", "html": "Node2", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "AIundefined", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "AITF51xbZsHE", "output": "input_1" }, { "node": "AIMHGZbbFIz4", "output": "input_1" }, { "node": "AIE6EOQQHnkI", "output": "input_1" } ] } }, "pos_x": 0, "pos_y": 20 }, "AITF51xbZsHE": { "id": "AITF51xbZsHE", "name": "Node2", "data": { "name": "Antibiotics", "objectId": "TF51xbZsHE", "type": "Active_Ingredients_Groups", "children": [ "09JIBKByqw" ], "parent": "LNKvHXhMq8" }, "class": "Node2", "html": "Node2", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "AILNKvHXhMq8", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "AI09JIBKByqw", "output": "input_1" } ] } }, "pos_x": 0, "pos_y": 150 }, "AI09JIBKByqw": { "id": "AI09JIBKByqw", "name": "Node1", "data": { "name": "Amoxacillin", "objectId": "09JIBKByqw", "type": "Active_Ingredients", "parent": "TF51xbZsHE" }, "class": "Node1", "html": "Node1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "AITF51xbZsHE", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [] } }, "pos_x": 0, "pos_y": 280 }, "AIMHGZbbFIz4": { "id": "AIMHGZbbFIz4", "name": "Node2", "data": { "name": "Painkillers", "objectId": "MHGZbbFIz4", "type": "Active_Ingredients_Groups", "children": [ "dJd0BhoZTJ", "ve8Pnj2RD8", "4fHqXiHyIM" ], "parent": "LNKvHXhMq8" }, "class": "Node2", "html": "Node2", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "AILNKvHXhMq8", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [ { "node": "AIdJd0BhoZTJ", "output": "input_1" }, { "node": "AIve8Pnj2RD8", "output": "input_1" }, { "node": "AI4fHqXiHyIM", "output": "input_1" } ] } }, "pos_x": 300, "pos_y": 280 }, "AIdJd0BhoZTJ": { "id": "AIdJd0BhoZTJ", "name": "Node1", "data": { "name": "paracetamol", "objectId": "dJd0BhoZTJ", "type": "Active_Ingredients", "parent": "MHGZbbFIz4" }, "class": "Node1", "html": "Node1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "AIMHGZbbFIz4", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [] } }, "pos_x": 0, "pos_y": 410 }, "AIve8Pnj2RD8": { "id": "AIve8Pnj2RD8", "name": "Node1", "data": { "name": "Caffine", "objectId": "ve8Pnj2RD8", "type": "Active_Ingredients", "parent": "MHGZbbFIz4" }, "class": "Node1", "html": "Node1", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "AIMHGZbbFIz4", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [] } }, "pos_x": 300, "pos_y": 410 }, "AI4fHqXiHyIM": { "id": "AI4fHqXiHyIM", "name": "Node2", "data": { "name": "Sedatives", "objectId": "4fHqXiHyIM", "type": "Active_Ingredients_Groups", "children": [], "parent": "MHGZbbFIz4" }, "class": "Node2", "html": "Node2", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "AIMHGZbbFIz4", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [] } }, "pos_x": 600, "pos_y": 410 }, "AIE6EOQQHnkI": { "id": "AIE6EOQQHnkI", "name": "Node2", "data": { "name": "Chemo", "objectId": "E6EOQQHnkI", "type": "Active_Ingredients_Groups", "children": [], "parent": "LNKvHXhMq8" }, "class": "Node2", "html": "Node2", "typenode": "vue", "inputs": { "input_1": { "connections": [ { "node": "AILNKvHXhMq8", "input": "output_1" } ] } }, "outputs": { "output_1": { "connections": [] } }, "pos_x": 600, "pos_y": 540 } } I keep getting this error image

and my flow just render these image any help 🆘

jerosoler commented 2 years ago

The default export start with:

{
    "drawflow": {
        "Home": {
        ....

And the first module requiered "Home"

Pass the complete code.

mbadr2200 commented 2 years ago

thats what i have done and i just cut the code for youScreenshot_2022-05-18-16-42-30-524_com.github.android.jpg

jerosoler commented 2 years ago

First node "root😲"

You have a connection at the input of a node that does not exist.

"inputs": {
            "input_1": {
                "connections": [
                    {
                        "node": "AIundefined",
                        "input": "output_1"
                    }
                ]
            }
        },
mbadr2200 commented 2 years ago

Oh 😳 i don't see that coming 😅 i will fix it thank you for the Great library 👍😃