regular-layout 0.0.2 → 0.2.0

package/src/regular-layout-frame.ts

@@ -9,19 +9,26 @@
 // ┃  *  [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 "./layout/constants.ts";
+import type { Layout, LayoutPath } from "./layout/types.ts";
 import type { RegularLayoutEvent } from "./extensions.ts";
 import type { RegularLayout } from "./regular-layout.ts";
+import type { RegularLayoutTab } from "./regular-layout-tab.ts";
 
 const CSS = `
-: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(0px - var(--titlebar--height));user-select: none;}
-:host([slot])::part(body){flex:1 1 auto;}
+:host{box-sizing:border-box;flex-direction:column}
+:host::part(titlebar){display:flex;height:24px;user-select:none;overflow:hidden}
+:host::part(container){flex:1 1 auto}
+:host::part(title){flex:1 1 auto;pointer-events:none}
+:host::part(close){align-self:stretch}
+:host::slotted{flex:1 1 auto;}
+:host regular-layout-tab{width:0px;}
 `;
 
-const HTML_TEMPLATE = `<slot part="container"><slot part="titlebar"></slot><slot part="body"><slot></slot></slot></slot>`;
+const HTML_TEMPLATE = `
+	<div part="titlebar"></div>
+	<slot part="container"></slot>
+`;
 
 /**
  * A custom element that represents a draggable panel within a
@@ -42,7 +49,7 @@ const HTML_TEMPLATE = `<slot part="container"><slot part="titlebar"></slot><slot
  * @example
  * ```html
  * <regular-layout>
- *     <regular-layout-frame slot="panel-1">
+ *     <regular-layout-frame name="panel-1">
  *         <!-- Panel content here -->
  *     </regular-layout-frame>
  * </regular-layout>
@@ -53,31 +60,30 @@ export class RegularLayoutFrame extends HTMLElement {
 	private _container_sheet: CSSStyleSheet;
 	private _layout!: RegularLayout;
 	private _header!: HTMLElement;
-	private _drag_state: LayoutPath<DOMRect> | null = null;
+	private _drag_state: LayoutPath<Layout> | null = null;
 	private _drag_moved: boolean = false;
-	private _tab_to_index_map: WeakMap<HTMLDivElement, number> = new WeakMap();
+	private _tab_to_index_map: WeakMap<RegularLayoutTab, number> = new WeakMap();
 	constructor() {
 		super();
 		this._container_sheet = new CSSStyleSheet();
 		this._container_sheet.replaceSync(CSS);
 		this._shadowRoot = this.attachShadow({ mode: "open" });
 		this._shadowRoot.adoptedStyleSheets = [this._container_sheet];
-		this.drawTabs = this.drawTabs.bind(this);
-		this.onPointerDown = this.onPointerDown.bind(this);
-		this.onPointerMove = this.onPointerMove.bind(this);
-		this.onPointerUp = this.onPointerUp.bind(this);
-		this.onPointerLost = this.onPointerLost.bind(this);
 	}
 
 	connectedCallback() {
 		this._shadowRoot.innerHTML = HTML_TEMPLATE;
 		this._layout = this.parentElement as RegularLayout;
-		this._header = this._shadowRoot.children[0].children[0] as HTMLElement;
+		this._header = this._shadowRoot.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() {
@@ -86,73 +92,47 @@ export class RegularLayoutFrame extends HTMLElement {
 		this._header.removeEventListener("pointerup", this.onPointerUp);
 		this._header.removeEventListener("lostpointercapture", this.onPointerLost);
 		this._layout.removeEventListener("regular-layout-update", this.drawTabs);
-	}
-
-	private drawTabs(event: RegularLayoutEvent) {
-		const slot = this.getAttribute("slot");
-		if (slot) {
-			const result = this._layout.getPanel(slot, event.detail);
-			this._header.textContent = "";
-			if (!result) {
-				return;
-			}
-
-			for (let e = 0; e < (result?.child?.length || 0); e++) {
-				const elem = result?.child[e];
-				const div = document.createElement("div");
-				this._tab_to_index_map.set(div, e);
-				// div.dataset.index = `${e}`;
-				div.textContent = elem || "";
-				div.setAttribute(
-					"part",
-					e === (result?.selected || 0) ? "tab active-tab" : "tab",
-				);
-
-				const x = e;
-				if (e !== (result?.selected || 0)) {
-					div.addEventListener("pointerdown", (pointerEvent: PointerEvent) => {
-						result.selected = x;
-						this._layout.restore(event.detail);
-						pointerEvent.preventDefault();
-						pointerEvent.stopImmediatePropagation();
-						pointerEvent.stopPropagation();
-					});
-				}
-
-				this._header.appendChild(div);
-			}
-		}
+		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 RegularLayoutTab;
+		if (elem.part.contains("tab")) {
+			this._drag_state = this._layout.calculateIntersect(
+				event.clientX,
+				event.clientY,
+			);
 
-		if (this._drag_state) {
-			const elem = event.target as HTMLDivElement;
-			if (elem.part.contains("tab")) {
-				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;
-				}
+			if (this._drag_state) {
+				this._header.setPointerCapture(event.pointerId);
+				event.preventDefault();
 			}
-
-			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,
 			);
 		}
 	};
@@ -163,6 +143,7 @@ export class RegularLayoutFrame extends HTMLElement {
 				event.clientX,
 				event.clientY,
 				this._drag_state,
+				OVERLAY_CLASSNAME,
 			);
 		}
 
@@ -182,4 +163,38 @@ export class RegularLayoutFrame extends HTMLElement {
 		this._drag_state = null;
 		this._drag_moved = false;
 	};
+
+	private drawTabs = (event: RegularLayoutEvent) => {
+		const slot = this.getAttribute("name");
+		if (!slot) {
+			return;
+		}
+
+		const new_panel = event.detail;
+		let new_tab_panel = this._layout.getPanel(slot, new_panel);
+		if (!new_tab_panel) {
+			new_tab_panel = {
+				type: "child-panel",
+				child: [slot],
+				selected: 0,
+			};
+		}
+
+		for (let i = 0; i < new_tab_panel.child.length; i++) {
+			if (i >= this._header.children.length) {
+				const new_tab = document.createElement("regular-layout-tab");
+				new_tab.populate(this._layout, new_tab_panel, i);
+				this._header.appendChild(new_tab);
+				this._tab_to_index_map.set(new_tab, i);
+			} else {
+				const tab = this._header.children[i] as RegularLayoutTab;
+				tab.populate(this._layout, new_tab_panel, i);
+			}
+		}
+
+		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]);
+		}
+	};
 }

package/src/regular-layout-tab.ts

@@ -0,0 +1,103 @@
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
+// ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
+// ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃  *  Copyright (c) 2026, the Regular Layout Authors. This file is part  *  ┃
+// ┃  *  of the Regular Layout library, distributed under the terms of the  *  ┃
+// ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import type { TabLayout } from "./layout/types.ts";
+import type { RegularLayout } from "./regular-layout.ts";
+
+/**
+ * A custom HTML element representing an individual tab in a tab panel.
+ *
+ * This element manages the visual representation and interactions for a single tab,
+ * including selection state, close functionality, and content display.
+ */
+export class RegularLayoutTab extends HTMLElement {
+	private _layout?: RegularLayout;
+	private _tab_panel?: TabLayout;
+	private _index?: number;
+
+	/**
+	 * Populates or updates the tab with layout information.
+	 *
+	 * This method initializes the tab's content and event listeners on first call,
+	 * and efficiently updates only the changed properties on subsequent calls.
+	 *
+	 * @param layout - The parent RegularLayout instance managing this tab.
+	 * @param tab_panel - The tab panel layout containing this tab.
+	 * @param index - The index of this tab within the tab panel.
+	 */
+	populate = (layout: RegularLayout, tab_panel: TabLayout, index: number) => {
+		if (this._tab_panel) {
+			const tab_changed =
+				(index === tab_panel.selected) !==
+				(index === this._tab_panel?.selected);
+
+			const index_changed =
+				tab_changed || this._tab_panel?.child[index] !== tab_panel.child[index];
+
+			if (index_changed) {
+				const selected = tab_panel.selected === index;
+				const slot = tab_panel.child[index];
+				this.children[0].textContent = slot;
+
+				if (selected) {
+					this.children[1].part.add("active-close");
+					this.part.add("active-tab");
+				} else {
+					this.children[1].part.remove("active-close");
+					this.part.remove("active-tab");
+				}
+			}
+		} else {
+			const slot = tab_panel.child[index];
+			const selected = tab_panel.selected === index;
+			const parts = selected ? "active-close close" : "close";
+			this.innerHTML = `<div part="title"></div><button part="${parts}"></button>`;
+			if (selected) {
+				this.part.add("tab", "active-tab");
+			} else {
+				this.part.add("tab");
+			}
+
+			this.addEventListener("pointerdown", this.onTabClick);
+			this.children[0].textContent = slot;
+			this.children[1].addEventListener("pointerdown", this.onTabClose);
+		}
+
+		this._tab_panel = tab_panel;
+		this._layout = layout;
+		this._index = index;
+	};
+
+	private onTabClose = (_: Event) => {
+		if (this._tab_panel !== undefined && this._index !== undefined) {
+			this._layout?.removePanel(this._tab_panel.child[this._index]);
+		}
+	};
+
+	private onTabClick = (_: PointerEvent) => {
+		if (
+			this._tab_panel !== undefined &&
+			this._index !== undefined &&
+			this._index !== this._tab_panel.selected
+		) {
+			const new_layout = this._layout?.save();
+			const new_tab_panel = this._layout?.getPanel(
+				this._tab_panel.child[this._index],
+				new_layout,
+			);
+
+			if (new_tab_panel && new_layout) {
+				new_tab_panel.selected = this._index;
+				this._layout?.restore(new_layout);
+			}
+		}
+	};
+}