@hkdigital/lib-sveltekit 0.1.79 → 0.1.81

package/dist/components/drag-drop/DragController.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Controller for customizing drag
+ * E.g. set a custom preview image
+ */
+export class DragController {
+    /**
+     * @param {DragEvent} event - The drag event
+     */
+    constructor(event: DragEvent);
+    event: DragEvent;
+    dataTransfer: DataTransfer;
+    targetElement: HTMLElement;
+    offsetX: number;
+    offsetY: number;
+    _previewSet: boolean;
+    /**
+     * Create a preview image from the current draggable element or a specific child element
+     * @param {string} [selector] - Optional CSS selector to target a specific child element
+     * @returns {HTMLElement} - The created preview element
+     */
+    grabPreviewImage(selector?: string): HTMLElement;
+    /**
+     * Set a custom element as the drag preview image
+     * @param {HTMLElement} element - Element to use as drag preview
+     * @param {number} [offsetX] - Horizontal offset (uses natural offset if omitted)
+     * @param {number} [offsetY] - Vertical offset (uses natural offset if omitted)
+     * @returns {boolean} - Whether setting the preview was successful
+     */
+    setPreviewImage(element: HTMLElement, offsetX?: number, offsetY?: number): boolean;
+    /**
+     * Check if a custom preview has been set
+     * @returns {boolean}
+     */
+    hasCustomPreview(): boolean;
+    /**
+     * Apply the default preview (uses the draggable element itself)
+     * @returns {boolean}
+     */
+    applyDefaultPreview(): boolean;
+}

package/dist/components/drag-drop/DragController.js

@@ -0,0 +1,113 @@
+/**
+ * Controller for customizing drag
+ * E.g. set a custom preview image
+ */
+export class DragController {
+  /**
+   * @param {DragEvent} event - The drag event
+   */
+  constructor(event) {
+    this.event = event;
+    this.dataTransfer = event.dataTransfer;
+    this.targetElement = /** @type {HTMLElement} */ (event.currentTarget);
+
+    // Calculate natural offsets by default (to prevent "jumping")
+    const rect = this.targetElement.getBoundingClientRect();
+    this.offsetX = event.clientX - rect.left;
+    this.offsetY = event.clientY - rect.top;
+
+    this._previewSet = false;
+  }
+
+  /**
+   * Create a preview image from the current draggable element or a specific child element
+   * @param {string} [selector] - Optional CSS selector to target a specific child element
+   * @returns {HTMLElement} - The created preview element
+   */
+  grabPreviewImage(selector = null) {
+    // Find the source element (either the whole draggable or a specific child)
+    const sourceElement = selector
+      ? this.targetElement.querySelector(selector)
+      : this.targetElement;
+
+    if (!sourceElement) {
+      console.error(`Element with selector "${selector}" not found`);
+      return this.grabPreviewImage(); // Fallback to the main element
+    }
+
+    // Clone the element to create the preview
+    const previewElement = /** @type {HTMLElement} */ (
+      sourceElement.cloneNode(true)
+    );
+
+    // Position off-screen (needed for setDragImage to work properly)
+    previewElement.style.position = 'absolute';
+    previewElement.style.top = '-9999px';
+    previewElement.style.left = '-9999px';
+
+    // Add to the document temporarily
+    document.body.appendChild(previewElement);
+
+    return previewElement;
+  }
+
+  /**
+   * Set a custom element as the drag preview image
+   * @param {HTMLElement} element - Element to use as drag preview
+   * @param {number} [offsetX] - Horizontal offset (uses natural offset if omitted)
+   * @param {number} [offsetY] - Vertical offset (uses natural offset if omitted)
+   * @returns {boolean} - Whether setting the preview was successful
+   */
+  setPreviewImage(element, offsetX, offsetY) {
+    if (!this.dataTransfer || !this.dataTransfer.setDragImage) {
+      return false;
+    }
+
+    // Use provided offsets or fall back to natural offsets
+    const finalOffsetX = offsetX !== undefined ? offsetX : this.offsetX;
+    const finalOffsetY = offsetY !== undefined ? offsetY : this.offsetY;
+
+    try {
+      this.dataTransfer.setDragImage(element, finalOffsetX, finalOffsetY);
+      this._previewSet = true;
+      return true;
+    } catch (err) {
+      console.error('Failed to set drag preview image:', err);
+      return false;
+    }
+  }
+
+  /**
+   * Check if a custom preview has been set
+   * @returns {boolean}
+   */
+  hasCustomPreview() {
+    return this._previewSet;
+  }
+
+  /**
+   * Apply the default preview (uses the draggable element itself)
+   * @returns {boolean}
+   */
+  applyDefaultPreview() {
+    if (
+      !this.dataTransfer ||
+      !this.dataTransfer.setDragImage ||
+      this._previewSet
+    ) {
+      return false;
+    }
+
+    try {
+      this.dataTransfer.setDragImage(
+        this.targetElement,
+        this.offsetX,
+        this.offsetY
+      );
+      return true;
+    } catch (err) {
+      console.error('Failed to set default drag preview:', err);
+      return false;
+    }
+  }
+}

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

