feat: add tagged red thread connections

src/boardDomain.ts

@@ -1,5 +1,20 @@
 import type { CaseState, Evidence, TimelineRange, Viewport, WidgetRelation } from './types'
 
+export interface BoardPoint { x: number; y: number }
+
+export function threadCurve(from: BoardPoint, to: BoardPoint, tightness = 65) {
+  const tautness = Math.max(0, Math.min(100, Number(tightness) || 0)) / 100
+  const distance = Math.hypot(to.x - from.x, to.y - from.y)
+  const sag = (1 - tautness) * Math.min(190, Math.max(45, distance * .28))
+  const c1 = { x: from.x + (to.x - from.x) / 3, y: from.y + (to.y - from.y) / 3 + sag }
+  const c2 = { x: from.x + (to.x - from.x) * 2 / 3, y: from.y + (to.y - from.y) * 2 / 3 + sag }
+  const midpoint = {
+    x: (from.x + 3 * c1.x + 3 * c2.x + to.x) / 8,
+    y: (from.y + 3 * c1.y + 3 * c2.y + to.y) / 8,
+  }
+  return { path: `M ${from.x} ${from.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${to.x} ${to.y}`, midpoint }
+}
+
 export const MIN_BOARD_ZOOM = 0.45
 export const MAX_BOARD_ZOOM = 1.5