Online demo

[hadisfr]

What do you think about adding an online demo based on the provided example using the github-pages? 🤔

[aurora]

Yes, that would be really nice and i also have this on my wish list. Unfortunately, i didn't have time for it, so far 😞 ... maybe later, this year.

[hadisfr]

I may give it a try later. If it's successful, I'll make a pull request.

[aurora]

Sure, thanks for working on it!

[hadisfr]

I think it's somehow hard to create a pull request because I rewrite history.

By the way, there's a very simple online demo based on example available at https://hadisfr.github.io/flowdesigner now.
I think the simplest way is that you pull my gh-pages branch and push it to the same branch on your repo, and then select that branch from Settings as Source of GitHub Pages.

[aurora]

Mmmm ... that's strange, the example on your page seems to have some issues i thought i already resolved in the past, like the issue with the too short line when wiring up the nodes (the end of the red line is not below the mouse-pointer) and the issue where sometimes the node is dragged when you click the output bullet for drawing a wire. Strange ...

[hadisfr]

I didn't encountered the second one, but I have some guesses. 🤔 The first one occurs on the example, too. It was seemed worse on my gh page because I added a max-width: 100%; to canvas, which is removed now. Perhaps it fixes the second issue, too.
Also, It seems that the red line starts from the middle of starting connector but prolongates only until the borders of ending connector. It seems strange to me.

[aurora]

Ah, so it was the max-width setting, that caused the issues - yes the second issue is gone now, too. But i see what you mean with the ending connector. This is probably a bug in the code and should be fixed.

[hadisfr]

Let's provide a screenshot for documentation. :D

I tested in on firefox, chrome, and safari, and it's the same.

[aurora]

Yes, i think it shouldn't be that hard to fix. I'll have a look at it at the weekend.

[hadisfr]

It's something related to calcLine

flowdesigner/src/wire.js

Lines 29 to 49 in 1c9da16

	/**
	* Calculate helper line x,y.
	*/
	function calcLine(x1, y1, x2, y2)
	{
	var vx = x2 - x1;
	var vy = y2 - y1;
	var d = Math.sqrt(vx * vx + vy * vy);
	vx /= d;
	vy /= d;
	d = Math.max(0, d - 5);
	return {
	'x': Math.round(x1 + vx * d),
	'y': Math.round(y1 + vy * d)
	}
	}

There is a small space between the pointer and the end of the path, too. I don't get what this function is expected to do actually, (creating this space?) but it seems there's no need to this function in onMouseOver.

[aurora]

Good question. I think i had an issue with event handling, when the end of the line was right below the mouse cursor and therefore added the gap, yes, calcLine is used to add the gap - i should have documented this. I will do some tests on this at the weekend.