@dineug/erd-editor 4.2.0 → 5.0.1

package/dist/components/visualization/VisualizationScene.js

@@ -0,0 +1,56 @@
+import { repeat } from "../../r-html/dist/render/directives/node/repeat.js";
+import { DIM_OPACITY } from "../../konva/scene/viewLayout.js";
+import { useAppContext } from "../appContext.js";
+import { konva, renderKonva } from "../../r-html-konva/dist/host.js";
+import { useI18n } from "../localeContext.js";
+import { useThemeContext } from "../themeContext.js";
+import { TextFontFamily } from "../../styles/fonts.styles.js";
+import { Group, linkEnds } from "./createVisualization.js";
+import { hasName, highlightOf, labelOf, labelOpacity } from "./visualizationView.js";
+import { captureGraphPan } from "./graphPan.js";
+import GraphNode from "./graph-node/GraphNode.js";
+//#region src/components/visualization/VisualizationScene.tsx
+var LABEL_FONT_SIZE = 12;
+var LABEL_WIDTH = 220;
+var LABEL_GAP = 3;
+var LINK_STROKE_WIDTH = Math.sqrt(2);
+var LINK_OPACITY = .6;
+var DIMMED_LINK_OPACITY = LINK_OPACITY * DIM_OPACITY;
+var VisualizationScene = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const i18n = useI18n(ctx);
+	const handlePanStart = (event) => {
+		captureGraphPan(event, props.state);
+	};
+	return () => {
+		const { graph, state } = props;
+		const { store } = app.value;
+		const { viewport } = store.state.editor;
+		const settings = { nameViewMode: store.state.settings.nameViewMode };
+		const theme = themeRef.value;
+		const { x, y, scale, hoveredTableId } = state;
+		const opacity = labelOpacity(scale);
+		const tables = graph.nodes.filter((node) => node.group === Group.table);
+		const placeholder = tables.every((node) => hasName(node, settings)) ? "" : i18n.value.t("common.placeholder.table");
+		const highlight = hoveredTableId ? highlightOf(graph.links, hoveredTableId) : null;
+		const dimmed = (id) => highlight !== null && !highlight.nodeIds.has(id);
+		const unlitLinkOpacity = highlight ? DIMMED_LINK_OPACITY : LINK_OPACITY;
+		state.tick;
+		return konva`<k-layer name="visualization-background"><k-rect name="visualization-pan" x=${0} y=${0} width=${viewport.width} height=${viewport.height} fill=${theme.canvasBackground} @mousedown=${handlePanStart} @touchstart=${handlePanStart} /></k-layer><k-layer name="visualization-scene" x=${x} y=${y} scaleX=${scale} scaleY=${scale}><k-group name="visualization-links" listening=${false}>${repeat(graph.links, (link) => link.id, (link) => {
+			const [source, target] = linkEnds(link);
+			const lit = highlight?.linkIds.has(link.id) === true;
+			return konva`<k-line name="visualization-link" points=${[
+				source.x,
+				source.y,
+				target.x,
+				target.y
+			]} stroke=${lit ? theme.relationshipHover : theme.visualizationLink} strokeWidth=${LINK_STROKE_WIDTH} opacity=${lit ? 1 : unlitLinkOpacity} listening=${false} />`;
+		})}</k-group><k-group name="visualization-nodes">${repeat(graph.nodes, (node) => node.id, (node) => konva`<${GraphNode} .node=${node} .x=${node.x} .y=${node.y} .dimmed=${dimmed(node.id)} .graph=${graph} .state=${state} />`)}</k-group><k-group name="visualization-labels" listening=${false} opacity=${opacity} visible=${opacity > 0}>${repeat(tables, (node) => node.id, (node) => konva`<k-text name="visualization-label" x=${node.x - LABEL_WIDTH / 2} y=${node.y + 8 + LABEL_GAP} width=${LABEL_WIDTH} text=${labelOf(node, placeholder, settings)} fill=${hasName(node, settings) ? theme.foreground : theme.placeholder} fontFamily=${TextFontFamily} fontSize=${LABEL_FONT_SIZE} fontStyle="bold" align="center" wrap="none" opacity=${dimmed(node.id) ? DIM_OPACITY : 1} listening=${false} />`)}</k-group></k-layer>`;
+	};
+};
+function renderVisualizationScene(stage, props) {
+	renderKonva(stage, konva`<${VisualizationScene} .graph=${props.graph} .state=${props.state} />`);
+}
+//#endregion
+export { VisualizationScene as default, renderVisualizationScene };

