vtkviewer-vue 0.1.0

package/README.en.md

@@ -0,0 +1,753 @@
+# VtkViewer - VTK.js 3D Visualization Vue Component
+
+[English](README.en.md) | [中文](README.md)
+
+![npm version](https://img.shields.io/npm/v/vtkviewer-vue)
+![MIT License](https://img.shields.io/badge/license-MIT-blue)
+![vue version](https://img.shields.io/badge/vue-3.0+-green)
+
+A powerful Vue 3 component based on VTK.js, providing advanced 3D model visualization capabilities, supporting multiple 3D model formats, a complete toolbar plugin system, theme customization, and internationalization support (mainly implemented with AI-assisted programming).
+
+![VtkViewer Interface Preview](https://cdn.jsdelivr.net/gh/liudichen/static@master/images/vtkviewer-vue.png)
+
+---
+
+## 1. Key Features
+
+### 1.1 Core Features
+
+- **Powerful 3D Rendering Engine**: WebGL 2.0 rendering engine based on VTK.js, supporting multiple rendering styles including surface, wireframe, and points
+- **Multi-Format Support**: Supports 10+ 3D model formats including STL, OBJ, PLY, VTP, VTU, VTI, GLB, DRC, PDB, ZIP
+- **Plugin Architecture**: All features implemented through plugins, supporting four major plugin types: format plugins, toolbar plugins, UI plugins, and service plugins
+- **v-model Support**: Get internal ViewerContext via `v-model:ctx` for event listening and programmatic control
+- **Complete Theme System**: 5 built-in themes (light/dark/ocean/forest/sunset), supporting custom themes and CSS variable overrides
+- **Internationalization Support**: Built-in Chinese and English language packs, supporting custom translation functions and dynamic language switching
+- **TypeScript Support**: Complete TypeScript type definitions, providing excellent development experience and type safety
+
+### 1.2 Interaction Features
+
+- **Mouse Interaction**: Rotate (left-click drag), Zoom (right-click/scroll wheel), Pan (middle-click/Shift+left-click)
+- **Touch Interaction**: Pinch zoom, single-finger rotate, two-finger pan, perfect mobile support
+- **Keyboard Shortcuts**: Customizable shortcut system (e.g., F for fullscreen, R for reset view)
+- **Drag & Drop Loading**: Support dragging model files directly to viewport for loading
+- **Toolbar Operations**: 20+ tools including load/unload model, view control, render style switching, clipping, measurement, screenshot, etc.
+
+### 1.3 UI & Experience
+
+- **Responsive Layout**: Automatic adaptation to different screen sizes (xs/sm/md/lg/xl), supporting mobile and desktop
+- **Info Panel**: Real-time display of FPS, render time, triangle count, memory usage, etc.
+- **Scene Tree Panel**: Visual scene structure, supporting visibility control, color modification, etc.
+- **Loading Progress**: Elegant loading animations and progress display
+- **Error Prompts**: User-friendly error messages and recovery suggestions
+
+### 1.4 Advanced Features
+
+- **Event System**: Plugin communication mechanism based on Event Bus, supporting built-in and custom events
+- **Command System**: Unified command registration and execution mechanism, supporting shortcut binding
+- **Clipping Function**: Supports Clip/Cut/Section three clipping modes with 3D Widget interaction
+- **Measurement Tools**: Supports point coordinates, distance, and angle measurement modes
+- **Color Mapping**: Supports color mapping by scalar arrays, automatically detecting the best mapping array
+- **Animation Support**: Supports animated model formats (e.g., GLB), providing play/pause/frame jump controls
+- **Bookmark System**: Save and restore camera views, quickly locate to interested views
+- **Performance Monitoring**: Real-time display of FPS, render time, and other performance metrics
+- **Screenshot Export**: Supports custom resolution, format (PNG/JPEG), and transparent background
+
+### 1.5 Developer Friendly
+
+- **v-model Reactivity**: Get internal context via `v-model:ctx`, `isReady` built into ctx
+- **Plugin Development**: Complete plugin development interface and base classes, supporting rapid extension
+- **Automatic Resource Cleanup**: Automatically release VTK.js resources when component unmounts, preventing memory leaks
+- **Automatic Format Detection**: Supports format auto-detection based on file extension, magic numbers, and content analysis
+- **Debug Support**: Built-in debug logging system for development and troubleshooting
+
+---
+
+## 2. Quick Start
+
+### 2.1 Installation
+
+```bash
+# npm
+npm install vtkviewer-vue
+
+# pnpm
+pnpm add vtkviewer-vue
+
+# yarn
+yarn add vtkviewer-vue
+```
+
+### 2.2 Dependencies
+
+**Peer Dependencies**:
+- `vue` (^3.0.0) - Required
+
+**Core Dependencies (automatically installed)**:
+- `@kitware/vtk.js` (^36.2.0) - VTK.js core library
+- `events` (^3.3.0) - Event handling
+- `fflate` (^0.8.3) - File compression/decompression
+
+**Optional Dependencies (install as needed)**:
+- `draco3d` (^1.5.7) - DRC format support (Draco compression)
+
+### 2.3 Basic Usage
+
+```vue
+<template>
+  <div style="width: 800px; height: 600px;">
+    <VtkViewer
+      :source="modelSource"
+      source-format="stl"
+      theme="dark"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+/** Import VtkViewer component, required */
+import { VtkViewer } from 'vtkviewer-vue'
+/** Import built-in styles, required */
+import 'vtkviewer-vue/styles'
+
+const modelSource = ref('/models/example.stl')
+</script>
+```
+
+> **Note**: The VtkViewer component automatically manages the lifecycle of initialization and cleanup internally, no need to manually call any initialization methods.
+
+**Parameter Description**:
+- All parameters are optional
+- `source`: Although optional, usually needs to be provided to display models
+- `sourceFormat`: Optional, recommended when not using file input, helps quickly and correctly parse model format
+- `theme`: Optional, default value is `'light'`
+
+**Event Listening**:
+
+VtkViewer emits events through Event Bus, not Vue custom events.
+
+**Using `VtkViewer` Component (Recommended)**:
+In most scenarios, you can directly use the `VtkViewer` component without manually calling `initialize()`. If you need to listen to events, you can use `v-model:ctx` to get the context:
+
+```vue
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { VtkViewer, BuiltinEvents } from 'vtkviewer-vue'
+
+const modelSource = ref('/models/example.stl')
+const ctx = ref(null)
+
+// Watch ctx changes, register events
+watch(ctx, (newCtx) => {
+  if (newCtx) {
+    newCtx.events.on(BuiltinEvents.SCENE_LOADED, (data) => {
+      console.log('Model loaded successfully', data)
+    })
+  }
+})
+</script>
+
+<template>
+  <VtkViewer v-model:ctx="ctx" :source="modelSource" />
+</template>
+```
+
+### 2.4 Model Input
+
+VtkViewer supports multiple ways of model input to adapt to different scenario requirements.
+
+#### 2.4.1 Passing via Props (Recommended)
+
+This is the simplest and most direct way, suitable for most scenarios.
+
+**Supported Data Types**:
+- **URL String**: Local path or network URL
+- **File Object**: File object obtained from file input, drag-and-drop, etc.
+- **ArrayBuffer**: Loaded binary data
+- **ReadableStream**: Streaming data
+
+**Basic Examples**:
+
+```vue
+<template>
+  <div style="width: 800px; height: 600px;">
+    <!-- Method 1: URL String -->
+    <VtkViewer
+      :source="'/models/example.stl'"
+      source-format="stl"
+    />
+    
+    <!-- Method 2: Reactive URL -->
+    <VtkViewer
+      :source="modelUrl"
+      :source-format="format"
+    />
+    
+    <!-- Method 3: File Object (from file input) -->
+    <input type="file" @change="handleFileSelect" />
+    <VtkViewer
+      :source="selectedFile"
+      :source-format="format"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { VtkViewer } from 'vtkviewer-vue'
+import 'vtkviewer-vue/styles'
+
+const modelUrl = ref('/models/example.stl')
+const format = ref('stl')
+const selectedFile = ref<File | null>(null)
+
+function handleFileSelect(event: Event) {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files[0]) {
+    selectedFile.value = target.files[0]
+    // Optional: auto-detect format from filename
+    const fileName = target.files[0].name
+    const ext = fileName.split('.').pop()?.toLowerCase()
+    format.value = ext || 'stl'
+  }
+}
+</script>
+```
+
+#### 2.4.2 Loading via Toolbar (Using Built-in Toolbar Plugin LoadModelPlugin)
+
+VtkViewer has a built-in `LoadModelPlugin` toolbar plugin. Users can manually select and load model files by clicking the "Load Model" button on the toolbar.
+
+**Features**:
+- No coding required, users can freely choose files
+- Supports all registered format plugin file types
+- Automatic file format detection
+
+#### 2.4.3 Loading via Drag & Drop (Using Built-in Service Plugin DragDropPlugin)
+
+VtkViewer has a built-in `DragDropPlugin` service plugin. Users can directly drag model files to the viewer viewport to load models.
+
+**Features**:
+- Intuitive and easy to use, conforms to user habits
+- Supports dragging multiple files (if plugin supports)
+- Automatic file format detection
+
+**Enabling Drag & Drop**:
+
+Drag & drop is enabled by default, no additional configuration needed. If you need to disable it, you can exclude `DragDropPlugin` from the plugin configuration:
+
+```vue
+<script setup lang="ts">
+import { VtkViewer, type PluginsConfig } from 'vtkviewer-vue'
+
+const plugins: PluginsConfig = {
+  service: [
+    // Not registering DragDropPlugin disables drag & drop
+  ]
+}
+</script>
+
+<template>
+  <VtkViewer :plugins="plugins" />
+</template>
+```
+
+#### 2.4.4 Automatic Format Detection
+
+When `source` is a File object or URL, the component automatically detects the format from the file extension. For ArrayBuffer or ReadableStream, it's recommended to explicitly specify `sourceFormat`.
+
+```vue
+<template>
+  <VtkViewer
+    :source="modelData"
+    :source-format="format"  <!-- For non-File/URL sources, recommend specifying format -->
+    :source-filename="'model.stl'"  <!-- Optional: helps format detection -->
+  />
+</template>
+```
+
+### 2.5 Supported Formats
+
+VtkViewer supports multiple 3D model formats, handled by corresponding plugins.
+
+| Format | Extensions | Plugin Class | Data Type | Description |
+|--------|------------|--------------|-----------|-------------|
+| STL | `stl`, `stla`, `stlb` | `StlPlugin` | PolyData | 3D printing standard format, supports ASCII and binary |
+| OBJ | `obj` | `ObjPlugin` | PolyData | Wavefront OBJ format, supports MTL materials |
+| PLY | `ply` | `PlyPlugin` | PolyData | Stanford PLY format, supports color and texture |
+| VTP | `vtp` | `VtpPlugin` | PolyData | VTK PolyData XML format |
+| VTI | `vti` | `VtiPlugin` | ImageData | VTK ImageData XML format (volume rendering) |
+| VTU | `vtu` | `VtuPlugin` | UnstructuredGrid | VTK UnstructuredGrid XML format |
+| GLB | `glb` | `GlbPlugin` | PolyData | GL Transmission Format Binary version (no GLTF support) |
+| DRC | `drc` | `DrcPlugin` | PolyData | Draco compressed format **(requires Draco decoder)** |
+| PDB | `pdb` | `PdbPlugin` | Molecule | Protein Data Bank format |
+| ZIP | `zip`, `vtkjs`, `obz` | `ZipPlugin` | Composite | Auto-detect internal formats (VTK.js ZIP, OBJ+MTL, etc.) |
+
+**DRC Format Support**:
+
+DRC format uses Draco compression algorithm and requires a Draco decoder to parse. VtkViewer supports two ways to load the decoder:
+
+**Method 1: Configure decoder path via props (Recommended)**
+
+```vue
+<template>
+  <VtkViewer
+    :source="drcSource"
+    :decoders="{
+      draco: '/path/to/draco_decoder.js'
+    }"
+  />
+</template>
+```
+
+**Method 2: Install draco3d package**
+
+```bash
+pnpm add draco3d
+```
+
+The component will automatically find and use the decoder from the installed package.
+
+---
+
+## 3. Core Concepts
+
+### 3.1 Design Architecture
+
+VtkViewer uses a plugin-based architecture where all features are implemented through plugins.
+
+**Core Components**:
+- `VtkViewer`: Main Vue component, provides props interface and lifecycle management
+- `ViewerContext` (ctx): Core context object, provides access to VTK instances, events, plugins, etc.
+- `PluginRegistry`: Plugin registry, manages plugin registration and initialization
+- `EventBus`: Event bus, handles communication between plugins and external code
+
+**Plugin Types**:
+- **Format Plugins**: Handle specific 3D model format loading and parsing
+- **Toolbar Plugins**: Add buttons and tools to the toolbar
+- **UI Plugins**: Add UI panels and overlays (loading, error, scene tree, etc.)
+- **Service Plugins**: Provide background services (drag-drop, keyboard shortcuts, etc.)
+
+### 3.2 ctx and Event Listening
+
+`ViewerContext` is the core context object that provides access to all internal states and functions.
+
+**Getting ctx**:
+
+```vue
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { VtkViewer } from 'vtkviewer-vue'
+
+const ctx = ref(null)
+
+watch(ctx, (newCtx) => {
+  if (newCtx) {
+    // ctx is ready, you can access internal states and register events
+    console.log('Viewer ready:', newCtx.isReady)
+  }
+})
+</script>
+
+<template>
+  <VtkViewer v-model:ctx="ctx" />
+</template>
+```
+
+**Main Properties and Methods of ctx**:
+
+```typescript
+interface ViewerContext {
+  // State
+  isReady: Ref<boolean>                    // Whether viewer is ready
+  enableGesture: Ref<boolean>               // Touch gesture control switch
+  enableKeyboard: Ref<boolean>             // Keyboard control switch
+  
+  // VTK instances
+  getRenderWindow(): vtkRenderWindow | null
+  getRenderer(): vtkRenderer | null
+  getInteractor(): vtkRenderWindowInteractor | null
+  
+  // Events
+  events: EventBus
+  
+  // Plugin registry
+  pluginRegistry: PluginRegistry
+  
+  // Decoders config
+  decoders: Record<string, string>
+}
+```
+
+**Built-in Events**:
+
+```typescript
+import { BuiltinEvents } from 'vtkviewer-vue'
+
+// Scene loaded
+ctx.events.on(BuiltinEvents.SCENE_LOADED, (data) => {
+  console.log('Format:', data.format)
+  console.log('Filename:', data.filename)
+})
+
+// Error occurred
+ctx.events.on(BuiltinEvents.ERROR_OCCURRED, (err) => {
+  console.error('Error:', err.message)
+})
+
+// Tool changed
+ctx.events.on(BuiltinEvents.TOOL_CHANGED, (data) => {
+  console.log('Tool:', data.tool)
+  console.log('Enabled:', data.enabled)
+})
+```
+
+---
+
+## 4. API Reference
+
+### 4.1 VtkViewer Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `source` | `VtkViewerSource` | `undefined` | Model source (URL, File, ArrayBuffer, ReadableStream) |
+| `sourceFormat` | `string` | `undefined` | Explicitly specify model format |
+| `sourceFilename` | `string` | `undefined` | Filename to help format detection |
+| `theme` | `string` | `'light'` | Theme name |
+| `customThemes` | `Record<string, ThemeConfig>` | `{}` | Custom theme configurations |
+| `background` | `string` | `'#e6e6e6'` | Background color (CSS color value) |
+| `toolbar` | `boolean` | `true` | Whether to show toolbar |
+| `infoPanel` | `boolean` | `true` | Whether to show info panel |
+| `plugins` | `PluginsConfig` | `undefined` | Plugin configuration |
+| `decoders` | `Record<string, string>` | `{}` | Decoder paths configuration |
+| `debug` | `boolean` | `false` | Enable debug logging |
+| `enableGesture` | `boolean` | `true` | Enable touch gesture control |
+| `enableKeyboard` | `boolean` | `true` | Enable keyboard control (shortcuts) |
+| `v-model:ctx` | `ViewerContext` | `undefined` | Two-way binding for ctx |
+
+### 4.2 Plugin Configuration: PluginsConfig
+
+```typescript
+interface PluginsConfig {
+  format?: (FormatPlugin | [FormatPlugin, FormatPluginConfig])[]
+  toolbar?: (IToolbarPlugin | [IToolbarPlugin, ToolbarPluginConfig])[]
+  ui?: (UIPlugin | [UIPlugin, UIPluginConfig])[]
+  service?: (ServicePlugin | [ServicePlugin, ServicePluginConfig])[]
+}
+```
+
+**Usage Example**:
+
+```vue
+<script setup lang="ts">
+import { VtkViewer, type PluginsConfig } from 'vtkviewer-vue'
+import { StlPlugin, ObjPlugin } from 'vtkviewer-vue/plugins/format'
+import { RotatePlugin, ZoomPlugin } from 'vtkviewer-vue/plugins/toolbar'
+
+const plugins: PluginsConfig = {
+  format: [StlPlugin, ObjPlugin],
+  toolbar: [
+    RotatePlugin,
+    ZoomPlugin,
+    // With config
+    [RotatePlugin, { group: 'control' }]
+  ]
+}
+</script>
+
+<template>
+  <VtkViewer :plugins="plugins" />
+</template>
+```
+
+---
+
+## 5. Plugin System
+
+### 5.1 Plugin Mechanism and Configuration
+
+VtkViewer's plugin system is designed to be flexible and extensible.
+
+**Plugin Registration Order**:
+1. Default plugins (lowest priority)
+2. `useViewer()` config plugins
+3. `VtkViewer` props.plugins (highest priority)
+
+Later registrations override earlier ones of the same type.
+
+**Disabling Default Plugins**:
+
+```vue
+<script setup lang="ts">
+import { VtkViewer, type PluginsConfig } from 'vtkviewer-vue'
+
+// Only register specific plugins, disabling all defaults
+const plugins: PluginsConfig = {
+  format: [/* your format plugins */],
+  toolbar: [/* your toolbar plugins */],
+  ui: [],      // No UI plugins
+  service: []  // No service plugins
+}
+</script>
+
+<template>
+  <VtkViewer :plugins="plugins" />
+</template>
+```
+
+### 5.2 Plugin Development Guide
+
+Creating a custom plugin involves implementing the corresponding plugin interface.
+
+**Toolbar Plugin Example**:
+
+```typescript
+import { PluginBase } from '@/plugins/core/PluginBase'
+import type { IToolbarPlugin, ToolbarPluginConfig } from '@/plugins/types'
+import { h } from 'vue'
+
+export interface MyPluginConfig extends ToolbarPluginConfig {
+  group?: string
+}
+
+export class MyPlugin extends PluginBase implements IToolbarPlugin {
+  static pluginName = 'MyPlugin'
+  static pluginType = PluginType.TOOLBAR
+  
+  private group = 'tools'
+  
+  configure(config: MyPluginConfig): void {
+    if (config.group) {
+      this.group = config.group
+    }
+  }
+  
+  render(isActive: Ref<boolean>) {
+    return h('button', {
+      class: 'iimm-vtk-toolbar-item',
+      onClick: () => this.onClick()
+    }, 'My Tool')
+  }
+  
+  private onClick() {
+    console.log('My plugin clicked!')
+  }
+}
+```
+
+---
+
+## 6. Internationalization & Language Switching
+
+### 6.1 Built-in Languages
+
+VtkViewer has built-in support for:
+- Chinese (`zh`)
+- English (`en`)
+
+### 6.2 Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { VtkViewer } from 'vtkviewer-vue'
+</script>
+
+<template>
+  <VtkViewer locale="en" />
+</template>
+```
+
+### 6.3 Inject Custom Translation Function
+
+```vue
+<script setup lang="ts">
+import { VtkViewer } from 'vtkviewer-vue'
+
+const customTranslate = (key: string, params?: Record<string, string>) => {
+  // Your custom translation logic
+  return key
+}
+</script>
+
+<template>
+  <VtkViewer :translate="customTranslate" />
+</template>
+```
+
+### 6.4 Register Custom Language Pack
+
+```typescript
+import { i18n } from 'vtkviewer-vue'
+
+i18n.registerLocale('ja', {
+  'vtkviewer.plugin.rotate.name': '回転',
+  'vtkviewer.plugin.zoom.name': 'ズーム',
+  // ... more translations
+})
+```
+
+### 6.5 Translation Key Naming Convention
+
+Translation keys follow the pattern:
+```
+vtkviewer.{category}.{name}.{property}
+```
+
+Examples:
+- `vtkviewer.plugin.rotate.name` - Plugin name
+- `vtkviewer.plugin.rotate.tooltip` - Plugin tooltip
+- `vtkviewer.error.loadFailed` - Error message
+
+### 6.6 Using i18n in Custom Plugins
+
+```typescript
+export class MyPlugin extends PluginBase {
+  init(ctx: ViewerContext): void {
+    super.init(ctx)
+    const i18n = ctx.i18n
+    
+    const translatedText = i18n.translate('vtkviewer.plugin.myPlugin.name')
+    console.log(translatedText)
+  }
+}
+```
+
+### 6.7 Programmatic Language Switching
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { VtkViewer, i18n } from 'vtkviewer-vue'
+
+const locale = ref<'zh' | 'en'>('zh')
+
+function toggleLocale() {
+  locale.value = locale.value === 'zh' ? 'en' : 'zh'
+  i18n.setLocale(locale.value)
+}
+</script>
+
+<template>
+  <button @click="toggleLocale">Switch Language</button>
+  <VtkViewer :locale="locale" />
+</template>
+```
+
+---
+
+## 7. Themes & Styling
+
+### 7.1 Theme System
+
+VtkViewer has 5 built-in themes:
+- `light` - Light theme (default)
+- `dark` - Dark theme
+- `ocean` - Ocean blue theme
+- `forest` - Forest green theme
+- `sunset` - Sunset orange theme
+
+**Usage**:
+
+```vue
+<template>
+  <VtkViewer theme="dark" />
+</template>
+```
+
+### 7.2 Style System Design & CSS Variable Overrides
+
+VtkViewer uses CSS Modules for style isolation and CSS variables for theming.
+
+**Custom Theme**:
+
+```typescript
+const customTheme = {
+  name: 'my-theme',
+  variables: {
+    '--vtk-primary': '#ff6b6b',
+    '--vtk-background': '#1a1a2e',
+    '--vtk-text': '#e0e0e0',
+    // ... more variables
+  }
+}
+```
+
+```vue
+<template>
+  <VtkViewer :custom-themes="{ 'my-theme': customTheme }" theme="my-theme" />
+</template>
+```
+
+**CSS Variable List**:
+
+```css
+:root {
+  /* Primary colors */
+  --vtk-primary: #64ffda;
+  --vtk-primary-hover: #4cdbb5;
+  
+  /* Background colors */
+  --vtk-bg-primary: #ffffff;
+  --vtk-bg-secondary: #f5f5f5;
+  --vtk-bg-tertiary: #e0e0e0;
+  
+  /* Text colors */
+  --vtk-text-primary: #333333;
+  --vtk-text-secondary: #666666;
+  --vtk-text-disabled: #999999;
+  
+  /* Toolbar */
+  --vtk-toolbar-bg: rgba(255, 255, 255, 0.95);
+  --vtk-toolbar-border: rgba(0, 0, 0, 0.1);
+  
+  /* Info panel */
+  --vtk-info-bg: rgba(0, 0, 0, 0.7);
+  --vtk-info-text: #ffffff;
+  
+  /* Shadows */
+  --vtk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --vtk-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --vtk-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
+}
+```
+
+---
+
+## 8. More Resources
+
+- **GitHub Repository**: https://github.com/liudichen/vtkviewer-vue
+- **Online Demo**: https://vtkviewer-demo.vercel.app
+- **VTK.js Documentation**: https://vtkjs.readthedocs.io
+- **Issue Tracker**: https://github.com/liudichen/vtkviewer-vue/issues
+
+---
+
+## 9. Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+**Development Setup**:
+
+```bash
+# Clone the repository
+git clone https://github.com/liudichen/vtkviewer-vue.git
+
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm run dev
+
+# Build library
+pnpm run build:lib
+
+# Run tests
+pnpm run test
+```
+
+---
+
+## 10. License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.