@alekstar79/draggable-resizable-container 1.0.0

package/dist/plugins/EdgeDockingPlugin.d.ts

@@ -0,0 +1,112 @@
+import { Plugin, ContainerManagerInterface } from '../core/types';
+
+export type Edge = 'top' | 'bottom' | 'left' | 'right';
+export interface DockedContainer {
+    element: HTMLElement;
+    originalPosition: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        transform: string;
+        position: string;
+    };
+    edge: Edge;
+    screenPosition: {
+        x: number;
+        y: number;
+    };
+}
+export interface EdgeDockingConfig {
+    edgeThreshold?: number;
+    visiblePeek?: number;
+    animationDuration?: number;
+    enabled?: boolean;
+}
+export declare class EdgeDockingPlugin implements Plugin {
+    private static _pluginId;
+    get pluginId(): Symbol;
+    private dockedContainers;
+    private occupiedEdges;
+    private tracker;
+    private manager;
+    private readonly edgeThreshold;
+    constructor(config?: EdgeDockingConfig);
+    install(manager: ContainerManagerInterface): void;
+    /**
+     * Handle edge enter for visual feedback
+     */
+    private handleEdgeEnter;
+    /**
+     * Handle edge leave - remove visual feedback
+     */
+    private handleEdgeLeave;
+    /**
+     * Check if an edge is occupied by another container
+     */
+    private isEdgeOccupied;
+    /**
+     * Attach event handlers to container manager
+     */
+    private attachEventHandlers;
+    /**
+     * Handle mouse enter - show docked container
+     */
+    private onMouseEnter;
+    /**
+     * Handle mouse leave - hide docked container
+     */
+    private onMouseLeave;
+    /**
+     * Handle drag start - undock if docked
+     */
+    private onDragStart;
+    /**
+     * Handle drag - update edge hints based on position
+     */
+    private onDrag;
+    /**
+     * Handle drag end - dock if close to edge
+     */
+    private onDragEnd;
+    /**
+     * Update visual hints for edge docking
+     */
+    private updateEdgeHints;
+    /**
+     * Get the closest edge to the container
+     */
+    private getClosestEdge;
+    /**
+     * Dock container to specified edge
+     */
+    private dockContainer;
+    /**
+     * Apply proper positioning for each edge to prevent shifting
+     */
+    private applyEdgePositioning;
+    /**
+     * Undock container from edge
+     */
+    private undockContainer;
+    /**
+     * Restore container to its original position without shifting
+     */
+    private restoreOriginalPosition;
+    /**
+     * Get the docked container for a specific edge
+     */
+    getDockedContainer(edge: Edge): DockedContainer | null;
+    /**
+     * Check if container is docked
+     */
+    isContainerDocked(element: HTMLElement): boolean;
+    /**
+     * Get the edge where container is docked
+     */
+    getContainerDockEdge(element: HTMLElement): Edge | null;
+    /**
+     * Clean up resources
+     */
+    destroy(): void;
+}

package/dist/plugins/LoggingPlugin.d.ts

@@ -0,0 +1,53 @@
+import { ContainerManagerInterface, Plugin } from '../core/types';
+
+/**
+ * Logging plugin for Container Manager
+ * Logs container events and displays notifications
+ */
+export declare class LoggingPlugin implements Plugin {
+    private static _pluginId;
+    get pluginId(): Symbol;
+    private manager?;
+    private containerName;
+    private notificationSystem;
+    /**
+     * Install plugin on container manager instance
+     */
+    install(manager: ContainerManagerInterface, options?: any): void;
+    /**
+     * Bind to container events
+     */
+    private bindEvents;
+    /**
+     * Log resize event
+     */
+    private logResize;
+    /**
+     * Log drag event
+     */
+    private logDrag;
+    /**
+     * Log mode change event
+     */
+    private logModeChange;
+    /**
+     * Log viewport resize adjustment event
+     */
+    private logViewportResize;
+    /**
+     * Log snapping enabled/disabled
+     */
+    private logSnappingEnabled;
+    /**
+     * Log snap step change
+     */
+    private logSnapStep;
+    /**
+     * Log direction change
+     */
+    private logDirectionChange;
+    /**
+     * Show notification using notification system
+     */
+    private showNotification;
+}

