From a8f71443ba87931558cc0317603c14d683698f80 Mon Sep 17 00:00:00 2001
From: Jan Rada <31016933+ZelvaMan@users.noreply.github.com>
Date: Tue, 14 May 2024 13:13:12 +0200
Subject: [PATCH] Allow change of expansion icons and bugfixes

---
 src/assets/main.scss           |  4 ----
 src/lib/Branch.svelte          | 12 +++++++-----
 src/lib/TreeView.svelte        | 22 ++++++++++++++--------
 src/lib/constants.ts           |  4 ++--
 src/lib/helpers/tree-helper.ts |  4 ++--
 src/lib/tree-styles.sass       |  5 ++---
 src/lib/types.ts               |  4 ++--
 7 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/assets/main.scss b/src/assets/main.scss
index 80c971b..da83c05 100644
--- 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
index 61c0bc6..616ea96 100644
--- 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
index 95cefac..065b9d9 100644
--- 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
index ae1cb6d..9506457 100644
--- 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
index 504282f..dac588a 100644
--- 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
index be78d8d..bc3c2ca 100644
--- 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
index d40689b..5fee302 100644
--- 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;