@keenmate/svelte-treeview 4.2.0 → 4.2.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

@@ -410,7 +410,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 +436,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 +464,7 @@
 	});
 </script>
 
-<div>
+<div bind:this={treeContainerRef}>
 	{#if shouldDisplayDebugInformation}
 		<div class="ltree-debug-info">
 			<details>

package/package.json

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