@elementor/editor-interactions 4.1.0-698 → 4.1.0-700

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-interactions",
-  "version": "4.1.0-698",
+  "version": "4.1.0-700",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,19 +39,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-controls": "4.1.0-698",
-    "@elementor/editor-elements": "4.1.0-698",
-    "@elementor/editor-mcp": "4.1.0-698",
-    "@elementor/editor-props": "4.1.0-698",
-    "@elementor/editor-responsive": "4.1.0-698",
-    "@elementor/editor-ui": "4.1.0-698",
-    "@elementor/editor-v1-adapters": "4.1.0-698",
+    "@elementor/editor-controls": "4.1.0-700",
+    "@elementor/editor-elements": "4.1.0-700",
+    "@elementor/editor-mcp": "4.1.0-700",
+    "@elementor/editor-props": "4.1.0-700",
+    "@elementor/editor-responsive": "4.1.0-700",
+    "@elementor/editor-ui": "4.1.0-700",
+    "@elementor/editor-v1-adapters": "4.1.0-700",
     "@elementor/icons": "^1.68.0",
-    "@elementor/schema": "4.1.0-698",
-    "@elementor/session": "4.1.0-698",
+    "@elementor/schema": "4.1.0-700",
+    "@elementor/session": "4.1.0-700",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-698",
-    "@elementor/events": "4.1.0-698",
+    "@elementor/utils": "4.1.0-700",
+    "@elementor/events": "4.1.0-700",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/mcp/tools/schema.ts

