@forthtech/dwgviewer

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

Installation

npm install @forthtech/dwgviewer

Basic Usage

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

function App() {
  const dwgViewerRef = useRef<DwgViewerRef>(null);

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

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

  return (
    <div style={{ height: '600px', width: '800px' }}>
      <DwgViewer
        ref={dwgViewerRef}
        onFileLoad={handleFileLoad}
        onError={handleError}
        showControls={true}
        showConsole={false}
      />
    </div>
  );
}

export default App;

Props

DwgViewerProps

| 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:

const dwgViewerRef = useRef<DwgViewerRef>(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:

// 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

Custom File Handling

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);
}

WebAssembly Module Loading

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.