@keenmate/svelte-treeview 0.1.0

package/dist/helpers/drag-drop-helpers.d.ts

@@ -0,0 +1,29 @@
+export class DragAndDropHelper {
+    constructor(treeHelper: any);
+    helper: any;
+    props: any;
+    separator: any;
+    path(node: any): any;
+    /**
+     * 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: Object[], movedNodePath: nodePath, targetNodePath: nodePath, insType: int, recalculateNodePath: boolean): Object[] | undefined;
+    calculateNewNodePath(tree: any, parentNodePath: any, movedNodePath: any, recalculateNodePath: any): any;
+    updatePriority(tree: any, node: any, parentNodePath: any, newNodePath: any, targetNode: any, insType: any): void;
+    /** recomputes all priorities after inserted priority.F
+     * Also changes all priorities to be one apart (1,5,6 => 1,2,3)
+     */
+    recalculatesPriorities(tree: any, parentNode: any, movedNodePath: any, insertedPriority?: number): void;
+    /** return biggest value of nodepath number that children are using +1 */
+    getNextNodeId(tree: any, parentPath: any): number;
+    getInsertionPosition(e: any, element: any): 1 | -1;
+    huminifyInsType(insType: any): "before" | "inside" | "after" | undefined;
+    /** orders nodes by priorityProp
+     */
+    OrderByPriority(tree: any): any;
+}

package/dist/helpers/drag-drop-helpers.js

@@ -0,0 +1,193 @@
+// @ts-nocheck
+export class DragAndDropHelper {
+	constructor(treeHelper) {
+		this.helper = treeHelper;
+		this.props = treeHelper.props;
+
+		this.separator = this.helper.config.separator ?? '.';
+	}
+
+	path(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, movedNodePath, targetNodePath, insType, recalculateNodePath) {
+		const isNesting = insType == 0;
+		console.log({ tree, movedNodePath, targetNodePath, insType });
+		// 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;
+
+		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
+
+		let targetNode = this.helper.findNode(tree, targetNodePath);
+
+		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) {
+				node[this.props.hasChildren] = true;
+				node[this.props.expanded] = 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);
+				node[this.props.nodePath] = 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;
+		});
+
+		//* insert node at right possition of array
+
+		let oldIndex = tree.findIndex((x) => this.path(x) == newNodePath);
+		tree.splice(oldIndex, 1);
+
+		let index = tree.findIndex((x) => this.path(x) == this.path(targetNode));
+
+		tree.splice(index + (insType == 1 ? 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
+		let oldParent = this.helper.findNode(tree, this.helper.getParentNodePath(movedNodePath));
+
+		//moved last node
+		const oldParentHasChildren = this.helper.allCHildren(tree, this.path(oldParent)).length;
+		if (oldParent && !oldParentHasChildren) {
+			oldParent[this.props.hasChildren] = false;
+		}
+
+		return tree;
+	}
+
+	calculateNewNodePath(tree, parentNodePath, movedNodePath, recalculateNodePath) {
+		//node id is last part of nodePath
+		let nodeId;
+		if (recalculateNodePath) {
+			nodeId = this.getNextNodeId(tree, parentNodePath);
+		} else {
+			//get last segment of path
+			nodeId = movedNodePath.split(this.separator).slice(-1)[0];
+		}
+		return (parentNodePath ? parentNodePath + this.separator : '') + nodeId;
+	}
+
+	updatePriority(tree, node, parentNodePath, newNodePath, targetNode, insType) {
+		const isNesting = insType == 0;
+		if (isNesting || targetNode[this.props.priority] != null) {
+			let newpriority = 0;
+			if (!isNesting) {
+				//calculate next
+				newpriority = targetNode[this.props.priority] ?? 0;
+				if (insType == -1) {
+					newpriority += 1;
+				} else {
+					//targetNode[this.props.priority] -= 1;
+				}
+			}
+			this.recalculatesPriorities(tree, parentNodePath, newNodePath, newpriority);
+
+			node[this.props.priority] = newpriority;
+		} else {
+			//so old priority doesnt mess up orderring
+			node[this.props.priority] = 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, parentNode, movedNodePath, insertedPriority = -1) {
+		let nextPriority = insertedPriority + 1;
+		this.OrderByPriority(this.helper.allCHildren(tree, parentNode)).forEach((node) => {
+			if (node[this.props.priority] >= insertedPriority && this.path(node) != movedNodePath) {
+				node[this.props.priority] = nextPriority++;
+			}
+		});
+	}
+
+	/** return biggest value of nodepath number that children are using +1 */
+	getNextNodeId(tree, parentPath) {
+		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) {
+				let num = this.path(node).substring(parent ? parent.length + 1 : 0);
+				max = Math.max(max, num);
+			}
+		});
+		return parseInt(max) + 1;
+	}
+
+	getInsertionPosition(e, element) {
+		let targetCords = element.getBoundingClientRect();
+		let half = targetCords.bottom - targetCords.height / 2;
+
+		if (e.y < half) {
+			return 1;
+		}
+		return -1;
+	}
+
+	huminifyInsType(insType) {
+		switch (insType) {
+			case 1:
+				return 'before';
+			case 0:
+				return 'inside';
+			case -1:
+				return 'after';
+		}
+	}
+
+	/** orders nodes by priorityProp
+	 */
+	OrderByPriority(tree) {
+		tree.sort((a, b) => {
+			!!b[this.props.priority] ? a[this.props.priority] > b[this.props.priority] : true;
+		});
+		return tree;
+	}
+}

