@routevn/creator-model 1.6.0 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@routevn/creator-model",
-  "version": "1.6.0",
+  "version": "1.6.3",
   "private": false,
   "type": "module",
   "license": "MIT",

package/src/model.js

@@ -283,11 +283,18 @@ const UPDATE_TWEEN_PROPERTY_KEYS = [
   "alpha",
   "x",
   "y",
+  "translateX",
+  "translateY",
   "scaleX",
   "scaleY",
   "rotation",
+  "blurX",
+  "blurY",
+  "uProgress",
 ];
 const TRANSITION_TWEEN_PROPERTY_KEYS = [
+  "x",
+  "y",
   "translateX",
   "translateY",
   "alpha",
@@ -343,6 +350,7 @@ const LAYOUT_TYPE_KEYS = [
 ];
 const LAYOUT_ELEMENT_TEXT_STYLE_ALIGN_KEYS = ["left", "center", "right"];
 const LAYOUT_TEXT_REVEAL_EFFECT_KEYS = ["typewriter", "softWipe", "none"];
+const LAYOUT_ELEMENT_BLUR_KERNEL_SIZE_OPTIONS = [5, 7, 9, 11, 13, 15];
 const CONTROL_KEYBOARD_KEYS = [
   "enter",
   "space",
@@ -3348,6 +3356,56 @@ const validateLayoutElementInteraction = ({
   }
 };
 
+const validateLayoutElementBlur = ({ blur, path, errorFactory }) => {
+  if (!isPlainObject(blur)) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      `${path} must be an object when provided`,
+    );
+  }
+
+  {
+    const result = validateAllowedKeys({
+      value: blur,
+      allowedKeys: ["x", "y", "quality", "kernelSize", "repeatEdgePixels"],
+      path,
+      errorFactory,
+    });
+    if (result?.valid === false) {
+      return result;
+    }
+  }
+
+  for (const key of ["x", "y", "quality"]) {
+    if (blur[key] !== undefined && !isFiniteNumber(blur[key])) {
+      return invalidFromErrorFactory(
+        errorFactory,
+        `${path}.${key} must be a finite number when provided`,
+      );
+    }
+  }
+
+  if (
+    blur.kernelSize !== undefined &&
+    !LAYOUT_ELEMENT_BLUR_KERNEL_SIZE_OPTIONS.includes(blur.kernelSize)
+  ) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      `${path}.kernelSize must be one of ${LAYOUT_ELEMENT_BLUR_KERNEL_SIZE_OPTIONS.join(", ")} when provided`,
+    );
+  }
+
+  if (
+    blur.repeatEdgePixels !== undefined &&
+    typeof blur.repeatEdgePixels !== "boolean"
+  ) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      `${path}.repeatEdgePixels must be a boolean when provided`,
+    );
+  }
+};
+
 const validateLayoutElementData = ({
   data,
   path,
@@ -3372,6 +3430,7 @@ const validateLayoutElementData = ({
     "scaleY",
     "rotation",
     "opacity",
+    "blur",
     "fill",
     "border",
     "text",
@@ -3506,6 +3565,26 @@ const validateLayoutElementData = ({
     );
   }
 
+  if (data.blur !== undefined) {
+    {
+      const result = validateLayoutElementBlur({
+        blur: data.blur,
+        path: `${path}.blur`,
+        errorFactory,
+      });
+      if (result?.valid === false) {
+        return result;
+      }
+    }
+
+    if (data.type !== undefined && data.type !== "sprite") {
+      return invalidFromErrorFactory(
+        errorFactory,
+        `${path}.blur can only be provided for sprite elements`,
+      );
+    }
+  }
+
   for (const key of [
     "text",
     "resourceId",
@@ -3947,6 +4026,7 @@ const validateLayoutElementItems = ({ items, path, errorFactory }) => {
           "scaleY",
           "rotation",
           "opacity",
+          "blur",
           "fill",
           "border",
           "text",
@@ -11090,6 +11170,18 @@ const validateVisualElementReferenceTargets = ({
   state,
   errorFactory,
 }) => {
+  if (data.blur !== undefined && data.type !== "sprite") {
+    return invalidFromErrorFactory(
+      errorFactory,
+      `${ownerLabel} element blur can only be provided for sprite elements`,
+      {
+        [ownerIdField]: ownerId,
+        elementId,
+        field: "blur",
+      },
+    );
+  }
+
   if (
     data.type === "spritesheet-animation" ||
     data.resourceId !== undefined ||