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

package/dist/providers/selection-provider.js

@@ -1,18 +1,29 @@
 import { SelectionModes, VisualState } from '../types.js';
 export class SelectionProvider {
     helper;
-    props;
     recursiveMode;
     constructor(treeHelper, recursive) {
         this.helper = treeHelper;
-        this.props = treeHelper.props;
         this.recursiveMode = recursive;
     }
-    path(node) {
-        return this.helper.path(node);
+    markSelected(tree, selectedNodeIds) {
+        const visualStates = this.computeVisualStates(tree, selectedNodeIds);
+        tree.forEach((node) => {
+            if (selectedNodeIds.includes(node.id ?? '')) {
+                node.selected = true;
+                node.visualState = VisualState.selected;
+                return;
+            }
+            node.selected = false;
+            const visualState = visualStates[node.id ?? ''];
+            if (!visualState) {
+                node.visualState = VisualState.notSelected;
+            }
+            node.visualState = visualState;
+        });
     }
     isNodeSelected(node) {
-        return (this.props.selected(node) === true || this.props.visualState(node) === VisualState.selected);
+        return node.selected === true || node.visualState === VisualState.selected;
     }
     isSelected(nodeId, visualStates, selectedNodeIds) {
         const selected = selectedNodeIds.includes(nodeId);
@@ -24,11 +35,11 @@ export class SelectionProvider {
     getSelectableDirectChildren(tree, parentNodePath) {
         return this.helper
             .getDirectChildren(tree, parentNodePath)
-            .filter((node) => this.isSelectable(node, SelectionModes.all));
+            .filter((node) => isSelectable(node, SelectionModes.all));
     }
     setSelection(tree, nodePath, changeTo, oldSelection) {
         const node = this.helper.findNode(tree, nodePath);
-        const nodeHasChildren = node ? this.props.hasChildren(node) : false;
+        const nodeHasChildren = node ? node.hasChildren : false;
         // allow selection of root node
         if (nodePath === null || (this.recursiveMode && nodeHasChildren)) {
             return this.changeSelectedRecursively(tree, nodePath, changeTo, oldSelection);
@@ -39,12 +50,13 @@ export class SelectionProvider {
                 console.warn('Node %s doesnt exits', nodePath);
                 return oldSelection;
             }
+            const nodeId = node.id ?? '';
             // prevent double selection
-            const filteredSelection = oldSelection.filter((x) => x !== this.props.id(node));
+            const filteredSelection = oldSelection.filter((x) => x !== nodeId);
             if (changeTo === false) {
                 return filteredSelection;
             }
-            return [...filteredSelection, this.props.id(node) ?? ''];
+            return [...filteredSelection, nodeId];
         }
     }
     /** Computes visual states for all nodes. Used for computing initial visual states when tree changes  */
@@ -54,24 +66,13 @@ export class SelectionProvider {
         // if some node is not selectable, are all its children also not selectable?
         const rootELements = this.getSelectableDirectChildren(tree, null);
         rootELements.forEach((node) => {
-            if (this.props.hasChildren(node) == true) {
+            if (node.hasChildren == true) {
                 const result = this.computeVisualStateRecursively(tree, node, selectedNodeIds, visualStates);
-                visualStates[this.props.id(node) ?? ''] = result.state;
+                visualStates[node.id ?? ''] = result.state;
             }
         });
         return visualStates;
     }
-    isSelectable(node, showCheckboxes) {
-        if (showCheckboxes === SelectionModes.all) {
-            return this.props.checkbox(node) !== false;
-        }
-        //show only if pop is true
-        if (showCheckboxes === SelectionModes.perNode) {
-            return this.props.checkbox(node) === true;
-        }
-        //dont show at all
-        return false;
-    }
     computeVisualState(directChildrenVisualStates) {
         if (!directChildrenVisualStates || directChildrenVisualStates?.length == 0)
             return VisualState.selected;
@@ -95,19 +96,19 @@ export class SelectionProvider {
      * @returns New visual state for node
      */
     computeVisualStateRecursively(tree, node, selectedNodeIds, visualStates) {
-        const directChildren = this.getSelectableDirectChildren(tree, this.path(node));
+        const directChildren = this.getSelectableDirectChildren(tree, node.path);
         const directChildrenStates = [];
         // using recustion compute from leaft nodes to root
         directChildren.forEach((child) => {
-            if (!this.props.hasChildren(child)) {
-                const childState = selectedNodeIds.includes(this.props.id(child) ?? '')
+            if (!child.hasChildren) {
+                const childState = selectedNodeIds.includes(child.id ?? '')
                     ? VisualState.selected
                     : VisualState.notSelected;
                 directChildrenStates.push(childState);
                 return;
             }
             const result = this.computeVisualStateRecursively(tree, child, selectedNodeIds, visualStates);
-            visualStates[this.props.id(child) ?? ''] = result.state;
+            visualStates[child.id ?? ''] = result.state;
             if (!result.ignore) {
                 directChildrenStates.push(result.state);
             }
@@ -120,22 +121,33 @@ export class SelectionProvider {
         let newSelection = [...oldSelection];
         tree.forEach((node) => {
             // match itself and all children
-            if (this.path(node)?.startsWith(parentNodePath ?? '')) {
+            if (node.path?.startsWith(parentNodePath ?? '')) {
                 //dont change if not selectable
-                if (!this.isSelectable(node, SelectionModes.all)) {
+                if (!isSelectable(node, SelectionModes.all)) {
                     return;
                 }
                 // in recursive mode only update leaf nodes
-                if (this.recursiveMode && this.props.hasChildren(node)) {
+                if (this.recursiveMode && node.hasChildren) {
                     return;
                 }
                 // prevent double selection
-                newSelection = newSelection.filter((x) => x !== this.props.id(node) ?? '');
+                newSelection = newSelection.filter((x) => x !== node.id ?? '');
                 if (changeTo === true) {
-                    newSelection.push(this.props.id(node) ?? '');
+                    newSelection.push(node.id ?? '');
                 }
             }
         });
         return newSelection;
     }
 }
+export function isSelectable(node, showCheckboxes) {
+    if (showCheckboxes === SelectionModes.all) {
+        return node.checkbox !== false;
+    }
+    //show only if pop is true
+    if (showCheckboxes === SelectionModes.perNode) {
+        return node.checkbox === true;
+    }
+    //dont show at all
+    return false;
+}

package/dist/tree-styles.sass

@@ -1,105 +1,105 @@
-
-$treeview-lines: solid black 1px
-.treeview
-  padding: 0
-  //will show lines if you set show-lines to root element
-  &.show-lines
-    ul
-      &:before
-        border-left: $treeview-lines
-      li:before
-        border-top: $treeview-lines
-        margin: 0
-        padding: 0
-        list-style: none
-  ul, li
-    margin: 0
-    padding: 0
-    list-style: none
-  ul
-    margin-left: 0.4em
-    position: relative
-    margin-left: .3em
-    &:before
-      content: ""
-      display: block
-      width: 0
-      position: absolute
-      top: 0
-      bottom: 0
-      left: 0
-    li:before
-      content: ""
-      display: block
-      width: 10px
-      height: 0
-      margin-top: -1px
-      position: absolute
-      top: 0.8em
-      left: 0
-    li:not(.has-children):before
-      width: 26px
-
-    li:last-child:before
-      background: #fff
-      height: auto
-      top: 1em
-      bottom: 0
-
-  li
-    margin: 0
-    padding: 0 0.8em
-    color: #555
-    font-weight: 700
-    position: relative
-    &:not(.has-children)
-      .tree-item
-        margin-left: 14px
-
-  .tree-item
-    display: flex
-    column-gap: 0.4em
-    align-items: center
-    padding: 4px 0
-
-  .no-arrow
-    padding-left: .5rem
-
-  .arrow
-    cursor: pointer
-    display: inline-block
-
-  .arrowDown
-    transform: rotate(90deg)
-
-  .invisible
-    visibility: hidden
-
-  .inserting-highlighted
-    color: red
-  .hover
-    font-weight: bold
-  .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
-  .insert-line-child
-    margin-left: calc( 28px + 5em )
-    background-color: red
-    height: 6px
-
-  .insert-line-wrapper
-    position: relative
-
-  .currently-dragged
-    color: LightGray
-  .pointer-cursor
-    cursor: grab
+
+$treeview-lines: solid black 1px
+.treeview
+  padding: 0
+  //will show lines if you set show-lines to root element
+  &.show-lines
+    ul
+      &:before
+        border-left: $treeview-lines
+      li:before
+        border-top: $treeview-lines
+        margin: 0
+        padding: 0
+        list-style: none
+  ul, li
+    margin: 0
+    padding: 0
+    list-style: none
+  ul
+    margin-left: 0.4em
+    position: relative
+    margin-left: .3em
+    &:before
+      content: ""
+      display: block
+      width: 0
+      position: absolute
+      top: 0
+      bottom: 0
+      left: 0
+    li:before
+      content: ""
+      display: block
+      width: 10px
+      height: 0
+      margin-top: -1px
+      position: absolute
+      top: 0.8em
+      left: 0
+    li:not(.has-children):before
+      width: 26px
+
+    li:last-child:before
+      background: #fff
+      height: auto
+      top: 1em
+      bottom: 0
+
+  li
+    margin: 0
+    padding: 0 0.8em
+    color: #555
+    font-weight: 700
+    position: relative
+    &:not(.has-children)
+      .tree-item
+        margin-left: 14px
+
+  .tree-item
+    display: flex
+    column-gap: 0.4em
+    align-items: center
+    padding: 4px 0
+
+  .no-arrow
+    padding-left: .5rem
+
+  .arrow
+    cursor: pointer
+    display: inline-block
+
+  .arrowDown
+    transform: rotate(90deg)
+
+  .invisible
+    visibility: hidden
+
+  .inserting-highlighted
+    color: red
+  .hover
+    font-weight: bold
+  .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
+  .insert-line-child
+    margin-left: calc( 28px + 5em )
+    background-color: red
+    height: 6px
+
+  .insert-line-wrapper
+    position: relative
+
+  .currently-dragged
+    color: LightGray
+  .pointer-cursor
+    cursor: grab

package/dist/types.d.ts

@@ -2,15 +2,38 @@ export type Props = {
     nodeId: string;
     nodePath: string;
     hasChildren: string;
-    expanded: string;
-    selected: string;
     useCallback: string;
     priority: string;
     isDraggable: string;
     insertDisabled: string;
     nestDisabled: string;
     checkbox: string;
-    visualState: string;
+};
+export type MappedNode = {
+    id: NodeId;
+    path: NodePath;
+    hasChildren: boolean;
+    useCallback: boolean;
+    priority: number;
+    isDraggable: boolean;
+    insertDisabled: boolean;
+    nestDisabled: boolean;
+    checkbox: boolean;
+};
+export type Node = {
+    originalNode: any;
+    id: NodeId;
+    path: NodePath;
+    hasChildren: boolean;
+    useCallback: boolean;
+    priority: number;
+    isDraggable: boolean;
+    insertDisabled: boolean;
+    nestDisabled: boolean;
+    checkbox: boolean;
+    visualState: VisualState;
+    expanded: boolean;
+    selected: boolean;
 };
 export declare enum VisualState {
     indeterminate = "indeterminate",
@@ -22,7 +45,6 @@ export declare enum SelectionModes {
     perNode = "perNode",
     none = "none"
 }
-export type Node = object;
 export type Tree = Node[];
 export declare enum InsertionType {
     above = "above",
@@ -43,12 +65,9 @@ export type CustomizableClasses = {
 };
 export type DragEnterCallback = (draggendNode: Node, oldParent: Node, newParent: Node) => boolean;
 export type BeforeMovedCallback = (draggendNode: Node, oldParent: Node, newParent: Node, insertionType: string) => boolean;
-export type ExpandedCallback = (node: Node) => Promise<Node[]>;
+export type ExpandedCallback = (node: Node) => Promise<void>;
 export type HelperConfig = {
     separator: string;
-    recursive?: boolean;
-    recalculateNodePath?: boolean;
-    checkboxes?: SelectionModes;
 };
 export declare enum HighlighType {
     nest = "nest",
@@ -59,3 +78,5 @@ export declare enum HighlighType {
 export type TreeVisualStates = {
     [nodePath: string]: VisualState;
 };
+export type ProvidedTree = any[];
+export type FilterFunction = (node: Node) => boolean;

package/package.json

@@ -1,71 +1,71 @@
-{
-	"name": "@keenmate/svelte-treeview",
-	"version": "1.0.0-beta.0",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
-		"test": "vitest",
-		"test:loud": "vitest --silent=false",
-		"coverage": "vitest run --coverage"
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"peerDependencies": {
-		"svelte": "^4.0.0"
-	},
-	"devDependencies": {
-		"@keenmate/svelte-adminlte": "^1.1.3",
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.20.4",
-		"@sveltejs/package": "^2.0.0",
-		"@types/marked": "^5.0.0",
-		"@types/node": "^20.3.3",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"@vitest/coverage-v8": "^1.4.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"marked": "^5.1.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"publint": "^0.1.9",
-		"rollup-plugin-string": "^3.0.0",
-		"sass": "^1.49.0",
-		"svelte": "^4.0.0",
-		"svelte-check": "^3.4.3",
-		"svelte-multiselect": "github:KeenMate/svelte-multiselect",
-		"svelte-preprocess": "^5.0.4",
-		"tslib": "^2.4.1",
-		"typescript": "^5.4.4",
-		"vite": "^4.3.6",
-		"vitest": "^1.4.0"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"dependencies": {
-		"@types/lodash.unionby": "^4.8.9",
-		"@types/lodash.uniq": "^4.5.9",
-		"@types/lodash.uniqby": "^4.7.9",
-		"lodash.unionby": "^4.8.0",
-		"lodash.uniq": "^4.5.0",
-		"lodash.uniqby": "^4.7.0"
-	}
-}
+{
+	"name": "@keenmate/svelte-treeview",
+	"version": "1.0.0-beta.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"test": "vitest",
+		"test:loud": "vitest --silent=false",
+		"coverage": "vitest run --coverage"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@keenmate/svelte-adminlte": "^1.1.3",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/package": "^2.0.0",
+		"@types/marked": "^5.0.0",
+		"@types/node": "^20.3.3",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"@vitest/coverage-v8": "^1.4.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"marked": "^5.1.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"publint": "^0.1.9",
+		"rollup-plugin-string": "^3.0.0",
+		"sass": "^1.49.0",
+		"svelte": "^4.0.0",
+		"svelte-check": "^3.4.3",
+		"svelte-multiselect": "github:KeenMate/svelte-multiselect",
+		"svelte-preprocess": "^5.0.4",
+		"tslib": "^2.4.1",
+		"typescript": "^5.4.4",
+		"vite": "^4.3.6",
+		"vitest": "^1.4.0"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"@types/lodash.unionby": "^4.8.9",
+		"@types/lodash.uniq": "^4.5.9",
+		"@types/lodash.uniqby": "^4.7.9",
+		"lodash.unionby": "^4.8.0",
+		"lodash.uniq": "^4.5.0",
+		"lodash.uniqby": "^4.7.0"
+	}
+}

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

@@ -1,31 +0,0 @@
-import type { Node, NodePath, Props, VisualState } from '../types.js';
-export declare class PropertyHelper {
-    props: Props;
-    constructor(props: Props);
-    private getVal;
-    private setVal;
-    id(node: Node): string;
-    setId(node: Node, id: string): void;
-    path(node: Node | null): NodePath;
-    setPath(node: Node, path: NodePath): void;
-    hasChildren(node: Node): boolean;
-    setHasChildren(node: Node, hasChildren: boolean): void;
-    expanded(node: Node): boolean | null;
-    setExpanded(node: Node, expanded: boolean): void;
-    selected(node: Node): boolean | null;
-    setSelected(node: Node, selected: boolean | null): void;
-    useCallback(node: Node): boolean;
-    setUseCallback(node: Node, useCallback: boolean): void;
-    priority(node: Node): number;
-    setPriority(node: Node, priority: number | undefined): void;
-    isDraggable(node: Node): boolean;
-    setIsDraggable(node: Node, isDraggable: boolean): void;
-    insertDisabled(node: Node | null): boolean;
-    setInsertDisabled(node: Node, insertDisabled: boolean): void;
-    nestDisabled(node: Node | null): boolean;
-    setNestDisabled(node: Node, nestDisabled: boolean): void;
-    checkbox(node: Node): boolean | null;
-    setCheckbox(node: Node, checkbox: boolean): void;
-    visualState(node: Node): VisualState | null;
-    setVisualState(node: Node, visualState: VisualState | null): void;
-}