+16

CHANGELOG.md

reviewed

··· 5 5 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 6 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 7 8 8 + ## [0.22.2] — 2026-04-03 9 9 + 10 10 + ### Fixed 11 11 + - Inline text editing no longer destroyed by mousedown on canvas (#350) 12 12 + - Eraser drag-to-erase now records undo history (#350) 13 13 + - Opacity slider now records undo history (#350) 14 14 + - Negative rotation angles normalized to 0-359 range (#350) 15 15 + - SVG/PNG export now includes shape opacity (#350) 16 16 + - SVG/PNG export uses per-shape font family and size instead of defaults (#350) 17 17 + - Export bounding box correctly offsets line/freehand points by shape position (#350) 18 18 + - Tool switch while drawing line now finishes or cleans up line state (#350) 19 19 + 20 20 + ### Added 21 21 + - 66 new QA tests covering groups, rotation, styles, duplication, export edge cases 22 22 + 8 23 ## [0.22.1] — 2026-04-03 9 24 10 25 ### Fixed 26 26 + - Fix line and arrow tools not working in diagrams (#348) 11 27 - Arrow tool now works from empty canvas space, not just shape-to-shape (#348) 12 28 - Arrow endpoints support mixed types (shape anchor or free-standing point) 13 29

+1 -1

package.json

reviewed

··· 1 1 { 2 2 "name": "tools", 3 3 - "version": "0.22.1", 3 3 + "version": "0.22.2", 4 4 "private": true, 5 5 "type": "module", 6 6 "main": "electron/main.js",

+15 -6

src/diagrams/export.ts

reviewed

··· 94 94 // Freehand points may extend beyond the bounding box 95 95 if (shape.points) { 96 96 for (const pt of shape.points) { 97 97 - minX = Math.min(minX, pt.x); 98 98 - minY = Math.min(minY, pt.y); 99 99 - maxX = Math.max(maxX, pt.x); 100 100 - maxY = Math.max(maxY, pt.y); 97 97 + minX = Math.min(minX, shape.x + pt.x); 98 98 + minY = Math.min(minY, shape.y + pt.y); 99 99 + maxX = Math.max(maxX, shape.x + pt.x); 100 100 + maxY = Math.max(maxY, shape.y + pt.y); 101 101 } 102 102 } 103 103 } ··· 113 113 const fill = shape.style.fill ?? DEFAULT_FILL; 114 114 const stroke = shape.style.stroke ?? DEFAULT_STROKE; 115 115 const strokeWidth = shape.style.strokeWidth ?? DEFAULT_STROKE_WIDTH; 116 116 + const opacity = shape.opacity !== undefined && shape.opacity !== 1 ? shape.opacity : null; 116 117 117 118 const cx = shape.x + shape.width / 2; 118 119 const cy = shape.y + shape.height / 2; ··· 122 123 ? ` transform="rotate(${shape.rotation}, ${cx}, ${cy})"` 123 124 : ''; 124 125 126 126 + // Build opacity attribute if not fully opaque 127 127 + const opacityAttr = opacity !== null ? ` opacity="${opacity}"` : ''; 128 128 + 125 129 let element = ''; 126 130 127 131 switch (shape.kind) { ··· 144 148 145 149 case 'text': 146 150 // Text shapes render as a <text> element positioned at the center 147 147 - element = `<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-family="${DEFAULT_FONT_FAMILY}" font-size="${DEFAULT_FONT_SIZE}" fill="${stroke}"${rotation}>${escapeXml(shape.label)}</text>`; 151 151 + element = `<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-family="${shape.fontFamily || DEFAULT_FONT_FAMILY}" font-size="${shape.fontSize || DEFAULT_FONT_SIZE}" fill="${stroke}"${rotation}>${escapeXml(shape.label)}</text>`; 148 152 break; 149 153 150 154 case 'triangle': { ··· 237 241 238 242 // Add centered label for non-text shapes that have one 239 243 if (shape.kind !== 'text' && shape.label) { 240 240 - element += `\n <text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-family="${DEFAULT_FONT_FAMILY}" font-size="${DEFAULT_FONT_SIZE}" fill="${stroke}">${escapeXml(shape.label)}</text>`; 244 244 + element += `\n <text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-family="${shape.fontFamily || DEFAULT_FONT_FAMILY}" font-size="${shape.fontSize || DEFAULT_FONT_SIZE}" fill="${stroke}">${escapeXml(shape.label)}</text>`; 245 245 + } 246 246 + 247 247 + // Wrap in group with opacity if not fully opaque 248 248 + if (opacityAttr) { 249 249 + element = `<g${opacityAttr}>${element}</g>`; 241 250 } 242 251 243 252 return element;

+15 -10

src/diagrams/main.ts

reviewed

··· 900 900 901 901 // --- Mouse events --- 902 902 canvas.addEventListener('mousedown', (e) => { 903 903 + // Don't disrupt active text editing 904 904 + if (editingShapeId) return; 905 905 + 903 906 const pt = screenToCanvas(e.clientX, e.clientY); 904 907 905 908 // Middle-click or Space+drag or Hand tool = pan ··· 1043 1046 const pt = screenToCanvas(e.clientX, e.clientY); 1044 1047 const hit = shapeAtPoint(wb, pt.x, pt.y); 1045 1048 if (hit) { 1049 1049 + pushHistory(); 1046 1050 wb = removeShape(wb, hit.id); 1047 1051 selectedShapeIds.delete(hit.id); 1048 1052 syncToYjs(); ··· 1488 1492 }); 1489 1493 styleOpacity?.addEventListener('input', () => { 1490 1494 if (selectedShapeIds.size === 0) return; 1495 1495 + pushHistory(); 1491 1496 const val = Number(styleOpacity.value) / 100; 1492 1497 wb = setShapeOpacity(wb, selectedShapeIds, val); 1493 1498 styleOpacityValue.textContent = `${styleOpacity.value}%`; ··· 1875 1880 updateToolbar(); 1876 1881 render(); 1877 1882 break; 1878 1878 - case 'v': case 'V': activeTool = 'select'; updateToolbar(); break; 1879 1879 - case 'r': case 'R': activeTool = 'rectangle'; updateToolbar(); break; 1880 1880 - case 'e': case 'E': activeTool = 'ellipse'; updateToolbar(); break; 1881 1881 - case 'd': case 'D': activeTool = 'diamond'; updateToolbar(); break; 1882 1882 - case 't': case 'T': activeTool = 'text'; updateToolbar(); break; 1883 1883 + case 'v': case 'V': if (isDrawingLine && linePoints.length >= 2) { finishLine(); } isDrawingLine = false; linePoints = []; activeTool = 'select'; updateToolbar(); break; 1884 1884 + case 'r': case 'R': if (isDrawingLine && linePoints.length >= 2) { finishLine(); } isDrawingLine = false; linePoints = []; activeTool = 'rectangle'; updateToolbar(); break; 1885 1885 + case 'e': case 'E': if (isDrawingLine && linePoints.length >= 2) { finishLine(); } isDrawingLine = false; linePoints = []; activeTool = 'ellipse'; updateToolbar(); break; 1886 1886 + case 'd': case 'D': if (isDrawingLine && linePoints.length >= 2) { finishLine(); } isDrawingLine = false; linePoints = []; activeTool = 'diamond'; updateToolbar(); break; 1887 1887 + case 't': case 'T': if (isDrawingLine && linePoints.length >= 2) { finishLine(); } isDrawingLine = false; linePoints = []; activeTool = 'text'; updateToolbar(); break; 1883 1888 case 'l': case 'L': activeTool = 'line'; updateToolbar(); break; 1884 1884 - case 'p': case 'P': activeTool = 'freehand'; updateToolbar(); break; 1885 1885 - case 'a': case 'A': activeTool = 'arrow'; updateToolbar(); break; 1886 1886 - case 'h': case 'H': activeTool = 'hand'; updateToolbar(); break; 1887 1887 - case 'x': case 'X': activeTool = 'eraser'; updateToolbar(); break; 1888 1888 - case 'n': case 'N': activeTool = 'note'; updateToolbar(); break; 1889 1889 + case 'p': case 'P': if (isDrawingLine && linePoints.length >= 2) { finishLine(); } isDrawingLine = false; linePoints = []; activeTool = 'freehand'; updateToolbar(); break; 1890 1890 + case 'a': case 'A': if (isDrawingLine && linePoints.length >= 2) { finishLine(); } isDrawingLine = false; linePoints = []; activeTool = 'arrow'; updateToolbar(); break; 1891 1891 + case 'h': case 'H': if (isDrawingLine && linePoints.length >= 2) { finishLine(); } isDrawingLine = false; linePoints = []; activeTool = 'hand'; updateToolbar(); break; 1892 1892 + case 'x': case 'X': if (isDrawingLine && linePoints.length >= 2) { finishLine(); } isDrawingLine = false; linePoints = []; activeTool = 'eraser'; updateToolbar(); break; 1893 1893 + case 'n': case 'N': if (isDrawingLine && linePoints.length >= 2) { finishLine(); } isDrawingLine = false; linePoints = []; activeTool = 'note'; updateToolbar(); break; 1889 1894 case 'Delete': case 'Backspace': 1890 1895 if (selectedShapeIds.size > 0) { 1891 1896 pushHistory();

+1 -1

src/diagrams/whiteboard.ts

reviewed

··· 696 696 const shape = state.shapes.get(shapeId); 697 697 if (!shape) return state; 698 698 const shapes = new Map(state.shapes); 699 699 - shapes.set(shapeId, { ...shape, rotation: (shape.rotation + angle) % 360 }); 699 699 + shapes.set(shapeId, { ...shape, rotation: ((shape.rotation + angle) % 360 + 360) % 360 }); 700 700 return { ...state, shapes }; 701 701 } 702 702

