[feat] Implement LOD (Level of Detail) system for Vue nodes

- Add useLOD composable with 3 zoom-based detail levels (minimal, reduced, full)
- Implement conditional rendering in LGraphNode based on zoom level
- Filter non-essential widgets at reduced LOD (keep interactive controls only)
- Add LOD-specific CSS classes for visual optimizations
- Update performance test thresholds for CI environment compatibility
- Fix lint warnings in QuadTreeDebugSection component

Performance impact: ~80% DOM element reduction at low zoom levels
Zoom thresholds: 0.4 (minimal), 0.8 (full) for optimal quality/performance balance
This commit is contained in:
bymyself
2025-07-05 01:24:53 -07:00
parent c2463268d7
commit 71c3c727cf
26 changed files with 1011 additions and 218 deletions

View File

@@ -17,12 +17,12 @@
import Select from 'primevue/select'
import { computed } from 'vue'
import { useWidgetValue } from '@/composables/graph/useWidgetValue'
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
import {
PANEL_EXCLUDED_PROPS,
filterWidgetProps
} from '@/utils/widgetPropFilter'
import { useWidgetValue } from '@/composables/graph/useWidgetValue'
const props = defineProps<{
widget: SimplifiedWidget<any>