search

alyssaxuu / flowy

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

messed up look #103

Closed xiaodaigh closed 4 years ago

xiaodaigh commented 4 years ago

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>
ebihimself commented 4 years ago

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

xiaodaigh commented 4 years ago

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.

shmcgough commented 4 years ago

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/

xiaodaigh commented 4 years ago

Thanks @shmcgough

alyssaxuu commented 4 years ago

@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.