translated line height & letter spacing; Created new type for text po…

…sitionData

plugin-src/transformers/partials/transformTextStyle.ts

@@ -3,6 +3,8 @@ import slugify from 'slugify';
 import {
   translateFontStyle,
   translateHorizontalAlign,
+  translateLetterSpacing,
+  translateLineHeight,
   translateTextDecoration,
   translateTextTransform
 } from '@plugin/translators';
@@ -26,7 +28,6 @@ export const transformTextStyle = (
     | 'fills'
   >
 ): Partial<TextStyle> => {
-  // @TODO: translate lineHeight and letterspacing
   return {
     fontFamily: segment.fontName.family,
     fontId: `gfont-${slugify(segment.fontName.family.toLowerCase())}`,
@@ -36,6 +37,8 @@ export const transformTextStyle = (
     fontVariantId: translateFontStyle(segment.fontName.style),
     textAlign: translateHorizontalAlign(node.textAlignHorizontal),
     textDecoration: translateTextDecoration(segment),
-    textTransform: translateTextTransform(segment)
+    textTransform: translateTextTransform(segment),
+    letterSpacing: translateLetterSpacing(segment),
+    lineHeight: translateLineHeight(segment)
   };
 };

plugin-src/transformers/transformTextNode.ts

@@ -10,6 +10,7 @@ import {
 import {
   translateGrowType,
   translateStyledTextSegments,
+  translateTextPositionData,
   translateVerticalAlign
 } from '@plugin/translators';
 
@@ -50,7 +51,7 @@ export const transformTextNode = (node: TextNode, baseX: number, baseY: number):
       ]
     },
     growType: translateGrowType(node.textAutoResize),
-    positionData: segments,
+    positionData: translateTextPositionData(segments),
     ...transformDimensionAndPosition(node, baseX, baseY),
     ...transformEffects(node),
     ...transformSceneNode(node),

plugin-src/translators/index.ts

@@ -4,9 +4,12 @@ export * from './translateFills';
 export * from './translateFontStyle';
 export * from './translateGrowType';
 export * from './translateHorizontalAlign';
+export * from './translateLetterSpacing';
+export * from './translateLineHeight';
 export * from './translateStrokes';
 export * from './translateStyledTextSegments';
 export * from './translateTextDecoration';
+export * from './translateTextPositionData';
 export * from './translateTextTransform';
 export * from './translateVectorPaths';
 export * from './translateVerticalAlign';

plugin-src/translators/translateLetterSpacing.ts

@@ -0,0 +1,12 @@
+export const translateLetterSpacing = (
+  segment: Pick<StyledTextSegment, 'letterSpacing' | 'fontSize'>
+): number => {
+  switch (segment.letterSpacing.unit) {
+    case 'PIXELS':
+      return segment.letterSpacing.value;
+    case 'PERCENT':
+      return (segment.fontSize * segment.letterSpacing.value) / 100;
+    default:
+      return 0;
+  }
+};

plugin-src/translators/translateLineHeight.ts

@@ -0,0 +1,13 @@
+export const translateLineHeight = (
+  segment: Pick<StyledTextSegment, 'lineHeight' | 'fontSize'>
+): number => {
+  // Penpot reads lineHeight as a multiplier of the font size
+  switch (segment.lineHeight.unit) {
+    case 'PIXELS':
+      return segment.lineHeight.value / segment.fontSize;
+    case 'PERCENT':
+      return segment.lineHeight.value / 100;
+    default:
+      return 1.2; // This is the most common auto value for line-height
+  }
+};

plugin-src/translators/translateTextPositionData.ts

@@ -0,0 +1,18 @@
+import { PositionData } from '@ui/lib/types/text/textAttributes';
+import { TextNode } from '@ui/lib/types/text/textContent';
+
+export const translateTextPositionData = (segments: TextNode[]): PositionData[] => {
+  return segments.map((segment): PositionData => {
+    return {
+      fills: segment.fills,
+      fontFamily: segment.fontFamily,
+      fontSize: segment.fontSize,
+      fontStyle: segment.fontStyle,
+      fontWeight: segment.fontWeight,
+      rtl: segment.direction === 'rtl',
+      text: segment.text,
+      textDecoration: segment.textDecoration,
+      textTransform: segment.textTransform
+    };
+  });
+};

ui-src/lib/types/text/textAttributes.ts

@@ -1,9 +1,27 @@
-import { TextContent, TextNode } from './textContent';
+import { Fill } from '../utils/fill';
+import { TextContent } from './textContent';
 
 export const TEXT_TYPE: unique symbol = Symbol.for('text');
 
 export type TextAttributes = {
   type: 'text' | typeof TEXT_TYPE;
   content?: TextContent;
-  positionData: TextNode[];
+  positionData: PositionData[];
+};
+
+export type PositionData = {
+  // @TODO: figure out how to manage position and dimension
+  x?: number;
+  y?: number;
+  height?: number;
+  width?: number;
+  fills?: Fill[];
+  fontFamily?: string;
+  fontSize?: string;
+  fontStyle?: string;
+  fontWeight?: string;
+  rtl?: boolean;
+  text?: string;
+  textDecoration?: string;
+  textTransform?: string;
 };