@keenmate/svelte-treeview 1.0.0-beta.1 → 1.0.0-beta.3

package/README.md

@@ -5,34 +5,34 @@ 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
+- drag and drop functionality controlable per node
+- context menu
 
 ## Instalation
 
 install the package `@keenmate/svelte-treeview` using your favourite package manager.
 
-Font awesome is required for expand/collapse icons.
+**Font awesome is required for expand/collapse icons.**
 
 ## Minimal usage
 
-
 ```svelte
 <script lang="ts">
-	import { TreeView } from '$lib/index.js';
+ import { TreeView } from '$lib/index.js';
 
-	let tree = [
-		{ nodePath: 'animals', title: 'Animals', hasChildren: true },
+ let tree = [
+  { nodePath: 'animals', title: 'Animals', hasChildren: true },
     //...
-		{ nodePath: 'animals.insects.butterflies', title: 'Butterflies' }
-	];
+  { nodePath: 'animals.insects.butterflies', title: 'Butterflies' }
+ ];
 </script>
 
 <TreeView {tree} treeId="my-tree" let:node>
-	{node.title}
+ {node.title}
 </TreeView>
 
 ```

package/dist/Branch.svelte

@@ -14,13 +14,11 @@ export let readonly;
 export let expandTo;
 export let classes;
 export let helper;
-export let draggedPath;
-export let highlightedNode;
 export let childDepth;
 export let branchRootNode;
