Giters

alyssaxuu / flowy

The minimal javascript library to create flowcharts ✨

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

messed up look

xiaodaigh opened this issue · comments

commented

image

Here's my html

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>The HTML5 Herald</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">

</head>

<body>
    <div class="create-flowy">Grab me 1</div>
    <div class="create-flowy">Grab me 2</div>

    <div id="canvas"></div>
    <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>

    <script>
        flowy(document.querySelector("#canvas"));
    </script>
</body>

</html>
commented

Could you describe more about the issue?
as it seems you are troubled with the styling? right?

commented

I just ran the above code in a simple server, then I just drag Drag me 1 and try to connect Drag me 2 onto it then this appears.

commented

Give up on this library, its poorly documented, plenty of bugs and not maintained at all.

To fix your issue however, you need to make the canvas div have 'position: absolute' in css and it'll work as expected

Here's a jsfiddle of your code with this fix showing it working
https://jsfiddle.net/6309udza/

commented

@xiaodaigh I just updated the library to account for different kinds of positioning with margins, so your original code should work now. I also took the opportunity to optimize it in some fronts.

@shmcgough Apologizes it is seen that way, I have been working on a new big release (check milestone) by completely redoing the library from zero, and while the code is much cleaner and way shorter, I've been having issues with certain functions (mainly to do with the rearrangeMe function in the current library, which automatically centers the children with respect to the parents, it is currently very cluttered and messy) which I can't quite simplify and make it work with new functionality (programmatically creating flowcharts, deleting single blocks, etc.).

Because of that I had planned to stop adding into the current version, but it's all just taking longer than I thought. I do want to make sure there are no bugs though so I will be trying to fix these ASAP.