@elementor/editor-editing-panel 1.15.0 → 1.17.0

package/src/styles-inheritance/create-snapshots-manager.ts

@@ -0,0 +1,179 @@
+import { type BreakpointId, type BreakpointNode } from '@elementor/editor-responsive';
+import { type StyleDefinitionState } from '@elementor/editor-styles';
+
+import {
+	type BreakpointsInheritancePath,
+	type BreakpointsStatesSnapshotsMapping,
+	type BreakpointStatesSlotsMapping,
+	type SnapshotPropValue,
+	type StyleInheritanceMetaProps,
+	type StylesInheritanceSnapshot,
+	type StylesInheritanceSnapshotGetter,
+	type StylesInheritanceSnapshotsSlot,
+	type StyleVariantWithId,
+} from './types';
+import { DEFAULT_STATE, getBreakpointKey, getStateKey } from './utils';
+
+export function createSnapshotsManager(
+	getStylesByMeta: ( meta: StyleInheritanceMetaProps ) => StyleVariantWithId[],
+	breakpointsRoot: BreakpointNode
+): StylesInheritanceSnapshotGetter {
+	const breakpointsInheritancePaths = makeBreakpointsInheritancePaths( breakpointsRoot );
+	const allBreakpointStatesSnapshots: BreakpointsStatesSnapshotsMapping = {};
+
+	const buildMissingSnapshotsForBreakpoint = (
+		currentBreakpointId: BreakpointId | null,
+		parentBreakpoint: BreakpointStatesSlotsMapping | undefined,
+		state: StyleDefinitionState
+	) => {
+		const currentBreakpointKey = getBreakpointKey( currentBreakpointId );
+		const stateKey = getStateKey( state );
+
+		if ( ! allBreakpointStatesSnapshots[ currentBreakpointKey ] ) {
+			allBreakpointStatesSnapshots[ currentBreakpointKey ] = {
+				[ DEFAULT_STATE ]: buildStateSnapshotSlot(
+					getStylesByMeta( { breakpoint: currentBreakpointId, state: null } ),
+					parentBreakpoint,
+					{},
+					null
+				),
+			};
+		}
+
+		if ( state && ! allBreakpointStatesSnapshots[ currentBreakpointKey ][ stateKey ] ) {
+			allBreakpointStatesSnapshots[ currentBreakpointKey ][ stateKey ] = buildStateSnapshotSlot(
+				getStylesByMeta( { breakpoint: currentBreakpointId, state } ),
+				parentBreakpoint,
+				allBreakpointStatesSnapshots[ currentBreakpointKey ],
+				state
+			);
+		}
+	};
+
+	return ( meta: StyleInheritanceMetaProps ) => {
+		const { breakpoint, state } = meta;
+
+		const stateKey = getStateKey( state );
+		const breakpointKey = getBreakpointKey( breakpoint );
+
+		if ( allBreakpointStatesSnapshots[ breakpointKey ]?.[ stateKey ] ) {
+			// snapshot was already made for this breakpoint+state
+			return allBreakpointStatesSnapshots[ breakpointKey ][ stateKey ].snapshot;
+		}
+
+		const breakpointsChain = [ ...breakpointsInheritancePaths[ breakpointKey ], breakpoint ];
+
+		breakpointsChain.forEach( ( breakpointId, index ) => {
+			const parentBreakpointId = index > 0 ? breakpointsChain[ index - 1 ] : null;
+
+			buildMissingSnapshotsForBreakpoint(
+				breakpointId,
+				parentBreakpointId ? allBreakpointStatesSnapshots[ parentBreakpointId ] : undefined,
+				state
+			);
+		} );
+
+		return allBreakpointStatesSnapshots[ breakpointKey ]?.[ stateKey ]?.snapshot;
+	};
+}
+
+/**
+ * builds a mapping of each breakpoint to its inheritance chain, e.g. -
+ * 	desktop: [],
+ * 	tablet: [ 'desktop' ],
+ * 	mobile: [ 'desktop', 'tablet' ]
+ * @param root
+ */
+function makeBreakpointsInheritancePaths( root: BreakpointNode ): BreakpointsInheritancePath {
+	const breakpoints: Partial< BreakpointsInheritancePath > = {};
+
+	const traverse = ( node: BreakpointNode, parent?: BreakpointId[] ) => {
+		const { id, children } = node;
+
+		breakpoints[ id ] = parent ? [ ...parent ] : [];
+
+		children?.forEach( ( child ) => {
+			traverse( child, [ ...( breakpoints[ id ] ?? [] ), id ] );
+		} );
+	};
+
+	traverse( root );
+
+	return breakpoints as BreakpointsInheritancePath;
+}
+
+// creates a snapshot slot for a specific breakpoint and state
+function buildStateSnapshotSlot(
+	styles: StyleVariantWithId[],
+	parentBreakpoint: BreakpointStatesSlotsMapping | undefined,
+	currentBreakpoint: BreakpointStatesSlotsMapping,
+	state: StyleDefinitionState
+): StylesInheritanceSnapshotsSlot {
+	const initialSlot = buildInitialSnapshotFromStyles( styles );
+
+	if ( ! state ) {
+		return {
+			snapshot: mergeSnapshots( [ initialSlot.snapshot, parentBreakpoint?.[ DEFAULT_STATE ]?.snapshot ] ),
+			stateSpecificSnapshot: undefined,
+		};
+	}
+
+	return {
+		snapshot: mergeSnapshots( [
+			initialSlot.snapshot,
+			parentBreakpoint?.[ state ]?.stateSpecificSnapshot,
+			currentBreakpoint[ DEFAULT_STATE ]?.snapshot,
+		] ),
+		stateSpecificSnapshot: mergeSnapshots( [
+			initialSlot.stateSpecificSnapshot,
+			parentBreakpoint?.[ state ]?.stateSpecificSnapshot,
+		] ),
+	};
+}
+
+// creates an initial snapshot based on the passed style variants only
+function buildInitialSnapshotFromStyles( styles: StyleVariantWithId[] ): StylesInheritanceSnapshotsSlot {
+	const snapshot: StylesInheritanceSnapshot = {};
+
+	styles.forEach( ( styleVariantWithId ) => {
+		const {
+			styleVariant: { props },
+		} = styleVariantWithId;
+
+		Object.entries( props ).forEach( ( [ key, value ] ) => {
+			if ( ! snapshot[ key ] ) {
+				snapshot[ key ] = [];
+			}
+
+			const snapshotPropValue: SnapshotPropValue = {
+				...styleVariantWithId,
+				value,
+			};
+
+			snapshot[ key ].push( snapshotPropValue );
+		} );
+	} );
+
+	return {
+		snapshot,
+		stateSpecificSnapshot: snapshot,
+	};
+}
+
+// merge previous snapshot into the current one - first value of each prop is the strongest
+function mergeSnapshots( snapshots: ( StylesInheritanceSnapshot | undefined )[] ) {
+	const snapshot: StylesInheritanceSnapshot = {};
+
+	snapshots.filter( Boolean ).forEach( ( currentSnapshot ) =>
+		Object.entries( currentSnapshot as StylesInheritanceSnapshot ).forEach( ( [ key, values ] ) => {
+			if ( ! snapshot[ key ] ) {
+				snapshot[ key ] = [];
+			}
+
+			// concatenate the previous snapshot's prop values to the current ones
+			snapshot[ key ] = snapshot[ key ].concat( values );
+		} )
+	);
+
+	return snapshot;
+}

