@neta-art/cohub 8.24.0 → 9.0.0

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

@@ -1,375 +0,0 @@
-import { BOARD_FONT_STACK } from "../../protocol/dist/board-constants.js";
-import { rectsIntersect } from "../geometry.js";
-import { connectionArrowheads, createConnectionGeometryCache } from "../core/connections.js";
-import { pickBoardColor } from "../core/palette.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 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.
-*
-* 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;
-const HEAD_MIN = 11;
-const HEAD_SPREAD = Math.PI / 6;
-/** Dash pattern for `dashed` connections, in world units. */
-const DASH_LENGTH = 10;
-const DASH_GAP = 7;
-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
-	};
-}
-/** 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 open = false;
-	for (let index = 1; index < path.length; index += 1) {
-		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;
-			if (remaining <= 1e-4) {
-				penDown = !penDown;
-				remaining = penDown ? DASH_LENGTH : DASH_GAP;
-				open = false;
-			}
-		}
-	}
-}
-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 layers = null;
-	const geometry = createConnectionGeometryCache();
-	const labels = /* @__PURE__ */ new Map();
-	let lastConnections = null;
-	let drawnBase = null;
-	let drawnLive = null;
-	let withinBudget = true;
-	function ensureAttached() {
-		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" })
-		};
-		if (options.zIndex !== void 0) {
-			next.base.zIndex = options.zIndex;
-			next.live.zIndex = options.zIndex;
-			next.labels.zIndex = options.zIndex;
-		}
-		options.parent.addChild(next.base, next.live, next.labels);
-		layers = next;
-		return next;
-	}
-	function releaseLabel(connectionId) {
-		const entry = labels.get(connectionId);
-		if (!entry) return;
-		layers?.labels.removeChild(entry.text);
-		entry.text.destroy();
-		labels.delete(connectionId);
-	}
-	function syncLabel({ connection, resolved }, input, host) {
-		const value = connection.label.trim();
-		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);
-			const text = new Text({
-				text: value,
-				style: {
-					fill: color,
-					fontFamily: BOARD_FONT_STACK,
-					fontSize: LABEL_FONT_SIZE,
-					fontWeight: "500"
-				},
-				resolution,
-				roundPixels: true
-			});
-			text.anchor.set(.5);
-			host.addChild(text);
-			entry = {
-				text,
-				resolution,
-				sig: ""
-			};
-			labels.set(connection.id, entry);
-		}
-		syncTextResolution(entry.text, entry, input.zoom);
-		const sig = `${value}|${color}`;
-		if (sig !== entry.sig) {
-			entry.sig = sig;
-			entry.text.text = value;
-			entry.text.style.fill = color;
-		}
-		entry.text.position.set(resolved.mid.x, resolved.mid.y);
-		return true;
-	}
-	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();
-		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 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 (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) => geometry.peek(connectionId)?.resolved ?? null,
-		get children() {
-			return layers ? [
-				layers.base,
-				layers.live,
-				layers.labels
-			] : [];
-		},
-		destroy: () => {
-			for (const entry of labels.values()) entry.text.destroy();
-			labels.clear();
-			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();
-		}
-	};
-}
-/** Frame lookup over a plain item list, for hosts without an index. */
-function framesFromItems(items) {
-	const frames = new Map(items.map((item) => [item.id, item.frame]));
-	return (id) => frames.get(id);
-}
-//#endregion
-export { createConnectionLayer, framesFromItems };

package/dist/board/render/renderers/geo-card-renderer.d.ts

@@ -1,5 +0,0 @@
-import { BoardCardRenderer } from "./board-renderer-registry.js";
-//#region src/board/render/renderers/geo-card-renderer.d.ts
-declare const geoCardRenderer: BoardCardRenderer;
-//#endregion
-export { geoCardRenderer };

package/dist/board/render/renderers/geo-card-renderer.js

