@cadview/svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Wisnu Wicaksono
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# @cadview/svelte
+
+Svelte 5 wrapper for `@cadview/core` — a CAD/DXF file viewer.
+
+## Installation
+
+```bash
+npm install @cadview/core @cadview/svelte
+```
+
+## Usage
+
+```svelte
+<script>
+  import { CadViewer } from '@cadview/svelte';
+
+  let file = $state(null);
+</script>
+
+<input type="file" accept=".dxf" onchange={(e) => file = e.target.files?.[0]} />
+
+<div style="width: 100%; height: 100vh;">
+  <CadViewer
+    {file}
+    theme="dark"
+    tool="pan"
+    onselect={(e) => console.log('Selected:', e.entity.type)}
+    onmeasure={(e) => console.log('Distance:', e.distance)}
+  />
+</div>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `file` | `File \| null` | — | DXF file to load |
+| `theme` | `'dark' \| 'light'` | `'dark'` | Color theme |
+| `tool` | `'pan' \| 'select' \| 'measure'` | `'pan'` | Active tool |
+| `options` | `CadViewerOptions` | — | Additional viewer options |
+| `onselect` | `(e: SelectEvent) => void` | — | Selection callback |
+| `onmeasure` | `(e: MeasureEvent) => void` | — | Measurement callback |
+| `onviewchange` | `(vt: ViewTransform) => void` | — | View change callback |
+| `onlayersloaded` | `(layers: DxfLayer[]) => void` | — | Layers loaded callback |
+
+Requires Svelte 5 (runes mode).
+
+## License
+
+MIT

package/dist/CadViewer.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import {
+    CadViewer as CoreCadViewer,
+    type CadViewerOptions,
+    type DxfLayer,
+    type SelectEvent,
+    type MeasureEvent,
+    type ViewTransform,
+    type Tool,
+    type Theme,
+  } from '@cadview/core';
+
+  interface Props {
+    file?: File | ArrayBuffer | string | null;
+    theme?: Theme;
+    tool?: Tool;
+    options?: Omit<CadViewerOptions, 'theme' | 'initialTool'>;
+    class?: string;
+    onselect?: (event: SelectEvent) => void;
+    onmeasure?: (event: MeasureEvent) => void;
+    onviewchange?: (transform: ViewTransform) => void;
+    onlayersloaded?: (layers: DxfLayer[]) => void;
+  }
+
+  let {
+    file = null,
+    theme = 'dark',
+    tool = 'pan',
+    options = {},
+    class: className = '',
+    onselect,
+    onmeasure,
+    onviewchange,
+    onlayersloaded,
+  }: Props = $props();
+
+  let canvas: HTMLCanvasElement;
+  let viewer: CoreCadViewer | null = $state(null);
+
+  // Initialize viewer — untrack reactive reads to prevent re-creation
+  $effect(() => {
+    if (!canvas) return;
+
+    const initialTheme = untrack(() => theme);
+    const initialTool = untrack(() => tool);
+    const initialOptions = untrack(() => options);
+
+    const v = new CoreCadViewer(canvas, {
+      theme: initialTheme,
+      initialTool: initialTool,
+      ...initialOptions,
+    });
+    viewer = v;
+
+    return () => {
+      v.destroy();
+      viewer = null;
+    };
+  });
+
+  // React to theme changes
+  $effect(() => {
+    viewer?.setTheme(theme);
+  });
+
+  // React to tool changes
+  $effect(() => {
+    viewer?.setTool(tool);
+  });
+
+  // React to file changes
+  $effect(() => {
+    if (!viewer || !file) return;
+    const v = viewer;
+
+    if (file instanceof File) {
+      v.loadFile(file).then(
+        () => { untrack(() => onlayersloaded)?.(v.getLayers()); },
+        (err: unknown) => { console.error('CadViewer: failed to load file', err); },
+      );
+    } else if (file instanceof ArrayBuffer) {
+      v.loadArrayBuffer(file);
+      untrack(() => onlayersloaded)?.(v.getLayers());
+    } else if (typeof file === 'string') {
+      v.loadString(file);
+      untrack(() => onlayersloaded)?.(v.getLayers());
+    }
+  });
+
+  // Event listener management
+  $effect(() => {
+    if (!viewer) return;
+    const v = viewer;
+
+    const cleanups: Array<() => void> = [];
+
+    if (onselect) {
+      v.on('select', onselect);
+      cleanups.push(() => { v.off('select', onselect!); });
+    }
+    if (onmeasure) {
+      v.on('measure', onmeasure);
+      cleanups.push(() => { v.off('measure', onmeasure!); });
+    }
+    if (onviewchange) {
+      v.on('viewchange', onviewchange);
+      cleanups.push(() => { v.off('viewchange', onviewchange!); });
+    }
+
+    return () => { cleanups.forEach((c) => { c(); }); };
+  });
+
+  export function getViewer(): CoreCadViewer | null {
+    return viewer;
+  }
+
+  export function fitToView(): void {
+    viewer?.fitToView();
+  }
+
+  export function getLayers(): DxfLayer[] {
+    return viewer?.getLayers() ?? [];
+  }
+
+  export function setLayerVisible(name: string, visible: boolean): void {
+    viewer?.setLayerVisible(name, visible);
+  }
+</script>
+
+<div class={className} style="position: relative; overflow: hidden;">
+  <canvas
+    bind:this={canvas}
+    style="display: block; width: 100%; height: 100%;"
+  ></canvas>
+</div>

package/dist/CadViewer.svelte.d.ts

@@ -0,0 +1,21 @@
+import { CadViewer as CoreCadViewer, type CadViewerOptions, type DxfLayer, type SelectEvent, type MeasureEvent, type ViewTransform, type Tool, type Theme } from '@cadview/core';
+interface Props {
+    file?: File | ArrayBuffer | string | null;
+    theme?: Theme;
+    tool?: Tool;
+    options?: Omit<CadViewerOptions, 'theme' | 'initialTool'>;
+    class?: string;
+    onselect?: (event: SelectEvent) => void;
+    onmeasure?: (event: MeasureEvent) => void;
+    onviewchange?: (transform: ViewTransform) => void;
+    onlayersloaded?: (layers: DxfLayer[]) => void;
+}
+declare const CadViewer: import("svelte").Component<Props, {
+    getViewer: () => CoreCadViewer | null;
+    fitToView: () => void;
+    getLayers: () => DxfLayer[];
+    setLayerVisible: (name: string, visible: boolean) => void;
+}, "">;
+type CadViewer = ReturnType<typeof CadViewer>;
+export default CadViewer;
+//# sourceMappingURL=CadViewer.svelte.d.ts.map

package/dist/CadViewer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CadViewer.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CadViewer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EACH,SAAS,IAAI,aAAa,EAC1B,KAAK,gBAAgB,EACrB,KAAK,QAAQ,EACb,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,IAAI,EACT,KAAK,KAAK,EACX,MAAM,eAAe,CAAC;AAGvB,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,WAAW,GAAG,MAAM,GAAG,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,aAAa,CAAC,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CAC/C;AAqHH,QAAA,MAAM,SAAS;qBAvBU,aAAa,GAAG,IAAI;qBAIpB,IAAI;qBAIJ,QAAQ,EAAE;4BAID,MAAM,WAAW,OAAO,KAAG,IAAI;MAWV,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CadViewer } from './CadViewer.svelte';
+export type { SelectEvent, MeasureEvent, ViewTransform, DxfLayer, DxfDocument, DxfEntity, Tool, Theme, CadViewerOptions, } from '@cadview/core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,YAAY,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,EACX,SAAS,EACT,IAAI,EACJ,KAAK,EACL,gBAAgB,GACjB,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { default as CadViewer } from './CadViewer.svelte';

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@cadview/svelte",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Svelte 5 wrapper for @cadview/core — CAD/DXF file viewer component",
+  "author": "Wisnu Wicaksono",
+  "keywords": [
+    "cad",
+    "dxf",
+    "viewer",
+    "svelte",
+    "svelte5",
+    "component",
+    "canvas"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wiscaksono/cadview.git",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://github.com/wiscaksono/cadview/tree/main/packages/svelte#readme",
+  "bugs": {
+    "url": "https://github.com/wiscaksono/cadview/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "main": "./dist/index.js",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "!dist/**/*.test.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "@cadview/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.7.0",
+    "@cadview/core": "0.1.0"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "svelte-package",
+    "dev": "svelte-package --watch",
+    "typecheck": "svelte-check"
+  }
+}