package/src/styles-inheritance/create-styles-inheritance.ts

@@ -0,0 +1,50 @@
+import { type BreakpointNode } from '@elementor/editor-responsive';
+import { type StyleDefinition } from '@elementor/editor-styles';
+
+import { createSnapshotsManager } from './create-snapshots-manager';
+import { type BreakpointsStatesStyles, type StyleInheritanceMetaProps, type StylesInheritanceSnapshot } from './types';
+import { getBreakpointKey, getStateKey } from './utils';
+
+export function createStylesInheritance(
+	styleDefs: StyleDefinition[],
+	breakpointsRoot: BreakpointNode
+): ( meta: StyleInheritanceMetaProps ) => StylesInheritanceSnapshot | undefined {
+	const styleVariantsByMeta = buildStyleVariantsByMetaMapping( styleDefs );
+
+	const getStyles = ( { breakpoint, state }: StyleInheritanceMetaProps ) =>
+		styleVariantsByMeta?.[ getBreakpointKey( breakpoint ) ]?.[ getStateKey( state ) ] ?? [];
+
+	return createSnapshotsManager( getStyles, breakpointsRoot );
+}
+
+function buildStyleVariantsByMetaMapping( styleDefs: StyleDefinition[] ): BreakpointsStatesStyles {
+	const breakpointStateSlots: BreakpointsStatesStyles = {};
+
+	styleDefs.forEach( ( styleDef ) => {
+		// iterate over each style definition's variants and place them in the corresponding breakpoint's base or state styles
+		styleDef.variants.forEach( ( styleVariant ) => {
+			const { meta } = styleVariant;
+			const { state, breakpoint } = meta;
+
+			const breakpointKey = getBreakpointKey( breakpoint );
+			const stateKey = getStateKey( state );
+
+			if ( ! breakpointStateSlots[ breakpointKey ] ) {
+				breakpointStateSlots[ breakpointKey ] = {};
+			}
+
+			const breakpointNode = breakpointStateSlots[ breakpointKey ];
+
+			if ( ! breakpointNode[ stateKey ] ) {
+				breakpointNode[ stateKey ] = [];
+			}
+
+			breakpointNode[ stateKey ].push( {
+				styleId: styleDef.id,
+				styleVariant,
+			} );
+		} );
+	} );
+
+	return breakpointStateSlots;
+}

