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

package/dist/index.d.mts

@@ -137,6 +137,35 @@ declare const EFFECT_OPTIONS: {
 };
 declare const BASE_EFFECTS: string[];
 
+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;
+    };
+};
+type PlainKeyframe = {
+    stop: number;
+    value: PlainKeyframeValue;
+};
+type PlainCustomEffect = {
+    keyframes: PlainKeyframe[];
+};
+
 declare const createString: (value: string) => StringPropValue;
 declare const createNumber: (value: number) => NumberPropValue;
 declare const createTimingConfig: (duration: SizeStringValue, delay: SizeStringValue) => TimingConfigPropValue;
@@ -167,7 +196,7 @@ declare const createAnimationPreset: ({ effect, type, direction, duration, delay
     times?: number;
     start?: SizeStringValue;
     end?: SizeStringValue;
-    customEffects?: PropValue;
+    customEffects?: PropValue | PlainCustomEffect;
 }) => AnimationPresetPropValue;
 declare const createInteractionItem: ({ trigger, effect, type, direction, duration, delay, interactionId, replay, easing, relativeTo, repeat, times, start, end, excludedBreakpoints, customEffects, }: {
     trigger?: string;
@@ -185,7 +214,7 @@ declare const createInteractionItem: ({ trigger, effect, type, direction, durati
     start?: number;
     end?: number;
     excludedBreakpoints?: string[];
-    customEffects?: PropValue;
+    customEffects?: PropValue | PlainCustomEffect;
 }) => InteractionItemPropValue;
 declare const createDefaultInteractionItem: () => InteractionItemPropValue;
 declare const createDefaultInteractions: () => ElementInteractions;

package/dist/index.d.ts

@@ -137,6 +137,35 @@ declare const EFFECT_OPTIONS: {
 };
 declare const BASE_EFFECTS: string[];
 
+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;
+    };
+};
+type PlainKeyframe = {
+    stop: number;
+    value: PlainKeyframeValue;
+};
+type PlainCustomEffect = {
+    keyframes: PlainKeyframe[];
+};
+
 declare const createString: (value: string) => StringPropValue;
 declare const createNumber: (value: number) => NumberPropValue;
 declare const createTimingConfig: (duration: SizeStringValue, delay: SizeStringValue) => TimingConfigPropValue;
