@hkdigital/lib-core 0.3.1

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

@@ -0,0 +1,125 @@
+<script>
+  import { DropZone } from './index.js';
+
+  /**
+   * @type {{
+   *   zone?: string,
+   *   group?: string,
+   *   disabled?: boolean,
+   *   accepts?: (item: any) => boolean,
+   *   minHeight?: string,
+   *   maxHeight?: string,
+   *   gap?: string,
+   *   direction?: 'vertical' | 'horizontal',
+   *   base?: string,
+   *   classes?: string,
+   *   children?: import('svelte').Snippet,
+   *   contextKey?: import('../../typedef').ContextKey,
+   *   dropPreviewSnippet?: import('svelte').Snippet<[import('../../typedef').DragData]>,
+   *   isDragOver?: boolean,
+   *   canDrop?: boolean,
+   *   onDragEnter?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     canDrop: boolean
+   *   }) => void,
+   *   onDragOver?: (detail: {
+   *     event: DragEvent,
+   *     zone: string
+   *   }) => void,
+   *   onDragLeave?: (detail: {
+   *     event: DragEvent,
+   *     zone: string
+   *   }) => void,
+   *   onDrop?: (detail: import('../../typedef').DropData) => any | Promise<any>,
+   *   onDropStart?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     data: any
+   *   }) => void,
+   *   onDropEnd?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     data: any,
+   *     success: boolean,
+   *     error?: Error
+   *   }) => void,
+   *   [key: string]: any
+   * }}
+   */
+  let {
+    zone = 'default',
+    group = 'default',
+    disabled = false,
+    accepts = () => true,
+    minHeight = 'min-h-[200px]',
+    maxHeight = '',
+    gap = 'gap-2',
+    direction = 'vertical',
+    base = '',
+    classes = '',
+    children,
+    contextKey,
+    dropPreviewSnippet,
+    isDragOver = $bindable(false),
+    canDrop = $bindable(false),
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDropStart,
+    onDropEnd,
+    ...attrs
+  } = $props();
+
+  // Build flex layout classes based on direction
+  let layoutClasses = $derived.by(() => {
+    const layoutParts = ['flex'];
+
+    if (direction === 'vertical') {
+      layoutParts.push('flex-col');
+    } else {
+      layoutParts.push('flex-row', 'flex-wrap');
+    }
+
+    if (gap) {
+      layoutParts.push(gap);
+    }
+
+    return layoutParts.join(' ');
+  });
+
+  // Combine all classes for the drop zone
+  let combinedClasses = $derived(
+    `${layoutClasses} ${classes}`.trim()
+  );
+</script>
+
+<DropZone
+  data-component="drop-zone"
+  data-type="list"
+  {zone}
+  {group}
+  {disabled}
+  {accepts}
+  {minHeight}
+  {maxHeight}
+  heightMode="flexible"
+  {base}
+  classes={combinedClasses}
+  {contextKey}
+  {dropPreviewSnippet}
+  bind:isDragOver
+  bind:canDrop
+  {onDragEnter}
+  {onDragOver}
+  {onDragLeave}
+  {onDrop}
+  {onDropStart}
+  {onDropEnd}
+  {...attrs}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</DropZone>

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

@@ -0,0 +1,92 @@
+export default DropZoneList;
+type DropZoneList = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        zone?: string;
+        group?: string;
+        disabled?: boolean;
+        accepts?: (item: any) => boolean;
+        minHeight?: string;
+        maxHeight?: string;
+        gap?: string;
+        direction?: "vertical" | "horizontal";
+        base?: string;
+        classes?: string;
+        children?: Snippet<[]>;
+        contextKey?: ContextKey;
+        dropPreviewSnippet?: Snippet<[DragData]>;
+        isDragOver?: boolean;
+        canDrop?: boolean;
+        onDragEnter?: (detail: {
+            event: DragEvent;
+            zone: string;
+            canDrop: boolean;
+        }) => void;
+        onDragOver?: (detail: {
+            event: DragEvent;
+            zone: string;
+        }) => void;
+        onDragLeave?: (detail: {
+            event: DragEvent;
+            zone: string;
+        }) => void;
+        onDrop?: (detail: DropData) => any;
+        onDropStart?: (detail: {
+            event: DragEvent;
+            zone: string;
+            data: any;
+        }) => void;
+        onDropEnd?: (detail: {
+            event: DragEvent;
+            zone: string;
+            data: any;
+            success: boolean;
+            error?: Error;
+        }) => void;
+    }>): void;
+};
+declare const DropZoneList: import("svelte").Component<{
+    [key: string]: any;
+    zone?: string;
+    group?: string;
+    disabled?: boolean;
+    accepts?: (item: any) => boolean;
+    minHeight?: string;
+    maxHeight?: string;
+    gap?: string;
+    direction?: "vertical" | "horizontal";
+    base?: string;
+    classes?: string;
+    children?: import("svelte").Snippet;
+    contextKey?: import("../../typedef").ContextKey;
+    dropPreviewSnippet?: import("svelte").Snippet<[import("../../typedef").DragData]>;
+    isDragOver?: boolean;
+    canDrop?: boolean;
+    onDragEnter?: (detail: {
+        event: DragEvent;
+        zone: string;
+        canDrop: boolean;
+    }) => void;
+    onDragOver?: (detail: {
+        event: DragEvent;
+        zone: string;
+    }) => void;
+    onDragLeave?: (detail: {
+        event: DragEvent;
+        zone: string;
+    }) => void;
+    onDrop?: (detail: import("../../typedef").DropData) => any | Promise<any>;
+    onDropStart?: (detail: {
+        event: DragEvent;
+        zone: string;
+        data: any;
+    }) => void;
+    onDropEnd?: (detail: {
+        event: DragEvent;
+        zone: string;
+        data: any;
+        success: boolean;
+        error?: Error;
+    }) => void;
+}, {}, "isDragOver" | "canDrop">;

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

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

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

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

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

