alyssaxuu / flowy

The minimal javascript library to create flowcharts ✨
MIT License
11.48k stars 998 forks source link

import() method misbehaving #100

Closed ebihimself closed 4 years ago

ebihimself commented 4 years ago

I exported the flowchart using the output() method. After that, I tried to render the chart using the import method(). Rendered objects that are displayed on the canvas is one less comparing to the output items.

Also, I'm receiving the error "Unhandled rejection: TypeError: Cannot read property 'parentNode' of null" when I was trying to snap a new item to the rendered ones.

This how does the rendered canvas look like after import. there should be 3 but are 2. flowy

Just let you know the elements inside the "blocks" is one less than the "blockarr" items. Could it be related to this?

@alyssaxuu

fcnyp commented 4 years ago

Can you post your output (or a sanitized version)? I'm not following your description and need to see what your working with.

ghost commented 4 years ago

@fcnyp

Im encountering the same issue. Im using flowy.output() in the snapping callback to save the state of the tree (For an undo/redo implementation) but Ive encountered issues with regards to flowy.import() Here is the output I receive:

 {
   "html":"
test
", "blockarr":[ { "parent":-1, "childwidth":0, "id":0, "x":814, "y":351, "width":318, "height":83 } ], "blocks":[ { "id":0, "parent":-1, "data":[ { "name":"blockelemtype", "value":"1" }, { "name":"blockid", "value":"0" }, { "name":null, "value":"When a new visitor goes to Site 1" } ], "attr":[ { "data-v-084a4425":"" }, { "class":"configuratorTool block cfgCard" }, { "style":"left: 299px; top: 115px;" } ] } ] }

I should note as well that this output is only available after I the second time the snapping callback executes, after the first, the output appears to be undefined. It appears to only contain the second block added, and not the first. If I add a third it will include 2nd and 3rd, and so on. (As an aside: When in the callback lifecycle is the entire output ready?)

At the end of my snapping callback Im pushing flowy.output() into a undo stack as an object (not stringified as above), and an on page button will pop this object and push into flowy.import

When I try to import this output I get the following exception:

vue.js:1897 TypeError: Cannot read property 'parentNode' of null
    at N (flowy-engine.js:1)
    at Function.e.import (flowy-engine.js:1)
    at VueComponent.undoState (Config.vue:157)
    at click (Config.vue?0639:66)
    at invokeWithErrorHandling (vue.js:1863)
    at HTMLButtonElement.invoker (vue.js:2188)
    at HTMLButtonElement.original._wrapper (vue.js:7547)

Is there something Im missing with how the output() & import() should be handled?

alyssaxuu commented 4 years ago

Should be working fine now, I updated the library.