regular-layout 0.0.1 → 0.1.0

package/src/common/remove_child.ts

@@ -9,7 +9,7 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { Layout } from "./layout_config.ts";
+import type { Layout, TabLayout } from "./layout_config.ts";
 import { EMPTY_PANEL } from "./layout_config.ts";
 
 /**
@@ -24,10 +24,20 @@ import { EMPTY_PANEL } from "./layout_config.ts";
  * Returns `EMPTY_PANEL` if the last panel is removed.
  */
 export function remove_child(panel: Layout, child: string): Layout {
-	// If this is a child panel and it matches, we can't remove ourselves
-	// The caller should handle this case
+	// If this is a child panel, handle tab removal
 	if (panel.type === "child-panel") {
-		return structuredClone(EMPTY_PANEL);
+		if (panel.child.includes(child)) {
+			const newChild = panel.child.filter((c) => c !== child);
+			if (newChild.length === 0) {
+				return structuredClone(EMPTY_PANEL);
+			}
+			return {
+				type: "child-panel",
+				child: newChild,
+			};
+		}
+
+		return structuredClone(panel);
 	}
 
 	// Clone the panel structure
@@ -36,23 +46,36 @@ export function remove_child(panel: Layout, child: string): Layout {
 	// Try to remove the child from this split panel's children
 	const index = result.children.findIndex((p) => {
 		if (p.type === "child-panel") {
-			return p.child === child;
+			return p.child.includes(child);
 		}
+
 		return false;
 	});
 
 	if (index !== -1) {
-		// Found the child at this level - remove it
-		const newChildren = result.children.filter((_, i) => i !== index);
-		const newSizes = remove_and_redistribute(result.sizes, index);
+		const tab_layout = result.children[index] as TabLayout;
+		if (tab_layout.child.length === 1) {
+			// Found the child at this level - remove it
+			const newChildren = result.children.filter((_, i) => i !== index);
+			const newSizes = remove_and_redistribute(result.sizes, index);
+
+			// If only one child remains, collapse the split panel
+			if (newChildren.length === 1) {
+				return newChildren[0];
+			}
 
-		// If only one child remains, collapse the split panel
-		if (newChildren.length === 1) {
-			return newChildren[0];
+			result.children = newChildren;
+			result.sizes = newSizes;
+		} else {
+			tab_layout.child.splice(tab_layout.child.indexOf(child), 1);
+			if (
+				tab_layout.selected &&
+				tab_layout.selected >= tab_layout.child.length
+			) {
+				tab_layout.selected--;
+			}
 		}
 
-		result.children = newChildren;
-		result.sizes = newSizes;
 		return result;
 	}
 
@@ -64,8 +87,10 @@ export function remove_child(panel: Layout, child: string): Layout {
 			if (updated !== p) {
 				modified = true;
 			}
+
 			return updated;
 		}
+
 		return p;
 	});
 

package/src/extensions.ts

@@ -11,10 +11,10 @@
 
 import { RegularLayout } from "./regular-layout.ts";
 import { RegularLayoutFrame } from "./regular-layout-frame.ts";
-
-customElements.define("regular-layout-frame", RegularLayoutFrame);
+import type { Layout } from "./common/layout_config.ts";
 
 customElements.define("regular-layout", RegularLayout);
+customElements.define("regular-layout-frame", RegularLayoutFrame);
 
 declare global {
 	interface Document {
@@ -37,4 +37,32 @@ declare global {
 		get(tagName: "regular-layout"): typeof RegularLayout;
 		get(tagName: "regular-layout-frame"): typeof RegularLayoutFrame;
 	}
+
+	interface HTMLElement {
+		addEventListener(
+			name: "regular-layout-update",
+			cb: (e: RegularLayoutEvent) => void,
+			options?: { signal: AbortSignal },
+		): void;
+
+		addEventListener(
+			name: "regular-layout-before-update",
+			cb: (e: RegularLayoutEvent) => void,
+			options?: { signal: AbortSignal },
+		): void;
+
+		removeEventListener(
+			name: "regular-layout-update",
+			cb: (e: RegularLayoutEvent) => void,
+		): void;
+
+		removeEventListener(
+			name: "regular-layout-before-update",
+			cb: (e: RegularLayoutEvent) => void,
+		): void;
+	}
+}
+
+export interface RegularLayoutEvent extends CustomEvent {
+	detail: Layout;
 }

package/src/regular-layout-frame.ts

@@ -9,17 +9,21 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { LayoutPath } from "./common/layout_config.ts";
+import { MIN_DRAG_DISTANCE, OVERLAY_CLASSNAME } from "./common/constants.ts";
+import type { LayoutPath, TabLayout } from "./common/layout_config.ts";
+import type { RegularLayoutEvent } from "./extensions.ts";
 import type { RegularLayout } from "./regular-layout.ts";
 
-const CSS = `
+const CSS = (className: string) => `
 :host{--titlebar--height:24px;box-sizing:border-box}
-:host([slot]){margin-top:calc(var(--titlebar--height) + 3px)!important;}
-:host([slot])::part(container){position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;background-color:inherit;border-radius:inherit}
-:host([slot])::part(titlebar){height:var(--titlebar--height);margin-top:calc(-2px - var(--titlebar--height));user-select: none;}
-:host([slot])::part(body){flex:1 1 auto;}
+:host(:not(.${className})){margin-top:calc(var(--titlebar--height) + 3px)!important;}
+:host(:not(.${className}))::part(container){position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;background-color:inherit;border-radius:inherit}
+:host(:not(.${className}))::part(titlebar){height:var(--titlebar--height);margin-top:calc(0px - var(--titlebar--height));user-select: none;}
+:host(:not(.${className}))::part(body){flex:1 1 auto;}
 `;
 
+const HTML_TEMPLATE = `<slot part="container"><slot part="titlebar"></slot><slot part="body"><slot></slot></slot></slot>`;
+
 /**
  * A custom element that represents a draggable panel within a
  * `<regular-layout>`.
@@ -51,64 +55,183 @@ export class RegularLayoutFrame extends HTMLElement {
 	private _layout!: RegularLayout;
 	private _header!: HTMLElement;
 	private _drag_state: LayoutPath<DOMRect> | null = null;
+	private _drag_moved: boolean = false;
+	private _tab_to_index_map: WeakMap<HTMLDivElement, number> = new WeakMap();
+	private _tab_panel_state: TabLayout | null = null;
 	constructor() {
 		super();
 		this._container_sheet = new CSSStyleSheet();
-		this._container_sheet.replaceSync(CSS);
+		this._container_sheet.replaceSync(CSS(OVERLAY_CLASSNAME));
 		this._shadowRoot = this.attachShadow({ mode: "open" });
 		this._shadowRoot.adoptedStyleSheets = [this._container_sheet];
-		this._shadowRoot.innerHTML = `<slot part="container"><slot part="titlebar">header</slot><slot part="body"><slot></slot></slot></slot>`;
-		this._layout = this.parentElement as RegularLayout;
-		this._header = this._shadowRoot.children[0].children[0] as HTMLElement;
 	}
 
 	connectedCallback() {
+		this._shadowRoot.innerHTML = HTML_TEMPLATE;
+		this._layout = this.parentElement as RegularLayout;
+		this._header = this._shadowRoot.children[0].children[0] as HTMLElement;
 		this._header.addEventListener("pointerdown", this.onPointerDown);
 		this._header.addEventListener("pointermove", this.onPointerMove);
 		this._header.addEventListener("pointerup", this.onPointerUp);
+		this._header.addEventListener("lostpointercapture", this.onPointerLost);
+		this._layout.addEventListener("regular-layout-update", this.drawTabs);
+		this._layout.addEventListener(
+			"regular-layout-before-update",
+			this.drawTabs,
+		);
 	}
 
 	disconnectedCallback() {
 		this._header.removeEventListener("pointerdown", this.onPointerDown);
 		this._header.removeEventListener("pointermove", this.onPointerMove);
 		this._header.removeEventListener("pointerup", this.onPointerUp);
+		this._header.removeEventListener("lostpointercapture", this.onPointerLost);
+		this._layout.removeEventListener("regular-layout-update", this.drawTabs);
+		this._layout.removeEventListener(
+			"regular-layout-before-update",
+			this.drawTabs,
+		);
 	}
 
 	private onPointerDown = (event: PointerEvent): void => {
-		this._drag_state = this._layout.calculateIntersect(
-			event.clientX,
-			event.clientY,
-		);
+		const elem = event.target as HTMLDivElement;
+		if (elem.part.contains("tab")) {
+			this._drag_state = this._layout.calculateIntersect(
+				event.clientX,
+				event.clientY,
+			);
 
-		if (!this._drag_state) {
-			return;
+			if (this._drag_state) {
+				this._header.setPointerCapture(event.pointerId);
+				event.preventDefault();
+				const last_index = this._drag_state.path.length - 1;
+				const selected = this._tab_to_index_map.get(elem);
+				if (selected) {
+					this._drag_state.path[last_index] = selected;
+				}
+			}
 		}
-
-		this._header.setPointerCapture(event.pointerId);
-		event.preventDefault();
-		event.stopImmediatePropagation();
 	};
 
 	private onPointerMove = (event: PointerEvent): void => {
 		if (this._drag_state) {
+			// Only initiate a drag if the cursor has moved sufficiently.
+			if (!this._drag_moved) {
+				const [current_col, current_row, box] =
+					this._layout.relativeCoordinates(event.clientX, event.clientY);
+
+				const dx = (current_col - this._drag_state.column) * box.width;
+				const dy = (current_row - this._drag_state.row) * box.height;
+				if (Math.sqrt(dx * dx + dy * dy) <= MIN_DRAG_DISTANCE) {
+					return;
+				}
+			}
+
+			this._drag_moved = true;
 			this._layout.setOverlayState(
 				event.clientX,
 				event.clientY,
 				this._drag_state,
+				OVERLAY_CLASSNAME,
 			);
 		}
 	};
 
 	private onPointerUp = (event: PointerEvent): void => {
-		if (this._drag_state) {
+		if (this._drag_state && this._drag_moved) {
 			this._layout.clearOverlayState(
 				event.clientX,
 				event.clientY,
 				this._drag_state,
+				OVERLAY_CLASSNAME,
 			);
+		}
+
+		// TODO This may be handled by `onPointerLost`, not sure if this is
+		// browser-specific behavior ...
+		this._header.releasePointerCapture(event.pointerId);
+		this._drag_state = null;
+		this._drag_moved = false;
+	};
+
+	private onPointerLost = (event: PointerEvent): void => {
+		if (this._drag_state) {
+			this._layout.clearOverlayState(-1, -1, this._drag_state);
+		}
+
+		this._header.releasePointerCapture(event.pointerId);
+		this._drag_state = null;
+		this._drag_moved = false;
+	};
+
+	private drawTabs = (event: RegularLayoutEvent) => {
+		const slot = this.assignedSlot;
+		if (!slot) {
+			return;
+		}
+
+		const new_panel = event.detail;
+		const new_tab_panel = this._layout.getPanel(slot.name, new_panel);
+		if (!new_tab_panel) {
+			return;
+		}
+
+		for (let i = 0; i < new_tab_panel.child.length; i++) {
+			if (i >= this._header.children.length) {
+				const new_tab = this.createTab(new_tab_panel, i);
+				this._header.appendChild(new_tab);
+			} else {
+				const tab_changed =
+					(i === new_tab_panel.selected) !==
+					(i === this._tab_panel_state?.selected);
+
+				const tab = this._header.children[i] as HTMLDivElement;
+				const index_changed =
+					tab_changed ||
+					this._tab_panel_state?.child[i] !== new_tab_panel.child[i];
+
+				if (index_changed) {
+					const new_tab = this.createTab(new_tab_panel, i);
+					this._header.replaceChild(new_tab, tab);
+				}
+			}
+		}
+
+		const last_index = new_tab_panel.child.length;
+		for (let j = this._header.children.length - 1; j >= last_index; j--) {
+			this._header.removeChild(this._header.children[j]);
+		}
+
+		this._tab_panel_state = new_tab_panel;
+	};
+
+	private createTab = (tab_panel: TabLayout, index: number): HTMLDivElement => {
+		const selected = tab_panel.selected || 0;
+		const tab = document.createElement("div");
+		this._tab_to_index_map.set(tab, index);
+		tab.textContent = tab_panel.child[index] || "";
+		if (index === selected) {
+			tab.setAttribute("part", "tab active-tab");
+		} else {
+			tab.setAttribute("part", "tab");
+			tab.addEventListener("pointerdown", (_) =>
+				this.onTabClick(tab_panel, index),
+			);
+		}
+
+		return tab;
+	};
+
+	private onTabClick = (tab_panel: TabLayout, index: number) => {
+		const new_layout = this._layout.save();
+		const new_tab_panel = this._layout.getPanel(
+			tab_panel.child[index],
+			new_layout,
+		);
 
-			this._header.releasePointerCapture(event.pointerId);
-			this._drag_state = null;
+		if (new_tab_panel) {
+			new_tab_panel.selected = index;
+			this._layout.restore(new_layout);
 		}
 	};
 }