+841

tests/diagrams-bugs.test.ts

reviewed

··· 1 1 + /** 2 2 + * Diagrams Bug Tests — failing tests that demonstrate discovered bugs. 3 3 + * 4 4 + * These tests cover BOTH bugs found in the UI layer (documented for manual fix) 5 5 + * AND the missing unit test coverage for pure-logic functions in whiteboard.ts. 6 6 + * 7 7 + * Every test in this file should either: 8 8 + * - Fail because it tests a bug (marked with comment: BUG) 9 9 + * - Pass because it fills a test coverage gap (marked with comment: COVERAGE GAP) 10 10 + */ 11 11 + import { describe, it, expect } from 'vitest'; 12 12 + import { 13 13 + createWhiteboard, 14 14 + addShape, 15 15 + addArrow, 16 16 + removeShape, 17 17 + groupShapes, 18 18 + ungroupShapes, 19 19 + getGroupMembers, 20 20 + rotateShape, 21 21 + setShapeRotation, 22 22 + setShapeStyle, 23 23 + setShapeOpacity, 24 24 + setShapeFontFamily, 25 25 + setShapeFontSize, 26 26 + duplicateShapes, 27 27 + applyResize, 28 28 + hitTestShape, 29 29 + snapPoint, 30 30 + getBoundingBox, 31 31 + toggleSnap, 32 32 + } from '../src/diagrams/whiteboard'; 33 33 + import type { Shape, WhiteboardState } from '../src/diagrams/whiteboard'; 34 34 + import { exportToSVG } from '../src/diagrams/export'; 35 35 + import History from '../src/diagrams/history'; 36 36 + 37 37 + // --------------------------------------------------------------------------- 38 38 + // Helpers 39 39 + // --------------------------------------------------------------------------- 40 40 + 41 41 + function noSnap(state: WhiteboardState): WhiteboardState { 42 42 + return { ...state, snapToGrid: false }; 43 43 + } 44 44 + 45 45 + function makeShape(overrides: Partial<Shape> & { id: string; kind: Shape['kind'] }): Shape { 46 46 + return { 47 47 + x: 0, 48 48 + y: 0, 49 49 + width: 120, 50 50 + height: 80, 51 51 + rotation: 0, 52 52 + label: '', 53 53 + style: {}, 54 54 + opacity: 1, 55 55 + ...overrides, 56 56 + }; 57 57 + } 58 58 + 59 59 + // --------------------------------------------------------------------------- 60 60 + // COVERAGE GAP: groupShapes / ungroupShapes / getGroupMembers 61 61 + // --------------------------------------------------------------------------- 62 62 + 63 63 + describe('groupShapes', () => { 64 64 + it('assigns a shared groupId to all specified shapes', () => { 65 65 + let wb = noSnap(createWhiteboard()); 66 66 + wb = addShape(wb, 'rectangle', 0, 0); 67 67 + wb = addShape(wb, 'ellipse', 100, 100); 68 68 + const ids = [...wb.shapes.keys()]; 69 69 + const { state, groupId } = groupShapes(wb, ids); 70 70 + expect(groupId).toBeTruthy(); 71 71 + expect(groupId.startsWith('group-')).toBe(true); 72 72 + for (const id of ids) { 73 73 + expect(state.shapes.get(id)!.groupId).toBe(groupId); 74 74 + } 75 75 + }); 76 76 + 77 77 + it('returns empty groupId for fewer than 2 shapes', () => { 78 78 + let wb = noSnap(createWhiteboard()); 79 79 + wb = addShape(wb, 'rectangle', 0, 0); 80 80 + const ids = [...wb.shapes.keys()]; 81 81 + const { state, groupId } = groupShapes(wb, ids); 82 82 + expect(groupId).toBe(''); 83 83 + // State should be unchanged 84 84 + expect(state.shapes.get(ids[0])!.groupId).toBeUndefined(); 85 85 + }); 86 86 + 87 87 + it('returns empty groupId for empty array', () => { 88 88 + const wb = createWhiteboard(); 89 89 + const { groupId } = groupShapes(wb, []); 90 90 + expect(groupId).toBe(''); 91 91 + }); 92 92 + }); 93 93 + 94 94 + describe('ungroupShapes', () => { 95 95 + it('removes groupId from all shapes in the group', () => { 96 96 + let wb = noSnap(createWhiteboard()); 97 97 + wb = addShape(wb, 'rectangle', 0, 0); 98 98 + wb = addShape(wb, 'ellipse', 100, 100); 99 99 + const ids = [...wb.shapes.keys()]; 100 100 + const { state, groupId } = groupShapes(wb, ids); 101 101 + const ungrouped = ungroupShapes(state, groupId); 102 102 + for (const id of ids) { 103 103 + expect(ungrouped.shapes.get(id)!.groupId).toBeUndefined(); 104 104 + } 105 105 + }); 106 106 + 107 107 + it('does not affect shapes in other groups', () => { 108 108 + let wb = noSnap(createWhiteboard()); 109 109 + wb = addShape(wb, 'rectangle', 0, 0); 110 110 + wb = addShape(wb, 'ellipse', 100, 0); 111 111 + wb = addShape(wb, 'diamond', 200, 0); 112 112 + const ids = [...wb.shapes.keys()]; 113 113 + const { state: s1, groupId: g1 } = groupShapes(wb, [ids[0], ids[1]]); 114 114 + // Manually group the third shape into a different group 115 115 + const s2 = { ...s1, shapes: new Map(s1.shapes) }; 116 116 + s2.shapes.set(ids[2], { ...s2.shapes.get(ids[2])!, groupId: 'other-group' }); 117 117 + const ungrouped = ungroupShapes(s2, g1); 118 118 + expect(ungrouped.shapes.get(ids[0])!.groupId).toBeUndefined(); 119 119 + expect(ungrouped.shapes.get(ids[1])!.groupId).toBeUndefined(); 120 120 + expect(ungrouped.shapes.get(ids[2])!.groupId).toBe('other-group'); 121 121 + }); 122 122 + }); 123 123 + 124 124 + describe('getGroupMembers', () => { 125 125 + it('returns all shape IDs belonging to a group', () => { 126 126 + let wb = noSnap(createWhiteboard()); 127 127 + wb = addShape(wb, 'rectangle', 0, 0); 128 128 + wb = addShape(wb, 'ellipse', 100, 0); 129 129 + wb = addShape(wb, 'diamond', 200, 0); 130 130 + const ids = [...wb.shapes.keys()]; 131 131 + const { state, groupId } = groupShapes(wb, [ids[0], ids[1]]); 132 132 + const members = getGroupMembers(state, groupId); 133 133 + expect(members).toHaveLength(2); 134 134 + expect(members).toContain(ids[0]); 135 135 + expect(members).toContain(ids[1]); 136 136 + expect(members).not.toContain(ids[2]); 137 137 + }); 138 138 + 139 139 + it('returns empty array for non-existent group', () => { 140 140 + const wb = createWhiteboard(); 141 141 + expect(getGroupMembers(wb, 'fake-group')).toEqual([]); 142 142 + }); 143 143 + }); 144 144 + 145 145 + // --------------------------------------------------------------------------- 146 146 + // COVERAGE GAP: rotateShape / setShapeRotation 147 147 + // --------------------------------------------------------------------------- 148 148 + 149 149 + describe('rotateShape', () => { 150 150 + it('accumulates rotation angle', () => { 151 151 + let wb = noSnap(createWhiteboard()); 152 152 + wb = addShape(wb, 'rectangle', 0, 0); 153 153 + const id = [...wb.shapes.keys()][0]; 154 154 + wb = rotateShape(wb, id, 45); 155 155 + expect(wb.shapes.get(id)!.rotation).toBe(45); 156 156 + wb = rotateShape(wb, id, 30); 157 157 + expect(wb.shapes.get(id)!.rotation).toBe(75); 158 158 + }); 159 159 + 160 160 + it('wraps rotation at 360 degrees', () => { 161 161 + let wb = noSnap(createWhiteboard()); 162 162 + wb = addShape(wb, 'rectangle', 0, 0); 163 163 + const id = [...wb.shapes.keys()][0]; 164 164 + wb = rotateShape(wb, id, 350); 165 165 + wb = rotateShape(wb, id, 20); 166 166 + expect(wb.shapes.get(id)!.rotation).toBe(10); // (350 + 20) % 360 167 167 + }); 168 168 + 169 169 + it('handles negative angles', () => { 170 170 + let wb = noSnap(createWhiteboard()); 171 171 + wb = addShape(wb, 'rectangle', 0, 0); 172 172 + const id = [...wb.shapes.keys()][0]; 173 173 + wb = rotateShape(wb, id, -45); 174 174 + // Fixed: negative angles now normalize to positive (315 instead of -45) 175 175 + expect(wb.shapes.get(id)!.rotation).toBe(315); 176 176 + }); 177 177 + 178 178 + it('returns unchanged state for non-existent shape', () => { 179 179 + const wb = createWhiteboard(); 180 180 + expect(rotateShape(wb, 'fake', 90)).toBe(wb); 181 181 + }); 182 182 + }); 183 183 + 184 184 + describe('setShapeRotation', () => { 185 185 + it('sets absolute rotation', () => { 186 186 + let wb = noSnap(createWhiteboard()); 187 187 + wb = addShape(wb, 'rectangle', 0, 0); 188 188 + const id = [...wb.shapes.keys()][0]; 189 189 + wb = setShapeRotation(wb, id, 90); 190 190 + expect(wb.shapes.get(id)!.rotation).toBe(90); 191 191 + }); 192 192 + 193 193 + it('wraps at 360', () => { 194 194 + let wb = noSnap(createWhiteboard()); 195 195 + wb = addShape(wb, 'rectangle', 0, 0); 196 196 + const id = [...wb.shapes.keys()][0]; 197 197 + wb = setShapeRotation(wb, id, 400); 198 198 + expect(wb.shapes.get(id)!.rotation).toBe(40); 199 199 + }); 200 200 + 201 201 + it('returns unchanged state for non-existent shape', () => { 202 202 + const wb = createWhiteboard(); 203 203 + expect(setShapeRotation(wb, 'fake', 90)).toBe(wb); 204 204 + }); 205 205 + }); 206 206 + 207 207 + // --------------------------------------------------------------------------- 208 208 + // COVERAGE GAP: setShapeStyle 209 209 + // --------------------------------------------------------------------------- 210 210 + 211 211 + describe('setShapeStyle', () => { 212 212 + it('sets style properties on a shape', () => { 213 213 + let wb = noSnap(createWhiteboard()); 214 214 + wb = addShape(wb, 'rectangle', 0, 0); 215 215 + const id = [...wb.shapes.keys()][0]; 216 216 + wb = setShapeStyle(wb, [id], { fill: '#ff0000', stroke: '#00ff00' }); 217 217 + const shape = wb.shapes.get(id)!; 218 218 + expect(shape.style.fill).toBe('#ff0000'); 219 219 + expect(shape.style.stroke).toBe('#00ff00'); 220 220 + }); 221 221 + 222 222 + it('merges with existing styles', () => { 223 223 + let wb = noSnap(createWhiteboard()); 224 224 + wb = addShape(wb, 'rectangle', 0, 0); 225 225 + const id = [...wb.shapes.keys()][0]; 226 226 + wb = setShapeStyle(wb, [id], { fill: '#ff0000' }); 227 227 + wb = setShapeStyle(wb, [id], { stroke: '#00ff00' }); 228 228 + const shape = wb.shapes.get(id)!; 229 229 + expect(shape.style.fill).toBe('#ff0000'); 230 230 + expect(shape.style.stroke).toBe('#00ff00'); 231 231 + }); 232 232 + 233 233 + it('applies to multiple shapes', () => { 234 234 + let wb = noSnap(createWhiteboard()); 235 235 + wb = addShape(wb, 'rectangle', 0, 0); 236 236 + wb = addShape(wb, 'ellipse', 100, 0); 237 237 + const ids = [...wb.shapes.keys()]; 238 238 + wb = setShapeStyle(wb, ids, { fill: '#0000ff' }); 239 239 + for (const id of ids) { 240 240 + expect(wb.shapes.get(id)!.style.fill).toBe('#0000ff'); 241 241 + } 242 242 + }); 243 243 + 244 244 + it('ignores non-existent shape IDs', () => { 245 245 + let wb = noSnap(createWhiteboard()); 246 246 + wb = addShape(wb, 'rectangle', 0, 0); 247 247 + const sizeBefore = wb.shapes.size; 248 248 + wb = setShapeStyle(wb, ['fake-id'], { fill: 'red' }); 249 249 + expect(wb.shapes.size).toBe(sizeBefore); 250 250 + }); 251 251 + }); 252 252 + 253 253 + // --------------------------------------------------------------------------- 254 254 + // COVERAGE GAP: setShapeOpacity 255 255 + // --------------------------------------------------------------------------- 256 256 + 257 257 + describe('setShapeOpacity', () => { 258 258 + it('sets opacity on a shape', () => { 259 259 + let wb = noSnap(createWhiteboard()); 260 260 + wb = addShape(wb, 'rectangle', 0, 0); 261 261 + const id = [...wb.shapes.keys()][0]; 262 262 + wb = setShapeOpacity(wb, [id], 0.5); 263 263 + expect(wb.shapes.get(id)!.opacity).toBe(0.5); 264 264 + }); 265 265 + 266 266 + it('clamps opacity to 0', () => { 267 267 + let wb = noSnap(createWhiteboard()); 268 268 + wb = addShape(wb, 'rectangle', 0, 0); 269 269 + const id = [...wb.shapes.keys()][0]; 270 270 + wb = setShapeOpacity(wb, [id], -0.5); 271 271 + expect(wb.shapes.get(id)!.opacity).toBe(0); 272 272 + }); 273 273 + 274 274 + it('clamps opacity to 1', () => { 275 275 + let wb = noSnap(createWhiteboard()); 276 276 + wb = addShape(wb, 'rectangle', 0, 0); 277 277 + const id = [...wb.shapes.keys()][0]; 278 278 + wb = setShapeOpacity(wb, [id], 1.5); 279 279 + expect(wb.shapes.get(id)!.opacity).toBe(1); 280 280 + }); 281 281 + 282 282 + it('sets opacity to exact boundaries', () => { 283 283 + let wb = noSnap(createWhiteboard()); 284 284 + wb = addShape(wb, 'rectangle', 0, 0); 285 285 + const id = [...wb.shapes.keys()][0]; 286 286 + wb = setShapeOpacity(wb, [id], 0); 287 287 + expect(wb.shapes.get(id)!.opacity).toBe(0); 288 288 + wb = setShapeOpacity(wb, [id], 1); 289 289 + expect(wb.shapes.get(id)!.opacity).toBe(1); 290 290 + }); 291 291 + 292 292 + it('applies to multiple shapes', () => { 293 293 + let wb = noSnap(createWhiteboard()); 294 294 + wb = addShape(wb, 'rectangle', 0, 0); 295 295 + wb = addShape(wb, 'ellipse', 100, 0); 296 296 + const ids = [...wb.shapes.keys()]; 297 297 + wb = setShapeOpacity(wb, ids, 0.3); 298 298 + for (const id of ids) { 299 299 + expect(wb.shapes.get(id)!.opacity).toBe(0.3); 300 300 + } 301 301 + }); 302 302 + }); 303 303 + 304 304 + // --------------------------------------------------------------------------- 305 305 + // COVERAGE GAP: setShapeFontFamily / setShapeFontSize 306 306 + // --------------------------------------------------------------------------- 307 307 + 308 308 + describe('setShapeFontFamily', () => { 309 309 + it('sets font family on a shape', () => { 310 310 + let wb = noSnap(createWhiteboard()); 311 311 + wb = addShape(wb, 'text', 0, 0); 312 312 + const id = [...wb.shapes.keys()][0]; 313 313 + wb = setShapeFontFamily(wb, [id], 'monospace'); 314 314 + expect(wb.shapes.get(id)!.fontFamily).toBe('monospace'); 315 315 + }); 316 316 + 317 317 + it('applies to multiple shapes', () => { 318 318 + let wb = noSnap(createWhiteboard()); 319 319 + wb = addShape(wb, 'text', 0, 0); 320 320 + wb = addShape(wb, 'rectangle', 100, 0); 321 321 + const ids = [...wb.shapes.keys()]; 322 322 + wb = setShapeFontFamily(wb, ids, 'serif'); 323 323 + for (const id of ids) { 324 324 + expect(wb.shapes.get(id)!.fontFamily).toBe('serif'); 325 325 + } 326 326 + }); 327 327 + }); 328 328 + 329 329 + describe('setShapeFontSize', () => { 330 330 + it('sets font size on a shape', () => { 331 331 + let wb = noSnap(createWhiteboard()); 332 332 + wb = addShape(wb, 'text', 0, 0); 333 333 + const id = [...wb.shapes.keys()][0]; 334 334 + wb = setShapeFontSize(wb, [id], 24); 335 335 + expect(wb.shapes.get(id)!.fontSize).toBe(24); 336 336 + }); 337 337 + 338 338 + it('enforces minimum font size of 8', () => { 339 339 + let wb = noSnap(createWhiteboard()); 340 340 + wb = addShape(wb, 'text', 0, 0); 341 341 + const id = [...wb.shapes.keys()][0]; 342 342 + wb = setShapeFontSize(wb, [id], 4); 343 343 + expect(wb.shapes.get(id)!.fontSize).toBe(8); 344 344 + }); 345 345 + 346 346 + it('applies to multiple shapes', () => { 347 347 + let wb = noSnap(createWhiteboard()); 348 348 + wb = addShape(wb, 'text', 0, 0); 349 349 + wb = addShape(wb, 'text', 100, 0); 350 350 + const ids = [...wb.shapes.keys()]; 351 351 + wb = setShapeFontSize(wb, ids, 36); 352 352 + for (const id of ids) { 353 353 + expect(wb.shapes.get(id)!.fontSize).toBe(36); 354 354 + } 355 355 + }); 356 356 + }); 357 357 + 358 358 + // --------------------------------------------------------------------------- 359 359 + // COVERAGE GAP: duplicateShapes 360 360 + // --------------------------------------------------------------------------- 361 361 + 362 362 + describe('duplicateShapes', () => { 363 363 + it('duplicates a shape with offset', () => { 364 364 + let wb = noSnap(createWhiteboard()); 365 365 + wb = addShape(wb, 'rectangle', 100, 200, 50, 50); 366 366 + const ids = [...wb.shapes.keys()]; 367 367 + const { state, idMap } = duplicateShapes(wb, ids); 368 368 + expect(state.shapes.size).toBe(2); 369 369 + expect(idMap.size).toBe(1); 370 370 + const newId = idMap.get(ids[0])!; 371 371 + const original = state.shapes.get(ids[0])!; 372 372 + const copy = state.shapes.get(newId)!; 373 373 + expect(copy.x).toBe(original.x + 20); 374 374 + expect(copy.y).toBe(original.y + 20); 375 375 + expect(copy.kind).toBe('rectangle'); 376 376 + expect(copy.width).toBe(50); 377 377 + expect(copy.height).toBe(50); 378 378 + }); 379 379 + 380 380 + it('uses custom offset', () => { 381 381 + let wb = noSnap(createWhiteboard()); 382 382 + wb = addShape(wb, 'rectangle', 0, 0); 383 383 + const ids = [...wb.shapes.keys()]; 384 384 + const { state, idMap } = duplicateShapes(wb, ids, 50, 50); 385 385 + const newId = idMap.get(ids[0])!; 386 386 + expect(state.shapes.get(newId)!.x).toBe(50); 387 387 + expect(state.shapes.get(newId)!.y).toBe(50); 388 388 + }); 389 389 + 390 390 + it('preserves shape properties (style, opacity, rotation, label)', () => { 391 391 + let wb = noSnap(createWhiteboard()); 392 392 + wb = addShape(wb, 'rectangle', 0, 0, 100, 80, 'Hello'); 393 393 + const id = [...wb.shapes.keys()][0]; 394 394 + const shapes = new Map(wb.shapes); 395 395 + shapes.set(id, { 396 396 + ...shapes.get(id)!, 397 397 + style: { fill: '#ff0000' }, 398 398 + opacity: 0.7, 399 399 + rotation: 45, 400 400 + fontFamily: 'serif', 401 401 + fontSize: 20, 402 402 + }); 403 403 + wb = { ...wb, shapes }; 404 404 + 405 405 + const { state, idMap } = duplicateShapes(wb, [id]); 406 406 + const newId = idMap.get(id)!; 407 407 + const copy = state.shapes.get(newId)!; 408 408 + expect(copy.label).toBe('Hello'); 409 409 + expect(copy.style.fill).toBe('#ff0000'); 410 410 + expect(copy.opacity).toBe(0.7); 411 411 + expect(copy.rotation).toBe(45); 412 412 + expect(copy.fontFamily).toBe('serif'); 413 413 + expect(copy.fontSize).toBe(20); 414 414 + }); 415 415 + 416 416 + it('preserves freehand points', () => { 417 417 + let wb = noSnap(createWhiteboard()); 418 418 + wb = addShape(wb, 'freehand', 0, 0, 100, 100); 419 419 + const id = [...wb.shapes.keys()][0]; 420 420 + const shapes = new Map(wb.shapes); 421 421 + shapes.set(id, { ...shapes.get(id)!, points: [{ x: 0, y: 0 }, { x: 50, y: 50 }] }); 422 422 + wb = { ...wb, shapes }; 423 423 + 424 424 + const { state, idMap } = duplicateShapes(wb, [id]); 425 425 + const newId = idMap.get(id)!; 426 426 + expect(state.shapes.get(newId)!.points).toEqual([{ x: 0, y: 0 }, { x: 50, y: 50 }]); 427 427 + }); 428 428 + 429 429 + it('clears groupId on duplicated shapes', () => { 430 430 + let wb = noSnap(createWhiteboard()); 431 431 + wb = addShape(wb, 'rectangle', 0, 0); 432 432 + wb = addShape(wb, 'ellipse', 100, 0); 433 433 + const ids = [...wb.shapes.keys()]; 434 434 + const { state: grouped } = groupShapes(wb, ids); 435 435 + const { state, idMap } = duplicateShapes(grouped, ids); 436 436 + for (const newId of idMap.values()) { 437 437 + expect(state.shapes.get(newId)!.groupId).toBeUndefined(); 438 438 + } 439 439 + }); 440 440 + 441 441 + it('duplicates arrows between duplicated shapes', () => { 442 442 + let wb = noSnap(createWhiteboard()); 443 443 + wb = addShape(wb, 'rectangle', 0, 0); 444 444 + wb = addShape(wb, 'rectangle', 200, 0); 445 445 + const ids = [...wb.shapes.keys()]; 446 446 + wb = addArrow(wb, { shapeId: ids[0], anchor: 'right' }, { shapeId: ids[1], anchor: 'left' }); 447 447 + expect(wb.arrows.size).toBe(1); 448 448 + 449 449 + const { state, idMap } = duplicateShapes(wb, ids); 450 450 + expect(state.arrows.size).toBe(2); 451 451 + // The new arrow should connect the new shapes 452 452 + const newArrows = [...state.arrows.values()].filter( 453 453 + a => !wb.arrows.has(a.id), 454 454 + ); 455 455 + expect(newArrows).toHaveLength(1); 456 456 + const newArrow = newArrows[0]; 457 457 + expect('shapeId' in newArrow.from && idMap.get(ids[0]) === (newArrow.from as any).shapeId).toBe(true); 458 458 + expect('shapeId' in newArrow.to && idMap.get(ids[1]) === (newArrow.to as any).shapeId).toBe(true); 459 459 + }); 460 460 + 461 461 + it('does not duplicate arrows when only one endpoint is duplicated', () => { 462 462 + let wb = noSnap(createWhiteboard()); 463 463 + wb = addShape(wb, 'rectangle', 0, 0); 464 464 + wb = addShape(wb, 'rectangle', 200, 0); 465 465 + const ids = [...wb.shapes.keys()]; 466 466 + wb = addArrow(wb, { shapeId: ids[0], anchor: 'right' }, { shapeId: ids[1], anchor: 'left' }); 467 467 + 468 468 + // Only duplicate the first shape 469 469 + const { state } = duplicateShapes(wb, [ids[0]]); 470 470 + expect(state.arrows.size).toBe(1); // Original arrow only 471 471 + }); 472 472 + 473 473 + it('handles empty input gracefully', () => { 474 474 + const wb = createWhiteboard(); 475 475 + const { state, idMap } = duplicateShapes(wb, []); 476 476 + expect(state.shapes.size).toBe(0); 477 477 + expect(idMap.size).toBe(0); 478 478 + }); 479 479 + }); 480 480 + 481 481 + // --------------------------------------------------------------------------- 482 482 + // COVERAGE GAP: applyResize -- untested handles (NE, SW, S, W) 483 483 + // --------------------------------------------------------------------------- 484 484 + 485 485 + describe('applyResize additional handles', () => { 486 486 + const base = { x: 100, y: 100, width: 80, height: 60 }; 487 487 + 488 488 + it('resizes NE corner', () => { 489 489 + const result = applyResize(base, 'ne', 20, -10); 490 490 + expect(result.width).toBe(100); // width + 20 491 491 + expect(result.height).toBe(70); // height - (-10) = 70 492 492 + expect(result.x).toBe(100); // x unchanged 493 493 + expect(result.y).toBe(90); // y + (-10) = 90 494 494 + }); 495 495 + 496 496 + it('resizes SW corner', () => { 497 497 + const result = applyResize(base, 'sw', -10, 20); 498 498 + expect(result.width).toBe(90); // width - (-10) = 90 499 499 + expect(result.height).toBe(80); // height + 20 500 500 + expect(result.x).toBe(90); // x + (-10) = 90 501 501 + expect(result.y).toBe(100); // y unchanged 502 502 + }); 503 503 + 504 504 + it('resizes S edge', () => { 505 505 + const result = applyResize(base, 's', 0, 15); 506 506 + expect(result.width).toBe(80); // unchanged 507 507 + expect(result.height).toBe(75); // height + 15 508 508 + expect(result.x).toBe(100); // unchanged 509 509 + expect(result.y).toBe(100); // unchanged 510 510 + }); 511 511 + 512 512 + it('resizes W edge', () => { 513 513 + const result = applyResize(base, 'w', -20, 0); 514 514 + expect(result.width).toBe(100); // width - (-20) = 100 515 515 + expect(result.height).toBe(60); // unchanged 516 516 + expect(result.x).toBe(80); // x + (-20) = 80 517 517 + expect(result.y).toBe(100); // unchanged 518 518 + }); 519 519 + 520 520 + it('clamps NE resize to minimum size', () => { 521 521 + const result = applyResize(base, 'ne', -200, 200); 522 522 + expect(result.width).toBe(10); 523 523 + expect(result.height).toBe(10); 524 524 + }); 525 525 + 526 526 + it('clamps SW resize to minimum size', () => { 527 527 + const result = applyResize(base, 'sw', 200, -200); 528 528 + expect(result.width).toBe(10); 529 529 + expect(result.height).toBe(10); 530 530 + }); 531 531 + }); 532 532 + 533 533 + // --------------------------------------------------------------------------- 534 534 + // COVERAGE GAP: Export of additional shape types 535 535 + // --------------------------------------------------------------------------- 536 536 + 537 537 + describe('exportToSVG additional shapes', () => { 538 538 + it('renders triangle as polygon', () => { 539 539 + const state = createWhiteboard(); 540 540 + state.shapes.set('t1', makeShape({ id: 't1', kind: 'triangle', x: 0, y: 0, width: 100, height: 80 })); 541 541 + const svg = exportToSVG(state); 542 542 + expect(svg).toContain('<polygon'); 543 543 + expect(svg).toContain('50,0'); // top center 544 544 + }); 545 545 + 546 546 + it('renders star as polygon with 10 points', () => { 547 547 + const state = createWhiteboard(); 548 548 + state.shapes.set('s1', makeShape({ id: 's1', kind: 'star', x: 0, y: 0, width: 100, height: 100 })); 549 549 + const svg = exportToSVG(state); 550 550 + expect(svg).toContain('<polygon'); 551 551 + }); 552 552 + 553 553 + it('renders hexagon as polygon with 6 points', () => { 554 554 + const state = createWhiteboard(); 555 555 + state.shapes.set('h1', makeShape({ id: 'h1', kind: 'hexagon', x: 0, y: 0, width: 100, height: 100 })); 556 556 + const svg = exportToSVG(state); 557 557 + expect(svg).toContain('<polygon'); 558 558 + }); 559 559 + 560 560 + it('renders cloud as path', () => { 561 561 + const state = createWhiteboard(); 562 562 + state.shapes.set('c1', makeShape({ id: 'c1', kind: 'cloud', x: 0, y: 0, width: 120, height: 80 })); 563 563 + const svg = exportToSVG(state); 564 564 + expect(svg).toContain('<path'); 565 565 + }); 566 566 + 567 567 + it('renders cylinder with ellipse and lines', () => { 568 568 + const state = createWhiteboard(); 569 569 + state.shapes.set('cy1', makeShape({ id: 'cy1', kind: 'cylinder', x: 0, y: 0, width: 80, height: 120 })); 570 570 + const svg = exportToSVG(state); 571 571 + expect(svg).toContain('<ellipse'); 572 572 + expect(svg).toContain('<line'); 573 573 + }); 574 574 + 575 575 + it('renders parallelogram as polygon', () => { 576 576 + const state = createWhiteboard(); 577 577 + state.shapes.set('p1', makeShape({ id: 'p1', kind: 'parallelogram', x: 0, y: 0, width: 120, height: 80 })); 578 578 + const svg = exportToSVG(state); 579 579 + expect(svg).toContain('<polygon'); 580 580 + }); 581 581 + 582 582 + it('renders note with folded corner path', () => { 583 583 + const state = createWhiteboard(); 584 584 + state.shapes.set('n1', makeShape({ id: 'n1', kind: 'note', x: 0, y: 0, width: 100, height: 100 })); 585 585 + const svg = exportToSVG(state); 586 586 + expect(svg).toContain('<path'); 587 587 + // Note default fill should be #fef08a when no custom fill 588 588 + expect(svg).toContain('#fef08a'); 589 589 + }); 590 590 + 591 591 + it('renders line shape as polyline', () => { 592 592 + const state = createWhiteboard(); 593 593 + state.shapes.set('l1', makeShape({ 594 594 + id: 'l1', 595 595 + kind: 'line', 596 596 + x: 10, 597 597 + y: 20, 598 598 + width: 100, 599 599 + height: 80, 600 600 + points: [{ x: 0, y: 0 }, { x: 50, y: 40 }, { x: 100, y: 80 }], 601 601 + })); 602 602 + const svg = exportToSVG(state); 603 603 + expect(svg).toContain('<polyline'); 604 604 + }); 605 605 + 606 606 + it('renders line shape with offset points', () => { 607 607 + const state = createWhiteboard(); 608 608 + state.shapes.set('l1', makeShape({ 609 609 + id: 'l1', 610 610 + kind: 'line', 611 611 + x: 10, 612 612 + y: 20, 613 613 + width: 100, 614 614 + height: 80, 615 615 + points: [{ x: 0, y: 0 }, { x: 100, y: 80 }], 616 616 + })); 617 617 + const svg = exportToSVG(state); 618 618 + // Line export should offset points by shape.x, shape.y: "10,20 110,100" 619 619 + expect(svg).toContain('10,20'); 620 620 + expect(svg).toContain('110,100'); 621 621 + }); 622 622 + }); 623 623 + 624 624 + // --------------------------------------------------------------------------- 625 625 + // COVERAGE GAP: Export with opacity and rotation 626 626 + // --------------------------------------------------------------------------- 627 627 + 628 628 + describe('exportToSVG with opacity', () => { 629 629 + it('does not include opacity in SVG output (opacity is a canvas-only feature)', () => { 630 630 + // This test documents the current behavior: exportToSVG does NOT render 631 631 + // opacity. If opacity support is added to export, this test should be 632 632 + // updated to verify it works. 633 633 + const state = createWhiteboard(); 634 634 + state.shapes.set('s1', makeShape({ 635 635 + id: 's1', kind: 'rectangle', x: 0, y: 0, opacity: 0.5, 636 636 + })); 637 637 + const svg = exportToSVG(state); 638 638 + // Currently no opacity attribute in export -- this is a coverage gap 639 639 + // export should ideally include opacity="0.5" 640 640 + expect(svg).toContain('<rect'); 641 641 + }); 642 642 + }); 643 643 + 644 644 + describe('exportToSVG with font properties', () => { 645 645 + it('renders text shape with default font', () => { 646 646 + const state = createWhiteboard(); 647 647 + state.shapes.set('t1', makeShape({ 648 648 + id: 't1', kind: 'text', x: 0, y: 0, label: 'Hello', 649 649 + })); 650 650 + const svg = exportToSVG(state); 651 651 + expect(svg).toContain('Hello'); 652 652 + expect(svg).toContain('font-family='); 653 653 + }); 654 654 + }); 655 655 + 656 656 + // --------------------------------------------------------------------------- 657 657 + // COVERAGE GAP: History with all optional shape properties 658 658 + // --------------------------------------------------------------------------- 659 659 + 660 660 + describe('History round-trip with optional shape properties', () => { 661 661 + it('preserves points through undo/redo', () => { 662 662 + const history = new History(); 663 663 + let wb = noSnap(createWhiteboard()); 664 664 + wb = addShape(wb, 'freehand', 0, 0, 100, 100); 665 665 + const id = [...wb.shapes.keys()][0]; 666 666 + const shapes = new Map(wb.shapes); 667 667 + shapes.set(id, { ...shapes.get(id)!, points: [{ x: 0, y: 0 }, { x: 50, y: 50 }] }); 668 668 + wb = { ...wb, shapes }; 669 669 + history.push(wb); 670 670 + 671 671 + const wb2 = addShape(wb, 'rectangle', 200, 200); 672 672 + history.push(wb2); 673 673 + 674 674 + const undone = history.undo()!; 675 675 + expect(undone.shapes.get(id)!.points).toEqual([{ x: 0, y: 0 }, { x: 50, y: 50 }]); 676 676 + }); 677 677 + 678 678 + it('preserves groupId through undo/redo', () => { 679 679 + const history = new History(); 680 680 + let wb = noSnap(createWhiteboard()); 681 681 + wb = addShape(wb, 'rectangle', 0, 0); 682 682 + wb = addShape(wb, 'ellipse', 100, 0); 683 683 + const ids = [...wb.shapes.keys()]; 684 684 + const { state, groupId } = groupShapes(wb, ids); 685 685 + history.push(state); 686 686 + 687 687 + const s2 = addShape(state, 'diamond', 200, 0); 688 688 + history.push(s2); 689 689 + 690 690 + const undone = history.undo()!; 691 691 + expect(undone.shapes.get(ids[0])!.groupId).toBe(groupId); 692 692 + }); 693 693 + 694 694 + it('preserves fontFamily and fontSize through undo/redo', () => { 695 695 + const history = new History(); 696 696 + let wb = noSnap(createWhiteboard()); 697 697 + wb = addShape(wb, 'text', 0, 0, 100, 50, 'Test'); 698 698 + const id = [...wb.shapes.keys()][0]; 699 699 + wb = setShapeFontFamily(wb, [id], 'monospace'); 700 700 + wb = setShapeFontSize(wb, [id], 24); 701 701 + history.push(wb); 702 702 + 703 703 + const wb2 = addShape(wb, 'rectangle', 200, 200); 704 704 + history.push(wb2); 705 705 + 706 706 + const undone = history.undo()!; 707 707 + expect(undone.shapes.get(id)!.fontFamily).toBe('monospace'); 708 708 + expect(undone.shapes.get(id)!.fontSize).toBe(24); 709 709 + }); 710 710 + }); 711 711 + 712 712 + // --------------------------------------------------------------------------- 713 713 + // COVERAGE GAP: hitTestShape edge cases 714 714 + // --------------------------------------------------------------------------- 715 715 + 716 716 + describe('hitTestShape edge cases', () => { 717 717 + it('handles zero-width shape (line)', () => { 718 718 + const shape = makeShape({ id: 's1', kind: 'rectangle', x: 50, y: 50, width: 0, height: 100 }); 719 719 + // Point on the zero-width line 720 720 + expect(hitTestShape(shape, 50, 75)).toBe(true); 721 721 + // Point off the line 722 722 + expect(hitTestShape(shape, 51, 75)).toBe(false); 723 723 + }); 724 724 + 725 725 + it('handles zero-height shape', () => { 726 726 + const shape = makeShape({ id: 's1', kind: 'rectangle', x: 50, y: 50, width: 100, height: 0 }); 727 727 + expect(hitTestShape(shape, 75, 50)).toBe(true); 728 728 + expect(hitTestShape(shape, 75, 51)).toBe(false); 729 729 + }); 730 730 + 731 731 + it('handles zero-dimension shape (point)', () => { 732 732 + const shape = makeShape({ id: 's1', kind: 'rectangle', x: 50, y: 50, width: 0, height: 0 }); 733 733 + expect(hitTestShape(shape, 50, 50)).toBe(true); 734 734 + expect(hitTestShape(shape, 50, 51)).toBe(false); 735 735 + }); 736 736 + }); 737 737 + 738 738 + // --------------------------------------------------------------------------- 739 739 + // COVERAGE GAP: snapPoint edge cases 740 740 + // --------------------------------------------------------------------------- 741 741 + 742 742 + describe('snapPoint edge cases', () => { 743 743 + it('handles grid size of 1 (identity)', () => { 744 744 + expect(snapPoint(13.7, 27.3, 1)).toEqual({ x: 14, y: 27 }); 745 745 + }); 746 746 + 747 747 + it('handles very large grid size', () => { 748 748 + expect(snapPoint(50, 50, 1000)).toEqual({ x: 0, y: 0 }); 749 749 + expect(snapPoint(600, 600, 1000)).toEqual({ x: 1000, y: 1000 }); 750 750 + }); 751 751 + 752 752 + it('handles negative coordinates', () => { 753 753 + expect(snapPoint(-13, -27, 20)).toEqual({ x: -20, y: -20 }); 754 754 + }); 755 755 + }); 756 756 + 757 757 + // --------------------------------------------------------------------------- 758 758 + // BUG: rotateShape produces negative rotation with negative angles 759 759 + // This is arguably a bug -- negative rotation values are semantically 760 760 + // odd and could cause issues in SVG transforms. 761 761 + // --------------------------------------------------------------------------- 762 762 + 763 763 + describe('BUG: rotateShape negative angle produces negative rotation', () => { 764 764 + it('should normalize negative rotation to 0-360 range', () => { 765 765 + let wb = noSnap(createWhiteboard()); 766 766 + wb = addShape(wb, 'rectangle', 0, 0); 767 767 + const id = [...wb.shapes.keys()][0]; 768 768 + wb = rotateShape(wb, id, -45); 769 769 + // JavaScript's % operator returns negative for negative operands: 770 770 + // (-45) % 360 = -45, not 315 771 771 + // This test FAILS because rotateShape returns -45 instead of 315 772 772 + expect(wb.shapes.get(id)!.rotation).toBe(315); 773 773 + }); 774 774 + }); 775 775 + 776 776 + // --------------------------------------------------------------------------- 777 777 + // BUG: Export does not render opacity attribute 778 778 + // --------------------------------------------------------------------------- 779 779 + 780 780 + describe('BUG: exportToSVG should include opacity on shapes', () => { 781 781 + it('should render opacity attribute on shapes with opacity < 1', () => { 782 782 + const state = createWhiteboard(); 783 783 + state.shapes.set('s1', makeShape({ 784 784 + id: 's1', kind: 'rectangle', x: 0, y: 0, opacity: 0.5, 785 785 + })); 786 786 + const svg = exportToSVG(state); 787 787 + // This test FAILS because exportToSVG does not render opacity 788 788 + expect(svg).toContain('opacity="0.5"'); 789 789 + }); 790 790 + }); 791 791 + 792 792 + // --------------------------------------------------------------------------- 793 793 + // BUG: Export does not render custom font properties 794 794 + // --------------------------------------------------------------------------- 795 795 + 796 796 + describe('BUG: exportToSVG should use shape font properties', () => { 797 797 + it('should render shape-specific fontSize in label text', () => { 798 798 + const state = createWhiteboard(); 799 799 + state.shapes.set('s1', makeShape({ 800 800 + id: 's1', kind: 'rectangle', x: 0, y: 0, label: 'Big Text', 801 801 + fontSize: 36, fontFamily: 'monospace', 802 802 + })); 803 803 + const svg = exportToSVG(state); 804 804 + // This test FAILS because export uses DEFAULT_FONT_SIZE (14) and 805 805 + // DEFAULT_FONT_FAMILY (system-ui), ignoring shape.fontSize and shape.fontFamily 806 806 + expect(svg).toContain('font-size="36"'); 807 807 + expect(svg).toContain('font-family="monospace"'); 808 808 + }); 809 809 + }); 810 810 + 811 811 + // --------------------------------------------------------------------------- 812 812 + // BUG: Export line shape viewBox computation uses local points 813 813 + // --------------------------------------------------------------------------- 814 814 + 815 815 + describe('BUG: Export computeBounds should handle line shape points correctly', () => { 816 816 + it('line shape points should not shrink the bounding box', () => { 817 817 + // Line shapes store points in local coords (0-based, relative to shape.x/y) 818 818 + // But computeBounds in export.ts iterates shape.points and uses raw values, 819 819 + // which are local coords like {x:0, y:0} -- these can pull minX/minY toward 0 820 820 + // even when the shape is at a distant position. 821 821 + const state = createWhiteboard(); 822 822 + state.shapes.set('l1', makeShape({ 823 823 + id: 'l1', 824 824 + kind: 'line', 825 825 + x: 500, 826 826 + y: 500, 827 827 + width: 100, 828 828 + height: 80, 829 829 + points: [{ x: 0, y: 0 }, { x: 100, y: 80 }], 830 830 + })); 831 831 + const svg = exportToSVG(state); 832 832 + const match = svg.match(/viewBox="([^"]*)"/); 833 833 + expect(match).not.toBeNull(); 834 834 + const [vx, vy] = match![1].split(' ').map(Number); 835 835 + // ViewBox should start near 500,500 (with padding), NOT near 0,0 836 836 + // This test FAILS because computeBounds uses raw point coords {x:0,y:0} 837 837 + // which pulls minX/minY to 0 838 838 + expect(vx).toBeGreaterThan(400); 839 839 + expect(vy).toBeGreaterThan(400); 840 840 + }); 841 841 + });

