@alekstar79/draggable-resizable-container 1.0.0

package/dist/core/ContainerManager.d.ts

@@ -0,0 +1,298 @@
+import { default as ReactiveEventSystem } from '@alekstar79/reactive-event-system';
+import { StateInterface } from '../utils';
+import { AutoAdjustConfig, Boundaries, ContainerManagerInterface, Plugin, ContainerConfig, ContainerEvent, ContainerState, DirectionMode, MovementMode, PluginMiddleware, ResizeConfig, ResizeDirection } from './types';
+
+/**
+ * Main container management class for drag and resize operations
+ * Implements ContainerManagerInterface for plugin compatibility
+ * Now with reactive state management using @alekstar79/reactivity
+ */
+export declare class ContainerManager implements ContainerManagerInterface {
+    private static MINWIDTH;
+    private static MINHEIGHT;
+    private dragStream;
+    private resizeStream;
+    private readonly stateChangeStream;
+    private readonly eventEmitter;
+    private readonly pluginEventEmitter;
+    private readonly config;
+    private readonly container;
+    private dragHandle;
+    private resizeHandles;
+    private installedPlugins;
+    private reactiveEffects;
+    private isDragging;
+    private isResizing;
+    private resizeDirection;
+    private startX;
+    private startY;
+    private startState;
+    private resizeObserver;
+    private parentResizeObserver;
+    zIndexState: StateInterface;
+    private reactiveState;
+    private constrainedState;
+    private domUpdateEffect;
+    /**
+     * Create a new container manager instance with reactive state management
+     * @param container - HTML element to manage
+     * @param config - Configuration options
+     */
+    constructor(container: HTMLElement, config?: Partial<ContainerConfig>);
+    /**
+     * Set up ResizeObserver to track viewport and parent size changes
+     */
+    private setupResizeObservers;
+    /**
+     * Determine if viewport constraints should be applied
+     */
+    private shouldConstrainToViewport;
+    /**
+     * Set up ResizeObserver to track viewport size changes
+     */
+    private setupViewportResizeObserver;
+    /**
+     * Handle viewport resize event with reactive state updates
+     */
+    private handleViewportResize;
+    /**
+     * Set up ResizeObserver for parent element auto-adjustment
+     */
+    private setupParentResizeObserver;
+    /**
+     * Handle parent element resize for auto-adjustment with reactive updates
+     */
+    private handleParentResize;
+    /**
+     * Initialize drag and resize handles based on configuration
+     */
+    private initializeHandles;
+    /**
+     * Initialize drag handle
+     */
+    private initializeDragHandle;
+    /**
+     * Initialize resize handles for all configured directions
+     */
+    private initializeResizeHandles;
+    /**
+     * Create individual resize handle for specific direction
+     */
+    private createResizeHandle;
+    /**
+     * Apply styles and cursor for resize handle based on direction
+     */
+    private applyResizeHandleStyles;
+    /**
+     * Position resize handle based on direction
+     */
+    private positionResizeHandle;
+    /**
+     * Bind event listeners to handles
+     */
+    private bindEvents;
+    /**
+     * Apply movement mode to coordinates
+     */
+    private applyMovementMode;
+    /**
+     * Calculate new state based on resize direction and deltas
+     */
+    private calculateResizeState;
+    /**
+     * Constrain container to parent element boundaries (both position and size)
+     */
+    private constrainToParent;
+    /**
+     * Get maximum width constraint considering parent and boundaries
+     */
+    private getMaxWidthConstraint;
+    /**
+     * Get maximum height constraint considering parent and boundaries
+     */
+    private getMaxHeightConstraint;
+    /**
+     * Handle context menu event on drag handle
+     */
+    private onContextMenu;
+    /**
+     * Check if snapping plugin is installed
+     */
+    private hasPluginByName;
+    /**
+     * Get current container state from DOM
+     */
+    private getCurrentState;
+    /**
+     * Setup event middleware for enhanced event processing
+     */
+    private setupEventMiddleware;
+    /**
+     * Setup reactive monitoring for container metrics
+     */
+    private setupReactiveMonitoring;
+    /**
+     * Subscribe to container events
+     * @param event - Event name
+     * @param callback - Callback function
+     */
+    on(event: string, callback: (data: ContainerEvent) => void): void;
+    /**
+     * Unsubscribe from container events
+     * @param event - Event name
+     * @param callback - Callback function
+     */
+    off(event: string, callback: (data: ContainerEvent) => void): void;
+    /**
+     * Wait for specific container event
+     * @example
+     * // Wait for drag to complete
+     * const dragResult = await manager.waitFor('dragEnd')
+     * console.log('Drag completed:', dragResult.state)
+     */
+    waitFor(event: string, timeout?: number): Promise<ContainerEvent>;
+    /**
+     * Get reactive stream for specific event type
+     * @example
+     * // Get state change stream
+     * const stateStream = manager.getStream('stateChange')
+     * stateStream.subscribe((data) => {
+     *   console.log('State changed:', data.state)
+     * })
+     */
+    getStream(event: string): ReturnType<ReactiveEventSystem<ContainerEvent>['stream']>;
+    /**
+     * Pipe container events to another emitter
+     * @example
+     * // Pipe all events to analytics emitter
+     * manager.pipe('*', analyticsEmitter)
+     */
+    pipe(event: string, targetEmitter: ReactiveEventSystem<ContainerEvent>, targetEvent?: string): () => void;
+    /**
+     * Get event system metrics for monitoring
+     */
+    getEventMetrics(): ReturnType<ReactiveEventSystem<ContainerEvent>['getMetrics']>;
+    /**
+     * Plugin-specific event emission
+     */
+    emitPluginEvent(event: string, data: any): void;
+    /**
+     * Listen to plugin-specific events
+     */
+    onPluginEvent(event: string, listener: (data: any) => void): void;
+    /**
+     * Remove plugin event listener
+     */
+    offPluginEvent(event: string, listener: (data: any) => void): void;
+    /**
+     * Add middleware for plugin events
+     */
+    usePluginMiddleware(event: string, middleware: PluginMiddleware): () => void;
+    /**
+     * Handle drag start event
+     */
+    onDragStart(e: MouseEvent | TouchEvent): void;
+    /**
+     * Handle drag movement with reactive state updates
+     */
+    onDragMove(e: MouseEvent | TouchEvent): void;
+    /**
+     * Handle drag end event
+     */
+    onDragEnd(): void;
+    /**
+     * Handle resize start event with direction
+     */
+    onResizeStart(e: MouseEvent | TouchEvent, direction: ResizeDirection): void;
+    /**
+     * Handle resize movement with multi-direction support and reactive updates
+     */
+    onResizeMove(e: MouseEvent | TouchEvent): void;
+    /**
+     * Handle resize end event
+     */
+    onResizeEnd(): void;
+    /**
+     * Set movement direction
+     */
+    setDirection(direction: DirectionMode): void;
+    /**
+     * Get current movement direction
+     */
+    getDirection(): DirectionMode;
+    /**
+     * Resolve coordinates based on current direction mode
+     */
+    directionResolver(x: number, y: number): {
+        clientX: number;
+        clientY: number;
+    };
+    /**
+     * Get current movement mode
+     */
+    getMode(): MovementMode;
+    /**
+     * Set movement mode with reactive update
+     */
+    setMode(mode: MovementMode): void;
+    /**
+     * Update container boundaries
+     */
+    setBoundaries(boundaries: Partial<Boundaries>): void;
+    /**
+     * Get current container state (reactive)
+     */
+    getState(): ContainerState;
+    /**
+     * Update container position and size with reactive state
+     */
+    setState(state: Partial<ContainerState>): void;
+    /**
+     * Apply current state to DOM immediately for synchronization
+     */
+    private applyStateToDOM;
+    /**
+     * Bring container to front programmatically
+     */
+    bringToFront(): void;
+    /**
+     * Get container DOM element
+     */
+    getContainer(): HTMLElement;
+    /**
+     * Update auto-adjust configuration
+     */
+    setAutoAdjust(config: AutoAdjustConfig): void;
+    /**
+     * Update resize configuration
+     */
+    setResizeConfig(config: ResizeConfig): void;
+    /**
+     * Set constrain to parent configuration
+     */
+    setConstrainToParent(enabled: boolean): void;
+    /**
+     * Set constrain to viewport configuration
+     */
+    setConstrainToViewport(enabled: boolean): void;
+    /**
+     * Recalculate container state relative to parent element
+     */
+    recalculateForParent(): void;
+    /**
+     * Install plugin on this container manager instance
+     */
+    use(plugin: Plugin, options?: any): ContainerManagerInterface;
+    /**
+     * Check if plugin is installed on this instance
+     */
+    hasPlugin(plugin: Plugin): boolean;
+    /**
+     * Get all installed plugins on this instance
+     */
+    getInstalledPlugins(): Plugin[];
+    /**
+     * Destroy container manager with proper cleanup
+     */
+    destroy(): void;
+}

