regular-layout 0.0.2 → 0.2.0

package/src/{common → layout}/generate_grid.ts

@@ -9,8 +9,8 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { GRID_TRACK_COLLAPSE_TOLERANCE, type Layout } from "./layout_config.ts";
-import { remove_child } from "./remove_child.ts";
+import { GRID_TRACK_COLLAPSE_TOLERANCE } from "./constants.ts";
+import type { Layout } from "./types.ts";
 
 interface GridCell {
 	child: string;
@@ -20,26 +20,23 @@ interface GridCell {
 	rowEnd: number;
 }
 
-function dedupePositions(positions: number[]): number[] {
-	if (positions.length === 0) {
-		return [];
-	}
-
-	const sorted = positions.sort((a, b) => a - b);
-	const result = [sorted[0]];
-	for (let i = 1; i < sorted.length; i++) {
-		if (
-			Math.abs(sorted[i] - result[result.length - 1]) >
-			GRID_TRACK_COLLAPSE_TOLERANCE
-		) {
-			result.push(sorted[i]);
-		}
+function dedupe_sort(result: number[], pos: number) {
+	if (
+		result.length === 0 ||
+		Math.abs(pos - result[result.length - 1]) > GRID_TRACK_COLLAPSE_TOLERANCE
+	) {
+		result.push(pos);
 	}
 
 	return result;
 }
 
-function collectTrackPositions(
+function dedupe_positions(positions: number[]): number[] {
+	const sorted = positions.sort((a, b) => a - b);
+	return sorted.reduce(dedupe_sort, []);
+}
+
+function collect_track_positions(
 	panel: Layout,
 	orientation: "horizontal" | "vertical",
 	start: number,
@@ -49,51 +46,44 @@ function collectTrackPositions(
 		return [start, end];
 	}
 
+	const positions: number[] = [start, end];
 	if (panel.orientation === orientation) {
-		const positions: number[] = [start, end];
 		let current = start;
+		const range = end - start;
 		for (let i = 0; i < panel.children.length; i++) {
 			const size = panel.sizes[i];
-			const childPositions = collectTrackPositions(
-				panel.children[i],
-				orientation,
-				current,
-				current + size * (end - start),
+			const next = current + size * range;
+			positions.push(
+				...collect_track_positions(
+					panel.children[i],
+					orientation,
+					current,
+					next,
+				),
 			);
 
-			positions.push(...childPositions);
-			current = current + size * (end - start);
+			current = next;
 		}
-
-		return dedupePositions(positions);
 	} else {
-		const allPositions: number[] = [start, end];
 		for (const child of panel.children) {
-			const childPositions = collectTrackPositions(
-				child,
-				orientation,
-				start,
-				end,
+			positions.push(
+				...collect_track_positions(child, orientation, start, end),
 			);
-
-			allPositions.push(...childPositions);
 		}
-
-		return dedupePositions(allPositions);
 	}
+
+	return dedupe_positions(positions);
 }
 
-function findTrackIndex(positions: number[], value: number): number {
-	for (let i = 0; i < positions.length; i++) {
-		if (Math.abs(positions[i] - value) < GRID_TRACK_COLLAPSE_TOLERANCE) {
-			return i;
-		}
-	}
+function find_track_index(positions: number[], value: number): number {
+	const index = positions.findIndex(
+		(pos) => Math.abs(pos - value) < GRID_TRACK_COLLAPSE_TOLERANCE,
+	);
 
-	throw new Error(`Position ${value} not found in ${positions}`);
+	return index === -1 ? 0 : index;
 }
 
-function buildCells(
+function build_cells(
 	panel: Layout,
 	colPositions: number[],
 	rowPositions: number[],
@@ -107,22 +97,24 @@ function buildCells(
 		return [
 			{
 				child: panel.child[selected],
-				colStart: findTrackIndex(colPositions, colStart),
-				colEnd: findTrackIndex(colPositions, colEnd),
-				rowStart: findTrackIndex(rowPositions, rowStart),
-				rowEnd: findTrackIndex(rowPositions, rowEnd),
+				colStart: find_track_index(colPositions, colStart),
+				colEnd: find_track_index(colPositions, colEnd),
+				rowStart: find_track_index(rowPositions, rowStart),
+				rowEnd: find_track_index(rowPositions, rowEnd),
 			},
 		];
 	}
 
-	const cells: GridCell[] = [];
 	const { children, sizes, orientation } = panel;
-	if (orientation === "horizontal") {
-		let current = colStart;
-		for (let i = 0; i < children.length; i++) {
-			const next = current + sizes[i] * (colEnd - colStart);
+	const isHorizontal = orientation === "horizontal";
+	let current = isHorizontal ? colStart : rowStart;
+	const range = isHorizontal ? colEnd - colStart : rowEnd - rowStart;
+	const cells: GridCell[] = [];
+	for (let i = 0; i < children.length; i++) {
+		const next = current + sizes[i] * range;
+		if (isHorizontal) {
 			cells.push(
-				...buildCells(
+				...build_cells(
 					children[i],
 					colPositions,
 					rowPositions,
@@ -132,15 +124,9 @@ function buildCells(
 					rowEnd,
 				),
 			);
-
-			current = next;
-		}
-	} else {
-		let current = rowStart;
-		for (let i = 0; i < children.length; i++) {
-			const next = current + sizes[i] * (rowEnd - rowStart);
+		} else {
 			cells.push(
-				...buildCells(
+				...build_cells(
 					children[i],
 					colPositions,
 					rowPositions,
@@ -150,19 +136,19 @@ function buildCells(
 					next,
 				),
 			);
-
-			current = next;
 		}
+
+		current = next;
 	}
 
 	return cells;
 }
 
 const host_template = (rowTemplate: string, colTemplate: string) =>
-	`:host { display: grid; gap: 0px; grid-template-rows: ${rowTemplate}; grid-template-columns: ${colTemplate}; }`;
+	`:host ::slotted(*){display:none}:host{display:grid;grid-template-rows:${rowTemplate};grid-template-columns:${colTemplate}}`;
 
 const child_template = (slot: string, rowPart: string, colPart: string) =>
-	`:host ::slotted([slot=${slot}]) { grid-column: ${colPart}; grid-row: ${rowPart}; }`;
+	`:host ::slotted([name="${slot}"]){display:flex;grid-column:${colPart};grid-row:${rowPart}}`;
 
 /**
  * Generates CSS Grid styles to render a layout tree.
@@ -190,8 +176,8 @@ const child_template = (slot: string, rowPart: string, colPart: string) =>
  * const css = create_css_grid_layout(layout);
  * // Returns CSS like:
  * // :host { display: grid; grid-template-columns: 25% 75%; ... }
- * // :host ::slotted([slot=sidebar]) { grid-column: 1; grid-row: 1; }
- * // :host ::slotted([slot=main]) { grid-column: 2; grid-row: 1; }
+ * // :host ::slotted([name=sidebar]) { grid-column: 1; grid-row: 1; }
+ * // :host ::slotted([name=main]) { grid-column: 2; grid-row: 1; }
  * ```
  */
 export function create_css_grid_layout(
@@ -199,51 +185,36 @@ export function create_css_grid_layout(
 	round: boolean = false,
 	overlay?: [string, string],
 ): string {
-	if (overlay) {
-		layout = remove_child(layout, overlay[0]);
-	}
-
 	if (layout.type === "child-panel") {
 		const selected = layout.selected ?? 0;
 		return `${host_template("100%", "100%")}\n${child_template(layout.child[selected], "1", "1")}`;
 	}
 
-	const colPositions = collectTrackPositions(layout, "horizontal", 0, 1);
-	const colSizes: number[] = [];
-	for (let i = 0; i < colPositions.length - 1; i++) {
-		colSizes.push(colPositions[i + 1] - colPositions[i]);
-	}
-
-	const colTemplate = colSizes
-		.map((s) => `${round ? Math.round(s * 100) : s * 100}%`)
-		.join(" ");
-
-	const rowPositions = collectTrackPositions(layout, "vertical", 0, 1);
-	const rowSizes: number[] = [];
-	for (let i = 0; i < rowPositions.length - 1; i++) {
-		rowSizes.push(rowPositions[i + 1] - rowPositions[i]);
-	}
-
-	const rowTemplate = rowSizes
-		.map((s) => `${round ? Math.round(s * 100) : s * 100}%`)
-		.join(" ");
-
-	const cells = buildCells(layout, colPositions, rowPositions, 0, 1, 0, 1);
+	const createTemplate = (positions: number[]) => {
+		const sizes = positions
+			.slice(0, -1)
+			.map((pos, i) => positions[i + 1] - pos);
+		return sizes
+			.map((s) => `${round ? Math.round(s * 100) : s * 100}fr`)
+			.join(" ");
+	};
+
+	const colPositions = collect_track_positions(layout, "horizontal", 0, 1);
+	const colTemplate = createTemplate(colPositions);
+	const rowPositions = collect_track_positions(layout, "vertical", 0, 1);
+	const rowTemplate = createTemplate(rowPositions);
+	const formatGridLine = (start: number, end: number) =>
+		end - start === 1 ? `${start + 1}` : `${start + 1} / ${end + 1}`;
+
+	const cells = build_cells(layout, colPositions, rowPositions, 0, 1, 0, 1);
 	const css = [host_template(rowTemplate, colTemplate)];
 	for (const cell of cells) {
-		const colPart =
-			cell.colEnd - cell.colStart === 1
-				? `${cell.colStart + 1}`
-				: `${cell.colStart + 1} / ${cell.colEnd + 1}`;
-		const rowPart =
-			cell.rowEnd - cell.rowStart === 1
-				? `${cell.rowStart + 1}`
-				: `${cell.rowStart + 1} / ${cell.rowEnd + 1}`;
-
-		css.push(`${child_template(cell.child, rowPart, colPart)}`);
+		const colPart = formatGridLine(cell.colStart, cell.colEnd);
+		const rowPart = formatGridLine(cell.rowStart, cell.rowEnd);
+		css.push(child_template(cell.child, rowPart, colPart));
 		if (cell.child === overlay?.[1]) {
-			css.push(`${child_template(overlay[0], rowPart, colPart)}`);
-			css.push(`:host ::slotted([slot=${overlay[0]}]) { z-index: 1; }`);
+			css.push(child_template(overlay[0], rowPart, colPart));
+			css.push(`:host ::slotted([name=${overlay[0]}]){z-index:1}`);
 		}
 	}
 

package/src/{common → layout}/generate_overlay.ts

@@ -9,17 +9,32 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { LayoutPath } from "./layout_config";
+import type { LayoutPath } from "./types";
 
-export function updateOverlaySheet({
-	view_window: { row_start, row_end, col_start, col_end },
-	box,
-}: LayoutPath<DOMRect>) {
-	const margin = 0;
-	const top = row_start * box.height + margin / 2;
-	const left = col_start * box.width + margin / 2;
-	const height = (row_end - row_start) * box.height - margin;
-	const width = (col_end - col_start) * box.width - margin;
-	const css = `position:absolute!important;z-index:1;top:${top}px;left:${left}px;height:${height}px;width:${width}px;`;
-	return `::slotted(:not([slot])){${css}}`;
+export function updateOverlaySheet(
+	slot: string,
+	box: DOMRect,
+	style: CSSStyleDeclaration,
+	drag_target: LayoutPath<undefined> | null,
+) {
+	if (!drag_target) {
+		return `:host ::slotted([name="${slot}"]){display:none;}`;
+	}
+
+	const {
+		view_window: { row_start, row_end, col_start, col_end },
+	} = drag_target;
+
+	const box_height =
+		box.height - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
+
+	const box_width =
+		box.width - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+
+	const top = row_start * box_height + parseFloat(style.paddingTop);
+	const left = col_start * box_width + parseFloat(style.paddingLeft);
+	const height = (row_end - row_start) * box_height;
+	const width = (col_end - col_start) * box_width;
+	const css = `display:flex;position:absolute!important;z-index:1;top:${top}px;left:${left}px;height:${height}px;width:${width}px;`;
+	return `::slotted([name="${slot}"]){${css}}`;
 }

package/src/{common → layout}/insert_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 } from "./types.ts";
 
 /**
  * Inserts a new child panel into the layout tree at a specified location.
@@ -22,15 +22,20 @@ import type { Layout } from "./layout_config.ts";
  * at root level.
  * @param orientation - Orientation for newly created split panels. Defaults to
  * "horizontal".
+ * @param is_edge - If true, create the split at the parent level.
  * @returns A new layout tree with the child inserted (original is not mutated).
  */
 export function insert_child(
 	panel: Layout,
 	child: string,
 	path: number[],
-	orientation: "horizontal" | "vertical" = "horizontal",
-	is_edge?: boolean,
+	orientation?: "horizontal" | "vertical",
 ): Layout {
+	const createChildPanel = (childId: string): Layout => ({
+		type: "child-panel",
+		child: [childId],
+	});
+
 	if (path.length === 0) {
 		// Insert at root level
 		if (panel.type === "child-panel") {
@@ -39,91 +44,136 @@ export function insert_child(
 				type: "child-panel",
 				child: [child, ...panel.child],
 			};
+		} else if (orientation) {
+			// When inserting at edge of root, wrap the entire panel in a new split
+			return {
+				type: "split-panel",
+				orientation: orientation,
+				children: [createChildPanel(child), panel],
+				sizes: [0.5, 0.5],
+			};
 		} else {
 			// Append to existing split-panel
-			const newChildren = [
-				...panel.children,
-				{
-					type: "child-panel",
-					child: [child],
-				} as Layout,
-			];
-
-			const numChildren = newChildren.length;
-			const newSizes = Array(numChildren).fill(1 / numChildren);
+			const newChildren = [...panel.children, createChildPanel(child)];
+			const newSizes = [...panel.sizes, 1 / (newChildren.length - 1)];
 			return {
 				...panel,
 				children: newChildren,
-				sizes: newSizes,
+				sizes: redistribute(newSizes),
 			};
 		}
 	}
 
 	// Navigate down the path
 	const [index, ...restPath] = path;
+
+	// Special case: when orientation is provided and restPath is empty, handle edge insertion
+	if (orientation && restPath.length === 0) {
+		// If panel is a split-panel with the same orientation, insert into its children
+		if (panel.type === "split-panel" && panel.orientation === orientation) {
+			const newChildren = [...panel.children];
+			newChildren.splice(index, 0, createChildPanel(child));
+			const newSizes = [...panel.sizes];
+			newSizes.splice(index, 0, 1 / (newChildren.length - 1));
+			return {
+				...panel,
+				children: newChildren,
+				sizes: redistribute(newSizes),
+			};
+		}
+
+		// Otherwise, wrap the entire panel in a new split at the edge
+		const children =
+			index === 0
+				? [createChildPanel(child), panel]
+				: [panel, createChildPanel(child)];
+
+		return {
+			type: "split-panel",
+			orientation: orientation,
+			children,
+			sizes: [0.5, 0.5],
+		};
+	}
+
 	if (panel.type === "child-panel") {
-		// This shouldn't happen if path.length > 0, but handle it gracefully
-		// We need to split this child-panel
+		// Stack into child array only when ALL of these conditions are met:
+		// 1. Path has exactly one element (restPath is empty)
+		// 2. Orientation was NOT explicitly provided (orientation is undefined)
+		// 3. Index is within the valid stacking range [0, child.length]
+		if (
+			restPath.length === 0 &&
+			orientation === undefined &&
+			index >= 0 &&
+			index <= panel.child.length
+		) {
+			const newChild = [...panel.child];
+			newChild.splice(index, 0, child);
+			return {
+				...panel,
+				child: newChild,
+			};
+		}
+
+		// Otherwise, wrap in a split panel and recurse
 		const newPanel: Layout = {
 			type: "split-panel",
-			orientation,
+			orientation: orientation || "horizontal",
 			children: [panel],
 			sizes: [1],
 		};
 
-		return insert_child(newPanel, child, path, orientation, is_edge);
+		return insert_child(newPanel, child, path, orientation);
 	}
 
 	if (restPath.length === 0 || index === panel.children.length) {
-		if (is_edge && panel.children[index]?.type === "child-panel") {
-			panel.children[index].child.unshift(child);
-			return panel;
+		if (orientation && panel.children[index]) {
+			// When inserting at an edge, create a split panel with the new child and existing child
+			const newSplitPanel: Layout = {
+				type: "split-panel",
+				orientation: orientation,
+				children: [createChildPanel(child), panel.children[index]],
+				sizes: [0.5, 0.5],
+			};
+
+			const newChildren = [...panel.children];
+			newChildren[index] = newSplitPanel;
+			return {
+				...panel,
+				children: newChildren,
+				sizes: redistribute(panel.sizes),
+			};
 		}
 
 		// Insert at this level at the specified index
 		const newChildren = [...panel.children];
-		newChildren.splice(index, 0, {
-			type: "child-panel",
-			child: [child],
-		});
-
-		const numChildren = newChildren.length;
-		const newSizes = Array(numChildren).fill(1 / numChildren);
+		newChildren.splice(index, 0, createChildPanel(child));
+		const newSizes = [...panel.sizes];
+		newSizes.splice(index, 0, 1 / (newChildren.length - 1));
 		return {
 			...panel,
 			children: newChildren,
-			sizes: newSizes,
+			sizes: redistribute(newSizes),
 		};
 	}
 
 	const targetChild = panel.children[index];
-	if (targetChild.type === "child-panel" && restPath.length > 0) {
-		// Need to split this child-panel
-		const oppositeOrientation =
-			panel.orientation === "horizontal" ? "vertical" : "horizontal";
-
-		const newSplitPanel = insert_child(
-			targetChild,
-			child,
-			restPath,
-			oppositeOrientation,
-			is_edge,
-		);
 
-		const newChildren = [...panel.children];
-		newChildren[index] = newSplitPanel;
-		return {
-			...panel,
-			children: newChildren,
-		};
-	}
+	// Determine the orientation to pass down when navigating into a child-panel
+	const childOrientation =
+		targetChild.type === "child-panel" &&
+		restPath.length > 0 &&
+		orientation !== undefined
+			? panel.orientation === "horizontal"
+				? "vertical"
+				: "horizontal"
+			: orientation;
 
 	const updatedChild = insert_child(
 		targetChild,
 		child,
 		restPath,
-		orientation,
-		is_edge,
+		childOrientation,
 	);
 
 	const newChildren = [...panel.children];
@@ -133,3 +183,8 @@ export function insert_child(
 		children: newChildren,
 	};
 }
+
+function redistribute(arr: number[]): number[] {
+	const total = arr.reduce((sum, val) => sum + val, 0);
+	return arr.map((val) => val / total);
+}

package/src/{common → layout}/redistribute_panel_sizes.ts

@@ -9,10 +9,8 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import {
-	MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD,
-	type Layout,
-} from "./layout_config.ts";
+import { MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD } from "./constants.ts";
+import type { Layout } from "./types.ts";
 
 /**
  * Adjusts panel sizes during a drag operation on a divider.

package/src/{common → layout}/remove_child.ts

@@ -9,8 +9,8 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { Layout, TabLayout } from "./layout_config.ts";
-import { EMPTY_PANEL } from "./layout_config.ts";
+import type { Layout, TabLayout } from "./types.ts";
+import { EMPTY_PANEL } from "./types.ts";
 
 /**
  * Removes a child panel from the layout tree by its name.
@@ -36,6 +36,7 @@ export function remove_child(panel: Layout, child: string): Layout {
 				child: newChild,
 			};
 		}
+
 		return structuredClone(panel);
 	}
 

package/src/{common/layout_config.ts → layout/types.ts}

@@ -9,34 +9,10 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-/**
- * The percentage of the maximum resize distance that will be clamped.
- *
- */
-export const MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD = 0.15;
-
-/**
- * Threshold from panel edge that is considered a split vs drop action.
- */
-export const SPLIT_EDGE_TOLERANCE = 0.25;
-
-/**
- * Tolerance threshold for considering two grid track positions as identical.
- *
- * When collecting and deduplicating track positions, any positions closer than
- * this value are treated as the same position to avoid redundant grid tracks.
- */
-export const GRID_TRACK_COLLAPSE_TOLERANCE = 0.001;
-
-/**
- * The overlay default behavior.
- */
-export const OVERLAY_DEFAULT: OverlayMode = "absolute";
-
 /**
  * The overlay behavior type.
  */
-export type OverlayMode = "grid" | "absolute" | "interactive";
+export type OverlayMode = "grid" | "absolute";
 
 /**
  * The representation of a CSS grid, in JSON form.
@@ -64,6 +40,11 @@ export interface ViewWindow {
  * Child panels are arranged either horizontally (side by side) or vertically
  * (stacked), via the `orientation` property `"horizzontal"` and `"vertical"`
  * (respectively).
+ *
+ * While the type structure of `SplitLayout` allows nesting levels with the same
+ * `orientation`, calling `RegularLayout.restore` with such a `Layout` will be
+ * flattened to the equivalent layout with every child guaranteed to have the
+ * opposite `orientation` as its parent.
  */
 export interface SplitLayout {
 	type: "split-panel";
@@ -102,31 +83,15 @@ export interface LayoutDivider {
 export interface LayoutPath<T = undefined> {
 	type: "layout-path";
 	slot: string;
-	panel: TabLayout;
 	path: number[];
 	view_window: ViewWindow;
+	column: number;
+	row: number;
 	column_offset: number;
 	row_offset: number;
 	orientation: Orientation;
 	is_edge: boolean;
-	box: T;
-}
-
-/**
- * Recursively iterates over all child panel names in the layout tree, yielding
- * panel names in depth-first order.
- *
- * @param panel - The layout tree to iterate over
- * @returns Generator yielding child panel names
- */
-export function* iter_panel_children(panel: Layout): Generator<string> {
-	if (panel.type === "split-panel") {
-		for (const child of panel.children) {
-			yield* iter_panel_children(child);
-		}
-	} else {
-		yield* panel.child;
-	}
+	layout: T;
 }
 
 /**