regular-layout 0.2.0 → 0.2.2

package/src/regular-layout-frame.ts

@@ -9,8 +9,7 @@
 // ┃  *  [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 { LayoutPath } from "./layout/types.ts";
 import type { RegularLayoutEvent } from "./extensions.ts";
 import type { RegularLayout } from "./regular-layout.ts";
 import type { RegularLayoutTab } from "./regular-layout-tab.ts";
@@ -30,6 +29,8 @@ const HTML_TEMPLATE = `
 	<slot part="container"></slot>
 `;
 
+type DragState = { moved?: boolean; path: LayoutPath };
+
 /**
  * A custom element that represents a draggable panel within a
  * `<regular-layout>`.
@@ -56,29 +57,31 @@ const HTML_TEMPLATE = `
  * ```
  */
 export class RegularLayoutFrame extends HTMLElement {
-	private _shadowRoot: ShadowRoot;
-	private _container_sheet: CSSStyleSheet;
+	private _shadowRoot!: ShadowRoot;
+	private _container_sheet!: CSSStyleSheet;
 	private _layout!: RegularLayout;
 	private _header!: HTMLElement;
-	private _drag_state: LayoutPath<Layout> | null = null;
-	private _drag_moved: boolean = false;
+	private _drag: DragState | null = null;
 	private _tab_to_index_map: WeakMap<RegularLayoutTab, 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];
-	}
 
