@octanejs/resizable-panels 0.0.1

package/src/global/cursor/getCursorStyle.ts

@@ -0,0 +1,102 @@
+import type { RegisteredGroup } from '../../components/group/types';
+import {
+	CURSOR_FLAG_HORIZONTAL_MAX,
+	CURSOR_FLAG_HORIZONTAL_MIN,
+	CURSOR_FLAG_VERTICAL_MAX,
+	CURSOR_FLAG_VERTICAL_MIN,
+} from '../../constants';
+import type { InteractionState } from '../mutable-state/types';
+import { supportsAdvancedCursorStyles } from './supportsAdvancedCursorStyles';
+
+export function getCursorStyle({
+	cursorFlags,
+	groups,
+	state,
+}: {
+	cursorFlags: number;
+	groups: RegisteredGroup[];
+	state: InteractionState['state'];
+}): CSSStyleDeclaration['cursor'] | undefined {
+	let horizontalCount = 0;
+	let verticalCount = 0;
+
+	switch (state) {
+		case 'active':
+		case 'hover': {
+			groups.forEach((group) => {
+				if (group.mutableState.disableCursor) {
+					return;
+				}
+
+				switch (group.orientation) {
+					case 'horizontal': {
+						horizontalCount++;
+						break;
+					}
+					case 'vertical': {
+						verticalCount++;
+						break;
+					}
+				}
+			});
+		}
+	}
+
+	if (horizontalCount === 0 && verticalCount === 0) {
+		return undefined;
+	}
+
+	switch (state) {
+		case 'active': {
+			if (cursorFlags) {
+				if (supportsAdvancedCursorStyles()) {
+					const horizontalMin = (cursorFlags & CURSOR_FLAG_HORIZONTAL_MIN) !== 0;
+					const horizontalMax = (cursorFlags & CURSOR_FLAG_HORIZONTAL_MAX) !== 0;
+					const verticalMin = (cursorFlags & CURSOR_FLAG_VERTICAL_MIN) !== 0;
+					const verticalMax = (cursorFlags & CURSOR_FLAG_VERTICAL_MAX) !== 0;
+
+					if (horizontalMin) {
+						if (verticalMin) {
+							return 'se-resize';
+						} else if (verticalMax) {
+							return 'ne-resize';
+						} else {
+							return 'e-resize';
+						}
+					} else if (horizontalMax) {
+						if (verticalMin) {
+							return 'sw-resize';
+						} else if (verticalMax) {
+							return 'nw-resize';
+						} else {
+							return 'w-resize';
+						}
+					} else if (verticalMin) {
+						return 's-resize';
+					} else if (verticalMax) {
+						return 'n-resize';
+					}
+				}
+			}
+			break;
+		}
+	}
+
+	if (supportsAdvancedCursorStyles()) {
+		if (horizontalCount > 0 && verticalCount > 0) {
+			return 'move';
+		} else if (horizontalCount > 0) {
+			return 'ew-resize';
+		} else {
+			return 'ns-resize';
+		}
+	} else {
+		if (horizontalCount > 0 && verticalCount > 0) {
+			return 'grab';
+		} else if (horizontalCount > 0) {
+			return 'col-resize';
+		} else {
+			return 'row-resize';
+		}
+	}
+}

package/src/global/cursor/supportsAdvancedCursorStyles.ts

@@ -0,0 +1,25 @@
+let cached: boolean | undefined = undefined;
+
+export function overrideSupportsAdvancedCursorStylesForTesting(override: boolean) {
+	cached = override;
+}
+
+/**
+ * Caches and returns if advanced cursor CSS styles are supported.
+ */
+export function supportsAdvancedCursorStyles(): boolean {
+	if (cached === undefined) {
+		cached = false;
+
+		if (typeof window !== 'undefined') {
+			if (
+				window.navigator.userAgent.includes('Chrome') ||
+				window.navigator.userAgent.includes('Firefox')
+			) {
+				cached = true;
+			}
+		}
+	}
+
+	return cached;
+}