package/dist/plugins/SnappingPlugin.d.ts

@@ -0,0 +1,70 @@
+import { ContainerManagerInterface, Plugin } from '../core/types';
+
+/**
+ * Configuration options for SnappingPlugin
+ */
+export interface SnappingPluginOptions {
+    snapStep?: number;
+    enabled?: boolean;
+}
+/**
+ * Extended container manager interface with plugin methods
+ */
+export interface SnappingContainerManager extends ContainerManagerInterface {
+    setSnapStep?(step: number): void;
+    setSnappingEnabled?(enabled: boolean): void;
+    getSnappingConfig?(): SnappingPluginOptions;
+}
+/**
+ * Snapping plugin for Container Manager
+ */
+export declare class SnappingPlugin implements Plugin {
+    private static _pluginId;
+    get pluginId(): Symbol;
+    private reactiveState;
+    private manager;
+    private startState;
+    private startX;
+    private startY;
+    constructor(options?: SnappingPluginOptions);
+    /**
+     * Install plugin on container manager instance with reactive state
+     */
+    install(manager: ContainerManagerInterface, options?: SnappingPluginOptions): void;
+    /**
+     * Override drag handling methods to add snapping functionality
+     */
+    private overrideDragMethods;
+    /**
+     * Handle drag start event with snapping support
+     */
+    private onDragStart;
+    /**
+     * Handle drag movement with reactive snapping
+     */
+    private onDragMove;
+    /**
+     * Handle drag end event
+     */
+    private onDragEnd;
+    /**
+     * Apply snapping to drag movement based on current mode
+     */
+    private applySnapping;
+    /**
+     * Snap value to grid using reactive step
+     */
+    private snapToGrid;
+    /**
+     * Constrain container to viewport boundaries
+     */
+    private constrainToViewport;
+    /**
+     * Add plugin methods to container manager
+     */
+    private addPluginMethods;
+    /**
+     * Clean up plugin resources
+     */
+    destroy(): void;
+}

package/dist/plugins/StatePersistencePlugin.d.ts

