+7

src/diagrams/history.ts

reviewed

··· 1 1 /** 2 2 * Undo/redo history for the diagrams whiteboard. 3 3 * 4 4 + * @deprecated Use {@link OperationHistory} from `./operation-history.ts` instead. 5 5 + * This snapshot-based approach overwrites the entire WhiteboardState on undo, 6 6 + * which breaks collaborative editing by erasing other users' concurrent changes. 7 7 + * The new operation-based history only reverses the local user's own operations. 8 8 + * 9 9 + * This class is kept for backward compatibility while main.ts is migrated. 10 10 + * 4 11 * Stores deep-cloned snapshots of WhiteboardState via structuredClone. 5 12 * structuredClone natively handles Maps, preserves undefined values, 6 13 * and correctly clones nested objects — avoiding the data-loss edge cases

+513

src/diagrams/operation-history.ts

reviewed

··· 1 1 + /** 2 2 + * Operation-based undo/redo history for the diagrams whiteboard. 3 3 + * 4 4 + * Replaces the snapshot-based History class with an operation log that tracks 5 5 + * individual user actions and their inverses. This enables collaborative undo: 6 6 + * each client only undoes its own operations without overwriting remote changes. 7 7 + * 8 8 + * ## Integration guide (for main.ts — not yet wired) 9 9 + * 10 10 + * To integrate this module into the live editor: 11 11 + * 12 12 + * 1. Replace `history.push(wb)` calls with: 13 13 + * ```ts 14 14 + * const op = createOperation('move_shape', beforeState, afterState, shapeId); 15 15 + * operationHistory.push(op); 16 16 + * ``` 17 17 + * 18 18 + * 2. Replace `history.undo()` / `history.redo()` with: 19 19 + * ```ts 20 20 + * const inv = operationHistory.undo(); 21 21 + * if (inv) wb = applyOperation(wb, inv); 22 22 + * ``` 23 23 + * 24 24 + * 3. Sync operations via a Yjs Y.Array instead of full state snapshots: 25 25 + * ```ts 26 26 + * const yOps = ydoc.getArray<Operation>('ops'); 27 27 + * // On local push: 28 28 + * yOps.push([op]); 29 29 + * // On remote observe: 30 30 + * yOps.observe(e => { 31 31 + * const added = e.changes.added; 32 32 + * // loadOps merges and deduplicates 33 33 + * operationHistory.loadOps([...added]); 34 34 + * for (const remoteOp of added) wb = applyOperation(wb, remoteOp); 35 35 + * }); 36 36 + * ``` 37 37 + * 38 38 + * 4. The old History class (history.ts) remains functional for backward 39 39 + * compatibility but should be considered deprecated. 40 40 + */ 41 41 + 42 42 + import type { WhiteboardState, Shape, Arrow } from './whiteboard-types.js'; 43 43 + 44 44 + // --------------------------------------------------------------------------- 45 45 + // Types 46 46 + // --------------------------------------------------------------------------- 47 47 + 48 48 + export type OpType = 49 49 + | 'add_shape' | 'remove_shape' | 'move_shape' | 'resize_shape' 50 50 + | 'set_label' | 'set_style' | 'set_opacity' | 'rotate_shape' 51 51 + | 'add_arrow' | 'remove_arrow' 52 52 + | 'group' | 'ungroup'; 53 53 + 54 54 + export interface Operation { 55 55 + id: string; 56 56 + type: OpType; 57 57 + data: Record<string, unknown>; 58 58 + inverse: Record<string, unknown>; 59 59 + timestamp: number; 60 60 + clientId: string; 61 61 + } 62 62 + 63 63 + /** 64 64 + * Maps operation types to their inverse types. Most ops are self-inverse 65 65 + * (move undoes with a move to the old position). Add/remove are swapped. 66 66 + */ 67 67 + const INVERSE_TYPE: Record<OpType, OpType> = { 68 68 + add_shape: 'remove_shape', 69 69 + remove_shape: 'add_shape', 70 70 + move_shape: 'move_shape', 71 71 + resize_shape: 'resize_shape', 72 72 + set_label: 'set_label', 73 73 + set_style: 'set_style', 74 74 + set_opacity: 'set_opacity', 75 75 + rotate_shape: 'rotate_shape', 76 76 + add_arrow: 'remove_arrow', 77 77 + remove_arrow: 'add_arrow', 78 78 + group: 'ungroup', 79 79 + ungroup: 'group', 80 80 + }; 81 81 + 82 82 + // --------------------------------------------------------------------------- 83 83 + // ID generation 84 84 + // --------------------------------------------------------------------------- 85 85 + 86 86 + let _opCounter = 0; 87 87 + 88 88 + function generateOpId(): string { 89 89 + return `op-${Date.now()}-${++_opCounter}`; 90 90 + } 91 91 + 92 92 + function generateClientId(): string { 93 93 + return `client-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`; 94 94 + } 95 95 + 96 96 + // --------------------------------------------------------------------------- 97 97 + // OperationHistory 98 98 + // --------------------------------------------------------------------------- 99 99 + 100 100 + /** 101 101 + * Operation-based undo/redo stack with per-client filtering. 102 102 + * 103 103 + * Operations are pushed as they happen. Undo walks backward through the 104 104 + * caller's own operations (skipping remote ones), returning an inverse 105 105 + * operation that the caller applies to the current state. Redo re-applies 106 106 + * the original operation. 107 107 + */ 108 108 + export class OperationHistory { 109 109 + private ops: Operation[] = []; 110 110 + private undoneIds: Set<string> = new Set(); 111 111 + private readonly clientId: string; 112 112 + 113 113 + constructor(clientId?: string) { 114 114 + this.clientId = clientId ?? generateClientId(); 115 115 + } 116 116 + 117 117 + /** 118 118 + * Record a new operation. Returns the full Operation with id/timestamp/clientId 119 119 + * filled in. Clears any redo state for this client (push-after-undo branching). 120 120 + */ 121 121 + push( 122 122 + partial: Omit<Operation, 'id' | 'timestamp' | 'clientId'> | Operation, 123 123 + ): Operation { 124 124 + // Clear redo: remove undone entries that belong to this client and sit 125 125 + // after the last non-undone entry for this client. 126 126 + this.clearRedoForClient(); 127 127 + 128 128 + const op: Operation = { 129 129 + id: ('id' in partial && partial.id) ? partial.id : generateOpId(), 130 130 + type: partial.type, 131 131 + data: partial.data, 132 132 + inverse: partial.inverse, 133 133 + timestamp: ('timestamp' in partial && partial.timestamp) ? partial.timestamp : Date.now(), 134 134 + clientId: ('clientId' in partial && partial.clientId) ? partial.clientId : this.clientId, 135 135 + }; 136 136 + this.ops.push(op); 137 137 + this.undoneIds.delete(op.id); 138 138 + return op; 139 139 + } 140 140 + 141 141 + /** 142 142 + * Undo the most recent non-undone operation belonging to this client. 143 143 + * Returns an Operation whose `data` contains the inverse payload 144 144 + * (ready to pass to `applyOperation`), or null if nothing to undo. 145 145 + */ 146 146 + undo(): Operation | null { 147 147 + for (let i = this.ops.length - 1; i >= 0; i--) { 148 148 + const op = this.ops[i]!; 149 149 + if (op.clientId !== this.clientId) continue; 150 150 + if (this.undoneIds.has(op.id)) continue; 151 151 + 152 152 + this.undoneIds.add(op.id); 153 153 + // Return an operation with the inverse type and swapped data 154 154 + return { 155 155 + id: generateOpId(), 156 156 + type: INVERSE_TYPE[op.type], 157 157 + data: op.inverse, 158 158 + inverse: op.data, 159 159 + timestamp: Date.now(), 160 160 + clientId: this.clientId, 161 161 + }; 162 162 + } 163 163 + return null; 164 164 + } 165 165 + 166 166 + /** 167 167 + * Redo the most recently undone operation belonging to this client. 168 168 + * Returns the original operation (ready to pass to `applyOperation`), 169 169 + * or null if nothing to redo. 170 170 + */ 171 171 + redo(): Operation | null { 172 172 + for (let i = 0; i < this.ops.length; i++) { 173 173 + const op = this.ops[i]!; 174 174 + if (op.clientId !== this.clientId) continue; 175 175 + if (!this.undoneIds.has(op.id)) continue; 176 176 + 177 177 + // Check this is the *earliest* undone op for this client 178 178 + // (redo goes forward from the undo cursor) 179 179 + let isEarliest = true; 180 180 + for (let j = 0; j < i; j++) { 181 181 + const earlier = this.ops[j]!; 182 182 + if (earlier.clientId === this.clientId && this.undoneIds.has(earlier.id)) { 183 183 + isEarliest = false; 184 184 + break; 185 185 + } 186 186 + } 187 187 + if (!isEarliest) continue; 188 188 + 189 189 + this.undoneIds.delete(op.id); 190 190 + return { 191 191 + id: generateOpId(), 192 192 + type: op.type, 193 193 + data: op.data, 194 194 + inverse: op.inverse, 195 195 + timestamp: Date.now(), 196 196 + clientId: this.clientId, 197 197 + }; 198 198 + } 199 199 + return null; 200 200 + } 201 201 + 202 202 + canUndo(): boolean { 203 203 + for (let i = this.ops.length - 1; i >= 0; i--) { 204 204 + const op = this.ops[i]!; 205 205 + if (op.clientId === this.clientId && !this.undoneIds.has(op.id)) return true; 206 206 + } 207 207 + return false; 208 208 + } 209 209 + 210 210 + canRedo(): boolean { 211 211 + for (const op of this.ops) { 212 212 + if (op.clientId === this.clientId && this.undoneIds.has(op.id)) return true; 213 213 + } 214 214 + return false; 215 215 + } 216 216 + 217 217 + /** Get all operations in the log (for Yjs sync). */ 218 218 + getOps(): Operation[] { 219 219 + return [...this.ops]; 220 220 + } 221 221 + 222 222 + /** 223 223 + * Merge remote operations into the local log. Deduplicates by id. 224 224 + * Remote ops are appended but will be skipped by undo/redo (wrong clientId). 225 225 + */ 226 226 + loadOps(ops: Operation[]): void { 227 227 + const existing = new Set(this.ops.map((o) => o.id)); 228 228 + for (const op of ops) { 229 229 + if (!existing.has(op.id)) { 230 230 + this.ops.push(op); 231 231 + existing.add(op.id); 232 232 + } 233 233 + } 234 234 + } 235 235 + 236 236 + /** 237 237 + * When a new operation is pushed, discard redo entries for this client. 238 238 + * This mimics the branch-on-push semantics of the old snapshot History. 239 239 + */ 240 240 + private clearRedoForClient(): void { 241 241 + const toRemove: string[] = []; 242 242 + for (const op of this.ops) { 243 243 + if (op.clientId === this.clientId && this.undoneIds.has(op.id)) { 244 244 + toRemove.push(op.id); 245 245 + } 246 246 + } 247 247 + if (toRemove.length === 0) return; 248 248 + const removeSet = new Set(toRemove); 249 249 + this.ops = this.ops.filter((op) => !removeSet.has(op.id)); 250 250 + for (const id of toRemove) this.undoneIds.delete(id); 251 251 + } 252 252 + } 253 253 + 254 254 + // --------------------------------------------------------------------------- 255 255 + // applyOperation — single dispatch point for all op types 256 256 + // --------------------------------------------------------------------------- 257 257 + 258 258 + /** 259 259 + * Apply an operation to a WhiteboardState, returning the new state. 260 260 + * This is a pure function — it never mutates the input. 261 261 + */ 262 262 + export function applyOperation( 263 263 + state: WhiteboardState, 264 264 + op: Operation, 265 265 + ): WhiteboardState { 266 266 + const d = op.data; 267 267 + 268 268 + switch (op.type) { 269 269 + case 'add_shape': { 270 270 + const shape = d.shape as Shape; 271 271 + const shapeId = (d.shapeId as string) ?? shape.id; 272 272 + const shapes = new Map(state.shapes); 273 273 + shapes.set(shapeId, shape); 274 274 + return { ...state, shapes }; 275 275 + } 276 276 + 277 277 + case 'remove_shape': { 278 278 + const shapeId = d.shapeId as string; 279 279 + if (!state.shapes.has(shapeId)) return state; 280 280 + const shapes = new Map(state.shapes); 281 281 + shapes.delete(shapeId); 282 282 + // Also remove connected arrows 283 283 + const arrows = new Map(state.arrows); 284 284 + for (const [aid, arrow] of arrows) { 285 285 + const fromConnected = 'shapeId' in arrow.from && (arrow.from as { shapeId: string }).shapeId === shapeId; 286 286 + const toConnected = 'shapeId' in arrow.to && (arrow.to as { shapeId: string }).shapeId === shapeId; 287 287 + if (fromConnected || toConnected) arrows.delete(aid); 288 288 + } 289 289 + return { ...state, shapes, arrows }; 290 290 + } 291 291 + 292 292 + case 'move_shape': { 293 293 + const shapeId = d.shapeId as string; 294 294 + const shape = state.shapes.get(shapeId); 295 295 + if (!shape) return state; 296 296 + const shapes = new Map(state.shapes); 297 297 + shapes.set(shapeId, { ...shape, x: d.x as number, y: d.y as number }); 298 298 + return { ...state, shapes }; 299 299 + } 300 300 + 301 301 + case 'resize_shape': { 302 302 + const shapeId = d.shapeId as string; 303 303 + const shape = state.shapes.get(shapeId); 304 304 + if (!shape) return state; 305 305 + const shapes = new Map(state.shapes); 306 306 + shapes.set(shapeId, { ...shape, width: d.width as number, height: d.height as number }); 307 307 + return { ...state, shapes }; 308 308 + } 309 309 + 310 310 + case 'set_label': { 311 311 + const shapeId = d.shapeId as string; 312 312 + const shape = state.shapes.get(shapeId); 313 313 + if (!shape) return state; 314 314 + const shapes = new Map(state.shapes); 315 315 + shapes.set(shapeId, { ...shape, label: d.label as string }); 316 316 + return { ...state, shapes }; 317 317 + } 318 318 + 319 319 + case 'set_style': { 320 320 + const shapeId = d.shapeId as string; 321 321 + const shape = state.shapes.get(shapeId); 322 322 + if (!shape) return state; 323 323 + const shapes = new Map(state.shapes); 324 324 + shapes.set(shapeId, { ...shape, style: d.style as Record<string, string> }); 325 325 + return { ...state, shapes }; 326 326 + } 327 327 + 328 328 + case 'set_opacity': { 329 329 + const shapeId = d.shapeId as string; 330 330 + const shape = state.shapes.get(shapeId); 331 331 + if (!shape) return state; 332 332 + const shapes = new Map(state.shapes); 333 333 + shapes.set(shapeId, { ...shape, opacity: d.opacity as number }); 334 334 + return { ...state, shapes }; 335 335 + } 336 336 + 337 337 + case 'rotate_shape': { 338 338 + const shapeId = d.shapeId as string; 339 339 + const shape = state.shapes.get(shapeId); 340 340 + if (!shape) return state; 341 341 + const shapes = new Map(state.shapes); 342 342 + shapes.set(shapeId, { ...shape, rotation: d.rotation as number }); 343 343 + return { ...state, shapes }; 344 344 + } 345 345 + 346 346 + case 'add_arrow': { 347 347 + const arrow = d.arrow as Arrow; 348 348 + const arrowId = (d.arrowId as string) ?? arrow.id; 349 349 + const arrows = new Map(state.arrows); 350 350 + arrows.set(arrowId, arrow); 351 351 + return { ...state, arrows }; 352 352 + } 353 353 + 354 354 + case 'remove_arrow': { 355 355 + const arrowId = d.arrowId as string; 356 356 + if (!state.arrows.has(arrowId)) return state; 357 357 + const arrows = new Map(state.arrows); 358 358 + arrows.delete(arrowId); 359 359 + return { ...state, arrows }; 360 360 + } 361 361 + 362 362 + case 'group': { 363 363 + const groupId = d.groupId as string; 364 364 + const shapeIds = d.shapeIds as string[]; 365 365 + const shapes = new Map(state.shapes); 366 366 + for (const id of shapeIds) { 367 367 + const shape = shapes.get(id); 368 368 + if (shape) shapes.set(id, { ...shape, groupId }); 369 369 + } 370 370 + return { ...state, shapes }; 371 371 + } 372 372 + 373 373 + case 'ungroup': { 374 374 + const shapeIds = d.shapeIds as string[]; 375 375 + const shapes = new Map(state.shapes); 376 376 + for (const id of shapeIds) { 377 377 + const shape = shapes.get(id); 378 378 + if (shape) shapes.set(id, { ...shape, groupId: undefined }); 379 379 + } 380 380 + return { ...state, shapes }; 381 381 + } 382 382 + 383 383 + default: 384 384 + return state; 385 385 + } 386 386 + } 387 387 + 388 388 + // --------------------------------------------------------------------------- 389 389 + // createOperation — build operations from before/after state diffs 390 390 + // --------------------------------------------------------------------------- 391 391 + 392 392 + /** 393 393 + * Create an operation by comparing before and after WhiteboardState. 394 394 + * 395 395 + * @param type The operation type. 396 396 + * @param before State before the change. 397 397 + * @param after State after the change. 398 398 + * @param entityId The shape or arrow ID involved. 399 399 + * @returns An operation partial (without id/timestamp/clientId — pass to push()). 400 400 + */ 401 401 + export function createOperation( 402 402 + type: OpType, 403 403 + before: WhiteboardState, 404 404 + after: WhiteboardState, 405 405 + entityId: string, 406 406 + ): Omit<Operation, 'id' | 'timestamp' | 'clientId'> { 407 407 + switch (type) { 408 408 + case 'add_shape': { 409 409 + const shape = after.shapes.get(entityId)!; 410 410 + return { 411 411 + type, 412 412 + data: { shapeId: entityId, shape }, 413 413 + inverse: { shapeId: entityId }, 414 414 + }; 415 415 + } 416 416 + 417 417 + case 'remove_shape': { 418 418 + const shape = before.shapes.get(entityId)!; 419 419 + return { 420 420 + type, 421 421 + data: { shapeId: entityId }, 422 422 + inverse: { shapeId: entityId, shape }, 423 423 + }; 424 424 + } 425 425 + 426 426 + case 'move_shape': { 427 427 + const beforeShape = before.shapes.get(entityId)!; 428 428 + const afterShape = after.shapes.get(entityId)!; 429 429 + return { 430 430 + type, 431 431 + data: { shapeId: entityId, x: afterShape.x, y: afterShape.y }, 432 432 + inverse: { shapeId: entityId, x: beforeShape.x, y: beforeShape.y }, 433 433 + }; 434 434 + } 435 435 + 436 436 + case 'resize_shape': { 437 437 + const beforeShape = before.shapes.get(entityId)!; 438 438 + const afterShape = after.shapes.get(entityId)!; 439 439 + return { 440 440 + type, 441 441 + data: { shapeId: entityId, width: afterShape.width, height: afterShape.height }, 442 442 + inverse: { shapeId: entityId, width: beforeShape.width, height: beforeShape.height }, 443 443 + }; 444 444 + } 445 445 + 446 446 + case 'set_label': { 447 447 + const beforeShape = before.shapes.get(entityId)!; 448 448 + const afterShape = after.shapes.get(entityId)!; 449 449 + return { 450 450 + type, 451 451 + data: { shapeId: entityId, label: afterShape.label }, 452 452 + inverse: { shapeId: entityId, label: beforeShape.label }, 453 453 + }; 454 454 + } 455 455 + 456 456 + case 'set_style': { 457 457 + const beforeShape = before.shapes.get(entityId)!; 458 458 + const afterShape = after.shapes.get(entityId)!; 459 459 + return { 460 460 + type, 461 461 + data: { shapeId: entityId, style: { ...afterShape.style } }, 462 462 + inverse: { shapeId: entityId, style: { ...beforeShape.style } }, 463 463 + }; 464 464 + } 465 465 + 466 466 + case 'set_opacity': { 467 467 + const beforeShape = before.shapes.get(entityId)!; 468 468 + const afterShape = after.shapes.get(entityId)!; 469 469 + return { 470 470 + type, 471 471 + data: { shapeId: entityId, opacity: afterShape.opacity }, 472 472 + inverse: { shapeId: entityId, opacity: beforeShape.opacity }, 473 473 + }; 474 474 + } 475 475 + 476 476 + case 'rotate_shape': { 477 477 + const beforeShape = before.shapes.get(entityId)!; 478 478 + const afterShape = after.shapes.get(entityId)!; 479 479 + return { 480 480 + type, 481 481 + data: { shapeId: entityId, rotation: afterShape.rotation }, 482 482 + inverse: { shapeId: entityId, rotation: beforeShape.rotation }, 483 483 + }; 484 484 + } 485 485 + 486 486 + case 'add_arrow': { 487 487 + const arrow = after.arrows.get(entityId)!; 488 488 + return { 489 489 + type, 490 490 + data: { arrowId: entityId, arrow }, 491 491 + inverse: { arrowId: entityId }, 492 492 + }; 493 493 + } 494 494 + 495 495 + case 'remove_arrow': { 496 496 + const arrow = before.arrows.get(entityId)!; 497 497 + return { 498 498 + type, 499 499 + data: { arrowId: entityId }, 500 500 + inverse: { arrowId: entityId, arrow }, 501 501 + }; 502 502 + } 503 503 + 504 504 + case 'group': 505 505 + case 'ungroup': 506 506 + // Group/ungroup ops are typically constructed directly, not from diffs. 507 507 + // This fallback returns empty payloads — callers should build these manually. 508 508 + return { type, data: {}, inverse: {} }; 509 509 + 510 510 + default: 511 511 + return { type, data: {}, inverse: {} }; 512 512 + } 513 513 + }

