regular-layout 0.1.0 → 0.2.0

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

@@ -9,24 +9,25 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type {
-	LayoutPath,
-	LayoutDivider,
-	Layout,
-	ViewWindow,
-} from "./layout_config.ts";
+import { GRID_DIVIDER_SIZE } from "./constants.ts";
+import type { LayoutPath, LayoutDivider, Layout, ViewWindow } from "./types.ts";
+
+const VIEW_WINDOW = {
+	row_start: 0,
+	row_end: 1,
+	col_start: 0,
+	col_end: 1,
+};
 
 /**
  * Determines which panel or divider is located at a given position in the
  * layout.
  *
- * @param row - Vertical position as a fraction (0-1) of the container
- * height
- * @param column - Horizontal position as a fraction (0-1) of the
- * container width
+ * @param column - Horizontal position as a fraction (0-1) of the container width
+ * @param row - Vertical position as a fraction (0-1) of the container height
  * @param layout - The layout tree to search
  * @param check_dividers - Whether `LayoutDivider` intersection should be
- * checked, which oyu may not want for e.g. `drop` actions.
+ * checked, which you may not want for e.g. `drop` actions.
  * @returns The panel path if over a panel, a divider if over a resizable
  * boundary, or null if outside all panels
  */
@@ -34,44 +35,37 @@ export function calculate_intersection(
 	column: number,
 	row: number,
 	layout: Layout,
-	check_dividers: false,
-): LayoutPath;
+	check_dividers?: null,
+): LayoutPath | null;
 
 export function calculate_intersection(
 	column: number,
 	row: number,
 	layout: Layout,
-	check_dividers: true,
+	check_dividers?: DOMRect,
 ): LayoutPath | null | LayoutDivider;
 
 export function calculate_intersection(
 	column: number,
 	row: number,
 	layout: Layout,
-	check_dividers?: boolean,
+	check_dividers?: DOMRect | null,
 ): LayoutPath | null | LayoutDivider;
 
 export function calculate_intersection(
 	column: number,
 	row: number,
 	layout: Layout,
-	check_dividers: boolean = true,
+	check_dividers: DOMRect | null = null,
 ): LayoutPath | null | LayoutDivider {
 	return calculate_intersection_recursive(column, row, layout, check_dividers);
 }
 
