split-dock 1.0.0 → 1.0.1

package/src/handles/drag-drop-handler.js

@@ -0,0 +1,145 @@
+import { CONFIG } from '../index.js';
+
+export class DragDropHandler {
+    constructor(dock) {
+        this.draggedPanel = null;
+        this.draggedFromDock = null;
+        this.currentHoverDock = null;
+        this.dragGhost = null;
+        
+        // Reuse single handler across all docks
+        if (dock?.splitDock?.dragDropHandler) {
+            return dock.splitDock.dragDropHandler;
+        }
+        if (dock?.splitDock) {
+            dock.splitDock.dragDropHandler = this;
+        }
+    }
+
+    startDragging(panel, dock) {
+        this.draggedPanel = panel;
+        this.draggedFromDock = dock;
+
+        this.dragGhost = document.createElement('div');
+        this.dragGhost.className = 'drag-ghost';
+        this.dragGhost.textContent = panel.title;
+        document.body.appendChild(this.dragGhost);
+
+        document.addEventListener('dragover', this.updateDragGhost);
+    }
+
+    stopDragging() {
+        this.dragGhost?.remove();
+        this.dragGhost = null;
+        document.removeEventListener('dragover', this.updateDragGhost);
+        this.currentHoverDock?.clearDropIndicators();
+        this.draggedPanel = null;
+        this.draggedFromDock = null;
+        this.currentHoverDock = null;
+    }
+
+    updateDragGhost = (e) => {
+        if (this.dragGhost) {
+            this.dragGhost.style.left = `${e.clientX + CONFIG.layout.dragGhostOffset}px`;
+            this.dragGhost.style.top = `${e.clientY + CONFIG.layout.dragGhostOffset}px`;
+        }
+    }
+
+    onDragOver(e, dock) {
+        if (!this.draggedPanel) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = 'move';
+        
+        if (this.currentHoverDock && this.currentHoverDock !== dock) {
+            this.currentHoverDock.clearDropIndicators();
+        }
+        this.currentHoverDock = dock;
+        dock.clearDropIndicators();
+
+        const zone = this.getDropZone(e, dock);
+        if (zone?.type === 'navbar') {
+            dock.showNavbarDropIndicator(e);
+        } else if (zone) {
+            dock.element.classList.add(`drop-${zone.type}`);
+        }
+    }
+
+    onDragLeave(e, dock) {
+        const rect = dock.element.getBoundingClientRect();
+        if (e.clientX < rect.left || e.clientX >= rect.right ||
+            e.clientY < rect.top || e.clientY >= rect.bottom) {
+            dock.clearDropIndicators();
+        }
+    }
+
+    onDrop(e, dock) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!this.draggedPanel || !this.draggedFromDock || !dock.splitDock) return;
+
+        dock.clearDropIndicators();
+        const zone = this.getDropZone(e, dock);
+        if (!zone) return;
+
+        if (zone.type === 'navbar') {
+            this.handleNavbarDrop(dock, this.draggedPanel, this.draggedFromDock);
+        } else if (zone.type === 'center') {
+            if (this.draggedFromDock !== dock) {
+                dock.acceptPanel(this.draggedPanel, this.draggedFromDock);
+            }
+        } else {
+            // Don't allow splitting if dragging the only panel from the same dock
+            if (this.draggedFromDock === dock && this.draggedFromDock.panels.length === 1) return;
+            dock.parentFrame?.splitWithPanel(dock, zone.type, this.draggedPanel, this.draggedFromDock);
+        }
+    }
+
+    getDropZone(e, dock) {
+        const navbarRect = dock.navbar.getBoundingClientRect();
+        if (e.clientX >= navbarRect.left && e.clientX <= navbarRect.right &&
+            e.clientY >= navbarRect.top && e.clientY <= navbarRect.bottom) {
+            return { type: 'navbar', element: dock.navbar };
+        }
+
+        const rect = dock.element.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const edgeSize = Math.min(rect.width, rect.height) * CONFIG.layout.dropZoneRatio;
+
+        if (y < edgeSize) return { type: 'top' };
+        if (y > rect.height - edgeSize) return { type: 'bottom' };
+        if (x < edgeSize) return { type: 'left' };
+        if (x > rect.width - edgeSize) return { type: 'right' };
+        
+        return { type: 'center' };
+    }
+
+    handleNavbarDrop(dock, panel, fromDock) {
+        const targetInfo = dock.getDropTargetPanelInfo(event);
+        
+        if (!targetInfo) {
+            if (fromDock !== dock) {
+                dock.acceptPanel(panel, fromDock);
+            }
+            return;
+        }
+
+        if (fromDock === dock) {
+            dock.reorderPanel(panel, targetInfo.panel, targetInfo.position);
+        } else {
+            dock.acceptPanelAt(panel, fromDock, targetInfo.panel, targetInfo.position);
+        }
+    }
+
+    destroy() {
+        this.dragGhost?.remove();
+        this.dragGhost = null;
+        document.removeEventListener('dragover', this.updateDragGhost);
+        this.draggedPanel = null;
+        this.draggedFromDock = null;
+        this.currentHoverDock = null;
+    }
+}

