-
Notifications
You must be signed in to change notification settings - Fork 0
Home
The Nextcloud CAD Viewer is a native application designed to provide
DWG and DXF file viewing capabilities directly within the Nextcloud web
interface. By integrating the @mlightcad/cad-viewer
library, it enables users to interact with CAD drawings using WebGL
technology without the need for downloading files or installing local
software.
Sources: README.md:9-11, appinfo/info.xml:7-9
The project serves as a bridge between Nextcloud's file management system and a modern, browser-based rendering engine. It handles secure file access on the backend via PHP while providing a responsive Vue.js frontend for high-performance interactive controls such as zooming, panning, and layer management.
Sources: README.md:14-23, src/App.vue:1-12
The application follows a decoupled architecture typical of modern Nextcloud apps, separating the backend file handling from the frontend rendering engine.
The backend is built using the Nextcloud App Framework. Its primary
responsibility is managing file access, validating permissions, and
streaming CAD data to the client. The FileController handles requests for file metadata and raw content streaming.
Sources: lib/Controller/FileController.php:21-30, README.md:95-99
The frontend is a Vue 3 application that utilizes Element Plus for UI components. It leverages the @mlightcad/cad-viewer
library to perform client-side rendering of CAD files. The frontend
architecture is designed to be responsive, supporting both desktop and
mobile viewports.
Sources: package.json:20-33, README.md:21, src/App.vue:35-50
The following diagram illustrates the interaction between the Nextcloud core, the CAD Viewer backend, and the client-side viewer.
Requests File
Routes to
Checks Permissions
Reads Storage
Streams Data
File Content/Mime
Initializes
WebGL Render
Browser/User Interface
Nextcloud Core
FileController.php
IRootFolder
Filesystem
mlightcad/cad-viewer
Drawing Area
The application provides a comprehensive set of tools for viewing architectural and engineering drawings.
| Feature | Description | Source |
|---|---|---|
| WebGL Rendering | Fast, hardware-accelerated rendering in the browser. | README.md:15 |
| Interactive Controls | Support for Zoom, Pan, and Fit-to-view. | appinfo/info.xml:13 |
| Layer Management | Toggle visibility of individual CAD layers. | README.md:17 |
| Theme Support | Includes both Light and Dark mode options. | appinfo/info.xml:15 |
| Fullscreen Mode | Maximizes drawing area for detailed inspection. | README.md:19 |
| Secure Access | Integrates with Nextcloud's native file permissions. | README.md:20 |
Sources: README.md:61-64, lib/Controller/FileController.php:33-44
The Nextcloud CAD Viewer provides an essential utility for users needing to review technical drawings within their cloud storage environment. By combining a robust PHP backend that respects Nextcloud's security model with a high-performance WebGL frontend, the application delivers a seamless, installation-free viewing experience for industry-standard CAD formats.
Sources: README.md:9-25, appinfo/info.xml:7-18
The Nextcloud CAD Viewer is a native application designed to provide DWG and DXF file viewing capabilities directly within the Nextcloud web interface. By integrating the @mlightcad/cad-viewer library, it enables users to interact with CAD drawings using WebGL technology without the need for downloading files or installing local software.
Sources: README.md:9-11, appinfo/info.xml:7-9
The project serves as a bridge between Nextcloud's file management system and a modern, browser-based rendering engine. It handles secure file access on the backend via PHP while providing a responsive Vue.js frontend for high-performance interactive controls such as zooming, panning, and layer management.
Sources: README.md:14-23, src/App.vue:1-12 Core system architecture
The application follows a decoupled architecture typical of modern Nextcloud apps, separating the backend file handling from the frontend rendering engine. Backend (php)
The backend is built using the Nextcloud App Framework. Its primary responsibility is managing file access, validating permissions, and streaming CAD data to the client. The FileController handles requests for file metadata and raw content streaming.
Sources: lib/Controller/FileController.php:21-30, README.md:95-99 Frontend (vue.js)
The frontend is a Vue 3 application that utilizes Element Plus for UI components. It leverages the @mlightcad/cad-viewer library to perform client-side rendering of CAD files. The frontend architecture is designed to be responsive, supporting both desktop and mobile viewports.
Sources: package.json:20-33, README.md:21, src/App.vue:35-50 System component diagram
The following diagram illustrates the interaction between the Nextcloud core, the CAD Viewer backend, and the client-side viewer.
Requests File
Routes to
Checks Permissions
Reads Storage
Streams Data
File Content/Mime
Initializes
WebGL Render
Browser/User Interface
Nextcloud Core
FileController.php
IRootFolder
Filesystem
mlightcad/cad-viewer
Drawing Area
Sources: lib/Controller/FileController.php:73-107, src/App.vue:56-61, README.md:95-103 Key features and functionality
The application provides a comprehensive set of tools for viewing architectural and engineering drawings. Feature Description Source WebGL Rendering Fast, hardware-accelerated rendering in the browser. README.md:15 Interactive Controls Support for Zoom, Pan, and Fit-to-view. appinfo/info.xml:13 Layer Management Toggle visibility of individual CAD layers. README.md:17 Theme Support Includes both Light and Dark mode options. appinfo/info.xml:15 Fullscreen Mode Maximizes drawing area for detailed inspection. README.md:19 Secure Access Integrates with Nextcloud's native file permissions. README.md:20 Technical requirements
The system is optimized for modern environments, requiring specific versions of Nextcloud and PHP for stable operation. Server-side requirements
Nextcloud: Version 33
PHP: 8.2 or higher
PHP Extensions: gd or imagick, fileinfo, json, libxml, dom, xml, zip
Sources: wiki/Requirements.md:12-25, appinfo/info.xml:37-40 Client-side requirements
The viewer requires modern browser features to support WebGL 2.0 rendering and high-performance JavaScript execution.
Browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
Hardware: Hardware acceleration enabled in the browser is recommended for large files.
Sources: wiki/Requirements.md:65-80, README.md:41-43 Data flow: opening a cad file
When a user selects a DWG or DXF file, the system executes a sequence of calls to retrieve and render the data. mlightcad-viewerFileController@nextcloud/routerApp.vueUsermlightcad-viewerFileController@nextcloud/routerApp.vueUserClicks CAD FilegenerateUrl(api/file/{id}/content)getFile(fileId)Metadata (Name, Size, MimeType)getFileContent(fileId)Stream Raw File DataloadCADViewer(container, url)Render Canvas UI
Sources: src/App.vue:52-77, lib/Controller/FileController.php:49-112 File format support
The viewer explicitly supports the following formats and their associated MIME types to ensure proper browser handling. Format Extension Key Supported MIME Types AutoCAD DWG .dwg application/acad, application/dwg, image/vnd.dwg AutoCAD DXF .dxf application/dxf, image/vnd.dxf, image/x-dxf
Sources: README.md:61-64, lib/Controller/FileController.php:33-44 Conclusion
The Nextcloud CAD Viewer provides an essential utility for users needing to review technical drawings within their cloud storage environment. By combining a robust PHP backend that respects Nextcloud's security model with a high-performance WebGL frontend, the application delivers a seamless, installation-free viewing experience for industry-standard CAD formats.
Sources: README.md:9-25, appinfo/info.xml:7-18