/** * Tests for geometry utility functions in packages/core/src/geometry.ts. * * These pure functions compute bounding boxes, rotated corners, and visual bounds * for scene nodes. They are used by the renderer for culling, export bounds * computation, and hit testing. */ import { describe, test, expect } from 'bun:test' import { computeBounds, computeAbsoluteBounds, degToRad, radToDeg, rotatePoint, rotatedCorners, rotatedBBox, type Vector } from '@open-pencil/core' import { computeVisualBounds } from '#core/geometry' describe('degToRad / radToDeg', () => { test('degToRad converts degrees to radians', () => { expect(degToRad(0)).toBe(0) expect(degToRad(90)).toBeCloseTo(Math.PI / 2, 10) expect(degToRad(180)).toBeCloseTo(Math.PI, 10) expect(degToRad(360)).toBeCloseTo(Math.PI * 2, 10) }) test('radToDeg converts radians to degrees', () => { expect(radToDeg(0)).toBe(0) expect(radToDeg(Math.PI / 2)).toBeCloseTo(90, 10) expect(radToDeg(Math.PI)).toBeCloseTo(180, 10) }) test('roundtrip preserves value', () => { expect(radToDeg(degToRad(45))).toBeCloseTo(45, 10) expect(radToDeg(degToRad(-90))).toBeCloseTo(-90, 10) }) }) describe('rotatePoint', () => { test('no rotation returns same point', () => { const result = rotatePoint(10, 20, 0, 0, 0) expect(result.x).toBeCloseTo(10, 10) expect(result.y).toBeCloseTo(20, 10) }) test('90° rotation around origin', () => { const result = rotatePoint(1, 0, 0, 0, Math.PI / 2) expect(result.x).toBeCloseTo(0, 10) expect(result.y).toBeCloseTo(1, 10) }) test('180° rotation negates both axes', () => { const result = rotatePoint(1, 0, 0, 0, Math.PI) expect(result.x).toBeCloseTo(-1, 10) expect(result.y).toBeCloseTo(0, 10) }) test('rotation around non-origin center', () => { // Rotate (1,0) around (0.5, 0.5) by 90° → (1, 1) const result = rotatePoint(1, 0, 0.5, 0.5, Math.PI / 2) expect(result.x).toBeCloseTo(1, 10) expect(result.y).toBeCloseTo(1, 10) }) }) describe('rotatedCorners', () => { test('zero rotation returns axis-aligned corners', () => { const [tl, tr, br, bl] = rotatedCorners(50, 50, 50, 50, 0) expect(tl).toEqual({ x: 0, y: 0 }) expect(tr).toEqual({ x: 100, y: 0 }) expect(br).toEqual({ x: 100, y: 100 }) expect(bl).toEqual({ x: 0, y: 100 }) }) test('90° rotation swaps width and height positions', () => { const [tl, tr, br, bl] = rotatedCorners(50, 50, 50, 25, 90) // After 90° rotation: corners should be at different positions // The center (50,50) stays the same const cx = (tl.x + tr.x + br.x + bl.x) / 4 const cy = (tl.y + tr.y + br.y + bl.y) / 4 expect(cx).toBeCloseTo(50, 10) expect(cy).toBeCloseTo(50, 10) }) }) describe('rotatedBBox', () => { test('zero rotation returns input as bbox', () => { const bbox = rotatedBBox(10, 20, 30, 40, 0) expect(bbox).toEqual({ left: 10, right: 40, top: 20, bottom: 60, centerX: 25, centerY: 40 }) }) test('45° rotation of square expands bbox', () => { const bbox = rotatedBBox(0, 0, 100, 100, 45) // A 100x100 square rotated 45° has a bbox of ~141.4 wide/tall const side = Math.sqrt(100 * 100 * 2) expect(bbox.right - bbox.left).toBeCloseTo(side, 5) expect(bbox.bottom - bbox.top).toBeCloseTo(side, 5) // Center should remain at (50, 50) expect(bbox.centerX).toBeCloseTo(50, 5) expect(bbox.centerY).toBeCloseTo(50, 5) }) test('90° rotation of rectangle swaps dimensions', () => { const bbox = rotatedBBox(0, 0, 200, 100, 90) // A 200x100 rect rotated 90° around its center (100, 50) → bbox 100x200 // The center is at (100, 50) regardless of rotation expect(bbox.centerX).toBeCloseTo(100, 5) expect(bbox.centerY).toBeCloseTo(50, 5) // Width of bbox = original height, height of bbox = original width expect(bbox.right - bbox.left).toBeCloseTo(100, 5) expect(bbox.bottom - bbox.top).toBeCloseTo(200, 5) }) test('negative rotation works correctly', () => { const pos = rotatedBBox(0, 0, 100, 100, -45) const neg = rotatedBBox(0, 0, 100, 100, 45) // Bounding box should be same size regardless of rotation direction expect(pos.right - pos.left).toBeCloseTo(neg.right - neg.left, 5) expect(pos.bottom - pos.top).toBeCloseTo(neg.bottom - neg.top, 5) }) }) describe('computeBounds', () => { test('empty iterable returns zero rect', () => { expect(computeBounds([])).toEqual({ x: 0, y: 0, width: 0, height: 0 }) }) test('single rect returns itself', () => { const r = { x: 10, y: 20, width: 30, height: 40 } expect(computeBounds([r])).toEqual(r) }) test('multiple rects returns union', () => { const result = computeBounds([ { x: 0, y: 0, width: 100, height: 100 }, { x: 50, y: 50, width: 100, height: 100 } ]) expect(result).toEqual({ x: 0, y: 0, width: 150, height: 150 }) }) test('disjoint rects returns union spanning both', () => { const result = computeBounds([ { x: 0, y: 0, width: 10, height: 10 }, { x: 100, y: 100, width: 10, height: 10 } ]) expect(result).toEqual({ x: 0, y: 0, width: 110, height: 110 }) }) }) describe('computeAbsoluteBounds', () => { const idPos = (id: string) => { const map: Record = { a: { x: 10, y: 20 }, b: { x: 50, y: 60 }, c: { x: 0, y: 0 } } return map[id] ?? { x: 0, y: 0 } } test('empty iterable returns zero rect', () => { expect(computeAbsoluteBounds([], idPos)).toEqual({ x: 0, y: 0, width: 0, height: 0 }) }) test('single node returns its bounds', () => { const result = computeAbsoluteBounds([{ id: 'a', width: 30, height: 40 }], idPos) expect(result).toEqual({ x: 10, y: 20, width: 30, height: 40 }) }) test('multiple nodes returns union', () => { const result = computeAbsoluteBounds( [ { id: 'a', width: 30, height: 40 }, { id: 'b', width: 20, height: 20 } ], idPos ) expect(result).toEqual({ x: 10, y: 20, width: 60, height: 60 }) }) }) describe('computeVisualBounds', () => { const idPos = (id: string) => { const map: Record = { r1: { x: 100, y: 200 }, r2: { x: 300, y: 400 }, rotated: { x: 0, y: 0 } } return map[id] ?? { x: 0, y: 0 } } test('empty iterable returns zero rect', () => { expect(computeVisualBounds([], idPos)).toEqual({ x: 0, y: 0, width: 0, height: 0 }) }) test('single axis-aligned node returns its bounds', () => { const result = computeVisualBounds([{ id: 'r1', width: 50, height: 60 }], idPos) expect(result).toEqual({ x: 100, y: 200, width: 50, height: 60 }) }) test('multiple nodes returns union', () => { const result = computeVisualBounds( [ { id: 'r1', width: 50, height: 60 }, { id: 'r2', width: 30, height: 30 } ], idPos ) expect(result).toEqual({ x: 100, y: 200, width: 230, height: 230 }) }) test('rotated node has expanded bbox', () => { const noRot = computeVisualBounds( [{ id: 'rotated', width: 100, height: 50, rotation: 0 }], idPos ) const rotated = computeVisualBounds( [{ id: 'rotated', width: 100, height: 50, rotation: 45 }], idPos ) // Rotated bbox should be larger expect(rotated.width).toBeGreaterThan(noRot.width) expect(rotated.height).toBeGreaterThan(noRot.height) }) test('strokes expand bounds', () => { const noStroke = computeVisualBounds([{ id: 'r1', width: 50, height: 60, strokes: [] }], idPos) const withStroke = computeVisualBounds( [ { id: 'r1', width: 50, height: 60, strokes: [ { weight: 10, visible: true, align: 'OUTSIDE' as const, color: { r: 0, g: 0, b: 0, a: 1 }, opacity: 1 } ] } ], idPos ) // OUTSIDE stroke of weight 10 adds 10 to each side expect(withStroke.width).toBe(noStroke.width + 20) expect(withStroke.height).toBe(noStroke.height + 20) }) test('invisible strokes do not expand bounds', () => { const noStroke = computeVisualBounds([{ id: 'r1', width: 50, height: 60 }], idPos) const invisibleStroke = computeVisualBounds( [ { id: 'r1', width: 50, height: 60, strokes: [ { weight: 100, visible: false, align: 'OUTSIDE' as const, color: { r: 0, g: 0, b: 0, a: 1 }, opacity: 1 } ] } ], idPos ) expect(invisibleStroke.width).toBe(noStroke.width) expect(invisibleStroke.height).toBe(noStroke.height) }) test('CENTER stroke expands bounds by half weight', () => { const noStroke = computeVisualBounds([{ id: 'r1', width: 50, height: 60 }], idPos) const centerStroke = computeVisualBounds( [ { id: 'r1', width: 50, height: 60, strokes: [ { weight: 10, visible: true, align: 'CENTER' as const, color: { r: 0, g: 0, b: 0, a: 1 }, opacity: 1 } ] } ], idPos ) // CENTER stroke of weight 10 adds 5 to each side expect(centerStroke.width).toBe(noStroke.width + 10) expect(centerStroke.height).toBe(noStroke.height + 10) }) test('INSIDE stroke does not expand bounds', () => { const noStroke = computeVisualBounds([{ id: 'r1', width: 50, height: 60 }], idPos) const insideStroke = computeVisualBounds( [ { id: 'r1', width: 50, height: 60, strokes: [ { weight: 10, visible: true, align: 'INSIDE' as const, color: { r: 0, g: 0, b: 0, a: 1 }, opacity: 1 } ] } ], idPos ) expect(insideStroke.width).toBe(noStroke.width) expect(insideStroke.height).toBe(noStroke.height) }) test('DROP_SHADOW expands bounds asymmetrically based on offset', () => { const noEffect = computeVisualBounds([{ id: 'r1', width: 50, height: 60 }], idPos) const withShadow = computeVisualBounds( [ { id: 'r1', width: 50, height: 60, effects: [ { type: 'DROP_SHADOW' as const, visible: true, radius: 10, spread: 0, offset: { x: 5, y: -3 }, color: { r: 0, g: 0, b: 0, a: 0.5 } } ] } ], idPos ) // blurSpread = radius + spread = 10 + 0 = 10 // left expansion: max(0, blurSpread + max(0, -offset.x)) = max(0, 10 + 0) = 10 // right expansion: max(0, blurSpread + max(0, offset.x)) = max(0, 10 + 5) = 15 // top expansion: max(0, blurSpread + max(0, -offset.y)) = max(0, 10 + 3) = 13 // bottom expansion: max(0, blurSpread + max(0, offset.y)) = max(0, 10 + 0) = 10 expect(withShadow.x).toBe(noEffect.x - 10) expect(withShadow.y).toBe(noEffect.y - 13) expect(withShadow.width).toBe(noEffect.width + 10 + 15) expect(withShadow.height).toBe(noEffect.height + 13 + 10) }) test('LAYER_BLUR expands bounds by radius', () => { const noEffect = computeVisualBounds([{ id: 'r1', width: 50, height: 60 }], idPos) const withBlur = computeVisualBounds( [ { id: 'r1', width: 50, height: 60, effects: [ { type: 'LAYER_BLUR' as const, visible: true, radius: 20, spread: 0, offset: { x: 0, y: 0 }, color: { r: 0, g: 0, b: 0, a: 1 } } ] } ], idPos ) // blurSpread = 20, offset = (0,0) // All sides expand by 20 expect(withBlur.width).toBe(noEffect.width + 40) expect(withBlur.height).toBe(noEffect.height + 40) }) test('invisible effect does not expand bounds', () => { const noEffect = computeVisualBounds([{ id: 'r1', width: 50, height: 60 }], idPos) const invisibleEffect = computeVisualBounds( [ { id: 'r1', width: 50, height: 60, effects: [ { type: 'DROP_SHADOW' as const, visible: false, radius: 100, spread: 50, offset: { x: 200, y: 200 }, color: { r: 0, g: 0, b: 0, a: 1 } } ] } ], idPos ) expect(invisibleEffect).toEqual(noEffect) }) test('combined OUTSIDE stroke and DROP_SHADOW expands bounds correctly', () => { const noEffects = computeVisualBounds([{ id: 'r1', width: 50, height: 60 }], idPos) const combined = computeVisualBounds( [ { id: 'r1', width: 50, height: 60, strokes: [ { weight: 5, visible: true, align: 'OUTSIDE' as const, color: { r: 0, g: 0, b: 0, a: 1 }, opacity: 1 } ], effects: [ { type: 'DROP_SHADOW' as const, visible: true, radius: 10, spread: 0, offset: { x: 3, y: 3 }, color: { r: 0, g: 0, b: 0, a: 0.5 } } ] } ], idPos ) // strokeOverflow: OUTSIDE weight=5 → overflow=5 // effectOverflow: blurSpread=10, offset=(3,3) // left = 10 + max(0, -3) = 10 // right = 10 + max(0, 3) = 13 // top = 10 + max(0, -3) = 10 // bottom = 10 + max(0, 3) = 13 // Total left expansion: 5 (stroke) + 10 (effect) = 15 // Total right expansion: 5 (stroke) + 13 (effect) = 18 // Total top expansion: 5 (stroke) + 10 (effect) = 15 // Total bottom expansion: 5 (stroke) + 13 (effect) = 18 expect(combined.x).toBe(noEffects.x - 15) expect(combined.y).toBe(noEffects.y - 15) expect(combined.width).toBe(noEffects.width + 15 + 18) // 50 + 33 = 83 expect(combined.height).toBe(noEffects.height + 15 + 18) // 60 + 33 = 93 }) test('multiple strokes takes maximum overflow', () => { const noEffects = computeVisualBounds([{ id: 'r1', width: 50, height: 60 }], idPos) const multiStroke = computeVisualBounds( [ { id: 'r1', width: 50, height: 60, strokes: [ { weight: 2, visible: true, align: 'OUTSIDE' as const, color: { r: 0, g: 0, b: 0, a: 1 }, opacity: 1 }, { weight: 8, visible: true, align: 'CENTER' as const, color: { r: 0, g: 0, b: 0, a: 1 }, opacity: 1 }, { weight: 4, visible: true, align: 'INSIDE' as const, color: { r: 0, g: 0, b: 0, a: 1 }, opacity: 1 } ] } ], idPos ) // strokeOverflow takes max: OUTSIDE(2)=2, CENTER(4)=4, INSIDE(0)=0 → max=4 expect(multiStroke.width).toBe(noEffects.width + 8) // 4 per side × 2 expect(multiStroke.height).toBe(noEffects.height + 8) }) test('multiple effects accumulate directional overflow', () => { const noEffects = computeVisualBounds([{ id: 'r1', width: 50, height: 60 }], idPos) const multiEffect = computeVisualBounds( [ { id: 'r1', width: 50, height: 60, effects: [ { type: 'DROP_SHADOW' as const, visible: true, radius: 5, spread: 0, offset: { x: 10, y: 0 }, color: { r: 0, g: 0, b: 0, a: 1 } }, { type: 'DROP_SHADOW' as const, visible: true, radius: 3, spread: 0, offset: { x: -10, y: 0 }, color: { r: 0, g: 0, b: 0, a: 1 } } ] } ], idPos ) // Effect 1: blurSpread=5, offset=(10,0) → left=5, right=15, top=5, bottom=5 // Effect 2: blurSpread=3, offset=(-10,0) → left=13, right=3, top=3, bottom=3 // After Math.max: left=max(5,13)=13, right=max(15,3)=15, top=max(5,3)=5, bottom=max(5,3)=5 expect(multiEffect.x).toBe(noEffects.x - 13) expect(multiEffect.width).toBe(noEffects.width + 13 + 15) // 50 + 28 = 78 expect(multiEffect.y).toBe(noEffects.y - 5) expect(multiEffect.height).toBe(noEffects.height + 5 + 5) // 60 + 10 = 70 }) })