@elementor/editor-floating-panels 4.3.0-970

package/src/store/slice.ts

@@ -0,0 +1,113 @@
+import { __createSlice, type PayloadAction } from '@elementor/store';
+
+import { type FloatingPanelDefaults, type FloatingPanelState, type LogicalPosition, type LogicalSize } from '../types';
+import { buildInitialPosition, type PanelCorner } from '../utils/corner-position';
+
+type SliceState = {
+	byId: Record< string, FloatingPanelState >;
+	minSizeById: Record< string, LogicalSize >;
+	titlesById: Record< string, string >;
+	isDraggableById: Record< string, boolean >;
+	isResizableById: Record< string, boolean >;
+	topZIndex: number;
+};
+
+const DEFAULT_CORNER: PanelCorner = 'block-start-inline-start';
+
+const initialState: SliceState = {
+	byId: {},
+	minSizeById: {},
+	titlesById: {},
+	isDraggableById: {},
+	isResizableById: {},
+	topZIndex: 0,
+};
+
+export const slice = __createSlice( {
+	name: 'floatingPanels',
+	initialState,
+	reducers: {
+		register(
+			state,
+			action: PayloadAction< {
+				id: string;
+				defaults: FloatingPanelDefaults;
+				title?: string;
+				isDraggable?: boolean;
+				isResizable?: boolean;
+				persisted?: FloatingPanelState;
+			} >
+		) {
+			const { id, defaults, title, isDraggable, isResizable, persisted } = action.payload;
+
+			state.minSizeById[ id ] = { inlineSize: defaults.minWidth, blockSize: defaults.minHeight };
+			state.isDraggableById[ id ] = isDraggable ?? false;
+			state.isResizableById[ id ] = isResizable ?? false;
+
+			if ( title !== undefined ) {
+				state.titlesById[ id ] = title;
+			}
+
+			if ( state.byId[ id ] ) {
+				return;
+			}
+
+			const corner = defaults.corner ?? DEFAULT_CORNER;
+			const canReusePersisted = persisted && persisted.corner === corner;
+
+			state.byId[ id ] = canReusePersisted
+				? persisted
+				: {
+						isOpen: false,
+						corner,
+						position: buildInitialPosition( corner, defaults.initialPosition ),
+						size: { inlineSize: defaults.width, blockSize: defaults.height },
+						zIndex: 0,
+				  };
+
+			if ( persisted && persisted.zIndex > state.topZIndex ) {
+				state.topZIndex = persisted.zIndex;
+			}
+		},
+		open( state, action: PayloadAction< string > ) {
+			const panel = state.byId[ action.payload ];
+
+			if ( panel ) {
+				panel.isOpen = true;
+			}
+		},
+		close( state, action: PayloadAction< string > ) {
+			const panel = state.byId[ action.payload ];
+
+			if ( panel ) {
+				panel.isOpen = false;
+			}
+		},
+		setPosition( state, action: PayloadAction< { id: string; position: LogicalPosition } > ) {
+			const panel = state.byId[ action.payload.id ];
+
+			if ( panel ) {
+				panel.position = action.payload.position;
+			}
+		},
+		setSize( state, action: PayloadAction< { id: string; size: LogicalSize } > ) {
+			const panel = state.byId[ action.payload.id ];
+
+			if ( panel ) {
+				panel.size = action.payload.size;
+			}
+		},
+		bringToFront( state, action: PayloadAction< string > ) {
+			const panel = state.byId[ action.payload ];
+
+			if ( ! panel ) {
+				return;
+			}
+
+			state.topZIndex += 1;
+			panel.zIndex = state.topZIndex;
+		},
+	},
+} );
+
+export type FloatingPanelsSliceState = SliceState;

package/src/sync.ts

