regular-layout 0.0.1 → 0.0.2

package/src/regular-layout-frame.ts

@@ -10,16 +10,19 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import type { LayoutPath } from "./common/layout_config.ts";
+import type { RegularLayoutEvent } from "./extensions.ts";
 import type { RegularLayout } from "./regular-layout.ts";
 
 const CSS = `
 :host{--titlebar--height:24px;box-sizing:border-box}
 :host([slot]){margin-top:calc(var(--titlebar--height) + 3px)!important;}
 :host([slot])::part(container){position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;background-color:inherit;border-radius:inherit}
-:host([slot])::part(titlebar){height:var(--titlebar--height);margin-top:calc(-2px - var(--titlebar--height));user-select: none;}
+:host([slot])::part(titlebar){height:var(--titlebar--height);margin-top:calc(0px - var(--titlebar--height));user-select: none;}
 :host([slot])::part(body){flex:1 1 auto;}
 `;
 
+const HTML_TEMPLATE = `<slot part="container"><slot part="titlebar"></slot><slot part="body"><slot></slot></slot></slot>`;
+
 /**
  * A custom element that represents a draggable panel within a
  * `<regular-layout>`.
@@ -51,27 +54,74 @@ export class RegularLayoutFrame extends HTMLElement {
 	private _layout!: RegularLayout;
 	private _header!: HTMLElement;
 	private _drag_state: LayoutPath<DOMRect> | null = null;
+	private _drag_moved: boolean = false;
+	private _tab_to_index_map: WeakMap<HTMLDivElement, number> = new WeakMap();
 	constructor() {
 		super();
 		this._container_sheet = new CSSStyleSheet();
 		this._container_sheet.replaceSync(CSS);
 		this._shadowRoot = this.attachShadow({ mode: "open" });
 		this._shadowRoot.adoptedStyleSheets = [this._container_sheet];
-		this._shadowRoot.innerHTML = `<slot part="container"><slot part="titlebar">header</slot><slot part="body"><slot></slot></slot></slot>`;
-		this._layout = this.parentElement as RegularLayout;
-		this._header = this._shadowRoot.children[0].children[0] as HTMLElement;
+		this.drawTabs = this.drawTabs.bind(this);
+		this.onPointerDown = this.onPointerDown.bind(this);
+		this.onPointerMove = this.onPointerMove.bind(this);
+		this.onPointerUp = this.onPointerUp.bind(this);
+		this.onPointerLost = this.onPointerLost.bind(this);
 	}
 
 	connectedCallback() {
+		this._shadowRoot.innerHTML = HTML_TEMPLATE;
+		this._layout = this.parentElement as RegularLayout;
+		this._header = this._shadowRoot.children[0].children[0] as HTMLElement;
 		this._header.addEventListener("pointerdown", this.onPointerDown);
 		this._header.addEventListener("pointermove", this.onPointerMove);
 		this._header.addEventListener("pointerup", this.onPointerUp);
+		this._header.addEventListener("lostpointercapture", this.onPointerLost);
+		this._layout.addEventListener("regular-layout-update", this.drawTabs);
 	}
 
 	disconnectedCallback() {
 		this._header.removeEventListener("pointerdown", this.onPointerDown);
 		this._header.removeEventListener("pointermove", this.onPointerMove);
 		this._header.removeEventListener("pointerup", this.onPointerUp);
+		this._header.removeEventListener("lostpointercapture", this.onPointerLost);
+		this._layout.removeEventListener("regular-layout-update", this.drawTabs);
+	}
+
+	private drawTabs(event: RegularLayoutEvent) {
+		const slot = this.getAttribute("slot");
+		if (slot) {
+			const result = this._layout.getPanel(slot, event.detail);
+			this._header.textContent = "";
+			if (!result) {
+				return;
+			}
+
+			for (let e = 0; e < (result?.child?.length || 0); e++) {
+				const elem = result?.child[e];
+				const div = document.createElement("div");
+				this._tab_to_index_map.set(div, e);
+				// div.dataset.index = `${e}`;
+				div.textContent = elem || "";
+				div.setAttribute(
+					"part",
+					e === (result?.selected || 0) ? "tab active-tab" : "tab",
+				);
+
+				const x = e;
+				if (e !== (result?.selected || 0)) {
+					div.addEventListener("pointerdown", (pointerEvent: PointerEvent) => {
+						result.selected = x;
+						this._layout.restore(event.detail);
+						pointerEvent.preventDefault();
+						pointerEvent.stopImmediatePropagation();
+						pointerEvent.stopPropagation();
+					});
+				}
+
+				this._header.appendChild(div);
+			}
+		}
 	}
 
 	private onPointerDown = (event: PointerEvent): void => {
@@ -80,17 +130,25 @@ export class RegularLayoutFrame extends HTMLElement {
 			event.clientY,
 		);
 
-		if (!this._drag_state) {
-			return;
-		}
+		if (this._drag_state) {
+			const elem = event.target as HTMLDivElement;
+			if (elem.part.contains("tab")) {
+				const last_index = this._drag_state.path.length - 1;
+				const selected = this._tab_to_index_map.get(elem);
+				if (selected) {
+					this._drag_state.path[last_index] = selected;
+				}
+			}
 
-		this._header.setPointerCapture(event.pointerId);
-		event.preventDefault();
-		event.stopImmediatePropagation();
+			this._header.setPointerCapture(event.pointerId);
+			// event.preventDefault();
+			// event.stopImmediatePropagation();
+		}
 	};
 
 	private onPointerMove = (event: PointerEvent): void => {
 		if (this._drag_state) {
+			this._drag_moved = true;
 			this._layout.setOverlayState(
 				event.clientX,
 				event.clientY,
@@ -100,15 +158,28 @@ export class RegularLayoutFrame extends HTMLElement {
 	};
 
 	private onPointerUp = (event: PointerEvent): void => {
-		if (this._drag_state) {
+		if (this._drag_state && this._drag_moved) {
 			this._layout.clearOverlayState(
 				event.clientX,
 				event.clientY,
 				this._drag_state,
 			);
+		}
+
+		// TODO This may be handled by `onPointerLost`, not sure if this is
+		// browser-specific behavior ...
+		this._header.releasePointerCapture(event.pointerId);
+		this._drag_state = null;
+		this._drag_moved = false;
+	};
 
-			this._header.releasePointerCapture(event.pointerId);
-			this._drag_state = null;
+	private onPointerLost = (event: PointerEvent): void => {
+		if (this._drag_state) {
+			this._layout.clearOverlayState(-1, -1, this._drag_state);
 		}
+
+		this._header.releasePointerCapture(event.pointerId);
+		this._drag_state = null;
+		this._drag_moved = false;
 	};
 }

package/src/regular-layout.ts

@@ -16,12 +16,17 @@
  * @packageDocumentation
  */
 
