What We Learned Rewriting an Interactive Map Editor: Fabric.js, CORS, and 20,000 Lines of Legacy TypeScript

Short summary

A workspace management platform team shares lessons from rewriting a 20,000-line legacy TypeScript map editor built on AngularJS and Fabric.js. The biggest wins came from architectural decisions like using viewport transforms instead of moving objects, and splitting print rendering into separate background and object layers to bypass CORS-tainted canvas issues. The rewrite enabled new features—drafts, safe publishing, high-quality printing, and multiple workspace modes—that the old monolithic architecture could not support.

• •Rewrote a 20k-line AngularJS/Fabric.js map editor into modular subsystems with single responsibilities
• •Solved canvas CORS SecurityError by splitting print output into separate background and object layers
• •Key insight: moving the camera via viewportTransform instead of objects simplified zoom, pan, export, and printing

Generated with AI, which can make mistakes.