From 890e7ff70cb87b7e488955572b6a7cd0b4ff3156 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alex=20S=C3=A1nchez?= Date: Wed, 10 Apr 2024 12:31:37 +0200 Subject: [PATCH] shapes structure --- src/ui/converters/createPenpotText.ts | 40 ++++++++--------- src/ui/lib/penpot.d.ts | 4 +- src/ui/lib/types/baseOptions.d.ts | 6 --- src/ui/lib/types/shape.d.ts | 53 +++++++++++++++++++++++ src/ui/lib/types/text/textAttributes.d.ts | 7 +++ src/ui/lib/types/text/textContent.d.ts | 45 +++++++++++++++++++ src/ui/lib/types/text/textShape.d.ts | 4 ++ src/ui/lib/types/textOptions.d.ts | 49 --------------------- 8 files changed, 130 insertions(+), 78 deletions(-) delete mode 100644 src/ui/lib/types/baseOptions.d.ts create mode 100644 src/ui/lib/types/shape.d.ts create mode 100644 src/ui/lib/types/text/textAttributes.d.ts create mode 100644 src/ui/lib/types/text/textContent.d.ts create mode 100644 src/ui/lib/types/text/textShape.d.ts delete mode 100644 src/ui/lib/types/textOptions.d.ts diff --git a/src/ui/converters/createPenpotText.ts b/src/ui/converters/createPenpotText.ts index 79a252a..f7baa97 100644 --- a/src/ui/converters/createPenpotText.ts +++ b/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, - translateFontStyle, - translateHorizontalAlign, + translateFills, // translateFontStyle, + // translateHorizontalAlign, translateTextDecoration, - translateTextTransform, - translateVerticalAlign + translateTextTransform // translateVerticalAlign } from '../translators'; export const createPenpotText = ( @@ -20,20 +18,20 @@ export const createPenpotText = ( file.fontNames.add(val.fontName); return { - lineHeight: val.lineHeight, - 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, + text: val.characters, 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, - type: Symbol.for('text'), + // rotation: 0, + type: 'text', content: { type: 'root', // verticalAlign: translateVerticalAlign(node.textAlignVertical), diff --git a/src/ui/lib/penpot.d.ts b/src/ui/lib/penpot.d.ts index 23775b8..5ba398f 100644 --- a/src/ui/lib/penpot.d.ts +++ b/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; } diff --git a/src/ui/lib/types/baseOptions.d.ts b/src/ui/lib/types/baseOptions.d.ts deleted file mode 100644 index 053bb7d..0000000 --- a/src/ui/lib/types/baseOptions.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -export type BaseOptions = { - x: number; - y: number; - width: number; - height: number; -}; diff --git a/src/ui/lib/types/shape.d.ts b/src/ui/lib/types/shape.d.ts new file mode 100644 index 0000000..27547a3 --- /dev/null +++ b/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'; +}; diff --git a/src/ui/lib/types/text/textAttributes.d.ts b/src/ui/lib/types/text/textAttributes.d.ts new file mode 100644 index 0000000..8786fb6 --- /dev/null +++ b/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; +}; diff --git a/src/ui/lib/types/text/textContent.d.ts b/src/ui/lib/types/text/textContent.d.ts new file mode 100644 index 0000000..114bf5a --- /dev/null +++ b/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; diff --git a/src/ui/lib/types/text/textShape.d.ts b/src/ui/lib/types/text/textShape.d.ts new file mode 100644 index 0000000..9755e49 --- /dev/null +++ b/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; diff --git a/src/ui/lib/types/textOptions.d.ts b/src/ui/lib/types/textOptions.d.ts deleted file mode 100644 index af38a96..0000000 --- a/src/ui/lib/types/textOptions.d.ts +++ /dev/null @@ -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; - }[]; - }[]; - }[]; - }; -};