@@ -1,127 +0,0 @@
-import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { pickBoardColor } from "../../core/palette.js";
-import { syncTextResolution, syncTextWrapWidth, textResolutionForZoom } from "../text-resolution.js";
-import { positionShell } from "./base-card-renderer.js";
-import { drawFarPlate } from "./far-plate.js";
-import { Container, Graphics, Text } from "pixi.js";
-//#region src/board/render/renderers/geo-card-renderer.ts
-const RADIUS = 8;
-const partsByContainer = /* @__PURE__ */ new WeakMap();
-function traceOutline(graphics, geo, width, height) {
-	switch (geo) {
-		case "ellipse":
-			graphics.ellipse(width / 2, height / 2, width / 2, height / 2);
-			return;
-		case "diamond":
-			graphics.moveTo(width / 2, 0).lineTo(width, height / 2).lineTo(width / 2, height).lineTo(0, height / 2).closePath();
-			return;
-		case "triangle":
-			graphics.moveTo(width / 2, 0).lineTo(width, height).lineTo(0, height).closePath();
-			return;
-		case "rounded":
-			graphics.roundRect(0, 0, width, height, RADIUS);
-			return;
-		default: graphics.rect(0, 0, width, height);
-	}
-}
-function sync(container, item, context) {
-	const parts = partsByContainer.get(container);
-	if (!parts) return;
-	positionShell(parts.root, item);
-	const { width, height } = item.frame;
-	const selected = context.selectedIds.has(item.id);
-	const hovered = context.hoveredId === item.id;
-	const color = pickBoardColor(context.colors, item.color, context.colorScheme);
-	syncTextResolution(parts.label, parts, context.zoom);
-	const resizing = context.resizingIds.has(item.id);
-	const visualSig = [
-		width,
-		height,
-		selected,
-		hovered,
-		item.geo,
-		item.fillOpacity,
-		color.fill,
-		color.stroke,
-		context.palette.muted
-	].join("|");
-	if (visualSig !== parts.visualSig) {
-		parts.visualSig = visualSig;
-		parts.shape.clear();
-		traceOutline(parts.shape, item.geo, width, height);
-		if (item.fillOpacity > 0) parts.shape.fill({
-			color: color.fill,
-			alpha: item.fillOpacity
-		});
-		traceOutline(parts.shape, item.geo, width, height);
-		parts.shape.stroke({
-			color: selected ? color.stroke : hovered ? context.palette.muted : color.stroke,
-			width: selected ? 2.5 : 1.75,
-			alpha: selected ? 1 : hovered ? .95 : .85
-		});
-	}
-	const textSig = [item.text, color.label].join("|");
-	if (textSig !== parts.textSig) {
-		parts.textSig = textSig;
-		parts.label.text = item.text;
-		parts.label.visible = item.text.length > 0;
-		parts.label.style.fill = color.label;
-	}
-	syncTextWrapWidth(parts.label, parts, Math.max(1, width - 16), resizing);
-	parts.label.position.set(width / 2, height / 2);
-}
-const geoCardRenderer = {
-	id: "geo-card",
-	canRender: (item) => item.type === "geo",
-	create: (item, context) => {
-		const root = new Container();
-		const shape = new Graphics();
-		const resolution = textResolutionForZoom(context.zoom);
-		const label = new Text({
-			text: "",
-			style: {
-				fill: 16777215,
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: 14,
-				fontWeight: "500",
-				align: "center",
-				wordWrap: true,
-				lineHeight: 20
-			},
-			resolution,
-			roundPixels: true
-		});
-		label.anchor.set(.5);
-		root.addChild(shape, label);
-		partsByContainer.set(root, {
-			root,
-			shape,
-			label,
-			visualSig: "",
-			textSig: "",
-			wrapWidth: 0,
-			resolution
-		});
-		if (item.type === "geo") sync(root, item, context);
-		return root;
-	},
-	update: (container, item, context) => {
-		if (item.type === "geo") sync(container, item, context);
-	},
-	renderFar: (graphics, item, context) => {
-		if (item.type !== "geo") return;
-		const color = pickBoardColor(context.colors, item.color, context.colorScheme);
-		drawFarPlate(graphics, item.frame, {
-			fill: color.fill,
-			fillAlpha: Math.max(.18, item.fillOpacity),
-			accent: color.stroke,
-			accentAlpha: .9
-		});
-	},
-	destroy: (container) => {
-		partsByContainer.get(container)?.root.destroy({ children: true });
-		partsByContainer.delete(container);
-	}
-};
-//#endregion
-export { geoCardRenderer };

package/dist/board/semantic-document.d.ts

@@ -1,37 +0,0 @@
-import { BoardAuthoringItem, BoardAuthoringSnapshot } from "../protocol/dist/board-authoring.js";
-import { BoardMutationReceipt } from "../protocol/dist/board.js";
-import { BoardDocument, BoardItem } from "../protocol/dist/board-document.js";
-import "../protocol/dist/index.js";
-//#region src/board/semantic-document.d.ts
-declare const DEFAULT_BOARD_APPEARANCE: {
-  theme?: string | undefined;
-  motion?: {
-    enter?: {
-      kind: string;
-      kindVersion: number;
-      params: Record<string, unknown>;
-    } | undefined;
-  } | undefined;
-  mood?: "arcane" | "clean" | "cyber" | "natural" | "playful" | undefined;
-  background: {
-    kind: "custom" | "dots" | "grid" | "image" | "shader" | "solid";
-    color?: string | undefined;
-    imageUrl?: string | undefined;
-    fit?: "contain" | "cover" | "repeat" | undefined;
-    position?: "bottom" | "center" | "left" | "right" | "top" | undefined;
-    opacity?: number | undefined;
-  };
-  grid: {
-    visible: boolean;
-    size: number;
-    opacity: number;
-  };
-};
-/** Convert a public authoring Item to the renderer/editor document shape. */
-declare function boardAuthoringItemToDocumentItem(item: BoardAuthoringItem): BoardItem;
-/** Convert the renderer/editor item back to the public authoring envelope. */
-declare function boardItemToAuthoringItem(item: BoardItem): BoardAuthoringItem | null;
-declare function boardAuthoringSnapshotToDocument(input: BoardAuthoringSnapshot): BoardDocument;
-declare function applyBoardAuthoringSnapshot(document: BoardDocument, input: BoardAuthoringSnapshot, changed: BoardMutationReceipt["changed"]): BoardDocument;
-//#endregion
-export { DEFAULT_BOARD_APPEARANCE, applyBoardAuthoringSnapshot, boardAuthoringItemToDocumentItem, boardAuthoringSnapshotToDocument, boardItemToAuthoringItem };