@keenmate/svelte-treeview 0.3.5 → 0.3.6

package/README.md

@@ -4,10 +4,35 @@ The most elaborate treeview for svelte on earth (or even in our galaxy).
 
 ## Features
 
+- load new nodes whne expanding
 - automatically expanding to given depth
 - customization of all object properties
-- 
+- checkboxes enabled on whole tree or based on property
+- recursive seletion mode, where leafes can be selected
+- build-in support for search
 
-## Current state
+## Instalation
 
-svelte-treeview is undergoing big upgrade righ now, so docs will be added later.
+install the package `@keenmate/svelte-treeview` using your favourite package manager.
+
+Font awesome is required for expand/collapse icons.
+
+## Minimal usage
+
+
+```svelte
+<script lang="ts">
+	import { TreeView } from '$lib/index.js';
+
+	let tree = [
+		{ nodePath: 'animals', title: 'Animals', hasChildren: true },
+    //...
+		{ nodePath: 'animals.insects.butterflies', title: 'Butterflies' }
+	];
+</script>
+
+<TreeView {tree} treeId="my-tree" let:node>
+	{node.title}
+</TreeView>
+
+```

package/dist/Branch.svelte

@@ -1,6 +1,6 @@
 <script>import { createEventDispatcher } from 'svelte';
 import Checkbox from './Checkbox.svelte';
-import { SelectionModes } from './types.js';
+import { SelectionModes, InsertionType } from './types.js';
 const dispatch = createEventDispatcher();
 export let tree;
 export let treeId;
@@ -22,12 +22,6 @@ export let canNest;
 export let validTarget;
 export let insPos;
 const getNodeId = (node) => `${treeId}-${helper.path(node)}`;
-// get children nodes
-function getChildren(tree) {
-    const directChildren = helper.getDirectChildren(tree, helper.path(branchRootNode));
-    const orderedChildren = helper.dragDrop.OrderByPriority(directChildren);
-    return orderedChildren;
-}
 function setExpansion(node, changeTo) {
     dispatch('internal-expand', { node: node, changeTo });
 }
@@ -100,7 +94,7 @@ let liElements = {};
 	class:child-menu={childDepth > 0}
 	class={childDepth === 0 ? classes.treeClass : ''}
 >
