split-dock 1.0.0

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "split-dock",
+  "version": "1.0.0",
+  "description": "A lightweight, flexible docking framework for building split-view layouts with drag-and-drop panel management",
+  "main": "src/index.js",
+  "type": "module",
+  "files": [
+    "src/**/*",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "dock",
+    "docking",
+    "split-view",
+    "layout",
+    "drag-and-drop",
+    "panels",
+    "resizable",
+    "tabs",
+    "ui",
+    "framework"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Emaneliforp/split-dock.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Emaneliforp/split-dock/issues"
+  },
+  "homepage": "https://github.com/Emaneliforp/split-dock#readme",
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}

package/src/dock.js

@@ -0,0 +1,156 @@
+import { Panel } from './panel.js';
+import { DropHandler } from './handles/drop-handler.js';
+import { generateId } from './index.js';
+
+// Dock class - contains panels
+export class Dock {
+    constructor(element, parentFrame) {
+        this.id = generateId();
+        this.parentFrame = parentFrame;
+        this.splitDock = parentFrame?.splitDock || null;
+        this.panels = [];
+        this.activePanel = null;
+        this.eventListeners = [];
+        
+        this.element = element || document.createElement('div');
+        this.initializeElements();
+        
+        this.dropHandler = new DropHandler(this);
+        
+        this.setupEventListeners();
+    }
+
+    initializeElements() {
+        const hasExistingDock = this.element.classList.contains('sd-dock');
+        
+        if (!hasExistingDock) {
+            this.element.className = 'sd-dock';
+        }
+        
+        this.findOrCreateSubElements();
+        
+        if (hasExistingDock) {
+            this.loadPanelsFromHTML();
+        }
+    }
+
+    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;
+    }
+
+    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);
+        });
+    }
+
+    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 });
+    }
+
+    addPanel(panel) {
+        panel.dock = this;
+        this.panels.push(panel);
+        this.navbar.appendChild(panel.titleElement);
+        this.content.appendChild(panel.contentElement);
+
+        if (this.panels.length === 1) {
+            this.setActivePanel(panel);
+        }
+
+        return panel;
+    }
+
+    acceptPanel(panel, fromDock) {
+        fromDock.removePanel(panel, true);
+        this.addPanel(panel);
+        this.setActivePanel(panel);
+    }
+
+    removePanel(panel, skipCheck = false) {
+        const index = this.panels.indexOf(panel);
+        if (index === -1) return;
+
+        this.panels.splice(index, 1);
+
+        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]);
+            }
+        }
+
+        // If dock is empty and has parent, remove it
+        if (this.panels.length === 0 && this.parentFrame) {
+            this.parentFrame.removeChild(this);
+        }
+    }
+
+    setActivePanel(panel) {
+        this.panels.forEach(p => p.deactivate());
+        panel.activate();
+        this.activePanel = panel;
+    }
+
+    remove() {
+        this.destroy();
+        this.element.remove();
+    }
+
+    destroy() {
+        // Remove all event listeners
+        this.eventListeners.forEach(({ event, handler }) => {
+            this.element.removeEventListener(event, handler);
+        });
+        this.eventListeners = [];
+
+        // Destroy all panels
+        this.panels.forEach(panel => panel.destroy());
+        this.panels = [];
+        
+        // Clear references
+        this.activePanel = null;
+        this.parentFrame = null;
+        this.splitDock = null;
+        this.dropHandler = null;
+    }
+}

package/src/frame.js

@@ -0,0 +1,189 @@
+import { Dock } from './dock.js';
+import { FrameAdjustHandler } from './handles/frame-adjust-handler.js';
+import { generateId } 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'
+        
+        if (element) {
+            this.loadChildrenFromHTML();
+        } else {
+            this.createElements();
+        }
+        
+        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'));
+        
+        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);
+            });
+        }
+    }
+
+    addChild(child) {
+        if (child instanceof Dock) {
+            child.parentFrame = this;
+            child.splitDock = this.splitDock;
+        } else if (child instanceof Frame) {
+            child.parentFrame = this;
+        }
+        
+        this.children.push(child);
+        this.element.appendChild(child.element);
+        
+        // Update styles after adding a child
+        this.updateStyles();
+        
+        return child;
+    }
+
+    removeChild(child) {
+        const index = this.children.indexOf(child);
+        if (index === -1) return;
+
+        child.remove();
+        this.children.splice(index, 1);
+
+        // 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 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
+                this.element.remove();
+            }
+        }
+        
+        // Update styles after removing a child
+        this.updateStyles();
+    }
+
+    remove() {
+        this.destroy();
+        this.element.remove();
+    }
+
+    destroy() {
+        // Destroy all children
+        this.children.forEach(child => {
+            if (child instanceof Dock || child instanceof Frame) {
+                child.destroy();
+            }
+        });
+        this.children = [];
+
+        // Cleanup adjust handler
+        if (this.adjustHandler) {
+            this.adjustHandler.destroy();
+            this.adjustHandler = null;
+        }
+
+        // Clear references
+        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);
+        } else {
+            this.element.classList.remove('horizontal', 'vertical');
+        }
+
+        // Update resize handles
+        this.adjustHandler.setupResizeHandles();
+    }
+
+
+}

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

@@ -0,0 +1,187 @@
+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();
+    }
+}