(
+ bounds ?? QUADTREE_CONFIG.DEFAULT_BOUNDS,
+ {
+ maxDepth: QUADTREE_CONFIG.MAX_DEPTH,
+ maxItemsPerNode: QUADTREE_CONFIG.MAX_ITEMS_PER_NODE
+ }
+ )
+ this.queryCache = new Map()
+ }
+
+ /**
+ * Insert a node into the spatial index
+ */
+ insert(nodeId: NodeId, bounds: Bounds): void {
+ this.quadTree.insert(nodeId, bounds, nodeId)
+ this.invalidateCache()
+ }
+
+ /**
+ * Update a node's bounds in the spatial index
+ */
+ update(nodeId: NodeId, bounds: Bounds): void {
+ this.quadTree.update(nodeId, bounds)
+ this.invalidateCache()
+ }
+
+ /**
+ * Remove a node from the spatial index
+ */
+ remove(nodeId: NodeId): void {
+ this.quadTree.remove(nodeId)
+ this.invalidateCache()
+ }
+
+ /**
+ * Query nodes within the given bounds
+ */
+ query(bounds: Bounds): NodeId[] {
+ const cacheKey = this.getCacheKey(bounds)
+ const cached = this.queryCache.get(cacheKey)
+
+ // Check cache validity
+ if (cached) {
+ const age = Date.now() - cached.timestamp
+ if (age < PERFORMANCE_CONFIG.SPATIAL_CACHE_TTL) {
+ return cached.result
+ }
+ // Remove stale entry
+ this.queryCache.delete(cacheKey)
+ this.cacheSize--
+ }
+
+ // Perform query
+ const result = this.quadTree.query(bounds)
+
+ // Cache result
+ this.addToCache(cacheKey, result)
+
+ return result
+ }
+
+ /**
+ * Clear all nodes from the spatial index
+ */
+ clear(): void {
+ this.quadTree.clear()
+ this.invalidateCache()
+ }
+
+ /**
+ * Get the current size of the index
+ */
+ get size(): number {
+ return this.quadTree.size
+ }
+
+ /**
+ * Get debug information about the spatial index
+ */
+ getDebugInfo() {
+ return {
+ quadTreeInfo: this.quadTree.getDebugInfo(),
+ cacheSize: this.cacheSize,
+ cacheEntries: this.queryCache.size
+ }
+ }
+
+ /**
+ * Generate cache key for bounds
+ */
+ private getCacheKey(bounds: Bounds): string {
+ return `${bounds.x},${bounds.y},${bounds.width},${bounds.height}`
+ }
+
+ /**
+ * Add result to cache with LRU eviction
+ */
+ private addToCache(key: string, result: NodeId[]): void {
+ // Evict oldest entries if cache is full
+ if (this.cacheSize >= PERFORMANCE_CONFIG.SPATIAL_CACHE_MAX_SIZE) {
+ const oldestKey = this.findOldestCacheEntry()
+ if (oldestKey) {
+ this.queryCache.delete(oldestKey)
+ this.cacheSize--
+ }
+ }
+
+ this.queryCache.set(key, {
+ result,
+ timestamp: Date.now()
+ })
+ this.cacheSize++
+ }
+
+ /**
+ * Find oldest cache entry for LRU eviction
+ */
+ private findOldestCacheEntry(): string | null {
+ let oldestKey: string | null = null
+ let oldestTime = Infinity
+
+ for (const [key, entry] of this.queryCache) {
+ if (entry.timestamp < oldestTime) {
+ oldestTime = entry.timestamp
+ oldestKey = key
+ }
+ }
+
+ return oldestKey
+ }
+
+ /**
+ * Invalidate all cached queries
+ */
+ private invalidateCache(): void {
+ this.queryCache.clear()
+ this.cacheSize = 0
+ }
+}
diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
new file mode 100644
index 000000000..52dbacac0
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -0,0 +1,107 @@
+
+ ⚠️
+
+
+
+
+
+
+ {{ slotData.localized_name || slotData.name || `Input ${index}` }}
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
new file mode 100644
index 000000000..4ce4e2100
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -0,0 +1,271 @@
+
+
+ {{ $t('Node Render Error') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('Node Content Error') }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
new file mode 100644
index 000000000..3b3da3101
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -0,0 +1,115 @@
+
+
+ {{ $t('Node Header Error') }}
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.vue b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
new file mode 100644
index 000000000..68f247932
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
@@ -0,0 +1,113 @@
+
+
+ {{ $t('Node Slots Error') }}
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
new file mode 100644
index 000000000..0cd7a59cc
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -0,0 +1,155 @@
+
+
+ {{ $t('Node Widgets Error') }}
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
new file mode 100644
index 000000000..144d5978d
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -0,0 +1,106 @@
+
+ ⚠️
+
+
+
+ {{ slotData.name || `Output ${index}` }}
+
+
+
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
new file mode 100644
index 000000000..d5b8b1ad8
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md b/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md
new file mode 100644
index 000000000..95c8b40a3
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md
@@ -0,0 +1,295 @@
+# Level of Detail (LOD) Implementation Guide for Widgets
+
+## What is Level of Detail (LOD)?
+
+Level of Detail is a technique used to optimize performance by showing different amounts of detail based on how zoomed in the user is. Think of it like Google Maps - when you're zoomed out looking at the whole country, you only see major cities and highways. When you zoom in close, you see street names, building details, and restaurants.
+
+For ComfyUI nodes, this means:
+- **Zoomed out** (viewing many nodes): Show only essential controls, hide labels and descriptions
+- **Zoomed in** (focusing on specific nodes): Show all details, labels, help text, and visual polish
+
+## Why LOD Matters
+
+Without LOD optimization:
+- 1000+ nodes with full detail = browser lag and poor performance
+- Text that's too small to read still gets rendered (wasted work)
+- Visual effects that are invisible at distance still consume GPU
+
+With LOD optimization:
+- Smooth performance even with large node graphs
+- Battery life improvement on laptops
+- Better user experience across different zoom levels
+
+## How to Implement LOD in Your Widget
+
+### Step 1: Get the LOD Context
+
+Every widget component gets a `zoomLevel` prop. Use this to determine how much detail to show:
+
+```vue
+
+```
+
+**Primary API:** Use `lodScore` (0-1) for granular control and smooth transitions
+**Convenience API:** Use `lodLevel` ('minimal'|'reduced'|'full') for simple on/off decisions
+
+### Step 2: Choose What to Show at Different Zoom Levels
+
+#### Understanding the LOD Score
+- `lodScore` is a number from 0 to 1
+- 0 = completely zoomed out (show minimal detail)
+- 1 = fully zoomed in (show everything)
+- 0.5 = medium zoom (show some details)
+
+#### Understanding LOD Levels
+- `'minimal'` = zoom level 0.4 or below (very zoomed out)
+- `'reduced'` = zoom level 0.4 to 0.8 (medium zoom)
+- `'full'` = zoom level 0.8 or above (zoomed in close)
+
+### Step 3: Implement Your Widget's LOD Strategy
+
+Here's a complete example of a slider widget with LOD:
+
+```vue
+
+
+
+
+
+
+
+```
+
+## Common LOD Patterns
+
+### Pattern 1: Essential vs. Nice-to-Have
+```typescript
+// Always show the main functionality
+const showMainControl = computed(() => true)
+
+// Granular control with lodScore
+const showLabels = computed(() => lodScore.value > 0.4)
+const labelOpacity = computed(() => Math.max(0.3, lodScore.value))
+
+// Simple control with lodLevel
+const showExtras = computed(() => lodLevel.value === 'full')
+```
+
+### Pattern 2: Smooth Opacity Transitions
+```typescript
+// Gradually fade elements based on zoom
+const labelOpacity = computed(() => {
+ // Fade in from zoom 0.3 to 0.6
+ return Math.max(0, Math.min(1, (lodScore.value - 0.3) / 0.3))
+})
+```
+
+### Pattern 3: Progressive Detail
+```typescript
+const detailLevel = computed(() => {
+ if (lodScore.value < 0.3) return 'none'
+ if (lodScore.value < 0.6) return 'basic'
+ if (lodScore.value < 0.8) return 'standard'
+ return 'full'
+})
+```
+
+## LOD Guidelines by Widget Type
+
+### Text Input Widgets
+- **Always show**: The input field itself
+- **Medium zoom**: Show label
+- **High zoom**: Show placeholder text, validation messages
+- **Full zoom**: Show character count, format hints
+
+### Button Widgets
+- **Always show**: The button
+- **Medium zoom**: Show button text
+- **High zoom**: Show button description
+- **Full zoom**: Show keyboard shortcuts, tooltips
+
+### Selection Widgets (Dropdown, Radio)
+- **Always show**: The current selection
+- **Medium zoom**: Show option labels
+- **High zoom**: Show all options when expanded
+- **Full zoom**: Show option descriptions, icons
+
+### Complex Widgets (Color Picker, File Browser)
+- **Always show**: Simplified representation (color swatch, filename)
+- **Medium zoom**: Show basic controls
+- **High zoom**: Show full interface
+- **Full zoom**: Show advanced options, previews
+
+## Design Collaboration Guidelines
+
+### For Designers
+When designing widgets, consider creating variants for different zoom levels:
+
+1. **Minimal Design** (far away view)
+ - Essential elements only
+ - Higher contrast for visibility
+ - Simplified shapes and fewer details
+
+2. **Standard Design** (normal view)
+ - Balanced detail and simplicity
+ - Clear labels and readable text
+ - Good for most use cases
+
+3. **Full Detail Design** (close-up view)
+ - All labels, descriptions, and help text
+ - Rich visual effects and polish
+ - Maximum information density
+
+### Design Handoff Checklist
+- [ ] Specify which elements are essential vs. nice-to-have
+- [ ] Define minimum readable sizes for text elements
+- [ ] Provide simplified versions for distant viewing
+- [ ] Consider color contrast at different opacity levels
+- [ ] Test designs at multiple zoom levels
+
+## Testing Your LOD Implementation
+
+### Manual Testing
+1. Create a workflow with your widget
+2. Zoom out until nodes are very small
+3. Verify essential functionality still works
+4. Zoom in gradually and check that details appear smoothly
+5. Test performance with 50+ nodes containing your widget
+
+### Performance Considerations
+- Avoid complex calculations in LOD computed properties
+- Use `v-if` instead of `v-show` for elements that won't render
+- Consider using `v-memo` for expensive widget content
+- Test on lower-end devices
+
+### Common Mistakes
+❌ **Don't**: Hide the main widget functionality at any zoom level
+❌ **Don't**: Use complex animations that trigger at every zoom change
+❌ **Don't**: Make LOD thresholds too sensitive (causes flickering)
+❌ **Don't**: Forget to test with real content and edge cases
+
+✅ **Do**: Keep essential functionality always visible
+✅ **Do**: Use smooth transitions between LOD levels
+✅ **Do**: Test with varying content lengths and types
+✅ **Do**: Consider accessibility at all zoom levels
+
+## Getting Help
+
+- Check existing widgets in `src/components/graph/vueNodes/widgets/` for examples
+- Ask in the ComfyUI frontend Discord for LOD implementation questions
+- Test your changes with the LOD debug panel (top-right in GraphCanvas)
+- Profile performance impact using browser dev tools
\ No newline at end of file
diff --git a/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts b/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
new file mode 100644
index 000000000..407a14243
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
@@ -0,0 +1,168 @@
+/**
+ * Composable for individual Vue node components
+ *
+ * Uses customRef for shared write access with Canvas renderer.
+ * Provides dragging functionality and reactive layout state.
+ */
+import { computed, inject } from 'vue'
+
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { LayoutSource, type Point } from '@/renderer/core/layout/types'
+
+/**
+ * Composable for individual Vue node components
+ * Uses customRef for shared write access with Canvas renderer
+ */
+export function useNodeLayout(nodeId: string) {
+ const store = layoutStore
+ const mutations = useLayoutMutations()
+
+ // Get transform utilities from TransformPane if available
+ const transformState = inject('transformState') as
+ | {
+ canvasToScreen: (point: Point) => Point
+ screenToCanvas: (point: Point) => Point
+ }
+ | undefined
+
+ // Get the customRef for this node (shared write access)
+ const layoutRef = store.getNodeLayoutRef(nodeId)
+
+ // Computed properties for easy access
+ const position = computed(() => {
+ const layout = layoutRef.value
+ const pos = layout?.position ?? { x: 0, y: 0 }
+ return pos
+ })
+ const size = computed(
+ () => layoutRef.value?.size ?? { width: 200, height: 100 }
+ )
+ const bounds = computed(
+ () =>
+ layoutRef.value?.bounds ?? {
+ x: position.value.x,
+ y: position.value.y,
+ width: size.value.width,
+ height: size.value.height
+ }
+ )
+ const isVisible = computed(() => layoutRef.value?.visible ?? true)
+ const zIndex = computed(() => layoutRef.value?.zIndex ?? 0)
+
+ // Drag state
+ let isDragging = false
+ let dragStartPos: Point | null = null
+ let dragStartMouse: Point | null = null
+
+ /**
+ * Start dragging the node
+ */
+ function startDrag(event: PointerEvent) {
+ if (!layoutRef.value) return
+
+ isDragging = true
+ dragStartPos = { ...position.value }
+ dragStartMouse = { x: event.clientX, y: event.clientY }
+
+ // Set mutation source
+ mutations.setSource(LayoutSource.Vue)
+
+ // Capture pointer
+ const target = event.target as HTMLElement
+ target.setPointerCapture(event.pointerId)
+ }
+
+ /**
+ * Handle drag movement
+ */
+ const handleDrag = (event: PointerEvent) => {
+ if (!isDragging || !dragStartPos || !dragStartMouse || !transformState) {
+ return
+ }
+
+ // Calculate mouse delta in screen coordinates
+ const mouseDelta = {
+ x: event.clientX - dragStartMouse.x,
+ y: event.clientY - dragStartMouse.y
+ }
+
+ // Convert to canvas coordinates
+ const canvasOrigin = transformState.screenToCanvas({ x: 0, y: 0 })
+ const canvasWithDelta = transformState.screenToCanvas(mouseDelta)
+ const canvasDelta = {
+ x: canvasWithDelta.x - canvasOrigin.x,
+ y: canvasWithDelta.y - canvasOrigin.y
+ }
+
+ // Calculate new position
+ const newPosition = {
+ x: dragStartPos.x + canvasDelta.x,
+ y: dragStartPos.y + canvasDelta.y
+ }
+
+ // Apply mutation through the layout system
+ mutations.moveNode(nodeId, newPosition)
+ }
+
+ /**
+ * End dragging
+ */
+ function endDrag(event: PointerEvent) {
+ if (!isDragging) return
+
+ isDragging = false
+ dragStartPos = null
+ dragStartMouse = null
+
+ // Release pointer
+ const target = event.target as HTMLElement
+ target.releasePointerCapture(event.pointerId)
+ }
+
+ /**
+ * Update node position directly (without drag)
+ */
+ function moveTo(position: Point) {
+ mutations.setSource(LayoutSource.Vue)
+ mutations.moveNode(nodeId, position)
+ }
+
+ /**
+ * Update node size
+ */
+ function resize(newSize: { width: number; height: number }) {
+ mutations.setSource(LayoutSource.Vue)
+ mutations.resizeNode(nodeId, newSize)
+ }
+
+ return {
+ // Reactive state (via customRef)
+ layoutRef,
+ position,
+ size,
+ bounds,
+ isVisible,
+ zIndex,
+
+ // Mutations
+ moveTo,
+ resize,
+
+ // Drag handlers
+ startDrag,
+ handleDrag,
+ endDrag,
+
+ // Computed styles for Vue templates
+ nodeStyle: computed(() => ({
+ position: 'absolute' as const,
+ left: `${position.value.x}px`,
+ top: `${position.value.y}px`,
+ width: `${size.value.width}px`,
+ height: `${size.value.height}px`,
+ zIndex: zIndex.value,
+ cursor: isDragging ? 'grabbing' : 'grab'
+ }))
+ }
+}
diff --git a/src/renderer/extensions/vueNodes/lod/useLOD.ts b/src/renderer/extensions/vueNodes/lod/useLOD.ts
new file mode 100644
index 000000000..9d07e37ca
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/lod/useLOD.ts
@@ -0,0 +1,186 @@
+/**
+ * Level of Detail (LOD) composable for Vue-based node rendering
+ *
+ * Provides dynamic quality adjustment based on zoom level to maintain
+ * performance with large node graphs. Uses zoom thresholds to determine
+ * how much detail to render for each node component.
+ *
+ * ## LOD Levels
+ *
+ * - **FULL** (zoom > 0.8): Complete rendering with all widgets, slots, and content
+ * - **REDUCED** (0.4 < zoom <= 0.8): Essential widgets only, simplified slots
+ * - **MINIMAL** (zoom <= 0.4): Title only, no widgets or slots
+ *
+ * ## Performance Benefits
+ *
+ * - Reduces DOM element count by up to 80% at low zoom levels
+ * - Minimizes layout calculations and paint operations
+ * - Enables smooth performance with 1000+ nodes
+ * - Maintains visual fidelity when detail is actually visible
+ *
+ * @example
+ * ```typescript
+ * const { lodLevel, shouldRenderWidgets, shouldRenderSlots } = useLOD(zoomRef)
+ *
+ * // In template
+ *
+ *
+ * ```
+ */
+import { type Ref, computed, readonly } from 'vue'
+
+export enum LODLevel {
+ MINIMAL = 'minimal', // zoom <= 0.4
+ REDUCED = 'reduced', // 0.4 < zoom <= 0.8
+ FULL = 'full' // zoom > 0.8
+}
+
+export interface LODConfig {
+ renderWidgets: boolean
+ renderSlots: boolean
+ renderContent: boolean
+ renderSlotLabels: boolean
+ renderWidgetLabels: boolean
+ cssClass: string
+}
+
+// LOD configuration for each level
+const LOD_CONFIGS: Record = {
+ [LODLevel.FULL]: {
+ renderWidgets: true,
+ renderSlots: true,
+ renderContent: true,
+ renderSlotLabels: true,
+ renderWidgetLabels: true,
+ cssClass: 'lg-node--lod-full'
+ },
+ [LODLevel.REDUCED]: {
+ renderWidgets: true,
+ renderSlots: true,
+ renderContent: false,
+ renderSlotLabels: false,
+ renderWidgetLabels: false,
+ cssClass: 'lg-node--lod-reduced'
+ },
+ [LODLevel.MINIMAL]: {
+ renderWidgets: false,
+ renderSlots: false,
+ renderContent: false,
+ renderSlotLabels: false,
+ renderWidgetLabels: false,
+ cssClass: 'lg-node--lod-minimal'
+ }
+}
+
+/**
+ * Create LOD (Level of Detail) state based on zoom level
+ *
+ * @param zoomRef - Reactive reference to current zoom level (camera.z)
+ * @returns LOD state and configuration
+ */
+export function useLOD(zoomRef: Ref) {
+ // Continuous LOD score (0-1) for smooth transitions
+ const lodScore = computed(() => {
+ const zoom = zoomRef.value
+ return Math.max(0, Math.min(1, zoom))
+ })
+
+ // Determine current LOD level based on zoom
+ const lodLevel = computed(() => {
+ const zoom = zoomRef.value
+
+ if (zoom > 0.8) return LODLevel.FULL
+ if (zoom > 0.4) return LODLevel.REDUCED
+ return LODLevel.MINIMAL
+ })
+
+ // Get configuration for current LOD level
+ const lodConfig = computed(() => LOD_CONFIGS[lodLevel.value])
+
+ // Convenience computed properties for common rendering decisions
+ const shouldRenderWidgets = computed(() => lodConfig.value.renderWidgets)
+ const shouldRenderSlots = computed(() => lodConfig.value.renderSlots)
+ const shouldRenderContent = computed(() => lodConfig.value.renderContent)
+ const shouldRenderSlotLabels = computed(
+ () => lodConfig.value.renderSlotLabels
+ )
+ const shouldRenderWidgetLabels = computed(
+ () => lodConfig.value.renderWidgetLabels
+ )
+
+ // CSS class for styling based on LOD level
+ const lodCssClass = computed(() => lodConfig.value.cssClass)
+
+ // Get essential widgets for reduced LOD (only interactive controls)
+ const getEssentialWidgets = (widgets: unknown[]): unknown[] => {
+ if (lodLevel.value === LODLevel.FULL) return widgets
+ if (lodLevel.value === LODLevel.MINIMAL) return []
+
+ // For reduced LOD, filter to essential widget types only
+ return widgets.filter((widget: any) => {
+ const type = widget?.type?.toLowerCase()
+ return [
+ 'combo',
+ 'select',
+ 'toggle',
+ 'boolean',
+ 'slider',
+ 'number'
+ ].includes(type)
+ })
+ }
+
+ // Performance metrics for debugging
+ const lodMetrics = computed(() => ({
+ level: lodLevel.value,
+ zoom: zoomRef.value,
+ widgetCount: shouldRenderWidgets.value ? 'full' : 'none',
+ slotCount: shouldRenderSlots.value ? 'full' : 'none'
+ }))
+
+ return {
+ // Core LOD state
+ lodLevel: readonly(lodLevel),
+ lodConfig: readonly(lodConfig),
+ lodScore: readonly(lodScore),
+
+ // Rendering decisions
+ shouldRenderWidgets,
+ shouldRenderSlots,
+ shouldRenderContent,
+ shouldRenderSlotLabels,
+ shouldRenderWidgetLabels,
+
+ // Styling
+ lodCssClass,
+
+ // Utilities
+ getEssentialWidgets,
+ lodMetrics
+ }
+}
+
+/**
+ * Get LOD level thresholds for configuration or debugging
+ */
+export const LOD_THRESHOLDS = {
+ FULL_THRESHOLD: 0.8,
+ REDUCED_THRESHOLD: 0.4,
+ MINIMAL_THRESHOLD: 0.0
+} as const
+
+/**
+ * Check if zoom level supports a specific feature
+ */
+export function supportsFeatureAtZoom(
+ zoom: number,
+ feature: keyof LODConfig
+): boolean {
+ const level =
+ zoom > 0.8
+ ? LODLevel.FULL
+ : zoom > 0.4
+ ? LODLevel.REDUCED
+ : LODLevel.MINIMAL
+ return LOD_CONFIGS[level][feature] as boolean
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
new file mode 100644
index 000000000..ae8fb7567
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
new file mode 100644
index 000000000..1c40d35a7
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
@@ -0,0 +1,78 @@
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
new file mode 100644
index 000000000..ed5f2b0ec
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
new file mode 100644
index 000000000..bdbc42739
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
@@ -0,0 +1,318 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ selectedFile?.name }}
+
+ {{
+ selectedFile ? (selectedFile.size / 1024).toFixed(1) + ' KB' : ''
+ }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ $t('Drop your file or') }}
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
![]()
+
+
![]()
+
+
+ ![]()
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
new file mode 100644
index 000000000..a515ec7cd
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
new file mode 100644
index 000000000..4749e561c
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
new file mode 100644
index 000000000..c2ee71acf
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
new file mode 100644
index 000000000..d2021f617
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
new file mode 100644
index 000000000..c63edcf60
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
new file mode 100644
index 000000000..5bb53784f
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
@@ -0,0 +1,170 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
new file mode 100644
index 000000000..157da563e
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
new file mode 100644
index 000000000..61b29cba7
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
new file mode 100644
index 000000000..81f7a117f
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
new file mode 100644
index 000000000..41e5f6efa
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
new file mode 100644
index 000000000..3aac1b242
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+ {{ widget.name }}
+
+
+
+
+