@hkdigital/lib-sveltekit 0.2.8 → 0.2.10

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

@@ -0,0 +1,319 @@
+// 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 file drop first
+    if (event.dataTransfer && event.dataTransfer.types) {
+      // Check if types is an array or DOMStringList
+      const types = Array.from(event.dataTransfer.types);
+      if (types.includes('Files')) {
+        return null; // This is a file drop, not an internal drag
+      }
+    }
+
+    // For dragover events, we can't read dataTransfer.getData in Chrome
+    // Instead, check if we have an active drag operation
+    if (event.type === 'dragover'|| event.type === 'dragenter') {
+      if (this.draggables.size > 0) {
+        // Return the most recent drag operation
+        return this.current;
+      }
+    }
+
+    // For drop events, we can read the data
+    if (event.type === 'drop' && event.dataTransfer) {
+      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 from drop:', error);
+      }
+    }
+
+    // Fallback to checking active drags
+    return this.current;
+  }
+
+  /**
+   * 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);

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

@@ -1,7 +1,7 @@
-export { default as Draggable } from './Draggable.svelte';
-export { default as DropZone } from './DropZone.svelte';
-export { default as DropZoneList } from './DropZoneList.svelte';
-export { default as DropZoneArea } from './DropZoneArea.svelte';
-export { default as DragDropContext } from './DragDropContext.svelte';
-
-export * from './drag-state.svelte.js';
+export { default as Draggable } from './Draggable.svelte';
+export { default as DropZone } from './DropZone.svelte';
+export { default as DropZoneList } from './DropZoneList.svelte';
+export { default as DropZoneArea } from './DropZoneArea.svelte';
+export { default as DragDropContext } from './DragDropContext.svelte';
+
+export * from './drag-state.svelte.js';

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

@@ -1,32 +0,0 @@
-/**
- * Find the source draggable element from an event
- *
- * @param {DragEvent} event
- * @returns {HTMLElement|null}
- */
-export function findDraggableSource(event: DragEvent): HTMLElement | null;
-/**
- * Get draggable ID from an event, if available
- * @param {DragEvent} event
- * @returns {string|null}
- */
-export function getDraggableIdFromEvent(event: DragEvent): string | null;
-/**
- * Process a drop event with the provided data and handlers
- * @param {DragEvent} event
- * @param {any} data The drag data
- * @param {Object} options
- * @param {Function} options.onDropStart Optional drop start handler
- * @param {Function} options.onDrop Main drop handler
- * @param {Function} options.onDropEnd Optional drop end handler
- * @param {string} options.zone The drop zone identifier
- * @param {Function} options.setState Function to update component state
- * @returns {Promise<boolean>} Success status
- */
-export function processDropWithData(event: DragEvent, data: any, { onDropStart, onDrop, onDropEnd, zone, setState }: {
-    onDropStart: Function;
-    onDrop: Function;
-    onDropEnd: Function;
-    zone: string;
-    setState: Function;
-}): Promise<boolean>;

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

