mlightcad CAD-Viewer

CAD-Viewer is a browser-based DXF/DWG viewer and editor that operates entirely client-side without requiring backend services. This architecture ensures high data privacy (files never leave the device) and enables serverless CAD workflows.

Key Features

• Serverless Architecture: Parsing, geometry processing, and rendering occur directly in the browser.
• High Performance: Supports large DWG/DXF files with smooth 60+ FPS rendering using a THREE.js engine.
• Single-file HTML Export: Export current drawings as a standalone .html file containing the drawing snapshot and a lightweight runtime. This file can be shared via email or hosted on static file hosting and allows recipients to pan, zoom, toggle layers, and measure distances offline in any modern browser.
• Modular Architecture: Designed for easy integration with third-party platforms (CMS, Notion, WeChat, etc.).
• 3D Rendering: Powered by THREE.js with advanced optimization techniques.

CAD-Viewer is a web-based DXF/DWG viewer and editor that operates entirely in the browser without requiring a backend service. It performs DWG/DXF parsing, geometry processing, and rendering client-side, making it ideal for serverless CAD workflows, cloud applications, offline use, and privacy-sensitive environments.

Key features include:

• High Performance: Smoothly renders large DWG/DXF files at 60+ FPS using a THREE.js 3D rendering engine.
• No Backend Required: Files are parsed and processed completely within the browser, ensuring data privacy.
• Self-Contained HTML Export: Export current drawings as a single .html file containing the drawing snapshot and a lightweight viewer runtime. This file can be opened in any modern browser for panning, zooming, layer switching, and distance measurement without needing CAD software or a server.
• Modular Architecture: Designed for easy integration with third-party platforms like CMS, Notion, or WeChat.

CAD-Viewer is a modular, framework-independent system designed to provide an AutoCAD-like 2D experience (viewer + editor) in the browser.

Core Capabilities include:

• File Support: DXF and DWG loading, self-contained HTML export, and incremental loading for large files.
• Rendering: WebGL-based (Three.js) optimized for 2D, featuring layer-based scene organization and paper space/layout rendering.
• Navigation & View: Pan, Zoom (wheel/window), Zoom Extents, layer visibility/freezing, and theme switching.
• Selection & Interaction: Single entity, window, and crossing selection; selection filters; and OSNAP (Endpoint, Midpoint, Center, Nearest).
• Editing: Move, Copy, Rotate, Delete, Undo/Redo, and Geometry manipulation (Grips, Offset).
• Drawing Tools: Lines, Polylines, Splines, Circles, Arcs, Ellipses, and Polygons.
• Measurement: Distance, Arc Length, Area, and Angle.
• Extensibility: Plugin API for custom commands and framework-agnostic core (with Vue and React integration examples).

CAD-Viewer aims to provide a full-featured 2D AutoCAD-like system (viewer + editor) directly in the browser using a modular architecture.

Core Capabilities

• File Support: DXF and DWG loading, large file streaming/incremental loading, and exporting to self-contained offline HTML.
• Rendering: WebGL-based rendering (via Three.js) with 2D optimizations, layer-based scene composition, and layout/paper space support.
• Interaction: Pan, zoom (wheel/box), view fit, layer visibility/locking, and advanced selection (window, crossing, filters).
• Snapping (OSNAP): Endpoint, Midpoint, Center, and Nearest.
• Editing: Move, Copy, Rotate, Delete, Undo/Redo, Grip points, and Offset.
• Drawing Tools: Line, Polyline, Spline, Circle, Arc, Ellipse, Rectangle/Polygon, and Hatch.
• Measurement: Distance, Arc length, Area, and Angle.
• Command System: Command registry, aliases, and an AutoCAD-style command prompt.
• Extensibility: Framework-independent core with a Plugin API for custom entities and commands.

The goal of CAD-Viewer is to create a full-featured 2D AutoCAD-like system running in the browser, featuring a modular architecture that is framework-agnostic.

Current Capabilities (Completed)

