@hkdigital/lib-sveltekit 0.1.92 → 0.1.93

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

@@ -15,10 +15,87 @@
   // Create the state context at this level to ensure all children
   // have access to the same state instance
   const dragState = createDragState(contextKey);
+
+  /**
+   * Handle drag enter at context level
+   * @param {DragEvent} event
+   */
+  function onDragEnter(event) {
+    event.preventDefault();
+    dragState.updateActiveDropZone(event.clientX, event.clientY, event);
+  }
+
+  /**
+   * Handle drag over at context level
+   * @param {DragEvent} event
+   */
+  function onDragOver(event) {
+    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';
+      } else {
+        event.dataTransfer.dropEffect = 'none';
+      }
+    }
+  }
+
+  /**
+   * Handle drag leave at context level
+   * @param {DragEvent} event
+   */
+  function onDragLeave(event) {
+    // Only handle if we're leaving the entire context
+    const rect =
+      /** @type {Element} */ (event.currentTarget).getBoundingClientRect();
+
+
+    const x = event.clientX;
+    const y = event.clientY;
+
+    // Check if we're truly leaving the context bounds
+    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+      dragState.updateActiveDropZone(-1, -1, event);
+    }
+  }
+
+  /**
+   * Handle drop at context level
+   * @param {DragEvent} event
+   */
+  function onDrop(event) {
+    event.preventDefault();
+    dragState.handleDropAtPoint(event.clientX, event.clientY, event);
+  }
+
+  /**
+   * Handle drag end to clean up
+   * @param {DragEvent} event
+   */
+  function onDragEnd(event) {
+    // This will trigger cleanup in drag state
+    dragState.updateActiveDropZone(-1, -1, event);
+  }
 </script>
 
 <div
   data-component="drag-drop-context"
+  ondragenter={onDragEnter}
+  ondragover={onDragOver}
+  ondragleave={onDragLeave}
+  ondrop={onDrop}
+  ondragend={onDragEnd}
+  ontouchmove={(e) => {
+    // Prevent scrolling if we're dragging
+    if (dragState.isDragging()) {
+      e.preventDefault();
+    }
+  }}
   class="{base} {classes}"
   {...attrs}
 >

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

@@ -12,6 +12,9 @@
     DRAG_DISABLED
   } from '../../constants/state-labels/drag-states.js';
 
+
+  /** @typedef {import('../../typedef').SimulatedDragEvent} SimulatedDragEvent */
+
   /**
    * @type {{
    *   item: any,
@@ -162,79 +165,83 @@
     startDrag(event);
   }
 
-/**
- * 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 draggableId included
-  const dragData = {
-    draggableId,
-    offsetX: dragOffsetX,
-    offsetY: dragOffsetY,
-    item,
-    source,
-    group
-  };
-
-  // 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 }));
-
-  // Create the preview controller
-  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 });
-
-  // Apply drag preview if available
-  if (draggingSnippet && !previewController.hasCustomPreview()) {
-    try {
-      // Store rectangle information for the snippet
-      elementRect = rect;
-
-      // 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;
-
-      // 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
+  /**
+   * 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 draggableId included
+    const dragData = {
+      draggableId,
+      offsetX: dragOffsetX,
+      offsetY: dragOffsetY,
+      item,
+      source,
+      group
+    };
+
+    // 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 })
+    );
+
+    // Create the preview controller
+    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 });
+
+    // Apply drag preview if available
+    if (draggingSnippet && !previewController.hasCustomPreview()) {
+      try {
+        // Store rectangle information for the snippet
+        elementRect = rect;
+
+        // 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;
+
+        // 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();
+      }
+    } else if (!previewController.hasCustomPreview()) {
+      // Apply default preview if no custom preview was set
       previewController.applyDefaultPreview();
     }
-  } else if (!previewController.hasCustomPreview()) {
-    // Apply default preview if no custom preview was set
-    previewController.applyDefaultPreview();
   }
-}
 
   /**
    * Handle during drag
@@ -302,6 +309,140 @@ function startDrag(event) {
       currentState = IDLE;
     }
   }
+
+  // Add these variables for touch handling
+  let touchDragging = $state(false);
+  let touchStartX = 0;
+  let touchStartY = 0;
+  let touchPreviewElement = null;
+
+  /**
+   * Handle touch start
+   * @param {TouchEvent} event
+   */
+  function handleTouchStart(event) {
+    if (disabled || !canDrag(item)) return;
+
+    const touch = event.touches[0];
+    touchStartX = touch.clientX;
+    touchStartY = touch.clientY;
+
+    // Start drag after a small delay to distinguish from scrolling
+    dragTimeout = setTimeout(() => {
+      touchDragging = true;
+      currentState = DRAGGING;
+
+      // Create drag data
+      const rect = draggableElement.getBoundingClientRect();
+      dragOffsetX = touch.clientX - rect.left;
+      dragOffsetY = touch.clientY - rect.top;
+
+      const dragData = {
+        draggableId,
+        offsetX: dragOffsetX,
+        offsetY: dragOffsetY,
+        item,
+        source,
+        group
+      };
+
+      dragState.start(draggableId, dragData);
+
+      // Show preview
+      if (draggingSnippet) {
+        elementRect = rect;
+        previewX = rect.left;
+        previewY = rect.top;
+        showPreview = true;
+      }
+
+      // Prevent scrolling while dragging
+      event.preventDefault();
+
+      // Add document-level touch handlers
+      document.addEventListener('touchmove', handleTouchMove, {
+        passive: false
+      });
+      document.addEventListener('touchend', handleTouchEnd);
+    }, 150); // 150ms delay to distinguish from scrolling
+  }
+
+  /**
+   * Handle touch move
+   * @param {TouchEvent} event
+   */
+function handleTouchMove(event) {
+  if (!touchDragging) return;
+
+  event.preventDefault();
+  const touch = event.touches[0];
+
+  // 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'],
+      getData: () => JSON.stringify({ draggableId }),
+      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'],
+      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);
+}
 </script>
 
 <div
@@ -313,7 +454,9 @@ function startDrag(event) {
   ondragend={handleDragEnd}
   onmousedown={handleMouseDown}
   onmouseup={handleMouseUp}
+  ontouchstart={handleTouchStart}
   class="{base} {classes} {stateClasses}"
+  style="touch-action: none;"
   {...attrs}
 >
   {@render children()}
@@ -329,3 +472,11 @@ function startDrag(event) {
     {@render draggingSnippet({ element: draggableElement, rect: elementRect })}
   </div>
 {/if}
+
+<style>
+  [data-component='draggable'] {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+</style>