shapes structure

src/ui/converters/createPenpotText.ts

@@ -1,13 +1,11 @@
-import slugify from 'slugify';
+// import slugify from 'slugify';
-
 import { ExportFile, TextData } from '../../common/interfaces';
+import { TextNode } from '../lib/types/text/textContent';
 import {
-  translateFills,
+  translateFills, // translateFontStyle,
-  translateFontStyle,
+  // translateHorizontalAlign,
-  translateHorizontalAlign,
   translateTextDecoration,
-  translateTextTransform,
+  translateTextTransform // translateVerticalAlign
-  translateVerticalAlign
 } from '../translators';
 
 export const createPenpotText = (
@@ -20,20 +18,20 @@ export const createPenpotText = (
     file.fontNames.add(val.fontName);
 
     return {
-      lineHeight: val.lineHeight,
+      text: val.characters,
-      fontStyle: 'normal',
-      textAlign: translateHorizontalAlign(node.textAlignHorizontal),
-      fontId: 'gfont-' + slugify(val.fontName.family.toLowerCase()),
-      fontSize: val.fontSize.toString(),
-      fontWeight: val.fontWeight.toString(),
-      fontVariantId: translateFontStyle(val.fontName.style),
-      textDecoration: translateTextDecoration(val),
-      textTransform: translateTextTransform(val),
-      letterSpacing: val.letterSpacing,
       fills: translateFills(val.fills /*, node.width, node.height*/),
       fontFamily: val.fontName.family,
-      text: val.characters
+      fontSize: val.fontSize.toString(),
-    };
+      fontStyle: 'normal',
+      fontWeight: val.fontWeight.toString(),
+      textDecoration: translateTextDecoration(val),
+      textTransform: translateTextTransform(val)
+      // lineHeight: val.lineHeight,
+      // textAlign: translateHorizontalAlign(node.textAlignHorizontal),
+      // fontId: 'gfont-' + slugify(val.fontName.family.toLowerCase()),
+      // fontVariantId: translateFontStyle(val.fontName.style),
+      // letterSpacing: val.letterSpacing,
+    } as TextNode;
   });
 
   file.fontNames.add(node.fontName);
@@ -44,8 +42,8 @@ export const createPenpotText = (
     y: node.y + baseY,
     width: node.width,
     height: node.height,
-    rotation: 0,
+    // rotation: 0,
-    type: Symbol.for('text'),
+    type: 'text',
     content: {
       type: 'root',
       // verticalAlign: translateVerticalAlign(node.textAlignVertical),

src/ui/lib/penpot.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { TextOptions } from './types/textOptions';
+import { TextShape } from './types/text/textShape';
 
 export interface PenpotFile {
   asMap(): any;
@@ -12,7 +12,7 @@ export interface PenpotFile {
   closeGroup(): void;
   createRect(rect: any): void;
   createCircle(circle: any): void;
-  createText(options: TextOptions): void;
+  createText(options: TextShape): void;
   createImage(image: any): void;
 }
 

src/ui/lib/types/baseOptions.d.ts

@@ -1,6 +0,0 @@
-export type BaseOptions = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};

src/ui/lib/types/shape.d.ts

@@ -0,0 +1,53 @@
+export type Shape = {
+  name?: string;
+  componentId?: string;
+  componentFile?: string;
+  componentRoot?: boolean;
+  shapeRef?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  selrect?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  points?: any;
+  blocked?: boolean;
+  collapsed?: boolean;
+  locked?: boolean;
+  hidden?: boolean;
+  maskedGroup?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  fills?: any;
+  hideFillOnExport?: boolean;
+  proportion?: number;
+  proportionLock?: boolean;
+  constraintsH?: 'left' | 'right' | 'leftright' | 'center' | 'scale';
+  constraintsV?: 'top' | 'bottom' | 'topbottom' | 'center' | 'scale';
+  fixedScroll?: boolean;
+  rx?: number;
+  ry?: number;
+  r1?: number;
+  r2?: number;
+  r3?: number;
+  r4?: number;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  opacity?: number;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  grids?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  exports?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  strokes?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  transform?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  transformInverse?: any;
+  blendMode?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  interactions?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  shadow?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  blur?: any;
+  growType?: 'auto-width' | 'auto-height' | 'fixed';
+};

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

@@ -0,0 +1,7 @@
+import { TextContent } from './textContent';
+
+export type TextAttributes = {
+  id?: string;
+  type: 'text';
+  content?: TextContent;
+};

src/ui/lib/types/text/textContent.d.ts

@@ -0,0 +1,45 @@
+export type TextContent = {
+  type: 'root';
+  key?: string;
+  children?: ParagraphSet[];
+};
+
+type ParagraphSet = {
+  type: 'paragraph-set';
+  key?: string;
+  children: Paragraph[];
+};
+
+type Paragraph = {
+  type: 'paragraph';
+  key?: string;
+  fills?: Fill[];
+  fontFamily?: string;
+  fontSize?: string;
+  fontStyle?: string;
+  fontWeight?: string;
+  direction?: string;
+  textDecoration?: string;
+  textTransform?: string;
+  typographyRefId?: string | null;
+  typographyRefFile?: string | null;
+  children: TextNode[];
+};
+
+type TextNode = {
+  text: string;
+  key?: string;
+  fills?: Fill[];
+  fontFamily?: string;
+  fontSize?: string;
+  fontStyle?: string;
+  fontWeight?: string;
+  direction?: string;
+  textDecoration?: string;
+  textTransform?: string;
+  typographyRefId?: string | null;
+  typographyRefFile?: string | null;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Fill = any;

src/ui/lib/types/text/textShape.d.ts

@@ -0,0 +1,4 @@
+import { Shape } from '../shape';
+import { TextAttributes } from './textAttributes';
+
+export type TextShape = Shape & TextAttributes;

src/ui/lib/types/textOptions.d.ts

@@ -1,49 +0,0 @@
-import { BaseOptions } from './baseOptions';
-
-export type TextOptions = BaseOptions & {
-  name: string;
-  rotation: number;
-  type: symbol;
-  content: {
-    type: 'root';
-    key?: string;
-    children?: {
-      type: 'paragraph-set';
-      key?: string;
-      children: {
-        type: 'paragraph';
-        key?: string;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        fills?: any;
-        fontFamily?: string;
-        fontSize?: string;
-        fontStyle?: string;
-        fontWeight?: string;
-        direction?: string;
-        textDecoration?: string;
-        textTransform?: string;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        typographyRefId?: any;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        typographyRefFile?: any;
-        children: {
-          text: string;
-          key?: string;
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          fills?: any;
-          fontFamily?: string;
-          fontSize?: string;
-          fontStyle?: string;
-          fontWeight?: string;
-          direction?: string;
-          textDecoration?: string;
-          textTransform?: string;
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          typographyRefId?: any;
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          typographyRefFile?: any;
-        }[];
-      }[];
-    }[];
-  };
-};