EV01 🎪 Live Callback Monitor

Interact with the tree to see callback invocations in real-time

Interactive Tree
Callback Log
Callback Log
0
No callbacks yet. Interact with the tree to see callbacks invoked here.
Callback Guide
🎯 How to Test Callbacks:
  • 👆 Click nodes to trigger onNodeClicked
  • 🟡 Start drag to trigger onNodeDragStart
  • 🔵 Drag over nodes for onNodeDragOver
  • ✅ Drop to trigger onNodeDrop
📊 Callback Statistics:
Total callbacks logged: 0
Log displays last 20 invocations
Callbacks logged in real-time

EV02 🔥 Callback Props Reference

Svelte 5 callback props for handling user interactions

Callback Reference
CallbackTriggerSignatureDescription
onNodeClickedUser click(node: LTreeNode<T>) => voidCalled when user clicks on any tree node
onNodeDragStartDrag begins(node: LTreeNode<T>, event: DragEvent) => voidCalled when user starts dragging a node
onNodeDragOverDrag over(node: LTreeNode<T>, event: DragEvent) => voidCalled when dragged node hovers over a target
onNodeDropDrop(dropNode, draggedNode, position, event, operation) => voidv4.5.0+: Extended signature with position and operation
Svelte 5 Callback Props

Unlike Svelte 4's on:event dispatcher syntax, Svelte 5 uses callback props. Pass functions directly as props: onNodeClicked={handler}

Usage Examples
Callback Props Usage 
 
 
Implementation Guide
 
🎯 LTreeNode Structure
 
All callbacks receive LTreeNode<T> objects with:
 
  • path - Node's hierarchical path
    •  
  • data - Your original data object
    •  
  • children - Child nodes map
    •  
  • isExpanded - Expansion state
    •  
  • isSelected - Selection state
 
🔄 Svelte 4 Migration
 
Replace on:nodeClick with onNodeClicked. The callback receives the node directly, not a CustomEvent.
 
⚡ Performance
 
  • Callbacks are invoked synchronously
    •  
  • Keep handlers lightweight
    •  
  • Debounce expensive operations
 
EV03 🤏 onNodeDrop Deep Dive (v4.5.0+)
 
Extended drop callback with position and operation support
 
Full Signature
 
ParameterTypeDescription
dropNodeLTreeNode<T> | nullTarget node, or null for root/empty tree drops
draggedNodeLTreeNode<T>The node being dragged
position'above' | 'below' | 'child'NEW: Where to place relative to target
eventDragEvent | TouchEventOriginal browser event (supports touch)
operation'move' | 'copy'NEW: Ctrl+drag = copy operation
 
Breaking Change in v4.5.0
 
The onNodeDrop signature changed from (dropNode, draggedNode, event) to include position and operation parameters.
 
Implementation Examples
 
v4.5.0 onNodeDrop Implementation 
 
 
 
Drop Handling Guide
 
🎯 Position Values
 
  • 'above' - Insert as sibling before target
    •  
  • 'below' - Insert as sibling after target
    •  
  • 'child' - Insert as child of target
 
📋 Operation Types
 
  • 'move' - Default drag operation
    •  
  • 'copy' - Ctrl+drag or copy drag
 
⚠️ Null dropNode
 
dropNode is null when:
 
  • Dropped on empty tree placeholder
    •  
  • Dropped on root drop zone
 
📱 Touch Support
 
The event can be TouchEvent on mobile devices with long-press drag.
 
EV04 🔍 Search API
 
Search is prop-based, not callback-based - use searchText prop and searchNodes method
 
Search Props & Methods
 
Prop / MethodTypeDescription
searchTextstring (bindable)Two-way bound search query - filters tree automatically
shouldUseInternalSearchIndexbooleanEnable FlexSearch-based indexing for large trees
searchValueMemberstringProperty name to use for search text
getSearchValueCallback(data: T) => stringCustom function to extract searchable text
searchNodes()(text: string) => LTreeNode[]Method: Query nodes programmatically
 
Note: Prop-Based Search
 
Unlike drag/drop callbacks, search uses reactive props. Bind to searchText and the tree filters automatically. No search events are fired.
 
Search Implementation
 
Search Implementation 
 
 
 
Search Guide
 
🔄 Reactive Filtering
 
When searchText changes, the tree automatically filters to show matching nodes and their ancestors.
 
🔍 searchNodes() Method
 
Use treeRef.searchNodes(query) to query nodes without changing the display filter.
 
⚡ FlexSearch Integration
 
Enable shouldUseInternalSearchIndex for optimized search on large trees using FlexSearch.
 
🎨 Custom Indexing
 
Use getSearchValueCallback to index multiple fields or apply custom text transformations.
 
EV05 ⚡ Performance & Best Practices
 
Optimize callback handling for large trees and complex applications
 
Best Practices
 
✅ Do's
 
  • Debounce expensive operations in callbacks
    •  
  • Keep callback handlers lightweight
    •  
  • Use $effect for reactive side effects
    •  
  • Batch state updates with $state
    •  
  • Use untrack() to avoid reactive loops
 
❌ Don'ts
 
  • Don't perform heavy computations in callbacks
    •  
  • Don't make synchronous API calls in handlers
    •  
  • Don't manipulate DOM directly - use reactive state
    •  
  • Don't create functions inside templates
    •  
  • Don't forget null checks for dropNode
 
🔧 Svelte 5 Cleanup
 
Svelte 5 automatically handles cleanup for $effect blocks.
								Use onDestroy only for non-reactive cleanup like timers.
 
Svelte 5 Patterns
 
Svelte 5 Best Practices 
 
 
 
Performance Guide
 
⚡ Callback Performance
 
  • Callbacks run synchronously - keep them fast
    •  
  • Debounce API calls and heavy operations
    •  
  • Use untrack() for non-reactive updates
 
🔄 Svelte 5 Runes
 
  • $state for reactive local state
    •  
  • $effect for side effects
    •  
  • $derived for computed values
 
📊 Large Trees
 
  • Enable shouldUseInternalSearchIndex
    •  
  • Use expandLevel to limit initial render
    •  
  • Lazy load children on expand if needed
 
🧪 Testing
 
Test callbacks by calling them directly with mock LTreeNode objects.