@elementor/editor-floating-panels 4.3.0-970

package/src/components/internal/panel-window.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { type ReactNode } from 'react';
+import { ThemeProvider } from '@elementor/editor-ui';
+import { __useSelector as useSelector } from '@elementor/store';
+import { Box, Fade, Paper } from '@elementor/ui';
+
+import { usePanelResizeInteraction } from '../../hooks/use-floating-panel-resize';
+import { type GlobalState, selectIsResizable } from '../../store/selectors';
+import { type LogicalPosition, type LogicalSize } from '../../types';
+import { type PanelCorner, positionToCssInsets } from '../../utils/corner-position';
+import { type ResizeCorner, type ResizeEdge } from '../../utils/resize-math';
+import CornerResizeHandle from './corner-resize-handle';
+import ResizeHandle from './resize-handle';
+
+const FADE_ENTER_MS = 225;
+const FADE_EXIT_MS = 195;
+
+const RESIZE_EDGES: ResizeEdge[] = [ 'inline-start', 'inline-end', 'block-start', 'block-end' ];
+
+const RESIZE_CORNERS: ResizeCorner[] = [
+	'block-start-inline-start',
+	'block-start-inline-end',
+	'block-end-inline-start',
+	'block-end-inline-end',
+];
+
+type Props = {
+	panelId: string;
+	corner: PanelCorner;
+	position: LogicalPosition;
+	size: LogicalSize;
+	title?: string;
+	zIndex: number;
+	visible: boolean;
+	onFocus: () => void;
+	children: ReactNode;
+};
+
+function PanelResizeHandles( { panelId }: { panelId: string } ) {
+	const { getResizeHandleProps } = usePanelResizeInteraction( panelId );
+
+	return (
+		<>
+			{ RESIZE_EDGES.map( ( edge ) => (
+				<ResizeHandle key={ edge } edge={ edge } { ...getResizeHandleProps( edge ) } />
+			) ) }
+			{ RESIZE_CORNERS.map( ( corner ) => (
+				<CornerResizeHandle key={ corner } corner={ corner } { ...getResizeHandleProps( corner ) } />
+			) ) }
+		</>
+	);
+}
+
+export default function PanelWindow( {
+	panelId,
+	corner,
+	position,
+	size,
+	title,
+	zIndex,
+	visible,
+	onFocus,
+	children,
+}: Props ) {
+	const isResizable = useSelector( ( state: GlobalState ) => selectIsResizable( state, panelId ) );
+
+	return (
+		<Fade in={ visible } timeout={ { enter: FADE_ENTER_MS, exit: FADE_EXIT_MS } }>
+			<Paper
+				component="aside"
+				data-floating-panel={ panelId }
+				elevation={ 0 }
+				aria-label={ title || panelId }
+				aria-hidden={ ! visible }
+				inert={ ! visible ? '' : undefined }
+				onMouseDown={ onFocus }
+				onFocusCapture={ onFocus }
+				sx={ {
+					position: 'fixed',
+					...positionToCssInsets( corner, position ),
+					inlineSize: `${ size.inlineSize }px`,
+					blockSize: `${ size.blockSize }px`,
+					zIndex,
+					display: 'flex',
+					flexDirection: 'column',
+					pointerEvents: visible ? 'auto' : 'none',
+					bgcolor: 'var(--e-a-bg-default)',
+					color: 'var(--e-a-color-txt)',
+					border: 'var(--e-a-border)',
+					boxShadow: `0 2px 20px 0 rgba(0, 0, 0, 0.1)`,
+				} }
+			>
+				<ThemeProvider>
+					<Box sx={ { display: 'flex', flexDirection: 'column', height: '100%' } }>{ children }</Box>
+				</ThemeProvider>
+				{ isResizable && <PanelResizeHandles panelId={ panelId } /> }
+			</Paper>
+		</Fade>
+	);
+}