@@ -25,7 +25,7 @@ export const proSchema = {
 		.optional()
 		.describe( 'Event that triggers the animation' ),
 	effect: z.enum( [ 'fade', 'slide', 'scale', 'custom' ] ).optional().describe( 'Animation effect type' ),
-	customEffect: z
+	customEffects: z
 		.object( {
 			keyframes: z
 				.array(

package/src/utils/custom-effect-to-prop-value.ts

@@ -0,0 +1,145 @@
+import { type PropValue } from '@elementor/editor-props';
+
+const CUSTOM_EFFECT_TYPE = 'custom-effect';
+const KEYFRAMES_TYPE = 'keyframes';
+const KEYFRAME_STOP_TYPE = 'keyframe-stop';
+const KEYFRAME_STOP_SETTINGS_TYPE = 'keyframe-stop-settings';
+const SIZE_TYPE = 'size';
+const NUMBER_TYPE = 'number';
+const TRANSFORM_SCALE_TYPE = 'transform-scale';
+const TRANSFORM_ROTATE_TYPE = 'transform-rotate';
+const TRANSFORM_MOVE_TYPE = 'transform-move';
+const TRANSFORM_SKEW_TYPE = 'transform-skew';
+const UNIT_PERCENT = '%';
+const UNIT_DEG = 'deg';
+const UNIT_PX = 'px';
+
+export type PlainKeyframeValue = {
+	opacity?: number;
+	scale?: { x: number; y: number };
+	rotate?: { x: number; y: number; z: number };
+	move?: { x: number; y: number; z: number };
+	skew?: { x: number; y: number };
+};
+
+export type PlainKeyframe = { stop: number; value: PlainKeyframeValue };
+
+export type PlainCustomEffect = { keyframes: PlainKeyframe[] };
+
+const isPlainCustomEffect = ( v: unknown ): v is PlainCustomEffect =>
+	typeof v === 'object' &&
+	v !== null &&
+	'keyframes' in v &&
+	Array.isArray( ( v as PlainCustomEffect ).keyframes ) &&
+	! ( '$$type' in v );
+
+const toSizePropValue = ( size: number, unit: string = UNIT_PERCENT ): PropValue => ( {
+	$$type: SIZE_TYPE,
+	value: { size, unit },
+} );
+
+const toNumberPropValue = ( n: number ): PropValue => ( {
+	$$type: NUMBER_TYPE,
+	value: n,
+} );
+
+const toDimensionalNumberPropValue = (
+	type: string,
+	plain: { x?: number; y?: number; z?: number },
+	defaults: { x: number; y: number; z: number }
+): PropValue => ( {
+	$$type: type,
+	value: {
+		x: toNumberPropValue( plain.x ?? defaults.x ),
+		y: toNumberPropValue( plain.y ?? defaults.y ),
+		z: toNumberPropValue( plain.z ?? defaults.z ),
+	},
+} );
+
+const toDimensionalSizePropValue = (
+	type: string,
+	plain: { x?: number; y?: number; z?: number },
+	defaults: { x: number; y: number; z: number },
+	unit: string
+): PropValue => ( {
+	$$type: type,
+	value: {
+		x: toSizePropValue( plain.x ?? defaults.x, unit ),
+		y: toSizePropValue( plain.y ?? defaults.y, unit ),
+		z: toSizePropValue( plain.z ?? defaults.z, unit ),
+	},
+} );
+
+const toSkewPropValue = ( plain: { x?: number; y?: number } ): PropValue => ( {
+	$$type: TRANSFORM_SKEW_TYPE,
+	value: {
+		x: toSizePropValue( plain.x ?? 0, UNIT_DEG ),
+		y: toSizePropValue( plain.y ?? 0, UNIT_DEG ),
+	},
+} );
+
+const toKeyframeStopSettingsPropValue = ( plain: PlainKeyframeValue ): PropValue => {
+	const value: Record< string, PropValue > = {};
+	if ( plain.opacity !== undefined ) {
+		const percent = plain.opacity <= 1 ? Math.round( plain.opacity * 100 ) : plain.opacity;
+		value.opacity = toSizePropValue( percent );
+	}
+	if ( plain.scale !== undefined ) {
+		value.scale = toDimensionalNumberPropValue( TRANSFORM_SCALE_TYPE, plain.scale, { x: 1, y: 1, z: 1 } );
+	}
+	if ( plain.rotate !== undefined ) {
+		value.rotate = toDimensionalSizePropValue(
+			TRANSFORM_ROTATE_TYPE,
+			plain.rotate,
+			{ x: 0, y: 0, z: 0 },
+			UNIT_DEG
+		);
+	}
+	if ( plain.move !== undefined ) {
+		value.move = toDimensionalSizePropValue( TRANSFORM_MOVE_TYPE, plain.move, { x: 0, y: 0, z: 0 }, UNIT_PX );
+	}
+	if ( plain.skew !== undefined ) {
+		value.skew = toSkewPropValue( plain.skew );
+	}
+	return { $$type: KEYFRAME_STOP_SETTINGS_TYPE, value };
+};
+
+const isPlainKeyframe = ( v: unknown ): v is PlainKeyframe =>
+	typeof v === 'object' && v !== null && 'stop' in v && 'value' in v && ! ( '$$type' in v );
+
+const toKeyframeStopPropValue = ( item: PlainKeyframe | PropValue ): PropValue => {
+	if ( ! isPlainKeyframe( item ) ) {
+		return item as PropValue;
+	}
+	return {
+		$$type: KEYFRAME_STOP_TYPE,
+		value: {
+			stop: toSizePropValue( item.stop ),
+			settings: toKeyframeStopSettingsPropValue( item.value ),
+		},
+	};
+};
+
+const toKeyframesPropValue = ( keyframes: ( PlainKeyframe | PropValue )[] ): PropValue => ( {
+	$$type: KEYFRAMES_TYPE,
+	value: keyframes.map( toKeyframeStopPropValue ),
+} );
+
+const plainCustomEffectToPropValue = ( plain: PlainCustomEffect ): PropValue => ( {
+	$$type: CUSTOM_EFFECT_TYPE,
+	value: {
+		keyframes: toKeyframesPropValue( plain.keyframes as ( PlainKeyframe | PropValue )[] ),
+	},
+} );
+
+export const toCustomEffectPropValue = (
+	customEffects: PropValue | PlainCustomEffect | undefined
+): PropValue | undefined => {
+	if ( customEffects === undefined ) {
+		return undefined;
+	}
+	if ( isPlainCustomEffect( customEffects ) ) {
+		return plainCustomEffectToPropValue( customEffects );
+	}
+	return customEffects as PropValue;
+};

package/src/utils/prop-value-utils.ts

@@ -17,6 +17,7 @@ import {
 	type TimingConfigPropValue,
 } from '../types';
 import { formatSizeValue, parseSizeValue } from '../utils/size-transform-utils';
+import { type PlainCustomEffect, toCustomEffectPropValue } from './custom-effect-to-prop-value';
 import { getInteractionsConfig } from './get-interactions-config';
 import { generateTempInteractionId } from './temp-id-utils';
 
@@ -46,7 +47,7 @@ export const createBoolean = ( value: boolean ): BooleanPropValue => ( {
 export const createConfig = ( {
 	replay,
 	easing = 'easeIn',
-	relativeTo = '',
+	relativeTo = 'viewport',
 	repeat = '',
 	times = 1,
 	start = 85,
@@ -128,26 +129,29 @@ export const createAnimationPreset = ( {
 	times?: number;
 	start?: SizeStringValue;
 	end?: SizeStringValue;
-	customEffects?: PropValue;
-} ): AnimationPresetPropValue => ( {
-	$$type: 'animation-preset-props',
-	value: {
-		effect: createString( effect ),
-		custom_effect: customEffects,
-		type: createString( type ),
-		direction: createString( direction ?? '' ),
-		timing_config: createTimingConfig( duration, delay ),
-		config: createConfig( {
-			replay,
-			easing,
-			relativeTo,
-			repeat,
-			times,
-			start,
-			end,
-		} ),
-	},
-} );
+	customEffects?: PropValue | PlainCustomEffect;
+} ): AnimationPresetPropValue => {
+	const customEffectProp = toCustomEffectPropValue( customEffects );
+	return {
+		$$type: 'animation-preset-props',
+		value: {
+			effect: createString( effect ),
+			...( customEffectProp !== undefined && { custom_effect: customEffectProp } ),
+			type: createString( type ),
+			direction: createString( direction ?? '' ),
+			timing_config: createTimingConfig( duration, delay ),
+			config: createConfig( {
+				replay,
+				easing,
+				relativeTo,
+				repeat,
+				times,
+				start,
+				end,
+			} ),
+		},
+	};
+};
 
 export const createInteractionItem = ( {
 	trigger,
@@ -182,7 +186,7 @@ export const createInteractionItem = ( {
 	start?: number;
 	end?: number;
 	excludedBreakpoints?: string[];
-	customEffects?: PropValue;
+	customEffects?: PropValue | PlainCustomEffect;
 } ): InteractionItemPropValue => ( {
 	$$type: 'interaction-item',
 	value: {