regular-layout 0.1.0 → 0.2.1

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

@@ -9,9 +9,8 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { GRID_TRACK_COLLAPSE_TOLERANCE } from "./constants.ts";
-import type { Layout } from "./layout_config.ts";
-import { remove_child } from "./remove_child.ts";
+import { DEFAULT_PHYSICS, type Physics } from "./constants.ts";
+import type { Layout } from "./types.ts";
 
 interface GridCell {
 	child: string;
@@ -21,80 +20,77 @@ 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(physics: Physics, result: number[], pos: number) {
+	if (
+		result.length === 0 ||
+		Math.abs(pos - result[result.length - 1]) >
+			physics.GRID_TRACK_COLLAPSE_TOLERANCE
+	) {
+		result.push(pos);
 	}
 
 	return result;
 }
 
-function collectTrackPositions(
+function dedupe_positions(physics: Physics, positions: number[]): number[] {
+	const sorted = positions.sort((a, b) => a - b);
+	return sorted.reduce(dedupe_sort.bind(undefined, physics), []);
+}
+
+function collect_track_positions(
 	panel: Layout,
 	orientation: "horizontal" | "vertical",
 	start: number,
 	end: number,
+	physics: Physics,
 ): number[] {
 	if (panel.type === "child-panel") {
 		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,
+					physics,
+				),
 			);
 
-			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, physics),
 			);
-
-			allPositions.push(...childPositions);
 		}
-
-		return dedupePositions(allPositions);
 	}
+
+	return dedupe_positions(physics, 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(
+	physics: Physics,
+	positions: number[],
+	value: number,
+): number {
+	const index = positions.findIndex(
+		(pos) => Math.abs(pos - value) < physics.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[],
@@ -102,28 +98,31 @@ function buildCells(
 	colEnd: number,
 	rowStart: number,
 	rowEnd: number,
+	physics: Physics,
 ): GridCell[] {
 	if (panel.type === "child-panel") {
 		const selected = panel.selected ?? 0;
 		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(physics, colPositions, colStart),
+				colEnd: find_track_index(physics, colPositions, colEnd),
+				rowStart: find_track_index(physics, rowPositions, rowStart),
+				rowEnd: find_track_index(physics, 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,
@@ -131,17 +130,12 @@ function buildCells(
 					next,
 					rowStart,
 					rowEnd,
+					physics,
 				),
 			);
-
-			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,
@@ -149,21 +143,27 @@ function buildCells(
 					colEnd,
 					current,
 					next,
+					physics,
 				),
 			);
-
-			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}; }`;
+const child_template = (
+	physics: Physics,
+	slot: string,
+	rowPart: string,
+	colPart: string,
+) =>
+	`:host ::slotted([${physics.CHILD_ATTRIBUTE_NAME}="${slot}"]){display:flex;grid-column:${colPart};grid-row:${rowPart}}`;
 
 /**
  * Generates CSS Grid styles to render a layout tree.
@@ -191,60 +191,74 @@ 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(
 	layout: Layout,
-	round: boolean = false,
 	overlay?: [string, string],
+	physics: Physics = DEFAULT_PHYSICS,
 ): 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")}`;
+		return [
+			host_template("100%", "100%"),
+			child_template(physics, layout.child[selected], "1", "1"),
+		].join("\n");
 	}
 
-	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 createTemplate = (positions: number[]) => {
+		const sizes = positions
+			.slice(0, -1)
+			.map((pos, i) => positions[i + 1] - pos);
+		return sizes
+			.map((s) => `${physics.SHOULD_ROUND ? Math.round(s * 100) : s * 100}fr`)
+			.join(" ");
+	};
 
-	const colTemplate = colSizes
-		.map((s) => `${round ? Math.round(s * 100) : s * 100}%`)
-		.join(" ");
+	const colPositions = collect_track_positions(
+		layout,
+		"horizontal",
+		0,
+		1,
+		physics,
+	);
 
-	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 colTemplate = createTemplate(colPositions);
+	const rowPositions = collect_track_positions(
+		layout,
+		"vertical",
+		0,
+		1,
+		physics,
+	);
 
-	const rowTemplate = rowSizes
-		.map((s) => `${round ? Math.round(s * 100) : s * 100}%`)
-		.join(" ");
+	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,
+		physics,
+	);
 
-	const cells = buildCells(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(physics, 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(physics, overlay[0], rowPart, colPart));
+			css.push(
+				`:host ::slotted([${physics.CHILD_ATTRIBUTE_NAME}=${overlay[0]}]){z-index:1}`,
+			);
 		}
 	}
 

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

@@ -9,20 +9,34 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { LayoutPath } from "./layout_config";
+import { DEFAULT_PHYSICS } from "./constants";
+import type { LayoutPath } from "./types";
 
 export function updateOverlaySheet(
 	slot: string,
-	{
-		view_window: { row_start, row_end, col_start, col_end },
-		box,
-	}: LayoutPath<DOMRect>,
+	box: DOMRect,
+	style: CSSStyleDeclaration,
+	drag_target: LayoutPath<undefined> | null,
+	physics = DEFAULT_PHYSICS,
 ) {
-	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([slot="${slot}"]){${css}}`;
+	if (!drag_target) {
+		return `:host ::slotted([${physics.CHILD_ATTRIBUTE_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([${physics.CHILD_ATTRIBUTE_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,92 +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);
-			panel.children[index].selected = 0;
-			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];
@@ -134,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,8 +9,8 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD } from "./constants.ts";
-import type { Layout } from "./layout_config.ts";
+import { DEFAULT_PHYSICS } from "./constants.ts";
+import type { Layout } from "./types.ts";
 
 /**
  * Adjusts panel sizes during a drag operation on a divider.
@@ -33,6 +33,7 @@ export function redistribute_panel_sizes(
 	panel: Layout,
 	path: number[],
 	delta: number,
+	physics = DEFAULT_PHYSICS,
 ): Layout {
 	// Clone the entire panel structure
 	const result = structuredClone(panel);
@@ -55,7 +56,12 @@ export function redistribute_panel_sizes(
 
 		// It would be fun to remove this condition.
 		if (index < current.sizes.length - 1) {
-			current.sizes = add_and_redistribute(current.sizes, index, delta);
+			current.sizes = add_and_redistribute(
+				physics,
+				current.sizes,
+				index,
+				delta,
+			);
 		}
 	}
 
@@ -63,6 +69,7 @@ export function redistribute_panel_sizes(
 }
 
 function add_and_redistribute(
+	physics: typeof DEFAULT_PHYSICS,
 	arr: number[],
 	index: number,
 	delta: number,
@@ -83,7 +90,7 @@ function add_and_redistribute(
 		Math.sign(delta) *
 		Math.min(
 			Math.abs(delta),
-			(1 - MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD) *
+			(1 - physics.MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD) *
 				(delta > 0 ? before_total : after_total),
 		);
 

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.