System Architecture
Relevant source files
The following files were used as context for generating this wiki page:
The Nextcloud CAD Viewer is a native Nextcloud application designed to provide browser-based viewing capabilities for DWG and DXF files. The architecture leverages a decoupled approach where the backend (PHP) handles file access, permissions, and streaming, while the frontend (Vue.js) utilizes the @mlightcad/cad-viewer library to perform high-performance rendering using WebGL technology directly in the client's browser.
Sources: README.md:1-12, appinfo/info.xml:8-15
High-Level Component Overview
The system is split into two primary layers: the Nextcloud Server (Backend) and the Client Browser (Frontend). The backend acts as a secure gateway to the Nextcloud filesystem, ensuring that only authorized users can access CAD data. The frontend is a single-page application (SPA) environment that manages the user interface and the specialized rendering engine.
This diagram illustrates the separation of concerns between the PHP backend and the Vue.js frontend.
Sources: README.md:104-122, src/App.vue:40-65, lib/Controller/FileController.php:33-45
Backend Architecture
The backend is built using the Nextcloud App Framework and focuses on secure file delivery. It is primarily composed of controllers and listeners that integrate with Nextcloud's core services.
API Controllers
The FileController is the central component for backend operations. It manages three critical functions:
- Metadata Retrieval: Fetching file details like name, size, and MIME type.
- File Streaming: Providing a raw stream of the CAD file content to the viewer.
- Preview Generation: Handling requests for file previews.
Sources: lib/Controller/FileController.php:47-158
Supported MIME Types
The architecture includes a whitelist of supported CAD formats to ensure system stability and security.
| Category | MIME Types |
|---|---|
| DWG | application/acad, application/autocad_dwg, application/dwg, application/x-autocad, application/x-dwg, image/vnd.dwg |
| DXF | image/vnd.dxf, application/dxf, application/x-dxf, image/x-dxf |
Sources: lib/Controller/FileController.php:35-45, wiki/Requirements.md:162-178
Frontend Architecture
The frontend is a Vue 3 application that serves as a wrapper for the @mlightcad/cad-viewer engine. It manages the lifecycle of the viewer, from initialization to disposal.
Lifecycle Management
The App.vue component handles the initialization process:
- File ID Detection: Retrieves the
fileIdfrom the URL or Nextcloud container dataset. - URL Generation: Uses
@nextcloud/routerto generate the secure API endpoint for the file content. - Engine Loading: Invokes the
loadCADViewerutility to initialize the WebGL canvas within a referenced DOM element.
Sources: src/App.vue:35-90
Technology Stack
The frontend utilizes modern web technologies to ensure a responsive and high-performance experience.
| Library | Version | Purpose |
|---|---|---|
| Vue.js | 3.5.34 | Frontend framework and state management |
| @mlightcad/cad-viewer | 1.5.0 | Core CAD rendering engine |
| Element Plus | 2.13.6 | UI component library |
| Axios | 1.16.1 | HTTP client for API communication |
Sources: package.json:23-35
Data Flow and Sequence
When a user opens a CAD file in Nextcloud, a series of interactions occurs between the browser and the server to render the drawing.
Sequence of events during the initialization of the CAD viewer.
Sources: src/App.vue:40-60, lib/Controller/FileController.php:110-140
System Requirements and Dependencies
The architecture is designed specifically for modern environments, requiring Nextcloud 33 and PHP 8.2+.
Server-Side Requirements
- PHP Extensions: The backend requires
gdorimagickfor image processing andfileinfofor MIME detection. - Memory: A minimum of 512MB RAM is required, though 1GB is recommended for processing large files.
Client-Side Requirements
- WebGL 2.0: Essential for hardware-accelerated 3D/2D rendering.
- Node.js: Version 24+ is required for building the frontend assets during development or manual installation.
Sources: wiki/Requirements.md:15-50, package.json:10-14, appinfo/info.xml:45-48
Summary
The System Architecture of the Nextcloud CAD Viewer provides a secure, efficient way to view complex CAD drawings without server-side conversion overhead. By utilizing Nextcloud's File System abstraction and the browser's WebGL capabilities, the app maintains a lightweight backend while delivering a desktop-class viewing experience on the client side.