Penpot/penpot-plugins
0
Fork 0
mirror of https://github.com/penpot/penpot-plugins.git synced 2025-01-06 14:50:21 -05:00
Code Issues Activity

feat(plugin-types): update to text types

Browse source
This commit is contained in:
alonso.torres 2024-06-27 15:18:42 +02:00 committed by Alonso Torres
parent 00a1565209
commit 8cd51c29f1
2 changed files with 92 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/contrast-plugin/src/app/app.component.ts
View file

@ -222,7 +222,11 @@ export class AppComponent {
}
#getShapeColor(shape?: PenpotShape): string | undefined {
return shape?.fills?.[0]?.fillColor ?? shape?.strokes?.[0]?.strokeColor;
const fills = shape?.fills;
if (fills && fills !== 'mixed') {
return fills?.[0]?.fillColor ?? shape?.strokes?.[0]?.strokeColor;
}
return undefined;
}
#sendMessage(message: PluginUIEvent) {

124
libs/plugin-types/index.d.ts vendored
View file

@ -80,10 +80,28 @@ export interface PenpotPage extends PenpotPluginData {
* @param id The unique identifier of the shape.
*/
getShapeById(id: string): PenpotShape | null;
/**
* Finds all shapes on the page.
* Optionaly it gets a criteria object to search for specific criteria
* @param `criteria.name` search for the name in a case-insensitive manner
* @param `criteria.nameLike` search for name but for a partial match with the name
* @param `criteria.type` search for shapes of the specified type
*/
findShapes(): PenpotShape[];
findShapes(criteria?: {
name?: string;
nameLike?: string;
type?:
| 'frame'
| 'group'
| 'bool'
| 'rect'
| 'path'
| 'text'
| 'circle'
| 'svg-raw'
| 'image';
}): PenpotShape[];
}
/**
@ -485,9 +503,9 @@ export interface PenpotFrameGuideRow {
*/
export interface PenpotFrameGuideSquare {
/**
* The type of the guide, which is always 'column' for square guides.
* The type of the guide, which is always 'square' for square guides.
*/
type: 'column';
type: 'square';
/**
* Specifies whether the square guide is displayed.
*/
@ -1190,7 +1208,7 @@ export interface PenpotShapeBase extends PenpotPluginData {
/**
* The fills applied to the shape.
*/
fills: PenpotFill[];
fills: PenpotFill[] | 'mixed';
/**
* The strokes applied to the shape.
@ -1319,6 +1337,11 @@ export interface PenpotFrame extends PenpotShapeBase {
*/
verticalSizing?: 'auto' | 'fix';
/**
* The fills applied to the shape.
*/
fills: PenpotFill[];
// Container Properties
/**
* The children shapes contained within the frame.
@ -1422,6 +1445,11 @@ export interface PenpotBool extends PenpotShapeBase {
*/
content: Array<PenpotPathCommand>;
/**
* The fills applied to the shape.
*/
fills: PenpotFill[];
// Container Properties
/**
* The children shapes contained within the boolean shape.
@ -1449,6 +1477,11 @@ export interface PenpotRectangle extends PenpotShapeBase {
* The type of the shape, which is always 'rect' for rectangle shapes.
*/
readonly type: 'rect';
/**
* The fills applied to the shape.
*/
fills: PenpotFill[];
}
/**
@ -1469,6 +1502,11 @@ export interface PenpotPath extends PenpotShapeBase {
* The content of the path shape, defined as an array of path commands.
*/
content: Array<PenpotPathCommand>;
/**
* The fills applied to the shape.
*/
fills: PenpotFill[];
}
/**
@ -1514,7 +1552,7 @@ export interface PenpotTextRange {
/**
* The font style of the text range. It can be a specific font style or 'mixed' if multiple font styles are used.
*/
fontStyle: string | 'mixed';
fontStyle: 'normal' | 'italic' | 'mixed' | null;
/**
* The line height of the text range. It can be a specific line height or 'mixed' if multiple line heights are used.
@ -1529,32 +1567,38 @@ export interface PenpotTextRange {
/**
* The text transform applied to the text range. It can be a specific text transform or 'mixed' if multiple text transforms are used.
*/
textTransform: string | 'mixed';
textTransform:
| 'uppercase'
| 'capitalize'
| 'lowercase'
| 'none'
| 'mixed'
| null;
/**
* The text decoration applied to the text range. It can be a specific text decoration or 'mixed' if multiple text decorations are used.
*/
textDecoration: string | 'mixed';
textDecoration: 'underline' | 'line-through' | 'none' | 'mixed' | null;
/**
* The text direction for the text range. It can be a specific direction or 'mixed' if multiple directions are used.
*/
direction: string | 'mixed';
direction: 'ltr' | 'rtl' | 'mixed' | null;
/**
* The fill styles applied to the text range.
*/
fills: PenpotFill[];
fills: PenpotFill[] | 'mixed';
/**
* The horizontal alignment of the text range. It can be a specific alignment or 'mixed' if multiple alignments are used.
*/
align: string | 'mixed';
align: 'left' | 'center' | 'right' | 'justify' | 'mixed' | null;
/**
* The vertical alignment of the text range. It can be a specific alignment or 'mixed' if multiple alignments are used.
*/
verticalAlign: string | 'mixed';
verticalAlign: 'top' | 'center' | 'bottom' | 'mixed' | null;
/**
* Applies a typography style to the text range.
@ -1614,7 +1658,7 @@ export interface PenpotText extends PenpotShapeBase {
/**
* The font style used in the text shape, or 'mixed' if multiple font styles are used.
*/
fontStyle: string | 'mixed';
fontStyle: 'normal' | 'italic' | 'mixed' | null;
/**
* The line height used in the text shape, or 'mixed' if multiple line heights are used.
@ -1629,27 +1673,27 @@ export interface PenpotText extends PenpotShapeBase {
/**
* The text transform applied to the text shape, or 'mixed' if multiple text transforms are used.
*/
textTransform: string | 'mixed';
textTransform: 'uppercase' | 'capitalize' | 'lowercase' | 'mixed' | null;
/**
* The text decoration applied to the text shape, or 'mixed' if multiple text decorations are used.
*/
textDecoration: string | 'mixed';
textDecoration: 'underline' | 'line-through' | 'mixed' | null;
/**
* The text direction for the text shape, or 'mixed' if multiple directions are used.
*/
direction: string | 'mixed';
direction: 'ltr' | 'rtl' | 'mixed' | null;
/**
* The horizontal alignment of the text shape. It can be a specific alignment or 'mixed' if multiple alignments are used.
*/
align: string | 'mixed';
align: 'left' | 'center' | 'right' | 'justify' | 'mixed' | null;
/**
* The vertical alignment of the text shape. It can be a specific alignment or 'mixed' if multiple alignments are used.
*/
verticalAlign: string | 'mixed';
verticalAlign: 'top' | 'center' | 'bottom' | null;
/**
* Gets a text range within the text shape.
@ -1668,28 +1712,17 @@ export interface PenpotText extends PenpotShapeBase {
applyTypography(typography: PenpotLibraryTypography): void;
}
/**
* Represents a frame shape in Penpot.
* This interface extends `PenpotShapeBase` and includes properties specific to frames.
*/
export interface PenpotFrame extends PenpotShapeBase {
/**
* The type of the shape, which is always 'frame' for frame shapes.
*/
readonly type: 'frame';
/**
* The children shapes contained within the frame.
*/
readonly children: PenpotShape[];
}
/**
* Represents an ellipse shape in Penpot.
* This interface extends `PenpotShapeBase` and includes properties specific to ellipses.
*/
export interface PenpotEllipse extends PenpotShapeBase {
type: 'circle';
/**
* The fills applied to the shape.
*/
fills: PenpotFill[];
}
/**
@ -1706,6 +1739,11 @@ export interface PenpotSvgRaw extends PenpotShapeBase {
*/
export interface PenpotImage extends PenpotShapeBase {
type: 'image';
/**
* The fills applied to the shape.
*/
fills: PenpotFill[];
}
/**
@ -1718,9 +1756,21 @@ export type PenpotPoint = { x: number; y: number };
* defined by the coordinates of the top-left corner and the dimensions of the rectangle.
*/
export type PenpotBounds = {
/**
* Top-left x position of the rectangular area defined
*/
x: number;
/**
* Top-left y position of the rectangular area defined
*/
y: number;
/**
* Width of the represented area
*/
width: number;
/**
* Height of the represented area
*/
height: number;
};
@ -1886,7 +1936,7 @@ export interface PenpotLibraryTypography extends PenpotLibraryElement {
/**
* The font style of the typography element.
*/
fontStyle: string;
fontStyle?: 'normal' | 'italic' | null;
/**
* The line height of the typography element.
@ -1901,7 +1951,7 @@ export interface PenpotLibraryTypography extends PenpotLibraryElement {
/**
* The text transform applied to the typography element.
*/
textTransform: string;
textTransform?: 'uppercase' | 'capitalize' | 'lowercase' | null;
/**
* Applies the typography styles to a text shape.
@ -2119,7 +2169,7 @@ export interface PenpotFontVariant {
/**
* The font style of the font variant.
*/
fontStyle: string;
fontStyle: 'normal' | 'italic';
}
/**
@ -2145,7 +2195,7 @@ export interface PenpotFont {
/**
* The default font style of the font.
*/
fontStyle: string;
fontStyle?: 'normal' | 'italic' | null;
/**
* The default font variant ID of the font.