@hkdigital/lib-sveltekit 0.2.6 → 0.2.7

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

@@ -12,26 +12,6 @@ export class DragController {
     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}

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

@@ -15,74 +15,6 @@ export class DragController {
     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;
   }
 
   /**
@@ -92,8 +24,7 @@ export class DragController {
   applyDefaultPreview() {
     if (
       !this.dataTransfer ||
-      !this.dataTransfer.setDragImage ||
-      this._previewSet
+      !this.dataTransfer.setDragImage
     ) {
       return false;
     }

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

@@ -25,7 +25,7 @@
     dragState.updateActiveDropZone(event.clientX, event.clientY, event);
   }
 
-  /**
+/**
    * Handle drag over at context level
    * @param {DragEvent} event
    */
@@ -33,15 +33,22 @@
     event.preventDefault();
     dragState.updateActiveDropZone(event.clientX, event.clientY, event);
 
-    // Set appropriate drop effect
-    const activeZone = dragState.activeDropZone;
-    if (activeZone) {
-      const config = dragState.dropZones.get(activeZone);
-      if (config?.canDrop) {
-        event.dataTransfer.dropEffect = 'move';
+    // Set appropriate drop effect based on current drag operation
+    if (dragState.isDragging()) {
+      const activeZone = dragState.activeDropZone;
+      if (activeZone) {
+        const config = dragState.dropZones.get(activeZone);
+        if (config?.canDrop) {
+          event.dataTransfer.dropEffect = 'move';
+        } else {
+          event.dataTransfer.dropEffect = 'none';
+        }
       } else {
         event.dataTransfer.dropEffect = 'none';
       }
+    } else {
+      // No internal drag operation, might be file drag
+      event.dataTransfer.dropEffect = 'copy';
     }
   }
 

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

@@ -23,7 +23,10 @@
    *   dragDelay?: number,
    *   base?: string,
    *   classes?: string,
-   *   children: import('svelte').Snippet,
+   *   children: import('svelte').Snippet<[{
+   *     element: HTMLElement,
+   *     rect: DOMRect
+   *   }]>,
    *   draggingSnippet?: import('svelte').Snippet<[{
    *     element: HTMLElement,
    *     rect: DOMRect
@@ -206,6 +209,9 @@ let stateObject = $derived({
       JSON.stringify({ draggableId })
     );
 
+    // Chrome also likes to have text/plain
+    event.dataTransfer.setData('text/plain', draggableId);
+
     // Create the preview controller
     const previewController = new DragController(event);
 
@@ -216,8 +222,8 @@ let stateObject = $derived({
     onDragStart?.({ event, item, source, group, getController });
 
     // Apply drag preview if available
-    if (draggingSnippet && !previewController.hasCustomPreview()) {
-      try {
+    // if (draggingSnippet) {
+      // try {
         // Store rectangle information for the snippet
         elementRect = rect;
 
@@ -229,10 +235,20 @@ let stateObject = $derived({
         previewX = rect.left;
         previewY = rect.top;
 
-        // Set a transparent 1x1 pixel image to hide browser's default preview
+        // Set a transparent 1x1 pixel image to hide browser's
+        // default preview
         const emptyImg = new Image();
         emptyImg.src =
-          'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+         'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+        // Chrome needs the image to be loaded before setting it
+        emptyImg.onload = () => {
+         if (event.dataTransfer) {
+           event.dataTransfer.setDragImage(emptyImg, 0, 0);
+         }
+        };
+
+        // Fallback: try to set it immediately too
         event.dataTransfer.setDragImage(emptyImg, 0, 0);
 
         // Add document level event listener to track mouse movement
@@ -241,15 +257,15 @@ let stateObject = $derived({
         // Show custom preview
         showPreview = true;
         customPreviewSet = true;
-      } catch (err) {
-        console.error('Error setting up custom preview:', err);
-        // Fallback to default preview
-        previewController.applyDefaultPreview();
-      }
-    } else if (!previewController.hasCustomPreview()) {
-      // Apply default preview if no custom preview was set
-      previewController.applyDefaultPreview();
-    }
+      // } catch (err) {
+      //   console.error('Error setting up custom preview:', err);
+      //   // Fallback to default preview
+      //   previewController.applyDefaultPreview();
+      // }
+    // } else {
+    //   // Apply default preview if no custom preview was set
+    //   previewController.applyDefaultPreview();
+    // }
   }
 
   /**
@@ -358,12 +374,12 @@ let stateObject = $derived({
       dragState.start(draggableId, dragData);
 
       // Show preview
-      if (draggingSnippet) {
+      // if (draggingSnippet) {
         elementRect = rect;
         previewX = rect.left;
         previewY = rect.top;
         showPreview = true;
-      }
+      // }
 
       // Prevent scrolling while dragging
       event.preventDefault();
@@ -398,7 +414,7 @@ function handleTouchMove(event) {
     clientX: touch.clientX,
     clientY: touch.clientY,
     dataTransfer: {
-      types: ['application/json'],
+      types: ['application/json', 'text/plain'],
       getData: () => JSON.stringify({ draggableId }),
       dropEffect: 'move',
       effectAllowed: 'move',
@@ -429,7 +445,7 @@ function handleTouchMove(event) {
     clientX: touch.clientX,
     clientY: touch.clientY,
     dataTransfer: {
-      types: ['application/json'],
+      types: ['application/json', 'text'],
       getData: () => JSON.stringify({ draggableId }),
       dropEffect: 'move',
       effectAllowed: 'move',
@@ -468,10 +484,10 @@ function handleTouchMove(event) {
   style="touch-action: none;"
   {...attrs}
 >
-  {@render children()}
+  {@render children({ element: draggableElement, rect: elementRect })}
 </div>
 
-{#if draggingSnippet && showPreview && elementRect}
+{#if showPreview && elementRect}
   <div
     data-companion="drag-preview-follower"
     class={stateClasses}
@@ -479,7 +495,11 @@ function handleTouchMove(event) {
     style:left="{previewX}px"
     style:top="{previewY}px"
   >
+  {#if draggingSnippet}
     {@render draggingSnippet({ element: draggableElement, rect: elementRect })}
+  {:else}
+    {@render children({ element: draggableElement, rect: elementRect })}
+  {/if}
   </div>
 {/if}
 

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

@@ -10,7 +10,10 @@ type Draggable = {
         dragDelay?: number;
         base?: string;
         classes?: string;
-        children: Snippet<[]>;
+        children: Snippet<[{
+            element: HTMLElement;
+            rect: DOMRect;
+        }]>;
         draggingSnippet?: Snippet<[{
             element: HTMLElement;
             rect: DOMRect;
@@ -52,7 +55,10 @@ declare const Draggable: import("svelte").Component<{
     dragDelay?: number;
     base?: string;
     classes?: string;
-    children: import("svelte").Snippet;
+    children: import("svelte").Snippet<[{
+        element: HTMLElement;
+        rect: DOMRect;
+    }]>;
     draggingSnippet?: import("svelte").Snippet<[{
         element: HTMLElement;
         rect: DOMRect;

package/dist/components/drag-drop/drag-state.svelte.js

@@ -259,8 +259,26 @@ class DragState {
    * @returns {Object|null} The drag data, or null for file drops
    */
   getDraggable(event) {
-    // Check if this is a touch-simulated event
-    if (event.dataTransfer && !event.dataTransfer.files) {
+    // Check if this is a file drop first
+    if (event.dataTransfer && event.dataTransfer.types) {
+      // Check if types is an array or DOMStringList
+      const types = Array.from(event.dataTransfer.types);
+      if (types.includes('Files')) {
+        return null; // This is a file drop, not an internal drag
+      }
+    }
+
+    // For dragover events, we can't read dataTransfer.getData in Chrome
+    // Instead, check if we have an active drag operation
+    if (event.type === 'dragover') {
+      if (this.draggables.size > 0) {
+        // Return the most recent drag operation
+        return this.current;
+      }
+    }
+
+    // For drop events, we can read the data
+    if (event.type === 'drop' && event.dataTransfer) {
       try {
         const jsonData = event.dataTransfer.getData('application/json');
         if (jsonData) {
@@ -272,34 +290,12 @@ class DragState {
           }
         }
       } catch (error) {
-        console.error('Error getting drag data:', error);
-      }
-    }
-
-    // Check if this is a file drop
-    if (event.dataTransfer.types.includes('Files')) {
-      return null;
-    }
-
-    // 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) {
-          const dragData = this.getDraggableById(draggableId);
-          if (dragData) {
-            return dragData;
-          }
-        }
+        console.error('Error getting drag data from drop:', error);
       }
-    } catch (error) {
-      console.error('Error getting drag data:', error);
     }
 
-    return null;
+    // Fallback to checking active drags
+    return this.current;
   }
 
   /**

package/dist/components/drag-drop/drag-state.svelte.js__

@@ -0,0 +1,323 @@
+// drag-state.svelte.js
+import { defineStateContext } from '$lib/util/svelte/state-context/index.js';
+
+/** @typedef {import('$lib/typedef').SimulatedDragEvent} SimulatedDragEvent */
+
+class DragState {
+  // Existing draggables map
+  draggables = $state(new Map());
+
+  // New: Registry for dropzones
+  dropZones = $state(new Map());
+
+  // Track which dropzone is currently active
+  activeDropZone = $state(null);
+
+  // Track the last active drop zone
+  // - activeDropZone gets cleared by dragLeavr
+  // - but we need it in 'end'
+  lastActiveDropZone = null;
+
+  /**
+   * 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, config) {
+    if (this.dropZones.has(zoneId)) {
+      throw new Error(`Zone [${zoneId}] is already registered`);
+    }
+
+    this.dropZones.set(zoneId, {
+      ...config,
+      isOver: false,
+      canDrop: false
+    });
+  }
+
+  /**
+   * Unregister a dropzone
+   * @param {string} zoneId
+   */
+  unregisterDropZone(zoneId) {
+    if (this.activeDropZone === zoneId) {
+      this.activeDropZone = null;
+    }
+    this.dropZones.delete(zoneId);
+  }
+
+  /**
+   * Get dropzone at coordinates
+   * @param {number} x
+   * @param {number} y
+   * @returns {Object|null}
+   */
+  getDropZoneAtPoint(x, y) {
+    // Check all registered dropzones
+    for (const [zoneId, config] of this.dropZones) {
+      const rect = config.element.getBoundingClientRect();
+
+      if (
+        x >= rect.left &&
+        x <= rect.right &&
+        y >= rect.top &&
+        y <= rect.bottom
+      ) {
+        // Found a dropzone at this point
+        // Check if it's the deepest one (for nested zones)
+        let deepestZone = { zoneId, config, depth: 0 };
+
+        // Check for nested dropzones
+        for (const [otherId, otherConfig] of this.dropZones) {
+          if (otherId === zoneId) continue;
+
+          const otherRect = otherConfig.element.getBoundingClientRect();
+          if (
+            x >= otherRect.left &&
+            x <= otherRect.right &&
+            y >= otherRect.top &&
+            y <= otherRect.bottom
+          ) {
+            // Check if this zone is nested inside our current zone
+            if (config.element.contains(otherConfig.element)) {
+              deepestZone = {
+                zoneId: otherId,
+                config: otherConfig,
+                depth: deepestZone.depth + 1
+              };
+            }
+          }
+        }
+
+        return { zoneId: deepestZone.zoneId, config: deepestZone.config };
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Update active dropzone based on coordinates
+   *
+   * @param {number} x
+   * @param {number} y
+   * @param {DragEvent|SimulatedDragEvent} event
+   */
+  updateActiveDropZone(x, y, event) {
+    const dropZone = this.getDropZoneAtPoint(x, y);
+    const newActiveId = dropZone?.zoneId || null;
+
+    // Handle leave/enter transitions
+    if (this.activeDropZone !== newActiveId) {
+      // Leave previous zone
+      if (this.activeDropZone) {
+        this.lastActiveDropZone = this.activeDropZone;
+
+        const prevConfig = this.dropZones.get(this.activeDropZone);
+        if (prevConfig) {
+          prevConfig.isOver = false;
+          prevConfig.canDrop = false;
+          prevConfig.onDragLeave?.({ event, zone: prevConfig.zone });
+        }
+      }
+
+      // Enter new zone
+      if (newActiveId && dropZone) {
+        const dragData = this.getDraggable(event);
+        const canDrop = dragData && dropZone.config.accepts(dragData);
+
+        dropZone.config.isOver = true;
+        dropZone.config.canDrop = canDrop;
+        dropZone.config.onDragEnter?.({
+          event,
+          zone: dropZone.config.zone,
+          canDrop
+        });
+      }
+
+      this.activeDropZone = newActiveId;
+    } else if (newActiveId) {
+      // Still in the same zone, just send dragOver
+      dropZone.config.onDragOver?.({ event, zone: dropZone.config.zone });
+    }
+  }
+
+  /**
+   * Handle drop at coordinates
+   * @param {number} x
+   * @param {number} y
+   * @param {DragEvent|SimulatedDragEvent} event
+   */
+  handleDropAtPoint(x, y, event) {
+    const dropZone = this.getDropZoneAtPoint(x, y);
+
+    if (dropZone && dropZone.config.canDrop) {
+      const dragData = this.getDraggable(event);
+
+      if (dragData && dropZone.config.element) {
+        // Calculate drop position relative to dropzone
+        const rect = dropZone.config.element.getBoundingClientRect();
+
+        const style = window.getComputedStyle(dropZone.config.element);
+
+        const borderLeftWidth = parseInt(style.borderLeftWidth, 10) || 0;
+        const borderTopWidth = parseInt(style.borderTopWidth, 10) || 0;
+
+        const dropOffsetX = x - rect.left - borderLeftWidth;
+        const dropOffsetY = y - rect.top - borderTopWidth;
+
+        const dropX = dropOffsetX - (dragData.offsetX ?? 0);
+        const dropY = dropOffsetY - (dragData.offsetY ?? 0);
+
+        // Call the dropzone's drop handler
+        dropZone.config.onDrop?.({
+          zone: dropZone.config.zone,
+          source: dragData.source,
+          item: dragData.item,
+          x: dropX,
+          y: dropY,
+          drag: dragData,
+          drop: {
+            offsetX: dropOffsetX,
+            offsetY: dropOffsetY,
+            target: dropZone.config.element
+          }
+        });
+      }
+    }
+
+    // Ensure we notify the active dropzone that drag ended
+    if (this.activeDropZone) {
+      const config = this.dropZones.get(this.activeDropZone);
+      if (config) {
+        config.isOver = false;
+        config.canDrop = false;
+        config.onDragLeave?.({ event, zone: config.zone });
+      }
+    }
+
+    // Reset active dropzone
+    this.activeDropZone = null;
+  }
+
+  /**
+   * @param {string} draggableId
+   * @param {import('$lib/typedef/drag.js').DragData} dragData
+   */
+  start(draggableId, dragData) {
+    this.draggables.set(draggableId, dragData);
+  }
+
+  /**
+   * @param {string} draggableId
+   */
+  end(draggableId) {
+    this.draggables.delete(draggableId);
+
+    // Check both current AND last active dropzone
+    const zoneToNotify = this.activeDropZone || this.lastActiveDropZone;
+
+    if (zoneToNotify) {
+      const config = this.dropZones.get(zoneToNotify);
+      if (config && (config.isOver || config.canDrop)) {
+        config.isOver = false;
+        config.canDrop = false;
+        config.onDragLeave?.({
+          event: new DragEvent('dragend'),
+          zone: config.zone
+        });
+      }
+    }
+
+    this.activeDropZone = null;
+    this.lastActiveDropZone = null;
+  }
+
+  /**
+   * Get a drag data by draggable id
+   *
+   * @param {string} draggableId
+   * @returns {import('$lib/typedef/drag.js').DragData|undefined}
+   */
+  getDraggableById(draggableId) {
+    return this.draggables.get(draggableId);
+  }
+
+  /**
+   * 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) {
+    // Check if this is a touch-simulated event
+    if (event.dataTransfer && !event.dataTransfer.files) {
+      try {
+        const jsonData = event.dataTransfer.getData('application/json');
+        if (jsonData) {
+          const transferData = JSON.parse(jsonData);
+          const draggableId = transferData.draggableId;
+
+          if (draggableId) {
+            return this.getDraggableById(draggableId);
+          }
+        }
+      } catch (error) {
+        console.error('Error getting drag data:', error);
+      }
+    }
+
+    // Check if this is a file drop
+    if (event.dataTransfer.types.includes('Files')) {
+      return null;
+    }
+
+    // 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) {
+          const dragData = this.getDraggableById(draggableId);
+          if (dragData) {
+            return dragData;
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error getting drag data:', error);
+    }
+
+    return null;
+  }
+
+  /**
+   * Get the most recently started drag operation (convenience method)
+   * @returns {import('$lib/typedef/drag.js').DragData|undefined}
+   */
+  get current() {
+    const entries = Array.from(this.draggables.entries());
+    return entries.length > 0 ? entries[entries.length - 1][1] : undefined;
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  isDragging() {
+    return this.draggables.size > 0;
+  }
+}
+
+export const [createOrGetDragState, createDragState, getDragState] =
+  defineStateContext(DragState);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.2.6",
+	"version": "0.2.7",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"