@@ -0,0 +1,159 @@
+import { ContainerManagerInterface, Plugin, DirectionMode, MovementMode, ResizeConfig } from '../core/types';
+
+/**
+ * Saved state for a container
+ */
+export interface SavedContainerState {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    mode: MovementMode;
+    draggingDirection: DirectionMode;
+    isMaximized: boolean;
+    containerType: string;
+    title?: string;
+    color?: string;
+    useSnapping?: boolean;
+    isClosed?: boolean;
+    parentElementId?: string;
+    closedTimestamp?: number;
+    resize?: ResizeConfig;
+    isDemoContainer?: boolean;
+    [p: string]: any;
+}
+/**
+ * State persistence plugin for Container Manager
+ */
+export declare class StatePersistencePlugin implements Plugin {
+    private static _pluginId;
+    get pluginId(): Symbol;
+    private static readonly STORAGE_KEY;
+    private static readonly CLOSED_QUEUE_KEY;
+    private static readonly DEMO_CONTAINERS_KEY;
+    private static reactiveState;
+    private static get containerStates();
+    private static get closedQueue();
+    private static get demoContainers();
+    private static isGlobalEventsInitialized;
+    private manager?;
+    private containerId?;
+    private isDemoContainer;
+    private autoSaveEffect?;
+    static containers: {
+        manager: ContainerManagerInterface;
+        containerId: string;
+        isDemo?: boolean;
+    }[];
+    /**
+     * Install plugin on container manager instance with reactive state management
+     */
+    install(manager: ContainerManagerInterface, options?: {
+        containerId: string;
+        isDemo?: boolean;
+    }): void;
+    /**
+     * Set up reactive auto-save effect for container state changes
+     */
+    private setupAutoSaveEffect;
+    /**
+     * Bind to container-specific events to save state on changes
+     * Simplified since most saving handled using effects
+     */
+    private bindContainerEvents;
+    /**
+     * Initialize global event handlers for all containers
+     */
+    private static initializeGlobalEvents;
+    /**
+     * Register a container as a demo container
+     */
+    static registerDemoContainer(containerId: string): void;
+    /**
+     * Save demo containers to localStorage
+     */
+    private static saveDemoContainersToStorage;
+    /**
+     * Get list of all demo containers
+     */
+    private static getDemoContainers;
+    /**
+     * Check if a container is a demo container
+     */
+    static isDemoContainer(containerId: string): boolean;
+    /**
+     * Get all saved states from localStorage
+     */
+    private static getAllStates;
+    /**
+     * Add container ID to closed containers queue
+     */
+    static addToClosedQueue(containerId: string): void;
+    /**
+     * Save closed queue to localStorage
+     */
+    private static saveClosedQueueToStorage;
+    /**
+     * Get closed containers queue (LIFO - last in first out)
+     */
+    static getClosedQueue(): string[];
+    private saveState;
+    /**
+     * Save container state with current manager state before closing
+     */
+    static saveContainerStateBeforeClose(manager: ContainerManagerInterface, containerId: string): void;
+    /**
+     * Save all containers state (for global events) - including closed ones
+     */
+    static saveAllContainers(): void;
+    /**
+     * Remove the most recently closed container from queue and return its ID
+     */
+    static popLastClosedContainer(): string | null;
+    /**
+     * Check if there are any closed containers that can be restored
+     */
+    static hasClosedContainers(): boolean;
+    /**
+     * Get saved state for specific container (including closed ones)
+     */
+    static getContainerState(containerId: string): SavedContainerState | null;
+    /**
+     * Get all container states including closed ones
+     */
+    static getAllContainerStates(): Record<string, SavedContainerState>;
+    /**
+     * Check if container state exists (including closed)
+     */
+    static hasContainerState(containerId: string): boolean;
+    /**
+     * Update container state in storage
+     */
+    static updateContainerState(containerId: string, updates: Partial<SavedContainerState>): void;
+    /**
+     * Clear all saved states from localStorage
+     */
+    static clearStorage(): void;
+    /**
+     * Initialize reactive state from localStorage on plugin load
+     */
+    static initializeReactiveState(): void;
+    /**
+     * Get plugin metrics and statistics
+     */
+    static getMetrics(): {
+        totalContainers: number;
+        demoContainers: number;
+        closedContainers: number;
+        lastSaved: number | null;
+        isSaving: boolean;
+    };
+    /**
+     * Debug method to check the current state of localStorage
+     */
+    static debugStorage(): void;
+    /**
+     * Clean up plugin resources
+     */
+    destroy(): void;
+}

package/dist/plugins/index.d.ts

@@ -0,0 +1,7 @@
+export { SnappingPlugin } from './SnappingPlugin';
+export { EdgeDockingPlugin } from './EdgeDockingPlugin';
+export { StatePersistencePlugin } from './StatePersistencePlugin';
+export { LoggingPlugin } from './LoggingPlugin';
+export type { EdgeDockingConfig, Edge } from './EdgeDockingPlugin';
+export type { SavedContainerState } from './StatePersistencePlugin';
+export type { SnappingPluginOptions } from './SnappingPlugin';

package/dist/utils/BoundaryTracker.d.ts