-const VIEW_WINDOW = {
-	row_start: 0,
-	row_end: 1,
-	col_start: 0,
-	col_end: 1,
-};
-
 function calculate_intersection_recursive(
 	column: number,
 	row: number,
 	panel: Layout,
-	check_dividers: boolean,
+	check_dividers: DOMRect | null,
 	parent_orientation: "horizontal" | "vertical" | null = null,
 	view_window: ViewWindow = structuredClone(VIEW_WINDOW),
 	path: number[] = [],
@@ -83,104 +77,68 @@ function calculate_intersection_recursive(
 	// Base case: if this is a child panel, return its name
 	if (panel.type === "child-panel") {
 		const selected = panel.selected ?? 0;
-		const column_offset =
-			(column - view_window.col_start) /
-			(view_window.col_end - view_window.col_start);
-
-		const row_offset =
-			(row - view_window.row_start) /
-			(view_window.row_end - view_window.row_start);
-
+		const col_width = view_window.col_end - view_window.col_start;
+		const row_height = view_window.row_end - view_window.row_start;
 		return {
 			type: "layout-path",
-			box: undefined,
+			layout: undefined,
 			slot: panel.child[selected],
-			panel: structuredClone(panel),
-			path: path,
-			view_window: view_window,
+			path,
+			view_window,
 			is_edge: false,
 			column,
 			row,
-			column_offset,
-			row_offset,
+			column_offset: (column - view_window.col_start) / col_width,
+			row_offset: (row - view_window.row_start) / row_height,
 			orientation: parent_orientation || "horizontal",
 		};
 	}
 
 	// For split panels, determine which child was hit
-	if (panel.orientation === "vertical") {
-		// Vertical orientation = rows
-		let current_row = view_window.row_start;
-		for (let i = 0; i < panel.children.length; i++) {
-			const total_size = view_window.row_end - view_window.row_start;
-			const next_row = total_size * panel.sizes[i] + current_row;
-			if (check_dividers && Math.abs(row - next_row) < 0.01) {
+	const is_vertical = panel.orientation === "vertical";
+	const position = is_vertical ? row : column;
+	const start_key = is_vertical ? "row_start" : "col_start";
+	const end_key = is_vertical ? "row_end" : "col_end";
+	const rect_dim = is_vertical ? check_dividers?.height : check_dividers?.width;
+	let current_pos = view_window[start_key];
+	const total_size = view_window[end_key] - view_window[start_key];
+	for (let i = 0; i < panel.children.length; i++) {
+		const next_pos = current_pos + total_size * panel.sizes[i];
+
+		// Check if position is on a divider
+		if (check_dividers && rect_dim) {
+			const divider_threshold = GRID_DIVIDER_SIZE / rect_dim;
+			if (Math.abs(position - next_pos) < divider_threshold) {
 				return {
 					path: [...path, i],
-					type: "vertical",
+					type: panel.orientation,
 					view_window: {
 						...view_window,
-						row_start: current_row,
-						row_end: next_row,
+						[start_key]: current_pos,
+						[end_key]: next_pos,
 					},
 				};
 			}
-
-			if (row >= current_row && row < next_row) {
-				return calculate_intersection_recursive(
-					column,
-					row,
-					panel.children[i],
-					check_dividers,
-					"vertical",
-					{
-						...view_window,
-						row_start: current_row,
-						row_end: next_row,
-					},
-					[...path, i],
-				);
-			}
-
-			current_row = next_row;
 		}
-	} else {
-		// Horizontal orientation = columns
-		let current_col = view_window.col_start;
-		for (let i = 0; i < panel.children.length; i++) {
-			const total_size = view_window.col_end - view_window.col_start;
-			const next_col = current_col + total_size * panel.sizes[i];
-			if (check_dividers && Math.abs(column - next_col) < 0.01) {
-				return {
-					path: [...path, i],
-					type: "horizontal",
-					view_window: {
-						...view_window,
-						col_start: current_col,
-						col_end: next_col,
-					},
-				};
-			}
-
-			// Check if the column falls within this child's bounds.
-			if (column >= current_col && column < next_col) {
-				return calculate_intersection_recursive(
-					column,
-					row,
-					panel.children[i],
-					check_dividers,
-					"horizontal",
-					{
-						...view_window,
-						col_start: current_col,
-						col_end: next_col,
-					},
-					[...path, i],
-				);
-			}
 
-			current_col = next_col;
+		// Check if position falls within this child's bounds
+		if (position >= current_pos && position < next_pos) {
+			return calculate_intersection_recursive(
+				column,
+				row,
+				panel.children[i],
+				check_dividers,
+				panel.orientation,
+				{
+					...view_window,
+					[start_key]: current_pos,
+					[end_key]: next_pos,
+				},
+				[...path, i],
+			);
 		}
+
+		current_pos = next_pos;
 	}
 
 	// If we get here, the hit was outside all children (possibly in a gap or

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

@@ -9,7 +9,13 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { OverlayMode } from "./layout_config";
+import type { OverlayMode } from "./types";
+
+/**
+ * The prefix to use for `CustomEvent`s generated by `regular-layout`, e.g.
+ * `"regular-layout-before-update"`.
+ */
+export const CUSTOM_EVENT_NAME_PREFIX = "regular-layout";
 
 /**
  * The minimum number of pixels the mouse must move to be considered a drag.
@@ -32,6 +38,12 @@ export const MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD = 0.15;
  */
 export const SPLIT_EDGE_TOLERANCE = 0.25;
 
+/**
+ * Threshold from _container_ edge that is considered a split action on the root
+ * node.
+ */
+export const SPLIT_ROOT_EDGE_TOLERANCE = 0.01;
+
 /**
  * Tolerance threshold for considering two grid track positions as identical.
  *
@@ -44,3 +56,8 @@ export const GRID_TRACK_COLLAPSE_TOLERANCE = 0.001;
  * The overlay default behavior.
  */
 export const OVERLAY_DEFAULT: OverlayMode = "absolute";
+
+/**
+ * Width of split panel dividers in pixels (for hit-test purposes).
+ */
+export const GRID_DIVIDER_SIZE = 6;

package/src/{common → layout}/flatten.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";
 
 /**
  * Flattens the layout tree by merging parent and child split panels that have

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

@@ -10,8 +10,7 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { GRID_TRACK_COLLAPSE_TOLERANCE } from "./constants.ts";
-import type { Layout } from "./layout_config.ts";
-import { remove_child } from "./remove_child.ts";
+import type { Layout } from "./types.ts";
 
 interface GridCell {
 	child: string;
@@ -21,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,
@@ -50,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[],
@@ -108,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,
@@ -133,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,
@@ -151,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.
@@ -191,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(
@@ -200,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,20 +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(
 	slot: string,
-	{
-		view_window: { row_start, row_end, col_start, col_end },
-		box,
-	}: LayoutPath<DOMRect>,
+	box: DOMRect,
+	style: CSSStyleDeclaration,
+	drag_target: LayoutPath<undefined> | null,
 ) {
-	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([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}}`;
 }