package/src/components/internal/resize-handle.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { type PointerEventHandler } from 'react';
+import { Box } from '@elementor/ui';
+
+import { type ResizeEdge } from '../../utils/resize-math';
+
+const HANDLE_THICKNESS_PX = 8;
+
+const EDGE_SX: Record< ResizeEdge, object > = {
+	'inline-start': {
+		insetBlockStart: 0,
+		insetBlockEnd: 0,
+		insetInlineStart: 0,
+		inlineSize: `${ HANDLE_THICKNESS_PX }px`,
+		cursor: 'ew-resize',
+	},
+	'inline-end': {
+		insetBlockStart: 0,
+		insetBlockEnd: 0,
+		insetInlineEnd: 0,
+		inlineSize: `${ HANDLE_THICKNESS_PX }px`,
+		cursor: 'ew-resize',
+	},
+	'block-start': {
+		insetInlineStart: 0,
+		insetInlineEnd: 0,
+		insetBlockStart: 0,
+		blockSize: `${ HANDLE_THICKNESS_PX }px`,
+		cursor: 'ns-resize',
+	},
+	'block-end': {
+		insetInlineStart: 0,
+		insetInlineEnd: 0,
+		insetBlockEnd: 0,
+		blockSize: `${ HANDLE_THICKNESS_PX }px`,
+		cursor: 'ns-resize',
+	},
+};
+
+type Props = {
+	edge: ResizeEdge;
+	onPointerDown: PointerEventHandler< HTMLElement >;
+	onPointerMove: PointerEventHandler< HTMLElement >;
+	onPointerUp: PointerEventHandler< HTMLElement >;
+	onPointerCancel: PointerEventHandler< HTMLElement >;
+};
+
+export default function ResizeHandle( { edge, onPointerDown, onPointerMove, onPointerUp, onPointerCancel }: Props ) {
+	return (
+		<Box
+			data-resize-edge={ edge }
+			aria-hidden="true"
+			onPointerDown={ onPointerDown }
+			onPointerMove={ onPointerMove }
+			onPointerUp={ onPointerUp }
+			onPointerCancel={ onPointerCancel }
+			sx={ { position: 'absolute', touchAction: 'none', zIndex: 1, ...EDGE_SX[ edge ] } }
+		/>
+	);
+}

package/src/constants.ts

@@ -0,0 +1 @@
+export const FLOATING_PANEL_Z_INDEX_BASE = 1000;

package/src/hooks/use-floating-panel-actions.ts