package/dist/components/visualization/captureDrag.js

@@ -0,0 +1,15 @@
+import { drag$ } from "../../utils/globalEventObservable.js";
+//#region src/components/visualization/captureDrag.ts
+function captureDrag(event, { next, complete }) {
+	const { target, pointerId } = event;
+	target.setPointerCapture(pointerId);
+	return drag$.subscribe({
+		next,
+		complete: () => {
+			target.hasPointerCapture(pointerId) && target.releaseCapture(pointerId);
+			complete();
+		}
+	});
+}
+//#endregion
+export { captureDrag };

package/dist/components/visualization/createVisualization.js

@@ -0,0 +1,77 @@
+import { query } from "../../erd-editor-schema/dist/query/index.js";
+import { forceLink, forceManyBody, forceSimulation, forceX, forceY } from "d3-force";
+//#region src/components/visualization/createVisualization.ts
+var Group = {
+	table: "table",
+	column: "column"
+};
+var LinkKind = {
+	column: "column",
+	relationship: "relationship"
+};
+var LINK_DISTANCE = {
+	[LinkKind.column]: 36,
+	[LinkKind.relationship]: 140
+};
+var CHARGE_STRENGTH = -60;
+var UNPLACED = NaN;
+var createNode = (id, group, { name, logicalName }, tableId) => ({
+	id,
+	group,
+	name,
+	logicalName,
+	tableId,
+	x: UNPLACED,
+	y: UNPLACED,
+	fx: null,
+	fy: null
+});
+function convertVisualization({ doc: { tableIds, relationshipIds }, collections }) {
+	const tables = query(collections).collection("tableEntities").selectByIds(tableIds);
+	const relationships = query(collections).collection("relationshipEntities").selectByIds(relationshipIds);
+	const nodes = [];
+	const links = [];
+	const linkIdSet = /* @__PURE__ */ new Set();
+	tables.forEach((table) => {
+		nodes.push(createNode(table.id, Group.table, table, null));
+		query(collections).collection("tableColumnEntities").selectByIds(table.columnIds).forEach((column) => {
+			nodes.push(createNode(column.id, Group.column, column, table.id));
+			links.push({
+				id: `${table.id}-${column.id}`,
+				kind: LinkKind.column,
+				source: table.id,
+				target: column.id
+			});
+		});
+	});
+	const tableIdSet = new Set(tables.map((table) => table.id));
+	relationships.forEach(({ start, end }) => {
+		const linkId = `${start.tableId}-${end.tableId}`;
+		if (start.tableId !== end.tableId && tableIdSet.has(start.tableId) && tableIdSet.has(end.tableId) && !linkIdSet.has(linkId)) {
+			links.push({
+				id: linkId,
+				kind: LinkKind.relationship,
+				source: start.tableId,
+				target: end.tableId
+			});
+			linkIdSet.add(linkId);
+		}
+	});
+	return {
+		nodes,
+		links
+	};
+}
+function linkEnds(link) {
+	return [link.source, link.target];
+}
+function createVisualization(state) {
+	const { nodes, links } = convertVisualization(state);
+	return {
+		nodes,
+		links,
+		simulation: forceSimulation(nodes).force("link", forceLink(links).id((node) => node.id).distance((link) => LINK_DISTANCE[link.kind])).force("charge", forceManyBody().strength(CHARGE_STRENGTH)).force("x", forceX()).force("y", forceY())
+	};
+}
+//#endregion
+export { Group, LinkKind, convertVisualization, createVisualization, linkEnds };

package/dist/components/visualization/flowLayout.js

