@cadview/vue 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,73 @@
+# @cadview/vue
+
+Vue 3 wrapper for `@cadview/core` — a CAD/DXF file viewer.
+
+## Installation
+
+```bash
+npm install @cadview/core @cadview/vue
+```
+
+## Usage
+
+```vue
+<template>
+  <input type="file" accept=".dxf" @change="onFileChange" />
+  <CadViewer
+    :file="file"
+    theme="dark"
+    tool="pan"
+    @select="onSelect"
+    @measure="onMeasure"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { CadViewer } from '@cadview/vue';
+
+const file = ref(null);
+
+function onFileChange(e) {
+  file.value = e.target.files?.[0] ?? null;
+}
+
+function onSelect(e) {
+  console.log('Selected:', e.entity.type);
+}
+
+function onMeasure(e) {
+  console.log('Distance:', e.distance);
+}
+</script>
+```
+
+## 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 |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `select` | `SelectEvent` | Entity selected |
+| `measure` | `MeasureEvent` | Measurement completed |
+| `viewchange` | `ViewTransform` | View panned/zoomed |
+| `layersloaded` | `DxfLayer[]` | Layers loaded from DXF |
+
+## Composable
+
+```ts
+import { useCadViewer } from '@cadview/vue';
+
+const { canvasRef, viewer } = useCadViewer({ theme: 'dark' });
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,136 @@
+'use strict';
+
+var vue = require('vue');
+var core = require('@cadview/core');
+
+// src/CadViewer.tsx
+var CadViewer = vue.defineComponent({
+  name: "CadViewer",
+  props: {
+    file: {
+      type: [File, ArrayBuffer, String],
+      default: null
+    },
+    theme: {
+      type: String,
+      default: "dark"
+    },
+    tool: {
+      type: String,
+      default: "pan"
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["select", "measure", "viewchange", "layers-loaded"],
+  setup(props, { emit, expose }) {
+    const canvasRef = vue.ref(null);
+    const viewerRef = vue.ref(null);
+    vue.onMounted(() => {
+      if (!canvasRef.value) return;
+      const viewer = new core.CadViewer(canvasRef.value, {
+        theme: props.theme,
+        initialTool: props.tool,
+        ...props.options
+      });
+      viewerRef.value = viewer;
+      viewer.on("select", (e) => emit("select", e));
+      viewer.on("measure", (e) => emit("measure", e));
+      viewer.on("viewchange", (vt) => emit("viewchange", vt));
+    });
+    vue.onUnmounted(() => {
+      viewerRef.value?.destroy();
+      viewerRef.value = null;
+    });
+    vue.watch(
+      () => props.theme,
+      (newTheme) => {
+        viewerRef.value?.setTheme(newTheme);
+      }
+    );
+    vue.watch(
+      () => props.tool,
+      (newTool) => {
+        viewerRef.value?.setTool(newTool);
+      }
+    );
+    vue.watch(
+      () => props.file,
+      async (newFile) => {
+        const viewer = viewerRef.value;
+        if (!viewer || !newFile) return;
+        try {
+          if (newFile instanceof File) {
+            await viewer.loadFile(newFile);
+          } else if (newFile instanceof ArrayBuffer) {
+            viewer.loadArrayBuffer(newFile);
+          } else if (typeof newFile === "string") {
+            viewer.loadString(newFile);
+          }
+          emit("layers-loaded", viewer.getLayers());
+        } catch (err) {
+          console.error("CadViewer: failed to load file", err);
+        }
+      }
+    );
+    expose({
+      getViewer: () => viewerRef.value,
+      fitToView: () => viewerRef.value?.fitToView(),
+      getLayers: () => viewerRef.value?.getLayers() ?? [],
+      setLayerVisible: (name, visible) => viewerRef.value?.setLayerVisible(name, visible)
+    });
+    return () => vue.h(
+      "div",
+      { style: { position: "relative", overflow: "hidden" } },
+      [
+        vue.h("canvas", {
+          ref: canvasRef,
+          style: { display: "block", width: "100%", height: "100%" }
+        })
+      ]
+    );
+  }
+});
+function useCadViewer(canvasRef, options) {
+  const viewer = vue.ref(null);
+  const layers = vue.ref([]);
+  const isLoaded = vue.ref(false);
+  vue.onMounted(() => {
+    if (!canvasRef.value) return;
+    viewer.value = new core.CadViewer(canvasRef.value, options);
+  });
+  vue.onUnmounted(() => {
+    viewer.value?.destroy();
+    viewer.value = null;
+  });
+  const loadFile = async (file) => {
+    if (!viewer.value) return;
+    await viewer.value.loadFile(file);
+    layers.value = viewer.value.getLayers();
+    isLoaded.value = true;
+  };
+  const loadString = (dxf) => {
+    if (!viewer.value) return;
+    viewer.value.loadString(dxf);
+    layers.value = viewer.value.getLayers();
+    isLoaded.value = true;
+  };
+  return {
+    viewer,
+    layers,
+    isLoaded,
+    loadFile,
+    loadString,
+    fitToView: () => viewer.value?.fitToView(),
+    setLayerVisible: (name, visible) => viewer.value?.setLayerVisible(name, visible),
+    setTheme: (theme) => viewer.value?.setTheme(theme),
+    setTool: (tool) => viewer.value?.setTool(tool)
+  };
+}
+
+exports.CadViewer = CadViewer;
+exports.useCadViewer = useCadViewer;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CadViewer.tsx","../src/useCadViewer.ts"],"names":["defineComponent","ref","onMounted","CoreCadViewer","onUnmounted","watch","h","CadViewer"],"mappings":"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","file":"index.cjs","sourcesContent":["import {\n  defineComponent,\n  ref,\n  onMounted,\n  onUnmounted,\n  watch,\n  h,\n  type PropType,\n} from 'vue';\nimport {\n  CadViewer as CoreCadViewer,\n  type CadViewerOptions,\n  type DxfLayer,\n  type SelectEvent,\n  type MeasureEvent,\n  type ViewTransform,\n  type Tool,\n  type Theme,\n} from '@cadview/core';\n\nexport const CadViewer = defineComponent({\n  name: 'CadViewer',\n\n  props: {\n    file: {\n      type: [File, ArrayBuffer, String] as PropType<File | ArrayBuffer | string | null>,\n      default: null,\n    },\n    theme: {\n      type: String as PropType<Theme>,\n      default: 'dark',\n    },\n    tool: {\n      type: String as PropType<Tool>,\n      default: 'pan',\n    },\n    options: {\n      type: Object as PropType<Omit<CadViewerOptions, 'theme' | 'initialTool'>>,\n      default: () => ({}),\n    },\n  },\n\n  emits: ['select', 'measure', 'viewchange', 'layers-loaded'],\n\n  setup(props, { emit, expose }) {\n    const canvasRef = ref<HTMLCanvasElement | null>(null);\n    const viewerRef = ref<CoreCadViewer | null>(null);\n\n    onMounted(() => {\n      if (!canvasRef.value) return;\n\n      const viewer = new CoreCadViewer(canvasRef.value, {\n        theme: props.theme,\n        initialTool: props.tool,\n        ...props.options,\n      });\n      viewerRef.value = viewer;\n\n      viewer.on('select', (e: SelectEvent) => emit('select', e));\n      viewer.on('measure', (e: MeasureEvent) => emit('measure', e));\n      viewer.on('viewchange', (vt: ViewTransform) => emit('viewchange', vt));\n    });\n\n    onUnmounted(() => {\n      viewerRef.value?.destroy();\n      viewerRef.value = null;\n    });\n\n    watch(\n      () => props.theme,\n      (newTheme) => {\n        viewerRef.value?.setTheme(newTheme);\n      },\n    );\n\n    watch(\n      () => props.tool,\n      (newTool) => {\n        viewerRef.value?.setTool(newTool);\n      },\n    );\n\n    watch(\n      () => props.file,\n      async (newFile) => {\n        const viewer = viewerRef.value;\n        if (!viewer || !newFile) return;\n\n        try {\n          if (newFile instanceof File) {\n            await viewer.loadFile(newFile);\n          } else if (newFile instanceof ArrayBuffer) {\n            viewer.loadArrayBuffer(newFile);\n          } else if (typeof newFile === 'string') {\n            viewer.loadString(newFile);\n          }\n\n          emit('layers-loaded', viewer.getLayers() as DxfLayer[]);\n        } catch (err) {\n          console.error('CadViewer: failed to load file', err);\n        }\n      },\n    );\n\n    expose({\n      getViewer: () => viewerRef.value,\n      fitToView: () => viewerRef.value?.fitToView(),\n      getLayers: () => viewerRef.value?.getLayers() ?? [],\n      setLayerVisible: (name: string, visible: boolean) =>\n        viewerRef.value?.setLayerVisible(name, visible),\n    });\n\n    return () =>\n      h(\n        'div',\n        { style: { position: 'relative', overflow: 'hidden' } },\n        [\n          h('canvas', {\n            ref: canvasRef,\n            style: { display: 'block', width: '100%', height: '100%' },\n          }),\n        ],\n      );\n  },\n});\n","import { ref, onMounted, onUnmounted, type Ref } from 'vue';\nimport {\n  CadViewer,\n  type CadViewerOptions,\n  type DxfLayer,\n  type Theme,\n  type Tool,\n} from '@cadview/core';\n\nexport function useCadViewer(\n  canvasRef: Ref<HTMLCanvasElement | null>,\n  options?: CadViewerOptions,\n) {\n  const viewer = ref<CadViewer | null>(null);\n  const layers = ref<DxfLayer[]>([]);\n  const isLoaded = ref(false);\n\n  onMounted(() => {\n    if (!canvasRef.value) return;\n    viewer.value = new CadViewer(canvasRef.value, options);\n  });\n\n  onUnmounted(() => {\n    viewer.value?.destroy();\n    viewer.value = null;\n  });\n\n  const loadFile = async (file: File) => {\n    if (!viewer.value) return;\n    await viewer.value.loadFile(file);\n    layers.value = viewer.value.getLayers();\n    isLoaded.value = true;\n  };\n\n  const loadString = (dxf: string) => {\n    if (!viewer.value) return;\n    viewer.value.loadString(dxf);\n    layers.value = viewer.value.getLayers();\n    isLoaded.value = true;\n  };\n\n  return {\n    viewer,\n    layers,\n    isLoaded,\n    loadFile,\n    loadString,\n    fitToView: () => viewer.value?.fitToView(),\n    setLayerVisible: (name: string, visible: boolean) =>\n      viewer.value?.setLayerVisible(name, visible),\n    setTheme: (theme: Theme) => viewer.value?.setTheme(theme),\n    setTool: (tool: Tool) => viewer.value?.setTool(tool),\n  };\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,145 @@
+import * as vue from 'vue';
+import { PropType, Ref } from 'vue';
+import * as _cadview_core from '@cadview/core';
+import { Theme, Tool, CadViewerOptions, DxfLayer, CadViewer as CadViewer$1 } from '@cadview/core';
+export { CadViewerOptions, DxfDocument, DxfEntity, DxfLayer, MeasureEvent, SelectEvent, Theme, Tool, ViewTransform } from '@cadview/core';
+
+declare const CadViewer: vue.DefineComponent<vue.ExtractPropTypes<{
+    file: {
+        type: PropType<File | ArrayBuffer | string | null>;
+        default: null;
+    };
+    theme: {
+        type: PropType<Theme>;
+        default: string;
+    };
+    tool: {
+        type: PropType<Tool>;
+        default: string;
+    };
+    options: {
+        type: PropType<Omit<CadViewerOptions, "theme" | "initialTool">>;
+        default: () => {};
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("select" | "measure" | "viewchange" | "layers-loaded")[], "select" | "measure" | "viewchange" | "layers-loaded", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    file: {
+        type: PropType<File | ArrayBuffer | string | null>;
+        default: null;
+    };
+    theme: {
+        type: PropType<Theme>;
+        default: string;
+    };
+    tool: {
+        type: PropType<Tool>;
+        default: string;
+    };
+    options: {
+        type: PropType<Omit<CadViewerOptions, "theme" | "initialTool">>;
+        default: () => {};
+    };
+}>> & Readonly<{
+    onSelect?: ((...args: any[]) => any) | undefined;
+    onMeasure?: ((...args: any[]) => any) | undefined;
+    onViewchange?: ((...args: any[]) => any) | undefined;
+    "onLayers-loaded"?: ((...args: any[]) => any) | undefined;
+}>, {
+    theme: Theme;
+    file: string | File | ArrayBuffer | null;
+    tool: Tool;
+    options: Omit<CadViewerOptions, "theme" | "initialTool">;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+declare function useCadViewer(canvasRef: Ref<HTMLCanvasElement | null>, options?: CadViewerOptions): {
+    viewer: Ref<{
+        loadFile: (file: File) => Promise<void>;
+        loadString: (dxf: string) => void;
+        loadArrayBuffer: (buffer: ArrayBuffer) => void;
+        clearDocument: () => void;
+        fitToView: () => void;
+        zoomTo: (scale: number) => void;
+        panTo: (worldX: number, worldY: number) => void;
+        getViewTransform: () => _cadview_core.ViewTransform;
+        getZoomSpeed: () => number;
+        getLayers: () => DxfLayer[];
+        setLayerVisible: (name: string, visible: boolean) => void;
+        setLayerColor: (name: string, color: string) => void;
+        setTheme: (theme: Theme) => void;
+        getTheme: () => Theme;
+        setBackgroundColor: (color: string) => void;
+        setTool: (tool: Tool) => void;
+        getTool: () => Tool;
+        on: <K extends keyof _cadview_core.CadViewerEventMap>(event: K, callback: (data: _cadview_core.CadViewerEventMap[K]) => void) => void;
+        off: <K extends keyof _cadview_core.CadViewerEventMap>(event: K, callback: (data: _cadview_core.CadViewerEventMap[K]) => void) => void;
+        getDocument: () => _cadview_core.DxfDocument | null;
+        getEntities: () => _cadview_core.DxfEntity[];
+        resize: () => void;
+        destroy: () => void;
+        requestRender: () => void;
+        handlePan: (dx: number, dy: number) => void;
+        handleZoom: (screenX: number, screenY: number, factor: number) => void;
+        handleClick: (screenX: number, screenY: number) => void;
+        handleMouseMove: (screenX: number, screenY: number) => void;
+    } | null, CadViewer$1 | {
+        loadFile: (file: File) => Promise<void>;
+        loadString: (dxf: string) => void;
+        loadArrayBuffer: (buffer: ArrayBuffer) => void;
+        clearDocument: () => void;
+        fitToView: () => void;
+        zoomTo: (scale: number) => void;
+        panTo: (worldX: number, worldY: number) => void;
+        getViewTransform: () => _cadview_core.ViewTransform;
+        getZoomSpeed: () => number;
+        getLayers: () => DxfLayer[];
+        setLayerVisible: (name: string, visible: boolean) => void;
+        setLayerColor: (name: string, color: string) => void;
+        setTheme: (theme: Theme) => void;
+        getTheme: () => Theme;
+        setBackgroundColor: (color: string) => void;
+        setTool: (tool: Tool) => void;
+        getTool: () => Tool;
+        on: <K extends keyof _cadview_core.CadViewerEventMap>(event: K, callback: (data: _cadview_core.CadViewerEventMap[K]) => void) => void;
+        off: <K extends keyof _cadview_core.CadViewerEventMap>(event: K, callback: (data: _cadview_core.CadViewerEventMap[K]) => void) => void;
+        getDocument: () => _cadview_core.DxfDocument | null;
+        getEntities: () => _cadview_core.DxfEntity[];
+        resize: () => void;
+        destroy: () => void;
+        requestRender: () => void;
+        handlePan: (dx: number, dy: number) => void;
+        handleZoom: (screenX: number, screenY: number, factor: number) => void;
+        handleClick: (screenX: number, screenY: number) => void;
+        handleMouseMove: (screenX: number, screenY: number) => void;
+    } | null>;
+    layers: Ref<{
+        name: string;
+        color: number;
+        lineType: string;
+        flags: number;
+        lineWeight: number;
+        trueColor?: number | undefined;
+        isOff: boolean;
+        isFrozen: boolean;
+        isLocked: boolean;
+    }[], DxfLayer[] | {
+        name: string;
+        color: number;
+        lineType: string;
+        flags: number;
+        lineWeight: number;
+        trueColor?: number | undefined;
+        isOff: boolean;
+        isFrozen: boolean;
+        isLocked: boolean;
+    }[]>;
+    isLoaded: Ref<boolean, boolean>;
+    loadFile: (file: File) => Promise<void>;
+    loadString: (dxf: string) => void;
+    fitToView: () => void | undefined;
+    setLayerVisible: (name: string, visible: boolean) => void | undefined;
+    setTheme: (theme: Theme) => void | undefined;
+    setTool: (tool: Tool) => void | undefined;
+};
+
+export { CadViewer, useCadViewer };

package/dist/index.d.ts

@@ -0,0 +1,145 @@
+import * as vue from 'vue';
+import { PropType, Ref } from 'vue';
+import * as _cadview_core from '@cadview/core';
+import { Theme, Tool, CadViewerOptions, DxfLayer, CadViewer as CadViewer$1 } from '@cadview/core';
+export { CadViewerOptions, DxfDocument, DxfEntity, DxfLayer, MeasureEvent, SelectEvent, Theme, Tool, ViewTransform } from '@cadview/core';
+
+declare const CadViewer: vue.DefineComponent<vue.ExtractPropTypes<{
+    file: {
+        type: PropType<File | ArrayBuffer | string | null>;
+        default: null;
+    };
+    theme: {
+        type: PropType<Theme>;
+        default: string;
+    };
+    tool: {
+        type: PropType<Tool>;
+        default: string;
+    };
+    options: {
+        type: PropType<Omit<CadViewerOptions, "theme" | "initialTool">>;
+        default: () => {};
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("select" | "measure" | "viewchange" | "layers-loaded")[], "select" | "measure" | "viewchange" | "layers-loaded", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    file: {
+        type: PropType<File | ArrayBuffer | string | null>;
+        default: null;
+    };
+    theme: {
+        type: PropType<Theme>;
+        default: string;
+    };
+    tool: {
+        type: PropType<Tool>;
+        default: string;
+    };
+    options: {
+        type: PropType<Omit<CadViewerOptions, "theme" | "initialTool">>;
+        default: () => {};
+    };
+}>> & Readonly<{
+    onSelect?: ((...args: any[]) => any) | undefined;
+    onMeasure?: ((...args: any[]) => any) | undefined;
+    onViewchange?: ((...args: any[]) => any) | undefined;
+    "onLayers-loaded"?: ((...args: any[]) => any) | undefined;
+}>, {
+    theme: Theme;
+    file: string | File | ArrayBuffer | null;
+    tool: Tool;
+    options: Omit<CadViewerOptions, "theme" | "initialTool">;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+declare function useCadViewer(canvasRef: Ref<HTMLCanvasElement | null>, options?: CadViewerOptions): {
+    viewer: Ref<{
+        loadFile: (file: File) => Promise<void>;
+        loadString: (dxf: string) => void;
+        loadArrayBuffer: (buffer: ArrayBuffer) => void;
+        clearDocument: () => void;
+        fitToView: () => void;
+        zoomTo: (scale: number) => void;
+        panTo: (worldX: number, worldY: number) => void;
+        getViewTransform: () => _cadview_core.ViewTransform;
+        getZoomSpeed: () => number;
+        getLayers: () => DxfLayer[];
+        setLayerVisible: (name: string, visible: boolean) => void;
+        setLayerColor: (name: string, color: string) => void;
+        setTheme: (theme: Theme) => void;
+        getTheme: () => Theme;
+        setBackgroundColor: (color: string) => void;
+        setTool: (tool: Tool) => void;
+        getTool: () => Tool;
+        on: <K extends keyof _cadview_core.CadViewerEventMap>(event: K, callback: (data: _cadview_core.CadViewerEventMap[K]) => void) => void;
+        off: <K extends keyof _cadview_core.CadViewerEventMap>(event: K, callback: (data: _cadview_core.CadViewerEventMap[K]) => void) => void;
+        getDocument: () => _cadview_core.DxfDocument | null;
+        getEntities: () => _cadview_core.DxfEntity[];
+        resize: () => void;
+        destroy: () => void;
+        requestRender: () => void;
+        handlePan: (dx: number, dy: number) => void;
+        handleZoom: (screenX: number, screenY: number, factor: number) => void;
+        handleClick: (screenX: number, screenY: number) => void;
+        handleMouseMove: (screenX: number, screenY: number) => void;
+    } | null, CadViewer$1 | {
+        loadFile: (file: File) => Promise<void>;
+        loadString: (dxf: string) => void;
+        loadArrayBuffer: (buffer: ArrayBuffer) => void;
+        clearDocument: () => void;
+        fitToView: () => void;
+        zoomTo: (scale: number) => void;
+        panTo: (worldX: number, worldY: number) => void;
+        getViewTransform: () => _cadview_core.ViewTransform;
+        getZoomSpeed: () => number;
+        getLayers: () => DxfLayer[];
+        setLayerVisible: (name: string, visible: boolean) => void;
+        setLayerColor: (name: string, color: string) => void;
+        setTheme: (theme: Theme) => void;
+        getTheme: () => Theme;
+        setBackgroundColor: (color: string) => void;
+        setTool: (tool: Tool) => void;
+        getTool: () => Tool;
+        on: <K extends keyof _cadview_core.CadViewerEventMap>(event: K, callback: (data: _cadview_core.CadViewerEventMap[K]) => void) => void;
+        off: <K extends keyof _cadview_core.CadViewerEventMap>(event: K, callback: (data: _cadview_core.CadViewerEventMap[K]) => void) => void;
+        getDocument: () => _cadview_core.DxfDocument | null;
+        getEntities: () => _cadview_core.DxfEntity[];
+        resize: () => void;
+        destroy: () => void;
+        requestRender: () => void;
+        handlePan: (dx: number, dy: number) => void;
+        handleZoom: (screenX: number, screenY: number, factor: number) => void;
+        handleClick: (screenX: number, screenY: number) => void;
+        handleMouseMove: (screenX: number, screenY: number) => void;
+    } | null>;
+    layers: Ref<{
+        name: string;
+        color: number;
+        lineType: string;
+        flags: number;
+        lineWeight: number;
+        trueColor?: number | undefined;
+        isOff: boolean;
+        isFrozen: boolean;
+        isLocked: boolean;
+    }[], DxfLayer[] | {
+        name: string;
+        color: number;
+        lineType: string;
+        flags: number;
+        lineWeight: number;
+        trueColor?: number | undefined;
+        isOff: boolean;
+        isFrozen: boolean;
+        isLocked: boolean;
+    }[]>;
+    isLoaded: Ref<boolean, boolean>;
+    loadFile: (file: File) => Promise<void>;
+    loadString: (dxf: string) => void;
+    fitToView: () => void | undefined;
+    setLayerVisible: (name: string, visible: boolean) => void | undefined;
+    setTheme: (theme: Theme) => void | undefined;
+    setTool: (tool: Tool) => void | undefined;
+};
+
+export { CadViewer, useCadViewer };

package/dist/index.js

@@ -0,0 +1,133 @@
+import { defineComponent, ref, onMounted, onUnmounted, watch, h } from 'vue';
+import { CadViewer as CadViewer$1 } from '@cadview/core';
+
+// src/CadViewer.tsx
+var CadViewer = defineComponent({
+  name: "CadViewer",
+  props: {
+    file: {
+      type: [File, ArrayBuffer, String],
+      default: null
+    },
+    theme: {
+      type: String,
+      default: "dark"
+    },
+    tool: {
+      type: String,
+      default: "pan"
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["select", "measure", "viewchange", "layers-loaded"],
+  setup(props, { emit, expose }) {
+    const canvasRef = ref(null);
+    const viewerRef = ref(null);
+    onMounted(() => {
+      if (!canvasRef.value) return;
+      const viewer = new CadViewer$1(canvasRef.value, {
+        theme: props.theme,
+        initialTool: props.tool,
+        ...props.options
+      });
+      viewerRef.value = viewer;
+      viewer.on("select", (e) => emit("select", e));
+      viewer.on("measure", (e) => emit("measure", e));
+      viewer.on("viewchange", (vt) => emit("viewchange", vt));
+    });
+    onUnmounted(() => {
+      viewerRef.value?.destroy();
+      viewerRef.value = null;
+    });
+    watch(
+      () => props.theme,
+      (newTheme) => {
+        viewerRef.value?.setTheme(newTheme);
+      }
+    );
+    watch(
+      () => props.tool,
+      (newTool) => {
+        viewerRef.value?.setTool(newTool);
+      }
+    );
+    watch(
+      () => props.file,
+      async (newFile) => {
+        const viewer = viewerRef.value;
+        if (!viewer || !newFile) return;
+        try {
+          if (newFile instanceof File) {
+            await viewer.loadFile(newFile);
+          } else if (newFile instanceof ArrayBuffer) {
+            viewer.loadArrayBuffer(newFile);
+          } else if (typeof newFile === "string") {
+            viewer.loadString(newFile);
+          }
+          emit("layers-loaded", viewer.getLayers());
+        } catch (err) {
+          console.error("CadViewer: failed to load file", err);
+        }
+      }
+    );
+    expose({
+      getViewer: () => viewerRef.value,
+      fitToView: () => viewerRef.value?.fitToView(),
+      getLayers: () => viewerRef.value?.getLayers() ?? [],
+      setLayerVisible: (name, visible) => viewerRef.value?.setLayerVisible(name, visible)
+    });
+    return () => h(
+      "div",
+      { style: { position: "relative", overflow: "hidden" } },
+      [
+        h("canvas", {
+          ref: canvasRef,
+          style: { display: "block", width: "100%", height: "100%" }
+        })
+      ]
+    );
+  }
+});
+function useCadViewer(canvasRef, options) {
+  const viewer = ref(null);
+  const layers = ref([]);
+  const isLoaded = ref(false);
+  onMounted(() => {
+    if (!canvasRef.value) return;
+    viewer.value = new CadViewer$1(canvasRef.value, options);
+  });
+  onUnmounted(() => {
+    viewer.value?.destroy();
+    viewer.value = null;
+  });
+  const loadFile = async (file) => {
+    if (!viewer.value) return;
+    await viewer.value.loadFile(file);
+    layers.value = viewer.value.getLayers();
+    isLoaded.value = true;
+  };
+  const loadString = (dxf) => {
+    if (!viewer.value) return;
+    viewer.value.loadString(dxf);
+    layers.value = viewer.value.getLayers();
+    isLoaded.value = true;
+  };
+  return {
+    viewer,
+    layers,
+    isLoaded,
+    loadFile,
+    loadString,
+    fitToView: () => viewer.value?.fitToView(),
+    setLayerVisible: (name, visible) => viewer.value?.setLayerVisible(name, visible),
+    setTheme: (theme) => viewer.value?.setTheme(theme),
+    setTool: (tool) => viewer.value?.setTool(tool)
+  };
+}
+
+export { CadViewer, useCadViewer };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CadViewer.tsx","../src/useCadViewer.ts"],"names":["CoreCadViewer","ref","onMounted","CadViewer","onUnmounted"],"mappings":";;;;AAoBO,IAAM,YAAY,eAAA,CAAgB;AAAA,EACvC,IAAA,EAAM,WAAA;AAAA,EAEN,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,IAAA,EAAM,CAAC,IAAA,EAAM,WAAA,EAAa,MAAM,CAAA;AAAA,MAChC,OAAA,EAAS;AAAA,KACX;AAAA,IACA,KAAA,EAAO;AAAA,MACL,IAAA,EAAM,MAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACX;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,IAAA,EAAM,MAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACX;AAAA,IACA,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,MAAA;AAAA,MACN,OAAA,EAAS,OAAO,EAAC;AAAA;AACnB,GACF;AAAA,EAEA,KAAA,EAAO,CAAC,QAAA,EAAU,SAAA,EAAW,cAAc,eAAe,CAAA;AAAA,EAE1D,KAAA,CAAM,KAAA,EAAO,EAAE,IAAA,EAAM,QAAO,EAAG;AAC7B,IAAA,MAAM,SAAA,GAAY,IAA8B,IAAI,CAAA;AACpD,IAAA,MAAM,SAAA,GAAY,IAA0B,IAAI,CAAA;AAEhD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,UAAU,KAAA,EAAO;AAEtB,MAAA,MAAM,MAAA,GAAS,IAAIA,WAAA,CAAc,SAAA,CAAU,KAAA,EAAO;AAAA,QAChD,OAAO,KAAA,CAAM,KAAA;AAAA,QACb,aAAa,KAAA,CAAM,IAAA;AAAA,QACnB,GAAG,KAAA,CAAM;AAAA,OACV,CAAA;AACD,MAAA,SAAA,CAAU,KAAA,GAAQ,MAAA;AAElB,MAAA,MAAA,CAAO,GAAG,QAAA,EAAU,CAAC,MAAmB,IAAA,CAAK,QAAA,EAAU,CAAC,CAAC,CAAA;AACzD,MAAA,MAAA,CAAO,GAAG,SAAA,EAAW,CAAC,MAAoB,IAAA,CAAK,SAAA,EAAW,CAAC,CAAC,CAAA;AAC5D,MAAA,MAAA,CAAO,GAAG,YAAA,EAAc,CAAC,OAAsB,IAAA,CAAK,YAAA,EAAc,EAAE,CAAC,CAAA;AAAA,IACvE,CAAC,CAAA;AAED,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,SAAA,CAAU,OAAO,OAAA,EAAQ;AACzB,MAAA,SAAA,CAAU,KAAA,GAAQ,IAAA;AAAA,IACpB,CAAC,CAAA;AAED,IAAA,KAAA;AAAA,MACE,MAAM,KAAA,CAAM,KAAA;AAAA,MACZ,CAAC,QAAA,KAAa;AACZ,QAAA,SAAA,CAAU,KAAA,EAAO,SAAS,QAAQ,CAAA;AAAA,MACpC;AAAA,KACF;AAEA,IAAA,KAAA;AAAA,MACE,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,CAAC,OAAA,KAAY;AACX,QAAA,SAAA,CAAU,KAAA,EAAO,QAAQ,OAAO,CAAA;AAAA,MAClC;AAAA,KACF;AAEA,IAAA,KAAA;AAAA,MACE,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,OAAO,OAAA,KAAY;AACjB,QAAA,MAAM,SAAS,SAAA,CAAU,KAAA;AACzB,QAAA,IAAI,CAAC,MAAA,IAAU,CAAC,OAAA,EAAS;AAEzB,QAAA,IAAI;AACF,UAAA,IAAI,mBAAmB,IAAA,EAAM;AAC3B,YAAA,MAAM,MAAA,CAAO,SAAS,OAAO,CAAA;AAAA,UAC/B,CAAA,MAAA,IAAW,mBAAmB,WAAA,EAAa;AACzC,YAAA,MAAA,CAAO,gBAAgB,OAAO,CAAA;AAAA,UAChC,CAAA,MAAA,IAAW,OAAO,OAAA,KAAY,QAAA,EAAU;AACtC,YAAA,MAAA,CAAO,WAAW,OAAO,CAAA;AAAA,UAC3B;AAEA,UAAA,IAAA,CAAK,eAAA,EAAiB,MAAA,CAAO,SAAA,EAAyB,CAAA;AAAA,QACxD,SAAS,GAAA,EAAK;AACZ,UAAA,OAAA,CAAQ,KAAA,CAAM,kCAAkC,GAAG,CAAA;AAAA,QACrD;AAAA,MACF;AAAA,KACF;AAEA,IAAA,MAAA,CAAO;AAAA,MACL,SAAA,EAAW,MAAM,SAAA,CAAU,KAAA;AAAA,MAC3B,SAAA,EAAW,MAAM,SAAA,CAAU,KAAA,EAAO,SAAA,EAAU;AAAA,MAC5C,WAAW,MAAM,SAAA,CAAU,KAAA,EAAO,SAAA,MAAe,EAAC;AAAA,MAClD,eAAA,EAAiB,CAAC,IAAA,EAAc,OAAA,KAC9B,UAAU,KAAA,EAAO,eAAA,CAAgB,MAAM,OAAO;AAAA,KACjD,CAAA;AAED,IAAA,OAAO,MACL,CAAA;AAAA,MACE,KAAA;AAAA,MACA,EAAE,KAAA,EAAO,EAAE,UAAU,UAAA,EAAY,QAAA,EAAU,UAAS,EAAE;AAAA,MACtD;AAAA,QACE,EAAE,QAAA,EAAU;AAAA,UACV,GAAA,EAAK,SAAA;AAAA,UACL,OAAO,EAAE,OAAA,EAAS,SAAS,KAAA,EAAO,MAAA,EAAQ,QAAQ,MAAA;AAAO,SAC1D;AAAA;AACH,KACF;AAAA,EACJ;AACF,CAAC;ACnHM,SAAS,YAAA,CACd,WACA,OAAA,EACA;AACA,EAAA,MAAM,MAAA,GAASC,IAAsB,IAAI,CAAA;AACzC,EAAA,MAAM,MAAA,GAASA,GAAAA,CAAgB,EAAE,CAAA;AACjC,EAAA,MAAM,QAAA,GAAWA,IAAI,KAAK,CAAA;AAE1B,EAAAC,UAAU,MAAM;AACd,IAAA,IAAI,CAAC,UAAU,KAAA,EAAO;AACtB,IAAA,MAAA,CAAO,KAAA,GAAQ,IAAIC,WAAAA,CAAU,SAAA,CAAU,OAAO,OAAO,CAAA;AAAA,EACvD,CAAC,CAAA;AAED,EAAAC,YAAY,MAAM;AAChB,IAAA,MAAA,CAAO,OAAO,OAAA,EAAQ;AACtB,IAAA,MAAA,CAAO,KAAA,GAAQ,IAAA;AAAA,EACjB,CAAC,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,OAAO,IAAA,KAAe;AACrC,IAAA,IAAI,CAAC,OAAO,KAAA,EAAO;AACnB,IAAA,MAAM,MAAA,CAAO,KAAA,CAAM,QAAA,CAAS,IAAI,CAAA;AAChC,IAAA,MAAA,CAAO,KAAA,GAAQ,MAAA,CAAO,KAAA,CAAM,SAAA,EAAU;AACtC,IAAA,QAAA,CAAS,KAAA,GAAQ,IAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,GAAA,KAAgB;AAClC,IAAA,IAAI,CAAC,OAAO,KAAA,EAAO;AACnB,IAAA,MAAA,CAAO,KAAA,CAAM,WAAW,GAAG,CAAA;AAC3B,IAAA,MAAA,CAAO,KAAA,GAAQ,MAAA,CAAO,KAAA,CAAM,SAAA,EAAU;AACtC,IAAA,QAAA,CAAS,KAAA,GAAQ,IAAA;AAAA,EACnB,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,MAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA,EAAW,MAAM,MAAA,CAAO,KAAA,EAAO,SAAA,EAAU;AAAA,IACzC,eAAA,EAAiB,CAAC,IAAA,EAAc,OAAA,KAC9B,OAAO,KAAA,EAAO,eAAA,CAAgB,MAAM,OAAO,CAAA;AAAA,IAC7C,UAAU,CAAC,KAAA,KAAiB,MAAA,CAAO,KAAA,EAAO,SAAS,KAAK,CAAA;AAAA,IACxD,SAAS,CAAC,IAAA,KAAe,MAAA,CAAO,KAAA,EAAO,QAAQ,IAAI;AAAA,GACrD;AACF","file":"index.js","sourcesContent":["import {\n  defineComponent,\n  ref,\n  onMounted,\n  onUnmounted,\n  watch,\n  h,\n  type PropType,\n} from 'vue';\nimport {\n  CadViewer as CoreCadViewer,\n  type CadViewerOptions,\n  type DxfLayer,\n  type SelectEvent,\n  type MeasureEvent,\n  type ViewTransform,\n  type Tool,\n  type Theme,\n} from '@cadview/core';\n\nexport const CadViewer = defineComponent({\n  name: 'CadViewer',\n\n  props: {\n    file: {\n      type: [File, ArrayBuffer, String] as PropType<File | ArrayBuffer | string | null>,\n      default: null,\n    },\n    theme: {\n      type: String as PropType<Theme>,\n      default: 'dark',\n    },\n    tool: {\n      type: String as PropType<Tool>,\n      default: 'pan',\n    },\n    options: {\n      type: Object as PropType<Omit<CadViewerOptions, 'theme' | 'initialTool'>>,\n      default: () => ({}),\n    },\n  },\n\n  emits: ['select', 'measure', 'viewchange', 'layers-loaded'],\n\n  setup(props, { emit, expose }) {\n    const canvasRef = ref<HTMLCanvasElement | null>(null);\n    const viewerRef = ref<CoreCadViewer | null>(null);\n\n    onMounted(() => {\n      if (!canvasRef.value) return;\n\n      const viewer = new CoreCadViewer(canvasRef.value, {\n        theme: props.theme,\n        initialTool: props.tool,\n        ...props.options,\n      });\n      viewerRef.value = viewer;\n\n      viewer.on('select', (e: SelectEvent) => emit('select', e));\n      viewer.on('measure', (e: MeasureEvent) => emit('measure', e));\n      viewer.on('viewchange', (vt: ViewTransform) => emit('viewchange', vt));\n    });\n\n    onUnmounted(() => {\n      viewerRef.value?.destroy();\n      viewerRef.value = null;\n    });\n\n    watch(\n      () => props.theme,\n      (newTheme) => {\n        viewerRef.value?.setTheme(newTheme);\n      },\n    );\n\n    watch(\n      () => props.tool,\n      (newTool) => {\n        viewerRef.value?.setTool(newTool);\n      },\n    );\n\n    watch(\n      () => props.file,\n      async (newFile) => {\n        const viewer = viewerRef.value;\n        if (!viewer || !newFile) return;\n\n        try {\n          if (newFile instanceof File) {\n            await viewer.loadFile(newFile);\n          } else if (newFile instanceof ArrayBuffer) {\n            viewer.loadArrayBuffer(newFile);\n          } else if (typeof newFile === 'string') {\n            viewer.loadString(newFile);\n          }\n\n          emit('layers-loaded', viewer.getLayers() as DxfLayer[]);\n        } catch (err) {\n          console.error('CadViewer: failed to load file', err);\n        }\n      },\n    );\n\n    expose({\n      getViewer: () => viewerRef.value,\n      fitToView: () => viewerRef.value?.fitToView(),\n      getLayers: () => viewerRef.value?.getLayers() ?? [],\n      setLayerVisible: (name: string, visible: boolean) =>\n        viewerRef.value?.setLayerVisible(name, visible),\n    });\n\n    return () =>\n      h(\n        'div',\n        { style: { position: 'relative', overflow: 'hidden' } },\n        [\n          h('canvas', {\n            ref: canvasRef,\n            style: { display: 'block', width: '100%', height: '100%' },\n          }),\n        ],\n      );\n  },\n});\n","import { ref, onMounted, onUnmounted, type Ref } from 'vue';\nimport {\n  CadViewer,\n  type CadViewerOptions,\n  type DxfLayer,\n  type Theme,\n  type Tool,\n} from '@cadview/core';\n\nexport function useCadViewer(\n  canvasRef: Ref<HTMLCanvasElement | null>,\n  options?: CadViewerOptions,\n) {\n  const viewer = ref<CadViewer | null>(null);\n  const layers = ref<DxfLayer[]>([]);\n  const isLoaded = ref(false);\n\n  onMounted(() => {\n    if (!canvasRef.value) return;\n    viewer.value = new CadViewer(canvasRef.value, options);\n  });\n\n  onUnmounted(() => {\n    viewer.value?.destroy();\n    viewer.value = null;\n  });\n\n  const loadFile = async (file: File) => {\n    if (!viewer.value) return;\n    await viewer.value.loadFile(file);\n    layers.value = viewer.value.getLayers();\n    isLoaded.value = true;\n  };\n\n  const loadString = (dxf: string) => {\n    if (!viewer.value) return;\n    viewer.value.loadString(dxf);\n    layers.value = viewer.value.getLayers();\n    isLoaded.value = true;\n  };\n\n  return {\n    viewer,\n    layers,\n    isLoaded,\n    loadFile,\n    loadString,\n    fitToView: () => viewer.value?.fitToView(),\n    setLayerVisible: (name: string, visible: boolean) =>\n      viewer.value?.setLayerVisible(name, visible),\n    setTheme: (theme: Theme) => viewer.value?.setTheme(theme),\n    setTool: (tool: Tool) => viewer.value?.setTool(tool),\n  };\n}\n"]}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@cadview/vue",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Vue 3 wrapper for @cadview/core — CAD/DXF file viewer component",
+  "author": "Wisnu Wicaksono",
+  "keywords": [
+    "cad",
+    "dxf",
+    "viewer",
+    "vue",
+    "vue3",
+    "component",
+    "canvas"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wiscaksono/cadview.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://github.com/wiscaksono/cadview/tree/main/packages/vue#readme",
+  "bugs": {
+    "url": "https://github.com/wiscaksono/cadview/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "@cadview/core": "0.1.0"
+  },
+  "devDependencies": {
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0",
+    "@cadview/core": "0.1.0"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "vue-tsc --noEmit"
+  }
+}