From d2299f83ecbe0e22cd902867409c8080fce79706 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Fri, 6 Feb 2026 13:40:50 +0100 Subject: [PATCH 01/22] :sparkles: Apply bash in build scripts explicitly (Win compatibility) --- mcp/package.json | 2 +- mcp/scripts/build-types | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/mcp/package.json b/mcp/package.json index 0cab1824a8..fdb75dd03b 100644 --- a/mcp/package.json +++ b/mcp/package.json @@ -5,7 +5,7 @@ "scripts": { "build": "pnpm -r run build", "build:multi-user": "pnpm -r run build:multi-user", - "build:types": "./scripts/build-types", + "build:types": "bash ./scripts/build-types", "start": "pnpm -r --parallel run start", "start:multi-user": "pnpm -r --parallel --filter \"./packages/*\" run start:multi-user", "bootstrap": "pnpm -r install && pnpm run build && pnpm run start", diff --git a/mcp/scripts/build-types b/mcp/scripts/build-types index ce19acb92c..1833e9ee35 100755 --- a/mcp/scripts/build-types +++ b/mcp/scripts/build-types @@ -15,9 +15,9 @@ fi if [[ "$URL" = "http://localhost:9090" ]]; then pnpx concurrently --kill-others-on-fail -s last -k \ "caddy file-server --root ../../plugins/dist/doc/ --listen :9090" \ - "../types-generator/build $URL"; + "bash ../types-generator/build $URL"; else - ../types-generator/build $URL; + bash ../types-generator/build $URL; fi popd From 467eb3c3337e8b8e83b0098786c2f1b70873f95b Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Fri, 6 Feb 2026 13:43:36 +0100 Subject: [PATCH 02/22] :sparkles: Update API docs to include token-related types --- mcp/packages/server/data/api_types.yml | 3698 +++++++++++++++++++++++- 1 file changed, 3693 insertions(+), 5 deletions(-) diff --git a/mcp/packages/server/data/api_types.yml b/mcp/packages/server/data/api_types.yml index 585947e276..603abdaf0f 100644 --- a/mcp/packages/server/data/api_types.yml +++ b/mcp/packages/server/data/api_types.yml @@ -1122,6 +1122,9 @@ Board: layoutChild?: LayoutChildProperties; layoutCell?: LayoutChildProperties; setParentIndex(index: number): void; + tokens: { + [property: string]: string; + }; isComponentInstance(): boolean; isComponentMainInstance(): boolean; isComponentCopyInstance(): boolean; @@ -1149,6 +1152,7 @@ Board: interactions: Interaction[]; addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: undefined | TokenProperty[]): void; clone(): Shape; remove(): void; } @@ -1488,6 +1492,20 @@ Board: ``` Layout properties for cells in a grid layout. + tokens: |- + ``` + readonly tokens: { + [property: string]: string; + } + ``` + + The design tokens applied to this shape. + It's a map property name -> token name. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). interactions: |- ``` readonly interactions: Interaction[] @@ -2005,6 +2023,28 @@ Board: ``` shape.removeInteraction(interaction); ``` + applyToken: |- + ``` + applyToken(token, properties): void + ``` + + * Applies one design token to one or more properties of the shape. + + Parameters + + token: Token + + is the Token to apply + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape @@ -2121,6 +2161,9 @@ VariantContainer: layoutChild?: LayoutChildProperties; layoutCell?: LayoutChildProperties; setParentIndex(index: number): void; + tokens: { + [property: string]: string; + }; isComponentInstance(): boolean; isComponentMainInstance(): boolean; isComponentCopyInstance(): boolean; @@ -2148,6 +2191,7 @@ VariantContainer: interactions: Interaction[]; addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: undefined | TokenProperty[]): void; clone(): Shape; remove(): void; } @@ -2490,6 +2534,20 @@ VariantContainer: ``` Layout properties for cells in a grid layout. + tokens: |- + ``` + readonly tokens: { + [property: string]: string; + } + ``` + + The design tokens applied to this shape. + It's a map property name -> token name. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). interactions: |- ``` readonly interactions: Interaction[] @@ -3007,6 +3065,28 @@ VariantContainer: ``` shape.removeInteraction(interaction); ``` + applyToken: |- + ``` + applyToken(token, properties): void + ``` + + * Applies one design token to one or more properties of the shape. + + Parameters + + token: Token + + is the Token to apply + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape @@ -3113,6 +3193,9 @@ Boolean: layoutChild?: LayoutChildProperties; layoutCell?: LayoutChildProperties; setParentIndex(index: number): void; + tokens: { + [property: string]: string; + }; isComponentInstance(): boolean; isComponentMainInstance(): boolean; isComponentCopyInstance(): boolean; @@ -3140,6 +3223,7 @@ Boolean: interactions: Interaction[]; addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: undefined | TokenProperty[]): void; clone(): Shape; remove(): void; } @@ -3444,6 +3528,20 @@ Boolean: ``` Layout properties for cells in a grid layout. + tokens: |- + ``` + readonly tokens: { + [property: string]: string; + } + ``` + + The design tokens applied to this shape. + It's a map property name -> token name. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). interactions: |- ``` readonly interactions: Interaction[] @@ -3914,6 +4012,28 @@ Boolean: ``` shape.removeInteraction(interaction); ``` + applyToken: |- + ``` + applyToken(token, properties): void + ``` + + * Applies one design token to one or more properties of the shape. + + Parameters + + token: Token + + is the Token to apply + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape @@ -5566,6 +5686,9 @@ Ellipse: layoutChild?: LayoutChildProperties; layoutCell?: LayoutChildProperties; setParentIndex(index: number): void; + tokens: { + [property: string]: string; + }; isComponentInstance(): boolean; isComponentMainInstance(): boolean; isComponentCopyInstance(): boolean; @@ -5593,6 +5716,7 @@ Ellipse: interactions: Interaction[]; addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: undefined | TokenProperty[]): void; clone(): Shape; remove(): void; } @@ -5867,6 +5991,20 @@ Ellipse: ``` Layout properties for cells in a grid layout. + tokens: |- + ``` + readonly tokens: { + [property: string]: string; + } + ``` + + The design tokens applied to this shape. + It's a map property name -> token name. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). interactions: |- ``` readonly interactions: Interaction[] @@ -6284,6 +6422,28 @@ Ellipse: ``` shape.removeInteraction(interaction); ``` + applyToken: |- + ``` + applyToken(token, properties): void + ``` + + * Applies one design token to one or more properties of the shape. + + Parameters + + token: Token + + is the Token to apply + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape @@ -7904,6 +8064,9 @@ Group: layoutChild?: LayoutChildProperties; layoutCell?: LayoutChildProperties; setParentIndex(index: number): void; + tokens: { + [property: string]: string; + }; isComponentInstance(): boolean; isComponentMainInstance(): boolean; isComponentCopyInstance(): boolean; @@ -7931,6 +8094,7 @@ Group: interactions: Interaction[]; addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: undefined | TokenProperty[]): void; clone(): Shape; remove(): void; } @@ -8211,6 +8375,20 @@ Group: ``` Layout properties for cells in a grid layout. + tokens: |- + ``` + readonly tokens: { + [property: string]: string; + } + ``` + + The design tokens applied to this shape. + It's a map property name -> token name. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). interactions: |- ``` readonly interactions: Interaction[] @@ -8692,6 +8870,28 @@ Group: ``` shape.removeInteraction(interaction); ``` + applyToken: |- + ``` + applyToken(token, properties): void + ``` + + * Applies one design token to one or more properties of the shape. + + Parameters + + token: Token + + is the Token to apply + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape @@ -9062,6 +9262,9 @@ Image: layoutChild?: LayoutChildProperties; layoutCell?: LayoutChildProperties; setParentIndex(index: number): void; + tokens: { + [property: string]: string; + }; isComponentInstance(): boolean; isComponentMainInstance(): boolean; isComponentCopyInstance(): boolean; @@ -9089,6 +9292,7 @@ Image: interactions: Interaction[]; addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: undefined | TokenProperty[]): void; clone(): Shape; remove(): void; } @@ -9363,6 +9567,20 @@ Image: ``` Layout properties for cells in a grid layout. + tokens: |- + ``` + readonly tokens: { + [property: string]: string; + } + ``` + + The design tokens applied to this shape. + It's a map property name -> token name. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). interactions: |- ``` readonly interactions: Interaction[] @@ -9780,6 +9998,28 @@ Image: ``` shape.removeInteraction(interaction); ``` + applyToken: |- + ``` + applyToken(token, properties): void + ``` + + * Applies one design token to one or more properties of the shape. + + Parameters + + token: Token + + is the Token to apply + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape @@ -10082,6 +10322,7 @@ Library: colors: LibraryColor[]; typographies: LibraryTypography[]; components: LibraryComponent[]; + tokens: TokenCatalog; createColor(): LibraryColor; createTypography(): LibraryTypography; createComponent(shapes: Shape[]): LibraryComponent; @@ -10142,6 +10383,14 @@ Library: ``` console.log(penpot.library.local.components ``` + tokens: |- + ``` + readonly tokens: TokenCatalog + ``` + + A catalog of Design Tokens in the library. + + See `TokenCatalog` type to see usage. Methods: createColor: |- ``` @@ -11298,7 +11547,7 @@ LibraryTypography: name: string; path: string; fontId: string; - fontFamily: string; + fontFamilies: string; fontVariantId: string; fontSize: string; fontWeight: string; @@ -11360,12 +11609,12 @@ LibraryTypography: ``` The unique identifier of the font used in the typography element. - fontFamily: |- + fontFamilies: |- ``` - fontFamily: string + fontFamilies: string ``` - The font family of the typography element. + The font families of the typography element. fontVariantId: |- ``` fontVariantId: string @@ -12365,6 +12614,9 @@ Path: layoutChild?: LayoutChildProperties; layoutCell?: LayoutChildProperties; setParentIndex(index: number): void; + tokens: { + [property: string]: string; + }; isComponentInstance(): boolean; isComponentMainInstance(): boolean; isComponentCopyInstance(): boolean; @@ -12392,6 +12644,7 @@ Path: interactions: Interaction[]; addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: undefined | TokenProperty[]): void; clone(): Shape; remove(): void; } @@ -12690,6 +12943,20 @@ Path: ``` Layout properties for cells in a grid layout. + tokens: |- + ``` + readonly tokens: { + [property: string]: string; + } + ``` + + The design tokens applied to this shape. + It's a map property name -> token name. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). interactions: |- ``` readonly interactions: Interaction[] @@ -13121,6 +13388,28 @@ Path: ``` shape.removeInteraction(interaction); ``` + applyToken: |- + ``` + applyToken(token, properties): void + ``` + + * Applies one design token to one or more properties of the shape. + + Parameters + + token: Token + + is the Token to apply + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape @@ -13602,6 +13891,9 @@ Rectangle: layoutChild?: LayoutChildProperties; layoutCell?: LayoutChildProperties; setParentIndex(index: number): void; + tokens: { + [property: string]: string; + }; isComponentInstance(): boolean; isComponentMainInstance(): boolean; isComponentCopyInstance(): boolean; @@ -13629,6 +13921,7 @@ Rectangle: interactions: Interaction[]; addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: undefined | TokenProperty[]): void; clone(): Shape; remove(): void; } @@ -13905,6 +14198,20 @@ Rectangle: ``` Layout properties for cells in a grid layout. + tokens: |- + ``` + readonly tokens: { + [property: string]: string; + } + ``` + + The design tokens applied to this shape. + It's a map property name -> token name. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). interactions: |- ``` readonly interactions: Interaction[] @@ -14322,6 +14629,28 @@ Rectangle: ``` shape.removeInteraction(interaction); ``` + applyToken: |- + ``` + applyToken(token, properties): void + ``` + + * Applies one design token to one or more properties of the shape. + + Parameters + + token: Token + + is the Token to apply + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape @@ -14534,6 +14863,9 @@ ShapeBase: layoutChild?: LayoutChildProperties; layoutCell?: LayoutChildProperties; setParentIndex(index: number): void; + tokens: { + [property: string]: string; + }; isComponentInstance(): boolean; isComponentMainInstance(): boolean; isComponentCopyInstance(): boolean; @@ -14561,6 +14893,7 @@ ShapeBase: interactions: Interaction[]; addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: undefined | TokenProperty[]): void; clone(): Shape; remove(): void; } @@ -14836,6 +15169,20 @@ ShapeBase: ``` Layout properties for cells in a grid layout. + tokens: |- + ``` + readonly tokens: { + [property: string]: string; + } + ``` + + The design tokens applied to this shape. + It's a map property name -> token name. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). interactions: |- ``` readonly interactions: Interaction[] @@ -15253,6 +15600,28 @@ ShapeBase: ``` shape.removeInteraction(interaction); ``` + applyToken: |- + ``` + applyToken(token, properties): void + ``` + + * Applies one design token to one or more properties of the shape. + + Parameters + + token: Token + + is the Token to apply + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape @@ -15526,6 +15895,9 @@ SvgRaw: layoutChild?: LayoutChildProperties; layoutCell?: LayoutChildProperties; setParentIndex(index: number): void; + tokens: { + [property: string]: string; + }; isComponentInstance(): boolean; isComponentMainInstance(): boolean; isComponentCopyInstance(): boolean; @@ -15553,6 +15925,7 @@ SvgRaw: interactions: Interaction[]; addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: undefined | TokenProperty[]): void; clone(): Shape; remove(): void; type: "svg-raw"; @@ -15822,6 +16195,20 @@ SvgRaw: ``` Layout properties for cells in a grid layout. + tokens: |- + ``` + readonly tokens: { + [property: string]: string; + } + ``` + + The design tokens applied to this shape. + It's a map property name -> token name. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). interactions: |- ``` readonly interactions: Interaction[] @@ -16243,6 +16630,28 @@ SvgRaw: ``` shape.removeInteraction(interaction); ``` + applyToken: |- + ``` + applyToken(token, properties): void + ``` + + * Applies one design token to one or more properties of the shape. + + Parameters + + token: Token + + is the Token to apply + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape @@ -16341,6 +16750,9 @@ Text: layoutChild?: LayoutChildProperties; layoutCell?: LayoutChildProperties; setParentIndex(index: number): void; + tokens: { + [property: string]: string; + }; isComponentInstance(): boolean; isComponentMainInstance(): boolean; isComponentCopyInstance(): boolean; @@ -16368,6 +16780,7 @@ Text: interactions: Interaction[]; addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: undefined | TokenProperty[]): void; clone(): Shape; remove(): void; type: "text"; @@ -16681,6 +17094,20 @@ Text: ``` Layout properties for cells in a grid layout. + tokens: |- + ``` + readonly tokens: { + [property: string]: string; + } + ``` + + The design tokens applied to this shape. + It's a map property name -> token name. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). interactions: |- ``` readonly interactions: Interaction[] @@ -17226,6 +17653,28 @@ Text: ``` shape.removeInteraction(interaction); ``` + applyToken: |- + ``` + applyToken(token, properties): void + ``` + + * Applies one design token to one or more properties of the shape. + + Parameters + + token: Token + + is the Token to apply + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape @@ -17627,6 +18076,2907 @@ Track: The value of the track. This can be a number representing the size of the track, or null if not applicable. +TokenBase: + overview: |- + Interface TokenBase + =================== + + Represents the base properties and methods of a Design Token in Penpot, shared by + all token types. + + ``` + interface TokenBase { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenBorderRadius + + TokenShadow + + TokenColor + + TokenDimension + + TokenFontFamilies + + TokenFontSizes + + TokenFontWeights + + TokenLetterSpacing + + TokenNumber + + TokenOpacity + + TokenRotation + + TokenSizing + + TokenSpacing + + TokenBorderWidth + + TokenTextCase + + TokenTextDecoration + + TokenTypography + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenBorderRadius: + overview: |- + Interface TokenBorderRadius + =========================== + + Represents a token of type BorderRadius. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenBorderRadius { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "borderRadius"; + value: string; + resolvedValue: undefined | number; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenBorderRadius + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a positive number or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | number + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a positive number, or undefined if no value has been found in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenShadowValue: + overview: |- + Interface TokenShadowValue + ========================== + + ``` + interface TokenShadowValue { + color: string; + inset: boolean; + offsetX: number; + offsetY: number; + spread: number; + blur: number; + } + ``` + + Referenced by: TokenShadow + members: + Properties: + color: |- + ``` + color: string + ``` + + The color as a string (e.g. "#FF5733"). + inset: |- + ``` + inset: boolean + ``` + + If the shadow is inset or drop. + offsetX: |- + ``` + offsetX: number + ``` + + The horizontal offset of the shadow in pixels. + offsetY: |- + ``` + offsetY: number + ``` + + The vertical offset of the shadow in pixels. + spread: |- + ``` + spread: number + ``` + + The spread distance of the shadow in pixels. + blur: |- + ``` + blur: number + ``` + + The amount of blur to apply to the shadow. +TokenShadowValueString: + overview: |- + Interface TokenShadowValueString + ================================ + + ``` + interface TokenShadowValueString { + color: string; + inset: string; + offsetX: string; + offsetY: string; + spread: string; + blur: string; + } + ``` + + Referenced by: TokenShadow, TokenValueString + members: + Properties: + color: |- + ``` + color: string + ``` + + The color as a string (e.g. "#FF5733"), or a reference + to a color token. + inset: |- + ``` + inset: string + ``` + + If the shadow is inset or drop, or a reference of a + boolean token. + offsetX: |- + ``` + offsetX: string + ``` + + The horizontal offset of the shadow in pixels, or a reference + to a number token. + offsetY: |- + ``` + offsetY: string + ``` + + The vertical offset of the shadow in pixels, or a reference + to a number token. + spread: |- + ``` + spread: string + ``` + + The spread distance of the shadow in pixels, or a reference + to a number token. + blur: |- + ``` + blur: string + ``` + + The amount of blur to apply to the shadow, or a reference + to a number token. +TokenShadow: + overview: |- + Interface TokenShadow + ===================== + + Represents a token of type Shadow. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenShadow { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "shadow"; + value: string | TokenShadowValueString[]; + resolvedValue: undefined | TokenShadowValue[]; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenShadow + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string | TokenShadowValueString[] + ``` + + The value as defined in the token itself. + It may be a string with a reference to other token, or else + an array of TokenShadowValueString. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | TokenShadowValue[] + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's an array of TokenShadowValue, or undefined if no value has been found + in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenColor: + overview: |- + Interface TokenColor + ==================== + + Represents a token of type Color. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenColor { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "color"; + value: string; + resolvedValue: undefined | string; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenColor + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a rgb color or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | string + ``` + + The value as defined in the token itself. + It's a rgb color or a reference. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenDimension: + overview: |- + Interface TokenDimension + ======================== + + Represents a token of type Dimension. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenDimension { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "dimension"; + value: string; + resolvedValue: undefined | number; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenDimension + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a positive number or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | number + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a positive number, or undefined if no value has been found in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenFontFamilies: + overview: |- + Interface TokenFontFamilies + =========================== + + Represents a token of type FontFamilies. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenFontFamilies { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "fontFamilies"; + value: string | string[]; + resolvedValue: undefined | string[]; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenFontFamilies + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string | string[] + ``` + + The value as defined in the token itself. + It may be a string with a reference to other token, or else + an array of strings with one or more font families (each family + is an item in the array). + resolvedValue: |- + ``` + readonly resolvedValue: undefined | string[] + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's an array of strings with one or more font families, + or undefined if no value has been found in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenFontSizes: + overview: |- + Interface TokenFontSizes + ======================== + + Represents a token of type FontSizes. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenFontSizes { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "fontSizes"; + value: string; + resolvedValue: undefined | number; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenFontSizes + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a positive number or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | number + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a positive number, or undefined if no value has been found in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenFontWeights: + overview: |- + Interface TokenFontWeights + ========================== + + Represents a token of type FontWeights. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenFontWeights { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "fontWeights"; + value: string; + resolvedValue: undefined | string; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenFontWeights + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a weight string or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | string + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a weight string ("bold", "strong", etc.), or undefined if no value has + been found in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenLetterSpacing: + overview: |- + Interface TokenLetterSpacing + ============================ + + Represents a token of type LetterSpacing. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenLetterSpacing { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "letterSpacing"; + value: string; + resolvedValue: undefined | number; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenLetterSpacing + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a number or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | number + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a number, or undefined if no value has been found in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenNumber: + overview: |- + Interface TokenNumber + ===================== + + Represents a token of type Number. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenNumber { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "number"; + value: string; + resolvedValue: undefined | number; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenNumber + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a number or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | number + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a number, or undefined if no value has been found in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenOpacity: + overview: |- + Interface TokenOpacity + ====================== + + Represents a token of type Opacity. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenOpacity { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "opacity"; + value: string; + resolvedValue: undefined | number; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenOpacity + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a number between 0 and 1 or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | number + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a number between 0 and 1, or undefined if no value has been found + in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenRotation: + overview: |- + Interface TokenRotation + ======================= + + Represents a token of type Rotation. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenRotation { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "rotation"; + value: string; + resolvedValue: undefined | number; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenRotation + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a number in degrees or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | number + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a number in degrees, or undefined if no value has been found + in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenSizing: + overview: |- + Interface TokenSizing + ===================== + + Represents a token of type Sizing. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenSizing { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "sizing"; + value: string; + resolvedValue: undefined | number; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenSizing + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a number or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | number + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a number, or undefined if no value has been found in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenSpacing: + overview: |- + Interface TokenSpacing + ====================== + + Represents a token of type Spacing. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenSpacing { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "spacing"; + value: string; + resolvedValue: undefined | number; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenSpacing + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a number or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | number + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a number, or undefined if no value has been found in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenBorderWidth: + overview: |- + Interface TokenBorderWidth + ========================== + + Represents a token of type BorderWidth. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenBorderWidth { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "borderWidth"; + value: string; + resolvedValue: undefined | number; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenBorderWidth + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a positive number or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | number + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a positive number, or undefined if no value has been found in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenTextCase: + overview: |- + Interface TokenTextCase + ======================= + + Represents a token of type TextCase. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenTextCase { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "textCase"; + value: string; + resolvedValue: undefined | string; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenTextCase + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a case string or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | string + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a case string ("none", "uppercase", "lowercase", "capitalize"), or + undefined if no value has been found in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenTextDecoration: + overview: |- + Interface TokenTextDecoration + ============================= + + Represents a token of type Decoration. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenTextDecoration { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "textDecoration"; + value: string; + resolvedValue: undefined | string; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenTextDecoration + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string + ``` + + The value as defined in the token itself. + It's a decoration string or a reference. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | string + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a decoration string, or undefined if no value has been found + in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenTypographyValue: + overview: |- + Interface TokenTypographyValue + ============================== + + ``` + interface TokenTypographyValue { + letterSpacing: number; + fontFamilies: string[]; + fontSizes: number; + fontWeights: string; + lineHeight: number; + textCase: string; + textDecoration: string; + } + ``` + + Referenced by: TokenTypography + members: + Properties: + letterSpacing: |- + ``` + letterSpacing: number + ``` + + The letter spacing, as a number. + fontFamilies: |- + ``` + fontFamilies: string[] + ``` + + The list of font families. + fontSizes: |- + ``` + fontSizes: number + ``` + + The font size, as a positive number. + fontWeights: |- + ``` + fontWeights: string + ``` + + The font weight, as a weight string ("bold", "strong", etc.). + lineHeight: |- + ``` + lineHeight: number + ``` + + The line height, as a number. + textCase: |- + ``` + textCase: string + ``` + + The text case as a string ("none", "uppercase", "lowercase" "capitalize"). + textDecoration: |- + ``` + textDecoration: string + ``` + + The text decoration as a string ("none", "underline", "strike-through"). +TokenTypographyValueString: + overview: |- + Interface TokenTypographyValueString + ==================================== + + ``` + interface TokenTypographyValueString { + letterSpacing: string; + fontFamilies: string | string[]; + fontSizes: string; + fontWeight: string; + lineHeight: string; + textCase: string; + textDecoration: string; + } + ``` + + Referenced by: TokenTypography, TokenValueString + members: + Properties: + letterSpacing: |- + ``` + letterSpacing: string + ``` + + The letter spacing, as a number, or a reference to a TokenLetterSpacing. + fontFamilies: |- + ``` + fontFamilies: string | string[] + ``` + + The list of font families, or a reference to a TokenFontFamilies. + fontSizes: |- + ``` + fontSizes: string + ``` + + The font size, as a positive number, or a reference to a TokenFontSizes. + fontWeight: |- + ``` + fontWeight: string + ``` + + The font weight, as a weight string ("bold", "strong", etc.), or a + reference to a TokenFontWeights. + lineHeight: |- + ``` + lineHeight: string + ``` + + The line height, as a number. Note that there not exists an individual + token type line height, only part of a Typography token. If you need to + put here a reference, use a NumberToken. + textCase: |- + ``` + textCase: string + ``` + + The text case as a string ("none", "uppercase", "lowercase" "capitalize"), + or a reference to a TokenTextCase. + textDecoration: |- + ``` + textDecoration: string + ``` + + The text decoration as a string ("none", "underline", "strike-through"), + or a reference to a TokenTextDecoration. +TokenTypography: + overview: |- + Interface TokenTypography + ========================= + + Represents a token of type Typography. + This interface extends `TokenBase` and specifies the data type of the value. + + ``` + interface TokenTypography { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; + applyToSelected(properties: undefined | TokenProperty[]): void; + type: "typography"; + value: string | TokenTypographyValueString; + resolvedValue: undefined | TokenTypographyValue[]; + } + ``` + + Hierarchy (view full) + + * TokenBase + + TokenTypography + + Referenced by: Token + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this token, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the token. It may include a group path separated by `.`. + description: |- + ``` + description: string + ``` + + An optional description text. + type: |- + ``` + readonly type + ``` + + The type of the token. + value: |- + ``` + value: string | TokenTypographyValueString + ``` + + The value as defined in the token itself. + It may be a string with a reference to other token, or a + TokenTypographyValueString. + resolvedValue: |- + ``` + readonly resolvedValue: undefined | TokenTypographyValue[] + ``` + + The value calculated by finding all tokens with the same name in active sets + and resolving the references. + + It's a TokenTypographyValue, or undefined if no value has been found + in active sets. + Methods: + duplicate: |- + ``` + duplicate(): Token + ``` + + * Adds to the set that contains this Token a new one equal to this one + but with a new id. + + Returns Token + remove: |- + ``` + remove(): void + ``` + + * Removes this token from the catalog. + + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. + + Returns void + applyToShapes: |- + ``` + applyToShapes(shapes, properties): void + ``` + + * Applies this token to one or more properties of the given shapes. + + Parameters + + shapes: Shape[] + + is an array of shapes to apply it. + + properties: undefined | TokenProperty[] + + an optional list of property names. If omitted, the + default properties will be applied. + + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void + applyToSelected: |- + ``` + applyToSelected(properties): void + ``` + + * Applies this token to the currently selected shapes. + + Parameters and warnings are the same as above. + + Parameters + + properties: undefined | TokenProperty[] + + Returns void +TokenCatalog: + overview: |- + Interface TokenCatalog + ====================== + + The collection of all tokens in a Penpot file's library. + + Tokens are contained in sets, that can be marked as active + or inactive to control the resolved value of the tokens. + + The active status of sets can be handled by presets named + Themes. + + ``` + interface TokenCatalog { + themes: TokenTheme[]; + sets: TokenSet[]; + addTheme(group: string, name: string): TokenTheme; + addSet(name: string): TokenSet; + getThemeById(id: string): undefined | TokenTheme; + getSetById(id: string): undefined | TokenSet; + } + ``` + + Referenced by: Library + members: + Properties: + themes: |- + ``` + readonly themes: TokenTheme[] + ``` + + The list of themes in this catalog, in creation order. + sets: |- + ``` + readonly sets: TokenSet[] + ``` + + The list of sets in this catalog, in the order defined + by the user. The order is important because then same token name + exists in several active sets, the latter has precedence. + Methods: + addTheme: |- + ``` + addTheme(group, name): TokenTheme + ``` + + * Creates a new TokenTheme and adds it to the catalog. + + Parameters + + group: string + + The group name of the theme (can be empty string). + + name: string + + The name of the theme (required) + + Returns TokenTheme + + Returns the created TokenTheme. + addSet: |- + ``` + addSet(name): TokenSet + ``` + + * Creates a new TokenSet and adds it to the catalog. + + Parameters + + name: string + + The name of the set (required). It may contain + a group path, separated by `/`. + + Returns TokenSet + + Returns the created TokenSet. + getThemeById: |- + ``` + getThemeById(id): undefined | TokenTheme + ``` + + * Retrieves a theme. + + Parameters + + id: string + + the id of the theme. + + Returns undefined | TokenTheme + + Returns the theme or undefined if not found. + getSetById: |- + ``` + getSetById(id): undefined | TokenSet + ``` + + * Retrieves a set. + + Parameters + + id: string + + the id of the set. + + Returns undefined | TokenSet + + Returns the set or undefined if not found. +TokenSet: + overview: |- + Interface TokenSet + ================== + + A collection of Design Tokens. + + Inside a set, tokens have an unique name, that will designate + what token to use if the name is applied to a shape and this + set is active. + + ``` + interface TokenSet { + id: string; + name: string; + active: boolean; + tokens: Token[]; + tokensByType: [string, Token[]][]; + toggleActive(): void; + getTokenById(id: string): undefined | Token; + addToken(type: TokenType, name: string, value: TokenValueString): Token; + duplicate(): TokenSet; + remove(): void; + } + ``` + + Referenced by: TokenCatalog, TokenSet, TokenTheme + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this set, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + name: |- + ``` + name: string + ``` + + The name of the set. It may include a group path separated by `/`. + active: |- + ``` + active: boolean + ``` + + Indicates if the set is currently active. + tokens: |- + ``` + readonly tokens: Token[] + ``` + + The tokens contained in this set, in alphabetical order. + tokensByType: |- + ``` + readonly tokensByType: [string, Token[]][] + ``` + + The tokens contained in this set, grouped by type. + Methods: + toggleActive: |- + ``` + toggleActive(): void + ``` + + * Toggles the active status of this set. + + Returns void + getTokenById: |- + ``` + getTokenById(id): undefined | Token + ``` + + * Retrieves a token. + + Parameters + + id: string + + the id of the token. + + Returns undefined | Token + + Returns the token or undefined if not found. + addToken: |- + ``` + addToken(type, name, value): Token + ``` + + * Creates a new Token and adds it to the set. + + Parameters + + type: TokenType + + Thetype of token. + + name: string + + The name of the token (required). It may contain + a group path, separated by `.`. + + value: TokenValueString + + The value of the token (required), in the string form. + + Returns Token + + Returns the created Token. + duplicate: |- + ``` + duplicate(): TokenSet + ``` + + * Adds to the catalog a new TokenSet equal to this one but with a new id. + + Returns TokenSet + remove: |- + ``` + remove(): void + ``` + + * Removes this set from the catalog. + + Returns void +TokenTheme: + overview: |- + Interface TokenTheme + ==================== + + A preset of active TokenSets. + + A theme contains a list of references to TokenSets. When the theme + is activated, it sets are activated too. This will not deactivate + sets that are *not* in this theme, because they may have been + activated by other themes. + + Themes may be gruped. At any time only one of the themes in a group + may be active. But there may be active themes in other groups. This + allows to define multiple "axis" for theming (e.g. color scheme, + density or brand). + + When a TokenSet is activated or deactivated directly, all themes + are disabled (indicating that now there is a "custom" manual theme + active). + + ``` + interface TokenTheme { + id: string; + externalId: undefined | string; + group: string; + name: string; + active: boolean; + toggleActive(): void; + activeSets: TokenSet[]; + addSet(tokenSet: TokenSet): void; + removeSet(tokenSet: TokenSet): void; + duplicate(): TokenTheme; + remove(): void; + } + ``` + + Referenced by: TokenCatalog, TokenTheme + members: + Properties: + id: |- + ``` + readonly id: string + ``` + + The unique identifier for this theme, used only internally inside Penpot. + This one is not exported or synced with external Design Token sources. + externalId: |- + ``` + readonly externalId: undefined | string + ``` + + Optional identifier that may exists if the theme was imported from an + external tool that uses ids in the json file. + group: |- + ``` + group: string + ``` + + The group name of the theme. Can be empt string. + name: |- + ``` + name: string + ``` + + The name of the theme. + active: |- + ``` + active: boolean + ``` + + Indicates if the theme is currently active. + activeSets: |- + ``` + activeSets: TokenSet[] + ``` + + The sets that will be activated if this theme is activated. + Methods: + toggleActive: |- + ``` + toggleActive(): void + ``` + + * Toggles the active status of this theme. + + Returns void + addSet: |- + ``` + addSet(tokenSet): void + ``` + + * Adds a set to the list of the theme. + + Parameters + + tokenSet: TokenSet + + Returns void + removeSet: |- + ``` + removeSet(tokenSet): void + ``` + + * Removes a set from the list of the theme. + + Parameters + + tokenSet: TokenSet + + Returns void + duplicate: |- + ``` + duplicate(): TokenTheme + ``` + + * Adds to the catalog a new TokenTheme equal to this one but with a new id. + + Returns TokenTheme + remove: |- + ``` + remove(): void + ``` + + * Removes this theme from the catalog. + + Returns void User: overview: |- Interface User @@ -18229,7 +21579,7 @@ Shape: let shape: Shape;if (penpot.utils.types.isRectangle(shape)) { console.log(shape.type);} ``` - Referenced by: Board, Boolean, Context, ContextGeometryUtils, ContextTypesUtils, Ellipse, EventsMap, FlexLayout, GridLayout, Group, Image, Interaction, Library, LibraryComponent, LibraryTypography, LibraryVariantComponent, OpenOverlay, OverlayAction, Page, Path, Penpot, Rectangle, ShapeBase, SvgRaw, Text, ToggleOverlay, VariantContainer, Viewport + Referenced by: Board, Boolean, Context, ContextGeometryUtils, ContextTypesUtils, Ellipse, EventsMap, FlexLayout, GridLayout, Group, Image, Interaction, Library, LibraryComponent, LibraryTypography, LibraryVariantComponent, OpenOverlay, OverlayAction, Page, Path, Penpot, Rectangle, ShapeBase, SvgRaw, Text, ToggleOverlay, TokenBase, TokenBorderRadius, TokenBorderWidth, TokenColor, TokenDimension, TokenFontFamilies, TokenFontSizes, TokenFontWeights, TokenLetterSpacing, TokenNumber, TokenOpacity, TokenRotation, TokenShadow, TokenSizing, TokenSpacing, TokenTextCase, TokenTextDecoration, TokenTypography, VariantContainer, Viewport members: {} StrokeCap: overview: |- @@ -18305,3 +21655,341 @@ Trigger: Referenced by: Board, Boolean, Ellipse, Group, Image, Interaction, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer members: {} +TokenValueString: + overview: |- + Type Alias TokenValueString + =========================== + + ``` + TokenValueString: + | TokenShadowValueString + | TokenTypographyValueString + | string + | string[] + ``` + + Any possible type of value field in a token. + + Referenced by: TokenSet + members: {} +Token: + overview: |- + Type Alias Token + ================ + + ``` + Token: + | TokenBorderRadius + | TokenShadow + | TokenColor + | TokenDimension + | TokenFontFamilies + | TokenFontSizes + | TokenFontWeights + | TokenLetterSpacing + | TokenNumber + | TokenOpacity + | TokenRotation + | TokenSizing + | TokenSpacing + | TokenBorderWidth + | TokenTextCase + | TokenTextDecoration + | TokenTypography + ``` + + The supported Design Tokens in Penpot. + + Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, TokenBase, TokenBorderRadius, TokenBorderWidth, TokenColor, TokenDimension, TokenFontFamilies, TokenFontSizes, TokenFontWeights, TokenLetterSpacing, TokenNumber, TokenOpacity, TokenRotation, TokenSet, TokenShadow, TokenSizing, TokenSpacing, TokenTextCase, TokenTextDecoration, TokenTypography, VariantContainer + members: {} +TokenBorderRadiusProps: + overview: |- + Type Alias TokenBorderRadiusProps + ================================= + + ``` + TokenBorderRadiusProps: + | "r1" + | "r2" + | "r3" + | "r4" + ``` + + The properties that a BorderRadius token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenShadowProps: + overview: |- + Type Alias TokenShadowProps + =========================== + + ``` + TokenShadowProps + ``` + + The properties that a Shadow token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenColorProps: + overview: |- + Type Alias TokenColorProps + ========================== + + ``` + TokenColorProps: "fill" | "stroke" + ``` + + The properties that a Color token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenDimensionProps: + overview: |- + Type Alias TokenDimensionProps + ============================== + + ``` + TokenDimensionProps: "x" | "y" | "stroke-width" + ``` + + The properties that a Dimension token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenFontFamiliesProps: + overview: |- + Type Alias TokenFontFamiliesProps + ================================= + + ``` + TokenFontFamiliesProps + ``` + + The properties that a FontFamilies token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenFontSizesProps: + overview: |- + Type Alias TokenFontSizesProps + ============================== + + ``` + TokenFontSizesProps + ``` + + The properties that a FontSizes token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenFontWeightProps: + overview: |- + Type Alias TokenFontWeightProps + =============================== + + ``` + TokenFontWeightProps + ``` + + The properties that a FontWeight token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenLetterSpacingProps: + overview: |- + Type Alias TokenLetterSpacingProps + ================================== + + ``` + TokenLetterSpacingProps + ``` + + The properties that a LetterSpacing token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenNumberProps: + overview: |- + Type Alias TokenNumberProps + =========================== + + ``` + TokenNumberProps: "rotation" | "line-height" + ``` + + The properties that a Number token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenOpacityProps: + overview: |- + Type Alias TokenOpacityProps + ============================ + + ``` + TokenOpacityProps + ``` + + The properties that an Opacity token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenSizingProps: + overview: |- + Type Alias TokenSizingProps + =========================== + + ``` + TokenSizingProps: + | "width" + | "height" + | "layout-item-min-w" + | "layout-item-max-w" + | "layout-item-min-h" + | "layout-item-max-h" + ``` + + The properties that a Sizing token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenSpacingProps: + overview: |- + Type Alias TokenSpacingProps + ============================ + + ``` + TokenSpacingProps: + | "row-gap" + | "column-gap" + | "p1" + | "p2" + | "p3" + | "p4" + | "m1" + | "m2" + | "m3" + | "m4" + ``` + + The properties that a Spacing token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenBorderWidthProps: + overview: |- + Type Alias TokenBorderWidthProps + ================================ + + ``` + TokenBorderWidthProps + ``` + + The properties that a BorderWidth token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenTextCaseProps: + overview: |- + Type Alias TokenTextCaseProps + ============================= + + ``` + TokenTextCaseProps + ``` + + The properties that a TextCase token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenTextDecorationProps: + overview: |- + Type Alias TokenTextDecorationProps + =================================== + + ``` + TokenTextDecorationProps + ``` + + The properties that a TextDecoration token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenTypographyProps: + overview: |- + Type Alias TokenTypographyProps + =============================== + + ``` + TokenTypographyProps + ``` + + The properties that a Typography token can be applied to. + + Referenced by: TokenProperty + members: {} +TokenProperty: + overview: |- + Type Alias TokenProperty + ======================== + + ``` + TokenProperty: + | "all" + | TokenBorderRadiusProps + | TokenShadowProps + | TokenColorProps + | TokenDimensionProps + | TokenFontFamiliesProps + | TokenFontSizesProps + | TokenFontWeightProps + | TokenLetterSpacingProps + | TokenNumberProps + | TokenOpacityProps + | TokenSizingProps + | TokenSpacingProps + | TokenBorderWidthProps + | TokenTextCaseProps + | TokenTextDecorationProps + | TokenTypographyProps + ``` + + All the properties that a token can be applied to. + Not always correspond to Shape properties. For example, + `fill` property applies to `fillColor` of the first fill + of the shape. + + Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, TokenBase, TokenBorderRadius, TokenBorderWidth, TokenColor, TokenDimension, TokenFontFamilies, TokenFontSizes, TokenFontWeights, TokenLetterSpacing, TokenNumber, TokenOpacity, TokenRotation, TokenShadow, TokenSizing, TokenSpacing, TokenTextCase, TokenTextDecoration, TokenTypography, VariantContainer + members: {} +TokenType: + overview: |- + Type Alias TokenType + ==================== + + ``` + TokenType: + | "borderRadius" + | "shadow" + | "color" + | "dimension" + | "fontFamilies" + | "fontSizes" + | "fontWeights" + | "letterSpacing" + | "number" + | "opacity" + | "rotation" + | "sizing" + | "spacing" + | "borderWidth" + | "textCase" + | "textDecoration" + | "typography" + ``` + + The supported types of Design Tokens in Penpot. + + Referenced by: TokenSet + members: {} From d7282518c4057f76f7ca6684f222e2d524768684 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Fri, 6 Feb 2026 22:18:02 +0100 Subject: [PATCH 03/22] :books: Improve usage documentation of API type generator script --- mcp/types-generator/README.md | 36 ++++++++++++++++++++++++++++------- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/mcp/types-generator/README.md b/mcp/types-generator/README.md index c2cd403f45..dda1c49df6 100644 --- a/mcp/types-generator/README.md +++ b/mcp/types-generator/README.md @@ -1,7 +1,8 @@ # Types Generator This subproject contains helper scripts used in the development of the -Penpot MCP server for generate the types yaml. +Penpot MCP server, specifically for the generation of a YAML file containing +Penpot plugin API types and their documentation. ## Setup @@ -12,15 +13,36 @@ Install the environment via (optional, already handled by `build` script) pixi install +## Running the API Documentation Preparation Script -### Buld API types - -The script `prepare_api_docs.py` reads API documentation from the Web -and collects it in a single yaml file, which is then used by an MCP +The script `prepare_api_docs.py` reads API documentation from a Web URL +and collects it in a single YAML file, which is then used by an MCP tool to provide API documentation to an LLM on demand. +Successful execution will generate the output file `../packages/server/data/api_types.yml`. + +### Generating the YAML File for a Given URL + Running the script: - ./build + pixi run python prepare_api_docs.py -This will generate `../packages/server/data/api_types.yml`. +You can alternatively run `./build `, which additionally performs pixi environment installation. + +For example, to generate the API documentation based on the current PROD Penpot API documentation, +use the URL + + https://doc.plugins.penpot.app + +### Generating the YAML File Based on the Current Documentation in the Repository + +Requirement: [Caddy](https://caddyserver.com/download) must be installed and available in the system path. + +To generate the API documentation based on the current documentation in the repository, +run the `build:types` script in the parent directory, i.e. + + cd .. + pnpm run build:types + +This will spawn a local HTTP server on port 9090 and run the `prepare_api_docs.py` script with the +URL `http://localhost:9090`. From 8186f3c87c58f1201f3f4478186471f3717e2df5 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Mon, 9 Feb 2026 12:17:57 +0100 Subject: [PATCH 04/22] :books: Remove misleading information from README The types build is not part of the bootstrap, and it is not relevant to regular users (only to developers). Information on how to apply it is now in types-generator/README.md --- mcp/README.md | 26 -------------------------- 1 file changed, 26 deletions(-) diff --git a/mcp/README.md b/mcp/README.md index c8d5a94e0e..9e9821c065 100644 --- a/mcp/README.md +++ b/mcp/README.md @@ -90,32 +90,6 @@ This bootstrap command will: * build all components (`pnpm -r run build`) * start all components (`pnpm -r --parallel run start`) -If you want to have types scrapped from a remote repository, the best -approach is executing the following: - -```shell -PENPOT_PLUGINS_API_DOC_URL=https://doc.plugins.penpot.app pnpm run build:types -pnpm run bootstrap -``` - -Or this, if you want skip build step bacause you have already have all -build artifacts ready (per example from previous `bootstrap` command): - -``` -PENPOT_PLUGINS_API_DOC_URL=https://doc.plugins.penpot.app pnpm run build:types -pnpm run start -``` - -If you want just to update the types definitions with the plugins api doc from the -current branch: - -```shell -pnpm run build:types -``` - -(That command will build plugins doc locally and will generate the types yaml from -the locally build documentation) - ### 2. Load the Plugin in Penpot and Establish the Connection > [!NOTE] From 8d90edcc2fce951d9a1ec3be79a63461c1892c8f Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Sat, 7 Feb 2026 20:42:03 +0100 Subject: [PATCH 05/22] :sparkles: Add instructions on design tokens --- mcp/packages/server/data/prompts.yml | 241 +++++++++++++++++++++++++++ 1 file changed, 241 insertions(+) diff --git a/mcp/packages/server/data/prompts.yml b/mcp/packages/server/data/prompts.yml index dabed7a590..08646cd7c8 100644 --- a/mcp/packages/server/data/prompts.yml +++ b/mcp/packages/server/data/prompts.yml @@ -263,5 +263,246 @@ initial_instructions: | const newComponent: LibraryComponent = penpot.library.local.createComponent(shapes); newComponent.name = 'My Button'; + # Design Tokens + + Design Tokens in Penpot are reusable design values (colors, dimensions, typography, shadows, etc.) that enable consistent styling across designs. + Tokens are organized in sets and can be controlled by themes. + + ## Accessing Tokens + + Tokens are accessed through the library's token catalog: + * `penpot.library.local.tokens` (type: `TokenCatalog`) - The token catalog for the current file + + The `TokenCatalog` contains: + * `sets: TokenSet[]` - Array of token sets (order matters: later sets override earlier ones for same-named tokens) + * `themes: TokenTheme[]` - Array of themes that control which sets are active + * `addSet(name: string): TokenSet` - Create a new token set + * `addTheme(group: string, name: string): TokenTheme` - Create a new theme + * `getSetById(id: string): TokenSet | undefined` - Retrieve a set by ID + * `getThemeById(id: string): TokenTheme | undefined` - Retrieve a theme by ID + + ## Token Sets + + A `TokenSet` is a collection of tokens with unique names: + * `id: string` - Unique identifier + * `name: string` - Display name (may include group path separated by `/`) + * `active: boolean` - Whether this set is currently active (only active sets affect shapes) + * `tokens: Token[]` - Array of all tokens in this set + * `tokensByType: [string, Token[]][]` - Tokens grouped by type + * `toggleActive(): void` - Toggle the set's active status + * `addToken(type: TokenType, name: string, value: TokenValueString): Token` - Create and add a new token + * `getTokenById(id: string): Token | undefined` - Retrieve a token by ID + * `duplicate(): TokenSet` - Create a copy of this set + * `remove(): void` - Delete this set + + ## Token Themes + + A `TokenTheme` is a preset that activates specific token sets: + * `id: string` - Unique identifier + * `group: string` - Theme group (only one theme per group can be active at a time) + * `name: string` - Display name + * `active: boolean` - Whether this theme is currently active + * `activeSets: TokenSet[]` - Array of sets activated by this theme + * `toggleActive(): void` - Activate/deactivate this theme + * `addSet(tokenSet: TokenSet): void` - Add a set to this theme + * `removeSet(tokenSet: TokenSet): void` - Remove a set from this theme + + Themes in different groups can be active simultaneously (e.g., one for color scheme, one for density). + When a theme is activated, it activates its sets. Manually toggling a set deactivates all themes. + + ## Token Types + + Tokens have specific types that determine what properties they can be applied to: + * `TokenColor` - Colors (can apply to: `"fill"`, `"stroke"`) + * `TokenDimension` - Measurements (can apply to: `"x"`, `"y"`, `"stroke-width"`) + * `TokenSpacing` - Spacing values + * `TokenSizing` - Size values + * `TokenTypography` - Complete typography styles (font family, size, weight, line height, etc.) + * `TokenShadow` - Shadow effects + * `TokenBorderRadius` - Border radius values + * `TokenOpacity` - Opacity values + * `TokenRotation` - Rotation angles + * And more... + + Each token has: + * `id: string` - Unique identifier + * `name: string` - Token name (may include group path separated by `.`) + * `type: TokenType` - The token type (e.g., `"color"`, `"dimension"`) + * `value: string | TokenValueString` - The raw value (may be a direct value or a reference to another token) + * `resolvedValue: | undefined` - The computed final value (follows references) + * `description: string` - Optional description + * `duplicate(): Token` - Create a copy + * `remove(): void` - Delete this token + + ## Token References + + Tokens can reference other tokens using curly brace syntax in their `value`: + * Direct value: `"#FFFFFF"` or `"16px"` + * Reference: `"{color.base.white}"` - references another token by name + + The `resolvedValue` property contains the final computed value after following all references. + + ## Discovering Tokens + + To explore available tokens in a project: + + ```javascript + const tokenCatalog = penpot.library.local.tokens; + + // List all token sets + console.log("Token sets:", tokenCatalog.sets.map(s => ({ + name: s.name, + active: s.active, + tokenCount: s.tokens.length + }))); + + // Find tokens by type + for (const set of tokenCatalog.sets) { + const colorTokens = set.tokens.filter(t => t.type === 'color'); + console.log(`Set "${set.name}" has ${colorTokens.length} color tokens`); + } + + // Find a specific token by name + let targetToken = null; + for (const set of tokenCatalog.sets) { + const token = set.tokens.find(t => t.name === 'color.base.white'); + if (token) { + targetToken = token; + break; + } + } + + // Check which themes are active + console.log("Active themes:", tokenCatalog.themes.filter(t => t.active).map(t => t.name)); + ``` + + ## Applying Tokens to Shapes + + There are multiple ways to apply tokens to shapes: + + **From the shape:** + ```javascript + // Apply a token to specific properties + shape.applyToken(colorToken, ["fill"]); + + // Apply to default properties (recommended - more reliable) + shape.applyToken(colorToken); + ``` + + **From the token:** + ```javascript + // Apply to multiple shapes + token.applyToShapes([shape1, shape2, shape3], ["fill"]); + + // Apply to currently selected shapes + token.applyToSelected(); + ``` + + **Important notes on applying tokens:** + * Token application is **asynchronous** - there is a delay (typically ~100-150ms) before changes take effect + * Token application is **by name, not by ID** - if multiple tokens share the same name in different sets, + the active set with highest precedence (last in the sets array) determines which value is applied + * If you specify properties explicitly (e.g., `["fill"]`), in some cases it may be more reliable to omit + the properties parameter and let the token use its default properties + * After applying a token, `shape.tokens` will contain the mapping of properties to token names + + **Reading applied tokens:** + ```javascript + // Check which tokens are applied to a shape + console.log("Applied tokens:", shape.tokens); + // Example output: { fill: "color.base.white", typography: "typography.button" } + + // The actual values are in the shape's properties + console.log("Actual fill color:", shape.fills[0].fillColor); + ``` + + ## Removing Tokens from Shapes + + To remove a token from a shape, simply set the property directly: + + ```javascript + // Remove a fill color token by setting fills directly + shape.fills = [{ + fillColor: "#000000", + fillOpacity: 1 + }]; + // The token binding is automatically removed from shape.tokens + + // Remove a typography token by setting font properties + shape.fontSize = 16; + // This breaks the typography token binding + ``` + + **The token removal mechanism is elegant:** Penpot automatically removes token bindings when you directly set + the corresponding property. You don't need an explicit "removeToken" method. + + ## Creating New Tokens + + To create tokens, first create or access a token set, then add tokens to it: + + ```javascript + const tokenCatalog = penpot.library.local.tokens; + + // Create a new token set (or use an existing one) + const mySet = tokenCatalog.addSet("my-tokens"); + + // Make sure the set is active + if (!mySet.active) { + mySet.toggleActive(); + } + + // Add a color token + const primaryColor = mySet.addToken("color", "color.primary", "#0066FF"); + + // Add a dimension token + const baseSpacing = mySet.addToken("dimension", "spacing.base", "8px"); + + // Add a token that references another token + const accentColor = mySet.addToken("color", "color.accent", "{color.primary}"); + + // Token names can include group paths with dots + const buttonPrimary = mySet.addToken("color", "color.button.primary", "#0066FF"); + ``` + + **Token value formats:** + * Colors: `"#RRGGBB"` or `"#RRGGBBAA"` or references like `"{color.base.white}"` + * Dimensions: `"16px"` or `"1.5rem"` or references + * Numbers: `"1.5"` or `"100"` or references + * Typography: Complex object or string representation + * Shadows: Array of shadow objects + + ## Creating and Using Themes + + Themes allow you to switch between different token configurations: + + ```javascript + const tokenCatalog = penpot.library.local.tokens; + + // Create theme groups (e.g., for color schemes) + const lightTheme = tokenCatalog.addTheme("color-scheme", "Light"); + const darkTheme = tokenCatalog.addTheme("color-scheme", "Dark"); + + // Add sets to themes + const lightColorsSet = tokenCatalog.sets.find(s => s.name === "colors-light"); + const darkColorsSet = tokenCatalog.sets.find(s => s.name === "colors-dark"); + + lightTheme.addSet(lightColorsSet); + darkTheme.addSet(darkColorsSet); + + // Activate a theme (only one theme per group can be active) + darkTheme.toggleActive(); + + // When you switch themes, all shapes using tokens will update automatically + ``` + + ## Best Practices + + * Use semantic token names (e.g., `color.text.primary`) rather than literal names (e.g., `color.black`) + * Organize tokens in sets by purpose (e.g., "base-colors", "semantic-colors", "spacing") + * Use token references to create hierarchies (base tokens → semantic tokens → component tokens) + * Keep token sets active when you want their tokens to be available + * When applying tokens programmatically, account for the async nature (use small delays if you need to read results) + * Prefer omitting the `properties` parameter when applying tokens, unless you have a specific need + -- You have hereby read the 'Penpot High-Level Overview' and need not use a tool to read it again. From e9a56c9d9f65cf5b7e4ef3d087fd5b5e90ea8623 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Mon, 9 Feb 2026 11:59:35 +0100 Subject: [PATCH 06/22] :sparkles: Shorten design token instructions --- mcp/packages/server/data/prompts.yml | 268 ++++----------------------- 1 file changed, 36 insertions(+), 232 deletions(-) diff --git a/mcp/packages/server/data/prompts.yml b/mcp/packages/server/data/prompts.yml index 08646cd7c8..534d3918cf 100644 --- a/mcp/packages/server/data/prompts.yml +++ b/mcp/packages/server/data/prompts.yml @@ -262,247 +262,51 @@ initial_instructions: | * const shapes: Shape[] = [shape1, shape2]; // shapes to include const newComponent: LibraryComponent = penpot.library.local.createComponent(shapes); newComponent.name = 'My Button'; - + # Design Tokens - Design Tokens in Penpot are reusable design values (colors, dimensions, typography, shadows, etc.) that enable consistent styling across designs. - Tokens are organized in sets and can be controlled by themes. + Design tokens are reusable design values (colors, dimensions, typography, etc.) for consistent styling. - ## Accessing Tokens + The token library: `penpot.library.local.tokens` (type: `TokenCatalog`) + * `sets: TokenSet[]` - Token collections (order matters for precedence) + * `themes: TokenTheme[]` - Presets that activate specific sets + * `addSet(name: string): TokenSet` - Create new set + * `addTheme(group: string, name: string): TokenTheme` - Create new theme - Tokens are accessed through the library's token catalog: - * `penpot.library.local.tokens` (type: `TokenCatalog`) - The token catalog for the current file + `TokenSet` contains tokens with unique names: + * `active: boolean` - Only active sets affect shapes; use `set.toggleActive()` to change: `if (!set.active) set.toggleActive();` + * `tokens: Token[]` - All tokens in set + * `addToken(type: TokenType, name: string, value: TokenValueString): Token` - Creates a token, adding it to the set. + - `TokenType`: "color" | "dimension" | "spacing" | "typography" | "shadow" | "opacity" | "borderRadius" | "borderWidth" | "fontWeights" | "fontSizes" | "fontFamilies" | "letterSpacing" | "textDecoration" | "textCase" + - Examples: + const token = set.addToken("color", "color.primary", "#0066FF"); // direct value + const token2 = set.addToken("color", "color.accent", "{color.primary}"); // reference to another token - The `TokenCatalog` contains: - * `sets: TokenSet[]` - Array of token sets (order matters: later sets override earlier ones for same-named tokens) - * `themes: TokenTheme[]` - Array of themes that control which sets are active - * `addSet(name: string): TokenSet` - Create a new token set - * `addTheme(group: string, name: string): TokenTheme` - Create a new theme - * `getSetById(id: string): TokenSet | undefined` - Retrieve a set by ID - * `getThemeById(id: string): TokenTheme | undefined` - Retrieve a theme by ID + `Token`: + * `name: string` - Token name (may include group path like "color.base.white") + * `value: string | TokenValueString` - Raw value (may be direct value or reference to another token like "{color.primary}") + * `resolvedValue` - Computed final value (follows references) + * `type: TokenType` - ## Token Sets - - A `TokenSet` is a collection of tokens with unique names: - * `id: string` - Unique identifier - * `name: string` - Display name (may include group path separated by `/`) - * `active: boolean` - Whether this set is currently active (only active sets affect shapes) - * `tokens: Token[]` - Array of all tokens in this set - * `tokensByType: [string, Token[]][]` - Tokens grouped by type - * `toggleActive(): void` - Toggle the set's active status - * `addToken(type: TokenType, name: string, value: TokenValueString): Token` - Create and add a new token - * `getTokenById(id: string): Token | undefined` - Retrieve a token by ID - * `duplicate(): TokenSet` - Create a copy of this set - * `remove(): void` - Delete this set - - ## Token Themes - - A `TokenTheme` is a preset that activates specific token sets: - * `id: string` - Unique identifier - * `group: string` - Theme group (only one theme per group can be active at a time) - * `name: string` - Display name - * `active: boolean` - Whether this theme is currently active - * `activeSets: TokenSet[]` - Array of sets activated by this theme - * `toggleActive(): void` - Activate/deactivate this theme - * `addSet(tokenSet: TokenSet): void` - Add a set to this theme - * `removeSet(tokenSet: TokenSet): void` - Remove a set from this theme - - Themes in different groups can be active simultaneously (e.g., one for color scheme, one for density). - When a theme is activated, it activates its sets. Manually toggling a set deactivates all themes. - - ## Token Types - - Tokens have specific types that determine what properties they can be applied to: - * `TokenColor` - Colors (can apply to: `"fill"`, `"stroke"`) - * `TokenDimension` - Measurements (can apply to: `"x"`, `"y"`, `"stroke-width"`) - * `TokenSpacing` - Spacing values - * `TokenSizing` - Size values - * `TokenTypography` - Complete typography styles (font family, size, weight, line height, etc.) - * `TokenShadow` - Shadow effects - * `TokenBorderRadius` - Border radius values - * `TokenOpacity` - Opacity values - * `TokenRotation` - Rotation angles - * And more... - - Each token has: - * `id: string` - Unique identifier - * `name: string` - Token name (may include group path separated by `.`) - * `type: TokenType` - The token type (e.g., `"color"`, `"dimension"`) - * `value: string | TokenValueString` - The raw value (may be a direct value or a reference to another token) - * `resolvedValue: | undefined` - The computed final value (follows references) - * `description: string` - Optional description - * `duplicate(): Token` - Create a copy - * `remove(): void` - Delete this token - - ## Token References - - Tokens can reference other tokens using curly brace syntax in their `value`: - * Direct value: `"#FFFFFF"` or `"16px"` - * Reference: `"{color.base.white}"` - references another token by name - - The `resolvedValue` property contains the final computed value after following all references. - - ## Discovering Tokens - - To explore available tokens in a project: - - ```javascript - const tokenCatalog = penpot.library.local.tokens; - - // List all token sets - console.log("Token sets:", tokenCatalog.sets.map(s => ({ - name: s.name, - active: s.active, - tokenCount: s.tokens.length - }))); - - // Find tokens by type - for (const set of tokenCatalog.sets) { - const colorTokens = set.tokens.filter(t => t.type === 'color'); - console.log(`Set "${set.name}" has ${colorTokens.length} color tokens`); - } - - // Find a specific token by name - let targetToken = null; - for (const set of tokenCatalog.sets) { - const token = set.tokens.find(t => t.name === 'color.base.white'); - if (token) { - targetToken = token; - break; + Discovering tokens: + ```javascript + for (const set of penpot.library.local.tokens.sets) { + const token = set.tokens.find(t => t.name === 'color.base.white'); + if (token) { /* found it */ } } - } + ``` - // Check which themes are active - console.log("Active themes:", tokenCatalog.themes.filter(t => t.active).map(t => t.name)); - ``` + Applying tokens: + * `shape.applyToken(token)` - Apply to shape + * `token.applyToShapes(shapes)` or `token.applyToSelected()` - Apply from token + * Application is **asynchronous** (wait for ~100ms to see the effects) + * After application: + - `shape.tokens` returns `{ propertyName: "token.name" }` + - The properties that the tokens control will reflect the token's resolved value. - ## Applying Tokens to Shapes - - There are multiple ways to apply tokens to shapes: - - **From the shape:** - ```javascript - // Apply a token to specific properties - shape.applyToken(colorToken, ["fill"]); - - // Apply to default properties (recommended - more reliable) - shape.applyToken(colorToken); - ``` - - **From the token:** - ```javascript - // Apply to multiple shapes - token.applyToShapes([shape1, shape2, shape3], ["fill"]); - - // Apply to currently selected shapes - token.applyToSelected(); - ``` - - **Important notes on applying tokens:** - * Token application is **asynchronous** - there is a delay (typically ~100-150ms) before changes take effect - * Token application is **by name, not by ID** - if multiple tokens share the same name in different sets, - the active set with highest precedence (last in the sets array) determines which value is applied - * If you specify properties explicitly (e.g., `["fill"]`), in some cases it may be more reliable to omit - the properties parameter and let the token use its default properties - * After applying a token, `shape.tokens` will contain the mapping of properties to token names - - **Reading applied tokens:** - ```javascript - // Check which tokens are applied to a shape - console.log("Applied tokens:", shape.tokens); - // Example output: { fill: "color.base.white", typography: "typography.button" } - - // The actual values are in the shape's properties - console.log("Actual fill color:", shape.fills[0].fillColor); - ``` - - ## Removing Tokens from Shapes - - To remove a token from a shape, simply set the property directly: - - ```javascript - // Remove a fill color token by setting fills directly - shape.fills = [{ - fillColor: "#000000", - fillOpacity: 1 - }]; - // The token binding is automatically removed from shape.tokens - - // Remove a typography token by setting font properties - shape.fontSize = 16; - // This breaks the typography token binding - ``` - - **The token removal mechanism is elegant:** Penpot automatically removes token bindings when you directly set - the corresponding property. You don't need an explicit "removeToken" method. - - ## Creating New Tokens - - To create tokens, first create or access a token set, then add tokens to it: - - ```javascript - const tokenCatalog = penpot.library.local.tokens; - - // Create a new token set (or use an existing one) - const mySet = tokenCatalog.addSet("my-tokens"); - - // Make sure the set is active - if (!mySet.active) { - mySet.toggleActive(); - } - - // Add a color token - const primaryColor = mySet.addToken("color", "color.primary", "#0066FF"); - - // Add a dimension token - const baseSpacing = mySet.addToken("dimension", "spacing.base", "8px"); - - // Add a token that references another token - const accentColor = mySet.addToken("color", "color.accent", "{color.primary}"); - - // Token names can include group paths with dots - const buttonPrimary = mySet.addToken("color", "color.button.primary", "#0066FF"); - ``` - - **Token value formats:** - * Colors: `"#RRGGBB"` or `"#RRGGBBAA"` or references like `"{color.base.white}"` - * Dimensions: `"16px"` or `"1.5rem"` or references - * Numbers: `"1.5"` or `"100"` or references - * Typography: Complex object or string representation - * Shadows: Array of shadow objects - - ## Creating and Using Themes - - Themes allow you to switch between different token configurations: - - ```javascript - const tokenCatalog = penpot.library.local.tokens; - - // Create theme groups (e.g., for color schemes) - const lightTheme = tokenCatalog.addTheme("color-scheme", "Light"); - const darkTheme = tokenCatalog.addTheme("color-scheme", "Dark"); - - // Add sets to themes - const lightColorsSet = tokenCatalog.sets.find(s => s.name === "colors-light"); - const darkColorsSet = tokenCatalog.sets.find(s => s.name === "colors-dark"); - - lightTheme.addSet(lightColorsSet); - darkTheme.addSet(darkColorsSet); - - // Activate a theme (only one theme per group can be active) - darkTheme.toggleActive(); - - // When you switch themes, all shapes using tokens will update automatically - ``` - - ## Best Practices - - * Use semantic token names (e.g., `color.text.primary`) rather than literal names (e.g., `color.black`) - * Organize tokens in sets by purpose (e.g., "base-colors", "semantic-colors", "spacing") - * Use token references to create hierarchies (base tokens → semantic tokens → component tokens) - * Keep token sets active when you want their tokens to be available - * When applying tokens programmatically, account for the async nature (use small delays if you need to read results) - * Prefer omitting the `properties` parameter when applying tokens, unless you have a specific need + Removing tokens: + Simply set the respective property directly - token binding is automatically removed, e.g. + shape.fills = [{ fillColor: "#000000", fillOpacity: 1 }]; // Removes fill token -- You have hereby read the 'Penpot High-Level Overview' and need not use a tool to read it again. From 6b277956b9c3663ebd007580a0b000e66113ee5e Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Mon, 9 Feb 2026 15:02:47 +0100 Subject: [PATCH 07/22] :sparkles: Add information on clone() method --- mcp/packages/server/data/prompts.yml | 48 +++++++++++++++------------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/mcp/packages/server/data/prompts.yml b/mcp/packages/server/data/prompts.yml index 534d3918cf..c79094b473 100644 --- a/mcp/packages/server/data/prompts.yml +++ b/mcp/packages/server/data/prompts.yml @@ -16,7 +16,7 @@ initial_instructions: | VERY IMPORTANT: When writing code, NEVER LOG INFORMATION YOU ARE ALSO RETURNING. It would duplicate the information you receive! - To execute code correctly, you need to understand the Penpot Plugin API. You can retrieve API documentation via + To execute code correctly, you need to understand the Penpot Plugin API. You can retrieve API documentation via the `penpot_api_info` tool. This is the full list of types/interfaces in the Penpot API: $api_types @@ -26,7 +26,7 @@ initial_instructions: | # The Structure of Penpot Designs - A Penpot design ultimately consists of shapes. + A Penpot design ultimately consists of shapes. The type `Shape` is a union type, which encompasses both containers and low-level shapes. Shapes in a Penpot design are organized hierarchically. At the top level, a design project contains one or more `Page` objects. @@ -38,7 +38,7 @@ initial_instructions: | # Core Shape Properties and Methods - **Type**: + **Type**: Any given shape contains information on the concrete type via its `type` field. **Position and Dimensions**: @@ -77,9 +77,11 @@ initial_instructions: | - Automatically removes the shape from its old parent - Absolute x/y positions are preserved (use `penpotUtils.setParentXY` to adjust relative position) + Cloning: Use `shape.clone(): Shape` to create an exact duplicate (including all properties and children) of a shape; same position as original. + # Images - The `Image` type is a legacy type. Images are now typically embedded in a `Fill`, with `fillImage` set to an + The `Image` type is a legacy type. Images are now typically embedded in a `Fill`, with `fillImage` set to an `ImageData` object, i.e. the `fills` property of of a shape (e.g. a `Rectangle`) will contain a fill where `fillImage` is set. Use the `export_shape` and `import_image` tools to export and import images. @@ -94,14 +96,14 @@ initial_instructions: | - sizing (`verticalSizing`, `horizontalSizing`: "fill" | "auto" | "fix") - min/max sizes (`minWidth`, `maxWidth`, `minHeight`, `maxHeight`) - `zIndex: number` (higher numbers on top) - + * **Flex Layout**: A flexbox-style layout system - Properties: `dir`, `rowGap`, `columnGap`, `alignItems`, `justifyContent`; - `dir`: "row" | "column" | "row-reverse" | "column-reverse" - Padding: `topPadding`, `rightPadding`, `bottomPadding`, `leftPadding`, or combined `verticalPadding`, `horizontalPadding` - To modify spacing: adjust `rowGap` and `columnGap` properties, not individual child positions. Optionally, adjust indivudual child margins via `child.layoutChild`. - - When a board has flex layout, + - When a board has flex layout, - child positions are controlled by the layout system, not by individual x/y coordinates (unless `child.layoutChild.absolute` is true); appending or inserting children automatically positions them according to the layout rules. - CRITICAL: For for dir="column" or dir="row", the order of the `children` array is reversed relative to the visual order! @@ -110,22 +112,22 @@ initial_instructions: | - CRITICAL: The FlexLayout method `board.flex.appendChild` is BROKEN. To append children to a flex layout board such that they appear visually at the end, ALWAYS use the Board's method `board.appendChild(shape)`; it will insert at the front of the `children` array for dir="column" or dir="row", which is what you want. So call it in the order of visual appearance. - To insert at a specific index, use `board.insertChild(index, shape)`, bearing in mind the reversed order for dir="column" + To insert at a specific index, use `board.insertChild(index, shape)`, bearing in mind the reversed order for dir="column" or dir="row". - Add to a board with `board.addFlexLayout(): FlexLayout`; instance then accessible via `board.flex`. - IMPORTANT: When adding a flex layout to a container that already has children, + IMPORTANT: When adding a flex layout to a container that already has children, use `penpotUtils.addFlexLayout(container, dir)` instead! This preserves the existing visual order of children. - Otherwise, children will be arbitrarily reordered when the children order suddenly determines the display order. + Otherwise, children will be arbitrarily reordered when the children order suddenly determines the display order. - Check with: `if (board.flex) { ... }` - + * **Grid Layout**: A CSS grid-style layout system - Add to a board with `board.addGridLayout(): GridLayout`; instance then accessibly via `board.grid`; Check with: `if (board.grid) { ... }` - Properties: `rows`, `columns`, `rowGap`, `columnGap` - Children are positioned via 1-based row/column indices - - Add to grid via `board.flex.appendChild(shape, row, column)` + - Add to grid via `board.flex.appendChild(shape, row, column)` - Modify grid positioning after the fact via `shape.layoutCell: LayoutCellProperties` - + * When working with boards: - ALWAYS check if the board has a layout system before attempting to reposition children - Modify layout properties (gaps, padding) instead of trying to set child x/y positions directly @@ -160,7 +162,7 @@ initial_instructions: | * getPageByName(name: string): Page | null * shapeStructure(shape: Shape, maxDepth: number | undefined = undefined): { id, name, type, children?, layout? } Generates an overview structure of the given shape. - - children: recursive, limited by maxDepth + - children: recursive, limited by maxDepth - layout: present if shape has flex/grid layout, contains { type: "flex" | "grid", ... } * findShapeById(id: string): Shape | null * findShape(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape | null @@ -168,7 +170,7 @@ initial_instructions: | * findShapes(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape[] * isContainedIn(shape: Shape, container: Shape): boolean Returns true iff shape is fully within the container's geometric bounds. - Note that a shape's bounds may not always reflect its actual visual content - descendants can overflow; check using analyzeDescendants (see below). + Note that a shape's bounds may not always reflect its actual visual content - descendants can overflow; check using analyzeDescendants (see below). * setParentXY(shape: Shape, parentX: number, parentY: number): void Sets shape position relative to its parent (since parentX/parentY are read-only) * analyzeDescendants(root: Shape, evaluator: (root: Shape, descendant: Shape) => T | null | undefined, maxDepth?: number): Array<{ shape: Shape, result: T }> @@ -178,7 +180,7 @@ initial_instructions: | General pointers for working with Penpot designs: * Prefer `penpotUtils` helper functions — avoid reimplementing shape searching. - * To get an overview of a single page, use `penpotUtils.shapeStructure(page.root, 3)`. + * To get an overview of a single page, use `penpotUtils.shapeStructure(page.root, 3)`. Note that `penpot.root` refers to the current page only. When working across pages, first determine the relevant page(s). * Use `penpotUtils.findShapes()` or `penpotUtils.findShape()` with predicates to locate elements efficiently. @@ -212,7 +214,7 @@ initial_instructions: | # Visual Inspection of Designs - For many tasks, it can be critical to visually inspect the design. Remember to use the `export_shape` tool for this purpose! + For many tasks, it can be critical to visually inspect the design. Remember to use the `export_shape` tool for this purpose! # Revising Designs @@ -224,34 +226,34 @@ initial_instructions: | Consider converting boards to flex layout when appropriate. # Asset Libraries - - Libraries in Penpot are collections of reusable design assets (components, colors, and typographies) that can be shared across files. + + Libraries in Penpot are collections of reusable design assets (components, colors, and typographies) that can be shared across files. They enable design systems and consistent styling across projects. Each Penpot file has its own local library and can connect to external shared libraries. - + Accessing libraries: via `penpot.library` (type: `LibraryContext`): * `penpot.library.local` (type: `Library`) - The current file's own library * `penpot.library.connected` (type: `Library[]`) - Array of already-connected external libraries * `penpot.library.availableLibraries()` (returns: `Promise`) - Libraries available to connect * `penpot.library.connectLibrary(libraryId: string)` (returns: `Promise`) - Connect a new library - + Each `Library` object has: * `id: string` * `name: string` * `components: LibraryComponent[]` - Array of components * `colors: LibraryColor[]` - Array of colors * `typographies: LibraryTypography[]` - Array of typographies - + Using library components: * find a component in the library by name: const component: LibraryComponent = library.components.find(comp => comp.name.includes('Button')); - * create a new instance of the component on the current page: + * create a new instance of the component on the current page: const instance: Shape = component.instance(); This returns a `Shape` (often a `Board` containing child elements). After instantiation, modify the instance's properties as desired. * get the reference to the main component shape: const mainShape: Shape = component.mainInstance(); - + Adding assets to a library: * const newColor: LibraryColor = penpot.library.local.createColor(); newColor.name = 'Brand Primary'; From 56e369a1c0b0bb1d40e819fcdca01a147a64b004 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Mon, 9 Feb 2026 15:36:39 +0100 Subject: [PATCH 08/22] :sparkles: Add helper functions for token exploration Extend PenpotUtils with helper functions for token exploration/discovery and describe them in the system prompt --- mcp/packages/plugin/src/PenpotUtils.ts | 86 ++++++++++++++++++++++++++ mcp/packages/server/data/prompts.yml | 13 ++-- 2 files changed, 92 insertions(+), 7 deletions(-) diff --git a/mcp/packages/plugin/src/PenpotUtils.ts b/mcp/packages/plugin/src/PenpotUtils.ts index d5044e658a..61477a185d 100644 --- a/mcp/packages/plugin/src/PenpotUtils.ts +++ b/mcp/packages/plugin/src/PenpotUtils.ts @@ -422,4 +422,90 @@ export class PenpotUtils { throw new Error(`Unsupported export mode: ${mode}`); } } + + /** + * Finds all tokens that match the given name across all token sets. + * + * @param name - The name of the token to search for (case-sensitive exact match) + * @returns An array of all matching tokens (may be empty) + */ + public static findTokensByName(name: string): any[] { + const tokens: any[] = []; + const tokenCatalog = penpot.library.local.tokens; + + for (const set of tokenCatalog.sets) { + for (const token of set.tokens) { + if (token.name === name) { + tokens.push(token); + } + } + } + + return tokens; + } + + /** + * Finds the first token that matches the given name across all token sets. + * + * @param name - The name of the token to search for (case-sensitive exact match) + * @returns The first matching token, or null if not found + */ + public static findTokenByName(name: string): any | null { + const tokenCatalog = penpot.library.local.tokens; + + for (const set of tokenCatalog.sets) { + for (const token of set.tokens) { + if (token.name === name) { + return token; + } + } + } + + return null; + } + + /** + * Gets the token set that contains the given token. + * + * @param token - The token whose set to find + * @returns The TokenSet containing this token, or null if not found + */ + public static getTokenSet(token: any): any | null { + const tokenCatalog = penpot.library.local.tokens; + + for (const set of tokenCatalog.sets) { + if (set.tokens.includes(token)) { + return set; + } + } + + return null; + } + + /** + * Generates an overview of all tokens organized by token set name, token type, and token name. + * The result is a nested object structure: {tokenSetName: {tokenType: [tokenName, ...]}}. + * + * @returns An object mapping token set names to objects that map token types to arrays of token names + */ + public static tokenOverview(): Record> { + const overview: Record> = {}; + const tokenCatalog = penpot.library.local.tokens; + + for (const set of tokenCatalog.sets) { + const setOverview: Record = {}; + + for (const token of set.tokens) { + const tokenType = token.type; + if (!setOverview[tokenType]) { + setOverview[tokenType] = []; + } + setOverview[tokenType].push(token.name); + } + + overview[set.name] = setOverview; + } + + return overview; + } } diff --git a/mcp/packages/server/data/prompts.yml b/mcp/packages/server/data/prompts.yml index c79094b473..450848cc74 100644 --- a/mcp/packages/server/data/prompts.yml +++ b/mcp/packages/server/data/prompts.yml @@ -177,6 +177,7 @@ initial_instructions: | General-purpose utility for analyzing/validating descendants Calls evaluator on each descendant; collects non-null/undefined results Powerful pattern: evaluator can return corrector functions or diagnostic data + * Further functions for specific tasks (described in the sections below) General pointers for working with Penpot designs: * Prefer `penpotUtils` helper functions — avoid reimplementing shape searching. @@ -291,19 +292,17 @@ initial_instructions: | * `type: TokenType` Discovering tokens: - ```javascript - for (const set of penpot.library.local.tokens.sets) { - const token = set.tokens.find(t => t.name === 'color.base.white'); - if (token) { /* found it */ } - } - ``` + * `penpotUtils.tokenOverview()`: Maps from token set name to a mapping from token type to list of token names + * `penpotUtils.findTokenByName(name: string): Token | null`: Finds the first applicable token matching the given name + * `penpotUtils.findTokensByName(name: string): Token[]`: Finds all tokens that match the given name across all token sets + * `penpotUtils.getTokenSet(token: Token): TokenSet | null`: Gets the token set that contains the given token Applying tokens: * `shape.applyToken(token)` - Apply to shape * `token.applyToShapes(shapes)` or `token.applyToSelected()` - Apply from token * Application is **asynchronous** (wait for ~100ms to see the effects) * After application: - - `shape.tokens` returns `{ propertyName: "token.name" }` + - `shape.tokens` returns a mapping `{ propertyName: "token.name" }` - The properties that the tokens control will reflect the token's resolved value. Removing tokens: From bb4d0322d8670f0602aebf0eadaf74773c8ec7ab Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Mon, 9 Feb 2026 15:41:25 +0100 Subject: [PATCH 09/22] :construction: Temporarily add ts-ignore statements This shall be reverted once the new API types are published --- mcp/packages/plugin/src/PenpotUtils.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/mcp/packages/plugin/src/PenpotUtils.ts b/mcp/packages/plugin/src/PenpotUtils.ts index 61477a185d..602ac3327c 100644 --- a/mcp/packages/plugin/src/PenpotUtils.ts +++ b/mcp/packages/plugin/src/PenpotUtils.ts @@ -431,6 +431,7 @@ export class PenpotUtils { */ public static findTokensByName(name: string): any[] { const tokens: any[] = []; + // @ts-ignore const tokenCatalog = penpot.library.local.tokens; for (const set of tokenCatalog.sets) { @@ -451,6 +452,7 @@ export class PenpotUtils { * @returns The first matching token, or null if not found */ public static findTokenByName(name: string): any | null { + // @ts-ignore const tokenCatalog = penpot.library.local.tokens; for (const set of tokenCatalog.sets) { @@ -471,6 +473,7 @@ export class PenpotUtils { * @returns The TokenSet containing this token, or null if not found */ public static getTokenSet(token: any): any | null { + // @ts-ignore const tokenCatalog = penpot.library.local.tokens; for (const set of tokenCatalog.sets) { @@ -490,6 +493,7 @@ export class PenpotUtils { */ public static tokenOverview(): Record> { const overview: Record> = {}; + // @ts-ignore const tokenCatalog = penpot.library.local.tokens; for (const set of tokenCatalog.sets) { From d4d5009a3d1699dc84e8eaf025927f90eafc9c27 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Mon, 9 Feb 2026 17:11:38 +0100 Subject: [PATCH 10/22] :sparkles: Improve prompts on token application --- mcp/packages/server/data/prompts.yml | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/mcp/packages/server/data/prompts.yml b/mcp/packages/server/data/prompts.yml index 450848cc74..aae5562e5d 100644 --- a/mcp/packages/server/data/prompts.yml +++ b/mcp/packages/server/data/prompts.yml @@ -298,8 +298,17 @@ initial_instructions: | * `penpotUtils.getTokenSet(token: Token): TokenSet | null`: Gets the token set that contains the given token Applying tokens: - * `shape.applyToken(token)` - Apply to shape - * `token.applyToShapes(shapes)` or `token.applyToSelected()` - Apply from token + * `shape.applyToken(token, properties: undefined | TokenProperty[])` - Apply a token to a shape for one or more properties + (if properties is undefined, use a default property based on the token type - not usually recommended). + `TokenProperty` is a union type; here are some of the possible values: + - "all": applies the token to all properties it can control + - TokenBorderRadiusProps: "r1", "r2", "r3", "r4" + - TokenColorProps: "fill", "stroke" + - TokenDimensionProps: "x", "y", "stroke-width" + - TokenNumberProps: "rotation", "line-height" + - TokenSizingProps: "width", "height", "layout-item-min-w", "layout-item-max-w", "layout-item-min-h", "layout-item-max-h" + - TokenSpacingProps: "row-gap", "column-gap", "p1", "p2", "p3", "p4", "m1", "m2", "m3", "m4" + * `token.applyToShapes(shapes, properties)` - Apply from token * Application is **asynchronous** (wait for ~100ms to see the effects) * After application: - `shape.tokens` returns a mapping `{ propertyName: "token.name" }` From 44657c95dfc2db95e70f5717decfb8fae7b69989 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Mon, 9 Feb 2026 17:26:10 +0100 Subject: [PATCH 11/22] :recycle: Rename prompts.yml -> initial_instructions.md --- mcp/packages/server/data/{prompts.yml => initial_instructions.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename mcp/packages/server/data/{prompts.yml => initial_instructions.md} (100%) diff --git a/mcp/packages/server/data/prompts.yml b/mcp/packages/server/data/initial_instructions.md similarity index 100% rename from mcp/packages/server/data/prompts.yml rename to mcp/packages/server/data/initial_instructions.md From 024aedc3caf9eb2c6625dc2df930da3ef4b2569c Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Mon, 9 Feb 2026 17:27:29 +0100 Subject: [PATCH 12/22] :recycle: Convert prompt content to markdown format --- .../server/data/initial_instructions.md | 534 +++++++++--------- 1 file changed, 265 insertions(+), 269 deletions(-) diff --git a/mcp/packages/server/data/initial_instructions.md b/mcp/packages/server/data/initial_instructions.md index aae5562e5d..151cf29897 100644 --- a/mcp/packages/server/data/initial_instructions.md +++ b/mcp/packages/server/data/initial_instructions.md @@ -1,322 +1,318 @@ -# Prompts configuration for Penpot MCP Server -# This file contains various prompts and instructions that can be used by the server +You have access to Penpot tools in order to interact with a Penpot design project directly. +As a precondition, the user must connect the Penpot design project to the MCP server using the Penpot MCP Plugin. -initial_instructions: | - You have access to Penpot tools in order to interact with a Penpot design project directly. - As a precondition, the user must connect the Penpot design project to the MCP server using the Penpot MCP Plugin. +IMPORTANT: When transferring styles from a Penpot design to code, make sure that you strictly adhere to the design. + NEVER make assumptions about missing values and don't get overly creative (e.g. don't pick your own colours and stick to + non-creative defaults such as white/black if you are lacking information). - IMPORTANT: When transferring styles from a Penpot design to code, make sure that you strictly adhere to the design. - NEVER make assumptions about missing values and don't get overly creative (e.g. don't pick your own colours and stick to - non-creative defaults such as white/black if you are lacking information). +# Executing Code - # Executing Code +One of your key tools is the `execute_code` tool, which allows you to run JavaScript code using the Penpot Plugin API +directly in the connected project. - One of your key tools is the `execute_code` tool, which allows you to run JavaScript code using the Penpot Plugin API - directly in the connected project. +VERY IMPORTANT: When writing code, NEVER LOG INFORMATION YOU ARE ALSO RETURNING. It would duplicate the information you receive! - VERY IMPORTANT: When writing code, NEVER LOG INFORMATION YOU ARE ALSO RETURNING. It would duplicate the information you receive! +To execute code correctly, you need to understand the Penpot Plugin API. You can retrieve API documentation via +the `penpot_api_info` tool. - To execute code correctly, you need to understand the Penpot Plugin API. You can retrieve API documentation via - the `penpot_api_info` tool. +This is the full list of types/interfaces in the Penpot API: $api_types - This is the full list of types/interfaces in the Penpot API: $api_types +You use the `storage` object extensively to store data and utility functions you define across tool calls. +This allows you to inspect intermediate results while still being able to build on them in subsequent code executions. - You use the `storage` object extensively to store data and utility functions you define across tool calls. - This allows you to inspect intermediate results while still being able to build on them in subsequent code executions. +# The Structure of Penpot Designs - # The Structure of Penpot Designs +A Penpot design ultimately consists of shapes. +The type `Shape` is a union type, which encompasses both containers and low-level shapes. +Shapes in a Penpot design are organized hierarchically. +At the top level, a design project contains one or more `Page` objects. +Each `Page` contains a tree of elements. For a given instance `page`, its root shape is `page.root`. +A Page is frequently structured into boards. A `Board` is a high-level grouping element. +A `Group` is a more low-level grouping element used to organize low-level shapes into a logical unit. +Actual low-level shape types are `Rectangle`, `Path`, `Text`, `Ellipse`, `Image`, `Boolean`, and `SvgRaw`. +`ShapeBase` is a base type most shapes build upon. - A Penpot design ultimately consists of shapes. - The type `Shape` is a union type, which encompasses both containers and low-level shapes. - Shapes in a Penpot design are organized hierarchically. - At the top level, a design project contains one or more `Page` objects. - Each `Page` contains a tree of elements. For a given instance `page`, its root shape is `page.root`. - A Page is frequently structured into boards. A `Board` is a high-level grouping element. - A `Group` is a more low-level grouping element used to organize low-level shapes into a logical unit. - Actual low-level shape types are `Rectangle`, `Path`, `Text`, `Ellipse`, `Image`, `Boolean`, and `SvgRaw`. - `ShapeBase` is a base type most shapes build upon. +# Core Shape Properties and Methods - # Core Shape Properties and Methods +**Type**: + Any given shape contains information on the concrete type via its `type` field. - **Type**: - Any given shape contains information on the concrete type via its `type` field. +**Position and Dimensions**: + * The location properties `x` and `y` refer to the top left corner of a shape's bounding box in the absolute (Page) coordinate system. + These are writable - set them directly to position shapes. + * `parentX` and `parentY` (as well as `boardX` and `boardY`) are READ-ONLY computed properties showing position relative to parent/board. + To position relative to parent, use `penpotUtils.setParentXY(shape, parentX, parentY)` or manually set `shape.x = parent.x + parentX`. + * `width` and `height` are READ-ONLY. Use `resize(width, height)` method to change dimensions. + * `bounds` is a READ-ONLY property. Use `x`, `y` with `resize()` to modify shape bounds. - **Position and Dimensions**: - * The location properties `x` and `y` refer to the top left corner of a shape's bounding box in the absolute (Page) coordinate system. - These are writable - set them directly to position shapes. - * `parentX` and `parentY` (as well as `boardX` and `boardY`) are READ-ONLY computed properties showing position relative to parent/board. - To position relative to parent, use `penpotUtils.setParentXY(shape, parentX, parentY)` or manually set `shape.x = parent.x + parentX`. - * `width` and `height` are READ-ONLY. Use `resize(width, height)` method to change dimensions. - * `bounds` is a READ-ONLY property. Use `x`, `y` with `resize()` to modify shape bounds. +**Other Writable Properties**: + * `name` - Shape name + * `fills`, `strokes` - Styling properties + * `rotation`, `opacity`, `blocked`, `hidden`, `visible` - **Other Writable Properties**: - * `name` - Shape name - * `fills`, `strokes` - Styling properties - * `rotation`, `opacity`, `blocked`, `hidden`, `visible` +**Z-Order**: + * The z-order of shapes is determined by the order in the `children` array of the parent shape. + Therefore, when creating shapes that should be on top of each other, add them to the parent in the correct order + (i.e. add background shapes first, then foreground shapes later). + CRITICAL: NEVER use the broken function `appendChild` to achieve this, ALWAYS use `parent.insertChild(parent.children.length, shape)` + * To modify z-order after creation, use these methods: `bringToFront()`, `sendToBack()`, `bringForward()`, `sendBackward()`, + and, for precise control, `setParentIndex(index)` (0-based). - **Z-Order**: - * The z-order of shapes is determined by the order in the `children` array of the parent shape. - Therefore, when creating shapes that should be on top of each other, add them to the parent in the correct order - (i.e. add background shapes first, then foreground shapes later). - CRITICAL: NEVER use the broken function `appendChild` to achieve this, ALWAYS use `parent.insertChild(parent.children.length, shape)` - * To modify z-order after creation, use these methods: `bringToFront()`, `sendToBack()`, `bringForward()`, `sendBackward()`, - and, for precise control, `setParentIndex(index)` (0-based). +**Modification Methods**: + * `resize(width, height)` - Change dimensions (required for width/height since they're read-only) + * `rotate(angle, center?)` - Rotate shape + * `remove()` - Permanently destroy the shape (use only for deletion, NOT for reparenting) - **Modification Methods**: - * `resize(width, height)` - Change dimensions (required for width/height since they're read-only) - * `rotate(angle, center?)` - Rotate shape - * `remove()` - Permanently destroy the shape (use only for deletion, NOT for reparenting) +**Hierarchical Structure**: + * `parent` - The parent shape (null for root shapes) + Note: Hierarchical nesting does not necessarily imply visual containment + * CRITICAL: To add children to a parent shape (e.g. a `Board`): + - ALWAYS use `parent.insertChild(index, shape)` to add a child, e.g. `parent.insertChild(parent.children.length, shape)` to append + - NEVER use `parent.appendChild(shape)` as it is BROKEN and will not insert in a predictable place (except in flex layout boards) + * Reparenting: `newParent.appendChild(shape)` or `newParent.insertChild(index, shape)` will move a shape to new parent + - Automatically removes the shape from its old parent + - Absolute x/y positions are preserved (use `penpotUtils.setParentXY` to adjust relative position) - **Hierarchical Structure**: - * `parent` - The parent shape (null for root shapes) - Note: Hierarchical nesting does not necessarily imply visual containment - * CRITICAL: To add children to a parent shape (e.g. a `Board`): - - ALWAYS use `parent.insertChild(index, shape)` to add a child, e.g. `parent.insertChild(parent.children.length, shape)` to append - - NEVER use `parent.appendChild(shape)` as it is BROKEN and will not insert in a predictable place (except in flex layout boards) - * Reparenting: `newParent.appendChild(shape)` or `newParent.insertChild(index, shape)` will move a shape to new parent - - Automatically removes the shape from its old parent - - Absolute x/y positions are preserved (use `penpotUtils.setParentXY` to adjust relative position) +Cloning: Use `shape.clone(): Shape` to create an exact duplicate (including all properties and children) of a shape; same position as original. - Cloning: Use `shape.clone(): Shape` to create an exact duplicate (including all properties and children) of a shape; same position as original. +# Images - # Images +The `Image` type is a legacy type. Images are now typically embedded in a `Fill`, with `fillImage` set to an +`ImageData` object, i.e. the `fills` property of of a shape (e.g. a `Rectangle`) will contain a fill where `fillImage` is set. +Use the `export_shape` and `import_image` tools to export and import images. - The `Image` type is a legacy type. Images are now typically embedded in a `Fill`, with `fillImage` set to an - `ImageData` object, i.e. the `fills` property of of a shape (e.g. a `Rectangle`) will contain a fill where `fillImage` is set. - Use the `export_shape` and `import_image` tools to export and import images. +# Layout Systems - # Layout Systems +Boards can have layout systems that automatically control the positioning and spacing of their children: - Boards can have layout systems that automatically control the positioning and spacing of their children: + * If a board has a layout system, then child positions are controlled by the layout system. + For every child, key properties of the child within the layout are stored in `child.layoutChild: LayoutChildProperties`: + - `absolute: boolean` - if true, child position is not controlled by layout system. x/y will set *relative* position within parent! + - margins (`topMargin`, `rightMargin`, `bottomMargin`, `leftMargin` or combined `verticalMargin`, `horizontalMargin`) + - sizing (`verticalSizing`, `horizontalSizing`: "fill" | "auto" | "fix") + - min/max sizes (`minWidth`, `maxWidth`, `minHeight`, `maxHeight`) + - `zIndex: number` (higher numbers on top) - * If a board has a layout system, then child positions are controlled by the layout system. - For every child, key properties of the child within the layout are stored in `child.layoutChild: LayoutChildProperties`: - - `absolute: boolean` - if true, child position is not controlled by layout system. x/y will set *relative* position within parent! - - margins (`topMargin`, `rightMargin`, `bottomMargin`, `leftMargin` or combined `verticalMargin`, `horizontalMargin`) - - sizing (`verticalSizing`, `horizontalSizing`: "fill" | "auto" | "fix") - - min/max sizes (`minWidth`, `maxWidth`, `minHeight`, `maxHeight`) - - `zIndex: number` (higher numbers on top) + * **Flex Layout**: A flexbox-style layout system + - Properties: `dir`, `rowGap`, `columnGap`, `alignItems`, `justifyContent`; + - `dir`: "row" | "column" | "row-reverse" | "column-reverse" + - Padding: `topPadding`, `rightPadding`, `bottomPadding`, `leftPadding`, or combined `verticalPadding`, `horizontalPadding` + - To modify spacing: adjust `rowGap` and `columnGap` properties, not individual child positions. + Optionally, adjust indivudual child margins via `child.layoutChild`. + - When a board has flex layout, + - child positions are controlled by the layout system, not by individual x/y coordinates (unless `child.layoutChild.absolute` is true); + appending or inserting children automatically positions them according to the layout rules. + - CRITICAL: For for dir="column" or dir="row", the order of the `children` array is reversed relative to the visual order! + Therefore, the element that appears first in the array, appears visually at the end (bottom/right) and vice versa. + ALWAYS BEAR IN MIND THAT THE CHILDREN ARRAY ORDER IS REVERSED FOR dir="column" OR dir="row"! + - CRITICAL: The FlexLayout method `board.flex.appendChild` is BROKEN. To append children to a flex layout board such that + they appear visually at the end, ALWAYS use the Board's method `board.appendChild(shape)`; it will insert at the front + of the `children` array for dir="column" or dir="row", which is what you want. So call it in the order of visual appearance. + To insert at a specific index, use `board.insertChild(index, shape)`, bearing in mind the reversed order for dir="column" + or dir="row". + - Add to a board with `board.addFlexLayout(): FlexLayout`; instance then accessible via `board.flex`. + IMPORTANT: When adding a flex layout to a container that already has children, + use `penpotUtils.addFlexLayout(container, dir)` instead! This preserves the existing visual order of children. + Otherwise, children will be arbitrarily reordered when the children order suddenly determines the display order. + - Check with: `if (board.flex) { ... }` - * **Flex Layout**: A flexbox-style layout system - - Properties: `dir`, `rowGap`, `columnGap`, `alignItems`, `justifyContent`; - - `dir`: "row" | "column" | "row-reverse" | "column-reverse" - - Padding: `topPadding`, `rightPadding`, `bottomPadding`, `leftPadding`, or combined `verticalPadding`, `horizontalPadding` - - To modify spacing: adjust `rowGap` and `columnGap` properties, not individual child positions. - Optionally, adjust indivudual child margins via `child.layoutChild`. - - When a board has flex layout, - - child positions are controlled by the layout system, not by individual x/y coordinates (unless `child.layoutChild.absolute` is true); - appending or inserting children automatically positions them according to the layout rules. - - CRITICAL: For for dir="column" or dir="row", the order of the `children` array is reversed relative to the visual order! - Therefore, the element that appears first in the array, appears visually at the end (bottom/right) and vice versa. - ALWAYS BEAR IN MIND THAT THE CHILDREN ARRAY ORDER IS REVERSED FOR dir="column" OR dir="row"! - - CRITICAL: The FlexLayout method `board.flex.appendChild` is BROKEN. To append children to a flex layout board such that - they appear visually at the end, ALWAYS use the Board's method `board.appendChild(shape)`; it will insert at the front - of the `children` array for dir="column" or dir="row", which is what you want. So call it in the order of visual appearance. - To insert at a specific index, use `board.insertChild(index, shape)`, bearing in mind the reversed order for dir="column" - or dir="row". - - Add to a board with `board.addFlexLayout(): FlexLayout`; instance then accessible via `board.flex`. - IMPORTANT: When adding a flex layout to a container that already has children, - use `penpotUtils.addFlexLayout(container, dir)` instead! This preserves the existing visual order of children. - Otherwise, children will be arbitrarily reordered when the children order suddenly determines the display order. - - Check with: `if (board.flex) { ... }` + * **Grid Layout**: A CSS grid-style layout system + - Add to a board with `board.addGridLayout(): GridLayout`; instance then accessibly via `board.grid`; + Check with: `if (board.grid) { ... }` + - Properties: `rows`, `columns`, `rowGap`, `columnGap` + - Children are positioned via 1-based row/column indices + - Add to grid via `board.flex.appendChild(shape, row, column)` + - Modify grid positioning after the fact via `shape.layoutCell: LayoutCellProperties` - * **Grid Layout**: A CSS grid-style layout system - - Add to a board with `board.addGridLayout(): GridLayout`; instance then accessibly via `board.grid`; - Check with: `if (board.grid) { ... }` - - Properties: `rows`, `columns`, `rowGap`, `columnGap` - - Children are positioned via 1-based row/column indices - - Add to grid via `board.flex.appendChild(shape, row, column)` - - Modify grid positioning after the fact via `shape.layoutCell: LayoutCellProperties` + * When working with boards: + - ALWAYS check if the board has a layout system before attempting to reposition children + - Modify layout properties (gaps, padding) instead of trying to set child x/y positions directly + - Layout systems override manual positioning of children - * When working with boards: - - ALWAYS check if the board has a layout system before attempting to reposition children - - Modify layout properties (gaps, padding) instead of trying to set child x/y positions directly - - Layout systems override manual positioning of children +# Text Elements - # Text Elements +The rendered content of `Text` element is given by the `characters` property. - The rendered content of `Text` element is given by the `characters` property. +To change the size of the text, change the `fontSize` property; applying `resize()` does NOT change the font size, +it only changes the formal bounding box; if the text does not fit it, it will overflow. +The bounding box is sized automatically as long as the `growType` property is set to "auto-width" or "auto-height". +`resize` always sets `growType` to "fixed", so ALWAYS set it back to "auto-*" if you want automatic sizing - otherwise the bounding box will be meaningless, with the text overflowing! +The auto-sizing is not immediate; sleep for a short time (100ms) if you want to read the updated bounding box. - To change the size of the text, change the `fontSize` property; applying `resize()` does NOT change the font size, - it only changes the formal bounding box; if the text does not fit it, it will overflow. - The bounding box is sized automatically as long as the `growType` property is set to "auto-width" or "auto-height". - `resize` always sets `growType` to "fixed", so ALWAYS set it back to "auto-*" if you want automatic sizing - otherwise the bounding box will be meaningless, with the text overflowing! - The auto-sizing is not immediate; sleep for a short time (100ms) if you want to read the updated bounding box. +# The `penpot` and `penpotUtils` Objects, Exploring Designs - # The `penpot` and `penpotUtils` Objects, Exploring Designs +A key object to use in your code is the `penpot` object (which is of type `Penpot`): + * `penpot.selection` provides the list of shapes the user has selected in the Penpot UI. + If it is unclear which elements to work on, you can ask the user to select them for you. + ALWAYS immediately copy the selected shape(s) into `storage`! Do not assume that the selection remains unchanged. + * `penpot.root` provides the root shape of the currently active page. + * Generation of CSS content for elements via `penpot.generateStyle` + * Generation of HTML/SVG content for elements via `penpot.generateMarkup` - A key object to use in your code is the `penpot` object (which is of type `Penpot`): - * `penpot.selection` provides the list of shapes the user has selected in the Penpot UI. - If it is unclear which elements to work on, you can ask the user to select them for you. - ALWAYS immediately copy the selected shape(s) into `storage`! Do not assume that the selection remains unchanged. - * `penpot.root` provides the root shape of the currently active page. - * Generation of CSS content for elements via `penpot.generateStyle` - * Generation of HTML/SVG content for elements via `penpot.generateMarkup` +For example, to generate CSS for the currently selected elements, you can execute this: + return penpot.generateStyle(penpot.selection, { type: "css", withChildren: true }); - For example, to generate CSS for the currently selected elements, you can execute this: - return penpot.generateStyle(penpot.selection, { type: "css", withChildren: true }); +CRITICAL: The `penpotUtils` object provides essential utilities - USE THESE INSTEAD OF WRITING YOUR OWN: + * getPages(): { id: string; name: string }[] + * getPageById(id: string): Page | null + * getPageByName(name: string): Page | null + * shapeStructure(shape: Shape, maxDepth: number | undefined = undefined): { id, name, type, children?, layout? } + Generates an overview structure of the given shape. + - children: recursive, limited by maxDepth + - layout: present if shape has flex/grid layout, contains { type: "flex" | "grid", ... } + * findShapeById(id: string): Shape | null + * findShape(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape | null + If no root is provided, search globally (in all pages). + * findShapes(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape[] + * isContainedIn(shape: Shape, container: Shape): boolean + Returns true iff shape is fully within the container's geometric bounds. + Note that a shape's bounds may not always reflect its actual visual content - descendants can overflow; check using analyzeDescendants (see below). + * setParentXY(shape: Shape, parentX: number, parentY: number): void + Sets shape position relative to its parent (since parentX/parentY are read-only) + * analyzeDescendants(root: Shape, evaluator: (root: Shape, descendant: Shape) => T | null | undefined, maxDepth?: number): Array<{ shape: Shape, result: T }> + General-purpose utility for analyzing/validating descendants + Calls evaluator on each descendant; collects non-null/undefined results + Powerful pattern: evaluator can return corrector functions or diagnostic data + * Further functions for specific tasks (described in the sections below) - CRITICAL: The `penpotUtils` object provides essential utilities - USE THESE INSTEAD OF WRITING YOUR OWN: - * getPages(): { id: string; name: string }[] - * getPageById(id: string): Page | null - * getPageByName(name: string): Page | null - * shapeStructure(shape: Shape, maxDepth: number | undefined = undefined): { id, name, type, children?, layout? } - Generates an overview structure of the given shape. - - children: recursive, limited by maxDepth - - layout: present if shape has flex/grid layout, contains { type: "flex" | "grid", ... } - * findShapeById(id: string): Shape | null - * findShape(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape | null - If no root is provided, search globally (in all pages). - * findShapes(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape[] - * isContainedIn(shape: Shape, container: Shape): boolean - Returns true iff shape is fully within the container's geometric bounds. - Note that a shape's bounds may not always reflect its actual visual content - descendants can overflow; check using analyzeDescendants (see below). - * setParentXY(shape: Shape, parentX: number, parentY: number): void - Sets shape position relative to its parent (since parentX/parentY are read-only) - * analyzeDescendants(root: Shape, evaluator: (root: Shape, descendant: Shape) => T | null | undefined, maxDepth?: number): Array<{ shape: Shape, result: T }> - General-purpose utility for analyzing/validating descendants - Calls evaluator on each descendant; collects non-null/undefined results - Powerful pattern: evaluator can return corrector functions or diagnostic data - * Further functions for specific tasks (described in the sections below) +General pointers for working with Penpot designs: + * Prefer `penpotUtils` helper functions — avoid reimplementing shape searching. + * To get an overview of a single page, use `penpotUtils.shapeStructure(page.root, 3)`. + Note that `penpot.root` refers to the current page only. When working across pages, first determine the relevant page(s). + * Use `penpotUtils.findShapes()` or `penpotUtils.findShape()` with predicates to locate elements efficiently. - General pointers for working with Penpot designs: - * Prefer `penpotUtils` helper functions — avoid reimplementing shape searching. - * To get an overview of a single page, use `penpotUtils.shapeStructure(page.root, 3)`. - Note that `penpot.root` refers to the current page only. When working across pages, first determine the relevant page(s). - * Use `penpotUtils.findShapes()` or `penpotUtils.findShape()` with predicates to locate elements efficiently. +Common tasks - Quick Reference (ALWAYS use penpotUtils for these): + * Find all images: + const images = penpotUtils.findShapes( + shape => shape.type === 'image' || shape.fills?.some(fill => fill.fillImage), + penpot.root + ); + * Find text elements: + const texts = penpotUtils.findShapes(shape => shape.type === 'text', penpot.root); + * Find (the first) shape with a given name: + const shape = penpotUtils.findShape(shape => shape.name === 'MyShape'); + * Get structure of current selection: + const structure = penpotUtils.shapeStructure(penpot.selection[0]); + * Find shapes in current selection/board: + const shapes = penpotUtils.findShapes(predicate, penpot.selection[0] || penpot.root); + * Validate/analyze descendants (returning corrector functions): + const fixes = penpotUtils.analyzeDescendants(board, (root, shape) => { + const xMod = shape.parentX % 4; + if (xMod !== 0) { + return () => penpotUtils.setParentXY(shape, Math.round(shape.parentX / 4) * 4, shape.parentY); + } + }); + fixes.forEach(f => f.result()); // Apply all fixes + * Find containment violations: + const violations = penpotUtils.analyzeDescendants(board, (root, shape) => { + return !penpotUtils.isContainedIn(shape, root) ? 'outside-bounds' : null; + }); + Always validate against the root container that is supposed to contain the shapes. - Common tasks - Quick Reference (ALWAYS use penpotUtils for these): - * Find all images: - const images = penpotUtils.findShapes( - shape => shape.type === 'image' || shape.fills?.some(fill => fill.fillImage), - penpot.root - ); - * Find text elements: - const texts = penpotUtils.findShapes(shape => shape.type === 'text', penpot.root); - * Find (the first) shape with a given name: - const shape = penpotUtils.findShape(shape => shape.name === 'MyShape'); - * Get structure of current selection: - const structure = penpotUtils.shapeStructure(penpot.selection[0]); - * Find shapes in current selection/board: - const shapes = penpotUtils.findShapes(predicate, penpot.selection[0] || penpot.root); - * Validate/analyze descendants (returning corrector functions): - const fixes = penpotUtils.analyzeDescendants(board, (root, shape) => { - const xMod = shape.parentX % 4; - if (xMod !== 0) { - return () => penpotUtils.setParentXY(shape, Math.round(shape.parentX / 4) * 4, shape.parentY); - } - }); - fixes.forEach(f => f.result()); // Apply all fixes - * Find containment violations: - const violations = penpotUtils.analyzeDescendants(board, (root, shape) => { - return !penpotUtils.isContainedIn(shape, root) ? 'outside-bounds' : null; - }); - Always validate against the root container that is supposed to contain the shapes. +# Visual Inspection of Designs - # Visual Inspection of Designs +For many tasks, it can be critical to visually inspect the design. Remember to use the `export_shape` tool for this purpose! - For many tasks, it can be critical to visually inspect the design. Remember to use the `export_shape` tool for this purpose! +# Revising Designs - # Revising Designs +* Before applying design changes, ask: "Would a designer consider this appropriate?" +* When dealing with containment issues, ask: Is the parent too small OR is the child too large? + Container sizes are usually intentional, check content first. +* Check for reasonable font sizes and typefaces +* The use of flex layouts is encouraged for cases where elements are arranged in rows or columns with consistent spacing/positioning. + Consider converting boards to flex layout when appropriate. - * Before applying design changes, ask: "Would a designer consider this appropriate?" - * When dealing with containment issues, ask: Is the parent too small OR is the child too large? - Container sizes are usually intentional, check content first. - * Check for reasonable font sizes and typefaces - * The use of flex layouts is encouraged for cases where elements are arranged in rows or columns with consistent spacing/positioning. - Consider converting boards to flex layout when appropriate. +# Asset Libraries - # Asset Libraries +Libraries in Penpot are collections of reusable design assets (components, colors, and typographies) that can be shared across files. +They enable design systems and consistent styling across projects. +Each Penpot file has its own local library and can connect to external shared libraries. - Libraries in Penpot are collections of reusable design assets (components, colors, and typographies) that can be shared across files. - They enable design systems and consistent styling across projects. - Each Penpot file has its own local library and can connect to external shared libraries. +Accessing libraries: via `penpot.library` (type: `LibraryContext`): + * `penpot.library.local` (type: `Library`) - The current file's own library + * `penpot.library.connected` (type: `Library[]`) - Array of already-connected external libraries + * `penpot.library.availableLibraries()` (returns: `Promise`) - Libraries available to connect + * `penpot.library.connectLibrary(libraryId: string)` (returns: `Promise`) - Connect a new library - Accessing libraries: via `penpot.library` (type: `LibraryContext`): - * `penpot.library.local` (type: `Library`) - The current file's own library - * `penpot.library.connected` (type: `Library[]`) - Array of already-connected external libraries - * `penpot.library.availableLibraries()` (returns: `Promise`) - Libraries available to connect - * `penpot.library.connectLibrary(libraryId: string)` (returns: `Promise`) - Connect a new library +Each `Library` object has: + * `id: string` + * `name: string` + * `components: LibraryComponent[]` - Array of components + * `colors: LibraryColor[]` - Array of colors + * `typographies: LibraryTypography[]` - Array of typographies - Each `Library` object has: - * `id: string` - * `name: string` - * `components: LibraryComponent[]` - Array of components - * `colors: LibraryColor[]` - Array of colors - * `typographies: LibraryTypography[]` - Array of typographies +Using library components: + * find a component in the library by name: + const component: LibraryComponent = library.components.find(comp => comp.name.includes('Button')); + * create a new instance of the component on the current page: + const instance: Shape = component.instance(); + This returns a `Shape` (often a `Board` containing child elements). + After instantiation, modify the instance's properties as desired. + * get the reference to the main component shape: + const mainShape: Shape = component.mainInstance(); - Using library components: - * find a component in the library by name: - const component: LibraryComponent = library.components.find(comp => comp.name.includes('Button')); - * create a new instance of the component on the current page: - const instance: Shape = component.instance(); - This returns a `Shape` (often a `Board` containing child elements). - After instantiation, modify the instance's properties as desired. - * get the reference to the main component shape: - const mainShape: Shape = component.mainInstance(); +Adding assets to a library: + * const newColor: LibraryColor = penpot.library.local.createColor(); + newColor.name = 'Brand Primary'; + newColor.color = '#0066FF'; + * const newTypo: LibraryTypography = penpot.library.local.createTypography(); + newTypo.name = 'Heading Large'; + // Set typography properties... + * const shapes: Shape[] = [shape1, shape2]; // shapes to include + const newComponent: LibraryComponent = penpot.library.local.createComponent(shapes); + newComponent.name = 'My Button'; - Adding assets to a library: - * const newColor: LibraryColor = penpot.library.local.createColor(); - newColor.name = 'Brand Primary'; - newColor.color = '#0066FF'; - * const newTypo: LibraryTypography = penpot.library.local.createTypography(); - newTypo.name = 'Heading Large'; - // Set typography properties... - * const shapes: Shape[] = [shape1, shape2]; // shapes to include - const newComponent: LibraryComponent = penpot.library.local.createComponent(shapes); - newComponent.name = 'My Button'; +# Design Tokens - # Design Tokens +Design tokens are reusable design values (colors, dimensions, typography, etc.) for consistent styling. - Design tokens are reusable design values (colors, dimensions, typography, etc.) for consistent styling. +The token library: `penpot.library.local.tokens` (type: `TokenCatalog`) + * `sets: TokenSet[]` - Token collections (order matters for precedence) + * `themes: TokenTheme[]` - Presets that activate specific sets + * `addSet(name: string): TokenSet` - Create new set + * `addTheme(group: string, name: string): TokenTheme` - Create new theme - The token library: `penpot.library.local.tokens` (type: `TokenCatalog`) - * `sets: TokenSet[]` - Token collections (order matters for precedence) - * `themes: TokenTheme[]` - Presets that activate specific sets - * `addSet(name: string): TokenSet` - Create new set - * `addTheme(group: string, name: string): TokenTheme` - Create new theme +`TokenSet` contains tokens with unique names: + * `active: boolean` - Only active sets affect shapes; use `set.toggleActive()` to change: `if (!set.active) set.toggleActive();` + * `tokens: Token[]` - All tokens in set + * `addToken(type: TokenType, name: string, value: TokenValueString): Token` - Creates a token, adding it to the set. + - `TokenType`: "color" | "dimension" | "spacing" | "typography" | "shadow" | "opacity" | "borderRadius" | "borderWidth" | "fontWeights" | "fontSizes" | "fontFamilies" | "letterSpacing" | "textDecoration" | "textCase" + - Examples: + const token = set.addToken("color", "color.primary", "#0066FF"); // direct value + const token2 = set.addToken("color", "color.accent", "{color.primary}"); // reference to another token - `TokenSet` contains tokens with unique names: - * `active: boolean` - Only active sets affect shapes; use `set.toggleActive()` to change: `if (!set.active) set.toggleActive();` - * `tokens: Token[]` - All tokens in set - * `addToken(type: TokenType, name: string, value: TokenValueString): Token` - Creates a token, adding it to the set. - - `TokenType`: "color" | "dimension" | "spacing" | "typography" | "shadow" | "opacity" | "borderRadius" | "borderWidth" | "fontWeights" | "fontSizes" | "fontFamilies" | "letterSpacing" | "textDecoration" | "textCase" - - Examples: - const token = set.addToken("color", "color.primary", "#0066FF"); // direct value - const token2 = set.addToken("color", "color.accent", "{color.primary}"); // reference to another token +`Token`: + * `name: string` - Token name (may include group path like "color.base.white") + * `value: string | TokenValueString` - Raw value (may be direct value or reference to another token like "{color.primary}") + * `resolvedValue` - Computed final value (follows references) + * `type: TokenType` - `Token`: - * `name: string` - Token name (may include group path like "color.base.white") - * `value: string | TokenValueString` - Raw value (may be direct value or reference to another token like "{color.primary}") - * `resolvedValue` - Computed final value (follows references) - * `type: TokenType` +Discovering tokens: + * `penpotUtils.tokenOverview()`: Maps from token set name to a mapping from token type to list of token names + * `penpotUtils.findTokenByName(name: string): Token | null`: Finds the first applicable token matching the given name + * `penpotUtils.findTokensByName(name: string): Token[]`: Finds all tokens that match the given name across all token sets + * `penpotUtils.getTokenSet(token: Token): TokenSet | null`: Gets the token set that contains the given token - Discovering tokens: - * `penpotUtils.tokenOverview()`: Maps from token set name to a mapping from token type to list of token names - * `penpotUtils.findTokenByName(name: string): Token | null`: Finds the first applicable token matching the given name - * `penpotUtils.findTokensByName(name: string): Token[]`: Finds all tokens that match the given name across all token sets - * `penpotUtils.getTokenSet(token: Token): TokenSet | null`: Gets the token set that contains the given token +Applying tokens: + * `shape.applyToken(token, properties: undefined | TokenProperty[])` - Apply a token to a shape for one or more properties + (if properties is undefined, use a default property based on the token type - not usually recommended). + `TokenProperty` is a union type; here are some of the possible values: + - "all": applies the token to all properties it can control + - TokenBorderRadiusProps: "r1", "r2", "r3", "r4" + - TokenColorProps: "fill", "stroke" + - TokenDimensionProps: "x", "y", "stroke-width" + - TokenNumberProps: "rotation", "line-height" + - TokenSizingProps: "width", "height", "layout-item-min-w", "layout-item-max-w", "layout-item-min-h", "layout-item-max-h" + - TokenSpacingProps: "row-gap", "column-gap", "p1", "p2", "p3", "p4", "m1", "m2", "m3", "m4" + * `token.applyToShapes(shapes, properties)` - Apply from token + * Application is **asynchronous** (wait for ~100ms to see the effects) + * After application: + - `shape.tokens` returns a mapping `{ propertyName: "token.name" }` + - The properties that the tokens control will reflect the token's resolved value. - Applying tokens: - * `shape.applyToken(token, properties: undefined | TokenProperty[])` - Apply a token to a shape for one or more properties - (if properties is undefined, use a default property based on the token type - not usually recommended). - `TokenProperty` is a union type; here are some of the possible values: - - "all": applies the token to all properties it can control - - TokenBorderRadiusProps: "r1", "r2", "r3", "r4" - - TokenColorProps: "fill", "stroke" - - TokenDimensionProps: "x", "y", "stroke-width" - - TokenNumberProps: "rotation", "line-height" - - TokenSizingProps: "width", "height", "layout-item-min-w", "layout-item-max-w", "layout-item-min-h", "layout-item-max-h" - - TokenSpacingProps: "row-gap", "column-gap", "p1", "p2", "p3", "p4", "m1", "m2", "m3", "m4" - * `token.applyToShapes(shapes, properties)` - Apply from token - * Application is **asynchronous** (wait for ~100ms to see the effects) - * After application: - - `shape.tokens` returns a mapping `{ propertyName: "token.name" }` - - The properties that the tokens control will reflect the token's resolved value. +Removing tokens: + Simply set the respective property directly - token binding is automatically removed, e.g. + shape.fills = [{ fillColor: "#000000", fillOpacity: 1 }]; // Removes fill token - Removing tokens: - Simply set the respective property directly - token binding is automatically removed, e.g. - shape.fills = [{ fillColor: "#000000", fillOpacity: 1 }]; // Removes fill token - - -- - You have hereby read the 'Penpot High-Level Overview' and need not use a tool to read it again. +-- +You have hereby read the 'Penpot High-Level Overview' and need not use a tool to read it again. From 71507fb9b714088fc3aed6b46bd1e5cc80f6e8f4 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Mon, 9 Feb 2026 17:25:21 +0100 Subject: [PATCH 13/22] :recycle: Adjust ConfigurationLoader to use markdown file instead of yml --- .../server/src/ConfigurationLoader.ts | 61 +++---------------- 1 file changed, 9 insertions(+), 52 deletions(-) diff --git a/mcp/packages/server/src/ConfigurationLoader.ts b/mcp/packages/server/src/ConfigurationLoader.ts index 0a24d88210..390522ff24 100644 --- a/mcp/packages/server/src/ConfigurationLoader.ts +++ b/mcp/packages/server/src/ConfigurationLoader.ts @@ -1,18 +1,7 @@ -import { readFileSync, existsSync } from "fs"; -import { join, dirname } from "path"; -import { fileURLToPath } from "url"; -import yaml from "js-yaml"; +import { existsSync, readFileSync } from "fs"; +import { join } from "path"; import { createLogger } from "./logger.js"; -/** - * Interface defining the structure of the prompts configuration file. - */ -export interface PromptsConfig { - /** Initial instructions displayed when the server starts or connects to a client */ - initial_instructions: string; - [key: string]: any; // Allow for future extension with additional prompt types -} - /** * Configuration loader for prompts and server settings. * @@ -23,7 +12,7 @@ export interface PromptsConfig { export class ConfigurationLoader { private readonly logger = createLogger("ConfigurationLoader"); private readonly baseDir: string; - private promptsConfig: PromptsConfig | null = null; + private initialInstructions: string; /** * Creates a new configuration loader instance. @@ -32,34 +21,14 @@ export class ConfigurationLoader { */ constructor(baseDir: string) { this.baseDir = baseDir; + this.initialInstructions = this.loadFileContent(join(this.baseDir, "data", "initial_instructions.md")); } - /** - * Loads the prompts configuration from the YAML file. - * - * Reads and parses the prompts.yml file, providing cached access - * to configuration values on subsequent calls. - * - * @returns The parsed prompts configuration object - */ - public getPromptsConfig(): PromptsConfig { - if (this.promptsConfig !== null) { - return this.promptsConfig; + private loadFileContent(filePath: string): string { + if (!existsSync(filePath)) { + throw new Error(`Configuration file not found at ${filePath}`); } - - const promptsPath = join(this.baseDir, "data", "prompts.yml"); - - if (!existsSync(promptsPath)) { - throw new Error(`Prompts configuration file not found at ${promptsPath}, using defaults`); - } - - const fileContent = readFileSync(promptsPath, "utf8"); - const parsedConfig = yaml.load(fileContent) as PromptsConfig; - - this.promptsConfig = parsedConfig || {}; - this.logger.info(`Loaded prompts configuration from ${promptsPath}`); - - return this.promptsConfig; + return readFileSync(filePath, "utf8"); } /** @@ -68,18 +37,6 @@ export class ConfigurationLoader { * @returns The initial instructions string, or undefined if not configured */ public getInitialInstructions(): string { - const config = this.getPromptsConfig(); - return config.initial_instructions; - } - - /** - * Reloads the configuration from disk. - * - * Forces a fresh read of the configuration file on the next access, - * useful for development or when configuration files are updated at runtime. - */ - public reloadConfiguration(): void { - this.promptsConfig = null; - this.logger.info("Configuration cache cleared, will reload on next access"); + return this.initialInstructions; } } From a674b5f91433e25a8781945fe1ea729562359870 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Tue, 10 Feb 2026 12:53:20 +0100 Subject: [PATCH 14/22] :books: Add instructions on running only the docs server --- mcp/types-generator/README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/mcp/types-generator/README.md b/mcp/types-generator/README.md index dda1c49df6..f72656eba3 100644 --- a/mcp/types-generator/README.md +++ b/mcp/types-generator/README.md @@ -45,4 +45,9 @@ run the `build:types` script in the parent directory, i.e. pnpm run build:types This will spawn a local HTTP server on port 9090 and run the `prepare_api_docs.py` script with the -URL `http://localhost:9090`. +URL `http://localhost:9090`. +To run only the server without executing the script, run + + cd .. + caddy file-server --root ../plugins/dist/doc/ --listen 127.0.0.1:9090 + From 76289df32c18df774c020f7f849488f301466a87 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Tue, 10 Feb 2026 14:03:40 +0100 Subject: [PATCH 15/22] :sparkles: Establish compatibility with new member anchors (h3 instead of a tag) --- mcp/types-generator/prepare_api_docs.py | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/mcp/types-generator/prepare_api_docs.py b/mcp/types-generator/prepare_api_docs.py index f5f4c72212..fafe0065e8 100644 --- a/mcp/types-generator/prepare_api_docs.py +++ b/mcp/types-generator/prepare_api_docs.py @@ -201,11 +201,21 @@ class PenpotAPIDocsProcessor: members_in_group = {} members[members_type] = members_in_group for member_tag in el.find_all(attrs={"class": "tsd-member"}): + # determine member name + member_name = None member_anchor = member_tag.find("a", attrs={"class": "tsd-anchor"}, recursive=False) - member_name = member_anchor.attrs["id"] - member_heading = member_tag.find("h3") + if member_anchor is not None: + member_name = member_anchor.attrs["id"] + else: + member_h3 = member_tag.find("h3", recursive=False) + if member_h3 is not None: + h3_span = member_h3.find("span", recursive=False) + if h3_span is not None: + member_name = h3_span.get_text().strip() + assert member_name is not None, f"Could not determine member name for\n{member_tag}" # extract tsd-tag info (e.g., "Readonly") from the heading and reinsert it into the signature, # where we want to see it. The heading is removed, as it is redundant. + member_heading = member_tag.find("h3") if member_heading: tags_in_heading = member_heading.find_all(attrs={"class": "tsd-tag"}) if tags_in_heading: From 8de510d1c60b200320e42bc6906a0fa35602ef47 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Tue, 10 Feb 2026 14:04:12 +0100 Subject: [PATCH 16/22] :bug: Fix PenpotAPIDocsProcessor not requiring the url parameter * Add additional constant for the PROD url * Adapt the debug function to use a URL * Improve logging --- mcp/types-generator/prepare_api_docs.py | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/mcp/types-generator/prepare_api_docs.py b/mcp/types-generator/prepare_api_docs.py index fafe0065e8..166a790378 100644 --- a/mcp/types-generator/prepare_api_docs.py +++ b/mcp/types-generator/prepare_api_docs.py @@ -135,7 +135,7 @@ class YamlConverter: class PenpotAPIDocsProcessor: - def __init__(self, url=None): + def __init__(self, url: str): self.md_converter = PenpotAPIContentMarkdownConverter() self.base_url = url self.types: dict[str, TypeInfo] = {} @@ -157,7 +157,7 @@ class PenpotAPIDocsProcessor: type_name = href.split("/")[-1].replace(".html", "") log.info("Processing page: %s", type_name) type_info = self.process_page(href, type_name) - print(f"Adding '{type_name}' with {type_info}") + log.info(f"Adding '{type_name}' with {type_info}") self.types[type_name] = type_info # add type reference information @@ -247,25 +247,29 @@ class PenpotAPIDocsProcessor: ) -DEFAULT_API_DOCS_URL = "http://localhost:9090" +LOCAL_API_DOCS_URL = "http://localhost:9090" +PROD_API_DOCS_URL = "https://doc.plugins.penpot.app" +DEFAULT_API_DOCS_URL = LOCAL_API_DOCS_URL + def main(): target_dir = Path(__file__).parent.parent / "packages" / "server" / "data" url = sys.argv[1] if len(sys.argv) > 1 else DEFAULT_API_DOCS_URL - print("Fetching plugin data from: {}".format(url)) + log.info("Fetching plugin data from: {}".format(url)) PenpotAPIDocsProcessor(url).run(target_dir=str(target_dir)) -def debug_type_conversion(rel_url: str): +def debug_type_conversion(rel_url: str, base_url: str): """ This function is for debugging purposes only. It processes a single type page and prints the converted markdown to the console. + :param base_url: base URL of the API docs (e.g., "http://localhost:9090") :param rel_url: relative URL of the type page (e.g., "interfaces/ShapeBase") """ - type_name = rel_url.split("/")[-1] - processor = PenpotAPIDocsProcessor() + type_name = rel_url.split("/")[-1].replace(".html", "") + processor = PenpotAPIDocsProcessor(url=base_url) type_info = processor.process_page(rel_url, type_name) print(f"--- overview ---\n{type_info.overview}\n") for member_type, members in type_info.members.items(): @@ -275,5 +279,5 @@ def debug_type_conversion(rel_url: str): if __name__ == '__main__': - # debug_type_conversion("interfaces/LayoutChildProperties") + # debug_type_conversion("interfaces/Path.html", LOCAL_API_DOCS_URL) logging.run_main(main) From 154602581481e6f9c14690345252472f9e9a47db Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Tue, 10 Feb 2026 14:46:00 +0100 Subject: [PATCH 17/22] :sparkles: Avoid certain
    elements with single
  • generating bullets --- mcp/types-generator/prepare_api_docs.py | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/mcp/types-generator/prepare_api_docs.py b/mcp/types-generator/prepare_api_docs.py index 166a790378..a01ec4e6ef 100644 --- a/mcp/types-generator/prepare_api_docs.py +++ b/mcp/types-generator/prepare_api_docs.py @@ -80,6 +80,25 @@ class PenpotAPIContentMarkdownConverter(MarkdownConverter): # return as code block return f"\n```\n{soup.get_text()}\n```\n\n" + # check for
      tag with a single
    • : move the
    • content a
      and process it as normal, + # to avoid single list items with superfluous bullet points and indentations. + # This happens frequently, especially in new versions of the docs generator, e.g. for methods: + #
        + #
      • + # + #
        • + #
      + if node.name == "ul" and "class" in node.attrs and "tsd-signatures" in node.attrs["class"]: + soup_ul = soup.find("ul") + if soup_ul is not None: + li_children = soup_ul.find_all("li", recursive=False) + if len(li_children) == 1: + # create a new div with the content of the single li + new_div = soup.new_tag("div") + for child in list(li_children[0].contents): + new_div.append(child) + return self.process_tag(new_div, parent_tags=parent_tags) + # other cases: use the default processing return super().process_tag(node, parent_tags=parent_tags) From a5a084cf0f5cf33ab12be0304230ce6059f1c73b Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Tue, 10 Feb 2026 15:05:24 +0100 Subject: [PATCH 18/22] :sparkles: Update API type information based on current repo state --- mcp/packages/server/data/api_types.yml | 15496 +++++++++++------------ 1 file changed, 7690 insertions(+), 7806 deletions(-) diff --git a/mcp/packages/server/data/api_types.yml b/mcp/packages/server/data/api_types.yml index 603abdaf0f..912adaa95a 100644 --- a/mcp/packages/server/data/api_types.yml +++ b/mcp/packages/server/data/api_types.yml @@ -6,70 +6,84 @@ Penpot: These are methods and properties available on the `penpot` global object. ``` - interface Penpot { - ui: { - open: ((name: string, url: string, options?: { - width: number; - height: number; - }) => void); - size: null | { - width: number; - height: number; - }; - resize: ((width: number, height: number) => void); - sendMessage: ((message: unknown) => void); - onMessage: ((callback: ((message: T) => void)) => void); - }; - utils: ContextUtils; - closePlugin: (() => void); - on(type: T, callback: ((event: EventsMap[T]) => void), props?: { - [key: string]: unknown; - }): symbol; - off(listenerId: symbol): void; - root: null | Shape; - currentFile: null | File; - currentPage: null | Page; - viewport: Viewport; - flags: Flags; - history: HistoryContext; - library: LibraryContext; - fonts: FontsContext; - currentUser: User; - activeUsers: ActiveUser[]; - theme: Theme; - localStorage: LocalStorage; - selection: Shape[]; - shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[]; - replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void; - uploadMediaUrl(name: string, url: string): Promise; - uploadMediaData(name: string, data: Uint8Array, mimeType: string): Promise; - group(shapes: Shape[]): null | Group; - ungroup(group: Group, ...other: Group[]): void; - createRectangle(): Rectangle; - createBoard(): Board; - createEllipse(): Ellipse; - createPath(): Path; - createBoolean(boolType: BooleanType, shapes: Shape[]): null | Boolean; - createShapeFromSvg(svgString: string): null | Group; - createShapeFromSvgWithImages(svgString: string): Promise; - createText(text: string): null | Text; - generateMarkup(shapes: Shape[], options?: { - type?: "html" | "svg"; - }): string; - generateStyle(shapes: Shape[], options?: { - type?: "css"; - withPrelude?: boolean; - includeChildren?: boolean; - }): string; - generateFontFaces(shapes: Shape[]): Promise; - openViewer(): void; - createPage(): Page; - openPage(page: Page, newWindow?: boolean): void; - alignHorizontal(shapes: Shape[], direction: "center" | "left" | "right"): void; - alignVertical(shapes: Shape[], direction: "center" | "top" | "bottom"): void; - distributeHorizontal(shapes: Shape[]): void; - distributeVertical(shapes: Shape[]): void; - flatten(shapes: Shape[]): Path[]; + interface Penpot { + ui: { + open: ( + name: string, + url: string, + options?: { width: number; height: number }, + ) => void; + size: { width: number; height: number } | null; + resize: (width: number, height: number) => void; + sendMessage: (message: unknown) => void; + onMessage: (callback: (message: T) => void) => void; + }; + utils: ContextUtils; + closePlugin: () => void; + on( + type: T, + callback: (event: EventsMap[T]) => void, + props?: { [key: string]: unknown }, + ): symbol; + off(listenerId: symbol): void; + root: Shape | null; + currentFile: File | null; + currentPage: Page | null; + viewport: Viewport; + flags: Flags; + history: HistoryContext; + library: LibraryContext; + fonts: FontsContext; + currentUser: User; + activeUsers: ActiveUser[]; + theme: Theme; + localStorage: LocalStorage; + selection: Shape[]; + shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[]; + replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void; + uploadMediaUrl(name: string, url: string): Promise; + uploadMediaData( + name: string, + data: Uint8Array, + mimeType: string, + ): Promise; + group(shapes: Shape[]): Group | null; + ungroup(group: Group, ...other: Group[]): void; + createRectangle(): Rectangle; + createBoard(): Board; + createEllipse(): Ellipse; + createPath(): Path; + createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null; + createShapeFromSvg(svgString: string): Group | null; + createShapeFromSvgWithImages(svgString: string): Promise; + createText(text: string): Text | null; + generateMarkup( + shapes: Shape[], + options?: { type?: "html" | "svg" }, + ): string; + generateStyle( + shapes: Shape[], + options?: { + type?: "css"; + withPrelude?: boolean; + includeChildren?: boolean; + }, + ): string; + generateFontFaces(shapes: Shape[]): Promise; + openViewer(): void; + createPage(): Page; + openPage(page: Page, newWindow?: boolean): void; + alignHorizontal( + shapes: Shape[], + direction: "center" | "left" | "right", + ): void; + alignVertical( + shapes: Shape[], + direction: "center" | "top" | "bottom", + ): void; + distributeHorizontal(shapes: Shape[]): void; + distributeVertical(shapes: Shape[]): void; + flatten(shapes: Shape[]): Path[]; } ``` @@ -81,24 +95,22 @@ Penpot: Properties: ui: |- ``` - ui: { - open: ((name: string, url: string, options?: { - width: number; - height: number; - }) => void); - size: null | { - width: number; - height: number; - }; - resize: ((width: number, height: number) => void); - sendMessage: ((message: unknown) => void); - onMessage: ((callback: ((message: T) => void)) => void); + ui: { + open: ( + name: string, + url: string, + options?: { width: number; height: number }, + ) => void; + size: { width: number; height: number } | null; + resize: (width: number, height: number) => void; + sendMessage: (message: unknown) => void; + onMessage: (callback: (message: T) => void) => void; } ``` - Type declaration + Type Declaration - * open: ((name: string, url: string, options?: { width: number; height: number; }) => void) + * open: (name: string, url: string, options?: { width: number; height: number }) => void Opens the plugin UI. It is possible to develop a plugin without interface (see Palette color example) but if you need, the way to open this UI is using `penpot.ui.open`. There is a minimum and maximum size for this modal and a default size but it's possible to customize it anyway with the options parameter. @@ -107,31 +119,8 @@ Penpot: ``` penpot.ui.open('Plugin name', 'url', {width: 150, height: 300}); ``` - - + ``` - (name, url, options?): void - ``` - - - Parameters - * name: string - - title of the plugin, it'll be displayed on the top of the modal - * url: string - - of the plugin - * options: { - width: number; - height: number; - } - - height and width of the modal. - - + width: number - + height: number - - Returns void - * size: null | { width: number; height: number; } - * resize: ((width: number, height: number) => void) + * size: { width: number; height: number } | null + * resize: (width: number, height: number) => void Resizes the plugin UI. @@ -139,21 +128,7 @@ Penpot: ``` penpot.ui.resize(300, 400); ``` - - + ``` - (width, height): void - ``` - - - Parameters - * width: number - - The width of the modal. - * height: number - - The height of the modal. - - Returns void - * sendMessage: ((message: unknown) => void) + * sendMessage: (message: unknown) => void Sends a message to the plugin UI. @@ -161,18 +136,7 @@ Penpot: ``` this.sendMessage({ type: 'example-type', content: 'data we want to share' }); ``` - - + ``` - (message): void - ``` - - - Parameters - * message: unknown - - content usually is an object - - Returns void - * onMessage: ((callback: ((message: T) => void)) => void) + * onMessage: (callback: (message: T) => void) => void This is usually used in the `plugin.ts` file in order to handle the data sent by our plugin @@ -180,30 +144,6 @@ Penpot: ``` penpot.ui.onMessage((message) => {if(message.type === 'example-type' { ...do something })}); ``` - - + ``` - (callback): void - ``` - - - Type Parameters - * T - - Parameters - * callback: ((message: T) => void) - - A function that will be called whenever a message is received. - The function receives a single argument, `message`, which is of type `T`. - - + ``` - (message): void - ``` - - - Parameters - * message: T - - Returns void - - Returns void utils: |- ``` utils: ContextUtils @@ -212,7 +152,7 @@ Penpot: Provides access to utility functions and context-specific operations. closePlugin: |- ``` - closePlugin: (() => void) + closePlugin: () => void ``` Closes the plugin. When this method is called the UI will be closed. @@ -223,7 +163,7 @@ Penpot: ``` root: |- ``` - readonly root: null | Shape + readonly root: Shape | null ``` The root shape in the current Penpot context. Requires `content:read` permission. @@ -234,7 +174,7 @@ Penpot: ``` currentFile: |- ``` - readonly currentFile: null | File + readonly currentFile: File | null ``` Retrieves file data from the current Penpot context. Requires `content:read` permission. @@ -249,7 +189,7 @@ Penpot: ``` currentPage: |- ``` - readonly currentPage: null | Page + readonly currentPage: Page | null ``` The current page in the Penpot context. Requires `content:read` permission. @@ -361,513 +301,528 @@ Penpot: Methods: on: |- ``` - on(type, callback, props?): symbol + on( + type: T, + callback: (event: EventsMap[T]) => void, + props?: { [key: string]: unknown }, + ): symbol ``` - * Adds an event listener for the specified event type. - Subscribing to events requires `content:read` permission. + Adds an event listener for the specified event type. + Subscribing to events requires `content:read` permission. - The following are the possible event types: + The following are the possible event types: - + pagechange: event emitted when the current page changes. The callback will receive the new page. - + shapechange: event emitted when the shape changes. This event requires to send inside the `props` object the shape - that will be observed. For example: - ``` - // Observe the current selected shapepenpot.on('shapechange', (shape) => console.log(shape.name), { shapeId: penpot.selection[0].id }); - ``` + * pagechange: event emitted when the current page changes. The callback will receive the new page. + * shapechange: event emitted when the shape changes. This event requires to send inside the `props` object the shape + that will be observed. For example: - + selectionchange: event emitted when the current selection changes. The callback will receive the list of ids for the new selection - + themechange: event emitted when the user changes its theme. The callback will receive the new theme (currently: either `dark` or `light`) - + documentsaved: event emitted after the document is saved in the backend. + ``` + // Observe the current selected shapepenpot.on('shapechange', (shape) => console.log(shape.name), { shapeId: penpot.selection[0].id }); + ``` - Type Parameters - + T extends keyof EventsMap + * selectionchange: event emitted when the current selection changes. The callback will receive the list of ids for the new selection + * themechange: event emitted when the user changes its theme. The callback will receive the new theme (currently: either `dark` or `light`) + * documentsaved: event emitted after the document is saved in the backend. - Parameters - + type: T + Type Parameters - The event type to listen for. - + callback: ((event: EventsMap[T]) => void) + * T extends keyof EventsMap - The callback function to execute when the event is triggered. + Parameters - - ``` - (event): void - ``` + * type: T - * Parameters - + event: EventsMap[T] + The event type to listen for. + * callback: (event: EventsMap[T]) => void - Returns void - + props: { - [key: string]: unknown; - } + The callback function to execute when the event is triggered. + * props: { [key: string]: unknown } - The properties for the current event handler. Only makes sense for specific events. + The properties for the current event handler. Only makes sense for specific events. - - [key: string]: unknown + Returns symbol - Returns symbol + the listener id that can be used to call `off` and cancel the listener - the listener id that can be used to call `off` and cancel the listener - - Example - ``` - penpot.on('pagechange', () => {...do something}). - ``` + Example + ``` + penpot.on('pagechange', () => {...do something}). + ``` off: |- ``` - off(listenerId): void + off(listenerId: symbol): void ``` - * Removes an event listener for the specified event type. + Removes an event listener for the specified event type. - Parameters - + listenerId: symbol + Parameters - the id returned by the `on` method when the callback was set + * listenerId: symbol - Returns void + the id returned by the `on` method when the callback was set - Example - ``` - const listenerId = penpot.on('contentsave', () => console.log("Changed"));penpot.off(listenerId); - ``` + Returns void + + Example + ``` + const listenerId = penpot.on('contentsave', () => console.log("Changed"));penpot.off(listenerId); + ``` shapesColors: |- ``` - shapesColors(shapes): (Color & ColorShapeInfo)[] + shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[] ``` - * Retrieves colors applied to the given shapes in Penpot. Requires `content:read` permission. + Retrieves colors applied to the given shapes in Penpot. Requires `content:read` permission. - Parameters - + shapes: Shape[] + Parameters - Returns (Color & ColorShapeInfo)[] + * shapes: Shape[] - Returns an array of colors and their shape information. + Returns (Color & ColorShapeInfo)[] - Example - ``` - const colors = context.shapesColors(shapes);console.log(colors); - ``` + Returns an array of colors and their shape information. + + Example + ``` + const colors = context.shapesColors(shapes);console.log(colors); + ``` replaceColor: |- ``` - replaceColor(shapes, oldColor, newColor): void + replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void ``` - * Replaces a specified old color with a new color in the given shapes. Requires `content:write` permission. + Replaces a specified old color with a new color in the given shapes. Requires `content:write` permission. - Parameters - + shapes: Shape[] - + oldColor: Color - + newColor: Color + Parameters - Returns void + * shapes: Shape[] + * oldColor: Color + * newColor: Color - Example - ``` - context.replaceColor(shapes, oldColor, newColor); - ``` + Returns void + + Example + ``` + context.replaceColor(shapes, oldColor, newColor); + ``` uploadMediaUrl: |- ``` - uploadMediaUrl(name, url): Promise + uploadMediaUrl(name: string, url: string): Promise ``` - * Uploads media to Penpot and retrieves its image data. Requires `content:write` permission. + Uploads media to Penpot and retrieves its image data. Requires `content:write` permission. - Parameters - + name: string + Parameters - The name of the media. - + url: string + * name: string - The URL of the media to be uploaded. + The name of the media. + * url: string - Returns Promise + The URL of the media to be uploaded. - Returns a promise that resolves to the image data of the uploaded media. + Returns Promise - Example - ``` - const imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');console.log(imageData);// to insert the image in a shape we can doconst board = penpot.createBoard();const shape = penpot.createRectangle();board.appendChild(shape);shape.fills = [{ fillOpacity: 1, fillImage: imageData }]; - ``` + Returns a promise that resolves to the image data of the uploaded media. + + Example + ``` + const imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');console.log(imageData);// to insert the image in a shape we can doconst board = penpot.createBoard();const shape = penpot.createRectangle();board.appendChild(shape);shape.fills = [{ fillOpacity: 1, fillImage: imageData }]; + ``` uploadMediaData: |- ``` - uploadMediaData(name, data, mimeType): Promise + uploadMediaData( + name: string, + data: Uint8Array, + mimeType: string, + ): Promise ``` - * Uploads media to penpot and retrieves the image data. Requires `content:write` permission. + Uploads media to penpot and retrieves the image data. Requires `content:write` permission. - Parameters - + name: string + Parameters - The name of the media. - + data: Uint8Array + * name: string - The image content data - + mimeType: string + The name of the media. + * data: Uint8Array - Returns Promise + The image content data + * mimeType: string - Returns a promise that resolves to the image data of the uploaded media. + Returns Promise - Example - ``` - const imageData = await context.uploadMediaData('example', imageData, 'image/jpeg');console.log(imageData); - ``` + Returns a promise that resolves to the image data of the uploaded media. + + Example + ``` + const imageData = await context.uploadMediaData('example', imageData, 'image/jpeg');console.log(imageData); + ``` group: |- ``` - group(shapes): null | Group + group(shapes: Shape[]): Group | null ``` - * Groups the specified shapes. Requires `content:write` permission. + Groups the specified shapes. Requires `content:write` permission. - Parameters - + shapes: Shape[] + Parameters - An array of shapes to group. + * shapes: Shape[] - Returns null | Group + An array of shapes to group. - Returns the newly created group or `null` if the group could not be created. + Returns Group | null - Example - ``` - const penpotShapesArray = penpot.selection;penpot.group(penpotShapesArray); - ``` + Returns the newly created group or `null` if the group could not be created. + + Example + ``` + const penpotShapesArray = penpot.selection;penpot.group(penpotShapesArray); + ``` ungroup: |- ``` - ungroup(group, ...other): void + ungroup(group: Group, ...other: Group[]): void ``` - * Ungroups the specified group. Requires `content:write` permission. + Ungroups the specified group. Requires `content:write` permission. - Parameters - + group: Group + Parameters - The group to ungroup. - + ...other: Group[] + * group: Group - Additional groups to ungroup. + The group to ungroup. + * ...other: Group[] - Returns void + Additional groups to ungroup. - Example - ``` - const penpotShapesArray = penpot.selection;// We need to make sure that something is selected, and if the selected shape is a group,if (selected.length && penpot.utils.types.isGroup(penpotShapesArray[0])) { penpot.group(penpotShapesArray[0]);} - ``` + Returns void + + Example + ``` + const penpotShapesArray = penpot.selection;// We need to make sure that something is selected, and if the selected shape is a group,if (selected.length && penpot.utils.types.isGroup(penpotShapesArray[0])) { penpot.group(penpotShapesArray[0]);} + ``` createRectangle: |- ``` createRectangle(): Rectangle ``` - * Use this method to create the shape of a rectangle. Requires `content:write` permission. + Use this method to create the shape of a rectangle. Requires `content:write` permission. - Returns Rectangle + Returns Rectangle - Example - ``` - const shape = penpot.createRectangle();// just change the values like thisshape.name = "Example rectangle";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for a image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.borderRadius = 8;shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; - ``` + Example + ``` + const shape = penpot.createRectangle();// just change the values like thisshape.name = "Example rectangle";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for a image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.borderRadius = 8;shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; + ``` createBoard: |- ``` createBoard(): Board ``` - * Use this method to create a board. This is the first step before anything else, the container. Requires `content:write` permission. - Then you can add a gridlayout, flexlayout or add a shape inside the board. - Just a heads-up: board is a board in Penpot UI. + Use this method to create a board. This is the first step before anything else, the container. Requires `content:write` permission. + Then you can add a gridlayout, flexlayout or add a shape inside the board. + Just a heads-up: board is a board in Penpot UI. - Returns Board + Returns Board - Example - ``` - const board = penpot.createBoard();// to add grid layoutboard.addGridLayout();// to add flex layoutboard.addFlexLayout();// to create a shape inside the boardconst shape = penpot.createRectangle();board.appendChild(shape); - ``` + Example + ``` + const board = penpot.createBoard();// to add grid layoutboard.addGridLayout();// to add flex layoutboard.addFlexLayout();// to create a shape inside the boardconst shape = penpot.createRectangle();board.appendChild(shape); + ``` createEllipse: |- ``` createEllipse(): Ellipse ``` - * Use this method to create the shape of an ellipse. Requires `content:write` permission. + Use this method to create the shape of an ellipse. Requires `content:write` permission. - Returns Ellipse + Returns Ellipse - Example - ``` - const shape = penpot.createEllipse();// just change the values like thisshape.name = "Example ellipse";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for an image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; - ``` + Example + ``` + const shape = penpot.createEllipse();// just change the values like thisshape.name = "Example ellipse";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for an image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; + ``` createPath: |- ``` createPath(): Path ``` - * Use this method to create a path. Requires `content:write` permission. + Use this method to create a path. Requires `content:write` permission. - Returns Path + Returns Path - Example - ``` - const path = penpot.createPath();path.name = "My path";// for solid colorpath.fills = [{ fillColor: "#7EFFF5" }]; - ``` + Example + ``` + const path = penpot.createPath();path.name = "My path";// for solid colorpath.fills = [{ fillColor: "#7EFFF5" }]; + ``` createBoolean: |- ``` - createBoolean(boolType, shapes): null | Boolean + createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null ``` - * Creates a Boolean shape based on the specified boolean operation and shapes. Requires `content:write` permission. + Creates a Boolean shape based on the specified boolean operation and shapes. Requires `content:write` permission. - Parameters - + boolType: BooleanType + Parameters - The type of boolean operation ('union', 'difference', 'exclude', 'intersection'). - + shapes: Shape[] + * boolType: BooleanType - An array of shapes to perform the boolean operation on. + The type of boolean operation ('union', 'difference', 'exclude', 'intersection'). + * shapes: Shape[] - Returns null | Boolean + An array of shapes to perform the boolean operation on. - Returns the newly created Boolean shape resulting from the boolean operation. + Returns Boolean | null - Example - ``` - const booleanShape = context.createBoolean('union', [shape1, shape2]); - ``` + Returns the newly created Boolean shape resulting from the boolean operation. + + Example + ``` + const booleanShape = context.createBoolean('union', [shape1, shape2]); + ``` createShapeFromSvg: |- ``` - createShapeFromSvg(svgString): null | Group + createShapeFromSvg(svgString: string): Group | null ``` - * Creates a Group from an SVG string. Requires `content:write` permission. + Creates a Group from an SVG string. Requires `content:write` permission. - Parameters - + svgString: string + Parameters - The SVG string representing the shapes to be converted into a group. + * svgString: string - Returns null | Group + The SVG string representing the shapes to be converted into a group. - Returns the newly created Group containing the shapes from the SVG. + Returns Group | null - Example - ``` - const svgGroup = context.createShapeFromSvg('...'); - ``` + Returns the newly created Group containing the shapes from the SVG. + + Example + ``` + const svgGroup = context.createShapeFromSvg('...'); + ``` createShapeFromSvgWithImages: |- ``` - createShapeFromSvgWithImages(svgString): Promise + createShapeFromSvgWithImages(svgString: string): Promise ``` - * Creates a Group from an SVG string. The SVG can have images and the method returns - a Promise because the shape will be available after all images are uploaded. - Requires `content:write` permission. + Creates a Group from an SVG string. The SVG can have images and the method returns + a Promise because the shape will be available after all images are uploaded. + Requires `content:write` permission. - Parameters - + svgString: string + Parameters - The SVG string representing the shapes to be converted into a group. + * svgString: string - Returns Promise + The SVG string representing the shapes to be converted into a group. - Returns a promise with the newly created Group containing the shapes from the SVG. + Returns Promise - Example - ``` - const svgGroup = await context.createShapeFromSvgWithImages('...'); - ``` + Returns a promise with the newly created Group containing the shapes from the SVG. + + Example + ``` + const svgGroup = await context.createShapeFromSvgWithImages('...'); + ``` createText: |- ``` - createText(text): null | Text + createText(text: string): Text | null ``` - * Creates a Text shape with the specified text content. Requires `content:write` permission. + Creates a Text shape with the specified text content. Requires `content:write` permission. - Parameters - + text: string + Parameters - The text content for the Text shape. + * text: string - Returns null | Text + The text content for the Text shape. - Returns the new created shape, if the shape wasn't created can return null. + Returns Text | null - Example - ``` - const board = penpot.createBoard();let text;text = penpot.createText();// just change the values like thistext.growType = 'auto-height';text.fontFamily = 'Work Sans';text.fontSize = '12';text.fills = [{fillColor: '#9f05ff', fillOpacity: 1}];text.strokes = [{strokeOpacity: 1, strokeStyle: 'solid', strokeWidth: 2, strokeColor: '#deabff', strokeAlignment: 'outer'}];board.appendChild(text); - ``` + Returns the new created shape, if the shape wasn't created can return null. + + Example + ``` + const board = penpot.createBoard();let text;text = penpot.createText();// just change the values like thistext.growType = 'auto-height';text.fontFamily = 'Work Sans';text.fontSize = '12';text.fills = [{fillColor: '#9f05ff', fillOpacity: 1}];text.strokes = [{strokeOpacity: 1, strokeStyle: 'solid', strokeWidth: 2, strokeColor: '#deabff', strokeAlignment: 'outer'}];board.appendChild(text); + ``` generateMarkup: |- ``` - generateMarkup(shapes, options?): string + generateMarkup(shapes: Shape[], options?: { type?: "html" | "svg" }): string ``` - * Generates markup for the given shapes. Requires `content:read` permission + Generates markup for the given shapes. Requires `content:read` permission - Parameters - + shapes: Shape[] - + options: { - type?: "html" | "svg"; - } - - Optionaltype?: "html" | "svg" + Parameters - Returns string + * shapes: Shape[] + * options: { type?: "html" | "svg" } - Example - ``` - const markup = context.generateMarkup(shapes, { type: 'html' });console.log(markup); - ``` + Returns string + + Example + ``` + const markup = context.generateMarkup(shapes, { type: 'html' });console.log(markup); + ``` generateStyle: |- ``` - generateStyle(shapes, options?): string + generateStyle( + shapes: Shape[], + options?: { + type?: "css"; + withPrelude?: boolean; + includeChildren?: boolean; + }, + ): string ``` - * Generates styles for the given shapes. Requires `content:read` permission + Generates styles for the given shapes. Requires `content:read` permission - Parameters - + shapes: Shape[] - + options: { - type?: "css"; - withPrelude?: boolean; - includeChildren?: boolean; - } - - Optionaltype?: "css" - - OptionalwithPrelude?: boolean - - OptionalincludeChildren?: boolean + Parameters - Returns string + * shapes: Shape[] + * options: { type?: "css"; withPrelude?: boolean; includeChildren?: boolean } - Example - ``` - const styles = context.generateStyle(shapes, { type: 'css' });console.log(styles); - ``` + Returns string + + Example + ``` + const styles = context.generateStyle(shapes, { type: 'css' });console.log(styles); + ``` generateFontFaces: |- ``` - generateFontFaces(shapes): Promise + generateFontFaces(shapes: Shape[]): Promise ``` - * Generates the fontfaces styles necessaries to render the shapes. - Requires `content:read` permission + Generates the fontfaces styles necessaries to render the shapes. + Requires `content:read` permission - Parameters - + shapes: Shape[] + Parameters - Returns Promise + * shapes: Shape[] - Example - ``` - const fontfaces = context.generateFontFaces(penpot.selection);console.log(fontfaces); - ``` + Returns Promise + + Example + ``` + const fontfaces = context.generateFontFaces(penpot.selection);console.log(fontfaces); + ``` openViewer: |- ``` openViewer(): void ``` - * Opens the viewer section. Requires `content:read` permission. + Opens the viewer section. Requires `content:read` permission. - Returns void + Returns void createPage: |- ``` createPage(): Page ``` - * Creates a new page. Requires `content:write` permission. + Creates a new page. Requires `content:write` permission. - Returns Page + Returns Page openPage: |- ``` - openPage(page, newWindow?): void + openPage(page: Page, newWindow?: boolean): void ``` - * Changes the current open page to given page. Requires `content:read` permission. + Changes the current open page to given page. Requires `content:read` permission. - Parameters - + page: Page + Parameters - the page to open - + newWindow: boolean + * page: Page - if true opens the page in a new window + the page to open + * newWindow: boolean - Returns void + if true opens the page in a new window - Example - ``` - context.openPage(page); - ``` + Returns void + + Example + ``` + context.openPage(page); + ``` alignHorizontal: |- ``` - alignHorizontal(shapes, direction): void + alignHorizontal(shapes: Shape[], direction: "center" | "left" | "right"): void ``` - * Aligning will move all the selected layers to a position relative to one - of them in the horizontal direction. + Aligning will move all the selected layers to a position relative to one + of them in the horizontal direction. - Parameters - + shapes: Shape[] + Parameters - to align - + direction: "center" | "left" | "right" + * shapes: Shape[] - where the shapes will be aligned + to align + * direction: "center" | "left" | "right" - Returns void + where the shapes will be aligned + + Returns void alignVertical: |- ``` - alignVertical(shapes, direction): void + alignVertical(shapes: Shape[], direction: "center" | "top" | "bottom"): void ``` - * Aligning will move all the selected layers to a position relative to one - of them in the vertical direction. + Aligning will move all the selected layers to a position relative to one + of them in the vertical direction. - Parameters - + shapes: Shape[] + Parameters - to align - + direction: "center" | "top" | "bottom" + * shapes: Shape[] - where the shapes will be aligned + to align + * direction: "center" | "top" | "bottom" - Returns void + where the shapes will be aligned + + Returns void distributeHorizontal: |- ``` - distributeHorizontal(shapes): void + distributeHorizontal(shapes: Shape[]): void ``` - * Distributing objects to position them horizontally with equal distances between them. + Distributing objects to position them horizontally with equal distances between them. - Parameters - + shapes: Shape[] + Parameters - to distribute + * shapes: Shape[] - Returns void + to distribute + + Returns void distributeVertical: |- ``` - distributeVertical(shapes): void + distributeVertical(shapes: Shape[]): void ``` - * Distributing objects to position them vertically with equal distances between them. + Distributing objects to position them vertically with equal distances between them. - Parameters - + shapes: Shape[] + Parameters - to distribute + * shapes: Shape[] - Returns void + to distribute + + Returns void flatten: |- ``` - flatten(shapes): Path[] + flatten(shapes: Shape[]): Path[] ``` - * Converts the shapes into Paths. If the shapes are complex will put together - all its paths into one. + Converts the shapes into Paths. If the shapes are complex will put together + all its paths into one. - Parameters - + shapes: Shape[] + Parameters - to flatten + * shapes: Shape[] - Returns Path[] + to flatten + + Returns Path[] ActiveUser: overview: |- Interface ActiveUser @@ -877,21 +832,18 @@ ActiveUser: This interface includes additional properties specific to active users. ``` - interface ActiveUser { - position?: { - x: number; - y: number; - }; - zoom?: number; - id: string; - name?: string; - avatarUrl?: string; - color: string; - sessionId?: string; + interface ActiveUser { + position?: { x: number; y: number }; + zoom?: number; + id: string; + name?: string; + avatarUrl?: string; + color: string; + sessionId?: string; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * User + ActiveUser @@ -901,10 +853,7 @@ ActiveUser: Properties: position: |- ``` - position?: { - x: number; - y: number; - } + position?: { x: number; y: number } ``` The position of the active user. @@ -988,11 +937,11 @@ Blur: This interface includes properties for defining the type and intensity of a blur effect, along with its visibility. ``` - interface Blur { - id?: string; - type?: "layer-blur"; - value?: number; - hidden?: boolean; + interface Blur { + id?: string; + type?: "layer-blur"; + value?: number; + hidden?: boolean; } ``` @@ -1007,7 +956,7 @@ Blur: The optional unique identifier for the blur effect. type: |- ``` - type + type?: "layer-blur" ``` The optional type of the blur effect. @@ -1034,64 +983,57 @@ Board: This interface extends `ShapeBase` and includes properties and methods specific to board. ``` - interface Board { - type: "board"; - clipContent: boolean; - showInViewMode: boolean; - grid?: GridLayout; - flex?: FlexLayout; - guides: Guide[]; - rulerGuides: RulerGuide[]; - horizontalSizing?: "auto" | "fix"; - verticalSizing?: "auto" | "fix"; - fills: Fill[]; - children: Shape[]; - appendChild(child: Shape): void; - insertChild(index: number, child: Shape): void; - addFlexLayout(): FlexLayout; - addGridLayout(): GridLayout; - addRulerGuide(orientation: RulerGuideOrientation, value: number): RulerGuide; - removeRulerGuide(guide: RulerGuide): void; - isVariantContainer(): boolean; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Board { + type: "board"; + clipContent: boolean; + showInViewMode: boolean; + grid?: GridLayout; + flex?: FlexLayout; + guides: Guide[]; + rulerGuides: RulerGuide[]; + horizontalSizing?: "auto" | "fix"; + verticalSizing?: "auto" | "fix"; + fills: Fill[]; + children: Shape[]; + appendChild(child: Shape): void; + insertChild(index: number, child: Shape): void; + addFlexLayout(): FlexLayout; + addGridLayout(): GridLayout; + addRulerGuide( + orientation: RulerGuideOrientation, + value: number, + ): RulerGuide; + removeRulerGuide(guide: RulerGuide): void; + isVariantContainer(): boolean; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -1107,58 +1049,57 @@ Board: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Board @@ -1169,7 +1110,7 @@ Board: Properties: type: |- ``` - readonly type + readonly type: "board" ``` The type of the shape, which is always 'board' for boards. @@ -1257,7 +1198,7 @@ Board: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -1334,23 +1275,13 @@ Board: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -1392,7 +1323,7 @@ Board: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -1494,9 +1425,7 @@ Board: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -1515,554 +1444,570 @@ Board: Methods: appendChild: |- ``` - appendChild(child): void + appendChild(child: Shape): void ``` - * Appends a child shape to the board. + Appends a child shape to the board. - Parameters - + child: Shape + Parameters - The child shape to append. + * child: Shape - Returns void + The child shape to append. - Example - ``` - board.appendChild(childShape); - ``` + Returns void + + Example + ``` + board.appendChild(childShape); + ``` insertChild: |- ``` - insertChild(index, child): void + insertChild(index: number, child: Shape): void ``` - * Inserts a child shape at the specified index within the board. + Inserts a child shape at the specified index within the board. - Parameters - + index: number + Parameters - The index at which to insert the child shape. - + child: Shape + * index: number - The child shape to insert. + The index at which to insert the child shape. + * child: Shape - Returns void + The child shape to insert. - Example - ``` - board.insertChild(0, childShape); - ``` + Returns void + + Example + ``` + board.insertChild(0, childShape); + ``` addFlexLayout: |- ``` addFlexLayout(): FlexLayout ``` - * Adds a flex layout configuration to the board (so it's necessary to create a board first of all). + Adds a flex layout configuration to the board (so it's necessary to create a board first of all). - Returns FlexLayout + Returns FlexLayout - Returns the flex layout configuration added to the board. + Returns the flex layout configuration added to the board. - Example - ``` - const board = penpot.createBoard();const flex = board.addFlexLayout();// You can change the flex properties as follows.flex.dir = "column";flex.wrap = "wrap";flex.alignItems = "center";flex.justifyContent = "center";flex.horizontalSizing = "fill";flex.verticalSizing = "fill"; - ``` + Example + ``` + const board = penpot.createBoard();const flex = board.addFlexLayout();// You can change the flex properties as follows.flex.dir = "column";flex.wrap = "wrap";flex.alignItems = "center";flex.justifyContent = "center";flex.horizontalSizing = "fill";flex.verticalSizing = "fill"; + ``` addGridLayout: |- ``` addGridLayout(): GridLayout ``` - * Adds a grid layout configuration to the board (so it's necessary to create a board first of all). You can add rows and columns, check addRow/addColumn. + Adds a grid layout configuration to the board (so it's necessary to create a board first of all). You can add rows and columns, check addRow/addColumn. - Returns GridLayout + Returns GridLayout - Returns the grid layout configuration added to the board. + Returns the grid layout configuration added to the board. - Example - ``` - const board = penpot.createBoard();const grid = board.addGridLayout();// You can change the grid properties as follows.grid.alignItems = "center";grid.justifyItems = "start";grid.rowGap = 10;grid.columnGap = 10;grid.verticalPadding = 5;grid.horizontalPadding = 5 - ``` + Example + ``` + const board = penpot.createBoard();const grid = board.addGridLayout();// You can change the grid properties as follows.grid.alignItems = "center";grid.justifyItems = "start";grid.rowGap = 10;grid.columnGap = 10;grid.verticalPadding = 5;grid.horizontalPadding = 5 + ``` addRulerGuide: |- ``` - addRulerGuide(orientation, value): RulerGuide + addRulerGuide(orientation: RulerGuideOrientation, value: number): RulerGuide ``` - * Creates a new ruler guide. + Creates a new ruler guide. - Parameters - + orientation: RulerGuideOrientation - + value: number + Parameters - Returns RulerGuide + * orientation: RulerGuideOrientation + * value: number + + Returns RulerGuide removeRulerGuide: |- ``` - removeRulerGuide(guide): void + removeRulerGuide(guide: RulerGuide): void ``` - * Removes the `guide` from the current page. + Removes the `guide` from the current page. - Parameters - + guide: RulerGuide + Parameters - Returns void + * guide: RulerGuide + + Returns void isVariantContainer: |- ``` isVariantContainer(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current board is a VariantContainer + Returns true when the current board is a VariantContainer getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void VariantContainer: overview: |- Interface VariantContainer @@ -2072,65 +2017,58 @@ VariantContainer: This interface extends `Board` and includes properties and methods specific to VariantContainer. ``` - interface VariantContainer { - type: "board"; - clipContent: boolean; - showInViewMode: boolean; - grid?: GridLayout; - flex?: FlexLayout; - guides: Guide[]; - rulerGuides: RulerGuide[]; - horizontalSizing?: "auto" | "fix"; - verticalSizing?: "auto" | "fix"; - fills: Fill[]; - children: Shape[]; - appendChild(child: Shape): void; - insertChild(index: number, child: Shape): void; - addFlexLayout(): FlexLayout; - addGridLayout(): GridLayout; - addRulerGuide(orientation: RulerGuideOrientation, value: number): RulerGuide; - removeRulerGuide(guide: RulerGuide): void; - isVariantContainer(): boolean; - variants: null | Variants; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface VariantContainer { + type: "board"; + clipContent: boolean; + showInViewMode: boolean; + grid?: GridLayout; + flex?: FlexLayout; + guides: Guide[]; + rulerGuides: RulerGuide[]; + horizontalSizing?: "auto" | "fix"; + verticalSizing?: "auto" | "fix"; + fills: Fill[]; + children: Shape[]; + appendChild(child: Shape): void; + insertChild(index: number, child: Shape): void; + addFlexLayout(): FlexLayout; + addGridLayout(): GridLayout; + addRulerGuide( + orientation: RulerGuideOrientation, + value: number, + ): RulerGuide; + removeRulerGuide(guide: RulerGuide): void; + isVariantContainer(): boolean; + variants: Variants | null; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -2146,58 +2084,57 @@ VariantContainer: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * Board + VariantContainer @@ -2207,7 +2144,7 @@ VariantContainer: Properties: type: |- ``` - readonly type + readonly type: "board" ``` The type of the shape, which is always 'board' for boards. @@ -2281,7 +2218,7 @@ VariantContainer: ``` variants: |- ``` - readonly variants: null | Variants + readonly variants: Variants | null ``` Access to the Variant interface, for attributes and actions over the full Variant (not only this VariantContainer) @@ -2299,7 +2236,7 @@ VariantContainer: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -2376,23 +2313,13 @@ VariantContainer: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -2434,7 +2361,7 @@ VariantContainer: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -2536,9 +2463,7 @@ VariantContainer: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -2557,554 +2482,570 @@ VariantContainer: Methods: appendChild: |- ``` - appendChild(child): void + appendChild(child: Shape): void ``` - * Appends a child shape to the board. + Appends a child shape to the board. - Parameters - + child: Shape + Parameters - The child shape to append. + * child: Shape - Returns void + The child shape to append. - Example - ``` - board.appendChild(childShape); - ``` + Returns void + + Example + ``` + board.appendChild(childShape); + ``` insertChild: |- ``` - insertChild(index, child): void + insertChild(index: number, child: Shape): void ``` - * Inserts a child shape at the specified index within the board. + Inserts a child shape at the specified index within the board. - Parameters - + index: number + Parameters - The index at which to insert the child shape. - + child: Shape + * index: number - The child shape to insert. + The index at which to insert the child shape. + * child: Shape - Returns void + The child shape to insert. - Example - ``` - board.insertChild(0, childShape); - ``` + Returns void + + Example + ``` + board.insertChild(0, childShape); + ``` addFlexLayout: |- ``` addFlexLayout(): FlexLayout ``` - * Adds a flex layout configuration to the board (so it's necessary to create a board first of all). + Adds a flex layout configuration to the board (so it's necessary to create a board first of all). - Returns FlexLayout + Returns FlexLayout - Returns the flex layout configuration added to the board. + Returns the flex layout configuration added to the board. - Example - ``` - const board = penpot.createBoard();const flex = board.addFlexLayout();// You can change the flex properties as follows.flex.dir = "column";flex.wrap = "wrap";flex.alignItems = "center";flex.justifyContent = "center";flex.horizontalSizing = "fill";flex.verticalSizing = "fill"; - ``` + Example + ``` + const board = penpot.createBoard();const flex = board.addFlexLayout();// You can change the flex properties as follows.flex.dir = "column";flex.wrap = "wrap";flex.alignItems = "center";flex.justifyContent = "center";flex.horizontalSizing = "fill";flex.verticalSizing = "fill"; + ``` addGridLayout: |- ``` addGridLayout(): GridLayout ``` - * Adds a grid layout configuration to the board (so it's necessary to create a board first of all). You can add rows and columns, check addRow/addColumn. + Adds a grid layout configuration to the board (so it's necessary to create a board first of all). You can add rows and columns, check addRow/addColumn. - Returns GridLayout + Returns GridLayout - Returns the grid layout configuration added to the board. + Returns the grid layout configuration added to the board. - Example - ``` - const board = penpot.createBoard();const grid = board.addGridLayout();// You can change the grid properties as follows.grid.alignItems = "center";grid.justifyItems = "start";grid.rowGap = 10;grid.columnGap = 10;grid.verticalPadding = 5;grid.horizontalPadding = 5 - ``` + Example + ``` + const board = penpot.createBoard();const grid = board.addGridLayout();// You can change the grid properties as follows.grid.alignItems = "center";grid.justifyItems = "start";grid.rowGap = 10;grid.columnGap = 10;grid.verticalPadding = 5;grid.horizontalPadding = 5 + ``` addRulerGuide: |- ``` - addRulerGuide(orientation, value): RulerGuide + addRulerGuide(orientation: RulerGuideOrientation, value: number): RulerGuide ``` - * Creates a new ruler guide. + Creates a new ruler guide. - Parameters - + orientation: RulerGuideOrientation - + value: number + Parameters - Returns RulerGuide + * orientation: RulerGuideOrientation + * value: number + + Returns RulerGuide removeRulerGuide: |- ``` - removeRulerGuide(guide): void + removeRulerGuide(guide: RulerGuide): void ``` - * Removes the `guide` from the current page. + Removes the `guide` from the current page. - Parameters - + guide: RulerGuide + Parameters - Returns void + * guide: RulerGuide + + Returns void isVariantContainer: |- ``` isVariantContainer(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current board is a VariantContainer + Returns true when the current board is a VariantContainer getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void Boolean: overview: |- Interface Boolean @@ -3114,55 +3055,45 @@ Boolean: This interface extends `ShapeBase` and includes properties and methods specific to boolean operations. ``` - interface Boolean { - type: "boolean"; - toD(): string; - content: string; - d: string; - commands: PathCommand[]; - fills: Fill[]; - children: Shape[]; - appendChild(child: Shape): void; - insertChild(index: number, child: Shape): void; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Boolean { + type: "boolean"; + toD(): string; + content: string; + d: string; + commands: PathCommand[]; + fills: Fill[]; + children: Shape[]; + appendChild(child: Shape): void; + insertChild(index: number, child: Shape): void; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -3178,58 +3109,57 @@ Boolean: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Boolean @@ -3239,7 +3169,7 @@ Boolean: Properties: type: |- ``` - readonly type + readonly type: "boolean" ``` The type of the shape, which is always 'bool' for boolean operation shapes. @@ -3293,7 +3223,7 @@ Boolean: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -3370,23 +3300,13 @@ Boolean: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -3428,7 +3348,7 @@ Boolean: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -3530,9 +3450,7 @@ Boolean: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -3554,504 +3472,518 @@ Boolean: toD(): string ``` - * Converts the boolean shape to its path data representation. + Converts the boolean shape to its path data representation. - Returns string + Returns string - Returns the path data (d attribute) as a string. + Returns the path data (d attribute) as a string. - Deprecated + Deprecated - Use the `d` attribute + Use the `d` attribute appendChild: |- ``` - appendChild(child): void + appendChild(child: Shape): void ``` - * Appends a child shape to the boolean shape. + Appends a child shape to the boolean shape. - Parameters - + child: Shape + Parameters - The child shape to append. + * child: Shape - Returns void + The child shape to append. - Example - ``` - boolShape.appendChild(childShape); - ``` + Returns void + + Example + ``` + boolShape.appendChild(childShape); + ``` insertChild: |- ``` - insertChild(index, child): void + insertChild(index: number, child: Shape): void ``` - * Inserts a child shape at the specified index within the boolean shape. + Inserts a child shape at the specified index within the boolean shape. - Parameters - + index: number + Parameters - The index at which to insert the child shape. - + child: Shape + * index: number - The child shape to insert. + The index at which to insert the child shape. + * child: Shape - Returns void + The child shape to insert. - Example - ``` - boolShape.insertChild(0, childShape); - ``` + Returns void + + Example + ``` + boolShape.insertChild(0, childShape); + ``` getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void CloseOverlay: overview: |- Interface CloseOverlay @@ -4060,10 +3992,10 @@ CloseOverlay: This action will close a targeted board that is opened as an overlay. ``` - interface CloseOverlay { - type: "close-overlay"; - destination?: Board; - animation: Animation; + interface CloseOverlay { + type: "close-overlay"; + destination?: Board; + animation: Animation; } ``` @@ -4072,7 +4004,7 @@ CloseOverlay: Properties: type: |- ``` - readonly type + readonly type: "close-overlay" ``` The action type @@ -4097,17 +4029,17 @@ Color: This interface includes properties for defining solid colors, gradients, and image fills, along with metadata. ``` - interface Color { - id?: string; - fileId?: string; - name?: string; - path?: string; - color?: string; - opacity?: number; - refId?: string; - refFile?: string; - gradient?: Gradient; - image?: ImageData; + interface Color { + id?: string; + fileId?: string; + name?: string; + path?: string; + color?: string; + opacity?: number; + refId?: string; + refFile?: string; + gradient?: Gradient; + image?: ImageData; } ``` @@ -4191,8 +4123,8 @@ ColorShapeInfo: Additional color information for the methods to extract colors from a list of shapes. ``` - interface ColorShapeInfo { - shapesInfo: ColorShapeInfoEntry[]; + interface ColorShapeInfo { + shapesInfo: ColorShapeInfoEntry[]; } ``` @@ -4213,10 +4145,10 @@ ColorShapeInfoEntry: Entry for the color shape additional information. ``` - interface ColorShapeInfoEntry { - property: string; - index?: number; - shapeId: string; + interface ColorShapeInfoEntry { + property: string; + index?: number; + shapeId: string; } ``` @@ -4251,11 +4183,11 @@ Comment: providing feedback right over the designs and prototypes. ``` - interface Comment { - user: User; - date: Date; - content: string; - remove(): void; + interface Comment { + user: User; + date: Date; + content: string; + remove(): void; } ``` @@ -4286,10 +4218,10 @@ Comment: remove(): void ``` - * Remove the current comment from its comment thread. Only the owner can remove their comments. - Requires the `comment:write` permission. + Remove the current comment from its comment thread. Only the owner can remove their comments. + Requires the `comment:write` permission. - Returns void + Returns void CommentThread: overview: |- Interface CommentThread @@ -4299,15 +4231,15 @@ CommentThread: are conversations the users have in Penpot. ``` - interface CommentThread { - seqNumber: number; - board?: Board; - owner?: User; - position: Point; - resolved: boolean; - findComments(): Promise; - reply(content: string): Promise; - remove(): void; + interface CommentThread { + seqNumber: number; + board?: Board; + owner?: User; + position: Point; + resolved: boolean; + findComments(): Promise; + reply(content: string): Promise; + remove(): void; } ``` @@ -4352,33 +4284,34 @@ CommentThread: findComments(): Promise ``` - * List of `comments` ordered by creation date. - Requires the `comment:read` or `comment:write` permission. + List of `comments` ordered by creation date. + Requires the `comment:read` or `comment:write` permission. - Returns Promise + Returns Promise reply: |- ``` - reply(content): Promise + reply(content: string): Promise ``` - * Creates a new comment after the last one in the thread. The current user will - be used as the creation user. - Requires the `comment:write` permission. + Creates a new comment after the last one in the thread. The current user will + be used as the creation user. + Requires the `comment:write` permission. - Parameters - + content: string + Parameters - Returns Promise + * content: string + + Returns Promise remove: |- ``` remove(): void ``` - * Removes the current comment thread. Only the user that created the thread can - remove it. - Requires the `comment:write` permission. + Removes the current comment thread. Only the user that created the thread can + remove it. + Requires the `comment:write` permission. - Returns void + Returns void CommonLayout: overview: |- Interface CommonLayout @@ -4388,48 +4321,45 @@ CommonLayout: It includes various properties for alignment, spacing, padding, and sizing, as well as a method to remove the layout. ``` - interface CommonLayout { - alignItems?: - | "center" - | "start" - | "end" - | "stretch"; - alignContent?: + interface CommonLayout { + alignItems?: "center" | "start" | "end" | "stretch"; + alignContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" - | "space-evenly"; - justifyItems?: - | "center" - | "start" - | "end" - | "stretch"; - justifyContent?: + | "space-evenly"; + justifyItems?: "center" + | "start" + | "end" + | "stretch"; + justifyContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" - | "space-evenly"; - rowGap: number; - columnGap: number; - verticalPadding: number; - horizontalPadding: number; - topPadding: number; - rightPadding: number; - bottomPadding: number; - leftPadding: number; - horizontalSizing: "fill" | "auto" | "fit-content"; - verticalSizing: "fill" | "auto" | "fit-content"; - remove(): void; + | "space-evenly"; + rowGap: number; + columnGap: number; + verticalPadding: number; + horizontalPadding: number; + topPadding: number; + rightPadding: number; + bottomPadding: number; + leftPadding: number; + horizontalSizing: "fill" + | "auto" + | "fit-content"; + verticalSizing: "fill" | "auto" | "fit-content"; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * CommonLayout + FlexLayout @@ -4438,11 +4368,7 @@ CommonLayout: Properties: alignItems: |- ``` - alignItems?: - | "center" - | "start" - | "end" - | "stretch" + alignItems?: "center" | "start" | "end" | "stretch" ``` The `alignItems` property specifies the default alignment for items inside the container. @@ -4454,7 +4380,7 @@ CommonLayout: * 'stretch': Items are stretched to fill the container. alignContent: |- ``` - alignContent?: + alignContent?: | "center" | "start" | "end" @@ -4476,11 +4402,7 @@ CommonLayout: * 'stretch': Content is stretched to fill the container. justifyItems: |- ``` - justifyItems?: - | "center" - | "start" - | "end" - | "stretch" + justifyItems?: "center" | "start" | "end" | "stretch" ``` The `justifyItems` property specifies the default justification for items inside the container. @@ -4492,7 +4414,7 @@ CommonLayout: * 'stretch': Items are stretched to fill the container. justifyContent: |- ``` - justifyContent?: + justifyContent?: | "center" | "start" | "end" @@ -4588,9 +4510,9 @@ CommonLayout: remove(): void ``` - * The `remove` method removes the layout. + The `remove` method removes the layout. - Returns void + Returns void Context: overview: |- Interface Context @@ -4599,62 +4521,78 @@ Context: Represents the context of Penpot, providing access to various Penpot functionalities and data. ``` - interface Context { - root: null | Shape; - currentFile: null | File; - currentPage: null | Page; - viewport: Viewport; - flags: Flags; - history: HistoryContext; - library: LibraryContext; - fonts: FontsContext; - currentUser: User; - activeUsers: ActiveUser[]; - theme: Theme; - localStorage: LocalStorage; - selection: Shape[]; - shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[]; - replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void; - uploadMediaUrl(name: string, url: string): Promise; - uploadMediaData(name: string, data: Uint8Array, mimeType: string): Promise; - group(shapes: Shape[]): null | Group; - ungroup(group: Group, ...other: Group[]): void; - createRectangle(): Rectangle; - createBoard(): Board; - createEllipse(): Ellipse; - createPath(): Path; - createBoolean(boolType: BooleanType, shapes: Shape[]): null | Boolean; - createShapeFromSvg(svgString: string): null | Group; - createShapeFromSvgWithImages(svgString: string): Promise; - createText(text: string): null | Text; - generateMarkup(shapes: Shape[], options?: { - type?: "html" | "svg"; - }): string; - generateStyle(shapes: Shape[], options?: { - type?: "css"; - withPrelude?: boolean; - includeChildren?: boolean; - }): string; - generateFontFaces(shapes: Shape[]): Promise; - addListener(type: T, callback: ((event: EventsMap[T]) => void), props?: { - [key: string]: unknown; - }): symbol; - removeListener(listenerId: symbol): void; - openViewer(): void; - createPage(): Page; - openPage(page: Page, newWindow?: boolean): void; - alignHorizontal(shapes: Shape[], direction: "center" | "left" | "right"): void; - alignVertical(shapes: Shape[], direction: "center" | "top" | "bottom"): void; - distributeHorizontal(shapes: Shape[]): void; - distributeVertical(shapes: Shape[]): void; - flatten(shapes: Shape[]): Path[]; + interface Context { + root: Shape | null; + currentFile: File | null; + currentPage: Page | null; + viewport: Viewport; + flags: Flags; + history: HistoryContext; + library: LibraryContext; + fonts: FontsContext; + currentUser: User; + activeUsers: ActiveUser[]; + theme: Theme; + localStorage: LocalStorage; + selection: Shape[]; + shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[]; + replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void; + uploadMediaUrl(name: string, url: string): Promise; + uploadMediaData( + name: string, + data: Uint8Array, + mimeType: string, + ): Promise; + group(shapes: Shape[]): Group | null; + ungroup(group: Group, ...other: Group[]): void; + createRectangle(): Rectangle; + createBoard(): Board; + createEllipse(): Ellipse; + createPath(): Path; + createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null; + createShapeFromSvg(svgString: string): Group | null; + createShapeFromSvgWithImages(svgString: string): Promise; + createText(text: string): Text | null; + generateMarkup( + shapes: Shape[], + options?: { type?: "html" | "svg" }, + ): string; + generateStyle( + shapes: Shape[], + options?: { + type?: "css"; + withPrelude?: boolean; + includeChildren?: boolean; + }, + ): string; + generateFontFaces(shapes: Shape[]): Promise; + addListener( + type: T, + callback: (event: EventsMap[T]) => void, + props?: { [key: string]: unknown }, + ): symbol; + removeListener(listenerId: symbol): void; + openViewer(): void; + createPage(): Page; + openPage(page: Page, newWindow?: boolean): void; + alignHorizontal( + shapes: Shape[], + direction: "center" | "left" | "right", + ): void; + alignVertical( + shapes: Shape[], + direction: "center" | "top" | "bottom", + ): void; + distributeHorizontal(shapes: Shape[]): void; + distributeVertical(shapes: Shape[]): void; + flatten(shapes: Shape[]): Path[]; } ``` members: Properties: root: |- ``` - readonly root: null | Shape + readonly root: Shape | null ``` The root shape in the current Penpot context. Requires `content:read` permission. @@ -4665,7 +4603,7 @@ Context: ``` currentFile: |- ``` - readonly currentFile: null | File + readonly currentFile: File | null ``` Retrieves file data from the current Penpot context. Requires `content:read` permission. @@ -4680,7 +4618,7 @@ Context: ``` currentPage: |- ``` - readonly currentPage: null | Page + readonly currentPage: Page | null ``` The current page in the Penpot context. Requires `content:read` permission. @@ -4792,487 +4730,503 @@ Context: Methods: shapesColors: |- ``` - shapesColors(shapes): (Color & ColorShapeInfo)[] + shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[] ``` - * Retrieves colors applied to the given shapes in Penpot. Requires `content:read` permission. + Retrieves colors applied to the given shapes in Penpot. Requires `content:read` permission. - Parameters - + shapes: Shape[] + Parameters - Returns (Color & ColorShapeInfo)[] + * shapes: Shape[] - Returns an array of colors and their shape information. + Returns (Color & ColorShapeInfo)[] - Example - ``` - const colors = context.shapesColors(shapes);console.log(colors); - ``` + Returns an array of colors and their shape information. + + Example + ``` + const colors = context.shapesColors(shapes);console.log(colors); + ``` replaceColor: |- ``` - replaceColor(shapes, oldColor, newColor): void + replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void ``` - * Replaces a specified old color with a new color in the given shapes. Requires `content:write` permission. + Replaces a specified old color with a new color in the given shapes. Requires `content:write` permission. - Parameters - + shapes: Shape[] - + oldColor: Color - + newColor: Color + Parameters - Returns void + * shapes: Shape[] + * oldColor: Color + * newColor: Color - Example - ``` - context.replaceColor(shapes, oldColor, newColor); - ``` + Returns void + + Example + ``` + context.replaceColor(shapes, oldColor, newColor); + ``` uploadMediaUrl: |- ``` - uploadMediaUrl(name, url): Promise + uploadMediaUrl(name: string, url: string): Promise ``` - * Uploads media to Penpot and retrieves its image data. Requires `content:write` permission. + Uploads media to Penpot and retrieves its image data. Requires `content:write` permission. - Parameters - + name: string + Parameters - The name of the media. - + url: string + * name: string - The URL of the media to be uploaded. + The name of the media. + * url: string - Returns Promise + The URL of the media to be uploaded. - Returns a promise that resolves to the image data of the uploaded media. + Returns Promise - Example - ``` - const imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');console.log(imageData);// to insert the image in a shape we can doconst board = penpot.createBoard();const shape = penpot.createRectangle();board.appendChild(shape);shape.fills = [{ fillOpacity: 1, fillImage: imageData }]; - ``` + Returns a promise that resolves to the image data of the uploaded media. + + Example + ``` + const imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');console.log(imageData);// to insert the image in a shape we can doconst board = penpot.createBoard();const shape = penpot.createRectangle();board.appendChild(shape);shape.fills = [{ fillOpacity: 1, fillImage: imageData }]; + ``` uploadMediaData: |- ``` - uploadMediaData(name, data, mimeType): Promise + uploadMediaData( + name: string, + data: Uint8Array, + mimeType: string, + ): Promise ``` - * Uploads media to penpot and retrieves the image data. Requires `content:write` permission. + Uploads media to penpot and retrieves the image data. Requires `content:write` permission. - Parameters - + name: string + Parameters - The name of the media. - + data: Uint8Array + * name: string - The image content data - + mimeType: string + The name of the media. + * data: Uint8Array - Returns Promise + The image content data + * mimeType: string - Returns a promise that resolves to the image data of the uploaded media. + Returns Promise - Example - ``` - const imageData = await context.uploadMediaData('example', imageData, 'image/jpeg');console.log(imageData); - ``` + Returns a promise that resolves to the image data of the uploaded media. + + Example + ``` + const imageData = await context.uploadMediaData('example', imageData, 'image/jpeg');console.log(imageData); + ``` group: |- ``` - group(shapes): null | Group + group(shapes: Shape[]): Group | null ``` - * Groups the specified shapes. Requires `content:write` permission. + Groups the specified shapes. Requires `content:write` permission. - Parameters - + shapes: Shape[] + Parameters - An array of shapes to group. + * shapes: Shape[] - Returns null | Group + An array of shapes to group. - Returns the newly created group or `null` if the group could not be created. + Returns Group | null - Example - ``` - const penpotShapesArray = penpot.selection;penpot.group(penpotShapesArray); - ``` + Returns the newly created group or `null` if the group could not be created. + + Example + ``` + const penpotShapesArray = penpot.selection;penpot.group(penpotShapesArray); + ``` ungroup: |- ``` - ungroup(group, ...other): void + ungroup(group: Group, ...other: Group[]): void ``` - * Ungroups the specified group. Requires `content:write` permission. + Ungroups the specified group. Requires `content:write` permission. - Parameters - + group: Group + Parameters - The group to ungroup. - + ...other: Group[] + * group: Group - Additional groups to ungroup. + The group to ungroup. + * ...other: Group[] - Returns void + Additional groups to ungroup. - Example - ``` - const penpotShapesArray = penpot.selection;// We need to make sure that something is selected, and if the selected shape is a group,if (selected.length && penpot.utils.types.isGroup(penpotShapesArray[0])) { penpot.group(penpotShapesArray[0]);} - ``` + Returns void + + Example + ``` + const penpotShapesArray = penpot.selection;// We need to make sure that something is selected, and if the selected shape is a group,if (selected.length && penpot.utils.types.isGroup(penpotShapesArray[0])) { penpot.group(penpotShapesArray[0]);} + ``` createRectangle: |- ``` createRectangle(): Rectangle ``` - * Use this method to create the shape of a rectangle. Requires `content:write` permission. + Use this method to create the shape of a rectangle. Requires `content:write` permission. - Returns Rectangle + Returns Rectangle - Example - ``` - const shape = penpot.createRectangle();// just change the values like thisshape.name = "Example rectangle";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for a image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.borderRadius = 8;shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; - ``` + Example + ``` + const shape = penpot.createRectangle();// just change the values like thisshape.name = "Example rectangle";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for a image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.borderRadius = 8;shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; + ``` createBoard: |- ``` createBoard(): Board ``` - * Use this method to create a board. This is the first step before anything else, the container. Requires `content:write` permission. - Then you can add a gridlayout, flexlayout or add a shape inside the board. - Just a heads-up: board is a board in Penpot UI. + Use this method to create a board. This is the first step before anything else, the container. Requires `content:write` permission. + Then you can add a gridlayout, flexlayout or add a shape inside the board. + Just a heads-up: board is a board in Penpot UI. - Returns Board + Returns Board - Example - ``` - const board = penpot.createBoard();// to add grid layoutboard.addGridLayout();// to add flex layoutboard.addFlexLayout();// to create a shape inside the boardconst shape = penpot.createRectangle();board.appendChild(shape); - ``` + Example + ``` + const board = penpot.createBoard();// to add grid layoutboard.addGridLayout();// to add flex layoutboard.addFlexLayout();// to create a shape inside the boardconst shape = penpot.createRectangle();board.appendChild(shape); + ``` createEllipse: |- ``` createEllipse(): Ellipse ``` - * Use this method to create the shape of an ellipse. Requires `content:write` permission. + Use this method to create the shape of an ellipse. Requires `content:write` permission. - Returns Ellipse + Returns Ellipse - Example - ``` - const shape = penpot.createEllipse();// just change the values like thisshape.name = "Example ellipse";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for an image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; - ``` + Example + ``` + const shape = penpot.createEllipse();// just change the values like thisshape.name = "Example ellipse";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for an image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; + ``` createPath: |- ``` createPath(): Path ``` - * Use this method to create a path. Requires `content:write` permission. + Use this method to create a path. Requires `content:write` permission. - Returns Path + Returns Path - Example - ``` - const path = penpot.createPath();path.name = "My path";// for solid colorpath.fills = [{ fillColor: "#7EFFF5" }]; - ``` + Example + ``` + const path = penpot.createPath();path.name = "My path";// for solid colorpath.fills = [{ fillColor: "#7EFFF5" }]; + ``` createBoolean: |- ``` - createBoolean(boolType, shapes): null | Boolean + createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null ``` - * Creates a Boolean shape based on the specified boolean operation and shapes. Requires `content:write` permission. + Creates a Boolean shape based on the specified boolean operation and shapes. Requires `content:write` permission. - Parameters - + boolType: BooleanType + Parameters - The type of boolean operation ('union', 'difference', 'exclude', 'intersection'). - + shapes: Shape[] + * boolType: BooleanType - An array of shapes to perform the boolean operation on. + The type of boolean operation ('union', 'difference', 'exclude', 'intersection'). + * shapes: Shape[] - Returns null | Boolean + An array of shapes to perform the boolean operation on. - Returns the newly created Boolean shape resulting from the boolean operation. + Returns Boolean | null - Example - ``` - const booleanShape = context.createBoolean('union', [shape1, shape2]); - ``` + Returns the newly created Boolean shape resulting from the boolean operation. + + Example + ``` + const booleanShape = context.createBoolean('union', [shape1, shape2]); + ``` createShapeFromSvg: |- ``` - createShapeFromSvg(svgString): null | Group + createShapeFromSvg(svgString: string): Group | null ``` - * Creates a Group from an SVG string. Requires `content:write` permission. + Creates a Group from an SVG string. Requires `content:write` permission. - Parameters - + svgString: string + Parameters - The SVG string representing the shapes to be converted into a group. + * svgString: string - Returns null | Group + The SVG string representing the shapes to be converted into a group. - Returns the newly created Group containing the shapes from the SVG. + Returns Group | null - Example - ``` - const svgGroup = context.createShapeFromSvg('...'); - ``` + Returns the newly created Group containing the shapes from the SVG. + + Example + ``` + const svgGroup = context.createShapeFromSvg('...'); + ``` createShapeFromSvgWithImages: |- ``` - createShapeFromSvgWithImages(svgString): Promise + createShapeFromSvgWithImages(svgString: string): Promise ``` - * Creates a Group from an SVG string. The SVG can have images and the method returns - a Promise because the shape will be available after all images are uploaded. - Requires `content:write` permission. + Creates a Group from an SVG string. The SVG can have images and the method returns + a Promise because the shape will be available after all images are uploaded. + Requires `content:write` permission. - Parameters - + svgString: string + Parameters - The SVG string representing the shapes to be converted into a group. + * svgString: string - Returns Promise + The SVG string representing the shapes to be converted into a group. - Returns a promise with the newly created Group containing the shapes from the SVG. + Returns Promise - Example - ``` - const svgGroup = await context.createShapeFromSvgWithImages('...'); - ``` + Returns a promise with the newly created Group containing the shapes from the SVG. + + Example + ``` + const svgGroup = await context.createShapeFromSvgWithImages('...'); + ``` createText: |- ``` - createText(text): null | Text + createText(text: string): Text | null ``` - * Creates a Text shape with the specified text content. Requires `content:write` permission. + Creates a Text shape with the specified text content. Requires `content:write` permission. - Parameters - + text: string + Parameters - The text content for the Text shape. + * text: string - Returns null | Text + The text content for the Text shape. - Returns the new created shape, if the shape wasn't created can return null. + Returns Text | null - Example - ``` - const board = penpot.createBoard();let text;text = penpot.createText();// just change the values like thistext.growType = 'auto-height';text.fontFamily = 'Work Sans';text.fontSize = '12';text.fills = [{fillColor: '#9f05ff', fillOpacity: 1}];text.strokes = [{strokeOpacity: 1, strokeStyle: 'solid', strokeWidth: 2, strokeColor: '#deabff', strokeAlignment: 'outer'}];board.appendChild(text); - ``` + Returns the new created shape, if the shape wasn't created can return null. + + Example + ``` + const board = penpot.createBoard();let text;text = penpot.createText();// just change the values like thistext.growType = 'auto-height';text.fontFamily = 'Work Sans';text.fontSize = '12';text.fills = [{fillColor: '#9f05ff', fillOpacity: 1}];text.strokes = [{strokeOpacity: 1, strokeStyle: 'solid', strokeWidth: 2, strokeColor: '#deabff', strokeAlignment: 'outer'}];board.appendChild(text); + ``` generateMarkup: |- ``` - generateMarkup(shapes, options?): string + generateMarkup(shapes: Shape[], options?: { type?: "html" | "svg" }): string ``` - * Generates markup for the given shapes. Requires `content:read` permission + Generates markup for the given shapes. Requires `content:read` permission - Parameters - + shapes: Shape[] - + options: { - type?: "html" | "svg"; - } - - Optionaltype?: "html" | "svg" + Parameters - Returns string + * shapes: Shape[] + * options: { type?: "html" | "svg" } - Example - ``` - const markup = context.generateMarkup(shapes, { type: 'html' });console.log(markup); - ``` + Returns string + + Example + ``` + const markup = context.generateMarkup(shapes, { type: 'html' });console.log(markup); + ``` generateStyle: |- ``` - generateStyle(shapes, options?): string + generateStyle( + shapes: Shape[], + options?: { + type?: "css"; + withPrelude?: boolean; + includeChildren?: boolean; + }, + ): string ``` - * Generates styles for the given shapes. Requires `content:read` permission + Generates styles for the given shapes. Requires `content:read` permission - Parameters - + shapes: Shape[] - + options: { - type?: "css"; - withPrelude?: boolean; - includeChildren?: boolean; - } - - Optionaltype?: "css" - - OptionalwithPrelude?: boolean - - OptionalincludeChildren?: boolean + Parameters - Returns string + * shapes: Shape[] + * options: { type?: "css"; withPrelude?: boolean; includeChildren?: boolean } - Example - ``` - const styles = context.generateStyle(shapes, { type: 'css' });console.log(styles); - ``` + Returns string + + Example + ``` + const styles = context.generateStyle(shapes, { type: 'css' });console.log(styles); + ``` generateFontFaces: |- ``` - generateFontFaces(shapes): Promise + generateFontFaces(shapes: Shape[]): Promise ``` - * Generates the fontfaces styles necessaries to render the shapes. - Requires `content:read` permission + Generates the fontfaces styles necessaries to render the shapes. + Requires `content:read` permission - Parameters - + shapes: Shape[] + Parameters - Returns Promise + * shapes: Shape[] - Example - ``` - const fontfaces = context.generateFontFaces(penpot.selection);console.log(fontfaces); - ``` + Returns Promise + + Example + ``` + const fontfaces = context.generateFontFaces(penpot.selection);console.log(fontfaces); + ``` addListener: |- ``` - addListener(type, callback, props?): symbol + addListener( + type: T, + callback: (event: EventsMap[T]) => void, + props?: { [key: string]: unknown }, + ): symbol ``` - * Adds the current callback as an event listener + Adds the current callback as an event listener - Type Parameters - + T extends keyof EventsMap + Type Parameters - Parameters - + type: T - + callback: ((event: EventsMap[T]) => void) - - ``` - (event): void - ``` + * T extends keyof EventsMap - * Parameters - + event: EventsMap[T] + Parameters - Returns void - + props: { - [key: string]: unknown; - } - - [key: string]: unknown + * type: T + * callback: (event: EventsMap[T]) => void + * props: { [key: string]: unknown } - Returns symbol + Returns symbol - Example - ``` - const listenerId = context.addListener('selectionchange', (event) => { console.log(event);}); - ``` + Example + ``` + const listenerId = context.addListener('selectionchange', (event) => { console.log(event);}); + ``` removeListener: |- ``` - removeListener(listenerId): void + removeListener(listenerId: symbol): void ``` - * Removes the listenerId from the list of listeners + Removes the listenerId from the list of listeners - Parameters - + listenerId: symbol + Parameters - Returns void + * listenerId: symbol - Example - ``` - context.removeListener(listenerId); - ``` + Returns void + + Example + ``` + context.removeListener(listenerId); + ``` openViewer: |- ``` openViewer(): void ``` - * Opens the viewer section. Requires `content:read` permission. + Opens the viewer section. Requires `content:read` permission. - Returns void + Returns void createPage: |- ``` createPage(): Page ``` - * Creates a new page. Requires `content:write` permission. + Creates a new page. Requires `content:write` permission. - Returns Page + Returns Page openPage: |- ``` - openPage(page, newWindow?): void + openPage(page: Page, newWindow?: boolean): void ``` - * Changes the current open page to given page. Requires `content:read` permission. + Changes the current open page to given page. Requires `content:read` permission. - Parameters - + page: Page + Parameters - the page to open - + newWindow: boolean + * page: Page - if true opens the page in a new window + the page to open + * newWindow: boolean - Returns void + if true opens the page in a new window - Example - ``` - context.openPage(page); - ``` + Returns void + + Example + ``` + context.openPage(page); + ``` alignHorizontal: |- ``` - alignHorizontal(shapes, direction): void + alignHorizontal(shapes: Shape[], direction: "center" | "left" | "right"): void ``` - * Aligning will move all the selected layers to a position relative to one - of them in the horizontal direction. + Aligning will move all the selected layers to a position relative to one + of them in the horizontal direction. - Parameters - + shapes: Shape[] + Parameters - to align - + direction: "center" | "left" | "right" + * shapes: Shape[] - where the shapes will be aligned + to align + * direction: "center" | "left" | "right" - Returns void + where the shapes will be aligned + + Returns void alignVertical: |- ``` - alignVertical(shapes, direction): void + alignVertical(shapes: Shape[], direction: "center" | "top" | "bottom"): void ``` - * Aligning will move all the selected layers to a position relative to one - of them in the vertical direction. + Aligning will move all the selected layers to a position relative to one + of them in the vertical direction. - Parameters - + shapes: Shape[] + Parameters - to align - + direction: "center" | "top" | "bottom" + * shapes: Shape[] - where the shapes will be aligned + to align + * direction: "center" | "top" | "bottom" - Returns void + where the shapes will be aligned + + Returns void distributeHorizontal: |- ``` - distributeHorizontal(shapes): void + distributeHorizontal(shapes: Shape[]): void ``` - * Distributing objects to position them horizontally with equal distances between them. + Distributing objects to position them horizontally with equal distances between them. - Parameters - + shapes: Shape[] + Parameters - to distribute + * shapes: Shape[] - Returns void + to distribute + + Returns void distributeVertical: |- ``` - distributeVertical(shapes): void + distributeVertical(shapes: Shape[]): void ``` - * Distributing objects to position them vertically with equal distances between them. + Distributing objects to position them vertically with equal distances between them. - Parameters - + shapes: Shape[] + Parameters - to distribute + * shapes: Shape[] - Returns void + to distribute + + Returns void flatten: |- ``` - flatten(shapes): Path[] + flatten(shapes: Shape[]): Path[] ``` - * Converts the shapes into Paths. If the shapes are complex will put together - all its paths into one. + Converts the shapes into Paths. If the shapes are complex will put together + all its paths into one. - Parameters - + shapes: Shape[] + Parameters - to flatten + * shapes: Shape[] - Returns Path[] + to flatten + + Returns Path[] ContextGeometryUtils: overview: |- Interface ContextGeometryUtils @@ -5286,11 +5240,8 @@ ContextGeometryUtils: ``` ``` - interface ContextGeometryUtils { - center(shapes: Shape[]): null | { - x: number; - y: number; - }; + interface ContextGeometryUtils { + center(shapes: Shape[]): { x: number; y: number } | null; } ``` @@ -5299,28 +5250,26 @@ ContextGeometryUtils: Methods: center: |- ``` - center(shapes): null | { - x: number; - y: number; - } + center(shapes: Shape[]): { x: number; y: number } | null ``` - * Calculates the center point of a given array of shapes. - This method computes the geometric center (centroid) of the bounding boxes of the provided shapes. + Calculates the center point of a given array of shapes. + This method computes the geometric center (centroid) of the bounding boxes of the provided shapes. - Parameters - + shapes: Shape[] + Parameters - The array of shapes to calculate the center for. + * shapes: Shape[] - Returns null | { x: number; y: number; } + The array of shapes to calculate the center for. - Returns the center point as an object with `x` and `y` coordinates, or null if the array is empty. + Returns { x: number; y: number } | null - Example - ``` - const centerPoint = geometryUtils.center(shapes);console.log(centerPoint); - ``` + Returns the center point as an object with `x` and `y` coordinates, or null if the array is empty. + + Example + ``` + const centerPoint = geometryUtils.center(shapes);console.log(centerPoint); + ``` ContextTypesUtils: overview: |- Interface ContextTypesUtils @@ -5334,18 +5283,20 @@ ContextTypesUtils: ``` ``` - interface ContextTypesUtils { - isBoard(shape: Shape): shape is Board; - isGroup(shape: Shape): shape is Group; - isMask(shape: Shape): shape is Group; - isBool(shape: Shape): shape is Boolean; - isRectangle(shape: Shape): shape is Rectangle; - isPath(shape: Shape): shape is Path; - isText(shape: Shape): shape is Text; - isEllipse(shape: Shape): shape is Ellipse; - isSVG(shape: Shape): shape is SvgRaw; - isVariantContainer(shape: Shape): shape is VariantContainer; - isVariantComponent(component: LibraryComponent): component is LibraryVariantComponent; + interface ContextTypesUtils { + isBoard(shape: Shape): shape is Board; + isGroup(shape: Shape): shape is Group; + isMask(shape: Shape): shape is Group; + isBool(shape: Shape): shape is Boolean; + isRectangle(shape: Shape): shape is Rectangle; + isPath(shape: Shape): shape is Path; + isText(shape: Shape): shape is Text; + isEllipse(shape: Shape): shape is Ellipse; + isSVG(shape: Shape): shape is SvgRaw; + isVariantContainer(shape: Shape): shape is VariantContainer; + isVariantComponent( + component: LibraryComponent, + ): component is LibraryVariantComponent; } ``` @@ -5354,169 +5305,182 @@ ContextTypesUtils: Methods: isBoard: |- ``` - isBoard(shape): shape is Board + isBoard(shape: Shape): shape is Board ``` - * Checks if the given shape is a board. + Checks if the given shape is a board. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Board + The shape to check. - Returns true if the shape is a board, otherwise false. + Returns shape is Board + + Returns true if the shape is a board, otherwise false. isGroup: |- ``` - isGroup(shape): shape is Group + isGroup(shape: Shape): shape is Group ``` - * Checks if the given shape is a group. + Checks if the given shape is a group. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Group + The shape to check. - Returns true if the shape is a Group, otherwise false. + Returns shape is Group + + Returns true if the shape is a Group, otherwise false. isMask: |- ``` - isMask(shape): shape is Group + isMask(shape: Shape): shape is Group ``` - * Checks if the given shape is a mask. + Checks if the given shape is a mask. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Group + The shape to check. - Returns true if the shape is a Group (acting as a mask), otherwise false. + Returns shape is Group + + Returns true if the shape is a Group (acting as a mask), otherwise false. isBool: |- ``` - isBool(shape): shape is Boolean + isBool(shape: Shape): shape is Boolean ``` - * Checks if the given shape is a boolean operation. + Checks if the given shape is a boolean operation. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Boolean + The shape to check. - Returns true if the shape is a Bool, otherwise false. + Returns shape is Boolean + + Returns true if the shape is a Bool, otherwise false. isRectangle: |- ``` - isRectangle(shape): shape is Rectangle + isRectangle(shape: Shape): shape is Rectangle ``` - * Checks if the given shape is a rectangle. + Checks if the given shape is a rectangle. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Rectangle + The shape to check. - Returns true if the shape is a Rectangle, otherwise false. + Returns shape is Rectangle + + Returns true if the shape is a Rectangle, otherwise false. isPath: |- ``` - isPath(shape): shape is Path + isPath(shape: Shape): shape is Path ``` - * Checks if the given shape is a path. + Checks if the given shape is a path. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Path + The shape to check. - Returns true if the shape is a Path, otherwise false. + Returns shape is Path + + Returns true if the shape is a Path, otherwise false. isText: |- ``` - isText(shape): shape is Text + isText(shape: Shape): shape is Text ``` - * Checks if the given shape is a text element. + Checks if the given shape is a text element. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Text + The shape to check. - Returns true if the shape is a Text, otherwise false. + Returns shape is Text + + Returns true if the shape is a Text, otherwise false. isEllipse: |- ``` - isEllipse(shape): shape is Ellipse + isEllipse(shape: Shape): shape is Ellipse ``` - * Checks if the given shape is an ellipse. + Checks if the given shape is an ellipse. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Ellipse + The shape to check. - Returns true if the shape is an Ellipse, otherwise false. + Returns shape is Ellipse + + Returns true if the shape is an Ellipse, otherwise false. isSVG: |- ``` - isSVG(shape): shape is SvgRaw + isSVG(shape: Shape): shape is SvgRaw ``` - * Checks if the given shape is an SVG. + Checks if the given shape is an SVG. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is SvgRaw + The shape to check. - Returns true if the shape is a SvgRaw, otherwise false. + Returns shape is SvgRaw + + Returns true if the shape is a SvgRaw, otherwise false. isVariantContainer: |- ``` - isVariantContainer(shape): shape is VariantContainer + isVariantContainer(shape: Shape): shape is VariantContainer ``` - * Checks if the given shape is a variant container. + Checks if the given shape is a variant container. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is VariantContainer + The shape to check. - Returns true if the shape is a variant container, otherwise false. + Returns shape is VariantContainer + + Returns true if the shape is a variant container, otherwise false. isVariantComponent: |- ``` - isVariantComponent(component): component is LibraryVariantComponent + isVariantComponent( + component: LibraryComponent, + ): component is LibraryVariantComponent ``` - * Checks if the given component is a VariantComponent. + Checks if the given component is a VariantComponent. - Parameters - + component: LibraryComponent + Parameters - The component to check. + * component: LibraryComponent - Returns component is LibraryVariantComponent + The component to check. - Returns true if the component is a VariantComponent, otherwise false. + Returns component is LibraryVariantComponent + + Returns true if the component is a VariantComponent, otherwise false. ContextUtils: overview: |- Interface ContextUtils @@ -5525,9 +5489,9 @@ ContextUtils: Utility methods for various operations in Penpot. ``` - interface ContextUtils { - geometry: ContextGeometryUtils; - types: ContextTypesUtils; + interface ContextUtils { + geometry: ContextGeometryUtils; + types: ContextTypesUtils; } ``` @@ -5566,15 +5530,10 @@ Dissolve: Dissolve animation ``` - interface Dissolve { - type: "dissolve"; - duration: number; - easing?: - | "linear" - | "ease" - | "ease-in" - | "ease-out" - | "ease-in-out"; + interface Dissolve { + type: "dissolve"; + duration: number; + easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"; } ``` @@ -5583,7 +5542,7 @@ Dissolve: Properties: type: |- ``` - readonly type + readonly type: "dissolve" ``` Type of the animation @@ -5595,12 +5554,7 @@ Dissolve: Duration of the animation effect easing: |- ``` - readonly easing?: - | "linear" - | "ease" - | "ease-in" - | "ease-out" - | "ease-in-out" + readonly easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" ``` Function that the dissolve effect will follow for the interpolation. @@ -5614,48 +5568,38 @@ Ellipse: This interface extends `ShapeBase` and includes properties specific to ellipses. ``` - interface Ellipse { - type: "ellipse"; - fills: Fill[]; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Ellipse { + type: "ellipse"; + fills: Fill[]; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -5671,58 +5615,57 @@ Ellipse: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Ellipse @@ -5732,7 +5675,7 @@ Ellipse: Properties: type: |- ``` - type + type: "ellipse" ``` fills: |- ``` @@ -5756,7 +5699,7 @@ Ellipse: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -5833,23 +5776,13 @@ Ellipse: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -5891,7 +5824,7 @@ Ellipse: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -5993,9 +5926,7 @@ Ellipse: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -6014,454 +5945,466 @@ Ellipse: Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void EventsMap: overview: |- Interface EventsMap @@ -6476,14 +6419,14 @@ EventsMap: ``` ``` - interface EventsMap { - pagechange: Page; - filechange: File; - selectionchange: string[]; - themechange: Theme; - finish: string; - shapechange: Shape; - contentsave: void; + interface EventsMap { + pagechange: Page; + filechange: File; + selectionchange: string[]; + themechange: Theme; + finish: string; + shapechange: Shape; + contentsave: void; } ``` @@ -6543,15 +6486,11 @@ Export: This interface includes properties for defining export configurations. ``` - interface Export { - type: - | "svg" - | "png" - | "jpeg" - | "pdf"; - scale?: number; - suffix?: string; - skipChildren?: boolean; + interface Export { + type: "svg" | "png" | "jpeg" | "pdf"; + scale?: number; + suffix?: string; + skipChildren?: boolean; } ``` @@ -6560,11 +6499,7 @@ Export: Properties: type: |- ``` - type: - | "svg" - | "png" - | "jpeg" - | "pdf" + type: "svg" | "png" | "jpeg" | "pdf" ``` Type of the file to export. Can be one of the following values: png, jpeg, svg, pdf @@ -6595,26 +6530,27 @@ File: It includes properties for the file's identifier, name, and revision number. ``` - interface File { - id: string; - name: string; - revn: number; - pages: Page[]; - export(exportType: "penpot" | "zip", libraryExportType?: "all" | "merge" | "detach"): Promise; - findVersions(criteria?: { - createdBy: User; - }): Promise; - saveVersion(label: string): Promise; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface File { + id: string; + name: string; + revn: number; + pages: Page[]; + export( + exportType: "penpot" | "zip", + libraryExportType?: "all" | "merge" | "detach", + ): Promise>; + findVersions(criteria?: { createdBy: User }): Promise; + saveVersion(label: string): Promise; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * PluginData + File @@ -6649,163 +6585,171 @@ File: Methods: export: |- ``` - export(exportType, libraryExportType?): Promise + export( + exportType: "penpot" | "zip", + libraryExportType?: "all" | "merge" | "detach", + ): Promise> ``` - * Parameters - + exportType: "penpot" | "zip" - + libraryExportType: "all" | "merge" | "detach" + Parameters - Returns Promise + * exportType: "penpot" | "zip" + * libraryExportType: "all" | "merge" | "detach" + + Returns Promise> findVersions: |- ``` - findVersions(criteria?): Promise + findVersions(criteria?: { createdBy: User }): Promise ``` - * Retrieves the versions for the file. + Retrieves the versions for the file. - Parameters - + criteria: { - createdBy: User; - } - - createdBy: User + Parameters - Returns Promise + * criteria: { createdBy: User } + + Returns Promise saveVersion: |- ``` - saveVersion(label): Promise + saveVersion(label: string): Promise ``` - * Saves the current version into the versions history. - Requires the `content:write` permission. + Saves the current version into the versions history. + Requires the `content:write` permission. - Parameters - + label: string + Parameters - Returns Promise + * label: string + + Returns Promise getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` FileVersion: overview: |- Interface FileVersion @@ -6814,14 +6758,14 @@ FileVersion: Type defining the file version properties. ``` - interface FileVersion { - label: string; - createdBy?: User; - createdAt: Date; - isAutosave: boolean; - restore(): void; - remove(): Promise; - pin(): Promise; + interface FileVersion { + label: string; + createdBy?: User; + createdAt: Date; + isAutosave: boolean; + restore(): void; + remove(): Promise; + pin(): Promise; } ``` @@ -6859,25 +6803,25 @@ FileVersion: restore(): void ``` - * Returns void + Returns void remove: |- ``` remove(): Promise ``` - * Remove the current version. - Requires the `content:write` permission. + Remove the current version. + Requires the `content:write` permission. - Returns Promise + Returns Promise pin: |- ``` pin(): Promise ``` - * Converts an autosave version into a permanent version. - Requires the `content:write` permission. + Converts an autosave version into a permanent version. + Requires the `content:write` permission. - Returns Promise + Returns Promise Fill: overview: |- Interface Fill @@ -6887,13 +6831,13 @@ Fill: This interface includes properties for defining solid color fills, gradient fills, and image fills. ``` - interface Fill { - fillColor?: string; - fillOpacity?: number; - fillColorGradient?: Gradient; - fillColorRefFile?: string; - fillColorRefId?: string; - fillImage?: ImageData; + interface Fill { + fillColor?: string; + fillOpacity?: number; + fillColorGradient?: Gradient; + fillColorRefFile?: string; + fillColorRefId?: string; + fillImage?: ImageData; } ``` @@ -6945,8 +6889,8 @@ Flags: This subcontext allows the API o change certain defaults ``` - interface Flags { - naturalChildOrdering: boolean; + interface Flags { + naturalChildOrdering: boolean; } ``` @@ -6972,55 +6916,48 @@ FlexLayout: wrapping behavior, and child management of a flex layout. ``` - interface FlexLayout { - alignItems?: - | "center" - | "start" - | "end" - | "stretch"; - alignContent?: + interface FlexLayout { + alignItems?: "center" | "start" | "end" | "stretch"; + alignContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" - | "space-evenly"; - justifyItems?: - | "center" - | "start" - | "end" - | "stretch"; - justifyContent?: + | "space-evenly"; + justifyItems?: "center" + | "start" + | "end" + | "stretch"; + justifyContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" - | "space-evenly"; - rowGap: number; - columnGap: number; - verticalPadding: number; - horizontalPadding: number; - topPadding: number; - rightPadding: number; - bottomPadding: number; - leftPadding: number; - horizontalSizing: "fill" | "auto" | "fit-content"; - verticalSizing: "fill" | "auto" | "fit-content"; - remove(): void; - dir: - | "row" - | "row-reverse" - | "column" - | "column-reverse"; - wrap?: "wrap" | "nowrap"; - appendChild(child: Shape): void; + | "space-evenly"; + rowGap: number; + columnGap: number; + verticalPadding: number; + horizontalPadding: number; + topPadding: number; + rightPadding: number; + bottomPadding: number; + leftPadding: number; + horizontalSizing: "fill" + | "auto" + | "fit-content"; + verticalSizing: "fill" | "auto" | "fit-content"; + remove(): void; + dir: "row" | "row-reverse" | "column" | "column-reverse"; + wrap?: "wrap" | "nowrap"; + appendChild(child: Shape): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * CommonLayout + FlexLayout @@ -7030,11 +6967,7 @@ FlexLayout: Properties: alignItems: |- ``` - alignItems?: - | "center" - | "start" - | "end" - | "stretch" + alignItems?: "center" | "start" | "end" | "stretch" ``` The `alignItems` property specifies the default alignment for items inside the container. @@ -7046,7 +6979,7 @@ FlexLayout: * 'stretch': Items are stretched to fill the container. alignContent: |- ``` - alignContent?: + alignContent?: | "center" | "start" | "end" @@ -7068,11 +7001,7 @@ FlexLayout: * 'stretch': Content is stretched to fill the container. justifyItems: |- ``` - justifyItems?: - | "center" - | "start" - | "end" - | "stretch" + justifyItems?: "center" | "start" | "end" | "stretch" ``` The `justifyItems` property specifies the default justification for items inside the container. @@ -7084,7 +7013,7 @@ FlexLayout: * 'stretch': Items are stretched to fill the container. justifyContent: |- ``` - justifyContent?: + justifyContent?: | "center" | "start" | "end" @@ -7176,11 +7105,7 @@ FlexLayout: * 'auto': The container size is determined automatically. dir: |- ``` - dir: - | "row" - | "row-reverse" - | "column" - | "column-reverse" + dir: "row" | "row-reverse" | "column" | "column-reverse" ``` The direction of the flex layout. @@ -7204,27 +7129,28 @@ FlexLayout: remove(): void ``` - * The `remove` method removes the layout. + The `remove` method removes the layout. - Returns void + Returns void appendChild: |- ``` - appendChild(child): void + appendChild(child: Shape): void ``` - * Appends a child element to the flex layout. + Appends a child element to the flex layout. - Parameters - + child: Shape + Parameters - The child element to be appended, of type `Shape`. + * child: Shape - Returns void + The child element to be appended, of type `Shape`. - Example - ``` - flexLayout.appendChild(childShape); - ``` + Returns void + + Example + ``` + flexLayout.appendChild(childShape); + ``` Flow: overview: |- Interface Flow @@ -7233,11 +7159,11 @@ Flow: Defines an interaction flow inside penpot. A flow is defined by a starting board for an interaction. ``` - interface Flow { - page: Page; - name: string; - startingBoard: Board; - remove(): void; + interface Flow { + page: Page; + name: string; + startingBoard: Board; + remove(): void; } ``` @@ -7268,9 +7194,9 @@ Flow: remove(): void ``` - * Removes the flow from the page + Removes the flow from the page - Returns void + Returns void Font: overview: |- Interface Font @@ -7280,16 +7206,16 @@ Font: This interface provides properties and methods for describing and applying fonts within Penpot. ``` - interface Font { - name: string; - fontId: string; - fontFamily: string; - fontStyle?: null | "normal" | "italic"; - fontVariantId: string; - fontWeight: string; - variants: FontVariant[]; - applyToText(text: Text, variant?: FontVariant): void; - applyToRange(range: TextRange, variant?: FontVariant): void; + interface Font { + name: string; + fontId: string; + fontFamily: string; + fontStyle?: "normal" | "italic" | null; + fontVariantId: string; + fontWeight: string; + variants: FontVariant[]; + applyToText(text: Text, variant?: FontVariant): void; + applyToRange(range: TextRange, variant?: FontVariant): void; } ``` @@ -7316,7 +7242,7 @@ Font: The font family of the font. fontStyle: |- ``` - fontStyle?: null | "normal" | "italic" + fontStyle?: "normal" | "italic" | null ``` The default font style of the font. @@ -7341,46 +7267,48 @@ Font: Methods: applyToText: |- ``` - applyToText(text, variant?): void + applyToText(text: Text, variant?: FontVariant): void ``` - * Applies the font styles to a text shape. + Applies the font styles to a text shape. - Parameters - + text: Text + Parameters - The text shape to apply the font styles to. - + variant: FontVariant + * text: Text - Optional. The specific font variant to apply. If not provided, applies the default variant. + The text shape to apply the font styles to. + * variant: FontVariant - Returns void + Optional. The specific font variant to apply. If not provided, applies the default variant. - Example - ``` - font.applyToText(textShape, fontVariant); - ``` + Returns void + + Example + ``` + font.applyToText(textShape, fontVariant); + ``` applyToRange: |- ``` - applyToRange(range, variant?): void + applyToRange(range: TextRange, variant?: FontVariant): void ``` - * Applies the font styles to a text range within a text shape. + Applies the font styles to a text range within a text shape. - Parameters - + range: TextRange + Parameters - The text range to apply the font styles to. - + variant: FontVariant + * range: TextRange - Optional. The specific font variant to apply. If not provided, applies the default variant. + The text range to apply the font styles to. + * variant: FontVariant - Returns void + Optional. The specific font variant to apply. If not provided, applies the default variant. - Example - ``` - font.applyToRange(textRange, fontVariant); - ``` + Returns void + + Example + ``` + font.applyToRange(textRange, fontVariant); + ``` FontVariant: overview: |- Interface FontVariant @@ -7390,11 +7318,11 @@ FontVariant: This interface provides properties for describing the characteristics of a font variant. ``` - interface FontVariant { - name: string; - fontVariantId: string; - fontWeight: string; - fontStyle: "normal" | "italic"; + interface FontVariant { + name: string; + fontVariantId: string; + fontWeight: string; + fontStyle: "normal" | "italic"; } ``` @@ -7434,12 +7362,12 @@ FontsContext: This interface provides methods to interact with fonts, such as retrieving fonts by ID or name. ``` - interface FontsContext { - all: Font[]; - findById(id: string): null | Font; - findByName(name: string): null | Font; - findAllById(id: string): Font[]; - findAllByName(name: string): Font[]; + interface FontsContext { + all: Font[]; + findById(id: string): Font | null; + findByName(name: string): Font | null; + findAllById(id: string): Font[]; + findAllByName(name: string): Font[]; } ``` @@ -7455,84 +7383,88 @@ FontsContext: Methods: findById: |- ``` - findById(id): null | Font + findById(id: string): Font | null ``` - * Finds a font by its unique identifier. + Finds a font by its unique identifier. - Parameters - + id: string + Parameters - The ID of the font to find. + * id: string - Returns null | Font + The ID of the font to find. - Returns the `Font` object if found, otherwise `null`. + Returns Font | null - Example - ``` - const font = fontsContext.findById('font-id');if (font) { console.log(font.name);} - ``` + Returns the `Font` object if found, otherwise `null`. + + Example + ``` + const font = fontsContext.findById('font-id');if (font) { console.log(font.name);} + ``` findByName: |- ``` - findByName(name): null | Font + findByName(name: string): Font | null ``` - * Finds a font by its name. + Finds a font by its name. - Parameters - + name: string + Parameters - The name of the font to find. + * name: string - Returns null | Font + The name of the font to find. - Returns the `Font` object if found, otherwise `null`. + Returns Font | null - Example - ``` - const font = fontsContext.findByName('font-name');if (font) { console.log(font.name);} - ``` + Returns the `Font` object if found, otherwise `null`. + + Example + ``` + const font = fontsContext.findByName('font-name');if (font) { console.log(font.name);} + ``` findAllById: |- ``` - findAllById(id): Font[] + findAllById(id: string): Font[] ``` - * Finds all fonts matching a specific ID. + Finds all fonts matching a specific ID. - Parameters - + id: string + Parameters - The ID to match against. + * id: string - Returns Font[] + The ID to match against. - Returns an array of `Font` objects matching the provided ID. + Returns Font[] - Example - ``` - const fonts = fontsContext.findAllById('font-id');console.log(fonts); - ``` + Returns an array of `Font` objects matching the provided ID. + + Example + ``` + const fonts = fontsContext.findAllById('font-id');console.log(fonts); + ``` findAllByName: |- ``` - findAllByName(name): Font[] + findAllByName(name: string): Font[] ``` - * Finds all fonts matching a specific name. + Finds all fonts matching a specific name. - Parameters - + name: string + Parameters - The name to match against. + * name: string - Returns Font[] + The name to match against. - Returns an array of `Font` objects matching the provided name. + Returns Font[] - Example - ``` - const fonts = fontsContext.findAllByName('font-name');console.log(fonts); - ``` + Returns an array of `Font` objects matching the provided name. + + Example + ``` + const fonts = fontsContext.findAllByName('font-name');console.log(fonts); + ``` GridLayout: overview: |- Interface GridLayout @@ -7542,60 +7474,57 @@ GridLayout: It includes properties and methods to manage rows, columns, and child elements within the grid. ``` - interface GridLayout { - alignItems?: - | "center" - | "start" - | "end" - | "stretch"; - alignContent?: + interface GridLayout { + alignItems?: "center" | "start" | "end" | "stretch"; + alignContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" - | "space-evenly"; - justifyItems?: - | "center" - | "start" - | "end" - | "stretch"; - justifyContent?: + | "space-evenly"; + justifyItems?: "center" + | "start" + | "end" + | "stretch"; + justifyContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" - | "space-evenly"; - rowGap: number; - columnGap: number; - verticalPadding: number; - horizontalPadding: number; - topPadding: number; - rightPadding: number; - bottomPadding: number; - leftPadding: number; - horizontalSizing: "fill" | "auto" | "fit-content"; - verticalSizing: "fill" | "auto" | "fit-content"; - remove(): void; - dir: "row" | "column"; - rows: Track[]; - columns: Track[]; - addRow(type: TrackType, value?: number): void; - addRowAtIndex(index: number, type: TrackType, value?: number): void; - addColumn(type: TrackType, value?: number): void; - addColumnAtIndex(index: number, type: TrackType, value: number): void; - removeRow(index: number): void; - removeColumn(index: number): void; - setColumn(index: number, type: TrackType, value?: number): void; - setRow(index: number, type: TrackType, value?: number): void; - appendChild(child: Shape, row: number, column: number): void; + | "space-evenly"; + rowGap: number; + columnGap: number; + verticalPadding: number; + horizontalPadding: number; + topPadding: number; + rightPadding: number; + bottomPadding: number; + leftPadding: number; + horizontalSizing: "fill" + | "auto" + | "fit-content"; + verticalSizing: "fill" | "auto" | "fit-content"; + remove(): void; + dir: "row" | "column"; + rows: Track[]; + columns: Track[]; + addRow(type: TrackType, value?: number): void; + addRowAtIndex(index: number, type: TrackType, value?: number): void; + addColumn(type: TrackType, value?: number): void; + addColumnAtIndex(index: number, type: TrackType, value: number): void; + removeRow(index: number): void; + removeColumn(index: number): void; + setColumn(index: number, type: TrackType, value?: number): void; + setRow(index: number, type: TrackType, value?: number): void; + appendChild(child: Shape, row: number, column: number): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * CommonLayout + GridLayout @@ -7605,11 +7534,7 @@ GridLayout: Properties: alignItems: |- ``` - alignItems?: - | "center" - | "start" - | "end" - | "stretch" + alignItems?: "center" | "start" | "end" | "stretch" ``` The `alignItems` property specifies the default alignment for items inside the container. @@ -7621,7 +7546,7 @@ GridLayout: * 'stretch': Items are stretched to fill the container. alignContent: |- ``` - alignContent?: + alignContent?: | "center" | "start" | "end" @@ -7643,11 +7568,7 @@ GridLayout: * 'stretch': Content is stretched to fill the container. justifyItems: |- ``` - justifyItems?: - | "center" - | "start" - | "end" - | "stretch" + justifyItems?: "center" | "start" | "end" | "stretch" ``` The `justifyItems` property specifies the default justification for items inside the container. @@ -7659,7 +7580,7 @@ GridLayout: * 'stretch': Items are stretched to fill the container. justifyContent: |- ``` - justifyContent?: + justifyContent?: | "center" | "start" | "end" @@ -7776,207 +7697,216 @@ GridLayout: remove(): void ``` - * The `remove` method removes the layout. + The `remove` method removes the layout. - Returns void + Returns void addRow: |- ``` - addRow(type, value?): void + addRow(type: TrackType, value?: number): void ``` - * Adds a new row to the grid. + Adds a new row to the grid. - Parameters - + type: TrackType + Parameters - The type of the row to add. - + value: number + * type: TrackType - The value associated with the row type (optional). + The type of the row to add. + * value: number - Returns void + The value associated with the row type (optional). - Example - ``` - const board = penpot.createBoard();const grid = board.addGridLayout();grid.addRow("flex", 1); - ``` + Returns void + + Example + ``` + const board = penpot.createBoard();const grid = board.addGridLayout();grid.addRow("flex", 1); + ``` addRowAtIndex: |- ``` - addRowAtIndex(index, type, value?): void + addRowAtIndex(index: number, type: TrackType, value?: number): void ``` - * Adds a new row to the grid at the specified index. + Adds a new row to the grid at the specified index. - Parameters - + index: number + Parameters - The index at which to add the row. - + type: TrackType + * index: number - The type of the row to add. - + value: number + The index at which to add the row. + * type: TrackType - The value associated with the row type (optional). + The type of the row to add. + * value: number - Returns void + The value associated with the row type (optional). - Example - ``` - gridLayout.addRowAtIndex(0, 'fixed', 100); - ``` + Returns void + + Example + ``` + gridLayout.addRowAtIndex(0, 'fixed', 100); + ``` addColumn: |- ``` - addColumn(type, value?): void + addColumn(type: TrackType, value?: number): void ``` - * Adds a new column to the grid. + Adds a new column to the grid. - Parameters - + type: TrackType + Parameters - The type of the column to add. - + value: number + * type: TrackType - The value associated with the column type (optional). + The type of the column to add. + * value: number - Returns void + The value associated with the column type (optional). - Example - ``` - const board = penpot.createBoard();const grid = board.addGridLayout();grid.addColumn('percent', 50); - ``` + Returns void + + Example + ``` + const board = penpot.createBoard();const grid = board.addGridLayout();grid.addColumn('percent', 50); + ``` addColumnAtIndex: |- ``` - addColumnAtIndex(index, type, value): void + addColumnAtIndex(index: number, type: TrackType, value: number): void ``` - * Adds a new column to the grid at the specified index. + Adds a new column to the grid at the specified index. - Parameters - + index: number + Parameters - The index at which to add the column. - + type: TrackType + * index: number - The type of the column to add. - + value: number + The index at which to add the column. + * type: TrackType - The value associated with the column type. + The type of the column to add. + * value: number - Returns void + The value associated with the column type. - Example - ``` - gridLayout.addColumnAtIndex(1, 'auto'); - ``` + Returns void + + Example + ``` + gridLayout.addColumnAtIndex(1, 'auto'); + ``` removeRow: |- ``` - removeRow(index): void + removeRow(index: number): void ``` - * Removes a row from the grid at the specified index. + Removes a row from the grid at the specified index. - Parameters - + index: number + Parameters - The index of the row to remove. + * index: number - Returns void + The index of the row to remove. - Example - ``` - gridLayout.removeRow(2); - ``` + Returns void + + Example + ``` + gridLayout.removeRow(2); + ``` removeColumn: |- ``` - removeColumn(index): void + removeColumn(index: number): void ``` - * Removes a column from the grid at the specified index. + Removes a column from the grid at the specified index. - Parameters - + index: number + Parameters - The index of the column to remove. + * index: number - Returns void + The index of the column to remove. - Example - ``` - gridLayout.removeColumn(3); - ``` + Returns void + + Example + ``` + gridLayout.removeColumn(3); + ``` setColumn: |- ``` - setColumn(index, type, value?): void + setColumn(index: number, type: TrackType, value?: number): void ``` - * Sets the properties of a column at the specified index. + Sets the properties of a column at the specified index. - Parameters - + index: number + Parameters - The index of the column to set. - + type: TrackType + * index: number - The type of the column. - + value: number + The index of the column to set. + * type: TrackType - The value associated with the column type (optional). + The type of the column. + * value: number - Returns void + The value associated with the column type (optional). - Example - ``` - gridLayout.setColumn(0, 'fixed', 200); - ``` + Returns void + + Example + ``` + gridLayout.setColumn(0, 'fixed', 200); + ``` setRow: |- ``` - setRow(index, type, value?): void + setRow(index: number, type: TrackType, value?: number): void ``` - * Sets the properties of a row at the specified index. + Sets the properties of a row at the specified index. - Parameters - + index: number + Parameters - The index of the row to set. - + type: TrackType + * index: number - The type of the row. - + value: number + The index of the row to set. + * type: TrackType - The value associated with the row type (optional). + The type of the row. + * value: number - Returns void + The value associated with the row type (optional). - Example - ``` - gridLayout.setRow(1, 'flex'); - ``` + Returns void + + Example + ``` + gridLayout.setRow(1, 'flex'); + ``` appendChild: |- ``` - appendChild(child, row, column): void + appendChild(child: Shape, row: number, column: number): void ``` - * Appends a child element to the grid at the specified row and column. + Appends a child element to the grid at the specified row and column. - Parameters - + child: Shape + Parameters - The child element to append. - + row: number + * child: Shape - The row index where the child will be placed. - + column: number + The child element to append. + * row: number - The column index where the child will be placed. + The row index where the child will be placed. + * column: number - Returns void + The column index where the child will be placed. - Example - ``` - gridLayout.appendChild(childShape, 0, 1); - ``` + Returns void + + Example + ``` + gridLayout.appendChild(childShape, 0, 1); + ``` Group: overview: |- Interface Group @@ -7986,53 +7916,43 @@ Group: This interface extends `ShapeBase` and includes properties and methods specific to groups. ``` - interface Group { - type: "group"; - children: Shape[]; - appendChild(child: Shape): void; - insertChild(index: number, child: Shape): void; - isMask(): boolean; - makeMask(): void; - removeMask(): void; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Group { + type: "group"; + children: Shape[]; + appendChild(child: Shape): void; + insertChild(index: number, child: Shape): void; + isMask(): boolean; + makeMask(): void; + removeMask(): void; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -8048,59 +7968,59 @@ Group: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - fills: Fill[] | "mixed"; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + fills: Fill[] + | "mixed"; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Group @@ -8110,7 +8030,7 @@ Group: Properties: type: |- ``` - readonly type + readonly type: "group" ``` The type of the shape, which is always 'group' for groups. @@ -8134,7 +8054,7 @@ Group: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -8211,23 +8131,13 @@ Group: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -8269,7 +8179,7 @@ Group: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -8377,9 +8287,7 @@ Group: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -8398,518 +8306,532 @@ Group: Methods: appendChild: |- ``` - appendChild(child): void + appendChild(child: Shape): void ``` - * Appends a child shape to the group. + Appends a child shape to the group. - Parameters - + child: Shape + Parameters - The child shape to append. + * child: Shape - Returns void + The child shape to append. - Example - ``` - group.appendChild(childShape); - ``` + Returns void + + Example + ``` + group.appendChild(childShape); + ``` insertChild: |- ``` - insertChild(index, child): void + insertChild(index: number, child: Shape): void ``` - * Inserts a child shape at the specified index within the group. + Inserts a child shape at the specified index within the group. - Parameters - + index: number + Parameters - The index at which to insert the child shape. - + child: Shape + * index: number - The child shape to insert. + The index at which to insert the child shape. + * child: Shape - Returns void + The child shape to insert. - Example - ``` - group.insertChild(0, childShape); - ``` + Returns void + + Example + ``` + group.insertChild(0, childShape); + ``` isMask: |- ``` isMask(): boolean ``` - * Checks if the group is currently a mask. - A mask defines a clipping path for its child shapes. + Checks if the group is currently a mask. + A mask defines a clipping path for its child shapes. - Returns boolean + Returns boolean makeMask: |- ``` makeMask(): void ``` - * Converts the group into a mask. + Converts the group into a mask. - Returns void + Returns void removeMask: |- ``` removeMask(): void ``` - * Removes the mask from the group. + Removes the mask from the group. - Returns void + Returns void getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void GuideColumn: overview: |- Interface GuideColumn @@ -8919,10 +8841,10 @@ GuideColumn: This interface includes properties for defining the type, visibility, and parameters of column guides within a board. ``` - interface GuideColumn { - type: "column"; - display: boolean; - params: GuideColumnParams; + interface GuideColumn { + type: "column"; + display: boolean; + params: GuideColumnParams; } ``` @@ -8931,7 +8853,7 @@ GuideColumn: Properties: type: |- ``` - type + type: "column" ``` The type of the guide, which is always 'column' for column guides. @@ -8956,20 +8878,13 @@ GuideColumnParams: This interface includes properties for defining the appearance and layout of column guides within a board. ``` - interface GuideColumnParams { - color: { - color: string; - opacity: number; - }; - type?: - | "center" - | "left" - | "right" - | "stretch"; - size?: number; - margin?: number; - itemLength?: number; - gutter?: number; + interface GuideColumnParams { + color: { color: string; opacity: number }; + type?: "center" | "left" | "right" | "stretch"; + size?: number; + margin?: number; + itemLength?: number; + gutter?: number; } ``` @@ -8978,20 +8893,13 @@ GuideColumnParams: Properties: color: |- ``` - color: { - color: string; - opacity: number; - } + color: { color: string; opacity: number } ``` The color configuration for the column guides. type: |- ``` - type?: - | "center" - | "left" - | "right" - | "stretch" + type?: "center" | "left" | "right" | "stretch" ``` The optional alignment type of the column guides. @@ -9033,10 +8941,10 @@ GuideRow: This interface includes properties for defining the type, visibility, and parameters of row guides within a board. ``` - interface GuideRow { - type: "row"; - display: boolean; - params: GuideColumnParams; + interface GuideRow { + type: "row"; + display: boolean; + params: GuideColumnParams; } ``` @@ -9045,7 +8953,7 @@ GuideRow: Properties: type: |- ``` - type + type: "row" ``` The type of the guide, which is always 'row' for row guides. @@ -9071,10 +8979,10 @@ GuideSquare: This interface includes properties for defining the type, visibility, and parameters of square guides within a board. ``` - interface GuideSquare { - type: "square"; - display: boolean; - params: GuideSquareParams; + interface GuideSquare { + type: "square"; + display: boolean; + params: GuideSquareParams; } ``` @@ -9083,7 +8991,7 @@ GuideSquare: Properties: type: |- ``` - type + type: "square" ``` The type of the guide, which is always 'square' for square guides. @@ -9108,12 +9016,9 @@ GuideSquareParams: This interface includes properties for defining the appearance and size of square guides within a board. ``` - interface GuideSquareParams { - color: { - color: string; - opacity: number; - }; - size?: number; + interface GuideSquareParams { + color: { color: string; opacity: number }; + size?: number; } ``` @@ -9122,10 +9027,7 @@ GuideSquareParams: Properties: color: |- ``` - color: { - color: string; - opacity: number; - } + color: { color: string; opacity: number } ``` The color configuration for the square guides. @@ -9143,9 +9045,9 @@ HistoryContext: This object allows to access to some history functions ``` - interface HistoryContext { - undoBlockBegin(): Symbol; - undoBlockFinish(blockId: Symbol): void; + interface HistoryContext { + undoBlockBegin(): Symbol; + undoBlockFinish(blockId: Symbol): void; } ``` @@ -9157,30 +9059,31 @@ HistoryContext: undoBlockBegin(): Symbol ``` - * Starts an undo block. All operations done inside this block will be undone together until - a call to `undoBlockFinish` is called. + Starts an undo block. All operations done inside this block will be undone together until + a call to `undoBlockFinish` is called. - Returns Symbol + Returns Symbol - the block identifier + the block identifier undoBlockFinish: |- ``` - undoBlockFinish(blockId): void + undoBlockFinish(blockId: Symbol): void ``` - * Ends the undo block started with `undoBlockBegin` + Ends the undo block started with `undoBlockBegin` - Parameters - + blockId: Symbol + Parameters - is the id returned by `undoBlockBegin` + * blockId: Symbol - Returns void + is the id returned by `undoBlockBegin` - Example - ``` - historyContext.undoBlockFinish(blockId); - ``` + Returns void + + Example + ``` + historyContext.undoBlockFinish(blockId); + ``` Image: overview: |- Interface Image @@ -9190,48 +9093,38 @@ Image: This interface extends `ShapeBase` and includes properties specific to image shapes. ``` - interface Image { - type: "image"; - fills: Fill[]; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Image { + type: "image"; + fills: Fill[]; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -9247,58 +9140,57 @@ Image: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Image @@ -9308,7 +9200,7 @@ Image: Properties: type: |- ``` - type + type: "image" ``` fills: |- ``` @@ -9332,7 +9224,7 @@ Image: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -9409,23 +9301,13 @@ Image: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -9467,7 +9349,7 @@ Image: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -9569,9 +9451,7 @@ Image: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -9590,454 +9470,466 @@ Image: Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void Interaction: overview: |- Interface Interaction @@ -10046,12 +9938,12 @@ Interaction: Penpot allows you to prototype interactions by connecting boards, which can act as screens. ``` - interface Interaction { - shape?: Shape; - trigger: Trigger; - delay?: null | number; - action: Action; - remove(): void; + interface Interaction { + shape?: Shape; + trigger: Trigger; + delay?: number | null; + action: Action; + remove(): void; } ``` @@ -10072,7 +9964,7 @@ Interaction: The user action that will start the interaction. delay: |- ``` - delay?: null | number + delay?: number | null ``` Time in **milliseconds** after the action will happen. Only applies to `after-delay` triggers. @@ -10088,9 +9980,9 @@ Interaction: remove(): void ``` - * Removes the interaction + Removes the interaction - Returns void + Returns void LayoutCellProperties: overview: |- Interface LayoutCellProperties @@ -10099,13 +9991,13 @@ LayoutCellProperties: Properties for defining the layout of a cell in Penpot. ``` - interface LayoutCellProperties { - row?: number; - rowSpan?: number; - column?: number; - columnSpan?: number; - areaName?: string; - position?: "area" | "auto" | "manual"; + interface LayoutCellProperties { + row?: number; + rowSpan?: number; + column?: number; + columnSpan?: number; + areaName?: string; + position?: "area" | "auto" | "manual"; } ``` members: @@ -10160,27 +10052,22 @@ LayoutChildProperties: Properties for defining the layout of a child element in Penpot. ``` - interface LayoutChildProperties { - absolute: boolean; - zIndex: number; - horizontalSizing: "fill" | "auto" | "fix"; - verticalSizing: "fill" | "auto" | "fix"; - alignSelf: - | "center" - | "auto" - | "start" - | "end" - | "stretch"; - horizontalMargin: number; - verticalMargin: number; - topMargin: number; - rightMargin: number; - bottomMargin: number; - leftMargin: number; - maxWidth: null | number; - maxHeight: null | number; - minWidth: null | number; - minHeight: null | number; + interface LayoutChildProperties { + absolute: boolean; + zIndex: number; + horizontalSizing: "fill" | "auto" | "fix"; + verticalSizing: "fill" | "auto" | "fix"; + alignSelf: "center" | "auto" | "start" | "end" | "stretch"; + horizontalMargin: number; + verticalMargin: number; + topMargin: number; + rightMargin: number; + bottomMargin: number; + leftMargin: number; + maxWidth: number | null; + maxHeight: number | null; + minWidth: number | null; + minHeight: number | null; } ``` @@ -10223,12 +10110,7 @@ LayoutChildProperties: * 'fix': The height is fixed. alignSelf: |- ``` - alignSelf: - | "center" - | "auto" - | "start" - | "end" - | "stretch" + alignSelf: "center" | "auto" | "start" | "end" | "stretch" ``` Aligns the child element within its container. @@ -10282,28 +10164,28 @@ LayoutChildProperties: This is the space to the left of the element. maxWidth: |- ``` - maxWidth: null | number + maxWidth: number | null ``` Defines the maximum width of the child element. If set to null, there is no maximum width constraint. maxHeight: |- ``` - maxHeight: null | number + maxHeight: number | null ``` Defines the maximum height of the child element. If set to null, there is no maximum height constraint. minWidth: |- ``` - minWidth: null | number + minWidth: number | null ``` Defines the minimum width of the child element. If set to null, there is no minimum width constraint. minHeight: |- ``` - minHeight: null | number + minHeight: number | null ``` Defines the minimum height of the child element. @@ -10316,26 +10198,26 @@ Library: Represents a library in Penpot, containing colors, typographies, and components. ``` - interface Library { - id: string; - name: string; - colors: LibraryColor[]; - typographies: LibraryTypography[]; - components: LibraryComponent[]; - tokens: TokenCatalog; - createColor(): LibraryColor; - createTypography(): LibraryTypography; - createComponent(shapes: Shape[]): LibraryComponent; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface Library { + id: string; + name: string; + colors: LibraryColor[]; + typographies: LibraryTypography[]; + components: LibraryComponent[]; + tokens: TokenCatalog; + createColor(): LibraryColor; + createTypography(): LibraryTypography; + createComponent(shapes: Shape[]): LibraryComponent; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * PluginData + Library @@ -10397,174 +10279,180 @@ Library: createColor(): LibraryColor ``` - * Creates a new color element in the library. + Creates a new color element in the library. - Returns LibraryColor + Returns LibraryColor - Returns a new `LibraryColor` object representing the created color element. + Returns a new `LibraryColor` object representing the created color element. - Example - ``` - const newColor = penpot.library.local.createColor();console.log(newColor); - ``` + Example + ``` + const newColor = penpot.library.local.createColor();console.log(newColor); + ``` createTypography: |- ``` createTypography(): LibraryTypography ``` - * Creates a new typography element in the library. + Creates a new typography element in the library. - Returns LibraryTypography + Returns LibraryTypography - Returns a new `LibraryTypography` object representing the created typography element. + Returns a new `LibraryTypography` object representing the created typography element. - Example - ``` - const newTypography = library.createTypography(); - ``` + Example + ``` + const newTypography = library.createTypography(); + ``` createComponent: |- ``` - createComponent(shapes): LibraryComponent + createComponent(shapes: Shape[]): LibraryComponent ``` - * Creates a new component element in the library using the provided shapes. + Creates a new component element in the library using the provided shapes. - Parameters - + shapes: Shape[] + Parameters - An array of `Shape` objects representing the shapes to be included in the component. + * shapes: Shape[] - Returns LibraryComponent + An array of `Shape` objects representing the shapes to be included in the component. - Returns a new `LibraryComponent` object representing the created component element. + Returns LibraryComponent - Example - ``` - const newComponent = penpot.library.local.createComponent([shape1, shape2]); - ``` + Returns a new `LibraryComponent` object representing the created component element. + + Example + ``` + const newComponent = penpot.library.local.createComponent([shape1, shape2]); + ``` getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` LibraryColor: overview: |- Interface LibraryColor @@ -10574,27 +10462,27 @@ LibraryColor: This interface extends `LibraryElement` and includes properties specific to color elements. ``` - interface LibraryColor { - color?: string; - opacity?: number; - gradient?: Gradient; - image?: ImageData; - asFill(): Fill; - asStroke(): Stroke; - id: string; - libraryId: string; - name: string; - path: string; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface LibraryColor { + color?: string; + opacity?: number; + gradient?: Gradient; + image?: ImageData; + asFill(): Fill; + asStroke(): Stroke; + id: string; + libraryId: string; + name: string; + path: string; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * LibraryElement + LibraryColor @@ -10656,154 +10544,159 @@ LibraryColor: asFill(): Fill ``` - * Converts the library color into a fill object. + Converts the library color into a fill object. - Returns Fill + Returns Fill - Returns a `Fill` object representing the color as a fill. + Returns a `Fill` object representing the color as a fill. - Example - ``` - const fill = libraryColor.asFill(); - ``` + Example + ``` + const fill = libraryColor.asFill(); + ``` asStroke: |- ``` asStroke(): Stroke ``` - * Converts the library color into a stroke object. + Converts the library color into a stroke object. - Returns Stroke + Returns Stroke - Returns a `Stroke` object representing the color as a stroke. + Returns a `Stroke` object representing the color as a stroke. - Example - ``` - const stroke = libraryColor.asStroke(); - ``` + Example + ``` + const stroke = libraryColor.asStroke(); + ``` getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` LibraryComponent: overview: |- Interface LibraryComponent @@ -10813,25 +10706,25 @@ LibraryComponent: This interface extends `LibraryElement` and includes properties specific to component elements. ``` - interface LibraryComponent { - instance(): Shape; - mainInstance(): Shape; - isVariant(): boolean; - transformInVariant(): void; - id: string; - libraryId: string; - name: string; - path: string; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface LibraryComponent { + instance(): Shape; + mainInstance(): Shape; + isVariant(): boolean; + transformInVariant(): void; + id: string; + libraryId: string; + name: string; + path: string; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * LibraryElement + LibraryComponent @@ -10870,165 +10763,170 @@ LibraryComponent: instance(): Shape ``` - * Creates an instance of the component. + Creates an instance of the component. - Returns Shape + Returns Shape - Returns a `Shape` object representing the instance of the component. + Returns a `Shape` object representing the instance of the component. - Example - ``` - const componentInstance = libraryComponent.instance(); - ``` + Example + ``` + const componentInstance = libraryComponent.instance(); + ``` mainInstance: |- ``` mainInstance(): Shape ``` - * Returns Shape + Returns Shape - Returns the reference to the main component shape. + Returns the reference to the main component shape. isVariant: |- ``` isVariant(): boolean ``` - * Returns boolean + Returns boolean - true when this component is a VariantComponent + true when this component is a VariantComponent transformInVariant: |- ``` transformInVariant(): void ``` - * Creates a new Variant from this standard Component. It creates a VariantContainer, transform this Component into a VariantComponent, duplicates it, and creates a - set of properties based on the component name and path. - Similar to doing it with the contextual menu or the shortcut on the Penpot interface + Creates a new Variant from this standard Component. It creates a VariantContainer, transform this Component into a VariantComponent, duplicates it, and creates a + set of properties based on the component name and path. + Similar to doing it with the contextual menu or the shortcut on the Penpot interface - Returns void + Returns void getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` LibraryVariantComponent: overview: |- Interface LibraryVariantComponent @@ -11038,32 +10936,30 @@ LibraryVariantComponent: This interface extends `LibraryElement` and includes properties specific to component elements. ``` - interface LibraryVariantComponent { - instance(): Shape; - mainInstance(): Shape; - isVariant(): boolean; - transformInVariant(): void; - variants: null | Variants; - variantProps: { - [property: string]: string; - }; - variantError: string; - addVariant(): void; - setVariantProperty(pos: number, value: string): void; - id: string; - libraryId: string; - name: string; - path: string; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface LibraryVariantComponent { + instance(): Shape; + mainInstance(): Shape; + isVariant(): boolean; + transformInVariant(): void; + variants: Variants | null; + variantProps: { [property: string]: string }; + variantError: string; + addVariant(): void; + setVariantProperty(pos: number, value: string): void; + id: string; + libraryId: string; + name: string; + path: string; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * LibraryComponent + LibraryVariantComponent @@ -11073,15 +10969,13 @@ LibraryVariantComponent: Properties: variants: |- ``` - readonly variants: null | Variants + readonly variants: Variants | null ``` Access to the Variant interface, for attributes and actions over the full Variant (not only this VariantComponent) variantProps: |- ``` - readonly variantProps: { - [property: string]: string; - } + readonly variantProps: { [property: string]: string } ``` A list of the variants props of this VariantComponent. Each property have a key and a value @@ -11122,185 +11016,191 @@ LibraryVariantComponent: instance(): Shape ``` - * Creates an instance of the component. + Creates an instance of the component. - Returns Shape + Returns Shape - Returns a `Shape` object representing the instance of the component. + Returns a `Shape` object representing the instance of the component. - Example - ``` - const componentInstance = libraryComponent.instance(); - ``` + Example + ``` + const componentInstance = libraryComponent.instance(); + ``` mainInstance: |- ``` mainInstance(): Shape ``` - * Returns Shape + Returns Shape - Returns the reference to the main component shape. + Returns the reference to the main component shape. isVariant: |- ``` isVariant(): boolean ``` - * Returns boolean + Returns boolean - true when this component is a VariantComponent + true when this component is a VariantComponent transformInVariant: |- ``` transformInVariant(): void ``` - * Creates a new Variant from this standard Component. It creates a VariantContainer, transform this Component into a VariantComponent, duplicates it, and creates a - set of properties based on the component name and path. - Similar to doing it with the contextual menu or the shortcut on the Penpot interface + Creates a new Variant from this standard Component. It creates a VariantContainer, transform this Component into a VariantComponent, duplicates it, and creates a + set of properties based on the component name and path. + Similar to doing it with the contextual menu or the shortcut on the Penpot interface - Returns void + Returns void addVariant: |- ``` addVariant(): void ``` - * Creates a duplicate of the current VariantComponent on its Variant + Creates a duplicate of the current VariantComponent on its Variant - Returns void + Returns void setVariantProperty: |- ``` - setVariantProperty(pos, value): void + setVariantProperty(pos: number, value: string): void ``` - * Sets the value of the variant property on the indicated position + Sets the value of the variant property on the indicated position - Parameters - + pos: number - + value: string + Parameters - Returns void + * pos: number + * value: string + + Returns void getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` LibraryElement: overview: |- Interface LibraryElement @@ -11310,21 +11210,21 @@ LibraryElement: This interface provides information about a specific element in a library. ``` - interface LibraryElement { - id: string; - libraryId: string; - name: string; - path: string; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface LibraryElement { + id: string; + libraryId: string; + name: string; + path: string; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * PluginData + LibraryElement @@ -11360,127 +11260,132 @@ LibraryElement: Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` LibrarySummary: overview: |- Interface LibrarySummary @@ -11490,12 +11395,12 @@ LibrarySummary: This interface provides properties for summarizing various aspects of a Penpot library. ``` - interface LibrarySummary { - id: string; - name: string; - numColors: number; - numComponents: number; - numTypographies: number; + interface LibrarySummary { + id: string; + name: string; + numColors: number; + numComponents: number; + numTypographies: number; } ``` @@ -11541,37 +11446,33 @@ LibraryTypography: This interface extends `LibraryElement` and includes properties specific to typography elements. ``` - interface LibraryTypography { - id: string; - libraryId: string; - name: string; - path: string; - fontId: string; - fontFamilies: string; - fontVariantId: string; - fontSize: string; - fontWeight: string; - fontStyle?: null | "normal" | "italic"; - lineHeight: string; - letterSpacing: string; - textTransform?: - | null - | "uppercase" - | "capitalize" - | "lowercase"; - applyToText(shape: Shape): void; - applyToTextRange(range: TextRange): void; - setFont(font: Font, variant?: FontVariant): void; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface LibraryTypography { + id: string; + libraryId: string; + name: string; + path: string; + fontId: string; + fontFamilies: string; + fontVariantId: string; + fontSize: string; + fontWeight: string; + fontStyle?: "normal" | "italic" | null; + lineHeight: string; + letterSpacing: string; + textTransform?: "uppercase" | "capitalize" | "lowercase" | null; + applyToText(shape: Shape): void; + applyToTextRange(range: TextRange): void; + setFont(font: Font, variant?: FontVariant): void; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * LibraryElement + LibraryTypography @@ -11635,7 +11536,7 @@ LibraryTypography: The font weight of the typography element. fontStyle: |- ``` - fontStyle?: null | "normal" | "italic" + fontStyle?: "normal" | "italic" | null ``` The font style of the typography element. @@ -11653,195 +11554,199 @@ LibraryTypography: The letter spacing of the typography element. textTransform: |- ``` - textTransform?: - | null - | "uppercase" - | "capitalize" - | "lowercase" + textTransform?: "uppercase" | "capitalize" | "lowercase" | null ``` The text transform applied to the typography element. Methods: applyToText: |- ``` - applyToText(shape): void + applyToText(shape: Shape): void ``` - * Applies the typography styles to a text shape. + Applies the typography styles to a text shape. - Parameters - + shape: Shape + Parameters - The text shape to apply the typography styles to. + * shape: Shape - Returns void + The text shape to apply the typography styles to. - Example - ``` - typographyElement.applyToText(textShape); - ``` + Returns void + + Example + ``` + typographyElement.applyToText(textShape); + ``` applyToTextRange: |- ``` - applyToTextRange(range): void + applyToTextRange(range: TextRange): void ``` - * Applies the typography styles to a range of text within a text shape. + Applies the typography styles to a range of text within a text shape. - Parameters - + range: TextRange + Parameters - Represents a range of text within a Text shape. This interface provides properties for styling and formatting text ranges. + * range: TextRange - Returns void + Represents a range of text within a Text shape. This interface provides properties for styling and formatting text ranges. - Example - ``` - typographyElement.applyToTextRange(textShape); - ``` + Returns void + + Example + ``` + typographyElement.applyToTextRange(textShape); + ``` setFont: |- ``` - setFont(font, variant?): void + setFont(font: Font, variant?: FontVariant): void ``` - * Sets the font and optionally its variant for the typography element. + Sets the font and optionally its variant for the typography element. - Parameters - + font: Font + Parameters - The font to set. - + variant: FontVariant + * font: Font - The font variant to set (optional). + The font to set. + * variant: FontVariant - Returns void + The font variant to set (optional). - Example - ``` - typographyElement.setFont(newFont, newVariant); - ``` + Returns void + + Example + ``` + typographyElement.setFont(newFont, newVariant); + ``` getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` LocalStorage: overview: |- Interface LocalStorage @@ -11853,11 +11758,11 @@ LocalStorage: the user could potentialy access the data through the browser information. ``` - interface LocalStorage { - getItem(key: string): string; - setItem(key: string, value: unknown): void; - removeItem(key: string): void; - getKeys(): string[]; + interface LocalStorage { + getItem(key: string): string; + setItem(key: string, value: unknown): void; + removeItem(key: string): void; + getKeys(): string[]; } ``` @@ -11866,51 +11771,54 @@ LocalStorage: Methods: getItem: |- ``` - getItem(key): string + getItem(key: string): string ``` - * Retrieve the element with the given key - Requires the `allow:localstorage` permission. + Retrieve the element with the given key + Requires the `allow:localstorage` permission. - Parameters - + key: string + Parameters - Returns string + * key: string + + Returns string setItem: |- ``` - setItem(key, value): void + setItem(key: string, value: unknown): void ``` - * Set the data given the key. If the value already existed it - will be overriden. The value will be stored in a string representation. - Requires the `allow:localstorage` permission. + Set the data given the key. If the value already existed it + will be overriden. The value will be stored in a string representation. + Requires the `allow:localstorage` permission. - Parameters - + key: string - + value: unknown + Parameters - Returns void + * key: string + * value: unknown + + Returns void removeItem: |- ``` - removeItem(key): void + removeItem(key: string): void ``` - * Remove the value stored in the key. - Requires the `allow:localstorage` permission. + Remove the value stored in the key. + Requires the `allow:localstorage` permission. - Parameters - + key: string + Parameters - Returns void + * key: string + + Returns void getKeys: |- ``` getKeys(): string[] ``` - * Return all the keys for the data stored by the plugin. - Requires the `allow:localstorage` permission. + Return all the keys for the data stored by the plugin. + Requires the `allow:localstorage` permission. - Returns string[] + Returns string[] NavigateTo: overview: |- Interface NavigateTo @@ -11919,11 +11827,11 @@ NavigateTo: It takes the user from one board to the destination set in the interaction. ``` - interface NavigateTo { - type: "navigate-to"; - destination: Board; - preserveScrollPosition?: boolean; - animation?: Animation; + interface NavigateTo { + type: "navigate-to"; + destination: Board; + preserveScrollPosition?: boolean; + animation?: Animation; } ``` @@ -11932,7 +11840,7 @@ NavigateTo: Properties: type: |- ``` - readonly type + readonly type: "navigate-to" ``` Type of action @@ -11962,11 +11870,11 @@ OpenOverlay: It opens a board right over the current board. ``` - interface OpenOverlay { - type: "open-overlay"; - destination: Board; - relativeTo?: Shape; - position?: + interface OpenOverlay { + type: "open-overlay"; + destination: Board; + relativeTo?: Shape; + position?: | "center" | "manual" | "top-left" @@ -11974,15 +11882,15 @@ OpenOverlay: | "top-center" | "bottom-left" | "bottom-right" - | "bottom-center"; - manualPositionLocation?: Point; - closeWhenClickOutside?: boolean; - addBackgroundOverlay?: boolean; - animation?: Animation; + | "bottom-center"; + manualPositionLocation?: Point; + closeWhenClickOutside?: boolean; + addBackgroundOverlay?: boolean; + animation?: Animation; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * OverlayAction + OpenOverlay @@ -11992,7 +11900,7 @@ OpenOverlay: Properties: type: |- ``` - readonly type + readonly type: "open-overlay" ``` The action type @@ -12010,7 +11918,7 @@ OpenOverlay: Base shape to which the overlay will be positioned taking constraints into account. position: |- ``` - readonly position?: + readonly position?: | "center" | "manual" | "top-left" @@ -12054,9 +11962,9 @@ OpenUrl: This action opens an URL in a new tab. ``` - interface OpenUrl { - type: "open-url"; - url: string; + interface OpenUrl { + type: "open-url"; + url: string; } ``` @@ -12065,7 +11973,7 @@ OpenUrl: Properties: type: |- ``` - readonly type + readonly type: "open-url" ``` The action type @@ -12083,10 +11991,10 @@ OverlayAction: Base type for the actions "open-overlay" and "toggle-overlay" that share most of their properties ``` - interface OverlayAction { - destination: Board; - relativeTo?: Shape; - position?: + interface OverlayAction { + destination: Board; + relativeTo?: Shape; + position?: | "center" | "manual" | "top-left" @@ -12094,15 +12002,15 @@ OverlayAction: | "top-center" | "bottom-left" | "bottom-right" - | "bottom-center"; - manualPositionLocation?: Point; - closeWhenClickOutside?: boolean; - addBackgroundOverlay?: boolean; - animation?: Animation; + | "bottom-center"; + manualPositionLocation?: Point; + closeWhenClickOutside?: boolean; + addBackgroundOverlay?: boolean; + animation?: Animation; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * OverlayAction + OpenOverlay @@ -12123,7 +12031,7 @@ OverlayAction: Base shape to which the overlay will be positioned taking constraints into account. position: |- ``` - readonly position?: + readonly position?: | "center" | "manual" | "top-left" @@ -12168,47 +12076,52 @@ Page: It includes properties for the page's identifier and name, as well as methods for managing shapes on the page. ``` - interface Page { - id: string; - name: string; - rulerGuides: RulerGuide[]; - root: Shape; - getShapeById(id: string): null | Shape; - findShapes(criteria?: { - name?: string; - nameLike?: string; - type?: - | "boolean" - | "path" - | "ellipse" - | "image" - | "text" - | "group" - | "board" - | "rectangle" - | "svg-raw"; - }): Shape[]; - flows: Flow[]; - createFlow(name: string, board: Board): Flow; - removeFlow(flow: Flow): void; - addRulerGuide(orientation: RulerGuideOrientation, value: number, board?: Board): RulerGuide; - removeRulerGuide(guide: RulerGuide): void; - addCommentThread(content: string, position: Point): Promise; - removeCommentThread(commentThread: CommentThread): Promise; - findCommentThreads(criteria?: { - onlyYours: boolean; - showResolved: boolean; - }): Promise; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface Page { + id: string; + name: string; + rulerGuides: RulerGuide[]; + root: Shape; + getShapeById(id: string): Shape | null; + findShapes( + criteria?: { + name?: string; + nameLike?: string; + type?: + | "boolean" + | "path" + | "ellipse" + | "image" + | "text" + | "group" + | "board" + | "rectangle" + | "svg-raw"; + }, + ): Shape[]; + flows: Flow[]; + createFlow(name: string, board: Board): Flow; + removeFlow(flow: Flow): void; + addRulerGuide( + orientation: RulerGuideOrientation, + value: number, + board?: Board, + ): RulerGuide; + removeRulerGuide(guide: RulerGuide): void; + addCommentThread(content: string, position: Point): Promise; + removeCommentThread(commentThread: CommentThread): Promise; + findCommentThreads( + criteria?: { onlyYours: boolean; showResolved: boolean }, + ): Promise; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * PluginData + Page @@ -12250,285 +12163,312 @@ Page: Methods: getShapeById: |- ``` - getShapeById(id): null | Shape + getShapeById(id: string): Shape | null ``` - * Retrieves a shape by its unique identifier. + Retrieves a shape by its unique identifier. - Parameters - + id: string + Parameters - The unique identifier of the shape. + * id: string - Returns null | Shape + The unique identifier of the shape. - Example - ``` - const shape = penpot.currentPage.getShapeById('shapeId'); - ``` + Returns Shape | null + + Example + ``` + const shape = penpot.currentPage.getShapeById('shapeId'); + ``` findShapes: |- ``` - findShapes(criteria?): Shape[] + findShapes( + criteria?: { + name?: string; + nameLike?: string; + type?: + | "boolean" + | "path" + | "ellipse" + | "image" + | "text" + | "group" + | "board" + | "rectangle" + | "svg-raw"; + }, + ): Shape[] ``` - * Finds all shapes on the page. - Optionaly it gets a criteria object to search for specific criteria + Finds all shapes on the page. + Optionaly it gets a criteria object to search for specific criteria - Parameters - + criteria: { - name?: string; - nameLike?: string; - type?: - | "boolean" - | "path" - | "ellipse" - | "image" - | "text" - | "group" - | "board" - | "rectangle" - | "svg-raw"; - } - - Optionalname?: string - - OptionalnameLike?: string - - Optionaltype?: | "boolean" | "path" | "ellipse" | "image" | "text" | "group" | "board" | "rectangle" | "svg-raw" + Parameters - Returns Shape[] + * criteria: { + name?: string; + nameLike?: string; + type?: + | "boolean" + | "path" + | "ellipse" + | "image" + | "text" + | "group" + | "board" + | "rectangle" + | "svg-raw"; + } - Example - ``` - const shapes = penpot.currentPage.findShapes({ name: 'exampleName' }); - ``` + Returns Shape[] + + Example + ``` + const shapes = penpot.currentPage.findShapes({ name: 'exampleName' }); + ``` createFlow: |- ``` - createFlow(name, board): Flow + createFlow(name: string, board: Board): Flow ``` - * Creates a new flow in the page. + Creates a new flow in the page. - Parameters - + name: string + Parameters - the name identifying the flow - + board: Board + * name: string - the starting board for the current flow + the name identifying the flow + * board: Board - Returns Flow + the starting board for the current flow - Example - ``` - const flow = penpot.currentPage.createFlow('exampleFlow', board); - ``` + Returns Flow + + Example + ``` + const flow = penpot.currentPage.createFlow('exampleFlow', board); + ``` removeFlow: |- ``` - removeFlow(flow): void + removeFlow(flow: Flow): void ``` - * Removes the flow from the page + Removes the flow from the page - Parameters - + flow: Flow + Parameters - the flow to be removed from the page + * flow: Flow - Returns void + the flow to be removed from the page + + Returns void addRulerGuide: |- ``` - addRulerGuide(orientation, value, board?): RulerGuide + addRulerGuide( + orientation: RulerGuideOrientation, + value: number, + board?: Board, + ): RulerGuide ``` - * Creates a new ruler guide. + Creates a new ruler guide. - Parameters - + orientation: RulerGuideOrientation - + value: number - + board: Board + Parameters - Returns RulerGuide + * orientation: RulerGuideOrientation + * value: number + * board: Board + + Returns RulerGuide removeRulerGuide: |- ``` - removeRulerGuide(guide): void + removeRulerGuide(guide: RulerGuide): void ``` - * Removes the `guide` from the current page. + Removes the `guide` from the current page. - Parameters - + guide: RulerGuide + Parameters - Returns void + * guide: RulerGuide + + Returns void addCommentThread: |- ``` - addCommentThread(content, position): Promise + addCommentThread(content: string, position: Point): Promise ``` - * Creates a new comment thread in the `position`. Optionaly adds - it into the `board`. - Returns the thread created. - Requires the `comment:write` permission. + Creates a new comment thread in the `position`. Optionaly adds + it into the `board`. + Returns the thread created. + Requires the `comment:write` permission. - Parameters - + content: string - + position: Point + Parameters - Returns Promise + * content: string + * position: Point + + Returns Promise removeCommentThread: |- ``` - removeCommentThread(commentThread): Promise + removeCommentThread(commentThread: CommentThread): Promise ``` - * Removes the comment thread. - Requires the `comment:write` permission. + Removes the comment thread. + Requires the `comment:write` permission. - Parameters - + commentThread: CommentThread + Parameters - Returns Promise + * commentThread: CommentThread + + Returns Promise findCommentThreads: |- ``` - findCommentThreads(criteria?): Promise + findCommentThreads( + criteria?: { onlyYours: boolean; showResolved: boolean }, + ): Promise ``` - * Find all the comments that match the criteria. + Find all the comments that match the criteria. - + `onlyYours`: if `true` will return the threads where the current - user has engaged. - + `showResolved`: by default resolved comments will be hidden. If `true` - the resolved will be returned. - Requires the `comment:read` or `comment:write` permission. + * `onlyYours`: if `true` will return the threads where the current + user has engaged. + * `showResolved`: by default resolved comments will be hidden. If `true` + the resolved will be returned. + Requires the `comment:read` or `comment:write` permission. - Parameters - + criteria: { - onlyYours: boolean; - showResolved: boolean; - } - - onlyYours: boolean - - showResolved: boolean + Parameters - Returns Promise + * criteria: { onlyYours: boolean; showResolved: boolean } + + Returns Promise getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` Path: overview: |- Interface Path @@ -12538,52 +12478,42 @@ Path: This interface extends `ShapeBase` and includes properties and methods specific to paths. ``` - interface Path { - type: "path"; - toD(): string; - content: string; - d: string; - commands: PathCommand[]; - fills: Fill[]; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Path { + type: "path"; + toD(): string; + content: string; + d: string; + commands: PathCommand[]; + fills: Fill[]; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -12599,58 +12529,57 @@ Path: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Path @@ -12660,7 +12589,7 @@ Path: Properties: type: |- ``` - readonly type + readonly type: "path" ``` The type of the shape, which is always 'path' for path shapes. @@ -12708,7 +12637,7 @@ Path: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -12785,23 +12714,13 @@ Path: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -12843,7 +12762,7 @@ Path: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -12945,9 +12864,7 @@ Path: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -12969,465 +12886,477 @@ Path: toD(): string ``` - * Converts the path shape to its path data representation. + Converts the path shape to its path data representation. - Returns string + Returns string - Returns the path data (d attribute) as a string. + Returns the path data (d attribute) as a string. - Deprecated + Deprecated - Use the `d` attribute + Use the `d` attribute getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void PathCommand: overview: |- Interface PathCommand @@ -13437,8 +13366,8 @@ PathCommand: This interface includes a property for defining the type of command. ``` - interface PathCommand { - command: + interface PathCommand { + command: | "M" | "move-to" | "Z" @@ -13458,20 +13387,20 @@ PathCommand: | "T" | "smooth-quadratic-bezier-curve-to" | "A" - | "elliptical-arc"; - params?: { - x?: number; - y?: number; - c1x?: number; - c1y?: number; - c2x?: number; - c2y?: number; - rx?: number; - ry?: number; - xAxisRotation?: number; - largeArcFlag?: boolean; - sweepFlag?: boolean; - }; + | "elliptical-arc"; + params?: { + x?: number; + y?: number; + c1x?: number; + c1y?: number; + c2x?: number; + c2y?: number; + rx?: number; + ry?: number; + xAxisRotation?: number; + largeArcFlag?: boolean; + sweepFlag?: boolean; + }; } ``` @@ -13480,7 +13409,7 @@ PathCommand: Properties: command: |- ``` - command: + command: | "M" | "move-to" | "Z" @@ -13523,24 +13452,24 @@ PathCommand: ``` params: |- ``` - params?: { - x?: number; - y?: number; - c1x?: number; - c1y?: number; - c2x?: number; - c2y?: number; - rx?: number; - ry?: number; - xAxisRotation?: number; - largeArcFlag?: boolean; - sweepFlag?: boolean; + params?: { + x?: number; + y?: number; + c1x?: number; + c1y?: number; + c2x?: number; + c2y?: number; + rx?: number; + ry?: number; + xAxisRotation?: number; + largeArcFlag?: boolean; + sweepFlag?: boolean; } ``` Optional parameters associated with the path command. - Type declaration + Type Declaration * Optionalx?: number @@ -13583,17 +13512,17 @@ PluginData: Provides methods for managing plugin-specific data associated with a Penpot shape. ``` - interface PluginData { - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface PluginData { + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * PluginData + File @@ -13605,127 +13534,132 @@ PluginData: Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` PreviousScreen: overview: |- Interface PreviousScreen @@ -13734,8 +13668,8 @@ PreviousScreen: It takes back to the last board shown. ``` - interface PreviousScreen { - type: "previous-screen"; + interface PreviousScreen { + type: "previous-screen"; } ``` @@ -13744,7 +13678,7 @@ PreviousScreen: Properties: type: |- ``` - readonly type + readonly type: "previous-screen" ``` The action type @@ -13756,20 +13690,11 @@ Push: Push animation ``` - interface Push { - type: "push"; - direction: - | "left" - | "right" - | "up" - | "down"; - duration: number; - easing?: - | "linear" - | "ease" - | "ease-in" - | "ease-out" - | "ease-in-out"; + interface Push { + type: "push"; + direction: "left" | "right" | "up" | "down"; + duration: number; + easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"; } ``` @@ -13778,17 +13703,13 @@ Push: Properties: type: |- ``` - readonly type + readonly type: "push" ``` Type of the animation direction: |- ``` - readonly direction: - | "left" - | "right" - | "up" - | "down" + readonly direction: "left" | "right" | "up" | "down" ``` Direction for the push animation @@ -13800,12 +13721,7 @@ Push: Duration of the animation effect easing: |- ``` - readonly easing?: - | "linear" - | "ease" - | "ease-in" - | "ease-out" - | "ease-in-out" + readonly easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" ``` Function that the dissolve effect will follow for the interpolation. @@ -13819,48 +13735,38 @@ Rectangle: This interface extends `ShapeBase` and includes properties specific to rectangles. ``` - interface Rectangle { - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - type: "rectangle"; - fills: Fill[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Rectangle { + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + type: "rectangle"; + fills: Fill[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -13876,58 +13782,57 @@ Rectangle: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Rectangle @@ -13937,7 +13842,7 @@ Rectangle: Properties: type: |- ``` - readonly type + readonly type: "rectangle" ``` The type of the shape, which is always 'rect' for rectangle shapes. @@ -13963,7 +13868,7 @@ Rectangle: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -14040,23 +13945,13 @@ Rectangle: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -14098,7 +13993,7 @@ Rectangle: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -14200,9 +14095,7 @@ Rectangle: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -14221,454 +14114,466 @@ Rectangle: Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void RulerGuide: overview: |- Interface RulerGuide @@ -14678,10 +14583,10 @@ RulerGuide: used to position elements in the UI. ``` - interface RulerGuide { - orientation: RulerGuideOrientation; - position: number; - board?: Board; + interface RulerGuide { + orientation: RulerGuideOrientation; + position: number; + board?: Board; } ``` @@ -14716,15 +14621,15 @@ Shadow: This interface includes properties for defining drop shadows and inner shadows, along with their visual attributes. ``` - interface Shadow { - id?: string; - style?: "drop-shadow" | "inner-shadow"; - offsetX?: number; - offsetY?: number; - blur?: number; - spread?: number; - hidden?: boolean; - color?: Color; + interface Shadow { + id?: string; + style?: "drop-shadow" | "inner-shadow"; + offsetX?: number; + offsetY?: number; + blur?: number; + spread?: number; + hidden?: boolean; + color?: Color; } ``` @@ -14792,46 +14697,36 @@ ShapeBase: This interface provides common properties and methods shared by all shapes. ``` - interface ShapeBase { - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface ShapeBase { + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -14847,59 +14742,59 @@ ShapeBase: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - fills: Fill[] | "mixed"; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + fills: Fill[] + | "mixed"; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * PluginData + ShapeBase @@ -14928,7 +14823,7 @@ ShapeBase: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -15005,23 +14900,13 @@ ShapeBase: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -15063,7 +14948,7 @@ ShapeBase: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -15171,9 +15056,7 @@ ShapeBase: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -15192,454 +15075,466 @@ ShapeBase: Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void Slide: overview: |- Interface Slide @@ -15648,22 +15543,13 @@ Slide: Slide animation ``` - interface Slide { - type: "slide"; - way: "in" | "out"; - direction: - | "left" - | "right" - | "up" - | "down"; - duration: number; - offsetEffect?: boolean; - easing?: - | "linear" - | "ease" - | "ease-in" - | "ease-out" - | "ease-in-out"; + interface Slide { + type: "slide"; + way: "in" | "out"; + direction: "left" | "right" | "up" | "down"; + duration: number; + offsetEffect?: boolean; + easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"; } ``` @@ -15672,7 +15558,7 @@ Slide: Properties: type: |- ``` - readonly type + readonly type: "slide" ``` Type of the animation. @@ -15684,11 +15570,7 @@ Slide: Indicate if the slide will be either in-to-out `in` or out-to-in `out`. direction: |- ``` - readonly direction: - | "left" - | "right" - | "up" - | "down" + readonly direction: "left" | "right" | "up" | "down" ``` Direction for the slide animation. @@ -15706,12 +15588,7 @@ Slide: If `true` the offset effect will be used. easing: |- ``` - readonly easing?: - | "linear" - | "ease" - | "ease-in" - | "ease-out" - | "ease-in-out" + readonly easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" ``` Function that the dissolve effect will follow for the interpolation. @@ -15725,23 +15602,17 @@ Stroke: This interface includes properties for defining the color, style, width, alignment, and caps of a stroke. ``` - interface Stroke { - strokeColor?: string; - strokeColorRefFile?: string; - strokeColorRefId?: string; - strokeOpacity?: number; - strokeStyle?: - | "svg" - | "none" - | "mixed" - | "solid" - | "dotted" - | "dashed"; - strokeWidth?: number; - strokeAlignment?: "center" | "inner" | "outer"; - strokeCapStart?: StrokeCap; - strokeCapEnd?: StrokeCap; - strokeColorGradient?: Gradient; + interface Stroke { + strokeColor?: string; + strokeColorRefFile?: string; + strokeColorRefId?: string; + strokeOpacity?: number; + strokeStyle?: "svg" | "none" | "mixed" | "solid" | "dotted" | "dashed"; + strokeWidth?: number; + strokeAlignment?: "center" | "inner" | "outer"; + strokeCapStart?: StrokeCap; + strokeCapEnd?: StrokeCap; + strokeColorGradient?: Gradient; } ``` @@ -15775,13 +15646,7 @@ Stroke: Defaults to 1 if omitted. strokeStyle: |- ``` - strokeStyle?: - | "svg" - | "none" - | "mixed" - | "solid" - | "dotted" - | "dashed" + strokeStyle?: "svg" | "none" | "mixed" | "solid" | "dotted" | "dashed" ``` The optional style of the stroke. @@ -15824,46 +15689,36 @@ SvgRaw: This interface extends `ShapeBase` and includes properties specific to raw SVG shapes. ``` - interface SvgRaw { - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface SvgRaw { + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -15879,60 +15734,60 @@ SvgRaw: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - fills: Fill[] | "mixed"; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; - type: "svg-raw"; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + fills: Fill[] + | "mixed"; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; + type: "svg-raw"; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + SvgRaw @@ -15954,7 +15809,7 @@ SvgRaw: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -16031,23 +15886,13 @@ SvgRaw: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -16089,7 +15934,7 @@ SvgRaw: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -16197,9 +16042,7 @@ SvgRaw: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -16217,459 +16060,471 @@ SvgRaw: The interactions for the current shape. type: |- ``` - type + type: "svg-raw" ``` Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void Text: overview: |- Interface Text @@ -16679,46 +16534,36 @@ Text: It includes various properties to define the text content and its styling attributes. ``` - interface Text { - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Text { + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -16734,104 +16579,77 @@ Text: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - fills: Fill[] | "mixed"; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; - type: "text"; - characters: string; - growType: "fixed" | "auto-width" | "auto-height"; - fontId: string; - fontFamily: string; - fontVariantId: string; - fontSize: string; - fontWeight: string; - fontStyle: - | null - | "normal" - | "italic" - | "mixed"; - lineHeight: string; - letterSpacing: string; - textTransform: - | null - | "mixed" - | "uppercase" - | "capitalize" - | "lowercase"; - textDecoration: - | null - | "mixed" - | "underline" - | "line-through"; - direction: - | null - | "mixed" - | "ltr" - | "rtl"; - align: - | null - | "center" - | "left" - | "right" - | "mixed" - | "justify"; - verticalAlign: - | null - | "center" - | "top" - | "bottom"; - getRange(start: number, end: number): TextRange; - applyTypography(typography: LibraryTypography): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + fills: Fill[] + | "mixed"; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; + type: "text"; + characters: string; + growType: "fixed" | "auto-width" | "auto-height"; + fontId: string; + fontFamily: string; + fontVariantId: string; + fontSize: string; + fontWeight: string; + fontStyle: "normal" | "italic" | "mixed" | null; + lineHeight: string; + letterSpacing: string; + textTransform: "mixed" | "uppercase" | "capitalize" | "lowercase" | null; + textDecoration: "mixed" | "underline" | "line-through" | null; + direction: "mixed" | "ltr" | "rtl" | null; + align: "center" | "left" | "right" | "mixed" | "justify" | null; + verticalAlign: "center" | "top" | "bottom" | null; + getRange(start: number, end: number): TextRange; + applyTypography(typography: LibraryTypography): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Text @@ -16853,7 +16671,7 @@ Text: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -16930,23 +16748,13 @@ Text: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -16988,7 +16796,7 @@ Text: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -17096,9 +16904,7 @@ Text: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -17116,7 +16922,7 @@ Text: The interactions for the current shape. type: |- ``` - readonly type + readonly type: "text" ``` The type of the shape, which is always 'text' for text shapes. @@ -17169,11 +16975,7 @@ Text: The font weight used in the text shape, or 'mixed' if multiple font weights are used. fontStyle: |- ``` - fontStyle: - | null - | "normal" - | "italic" - | "mixed" + fontStyle: "normal" | "italic" | "mixed" | null ``` The font style used in the text shape, or 'mixed' if multiple font styles are used. @@ -17191,553 +16993,544 @@ Text: The letter spacing used in the text shape, or 'mixed' if multiple letter spacings are used. textTransform: |- ``` - textTransform: - | null - | "mixed" - | "uppercase" - | "capitalize" - | "lowercase" + textTransform: "mixed" | "uppercase" | "capitalize" | "lowercase" | null ``` The text transform applied to the text shape, or 'mixed' if multiple text transforms are used. textDecoration: |- ``` - textDecoration: - | null - | "mixed" - | "underline" - | "line-through" + textDecoration: "mixed" | "underline" | "line-through" | null ``` The text decoration applied to the text shape, or 'mixed' if multiple text decorations are used. direction: |- ``` - direction: - | null - | "mixed" - | "ltr" - | "rtl" + direction: "mixed" | "ltr" | "rtl" | null ``` The text direction for the text shape, or 'mixed' if multiple directions are used. align: |- ``` - align: - | null - | "center" - | "left" - | "right" - | "mixed" - | "justify" + align: "center" | "left" | "right" | "mixed" | "justify" | null ``` The horizontal alignment of the text shape. It can be a specific alignment or 'mixed' if multiple alignments are used. verticalAlign: |- ``` - verticalAlign: - | null - | "center" - | "top" - | "bottom" + verticalAlign: "center" | "top" | "bottom" | null ``` The vertical alignment of the text shape. It can be a specific alignment or 'mixed' if multiple alignments are used. Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void getRange: |- ``` - getRange(start, end): TextRange + getRange(start: number, end: number): TextRange ``` - * Gets a text range within the text shape. + Gets a text range within the text shape. - Parameters - + start: number + Parameters - The start index of the text range. - + end: number + * start: number - The end index of the text range. + The start index of the text range. + * end: number - Returns TextRange + The end index of the text range. - Returns a TextRange object representing the specified text range. + Returns TextRange - Example - ``` - const textRange = textShape.getRange(0, 10);console.log(textRange.characters); - ``` + Returns a TextRange object representing the specified text range. + + Example + ``` + const textRange = textShape.getRange(0, 10);console.log(textRange.characters); + ``` applyTypography: |- ``` - applyTypography(typography): void + applyTypography(typography: LibraryTypography): void ``` - * Applies a typography style to the text shape. + Applies a typography style to the text shape. - Parameters - + typography: LibraryTypography + Parameters - The typography style to apply. + * typography: LibraryTypography - Returns void + The typography style to apply. - Remarks + Returns void - This method sets various typography properties for the text shape according to the given typography style. + Remarks - Example - ``` - textShape.applyTypography(typography); - ``` + This method sets various typography properties for the text shape according to the given typography style. + + Example + ``` + textShape.applyTypography(typography); + ``` TextRange: overview: |- Interface TextRange @@ -17747,54 +17540,34 @@ TextRange: This interface provides properties for styling and formatting text ranges. ``` - interface TextRange { - shape: Text; - characters: string; - fontId: string; - fontFamily: string; - fontVariantId: string; - fontSize: string; - fontWeight: string; - fontStyle: - | null - | "normal" - | "italic" - | "mixed"; - lineHeight: string; - letterSpacing: string; - textTransform: - | null + interface TextRange { + shape: Text; + characters: string; + fontId: string; + fontFamily: string; + fontVariantId: string; + fontSize: string; + fontWeight: string; + fontStyle: "normal" | "italic" | "mixed" | null; + lineHeight: string; + letterSpacing: string; + textTransform: | "none" | "mixed" | "uppercase" | "capitalize" - | "lowercase"; - textDecoration: - | null - | "none" - | "mixed" - | "underline" - | "line-through"; - direction: - | null - | "mixed" - | "ltr" - | "rtl"; - fills: Fill[] | "mixed"; - align: - | null - | "center" - | "left" - | "right" - | "mixed" - | "justify"; - verticalAlign: - | null - | "center" - | "top" - | "bottom" - | "mixed"; - applyTypography(typography: LibraryTypography): void; + | "lowercase" + | null; + textDecoration: "none" + | "mixed" + | "underline" + | "line-through" + | null; + direction: "mixed" | "ltr" | "rtl" | null; + fills: Fill[] | "mixed"; + align: "center" | "left" | "right" | "mixed" | "justify" | null; + verticalAlign: "center" | "top" | "bottom" | "mixed" | null; + applyTypography(typography: LibraryTypography): void; } ``` @@ -17845,11 +17618,7 @@ TextRange: The font weight of the text range. It can be a specific font weight or 'mixed' if multiple font weights are used. fontStyle: |- ``` - fontStyle: - | null - | "normal" - | "italic" - | "mixed" + fontStyle: "normal" | "italic" | "mixed" | null ``` The font style of the text range. It can be a specific font style or 'mixed' if multiple font styles are used. @@ -17867,34 +17636,25 @@ TextRange: The letter spacing of the text range. It can be a specific letter spacing or 'mixed' if multiple letter spacings are used. textTransform: |- ``` - textTransform: - | null + textTransform: | "none" | "mixed" | "uppercase" | "capitalize" | "lowercase" + | null ``` The text transform applied to the text range. It can be a specific text transform or 'mixed' if multiple text transforms are used. textDecoration: |- ``` - textDecoration: - | null - | "none" - | "mixed" - | "underline" - | "line-through" + textDecoration: "none" | "mixed" | "underline" | "line-through" | null ``` The text decoration applied to the text range. It can be a specific text decoration or 'mixed' if multiple text decorations are used. direction: |- ``` - direction: - | null - | "mixed" - | "ltr" - | "rtl" + direction: "mixed" | "ltr" | "rtl" | null ``` The text direction for the text range. It can be a specific direction or 'mixed' if multiple directions are used. @@ -17906,47 +17666,37 @@ TextRange: The fill styles applied to the text range. align: |- ``` - align: - | null - | "center" - | "left" - | "right" - | "mixed" - | "justify" + align: "center" | "left" | "right" | "mixed" | "justify" | null ``` The horizontal alignment of the text range. It can be a specific alignment or 'mixed' if multiple alignments are used. verticalAlign: |- ``` - verticalAlign: - | null - | "center" - | "top" - | "bottom" - | "mixed" + verticalAlign: "center" | "top" | "bottom" | "mixed" | null ``` The vertical alignment of the text range. It can be a specific alignment or 'mixed' if multiple alignments are used. Methods: applyTypography: |- ``` - applyTypography(typography): void + applyTypography(typography: LibraryTypography): void ``` - * Applies a typography style to the text range. - This method sets various typography properties for the text range according to the given typography style. + Applies a typography style to the text range. + This method sets various typography properties for the text range according to the given typography style. - Parameters - + typography: LibraryTypography + Parameters - The typography style to apply. + * typography: LibraryTypography - Returns void + The typography style to apply. - Example - ``` - textRange.applyTypography(typography); - ``` + Returns void + + Example + ``` + textRange.applyTypography(typography); + ``` ToggleOverlay: overview: |- Interface ToggleOverlay @@ -17955,10 +17705,10 @@ ToggleOverlay: It opens an overlay if it is not already opened or closes it if it is already opened. ``` - interface ToggleOverlay { - destination: Board; - relativeTo?: Shape; - position?: + interface ToggleOverlay { + destination: Board; + relativeTo?: Shape; + position?: | "center" | "manual" | "top-left" @@ -17966,16 +17716,16 @@ ToggleOverlay: | "top-center" | "bottom-left" | "bottom-right" - | "bottom-center"; - manualPositionLocation?: Point; - closeWhenClickOutside?: boolean; - addBackgroundOverlay?: boolean; - animation?: Animation; - type: "toggle-overlay"; + | "bottom-center"; + manualPositionLocation?: Point; + closeWhenClickOutside?: boolean; + addBackgroundOverlay?: boolean; + animation?: Animation; + type: "toggle-overlay"; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * OverlayAction + ToggleOverlay @@ -17997,7 +17747,7 @@ ToggleOverlay: Base shape to which the overlay will be positioned taking constraints into account. position: |- ``` - readonly position?: + readonly position?: | "center" | "manual" | "top-left" @@ -18035,7 +17785,7 @@ ToggleOverlay: Animation displayed with this interaction. type: |- ``` - readonly type + readonly type: "toggle-overlay" ``` The action type @@ -18048,9 +17798,9 @@ Track: This interface includes properties for defining the type and value of a track used in layout configurations. ``` - interface Track { - type: TrackType; - value: null | number; + interface Track { + type: TrackType; + value: number | null; } ``` @@ -18071,7 +17821,7 @@ Track: * 'auto': An automatic track type. value: |- ``` - value: null | number + value: number | null ``` The value of the track. @@ -18085,18 +17835,21 @@ TokenBase: all token types. ``` - interface TokenBase { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; + interface TokenBase { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenBorderRadius @@ -18143,56 +17896,58 @@ TokenBase: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenBorderRadius: overview: |- Interface TokenBorderRadius @@ -18202,21 +17957,24 @@ TokenBorderRadius: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenBorderRadius { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "borderRadius"; - value: string; - resolvedValue: undefined | number; + interface TokenBorderRadius { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "borderRadius"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenBorderRadius @@ -18245,7 +18003,7 @@ TokenBorderRadius: An optional description text. type: |- ``` - readonly type + readonly type: "borderRadius" ``` The type of the token. @@ -18258,7 +18016,7 @@ TokenBorderRadius: It's a positive number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -18271,69 +18029,71 @@ TokenBorderRadius: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenShadowValue: overview: |- Interface TokenShadowValue ========================== ``` - interface TokenShadowValue { - color: string; - inset: boolean; - offsetX: number; - offsetY: number; - spread: number; - blur: number; + interface TokenShadowValue { + color: string; + inset: boolean; + offsetX: number; + offsetY: number; + spread: number; + blur: number; } ``` @@ -18382,13 +18142,13 @@ TokenShadowValueString: ================================ ``` - interface TokenShadowValueString { - color: string; - inset: string; - offsetX: string; - offsetY: string; - spread: string; - blur: string; + interface TokenShadowValueString { + color: string; + inset: string; + offsetX: string; + offsetY: string; + spread: string; + blur: string; } ``` @@ -18446,21 +18206,24 @@ TokenShadow: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenShadow { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "shadow"; - value: string | TokenShadowValueString[]; - resolvedValue: undefined | TokenShadowValue[]; + interface TokenShadow { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "shadow"; + value: string | TokenShadowValueString[]; + resolvedValue: TokenShadowValue[] | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenShadow @@ -18489,7 +18252,7 @@ TokenShadow: An optional description text. type: |- ``` - readonly type + readonly type: "shadow" ``` The type of the token. @@ -18503,7 +18266,7 @@ TokenShadow: an array of TokenShadowValueString. resolvedValue: |- ``` - readonly resolvedValue: undefined | TokenShadowValue[] + readonly resolvedValue: TokenShadowValue[] | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -18517,56 +18280,58 @@ TokenShadow: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenColor: overview: |- Interface TokenColor @@ -18576,21 +18341,24 @@ TokenColor: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenColor { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "color"; - value: string; - resolvedValue: undefined | string; + interface TokenColor { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "color"; + value: string; + resolvedValue: string | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenColor @@ -18619,7 +18387,7 @@ TokenColor: An optional description text. type: |- ``` - readonly type + readonly type: "color" ``` The type of the token. @@ -18632,7 +18400,7 @@ TokenColor: It's a rgb color or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | string + readonly resolvedValue: string | undefined ``` The value as defined in the token itself. @@ -18643,56 +18411,58 @@ TokenColor: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenDimension: overview: |- Interface TokenDimension @@ -18702,21 +18472,24 @@ TokenDimension: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenDimension { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "dimension"; - value: string; - resolvedValue: undefined | number; + interface TokenDimension { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "dimension"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenDimension @@ -18745,7 +18518,7 @@ TokenDimension: An optional description text. type: |- ``` - readonly type + readonly type: "dimension" ``` The type of the token. @@ -18758,7 +18531,7 @@ TokenDimension: It's a positive number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -18771,56 +18544,58 @@ TokenDimension: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenFontFamilies: overview: |- Interface TokenFontFamilies @@ -18830,21 +18605,24 @@ TokenFontFamilies: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenFontFamilies { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "fontFamilies"; - value: string | string[]; - resolvedValue: undefined | string[]; + interface TokenFontFamilies { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "fontFamilies"; + value: string | string[]; + resolvedValue: string[] | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenFontFamilies @@ -18873,7 +18651,7 @@ TokenFontFamilies: An optional description text. type: |- ``` - readonly type + readonly type: "fontFamilies" ``` The type of the token. @@ -18888,7 +18666,7 @@ TokenFontFamilies: is an item in the array). resolvedValue: |- ``` - readonly resolvedValue: undefined | string[] + readonly resolvedValue: string[] | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -18902,56 +18680,58 @@ TokenFontFamilies: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenFontSizes: overview: |- Interface TokenFontSizes @@ -18961,21 +18741,24 @@ TokenFontSizes: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenFontSizes { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "fontSizes"; - value: string; - resolvedValue: undefined | number; + interface TokenFontSizes { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "fontSizes"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenFontSizes @@ -19004,7 +18787,7 @@ TokenFontSizes: An optional description text. type: |- ``` - readonly type + readonly type: "fontSizes" ``` The type of the token. @@ -19017,7 +18800,7 @@ TokenFontSizes: It's a positive number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19030,56 +18813,58 @@ TokenFontSizes: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenFontWeights: overview: |- Interface TokenFontWeights @@ -19089,21 +18874,24 @@ TokenFontWeights: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenFontWeights { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "fontWeights"; - value: string; - resolvedValue: undefined | string; + interface TokenFontWeights { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "fontWeights"; + value: string; + resolvedValue: string | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenFontWeights @@ -19132,7 +18920,7 @@ TokenFontWeights: An optional description text. type: |- ``` - readonly type + readonly type: "fontWeights" ``` The type of the token. @@ -19145,7 +18933,7 @@ TokenFontWeights: It's a weight string or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | string + readonly resolvedValue: string | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19159,56 +18947,58 @@ TokenFontWeights: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenLetterSpacing: overview: |- Interface TokenLetterSpacing @@ -19218,21 +19008,24 @@ TokenLetterSpacing: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenLetterSpacing { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "letterSpacing"; - value: string; - resolvedValue: undefined | number; + interface TokenLetterSpacing { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "letterSpacing"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenLetterSpacing @@ -19261,7 +19054,7 @@ TokenLetterSpacing: An optional description text. type: |- ``` - readonly type + readonly type: "letterSpacing" ``` The type of the token. @@ -19274,7 +19067,7 @@ TokenLetterSpacing: It's a number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19287,56 +19080,58 @@ TokenLetterSpacing: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenNumber: overview: |- Interface TokenNumber @@ -19346,21 +19141,24 @@ TokenNumber: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenNumber { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "number"; - value: string; - resolvedValue: undefined | number; + interface TokenNumber { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "number"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenNumber @@ -19389,7 +19187,7 @@ TokenNumber: An optional description text. type: |- ``` - readonly type + readonly type: "number" ``` The type of the token. @@ -19402,7 +19200,7 @@ TokenNumber: It's a number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19415,56 +19213,58 @@ TokenNumber: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenOpacity: overview: |- Interface TokenOpacity @@ -19474,21 +19274,24 @@ TokenOpacity: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenOpacity { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "opacity"; - value: string; - resolvedValue: undefined | number; + interface TokenOpacity { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "opacity"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenOpacity @@ -19517,7 +19320,7 @@ TokenOpacity: An optional description text. type: |- ``` - readonly type + readonly type: "opacity" ``` The type of the token. @@ -19530,7 +19333,7 @@ TokenOpacity: It's a number between 0 and 1 or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19544,56 +19347,58 @@ TokenOpacity: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenRotation: overview: |- Interface TokenRotation @@ -19603,21 +19408,24 @@ TokenRotation: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenRotation { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "rotation"; - value: string; - resolvedValue: undefined | number; + interface TokenRotation { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "rotation"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenRotation @@ -19646,7 +19454,7 @@ TokenRotation: An optional description text. type: |- ``` - readonly type + readonly type: "rotation" ``` The type of the token. @@ -19659,7 +19467,7 @@ TokenRotation: It's a number in degrees or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19673,56 +19481,58 @@ TokenRotation: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenSizing: overview: |- Interface TokenSizing @@ -19732,21 +19542,24 @@ TokenSizing: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenSizing { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "sizing"; - value: string; - resolvedValue: undefined | number; + interface TokenSizing { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "sizing"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenSizing @@ -19775,7 +19588,7 @@ TokenSizing: An optional description text. type: |- ``` - readonly type + readonly type: "sizing" ``` The type of the token. @@ -19788,7 +19601,7 @@ TokenSizing: It's a number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19801,56 +19614,58 @@ TokenSizing: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenSpacing: overview: |- Interface TokenSpacing @@ -19860,21 +19675,24 @@ TokenSpacing: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenSpacing { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "spacing"; - value: string; - resolvedValue: undefined | number; + interface TokenSpacing { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "spacing"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenSpacing @@ -19903,7 +19721,7 @@ TokenSpacing: An optional description text. type: |- ``` - readonly type + readonly type: "spacing" ``` The type of the token. @@ -19916,7 +19734,7 @@ TokenSpacing: It's a number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19929,56 +19747,58 @@ TokenSpacing: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenBorderWidth: overview: |- Interface TokenBorderWidth @@ -19988,21 +19808,24 @@ TokenBorderWidth: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenBorderWidth { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "borderWidth"; - value: string; - resolvedValue: undefined | number; + interface TokenBorderWidth { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "borderWidth"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenBorderWidth @@ -20031,7 +19854,7 @@ TokenBorderWidth: An optional description text. type: |- ``` - readonly type + readonly type: "borderWidth" ``` The type of the token. @@ -20044,7 +19867,7 @@ TokenBorderWidth: It's a positive number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -20057,56 +19880,58 @@ TokenBorderWidth: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenTextCase: overview: |- Interface TokenTextCase @@ -20116,21 +19941,24 @@ TokenTextCase: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenTextCase { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "textCase"; - value: string; - resolvedValue: undefined | string; + interface TokenTextCase { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "textCase"; + value: string; + resolvedValue: string | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenTextCase @@ -20159,7 +19987,7 @@ TokenTextCase: An optional description text. type: |- ``` - readonly type + readonly type: "textCase" ``` The type of the token. @@ -20172,7 +20000,7 @@ TokenTextCase: It's a case string or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | string + readonly resolvedValue: string | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -20186,56 +20014,58 @@ TokenTextCase: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenTextDecoration: overview: |- Interface TokenTextDecoration @@ -20245,21 +20075,24 @@ TokenTextDecoration: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenTextDecoration { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "textDecoration"; - value: string; - resolvedValue: undefined | string; + interface TokenTextDecoration { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "textDecoration"; + value: string; + resolvedValue: string | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenTextDecoration @@ -20288,7 +20121,7 @@ TokenTextDecoration: An optional description text. type: |- ``` - readonly type + readonly type: "textDecoration" ``` The type of the token. @@ -20301,7 +20134,7 @@ TokenTextDecoration: It's a decoration string or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | string + readonly resolvedValue: string | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -20315,70 +20148,72 @@ TokenTextDecoration: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenTypographyValue: overview: |- Interface TokenTypographyValue ============================== ``` - interface TokenTypographyValue { - letterSpacing: number; - fontFamilies: string[]; - fontSizes: number; - fontWeights: string; - lineHeight: number; - textCase: string; - textDecoration: string; + interface TokenTypographyValue { + letterSpacing: number; + fontFamilies: string[]; + fontSizes: number; + fontWeights: string; + lineHeight: number; + textCase: string; + textDecoration: string; } ``` @@ -20433,14 +20268,14 @@ TokenTypographyValueString: ==================================== ``` - interface TokenTypographyValueString { - letterSpacing: string; - fontFamilies: string | string[]; - fontSizes: string; - fontWeight: string; - lineHeight: string; - textCase: string; - textDecoration: string; + interface TokenTypographyValueString { + letterSpacing: string; + fontFamilies: string | string[]; + fontSizes: string; + fontWeight: string; + lineHeight: string; + textCase: string; + textDecoration: string; } ``` @@ -20503,21 +20338,24 @@ TokenTypography: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenTypography { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "typography"; - value: string | TokenTypographyValueString; - resolvedValue: undefined | TokenTypographyValue[]; + interface TokenTypography { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "typography"; + value: string | TokenTypographyValueString; + resolvedValue: TokenTypographyValue[] | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenTypography @@ -20546,7 +20384,7 @@ TokenTypography: An optional description text. type: |- ``` - readonly type + readonly type: "typography" ``` The type of the token. @@ -20560,7 +20398,7 @@ TokenTypography: TokenTypographyValueString. resolvedValue: |- ``` - readonly resolvedValue: undefined | TokenTypographyValue[] + readonly resolvedValue: TokenTypographyValue[] | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -20574,56 +20412,58 @@ TokenTypography: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenCatalog: overview: |- Interface TokenCatalog @@ -20638,13 +20478,13 @@ TokenCatalog: Themes. ``` - interface TokenCatalog { - themes: TokenTheme[]; - sets: TokenSet[]; - addTheme(group: string, name: string): TokenTheme; - addSet(name: string): TokenSet; - getThemeById(id: string): undefined | TokenTheme; - getSetById(id: string): undefined | TokenSet; + interface TokenCatalog { + themes: TokenTheme[]; + sets: TokenSet[]; + addTheme(group: { group: string; name: string }): TokenTheme; + addSet(name: { name: string }): TokenSet; + getThemeById(id: string): TokenTheme | undefined; + getSetById(id: string): TokenSet | undefined; } ``` @@ -20668,68 +20508,69 @@ TokenCatalog: Methods: addTheme: |- ``` - addTheme(group, name): TokenTheme + addTheme(group: { group: string; name: string }): TokenTheme ``` - * Creates a new TokenTheme and adds it to the catalog. + Creates a new TokenTheme and adds it to the catalog. - Parameters - + group: string + Parameters - The group name of the theme (can be empty string). - + name: string + * group: { group: string; name: string } - The name of the theme (required) + The group name of the theme (can be empty string). - Returns TokenTheme + Returns TokenTheme - Returns the created TokenTheme. + Returns the created TokenTheme. addSet: |- ``` - addSet(name): TokenSet + addSet(name: { name: string }): TokenSet ``` - * Creates a new TokenSet and adds it to the catalog. + Creates a new TokenSet and adds it to the catalog. - Parameters - + name: string + Parameters - The name of the set (required). It may contain - a group path, separated by `/`. + * name: { name: string } - Returns TokenSet + The name of the set (required). It may contain + a group path, separated by `/`. - Returns the created TokenSet. + Returns TokenSet + + Returns the created TokenSet. getThemeById: |- ``` - getThemeById(id): undefined | TokenTheme + getThemeById(id: string): TokenTheme | undefined ``` - * Retrieves a theme. + Retrieves a theme. - Parameters - + id: string + Parameters - the id of the theme. + * id: string - Returns undefined | TokenTheme + the id of the theme. - Returns the theme or undefined if not found. + Returns TokenTheme | undefined + + Returns the theme or undefined if not found. getSetById: |- ``` - getSetById(id): undefined | TokenSet + getSetById(id: string): TokenSet | undefined ``` - * Retrieves a set. + Retrieves a set. - Parameters - + id: string + Parameters - the id of the set. + * id: string - Returns undefined | TokenSet + the id of the set. - Returns the set or undefined if not found. + Returns TokenSet | undefined + + Returns the set or undefined if not found. TokenSet: overview: |- Interface TokenSet @@ -20742,17 +20583,19 @@ TokenSet: set is active. ``` - interface TokenSet { - id: string; - name: string; - active: boolean; - tokens: Token[]; - tokensByType: [string, Token[]][]; - toggleActive(): void; - getTokenById(id: string): undefined | Token; - addToken(type: TokenType, name: string, value: TokenValueString): Token; - duplicate(): TokenSet; - remove(): void; + interface TokenSet { + id: string; + name: string; + active: boolean; + tokens: Token[]; + tokensByType: [string, Token[]][]; + toggleActive(): void; + getTokenById(id: string): Token | undefined; + addToken( + type: { type: TokenType; name: string; value: TokenValueString }, + ): Token; + duplicate(): TokenSet; + remove(): void; } ``` @@ -20796,62 +20639,59 @@ TokenSet: toggleActive(): void ``` - * Toggles the active status of this set. + Toggles the active status of this set. - Returns void + Returns void getTokenById: |- ``` - getTokenById(id): undefined | Token + getTokenById(id: string): Token | undefined ``` - * Retrieves a token. + Retrieves a token. - Parameters - + id: string + Parameters - the id of the token. + * id: string - Returns undefined | Token + the id of the token. - Returns the token or undefined if not found. + Returns Token | undefined + + Returns the token or undefined if not found. addToken: |- ``` - addToken(type, name, value): Token + addToken( + type: { type: TokenType; name: string; value: TokenValueString }, + ): Token ``` - * Creates a new Token and adds it to the set. + Creates a new Token and adds it to the set. - Parameters - + type: TokenType + Parameters - Thetype of token. - + name: string + * type: { type: TokenType; name: string; value: TokenValueString } - The name of the token (required). It may contain - a group path, separated by `.`. - + value: TokenValueString + Thetype of token. - The value of the token (required), in the string form. + Returns Token - Returns Token - - Returns the created Token. + Returns the created Token. duplicate: |- ``` duplicate(): TokenSet ``` - * Adds to the catalog a new TokenSet equal to this one but with a new id. + Adds to the catalog a new TokenSet equal to this one but with a new id. - Returns TokenSet + Returns TokenSet remove: |- ``` remove(): void ``` - * Removes this set from the catalog. + Removes this set from the catalog. - Returns void + Returns void TokenTheme: overview: |- Interface TokenTheme @@ -20874,18 +20714,18 @@ TokenTheme: active). ``` - interface TokenTheme { - id: string; - externalId: undefined | string; - group: string; - name: string; - active: boolean; - toggleActive(): void; - activeSets: TokenSet[]; - addSet(tokenSet: TokenSet): void; - removeSet(tokenSet: TokenSet): void; - duplicate(): TokenTheme; - remove(): void; + interface TokenTheme { + id: string; + externalId: string | undefined; + group: string; + name: string; + active: boolean; + toggleActive(): void; + activeSets: TokenSet[]; + addSet(tokenSet: TokenSet): void; + removeSet(tokenSet: TokenSet): void; + duplicate(): TokenTheme; + remove(): void; } ``` @@ -20901,7 +20741,7 @@ TokenTheme: This one is not exported or synced with external Design Token sources. externalId: |- ``` - readonly externalId: undefined | string + readonly externalId: string | undefined ``` Optional identifier that may exists if the theme was imported from an @@ -20936,47 +20776,49 @@ TokenTheme: toggleActive(): void ``` - * Toggles the active status of this theme. + Toggles the active status of this theme. - Returns void + Returns void addSet: |- ``` - addSet(tokenSet): void + addSet(tokenSet: TokenSet): void ``` - * Adds a set to the list of the theme. + Adds a set to the list of the theme. - Parameters - + tokenSet: TokenSet + Parameters - Returns void + * tokenSet: TokenSet + + Returns void removeSet: |- ``` - removeSet(tokenSet): void + removeSet(tokenSet: TokenSet): void ``` - * Removes a set from the list of the theme. + Removes a set from the list of the theme. - Parameters - + tokenSet: TokenSet + Parameters - Returns void + * tokenSet: TokenSet + + Returns void duplicate: |- ``` duplicate(): TokenTheme ``` - * Adds to the catalog a new TokenTheme equal to this one but with a new id. + Adds to the catalog a new TokenTheme equal to this one but with a new id. - Returns TokenTheme + Returns TokenTheme remove: |- ``` remove(): void ``` - * Removes this theme from the catalog. + Removes this theme from the catalog. - Returns void + Returns void User: overview: |- Interface User @@ -20985,16 +20827,16 @@ User: Represents a user in Penpot. ``` - interface User { - id: string; - name?: string; - avatarUrl?: string; - color: string; - sessionId?: string; + interface User { + id: string; + name?: string; + avatarUrl?: string; + color: string; + sessionId?: string; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * User + ActiveUser @@ -21065,16 +20907,16 @@ Variants: TODO ``` - interface Variants { - id: string; - libraryId: string; - properties: string[]; - currentValues(property: string): string[]; - removeProperty(pos: number): void; - renameProperty(pos: number, name: string): void; - variantComponents(): LibraryComponent[]; - addVariant(): void; - addProperty(): void; + interface Variants { + id: string; + libraryId: string; + properties: string[]; + currentValues(property: string): string[]; + removeProperty(pos: number): void; + renameProperty(pos: number, name: string): void; + variantComponents(): LibraryComponent[]; + addVariant(): void; + addProperty(): void; } ``` @@ -21103,70 +20945,73 @@ Variants: Methods: currentValues: |- ``` - currentValues(property): string[] + currentValues(property: string): string[] ``` - * A list of all the values of a property along all the variantComponents of this Variant + A list of all the values of a property along all the variantComponents of this Variant - Parameters - + property: string + Parameters - The name of the property + * property: string - Returns string[] + The name of the property + + Returns string[] removeProperty: |- ``` - removeProperty(pos): void + removeProperty(pos: number): void ``` - * Remove a property of the Variant + Remove a property of the Variant - Parameters - + pos: number + Parameters - The position of the property to remove + * pos: number - Returns void + The position of the property to remove + + Returns void renameProperty: |- ``` - renameProperty(pos, name): void + renameProperty(pos: number, name: string): void ``` - * Rename a property of the Variant + Rename a property of the Variant - Parameters - + pos: number + Parameters - The position of the property to rename - + name: string + * pos: number - The new name of the property + The position of the property to rename + * name: string - Returns void + The new name of the property + + Returns void variantComponents: |- ``` variantComponents(): LibraryComponent[] ``` - * List all the VariantComponents on this Variant. + List all the VariantComponents on this Variant. - Returns LibraryComponent[] + Returns LibraryComponent[] addVariant: |- ``` addVariant(): void ``` - * Creates a duplicate of the main VariantComponent of this Variant + Creates a duplicate of the main VariantComponent of this Variant - Returns void + Returns void addProperty: |- ``` addProperty(): void ``` - * Adds a new property to this Variant + Adds a new property to this Variant - Returns void + Returns void Viewport: overview: |- Interface Viewport @@ -21176,13 +21021,13 @@ Viewport: It includes the center point, zoom level, and the bounds of the viewport. ``` - interface Viewport { - center: Point; - zoom: number; - bounds: Bounds; - zoomReset(): void; - zoomToFitAll(): void; - zoomIntoView(shapes: Shape[]): void; + interface Viewport { + center: Point; + zoom: number; + bounds: Bounds; + zoomReset(): void; + zoomToFitAll(): void; + zoomIntoView(shapes: Shape[]): void; } ``` @@ -21214,36 +21059,37 @@ Viewport: zoomReset(): void ``` - * Resets the zoom level. + Resets the zoom level. - Returns void + Returns void zoomToFitAll: |- ``` zoomToFitAll(): void ``` - * Changes the viewport and zoom so can fit all the current shapes in the page. + Changes the viewport and zoom so can fit all the current shapes in the page. - Returns void + Returns void zoomIntoView: |- ``` - zoomIntoView(shapes): void + zoomIntoView(shapes: Shape[]): void ``` - * Changes the viewport and zoom so all the `shapes` in the argument are - visible. + Changes the viewport and zoom so all the `shapes` in the argument are + visible. - Parameters - + shapes: Shape[] + Parameters - Returns void + * shapes: Shape[] + + Returns void Action: overview: |- Type Alias Action ================= ``` - Action: + Action: | NavigateTo | OpenOverlay | ToggleOverlay @@ -21275,11 +21121,7 @@ BooleanType: ====================== ``` - BooleanType: - | "union" - | "difference" - | "exclude" - | "intersection" + BooleanType: "union" | "difference" | "exclude" | "intersection" ``` Represents the boolean operation types available in Penpot. @@ -21292,98 +21134,123 @@ Bounds: Type Alias Bounds ================= - ``` - Bounds: { - x: number; - y: number; - width: number; - height: number; - } - ``` - Bounds represents the boundaries of a rectangular area, defined by the coordinates of the top-left corner and the dimensions of the rectangle. - Type declaration - - * x: number - - Top-left x position of the rectangular area defined - * y: number - - Top-left y position of the rectangular area defined - * width: number - - Width of the represented area - * height: number - - Height of the represented area - Example ``` const bounds = { x: 50, y: 50, width: 200, height: 100 };console.log(bounds); ``` + ``` + type Bounds = { + x: number; + y: number; + width: number; + height: number; + } + ``` + Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer, Viewport - members: {} + members: + Properties: + x: |- + ``` + x: number + ``` + + Top-left x position of the rectangular area defined + y: |- + ``` + y: number + ``` + + Top-left y position of the rectangular area defined + width: |- + ``` + width: number + ``` + + Width of the represented area + height: |- + ``` + height: number + ``` + + Height of the represented area Gradient: overview: |- Type Alias Gradient =================== - ``` - Gradient: { - type: "linear" | "radial"; - startX: number; - startY: number; - endX: number; - endY: number; - width: number; - stops: { - color: string; - opacity?: number; - offset: number; - }[]; - } - ``` - Represents a gradient configuration in Penpot. A gradient can be either linear or radial and includes properties to define its shape, position, and color stops. - Type declaration - - * type: "linear" | "radial" - - Specifies the type of gradient. - - + 'linear': A gradient that transitions colors along a straight line. - + 'radial': A gradient that transitions colors radiating outward from a central point. - - Example - ``` - const gradient: Gradient = { type: 'linear', startX: 0, startY: 0, endX: 100, endY: 100, width: 100, stops: [{ color: '#FF5733', offset: 0 }] }; - ``` - * startX: number - - The X-coordinate of the starting point of the gradient. - * startY: number - - The Y-coordinate of the starting point of the gradient. - * endX: number - - The X-coordinate of the ending point of the gradient. - * endY: number - - The Y-coordinate of the ending point of the gradient. - * width: number - - The width of the gradient. For radial gradients, this could be interpreted as the radius. - * stops: { color: string; opacity?: number; offset: number; }[] - - An array of color stops that define the gradient. + ``` + type Gradient = { + type: "linear" | "radial"; + startX: number; + startY: number; + endX: number; + endY: number; + width: number; + stops: { color: string; opacity?: number; offset: number }[]; + } + ``` Referenced by: Color, Fill, LibraryColor, Stroke - members: {} + members: + Properties: + type: |- + ``` + type: "linear" | "radial" + ``` + + Specifies the type of gradient. + + * 'linear': A gradient that transitions colors along a straight line. + * 'radial': A gradient that transitions colors radiating outward from a central point. + + Example + ``` + const gradient: Gradient = { type: 'linear', startX: 0, startY: 0, endX: 100, endY: 100, width: 100, stops: [{ color: '#FF5733', offset: 0 }] }; + ``` + startX: |- + ``` + startX: number + ``` + + The X-coordinate of the starting point of the gradient. + startY: |- + ``` + startY: number + ``` + + The Y-coordinate of the starting point of the gradient. + endX: |- + ``` + endX: number + ``` + + The X-coordinate of the ending point of the gradient. + endY: |- + ``` + endY: number + ``` + + The Y-coordinate of the ending point of the gradient. + width: |- + ``` + width: number + ``` + + The width of the gradient. For radial gradients, this could be interpreted as the radius. + stops: |- + ``` + stops: { color: string; opacity?: number; offset: number }[] + ``` + + An array of color stops that define the gradient. Guide: overview: |- Type Alias Guide @@ -21403,96 +21270,119 @@ ImageData: Type Alias ImageData ==================== - ``` - ImageData: { - name?: string; - width: number; - height: number; - mtype?: string; - id: string; - keepAspectRatio?: boolean; - data(): Promise; - } - ``` - Represents image data in Penpot. This includes properties for defining the image's dimensions, metadata, and aspect ratio handling. - Type declaration - - * Optionalname?: string - - The optional name of the image. - * width: number - - The width of the image. - * height: number - - The height of the image. - * Optionalmtype?: string - - The optional media type of the image (e.g., 'image/png', 'image/jpeg'). - * id: string - - The unique identifier for the image. - * OptionalkeepAspectRatio?: boolean - - Whether to keep the aspect ratio of the image when resizing. - Defaults to false if omitted. - * data:function - - ``` - data(): Promise - ``` - - + Returns the imaged data as a byte array. - - Returns Promise + ``` + type ImageData = { + name?: string; + width: number; + height: number; + mtype?: string; + id: string; + keepAspectRatio?: boolean; + data(): Promise>; + } + ``` Referenced by: Color, Context, Fill, LibraryColor, Penpot - members: {} + members: + Properties: + name: |- + ``` + name?: string + ``` + + The optional name of the image. + width: |- + ``` + width: number + ``` + + The width of the image. + height: |- + ``` + height: number + ``` + + The height of the image. + mtype: |- + ``` + mtype?: string + ``` + + The optional media type of the image (e.g., 'image/png', 'image/jpeg'). + id: |- + ``` + id: string + ``` + + The unique identifier for the image. + keepAspectRatio: |- + ``` + keepAspectRatio?: boolean + ``` + + Whether to keep the aspect ratio of the image when resizing. + Defaults to false if omitted. + Methods: + data: |- + ``` + data(): Promise> + ``` + + Returns the imaged data as a byte array. + + Returns Promise> LibraryContext: overview: |- Type Alias LibraryContext ========================= - ``` - LibraryContext: { - local: Library; - connected: Library[]; - availableLibraries(): Promise; - connectLibrary(libraryId: string): Promise; - } - ``` - Represents the context of Penpot libraries, including both local and connected libraries. This type contains references to the local library and an array of connected libraries. - Type declaration + ``` + type LibraryContext = { + local: Library; + connected: Library[]; + availableLibraries(): Promise; + connectLibrary(libraryId: string): Promise; + } + ``` - * Readonlylocal: Library + Referenced by: Context, Penpot + members: + Properties: + local: |- + ``` + readonly local: Library + ``` - The local library in the Penpot context. + The local library in the Penpot context. - Example - ``` - const localLibrary = libraryContext.local; - ``` - * Readonlyconnected: Library[] + Example + ``` + const localLibrary = libraryContext.local; + ``` + connected: |- + ``` + readonly connected: Library[] + ``` - An array of connected libraries in the Penpot context. + An array of connected libraries in the Penpot context. - Example - ``` - const connectedLibraries = libraryContext.connected; - ``` - * availableLibraries:function + Example + ``` + const connectedLibraries = libraryContext.connected; + ``` + Methods: + availableLibraries: |- + ``` + availableLibraries(): Promise + ``` - ``` - availableLibraries(): Promise - ``` - - + Retrieves a summary of available libraries that can be connected to. + Retrieves a summary of available libraries that can be connected to. Returns Promise @@ -21502,16 +21392,16 @@ LibraryContext: ``` const availableLibraries = await libraryContext.availableLibraries(); ``` - * connectLibrary:function + connectLibrary: |- + ``` + connectLibrary(libraryId: string): Promise + ``` - ``` - connectLibrary(libraryId): Promise - ``` - - + Connects to a specific library identified by its ID. + Connects to a specific library identified by its ID. Parameters - - libraryId: string + + * libraryId: string The ID of the library to connect to. @@ -21523,25 +21413,31 @@ LibraryContext: ``` const connectedLibrary = await libraryContext.connectLibrary('library-id'); ``` - - Referenced by: Context, Penpot - members: {} Point: overview: |- Type Alias Point ================ + Point represents a point in 2D space, typically with x and y coordinates. + ``` - Point: { - x: number; - y: number; + type Point = { + x: number; + y: number; } ``` - Point represents a point in 2D space, typically with x and y coordinates. - Referenced by: Board, Boolean, CommentThread, Ellipse, Group, Image, OpenOverlay, OverlayAction, Page, Path, Rectangle, ShapeBase, SvgRaw, Text, ToggleOverlay, VariantContainer, Viewport - members: {} + members: + Properties: + x: |- + ``` + x: number + ``` + y: |- + ``` + y: number + ``` RulerGuideOrientation: overview: |- Type Alias RulerGuideOrientation @@ -21559,7 +21455,7 @@ Shape: ================ ``` - Shape: + Shape: | Board | Group | Boolean @@ -21587,7 +21483,7 @@ StrokeCap: ==================== ``` - StrokeCap: + StrokeCap: | "round" | "square" | "line-arrow" @@ -21621,11 +21517,7 @@ TrackType: ==================== ``` - TrackType: - | "flex" - | "fixed" - | "percent" - | "auto" + TrackType: "flex" | "fixed" | "percent" | "auto" ``` Represents the type of track in Penpot. @@ -21639,11 +21531,7 @@ Trigger: ================== ``` - Trigger: - | "click" - | "mouse-enter" - | "mouse-leave" - | "after-delay" + Trigger: "click" | "mouse-enter" | "mouse-leave" | "after-delay" ``` Types of triggers defined: @@ -21661,7 +21549,7 @@ TokenValueString: =========================== ``` - TokenValueString: + TokenValueString: | TokenShadowValueString | TokenTypographyValueString | string @@ -21678,7 +21566,7 @@ Token: ================ ``` - Token: + Token: | TokenBorderRadius | TokenShadow | TokenColor @@ -21708,11 +21596,7 @@ TokenBorderRadiusProps: ================================= ``` - TokenBorderRadiusProps: - | "r1" - | "r2" - | "r3" - | "r4" + TokenBorderRadiusProps: "r1" | "r2" | "r3" | "r4" ``` The properties that a BorderRadius token can be applied to. @@ -21725,7 +21609,7 @@ TokenShadowProps: =========================== ``` - TokenShadowProps + TokenShadowProps: "shadow" ``` The properties that a Shadow token can be applied to. @@ -21738,7 +21622,7 @@ TokenColorProps: ========================== ``` - TokenColorProps: "fill" | "stroke" + TokenColorProps: "fill" | "strokeColor" ``` The properties that a Color token can be applied to. @@ -21764,7 +21648,7 @@ TokenFontFamiliesProps: ================================= ``` - TokenFontFamiliesProps + TokenFontFamiliesProps: "font-families" ``` The properties that a FontFamilies token can be applied to. @@ -21777,7 +21661,7 @@ TokenFontSizesProps: ============================== ``` - TokenFontSizesProps + TokenFontSizesProps: "font-size" ``` The properties that a FontSizes token can be applied to. @@ -21790,7 +21674,7 @@ TokenFontWeightProps: =============================== ``` - TokenFontWeightProps + TokenFontWeightProps: "font-weight" ``` The properties that a FontWeight token can be applied to. @@ -21803,7 +21687,7 @@ TokenLetterSpacingProps: ================================== ``` - TokenLetterSpacingProps + TokenLetterSpacingProps: "letter-spacing" ``` The properties that a LetterSpacing token can be applied to. @@ -21829,7 +21713,7 @@ TokenOpacityProps: ============================ ``` - TokenOpacityProps + TokenOpacityProps: "opacity" ``` The properties that an Opacity token can be applied to. @@ -21842,7 +21726,7 @@ TokenSizingProps: =========================== ``` - TokenSizingProps: + TokenSizingProps: | "width" | "height" | "layout-item-min-w" @@ -21861,7 +21745,7 @@ TokenSpacingProps: ============================ ``` - TokenSpacingProps: + TokenSpacingProps: | "row-gap" | "column-gap" | "p1" @@ -21884,7 +21768,7 @@ TokenBorderWidthProps: ================================ ``` - TokenBorderWidthProps + TokenBorderWidthProps: "stroke-width" ``` The properties that a BorderWidth token can be applied to. @@ -21897,7 +21781,7 @@ TokenTextCaseProps: ============================= ``` - TokenTextCaseProps + TokenTextCaseProps: "text-case" ``` The properties that a TextCase token can be applied to. @@ -21910,7 +21794,7 @@ TokenTextDecorationProps: =================================== ``` - TokenTextDecorationProps + TokenTextDecorationProps: "text-decoration" ``` The properties that a TextDecoration token can be applied to. @@ -21923,7 +21807,7 @@ TokenTypographyProps: =============================== ``` - TokenTypographyProps + TokenTypographyProps: "typography" ``` The properties that a Typography token can be applied to. @@ -21936,7 +21820,7 @@ TokenProperty: ======================== ``` - TokenProperty: + TokenProperty: | "all" | TokenBorderRadiusProps | TokenShadowProps @@ -21969,7 +21853,7 @@ TokenType: ==================== ``` - TokenType: + TokenType: | "borderRadius" | "shadow" | "color" From b6dfdc23cd819630dfca42b51087fb41f33c2a4b Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Tue, 10 Feb 2026 17:03:17 +0100 Subject: [PATCH 19/22] :sparkles: Update information on TokenProperty --- .../server/data/initial_instructions.md | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/mcp/packages/server/data/initial_instructions.md b/mcp/packages/server/data/initial_instructions.md index 151cf29897..aa212be1b5 100644 --- a/mcp/packages/server/data/initial_instructions.md +++ b/mcp/packages/server/data/initial_instructions.md @@ -296,19 +296,29 @@ Discovering tokens: Applying tokens: * `shape.applyToken(token, properties: undefined | TokenProperty[])` - Apply a token to a shape for one or more properties (if properties is undefined, use a default property based on the token type - not usually recommended). - `TokenProperty` is a union type; here are some of the possible values: + `TokenProperty` is a union type; possible values are: - "all": applies the token to all properties it can control - TokenBorderRadiusProps: "r1", "r2", "r3", "r4" - - TokenColorProps: "fill", "stroke" + - TokenShadowProps: "shadow" + - TokenColorProps: "fill", "stroke-color" - TokenDimensionProps: "x", "y", "stroke-width" + - TokenFontFamiliesProps: "font-families" + - TokenFontSizesProps: "font-size" + - TokenFontWeightProps: "font-weight" + - TokenLetterSpacingProps: "letter-spacing" - TokenNumberProps: "rotation", "line-height" + - TokenOpacityProps: "opacity" - TokenSizingProps: "width", "height", "layout-item-min-w", "layout-item-max-w", "layout-item-min-h", "layout-item-max-h" - TokenSpacingProps: "row-gap", "column-gap", "p1", "p2", "p3", "p4", "m1", "m2", "m3", "m4" + - TokenBorderWidthProps: "stroke-width" + - TokenTextCaseProps: "text-case" + - TokenTextDecorationProps: "text-decoration" + - TokenTypographyProps: "typography" * `token.applyToShapes(shapes, properties)` - Apply from token * Application is **asynchronous** (wait for ~100ms to see the effects) * After application: - - `shape.tokens` returns a mapping `{ propertyName: "token.name" }` - - The properties that the tokens control will reflect the token's resolved value. + - `shape.tokens` returns a mapping `{ propertyName: "token.name" }` from `TokenProperty` to token name + - The actual shape properties that the tokens control will reflect the token's resolved value. Removing tokens: Simply set the respective property directly - token binding is automatically removed, e.g. From f5afcde0dece4df120371e2dbc362ff9925bff2c Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Tue, 10 Feb 2026 22:52:56 +0100 Subject: [PATCH 20/22] :sparkles: Improve shapeStructure * Add information on component instance (component id, name; main instance id) * Improve JSON result order (children should come last) --- mcp/packages/plugin/src/PenpotUtils.ts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/mcp/packages/plugin/src/PenpotUtils.ts b/mcp/packages/plugin/src/PenpotUtils.ts index 602ac3327c..d4d3f49967 100644 --- a/mcp/packages/plugin/src/PenpotUtils.ts +++ b/mcp/packages/plugin/src/PenpotUtils.ts @@ -25,7 +25,6 @@ export class PenpotUtils { id: shape.id, name: shape.name, type: shape.type, - children: children, }; // add layout information if present @@ -48,6 +47,23 @@ export class PenpotUtils { }; } + // add component instance information if present + if (shape.isComponentInstance()) { + result.componentInstance = {}; + const component = shape.component(); + if (component) { + result.componentInstance.componentId = component.id; + result.componentInstance.componentName = component.name; + const mainInstance = component.mainInstance(); + if (mainInstance) { + result.componentInstance.mainInstanceId = mainInstance.id; + } + } + } + + // finally, add children (last for more readable nesting order) + result.children = children; + return result; } From 8ac17604fdb695c27bdf958d0b0e946d74689343 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Tue, 10 Feb 2026 22:53:30 +0100 Subject: [PATCH 21/22] :sparkles: Improve information on component instances * Add information on detachment * Add information on remove behaviour in component instances --- mcp/packages/server/data/initial_instructions.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/mcp/packages/server/data/initial_instructions.md b/mcp/packages/server/data/initial_instructions.md index aa212be1b5..8aa60b1a1b 100644 --- a/mcp/packages/server/data/initial_instructions.md +++ b/mcp/packages/server/data/initial_instructions.md @@ -61,7 +61,8 @@ Actual low-level shape types are `Rectangle`, `Path`, `Text`, `Ellipse`, `Image` **Modification Methods**: * `resize(width, height)` - Change dimensions (required for width/height since they're read-only) * `rotate(angle, center?)` - Rotate shape - * `remove()` - Permanently destroy the shape (use only for deletion, NOT for reparenting) + * `remove()` - Permanently destroy the shape (use only for deletion, NOT for reparenting). + Exception: When the shape is a descendant of a board that is a component (asset), the shape will not be removed but instead be made invisible. **Hierarchical Structure**: * `parent` - The parent shape (null for root shapes) @@ -262,6 +263,10 @@ Adding assets to a library: const newComponent: LibraryComponent = penpot.library.local.createComponent(shapes); newComponent.name = 'My Button'; +Detaching: + * When creating new design elements based on a component instance/copy, use `shape.detach()` to break the link to the main component, allowing independent modification. + * Without detaching, some manipulations will have no effect; e.g. child/descendant removal will not work. + # Design Tokens Design tokens are reusable design values (colors, dimensions, typography, etc.) for consistent styling. From 7eb9a207f5a696172db91be010be9bfc0c606c86 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Wed, 11 Feb 2026 11:00:00 +0100 Subject: [PATCH 22/22] :sparkles: Change PenpotUtils.findShapes to search on all pages by default This matches the behaviour of findShape, more closely aligning with the LLM's expectations (given the lack of concrete information in the instructions) --- mcp/packages/plugin/src/PenpotUtils.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/mcp/packages/plugin/src/PenpotUtils.ts b/mcp/packages/plugin/src/PenpotUtils.ts index d4d3f49967..964cf70f4c 100644 --- a/mcp/packages/plugin/src/PenpotUtils.ts +++ b/mcp/packages/plugin/src/PenpotUtils.ts @@ -71,9 +71,9 @@ export class PenpotUtils { * Finds all shapes that matches the given predicate in the given shape tree. * * @param predicate - A function that takes a shape and returns true if it matches the criteria - * @param root - The root shape to start the search from (defaults to penpot.root) + * @param root - The root shape to start the search from (if null, searches all pages) */ - public static findShapes(predicate: (shape: Shape) => boolean, root: Shape | null = penpot.root): Shape[] { + public static findShapes(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape[] { let result = new Array(); let find = function (shape: Shape | null) { @@ -90,7 +90,16 @@ export class PenpotUtils { } }; - find(root); + if (root === null) { + const pages = penpot.currentFile?.pages; + if (pages) { + for (let page of pages) { + find(page.root); + } + } + } else { + find(root); + } return result; }