package/src/global/cursor/updateCursorStyle.ts

@@ -0,0 +1,77 @@
+import { getInteractionState } from '../mutable-state/interactions';
+import { getCursorStyle } from './getCursorStyle';
+
+const documentToStyleMap = new WeakMap<
+	Document,
+	{
+		prevStyle: string | undefined;
+		styleSheet: CSSStyleSheet;
+	}
+>();
+
+export function updateCursorStyle(ownerDocument: Document) {
+	// NOTE undefined is not technically a valid value but it has been reported that it is present in some environments (Vite HMR?)
+	// See github.com/bvaughn/react-resizable-panels/issues/559
+	if (ownerDocument.defaultView === null || ownerDocument.defaultView === undefined) {
+		return;
+	}
+
+	let { prevStyle, styleSheet } = documentToStyleMap.get(ownerDocument) ?? {};
+
+	if (styleSheet === undefined) {
+		styleSheet = new ownerDocument.defaultView.CSSStyleSheet();
+
+		// adoptedStyleSheets is undefined in jsdom
+		if (ownerDocument.adoptedStyleSheets) {
+			if (Object.isExtensible(ownerDocument.adoptedStyleSheets)) {
+				ownerDocument.adoptedStyleSheets.push(styleSheet);
+			} else {
+				ownerDocument.adoptedStyleSheets = [...ownerDocument.adoptedStyleSheets, styleSheet];
+			}
+		}
+	}
+
+	const interactionState = getInteractionState();
+
+	switch (interactionState.state) {
+		case 'active':
+		case 'hover': {
+			const cursorStyle = getCursorStyle({
+				cursorFlags: interactionState.cursorFlags,
+				groups: interactionState.hitRegions.map((current) => current.group),
+				state: interactionState.state,
+			});
+
+			const nextStyle = `*, *:hover {cursor: ${cursorStyle} !important; }`;
+			if (prevStyle === nextStyle) {
+				return;
+			}
+
+			prevStyle = nextStyle;
+
+			if (cursorStyle) {
+				if (styleSheet.cssRules.length === 0) {
+					styleSheet.insertRule(nextStyle);
+				} else {
+					styleSheet.replaceSync(nextStyle);
+				}
+			} else if (styleSheet.cssRules.length === 1) {
+				styleSheet.deleteRule(0);
+			}
+			break;
+		}
+		case 'inactive': {
+			prevStyle = undefined;
+
+			if (styleSheet.cssRules.length === 1) {
+				styleSheet.deleteRule(0);
+			}
+			break;
+		}
+	}
+
+	documentToStyleMap.set(ownerDocument, {
+		prevStyle,
+		styleSheet,
+	});
+}

package/src/global/dom/calculateAvailableGroupSize.ts

@@ -0,0 +1,11 @@
+import type { RegisteredGroup } from '../../components/group/types';
+
+export function calculateAvailableGroupSize({ group }: { group: RegisteredGroup }) {
+	const { orientation, panels } = group;
+
+	return panels.reduce((totalSize, panel) => {
+		totalSize +=
+			orientation === 'horizontal' ? panel.element.offsetWidth : panel.element.offsetHeight;
+		return totalSize;
+	}, 0);
+}

package/src/global/dom/calculateHitRegions.ts

