structure for fills in text and improvements

penpot · Apr 17, 2024 · ed921d4 · ed921d4
1 parent 8cd5618
commit ed921d4
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 34 deletions.
diff --git a/plugin-src/transformers/partials/index.ts b/plugin-src/transformers/partials/index.ts
@@ -4,4 +4,5 @@ export * from './transformDimensionAndPosition';
 export * from './transformFills';
 export * from './transformSceneNode';
 export * from './transformStrokes';
+export * from './transformTextStyle';
 export * from './transformVectorPaths';
diff --git a/plugin-src/transformers/partials/transformTextStyle.ts b/plugin-src/transformers/partials/transformTextStyle.ts
@@ -0,0 +1,16 @@
+import { translateTextDecoration, translateTextTransform } from '@plugin/translators';
+
+import { Paragraph, TextNode } from '@ui/lib/types/text/textContent';
+
+export const transformTextStyle = (
+  node: StyledTextSegment
+): Partial<Paragraph> | Partial<TextNode> => {
+  return {
+    fontFamily: node.fontName.family,
+    fontSize: node.fontSize.toString(),
+    fontStyle: node.fontName.style,
+    fontWeight: node.fontWeight.toString(),
+    textDecoration: translateTextDecoration(node),
+    textTransform: translateTextTransform(node)
+  };
+};
diff --git a/plugin-src/transformers/transformTextNode.ts b/plugin-src/transformers/transformTextNode.ts
@@ -1,15 +1,12 @@
 import {
   transformBlend,
   transformDimensionAndPosition,
-  transformSceneNode
+  transformFills,
+  transformSceneNode,
+  transformTextStyle
 } from '@plugin/transformers/partials';
-import {
-  translateFills,
-  translateTextDecoration,
-  translateTextTransform
-} from '@plugin/translators';
+import { translateStyledTextSegments } from '@plugin/translators';
 
-import { TextNode as PenpotTextNode } from '@ui/lib/types/text/textContent';
 import { TextShape } from '@ui/lib/types/text/textShape';
 
 export const transformTextNode = (node: TextNode, baseX: number, baseY: number): TextShape => {
@@ -22,23 +19,7 @@ export const transformTextNode = (node: TextNode, baseX: number, baseY: number):
     'textCase',
     'textDecoration',
     'fills'
-  ]);
-
-  const children: PenpotTextNode[] = styledTextSegments.map(segment => {
-    figma.ui.postMessage({ type: 'FONT_NAME', data: segment.fontName.family });
-
-    return {
-      text: segment.characters,
-      fills: translateFills(segment.fills, node.width, node.height),
-      fontFamily: segment.fontName.family,
-      fontSize: segment.fontSize.toString(),
-      fontStyle: segment.fontName.style,
-      fontWeight: segment.fontWeight.toString(),
-      textDecoration: translateTextDecoration(segment),
-      textTransform: translateTextTransform(segment)
-    };
-  });
-
+  ]) as StyledTextSegment[];
   return {
     type: 'text',
     name: node.name,
@@ -50,14 +31,9 @@ export const transformTextNode = (node: TextNode, baseX: number, baseY: number):
           children: [
             {
               type: 'paragraph',
-              fills: translateFills(node.fills, node.width, node.height),
-              fontFamily: children[0].fontFamily,
-              fontSize: children[0].fontSize,
-              fontStyle: children[0].fontStyle,
-              fontWeight: children[0].fontWeight,
-              textDecoration: children[0].textDecoration,
-              textTransform: children[0].textTransform,
-              children: children
+              children: translateStyledTextSegments(styledTextSegments, node.width, node.height),
+              ...(styledTextSegments.length ? transformTextStyle(styledTextSegments[0]) : {}),
+              ...transformFills(node)
             }
           ]
         }

diff --git a/plugin-src/translators/index.ts b/plugin-src/translators/index.ts
@@ -1,6 +1,7 @@
 export * from './translateBlendMode';
 export * from './translateFills';
 export * from './translateStrokes';
+export * from './translateStyledTextSegments';
 export * from './translateTextDecoration';
 export * from './translateTextTransform';
 export * from './translateVectorPaths';
diff --git a/plugin-src/translators/translateFills.ts b/plugin-src/translators/translateFills.ts
@@ -20,12 +20,13 @@ export const translateFills = (
   height: number
 ): Fill[] => {
   const figmaFills = fills === figma.mixed ? [] : fills;
-  let penpotFills: Fill[] = [];
+  const penpotFills: Fill[] = [];
 
   for (const fill of figmaFills) {
     const penpotFill = translateFill(fill, width, height);
     if (penpotFill) {
-      penpotFills = [penpotFill, ...penpotFills];
+      // colors are applied in reverse order in Figma, that's why we unshift
+      penpotFills.unshift(penpotFill);
     }
   }
 

diff --git a/plugin-src/translators/translateStyledTextSegments.ts b/plugin-src/translators/translateStyledTextSegments.ts
@@ -0,0 +1,20 @@
+import { transformTextStyle } from '@plugin/transformers/partials';
+import { translateFills } from '@plugin/translators/translateFills';
+
+import { TextNode } from '@ui/lib/types/text/textContent';
+
+export const translateStyledTextSegments = (
+  segments: StyledTextSegment[],
+  width: number,
+  height: number
+): TextNode[] => {
+  return segments.map(segment => {
+    figma.ui.postMessage({ type: 'FONT_NAME', data: segment.fontName.family });
+
+    return {
+      fills: translateFills(segment.fills, width, height),
+      text: segment.characters,
+      ...transformTextStyle(segment)
+    };
+  });
+};