@octanejs/resizable-panels 0.0.1

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

@@ -0,0 +1,56 @@
+import type { Layout, RegisteredGroup } from '../../components/group/types';
+import { getMountedGroups } from '../mutable-state/groups';
+import { updateInteractionState } from '../mutable-state/interactions';
+import { findMatchingHitRegions } from '../utils/findMatchingHitRegions';
+
+export function onDocumentPointerDown(event: PointerEvent) {
+	if (event.defaultPrevented) {
+		return;
+	} else if (event.pointerType === 'mouse' && event.button > 0) {
+		return;
+	}
+
+	const mountedGroups = getMountedGroups();
+
+	const hitRegions = findMatchingHitRegions(event, mountedGroups);
+
+	const initialLayoutMap = new Map<RegisteredGroup, Layout>();
+
+	let didChangeFocus = false;
+
+	hitRegions.forEach((current) => {
+		if (current.separator) {
+			if (!didChangeFocus) {
+				didChangeFocus = true;
+
+				current.separator.element.focus({
+					// @ts-expect-error https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#browser_compatibility
+					focusVisible: false,
+					preventScroll: true,
+				});
+
+				// TRICKY
+				// Calling setPointerCapture() here would help with detecting pointer "pointermove"/"pointerup" events that happen over iframes
+				// but it would also prevent "click" events from firing if the use releases without actually dragging
+				// Because of this, it's safer to wait until the first "pointermove" event to set capture
+			}
+		}
+
+		const match = mountedGroups.get(current.group);
+		if (match) {
+			initialLayoutMap.set(current.group, match.layout);
+		}
+	});
+
+	updateInteractionState({
+		cursorFlags: 0,
+		hitRegions,
+		initialLayoutMap,
+		pointerDownAtPoint: { x: event.clientX, y: event.clientY },
+		state: 'active',
+	});
+
+	if (hitRegions.length) {
+		event.preventDefault();
+	}
+}

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

@@ -0,0 +1,21 @@
+import { getMountedGroups } from '../mutable-state/groups';
+import { getInteractionState } from '../mutable-state/interactions';
+import { updateActiveHitRegions } from '../utils/updateActiveHitRegion';
+
+export function onDocumentPointerLeave(event: PointerEvent) {
+	const mountedGroups = getMountedGroups();
+	const interactionState = getInteractionState();
+
+	switch (interactionState.state) {
+		case 'active': {
+			updateActiveHitRegions({
+				document: event.currentTarget as Document,
+				event,
+				hitRegions: interactionState.hitRegions,
+				initialLayoutMap: interactionState.initialLayoutMap,
+				mountedGroups,
+				prevCursorFlags: interactionState.cursorFlags,
+			});
+		}
+	}
+}

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

@@ -0,0 +1,89 @@
+import { updateCursorStyle } from '../cursor/updateCursorStyle';
+import {
+	getMountedGroups,
+	getMountedGroupState,
+	updateMountedGroup,
+} from '../mutable-state/groups';
+import { getInteractionState, updateInteractionState } from '../mutable-state/interactions';
+import { findMatchingHitRegions } from '../utils/findMatchingHitRegions';
+import { updateActiveHitRegions } from '../utils/updateActiveHitRegion';
+
+export function onDocumentPointerMove(event: PointerEvent) {
+	if (event.defaultPrevented) {
+		return;
+	}
+
+	const interactionState = getInteractionState();
+	const mountedGroups = getMountedGroups();
+
+	switch (interactionState.state) {
+		case 'active': {
+			// Edge case (see #340)
+			// Detect when the pointer has been released outside an iframe on a different domain
+			if (
+				// Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+				event.buttons === 0
+			) {
+				updateInteractionState({
+					cursorFlags: 0,
+					state: 'inactive',
+				});
+
+				// Dispatch one more "change" event after the interaction state has been reset.
+				// Groups use this as a signal to call onLayoutChanged.
+				// This is the missed-pointerup fallback (pointer released outside a
+				// cross-origin iframe, see #340) — still a real user interaction.
+				interactionState.hitRegions.forEach((hitRegion) => {
+					const groupState = getMountedGroupState(hitRegion.group.id, true);
+					updateMountedGroup(hitRegion.group, groupState, {
+						isUserInteraction: true,
+					});
+				});
+
+				return;
+			}
+
+			for (const hitRegion of interactionState.hitRegions) {
+				if (hitRegion.separator) {
+					const { element } = hitRegion.separator;
+					if (!element.hasPointerCapture?.(event.pointerId)) {
+						element.setPointerCapture?.(event.pointerId);
+					}
+				}
+			}
+
+			updateActiveHitRegions({
+				document: event.currentTarget as Document,
+				event,
+				hitRegions: interactionState.hitRegions,
+				initialLayoutMap: interactionState.initialLayoutMap,
+				mountedGroups,
+				pointerDownAtPoint: interactionState.pointerDownAtPoint,
+				prevCursorFlags: interactionState.cursorFlags,
+			});
+			break;
+		}
+		default: {
+			// Update HitRegions if a drag has not been started
+			const hitRegions = findMatchingHitRegions(event, mountedGroups);
+
+			if (hitRegions.length === 0) {
+				if (interactionState.state !== 'inactive') {
+					updateInteractionState({
+						cursorFlags: 0,
+						state: 'inactive',
+					});
+				}
+			} else {
+				updateInteractionState({
+					cursorFlags: 0,
+					hitRegions,
+					state: 'hover',
+				});
+			}
+
+			updateCursorStyle(event.currentTarget as Document);
+			break;
+		}
+	}
+}

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

