@hkdigital/lib-sveltekit 0.1.81 → 0.1.83

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

@@ -162,70 +162,81 @@
     startDrag(event);
   }
 
-  /**
-   * Start the drag operation
-   * @param {DragEvent} event
-   */
-  function startDrag(event) {
-    const dragData = {
-      item,
-      source,
-      group,
-      metadata: { timestamp: Date.now() }
-    };
-
-    // Set shared drag state
-    dragState.start(draggableId, dragData);
-
-    event.dataTransfer.effectAllowed = 'move';
-    event.dataTransfer.setData('application/json', JSON.stringify(dragData));
-
-    // 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();
-      }
+/**
+ * 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 your preferred structure
+  const dragData = {
+    offsetX: dragOffsetX,
+    offsetY: dragOffsetY,
+    item,
+    source,
+    group,
+    metadata: {
+      timestamp: Date.now()
     }
-    // Apply default preview if no custom preview was set and no snippet
-    else if (!previewController.hasCustomPreview() && !customPreviewSet) {
+  };
+
+  // Set shared drag state
+  dragState.start(draggableId, dragData);
+
+  // Set data transfer for browser drag and drop API
+  event.dataTransfer.effectAllowed = 'move';
+  event.dataTransfer.setData('application/json', JSON.stringify(dragData));
+
+  // 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();
   }
+}
 
   /**
    * Handle during drag

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

@@ -7,20 +7,21 @@
   import { GridLayers } from '../layout';
 
   import {
-    findDraggableSource,
-    getDraggableIdFromEvent,
-    processDropWithData
+    // findDraggableSource,
+    getDraggableIdFromEvent
+    // processDropWithData
   } from './util.js';
 
   import {
     READY,
     DRAG_OVER,
     CAN_DROP,
-    CANNOT_DROP,
-    DROP_DISABLED
+    CANNOT_DROP
+    // DROP_DISABLED
   } from '../../constants/state-labels/drop-states.js';
 
   /** @typedef {import('../../typedef').DragData} DragData */
