Routing System
Relevant source files
The following files were used as context for generating this wiki page:
- appinfo/routes.php
- src/App.vue
- appinfo/info.xml
- package.json
- webpack.config.js
- src/utils/cadLoader.ts (referenced via unit tests)
Introduction
The Routing System in the Nextcloud CAD Viewer application facilitates the navigation between the Nextcloud file ecosystem and the specialized CAD viewing interface. It employs a hybrid approach, combining server-side PHP routing for API data access and view rendering with client-side logic to handle file-specific state and URL parameters. The system ensures that DWG and DXF files are correctly intercepted and directed to the viewer component while maintaining secure access to file content via Nextcloud's internal API structures.
The primary purpose of the routing system is to bridge the gap between a user selecting a file in the Nextcloud "Files" app and the initialization of the @mlightcad/cad-viewer library with the correct file source.
Server-Side Routing
The server-side routing is defined within the Nextcloud app framework standard. It maps HTTP verbs and URLs to specific controller methods. These routes handle the initial page load for the app and provide the REST API endpoints necessary for the frontend to fetch CAD file metadata and binary content.
Defined Routes
The application registers five primary routes to handle views and file operations:
| Route Name | URL | Verb | Purpose |
|---|---|---|---|
view#index | / | GET | Main entry point for the application. |
view#view | /view | GET | Specialized view for CAD rendering. |
file#getFile | /api/file/{fileId} | GET | Retrieves metadata for a specific CAD file. |
file#getFileContent | /api/file/{fileId}/content | GET | Streams the actual DWG/DXF binary content. |
file#preview | /api/preview/{fileId} | GET | Provides a preview image/stream for the file. |
Sources: appinfo/routes.php:7-13
Navigation Integration
The routing system integrates into the Nextcloud sidebar or top navigation via the info.xml configuration. It defines a default navigation entry that points to the view#index route.
Sources: appinfo/info.xml:31-36
Client-Side Routing and URL Resolution
The frontend utilizes @nextcloud/router to resolve server-side routes into usable URLs within the Vue components. The routing logic on the client side is primarily responsible for identifying the fileId from the environment and constructing the API request path for file content.
URL Construction Flow
The application follows a specific sequence to determine which file to load based on the current URL or the DOM state:
The application attempts to resolve the fileId from three sources in order of priority:
- Component Props (
fileId). - Data attributes on the container element (
data-fileIds). - URL search parameters (
fileIdsorfileId).
Sources: src/App.vue:30-49
API Endpoint Generation
Once a fileId is resolved, the system uses the generateUrl utility to create the final endpoint for the CAD content:
fileUrl.value = generateUrl('/apps/cad_viewer/api/file/{fileId}/content', { fileId: fid as string })
Sources: src/App.vue:52
Component-Based Navigation
The frontend architecture uses vue-router as defined in the project dependencies to manage internal state, although the primary logic in App.vue focuses on the transition from the Nextcloud interface to the CAD canvas.
Request Lifecycle Sequence
The following diagram illustrates the sequence from the initial route hit to the successful loading of a CAD file via the routing and API system:
Conclusion
The routing system of the Nextcloud CAD Viewer provides a robust mechanism for mapping Nextcloud file entities to a web-based viewing environment. By leveraging standard Nextcloud route registration and dynamic client-side parameter resolution, the system allows for seamless transitions from the file browser to the CAD viewer while ensuring that the backend can securely serve CAD data through defined API endpoints.