@@ -167,7 +196,7 @@ declare const createAnimationPreset: ({ effect, type, direction, duration, delay
     times?: number;
     start?: SizeStringValue;
     end?: SizeStringValue;
-    customEffects?: PropValue;
+    customEffects?: PropValue | PlainCustomEffect;
 }) => AnimationPresetPropValue;
 declare const createInteractionItem: ({ trigger, effect, type, direction, duration, delay, interactionId, replay, easing, relativeTo, repeat, times, start, end, excludedBreakpoints, customEffects, }: {
     trigger?: string;
@@ -185,7 +214,7 @@ declare const createInteractionItem: ({ trigger, effect, type, direction, durati
     start?: number;
     end?: number;
     excludedBreakpoints?: string[];
-    customEffects?: PropValue;
+    customEffects?: PropValue | PlainCustomEffect;
 }) => InteractionItemPropValue;
 declare const createDefaultInteractionItem: () => InteractionItemPropValue;
 declare const createDefaultInteractions: () => ElementInteractions;

package/dist/index.js

@@ -186,6 +186,110 @@ var createSizeValue = (size, unit) => {
   return { size, unit };
 };
 
+// src/utils/custom-effect-to-prop-value.ts
+var CUSTOM_EFFECT_TYPE = "custom-effect";
+var KEYFRAMES_TYPE = "keyframes";
+var KEYFRAME_STOP_TYPE = "keyframe-stop";
+var KEYFRAME_STOP_SETTINGS_TYPE = "keyframe-stop-settings";
+var SIZE_TYPE = "size";
+var NUMBER_TYPE = "number";
+var TRANSFORM_SCALE_TYPE = "transform-scale";
+var TRANSFORM_ROTATE_TYPE = "transform-rotate";
+var TRANSFORM_MOVE_TYPE = "transform-move";
+var TRANSFORM_SKEW_TYPE = "transform-skew";
+var UNIT_PERCENT = "%";
+var UNIT_DEG = "deg";
+var UNIT_PX = "px";
+var isPlainCustomEffect = (v) => typeof v === "object" && v !== null && "keyframes" in v && Array.isArray(v.keyframes) && !("$$type" in v);
+var toSizePropValue = (size, unit = UNIT_PERCENT) => ({
+  $$type: SIZE_TYPE,
+  value: { size, unit }
+});
+var toNumberPropValue = (n) => ({
+  $$type: NUMBER_TYPE,
+  value: n
+});
+var toDimensionalNumberPropValue = (type, plain, defaults) => ({
+  $$type: type,
+  value: {
+    x: toNumberPropValue(plain.x ?? defaults.x),
+    y: toNumberPropValue(plain.y ?? defaults.y),
+    z: toNumberPropValue(plain.z ?? defaults.z)
+  }
+});
+var toDimensionalSizePropValue = (type, plain, defaults, unit) => ({
+  $$type: type,
+  value: {
+    x: toSizePropValue(plain.x ?? defaults.x, unit),
+    y: toSizePropValue(plain.y ?? defaults.y, unit),
+    z: toSizePropValue(plain.z ?? defaults.z, unit)
+  }
+});
+var toSkewPropValue = (plain) => ({
+  $$type: TRANSFORM_SKEW_TYPE,
+  value: {
+    x: toSizePropValue(plain.x ?? 0, UNIT_DEG),
+    y: toSizePropValue(plain.y ?? 0, UNIT_DEG)
+  }
+});
+var toKeyframeStopSettingsPropValue = (plain) => {
+  const value = {};
+  if (plain.opacity !== void 0) {
+    const percent = plain.opacity <= 1 ? Math.round(plain.opacity * 100) : plain.opacity;
+    value.opacity = toSizePropValue(percent);
+  }
+  if (plain.scale !== void 0) {
+    value.scale = toDimensionalNumberPropValue(TRANSFORM_SCALE_TYPE, plain.scale, { x: 1, y: 1, z: 1 });
+  }
+  if (plain.rotate !== void 0) {
+    value.rotate = toDimensionalSizePropValue(
+      TRANSFORM_ROTATE_TYPE,
+      plain.rotate,
+      { x: 0, y: 0, z: 0 },
+      UNIT_DEG
+    );
+  }
+  if (plain.move !== void 0) {
+    value.move = toDimensionalSizePropValue(TRANSFORM_MOVE_TYPE, plain.move, { x: 0, y: 0, z: 0 }, UNIT_PX);
+  }
+  if (plain.skew !== void 0) {
+    value.skew = toSkewPropValue(plain.skew);
+  }
+  return { $$type: KEYFRAME_STOP_SETTINGS_TYPE, value };
+};
+var isPlainKeyframe = (v) => typeof v === "object" && v !== null && "stop" in v && "value" in v && !("$$type" in v);
+var toKeyframeStopPropValue = (item) => {
+  if (!isPlainKeyframe(item)) {
+    return item;
+  }
+  return {
+    $$type: KEYFRAME_STOP_TYPE,
+    value: {
+      stop: toSizePropValue(item.stop),
+      settings: toKeyframeStopSettingsPropValue(item.value)
+    }
+  };
+};
+var toKeyframesPropValue = (keyframes) => ({
+  $$type: KEYFRAMES_TYPE,
+  value: keyframes.map(toKeyframeStopPropValue)
+});
+var plainCustomEffectToPropValue = (plain) => ({
+  $$type: CUSTOM_EFFECT_TYPE,
+  value: {
+    keyframes: toKeyframesPropValue(plain.keyframes)
+  }
+});
+var toCustomEffectPropValue = (customEffects) => {
+  if (customEffects === void 0) {
+    return void 0;
+  }
+  if (isPlainCustomEffect(customEffects)) {
+    return plainCustomEffectToPropValue(customEffects);
+  }
+  return customEffects;
+};
+
 // src/utils/get-interactions-config.ts
 function getInteractionsConfig() {
   return window.ElementorInteractionsConfig ?? {};
@@ -224,7 +328,7 @@ var createBoolean = (value) => ({
 var createConfig = ({
   replay,
   easing = "easeIn",
-  relativeTo = "",
+  relativeTo = "viewport",
   repeat = "",
   times = 1,
   start = 85,
@@ -277,25 +381,28 @@ var createAnimationPreset = ({
   start,
   end,
   customEffects
-}) => ({
-  $$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
-    })
-  }
-});
+}) => {
+  const customEffectProp = toCustomEffectPropValue(customEffects);
+  return {
+    $$type: "animation-preset-props",
+    value: {
+      effect: createString(effect),
+      ...customEffectProp !== void 0 && { custom_effect: customEffectProp },
+      type: createString(type),
+      direction: createString(direction ?? ""),
+      timing_config: createTimingConfig(duration, delay),
+      config: createConfig({
+        replay,
+        easing,
+        relativeTo,
+        repeat,
+        times,
+        start,
+        end
+      })
+    }
+  };
+};
 var createInteractionItem = ({
   trigger,
   effect,
@@ -1705,7 +1812,7 @@ var baseSchema = {
 var proSchema = {
   trigger: import_schema.z.enum(["load", "scrollIn", "scrollOut", "scrollOn", "hover", "click"]).optional().describe("Event that triggers the animation"),
   effect: import_schema.z.enum(["fade", "slide", "scale", "custom"]).optional().describe("Animation effect type"),
-  customEffect: import_schema.z.object({
+  customEffects: import_schema.z.object({
     keyframes: import_schema.z.array(
       import_schema.z.object({
         stop: import_schema.z.number().describe("The stop of the keyframe in percent, can be either 0 or 100"),