-import { EMPTY_PANEL, iter_panel_children } from "./common/layout_config.ts";
+import {
+	EMPTY_PANEL,
+	iter_panel_children,
+	OVERLAY_DEFAULT,
+} from "./common/layout_config.ts";
 import { create_css_grid_layout } from "./common/generate_grid.ts";
 import type {
 	LayoutPath,
 	Layout,
 	LayoutDivider,
+	TabLayout,
 } from "./common/layout_config.ts";
 import { calculate_intersection } from "./common/calculate_intersect.ts";
 import { remove_child } from "./common/remove_child.ts";
@@ -31,10 +36,6 @@ import { updateOverlaySheet } from "./common/generate_overlay.ts";
 import { calculate_split } from "./common/calculate_split.ts";
 import { flatten } from "./common/flatten.ts";
 
-export type OverlayMode = "grid" | "absolute" | "interactive";
-
-const OVERLAY_DEFAULT: OverlayMode = "absolute";
-
 /**
  * A Web Component that provides a resizable panel layout system.
  * Panels are arranged using CSS Grid and can be resized by dragging dividers.
@@ -129,9 +130,6 @@ export class RegularLayout extends HTMLElement {
 		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));
@@ -145,7 +143,13 @@ export class RegularLayout extends HTMLElement {
 				const css = `${create_css_grid_layout(panel)}\n${updateOverlaySheet({ ...drop_target, box })}`;
 				this._stylesheet.replaceSync(css);
 			}
+		} else {
+			const css = `${create_css_grid_layout(panel)}}`;
+			this._stylesheet.replaceSync(css);
 		}
+
+		const event = new CustomEvent("regular-layout-update", { detail: panel });
+		this.dispatchEvent(event);
 	}
 
 	/**
@@ -184,9 +188,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,
+			),
+		);
 	}
 
 	/**
@@ -208,6 +220,24 @@ export class RegularLayout extends HTMLElement {
 		this.restore(remove_child(this._panel, name));
 	}
 
+	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.
@@ -230,6 +260,10 @@ export class RegularLayout extends HTMLElement {
 		return null;
 	}
 
+	clear() {
+		this.restore(EMPTY_PANEL);
+	}
+
 	/**
 	 * Restores the layout from a saved state.
 	 *
@@ -264,6 +298,9 @@ export class RegularLayout extends HTMLElement {
 				this._slots.delete(key);
 			}
 		}
+
+		const event = new CustomEvent("regular-layout-update", { detail: layout });
+		this.dispatchEvent(event);
 	}
 
 	/**
@@ -293,13 +330,15 @@ export class RegularLayout extends HTMLElement {
 	}
 
 	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();
+		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();
+				// event.stopImmediatePropagation();
+			}
 		}
 	}