@keenmate/svelte-treeview 4.7.0 → 4.8.0

package/dist/components/Node.svelte

@@ -26,7 +26,7 @@
 
 		// Flat rendering mode
 		flatMode?: boolean; // When true, don't render children (Tree handles flat rendering)
-		flatIndentSize?: string; // CSS value for per-level indentation in flat mode
+		flatGap?: boolean; // When true in flat mode, add margin-top to match recursive .ltree-children gap
 	}
 
 	// Destructure props using Svelte 5 syntax
@@ -47,45 +47,39 @@
 
 		// Flat rendering mode
 		flatMode = false,
-		flatIndentSize = '1.5rem',
+		flatGap = false,
 	}: Props = $props()
 
 	// Get stable references from context (avoids prop drilling and re-renders from inline functions)
 	const callbacks = getContext<NodeCallbacks<T>>('NodeCallbacks');
 	const config = getContext<NodeConfig>('NodeConfig');
 
-	// Destructure config for convenience (these are stable references)
-	const {
-		shouldToggleOnNodeClick,
-		expandIconClass,
-		collapseIconClass,
-		leafIconClass,
-		selectedNodeClass,
-		dragOverNodeClass,
-		dropZoneMode,
-		dropZoneLayout,
-		dropZoneStart,
-		dropZoneMaxWidth,
-		allowCopy,
-	} = config;
+	// Use $derived so values track mutations on the shared config proxy
+	const shouldToggleOnNodeClick = $derived(config.shouldToggleOnNodeClick);
+	const expandIconClass = $derived(config.expandIconClass);
+	const collapseIconClass = $derived(config.collapseIconClass);
+	const leafIconClass = $derived(config.leafIconClass);
+	const selectedNodeClass = $derived(config.selectedNodeClass);
+	const dragOverNodeClass = $derived(config.dragOverNodeClass);
+	const dragDropMode = $derived(config.dragDropMode);
+	const dropZoneMode = $derived(config.dropZoneMode);
+	const dropZoneStart = $derived(config.dropZoneStart);
+	const allowCopy = $derived(config.allowCopy);
 
 	// Compute if THIS node is the one being hovered for drop
 	const isHoveredForDrop = $derived(hoveredNodeForDropPath === node.path);
 
-	// Format dropZoneStart - number = percentage, string = as-is
-	const formattedDropZoneStart = $derived(
-		typeof dropZoneStart === 'number' ? `${dropZoneStart}%` : dropZoneStart
-	)
-
 	const tree = getContext<Ltree<T>>("Ltree")
 	const renderCoordinator = getContext<RenderCoordinator | null>("RenderCoordinator")
 
+	// Per-node reactive signal — each NodeSignal has its own $state, so
+	// bumping one signal only re-renders THIS Node, not all siblings.
+	const nodeSignal = tree.getNodeSignal(String(node.id));
+	const nodeRev = $derived(nodeSignal?.value ?? 0);
+
 	// Drag over state
 	let isDraggedOver = $state(false);
 
-	// Track which drop zone is being hovered during drag (for floating mode)
-	let hoveredZone = $state<'above' | 'below' | 'child' | null>(null);
-
 	// Track glow position for glow mode
 	let glowPosition = $state<'above' | 'below' | 'child' | null>(null);
 
@@ -112,7 +106,14 @@
 
 		// Calculate the ideal position based on mouse position
 		let idealPosition: DropPosition;
-		if (x > width / 2) {
+		// Convert dropZoneStart to pixels: number = percentage, string = as-is (px or %)
+		const startPx = typeof dropZoneStart === 'number'
+			? (dropZoneStart / 100) * width
+			: dropZoneStart.endsWith('px')
+				? parseFloat(dropZoneStart)
+				: (parseFloat(dropZoneStart) / 100) * width;
+
+		if (x > startPx) {
 			idealPosition = 'child';
 		} else if (y < height / 2) {
 			idealPosition = 'above';
@@ -152,9 +153,14 @@
 	// In flat mode, children rendering is handled by Tree.svelte, so we skip these computations
 	const childrenArray = $derived(!flatMode ? Object.values(node?.children || []) : [])
 	const hasChildren = $derived(node?.hasChildren || false)
+	// In recursive mode, each nested Node compounds one level of margin-left.
+	// In flat mode, all nodes are siblings so we multiply level × indent explicitly.
+	// Both use the same CSS variable so theming works identically across modes.
+	// flatGap replicates the recursive .ltree-children { margin-top: 2px } gap
+	// — only applied before first-child nodes (where level > previous node's level).
 	const indentStyle = $derived(
 		flatMode
-			? `margin-left: calc(${(node?.level || 1) - 1} * ${flatIndentSize})`
+			? `margin-left: calc(${node?.level || 1} * var(--tree-node-indent-per-level, 0.5rem))${flatGap ? '; margin-top: 2px' : ''}`
 			: `margin-left: var(--tree-node-indent-per-level, 0.5rem)`,
 	)
 
@@ -240,7 +246,8 @@
 			const newState = !node.isExpanded
 			uiLogger.debug(`${newState ? 'Expanding' : 'Collapsing'} node: ${node.path}`)
 			node.isExpanded = newState
-			tree.refresh()
+			tree.bumpNodeRev(node) // re-render expand/collapse icon via {#key nodeRev}
+			tree.refresh() // structural: recompute visibleFlatNodes
 		}
 	}
 
