regular-layout 0.0.2 → 0.1.0

package/src/regular-layout-frame.ts

@@ -9,16 +9,17 @@
 // ┃  *  [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(0px - 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>`;
@@ -56,17 +57,13 @@ export class RegularLayoutFrame extends 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.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() {
@@ -78,6 +75,10 @@ export class RegularLayoutFrame extends HTMLElement {
 		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 +87,52 @@ 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 HTMLDivElement;
+		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")) {
+			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,
 			);
 		}
 	};
@@ -163,6 +143,7 @@ export class RegularLayoutFrame extends HTMLElement {
 				event.clientX,
 				event.clientY,
 				this._drag_state,
+				OVERLAY_CLASSNAME,
 			);
 		}
 
@@ -182,4 +163,75 @@ export class RegularLayoutFrame extends HTMLElement {
 		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,
+		);
+
+		if (new_tab_panel) {
+			new_tab_panel.selected = index;
+			this._layout.restore(new_layout);
+		}
+	};
 }

package/src/regular-layout.ts

@@ -16,25 +16,23 @@
  * @packageDocumentation
  */
 
-import {
-	EMPTY_PANEL,
-	iter_panel_children,
-	OVERLAY_DEFAULT,
-} from "./common/layout_config.ts";
+import { EMPTY_PANEL, iter_panel_children } from "./common/layout_config.ts";
 import { create_css_grid_layout } from "./common/generate_grid.ts";
 import type {
 	LayoutPath,
 	Layout,
 	LayoutDivider,
 	TabLayout,
+	OverlayMode,
 } from "./common/layout_config.ts";
 import { calculate_intersection } from "./common/calculate_intersect.ts";
 import { remove_child } from "./common/remove_child.ts";
 import { insert_child } from "./common/insert_child.ts";
 import { redistribute_panel_sizes } from "./common/redistribute_panel_sizes.ts";
 import { updateOverlaySheet } from "./common/generate_overlay.ts";
-import { calculate_split } from "./common/calculate_split.ts";
+import { calculate_edge } from "./common/calculate_edge.ts";
 import { flatten } from "./common/flatten.ts";
+import { OVERLAY_CLASSNAME, OVERLAY_DEFAULT } from "./common/constants.ts";
 
 /**
  * A Web Component that provides a resizable panel layout system.
@@ -86,9 +84,6 @@ export class RegularLayout extends HTMLElement {
 		this._shadowRoot.adoptedStyleSheets = [this._stylesheet];
 		this._shadowRoot.appendChild(this._unslotted_slot);
 		this._slots = new Map();
-		this.onPointerDown = this.onPointerDown.bind(this);
-		this.onPointerMove = this.onPointerMove.bind(this);
-		this.onPointerUp = this.onPointerUp.bind(this);
 	}
 
 	connectedCallback() {
@@ -109,77 +104,85 @@ export class RegularLayout extends HTMLElement {
 	 *
 	 * @param x - X coordinate in screen pixels.
 	 * @param y - Y coordinate in screen pixels.
-	 * @param layoutPath - Layout path containing the slot identifier.
-	 * @param mode - Overlay rendering mode: "grid" highlights the target,
-	 *   "absolute" positions the panel absolutely, "interactive" updates the
-	 *   actual layout in real-time. Defaults to "absolute".
+	 * @param dragTarget - A `LayoutPath` (presumably from `calculateIntersect`)
+	 *     which points to the drag element in the current layout.
+	 * @param className - The CSS class name to use for the overlay panel
+	 *     (defaults to "overlay").
+	 * @param mode - Overlay rendering mode: "grid" uses CSS grid to position
+	 *     the target, "absolute" positions the panel absolutely. Defaults to
+	 *     "absolute".
 	 */