@@ -1,10 +1,9 @@
 <script>
   import { toStateClasses } from '../../util/design-system/index.js';
-
   import { createOrGetDragState } from './drag-state.svelte.js';
-
+  import { DragController } from './DragController.js';
   import { generateLocalId } from '../../util/unique';
-
+  import { onDestroy } from 'svelte';
   import {
     IDLE,
     DRAGGING,
@@ -23,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,
@@ -31,7 +34,8 @@
    *     event: DragEvent,
    *     item: any,
    *     source: string,
-   *     group: string
+   *     group: string,
+   *     getController: () => DragController
    *   }) => void,
    *   onDragging?: (detail: {
    *     event: DragEvent,
@@ -60,6 +64,7 @@
     base = '',
     classes = '',
     children,
+    draggingSnippet,
     contextKey,
     isDragging = $bindable(false),
     isDropping = $bindable(false),
@@ -76,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,
@@ -99,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
@@ -143,24 +180,51 @@
     event.dataTransfer.effectAllowed = 'move';
     event.dataTransfer.setData('application/json', JSON.stringify(dragData));
 
-    // Set custom drag image if needed
-    if (event.dataTransfer.setDragImage) {
-      // Custom drag image
-      const dragEl = /** @type {HTMLElement} */ (event.currentTarget);
-
-
-      // Get the bounding rectangle of the element
-      const rect = dragEl.getBoundingClientRect();
-
-      // Calculate offsets relative to the element's top-left corner
-      const offsetX = event.clientX - rect.left;
-      const offsetY = event.clientY - rect.top;
-
-      // Use the element as drag image with calculated offsets
-      event.dataTransfer.setDragImage(dragEl, offsetX, offsetY);
+    // Create the preview controller with natural offsets already calculated
+    const previewController = new DragController(event);
+
+    // Function to get the preview controller
+    const getController = () => previewController;
+
+    // Call onDragStart with the getController function
+    onDragStart?.({ event, item, source, group, getController });
+
+    // Check if we have a preview snippet and no custom preview was set by preview controller
+    if (draggingSnippet && !previewController.hasCustomPreview()) {
+      try {
+        // Get the element's bounding rectangle
+        const rect = draggableElement.getBoundingClientRect();
+        elementRect = rect;
+
+        // Calculate offsets - this is the natural position where the user grabbed
+        dragOffsetX = event.clientX - rect.left;
+        dragOffsetY = event.clientY - rect.top;
+
+        // Set initial position
+        previewX = event.clientX - dragOffsetX;
+        previewY = event.clientY - dragOffsetY;
+
+        // Set a transparent 1x1 pixel image as drag preview to hide browser 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 catch all dragover events
+        document.addEventListener('dragover', handleDocumentDragOver);
+
+        // Show our custom preview
+        showPreview = true;
+        customPreviewSet = true;
+      } catch (err) {
+        console.error('Error setting up custom preview:', err);
+        // Fallback to default preview
+        previewController.applyDefaultPreview();
+      }
+    }
+    // Apply default preview if no custom preview was set and no snippet
+    else if (!previewController.hasCustomPreview() && !customPreviewSet) {
+      previewController.applyDefaultPreview();
     }
-
-    onDragStart?.({ event, item, source, group });
   }
 
   /**
@@ -173,33 +237,41 @@
     }
   }
 
-/**
- * Handle drag end
- * @param {DragEvent} event
- */
-function handleDragEnd(event) {
-  clearTimeout(dragTimeout);
-
-  // Clear global drag state
-  dragState.end(draggableId);
+  /**
+   * Handle drag end
+   * @param {DragEvent} event
+   */
+  function handleDragEnd(event) {
+    clearTimeout(dragTimeout);
+
+    // 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';
+    // Check if drop was successful
+    const wasDropped = event.dataTransfer.dropEffect !== 'none';
 
-  if (wasDropped) {
-    currentState = DROPPING;
-    onDrop?.({ event, item, wasDropped: true });
+    if (wasDropped) {
+      currentState = DROPPING;
+      onDrop?.({ event, item, wasDropped: true });
 
-    // Brief dropping state before returning to idle
-    setTimeout(() => {
+      // Brief dropping state before returning to idle
+      setTimeout(() => {
+        currentState = IDLE;
+      }, 100);
+    } else {
       currentState = IDLE;
-    }, 100);
-  } else {
-    currentState = IDLE;
-  }
+    }
 
-  onDragEnd?.({ event, item, wasDropped });
-}
+    onDragEnd?.({ event, item, wasDropped });
+  }
 
   /**
    * Handle mouse down for drag delay
@@ -226,6 +298,7 @@ function handleDragEnd(event) {
 <div
   data-component="draggable"
   data-id={draggableId}
+  bind:this={draggableElement}
   draggable={!disabled && canDrag(item)}
   ondragstart={handleDragStart}
   ondrag={handleDrag}
@@ -237,3 +310,14 @@ function handleDragEnd(event) {
 >
   {@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,6 +24,7 @@ type Draggable = {
             item: any;
             source: string;
             group: string;
+            getController: () => DragController;
         }) => void;
         onDragging?: (detail: {
             event: DragEvent;
@@ -48,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;
@@ -57,6 +66,7 @@ declare const Draggable: import("svelte").Component<{
         item: any;
         source: string;
         group: string;
+        getController: () => DragController;
     }) => void;
     onDragging?: (detail: {
         event: DragEvent;
@@ -74,3 +84,4 @@ declare const Draggable: import("svelte").Component<{
     }) => void;
     canDrag?: (item: any) => boolean;
 }, {}, "isDragging" | "isDropping" | "isDragPreview">;
+import { DragController } from './DragController.js';

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

@@ -4,6 +4,8 @@
 
   import { createOrGetDragState } from './drag-state.svelte.js';
 
+  import { GridLayers } from '../layout';
+
   import {
     findDraggableSource,
     getDraggableIdFromEvent,
@@ -15,32 +17,26 @@
     DRAG_OVER,
     CAN_DROP,
     CANNOT_DROP,
-    DROP_DISABLED,
-    ACTIVE_DROP
+    DROP_DISABLED
   } from '../../constants/state-labels/drop-states.js';
 
+  /** @typedef {import('../../typedef').DragData} DragData */
+
   /**
    * @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,
@@ -81,17 +77,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 +134,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 +148,6 @@
     ].includes(currentState);
 
     canDrop = currentState === CAN_DROP;
-    isDropping = currentState === ACTIVE_DROP;
   });
 
   /**
@@ -172,7 +164,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,8 +312,7 @@ 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
@@ -361,17 +351,41 @@ 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;
@@ -63,22 +56,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;
@@ -111,4 +97,4 @@ declare const DropZone: import("svelte").Component<{
         success: boolean;
         error?: Error;
     }) => void;
-}, {}, "isDropping" | "isDragOver" | "canDrop" | "itemCount">;
+}, {}, "isDragOver" | "canDrop">;