+	/**
+	 * Initializes this elements. Override this method and
+	 * `disconnectedCallback` to modify how this subclass renders the Shadow
+	 * DOM and registers events.
+	 */
 	connectedCallback() {
+		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 = HTML_TEMPLATE;
 		this._layout = this.parentElement as RegularLayout;
 		this._header = this._shadowRoot.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.addEventListener("pointermove", this.onPointerMove);
+		this.addEventListener("pointerup", this.onPointerUp);
+		this.addEventListener("pointercancel", this.onPointerCancel);
+		this.addEventListener("lostpointercapture", this.onPointerLost);
 		this._layout.addEventListener("regular-layout-update", this.drawTabs);
 		this._layout.addEventListener(
 			"regular-layout-before-update",
@@ -86,11 +89,15 @@ export class RegularLayoutFrame extends HTMLElement {
 		);
 	}
 
+	/**
+	 * Destroys this element.
+	 */
 	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.removeEventListener("pointermove", this.onPointerMove);
+		this.removeEventListener("pointerup", this.onPointerUp);
+		this.removeEventListener("pointercancel", this.onPointerUp);
+		this.removeEventListener("lostpointercapture", this.onPointerLost);
 		this._layout.removeEventListener("regular-layout-update", this.drawTabs);
 		this._layout.removeEventListener(
 			"regular-layout-before-update",
@@ -101,71 +108,52 @@ export class RegularLayoutFrame extends HTMLElement {
 	private onPointerDown = (event: PointerEvent): void => {
 		const elem = event.target as RegularLayoutTab;
 		if (elem.part.contains("tab")) {
-			this._drag_state = this._layout.calculateIntersect(
-				event.clientX,
-				event.clientY,
-			);
-
-			if (this._drag_state) {
-				this._header.setPointerCapture(event.pointerId);
+			const path = this._layout.calculateIntersect(event);
+			if (path) {
+				this._drag = { path };
+				this.setPointerCapture(event.pointerId);
 				event.preventDefault();
+			} else {
+				this._drag = null;
 			}
 		}
 	};
 
 	private onPointerMove = (event: PointerEvent): void => {
-		if (this._drag_state) {
-			// Only initiate a drag if the cursor has moved sufficiently.
-			if (!this._drag_moved) {
-				const [current_col, current_row, box] =
-					this._layout.relativeCoordinates(event.clientX, event.clientY);
-
-				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 (this._drag) {
+			const physics = this._layout.savePhysics();
+			if (!this._drag.moved) {
+				const diff = this._layout.diffCoordinates(event, this._drag.path);
+				if (diff <= physics.MIN_DRAG_DISTANCE) {
 					return;
 				}
 			}
 
-			this._drag_moved = true;
-			this._layout.setOverlayState(
-				event.clientX,
-				event.clientY,
-				this._drag_state,
-				OVERLAY_CLASSNAME,
-			);
+			this._drag.moved = true;
+			this._layout.setOverlayState(event, this._drag.path);
 		}
 	};
 
 	private onPointerUp = (event: PointerEvent): void => {
-		if (this._drag_state && this._drag_moved) {
-			this._layout.clearOverlayState(
-				event.clientX,
-				event.clientY,
-				this._drag_state,
-				OVERLAY_CLASSNAME,
-			);
+		if (this._drag?.moved) {
+			this._layout.clearOverlayState(event, this._drag.path);
 		}
-
-		// 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;
 	};
 
-	private onPointerLost = (event: PointerEvent): void => {
-		if (this._drag_state) {
-			this._layout.clearOverlayState(-1, -1, this._drag_state);
+	private onPointerCancel = (_: PointerEvent): void => {
+		if (this._drag?.moved) {
+			this._layout.clearOverlayState(null, this._drag.path);
 		}
+	};
 
-		this._header.releasePointerCapture(event.pointerId);
-		this._drag_state = null;
-		this._drag_moved = false;
+	private onPointerLost = (event: PointerEvent): void => {
+		this.releasePointerCapture(event.pointerId);
+		this._drag = null;
 	};
 
 	private drawTabs = (event: RegularLayoutEvent) => {
-		const slot = this.getAttribute("name");
+		const attr = this._layout.savePhysics().CHILD_ATTRIBUTE_NAME;
+		const slot = this.getAttribute(attr);
 		if (!slot) {
 			return;
 		}
@@ -175,12 +163,12 @@ export class RegularLayoutFrame extends HTMLElement {
 		if (!new_tab_panel) {
 			new_tab_panel = {
 				type: "child-panel",
-				child: [slot],
+				tabs: [slot],
 				selected: 0,
 			};
 		}
 
-		for (let i = 0; i < new_tab_panel.child.length; i++) {
+		for (let i = 0; i < new_tab_panel.tabs.length; i++) {
 			if (i >= this._header.children.length) {
 				const new_tab = document.createElement("regular-layout-tab");
 				new_tab.populate(this._layout, new_tab_panel, i);
@@ -192,7 +180,7 @@ export class RegularLayoutFrame extends HTMLElement {
 			}
 		}
 
-		const last_index = new_tab_panel.child.length;
+		const last_index = new_tab_panel.tabs.length;
 		for (let j = this._header.children.length - 1; j >= last_index; j--) {
 			this._header.removeChild(this._header.children[j]);
 		}

package/src/regular-layout-tab.ts

@@ -40,11 +40,11 @@ export class RegularLayoutTab extends HTMLElement {
 				(index === this._tab_panel?.selected);
 
 			const index_changed =
-				tab_changed || this._tab_panel?.child[index] !== tab_panel.child[index];
+				tab_changed || this._tab_panel?.tabs[index] !== tab_panel.tabs[index];
 
 			if (index_changed) {
 				const selected = tab_panel.selected === index;
-				const slot = tab_panel.child[index];
+				const slot = tab_panel.tabs[index];
 				this.children[0].textContent = slot;
 
 				if (selected) {
@@ -56,7 +56,7 @@ export class RegularLayoutTab extends HTMLElement {
 				}
 			}
 		} else {
-			const slot = tab_panel.child[index];
+			const slot = tab_panel.tabs[index];
 			const selected = tab_panel.selected === index;
 			const parts = selected ? "active-close close" : "close";
 			this.innerHTML = `<div part="title"></div><button part="${parts}"></button>`;
@@ -78,7 +78,7 @@ export class RegularLayoutTab extends HTMLElement {
 
 	private onTabClose = (_: Event) => {
 		if (this._tab_panel !== undefined && this._index !== undefined) {
-			this._layout?.removePanel(this._tab_panel.child[this._index]);
+			this._layout?.removePanel(this._tab_panel.tabs[this._index]);
 		}
 	};
 
@@ -90,7 +90,7 @@ export class RegularLayoutTab extends HTMLElement {
 		) {
 			const new_layout = this._layout?.save();
 			const new_tab_panel = this._layout?.getPanel(
-				this._tab_panel.child[this._index],
+				this._tab_panel.tabs[this._index],
 				new_layout,
 			);