@neta-art/cohub 8.21.1 → 8.22.0

package/dist/board/render/connection-layer.js

@@ -1,22 +1,27 @@
 import { BOARD_FONT_STACK } from "../../protocol/dist/board-constants.js";
-import { connectionArrowheads, resolveConnection } from "../core/connections.js";
+import { rectsIntersect } from "../geometry.js";
+import { connectionArrowheads, createConnectionGeometryCache } from "../core/connections.js";
 import { pickBoardColor } from "../core/palette.js";
-import { syncTextResolution, textResolutionForZoom } from "./text-resolution.js";
+import { syncTextResolution, textResolutionForZoom, textZoomBucket } from "./text-resolution.js";
 import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/connection-layer.ts
 /**
 * Connection drawing.
 *
-* Connections render into one shared layer beneath the cards rather than as a
+* Connections render into shared layers beneath the cards rather than as a
 * container per relation. A connection is a thin stroke with no texture and no
 * interactive chrome of its own, so a per-connection container would add a
 * transform, a render group and a draw call each for geometry that batches
 * perfectly — on a densely connected board that is the difference between a few
 * draw calls and a few thousand.
 *
-* Labels are the exception: text needs its own object to rasterise, so a `Text`
-* is materialised only for connections that actually carry one and is pooled by
-* connection id.
+* Tessellation is the real cost, so both layers are cached: `base` holds idle
+* relations, `live` those touching manipulated, selected or hovered nodes.
+* Details too small to read degrade to plain strokes; the document never changes.
+*
+* Labels are the exception to batching: text needs its own object to rasterise,
+* so a `Text` is materialised only for visible connections that carry one and is
+* pooled by connection id.
 */
 /** Arrowhead length relative to stroke width, and its floor in world units. */
 const HEAD_SCALE = 5.5;
@@ -25,85 +30,203 @@ const HEAD_SPREAD = Math.PI / 6;
 /** Dash pattern for `dashed` connections, in world units. */
 const DASH_LENGTH = 10;
 const DASH_GAP = 7;