@@ -253,6 +260,7 @@
 	}
 </script>
 
+{#key nodeRev}
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="ltree-node"
@@ -282,12 +290,12 @@
 			class="ltree-node-content {node.isSelected ? selectedNodeClass : ''} {isDraggedOver && dragOverNodeClass ? dragOverNodeClass : ''}"
 			class:ltree-clickable={node.isSelectable}
 			class:ltree-dragged={isDraggedNode}
-			class:ltree-draggable={node?.isDraggable}
+			class:ltree-draggable={node?.isDraggable && dragDropMode !== 'none'}
 			class:ltree-glow-above={dropZoneMode === 'glow' && isDragInProgress && isHoveredForDrop && glowPosition === 'above' && isPositionAllowed('above')}
 			class:ltree-glow-below={dropZoneMode === 'glow' && isDragInProgress && isHoveredForDrop && glowPosition === 'below' && isPositionAllowed('below')}
 			class:ltree-glow-child={dropZoneMode === 'glow' && isDragInProgress && isHoveredForDrop && glowPosition === 'child' && isPositionAllowed('child')}
 			class:ltree-drop-copy={isDragInProgress && isHoveredForDrop && dropOperation === 'copy'}
-			draggable={node?.isDraggable}
+			draggable={node?.isDraggable && dragDropMode !== 'none'}
 			onclick={(e) => {
 				e.stopPropagation();
 				_onNodeClicked();
@@ -297,7 +305,7 @@
 				callbacks.onNodeRightClicked(node, e);
 			}}
 			ondragstart={(e) => {
-				if (node?.isDraggable && e.dataTransfer) {
+				if (node?.isDraggable && dragDropMode !== 'none' && e.dataTransfer) {
 					e.dataTransfer.effectAllowed = allowCopy ? "copyMove" : "move";
 					e.dataTransfer.setData(
 						"application/svelte-treeview",
@@ -357,43 +365,6 @@
 				{tree.getNodeDisplayValue(node)}
 			{/if}
 		</div>
-
-		<!-- Drop zones: positioned relative to .ltree-node-row (outside content to avoid padding issues) -->
-		<!-- Only render floating drop zones when in 'floating' mode, filtered by allowedDropPositions -->
-		{#if dropZoneMode === 'floating' && isDragInProgress && isHoveredForDrop}
-			<div
-				class="ltree-drop-zones ltree-drop-zones-{dropZoneLayout}"
-				style="--drop-zone-start: {formattedDropZoneStart}; --drop-zone-max-width: {dropZoneMaxWidth}px;"
-			>
-				{#if isPositionAllowed('above')}
-					<div
-						class="ltree-drop-zone ltree-drop-above"
-						class:ltree-drop-zone-active={hoveredZone === 'above'}
-						ondragover={(e) => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = 'above'; callbacks.onNodeDragOver(node, e); }}
-						ondragleave={() => { hoveredZone = null; }}
-						ondrop={(e) => { e.stopPropagation(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = null; callbacks.onZoneDrop(node, 'above', e); }}
-					>↑ Above</div>
-				{/if}
-				{#if isPositionAllowed('below')}
-					<div
-						class="ltree-drop-zone ltree-drop-below"
-						class:ltree-drop-zone-active={hoveredZone === 'below'}
-						ondragover={(e) => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = 'below'; callbacks.onNodeDragOver(node, e); }}
-						ondragleave={() => { hoveredZone = null; }}
-						ondrop={(e) => { e.stopPropagation(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = null; callbacks.onZoneDrop(node, 'below', e); }}
-					>↓ Below</div>
-				{/if}
-				{#if isPositionAllowed('child')}
-					<div
-						class="ltree-drop-zone ltree-drop-child"
-						class:ltree-drop-zone-active={hoveredZone === 'child'}
-						ondragover={(e) => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = 'child'; callbacks.onNodeDragOver(node, e); }}
-						ondragleave={() => { hoveredZone = null; }}
-						ondrop={(e) => { e.stopPropagation(); if (e.dataTransfer) e.dataTransfer.dropEffect = (allowCopy && e.ctrlKey) ? 'copy' : 'move'; hoveredZone = null; callbacks.onZoneDrop(node, 'child', e); }}
-					>→ Child</div>
-				{/if}
-			</div>
-		{/if}
 	</div>
 
 	<!-- In flat mode, children are rendered by Tree.svelte, not recursively here -->
@@ -420,3 +391,4 @@
 		</div>
 	{/if}
 </div>
+{/key}

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

@@ -14,7 +14,7 @@ declare function $$render<T>(): {
         activeDropPosition?: DropPosition | null;
         dropOperation?: DropOperation;
         flatMode?: boolean;
-        flatIndentSize?: string;
+        flatGap?: boolean;
     };
     exports: {};
     bindings: "";