regular-layout 0.2.0 → 0.2.1

package/src/layout/generate_grid.ts

@@ -9,7 +9,7 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { GRID_TRACK_COLLAPSE_TOLERANCE } from "./constants.ts";
+import { DEFAULT_PHYSICS, type Physics } from "./constants.ts";
 import type { Layout } from "./types.ts";
 
 interface GridCell {
@@ -20,10 +20,11 @@ interface GridCell {
 	rowEnd: number;
 }
 
-function dedupe_sort(result: number[], pos: number) {
+function dedupe_sort(physics: Physics, result: number[], pos: number) {
 	if (
 		result.length === 0 ||
-		Math.abs(pos - result[result.length - 1]) > GRID_TRACK_COLLAPSE_TOLERANCE
+		Math.abs(pos - result[result.length - 1]) >
+			physics.GRID_TRACK_COLLAPSE_TOLERANCE
 	) {
 		result.push(pos);
 	}
@@ -31,9 +32,9 @@ function dedupe_sort(result: number[], pos: number) {
 	return result;
 }
 
-function dedupe_positions(positions: number[]): number[] {
+function dedupe_positions(physics: Physics, positions: number[]): number[] {
 	const sorted = positions.sort((a, b) => a - b);
-	return sorted.reduce(dedupe_sort, []);
+	return sorted.reduce(dedupe_sort.bind(undefined, physics), []);
 }
 
 function collect_track_positions(
@@ -41,6 +42,7 @@ function collect_track_positions(
 	orientation: "horizontal" | "vertical",
 	start: number,
 	end: number,
+	physics: Physics,
 ): number[] {
 	if (panel.type === "child-panel") {
 		return [start, end];
@@ -59,6 +61,7 @@ function collect_track_positions(
 					orientation,
 					current,
 					next,
+					physics,
 				),
 			);
 
@@ -67,17 +70,21 @@ function collect_track_positions(
 	} else {
 		for (const child of panel.children) {
 			positions.push(
-				...collect_track_positions(child, orientation, start, end),
+				...collect_track_positions(child, orientation, start, end, physics),
 			);
 		}
 	}
 
-	return dedupe_positions(positions);
+	return dedupe_positions(physics, positions);
 }
 
-function find_track_index(positions: number[], value: number): number {
+function find_track_index(
+	physics: Physics,
+	positions: number[],
+	value: number,
+): number {
 	const index = positions.findIndex(
-		(pos) => Math.abs(pos - value) < GRID_TRACK_COLLAPSE_TOLERANCE,
+		(pos) => Math.abs(pos - value) < physics.GRID_TRACK_COLLAPSE_TOLERANCE,
 	);
 
 	return index === -1 ? 0 : index;
@@ -91,16 +98,17 @@ function build_cells(
 	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: find_track_index(colPositions, colStart),
-				colEnd: find_track_index(colPositions, colEnd),
-				rowStart: find_track_index(rowPositions, rowStart),
-				rowEnd: find_track_index(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),
 			},
 		];
 	}
@@ -122,6 +130,7 @@ function build_cells(
 					next,
 					rowStart,
 					rowEnd,
+					physics,
 				),
 			);
 		} else {
@@ -134,6 +143,7 @@ function build_cells(
 					colEnd,
 					current,
 					next,
+					physics,
 				),
 			);
 		}
@@ -147,8 +157,13 @@ function build_cells(
 const host_template = (rowTemplate: string, colTemplate: string) =>
 	`: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([name="${slot}"]){display:flex;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.
@@ -182,12 +197,15 @@ const child_template = (slot: string, rowPart: string, colPart: string) =>
  */
 export function create_css_grid_layout(
 	layout: Layout,
-	round: boolean = false,
 	overlay?: [string, string],
+	physics: Physics = DEFAULT_PHYSICS,
 ): string {
 	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 createTemplate = (positions: number[]) => {
@@ -195,26 +213,52 @@ export function create_css_grid_layout(
 			.slice(0, -1)
 			.map((pos, i) => positions[i + 1] - pos);
 		return sizes
-			.map((s) => `${round ? Math.round(s * 100) : s * 100}fr`)
+			.map((s) => `${physics.SHOULD_ROUND ? Math.round(s * 100) : s * 100}fr`)
 			.join(" ");
 	};
 
-	const colPositions = collect_track_positions(layout, "horizontal", 0, 1);
+	const colPositions = collect_track_positions(
+		layout,
+		"horizontal",
+		0,
+		1,
+		physics,
+	);
+
 	const colTemplate = createTemplate(colPositions);
-	const rowPositions = collect_track_positions(layout, "vertical", 0, 1);
+	const rowPositions = collect_track_positions(
+		layout,
+		"vertical",
+		0,
+		1,
+		physics,
+	);
+
 	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 cells = build_cells(
+		layout,
+		colPositions,
+		rowPositions,
+		0,
+		1,
+		0,
+		1,
+		physics,
+	);
+
 	const css = [host_template(rowTemplate, colTemplate)];
 	for (const cell of cells) {
 		const colPart = formatGridLine(cell.colStart, cell.colEnd);
 		const rowPart = formatGridLine(cell.rowStart, cell.rowEnd);
-		css.push(child_template(cell.child, rowPart, colPart));
+		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([name=${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/layout/generate_overlay.ts

@@ -9,6 +9,7 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+import { DEFAULT_PHYSICS } from "./constants";
 import type { LayoutPath } from "./types";
 
 export function updateOverlaySheet(
@@ -16,9 +17,10 @@ export function updateOverlaySheet(
 	box: DOMRect,
 	style: CSSStyleDeclaration,
 	drag_target: LayoutPath<undefined> | null,
+	physics = DEFAULT_PHYSICS,
 ) {
 	if (!drag_target) {
-		return `:host ::slotted([name="${slot}"]){display:none;}`;
+		return `:host ::slotted([${physics.CHILD_ATTRIBUTE_NAME}="${slot}"]){display:none;}`;
 	}
 
 	const {
@@ -36,5 +38,5 @@ export function updateOverlaySheet(
 	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}}`;
+	return `::slotted([${physics.CHILD_ATTRIBUTE_NAME}="${slot}"]){${css}}`;
 }

package/src/layout/redistribute_panel_sizes.ts

@@ -9,7 +9,7 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD } from "./constants.ts";
+import { DEFAULT_PHYSICS } from "./constants.ts";
 import type { Layout } from "./types.ts";
 
 /**
@@ -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/layout/types.ts

@@ -34,6 +34,7 @@ export interface ViewWindow {
 	col_end: number;
 }
 
+
 /**
  * A split panel that divides space among multiple child layouts
  * .

package/src/regular-layout-frame.ts

@@ -9,7 +9,6 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { MIN_DRAG_DISTANCE, OVERLAY_CLASSNAME } from "./layout/constants.ts";
 import type { Layout, LayoutPath } from "./layout/types.ts";
 import type { RegularLayoutEvent } from "./extensions.ts";
 import type { RegularLayout } from "./regular-layout.ts";
@@ -115,6 +114,8 @@ export class RegularLayoutFrame extends HTMLElement {
 
 	private onPointerMove = (event: PointerEvent): void => {
 		if (this._drag_state) {
+			const physics = this._layout.savePhysics();
+
 			// Only initiate a drag if the cursor has moved sufficiently.
 			if (!this._drag_moved) {
 				const [current_col, current_row, box] =
@@ -122,7 +123,7 @@ export class RegularLayoutFrame extends HTMLElement {
 
 				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) {
+				if (Math.sqrt(dx * dx + dy * dy) <= physics.MIN_DRAG_DISTANCE) {
 					return;
 				}
 			}
@@ -132,7 +133,7 @@ export class RegularLayoutFrame extends HTMLElement {
 				event.clientX,
 				event.clientY,
 				this._drag_state,
-				OVERLAY_CLASSNAME,
+				physics.OVERLAY_CLASSNAME,
 			);
 		}
 	};
@@ -143,7 +144,6 @@ export class RegularLayoutFrame extends HTMLElement {
 				event.clientX,
 				event.clientY,
 				this._drag_state,
-				OVERLAY_CLASSNAME,
 			);
 		}
 
@@ -165,7 +165,10 @@ export class RegularLayoutFrame extends HTMLElement {
 	};
 
 	private drawTabs = (event: RegularLayoutEvent) => {
-		const slot = this.getAttribute("name");
+		const slot = this.getAttribute(
+			this._layout.savePhysics().CHILD_ATTRIBUTE_NAME,
+		);
+
 		if (!slot) {
 			return;
 		}

package/src/regular-layout.ts

@@ -34,9 +34,9 @@ import { updateOverlaySheet } from "./layout/generate_overlay.ts";
 import { calculate_edge } from "./layout/calculate_edge.ts";
 import { flatten } from "./layout/flatten.ts";
 import {
-	CUSTOM_EVENT_NAME_PREFIX,
-	OVERLAY_CLASSNAME,
-	OVERLAY_DEFAULT,
+	DEFAULT_PHYSICS,
+	type PhysicsUpdate,
+	type Physics,
 } from "./layout/constants.ts";
 
 /**
@@ -80,9 +80,11 @@ export class RegularLayout extends HTMLElement {
 	private _drag_target?: [LayoutDivider, number, number];
 	private _cursor_override: boolean;
 	private _dimensions?: { box: DOMRect; style: CSSStyleDeclaration };
+	private _physics: Physics;
 
 	constructor() {
 		super();
+		this._physics = DEFAULT_PHYSICS;
 		this._panel = structuredClone(EMPTY_PANEL);
 
 		// Why does this implementation use a `<slot>` at all? We must use
@@ -130,12 +132,12 @@ export class RegularLayout extends HTMLElement {
 		y: number,
 		check_dividers: boolean = false,
 	): LayoutPath<Layout> | null => {
-		const [col, row, box] = this.relativeCoordinates(x, y, false);
+		const [col, row, rect] = this.relativeCoordinates(x, y, false);
 		const panel = calculate_intersection(
 			col,
 			row,
 			this._panel,
-			check_dividers ? box : null,
+			check_dividers ? { rect, size: this._physics.GRID_DIVIDER_SIZE } : null,
 		);
 
 		if (panel?.type === "layout-path") {
@@ -163,31 +165,47 @@ export class RegularLayout extends HTMLElement {
 		x: number,
 		y: number,
 		{ slot }: LayoutPath<unknown>,
-		className: string = OVERLAY_CLASSNAME,
-		mode: OverlayMode = OVERLAY_DEFAULT,
+		className: string = this._physics.OVERLAY_CLASSNAME,
+		mode: OverlayMode = this._physics.OVERLAY_DEFAULT,
 	) => {
 		const panel = remove_child(this._panel, slot);
 		Array.from(this.children)
-			.find((x) => x.getAttribute("name") === slot)
+			.find((x) => x.getAttribute(this._physics.CHILD_ATTRIBUTE_NAME) === slot)
 			?.classList.add(className);
 
 		const [col, row, box, style] = this.relativeCoordinates(x, y, false);
 		let drop_target = calculate_intersection(col, row, panel);
 		if (drop_target) {
-			drop_target = calculate_edge(col, row, panel, slot, drop_target, box);
+			drop_target = calculate_edge(
+				col,
+				row,
+				panel,
+				slot,
+				drop_target,
+				box,
+				this._physics,
+			);
 		}
 
 		if (mode === "grid" && drop_target) {
 			const path: [string, string] = [slot, drop_target?.slot];
-			const css = create_css_grid_layout(panel, false, path);
+			const css = create_css_grid_layout(panel, path, this._physics);
 			this._stylesheet.replaceSync(css);
 		} else if (mode === "absolute") {
-			const grid_css = create_css_grid_layout(panel);
-			const overlay_css = updateOverlaySheet(slot, box, style, drop_target);
+			const grid_css = create_css_grid_layout(panel, undefined, this._physics);
+
+			const overlay_css = updateOverlaySheet(
+				slot,
+				box,
+				style,
+				drop_target,
+				this._physics,
+			);
+
 			this._stylesheet.replaceSync([grid_css, overlay_css].join("\n"));
 		}
 
-		const event_name = `${CUSTOM_EVENT_NAME_PREFIX}-before-update`;
+		const event_name = `${this._physics.CUSTOM_EVENT_NAME_PREFIX}-before-update`;
 		const event = new CustomEvent<Layout>(event_name, { detail: panel });
 		this.dispatchEvent(event);
 	};
@@ -208,12 +226,16 @@ export class RegularLayout extends HTMLElement {
 		x: number,
 		y: number,
 		drag_target: LayoutPath<Layout>,
-		className: string = OVERLAY_CLASSNAME,
+		className: string = this._physics.OVERLAY_CLASSNAME,
 	) => {
 		let panel = this._panel;
 		panel = remove_child(panel, drag_target.slot);
 		Array.from(this.children)
-			.find((x) => x.getAttribute("name") === drag_target.slot)
+			.find(
+				(x) =>
+					x.getAttribute(this._physics.CHILD_ATTRIBUTE_NAME) ===
+					drag_target.slot,
+			)
 			?.classList.remove(className);
 
 		const [col, row, box] = this.relativeCoordinates(x, y, false);
@@ -226,6 +248,7 @@ export class RegularLayout extends HTMLElement {
 				drag_target.slot,
 				drop_target,
 				box,
+				this._physics,
 			);
 		}
 
@@ -323,9 +346,10 @@ export class RegularLayout extends HTMLElement {
 	 */
 	restore = (layout: Layout, _is_flattened: boolean = false) => {
 		this._panel = !_is_flattened ? flatten(layout) : layout;
-		const css = create_css_grid_layout(this._panel);
+		const css = create_css_grid_layout(this._panel, undefined, this._physics);
+
 		this._stylesheet.replaceSync(css);
-		const event_name = `${CUSTOM_EVENT_NAME_PREFIX}-update`;
+		const event_name = `${this._physics.CUSTOM_EVENT_NAME_PREFIX}-update`;
 		const event = new CustomEvent<Layout>(event_name, { detail: this._panel });
 		this.dispatchEvent(event);
 	};
@@ -346,6 +370,27 @@ export class RegularLayout extends HTMLElement {
 		return structuredClone(this._panel);
 	};
 
+	/**
+	 * Override this instance's global constants.
+	 *
+	 * @param physics
+	 */
+	restorePhysics(physics: PhysicsUpdate) {
+		this._physics = Object.freeze({
+			...this._physics,
+			...physics,
+		});
+	}
+
+	/**
+	 * Get this instance's constants.
+	 *
+	 * @returns The current constants
+	 */
+	savePhysics(): Physics {
+		return this._physics;
+	}
+
 	/**
 	 * Converts screen coordinates to relative layout coordinates.
 	 *
@@ -388,13 +433,16 @@ export class RegularLayout extends HTMLElement {
 	};
 
 	private onPointerDown = (event: PointerEvent) => {
-		if (event.target === this) {
-			const [col, row, box] = this.relativeCoordinates(
+		if (!this._physics.GRID_DIVIDER_CHECK_TARGET || event.target === this) {
+			const [col, row, rect] = this.relativeCoordinates(
 				event.clientX,
 				event.clientY,
 			);
 
-			const hit = calculate_intersection(col, row, this._panel, box);
+			const hit = calculate_intersection(col, row, this._panel, {
+				rect,
+				size: this._physics.GRID_DIVIDER_SIZE,
+			});
 			if (hit && hit.type !== "layout-path") {
 				this._drag_target = [hit, col, row];
 				this.setPointerCapture(event.pointerId);
@@ -414,22 +462,37 @@ export class RegularLayout extends HTMLElement {
 			const [{ path, type }, old_col, old_row] = this._drag_target;
 			const offset = type === "horizontal" ? old_col - col : old_row - row;
 			const panel = redistribute_panel_sizes(this._panel, path, offset);
-			this._stylesheet.replaceSync(create_css_grid_layout(panel));
-		} else if (event.target === this) {
-			const [col, row, box] = this.relativeCoordinates(
-				event.clientX,
-				event.clientY,
-				false,
+			this._stylesheet.replaceSync(
+				create_css_grid_layout(panel, undefined, this._physics),
 			);
+		}
 
-			const divider = calculate_intersection(col, row, this._panel, box);
-			if (divider?.type === "vertical") {
-				this._cursor_stylesheet.replaceSync(":host{cursor:row-resize");
-				this._cursor_override = true;
-			} else if (divider?.type === "horizontal") {
-				this._cursor_stylesheet.replaceSync(":host{cursor:col-resize");
-				this._cursor_override = true;
+		if (this._physics.GRID_DIVIDER_CHECK_TARGET && event.target !== this) {
+			if (this._cursor_override) {
+				this._cursor_override = false;
+				this._cursor_stylesheet.replaceSync("");
 			}
+
+			return;
+		}
+
+		const [col, row, rect] = this.relativeCoordinates(
+			event.clientX,
+			event.clientY,
+			false,
+		);
+
+		const divider = calculate_intersection(col, row, this._panel, {
+			rect,
+			size: this._physics.GRID_DIVIDER_SIZE,
+		});
+
+		if (divider?.type === "vertical") {
+			this._cursor_stylesheet.replaceSync(":host{cursor:row-resize");
+			this._cursor_override = true;
+		} else if (divider?.type === "horizontal") {
+			this._cursor_stylesheet.replaceSync(":host{cursor:col-resize");
+			this._cursor_override = true;
 		} else if (this._cursor_override) {
 			this._cursor_override = false;
 			this._cursor_stylesheet.replaceSync("");

package/themes/lorax.css

@@ -18,7 +18,7 @@ regular-layout.lorax {
 regular-layout.lorax regular-layout-frame {
     margin: 3px;
     margin-top: 27px;
-    border-radius: 0 0 6px 6px;
+    border-radius: 0 6px 6px 6px;
     border: 1px solid #666;
     box-shadow: 0px 6px 6px -4px rgba(150, 150, 180);
 }
@@ -30,6 +30,7 @@ regular-layout.lorax regular-layout-frame::part(titlebar) {
     margin-right: -1px;
     margin-bottom: 0px;
     margin-top: -24px;
+    padding-right: 6px;
 }
 
 regular-layout.lorax regular-layout-frame::part(tab) {