Merge pull request #72 from abdel-17/pass-copies

feat: pass copies to `onCopy`

Author: abdel-17

packages/svelte-file-tree/CHANGELOG.md

@@ -1,5 +1,17 @@
 # svelte-file-tree
 
+## 0.8.0
+
+### Minor Changes
+
+- feat: pass `copies` to `onCopy` and `canCopy` callbacks.
+- feat: add prop `TreeProps.defaultClipboardIds`.
+- feat: add prop `TreeProps.clipboardIds`.
+- feat: add bindable prop `TreeProps.pasteOperation`.
+- breaking: remove prop `TreeProps.clipboard`.
+- breaking: `TreeProps.onClipboardChange` callback now receives `clipboardIds` and `pasteOperation` instead of `clipboard`.
+- fix: `TreeProps.onClipboardChange` was previously not always called when the clipboard changes.
+
 ## 0.7.0
 
 ### Minor Changes

packages/svelte-file-tree/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-file-tree",
-	"version": "0.7.0",
+	"version": "0.8.0",
 	"type": "module",
 	"scripts": {
 		"dev": "svelte-kit sync && svelte-package --watch",

packages/svelte-file-tree/src/lib/components/Tree.svelte

@@ -12,10 +12,9 @@
 		FolderNode,
 		TreeItemState,
 		type DefaultTFolder,
-		type PasteOperation,
 	} from "$lib/tree.svelte.js";
 	import { setTreeContext } from "./context.js";
-	import type { TreeProps } from "./types.js";
+	import type { PasteOperation, TreeProps } from "./types.js";
 
 	let {
 		children,
@@ -24,7 +23,9 @@
 		selectedIds = new SvelteSet(defaultSelectedIds),
 		defaultExpandedIds,
 		expandedIds = new SvelteSet(defaultExpandedIds),
-		clipboard = $bindable(),
+		defaultClipboardIds,
+		clipboardIds = new SvelteSet(defaultClipboardIds),
+		pasteOperation = $bindable(),
 		isItemDisabled = false,
 		ref = $bindable(null),
 		copyNode = function copyNode(node): TFile | TFolder {
@@ -80,7 +81,7 @@
 				parent,
 				selectedIds: () => selectedIds,
 				expandedIds: () => expandedIds,
-				clipboard: () => clipboard,
+				clipboardIds: () => clipboardIds,
 				isItemDisabled: () => isItemDisabled,
 			});
 			result.push(item);
@@ -240,13 +241,19 @@
 	}
 
 	export function copyToClipboard(itemId: string, operation: PasteOperation) {
-		const clipboardIds = new SvelteSet(selectedIds);
+		clipboardIds.clear();
+		for (const id of selectedIds) {
+			clipboardIds.add(id);
+		}
 		clipboardIds.add(itemId);
-		clipboard = {
-			ids: clipboardIds,
-			operation,
-		};
-		onClipboardChange({ clipboard });
+		pasteOperation = operation;
+		onClipboardChange({ clipboardIds, pasteOperation });
+	}
+
+	export function clearClipboard() {
+		clipboardIds.clear();
+		pasteOperation = undefined;
+		onClipboardChange({ clipboardIds, pasteOperation });
 	}
 
 	function getNearestAncestor(
@@ -275,13 +282,14 @@
 		return item.inClipboard;
 	}
 