@@ -0,0 +1,203 @@
+import { KeyBindingName } from "../../utils/keyboard-shortcut/index.js";
+import { CANVAS_ZOOM_MAX } from "../../constants/schema.js";
+import { arrayHas } from "../../utils/arrayHas.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { ActionType } from "../../engine/modules/editor/actions.js";
+import { ViewKind } from "../../engine/modules/editor/state.js";
+import { viewChangeZoomLevelAction, viewOpenAction, viewScrollToAction, viewSetLayoutAction } from "../../engine/modules/editor/view.actions.js";
+import { getReachedTableIds } from "../../konva/scene/viewLayout.js";
+import { getSceneContentRect } from "../../konva/scene/contentBounds.js";
+import { changeNameViewModeAction, hasViewport } from "../../engine/modules/settings/atom.actions.js";
+import { SharedStreamActionTypes, StreamActionTypes } from "../../engine/actions.js";
+import { openToastAction } from "../../utils/emitter.js";
+import { localized } from "../localized/Localized.js";
+import { closePromise } from "../../utils/promise.js";
+import { openStatusToast } from "../toast-container/openStatusToast.js";
+import { getScrollToCenter, getViewTransform } from "../erd/minimap/minimapGeometry.js";
+import { previewZoomLevel } from "../../konva/scene/fitZoom.js";
+import { TablePlacement } from "../../constants/tablePlacement.js";
+import { createElkLayoutRequest, toViewPoints } from "../../services/elk-layout/elkGraph.js";
+import { createElkLayout } from "../../services/elk-layout/index.js";
+import { PlacingToast } from "../erd/automatic-table-placement/elkPlacement.js";
+//#region src/components/visualization/flowLayout.tsx
+var FLOW = ViewKind.flow;
+var layouts = /* @__PURE__ */ new WeakMap();
+var asks = /* @__PURE__ */ new WeakMap();
+function layoutsOf(view) {
+	const entry = layouts.get(view) ?? {
+		full: null,
+		focused: null,
+		pending: null,
+		stood: null,
+		fit: false
+	};
+	layouts.set(view, entry);
+	return entry;
+}
+var slotOf = (view) => view.centerIds.length ? "focused" : "full";
+var framingOf = (view) => [view.centerIds.join(" "), view.showMode].join("|");
+function placedKey(state) {
+	const view = state.editor.views.flow;
+	if (!view) return "";
+	const { doc } = state;
+	return [
+		framingOf(view),
+		state.settings.nameViewMode,
+		doc.tableIds.join(" "),
+		doc.relationshipIds.join(" ")
+	].join("|");
+}
+function fitFlowView(store) {
+	const { state } = store;
+	const { viewport } = state.editor;
+	const content = getSceneContentRect(state, FLOW);
+	if (!state.editor.views.flow || !content || !hasViewport(viewport)) return;
+	const zoomLevel = previewZoomLevel(content, viewport, CANVAS_ZOOM_MAX);
+	const origin = getScrollToCenter({
+		...getViewTransform(state, FLOW),
+		zoomLevel
+	}, {
+		x: content.x + content.width / 2,
+		y: content.y + content.height / 2
+	});
+	store.dispatchSync(viewChangeZoomLevelAction({
+		value: zoomLevel,
+		kind: FLOW
+	}), viewScrollToAction({
+		originX: origin.x,
+		originY: origin.y,
+		kind: FLOW
+	}));
+}
+function standFlowView(store, view, positions, forced) {
+	const entry = layoutsOf(view);
+	const framing = framingOf(view);
+	const fits = forced || entry.fit || entry.stood !== framing;
+	entry.stood = framing;
+	entry.fit = false;
+	store.dispatchSync(viewSetLayoutAction({
+		kind: FLOW,
+		positions
+	}));
+	fits && fitFlowView(store);
+}
+function landFlowLayout(store, view, slot, key, points, forced) {
+	if (store.state.editor.views.flow !== view) return;
+	if (placedKey(store.state) !== key) return;
+	const positions = Object.fromEntries(points.map(({ id, x, y }) => [id, {
+		x,
+		y
+	}]));
+	layoutsOf(view)[slot] = {
+		positions,
+		key
+	};
+	standFlowView(store, view, positions, forced);
+}
+function flowLayoutRequest(state, view, slot) {
+	return slot === "focused" ? createElkLayoutRequest(state, TablePlacement.viewLayered, {
+		tableIds: getReachedTableIds(state, view.centerIds),
+		source: FLOW
+	}) : createElkLayoutRequest(state, TablePlacement.viewLayered, {
+		source: FLOW,
+		groupUnrelated: true
+	});
+}
+function ensureFlowPlaced(app, { force = false, fit = false } = {}) {
+	const { store } = app;
+	if (!store.state.editor.views.flow) store.dispatchSync(viewOpenAction({ kind: FLOW }));
+	const view = store.state.editor.views.flow;
+	if (!view) return Promise.resolve();
+	const entry = layoutsOf(view);
+	const slot = slotOf(view);
+	const key = placedKey(store.state);
+	if (fit) entry.fit = true;
+	if (!force && entry.pending?.key === key) return Promise.resolve();
+	asks.get(view)?.cancel();
+	const landing = force ? null : entry[slot];
+	if (landing?.key === key) {
+		standFlowView(store, view, landing.positions, false);
+		return Promise.resolve();
+	}
+	return requestFlowLayout(app, view, slot, key, force);
+}
+async function requestFlowLayout(app, view, slot, key, forced) {
+	const { store, emitter, shortcut$ } = app;
+	const request = flowLayoutRequest(store.state, view, slot);
+	if (!request.nodes.length) {
+		landFlowLayout(store, view, slot, key, [], forced);
+		return;
+	}
+	const [close, onClose] = closePromise();
+	const entry = layoutsOf(view);
+	let cancelled = false;
+	const subscription = shortcut$.subscribe(({ type }) => {
+		type === KeyBindingName.stop && cancel();
+	});
+	const ask = { cancel };
+	const pending = { key };
+	const finish = () => {
+		subscription.unsubscribe();
+		onClose();
+		asks.get(view) === ask && asks.delete(view);
+		entry.pending === pending && (entry.pending = null);
+	};
+	function cancel() {
+		cancelled = true;
+		finish();
+	}
+	asks.set(view, ask);
+	entry.pending = pending;
+	try {
+		const points = await createElkLayout(request, () => {
+			cancelled || emitter.emit(openToastAction({
+				close,
+				message: html`<${PlacingToast} .onCancel=${cancel} />`
+			}));
+		});
+		finish();
+		if (cancelled) return;
+		landFlowLayout(store, view, slot, key, toViewPoints(request, points), forced);
+	} catch (error) {
+		finish();
+		console.warn("[visualization] no flow layout came back", error);
+		if (cancelled) return;
+		openStatusToast(emitter, {
+			key: "common.toast.couldNotPlaceTables",
+			tone: "error",
+			title: localized("common.toast.couldNotPlaceTables")
+		});
+	}
+}
+var isUnplacing = arrayHas([
+	...StreamActionTypes,
+	...SharedStreamActionTypes,
+	ActionType.viewScrollTo,
+	ActionType.viewStreamScrollTo,
+	ActionType.viewChangeZoomLevel,
+	ActionType.viewStreamZoomLevel,
+	ActionType.viewMoveTable,
+	ActionType.viewSetLayout
+]);
+var isUnplacingBatch = (actions) => actions.every(({ type }) => isUnplacing(type));
+function isRefocusBatch(actions, view, key) {
+	const entry = layoutsOf(view);
+	return actions.some(({ type }) => type === ActionType.viewSetCenters) && entry[slotOf(view)]?.key !== key && entry.pending?.key !== key;
+}
+var isOwnNameViewSwitch = (actions, state) => actions.some(({ type, payload }) => type === changeNameViewModeAction.type && payload?.editorId === state.editor.id);
+function keepFlowPlaced(app) {
+	const { store } = app;
+	let key = placedKey(store.state);
+	let placed = store.state.editor.views.flow;
+	return store.subscribe((actions) => {
+		const view = store.state.editor.views.flow;
+		if (!view || isUnplacingBatch(actions)) return;
+		const next = placedKey(store.state);
+		if (next === key && view === placed && !isRefocusBatch(actions, view, next)) return;
+		key = next;
+		placed = view;
+		ensureFlowPlaced(app, { fit: isOwnNameViewSwitch(actions, store.state) });
+	});
+}
+//#endregion
+export { ensureFlowPlaced, fitFlowView, keepFlowPlaced };