package/src/styles-inheritance/types.ts

@@ -0,0 +1,42 @@
+import { type PropValue } from '@elementor/editor-props';
+import { type BreakpointId } from '@elementor/editor-responsive';
+import { type StyleDefinitionState, type StyleDefinitionVariant } from '@elementor/editor-styles';
+
+export type StyleDefinitionStateWithNormal = NonNullable< StyleDefinitionState > | 'normal';
+
+type StatesMapping< T > = Partial< Record< StyleDefinitionStateWithNormal, T > >;
+
+export type StyleVariantWithId = {
+	styleId: string;
+	styleVariant: StyleDefinitionVariant;
+};
+
+export type SnapshotPropValue = StyleVariantWithId & {
+	value: PropValue;
+};
+
+export type StylesInheritanceSnapshot = Record< string, SnapshotPropValue[] >;
+
+export type StylesInheritanceSnapshotsSlot = {
+	snapshot?: StylesInheritanceSnapshot;
+	stateSpecificSnapshot?: StylesInheritanceSnapshot; // with only prop values of the current state, used for inheritance  - e.g. mobile-hover inherits first from tablet-hover specific snapshot
+};
+
+export type BreakpointStatesSlotsMapping = StatesMapping< StylesInheritanceSnapshotsSlot >;
+
+export type BreakpointsStatesSnapshotsMapping = Partial< Record< BreakpointId, BreakpointStatesSlotsMapping > >;
+
+type BreakpointStatesStyles = StatesMapping< StyleVariantWithId[] >;
+
+export type BreakpointsStatesStyles = Partial< Record< BreakpointId, Partial< BreakpointStatesStyles > > >;
+
+export type BreakpointsInheritancePath = Record< BreakpointId, BreakpointId[] >;
+
+export type StyleInheritanceMetaProps = {
+	breakpoint: BreakpointId | null;
+	state: StyleDefinitionState;
+};
+
+export type StylesInheritanceSnapshotGetter = (
+	meta: StyleInheritanceMetaProps
+) => StylesInheritanceSnapshot | undefined;

package/src/styles-inheritance/utils.ts

@@ -0,0 +1,10 @@
+import { type BreakpointId } from '@elementor/editor-responsive';
+import { type StyleDefinitionState } from '@elementor/editor-styles';
+
+export const DEFAULT_STATE = 'normal';
+
+const DEFAULT_BREAKPOINT = 'desktop';
+
+export const getStateKey = ( state: StyleDefinitionState ) => state ?? DEFAULT_STATE;
+
+export const getBreakpointKey = ( breakpoint: BreakpointId | null ): BreakpointId => breakpoint ?? DEFAULT_BREAKPOINT;