-	async function copy(clipboardIds: Set<string>, destination: TFolder | TTree) {
+	async function copy(destination: TFolder | TTree) {
 		const names = new Set<string>();
 		for (const child of destination.children) {
 			names.add(child.name);
 		}
 
 		const sources: Array<TreeItemState<TFile, TFolder>> = [];
+		const copies: Array<TFile | TFolder> = [];
 		for (const id of clipboardIds) {
 			const current = getItem(id);
 			if (current === undefined) {
@@ -312,20 +320,20 @@
 
 			names.add(name);
 			sources.push(current);
+			copies.push(copyNode(current.node));
 		}
 
 		if (sources.length === 0) {
 			return true;
 		}
 
-		const canCopyResult = await canCopy({ sources, destination });
+		const canCopyResult = await canCopy({ sources, copies, destination });
 		if (!canCopyResult) {
 			return false;
 		}
 
 		const destinationChildren = destination.children;
-		for (const source of sources) {
-			const copy = copyNode(source.node);
+		for (const copy of copies) {
 			destinationChildren.push(copy);
 		}
 		onChildrenChange({
@@ -334,7 +342,7 @@
 			children: destinationChildren,
 		});
 
-		onCopy({ sources, destination });
+		onCopy({ sources, copies, destination });
 		return true;
 	}
 
@@ -423,41 +431,37 @@
 	}
 
 	export async function paste(destination: TFolder | TTree) {
-		if (clipboard === undefined) {
-			return false;
-		}
-
 		let didPaste: boolean;
-		switch (clipboard.operation) {
+		switch (pasteOperation) {
 			case "copy": {
-				didPaste = await copy(clipboard.ids, destination);
+				didPaste = await copy(destination);
 				break;
 			}
 			case "cut": {
-				didPaste = await move(clipboard.ids, isItemInClipboard, destination);
+				didPaste = await move(clipboardIds, isItemInClipboard, destination);
 				break;
 			}
+			case undefined: {
+				return false;
+			}
 		}
 
 		if (!didPaste) {
 			return false;
 		}
 
-		clipboard = undefined;
+		clearClipboard();
 		return true;
 	}
 
 	function onRemoveNode(node: TFile | TFolder) {
 		const id = node.id;
 		selectedIds.delete(id);
 		expandedIds.delete(id);
+		clipboardIds.delete(id);
 
-		if (clipboard !== undefined) {
-			const clipboardIds = clipboard.ids;
-			clipboardIds.delete(id);
-			if (clipboardIds.size === 0) {
-				clipboard = undefined;
-			}
+		if (clipboardIds.size === 0) {
+			pasteOperation = undefined;
 		}
 
 		if (node.type === "folder") {
@@ -541,10 +545,15 @@
 			});
 		}
 
+		const currentClipboardSize = clipboardIds.size;
 		for (const item of removed) {
 			onRemoveNode(item.node);
 		}
 
+		if (clipboardIds.size !== currentClipboardSize) {
+			onClipboardChange({ clipboardIds, pasteOperation });
+		}
+
 		onRemove({ removed });
 		return true;
 	}
@@ -568,7 +577,7 @@
 		}
 	}
 