@@ -0,0 +1,200 @@
+import { sortByElementOffset } from '../../components/group/sortByElementOffset';
+import type { RegisteredGroup } from '../../components/group/types';
+import type { RegisteredPanel } from '../../components/panel/types';
+import type { RegisteredSeparator } from '../../components/separator/types';
+import { isHTMLElement } from '../../utils/isHTMLElement';
+import { findClosestRect } from '../utils/findClosestRect';
+import { isCoarsePointer } from '../utils/isCoarsePointer';
+import { calculateAvailableGroupSize } from './calculateAvailableGroupSize';
+
+type PanelsTuple = [panel: RegisteredPanel, panel: RegisteredPanel];
+
+export type HitRegion = {
+	group: RegisteredGroup;
+	groupSize: number;
+	panels: PanelsTuple;
+	rect: DOMRect;
+	separator?: RegisteredSeparator | undefined;
+};
+
+/**
+ * Determines hit regions for a Group; a hit region is either:
+ * - 1: An explicit Separator element
+ * - 2: The edge of a Panel element that has another Panel beside it
+ *
+ * This method determines bounding rects of all regions for the particular group.
+ */
+export function calculateHitRegions(group: RegisteredGroup) {
+	const { element: groupElement, orientation, panels, separators } = group;
+
+	// Sort elements by offset before traversing
+	const sortedChildElements: HTMLElement[] = sortByElementOffset(
+		orientation,
+		Array.from(groupElement.children)
+			.filter(isHTMLElement)
+			.map((element) => ({ element: element as HTMLElement })),
+	).map(({ element }) => element);
+
+	const hitRegions: HitRegion[] = [];
+
+	let disabledSeparator = false;
+	let hasInterleavedStaticContent = false;
+	let firstEnabledPanelIndex = -1;
+	let lastEnabledPanelIndex = -1;
+	let numEnabledPanels = 0;
+	let prevPanel: RegisteredPanel | undefined = undefined;
+	let pendingSeparators: RegisteredSeparator[] = [];
+
+	{
+		let currentPanelIndex = -1;
+
+		for (const childElement of sortedChildElements) {
+			if (childElement.hasAttribute('data-panel')) {
+				currentPanelIndex++;
+
+				if (!childElement.hasAttribute('data-disabled')) {
+					numEnabledPanels++;
+
+					if (firstEnabledPanelIndex === -1) {
+						firstEnabledPanelIndex = currentPanelIndex;
+					}
+
+					lastEnabledPanelIndex = currentPanelIndex;
+				}
+			}
+		}
+	}
+
+	// If all (or all but one) of the Panels are disabled, there can be no resize interactions.
+	if (numEnabledPanels > 1) {
+		let currentPanelIndex = -1;
+
+		for (const childElement of sortedChildElements) {
+			if (childElement.hasAttribute('data-panel')) {
+				currentPanelIndex++;
+
+				const panelData = panels.find((current) => current.element === childElement);
+				if (panelData) {
+					if (prevPanel) {
+						const prevRect = prevPanel.element.getBoundingClientRect();
+						const rect = childElement.getBoundingClientRect();
+
+						let pendingRectsOrSeparators: (DOMRect | RegisteredSeparator)[];
+
+						// If an explicit Separator has been rendered, always watch it
+						// Otherwise watch the entire space between the panels
+						// The one caveat is when there are non-interactive element(s) between panels,
+						// in which case we may need to watch individual panel edges
+						if (hasInterleavedStaticContent) {
+							const firstPanelEdgeRect =
+								orientation === 'horizontal'
+									? new DOMRect(prevRect.right, prevRect.top, 0, prevRect.height)
+									: new DOMRect(prevRect.left, prevRect.bottom, prevRect.width, 0);
+							const secondPanelEdgeRect =
+								orientation === 'horizontal'
+									? new DOMRect(rect.left, rect.top, 0, rect.height)
+									: new DOMRect(rect.left, rect.top, rect.width, 0);
+
+							switch (pendingSeparators.length) {
+								case 0: {
+									pendingRectsOrSeparators = [firstPanelEdgeRect, secondPanelEdgeRect];
+									break;
+								}
+								case 1: {
+									const separator = pendingSeparators[0];
+									const closestRect = findClosestRect({
+										orientation,
+										rects: [prevRect, rect],
+										targetRect: separator.element.getBoundingClientRect(),
+									});
+
+									pendingRectsOrSeparators = [
+										separator,
+										closestRect === prevRect ? secondPanelEdgeRect : firstPanelEdgeRect,
+									];
+									break;
+								}
+								default: {
+									pendingRectsOrSeparators = pendingSeparators;
+									break;
+								}
+							}
+						} else {
+							if (pendingSeparators.length) {
+								pendingRectsOrSeparators = pendingSeparators;
+							} else {
+								pendingRectsOrSeparators = [
+									orientation === 'horizontal'
+										? new DOMRect(prevRect.right, rect.top, rect.left - prevRect.right, rect.height)
+										: new DOMRect(
+												rect.left,
+												prevRect.bottom,
+												rect.width,
+												rect.top - prevRect.bottom,
+											),
+								];
+							}
+						}
+
+						for (const rectOrSeparator of pendingRectsOrSeparators) {
+							let rect =
+								'width' in rectOrSeparator
+									? rectOrSeparator
+									: rectOrSeparator.element.getBoundingClientRect();
+
+							const minHitTargetSize = isCoarsePointer()
+								? group.resizeTargetMinimumSize.coarse
+								: group.resizeTargetMinimumSize.fine;
+							if (rect.width < minHitTargetSize) {
+								const delta = minHitTargetSize - rect.width;
+								rect = new DOMRect(rect.x - delta / 2, rect.y, rect.width + delta, rect.height);
+							}
+							if (rect.height < minHitTargetSize) {
+								const delta = minHitTargetSize - rect.height;
+								rect = new DOMRect(rect.x, rect.y - delta / 2, rect.width, rect.height + delta);
+							}
+
+							const skip =
+								currentPanelIndex <= firstEnabledPanelIndex ||
+								currentPanelIndex > lastEnabledPanelIndex;
+
+							if (!disabledSeparator && !skip) {
+								hitRegions.push({
+									group,
+									groupSize: calculateAvailableGroupSize({ group }),
+									panels: [prevPanel, panelData],
+									separator: 'width' in rectOrSeparator ? undefined : rectOrSeparator,
+									rect,
+								});
+							}
+
+							disabledSeparator = false;
+						}
+					}
+
+					hasInterleavedStaticContent = false;
+					prevPanel = panelData;
+					pendingSeparators = [];
+				}
+			} else if (childElement.hasAttribute('data-separator')) {
+				if (childElement.ariaDisabled !== null) {
+					disabledSeparator = true;
+				}
+
+				const separatorData = separators.find((current) => current.element === childElement);
+				if (separatorData) {
+					// Separators will be included implicitly in the area between the previous and next panel
+					// It's important to track them though, to handle the scenario of non-interactive group content
+					pendingSeparators.push(separatorData);
+				} else {
+					prevPanel = undefined;
+					pendingSeparators = [];
+				}
+			} else {
+				hasInterleavedStaticContent = true;
+			}
+		}
+	}
+
+	return hitRegions;
+}