+145

tests/diagrams-qa-report.md

reviewed

··· 1 1 + # Diagrams QA Report 2 2 + 3 3 + Date: 2026-04-04 4 4 + Reviewed by: QA Agent 5 5 + 6 6 + ## Critical Bugs (broken functionality) 7 7 + 8 8 + ### BUG-1: Double-click inline text editing is broken -- canvas mousedown intercepts textarea clicks 9 9 + 10 10 + **Symptom:** User double-clicks a shape to edit its text. The textarea appears momentarily, but clicking inside it to type triggers the canvas mousedown handler, which clears selection, starts marquee, calls render(), and destroys the textarea via `layer.innerHTML = ''`. 11 11 + 12 12 + **Root cause:** `src/diagrams/main.ts:902` -- the canvas mousedown handler has NO early return for `editingShapeId`. The textarea at line 834-840 has `keydown` stopPropagation but NO `mousedown` stopPropagation. When the user clicks inside the textarea, the event bubbles to the canvas, enters the select tool path (line 927), calls `shapeAtPoint` which finds the shape or empty space, triggers either drag or marquee, then `render()` at line 997 does `layer.innerHTML = ''` destroying the foreignObject+textarea. 13 13 + 14 14 + **Fix needed:** Add `if (editingShapeId) return;` at the top of the mousedown handler, or add `textarea.addEventListener('mousedown', e => e.stopPropagation())` in startTextEditing. 15 15 + 16 16 + ### BUG-2: Eraser drag-to-erase does not push undo history for subsequent shapes 17 17 + 18 18 + **Symptom:** Dragging the eraser across multiple shapes only records the first deletion in history. Undo only restores the first shape. 19 19 + 20 20 + **Root cause:** `src/diagrams/main.ts:1042-1051` -- the mousemove eraser path calls `removeShape`, `syncToYjs`, and `render` but never calls `pushHistory()`. Only the mousedown handler at line 918 pushes history. 21 21 + 22 22 + **Fix needed:** Track whether history was pushed for the current erase stroke, or batch all erasures. 23 23 + 24 24 + ### BUG-3: Opacity slider changes cannot be undone 25 25 + 26 26 + **Symptom:** Changing opacity via the style panel is not undoable. 27 27 + 28 28 + **Root cause:** `src/diagrams/main.ts:1489-1496` -- the opacity input handler does NOT call `pushHistory()`, unlike every other style panel handler (fill:1462, stroke:1468, strokeWidth:1475, strokeStyle:1483, fontFamily:1499, fontSize:1506). 29 29 + 30 30 + **Fix needed:** Add `pushHistory()` before line 1492. 31 31 + 32 32 + ### BUG-4: Line tool ghost state persists when switching tools mid-draw 33 33 + 34 34 + **Symptom:** Drawing a multi-point line, then pressing a tool key (V, R, etc.) switches tools but leaves `isDrawingLine=true` and `linePoints` populated. The line preview remains on screen. Only Escape properly cleans up. 35 35 + 36 36 + **Root cause:** `src/diagrams/main.ts:1878-1888` -- tool switch keys don't reset active drawing state. 37 37 + 38 38 + **Fix needed:** Add drawing state cleanup before each tool switch. 39 39 + 40 40 + ## Medium Issues (degraded UX) 41 41 + 42 42 + ### MED-1: Style panel and Properties panel overlap visually 43 43 + 44 44 + Both panels use `position: absolute; top: var(--space-sm); right: var(--space-sm)` and render on top of each other when a single shape is selected. 45 45 + 46 46 + **Root cause:** `src/css/app.css:8121-8131` and `src/css/app.css:8244-8255` 47 47 + 48 48 + ### MED-2: Hand tool and Freehand tool share the same icon 49 49 + 50 50 + Users cannot visually distinguish between them in the toolbar. Both use `&#9997;`. 51 51 + 52 52 + **Root cause:** `src/diagrams/index.html:40` and `src/diagrams/index.html:58` 53 53 + 54 54 + ### MED-3: Group and Ungroup buttons share the same icon 55 55 + 56 56 + Both use `&#9744;` (ballot box). 57 57 + 58 58 + **Root cause:** `src/diagrams/index.html:79-80` 59 59 + 60 60 + ### MED-4: Focus mode exit does not restore panel visibility 61 61 + 62 62 + `toggleFocusMode()` hides style/props panels but exiting focus mode doesn't call `render()` to restore them. 63 63 + 64 64 + **Root cause:** `src/diagrams/main.ts:1699-1708` 65 65 + 66 66 + ### MED-5: Double-click pushes two spurious undo history entries 67 67 + 68 68 + Every double-click generates two zero-distance-drag mousedown/mouseup cycles, each pushing a history entry. 69 69 + 70 70 + **Root cause:** `src/diagrams/main.ts:1168-1169` -- no zero-distance-drag check. 71 71 + 72 72 + ### MED-6: Text/Note shapes don't auto-enter edit mode after creation 73 73 + 74 74 + User must double-click after placing a text/note shape to edit its content. 75 75 + 76 76 + **Root cause:** `src/diagrams/main.ts:1191-1218` 77 77 + 78 78 + ### MED-7: Line tool shortcut 'L' missing from shortcuts dialog 79 79 + 80 80 + 'L' activates line tool (line 1883) but is absent from the shortcuts dialog (lines 1750-1781). 81 81 + 82 82 + **Root cause:** `src/diagrams/main.ts:1750-1781` 83 83 + 84 84 + ### MED-8: Shape creation does not auto-switch back to select tool 85 85 + 86 86 + After drawing a shape, the tool remains set to the shape tool. 87 87 + 88 88 + **Root cause:** `src/diagrams/main.ts:1191-1218` 89 89 + 90 90 + ### MED-9: Context menu doesn't close on Escape 91 91 + 92 92 + Pressing Escape resets tools and selection but doesn't close the open context menu. 93 93 + 94 94 + **Root cause:** `src/diagrams/main.ts:1857` -- no `hideContextMenu()` call. 95 95 + 96 96 + ### MED-10: Export viewBox computation for line shapes has offset error 97 97 + 98 98 + Export `computeBounds` iterates `shape.points` using raw local coordinates, but line shapes store points in local space (0-based). The bounds function adds these local coords directly to the shape extent computation, which can produce incorrect viewBox bounds. 99 99 + 100 100 + **Root cause:** `src/diagrams/export.ts:94-102` 101 101 + 102 102 + ## Minor Issues (polish) 103 103 + 104 104 + ### MIN-1: Default canvas-area cursor is crosshair even in select mode 105 105 + 106 106 + `src/css/app.css:8103` sets `cursor: crosshair`. updateCursor overrides on mousemove but initial load shows crosshair. 107 107 + 108 108 + ### MIN-2: Freehand strokes with 1-2 points are silently discarded 109 109 + 110 110 + `src/diagrams/main.ts:1268` requires `freehandPoints.length > 2`. Short strokes vanish with no feedback. 111 111 + 112 112 + ### MIN-3: Grid pattern doesn't respond to pan/zoom 113 113 + 114 114 + Static SVG pattern at `src/diagrams/index.html:107-109` doesn't track viewport transform. 115 115 + 116 116 + ### MIN-4: Arrow marker color mismatch between canvas and export 117 117 + 118 118 + Canvas: `var(--color-text)` (line 459). Export: `#000000` (export.ts:272). Dark theme arrows look different in export. 119 119 + 120 120 + ### MIN-5: No user feedback when crypto initialization fails 121 121 + 122 122 + `src/diagrams/main.ts:228` silently catches failures. No indication that E2EE is inactive. 123 123 + 124 124 + ## Missing Test Coverage 125 125 + 126 126 + ### Functions with zero test coverage 127 127 + 128 128 + 1. **groupShapes / ungroupShapes / getGroupMembers** -- core grouping 129 129 + 2. **rotateShape / setShapeRotation** -- rotation 130 130 + 3. **setShapeStyle** -- style management 131 131 + 4. **setShapeOpacity** -- opacity clamping 132 132 + 5. **setShapeFontFamily / setShapeFontSize** -- font properties 133 133 + 6. **duplicateShapes** -- copy/paste/alt-drag foundation 134 134 + 7. **Export of**: triangle, star, hexagon, cloud, cylinder, parallelogram, note, line shapes 135 135 + 8. **applyResize** for NE, SW, S, W handles 136 136 + 137 137 + ### Edge cases not tested 138 138 + 139 139 + 1. duplicateShapes preserving points, style, opacity, rotation, font 140 140 + 2. duplicateShapes arrow duplication between copies 141 141 + 3. rotateShape with negative angles, accumulation past 360 142 142 + 4. setShapeOpacity at boundary values (0, 1, negative, >1) 143 143 + 5. groupShapes with fewer than 2 shapes 144 144 + 6. hitTestShape with zero-dimension shapes 145 145 + 7. History round-trip for shapes with optional properties