-	setOverlayState<T>(
+	setOverlayState = (
 		x: number,
 		y: number,
-		{ slot }: LayoutPath<T>,
-		mode: "grid" | "absolute" | "interactive" = OVERLAY_DEFAULT,
-	) {
+		{ slot }: LayoutPath<unknown>,
+		className: string = OVERLAY_CLASSNAME,
+		mode: OverlayMode = OVERLAY_DEFAULT,
+	) => {
 		let panel = this._panel;
 		if (mode === "absolute") {
 			panel = remove_child(panel, slot);
-			this._slots.get(slot)?.assignedElements()[0]?.removeAttribute("slot");
+			this.updateSlots(panel, slot);
+			this._slots.get(slot)?.assignedElements()[0]?.classList.add(className);
 		}
 
 		const [col, row, box] = this.relativeCoordinates(x, y);
 		let drop_target = calculate_intersection(col, row, panel, false);
 		if (drop_target) {
-			drop_target = calculate_split(col, row, panel, slot, drop_target);
-			if (mode === "interactive") {
-				let new_panel = remove_child(this._panel, slot);
-				new_panel = flatten(insert_child(new_panel, slot, drop_target.path));
-				const css = create_css_grid_layout(new_panel);
-				this._stylesheet.replaceSync(css);
-			} else if (mode === "grid") {
+			drop_target = calculate_edge(col, row, panel, slot, drop_target);
+			if (mode === "grid") {
 				const path: [string, string] = [slot, drop_target.slot];
 				const css = create_css_grid_layout(this._panel, false, path);
 				this._stylesheet.replaceSync(css);
 			} else if (mode === "absolute") {
-				const css = `${create_css_grid_layout(panel)}\n${updateOverlaySheet({ ...drop_target, box })}`;
-				this._stylesheet.replaceSync(css);
+				const grid_css = create_css_grid_layout(panel);
+				const overlay_css = updateOverlaySheet(slot, { ...drop_target, box });
+				this._stylesheet.replaceSync([grid_css, overlay_css].join("\n"));
 			}
 		} else {
 			const css = `${create_css_grid_layout(panel)}}`;
 			this._stylesheet.replaceSync(css);
 		}
 
-		const event = new CustomEvent("regular-layout-update", { detail: panel });
+		const event = new CustomEvent("regular-layout-before-update", {
+			detail: panel,
+		});
+
 		this.dispatchEvent(event);
-	}
+	};
 
 	/**
 	 * Clears the overlay state and commits the panel placement.
 	 *
 	 * @param x - X coordinate in screen pixels.
 	 * @param y - Y coordinate in screen pixels.
-	 * @param layout_path - Layout path containing the slot identifier.
+	 * @param dragTarget - A `LayoutPath` (presumably from `calculateIntersect`)
+	 *     which points to the drag element in the current layout.
+	 * @param className - The CSS class name to use for the overlay panel
+	 *     (defaults to "overlay").
 	 * @param mode - Overlay rendering mode that was used, must match the mode
-	 *   passed to `setOverlayState`. Defaults to "absolute".
+	 *     passed to `setOverlayState`. Defaults to "absolute".
 	 */
-	clearOverlayState<T>(
+	clearOverlayState = (
 		x: number,
 		y: number,
-		drag_target: LayoutPath<T>,
-		mode: "grid" | "absolute" | "interactive" = OVERLAY_DEFAULT,
-	) {
+		drag_target: LayoutPath<unknown>,
+		className: string = OVERLAY_CLASSNAME,
+		mode: OverlayMode = OVERLAY_DEFAULT,
+	) => {
 		let panel = this._panel;
 		if (mode === "absolute") {
 			panel = remove_child(panel, drag_target.slot);
-			this._unslotted_slot
-				.assignedElements()[0]
-				?.setAttribute("slot", drag_target.slot);
+			this._slots
+				.get(drag_target.slot)
+				?.assignedElements()[0]
+				?.classList.remove(className);
 		}
 
 		const [col, row, _] = this.relativeCoordinates(x, y);
 		let drop_target = calculate_intersection(col, row, panel, false);
 		if (drop_target) {
-			// TODO I think I only need the new path here?
-			drop_target = calculate_split(
+			drop_target = calculate_edge(
 				col,
 				row,
 				panel,
@@ -189,7 +192,6 @@ export class RegularLayout extends HTMLElement {
 		}
 
 		const { path, orientation } = drop_target ? drop_target : drag_target;
-
 		this.restore(
 			insert_child(
 				panel,
@@ -199,7 +201,7 @@ export class RegularLayout extends HTMLElement {
 				!drop_target?.is_edge,
 			),
 		);
-	}
+	};
 
 	/**
 	 * Inserts a new panel into the layout at a specified path.
@@ -207,20 +209,27 @@ export class RegularLayout extends HTMLElement {
 	 * @param name - Unique identifier for the new panel.
 	 * @param path - Index path defining where to insert.
 	 */
-	insertPanel(name: string, path: number[] = []) {
+	insertPanel = (name: string, path: number[] = []) => {
 		this.restore(insert_child(this._panel, name, path));
-	}
+	};
 
 	/**
 	 * Removes a panel from the layout by name.
 	 *
 	 * @param name - Name of the panel to remove
 	 */
-	removePanel(name: string) {
+	removePanel = (name: string) => {
 		this.restore(remove_child(this._panel, name));
-	}
+	};
 
-	getPanel(name: string, layout: Layout = this._panel): TabLayout | null {
+	/**
+	 * Retrieves a panel by name from the layout tree.
+	 *
+	 * @param name - Name of the panel to find.
+	 * @param layout - Optional layout tree to search in (defaults to current layout).
+	 * @returns The TabLayout containing the panel if found, null otherwise.
+	 */
+	getPanel = (name: string, layout: Layout = this._panel): TabLayout | null => {
 		if (layout.type === "child-panel") {
 			if (layout.child.includes(name)) {
 				return layout;
@@ -236,21 +245,20 @@ export class RegularLayout extends HTMLElement {
 		}
 
 		return null;
-	}
+	};
 
 	/**
 	 * Determines which panel is at a given screen coordinate.
-	 * Useful for drag-and-drop operations or custom interactions.
 	 *
 	 * @param column - X coordinate in screen pixels.
 	 * @param row - Y coordinate in screen pixels.
 	 * @returns Panel information if a panel is at that position, null otherwise.
 	 */
-	calculateIntersect(
+	calculateIntersect = (
 		x: number,
 		y: number,
 		check_dividers: boolean = false,
-	): LayoutPath<DOMRect> | null {
+	): LayoutPath<DOMRect> | null => {
 		const [col, row, box] = this.relativeCoordinates(x, y);
 		const panel = calculate_intersection(col, row, this._panel, check_dividers);
 		if (panel?.type === "layout-path") {
@@ -258,11 +266,14 @@ export class RegularLayout extends HTMLElement {
 		}
 
 		return null;
-	}
+	};
 
-	clear() {
+	/**
+	 * Clears the entire layout, unslotting all panels.
+	 */
+	clear = () => {
 		this.restore(EMPTY_PANEL);
-	}
+	};
 
 	/**
 	 * Restores the layout from a saved state.
@@ -276,32 +287,17 @@ export class RegularLayout extends HTMLElement {
 	 * layout.restore(savedState);
 	 * ```
 	 */
-	restore(layout: Layout, _is_flattened: boolean = false) {
+	restore = (layout: Layout, _is_flattened: boolean = false) => {
 		this._panel = !_is_flattened ? flatten(layout) : layout;
-		const css = create_css_grid_layout(layout);
+		const css = create_css_grid_layout(this._panel);
 		this._stylesheet.replaceSync(css);
-		const old = new Set(this._slots.keys());
-		for (const name of iter_panel_children(layout)) {
-			old.delete(name);
-			if (!this._slots.has(name)) {
-				const slot = document.createElement("slot");
-				slot.setAttribute("name", name);
-				this._shadowRoot.appendChild(slot);
-				this._slots.set(name, slot);
-			}
-		}
-
-		for (const key of old) {
-			const child = this._slots.get(key);
-			if (child) {
-				this._shadowRoot.removeChild(child);
-				this._slots.delete(key);
-			}
-		}
+		this.updateSlots(this._panel);
+		const event = new CustomEvent("regular-layout-update", {
+			detail: this._panel,
+		});
 
-		const event = new CustomEvent("regular-layout-update", { detail: layout });
 		this.dispatchEvent(event);
-	}
+	};
 
 	/**
 	 * Serializes the current layout state, which can be restored via `restore`.
@@ -315,34 +311,71 @@ export class RegularLayout extends HTMLElement {
 	 * localStorage.setItem('layout', JSON.stringify(state));
 	 * ```
 	 */
-	save(): Layout {
+	save = (): Layout => {
 		return structuredClone(this._panel);
-	}
+	};
 
-	private relativeCoordinates(
+	/**
+	 * Converts screen coordinates to relative layout coordinates.
+	 *
+	 * Transforms absolute pixel positions into normalized coordinates (0-1 range)
+	 * relative to the layout's bounding box.
+	 *
+	 * @param clientX - X coordinate in screen pixels (client space).
+	 * @param clientY - Y coordinate in screen pixels (client space).
+	 * @returns A tuple containing:
+	 *   - col: Normalized X coordinate (0 = left edge, 1 = right edge)
+	 *   - row: Normalized Y coordinate (0 = top edge, 1 = bottom edge)
+	 *   - box: The layout element's bounding rectangle
+	 */
+	relativeCoordinates = (
 		clientX: number,
 		clientY: number,
-	): [number, number, DOMRect] {
+	): [number, number, DOMRect] => {
 		const box = this.getBoundingClientRect();
 		const col = (clientX - box.left) / (box.right - box.left);
 		const row = (clientY - box.top) / (box.bottom - box.top);
 		return [col, row, box];
-	}
+	};
 
-	private onPointerDown(event: PointerEvent) {
+	private updateSlots = (layout: Layout, overlay?: string) => {
+		const old = new Set(this._slots.keys());
+		if (overlay) {
+			old.delete(overlay);
+		}
+
+		for (const name of iter_panel_children(layout)) {
+			old.delete(name);
+			if (!this._slots.has(name)) {
+				const slot = document.createElement("slot");
+				slot.setAttribute("name", name);
+				this._shadowRoot.appendChild(slot);
+				this._slots.set(name, slot);
+			}
+		}
+
+		for (const key of old) {
+			const child = this._slots.get(key);
+			if (child) {
+				this._shadowRoot.removeChild(child);
+				this._slots.delete(key);
+			}
+		}
+	};
+
+	private onPointerDown = (event: PointerEvent) => {
 		if (event.target === this) {
 			const [col, row] = this.relativeCoordinates(event.clientX, event.clientY);
 			const hit = calculate_intersection(col, row, this._panel);
 			if (hit && hit.type !== "layout-path") {
 				this._dragPath = [hit, col, row];
 				this.setPointerCapture(event.pointerId);
-				// event.preventDefault();
-				// event.stopImmediatePropagation();
+				event.preventDefault();
 			}
 		}
-	}
+	};
 
-	private onPointerMove(event: PointerEvent) {
+	private onPointerMove = (event: PointerEvent) => {
 		if (this._dragPath) {
 			const [col, row] = this.relativeCoordinates(event.clientX, event.clientY);
 			const old_panel = this._panel;
@@ -351,9 +384,9 @@ export class RegularLayout extends HTMLElement {
 			const panel = redistribute_panel_sizes(old_panel, path, offset);
 			this._stylesheet.replaceSync(create_css_grid_layout(panel));
 		}
-	}
+	};
 
-	private onPointerUp(event: PointerEvent) {
+	private onPointerUp = (event: PointerEvent) => {
 		if (this._dragPath) {
 			this.releasePointerCapture(event.pointerId);
 			const [col, row] = this.relativeCoordinates(event.clientX, event.clientY);
@@ -369,5 +402,5 @@ export class RegularLayout extends HTMLElement {
 
 			this._dragPath = undefined;
 		}
-	}
+	};
 }