@keenmate/svelte-treeview 4.2.0 → 4.3.1

package/README.md

@@ -512,6 +512,7 @@ Without both requirements, no search indexing will occur.
 | `indexerBatchSize` | `number \| null` | `25` | Number of nodes to process per batch during search indexing |
 | `indexerTimeout` | `number \| null` | `50` | Maximum time (ms) to wait for idle callback before forcing indexing |
 | `shouldDisplayDebugInformation` | `boolean` | `false` | Show debug information panel with tree statistics and enable console debug logging for tree operations and async search indexing |
+| `shouldDisplayContextMenuInDebugMode` | `boolean` | `false` | Display persistent context menu at fixed position for styling development |
 
 #### Event Handler Properties
 | Prop | Type | Default | Description |
@@ -732,6 +733,27 @@ Horizontal offset from cursor position (default: 8px).
 #### contextMenuYOffset
 Vertical offset from cursor position (default: 0px).
 
+#### shouldDisplayContextMenuInDebugMode
+When enabled, displays a persistent context menu at a fixed position for styling development (default: false).
+
+```svelte
+<Tree
+  {data}
+  contextMenuCallback={createContextMenu}
+  shouldDisplayContextMenuInDebugMode={true}
+  shouldDisplayDebugInformation={true}
+  contextMenuXOffset={10}
+  contextMenuYOffset={5}
+/>
+```
+
+**Debug Mode Features:**
+- Shows context menu for the second node (or first if only one exists)
+- Positions menu 200px right and 100px down from tree's top-left corner
+- Persistent display - no need to right-click repeatedly
+- Perfect for CSS styling and position testing
+- Works with both callback-based and snippet-based context menus
+
 ## 🏗️ Data Structure
 
 The component expects hierarchical data with path-based organization:

package/dist/components/Tree.svelte

@@ -69,7 +69,7 @@
 		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[];
+		contextMenuCallback?: (node: LTreeNode<T>, closeMenuCallback: () => void) => ContextMenuItem[];
 
 		// VISUALS
 		bodyClass?: string | null | undefined;
@@ -178,6 +178,13 @@
 		return tree?.searchNodes(searchText, searchOptions) || [];
 	}
 
+	// svelte-ignore non_reactive_update
+	export function closeContextMenu() {
+		contextMenuVisible = false;
+		contextMenuNode = null;
+		isDebugMenuActive = false;
+	}
+
 	export async function scrollToPath(
 		path: string,
 		options?: { expand?: boolean; highlight?: boolean; scrollOptions?: ScrollIntoViewOptions }
@@ -325,11 +332,6 @@
 		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) {
 		draggedNode = node;
@@ -410,7 +412,7 @@
 
 			const handleGlobalScroll = (event?: Event) => {
 				if (shouldDisplayDebugInformation) {
-					console.log('Scroll/wheel event detected, closing context menu', event?.type);
+					console.log(`[Tree ${treeId}] Scroll/wheel event detected, closing context menu`, event?.type);
 				}
 				closeContextMenu();
 			};
@@ -436,21 +438,23 @@
 
 	// Debug context menu - show context menu on second node for styling development
 	let isDebugMenuActive = $state(false);
+	let treeContainerRef: HTMLDivElement;
 
 	$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;
+		if (shouldDisplayContextMenuInDebugMode && (contextMenu || contextMenuCallback) && tree?.tree && tree.tree.length > 0) {
+			// Use the first available node for the context menu data
+			const targetNode = tree.tree.length > 1 ? tree.tree[1] : tree.tree[0];
+			if (targetNode && treeContainerRef) {
+				// Position the context menu relative to the tree container
+				const treeRect = treeContainerRef.getBoundingClientRect();
+				contextMenuNode = targetNode;
+				contextMenuX = treeRect.left + 200; // 200px from tree's left edge
+				contextMenuY = treeRect.top + 100;  // 100px from tree's top edge
 				contextMenuVisible = true;
 				isDebugMenuActive = true;
 
 				if (shouldDisplayDebugInformation) {
-					console.log('Debug context menu displayed for node:', secondNode.data);
+					console.log(`[Tree ${treeId}] Debug context menu displayed for node:`, targetNode.data, `at position (${contextMenuX}, ${contextMenuY})`);
 				}
 			}
 		} else if (!shouldDisplayContextMenuInDebugMode && isDebugMenuActive) {
@@ -462,7 +466,7 @@
 	});
 </script>
 
-<div>
+<div bind:this={treeContainerRef}>
 	{#if shouldDisplayDebugInformation}
 		<div class="ltree-debug-info">
 			<details>
@@ -527,15 +531,23 @@
 	{#if contextMenuVisible && contextMenuNode}
 		<div class="ltree-context-menu" style="left: {contextMenuX}px; top: {contextMenuY}px;">
 			{#if contextMenuCallback}
-				{@const menuItems = contextMenuCallback(contextMenuNode)}
+				{@const menuItems = contextMenuCallback(contextMenuNode, closeContextMenu)}
 				{#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 {item.className || ''}"
 							class:ltree-context-menu-item-disabled={item.isDisabled}
-							onclick={() => !item.isDisabled && item.callback()}
+							onclick={async () => {
+								if (!item.isDisabled) {
+									try {
+										await item.callback();
+									} catch (error) {
+										console.error('Context menu callback error:', error);
+									}
+								}
+							}}
 						>
 							{#if item.icon}
 								<span class="ltree-context-menu-icon">{item.icon}</span>

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

@@ -43,7 +43,7 @@ declare function $$render<T>(): {
         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[];
+        contextMenuCallback?: (node: LTreeNode<T>, closeMenuCallback: () => void) => ContextMenuItem[];
         bodyClass?: string | null | undefined;
         selectedNodeClass?: string | null | undefined;
         dragOverNodeClass?: string | null | undefined;
@@ -62,6 +62,7 @@ declare function $$render<T>(): {
         collapseAll: (nodePath?: string | null | undefined) => void;
         filterNodes: (searchText: string, searchOptions?: SearchOptions) => void;
         searchNodes: (searchText: string | null | undefined, searchOptions?: SearchOptions) => LTreeNode<T>[];
+        closeContextMenu: () => void;
         scrollToPath: (path: string, options?: {
             expand?: boolean;
             highlight?: boolean;
@@ -84,6 +85,7 @@ declare class __sveltets_Render<T> {
         collapseAll: (nodePath?: string | null | undefined) => void;
         filterNodes: (searchText: string, searchOptions?: SearchOptions) => void;
         searchNodes: (searchText: string | null | undefined, searchOptions?: SearchOptions) => LTreeNode<T>[];
+        closeContextMenu: () => void;
         scrollToPath: (path: string, options?: {
             expand?: boolean;
             highlight?: boolean;

package/dist/ltree/types.d.ts

@@ -5,8 +5,9 @@ export interface ContextMenuItem {
     icon?: string;
     title: string;
     isDisabled?: boolean;
-    callback: () => void;
+    callback: () => void | Promise<void>;
     isDivider?: boolean;
+    className?: string;
 }
 export interface InsertArrayResult<T> {
     successful: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "4.2.0",
+	"version": "4.3.1",
 	"scripts": {
 		"dev": "vite dev --port 17777",
 		"build": "vite build && npm run prepack",