(
+ 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 0000000000..52dbacac05
--- /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 0000000000..4ce4e21001
--- /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 0000000000..3b3da31013
--- /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 0000000000..68f2479321
--- /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 0000000000..0cd7a59cc5
--- /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 0000000000..144d5978d5
--- /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 0000000000..d5b8b1ad8f
--- /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 0000000000..95c8b40a37
--- /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 0000000000..407a14243e
--- /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 0000000000..9d07e37ca3
--- /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 0000000000..ae8fb75674
--- /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 0000000000..1c40d35a7f
--- /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 0000000000..ed5f2b0ecc
--- /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 0000000000..bdbc427391
--- /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 0000000000..a515ec7cdc
--- /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 0000000000..4749e561cd
--- /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 0000000000..c2ee71acfc
--- /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 0000000000..d2021f6176
--- /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 0000000000..c63edcf60d
--- /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 0000000000..5bb53784f4
--- /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 0000000000..157da563ed
--- /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 0000000000..61b29cba73
--- /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 0000000000..81f7a117f2
--- /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 0000000000..41e5f6efa8
--- /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 0000000000..3aac1b2426
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+ {{ widget.name }}
+
+
+
+
+
{{ isActive }}
'
+ }
+
+ const wrapper = mount(TestComponent)
+ await nextTick()
+
+ expect(callbacks.onStart).toHaveBeenCalled()
+
+ // Unmount component
+ wrapper.unmount()
+ await nextTick()
+
+ expect(callbacks.onStop).toHaveBeenCalled()
+ expect(global.cancelAnimationFrame).toHaveBeenCalled()
+ })
+
+ it('should work without callbacks', async () => {
+ const { isActive } = useCanvasTransformSync(mockCanvas, syncFn)
+
+ await nextTick()
+
+ expect(isActive.value).toBe(true)
+ expect(syncFn).toHaveBeenCalledWith(mockCanvas)
+ })
+
+ it('should stop sync when canvas becomes null during sync', async () => {
+ let currentCanvas: any = mockCanvas
+ const dynamicSyncFn = vi.fn(() => {
+ // Simulate canvas becoming null during sync
+ currentCanvas = null
+ })
+
+ const { isActive } = useCanvasTransformSync(
+ currentCanvas,
+ dynamicSyncFn,
+ callbacks
+ )
+
+ await nextTick()
+
+ expect(isActive.value).toBe(true)
+
+ // Advance time to trigger sync
+ vi.advanceTimersByTime(16)
+ await nextTick()
+
+ // Should handle null canvas gracefully
+ expect(dynamicSyncFn).toHaveBeenCalled()
+ })
+
+ it('should use cancelAnimationFrame when stopping', async () => {
+ const { stopSync } = useCanvasTransformSync(mockCanvas, syncFn, callbacks)
+
+ await nextTick()
+
+ stopSync()
+
+ expect(global.cancelAnimationFrame).toHaveBeenCalledWith(1)
+ })
+})
diff --git a/tests-ui/tests/composables/graph/useSpatialIndex.test.ts b/tests-ui/tests/composables/graph/useSpatialIndex.test.ts
new file mode 100644
index 0000000000..4e34c0f04e
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useSpatialIndex.test.ts
@@ -0,0 +1,498 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSpatialIndex } from '@/composables/graph/useSpatialIndex'
+
+// Mock @vueuse/core
+vi.mock('@vueuse/core', () => ({
+ useDebounceFn: (fn: (...args: any[]) => any) => fn // Return function directly for testing
+}))
+
+describe('useSpatialIndex', () => {
+ let spatialIndex: ReturnType
+
+ beforeEach(() => {
+ spatialIndex = useSpatialIndex()
+ })
+
+ describe('initialization', () => {
+ it('should start with null quadTree', () => {
+ expect(spatialIndex.quadTree.value).toBeNull()
+ })
+
+ it('should initialize with default bounds when first node is added', () => {
+ const { updateNode, quadTree, metrics } = spatialIndex
+
+ updateNode('node1', { x: 100, y: 100 }, { width: 200, height: 100 })
+
+ expect(quadTree.value).not.toBeNull()
+ expect(metrics.value.totalNodes).toBe(1)
+ })
+
+ it('should initialize with custom bounds', () => {
+ const { initialize, quadTree } = spatialIndex
+ const customBounds = { x: 0, y: 0, width: 5000, height: 3000 }
+
+ initialize(customBounds)
+
+ expect(quadTree.value).not.toBeNull()
+ })
+
+ it('should increment rebuild count on initialization', () => {
+ const { initialize, metrics } = spatialIndex
+
+ expect(metrics.value.rebuildCount).toBe(0)
+ initialize()
+ expect(metrics.value.rebuildCount).toBe(1)
+ })
+
+ it('should accept custom options', () => {
+ const customIndex = useSpatialIndex({
+ maxDepth: 8,
+ maxItemsPerNode: 6,
+ updateDebounceMs: 32
+ })
+
+ customIndex.initialize()
+
+ expect(customIndex.quadTree.value).not.toBeNull()
+ })
+ })
+
+ describe('updateNode', () => {
+ it('should add a new node to the index', () => {
+ const { updateNode, metrics } = spatialIndex
+
+ updateNode('node1', { x: 100, y: 100 }, { width: 200, height: 100 })
+
+ expect(metrics.value.totalNodes).toBe(1)
+ })
+
+ it('should update existing node position', () => {
+ const { updateNode, queryViewport } = spatialIndex
+
+ // Add node
+ updateNode('node1', { x: 100, y: 100 }, { width: 200, height: 100 })
+
+ // Move node
+ updateNode('node1', { x: 500, y: 500 }, { width: 200, height: 100 })
+
+ // Query old position - should not find node
+ const oldResults = queryViewport({
+ x: 50,
+ y: 50,
+ width: 300,
+ height: 200
+ })
+ expect(oldResults).not.toContain('node1')
+
+ // Query new position - should find node
+ const newResults = queryViewport({
+ x: 450,
+ y: 450,
+ width: 300,
+ height: 200
+ })
+ expect(newResults).toContain('node1')
+ })
+
+ it('should auto-initialize if quadTree is null', () => {
+ const { updateNode, quadTree } = spatialIndex
+
+ expect(quadTree.value).toBeNull()
+ updateNode('node1', { x: 0, y: 0 }, { width: 100, height: 100 })
+ expect(quadTree.value).not.toBeNull()
+ })
+ })
+
+ describe('batchUpdate', () => {
+ it('should update multiple nodes at once', () => {
+ const { batchUpdate, metrics } = spatialIndex
+
+ const updates = [
+ {
+ id: 'node1',
+ position: { x: 100, y: 100 },
+ size: { width: 200, height: 100 }
+ },
+ {
+ id: 'node2',
+ position: { x: 300, y: 300 },
+ size: { width: 150, height: 150 }
+ },
+ {
+ id: 'node3',
+ position: { x: 500, y: 200 },
+ size: { width: 100, height: 200 }
+ }
+ ]
+
+ batchUpdate(updates)
+
+ expect(metrics.value.totalNodes).toBe(3)
+ })
+
+ it('should handle empty batch', () => {
+ const { batchUpdate, metrics } = spatialIndex
+
+ batchUpdate([])
+
+ expect(metrics.value.totalNodes).toBe(0)
+ })
+
+ it('should auto-initialize if needed', () => {
+ const { batchUpdate, quadTree } = spatialIndex
+
+ expect(quadTree.value).toBeNull()
+ batchUpdate([
+ {
+ id: 'node1',
+ position: { x: 0, y: 0 },
+ size: { width: 100, height: 100 }
+ }
+ ])
+ expect(quadTree.value).not.toBeNull()
+ })
+ })
+
+ describe('removeNode', () => {
+ beforeEach(() => {
+ spatialIndex.updateNode(
+ 'node1',
+ { x: 100, y: 100 },
+ { width: 200, height: 100 }
+ )
+ spatialIndex.updateNode(
+ 'node2',
+ { x: 300, y: 300 },
+ { width: 200, height: 100 }
+ )
+ })
+
+ it('should remove node from index', () => {
+ const { removeNode, metrics } = spatialIndex
+
+ expect(metrics.value.totalNodes).toBe(2)
+ removeNode('node1')
+ expect(metrics.value.totalNodes).toBe(1)
+ })
+
+ it('should handle removing non-existent node', () => {
+ const { removeNode, metrics } = spatialIndex
+
+ expect(metrics.value.totalNodes).toBe(2)
+ removeNode('node999')
+ expect(metrics.value.totalNodes).toBe(2)
+ })
+
+ it('should handle removeNode when quadTree is null', () => {
+ const freshIndex = useSpatialIndex()
+
+ // Should not throw
+ expect(() => freshIndex.removeNode('node1')).not.toThrow()
+ })
+ })
+
+ describe('queryViewport', () => {
+ beforeEach(() => {
+ // Set up a grid of nodes
+ spatialIndex.updateNode(
+ 'node1',
+ { x: 0, y: 0 },
+ { width: 100, height: 100 }
+ )
+ spatialIndex.updateNode(
+ 'node2',
+ { x: 200, y: 0 },
+ { width: 100, height: 100 }
+ )
+ spatialIndex.updateNode(
+ 'node3',
+ { x: 0, y: 200 },
+ { width: 100, height: 100 }
+ )
+ spatialIndex.updateNode(
+ 'node4',
+ { x: 200, y: 200 },
+ { width: 100, height: 100 }
+ )
+ })
+
+ it('should find nodes within viewport bounds', () => {
+ const { queryViewport } = spatialIndex
+
+ // Query top-left quadrant
+ const results = queryViewport({ x: -50, y: -50, width: 200, height: 200 })
+ expect(results).toContain('node1')
+ expect(results).not.toContain('node2')
+ expect(results).not.toContain('node3')
+ expect(results).not.toContain('node4')
+ })
+
+ it('should find multiple nodes in larger viewport', () => {
+ const { queryViewport } = spatialIndex
+
+ // Query entire area
+ const results = queryViewport({ x: -50, y: -50, width: 400, height: 400 })
+ expect(results).toHaveLength(4)
+ expect(results).toContain('node1')
+ expect(results).toContain('node2')
+ expect(results).toContain('node3')
+ expect(results).toContain('node4')
+ })
+
+ it('should return empty array for empty region', () => {
+ const { queryViewport } = spatialIndex
+
+ const results = queryViewport({
+ x: 1000,
+ y: 1000,
+ width: 100,
+ height: 100
+ })
+ expect(results).toEqual([])
+ })
+
+ it('should update metrics after query', () => {
+ const { queryViewport, metrics } = spatialIndex
+
+ queryViewport({ x: 0, y: 0, width: 300, height: 300 })
+
+ expect(metrics.value.queryTime).toBeGreaterThan(0)
+ expect(metrics.value.visibleNodes).toBe(4)
+ })
+
+ it('should handle query when quadTree is null', () => {
+ const freshIndex = useSpatialIndex()
+
+ const results = freshIndex.queryViewport({
+ x: 0,
+ y: 0,
+ width: 100,
+ height: 100
+ })
+ expect(results).toEqual([])
+ })
+ })
+
+ describe('queryRadius', () => {
+ beforeEach(() => {
+ // Set up nodes at different distances
+ spatialIndex.updateNode(
+ 'center',
+ { x: 475, y: 475 },
+ { width: 50, height: 50 }
+ )
+ spatialIndex.updateNode(
+ 'near1',
+ { x: 525, y: 475 },
+ { width: 50, height: 50 }
+ )
+ spatialIndex.updateNode(
+ 'near2',
+ { x: 425, y: 475 },
+ { width: 50, height: 50 }
+ )
+ spatialIndex.updateNode(
+ 'far',
+ { x: 775, y: 775 },
+ { width: 50, height: 50 }
+ )
+ })
+
+ it('should find nodes within radius', () => {
+ const { queryRadius } = spatialIndex
+
+ const results = queryRadius({ x: 500, y: 500 }, 100)
+
+ expect(results).toContain('center')
+ expect(results).toContain('near1')
+ expect(results).toContain('near2')
+ expect(results).not.toContain('far')
+ })
+
+ it('should handle zero radius', () => {
+ const { queryRadius } = spatialIndex
+
+ const results = queryRadius({ x: 500, y: 500 }, 0)
+
+ // Zero radius creates a point query at (500,500)
+ // The 'center' node spans 475-525 on both axes, so it contains this point
+ expect(results).toContain('center')
+ })
+
+ it('should handle large radius', () => {
+ const { queryRadius } = spatialIndex
+
+ const results = queryRadius({ x: 500, y: 500 }, 1000)
+
+ expect(results).toHaveLength(4) // Should find all nodes
+ })
+ })
+
+ describe('clear', () => {
+ beforeEach(() => {
+ spatialIndex.updateNode(
+ 'node1',
+ { x: 100, y: 100 },
+ { width: 200, height: 100 }
+ )
+ spatialIndex.updateNode(
+ 'node2',
+ { x: 300, y: 300 },
+ { width: 200, height: 100 }
+ )
+ })
+
+ it('should remove all nodes', () => {
+ const { clear, metrics } = spatialIndex
+
+ expect(metrics.value.totalNodes).toBe(2)
+ clear()
+ expect(metrics.value.totalNodes).toBe(0)
+ })
+
+ it('should reset metrics', () => {
+ const { clear, queryViewport, metrics } = spatialIndex
+
+ // Do a query to set visible nodes
+ queryViewport({ x: 0, y: 0, width: 500, height: 500 })
+ expect(metrics.value.visibleNodes).toBe(2)
+
+ clear()
+ expect(metrics.value.visibleNodes).toBe(0)
+ })
+
+ it('should handle clear when quadTree is null', () => {
+ const freshIndex = useSpatialIndex()
+
+ expect(() => freshIndex.clear()).not.toThrow()
+ })
+ })
+
+ describe('rebuild', () => {
+ it('should rebuild index with new nodes', () => {
+ const { rebuild, metrics, queryViewport } = spatialIndex
+
+ // Add initial nodes
+ spatialIndex.updateNode(
+ 'old1',
+ { x: 0, y: 0 },
+ { width: 100, height: 100 }
+ )
+ expect(metrics.value.rebuildCount).toBe(1)
+
+ // Rebuild with new set
+ const newNodes = new Map([
+ [
+ 'new1',
+ { position: { x: 100, y: 100 }, size: { width: 50, height: 50 } }
+ ],
+ [
+ 'new2',
+ { position: { x: 200, y: 200 }, size: { width: 50, height: 50 } }
+ ]
+ ])
+
+ rebuild(newNodes)
+
+ expect(metrics.value.totalNodes).toBe(2)
+ expect(metrics.value.rebuildCount).toBe(2)
+
+ // Old nodes should be gone
+ const oldResults = queryViewport({
+ x: -50,
+ y: -50,
+ width: 100,
+ height: 100
+ })
+ expect(oldResults).not.toContain('old1')
+
+ // New nodes should be findable
+ const newResults = queryViewport({
+ x: 50,
+ y: 50,
+ width: 200,
+ height: 200
+ })
+ expect(newResults).toContain('new1')
+ expect(newResults).toContain('new2')
+ })
+
+ it('should handle empty rebuild', () => {
+ const { rebuild, metrics } = spatialIndex
+
+ rebuild(new Map())
+
+ expect(metrics.value.totalNodes).toBe(0)
+ })
+ })
+
+ describe('metrics', () => {
+ it('should track performance metrics', () => {
+ const { metrics, updateNode, queryViewport } = spatialIndex
+
+ // Initial state
+ expect(metrics.value).toEqual({
+ queryTime: 0,
+ totalNodes: 0,
+ visibleNodes: 0,
+ treeDepth: 0,
+ rebuildCount: 0
+ })
+
+ // Add nodes
+ updateNode('node1', { x: 0, y: 0 }, { width: 100, height: 100 })
+ expect(metrics.value.totalNodes).toBe(1)
+
+ // Query
+ queryViewport({ x: -50, y: -50, width: 200, height: 200 })
+ expect(metrics.value.queryTime).toBeGreaterThan(0)
+ expect(metrics.value.visibleNodes).toBe(1)
+ })
+ })
+
+ describe('edge cases', () => {
+ it('should handle nodes with zero size', () => {
+ const { updateNode, queryViewport } = spatialIndex
+
+ updateNode('point', { x: 100, y: 100 }, { width: 0, height: 0 })
+
+ // Should still be findable
+ const results = queryViewport({ x: 50, y: 50, width: 100, height: 100 })
+ expect(results).toContain('point')
+ })
+
+ it('should handle negative positions', () => {
+ const { updateNode, queryViewport } = spatialIndex
+
+ updateNode('negative', { x: -500, y: -500 }, { width: 100, height: 100 })
+
+ const results = queryViewport({
+ x: -600,
+ y: -600,
+ width: 200,
+ height: 200
+ })
+ expect(results).toContain('negative')
+ })
+
+ it('should handle very large nodes', () => {
+ const { updateNode, queryViewport } = spatialIndex
+
+ updateNode('huge', { x: 0, y: 0 }, { width: 5000, height: 5000 })
+
+ // Should be found even when querying small area within it
+ const results = queryViewport({ x: 100, y: 100, width: 10, height: 10 })
+ expect(results).toContain('huge')
+ })
+ })
+
+ describe('debouncedUpdateNode', () => {
+ it('should be available', () => {
+ const { debouncedUpdateNode } = spatialIndex
+
+ expect(debouncedUpdateNode).toBeDefined()
+ expect(typeof debouncedUpdateNode).toBe('function')
+ })
+ })
+})
diff --git a/tests-ui/tests/composables/graph/useTransformSettling.test.ts b/tests-ui/tests/composables/graph/useTransformSettling.test.ts
new file mode 100644
index 0000000000..2bc6342c84
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useTransformSettling.test.ts
@@ -0,0 +1,277 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import { useTransformSettling } from '@/composables/graph/useTransformSettling'
+
+describe('useTransformSettling', () => {
+ let element: HTMLDivElement
+
+ beforeEach(() => {
+ vi.useFakeTimers()
+ element = document.createElement('div')
+ document.body.appendChild(element)
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ document.body.removeChild(element)
+ })
+
+ it('should track wheel events and settle after delay', async () => {
+ const { isTransforming } = useTransformSettling(element)
+
+ // Initially not transforming
+ expect(isTransforming.value).toBe(false)
+
+ // Dispatch wheel event
+ element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+ await nextTick()
+
+ // Should be transforming
+ expect(isTransforming.value).toBe(true)
+
+ // Advance time but not past settle delay
+ vi.advanceTimersByTime(100)
+ expect(isTransforming.value).toBe(true)
+
+ // Advance past settle delay (default 200ms)
+ vi.advanceTimersByTime(150)
+ expect(isTransforming.value).toBe(false)
+ })
+
+ it('should reset settle timer on subsequent wheel events', async () => {
+ const { isTransforming } = useTransformSettling(element, {
+ settleDelay: 300
+ })
+
+ // First wheel event
+ element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+ await nextTick()
+ expect(isTransforming.value).toBe(true)
+
+ // Advance time partially
+ vi.advanceTimersByTime(200)
+ expect(isTransforming.value).toBe(true)
+
+ // Another wheel event should reset the timer
+ element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+ await nextTick()
+
+ // Advance 200ms more - should still be transforming
+ vi.advanceTimersByTime(200)
+ expect(isTransforming.value).toBe(true)
+
+ // Need another 100ms to settle (300ms total from last event)
+ vi.advanceTimersByTime(100)
+ expect(isTransforming.value).toBe(false)
+ })
+
+ it('should track pan events when trackPan is enabled', async () => {
+ const { isTransforming } = useTransformSettling(element, {
+ trackPan: true,
+ settleDelay: 200
+ })
+
+ // Pointer down should start transform
+ element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+ await nextTick()
+ expect(isTransforming.value).toBe(true)
+
+ // Pointer move should keep it active
+ vi.advanceTimersByTime(100)
+ element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
+ await nextTick()
+
+ // Should still be transforming
+ expect(isTransforming.value).toBe(true)
+
+ // Pointer up
+ element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+ await nextTick()
+
+ // Should still be transforming until settle delay
+ expect(isTransforming.value).toBe(true)
+
+ // Advance past settle delay
+ vi.advanceTimersByTime(200)
+ expect(isTransforming.value).toBe(false)
+ })
+
+ it('should not track pan events when trackPan is disabled', async () => {
+ const { isTransforming } = useTransformSettling(element, {
+ trackPan: false
+ })
+
+ // Pointer events should not trigger transform
+ element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+ element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
+ await nextTick()
+
+ expect(isTransforming.value).toBe(false)
+ })
+
+ it('should handle pointer cancel events', async () => {
+ const { isTransforming } = useTransformSettling(element, {
+ trackPan: true,
+ settleDelay: 200
+ })
+
+ // Start panning
+ element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+ await nextTick()
+ expect(isTransforming.value).toBe(true)
+
+ // Cancel instead of up
+ element.dispatchEvent(new PointerEvent('pointercancel', { bubbles: true }))
+ await nextTick()
+
+ // Should still settle normally
+ vi.advanceTimersByTime(200)
+ expect(isTransforming.value).toBe(false)
+ })
+
+ it('should work with ref target', async () => {
+ const targetRef = ref(null)
+ const { isTransforming } = useTransformSettling(targetRef)
+
+ // No target yet
+ expect(isTransforming.value).toBe(false)
+
+ // Set target
+ targetRef.value = element
+ await nextTick()
+
+ // Now events should work
+ element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+ await nextTick()
+ expect(isTransforming.value).toBe(true)
+
+ vi.advanceTimersByTime(200)
+ expect(isTransforming.value).toBe(false)
+ })
+
+ it('should use capture phase for events', async () => {
+ const captureHandler = vi.fn()
+ const bubbleHandler = vi.fn()
+
+ // Add handlers to verify capture phase
+ element.addEventListener('wheel', captureHandler, true)
+ element.addEventListener('wheel', bubbleHandler, false)
+
+ const { isTransforming } = useTransformSettling(element)
+
+ // Create child element
+ const child = document.createElement('div')
+ element.appendChild(child)
+
+ // Dispatch event on child
+ child.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+ await nextTick()
+
+ // Capture handler should be called before bubble handler
+ expect(captureHandler).toHaveBeenCalled()
+ expect(isTransforming.value).toBe(true)
+
+ element.removeEventListener('wheel', captureHandler, true)
+ element.removeEventListener('wheel', bubbleHandler, false)
+ })
+
+ it('should throttle pointer move events', async () => {
+ const { isTransforming } = useTransformSettling(element, {
+ trackPan: true,
+ pointerMoveThrottle: 50,
+ settleDelay: 100
+ })
+
+ // Start panning
+ element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+ await nextTick()
+
+ // Fire many pointer move events rapidly
+ for (let i = 0; i < 10; i++) {
+ element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
+ vi.advanceTimersByTime(5) // 5ms between events
+ }
+ await nextTick()
+
+ // Should still be transforming
+ expect(isTransforming.value).toBe(true)
+
+ // End panning
+ element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+
+ // Advance past settle delay
+ vi.advanceTimersByTime(100)
+ expect(isTransforming.value).toBe(false)
+ })
+
+ it('should clean up event listeners when component unmounts', async () => {
+ const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener')
+
+ // Create a test component
+ const TestComponent = {
+ setup() {
+ const { isTransforming } = useTransformSettling(element, {
+ trackPan: true
+ })
+ return { isTransforming }
+ },
+ template: '{{ isTransforming }}
'
+ }
+
+ const wrapper = mount(TestComponent)
+ await nextTick()
+
+ // Unmount component
+ wrapper.unmount()
+
+ // Should have removed all event listeners
+ expect(removeEventListenerSpy).toHaveBeenCalledWith(
+ 'wheel',
+ expect.any(Function),
+ expect.objectContaining({ capture: true })
+ )
+ expect(removeEventListenerSpy).toHaveBeenCalledWith(
+ 'pointerdown',
+ expect.any(Function),
+ expect.objectContaining({ capture: true })
+ )
+ expect(removeEventListenerSpy).toHaveBeenCalledWith(
+ 'pointermove',
+ expect.any(Function),
+ expect.objectContaining({ capture: true })
+ )
+ expect(removeEventListenerSpy).toHaveBeenCalledWith(
+ 'pointerup',
+ expect.any(Function),
+ expect.objectContaining({ capture: true })
+ )
+ expect(removeEventListenerSpy).toHaveBeenCalledWith(
+ 'pointercancel',
+ expect.any(Function),
+ expect.objectContaining({ capture: true })
+ )
+ })
+
+ it('should use passive listeners when specified', async () => {
+ const addEventListenerSpy = vi.spyOn(element, 'addEventListener')
+
+ useTransformSettling(element, {
+ passive: true,
+ trackPan: true
+ })
+
+ // Check that passive option was used for appropriate events
+ expect(addEventListenerSpy).toHaveBeenCalledWith(
+ 'wheel',
+ expect.any(Function),
+ expect.objectContaining({ passive: true, capture: true })
+ )
+ expect(addEventListenerSpy).toHaveBeenCalledWith(
+ 'pointermove',
+ expect.any(Function),
+ expect.objectContaining({ passive: true, capture: true })
+ )
+ })
+})
diff --git a/tests-ui/tests/composables/graph/useWidgetValue.test.ts b/tests-ui/tests/composables/graph/useWidgetValue.test.ts
new file mode 100644
index 0000000000..1557230740
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useWidgetValue.test.ts
@@ -0,0 +1,503 @@
+import {
+ type MockedFunction,
+ afterEach,
+ beforeEach,
+ describe,
+ expect,
+ it,
+ vi
+} from 'vitest'
+import { ref } from 'vue'
+
+import {
+ useBooleanWidgetValue,
+ useNumberWidgetValue,
+ useStringWidgetValue,
+ useWidgetValue
+} from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+describe('useWidgetValue', () => {
+ let mockWidget: SimplifiedWidget
+ let mockEmit: MockedFunction<(event: 'update:modelValue', value: any) => void>
+ let consoleWarnSpy: ReturnType
+
+ beforeEach(() => {
+ mockWidget = {
+ name: 'testWidget',
+ type: 'string',
+ value: 'initial',
+ callback: vi.fn()
+ }
+ mockEmit = vi.fn()
+ consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+ })
+
+ afterEach(() => {
+ consoleWarnSpy.mockRestore()
+ })
+
+ describe('basic functionality', () => {
+ it('should initialize with modelValue', () => {
+ const { localValue } = useWidgetValue({
+ widget: mockWidget,
+ modelValue: 'test value',
+ defaultValue: '',
+ emit: mockEmit
+ })
+
+ expect(localValue.value).toBe('test value')
+ })
+
+ it('should use defaultValue when modelValue is null', () => {
+ const { localValue } = useWidgetValue({
+ widget: mockWidget,
+ modelValue: null as any,
+ defaultValue: 'default',
+ emit: mockEmit
+ })
+
+ expect(localValue.value).toBe('default')
+ })
+
+ it('should use defaultValue when modelValue is undefined', () => {
+ const { localValue } = useWidgetValue({
+ widget: mockWidget,
+ modelValue: undefined as any,
+ defaultValue: 'default',
+ emit: mockEmit
+ })
+
+ expect(localValue.value).toBe('default')
+ })
+ })
+
+ describe('onChange handler', () => {
+ it('should update localValue immediately', () => {
+ const { localValue, onChange } = useWidgetValue({
+ widget: mockWidget,
+ modelValue: 'initial',
+ defaultValue: '',
+ emit: mockEmit
+ })
+
+ onChange('new value')
+ expect(localValue.value).toBe('new value')
+ })
+
+ it('should emit update:modelValue event', () => {
+ const { onChange } = useWidgetValue({
+ widget: mockWidget,
+ modelValue: 'initial',
+ defaultValue: '',
+ emit: mockEmit
+ })
+
+ onChange('new value')
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'new value')
+ })
+
+ // useGraphNodeMaanger's createWrappedWidgetCallback makes the callback right now instead of useWidgetValue
+ // it('should call widget callback if it exists', () => {
+ // const { onChange } = useWidgetValue({
+ // widget: mockWidget,
+ // modelValue: 'initial',
+ // defaultValue: '',
+ // emit: mockEmit
+ // })
+
+ // onChange('new value')
+ // expect(mockWidget.callback).toHaveBeenCalledWith('new value')
+ // })
+
+ it('should not error if widget callback is undefined', () => {
+ const widgetWithoutCallback = { ...mockWidget, callback: undefined }
+ const { onChange } = useWidgetValue({
+ widget: widgetWithoutCallback,
+ modelValue: 'initial',
+ defaultValue: '',
+ emit: mockEmit
+ })
+
+ expect(() => onChange('new value')).not.toThrow()
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'new value')
+ })
+
+ it('should handle null values', () => {
+ const { localValue, onChange } = useWidgetValue({
+ widget: mockWidget,
+ modelValue: 'initial',
+ defaultValue: 'default',
+ emit: mockEmit
+ })
+
+ onChange(null as any)
+ expect(localValue.value).toBe('default')
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'default')
+ })
+
+ it('should handle undefined values', () => {
+ const { localValue, onChange } = useWidgetValue({
+ widget: mockWidget,
+ modelValue: 'initial',
+ defaultValue: 'default',
+ emit: mockEmit
+ })
+
+ onChange(undefined as any)
+ expect(localValue.value).toBe('default')
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'default')
+ })
+ })
+
+ describe('type safety', () => {
+ it('should handle type mismatches with warning', () => {
+ const numberWidget: SimplifiedWidget = {
+ name: 'numberWidget',
+ type: 'number',
+ value: 42,
+ callback: vi.fn()
+ }
+
+ const { onChange } = useWidgetValue({
+ widget: numberWidget,
+ modelValue: 10,
+ defaultValue: 0,
+ emit: mockEmit
+ })
+
+ // Pass string to number widget
+ onChange('not a number' as any)
+
+ expect(consoleWarnSpy).toHaveBeenCalledWith(
+ 'useWidgetValue: Type mismatch for widget numberWidget. Expected number, got string'
+ )
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 0) // Uses defaultValue
+ })
+
+ it('should accept values of matching type', () => {
+ const numberWidget: SimplifiedWidget = {
+ name: 'numberWidget',
+ type: 'number',
+ value: 42,
+ callback: vi.fn()
+ }
+
+ const { onChange } = useWidgetValue({
+ widget: numberWidget,
+ modelValue: 10,
+ defaultValue: 0,
+ emit: mockEmit
+ })
+
+ onChange(25)
+ expect(consoleWarnSpy).not.toHaveBeenCalled()
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 25)
+ })
+ })
+
+ describe('transform function', () => {
+ it('should apply transform function to new values', () => {
+ const transform = vi.fn((value: string) => value.toUpperCase())
+ const { onChange } = useWidgetValue({
+ widget: mockWidget,
+ modelValue: 'initial',
+ defaultValue: '',
+ emit: mockEmit,
+ transform
+ })
+
+ onChange('hello')
+ expect(transform).toHaveBeenCalledWith('hello')
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'HELLO')
+ })
+
+ it('should skip type checking when transform is provided', () => {
+ const numberWidget: SimplifiedWidget = {
+ name: 'numberWidget',
+ type: 'number',
+ value: 42,
+ callback: vi.fn()
+ }
+
+ const transform = (value: string) => parseInt(value, 10) || 0
+ const { onChange } = useWidgetValue({
+ widget: numberWidget,
+ modelValue: 10,
+ defaultValue: 0,
+ emit: mockEmit,
+ transform
+ })
+
+ onChange('123')
+ expect(consoleWarnSpy).not.toHaveBeenCalled()
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 123)
+ })
+ })
+
+ describe('external updates', () => {
+ it('should update localValue when modelValue changes', async () => {
+ const modelValue = ref('initial')
+ const { localValue } = useWidgetValue({
+ widget: mockWidget,
+ modelValue: modelValue.value,
+ defaultValue: '',
+ emit: mockEmit
+ })
+
+ expect(localValue.value).toBe('initial')
+
+ // Simulate parent updating modelValue
+ modelValue.value = 'updated externally'
+
+ // Re-create the composable with new value (simulating prop change)
+ const { localValue: newLocalValue } = useWidgetValue({
+ widget: mockWidget,
+ modelValue: modelValue.value,
+ defaultValue: '',
+ emit: mockEmit
+ })
+
+ expect(newLocalValue.value).toBe('updated externally')
+ })
+
+ it('should handle external null values', async () => {
+ const modelValue = ref('initial')
+ const { localValue } = useWidgetValue({
+ widget: mockWidget,
+ modelValue: modelValue.value!,
+ defaultValue: 'default',
+ emit: mockEmit
+ })
+
+ expect(localValue.value).toBe('initial')
+
+ // Simulate external update to null
+ modelValue.value = null
+ const { localValue: newLocalValue } = useWidgetValue({
+ widget: mockWidget,
+ modelValue: modelValue.value as any,
+ defaultValue: 'default',
+ emit: mockEmit
+ })
+
+ expect(newLocalValue.value).toBe('default')
+ })
+ })
+
+ describe('useStringWidgetValue helper', () => {
+ it('should handle string values correctly', () => {
+ const stringWidget: SimplifiedWidget = {
+ name: 'textWidget',
+ type: 'string',
+ value: 'hello',
+ callback: vi.fn()
+ }
+
+ const { localValue, onChange } = useStringWidgetValue(
+ stringWidget,
+ 'initial',
+ mockEmit
+ )
+
+ expect(localValue.value).toBe('initial')
+
+ onChange('new string')
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'new string')
+ })
+
+ it('should transform undefined to empty string', () => {
+ const stringWidget: SimplifiedWidget = {
+ name: 'textWidget',
+ type: 'string',
+ value: '',
+ callback: vi.fn()
+ }
+
+ const { onChange } = useStringWidgetValue(stringWidget, '', mockEmit)
+
+ onChange(undefined as any)
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', '')
+ })
+
+ it('should convert non-string values to string', () => {
+ const stringWidget: SimplifiedWidget = {
+ name: 'textWidget',
+ type: 'string',
+ value: '',
+ callback: vi.fn()
+ }
+
+ const { onChange } = useStringWidgetValue(stringWidget, '', mockEmit)
+
+ onChange(123 as any)
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', '123')
+ })
+ })
+
+ describe('useNumberWidgetValue helper', () => {
+ it('should handle number values correctly', () => {
+ const numberWidget: SimplifiedWidget = {
+ name: 'sliderWidget',
+ type: 'number',
+ value: 50,
+ callback: vi.fn()
+ }
+
+ const { localValue, onChange } = useNumberWidgetValue(
+ numberWidget,
+ 25,
+ mockEmit
+ )
+
+ expect(localValue.value).toBe(25)
+
+ onChange(75)
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 75)
+ })
+
+ it('should handle array values from PrimeVue Slider', () => {
+ const numberWidget: SimplifiedWidget = {
+ name: 'sliderWidget',
+ type: 'number',
+ value: 50,
+ callback: vi.fn()
+ }
+
+ const { onChange } = useNumberWidgetValue(numberWidget, 25, mockEmit)
+
+ // PrimeVue Slider can emit number[]
+ onChange([42, 100] as any)
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 42)
+ })
+
+ it('should handle empty array', () => {
+ const numberWidget: SimplifiedWidget = {
+ name: 'sliderWidget',
+ type: 'number',
+ value: 50,
+ callback: vi.fn()
+ }
+
+ const { onChange } = useNumberWidgetValue(numberWidget, 25, mockEmit)
+
+ onChange([] as any)
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 0)
+ })
+
+ it('should convert string numbers', () => {
+ const numberWidget: SimplifiedWidget = {
+ name: 'numberWidget',
+ type: 'number',
+ value: 0,
+ callback: vi.fn()
+ }
+
+ const { onChange } = useNumberWidgetValue(numberWidget, 0, mockEmit)
+
+ onChange('42' as any)
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 42)
+ })
+
+ it('should handle invalid number conversions', () => {
+ const numberWidget: SimplifiedWidget = {
+ name: 'numberWidget',
+ type: 'number',
+ value: 0,
+ callback: vi.fn()
+ }
+
+ const { onChange } = useNumberWidgetValue(numberWidget, 0, mockEmit)
+
+ onChange('not-a-number' as any)
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 0)
+ })
+ })
+
+ describe('useBooleanWidgetValue helper', () => {
+ it('should handle boolean values correctly', () => {
+ const boolWidget: SimplifiedWidget = {
+ name: 'toggleWidget',
+ type: 'boolean',
+ value: false,
+ callback: vi.fn()
+ }
+
+ const { localValue, onChange } = useBooleanWidgetValue(
+ boolWidget,
+ true,
+ mockEmit
+ )
+
+ expect(localValue.value).toBe(true)
+
+ onChange(false)
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', false)
+ })
+
+ it('should convert truthy values to true', () => {
+ const boolWidget: SimplifiedWidget = {
+ name: 'toggleWidget',
+ type: 'boolean',
+ value: false,
+ callback: vi.fn()
+ }
+
+ const { onChange } = useBooleanWidgetValue(boolWidget, false, mockEmit)
+
+ onChange('truthy' as any)
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', true)
+ })
+
+ it('should convert falsy values to false', () => {
+ const boolWidget: SimplifiedWidget = {
+ name: 'toggleWidget',
+ type: 'boolean',
+ value: false,
+ callback: vi.fn()
+ }
+
+ const { onChange } = useBooleanWidgetValue(boolWidget, true, mockEmit)
+
+ onChange(0 as any)
+ expect(mockEmit).toHaveBeenCalledWith('update:modelValue', false)
+ })
+ })
+
+ describe('edge cases', () => {
+ it('should handle rapid onChange calls', () => {
+ const { onChange } = useWidgetValue({
+ widget: mockWidget,
+ modelValue: 'initial',
+ defaultValue: '',
+ emit: mockEmit
+ })
+
+ onChange('value1')
+ onChange('value2')
+ onChange('value3')
+
+ expect(mockEmit).toHaveBeenCalledTimes(3)
+ expect(mockEmit).toHaveBeenNthCalledWith(1, 'update:modelValue', 'value1')
+ expect(mockEmit).toHaveBeenNthCalledWith(2, 'update:modelValue', 'value2')
+ expect(mockEmit).toHaveBeenNthCalledWith(3, 'update:modelValue', 'value3')
+ })
+
+ it('should handle widget with all properties undefined', () => {
+ const minimalWidget = {
+ name: 'minimal',
+ type: 'unknown'
+ } as SimplifiedWidget
+
+ const { localValue, onChange } = useWidgetValue({
+ widget: minimalWidget,
+ modelValue: 'test',
+ defaultValue: 'default',
+ emit: mockEmit
+ })
+
+ expect(localValue.value).toBe('test')
+ expect(() => onChange('new')).not.toThrow()
+ })
+ })
+})
diff --git a/tests-ui/tests/composables/widgets/useManagerQueue.test.ts b/tests-ui/tests/composables/useManagerQueue.test.ts
similarity index 100%
rename from tests-ui/tests/composables/widgets/useManagerQueue.test.ts
rename to tests-ui/tests/composables/useManagerQueue.test.ts
diff --git a/tests-ui/tests/composables/useNodeChatHistory.test.ts b/tests-ui/tests/composables/useNodeChatHistory.test.ts
index 6a6ecc6c5b..0b47fabb6a 100644
--- a/tests-ui/tests/composables/useNodeChatHistory.test.ts
+++ b/tests-ui/tests/composables/useNodeChatHistory.test.ts
@@ -3,23 +3,26 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-vi.mock('@/composables/widgets/useChatHistoryWidget', () => ({
- useChatHistoryWidget: () => {
- return (node: any, inputSpec: any) => {
- const widget = {
- name: inputSpec.name,
- type: inputSpec.type
- }
+vi.mock(
+ '@/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget',
+ () => ({
+ useChatHistoryWidget: () => {
+ return (node: any, inputSpec: any) => {
+ const widget = {
+ name: inputSpec.name,
+ type: inputSpec.type
+ }
- if (!node.widgets) {
- node.widgets = []
- }
- node.widgets.push(widget)
+ if (!node.widgets) {
+ node.widgets = []
+ }
+ node.widgets.push(widget)
- return widget
+ return widget
+ }
}
- }
-}))
+ })
+)
// Mock LGraphNode type
type MockNode = {
diff --git a/tests-ui/tests/litegraph/core/LGraphNode.test.ts b/tests-ui/tests/litegraph/core/LGraphNode.test.ts
index aaf3fe59e8..1d47df5d8f 100644
--- a/tests-ui/tests/litegraph/core/LGraphNode.test.ts
+++ b/tests-ui/tests/litegraph/core/LGraphNode.test.ts
@@ -622,38 +622,4 @@ describe('LGraphNode', () => {
delete (node.constructor as any).slot_start_y
})
})
-
- describe('getInputPos', () => {
- test('should call getInputSlotPos with the correct input slot from inputs array', () => {
- const input0: INodeInputSlot = {
- name: 'in0',
- type: 'string',
- link: null,
- boundingRect: new Float32Array([0, 0, 0, 0])
- }
- const input1: INodeInputSlot = {
- name: 'in1',
- type: 'number',
- link: null,
- boundingRect: new Float32Array([0, 0, 0, 0]),
- pos: [5, 45]
- }
- node.inputs = [input0, input1]
- const spy = vi.spyOn(node, 'getInputSlotPos')
- node.getInputPos(1)
- expect(spy).toHaveBeenCalledWith(input1)
- const expectedPos: Point = [100 + 5, 200 + 45]
- expect(node.getInputPos(1)).toEqual(expectedPos)
- spy.mockClear()
- node.getInputPos(0)
- expect(spy).toHaveBeenCalledWith(input0)
- const slotIndex = 0
- const nodeOffsetY = (node.constructor as any).slot_start_y || 0
- const expectedDefaultY =
- 200 + (slotIndex + 0.7) * LiteGraph.NODE_SLOT_HEIGHT + nodeOffsetY
- const expectedDefaultX = 100 + LiteGraph.NODE_SLOT_HEIGHT * 0.5
- expect(node.getInputPos(0)).toEqual([expectedDefaultX, expectedDefaultY])
- spy.mockRestore()
- })
- })
})
diff --git a/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap b/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap
index 2f63410fba..d3e6de7b2e 100644
--- a/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap
+++ b/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap
@@ -62,6 +62,7 @@ LGraph {
"bgcolor": undefined,
"block_delete": undefined,
"boxcolor": undefined,
+ "changeTracker": undefined,
"clip_area": undefined,
"clonable": undefined,
"color": undefined,
@@ -83,6 +84,7 @@ LGraph {
"lostFocusAt": undefined,
"mode": 0,
"mouseOver": undefined,
+ "onMouseDown": [Function],
"order": 0,
"outputs": [],
"progress": undefined,
@@ -133,6 +135,7 @@ LGraph {
"bgcolor": undefined,
"block_delete": undefined,
"boxcolor": undefined,
+ "changeTracker": undefined,
"clip_area": undefined,
"clonable": undefined,
"color": undefined,
@@ -154,6 +157,7 @@ LGraph {
"lostFocusAt": undefined,
"mode": 0,
"mouseOver": undefined,
+ "onMouseDown": [Function],
"order": 0,
"outputs": [],
"progress": undefined,
@@ -205,6 +209,7 @@ LGraph {
"bgcolor": undefined,
"block_delete": undefined,
"boxcolor": undefined,
+ "changeTracker": undefined,
"clip_area": undefined,
"clonable": undefined,
"color": undefined,
@@ -226,6 +231,7 @@ LGraph {
"lostFocusAt": undefined,
"mode": 0,
"mouseOver": undefined,
+ "onMouseDown": [Function],
"order": 0,
"outputs": [],
"progress": undefined,
diff --git a/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap b/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap
index b69165d8da..de81f64e79 100644
--- a/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap
+++ b/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap
@@ -11,6 +11,17 @@ LiteGraphGlobal {
"CARD_SHAPE": 4,
"CENTER": 5,
"CIRCLE_SHAPE": 3,
+ "COMFY_VUE_NODE_DIMENSIONS": {
+ "components": {
+ "HEADER_HEIGHT": 34,
+ "SLOT_HEIGHT": 24,
+ "STANDARD_WIDGET_HEIGHT": 30,
+ },
+ "spacing": {
+ "BETWEEN_SLOTS_AND_BODY": 8,
+ "BETWEEN_WIDGETS": 8,
+ },
+ },
"CONNECTING_LINK_COLOR": "#AFA",
"Classes": {
"InputIndicators": [Function],
@@ -199,5 +210,6 @@ LiteGraphGlobal {
"truncateWidgetValuesFirst": false,
"use_uuids": false,
"uuidv4": [Function],
+ "vueNodesMode": false,
}
`;
diff --git a/tests-ui/tests/performance/spatialIndexPerformance.test.ts b/tests-ui/tests/performance/spatialIndexPerformance.test.ts
new file mode 100644
index 0000000000..e1281f48cf
--- /dev/null
+++ b/tests-ui/tests/performance/spatialIndexPerformance.test.ts
@@ -0,0 +1,406 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { useSpatialIndex } from '@/composables/graph/useSpatialIndex'
+import type { Bounds } from '@/utils/spatial/QuadTree'
+
+// Skip this entire suite on CI to avoid flaky performance timing
+const isCI = Boolean(process.env.CI)
+const describeIfNotCI = isCI ? describe.skip : describe
+
+describeIfNotCI('Spatial Index Performance', () => {
+ let spatialIndex: ReturnType
+
+ beforeEach(() => {
+ spatialIndex = useSpatialIndex({
+ maxDepth: 6,
+ maxItemsPerNode: 4,
+ updateDebounceMs: 0 // Disable debouncing for tests
+ })
+ })
+
+ describe('large scale operations', () => {
+ it('should handle 1000 node insertions efficiently', () => {
+ const startTime = performance.now()
+
+ // Generate 1000 nodes in a realistic distribution
+ const nodes = Array.from({ length: 1000 }, (_, i) => ({
+ id: `node${i}`,
+ position: {
+ x: (Math.random() - 0.5) * 10000,
+ y: (Math.random() - 0.5) * 10000
+ },
+ size: {
+ width: 150 + Math.random() * 100,
+ height: 100 + Math.random() * 50
+ }
+ }))
+
+ spatialIndex.batchUpdate(nodes)
+
+ const insertTime = performance.now() - startTime
+
+ // Should insert 1000 nodes in under 100ms
+ expect(insertTime).toBeLessThan(100)
+ expect(spatialIndex.metrics.value.totalNodes).toBe(1000)
+ })
+
+ it('should maintain fast viewport queries under load', () => {
+ // First populate with many nodes
+ const nodes = Array.from({ length: 1000 }, (_, i) => ({
+ id: `node${i}`,
+ position: {
+ x: (Math.random() - 0.5) * 10000,
+ y: (Math.random() - 0.5) * 10000
+ },
+ size: { width: 200, height: 100 }
+ }))
+ spatialIndex.batchUpdate(nodes)
+
+ // Now benchmark viewport queries
+ const queryCount = 100
+ const viewportBounds: Bounds = {
+ x: -960,
+ y: -540,
+ width: 1920,
+ height: 1080
+ }
+
+ const startTime = performance.now()
+
+ for (let i = 0; i < queryCount; i++) {
+ // Vary viewport position to test different tree regions
+ const offsetX = (i % 10) * 500
+ const offsetY = Math.floor(i / 10) * 300
+ spatialIndex.queryViewport({
+ x: viewportBounds.x + offsetX,
+ y: viewportBounds.y + offsetY,
+ width: viewportBounds.width,
+ height: viewportBounds.height
+ })
+ }
+
+ const totalQueryTime = performance.now() - startTime
+ const avgQueryTime = totalQueryTime / queryCount
+
+ // Each query should take less than 2ms on average
+ expect(avgQueryTime).toBeLessThan(2)
+ expect(totalQueryTime).toBeLessThan(100) // 100 queries in under 100ms
+ })
+
+ it('should demonstrate performance advantage over linear search', () => {
+ // Create test data
+ const nodeCount = 500
+ const nodes = Array.from({ length: nodeCount }, (_, i) => ({
+ id: `node${i}`,
+ position: {
+ x: (Math.random() - 0.5) * 8000,
+ y: (Math.random() - 0.5) * 8000
+ },
+ size: { width: 200, height: 100 }
+ }))
+
+ // Populate spatial index
+ spatialIndex.batchUpdate(nodes)
+
+ const viewport: Bounds = { x: -500, y: -300, width: 1000, height: 600 }
+ const queryCount = 50
+
+ // Benchmark spatial index queries
+ const spatialStartTime = performance.now()
+ for (let i = 0; i < queryCount; i++) {
+ spatialIndex.queryViewport(viewport)
+ }
+ const spatialTime = performance.now() - spatialStartTime
+
+ // Benchmark linear search equivalent
+ const linearStartTime = performance.now()
+ for (let i = 0; i < queryCount; i++) {
+ nodes.filter((node) => {
+ const nodeRight = node.position.x + node.size.width
+ const nodeBottom = node.position.y + node.size.height
+ const viewportRight = viewport.x + viewport.width
+ const viewportBottom = viewport.y + viewport.height
+
+ return !(
+ nodeRight < viewport.x ||
+ node.position.x > viewportRight ||
+ nodeBottom < viewport.y ||
+ node.position.y > viewportBottom
+ )
+ })
+ }
+ const linearTime = performance.now() - linearStartTime
+
+ // Spatial index should be faster than linear search
+ const speedup = linearTime / spatialTime
+ // In some environments, speedup may be less due to small dataset
+ // Just ensure spatial is not significantly slower (at least 10% of linear speed)
+ expect(speedup).toBeGreaterThan(0.1)
+
+ // Both should find roughly the same number of nodes
+ const spatialResults = spatialIndex.queryViewport(viewport)
+ const linearResults = nodes.filter((node) => {
+ const nodeRight = node.position.x + node.size.width
+ const nodeBottom = node.position.y + node.size.height
+ const viewportRight = viewport.x + viewport.width
+ const viewportBottom = viewport.y + viewport.height
+
+ return !(
+ nodeRight < viewport.x ||
+ node.position.x > viewportRight ||
+ nodeBottom < viewport.y ||
+ node.position.y > viewportBottom
+ )
+ })
+
+ // Results should be similar (within 10% due to QuadTree boundary effects)
+ const resultsDiff = Math.abs(spatialResults.length - linearResults.length)
+ const maxDiff =
+ Math.max(spatialResults.length, linearResults.length) * 0.1
+ expect(resultsDiff).toBeLessThan(maxDiff)
+ })
+ })
+
+ describe('update performance', () => {
+ it('should handle frequent position updates efficiently', () => {
+ // Add initial nodes
+ const nodeCount = 200
+ const initialNodes = Array.from({ length: nodeCount }, (_, i) => ({
+ id: `node${i}`,
+ position: { x: i * 100, y: i * 50 },
+ size: { width: 200, height: 100 }
+ }))
+ spatialIndex.batchUpdate(initialNodes)
+
+ // Benchmark frequent updates (simulating animation/dragging)
+ const updateCount = 100
+ const startTime = performance.now()
+
+ for (let frame = 0; frame < updateCount; frame++) {
+ // Update a subset of nodes each frame
+ for (let i = 0; i < 20; i++) {
+ const nodeId = `node${i}`
+ spatialIndex.updateNode(
+ nodeId,
+ {
+ x: i * 100 + Math.sin(frame * 0.1) * 50,
+ y: i * 50 + Math.cos(frame * 0.1) * 30
+ },
+ { width: 200, height: 100 }
+ )
+ }
+ }
+
+ const updateTime = performance.now() - startTime
+ const avgFrameTime = updateTime / updateCount
+
+ // Should maintain 60fps (16.67ms per frame) with 20 node updates per frame
+ expect(avgFrameTime).toBeLessThan(8) // Conservative target: 8ms per frame
+ })
+
+ it('should handle node additions and removals efficiently', () => {
+ const startTime = performance.now()
+
+ // Add nodes
+ for (let i = 0; i < 100; i++) {
+ spatialIndex.updateNode(
+ `node${i}`,
+ { x: Math.random() * 1000, y: Math.random() * 1000 },
+ { width: 200, height: 100 }
+ )
+ }
+
+ // Remove half of them
+ for (let i = 0; i < 50; i++) {
+ spatialIndex.removeNode(`node${i}`)
+ }
+
+ // Add new ones
+ for (let i = 100; i < 150; i++) {
+ spatialIndex.updateNode(
+ `node${i}`,
+ { x: Math.random() * 1000, y: Math.random() * 1000 },
+ { width: 200, height: 100 }
+ )
+ }
+
+ const totalTime = performance.now() - startTime
+
+ // All operations should complete quickly
+ expect(totalTime).toBeLessThan(50)
+ expect(spatialIndex.metrics.value.totalNodes).toBe(100) // 50 remaining + 50 new
+ })
+ })
+
+ describe('memory and scaling', () => {
+ it('should scale efficiently with increasing node counts', () => {
+ const nodeCounts = [100, 200, 500, 1000]
+ const queryTimes: number[] = []
+
+ for (const nodeCount of nodeCounts) {
+ // Create fresh spatial index for each test
+ const testIndex = useSpatialIndex({ updateDebounceMs: 0 })
+
+ // Populate with nodes
+ const nodes = Array.from({ length: nodeCount }, (_, i) => ({
+ id: `node${i}`,
+ position: {
+ x: (Math.random() - 0.5) * 10000,
+ y: (Math.random() - 0.5) * 10000
+ },
+ size: { width: 200, height: 100 }
+ }))
+ testIndex.batchUpdate(nodes)
+
+ // Benchmark query time
+ const viewport: Bounds = { x: -500, y: -300, width: 1000, height: 600 }
+ const startTime = performance.now()
+
+ for (let i = 0; i < 10; i++) {
+ testIndex.queryViewport(viewport)
+ }
+
+ const avgTime = (performance.now() - startTime) / 10
+ queryTimes.push(avgTime)
+ }
+
+ // Query time should scale logarithmically, not linearly
+ // The ratio between 1000 nodes and 100 nodes should be less than 5x
+ const ratio100to1000 = queryTimes[3] / queryTimes[0]
+ expect(ratio100to1000).toBeLessThan(5)
+
+ // All query times should be reasonable
+ queryTimes.forEach((time) => {
+ expect(time).toBeLessThan(5) // Each query under 5ms
+ })
+ })
+
+ it('should handle edge cases without performance degradation', () => {
+ // Test with very large nodes
+ spatialIndex.updateNode(
+ 'huge-node',
+ { x: -1000, y: -1000 },
+ { width: 5000, height: 3000 }
+ )
+
+ // Test with many tiny nodes
+ for (let i = 0; i < 100; i++) {
+ spatialIndex.updateNode(
+ `tiny-${i}`,
+ { x: Math.random() * 100, y: Math.random() * 100 },
+ { width: 1, height: 1 }
+ )
+ }
+
+ // Test with nodes at extreme coordinates
+ spatialIndex.updateNode(
+ 'extreme-pos',
+ { x: 50000, y: -50000 },
+ { width: 200, height: 100 }
+ )
+
+ spatialIndex.updateNode(
+ 'extreme-neg',
+ { x: -50000, y: 50000 },
+ { width: 200, height: 100 }
+ )
+
+ // Queries should still be fast
+ const startTime = performance.now()
+ for (let i = 0; i < 20; i++) {
+ spatialIndex.queryViewport({
+ x: Math.random() * 1000 - 500,
+ y: Math.random() * 1000 - 500,
+ width: 1000,
+ height: 600
+ })
+ }
+ const queryTime = performance.now() - startTime
+
+ expect(queryTime).toBeLessThan(20) // 20 queries in under 20ms
+ })
+ })
+
+ describe('realistic workflow scenarios', () => {
+ it('should handle typical ComfyUI workflow performance', () => {
+ // Simulate a large ComfyUI workflow with clustered nodes
+ const clusters = [
+ { center: { x: 0, y: 0 }, nodeCount: 50 },
+ { center: { x: 2000, y: 0 }, nodeCount: 30 },
+ { center: { x: 4000, y: 1000 }, nodeCount: 40 },
+ { center: { x: 0, y: 2000 }, nodeCount: 35 }
+ ]
+
+ let nodeId = 0
+ const allNodes: Array<{
+ id: string
+ position: { x: number; y: number }
+ size: { width: number; height: number }
+ }> = []
+
+ // Create clustered nodes (realistic for ComfyUI workflows)
+ clusters.forEach((cluster) => {
+ for (let i = 0; i < cluster.nodeCount; i++) {
+ allNodes.push({
+ id: `node${nodeId++}`,
+ position: {
+ x: cluster.center.x + (Math.random() - 0.5) * 800,
+ y: cluster.center.y + (Math.random() - 0.5) * 600
+ },
+ size: {
+ width: 150 + Math.random() * 100,
+ height: 100 + Math.random() * 50
+ }
+ })
+ }
+ })
+
+ // Add the nodes
+ const setupTime = performance.now()
+ spatialIndex.batchUpdate(allNodes)
+ const setupDuration = performance.now() - setupTime
+
+ // Simulate user panning around the workflow
+ const viewportSize = { width: 1920, height: 1080 }
+ const panPositions = [
+ { x: -960, y: -540 }, // Center on first cluster
+ { x: 1040, y: -540 }, // Pan to second cluster
+ { x: 3040, y: 460 }, // Pan to third cluster
+ { x: -960, y: 1460 }, // Pan to fourth cluster
+ { x: 1000, y: 500 } // Overview position
+ ]
+
+ const panStartTime = performance.now()
+ const queryResults: number[] = []
+
+ panPositions.forEach((pos) => {
+ // Simulate multiple viewport queries during smooth panning
+ for (let step = 0; step < 10; step++) {
+ const results = spatialIndex.queryViewport({
+ x: pos.x + step * 20,
+ y: pos.y + step * 10,
+ width: viewportSize.width,
+ height: viewportSize.height
+ })
+ queryResults.push(results.length)
+ }
+ })
+
+ const panDuration = performance.now() - panStartTime
+ const avgQueryTime = panDuration / (panPositions.length * 10)
+
+ // Performance expectations for realistic workflows
+ expect(setupDuration).toBeLessThan(30) // Setup 155 nodes in under 30ms
+ expect(avgQueryTime).toBeLessThan(1.5) // Average query under 1.5ms
+ expect(panDuration).toBeLessThan(50) // All panning queries under 50ms
+
+ // Should have reasonable culling efficiency
+ const totalNodes = allNodes.length
+ const avgVisibleNodes =
+ queryResults.reduce((a, b) => a + b, 0) / queryResults.length
+ const cullRatio = (totalNodes - avgVisibleNodes) / totalNodes
+
+ expect(cullRatio).toBeGreaterThan(0.3) // At least 30% culling efficiency
+ })
+ })
+})
diff --git a/tests-ui/tests/performance/transformPerformance.test.ts b/tests-ui/tests/performance/transformPerformance.test.ts
new file mode 100644
index 0000000000..9863bbfffc
--- /dev/null
+++ b/tests-ui/tests/performance/transformPerformance.test.ts
@@ -0,0 +1,483 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { useTransformState } from '@/composables/element/useTransformState'
+
+// Mock canvas context for testing
+const createMockCanvasContext = () => ({
+ ds: {
+ offset: [0, 0] as [number, number],
+ scale: 1
+ }
+})
+
+// Skip this entire suite on CI to avoid flaky performance timing
+const isCI = Boolean(process.env.CI)
+const describeIfNotCI = isCI ? describe.skip : describe
+
+describeIfNotCI('Transform Performance', () => {
+ let transformState: ReturnType
+ let mockCanvas: any
+
+ beforeEach(() => {
+ transformState = useTransformState()
+ mockCanvas = createMockCanvasContext()
+ })
+
+ describe('coordinate conversion performance', () => {
+ it('should handle large batches of coordinate conversions efficiently', () => {
+ // Set up a realistic transform state
+ mockCanvas.ds.offset = [500, 300]
+ mockCanvas.ds.scale = 1.5
+ transformState.syncWithCanvas(mockCanvas)
+
+ const conversionCount = 10000
+ const points = Array.from({ length: conversionCount }, () => ({
+ x: Math.random() * 5000,
+ y: Math.random() * 3000
+ }))
+
+ // Benchmark canvas to screen conversions
+ const canvasToScreenStart = performance.now()
+ const screenPoints = points.map((point) =>
+ transformState.canvasToScreen(point)
+ )
+ const canvasToScreenTime = performance.now() - canvasToScreenStart
+
+ // Benchmark screen to canvas conversions
+ const screenToCanvasStart = performance.now()
+ const backToCanvas = screenPoints.map((point) =>
+ transformState.screenToCanvas(point)
+ )
+ const screenToCanvasTime = performance.now() - screenToCanvasStart
+
+ // Performance expectations
+ expect(canvasToScreenTime).toBeLessThan(20) // 10k conversions in under 20ms
+ expect(screenToCanvasTime).toBeLessThan(20) // 10k conversions in under 20ms
+
+ // Verify accuracy of round-trip conversion
+ const maxError = points.reduce((max, original, i) => {
+ const converted = backToCanvas[i]
+ const errorX = Math.abs(original.x - converted.x)
+ const errorY = Math.abs(original.y - converted.y)
+ return Math.max(max, errorX, errorY)
+ }, 0)
+
+ expect(maxError).toBeLessThan(0.001) // Sub-pixel accuracy
+ })
+
+ it('should maintain performance across different zoom levels', () => {
+ const zoomLevels = [0.1, 0.5, 1.0, 2.0, 5.0, 10.0]
+ const conversionCount = 1000
+ const testPoints = Array.from({ length: conversionCount }, () => ({
+ x: Math.random() * 2000,
+ y: Math.random() * 1500
+ }))
+
+ const performanceResults: number[] = []
+
+ zoomLevels.forEach((scale) => {
+ mockCanvas.ds.scale = scale
+ transformState.syncWithCanvas(mockCanvas)
+
+ const startTime = performance.now()
+ testPoints.forEach((point) => {
+ const screen = transformState.canvasToScreen(point)
+ transformState.screenToCanvas(screen)
+ })
+ const duration = performance.now() - startTime
+
+ performanceResults.push(duration)
+ })
+
+ // Performance should be consistent across zoom levels
+ const maxTime = Math.max(...performanceResults)
+ const minTime = Math.min(...performanceResults)
+ const variance = (maxTime - minTime) / minTime
+
+ expect(maxTime).toBeLessThan(20) // All zoom levels under 20ms
+ expect(variance).toBeLessThan(3.0) // Less than 300% variance between zoom levels
+ })
+
+ it('should handle extreme coordinate values efficiently', () => {
+ // Test with very large coordinate values
+ const extremePoints = [
+ { x: -100000, y: -100000 },
+ { x: 100000, y: 100000 },
+ { x: 0, y: 0 },
+ { x: -50000, y: 50000 },
+ { x: 1e6, y: -1e6 }
+ ]
+
+ // Test at extreme zoom levels
+ const extremeScales = [0.001, 1000]
+
+ extremeScales.forEach((scale) => {
+ mockCanvas.ds.scale = scale
+ mockCanvas.ds.offset = [1000, 500]
+ transformState.syncWithCanvas(mockCanvas)
+
+ const startTime = performance.now()
+
+ // Convert each point 100 times
+ extremePoints.forEach((point) => {
+ for (let i = 0; i < 100; i++) {
+ const screen = transformState.canvasToScreen(point)
+ transformState.screenToCanvas(screen)
+ }
+ })
+
+ const duration = performance.now() - startTime
+
+ expect(duration).toBeLessThan(5) // Should handle extremes efficiently
+ expect(
+ Number.isFinite(transformState.canvasToScreen(extremePoints[0]).x)
+ ).toBe(true)
+ expect(
+ Number.isFinite(transformState.canvasToScreen(extremePoints[0]).y)
+ ).toBe(true)
+ })
+ })
+ })
+
+ describe('viewport culling performance', () => {
+ it('should efficiently determine node visibility for large numbers of nodes', () => {
+ // Set up realistic viewport
+ const viewport = { width: 1920, height: 1080 }
+
+ // Generate many node positions
+ const nodeCount = 1000
+ const nodes = Array.from({ length: nodeCount }, () => ({
+ pos: [Math.random() * 10000, Math.random() * 6000] as ArrayLike,
+ size: [
+ 150 + Math.random() * 100,
+ 100 + Math.random() * 50
+ ] as ArrayLike
+ }))
+
+ // Test at different zoom levels and positions
+ const testConfigs = [
+ { scale: 0.5, offset: [0, 0] },
+ { scale: 1.0, offset: [2000, 1000] },
+ { scale: 2.0, offset: [-1000, -500] }
+ ]
+
+ testConfigs.forEach((config) => {
+ mockCanvas.ds.scale = config.scale
+ mockCanvas.ds.offset = config.offset
+ transformState.syncWithCanvas(mockCanvas)
+
+ const startTime = performance.now()
+
+ // Test viewport culling for all nodes
+ const visibleNodes = nodes.filter((node) =>
+ transformState.isNodeInViewport(node.pos, node.size, viewport)
+ )
+
+ const cullTime = performance.now() - startTime
+
+ expect(cullTime).toBeLessThan(10) // 1000 nodes culled in under 10ms
+ expect(visibleNodes.length).toBeLessThan(nodeCount) // Some culling should occur
+ expect(visibleNodes.length).toBeGreaterThanOrEqual(0) // Sanity check
+ })
+ })
+
+ it('should optimize culling with adaptive margins', () => {
+ const viewport = { width: 1280, height: 720 }
+ const testNode = {
+ pos: [1300, 100] as ArrayLike, // Just outside viewport
+ size: [200, 100] as ArrayLike
+ }
+
+ // Test margin adaptation at different zoom levels
+ const zoomTests = [
+ { scale: 0.05, expectedVisible: true }, // Low zoom, larger margin
+ { scale: 1.0, expectedVisible: true }, // Normal zoom, standard margin
+ { scale: 4.0, expectedVisible: false } // High zoom, tighter margin
+ ]
+
+ const marginTests: boolean[] = []
+ const timings: number[] = []
+
+ zoomTests.forEach((test) => {
+ mockCanvas.ds.scale = test.scale
+ mockCanvas.ds.offset = [0, 0]
+ transformState.syncWithCanvas(mockCanvas)
+
+ const startTime = performance.now()
+ const isVisible = transformState.isNodeInViewport(
+ testNode.pos,
+ testNode.size,
+ viewport,
+ 0.2 // 20% margin
+ )
+ const duration = performance.now() - startTime
+
+ marginTests.push(isVisible)
+ timings.push(duration)
+ })
+
+ // All culling operations should be very fast
+ timings.forEach((time) => {
+ expect(time).toBeLessThan(0.1) // Individual culling under 0.1ms
+ })
+
+ // Verify adaptive behavior (margins should work as expected)
+ expect(marginTests[0]).toBe(zoomTests[0].expectedVisible)
+ expect(marginTests[2]).toBe(zoomTests[2].expectedVisible)
+ })
+
+ it('should handle size-based culling efficiently', () => {
+ // Test nodes of various sizes
+ const nodeSizes = [
+ [1, 1], // Tiny node
+ [5, 5], // Small node
+ [50, 50], // Medium node
+ [200, 100], // Large node
+ [500, 300] // Very large node
+ ]
+
+ const viewport = { width: 1920, height: 1080 }
+
+ // Position all nodes in viewport center
+ const centerPos = [960, 540] as ArrayLike
+
+ nodeSizes.forEach((size) => {
+ // Test at very low zoom where size culling should activate
+ mockCanvas.ds.scale = 0.01 // Very low zoom
+ transformState.syncWithCanvas(mockCanvas)
+
+ const startTime = performance.now()
+ const isVisible = transformState.isNodeInViewport(
+ centerPos,
+ size as ArrayLike,
+ viewport
+ )
+ const cullTime = performance.now() - startTime
+
+ expect(cullTime).toBeLessThan(0.1) // Size culling under 0.1ms
+
+ // At 0.01 zoom, nodes need to be 400+ pixels to show as 4+ screen pixels
+ const screenSize = Math.max(size[0], size[1]) * 0.01
+ if (screenSize < 4) {
+ expect(isVisible).toBe(false)
+ } else {
+ expect(isVisible).toBe(true)
+ }
+ })
+ })
+ })
+
+ describe('transform state synchronization', () => {
+ it('should efficiently sync with canvas state changes', () => {
+ const syncCount = 1000
+ const transformUpdates = Array.from({ length: syncCount }, (_, i) => ({
+ offset: [Math.sin(i * 0.1) * 1000, Math.cos(i * 0.1) * 500],
+ scale: 0.5 + Math.sin(i * 0.05) * 0.4 // Scale between 0.1 and 0.9
+ }))
+
+ const startTime = performance.now()
+
+ transformUpdates.forEach((update) => {
+ mockCanvas.ds.offset = update.offset
+ mockCanvas.ds.scale = update.scale
+ transformState.syncWithCanvas(mockCanvas)
+ })
+
+ const syncTime = performance.now() - startTime
+
+ expect(syncTime).toBeLessThan(15) // 1000 syncs in under 15ms
+
+ // Verify final state is correct
+ const lastUpdate = transformUpdates[transformUpdates.length - 1]
+ expect(transformState.camera.x).toBe(lastUpdate.offset[0])
+ expect(transformState.camera.y).toBe(lastUpdate.offset[1])
+ expect(transformState.camera.z).toBe(lastUpdate.scale)
+ })
+
+ it('should generate CSS transform strings efficiently', () => {
+ const transformCount = 10000
+
+ // Set up varying transform states
+ const transforms = Array.from({ length: transformCount }, (_, i) => {
+ mockCanvas.ds.offset = [i * 10, i * 5]
+ mockCanvas.ds.scale = 0.5 + (i % 100) / 100
+ transformState.syncWithCanvas(mockCanvas)
+ return transformState.transformStyle.value
+ })
+
+ const startTime = performance.now()
+
+ // Access transform styles (triggers computed property)
+ transforms.forEach((style) => {
+ expect(style.transform).toContain('scale(')
+ expect(style.transform).toContain('translate(')
+ expect(style.transformOrigin).toBe('0 0')
+ })
+
+ const accessTime = performance.now() - startTime
+
+ expect(accessTime).toBeLessThan(200) // 10k style accesses in under 200ms
+ })
+ })
+
+ describe('bounds calculation performance', () => {
+ it('should calculate node screen bounds efficiently', () => {
+ // Set up realistic transform
+ mockCanvas.ds.offset = [200, 100]
+ mockCanvas.ds.scale = 1.5
+ transformState.syncWithCanvas(mockCanvas)
+
+ const nodeCount = 1000
+ const nodes = Array.from({ length: nodeCount }, () => ({
+ pos: [Math.random() * 5000, Math.random() * 3000] as ArrayLike,
+ size: [
+ 100 + Math.random() * 200,
+ 80 + Math.random() * 120
+ ] as ArrayLike
+ }))
+
+ const startTime = performance.now()
+
+ const bounds = nodes.map((node) =>
+ transformState.getNodeScreenBounds(node.pos, node.size)
+ )
+
+ const calcTime = performance.now() - startTime
+
+ expect(calcTime).toBeLessThan(15) // 1000 bounds calculations in under 15ms
+ expect(bounds).toHaveLength(nodeCount)
+
+ // Verify bounds are reasonable
+ bounds.forEach((bound) => {
+ expect(bound.width).toBeGreaterThan(0)
+ expect(bound.height).toBeGreaterThan(0)
+ expect(Number.isFinite(bound.x)).toBe(true)
+ expect(Number.isFinite(bound.y)).toBe(true)
+ })
+ })
+
+ it('should calculate viewport bounds efficiently', () => {
+ const viewportSizes = [
+ { width: 800, height: 600 },
+ { width: 1920, height: 1080 },
+ { width: 3840, height: 2160 },
+ { width: 1280, height: 720 }
+ ]
+
+ const margins = [0, 0.1, 0.2, 0.5]
+
+ const combinations = viewportSizes.flatMap((viewport) =>
+ margins.map((margin) => ({ viewport, margin }))
+ )
+
+ const startTime = performance.now()
+
+ const allBounds = combinations.map(({ viewport, margin }) => {
+ mockCanvas.ds.offset = [Math.random() * 1000, Math.random() * 500]
+ mockCanvas.ds.scale = 0.5 + Math.random() * 2
+ transformState.syncWithCanvas(mockCanvas)
+
+ return transformState.getViewportBounds(viewport, margin)
+ })
+
+ const calcTime = performance.now() - startTime
+
+ expect(calcTime).toBeLessThan(5) // All viewport calculations in under 5ms
+ expect(allBounds).toHaveLength(combinations.length)
+
+ // Verify bounds are reasonable
+ allBounds.forEach((bounds) => {
+ expect(bounds.width).toBeGreaterThan(0)
+ expect(bounds.height).toBeGreaterThan(0)
+ expect(Number.isFinite(bounds.x)).toBe(true)
+ expect(Number.isFinite(bounds.y)).toBe(true)
+ })
+ })
+ })
+
+ describe('real-world performance scenarios', () => {
+ it('should handle smooth panning performance', () => {
+ // Simulate smooth 60fps panning for 2 seconds
+ const frameCount = 120 // 2 seconds at 60fps
+ const panDistance = 2000 // Pan 2000 pixels
+
+ const frames: number[] = []
+
+ for (let frame = 0; frame < frameCount; frame++) {
+ const progress = frame / (frameCount - 1)
+ const x = progress * panDistance
+ const y = Math.sin(progress * Math.PI * 2) * 200 // Slight vertical wave
+
+ mockCanvas.ds.offset = [x, y]
+
+ const frameStart = performance.now()
+
+ // Typical operations during panning
+ transformState.syncWithCanvas(mockCanvas)
+ const style = transformState.transformStyle.value // Access transform style
+ expect(style.transform).toContain('translate') // Verify style is valid
+
+ // Simulate some coordinate conversions (mouse tracking, etc.)
+ for (let i = 0; i < 5; i++) {
+ const screen = transformState.canvasToScreen({
+ x: x + i * 100,
+ y: y + i * 50
+ })
+ transformState.screenToCanvas(screen)
+ }
+
+ const frameTime = performance.now() - frameStart
+ frames.push(frameTime)
+
+ // Each frame should be well under 16.67ms for 60fps
+ expect(frameTime).toBeLessThan(1) // Conservative: under 1ms per frame
+ }
+
+ const totalTime = frames.reduce((sum, time) => sum + time, 0)
+ const avgFrameTime = totalTime / frameCount
+
+ expect(avgFrameTime).toBeLessThan(0.5) // Average frame time under 0.5ms
+ expect(totalTime).toBeLessThan(60) // Total panning overhead under 60ms
+ })
+
+ it('should handle zoom performance with viewport updates', () => {
+ // Simulate smooth zoom from 0.1x to 10x
+ const zoomSteps = 100
+ const viewport = { width: 1920, height: 1080 }
+
+ const zoomTimes: number[] = []
+
+ for (let step = 0; step < zoomSteps; step++) {
+ const zoomLevel = Math.pow(10, (step / (zoomSteps - 1)) * 2 - 1) // 0.1 to 10
+ mockCanvas.ds.scale = zoomLevel
+
+ const stepStart = performance.now()
+
+ // Operations during zoom
+ transformState.syncWithCanvas(mockCanvas)
+
+ // Viewport bounds calculation (for culling)
+ transformState.getViewportBounds(viewport, 0.2)
+
+ // Test a few nodes for visibility
+ for (let i = 0; i < 10; i++) {
+ transformState.isNodeInViewport(
+ [i * 200, i * 150],
+ [200, 100],
+ viewport
+ )
+ }
+
+ const stepTime = performance.now() - stepStart
+ zoomTimes.push(stepTime)
+ }
+
+ const maxZoomTime = Math.max(...zoomTimes)
+ const avgZoomTime =
+ zoomTimes.reduce((sum, time) => sum + time, 0) / zoomSteps
+
+ expect(maxZoomTime).toBeLessThan(2) // No zoom step over 2ms
+ expect(avgZoomTime).toBeLessThan(1) // Average zoom step under 1ms
+ })
+ })
+})
diff --git a/tests-ui/tests/renderer/core/layout/layoutStore.test.ts b/tests-ui/tests/renderer/core/layout/layoutStore.test.ts
new file mode 100644
index 0000000000..9c64f468d4
--- /dev/null
+++ b/tests-ui/tests/renderer/core/layout/layoutStore.test.ts
@@ -0,0 +1,260 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { LayoutSource, type NodeLayout } from '@/renderer/core/layout/types'
+
+describe('layoutStore CRDT operations', () => {
+ beforeEach(() => {
+ // Clear the store before each test
+ layoutStore.initializeFromLiteGraph([])
+ })
+ // Helper to create test node data
+ const createTestNode = (id: string): NodeLayout => ({
+ id,
+ position: { x: 100, y: 100 },
+ size: { width: 200, height: 100 },
+ zIndex: 0,
+ visible: true,
+ bounds: { x: 100, y: 100, width: 200, height: 100 }
+ })
+
+ it('should create and retrieve nodes', () => {
+ const nodeId = 'test-node-1'
+ const layout = createTestNode(nodeId)
+
+ // Create node
+ layoutStore.setSource(LayoutSource.External)
+ layoutStore.applyOperation({
+ type: 'createNode',
+ entity: 'node',
+ nodeId,
+ layout,
+ timestamp: Date.now(),
+ source: LayoutSource.External,
+ actor: 'test'
+ })
+
+ // Retrieve node
+ const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
+ expect(nodeRef.value).toEqual(layout)
+ })
+
+ it('should move nodes', () => {
+ const nodeId = 'test-node-2'
+ const layout = createTestNode(nodeId)
+
+ // Create node first
+ layoutStore.applyOperation({
+ type: 'createNode',
+ entity: 'node',
+ nodeId,
+ layout,
+ timestamp: Date.now(),
+ source: LayoutSource.External,
+ actor: 'test'
+ })
+
+ // Move node
+ const newPosition = { x: 200, y: 300 }
+ layoutStore.applyOperation({
+ type: 'moveNode',
+ entity: 'node',
+ nodeId,
+ position: newPosition,
+ previousPosition: layout.position,
+ timestamp: Date.now(),
+ source: LayoutSource.Vue,
+ actor: 'test'
+ })
+
+ // Verify position updated
+ const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
+ expect(nodeRef.value?.position).toEqual(newPosition)
+ })
+
+ it('should resize nodes', () => {
+ const nodeId = 'test-node-3'
+ const layout = createTestNode(nodeId)
+
+ // Create node
+ layoutStore.applyOperation({
+ type: 'createNode',
+ entity: 'node',
+ nodeId,
+ layout,
+ timestamp: Date.now(),
+ source: LayoutSource.External,
+ actor: 'test'
+ })
+
+ // Resize node
+ const newSize = { width: 300, height: 150 }
+ layoutStore.applyOperation({
+ type: 'resizeNode',
+ entity: 'node',
+ nodeId,
+ size: newSize,
+ previousSize: layout.size,
+ timestamp: Date.now(),
+ source: LayoutSource.Canvas,
+ actor: 'test'
+ })
+
+ // Verify size updated
+ const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
+ expect(nodeRef.value?.size).toEqual(newSize)
+ })
+
+ it('should delete nodes', () => {
+ const nodeId = 'test-node-4'
+ const layout = createTestNode(nodeId)
+
+ // Create node
+ layoutStore.applyOperation({
+ type: 'createNode',
+ entity: 'node',
+ nodeId,
+ layout,
+ timestamp: Date.now(),
+ source: LayoutSource.External,
+ actor: 'test'
+ })
+
+ // Delete node
+ layoutStore.applyOperation({
+ type: 'deleteNode',
+ entity: 'node',
+ nodeId,
+ previousLayout: layout,
+ timestamp: Date.now(),
+ source: LayoutSource.External,
+ actor: 'test'
+ })
+
+ // Verify node deleted
+ const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
+ expect(nodeRef.value).toBeNull()
+ })
+
+ it('should handle source and actor tracking', async () => {
+ const nodeId = 'test-node-5'
+ const layout = createTestNode(nodeId)
+
+ // Set source and actor
+ layoutStore.setSource(LayoutSource.Vue)
+ layoutStore.setActor('user-123')
+
+ // Track change notifications AFTER setting source/actor
+ const changes: any[] = []
+ const unsubscribe = layoutStore.onChange((change) => {
+ changes.push(change)
+ })
+
+ // Create node
+ layoutStore.applyOperation({
+ type: 'createNode',
+ entity: 'node',
+ nodeId,
+ layout,
+ timestamp: Date.now(),
+ source: layoutStore.getCurrentSource(),
+ actor: layoutStore.getCurrentActor()
+ })
+
+ // Wait for async notification
+ await new Promise((resolve) => setTimeout(resolve, 50))
+
+ expect(changes.length).toBeGreaterThanOrEqual(1)
+ const lastChange = changes[changes.length - 1]
+ expect(lastChange.source).toBe('vue')
+ expect(lastChange.operation.actor).toBe('user-123')
+
+ unsubscribe()
+ })
+
+ it('should query nodes by spatial bounds', () => {
+ const nodes = [
+ { id: 'node-a', position: { x: 0, y: 0 } },
+ { id: 'node-b', position: { x: 100, y: 100 } },
+ { id: 'node-c', position: { x: 250, y: 250 } }
+ ]
+
+ // Create nodes with proper bounds
+ nodes.forEach(({ id, position }) => {
+ const layout: NodeLayout = {
+ ...createTestNode(id),
+ position,
+ bounds: {
+ x: position.x,
+ y: position.y,
+ width: 200,
+ height: 100
+ }
+ }
+ layoutStore.applyOperation({
+ type: 'createNode',
+ entity: 'node',
+ nodeId: id,
+ layout,
+ timestamp: Date.now(),
+ source: LayoutSource.External,
+ actor: 'test'
+ })
+ })
+
+ // Query nodes in bounds
+ const nodesInBounds = layoutStore.queryNodesInBounds({
+ x: 50,
+ y: 50,
+ width: 200,
+ height: 200
+ })
+
+ // node-a: (0,0) to (200,100) - overlaps with query bounds (50,50) to (250,250)
+ // node-b: (100,100) to (300,200) - overlaps with query bounds
+ // node-c: (250,250) to (450,350) - touches corner of query bounds
+ expect(nodesInBounds).toContain('node-a')
+ expect(nodesInBounds).toContain('node-b')
+ expect(nodesInBounds).toContain('node-c')
+ })
+
+ it('should maintain operation history', () => {
+ const nodeId = 'test-node-history'
+ const layout = createTestNode(nodeId)
+ const startTime = Date.now()
+
+ // Create node
+ layoutStore.applyOperation({
+ type: 'createNode',
+ entity: 'node',
+ nodeId,
+ layout,
+ timestamp: startTime,
+ source: LayoutSource.External,
+ actor: 'test-actor'
+ })
+
+ // Move node
+ layoutStore.applyOperation({
+ type: 'moveNode',
+ entity: 'node',
+ nodeId,
+ position: { x: 150, y: 150 },
+ previousPosition: { x: 100, y: 100 },
+ timestamp: startTime + 100,
+ source: LayoutSource.Vue,
+ actor: 'test-actor'
+ })
+
+ // Get operations by actor
+ const operations = layoutStore.getOperationsByActor('test-actor')
+ expect(operations.length).toBeGreaterThanOrEqual(2)
+ expect(operations[0].type).toBe('createNode')
+ expect(operations[1].type).toBe('moveNode')
+
+ // Get operations since timestamp
+ const recentOps = layoutStore.getOperationsSince(startTime + 50)
+ expect(recentOps.length).toBeGreaterThanOrEqual(1)
+ expect(recentOps[0].type).toBe('moveNode')
+ })
+})
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts
new file mode 100644
index 0000000000..68850c18aa
--- /dev/null
+++ b/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts
@@ -0,0 +1,270 @@
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+
+import {
+ LODLevel,
+ LOD_THRESHOLDS,
+ supportsFeatureAtZoom,
+ useLOD
+} from '@/renderer/extensions/vueNodes/lod/useLOD'
+
+describe('useLOD', () => {
+ describe('LOD level detection', () => {
+ it('should return MINIMAL for zoom <= 0.4', () => {
+ const zoomRef = ref(0.4)
+ const { lodLevel } = useLOD(zoomRef)
+ expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+
+ zoomRef.value = 0.2
+ expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+
+ zoomRef.value = 0.1
+ expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+ })
+
+ it('should return REDUCED for 0.4 < zoom <= 0.8', () => {
+ const zoomRef = ref(0.5)
+ const { lodLevel } = useLOD(zoomRef)
+ expect(lodLevel.value).toBe(LODLevel.REDUCED)
+
+ zoomRef.value = 0.6
+ expect(lodLevel.value).toBe(LODLevel.REDUCED)
+
+ zoomRef.value = 0.8
+ expect(lodLevel.value).toBe(LODLevel.REDUCED)
+ })
+
+ it('should return FULL for zoom > 0.8', () => {
+ const zoomRef = ref(0.9)
+ const { lodLevel } = useLOD(zoomRef)
+ expect(lodLevel.value).toBe(LODLevel.FULL)
+
+ zoomRef.value = 1.0
+ expect(lodLevel.value).toBe(LODLevel.FULL)
+
+ zoomRef.value = 2.5
+ expect(lodLevel.value).toBe(LODLevel.FULL)
+ })
+
+ it('should be reactive to zoom changes', () => {
+ const zoomRef = ref(0.2)
+ const { lodLevel } = useLOD(zoomRef)
+
+ expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+
+ zoomRef.value = 0.6
+ expect(lodLevel.value).toBe(LODLevel.REDUCED)
+
+ zoomRef.value = 1.0
+ expect(lodLevel.value).toBe(LODLevel.FULL)
+ })
+ })
+
+ describe('rendering decisions', () => {
+ it('should disable all rendering for MINIMAL LOD', () => {
+ const zoomRef = ref(0.2)
+ const {
+ shouldRenderWidgets,
+ shouldRenderSlots,
+ shouldRenderContent,
+ shouldRenderSlotLabels,
+ shouldRenderWidgetLabels
+ } = useLOD(zoomRef)
+
+ expect(shouldRenderWidgets.value).toBe(false)
+ expect(shouldRenderSlots.value).toBe(false)
+ expect(shouldRenderContent.value).toBe(false)
+ expect(shouldRenderSlotLabels.value).toBe(false)
+ expect(shouldRenderWidgetLabels.value).toBe(false)
+ })
+
+ it('should enable widgets/slots but disable labels for REDUCED LOD', () => {
+ const zoomRef = ref(0.6)
+ const {
+ shouldRenderWidgets,
+ shouldRenderSlots,
+ shouldRenderContent,
+ shouldRenderSlotLabels,
+ shouldRenderWidgetLabels
+ } = useLOD(zoomRef)
+
+ expect(shouldRenderWidgets.value).toBe(true)
+ expect(shouldRenderSlots.value).toBe(true)
+ expect(shouldRenderContent.value).toBe(false)
+ expect(shouldRenderSlotLabels.value).toBe(false)
+ expect(shouldRenderWidgetLabels.value).toBe(false)
+ })
+
+ it('should enable all rendering for FULL LOD', () => {
+ const zoomRef = ref(1.0)
+ const {
+ shouldRenderWidgets,
+ shouldRenderSlots,
+ shouldRenderContent,
+ shouldRenderSlotLabels,
+ shouldRenderWidgetLabels
+ } = useLOD(zoomRef)
+
+ expect(shouldRenderWidgets.value).toBe(true)
+ expect(shouldRenderSlots.value).toBe(true)
+ expect(shouldRenderContent.value).toBe(true)
+ expect(shouldRenderSlotLabels.value).toBe(true)
+ expect(shouldRenderWidgetLabels.value).toBe(true)
+ })
+ })
+
+ describe('CSS classes', () => {
+ it('should return correct CSS class for each LOD level', () => {
+ const zoomRef = ref(0.2)
+ const { lodCssClass } = useLOD(zoomRef)
+
+ expect(lodCssClass.value).toBe('lg-node--lod-minimal')
+
+ zoomRef.value = 0.6
+ expect(lodCssClass.value).toBe('lg-node--lod-reduced')
+
+ zoomRef.value = 1.0
+ expect(lodCssClass.value).toBe('lg-node--lod-full')
+ })
+ })
+
+ describe('essential widgets filtering', () => {
+ it('should return all widgets for FULL LOD', () => {
+ const zoomRef = ref(1.0)
+ const { getEssentialWidgets } = useLOD(zoomRef)
+
+ const widgets = [
+ { type: 'combo' },
+ { type: 'text' },
+ { type: 'button' },
+ { type: 'slider' }
+ ]
+
+ expect(getEssentialWidgets(widgets)).toEqual(widgets)
+ })
+
+ it('should return empty array for MINIMAL LOD', () => {
+ const zoomRef = ref(0.2)
+ const { getEssentialWidgets } = useLOD(zoomRef)
+
+ const widgets = [{ type: 'combo' }, { type: 'text' }, { type: 'button' }]
+
+ expect(getEssentialWidgets(widgets)).toEqual([])
+ })
+
+ it('should filter to essential types for REDUCED LOD', () => {
+ const zoomRef = ref(0.6)
+ const { getEssentialWidgets } = useLOD(zoomRef)
+
+ const widgets = [
+ { type: 'combo' },
+ { type: 'text' },
+ { type: 'button' },
+ { type: 'slider' },
+ { type: 'toggle' },
+ { type: 'number' }
+ ]
+
+ const essential = getEssentialWidgets(widgets)
+ expect(essential).toHaveLength(4)
+ expect(essential.map((w: any) => w.type)).toEqual([
+ 'combo',
+ 'slider',
+ 'toggle',
+ 'number'
+ ])
+ })
+
+ it('should handle case-insensitive widget types', () => {
+ const zoomRef = ref(0.6)
+ const { getEssentialWidgets } = useLOD(zoomRef)
+
+ const widgets = [
+ { type: 'COMBO' },
+ { type: 'Select' },
+ { type: 'TOGGLE' }
+ ]
+
+ const essential = getEssentialWidgets(widgets)
+ expect(essential).toHaveLength(3)
+ })
+
+ it('should handle widgets with undefined or missing type', () => {
+ const zoomRef = ref(0.6)
+ const { getEssentialWidgets } = useLOD(zoomRef)
+
+ const widgets = [
+ { type: 'combo' },
+ { type: undefined },
+ {},
+ { type: 'slider' }
+ ]
+
+ const essential = getEssentialWidgets(widgets)
+ expect(essential).toHaveLength(2)
+ expect(essential.map((w: any) => w.type)).toEqual(['combo', 'slider'])
+ })
+ })
+
+ describe('performance metrics', () => {
+ it('should provide debug metrics', () => {
+ const zoomRef = ref(0.6)
+ const { lodMetrics } = useLOD(zoomRef)
+
+ expect(lodMetrics.value).toEqual({
+ level: LODLevel.REDUCED,
+ zoom: 0.6,
+ widgetCount: 'full',
+ slotCount: 'full'
+ })
+ })
+
+ it('should update metrics when zoom changes', () => {
+ const zoomRef = ref(0.2)
+ const { lodMetrics } = useLOD(zoomRef)
+
+ expect(lodMetrics.value.level).toBe(LODLevel.MINIMAL)
+ expect(lodMetrics.value.widgetCount).toBe('none')
+ expect(lodMetrics.value.slotCount).toBe('none')
+
+ zoomRef.value = 1.0
+ expect(lodMetrics.value.level).toBe(LODLevel.FULL)
+ expect(lodMetrics.value.widgetCount).toBe('full')
+ expect(lodMetrics.value.slotCount).toBe('full')
+ })
+ })
+})
+
+describe('LOD_THRESHOLDS', () => {
+ it('should export correct threshold values', () => {
+ expect(LOD_THRESHOLDS.FULL_THRESHOLD).toBe(0.8)
+ expect(LOD_THRESHOLDS.REDUCED_THRESHOLD).toBe(0.4)
+ expect(LOD_THRESHOLDS.MINIMAL_THRESHOLD).toBe(0.0)
+ })
+})
+
+describe('supportsFeatureAtZoom', () => {
+ it('should return correct feature support for different zoom levels', () => {
+ expect(supportsFeatureAtZoom(1.0, 'renderWidgets')).toBe(true)
+ expect(supportsFeatureAtZoom(1.0, 'renderSlots')).toBe(true)
+ expect(supportsFeatureAtZoom(1.0, 'renderContent')).toBe(true)
+
+ expect(supportsFeatureAtZoom(0.6, 'renderWidgets')).toBe(true)
+ expect(supportsFeatureAtZoom(0.6, 'renderSlots')).toBe(true)
+ expect(supportsFeatureAtZoom(0.6, 'renderContent')).toBe(false)
+
+ expect(supportsFeatureAtZoom(0.2, 'renderWidgets')).toBe(false)
+ expect(supportsFeatureAtZoom(0.2, 'renderSlots')).toBe(false)
+ expect(supportsFeatureAtZoom(0.2, 'renderContent')).toBe(false)
+ })
+
+ it('should handle threshold boundary values correctly', () => {
+ expect(supportsFeatureAtZoom(0.8, 'renderWidgets')).toBe(true)
+ expect(supportsFeatureAtZoom(0.8, 'renderContent')).toBe(false)
+
+ expect(supportsFeatureAtZoom(0.81, 'renderContent')).toBe(true)
+
+ expect(supportsFeatureAtZoom(0.4, 'renderWidgets')).toBe(false)
+ expect(supportsFeatureAtZoom(0.41, 'renderWidgets')).toBe(true)
+ })
+})
diff --git a/tests-ui/tests/composables/widgets/useComboWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
similarity index 90%
rename from tests-ui/tests/composables/widgets/useComboWidget.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
index cbdd74bab8..15936d1a48 100644
--- a/tests-ui/tests/composables/widgets/useComboWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
@@ -1,6 +1,6 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { useComboWidget } from '@/composables/widgets/useComboWidget'
+import { useComboWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useComboWidget'
import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
vi.mock('@/scripts/widgets', () => ({
diff --git a/tests-ui/tests/composables/widgets/useFloatWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
similarity index 95%
rename from tests-ui/tests/composables/widgets/useFloatWidget.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
index 02819c9f2d..6dde265a60 100644
--- a/tests-ui/tests/composables/widgets/useFloatWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
@@ -1,6 +1,6 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { _for_testing } from '@/composables/widgets/useFloatWidget'
+import { _for_testing } from '@/renderer/extensions/vueNodes/widgets/composables/useFloatWidget'
vi.mock('@/scripts/widgets', () => ({
addValueControlWidgets: vi.fn()
diff --git a/tests-ui/tests/composables/widgets/useIntWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
similarity index 94%
rename from tests-ui/tests/composables/widgets/useIntWidget.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
index 8bed76042f..edf4efab97 100644
--- a/tests-ui/tests/composables/widgets/useIntWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
@@ -1,6 +1,6 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { _for_testing } from '@/composables/widgets/useIntWidget'
+import { _for_testing } from '@/renderer/extensions/vueNodes/widgets/composables/useIntWidget'
vi.mock('@/scripts/widgets', () => ({
addValueControlWidgets: vi.fn()
diff --git a/tests-ui/tests/composables/widgets/useRemoteWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
similarity index 99%
rename from tests-ui/tests/composables/widgets/useRemoteWidget.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
index 0bf7294537..9b301cce01 100644
--- a/tests-ui/tests/composables/widgets/useRemoteWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
@@ -1,7 +1,7 @@
import axios from 'axios'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { useRemoteWidget } from '@/composables/widgets/useRemoteWidget'
+import { useRemoteWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget'
import { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
vi.mock('axios', () => {
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
new file mode 100644
index 0000000000..4a363ebd1d
--- /dev/null
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
@@ -0,0 +1,168 @@
+import { describe, expect, it } from 'vitest'
+
+import WidgetButton from '@/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue'
+import WidgetColorPicker from '@/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue'
+import WidgetFileUpload from '@/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue'
+import WidgetInputText from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue'
+import WidgetMarkdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue'
+import WidgetSelect from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue'
+import WidgetSlider from '@/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue'
+import WidgetTextarea from '@/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue'
+import WidgetToggleSwitch from '@/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue'
+import {
+ getComponent,
+ isEssential,
+ shouldRenderAsVue
+} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+
+describe('widgetRegistry', () => {
+ describe('getComponent', () => {
+ // Test number type mappings
+ describe('number types', () => {
+ it('should map int types to slider widget', () => {
+ expect(getComponent('int')).toBe(WidgetSlider)
+ expect(getComponent('INT')).toBe(WidgetSlider)
+ })
+
+ it('should map float types to slider widget', () => {
+ expect(getComponent('float')).toBe(WidgetSlider)
+ expect(getComponent('FLOAT')).toBe(WidgetSlider)
+ expect(getComponent('number')).toBe(WidgetSlider)
+ expect(getComponent('slider')).toBe(WidgetSlider)
+ })
+ })
+
+ // Test text type mappings
+ describe('text types', () => {
+ it('should map text variations to input text widget', () => {
+ expect(getComponent('text')).toBe(WidgetInputText)
+ expect(getComponent('string')).toBe(WidgetInputText)
+ expect(getComponent('STRING')).toBe(WidgetInputText)
+ })
+
+ it('should map multiline text types to textarea widget', () => {
+ expect(getComponent('multiline')).toBe(WidgetTextarea)
+ expect(getComponent('textarea')).toBe(WidgetTextarea)
+ expect(getComponent('TEXTAREA')).toBe(WidgetTextarea)
+ expect(getComponent('customtext')).toBe(WidgetTextarea)
+ })
+
+ it('should map markdown to markdown widget', () => {
+ expect(getComponent('MARKDOWN')).toBe(WidgetMarkdown)
+ expect(getComponent('markdown')).toBe(WidgetMarkdown)
+ })
+ })
+
+ // Test selection type mappings
+ describe('selection types', () => {
+ it('should map combo types to select widget', () => {
+ expect(getComponent('combo')).toBe(WidgetSelect)
+ expect(getComponent('COMBO')).toBe(WidgetSelect)
+ })
+ })
+
+ // Test boolean type mappings
+ describe('boolean types', () => {
+ it('should map boolean types to toggle switch widget', () => {
+ expect(getComponent('toggle')).toBe(WidgetToggleSwitch)
+ expect(getComponent('boolean')).toBe(WidgetToggleSwitch)
+ expect(getComponent('BOOLEAN')).toBe(WidgetToggleSwitch)
+ })
+ })
+
+ // Test advanced widget mappings
+ describe('advanced widgets', () => {
+ it('should map color types to color picker widget', () => {
+ expect(getComponent('color')).toBe(WidgetColorPicker)
+ expect(getComponent('COLOR')).toBe(WidgetColorPicker)
+ })
+
+ it('should map file types to file upload widget', () => {
+ expect(getComponent('file')).toBe(WidgetFileUpload)
+ expect(getComponent('fileupload')).toBe(WidgetFileUpload)
+ expect(getComponent('FILEUPLOAD')).toBe(WidgetFileUpload)
+ })
+
+ it('should map button types to button widget', () => {
+ expect(getComponent('button')).toBe(WidgetButton)
+ expect(getComponent('BUTTON')).toBe(WidgetButton)
+ })
+ })
+
+ // Test fallback behavior
+ describe('fallback behavior', () => {
+ it('should return null for unknown types', () => {
+ expect(getComponent('unknown')).toBe(null)
+ expect(getComponent('custom_widget')).toBe(null)
+ expect(getComponent('')).toBe(null)
+ })
+ })
+ })
+
+ describe('shouldRenderAsVue', () => {
+ it('should return false for widgets marked as canvas-only', () => {
+ const widget = { type: 'text', options: { canvasOnly: true } }
+ expect(shouldRenderAsVue(widget)).toBe(false)
+ })
+
+ it('should return false for widgets without a type', () => {
+ const widget = { options: {} }
+ expect(shouldRenderAsVue(widget)).toBe(false)
+ })
+
+ it('should return true for widgets with mapped types', () => {
+ expect(shouldRenderAsVue({ type: 'text' })).toBe(true)
+ expect(shouldRenderAsVue({ type: 'int' })).toBe(true)
+ expect(shouldRenderAsVue({ type: 'combo' })).toBe(true)
+ })
+
+ it('should return false for unknown types', () => {
+ expect(shouldRenderAsVue({ type: 'unknown_type' })).toBe(false)
+ })
+
+ it('should respect options while checking type', () => {
+ const widget = { type: 'text', options: { someOption: 'value' } }
+ expect(shouldRenderAsVue(widget)).toBe(true)
+ })
+ })
+
+ describe('isEssential', () => {
+ it('should identify essential widget types', () => {
+ expect(isEssential('int')).toBe(true)
+ expect(isEssential('INT')).toBe(true)
+ expect(isEssential('float')).toBe(true)
+ expect(isEssential('FLOAT')).toBe(true)
+ expect(isEssential('boolean')).toBe(true)
+ expect(isEssential('BOOLEAN')).toBe(true)
+ expect(isEssential('combo')).toBe(true)
+ expect(isEssential('COMBO')).toBe(true)
+ })
+
+ it('should identify non-essential widget types', () => {
+ expect(isEssential('button')).toBe(false)
+ expect(isEssential('color')).toBe(false)
+ expect(isEssential('chart')).toBe(false)
+ expect(isEssential('fileupload')).toBe(false)
+ })
+
+ it('should return false for unknown types', () => {
+ expect(isEssential('unknown')).toBe(false)
+ expect(isEssential('')).toBe(false)
+ })
+ })
+
+ describe('edge cases', () => {
+ it('should handle widgets with empty options', () => {
+ const widget = { type: 'text', options: {} }
+ expect(shouldRenderAsVue(widget)).toBe(true)
+ })
+
+ it('should handle case sensitivity correctly through aliases', () => {
+ // Test that both lowercase and uppercase work
+ expect(getComponent('string')).toBe(WidgetInputText)
+ expect(getComponent('STRING')).toBe(WidgetInputText)
+ expect(getComponent('combo')).toBe(WidgetSelect)
+ expect(getComponent('COMBO')).toBe(WidgetSelect)
+ })
+ })
+})
diff --git a/tests-ui/tests/utils/spatial/QuadTree.test.ts b/tests-ui/tests/utils/spatial/QuadTree.test.ts
new file mode 100644
index 0000000000..ea31e5682d
--- /dev/null
+++ b/tests-ui/tests/utils/spatial/QuadTree.test.ts
@@ -0,0 +1,269 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { type Bounds, QuadTree } from '@/utils/spatial/QuadTree'
+
+describe('QuadTree', () => {
+ let quadTree: QuadTree
+ const worldBounds: Bounds = { x: 0, y: 0, width: 1000, height: 1000 }
+
+ beforeEach(() => {
+ quadTree = new QuadTree(worldBounds, {
+ maxDepth: 4,
+ maxItemsPerNode: 4
+ })
+ })
+
+ describe('insertion', () => {
+ it('should insert items within bounds', () => {
+ const success = quadTree.insert(
+ 'node1',
+ { x: 100, y: 100, width: 50, height: 50 },
+ 'node1'
+ )
+ expect(success).toBe(true)
+ expect(quadTree.size).toBe(1)
+ })
+
+ it('should reject items outside bounds', () => {
+ const success = quadTree.insert(
+ 'node1',
+ { x: -100, y: -100, width: 50, height: 50 },
+ 'node1'
+ )
+ expect(success).toBe(false)
+ expect(quadTree.size).toBe(0)
+ })
+
+ it('should handle duplicate IDs by replacing', () => {
+ quadTree.insert(
+ 'node1',
+ { x: 100, y: 100, width: 50, height: 50 },
+ 'data1'
+ )
+ quadTree.insert(
+ 'node1',
+ { x: 200, y: 200, width: 50, height: 50 },
+ 'data2'
+ )
+
+ expect(quadTree.size).toBe(1)
+ const results = quadTree.query({
+ x: 150,
+ y: 150,
+ width: 100,
+ height: 100
+ })
+ expect(results).toContain('data2')
+ expect(results).not.toContain('data1')
+ })
+ })
+
+ describe('querying', () => {
+ beforeEach(() => {
+ // Insert test nodes in a grid pattern
+ for (let x = 0; x < 10; x++) {
+ for (let y = 0; y < 10; y++) {
+ const id = `node_${x}_${y}`
+ quadTree.insert(
+ id,
+ {
+ x: x * 100,
+ y: y * 100,
+ width: 50,
+ height: 50
+ },
+ id
+ )
+ }
+ }
+ })
+
+ it('should find nodes within query bounds', () => {
+ const results = quadTree.query({ x: 0, y: 0, width: 250, height: 250 })
+ expect(results.length).toBe(9) // 3x3 grid
+ })
+
+ it('should return empty array for out-of-bounds query', () => {
+ const results = quadTree.query({
+ x: 2000,
+ y: 2000,
+ width: 100,
+ height: 100
+ })
+ expect(results.length).toBe(0)
+ })
+
+ it('should handle partial overlaps', () => {
+ const results = quadTree.query({ x: 25, y: 25, width: 100, height: 100 })
+ expect(results.length).toBe(4) // 2x2 grid due to overlap
+ })
+
+ it('should handle large query areas efficiently', () => {
+ const startTime = performance.now()
+ const results = quadTree.query({ x: 0, y: 0, width: 1000, height: 1000 })
+ const queryTime = performance.now() - startTime
+
+ expect(results.length).toBe(100) // All nodes
+ expect(queryTime).toBeLessThan(5) // Should be fast
+ })
+ })
+
+ describe('removal', () => {
+ it('should remove existing items', () => {
+ quadTree.insert(
+ 'node1',
+ { x: 100, y: 100, width: 50, height: 50 },
+ 'node1'
+ )
+ expect(quadTree.size).toBe(1)
+
+ const success = quadTree.remove('node1')
+ expect(success).toBe(true)
+ expect(quadTree.size).toBe(0)
+ })
+
+ it('should handle removal of non-existent items', () => {
+ const success = quadTree.remove('nonexistent')
+ expect(success).toBe(false)
+ })
+ })
+
+ describe('updating', () => {
+ it('should update item position', () => {
+ quadTree.insert(
+ 'node1',
+ { x: 100, y: 100, width: 50, height: 50 },
+ 'node1'
+ )
+
+ const success = quadTree.update('node1', {
+ x: 200,
+ y: 200,
+ width: 50,
+ height: 50
+ })
+ expect(success).toBe(true)
+
+ // Should not find at old position
+ const oldResults = quadTree.query({
+ x: 75,
+ y: 75,
+ width: 100,
+ height: 100
+ })
+ expect(oldResults).not.toContain('node1')
+
+ // Should find at new position
+ const newResults = quadTree.query({
+ x: 175,
+ y: 175,
+ width: 100,
+ height: 100
+ })
+ expect(newResults).toContain('node1')
+ })
+ })
+
+ describe('subdivision', () => {
+ it('should subdivide when exceeding max items', () => {
+ // Insert 5 items (max is 4) to trigger subdivision
+ for (let i = 0; i < 5; i++) {
+ quadTree.insert(
+ `node${i}`,
+ {
+ x: i * 10,
+ y: i * 10,
+ width: 5,
+ height: 5
+ },
+ `node${i}`
+ )
+ }
+
+ expect(quadTree.size).toBe(5)
+
+ // Verify all items can still be found
+ const allResults = quadTree.query(worldBounds)
+ expect(allResults.length).toBe(5)
+ })
+ })
+
+ describe('performance', () => {
+ it('should handle 1000 nodes efficiently', () => {
+ const insertStart = performance.now()
+
+ // Insert 1000 nodes
+ for (let i = 0; i < 1000; i++) {
+ const x = Math.random() * 900
+ const y = Math.random() * 900
+ quadTree.insert(
+ `node${i}`,
+ {
+ x,
+ y,
+ width: 50,
+ height: 50
+ },
+ `node${i}`
+ )
+ }
+
+ const insertTime = performance.now() - insertStart
+ expect(insertTime).toBeLessThan(50) // Should be fast
+
+ // Query performance
+ const queryStart = performance.now()
+ const results = quadTree.query({
+ x: 400,
+ y: 400,
+ width: 200,
+ height: 200
+ })
+ const queryTime = performance.now() - queryStart
+
+ expect(queryTime).toBeLessThan(2) // Queries should be very fast
+ expect(results.length).toBeGreaterThan(0)
+ expect(results.length).toBeLessThan(1000) // Should cull most nodes
+ })
+ })
+
+ describe('edge cases', () => {
+ it('should handle zero-sized bounds', () => {
+ const success = quadTree.insert(
+ 'point',
+ { x: 100, y: 100, width: 0, height: 0 },
+ 'point'
+ )
+ expect(success).toBe(true)
+
+ const results = quadTree.query({ x: 99, y: 99, width: 2, height: 2 })
+ expect(results).toContain('point')
+ })
+
+ it('should handle items spanning multiple quadrants', () => {
+ const success = quadTree.insert(
+ 'large',
+ {
+ x: 400,
+ y: 400,
+ width: 200,
+ height: 200
+ },
+ 'large'
+ )
+ expect(success).toBe(true)
+
+ // Should be found when querying any overlapping quadrant
+ const topLeft = quadTree.query({ x: 0, y: 0, width: 500, height: 500 })
+ const bottomRight = quadTree.query({
+ x: 500,
+ y: 500,
+ width: 500,
+ height: 500
+ })
+
+ expect(topLeft).toContain('large')
+ expect(bottomRight).toContain('large')
+ })
+ })
+})