UI: If there are multiple state outcome nets between two states, then their tags will overlap.

[josephcoombe]

Suppose you have 2 states A and B, each with two outcomes 'x' and 'y'

If you connect state A's outcome 'x' to state B, and
state B's outcome 'y' to state A, then
the state outcome nets between the two states (and their tags) will overlap,
meaning that you will only see one line and either 'x' or 'y'.

---

Perhaps, nets between 2 states should be routed differently (based on origin). Then you'd see 2 distinct lines between state A and state B. One line for the transition from A to B and one for the transition from B to A.

In the case of multiple transitions in one directions, I think it would be best to only render one line and simply display separate tags for each transitions (e.g. If both 'x' and 'y' from state A are connected to state B, then only one line with separate 'x' and 'y' bubbles would be displayed)

[pschillinger]

Yes, good point.

As it is implemented right now, a transition only knows the states it connects when being drawn, but does not consider any other transition. So it is in fact not trivial to make the visual appearance of a transition dependent on others, especially since the drawing order is random.

I can think a bit more about what makes most sense here. If you have any further ideas, let me know. But I definitely agree with the general problem.

[AndyIII]

I made this quick change in drawable_transitions.js:34 and it helps some. There are still a few corner cases where the selection of which side to attach to is weird, but it works for me. Basically, it has outgoing connections come from a different spot than ingoing connections.

	var bb1 = from.getBBox(),
	    bb2 = to.getBBox(),
        p = [{x: bb1.x + bb1.width / 4, y: bb1.y - 1},
        {x: bb1.x + bb1.width * 3 / 4, y: bb1.y + bb1.height + 1},
        {x: bb1.x - 1, y: bb1.y + bb1.height * 3 / 4},
        {x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 4},
        {x: bb2.x + bb2.width * 3 / 4, y: bb2.y - 1},
        {x: bb2.x + bb2.width / 4, y: bb2.y + bb2.height + 1},
        {x: bb2.x - 1, y: bb2.y + bb2.height / 4},
        {x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height * 3 / 4}],
		d = {}, dis = [];