package/src/global/dom/calculatePanelConstraints.ts

@@ -0,0 +1,84 @@
+import type { RegisteredGroup } from '../../components/group/types';
+import type { PanelConstraints } from '../../components/panel/types';
+import { sizeStyleToPixels } from '../styles/sizeStyleToPixels';
+import { formatLayoutNumber } from '../utils/formatLayoutNumber';
+import { calculateAvailableGroupSize } from './calculateAvailableGroupSize';
+
+export function calculatePanelConstraints(group: RegisteredGroup) {
+	const { panels } = group;
+
+	const groupSize = calculateAvailableGroupSize({ group });
+	if (groupSize === 0) {
+		// Can't calculate anything meaningful if the group has a width/height of 0
+		// (This could indicate that it's within a hidden subtree)
+		return panels.map<PanelConstraints>((current) => ({
+			groupResizeBehavior: current.panelConstraints.groupResizeBehavior,
+			collapsedSize: 0,
+			collapsible: current.panelConstraints.collapsible === true,
+			defaultSize: undefined,
+			disabled: current.panelConstraints.disabled,
+			minSize: 0,
+			maxSize: 100,
+			panelId: current.id,
+		}));
+	}
+
+	return panels.map<PanelConstraints>((panel) => {
+		const { element, panelConstraints } = panel;
+
+		let collapsedSize = 0;
+		if (panelConstraints.collapsedSize !== undefined) {
+			const pixels = sizeStyleToPixels({
+				groupSize,
+				panelElement: element,
+				styleProp: panelConstraints.collapsedSize,
+			});
+
+			collapsedSize = formatLayoutNumber((pixels / groupSize) * 100);
+		}
+
+		let defaultSize: number | undefined = undefined;
+		if (panelConstraints.defaultSize !== undefined) {
+			const pixels = sizeStyleToPixels({
+				groupSize,
+				panelElement: element,
+				styleProp: panelConstraints.defaultSize,
+			});
+
+			defaultSize = formatLayoutNumber((pixels / groupSize) * 100);
+		}
+
+		let minSize = 0;
+		if (panelConstraints.minSize !== undefined) {
+			const pixels = sizeStyleToPixels({
+				groupSize,
+				panelElement: element,
+				styleProp: panelConstraints.minSize,
+			});
+
+			minSize = formatLayoutNumber((pixels / groupSize) * 100);
+		}
+
+		let maxSize = 100;
+		if (panelConstraints.maxSize !== undefined) {
+			const pixels = sizeStyleToPixels({
+				groupSize,
+				panelElement: element,
+				styleProp: panelConstraints.maxSize,
+			});
+
+			maxSize = formatLayoutNumber((pixels / groupSize) * 100);
+		}
+
+		return {
+			groupResizeBehavior: panelConstraints.groupResizeBehavior,
+			collapsedSize,
+			collapsible: panelConstraints.collapsible === true,
+			defaultSize,
+			disabled: panelConstraints.disabled,
+			minSize,
+			maxSize,
+			panelId: panel.id,
+		};
+	});
+}

