@routevn/creator-model 1.11.0 → 1.12.1

package/README.md

@@ -294,6 +294,10 @@ Current animation update tween properties support either:
 - `keyframes`
 - `auto: { duration, easing }`
 
+Transition animation `mask` accepts one mask object or a non-empty ordered
+array. Each mask may define a non-negative safe-integer `delay` in
+milliseconds.
+
 ## Current Scope
 
 Currently implemented command types:

package/package.json

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

package/src/model.js

@@ -403,7 +403,7 @@ const SAVE_LOAD_DATE_FORMATS = new Set([
   "DD MMM YYYY",
   "YYYY年MM月DD日",
 ]);
-export const SCHEMA_VERSION = 11;
+export const SCHEMA_VERSION = 12;
 const LAYOUT_CONTAINER_ELEMENT_TYPES = [
   "folder",
   "container",
@@ -1680,7 +1680,7 @@ const validateAnimationKeyframes = ({ keyframes, path, errorFactory }) => {
     {
       const result = validateAllowedKeys({
         value: keyframe,
-        allowedKeys: ["value", "duration", "easing", "relative"],
+        allowedKeys: ["value", "duration", "delay", "easing", "relative"],
         path: keyframePath,
         errorFactory,
       });
@@ -1717,6 +1717,16 @@ const validateAnimationKeyframes = ({ keyframes, path, errorFactory }) => {
       );
     }
 
+    if (
+      keyframe.delay !== undefined &&
+      (!isFiniteNumber(keyframe.delay) || keyframe.delay < 0)
+    ) {
+      return invalidFromErrorFactory(
+        errorFactory,
+        `${keyframePath}.delay must be a finite number >= 0 when provided`,
+      );
+    }
+
     if (
       keyframe.easing !== undefined &&
       !ANIMATION_EASING_KEYS.includes(keyframe.easing)
@@ -1920,6 +1930,7 @@ const validateMaskDefinition = ({ mask, path, errorFactory }) => {
         "softness",
         "invert",
         "sample",
+        "delay",
         "progress",
         "progressDuration",
         "progressEasing",
@@ -2098,6 +2109,16 @@ const validateMaskDefinition = ({ mask, path, errorFactory }) => {
     );
   }
 
+  if (
+    mask.delay !== undefined &&
+    (!Number.isSafeInteger(mask.delay) || mask.delay < 0)
+  ) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      `${path}.delay must be a non-negative safe integer when provided`,
+    );
+  }
+
   if (mask.progress !== undefined) {
     {
       const result = validateTweenProperty({
@@ -2161,6 +2182,30 @@ const validateMaskDefinition = ({ mask, path, errorFactory }) => {
   }
 };
 
+const validateAnimationMasks = ({ mask, path, errorFactory }) => {
+  if (!Array.isArray(mask)) {
+    return validateMaskDefinition({ mask, path, errorFactory });
+  }
+
+  if (mask.length === 0) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      `${path} must be a non-empty array when provided`,
+    );
+  }
+
+  for (const [index, maskDefinition] of mask.entries()) {
+    const result = validateMaskDefinition({
+      mask: maskDefinition,
+      path: `${path}[${index}]`,
+      errorFactory,
+    });
+    if (result?.valid === false) {
+      return result;
+    }
+  }
+};
+
 const validateAnimationDefinition = ({ animation, path, errorFactory }) => {
   {
     const result = validateAllowedKeys({
@@ -2266,7 +2311,7 @@ const validateAnimationDefinition = ({ animation, path, errorFactory }) => {
 
   if (animation.mask !== undefined) {
     {
-      const result = validateMaskDefinition({
+      const result = validateAnimationMasks({
         mask: animation.mask,
         path: `${path}.mask`,
         errorFactory,
@@ -3380,10 +3425,7 @@ const validateComputedExpression = ({
       );
     }
 
-    if (
-      typeof expression === "string" ||
-      typeof expression === "boolean"
-    ) {
+    if (typeof expression === "string" || typeof expression === "boolean") {
       return validComputedResult(typeof expression);
     }
 
@@ -3538,10 +3580,7 @@ const validateComputedCondition = ({
       );
     }
 
-    if (
-      typeof condition === "string" ||
-      typeof condition === "boolean"
-    ) {
+    if (typeof condition === "string" || typeof condition === "boolean") {
       return validComputedResult(typeof condition);
     }
 
@@ -3845,18 +3884,11 @@ const validateVariableComputedConfig = ({
   });
 };
 
-const validateComputedVariableGraph = ({
-  items,
-  path,
-  errorFactory,
-}) => {
+const validateComputedVariableGraph = ({ items, path, errorFactory }) => {
   const dependencyGraph = new Map();
 
   for (const [variableId, variable] of Object.entries(items)) {
-    if (
-      variable?.type !== "variable" ||
-      !Object.hasOwn(variable, "computed")
-    ) {
+    if (variable?.type !== "variable" || !Object.hasOwn(variable, "computed")) {
       continue;
     }
 
@@ -3908,9 +3940,7 @@ const validateComputedVariableGraph = ({
       const cycleStartIndex = activeIndexes.get(dependencyId);
       if (cycleStartIndex !== undefined) {
         const cycle = [
-          ...frames
-            .slice(cycleStartIndex)
-            .map(({ variableId }) => variableId),
+          ...frames.slice(cycleStartIndex).map(({ variableId }) => variableId),
           dependencyId,
         ].join(" -> ");
         return invalidFromErrorFactory(
@@ -8124,43 +8154,41 @@ const validateAnimationMaskImageReferences = ({
   details = {},
   errorFactory = createPreconditionValidationError,
 }) => {
-  if (
-    !isPlainObject(animation) ||
-    animation.type !== "transition" ||
-    !isPlainObject(animation.mask)
-  ) {
+  if (!isPlainObject(animation) || animation.type !== "transition") {
     return VALID_RESULT;
   }
 
-  const { mask } = animation;
+  const maskDefinitions = Array.isArray(animation.mask)
+    ? animation.mask.map((mask, index) => ({
+        mask,
+        path: `${path}.mask[${index}]`,
+        fieldPrefix: `mask[${index}].`,
+      }))
+    : isPlainObject(animation.mask)
+      ? [
+          {
+            mask: animation.mask,
+            path: `${path}.mask`,
+            fieldPrefix: "",
+          },
+        ]
+      : [];
 
-  if (mask.imageId !== undefined) {
-    const result = validateImageReference({
-      state,
-      imageId: mask.imageId,
-      path: `${path}.mask.imageId`,
-      details: {
-        ...details,
-        field: "imageId",
-        imageId: mask.imageId,
-      },
-      errorFactory,
-    });
-    if (!result.valid) {
-      return result;
+  for (const maskDefinition of maskDefinitions) {
+    const { mask, path: maskPath, fieldPrefix } = maskDefinition;
+    if (!isPlainObject(mask)) {
+      continue;
     }
-  }
 
-  if (Array.isArray(mask.imageIds)) {
-    for (const [index, imageId] of mask.imageIds.entries()) {
+    if (mask.imageId !== undefined) {
       const result = validateImageReference({
         state,
-        imageId,
-        path: `${path}.mask.imageIds[${index}]`,
+        imageId: mask.imageId,
+        path: `${maskPath}.imageId`,
         details: {
           ...details,
-          field: `imageIds[${index}]`,
-          imageId,
+          field: `${fieldPrefix}imageId`,
+          imageId: mask.imageId,
         },
         errorFactory,
       });
@@ -8168,27 +8196,46 @@ const validateAnimationMaskImageReferences = ({
         return result;
       }
     }
-  }
 
-  if (Array.isArray(mask.items)) {
-    for (const [index, item] of mask.items.entries()) {
-      if (item?.imageId === undefined) {
-        continue;
+    if (Array.isArray(mask.imageIds)) {
+      for (const [index, imageId] of mask.imageIds.entries()) {
+        const result = validateImageReference({
+          state,
+          imageId,
+          path: `${maskPath}.imageIds[${index}]`,
+          details: {
+            ...details,
+            field: `${fieldPrefix}imageIds[${index}]`,
+            imageId,
+          },
+          errorFactory,
+        });
+        if (!result.valid) {
+          return result;
+        }
       }
+    }
 
-      const result = validateImageReference({
-        state,
-        imageId: item.imageId,
-        path: `${path}.mask.items[${index}].imageId`,
-        details: {
-          ...details,
-          field: `items[${index}].imageId`,
+    if (Array.isArray(mask.items)) {
+      for (const [index, item] of mask.items.entries()) {
+        if (item?.imageId === undefined) {
+          continue;
+        }
+
+        const result = validateImageReference({
+          state,
           imageId: item.imageId,
-        },
-        errorFactory,
-      });
-      if (!result.valid) {
-        return result;
+          path: `${maskPath}.items[${index}].imageId`,
+          details: {
+            ...details,
+            field: `${fieldPrefix}items[${index}].imageId`,
+            imageId: item.imageId,
+          },
+          errorFactory,
+        });
+        if (!result.valid) {
+          return result;
+        }
       }
     }
   }