@keenmate/svelte-treeview 3.1.0 → 3.1.1

package/dist/TreeView.svelte

@@ -7,6 +7,7 @@ import { SelectionProvider } from "./providers/selection-provider.js";
 import { DragDropProvider } from "./providers/drag-drop-provider.js";
 import uniq from "lodash.uniq";
 import { calculateNewFocusedNode, parseMovementDirection } from "./providers/movement-provider.js";
+import { untrack } from "svelte";
 let { treeId, tree, value = [], treeProps = {}, verticalLines = false, readonly = false, separator = ".", recursiveSelection = false, selectionMode = SelectionModes.none, onlyLeafCheckboxes = false, hideDisabledCheckboxes = false, loadChildrenAsync = null, showContextMenu = false, expandTo = 0, expansionThreshold = 0, customClasses = {}, filter = null, logger = null, nodeSorter = null, dragAndDrop = false, dropDisabledCallback = null, allowKeyboardNavigation = false, onFocus = undefined, onFocusLeave = undefined, onExpansion = undefined, onExpanded = undefined, onClosed = undefined, onChange = undefined, onSelection = undefined, onSelected = undefined, onUnselected = undefined, onMoved = undefined, children, nestHighlight, contextMenu } = $props();
 export function changeAllExpansion(changeTo) {
     debugLog("changing expansion of every node to ", changeTo ? "expanded" : "collapsed");
@@ -83,33 +84,63 @@ let helper = $derived(new TreeHelper({
 }));
 let dragAndDropProvider = $derived(new DragDropProvider(helper));
 let selectionProvider = $derived(new SelectionProvider(helper, recursiveSelection));
-let computedTree = $derived(computeTree(helper, selectionProvider, tree, filter, treeProps, expandedPaths, value));
+let computedTree = $derived((helper,
+    selectionProvider,
+    tree,
+    filter,
+    treeProps,
+    expandedPaths,
+    value, computeTree()));
 $effect(() => {
     dragAndDrop && console.warn("Drag and drop is not supported in this version");
 });
-function computeTree(helper, selectionProvider, userProvidedTree, filter, props, expandedPaths, value) {
-    if (!Array.isArray(userProvidedTree) || !Array.isArray(value)) {
+function computeTree(
+// helper: TreeHelper,
+// selectionProvider: SelectionProvider,
+// userProvidedTree: any[],
+// filter: FilterFunction | null,
+// props: Partial<TreeProps>,
+// expandedPaths: string[],
+// value: NodeId[]
+) {
+    if (!Array.isArray(tree) || !Array.isArray(value)) {
         console.error("value and tree must be arrays!!");
         return [];
     }
     const start = Date.now();
-    const mappedTree = helper.mapTree(userProvidedTree, { ...defaultPropNames, ...props });
-    const { tree: filteredTree, count: filteredCount } = helper.searchTree(mappedTree, filter);
+    const mappedTree = untrack(() => helper.mapTree(tree, { ...defaultPropNames, ...treeProps }));
+    const { tree: filteredTree, count: filteredCount } = untrack(() => helper.searchTree(mappedTree, filter));
+    console.log("threshold condition", {
+        res: (!expandedPaths?.length || filter) && filteredCount <= expansionThreshold,
+        expandedPaths: $state.snapshot(expandedPaths),
+        filter,
+        filteredCount,
+        expansionThreshold
+    });
     // threshold applies to nodes that match the filter, not all their parents
-    if (filteredCount <= expansionThreshold) {
-        expandedPaths = uniq([...expandedPaths, ...filteredTree.map((node) => node.path)]);
+    if ((!expandedPaths?.length || filter) && filteredCount <= expansionThreshold) {
+        untrack(() => {
+            expandedPaths = uniq([...expandedPaths, ...filteredTree.map((node) => node.path)]);
+        });
     }
-    helper.markExpanded(filteredTree, expandedPaths);
+    untrack(() => helper.markExpanded(filteredTree, expandedPaths));
     // TODO here we could save last value and only recompute visual state if value changed
     // or use diff to only update affected nodes
-    selectionProvider.markSelected(filteredTree, value);
+    untrack(() => selectionProvider.markSelected(filteredTree, value));
     const end = Date.now();
-    debugLog(`Tree computed in: ${end - start}`, computeTree);
+    debugLog(`Tree computed in: ${end - start}`);
     return filteredTree;
 }
 function onExpand(data) {
     const { node, changeTo } = data;
+    console.log("expandedPaths before after expand", {
+        after: expandedPaths,
+        before: $state.snapshot(expandedPaths)
+    });
     expandedPaths = helper.changeExpansion(node.path, changeTo, expandedPaths);
+    console.log("expandedPaths before after expand", {
+        after: $state.snapshot(expandedPaths),
+    });
     debugLog("changed expansion of node '", node.id, "' to ", changeTo);
     //trigger callback if it is present and node has useCallback property set to true
     if (changeTo) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "3.1.0",
+	"version": "3.1.1",
 	"repository": {
 		"url": "https://github.com/keenmate/svelte-treeview"
 	},