Skip to main content

CadViewer

CadViewer

DXF drawings rendered with WebGL, with layers, pan and zoom, cursor coordinates and light or dark backgrounds

Tags: viewer cad dxf drawing autocad webgl

CadViewer draws ASCII DXF files with WebGL using dxf-viewer (opens in new tab), which brings three.js. Lines, polylines, arcs, circles, ellipses, splines, hatches, solids, text, dimensions and blocks draw in their layer colours. Colours are adjusted so they stay visible on the chosen background.

Import​

<script>
  import { CadViewer } from '@classic-homes/viewer-svelte/cad';
</script>

Setup​

npm install @classic-homes/viewer-svelte dxf-viewer

Drawings need at least one font for their text (TTF, OTF or WOFF; not WOFF2): without fonts, no text is drawn. Parsing can run in a worker:

import { configureCad } from '@classic-homes/viewer-svelte/cad';
import CadWorker from '@classic-homes/viewer-svelte/cad/worker?worker';

configureCad({ worker: () => new CadWorker(), fonts: ['/fonts/NotoSans-Regular.ttf'] });

Fonts are tried in order until one has the glyph, so add a CJK font after a Latin one if your drawings need it.

Basic Usage​

<script lang="ts">
  import { loadSource } from '@classic-homes/viewer-svelte';
  import { CadViewer } from '@classic-homes/viewer-svelte/cad';
</script>

{#await loadSource('/plans/lot-14-site-plan.dxf') then source}
  <CadViewer {source} kind="dxf" background="dark" showLayers class="h-[80vh]" />
{/await}

Props​

Prop Type Default Description
source LoadedSource required Loaded bytes plus name and MIME hints
kind RenderableKind required 'dxf'
background 'theme' | 'dark' | 'light' 'theme' Canvas background; theme follows the app's background and dark mode
showLayers boolean false Open the layer panel on load
fonts string[] - Font URLs for this viewer, instead of the ones from configureCad
downloadSource { bytes: Uint8Array; name?: string; mime?: string } - What Download saves, when source was derived from another file
notice string - Note under the toolbar, e.g. what a conversion could not show
hideToolbar boolean false Hide the toolbar
onready () => void - The drawing is on screen
onerror (error: ViewerError) => void - The drawing could not be read, or WebGL is unavailable
class string - Classes for the outer element

Features​

  • Layer panel: show or hide each layer, show all, hide all, and a filter when there are many layers.
  • Toolbar: zoom, fit, light/dark background, layers, print (the current view, on white), download and fullscreen.
  • The corner readout shows the cursor position in drawing units ($INSUNITS), with as many decimals as the zoom level needs.
  • Files older than AutoCAD 2007 are decoded with the code page named in their header.
  • Binary DXF is not supported. The viewer needs WebGL; without it, it says so and offers the download.

Accessibility​

  • The drawing is focusable. Arrow keys pan (Shift for bigger steps), + and - zoom, 0 fits; Ctrl/Cmd + +/-/0 work too.
  • Drag pans and the wheel zooms around the pointer; pinch zooms on touch screens.
  • The canvas is an image named after the file, and a visually hidden summary gives the AutoCAD release, layer count and units.
  • Layer checkboxes are labelled with the layer name.
  • DwgViewer: DWG files, converted to DXF in the browser
  • DocumentViewer: detects the format and loads the right viewer
On this page