@keenmate/svelte-treeview 0.1.0

package/dist/TreeView.svelte

@@ -0,0 +1,562 @@
+<script>// TODO this is just temporary untill i finish migrating
+// @ts-nocheck
+import ContextMenu from './menu/ContextMenu.svelte';
+import { createEventDispatcher, onMount } from 'svelte';
+import createTreeHelper from './helpers/tree-helper';
+import { checkboxesType, defaultCurrentlyDraggedClass, defaultExpandClass, defaultPixelTreshold, defaultPropNames, defaultTreeClass } from './consts';
+import Checkbox from './Checkbox.svelte';
+const dispatch = createEventDispatcher();
+//! required
+export let tree; //array of nodes with nodePath
+export let treeId; //string
+//!user set
+//tree that will be rendered(will be same as tree if null)
+export let filteredTree = null; //array of nodes with nodePath
+export let recursive = false; //bool
+export let checkboxes = checkboxesType.none; //bool on of [all,perNode]
+//if true, will show checkboxes to elements with children
+//TODO make batter name
+export let onlyLeafCheckboxes = false; //bool
+//true = disabel hide = false
+export let checkboxesDisabled = false; //bool
+//will allow you to move nodes between nodes and reorder them
+export let dragAndDrop = false; //bool
+//will nest of at least one of them is meet
+export let timeToNest = null;
+export let pixelNestTreshold = defaultPixelTreshold;
+//change to false when last segment of nodePath is Guaranteed to be unqiue
+export let recalculateNodePath = true;
+//callback for dynamically disabling drop on specific node
+export let dragEnterCallback = null;
+export let beforeMovedCallback = null;
+export let showContexMenu = false;
+export let enableVerticalLines = false;
+export let readonly = false;
+export let separator = '.';
+export let expandedLevel = 0;
+export let expandCallback = null;
+//* classes for customization of tree
+export let treeClass = defaultTreeClass;
+export let nodeClass = null;
+export let expandedToggleClass = null;
+export let collapsedToggleClass = null;
+export let expandClass = defaultExpandClass;
+export let inserLineClass = null;
+export let inserLineNestClass = null;
+export let currentlyDraggedClass = defaultCurrentlyDraggedClass;
+//* properties
+export let props = {};
+$: propNames = { ...defaultPropNames, ...props };
+//! DONT SET ONLY USED INTERNALLY
+//TODO use context instead
+//path of currently dragged node
+export let draggedPath = null;
+export let highlightedNode = null;
+export let childDepth = 0; //number
+export let branchRootNode = undefined;
+let dragenterTimestamp;
+//
+let canNestPos = false;
+let canNestTime = false;
+let canNest;
+let dragTimeout;
+let validTarget = false;
+let insPos;
+//if insert is disabled => nest right away and never nest if its disabled
+$: canNest =
+    (highlightedNode?.[propNames.insertDisabled] || canNestPos || canNestTime) &&
+        highlightedNode?.[propNames.nestDisabled] !== true;
+//
+let ctxMenu;
+const getNodeId = (node) => `${treeId}-${helper.path(node)}`;
+// get new helper when propNames change
+$: config = {
+    recursive,
+    recalculateNodePath,
+    checkboxes,
+    separator
+};
+$: helper = createTreeHelper(propNames, config);
+// get children nodes
+function getChildren() {
+    return helper.dragDrop.OrderByPriority(helper.getDirectChildren(filteredTree ?? tree, helper.path(branchRootNode)));
+}
+//#region expansions
+function toggleExpansion(node, expanded) {
+    helper.changeExpansion(tree, node, !expanded);
+    //update expansion
+    tree = tree;
+    let val = node[propNames.expanded];
+    //trigger callback if it is present and node has useCallback
+    if (val && expandCallback !== null && node[propNames.useCallback] === true) {
+        //console.log("calling callback");
+        node[propNames.useCallback] = false;
+        expandCallback(node)
+            .then((val) => {
+            tree = tree.concat(val);
+        })
+            .catch((reason) => {
+            console.log('ERROR IN CALLBACK!!');
+            console.log(reason);
+        });
+    }
+    //expansion events
+    dispatch('expansion', {
+        node: node,
+        value: val
+    });
+    if (val) {
+        dispatch('expanded', node);
+    }
+    else {
+        dispatch('closed', node);
+    }
+}
+export function changeAllExpansion(changeTo) {
+    tree = helper.changeEveryExpansion(tree, changeTo);
+}
+function isExpanded(node, depth, expandTo) {
+    const nodeExpanded = node[propNames.expanded];
+    //if expanded prop is defined it has priority over expand to
+    if (nodeExpanded !== undefined && nodeExpanded !== null) {
+        return nodeExpanded;
+    }
+    return depth <= expandTo;
+}
+//#endregion
+//#region checkboxes
+// TODO maybe optimize and only compute visual tree for changed branches
+$: ComputeVisualTree(filteredTree);
+function ComputeVisualTree(filteredTree) {
+    tree = helper.selection.computeInitialVisualStates(tree, filteredTree ?? tree);
+}
+//checkboxes
+function selectionChanged(node) {
+    //console.log(nodePath);
+    tree = helper.selection.changeSelection(tree, helper.path(node), filteredTree ?? tree);
+    selectionEvents(node);
+}
+//fired when in recursive mode you click on Leaf node
+function selectChildren(node, checked) {
+    tree = helper.selection.changeSelectedForChildren(tree, helper.path(node), !checked, filteredTree ?? tree);
+    selectionEvents(node);
+}
+function selectionEvents(node) {
+    let val = node[propNames.selected];
+    dispatch('selection', {
+        node: node,
+        value: val
+    });
+    if (val) {
+        dispatch('selected', node);
+    }
+    else {
+        dispatch('unselected', node);
+    }
+}
+//#endregion
+//#region drag and drop
+function handleDragStart(e, node) {
+    // dont allos drag if is draggable is false
+    if (node[propNames.isDraggable] === false) {
+        e.preventDefault();
+        return;
+    }
+    console.log('dragstart from: ' + helper.path(node));
+    e.dataTransfer.dropEffect = 'move';
+    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;
+    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) {
+        canNestTime = (dragenterTimestamp ? new Date() - dragenterTimestamp : 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 && node[propNames.nestDisabled] === true)
+        return;
+    else if ((insType == -1 || insType == 1) && node[propNames.insertDisabled] === 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
+    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) ||
+            (node[propNames.insertDisabled] === true && node[propNames.nestDisabled] === 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) {
+    // 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) &&
+        node[propNames.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) {
+    return (!canNest &&
+        highlighThisNode(node, highlitedNode, validTarget) &&
+        node[propNames.insertDisabled] !== true);
+}
+//#endregion
+//#region context menu
+function openContextMenu(e, node) {
+    if (!showContexMenu)
+        return;
+    e.preventDefault();
+    ctxMenu.onRightClick(e, node);
+}
+//#endregion
+//computes all visual states when component is first created
+onMount(() => {
+    tree = helper.selection.computeInitialVisualStates(tree, filteredTree ?? tree);
+});
+$: tree, tree == null || tree == undefined ? (tree = []) : '';
+let liElements = [];
+</script>
+
+<ul
+	class:show-lines={childDepth === 0 && enableVerticalLines}
+	class:child-menu={childDepth > 0}
+	class={childDepth === 0 ? treeClass : ''}
+>
+	{#each getChildren(tree, filteredTree) as node (getNodeId(node))}
+		{@const nesthighlighed = highlightNesting(node, highlightedNode, validTarget, canNest)}
+		{@const insertHighlighted = highlightInsert(node, highlightedNode, validTarget, canNest)}
+		{@const expanded = isExpanded(node, childDepth, expandedLevel)}
+		{@const hasChildren = node[propNames.hasChildren]}
+		{@const draggable = !readonly && dragAndDrop && node[propNames.isDraggable] !== false}
+		<li
+			class:is-child={helper.nodePathIsChild(helper.path(node))}
+			class:has-children={hasChildren}
+			on:contextmenu|stopPropagation={(e) => {
+				childDepth == 0 ? openContextMenu(e, node) : 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: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 == 1 && insertHighlighted}
+				<div class="insert-line-wrapper">
+					<div class="insert-line {inserLineClass}" />
+				</div>
+			{/if}
+
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class="tree-item
+				{nesthighlighed ? expandClass : ''}
+				{nodeClass} {draggedPath == helper.path(node) || helper.path(node)?.startsWith(draggedPath)
+					? currentlyDraggedClass
+					: ''}"
+				class:div-has-children={hasChildren}
+				class:hover={insertHighlighted || nesthighlighed}
+				{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={() => toggleExpansion(node, expanded && !node[propNames.useCallback])}>
+						<!-- use callback overrides expanded  -->
+						<i
+							class="far {expanded ? expandedToggleClass : collapsedToggleClass}"
+							class:fa-minus-square={expanded}
+							class:fa-plus-square={!expanded || node[propNames.useCallback]}
+						/>
+					</span>
+				{:else}
+					<span />
+				{/if}
+
+				<Checkbox
+					{checkboxes}
+					{helper}
+					{recursive}
+					{node}
+					{onlyLeafCheckboxes}
+					{checkboxesDisabled}
+					{readonly}
+					on:select-children={({ detail: { node, checked } }) => selectChildren(node, checked)}
+					on:select={({ detail: node }) => selectionChanged(node)}
+				/>
+				<span class:pointer-cursor={draggable}>
+					<slot {node} />
+				</span>
+			</div>
+
+			{#if nesthighlighed}
+				<div class="insert-line-wrapper">
+					<div class="insert-line insert-line-child {inserLineClass} {inserLineNestClass}" />
+				</div>
+			{/if}
+			{#if expanded && hasChildren}
+				<svelte:self
+					branchRootNode={node}
+					{treeId}
+					{checkboxes}
+					bind:tree
+					bind:filteredTree
+					{recursive}
+					childDepth={childDepth + 1}
+					let:node={nodeNested}
+					{onlyLeafCheckboxes}
+					{checkboxesDisabled}
+					{expandedLevel}
+					bind:draggedPath
+					bind:dragAndDrop
+					on:selection
+					on:selected
+					on:unselected
+					on:expansion
+					on:expanded
+					on:closed
+					{props}
+					{recalculateNodePath}
+					bind:highlightedNode
+					bind:timeToNest
+					bind:pixelNestTreshold
+					on:open-ctxmenu={(data) => {
+						childDepth == 0
+							? openContextMenu(data.detail.e, data.detail.node)
+							: dispatch('open-ctxmenu', data.detail);
+					}}
+					{expandCallback}
+					on:moved
+					{beforeMovedCallback}
+					{dragEnterCallback}
+					{readonly}
+					{separator}
+				>
+					<slot node={nodeNested} />
+				</svelte:self>
+			{/if}
+			{#if !expanded && hasChildren}
+				<ul class:child-menu={childDepth > 0} />
+			{/if}
+			<!-- Show line if insering -->
+			{#if insPos == -1 && insertHighlighted}
+				<div class="insert-line-wrapper">
+					<div class="insert-line {inserLineClass}" />
+				</div>
+			{/if}
+		</li>
+	{/each}
+</ul>
+
+<ContextMenu bind:this={ctxMenu}>
+	<svelte:fragment let:node>
+		<slot name="context-menu" {node} />
+	</svelte:fragment>
+</ContextMenu>
+
+<style>:global(.treeview) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:global(.treeview.show-lines) :global(ul:before) {
+  border-left: solid black 1px;
+}
+:global(.treeview.show-lines) :global(ul) :global(li:before) {
+  border-top: solid black 1px;
+}
+:global(.treeview) :global(ul), :global(.treeview) :global(li) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:global(.treeview) :global(ul) {
+  margin-left: 0.4em;
+  position: relative;
+  margin-left: 0.3em;
+}
+:global(.treeview) :global(ul:before) {
+  content: "";
+  display: block;
+  width: 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+:global(.treeview) :global(ul) :global(li:before) {
+  content: "";
+  display: block;
+  width: 10px;
+  height: 0;
+  margin-top: -1px;
+  position: absolute;
+  top: 0.8em;
+  left: 0;
+}
+:global(.treeview) :global(ul) :global(li:not(.has-children):before) {
+  width: 26px;
+}
+:global(.treeview) :global(ul) :global(li:last-child:before) {
+  background: #fff;
+  height: auto;
+  top: 1em;
+  bottom: 0;
+}
+:global(.treeview) :global(li) {
+  margin: 0;
+  padding: 0 0.8em;
+  color: #555;
+  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;
+  align-items: center;
+  padding: 4px 0;
+}
+:global(.treeview) :global(.no-arrow) {
+  padding-left: 0.5rem;
+}
+:global(.treeview) :global(.arrow) {
+  cursor: pointer;
+  display: inline-block;
+}
+:global(.treeview) :global(.arrowDown) {
+  transform: rotate(90deg);
+}
+:global(.treeview) :global(.invisible) {
+  visibility: hidden;
+}
+:global(.treeview) :global(.inserting-highlighted) {
+  color: red;
+}
+:global(.treeview) :global(.hover) {
+  font-weight: bold;
+}
+:global(.treeview) :global(.insert-line) {
+  position: absolute;
+  left: 0;
+  z-index: 99;
+  height: 2px;
+  width: 200px;
+  background-color: blue;
+  display: block;
+  border-radius: 3px;
+  margin-left: 28px;
+  margin-bottom: -2px;
+  margin-top: -2px;
+}
+:global(.treeview) :global(.insert-line-child) {
+  margin-left: calc(28px + 5em);
+  background-color: red;
+  height: 6px;
+}
+:global(.treeview) :global(.insert-line-wrapper) {
+  position: relative;
+}
+:global(.treeview) :global(.currently-dragged) {
+  color: LightGray;
+}
+:global(.treeview) :global(.pointer-cursor) {
+  cursor: grab;
+}</style>

package/dist/TreeView.svelte.d.ts

@@ -0,0 +1,65 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        tree: any[];
+        treeId: string;
+        filteredTree?: null | undefined;
+        recursive?: boolean | undefined;
+        checkboxes?: string | undefined;
+        onlyLeafCheckboxes?: boolean | undefined;
+        checkboxesDisabled?: boolean | undefined;
+        dragAndDrop?: boolean | undefined;
+        timeToNest?: null | undefined;
+        pixelNestTreshold?: number | undefined;
+        recalculateNodePath?: boolean | undefined;
+        dragEnterCallback?: null | undefined;
+        beforeMovedCallback?: null | undefined;
+        showContexMenu?: boolean | undefined;
+        enableVerticalLines?: boolean | undefined;
+        readonly?: boolean | undefined;
+        separator?: string | undefined;
+        expandedLevel?: number | undefined;
+        expandCallback?: null | undefined;
+        treeClass?: string | undefined;
+        nodeClass?: null | undefined;
+        expandedToggleClass?: null | undefined;
+        collapsedToggleClass?: null | undefined;
+        expandClass?: string | undefined;
+        inserLineClass?: null | undefined;
+        inserLineNestClass?: null | undefined;
+        currentlyDraggedClass?: string | undefined;
+        props?: {} | undefined;
+        draggedPath?: null | undefined;
+        highlightedNode?: null | undefined;
+        childDepth?: number | undefined;
+        branchRootNode?: undefined;
+        changeAllExpansion?: ((changeTo: any) => void) | undefined;
+    };
+    events: {
+        'open-ctxmenu': CustomEvent<any>;
+        expansion: CustomEvent<any>;
+        expanded: CustomEvent<any>;
+        closed: CustomEvent<any>;
+        selection: CustomEvent<any>;
+        selected: CustomEvent<any>;
+        unselected: CustomEvent<any>;
+        moved: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            node: any;
+        };
+        'context-menu': {
+            node: any;
+        };
+    };
+};
+export type TreeViewProps = typeof __propDef.props;
+export type TreeViewEvents = typeof __propDef.events;
+export type TreeViewSlots = typeof __propDef.slots;
+export default class TreeView extends SvelteComponentTyped<TreeViewProps, TreeViewEvents, TreeViewSlots> {
+    get changeAllExpansion(): (changeTo: any) => void;
+}
+export {};

package/dist/consts.d.ts

@@ -0,0 +1,28 @@
+export namespace defaultPropNames {
+    let nodePath: string;
+    let hasChildren: string;
+    let expanded: string;
+    let selected: string;
+    let useCallback: string;
+    let priority: string;
+    let isDraggable: string;
+    let insertDisabled: string;
+    let nestDisabled: string;
+    let checkbox: string;
+}
+export const defaultPixelTreshold: 50;
+export const defaultTreeClass: "treeview";
+export const defaultExpandClass: "inserting-highlighted";
+export const defaultCurrentlyDraggedClass: "currently-dragged";
+export namespace checkboxesType {
+    let all: string;
+    let perNode: string;
+    let none: string;
+    let readonly: string;
+}
+export namespace visualStateType {
+    export let indeterminate: string;
+    let selected_1: string;
+    export { selected_1 as selected };
+    export let notSelected: string;
+}

package/dist/consts.js

@@ -0,0 +1,31 @@
+export const defaultPropNames = {
+	nodePath: "nodePath",
+	hasChildren: "hasChildren",
+	expanded: "__expanded",
+	selected: "__selected",
+	useCallback: "__useCallback",
+	priority: "priority",
+	isDraggable: "isDraggable",
+	insertDisabled: "insertDisabled",
+	nestDisabled: "nestDisabled",
+	checkbox: "checkbox",
+};
+
+export const defaultPixelTreshold = 50;
+
+export const defaultTreeClass = "treeview";
+export const defaultExpandClass = "inserting-highlighted";
+export const defaultCurrentlyDraggedClass = "currently-dragged";
+
+export const checkboxesType = {
+	all: "all",
+	perNode: "perNode",
+	none: "none",
+	readonly: "readonly",
+};
+
+export const visualStateType = {
+	indeterminate: "indeterminate",
+	selected: "true",
+	notSelected: "false",
+};