@@ -0,0 +1,104 @@
+import { __getStore, __subscribeWithSelector } from '@elementor/store';
+
+import { decodePersistedState, encodePersistedState, PERSISTENCE_STORAGE_KEY } from './persistence';
+import { type GlobalState } from './store/selectors';
+import { type FloatingPanelState } from './types';
+
+const PERSIST_DEBOUNCE_MS = 250;
+
+export interface PanelStateStorage {
+	read: () => string | null;
+	write: ( value: string ) => void;
+}
+
+export const localStorageAdapter: PanelStateStorage = {
+	read: () => {
+		try {
+			return globalThis.localStorage?.getItem( PERSISTENCE_STORAGE_KEY ) ?? null;
+		} catch {
+			return null;
+		}
+	},
+	write: ( value ) => {
+		try {
+			globalThis.localStorage?.setItem( PERSISTENCE_STORAGE_KEY, value );
+		} catch {
+			// Best-effort: storage may be full, blocked, or unavailable.
+		}
+	},
+};
+
+let cachedPersistedState: Record< string, FloatingPanelState > = {};
+let isSyncInitialized = false;
+let persistenceTimer: ReturnType< typeof setTimeout > | null = null;
+let persistenceUnsubscribe: ( () => void ) | null = null;
+let persistenceSession = 0;
+
+export function isFloatingPanelsSyncInitialized(): boolean {
+	return isSyncInitialized;
+}
+
+export function sync( storage: PanelStateStorage = localStorageAdapter ): void {
+	isSyncInitialized = true;
+	cachedPersistedState = decodePersistedState( storage.read() );
+
+	schedulePersistence( storage );
+}
+
+export function getPersistedState( id: string ): FloatingPanelState | undefined {
+	return cachedPersistedState[ id ];
+}
+
+const STORE_READY_POLL_MS = 16;
+
+function clearPersistenceTimer(): void {
+	if ( persistenceTimer ) {
+		clearTimeout( persistenceTimer );
+		persistenceTimer = null;
+	}
+}
+
+function schedulePersistence( storage: PanelStateStorage ): void {
+	clearPersistenceTimer();
+	persistenceUnsubscribe?.();
+	persistenceUnsubscribe = null;
+
+	const session = ++persistenceSession;
+
+	const subscribe = () => {
+		if ( session !== persistenceSession ) {
+			return;
+		}
+
+		persistenceUnsubscribe = __subscribeWithSelector(
+			( state: GlobalState ) => state.floatingPanels.byId,
+			( byId ) => {
+				clearPersistenceTimer();
+
+				persistenceTimer = setTimeout( () => {
+					if ( session !== persistenceSession ) {
+						return;
+					}
+
+					cachedPersistedState = { ...cachedPersistedState, ...byId };
+					storage.write( encodePersistedState( cachedPersistedState ) );
+				}, PERSIST_DEBOUNCE_MS );
+			}
+		);
+	};
+
+	const waitForStore = () => {
+		if ( session !== persistenceSession ) {
+			return;
+		}
+
+		if ( __getStore() ) {
+			subscribe();
+			return;
+		}
+
+		setTimeout( waitForStore, STORE_READY_POLL_MS );
+	};
+
+	waitForStore();
+}

package/src/types.ts

@@ -0,0 +1,64 @@
+import { type ComponentType } from 'react';
+
+import type { PanelCorner } from './utils/corner-position';
+
+export type { PanelCorner };
+
+export type LogicalSize = {
+	inlineSize: number;
+	blockSize: number;
+};
+
+export type LogicalPosition = {
+	insetInlineStart: number;
+	insetInlineEnd: number;
+	insetBlockStart: number;
+	insetBlockEnd: number;
+};
+
+/**
+ * Public API for declaring a floating panel's initial dimensions.
+ *
+ * Sizes use physical names (width/height) intentionally — Elementor renders
+ * in horizontal writing mode only, so these are equivalent to logical
+ * inline-size/block-size. Positioning continues to use logical names
+ * because position is genuinely direction-sensitive.
+ *
+ * If multi-writing-mode support is ever needed, replace these fields with
+ * `size: LogicalSize` and `minSize: LogicalSize` and update the store's
+ * register reducer.
+ */
+export type FloatingPanelDefaults = {
+	width: number;
+	height: number;
+	minWidth: number;
+	minHeight: number;
+	corner?: PanelCorner;
+	initialPosition?: Partial< LogicalPosition >;
+};
+
+export type FloatingPanelHeaderAction = {
+	id: string;
+	icon: ComponentType;
+	label: string;
+	onClick?: () => void;
+	disabled?: boolean;
+};
+
+export type FloatingPanelDeclaration = {
+	id: string;
+	title: string;
+	icon: ComponentType;
+	component: ComponentType;
+	isDraggable?: boolean;
+	isResizable?: boolean;
+	defaults: FloatingPanelDefaults;
+};
+
+export type FloatingPanelState = {
+	isOpen: boolean;
+	zIndex: number;
+	size: LogicalSize;
+	corner: PanelCorner;
+	position: LogicalPosition;
+};

package/src/utils/clamp.ts

@@ -0,0 +1,3 @@
+export function clamp( value: number, min: number, max: number ): number {
+	return Math.min( Math.max( min, value ), Math.max( min, max ) );
+}

package/src/utils/corner-position.ts