package/dist/components/visualization/graph-node/GraphNode.js

@@ -0,0 +1,80 @@
+import { DIM_OPACITY } from "../../../konva/scene/viewLayout.js";
+import { konva } from "../../../r-html-konva/dist/host.js";
+import { isMainButtonPress, isMiddleButtonPress, isMultiTouch } from "../../../utils/domEvent.js";
+import { useThemeContext } from "../../themeContext.js";
+import { Group } from "../createVisualization.js";
+import { nodeRadius } from "../visualizationView.js";
+import { captureDrag } from "../captureDrag.js";
+import { captureGraphPan } from "../graphPan.js";
+//#region src/components/visualization/graph-node/GraphNode.tsx
+var DRAG_ALPHA_TARGET = .3;
+var NODE_STROKE_WIDTH = 1.5;
+var PERFECT_DRAW_ENABLED = false;
+var CURSOR_POINTER = "pointer";
+var CURSOR_INHERIT = "";
+function setCursor(event, cursor) {
+	const container = event.target.getStage()?.container();
+	if (container) container.style.cursor = cursor;
+}
+var GraphNode = (props, ctx) => {
+	const themeRef = useThemeContext(ctx);
+	const handleMouseenter = (event) => {
+		const { node, state } = props;
+		state.hoveredId = node.id;
+		state.hoveredTableId = node.group === Group.table ? node.id : null;
+		state.previewX = event.evt.clientX;
+		state.previewY = event.evt.clientY;
+		setCursor(event, CURSOR_POINTER);
+	};
+	const handleMouseleave = (event) => {
+		const { state } = props;
+		state.hoveredId = null;
+		state.hoveredTableId = null;
+		setCursor(event, CURSOR_INHERIT);
+	};
+	const handleMove = ({ event, movementX, movementY }) => {
+		event.type === "mousemove" && event.preventDefault();
+		const { node, state } = props;
+		node.fx = (node.fx ?? node.x) + movementX / state.scale;
+		node.fy = (node.fy ?? node.y) + movementY / state.scale;
+	};
+	const handleDragStart = (event) => {
+		if (isMultiTouch(event.evt)) return;
+		if (isMiddleButtonPress(event.evt)) {
+			captureGraphPan(event, props.state);
+			return;
+		}
+		if (!isMainButtonPress(event.evt)) return;
+		const { node, graph, state } = props;
+		let last = null;
+		node.fx = node.x;
+		node.fy = node.y;
+		graph.simulation.alphaTarget(DRAG_ALPHA_TARGET).restart();
+		state.drag = true;
+		captureDrag(event, {
+			next: (move) => {
+				handleMove(move);
+				last = move;
+			},
+			complete: () => {
+				node.fx = null;
+				node.fy = null;
+				graph.simulation.alphaTarget(0);
+				if (last) {
+					state.previewX = last.x;
+					state.previewY = last.y;
+				}
+				state.drag = false;
+			}
+		});
+	};
+	return () => {
+		const { node, x, y, dimmed, state } = props;
+		const theme = themeRef.value;
+		const isTable = node.group === Group.table;
+		const hovered = state.hoveredId === node.id;
+		return konva`<k-circle name=${`visualization-node ${node.id}`} kind=${`visualization-${node.group}`} tableId=${node.tableId ?? node.id} x=${x} y=${y} radius=${nodeRadius(node.group)} fill=${isTable ? theme.accentColor9 : theme.visualizationColumn} stroke=${hovered ? theme.focus : theme.canvasBackground} strokeWidth=${NODE_STROKE_WIDTH} opacity=${dimmed ? DIM_OPACITY : 1} perfectDrawEnabled=${PERFECT_DRAW_ENABLED} @mouseenter=${handleMouseenter} @mouseleave=${handleMouseleave} @mousedown=${handleDragStart} @touchstart=${handleDragStart} />`;
+	};
+};
+//#endregion
+export { GraphNode as default };

