@hkdigital/lib-sveltekit 0.2.9 → 0.2.11

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

@@ -1,7 +1,7 @@
 <script>
   import { createDragState } from './drag-state.svelte.js';
 
-  import { activeDragOver, activeTouchMove } from './actions.js';
+  import { activeTouchMove, activeDragOver, activeDrop } from './actions.js';
 
   /**
    * @type {{
@@ -97,10 +97,9 @@
   ondragenter={onDragEnter}
   use:activeDragOver={onDragOver}
   ondragleave={onDragLeave}
-  ondrop={onDrop}
+  use:activeDrop={onDrop}
   ondragend={onDragEnd}
   use:activeTouchMove={(e) => {
-    // Prevent scrolling if we're dragging
     if (dragState.isDragging()) {
       e.preventDefault();
     }

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

@@ -4,7 +4,6 @@
   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,
@@ -13,7 +12,6 @@
     DROPPING
   } from '../../constants/state-labels/drag-states.js';
 
-
   /** @typedef {import('../../typedef').SimulatedDragEvent} SimulatedDragEvent */
 
   /**
@@ -27,7 +25,8 @@
    *   classes?: string,
    *   children: import('svelte').Snippet<[{
    *     element: HTMLElement,
-   *     rect: DOMRect
+   *     rect: DOMRect,
+   *     isDragging: boolean
    *   }]>,
    *   draggingSnippet?: import('svelte').Snippet<[{
    *     element: HTMLElement,
@@ -86,7 +85,7 @@
 
   const dragState = createOrGetDragState(contextKey);
 
-  const draggableId = generateLocalId();
+  const draggableId = dragState.newDraggableId();
 
   // svelte-ignore non_reactive_update
   let draggableElement;
@@ -103,24 +102,27 @@
   let customPreviewSet = $state(false);
   let elementRect = $state(null);
 
-// Track if current draggable can drop in the active zone
-let canDropInActiveZone = $derived.by(() => {
-  if (currentState !== DRAGGING || !dragState.activeDropZone) return false;
-
-  const activeZone = dragState.dropZones.get(dragState.activeDropZone);
-  return activeZone?.canDrop || false;
-});
-
-// Computed state object for CSS classes
-let stateObject = $derived({
-  idle: currentState === IDLE,
-  dragging: currentState === DRAGGING,
-  'drag-preview': currentState === DRAG_PREVIEW,
-  dropping: currentState === DROPPING,
-  'drag-disabled': disabled || !canDrag(item),
-  'can-drop': currentState === DRAGGING && canDropInActiveZone,
-  'cannot-drop': currentState === DRAGGING && dragState.activeDropZone && !canDropInActiveZone
-});
+  // Track if current draggable can drop in the active zone
+  let canDropInActiveZone = $derived.by(() => {
+    if (currentState !== DRAGGING || !dragState.activeDropZone) return false;
+
+    const activeZone = dragState.dropZones.get(dragState.activeDropZone);
+    return activeZone?.canDrop || false;
+  });
+
+  // Computed state object for CSS classes
+  let stateObject = $derived({
+    idle: currentState === IDLE,
+    dragging: currentState === DRAGGING,
+    'drag-preview': currentState === DRAG_PREVIEW,
+    dropping: currentState === DROPPING,
+    'drag-disabled': disabled || !canDrag(item),
+    'can-drop': currentState === DRAGGING && canDropInActiveZone,
+    'cannot-drop':
+      currentState === DRAGGING &&
+      dragState.activeDropZone &&
+      !canDropInActiveZone
+  });
 
   let stateClasses = $derived(toStateClasses(stateObject));
 
@@ -181,10 +183,10 @@ let stateObject = $derived({
 
   let transparentPixel;
 
-  if( browser )
-  {
+  if (browser) {
     transparentPixel = new Image();
-    transparentPixel.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+    transparentPixel.src =
+      'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
   }
 
   /**
@@ -192,7 +194,6 @@ let stateObject = $derived({
    * @param {DragEvent} event - The drag event
    */
   function startDrag(event) {
-
     // Set a transparent 1x1 pixel image to hide browser's default preview
     event.dataTransfer.setDragImage(transparentPixel, 0, 0);
 
@@ -213,17 +214,20 @@ let stateObject = $derived({
       group
     };
 
+    // console.debug('handleDragStart:', draggableId, dragData);
+
     // Set shared drag state
     dragState.start(draggableId, dragData);
 
     // Set minimal data transfer for browser drag and drop API
     event.dataTransfer.effectAllowed = 'move';
-    event.dataTransfer.setData(
-      'application/json',
-      JSON.stringify({ draggableId })
-    );
 
-    // Chrome also likes to have text/plain
+    // Set draggableId as custom mime type, since that value is availabe
+    // during all event types (dragstart, dragenter, dragover, dragleave,
+    // drop and dragend)
+    event.dataTransfer.setData(`application/x-draggable-${draggableId}`, '1');
+
+    // Also keep text/plain for browser compatibility
     event.dataTransfer.setData('text/plain', draggableId);
 
     // Create the preview controller
@@ -361,10 +365,10 @@ let stateObject = $derived({
 
       // Show preview
       // if (draggingSnippet) {
-        elementRect = rect;
-        previewX = rect.left;
-        previewY = rect.top;
-        showPreview = true;
+      elementRect = rect;
+      previewX = rect.left;
+      previewY = rect.top;
+      showPreview = true;
       // }
 
       // Prevent scrolling while dragging
@@ -374,6 +378,7 @@ let stateObject = $derived({
       document.addEventListener('touchmove', handleTouchMove, {
         passive: false
       });
+
       document.addEventListener('touchend', handleTouchEnd);
     }, 150); // 150ms delay to distinguish from scrolling
   }
@@ -382,78 +387,83 @@ let stateObject = $derived({
    * Handle touch move
    * @param {TouchEvent} event
    */
-function handleTouchMove(event) {
-  if (!touchDragging) return;
+  function handleTouchMove(event) {
+    if (!touchDragging) return;
 
-  event.preventDefault();
-  const touch = event.touches[0];
+    event.preventDefault();
+    const touch = event.touches[0];
 
-  // Update preview position
-  if (showPreview) {
-    previewX = touch.clientX - dragOffsetX;
-    previewY = touch.clientY - dragOffsetY;
-  }
+    // Update preview position
+    if (showPreview) {
+      previewX = touch.clientX - dragOffsetX;
+      previewY = touch.clientY - dragOffsetY;
+    }
 
-  /** @type {SimulatedDragEvent} */
-  const simulatedEvent = {
-    type: 'dragover',
-    clientX: touch.clientX,
-    clientY: touch.clientY,
-    dataTransfer: {
-      types: ['application/json', 'text/plain'],
-      getData: () => JSON.stringify({ draggableId }),
-      dropEffect: 'move',
-      effectAllowed: 'move',
-      files: []
-    },
-    preventDefault: () => {},
-    stopPropagation: () => {}
-  };
-
-  // Update active dropzone in drag state
-  dragState.updateActiveDropZone(touch.clientX, touch.clientY, simulatedEvent);
-}
+    /** @type {SimulatedDragEvent} */
+    const simulatedEvent = {
+      type: 'dragover',
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      dataTransfer: {
+        types: [`application/x-draggable-${draggableId}`, 'text/plain'],
+        getData: () => 1,
+        dropEffect: 'move',
+        effectAllowed: 'move',
+        files: []
+      },
+
+      preventDefault: () => {},
+      stopPropagation: () => {}
+    };
+
+    // Update active dropzone in drag state
+    dragState.updateActiveDropZone(
+      touch.clientX,
+      touch.clientY,
+      simulatedEvent
+    );
+  }
 
   /**
    * Handle touch end
    * @param {TouchEvent} event
    */
   function handleTouchEnd(event) {
-  clearTimeout(dragTimeout);
-
-  if (!touchDragging) return;
-
-  const touch = event.changedTouches[0];
-
-  /** @type {SimulatedDragEvent} */
-  const simulatedEvent = {
-    type: 'drop',
-    clientX: touch.clientX,
-    clientY: touch.clientY,
-    dataTransfer: {
-      types: ['application/json', 'text'],
-      getData: () => JSON.stringify({ draggableId }),
-      dropEffect: 'move',
-      effectAllowed: 'move',
-      files: []
-    },
-    preventDefault: () => {},  // Add this!
-    stopPropagation: () => {}  // And this!
-  };
-
-  // Trigger drop at final touch position
-  dragState.handleDropAtPoint(touch.clientX, touch.clientY, simulatedEvent);
-
-  // Clean up
-  touchDragging = false;
-  currentState = IDLE;
-  showPreview = false;
-  dragState.end(draggableId);
-
-  // Remove document handlers
-  document.removeEventListener('touchmove', handleTouchMove);
-  document.removeEventListener('touchend', handleTouchEnd);
-}
+    clearTimeout(dragTimeout);
+
+    if (!touchDragging) return;
+
+    const touch = event.changedTouches[0];
+
+    /** @type {SimulatedDragEvent} */
+    const simulatedEvent = {
+      type: 'drop',
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      dataTransfer: {
+        types: [`application/x-draggable-${draggableId}`, 'text/plain'],
+        getData: () => 1,
+        dropEffect: 'move',
+        effectAllowed: 'move',
+        files: []
+      },
+      preventDefault: () => {}, // Add this!
+      stopPropagation: () => {} // And this!
+    };
+
+    // Trigger drop at final touch position
+    dragState.handleDropAtPoint(touch.clientX, touch.clientY, simulatedEvent);
+
+    // Clean up
+    touchDragging = false;
+    currentState = IDLE;
+    showPreview = false;
+    dragState.end(draggableId);
+
+    // Remove document handlers
+    document.removeEventListener('touchmove', handleTouchMove);
+    document.removeEventListener('touchend', handleTouchEnd);
+  }
 </script>
 
 <div
@@ -470,7 +480,11 @@ function handleTouchMove(event) {
   style="touch-action: none;"
   {...attrs}
 >
-  {@render children({ element: draggableElement, rect: elementRect })}
+  {@render children({
+    element: draggableElement,
+    rect: elementRect,
+    isDragging: false
+  })}
 </div>
 
 {#if showPreview && elementRect}
@@ -481,11 +495,18 @@ 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}
+    {#if draggingSnippet}
+      {@render draggingSnippet({
+        element: draggableElement,
+        rect: elementRect
+      })}
+    {:else}
+      {@render children({
+        element: draggableElement,
+        rect: elementRect,
+        isDragging: true
+      })}
+    {/if}
   </div>
 {/if}
 

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

@@ -13,6 +13,7 @@ type Draggable = {
         children: Snippet<[{
             element: HTMLElement;
             rect: DOMRect;
+            isDragging: boolean;
         }]>;
         draggingSnippet?: Snippet<[{
             element: HTMLElement;
@@ -58,6 +59,7 @@ declare const Draggable: import("svelte").Component<{
     children: import("svelte").Snippet<[{
         element: HTMLElement;
         rect: DOMRect;
+        isDragging: boolean;
     }]>;
     draggingSnippet?: import("svelte").Snippet<[{
         element: HTMLElement;

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

@@ -1,6 +1,9 @@
+export function activeTouchMove(node: any, handler: any): {
+    destroy(): void;
+};
 export function activeDragOver(node: any, handler: any): {
     destroy(): void;
 };
-export function activeTouchMove(node: any, handler: any): {
+export function activeDrop(node: any, handler: any): {
     destroy(): void;
 };

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

@@ -1,6 +1,14 @@
+export function activeTouchMove(node, handler) {
+  node.addEventListener('touchmove', handler, { passive: false });
+  return {
+    destroy() {
+      node.removeEventListener('touchmove', handler, { passive: false });
+    }
+  };
+}
+
 export function activeDragOver(node, handler) {
   node.addEventListener('dragover', handler, { passive: false });
-
   return {
     destroy() {
       node.removeEventListener('dragover', handler, { passive: false });
@@ -8,11 +16,11 @@ export function activeDragOver(node, handler) {
   };
 }
 
-export function activeTouchMove(node, handler) {
-  node.addEventListener('touchmove', handler, { passive: false });
+export function activeDrop(node, handler) {
+  node.addEventListener('drop', handler, { passive: false });
   return {
     destroy() {
-      node.removeEventListener('touchmove', handler, { passive: false });
+      node.removeEventListener('drop', handler, { passive: false });
     }
   };
 }

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

@@ -5,6 +5,7 @@ export type SimulatedDragEvent = import("../../typedef").SimulatedDragEvent;
 /** @typedef {import('../../typedef').SimulatedDragEvent} SimulatedDragEvent */
 declare class DragState {
     draggables: Map<any, any>;
+    draggableIdCount: number;
     dropZones: Map<any, any>;
     activeDropZone: any;
     lastActiveDropZone: any;
@@ -67,6 +68,7 @@ declare class DragState {
      * @param {string} draggableId
      */
     end(draggableId: string): void;
+    newDraggableId(): string;
     /**
      * Get a drag data by draggable id
      *
@@ -79,7 +81,7 @@ declare class DragState {
      *
      * @param {DragEvent|SimulatedDragEvent} event
      *
-     * @returns {Object|null} The drag data, or null for file drops
+     * @returns {Object|null} The drag data, or null for file drops or not found
      */
     getDraggable(event: DragEvent | SimulatedDragEvent): any | null;
     /**

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

@@ -7,6 +7,9 @@ class DragState {
   // Existing draggables map
   draggables = $state(new Map());
 
+  // Draggable id counter
+  draggableIdCount = 1;
+
   // New: Registry for dropzones
   dropZones = $state(new Map());
 
@@ -162,6 +165,9 @@ class DragState {
     if (dropZone && dropZone.config.canDrop) {
       const dragData = this.getDraggable(event);
 
+      console.debug('handleDropAtPoint', event, dragData);
+
+
       if (dragData && dropZone.config.element) {
         // Calculate drop position relative to dropzone
         const rect = dropZone.config.element.getBoundingClientRect();
@@ -213,6 +219,7 @@ class DragState {
    * @param {import('../../typedef/drag.js').DragData} dragData
    */
   start(draggableId, dragData) {
+    // console.debug('DragState.start called:', draggableId, dragData);
     this.draggables.set(draggableId, dragData);
   }
 
@@ -220,6 +227,7 @@ class DragState {
    * @param {string} draggableId
    */
   end(draggableId) {
+    // console.debug('DragState.end called:', draggableId);
     this.draggables.delete(draggableId);
 
     // Check both current AND last active dropzone
@@ -241,6 +249,10 @@ class DragState {
     this.lastActiveDropZone = null;
   }
 
+  newDraggableId() {
+    return `${this.draggableIdCount++}`;
+  }
+
   /**
    * Get a drag data by draggable id
    *
@@ -256,7 +268,7 @@ class DragState {
    *
    * @param {DragEvent|SimulatedDragEvent} event
    *
-   * @returns {Object|null} The drag data, or null for file drops
+   * @returns {Object|null} The drag data, or null for file drops or not found
    */
   getDraggable(event) {
     // Check if this is a file drop first
@@ -268,34 +280,25 @@ class DragState {
       }
     }
 
-    // For dragover events, we can't read dataTransfer.getData in Chrome
-    // Instead, check if we have an active drag operation
-    if (event.type === 'dragover'|| event.type === 'dragenter') {
-      if (this.draggables.size > 0) {
-        // Return the most recent drag operation
-        return this.current;
-      }
-    }
+    if (event.dataTransfer?.types) {
+      const types = Array.from(event.dataTransfer.types);
 
-    // For drop events, we can read the data
-    if (event.type === 'drop' && event.dataTransfer) {
-      try {
-        const jsonData = event.dataTransfer.getData('application/json');
-        if (jsonData) {
-          const transferData = JSON.parse(jsonData);
-          const draggableId = transferData.draggableId;
+      const PREFIX = 'application/x-draggable-';
 
-          if (draggableId) {
-            return this.getDraggableById(draggableId);
-          }
-        }
-      } catch (error) {
-        console.error('Error getting drag data from drop:', error);
+      const dragType = types.find((t) => t.startsWith(PREFIX));
+
+      if (dragType) {
+        const draggableId = dragType.slice(PREFIX.length);
+
+        const entry = this.getDraggableById(draggableId);
+
+        console.debug('getDraggable', draggableId, entry);
+
+        return entry;
       }
     }
 
-    // Fallback to checking active drags
-    return this.current;
+    return null;
   }
 
   /**

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

@@ -1,32 +0,0 @@
-/**
- * Find the source draggable element from an event
- *
- * @param {DragEvent} event
- * @returns {HTMLElement|null}
- */
-export function findDraggableSource(event: DragEvent): HTMLElement | null;
-/**
- * Get draggable ID from an event, if available
- * @param {DragEvent} event
- * @returns {string|null}
- */
-export function getDraggableIdFromEvent(event: DragEvent): string | null;
-/**
- * Process a drop event with the provided data and handlers
- * @param {DragEvent} event
- * @param {any} data The drag data
- * @param {Object} options
- * @param {Function} options.onDropStart Optional drop start handler
- * @param {Function} options.onDrop Main drop handler
- * @param {Function} options.onDropEnd Optional drop end handler
- * @param {string} options.zone The drop zone identifier
- * @param {Function} options.setState Function to update component state
- * @returns {Promise<boolean>} Success status
- */
-export function processDropWithData(event: DragEvent, data: any, { onDropStart, onDrop, onDropEnd, zone, setState }: {
-    onDropStart: Function;
-    onDrop: Function;
-    onDropEnd: Function;
-    zone: string;
-    setState: Function;
-}): Promise<boolean>;

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

@@ -1,85 +1,85 @@
-import { createOrGetDragState } from './drag-state.svelte.js';
+// import { createOrGetDragState } from './drag-state.svelte.js';
 
-/**
- * Find the source draggable element from an event
- *
- * @param {DragEvent} event
- * @returns {HTMLElement|null}
- */
-export function findDraggableSource(event) {
-  const target = /** @type {Element|EventTarget|null} */ (event.target);
+// /**
+//  * Find the source draggable element from an event
+//  *
+//  * @param {DragEvent} event
+//  * @returns {HTMLElement|null}
+//  */
+// export function findDraggableSource(event) {
+//   const target = /** @type {Element|EventTarget|null} */ (event.target);
 
-  if (!(target instanceof Element)) {
-    return null;
-  }
+//   if (!(target instanceof Element)) {
+//     return null;
+//   }
 
-  let element = /** @type {Element|null} */ (target);
+//   let element = /** @type {Element|null} */ (target);
 
-  // Walk up the DOM tree
-  while (element !== null && element !== document.body) {
-    if (element.hasAttribute('data-id')) {
-      // Return as HTMLElement if needed
-      return /** @type {HTMLElement} */ (element);
-    }
+//   // Walk up the DOM tree
+//   while (element !== null && element !== document.body) {
+//     if (element.hasAttribute('data-id')) {
+//       // Return as HTMLElement if needed
+//       return /** @type {HTMLElement} */ (element);
+//     }
 
-    element = element.parentElement;
-  }
+//     element = element.parentElement;
+//   }
 
-  return null;
-}
+//   return null;
+// }
 
-/**
- * Get draggable ID from an event, if available
- * @param {DragEvent} event
- * @returns {string|null}
- */
-export function getDraggableIdFromEvent(event) {
-  const element = findDraggableSource(event);
-  return element ? element.getAttribute('data-id') : null;
-}
+// /**
+//  * Get draggable ID from an event, if available
+//  * @param {DragEvent} event
+//  * @returns {string|null}
+//  */
+// export function getDraggableIdFromEvent(event) {
+//   const element = findDraggableSource(event);
+//   return element ? element.getAttribute('data-id') : null;
+// }
 
-/**
- * Process a drop event with the provided data and handlers
- * @param {DragEvent} event
- * @param {any} data The drag data
- * @param {Object} options
- * @param {Function} options.onDropStart Optional drop start handler
- * @param {Function} options.onDrop Main drop handler
- * @param {Function} options.onDropEnd Optional drop end handler
- * @param {string} options.zone The drop zone identifier
- * @param {Function} options.setState Function to update component state
- * @returns {Promise<boolean>} Success status
- */
-export async function processDropWithData(
-  event,
-  data,
-  { onDropStart, onDrop, onDropEnd, zone, setState }
-) {
-  try {
-    // Update state and notify listeners
-    setState('ACTIVE_DROP');
-    onDropStart?.({ event, zone, data });
+// /**
+//  * Process a drop event with the provided data and handlers
+//  * @param {DragEvent} event
+//  * @param {any} data The drag data
+//  * @param {Object} options
+//  * @param {Function} options.onDropStart Optional drop start handler
+//  * @param {Function} options.onDrop Main drop handler
+//  * @param {Function} options.onDropEnd Optional drop end handler
+//  * @param {string} options.zone The drop zone identifier
+//  * @param {Function} options.setState Function to update component state
+//  * @returns {Promise<boolean>} Success status
+//  */
+// export async function processDropWithData(
+//   event,
+//   data,
+//   { onDropStart, onDrop, onDropEnd, zone, setState }
+// ) {
+//   try {
+//     // Update state and notify listeners
+//     setState('ACTIVE_DROP');
+//     onDropStart?.({ event, zone, data });
 
-    // Call the onDrop handler
-    const dropResult = onDrop?.({
-      event,
-      zone,
-      item: data.item,
-      source: data.source,
-      metadata: data.metadata
-    });
+//     // Call the onDrop handler
+//     const dropResult = onDrop?.({
+//       event,
+//       zone,
+//       item: data.item,
+//       source: data.source,
+//       metadata: data.metadata
+//     });
 
-    // Handle async or sync results
-    await Promise.resolve(dropResult);
+//     // Handle async or sync results
+//     await Promise.resolve(dropResult);
 
-    // Success path
-    setState('READY');
-    onDropEnd?.({ event, zone, data, success: true });
-    return true;
-  } catch (error) {
-    // Error path
-    setState('READY');
-    onDropEnd?.({ event, zone, data, success: false, error });
-    return false;
-  }
-}
+//     // Success path
+//     setState('READY');
+//     onDropEnd?.({ event, zone, data, success: true });
+//     return true;
+//   } catch (error) {
+//     // Error path
+//     setState('READY');
+//     onDropEnd?.({ event, zone, data, success: false, error });
+//     return false;
+//   }
+// }

package/package.json

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