+  /** @typedef {import('../../typedef').DropData} DropData */
 
   /**
    * @type {{
@@ -50,13 +51,7 @@
    *     event: DragEvent,
    *     zone: string
    *   }) => void,
-   *   onDrop?: (detail: {
-   *     event: DragEvent,
-   *     zone: string,
-   *     item: any,
-   *     source: string,
-   *     metadata?: any
-   *   }) => any | Promise<any>,
+   *   onDrop?: (detail: DropData) => any | Promise<any>,
    *   onDropStart?: (detail: {
    *     event: DragEvent,
    *     zone: string,
@@ -80,7 +75,7 @@
     base = '',
     classes = '',
     height = 'h-min',
-    autoHeight= false,
+    autoHeight = false,
     children,
     contextKey,
     dropPreviewSnippet,
@@ -95,7 +90,6 @@
     ...attrs
   } = $props();
 
-
   const dragState = createOrGetDragState(contextKey);
 
   // console.debug('DropZone contextKey:', contextKey);
@@ -141,11 +135,7 @@
 
   // Update bindable props
   $effect(() => {
-    isDragOver = [
-      DRAG_OVER,
-      CAN_DROP,
-      CANNOT_DROP
-    ].includes(currentState);
+    isDragOver = [DRAG_OVER, CAN_DROP, CANNOT_DROP].includes(currentState);
 
     canDrop = currentState === CAN_DROP;
   });
@@ -167,96 +157,90 @@
     return true;
   }
 
-/**
- * Handle drag enter with improved DOM traversal check
- * @param {DragEvent} event
- */
-function handleDragEnter(event) {
-  // Prevent default to allow drop
-  event.preventDefault();
-
-  // If we're already in a drag-over state, don't reset anything
-  if (isCurrentlyOver) return;
+  /**
+   * Handle drag enter with improved DOM traversal check
+   * @param {DragEvent} event
+   */
+  function handleDragEnter(event) {
+    // Prevent default to allow drop
+    event.preventDefault();
 
-  // Now we're over this dropzone
-  isCurrentlyOver = true;
+    // If we're already in a drag-over state, don't reset anything
+    if (isCurrentlyOver) return;
 
-  // Get the draggable ID from the event
-  const draggableId = getDraggableIdFromEvent(event);
+    // Now we're over this dropzone
+    isCurrentlyOver = true;
 
-  if (draggableId) {
-    // Get the drag data for this specific draggable
-    const dragData = dragState.getDraggable(draggableId);
+    // Get the draggable ID from the event
+    const draggableId = getDraggableIdFromEvent(event);
 
-    // Update state based on acceptance
-    if (dragData) {
-      currentState = canAcceptDrop(dragData)
-        ? CAN_DROP
-        : CANNOT_DROP;
-    } else {
-      currentState = DRAG_OVER;
-    }
-  } else {
-    // Fallback to the current drag data (for compatibility)
-    const dragData = dragState.current;
-
-    if (dragData) {
-      currentState = canAcceptDrop(dragData)
-        ? CAN_DROP
-        : CANNOT_DROP;
+    if (draggableId) {
+      // Get the drag data for this specific draggable
+      const dragData = dragState.getDraggable(draggableId);
+
+      // Update state based on acceptance
+      if (dragData) {
+        currentState = canAcceptDrop(dragData) ? CAN_DROP : CANNOT_DROP;
+      } else {
+        currentState = DRAG_OVER;
+      }
     } else {
-      currentState = DRAG_OVER;
+      // Fallback to the current drag data (for compatibility)
+      const dragData = dragState.current;
+
+      if (dragData) {
+        currentState = canAcceptDrop(dragData) ? CAN_DROP : CANNOT_DROP;
+      } else {
+        currentState = DRAG_OVER;
+      }
     }
-  }
 
-  // Notify listeners
-  onDragEnter?.({ event, zone, canDrop: currentState === CAN_DROP });
-}
-
-/**
- * Handle drag over
- * @param {DragEvent} event
- */
-function handleDragOver(event) {
-  // Prevent default to allow drop
-  event.preventDefault();
-
-  // If we're not currently over this dropzone (despite dragover firing),
-  // treat it as an enter event
-  if (!isCurrentlyOver) {
-    handleDragEnter(event);
-    return;
+    // Notify listeners
+    onDragEnter?.({ event, zone, canDrop: currentState === CAN_DROP });
   }
 
-  // Get the draggable ID from the event
-  const draggableId = getDraggableIdFromEvent(event);
-  let dragData;
+  /**
+   * Handle drag over
+   * @param {DragEvent} event
+   */
+  function handleDragOver(event) {
+    // Prevent default to allow drop
+    event.preventDefault();
+
+    // If we're not currently over this dropzone (despite dragover firing),
+    // treat it as an enter event
+    if (!isCurrentlyOver) {
+      handleDragEnter(event);
+      return;
+    }
 
-  if (draggableId) {
-    // Get the drag data for this specific draggable
-    dragData = dragState.getDraggable(draggableId);
-  } else {
-    // Fallback to the current drag data (for compatibility)
-    dragData = dragState.current;
-  }
+    // Get the draggable ID from the event
+    const draggableId = getDraggableIdFromEvent(event);
+    let dragData;
 
-  // Re-evaluate acceptance
-  if (dragData && [DRAG_OVER, CAN_DROP, CANNOT_DROP].includes(currentState)) {
-    currentState = canAcceptDrop(dragData)
-      ? CAN_DROP
-      : CANNOT_DROP;
-  }
+    if (draggableId) {
+      // Get the drag data for this specific draggable
+      dragData = dragState.getDraggable(draggableId);
+    } else {
+      // Fallback to the current drag data (for compatibility)
+      dragData = dragState.current;
+    }
 
-  // Set visual feedback based on drop acceptance
-  if (currentState === CAN_DROP) {
-    event.dataTransfer.dropEffect = 'move';
-  } else if (currentState === CANNOT_DROP) {
-    event.dataTransfer.dropEffect = 'none';
-  }
+    // Re-evaluate acceptance
+    if (dragData && [DRAG_OVER, CAN_DROP, CANNOT_DROP].includes(currentState)) {
+      currentState = canAcceptDrop(dragData) ? CAN_DROP : CANNOT_DROP;
+    }
 
-  // Notify listeners
-  onDragOver?.({ event, zone });
-}
+    // Set visual feedback based on drop acceptance
+    if (currentState === CAN_DROP) {
+      event.dataTransfer.dropEffect = 'move';
+    } else if (currentState === CANNOT_DROP) {
+      event.dataTransfer.dropEffect = 'none';
+    }
+
+    // Notify listeners
+    onDragOver?.({ event, zone });
+  }
 
   /**
    * Handle drag leave with improved DOM traversal check
@@ -270,8 +254,8 @@ function handleDragOver(event) {
     const relatedTarget = event.relatedTarget;
 
     // If relatedTarget is null or outside our dropzone, we're truly leaving
-    const isActuallyLeaving = !relatedTarget ||
-                             !dropzoneElement.contains(relatedTarget);
+    const isActuallyLeaving =
+      !relatedTarget || !dropzoneElement.contains(relatedTarget);
 
     if (isActuallyLeaving) {
       isCurrentlyOver = false;
@@ -280,68 +264,96 @@ function handleDragOver(event) {
     }
   }
 
-/**
- * Handle drop
- * @param {DragEvent} event
- */
-function handleDrop(event) {
-  // Prevent default browser actions
-  event.preventDefault();
+  /**
+   * Handle drop
+   * @param {DragEvent} event
+   */
+  function handleDrop(event) {
+    // Prevent default browser actions
+    event.preventDefault();
 
-  // Reset our tracking state
-  isCurrentlyOver = false;
+    // Reset our tracking state
+    isCurrentlyOver = false;
 
-  try {
-    // First try to get the draggable ID from the event
-    const draggableId = getDraggableIdFromEvent(event);
-    let dragData;
+    try {
+      // First try to get the draggable ID from the event
+      const draggableId = getDraggableIdFromEvent(event);
+      let dragData;
 
-    if (draggableId) {
-      // Get the drag data from state using the draggable ID
-      dragData = dragState.getDraggable(draggableId);
-    }
+      if (draggableId) {
+        // Get the drag data from state using the draggable ID
+        dragData = dragState.getDraggable(draggableId);
+      }
 
-    // If we couldn't get it from the element attribute, try dataTransfer
-    if (!dragData) {
-      // Parse the JSON data from the dataTransfer object (only works during drop)
-      const jsonData = event.dataTransfer.getData('application/json');
-      if (jsonData) {
-        dragData = JSON.parse(jsonData);
+      // If we couldn't get it from the element attribute, try dataTransfer
+      if (!dragData) {
+        // Parse the JSON data from the dataTransfer object (only works during drop)
+        const jsonData = event.dataTransfer.getData('application/json');
+        if (jsonData) {
+          dragData = JSON.parse(jsonData);
+        }
       }
-    }
 
-    // Check if we can accept this drop
-    if (dragData && canAcceptDrop(dragData)) {
-      // Notify listener
-      onDropStart?.({ event, zone, data: dragData });
-
-      // Call the onDrop handler and handle Promise resolution
-      const dropResult = onDrop?.({
-        event,
-        zone,
-        item: dragData.item,
-        source: dragData.source,
-        metadata: dragData.metadata
-      });
-
-      // Handle async or sync results
-      Promise.resolve(dropResult).then(() => {
-        currentState = READY;
-        onDropEnd?.({ event, zone, data: dragData, success: true });
-      }).catch((error) => {
+      // Check if we can accept this drop
+      if (dragData && canAcceptDrop(dragData)) {
+        // Notify listener
+        onDropStart?.({ event, zone, data: dragData });
+
+        const style = window.getComputedStyle(dropzoneElement);
+
+        // Parse border widths from computed style
+        const borderLeftWidth = parseInt(style.borderLeftWidth, 10) || 0;
+        const borderTopWidth = parseInt(style.borderTopWidth, 10) || 0;
+
+        // Get dropzone rectangle
+        const dropzoneRect = dropzoneElement.getBoundingClientRect();
+
+        // Calculate position with both dragData.offsetX/Y adjustment and border adjustment
+        // This combines your current approach with the border adjustment
+        const offsetX =
+          event.clientX -
+          dropzoneRect.left -
+          borderLeftWidth -
+          (dragData.offsetX ?? 0);
+
+        const offsetY =
+          event.clientY -
+          dropzoneRect.top -
+          borderTopWidth -
+          (dragData.offsetY ?? 0);
+
+        // console.debug("dragData", dragData);
+
+        const dropResult = onDrop?.({
+          event,
+          offsetX,
+          offsetY,
+          zone,
+          item: dragData.item,
+          source: dragData.source,
+          metadata: dragData.metadata
+        });
+
+        // Handle async or sync results
+        Promise.resolve(dropResult)
+          .then(() => {
+            currentState = READY;
+            onDropEnd?.({ event, zone, data: dragData, success: true });
+          })
+          .catch((error) => {
+            currentState = READY;
+            onDropEnd?.({ event, zone, data: dragData, success: false, error });
+          });
+      } else {
+        // Not a valid drop, reset state
         currentState = READY;
-        onDropEnd?.({ event, zone, data: dragData, success: false, error });
-      });
-    } else {
-      // Not a valid drop, reset state
+      }
+    } catch (error) {
+      // Handle parsing errors
+      console.error('Drop error:', error);
       currentState = READY;
     }
-  } catch (error) {
-    // Handle parsing errors
-    console.error('Drop error:', error);
-    currentState = READY;
   }
-}
 </script>
 
 <div
@@ -367,14 +379,16 @@ function handleDrop(event) {
         {@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;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
   }
 
   [data-layer='content'].auto-height {
@@ -382,10 +396,12 @@ function handleDrop(event) {
     width: 100%;
   }
 
-  [data-layer='preview']
-  {
+  [data-layer='preview'] {
     position: absolute;
-    left: 0; right: 0; top: 0; bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
     pointer-events: none;
   }
 </style>

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

@@ -29,13 +29,7 @@ type DropZone = {
             event: DragEvent;
             zone: string;
         }) => void;
-        onDrop?: (detail: {
-            event: DragEvent;
-            zone: string;
-            item: any;
-            source: string;
-            metadata?: any;
-        }) => any;
+        onDrop?: (detail: DropData) => any;
         onDropStart?: (detail: {
             event: DragEvent;
             zone: string;
@@ -78,13 +72,7 @@ declare const DropZone: import("svelte").Component<{
         event: DragEvent;
         zone: string;
     }) => void;
-    onDrop?: (detail: {
-        event: DragEvent;
-        zone: string;
-        item: any;
-        source: string;
-        metadata?: any;
-    }) => any | Promise<any>;
+    onDrop?: (detail: import("../../typedef").DropData) => any | Promise<any>;
     onDropStart?: (detail: {
         event: DragEvent;
         zone: string;

package/dist/constants/state-labels/drop-states.d.ts

@@ -2,5 +2,3 @@ export const READY: "ready";
 export const DRAG_OVER: "drag-over";
 export const CAN_DROP: "can-drop";
 export const CANNOT_DROP: "cannot-drop";
-export const DROP_DISABLED: "drop-disabled";
-export const ACTIVE_DROP: "active-drop";

package/dist/constants/state-labels/drop-states.js

@@ -2,5 +2,5 @@ export const READY = 'ready';                   // Waiting for drag
 export const DRAG_OVER = 'drag-over';           // Item dragged over zone
 export const CAN_DROP = 'can-drop';             // Valid drop target
 export const CANNOT_DROP = 'cannot-drop';       // Invalid drop target
-export const DROP_DISABLED = 'drop-disabled';   // Dropping not allowed
-export const ACTIVE_DROP = 'active-drop';       // Currently processing drop
+// export const DROP_DISABLED = 'drop-disabled';   // Dropping not allowed
+// export const ACTIVE_DROP = 'active-drop';       // Currently processing drop

package/dist/themes/hkdev/components/drag-drop/dropzone.css

@@ -2,9 +2,9 @@
   /* Visual styling and customizable aspects */
   [data-component='dropzone'] {
     /*min-height: 100px;*/
-    border: 2px dashed rgb(var(--color-surface-400));
+    border: 1px dashed rgb(var(--color-surface-400));
     border-radius: var(--theme-rounded-container);
-    padding: 1rem;
+    /*padding: 1rem;*/
     transition: all 0.2s ease;
     position: relative;
     background-color: rgb(var(--color-surface-50) / 0.5);
@@ -23,7 +23,7 @@
     &.state-can-drop {
       border-color: rgb(var(--color-success-500));
       background-color: rgb(var(--color-success-500) / 0.08);
-      transform: scale(1.01);
+      /*transform: scale(1.01);*/
       box-shadow: 0 0 0 3px rgb(var(--color-success-500) / 0.2);
     }
 

package/dist/typedef/drag.d.ts

@@ -1,6 +1,8 @@
 declare const _default: {};
 export default _default;
 export type DragData = {
+    offsetX: number;
+    offsetY: number;
     /**
      * - The item being dragged
      */

package/dist/typedef/drag.js

@@ -1,5 +1,7 @@
 /**
  * @typedef {Object} DragData
+ * @property {number} offsetX
+ * @property {number} offsetY
  * @property {any} item - The item being dragged
  * @property {string} [source] - Source identifier
  * @property {string} [group] - Drag group

package/dist/typedef/drop.d.ts

@@ -1,20 +1,11 @@
 declare const _default: {};
 export default _default;
 export type DropData = {
-    /**
-     * - The dropped item
-     */
+    event: DragEvent;
+    offsetX: number;
+    offsetY: number;
+    zone: string;
     item: any;
-    /**
-     * - Source identifier
-     */
     source: string;
-    /**
-     * - Drag group
-     */
-    group: string;
-    /**
-     * - Additional metadata
-     */
     metadata?: any;
 };

package/dist/typedef/drop.js

@@ -1,9 +1,12 @@
 /**
  * @typedef {Object} DropData
- * @property {any} item - The dropped item
- * @property {string} source - Source identifier
- * @property {string} group - Drag group
- * @property {any} [metadata] - Additional metadata
+ * @property {DragEvent} event
+ * @property {number} offsetX
+ * @property {number} offsetY
+ * @property {string} zone
+ * @property {any} item
+ * @property {string} source
+ * @property {any} [metadata]
  */
 
-export default {}
+export default {};

package/package.json

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