alyssaxuu / flowy

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

Output/Import Error #76

Closed fcnyp closed 4 years ago

fcnyp commented 4 years ago

Getting some odd errors 'Error: attribute d: Expected number, "…L20 40L20 40L20 NaN".' and 'Error: attribute d: Expected number, "M15 NaNH25L20 NaNL15…".' when attempting to do imports programaigcally from data loaded in a database. One item of note, all errors seem to be coming from line 583.

The HTML will draw the graph fine, then when the import rearrange is fired the error presents itself. It will also throw the error any time I drag a block after the failed import.

In troubleshooting Im a bit of a loss as to what the proper structure of output/import should look like. The output creates three variables, blockarr, blocks and html. However, the import only uses html and assigns blocks the value of blockarr.

This is confusing as blocks and blockarr are created differently in the output. Can someone please provide some guidance on how output/import should be working?

fcnyp commented 4 years ago

Identified the error. Encoding/decoding the input/output is converting to int to strings. Think this could be solved by parsing out the block properties at import time and converting them to ints.

          flowy.import = function(output) {
            canvas_div.innerHTML = output.html;
            for (var a = 0; a < output.blockarr.length; a++) {
                var block = {
                    childwidth: parseInt(output.blockarr[a].childwidth),
                    parent: parseInt(output.blockarr[a].parent),
                    id: parseInt(output.blockarr[a].id),
                    x: parseInt(output.blockarr[a].x),
                    y: parseInt(output.blockarr[a].y),
                    width: parseInt(output.blockarr[a].width),
                    height: parseInt(output.blockarr[a].height)
                };
                blocks.push(block)
            }
            if (blocks.length > 1) {
                rearrangeMe();
            }
        }

One error I'm seeing now is that I exported the diagram at one browser size and imported it at another and all the arrows are off. Any ideas on how to adjust and correct this?

alyssaxuu commented 4 years ago

Fixed the import issue, although parsing as float to account for decimal values. Regarding the size issue - you mean the flowchart renders differently depending on the window size, or you mean zoom? Feel free to make a new issue to be able to look at it separately, I'll close this as the original issue has been resolved.