@@ -0,0 +1,26 @@
+import { __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';
+
+import { type GlobalState, selectIsOpen } from '../store/selectors';
+import { slice } from '../store/slice';
+import { type LogicalPosition, type LogicalSize } from '../types';
+
+export function useFloatingPanelActions( id: string ) {
+	const dispatch = useDispatch();
+	const isOpen = useSelector( ( state: GlobalState ) => selectIsOpen( state, id ) );
+
+	const open = () => {
+		dispatch( slice.actions.open( id ) );
+		dispatch( slice.actions.bringToFront( id ) );
+	};
+
+	const close = () => dispatch( slice.actions.close( id ) );
+
+	return {
+		open,
+		close,
+		toggle: () => ( isOpen ? close() : open() ),
+		setPosition: ( position: LogicalPosition ) => dispatch( slice.actions.setPosition( { id, position } ) ),
+		setSize: ( size: LogicalSize ) => dispatch( slice.actions.setSize( { id, size } ) ),
+		focus: () => dispatch( slice.actions.bringToFront( id ) ),
+	};
+}

package/src/hooks/use-floating-panel-drag.ts

@@ -0,0 +1,85 @@
+import { type PointerEvent as ReactPointerEvent, useCallback, useRef } from 'react';
+
+import { type LogicalPosition } from '../types';
+import { activePositionChanged, getDragBounds, type PanelCorner } from '../utils/corner-position';
+import { isRtl } from '../utils/direction';
+import { applyDragDelta, type DragBounds, physicalToLogicalDelta } from '../utils/drag-math';
+import { APP_BAR_HEIGHT_PX, getSidePanelInlineSize } from '../utils/viewport-bounds';
+import { useFloatingPanelActions } from './use-floating-panel-actions';
+import { useFloatingPanelStatus } from './use-floating-panel-status';
+
+type DragSession = {
+	pointerId: number;
+	startClientX: number;
+	startClientY: number;
+	startPosition: LogicalPosition;
+	lastDispatchedPosition: LogicalPosition;
+	bounds: DragBounds;
+	corner: PanelCorner;
+	isRtl: boolean;
+};
+
+export function useFloatingPanelDrag( id: string ) {
+	const sessionRef = useRef< DragSession | null >( null );
+	const { corner, position, size } = useFloatingPanelStatus( id );
+	const { setPosition } = useFloatingPanelActions( id );
+
+	const onPointerDown = useCallback(
+		( event: ReactPointerEvent< HTMLElement > ) => {
+			if ( ! corner || ! position || ! size ) {
+				return;
+			}
+
+			event.currentTarget.setPointerCapture( event.pointerId );
+
+			sessionRef.current = {
+				pointerId: event.pointerId,
+				startClientX: event.clientX,
+				startClientY: event.clientY,
+				startPosition: position,
+				lastDispatchedPosition: position,
+				bounds: getDragBounds(
+					size,
+					{ width: window.innerWidth, height: window.innerHeight },
+					getSidePanelInlineSize(),
+					APP_BAR_HEIGHT_PX
+				),
+				corner,
+				isRtl: isRtl(),
+			};
+		},
+		[ corner, position, size ]
+	);
+
+	const onPointerMove = useCallback(
+		( event: ReactPointerEvent< HTMLElement > ) => {
+			const session = sessionRef.current;
+
+			if ( ! session || session.pointerId !== event.pointerId ) {
+				return;
+			}
+
+			const physical = { dx: event.clientX - session.startClientX, dy: event.clientY - session.startClientY };
+			const logical = physicalToLogicalDelta( physical, session.isRtl );
+			const nextPosition = applyDragDelta( session.corner, session.startPosition, logical, session.bounds );
+
+			if ( activePositionChanged( session.corner, session.lastDispatchedPosition, nextPosition ) ) {
+				setPosition( nextPosition );
+				session.lastDispatchedPosition = nextPosition;
+			}
+		},
+		[ setPosition ]
+	);
+
+	const clearSession = useCallback( ( event: ReactPointerEvent< HTMLElement > ) => {
+		const session = sessionRef.current;
+
+		if ( ! session || session.pointerId !== event.pointerId ) {
+			return;
+		}
+
+		sessionRef.current = null;
+	}, [] );
+
+	return { onPointerDown, onPointerMove, onPointerUp: clearSession, onPointerCancel: clearSession };
+}

package/src/hooks/use-floating-panel-resize.ts

@@ -0,0 +1,166 @@
+import { type PointerEvent as ReactPointerEvent, useCallback, useRef } from 'react';
+import { __useSelector as useSelector } from '@elementor/store';
+
+import { type GlobalState, selectMinSize } from '../store/selectors';
+import { type LogicalPosition, type LogicalSize } from '../types';
+import {
+	activePositionChanged,
+	fromStartAnchoredPosition,
+	type PanelCorner,
+	toStartAnchoredPosition,
+} from '../utils/corner-position';
+import { isRtl } from '../utils/direction';
+import { physicalToLogicalDelta } from '../utils/drag-math';
+import { applyResize, type ResizeBounds, type ResizeDirection } from '../utils/resize-math';
+import { APP_BAR_HEIGHT_PX, getSidePanelInlineSize } from '../utils/viewport-bounds';
+import { useFloatingPanelActions } from './use-floating-panel-actions';
+import { useFloatingPanelStatus } from './use-floating-panel-status';
+
+type ResizeSession = {
+	pointerId: number;
+	direction: ResizeDirection;
+	startClientX: number;
+	startClientY: number;
+	startPosition: LogicalPosition;
+	startSize: LogicalSize;
+	lastPosition: LogicalPosition;
+	lastSize: LogicalSize;
+	bounds: ResizeBounds;
+	corner: PanelCorner;
+	isRtl: boolean;
+};
+
+function getResizeBounds(
+	corner: PanelCorner,
+	position: LogicalPosition,
+	currentSize: LogicalSize,
+	minSize: LogicalSize
+): ResizeBounds {
+	const viewport = { width: window.innerWidth, height: window.innerHeight };
+	const startAnchored = toStartAnchoredPosition( corner, position, currentSize, viewport );
+
+	return {
+		minBlockSize: minSize.blockSize,
+		maxBlockSize: window.innerHeight - startAnchored.insetBlockStart,
+		minInlineSize: minSize.inlineSize,
+		maxInlineSize: window.innerWidth - startAnchored.insetInlineStart,
+		minInlineStart: getSidePanelInlineSize(),
+		minBlockStart: APP_BAR_HEIGHT_PX,
+	};
+}
+
+type ResizeHandlePointerHandlers = {
+	onPointerDown: ( event: ReactPointerEvent< HTMLElement > ) => void;
+	onPointerMove: ( event: ReactPointerEvent< HTMLElement > ) => void;
+	onPointerUp: ( event: ReactPointerEvent< HTMLElement > ) => void;
+	onPointerCancel: ( event: ReactPointerEvent< HTMLElement > ) => void;
+};
+
+export function usePanelResizeInteraction( id: string ) {
+	const sessionRef = useRef< ResizeSession | null >( null );
+	const { corner, position, size } = useFloatingPanelStatus( id );
+	const minSize = useSelector( ( state: GlobalState ) => selectMinSize( state, id ) );
+	const { setPosition, setSize } = useFloatingPanelActions( id );
+
+	const onPointerDown = useCallback(
+		( direction: ResizeDirection, event: ReactPointerEvent< HTMLElement > ) => {
+			if ( ! corner || ! position || ! size || ! minSize ) {
+				return;
+			}
+
+			event.currentTarget.setPointerCapture( event.pointerId );
+
+			sessionRef.current = {
+				pointerId: event.pointerId,
+				direction,
+				startClientX: event.clientX,
+				startClientY: event.clientY,
+				startPosition: position,
+				startSize: size,
+				lastPosition: position,
+				lastSize: size,
+				bounds: getResizeBounds( corner, position, size, minSize ),
+				corner,
+				isRtl: isRtl(),
+			};
+		},
+		[ corner, position, size, minSize ]
+	);
+
+	const onPointerMove = useCallback(
+		( event: ReactPointerEvent< HTMLElement > ) => {
+			const session = sessionRef.current;
+
+			if ( ! session || session.pointerId !== event.pointerId ) {
+				return;
+			}
+
+			const physical = { dx: event.clientX - session.startClientX, dy: event.clientY - session.startClientY };
+			const logical = physicalToLogicalDelta( physical, session.isRtl );
+			const viewport = { width: window.innerWidth, height: window.innerHeight };
+			const startAnchoredPosition = toStartAnchoredPosition(
+				session.corner,
+				session.startPosition,
+				session.startSize,
+				viewport
+			);
+			const resizeInput = { ...session.startPosition, ...startAnchoredPosition };
+			const next = applyResize(
+				session.direction,
+				resizeInput,
+				session.startSize,
+				logical.inlineDelta,
+				logical.blockDelta,
+				session.bounds
+			);
+			const nextPosition = fromStartAnchoredPosition(
+				session.corner,
+				{
+					insetBlockStart: next.position.insetBlockStart,
+					insetInlineStart: next.position.insetInlineStart,
+				},
+				next.size,
+				viewport
+			);
+
+			if ( activePositionChanged( session.corner, session.lastPosition, nextPosition ) ) {
+				setPosition( nextPosition );
+				session.lastPosition = nextPosition;
+			}
+
+			const sizeChanged =
+				next.size.inlineSize !== session.lastSize.inlineSize ||
+				next.size.blockSize !== session.lastSize.blockSize;
+
+			if ( sizeChanged ) {
+				setSize( next.size );
+				session.lastSize = next.size;
+			}
+		},
+		[ setPosition, setSize ]
+	);
+
+	const clearSession = useCallback( ( event: ReactPointerEvent< HTMLElement > ) => {
+		const session = sessionRef.current;
+
+		if ( ! session || session.pointerId !== event.pointerId ) {
+			return;
+		}
+
+		sessionRef.current = null;
+	}, [] );
+
+	const getResizeHandleProps = useCallback(
+		( direction: ResizeDirection ): ResizeHandlePointerHandlers => {
+			return {
+				onPointerDown: ( event ) => onPointerDown( direction, event ),
+				onPointerMove,
+				onPointerUp: clearSession,
+				onPointerCancel: clearSession,
+			};
+		},
+		[ onPointerDown, onPointerMove, clearSession ]
+	);
+
+	return { getResizeHandleProps };
+}

package/src/hooks/use-floating-panel-status.ts

@@ -0,0 +1,17 @@
+import { __createSelector, __useSelector as useSelector } from '@elementor/store';
+
+import { type GlobalState, selectCorner, selectIsOpen, selectPosition, selectSize } from '../store/selectors';
+
+const selectStatus = __createSelector(
+	[
+		( state: GlobalState, id: string ) => selectIsOpen( state, id ),
+		( state: GlobalState, id: string ) => selectCorner( state, id ),
+		( state: GlobalState, id: string ) => selectPosition( state, id ),
+		( state: GlobalState, id: string ) => selectSize( state, id ),
+	],
+	( isOpen, corner, position, size ) => ( { isOpen, corner, position, size } )
+);
+
+export function useFloatingPanelStatus( id: string ) {
+	return useSelector( ( state: GlobalState ) => selectStatus( state, id ) );
+}

package/src/hooks/use-floating-panel-z-index.ts

@@ -0,0 +1,7 @@
+import { __useSelector as useSelector } from '@elementor/store';
+
+import { type GlobalState, resolveOverlayZIndex } from '../store/selectors';
+
+export function useFloatingPanelZIndex( panelId: string ): number {
+	return useSelector( ( state: GlobalState ) => resolveOverlayZIndex( state, panelId ) );
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+export { createFloatingPanel, registerFloatingPanel } from './api';
+export * from './components/external';
+export { useFloatingPanelActions } from './hooks/use-floating-panel-actions';
+export { useFloatingPanelStatus } from './hooks/use-floating-panel-status';
+export { useFloatingPanelZIndex } from './hooks/use-floating-panel-z-index';
+export { init } from './init';
+export type {
+	FloatingPanelDeclaration,
+	FloatingPanelDefaults,
+	FloatingPanelHeaderAction,
+	FloatingPanelState,
+	LogicalPosition,
+	LogicalSize,
+	PanelCorner,
+} from './types';

package/src/init.ts

@@ -0,0 +1,14 @@
+import { injectIntoTop } from '@elementor/editor';
+import { __registerSlice } from '@elementor/store';
+
+import FloatingPanelsHost from './components/internal/host';
+import { slice } from './store/slice';
+import { sync } from './sync';
+
+export function init() {
+	sync();
+
+	__registerSlice( slice );
+
+	injectIntoTop( { id: 'floating-panels', component: FloatingPanelsHost } );
+}

package/src/location.ts

@@ -0,0 +1,3 @@
+import { createLocation } from '@elementor/locations';
+
+export const { inject: injectIntoFloatingPanels, useInjections: useFloatingPanelsInjections } = createLocation();

package/src/persistence.ts

@@ -0,0 +1,76 @@
+import { type FloatingPanelState, type PanelCorner } from './types';
+
+export const PERSISTENCE_STORAGE_KEY = 'elementor_floating_panels_state';
+
+const VALID_PANEL_CORNERS = new Set< PanelCorner >( [
+	'block-start-inline-start',
+	'block-start-inline-end',
+	'block-end-inline-start',
+	'block-end-inline-end',
+] );
+
+type PersistedState = Record< string, FloatingPanelState >;
+
+export function encodePersistedState( state: PersistedState ): string {
+	return JSON.stringify( state );
+}
+
+export function decodePersistedState( raw: string | null | undefined ): PersistedState {
+	if ( ! raw ) {
+		return {};
+	}
+
+	let parsed: unknown;
+
+	try {
+		parsed = JSON.parse( raw );
+	} catch {
+		return {};
+	}
+
+	if ( typeof parsed !== 'object' || parsed === null ) {
+		return {};
+	}
+
+	const result: PersistedState = {};
+
+	for ( const [ id, value ] of Object.entries( parsed as Record< string, unknown > ) ) {
+		if ( isPanelState( value ) ) {
+			result[ id ] = value;
+		}
+	}
+
+	return result;
+}
+
+function isPanelState( value: unknown ): value is FloatingPanelState {
+	if ( typeof value !== 'object' || value === null ) {
+		return false;
+	}
+
+	const v = value as Record< string, unknown >;
+
+	if ( typeof v.size !== 'object' || v.size === null ) {
+		return false;
+	}
+
+	if ( typeof v.position !== 'object' || v.position === null ) {
+		return false;
+	}
+
+	const size = v.size as Record< string, unknown >;
+	const position = v.position as Record< string, unknown >;
+
+	return (
+		typeof v.isOpen === 'boolean' &&
+		typeof v.zIndex === 'number' &&
+		typeof v.corner === 'string' &&
+		VALID_PANEL_CORNERS.has( v.corner as PanelCorner ) &&
+		typeof size.inlineSize === 'number' &&
+		typeof size.blockSize === 'number' &&
+		typeof position.insetInlineStart === 'number' &&
+		typeof position.insetInlineEnd === 'number' &&
+		typeof position.insetBlockStart === 'number' &&
+		typeof position.insetBlockEnd === 'number'
+	);
+}

package/src/store/index.ts

@@ -0,0 +1,2 @@
+export { slice } from './slice';
+export * from './selectors';

package/src/store/selectors.ts

@@ -0,0 +1,61 @@
+import { __createSelector } from '@elementor/store';
+
+import { FLOATING_PANEL_Z_INDEX_BASE } from '../constants';
+import { type FloatingPanelsSliceState } from './slice';
+
+export type GlobalState = { floatingPanels: FloatingPanelsSliceState };
+
+export function selectPanelState( state: GlobalState, id: string ) {
+	return state.floatingPanels.byId[ id ];
+}
+
+export function resolvePanelZIndex( state: GlobalState, id: string ): number {
+	return FLOATING_PANEL_Z_INDEX_BASE + ( state.floatingPanels.byId[ id ]?.zIndex ?? 0 );
+}
+
+export function resolveOverlayZIndex( state: GlobalState, id: string ): number {
+	return resolvePanelZIndex( state, id ) + 1;
+}
+
+export function selectIsOpen( state: GlobalState, id: string ): boolean {
+	return state.floatingPanels.byId[ id ]?.isOpen ?? false;
+}
+
+export function selectCorner( state: GlobalState, id: string ) {
+	return state.floatingPanels.byId[ id ]?.corner;
+}
+
+export function selectPosition( state: GlobalState, id: string ) {
+	return state.floatingPanels.byId[ id ]?.position;
+}
+
+export function selectSize( state: GlobalState, id: string ) {
+	return state.floatingPanels.byId[ id ]?.size;
+}
+
+export function selectMinSize( state: GlobalState, id: string ) {
+	return state.floatingPanels.minSizeById[ id ];
+}
+
+export function selectIsDraggable( state: GlobalState, id: string ): boolean {
+	return state.floatingPanels.isDraggableById[ id ] ?? false;
+}
+
+export function selectIsResizable( state: GlobalState, id: string ): boolean {
+	return state.floatingPanels.isResizableById[ id ] ?? false;
+}
+
+export function selectPanelTitle( state: GlobalState, id: string ): string | undefined {
+	return state.floatingPanels.titlesById[ id ];
+}
+
+export function selectTopZIndex( state: GlobalState ): number {
+	return state.floatingPanels.topZIndex;
+}
+
+export const selectOpenPanelIds = __createSelector( [ ( state: GlobalState ) => state.floatingPanels.byId ], ( byId ) =>
+	Object.entries( byId )
+		.filter( ( [ , panel ] ) => panel.isOpen )
+		.sort( ( [ , a ], [ , b ] ) => a.zIndex - b.zIndex )
+		.map( ( [ id ] ) => id )
+);