@hkdigital/lib-sveltekit 0.1.92 → 0.1.93

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

@@ -1,10 +1,213 @@
 // drag-state.svelte.js
 import { defineStateContext } from '../../util/svelte/state-context/index.js';
 
+/** @typedef {import('../../typedef').SimulatedDragEvent} SimulatedDragEvent */
+
 class DragState {
-  // Replace the single 'current' with a Map of draggable IDs
+  // 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('../../typedef/drag.js').DragData} dragData
@@ -18,22 +221,92 @@ class DragState {
    */
   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('../../typedef/drag.js').DragData|undefined}
    */
-  getDraggable(draggableId) {
+  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('../../typedef/drag.js').DragData|undefined}
    */
   get current() {
-    // For backward compatibility with existing code
     const entries = Array.from(this.draggables.entries());
     return entries.length > 0 ? entries[entries.length - 1][1] : undefined;
   }

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

@@ -1,3 +1,5 @@
+import { createOrGetDragState } from './drag-state.svelte.js';
+
 /**
  * Find the source draggable element from an event
  *
@@ -48,13 +50,11 @@ export function getDraggableIdFromEvent(event) {
  * @param {Function} options.setState Function to update component state
  * @returns {Promise<boolean>} Success status
  */
-export async function processDropWithData(event, data, {
-  onDropStart,
-  onDrop,
-  onDropEnd,
-  zone,
-  setState
-}) {
+export async function processDropWithData(
+  event,
+  data,
+  { onDropStart, onDrop, onDropEnd, zone, setState }
+) {
   try {
     // Update state and notify listeners
     setState('ACTIVE_DROP');

package/dist/components/layout/grid-layers/GridLayers.svelte

@@ -29,7 +29,7 @@
     bg = '',
     padding = '',
     margin = '',
-    height = '',
+    height = 'h-full',
     classes = '',
     style = '',
     cellBase = '',
@@ -150,12 +150,15 @@
       observer = null;
     }
   });
+
+  $inspect('heightFrom', heightFrom);
+  $inspect('containerStyle', containerStyle);
 </script>
 
 <div
   data-component="grid-layers"
   bind:this={gridContainer}
-  class="relative {isFirstRender ? 'invisible' : ''} {base} {bg} {!heightFrom ? height : ''} {classes} {margin} {padding}"
+  class="relative {isFirstRender ? 'invisible' : ''} {base} {bg} {heightFrom ? '' : height} {classes} {margin} {padding}"
   style={containerStyle}
   {...attrs}
 >

package/dist/features/image-box/ImageBox.svelte

@@ -13,7 +13,7 @@
 	 *   aspect?: string,
 	 *   overflow?: string,
 	 *   fit?: 'contain' | 'cover' | 'fill',
-	 *   position?: string,
+	 *   position?: import('../../typedef/image.js').ObjectPosition,
 	 *   imageMeta?: import('../../typedef').ImageSource,
 	 *   imageLoader?: import('../../classes/svelte/image/index.js').ImageLoader,
 	 *   alt?: string,

package/dist/features/image-box/ImageBox.svelte.d.ts

@@ -29,7 +29,7 @@ declare const ImageBox: import("svelte").Component<{
     aspect?: string;
     overflow?: string;
     fit?: "contain" | "cover" | "fill";
-    position?: string;
+    position?: import("../../typedef/image.js").ObjectPosition;
     imageMeta?: import("../../typedef").ImageSource;
     imageLoader?: import("../../classes/svelte/image/index.js").ImageLoader;
     alt?: string;

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

@@ -32,11 +32,11 @@
       cursor: not-allowed;
     }
 
-    &.state-drop-disabled {
+    /*&.state-drop-disabled {
       opacity: 0.5;
       cursor: not-allowed;
       background-color: rgb(var(--color-surface-100));
-    }
+    }*/
   }
 
   /* Default styling for inner elements - all visual/customizable */

package/dist/typedef/drag.d.ts

@@ -13,3 +13,17 @@ export type DragData = {
      */
     source?: string;
 };
+export type SimulatedDragEvent = {
+    type: "dragstart" | "dragover" | "dragleave" | "drop" | "dragend";
+    clientX: number;
+    clientY: number;
+    dataTransfer: {
+        types: Array<string>;
+        getData: Function;
+        dropEffect: "none" | "copy" | "link" | "move";
+        effectAllowed: "none" | "copy" | "copyLink" | "copyMove" | "link" | "linkMove" | "move" | "all" | "uninitialized";
+        files: FileList | any[];
+    };
+    preventDefault: Function;
+    stopPropagation: Function;
+};

package/dist/typedef/drag.js

@@ -7,4 +7,19 @@
  * @property {string} [source] - Source identifier
  */
 
+/**
+ * @typedef {Object} SimulatedDragEvent
+ * @property {'dragstart'|'dragover'|'dragleave'|'drop'|'dragend'} type
+ * @property {number} clientX
+ * @property {number} clientY
+ * @property {Object} dataTransfer
+ * @property {Array<string>} dataTransfer.types
+ * @property {Function} dataTransfer.getData
+ * @property {'none'|'copy'|'link'|'move'} dataTransfer.dropEffect
+ * @property {'none'|'copy'|'copyLink'|'copyMove'|'link'|'linkMove'|'move'|'all'|'uninitialized'} dataTransfer.effectAllowed
+ * @property {FileList|Array} dataTransfer.files
+ * @property {Function} preventDefault
+ * @property {Function} stopPropagation
+ */
+
 export default {}

package/dist/typedef/drop.d.ts

@@ -10,6 +10,6 @@ export type DropData = {
     drop: {
         offsetX: number;
         offsetY: number;
-        event: DragEvent;
+        target: Element;
     };
 };

package/dist/typedef/drop.js

@@ -6,7 +6,7 @@
  * @property {string} source
  * @property {any} item
  * @property {import('./drag').DragData} drag
- * @property {{offsetX: number, offsetY: number, event: DragEvent}} drop
+ * @property {{offsetX: number, offsetY: number, target: Element}} drop
  */
 
 export default {};

package/dist/typedef/image.d.ts

@@ -9,3 +9,4 @@ export type ImageMeta = {
  * Single ImageMeta object or array of ImageMeta objects
  */
 export type ImageSource = ImageMeta | ImageMeta[];
+export type ObjectPosition = "center" | "top" | "bottom" | "left" | "right" | "left top" | "left center" | "left bottom" | "center top" | "center center" | "center bottom" | "right top" | "right center" | "right bottom" | string;

package/dist/typedef/image.js

@@ -10,4 +10,29 @@
  * Single ImageMeta object or array of ImageMeta objects
  */
 
+/**
+ * @typedef {"center" | "top" | "bottom" | "left" | "right" |
+ *          "left top" | "left center" | "left bottom" |
+ *          "center top" | "center center" | "center bottom" |
+ *          "right top" | "right center" | "right bottom" |
+ *          string} ObjectPosition
+ *
+ * @description Accepts valid CSS object-position values including:
+ * - Keywords: "center", "top", "bottom", "left", "right"
+ * - Length values: "10px", "2em", "50%", etc.
+ * - Percentage values: "25%", "100%", etc.
+ * - Two-value combinations: "left top", "center bottom", "25% 75%"
+ * - Mixed units: "left 20px", "10% center", "2em 50%"
+ *
+ * @example
+ * "center"           // Single keyword (centers both axes)
+ * "top"              // Single keyword
+ * "left center"      // Two keywords
+ * "25% 75%"          // Two percentages
+ * "10px 20px"        // Two lengths
+ * "left 25%"         // Keyword + percentage
+ * "50% top"          // Percentage + keyword
+ * "2em center"       // Length + keyword
+ */
+
 export default {};

package/package.json

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