@hkdigital/lib-sveltekit 0.1.81 → 0.1.82

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,9 +7,9 @@
   import { GridLayers } from '../layout';
 
   import {
-    findDraggableSource,
+    // findDraggableSource,
     getDraggableIdFromEvent,
-    processDropWithData
+    // processDropWithData
   } from './util.js';
 
   import {
@@ -17,10 +17,11 @@
     DRAG_OVER,
     CAN_DROP,
     CANNOT_DROP,
-    DROP_DISABLED
+    // 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,
@@ -315,9 +310,27 @@ function handleDrop(event) {
       // Notify listener
       onDropStart?.({ event, zone, data: dragData });
 
-      // Call the onDrop handler and handle Promise resolution
+      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,
@@ -367,14 +380,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 +397,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.82",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"