package/src/global/event-handlers/onDocumentContextMenu.ts

@@ -0,0 +1,9 @@
+import { completeActivePointerResize } from '../utils/completeActivePointerResize.ts';
+
+export function onDocumentContextMenu(event: MouseEvent) {
+	if (event.defaultPrevented) {
+		return;
+	}
+
+	completeActivePointerResize(event.currentTarget as Document);
+}

package/src/global/event-handlers/onDocumentDoubleClick.ts

@@ -0,0 +1,31 @@
+import { getMountedGroups } from '../mutable-state/groups';
+import { findMatchingHitRegions } from '../utils/findMatchingHitRegions';
+import { getImperativePanelMethods } from '../utils/getImperativePanelMethods';
+
+export function onDocumentDoubleClick(event: MouseEvent) {
+	if (event.defaultPrevented) {
+		return;
+	}
+
+	const mountedGroups = getMountedGroups();
+	const hitRegions = findMatchingHitRegions(event, mountedGroups);
+	hitRegions.forEach((current) => {
+		if (current.separator && !current.separator.disableDoubleClick) {
+			const panelWithDefaultSize = current.panels.find(
+				(panel) => panel.panelConstraints.defaultSize !== undefined,
+			);
+			if (panelWithDefaultSize) {
+				const defaultSize = panelWithDefaultSize.panelConstraints.defaultSize;
+				const api = getImperativePanelMethods({
+					groupId: current.group.id,
+					panelId: panelWithDefaultSize.id,
+				});
+				if (api && defaultSize !== undefined) {
+					api.resize(defaultSize);
+
+					event.preventDefault();
+				}
+			}
+		}
+	});
+}

package/src/global/event-handlers/onDocumentKeyDown.ts

