Ensure translation of symbols is consistent when using components

ui-src/parser/creators/symbols/symbolBlendMode.ts

@@ -21,6 +21,8 @@ import {
 export const symbolBlendMode = (blendMode?: BlendMode): BlendMode | undefined => {
   if (!blendMode) return;
 
+  if (typeof blendMode !== 'string') return blendMode;
+
   switch (blendMode) {
     case 'normal':
       return BLEND_MODE_NORMAL;
@@ -54,7 +56,5 @@ export const symbolBlendMode = (blendMode?: BlendMode): BlendMode | undefined =>
       return BLEND_MODE_COLOR;
     case 'luminosity':
       return BLEND_MODE_LUMINOSITY;
-    default:
-      return BLEND_MODE_NORMAL;
   }
 };

ui-src/parser/creators/symbols/symbolBoolType.ts

@@ -7,6 +7,8 @@ import {
 } from '@ui/lib/types/shapes/boolShape';
 
 export const symbolBoolType = (booleanOperation: BoolOperations): BoolOperations => {
+  if (typeof booleanOperation !== 'string') return booleanOperation;
+
   switch (booleanOperation) {
     case 'union':
       return BOOL_UNION;
@@ -17,6 +19,4 @@ export const symbolBoolType = (booleanOperation: BoolOperations): BoolOperations
     case 'intersection':
       return BOOL_INTERSECTION;
   }
-
-  throw new Error(`Unsupported boolean operation: ${String(booleanOperation)}`);
 };

ui-src/parser/creators/symbols/symbolFills.ts

@@ -20,7 +20,11 @@ export const symbolFills = (fills?: Fill[]): Fill[] | undefined => {
   });
 };
 
-const symbolFillGradient = ({ type, ...rest }: Gradient): Gradient | undefined => {
+const symbolFillGradient = (fillGradient: Gradient): Gradient => {
+  if (typeof fillGradient.type !== 'string') return fillGradient;
+
+  const { type, ...rest } = fillGradient;
+
   switch (type) {
     case 'linear':
       return {
@@ -33,11 +37,13 @@ const symbolFillGradient = ({ type, ...rest }: Gradient): Gradient | undefined =
         ...rest
       };
   }
-
-  console.error(`Unsupported gradient type: ${String(type)}`);
 };
 
-const symbolFillImage = ({ imageHash, ...rest }: ImageColor): ImageColor | undefined => {
+const symbolFillImage = (fillImage: ImageColor): ImageColor | undefined => {
+  if (fillImage.dataUri) return fillImage;
+
+  const { imageHash, ...rest } = fillImage;
+
   if (!imageHash) return;
 
   const imageColor = imagesLibrary.get(imageHash);

ui-src/parser/creators/symbols/symbolPathContent.ts

@@ -9,20 +9,18 @@ import {
 } from '@ui/lib/types/shapes/pathShape';
 
 export const symbolPathContent = (content: PathContent): PathContent =>
-  content
-    .map(({ command: stringCommand, ...rest }) => {
-      const command = symbolPathCommand(stringCommand);
+  content.map(({ command: stringCommand, ...rest }) => {
+    const command = symbolPathCommand(stringCommand);
 
-      if (!command) return;
+    return {
+      command,
+      ...rest
+    } as Segment;
+  });
 
-      return {
-        command,
-        ...rest
-      } as Segment;
-    })
-    .filter((command): command is Segment => !!command);
+const symbolPathCommand = (command: Command): Command => {
+  if (typeof command !== 'string') return command;
 
-const symbolPathCommand = (command: Command): Command | undefined => {
   switch (command) {
     case 'line-to':
       return VECTOR_LINE_TO;
@@ -33,6 +31,4 @@ const symbolPathCommand = (command: Command): Command | undefined => {
     case 'curve-to':
       return VECTOR_CURVE_TO;
   }
-
-  console.error(`Unsupported svg command type: ${String(command)}`);
 };