@hkdigital/lib-sveltekit 0.1.80 → 0.1.82

package/dist/components/drag-drop/{PreviewController.d.ts → DragController.d.ts}

@@ -1,7 +1,8 @@
 /**
- * Controller for customizing drag preview images
+ * Controller for customizing drag
+ * E.g. set a custom preview image
  */
-export class PreviewController {
+export class DragController {
     /**
      * @param {DragEvent} event - The drag event
      */

package/dist/components/drag-drop/{PreviewController.js → DragController.js}

@@ -1,7 +1,8 @@
 /**
- * Controller for customizing drag preview images
+ * Controller for customizing drag
+ * E.g. set a custom preview image
  */
-export class PreviewController {
+export class DragController {
   /**
    * @param {DragEvent} event - The drag event
    */

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

@@ -1,12 +1,9 @@
 <script>
   import { toStateClasses } from '../../util/design-system/index.js';
-
   import { createOrGetDragState } from './drag-state.svelte.js';
-
-  import { PreviewController } from './PreviewController.js';
-
+  import { DragController } from './DragController.js';
   import { generateLocalId } from '../../util/unique';
-
+  import { onDestroy } from 'svelte';
   import {
     IDLE,
     DRAGGING,
@@ -25,6 +22,10 @@
    *   base?: string,
    *   classes?: string,
    *   children: import('svelte').Snippet,
+   *   draggingSnippet?: import('svelte').Snippet<[{
+   *     element: HTMLElement,
+   *     rect: DOMRect
+   *   }]>,
    *   contextKey?: import('../../typedef').ContextKey,
    *   isDragging?: boolean,
    *   isDropping?: boolean,
@@ -34,7 +35,7 @@
    *     item: any,
    *     source: string,
    *     group: string,
-   *     getPreviewController: () => PreviewController
+   *     getController: () => DragController
    *   }) => void,
    *   onDragging?: (detail: {
    *     event: DragEvent,
@@ -63,6 +64,7 @@
     base = '',
     classes = '',
     children,
+    draggingSnippet,
     contextKey,
     isDragging = $bindable(false),
     isDropping = $bindable(false),
@@ -79,11 +81,21 @@
 
   const draggableId = generateLocalId();
 
-  // console.debug('Draggable contextKey:', contextKey);
+  // svelte-ignore non_reactive_update
+  let draggableElement;
 
   let dragTimeout = null;
   let currentState = $state(IDLE);
 
+  // Custom preview follower state
+  let showPreview = $state(false);
+  let previewX = $state(0);
+  let previewY = $state(0);
+  let dragOffsetX = $state(0);
+  let dragOffsetY = $state(0);
+  let customPreviewSet = $state(false);
+  let elementRect = $state(null);
+
   // Computed state object for CSS classes
   let stateObject = $derived({
     idle: currentState === IDLE,
@@ -102,6 +114,28 @@
     isDragPreview = currentState === DRAG_PREVIEW;
   });
 
+  // Clean up on component destroy
+  onDestroy(() => {
+    if (showPreview) {
+      document.removeEventListener('dragover', handleDocumentDragOver);
+    }
+  });
+
+  /**
+   * Handle document level dragover to ensure we get position updates
+   * @param {DragEvent} event
+   */
+  function handleDocumentDragOver(event) {
+    if (showPreview && currentState === DRAGGING) {
+      // Update position for the custom preview
+      previewX = event.clientX - dragOffsetX;
+      previewY = event.clientY - dragOffsetY;
+
+      // Prevent default to allow drop
+      event.preventDefault();
+    }
+  }
+
   /**
    * Handle drag start
    * @param {DragEvent} event
@@ -128,40 +162,81 @@
     startDrag(event);
   }
 
-  /**
-   * Start the drag operation
-   * @param {DragEvent} event
-   */
-  function startDrag(event) {
-    const dragData = {
-      item,
-      source,
-      group,
-      metadata: { timestamp: Date.now() }
-    };
+/**
+ * Start the drag operation
+ * @param {DragEvent} event - The drag event
+ */
+function startDrag(event) {
+  // Get the element's bounding rectangle
+  const rect = draggableElement.getBoundingClientRect();
+
+  // Calculate grab offsets - this is where the user grabbed the element
+  dragOffsetX = event.clientX - rect.left;
+  dragOffsetY = event.clientY - rect.top;
+
+  // Create drag data with your preferred structure
+  const dragData = {
+    offsetX: dragOffsetX,
+    offsetY: dragOffsetY,
+    item,
+    source,
+    group,
+    metadata: {
+      timestamp: Date.now()
+    }
+  };
+
+  // Set shared drag state
+  dragState.start(draggableId, dragData);
+
+  // Set data transfer for browser drag and drop API
+  event.dataTransfer.effectAllowed = 'move';
+  event.dataTransfer.setData('application/json', JSON.stringify(dragData));
 
-    // Set shared drag state
-    dragState.start(draggableId, dragData);
+  // Create the preview controller
+  const previewController = new DragController(event);
 
-    event.dataTransfer.effectAllowed = 'move';
-    event.dataTransfer.setData('application/json', JSON.stringify(dragData));
+  // Function to get the preview controller
+  const getController = () => previewController;
 
-    // Create the preview controller with natural offsets already calculated
-    const previewController = new PreviewController(event);
+  // Call onDragStart with the getController function
+  onDragStart?.({ event, item, source, group, getController });
 
-    // Function to get the preview controller
-    const getPreviewController = () => previewController;
+  // Apply drag preview if available
+  if (draggingSnippet && !previewController.hasCustomPreview()) {
+    try {
+      // Store rectangle information for the snippet
+      elementRect = rect;
 
-    // Call onDragStart with the getPreviewController function
-    onDragStart?.({ event, item, source, group, getPreviewController });
+      // These offsets represent where the user grabbed the element relative to its top-left corner
+      dragOffsetX = event.clientX - rect.left;
+      dragOffsetY = event.clientY - rect.top;
 
-    // Apply default preview if no custom one was set
-    if (!previewController.hasCustomPreview()) {
+      // Set initial position - this places the preview at the element's original position
+      previewX = rect.left;
+      previewY = rect.top;
+
+      // Set a transparent 1x1 pixel image to hide browser's default preview
+      const emptyImg = new Image();
+      emptyImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+      event.dataTransfer.setDragImage(emptyImg, 0, 0);
+
+      // Add document level event listener to track mouse movement
+      document.addEventListener('dragover', handleDocumentDragOver);
+
+      // Show custom preview
+      showPreview = true;
+      customPreviewSet = true;
+    } catch (err) {
+      console.error('Error setting up custom preview:', err);
+      // Fallback to default preview
       previewController.applyDefaultPreview();
     }
-
-    // Additional handlers can be left unchanged
+  } else if (!previewController.hasCustomPreview()) {
+    // Apply default preview if no custom preview was set
+    previewController.applyDefaultPreview();
   }
+}
 
   /**
    * Handle during drag
@@ -183,6 +258,14 @@
     // Clear global drag state
     dragState.end(draggableId);
 
+    // Clean up document event listener
+    if (customPreviewSet) {
+      document.removeEventListener('dragover', handleDocumentDragOver);
+      showPreview = false;
+      customPreviewSet = false;
+      elementRect = null;
+    }
+
     // Check if drop was successful
     const wasDropped = event.dataTransfer.dropEffect !== 'none';
 
@@ -226,6 +309,7 @@
 <div
   data-component="draggable"
   data-id={draggableId}
+  bind:this={draggableElement}
   draggable={!disabled && canDrag(item)}
   ondragstart={handleDragStart}
   ondrag={handleDrag}
@@ -237,3 +321,14 @@
 >
   {@render children()}
 </div>
+
+{#if draggingSnippet && showPreview && elementRect}
+  <div
+    data-companion="drag-preview-follower"
+    style="position: fixed; z-index: 9999; pointer-events: none;"
+    style:left="{previewX}px"
+    style:top="{previewY}px"
+  >
+    {@render draggingSnippet({ element: draggableElement, rect: elementRect })}
+  </div>
+{/if}

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

@@ -11,6 +11,10 @@ type Draggable = {
         base?: string;
         classes?: string;
         children: Snippet<[]>;
+        draggingSnippet?: Snippet<[{
+            element: HTMLElement;
+            rect: DOMRect;
+        }]>;
         contextKey?: ContextKey;
         isDragging?: boolean;
         isDropping?: boolean;
@@ -20,7 +24,7 @@ type Draggable = {
             item: any;
             source: string;
             group: string;
-            getPreviewController: () => PreviewController;
+            getController: () => DragController;
         }) => void;
         onDragging?: (detail: {
             event: DragEvent;
@@ -49,6 +53,10 @@ declare const Draggable: import("svelte").Component<{
     base?: string;
     classes?: string;
     children: import("svelte").Snippet;
+    draggingSnippet?: import("svelte").Snippet<[{
+        element: HTMLElement;
+        rect: DOMRect;
+    }]>;
     contextKey?: import("../../typedef").ContextKey;
     isDragging?: boolean;
     isDropping?: boolean;
@@ -58,7 +66,7 @@ declare const Draggable: import("svelte").Component<{
         item: any;
         source: string;
         group: string;
-        getPreviewController: () => PreviewController;
+        getController: () => DragController;
     }) => void;
     onDragging?: (detail: {
         event: DragEvent;
@@ -76,4 +84,4 @@ declare const Draggable: import("svelte").Component<{
     }) => void;
     canDrag?: (item: any) => boolean;
 }, {}, "isDragging" | "isDropping" | "isDragPreview">;
-import { PreviewController } from './PreviewController.js';
+import { DragController } from './DragController.js';

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

@@ -4,10 +4,12 @@
 
   import { createOrGetDragState } from './drag-state.svelte.js';
 
+  import { GridLayers } from '../layout';
+
   import {
-    findDraggableSource,
+    // findDraggableSource,
     getDraggableIdFromEvent,
-    processDropWithData
+    // processDropWithData
   } from './util.js';
 
   import {
@@ -15,32 +17,27 @@
     DRAG_OVER,
     CAN_DROP,
     CANNOT_DROP,
-    DROP_DISABLED,
-    ACTIVE_DROP
+    // DROP_DISABLED
   } from '../../constants/state-labels/drop-states.js';
 
+  /** @typedef {import('../../typedef').DragData} DragData */
+  /** @typedef {import('../../typedef').DropData} DropData */
+
   /**
    * @type {{
    *   zone?: string,
    *   group?: string,
    *   disabled?: boolean,
    *   accepts?: (item: any) => boolean,
-   *   maxItems?: number,
    *   base?: string,
    *   classes?: string,
+   *   height?: string,
+   *   autoHeight?: boolean,
    *   children?: import('svelte').Snippet,
    *   contextKey?: import('../../typedef').ContextKey,
-   *   empty?: import('svelte').Snippet,
-   *   preview?: import('svelte').Snippet<[{
-   *     item: any,
-   *     source: string,
-   *     group: string,
-   *     metadata?: any
-   *   }]>,
+   *   dropPreviewSnippet?: import('svelte').Snippet<[DragData]>,
    *   isDragOver?: boolean,
    *   canDrop?: boolean,
-   *   isDropping?: boolean,
-   *   itemCount?: number,
    *   onDragEnter?: (detail: {
    *     event: DragEvent,
    *     zone: string,
@@ -54,13 +51,7 @@
    *     event: DragEvent,
    *     zone: string
    *   }) => void,
-   *   onDrop?: (detail: {
-   *     event: DragEvent,
-   *     zone: string,
-   *     item: any,
-   *     source: string,
-   *     metadata?: any
-   *   }) => any | Promise<any>,
+   *   onDrop?: (detail: DropData) => any | Promise<any>,
    *   onDropStart?: (detail: {
    *     event: DragEvent,
    *     zone: string,
@@ -81,17 +72,15 @@
     group = 'default',
     disabled = false,
     accepts = () => true,
-    maxItems = Infinity,
     base = '',
     classes = '',
+    height = 'h-min',
+    autoHeight= false,
     children,
     contextKey,
-    empty,
-    preview,
+    dropPreviewSnippet,
     isDragOver = $bindable(false),
     canDrop = $bindable(false),
-    isDropping = $bindable(false),
-    itemCount = $bindable(0),
     onDragEnter,
     onDragOver,
     onDragLeave,
@@ -140,8 +129,7 @@
     'drag-over': currentState === DRAG_OVER,
     'can-drop': currentState === CAN_DROP,
     'cannot-drop': currentState === CANNOT_DROP,
-    'drop-disabled': disabled,
-    'active-drop': currentState === ACTIVE_DROP
+    'drop-disabled': disabled
   });
 
   let stateClasses = $derived(toStateClasses(stateObject));
@@ -155,7 +143,6 @@
     ].includes(currentState);
 
     canDrop = currentState === CAN_DROP;
-    isDropping = currentState === ACTIVE_DROP;
   });
 
   /**
@@ -172,7 +159,6 @@
     if (!data) return false;
     if (data.group !== group) return false;
     if (!accepts(data.item)) return false;
-    if (itemCount >= maxItems) return false;
     return true;
   }
 
@@ -321,13 +307,30 @@ function handleDrop(event) {
 
     // Check if we can accept this drop
     if (dragData && canAcceptDrop(dragData)) {
-      // Update state and notify listeners
-      currentState = ACTIVE_DROP;
+      // Notify listener
       onDropStart?.({ event, zone, data: dragData });
 
-      // Call the onDrop handler and handle Promise resolution
+      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 dropzone rectangle
+      const dropzoneRect = dropzoneElement.getBoundingClientRect();
+
+      // Calculate position with both dragData.offsetX/Y adjustment and border adjustment
+      // This combines your current approach with the border adjustment
+      const offsetX = event.clientX - dropzoneRect.left - borderLeftWidth - (dragData.offsetX ?? 0);
+
+      const offsetY = event.clientY - dropzoneRect.top - borderTopWidth - (dragData.offsetY ?? 0);
+
+      // console.debug("dragData", dragData);
+
       const dropResult = onDrop?.({
         event,
+        offsetX,
+        offsetY,
         zone,
         item: dragData.item,
         source: dragData.source,
@@ -361,17 +364,45 @@ function handleDrop(event) {
   ondragover={handleDragOver}
   ondragleave={handleDragLeave}
   ondrop={handleDrop}
-  class="{base} {classes} {stateClasses}"
+  class="{base} {height} {classes} {stateClasses}"
   data-zone={zone}
   {...attrs}
 >
-  {#if children}
-    {@render children()}
-  {:else if currentState === CAN_DROP && preview}
-    {@render preview(dragState.current)}
-  {:else if itemCount === 0 && empty}
-    {@render empty()}
-  {:else}
-    <div data-element="drop-zone-empty">Drop items here</div>
-  {/if}
+  <GridLayers heightFrom={autoHeight ? 'content' : null}>
+    {#if children}
+      <div data-layer="content" class:auto-height={autoHeight}>
+        {@render children()}
+      </div>
+    {/if}
+
+    {#if currentState === CAN_DROP && dropPreviewSnippet}
+      <div data-layer="preview">
+        {@render dropPreviewSnippet(dragState.current)}
+      </div>
+    {/if}
+  </GridLayers>
 </div>
+
+<style>
+  [data-layer='content']:not(.auto-height) {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  [data-layer='content'].auto-height {
+    position: relative;
+    width: 100%;
+  }
+
+  [data-layer='preview'] {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+</style>

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

@@ -7,22 +7,15 @@ type DropZone = {
         group?: string;
         disabled?: boolean;
         accepts?: (item: any) => boolean;
-        maxItems?: number;
         base?: string;
         classes?: string;
+        height?: string;
+        autoHeight?: boolean;
         children?: Snippet<[]>;
         contextKey?: ContextKey;
-        empty?: Snippet<[]>;
-        preview?: Snippet<[{
-            item: any;
-            source: string;
-            group: string;
-            metadata?: any;
-        }]>;
+        dropPreviewSnippet?: Snippet<[DragData]>;
         isDragOver?: boolean;
         canDrop?: boolean;
-        isDropping?: boolean;
-        itemCount?: number;
         onDragEnter?: (detail: {
             event: DragEvent;
             zone: string;
@@ -36,13 +29,7 @@ type DropZone = {
             event: DragEvent;
             zone: string;
         }) => void;
-        onDrop?: (detail: {
-            event: DragEvent;
-            zone: string;
-            item: any;
-            source: string;
-            metadata?: any;
-        }) => any;
+        onDrop?: (detail: DropData) => any;
         onDropStart?: (detail: {
             event: DragEvent;
             zone: string;
@@ -63,22 +50,15 @@ declare const DropZone: import("svelte").Component<{
     group?: string;
     disabled?: boolean;
     accepts?: (item: any) => boolean;
-    maxItems?: number;
     base?: string;
     classes?: string;
+    height?: string;
+    autoHeight?: boolean;
     children?: import("svelte").Snippet;
     contextKey?: import("../../typedef").ContextKey;
-    empty?: import("svelte").Snippet;
-    preview?: import("svelte").Snippet<[{
-        item: any;
-        source: string;
-        group: string;
-        metadata?: any;
-    }]>;
+    dropPreviewSnippet?: import("svelte").Snippet<[import("../../typedef").DragData]>;
     isDragOver?: boolean;
     canDrop?: boolean;
-    isDropping?: boolean;
-    itemCount?: number;
     onDragEnter?: (detail: {
         event: DragEvent;
         zone: string;
@@ -92,13 +72,7 @@ declare const DropZone: import("svelte").Component<{
         event: DragEvent;
         zone: string;
     }) => void;
-    onDrop?: (detail: {
-        event: DragEvent;
-        zone: string;
-        item: any;
-        source: string;
-        metadata?: any;
-    }) => any | Promise<any>;
+    onDrop?: (detail: import("../../typedef").DropData) => any | Promise<any>;
     onDropStart?: (detail: {
         event: DragEvent;
         zone: string;
@@ -111,4 +85,4 @@ declare const DropZone: import("svelte").Component<{
         success: boolean;
         error?: Error;
     }) => void;
-}, {}, "isDropping" | "isDragOver" | "canDrop" | "itemCount">;
+}, {}, "isDragOver" | "canDrop">;