@@ -0,0 +1,133 @@
+import { assert } from '../../utils/assert';
+import { getMountedGroupState } from '../mutable-state/groups';
+import { adjustLayoutForSeparator } from '../utils/adjustLayoutForSeparator';
+import { findSeparatorGroup } from '../utils/findSeparatorGroup';
+
+export function onDocumentKeyDown(event: KeyboardEvent) {
+	if (event.defaultPrevented) {
+		return;
+	}
+
+	const separatorElement = event.currentTarget as HTMLElement;
+
+	const group = findSeparatorGroup(separatorElement);
+	if (group.disabled) {
+		return;
+	}
+
+	switch (event.key) {
+		case 'ArrowDown': {
+			event.preventDefault();
+
+			if (group.orientation === 'vertical') {
+				adjustLayoutForSeparator(separatorElement, 5);
+			}
+			break;
+		}
+		case 'ArrowLeft': {
+			event.preventDefault();
+
+			if (group.orientation === 'horizontal') {
+				adjustLayoutForSeparator(separatorElement, -5);
+			}
+			break;
+		}
+		case 'ArrowRight': {
+			event.preventDefault();
+
+			if (group.orientation === 'horizontal') {
+				adjustLayoutForSeparator(separatorElement, 5);
+			}
+			break;
+		}
+		case 'ArrowUp': {
+			event.preventDefault();
+
+			if (group.orientation === 'vertical') {
+				adjustLayoutForSeparator(separatorElement, -5);
+			}
+			break;
+		}
+		case 'End': {
+			event.preventDefault();
+
+			// Moves splitter to the position that gives the primary pane its largest allowed size.
+			// This may completely collapse the secondary pane.
+
+			adjustLayoutForSeparator(separatorElement, 100);
+			break;
+		}
+		case 'Enter': {
+			event.preventDefault();
+
+			// If the primary pane is not collapsed, collapses the pane.
+			// If the pane is collapsed, restores the splitter to its previous position.
+
+			const group = findSeparatorGroup(separatorElement);
+
+			const groupState = getMountedGroupState(group.id, true);
+			const { derivedPanelConstraints, layout, separatorToPanels } = groupState;
+
+			const separator = group.separators.find((current) => current.element === separatorElement);
+			assert(separator, 'Matching separator not found');
+
+			const panels = separatorToPanels.get(separator);
+			assert(panels, 'Matching panels not found');
+
+			const primaryPanel = panels[0];
+			const constraints = derivedPanelConstraints.find(
+				(current) => current.panelId === primaryPanel.id,
+			);
+			assert(constraints, 'Panel metadata not found');
+
+			if (constraints.collapsible) {
+				const prevSize = layout[primaryPanel.id];
+
+				const nextSize =
+					constraints.collapsedSize === prevSize
+						? (group.mutableState.expandedPanelSizes[primaryPanel.id] ?? constraints.minSize)
+						: constraints.collapsedSize;
+
+				adjustLayoutForSeparator(separatorElement, nextSize - prevSize);
+			}
+			break;
+		}
+		case 'F6': {
+			event.preventDefault();
+
+			// Cycle through window panes.
+
+			const group = findSeparatorGroup(separatorElement);
+
+			const separatorElements = group.separators.map((separator) => separator.element);
+
+			const index = Array.from(separatorElements).findIndex(
+				(current) => current === event.currentTarget,
+			);
+			assert(index !== null, 'Index not found');
+
+			const nextIndex = event.shiftKey
+				? index > 0
+					? index - 1
+					: separatorElements.length - 1
+				: index + 1 < separatorElements.length
+					? index + 1
+					: 0;
+
+			const nextSeparatorElement = separatorElements[nextIndex] as HTMLElement;
+			nextSeparatorElement.focus({
+				preventScroll: true,
+			});
+			break;
+		}
+		case 'Home': {
+			event.preventDefault();
+
+			// Moves splitter to the position that gives the primary pane its smallest allowed size.
+			// This may completely collapse the primary pane.
+
+			adjustLayoutForSeparator(separatorElement, -100);
+			break;
+		}
+	}
+}