-export let canNest;
-export let validTarget;
-export let insPos;
+export let draggedNode;
+export let highlightedNode;
+export let insertionType;
 const getNodeId = (node) => `${treeId}-${node.path}`;
 function setExpansion(node, changeTo) {
     dispatch('internal-expand', { node: node, changeTo });
@@ -42,10 +40,10 @@ function handleDragStart(e, node) {
     dispatch('internal-handleDragStart', { node: node, e: e });
 }
 function handleDragDrop(e, node, el) {
-    dispatch('internal-handleDragStart', { node: node, event: e, element: el });
+    dispatch('internal-handleDragDrop', { node: node, event: e, element: el });
 }
-function handleDragOver(e, node, el) {
-    dispatch('internal-handleDragOver', { node: node, event: e, element: el });
+function handleDragOver(e, node, el, nest) {
+    dispatch('internal-handleDragOver', { node: node, event: e, element: el, nest });
 }
 function handleDragEnter(e, node, el) {
     dispatch('internal-handleDragEnter', { node: node, event: e, element: el });
@@ -56,36 +54,13 @@ function handleDragEnd(e, node) {
 function handleDragLeave(e, node, el) {
     dispatch('internal-handleDragLeave', { node: node, event: e, element: el });
 }
-/**
- *check if this node is one being hovered over (highlited) and is valid target
- */
-function highlighThisNode(node, highlitedNode, validTarget) {
-    return validTarget && highlitedNode.path == node.path;
-}
-/**
- * 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) {
-    if (!highlitedNode)
-        return false;
-    return (canNest && highlighThisNode(node, highlitedNode, validTarget) && node.nestDisabled !== 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) {
-    if (!highlitedNode)
-        return false;
-    return (!canNest && highlighThisNode(node, highlitedNode, validTarget) && node.nestDisabled !== true);
+function getHighlighMode(node, highlightedNode, insertionType) {
+    // return InsertionType.insertAbove;
+    if (highlightedNode?.path !== node.path)
+        return InsertionType.none;
+    return insertionType;
 }
+// TODO maybe this can be removed?
 let liElements = {};
 </script>
 
@@ -95,27 +70,24 @@ let liElements = {};
 	class={childDepth === 0 ? classes.treeClass : ''}
 >
 	{#each helper.getDirectChildren(tree, branchRootNode?.path ?? null) as node (getNodeId(node))}
-		{@const nesthighlighed = highlightNesting(node, highlightedNode, validTarget, canNest)}
-		{@const insertHighlighted = highlightInsert(node, highlightedNode, validTarget, canNest)}
 		{@const expanded = isExpanded(node, childDepth, expandTo)}
-		{@const hasChildren = node.hasChildren}
-		{@const draggable = !readonly && dragAndDrop && node.isDraggable}
-		{@const isCurrentlyDragged =
-			draggedPath == node.path || (draggedPath && node.path?.startsWith(draggedPath))}
-
+		{@const draggable = !readonly && dragAndDrop && !node.dragDisabled}
+		{@const isCurrentlyDragged = draggedNode && node.path.startsWith(draggedNode?.path)}
+		{@const effectiveHighlight = getHighlighMode(node, highlightedNode, insertionType)}
 		<li
 			class:is-child={helper.nodePathIsChild(node.path)}
-			class:has-children={hasChildren}
+			class:has-children={node.hasChildren}
 			on:contextmenu|stopPropagation={(e) => {
 				dispatch('open-ctxmenu', { e: e, node: Node });
 			}}
 			on:drop|stopPropagation={(e) => handleDragDrop(e, node, liElements[getNodeId(node)])}
-			on:dragover|stopPropagation={(e) => handleDragOver(e, node, liElements[getNodeId(node)])}
+			on:dragover|stopPropagation={(e) =>
+				handleDragOver(e, node, liElements[getNodeId(node)], false)}
 			on:dragenter|stopPropagation={(e) => handleDragEnter(e, node, liElements[getNodeId(node)])}
 			on:dragleave|stopPropagation={(e) => handleDragLeave(e, node, liElements[getNodeId(node)])}
 			bind:this={liElements[getNodeId(node)]}
 		>
-			{#if insPos == InsertionType.above && insertHighlighted}
+			{#if effectiveHighlight == InsertionType.insertAbove}
 				<div class="insert-line-wrapper">
 					<div class="insert-line {classes.inserLineClass}" />
 				</div>
@@ -124,26 +96,24 @@ let liElements = {};
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 			<div
 				class="tree-item
-				{nesthighlighed ? classes.expandClass : ''}
+				{effectiveHighlight === InsertionType.nest ? classes.expandClass : ''}
 				{classes.nodeClass} {isCurrentlyDragged ? classes.currentlyDraggedClass : ''}"
-				class:div-has-children={hasChildren}
-				class:hover={insertHighlighted || nesthighlighed}
+				class:div-has-children={node.hasChildren}
+				class:hover={effectiveHighlight !== InsertionType.none}
 				{draggable}
 				on:dragstart={(e) => handleDragStart(e, node)}
 				on:dragend={(e) => handleDragEnd(e, node)}
 			>
-				{#if hasChildren}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<span on:click={() => setExpansion(node, !expanded)}>
-						<!-- use callback overrides expanded  -->
-						<i
-							class="far {expanded ? classes.expandedToggleClass : classes.collapsedToggleClass}"
-							class:fa-minus-square={expanded}
-							class:fa-plus-square={!expanded || node.useCallback}
-						/>
-					</span>
+				{#if node.hasChildren}
+					<button
+						class="expansion-button"
+						on:click={() => setExpansion(node, !expanded)}
+						type="button"
+					>
+						<i class="fa-fw {expanded ? classes.collapseIcon : classes.expandIcon}" />
+					</button>
 				{:else}
-					<span />
+					<span class="fa-fw" />
 				{/if}
 
 				<Checkbox
@@ -158,16 +128,21 @@ let liElements = {};
 				<span class:pointer-cursor={draggable}>
 					<slot node={node.originalNode} />
 				</span>
-			</div>
 
-			{#if nesthighlighed}
-				<div class="insert-line-wrapper">
-					<div
-						class="insert-line insert-line-child {classes.inserLineClass} {classes.inserLineNestClass}"
-					/>
-				</div>
-			{/if}
-			{#if expanded && hasChildren}
+				{#if dragAndDrop && node.nestAllowed}
+					<span
+						on:dragover|stopPropagation={(e) =>
+							handleDragOver(e, node, liElements[getNodeId(node)], true)}
+					>
+						<i class="fa-fw {classes.nestIcon}" />
+
+						{#if effectiveHighlight === InsertionType.nest}
+							<slot name="nest-highlight" />
+						{/if}
+					</span>
+				{/if}
+			</div>
+			{#if expanded && node.hasChildren}
 				<svelte:self
 					branchRootNode={node}
 					childDepth={childDepth + 1}
@@ -181,26 +156,33 @@ let liElements = {};
 					{onlyLeafCheckboxes}
 					{hideDisabledCheckboxes}
 					{expandTo}
-					{draggedPath}
 					{dragAndDrop}
 					{verticalLines}
-					{canNest}
-					{insPos}
-					{validTarget}
+					{draggedNode}
 					{highlightedNode}
+					{insertionType}
 					on:open-ctxmenu
 					on:internal-expand
 					on:internal-selectionChanged
+					on:internal-handleDragStart
+					on:internal-handleDragDrop
+					on:internal-handleDragOver
+					on:internal-handleDragEnter
+					on:internal-handleDragEnd
+					on:internal-handleDragLeave
 					let:node={nodeNested}
 				>
 					<slot node={nodeNested} />
+					<svelte:fragment slot="nest-highlight">
+						<slot name="nest-highlight" />
+					</svelte:fragment>
 				</svelte:self>
 			{/if}
-			{#if !expanded && hasChildren}
+			{#if !expanded && node.hasChildren}
 				<ul class:child-menu={childDepth > 0} />
 			{/if}
 			<!-- Show line if insering -->
-			{#if insPos === InsertionType.below && insertHighlighted}
+			{#if effectiveHighlight === InsertionType.insertBelow}
 				<div class="insert-line-wrapper">
 					<div class="insert-line {classes.inserLineClass}" />
 				</div>

package/dist/Branch.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
-import { SelectionModes, InsertionType, type Node } from './types.js';
-import type { CustomizableClasses, TreeHelper } from './index.js';
+import { SelectionModes, InsertionType, type Node, type CustomizableClasses } from './types.js';
+import type { TreeHelper } from './helpers/tree-helper.js';
 declare const __propDef: {
     props: {
         tree: Node[];
@@ -15,19 +15,18 @@ declare const __propDef: {
         expandTo: number;
         classes: CustomizableClasses;
         helper: TreeHelper;
-        draggedPath: string | null;
-        highlightedNode: Node | null;
         childDepth: number;
         branchRootNode: Node | null;
-        canNest: boolean;
-        validTarget: boolean;
-        insPos: InsertionType;
+        draggedNode: Node | null;
+        highlightedNode: Node | null;
+        insertionType: InsertionType;
     };
     events: {
         'open-ctxmenu': CustomEvent<any>;
         'internal-expand': CustomEvent<any>;
         'internal-selectionChanged': CustomEvent<any>;
         'internal-handleDragStart': CustomEvent<any>;
+        'internal-handleDragDrop': CustomEvent<any>;
         'internal-handleDragOver': CustomEvent<any>;
         'internal-handleDragEnter': CustomEvent<any>;
         'internal-handleDragEnd': CustomEvent<any>;
@@ -39,6 +38,7 @@ declare const __propDef: {
         default: {
             node: any;
         };
+        'nest-highlight': {};
     };
 };
 export type BranchProps = typeof __propDef.props;

package/dist/Checkbox.svelte

@@ -8,8 +8,10 @@ export let onlyLeafCheckboxes;
 export let hideDisabledCheckboxes;
 export let readonly = false;
 const dispatch = createEventDispatcher();
-function onSelect(node) {
+function onSelect(e, node) {
+    // e.preventDefault();
     dispatch('select', { node });
+    return false;
 }
 </script>
 
@@ -18,7 +20,8 @@ function onSelect(node) {
 		{#if !recursive || (recursive && !node.hasChildren) || !onlyLeafCheckboxes}
 			<input
 				type="checkbox"
-				on:change={() => onSelect(node)}
+				on:click={(e) => onSelect(e, node)}
+				on:keypress={(e) => e.key === 'Enter' && onSelect(e, node)}
 				checked={node.visualState === VisualState.selected}
 				indeterminate={node.visualState === VisualState.indeterminate}
 				disabled={readonly}

package/dist/TreeView.svelte

@@ -1,10 +1,11 @@
-<script generics="T">import ContextMenu from './menu/ContextMenu.svelte';
-import { createEventDispatcher, onMount } from 'svelte';
-import { defaultClasses, defaultPixelTreshold, defaultPropNames } from './constants.js';
-import { SelectionModes as SelectionModes, VisualState } from './types.js';
+<script>import ContextMenu from './menu/ContextMenu.svelte';
+import { createEventDispatcher } from 'svelte';
+import { defaultClasses, defaultPropNames } from './constants.js';
+import { SelectionModes as SelectionModes, InsertionType } from './types.js';
 import { TreeHelper } from './index.js';
 import Branch from './Branch.svelte';
 import { SelectionProvider } from './providers/selection-provider.js';
+import { DragDropProvider } from './providers/drag-drop-provider.js';
 const dispatch = createEventDispatcher();
 export let treeId;
 /**
@@ -76,8 +77,7 @@ export let expandTo = 0;
  * 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 = defaultClasses;
-// use any so use doesnt have to cast from unknown
+export let customClasses = {};
 /**
  * Function used to filter what nodes should be shown.
  * Tree automatically adds all parents for nodes.
@@ -91,43 +91,54 @@ export let filter = null;
  * Used mostly for debugging
  */
 export let logger = null;
-// props for drag and drop
+// TODO rewrite documentation
+/*
+ * Drag and drop mode allows all nodes, that dont have dragDisabled property set to true
+ * to be dragged and dropped. By default you can only insert at same level node you are dropping on,
+ * but you can allow nesting by setting nestAllowed to true on node. If you want to disable insertion,
+ * set dropDisabled to true on node. if both is disabled, you wont be able to drop on node.
+ */
 export let dragAndDrop = false; //bool
-export let timeToNest = null;
-export let pixelNestTreshold = defaultPixelTreshold;
-export let recalculateNodePath = true;
-export let dragEnterCallback = null;
-export let beforeMovedCallback = null;
+/**
+ * Callback that will be called when user drags above node.
+ * It should return true, if drop is disabled on that node.
+ */
+export let dropDisabledCallback = null;
 let ctxMenu;
 let expandedIds = [];
-// OLD variables, will be removed/changed in future
-let draggedPath = null;
+let draggedNode = null;
 let highlightedNode = null;
-let canNest = false;
-let validTarget = false;
-let insPos;
+let insertionType = InsertionType.none;
+$: computedClasses = { ...defaultClasses, ...(customClasses ?? {}) };
 $: dragAndDrop && console.warn('Drag and drop is not supported in this version');
 $: helper = new TreeHelper({
     separator
 });
+$: dragAndDropProvider = new DragDropProvider(helper);
 $: selectionProvider = new SelectionProvider(helper, recursiveSelection);
 $: computedTree = computeTree(helper, selectionProvider, tree, filter, props, expandedIds, value);
 $: debugLog('computedTree', computedTree);
 export function changeAllExpansion(changeTo) {
     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(helper, selectionProvider, userProvidedTree, filter, props, expandedIds, value) {
     if (!Array.isArray(userProvidedTree) || !Array.isArray(value)) {
         console.error('value and tree must be arrays!!');
         return [];
     }
-    let mappedTree = helper.mapTree(userProvidedTree, filter, { ...defaultPropNames, ...props });
-    helper.markExpanded(mappedTree, expandedIds);
+    const mappedTree = helper.mapTree(userProvidedTree, { ...defaultPropNames, ...props });
+    const filteredTree = helper.searchTree(mappedTree, filter);
+    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);
-    return mappedTree;
+    selectionProvider.markSelected(filteredTree, value);
+    return filteredTree;
 }
 function onExpand(event) {
     const { node, changeTo } = event.detail;
@@ -160,6 +171,7 @@ function handleCallback(node) {
     }
     debugLog('calling callback for node', node);
     // TODO mark node as loaded and dont call callback again
+    // this is now responsibility of user
     loadChildrenAsync(node);
 }
 function onSelectionChanged(event) {
@@ -187,6 +199,69 @@ function openContextMenu(ce) {
     e.preventDefault();
     ctxMenu.onRightClick(e, node);
 }
+function onDragStart(event) {
+    const { node, e } = event.detail;
+    draggedNode = null;
+    if (!dragAndDrop || node.dragDisabled) {
+        return;
+    }
+    draggedNode = node;
+}
+function onDragEnd({ detail: { node, event, element } }) {
+    // fires when you stop dragging element
+    draggedNode = null;
+    highlightedNode = null;
+}
+function onDragDrop({ detail: { node, event, element } }) {
+    // here we asume that highlightType is correctly calculated in handleDragOver
+    if (!dragAndDrop || draggedNode === null || insertionType === InsertionType.none) {
+        event.preventDefault();
+        return;
+    }
+    highlightedNode = null;
+    debugLog('DROPPED: ', draggedNode, 'on', node);
+    dispatch('moved', {
+        node: draggedNode,
+        target: node,
+        insertType: insertionType
+    });
+}
+// handle highlihting
+function onDragEnter({ detail: { node, event, element } }) {
+    highlightedNode = null;
+    if (!draggedNode || !dragAndDrop) {
+        return;
+    }
+    // static rules
+    if (!dragAndDropProvider.isDropAllowed(draggedNode, node)) {
+        return;
+    }
+    if (typeof dropDisabledCallback === 'function') {
+        // possible bug, if the promise is resolved, when user is over another node
+        dropDisabledCallback(draggedNode, node).then((dropDisabled) => {
+            if (!dropDisabled) {
+                highlightedNode = node;
+            }
+        });
+    }
+    else {
+        highlightedNode = node;
+    }
+}
+function onDragOver({ detail: { node, event, element, nest } }) {
+    if (!dragAndDrop || draggedNode === null || node.dropDisabled) {
+        return;
+    }
+    const insertType = dragAndDropProvider.getInsertionPosition(draggedNode, node, event, element, nest);
+    if (insertType === InsertionType.none) {
+        return;
+    }
+    event.preventDefault();
+    insertionType = insertType;
+}
+function onDragLeave({ detail: { node, event, element } }) {
+    insertionType = InsertionType.none;
+}
 function debugLog(...data) {
     if (logger) {
         logger(...data);
@@ -203,25 +278,31 @@ function debugLog(...data) {
 	{onlyLeafCheckboxes}
 	{hideDisabledCheckboxes}
 	{expandTo}
-	{draggedPath}
 	{dragAndDrop}
-	{highlightedNode}
 	{readonly}
 	{helper}
-	classes={customClasses}
+	classes={computedClasses}
 	{verticalLines}
 	on:open-ctxmenu={openContextMenu}
 	on:internal-expand={onExpand}
 	on:internal-selectionChanged={onSelectionChanged}
 	let:node={nodeInSlot}
 	childDepth={0}
-	{canNest}
-	{validTarget}
-	{insPos}
+	{insertionType}
+	{highlightedNode}
+	{draggedNode}
+	on:internal-handleDragStart={onDragStart}
+	on:internal-handleDragDrop={onDragDrop}
+	on:internal-handleDragOver={onDragOver}
+	on:internal-handleDragEnter={onDragEnter}
+	on:internal-handleDragEnd={onDragEnd}
+	on:internal-handleDragLeave={onDragLeave}
 >
 	<slot node={nodeInSlot} />
+	<svelte:fragment slot="nest-highlight">
+		<slot name="nest-highlight" />
+	</svelte:fragment>
 </Branch>
-
 <ContextMenu bind:this={ctxMenu}>
 	<svelte:fragment let:node>
 		<slot name="context-menu" {node} />
@@ -285,9 +366,6 @@ function debugLog(...data) {
   font-weight: 700;
   position: relative;
 }
-:global(.treeview) :global(li:not(.has-children)) :global(.tree-item) {
-  margin-left: 14px;
-}
 :global(.treeview) :global(.tree-item) {
   display: flex;
   column-gap: 0.4em;
@@ -323,8 +401,7 @@ function debugLog(...data) {
   display: block;
   border-radius: 3px;
   margin-left: 28px;
-  margin-bottom: -2px;
-  margin-top: -2px;
+  pointer-events: none;
 }
 :global(.treeview) :global(.insert-line-child) {
   margin-left: calc(28px + 5em);
@@ -339,4 +416,7 @@ function debugLog(...data) {
 }
 :global(.treeview) :global(.pointer-cursor) {
   cursor: grab;
+}
+:global(.treeview) :global(.expansion-button) {
+  all: unset;
 }</style>

package/dist/TreeView.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
-import { SelectionModes as SelectionModes, type Props, type CustomizableClasses, type DragEnterCallback, type BeforeMovedCallback, type ExpandedCallback, type NodeId, type ProvidedTree, type FilterFunction } from './types.js';
-declare class __sveltets_Render<T> {
-    props(): {
+import { SelectionModes as SelectionModes, type Props, type CustomizableClasses, type DragEnterCallback, type ExpandedCallback, type NodeId, type ProvidedTree, type FilterFunction } from './types.js';
+declare const __propDef: {
+    props: {
         treeId: string;
         /**
              * Array of nodes that represent tree structure.
@@ -58,7 +58,7 @@ declare class __sveltets_Render<T> {
         /**
              * 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
-             */ customClasses?: CustomizableClasses | undefined;
+             */ customClasses?: Partial<CustomizableClasses> | undefined;
         /**
              * Function used to filter what nodes should be shown.
              * Tree automatically adds all parents for nodes.
@@ -71,14 +71,13 @@ declare class __sveltets_Render<T> {
              * Used mostly for debugging
              */ logger?: ((...data: any[]) => void) | null | undefined;
         dragAndDrop?: boolean | undefined;
-        timeToNest?: number | null | undefined;
-        pixelNestTreshold?: number | undefined;
-        recalculateNodePath?: boolean | undefined;
-        dragEnterCallback?: DragEnterCallback | null | undefined;
-        beforeMovedCallback?: BeforeMovedCallback | null | undefined;
+        /**
+             * Callback that will be called when user drags above node.
+             * It should return true, if drop is disabled on that node.
+             */ dropDisabledCallback?: DragEnterCallback | null | undefined;
         changeAllExpansion?: ((changeTo: boolean) => void) | undefined;
     };
-    events(): {
+    events: {
         expansion: CustomEvent<any>;
         expanded: CustomEvent<any>;
         closed: CustomEvent<any>;
@@ -86,22 +85,24 @@ declare class __sveltets_Render<T> {
         selection: CustomEvent<any>;
         selected: CustomEvent<any>;
         unselected: CustomEvent<any>;
+        moved: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {
+    slots: {
         default: {
             node: any;
         };
+        'nest-highlight': {};
         'context-menu': {
             node: any;
         };
     };
-}
-export type TreeViewProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TreeViewEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TreeViewSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class TreeView<T> extends SvelteComponent<TreeViewProps<T>, TreeViewEvents<T>, TreeViewSlots<T>> {
+};
+export type TreeViewProps = typeof __propDef.props;
+export type TreeViewEvents = typeof __propDef.events;
+export type TreeViewSlots = typeof __propDef.slots;
+export default class TreeView extends SvelteComponent<TreeViewProps, TreeViewEvents, TreeViewSlots> {
     get changeAllExpansion(): (changeTo: boolean) => void;
 }
 export {};

package/dist/constants.d.ts

@@ -1,5 +1,4 @@
-import { type HelperConfig, type CustomizableClasses, type Props } from './types.js';
+import type { HelperConfig, CustomizableClasses, 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,25 +1,23 @@
-import { SelectionModes } from './types.js';
 export const defaultPropNames = {
     nodePath: 'nodePath',
     nodeId: 'nodePath',
     hasChildren: 'hasChildren',
     useCallback: '__useCallback',
     priority: 'priority',
-    isDraggable: 'isDraggable',
+    dragDisabled: 'dragDisabled',
     insertDisabled: 'insertDisabled',
-    nestDisabled: 'nestDisabled',
+    nestAllowed: 'nestAllowed',
     checkbox: 'checkbox'
 };
-export const defaultPixelTreshold = 50;
 export const defaultClasses = {
     treeClass: 'treeview',
     expandClass: 'inserting-highlighted',
     currentlyDraggedClass: 'currently-dragged',
     nodeClass: '',
-    expandedToggleClass: '',
-    collapsedToggleClass: '',
+    expandIcon: 'far fa-fw fa-plus-square',
+    collapseIcon: 'far fa-fw fa-minus-square',
     inserLineClass: '',
-    inserLineNestClass: ''
+    nestIcon: 'fas fa-level-down-alt'
 };
 export const defaultConfig = {
     separator: '.'

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

@@ -1,16 +1,16 @@
-import { type Node, type NodePath, type HelperConfig, type Tree, type NodeId, type Props, type FilterFunction } from '../types.js';
+import { type Node, type HelperConfig, type Tree, type NodeId, type Props, type FilterFunction } from '../types.js';
 export declare class TreeHelper {
     config: HelperConfig;
     constructor(config?: HelperConfig);
-    mapTree(tree: Tree, filter: FilterFunction | null, properties: Props): Node[];
+    mapTree(tree: Tree, properties: Props): Node[];
     markExpanded(tree: Tree, expandedNodeIds: NodeId[]): void;
-    getParentNodePath(nodePath: NodePath): NodePath;
-    isChildrenOf(parentNodePath: NodePath, childrenNodePath: NodePath): boolean | undefined;
-    hasChildren(tree: Tree, nodePath: NodePath): Node | undefined;
-    findNode(tree: Tree, nodePath: NodePath): Node | null;
-    nodePathIsChild(nodePath: NodePath): boolean | undefined;
-    getDirectChildren(tree: Tree, parentNodePath: NodePath): Tree;
-    allCHildren(tree: Tree, parentNodePath: NodePath): Node[];
+    getParentNodePath(nodePath: string): string | null;
+    isChildrenOf(parentNodePath: string | null, childrenNodePath: string): boolean;
+    hasChildren(tree: Tree, nodePath: string): Node | undefined;
+    findNode(tree: Tree, nodePath: string): Node | null;
+    nodePathIsChild(nodePath: string): boolean;
+    getDirectChildren(tree: Tree, parentNodePath: string | null): Tree;
+    allCHildren(tree: Tree, parentNodePath: string | null): Node[];
     getAllLeafNodes(tree: Tree): Node[];
     joinTrees(filteredTree: Tree, tree: Tree): Node[];
     mergeTrees(oldTree: Tree, addedTree: Tree, nodePath?: string): Node[];
@@ -20,7 +20,7 @@ export declare class TreeHelper {
     /** 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: Tree, level: number): NodeId[];
-    getDepthLevel(nodePath: NodePath): number;
+    getDepthLevel(nodePath: string): number;
     searchTree(tree: Tree, filter: FilterFunction | null): Tree;
     getParents(tree: Tree, targetNode: Node): Node[];
     /** orders nodes by priorityProp

package/dist/helpers/tree-helper.js

@@ -7,25 +7,27 @@ export class TreeHelper {
     constructor(config = defaultConfig) {
         this.config = config;
     }
-    mapTree(tree, filter, properties) {
+    mapTree(tree, properties) {
         {
-            return this.searchTree(tree, filter).map((node) => {
+            return tree.map((node) => {
                 // TODO maybe create class for nodes
                 const mappedNode = {
                     originalNode: node,
                     id: node[properties.nodeId],
                     path: node[properties.nodePath],
-                    hasChildren: node[properties.hasChildren],
-                    useCallback: node[properties.useCallback],
+                    hasChildren: node[properties.hasChildren] === true,
+                    useCallback: node[properties.useCallback] === true,
                     priority: node[properties.priority],
-                    isDraggable: node[properties.isDraggable],
-                    insertDisabled: node[properties.insertDisabled],
-                    nestDisabled: node[properties.nestDisabled],
-                    checkbox: node[properties.checkbox],
+                    dragDisabled: node[properties.dragDisabled] === true,
+                    insertDisabled: node[properties.insertDisabled] === true,
+                    nestAllowed: node[properties.nestAllowed] === true,
+                    checkbox: node[properties.checkbox] === true,
                     expanded: false,
                     selected: false,
-                    visualState: VisualState.notSelected
+                    visualState: VisualState.notSelected,
+                    dropDisabled: false
                 };
+                mappedNode.dropDisabled = mappedNode.insertDisabled && !mappedNode.nestAllowed;
                 return mappedNode;
             });
         }
@@ -129,10 +131,14 @@ export class TreeHelper {
     }
     getParents(tree, targetNode) {
         const parentsPaths = [];
-        let nodePath = targetNode.path;
+        // TODO refactor
+        let nodePath = this.getParentNodePath(targetNode.path);
         // get all parents
-        while (nodePath && nodePath.length > 0) {
+        while (nodePath !== null && nodePath !== '') {
             nodePath = this.getParentNodePath(nodePath);
+            if (nodePath === null) {
+                break;
+            }
             parentsPaths.push(nodePath);
         }
         //find nodes for given ids

package/dist/menu/Menu.svelte

@@ -47,5 +47,4 @@
 		background: white;
 		z-index: 999;
 	}
-
 </style>

package/dist/menu/MenuDivider.svelte

@@ -4,7 +4,6 @@
 		width: 100%;
 		margin: 2px 0;
 	}
-
 </style>
 
 

package/dist/menu/MenuOption.svelte

@@ -46,5 +46,4 @@
 	div.disabled:hover {
 		background: white;
 	}
-
 </style>

package/dist/providers/drag-drop-provider.d.ts

@@ -0,0 +1,9 @@
+import type { TreeHelper } from '../helpers/tree-helper.js';
+import { type Node, InsertionType } from '../types.js';
+export declare class DragDropProvider {
+    helper: TreeHelper;
+    constructor(treeHelper: TreeHelper);
+    getInsertionPosition(draggendNode: Node, draggedOverNode: Node, e: DragEvent, element: HTMLElement, nest: boolean): InsertionType;
+    getRelativePosition(element: Element, e: DragEvent): InsertionType;
+    isDropAllowed(draggedNode: Node, targeNode: Node): boolean;
+}

package/dist/providers/drag-drop-provider.js

@@ -1,186 +1,33 @@
-"use strict";
-// 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 class DragDropProvider {
-// 	helper: TreeHelper;
-// 	props: PropertyHelper;
-// 	separator: string;
-// 	constructor(treeHelper: TreeHelper) {
-// 		this.helper = treeHelper;
-// 		this.props = treeHelper.props;
-// 		this.separator = this.helper.config.separator ?? '.';
-// 	}
-// 	path(node: Node) {
-// 		return this.helper.path(node);
-// 	}
-// 	/**
-// 	 * moves node from one parent to another
-// 	 * @param {Object[]} tree - tree
-// 	 * @param {nodePath} movedNodePath - nodepath of moved(dragged) node
-// 	 * @param {nodePath} targetNodePath - nodepath of node where it should be moved ( either bellow it in priority or as child)
-// 	 * @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: InsertionType,
-// 		recalculateNodePath: boolean
-// 	): Node[] {
-// 		// cannot move root node
-// 		if (!movedNodePath) return tree;
-// 		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
-// 			? targetNodePath
-// 			: this.helper.getParentNodePath(targetNodePath);
-// 		//trying to move parent to child
-// 		if (parentNodePath?.startsWith(movedNodePath)) {
-// 			return tree;
-// 		}
-// 		const changedParent = this.helper.getParentNodePath(movedNodePath) !== parentNodePath;
-// 		let newNodePath = movedNodePath;
-// 		//dont create new node if you only moved inside same parent
-// 		if (changedParent) {
-// 			newNodePath = this.calculateNewNodePath(
-// 				tree,
-// 				parentNodePath,
-// 				movedNodePath,
-// 				recalculateNodePath
-// 			);
-// 		}
-// 		//* find target node
-// 		const targetNode = this.helper.findNode(tree, targetNodePath);
-// 		if (!targetNode) return tree;
-// 		let movedNode;
-// 		//move nodes
-// 		tree = tree.map((node) => {
-// 			//make sure that parent's haschild is set to true, so that children are visible
-// 			if (this.path(node) == parentNodePath) {
-// 				this.props.setHasChildren(node, true);
-// 				this.props.setExpanded(node, true);
-// 			}
-// 			//move moved nodes to new location ( if location is being changed)
-// 			if (changedParent && this.path(node)?.startsWith(movedNodePath)) {
-// 				//replace old parent with new one
-// 				const newPath = this.path(node)?.replace(movedNodePath, newNodePath) ?? null;
-// 				this.props.setPath(node, newPath);
-// 			}
-// 			//if it is moved node
-// 			if (this.path(node) === newNodePath) {
-// 				movedNode = node;
-// 				//? not sure if this is best
-// 				this.updatePriority(tree, movedNode, parentNodePath, newNodePath, targetNode, insType);
-// 			}
-// 			return node;
-// 		});
-// 		if (!movedNode) return tree;
-// 		//* insert node at right possition of array
-// 		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 == 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));
-// 		if (!oldParent) return tree;
-// 		//moved last node
-// 		const oldParentHasChildren = this.helper.allCHildren(tree, this.path(oldParent)).length;
-// 		if (oldParent && !oldParentHasChildren) {
-// 			this.props.setHasChildren(oldParent, false);
-// 		}
-// 		return tree;
-// 	}
-// 	calculateNewNodePath(
-// 		tree: Tree,
-// 		parentNodePath: NodePath,
-// 		movedNodePath: NodePath,
-// 		recalculateNodePath: boolean
-// 	) {
-// 		//node id is last part of nodePath
-// 		let nodeId;
-// 		if (recalculateNodePath) {
-// 			nodeId = this.getNextNodeId(tree, parentNodePath);
-// 		} else {
-// 			//get last segment of path
-// 			// nodeId = this.helper.getNodeIdFromPath(movedNodePath);
-// 		}
-// 		if (parentNodePath === null) return nodeId as string;
-// 		return `${parentNodePath}${this.separator}${nodeId}`;
-// 	}
-// 	updatePriority(
-// 		tree: Tree,
-// 		node: Node,
-// 		parentNodePath: NodePath,
-// 		newNodePath: NodePath,
-// 		targetNode: Node,
-// 		insType: InsertionType
-// 	) {
-// 		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 == InsertionType.below) {
-// 					newpriority += 1;
-// 				} else {
-// 					//targetNode[this.props.priority] -= 1;
-// 				}
-// 			}
-// 			this.recalculatesPriorities(tree, parentNodePath, newNodePath, newpriority);
-// 			this.props.setPriority(targetNode, newpriority);
-// 		} else {
-// 			//so old priority doesnt mess up orderring
-// 			this.props.setPriority(targetNode, undefined);
-// 		}
-// 	}
-// 	/** recomputes all priorities after inserted priority.F
-// 	 * Also changes all priorities to be one apart (1,5,6 => 1,2,3)
-// 	 */
-// 	//? maybe it will recalculate properly if dont set insertedPriority
-// 	recalculatesPriorities(
-// 		tree: Tree,
-// 		parentNode: NodePath,
-// 		movedNodePath: NodePath,
-// 		insertedPriority = -1
-// 	) {
-// 		let nextPriority = insertedPriority + 1;
-// 		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++);
-// 			}
-// 		});
-// 	}
-// 	/** return biggest value of nodepath number that children are using +1 */
-// 	getNextNodeId(tree: Tree, parentPath: NodePath) {
-// 		let max = 0;
-// 		//findes biggest nodeNumber for
-// 		this.helper.allCHildren(tree, parentPath).forEach((node) => {
-// 			const parent = this.helper.getParentNodePath(this.path(node));
-// 			if (parent === parentPath) {
-// 				const num = parseInt(this.path(node)?.substring(parent ? parent.length + 1 : 0) ?? '0');
-// 				max = Math.max(max, num);
-// 			}
-// 		});
-// 		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 InsertionType.below;
-// 		}
-// 		return InsertionType.above;
-// 	}
-// 	getNodeIdFromPath(nodePath: NodePath) {
-// 		if (nodePath == null) {
-// 			console.warn('getting node id of null node path');
-// 			return null;
-// 		}
-// 		return nodePath?.split(this.helper.config.separator).slice(-1)[0];
-// 	}
-// }
+import { InsertionType } from '../types.js';
+export class DragDropProvider {
+    helper;
+    constructor(treeHelper) {
+        this.helper = treeHelper;
+    }
+    getInsertionPosition(draggendNode, draggedOverNode, e, element, nest) {
+        if (nest && draggedOverNode.nestAllowed) {
+            return InsertionType.nest;
+        }
+        if (draggedOverNode.insertDisabled) {
+            return InsertionType.none;
+        }
+        return this.getRelativePosition(element, e);
+    }
+    getRelativePosition(element, e) {
+        const targetCords = element.getBoundingClientRect();
+        const half = targetCords.bottom - targetCords.height / 2;
+        if (e.y < half) {
+            return InsertionType.insertAbove;
+        }
+        return InsertionType.insertBelow;
+    }
+    isDropAllowed(draggedNode, targeNode) {
+        if (targeNode.dropDisabled) {
+            return false;
+        }
+        if (targeNode.path.startsWith(draggedNode.path + this.helper.config.separator)) {
+            return false;
+        }
+        return true;
+    }
+}

package/dist/providers/selection-provider.d.ts

@@ -1,5 +1,5 @@
 import type { TreeHelper } from '../helpers/tree-helper.js';
-import { SelectionModes, type NodePath, type Tree, type TreeVisualStates, type Node, type NodeId } from '../types.js';
+import { SelectionModes, type Tree, type TreeVisualStates, type Node, type NodeId } from '../types.js';
 export declare class SelectionProvider {
     helper: TreeHelper;
     recursiveMode: boolean;
@@ -8,7 +8,7 @@ export declare class SelectionProvider {
     isNodeSelected(node: Node): boolean;
     isSelected(nodeId: string, visualStates: TreeVisualStates, selectedNodeIds: NodeId[]): boolean;
     getSelectableDirectChildren(tree: Tree, parentNodePath: string | null): Node[];
-    setSelection(tree: Tree, nodePath: NodePath, changeTo: boolean, oldSelection: NodeId[]): NodeId[];
+    setSelection(tree: Tree, nodePath: string | null, changeTo: boolean, oldSelection: NodeId[]): NodeId[];
     /** Computes visual states for all nodes. Used for computing initial visual states when tree changes  */
     computeVisualStates(tree: Tree, selectedNodeIds: (string | number)[]): TreeVisualStates;
     private computeVisualState;

package/dist/providers/selection-provider.js

@@ -38,7 +38,7 @@ export class SelectionProvider {
             .filter((node) => isSelectable(node, SelectionModes.all));
     }
     setSelection(tree, nodePath, changeTo, oldSelection) {
-        const node = this.helper.findNode(tree, nodePath);
+        const node = nodePath ? this.helper.findNode(tree, nodePath) : null;
         const nodeHasChildren = node ? node.hasChildren : false;
         // allow selection of root node
         if (nodePath === null || (this.recursiveMode && nodeHasChildren)) {

package/dist/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
@@ -89,8 +86,9 @@ $treeview-lines: solid black 1px
     display: block
     border-radius: 3px
     margin-left: 28px
-    margin-bottom: -2px
-    margin-top: -2px
+    pointer-events: none //! this is needed to fix flickering issue
+    // margin-bottom: -2px
+    // margin-top: -2px
   .insert-line-child
     margin-left: calc( 28px + 5em )
     background-color: red
@@ -103,3 +101,5 @@ $treeview-lines: solid black 1px
     color: LightGray
   .pointer-cursor
     cursor: grab
+  .expansion-button
+    all: unset

package/dist/types.d.ts

@@ -4,14 +4,14 @@ export type Props = {
     hasChildren: string;
     useCallback: string;
     priority: string;
-    isDraggable: string;
+    dragDisabled: string;
     insertDisabled: string;
-    nestDisabled: string;
+    nestAllowed: string;
     checkbox: string;
 };
 export type MappedNode = {
     id: NodeId;
-    path: NodePath;
+    path: string;
     hasChildren: boolean;
     useCallback: boolean;
     priority: number;
@@ -23,17 +23,18 @@ export type MappedNode = {
 export type Node = {
     originalNode: any;
     id: NodeId;
-    path: NodePath;
+    path: string;
     hasChildren: boolean;
     useCallback: boolean;
     priority: number;
-    isDraggable: boolean;
+    dragDisabled: boolean;
     insertDisabled: boolean;
-    nestDisabled: boolean;
+    nestAllowed: boolean;
     checkbox: boolean;
     visualState: VisualState;
     expanded: boolean;
     selected: boolean;
+    dropDisabled: boolean;
 };
 export declare enum VisualState {
     indeterminate = "indeterminate",
@@ -46,30 +47,24 @@ export declare enum SelectionModes {
     none = "none"
 }
 export type Tree = Node[];
-export declare enum InsertionType {
-    above = "above",
-    below = "below",
-    nest = "nest"
-}
-export type NodePath = string | null;
 export type NodeId = string | number;
 export type CustomizableClasses = {
     treeClass: string;
     nodeClass: string;
-    expandedToggleClass: string;
-    collapsedToggleClass: string;
+    expandIcon: string;
+    collapseIcon: string;
+    nestIcon: string;
     expandClass: string;
     inserLineClass: string;
-    inserLineNestClass: string;
     currentlyDraggedClass: string;
 };
-export type DragEnterCallback = (draggendNode: Node, oldParent: Node, newParent: Node) => boolean;
+export type DragEnterCallback = (draggendNode: Node, targetNode: Node) => Promise<boolean>;
 export type BeforeMovedCallback = (draggendNode: Node, oldParent: Node, newParent: Node, insertionType: string) => boolean;
 export type ExpandedCallback = (node: Node) => Promise<void>;
 export type HelperConfig = {
     separator: string;
 };
-export declare enum HighlighType {
+export declare enum InsertionType {
     nest = "nest",
     insertAbove = "insert-above",
     insertBelow = "insert-below",

package/dist/types.js

@@ -12,14 +12,8 @@ export var SelectionModes;
 })(SelectionModes || (SelectionModes = {}));
 export var InsertionType;
 (function (InsertionType) {
-    InsertionType["above"] = "above";
-    InsertionType["below"] = "below";
     InsertionType["nest"] = "nest";
+    InsertionType["insertAbove"] = "insert-above";
+    InsertionType["insertBelow"] = "insert-below";
+    InsertionType["none"] = "none";
 })(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": "1.0.0-beta.1",
+	"version": "1.0.0-beta.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -61,6 +61,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
+		"@keenmate/js-common-helpers": "^1.2.0",
 		"@types/lodash.unionby": "^4.8.9",
 		"@types/lodash.uniq": "^4.5.9",
 		"@types/lodash.uniqby": "^4.7.9",