@dforge-core/diagram 0.0.1

package/dist/SimpleDiagram/DiagramDebug.svelte

@@ -0,0 +1,499 @@
+<script lang="ts">
+	import type { ModelColumn } from '../model-types';
+	import type { DiagramNode, DiagramEdge, ResolvedEdge, Point } from '../diagram-types';
+	import type { EdgePath } from '../edge-routing';
+	import ModelDiagram from './ModelDiagram.svelte';
+	import SimpleDiagram from './SimpleDiagram.svelte';
+	import { simpleLayout } from './simple-layout';
+
+	const NODE_WIDTH = 260;
+	const NODE_HEIGHT_BASE = 60;
+	const ROW_HEIGHT = 22;
+	const HEADER_HEIGHT = 30;
+
+	// --- Entity IDs ---
+	const COMPANY_ID = 1;
+	const CONTACT_ID = 2;
+
+	const entityMap = new Map<number, string>([
+		[COMPANY_ID, 'Company'],
+		[CONTACT_ID, 'Contact'],
+	]);
+
+	const EDGE_ID = `edge-${CONTACT_ID}-company_id`;
+
+	// --- Columns ---
+	const col = (cd: string, label: string, opts?: Partial<ModelColumn>): ModelColumn => ({
+		columnCd: cd, isPk: false, fieldTypeCd: 'text', baseDatatypeCd: 'string',
+		resLabel: label,
+		...opts,
+	});
+
+	const companyColumns: ModelColumn[] = [
+		col('id', 'ID', { isPk: true, fieldTypeCd: 'number', baseDatatypeCd: 'number' }),
+		col('name', 'Name'),
+		col('industry', 'Industry'),
+		col('status', 'Status', { fieldTypeCd: 'dropdown' }),
+	];
+
+	const contactColumns: ModelColumn[] = [
+		col('id', 'ID', { isPk: true, fieldTypeCd: 'number', baseDatatypeCd: 'number' }),
+		col('first_name', 'First Name'),
+		col('last_name', 'Last Name'),
+		col('email', 'Email', { fieldTypeCd: 'email' }),
+		col('company_id', 'Company', {
+			columnType: 'R', fieldTypeCd: 'reference', baseDatatypeCd: 'number',
+			refEntityId: COMPANY_ID, isNullable: true,
+		}),
+	];
+
+	// --- Fixed node positions for "Current" mode ---
+	const CONTACT_X = 0;
+	const CONTACT_Y = 150;
+	const COMPANY_X = 500;
+	const COMPANY_Y = 0;
+
+	const companyH = NODE_HEIGHT_BASE + companyColumns.length * ROW_HEIGHT;
+	const contactH = NODE_HEIGHT_BASE + contactColumns.length * ROW_HEIGHT;
+
+	const SRC_X = CONTACT_X + NODE_WIDTH;
+	const SRC_Y = CONTACT_Y + HEADER_HEIGHT + 4 * ROW_HEIGHT + ROW_HEIGHT / 2;
+	const TGT_X = COMPANY_X;
+	const TGT_Y = COMPANY_Y + companyH / 2;
+
+	const fixedNodes: DiagramNode[] = [
+		{
+			id: `entity-${COMPANY_ID}`, x: COMPANY_X, y: COMPANY_Y,
+			width: NODE_WIDTH, height: companyH,
+			data: {
+				entityCd: 'company', resLabel: 'Company', resIcon: undefined,
+				moduleCd: 'debug', moduleColor: '#0d6efd',
+				columns: companyColumns, entityMap,
+			},
+		},
+		{
+			id: `entity-${CONTACT_ID}`, x: CONTACT_X, y: CONTACT_Y,
+			width: NODE_WIDTH, height: contactH,
+			data: {
+				entityCd: 'contact', resLabel: 'Contact', resIcon: undefined,
+				moduleCd: 'debug', moduleColor: '#0d6efd',
+				columns: contactColumns, entityMap,
+			},
+		},
+	];
+
+	const edges: DiagramEdge[] = [
+		{
+			id: EDGE_ID,
+			source: `entity-${CONTACT_ID}`,
+			sourceHandle: 'company_id',
+			target: `entity-${COMPANY_ID}`,
+			color: '#0d6efd',
+			label: 'Company',
+			isNullable: true,
+		},
+	];
+
+	// --- Mode toggle ---
+	let mode = $state<'current' | 'simple'>('simple');
+
+	// --- Simple layout (auto-positioned) ---
+	const simpleResult = $derived(simpleLayout(
+		fixedNodes.map((n) => ({ ...n })),
+		edges,
+	));
+
+	// --- Scenarios (Current mode only) ---
+	interface Scenario {
+		name: string;
+		description: string;
+		bends: Record<string, Point[]>;
+	}
+
+	const scenarios: Scenario[] = [
+		{
+			name: '1. Auto-routed',
+			description: 'No stored bends — uses extractBendPoints auto-routing',
+			bends: {},
+		},
+		{
+			name: '2. Orthogonal jog',
+			description: 'Proper V-H-V jog: all segments are purely H or V',
+			bends: {
+				[EDGE_ID]: [
+					{ x: 380, y: SRC_Y },
+					{ x: 380, y: TGT_Y },
+					{ x: 430, y: TGT_Y },
+					{ x: 430, y: 134 },
+					{ x: 480, y: 134 },
+					{ x: 480, y: TGT_Y },
+				],
+			},
+		},
+		{
+			name: '3. Collinear (post-split)',
+			description: 'After split, no drag yet — 3 extra bends all at same Y (tgtY=74)',
+			bends: {
+				[EDGE_ID]: [
+					{ x: 380, y: SRC_Y },
+					{ x: 380, y: TGT_Y },
+					{ x: 440, y: TGT_Y },
+					{ x: 440, y: TGT_Y },
+					{ x: TGT_X, y: TGT_Y },
+				],
+			},
+		},
+		{
+			name: '4. Diagonal (bug)',
+			description: 'Dragged collinear bends without clamps — creates diagonal lines',
+			bends: {
+				[EDGE_ID]: [
+					{ x: 380, y: SRC_Y },
+					{ x: 380, y: TGT_Y },
+					{ x: 440, y: 134 },
+					{ x: 440, y: 134 },
+					{ x: TGT_X, y: TGT_Y },
+				],
+			},
+		},
+		{
+			name: '5. Clamped (fix)',
+			description: 'Same drag as #4 but with clamp bends — stays orthogonal',
+			bends: {
+				[EDGE_ID]: [
+					{ x: 380, y: SRC_Y },
+					{ x: 380, y: TGT_Y },
+					{ x: 440, y: TGT_Y },
+					{ x: 440, y: 134 },
+					{ x: 440, y: 134 },
+					{ x: 440, y: TGT_Y },
+					{ x: TGT_X, y: TGT_Y },
+				],
+			},
+		},
+		{
+			name: '6. Wide jog',
+			description: 'Jog with different X on both endpoints — proper horizontal dragged segment',
+			bends: {
+				[EDGE_ID]: [
+					{ x: 380, y: SRC_Y },
+					{ x: 380, y: TGT_Y },
+					{ x: 420, y: TGT_Y },
+					{ x: 420, y: 140 },
+					{ x: 480, y: 140 },
+					{ x: 480, y: TGT_Y },
+				],
+			},
+		},
+		{
+			name: '7. Dragged split',
+			description: 'Split + drag result — V detour at x=380 then H-V approach',
+			bends: {
+				[EDGE_ID]: [
+					{ x: 380, y: SRC_Y },
+					{ x: 380, y: 211 },
+					{ x: 380, y: 140 },
+					{ x: 480, y: 140 },
+					{ x: 480, y: TGT_Y },
+				],
+			},
+		},
+	];
+
+	let activeIndex = $state(0);
+	const activeScenario = $derived(scenarios[activeIndex]);
+	let liveBends = $state<Record<string, Point[]>>({});
+	let livePaths = $state<{ edge: DiagramEdge; path: EdgePath }[]>([]);
+	let showConfig = $state(false);
+
+	function dedup(pts: Point[]): Point[] {
+		const result: Point[] = [pts[0]];
+		for (let i = 1; i < pts.length; i++) {
+			const prev = result[result.length - 1];
+			if (Math.abs(prev.x - pts[i].x) > 0.5 || Math.abs(prev.y - pts[i].y) > 0.5) {
+				result.push(pts[i]);
+			}
+		}
+		return result;
+	}
+
+	function formatBends(bends: Record<string, Point[]>): string {
+		const entries = Object.entries(bends);
+		if (entries.length === 0) return 'bends: {}';
+		const lines: string[] = ['bends: {'];
+		for (const [, pts] of entries) {
+			const clean = dedup(pts);
+			lines.push(`\t[EDGE_ID]: [`);
+			for (const p of clean) {
+				lines.push(`\t\t{ x: ${Math.round(p.x)}, y: ${Math.round(p.y)} },`);
+			}
+			lines.push(`\t],`);
+		}
+		lines.push('}');
+		return lines.join('\n');
+	}
+
+	function formatPaths(paths: { edge: DiagramEdge; path: EdgePath }[]): string {
+		if (paths.length === 0) return 'paths: (none)';
+		const lines: string[] = [];
+		for (const { edge, path } of paths) {
+			lines.push(`--- ${edge.id} ---`);
+			lines.push(`points (${path.points.length}):`);
+			for (const p of path.points) {
+				lines.push(`  (${Math.round(p.x)}, ${Math.round(p.y)})`);
+			}
+			lines.push(`srcPort: (${Math.round(path.srcPort.x)}, ${Math.round(path.srcPort.y)})`);
+			lines.push(`tgtPort: (${Math.round(path.tgtPort.x)}, ${Math.round(path.tgtPort.y)})`);
+			lines.push(`d: ${path.d}`);
+		}
+		return lines.join('\n');
+	}
+
+	function formatSimpleEdges(resolvedEdges: ResolvedEdge[]): string {
+		if (resolvedEdges.length === 0) return 'edges: (none)';
+		const lines: string[] = [];
+		for (const e of resolvedEdges) {
+			lines.push(`--- ${e.id} ---`);
+			lines.push(`points (${e.points.length}):`);
+			for (const p of e.points) {
+				lines.push(`  (${Math.round(p.x)}, ${Math.round(p.y)})`);
+			}
+		}
+		return lines.join('\n');
+	}
+</script>
+
+<div class="debug-page">
+	<header class="debug-header">
+		<span class="debug-title">Diagram Debug</span>
+		<div class="mode-toggle">
+			<button class="mode-btn" class:active={mode === 'current'} onclick={() => mode = 'current'}>Current</button>
+			<button class="mode-btn" class:active={mode === 'simple'} onclick={() => mode = 'simple'}>Simple</button>
+		</div>
+		<span class="text-body-secondary" style="font-size: 0.75rem;">
+			src=({SRC_X},{SRC_Y}) tgt=({TGT_X},{TGT_Y})
+		</span>
+	</header>
+
+	{#if mode === 'current'}
+		<div class="scenario-bar">
+			{#each scenarios as s, i}
+				<button
+					class="scenario-btn"
+					class:active={i === activeIndex}
+					onclick={() => activeIndex = i}
+				>{s.name}</button>
+			{/each}
+		</div>
+
+		<div class="scenario-info">
+			{activeScenario.description}
+			{#if Object.keys(activeScenario.bends).length > 0}
+				{@const bends = activeScenario.bends[EDGE_ID]}
+				{#if bends}
+					— {bends.length} bend{bends.length === 1 ? '' : 's'}:
+					{#each bends as b, i}{#if i > 0}, {/if}({b.x},{b.y}){/each}
+				{/if}
+			{/if}
+			<button class="config-toggle" onclick={() => showConfig = !showConfig}>
+				{showConfig ? 'Hide' : 'Show'} live config
+			</button>
+		</div>
+
+		<div class="debug-body">
+			{#key activeIndex}
+				<div class="debug-canvas">
+					<ModelDiagram nodes={fixedNodes} {edges} initialBendPoints={activeScenario.bends}
+						onBendPointsChange={(b) => liveBends = b}
+						onEdgePathsChange={(p) => livePaths = p} />
+				</div>
+			{/key}
+
+			{#if showConfig}
+				<div class="config-panel">
+					<div class="config-header">
+						<span>Live Config</span>
+						<button class="config-copy" onclick={() => navigator.clipboard.writeText(formatBends(liveBends))}>
+							Copy
+						</button>
+					</div>
+					<pre class="config-pre">{formatBends(liveBends)}
+
+{formatPaths(livePaths)}</pre>
+				</div>
+			{/if}
+		</div>
+	{:else}
+		<div class="scenario-info">
+			Simple mode — topological layout + deterministic H→V→H routing. No bend state, no segment dragging.
+			<button class="config-toggle" onclick={() => showConfig = !showConfig}>
+				{showConfig ? 'Hide' : 'Show'} edge data
+			</button>
+		</div>
+
+		<div class="debug-body">
+			<div class="debug-canvas">
+				<SimpleDiagram nodes={simpleResult.nodes} edges={simpleResult.edges} />
+			</div>
+
+			{#if showConfig}
+				<div class="config-panel">
+					<div class="config-header">
+						<span>Edge Data</span>
+					</div>
+					<pre class="config-pre">{formatSimpleEdges(simpleResult.edges)}</pre>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.debug-page {
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.debug-header {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		height: 40px;
+		padding: 0 0.75rem;
+		border-bottom: 1px solid var(--bs-border-color);
+		background-color: var(--bs-body-bg);
+		flex-shrink: 0;
+	}
+
+	.debug-title {
+		font-size: 0.9rem;
+		font-weight: 600;
+	}
+
+	.mode-toggle {
+		display: flex;
+		border: 1px solid var(--bs-border-color);
+		border-radius: 4px;
+		overflow: hidden;
+	}
+
+	.mode-btn {
+		padding: 0.15rem 0.5rem;
+		font-size: 0.72rem;
+		border: none;
+		background: var(--bs-body-bg);
+		color: var(--bs-body-color);
+		cursor: pointer;
+	}
+
+	.mode-btn + .mode-btn {
+		border-left: 1px solid var(--bs-border-color);
+	}
+
+	.mode-btn.active {
+		background: var(--bs-primary);
+		color: white;
+	}
+
+	.scenario-bar {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+		padding: 0.4rem 0.75rem;
+		border-bottom: 1px solid var(--bs-border-color);
+		background: var(--bs-tertiary-bg);
+		flex-shrink: 0;
+	}
+
+	.scenario-btn {
+		padding: 0.2rem 0.5rem;
+		font-size: 0.72rem;
+		border: 1px solid var(--bs-border-color);
+		border-radius: 4px;
+		background: var(--bs-body-bg);
+		color: var(--bs-body-color);
+		cursor: pointer;
+	}
+
+	.scenario-btn.active {
+		background: var(--bs-primary);
+		color: white;
+		border-color: var(--bs-primary);
+	}
+
+	.scenario-info {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.3rem 0.75rem;
+		font-size: 0.7rem;
+		color: var(--bs-secondary-color);
+		border-bottom: 1px solid var(--bs-border-color);
+		flex-shrink: 0;
+		font-family: monospace;
+	}
+
+	.config-toggle {
+		margin-left: auto;
+		padding: 0.1rem 0.4rem;
+		font-size: 0.65rem;
+		border: 1px solid var(--bs-border-color);
+		border-radius: 3px;
+		background: var(--bs-body-bg);
+		color: var(--bs-body-color);
+		cursor: pointer;
+	}
+
+	.debug-body {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+	}
+
+	.debug-canvas {
+		flex: 1;
+		min-height: 0;
+	}
+
+	.config-panel {
+		width: 280px;
+		flex-shrink: 0;
+		border-left: 1px solid var(--bs-border-color);
+		display: flex;
+		flex-direction: column;
+		background: var(--bs-tertiary-bg);
+		overflow: hidden;
+	}
+
+	.config-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.3rem 0.5rem;
+		font-size: 0.7rem;
+		font-weight: 600;
+		border-bottom: 1px solid var(--bs-border-color);
+	}
+
+	.config-copy {
+		padding: 0.1rem 0.35rem;
+		font-size: 0.6rem;
+		border: 1px solid var(--bs-border-color);
+		border-radius: 3px;
+		background: var(--bs-body-bg);
+		color: var(--bs-body-color);
+		cursor: pointer;
+	}
+
+	.config-pre {
+		flex: 1;
+		margin: 0;
+		padding: 0.4rem 0.5rem;
+		font-size: 0.62rem;
+		line-height: 1.5;
+		overflow: auto;
+		white-space: pre;
+		tab-size: 2;
+	}
+</style>

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

@@ -0,0 +1,4 @@
+declare const DiagramDebug: import("svelte").Component<Record<string, never>, {}, "">;
+type DiagramDebug = ReturnType<typeof DiagramDebug>;
+export default DiagramDebug;
+//# sourceMappingURL=DiagramDebug.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramDebug.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/SimpleDiagram/DiagramDebug.svelte.ts"],"names":[],"mappings":"AAqWA,QAAA,MAAM,YAAY,2DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}