@keenmate/svelte-treeview 4.1.0 → 4.2.0

package/README.md

@@ -12,7 +12,7 @@ A high-performance, feature-rich hierarchical tree view component for Svelte 5 w
 - **Drag & Drop**: Built-in drag and drop support with validation and visual feedback
 - **Search & Filter**: Integrated FlexSearch for fast, full-text search capabilities
 - **Flexible Data Sources**: Works with any hierarchical data structure
-- **Context Menus**: Right-click context menus with customizable actions
+- **Context Menus**: Dynamic right-click menus with callback-based generation, icons, disabled states
 - **Visual Customization**: Extensive styling options and icon customization
 - **TypeScript Support**: Full TypeScript support with comprehensive type definitions
 - **Accessibility**: Built with accessibility in mind
@@ -258,6 +258,104 @@ For complete FlexSearch documentation, visit: [FlexSearch Options](https://githu
 </div>
 ```
 
+### With Context Menus
+
+The tree supports context menus with two approaches: callback-based (recommended) and snippet-based.
+
+#### Callback-Based Context Menus
+
+```svelte
+<script lang="ts">
+  import { Tree } from '@keenmate/svelte-treeview';
+  import type { ContextMenuItem } from '@keenmate/svelte-treeview';
+
+  const data = [
+    { path: '1', name: 'Documents', type: 'folder', canEdit: true, canDelete: true },
+    { path: '1.1', name: 'report.pdf', type: 'file', canEdit: true, canDelete: false },
+    { path: '2', name: 'Images', type: 'folder', canEdit: false, canDelete: true }
+  ];
+
+  function createContextMenu(node): ContextMenuItem[] {
+    const items: ContextMenuItem[] = [];
+
+    // Always available
+    items.push({
+      icon: '📂',
+      title: 'Open',
+      callback: () => alert(`Opening ${node.data.name}`)
+    });
+
+    // Conditional actions based on node data
+    if (node.data.canEdit) {
+      items.push({
+        icon: '✏️',
+        title: 'Edit',
+        callback: () => alert(`Editing ${node.data.name}`)
+      });
+    }
+
+    if (node.data.canDelete) {
+      items.push({
+        icon: '🗑️',
+        title: 'Delete',
+        callback: () => confirm(`Delete ${node.data.name}?`) && alert('Deleted!')
+      });
+    }
+
+    // Divider
+    items.push({ isDivider: true });
+
+    // Disabled item example
+    items.push({
+      icon: '🔒',
+      title: 'Restricted Action',
+      isDisabled: true,
+      callback: () => {}
+    });
+
+    return items;
+  }
+</script>
+
+<Tree
+  {data}
+  idMember="path"
+  pathMember="path"
+  contextMenuCallback={createContextMenu}
+  contextMenuXOffset={8}
+  contextMenuYOffset={0}
+/>
+```
+
+#### Snippet-Based Context Menus
+
+```svelte
+<Tree
+  {data}
+  idMember="path"
+  pathMember="path"
+>
+  {#snippet contextMenu(node, closeMenu)}
+    <div class="context-menu-item" onclick={() => { alert(`Open ${node.data.name}`); closeMenu(); }}>
+      📂 Open
+    </div>
+    <div class="context-menu-divider"></div>
+    <div class="context-menu-item" onclick={() => { alert(`Delete ${node.data.name}`); closeMenu(); }}>
+      🗑️ Delete
+    </div>
+  {/snippet}
+</Tree>
+```
+
+#### Context Menu Features
+
+- **Dynamic menus**: Generate menu items based on node properties
+- **Icons and dividers**: Visual organization and identification
+- **Disabled states**: Context-sensitive menu availability
+- **Position offset**: `contextMenuXOffset`/`contextMenuYOffset` for cursor clearance
+- **Auto-close**: Closes on scroll, click outside, or programmatically
+- **Type safety**: Full TypeScript support with `ContextMenuItem` interface
+
 ## 🎨 Styling and Customization
 
 The component comes with default styles that provide a clean, modern look. You can customize it extensively:
@@ -598,7 +696,7 @@ Custom template for rendering node content.
 ```
 
 #### contextMenu
-Custom context menu template.
+Custom context menu template (snippet-based approach).
 
 ```svelte
 {#snippet contextMenu(node, closeMenu)}
@@ -608,6 +706,32 @@ Custom context menu template.
 {/snippet}
 ```
 
+### Context Menu Properties
+
+#### contextMenuCallback
+Function that generates context menu items dynamically.
+
+```typescript
+contextMenuCallback: (node: LTreeNode<T>) => ContextMenuItem[]
+```
+
+Where `ContextMenuItem` is:
+```typescript
+interface ContextMenuItem {
+  icon?: string;        // Optional icon (emoji or text)
+  title: string;        // Menu item text
+  isDisabled?: boolean; // Whether item is disabled
+  callback: () => void; // Action to perform
+  isDivider?: boolean;  // Render as divider instead of item
+}
+```
+
+#### contextMenuXOffset
+Horizontal offset from cursor position (default: 8px).
+
+#### contextMenuYOffset
+Vertical offset from cursor position (default: 0px).
+
 ## 🏗️ Data Structure
 
 The component expects hierarchical data with path-based organization:

package/dist/components/Tree.svelte

@@ -3,7 +3,7 @@
 	import Node from './Node.svelte';
 	import { type LTreeNode } from '../ltree/ltree-node.svelte.js';
 	import { createLTree } from '../ltree/ltree.svelte.js';
-	import { type Ltree, type InsertArrayResult } from '../ltree/types.js';
+	import { type Ltree, type InsertArrayResult, type ContextMenuItem } from '../ltree/types.js';
 	import { setContext, tick } from 'svelte';
 
 	// Context menu state
@@ -62,12 +62,14 @@
 		indexerBatchSize?: number | null | undefined;
 		indexerTimeout?: number | null | undefined;
 		shouldDisplayDebugInformation?: boolean;
+		shouldDisplayContextMenuInDebugMode?: boolean;
 
 		// EVENTS
 		onNodeClicked?: (node: LTreeNode<T>) => void;
 		onNodeDragStart?: (node: LTreeNode<T>, event: DragEvent) => void;
 		onNodeDragOver?: (node: LTreeNode<T>, event: DragEvent) => void;
 		onNodeDrop?: (node: LTreeNode<T>, draggedNode: LTreeNode<T>, event: DragEvent) => void;
+		contextMenuCallback?: (node: LTreeNode<T>) => ContextMenuItem[];
 
 		// VISUALS
 		bodyClass?: string | null | undefined;
@@ -78,11 +80,13 @@
 		leafIconClass?: string | null | undefined;
 		scrollHighlightTimeout?: number | null | undefined;
 		scrollHighlightClass?: string | null | undefined;
+		contextMenuXOffset?: number | null | undefined;
+		contextMenuYOffset?: number | null | undefined;
 	}
 
 	let {
 		treeId,
-		treePathSeparator,
+		treePathSeparator = '.',
 
 		// MAPPINGS
 		idMember,
@@ -125,12 +129,14 @@
 		indexerBatchSize = 25,
 		indexerTimeout = 50,
 		shouldDisplayDebugInformation = false,
+		shouldDisplayContextMenuInDebugMode = false,
 
 		// EVENTS
 		onNodeClicked,
 		onNodeDragStart,
 		onNodeDragOver,
 		onNodeDrop,
+		contextMenuCallback,
 
 		// VISUALS
 		bodyClass,
@@ -140,7 +146,9 @@
 		selectedNodeClass,
 		dragOverNodeClass,
 		scrollHighlightTimeout = 4000,
-		scrollHighlightClass = 'ltree-scroll-highlight'
+		scrollHighlightClass = 'ltree-scroll-highlight',
+		contextMenuXOffset = 8,
+		contextMenuYOffset = 0
 	}: Props = $props();
 
 	export async function expandNodes(nodePath: string) {
@@ -305,20 +313,22 @@
 	}
 
 	function _onNodeRightClicked(node: LTreeNode<T>, event: MouseEvent) {
-		if (!contextMenu) {
+		if (!contextMenu && !contextMenuCallback) {
 			return;
 		}
 
 		event.preventDefault();
 		contextMenuNode = node;
-		contextMenuX = event.clientX;
-		contextMenuY = event.clientY;
+		contextMenuX = event.clientX + contextMenuXOffset;
+		contextMenuY = event.clientY + contextMenuYOffset;
 		contextMenuVisible = true;
+		isDebugMenuActive = false; // This is a user-triggered menu, not debug menu
 	}
 
 	function closeContextMenu() {
 		contextMenuVisible = false;
 		contextMenuNode = null;
+		isDebugMenuActive = false;
 	}
 
 	function _onNodeDragStart(node: LTreeNode<T>, event: DragEvent) {
@@ -388,8 +398,8 @@
 		}
 	}
 
-	// Add global event listener for document clicks
-	$effect.root(() => {
+	// Add global event listener for document clicks and scroll events
+	$effect(() => {
 		if (contextMenuVisible) {
 			const handleGlobalClick = (event: MouseEvent) => {
 				const target = event.target as Element;
@@ -398,15 +408,58 @@
 				}
 			};
 
+			const handleGlobalScroll = (event?: Event) => {
+				if (shouldDisplayDebugInformation) {
+					console.log('Scroll/wheel event detected, closing context menu', event?.type);
+				}
+				closeContextMenu();
+			};
+
+			// Add scroll listeners to both window and document to catch all scroll events
 			document.addEventListener('click', handleGlobalClick);
 			document.addEventListener('contextmenu', handleGlobalClick);
+			window.addEventListener('scroll', handleGlobalScroll, true);
+			document.addEventListener('scroll', handleGlobalScroll, true);
+
+			// Also listen for wheel events which might not trigger scroll
+			window.addEventListener('wheel', handleGlobalScroll, { passive: true });
 
 			return () => {
 				document.removeEventListener('click', handleGlobalClick);
 				document.removeEventListener('contextmenu', handleGlobalClick);
+				window.removeEventListener('scroll', handleGlobalScroll, true);
+				document.removeEventListener('scroll', handleGlobalScroll, true);
+				window.removeEventListener('wheel', handleGlobalScroll);
 			};
 		}
 	});
+
+	// Debug context menu - show context menu on second node for styling development
+	let isDebugMenuActive = $state(false);
+
+	$effect(() => {
+		if (shouldDisplayContextMenuInDebugMode && (contextMenu || contextMenuCallback) && tree?.tree && tree.tree.length > 1) {
+			// Find the second node in the tree
+			const secondNode = tree.tree[1];
+			if (secondNode) {
+				// Position the context menu at a fixed location for easy styling
+				contextMenuNode = secondNode;
+				contextMenuX = 200; // Fixed position for consistent styling work
+				contextMenuY = 100;
+				contextMenuVisible = true;
+				isDebugMenuActive = true;
+
+				if (shouldDisplayDebugInformation) {
+					console.log('Debug context menu displayed for node:', secondNode.data);
+				}
+			}
+		} else if (!shouldDisplayContextMenuInDebugMode && isDebugMenuActive) {
+			// Only hide the context menu if it was opened by debug mode
+			contextMenuVisible = false;
+			contextMenuNode = null;
+			isDebugMenuActive = false;
+		}
+	});
 </script>
 
 <div>
@@ -471,9 +524,29 @@
 	{@render treeFooter?.()}
 
 	<!-- Context Menu -->
-	{#if contextMenuVisible && contextMenu && contextMenuNode}
+	{#if contextMenuVisible && contextMenuNode}
 		<div class="ltree-context-menu" style="left: {contextMenuX}px; top: {contextMenuY}px;">
-			{@render contextMenu(contextMenuNode, closeContextMenu)}
+			{#if contextMenuCallback}
+				{@const menuItems = contextMenuCallback(contextMenuNode)}
+				{#each menuItems as item}
+					{#if item.isDivider}
+						<div class="ltree-context-menu-divider"></div>
+					{:else}
+						<div
+							class="ltree-context-menu-item"
+							class:ltree-context-menu-item-disabled={item.isDisabled}
+							onclick={() => !item.isDisabled && item.callback()}
+						>
+							{#if item.icon}
+								<span class="ltree-context-menu-icon">{item.icon}</span>
+							{/if}
+							{item.title}
+						</div>
+					{/if}
+				{/each}
+			{:else if contextMenu}
+				{@render contextMenu(contextMenuNode, closeContextMenu)}
+			{/if}
 		</div>
 	{/if}
 </div>

package/dist/components/Tree.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Index, SearchOptions } from 'flexsearch';
 import { type LTreeNode } from '../ltree/ltree-node.svelte.js';
-import { type InsertArrayResult } from '../ltree/types.js';
+import { type InsertArrayResult, type ContextMenuItem } from '../ltree/types.js';
 declare function $$render<T>(): {
     props: {
         trieId?: string | null | undefined;
@@ -38,10 +38,12 @@ declare function $$render<T>(): {
         indexerBatchSize?: number | null | undefined;
         indexerTimeout?: number | null | undefined;
         shouldDisplayDebugInformation?: boolean;
+        shouldDisplayContextMenuInDebugMode?: boolean;
         onNodeClicked?: (node: LTreeNode<T>) => void;
         onNodeDragStart?: (node: LTreeNode<T>, event: DragEvent) => void;
         onNodeDragOver?: (node: LTreeNode<T>, event: DragEvent) => void;
         onNodeDrop?: (node: LTreeNode<T>, draggedNode: LTreeNode<T>, event: DragEvent) => void;
+        contextMenuCallback?: (node: LTreeNode<T>) => ContextMenuItem[];
         bodyClass?: string | null | undefined;
         selectedNodeClass?: string | null | undefined;
         dragOverNodeClass?: string | null | undefined;
@@ -50,6 +52,8 @@ declare function $$render<T>(): {
         leafIconClass?: string | null | undefined;
         scrollHighlightTimeout?: number | null | undefined;
         scrollHighlightClass?: string | null | undefined;
+        contextMenuXOffset?: number | null | undefined;
+        contextMenuYOffset?: number | null | undefined;
     };
     exports: {
         expandNodes: (nodePath: string) => Promise<void>;

package/dist/ltree/types.d.ts

@@ -1,6 +1,13 @@
 import type { SearchOptions } from 'flexsearch';
 import type { LTreeNode } from './ltree-node.svelte';
 export type Tuple<T, U> = [T, U];
+export interface ContextMenuItem {
+    icon?: string;
+    title: string;
+    isDisabled?: boolean;
+    callback: () => void;
+    isDivider?: boolean;
+}
 export interface InsertArrayResult<T> {
     successful: number;
     failed: Array<{

package/dist/styles/main.scss

@@ -278,7 +278,8 @@ $body-color: #212529 !default;
 	min-width: 150px;
 
 	.ltree-context-menu-item {
-		display: block;
+		display: flex;
+		align-items: center;
 		padding: 8px 16px;
 		border: none;
 		background: none;
@@ -293,7 +294,7 @@ $body-color: #212529 !default;
 			background-color: var(--ltree-light);
 		}
 
-		&:disabled {
+		&.ltree-context-menu-item-disabled {
 			opacity: 0.5;
 			cursor: not-allowed;
 		}
@@ -307,6 +308,19 @@ $body-color: #212529 !default;
 		}
 	}
 
+	.ltree-context-menu-icon {
+		margin-right: 8px;
+		font-size: 12px;
+		width: 16px;
+		text-align: center;
+	}
+
+	.ltree-context-menu-divider {
+		height: 1px;
+		background-color: var(--ltree-border);
+		margin: 4px 0;
+	}
+
 	.ltree-context-menu-separator {
 		height: 1px;
 		background-color: var(--ltree-border);

package/dist/styles.css

@@ -210,7 +210,8 @@
   min-width: 150px;
 }
 .ltree-context-menu .ltree-context-menu-item {
-  display: block;
+  display: flex;
+  align-items: center;
   padding: 8px 16px;
   border: none;
   background: none;
@@ -224,7 +225,7 @@
 .ltree-context-menu .ltree-context-menu-item:hover {
   background-color: var(--ltree-light);
 }
-.ltree-context-menu .ltree-context-menu-item:disabled {
+.ltree-context-menu .ltree-context-menu-item.ltree-context-menu-item-disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
@@ -234,6 +235,17 @@
 .ltree-context-menu .ltree-context-menu-item.danger:hover {
   background-color: rgba(var(--ltree-danger-rgb), 0.1);
 }
+.ltree-context-menu .ltree-context-menu-icon {
+  margin-right: 8px;
+  font-size: 12px;
+  width: 16px;
+  text-align: center;
+}
+.ltree-context-menu .ltree-context-menu-divider {
+  height: 1px;
+  background-color: var(--ltree-border);
+  margin: 4px 0;
+}
 .ltree-context-menu .ltree-context-menu-separator {
   height: 1px;
   background-color: var(--ltree-border);

package/dist/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/lib/styles/main.scss"],"names":[],"mappings":";AAmCA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAID;EACC,aA5CA;;AA+CA;EACC;EACA,OAlCqB;EAmCrB;EACA;;;AAIF;EACC,aAxDA;EAyDA,WAvDqB;;AAyDrB;EACC;EACA;;AAGD;EACC;EACA;EACA,SAhE0B;EAiE1B,eAhEgC;EAiEhC;EACA;EACA;;AAEA;EACC,kBArEkB;;AAyEpB;EACC;;AAGD;EACC,OA7EuB;EA8EvB;EACA;EACA,cA7E8B;EA8E9B,WAhF2B;EAiF3B,OAhFuB;EAiFvB;EACA;;AAEA;EACC;;AAIF;EACC,cAxF4B;EAyF5B,WAxFyB;;AA2F1B;EACC,aA3F4B;EA4F5B,cA3F6B;;AA8F9B;EACC,WA9FyB;EA+FzB,OA9FqB;;AAiGtB;EACC,YAjGyB;;;AAsG3B;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAID;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAID;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;;AAKF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;IAKC;;EAED;IACC;;EAED;IACC;;;AAKF;EACC;;AAEA;EACC;;;AAIF;EACC;EACA;EACA,YACC;;;AAKD;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAEA;EACC;;AAKH;EACC;EACA;EACA;;;AAKF;EACC,aAxTA;EAyTA;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMH;EACC;EACA;EACA;;;AAGD;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAKF;EAEC;EACA;EACA;EAGA","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["../src/lib/styles/main.scss"],"names":[],"mappings":";AAmCA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAID;EACC,aA5CA;;AA+CA;EACC;EACA,OAlCqB;EAmCrB;EACA;;;AAIF;EACC,aAxDA;EAyDA,WAvDqB;;AAyDrB;EACC;EACA;;AAGD;EACC;EACA;EACA,SAhE0B;EAiE1B,eAhEgC;EAiEhC;EACA;EACA;;AAEA;EACC,kBArEkB;;AAyEpB;EACC;;AAGD;EACC,OA7EuB;EA8EvB;EACA;EACA,cA7E8B;EA8E9B,WAhF2B;EAiF3B,OAhFuB;EAiFvB;EACA;;AAEA;EACC;;AAIF;EACC,cAxF4B;EAyF5B,WAxFyB;;AA2F1B;EACC,aA3F4B;EA4F5B,cA3F6B;;AA8F9B;EACC,WA9FyB;EA+FzB,OA9FqB;;AAiGtB;EACC,YAjGyB;;;AAsG3B;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAID;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAID;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;;AAKF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;IAKC;;EAED;IACC;;EAED;IACC;;;AAKF;EACC;;AAEA;EACC;;;AAIF;EACC;EACA;EACA,YACC;;;AAKD;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAEA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAKF;EACC,aAtUA;EAuUA;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMH;EACC;EACA;EACA;;;AAGD;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAKF;EAEC;EACA;EACA;EAGA","file":"styles.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "4.1.0",
+	"version": "4.2.0",
 	"scripts": {
 		"dev": "vite dev --port 17777",
 		"build": "vite build && npm run prepack",
@@ -78,6 +78,7 @@
 		"drag-drop",
 		"search",
 		"flexsearch",
+		"context-menu",
 		"component",
 		"ui"
 	],