@@ -0,0 +1,149 @@
+import type { LogicalPosition, LogicalSize } from '../types';
+
+export type PanelCorner =
+	| 'block-start-inline-start'
+	| 'block-start-inline-end'
+	| 'block-end-inline-start'
+	| 'block-end-inline-end';
+
+export const DEFAULT_INSET_BLOCK_PX = 80;
+export const DEFAULT_INSET_INLINE_PX = 24;
+
+type InsetKey = keyof LogicalPosition;
+
+const ACTIVE_INSETS: Record< PanelCorner, [ InsetKey, InsetKey ] > = {
+	'block-start-inline-start': [ 'insetInlineStart', 'insetBlockStart' ],
+	'block-start-inline-end': [ 'insetInlineEnd', 'insetBlockStart' ],
+	'block-end-inline-start': [ 'insetInlineStart', 'insetBlockEnd' ],
+	'block-end-inline-end': [ 'insetInlineEnd', 'insetBlockEnd' ],
+};
+
+const CORNER_DEFAULTS: Record< PanelCorner, Partial< LogicalPosition > > = {
+	'block-start-inline-start': { insetInlineStart: DEFAULT_INSET_INLINE_PX, insetBlockStart: DEFAULT_INSET_BLOCK_PX },
+	'block-start-inline-end': { insetInlineEnd: DEFAULT_INSET_INLINE_PX, insetBlockStart: DEFAULT_INSET_BLOCK_PX },
+	'block-end-inline-start': { insetInlineStart: DEFAULT_INSET_INLINE_PX, insetBlockEnd: DEFAULT_INSET_BLOCK_PX },
+	'block-end-inline-end': { insetInlineEnd: DEFAULT_INSET_INLINE_PX, insetBlockEnd: DEFAULT_INSET_BLOCK_PX },
+};
+
+const EMPTY_POSITION: LogicalPosition = {
+	insetBlockStart: 0,
+	insetBlockEnd: 0,
+	insetInlineStart: 0,
+	insetInlineEnd: 0,
+};
+
+export function getActiveInsetKeys( corner: PanelCorner ): [ InsetKey, InsetKey ] {
+	return ACTIVE_INSETS[ corner ];
+}
+
+export function usesInlineStart( corner: PanelCorner ): boolean {
+	return corner.endsWith( 'inline-start' );
+}
+
+export function usesBlockStart( corner: PanelCorner ): boolean {
+	return corner.startsWith( 'block-start' );
+}
+
+export function buildInitialPosition( corner: PanelCorner, overrides?: Partial< LogicalPosition > ): LogicalPosition {
+	const [ inlineKey, blockKey ] = getActiveInsetKeys( corner );
+	const defaults = CORNER_DEFAULTS[ corner ];
+
+	return {
+		...EMPTY_POSITION,
+		[ inlineKey ]: overrides?.[ inlineKey ] ?? defaults[ inlineKey ] ?? 0,
+		[ blockKey ]: overrides?.[ blockKey ] ?? defaults[ blockKey ] ?? 0,
+	};
+}
+
+export function positionToCssInsets(
+	corner: PanelCorner,
+	position: LogicalPosition
+): Partial< Record< InsetKey, string > > {
+	const [ inlineKey, blockKey ] = getActiveInsetKeys( corner );
+
+	return {
+		[ inlineKey ]: `${ position[ inlineKey ] }px`,
+		[ blockKey ]: `${ position[ blockKey ] }px`,
+	};
+}
+
+export function toStartAnchoredPosition(
+	corner: PanelCorner,
+	position: LogicalPosition,
+	size: LogicalSize,
+	viewport: { width: number; height: number }
+): Pick< LogicalPosition, 'insetInlineStart' | 'insetBlockStart' > {
+	return {
+		insetInlineStart: usesInlineStart( corner )
+			? position.insetInlineStart
+			: viewport.width - position.insetInlineEnd - size.inlineSize,
+		insetBlockStart: usesBlockStart( corner )
+			? position.insetBlockStart
+			: viewport.height - position.insetBlockEnd - size.blockSize,
+	};
+}
+
+export function fromStartAnchoredPosition(
+	corner: PanelCorner,
+	startAnchored: Pick< LogicalPosition, 'insetInlineStart' | 'insetBlockStart' >,
+	size: LogicalSize,
+	viewport: { width: number; height: number }
+): LogicalPosition {
+	if ( usesInlineStart( corner ) && usesBlockStart( corner ) ) {
+		return {
+			...EMPTY_POSITION,
+			insetInlineStart: startAnchored.insetInlineStart,
+			insetBlockStart: startAnchored.insetBlockStart,
+		};
+	}
+
+	const position = { ...EMPTY_POSITION };
+
+	if ( usesInlineStart( corner ) ) {
+		position.insetInlineStart = startAnchored.insetInlineStart;
+		position.insetBlockEnd = viewport.height - startAnchored.insetBlockStart - size.blockSize;
+	} else if ( usesBlockStart( corner ) ) {
+		position.insetInlineEnd = viewport.width - startAnchored.insetInlineStart - size.inlineSize;
+		position.insetBlockStart = startAnchored.insetBlockStart;
+	} else {
+		position.insetInlineEnd = viewport.width - startAnchored.insetInlineStart - size.inlineSize;
+		position.insetBlockEnd = viewport.height - startAnchored.insetBlockStart - size.blockSize;
+	}
+
+	return position;
+}
+
+export function activePositionChanged( corner: PanelCorner, before: LogicalPosition, after: LogicalPosition ): boolean {
+	const [ inlineKey, blockKey ] = getActiveInsetKeys( corner );
+
+	return before[ inlineKey ] !== after[ inlineKey ] || before[ blockKey ] !== after[ blockKey ];
+}
+
+export type DragBounds = {
+	minInlineStart: number;
+	maxInlineStart: number;
+	minInlineEnd: number;
+	maxInlineEnd: number;
+	minBlockStart: number;
+	maxBlockStart: number;
+	minBlockEnd: number;
+	maxBlockEnd: number;
+};
+
+export function getDragBounds(
+	size: LogicalSize,
+	viewport: { width: number; height: number },
+	sidePanelInlineSize: number,
+	appBarHeight: number
+): DragBounds {
+	return {
+		minInlineStart: sidePanelInlineSize,
+		maxInlineStart: viewport.width - size.inlineSize,
+		minInlineEnd: 0,
+		maxInlineEnd: viewport.width - sidePanelInlineSize - size.inlineSize,
+		minBlockStart: appBarHeight,
+		maxBlockStart: viewport.height - size.blockSize,
+		minBlockEnd: 0,
+		maxBlockEnd: viewport.height - appBarHeight - size.blockSize,
+	};
+}