package/dist/helpers/selection-helpers.d.ts

@@ -0,0 +1,22 @@
+export class SelectionHelper {
+    constructor(treeHelper: any);
+    helper: any;
+    props: any;
+    path(node: any): any;
+    selected(node: any): any;
+    getChildrenWithCheckboxes(tree: any, parentNodePath: any): any;
+    changeSelection(tree: any, nodePath: any, filteredTree: any): any;
+    toggleSelected(tree: any, nodePath: any): void;
+    changeSelectedForChildren(tree: any, parentNodePath: any, changeTo: any, filteredTree: any): any;
+    updateLeafNodeSelection(node: any, changeTo: any): void;
+    /**Calculates visual state based on children  */
+    getVisualState(filteredTree: any, node: any): string;
+    /** recursibly recomputes parent visual state until root */
+    recomputeAllParentVisualState(tree: any, filteredTree: any, nodePath: any): any;
+    /** Computes visual states for all nodes. Used for computing initial visual states when tree changes  */
+    computeInitialVisualStates(tree: any, filteredTree: any): any;
+    /** Recursivly computes visual state for children  */
+    computeChildrenVisualStates(tree: any, filteredTree: any, node: any): any;
+    deleteSelected(tree: any): any;
+    isSelectable(node: any, showCheckboxes: any): boolean;
+}

package/dist/helpers/selection-helpers.js

