@hkdigital/lib-sveltekit 0.1.78 → 0.1.80

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

@@ -3,6 +3,8 @@
 
   import { createOrGetDragState } from './drag-state.svelte.js';
 
+  import { PreviewController } from './PreviewController.js';
+
   import { generateLocalId } from '../../util/unique';
 
   import {
@@ -31,7 +33,8 @@
    *     event: DragEvent,
    *     item: any,
    *     source: string,
-   *     group: string
+   *     group: string,
+   *     getPreviewController: () => PreviewController
    *   }) => void,
    *   onDragging?: (detail: {
    *     event: DragEvent,
@@ -143,12 +146,21 @@
     event.dataTransfer.effectAllowed = 'move';
     event.dataTransfer.setData('application/json', JSON.stringify(dragData));
 
-    // Set custom drag image if needed
-    if (event.dataTransfer.setDragImage) {
-      // Could set custom drag image here
+    // Create the preview controller with natural offsets already calculated
+    const previewController = new PreviewController(event);
+
+    // Function to get the preview controller
+    const getPreviewController = () => previewController;
+
+    // Call onDragStart with the getPreviewController function
+    onDragStart?.({ event, item, source, group, getPreviewController });
+
+    // Apply default preview if no custom one was set
+    if (!previewController.hasCustomPreview()) {
+      previewController.applyDefaultPreview();
     }
 
-    onDragStart?.({ event, item, source, group });
+    // Additional handlers can be left unchanged
   }
 
   /**
@@ -169,7 +181,7 @@
     clearTimeout(dragTimeout);
 
     // Clear global drag state
-    dragState.end( draggableId );
+    dragState.end(draggableId);
 
     // Check if drop was successful
     const wasDropped = event.dataTransfer.dropEffect !== 'none';

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

@@ -20,6 +20,7 @@ type Draggable = {
             item: any;
             source: string;
             group: string;
+            getPreviewController: () => PreviewController;
         }) => void;
         onDragging?: (detail: {
             event: DragEvent;
@@ -57,6 +58,7 @@ declare const Draggable: import("svelte").Component<{
         item: any;
         source: string;
         group: string;
+        getPreviewController: () => PreviewController;
     }) => void;
     onDragging?: (detail: {
         event: DragEvent;
@@ -74,3 +76,4 @@ declare const Draggable: import("svelte").Component<{
     }) => void;
     canDrag?: (item: any) => boolean;
 }, {}, "isDragging" | "isDropping" | "isDragPreview">;
+import { PreviewController } from './PreviewController.js';

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

@@ -0,0 +1,39 @@
+/**
+ * Controller for customizing drag preview images
+ */
+export class PreviewController {
+    /**
+     * @param {DragEvent} event - The drag event
+     */
+    constructor(event: DragEvent);
+    event: DragEvent;
+    dataTransfer: DataTransfer;
+    targetElement: HTMLElement;
+    offsetX: number;
+    offsetY: number;
+    _previewSet: boolean;
+    /**
+     * Create a preview image from the current draggable element or a specific child element
+     * @param {string} [selector] - Optional CSS selector to target a specific child element
+     * @returns {HTMLElement} - The created preview element
+     */
+    grabPreviewImage(selector?: string): HTMLElement;
+    /**
+     * Set a custom element as the drag preview image
+     * @param {HTMLElement} element - Element to use as drag preview
+     * @param {number} [offsetX] - Horizontal offset (uses natural offset if omitted)
+     * @param {number} [offsetY] - Vertical offset (uses natural offset if omitted)
+     * @returns {boolean} - Whether setting the preview was successful
+     */
+    setPreviewImage(element: HTMLElement, offsetX?: number, offsetY?: number): boolean;
+    /**
+     * Check if a custom preview has been set
+     * @returns {boolean}
+     */
+    hasCustomPreview(): boolean;
+    /**
+     * Apply the default preview (uses the draggable element itself)
+     * @returns {boolean}
+     */
+    applyDefaultPreview(): boolean;
+}

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

@@ -0,0 +1,112 @@
+/**
+ * Controller for customizing drag preview images
+ */
+export class PreviewController {
+  /**
+   * @param {DragEvent} event - The drag event
+   */
+  constructor(event) {
+    this.event = event;
+    this.dataTransfer = event.dataTransfer;
+    this.targetElement = /** @type {HTMLElement} */ (event.currentTarget);
+
+    // Calculate natural offsets by default (to prevent "jumping")
+    const rect = this.targetElement.getBoundingClientRect();
+    this.offsetX = event.clientX - rect.left;
+    this.offsetY = event.clientY - rect.top;
+
+    this._previewSet = false;
+  }
+
+  /**
+   * Create a preview image from the current draggable element or a specific child element
+   * @param {string} [selector] - Optional CSS selector to target a specific child element
+   * @returns {HTMLElement} - The created preview element
+   */
+  grabPreviewImage(selector = null) {
+    // Find the source element (either the whole draggable or a specific child)
+    const sourceElement = selector
+      ? this.targetElement.querySelector(selector)
+      : this.targetElement;
+
+    if (!sourceElement) {
+      console.error(`Element with selector "${selector}" not found`);
+      return this.grabPreviewImage(); // Fallback to the main element
+    }
+
+    // Clone the element to create the preview
+    const previewElement = /** @type {HTMLElement} */ (
+      sourceElement.cloneNode(true)
+    );
+
+    // Position off-screen (needed for setDragImage to work properly)
+    previewElement.style.position = 'absolute';
+    previewElement.style.top = '-9999px';
+    previewElement.style.left = '-9999px';
+
+    // Add to the document temporarily
+    document.body.appendChild(previewElement);
+
+    return previewElement;
+  }
+
+  /**
+   * Set a custom element as the drag preview image
+   * @param {HTMLElement} element - Element to use as drag preview
+   * @param {number} [offsetX] - Horizontal offset (uses natural offset if omitted)
+   * @param {number} [offsetY] - Vertical offset (uses natural offset if omitted)
+   * @returns {boolean} - Whether setting the preview was successful
+   */
+  setPreviewImage(element, offsetX, offsetY) {
+    if (!this.dataTransfer || !this.dataTransfer.setDragImage) {
+      return false;
+    }
+
+    // Use provided offsets or fall back to natural offsets
+    const finalOffsetX = offsetX !== undefined ? offsetX : this.offsetX;
+    const finalOffsetY = offsetY !== undefined ? offsetY : this.offsetY;
+
+    try {
+      this.dataTransfer.setDragImage(element, finalOffsetX, finalOffsetY);
+      this._previewSet = true;
+      return true;
+    } catch (err) {
+      console.error('Failed to set drag preview image:', err);
+      return false;
+    }
+  }
+
+  /**
+   * Check if a custom preview has been set
+   * @returns {boolean}
+   */
+  hasCustomPreview() {
+    return this._previewSet;
+  }
+
+  /**
+   * Apply the default preview (uses the draggable element itself)
+   * @returns {boolean}
+   */
+  applyDefaultPreview() {
+    if (
+      !this.dataTransfer ||
+      !this.dataTransfer.setDragImage ||
+      this._previewSet
+    ) {
+      return false;
+    }
+
+    try {
+      this.dataTransfer.setDragImage(
+        this.targetElement,
+        this.offsetX,
+        this.offsetY
+      );
+      return true;
+    } catch (err) {
+      console.error('Failed to set default drag preview:', err);
+      return false;
+    }
+  }
+}

package/dist/components/rows/panel-grid-row/PanelGridRow.svelte.d.ts

@@ -4,8 +4,8 @@ type PanelGridRow = {
     $set?(props: Partial<{
         base?: string;
         bg?: string;
-        justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
-        justifyItems?: "start" | "center" | "end" | "stretch";
+        justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
+        justifyItems?: "center" | "start" | "end" | "stretch";
         gap?: string;
         classes?: string;
         children?: Snippet<[]>;

package/dist/components/rows/panel-row-2/PanelRow2.svelte.d.ts

@@ -4,8 +4,8 @@ type PanelRow2 = {
     $set?(props: Partial<{
         base?: string;
         bg?: string;
-        justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
-        justifyItems?: "start" | "center" | "end" | "stretch";
+        justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
+        justifyItems?: "center" | "start" | "end" | "stretch";
         gap?: string;
         classes?: string;
         children?: Snippet<[]>;

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

@@ -1,12 +1,20 @@
 @define-mixin component-draggable {
   [data-component='draggable'] {
-    cursor: move;
     user-select: none;
     transition:
       opacity 0.2s ease,
       transform 0.2s ease;
   }
 
+  [data-component='draggable']:not(.state-dragging):not(.state-drag-disabled) {
+    cursor: grab;  /* Open hand when hovering draggable items */
+  }
+
+
+  /*[data-component='draggable']:active {
+    cursor: grabbing;
+  }*/
+
   /* State-based styling using state classes */
   [data-component='draggable'].state-idle {
     opacity: 1;
@@ -16,6 +24,7 @@
   [data-component='draggable'].state-dragging {
     opacity: 0.5;
     transform: scale(0.95);
+    cursor: grabbing;
   }
 
   [data-component='draggable'].state-drag-preview {

package/package.json

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