@dforge-core/diagram 0.0.1

package/dist/SimpleDiagram/SimpleDiagram.svelte

@@ -0,0 +1,755 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import IconButton from '../IconButton.svelte';
+	import type { DiagramNode, ResolvedEdge, Point } from '../diagram-types';
+	import { PORT_DOT_RADIUS } from '../edge-routing';
+	import { buildSvgPath, edgeLabelPos, prepareDragPoints, consolidatePoints, insertJog, getSegmentHandles, applySegmentDrag, type SegHandle } from './diagram-geometry';
+	import { routeEdge } from './simple-layout';
+	import { getDiagramTranslations } from '../i18n';
+	import { createPanZoom } from '../pan-zoom.svelte';
+	import { createLocalStorageSync } from '../local-storage-sync';
+	import EntityNode from '../EntityNode.svelte';
+
+	const t = getDiagramTranslations();
+
+	interface Props {
+		nodes: DiagramNode[];
+		edges: ResolvedEdge[];
+		storageKey?: string;
+		minZoom?: number;
+		maxZoom?: number;
+		onNodeDblClick?: (nodeId: string) => void;
+	}
+
+	let { nodes, edges, storageKey, minZoom = 0.1, maxZoom = 2, onNodeDblClick }: Props = $props();
+
+	let svgEl: SVGSVGElement;
+	let containerEl: HTMLDivElement;
+	let dragOffsets = $state<Record<string, { dx: number; dy: number }>>({});
+	let selectedNodeIds = $state<Set<string>>(new Set());
+	let selectedEdgeId = $state<string | null>(null);
+	let areaSelect = $state<{ startX: number; startY: number; endX: number; endY: number } | null>(null);
+	let edgeOverrides = $state<Record<string, Point[]>>({});
+	let dragging = $state<{ nodeId: string; offsets: Record<string, { offsetX: number; offsetY: number }> } | null>(null);
+	let draggingSeg = $state<{ edgeId: string; segIndex: number; orientation: 'H' | 'V' } | null>(null);
+	let patternId = `grid-${Math.random().toString(36).slice(2, 8)}`;
+
+	const pz = createPanZoom({
+		get minZoom() { return minZoom; },
+		get maxZoom() { return maxZoom; },
+		getSvgEl: () => svgEl,
+		getContainerEl: () => containerEl,
+	});
+
+	// Auto-routed edges (from layout or node drag)
+	let autoEdges = $state<ResolvedEdge[]>([]);
+
+	// Resolved = auto-routed with manual overrides applied
+	const resolvedEdges = $derived.by(() =>
+		autoEdges.map((e) => {
+			const pts = edgeOverrides[e.id];
+			return pts ? { ...e, points: pts } : e;
+		})
+	);
+
+	// --- localStorage persistence ---
+
+	interface DiagramState {
+		dragOffsets: Record<string, { dx: number; dy: number }>;
+		edgeOverrides: Record<string, Point[]>;
+		transform: { x: number; y: number; k: number };
+	}
+
+	const storage = createLocalStorageSync<DiagramState>(() => storageKey);
+	let restoredTransform = false;
+
+	// Persist on relevant state changes
+	$effect(() => {
+		const state: DiagramState = { dragOffsets, edgeOverrides, transform: pz.transform };
+		storage.save(state);
+	});
+
+	// Reset when input changes
+	const nodeIds = $derived(nodes.map((n) => n.id).join(','));
+	$effect(() => {
+		nodeIds; // track
+		const saved = storage.load();
+		if (saved && Object.keys(saved.dragOffsets).length > 0) {
+			const offsets = saved.dragOffsets;
+			dragOffsets = offsets;
+			edgeOverrides = saved.edgeOverrides;
+			pz.setTransform(saved.transform);
+			restoredTransform = true;
+			// Re-route edges for moved nodes (use local `offsets` to avoid reading $state)
+			const movedIds = new Set(Object.keys(offsets));
+			const posMap: Record<string, DiagramNode> = {};
+			for (const n of nodes) {
+				const off = offsets[n.id];
+				posMap[n.id] = off ? { ...n, x: n.x + off.dx, y: n.y + off.dy } : n;
+			}
+			const posLookup = (id: string) => posMap[id];
+			autoEdges = edges.map((e) => {
+				if (!movedIds.has(e.source) && !movedIds.has(e.target)) return e;
+				return routeEdge(e, posLookup);
+			});
+		} else if (saved) {
+			dragOffsets = {};
+			edgeOverrides = saved.edgeOverrides;
+			pz.setTransform(saved.transform);
+			autoEdges = edges;
+			restoredTransform = true;
+		} else {
+			dragOffsets = {};
+			edgeOverrides = {};
+			autoEdges = edges;
+			restoredTransform = false;
+		}
+		selectedNodeIds = new Set();
+		selectedEdgeId = null;
+	});
+
+	// Derive node positions with drag offsets applied
+	const nodePositions = $derived.by(() => {
+		const pos: Record<string, DiagramNode> = {};
+		for (const n of nodes) {
+			const off = dragOffsets[n.id];
+			pos[n.id] = off ? { ...n, x: n.x + off.dx, y: n.y + off.dy } : n;
+		}
+		return pos;
+	});
+
+	// Node lookup map for O(1) access during drag
+	const nodeMap = $derived(new Map(nodes.map((n) => [n.id, n])));
+
+	// Edges to highlight: connected to any selected node OR the selected edge itself
+	const highlightedEdges = $derived.by(() => {
+		const set = new Set<string>();
+		if (selectedNodeIds.size > 0) {
+			for (const e of resolvedEdges) {
+				if (selectedNodeIds.has(e.source) || selectedNodeIds.has(e.target)) set.add(e.id);
+			}
+		}
+		if (selectedEdgeId) set.add(selectedEdgeId);
+		return set;
+	});
+
+	// Edge lookup map for O(1) access
+	const resolvedEdgeMap = $derived(new Map(resolvedEdges.map((e) => [e.id, e])));
+
+	// Segment handles for selected edge
+	const selectedEdgeHandles = $derived.by((): SegHandle[] => {
+		if (!selectedEdgeId) return [];
+		const edge = resolvedEdgeMap.get(selectedEdgeId);
+		if (!edge || edge.points.length < 2) return [];
+		return getSegmentHandles(edge.points);
+	});
+
+	// --- Re-route edges for a dragged node ---
+
+	function rerouteEdges() {
+		const allMoved = new Set(Object.keys(dragOffsets));
+		const lookup = (id: string) => nodePositions[id];
+		autoEdges = edges.map((e) => {
+			if (!allMoved.has(e.source) && !allMoved.has(e.target)) return e;
+			return routeEdge(e, lookup);
+		});
+		// Clear overrides for edges connected to any dragged node
+		if (!dragging) return;
+		const draggedIds = new Set(Object.keys(dragging.offsets));
+		let changed = false;
+		const newOverrides = { ...edgeOverrides };
+		for (const e of edges) {
+			if (newOverrides[e.id] && (draggedIds.has(e.source) || draggedIds.has(e.target))) {
+				delete newOverrides[e.id];
+				changed = true;
+			}
+		}
+		if (changed) edgeOverrides = newOverrides;
+	}
+
+	/** Get the current points for an edge (override or auto). */
+	const getEdgePoints = (edgeId: string): Point[] =>
+		edgeOverrides[edgeId] ?? autoEdges.find((e) => e.id === edgeId)?.points ?? [];
+
+	// --- Delegated event helpers ---
+
+	/** Walk up from event target to find a data attribute (works across HTML/SVG boundary in foreignObject). */
+	function closest(target: Element, attr: string): Element | null {
+		let el: Element | null = target;
+		while (el && el !== svgEl) {
+			if (el.hasAttribute(attr)) return el;
+			// parentElement is null at HTML↔SVG boundary in some browsers; fall back to parentNode
+			el = el.parentElement ?? (el.parentNode as Element | null);
+		}
+		return null;
+	}
+
+	function getDataAttr(el: Element, attr: string): string {
+		return el.getAttribute(attr) ?? '';
+	}
+
+	// --- Delegated pointer down (single handler on SVG) ---
+
+	function handlePointerDown(e: PointerEvent) {
+		const target = e.target as Element;
+
+		// Segment drag handle
+		const handle = closest(target, 'data-handle');
+		if (handle) {
+			const edgeId = getDataAttr(handle, 'data-edge-id');
+			const segIndex = Number(getDataAttr(handle, 'data-seg-index'));
+			const orient = getDataAttr(handle, 'data-seg-orient') as 'H' | 'V';
+			if (getDataAttr(handle, 'data-handle') === 'seg') {
+				startSegDrag(e, edgeId, segIndex, orient);
+			} else {
+				startSplitDrag(e, edgeId, segIndex, orient);
+			}
+			return;
+		}
+
+		// Edge reset button
+		if (closest(target, 'data-edge-reset')) {
+			if (selectedEdgeId) resetEdgeRoute(selectedEdgeId);
+			return;
+		}
+
+		// Edge hit area
+		const edgeHit = closest(target, 'data-edge-id');
+		if (edgeHit) {
+			selectedEdgeId = getDataAttr(edgeHit, 'data-edge-id');
+			selectedNodeIds = new Set();
+			return;
+		}
+
+		// Node
+		const nodeEl = closest(target, 'data-node-id');
+		if (nodeEl) {
+			onNodePointerDown(e, getDataAttr(nodeEl, 'data-node-id'));
+			return;
+		}
+
+		// Background (pan or area select)
+		if (target === svgEl || target.classList.contains('diagram-bg')) {
+			e.preventDefault();
+			if (e.shiftKey) {
+				const pos = pz.clientToSvg(e.clientX, e.clientY);
+				areaSelect = { startX: pos.x, startY: pos.y, endX: pos.x, endY: pos.y };
+			} else {
+				selectedNodeIds = new Set();
+				selectedEdgeId = null;
+				pz.startPan(e);
+			}
+			svgEl.setPointerCapture(e.pointerId);
+		}
+	}
+
+	// --- Delegated double-click (single handler on SVG) ---
+
+	function handleDblClick(e: MouseEvent) {
+		const target = e.target as Element;
+
+		// Edge hit — reset to auto-route
+		const edgeHit = closest(target, 'data-edge-id');
+		if (edgeHit) {
+			resetEdgeRoute(getDataAttr(edgeHit, 'data-edge-id'));
+			return;
+		}
+
+		// Node — navigate
+		const nodeEl = closest(target, 'data-node-id');
+		if (nodeEl) {
+			onNodeDblClick?.(getDataAttr(nodeEl, 'data-node-id'));
+		}
+	}
+
+	function handlePointerMove(e: PointerEvent) {
+		if (areaSelect) {
+			const pos = pz.clientToSvg(e.clientX, e.clientY);
+			areaSelect = { ...areaSelect, endX: pos.x, endY: pos.y };
+			return;
+		}
+		if (pz.onPointerMove(e)) return;
+		if (draggingSeg) {
+			const pos = pz.clientToSvg(e.clientX, e.clientY);
+			const pts = getEdgePoints(draggingSeg.edgeId);
+			if (pts.length === 0) return;
+			const result = applySegmentDrag(pts, draggingSeg.segIndex, draggingSeg.orientation, pos);
+			edgeOverrides = { ...edgeOverrides, [draggingSeg.edgeId]: result };
+			return;
+		}
+		if (dragging) {
+			const pos = pz.clientToSvg(e.clientX, e.clientY);
+			const newOffsets = { ...dragOffsets };
+			for (const [nid, off] of Object.entries(dragging.offsets)) {
+				const node = nodeMap.get(nid);
+				if (node) {
+					newOffsets[nid] = {
+						dx: pos.x - off.offsetX - node.x,
+						dy: pos.y - off.offsetY - node.y,
+					};
+				}
+			}
+			dragOffsets = newOffsets;
+			rerouteEdges();
+		}
+	}
+
+	function handlePointerUp(e: PointerEvent) {
+		if (areaSelect) {
+			svgEl.releasePointerCapture(e.pointerId);
+			const minX = Math.min(areaSelect.startX, areaSelect.endX);
+			const maxX = Math.max(areaSelect.startX, areaSelect.endX);
+			const minY = Math.min(areaSelect.startY, areaSelect.endY);
+			const maxY = Math.max(areaSelect.startY, areaSelect.endY);
+
+			const selected = new Set<string>();
+			for (const node of nodes) {
+				const pos = nodePositions[node.id] ?? node;
+				if (pos.x + node.width > minX && pos.x < maxX && pos.y + node.height > minY && pos.y < maxY) {
+					selected.add(node.id);
+				}
+			}
+			selectedNodeIds = selected;
+			selectedEdgeId = null;
+			areaSelect = null;
+			return;
+		}
+		pz.endPan(e);
+		if (draggingSeg) {
+			const edgeId = draggingSeg.edgeId;
+			const pts = edgeOverrides[edgeId];
+			if (pts) {
+				edgeOverrides = { ...edgeOverrides, [edgeId]: consolidatePoints(pts) };
+			}
+		}
+		dragging = null;
+		draggingSeg = null;
+	}
+
+	// --- Node interaction ---
+
+	function onNodePointerDown(e: PointerEvent, nodeId: string) {
+		selectedEdgeId = null;
+
+		if (e.shiftKey) {
+			const next = new Set(selectedNodeIds);
+			if (next.has(nodeId)) next.delete(nodeId);
+			else next.add(nodeId);
+			selectedNodeIds = next;
+			return;
+		}
+
+		if (!selectedNodeIds.has(nodeId)) {
+			selectedNodeIds = new Set([nodeId]);
+		}
+
+		const pos = pz.clientToSvg(e.clientX, e.clientY);
+		const offsets: Record<string, { offsetX: number; offsetY: number }> = {};
+		for (const nid of selectedNodeIds) {
+			const np = nodePositions[nid];
+			if (np) {
+				offsets[nid] = { offsetX: pos.x - np.x, offsetY: pos.y - np.y };
+			}
+		}
+		dragging = { nodeId, offsets };
+	}
+
+	// --- Edge interaction ---
+
+	function resetEdgeRoute(edgeId: string) {
+		const { [edgeId]: _, ...rest } = edgeOverrides;
+		edgeOverrides = rest;
+	}
+
+	function startSegDrag(_e: PointerEvent, edgeId: string, segIndex: number, orientation: 'H' | 'V') {
+		const pts = getEdgePoints(edgeId);
+		if (pts.length === 0) return;
+
+		if (!edgeOverrides[edgeId]) {
+			edgeOverrides = { ...edgeOverrides, [edgeId]: pts.map((p) => ({ ...p })) };
+		}
+
+		const prepared = prepareDragPoints(edgeOverrides[edgeId]!, segIndex, orientation);
+		edgeOverrides = { ...edgeOverrides, [edgeId]: prepared.points };
+		draggingSeg = { edgeId, segIndex: prepared.segIndex, orientation };
+	}
+
+	function startSplitDrag(_e: PointerEvent, edgeId: string, segIndex: number, orientation: 'H' | 'V') {
+		const pts = getEdgePoints(edgeId);
+		if (pts.length === 0) return;
+
+		const jog = insertJog(pts, segIndex, orientation);
+
+		const prepared = prepareDragPoints(jog.points, jog.segIndex, jog.orientation);
+		edgeOverrides = { ...edgeOverrides, [edgeId]: prepared.points };
+		draggingSeg = { edgeId, segIndex: prepared.segIndex, orientation: jog.orientation };
+	}
+
+	// --- Fit / reset ---
+
+	function computeBounds() {
+		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+		for (const n of nodes) {
+			const pos = nodePositions[n.id] ?? n;
+			minX = Math.min(minX, pos.x);
+			minY = Math.min(minY, pos.y);
+			maxX = Math.max(maxX, pos.x + n.width);
+			maxY = Math.max(maxY, pos.y + n.height);
+		}
+		return { minX, minY, maxX, maxY };
+	}
+
+	function fitView() {
+		if (nodes.length === 0) return;
+		pz.fitView(computeBounds());
+	}
+
+	function resetLayout() {
+		dragOffsets = {};
+		edgeOverrides = {};
+		selectedNodeIds = new Set();
+		selectedEdgeId = null;
+		autoEdges = edges;
+		requestAnimationFrame(() => fitView());
+	}
+
+	onMount(() => {
+		svgEl.addEventListener('wheel', pz.handleWheel, { passive: false });
+		if (!restoredTransform) {
+			requestAnimationFrame(() => fitView());
+		}
+		return () => {
+			svgEl.removeEventListener('wheel', pz.handleWheel);
+			storage.clear();
+		};
+	});
+</script>
+
+<div class="model-diagram" bind:this={containerEl}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<svg
+		bind:this={svgEl}
+		role="application"
+		onpointerdown={handlePointerDown}
+		onpointermove={handlePointerMove}
+		onpointerup={handlePointerUp}
+		ondblclick={handleDblClick}
+	>
+		<defs>
+			<pattern id={patternId} width="20" height="20" patternUnits="userSpaceOnUse"
+				patternTransform="translate({pz.transform.x},{pz.transform.y}) scale({pz.transform.k})"
+			>
+				<circle cx="1" cy="1" r="1" fill="var(--bs-border-color, #dee2e6)" />
+			</pattern>
+		</defs>
+
+		<!-- Background grid -->
+		<rect class="diagram-bg" width="100%" height="100%" fill="url(#{patternId})" />
+
+		<!-- Transformed content -->
+		<g style:transform="translate({pz.transform.x}px, {pz.transform.y}px) scale({pz.transform.k})"
+			style:transform-origin="0 0"
+			style:will-change="transform"
+		>
+			{#snippet renderEdge(edge: ResolvedEdge)}
+				{@const d = buildSvgPath(edge.points)}
+				{@const label = edgeLabelPos(edge.points)}
+				{@const srcPort = edge.points[0]}
+				{@const tgtPort = edge.points[edge.points.length - 1]}
+				{@const highlighted = highlightedEdges.has(edge.id)}
+				{@const selected = selectedEdgeId === edge.id}
+				{@const srcDir = edge.points.length >= 2 ? Math.sign(edge.points[1].x - edge.points[0].x) : 1}
+				{@const tgtDir = edge.points.length >= 2 ? Math.sign(edge.points[edge.points.length - 2].x - edge.points[edge.points.length - 1].x) : -1}
+
+				<path
+					d={d}
+					fill="none"
+					class="diagram-edge-hit"
+					data-edge-id={edge.id}
+				/>
+				<path {d} fill="none" stroke={edge.color}
+					stroke-width={selected ? 2.5 : highlighted ? 2 : 1}
+					class="diagram-edge"
+					class:highlighted={highlighted && !selected}
+					class:selected />
+
+				{#if edge.label}
+					<text x={label.x} y={label.y} text-anchor="middle"
+						class="diagram-edge-label"
+						fill="var(--bs-secondary-color, #6c757d)"
+					>{edge.label}</text>
+				{/if}
+
+				{#if srcPort && tgtPort}
+					<circle cx={srcPort.x} cy={srcPort.y} r={PORT_DOT_RADIUS}
+						fill={edge.color} class="port-dot" />
+					<circle cx={tgtPort.x} cy={tgtPort.y} r={PORT_DOT_RADIUS}
+						fill={edge.color} class="port-dot" />
+					<text x={srcPort.x + srcDir * 8} y={srcPort.y - 6}
+						text-anchor={srcDir > 0 ? 'start' : 'end'}
+						class="cardinality-label" fill={edge.color}
+					>{edge.isNullable ? '0..N' : 'N'}</text>
+					<text x={tgtPort.x + tgtDir * 8} y={tgtPort.y - 6}
+						text-anchor={tgtDir > 0 ? 'start' : 'end'}
+						class="cardinality-label" fill={edge.color}
+					>1</text>
+				{/if}
+			{/snippet}
+
+			<!-- Non-selected edges (behind nodes) -->
+			{#each resolvedEdges as edge (edge.id)}
+				{#if edge.id !== selectedEdgeId}
+					{@render renderEdge(edge)}
+				{/if}
+			{/each}
+
+			<!-- Nodes -->
+			{#each nodes as node (node.id)}
+				{@const pos = nodePositions[node.id] ?? node}
+				{@const isSelected = selectedNodeIds.has(node.id)}
+				<foreignObject
+					x={pos.x}
+					y={pos.y}
+					width={node.width}
+					height={node.height}
+					class="diagram-node-fo"
+					class:selected={isSelected}
+				>
+					<div xmlns="http://www.w3.org/1999/xhtml" data-node-id={node.id}>
+						<EntityNode data={node.data} />
+					</div>
+				</foreignObject>
+			{/each}
+
+			<!-- Selected edge on top of nodes -->
+			{#if selectedEdgeId}
+				{#each resolvedEdges as edge (edge.id)}
+					{#if edge.id === selectedEdgeId}
+						{@render renderEdge(edge)}
+					{/if}
+				{/each}
+
+				<!-- Segment handles -->
+				{#each selectedEdgeHandles as handle}
+					{#if handle.draggable}
+						<rect
+							x={handle.x - 4} y={handle.y - 4} width="8" height="8" rx="1"
+							fill="var(--bs-primary, #0d6efd)"
+							stroke="white" stroke-width="1"
+							class="seg-handle"
+							class:seg-handle-h={handle.orientation === 'H'}
+							class:seg-handle-v={handle.orientation === 'V'}
+							data-handle="seg"
+							data-edge-id={selectedEdgeId}
+							data-seg-index={handle.segIndex}
+							data-seg-orient={handle.orientation}
+						/>
+					{:else}
+						<circle
+							cx={handle.x} cy={handle.y} r="5"
+							fill="var(--bs-body-bg, #fff)"
+							stroke="var(--bs-primary, #0d6efd)" stroke-width="1.5"
+							class="split-handle"
+							class:split-handle-h={handle.orientation === 'H'}
+							class:split-handle-v={handle.orientation === 'V'}
+							data-handle="split"
+							data-edge-id={selectedEdgeId}
+							data-seg-index={handle.segIndex}
+							data-seg-orient={handle.orientation}
+						/>
+					{/if}
+				{/each}
+
+				<!-- Reset button -->
+				{#if edgeOverrides[selectedEdgeId]}
+					{@const ep = resolvedEdgeMap.get(selectedEdgeId)}
+					{#if ep}
+						{@const lbl = edgeLabelPos(ep.points)}
+						<g class="edge-reset-btn" data-edge-reset>
+							<rect x={lbl.x - 11} y={lbl.y - 24} width="22" height="20" rx="4" />
+							<text x={lbl.x} y={lbl.y - 14} text-anchor="middle" dominant-baseline="central">&#x21ba;</text>
+						</g>
+					{/if}
+				{/if}
+			{/if}
+
+			<!-- Area selection rectangle -->
+			{#if areaSelect}
+				{@const rx = Math.min(areaSelect.startX, areaSelect.endX)}
+				{@const ry = Math.min(areaSelect.startY, areaSelect.endY)}
+				{@const rw = Math.abs(areaSelect.endX - areaSelect.startX)}
+				{@const rh = Math.abs(areaSelect.endY - areaSelect.startY)}
+				<rect
+					x={rx} y={ry} width={rw} height={rh}
+					class="area-select-rect"
+				/>
+			{/if}
+		</g>
+	</svg>
+
+	<!-- Controls -->
+	<div class="diagram-controls">
+		<IconButton icon="bi-plus-lg" title={t.zoom_in} size="sm" onclick={() => pz.zoomBy(1.3)} />
+		<IconButton icon="bi-dash-lg" title={t.zoom_out} size="sm" onclick={() => pz.zoomBy(1 / 1.3)} />
+		<IconButton icon="bi-fullscreen" title={t.fit_view} size="sm" onclick={fitView} />
+		<IconButton icon="bi-arrow-counterclockwise" title={t.reset_layout} size="sm" onclick={resetLayout} />
+	</div>
+</div>
+
+<style>
+	.model-diagram {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.model-diagram svg {
+		width: 100%;
+		height: 100%;
+		cursor: grab;
+		display: block;
+	}
+
+	.model-diagram svg:active {
+		cursor: grabbing;
+	}
+
+	.diagram-node-fo {
+		cursor: grab;
+		overflow: visible;
+	}
+
+	.diagram-node-fo.selected {
+		filter: drop-shadow(0 0 4px var(--bs-primary, #0d6efd));
+	}
+
+	.diagram-node-fo:active {
+		cursor: grabbing;
+	}
+
+	.area-select-rect {
+		fill: rgba(13, 110, 253, 0.1);
+		stroke: var(--bs-primary, #0d6efd);
+		stroke-width: 1;
+		stroke-dasharray: 4 2;
+		pointer-events: none;
+	}
+
+	.diagram-edge {
+		stroke-dasharray: 6 3;
+		pointer-events: none;
+	}
+
+	.diagram-edge.highlighted {
+		animation: dash-flow 0.5s linear infinite;
+	}
+
+	.diagram-edge.selected {
+		stroke-dasharray: none;
+		animation: none;
+	}
+
+	.diagram-edge-hit {
+		stroke: transparent;
+		stroke-width: 12;
+		pointer-events: stroke;
+		cursor: pointer;
+	}
+
+	.diagram-edge-label {
+		font-size: 9px;
+		pointer-events: none;
+		user-select: none;
+	}
+
+	.port-dot {
+		pointer-events: none;
+	}
+
+	.cardinality-label {
+		font-size: 8px;
+		font-weight: 600;
+		pointer-events: none;
+		user-select: none;
+	}
+
+	@keyframes dash-flow {
+		to {
+			stroke-dashoffset: -9;
+		}
+	}
+
+	.seg-handle {
+		pointer-events: auto;
+	}
+
+	.seg-handle-h {
+		cursor: ns-resize;
+	}
+
+	.seg-handle-v {
+		cursor: ew-resize;
+	}
+
+	.seg-handle:hover {
+		filter: brightness(1.2);
+	}
+
+	.split-handle {
+		pointer-events: auto;
+	}
+
+	.split-handle-h {
+		cursor: ns-resize;
+	}
+
+	.split-handle-v {
+		cursor: ew-resize;
+	}
+
+	.split-handle:hover {
+		fill: color-mix(in srgb, var(--bs-primary, #0d6efd) 15%, var(--bs-body-bg, #fff));
+	}
+
+	.edge-reset-btn {
+		cursor: pointer;
+		pointer-events: auto;
+	}
+
+	.edge-reset-btn rect {
+		fill: var(--bs-body-bg, #fff);
+		stroke: var(--bs-border-color, #dee2e6);
+		stroke-width: 1;
+	}
+
+	.edge-reset-btn text {
+		font-size: 13px;
+		fill: var(--bs-secondary-color, #6c757d);
+		pointer-events: none;
+		user-select: none;
+	}
+
+	.edge-reset-btn:hover rect {
+		fill: var(--bs-primary, #0d6efd);
+		stroke: var(--bs-primary, #0d6efd);
+	}
+
+	.edge-reset-btn:hover text {
+		fill: white;
+	}
+
+	.diagram-controls {
+		position: absolute;
+		bottom: 12px;
+		left: 12px;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		background: var(--bs-body-bg, #fff);
+		border: 1px solid var(--bs-border-color, #dee2e6);
+		border-radius: 6px;
+		padding: 4px;
+		box-shadow: 0 2px 6px var(--df-shadow-color);
+	}
+</style>