@hkdigital/lib-sveltekit 0.2.7 → 0.2.9

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

@@ -1,6 +1,8 @@
 <script>
   import { createDragState } from './drag-state.svelte.js';
 
+  import { activeDragOver, activeTouchMove } from './actions.js';
+
   /**
    * @type {{
    *   contextKey?: import('../../typedef').ContextKey,
@@ -93,11 +95,11 @@
 <div
   data-component="drag-drop-context"
   ondragenter={onDragEnter}
-  ondragover={onDragOver}
+  use:activeDragOver={onDragOver}
   ondragleave={onDragLeave}
   ondrop={onDrop}
   ondragend={onDragEnd}
-  ontouchmove={(e) => {
+  use:activeTouchMove={(e) => {
     // Prevent scrolling if we're dragging
     if (dragState.isDragging()) {
       e.preventDefault();

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

@@ -1,4 +1,6 @@
 <script>
+  import { browser } from '$app/environment';
+
   import { toStateClasses } from '../../util/design-system/index.js';
   import { createOrGetDragState } from './drag-state.svelte.js';
   import { DragController } from './DragController.js';
@@ -177,11 +179,23 @@ let stateObject = $derived({
     startDrag(event);
   }
 
+  let transparentPixel;
+
+  if( browser )
+  {
+    transparentPixel = new Image();
+    transparentPixel.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+  }
+
   /**
    * Start the drag operation
    * @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);
+
     // Get the element's bounding rectangle
     const rect = draggableElement.getBoundingClientRect();
 
@@ -221,51 +235,23 @@ let stateObject = $derived({
     // Call onDragStart with the getController function
     onDragStart?.({ event, item, source, group, getController });
 
-    // Apply drag preview if available
-    // if (draggingSnippet) {
-      // 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;
+    // Store rectangle information for the snippet
+    elementRect = rect;
 
-        // 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';
-
-        // Chrome needs the image to be loaded before setting it
-        emptyImg.onload = () => {
-         if (event.dataTransfer) {
-           event.dataTransfer.setDragImage(emptyImg, 0, 0);
-         }
-        };
+    // 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;
 
-        // Fallback: try to set it immediately too
-        event.dataTransfer.setDragImage(emptyImg, 0, 0);
+    // Set initial position - this places the preview at the element's original position
+    previewX = rect.left;
+    previewY = rect.top;
 
-        // Add document level event listener to track mouse movement
-        document.addEventListener('dragover', handleDocumentDragOver);
+    // 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 {
-    //   // Apply default preview if no custom preview was set
-    //   previewController.applyDefaultPreview();
-    // }
+    // Show custom preview
+    showPreview = true;
+    customPreviewSet = true;
   }
 
   /**

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

@@ -0,0 +1,6 @@
+export function activeDragOver(node: any, handler: any): {
+    destroy(): void;
+};
+export function activeTouchMove(node: any, handler: any): {
+    destroy(): void;
+};

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

@@ -0,0 +1,18 @@
+export function activeDragOver(node, handler) {
+  node.addEventListener('dragover', handler, { passive: false });
+
+  return {
+    destroy() {
+      node.removeEventListener('dragover', handler, { passive: false });
+    }
+  };
+}
+
+export function activeTouchMove(node, handler) {
+  node.addEventListener('touchmove', handler, { passive: false });
+  return {
+    destroy() {
+      node.removeEventListener('touchmove', handler, { passive: false });
+    }
+  };
+}

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

@@ -270,7 +270,7 @@ class DragState {
 
     // For dragover events, we can't read dataTransfer.getData in Chrome
     // Instead, check if we have an active drag operation
-    if (event.type === 'dragover') {
+    if (event.type === 'dragover'|| event.type === 'dragenter') {
       if (this.draggables.size > 0) {
         // Return the most recent drag operation
         return this.current;

package/dist/features/presenter/Presenter.svelte

@@ -117,7 +117,7 @@
     inert={presenter.busy}
     class="justify-self-stretch self-stretch overflow-hidden"
   >
-    <div class="{classesA} h-full w-full" style={stylesA}>
+    <div class="{classesA} h-full w-full grid" style={stylesA}>
       {@render layoutSnippet(presenter.slideA, presenter.layerA)}
     </div>
   </div>
@@ -129,7 +129,7 @@
     inert={presenter.busy}
     class="justify-self-stretch self-stretch overflow-hidden"
   >
-    <div class="{classesB} h-full w-full" style={stylesB}>
+    <div class="{classesB} h-full w-full grid" style={stylesB}>
       {@render layoutSnippet(presenter.slideB, presenter.layerB)}
     </div>
   </div>

package/package.json

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

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

@@ -1,323 +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 touch-simulated event
-    if (event.dataTransfer && !event.dataTransfer.files) {
-      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:', error);
-      }
-    }
-
-    // Check if this is a file drop
-    if (event.dataTransfer.types.includes('Files')) {
-      return null;
-    }
-
-    // Handle internal drag operations
-    try {
-      const jsonData = event.dataTransfer.getData('application/json');
-      if (jsonData) {
-        const transferData = JSON.parse(jsonData);
-        const draggableId = transferData.draggableId;
-
-        if (draggableId) {
-          const dragData = this.getDraggableById(draggableId);
-          if (dragData) {
-            return dragData;
-          }
-        }
-      }
-    } catch (error) {
-      console.error('Error getting drag data:', error);
-    }
-
-    return null;
-  }
-
-  /**
-   * 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);