package/src/utils/direction.ts

@@ -0,0 +1,3 @@
+export function isRtl(): boolean {
+	return ( document?.documentElement?.dir ?? '' ).toLowerCase() === 'rtl';
+}

package/src/utils/drag-math.ts

@@ -0,0 +1,49 @@
+import { type LogicalPosition } from '../types';
+import { clamp } from './clamp';
+import {
+	type DragBounds,
+	getActiveInsetKeys,
+	type PanelCorner,
+	usesBlockStart,
+	usesInlineStart,
+} from './corner-position';
+
+export type { DragBounds } from './corner-position';
+
+export type PhysicalDelta = { dx: number; dy: number };
+
+export type LogicalDelta = { inlineDelta: number; blockDelta: number };
+
+export function physicalToLogicalDelta( delta: PhysicalDelta, isRtl: boolean ): LogicalDelta {
+	return {
+		inlineDelta: isRtl ? -delta.dx : delta.dx,
+		blockDelta: delta.dy,
+	};
+}
+
+export function applyDragDelta(
+	corner: PanelCorner,
+	position: LogicalPosition,
+	delta: LogicalDelta,
+	bounds: DragBounds
+): LogicalPosition {
+	const [ inlineKey, blockKey ] = getActiveInsetKeys( corner );
+	const inlineDelta = usesInlineStart( corner ) ? delta.inlineDelta : -delta.inlineDelta;
+	const blockDelta = usesBlockStart( corner ) ? delta.blockDelta : -delta.blockDelta;
+
+	const inlineBounds =
+		inlineKey === 'insetInlineStart'
+			? { min: bounds.minInlineStart, max: bounds.maxInlineStart }
+			: { min: bounds.minInlineEnd, max: bounds.maxInlineEnd };
+
+	const blockBounds =
+		blockKey === 'insetBlockStart'
+			? { min: bounds.minBlockStart, max: bounds.maxBlockStart }
+			: { min: bounds.minBlockEnd, max: bounds.maxBlockEnd };
+
+	return {
+		...position,
+		[ inlineKey ]: clamp( position[ inlineKey ] + inlineDelta, inlineBounds.min, inlineBounds.max ),
+		[ blockKey ]: clamp( position[ blockKey ] + blockDelta, blockBounds.min, blockBounds.max ),
+	};
+}

package/src/utils/resize-math.ts