@@ -0,0 +1,19 @@
+import { getInteractionState, updateInteractionState } from '../mutable-state/interactions';
+
+export function onDocumentPointerOut(event: PointerEvent) {
+	// For some reason, "pointerout" events don't fire if the `relatedTarget` is an iframe
+	// This can leave the `data-separator` attribute in an invalid state ("hover") which in turn might break styles
+	// The easiest fix for this case is to reset the interaction state in this specific circumstance
+	// See issues/645
+	if (event.relatedTarget instanceof HTMLIFrameElement) {
+		const interactionState = getInteractionState();
+		switch (interactionState.state) {
+			case 'hover': {
+				updateInteractionState({
+					cursorFlags: 0,
+					state: 'inactive',
+				});
+			}
+		}
+	}
+}

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

@@ -0,0 +1,14 @@
+import { completeActivePointerResize } from '../utils/completeActivePointerResize.ts';
+
+export function onDocumentPointerUp(event: PointerEvent) {
+	if (event.defaultPrevented) {
+		return;
+	} else if (event.pointerType === 'mouse' && event.button > 0) {
+		return;
+	}
+
+	const matched = completeActivePointerResize(event.currentTarget as Document);
+	if (matched) {
+		event.preventDefault();
+	}
+}

package/src/global/mountGroup.ts

