Data Flow and State Management
Relevant source files
The following files were used as context for generating this wiki page:
Data flow and state management in the Nextcloud CAD Viewer are designed to facilitate the secure retrieval of CAD files (DWG/DXF) from Nextcloud storage and their subsequent rendering in the client's browser. The system employs a decoupled architecture where the PHP backend handles file access permissions and streaming, while the Vue.js frontend manages the viewer lifecycle, UI states, and the integration of the external @mlightcad/cad-viewer library.
The process begins with the identification of a file ID via URL parameters or DOM data attributes, followed by a request to the backend to generate a secure stream. The frontend maintains the state of the loading process, error handling, and the specific instance of the CAD viewer, ensuring that resources are cleaned up when the component is unmounted.
Sources: src/App.vue:30-73, lib/Controller/FileController.php:97-133, appinfo/info.xml:8-16
Backend Data Handling and API
The backend is responsible for validating user sessions, checking file permissions, and serving file content. The FileController serves as the primary gateway for data, implementing methods to fetch metadata and stream binary content.
File Retrieval Process
The backend validates that the requested fileId belongs to the authenticated user and matches supported MIME types before allowing data to flow to the frontend.
| Method | Endpoint | Description |
|---|---|---|
getFile | /apps/cad_viewer/api/file/{fileId} | Retrieves file metadata (name, size, mimeType). |
getFileContent | /apps/cad_viewer/api/file/{fileId}/content | Streams the raw binary content of the CAD file. |
preview | /apps/cad_viewer/api/file/{fileId}/preview | Returns a preview stream of the file. |
Sources: lib/Controller/FileController.php:61-180
Supported MIME Types
The system strictly filters data flow to only allow specific CAD formats. If a file does not match these types, the FileController returns a STATUS_UNSUPPORTED_MEDIA_TYPE (415) error.
application/acad,application/dwg,image/vnd.dwgapplication/dxf,image/vnd.dxf,application/x-autocad
Sources: lib/Controller/FileController.php:30-43, tests/unit/cadLoader.spec.ts:6-24
Frontend State Management
The frontend state is managed locally within the App.vue component using Vue 3 Composition API refs. This state tracks the viewer's lifecycle from initialization to disposal.
UI and Lifecycle States
The application utilizes reactive variables to manage the display of the viewer and handle edge cases like missing files or network errors.
loading: A boolean indicating if the viewer is currently initializing or fetching the file.error: A string containing localized error messages if initialization fails.viewerInstance: A reference to theViewerInstancecreated by the@mlightcadlibrary.fileUrl: The generated URL used to stream the file content from the Nextcloud API.
Sources: src/App.vue:22-29
Initialization Flow
The following sequence diagram illustrates the flow of data from the initial file selection to the rendered canvas in the browser.
Component Lifecycle and Resource Disposal
Effective state management includes the disposal of heavy resources. The onBeforeUnmount hook is critical for preventing memory leaks by explicitly calling the dispose() method on the viewerInstance.
onBeforeUnmount(() => {
viewerInstance.value?.dispose()
viewerInstance.value = null
})
Sources: src/App.vue:75-78
Error Handling and Retries
When the data flow is interrupted (e.g., due to an invalid file format or network failure), the app transitions to an error state. The retryLoad function resets the state and attempts to re-initialize the loadCADViewer utility.
Sources: src/App.vue:10-14, src/App.vue:80-99
Conclusion
Data Flow and State Management in this application rely on a strict permission-based backend coupled with a reactive frontend. By leveraging Nextcloud's internal routing and file systems, the app ensures that CAD data remains secure while providing a responsive, state-aware interface for the end-user. The lifecycle management ensures that high-performance WebGL resources used for CAD rendering are properly allocated and deallocated.
Sources: src/App.vue:30-73, lib/Controller/FileController.php:97-133, package.json:23-26