@@ -0,0 +1,155 @@
+/**
+ * BoundaryTracker.ts
+ * Tracks the approach of the dragged element to the edges of the viewport
+ * The element remains inside the viewport, and the detection zones are also inside
+ */
+export type Event = 'edge:enter' | 'edge:leave' | 'cursor:enter' | 'cursor:leave';
+export type Edge = 'top' | 'right' | 'bottom' | 'left';
+export interface Options {
+    emitter?: EventEmitter | boolean;
+    edgeThreshold?: number;
+}
+export interface EdgeZoneInfo {
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    left: boolean;
+    edge: Edge | null;
+}
+export interface SourceEdgeInfo extends EdgeZoneInfo {
+    source: 'element' | 'cursor';
+    element: HTMLElement | null;
+}
+export interface IBoundaryTracker {
+    start(): void;
+    stop(): void;
+    addTarget(element: HTMLElement): void;
+    removeTarget(element: HTMLElement): void;
+    onChange(callback: EdgeChangeCallback): () => void;
+    getCursorEdgeInfo(): EdgeZoneInfo;
+    setEdgeThreshold(threshold: number): void;
+    destroy(): void;
+}
+export interface IEdgeController extends IBoundaryTracker {
+    getCurrentEdge(): Partial<SourceEdgeInfo>;
+    on(event: Event, callback: EdgeChangeCallback): void;
+    onCursorEnter(data: SourceEdgeInfo): void;
+    onCursorLeave(data: SourceEdgeInfo): void;
+    onEdgeEnter(data: SourceEdgeInfo): void;
+    onEdgeLeave(data: SourceEdgeInfo): void;
+    setEmitter(emitter: EventEmitter): void;
+}
+export type EdgeChangeCallback = (data: Partial<SourceEdgeInfo>) => void;
+export type EventCallback<T = any> = (data?: T) => void;
+export type EventMap = Record<string, any>;
+export declare class EdgeInfo implements SourceEdgeInfo {
+    source: 'element' | 'cursor';
+    element: HTMLElement | null;
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    left: boolean;
+    edge: Edge | null;
+    constructor(info: SourceEdgeInfo);
+}
+export declare class EventEmitter<T extends EventMap = any> {
+    private listeners;
+    on<K extends keyof T>(event: K, callback: EventCallback<T[K]>): () => void;
+    emit<K extends keyof T>(event: K, data?: T[K]): void;
+    off?<K extends keyof T>(event: K, callback: EventCallback<T[K]>): void;
+    destroy?(): void;
+}
+/**
+ * The main class for tracking borders
+ * Uses requestAnimationFrame for accurate tracking during drag
+ */
+export declare class InternalBoundaryTracker implements IBoundaryTracker {
+    private readonly root;
+    private edgeThreshold;
+    private targets;
+    private currentEdges;
+    private rafId;
+    private isActive;
+    private callbacks;
+    private currentMousePos;
+    private currentCursorEdge;
+    constructor(edgeThreshold?: number, targets?: HTMLElement[] | Set<HTMLElement>, root?: HTMLElement | null);
+    /**
+     * Start tracking the approach to the edges
+     */
+    start(): void;
+    /**
+     * Stop tracking
+     */
+    stop(): void;
+    addTarget(element: HTMLElement): void;
+    removeTarget(element: HTMLElement): void;
+    /**
+     * Subscribe to boundary changes
+     */
+    onChange(callback: EdgeChangeCallback): () => void;
+    /**
+     * Get current information about cursor boundaries
+     */
+    getCursorEdgeInfo(): EdgeZoneInfo;
+    /**
+     * Update threshold (distance to edge)
+     */
+    setEdgeThreshold(threshold: number): void;
+    /**
+     * Set up Mouse Tracking
+     */
+    private setupMouseTracking;
+    private getViewportSize;
+    private getRelativeRect;
+    private getCursorPosition;
+    /**
+     * Check the proximity to the borders (element and cursor)
+     */
+    private checkBoundaries;
+    /**
+     * Emulating Bounding Rect for cursor
+     */
+    private getCursorBoundingClientRect;
+    /**
+     * Check the boundaries of an element
+     */
+    private checkElementBoundaries;
+    /**
+     * Check the boundaries of a cursor
+     */
+    private checkCursorBoundaries;
+    /**
+     * Check if the state has changed
+     */
+    private hasEdgeChanged;
+    /**
+     * Determine a priority edge-side (or several)
+     */
+    private determineEdge;
+    /**
+     * Notify all subscribers of the change
+     */
+    private notifyCallbacks;
+    /**
+     * Clear resources
+     */
+    destroy(): void;
+}
+export declare class EdgeController extends InternalBoundaryTracker implements IEdgeController {
+    private static instance;
+    static init(edgeThreshold?: number, elements?: HTMLElement[]): IEdgeController;
+    private lastEdge;
+    emitter: EventEmitter | null;
+    constructor(edgeThreshold?: number, elements?: HTMLElement[]);
+    private changed;
+    private onBoundaryChange;
+    onEdgeEnter(data: Partial<SourceEdgeInfo>): void;
+    onEdgeLeave(data: Partial<SourceEdgeInfo>): void;
+    onCursorEnter(data: Partial<SourceEdgeInfo>): void;
+    onCursorLeave(data: Partial<SourceEdgeInfo>): void;
+    setEmitter(emitter: EventEmitter): void;
+    on(event: Event, callback: EdgeChangeCallback): void;
+    getCurrentEdge(): Partial<SourceEdgeInfo>;
+}
+export declare function createTracker(options?: Options, elements?: HTMLElement[]): IEdgeController;