package/dist/core/types.d.ts

@@ -0,0 +1,130 @@
+import { default as ReactiveEventSystem } from '@alekstar79/reactive-event-system';
+
+/**
+ * Container movement modes
+ */
+export type MovementMode = 'smooth' | 'pinned';
+/**
+ * Container movement directions
+ */
+export type DirectionMode = 'all' | 'horizontal' | 'vertical';
+/**
+ * Resize direction types
+ */
+export type ResizeDirection = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+/**
+ * Auto-adjustment configuration for parent element
+ */
+export interface AutoAdjustConfig {
+    enabled?: boolean;
+    width?: boolean;
+    height?: boolean;
+}
+/**
+ * Container boundaries configuration
+ */
+export interface Boundaries {
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+}
+/**
+ * Resize configuration
+ */
+export interface ResizeConfig {
+    enabled?: boolean;
+    directions?: ResizeDirection[];
+}
+/**
+ * Configuration options for container manager
+ */
+export interface ContainerConfig {
+    _uid: string;
+    mode: MovementMode;
+    boundaries: Boundaries;
+    draggingDirection: DirectionMode;
+    constrainToViewport: boolean;
+    constrainToParent?: boolean;
+    autoAdjust?: AutoAdjustConfig;
+    resize?: ResizeConfig;
+}
+/**
+ * Container position and dimensions
+ */
+export interface ContainerState {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * Event payload for container changes
+ */
+export interface ContainerEvent {
+    type: 'drag' | 'resize' | 'modeChange' | 'viewportResize' | 'autoAdjust' | 'parentRecalculated' | 'stateChange';
+    state: ContainerState;
+    mode: MovementMode;
+    direction?: ResizeDirection;
+    element: HTMLElement;
+}
+export interface PluginMiddleware {
+    (data: any, event: string): any;
+}
+/**
+ * Base plugin interface that all plugins must implement
+ */
+export interface Plugin {
+    pluginId: Symbol;
+    /**
+     * Install plugin on container manager instance
+     * @param instance - ContainerManager instance implementing ContainerManagerInterface
+     * @param options - Plugin configuration options
+     */
+    install(instance: ContainerManagerInterface, options?: any): void;
+    destroy?(): void;
+}
+/**
+ * Container Manager class interface for plugins
+ */
+export interface ContainerManagerInterface {
+    getMode(): MovementMode;
+    setMode(mode: MovementMode): void;
+    getState(): ContainerState;
+    setState(state: Partial<ContainerState>): void;
+    getDirection(): DirectionMode;
+    setDirection(direction: DirectionMode): void;
+    setAutoAdjust(config: AutoAdjustConfig): void;
+    setResizeConfig(config: ResizeConfig): void;
+    setConstrainToParent(enabled: boolean): void;
+    setConstrainToViewport(enabled: boolean): void;
+    directionResolver(x: number, y: number): {
+        clientX: number;
+        clientY: number;
+    };
+    recalculateForParent(): void;
+    setBoundaries(boundaries: Partial<Boundaries>): void;
+    getContainer(): HTMLElement;
+    bringToFront?(): void;
+    destroy?(): void;
+    on(event: string, callback: (data: ContainerEvent) => void): void;
+    off(event: string, callback: (data: ContainerEvent) => void): void;
+    waitFor(event: string, timeout?: number): Promise<ContainerEvent>;
+    getStream(event: string): ReturnType<ReactiveEventSystem<ContainerEvent>['stream']>;
+    pipe(event: string, targetEmitter: ReactiveEventSystem<ContainerEvent>, targetEvent?: string): () => void;
+    getEventMetrics(): ReturnType<ReactiveEventSystem<ContainerEvent>['getMetrics']>;
+    onDragStart(e: MouseEvent | TouchEvent): void;
+    onDragMove(e: MouseEvent | TouchEvent): void;
+    onDragEnd(): void;
+    onResizeStart(e: MouseEvent | TouchEvent, direction: ResizeDirection): void;
+    onResizeMove(e: MouseEvent | TouchEvent): void;
+    onResizeEnd(): void;
+    emitPluginEvent(event: string, data: any): void;
+    onPluginEvent(event: string, listener: Function): void;
+    offPluginEvent(event: string, listener: Function): void;
+    usePluginMiddleware(event: string, middleware: PluginMiddleware): () => void;
+    use(plugin: Plugin, options?: any): ContainerManagerInterface;
+    hasPlugin(plugin: Plugin): boolean;
+    getInstalledPlugins(): Plugin[];
+    [p: string]: any;
+}

package/dist/index.css

@@ -0,0 +1 @@
+.container{position:absolute;background:#fff;border:2px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px #0000001a;overflow:hidden;resize:none}.drag-handle{position:absolute;top:0;left:0;right:0;height:24px;background:#f7fafc;border-bottom:1px solid #e2e8f0;cursor:move;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.container-title{font-weight:600;font-size:.9rem;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.container-content{position:absolute;top:40px;left:0;right:0;bottom:0;padding:16px;overflow:auto;box-sizing:border-box}.container[data-mode=pinned]{border-color:#e53e3e}.container[data-mode=snap]{border-color:#38a169}.container[data-mode=smooth]{border-color:#3182ce}.resize-n,.resize-s{height:12px;cursor:ns-resize;left:0;right:0}.resize-e,.resize-w{width:12px;cursor:ew-resize;top:0;bottom:0}.resize-ne,.resize-nw,.resize-se,.resize-sw{width:16px;height:16px;background:transparent;border-radius:2px}.resize-n{top:0}.resize-s{bottom:0}.resize-e{right:0}.resize-w{left:0}.resize-ne{top:0;right:0;cursor:nesw-resize}.resize-nw{top:0;left:0;cursor:nwse-resize}.resize-se{bottom:0;right:0;cursor:nwse-resize}.resize-sw{bottom:0;left:0;cursor:nesw-resize}.resize-handle:hover{background:#4299e14d}.resize-ne:hover,.resize-nw:hover,.resize-se:hover,.resize-sw:hover{background:#4299e14d;transform:scale(1.1)}.resize-handle{position:absolute;background:transparent;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;transition:background-color .2s ease}.handle-content{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 8px;box-sizing:border-box}.mode-controls-container{display:flex;gap:6px;align-items:center;flex-shrink:0}.mode-btn{width:32px;height:32px;border:none;border-radius:8px;cursor:pointer;font-size:14px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;background:transparent;color:#6b7280;position:relative;overflow:hidden}.mode-btn:hover{transform:scale(1.2);background:#0000000d}.mode-btn:active{transform:scale(1.1)}.mode-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.container-content::-webkit-scrollbar{width:6px}.container-content::-webkit-scrollbar-track{background:#f3f4f6;border-radius:3px}.container-content::-webkit-scrollbar-thumb{background:#9ca3af;border-radius:3px}.container-content::-webkit-scrollbar-thumb:hover{background:#6b7280}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Main library entry point
+ * Exports all public API for the container manager library
+ */
+export type { ContainerConfig, ContainerManagerInterface, Plugin, ContainerEvent, ContainerState, Boundaries, MovementMode, } from './core/types';
+export type { StateInterface } from './utils';
+export type { TemplateConfig } from './utils/TemplateLoader';
+export { ContainerInitializer, TemplateLoader, ContentCreator } from './utils';
+export { ContainerManager } from './core/ContainerManager';