expose drag event callbacks

Author: abdel-17

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

@@ -19,6 +19,10 @@
 		item,
 		ref = $bindable(null),
 		onDragStart = noop,
+		onDragEnd = noop,
+		onDragEnter = noop,
+		onDragOver = noop,
+		onDragLeave = noop,
 		onDrop = noop,
 		onfocusin,
 		onkeydown,
@@ -45,9 +49,23 @@
 			canDrag: (args) => context.canDrag(item, args),
 			onDragStart: (args) => {
 				context.onDragStart(item, args);
-				onDragStart();
+				onDragStart({
+					input: args.location.current.input,
+					source: {
+						id: item.node.id,
+						element: args.source.element,
+					},
+				});
+			},
+			onDrop: (args) => {
+				onDragEnd({
+					input: args.location.current.input,
+					source: {
+						id: item.node.id,
+						element: args.source.element,
+					},
+				});
 			},
-			onDrop: () => onDrop(),
 		});
 	});
 
@@ -63,6 +81,66 @@
 				});
 				return canDrop;
 			},
+			onDragEnter: (args) => {
+				const source = args.source;
+				const sourceId = source.data.id;
+				if (typeof sourceId !== "string") {
+					return;
+				}
+
+				onDragEnter({
+					input: args.location.current.input,
+					source: {
+						id: sourceId,
+						element: source.element,
+					},
+				});
+			},
+			onDrag: (args) => {
+				const source = args.source;
+				const sourceId = source.data.id;
+				if (typeof sourceId !== "string") {
+					return;
+				}
+
+				onDragOver({
+					input: args.location.current.input,
+					source: {
+						id: sourceId,
+						element: source.element,
+					},
+				});
+			},
+			onDragLeave: (args) => {
+				const source = args.source;
+				const sourceId = source.data.id;
+				if (typeof sourceId !== "string") {
+					return;
+				}
+
+				onDragLeave({
+					input: args.location.current.input,
+					source: {
+						id: sourceId,
+						element: source.element,
+					},
+				});
+			},
+			onDrop: (args) => {
+				const source = args.source;
+				const sourceId = source.data.id;
+				if (typeof sourceId !== "string") {
+					return;
+				}
+
+				onDrop({
+					input: args.location.current.input,
+					source: {
+						id: sourceId,
+						element: source.element,
+					},
+				});
+			},
 		});
 	});
 

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

@@ -1,3 +1,4 @@
+import type { Input as DragInput } from "@atlaskit/pragmatic-drag-and-drop/types";
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 import type { SvelteSet } from "svelte/reactivity";
@@ -9,6 +10,8 @@ import type {
 	TreeItemState,
 } from "$lib/tree.svelte.js";
 
+export type { DragInput };
+
 export type MaybePromise<T> = T | Promise<T>;
 
 export type TreeChildrenSnippetArgs<
@@ -109,6 +112,16 @@ export interface TreeProps<
 	onRemove?: (args: OnRemoveArgs<TFile, TFolder>) => void;
 }
 
+export type DragSource = {
+	id: string;
+	element: HTMLElement;
+};
+
+export type DragEventArgs = {
+	input: DragInput;
+	source: DragSource;
+};
+
 export interface TreeItemProps<
 	TFile extends FileNode = FileNode,
 	TFolder extends FolderNode<TFile | TFolder> = DefaultTFolder<TFile>,
@@ -126,6 +139,10 @@ export interface TreeItemProps<
 	children: Snippet;
 	item: TreeItemState<TFile, TFolder>;
 	ref?: HTMLElement | null;
-	onDragStart?: () => void;
-	onDrop?: () => void;
+	onDragStart?: (args: DragEventArgs) => void;
+	onDragEnd?: (args: DragEventArgs) => void;
+	onDragEnter?: (args: DragEventArgs) => void;
+	onDragOver?: (args: DragEventArgs) => void;
+	onDragLeave?: (args: DragEventArgs) => void;
+	onDrop?: (args: DragEventArgs) => void;
 }

sites/preview/src/lib/components/TreeItem.svelte

@@ -22,7 +22,7 @@
 	onDragStart={() => {
 		dragged = true;
 	}}
-	onDrop={() => {
+	onDragEnd={() => {
 		dragged = false;
 	}}
 >