@forthtech/dwgviewer

A React component for viewing DWG (AutoCAD) files in web browsers using WebAssembly.

Installation

``bash
npm install @forthtech/dwgviewer
`

Basic Usage

`tsx
import React, { useRef } from 'react';
import { DwgViewer, DwgViewerRef } from '@forthtech/dwgviewer';

function App() {
const dwgViewerRef = useRef(null);

const handleFileLoad = (filename: string) => {
console.log('File loaded:', filename);
};

const handleError = (error: Error) => {
console.error('Error:', error);
};

return (


export default App;
`

Props

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| className | string | '' | CSS class name for the container |
| style | React.CSSProperties | {} | Inline styles for the container |
| onFileLoad | (filename: string) => void | - | Called when a DWG file is loaded |
| onError | (error: Error) => void | - | Called when an error occurs |
| onModuleReady | (module: DwgModule) => void | - | Called when WebAssembly module is ready |
| showControls | boolean | true | Show file upload and download controls |
| showConsole | boolean | false | Show console output textarea |
| wasmPath | string | './DrawingWeb.wasm' | Path to WebAssembly file |
| jsPath | string | './DrawingWeb.js' | Path to WebAssembly JS loader |
| assetsPath | string | '/assets' | Path for uploaded files |

Imperative API

The component exposes methods through a ref:

`tsx
const dwgViewerRef = useRef(null);

// Open a file programmatically
const file = new File([...], 'drawing.dwg');
await dwgViewerRef.current?.openFile(file);

// Zoom to fit all content
dwgViewerRef.current?.zoomExtents();

// Manual zoom
dwgViewerRef.current?.zoom(-0.1, mouseX, mouseY);

// Download current file
dwgViewerRef.current?.downloadFile('drawing.dwg');

// Get WebAssembly module
const module = dwgViewerRef.current?.getModule();
`

Drawing Tools

You can enable different drawing tools using the global enableDragger function:

`tsx
// Enable drawing tools
window.enableDragger?.('line'); // Line drawing
window.enableDragger?.('circle'); // Circle drawing
window.enableDragger?.('point'); // Point placement
window.enableDragger?.('polyline'); // Polyline drawing
window.enableDragger?.('text'); // Text placement
`

File Requirements

Make sure to include the WebAssembly files in your public directory:
- DrawingWeb.js - WebAssembly loader
- DrawingWeb.wasm - WebAssembly binary
- statemachine.js - Drawing state machine

Mouse Controls

- Left Click + Drag: Pan the view
- Right Click + Drag: Orbit around the model
- Mouse Wheel: Zoom in/out
- Middle Click: Zoom to fit all content

Advanced Usage

$3

`tsx
import { FileHandler } from '@forthtech/dwgviewer';

const module = dwgViewerRef.current?.getModule();
if (module) {
const fileHandler = new FileHandler(module);

// Validate DWG file
const isValid = fileHandler.validateDwgFile(file);

// Upload file manually
const filename = await fileHandler.uploadFile(file);

// Download file
fileHandler.downloadFile(filename);
}
`

$3

`tsx
import { wasmLoader } from '@forthtech/dwgviewer';

// Load module manually
const module = await wasmLoader.loadModule('./DrawingWeb.js');
console.log('Module loaded:', module);
`

Example Application

See the example` directory for a complete React application demonstrating all features.

License

MIT

Credits

Based on the original DWG HTML viewer project by jigo961257.