@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/panel/controllers/panel-drag-controller.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Interface for panel host element
+ */
+export interface PanelDragHost extends ReactiveControllerHost {
+    draggable: boolean;
+    offsetX: number;
+    offsetY: number;
+    isDragging: boolean;
+    shadowRoot: ShadowRoot | null;
+    requestUpdate(): void;
+}
+/**
+ * Controller for handling panel drag functionality
+ */
+export declare class PanelDragController implements ReactiveController {
+    private host;
+    private initialX;
+    private initialY;
+    private dragHandle;
+    constructor(host: PanelDragHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private setupDragHandlers;
+    private cleanupDragHandlers;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    /**
+     * Reset panel position to center
+     */
+    resetPosition(): void;
+}
+//# sourceMappingURL=panel-drag-controller.d.ts.map

package/dist/src/components/panel/controllers/panel-drag-controller.js

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Controller for handling panel drag functionality
+ */
+export class PanelDragController {
+    constructor(host) {
+        this.initialX = 0;
+        this.initialY = 0;
+        this.dragHandle = null;
+        this.handleMouseDown = (event) => {
+            var _a;
+            if (!this.host.draggable)
+                return;
+            event.preventDefault();
+            this.host.isDragging = true;
+            this.initialX = event.clientX - this.host.offsetX;
+            this.initialY = event.clientY - this.host.offsetY;
+            // Add dragging class for styling
+            const panel = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.panel');
+            if (panel) {
+                panel.classList.add('panel--dragging');
+            }
+        };
+        this.handleMouseMove = (event) => {
+            var _a;
+            if (!this.host.isDragging || !this.host.draggable)
+                return;
+            event.preventDefault();
+            // Calculate new position
+            const newX = event.clientX - this.initialX;
+            const newY = event.clientY - this.initialY;
+            // Get panel and viewport dimensions for boundary checking
+            const panel = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.panel');
+            if (panel) {
+                const viewportWidth = window.innerWidth;
+                const viewportHeight = window.innerHeight;
+                // Keep at least 100px of the panel visible on screen
+                // Since panel is centered with translate(-50%, -50%), we need to account for that
+                const minVisiblePx = 100;
+                const minX = -(viewportWidth / 2) + minVisiblePx;
+                const maxX = (viewportWidth / 2) - minVisiblePx;
+                const minY = -(viewportHeight / 2) + minVisiblePx;
+                const maxY = (viewportHeight / 2) - minVisiblePx;
+                this.host.offsetX = Math.max(minX, Math.min(maxX, newX));
+                this.host.offsetY = Math.max(minY, Math.min(maxY, newY));
+                // Apply transform - for window mode we need to adjust from center
+                const transformX = this.host.offsetX;
+                const transformY = this.host.offsetY;
+                panel.style.transform = `translate(calc(-50% + ${transformX}px), calc(-50% + ${transformY}px))`;
+            }
+            this.host.requestUpdate();
+        };
+        this.handleMouseUp = () => {
+            var _a;
+            if (!this.host.isDragging)
+                return;
+            this.host.isDragging = false;
+            // Remove dragging class
+            const panel = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.panel');
+            if (panel) {
+                panel.classList.remove('panel--dragging');
+            }
+            this.host.requestUpdate();
+        };
+        this.host = host;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        this.setupDragHandlers();
+    }
+    hostDisconnected() {
+        this.cleanupDragHandlers();
+    }
+    hostUpdated() {
+        // Re-setup handlers when the component updates (e.g., mode changes)
+        this.cleanupDragHandlers();
+        this.setupDragHandlers();
+    }
+    setupDragHandlers() {
+        // Wait for next frame to ensure DOM is ready
+        requestAnimationFrame(() => {
+            var _a;
+            // Clean up any existing listeners first
+            this.cleanupDragHandlers();
+            this.dragHandle = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.panel-header--draggable');
+            if (this.dragHandle && this.host.draggable) {
+                this.dragHandle.addEventListener('mousedown', this.handleMouseDown);
+                document.addEventListener('mousemove', this.handleMouseMove);
+                document.addEventListener('mouseup', this.handleMouseUp);
+            }
+        });
+    }
+    cleanupDragHandlers() {
+        if (this.dragHandle) {
+            this.dragHandle.removeEventListener('mousedown', this.handleMouseDown);
+        }
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+    }
+    /**
+     * Reset panel position to center
+     */
+    resetPosition() {
+        var _a;
+        this.host.offsetX = 0;
+        this.host.offsetY = 0;
+        const panel = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.panel');
+        if (panel) {
+            panel.style.transform = 'translate(-50%, -50%)';
+        }
+        this.host.requestUpdate();
+    }
+}
+//# sourceMappingURL=panel-drag-controller.js.map

package/dist/src/components/panel/controllers/panel-resize-controller.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Interface for panel resize host element
+ */
+export interface PanelResizeHost extends ReactiveControllerHost {
+    resizable: boolean;
+    panelWidth: number;
+    panelHeight: number;
+    shadowRoot: ShadowRoot | null;
+    requestUpdate(): void;
+}
+/**
+ * Controller for handling panel resize functionality
+ */
+export declare class PanelResizeController implements ReactiveController {
+    private host;
+    private isResizing;
+    private initialWidth;
+    private initialHeight;
+    private initialX;
+    private initialY;
+    private resizeDirection;
+    constructor(host: PanelResizeHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private setupResizeHandlers;
+    private cleanupResizeHandlers;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+}
+//# sourceMappingURL=panel-resize-controller.d.ts.map

package/dist/src/components/panel/controllers/panel-resize-controller.js

@@ -0,0 +1,124 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Controller for handling panel resize functionality
+ */
+export class PanelResizeController {
+    constructor(host) {
+        this.isResizing = false;
+        this.initialWidth = 0;
+        this.initialHeight = 0;
+        this.initialX = 0;
+        this.initialY = 0;
+        this.resizeDirection = '';
+        this.handleMouseDown = (event) => {
+            var _a, _b;
+            if (!this.host.resizable)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.isResizing = true;
+            this.initialX = event.clientX;
+            this.initialY = event.clientY;
+            const panel = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.panel');
+            if (panel) {
+                this.initialWidth = panel.offsetWidth;
+                this.initialHeight = panel.offsetHeight;
+            }
+            // Get resize direction from class
+            const target = event.target;
+            const classList = target.classList;
+            this.resizeDirection = ((_b = Array.from(classList).find(c => c.startsWith('resize-handle-'))) === null || _b === void 0 ? void 0 : _b.replace('resize-handle-', '')) || '';
+        };
+        this.handleMouseMove = (event) => {
+            var _a;
+            if (!this.isResizing || !this.host.resizable)
+                return;
+            event.preventDefault();
+            const deltaX = event.clientX - this.initialX;
+            const deltaY = event.clientY - this.initialY;
+            const panel = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.panel');
+            if (!panel)
+                return;
+            let newWidth = this.initialWidth;
+            let newHeight = this.initialHeight;
+            // Calculate new dimensions based on resize direction
+            if (this.resizeDirection.includes('e')) {
+                newWidth = this.initialWidth + deltaX;
+            }
+            else if (this.resizeDirection.includes('w')) {
+                newWidth = this.initialWidth - deltaX;
+            }
+            if (this.resizeDirection.includes('s')) {
+                newHeight = this.initialHeight + deltaY;
+            }
+            else if (this.resizeDirection.includes('n')) {
+                newHeight = this.initialHeight - deltaY;
+            }
+            // Apply minimum dimensions
+            const minWidth = 280;
+            const minHeight = 200;
+            newWidth = Math.max(minWidth, newWidth);
+            newHeight = Math.max(minHeight, newHeight);
+            // Apply new dimensions
+            panel.style.width = `${newWidth}px`;
+            panel.style.height = `${newHeight}px`;
+            this.host.panelWidth = newWidth;
+            this.host.panelHeight = newHeight;
+            this.host.requestUpdate();
+        };
+        this.handleMouseUp = () => {
+            var _a;
+            if (!this.isResizing)
+                return;
+            this.isResizing = false;
+            this.resizeDirection = '';
+            // Dispatch resize event
+            const panel = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.panel');
+            if (panel) {
+                this.host.dispatchEvent(new CustomEvent('panel-resize', {
+                    bubbles: true,
+                    detail: {
+                        width: this.host.panelWidth,
+                        height: this.host.panelHeight
+                    }
+                }));
+            }
+            this.host.requestUpdate();
+        };
+        this.host = host;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        this.setupResizeHandlers();
+    }
+    hostDisconnected() {
+        this.cleanupResizeHandlers();
+    }
+    setupResizeHandlers() {
+        requestAnimationFrame(() => {
+            var _a;
+            if (!this.host.resizable)
+                return;
+            const handles = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.resize-handle');
+            handles === null || handles === void 0 ? void 0 : handles.forEach(handle => {
+                handle.addEventListener('mousedown', this.handleMouseDown);
+            });
+            document.addEventListener('mousemove', this.handleMouseMove);
+            document.addEventListener('mouseup', this.handleMouseUp);
+        });
+    }
+    cleanupResizeHandlers() {
+        var _a;
+        const handles = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.resize-handle');
+        handles === null || handles === void 0 ? void 0 : handles.forEach(handle => {
+            handle.removeEventListener('mousedown', this.handleMouseDown);
+        });
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+    }
+}
+//# sourceMappingURL=panel-resize-controller.js.map