• File Support: DXF/DWG loading, self-contained offline HTML export, large file streaming/incremental loading.
• Data Model: Unified entity model, layer tables, Block/Insert structures.
• Rendering: WebGL (Three.js) based, 2D-optimized pipeline, Layer-based scene organization, Layout/Paper Space rendering.
• Navigation: Pan, Zoom (wheel/box), Fit View.
• Display: Layer visibility (show/hide/freeze/lock), Line width display, Theme switching.
• Selection: Single entity, Highlight, Window/Crossing selection, Selection filtering, Selection cycling.
• OSNAP (Snapping): Endpoint, Midpoint, Center, Nearest.
• Editing: Move, Copy, Rotate, Delete, Undo/Redo, Grip Points, Offset.
• Drawing: Line, Polyline, Spline, Circle, Arc, Ellipse, Rectangle/Polygon, Hatch.
• Measurement: Distance, Arc length, Area, Angle.
• UI/System: Property Palette (real-time updates), Layer Manager, Command History/Console, Status Bar, Command Registration/Aliases.
• Integration: Framework-agnostic core, Vue integration, Plugin API, Custom Commands.
• Offline: Local browser editing, Save as DXF.

Planned/In-Progress Features

• File: Version compatibility (R12–latest), XData/Extended Dictionary support, Proxy Entity handling.
• Rendering: Viewport entity support, LOD (Level of Detail), Multi-canvas/Tiled rendering for ultra-large drawings.
• Navigation: Named views, View history.
• OSNAP: Intersection, Perpendicular/Tangent, Snap Tracking.
• Editing: Scale, Stretch, Trim, Extend, Explode, 2D Fillet/Chamfer.
• Drawing: Text (Single/Multi-line), Annotations (Linear, Aligned, Angular), Block creation/insertion.
• Measurement: Coordinates, Entity statistics.
• UI: Layer/Color/Linetype editing in Property Palette, Block Manager.
• Integration: React integration, OpenLayers/Map integration.
• Online: Backend API, User Auth, Versioning, Multi-user collaboration.

The CAD-Viewer project aims to build a full-featured 2D AutoCAD-like system (viewer + editor) in the browser using a modular architecture.

Core Capabilities

• File Support: DXF and DWG loading, self-contained offline HTML export, and streaming/incremental loading for large files.
• Rendering: WebGL-based rendering (via Three.js) with 2D optimizations, layer-based scene composition, and layout/paperspace support.
• Navigation & View Control: Pan, zoom (wheel/box), fit-to-screen, and layer visibility controls (ON/OFF, freeze, lock).
• Selection & Snapping: Single/window/crossing selection, selection filters, and OSNAP support (Endpoint, Midpoint, Center, Nearest).
• Editing: Entity editing framework including Move, Copy, Rotate, Delete, Undo/Redo, and Grip points.
• Drawing Tools: Support for Lines, Polylines, Splines, Circles, Arcs, Ellipses, Rectangles, and Hatches.
• Measurement: Distance, Arc length, Area, and Angle.
• UI & Commands: Property palettes, Layer Manager, Command History/Console, and an AutoCAD-style command prompt with aliases.
• Extensibility: Framework-agnostic core with a Plugin API for custom commands and Vue integration samples.

Integration & Licensing Note

The core is framework-agnostic. While it provides a Vue integration sample, it is designed to be used in various environments. Note that the default DWG loading path relies on GPL-3.0 packages (libredwg-web / @mlightcad/libredwg-converter).

CAD-Viewer (specifically within @mlightcad/cad-simple-viewer) uses a modular Plugin System to extend functionality. Plugins implement the AcApPlugin interface and hook into the viewer's lifecycle via onLoad and onUnload methods.

Key Concepts

• Lifecycle Hooks: Use onLoad and onUnload to register commands, mount UI elements, or integrate import/export flows.
• Plugin Loading: Plugins are managed via AcApDocManager.instance.pluginManager. You can use loadPlugin, registerLazyPlugin, or provide them during document manager creation using plugins.fromConfig.
• Lazy Loading: To optimize initial load performance, many plugins (especially export-related ones) support lazy loading. A lightweight stub is registered at startup, and the full bundle is only downloaded when the user executes a specific command (e.g., -chtml or via a UI dialog).

Official Plugins Overview