Viewer Interface & Controls
Relevant source files
The following files were used as context for generating this wiki page:
The Viewer Interface & Controls module provides the interactive frontend layer for the Nextcloud CAD Viewer. It facilitates the browser-based rendering of DWG and DXF files using WebGL technology, allowing users to interact with technical drawings without external software. The interface is built using Vue 3 and Element Plus, integrating the @mlightcad/cad-viewer library to handle complex CAD data structures.
Sources: README.md:6-15, src/App.vue:41-45, wiki/User-Guide.md:12-18
Core Interface Components
The interface is structured into three primary zones: the Toolbar, the Drawing Area (Canvas), and the Status Bar. The system uses a responsive flexbox layout to ensure the viewer occupies the full height of the viewport while maintaining a consistent background theme.
Component Layout
- Toolbar: Contains interactive buttons for navigation, layer management, and display settings.
- Drawing Area: The WebGL canvas where the actual CAD entities are rendered.
- Status Bar: Displays metadata including file names, dimensions, zoom levels, and real-time cursor coordinates.
The diagram above illustrates the hierarchical structure of the CAD viewer's frontend components. Sources: src/App.vue:2-13, wiki/User-Guide.md:73-82
Interactive Controls & Navigation
The viewer supports multiple input methods for navigating complex drawings, including mouse, keyboard, and touch gestures.
Navigation Mechanisms
| Control Type | Tool/Action | Keyboard Shortcut |
|---|---|---|
| Zoom | Zoom In/Out | + / - |
| Pan | Move viewport | Space (hold) + Drag |
| Reset | Reset zoom to 100% | 0 |
| Fit | Fit drawing to view | F |
| Fullscreen | Toggle full display | F11 / Esc |
Sources: wiki/User-Guide.md:118-175, wiki/User-Guide.md:330-340
View Customization
Users can toggle between Light and Dark themes to reduce eye strain or match the drawing's original aesthetic. The system also includes a Layer Manager that allows users to toggle the visibility of specific drawing layers (e.g., hiding dimensions or construction lines) to focus on specific details.
Sources: README.md:12-13, wiki/User-Guide.md:179-204
Technical Architecture & Data Flow
The interface initializes by resolving a fileId from the Nextcloud environment, which is then used to generate a secure API URL for file streaming.
Loading Sequence
- ID Resolution: The
App.vuecomponent identifies the target file via props, dataset, or URL parameters. - Resource Request: The frontend generates a URL pointing to the
FileControllerin the PHP backend. - Viewer Initialization: The
cadLoader.tsutility mounts theMlCadViewercomponent using Vue 3. - Rendering: The viewer fetches the file stream and renders it via WebGL.
Sources: src/App.vue:35-61, src/utils/cadLoader.ts:44-55, lib/Controller/FileController.php:107-133
This sequence diagram shows the data flow from user interaction to backend file streaming and final rendering. Sources: src/App.vue:35-65, src/utils/cadLoader.ts:32-60, lib/Controller/FileController.php:107-115
Implementation Details
Configuration Options
The loadCADViewer function accepts a CADViewerOptions object to define the initial state of the interface.
export interface CADViewerOptions {
locale?: string // Defaults to 'en'
url?: string // The API endpoint for the file
theme?: 'light' | 'dark' // Viewer aesthetic
background?: number // Hex color code (e.g., 0x1e1e1e)
useMainThreadDraw?: boolean // Rendering optimization
}
Sources: src/utils/cadLoader.ts:8-16, src/utils/cadLoader.ts:32-41
MIME Type Support
The interface includes a validation layer to ensure only supported CAD formats are processed. Supported types include AutoCAD DWG (application/dwg, image/vnd.dwg) and DXF (application/dxf, image/vnd.dxf).
Sources: src/utils/cadLoader.ts:88-100, lib/Controller/FileController.php:32-43
Summary
The Viewer Interface & Controls module transforms raw CAD data into an interactive, user-friendly experience within Nextcloud. By combining a robust WebGL rendering engine with standard CAD controls like layer management and fit-to-view, it provides a functional replacement for desktop CAD viewers directly in the web browser. This integration is handled through a clean separation between the Vue-based frontend and the PHP-based file controller.
Sources: README.md:6-18, src/App.vue:35-70