@@ -0,0 +1,213 @@
+import type { Layout, RegisteredGroup } from '../components/group/types';
+import { assert } from '../utils/assert';
+import { calculateAvailableGroupSize } from './dom/calculateAvailableGroupSize';
+import { calculateHitRegions } from './dom/calculateHitRegions';
+import { calculatePanelConstraints } from './dom/calculatePanelConstraints';
+import { onDocumentContextMenu } from './event-handlers/onDocumentContextMenu';
+import { onDocumentDoubleClick } from './event-handlers/onDocumentDoubleClick';
+import { onDocumentKeyDown } from './event-handlers/onDocumentKeyDown';
+import { onDocumentPointerDown } from './event-handlers/onDocumentPointerDown';
+import { onDocumentPointerLeave } from './event-handlers/onDocumentPointerLeave';
+import { onDocumentPointerMove } from './event-handlers/onDocumentPointerMove';
+import { onDocumentPointerOut } from './event-handlers/onDocumentPointerOut';
+import { onDocumentPointerUp } from './event-handlers/onDocumentPointerUp';
+import {
+	deleteMutableGroup,
+	getMountedGroupState,
+	updateMountedGroup,
+} from './mutable-state/groups';
+import type { SeparatorToPanelsMap } from './mutable-state/types';
+import { calculateDefaultLayout } from './utils/calculateDefaultLayout';
+import { layoutsEqual } from './utils/layoutsEqual';
+import { notifyPanelOnResize } from './utils/notifyPanelOnResize';
+import { objectsEqual } from './utils/objectsEqual';
+import { preserveFixedPanelSizes } from './utils/preserveFixedPanelSizes';
+import { validateLayoutKeys } from './utils/validateLayoutKeys';
+import { validatePanelGroupLayout } from './utils/validatePanelGroupLayout';
+
+const ownerDocumentReferenceCounts = new Map<Document, number>();
+
+export function mountGroup(group: RegisteredGroup) {
+	let isMounted = true;
+
+	assert(group.element.ownerDocument.defaultView, 'Cannot register an unmounted Group');
+
+	const ResizeObserver = group.element.ownerDocument.defaultView.ResizeObserver;
+
+	const panelIds = new Set<string>();
+	const separatorIds = new Set<string>();
+
+	// Add Panels with onResize callbacks to ResizeObserver
+	// Add Group to ResizeObserver also in order to sync % based constraints
+	const resizeObserver = new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			const { borderBoxSize, target } = entry;
+			if (target === group.element) {
+				if (isMounted) {
+					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;
+					}
+
+					const groupState = getMountedGroupState(group.id);
+					if (!groupState) {
+						// Not mounted yet
+						return;
+					}
+
+					// Update non-percentage based constraints
+					const nextDerivedPanelConstraints = calculatePanelConstraints(group);
+
+					// Revalidate layout in case constraints have changed or group size changed
+					const prevLayout = groupState.defaultLayoutDeferred
+						? calculateDefaultLayout(nextDerivedPanelConstraints)
+						: groupState.layout;
+					const unsafeLayout = preserveFixedPanelSizes({
+						group,
+						nextGroupSize: groupSize,
+						prevGroupSize: groupState.groupSize,
+						prevLayout,
+					});
+					const nextLayout = validatePanelGroupLayout({
+						layout: unsafeLayout,
+						panelConstraints: nextDerivedPanelConstraints,
+					});
+
+					if (
+						!groupState.defaultLayoutDeferred &&
+						layoutsEqual(groupState.layout, nextLayout) &&
+						objectsEqual(groupState.derivedPanelConstraints, nextDerivedPanelConstraints) &&
+						groupState.groupSize === groupSize
+					) {
+						return;
+					}
+
+					updateMountedGroup(group, {
+						defaultLayoutDeferred: false,
+						derivedPanelConstraints: nextDerivedPanelConstraints,
+						groupSize,
+						layout: nextLayout,
+						separatorToPanels: groupState.separatorToPanels,
+					});
+				}
+			} else {
+				notifyPanelOnResize(group, target as HTMLElement, borderBoxSize);
+			}
+		}
+	});
+
+	resizeObserver.observe(group.element);
+
+	group.panels.forEach((panel) => {
+		assert(
+			!panelIds.has(panel.id),
+			`Panel ids must be unique; id "${panel.id}" was used more than once`,
+		);
+
+		panelIds.add(panel.id);
+
+		if (panel.onResize) {
+			resizeObserver.observe(panel.element);
+		}
+	});
+
+	const groupSize = calculateAvailableGroupSize({ group });
+
+	// Calculate initial layout for the new Panel configuration
+	const derivedPanelConstraints = calculatePanelConstraints(group);
+	const panelIdsKey = group.panels.map(({ id }) => id).join(',');
+
+	// Gracefully handle an invalid default layout
+	// This could happen when e.g. useDefaultLayout is combined with dynamic Panels
+	// In this case the best we can do is ignore the incoming layout
+	let defaultLayout: Layout | undefined = group.mutableState.defaultLayout;
+	if (defaultLayout) {
+		if (!validateLayoutKeys(group.panels, defaultLayout)) {
+			defaultLayout = undefined;
+		}
+	}
+
+	const defaultLayoutUnsafe: Layout =
+		group.mutableState.layouts[panelIdsKey] ??
+		defaultLayout ??
+		calculateDefaultLayout(derivedPanelConstraints);
+	const defaultLayoutSafe = validatePanelGroupLayout({
+		layout: defaultLayoutUnsafe,
+		panelConstraints: derivedPanelConstraints,
+	});
+
+	const ownerDocument = group.element.ownerDocument;
+
+	ownerDocumentReferenceCounts.set(
+		ownerDocument,
+		(ownerDocumentReferenceCounts.get(ownerDocument) ?? 0) + 1,
+	);
+
+	const separatorToPanels: SeparatorToPanelsMap = new Map();
+	const hitRegions = calculateHitRegions(group);
+	hitRegions.forEach((hitRegion) => {
+		if (hitRegion.separator) {
+			separatorToPanels.set(hitRegion.separator, hitRegion.panels);
+		}
+	});
+
+	updateMountedGroup(group, {
+		defaultLayoutDeferred: groupSize === 0,
+		derivedPanelConstraints,
+		groupSize,
+		layout: defaultLayoutSafe,
+		separatorToPanels,
+	});
+
+	group.separators.forEach((separator) => {
+		assert(
+			!separatorIds.has(separator.id),
+			`Separator ids must be unique; id "${separator.id}" was used more than once`,
+		);
+
+		separatorIds.add(separator.id);
+
+		separator.element.addEventListener('keydown', onDocumentKeyDown);
+	});
+
+	// If this is the first group to be mounted, initialize event handlers
+	if (ownerDocumentReferenceCounts.get(ownerDocument) === 1) {
+		ownerDocument.addEventListener('contextmenu', onDocumentContextMenu, true);
+		ownerDocument.addEventListener('dblclick', onDocumentDoubleClick, true);
+		ownerDocument.addEventListener('pointerdown', onDocumentPointerDown, true);
+		ownerDocument.addEventListener('pointerleave', onDocumentPointerLeave);
+		ownerDocument.addEventListener('pointermove', onDocumentPointerMove);
+		ownerDocument.addEventListener('pointerout', onDocumentPointerOut);
+		ownerDocument.addEventListener('pointerup', onDocumentPointerUp, true);
+	}
+
+	return function unmountGroup() {
+		isMounted = false;
+
+		ownerDocumentReferenceCounts.set(
+			ownerDocument,
+			Math.max(0, (ownerDocumentReferenceCounts.get(ownerDocument) ?? 0) - 1),
+		);
+
+		deleteMutableGroup(group);
+
+		group.separators.forEach((separator) => {
+			separator.element.removeEventListener('keydown', onDocumentKeyDown);
+		});
+
+		// If this was the last group to be mounted, tear down event handlers
+		if (!ownerDocumentReferenceCounts.get(ownerDocument)) {
+			ownerDocument.removeEventListener('contextmenu', onDocumentContextMenu, true);
+			ownerDocument.removeEventListener('dblclick', onDocumentDoubleClick, true);
+			ownerDocument.removeEventListener('pointerdown', onDocumentPointerDown, true);
+			ownerDocument.removeEventListener('pointerleave', onDocumentPointerLeave);
+			ownerDocument.removeEventListener('pointermove', onDocumentPointerMove);
+			ownerDocument.removeEventListener('pointerout', onDocumentPointerOut);
+			ownerDocument.removeEventListener('pointerup', onDocumentPointerUp, true);
+		}
+
+		resizeObserver.disconnect();
+	};
+}

