@keenmate/svelte-treeview 3.1.0 → 3.1.2

package/dist/Branch.svelte

@@ -116,9 +116,9 @@ function onContextMenu(ev, node) {
 				{#if node.hasChildren}
 					<button
 						class="expansion-button arrow"
-						onclick={() => setExpansion(node, !expanded)}
 						type="button"
 						tabindex="-1"
+						onclick={() => setExpansion(node, !expanded)}
 					>
 						<i class="fixed-icon arrow {expanded ? classes.collapseIcon : classes.expandIcon}"></i>
 					</button>

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) {
@@ -343,16 +374,6 @@ function debugLog(...data) {
   bottom: 0;
   left: 0;
 }
-:global(.treeview-parent) :global(.treeview) :global(ul) :global(li:before) {
-  content: "";
-  display: block;
-  width: 10px;
-  height: 0;
-  margin-top: -1px;
-  position: absolute;
-  top: 0.8em;
-  left: 0;
-}
 :global(.treeview-parent) :global(.treeview) :global(ul) :global(li:not(.has-children):before) {
   width: 26px;
 }
@@ -375,6 +396,9 @@ function debugLog(...data) {
   align-items: center;
   padding: 4px 0;
 }
+:global(.treeview-parent) :global(.treeview) :global(.tree-item) + :global(.child-menu) {
+  margin-left: var(--treeview-children-offset, 1.25em);
+}
 :global(.treeview-parent) :global(.treeview) :global(.no-arrow) {
   padding-left: 0.5rem;
 }
@@ -426,5 +450,7 @@ function debugLog(...data) {
 :global(.treeview-parent) :global(.treeview) :global(.fixed-icon) {
   text-align: center;
   width: 1.25em;
-  min-width: 1.25em;
+}
+:global(.treeview-parent) :global(.treeview) :global(.tree-item) > :global(.child-offset) {
+  width: 1.25em;
 }</style>

package/dist/tree-styles.scss

@@ -40,16 +40,6 @@ $treeview-lines: solid black 1px;
 			left: 0;
 		}
 
-		li:before {
-			content: "";
-			display: block;
-			width: 10px;
-			height: 0;
-			margin-top: -1px;
-			position: absolute;
-			top: 0.8em;
-			left: 0;
-		}
 
 		li:not(.has-children):before {
 			width: 26px;
@@ -76,6 +66,9 @@ $treeview-lines: solid black 1px;
 		column-gap: 0.4em;
 		align-items: center;
 		padding: 4px 0;
+		& + .child-menu {
+			margin-left: var(--treeview-children-offset, 1.25em);
+		}
 	}
 
 	.no-arrow {
@@ -144,8 +137,11 @@ $treeview-lines: solid black 1px;
 	.fixed-icon {
 		text-align: center;
 		width: 1.25em;
-		// fix deformation on small screens
-		min-width: 1.25em;
 	}
 
+	.tree-item {
+		& > .child-offset {
+			width: 1.25em;
+		}
+	}
 }

package/package.json

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