-/** Draw an open chevron arrowhead aimed along `angle`. */
-function drawArrowhead(graphics, tip, angle, size, color, width, alpha) {
-	graphics.moveTo(tip.x - size * Math.cos(angle - HEAD_SPREAD), tip.y - size * Math.sin(angle - HEAD_SPREAD)).lineTo(tip.x, tip.y).lineTo(tip.x - size * Math.cos(angle + HEAD_SPREAD), tip.y - size * Math.sin(angle + HEAD_SPREAD)).stroke({
-		color,
-		width,
-		alpha,
-		cap: "round",
-		join: "round"
-	});
+const LABEL_FONT_SIZE = 12;
+/** Minimum on-screen sizes before a detail is drawn. */
+const MIN_DASH_PX = 4;
+const MIN_HEAD_PX = 3;
+const MIN_LABEL_PX = 5;
+const MIN_SEGMENT_PX = 2;
+const MIN_ROUND_PX = 2;
+/** Dashes per frame; past it all dashed relations draw solid (with hysteresis). */
+const DASH_BUDGET = 4e4;
+const DASH_RESUME_RATIO = .8;
+function detailForZoom(zoom) {
+	const bucket = 2 ** (Math.floor(Math.log2(Math.max(zoom, 1e-4)) * 2) / 2);
+	return {
+		zoom: bucket,
+		dashes: DASH_LENGTH * bucket >= MIN_DASH_PX,
+		labels: LABEL_FONT_SIZE * bucket >= MIN_LABEL_PX,
+		minWidth: 1 / bucket,
+		minStep: MIN_SEGMENT_PX / bucket
+	};
 }
-/** Trace a polyline as a dashed path, walking segment by segment. */
-function traceDashed(graphics, path) {
+/** Visit each dash piece inside `clip`; `start` marks the first piece of a dash. */
+function walkDashes(path, clip, visit) {
 	let penDown = true;
 	let remaining = DASH_LENGTH;
-	let current = path[0];
-	if (!current) return;
-	graphics.moveTo(current.x, current.y);
+	let open = false;
 	for (let index = 1; index < path.length; index += 1) {
-		const next = path[index];
-		if (!next) continue;
-		let segmentRemaining = Math.hypot(next.x - current.x, next.y - current.y);
-		let from = current;
-		while (segmentRemaining > 1e-4) {
-			const step = Math.min(segmentRemaining, remaining);
-			const ratio = step / segmentRemaining;
-			const to = {
-				x: from.x + (next.x - from.x) * ratio,
-				y: from.y + (next.y - from.y) * ratio
-			};
-			if (penDown) graphics.lineTo(to.x, to.y);
-			else graphics.moveTo(to.x, to.y);
+		const a = path[index - 1];
+		const b = path[index];
+		if (!a || !b) continue;
+		const dx = b.x - a.x;
+		const dy = b.y - a.y;
+		const length = Math.hypot(dx, dy);
+		let travelled = 0;
+		while (length - travelled > 1e-4) {
+			const step = Math.min(length - travelled, remaining);
+			if (penDown) {
+				const t0 = travelled / length;
+				const t1 = (travelled + step) / length;
+				const x0 = a.x + dx * t0;
+				const y0 = a.y + dy * t0;
+				const x1 = a.x + dx * t1;
+				const y1 = a.y + dy * t1;
+				if (!clip || Math.max(x0, x1) >= clip.x && Math.min(x0, x1) <= clip.x + clip.width && Math.max(y0, y1) >= clip.y && Math.min(y0, y1) <= clip.y + clip.height) {
+					visit(x0, y0, x1, y1, !open);
+					open = true;
+				} else open = false;
+			}
+			travelled += step;
 			remaining -= step;
-			segmentRemaining -= step;
-			from = to;
 			if (remaining <= 1e-4) {
 				penDown = !penDown;
 				remaining = penDown ? DASH_LENGTH : DASH_GAP;
+				open = false;
 			}
 		}
-		current = next;
 	}
 }
+function countDashes(entries, clip) {
+	let count = 0;
+	for (const { connection, resolved } of entries) {
+		if (connection.style.line !== "dashed") continue;
+		walkDashes(resolved.path, clip, (_x0, _y0, _x1, _y1, start) => {
+			if (start) count += 1;
+		});
+		if (count > DASH_BUDGET) break;
+	}
+	return count;
+}
+function traceSolid(graphics, path, minStep) {
+	const first = path[0];
+	const last = path[path.length - 1];
+	if (!first || !last) return;
+	graphics.moveTo(first.x, first.y);
+	let previous = first;
+	for (let index = 1; index < path.length - 1; index += 1) {
+		const point = path[index];
+		if (!point) continue;
+		if (Math.abs(point.x - previous.x) + Math.abs(point.y - previous.y) < minStep) continue;
+		graphics.lineTo(point.x, point.y);
+		previous = point;
+	}
+	graphics.lineTo(last.x, last.y);
+}
+/** Trace an open chevron arrowhead aimed along `angle`. */
+function traceArrowhead(graphics, tip, angle, size) {
+	graphics.moveTo(tip.x - size * Math.cos(angle - HEAD_SPREAD), tip.y - size * Math.sin(angle - HEAD_SPREAD)).lineTo(tip.x, tip.y).lineTo(tip.x - size * Math.cos(angle + HEAD_SPREAD), tip.y - size * Math.sin(angle + HEAD_SPREAD));
+}
+/** Stroke each style once instead of once per relation. */
+function createStrokeBatch(graphics) {
+	const groups = /* @__PURE__ */ new Map();
+	return {
+		add(style, trace) {
+			const key = `${style.color}|${style.width}|${style.alpha}|${style.cap}|${style.join}`;
+			const group = groups.get(key);
+			if (group) group.traces.push(trace);
+			else groups.set(key, {
+				style,
+				traces: [trace]
+			});
+		},
+		flush() {
+			for (const { style, traces } of groups.values()) {
+				for (const trace of traces) trace();
+				graphics.stroke(style);
+			}
+			groups.clear();
+		}
+	};
+}
+function drawConnections(graphics, entries, states, input, detail, clip, dashes) {
+	const batch = createStrokeBatch(graphics);
+	entries.forEach(({ connection, resolved }, index) => {
+		const state = states[index] ?? "idle";
+		const color = pickBoardColor(input.colors, connection.style.color, input.colorScheme);
+		const width = Math.max(connection.style.size + (state === "selected" ? 1 : 0), detail.minWidth);
+		const round = width * detail.zoom >= MIN_ROUND_PX;
+		const alpha = state === "idle" ? .9 : 1;
+		const path = resolved.path;
+		const dashed = dashes && connection.style.line === "dashed";
+		batch.add({
+			color: color.stroke,
+			width,
+			alpha,
+			cap: dashed || !round ? "butt" : "round",
+			join: round ? "round" : "miter"
+		}, dashed ? () => walkDashes(path, clip, (x0, y0, x1, y1, start) => {
+			if (start) graphics.moveTo(x0, y0);
+			graphics.lineTo(x1, y1);
+		}) : () => traceSolid(graphics, path, detail.minStep));
+		const headSize = Math.max(HEAD_MIN, connection.style.size * HEAD_SCALE);
+		if (headSize * detail.zoom < MIN_HEAD_PX) return;
+		const heads = connectionArrowheads(connection);
+		const headStyle = {
+			color: color.stroke,
+			width,
+			alpha,
+			cap: round ? "round" : "butt",
+			join: round ? "round" : "miter"
+		};
+		const tip = path[path.length - 1];
+		const beforeTip = path[path.length - 2];
+		if (heads.atTarget && tip && beforeTip) {
+			const angle = Math.atan2(tip.y - beforeTip.y, tip.x - beforeTip.x);
+			batch.add(headStyle, () => traceArrowhead(graphics, tip, angle, headSize));
+		}
+		const origin = path[0];
+		const afterOrigin = path[1];
+		if (heads.atSource && origin && afterOrigin) {
+			const angle = Math.atan2(origin.y - afterOrigin.y, origin.x - afterOrigin.x);
+			batch.add(headStyle, () => traceArrowhead(graphics, origin, angle, headSize));
+		}
+	});
+	batch.flush();
+}
+function isCurrent(drawn, entries, states, view, colors) {
+	return drawn !== null && drawn.view === view && drawn.colors === colors && sameItems(drawn.entries, entries) && sameItems(drawn.states, states);
+}
+function sameItems(a, b) {
+	if (a.length !== b.length) return false;
+	for (let index = 0; index < a.length; index += 1) if (a[index] !== b[index]) return false;
+	return true;
+}
 function createConnectionLayer(options) {
-	let graphics = null;
-	let labelLayer = null;
+	let layers = null;
+	const geometry = createConnectionGeometryCache();
 	const labels = /* @__PURE__ */ new Map();
-	let resolvedById = /* @__PURE__ */ new Map();
+	let lastConnections = null;
+	let drawnBase = null;
+	let drawnLive = null;
+	let withinBudget = true;
 	function ensureAttached() {
-		if (graphics && labelLayer) return {
-			graphics,
-			labelLayer
+		if (layers) return layers;
+		const next = {
+			base: new Graphics({ label: "board-connections" }),
+			live: new Graphics({ label: "board-connections-live" }),
+			labels: new Container({ label: "board-connection-labels" })
 		};
-		const nextGraphics = new Graphics({ label: "board-connections" });
-		const nextLabels = new Container({ label: "board-connection-labels" });
 		if (options.zIndex !== void 0) {
-			nextGraphics.zIndex = options.zIndex;
-			nextLabels.zIndex = options.zIndex;
+			next.base.zIndex = options.zIndex;
+			next.live.zIndex = options.zIndex;
+			next.labels.zIndex = options.zIndex;
 		}
-		options.parent.addChild(nextGraphics, nextLabels);
-		graphics = nextGraphics;
-		labelLayer = nextLabels;
-		return {
-			graphics: nextGraphics,
-			labelLayer: nextLabels
-		};
+		options.parent.addChild(next.base, next.live, next.labels);
+		layers = next;
+		return next;
 	}
 	function releaseLabel(connectionId) {
 		const entry = labels.get(connectionId);
 		if (!entry) return;
-		labelLayer?.removeChild(entry.text);
+		layers?.labels.removeChild(entry.text);
 		entry.text.destroy();
 		labels.delete(connectionId);
 	}
-	function syncLabel(connection, resolved, input, color, host) {
+	function syncLabel({ connection, resolved }, input, host) {
 		const value = connection.label.trim();
-		if (!value) {
-			releaseLabel(connection.id);
-			return;
-		}
+		if (!value) return false;
+		const color = pickBoardColor(input.colors, connection.style.color, input.colorScheme).label;
 		let entry = labels.get(connection.id);
 		if (!entry) {
 			const resolution = textResolutionForZoom(input.zoom);
@@ -112,7 +235,7 @@ function createConnectionLayer(options) {
 				style: {
 					fill: color,
 					fontFamily: BOARD_FONT_STACK,
-					fontSize: 12,
+					fontSize: LABEL_FONT_SIZE,
 					fontWeight: "500"
 				},
 				resolution,
@@ -135,82 +258,111 @@ function createConnectionLayer(options) {
 			entry.text.style.fill = color;
 		}
 		entry.text.position.set(resolved.mid.x, resolved.mid.y);
+		return true;
 	}
-	function sync(input) {
-		if (input.connections.length === 0 && !graphics) {
-			resolvedById = /* @__PURE__ */ new Map();
-			return;
+	function drawLayer(graphics, layer, input, detail, clip) {
+		graphics.clear();
+		drawConnections(graphics, layer.entries, layer.states, input, detail, clip, layer.dashes);
+		const labelIds = /* @__PURE__ */ new Set();
+		if (detail.labels && layers) {
+			for (const entry of layer.entries) if (syncLabel(entry, input, layers.labels)) labelIds.add(entry.connection.id);
 		}
+		return {
+			...layer,
+			labelIds
+		};
+	}
+	function sync(input) {
+		if (input.connections.length === 0 && !layers) return;
 		const host = ensureAttached();
-		host.graphics.clear();
-		const next = /* @__PURE__ */ new Map();
-		const selected = input.selectedIds ?? /* @__PURE__ */ new Set();
-		const skip = input.skipIds;
-		const minWidth = 1 / Math.max(input.zoom, 1e-4);
+		if (input.connections !== lastConnections) {
+			geometry.retain(input.connections);
+			lastConnections = input.connections;
+		}
+		const detail = detailForZoom(input.zoom);
+		const cull = input.cullRect ?? null;
+		const clip = detail.dashes ? cull : null;
+		const selected = input.selectedIds;
+		const liveNodes = input.liveNodeIds;
+		const baseEntries = [];
+		const baseStates = [];
+		const liveEntries = [];
+		const liveStates = [];
+		let hovered = null;
 		for (const connection of input.connections) {
-			const resolved = resolveConnection(connection, input.getFrame);
-			if (!resolved) continue;
-			next.set(connection.id, resolved);
-			if (skip?.has(connection.id)) {
-				releaseLabel(connection.id);
-				continue;
-			}
-			const isSelected = selected.has(connection.id);
-			const isHovered = input.hoveredId === connection.id;
-			const color = pickBoardColor(input.colors, connection.style.color, input.colorScheme);
-			const width = Math.max(connection.style.size + (isSelected ? 1 : 0), minWidth);
-			const alpha = isSelected || isHovered ? 1 : .9;
-			if (connection.style.line === "dashed") traceDashed(host.graphics, resolved.path);
-			else {
-				const first = resolved.path[0];
-				if (!first) continue;
-				host.graphics.moveTo(first.x, first.y);
-				for (let index = 1; index < resolved.path.length; index += 1) {
-					const point = resolved.path[index];
-					if (point) host.graphics.lineTo(point.x, point.y);
-				}
-			}
-			host.graphics.stroke({
-				color: color.stroke,
-				width,
-				alpha,
-				cap: "round",
-				join: "round"
-			});
-			const heads = connectionArrowheads(connection);
-			const headSize = Math.max(HEAD_MIN, connection.style.size * HEAD_SCALE);
-			if (heads.atTarget) {
-				const tip = resolved.path[resolved.path.length - 1];
-				const previous = resolved.path[resolved.path.length - 2];
-				if (tip && previous) drawArrowhead(host.graphics, tip, Math.atan2(tip.y - previous.y, tip.x - previous.x), headSize, color.stroke, width, alpha);
+			const entry = geometry.get(connection, input.getFrame);
+			if (!entry || input.skipIds?.has(connection.id)) continue;
+			if (cull && !rectsIntersect(entry.bounds, cull)) continue;
+			if (selected?.has(connection.id)) {
+				liveEntries.push(entry);
+				liveStates.push("selected");
+			} else if (liveNodes?.has(connection.source.itemId) || liveNodes?.has(connection.target.itemId)) {
+				liveEntries.push(entry);
+				liveStates.push(connection.id === input.hoveredId ? "hovered" : "idle");
+			} else {
+				baseEntries.push(entry);
+				baseStates.push("idle");
+				if (connection.id === input.hoveredId) hovered = entry;
 			}
-			if (heads.atSource) {
-				const tip = resolved.path[0];
-				const next2 = resolved.path[1];
-				if (tip && next2) drawArrowhead(host.graphics, tip, Math.atan2(tip.y - next2.y, tip.x - next2.x), headSize, color.stroke, width, alpha);
-			}
-			syncLabel(connection, resolved, input, color.label, host.labelLayer);
 		}
-		for (const connectionId of [...labels.keys()]) if (!next.has(connectionId)) releaseLabel(connectionId);
-		resolvedById = next;
+		if (hovered) {
+			liveEntries.push(hovered);
+			liveStates.push("hovered");
+		}
+		const view = `${detail.zoom}|${textZoomBucket(input.zoom)}|${input.colorScheme}|${clip ? `${clip.x},${clip.y},${clip.width},${clip.height}` : ""}`;
+		const baseCurrent = isCurrent(drawnBase, baseEntries, baseStates, view, input.colors);
+		const liveCurrent = isCurrent(drawnLive, liveEntries, liveStates, view, input.colors);
+		const countFor = (current, drawn, entries) => !detail.dashes ? 0 : current && drawn ? drawn.dashCount : countDashes(entries, clip);
+		const baseDashes = countFor(baseCurrent, drawnBase, baseEntries);
+		const liveDashes = countFor(liveCurrent, drawnLive, hovered ? liveEntries.slice(0, -1) : liveEntries);
+		const total = baseDashes + liveDashes;
+		withinBudget = withinBudget ? total <= DASH_BUDGET : total <= DASH_BUDGET * DASH_RESUME_RATIO;
+		const dashes = detail.dashes && withinBudget;
+		const redraw = (graphics, entries, states, dashCount) => drawLayer(graphics, {
+			entries,
+			states,
+			view,
+			colors: input.colors,
+			dashCount,
+			dashes
+		}, input, detail, clip);
+		let labelsChanged = false;
+		if (!baseCurrent || drawnBase?.dashes !== dashes) {
+			drawnBase = redraw(host.base, baseEntries, baseStates, baseDashes);
+			labelsChanged = true;
+		}
+		if (!liveCurrent || drawnLive?.dashes !== dashes) {
+			drawnLive = redraw(host.live, liveEntries, liveStates, liveDashes);
+			labelsChanged = true;
+		}
+		if (!labelsChanged) return;
+		const wanted = /* @__PURE__ */ new Set([...drawnBase?.labelIds ?? [], ...drawnLive?.labelIds ?? []]);
+		for (const connectionId of [...labels.keys()]) if (!wanted.has(connectionId)) releaseLabel(connectionId);
 	}
 	return {
 		sync,
-		resolved: (connectionId) => resolvedById.get(connectionId) ?? null,
+		resolved: (connectionId) => geometry.peek(connectionId)?.resolved ?? null,
 		get children() {
-			const list = [];
-			if (graphics) list.push(graphics);
-			if (labelLayer) list.push(labelLayer);
-			return list;
+			return layers ? [
+				layers.base,
+				layers.live,
+				layers.labels
+			] : [];
 		},
 		destroy: () => {
 			for (const entry of labels.values()) entry.text.destroy();
 			labels.clear();
-			graphics?.destroy();
-			labelLayer?.destroy({ children: true });
-			graphics = null;
-			labelLayer = null;
-			resolvedById = /* @__PURE__ */ new Map();
+			if (layers) {
+				layers.base.destroy();
+				layers.live.destroy();
+				layers.labels.destroy({ children: true });
+			}
+			layers = null;
+			drawnBase = null;
+			drawnLive = null;
+			withinBudget = true;
+			lastConnections = null;
+			geometry.clear();
 		}
 	};
 }