Flows are invisible on creation, if created left or up

[filipesmedeiros]

Hey!

If a person creates a flow, but initially moves it up or left, the flow will be invisible and jittery. I haven't been able to fix this issue after trying for a few hours, but I do have some pointers for you, @bpowers :)

First, here is a video of the problem:

Screen.Recording.2025-08-26.at.11.41.46.mov

Second, here are the problematic lines I have found.

Inside this loop:

simlin/src/diagram/drawing/Flow.tsx

Lines 508 to 531 in 526b3b9

	for (let j = 0; j < pts.size; j++) {
	let x = defined(pts.get(j)).x;
	let y = defined(pts.get(j)).y;
	if (j === pts.size - 1) {
	const dx = x - defined(pts.get(j - 1)).x;
	const dy = y - defined(pts.get(j - 1)).y;
	let θ = (atan2(dy, dx) * 180) / PI;
	if (θ < 0) {
	θ += 360;
	}
	if (θ >= 315 || θ < 45) {
	x -= finalAdjust;
	arrowθ = 0;
	} else if (θ >= 45 && θ < 135) {
	y -= finalAdjust;
	arrowθ = 90;
	} else if (θ >= 135 && θ < 225) {
	x += finalAdjust;
	arrowθ = 180;
	} else {
	y += finalAdjust;
	arrowθ = 270;
	}
	}

The value of θ is always 0 or 90, which leads me to believe it is never 270 or 180 (left and up).

This seems to be because the points returned in

simlin/src/diagram/drawing/Flow.tsx

Line 482 in 526b3b9

let pts = this.props.element.points;

are always greater than or equal to the original drag. In other words, if you start a flow at point (10, 10), even if you drag left, the second point will be (10, 10).

Most notably, this only happens on creation. After you have dragged it to "down or right" and the flow appears, dragging it back to "left or up" works as intended, as shown in the video.

I don't know why this is the case, but hopefully my contribution will be enough to fix the problem :)