@@ -0,0 +1,182 @@
+// @ts-nocheck
+import { checkboxesType, visualStateType } from "../consts";
+
+export class SelectionHelper {
+	constructor(treeHelper) {
+		this.helper = treeHelper;
+		this.props = treeHelper.props;
+	}
+
+	path(node) {
+		return this.helper.path(node);
+	}
+	selected(node) {
+		return node[this.props.selected];
+	}
+
+	getChildrenWithCheckboxes(tree, parentNodePath) {
+		return this.helper
+			.getDirectChildren(tree, parentNodePath)
+			.filter((node) => this.isSelectable(node, checkboxesType.all));
+	}
+
+	changeSelection(tree, nodePath, filteredTree) {
+		this.toggleSelected(tree, nodePath);
+
+		const recursive = this.helper.config?.recursive ?? false;
+
+		if (recursive) {
+			tree = this.recomputeAllParentVisualState(tree, filteredTree, nodePath);
+		}
+
+		return tree;
+	}
+
+	toggleSelected(tree, nodePath) {
+		const node = this.helper.findNode(tree, nodePath);
+
+		node[this.props.selected] = !node[this.props.selected];
+	}
+
+	changeSelectedForChildren(tree, parentNodePath, changeTo, filteredTree) {
+		tree = tree.map((node) => {
+			//changes itself
+			if (parentNodePath == this.path(node)) {
+				this.updateLeafNodeSelection(node, changeTo);
+			}
+
+			if (!parentNodePath) {
+				// TODO i think this isnt working
+				// this only updates
+
+				//top level
+				this.updateLeafNodeSelection(node, changeTo);
+			} else {
+				//if parentNodePath isnt root
+				if (
+					this.path(node).startsWith(parentNodePath.toString()) &&
+					this.path(node) != parentNodePath.toString()
+				) {
+					this.updateLeafNodeSelection(node, changeTo);
+				}
+			}
+			return node;
+		});
+
+		tree = this.recomputeAllParentVisualState(
+			tree,
+			filteredTree,
+			parentNodePath
+		);
+		return tree;
+	}
+
+	//changes selected or visual state depending on
+	updateLeafNodeSelection(node, changeTo) {
+		//dont change if not selectable
+		if (!this.isSelectable(node, checkboxesType.all)) {
+			return;
+		}
+		if (!node[this.props.hasChildren]) {
+			node[this.props.selected] = changeTo;
+		} else {
+			node.__visual_state = changeTo.toString();
+		}
+	}
+
+	/**Calculates visual state based on children  */
+	getVisualState(filteredTree, node) {
+		const children = this.getChildrenWithCheckboxes(
+			filteredTree,
+			this.path(node)
+		);
+
+		if (!children || children?.length == 0) return visualStateType.notSelected;
+
+		//if every child is selected or vs=true return true
+		if (
+			children.every(
+				(x) =>
+					x[this.props.selected] === true ||
+					x.__visual_state === visualStateType.selected
+			)
+		) {
+			return visualStateType.selected;
+		}
+		//at least sone child is selected or indeterminate
+		else if (
+			children.some((x) => {
+				return (
+					x[this.props.selected] === true ||
+					x.__visual_state === visualStateType.indeterminate ||
+					x.__visual_state === visualStateType.selected
+				);
+			})
+		) {
+			return visualStateType.indeterminate;
+		} else {
+			return visualStateType.notSelected;
+		}
+	}
+
+	/** recursibly recomputes parent visual state until root */
+	recomputeAllParentVisualState(tree, filteredTree, nodePath) {
+		const parent = this.helper.getParentNodePath(nodePath);
+
+		let newstate;
+		filteredTree.forEach((x) => {
+			if (this.path(x) == parent) {
+				newstate = this.getVisualState(filteredTree, x);
+				x.__visual_state = newstate;
+			}
+		});
+		if (this.helper.getParentNodePath(parent) != "") {
+			tree = this.recomputeAllParentVisualState(tree, filteredTree, parent);
+		}
+		return tree;
+	}
+
+	/** Computes visual states for all nodes. Used for computing initial visual states when tree changes  */
+	computeInitialVisualStates(tree, filteredTree) {
+		let rootELements = this.getChildrenWithCheckboxes(tree, null);
+		rootELements.forEach((x) => {
+			if (x[this.props.hasChildren] == true) {
+				tree = this.computeChildrenVisualStates(tree, filteredTree, x);
+				x.__visual_state = this.getVisualState(filteredTree, x);
+			}
+		});
+		return tree;
+	}
+	/** Recursivly computes visual state for children  */
+	computeChildrenVisualStates(tree, filteredTree, node) {
+		let children = this.getChildrenWithCheckboxes(tree, this.path(node));
+		//foreaches all children if it has children, it calls itself, then it computes __vs => will compute from childern to parent
+		children.forEach((x) => {
+			if (x[this.props.hasChildren] === true) {
+				tree = this.computeChildrenVisualStates(tree, filteredTree, x);
+				x.__visual_state = this.getVisualState(filteredTree, x);
+			}
+		});
+		return tree;
+	}
+
+	deleteSelected(tree) {
+		return tree.map((node) => {
+			node[this.props.selected] = false;
+			node.__visual_state = undefined;
+			return node;
+		});
+	}
+
+	isSelectable(node, showCheckboxes) {
+		if (showCheckboxes == checkboxesType.all) {
+			return node[this.props.checkbox] !== false;
+		}
+		//show only if pop is true
+		if (showCheckboxes == checkboxesType.perNode) {
+			return node[this.props.checkbox] === true;
+		}
+		//dont show at all
+		return false;
+	}
+}

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

