fix: layout and export edge cases from code review

- SVG: Include unbound arrows in bounds calculation (fixes clipping)
- SVG: Filter self-referencing arrows in graph builder
- PDF: Log Playwright fallback errors instead of silent catch
- PDF: Use format parameter in pdf-lib fallback (was hardcoded to Letter)
- Force layout: Add forceX/forceY centering for disconnected nodes
- Tests: Add edge case tests for empty graphs, missing dimensions,
  self-referencing arrows, XML escaping, disconnected graphs

Author: chindris-mihai-alexandru

src/export/pdf.ts

@@ -66,13 +66,17 @@ async function convertSvgToPdfWithPlaywright(
 
 async function convertSvgToPdfWithPdfLib(
   svg: string,
-  _options: PdfExportOptions
+  options: PdfExportOptions
 ): Promise<Buffer> {
   const pdfLib = await import('pdf-lib')
   const { PDFDocument } = pdfLib
 
   const pdfDoc = await PDFDocument.create()
-  const page = pdfDoc.addPage([612, 792])
+  const paper = PAPER_SIZES[options.format ?? 'a4']
+  const isLandscape = options.landscape ?? false
+  const pageWidth = isLandscape ? paper.height : paper.width
+  const pageHeight = isLandscape ? paper.width : paper.height
+  const page = pdfDoc.addPage([pageWidth, pageHeight])
 
   page.drawText('SVG Export (PDF-lib fallback)', {
     x: 50,
@@ -105,7 +109,8 @@ export async function exportPdf(
   let buffer: Buffer
   try {
     buffer = await convertSvgToPdfWithPlaywright(svg, options)
-  } catch {
+  } catch (err) {
+    console.warn('Playwright PDF export failed, falling back to pdf-lib:', err)
     buffer = await convertSvgToPdfWithPdfLib(svg, options)
   }
 

src/export/svg.ts

@@ -45,7 +45,14 @@ function computeBounds(elements: CanvasElement[]): SvgBounds {
   let maxY = -Infinity
 
   for (const el of elements) {
-    if (el.type === 'arrow' || el.type === 'line') continue
+    if (el.type === 'arrow' || el.type === 'line') {
+      if (el.startElementId || el.endElementId) continue
+      minX = Math.min(minX, el.x)
+      minY = Math.min(minY, el.y)
+      maxX = Math.max(maxX, el.x + 1)
+      maxY = Math.max(maxY, el.y + 1)
+      continue
+    }
 
     minX = Math.min(minX, el.x)
     minY = Math.min(minY, el.y)

src/layout/force.ts

@@ -1,4 +1,4 @@
-import { forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide } from 'd3-force'
+import { forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide, forceX, forceY } from 'd3-force'
 import type { CanvasElement } from '../types.js'
 import type { LayoutOptions, LayoutResult, LayoutPosition, ForceOptions } from './types.js'
 import { buildLayoutGraph, computeBoundingBox } from './graph.js'
@@ -52,6 +52,8 @@ export function computeForceLayout(
     )
     .force('charge', forceManyBody().strength(forceOpts.chargeStrength!))
     .force('center', forceCenter(0, 0).strength(forceOpts.centerStrength!))
+    .force('x', forceX(0).strength(0.05))
+    .force('y', forceY(0).strength(0.05))
     .force(
       'collide',
       forceCollide().radius((d: any) => Math.max(d.width, d.height) / 2 + 20)

src/layout/graph.ts

@@ -37,6 +37,7 @@ export function buildLayoutGraph(elements: CanvasElement[]): LayoutGraph {
     const targetId = el.endElementId
 
     if (!sourceId || !targetId) continue
+    if (sourceId === targetId) continue
     if (!nodeIds.has(sourceId) || !nodeIds.has(targetId)) continue
 
     edges.push({

test/layout.test.ts

@@ -234,4 +234,86 @@ describe('SVG Export', () => {
 
     expect(svg).toContain('<line')
   })
+
+  it('handles empty elements array', () => {
+    const svg = generateSvg([])
+
+    expect(svg).toContain('<svg')
+    expect(svg).toContain('viewBox="0 0 800 600"')
+  })
+
+  it('escapes XML special characters in text', () => {
+    const elements = [
+      makeElement({ id: 'test', text: '<script>alert("xss")</script>' }),
+    ]
+
+    const svg = generateSvg(elements)
+
+    expect(svg).not.toContain('<script>')
+    expect(svg).toContain('&lt;script&gt;')
+  })
+})
+
+describe('Layout Engine Edge Cases', () => {
+  it('handles empty elements array', () => {
+    const result = computeLayout([])
+
+    expect(result.elementCount).toBe(0)
+    expect(result.positions).toHaveLength(0)
+  })
+
+  it('handles single element', () => {
+    const elements = [makeElement({ id: 'single' })]
+    const result = computeLayout(elements)
+
+    expect(result.elementCount).toBe(1)
+    expect(result.positions).toHaveLength(1)
+  })
+
+  it('handles elements with missing dimensions', () => {
+    const elements = [
+      makeElement({ id: 'no-dims', width: undefined, height: undefined }),
+    ]
+
+    const result = computeLayout(elements)
+
+    expect(result.elementCount).toBe(1)
+    expect(result.positions[0].width).toBe(160)
+    expect(result.positions[0].height).toBe(80)
+  })
+
+  it('handles self-referencing arrows gracefully', () => {
+    const elements = [
+      makeElement({ id: 'self' }),
+      makeArrow('self', 'self'),
+    ]
+
+    const graph = buildLayoutGraph(elements)
+
+    expect(graph.nodes).toHaveLength(1)
+    expect(graph.edges).toHaveLength(0)
+  })
+
+  it('dagre handles disconnected graph', () => {
+    const elements = [
+      makeElement({ id: 'a' }),
+      makeElement({ id: 'b' }),
+    ]
+
+    const result = computeDagreLayout(elements)
+
+    expect(result.elementCount).toBe(2)
+    expect(result.bbox.width).toBeGreaterThan(0)
+  })
+
+  it('force layout handles disconnected graph', () => {
+    const elements = [
+      makeElement({ id: 'a' }),
+      makeElement({ id: 'b' }),
+    ]
+
+    const result = computeForceLayout(elements)
+
+    expect(result.elementCount).toBe(2)
+  })
 })