Penpot: overview: |- Interface 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; hidden: boolean }, ) => 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; version: string; 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: string | 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[]; createVariantFromComponents(shapes: Board[]): VariantContainer; } ``` Hierarchy * Omit + Penpot members: Properties: ui: |- ``` ui: { open: ( name: string, url: string, options?: { width: number; height: number; hidden: boolean }, ) => 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 * open: ( name: string, url: string, options?: { width: number; height: number; hidden: boolean },) => 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. Example ``` penpot.ui.open('Plugin name', 'url', {width: 150, height: 300}); ``` * size: { width: number; height: number } | null * resize: (width: number, height: number) => void Resizes the plugin UI. Example ``` penpot.ui.resize(300, 400); ``` * sendMessage: (message: unknown) => void Sends a message to the plugin UI. Example ``` this.sendMessage({ type: 'example-type', content: 'data we want to share' }); ``` * 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 Example ``` penpot.ui.onMessage((message) => {if(message.type === 'example-type' { ...do something })}); ``` utils: |- ``` utils: ContextUtils ``` Provides access to utility functions and context-specific operations. closePlugin: |- ``` closePlugin: () => void ``` Closes the plugin. When this method is called the UI will be closed. Example ``` penpot.closePlugin(); ``` version: |- ``` readonly version: string ``` Returns the current penpot version. root: |- ``` readonly root: Shape | null ``` The root shape in the current Penpot context. Requires `content:read` permission. Example ``` const rootShape = context.root;console.log(rootShape); ``` currentFile: |- ``` readonly currentFile: File | null ``` Retrieves file data from the current Penpot context. Requires `content:read` permission. Returns Returns the file data or `null` if no file is available. Example ``` const fileData = context.currentFile;console.log(fileData); ``` currentPage: |- ``` readonly currentPage: Page | null ``` The current page in the Penpot context. Requires `content:read` permission. Example ``` const currentPage = context.currentPage;console.log(currentPage); ``` viewport: |- ``` readonly viewport: Viewport ``` The viewport settings in the Penpot context. Example ``` const viewportSettings = context.viewport;console.log(viewportSettings); ``` flags: |- ``` readonly flags: Flags ``` Provides flags to customize the API behavior. history: |- ``` readonly history: HistoryContext ``` Context encapsulating the history operations Example ``` const historyContext = context.history;console.log(historyContext); ``` library: |- ``` readonly library: LibraryContext ``` The library context in the Penpot context, including both local and connected libraries. Requires `library:read` permission. Example ``` const libraryContext = context.library;console.log(libraryContext); ``` fonts: |- ``` readonly fonts: FontsContext ``` The fonts context in the Penpot context, providing methods to manage fonts. Requires `content:read` permission. Example ``` const fontsContext = context.fonts;console.log(fontsContext); ``` currentUser: |- ``` readonly currentUser: User ``` The current user in the Penpot context. Requires `user:read` permission. Example ``` const currentUser = context.currentUser;console.log(currentUser); ``` activeUsers: |- ``` readonly activeUsers: ActiveUser[] ``` An array of active users in the Penpot context. Requires `user:read` permission. Example ``` const activeUsers = context.activeUsers;console.log(activeUsers); ``` theme: |- ``` readonly theme: Theme ``` The current theme (light or dark) in Penpot. Example ``` const currentTheme = context.theme;console.log(currentTheme); ``` localStorage: |- ``` readonly localStorage: LocalStorage ``` Access to the localStorage proxy selection: |- ``` selection: Shape[] ``` The currently selected shapes in Penpot. Requires `content:read` permission. Example ``` const selectedShapes = context.selection;console.log(selectedShapes); ``` Methods: on: |- ``` 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. 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 }); ``` * 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. Type Parameters * T extends keyof EventsMap Parameters * type: T The event type to listen for. * callback: (event: EventsMap[T]) => void 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. Returns symbol the listener id that can be used to call `off` and cancel the listener Example ``` penpot.on('pagechange', () => {...do something}). ``` off: |- ``` off(listenerId: symbol): void ``` Removes an event listener for the specified event type. Parameters * listenerId: symbol the id returned by the `on` method when the callback was set Returns void Example ``` const listenerId = penpot.on('contentsave', () => console.log("Changed"));penpot.off(listenerId); ``` shapesColors: |- ``` shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[] ``` Retrieves colors applied to the given shapes in Penpot. Requires `content:read` permission. Parameters * shapes: Shape[] Returns (Color & ColorShapeInfo)[] Returns an array of colors and their shape information. Example ``` const colors = context.shapesColors(shapes);console.log(colors); ``` replaceColor: |- ``` 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. Parameters * shapes: Shape[] * oldColor: Color * newColor: Color Returns void Example ``` context.replaceColor(shapes, oldColor, newColor); ``` uploadMediaUrl: |- ``` uploadMediaUrl(name: string, url: string): Promise ``` Uploads media to Penpot and retrieves its image data. Requires `content:write` permission. Parameters * name: string The name of the media. * url: string The URL of the media to be uploaded. Returns Promise 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: string, data: Uint8Array, mimeType: string, ): Promise ``` Uploads media to penpot and retrieves the image data. Requires `content:write` permission. Parameters * name: string The name of the media. * data: Uint8Array The image content data * mimeType: string Returns Promise 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: Shape[]): Group | null ``` Groups the specified shapes. Requires `content:write` permission. Parameters * shapes: Shape[] An array of shapes to group. Returns Group | null 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: Group, ...other: Group[]): void ``` Ungroups the specified group. Requires `content:write` permission. Parameters * group: Group The group to ungroup. * ...other: Group[] Additional groups to ungroup. 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. 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", },]; ``` 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. 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); ``` createEllipse: |- ``` createEllipse(): Ellipse ``` Use this method to create the shape of an ellipse. Requires `content:write` permission. 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", },]; ``` createPath: |- ``` createPath(): Path ``` Use this method to create a path. Requires `content:write` permission. Returns Path Example ``` const path = penpot.createPath();path.name = "My path";// for solid colorpath.fills = [{ fillColor: "#7EFFF5" }]; ``` createBoolean: |- ``` createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null ``` Creates a Boolean shape based on the specified boolean operation and shapes. Requires `content:write` permission. Parameters * boolType: BooleanType The type of boolean operation ('union', 'difference', 'exclude', 'intersection'). * shapes: Shape[] An array of shapes to perform the boolean operation on. Returns Boolean | null Returns the newly created Boolean shape resulting from the boolean operation. Example ``` const booleanShape = context.createBoolean('union', [shape1, shape2]); ``` createShapeFromSvg: |- ``` createShapeFromSvg(svgString: string): Group | null ``` Creates a Group from an SVG string. Requires `content:write` permission. Parameters * svgString: string The SVG string representing the shapes to be converted into a group. Returns Group | null Returns the newly created Group containing the shapes from the SVG. Example ``` const svgGroup = context.createShapeFromSvg('...'); ``` createShapeFromSvgWithImages: |- ``` 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. Parameters * svgString: string The SVG string representing the shapes to be converted into a group. Returns Promise Returns a promise with the newly created Group containing the shapes from the SVG. Example ``` const svgGroup = await context.createShapeFromSvgWithImages('...'); ``` createText: |- ``` createText(text: string): Text | null ``` Creates a Text shape with the specified text content. Requires `content:write` permission. Parameters * text: string The text content for the Text shape. Returns Text | null 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: Shape[], options?: { type?: "html" | "svg" }): string ``` Generates markup for the given shapes. Requires `content:read` permission Parameters * shapes: Shape[] * options: { type?: "html" | "svg" } Returns string Example ``` const markup = context.generateMarkup(shapes, { type: 'html' });console.log(markup); ``` generateStyle: |- ``` generateStyle( shapes: Shape[], options?: { type?: "css"; withPrelude?: boolean; includeChildren?: boolean; }, ): string ``` Generates styles for the given shapes. Requires `content:read` permission Parameters * shapes: Shape[] * options: { type?: "css"; withPrelude?: boolean; includeChildren?: boolean } Returns string Example ``` const styles = context.generateStyle(shapes, { type: 'css' });console.log(styles); ``` generateFontFaces: |- ``` generateFontFaces(shapes: Shape[]): Promise ``` Generates the fontfaces styles necessaries to render the shapes. Requires `content:read` permission Parameters * shapes: Shape[] Returns Promise Example ``` const fontfaces = context.generateFontFaces(penpot.selection);console.log(fontfaces); ``` openViewer: |- ``` openViewer(): void ``` Opens the viewer section. Requires `content:read` permission. Returns void createPage: |- ``` createPage(): Page ``` Creates a new page. Requires `content:write` permission. Returns Page openPage: |- ``` openPage(page: string | Page, newWindow?: boolean): void ``` Changes the current open page to given page. Requires `content:read` permission. Parameters * page: string | Page the page to open (a Page object or a page UUID string) * newWindow: boolean if true opens the page in a new window, defaults to false Returns void Example ``` context.openPage(page); ``` alignHorizontal: |- ``` 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. Parameters * shapes: Shape[] to align * direction: "center" | "left" | "right" where the shapes will be aligned Returns void alignVertical: |- ``` 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. Parameters * shapes: Shape[] to align * direction: "center" | "top" | "bottom" where the shapes will be aligned Returns void distributeHorizontal: |- ``` distributeHorizontal(shapes: Shape[]): void ``` Distributing objects to position them horizontally with equal distances between them. Parameters * shapes: Shape[] to distribute Returns void distributeVertical: |- ``` distributeVertical(shapes: Shape[]): void ``` Distributing objects to position them vertically with equal distances between them. Parameters * shapes: Shape[] to distribute Returns void flatten: |- ``` flatten(shapes: Shape[]): Path[] ``` Converts the shapes into Paths. If the shapes are complex will put together all its paths into one. Parameters * shapes: Shape[] to flatten Returns Path[] createVariantFromComponents: |- ``` createVariantFromComponents(shapes: Board[]): VariantContainer ``` Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu on the Penpot interface. All the shapes passed as arguments should be main instances. Parameters * shapes: Board[] A list of main instances of the components to combine. Returns VariantContainer The variant container created ActiveUser: overview: |- Interface ActiveUser ==================== Represents an active user in Penpot, extending the `User` interface. 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; } ``` Hierarchy (View Summary) * User + ActiveUser Referenced by: Context, Penpot members: Properties: position: |- ``` position?: { x: number; y: number } ``` The position of the active user. Example ``` const userPosition = activeUser.position;console.log(userPosition); ``` zoom: |- ``` readonly zoom?: number ``` The zoom level of the active user. Example ``` const userZoom = activeUser.zoom;console.log(userZoom); ``` id: |- ``` readonly id: string ``` The unique identifier of the user. Example ``` const userId = user.id;console.log(userId); ``` name: |- ``` readonly name?: string ``` The name of the user. Example ``` const userName = user.name;console.log(userName); ``` avatarUrl: |- ``` readonly avatarUrl?: string ``` The URL of the user's avatar image. Example ``` const avatarUrl = user.avatarUrl;console.log(avatarUrl); ``` color: |- ``` readonly color: string ``` The color associated with the user. Example ``` const userColor = user.color;console.log(userColor); ``` sessionId: |- ``` readonly sessionId?: string ``` The session ID of the user. Example ``` const sessionId = user.sessionId;console.log(sessionId); ``` Blur: overview: |- Interface Blur ============== Represents blur properties in Penpot. 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; } ``` Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer members: Properties: id: |- ``` id?: string ``` The optional unique identifier for the blur effect. type: |- ``` type?: "layer-blur" ``` The optional type of the blur effect. Currently, only 'layer-blur' is supported. value: |- ``` value?: number ``` The optional intensity value of the blur effect. hidden: |- ``` hidden?: boolean ``` Specifies whether the blur effect is hidden. Defaults to false if omitted. Board: overview: |- Interface Board =============== Represents a board in Penpot. 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: 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" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "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?: LayoutCellProperties; setParentIndex(index: number): void; tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[]): VariantContainer; 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 Summary) * ShapeBase + Board - VariantContainer Referenced by: CloseOverlay, CommentThread, Context, ContextTypesUtils, Flow, NavigateTo, OpenOverlay, OverlayAction, Page, Penpot, RulerGuide, Shape, ToggleOverlay members: Properties: type: |- ``` readonly type: "board" ``` The type of the shape, which is always 'board' for boards. clipContent: |- ``` clipContent: boolean ``` When true the board will clip the children inside showInViewMode: |- ``` showInViewMode: boolean ``` WHen true the board will be displayed in the view mode grid: |- ``` readonly grid?: GridLayout ``` The grid layout configuration of the board, if applicable. flex: |- ``` readonly flex?: FlexLayout ``` The flex layout configuration of the board, if applicable. guides: |- ``` guides: Guide[] ``` The guides associated with the board. rulerGuides: |- ``` readonly rulerGuides: RulerGuide[] ``` The ruler guides attached to the board horizontalSizing: |- ``` horizontalSizing?: "auto" | "fix" ``` The horizontal sizing behavior of the board. It can be one of the following values: * 'fix': The containers has its own intrinsic fixed size. * 'auto': The container fits the content. verticalSizing: |- ``` verticalSizing?: "auto" | "fix" ``` The vertical sizing behavior of the board. It can be one of the following values: * 'fix': The containers has its own intrinsic fixed size. * 'auto': The container fits the content. fills: |- ``` fills: Fill[] ``` The fills applied to the shape. Overrides ShapeBase.fills children: |- ``` children: Shape[] ``` The children shapes contained within the board. When writing into this property, you can only reorder the shapes, not changing the structure. If the new shapes don't match the current shapes it will give a validation error. Example ``` board.children = board.children.reverse(); ``` id: |- ``` readonly id: string ``` The unique identifier of the shape. name: |- ``` name: string ``` The name of the shape. parent: |- ``` readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. For the root shape the parent is null parentIndex: |- ``` readonly parentIndex: number ``` Returns the index of the current shape in the parent x: |- ``` x: number ``` The x-coordinate of the shape's position. y: |- ``` y: number ``` The y-coordinate of the shape's position. width: |- ``` readonly width: number ``` The width of the shape. height: |- ``` readonly height: number ``` The height of the shape. bounds: |- ``` readonly bounds: Bounds ``` Returns Returns the bounding box surrounding the current shape center: |- ``` readonly center: Point ``` Returns Returns the geometric center of the shape blocked: |- ``` blocked: boolean ``` Indicates whether the shape is blocked. hidden: |- ``` hidden: boolean ``` Indicates whether the shape is hidden. visible: |- ``` visible: boolean ``` Indicates whether the shape is visible. proportionLock: |- ``` proportionLock: boolean ``` Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. borderRadius: |- ``` borderRadius: number ``` The border radius of the shape. borderRadiusTopLeft: |- ``` borderRadiusTopLeft: number ``` The border radius of the top-left corner of the shape. borderRadiusTopRight: |- ``` borderRadiusTopRight: number ``` The border radius of the top-right corner of the shape. borderRadiusBottomRight: |- ``` borderRadiusBottomRight: number ``` The border radius of the bottom-right corner of the shape. borderRadiusBottomLeft: |- ``` borderRadiusBottomLeft: number ``` The border radius of the bottom-left corner of the shape. opacity: |- ``` opacity: number ``` The opacity of the shape. blendMode: |- ``` blendMode: | "difference" | "normal" | "darken" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" ``` The blend mode applied to the shape. shadows: |- ``` shadows: Shadow[] ``` The shadows applied to the shape. blur: |- ``` blur?: Blur ``` The blur effect applied to the shape. exports: |- ``` exports: Export[] ``` The export settings of the shape. boardX: |- ``` boardX: number ``` The x-coordinate of the shape relative to its board. boardY: |- ``` boardY: number ``` The y-coordinate of the shape relative to its board. parentX: |- ``` parentX: number ``` The x-coordinate of the shape relative to its parent. parentY: |- ``` parentY: number ``` The y-coordinate of the shape relative to its parent. flipX: |- ``` flipX: boolean ``` Indicates whether the shape is flipped horizontally. flipY: |- ``` flipY: boolean ``` Indicates whether the shape is flipped vertically. rotation: |- ``` rotation: number ``` Returns Returns the rotation in degrees of the shape with respect to it's center. strokes: |- ``` strokes: Stroke[] ``` The strokes applied to the shape. layoutChild: |- ``` readonly layoutChild?: LayoutChildProperties ``` Layout properties for children of the shape. layoutCell: |- ``` readonly layoutCell?: LayoutCellProperties ``` Layout properties for cells in a grid layout. tokens: |- ``` readonly tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[] ``` The interactions for the current shape. Methods: appendChild: |- ``` appendChild(child: Shape): void ``` Appends a child shape to the board. Parameters * child: Shape The child shape to append. Returns void Example ``` board.appendChild(childShape); ``` insertChild: |- ``` insertChild(index: number, child: Shape): void ``` Inserts a child shape at the specified index within the board. Parameters * index: number The index at which to insert the child shape. * child: Shape The child shape to insert. 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). Returns FlexLayout 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"; ``` 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. Returns GridLayout 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 ``` addRulerGuide: |- ``` addRulerGuide(orientation: RulerGuideOrientation, value: number): RulerGuide ``` Creates a new ruler guide. Parameters * orientation: RulerGuideOrientation * value: number Returns RulerGuide removeRulerGuide: |- ``` removeRulerGuide(guide: RulerGuide): void ``` Removes the `guide` from the current page. Parameters * guide: RulerGuide Returns void isVariantContainer: |- ``` isVariantContainer(): boolean ``` Returns boolean Returns true when the current board is a VariantContainer getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] Returns an array of strings representing all the keys in the namespace. Example ``` const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); ``` setParentIndex: |- ``` 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. Parameters * index: number the new index for the shape to be in Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` Returns boolean Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` componentRefShape(): Shape | null ``` Returns Shape | null Returns the equivalent shape in the component main instance. If the current shape is inside a main instance will return `null`; componentRoot: |- ``` componentRoot(): Shape | null ``` 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. componentHead: |- ``` componentHead(): Shape | null ``` 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. component: |- ``` component(): LibraryComponent | null ``` Returns LibraryComponent | 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" Returns void swapComponent: |- ``` swapComponent(component: LibraryComponent): void ``` TODO Parameters * component: LibraryComponent Returns void switchVariant: |- ``` switchVariant(pos: number, value: string): void ``` Switch a VariantComponent copy to the nearest one that has the specified property value Parameters * pos: number The position of the poroperty to update * value: string The new value of the property Returns void combineAsVariants: |- ``` combineAsVariants(ids: string[]): VariantContainer ``` 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[] A list of ids of the main instances of the components to combine with this one. Returns VariantContainer The variant container created isVariantHead: |- ``` isVariantHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure, and that component is a VariantComponent resize: |- ``` resize(width: number, height: number): void ``` Resizes the shape to the specified width and height. Parameters * width: number The new width of the shape. * height: number The new height of the shape. Returns void Example ``` shape.resize(200, 100); ``` rotate: |- ``` rotate(angle: number, center?: { x: number; y: number } | null): void ``` Rotates the shape in relation with the given center. Parameters * angle: number Angle in degrees to rotate. * center: { x: number; y: number } | null Center of the transform rotation. If not send will use the geometri center of the shapes. Returns void Example ``` shape.rotate(45); ``` bringToFront: |- ``` bringToFront(): void ``` Moves the current shape to the front of its siblings Returns void bringForward: |- ``` bringForward(): void ``` Moves the current shape one position forward in its list of siblings Returns void sendToBack: |- ``` sendToBack(): void ``` Moves the current shape to the back of its siblings Returns void sendBackward: |- ``` sendBackward(): void ``` Moves the current shape one position backwards in its list of siblings Returns void export: |- ``` export(config: Export): Promise> ``` Generates an export from the current shape. Parameters * config: Export Returns Promise> Example ``` shape.export({ type: 'png', scale: 2 }); ``` addInteraction: |- ``` addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` Adds a new interaction to the shape. Parameters * trigger: Trigger defines the conditions under which the action will be triggered * action: Action defines what will be executed when the trigger happens * delay: number for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. Returns Interaction Example ``` shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); ``` removeInteraction: |- ``` removeInteraction(interaction: Interaction): void ``` Removes the interaction from the shape. Parameters * interaction: Interaction is the interaction to remove from the shape Returns void Example ``` shape.removeInteraction(interaction); ``` applyToken: |- ``` applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` Applies one design token to one or more properties of the shape. Parameters * token: Token is the Token to apply * properties: TokenProperty[] | undefined 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 ``` Creates a clone of the shape. Returns Shape Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` Removes the shape from its parent. Returns void VariantContainer: overview: |- Interface VariantContainer ========================== Represents a VariantContainer in Penpot 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: 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" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "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?: LayoutCellProperties; setParentIndex(index: number): void; tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[]): VariantContainer; 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 Summary) * Board + VariantContainer Referenced by: Board, Boolean, Context, ContextTypesUtils, Ellipse, Group, Image, Path, Penpot, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer members: Properties: type: |- ``` readonly type: "board" ``` The type of the shape, which is always 'board' for boards. clipContent: |- ``` clipContent: boolean ``` When true the board will clip the children inside showInViewMode: |- ``` showInViewMode: boolean ``` WHen true the board will be displayed in the view mode grid: |- ``` readonly grid?: GridLayout ``` The grid layout configuration of the board, if applicable. flex: |- ``` readonly flex?: FlexLayout ``` The flex layout configuration of the board, if applicable. guides: |- ``` guides: Guide[] ``` The guides associated with the board. rulerGuides: |- ``` readonly rulerGuides: RulerGuide[] ``` The ruler guides attached to the board horizontalSizing: |- ``` horizontalSizing?: "auto" | "fix" ``` The horizontal sizing behavior of the board. It can be one of the following values: * 'fix': The containers has its own intrinsic fixed size. * 'auto': The container fits the content. verticalSizing: |- ``` verticalSizing?: "auto" | "fix" ``` The vertical sizing behavior of the board. It can be one of the following values: * 'fix': The containers has its own intrinsic fixed size. * 'auto': The container fits the content. fills: |- ``` fills: Fill[] ``` The fills applied to the shape. children: |- ``` children: Shape[] ``` The children shapes contained within the board. When writing into this property, you can only reorder the shapes, not changing the structure. If the new shapes don't match the current shapes it will give a validation error. Example ``` board.children = board.children.reverse(); ``` variants: |- ``` readonly variants: Variants | null ``` Access to the Variant interface, for attributes and actions over the full Variant (not only this VariantContainer) id: |- ``` readonly id: string ``` The unique identifier of the shape. name: |- ``` name: string ``` The name of the shape. parent: |- ``` readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. For the root shape the parent is null parentIndex: |- ``` readonly parentIndex: number ``` Returns the index of the current shape in the parent x: |- ``` x: number ``` The x-coordinate of the shape's position. y: |- ``` y: number ``` The y-coordinate of the shape's position. width: |- ``` readonly width: number ``` The width of the shape. height: |- ``` readonly height: number ``` The height of the shape. bounds: |- ``` readonly bounds: Bounds ``` Returns Returns the bounding box surrounding the current shape center: |- ``` readonly center: Point ``` Returns Returns the geometric center of the shape blocked: |- ``` blocked: boolean ``` Indicates whether the shape is blocked. hidden: |- ``` hidden: boolean ``` Indicates whether the shape is hidden. visible: |- ``` visible: boolean ``` Indicates whether the shape is visible. proportionLock: |- ``` proportionLock: boolean ``` Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. borderRadius: |- ``` borderRadius: number ``` The border radius of the shape. borderRadiusTopLeft: |- ``` borderRadiusTopLeft: number ``` The border radius of the top-left corner of the shape. borderRadiusTopRight: |- ``` borderRadiusTopRight: number ``` The border radius of the top-right corner of the shape. borderRadiusBottomRight: |- ``` borderRadiusBottomRight: number ``` The border radius of the bottom-right corner of the shape. borderRadiusBottomLeft: |- ``` borderRadiusBottomLeft: number ``` The border radius of the bottom-left corner of the shape. opacity: |- ``` opacity: number ``` The opacity of the shape. blendMode: |- ``` blendMode: | "difference" | "normal" | "darken" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" ``` The blend mode applied to the shape. shadows: |- ``` shadows: Shadow[] ``` The shadows applied to the shape. blur: |- ``` blur?: Blur ``` The blur effect applied to the shape. exports: |- ``` exports: Export[] ``` The export settings of the shape. boardX: |- ``` boardX: number ``` The x-coordinate of the shape relative to its board. boardY: |- ``` boardY: number ``` The y-coordinate of the shape relative to its board. parentX: |- ``` parentX: number ``` The x-coordinate of the shape relative to its parent. parentY: |- ``` parentY: number ``` The y-coordinate of the shape relative to its parent. flipX: |- ``` flipX: boolean ``` Indicates whether the shape is flipped horizontally. flipY: |- ``` flipY: boolean ``` Indicates whether the shape is flipped vertically. rotation: |- ``` rotation: number ``` Returns Returns the rotation in degrees of the shape with respect to it's center. strokes: |- ``` strokes: Stroke[] ``` The strokes applied to the shape. layoutChild: |- ``` readonly layoutChild?: LayoutChildProperties ``` Layout properties for children of the shape. layoutCell: |- ``` readonly layoutCell?: LayoutCellProperties ``` Layout properties for cells in a grid layout. tokens: |- ``` readonly tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[] ``` The interactions for the current shape. Methods: appendChild: |- ``` appendChild(child: Shape): void ``` Appends a child shape to the board. Parameters * child: Shape The child shape to append. Returns void Example ``` board.appendChild(childShape); ``` insertChild: |- ``` insertChild(index: number, child: Shape): void ``` Inserts a child shape at the specified index within the board. Parameters * index: number The index at which to insert the child shape. * child: Shape The child shape to insert. 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). Returns FlexLayout 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"; ``` 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. Returns GridLayout 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 ``` addRulerGuide: |- ``` addRulerGuide(orientation: RulerGuideOrientation, value: number): RulerGuide ``` Creates a new ruler guide. Parameters * orientation: RulerGuideOrientation * value: number Returns RulerGuide removeRulerGuide: |- ``` removeRulerGuide(guide: RulerGuide): void ``` Removes the `guide` from the current page. Parameters * guide: RulerGuide Returns void isVariantContainer: |- ``` isVariantContainer(): boolean ``` Returns boolean Returns true when the current board is a VariantContainer getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] Returns an array of strings representing all the keys in the namespace. Example ``` const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); ``` setParentIndex: |- ``` 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. Parameters * index: number the new index for the shape to be in Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` Returns boolean Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` componentRefShape(): Shape | null ``` Returns Shape | null Returns the equivalent shape in the component main instance. If the current shape is inside a main instance will return `null`; componentRoot: |- ``` componentRoot(): Shape | null ``` 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. componentHead: |- ``` componentHead(): Shape | null ``` 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. component: |- ``` component(): LibraryComponent | null ``` Returns LibraryComponent | 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" Returns void swapComponent: |- ``` swapComponent(component: LibraryComponent): void ``` TODO Parameters * component: LibraryComponent Returns void switchVariant: |- ``` switchVariant(pos: number, value: string): void ``` Switch a VariantComponent copy to the nearest one that has the specified property value Parameters * pos: number The position of the poroperty to update * value: string The new value of the property Returns void combineAsVariants: |- ``` combineAsVariants(ids: string[]): VariantContainer ``` 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[] A list of ids of the main instances of the components to combine with this one. Returns VariantContainer The variant container created isVariantHead: |- ``` isVariantHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure, and that component is a VariantComponent resize: |- ``` resize(width: number, height: number): void ``` Resizes the shape to the specified width and height. Parameters * width: number The new width of the shape. * height: number The new height of the shape. Returns void Example ``` shape.resize(200, 100); ``` rotate: |- ``` rotate(angle: number, center?: { x: number; y: number } | null): void ``` Rotates the shape in relation with the given center. Parameters * angle: number Angle in degrees to rotate. * center: { x: number; y: number } | null Center of the transform rotation. If not send will use the geometri center of the shapes. Returns void Example ``` shape.rotate(45); ``` bringToFront: |- ``` bringToFront(): void ``` Moves the current shape to the front of its siblings Returns void bringForward: |- ``` bringForward(): void ``` Moves the current shape one position forward in its list of siblings Returns void sendToBack: |- ``` sendToBack(): void ``` Moves the current shape to the back of its siblings Returns void sendBackward: |- ``` sendBackward(): void ``` Moves the current shape one position backwards in its list of siblings Returns void export: |- ``` export(config: Export): Promise> ``` Generates an export from the current shape. Parameters * config: Export Returns Promise> Example ``` shape.export({ type: 'png', scale: 2 }); ``` addInteraction: |- ``` addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` Adds a new interaction to the shape. Parameters * trigger: Trigger defines the conditions under which the action will be triggered * action: Action defines what will be executed when the trigger happens * delay: number for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. Returns Interaction Example ``` shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); ``` removeInteraction: |- ``` removeInteraction(interaction: Interaction): void ``` Removes the interaction from the shape. Parameters * interaction: Interaction is the interaction to remove from the shape Returns void Example ``` shape.removeInteraction(interaction); ``` applyToken: |- ``` applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` Applies one design token to one or more properties of the shape. Parameters * token: Token is the Token to apply * properties: TokenProperty[] | undefined 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 ``` Creates a clone of the shape. Returns Shape Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` Removes the shape from its parent. Returns void Boolean: overview: |- Interface Boolean ================= Represents a boolean operation shape in Penpot. 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: 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" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "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?: LayoutCellProperties; setParentIndex(index: number): void; tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[]): VariantContainer; 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 Summary) * ShapeBase + Boolean Referenced by: Context, ContextTypesUtils, Penpot, Shape members: Properties: type: |- ``` readonly type: "boolean" ``` The type of the shape, which is always 'bool' for boolean operation shapes. content: |- ``` content: string ``` The content of the boolean shape, defined as the path string. Deprecated Use either `d` or `commands`. d: |- ``` d: string ``` The content of the boolean shape, defined as the path string. commands: |- ``` commands: PathCommand[] ``` The content of the boolean shape, defined as an array of path commands. fills: |- ``` fills: Fill[] ``` The fills applied to the shape. Overrides ShapeBase.fills children: |- ``` readonly children: Shape[] ``` The children shapes contained within the boolean shape. id: |- ``` readonly id: string ``` The unique identifier of the shape. name: |- ``` name: string ``` The name of the shape. parent: |- ``` readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. For the root shape the parent is null parentIndex: |- ``` readonly parentIndex: number ``` Returns the index of the current shape in the parent x: |- ``` x: number ``` The x-coordinate of the shape's position. y: |- ``` y: number ``` The y-coordinate of the shape's position. width: |- ``` readonly width: number ``` The width of the shape. height: |- ``` readonly height: number ``` The height of the shape. bounds: |- ``` readonly bounds: Bounds ``` Returns Returns the bounding box surrounding the current shape center: |- ``` readonly center: Point ``` Returns Returns the geometric center of the shape blocked: |- ``` blocked: boolean ``` Indicates whether the shape is blocked. hidden: |- ``` hidden: boolean ``` Indicates whether the shape is hidden. visible: |- ``` visible: boolean ``` Indicates whether the shape is visible. proportionLock: |- ``` proportionLock: boolean ``` Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. borderRadius: |- ``` borderRadius: number ``` The border radius of the shape. borderRadiusTopLeft: |- ``` borderRadiusTopLeft: number ``` The border radius of the top-left corner of the shape. borderRadiusTopRight: |- ``` borderRadiusTopRight: number ``` The border radius of the top-right corner of the shape. borderRadiusBottomRight: |- ``` borderRadiusBottomRight: number ``` The border radius of the bottom-right corner of the shape. borderRadiusBottomLeft: |- ``` borderRadiusBottomLeft: number ``` The border radius of the bottom-left corner of the shape. opacity: |- ``` opacity: number ``` The opacity of the shape. blendMode: |- ``` blendMode: | "difference" | "normal" | "darken" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" ``` The blend mode applied to the shape. shadows: |- ``` shadows: Shadow[] ``` The shadows applied to the shape. blur: |- ``` blur?: Blur ``` The blur effect applied to the shape. exports: |- ``` exports: Export[] ``` The export settings of the shape. boardX: |- ``` boardX: number ``` The x-coordinate of the shape relative to its board. boardY: |- ``` boardY: number ``` The y-coordinate of the shape relative to its board. parentX: |- ``` parentX: number ``` The x-coordinate of the shape relative to its parent. parentY: |- ``` parentY: number ``` The y-coordinate of the shape relative to its parent. flipX: |- ``` flipX: boolean ``` Indicates whether the shape is flipped horizontally. flipY: |- ``` flipY: boolean ``` Indicates whether the shape is flipped vertically. rotation: |- ``` rotation: number ``` Returns Returns the rotation in degrees of the shape with respect to it's center. strokes: |- ``` strokes: Stroke[] ``` The strokes applied to the shape. layoutChild: |- ``` readonly layoutChild?: LayoutChildProperties ``` Layout properties for children of the shape. layoutCell: |- ``` readonly layoutCell?: LayoutCellProperties ``` Layout properties for cells in a grid layout. tokens: |- ``` readonly tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[] ``` The interactions for the current shape. Methods: toD: |- ``` toD(): string ``` Converts the boolean shape to its path data representation. Returns string Returns the path data (d attribute) as a string. Deprecated Use the `d` attribute appendChild: |- ``` appendChild(child: Shape): void ``` Appends a child shape to the boolean shape. Parameters * child: Shape The child shape to append. Returns void Example ``` boolShape.appendChild(childShape); ``` insertChild: |- ``` insertChild(index: number, child: Shape): void ``` Inserts a child shape at the specified index within the boolean shape. Parameters * index: number The index at which to insert the child shape. * child: Shape The child shape to insert. Returns void Example ``` boolShape.insertChild(0, childShape); ``` getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] Returns an array of strings representing all the keys in the namespace. Example ``` const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); ``` setParentIndex: |- ``` 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. Parameters * index: number the new index for the shape to be in Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` Returns boolean Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` componentRefShape(): Shape | null ``` Returns Shape | null Returns the equivalent shape in the component main instance. If the current shape is inside a main instance will return `null`; componentRoot: |- ``` componentRoot(): Shape | null ``` 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. componentHead: |- ``` componentHead(): Shape | null ``` 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. component: |- ``` component(): LibraryComponent | null ``` Returns LibraryComponent | 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" Returns void swapComponent: |- ``` swapComponent(component: LibraryComponent): void ``` TODO Parameters * component: LibraryComponent Returns void switchVariant: |- ``` switchVariant(pos: number, value: string): void ``` Switch a VariantComponent copy to the nearest one that has the specified property value Parameters * pos: number The position of the poroperty to update * value: string The new value of the property Returns void combineAsVariants: |- ``` combineAsVariants(ids: string[]): VariantContainer ``` 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[] A list of ids of the main instances of the components to combine with this one. Returns VariantContainer The variant container created isVariantHead: |- ``` isVariantHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure, and that component is a VariantComponent resize: |- ``` resize(width: number, height: number): void ``` Resizes the shape to the specified width and height. Parameters * width: number The new width of the shape. * height: number The new height of the shape. Returns void Example ``` shape.resize(200, 100); ``` rotate: |- ``` rotate(angle: number, center?: { x: number; y: number } | null): void ``` Rotates the shape in relation with the given center. Parameters * angle: number Angle in degrees to rotate. * center: { x: number; y: number } | null Center of the transform rotation. If not send will use the geometri center of the shapes. Returns void Example ``` shape.rotate(45); ``` bringToFront: |- ``` bringToFront(): void ``` Moves the current shape to the front of its siblings Returns void bringForward: |- ``` bringForward(): void ``` Moves the current shape one position forward in its list of siblings Returns void sendToBack: |- ``` sendToBack(): void ``` Moves the current shape to the back of its siblings Returns void sendBackward: |- ``` sendBackward(): void ``` Moves the current shape one position backwards in its list of siblings Returns void export: |- ``` export(config: Export): Promise> ``` Generates an export from the current shape. Parameters * config: Export Returns Promise> Example ``` shape.export({ type: 'png', scale: 2 }); ``` addInteraction: |- ``` addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` Adds a new interaction to the shape. Parameters * trigger: Trigger defines the conditions under which the action will be triggered * action: Action defines what will be executed when the trigger happens * delay: number for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. Returns Interaction Example ``` shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); ``` removeInteraction: |- ``` removeInteraction(interaction: Interaction): void ``` Removes the interaction from the shape. Parameters * interaction: Interaction is the interaction to remove from the shape Returns void Example ``` shape.removeInteraction(interaction); ``` applyToken: |- ``` applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` Applies one design token to one or more properties of the shape. Parameters * token: Token is the Token to apply * properties: TokenProperty[] | undefined 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 ``` Creates a clone of the shape. Returns Shape Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` Removes the shape from its parent. Returns void CloseOverlay: overview: |- Interface CloseOverlay ====================== This action will close a targeted board that is opened as an overlay. ``` interface CloseOverlay { type: "close-overlay"; destination?: Board; animation: Animation; } ``` Referenced by: Action members: Properties: type: |- ``` readonly type: "close-overlay" ``` The action type destination: |- ``` readonly destination?: Board ``` The overlay to be closed with this action. animation: |- ``` readonly animation: Animation ``` Animation displayed with this interaction. Color: overview: |- Interface Color =============== Represents color properties in Penpot. 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; } ``` Referenced by: Context, Penpot, Shadow members: Properties: id: |- ``` id?: string ``` The optional reference ID for an external color definition. fileId: |- ``` fileId?: string ``` The optional reference to an external file for the color definition. name: |- ``` name?: string ``` The optional name of the color. path: |- ``` path?: string ``` The optional path or category to which this color belongs. color: |- ``` color?: string ``` The optional solid color, represented as a string (e.g., '#FF5733'). opacity: |- ``` opacity?: number ``` The optional opacity level of the color, ranging from 0 (fully transparent) to 1 (fully opaque). Defaults to 1 if omitted. refId: |- ``` refId?: string ``` The optional reference ID for an external color definition. Deprecated Use `id` instead refFile: |- ``` refFile?: string ``` The optional reference to an external file for the color definition. Deprecated Use `fileId` gradient: |- ``` gradient?: Gradient ``` The optional gradient fill defined by a Gradient object. image: |- ``` image?: ImageData ``` The optional image fill defined by an ImageData object. ColorShapeInfo: overview: |- Interface ColorShapeInfo ======================== Additional color information for the methods to extract colors from a list of shapes. ``` interface ColorShapeInfo { shapesInfo: ColorShapeInfoEntry[]; } ``` Referenced by: Context, Penpot members: Properties: shapesInfo: |- ``` readonly shapesInfo: ColorShapeInfoEntry[] ``` List of shapes with additional information ColorShapeInfoEntry: overview: |- Interface ColorShapeInfoEntry ============================= Entry for the color shape additional information. ``` interface ColorShapeInfoEntry { property: string; index?: number; shapeId: string; } ``` Referenced by: ColorShapeInfo members: Properties: property: |- ``` readonly property: string ``` Property that has the color (example: fill, stroke...) index: |- ``` readonly index?: number ``` For properties that are indexes (such as fill) represent the index of the color inside that property. shapeId: |- ``` readonly shapeId: string ``` Identifier of the shape that contains the color Comment: overview: |- Interface Comment ================= Comments allow the team to have one priceless conversation getting and providing feedback right over the designs and prototypes. ``` interface Comment { user: User; date: Date; content: string; remove(): void; } ``` Referenced by: CommentThread members: Properties: user: |- ``` readonly user: User ``` The `user` that has created the comment. date: |- ``` readonly date: Date ``` The `date` the comment has been created. content: |- ``` content: string ``` The `content` for the commentary. The owner can modify the comment. Methods: remove: |- ``` remove(): void ``` Remove the current comment from its comment thread. Only the owner can remove their comments. Requires the `comment:write` permission. Returns void CommentThread: overview: |- Interface CommentThread ======================= Represents a list of comments one after the other. Usually these threads 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; } ``` Referenced by: Page members: Properties: seqNumber: |- ``` readonly seqNumber: number ``` This is the number that is displayed on the workspace. Is an increasing sequence for each comment. board: |- ``` readonly board?: Board ``` If the thread is attached to a `board` this will have that board reference. owner: |- ``` readonly owner?: User ``` Owner of the comment thread position: |- ``` position: Point ``` The `position` in absolute coordinates in the canvas. resolved: |- ``` resolved: boolean ``` Whether the thread has been marked as `resolved` or not. Methods: findComments: |- ``` findComments(): Promise ``` List of `comments` ordered by creation date. Requires the `comment:read` or `comment:write` permission. Returns Promise reply: |- ``` 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. Parameters * 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. Returns void CommonLayout: overview: |- Interface CommonLayout ====================== CommonLayout represents a common layout interface in the Penpot application. 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?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" | "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" | "fix"; verticalSizing: "fill" | "auto" | "fix"; remove(): void; } ``` Hierarchy (View Summary) * CommonLayout + FlexLayout + GridLayout members: Properties: alignItems: |- ``` alignItems?: "center" | "start" | "end" | "stretch" ``` The `alignItems` property specifies the default alignment for items inside the container. It can be one of the following values: * 'start': Items are aligned at the start. * 'end': Items are aligned at the end. * 'center': Items are centered. * 'stretch': Items are stretched to fill the container. alignContent: |- ``` alignContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly" ``` The `alignContent` property specifies how the content is aligned within the container when there is extra space. It can be one of the following values: * 'start': Content is aligned at the start. * 'end': Content is aligned at the end. * 'center': Content is centered. * 'space-between': Content is distributed with space between. * 'space-around': Content is distributed with space around. * 'space-evenly': Content is distributed with even space around. * 'stretch': Content is stretched to fill the container. justifyItems: |- ``` justifyItems?: "center" | "start" | "end" | "stretch" ``` The `justifyItems` property specifies the default justification for items inside the container. It can be one of the following values: * 'start': Items are justified at the start. * 'end': Items are justified at the end. * 'center': Items are centered. * 'stretch': Items are stretched to fill the container. justifyContent: |- ``` justifyContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly" ``` The `justifyContent` property specifies how the content is justified within the container when there is extra space. It can be one of the following values: * 'start': Content is justified at the start. * 'center': Content is centered. * 'end': Content is justified at the end. * 'space-between': Content is distributed with space between. * 'space-around': Content is distributed with space around. * 'space-evenly': Content is distributed with even space around. * 'stretch': Content is stretched to fill the container. rowGap: |- ``` rowGap: number ``` The `rowGap` property specifies the gap between rows in the layout. columnGap: |- ``` columnGap: number ``` The `columnGap` property specifies the gap between columns in the layout. verticalPadding: |- ``` verticalPadding: number ``` The `verticalPadding` property specifies the vertical padding inside the container. horizontalPadding: |- ``` horizontalPadding: number ``` The `horizontalPadding` property specifies the horizontal padding inside the container. topPadding: |- ``` topPadding: number ``` The `topPadding` property specifies the padding at the top of the container. rightPadding: |- ``` rightPadding: number ``` The `rightPadding` property specifies the padding at the right of the container. bottomPadding: |- ``` bottomPadding: number ``` The `bottomPadding` property specifies the padding at the bottom of the container. leftPadding: |- ``` leftPadding: number ``` The `leftPadding` property specifies the padding at the left of the container. horizontalSizing: |- ``` horizontalSizing: "fill" | "auto" | "fix" ``` The `horizontalSizing` property specifies the horizontal sizing behavior of the container. It can be one of the following values: * 'fix': The containers has its own intrinsic fixed size. * 'fill': The container fills the available space. Only can be set if it's inside another layout. * 'auto': The container fits the content. verticalSizing: |- ``` verticalSizing: "fill" | "auto" | "fix" ``` The `verticalSizing` property specifies the vertical sizing behavior of the container. It can be one of the following values: * 'fix': The containers has its own intrinsic fixed size. * 'fill': The container fills the available space. Only can be set if it's inside another layout. * 'auto': The container fits the content. Methods: remove: |- ``` remove(): void ``` The `remove` method removes the layout. Returns void Context: overview: |- Interface Context ================= Represents the context of Penpot, providing access to various Penpot functionalities and data. ``` interface Context { version: string; 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: string | 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[]; createVariantFromComponents(shapes: Board[]): VariantContainer; } ``` members: Properties: version: |- ``` readonly version: string ``` Returns the current penpot version. root: |- ``` readonly root: Shape | null ``` The root shape in the current Penpot context. Requires `content:read` permission. Example ``` const rootShape = context.root;console.log(rootShape); ``` currentFile: |- ``` readonly currentFile: File | null ``` Retrieves file data from the current Penpot context. Requires `content:read` permission. Returns Returns the file data or `null` if no file is available. Example ``` const fileData = context.currentFile;console.log(fileData); ``` currentPage: |- ``` readonly currentPage: Page | null ``` The current page in the Penpot context. Requires `content:read` permission. Example ``` const currentPage = context.currentPage;console.log(currentPage); ``` viewport: |- ``` readonly viewport: Viewport ``` The viewport settings in the Penpot context. Example ``` const viewportSettings = context.viewport;console.log(viewportSettings); ``` flags: |- ``` readonly flags: Flags ``` Provides flags to customize the API behavior. history: |- ``` readonly history: HistoryContext ``` Context encapsulating the history operations Example ``` const historyContext = context.history;console.log(historyContext); ``` library: |- ``` readonly library: LibraryContext ``` The library context in the Penpot context, including both local and connected libraries. Requires `library:read` permission. Example ``` const libraryContext = context.library;console.log(libraryContext); ``` fonts: |- ``` readonly fonts: FontsContext ``` The fonts context in the Penpot context, providing methods to manage fonts. Requires `content:read` permission. Example ``` const fontsContext = context.fonts;console.log(fontsContext); ``` currentUser: |- ``` readonly currentUser: User ``` The current user in the Penpot context. Requires `user:read` permission. Example ``` const currentUser = context.currentUser;console.log(currentUser); ``` activeUsers: |- ``` readonly activeUsers: ActiveUser[] ``` An array of active users in the Penpot context. Requires `user:read` permission. Example ``` const activeUsers = context.activeUsers;console.log(activeUsers); ``` theme: |- ``` readonly theme: Theme ``` The current theme (light or dark) in Penpot. Example ``` const currentTheme = context.theme;console.log(currentTheme); ``` localStorage: |- ``` readonly localStorage: LocalStorage ``` Access to the localStorage proxy selection: |- ``` selection: Shape[] ``` The currently selected shapes in Penpot. Requires `content:read` permission. Example ``` const selectedShapes = context.selection;console.log(selectedShapes); ``` Methods: shapesColors: |- ``` shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[] ``` Retrieves colors applied to the given shapes in Penpot. Requires `content:read` permission. Parameters * shapes: Shape[] Returns (Color & ColorShapeInfo)[] Returns an array of colors and their shape information. Example ``` const colors = context.shapesColors(shapes);console.log(colors); ``` replaceColor: |- ``` 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. Parameters * shapes: Shape[] * oldColor: Color * newColor: Color Returns void Example ``` context.replaceColor(shapes, oldColor, newColor); ``` uploadMediaUrl: |- ``` uploadMediaUrl(name: string, url: string): Promise ``` Uploads media to Penpot and retrieves its image data. Requires `content:write` permission. Parameters * name: string The name of the media. * url: string The URL of the media to be uploaded. Returns Promise 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: string, data: Uint8Array, mimeType: string, ): Promise ``` Uploads media to penpot and retrieves the image data. Requires `content:write` permission. Parameters * name: string The name of the media. * data: Uint8Array The image content data * mimeType: string Returns Promise 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: Shape[]): Group | null ``` Groups the specified shapes. Requires `content:write` permission. Parameters * shapes: Shape[] An array of shapes to group. Returns Group | null 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: Group, ...other: Group[]): void ``` Ungroups the specified group. Requires `content:write` permission. Parameters * group: Group The group to ungroup. * ...other: Group[] Additional groups to ungroup. 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. 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", },]; ``` 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. 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); ``` createEllipse: |- ``` createEllipse(): Ellipse ``` Use this method to create the shape of an ellipse. Requires `content:write` permission. 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", },]; ``` createPath: |- ``` createPath(): Path ``` Use this method to create a path. Requires `content:write` permission. Returns Path Example ``` const path = penpot.createPath();path.name = "My path";// for solid colorpath.fills = [{ fillColor: "#7EFFF5" }]; ``` createBoolean: |- ``` createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null ``` Creates a Boolean shape based on the specified boolean operation and shapes. Requires `content:write` permission. Parameters * boolType: BooleanType The type of boolean operation ('union', 'difference', 'exclude', 'intersection'). * shapes: Shape[] An array of shapes to perform the boolean operation on. Returns Boolean | null Returns the newly created Boolean shape resulting from the boolean operation. Example ``` const booleanShape = context.createBoolean('union', [shape1, shape2]); ``` createShapeFromSvg: |- ``` createShapeFromSvg(svgString: string): Group | null ``` Creates a Group from an SVG string. Requires `content:write` permission. Parameters * svgString: string The SVG string representing the shapes to be converted into a group. Returns Group | null Returns the newly created Group containing the shapes from the SVG. Example ``` const svgGroup = context.createShapeFromSvg('...'); ``` createShapeFromSvgWithImages: |- ``` 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. Parameters * svgString: string The SVG string representing the shapes to be converted into a group. Returns Promise Returns a promise with the newly created Group containing the shapes from the SVG. Example ``` const svgGroup = await context.createShapeFromSvgWithImages('...'); ``` createText: |- ``` createText(text: string): Text | null ``` Creates a Text shape with the specified text content. Requires `content:write` permission. Parameters * text: string The text content for the Text shape. Returns Text | null 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: Shape[], options?: { type?: "html" | "svg" }): string ``` Generates markup for the given shapes. Requires `content:read` permission Parameters * shapes: Shape[] * options: { type?: "html" | "svg" } Returns string Example ``` const markup = context.generateMarkup(shapes, { type: 'html' });console.log(markup); ``` generateStyle: |- ``` generateStyle( shapes: Shape[], options?: { type?: "css"; withPrelude?: boolean; includeChildren?: boolean; }, ): string ``` Generates styles for the given shapes. Requires `content:read` permission Parameters * shapes: Shape[] * options: { type?: "css"; withPrelude?: boolean; includeChildren?: boolean } Returns string Example ``` const styles = context.generateStyle(shapes, { type: 'css' });console.log(styles); ``` generateFontFaces: |- ``` generateFontFaces(shapes: Shape[]): Promise ``` Generates the fontfaces styles necessaries to render the shapes. Requires `content:read` permission Parameters * shapes: Shape[] Returns Promise Example ``` const fontfaces = context.generateFontFaces(penpot.selection);console.log(fontfaces); ``` addListener: |- ``` addListener( type: T, callback: (event: EventsMap[T]) => void, props?: { [key: string]: unknown }, ): symbol ``` Adds the current callback as an event listener Type Parameters * T extends keyof EventsMap Parameters * type: T * callback: (event: EventsMap[T]) => void * props: { [key: string]: unknown } Returns symbol Example ``` const listenerId = context.addListener('selectionchange', (event) => { console.log(event);}); ``` removeListener: |- ``` removeListener(listenerId: symbol): void ``` Removes the listenerId from the list of listeners Parameters * listenerId: symbol Returns void Example ``` context.removeListener(listenerId); ``` openViewer: |- ``` openViewer(): void ``` Opens the viewer section. Requires `content:read` permission. Returns void createPage: |- ``` createPage(): Page ``` Creates a new page. Requires `content:write` permission. Returns Page openPage: |- ``` openPage(page: string | Page, newWindow?: boolean): void ``` Changes the current open page to given page. Requires `content:read` permission. Parameters * page: string | Page the page to open (a Page object or a page UUID string) * newWindow: boolean if true opens the page in a new window, defaults to false Returns void Example ``` context.openPage(page); ``` alignHorizontal: |- ``` 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. Parameters * shapes: Shape[] to align * direction: "center" | "left" | "right" where the shapes will be aligned Returns void alignVertical: |- ``` 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. Parameters * shapes: Shape[] to align * direction: "center" | "top" | "bottom" where the shapes will be aligned Returns void distributeHorizontal: |- ``` distributeHorizontal(shapes: Shape[]): void ``` Distributing objects to position them horizontally with equal distances between them. Parameters * shapes: Shape[] to distribute Returns void distributeVertical: |- ``` distributeVertical(shapes: Shape[]): void ``` Distributing objects to position them vertically with equal distances between them. Parameters * shapes: Shape[] to distribute Returns void flatten: |- ``` flatten(shapes: Shape[]): Path[] ``` Converts the shapes into Paths. If the shapes are complex will put together all its paths into one. Parameters * shapes: Shape[] to flatten Returns Path[] createVariantFromComponents: |- ``` createVariantFromComponents(shapes: Board[]): VariantContainer ``` Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu on the Penpot interface. All the shapes passed as arguments should be main instances. Parameters * shapes: Board[] A list of main instances of the components to combine. Returns VariantContainer The variant container created ContextGeometryUtils: overview: |- Interface ContextGeometryUtils ============================== Utility methods for geometric calculations in Penpot. Example ``` const centerPoint = geometryUtils.center(shapes);console.log(centerPoint); ``` ``` interface ContextGeometryUtils { center(shapes: Shape[]): { x: number; y: number } | null; } ``` Referenced by: ContextUtils members: Methods: center: |- ``` 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. Parameters * shapes: Shape[] The array of shapes to calculate the center for. Returns { x: number; y: number } | null 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 =========================== Utility methods for determining the types of Penpot shapes. Example ``` const isBoard = typesUtils.isBoard(shape);console.log(isBoard); ``` ``` 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; } ``` Referenced by: ContextUtils members: Methods: isBoard: |- ``` isBoard(shape: Shape): shape is Board ``` Checks if the given shape is a board. Parameters * shape: Shape The shape to check. Returns shape is Board Returns true if the shape is a board, otherwise false. isGroup: |- ``` isGroup(shape: Shape): shape is Group ``` Checks if the given shape is a group. Parameters * shape: Shape The shape to check. Returns shape is Group Returns true if the shape is a Group, otherwise false. isMask: |- ``` isMask(shape: Shape): shape is Group ``` Checks if the given shape is a mask. Parameters * shape: Shape The shape to check. Returns shape is Group Returns true if the shape is a Group (acting as a mask), otherwise false. isBool: |- ``` isBool(shape: Shape): shape is Boolean ``` Checks if the given shape is a boolean operation. Parameters * shape: Shape The shape to check. Returns shape is Boolean Returns true if the shape is a Bool, otherwise false. isRectangle: |- ``` isRectangle(shape: Shape): shape is Rectangle ``` Checks if the given shape is a rectangle. Parameters * shape: Shape The shape to check. Returns shape is Rectangle Returns true if the shape is a Rectangle, otherwise false. isPath: |- ``` isPath(shape: Shape): shape is Path ``` Checks if the given shape is a path. Parameters * shape: Shape The shape to check. Returns shape is Path Returns true if the shape is a Path, otherwise false. isText: |- ``` isText(shape: Shape): shape is Text ``` Checks if the given shape is a text element. Parameters * shape: Shape The shape to check. Returns shape is Text Returns true if the shape is a Text, otherwise false. isEllipse: |- ``` isEllipse(shape: Shape): shape is Ellipse ``` Checks if the given shape is an ellipse. Parameters * shape: Shape The shape to check. Returns shape is Ellipse Returns true if the shape is an Ellipse, otherwise false. isSVG: |- ``` isSVG(shape: Shape): shape is SvgRaw ``` Checks if the given shape is an SVG. Parameters * shape: Shape The shape to check. Returns shape is SvgRaw Returns true if the shape is a SvgRaw, otherwise false. isVariantContainer: |- ``` isVariantContainer(shape: Shape): shape is VariantContainer ``` Checks if the given shape is a variant container. Parameters * shape: Shape The shape to check. Returns shape is VariantContainer Returns true if the shape is a variant container, otherwise false. isVariantComponent: |- ``` isVariantComponent( component: LibraryComponent, ): component is LibraryVariantComponent ``` Checks if the given component is a VariantComponent. Parameters * component: LibraryComponent The component to check. Returns component is LibraryVariantComponent Returns true if the component is a VariantComponent, otherwise false. ContextUtils: overview: |- Interface ContextUtils ====================== Utility methods for various operations in Penpot. ``` interface ContextUtils { geometry: ContextGeometryUtils; types: ContextTypesUtils; } ``` Referenced by: Penpot members: Properties: geometry: |- ``` readonly geometry: ContextGeometryUtils ``` Geometry utility methods for Penpot. Provides methods for geometric calculations, such as finding the center of a group of shapes. Example ``` const centerPoint = penpot.utils.geometry.center(shapes);console.log(centerPoint); ``` types: |- ``` readonly types: ContextTypesUtils ``` Type utility methods for Penpot. Provides methods for determining the types of various shapes in Penpot. Example ``` const isBoard = utils.types.isBoard(shape);console.log(isBoard); ``` Dissolve: overview: |- Interface Dissolve ================== Dissolve animation ``` interface Dissolve { type: "dissolve"; duration: number; easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"; } ``` Referenced by: Animation members: Properties: type: |- ``` readonly type: "dissolve" ``` Type of the animation duration: |- ``` readonly duration: number ``` Duration of the animation effect easing: |- ``` readonly easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" ``` Function that the dissolve effect will follow for the interpolation. Defaults to `linear`. Ellipse: overview: |- Interface Ellipse ================= Represents an ellipse shape in Penpot. 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: 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" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "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?: LayoutCellProperties; setParentIndex(index: number): void; tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[]): VariantContainer; 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 Summary) * ShapeBase + Ellipse Referenced by: Context, ContextTypesUtils, Penpot, Shape members: Properties: type: |- ``` type: "ellipse" ``` fills: |- ``` fills: Fill[] ``` The fills applied to the shape. Overrides ShapeBase.fills id: |- ``` readonly id: string ``` The unique identifier of the shape. name: |- ``` name: string ``` The name of the shape. parent: |- ``` readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. For the root shape the parent is null parentIndex: |- ``` readonly parentIndex: number ``` Returns the index of the current shape in the parent x: |- ``` x: number ``` The x-coordinate of the shape's position. y: |- ``` y: number ``` The y-coordinate of the shape's position. width: |- ``` readonly width: number ``` The width of the shape. height: |- ``` readonly height: number ``` The height of the shape. bounds: |- ``` readonly bounds: Bounds ``` Returns Returns the bounding box surrounding the current shape center: |- ``` readonly center: Point ``` Returns Returns the geometric center of the shape blocked: |- ``` blocked: boolean ``` Indicates whether the shape is blocked. hidden: |- ``` hidden: boolean ``` Indicates whether the shape is hidden. visible: |- ``` visible: boolean ``` Indicates whether the shape is visible. proportionLock: |- ``` proportionLock: boolean ``` Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. borderRadius: |- ``` borderRadius: number ``` The border radius of the shape. borderRadiusTopLeft: |- ``` borderRadiusTopLeft: number ``` The border radius of the top-left corner of the shape. borderRadiusTopRight: |- ``` borderRadiusTopRight: number ``` The border radius of the top-right corner of the shape. borderRadiusBottomRight: |- ``` borderRadiusBottomRight: number ``` The border radius of the bottom-right corner of the shape. borderRadiusBottomLeft: |- ``` borderRadiusBottomLeft: number ``` The border radius of the bottom-left corner of the shape. opacity: |- ``` opacity: number ``` The opacity of the shape. blendMode: |- ``` blendMode: | "difference" | "normal" | "darken" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" ``` The blend mode applied to the shape. shadows: |- ``` shadows: Shadow[] ``` The shadows applied to the shape. blur: |- ``` blur?: Blur ``` The blur effect applied to the shape. exports: |- ``` exports: Export[] ``` The export settings of the shape. boardX: |- ``` boardX: number ``` The x-coordinate of the shape relative to its board. boardY: |- ``` boardY: number ``` The y-coordinate of the shape relative to its board. parentX: |- ``` parentX: number ``` The x-coordinate of the shape relative to its parent. parentY: |- ``` parentY: number ``` The y-coordinate of the shape relative to its parent. flipX: |- ``` flipX: boolean ``` Indicates whether the shape is flipped horizontally. flipY: |- ``` flipY: boolean ``` Indicates whether the shape is flipped vertically. rotation: |- ``` rotation: number ``` Returns Returns the rotation in degrees of the shape with respect to it's center. strokes: |- ``` strokes: Stroke[] ``` The strokes applied to the shape. layoutChild: |- ``` readonly layoutChild?: LayoutChildProperties ``` Layout properties for children of the shape. layoutCell: |- ``` readonly layoutCell?: LayoutCellProperties ``` Layout properties for cells in a grid layout. tokens: |- ``` readonly tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[] ``` The interactions for the current shape. Methods: getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] Returns an array of strings representing all the keys in the namespace. Example ``` const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); ``` setParentIndex: |- ``` 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. Parameters * index: number the new index for the shape to be in Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` Returns boolean Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` componentRefShape(): Shape | null ``` Returns Shape | null Returns the equivalent shape in the component main instance. If the current shape is inside a main instance will return `null`; componentRoot: |- ``` componentRoot(): Shape | null ``` 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. componentHead: |- ``` componentHead(): Shape | null ``` 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. component: |- ``` component(): LibraryComponent | null ``` Returns LibraryComponent | 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" Returns void swapComponent: |- ``` swapComponent(component: LibraryComponent): void ``` TODO Parameters * component: LibraryComponent Returns void switchVariant: |- ``` switchVariant(pos: number, value: string): void ``` Switch a VariantComponent copy to the nearest one that has the specified property value Parameters * pos: number The position of the poroperty to update * value: string The new value of the property Returns void combineAsVariants: |- ``` combineAsVariants(ids: string[]): VariantContainer ``` 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[] A list of ids of the main instances of the components to combine with this one. Returns VariantContainer The variant container created isVariantHead: |- ``` isVariantHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure, and that component is a VariantComponent resize: |- ``` resize(width: number, height: number): void ``` Resizes the shape to the specified width and height. Parameters * width: number The new width of the shape. * height: number The new height of the shape. Returns void Example ``` shape.resize(200, 100); ``` rotate: |- ``` rotate(angle: number, center?: { x: number; y: number } | null): void ``` Rotates the shape in relation with the given center. Parameters * angle: number Angle in degrees to rotate. * center: { x: number; y: number } | null Center of the transform rotation. If not send will use the geometri center of the shapes. Returns void Example ``` shape.rotate(45); ``` bringToFront: |- ``` bringToFront(): void ``` Moves the current shape to the front of its siblings Returns void bringForward: |- ``` bringForward(): void ``` Moves the current shape one position forward in its list of siblings Returns void sendToBack: |- ``` sendToBack(): void ``` Moves the current shape to the back of its siblings Returns void sendBackward: |- ``` sendBackward(): void ``` Moves the current shape one position backwards in its list of siblings Returns void export: |- ``` export(config: Export): Promise> ``` Generates an export from the current shape. Parameters * config: Export Returns Promise> Example ``` shape.export({ type: 'png', scale: 2 }); ``` addInteraction: |- ``` addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` Adds a new interaction to the shape. Parameters * trigger: Trigger defines the conditions under which the action will be triggered * action: Action defines what will be executed when the trigger happens * delay: number for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. Returns Interaction Example ``` shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); ``` removeInteraction: |- ``` removeInteraction(interaction: Interaction): void ``` Removes the interaction from the shape. Parameters * interaction: Interaction is the interaction to remove from the shape Returns void Example ``` shape.removeInteraction(interaction); ``` applyToken: |- ``` applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` Applies one design token to one or more properties of the shape. Parameters * token: Token is the Token to apply * properties: TokenProperty[] | undefined 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 ``` Creates a clone of the shape. Returns Shape Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` Removes the shape from its parent. Returns void EventsMap: overview: |- Interface EventsMap =================== Represents a mapping of events to their corresponding types in Penpot. This interface provides information about various events that can be triggered in the application. Example ``` penpot.on('pagechange', (event) => { console.log(event);}); ``` ``` interface EventsMap { pagechange: Page; filechange: File; selectionchange: string[]; themechange: Theme; finish: string; shapechange: Shape; contentsave: void; } ``` Referenced by: Context, Penpot members: Properties: pagechange: |- ``` pagechange: Page ``` The `pagechange` event is triggered when the active page in the project is changed. filechange: |- ``` filechange: File ``` The `filechange` event is triggered when there are changes in the current file. selectionchange: |- ``` selectionchange: string[] ``` The `selectionchange` event is triggered when the selection of elements changes. This event passes a list of identifiers of the selected elements. themechange: |- ``` themechange: Theme ``` The `themechange` event is triggered when the application theme is changed. finish: |- ``` finish: string ``` The `finish` event is triggered when some operation is finished. shapechange: |- ``` shapechange: Shape ``` This event will trigger whenever the shape in the props change. It's mandatory to send with the props an object like `{ shapeId: '' }` contentsave: |- ``` contentsave: void ``` The `contentsave` event will trigger when the content file changes. Export: overview: |- Interface Export ================ Represents export settings in Penpot. This interface includes properties for defining export configurations. ``` interface Export { type: "svg" | "png" | "jpeg" | "webp" | "pdf"; scale?: number; suffix?: string; skipChildren?: boolean; } ``` Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer members: Properties: type: |- ``` type: "svg" | "png" | "jpeg" | "webp" | "pdf" ``` Type of the file to export. Can be one of the following values: png, jpeg, webp, svg, pdf scale: |- ``` scale?: number ``` For bitmap formats represent the scale of the original size to resize the export suffix: |- ``` suffix?: string ``` Suffix that will be appended to the resulting exported file skipChildren: |- ``` skipChildren?: boolean ``` If true will ignore the children when exporting the shape File: overview: |- Interface File ============== File represents a file in the Penpot application. 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[]; } ``` Hierarchy (View Summary) * PluginData + File Referenced by: Context, EventsMap, Penpot members: Properties: id: |- ``` readonly id: string ``` The `id` property is a unique identifier for the file. name: |- ``` name: string ``` The `name` for the file revn: |- ``` revn: number ``` The `revn` will change for every document update pages: |- ``` pages: Page[] ``` List all the pages for the current file Methods: export: |- ``` export( exportType: "penpot" | "zip", libraryExportType?: "all" | "merge" | "detach", ): Promise> ``` Parameters * exportType: "penpot" | "zip" * libraryExportType: "all" | "merge" | "detach" Returns Promise> findVersions: |- ``` findVersions(criteria?: { createdBy: User }): Promise ``` Retrieves the versions for the file. Parameters * criteria: { createdBy: User } Returns Promise saveVersion: |- ``` saveVersion(label: string): Promise ``` Saves the current version into the versions history. Requires the `content:write` permission. Parameters * label: string Returns Promise getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] 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 ===================== Type defining the file version properties. ``` interface FileVersion { label: string; createdBy?: User; createdAt: Date; isAutosave: boolean; restore(): void; remove(): Promise; pin(): Promise; } ``` Referenced by: File, FileVersion members: Properties: label: |- ``` label: string ``` The current label to identify the version. createdBy: |- ``` readonly createdBy?: User ``` The user that created the version. If not present, the version is an autosave. createdAt: |- ``` readonly createdAt: Date ``` The date when the version was created. isAutosave: |- ``` readonly isAutosave: boolean ``` If the current version has been generated automatically. Methods: restore: |- ``` restore(): void ``` Returns void remove: |- ``` remove(): Promise ``` Remove the current version. Requires the `content:write` permission. Returns Promise pin: |- ``` pin(): Promise ``` Converts an autosave version into a permanent version. Requires the `content:write` permission. Returns Promise Fill: overview: |- Interface Fill ============== Represents fill properties in Penpot. You can add a fill to any shape except for groups. 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; } ``` Referenced by: Board, Boolean, Ellipse, Group, Image, LibraryColor, Path, Rectangle, ShapeBase, SvgRaw, Text, TextRange, VariantContainer members: Properties: fillColor: |- ``` fillColor?: string ``` The optional solid fill color, represented as a string (e.g., '#FF5733'). fillOpacity: |- ``` fillOpacity?: number ``` The optional opacity level of the solid fill color, ranging from 0 (fully transparent) to 1 (fully opaque). Defaults to 1 if omitted. fillColorGradient: |- ``` fillColorGradient?: Gradient ``` The optional gradient fill defined by a Gradient object. fillColorRefFile: |- ``` fillColorRefFile?: string ``` The optional reference to an external file for the fill color. fillColorRefId: |- ``` fillColorRefId?: string ``` The optional reference ID within the external file for the fill color. fillImage: |- ``` fillImage?: ImageData ``` The optional image fill defined by an ImageData object. Flags: overview: |- Interface Flags =============== This subcontext allows the API o change certain defaults ``` interface Flags { naturalChildOrdering: boolean; throwValidationErrors: boolean; } ``` Referenced by: Context, Penpot members: Properties: naturalChildOrdering: |- ``` naturalChildOrdering: boolean ``` If `true` the .children property will be always sorted in the z-index ordering. Also, appendChild method will be append the children in the top-most position. The insertchild method is changed acordingly to respect this ordering. Defaults to false throwValidationErrors: |- ``` throwValidationErrors: boolean ``` If `true` the validation errors will throw an exception instead of displaying an error in the debugger console. Defaults to false FlexLayout: overview: |- Interface FlexLayout ==================== Represents a flexible layout configuration in Penpot. This interface extends `CommonLayout` and includes properties for defining the direction, wrapping behavior, and child management of a flex layout. ``` interface FlexLayout { alignItems?: "center" | "start" | "end" | "stretch"; alignContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" | "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" | "fix"; verticalSizing: "fill" | "auto" | "fix"; remove(): void; dir: "row" | "row-reverse" | "column" | "column-reverse"; wrap?: "wrap" | "nowrap"; appendChild(child: Shape): void; } ``` Hierarchy (View Summary) * CommonLayout + FlexLayout Referenced by: Board, VariantContainer members: Properties: alignItems: |- ``` alignItems?: "center" | "start" | "end" | "stretch" ``` The `alignItems` property specifies the default alignment for items inside the container. It can be one of the following values: * 'start': Items are aligned at the start. * 'end': Items are aligned at the end. * 'center': Items are centered. * 'stretch': Items are stretched to fill the container. alignContent: |- ``` alignContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly" ``` The `alignContent` property specifies how the content is aligned within the container when there is extra space. It can be one of the following values: * 'start': Content is aligned at the start. * 'end': Content is aligned at the end. * 'center': Content is centered. * 'space-between': Content is distributed with space between. * 'space-around': Content is distributed with space around. * 'space-evenly': Content is distributed with even space around. * 'stretch': Content is stretched to fill the container. justifyItems: |- ``` justifyItems?: "center" | "start" | "end" | "stretch" ``` The `justifyItems` property specifies the default justification for items inside the container. It can be one of the following values: * 'start': Items are justified at the start. * 'end': Items are justified at the end. * 'center': Items are centered. * 'stretch': Items are stretched to fill the container. justifyContent: |- ``` justifyContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly" ``` The `justifyContent` property specifies how the content is justified within the container when there is extra space. It can be one of the following values: * 'start': Content is justified at the start. * 'center': Content is centered. * 'end': Content is justified at the end. * 'space-between': Content is distributed with space between. * 'space-around': Content is distributed with space around. * 'space-evenly': Content is distributed with even space around. * 'stretch': Content is stretched to fill the container. rowGap: |- ``` rowGap: number ``` The `rowGap` property specifies the gap between rows in the layout. columnGap: |- ``` columnGap: number ``` The `columnGap` property specifies the gap between columns in the layout. verticalPadding: |- ``` verticalPadding: number ``` The `verticalPadding` property specifies the vertical padding inside the container. horizontalPadding: |- ``` horizontalPadding: number ``` The `horizontalPadding` property specifies the horizontal padding inside the container. topPadding: |- ``` topPadding: number ``` The `topPadding` property specifies the padding at the top of the container. rightPadding: |- ``` rightPadding: number ``` The `rightPadding` property specifies the padding at the right of the container. bottomPadding: |- ``` bottomPadding: number ``` The `bottomPadding` property specifies the padding at the bottom of the container. leftPadding: |- ``` leftPadding: number ``` The `leftPadding` property specifies the padding at the left of the container. horizontalSizing: |- ``` horizontalSizing: "fill" | "auto" | "fix" ``` The `horizontalSizing` property specifies the horizontal sizing behavior of the container. It can be one of the following values: * 'fix': The containers has its own intrinsic fixed size. * 'fill': The container fills the available space. Only can be set if it's inside another layout. * 'auto': The container fits the content. verticalSizing: |- ``` verticalSizing: "fill" | "auto" | "fix" ``` The `verticalSizing` property specifies the vertical sizing behavior of the container. It can be one of the following values: * 'fix': The containers has its own intrinsic fixed size. * 'fill': The container fills the available space. Only can be set if it's inside another layout. * 'auto': The container fits the content. dir: |- ``` dir: "row" | "row-reverse" | "column" | "column-reverse" ``` The direction of the flex layout. * 'row': Main axis is horizontal, from left to right. * 'row-reverse': Main axis is horizontal, from right to left. * 'column': Main axis is vertical, from top to bottom. * 'column-reverse': Main axis is vertical, from bottom to top. wrap: |- ``` wrap?: "wrap" | "nowrap" ``` The optional wrapping behavior of the flex layout. * 'wrap': Child elements will wrap onto multiple lines. * 'nowrap': Child elements will not wrap. Methods: remove: |- ``` remove(): void ``` The `remove` method removes the layout. Returns void appendChild: |- ``` appendChild(child: Shape): void ``` Appends a child element to the flex layout. Parameters * child: Shape The child element to be appended, of type `Shape`. Returns void Example ``` flexLayout.appendChild(childShape); ``` Flow: overview: |- Interface 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; } ``` Referenced by: Page members: Properties: page: |- ``` readonly page: Page ``` The page in which the flow is defined name: |- ``` name: string ``` The name for the current flow startingBoard: |- ``` startingBoard: Board ``` The starting board for this interaction flow Methods: remove: |- ``` remove(): void ``` Removes the flow from the page Returns void Font: overview: |- Interface Font ============== Represents a font in Penpot, which includes details about the font family, variants, and styling options. This interface provides properties and methods for describing and applying fonts within Penpot. ``` 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; } ``` Referenced by: FontsContext, LibraryTypography members: Properties: name: |- ``` name: string ``` This property holds the human-readable name of the font. fontId: |- ``` fontId: string ``` The unique identifier of the font. fontFamily: |- ``` fontFamily: string ``` The font family of the font. fontStyle: |- ``` fontStyle?: "normal" | "italic" | null ``` The default font style of the font. fontVariantId: |- ``` fontVariantId: string ``` The default font variant ID of the font. fontWeight: |- ``` fontWeight: string ``` The default font weight of the font. variants: |- ``` variants: FontVariant[] ``` An array of font variants available for the font. Methods: applyToText: |- ``` applyToText(text: Text, variant?: FontVariant): void ``` Applies the font styles to a text shape. Parameters * text: Text The text shape to apply the font styles to. * variant: FontVariant Optional. The specific font variant to apply. If not provided, applies the default variant. Returns void Example ``` font.applyToText(textShape, fontVariant); ``` applyToRange: |- ``` applyToRange(range: TextRange, variant?: FontVariant): void ``` Applies the font styles to a text range within a text shape. Parameters * range: TextRange The text range to apply the font styles to. * variant: FontVariant Optional. The specific font variant to apply. If not provided, applies the default variant. Returns void Example ``` font.applyToRange(textRange, fontVariant); ``` FontVariant: overview: |- Interface FontVariant ===================== Represents a font variant in Penpot, which defines a specific style variation of a font. This interface provides properties for describing the characteristics of a font variant. ``` interface FontVariant { name: string; fontVariantId: string; fontWeight: string; fontStyle: "normal" | "italic"; } ``` Referenced by: Font, LibraryTypography members: Properties: name: |- ``` name: string ``` The name of the font variant. fontVariantId: |- ``` fontVariantId: string ``` The unique identifier of the font variant. fontWeight: |- ``` fontWeight: string ``` The font weight of the font variant. fontStyle: |- ``` fontStyle: "normal" | "italic" ``` The font style of the font variant. FontsContext: overview: |- Interface FontsContext ====================== Represents the context for managing fonts in Penpot. This interface provides methods to interact with fonts, such as retrieving fonts by ID or name. ``` interface FontsContext { all: Font[]; findById(id: string): Font | null; findByName(name: string): Font | null; findAllById(id: string): Font[]; findAllByName(name: string): Font[]; } ``` Referenced by: Context, Penpot members: Properties: all: |- ``` all: Font[] ``` An array containing all available fonts. Methods: findById: |- ``` findById(id: string): Font | null ``` Finds a font by its unique identifier. Parameters * id: string The ID of the font to find. Returns Font | null Returns the `Font` object if found, otherwise `null`. Example ``` const font = fontsContext.findById('font-id');if (font) { console.log(font.name);} ``` findByName: |- ``` findByName(name: string): Font | null ``` Finds a font by its name. Parameters * name: string The name of the font to find. Returns Font | null Returns the `Font` object if found, otherwise `null`. Example ``` const font = fontsContext.findByName('font-name');if (font) { console.log(font.name);} ``` findAllById: |- ``` findAllById(id: string): Font[] ``` Finds all fonts matching a specific ID. Parameters * id: string The ID to match against. Returns Font[] Returns an array of `Font` objects matching the provided ID. Example ``` const fonts = fontsContext.findAllById('font-id');console.log(fonts); ``` findAllByName: |- ``` findAllByName(name: string): Font[] ``` Finds all fonts matching a specific name. Parameters * name: string The name to match against. Returns Font[] Returns an array of `Font` objects matching the provided name. Example ``` const fonts = fontsContext.findAllByName('font-name');console.log(fonts); ``` GridLayout: overview: |- Interface GridLayout ==================== GridLayout represents a grid layout in the Penpot application, extending the common layout interface. It includes properties and methods to manage rows, columns, and child elements within the grid. ``` interface GridLayout { alignItems?: "center" | "start" | "end" | "stretch"; alignContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" | "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" | "fix"; verticalSizing: "fill" | "auto" | "fix"; 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 Summary) * CommonLayout + GridLayout Referenced by: Board, VariantContainer members: Properties: alignItems: |- ``` alignItems?: "center" | "start" | "end" | "stretch" ``` The `alignItems` property specifies the default alignment for items inside the container. It can be one of the following values: * 'start': Items are aligned at the start. * 'end': Items are aligned at the end. * 'center': Items are centered. * 'stretch': Items are stretched to fill the container. alignContent: |- ``` alignContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly" ``` The `alignContent` property specifies how the content is aligned within the container when there is extra space. It can be one of the following values: * 'start': Content is aligned at the start. * 'end': Content is aligned at the end. * 'center': Content is centered. * 'space-between': Content is distributed with space between. * 'space-around': Content is distributed with space around. * 'space-evenly': Content is distributed with even space around. * 'stretch': Content is stretched to fill the container. justifyItems: |- ``` justifyItems?: "center" | "start" | "end" | "stretch" ``` The `justifyItems` property specifies the default justification for items inside the container. It can be one of the following values: * 'start': Items are justified at the start. * 'end': Items are justified at the end. * 'center': Items are centered. * 'stretch': Items are stretched to fill the container. justifyContent: |- ``` justifyContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly" ``` The `justifyContent` property specifies how the content is justified within the container when there is extra space. It can be one of the following values: * 'start': Content is justified at the start. * 'center': Content is centered. * 'end': Content is justified at the end. * 'space-between': Content is distributed with space between. * 'space-around': Content is distributed with space around. * 'space-evenly': Content is distributed with even space around. * 'stretch': Content is stretched to fill the container. rowGap: |- ``` rowGap: number ``` The `rowGap` property specifies the gap between rows in the layout. columnGap: |- ``` columnGap: number ``` The `columnGap` property specifies the gap between columns in the layout. verticalPadding: |- ``` verticalPadding: number ``` The `verticalPadding` property specifies the vertical padding inside the container. horizontalPadding: |- ``` horizontalPadding: number ``` The `horizontalPadding` property specifies the horizontal padding inside the container. topPadding: |- ``` topPadding: number ``` The `topPadding` property specifies the padding at the top of the container. rightPadding: |- ``` rightPadding: number ``` The `rightPadding` property specifies the padding at the right of the container. bottomPadding: |- ``` bottomPadding: number ``` The `bottomPadding` property specifies the padding at the bottom of the container. leftPadding: |- ``` leftPadding: number ``` The `leftPadding` property specifies the padding at the left of the container. horizontalSizing: |- ``` horizontalSizing: "fill" | "auto" | "fix" ``` The `horizontalSizing` property specifies the horizontal sizing behavior of the container. It can be one of the following values: * 'fix': The containers has its own intrinsic fixed size. * 'fill': The container fills the available space. Only can be set if it's inside another layout. * 'auto': The container fits the content. verticalSizing: |- ``` verticalSizing: "fill" | "auto" | "fix" ``` The `verticalSizing` property specifies the vertical sizing behavior of the container. It can be one of the following values: * 'fix': The containers has its own intrinsic fixed size. * 'fill': The container fills the available space. Only can be set if it's inside another layout. * 'auto': The container fits the content. dir: |- ``` dir: "row" | "column" ``` The `dir` property specifies the primary direction of the grid layout. It can be either 'column' or 'row'. rows: |- ``` readonly rows: Track[] ``` The `rows` property represents the collection of rows in the grid. This property is read-only. columns: |- ``` readonly columns: Track[] ``` The `columns` property represents the collection of columns in the grid. This property is read-only. Methods: remove: |- ``` remove(): void ``` The `remove` method removes the layout. Returns void addRow: |- ``` addRow(type: TrackType, value?: number): void ``` Adds a new row to the grid. Parameters * type: TrackType The type of the row to add. * value: number The value associated with the row type (optional). Returns void Example ``` const board = penpot.createBoard();const grid = board.addGridLayout();grid.addRow("flex", 1); ``` addRowAtIndex: |- ``` addRowAtIndex(index: number, type: TrackType, value?: number): void ``` Adds a new row to the grid at the specified index. Parameters * index: number The index at which to add the row. * type: TrackType The type of the row to add. * value: number The value associated with the row type (optional). Returns void Example ``` gridLayout.addRowAtIndex(0, 'fixed', 100); ``` addColumn: |- ``` addColumn(type: TrackType, value?: number): void ``` Adds a new column to the grid. Parameters * type: TrackType The type of the column to add. * value: number The value associated with the column type (optional). Returns void Example ``` const board = penpot.createBoard();const grid = board.addGridLayout();grid.addColumn('percent', 50); ``` addColumnAtIndex: |- ``` addColumnAtIndex(index: number, type: TrackType, value: number): void ``` Adds a new column to the grid at the specified index. Parameters * index: number The index at which to add the column. * type: TrackType The type of the column to add. * value: number The value associated with the column type. Returns void Example ``` gridLayout.addColumnAtIndex(1, 'auto'); ``` removeRow: |- ``` removeRow(index: number): void ``` Removes a row from the grid at the specified index. Parameters * index: number The index of the row to remove. Returns void Example ``` gridLayout.removeRow(2); ``` removeColumn: |- ``` removeColumn(index: number): void ``` Removes a column from the grid at the specified index. Parameters * index: number The index of the column to remove. Returns void Example ``` gridLayout.removeColumn(3); ``` setColumn: |- ``` setColumn(index: number, type: TrackType, value?: number): void ``` Sets the properties of a column at the specified index. Parameters * index: number The index of the column to set. * type: TrackType The type of the column. * value: number The value associated with the column type (optional). Returns void Example ``` gridLayout.setColumn(0, 'fixed', 200); ``` setRow: |- ``` setRow(index: number, type: TrackType, value?: number): void ``` Sets the properties of a row at the specified index. Parameters * index: number The index of the row to set. * type: TrackType The type of the row. * value: number The value associated with the row type (optional). Returns void Example ``` gridLayout.setRow(1, 'flex'); ``` appendChild: |- ``` appendChild(child: Shape, row: number, column: number): void ``` Appends a child element to the grid at the specified row and column. Parameters * child: Shape The child element to append. * row: number The row index where the child will be placed. * column: number The column index where the child will be placed. Returns void Example ``` gridLayout.appendChild(childShape, 0, 1); ``` Group: overview: |- Interface Group =============== Represents a group of shapes in Penpot. 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: 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" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "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?: LayoutCellProperties; setParentIndex(index: number): void; tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[]): VariantContainer; 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 Summary) * ShapeBase + Group Referenced by: Context, ContextTypesUtils, Penpot, Shape members: Properties: type: |- ``` readonly type: "group" ``` The type of the shape, which is always 'group' for groups. children: |- ``` readonly children: Shape[] ``` The children shapes contained within the group. id: |- ``` readonly id: string ``` The unique identifier of the shape. name: |- ``` name: string ``` The name of the shape. parent: |- ``` readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. For the root shape the parent is null parentIndex: |- ``` readonly parentIndex: number ``` Returns the index of the current shape in the parent x: |- ``` x: number ``` The x-coordinate of the shape's position. y: |- ``` y: number ``` The y-coordinate of the shape's position. width: |- ``` readonly width: number ``` The width of the shape. height: |- ``` readonly height: number ``` The height of the shape. bounds: |- ``` readonly bounds: Bounds ``` Returns Returns the bounding box surrounding the current shape center: |- ``` readonly center: Point ``` Returns Returns the geometric center of the shape blocked: |- ``` blocked: boolean ``` Indicates whether the shape is blocked. hidden: |- ``` hidden: boolean ``` Indicates whether the shape is hidden. visible: |- ``` visible: boolean ``` Indicates whether the shape is visible. proportionLock: |- ``` proportionLock: boolean ``` Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. borderRadius: |- ``` borderRadius: number ``` The border radius of the shape. borderRadiusTopLeft: |- ``` borderRadiusTopLeft: number ``` The border radius of the top-left corner of the shape. borderRadiusTopRight: |- ``` borderRadiusTopRight: number ``` The border radius of the top-right corner of the shape. borderRadiusBottomRight: |- ``` borderRadiusBottomRight: number ``` The border radius of the bottom-right corner of the shape. borderRadiusBottomLeft: |- ``` borderRadiusBottomLeft: number ``` The border radius of the bottom-left corner of the shape. opacity: |- ``` opacity: number ``` The opacity of the shape. blendMode: |- ``` blendMode: | "difference" | "normal" | "darken" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" ``` The blend mode applied to the shape. shadows: |- ``` shadows: Shadow[] ``` The shadows applied to the shape. blur: |- ``` blur?: Blur ``` The blur effect applied to the shape. exports: |- ``` exports: Export[] ``` The export settings of the shape. boardX: |- ``` boardX: number ``` The x-coordinate of the shape relative to its board. boardY: |- ``` boardY: number ``` The y-coordinate of the shape relative to its board. parentX: |- ``` parentX: number ``` The x-coordinate of the shape relative to its parent. parentY: |- ``` parentY: number ``` The y-coordinate of the shape relative to its parent. flipX: |- ``` flipX: boolean ``` Indicates whether the shape is flipped horizontally. flipY: |- ``` flipY: boolean ``` Indicates whether the shape is flipped vertically. rotation: |- ``` rotation: number ``` Returns Returns the rotation in degrees of the shape with respect to it's center. fills: |- ``` fills: Fill[] | "mixed" ``` The fills applied to the shape. strokes: |- ``` strokes: Stroke[] ``` The strokes applied to the shape. layoutChild: |- ``` readonly layoutChild?: LayoutChildProperties ``` Layout properties for children of the shape. layoutCell: |- ``` readonly layoutCell?: LayoutCellProperties ``` Layout properties for cells in a grid layout. tokens: |- ``` readonly tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[] ``` The interactions for the current shape. Methods: appendChild: |- ``` appendChild(child: Shape): void ``` Appends a child shape to the group. Parameters * child: Shape The child shape to append. Returns void Example ``` group.appendChild(childShape); ``` insertChild: |- ``` insertChild(index: number, child: Shape): void ``` Inserts a child shape at the specified index within the group. Parameters * index: number The index at which to insert the child shape. * child: Shape The child shape to insert. 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. Returns boolean makeMask: |- ``` makeMask(): void ``` Converts the group into a mask. Returns void removeMask: |- ``` removeMask(): void ``` Removes the mask from the group. Returns void getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] Returns an array of strings representing all the keys in the namespace. Example ``` const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); ``` setParentIndex: |- ``` 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. Parameters * index: number the new index for the shape to be in Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` Returns boolean Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` componentRefShape(): Shape | null ``` Returns Shape | null Returns the equivalent shape in the component main instance. If the current shape is inside a main instance will return `null`; componentRoot: |- ``` componentRoot(): Shape | null ``` 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. componentHead: |- ``` componentHead(): Shape | null ``` 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. component: |- ``` component(): LibraryComponent | null ``` Returns LibraryComponent | 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" Returns void swapComponent: |- ``` swapComponent(component: LibraryComponent): void ``` TODO Parameters * component: LibraryComponent Returns void switchVariant: |- ``` switchVariant(pos: number, value: string): void ``` Switch a VariantComponent copy to the nearest one that has the specified property value Parameters * pos: number The position of the poroperty to update * value: string The new value of the property Returns void combineAsVariants: |- ``` combineAsVariants(ids: string[]): VariantContainer ``` 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[] A list of ids of the main instances of the components to combine with this one. Returns VariantContainer The variant container created isVariantHead: |- ``` isVariantHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure, and that component is a VariantComponent resize: |- ``` resize(width: number, height: number): void ``` Resizes the shape to the specified width and height. Parameters * width: number The new width of the shape. * height: number The new height of the shape. Returns void Example ``` shape.resize(200, 100); ``` rotate: |- ``` rotate(angle: number, center?: { x: number; y: number } | null): void ``` Rotates the shape in relation with the given center. Parameters * angle: number Angle in degrees to rotate. * center: { x: number; y: number } | null Center of the transform rotation. If not send will use the geometri center of the shapes. Returns void Example ``` shape.rotate(45); ``` bringToFront: |- ``` bringToFront(): void ``` Moves the current shape to the front of its siblings Returns void bringForward: |- ``` bringForward(): void ``` Moves the current shape one position forward in its list of siblings Returns void sendToBack: |- ``` sendToBack(): void ``` Moves the current shape to the back of its siblings Returns void sendBackward: |- ``` sendBackward(): void ``` Moves the current shape one position backwards in its list of siblings Returns void export: |- ``` export(config: Export): Promise> ``` Generates an export from the current shape. Parameters * config: Export Returns Promise> Example ``` shape.export({ type: 'png', scale: 2 }); ``` addInteraction: |- ``` addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` Adds a new interaction to the shape. Parameters * trigger: Trigger defines the conditions under which the action will be triggered * action: Action defines what will be executed when the trigger happens * delay: number for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. Returns Interaction Example ``` shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); ``` removeInteraction: |- ``` removeInteraction(interaction: Interaction): void ``` Removes the interaction from the shape. Parameters * interaction: Interaction is the interaction to remove from the shape Returns void Example ``` shape.removeInteraction(interaction); ``` applyToken: |- ``` applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` Applies one design token to one or more properties of the shape. Parameters * token: Token is the Token to apply * properties: TokenProperty[] | undefined 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 ``` Creates a clone of the shape. Returns Shape Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` Removes the shape from its parent. Returns void GuideColumn: overview: |- Interface GuideColumn ===================== Represents a goard guide for columns in Penpot. 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; } ``` Referenced by: Guide members: Properties: type: |- ``` type: "column" ``` The type of the guide, which is always 'column' for column guides. display: |- ``` display: boolean ``` Specifies whether the column guide is displayed. params: |- ``` params: GuideColumnParams ``` The parameters defining the appearance and layout of the column guides. GuideColumnParams: overview: |- Interface GuideColumnParams =========================== Represents parameters for board guide columns in Penpot. 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; } ``` Referenced by: GuideColumn, GuideRow members: Properties: color: |- ``` color: { color: string; opacity: number } ``` The color configuration for the column guides. type: |- ``` type?: "center" | "left" | "right" | "stretch" ``` The optional alignment type of the column guides. * 'stretch': Columns stretch to fit the available space. * 'left': Columns align to the left. * 'center': Columns align to the center. * 'right': Columns align to the right. size: |- ``` size?: number ``` The optional size of each column. margin: |- ``` margin?: number ``` The optional margin between the columns and the board edges. itemLength: |- ``` itemLength?: number ``` The optional length of each item within the columns. gutter: |- ``` gutter?: number ``` The optional gutter width between columns. GuideRow: overview: |- Interface GuideRow ================== Represents a board guide for rows in Penpot. 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; } ``` Referenced by: Guide members: Properties: type: |- ``` type: "row" ``` The type of the guide, which is always 'row' for row guides. display: |- ``` display: boolean ``` Specifies whether the row guide is displayed. params: |- ``` params: GuideColumnParams ``` The parameters defining the appearance and layout of the row guides. Note: This reuses the same parameter structure as column guides. GuideSquare: overview: |- Interface GuideSquare ===================== Represents a board guide for squares in Penpot. 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; } ``` Referenced by: Guide members: Properties: type: |- ``` type: "square" ``` The type of the guide, which is always 'square' for square guides. display: |- ``` display: boolean ``` Specifies whether the square guide is displayed. params: |- ``` params: GuideSquareParams ``` The parameters defining the appearance and layout of the square guides. GuideSquareParams: overview: |- Interface GuideSquareParams =========================== Represents parameters for board guide squares in Penpot. 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; } ``` Referenced by: GuideSquare members: Properties: color: |- ``` color: { color: string; opacity: number } ``` The color configuration for the square guides. size: |- ``` size?: number ``` The optional size of each square guide. HistoryContext: overview: |- Interface HistoryContext ======================== This object allows to access to some history functions ``` interface HistoryContext { undoBlockBegin(): Symbol; undoBlockFinish(blockId: Symbol): void; } ``` Referenced by: Context, Penpot members: Methods: undoBlockBegin: |- ``` undoBlockBegin(): Symbol ``` Starts an undo block. All operations done inside this block will be undone together until a call to `undoBlockFinish` is called. Returns Symbol the block identifier undoBlockFinish: |- ``` undoBlockFinish(blockId: Symbol): void ``` Ends the undo block started with `undoBlockBegin` Parameters * blockId: Symbol is the id returned by `undoBlockBegin` Returns void Example ``` historyContext.undoBlockFinish(blockId); ``` Image: overview: |- Interface Image =============== Represents an image shape in Penpot. 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: 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" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "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?: LayoutCellProperties; setParentIndex(index: number): void; tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[]): VariantContainer; 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 Summary) * ShapeBase + Image Referenced by: Shape members: Properties: type: |- ``` type: "image" ``` fills: |- ``` fills: Fill[] ``` The fills applied to the shape. Overrides ShapeBase.fills id: |- ``` readonly id: string ``` The unique identifier of the shape. name: |- ``` name: string ``` The name of the shape. parent: |- ``` readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. For the root shape the parent is null parentIndex: |- ``` readonly parentIndex: number ``` Returns the index of the current shape in the parent x: |- ``` x: number ``` The x-coordinate of the shape's position. y: |- ``` y: number ``` The y-coordinate of the shape's position. width: |- ``` readonly width: number ``` The width of the shape. height: |- ``` readonly height: number ``` The height of the shape. bounds: |- ``` readonly bounds: Bounds ``` Returns Returns the bounding box surrounding the current shape center: |- ``` readonly center: Point ``` Returns Returns the geometric center of the shape blocked: |- ``` blocked: boolean ``` Indicates whether the shape is blocked. hidden: |- ``` hidden: boolean ``` Indicates whether the shape is hidden. visible: |- ``` visible: boolean ``` Indicates whether the shape is visible. proportionLock: |- ``` proportionLock: boolean ``` Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. borderRadius: |- ``` borderRadius: number ``` The border radius of the shape. borderRadiusTopLeft: |- ``` borderRadiusTopLeft: number ``` The border radius of the top-left corner of the shape. borderRadiusTopRight: |- ``` borderRadiusTopRight: number ``` The border radius of the top-right corner of the shape. borderRadiusBottomRight: |- ``` borderRadiusBottomRight: number ``` The border radius of the bottom-right corner of the shape. borderRadiusBottomLeft: |- ``` borderRadiusBottomLeft: number ``` The border radius of the bottom-left corner of the shape. opacity: |- ``` opacity: number ``` The opacity of the shape. blendMode: |- ``` blendMode: | "difference" | "normal" | "darken" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" ``` The blend mode applied to the shape. shadows: |- ``` shadows: Shadow[] ``` The shadows applied to the shape. blur: |- ``` blur?: Blur ``` The blur effect applied to the shape. exports: |- ``` exports: Export[] ``` The export settings of the shape. boardX: |- ``` boardX: number ``` The x-coordinate of the shape relative to its board. boardY: |- ``` boardY: number ``` The y-coordinate of the shape relative to its board. parentX: |- ``` parentX: number ``` The x-coordinate of the shape relative to its parent. parentY: |- ``` parentY: number ``` The y-coordinate of the shape relative to its parent. flipX: |- ``` flipX: boolean ``` Indicates whether the shape is flipped horizontally. flipY: |- ``` flipY: boolean ``` Indicates whether the shape is flipped vertically. rotation: |- ``` rotation: number ``` Returns Returns the rotation in degrees of the shape with respect to it's center. strokes: |- ``` strokes: Stroke[] ``` The strokes applied to the shape. layoutChild: |- ``` readonly layoutChild?: LayoutChildProperties ``` Layout properties for children of the shape. layoutCell: |- ``` readonly layoutCell?: LayoutCellProperties ``` Layout properties for cells in a grid layout. tokens: |- ``` readonly tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[] ``` The interactions for the current shape. Methods: getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] Returns an array of strings representing all the keys in the namespace. Example ``` const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); ``` setParentIndex: |- ``` 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. Parameters * index: number the new index for the shape to be in Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` Returns boolean Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` componentRefShape(): Shape | null ``` Returns Shape | null Returns the equivalent shape in the component main instance. If the current shape is inside a main instance will return `null`; componentRoot: |- ``` componentRoot(): Shape | null ``` 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. componentHead: |- ``` componentHead(): Shape | null ``` 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. component: |- ``` component(): LibraryComponent | null ``` Returns LibraryComponent | 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" Returns void swapComponent: |- ``` swapComponent(component: LibraryComponent): void ``` TODO Parameters * component: LibraryComponent Returns void switchVariant: |- ``` switchVariant(pos: number, value: string): void ``` Switch a VariantComponent copy to the nearest one that has the specified property value Parameters * pos: number The position of the poroperty to update * value: string The new value of the property Returns void combineAsVariants: |- ``` combineAsVariants(ids: string[]): VariantContainer ``` 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[] A list of ids of the main instances of the components to combine with this one. Returns VariantContainer The variant container created isVariantHead: |- ``` isVariantHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure, and that component is a VariantComponent resize: |- ``` resize(width: number, height: number): void ``` Resizes the shape to the specified width and height. Parameters * width: number The new width of the shape. * height: number The new height of the shape. Returns void Example ``` shape.resize(200, 100); ``` rotate: |- ``` rotate(angle: number, center?: { x: number; y: number } | null): void ``` Rotates the shape in relation with the given center. Parameters * angle: number Angle in degrees to rotate. * center: { x: number; y: number } | null Center of the transform rotation. If not send will use the geometri center of the shapes. Returns void Example ``` shape.rotate(45); ``` bringToFront: |- ``` bringToFront(): void ``` Moves the current shape to the front of its siblings Returns void bringForward: |- ``` bringForward(): void ``` Moves the current shape one position forward in its list of siblings Returns void sendToBack: |- ``` sendToBack(): void ``` Moves the current shape to the back of its siblings Returns void sendBackward: |- ``` sendBackward(): void ``` Moves the current shape one position backwards in its list of siblings Returns void export: |- ``` export(config: Export): Promise> ``` Generates an export from the current shape. Parameters * config: Export Returns Promise> Example ``` shape.export({ type: 'png', scale: 2 }); ``` addInteraction: |- ``` addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` Adds a new interaction to the shape. Parameters * trigger: Trigger defines the conditions under which the action will be triggered * action: Action defines what will be executed when the trigger happens * delay: number for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. Returns Interaction Example ``` shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); ``` removeInteraction: |- ``` removeInteraction(interaction: Interaction): void ``` Removes the interaction from the shape. Parameters * interaction: Interaction is the interaction to remove from the shape Returns void Example ``` shape.removeInteraction(interaction); ``` applyToken: |- ``` applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` Applies one design token to one or more properties of the shape. Parameters * token: Token is the Token to apply * properties: TokenProperty[] | undefined 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 ``` Creates a clone of the shape. Returns Shape Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` Removes the shape from its parent. Returns void Interaction: overview: |- Interface Interaction ===================== Penpot allows you to prototype interactions by connecting boards, which can act as screens. ``` interface Interaction { shape?: Shape; trigger: Trigger; delay?: number | null; action: Action; remove(): void; } ``` Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer members: Properties: shape: |- ``` readonly shape?: Shape ``` The shape that owns the interaction trigger: |- ``` trigger: Trigger ``` The user action that will start the interaction. delay: |- ``` delay?: number | null ``` Time in **milliseconds** after the action will happen. Only applies to `after-delay` triggers. action: |- ``` action: Action ``` The action that will execute after the trigger happens. Methods: remove: |- ``` remove(): void ``` Removes the interaction Returns void LayoutCellProperties: overview: |- Interface 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"; } ``` Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer members: Properties: row: |- ``` row?: number ``` The row index of the cell. This value is optional and indicates the starting row of the cell. rowSpan: |- ``` rowSpan?: number ``` The number of rows the cell should span. This value is optional and determines the vertical span of the cell. column: |- ``` column?: number ``` The column index of the cell. This value is optional and indicates the starting column of the cell. columnSpan: |- ``` columnSpan?: number ``` The number of columns the cell should span. This value is optional and determines the horizontal span of the cell. areaName: |- ``` areaName?: string ``` The name of the grid area that this cell belongs to. This value is optional and can be used to define named grid areas. position: |- ``` position?: "area" | "auto" | "manual" ``` The positioning mode of the cell. This value can be 'auto', 'manual', or 'area' and determines how the cell is positioned within the layout. LayoutChildProperties: overview: |- Interface 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: number | null; maxHeight: number | null; minWidth: number | null; minHeight: number | null; } ``` Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer members: Properties: absolute: |- ``` absolute: boolean ``` Specifies whether the child element is positioned absolutely. When set to true, the element is taken out of the normal document flow and positioned relative to its nearest positioned ancestor. zIndex: |- ``` zIndex: number ``` Defines the stack order of the child element Elements with a higher zIndex will be displayed in front of those with a lower zIndex. horizontalSizing: |- ``` horizontalSizing: "fill" | "auto" | "fix" ``` Determines the horizontal sizing behavior of the child element * 'auto': The width is determined by the content. * 'fill': The element takes up the available width. * 'fix': The width is fixed. verticalSizing: |- ``` verticalSizing: "fill" | "auto" | "fix" ``` Determines the vertical sizing behavior of the child element. * 'auto': The height is determined by the content. * 'fill': The element takes up the available height. * 'fix': The height is fixed. alignSelf: |- ``` alignSelf: "center" | "auto" | "start" | "end" | "stretch" ``` Aligns the child element within its container. * 'auto': Default alignment. * 'start': Aligns the element at the start of the container. * 'center': Centers the element within the container. * 'end': Aligns the element at the end of the container. * 'stretch': Stretches the element to fill the container. horizontalMargin: |- ``` horizontalMargin: number ``` Sets the horizontal margin of the child element. This is the space on the left and right sides of the element. verticalMargin: |- ``` verticalMargin: number ``` Sets the vertical margin of the child element. This is the space on the top and bottom sides of the element. topMargin: |- ``` topMargin: number ``` Sets the top margin of the child element. This is the space above the element. rightMargin: |- ``` rightMargin: number ``` Sets the right margin of the child element. This is the space to the right of the element. bottomMargin: |- ``` bottomMargin: number ``` Sets the bottom margin of the child element. This is the space below the element. leftMargin: |- ``` leftMargin: number ``` Sets the left margin of the child element. This is the space to the left of the element. maxWidth: |- ``` maxWidth: number | null ``` Defines the maximum width of the child element. If set to null, there is no maximum width constraint. maxHeight: |- ``` maxHeight: number | null ``` Defines the maximum height of the child element. If set to null, there is no maximum height constraint. minWidth: |- ``` minWidth: number | null ``` Defines the minimum width of the child element. If set to null, there is no minimum width constraint. minHeight: |- ``` minHeight: number | null ``` Defines the minimum height of the child element. If set to null, there is no minimum height constraint. Library: overview: |- Interface 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[]; } ``` Hierarchy (View Summary) * PluginData + Library Referenced by: LibraryContext members: Properties: id: |- ``` readonly id: string ``` The unique identifier of the library. name: |- ``` readonly name: string ``` The name of the library. colors: |- ``` readonly colors: LibraryColor[] ``` An array of color elements in the library. Example ``` console.log(penpot.library.local.colors); ``` typographies: |- ``` readonly typographies: LibraryTypography[] ``` An array of typography elements in the library. components: |- ``` readonly components: LibraryComponent[] ``` An array of component elements in the library. Example ``` 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: |- ``` createColor(): LibraryColor ``` Creates a new color element in the library. Returns LibraryColor Returns a new `LibraryColor` object representing the created color element. Example ``` const newColor = penpot.library.local.createColor();console.log(newColor); ``` createTypography: |- ``` createTypography(): LibraryTypography ``` Creates a new typography element in the library. Returns LibraryTypography Returns a new `LibraryTypography` object representing the created typography element. Example ``` const newTypography = library.createTypography(); ``` createComponent: |- ``` createComponent(shapes: Shape[]): LibraryComponent ``` Creates a new component element in the library using the provided shapes. Parameters * shapes: Shape[] An array of `Shape` objects representing the shapes to be included in the component. Returns LibraryComponent Returns a new `LibraryComponent` object representing the created component element. Example ``` const newComponent = penpot.library.local.createComponent([shape1, shape2]); ``` getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] 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 ====================== Represents a color element from a library in Penpot. 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[]; } ``` Hierarchy (View Summary) * LibraryElement + LibraryColor Referenced by: Library members: Properties: color: |- ``` color?: string ``` The color value of the library color. opacity: |- ``` opacity?: number ``` The opacity value of the library color. gradient: |- ``` gradient?: Gradient ``` The gradient value of the library color, if it's a gradient. image: |- ``` image?: ImageData ``` The image data of the library color, if it's an image fill. id: |- ``` readonly id: string ``` The unique identifier of the library element. libraryId: |- ``` readonly libraryId: string ``` The unique identifier of the library to which the element belongs. name: |- ``` name: string ``` The name of the library element. path: |- ``` path: string ``` The path of the library element. Methods: asFill: |- ``` asFill(): Fill ``` Converts the library color into a fill object. Returns Fill Returns a `Fill` object representing the color as a fill. Example ``` const fill = libraryColor.asFill(); ``` asStroke: |- ``` asStroke(): Stroke ``` Converts the library color into a stroke object. Returns Stroke Returns a `Stroke` object representing the color as a stroke. Example ``` const stroke = libraryColor.asStroke(); ``` getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] 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 ========================== Represents a component element from a library in Penpot. 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[]; } ``` Hierarchy (View Summary) * LibraryElement + LibraryComponent - LibraryVariantComponent Referenced by: Board, Boolean, ContextTypesUtils, Ellipse, Group, Image, Library, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer, Variants members: Properties: id: |- ``` readonly id: string ``` The unique identifier of the library element. libraryId: |- ``` readonly libraryId: string ``` The unique identifier of the library to which the element belongs. name: |- ``` name: string ``` The name of the library element. path: |- ``` path: string ``` The path of the library element. Methods: instance: |- ``` instance(): Shape ``` Creates an instance of the component. Returns Shape Returns a `Shape` object representing the instance of the component. Example ``` const componentInstance = libraryComponent.instance(); ``` mainInstance: |- ``` mainInstance(): Shape ``` Returns Shape Returns the reference to the main component shape. isVariant: |- ``` isVariant(): boolean ``` Returns boolean 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 Returns void getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] 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 ================================= Represents a component element from a library in Penpot. This interface extends `LibraryElement` and includes properties specific to component elements. ``` 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 Summary) * LibraryComponent + LibraryVariantComponent Referenced by: ContextTypesUtils members: Properties: 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 } ``` A list of the variants props of this VariantComponent. Each property have a key and a value variantError: |- ``` variantError: string ``` If this VariantComponent has an invalid name, that does't follow the structure [property]=[value], [property]=[value] this field stores that invalid name id: |- ``` readonly id: string ``` The unique identifier of the library element. libraryId: |- ``` readonly libraryId: string ``` The unique identifier of the library to which the element belongs. name: |- ``` name: string ``` The name of the library element. path: |- ``` path: string ``` The path of the library element. Methods: instance: |- ``` instance(): Shape ``` Creates an instance of the component. Returns Shape Returns a `Shape` object representing the instance of the component. Example ``` const componentInstance = libraryComponent.instance(); ``` mainInstance: |- ``` mainInstance(): Shape ``` Returns Shape Returns the reference to the main component shape. isVariant: |- ``` isVariant(): boolean ``` Returns boolean 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 Returns void addVariant: |- ``` addVariant(): void ``` Creates a duplicate of the current VariantComponent on its Variant Returns void setVariantProperty: |- ``` setVariantProperty(pos: number, value: string): void ``` Sets the value of the variant property on the indicated position Parameters * pos: number * value: string Returns void getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] 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 ======================== Represents an element in a Penpot library. 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[]; } ``` Hierarchy (View Summary) * PluginData + LibraryElement - LibraryColor - LibraryComponent - LibraryTypography members: Properties: id: |- ``` readonly id: string ``` The unique identifier of the library element. libraryId: |- ``` readonly libraryId: string ``` The unique identifier of the library to which the element belongs. name: |- ``` name: string ``` The name of the library element. path: |- ``` path: string ``` The path of the library element. Methods: getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] 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 ======================== Represents a summary of a Penpot library. This interface provides properties for summarizing various aspects of a Penpot library. ``` interface LibrarySummary { id: string; name: string; numColors: number; numComponents: number; numTypographies: number; } ``` Referenced by: LibraryContext members: Properties: id: |- ``` readonly id: string ``` The unique identifier of the library. name: |- ``` readonly name: string ``` The name of the library. numColors: |- ``` readonly numColors: number ``` The number of colors in the library. numComponents: |- ``` readonly numComponents: number ``` The number of components in the library. numTypographies: |- ``` readonly numTypographies: number ``` The number of typographies in the library. LibraryTypography: overview: |- Interface LibraryTypography =========================== Represents a typography element from a library in Penpot. 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?: "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 Summary) * LibraryElement + LibraryTypography Referenced by: Library, Text, TextRange members: Properties: id: |- ``` readonly id: string ``` The unique identifier of the library element. libraryId: |- ``` readonly libraryId: string ``` The unique identifier of the library to which the element belongs. name: |- ``` name: string ``` The name of the library element. path: |- ``` path: string ``` The path of the library element. fontId: |- ``` fontId: string ``` The unique identifier of the font used in the typography element. fontFamilies: |- ``` fontFamilies: string ``` The font families of the typography element. fontVariantId: |- ``` fontVariantId: string ``` The unique identifier of the font variant used in the typography element. fontSize: |- ``` fontSize: string ``` The font size of the typography element. fontWeight: |- ``` fontWeight: string ``` The font weight of the typography element. fontStyle: |- ``` fontStyle?: "normal" | "italic" | null ``` The font style of the typography element. lineHeight: |- ``` lineHeight: string ``` The line height of the typography element. letterSpacing: |- ``` letterSpacing: string ``` The letter spacing of the typography element. textTransform: |- ``` textTransform?: "uppercase" | "capitalize" | "lowercase" | null ``` The text transform applied to the typography element. Methods: applyToText: |- ``` applyToText(shape: Shape): void ``` Applies the typography styles to a text shape. Parameters * shape: Shape The text shape to apply the typography styles to. Returns void Example ``` typographyElement.applyToText(textShape); ``` applyToTextRange: |- ``` applyToTextRange(range: TextRange): void ``` Applies the typography styles to a range of text within a text shape. Parameters * range: TextRange Represents a range of text within a Text shape. This interface provides properties for styling and formatting text ranges. Returns void Example ``` typographyElement.applyToTextRange(textShape); ``` setFont: |- ``` setFont(font: Font, variant?: FontVariant): void ``` Sets the font and optionally its variant for the typography element. Parameters * font: Font The font to set. * variant: FontVariant The font variant to set (optional). Returns void Example ``` typographyElement.setFont(newFont, newVariant); ``` getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] 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 ====================== Proxy for the local storage. Only elements owned by the plugin can be stored and accessed. Warning: other plugins won't be able to access this information but 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[]; } ``` Referenced by: Context, Penpot members: Methods: getItem: |- ``` getItem(key: string): string ``` Retrieve the element with the given key Requires the `allow:localstorage` permission. Parameters * key: string Returns string setItem: |- ``` 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. Parameters * key: string * value: unknown Returns void removeItem: |- ``` removeItem(key: string): void ``` Remove the value stored in the key. Requires the `allow:localstorage` permission. Parameters * key: string Returns void getKeys: |- ``` getKeys(): string[] ``` Return all the keys for the data stored by the plugin. Requires the `allow:localstorage` permission. Returns string[] NavigateTo: overview: |- Interface 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; } ``` Referenced by: Action members: Properties: type: |- ``` readonly type: "navigate-to" ``` Type of action destination: |- ``` readonly destination: Board ``` Board to which the action targets preserveScrollPosition: |- ``` readonly preserveScrollPosition?: boolean ``` When true the scroll will be preserved. animation: |- ``` readonly animation?: Animation ``` Animation displayed with this interaction. OpenOverlay: overview: |- Interface OpenOverlay ===================== It opens a board right over the current board. ``` interface OpenOverlay { type: "open-overlay"; destination: Board; relativeTo?: Shape; position?: | "center" | "manual" | "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center"; manualPositionLocation?: Point; closeWhenClickOutside?: boolean; addBackgroundOverlay?: boolean; animation?: Animation; } ``` Hierarchy (View Summary) * OverlayAction + OpenOverlay Referenced by: Action members: Properties: type: |- ``` readonly type: "open-overlay" ``` The action type destination: |- ``` readonly destination: Board ``` Overlay board that will be opened. relativeTo: |- ``` readonly relativeTo?: Shape ``` Base shape to which the overlay will be positioned taking constraints into account. position: |- ``` readonly position?: | "center" | "manual" | "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center" ``` Positioning of the overlay. manualPositionLocation: |- ``` readonly manualPositionLocation?: Point ``` For `position = 'manual'` the location of the overlay. closeWhenClickOutside: |- ``` readonly closeWhenClickOutside?: boolean ``` When true the overlay will be closed when clicking outside addBackgroundOverlay: |- ``` readonly addBackgroundOverlay?: boolean ``` When true a background will be added to the overlay. animation: |- ``` readonly animation?: Animation ``` Animation displayed with this interaction. OpenUrl: overview: |- Interface OpenUrl ================= This action opens an URL in a new tab. ``` interface OpenUrl { type: "open-url"; url: string; } ``` Referenced by: Action members: Properties: type: |- ``` readonly type: "open-url" ``` The action type url: |- ``` readonly url: string ``` The URL to open when the action is executed OverlayAction: overview: |- Interface OverlayAction ======================= Base type for the actions "open-overlay" and "toggle-overlay" that share most of their properties ``` interface OverlayAction { destination: Board; relativeTo?: Shape; position?: | "center" | "manual" | "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center"; manualPositionLocation?: Point; closeWhenClickOutside?: boolean; addBackgroundOverlay?: boolean; animation?: Animation; } ``` Hierarchy (View Summary) * OverlayAction + OpenOverlay + ToggleOverlay members: Properties: destination: |- ``` readonly destination: Board ``` Overlay board that will be opened. relativeTo: |- ``` readonly relativeTo?: Shape ``` Base shape to which the overlay will be positioned taking constraints into account. position: |- ``` readonly position?: | "center" | "manual" | "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center" ``` Positioning of the overlay. manualPositionLocation: |- ``` readonly manualPositionLocation?: Point ``` For `position = 'manual'` the location of the overlay. closeWhenClickOutside: |- ``` readonly closeWhenClickOutside?: boolean ``` When true the overlay will be closed when clicking outside addBackgroundOverlay: |- ``` readonly addBackgroundOverlay?: boolean ``` When true a background will be added to the overlay. animation: |- ``` readonly animation?: Animation ``` Animation displayed with this interaction. Page: overview: |- Interface Page ============== Page represents a page in the Penpot application. 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): 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 Summary) * PluginData + Page Referenced by: Context, EventsMap, File, Flow, Penpot members: Properties: id: |- ``` readonly id: string ``` The `id` property is a unique identifier for the page. name: |- ``` name: string ``` The `name` property is the name of the page. rulerGuides: |- ``` readonly rulerGuides: RulerGuide[] ``` The ruler guides attached to the board root: |- ``` root: Shape ``` The root shape of the current page. Will be the parent shape of all the shapes inside the document. Requires `content:read` permission. flows: |- ``` readonly flows: Flow[] ``` The interaction flows defined for the page. Methods: getShapeById: |- ``` getShapeById(id: string): Shape | null ``` Retrieves a shape by its unique identifier. Parameters * id: string The unique identifier of the shape. Returns Shape | null Example ``` const shape = penpot.currentPage.getShapeById('shapeId'); ``` findShapes: |- ``` 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 Parameters * criteria: { name?: string; nameLike?: string; type?: | "boolean" | "path" | "ellipse" | "image" | "text" | "group" | "board" | "rectangle" | "svg-raw"; } Returns Shape[] Example ``` const shapes = penpot.currentPage.findShapes({ name: 'exampleName' }); ``` createFlow: |- ``` createFlow(name: string, board: Board): Flow ``` Creates a new flow in the page. Parameters * name: string the name identifying the flow * board: Board the starting board for the current flow Returns Flow Example ``` const flow = penpot.currentPage.createFlow('exampleFlow', board); ``` removeFlow: |- ``` removeFlow(flow: Flow): void ``` Removes the flow from the page Parameters * flow: Flow the flow to be removed from the page Returns void addRulerGuide: |- ``` addRulerGuide( orientation: RulerGuideOrientation, value: number, board?: Board, ): RulerGuide ``` Creates a new ruler guide. Parameters * orientation: RulerGuideOrientation * value: number * board: Board Returns RulerGuide removeRulerGuide: |- ``` removeRulerGuide(guide: RulerGuide): void ``` Removes the `guide` from the current page. Parameters * guide: RulerGuide Returns void addCommentThread: |- ``` 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. Parameters * content: string * position: Point Returns Promise removeCommentThread: |- ``` removeCommentThread(commentThread: CommentThread): Promise ``` Removes the comment thread. Requires the `comment:write` permission. Parameters * commentThread: CommentThread Returns Promise findCommentThreads: |- ``` findCommentThreads( criteria?: { onlyYours: boolean; showResolved: boolean }, ): Promise ``` 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. Parameters * criteria: { onlyYours: boolean; showResolved: boolean } Returns Promise getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] 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 ============== Represents a path shape in Penpot. 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: 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" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "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?: LayoutCellProperties; setParentIndex(index: number): void; tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[]): VariantContainer; 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 Summary) * ShapeBase + Path Referenced by: Context, ContextTypesUtils, Penpot, Shape members: Properties: type: |- ``` readonly type: "path" ``` The type of the shape, which is always 'path' for path shapes. content: |- ``` content: string ``` The content of the boolean shape, defined as the path string. Deprecated Use either `d` or `commands`. d: |- ``` d: string ``` The content of the boolean shape, defined as the path string. commands: |- ``` commands: PathCommand[] ``` The content of the boolean shape, defined as an array of path commands. fills: |- ``` fills: Fill[] ``` The fills applied to the shape. Overrides ShapeBase.fills id: |- ``` readonly id: string ``` The unique identifier of the shape. name: |- ``` name: string ``` The name of the shape. parent: |- ``` readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. For the root shape the parent is null parentIndex: |- ``` readonly parentIndex: number ``` Returns the index of the current shape in the parent x: |- ``` x: number ``` The x-coordinate of the shape's position. y: |- ``` y: number ``` The y-coordinate of the shape's position. width: |- ``` readonly width: number ``` The width of the shape. height: |- ``` readonly height: number ``` The height of the shape. bounds: |- ``` readonly bounds: Bounds ``` Returns Returns the bounding box surrounding the current shape center: |- ``` readonly center: Point ``` Returns Returns the geometric center of the shape blocked: |- ``` blocked: boolean ``` Indicates whether the shape is blocked. hidden: |- ``` hidden: boolean ``` Indicates whether the shape is hidden. visible: |- ``` visible: boolean ``` Indicates whether the shape is visible. proportionLock: |- ``` proportionLock: boolean ``` Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. borderRadius: |- ``` borderRadius: number ``` The border radius of the shape. borderRadiusTopLeft: |- ``` borderRadiusTopLeft: number ``` The border radius of the top-left corner of the shape. borderRadiusTopRight: |- ``` borderRadiusTopRight: number ``` The border radius of the top-right corner of the shape. borderRadiusBottomRight: |- ``` borderRadiusBottomRight: number ``` The border radius of the bottom-right corner of the shape. borderRadiusBottomLeft: |- ``` borderRadiusBottomLeft: number ``` The border radius of the bottom-left corner of the shape. opacity: |- ``` opacity: number ``` The opacity of the shape. blendMode: |- ``` blendMode: | "difference" | "normal" | "darken" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" ``` The blend mode applied to the shape. shadows: |- ``` shadows: Shadow[] ``` The shadows applied to the shape. blur: |- ``` blur?: Blur ``` The blur effect applied to the shape. exports: |- ``` exports: Export[] ``` The export settings of the shape. boardX: |- ``` boardX: number ``` The x-coordinate of the shape relative to its board. boardY: |- ``` boardY: number ``` The y-coordinate of the shape relative to its board. parentX: |- ``` parentX: number ``` The x-coordinate of the shape relative to its parent. parentY: |- ``` parentY: number ``` The y-coordinate of the shape relative to its parent. flipX: |- ``` flipX: boolean ``` Indicates whether the shape is flipped horizontally. flipY: |- ``` flipY: boolean ``` Indicates whether the shape is flipped vertically. rotation: |- ``` rotation: number ``` Returns Returns the rotation in degrees of the shape with respect to it's center. strokes: |- ``` strokes: Stroke[] ``` The strokes applied to the shape. layoutChild: |- ``` readonly layoutChild?: LayoutChildProperties ``` Layout properties for children of the shape. layoutCell: |- ``` readonly layoutCell?: LayoutCellProperties ``` Layout properties for cells in a grid layout. tokens: |- ``` readonly tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[] ``` The interactions for the current shape. Methods: toD: |- ``` toD(): string ``` Converts the path shape to its path data representation. Returns string Returns the path data (d attribute) as a string. Deprecated Use the `d` attribute getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] Returns an array of strings representing all the keys in the namespace. Example ``` const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); ``` setParentIndex: |- ``` 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. Parameters * index: number the new index for the shape to be in Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` Returns boolean Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` componentRefShape(): Shape | null ``` Returns Shape | null Returns the equivalent shape in the component main instance. If the current shape is inside a main instance will return `null`; componentRoot: |- ``` componentRoot(): Shape | null ``` 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. componentHead: |- ``` componentHead(): Shape | null ``` 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. component: |- ``` component(): LibraryComponent | null ``` Returns LibraryComponent | 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" Returns void swapComponent: |- ``` swapComponent(component: LibraryComponent): void ``` TODO Parameters * component: LibraryComponent Returns void switchVariant: |- ``` switchVariant(pos: number, value: string): void ``` Switch a VariantComponent copy to the nearest one that has the specified property value Parameters * pos: number The position of the poroperty to update * value: string The new value of the property Returns void combineAsVariants: |- ``` combineAsVariants(ids: string[]): VariantContainer ``` 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[] A list of ids of the main instances of the components to combine with this one. Returns VariantContainer The variant container created isVariantHead: |- ``` isVariantHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure, and that component is a VariantComponent resize: |- ``` resize(width: number, height: number): void ``` Resizes the shape to the specified width and height. Parameters * width: number The new width of the shape. * height: number The new height of the shape. Returns void Example ``` shape.resize(200, 100); ``` rotate: |- ``` rotate(angle: number, center?: { x: number; y: number } | null): void ``` Rotates the shape in relation with the given center. Parameters * angle: number Angle in degrees to rotate. * center: { x: number; y: number } | null Center of the transform rotation. If not send will use the geometri center of the shapes. Returns void Example ``` shape.rotate(45); ``` bringToFront: |- ``` bringToFront(): void ``` Moves the current shape to the front of its siblings Returns void bringForward: |- ``` bringForward(): void ``` Moves the current shape one position forward in its list of siblings Returns void sendToBack: |- ``` sendToBack(): void ``` Moves the current shape to the back of its siblings Returns void sendBackward: |- ``` sendBackward(): void ``` Moves the current shape one position backwards in its list of siblings Returns void export: |- ``` export(config: Export): Promise> ``` Generates an export from the current shape. Parameters * config: Export Returns Promise> Example ``` shape.export({ type: 'png', scale: 2 }); ``` addInteraction: |- ``` addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` Adds a new interaction to the shape. Parameters * trigger: Trigger defines the conditions under which the action will be triggered * action: Action defines what will be executed when the trigger happens * delay: number for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. Returns Interaction Example ``` shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); ``` removeInteraction: |- ``` removeInteraction(interaction: Interaction): void ``` Removes the interaction from the shape. Parameters * interaction: Interaction is the interaction to remove from the shape Returns void Example ``` shape.removeInteraction(interaction); ``` applyToken: |- ``` applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` Applies one design token to one or more properties of the shape. Parameters * token: Token is the Token to apply * properties: TokenProperty[] | undefined 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 ``` Creates a clone of the shape. Returns Shape Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` Removes the shape from its parent. Returns void PathCommand: overview: |- Interface PathCommand ===================== Represents a path command in Penpot. This interface includes a property for defining the type of command. ``` interface PathCommand { command: | "M" | "move-to" | "Z" | "close-path" | "L" | "line-to" | "H" | "line-to-horizontal" | "V" | "line-to-vertical" | "C" | "curve-to" | "S" | "smooth-curve-to" | "Q" | "quadratic-bezier-curve-to" | "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; }; } ``` Referenced by: Boolean, Path members: Properties: command: |- ``` command: | "M" | "move-to" | "Z" | "close-path" | "L" | "line-to" | "H" | "line-to-horizontal" | "V" | "line-to-vertical" | "C" | "curve-to" | "S" | "smooth-curve-to" | "Q" | "quadratic-bezier-curve-to" | "T" | "smooth-quadratic-bezier-curve-to" | "A" | "elliptical-arc" ``` The type of path command. Possible values include: * 'M' or 'move-to': Move to a new point. * 'Z' or 'close-path': Close the current path. * 'L' or 'line-to': Draw a straight line to a new point. * 'H' or 'line-to-horizontal': Draw a horizontal line to a new point. * 'V' or 'line-to-vertical': Draw a vertical line to a new point. * 'C' or 'curve-to': Draw a cubic Bezier curve to a new point. * 'S' or 'smooth-curve-to': Draw a smooth cubic Bezier curve to a new point. * 'Q' or 'quadratic-bezier-curve-to': Draw a quadratic Bezier curve to a new point. * 'T' or 'smooth-quadratic-bezier-curve-to': Draw a smooth quadratic Bezier curve to a new point. * 'A' or 'elliptical-arc': Draw an elliptical arc to a new point. Example ``` const pathCommand: PathCommand = { command: 'M', params: { x: 0, y: 0 } }; ``` params: |- ``` 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 * Optionalx?: number The x-coordinate of the point (or endpoint). * Optionaly?: number The y-coordinate of the point (or endpoint). * Optionalc1x?: number The x-coordinate of the first control point for curves. * Optionalc1y?: number The y-coordinate of the first control point for curves. * Optionalc2x?: number The x-coordinate of the second control point for curves. * Optionalc2y?: number The y-coordinate of the second control point for curves. * Optionalrx?: number The radius of the ellipse's x-axis. * Optionalry?: number The radius of the ellipse's y-axis. * OptionalxAxisRotation?: number The rotation angle of the ellipse's x-axis. * OptionallargeArcFlag?: boolean A flag indicating whether to use the larger arc. * OptionalsweepFlag?: boolean A flag indicating the direction of the arc. PluginData: overview: |- Interface 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[]; } ``` Hierarchy (View Summary) * PluginData + File + Library + LibraryElement + Page + ShapeBase members: Methods: getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] 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 ======================== It takes back to the last board shown. ``` interface PreviousScreen { type: "previous-screen"; } ``` Referenced by: Action members: Properties: type: |- ``` readonly type: "previous-screen" ``` The action type Push: overview: |- Interface Push ============== Push animation ``` interface Push { type: "push"; direction: "left" | "right" | "up" | "down"; duration: number; easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"; } ``` Referenced by: Animation members: Properties: type: |- ``` readonly type: "push" ``` Type of the animation direction: |- ``` readonly direction: "left" | "right" | "up" | "down" ``` Direction for the push animation duration: |- ``` readonly duration: number ``` Duration of the animation effect easing: |- ``` readonly easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" ``` Function that the dissolve effect will follow for the interpolation. Defaults to `linear` Rectangle: overview: |- Interface Rectangle =================== Represents a rectangle shape in Penpot. 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: 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" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "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?: LayoutCellProperties; setParentIndex(index: number): void; tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[]): VariantContainer; 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 Summary) * ShapeBase + Rectangle Referenced by: Context, ContextTypesUtils, Penpot, Shape members: Properties: type: |- ``` readonly type: "rectangle" ``` The type of the shape, which is always 'rect' for rectangle shapes. fills: |- ``` fills: Fill[] ``` The fills applied to the shape. Overrides ShapeBase.fills id: |- ``` readonly id: string ``` The unique identifier of the shape. name: |- ``` name: string ``` The name of the shape. parent: |- ``` readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. For the root shape the parent is null parentIndex: |- ``` readonly parentIndex: number ``` Returns the index of the current shape in the parent x: |- ``` x: number ``` The x-coordinate of the shape's position. y: |- ``` y: number ``` The y-coordinate of the shape's position. width: |- ``` readonly width: number ``` The width of the shape. height: |- ``` readonly height: number ``` The height of the shape. bounds: |- ``` readonly bounds: Bounds ``` Returns Returns the bounding box surrounding the current shape center: |- ``` readonly center: Point ``` Returns Returns the geometric center of the shape blocked: |- ``` blocked: boolean ``` Indicates whether the shape is blocked. hidden: |- ``` hidden: boolean ``` Indicates whether the shape is hidden. visible: |- ``` visible: boolean ``` Indicates whether the shape is visible. proportionLock: |- ``` proportionLock: boolean ``` Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. borderRadius: |- ``` borderRadius: number ``` The border radius of the shape. borderRadiusTopLeft: |- ``` borderRadiusTopLeft: number ``` The border radius of the top-left corner of the shape. borderRadiusTopRight: |- ``` borderRadiusTopRight: number ``` The border radius of the top-right corner of the shape. borderRadiusBottomRight: |- ``` borderRadiusBottomRight: number ``` The border radius of the bottom-right corner of the shape. borderRadiusBottomLeft: |- ``` borderRadiusBottomLeft: number ``` The border radius of the bottom-left corner of the shape. opacity: |- ``` opacity: number ``` The opacity of the shape. blendMode: |- ``` blendMode: | "difference" | "normal" | "darken" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" ``` The blend mode applied to the shape. shadows: |- ``` shadows: Shadow[] ``` The shadows applied to the shape. blur: |- ``` blur?: Blur ``` The blur effect applied to the shape. exports: |- ``` exports: Export[] ``` The export settings of the shape. boardX: |- ``` boardX: number ``` The x-coordinate of the shape relative to its board. boardY: |- ``` boardY: number ``` The y-coordinate of the shape relative to its board. parentX: |- ``` parentX: number ``` The x-coordinate of the shape relative to its parent. parentY: |- ``` parentY: number ``` The y-coordinate of the shape relative to its parent. flipX: |- ``` flipX: boolean ``` Indicates whether the shape is flipped horizontally. flipY: |- ``` flipY: boolean ``` Indicates whether the shape is flipped vertically. rotation: |- ``` rotation: number ``` Returns Returns the rotation in degrees of the shape with respect to it's center. strokes: |- ``` strokes: Stroke[] ``` The strokes applied to the shape. layoutChild: |- ``` readonly layoutChild?: LayoutChildProperties ``` Layout properties for children of the shape. layoutCell: |- ``` readonly layoutCell?: LayoutCellProperties ``` Layout properties for cells in a grid layout. tokens: |- ``` readonly tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[] ``` The interactions for the current shape. Methods: getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] Returns an array of strings representing all the keys in the namespace. Example ``` const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); ``` setParentIndex: |- ``` 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. Parameters * index: number the new index for the shape to be in Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` Returns boolean Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` componentRefShape(): Shape | null ``` Returns Shape | null Returns the equivalent shape in the component main instance. If the current shape is inside a main instance will return `null`; componentRoot: |- ``` componentRoot(): Shape | null ``` 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. componentHead: |- ``` componentHead(): Shape | null ``` 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. component: |- ``` component(): LibraryComponent | null ``` Returns LibraryComponent | 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" Returns void swapComponent: |- ``` swapComponent(component: LibraryComponent): void ``` TODO Parameters * component: LibraryComponent Returns void switchVariant: |- ``` switchVariant(pos: number, value: string): void ``` Switch a VariantComponent copy to the nearest one that has the specified property value Parameters * pos: number The position of the poroperty to update * value: string The new value of the property Returns void combineAsVariants: |- ``` combineAsVariants(ids: string[]): VariantContainer ``` 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[] A list of ids of the main instances of the components to combine with this one. Returns VariantContainer The variant container created isVariantHead: |- ``` isVariantHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure, and that component is a VariantComponent resize: |- ``` resize(width: number, height: number): void ``` Resizes the shape to the specified width and height. Parameters * width: number The new width of the shape. * height: number The new height of the shape. Returns void Example ``` shape.resize(200, 100); ``` rotate: |- ``` rotate(angle: number, center?: { x: number; y: number } | null): void ``` Rotates the shape in relation with the given center. Parameters * angle: number Angle in degrees to rotate. * center: { x: number; y: number } | null Center of the transform rotation. If not send will use the geometri center of the shapes. Returns void Example ``` shape.rotate(45); ``` bringToFront: |- ``` bringToFront(): void ``` Moves the current shape to the front of its siblings Returns void bringForward: |- ``` bringForward(): void ``` Moves the current shape one position forward in its list of siblings Returns void sendToBack: |- ``` sendToBack(): void ``` Moves the current shape to the back of its siblings Returns void sendBackward: |- ``` sendBackward(): void ``` Moves the current shape one position backwards in its list of siblings Returns void export: |- ``` export(config: Export): Promise> ``` Generates an export from the current shape. Parameters * config: Export Returns Promise> Example ``` shape.export({ type: 'png', scale: 2 }); ``` addInteraction: |- ``` addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` Adds a new interaction to the shape. Parameters * trigger: Trigger defines the conditions under which the action will be triggered * action: Action defines what will be executed when the trigger happens * delay: number for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. Returns Interaction Example ``` shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); ``` removeInteraction: |- ``` removeInteraction(interaction: Interaction): void ``` Removes the interaction from the shape. Parameters * interaction: Interaction is the interaction to remove from the shape Returns void Example ``` shape.removeInteraction(interaction); ``` applyToken: |- ``` applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` Applies one design token to one or more properties of the shape. Parameters * token: Token is the Token to apply * properties: TokenProperty[] | undefined 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 ``` Creates a clone of the shape. Returns Shape Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` Removes the shape from its parent. Returns void RulerGuide: overview: |- Interface RulerGuide ==================== Represents a ruler guide. These are horizontal or vertical lines that can be used to position elements in the UI. ``` interface RulerGuide { orientation: RulerGuideOrientation; position: number; board?: Board; } ``` Referenced by: Board, Page, VariantContainer members: Properties: orientation: |- ``` readonly orientation: RulerGuideOrientation ``` `orientation` indicates whether the ruler is either `horizontal` or `vertical` position: |- ``` position: number ``` `position` is the position in the axis in absolute positioning. If this is a board guide will return the positioning relative to the board. board: |- ``` board?: Board ``` If the guide is attached to a board this will retrieve the board shape Shadow: overview: |- Interface Shadow ================ Represents shadow properties in Penpot. 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; } ``` Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer members: Properties: id: |- ``` id?: string ``` The optional unique identifier for the shadow. style: |- ``` style?: "drop-shadow" | "inner-shadow" ``` The optional style of the shadow. * 'drop-shadow': A shadow cast outside the element. * 'inner-shadow': A shadow cast inside the element. offsetX: |- ``` offsetX?: number ``` The optional X-axis offset of the shadow. offsetY: |- ``` offsetY?: number ``` The optional Y-axis offset of the shadow. blur: |- ``` blur?: number ``` The optional blur radius of the shadow. spread: |- ``` spread?: number ``` The optional spread radius of the shadow. hidden: |- ``` hidden?: boolean ``` Specifies whether the shadow is hidden. Defaults to false if omitted. color: |- ``` color?: Color ``` The optional color of the shadow, defined by a Color object. ShapeBase: overview: |- Interface ShapeBase =================== Represents the base properties and methods of a shape in Penpot. 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: 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" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "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?: LayoutCellProperties; setParentIndex(index: number): void; tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[]): VariantContainer; 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 Summary) * PluginData + ShapeBase - Board - Boolean - Ellipse - Group - Image - Path - Rectangle - SvgRaw - Text members: Properties: id: |- ``` readonly id: string ``` The unique identifier of the shape. name: |- ``` name: string ``` The name of the shape. parent: |- ``` readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. For the root shape the parent is null parentIndex: |- ``` readonly parentIndex: number ``` Returns the index of the current shape in the parent x: |- ``` x: number ``` The x-coordinate of the shape's position. y: |- ``` y: number ``` The y-coordinate of the shape's position. width: |- ``` readonly width: number ``` The width of the shape. height: |- ``` readonly height: number ``` The height of the shape. bounds: |- ``` readonly bounds: Bounds ``` Returns Returns the bounding box surrounding the current shape center: |- ``` readonly center: Point ``` Returns Returns the geometric center of the shape blocked: |- ``` blocked: boolean ``` Indicates whether the shape is blocked. hidden: |- ``` hidden: boolean ``` Indicates whether the shape is hidden. visible: |- ``` visible: boolean ``` Indicates whether the shape is visible. proportionLock: |- ``` proportionLock: boolean ``` Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. borderRadius: |- ``` borderRadius: number ``` The border radius of the shape. borderRadiusTopLeft: |- ``` borderRadiusTopLeft: number ``` The border radius of the top-left corner of the shape. borderRadiusTopRight: |- ``` borderRadiusTopRight: number ``` The border radius of the top-right corner of the shape. borderRadiusBottomRight: |- ``` borderRadiusBottomRight: number ``` The border radius of the bottom-right corner of the shape. borderRadiusBottomLeft: |- ``` borderRadiusBottomLeft: number ``` The border radius of the bottom-left corner of the shape. opacity: |- ``` opacity: number ``` The opacity of the shape. blendMode: |- ``` blendMode: | "difference" | "normal" | "darken" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" ``` The blend mode applied to the shape. shadows: |- ``` shadows: Shadow[] ``` The shadows applied to the shape. blur: |- ``` blur?: Blur ``` The blur effect applied to the shape. exports: |- ``` exports: Export[] ``` The export settings of the shape. boardX: |- ``` boardX: number ``` The x-coordinate of the shape relative to its board. boardY: |- ``` boardY: number ``` The y-coordinate of the shape relative to its board. parentX: |- ``` parentX: number ``` The x-coordinate of the shape relative to its parent. parentY: |- ``` parentY: number ``` The y-coordinate of the shape relative to its parent. flipX: |- ``` flipX: boolean ``` Indicates whether the shape is flipped horizontally. flipY: |- ``` flipY: boolean ``` Indicates whether the shape is flipped vertically. rotation: |- ``` rotation: number ``` Returns Returns the rotation in degrees of the shape with respect to it's center. fills: |- ``` fills: Fill[] | "mixed" ``` The fills applied to the shape. strokes: |- ``` strokes: Stroke[] ``` The strokes applied to the shape. layoutChild: |- ``` readonly layoutChild?: LayoutChildProperties ``` Layout properties for children of the shape. layoutCell: |- ``` readonly layoutCell?: LayoutCellProperties ``` Layout properties for cells in a grid layout. tokens: |- ``` readonly tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[] ``` The interactions for the current shape. Methods: getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] Returns an array of strings representing all the keys in the namespace. Example ``` const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); ``` setParentIndex: |- ``` 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. Parameters * index: number the new index for the shape to be in Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` Returns boolean Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` componentRefShape(): Shape | null ``` Returns Shape | null Returns the equivalent shape in the component main instance. If the current shape is inside a main instance will return `null`; componentRoot: |- ``` componentRoot(): Shape | null ``` 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. componentHead: |- ``` componentHead(): Shape | null ``` 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. component: |- ``` component(): LibraryComponent | null ``` Returns LibraryComponent | 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" Returns void swapComponent: |- ``` swapComponent(component: LibraryComponent): void ``` TODO Parameters * component: LibraryComponent Returns void switchVariant: |- ``` switchVariant(pos: number, value: string): void ``` Switch a VariantComponent copy to the nearest one that has the specified property value Parameters * pos: number The position of the poroperty to update * value: string The new value of the property Returns void combineAsVariants: |- ``` combineAsVariants(ids: string[]): VariantContainer ``` 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[] A list of ids of the main instances of the components to combine with this one. Returns VariantContainer The variant container created isVariantHead: |- ``` isVariantHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure, and that component is a VariantComponent resize: |- ``` resize(width: number, height: number): void ``` Resizes the shape to the specified width and height. Parameters * width: number The new width of the shape. * height: number The new height of the shape. Returns void Example ``` shape.resize(200, 100); ``` rotate: |- ``` rotate(angle: number, center?: { x: number; y: number } | null): void ``` Rotates the shape in relation with the given center. Parameters * angle: number Angle in degrees to rotate. * center: { x: number; y: number } | null Center of the transform rotation. If not send will use the geometri center of the shapes. Returns void Example ``` shape.rotate(45); ``` bringToFront: |- ``` bringToFront(): void ``` Moves the current shape to the front of its siblings Returns void bringForward: |- ``` bringForward(): void ``` Moves the current shape one position forward in its list of siblings Returns void sendToBack: |- ``` sendToBack(): void ``` Moves the current shape to the back of its siblings Returns void sendBackward: |- ``` sendBackward(): void ``` Moves the current shape one position backwards in its list of siblings Returns void export: |- ``` export(config: Export): Promise> ``` Generates an export from the current shape. Parameters * config: Export Returns Promise> Example ``` shape.export({ type: 'png', scale: 2 }); ``` addInteraction: |- ``` addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` Adds a new interaction to the shape. Parameters * trigger: Trigger defines the conditions under which the action will be triggered * action: Action defines what will be executed when the trigger happens * delay: number for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. Returns Interaction Example ``` shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); ``` removeInteraction: |- ``` removeInteraction(interaction: Interaction): void ``` Removes the interaction from the shape. Parameters * interaction: Interaction is the interaction to remove from the shape Returns void Example ``` shape.removeInteraction(interaction); ``` applyToken: |- ``` applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` Applies one design token to one or more properties of the shape. Parameters * token: Token is the Token to apply * properties: TokenProperty[] | undefined 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 ``` Creates a clone of the shape. Returns Shape Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` Removes the shape from its parent. Returns void Slide: overview: |- Interface 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"; } ``` Referenced by: Animation members: Properties: type: |- ``` readonly type: "slide" ``` Type of the animation. way: |- ``` readonly way: "in" | "out" ``` Indicate if the slide will be either in-to-out `in` or out-to-in `out`. direction: |- ``` readonly direction: "left" | "right" | "up" | "down" ``` Direction for the slide animation. duration: |- ``` readonly duration: number ``` Duration of the animation effect. offsetEffect: |- ``` readonly offsetEffect?: boolean ``` If `true` the offset effect will be used. easing: |- ``` readonly easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" ``` Function that the dissolve effect will follow for the interpolation. Defaults to `linear`. Stroke: overview: |- Interface Stroke ================ Represents stroke properties in Penpot. You can add a stroke to any shape except for groups. 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?: "none" | "svg" | "mixed" | "solid" | "dotted" | "dashed"; strokeWidth?: number; strokeAlignment?: "center" | "inner" | "outer"; strokeCapStart?: StrokeCap; strokeCapEnd?: StrokeCap; strokeColorGradient?: Gradient; } ``` Referenced by: Board, Boolean, Ellipse, Group, Image, LibraryColor, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer members: Properties: strokeColor: |- ``` strokeColor?: string ``` The optional color of the stroke, represented as a string (e.g., '#FF5733'). strokeColorRefFile: |- ``` strokeColorRefFile?: string ``` The optional reference to an external file for the stroke color. strokeColorRefId: |- ``` strokeColorRefId?: string ``` The optional reference ID within the external file for the stroke color. strokeOpacity: |- ``` strokeOpacity?: number ``` The optional opacity level of the stroke color, ranging from 0 (fully transparent) to 1 (fully opaque). Defaults to 1 if omitted. strokeStyle: |- ``` strokeStyle?: "none" | "svg" | "mixed" | "solid" | "dotted" | "dashed" ``` The optional style of the stroke. strokeWidth: |- ``` strokeWidth?: number ``` The optional width of the stroke. strokeAlignment: |- ``` strokeAlignment?: "center" | "inner" | "outer" ``` The optional alignment of the stroke relative to the shape's boundary. strokeCapStart: |- ``` strokeCapStart?: StrokeCap ``` The optional cap style for the start of the stroke. strokeCapEnd: |- ``` strokeCapEnd?: StrokeCap ``` The optional cap style for the end of the stroke. strokeColorGradient: |- ``` strokeColorGradient?: Gradient ``` The optional gradient stroke defined by a Gradient object. SvgRaw: overview: |- Interface SvgRaw ================ Represents an SVG raw shape in Penpot. 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: 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" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "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?: LayoutCellProperties; setParentIndex(index: number): void; tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[]): VariantContainer; 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 Summary) * ShapeBase + SvgRaw Referenced by: ContextTypesUtils, Shape members: Properties: id: |- ``` readonly id: string ``` The unique identifier of the shape. name: |- ``` name: string ``` The name of the shape. parent: |- ``` readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. For the root shape the parent is null parentIndex: |- ``` readonly parentIndex: number ``` Returns the index of the current shape in the parent x: |- ``` x: number ``` The x-coordinate of the shape's position. y: |- ``` y: number ``` The y-coordinate of the shape's position. width: |- ``` readonly width: number ``` The width of the shape. height: |- ``` readonly height: number ``` The height of the shape. bounds: |- ``` readonly bounds: Bounds ``` Returns Returns the bounding box surrounding the current shape center: |- ``` readonly center: Point ``` Returns Returns the geometric center of the shape blocked: |- ``` blocked: boolean ``` Indicates whether the shape is blocked. hidden: |- ``` hidden: boolean ``` Indicates whether the shape is hidden. visible: |- ``` visible: boolean ``` Indicates whether the shape is visible. proportionLock: |- ``` proportionLock: boolean ``` Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. borderRadius: |- ``` borderRadius: number ``` The border radius of the shape. borderRadiusTopLeft: |- ``` borderRadiusTopLeft: number ``` The border radius of the top-left corner of the shape. borderRadiusTopRight: |- ``` borderRadiusTopRight: number ``` The border radius of the top-right corner of the shape. borderRadiusBottomRight: |- ``` borderRadiusBottomRight: number ``` The border radius of the bottom-right corner of the shape. borderRadiusBottomLeft: |- ``` borderRadiusBottomLeft: number ``` The border radius of the bottom-left corner of the shape. opacity: |- ``` opacity: number ``` The opacity of the shape. blendMode: |- ``` blendMode: | "difference" | "normal" | "darken" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" ``` The blend mode applied to the shape. shadows: |- ``` shadows: Shadow[] ``` The shadows applied to the shape. blur: |- ``` blur?: Blur ``` The blur effect applied to the shape. exports: |- ``` exports: Export[] ``` The export settings of the shape. boardX: |- ``` boardX: number ``` The x-coordinate of the shape relative to its board. boardY: |- ``` boardY: number ``` The y-coordinate of the shape relative to its board. parentX: |- ``` parentX: number ``` The x-coordinate of the shape relative to its parent. parentY: |- ``` parentY: number ``` The y-coordinate of the shape relative to its parent. flipX: |- ``` flipX: boolean ``` Indicates whether the shape is flipped horizontally. flipY: |- ``` flipY: boolean ``` Indicates whether the shape is flipped vertically. rotation: |- ``` rotation: number ``` Returns Returns the rotation in degrees of the shape with respect to it's center. fills: |- ``` fills: Fill[] | "mixed" ``` The fills applied to the shape. strokes: |- ``` strokes: Stroke[] ``` The strokes applied to the shape. layoutChild: |- ``` readonly layoutChild?: LayoutChildProperties ``` Layout properties for children of the shape. layoutCell: |- ``` readonly layoutCell?: LayoutCellProperties ``` Layout properties for cells in a grid layout. tokens: |- ``` readonly tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[] ``` The interactions for the current shape. type: |- ``` type: "svg-raw" ``` Methods: getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] Returns an array of strings representing all the keys in the namespace. Example ``` const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); ``` setParentIndex: |- ``` 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. Parameters * index: number the new index for the shape to be in Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` Returns boolean Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` componentRefShape(): Shape | null ``` Returns Shape | null Returns the equivalent shape in the component main instance. If the current shape is inside a main instance will return `null`; componentRoot: |- ``` componentRoot(): Shape | null ``` 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. componentHead: |- ``` componentHead(): Shape | null ``` 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. component: |- ``` component(): LibraryComponent | null ``` Returns LibraryComponent | 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" Returns void swapComponent: |- ``` swapComponent(component: LibraryComponent): void ``` TODO Parameters * component: LibraryComponent Returns void switchVariant: |- ``` switchVariant(pos: number, value: string): void ``` Switch a VariantComponent copy to the nearest one that has the specified property value Parameters * pos: number The position of the poroperty to update * value: string The new value of the property Returns void combineAsVariants: |- ``` combineAsVariants(ids: string[]): VariantContainer ``` 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[] A list of ids of the main instances of the components to combine with this one. Returns VariantContainer The variant container created isVariantHead: |- ``` isVariantHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure, and that component is a VariantComponent resize: |- ``` resize(width: number, height: number): void ``` Resizes the shape to the specified width and height. Parameters * width: number The new width of the shape. * height: number The new height of the shape. Returns void Example ``` shape.resize(200, 100); ``` rotate: |- ``` rotate(angle: number, center?: { x: number; y: number } | null): void ``` Rotates the shape in relation with the given center. Parameters * angle: number Angle in degrees to rotate. * center: { x: number; y: number } | null Center of the transform rotation. If not send will use the geometri center of the shapes. Returns void Example ``` shape.rotate(45); ``` bringToFront: |- ``` bringToFront(): void ``` Moves the current shape to the front of its siblings Returns void bringForward: |- ``` bringForward(): void ``` Moves the current shape one position forward in its list of siblings Returns void sendToBack: |- ``` sendToBack(): void ``` Moves the current shape to the back of its siblings Returns void sendBackward: |- ``` sendBackward(): void ``` Moves the current shape one position backwards in its list of siblings Returns void export: |- ``` export(config: Export): Promise> ``` Generates an export from the current shape. Parameters * config: Export Returns Promise> Example ``` shape.export({ type: 'png', scale: 2 }); ``` addInteraction: |- ``` addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` Adds a new interaction to the shape. Parameters * trigger: Trigger defines the conditions under which the action will be triggered * action: Action defines what will be executed when the trigger happens * delay: number for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. Returns Interaction Example ``` shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); ``` removeInteraction: |- ``` removeInteraction(interaction: Interaction): void ``` Removes the interaction from the shape. Parameters * interaction: Interaction is the interaction to remove from the shape Returns void Example ``` shape.removeInteraction(interaction); ``` applyToken: |- ``` applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` Applies one design token to one or more properties of the shape. Parameters * token: Token is the Token to apply * properties: TokenProperty[] | undefined 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 ``` Creates a clone of the shape. Returns Shape Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` Removes the shape from its parent. Returns void Text: overview: |- Interface Text ============== Text represents a text element in the Penpot application, extending the base shape interface. 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: 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" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "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?: LayoutCellProperties; setParentIndex(index: number): void; tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[]): VariantContainer; 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; textBounds: { x: number; y: number; width: number; height: number }; getRange(start: number, end: number): TextRange; applyTypography(typography: LibraryTypography): void; } ``` Hierarchy (View Summary) * ShapeBase + Text Referenced by: Context, ContextTypesUtils, Font, Penpot, Shape, TextRange members: Properties: id: |- ``` readonly id: string ``` The unique identifier of the shape. name: |- ``` name: string ``` The name of the shape. parent: |- ``` readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. For the root shape the parent is null parentIndex: |- ``` readonly parentIndex: number ``` Returns the index of the current shape in the parent x: |- ``` x: number ``` The x-coordinate of the shape's position. y: |- ``` y: number ``` The y-coordinate of the shape's position. width: |- ``` readonly width: number ``` The width of the shape. height: |- ``` readonly height: number ``` The height of the shape. bounds: |- ``` readonly bounds: Bounds ``` Returns Returns the bounding box surrounding the current shape center: |- ``` readonly center: Point ``` Returns Returns the geometric center of the shape blocked: |- ``` blocked: boolean ``` Indicates whether the shape is blocked. hidden: |- ``` hidden: boolean ``` Indicates whether the shape is hidden. visible: |- ``` visible: boolean ``` Indicates whether the shape is visible. proportionLock: |- ``` proportionLock: boolean ``` Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. borderRadius: |- ``` borderRadius: number ``` The border radius of the shape. borderRadiusTopLeft: |- ``` borderRadiusTopLeft: number ``` The border radius of the top-left corner of the shape. borderRadiusTopRight: |- ``` borderRadiusTopRight: number ``` The border radius of the top-right corner of the shape. borderRadiusBottomRight: |- ``` borderRadiusBottomRight: number ``` The border radius of the bottom-right corner of the shape. borderRadiusBottomLeft: |- ``` borderRadiusBottomLeft: number ``` The border radius of the bottom-left corner of the shape. opacity: |- ``` opacity: number ``` The opacity of the shape. blendMode: |- ``` blendMode: | "difference" | "normal" | "darken" | "multiply" | "color-burn" | "lighten" | "screen" | "color-dodge" | "overlay" | "soft-light" | "hard-light" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" ``` The blend mode applied to the shape. shadows: |- ``` shadows: Shadow[] ``` The shadows applied to the shape. blur: |- ``` blur?: Blur ``` The blur effect applied to the shape. exports: |- ``` exports: Export[] ``` The export settings of the shape. boardX: |- ``` boardX: number ``` The x-coordinate of the shape relative to its board. boardY: |- ``` boardY: number ``` The y-coordinate of the shape relative to its board. parentX: |- ``` parentX: number ``` The x-coordinate of the shape relative to its parent. parentY: |- ``` parentY: number ``` The y-coordinate of the shape relative to its parent. flipX: |- ``` flipX: boolean ``` Indicates whether the shape is flipped horizontally. flipY: |- ``` flipY: boolean ``` Indicates whether the shape is flipped vertically. rotation: |- ``` rotation: number ``` Returns Returns the rotation in degrees of the shape with respect to it's center. fills: |- ``` fills: Fill[] | "mixed" ``` The fills applied to the shape. strokes: |- ``` strokes: Stroke[] ``` The strokes applied to the shape. layoutChild: |- ``` readonly layoutChild?: LayoutChildProperties ``` Layout properties for children of the shape. layoutCell: |- ``` readonly layoutCell?: LayoutCellProperties ``` Layout properties for cells in a grid layout. tokens: |- ``` readonly tokens: { width: string; height: string; fill: string; x: string; y: string; all: string; borderRadiusTopLeft: string; borderRadiusTopRight: string; borderRadiusBottomRight: string; borderRadiusBottomLeft: string; shadow: string; strokeColor: string; strokeWidth: string; fontFamilies: string; fontSize: string; fontWeight: string; letterSpacing: string; rotation: string; opacity: string; layoutItemMinW: string; layoutItemMaxW: string; layoutItemMinH: string; layoutItemMaxH: string; rowGap: string; columnGap: string; paddingLeft: string; paddingTop: string; paddingRight: string; paddingBottom: string; marginLeft: string; marginTop: string; marginRight: string; marginBottom: string; textCase: string; textDecoration: string; typography: 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[] ``` The interactions for the current shape. type: |- ``` readonly type: "text" ``` The type of the shape, which is always 'text' for text shapes. characters: |- ``` characters: string ``` The characters contained within the text shape. growType: |- ``` growType: "fixed" | "auto-width" | "auto-height" ``` The grow type of the text shape, defining how the text box adjusts its size. Possible values are: * 'fixed': Fixed size. * 'auto-width': Adjusts width automatically. * 'auto-height': Adjusts height automatically. fontId: |- ``` fontId: string ``` The font ID used in the text shape, or 'mixed' if multiple fonts are used. fontFamily: |- ``` fontFamily: string ``` The font family used in the text shape, or 'mixed' if multiple font families are used. fontVariantId: |- ``` fontVariantId: string ``` The font variant ID used in the text shape, or 'mixed' if multiple font variants are used. fontSize: |- ``` fontSize: string ``` The font size used in the text shape, or 'mixed' if multiple font sizes are used. fontWeight: |- ``` fontWeight: string ``` The font weight used in the text shape, or 'mixed' if multiple font weights are used. fontStyle: |- ``` fontStyle: "normal" | "italic" | "mixed" | null ``` The font style used in the text shape, or 'mixed' if multiple font styles are used. lineHeight: |- ``` lineHeight: string ``` The line height used in the text shape, or 'mixed' if multiple line heights are used. letterSpacing: |- ``` letterSpacing: string ``` The letter spacing used in the text shape, or 'mixed' if multiple letter spacings are used. textTransform: |- ``` textTransform: "mixed" | "uppercase" | "capitalize" | "lowercase" | null ``` The text transform applied to the text shape, or 'mixed' if multiple text transforms are used. textDecoration: |- ``` textDecoration: "mixed" | "underline" | "line-through" | null ``` The text decoration applied to the text shape, or 'mixed' if multiple text decorations are used. direction: |- ``` direction: "mixed" | "ltr" | "rtl" | null ``` The text direction for the text shape, or 'mixed' if multiple directions are used. align: |- ``` 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: "center" | "top" | "bottom" | null ``` The vertical alignment of the text shape. It can be a specific alignment or 'mixed' if multiple alignments are used. textBounds: |- ``` readonly textBounds: { x: number; y: number; width: number; height: number } ``` Return the bounding box for the text as a (x, y, width, height) rectangle This is the box that covers the text even if it overflows its selection rectangle. Methods: getPluginData: |- ``` getPluginData(key: string): string ``` Retrieves the data for our own plugin, given a specific key. Parameters * key: string The key for which to retrieve the data. Returns string Returns the data associated with the key as a string. Example ``` const data = shape.getPluginData('exampleKey');console.log(data); ``` setPluginData: |- ``` setPluginData(key: string, value: string): void ``` Sets the plugin-specific data for the given key. Parameters * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setPluginData('exampleKey', 'exampleValue'); ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` Retrieves all the keys for the plugin-specific data. Returns string[] Returns an array of strings representing all the keys. Example ``` const keys = shape.getPluginDataKeys();console.log(keys); ``` getSharedPluginData: |- ``` getSharedPluginData(namespace: string, key: string): string ``` If we know the namespace of an external plugin, this is the way to get their data. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to retrieve the data. Returns string Returns the shared data associated with the key as a string. Example ``` const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); ``` setSharedPluginData: |- ``` setSharedPluginData(namespace: string, key: string, value: string): void ``` Sets the shared plugin-specific data for the given namespace and key. Parameters * namespace: string The namespace for the shared data. * key: string The key for which to set the data. * value: string The data to set for the key. Returns void Example ``` shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); ``` getSharedPluginDataKeys: |- ``` getSharedPluginDataKeys(namespace: string): string[] ``` Retrieves all the keys for the shared plugin-specific data in the given namespace. Parameters * namespace: string The namespace for the shared data. Returns string[] Returns an array of strings representing all the keys in the namespace. Example ``` const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); ``` setParentIndex: |- ``` 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. Parameters * index: number the new index for the shape to be in Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` Returns boolean Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` Returns boolean Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` componentRefShape(): Shape | null ``` Returns Shape | null Returns the equivalent shape in the component main instance. If the current shape is inside a main instance will return `null`; componentRoot: |- ``` componentRoot(): Shape | null ``` 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. componentHead: |- ``` componentHead(): Shape | null ``` 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. component: |- ``` component(): LibraryComponent | null ``` Returns LibraryComponent | 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" Returns void swapComponent: |- ``` swapComponent(component: LibraryComponent): void ``` TODO Parameters * component: LibraryComponent Returns void switchVariant: |- ``` switchVariant(pos: number, value: string): void ``` Switch a VariantComponent copy to the nearest one that has the specified property value Parameters * pos: number The position of the poroperty to update * value: string The new value of the property Returns void combineAsVariants: |- ``` combineAsVariants(ids: string[]): VariantContainer ``` 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[] A list of ids of the main instances of the components to combine with this one. Returns VariantContainer The variant container created isVariantHead: |- ``` isVariantHead(): boolean ``` Returns boolean Returns true when the current shape is the head of a components tree nested structure, and that component is a VariantComponent resize: |- ``` resize(width: number, height: number): void ``` Resizes the shape to the specified width and height. Parameters * width: number The new width of the shape. * height: number The new height of the shape. Returns void Example ``` shape.resize(200, 100); ``` rotate: |- ``` rotate(angle: number, center?: { x: number; y: number } | null): void ``` Rotates the shape in relation with the given center. Parameters * angle: number Angle in degrees to rotate. * center: { x: number; y: number } | null Center of the transform rotation. If not send will use the geometri center of the shapes. Returns void Example ``` shape.rotate(45); ``` bringToFront: |- ``` bringToFront(): void ``` Moves the current shape to the front of its siblings Returns void bringForward: |- ``` bringForward(): void ``` Moves the current shape one position forward in its list of siblings Returns void sendToBack: |- ``` sendToBack(): void ``` Moves the current shape to the back of its siblings Returns void sendBackward: |- ``` sendBackward(): void ``` Moves the current shape one position backwards in its list of siblings Returns void export: |- ``` export(config: Export): Promise> ``` Generates an export from the current shape. Parameters * config: Export Returns Promise> Example ``` shape.export({ type: 'png', scale: 2 }); ``` addInteraction: |- ``` addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` Adds a new interaction to the shape. Parameters * trigger: Trigger defines the conditions under which the action will be triggered * action: Action defines what will be executed when the trigger happens * delay: number for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. Returns Interaction Example ``` shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); ``` removeInteraction: |- ``` removeInteraction(interaction: Interaction): void ``` Removes the interaction from the shape. Parameters * interaction: Interaction is the interaction to remove from the shape Returns void Example ``` shape.removeInteraction(interaction); ``` applyToken: |- ``` applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` Applies one design token to one or more properties of the shape. Parameters * token: Token is the Token to apply * properties: TokenProperty[] | undefined 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 ``` Creates a clone of the shape. Returns Shape Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` Removes the shape from its parent. Returns void getRange: |- ``` getRange(start: number, end: number): TextRange ``` Gets a text range within the text shape. Parameters * start: number The start index of the text range. * end: number The end index of the text range. Returns TextRange Returns a TextRange object representing the specified text range. Example ``` const textRange = textShape.getRange(0, 10);console.log(textRange.characters); ``` applyTypography: |- ``` applyTypography(typography: LibraryTypography): void ``` Applies a typography style to the text shape. Parameters * typography: LibraryTypography The typography style to apply. Returns void Remarks This method sets various typography properties for the text shape according to the given typography style. Example ``` textShape.applyTypography(typography); ``` TextRange: overview: |- Interface TextRange =================== Represents a range of text within a Text shape. 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: "normal" | "italic" | "mixed" | null; lineHeight: string; letterSpacing: string; textTransform: | "none" | "mixed" | "uppercase" | "capitalize" | "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; } ``` Referenced by: Font, LibraryTypography, Text members: Properties: shape: |- ``` readonly shape: Text ``` The Text shape to which this text range belongs. characters: |- ``` readonly characters: string ``` The characters associated with the current text range. fontId: |- ``` fontId: string ``` The font ID of the text range. It can be a specific font ID or 'mixed' if multiple fonts are used. fontFamily: |- ``` fontFamily: string ``` The font family of the text range. It can be a specific font family or 'mixed' if multiple font families are used. fontVariantId: |- ``` fontVariantId: string ``` The font variant ID of the text range. It can be a specific font variant ID or 'mixed' if multiple font variants are used. fontSize: |- ``` fontSize: string ``` The font size of the text range. It can be a specific font size or 'mixed' if multiple font sizes are used. fontWeight: |- ``` fontWeight: string ``` The font weight of the text range. It can be a specific font weight or 'mixed' if multiple font weights are used. fontStyle: |- ``` 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. lineHeight: |- ``` lineHeight: string ``` The line height of the text range. It can be a specific line height or 'mixed' if multiple line heights are used. letterSpacing: |- ``` letterSpacing: string ``` The letter spacing of the text range. It can be a specific letter spacing or 'mixed' if multiple letter spacings are used. textTransform: |- ``` 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: "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: "mixed" | "ltr" | "rtl" | null ``` The text direction for the text range. It can be a specific direction or 'mixed' if multiple directions are used. fills: |- ``` fills: Fill[] | "mixed" ``` The fill styles applied to the text range. align: |- ``` 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: "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: 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. Parameters * typography: LibraryTypography The typography style to apply. Returns void Example ``` textRange.applyTypography(typography); ``` ToggleOverlay: overview: |- Interface 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?: | "center" | "manual" | "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center"; manualPositionLocation?: Point; closeWhenClickOutside?: boolean; addBackgroundOverlay?: boolean; animation?: Animation; type: "toggle-overlay"; } ``` Hierarchy (View Summary) * OverlayAction + ToggleOverlay Referenced by: Action members: Properties: destination: |- ``` readonly destination: Board ``` Overlay board that will be opened. relativeTo: |- ``` readonly relativeTo?: Shape ``` Base shape to which the overlay will be positioned taking constraints into account. position: |- ``` readonly position?: | "center" | "manual" | "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center" ``` Positioning of the overlay. manualPositionLocation: |- ``` readonly manualPositionLocation?: Point ``` For `position = 'manual'` the location of the overlay. closeWhenClickOutside: |- ``` readonly closeWhenClickOutside?: boolean ``` When true the overlay will be closed when clicking outside addBackgroundOverlay: |- ``` readonly addBackgroundOverlay?: boolean ``` When true a background will be added to the overlay. animation: |- ``` readonly animation?: Animation ``` Animation displayed with this interaction. type: |- ``` readonly type: "toggle-overlay" ``` The action type Track: overview: |- Interface Track =============== Represents a track configuration in Penpot. This interface includes properties for defining the type and value of a track used in layout configurations. ``` interface Track { type: TrackType; value: number | null; } ``` Referenced by: GridLayout members: Properties: type: |- ``` type: TrackType ``` The type of the track. This can be one of the following values: * 'flex': A flexible track type. * 'fixed': A fixed track type. * 'percent': A track type defined by a percentage. * 'auto': An automatic track type. value: |- ``` value: number | null ``` 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "borderRadius"; value: string; resolvedValue: number | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "borderRadius" ``` 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: number | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "shadow"; value: string | TokenShadowValueString[]; resolvedValue: TokenShadowValue[] | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "shadow" ``` 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: TokenShadowValue[] | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "color"; value: string; resolvedValue: string | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "color" ``` 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: string | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "dimension"; value: string; resolvedValue: number | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "dimension" ``` 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: number | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "fontFamilies"; value: string | string[]; resolvedValue: string[] | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "fontFamilies" ``` 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: string[] | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "fontSizes"; value: string; resolvedValue: number | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "fontSizes" ``` 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: number | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "fontWeights"; value: string; resolvedValue: string | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "fontWeights" ``` 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: string | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "letterSpacing"; value: string; resolvedValue: number | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "letterSpacing" ``` 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: number | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "number"; value: string; resolvedValue: number | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "number" ``` 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: number | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "opacity"; value: string; resolvedValue: number | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "opacity" ``` 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: number | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "rotation"; value: string; resolvedValue: number | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "rotation" ``` 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: number | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "sizing"; value: string; resolvedValue: number | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "sizing" ``` 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: number | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "spacing"; value: string; resolvedValue: number | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "spacing" ``` 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: number | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "borderWidth"; value: string; resolvedValue: number | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "borderWidth" ``` 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: number | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "textCase"; value: string; resolvedValue: string | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "textCase" ``` 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: string | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "textDecoration"; value: string; resolvedValue: string | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "textDecoration" ``` 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: string | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * 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; } ``` 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; resolvedValueString: string | undefined; applyToShapes( shapes: Shape[], properties: TokenProperty[] | undefined, ): void; applyToSelected(properties: TokenProperty[] | undefined): void; type: "typography"; value: string | TokenTypographyValueString; resolvedValue: TokenTypographyValue[] | undefined; } ``` Hierarchy (View Summary) * 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. resolvedValueString: |- ``` readonly resolvedValueString: string | undefined ``` The value calculated by finding all tokens with the same name in active sets and resolving the references. It's converted to string, regardless of the data type of the value depending on the token type. It can be undefined if no value has been found in active sets. type: |- ``` readonly type: "typography" ``` 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: TokenTypographyValue[] | undefined ``` 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: Shape[], properties: TokenProperty[] | undefined): 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: TokenProperty[] | undefined 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: TokenProperty[] | undefined): void ``` Applies this token to the currently selected shapes. Parameters and warnings are the same as above. Parameters * properties: TokenProperty[] | undefined 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: { group: string; name: string }): TokenTheme; addSet(name: { name: string }): TokenSet; getThemeById(id: string): TokenTheme | undefined; getSetById(id: string): TokenSet | undefined; } ``` 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: { group: string; name: string }): TokenTheme ``` Creates a new TokenTheme and adds it to the catalog. Parameters * group: { group: string; name: string } The group name of the theme (can be empty string). Returns TokenTheme Returns the created TokenTheme. addSet: |- ``` addSet(name: { name: string }): TokenSet ``` Creates a new TokenSet and adds it to the catalog. Parameters * name: { 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: string): TokenTheme | undefined ``` Retrieves a theme. Parameters * id: string the id of the theme. Returns TokenTheme | undefined Returns the theme or undefined if not found. getSetById: |- ``` getSetById(id: string): TokenSet | undefined ``` Retrieves a set. Parameters * id: string the id of the set. Returns TokenSet | undefined 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): Token | undefined; addToken( type: { 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: string): Token | undefined ``` Retrieves a token. Parameters * id: string the id of the token. Returns Token | undefined Returns the token or undefined if not found. addToken: |- ``` addToken( type: { type: TokenType; name: string; value: TokenValueString }, ): Token ``` Creates a new Token and adds it to the set. Parameters * type: { type: TokenType; name: string; value: TokenValueString } Thetype of token. 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: string | undefined; 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: string | undefined ``` 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: TokenSet): void ``` Adds a set to the list of the theme. Parameters * tokenSet: TokenSet Returns void removeSet: |- ``` removeSet(tokenSet: 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 ============== Represents a user in Penpot. ``` interface User { id: string; name?: string; avatarUrl?: string; color: string; sessionId?: string; } ``` Hierarchy (View Summary) * User + ActiveUser Referenced by: Comment, CommentThread, Context, File, FileVersion, Penpot members: Properties: id: |- ``` readonly id: string ``` The unique identifier of the user. Example ``` const userId = user.id;console.log(userId); ``` name: |- ``` readonly name?: string ``` The name of the user. Example ``` const userName = user.name;console.log(userName); ``` avatarUrl: |- ``` readonly avatarUrl?: string ``` The URL of the user's avatar image. Example ``` const avatarUrl = user.avatarUrl;console.log(avatarUrl); ``` color: |- ``` readonly color: string ``` The color associated with the user. Example ``` const userColor = user.color;console.log(userColor); ``` sessionId: |- ``` readonly sessionId?: string ``` The session ID of the user. Example ``` const sessionId = user.sessionId;console.log(sessionId); ``` Variants: overview: |- Interface 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; } ``` Referenced by: LibraryVariantComponent, VariantContainer members: Properties: id: |- ``` readonly id: string ``` The unique identifier of the variant element. It is the id of the VariantContainer, and all the VariantComponents that belong to this variant have an attribute variantId which this is as value. libraryId: |- ``` readonly libraryId: string ``` The unique identifier of the library to which the variant belongs. properties: |- ``` properties: string[] ``` A list with the names of the properties of the Variant Methods: currentValues: |- ``` currentValues(property: string): string[] ``` A list of all the values of a property along all the variantComponents of this Variant Parameters * property: string The name of the property Returns string[] removeProperty: |- ``` removeProperty(pos: number): void ``` Remove a property of the Variant Parameters * pos: number The position of the property to remove Returns void renameProperty: |- ``` renameProperty(pos: number, name: string): void ``` Rename a property of the Variant Parameters * pos: number The position of the property to rename * name: string The new name of the property Returns void variantComponents: |- ``` variantComponents(): LibraryComponent[] ``` List all the VariantComponents on this Variant. Returns LibraryComponent[] addVariant: |- ``` addVariant(): void ``` Creates a duplicate of the main VariantComponent of this Variant Returns void addProperty: |- ``` addProperty(): void ``` Adds a new property to this Variant Returns void Viewport: overview: |- Interface Viewport ================== Viewport represents the viewport in the Penpot application. 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; } ``` Referenced by: Context, Penpot members: Properties: center: |- ``` center: Point ``` the `center` point of the current viewport. If changed will change the viewport position. zoom: |- ``` zoom: number ``` the `zoom` level as a number where `1` represents 100%. bounds: |- ``` readonly bounds: Bounds ``` the `bounds` are the current coordinates of the viewport. Methods: zoomReset: |- ``` zoomReset(): void ``` Resets the zoom level. Returns void zoomToFitAll: |- ``` zoomToFitAll(): void ``` Changes the viewport and zoom so can fit all the current shapes in the page. Returns void zoomIntoView: |- ``` zoomIntoView(shapes: Shape[]): void ``` Changes the viewport and zoom so all the `shapes` in the argument are visible. Parameters * shapes: Shape[] Returns void Action: overview: |- Type Alias Action ================= ``` Action: | NavigateTo | OpenOverlay | ToggleOverlay | CloseOverlay | PreviousScreen | OpenUrl ``` Type for all the possible types of actions in an interaction. Referenced by: Board, Boolean, Ellipse, Group, Image, Interaction, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer members: {} Animation: overview: |- Type Alias Animation ==================== ``` Animation: Dissolve | Slide | Push ``` Type of all the animations that can be added to an interaction. Referenced by: CloseOverlay, NavigateTo, OpenOverlay, OverlayAction, ToggleOverlay members: {} BooleanType: overview: |- Type Alias BooleanType ====================== ``` BooleanType: "union" | "difference" | "exclude" | "intersection" ``` Represents the boolean operation types available in Penpot. These types define how shapes can be combined or modified using boolean operations. Referenced by: Context, Penpot members: {} Bounds: overview: |- Type Alias Bounds ================= Bounds represents the boundaries of a rectangular area, defined by the coordinates of the top-left corner and the dimensions of the rectangle. 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: 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 =================== 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 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: 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 ================ ``` Guide: GuideColumn | GuideRow | GuideSquare ``` Represents a board guide in Penpot. This type can be one of several specific board guide types: column, row, or square. Referenced by: Board, VariantContainer members: {} ImageData: overview: |- Type Alias ImageData ==================== Represents image data in Penpot. This includes properties for defining the image's dimensions, metadata, and aspect ratio handling. ``` type ImageData = { name?: string; width: number; height: number; mtype?: string; id: string; keepAspectRatio?: boolean; data(): Promise>; } ``` Referenced by: Color, Context, Fill, LibraryColor, Penpot 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 ========================= 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 LibraryContext = { local: Library; connected: Library[]; availableLibraries(): Promise; connectLibrary(libraryId: string): Promise; } ``` Referenced by: Context, Penpot members: Properties: local: |- ``` readonly local: Library ``` The local library in the Penpot context. Example ``` const localLibrary = libraryContext.local; ``` connected: |- ``` readonly connected: Library[] ``` An array of connected libraries in the Penpot context. Example ``` const connectedLibraries = libraryContext.connected; ``` Methods: availableLibraries: |- ``` availableLibraries(): Promise ``` Retrieves a summary of available libraries that can be connected to. Returns Promise Returns a promise that resolves to an array of `LibrarySummary` objects representing available libraries. Example ``` const availableLibraries = await libraryContext.availableLibraries(); ``` connectLibrary: |- ``` connectLibrary(libraryId: string): Promise ``` Connects to a specific library identified by its ID. Parameters * libraryId: string The ID of the library to connect to. Returns Promise Returns a promise that resolves to the `Library` object representing the connected library. Example ``` const connectedLibrary = await libraryContext.connectLibrary('library-id'); ``` Point: overview: |- Type Alias Point ================ Point represents a point in 2D space, typically with x and y coordinates. ``` type Point = { x: number; y: number; } ``` Referenced by: Board, Boolean, CommentThread, Ellipse, Group, Image, OpenOverlay, OverlayAction, Page, Path, Rectangle, ShapeBase, SvgRaw, Text, ToggleOverlay, VariantContainer, Viewport members: Properties: x: |- ``` x: number ``` y: |- ``` y: number ``` RulerGuideOrientation: overview: |- Type Alias RulerGuideOrientation ================================ ``` RulerGuideOrientation: "horizontal" | "vertical" ``` Referenced by: Board, Page, RulerGuide, VariantContainer members: {} Shape: overview: |- Type Alias Shape ================ ``` Shape: | Board | Group | Boolean | Rectangle | Path | Text | Ellipse | SvgRaw | Image ``` Shape represents a union of various shape types used in the Penpot project. This type allows for different shapes to be handled under a single type umbrella. Example ``` 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, TokenBase, TokenBorderRadius, TokenBorderWidth, TokenColor, TokenDimension, TokenFontFamilies, TokenFontSizes, TokenFontWeights, TokenLetterSpacing, TokenNumber, TokenOpacity, TokenRotation, TokenShadow, TokenSizing, TokenSpacing, TokenTextCase, TokenTextDecoration, TokenTypography, VariantContainer, Viewport members: {} StrokeCap: overview: |- Type Alias StrokeCap ==================== ``` StrokeCap: | "round" | "square" | "line-arrow" | "triangle-arrow" | "square-marker" | "circle-marker" | "diamond-marker" ``` Represents the cap style of a stroke in Penpot. This type defines various styles for the ends of a stroke. Referenced by: Stroke members: {} Theme: overview: |- Type Alias Theme ================ ``` Theme: "light" | "dark" ``` This type specifies the possible themes: 'light' or 'dark'. Referenced by: Context, EventsMap, Penpot members: {} TrackType: overview: |- Type Alias TrackType ==================== ``` TrackType: "flex" | "fixed" | "percent" | "auto" ``` Represents the type of track in Penpot. This type defines various track types that can be used in layout configurations. Referenced by: GridLayout, Track members: {} Trigger: overview: |- Type Alias Trigger ================== ``` Trigger: "click" | "mouse-enter" | "mouse-leave" | "after-delay" ``` Types of triggers defined: * `click` triggers when the user uses the mouse to click on a shape * `mouse-enter` triggers when the user moves the mouse inside the shape (even if no mouse button is pressed) * `mouse-leave` triggers when the user moves the mouse outside the shape. * `after-delay` triggers after the `delay` time has passed even if no interaction from the user happens. 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: | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" ``` The properties that a BorderRadius token can be applied to. Referenced by: TokenProperty members: {} TokenShadowProps: overview: |- Type Alias TokenShadowProps =========================== ``` TokenShadowProps: "shadow" ``` The properties that a Shadow token can be applied to. Referenced by: TokenProperty members: {} TokenColorProps: overview: |- Type Alias TokenColorProps ========================== ``` TokenColorProps: "fill" | "strokeColor" ``` The properties that a Color token can be applied to. Referenced by: TokenProperty members: {} TokenDimensionProps: overview: |- Type Alias TokenDimensionProps ============================== ``` TokenDimensionProps: "x" | "y" | "strokeWidth" ``` The properties that a Dimension token can be applied to. Referenced by: TokenProperty members: {} TokenFontFamiliesProps: overview: |- Type Alias TokenFontFamiliesProps ================================= ``` TokenFontFamiliesProps: "fontFamilies" ``` The properties that a FontFamilies token can be applied to. Referenced by: TokenProperty members: {} TokenFontSizesProps: overview: |- Type Alias TokenFontSizesProps ============================== ``` TokenFontSizesProps: "fontSize" ``` The properties that a FontSizes token can be applied to. Referenced by: TokenProperty members: {} TokenFontWeightProps: overview: |- Type Alias TokenFontWeightProps =============================== ``` TokenFontWeightProps: "fontWeight" ``` The properties that a FontWeight token can be applied to. Referenced by: TokenProperty members: {} TokenLetterSpacingProps: overview: |- Type Alias TokenLetterSpacingProps ================================== ``` TokenLetterSpacingProps: "letterSpacing" ``` The properties that a LetterSpacing token can be applied to. Referenced by: TokenProperty members: {} TokenNumberProps: overview: |- Type Alias TokenNumberProps =========================== ``` TokenNumberProps: "rotation" ``` The properties that a Number token can be applied to. Referenced by: TokenProperty members: {} TokenOpacityProps: overview: |- Type Alias TokenOpacityProps ============================ ``` TokenOpacityProps: "opacity" ``` The properties that an Opacity token can be applied to. Referenced by: TokenProperty members: {} TokenSizingProps: overview: |- Type Alias TokenSizingProps =========================== ``` TokenSizingProps: | "width" | "height" | "layoutItemMinW" | "layoutItemMaxW" | "layoutItemMinH" | "layoutItemMaxH" ``` The properties that a Sizing token can be applied to. Referenced by: TokenProperty members: {} TokenSpacingProps: overview: |- Type Alias TokenSpacingProps ============================ ``` TokenSpacingProps: | "rowGap" | "columnGap" | "paddingLeft" | "paddingTop" | "paddingRight" | "paddingBottom" | "marginLeft" | "marginTop" | "marginRight" | "marginBottom" ``` The properties that a Spacing token can be applied to. Referenced by: TokenProperty members: {} TokenBorderWidthProps: overview: |- Type Alias TokenBorderWidthProps ================================ ``` TokenBorderWidthProps: "strokeWidth" ``` The properties that a BorderWidth token can be applied to. Referenced by: TokenProperty members: {} TokenTextCaseProps: overview: |- Type Alias TokenTextCaseProps ============================= ``` TokenTextCaseProps: "textCase" ``` The properties that a TextCase token can be applied to. Referenced by: TokenProperty members: {} TokenTextDecorationProps: overview: |- Type Alias TokenTextDecorationProps =================================== ``` TokenTextDecorationProps: "textDecoration" ``` The properties that a TextDecoration token can be applied to. Referenced by: TokenProperty members: {} TokenTypographyProps: overview: |- Type Alias TokenTypographyProps =============================== ``` TokenTypographyProps: "typography" ``` 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: {}