@dforge-core/diagram 0.0.1

package/dist/SimpleDiagram/ModelDiagram.svelte

@@ -0,0 +1,569 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import IconButton from '../IconButton.svelte';
+	import type { DiagramNode, DiagramEdge, Point, DragSegment } from '../diagram-types';
+	import { computeEdgePath, extractBendPoints, getEdgeHandles, prepareDrag, dragSegment, splitSegment, consolidateBends, PORT_DOT_RADIUS, type EdgePath, type SegmentHandle } from '../edge-routing';
+	import { getDiagramTranslations } from '../i18n';
+	import { createPanZoom } from '../pan-zoom.svelte';
+	import EntityNode from '../EntityNode.svelte';
+
+	const t = getDiagramTranslations();
+
+	interface Props {
+		nodes: DiagramNode[];
+		edges: DiagramEdge[];
+		initialBendPoints?: Record<string, Point[]>;
+		minZoom?: number;
+		maxZoom?: number;
+		onBendPointsChange?: (bends: Record<string, Point[]>) => void;
+		onEdgePathsChange?: (paths: { edge: DiagramEdge; path: EdgePath }[]) => void;
+	}
+
+	let { nodes, edges, initialBendPoints, minZoom = 0.1, maxZoom = 2, onBendPointsChange, onEdgePathsChange }: Props = $props();
+
+	let svgEl: SVGSVGElement;
+	let containerEl: HTMLDivElement;
+	// Drag offsets: only contains entries for nodes that have been dragged.
+	// Reset when node set changes (new layout loaded).
+	let dragOffsets = $state<Record<string, { dx: number; dy: number }>>({});
+	let selectedEdgeId = $state<string | null>(null);
+	let edgeBendPoints = $state<Record<string, Point[]>>({});
+	let draggingSeg = $state<DragSegment | null>(null);
+	let dragging = $state<{ nodeId: string; offsetX: number; offsetY: number } | 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,
+	});
+
+	const nodeIds = $derived(nodes.map((n) => n.id).join(','));
+	$effect(() => {
+		nodeIds; // track
+		dragOffsets = {};
+		selectedEdgeId = null;
+		if (initialBendPoints) {
+			// Consolidate initial bends (remove collinear/duplicate points)
+			const nodeMap: Record<string, DiagramNode> = {};
+			for (const n of nodes) nodeMap[n.id] = n;
+			const cleaned: Record<string, Point[]> = {};
+			for (const [edgeId, bends] of Object.entries(initialBendPoints)) {
+				const edge = edges.find((e) => e.id === edgeId);
+				cleaned[edgeId] = edge ? consolidateBends(edge, nodeMap, bends) : bends;
+			}
+			edgeBendPoints = cleaned;
+		} else {
+			edgeBendPoints = {};
+		}
+	});
+	$effect(() => {
+		onBendPointsChange?.(edgeBendPoints);
+	});
+	$effect(() => {
+		onEdgePathsChange?.(edgePaths);
+	});
+
+	// Derive node positions: base from props + drag offsets
+	const nodePositions = $derived.by(() => {
+		const pos: Record<string, { x: number; y: number }> = {};
+		for (const n of nodes) {
+			const off = dragOffsets[n.id];
+			pos[n.id] = off ? { x: n.x + off.dx, y: n.y + off.dy } : { x: n.x, y: n.y };
+		}
+		return pos;
+	});
+
+	// Build a node lookup (with updated positions) for edge routing
+	const resolvedNodes = $derived.by(() => {
+		const map: Record<string, DiagramNode> = {};
+		for (const n of nodes) {
+			const pos = nodePositions[n.id];
+			map[n.id] = pos ? { ...n, x: pos.x, y: pos.y } : n;
+		}
+		return map;
+	});
+
+	// Compute edge paths reactively
+	const edgePaths = $derived.by(() => {
+		const result: { edge: DiagramEdge; path: EdgePath }[] = [];
+		for (const e of edges) {
+			const p = computeEdgePath(e, resolvedNodes, edgeBendPoints[e.id]);
+			if (p) result.push({ edge: e, path: p });
+		}
+		return result;
+	});
+
+	// Compute handles for the selected edge
+	const selectedEdgeHandles = $derived.by(() => {
+		if (!selectedEdgeId) return null;
+		const edge = edges.find((e) => e.id === selectedEdgeId);
+		if (!edge) return null;
+		return getEdgeHandles(edge, resolvedNodes, edgeBendPoints[selectedEdgeId]);
+	});
+
+	// --- Event handlers ---
+
+	function handleBackgroundPointerDown(e: PointerEvent) {
+		// Only start pan from background (svg itself or the grid rect)
+		const target = e.target as Element;
+		if (target !== svgEl && !target.classList.contains('diagram-bg')) return;
+		selectedEdgeId = null;
+		pz.startPan(e);
+	}
+
+	function handlePointerMove(e: PointerEvent) {
+		if (pz.onPointerMove(e)) return;
+		if (draggingSeg) {
+			const pos = pz.clientToSvg(e.clientX, e.clientY);
+			const bends = edgeBendPoints[draggingSeg.edgeId] ?? [];
+			edgeBendPoints = {
+				...edgeBendPoints,
+				[draggingSeg.edgeId]: dragSegment(bends, draggingSeg.segIndex, draggingSeg.orientation, pos),
+			};
+			return;
+		}
+		if (dragging) {
+			// Clear stored bend points for edges connected to dragged node —
+			// absolute bends become invalid when port positions change.
+			const nid = dragging.nodeId;
+			const hasBends = edges.some((ed) => (ed.source === nid || ed.target === nid) && edgeBendPoints[ed.id]);
+			if (hasBends) {
+				const cleaned = { ...edgeBendPoints };
+				for (const ed of edges) {
+					if (ed.source === nid || ed.target === nid) delete cleaned[ed.id];
+				}
+				edgeBendPoints = cleaned;
+			}
+			const pos = pz.clientToSvg(e.clientX, e.clientY);
+			const node = nodes.find((n) => n.id === dragging!.nodeId);
+			if (node) {
+				dragOffsets = {
+					...dragOffsets,
+					[dragging.nodeId]: {
+						dx: pos.x - dragging.offsetX - node.x,
+						dy: pos.y - dragging.offsetY - node.y,
+					},
+				};
+			}
+		}
+	}
+
+	function handlePointerUp(e: PointerEvent) {
+		pz.endPan(e);
+		// Consolidate bends after segment drag (remove collinear/duplicate points)
+		if (draggingSeg) {
+			const edgeId = draggingSeg.edgeId;
+			const bends = edgeBendPoints[edgeId];
+			if (bends) {
+				const edge = edges.find((ed) => ed.id === edgeId);
+				if (edge) {
+					edgeBendPoints = { ...edgeBendPoints, [edgeId]: consolidateBends(edge, resolvedNodes, bends) };
+				}
+			}
+		}
+		dragging = null;
+		draggingSeg = null;
+	}
+
+	// --- Node drag ---
+	function handleNodePointerDown(e: PointerEvent, nodeId: string) {
+		e.stopPropagation();
+		const pos = pz.clientToSvg(e.clientX, e.clientY);
+		const nodePos = nodePositions[nodeId];
+		if (!nodePos) return;
+		dragging = {
+			nodeId,
+			offsetX: pos.x - nodePos.x,
+			offsetY: pos.y - nodePos.y,
+		};
+	}
+
+	// --- Edge selection ---
+	function handleEdgePointerDown(e: PointerEvent, edgeId: string) {
+		e.stopPropagation();
+		selectedEdgeId = edgeId;
+	}
+
+	function handleEdgeReset(edgeId: string) {
+		const { [edgeId]: _, ...rest } = edgeBendPoints;
+		edgeBendPoints = rest;
+	}
+
+	function handleEdgeDblClick(e: MouseEvent, edgeId: string) {
+		e.stopPropagation();
+		handleEdgeReset(edgeId);
+	}
+
+	// --- Segment handle interaction (move existing segment) ---
+	function handleSegmentHandlePointerDown(e: PointerEvent, edgeId: string, segIndex: number, orientation: 'H' | 'V') {
+		e.stopPropagation();
+		const edge = edges.find((ed) => ed.id === edgeId);
+		if (!edge) return;
+
+		// Initialize from auto-routed bend points if none stored
+		if (!edgeBendPoints[edgeId]) {
+			edgeBendPoints = { ...edgeBendPoints, [edgeId]: extractBendPoints(edge, resolvedNodes) };
+		}
+
+		// Insert clamp bends where adjacent segments are collinear,
+		// so dragging won't create diagonal lines
+		const prepared = prepareDrag(edge, resolvedNodes, edgeBendPoints[edgeId]!, segIndex, orientation);
+		edgeBendPoints = { ...edgeBendPoints, [edgeId]: prepared.bends };
+		draggingSeg = { edgeId, segIndex: prepared.segIndex, orientation };
+	}
+
+	// --- Split handle interaction (split segment creating a rectangular jog) ---
+	function handleSplitPointerDown(e: PointerEvent, edgeId: string, handle: SegmentHandle) {
+		e.stopPropagation();
+		const edge = edges.find((ed) => ed.id === edgeId);
+		if (!edge) return;
+
+		// Initialize bends if not stored
+		if (!edgeBendPoints[edgeId]) {
+			edgeBendPoints = { ...edgeBendPoints, [edgeId]: extractBendPoints(edge, resolvedNodes) };
+		}
+
+		const result = splitSegment(edge, resolvedNodes, edgeBendPoints[edgeId]!, handle);
+		// Insert clamp bends so dragging the new segment stays orthogonal
+		const prepared = prepareDrag(edge, resolvedNodes, result.bends, result.segIndex, result.orientation);
+		edgeBendPoints = { ...edgeBendPoints, [edgeId]: prepared.bends };
+		draggingSeg = { edgeId, segIndex: prepared.segIndex, orientation: result.orientation };
+	}
+
+	// --- Fit / reset ---
+
+	function computeBounds() {
+		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+		for (const n of nodes) {
+			const pos = nodePositions[n.id] ?? { x: n.x, y: n.y };
+			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());
+	}
+
+	onMount(() => {
+		// Passive: false required to preventDefault on wheel
+		svgEl.addEventListener('wheel', pz.handleWheel, { passive: false });
+
+		// Fit view once positions are available
+		requestAnimationFrame(() => fitView());
+
+		return () => {
+			svgEl.removeEventListener('wheel', pz.handleWheel);
+		};
+	});
+</script>
+
+<div class="model-diagram" bind:this={containerEl}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<svg
+		bind:this={svgEl}
+		role="application"
+		onpointerdown={handleBackgroundPointerDown}
+		onpointermove={handlePointerMove}
+		onpointerup={handlePointerUp}
+	>
+		<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 transform="translate({pz.transform.x},{pz.transform.y}) scale({pz.transform.k})">
+			<!-- Edges -->
+			{#each edgePaths as { edge, path } (edge.id)}
+				<!-- Invisible wider hit area for easier clicking -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<path
+					d={path.d}
+					fill="none"
+					class="diagram-edge-hit"
+					onpointerdown={(e: PointerEvent) => handleEdgePointerDown(e, edge.id)}
+					ondblclick={(e: MouseEvent) => handleEdgeDblClick(e, edge.id)}
+				/>
+				<!-- Visible edge -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<path
+					d={path.d}
+					fill="none"
+					stroke={edge.color}
+					stroke-width={selectedEdgeId === edge.id ? 3 : 1.5}
+					class="diagram-edge"
+					class:selected={selectedEdgeId === edge.id}
+					onpointerdown={(e: PointerEvent) => handleEdgePointerDown(e, edge.id)}
+					ondblclick={(e: MouseEvent) => handleEdgeDblClick(e, edge.id)}
+				/>
+			{/each}
+
+			<!-- Edge labels -->
+			{#each edgePaths as { edge, path } (`label-${edge.id}`)}
+				{#if edge.label}
+					<text
+						x={path.labelX}
+						y={path.labelY}
+						text-anchor="middle"
+						class="diagram-edge-label"
+						fill="var(--bs-secondary-color, #6c757d)"
+					>{edge.label}</text>
+				{/if}
+			{/each}
+
+			<!-- Port dots & cardinality labels -->
+			{#each edgePaths as { edge, path } (`ports-${edge.id}`)}
+				<!-- Source port dot (FK/many side) -->
+				<circle cx={path.srcPort.x} cy={path.srcPort.y} r={PORT_DOT_RADIUS}
+					fill={edge.color} class="port-dot" />
+				<!-- Target port dot (PK/one side) -->
+				<circle cx={path.tgtPort.x} cy={path.tgtPort.y} r={PORT_DOT_RADIUS}
+					fill={edge.color} class="port-dot" />
+				<!-- Source cardinality -->
+				<text x={path.srcPort.x + 8} y={path.srcPort.y - 6}
+					class="cardinality-label" fill={edge.color}
+				>{edge.isNullable ? '0..N' : 'N'}</text>
+				<!-- Target cardinality -->
+				<text x={path.tgtPort.x - 8} y={path.tgtPort.y - 6}
+					text-anchor="end" class="cardinality-label" fill={edge.color}
+				>1</text>
+			{/each}
+
+			<!-- Handles for selected edge -->
+			{#if selectedEdgeHandles}
+				{#each selectedEdgeHandles.handles as handle}
+					{#if handle.draggable}
+						<!-- Internal segment: filled square — drag to move -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<rect
+							x={handle.x - 3.5} y={handle.y - 3.5} width="7" height="7"
+							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'}
+							onpointerdown={(e: PointerEvent) => handleSegmentHandlePointerDown(e, selectedEdgeId!, handle.segIndex, handle.orientation)}
+						/>
+					{:else}
+						<!-- First/last segment: hollow circle — drag to split -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<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'}
+							onpointerdown={(e: PointerEvent) => handleSplitPointerDown(e, selectedEdgeId!, handle)}
+						/>
+					{/if}
+				{/each}
+			{/if}
+
+			<!-- Reset button for selected edge with stored bend points -->
+			{#if selectedEdgeId && edgeBendPoints[selectedEdgeId]}
+				{@const ep = edgePaths.find((p) => p.edge.id === selectedEdgeId)}
+				{#if ep}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<g
+						class="edge-reset-btn"
+						onpointerdown={(ev: PointerEvent) => { ev.stopPropagation(); handleEdgeReset(selectedEdgeId!); }}
+					>
+						<rect
+							x={ep.path.labelX - 11} y={ep.path.labelY - 24}
+							width="22" height="20" rx="4"
+						/>
+						<text
+							x={ep.path.labelX} y={ep.path.labelY - 14}
+							text-anchor="middle"
+							dominant-baseline="central"
+						>&#x21ba;</text>
+					</g>
+				{/if}
+			{/if}
+
+			<!-- Nodes -->
+			{#each nodes as node (node.id)}
+				{@const pos = nodePositions[node.id] ?? { x: node.x, y: node.y }}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<foreignObject
+					x={pos.x}
+					y={pos.y}
+					width={node.width}
+					height={node.height}
+					onpointerdown={(e: PointerEvent) => handleNodePointerDown(e, node.id)}
+					class="diagram-node-fo"
+				>
+					<div xmlns="http://www.w3.org/1999/xhtml">
+						<EntityNode data={node.data} />
+					</div>
+				</foreignObject>
+			{/each}
+		</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} />
+	</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:active {
+		cursor: grabbing;
+	}
+
+	.diagram-edge {
+		stroke-dasharray: 6 3;
+		animation: dash-flow 0.5s linear infinite;
+		pointer-events: none;
+	}
+
+	.diagram-edge.selected {
+		stroke-width: 3;
+		stroke-dasharray: none;
+		animation: none;
+		filter: brightness(1.3);
+	}
+
+	.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;
+		}
+	}
+
+	.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));
+	}
+
+	.seg-handle {
+		pointer-events: auto;
+	}
+
+	.seg-handle-h {
+		cursor: ns-resize;
+	}
+
+	.seg-handle-v {
+		cursor: ew-resize;
+	}
+
+	.seg-handle:hover {
+		filter: brightness(1.2);
+	}
+
+	.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>

package/dist/SimpleDiagram/ModelDiagram.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { DiagramNode, DiagramEdge, Point } from '../diagram-types';
+import { type EdgePath } from '../edge-routing';
+interface Props {
+    nodes: DiagramNode[];
+    edges: DiagramEdge[];
+    initialBendPoints?: Record<string, Point[]>;
+    minZoom?: number;
+    maxZoom?: number;
+    onBendPointsChange?: (bends: Record<string, Point[]>) => void;
+    onEdgePathsChange?: (paths: {
+        edge: DiagramEdge;
+        path: EdgePath;
+    }[]) => void;
+}
+declare const ModelDiagram: import("svelte").Component<Props, {}, "">;
+type ModelDiagram = ReturnType<typeof ModelDiagram>;
+export default ModelDiagram;
+//# sourceMappingURL=ModelDiagram.svelte.d.ts.map

package/dist/SimpleDiagram/ModelDiagram.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelDiagram.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/SimpleDiagram/ModelDiagram.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAe,MAAM,kBAAkB,CAAC;AACrF,OAAO,EAAiI,KAAK,QAAQ,EAAsB,MAAM,iBAAiB,CAAC;AAMlM,UAAU,KAAK;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9D,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,QAAQ,CAAA;KAAE,EAAE,KAAK,IAAI,CAAC;CAC7E;AAiWF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/SimpleDiagram/NOTE.md

@@ -0,0 +1,14 @@
+# DiagramDebug
+
+`DiagramDebug.svelte` is a standalone debug/test harness for the diagram components.
+It was moved here from `clients/apps/dforge/src/routes/(app)/model/debug/` so it lives
+alongside the code it tests.
+
+To use it, create a route in the app and render:
+
+```svelte
+<script>
+	import { DiagramDebug } from '@dforge/diagram';
+</script>
+<DiagramDebug />
+```