@@ -0,0 +1,97 @@
+export const createOrGetDragState: (contextKey?: import("../../typedef").ContextKey) => DragState;
+export const createDragState: (contextKey?: import("../../typedef").ContextKey) => DragState;
+export const getDragState: (contextKey?: import("../../typedef").ContextKey) => DragState;
+export type SimulatedDragEvent = import("../../typedef").SimulatedDragEvent;
+/** @typedef {import('../../typedef').SimulatedDragEvent} SimulatedDragEvent */
+declare class DragState {
+    draggables: Map<any, any>;
+    draggableIdCount: number;
+    dropZones: Map<any, any>;
+    activeDropZone: any;
+    lastActiveDropZone: any;
+    /**
+     * 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: string, config: {
+        zone: string;
+        group: string;
+        accepts: Function;
+        onDragEnter: Function;
+        onDragOver: Function;
+        onDragLeave: Function;
+        onDrop: (DropData: any) => void;
+        element: HTMLElement;
+    }): void;
+    /**
+     * Unregister a dropzone
+     * @param {string} zoneId
+     */
+    unregisterDropZone(zoneId: string): void;
+    /**
+     * Get dropzone at coordinates
+     * @param {number} x
+     * @param {number} y
+     * @returns {Object|null}
+     */
+    getDropZoneAtPoint(x: number, y: number): any | null;
+    /**
+     * Update active dropzone based on coordinates
+     *
+     * @param {number} x
+     * @param {number} y
+     * @param {DragEvent|SimulatedDragEvent} event
+     */
+    updateActiveDropZone(x: number, y: number, event: DragEvent | SimulatedDragEvent): void;
+    /**
+     * Handle drop at coordinates
+     * @param {number} x
+     * @param {number} y
+     * @param {DragEvent|SimulatedDragEvent} event
+     */
+    handleDropAtPoint(x: number, y: number, event: DragEvent | SimulatedDragEvent): void;
+    /**
+     * @param {string} draggableId
+     * @param {import('../../typedef/drag.js').DragData} dragData
+     */
+    start(draggableId: string, dragData: import("../../typedef/drag.js").DragData): void;
+    /**
+     * @param {string} draggableId
+     */
+    end(draggableId: string): void;
+    newDraggableId(): string;
+    /**
+     * Get a drag data by draggable id
+     *
+     * @param {string} draggableId
+     * @returns {import('../../typedef/drag.js').DragData|undefined}
+     */
+    getDraggableById(draggableId: string): import("../../typedef/drag.js").DragData | undefined;
+    /**
+     * 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 or not found
+     */
+    getDraggable(event: DragEvent | SimulatedDragEvent): any | null;
+    /**
+     * Get the most recently started drag operation (convenience method)
+     * @returns {import('../../typedef/drag.js').DragData|undefined}
+     */
+    get current(): import("../../typedef/drag.js").DragData | undefined;
+    /**
+     * @returns {boolean}
+     */
+    isDragging(): boolean;
+}
+export {};

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

@@ -0,0 +1,322 @@
+// drag-state.svelte.js
+import { defineStateContext } from '../../util/svelte/state-context/index.js';
+
+/** @typedef {import('../../typedef').SimulatedDragEvent} SimulatedDragEvent */
+
+class DragState {
+  // Existing draggables map
+  draggables = $state(new Map());
+
+  // Draggable id counter
+  draggableIdCount = 1;
+
+  // 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);
+
+      console.debug('handleDropAtPoint', event, dragData);
+
+
+      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
+   */
+  start(draggableId, dragData) {
+    // console.debug('DragState.start called:', draggableId, dragData);
+    this.draggables.set(draggableId, dragData);
+  }
+
+  /**
+   * @param {string} draggableId
+   */
+  end(draggableId) {
+    // console.debug('DragState.end called:', 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;
+  }
+
+  newDraggableId() {
+    return `${this.draggableIdCount++}`;
+  }
+
+  /**
+   * Get a drag data by draggable id
+   *
+   * @param {string} draggableId
+   * @returns {import('../../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 or not found
+   */
+  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
+      }
+    }
+
+    if (event.dataTransfer?.types) {
+      const types = Array.from(event.dataTransfer.types);
+
+      const PREFIX = 'application/x-draggable-';
+
+      const dragType = types.find((t) => t.startsWith(PREFIX));
+
+      if (dragType) {
+        const draggableId = dragType.slice(PREFIX.length);
+
+        const entry = this.getDraggableById(draggableId);
+
+        console.debug('getDraggable', draggableId, entry);
+
+        return entry;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Get the most recently started drag operation (convenience method)
+   * @returns {import('../../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.d.ts

@@ -0,0 +1,6 @@
+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/index.js

@@ -0,0 +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';