Event Listeners and Hooks
Relevant source files
The following files were used as context for generating this wiki page:
The Nextcloud CAD Viewer utilizes the Nextcloud event system to integrate its viewing capabilities into the core file management workflow. By implementing specific listeners, the application can intercept file-related events and inject the necessary frontend assets required to render DWG and DXF files directly in the browser. This architecture ensures that the CAD Viewer remains decoupled from the core Nextcloud logic while providing a seamless user experience.
Backend Event Listeners
The backend integration relies on PHP-based listeners that react to Nextcloud system events. These listeners are responsible for preparing the environment when a user interacts with supported CAD formats.
Viewer Injection Logic
The primary mechanism for triggering the CAD Viewer is a listener that detects when a file is being accessed or when the file list is loaded. This listener injects the JavaScript and CSS assets required for the @mlightcad/cad-viewer library to function.
The application defines its backend namespace as CadViewer and is categorized under files in the Nextcloud ecosystem. Sources: appinfo/info.xml:13-22, lib/Listener/LoadViewer.php
Frontend Hooks and Lifecycle
The frontend, built with Vue 3, utilizes component lifecycle hooks to manage the initialization and disposal of the CAD rendering engine.
Component Initialization
The App.vue component serves as the entry point for the viewer. It uses the onMounted hook to trigger the loading of the CAD data and the onBeforeUnmount hook to clean up resources, preventing memory leaks in the single-page application (SPA) environment.
| Hook | Purpose | Action |
|---|---|---|
onMounted | Initialization | Triggers initViewer() to fetch file IDs and load the rendering engine. |
onBeforeUnmount | Cleanup | Calls viewerInstance.dispose() to clear WebGL context and memory. |
setup | Reactive State | Manages loading, error, and viewerInstance refs. |
Sources: src/App.vue:35-85, package.json:28-40
Data Flow for Event Triggers
When a file event is triggered, the application retrieves the fileId through multiple fallback mechanisms to ensure the viewer loads correctly regardless of how it was opened (e.g., direct click, shared link, or URL parameter).
Sources: src/App.vue:43-65, README.md:90-105
Asset Integration and Routes
The application registers specific routes and navigation entries that the event listeners point to. These are defined in the app metadata and used to generate URLs for the CAD data API.
- Navigation Route:
cad_viewer.view.indexis used for primary navigation. - API Endpoint:
/apps/cad_viewer/api/file/{fileId}/contentis called by the frontend after the initialization event to fetch the actual CAD binary.
Sources: appinfo/info.xml:27-33, src/App.vue:62-64
Summary
Event listeners and hooks in the Nextcloud CAD Viewer facilitate the bridge between Nextcloud's file system events and the browser-based WebGL rendering engine. By utilizing lib/Listener/LoadViewer.php on the backend and Vue lifecycle hooks in src/App.vue on the frontend, the app ensures that resources are only loaded when needed and are properly disposed of when the user exits the viewer. This event-driven approach allows for high performance even with large CAD files by deferring heavy processing until the specific "open" event occurs.