FloorplanCanvas

The main floor plan canvas component using Fabric.js.

Overview

FloorplanCanvas is the top-level component that wraps the Fabric.js canvas for displaying and interacting with floor plans. It handles canvas initialization, zoom, pan, and rendering of the floor plan image with overlaid elements.

Features

• Fabric.js 5.2.4 canvas initialization
• PDF.js rendering of floor plan PDFs
• Zoom (scroll wheel + buttons, 0.5x - 3x)
• Pan (space + drag or middle mouse)
• Responsive canvas sizing
• Floor plan image as background
• Overlay elements (spec pills, annotations, text)

Key Dependencies

• useFloorPlans — Floor plan data
• useFloorPlanRenderer — PDF rendering
• useCanvasHistory — Undo/redo
• Fabric.js — Canvas library
• PDF.js — PDF rendering

Source

app/components/FloorplanCanvas.vue