@@ -0,0 +1,33 @@
+export class TreeHelper {
+    constructor(propNames: any, config?: {});
+    props: any;
+    config: {};
+    selection: SelectionHelper;
+    dragDrop: DragAndDropHelper;
+    path(node: any): any;
+    getParentNodePath(nodePath: any): any;
+    hasChildren(tree: any, nodePath: any): any;
+    findNode(tree: any, nodePath: any): any;
+    nodePathIsChild(nodePath: any): any;
+    getDirectChildren(tree: any, parentNodePath: any): any;
+    allCHildren(tree: any, parentNodePath: any): any;
+    getAllLeafNodes(tree: any): any;
+    joinTrees(filteredTree: any, tree: any): any;
+    mergeTrees(oldTree: any, addedTree: any, nodePath?: string): any;
+    /** toggles expansion on
+     */
+    changeExpansion(tree: any, node: any, changeTo: any): void;
+    /** changes expansion of every node that has this.hasChildren set to true
+     */
+    changeEveryExpansion(tree: any, changeTo: any): any;
+    /** 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: any, level: any): any;
+    getDepthLevel(nodePath: any): number;
+    searchTree(tree: any, filter: any, leafesOnly: any): any;
+    getParents(tree: any, node: any): any;
+}
+declare function _default(...args: any[]): TreeHelper;
+export default _default;
+import { SelectionHelper } from './selection-helpers';
+import { DragAndDropHelper } from './drag-drop-helpers';

package/dist/helpers/tree-helper.js

@@ -0,0 +1,169 @@
+// @ts-nocheck
+import orderBy from 'lodash.unionby'; // used by tree merge
+import unique from 'lodash.uniq'; // used by tree merge
+import { SelectionHelper } from './selection-helpers';
+import { DragAndDropHelper } from './drag-drop-helpers';
+import { defaultPropNames } from '../consts.js';
+
+export class TreeHelper {
+	constructor(propNames, config = {}) {
+		this.props = { ...defaultPropNames, ...propNames };
+		this.config = config;
+		this.selection = new SelectionHelper(this);
+		this.dragDrop = new DragAndDropHelper(this);
+	}
+
+	path(node) {
+		return node?.[this.props.nodePath];
+	}
+
+	//#region basic helpres
+
+	getParentNodePath(nodePath) {
+		const separator = this.config.separator ?? '.';
+		const parentPath = nodePath?.substring(0, nodePath.lastIndexOf(separator));
+		return parentPath;
+	}
+
+	hasChildren(tree, nodePath) {
+		return tree?.find((x) => this.getParentNodePath(this.path(x)) === nodePath);
+	}
+
+	findNode(tree, nodePath) {
+		return tree.find((node) => this.path(node) === nodePath);
+	}
+
+	nodePathIsChild(nodePath) {
+		const separator = this.config.separator ?? '.';
+
+		const includesSeparator = nodePath?.includes(separator);
+		return includesSeparator;
+	}
+
+	getDirectChildren(tree, parentNodePath) {
+		const children = (tree || []).filter((x) =>
+			!parentNodePath
+				? !this.nodePathIsChild(this.path(x))
+				: this.getParentNodePath(this.path(x)) === parentNodePath
+		);
+
+		return children;
+	}
+
+	allCHildren(tree, parentNodePath) {
+		let children;
+		children = tree.filter((x) => {
+			if (!parentNodePath) {
+				//top level
+				return !this.nodePathIsChild(this.path(x));
+			} else {
+				return this.path(x).startsWith(parentNodePath.toString()) && this.path(x) != parentNodePath;
+			}
+		});
+		return children;
+	}
+
+	getAllLeafNodes(tree) {
+		return tree.filter((x) => {
+			return x[this.props.hasChildren] == undefined || x[this.props.hasChildren] == false;
+		});
+	}
+
+	joinTrees(filteredTree, tree) {
+		return tree.map((tnode) => this.findNode(filteredTree, this.path(tnode)) || tnode);
+	}
+
+	mergeTrees(oldTree, addedTree, nodePath = 'nodePath') {
+		return orderBy(addedTree, oldTree, nodePath);
+	}
+
+	/** toggles expansion on
+	 */
+	changeExpansion(tree, node, changeTo) {
+		let foundNode = this.findNode(tree, this.path(node));
+
+		foundNode[this.props.expanded] = changeTo;
+	}
+
+	/** changes expansion of every node that has this.hasChildren set to true
+	 */
+	changeEveryExpansion(tree, changeTo) {
+		return tree.map((node) => {
+			if (node[this.props.hasChildren] == true) node[this.props.expanded] = changeTo;
+			return node;
+		});
+	}
+
+	/** 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, level) {
+		return tree.map((n) => {
+			if (
+				n[this.props.expanded] == undefined &&
+				n[this.props.expanded] == null &&
+				n[this.props.useCallback] != true &&
+				this.getDepthLevel(this.path(n)) <= level
+			) {
+				n[this.props.expanded] = true;
+			}
+			return n;
+		});
+	}
+
+	//based on number of dots
+	getDepthLevel(nodePath) {
+		const separator = this.config.separator ?? '.';
+		return nodePath.split(separator).length - 1;
+	}
+
+	//#endregion
+
+	searchTree(tree, filter, leafesOnly) {
+		let filteredNodes;
+		if (leafesOnly) {
+			filteredNodes = this.getAllLeafNodes(tree).filter(filter);
+		} else {
+			console.log(tree);
+			filteredNodes = tree.filter(filter);
+		}
+
+		const resultNodes = [];
+
+		//console.log("matching nodes length:" + matchingPathes.length)
+		filteredNodes.forEach((node) => {
+			resultNodes.push(node);
+
+			const parentNodes = this.getParents(tree, node);
+			resultNodes.push(...parentNodes);
+		});
+
+		const uniqueNodes = unique(resultNodes, (node) => this.path(node));
+
+		return uniqueNodes;
+	}
+
+	getParents(tree, node) {
+		const parentsPaths = [];
+
+		let nodePath = this.path(node);
+
+		// get all parents
+		while (nodePath.length > 0) {
+			nodePath = this.getParentNodePath(nodePath);
+			parentsPaths.push(nodePath);
+		}
+
+		//find nodes for given ids
+		const parentNodes = tree.filter((n) =>
+			parentsPaths.some((parentNodePath) => this.path(n) === parentNodePath)
+		);
+
+		return parentNodes;
+	}
+}
+
+export default (...args) => {
+	// TODO redundant now, maybe remove
+	let helper = new TreeHelper(...args);
+	return helper;
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as TreeView } from "./TreeView.svelte";
+export { default as MenuDivider } from "./menu/MenuDivider.svelte";
+export { default as MenuOption } from "./menu/MenuOption.svelte";
+export { TreeHelper } from "./helpers/tree-helper.js";
+export * as Constants from "./consts.js";

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as TreeView } from './TreeView.svelte';
+export { default as MenuDivider } from './menu/MenuDivider.svelte';
+export { default as MenuOption } from './menu/MenuOption.svelte';
+export { TreeHelper } from './helpers/tree-helper.js';
+export * as Constants from './consts.js';

package/dist/menu/ContextMenu.svelte

@@ -0,0 +1,33 @@
+<script>
+	// @ts-nocheck
+
+	import Menu from './Menu.svelte';
+
+	let pos = { x: 0, y: 0 };
+	let showMenu = false;
+	let node = null;
+
+	export async function onRightClick(e, n) {
+		if (showMenu) {
+			showMenu = false;
+			await new Promise((res) => setTimeout(res, 100));
+		}
+		node = n;
+		pos = { x: e.clientX, y: e.clientY };
+		showMenu = true;
+	}
+
+	function closeMenu() {
+		showMenu = false;
+		node = null;
+	}
+</script>
+
+<svelte:window on:click={closeMenu} />
+{#if showMenu}
+	<Menu {...pos} on:click={closeMenu} on:clickoutside={closeMenu}>
+		<slot {node}>
+			<b> context menu openned from: {node?.nodePath}</b>
+		</slot>
+	</Menu>
+{/if}