@@ -1,85 +1,85 @@
-import { createOrGetDragState } from './drag-state.svelte.js';
-
-/**
- * Find the source draggable element from an event
- *
- * @param {DragEvent} event
- * @returns {HTMLElement|null}
- */
-export function findDraggableSource(event) {
-  const target = /** @type {Element|EventTarget|null} */ (event.target);
-
-  if (!(target instanceof Element)) {
-    return null;
-  }
-
-  let element = /** @type {Element|null} */ (target);
-
-  // Walk up the DOM tree
-  while (element !== null && element !== document.body) {
-    if (element.hasAttribute('data-id')) {
-      // Return as HTMLElement if needed
-      return /** @type {HTMLElement} */ (element);
-    }
-
-    element = element.parentElement;
-  }
-
-  return null;
-}
-
-/**
- * Get draggable ID from an event, if available
- * @param {DragEvent} event
- * @returns {string|null}
- */
-export function getDraggableIdFromEvent(event) {
-  const element = findDraggableSource(event);
-  return element ? element.getAttribute('data-id') : null;
-}
-
-/**
- * Process a drop event with the provided data and handlers
- * @param {DragEvent} event
- * @param {any} data The drag data
- * @param {Object} options
- * @param {Function} options.onDropStart Optional drop start handler
- * @param {Function} options.onDrop Main drop handler
- * @param {Function} options.onDropEnd Optional drop end handler
- * @param {string} options.zone The drop zone identifier
- * @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 }
-) {
-  try {
-    // Update state and notify listeners
-    setState('ACTIVE_DROP');
-    onDropStart?.({ event, zone, data });
-
-    // Call the onDrop handler
-    const dropResult = onDrop?.({
-      event,
-      zone,
-      item: data.item,
-      source: data.source,
-      metadata: data.metadata
-    });
-
-    // Handle async or sync results
-    await Promise.resolve(dropResult);
-
-    // Success path
-    setState('READY');
-    onDropEnd?.({ event, zone, data, success: true });
-    return true;
-  } catch (error) {
-    // Error path
-    setState('READY');
-    onDropEnd?.({ event, zone, data, success: false, error });
-    return false;
-  }
-}
+// import { createOrGetDragState } from './drag-state.svelte.js';
+
+// /**
+//  * Find the source draggable element from an event
+//  *
+//  * @param {DragEvent} event
+//  * @returns {HTMLElement|null}
+//  */
+// export function findDraggableSource(event) {
+//   const target = /** @type {Element|EventTarget|null} */ (event.target);
+
+//   if (!(target instanceof Element)) {
+//     return null;
+//   }
+
+//   let element = /** @type {Element|null} */ (target);
+
+//   // Walk up the DOM tree
+//   while (element !== null && element !== document.body) {
+//     if (element.hasAttribute('data-id')) {
+//       // Return as HTMLElement if needed
+//       return /** @type {HTMLElement} */ (element);
+//     }
+
+//     element = element.parentElement;
+//   }
+
+//   return null;
+// }
+
+// /**
+//  * Get draggable ID from an event, if available
+//  * @param {DragEvent} event
+//  * @returns {string|null}
+//  */
+// export function getDraggableIdFromEvent(event) {
+//   const element = findDraggableSource(event);
+//   return element ? element.getAttribute('data-id') : null;
+// }
+
+// /**
+//  * Process a drop event with the provided data and handlers
+//  * @param {DragEvent} event
+//  * @param {any} data The drag data
+//  * @param {Object} options
+//  * @param {Function} options.onDropStart Optional drop start handler
+//  * @param {Function} options.onDrop Main drop handler
+//  * @param {Function} options.onDropEnd Optional drop end handler
+//  * @param {string} options.zone The drop zone identifier
+//  * @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 }
+// ) {
+//   try {
+//     // Update state and notify listeners
+//     setState('ACTIVE_DROP');
+//     onDropStart?.({ event, zone, data });
+
+//     // Call the onDrop handler
+//     const dropResult = onDrop?.({
+//       event,
+//       zone,
+//       item: data.item,
+//       source: data.source,
+//       metadata: data.metadata
+//     });
+
+//     // Handle async or sync results
+//     await Promise.resolve(dropResult);
+
+//     // Success path
+//     setState('READY');
+//     onDropEnd?.({ event, zone, data, success: true });
+//     return true;
+//   } catch (error) {
+//     // Error path
+//     setState('READY');
+//     onDropEnd?.({ event, zone, data, success: false, error });
+//     return false;
+//   }
+// }

package/dist/components/hkdev/blocks/TextBlock.svelte

@@ -1,47 +1,47 @@
-<script>
-    /**
-     * @type {{
-     *   base?: string,
-     *   bg?: string,
-     *   classes?: string,
-     *   title?: import('svelte').Snippet,
-     *   content?: import('svelte').Snippet,
-     *   footer?: import('svelte').Snippet
-     * } & { [attr: string]: * }}
-     */
-    let {
-      // Style
-      base,
-      bg,
-      classes,
-  
-      // Content
-      title,
-      content,
-      footer,
-  
-      // Attributes
-      ...attrs
-    } = $props();
-  </script>
-  
-  <div data-title-text-button-block class="{base} {bg} {classes}" {...attrs}>
-    {#if title}
-      <h1 class="title-box h1">
-        {@render title()}
-      </h1>
-    {/if}
-  
-    {#if content}
-      <div class="content-box">
-        {@render content()}
-      </div>
-    {/if}
-  
-    {#if footer}
-      <div class="footer-box">
-        {@render footer()}
-      </div>
-    {/if}
-  </div>
+<script>
+    /**
+     * @type {{
+     *   base?: string,
+     *   bg?: string,
+     *   classes?: string,
+     *   title?: import('svelte').Snippet,
+     *   content?: import('svelte').Snippet,
+     *   footer?: import('svelte').Snippet
+     * } & { [attr: string]: * }}
+     */
+    let {
+      // Style
+      base,
+      bg,
+      classes,
+  
+      // Content
+      title,
+      content,
+      footer,
+  
+      // Attributes
+      ...attrs
+    } = $props();
+  </script>
+  
+  <div data-title-text-button-block class="{base} {bg} {classes}" {...attrs}>
+    {#if title}
+      <h1 class="title-box h1">
+        {@render title()}
+      </h1>
+    {/if}
+  
+    {#if content}
+      <div class="content-box">
+        {@render content()}
+      </div>
+    {/if}
+  
+    {#if footer}
+      <div class="footer-box">
+        {@render footer()}
+      </div>
+    {/if}
+  </div>