package/src/global/mutable-state/groups.ts

@@ -0,0 +1,104 @@
+import type { Layout, RegisteredGroup } from '../../components/group/types';
+import type { PanelConstraints } from '../../components/panel/types';
+import { EventEmitter } from '../../utils/EventEmitter';
+import type { SeparatorToPanelsMap } from './types';
+
+type State = {
+	defaultLayoutDeferred: boolean;
+	derivedPanelConstraints: PanelConstraints[];
+	groupSize: number;
+	layout: Layout;
+	separatorToPanels: SeparatorToPanelsMap;
+};
+
+export type MountedGroups = Map<RegisteredGroup, State>;
+
+let map: MountedGroups = new Map();
+
+type GroupChangeEvent = {
+	group: RegisteredGroup;
+	// True if the change was triggered by a pointer or keyboard event handler
+	// False for other types of resize (constraint recompute, default-size change, imperative API, etc.).
+	isUserInteraction: boolean;
+	next: State;
+	prev: State | undefined;
+};
+type GroupsChangeEvent = {
+	next: MountedGroups;
+	prev: MountedGroups;
+};
+
+const eventEmitter = new EventEmitter<{
+	groupChange: GroupChangeEvent;
+	groupsChange: GroupsChangeEvent;
+}>();
+
+export function deleteMutableGroup(group: RegisteredGroup) {
+	map = new Map(map);
+	map.delete(group);
+}
+
+export function getRegisteredGroup(groupId: string): RegisteredGroup | undefined;
+export function getRegisteredGroup(groupId: string, assert: true): RegisteredGroup;
+export function getRegisteredGroup(groupId: string, assert?: boolean) {
+	for (const [group] of map) {
+		if (group.id === groupId) {
+			return group;
+		}
+	}
+
+	if (assert) {
+		throw Error(`Could not find data for Group with id ${groupId}`);
+	}
+
+	return undefined;
+}
+
+export function getMountedGroupState(groupId: string): State | undefined;
+export function getMountedGroupState(groupId: string, assert: true): State;
+export function getMountedGroupState(groupId: string, assert?: boolean) {
+	for (const [group, mountedGroup] of map) {
+		if (group.id === groupId) {
+			return mountedGroup;
+		}
+	}
+
+	if (assert) {
+		throw Error(`Could not find data for Group with id ${groupId}`);
+	}
+
+	return undefined;
+}
+
+export function getMountedGroups() {
+	return map;
+}
+
+export function subscribeToMountedGroup(
+	groupId: string,
+	callback: (event: GroupChangeEvent) => void,
+) {
+	return eventEmitter.addListener('groupChange', (event) => {
+		if (event.group.id === groupId) {
+			callback(event);
+		}
+	});
+}
+
+export function updateMountedGroup(
+	group: RegisteredGroup,
+	next: State,
+	meta?: { isUserInteraction?: boolean },
+) {
+	const prev = map.get(group);
+
+	map = new Map(map);
+	map.set(group, next);
+
+	eventEmitter.emit('groupChange', {
+		group,
+		isUserInteraction: meta?.isUserInteraction === true,
+		prev,
+		next,
+	});
+}

