split-dock 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "split-dock",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A lightweight, flexible docking framework for building split-view layouts with drag-and-drop panel management",
   "main": "src/index.js",
   "type": "module",

package/src/dock.js

@@ -1,6 +1,6 @@
 import { Panel } from './panel.js';
-import { DropHandler } from './handles/drop-handler.js';
-import { generateId } from './index.js';
+import { DragDropHandler } from './handles/drag-drop-handler.js';
+import { generateId, CONFIG } from './index.js';
 
 // Dock class - contains panels
 export class Dock {
@@ -10,76 +10,54 @@ export class Dock {
         this.splitDock = parentFrame?.splitDock || null;
         this.panels = [];
         this.activePanel = null;
-        this.eventListeners = [];
+        this.abortController = new AbortController();
         
         this.element = element || document.createElement('div');
         this.initializeElements();
         
-        this.dropHandler = new DropHandler(this);
+        this.dragDropHandler = new DragDropHandler(this);
         
         this.setupEventListeners();
     }
 
     initializeElements() {
         const hasExistingDock = this.element.classList.contains('sd-dock');
+        if (!hasExistingDock) this.element.className = 'sd-dock';
         
-        if (!hasExistingDock) {
-            this.element.className = 'sd-dock';
+        this.navbar = this.element.querySelector('.sd-dock-navbar');
+        if (!this.navbar) {
+            this.navbar = document.createElement('div');
+            this.navbar.className = 'sd-dock-navbar';
+            this.element.insertBefore(this.navbar, this.element.firstChild);
         }
         
-        this.findOrCreateSubElements();
-        
-        if (hasExistingDock) {
-            this.loadPanelsFromHTML();
+        this.content = this.element.querySelector('.sd-dock-content');
+        if (!this.content) {
+            this.content = document.createElement('div');
+            this.content.className = 'sd-dock-content';
+            this.element.appendChild(this.content);
         }
-    }
-
-    findOrCreateSubElements() {
-        this.navbar = this.element.querySelector('.sd-dock-navbar') || this.createNavbar();
-        this.content = this.element.querySelector('.sd-dock-content') || this.createContent();
-    }
-
-    createNavbar() {
-        const navbar = document.createElement('div');
-        navbar.className = 'sd-dock-navbar';
-        this.element.insertBefore(navbar, this.element.firstChild);
-        return navbar;
-    }
-
-    createContent() {
-        const content = document.createElement('div');
-        content.className = 'sd-dock-content';
-        this.element.appendChild(content);
-        return content;
+        
+        if (hasExistingDock) this.loadPanelsFromHTML();
     }
 
     loadPanelsFromHTML() {
-        const panelElements = Array.from(this.element.querySelectorAll('.sd-panel'));
-        
-        panelElements.forEach(panelElement => {
-            const titleEl = panelElement.querySelector('.sd-panel-title');
-            const contentEl = panelElement.querySelector('.sd-panel-content');
-            
-            if (!titleEl || !contentEl) return;
-            
-            panelElement.remove();
-            const panel = new Panel(titleEl, contentEl);
-            this.addPanel(panel);
+        this.element.querySelectorAll('.sd-panel').forEach(panelEl => {
+            const titleEl = panelEl.querySelector('.sd-panel-title');
+            const contentEl = panelEl.querySelector('.sd-panel-content');
+            if (titleEl && contentEl) {
+                panelEl.remove();
+                this.addPanel(new Panel(titleEl, contentEl));
+            }
         });
     }
 
     setupEventListeners() {
-        const dragOverHandler = (e) => this.dropHandler.onDragOver(e);
-        this.element.addEventListener('dragover', dragOverHandler);
-        this.eventListeners.push({ event: 'dragover', handler: dragOverHandler });
-
-        const dropHandler = (e) => this.dropHandler.onDrop(e);
-        this.element.addEventListener('drop', dropHandler);
-        this.eventListeners.push({ event: 'drop', handler: dropHandler });
-
-        const dragLeaveHandler = (e) => this.dropHandler.onDragLeave(e);
-        this.element.addEventListener('dragleave', dragLeaveHandler);
-        this.eventListeners.push({ event: 'dragleave', handler: dragLeaveHandler });
+        const signal = this.abortController.signal;
+        
+        this.element.addEventListener('dragover', (e) => this.dragDropHandler.onDragOver(e, this), { signal });
+        this.element.addEventListener('drop', (e) => this.dragDropHandler.onDrop(e, this), { signal });
+        this.element.addEventListener('dragleave', (e) => this.dragDropHandler.onDragLeave(e, this), { signal });
     }
 
     addPanel(panel) {
@@ -87,11 +65,7 @@ export class Dock {
         this.panels.push(panel);
         this.navbar.appendChild(panel.titleElement);
         this.content.appendChild(panel.contentElement);
-
-        if (this.panels.length === 1) {
-            this.setActivePanel(panel);
-        }
-
+        if (this.panels.length === 1) this.setActivePanel(panel);
         return panel;
     }
 
@@ -106,20 +80,15 @@ export class Dock {
         if (index === -1) return;
 
         this.panels.splice(index, 1);
-
-        if (!skipCheck) {
-            panel.remove();
-        }
+        if (!skipCheck) panel.remove();
 
         if (this.activePanel === panel) {
             this.activePanel = null;
             if (this.panels.length > 0) {
-                const newIndex = Math.min(index, this.panels.length - 1);
-                this.setActivePanel(this.panels[newIndex]);
+                this.setActivePanel(this.panels[Math.min(index, this.panels.length - 1)]);
             }
         }
 
-        // If dock is empty and has parent, remove it
         if (this.panels.length === 0 && this.parentFrame) {
             this.parentFrame.removeChild(this);
         }
@@ -131,26 +100,106 @@ export class Dock {
         this.activePanel = panel;
     }
 
-    remove() {
-        this.destroy();
-        this.element.remove();
+    clearDropIndicators() {
+        this.element.classList.remove('drop-center', 'drop-top', 'drop-bottom', 'drop-left', 'drop-right', 'drop-navbar');
+        this.navbar.querySelectorAll('.sd-panel-title').forEach(el => 
+            el.classList.remove('drop-before', 'drop-after')
+        );
     }
 
-    destroy() {
-        // Remove all event listeners
-        this.eventListeners.forEach(({ event, handler }) => {
-            this.element.removeEventListener(event, handler);
-        });
-        this.eventListeners = [];
+    showNavbarDropIndicator(e) {
+        const titles = Array.from(this.navbar.querySelectorAll('.sd-panel-title:not(.dragging)'));
+        if (titles.length === 0) return;
+        
+        const firstRect = titles[0].getBoundingClientRect();
+        const lastRect = titles[titles.length - 1].getBoundingClientRect();
+        
+        if (e.clientX < firstRect.left) {
+            titles[0].classList.add('drop-before');
+        } else if (e.clientX > lastRect.right) {
+            titles[titles.length - 1].classList.add('drop-after');
+        } else {
+            const hovered = titles.find(el => {
+                const rect = el.getBoundingClientRect();
+                return e.clientX >= rect.left && e.clientX <= rect.right;
+            });
+            if (hovered) {
+                const rect = hovered.getBoundingClientRect();
+                hovered.classList.add(e.clientX < rect.left + rect.width / 2 ? 'drop-before' : 'drop-after');
+            }
+        }
+    }
+
+    getDropTargetPanelInfo(e) {
+        const titles = Array.from(this.navbar.querySelectorAll('.sd-panel-title:not(.dragging)'));
+        if (titles.length === 0) return null;
+
+        const firstRect = titles[0].getBoundingClientRect();
+        const lastRect = titles[titles.length - 1].getBoundingClientRect();
+
+        let targetTitle, position;
+        if (e.clientX < firstRect.left) {
+            targetTitle = titles[0];
+            position = 'before';
+        } else if (e.clientX > lastRect.right) {
+            targetTitle = titles[titles.length - 1];
+            position = 'after';
+        } else {
+            targetTitle = titles.find(el => {
+                const rect = el.getBoundingClientRect();
+                return e.clientX >= rect.left && e.clientX <= rect.right;
+            });
+            if (targetTitle) {
+                const rect = targetTitle.getBoundingClientRect();
+                position = e.clientX < rect.left + rect.width / 2 ? 'before' : 'after';
+            }
+        }
+
+        const panel = this.panels.find(p => p.titleElement === targetTitle);
+        return panel ? { panel, position } : null;
+    }
+
+    reorderPanel(panel, targetPanel, position) {
+        const panelIdx = this.panels.indexOf(panel);
+        const targetIdx = this.panels.indexOf(targetPanel);
+        if (panelIdx === -1 || targetIdx === -1) return;
+
+        this.panels.splice(panelIdx, 1);
+        let newIdx = targetIdx + (position === 'after' ? 1 : 0);
+        if (panelIdx < targetIdx) newIdx--;
+        this.panels.splice(newIdx, 0, panel);
+
+        const refNode = position === 'before' ? targetPanel.titleElement : targetPanel.titleElement.nextSibling;
+        this.navbar.insertBefore(panel.titleElement, refNode);
+    }
+
+    acceptPanelAt(panel, fromDock, targetPanel, position) {
+        fromDock.removePanel(panel, true);
 
-        // Destroy all panels
+        const targetIdx = this.panels.indexOf(targetPanel);
+        if (targetIdx === -1) {
+            this.addPanel(panel);
+            return;
+        }
+
+        panel.dock = this;
+        this.panels.splice(position === 'before' ? targetIdx : targetIdx + 1, 0, panel);
+        
+        const refNode = position === 'before' ? targetPanel.titleElement : targetPanel.titleElement.nextSibling;
+        this.navbar.insertBefore(panel.titleElement, refNode);
+        this.content.appendChild(panel.contentElement);
+        this.setActivePanel(panel);
+    }
+
+    destroy() {
+        this.abortController.abort();
         this.panels.forEach(panel => panel.destroy());
         this.panels = [];
-        
-        // Clear references
         this.activePanel = null;
         this.parentFrame = null;
         this.splitDock = null;
-        this.dropHandler = null;
+        this.dragDropHandler?.destroy();
+        this.dragDropHandler = null;
+        this.element.remove();
     }
 }

package/src/frame.js

@@ -1,94 +1,54 @@
 import { Dock } from './dock.js';
 import { FrameAdjustHandler } from './handles/frame-adjust-handler.js';
-import { generateId } from './index.js';
+import { generateId, CONFIG } from './index.js';
 
 // Frame class - can contain docks or other frames
 export class Frame {
     constructor(element, splitDock) {
         this.id = generateId();
-        this.element = element;
         this.splitDock = splitDock;
         this.adjustHandler = new FrameAdjustHandler(this);
         this.parentFrame = null;
-        this.children = []; // Can contain Dock or Frame
-        this.splitDirection = null; // null, 'horizontal', or 'vertical'
+        this.children = [];
+        this.splitDirection = null;
         
         if (element) {
+            this.element = element;
             this.loadChildrenFromHTML();
         } else {
-            this.createElements();
+            this.element = document.createElement('div');
+            this.element.className = 'sd-frame';
         }
         
         this.adjustHandler.setupResizeHandles();
     }
 
-    createElements() {
-        this.element = document.createElement('div');
-        this.element.className = 'sd-frame';
-    }
-
     loadChildrenFromHTML() {
-        // Detect split direction from existing classes
-        if (this.element.classList.contains('horizontal')) {
-            this.splitDirection = 'horizontal';
-        } else if (this.element.classList.contains('vertical')) {
-            this.splitDirection = 'vertical';
-        }
-
-        // First check for dock elements (if this is a leaf window)
-        const dockElements = Array.from(this.element.querySelectorAll(':scope > .sd-dock'));
+        this.detectSplitDirection();
         
-        if (dockElements.length > 0) {
-            // If there are multiple docks, wrap each in its own frame
-            if (dockElements.length > 1 && this.splitDirection) {
-                dockElements.forEach(dockElement => {
-                    // Create a wrapper frame for each dock
-                    const frameWrapper = document.createElement('div');
-                    frameWrapper.className = 'sd-frame';
-                    
-                    // Insert wrapper before the dock
-                    dockElement.parentNode.insertBefore(frameWrapper, dockElement);
-                    // Move dock into wrapper
-                    frameWrapper.appendChild(dockElement);
-                    
-                    // Create Frame instance for wrapper
-                    const childFrame = new Frame(frameWrapper, this.splitDock);
-                    childFrame.parentFrame = this;
-                    this.children.push(childFrame);
-                });
-            } else {
-                // Single dock, add directly
-                dockElements.forEach(dockElement => {
-                    const dock = new Dock(dockElement, this);
-                    this.children.push(dock);
-                });
-            }
-        } else {
-            // Check for nested frames
-            const windowElements = Array.from(this.element.querySelectorAll(':scope > .sd-frame'));
-            
-            windowElements.forEach(winElement => {
-                const childWindow = new Frame(winElement, this.splitDock);
-                childWindow.parentFrame = this;
-                this.children.push(childWindow);
-            });
-        }
+        this.element.querySelectorAll(':scope > .sd-dock').forEach(el => {
+            this.children.push(new Dock(el, this));
+        });
+        
+        this.element.querySelectorAll(':scope > .sd-frame').forEach(el => {
+            const frame = new Frame(el, this.splitDock);
+            frame.parentFrame = this;
+            this.children.push(frame);
+        });
+    }
+
+    detectSplitDirection() {
+        if (this.element.classList.contains('horizontal')) this.splitDirection = 'horizontal';
+        else if (this.element.classList.contains('vertical')) this.splitDirection = 'vertical';
     }
 
     addChild(child) {
-        if (child instanceof Dock) {
-            child.parentFrame = this;
-            child.splitDock = this.splitDock;
-        } else if (child instanceof Frame) {
-            child.parentFrame = this;
-        }
+        child.parentFrame = this;
+        if (child instanceof Dock) child.splitDock = this.splitDock;
         
         this.children.push(child);
         this.element.appendChild(child.element);
-        
-        // Update styles after adding a child
         this.updateStyles();
-        
         return child;
     }
 
@@ -96,94 +56,122 @@ export class Frame {
         const index = this.children.indexOf(child);
         if (index === -1) return;
 
-        child.remove();
         this.children.splice(index, 1);
+        child.element?.remove();
 
-        // Clean up if only one child left - promote the child
-        if (this.children.length === 1) {
-            this.splitDirection = null;
-            this.element.classList.remove('horizontal', 'vertical');
-            
-            const remainingChild = this.children[0];
-            
-            // Reset flex style to fill available space
-            remainingChild.element.style.flex = '';
-            
-            // If this window has a parent, we should promote the remaining child
-            if (this.parentFrame) {
-                const parentIndex = this.parentFrame.children.indexOf(this);
-                
-                if (parentIndex !== -1) {
-                    // Replace this window with the remaining child in parent
-                    this.parentFrame.children[parentIndex] = remainingChild;
-                    
-                    // Update parent reference
-                    if (remainingChild instanceof Dock) {
-                        remainingChild.parentFrame = this.parentFrame;
-                        remainingChild.splitDock = this.parentFrame.splitDock;
-                    } else if (remainingChild instanceof Frame) {
-                        remainingChild.parentFrame = this.parentFrame;
-                    }
-                    
-                    // Move the child element to parent and remove this window
-                    this.parentFrame.element.insertBefore(remainingChild.element, this.element);
-                    this.element.remove();
-                    this.children = [];
-                }
-            }
-        }
+        if (this.children.length === 1) this.promoteChild();
+        else if (this.isEmpty()) this.handleEmptyFrame();
+        else this.updateStyles();
+    }
 
-        // If no children and has parent, remove self
-        if (this.children.length === 0) {
-            if (this.parentFrame) {
-                this.parentFrame.removeChild(this);
-            } else {
-                // Root window with no children, just remove the element
+    promoteChild() {
+        this.splitDirection = null;
+        this.element.classList.remove('horizontal', 'vertical');
+        
+        const child = this.children[0];
+        child.element.style.flex = '';
+        
+        if (this.parentFrame) {
+            const parentIdx = this.parentFrame.children.indexOf(this);
+            if (parentIdx !== -1) {
+                this.parentFrame.children[parentIdx] = child;
+                child.parentFrame = this.parentFrame;
+                if (child instanceof Dock) child.splitDock = this.parentFrame.splitDock;
+                
+                this.parentFrame.element.insertBefore(child.element, this.element);
                 this.element.remove();
+                this.children = [];
+                this.parentFrame.updateStyles();
             }
         }
-        
-        // Update styles after removing a child
-        this.updateStyles();
     }
 
-    remove() {
-        this.destroy();
-        this.element.remove();
+    handleEmptyFrame() {
+        if (this.parentFrame) this.parentFrame.removeChild(this);
+        else this.element.remove();
     }
 
-    destroy() {
-        // Destroy all children
-        this.children.forEach(child => {
-            if (child instanceof Dock || child instanceof Frame) {
-                child.destroy();
-            }
-        });
-        this.children = [];
+    isEmpty() { return this.children.length === 0; }
 
-        // Cleanup adjust handler
-        if (this.adjustHandler) {
-            this.adjustHandler.destroy();
-            this.adjustHandler = null;
-        }
+    hasMultipleChildren() { return this.children.length > 1; }
 
-        // Clear references
+    destroy() {
+        this.children.forEach(child => child.destroy());
+        this.children = [];
+        this.adjustHandler?.destroy();
+        this.adjustHandler = null;
         this.parentFrame = null;
         this.splitDock = null;
     }
 
     updateStyles() {
-        // Update split direction classes
-        if (this.splitDirection) {
-            this.element.classList.remove('horizontal', 'vertical');
-            this.element.classList.add(this.splitDirection);
+        this.element.classList.remove('horizontal', 'vertical');
+        if (this.splitDirection) this.element.classList.add(this.splitDirection);
+        this.adjustHandler.setupResizeHandles();
+    }
+
+    splitWithPanel(dock, direction, panel, fromDock) {
+        const currentIndex = this.children.indexOf(dock);
+        if (currentIndex === -1) return;
+
+        const newDock = new Dock(null, this);
+        this.applySplit(dock, direction, newDock, currentIndex);
+        fromDock.removePanel(panel, true);
+        newDock.addPanel(panel);
+    }
+
+    applySplit(dock, direction, newDock, currentIndex) {
+        const needsVerticalSplit = direction === 'top' || direction === 'bottom';
+        const needsHorizontalSplit = direction === 'left' || direction === 'right';
+
+        if ((needsVerticalSplit && this.splitDirection === 'vertical') ||
+            (needsHorizontalSplit && this.splitDirection === 'horizontal')) {
+            this.splitIntoExisting(dock, direction, newDock, currentIndex);
+        } else if (this.splitDirection === null && this.children.length === 1) {
+            this.initializeSplit(direction, newDock, currentIndex);
         } else {
-            this.element.classList.remove('horizontal', 'vertical');
+            this.createNestedSplit(dock, direction, newDock);
         }
+    }
 
-        // Update resize handles
-        this.adjustHandler.setupResizeHandles();
+    splitIntoExisting(dock, direction, newDock, currentIndex) {
+        const insertBefore = direction === 'top' || direction === 'left';
+        const insertIdx = insertBefore ? currentIndex : currentIndex + 1;
+
+        this.children.splice(insertIdx, 0, newDock);
+        const refNode = insertBefore ? dock.element : dock.element.nextSibling;
+        this.element.insertBefore(newDock.element, refNode);
+
+        dock.element.style.flex = CONFIG.layout.defaultFlexBasis;
+        newDock.element.style.flex = CONFIG.layout.defaultFlexBasis;
+        this.updateStyles();
     }
 
+    initializeSplit(direction, newDock, currentIndex) {
+        this.splitDirection = (direction === 'top' || direction === 'bottom') ? 'vertical' : 'horizontal';
+        this.splitIntoExisting(this.children[0], direction, newDock, currentIndex);
+    }
+
+    createNestedSplit(dock, direction, newDock) {
+        const currentIndex = this.children.indexOf(dock);
+        const splitDirection = (direction === 'top' || direction === 'bottom') ? 'vertical' : 'horizontal';
+
+        const wrapper = new Frame(null, this.splitDock);
+        wrapper.splitDirection = splitDirection;
+        wrapper.parentFrame = this;
 
+        this.element.insertBefore(wrapper.element, dock.element);
+        dock.element.remove();
+        this.children[currentIndex] = wrapper;
+        dock.parentFrame = wrapper;
+        newDock.parentFrame = wrapper;
+
+        const insertBefore = direction === 'top' || direction === 'left';
+        wrapper.children = insertBefore ? [newDock, dock] : [dock, newDock];
+        wrapper.children.forEach(child => wrapper.element.appendChild(child.element));
+
+        dock.element.style.flex = CONFIG.layout.defaultFlexBasis;
+        newDock.element.style.flex = CONFIG.layout.defaultFlexBasis;
+        wrapper.updateStyles();
+    }
 }