@keenmate/svelte-treeview 4.0.1 → 4.1.0

package/README.md

@@ -625,6 +625,28 @@ interface NodeData {
 - Second level: `"1.1"`, `"1.2"`, `"2.1"`
 - Third level: `"1.1.1"`, `"1.2.1"`, `"2.1.1"`
 
+### Sorting Requirements
+
+**Important:** For proper tree construction, your `sortCallback` must sort by **level first** to ensure parent nodes are inserted before their children:
+
+```typescript
+const sortCallback = (items: LTreeNode<T>[]) => {
+  return items.sort((a, b) => {
+    // First, sort by level (shallower levels first)
+    const aLevel = a.path.split('.').length;
+    const bLevel = b.path.split('.').length;
+    if (aLevel !== bLevel) {
+      return aLevel - bLevel;
+    }
+
+    // Then sort by your custom criteria
+    return a.data.name.localeCompare(b.data.name);
+  });
+};
+```
+
+**Why this matters:** If deeper level nodes are processed before their parents, you'll get "Could not find parent node" errors during tree construction. Level-first sorting ensures hierarchical integrity and enables progressive rendering for large datasets.
+
 ### Insert Result Information
 
 The tree provides detailed information about data insertion through the `insertResult` bindable property:

package/dist/components/Tree.svelte

@@ -222,8 +222,9 @@
 
 	treeId = treeId || generateTreeId();
 
-	// svelte-ignore non_reactive_update
-	// let trie: Ltree<T> | null = null
+	if (shouldDisplayDebugInformation)
+		console.log("Tree treePathSeparator:", treePathSeparator)
+
 	// svelte-ignore non_reactive_update
 	const tree: Ltree<T> = createLTree<T>(
 		idMember,
@@ -257,6 +258,11 @@
 		}
 	);
 
+	// Update tree separator when prop changes
+	$effect(() => {
+		tree.treePathSeparator = treePathSeparator;
+	});
+
 	setContext('Ltree', tree);
 
 	$effect(() => {
@@ -284,7 +290,6 @@
 		if (selectedNode) {
 			const previousNode = tree.getNodeByPath(selectedNode.path);
 			if (previousNode) {
-				console.log('🚀 ~ _onNodeClicked ~ previousNode:', previousNode);
 				previousNode.isSelected = false;
 			} else selectedNode = null;
 		}
@@ -325,8 +330,6 @@
 		// 	event.dataTransfer.effectAllowed = "move";
 		// 	event.dataTransfer.setData("text/plain", node.path);
 		// }
-
-		console.log('🚀 ~ _onNodeDragStart ~ draggedNode:', draggedNode, event);
 	}
 
 	function _onNodeDragOver(node: LTreeNode<T>, event: DragEvent) {
@@ -464,8 +467,8 @@
 			</div>
 		{/if}
 	</div>
-	
-		{@render treeFooter?.()}
+
+	{@render treeFooter?.()}
 
 	<!-- Context Menu -->
 	{#if contextMenuVisible && contextMenu && contextMenuNode}

package/dist/ltree/ltree.svelte.js

@@ -137,6 +137,7 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
             const itemsToIndex = [];
             let realIndex = 0; // this is used to avoid scenario, when node cannot found a parent
             let successfulCount = 0;
+            let hasRenderedExpandLevel = false;
             mappedData.forEach((node, index) => {
                 const result = this.insertTreeNode(node.parentPath, node, true);
                 if (result) {
@@ -154,6 +155,23 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                         itemsToIndex.push({ node, index: realIndex });
                         realIndex++;
                     }
+                    // Progressive rendering: emit changes when we complete expandLevel
+                    if (!noEmitChanges && !hasRenderedExpandLevel && _expandLevel && node.level && node.level <= _expandLevel) {
+                        // Check if this might be the last node at expandLevel by looking ahead
+                        const remainingNodes = mappedData.slice(index + 1);
+                        const hasMoreAtExpandLevel = remainingNodes.some(futureNode => {
+                            const futureLevel = futureNode.level || getLevel(futureNode.path, this.treePathSeparator);
+                            return futureLevel <= _expandLevel;
+                        });
+                        if (!hasMoreAtExpandLevel) {
+                            // We've processed all nodes up to expandLevel - render now!
+                            hasRenderedExpandLevel = true;
+                            this._emitTreeChanged();
+                            if (this.shouldDisplayDebugInformation) {
+                                console.log(`[Tree ${_treeId}] Progressive render: Displayed levels 1-${_expandLevel} (${successfulCount} nodes processed so far)`);
+                            }
+                        }
+                    }
                 }
             });
             // Log errors for backward compatibility and debugging
@@ -172,8 +190,22 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                 });
                 indexer.addToQueue(itemsToIndex);
             }
+            // Final render (only if we haven't already rendered progressively)
             if (!noEmitChanges) {
-                this._emitTreeChanged();
+                if (hasRenderedExpandLevel) {
+                    // We already rendered expandLevel, now render the complete tree
+                    this._emitTreeChanged();
+                    if (this.shouldDisplayDebugInformation) {
+                        console.log(`[Tree ${_treeId}] Final render: Complete tree with all ${successfulCount} nodes`);
+                    }
+                }
+                else {
+                    // No progressive rendering occurred, render everything at once
+                    this._emitTreeChanged();
+                    if (this.shouldDisplayDebugInformation) {
+                        console.log(`[Tree ${_treeId}] Single render: All ${successfulCount} nodes (no expandLevel or progressive render conditions met)`);
+                    }
+                }
             }
             performance.mark('insert-end');
             performance.measure('sort-duration', 'sort-start', 'sort-end');
@@ -425,6 +457,13 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
         },
         _defaultSort: function (self, items) {
             return items.sort((a, b) => {
+                // First, sort by level (shallower levels first)
+                const aLevel = a.level || 0;
+                const bLevel = b.level || 0;
+                if (aLevel !== bLevel) {
+                    return aLevel - bLevel;
+                }
+                // Then sort by parent path
                 if (a.parentPath !== b.parentPath) {
                     if (a.parentPath === '')
                         return -1;
@@ -432,13 +471,8 @@ export function createLTree(_idMember, _pathMember, _parentPathMember, _levelMem
                         return 1;
                     return a.parentPath.localeCompare(b.parentPath);
                 }
-                // console.log(
-                // 	'a.name, b.name, comparison',
-                // 	self.getNodeDisplayValue(a),
-                // 	self.getNodeDisplayValue(b),
-                // 	self.getNodeDisplayValue(a).localeCompare(this.getNodeDisplayValue(b))
-                // );
-                return self.getNodeDisplayValue(a).localeCompare(this.getNodeDisplayValue(b));
+                // Finally sort by display value
+                return self.getNodeDisplayValue(a).localeCompare(self.getNodeDisplayValue(b));
             });
         },
         _emitTreeChanged: function () {

package/dist/styles.scss

@@ -1,2 +1,2 @@
 // CSS entry point for the library
-@import './styles/main.scss';
+@use './styles/main.scss';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "4.0.1",
+	"version": "4.1.0",
 	"scripts": {
 		"dev": "vite dev --port 17777",
 		"build": "vite build && npm run prepack",