package/src/handles/frame-adjust-handler.js

@@ -1,3 +1,5 @@
+import { CONFIG } from '../index.js';
+
 export class FrameAdjustHandler {
     constructor(frame) {
         this.frame = frame;
@@ -6,41 +8,31 @@ export class FrameAdjustHandler {
     }
 
     destroy() {
-        // Remove all resize handles from DOM
         this.handles.forEach(handle => {
-            if (handle && handle.parentNode) {
-                handle.remove();
-            }
+            if (handle && handle.parentNode) handle.remove();
+            
         });
         
-        // Clear arrays
         this.handles = [];
         this.handleListeners = [];
-        
-        // Clear frame reference
         this.frame = null;
     }
 
     setupResizeHandles() {
-        // Clear existing handles
         this.handles.forEach(handle => handle.remove());
         this.handles = [];
 
-        // Only add resize handles if we have a split direction and multiple children
         if (!this.frame.splitDirection || this.frame.children.length < 2) {
             return;
         }
 
-        // Insert resize handles between children
         for (let i = 0; i < this.frame.children.length - 1; i++) {
             const handle = document.createElement('div');
             handle.className = `sd-resize-handle ${this.frame.splitDirection}`;
             
-            // Store indices for resize
             handle.dataset.leftIndex = i;
             handle.dataset.rightIndex = i + 1;
             
-            // Insert handle after the current child
             const currentChild = this.frame.children[i].element;
             currentChild.parentNode.insertBefore(handle, currentChild.nextSibling);
             
@@ -57,7 +49,7 @@ export class FrameAdjustHandler {
         let rightChild = null;
         let containerSize = 0;
 
-        const minSize = 100; // Minimum size in pixels
+        const minSize = CONFIG.layout.minPaneSize;
 
         const onMouseDown = (e) => {
             e.preventDefault();
@@ -80,7 +72,6 @@ export class FrameAdjustHandler {
             document.addEventListener('mousemove', onMouseMove);
             document.addEventListener('mouseup', onMouseUp);
             
-            // Add visual feedback
             handle.style.background = '#1e88e5';
             document.body.style.cursor = this.frame.splitDirection === 'horizontal' ? 'col-resize' : 'row-resize';
         };
@@ -94,9 +85,7 @@ export class FrameAdjustHandler {
             const newLeftSize = leftStartSize + delta;
             const newRightSize = rightStartSize - delta;
 
-            // Enforce minimum sizes
             if (newLeftSize >= minSize && newRightSize >= minSize) {
-                // Calculate flex values relative to the entire container
                 const leftFlex = newLeftSize / containerSize;
                 const rightFlex = newRightSize / containerSize;
 
@@ -109,7 +98,6 @@ export class FrameAdjustHandler {
             document.removeEventListener('mousemove', onMouseMove);
             document.removeEventListener('mouseup', onMouseUp);
             
-            // Remove visual feedback
             handle.style.background = '';
             document.body.style.cursor = '';
         };

package/src/index.js

@@ -2,7 +2,23 @@ import { Panel } from './panel.js';
 import { Dock } from './dock.js';
 import { Frame } from './frame.js';
 
-// Auto-load CSS
+// Configuration constants
+export const CONFIG = {
+    // Layout constants
+    layout: {
+        minPaneSize: 100,           // Minimum size in pixels for a pane
+        dropZoneRatio: 0.33,        // 33% of edge is drop zone
+        dragGhostOffset: 10,        // Offset in pixels for drag ghost
+        defaultFlexBasis: '1 1 0px' // Default flex basis for splits
+    },
+    
+    // UI constants
+    ui: {
+        closeButtonSymbol: '×',     // Close button character
+        defaultPanelTitle: 'New Panel'
+    }
+};
+
 (function loadCSS() {
     const existingLink = document.querySelector('link[href*="style.css"]');
     if (!existingLink) {
@@ -13,23 +29,17 @@ import { Frame } from './frame.js';
     }
 })();
 
-// ID counter for generating unique IDs
 let idCounter = 0;
 export function generateId() {
     return `sd-${Date.now()}-${++idCounter}`;
 }
 
-// Main framework
 export class SplitDock {
     constructor() {
         this.rootFrames = [];
-        this.draggedPanel = null;
-        this.draggedFromDock = null;
-        this.dragGhost = null;
-        this.currentHoverDock = null;
+        this.dragDropHandler = null;
     }
 
-    // Initialize framework by loading frame elements from HTML
     initialize() {
         const rootElement = document.getElementById('app');
         if (rootElement && rootElement.classList.contains('sd-frame')) {
@@ -40,74 +50,18 @@ export class SplitDock {
         return this;
     }
 
-    startDragging(panel, dock) {
-        this.draggedPanel = panel;
-        this.draggedFromDock = dock;
-
-        this.dragGhost = document.createElement('div');
-        this.dragGhost.className = 'drag-ghost';
-        this.dragGhost.textContent = panel.title;
-        document.body.appendChild(this.dragGhost);
-
-        document.addEventListener('dragover', this.updateDragGhost);
-    }
-
-    stopDragging() {
-        if (this.dragGhost) {
-            this.dragGhost.remove();
-            this.dragGhost = null;
-        }
-
-        document.removeEventListener('dragover', this.updateDragGhost);
-
-        // Clear drop indicators from the currently hovered dock only
-        if (this.currentHoverDock) {
-            this.currentHoverDock.element.classList.remove('drop-center', 'drop-top', 'drop-bottom', 'drop-left', 'drop-right', 'drop-navbar');
-            // Also clear tab reordering indicators
-            const titleElements = Array.from(this.currentHoverDock.navbar.querySelectorAll('.sd-panel-title'));
-            titleElements.forEach(el => el.classList.remove('drop-before', 'drop-after'));
-        }
-
-        this.draggedPanel = null;
-        this.draggedFromDock = null;
-        this.currentHoverDock = null;
-    }
-
-    updateDragGhost = (e) => {
-        if (this.dragGhost) {
-            this.dragGhost.style.left = (e.clientX + 10) + 'px';
-            this.dragGhost.style.top = (e.clientY + 10) + 'px';
-        }
-    }
-
     destroy() {
-        // Cleanup drag ghost if exists
-        if (this.dragGhost) {
-            this.dragGhost.remove();
-            this.dragGhost = null;
-        }
-
-        // Remove event listeners
-        document.removeEventListener('dragover', this.updateDragGhost);
-
-        // Destroy all root frames
         this.rootFrames.forEach(frame => frame.destroy());
         this.rootFrames = [];
-
-        // Clear references
-        this.draggedPanel = null;
-        this.draggedFromDock = null;
-        this.currentHoverDock = null;
+        this.dragDropHandler = null;
     }
 }
 
-// Export classes to window object for backward compatibility
 window.SplitDock = SplitDock;
 window.SdPanel = Panel;
 window.SdDock = Dock;
 window.SdFrame = Frame;
 
-// Auto-initialize when DOM is ready
 document.addEventListener('DOMContentLoaded', () => {
     const framework = new SplitDock();
     framework.initialize();

package/src/panel.js

@@ -1,4 +1,4 @@
-import { generateId } from './index.js';
+import { generateId, CONFIG } from './index.js';
 
 // Panel class - represents a single panel with title and content
 export class Panel {
@@ -7,15 +7,13 @@ export class Panel {
         this.dock = null;
         this.eventListeners = [];
         
-        // Use existing elements from HTML or create new ones
         if (titleElement && contentElement) {
             this.titleElement = titleElement;
             this.contentElement = contentElement;
             this.title = titleElement.textContent.trim();
             this.content = contentElement.innerHTML;
         } else {
-            // Fallback for programmatic creation
-            this.title = titleElement || 'New Panel';
+            this.title = titleElement || CONFIG.ui.defaultPanelTitle;
             this.content = contentElement || '';
             this.createElements();
         }
@@ -28,7 +26,7 @@ export class Panel {
         this.titleElement.className = 'sd-panel-title';
         this.titleElement.innerHTML = `
             <span class="sd-panel-title-text">${this.title}</span>
-            <span class="sd-panel-close">×</span>
+            <span class="sd-panel-close">${CONFIG.ui.closeButtonSymbol}</span>
         `;
 
         this.contentElement = document.createElement('div');
@@ -37,14 +35,13 @@ export class Panel {
     }
 
     setupElements() {
-        // Make title draggable and ensure it has close button
         this.titleElement.setAttribute('draggable', 'true');
         this.titleElement.draggable = true;
         
         if (!this.titleElement.querySelector('.sd-panel-close')) {
             const closeBtn = document.createElement('span');
             closeBtn.className = 'sd-panel-close';
-            closeBtn.textContent = '×';
+            closeBtn.textContent = CONFIG.ui.closeButtonSymbol;
             this.titleElement.appendChild(closeBtn);
         }
 
@@ -53,18 +50,15 @@ export class Panel {
 
     setupEventListeners() {
         const clickHandler = (e) => {
-            if (!e.target.classList.contains('sd-panel-close') && this.dock) {
+            if (!e.target.classList.contains('sd-panel-close') && this.dock)
                 this.dock.setActivePanel(this);
-            }
         };
         this.titleElement.addEventListener('click', clickHandler);
         this.eventListeners.push({ element: this.titleElement, event: 'click', handler: clickHandler });
 
         const closeHandler = (e) => {
             e.stopPropagation();
-            if (this.dock) {
-                this.dock.removePanel(this);
-            }
+            if (this.dock) this.dock.removePanel(this);
         };
         const closeBtn = this.titleElement.querySelector('.sd-panel-close');
         closeBtn.addEventListener('click', closeHandler);
@@ -80,8 +74,8 @@ export class Panel {
     }
 
     onDragStart(e) {
-        if (this.dock && this.dock.splitDock) {
-            this.dock.splitDock.startDragging(this, this.dock);
+        if (this.dock && this.dock.splitDock && this.dock.splitDock.dragDropHandler) {
+            this.dock.splitDock.dragDropHandler.startDragging(this, this.dock);
         }
         this.titleElement.classList.add('dragging');
         e.dataTransfer.effectAllowed = 'move';
@@ -89,8 +83,8 @@ export class Panel {
     }
 
     onDragEnd(e) {
-        if (this.dock && this.dock.splitDock) {
-            this.dock.splitDock.stopDragging();
+        if (this.dock && this.dock.splitDock && this.dock.splitDock.dragDropHandler) {
+            this.dock.splitDock.dragDropHandler.stopDragging();
         }
         this.titleElement.classList.remove('dragging');
     }
@@ -112,7 +106,6 @@ export class Panel {
     }
 
     destroy() {
-        // Remove all event listeners
         this.eventListeners.forEach(({ element, event, handler }) => {
             element.removeEventListener(event, handler);
         });

package/src/handles/dock-drop-handler.js

@@ -1,187 +0,0 @@
-import { Frame } from '../frame.js';
-import { Dock } from '../dock.js';
-
-export class DockDropHandler {
-    constructor(dock) {
-        this.dock = dock;
-    }
-
-    onDragOver(e) {
-        if (!this.dock.splitDock?.draggedPanel) return;
-
-        // If over navbar, let the tab handler deal with it exclusively
-        if (this.isOverNavbar(e)) {
-            return;
-        }
-
-        e.preventDefault();
-        e.stopPropagation();
-        e.dataTransfer.dropEffect = 'move';
-
-        // Clear previous dock's indicators if switching to a new dock
-        if (this.dock.splitDock.currentHoverDock && this.dock.splitDock.currentHoverDock !== this.dock) {
-            this.dock.splitDock.currentHoverDock.element.classList.remove('drop-center', 'drop-top', 'drop-bottom', 'drop-left', 'drop-right', 'drop-navbar');
-        }
-        this.dock.splitDock.currentHoverDock = this.dock;
-
-        // Remove all zone classes
-        this.dock.element.classList.remove('drop-center', 'drop-top', 'drop-bottom', 'drop-left', 'drop-right', 'drop-navbar');
-
-        const zone = this.getDropZoneFromEvent(e);
-        if (zone) {
-            this.dock.element.classList.add(`drop-${zone}`);
-        }
-    }
-
-    onDragLeave(e) {
-        const rect = this.dock.element.getBoundingClientRect();
-        if (e.clientX < rect.left || e.clientX >= rect.right ||
-            e.clientY < rect.top || e.clientY >= rect.bottom) {
-            this.dock.element.classList.remove('drop-center', 'drop-top', 'drop-bottom', 'drop-left', 'drop-right', 'drop-navbar');
-        }
-    }
-
-    onDrop(e) {
-        // If over navbar, let the tab handler deal with it
-        if (this.isOverNavbar(e)) {
-            return;
-        }
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (!this.dock.splitDock) return;
-
-        const panel = this.dock.splitDock.draggedPanel;
-        const fromDock = this.dock.splitDock.draggedFromDock;
-
-        if (!panel || !fromDock) return;
-
-        this.dock.element.classList.remove('drop-center', 'drop-top', 'drop-bottom', 'drop-left', 'drop-right', 'drop-navbar');
-
-        const zone = this.getDropZoneFromEvent(e);
-        
-        if (zone === 'center') {
-            if (fromDock !== this.dock) {
-                this.dock.acceptPanel(panel, fromDock);
-            }
-            return;
-        }
-
-        // Don't allow splitting if dragging the only panel from the same dock
-        if (fromDock === this.dock && fromDock.panels.length === 1) return;
-        
-        this.createSplit(zone, panel, fromDock);
-    }
-
-    isOverNavbar(e) {
-        // Check if mouse is over ANY navbar, not just this dock's navbar
-        const allNavbars = document.querySelectorAll('.sd-dock-navbar');
-        for (const navbar of allNavbars) {
-            const rect = navbar.getBoundingClientRect();
-            if (e.clientX >= rect.left &&
-                e.clientX <= rect.right &&
-                e.clientY >= rect.top &&
-                e.clientY <= rect.bottom) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    getDropZoneFromEvent(e) {
-        const rect = this.dock.element.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-        return this.getDropZone(x, y, rect.width, rect.height);
-    }
-
-    getDropZone(x, y, width, height) {
-        const topThreshold = height * 0.3;
-        const bottomThreshold = height * 0.7;
-        const leftThreshold = width * 0.3;
-        const rightThreshold = width * 0.7;
-
-        if (y < topThreshold) return 'top';
-        if (y > bottomThreshold) return 'bottom';
-        if (x < leftThreshold) return 'left';
-        if (x > rightThreshold) return 'right';
-        return 'center';
-    }
-
-    createSplit(direction, panel, fromDock) {
-        if (!this.dock.splitDock) return;
-        if (fromDock === this.dock && fromDock.panels.length === 1) return;
-        if (!this.dock.parentFrame) return;
-
-        fromDock.removePanel(panel, true);
-
-        const newDock = new Dock(null, null);
-        newDock.addPanel(panel);
-
-        const splitDir = (direction === 'left' || direction === 'right') ? 'horizontal' : 'vertical';
-        const insertBefore = (direction === 'top' || direction === 'left');
-        
-        this.applySplit(newDock, splitDir, insertBefore);
-    }
-
-    applySplit(newDock, splitDir, insertBefore) {
-        const parent = this.dock.parentFrame;
-        const isOnlyChild = parent.children.length === 1 && parent.children[0] === this.dock;
-        const hasSameSplitDir = parent.splitDirection === splitDir;
-
-        if (isOnlyChild) {
-            this.splitIntoParent(parent, newDock, splitDir, insertBefore);
-        } else if (hasSameSplitDir) {
-            this.insertIntoParent(parent, newDock, insertBefore);
-        } else {
-            this.createNestedSplit(parent, newDock, splitDir, insertBefore);
-        }
-    }
-
-    splitIntoParent(parent, newDock, splitDir, insertBefore) {
-        parent.splitDirection = splitDir;
-        parent.children = [];
-        
-        if (insertBefore) {
-            parent.addChild(newDock);
-            parent.addChild(this.dock);
-        } else {
-            parent.addChild(this.dock);
-            parent.addChild(newDock);
-        }
-    }
-
-    insertIntoParent(parent, newDock, insertBefore) {
-        const index = parent.children.indexOf(this.dock);
-        const insertIndex = insertBefore ? index : index + 1;
-        
-        parent.children.splice(insertIndex, 0, newDock);
-        newDock.parentFrame = parent;
-        
-        const refElement = insertBefore ? this.dock.element : this.dock.element.nextSibling;
-        parent.element.insertBefore(newDock.element, refElement);
-        parent.updateStyles();
-    }
-
-    createNestedSplit(parent, newDock, splitDir, insertBefore) {
-        const newFrame = new Frame(null, this.dock.splitDock);
-        newFrame.splitDirection = splitDir;
-        
-        const index = parent.children.indexOf(this.dock);
-        parent.children[index] = newFrame;
-        
-        parent.element.insertBefore(newFrame.element, this.dock.element);
-        this.dock.element.remove();
-        
-        if (insertBefore) {
-            newFrame.addChild(newDock);
-            newFrame.addChild(this.dock);
-        } else {
-            newFrame.addChild(this.dock);
-            newFrame.addChild(newDock);
-        }
-        
-        parent.updateStyles();
-    }
-}