package/src/global/mutable-state/interactions.ts

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../utils/EventEmitter';
+import type { InteractionState } from './types';
+
+let state: InteractionState = {
+	cursorFlags: 0,
+	state: 'inactive',
+};
+
+type ChangeEvent = {
+	next: InteractionState;
+	prev: InteractionState;
+};
+
+const eventEmitter = new EventEmitter<{
+	change: ChangeEvent;
+}>();
+
+export function getInteractionState() {
+	return state;
+}
+
+export function subscribeToInteractionState(callback: (event: ChangeEvent) => void) {
+	return eventEmitter.addListener('change', callback);
+}
+
+export function updateCursorFlags(cursorFlags: number) {
+	const prev = state;
+
+	const next = { ...state };
+	next.cursorFlags = cursorFlags;
+
+	state = next;
+
+	eventEmitter.emit('change', {
+		prev,
+		next,
+	});
+}
+
+export function updateInteractionState(next: InteractionState) {
+	const prev = state;
+
+	state = next;
+
+	eventEmitter.emit('change', {
+		prev,
+		next,
+	});
+}

package/src/global/mutable-state/types.ts

@@ -0,0 +1,31 @@
+import type { Layout, RegisteredGroup } from '../../components/group/types';
+import type { RegisteredPanel } from '../../components/panel/types';
+import type { RegisteredSeparator } from '../../components/separator/types';
+import type { Point } from '../../types';
+import type { HitRegion } from '../dom/calculateHitRegions';
+
+export type InteractionInactive = {
+	cursorFlags: 0;
+	state: 'inactive';
+};
+
+export type InteractionHover = {
+	cursorFlags: 0;
+	hitRegions: HitRegion[];
+	state: 'hover';
+};
+
+export type InteractionActive = {
+	cursorFlags: number;
+	hitRegions: HitRegion[];
+	initialLayoutMap: Map<RegisteredGroup, Layout>;
+	pointerDownAtPoint: Point;
+	state: 'active';
+};
+
+export type InteractionState = InteractionInactive | InteractionHover | InteractionActive;
+
+export type SeparatorToPanelsMap = Map<
+	RegisteredSeparator,
+	[primaryPanel: RegisteredPanel, secondaryPanel: RegisteredPanel]
+>;

package/src/global/styles/convertEmToPixels.ts

@@ -0,0 +1,6 @@
+export function convertEmToPixels(element: Element, value: number) {
+	const style = getComputedStyle(element);
+	const fontSize = parseFloat(style.fontSize);
+
+	return value * fontSize;
+}

package/src/global/styles/convertRemToPixels.ts

@@ -0,0 +1,6 @@
+export function convertRemToPixels(element: Element, value: number) {
+	const style = getComputedStyle(element.ownerDocument.documentElement);
+	const fontSize = parseFloat(style.fontSize);
+
+	return value * fontSize;
+}

package/src/global/styles/convertVhToPixels.ts

@@ -0,0 +1,3 @@
+export function convertVhToPixels(value: number) {
+	return (value / 100) * window.innerHeight;
+}

package/src/global/styles/convertVwToPixels.ts

@@ -0,0 +1,3 @@
+export function convertVwToPixels(value: number) {
+	return (value / 100) * window.innerWidth;
+}

package/src/global/styles/parseSizeAndUnit.ts

@@ -0,0 +1,28 @@
+import type { SizeUnit } from '../../components/panel/types';
+
+export function parseSizeAndUnit(size: number | string): [numeric: number, size: SizeUnit] {
+	switch (typeof size) {
+		case 'number': {
+			return [size, 'px'];
+		}
+		case 'string': {
+			const numeric = parseFloat(size);
+
+			if (size.endsWith('%')) {
+				return [numeric, '%'];
+			} else if (size.endsWith('px')) {
+				return [numeric, 'px'];
+			} else if (size.endsWith('rem')) {
+				return [numeric, 'rem'];
+			} else if (size.endsWith('em')) {
+				return [numeric, 'em'];
+			} else if (size.endsWith('vh')) {
+				return [numeric, 'vh'];
+			} else if (size.endsWith('vw')) {
+				return [numeric, 'vw'];
+			}
+
+			return [numeric, '%'];
+		}
+	}
+}