Connection rendering in wrong location on canvas

[geoffreymina13]

Trying to get started with some generic sample code and the connection SVG are rendering about 350px too far to the right of the node start node. Anything in particular I should be looking for to determine what is causing this?

<div style="width: 1000px; height: 1000px" class="red-border">
    <div id="drawflow" style="display: block; position: relative; width:100%; height: 100%" @dblclick="addNode">
    </div>
</div>

let id = document.getElementById("drawflow");
this.editor = new Drawflow(id);
this.editor.reroute = true;
this.editor.reroute_fix_curvature = true;
this.editor.start();

const data = {
name: ''
};

this.editor.addNode('foo', 1, 1, 100, 200, 'foo', data, 'Foo');
this.editor.addNode('bar', 1, 1, 400, 100, 'bar', data, 'Bar A');
this.editor.addNode('bar', 1, 1, 400, 300, 'bar', data, 'Bar B');

this.editor.addConnection(1, 2, "output_1", "input_1");
this.editor.addConnection(1, 3, "output_1", "input_1");

[geoffreymina13]

I believe this had something to do with my global style sheet... although, I'm not sure what. When building a simple app I did not experience the issue. Adding the following to my drawflow component resolved the issue.

.connection {
    left: 0;
}

[jerosoler]

I see you have fixed it! If you need more help open another issue!

[geoffreymina13]

Thank you! Very nice work on this library. I have looked at many solutions and all have either been overly complex or too rigid. After we finish our implementation, we will definitely be donating more to the cause.