package/dist/components/visualization/graphPan.js

@@ -0,0 +1,26 @@
+import { isMiddleButtonPress, isMultiTouch, preventMiddleLift } from "../../utils/domEvent.js";
+import { CURSOR_GRABBING, holdStageCursor } from "../../utils/stageCursor.js";
+import { captureDrag } from "./captureDrag.js";
+//#region src/components/visualization/graphPan.ts
+function captureGraphPan(event, state) {
+	if (isMultiTouch(event.evt)) return;
+	const handleMove = ({ event: move, movementX, movementY }) => {
+		move.type === "mousemove" && move.preventDefault();
+		state.x += movementX;
+		state.y += movementY;
+	};
+	state.drag = true;
+	const pan = captureDrag(event, {
+		next: handleMove,
+		complete: () => {
+			state.drag = false;
+		}
+	});
+	if (!isMiddleButtonPress(event.evt)) return;
+	event.evt.preventDefault();
+	pan.add(preventMiddleLift());
+	const container = event.target.getStage()?.container();
+	if (container) pan.add(holdStageCursor(container, CURSOR_GRABBING));
+}
+//#endregion
+export { captureGraphPan };

package/dist/components/visualization/graphViewHandle.js

@@ -0,0 +1,30 @@
+import { observable } from "../../r-html/dist/observable/index.js";
+import { createVisualizationState } from "./visualizationView.js";
+//#region src/components/visualization/graphViewHandle.ts
+var registrations = observable({ version: {} });
+var handles = /* @__PURE__ */ new Map();
+var RESTING = {
+	state: createVisualizationState(0, 0),
+	nodes: () => []
+};
+function registerGraphView(editorId, handle) {
+	handles.set(editorId, handle);
+	registrations.version[editorId] = (registrations.version[editorId] ?? 0) + 1;
+}
+function unregisterGraphView(editorId, handle) {
+	if (handles.get(editorId) !== handle) return;
+	handles.delete(editorId);
+	delete registrations.version[editorId];
+}
+function getGraphView(editorId) {
+	registrations.version[editorId];
+	return handles.get(editorId) ?? RESTING;
+}
+function updateGraphView(editorId, next) {
+	const handle = handles.get(editorId);
+	if (!handle) return;
+	const view = next(handle);
+	if (view) Object.assign(handle.state, view);
+}
+//#endregion
+export { getGraphView, registerGraphView, unregisterGraphView, updateGraphView };

