@hkdigital/lib-sveltekit 0.2.10 → 0.2.11

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

@@ -12,7 +12,6 @@
     DROPPING
   } from '../../constants/state-labels/drag-states.js';
 
-
   /** @typedef {import('../../typedef').SimulatedDragEvent} SimulatedDragEvent */
 
   /**
@@ -26,7 +25,8 @@
    *   classes?: string,
    *   children: import('svelte').Snippet<[{
    *     element: HTMLElement,
-   *     rect: DOMRect
+   *     rect: DOMRect,
+   *     isDragging: boolean
    *   }]>,
    *   draggingSnippet?: import('svelte').Snippet<[{
    *     element: HTMLElement,
@@ -102,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));
 
@@ -180,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';
   }
 
   /**
@@ -191,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);
 
@@ -363,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
@@ -385,79 +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/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);
-}
+    /** @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/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);
-}
+    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
@@ -474,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}
@@ -485,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/package.json

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

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

@@ -1,319 +0,0 @@
-// 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 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'|| event.type === 'dragenter') {
-      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) {
-          const transferData = JSON.parse(jsonData);
-          const draggableId = transferData.draggableId;
-
-          if (draggableId) {
-            return this.getDraggableById(draggableId);
-          }
-        }
-      } catch (error) {
-        console.error('Error getting drag data from drop:', error);
-      }
-    }
-
-    // Fallback to checking active drags
-    return this.current;
-  }
-
-  /**
-   * 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);