-	setTreeContext<TFile, TFolder>({
+	setTreeContext<TFile, TFolder, TTree>({
 		root: () => root,
 		tabbableId: () => tabbableId ?? root.children[0].id,
 		getItemElementId,
@@ -763,8 +772,7 @@
 				}
 				case "Escape": {
 					selectedIds.clear();
-					clipboard = undefined;
-					onClipboardChange({ clipboard });
+					clearClipboard();
 					break;
 				}
 				case "*": {
@@ -809,7 +817,7 @@
 						break;
 					}
 
-					if (clipboard === undefined) {
+					if (pasteOperation === undefined) {
 						break;
 					}
 
@@ -829,7 +837,7 @@
 						}
 					}
 
-					if (pasteDestinationItem !== undefined && clipboard.operation === "cut") {
+					if (pasteDestinationItem !== undefined && pasteOperation === "cut") {
 						if (pasteDestinationItem.inClipboard) {
 							onCircularReference({
 								source: pasteDestinationItem,

packages/svelte-file-tree/src/lib/components/types.ts

@@ -7,7 +7,6 @@ import type {
 	FileNode,
 	FileTree,
 	FolderNode,
-	TreeClipboard,
 	TreeItemState,
 } from "$lib/tree.svelte.js";
 
@@ -22,8 +21,11 @@ export type TreeChildrenSnippetArgs<
 	items: Array<TreeItemState<TFile, TFolder>>;
 };
 
+export type PasteOperation = "copy" | "cut";
+
 export type OnClipboardChangeArgs = {
-	clipboard: TreeClipboard | undefined;
+	clipboardIds: SvelteSet<string>;
+	pasteOperation: PasteOperation | undefined;
 };
 
 export type OnChildrenChangeArgs<
@@ -70,6 +72,7 @@ export type OnCopyArgs<
 	TTree extends FileTree<TFile | TFolder> = FileTree<TFile | TFolder>,
 > = {
 	sources: Array<TreeItemState<TFile, TFolder>>;
+	copies: Array<TFile | TFolder>;
 	destination: TFolder | TTree;
 };
 
@@ -100,7 +103,9 @@ export interface TreeProps<
 	selectedIds?: SvelteSet<string>;
 	defaultExpandedIds?: Iterable<string>;
 	expandedIds?: SvelteSet<string>;
-	clipboard?: TreeClipboard;
+	defaultClipboardIds?: Iterable<string>;
+	clipboardIds?: SvelteSet<string>;
+	pasteOperation?: PasteOperation;
 	isItemDisabled?: boolean | ((node: TFile | TFolder) => boolean);
 	ref?: HTMLElement | null;
 	copyNode?: (node: TFile | TFolder) => TFile | TFolder;

packages/svelte-file-tree/src/lib/tree.svelte.ts

@@ -69,13 +69,6 @@ export type DefaultTFolder<TFile extends FileNode = FileNode> = FolderNode<
 	TFile | DefaultTFolder<TFile>
 >;
 
-export type PasteOperation = "copy" | "cut";
-
-export type TreeClipboard = {
-	operation: PasteOperation;
-	ids: SvelteSet<string>;
-};
-
 export type TreeItemStateProps<
 	TFile extends FileNode = FileNode,
 	TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>,
@@ -86,7 +79,7 @@ export type TreeItemStateProps<
 	parent?: TreeItemState<TFile, TFolder, TFolder>;
 	selectedIds: () => SvelteSet<string>;
 	expandedIds: () => SvelteSet<string>;
-	clipboard: () => TreeClipboard | undefined;
+	clipboardIds: () => SvelteSet<string>;
 	isItemDisabled: () => boolean | ((node: TFile | TFolder) => boolean);
 };
 
@@ -101,7 +94,7 @@ export class TreeItemState<
 	readonly depth: number;
 	readonly #selectedIds: () => SvelteSet<string>;
 	readonly #expandedIds: () => SvelteSet<string>;
-	readonly #clipboard: () => TreeClipboard | undefined;
+	readonly #clipboardIds: () => SvelteSet<string>;
 	readonly #isItemDisabled: () => boolean | ((node: TFile | TFolder) => boolean);
 
 	constructor(props: TreeItemStateProps<TFile, TFolder, TNode>) {
@@ -111,7 +104,7 @@ export class TreeItemState<
 		this.depth = props.parent === undefined ? 0 : props.parent.depth + 1;
 		this.#selectedIds = props.selectedIds;
 		this.#expandedIds = props.expandedIds;
-		this.#clipboard = props.clipboard;
+		this.#clipboardIds = props.clipboardIds;
 		this.#isItemDisabled = props.isItemDisabled;
 	}
 
@@ -121,10 +114,7 @@ export class TreeItemState<
 
 	readonly expanded = $derived.by(() => this.#expandedIds().has(this.node.id));
 
-	readonly inClipboard = $derived.by(() => {
-		const clipboard = this.#clipboard();
-		return clipboard !== undefined && clipboard.ids.has(this.node.id);
-	});
+	readonly inClipboard = $derived.by(() => this.#clipboardIds().has(this.node.id));
 
 	readonly disabled = $derived.by(() => {
 		if (this.parent?.disabled) {