package/dist/components/visualization/particles/ParticleLayer.js

@@ -0,0 +1,33 @@
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observer } from "../../../r-html/dist/observable/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { getSceneOrigin, getSceneTransform } from "../../../konva/scene/viewport.js";
+import { useAppContext } from "../../appContext.js";
+import { konva } from "../../../r-html-konva/dist/host.js";
+import { useThemeContext } from "../../themeContext.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { useSceneSource } from "../../sceneSourceContext.js";
+import { getParticleEdges } from "./particleEdges.js";
+import { createParticleLoop } from "./particleLoop.js";
+//#region src/components/visualization/particles/ParticleLayer.tsx
+var ParticleLayer = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const layerRef = createRef();
+	const { addUnsubscribe } = useUnmounted();
+	onMounted(() => {
+		const layer = layerRef.value;
+		if (!layer) return;
+		const loop = createParticleLoop(layer);
+		addUnsubscribe(loop.stop, observer(() => {
+			loop.setEdges(getParticleEdges(app.value.store.state, sourceRef.value), themeRef.value.accentColor9);
+		}), observer(() => {
+			const transform = getSceneTransform(app.value.store.state, sourceRef.value);
+			loop.setPlacement(getSceneOrigin(transform), transform.zoomLevel);
+		}));
+	});
+	return () => konva`<k-layer name="view-particles" listening=${false} ${ref(layerRef)} />`;
+};
+//#endregion
+export { ParticleLayer as default };

package/dist/components/visualization/particles/particleEdges.js

@@ -0,0 +1,36 @@
+import { query } from "../../../erd-editor-schema/dist/query/index.js";
+import { getAnchors } from "../../../utils/draw-relationship/index.js";
+import { getHighlightIds } from "../../../konva/scene/viewLayout.js";
+import { getRelationshipPath } from "../../../utils/draw-relationship/pathFinding.js";
+import { measurePath } from "./particlePath.js";
+//#region src/components/visualization/particles/particleEdges.ts
+function connectorPoints(relationship, source) {
+	const { start, end } = getAnchors(relationship, source);
+	const { path } = getRelationshipPath(relationship, source);
+	const segments = path.path.d();
+	if (!segments.length) return [start, end];
+	return [
+		start,
+		{
+			x: path.line.start.x2,
+			y: path.line.start.y2
+		},
+		...segments.map(([, point]) => point),
+		{
+			x: path.line.end.x2,
+			y: path.line.end.y2
+		},
+		end
+	];
+}
+function getParticleEdges(state, source = "document") {
+	if (source === "document") return [];
+	const { relationshipIds } = getHighlightIds(state, source);
+	if (!relationshipIds.size || relationshipIds.size > 60) return [];
+	return query(state.collections).collection("relationshipEntities").selectByIds([...relationshipIds]).map((relationship) => ({
+		id: relationship.id,
+		path: measurePath(connectorPoints(relationship, source))
+	}));
+}
+//#endregion
+export { getParticleEdges };