-	{#each getChildren(tree) as node (getNodeId(node))}
+	{#each helper.getDirectChildren(tree, helper.path(branchRootNode)) as node (getNodeId(node))}
 		{@const nesthighlighed = highlightNesting(node, highlightedNode, validTarget, canNest)}
 		{@const insertHighlighted = highlightInsert(node, highlightedNode, validTarget, canNest)}
 		{@const expanded = isExpanded(node, childDepth, expandTo)}
@@ -122,7 +116,7 @@ let liElements = {};
 			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>
@@ -208,7 +202,7 @@ let liElements = {};
 				<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>

package/dist/Branch.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { SelectionModes, type InsertionType, type Node } from './types.js';
+import { SelectionModes, InsertionType, type Node } from './types.js';
 import type { CustomizableClasses, TreeHelper } from './index.js';
 declare const __propDef: {
     props: {

package/dist/Checkbox.svelte

@@ -1,5 +1,6 @@
 <script>import { createEventDispatcher } from 'svelte';
 import { SelectionModes } from './types.js';
+import { SelectionProvider } from './providers/selection-provider.js';
 export let checkboxes;
 export let helper;
 export let recursive;
@@ -16,6 +17,8 @@ $: {
         indeterminate = false;
     }
 }
+// TODO pass from root
+$: selectionProvider = new SelectionProvider(helper, recursive);
 const dispatch = createEventDispatcher();
 function onSelect(node) {
     dispatch('select', { node });
@@ -23,7 +26,7 @@ function onSelect(node) {
 </script>
 
 {#if checkboxes == SelectionModes.perNode || checkboxes == SelectionModes.all}
-	{#if helper.selection.isSelectable(node, checkboxes)}
+	{#if selectionProvider.isSelectable(node, checkboxes)}
 		<!-- select node -->
 		{#if !recursive || (recursive && !helper.props.hasChildren(node))}
 			<input

package/dist/TreeView.svelte

@@ -5,12 +5,13 @@ import { SelectionModes as SelectionModes } from './types.js';
 import { TreeHelper } from './index.js';
 import Branch from './Branch.svelte';
 import { PropertyHelper } from './helpers/property-helper.js';
+import { SelectionProvider } from './providers/selection-provider.js';
 const dispatch = createEventDispatcher();
 export let treeId;
 /**
  * Array of nodes that represent tree structure.
  * Each node should have unique path
- * All tree modifications are node by modyfing this array, so you need to bind it to parent component
+ * All tree modifications are made by modifying this array, so you need to bind it to parent component
  */
 export let tree;
 /**
@@ -118,6 +119,7 @@ $: helper = new TreeHelper(propHelper, {
     checkboxes: selectionMode,
     separator
 });
+$: selectionProvider = new SelectionProvider(helper, recursiveSelection);
 $: filteredTree = helper.searchTree(tree, filter);
 // compute vissual tree still caleed twice, because if we force update changes tree
 // which fires this event again
@@ -191,13 +193,13 @@ function computeVisualTree(_tree) {
         return;
     }
     debugLog('computing visual tree', { tree: _tree });
-    helper.selection.recomputeAllVisualStates(_tree);
+    selectionProvider.recomputeAllVisualStates(_tree);
 }
 function onSelectionChanged(event) {
     const { node } = event.detail;
     const nodePath = helper.path(node);
-    const changeTo = !helper.selection.isSelected(node);
-    helper.selection.setSelection(tree, nodePath, changeTo);
+    const changeTo = !selectionProvider.isSelected(node);
+    selectionProvider.setSelection(tree, nodePath, changeTo);
     debugLog("changing selection of node '", nodePath, "' to ", !propHelper.selected(node));
     forceUpdate();
     dispatch('selection', {
@@ -226,154 +228,173 @@ function debugLog(...data) {
 function forceUpdate() {
     tree = tree;
 }
-//#region drag and drop
-function handleDragStart(e, node) {
-    // dont allos drag if is draggable is false
-    if (propHelper.isDraggable(node) === false) {
-        e.preventDefault();
-        return;
-    }
-    console.log('dragstart from: ' + helper.path(node));
-    //@ts-ignore
-    e.dataTransfer.dropEffect = 'move';
-    //@ts-ignore
-    e.dataTransfer.setData('node_id', helper.path(node));
-    draggedPath = helper.path(node);
-}
-function handleDragDrop(e, node, el) {
-    //should be necesary but just in case
-    highlightedNode = null;
-    if (readonly || !dragAndDrop)
-        return;
-    //@ts-ignore
-    draggedPath = e.dataTransfer.getData('node_id');
-    console.log(draggedPath + ' dropped on: ' + helper.path(node));
-    //important to check if timetonest is set, otherwise you could spend 30 minutes fixing this shit :)
-    if (timeToNest) {
-        const nowTimestamp = new Date();
-        canNestTime =
-            (dragenterTimestamp ? nowTimestamp.getTime() - dragenterTimestamp.getTime() : 1) >
-                timeToNest;
-    }
-    let newNode = helper.findNode(tree, draggedPath);
-    let oldNode = { ...newNode };
-    let oldParent = helper.findNode(tree, helper.getParentNodePath(draggedPath));
-    let insType = canNest ? 0 : helper.dragDrop.getInsertionPosition(e, el);
-    //cancel move if its not valid
-    if (insType == 0 && propHelper.nestDisabled(node) === true)
-        return;
-    else if ((insType == -1 || insType == 1) && propHelper.insertDisabled(node) === true)
-        return;
-    //callback can cancell move
-    if (beforeMovedCallback &&
-        beforeMovedCallback(oldNode, oldParent, node, helper.dragDrop.huminifyInsType(insType)) ===
-            false)
-        return;
-    tree = helper.dragDrop.moveNode(tree, draggedPath, helper.path(node), insType, recalculateNodePath);
-    let newParent = helper.findNode(tree, helper.getParentNodePath(helper.path(newNode))) ?? null;
-    dispatch('moved', {
-        oldParent: oldParent,
-        newParent: newParent,
-        oldNode: oldNode,
-        newNode: newNode,
-        targetNode: node,
-        insType: helper.dragDrop.huminifyInsType(insType)
-    });
-    //reset props
-    dragenterTimestamp = null;
-    draggedPath = null;
-    highlightedNode = null;
-}
-function handleDragOver(e, node, el) {
-    insPos = helper.dragDrop.getInsertionPosition(e, el);
-    //if you are further away from right then treshold allow nesting
-    // @ts-ignore
-    let diff = e.x - e.target?.getBoundingClientRect()?.x;
-    if (pixelNestTreshold && diff > pixelNestTreshold) {
-        canNestPos = true;
-    }
-    else {
-        canNestPos = false;
-    }
-    //allow drop if valid target
-    if (validTarget)
-        e.preventDefault();
-}
-function handleDragEnter(e, node, el) {
-    setTimeout(() => {
-        insPos = helper.dragDrop.getInsertionPosition(e, el);
-        validTarget = true;
-        dragenterTimestamp = new Date();
-        // will cause flashing when moving wrom node to node while be able to nest
-        //* have to be here if you only use time
-        highlightedNode = node;
-        if (timeToNest) {
-            canNestTime = false;
-            //this is so that only one timeout is ticking at one time
-            clearTimeout(dragTimeout);
-            dragTimeout = setTimeout(() => {
-                canNestTime = true;
-            }, timeToNest);
-        }
-        //dont allow drop on child element and if both insertDisabled and nestDisabled to true
-        if (helper.path(node)?.startsWith(draggedPath ?? '') ||
-            (propHelper.insertDisabled(node) === true && propHelper.nestDisabled(node) === true)) {
-            validTarget = false;
-        }
-        //if defined calling callback
-        if (dragEnterCallback) {
-            //get node for event
-            let draggedNode = helper.findNode(tree, draggedPath ?? '');
-            let oldParent = helper.findNode(tree, helper.getParentNodePath(draggedPath ?? ''));
-            //callback returning false means that it isnt valid target
-            if (dragEnterCallback(draggedNode, oldParent, node) === false) {
-                validTarget = false;
-            }
-        }
-    }, 1);
-    e.preventDefault();
-}
-function handleDragEnd(e, node) {
-    //reset prop on next tick
-    setTimeout(() => {
-        draggedPath = null;
-        highlightedNode = null;
-    }, 1);
-}
-function handleDragleave(e, node, el) {
-    // highlightedNode = null;
-}
-/**
- *check if this node is one being hovered over (highlited) and is valid target
- */
-function highlighThisNode(node, highlitedNode, validTarget) {
-    return validTarget && helper.path(highlitedNode) == helper.path(node);
-}
-/**
- * returns true, it should highlight nesting on this node
- * @param node node
- * @param highlitedNode highlited node
- * @param validTarget valid target
- * @param canNest can nest
- */
-function highlightNesting(node, highlitedNode, validTarget, canNest) {
-    return (canNest &&
-        highlighThisNode(node, highlitedNode, validTarget) &&
-        propHelper.nestDisabled(node) !== true);
-}
-/**
- * returns true, it should highlight nesting on this node
- * @param node node
- * @param highlitedNode highlited node
- * @param validTarget valid target
- * @param canNest can nest
- */
-function highlightInsert(node, highlitedNode, validTarget, canNest) {
-    return (!canNest &&
-        highlighThisNode(node, highlitedNode, validTarget) &&
-        propHelper.insertDisabled(node) !== true);
-}
-//#endregion
+// //#region drag and drop
+// function handleDragStart(e: DragEvent, node: Node) {
+// 	// dont allos drag if is draggable is false
+// 	if (propHelper.isDraggable(node) === false) {
+// 		e.preventDefault();
+// 		return;
+// 	}
+// 	console.log('dragstart from: ' + helper.path(node));
+// 	//@ts-ignore
+// 	e.dataTransfer.dropEffect = 'move';
+// 	//@ts-ignore
+// 	e.dataTransfer.setData('node_id', helper.path(node));
+// 	draggedPath = helper.path(node);
+// }
+// function handleDragDrop(e: DragEvent, node: Node, el: HTMLElement) {
+// 	//should be necesary but just in case
+// 	highlightedNode = null;
+// 	if (readonly || !dragAndDrop) return;
+// 	//@ts-ignore
+// 	draggedPath = e.dataTransfer.getData('node_id');
+// 	console.log(draggedPath + ' dropped on: ' + helper.path(node));
+// 	//important to check if timetonest is set, otherwise you could spend 30 minutes fixing this shit :)
+// 	if (timeToNest) {
+// 		const nowTimestamp = new Date();
+// 		canNestTime =
+// 			(dragenterTimestamp ? nowTimestamp.getTime() - dragenterTimestamp.getTime() : 1) >
+// 			timeToNest;
+// 	}
+// 	let newNode = helper.findNode(tree, draggedPath);
+// 	let oldNode = { ...(newNode as any) };
+// 	let oldParent = helper.findNode(tree, helper.getParentNodePath(draggedPath));
+// 	let insType = canNest ? 0 : helper.dragDrop.getInsertionPosition(e, el);
+// 	//cancel move if its not valid
+// 	if (insType == 0 && propHelper.nestDisabled(node) === true) return;
+// 	else if ((insType == -1 || insType == 1) && propHelper.insertDisabled(node) === true) return;
+// 	//callback can cancell move
+// 	if (
+// 		beforeMovedCallback &&
+// 		beforeMovedCallback(oldNode, oldParent, node, helper.dragDrop.huminifyInsType(insType)) ===
+// 			false
+// 	)
+// 		return;
+// 	tree = helper.dragDrop.moveNode(
+// 		tree,
+// 		draggedPath,
+// 		helper.path(node),
+// 		insType,
+// 		recalculateNodePath
+// 	);
+// 	let newParent = helper.findNode(tree, helper.getParentNodePath(helper.path(newNode))) ?? null;
+// 	dispatch('moved', {
+// 		oldParent: oldParent,
+// 		newParent: newParent,
+// 		oldNode: oldNode,
+// 		newNode: newNode,
+// 		targetNode: node,
+// 		insType: helper.dragDrop.huminifyInsType(insType)
+// 	});
+// 	//reset props
+// 	dragenterTimestamp = null;
+// 	draggedPath = null;
+// 	highlightedNode = null;
+// }
+// function handleDragOver(e: DragEvent, node: Node, el: HTMLElement) {
+// 	insPos = helper.dragDrop.getInsertionPosition(e, el);
+// 	//if you are further away from right then treshold allow nesting
+// 	// @ts-ignore
+// 	let diff = e.x - e.target?.getBoundingClientRect()?.x;
+// 	if (pixelNestTreshold && diff > pixelNestTreshold) {
+// 		canNestPos = true;
+// 	} else {
+// 		canNestPos = false;
+// 	}
+// 	//allow drop if valid target
+// 	if (validTarget) e.preventDefault();
+// }
+// function handleDragEnter(e: DragEvent, node: Node, el: HTMLElement) {
+// 	setTimeout(() => {
+// 		insPos = helper.dragDrop.getInsertionPosition(e, el);
+// 		validTarget = true;
+// 		dragenterTimestamp = new Date();
+// 		// will cause flashing when moving wrom node to node while be able to nest
+// 		//* have to be here if you only use time
+// 		highlightedNode = node;
+// 		if (timeToNest) {
+// 			canNestTime = false;
+// 			//this is so that only one timeout is ticking at one time
+// 			clearTimeout(dragTimeout);
+// 			dragTimeout = setTimeout(() => {
+// 				canNestTime = true;
+// 			}, timeToNest);
+// 		}
+// 		//dont allow drop on child element and if both insertDisabled and nestDisabled to true
+// 		if (
+// 			helper.path(node)?.startsWith(draggedPath ?? '') ||
+// 			(propHelper.insertDisabled(node) === true && propHelper.nestDisabled(node) === true)
+// 		) {
+// 			validTarget = false;
+// 		}
+// 		//if defined calling callback
+// 		if (dragEnterCallback) {
+// 			//get node for event
+// 			let draggedNode = helper.findNode(tree, draggedPath ?? '');
+// 			let oldParent = helper.findNode(tree, helper.getParentNodePath(draggedPath ?? ''));
+// 			//callback returning false means that it isnt valid target
+// 			if (dragEnterCallback(draggedNode, oldParent, node) === false) {
+// 				validTarget = false;
+// 			}
+// 		}
+// 	}, 1);
+// 	e.preventDefault();
+// }
+// function handleDragEnd(e: DragEvent, node: Node) {
+// 	//reset prop on next tick
+// 	setTimeout(() => {
+// 		draggedPath = null;
+// 		highlightedNode = null;
+// 	}, 1);
+// }
+// function handleDragleave(e: DragEvent, node: Node, el: HTMLElement) {
+// 	// highlightedNode = null;
+// }
+// /**
+//  *check if this node is one being hovered over (highlited) and is valid target
+//  */
+// function highlighThisNode(node: Node, highlitedNode: Node, validTarget: boolean) {
+// 	return validTarget && helper.path(highlitedNode) == helper.path(node);
+// }
+// /**
+//  * returns true, it should highlight nesting on this node
+//  * @param node node
+//  * @param highlitedNode highlited node
+//  * @param validTarget valid target
+//  * @param canNest can nest
+//  */
+// function highlightNesting(
+// 	node: Node,
+// 	highlitedNode: Node,
+// 	validTarget: boolean,
+// 	canNest: boolean
+// ) {
+// 	return (
+// 		canNest &&
+// 		highlighThisNode(node, highlitedNode, validTarget) &&
+// 		propHelper.nestDisabled(node) !== true
+// 	);
+// }
+// /**
+//  * returns true, it should highlight nesting on this node
+//  * @param node node
+//  * @param highlitedNode highlited node
+//  * @param validTarget valid target
+//  * @param canNest can nest
+//  */
+// function highlightInsert(
+// 	node: Node,
+// 	highlitedNode: Node,
+// 	validTarget: boolean,
+// 	canNest: boolean
+// ) {
+// 	return (
+// 		!canNest &&
+// 		highlighThisNode(node, highlitedNode, validTarget) &&
+// 		propHelper.insertDisabled(node) !== true
+// 	);
+// }
+// //#endregion
 </script>
 
 <Branch
@@ -410,7 +431,10 @@ function highlightInsert(node, highlitedNode, validTarget, canNest) {
 	</svelte:fragment>
 </ContextMenu>
 
-<style global>:global(.treeview.show-lines) :global(ul:before) {
+<style global>:global(.treeview) {
+  padding: 0;
+}
+:global(.treeview.show-lines) :global(ul:before) {
   border-left: solid black 1px;
 }
 :global(.treeview.show-lines) :global(ul) :global(li:before) {

package/dist/TreeView.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         /**
              * Array of nodes that represent tree structure.
              * Each node should have unique path
-             * All tree modifications are node by modyfing this array, so you need to bind it to parent component
+             * All tree modifications are made by modifying this array, so you need to bind it to parent component
              */ tree: Node[];
         /**
              * Object properties where information about node is stored
@@ -82,7 +82,6 @@ declare const __propDef: {
         selection: CustomEvent<any>;
         selected: CustomEvent<any>;
         unselected: CustomEvent<any>;
-        moved: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/constants.d.ts

@@ -1,4 +1,5 @@
-import type { CustomizableClasses, Props } from './types.js';
+import { type HelperConfig, type CustomizableClasses, type Props } from './types.js';
 export declare const defaultPropNames: Props;
 export declare const defaultPixelTreshold = 50;
 export declare const defaultClasses: CustomizableClasses;
+export declare const defaultConfig: HelperConfig;

package/dist/constants.js

@@ -1,3 +1,4 @@
+import { SelectionModes } from './types.js';
 export const defaultPropNames = {
     nodePath: 'nodePath',
     hasChildren: 'hasChildren',
@@ -22,3 +23,7 @@ export const defaultClasses = {
     inserLineClass: '',
     inserLineNestClass: ''
 };
+export const defaultConfig = {
+    separator: '.',
+    checkboxes: SelectionModes.none
+};

package/dist/helpers/tree-helper.d.ts

@@ -1,34 +1,34 @@
-import { SelectionHelper } from './selection-helpers.js';
-import { DragAndDropHelper } from './drag-drop-helpers.js';
-import type { Node, NodePath, HelperConfig } from '../types.js';
+import type { Node, NodePath, HelperConfig, Tree } from '../types.js';
 import type { PropertyHelper } from './property-helper.js';
 export declare class TreeHelper {
     props: PropertyHelper;
     config: HelperConfig;
-    selection: SelectionHelper;
-    dragDrop: DragAndDropHelper;
     constructor(props: PropertyHelper, config?: HelperConfig);
     path(node: Node | null): NodePath;
     getParentNodePath(nodePath: NodePath): NodePath;
     isChildrenOf(parentNodePath: NodePath, childrenNodePath: NodePath): boolean | undefined;
-    hasChildren(tree: Node[], nodePath: NodePath): unknown;
-    findNode(tree: Node[], nodePath: NodePath): Node;
+    hasChildren(tree: Tree, nodePath: NodePath): unknown;
+    findNode(tree: Tree, nodePath: NodePath): Node;
     nodePathIsChild(nodePath: NodePath): boolean | undefined;
-    getDirectChildren(tree: Node[], parentNodePath: NodePath): unknown[];
-    allCHildren(tree: Node[], parentNodePath: NodePath): unknown[];
-    getAllLeafNodes(tree: Node[]): unknown[];
-    joinTrees(filteredTree: Node[], tree: Node[]): unknown[];
-    mergeTrees(oldTree: Node[], addedTree: Node[], nodePath?: string): unknown[];
+    getDirectChildren(tree: Tree, parentNodePath: NodePath): Tree;
+    allCHildren(tree: Tree, parentNodePath: NodePath): unknown[];
+    getAllLeafNodes(tree: Tree): unknown[];
+    joinTrees(filteredTree: Tree, tree: Tree): unknown[];
+    mergeTrees(oldTree: Tree, addedTree: Tree, nodePath?: string): unknown[];
     /** toggles expansion on
      */
-    changeExpansion(tree: Node[], node: Node, changeTo: boolean): void;
+    changeExpansion(tree: Tree, node: Node, changeTo: boolean): void;
     /** changes expansion of every node that has this.hasChildren set to true
      */
-    changeEveryExpansion(tree: Node[], changeTo: boolean): unknown[];
+    changeEveryExpansion(tree: Tree, changeTo: boolean): unknown[];
     /** changes expansion of every node that has this.hasChildren set to true if they are abose set level and expansion property isnt set
      */
-    expandToLevel(tree: Node[], level: number): unknown[];
+    expandToLevel(tree: Tree, level: number): unknown[];
     getDepthLevel(nodePath: NodePath): number;
-    searchTree(tree: Node[], filter: (node: unknown) => boolean): unknown[];
-    getParents(tree: Node[], node: Node): unknown[];
+    searchTree(tree: Tree, filter: (node: unknown) => boolean): unknown[];
+    getParents(tree: Tree, node: Node): unknown[];
+    /** orders nodes by priorityProp
+     */
+    orderByPriority(tree: Tree): Tree;
+    getNodeId(nodePath: NodePath): string | null;
 }

package/dist/helpers/tree-helper.js

@@ -1,17 +1,12 @@
 import orderBy from 'lodash.unionby'; // used by tree merge
 import uniqueBy from 'lodash.uniqby'; // used by tree merge
-import { SelectionHelper } from './selection-helpers.js';
-import { DragAndDropHelper } from './drag-drop-helpers.js';
+import { defaultConfig } from '../constants.js';
 export class TreeHelper {
     props;
     config;
-    selection;
-    dragDrop;
-    constructor(props, config = {}) {
+    constructor(props, config = defaultConfig) {
         this.props = props;
         this.config = config;
-        this.selection = new SelectionHelper(this, config?.recursive ?? false);
-        this.dragDrop = new DragAndDropHelper(this);
     }
     // replace with this.props.path
     path(node) {
@@ -47,7 +42,8 @@ export class TreeHelper {
         const children = (tree || []).filter((x) => !parentNodePath
             ? !this.nodePathIsChild(this.path(x))
             : this.getParentNodePath(this.path(x)) === parentNodePath);
-        return children;
+        const ordered = this.orderByPriority(children);
+        return ordered;
     }
     allCHildren(tree, parentNodePath) {
         const children = tree.filter((x) => this.isChildrenOf(parentNodePath, this.path(x)));
@@ -126,4 +122,18 @@ export class TreeHelper {
         const parentNodes = tree.filter((n) => parentsPaths.some((parentNodePath) => this.path(n) === parentNodePath));
         return parentNodes;
     }
+    /** orders nodes by priorityProp
+     */
+    orderByPriority(tree) {
+        // TODO investigata that it really works
+        tree.sort((a, b) => this.props.priority(b) ? this.props.priority(a) - this.props.priority(b) : 1);
+        return tree;
+    }
+    getNodeId(nodePath) {
+        if (nodePath == null) {
+            console.warn('getting node id of null node path');
+            return null;
+        }
+        return nodePath?.split(this.config.separator).slice(-1)[0];
+    }
 }

package/dist/{helpers/drag-drop-helpers.d.ts → providers/drag-drop-provider.d.ts}

@@ -1,7 +1,7 @@
-import type { PropertyHelper } from './property-helper.js';
-import type { TreeHelper } from './tree-helper.js';
-import type { InsertionType, Node, NodePath, Tree } from '../types.js';
-export declare class DragAndDropHelper {
+import type { PropertyHelper } from '../helpers/property-helper.js';
+import type { TreeHelper } from '../helpers/tree-helper.js';
+import { InsertionType, type Node, type NodePath, type Tree } from '../types.js';
+export declare class DragDropProvider {
     helper: TreeHelper;
     props: PropertyHelper;
     separator: string;
@@ -15,7 +15,7 @@ export declare class DragAndDropHelper {
      * @param {int} insType - if true, it will insert moved node as child of target node, if false, it will insert it bellow it in priority
      * @param {boolean} recalculateNodePath - wont recalculare id of moved node, used when last part of nodePath is always unique
      */
-    moveNode(tree: Node[], movedNodePath: NodePath, targetNodePath: NodePath, insType: -1 | 0 | 1, recalculateNodePath: boolean): Node[];
+    moveNode(tree: Node[], movedNodePath: NodePath, targetNodePath: NodePath, insType: InsertionType, recalculateNodePath: boolean): Node[];
     calculateNewNodePath(tree: Tree, parentNodePath: NodePath, movedNodePath: NodePath, recalculateNodePath: boolean): string;
     updatePriority(tree: Tree, node: Node, parentNodePath: NodePath, newNodePath: NodePath, targetNode: Node, insType: InsertionType): void;
     /** recomputes all priorities after inserted priority.F
@@ -23,10 +23,6 @@ export declare class DragAndDropHelper {
      */
     recalculatesPriorities(tree: Tree, parentNode: NodePath, movedNodePath: NodePath, insertedPriority?: number): void;
     /** return biggest value of nodepath number that children are using +1 */
-    getNextNodeId(tree: Tree, parentPath: NodePath): number;
+    getNextNodeId(tree: Tree, parentPath: NodePath): string;
     getInsertionPosition(e: DragEvent, element: HTMLElement): InsertionType;
-    huminifyInsType(insType: InsertionType): string;
-    /** orders nodes by priorityProp
-     */
-    OrderByPriority(tree: Tree): Tree;
 }

package/dist/{helpers/drag-drop-helpers.js → providers/drag-drop-provider.js}

@@ -1,4 +1,5 @@
-export class DragAndDropHelper {
+import { InsertionType } from '../types.js';
+export class DragDropProvider {
     helper;
     props;
     separator;
@@ -22,7 +23,7 @@ export class DragAndDropHelper {
         // 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
@@ -66,7 +67,7 @@ export class DragAndDropHelper {
         const oldIndex = tree.findIndex((x) => this.path(x) == newNodePath);
         tree.splice(oldIndex, 1);
         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
         //hide plus icon if parent of moved node doesnt have any more children
         const oldParent = this.helper.findNode(tree, this.helper.getParentNodePath(movedNodePath));
@@ -85,18 +86,20 @@ export class DragAndDropHelper {
         }
         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;
+        return `${parentNodePath}${this.separator}${nodeId}`;
     }
     updatePriority(tree, node, parentNodePath, newNodePath, targetNode, insType) {
-        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 {
@@ -117,7 +120,7 @@ export class DragAndDropHelper {
     //? maybe it will recalculate properly if dont set insertedPriority
     recalculatesPriorities(tree, parentNode, movedNodePath, insertedPriority = -1) {
         let nextPriority = insertedPriority + 1;
-        this.OrderByPriority(this.helper.allCHildren(tree, parentNode)).forEach((node) => {
+        this.helper.orderByPriority(this.helper.allCHildren(tree, parentNode)).forEach((node) => {
             if (this.props.priority(node) >= insertedPriority && this.path(node) != movedNodePath) {
                 this.props.setPriority(node, nextPriority++);
             }
@@ -134,31 +137,14 @@ export class DragAndDropHelper {
                 max = Math.max(max, num);
             }
         });
-        return max + 1;
+        return (max + 1).toString();
     }
     getInsertionPosition(e, element) {
         const targetCords = element.getBoundingClientRect();
         const half = targetCords.bottom - targetCords.height / 2;
         if (e.y < half) {
-            return 1;
+            return InsertionType.below;
         }
-        return -1;
-    }
-    huminifyInsType(insType) {
-        switch (insType) {
-            case 1:
-                return 'before';
-            case 0:
-                return 'inside';
-            case -1:
-                return 'after';
-        }
-    }
-    /** orders nodes by priorityProp
-     */
-    OrderByPriority(tree) {
-        // TODO investigata that it really works
-        tree.sort((a, b) => this.props.priority(b) ? this.props.priority(a) - this.props.priority(b) : 1);
-        return tree;
+        return InsertionType.above;
     }
 }

package/dist/{helpers/selection-helpers.d.ts → providers/selection-provider.d.ts}

@@ -1,7 +1,7 @@
-import type { PropertyHelper } from './property-helper.js';
-import type { TreeHelper } from './tree-helper.js';
+import type { PropertyHelper } from '../helpers/property-helper.js';
+import type { TreeHelper } from '../helpers/tree-helper.js';
 import { SelectionModes, type Node, type NodePath, type Tree } from '../types.js';
-export declare class SelectionHelper {
+export declare class SelectionProvider {
     helper: TreeHelper;
     props: PropertyHelper;
     recursiveMode: boolean;

package/dist/{helpers/selection-helpers.js → providers/selection-provider.js}

@@ -1,5 +1,5 @@
 import { SelectionModes, VisualStates } from '../types.js';
-export class SelectionHelper {
+export class SelectionProvider {
     helper;
     props;
     recursiveMode;

package/dist/stores/drag-and-drop-store.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+import type { TreeHelper } from '../helpers/tree-helper.js';
+import { type BeforeMovedCallback, type DragEnterCallback, HighlighType } from '../types.js';
+import { type Readable } from 'svelte/store';
+type dragConfig = {
+    dragEnterCallback: DragEnterCallback | null;
+    beforeMovedCallback: BeforeMovedCallback | null;
+};
+export declare function startDrag(config: dragConfig): {
+    highligh(helper: TreeHelper, node: Node): Readable<HighlighType>;
+    isDragged(helper: TreeHelper, node: Node): Readable<boolean>;
+};
+export {};

package/dist/stores/drag-and-drop-store.js

@@ -0,0 +1,23 @@
+import { HighlighType } from '../types.js';
+import { derived, writable } from 'svelte/store';
+const storeDefaults = {
+    dragging: false,
+    x: 0,
+    y: 0
+};
+export function startDrag(config) {
+    const draggedNodeStore = writable(null);
+    return {
+        highligh(helper, node) {
+            // forces update when gragged nodes is changed
+            return derived([draggedNodeStore], ([store]) => {
+                return HighlighType.none;
+            });
+        },
+        isDragged(helper, node) {
+            return derived([draggedNodeStore], ([draggedNode]) => {
+                return helper.path(node) === helper.path(draggedNode);
+            });
+        }
+    };
+}

package/dist/tree-styles.sass

@@ -1,6 +1,7 @@
 
 $treeview-lines: solid black 1px
 .treeview
+  padding: 0
   //will show lines if you set show-lines to root element
   &.show-lines
     ul

package/dist/types.d.ts

@@ -23,7 +23,11 @@ export declare enum SelectionModes {
 }
 export type Node = unknown;
 export type Tree = Node[];
-export type InsertionType = -1 | 0 | 1;
+export declare enum InsertionType {
+    above = "above",
+    below = "below",
+    nest = "nest"
+}
 export type NodePath = string | null;
 export type CustomizableClasses = {
     treeClass: string;
@@ -39,8 +43,14 @@ export type DragEnterCallback = (draggendNode: Node, oldParent: Node, newParent:
 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;
 };
+export declare enum HighlighType {
+    nest = "nest",
+    insertAbove = "insert-above",
+    insertBelow = "insert-below",
+    none = "none"
+}

package/dist/types.js

@@ -10,3 +10,16 @@ export var SelectionModes;
     SelectionModes["perNode"] = "perNode";
     SelectionModes["none"] = "none";
 })(SelectionModes || (SelectionModes = {}));
+export var InsertionType;
+(function (InsertionType) {
+    InsertionType["above"] = "above";
+    InsertionType["below"] = "below";
+    InsertionType["nest"] = "nest";
+})(InsertionType || (InsertionType = {}));
+export var HighlighType;
+(function (HighlighType) {
+    HighlighType["nest"] = "nest";
+    HighlighType["insertAbove"] = "insert-above";
+    HighlighType["insertBelow"] = "insert-below";
+    HighlighType["none"] = "none";
+})(HighlighType || (HighlighType = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "0.3.5",
+	"version": "0.3.6",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -53,7 +53,7 @@
 		"svelte-multiselect": "github:KeenMate/svelte-multiselect",
 		"svelte-preprocess": "^5.0.4",
 		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
+		"typescript": "^5.4.4",
 		"vite": "^4.3.6",
 		"vitest": "^1.4.0"
 	},