@hkdigital/lib-sveltekit 0.1.92 → 0.1.93

package/dist/components/drag-drop/DropZone.svelte

@@ -1,11 +1,8 @@
 <script>
-  import { onMount, onDestroy } from 'svelte';
   import { toStateClasses } from '../../util/design-system/index.js';
-
   import { createOrGetDragState } from './drag-state.svelte.js';
-
   import { GridLayers } from '../layout';
-
+  import { generateLocalId } from '../../util/unique';
   import {
     READY,
     DRAG_OVER,
@@ -85,66 +82,30 @@
     ...attrs
   } = $props();
 
-  // let debugEvents = [];
-
   const dragState = createOrGetDragState(contextKey);
+  const dropZoneId = generateLocalId();
 
   let currentState = $state(READY);
-
   let dropZoneElement = $state(null);
 
-  // $effect( () => {
-  //   if(dropZoneElement) {
-  //     console.debug(dropZoneElement);
-  //   }
-  // } )
-
-  let isCurrentlyOver = $state(false);
-
-  // $inspect({ zone, isCurrentlyOver });
-
-  // Cleanup function
-  let cleanup;
-
-  onMount(() => {
-    // Global dragend listener to ensure state cleanup
-    const handleGlobalDragEnd = () => {
-      isCurrentlyOver = false;
-      currentState = READY;
-    };
-
-    document.addEventListener('dragend', handleGlobalDragEnd);
-
-    // console.debug(`DropZone ${zone} mounted`);
-
-    cleanup = () => {
-      document.removeEventListener('dragend', handleGlobalDragEnd);
-    };
-
-    return cleanup;
-  });
-
   // Computed height classes based on mode
   let heightClasses = $derived.by(() => {
     const classes = [];
 
     switch (heightMode) {
       case 'flexible':
-        // Flexible height with optional min/max constraints
         if (minHeight) classes.push(minHeight);
-        else classes.push('min-h-[100px]'); // Default minimum
+        else classes.push('min-h-[100px]');
         if (maxHeight) {
           classes.push(maxHeight);
           classes.push('overflow-y-auto');
         }
         break;
       case 'fill':
-        // Fill the parent container
         classes.push('h-full');
         break;
       case 'fixed':
       default:
-        // Fixed height (default to min-height if not filling)
         classes.push('h-min');
         break;
     }
@@ -166,338 +127,84 @@
   // Update bindable props
   $effect(() => {
     isDragOver = [DRAG_OVER, CAN_DROP, CANNOT_DROP].includes(currentState);
-
     canDrop = currentState === CAN_DROP;
   });
 
-  /**
-   * Check if we can accept the dragged item
-   *
-   * @param {Object} data
-   *
-   * @returns {boolean}
-   */
-  function canAcceptDrop(data) {
-    if (disabled) return false;
-    if (!data) return false;
-    if (!accepts(data)) return false;
-    return true;
-  }
-
-  /**
-   * Get drag data from either drag state or handle file drops
-   * @param {DragEvent} event
-   * @returns {Object|null} The drag data, or null for file drops
-   */
-  function getDragData(event) {
-    // Check if this is a file drop
-    if (event.dataTransfer.types.includes('Files')) {
-      // Handle file drop - you can extend this based on your needs
-      // console.log('File drop detected:', event.dataTransfer.files);
-      return null; // Return null to indicate this is not an internal drag
-    }
-
-    // Handle internal drag operations
-    try {
-      const jsonData = event.dataTransfer.getData('application/json');
-      if (jsonData) {
-        const transferData = JSON.parse(jsonData);
-        const draggableId = transferData.draggableId;
-
-        if (draggableId) {
-          // Get the original instance from drag state
-          const dragData = dragState.getDraggable(draggableId);
-          if (dragData) {
-            return dragData;
-          }
-        }
-      }
-    } catch (error) {
-      console.error('Error getting drag data:', error);
-    }
-
-    return null;
-  }
-
-  /**
-   * Handle drag enter with improved DOM traversal check
-   * @param {DragEvent} event
-   */
-  function handleDragEnter(event) {
-    // debugEvents.push({
-    //   event: 'dragEnter',
-    //   target: event.target,
-    //   currentTarget: event.currentTarget,
-    //   isCurrentlyOver
-    // });
-
-    // console.log('dragEnter:', { zone });
-
-    // Prevent default to allow drop
-    event.preventDefault();
-
-    // Check if mouse is actually within drop zone boundaries
-    const rect = dropZoneElement.getBoundingClientRect();
-    const x = event.clientX;
-    const y = event.clientY;
-
-    const isWithinBounds =
-      x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
-
-    if (!isWithinBounds) {
-      // Don't enter if mouse is outside bounds
-      // console.debug('Mouse outside bounds', {
-      //   x,
-      //   y,
-      //   top: rect.top,
-      //   bottom: rect.bottom,
-      //   left: rect.left,
-      //   right: rect.right
-      // });
-
-      dropZoneElement.style.border = "solid 10px purple";
-      return;
-    }
-
-    if (isCurrentlyOver) {
-      // console.debug('Already over');
-      return;
-    }
-
-    isCurrentlyOver = true;
-
-    // Get the drag data
-    const dragData = getDragData(event);
-
-    // Update state based on acceptance
-    if (dragData) {
-      currentState = canAcceptDrop(dragData) ? CAN_DROP : CANNOT_DROP;
-    } else {
-      currentState = DRAG_OVER;
-    }
-
-    // Notify listeners
-    onDragEnter?.({ event, zone, canDrop: currentState === CAN_DROP });
-  }
-
-  /**
-   * Handle drag over
-   * @param {DragEvent} event
-   */
-  function handleDragOver(event) {
-    // console.log('dragOver', {zone}, event );
-    // console.log('dragOver', {
-    //     zone,
-    //     eventTarget: event.target.closest('[data-zone]')?.dataset?.zone,
-    //     currentTarget: event.currentTarget.dataset?.zone,
-    //     path: event.composedPath().map(el => el.dataset?.zone || el.tagName)
-    // });
-
-    // debugEvents.push({
-    //   event: 'handleDragOver',
-    //   target: event.target,
-    //   currentTarget: event.currentTarget,
-    //   isCurrentlyOver,
-    //   contains: dropZoneElement.contains(event.target),
-    //   mouseX: event.clientX,
-    //   mouseY: event.clientY,
-    //   dropZoneBounds: dropZoneElement.getBoundingClientRect()
-    // });
-
-    // console.log('dragOver:', {
-    //   target: event.target,
-    //   currentTarget: event.currentTarget,
-    //   isCurrentlyOver,
-    //   contains: dropZoneElement.contains(event.target)
-    // });
-
-    // Check if mouse is actually within drop zone boundaries
-    const rect = dropZoneElement.getBoundingClientRect();
-    const x = event.clientX;
-    const y = event.clientY;
-
-    const isWithinBounds =
-      x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
-
-    if (!isWithinBounds) {
-      // Mouse is outside bounds, treat as leave
-      if (isCurrentlyOver) {
-        isCurrentlyOver = false;
-        currentState = READY;
-        onDragLeave?.({ event, zone });
-      }
-      return;
-    }
-
-    // console.log('dragOver (accepted)', {zone});
-
-    // Prevent default to allow drop
-    event.preventDefault();
-
-    // If we're not currently over this drop zone, treat it as an enter
-    if (!isCurrentlyOver) {
-      handleDragEnter(event);
-      return;
-    }
-
-    // Get the drag data
-    const dragData = getDragData(event);
-
-    // Re-evaluate acceptance
-    if (dragData && [DRAG_OVER, CAN_DROP, CANNOT_DROP].includes(currentState)) {
-      currentState = canAcceptDrop(dragData) ? CAN_DROP : CANNOT_DROP;
-    }
-
-    // Set visual feedback based on drop acceptance
-    if (currentState === CAN_DROP) {
-      event.dataTransfer.dropEffect = 'move';
-    } else if (currentState === CANNOT_DROP) {
-      event.dataTransfer.dropEffect = 'none';
-    }
-
-    // Notify listeners
-    onDragOver?.({ event, zone });
-  }
-
-  /**
-   * Handle drag leave with improved DOM traversal check
-   * @param {DragEvent} event
-   */
-  function handleDragLeave(event) {
-    // debugEvents.push({
-    //   event: 'handleDragLeave',
-    //   target: event.target,
-    //   currentTarget: event.currentTarget,
-    //   relatedTarget: event.relatedTarget,
-    //   isCurrentlyOver,
-    //   isActuallyLeaving: !event.relatedTarget || !dropZoneElement.contains(event.relatedTarget)
-    // });
-
-    // console.log('dragLeave:', {
-    //   target: event.target,
-    //   currentTarget: event.currentTarget,
-    //   relatedTarget: event.relatedTarget,
-    //   isCurrentlyOver,
-    //   isActuallyLeaving: !event.relatedTarget || !dropZoneElement.contains(event.relatedTarget)
-    // });
-
-    // We need to check if we're actually leaving the drop zone or just
-    // entering a child element within the drop zone
-
-    // relatedTarget is the element we're moving to
-    const relatedTarget = event.relatedTarget;
-
-    // If relatedTarget is null or outside our drop zone, we're truly leaving
-    const isActuallyLeaving =
-      !relatedTarget || !dropZoneElement.contains(relatedTarget);
-
-    if (isActuallyLeaving) {
-      isCurrentlyOver = false;
-      currentState = READY;
-      onDragLeave?.({ event, zone });
-    }
-  }
-
-  /**
-   * Handle drop
-   * @param {DragEvent} event
-   */
-  function handleDrop(event) {
-    // console.debug( JSON.stringify(debugEvents, null, 2));
-
-    // Prevent default browser actions
-    event.preventDefault();
-
-    if (!isCurrentlyOver) {
-      // Prevent drop if not currently over
-      return;
-    }
-
-    // Reset our tracking state
-    isCurrentlyOver = false;
-
-    try {
-      // Check if this is a file drop first
-      if (event.dataTransfer.types.includes('Files')) {
-        // Handle file drops
-        const files = Array.from(event.dataTransfer.files);
-        // console.log('Files dropped:', files);
-
-        // You can add custom file handling here
-        // For now, just reset state and return
-        currentState = READY;
-        return;
-      }
-
-      // Get drag data for internal drag operations
-      const dragData = getDragData(event);
-
-      // Check if we can accept this drop
-      if (dragData && canAcceptDrop(dragData)) {
-        // Notify listener
-        onDropStart?.({ event, zone, data: dragData });
-
-        const style = window.getComputedStyle(dropZoneElement);
-
-        // Parse border widths from computed style
-        const borderLeftWidth = parseInt(style.borderLeftWidth, 10) || 0;
-        const borderTopWidth = parseInt(style.borderTopWidth, 10) || 0;
-
-        // Get drop zone rectangle
-        const dropZoneRect = dropZoneElement.getBoundingClientRect();
-
-        // Calculate position with both dragData.offsetX/Y adjustment and border adjustment
-        const dropOffsetX = event.clientX - dropZoneRect.left - borderLeftWidth;
-
-        const dropOffsetY = event.clientY - dropZoneRect.top - borderTopWidth;
-
-        const x = dropOffsetX - (dragData.offsetX ?? 0);
-        const y = dropOffsetY - (dragData.offsetY ?? 0);
-
-        const dropResult = onDrop?.({
-          zone,
-          source: dragData.source,
-          item: dragData.item,
-          x,
-          y,
-          drag: dragData,
-          drop: {
-            offsetX: dropOffsetX,
-            offsetY: dropOffsetY,
-            event
+  // Register/unregister with drag state
+  $effect(() => {
+    if (dropZoneElement) {
+      // Register this dropzone
+      dragState.registerDropZone(dropZoneId, {
+        zone,
+        group,
+        accepts: (dragData) => {
+          if (disabled) return false;
+          if (!dragData) return false;
+          return accepts(dragData);
+        },
+        onDragEnter: (detail) => {
+          currentState = detail.canDrop ? CAN_DROP : CANNOT_DROP;
+          onDragEnter?.(detail);
+        },
+        onDragOver: (detail) => {
+          onDragOver?.(detail);
+        },
+        onDragLeave: (detail) => {
+          currentState = READY;
+          onDragLeave?.(detail);
+        },
+        onDrop: async (dropData) => {
+          currentState = READY;
+
+          try {
+            onDropStart?.({
+              event: dropData.drop.event,
+              zone: dropData.zone,
+              data: dropData.drag
+            });
+
+            const result = await onDrop?.(dropData);
+
+            onDropEnd?.({
+              event: dropData.drop.event,
+              zone: dropData.zone,
+              data: dropData.drag,
+              success: true
+            });
+
+            return result;
+          } catch (error) {
+            onDropEnd?.({
+              event: dropData.drop.event,
+              zone: dropData.zone,
+              data: dropData.drag,
+              success: false,
+              error
+            });
+            throw error;
           }
-        });
-
-        // Handle async or sync results
-        Promise.resolve(dropResult)
-          .then(() => {
-            currentState = READY;
-            onDropEnd?.({ event, zone, data: dragData, success: true });
-          })
-          .catch((error) => {
-            currentState = READY;
-            onDropEnd?.({ event, zone, data: dragData, success: false, error });
-          });
-      } else {
-        // Not a valid drop, reset state
-        currentState = READY;
-      }
-    } catch (error) {
-      // Handle parsing errors
-      console.error('Drop error:', error);
-      currentState = READY;
+        },
+        element: dropZoneElement
+      });
+
+      // Cleanup on unmount
+      return () => {
+        dragState.unregisterDropZone(dropZoneId);
+      };
     }
-  }
+  });
 
-  // console.log(`DropZone ${zone} script run`);
+  // Monitor drag state to update preview
+  let showPreview = $derived(
+    dragState.activeDropZone === dropZoneId &&
+    currentState === CAN_DROP &&
+    dropPreviewSnippet
+  );
 </script>
+
 <div
   data-component="drop-zone"
   bind:this={dropZoneElement}
-  ondragenter={handleDragEnter}
-  ondragover={handleDragOver}
-  ondragleave={handleDragLeave}
-  ondrop={handleDrop}
   class="{base} {heightClasses} {classes} {stateClasses}"
   data-zone={zone}
   {...attrs}
@@ -513,7 +220,7 @@
       </div>
     {/if}
 
-    {#if currentState === CAN_DROP && dropPreviewSnippet}
+    {#if showPreview && dropPreviewSnippet}
       <div data-layer="preview">
         {@render dropPreviewSnippet(dragState.current)}
       </div>
@@ -522,6 +229,10 @@
 </div>
 
 <style>
+  [data-component="drop-zone"] {
+    -webkit-tap-highlight-color: transparent;
+  }
+
   [data-layer='content']:not(.relative) {
     position: absolute;
     left: 0;

package/dist/components/drag-drop/drag-state.svelte.d.ts

@@ -1,8 +1,63 @@
 export const createOrGetDragState: (contextKey?: import("../../typedef").ContextKey) => DragState;
 export const createDragState: (contextKey?: import("../../typedef").ContextKey) => DragState;
 export const getDragState: (contextKey?: import("../../typedef").ContextKey) => DragState;
+export type SimulatedDragEvent = import("../../typedef").SimulatedDragEvent;
+/** @typedef {import('../../typedef').SimulatedDragEvent} SimulatedDragEvent */
 declare class DragState {
     draggables: Map<any, any>;
+    dropZones: Map<any, any>;
+    activeDropZone: any;
+    lastActiveDropZone: any;
+    /**
+     * Register a dropzone
+     * @param {string} zoneId
+     * @param {Object} config
+     * @param {string} config.zone
+     * @param {string} config.group
+     * @param {Function} config.accepts
+     * @param {Function} config.onDragEnter
+     * @param {Function} config.onDragOver
+     * @param {Function} config.onDragLeave
+     * @param {(DropData) => void} config.onDrop
+     * @param {HTMLElement} config.element
+     */
+    registerDropZone(zoneId: string, config: {
+        zone: string;
+        group: string;
+        accepts: Function;
+        onDragEnter: Function;
+        onDragOver: Function;
+        onDragLeave: Function;
+        onDrop: (DropData: any) => void;
+        element: HTMLElement;
+    }): void;
+    /**
+     * Unregister a dropzone
+     * @param {string} zoneId
+     */
+    unregisterDropZone(zoneId: string): void;
+    /**
+     * Get dropzone at coordinates
+     * @param {number} x
+     * @param {number} y
+     * @returns {Object|null}
+     */
+    getDropZoneAtPoint(x: number, y: number): any | null;
+    /**
+     * Update active dropzone based on coordinates
+     *
+     * @param {number} x
+     * @param {number} y
+     * @param {DragEvent|SimulatedDragEvent} event
+     */
+    updateActiveDropZone(x: number, y: number, event: DragEvent | SimulatedDragEvent): void;
+    /**
+     * Handle drop at coordinates
+     * @param {number} x
+     * @param {number} y
+     * @param {DragEvent|SimulatedDragEvent} event
+     */
+    handleDropAtPoint(x: number, y: number, event: DragEvent | SimulatedDragEvent): void;
     /**
      * @param {string} draggableId
      * @param {import('../../typedef/drag.js').DragData} dragData
@@ -13,10 +68,20 @@ declare class DragState {
      */
     end(draggableId: string): void;
     /**
+     * Get a drag data by draggable id
+     *
      * @param {string} draggableId
      * @returns {import('../../typedef/drag.js').DragData|undefined}
      */
-    getDraggable(draggableId: string): import("../../typedef/drag.js").DragData | undefined;
+    getDraggableById(draggableId: string): import("../../typedef/drag.js").DragData | undefined;
+    /**
+     * Get a drag data. Extracts draggable id from the supplied DragEvent
+     *
+     * @param {DragEvent|SimulatedDragEvent} event
+     *
+     * @returns {Object|null} The drag data, or null for file drops
+     */
+    getDraggable(event: DragEvent | SimulatedDragEvent): any | null;
     /**
      * Get the most recently started drag operation (convenience method)
      * @returns {import('../../typedef/drag.js').DragData|undefined}