package/dist/utils/ContainerInitializer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Utility for proper container initialization and state synchronization
+ */
+export declare class ContainerInitializer {
+    /**
+     * Create container element with proper initialization
+     */
+    static createContainerElement(width: number, height: number, x?: number, y?: number, color?: string): HTMLElement;
+}

package/dist/utils/ContentCreator.d.ts

@@ -0,0 +1,22 @@
+import { TemplateLoader } from './index';
+
+/**
+ * Content creator utility for flexible content handling
+ * Supports strings, DOM elements, and template loading
+ */
+export declare class ContentCreator {
+    private templateLoader;
+    constructor(templateLoader: TemplateLoader);
+    /**
+     * Create content from various sources
+     * @param content - String, HTMLElement, or template name
+     * @param container - Container element to append content to
+     */
+    createContent(content: string | HTMLElement | {
+        template: string;
+    }, container: HTMLElement): Promise<HTMLElement>;
+    /**
+     * Set template loader instance
+     */
+    setTemplateLoader(loader: TemplateLoader): void;
+}

package/dist/utils/Notifications.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Notification system for displaying toast messages
+ * Adapted for TypeScript with improved functionality
+ */
+export declare class NotificationSystem {
+    private container;
+    constructor(container?: HTMLElement);
+    /**
+     * Create notifications container
+     */
+    private createContainer;
+    /**
+     * Show notification toast
+     */
+    show(text: string, type?: 'success' | 'error' | 'warning' | 'info'): void;
+    /**
+     * Generate toast HTML based on type
+     */
+    private getToastHTML;
+    /**
+     * Remove toast with animation
+     */
+    private removeToast;
+    /**
+     * Clear all notifications
+     */
+    clear(): void;
+}
+export declare const defaultNotificationSystem: NotificationSystem;

package/dist/utils/StatsManager.d.ts

@@ -0,0 +1,51 @@
+import { DirectionMode } from '../core/types';
+
+/**
+ * Interface for container statistics
+ */
+export interface ContainerStats {
+    activeBlock: string;
+    lock: 'opened' | 'locked';
+    direction: DirectionMode;
+    step?: number;
+    hasSnapping: boolean;
+}
+/**
+ * Interface for global statistics
+ */
+export interface GlobalStats {
+    containerCount: number;
+    contentTypes: string;
+    pinnedMode: string;
+    snappingCount: number;
+}
+/**
+ * Statistics manager for handling both global and per-container stats
+ */
+export declare class StatsManager {
+    private globalStatsElement;
+    /**
+     * Initialize stats manager
+     */
+    initialize(globalStatsElement: HTMLElement): void;
+    /**
+     * Show container-specific statistics
+     */
+    showContainerStats(containerStats: ContainerStats): void;
+    /**
+     * Show global statistics
+     */
+    showGlobalStats(globalStats: GlobalStats): void;
+    /**
+     * Generate HTML for container statistics
+     */
+    private generateContainerStatsHTML;
+    /**
+     * Generate HTML for global statistics
+     */
+    private generateGlobalStatsHTML;
+    /**
+     * Update stats panel with new HTML content
+     */
+    private updateStatsPanel;
+}

package/dist/utils/TemplateLoader.d.ts

@@ -0,0 +1,24 @@
+import { LoaderConfig, LoaderMetrics, TemplateConfig, TemplateSource, TemplateCache, TemplateLoader, TemplateRegistry } from '@alekstar79/template-loader';
+
+/**
+ * Create a fully functional loader for the demo
+ */
+export declare function createDemoLoader(fallbackTemplates?: {
+    name: string;
+    source: string;
+}[]): Promise<TemplateLoader>;
+/**
+ * Create a loader for the library
+ */
+export declare function createLibraryLoader(): TemplateLoader & {
+    registry: TemplateRegistry;
+};
+/**
+ * System initialization (called in main.ts or app initialization)
+ */
+export declare function initializeTemplateSystem(): Promise<TemplateLoader>;
+/**
+ * Get a global instance
+ */
+export declare function getTemplateLoader(): TemplateLoader;
+export { LoaderConfig, LoaderMetrics, TemplateConfig, TemplateSource, TemplateCache, TemplateLoader, TemplateRegistry };