work on drag drop (#58)

mar10 · Oct 8, 2023 · 6c0b03c · 6c0b03c
1 parent 9a2be3a
commit 6c0b03c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/types.ts b/src/types.ts
@@ -794,7 +794,7 @@ export type DndOptionsType = {
   //  */
   // dropEffect: "auto";
   /**
-   * Default dropEffect ('copy', 'link', or 'move') when no modifier is pressed (overide in dragDrag, dragOver).
+   * Default dropEffect ('copy', 'link', or 'move') when no modifier is pressed (overide in drag, dragOver).
    * @default "move"
    */
   dropEffectDefault: string;
@@ -873,12 +873,12 @@ export type DndOptionsType = {
    * Callback(sourceNode, data)
    * @default null
    */
-  dragDrag: null;
+  drag: null | ((e: WbNodeEventType & { event: DragEvent }) => void);
   /**
    * Callback(sourceNode, data)
    * @default null
    */
-  dragEnd: null;
+  dragEnd: null | ((e: WbNodeEventType & { event: DragEvent }) => void);
   // Events (drop support)
   /**
    * Callback(targetNode, data), return true, to enable dnd drop
@@ -889,12 +889,12 @@ export type DndOptionsType = {
    * Callback(targetNode, data)
    * @default null
    */
-  dragOver: null;
+  dragOver: null | ((e: WbNodeEventType & { event: DragEvent }) => void);
   /**
    * Callback(targetNode, data), return false to prevent autoExpand
    * @default null
    */
-  dragExpand?: null | ((e: WbNodeEventType & { event: DragEvent }) => void);
+  dragExpand?: null | ((e: WbNodeEventType & { event: DragEvent }) => boolean);
   /**
    * Callback(targetNode, data)
    * @default null

diff --git a/src/wb_ext_dnd.ts b/src/wb_ext_dnd.ts
@@ -36,7 +36,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
       multiSource: false, // true: Drag multiple (i.e. selected) nodes. Also a callback() is allowed
       effectAllowed: "all", // Restrict the possible cursor shapes and modifier operations (can also be set in the dragStart event)
       // dropEffect: "auto", // 'copy'|'link'|'move'|'auto'(calculate from `effectAllowed`+modifier keys) or callback(node, data) that returns such string.
-      dropEffectDefault: "move", // Default dropEffect ('copy', 'link', or 'move') when no modifier is pressed (overide in dragDrag, dragOver).
+      dropEffectDefault: "move", // Default dropEffect ('copy', 'link', or 'move') when no modifier is pressed (overide in drag, dragOver).
       preventForeignNodes: false, // Prevent dropping nodes from different Wunderbaum trees
       preventLazyParents: true, // Prevent dropping items on unloaded lazy Wunderbaum tree nodes
       preventNonNodes: false, // Prevent dropping items other than Wunderbaum tree nodes
@@ -52,7 +52,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
       sourceCopyHook: null, // Optional callback passed to `toDict` on dragStart @since 2.38
       // Events (drag support)
       dragStart: null, // Callback(sourceNode, data), return true, to enable dnd drag
-      dragDrag: null, // Callback(sourceNode, data)
+      drag: null, // Callback(sourceNode, data)
       dragEnd: null, // Callback(sourceNode, data)
       // Events (drop support)
       dragEnter: null, // Callback(targetNode, data), return true, to enable dnd drop
@@ -207,7 +207,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
 
   protected onDragEvent(e: DragEvent) {
     // const tree = this.tree;
-    const dndOpts = this.treeOpts.dnd;
+    const dndOpts: DndOptionsType = this.treeOpts.dnd;
     const srcNode = Wunderbaum.getNode(e);
 
     if (!srcNode) {
@@ -258,14 +258,15 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
 
       // --- drag ---
     } else if (e.type === "drag") {
-      // This event occurs very often...
+      if (dndOpts.drag) srcNode._callEvent("dnd.drag", { event: e });
       // --- dragend ---
     } else if (e.type === "dragend") {
       srcNode.setClass("wb-drag-source", false);
       this.srcNode = null;
       if (this.lastTargetNode) {
         this._leaveNode();
       }
+      if (dndOpts.dragEnd) srcNode._callEvent("dnd.dragEnd", { event: e });
     }
     return true;
   }
@@ -275,7 +276,7 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
     const srcNode = this.srcNode;
     const srcTree = srcNode ? srcNode.tree : null;
     const targetNode = Wunderbaum.getNode(e)!;
-    const dndOpts = this.treeOpts.dnd;
+    const dndOpts: DndOptionsType = this.treeOpts.dnd;
     const dt = e.dataTransfer!;
 
     if (!targetNode) {
@@ -353,6 +354,8 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
       const viewportY = e.clientY - this.tree.element.offsetTop;
       this.autoScroll(viewportY);
 
+      if (dndOpts.dragOver) targetNode._callEvent("dnd.dragOver", { event: e });
+
       const region = this._calcDropRegion(e, this.lastAllowedDropRegions);
 
       this.lastDropRegion = region;
@@ -383,6 +386,8 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
     } else if (e.type === "dragleave") {
       // NOTE: we cannot trust this event, since it is always fired,
       // Instead we remove the marker on dragenter
+      if (dndOpts.dragLeave)
+        targetNode._callEvent("dnd.dragLeave", { event: e });
       // --- drop ---
     } else if (e.type === "drop") {
       e.stopPropagation(); // prevent browser from opening links?