regular-layout 0.0.1 → 0.1.0

package/src/regular-layout.ts

@@ -22,18 +22,17 @@ 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";
-
-export type OverlayMode = "grid" | "absolute" | "interactive";
-
-const OVERLAY_DEFAULT: OverlayMode = "absolute";
+import { OVERLAY_CLASSNAME, OVERLAY_DEFAULT } from "./common/constants.ts";
 
 /**
  * A Web Component that provides a resizable panel layout system.
@@ -85,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() {
@@ -108,74 +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 (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-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,
@@ -184,10 +191,17 @@ export class RegularLayout extends HTMLElement {
 			);
 		}
 
-		const { path } = drop_target ? drop_target : drag_target;
-		this.removePanel(drag_target.slot);
-		this.insertPanel(drag_target.slot, path);
-	}
+		const { path, orientation } = drop_target ? drop_target : drag_target;
+		this.restore(
+			insert_child(
+				panel,
+				drag_target.slot,
+				path,
+				orientation,
+				!drop_target?.is_edge,
+			),
+		);
+	};
 
 	/**
 	 * Inserts a new panel into the layout at a specified path.
@@ -195,32 +209,56 @@ 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));
-	}
+	};
+
+	/**
+	 * 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;
+			}
+			return null;
+		}
+
+		for (const child of layout.children) {
+			const found = this.getPanel(name, child);
+			if (found) {
+				return found;
+			}
+		}
+
+		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") {
@@ -228,7 +266,14 @@ export class RegularLayout extends HTMLElement {
 		}
 
 		return null;
-	}
+	};
+
+	/**
+	 * Clears the entire layout, unslotting all panels.
+	 */
+	clear = () => {
+		this.restore(EMPTY_PANEL);
+	};
 
 	/**
 	 * Restores the layout from a saved state.
@@ -242,29 +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);
-			}
-		}
+		this.updateSlots(this._panel);
+		const event = new CustomEvent("regular-layout-update", {
+			detail: this._panel,
+		});
 
-		for (const key of old) {
-			const child = this._slots.get(key);
-			if (child) {
-				this._shadowRoot.removeChild(child);
-				this._slots.delete(key);
-			}
-		}
-	}
+		this.dispatchEvent(event);
+	};
 
 	/**
 	 * Serializes the current layout state, which can be restored via `restore`.
@@ -278,32 +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) {
-		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();
+	private updateSlots = (layout: Layout, overlay?: string) => {
+		const old = new Set(this._slots.keys());
+		if (overlay) {
+			old.delete(overlay);
 		}
-	}
 
-	private onPointerMove(event: PointerEvent) {
+		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();
+			}
+		}
+	};
+
+	private onPointerMove = (event: PointerEvent) => {
 		if (this._dragPath) {
 			const [col, row] = this.relativeCoordinates(event.clientX, event.clientY);
 			const old_panel = this._panel;
@@ -312,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);
@@ -330,5 +402,5 @@ export class RegularLayout extends HTMLElement {
 
 			this._dragPath = undefined;
 		}
-	}
+	};
 }

package/dist/common/calculate_split.d.ts

@@ -1,2 +0,0 @@
-import { type Layout, type LayoutPath } from "./layout_config";
-export declare function calculate_split(col: number, row: number, panel: Layout, slot: string, config: LayoutPath): LayoutPath;

package/src/common/calculate_split.ts

@@ -1,53 +0,0 @@
-import { calculate_intersection } from "./calculate_intersect";
-import { insert_child } from "./insert_child";
-import {
-	SPLIT_EDGE_TOLERANCE,
-	type Layout,
-	type LayoutPath,
-} from "./layout_config";
-
-export function calculate_split(
-	col: number,
-	row: number,
-	panel: Layout,
-	slot: string,
-	config: LayoutPath,
-): LayoutPath {
-	if (
-		config.column_offset < SPLIT_EDGE_TOLERANCE ||
-		config.column_offset > 1 - SPLIT_EDGE_TOLERANCE
-	) {
-		if (config.orientation === "vertical") {
-			const new_panel = insert_child(panel, slot, [
-				...config.path,
-				config.column_offset < SPLIT_EDGE_TOLERANCE ? 0 : 1,
-			]);
-
-			config = calculate_intersection(col, row, new_panel, false);
-		} else {
-			const new_panel = insert_child(panel, slot, config.path);
-			config = calculate_intersection(col, row, new_panel, false);
-		}
-	}
-
-	if (
-		(config.row_offset < SPLIT_EDGE_TOLERANCE &&
-			config.row_offset < config.column_offset) ||
-		(config.row_offset > 1 - SPLIT_EDGE_TOLERANCE &&
-			config.row_offset > config.column_offset)
-	) {
-		if (config.orientation === "horizontal") {
-			const new_panel = insert_child(panel, slot, [
-				...config.path,
-				config.row_offset < SPLIT_EDGE_TOLERANCE ? 0 : 1,
-			]);
-
-			config = calculate_intersection(col, row, new_panel, false);
-		} else {
-			const new_panel = insert_child(panel, slot, config.path);
-			config = calculate_intersection(col, row, new_panel, false);
-		}
-	}
-
-	return config;
-}