Frontend Application Setup

Relevant source files

The following files were used as context for generating this wiki page:

• src/App.vue
• src/utils/cadLoader.ts
• package.json
• webpack.config.js
• css/cad-viewer.css
• AGENTS.md

The frontend of the Nextcloud CAD Viewer is a modern web application built with Vue 3 and TypeScript, designed to provide high-performance rendering of DWG and DXF files directly in the browser. It leverages WebGL technology through the @mlightcad/cad-viewer library to ensure smooth interactions such as zooming and panning without requiring backend server rendering.

The application is integrated into the Nextcloud environment as a native app, utilizing Nextcloud's routing and styling patterns while providing a specialized workspace for CAD data. The frontend manages the lifecycle of the CAD viewer instance, handles file fetching through secure Nextcloud API endpoints, and provides a responsive UI for different device types.
Sources: README.md:12-21, AGENTS.md:10-12, package.json:28-40

Core Architecture and Frameworks

The application architecture is centered around a Vue 3 composition API structure. It utilizes several key libraries to provide its functionality:

• Vue 3: The primary reactive framework for UI components and state management.
• Element Plus: A Vue 3 component library used for UI elements like buttons and icons.
• @mlightcad/cad-viewer: The core engine responsible for parsing and rendering CAD files.
• Webpack: The build tool used to bundle assets into a single cad-viewer.js file for Nextcloud to load.

Frontend Technology Stack

Library	Version	Purpose
vue	3.5.34	UI Framework
@mlightcad/cad-viewer	1.5.0	CAD Rendering Engine
element-plus	2.13.6	UI Component Library
axios	1.16.1	HTTP Client for API requests
typescript	5.4.0	Static Typing

Sources: package.json:28-40, package.json:76-78

Application Lifecycle and Bootstrapping

The application entry point is src/main.ts (referenced in the webpack config), which initializes the Vue environment. The core logic for mounting the viewer resides in src/utils/cadLoader.ts, which creates a Vue app instance specifically for the CAD viewer component.

Initialization Flow

The application follows a specific sequence to resolve the file ID and load the viewer:

1. File ID Resolution: The app attempts to find a file ID via component props, data attributes on the container (data-file-ids), or URL search parameters.
2. URL Generation: It uses @nextcloud/router to generate a secure internal API path: /apps/cad_viewer/api/file/{fileId}/content.
3. Viewer Mounting: The loadCADViewer utility mounts the @mlightcad/cad-viewer component into the DOM.

CAD Loader Utility

The src/utils/cadLoader.ts file acts as the bridge between the Nextcloud app and the MLightCAD engine. It defines the interface for viewer instances and handles the mounting/unmounting of the rendering engine.

Key Functions and Interfaces

• loadCADViewer(container, options): An asynchronous function that initializes the CAD viewer. It configures the locale (default 'en'), theme (default 'dark'), and background color (0x1e1e1e).
• ViewerInstance: An interface representing the active viewer, providing a loadFile method for dynamic updates and a dispose method to clean up the Vue app instance.
• isSupportedCADFormat(mimeType): A utility that validates if a file is a supported DWG or DXF format based on its MIME type.

Build System and Configuration

The application uses Webpack to compile TypeScript and Vue SFCs (Single File Components) into a format compatible with Nextcloud.

Webpack Integration

The build process outputs a single library file named cad-viewer.js located in the js/ directory. This file is registered to the global window object as CadViewer.

Significant Build Configurations:

• Polyfills: The configuration includes empty polyfills for fs, path, and crypto to ensure compatibility with browser environments where these Node.js modules are unavailable.
• Loaders: Uses vue-loader for .vue files, babel-loader for JS/TS, and style-loader/css-loader for styling.
• Alias Management: Maps @ to the src directory and provides specific resolutions for three.js examples used by the CAD engine.

Sources: webpack.config.js:5-12, webpack.config.js:41-51

User Interface and Styling

The UI is designed to be full-height and responsive, filling the Nextcloud content area.

Layout Structure

The css/cad-viewer.css file defines a flexbox-based layout. The main container (#cad-viewer-container) is set to min-height: 100vh to ensure the drawing area consumes the entire viewport.

UI Components and States

• Loading State: A centered spinner with the message "Loading CAD Viewer...".
• Error State: Displays error messages (e.g., "No file selected") and provides a "Retry" button that triggers the retryLoad function in App.vue.
• Canvas Area: The cad-viewer-canvas class ensures the <canvas> element injected by the rendering engine scales to 100% width and height.

Sources: src/App.vue:3-13, css/cad-viewer.css:8-16, css/cad-viewer.css:30-41

Development Workflow

For developers, the project requires Node.js 24+ and pnpm 10+. Due to peer dependency conflicts in specific CAD packages, the frontend dependencies must be installed using the --legacy-peer-deps flag.

Common Commands:

• npm run dev: Starts webpack in watch mode for active development.
• npm run build: Generates the production-ready bundle.
• npm run lint: Executes ESLint on the src/ directory to ensure code quality.
• npm test: Runs Jest-based unit tests (e.g., for cadLoader utilities).

Sources: package.json:14-20, AGENTS.md:15-26, tests/unit/cadLoader.spec.ts:1-5

Conclusion

The frontend setup of the Nextcloud CAD Viewer is a specialized implementation of the MLightCAD viewer within a Vue 3 framework. By utilizing a robust build pipeline and clear utility abstractions for loading CAD data, the application provides a seamless, high-performance experience for viewing technical drawings within the Nextcloud ecosystem.