package/dist/components/visualization/particles/particleLoop.js

@@ -0,0 +1,118 @@
+import { PARTICLE_RY, particleGradient, particlePhase, pointAlong, tangentAt } from "./particlePath.js";
+import { Stage } from "konva/lib/Stage";
+import { Group } from "konva/lib/Group";
+import { Circle } from "konva/lib/shapes/Circle";
+//#region src/components/visualization/particles/particleLoop.ts
+var particleClock = {
+	now: () => performance.now(),
+	requestFrame: (callback) => requestAnimationFrame(callback),
+	cancelFrame: (handle) => cancelAnimationFrame(handle)
+};
+var PARTICLE_GROUP_NAME = "particle-edge";
+function createParticleLoop(layer, clock = particleClock) {
+	const groups = [];
+	const startedAt = clock.now();
+	let edges = [];
+	let fill = "";
+	let painted = "";
+	let origin = {
+		x: 0,
+		y: 0
+	};
+	let zoomLevel = 1;
+	let handle = null;
+	let drawn = false;
+	let stopped = false;
+	const schedule = () => {
+		if (handle !== null || stopped) return;
+		handle = clock.requestFrame(frame);
+	};
+	const addGroup = () => {
+		const group = new Group({ listening: false });
+		const circles = [];
+		for (let index = 0; index < 6; index++) {
+			const circle = new Circle({
+				radius: PARTICLE_RY,
+				scaleX: 5 / PARTICLE_RY,
+				listening: false,
+				...particleGradient(fill)
+			});
+			group.add(circle);
+			circles.push(circle);
+		}
+		layer.add(group);
+		groups.push({
+			group,
+			circles
+		});
+	};
+	const repaint = () => {
+		if (fill === painted) return;
+		painted = fill;
+		const gradient = particleGradient(fill);
+		for (const { circles } of groups) for (const circle of circles) circle.setAttrs(gradient);
+	};
+	const place = () => {
+		if (layer.x() !== origin.x || layer.y() !== origin.y) layer.position(origin);
+		if (layer.scaleX() !== zoomLevel || layer.scaleY() !== zoomLevel) layer.scale({
+			x: zoomLevel,
+			y: zoomLevel
+		});
+	};
+	function frame() {
+		handle = null;
+		if (!(layer.getStage() instanceof Stage)) {
+			edges.length && schedule();
+			return;
+		}
+		while (groups.length < edges.length) addGroup();
+		while (groups.length > edges.length) groups.pop()?.group.destroy();
+		repaint();
+		place();
+		const elapsed = clock.now() - startedAt;
+		edges.forEach((edge, index) => {
+			const { group, circles } = groups[index];
+			const name = `${PARTICLE_GROUP_NAME} ${edge.id}`;
+			group.name() === name || group.name(name);
+			const distances = particlePhase(elapsed, edge.path.length);
+			circles.forEach((circle, at) => {
+				circle.position(pointAlong(edge.path, distances[at]));
+				circle.rotation(tangentAt(edge.path, distances[at]));
+			});
+		});
+		layer.draw();
+		drawn = edges.length > 0;
+		drawn && schedule();
+	}
+	return {
+		setEdges(next, nextFill) {
+			if (stopped) return;
+			edges = next;
+			fill = nextFill;
+			(edges.length || drawn) && schedule();
+		},
+		setPlacement(nextOrigin, nextZoomLevel) {
+			if (stopped) return;
+			origin = {
+				x: nextOrigin.x,
+				y: nextOrigin.y
+			};
+			zoomLevel = nextZoomLevel;
+			drawn && schedule();
+		},
+		stop() {
+			if (stopped) return;
+			stopped = true;
+			if (handle !== null) {
+				clock.cancelFrame(handle);
+				handle = null;
+			}
+			groups.splice(0).forEach(({ group }) => group.destroy());
+			edges = [];
+			drawn && layer.getStage() instanceof Stage && layer.draw();
+			drawn = false;
+		}
+	};
+}
+//#endregion
+export { PARTICLE_GROUP_NAME, createParticleLoop, particleClock };