@@ -0,0 +1,107 @@
+import { type LogicalPosition, type LogicalSize } from '../types';
+import { clamp } from './clamp';
+import { type PanelCorner } from './corner-position';
+
+export type ResizeEdge = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+
+export type ResizeCorner = PanelCorner;
+
+export type ResizeDirection = ResizeEdge | PanelCorner;
+
+export type ResizeBounds = {
+	minInlineSize: number;
+	maxInlineSize: number;
+	minBlockSize: number;
+	maxBlockSize: number;
+	minInlineStart: number;
+	minBlockStart: number;
+};
+
+export function applyInlineEndResize( size: LogicalSize, inlineDelta: number, bounds: ResizeBounds ): LogicalSize {
+	return {
+		inlineSize: clamp( size.inlineSize + inlineDelta, bounds.minInlineSize, bounds.maxInlineSize ),
+		blockSize: size.blockSize,
+	};
+}
+
+export function applyBlockEndResize( size: LogicalSize, blockDelta: number, bounds: ResizeBounds ): LogicalSize {
+	return {
+		inlineSize: size.inlineSize,
+		blockSize: clamp( size.blockSize + blockDelta, bounds.minBlockSize, bounds.maxBlockSize ),
+	};
+}
+
+export function applyInlineStartResize(
+	position: LogicalPosition,
+	size: LogicalSize,
+	inlineDelta: number,
+	bounds: ResizeBounds
+): { position: LogicalPosition; size: LogicalSize } {
+	const anchorInlineEnd = position.insetInlineStart + size.inlineSize;
+	const lowBound = Math.max( bounds.minInlineStart, anchorInlineEnd - bounds.maxInlineSize );
+	const highBound = anchorInlineEnd - bounds.minInlineSize;
+	const nextInlineStart = clamp( position.insetInlineStart + inlineDelta, lowBound, highBound );
+
+	return {
+		position: { ...position, insetInlineStart: nextInlineStart },
+		size: { ...size, inlineSize: anchorInlineEnd - nextInlineStart },
+	};
+}
+
+export function applyBlockStartResize(
+	position: LogicalPosition,
+	size: LogicalSize,
+	blockDelta: number,
+	bounds: ResizeBounds
+): { position: LogicalPosition; size: LogicalSize } {
+	const anchorBlockEnd = position.insetBlockStart + size.blockSize;
+	const lowBound = Math.max( bounds.minBlockStart, anchorBlockEnd - bounds.maxBlockSize );
+	const highBound = anchorBlockEnd - bounds.minBlockSize;
+	const nextBlockStart = clamp( position.insetBlockStart + blockDelta, lowBound, highBound );
+
+	return {
+		position: { ...position, insetBlockStart: nextBlockStart },
+		size: { ...size, blockSize: anchorBlockEnd - nextBlockStart },
+	};
+}
+
+export function applyResize(
+	direction: ResizeDirection,
+	position: LogicalPosition,
+	size: LogicalSize,
+	inlineDelta: number,
+	blockDelta: number,
+	bounds: ResizeBounds
+): { position: LogicalPosition; size: LogicalSize } {
+	if ( direction === 'inline-end' ) {
+		return { position, size: applyInlineEndResize( size, inlineDelta, bounds ) };
+	}
+
+	if ( direction === 'block-end' ) {
+		return { position, size: applyBlockEndResize( size, blockDelta, bounds ) };
+	}
+
+	if ( direction === 'inline-start' ) {
+		return applyInlineStartResize( position, size, inlineDelta, bounds );
+	}
+
+	if ( direction === 'block-start' ) {
+		return applyBlockStartResize( position, size, blockDelta, bounds );
+	}
+
+	let next = { position, size };
+
+	if ( direction.includes( 'inline-start' ) ) {
+		next = applyInlineStartResize( next.position, next.size, inlineDelta, bounds );
+	} else {
+		next = { position: next.position, size: applyInlineEndResize( next.size, inlineDelta, bounds ) };
+	}
+
+	if ( direction.includes( 'block-start' ) ) {
+		next = applyBlockStartResize( next.position, next.size, blockDelta, bounds );
+	} else {
+		next = { position: next.position, size: applyBlockEndResize( next.size, blockDelta, bounds ) };
+	}
+
+	return next;
+}

package/src/utils/viewport-bounds.ts

@@ -0,0 +1,7 @@
+export const APP_BAR_HEIGHT_PX = 48;
+
+const SIDE_PANEL_SELECTOR = '#elementor-panel';
+
+export function getSidePanelInlineSize(): number {
+	return document.querySelector< HTMLElement >( SIDE_PANEL_SELECTOR )?.getBoundingClientRect().width ?? 0;
+}