Allow change of expansion icons and bugfixes

KeenMate · May 14, 2024 · a8f7144 · a8f7144
1 parent de40e9c
commit a8f7144
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 26 deletions.
diff --git a/src/assets/main.scss b/src/assets/main.scss
@@ -288,7 +288,3 @@ th.auto-width {
 .cursor-help {
 	cursor: help;
 }
-
-.expansion-button {
-	all: unset;
-}
diff --git a/src/lib/Branch.svelte b/src/lib/Branch.svelte
@@ -166,13 +166,15 @@
 				on:dragend={(e) => handleDragEnd(e, node)}
 			>
 				{#if hasChildren}
-					<button class="expansion-button" on:click={() => setExpansion(node, !expanded)}>
-						<i
-							class="far {expanded ? classes.expandedToggleClass : classes.collapsedToggleClass}"
-						/>
+					<button
+						class="expansion-button"
+						on:click={() => setExpansion(node, !expanded)}
+						type="button"
+					>
+						<i class="fa-fw {expanded ? classes.expandIcon : classes.collapseIcon}" />
 					</button>
 				{:else}
-					<span />
+					<span class="fa-fw" />
 				{/if}
 
 				<Checkbox

diff --git a/src/lib/TreeView.svelte b/src/lib/TreeView.svelte
@@ -97,7 +97,7 @@
 	 * Classes used in tree. You can override default classes with this prop.
 	 * It is recommended to use default classes and add aditinal styles in your css
 	 */
-	export let customClasses: CustomizableClasses = defaultClasses;
+	export let customClasses: Partial<CustomizableClasses> = {};
 
 	// use any so use doesnt have to cast from unknown
 	/**
@@ -134,6 +134,8 @@
 	let validTarget = false;
 	let insPos: InsertionType;
 
+	$: computedClasses = { ...defaultClasses, ...(customClasses ?? {}) };
+
 	$: dragAndDrop && console.warn('Drag and drop is not supported in this version');
 
 	$: helper = new TreeHelper({
@@ -145,8 +147,11 @@
 
 	export function changeAllExpansion(changeTo: boolean) {
 		debugLog('chaning expantion of every node to ', changeTo ? 'expanded' : 'collapsed');
-
-		expandedIds = computedTree.map((node) => node.id);
+		if (changeTo) {
+			expandedIds = computedTree.map((node) => node.id);
+		} else {
+			expandedIds = [];
+		}
 	}
 
 	function computeTree(
@@ -163,15 +168,16 @@
 			return [];
 		}
 
-		let mappedTree = helper.mapTree(userProvidedTree, filter, { ...defaultPropNames, ...props });
+		const mappedTree = helper.mapTree(userProvidedTree, { ...defaultPropNames, ...props });
+		const filteredTree = helper.searchTree(mappedTree, filter);
 
-		helper.markExpanded(mappedTree, expandedIds);
+		helper.markExpanded(filteredTree, expandedIds);
 
 		// 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(mappedTree, value);
+		selectionProvider.markSelected(filteredTree, value);
 
-		return mappedTree;
+		return filteredTree;
 	}
 
 	function onExpand(event: CustomEvent<{ node: Node; changeTo: boolean }>) {
@@ -280,7 +286,7 @@
 	{highlightedNode}
 	{readonly}
 	{helper}
-	classes={customClasses}
+	classes={computedClasses}
 	{verticalLines}
 	on:open-ctxmenu={openContextMenu}
 	on:internal-expand={onExpand}

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -19,8 +19,8 @@ export const defaultClasses: CustomizableClasses = {
 	expandClass: 'inserting-highlighted',
 	currentlyDraggedClass: 'currently-dragged',
 	nodeClass: '',
-	expandedToggleClass: 'fa-plus-square',
-	collapsedToggleClass: 'fa-minus-square',
+	expandIcon: 'far fa-fw fa-plus-square',
+	collapseIcon: 'far fa-fw fa-minus-square',
 	inserLineClass: '',
 	inserLineNestClass: ''
 };

diff --git a/src/lib/helpers/tree-helper.ts b/src/lib/helpers/tree-helper.ts
@@ -19,9 +19,9 @@ export class TreeHelper {
 		this.config = config;
 	}
 
-	mapTree(tree: Tree, filter: FilterFunction | null, properties: Props): Node[] {
+	mapTree(tree: Tree, properties: Props): Node[] {
 		{
-			return this.searchTree(tree, filter).map((node: any) => {
+			return tree.map((node: any) => {
 				// TODO maybe create class for nodes
 				const mappedNode: Node = {
 					originalNode: node,

diff --git a/src/lib/tree-styles.sass b/src/lib/tree-styles.sass
@@ -52,9 +52,6 @@ $treeview-lines: solid black 1px
     color: #555
     font-weight: 700
     position: relative
-    &:not(.has-children)
-      .tree-item
-        margin-left: 14px
 
   .tree-item
     display: flex
@@ -103,3 +100,5 @@ $treeview-lines: solid black 1px
     color: LightGray
   .pointer-cursor
     cursor: grab
+  .expansion-button
+    all: unset
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -62,8 +62,8 @@ export type NodeId = string | number;
 export type CustomizableClasses = {
 	treeClass: string;
 	nodeClass: string;
-	expandedToggleClass: string;
-	collapsedToggleClass: string;
+	expandIcon: string;
+	collapseIcon: string;
 	expandClass: string;
 	inserLineClass: string;
 	inserLineNestClass: string;