+746

tests/operation-history.test.ts

reviewed

··· 1 1 + import { describe, it, expect, beforeEach } from 'vitest'; 2 2 + import { 3 3 + OperationHistory, 4 4 + applyOperation, 5 5 + createOperation, 6 6 + } from '../src/diagrams/operation-history'; 7 7 + import type { Operation, OpType } from '../src/diagrams/operation-history'; 8 8 + import { 9 9 + createWhiteboard, 10 10 + addShape, 11 11 + moveShape, 12 12 + resizeShape, 13 13 + setShapeLabel, 14 14 + addArrow, 15 15 + removeArrow, 16 16 + removeShape, 17 17 + } from '../src/diagrams/whiteboard'; 18 18 + import { 19 19 + rotateShape, 20 20 + setShapeStyle, 21 21 + setShapeOpacity, 22 22 + } from '../src/diagrams/whiteboard-transforms'; 23 23 + import type { WhiteboardState, Shape, Arrow } from '../src/diagrams/whiteboard'; 24 24 + 25 25 + // --------------------------------------------------------------------------- 26 26 + // Helpers 27 27 + // --------------------------------------------------------------------------- 28 28 + 29 29 + /** Create a whiteboard with snap-to-grid disabled for predictable coordinates. */ 30 30 + function noSnapBoard(): WhiteboardState { 31 31 + const wb = createWhiteboard(); 32 32 + return { ...wb, snapToGrid: false }; 33 33 + } 34 34 + 35 35 + /** Add a shape and return both the new state and the shape. */ 36 36 + function addTestShape( 37 37 + state: WhiteboardState, 38 38 + kind: Shape['kind'] = 'rectangle', 39 39 + x = 0, 40 40 + y = 0, 41 41 + ): { state: WhiteboardState; shape: Shape } { 42 42 + const next = addShape(state, kind, x, y); 43 43 + const shape = [...next.shapes.values()].find((s) => !state.shapes.has(s.id))!; 44 44 + return { state: next, shape }; 45 45 + } 46 46 + 47 47 + /** Add an arrow and return both the new state and the arrow. */ 48 48 + function addTestArrow( 49 49 + state: WhiteboardState, 50 50 + fromShapeId: string, 51 51 + toShapeId: string, 52 52 + ): { state: WhiteboardState; arrow: Arrow } { 53 53 + const next = addArrow( 54 54 + state, 55 55 + { shapeId: fromShapeId, anchor: 'right' }, 56 56 + { shapeId: toShapeId, anchor: 'left' }, 57 57 + 'test-arrow', 58 58 + ); 59 59 + const arrow = [...next.arrows.values()].find((a) => !state.arrows.has(a.id))!; 60 60 + return { state: next, arrow }; 61 61 + } 62 62 + 63 63 + // --------------------------------------------------------------------------- 64 64 + // OperationHistory — core stack behavior 65 65 + // --------------------------------------------------------------------------- 66 66 + 67 67 + describe('OperationHistory', () => { 68 68 + let history: OperationHistory; 69 69 + 70 70 + beforeEach(() => { 71 71 + history = new OperationHistory('client-1'); 72 72 + }); 73 73 + 74 74 + describe('push', () => { 75 75 + it('returns an Operation with id, timestamp, and clientId', () => { 76 76 + const op = history.push({ 77 77 + type: 'add_shape', 78 78 + data: { shapeId: 's1', shape: {} }, 79 79 + inverse: { shapeId: 's1' }, 80 80 + }); 81 81 + expect(op.id).toBeTruthy(); 82 82 + expect(op.timestamp).toBeGreaterThan(0); 83 83 + expect(op.clientId).toBe('client-1'); 84 84 + }); 85 85 + 86 86 + it('generates unique ids for each operation', () => { 87 87 + const a = history.push({ type: 'add_shape', data: {}, inverse: {} }); 88 88 + const b = history.push({ type: 'add_shape', data: {}, inverse: {} }); 89 89 + expect(a.id).not.toBe(b.id); 90 90 + }); 91 91 + }); 92 92 + 93 93 + describe('undo', () => { 94 94 + it('returns null on empty history', () => { 95 95 + expect(history.undo()).toBeNull(); 96 96 + }); 97 97 + 98 98 + it('returns the inverse operation for the most recent push', () => { 99 99 + history.push({ 100 100 + type: 'move_shape', 101 101 + data: { shapeId: 's1', x: 100, y: 200 }, 102 102 + inverse: { shapeId: 's1', x: 0, y: 0 }, 103 103 + }); 104 104 + const inv = history.undo(); 105 105 + expect(inv).not.toBeNull(); 106 106 + expect(inv!.type).toBe('move_shape'); 107 107 + expect(inv!.data).toEqual({ shapeId: 's1', x: 0, y: 0 }); 108 108 + }); 109 109 + 110 110 + it('returns null when all operations are already undone', () => { 111 111 + history.push({ type: 'add_shape', data: {}, inverse: {} }); 112 112 + history.undo(); 113 113 + expect(history.undo()).toBeNull(); 114 114 + }); 115 115 + 116 116 + it('undoes operations in LIFO order', () => { 117 117 + history.push({ 118 118 + type: 'move_shape', 119 119 + data: { shapeId: 's1', x: 10, y: 10 }, 120 120 + inverse: { shapeId: 's1', x: 0, y: 0 }, 121 121 + }); 122 122 + history.push({ 123 123 + type: 'move_shape', 124 124 + data: { shapeId: 's1', x: 20, y: 20 }, 125 125 + inverse: { shapeId: 's1', x: 10, y: 10 }, 126 126 + }); 127 127 + 128 128 + const inv1 = history.undo()!; 129 129 + expect(inv1.data).toEqual({ shapeId: 's1', x: 10, y: 10 }); 130 130 + 131 131 + const inv2 = history.undo()!; 132 132 + expect(inv2.data).toEqual({ shapeId: 's1', x: 0, y: 0 }); 133 133 + }); 134 134 + }); 135 135 + 136 136 + describe('redo', () => { 137 137 + it('returns null with no undone operations', () => { 138 138 + history.push({ type: 'add_shape', data: {}, inverse: {} }); 139 139 + expect(history.redo()).toBeNull(); 140 140 + }); 141 141 + 142 142 + it('returns null on empty history', () => { 143 143 + expect(history.redo()).toBeNull(); 144 144 + }); 145 145 + 146 146 + it('re-applies the original operation after undo', () => { 147 147 + history.push({ 148 148 + type: 'move_shape', 149 149 + data: { shapeId: 's1', x: 100, y: 200 }, 150 150 + inverse: { shapeId: 's1', x: 0, y: 0 }, 151 151 + }); 152 152 + history.undo(); 153 153 + const redo = history.redo(); 154 154 + expect(redo).not.toBeNull(); 155 155 + expect(redo!.type).toBe('move_shape'); 156 156 + expect(redo!.data).toEqual({ shapeId: 's1', x: 100, y: 200 }); 157 157 + }); 158 158 + 159 159 + it('supports multiple undo then redo in sequence', () => { 160 160 + history.push({ type: 'add_shape', data: { n: 1 }, inverse: { n: 1 } }); 161 161 + history.push({ type: 'add_shape', data: { n: 2 }, inverse: { n: 2 } }); 162 162 + history.push({ type: 'add_shape', data: { n: 3 }, inverse: { n: 3 } }); 163 163 + 164 164 + history.undo(); 165 165 + history.undo(); 166 166 + 167 167 + const r1 = history.redo()!; 168 168 + expect(r1.data).toEqual({ n: 2 }); 169 169 + const r2 = history.redo()!; 170 170 + expect(r2.data).toEqual({ n: 3 }); 171 171 + expect(history.redo()).toBeNull(); 172 172 + }); 173 173 + }); 174 174 + 175 175 + describe('push after undo clears redo stack', () => { 176 176 + it('discards redo entries when a new operation is pushed', () => { 177 177 + history.push({ type: 'add_shape', data: { n: 1 }, inverse: {} }); 178 178 + history.push({ type: 'add_shape', data: { n: 2 }, inverse: {} }); 179 179 + history.undo(); 180 180 + expect(history.canRedo()).toBe(true); 181 181 + 182 182 + history.push({ type: 'add_shape', data: { n: 3 }, inverse: {} }); 183 183 + expect(history.canRedo()).toBe(false); 184 184 + expect(history.redo()).toBeNull(); 185 185 + }); 186 186 + }); 187 187 + 188 188 + describe('canUndo / canRedo', () => { 189 189 + it('both false on empty history', () => { 190 190 + expect(history.canUndo()).toBe(false); 191 191 + expect(history.canRedo()).toBe(false); 192 192 + }); 193 193 + 194 194 + it('canUndo true after push, canRedo false', () => { 195 195 + history.push({ type: 'add_shape', data: {}, inverse: {} }); 196 196 + expect(history.canUndo()).toBe(true); 197 197 + expect(history.canRedo()).toBe(false); 198 198 + }); 199 199 + 200 200 + it('canUndo false and canRedo true after undoing the only operation', () => { 201 201 + history.push({ type: 'add_shape', data: {}, inverse: {} }); 202 202 + history.undo(); 203 203 + expect(history.canUndo()).toBe(false); 204 204 + expect(history.canRedo()).toBe(true); 205 205 + }); 206 206 + 207 207 + it('both true when in the middle of the stack', () => { 208 208 + history.push({ type: 'add_shape', data: {}, inverse: {} }); 209 209 + history.push({ type: 'add_shape', data: {}, inverse: {} }); 210 210 + history.undo(); 211 211 + expect(history.canUndo()).toBe(true); 212 212 + expect(history.canRedo()).toBe(true); 213 213 + }); 214 214 + }); 215 215 + 216 216 + describe('client ID filtering', () => { 217 217 + it('only undoes operations from the same client', () => { 218 218 + const h = new OperationHistory('client-A'); 219 219 + 220 220 + h.push({ 221 221 + type: 'move_shape', 222 222 + data: { shapeId: 's1', x: 10, y: 10 }, 223 223 + inverse: { shapeId: 's1', x: 0, y: 0 }, 224 224 + }); 225 225 + 226 226 + const remoteOp: Operation = { 227 227 + id: 'remote-1', 228 228 + type: 'move_shape', 229 229 + data: { shapeId: 's2', x: 50, y: 50 }, 230 230 + inverse: { shapeId: 's2', x: 0, y: 0 }, 231 231 + timestamp: Date.now(), 232 232 + clientId: 'client-B', 233 233 + }; 234 234 + h.loadOps([remoteOp]); 235 235 + 236 236 + const inv = h.undo(); 237 237 + expect(inv).not.toBeNull(); 238 238 + expect(inv!.data).toEqual({ shapeId: 's1', x: 0, y: 0 }); 239 239 + }); 240 240 + 241 241 + it('returns null when only remote operations remain', () => { 242 242 + const h = new OperationHistory('client-A'); 243 243 + const remoteOp: Operation = { 244 244 + id: 'remote-1', 245 245 + type: 'add_shape', 246 246 + data: {}, 247 247 + inverse: {}, 248 248 + timestamp: Date.now(), 249 249 + clientId: 'client-B', 250 250 + }; 251 251 + h.loadOps([remoteOp]); 252 252 + expect(h.undo()).toBeNull(); 253 253 + }); 254 254 + }); 255 255 + 256 256 + describe('getOps / loadOps', () => { 257 257 + it('getOps returns all pushed operations', () => { 258 258 + history.push({ type: 'add_shape', data: { n: 1 }, inverse: {} }); 259 259 + history.push({ type: 'add_shape', data: { n: 2 }, inverse: {} }); 260 260 + const ops = history.getOps(); 261 261 + expect(ops).toHaveLength(2); 262 262 + expect(ops[0]!.data).toEqual({ n: 1 }); 263 263 + expect(ops[1]!.data).toEqual({ n: 2 }); 264 264 + }); 265 265 + 266 266 + it('loadOps merges remote operations into the log', () => { 267 267 + history.push({ type: 'add_shape', data: { n: 1 }, inverse: {} }); 268 268 + const remoteOps: Operation[] = [ 269 269 + { 270 270 + id: 'r1', 271 271 + type: 'move_shape', 272 272 + data: { n: 99 }, 273 273 + inverse: {}, 274 274 + timestamp: Date.now(), 275 275 + clientId: 'other', 276 276 + }, 277 277 + ]; 278 278 + history.loadOps(remoteOps); 279 279 + const all = history.getOps(); 280 280 + expect(all).toHaveLength(2); 281 281 + }); 282 282 + 283 283 + it('loadOps deduplicates by id', () => { 284 284 + const op = history.push({ type: 'add_shape', data: {}, inverse: {} }); 285 285 + history.loadOps([op]); 286 286 + expect(history.getOps()).toHaveLength(1); 287 287 + }); 288 288 + }); 289 289 + 290 290 + describe('generates a clientId when none provided', () => { 291 291 + it('auto-generates a non-empty clientId', () => { 292 292 + const h = new OperationHistory(); 293 293 + const op = h.push({ type: 'add_shape', data: {}, inverse: {} }); 294 294 + expect(op.clientId).toBeTruthy(); 295 295 + expect(op.clientId.length).toBeGreaterThan(0); 296 296 + }); 297 297 + }); 298 298 + }); 299 299 + 300 300 + // --------------------------------------------------------------------------- 301 301 + // applyOperation — every OpType 302 302 + // --------------------------------------------------------------------------- 303 303 + 304 304 + describe('applyOperation', () => { 305 305 + let wb: WhiteboardState; 306 306 + 307 307 + beforeEach(() => { 308 308 + wb = noSnapBoard(); 309 309 + }); 310 310 + 311 311 + describe('add_shape', () => { 312 312 + it('adds a shape to the whiteboard', () => { 313 313 + const shape: Shape = { 314 314 + id: 's1', kind: 'rectangle', x: 10, y: 20, width: 100, height: 50, 315 315 + rotation: 0, label: 'hi', style: {}, opacity: 1, 316 316 + }; 317 317 + const op: Operation = { 318 318 + id: 'op1', type: 'add_shape', timestamp: Date.now(), clientId: 'c1', 319 319 + data: { shapeId: 's1', shape }, 320 320 + inverse: { shapeId: 's1' }, 321 321 + }; 322 322 + const next = applyOperation(wb, op); 323 323 + expect(next.shapes.has('s1')).toBe(true); 324 324 + expect(next.shapes.get('s1')!.label).toBe('hi'); 325 325 + }); 326 326 + }); 327 327 + 328 328 + describe('remove_shape', () => { 329 329 + it('removes a shape from the whiteboard', () => { 330 330 + const { state, shape } = addTestShape(wb); 331 331 + const op: Operation = { 332 332 + id: 'op1', type: 'remove_shape', timestamp: Date.now(), clientId: 'c1', 333 333 + data: { shapeId: shape.id }, 334 334 + inverse: { shapeId: shape.id, shape }, 335 335 + }; 336 336 + const next = applyOperation(state, op); 337 337 + expect(next.shapes.has(shape.id)).toBe(false); 338 338 + }); 339 339 + 340 340 + it('is a no-op if the shape does not exist', () => { 341 341 + const op: Operation = { 342 342 + id: 'op1', type: 'remove_shape', timestamp: Date.now(), clientId: 'c1', 343 343 + data: { shapeId: 'nonexistent' }, 344 344 + inverse: { shapeId: 'nonexistent', shape: null }, 345 345 + }; 346 346 + const next = applyOperation(wb, op); 347 347 + expect(next.shapes.size).toBe(0); 348 348 + }); 349 349 + }); 350 350 + 351 351 + describe('move_shape', () => { 352 352 + it('moves a shape to new coordinates', () => { 353 353 + const { state, shape } = addTestShape(wb, 'rectangle', 0, 0); 354 354 + const op: Operation = { 355 355 + id: 'op1', type: 'move_shape', timestamp: Date.now(), clientId: 'c1', 356 356 + data: { shapeId: shape.id, x: 50, y: 75 }, 357 357 + inverse: { shapeId: shape.id, x: shape.x, y: shape.y }, 358 358 + }; 359 359 + const next = applyOperation(state, op); 360 360 + const moved = next.shapes.get(shape.id)!; 361 361 + expect(moved.x).toBe(50); 362 362 + expect(moved.y).toBe(75); 363 363 + }); 364 364 + }); 365 365 + 366 366 + describe('resize_shape', () => { 367 367 + it('resizes a shape to new dimensions', () => { 368 368 + const { state, shape } = addTestShape(wb); 369 369 + const op: Operation = { 370 370 + id: 'op1', type: 'resize_shape', timestamp: Date.now(), clientId: 'c1', 371 371 + data: { shapeId: shape.id, width: 200, height: 150 }, 372 372 + inverse: { shapeId: shape.id, width: shape.width, height: shape.height }, 373 373 + }; 374 374 + const next = applyOperation(state, op); 375 375 + const resized = next.shapes.get(shape.id)!; 376 376 + expect(resized.width).toBe(200); 377 377 + expect(resized.height).toBe(150); 378 378 + }); 379 379 + }); 380 380 + 381 381 + describe('set_label', () => { 382 382 + it('updates the label on a shape', () => { 383 383 + const { state, shape } = addTestShape(wb); 384 384 + const op: Operation = { 385 385 + id: 'op1', type: 'set_label', timestamp: Date.now(), clientId: 'c1', 386 386 + data: { shapeId: shape.id, label: 'new label' }, 387 387 + inverse: { shapeId: shape.id, label: shape.label }, 388 388 + }; 389 389 + const next = applyOperation(state, op); 390 390 + expect(next.shapes.get(shape.id)!.label).toBe('new label'); 391 391 + }); 392 392 + }); 393 393 + 394 394 + describe('set_style', () => { 395 395 + it('sets style properties on a shape', () => { 396 396 + const { state, shape } = addTestShape(wb); 397 397 + const op: Operation = { 398 398 + id: 'op1', type: 'set_style', timestamp: Date.now(), clientId: 'c1', 399 399 + data: { shapeId: shape.id, style: { fill: '#ff0000' } }, 400 400 + inverse: { shapeId: shape.id, style: { ...shape.style } }, 401 401 + }; 402 402 + const next = applyOperation(state, op); 403 403 + expect(next.shapes.get(shape.id)!.style.fill).toBe('#ff0000'); 404 404 + }); 405 405 + }); 406 406 + 407 407 + describe('set_opacity', () => { 408 408 + it('sets opacity on a shape', () => { 409 409 + const { state, shape } = addTestShape(wb); 410 410 + const op: Operation = { 411 411 + id: 'op1', type: 'set_opacity', timestamp: Date.now(), clientId: 'c1', 412 412 + data: { shapeId: shape.id, opacity: 0.5 }, 413 413 + inverse: { shapeId: shape.id, opacity: shape.opacity }, 414 414 + }; 415 415 + const next = applyOperation(state, op); 416 416 + expect(next.shapes.get(shape.id)!.opacity).toBe(0.5); 417 417 + }); 418 418 + }); 419 419 + 420 420 + describe('rotate_shape', () => { 421 421 + it('sets rotation on a shape', () => { 422 422 + const { state, shape } = addTestShape(wb); 423 423 + const op: Operation = { 424 424 + id: 'op1', type: 'rotate_shape', timestamp: Date.now(), clientId: 'c1', 425 425 + data: { shapeId: shape.id, rotation: 45 }, 426 426 + inverse: { shapeId: shape.id, rotation: shape.rotation }, 427 427 + }; 428 428 + const next = applyOperation(state, op); 429 429 + expect(next.shapes.get(shape.id)!.rotation).toBe(45); 430 430 + }); 431 431 + }); 432 432 + 433 433 + describe('add_arrow', () => { 434 434 + it('adds an arrow to the whiteboard', () => { 435 435 + const { state: s1, shape: shapeA } = addTestShape(wb); 436 436 + const { state: s2, shape: shapeB } = addTestShape(s1, 'ellipse', 200, 0); 437 437 + const arrow: Arrow = { 438 438 + id: 'a1', 439 439 + from: { shapeId: shapeA.id, anchor: 'right' }, 440 440 + to: { shapeId: shapeB.id, anchor: 'left' }, 441 441 + label: '', 442 442 + style: {}, 443 443 + }; 444 444 + const op: Operation = { 445 445 + id: 'op1', type: 'add_arrow', timestamp: Date.now(), clientId: 'c1', 446 446 + data: { arrowId: 'a1', arrow }, 447 447 + inverse: { arrowId: 'a1' }, 448 448 + }; 449 449 + const next = applyOperation(s2, op); 450 450 + expect(next.arrows.has('a1')).toBe(true); 451 451 + }); 452 452 + }); 453 453 + 454 454 + describe('remove_arrow', () => { 455 455 + it('removes an arrow from the whiteboard', () => { 456 456 + const { state: s1, shape: shapeA } = addTestShape(wb); 457 457 + const { state: s2, shape: shapeB } = addTestShape(s1, 'ellipse', 200, 0); 458 458 + const { state: s3, arrow } = addTestArrow(s2, shapeA.id, shapeB.id); 459 459 + 460 460 + const op: Operation = { 461 461 + id: 'op1', type: 'remove_arrow', timestamp: Date.now(), clientId: 'c1', 462 462 + data: { arrowId: arrow.id }, 463 463 + inverse: { arrowId: arrow.id, arrow }, 464 464 + }; 465 465 + const next = applyOperation(s3, op); 466 466 + expect(next.arrows.has(arrow.id)).toBe(false); 467 467 + }); 468 468 + }); 469 469 + 470 470 + describe('group', () => { 471 471 + it('assigns a groupId to shapes', () => { 472 472 + const { state: s1, shape: a } = addTestShape(wb, 'rectangle', 0, 0); 473 473 + const { state: s2, shape: b } = addTestShape(s1, 'ellipse', 100, 0); 474 474 + const op: Operation = { 475 475 + id: 'op1', type: 'group', timestamp: Date.now(), clientId: 'c1', 476 476 + data: { groupId: 'g1', shapeIds: [a.id, b.id] }, 477 477 + inverse: { groupId: 'g1', shapeIds: [a.id, b.id] }, 478 478 + }; 479 479 + const next = applyOperation(s2, op); 480 480 + expect(next.shapes.get(a.id)!.groupId).toBe('g1'); 481 481 + expect(next.shapes.get(b.id)!.groupId).toBe('g1'); 482 482 + }); 483 483 + }); 484 484 + 485 485 + describe('ungroup', () => { 486 486 + it('clears groupId from shapes', () => { 487 487 + const { state: s1, shape: a } = addTestShape(wb, 'rectangle', 0, 0); 488 488 + const { state: s2, shape: b } = addTestShape(s1, 'ellipse', 100, 0); 489 489 + const shapes = new Map(s2.shapes); 490 490 + shapes.set(a.id, { ...a, groupId: 'g1' }); 491 491 + shapes.set(b.id, { ...b, groupId: 'g1' }); 492 492 + const grouped = { ...s2, shapes }; 493 493 + 494 494 + const op: Operation = { 495 495 + id: 'op1', type: 'ungroup', timestamp: Date.now(), clientId: 'c1', 496 496 + data: { groupId: 'g1', shapeIds: [a.id, b.id] }, 497 497 + inverse: { groupId: 'g1', shapeIds: [a.id, b.id] }, 498 498 + }; 499 499 + const next = applyOperation(grouped, op); 500 500 + expect(next.shapes.get(a.id)!.groupId).toBeUndefined(); 501 501 + expect(next.shapes.get(b.id)!.groupId).toBeUndefined(); 502 502 + }); 503 503 + }); 504 504 + 505 505 + describe('unknown operation type', () => { 506 506 + it('returns state unchanged', () => { 507 507 + const op: Operation = { 508 508 + id: 'op1', type: 'nonexistent' as OpType, timestamp: Date.now(), clientId: 'c1', 509 509 + data: {}, inverse: {}, 510 510 + }; 511 511 + const next = applyOperation(wb, op); 512 512 + expect(next).toBe(wb); 513 513 + }); 514 514 + }); 515 515 + 516 516 + describe('missing shape is a no-op', () => { 517 517 + it('move_shape on missing shape returns state unchanged', () => { 518 518 + const op: Operation = { 519 519 + id: 'op1', type: 'move_shape', timestamp: Date.now(), clientId: 'c1', 520 520 + data: { shapeId: 'missing', x: 10, y: 10 }, 521 521 + inverse: { shapeId: 'missing', x: 0, y: 0 }, 522 522 + }; 523 523 + const next = applyOperation(wb, op); 524 524 + expect(next).toBe(wb); 525 525 + }); 526 526 + }); 527 527 + }); 528 528 + 529 529 + // --------------------------------------------------------------------------- 530 530 + // createOperation — automatic diff computation 531 531 + // --------------------------------------------------------------------------- 532 532 + 533 533 + describe('createOperation', () => { 534 534 + let wb: WhiteboardState; 535 535 + 536 536 + beforeEach(() => { 537 537 + wb = noSnapBoard(); 538 538 + }); 539 539 + 540 540 + describe('add_shape', () => { 541 541 + it('detects a newly added shape', () => { 542 542 + const after = addShape(wb, 'rectangle', 10, 20); 543 543 + const newShape = [...after.shapes.values()].find((s) => !wb.shapes.has(s.id))!; 544 544 + const op = createOperation('add_shape', wb, after, newShape.id); 545 545 + expect(op.type).toBe('add_shape'); 546 546 + expect((op.data as Record<string, unknown>).shapeId).toBe(newShape.id); 547 547 + expect((op.data as Record<string, unknown>).shape).toEqual(newShape); 548 548 + expect((op.inverse as Record<string, unknown>).shapeId).toBe(newShape.id); 549 549 + }); 550 550 + }); 551 551 + 552 552 + describe('remove_shape', () => { 553 553 + it('detects a removed shape', () => { 554 554 + const { state, shape } = addTestShape(wb); 555 555 + const after = removeShape(state, shape.id); 556 556 + const op = createOperation('remove_shape', state, after, shape.id); 557 557 + expect(op.type).toBe('remove_shape'); 558 558 + expect((op.data as Record<string, unknown>).shapeId).toBe(shape.id); 559 559 + expect((op.inverse as Record<string, unknown>).shape).toEqual(shape); 560 560 + }); 561 561 + }); 562 562 + 563 563 + describe('move_shape', () => { 564 564 + it('computes position diff', () => { 565 565 + const { state, shape } = addTestShape(wb, 'rectangle', 0, 0); 566 566 + const after = moveShape(state, shape.id, 100, 200); 567 567 + const op = createOperation('move_shape', state, after, shape.id); 568 568 + expect(op.type).toBe('move_shape'); 569 569 + const data = op.data as Record<string, unknown>; 570 570 + expect(data.x).toBe(100); 571 571 + expect(data.y).toBe(200); 572 572 + const inv = op.inverse as Record<string, unknown>; 573 573 + expect(inv.x).toBe(shape.x); 574 574 + expect(inv.y).toBe(shape.y); 575 575 + }); 576 576 + }); 577 577 + 578 578 + describe('resize_shape', () => { 579 579 + it('computes dimension diff', () => { 580 580 + const { state, shape } = addTestShape(wb); 581 581 + const after = resizeShape(state, shape.id, 300, 250); 582 582 + const op = createOperation('resize_shape', state, after, shape.id); 583 583 + expect(op.type).toBe('resize_shape'); 584 584 + const data = op.data as Record<string, unknown>; 585 585 + expect(data.width).toBe(300); 586 586 + expect(data.height).toBe(250); 587 587 + const inv = op.inverse as Record<string, unknown>; 588 588 + expect(inv.width).toBe(shape.width); 589 589 + expect(inv.height).toBe(shape.height); 590 590 + }); 591 591 + }); 592 592 + 593 593 + describe('set_label', () => { 594 594 + it('computes label diff', () => { 595 595 + const { state, shape } = addTestShape(wb); 596 596 + const after = setShapeLabel(state, shape.id, 'hello'); 597 597 + const op = createOperation('set_label', state, after, shape.id); 598 598 + expect((op.data as Record<string, unknown>).label).toBe('hello'); 599 599 + expect((op.inverse as Record<string, unknown>).label).toBe(shape.label); 600 600 + }); 601 601 + }); 602 602 + 603 603 + describe('set_style', () => { 604 604 + it('computes style diff', () => { 605 605 + const { state, shape } = addTestShape(wb); 606 606 + const after = setShapeStyle(state, [shape.id], { fill: '#00ff00' }); 607 607 + const op = createOperation('set_style', state, after, shape.id); 608 608 + expect((op.data as Record<string, unknown>).style).toEqual({ fill: '#00ff00' }); 609 609 + expect((op.inverse as Record<string, unknown>).style).toEqual(shape.style); 610 610 + }); 611 611 + }); 612 612 + 613 613 + describe('set_opacity', () => { 614 614 + it('computes opacity diff', () => { 615 615 + const { state, shape } = addTestShape(wb); 616 616 + const after = setShapeOpacity(state, [shape.id], 0.3); 617 617 + const op = createOperation('set_opacity', state, after, shape.id); 618 618 + expect((op.data as Record<string, unknown>).opacity).toBe(0.3); 619 619 + expect((op.inverse as Record<string, unknown>).opacity).toBe(1); 620 620 + }); 621 621 + }); 622 622 + 623 623 + describe('rotate_shape', () => { 624 624 + it('computes rotation diff', () => { 625 625 + const { state, shape } = addTestShape(wb); 626 626 + const after = rotateShape(state, shape.id, 90); 627 627 + const op = createOperation('rotate_shape', state, after, shape.id); 628 628 + expect((op.data as Record<string, unknown>).rotation).toBe(90); 629 629 + expect((op.inverse as Record<string, unknown>).rotation).toBe(0); 630 630 + }); 631 631 + }); 632 632 + 633 633 + describe('add_arrow', () => { 634 634 + it('detects a newly added arrow', () => { 635 635 + const { state: s1, shape: shapeA } = addTestShape(wb); 636 636 + const { state: s2, shape: shapeB } = addTestShape(s1, 'ellipse', 200, 0); 637 637 + const after = addArrow(s2, { shapeId: shapeA.id, anchor: 'right' }, { shapeId: shapeB.id, anchor: 'left' }); 638 638 + const newArrow = [...after.arrows.values()].find((a) => !s2.arrows.has(a.id))!; 639 639 + const op = createOperation('add_arrow', s2, after, newArrow.id); 640 640 + expect(op.type).toBe('add_arrow'); 641 641 + expect((op.data as Record<string, unknown>).arrowId).toBe(newArrow.id); 642 642 + expect((op.data as Record<string, unknown>).arrow).toEqual(newArrow); 643 643 + }); 644 644 + }); 645 645 + 646 646 + describe('remove_arrow', () => { 647 647 + it('detects a removed arrow', () => { 648 648 + const { state: s1, shape: shapeA } = addTestShape(wb); 649 649 + const { state: s2, shape: shapeB } = addTestShape(s1, 'ellipse', 200, 0); 650 650 + const { state: s3, arrow } = addTestArrow(s2, shapeA.id, shapeB.id); 651 651 + const after = removeArrow(s3, arrow.id); 652 652 + const op = createOperation('remove_arrow', s3, after, arrow.id); 653 653 + expect(op.type).toBe('remove_arrow'); 654 654 + expect((op.data as Record<string, unknown>).arrowId).toBe(arrow.id); 655 655 + expect((op.inverse as Record<string, unknown>).arrow).toEqual(arrow); 656 656 + }); 657 657 + }); 658 658 + }); 659 659 + 660 660 + // --------------------------------------------------------------------------- 661 661 + // Round-trip: push -> undo -> apply gives back original state 662 662 + // --------------------------------------------------------------------------- 663 663 + 664 664 + describe('round-trip undo/redo via applyOperation', () => { 665 665 + let wb: WhiteboardState; 666 666 + 667 667 + beforeEach(() => { 668 668 + wb = noSnapBoard(); 669 669 + }); 670 670 + 671 671 + it('undo add_shape restores original state', () => { 672 672 + const history = new OperationHistory('c1'); 673 673 + const after = addShape(wb, 'rectangle', 10, 20); 674 674 + const newShape = [...after.shapes.values()].find((s) => !wb.shapes.has(s.id))!; 675 675 + const partialOp = createOperation('add_shape', wb, after, newShape.id); 676 676 + history.push(partialOp); 677 677 + 678 678 + const inv = history.undo()!; 679 679 + const restored = applyOperation(after, inv); 680 680 + expect(restored.shapes.size).toBe(0); 681 681 + }); 682 682 + 683 683 + it('undo move_shape restores original position', () => { 684 684 + const history = new OperationHistory('c1'); 685 685 + const { state, shape } = addTestShape(wb, 'rectangle', 0, 0); 686 686 + const after = moveShape(state, shape.id, 100, 200); 687 687 + const partialOp = createOperation('move_shape', state, after, shape.id); 688 688 + history.push(partialOp); 689 689 + 690 690 + const inv = history.undo()!; 691 691 + const restored = applyOperation(after, inv); 692 692 + const restoredShape = restored.shapes.get(shape.id)!; 693 693 + expect(restoredShape.x).toBe(shape.x); 694 694 + expect(restoredShape.y).toBe(shape.y); 695 695 + }); 696 696 + 697 697 + it('redo after undo re-applies the move', () => { 698 698 + const history = new OperationHistory('c1'); 699 699 + const { state, shape } = addTestShape(wb, 'rectangle', 0, 0); 700 700 + const after = moveShape(state, shape.id, 100, 200); 701 701 + const partialOp = createOperation('move_shape', state, after, shape.id); 702 702 + history.push(partialOp); 703 703 + 704 704 + const inv = history.undo()!; 705 705 + const restored = applyOperation(after, inv); 706 706 + const redo = history.redo()!; 707 707 + const reapplied = applyOperation(restored, redo); 708 708 + const reappliedShape = reapplied.shapes.get(shape.id)!; 709 709 + expect(reappliedShape.x).toBe(100); 710 710 + expect(reappliedShape.y).toBe(200); 711 711 + }); 712 712 + 713 713 + it('undo remove_shape brings the shape back', () => { 714 714 + const history = new OperationHistory('c1'); 715 715 + const { state, shape } = addTestShape(wb, 'rectangle', 0, 0); 716 716 + const after = removeShape(state, shape.id); 717 717 + const partialOp = createOperation('remove_shape', state, after, shape.id); 718 718 + history.push(partialOp); 719 719 + 720 720 + const inv = history.undo()!; 721 721 + const restored = applyOperation(after, inv); 722 722 + expect(restored.shapes.has(shape.id)).toBe(true); 723 723 + expect(restored.shapes.get(shape.id)).toEqual(shape); 724 724 + }); 725 725 + 726 726 + it('multiple operations undo in correct order', () => { 727 727 + const history = new OperationHistory('c1'); 728 728 + const { state: s1, shape } = addTestShape(wb, 'rectangle', 0, 0); 729 729 + const s2 = moveShape(s1, shape.id, 50, 50); 730 730 + const s3 = setShapeLabel(s2, shape.id, 'hello'); 731 731 + 732 732 + history.push(createOperation('move_shape', s1, s2, shape.id)); 733 733 + history.push(createOperation('set_label', s2, s3, shape.id)); 734 734 + 735 735 + // Undo label change 736 736 + const inv1 = history.undo()!; 737 737 + const r1 = applyOperation(s3, inv1); 738 738 + expect(r1.shapes.get(shape.id)!.label).toBe(''); 739 739 + 740 740 + // Undo move 741 741 + const inv2 = history.undo()!; 742 742 + const r2 = applyOperation(r1, inv2); 743 743 + expect(r2.shapes.get(shape.id)!.x).toBe(shape.x); 744 744 + expect(r2.shapes.get(shape.id)!.y).toBe(shape.y); 745 745 + }); 746 746 + });