Preparation for adding drag and drop

src/lib/Branch.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import Checkbox from './Checkbox.svelte';
-	import { SelectionModes, type InsertionType, type Node, type Tree } from '$lib/types.js';
+	import { SelectionModes, InsertionType, type Node, type Tree } from '$lib/types.js';
 	import type { CustomizableClasses, TreeHelper } from '$lib/index.js';
 
 	const dispatch = createEventDispatcher();
@@ -148,7 +148,7 @@
 			on:dragleave|stopPropagation={(e) => handleDragLeave(e, node, liElements[getNodeId(node)])}
 			bind:this={liElements[getNodeId(node)]}
 		>
-			{#if insPos == 1 && insertHighlighted}
+			{#if insPos == InsertionType.above && insertHighlighted}
 				<div class="insert-line-wrapper">
 					<div class="insert-line {classes.inserLineClass}" />
 				</div>
@@ -234,7 +234,7 @@
 				<ul class:child-menu={childDepth > 0} />
 			{/if}
 			<!-- Show line if insering -->
-			{#if insPos == -1 && insertHighlighted}
+			{#if insPos === InsertionType.below && insertHighlighted}
 				<div class="insert-line-wrapper">
 					<div class="insert-line {classes.inserLineClass}" />
 				</div>

src/lib/constants.ts

@@ -1,4 +1,9 @@
-import type { CustomizableClasses, Props } from '$lib/types.js';
+import {
+	type HelperConfig,
+	SelectionModes,
+	type CustomizableClasses,
+	type Props
+} from '$lib/types.js';
 
 export const defaultPropNames: Props = {
 	nodePath: 'nodePath',
@@ -26,3 +31,8 @@ export const defaultClasses: CustomizableClasses = {
 	inserLineClass: '',
 	inserLineNestClass: ''
 };
+
+export const defaultConfig: HelperConfig = {
+	separator: '.',
+	checkboxes: SelectionModes.none
+};

src/lib/helpers/tree-helper.ts

@@ -2,12 +2,13 @@ import orderBy from 'lodash.unionby'; // used by tree merge
 import uniqueBy from 'lodash.uniqby'; // used by tree merge
 import type { Node, NodePath, HelperConfig, Tree } from '$lib/types.js';
 import type { PropertyHelper } from '$lib/helpers/property-helper.js';
+import { defaultConfig } from '$lib/constants.js';
 
 export class TreeHelper {
 	props: PropertyHelper;
 	config: HelperConfig;
 
-	constructor(props: PropertyHelper, config: HelperConfig = {}) {
+	constructor(props: PropertyHelper, config: HelperConfig = defaultConfig) {
 		this.props = props;
 		this.config = config;
 	}
@@ -171,4 +172,13 @@ export class TreeHelper {
 		);
 		return tree;
 	}
+
+	getNodeId(nodePath: NodePath) {
+		if (nodePath == null) {
+			console.warn('getting node id of null node path');
+			return null;
+		}
+
+		return nodePath?.split(this.config.separator).slice(-1)[0];
+	}
 }

src/lib/providers/drag-drop-provider.ts

@@ -1,8 +1,8 @@
 import type { PropertyHelper } from '$lib/helpers/property-helper.js';
 import type { TreeHelper } from '$lib/helpers/tree-helper.js';
-import type { InsertionType, Node, NodePath, Tree } from '$lib/types.js';
+import { InsertionType, type Node, type NodePath, type Tree } from '$lib/types.js';
 
-export class DragAndDropProvider {
+export class DragDropProvider {
 	helper: TreeHelper;
 	props: PropertyHelper;
 	separator: string;
@@ -30,13 +30,13 @@ export class DragAndDropProvider {
 		tree: Node[],
 		movedNodePath: NodePath,
 		targetNodePath: NodePath,
-		insType: -1 | 0 | 1,
+		insType: InsertionType,
 		recalculateNodePath: boolean
 	): Node[] {
 		// cannot move root node
 		if (!movedNodePath) return tree;
 
-		const isNesting = insType == 0;
+		const isNesting = insType === InsertionType.nest;
 		// if you are not isNestinging, you want to be on same level
 		//so you will have same parent as target node
 		const parentNodePath = isNesting
@@ -100,7 +100,7 @@ export class DragAndDropProvider {
 
 		const index = tree.findIndex((x) => this.path(x) == this.path(targetNode));
 
-		tree.splice(index + (insType == 1 ? 0 : 1), 0, movedNode);
+		tree.splice(index + (insType == InsertionType.above ? 0 : 1), 0, movedNode);
 
 		//TODO maybe add option to setting this.hasChildren to false when moved last children
 
@@ -124,13 +124,17 @@ export class DragAndDropProvider {
 	) {
 		//node id is last part of nodePath
 		let nodeId;
+
 		if (recalculateNodePath) {
 			nodeId = this.getNextNodeId(tree, parentNodePath);
 		} else {
 			//get last segment of path
-			nodeId = movedNodePath?.split(this.separator).slice(-1)[0];
+			nodeId = this.helper.getNodeId(movedNodePath);
 		}
-		return (parentNodePath ? parentNodePath + this.separator : '') + nodeId;
+
+		if (parentNodePath === null) return nodeId as string;
+
+		return `${parentNodePath}${this.separator}${nodeId}`;
 	}
 
 	updatePriority(
@@ -141,14 +145,14 @@ export class DragAndDropProvider {
 		targetNode: Node,
 		insType: InsertionType
 	) {
-		const isNesting = insType == 0;
+		const isNesting = insType == InsertionType.nest;
 
 		if (isNesting || this.props.priority(targetNode) != null) {
 			let newpriority = 0;
 			if (!isNesting) {
 				//calculate next
 				newpriority = this.props.priority(targetNode) ?? 0;
-				if (insType == -1) {
+				if (insType == InsertionType.below) {
 					newpriority += 1;
 				} else {
 					//targetNode[this.props.priority] -= 1;
@@ -192,27 +196,17 @@ export class DragAndDropProvider {
 				max = Math.max(max, num);
 			}
 		});
-		return max + 1;
+
+		return (max + 1).toString();
 	}
 
 	getInsertionPosition(e: DragEvent, element: HTMLElement): InsertionType {
 		const targetCords = element.getBoundingClientRect();
 		const half = targetCords.bottom - targetCords.height / 2;
 
 		if (e.y < half) {
-			return 1;
-		}
-		return -1;
-	}
-
-	huminifyInsType(insType: InsertionType): string {
-		switch (insType) {
-			case 1:
-				return 'before';
-			case 0:
-				return 'inside';
-			case -1:
-				return 'after';
+			return InsertionType.below;
 		}
+		return InsertionType.above;
 	}
 }

src/lib/types.ts

@@ -30,7 +30,11 @@ export enum SelectionModes {
 export type Node = unknown;
 
 export type Tree = Node[];
-export type InsertionType = -1 | 0 | 1;
+export enum InsertionType {
+	above = 'above',
+	below = 'below',
+	nest = 'nest'
+}
 export type NodePath = string | null;
 
 export type CustomizableClasses = {
@@ -45,15 +49,18 @@ export type CustomizableClasses = {
 };
 
 export type DragEnterCallback = (draggendNode: Node, oldParent: Node, newParent: Node) => boolean;
+
 export type BeforeMovedCallback = (
 	draggendNode: Node,
 	oldParent: Node,
 	newParent: Node,
 	insertionType: string
 ) => boolean;
+
 export type ExpandedCallback = (node: Node) => Promise<Node[]>;
+
 export type HelperConfig = {
-	separator?: string;
+	separator: string;
 	recursive?: boolean;
 	recalculateNodePath?: boolean;
 	checkboxes?: SelectionModes;

src/test/selection-helper.test.ts

@@ -47,7 +47,7 @@ function getTree(treeHelper: TreeHelper, testSpecifcNodes: any[] = []) {
 
 function getHelper(recursive: boolean): { helper: TreeHelper; selection: SelectionProvider } {
 	const propertyHelper = new PropertyHelper(testingProperties);
-	const helper = new TreeHelper(propertyHelper, { recursive });
+	const helper = new TreeHelper(propertyHelper, { recursive, separator: '.' });
 	const selection = new SelectionProvider(helper, recursive);
 	return { helper, selection };
 }