From a5a084cf0f5cf33ab12be0304230ce6059f1c73b Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Tue, 10 Feb 2026 15:05:24 +0100 Subject: [PATCH] :sparkles: Update API type information based on current repo state --- mcp/packages/server/data/api_types.yml | 15496 +++++++++++------------ 1 file changed, 7690 insertions(+), 7806 deletions(-) diff --git a/mcp/packages/server/data/api_types.yml b/mcp/packages/server/data/api_types.yml index 603abdaf0f..912adaa95a 100644 --- a/mcp/packages/server/data/api_types.yml +++ b/mcp/packages/server/data/api_types.yml @@ -6,70 +6,84 @@ Penpot: These are methods and properties available on the `penpot` global object. ``` - interface Penpot { - ui: { - open: ((name: string, url: string, options?: { - width: number; - height: number; - }) => void); - size: null | { - width: number; - height: number; - }; - resize: ((width: number, height: number) => void); - sendMessage: ((message: unknown) => void); - onMessage: ((callback: ((message: T) => void)) => void); - }; - utils: ContextUtils; - closePlugin: (() => void); - on(type: T, callback: ((event: EventsMap[T]) => void), props?: { - [key: string]: unknown; - }): symbol; - off(listenerId: symbol): void; - root: null | Shape; - currentFile: null | File; - currentPage: null | Page; - viewport: Viewport; - flags: Flags; - history: HistoryContext; - library: LibraryContext; - fonts: FontsContext; - currentUser: User; - activeUsers: ActiveUser[]; - theme: Theme; - localStorage: LocalStorage; - selection: Shape[]; - shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[]; - replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void; - uploadMediaUrl(name: string, url: string): Promise; - uploadMediaData(name: string, data: Uint8Array, mimeType: string): Promise; - group(shapes: Shape[]): null | Group; - ungroup(group: Group, ...other: Group[]): void; - createRectangle(): Rectangle; - createBoard(): Board; - createEllipse(): Ellipse; - createPath(): Path; - createBoolean(boolType: BooleanType, shapes: Shape[]): null | Boolean; - createShapeFromSvg(svgString: string): null | Group; - createShapeFromSvgWithImages(svgString: string): Promise; - createText(text: string): null | Text; - generateMarkup(shapes: Shape[], options?: { - type?: "html" | "svg"; - }): string; - generateStyle(shapes: Shape[], options?: { - type?: "css"; - withPrelude?: boolean; - includeChildren?: boolean; - }): string; - generateFontFaces(shapes: Shape[]): Promise; - openViewer(): void; - createPage(): Page; - openPage(page: Page, newWindow?: boolean): void; - alignHorizontal(shapes: Shape[], direction: "center" | "left" | "right"): void; - alignVertical(shapes: Shape[], direction: "center" | "top" | "bottom"): void; - distributeHorizontal(shapes: Shape[]): void; - distributeVertical(shapes: Shape[]): void; - flatten(shapes: Shape[]): Path[]; + interface Penpot { + ui: { + open: ( + name: string, + url: string, + options?: { width: number; height: number }, + ) => void; + size: { width: number; height: number } | null; + resize: (width: number, height: number) => void; + sendMessage: (message: unknown) => void; + onMessage: (callback: (message: T) => void) => void; + }; + utils: ContextUtils; + closePlugin: () => void; + on( + type: T, + callback: (event: EventsMap[T]) => void, + props?: { [key: string]: unknown }, + ): symbol; + off(listenerId: symbol): void; + root: Shape | null; + currentFile: File | null; + currentPage: Page | null; + viewport: Viewport; + flags: Flags; + history: HistoryContext; + library: LibraryContext; + fonts: FontsContext; + currentUser: User; + activeUsers: ActiveUser[]; + theme: Theme; + localStorage: LocalStorage; + selection: Shape[]; + shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[]; + replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void; + uploadMediaUrl(name: string, url: string): Promise; + uploadMediaData( + name: string, + data: Uint8Array, + mimeType: string, + ): Promise; + group(shapes: Shape[]): Group | null; + ungroup(group: Group, ...other: Group[]): void; + createRectangle(): Rectangle; + createBoard(): Board; + createEllipse(): Ellipse; + createPath(): Path; + createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null; + createShapeFromSvg(svgString: string): Group | null; + createShapeFromSvgWithImages(svgString: string): Promise; + createText(text: string): Text | null; + generateMarkup( + shapes: Shape[], + options?: { type?: "html" | "svg" }, + ): string; + generateStyle( + shapes: Shape[], + options?: { + type?: "css"; + withPrelude?: boolean; + includeChildren?: boolean; + }, + ): string; + generateFontFaces(shapes: Shape[]): Promise; + openViewer(): void; + createPage(): Page; + openPage(page: Page, newWindow?: boolean): void; + alignHorizontal( + shapes: Shape[], + direction: "center" | "left" | "right", + ): void; + alignVertical( + shapes: Shape[], + direction: "center" | "top" | "bottom", + ): void; + distributeHorizontal(shapes: Shape[]): void; + distributeVertical(shapes: Shape[]): void; + flatten(shapes: Shape[]): Path[]; } ``` @@ -81,24 +95,22 @@ Penpot: Properties: ui: |- ``` - ui: { - open: ((name: string, url: string, options?: { - width: number; - height: number; - }) => void); - size: null | { - width: number; - height: number; - }; - resize: ((width: number, height: number) => void); - sendMessage: ((message: unknown) => void); - onMessage: ((callback: ((message: T) => void)) => void); + ui: { + open: ( + name: string, + url: string, + options?: { width: number; height: number }, + ) => void; + size: { width: number; height: number } | null; + resize: (width: number, height: number) => void; + sendMessage: (message: unknown) => void; + onMessage: (callback: (message: T) => void) => void; } ``` - Type declaration + Type Declaration - * open: ((name: string, url: string, options?: { width: number; height: number; }) => void) + * open: (name: string, url: string, options?: { width: number; height: number }) => void Opens the plugin UI. It is possible to develop a plugin without interface (see Palette color example) but if you need, the way to open this UI is using `penpot.ui.open`. There is a minimum and maximum size for this modal and a default size but it's possible to customize it anyway with the options parameter. @@ -107,31 +119,8 @@ Penpot: ``` penpot.ui.open('Plugin name', 'url', {width: 150, height: 300}); ``` - - + ``` - (name, url, options?): void - ``` - - - Parameters - * name: string - - title of the plugin, it'll be displayed on the top of the modal - * url: string - - of the plugin - * options: { - width: number; - height: number; - } - - height and width of the modal. - - + width: number - + height: number - - Returns void - * size: null | { width: number; height: number; } - * resize: ((width: number, height: number) => void) + * size: { width: number; height: number } | null + * resize: (width: number, height: number) => void Resizes the plugin UI. @@ -139,21 +128,7 @@ Penpot: ``` penpot.ui.resize(300, 400); ``` - - + ``` - (width, height): void - ``` - - - Parameters - * width: number - - The width of the modal. - * height: number - - The height of the modal. - - Returns void - * sendMessage: ((message: unknown) => void) + * sendMessage: (message: unknown) => void Sends a message to the plugin UI. @@ -161,18 +136,7 @@ Penpot: ``` this.sendMessage({ type: 'example-type', content: 'data we want to share' }); ``` - - + ``` - (message): void - ``` - - - Parameters - * message: unknown - - content usually is an object - - Returns void - * onMessage: ((callback: ((message: T) => void)) => void) + * onMessage: (callback: (message: T) => void) => void This is usually used in the `plugin.ts` file in order to handle the data sent by our plugin @@ -180,30 +144,6 @@ Penpot: ``` penpot.ui.onMessage((message) => {if(message.type === 'example-type' { ...do something })}); ``` - - + ``` - (callback): void - ``` - - - Type Parameters - * T - - Parameters - * callback: ((message: T) => void) - - A function that will be called whenever a message is received. - The function receives a single argument, `message`, which is of type `T`. - - + ``` - (message): void - ``` - - - Parameters - * message: T - - Returns void - - Returns void utils: |- ``` utils: ContextUtils @@ -212,7 +152,7 @@ Penpot: Provides access to utility functions and context-specific operations. closePlugin: |- ``` - closePlugin: (() => void) + closePlugin: () => void ``` Closes the plugin. When this method is called the UI will be closed. @@ -223,7 +163,7 @@ Penpot: ``` root: |- ``` - readonly root: null | Shape + readonly root: Shape | null ``` The root shape in the current Penpot context. Requires `content:read` permission. @@ -234,7 +174,7 @@ Penpot: ``` currentFile: |- ``` - readonly currentFile: null | File + readonly currentFile: File | null ``` Retrieves file data from the current Penpot context. Requires `content:read` permission. @@ -249,7 +189,7 @@ Penpot: ``` currentPage: |- ``` - readonly currentPage: null | Page + readonly currentPage: Page | null ``` The current page in the Penpot context. Requires `content:read` permission. @@ -361,513 +301,528 @@ Penpot: Methods: on: |- ``` - on(type, callback, props?): symbol + on( + type: T, + callback: (event: EventsMap[T]) => void, + props?: { [key: string]: unknown }, + ): symbol ``` - * Adds an event listener for the specified event type. - Subscribing to events requires `content:read` permission. + Adds an event listener for the specified event type. + Subscribing to events requires `content:read` permission. - The following are the possible event types: + The following are the possible event types: - + pagechange: event emitted when the current page changes. The callback will receive the new page. - + shapechange: event emitted when the shape changes. This event requires to send inside the `props` object the shape - that will be observed. For example: - ``` - // Observe the current selected shapepenpot.on('shapechange', (shape) => console.log(shape.name), { shapeId: penpot.selection[0].id }); - ``` + * pagechange: event emitted when the current page changes. The callback will receive the new page. + * shapechange: event emitted when the shape changes. This event requires to send inside the `props` object the shape + that will be observed. For example: - + selectionchange: event emitted when the current selection changes. The callback will receive the list of ids for the new selection - + themechange: event emitted when the user changes its theme. The callback will receive the new theme (currently: either `dark` or `light`) - + documentsaved: event emitted after the document is saved in the backend. + ``` + // Observe the current selected shapepenpot.on('shapechange', (shape) => console.log(shape.name), { shapeId: penpot.selection[0].id }); + ``` - Type Parameters - + T extends keyof EventsMap + * selectionchange: event emitted when the current selection changes. The callback will receive the list of ids for the new selection + * themechange: event emitted when the user changes its theme. The callback will receive the new theme (currently: either `dark` or `light`) + * documentsaved: event emitted after the document is saved in the backend. - Parameters - + type: T + Type Parameters - The event type to listen for. - + callback: ((event: EventsMap[T]) => void) + * T extends keyof EventsMap - The callback function to execute when the event is triggered. + Parameters - - ``` - (event): void - ``` + * type: T - * Parameters - + event: EventsMap[T] + The event type to listen for. + * callback: (event: EventsMap[T]) => void - Returns void - + props: { - [key: string]: unknown; - } + The callback function to execute when the event is triggered. + * props: { [key: string]: unknown } - The properties for the current event handler. Only makes sense for specific events. + The properties for the current event handler. Only makes sense for specific events. - - [key: string]: unknown + Returns symbol - Returns symbol + the listener id that can be used to call `off` and cancel the listener - the listener id that can be used to call `off` and cancel the listener - - Example - ``` - penpot.on('pagechange', () => {...do something}). - ``` + Example + ``` + penpot.on('pagechange', () => {...do something}). + ``` off: |- ``` - off(listenerId): void + off(listenerId: symbol): void ``` - * Removes an event listener for the specified event type. + Removes an event listener for the specified event type. - Parameters - + listenerId: symbol + Parameters - the id returned by the `on` method when the callback was set + * listenerId: symbol - Returns void + the id returned by the `on` method when the callback was set - Example - ``` - const listenerId = penpot.on('contentsave', () => console.log("Changed"));penpot.off(listenerId); - ``` + Returns void + + Example + ``` + const listenerId = penpot.on('contentsave', () => console.log("Changed"));penpot.off(listenerId); + ``` shapesColors: |- ``` - shapesColors(shapes): (Color & ColorShapeInfo)[] + shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[] ``` - * Retrieves colors applied to the given shapes in Penpot. Requires `content:read` permission. + Retrieves colors applied to the given shapes in Penpot. Requires `content:read` permission. - Parameters - + shapes: Shape[] + Parameters - Returns (Color & ColorShapeInfo)[] + * shapes: Shape[] - Returns an array of colors and their shape information. + Returns (Color & ColorShapeInfo)[] - Example - ``` - const colors = context.shapesColors(shapes);console.log(colors); - ``` + Returns an array of colors and their shape information. + + Example + ``` + const colors = context.shapesColors(shapes);console.log(colors); + ``` replaceColor: |- ``` - replaceColor(shapes, oldColor, newColor): void + replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void ``` - * Replaces a specified old color with a new color in the given shapes. Requires `content:write` permission. + Replaces a specified old color with a new color in the given shapes. Requires `content:write` permission. - Parameters - + shapes: Shape[] - + oldColor: Color - + newColor: Color + Parameters - Returns void + * shapes: Shape[] + * oldColor: Color + * newColor: Color - Example - ``` - context.replaceColor(shapes, oldColor, newColor); - ``` + Returns void + + Example + ``` + context.replaceColor(shapes, oldColor, newColor); + ``` uploadMediaUrl: |- ``` - uploadMediaUrl(name, url): Promise + uploadMediaUrl(name: string, url: string): Promise ``` - * Uploads media to Penpot and retrieves its image data. Requires `content:write` permission. + Uploads media to Penpot and retrieves its image data. Requires `content:write` permission. - Parameters - + name: string + Parameters - The name of the media. - + url: string + * name: string - The URL of the media to be uploaded. + The name of the media. + * url: string - Returns Promise + The URL of the media to be uploaded. - Returns a promise that resolves to the image data of the uploaded media. + Returns Promise - Example - ``` - const imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');console.log(imageData);// to insert the image in a shape we can doconst board = penpot.createBoard();const shape = penpot.createRectangle();board.appendChild(shape);shape.fills = [{ fillOpacity: 1, fillImage: imageData }]; - ``` + Returns a promise that resolves to the image data of the uploaded media. + + Example + ``` + const imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');console.log(imageData);// to insert the image in a shape we can doconst board = penpot.createBoard();const shape = penpot.createRectangle();board.appendChild(shape);shape.fills = [{ fillOpacity: 1, fillImage: imageData }]; + ``` uploadMediaData: |- ``` - uploadMediaData(name, data, mimeType): Promise + uploadMediaData( + name: string, + data: Uint8Array, + mimeType: string, + ): Promise ``` - * Uploads media to penpot and retrieves the image data. Requires `content:write` permission. + Uploads media to penpot and retrieves the image data. Requires `content:write` permission. - Parameters - + name: string + Parameters - The name of the media. - + data: Uint8Array + * name: string - The image content data - + mimeType: string + The name of the media. + * data: Uint8Array - Returns Promise + The image content data + * mimeType: string - Returns a promise that resolves to the image data of the uploaded media. + Returns Promise - Example - ``` - const imageData = await context.uploadMediaData('example', imageData, 'image/jpeg');console.log(imageData); - ``` + Returns a promise that resolves to the image data of the uploaded media. + + Example + ``` + const imageData = await context.uploadMediaData('example', imageData, 'image/jpeg');console.log(imageData); + ``` group: |- ``` - group(shapes): null | Group + group(shapes: Shape[]): Group | null ``` - * Groups the specified shapes. Requires `content:write` permission. + Groups the specified shapes. Requires `content:write` permission. - Parameters - + shapes: Shape[] + Parameters - An array of shapes to group. + * shapes: Shape[] - Returns null | Group + An array of shapes to group. - Returns the newly created group or `null` if the group could not be created. + Returns Group | null - Example - ``` - const penpotShapesArray = penpot.selection;penpot.group(penpotShapesArray); - ``` + Returns the newly created group or `null` if the group could not be created. + + Example + ``` + const penpotShapesArray = penpot.selection;penpot.group(penpotShapesArray); + ``` ungroup: |- ``` - ungroup(group, ...other): void + ungroup(group: Group, ...other: Group[]): void ``` - * Ungroups the specified group. Requires `content:write` permission. + Ungroups the specified group. Requires `content:write` permission. - Parameters - + group: Group + Parameters - The group to ungroup. - + ...other: Group[] + * group: Group - Additional groups to ungroup. + The group to ungroup. + * ...other: Group[] - Returns void + Additional groups to ungroup. - Example - ``` - const penpotShapesArray = penpot.selection;// We need to make sure that something is selected, and if the selected shape is a group,if (selected.length && penpot.utils.types.isGroup(penpotShapesArray[0])) { penpot.group(penpotShapesArray[0]);} - ``` + Returns void + + Example + ``` + const penpotShapesArray = penpot.selection;// We need to make sure that something is selected, and if the selected shape is a group,if (selected.length && penpot.utils.types.isGroup(penpotShapesArray[0])) { penpot.group(penpotShapesArray[0]);} + ``` createRectangle: |- ``` createRectangle(): Rectangle ``` - * Use this method to create the shape of a rectangle. Requires `content:write` permission. + Use this method to create the shape of a rectangle. Requires `content:write` permission. - Returns Rectangle + Returns Rectangle - Example - ``` - const shape = penpot.createRectangle();// just change the values like thisshape.name = "Example rectangle";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for a image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.borderRadius = 8;shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; - ``` + Example + ``` + const shape = penpot.createRectangle();// just change the values like thisshape.name = "Example rectangle";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for a image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.borderRadius = 8;shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; + ``` createBoard: |- ``` createBoard(): Board ``` - * Use this method to create a board. This is the first step before anything else, the container. Requires `content:write` permission. - Then you can add a gridlayout, flexlayout or add a shape inside the board. - Just a heads-up: board is a board in Penpot UI. + Use this method to create a board. This is the first step before anything else, the container. Requires `content:write` permission. + Then you can add a gridlayout, flexlayout or add a shape inside the board. + Just a heads-up: board is a board in Penpot UI. - Returns Board + Returns Board - Example - ``` - const board = penpot.createBoard();// to add grid layoutboard.addGridLayout();// to add flex layoutboard.addFlexLayout();// to create a shape inside the boardconst shape = penpot.createRectangle();board.appendChild(shape); - ``` + Example + ``` + const board = penpot.createBoard();// to add grid layoutboard.addGridLayout();// to add flex layoutboard.addFlexLayout();// to create a shape inside the boardconst shape = penpot.createRectangle();board.appendChild(shape); + ``` createEllipse: |- ``` createEllipse(): Ellipse ``` - * Use this method to create the shape of an ellipse. Requires `content:write` permission. + Use this method to create the shape of an ellipse. Requires `content:write` permission. - Returns Ellipse + Returns Ellipse - Example - ``` - const shape = penpot.createEllipse();// just change the values like thisshape.name = "Example ellipse";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for an image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; - ``` + Example + ``` + const shape = penpot.createEllipse();// just change the values like thisshape.name = "Example ellipse";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for an image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; + ``` createPath: |- ``` createPath(): Path ``` - * Use this method to create a path. Requires `content:write` permission. + Use this method to create a path. Requires `content:write` permission. - Returns Path + Returns Path - Example - ``` - const path = penpot.createPath();path.name = "My path";// for solid colorpath.fills = [{ fillColor: "#7EFFF5" }]; - ``` + Example + ``` + const path = penpot.createPath();path.name = "My path";// for solid colorpath.fills = [{ fillColor: "#7EFFF5" }]; + ``` createBoolean: |- ``` - createBoolean(boolType, shapes): null | Boolean + createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null ``` - * Creates a Boolean shape based on the specified boolean operation and shapes. Requires `content:write` permission. + Creates a Boolean shape based on the specified boolean operation and shapes. Requires `content:write` permission. - Parameters - + boolType: BooleanType + Parameters - The type of boolean operation ('union', 'difference', 'exclude', 'intersection'). - + shapes: Shape[] + * boolType: BooleanType - An array of shapes to perform the boolean operation on. + The type of boolean operation ('union', 'difference', 'exclude', 'intersection'). + * shapes: Shape[] - Returns null | Boolean + An array of shapes to perform the boolean operation on. - Returns the newly created Boolean shape resulting from the boolean operation. + Returns Boolean | null - Example - ``` - const booleanShape = context.createBoolean('union', [shape1, shape2]); - ``` + Returns the newly created Boolean shape resulting from the boolean operation. + + Example + ``` + const booleanShape = context.createBoolean('union', [shape1, shape2]); + ``` createShapeFromSvg: |- ``` - createShapeFromSvg(svgString): null | Group + createShapeFromSvg(svgString: string): Group | null ``` - * Creates a Group from an SVG string. Requires `content:write` permission. + Creates a Group from an SVG string. Requires `content:write` permission. - Parameters - + svgString: string + Parameters - The SVG string representing the shapes to be converted into a group. + * svgString: string - Returns null | Group + The SVG string representing the shapes to be converted into a group. - Returns the newly created Group containing the shapes from the SVG. + Returns Group | null - Example - ``` - const svgGroup = context.createShapeFromSvg('...'); - ``` + Returns the newly created Group containing the shapes from the SVG. + + Example + ``` + const svgGroup = context.createShapeFromSvg('...'); + ``` createShapeFromSvgWithImages: |- ``` - createShapeFromSvgWithImages(svgString): Promise + createShapeFromSvgWithImages(svgString: string): Promise ``` - * Creates a Group from an SVG string. The SVG can have images and the method returns - a Promise because the shape will be available after all images are uploaded. - Requires `content:write` permission. + Creates a Group from an SVG string. The SVG can have images and the method returns + a Promise because the shape will be available after all images are uploaded. + Requires `content:write` permission. - Parameters - + svgString: string + Parameters - The SVG string representing the shapes to be converted into a group. + * svgString: string - Returns Promise + The SVG string representing the shapes to be converted into a group. - Returns a promise with the newly created Group containing the shapes from the SVG. + Returns Promise - Example - ``` - const svgGroup = await context.createShapeFromSvgWithImages('...'); - ``` + Returns a promise with the newly created Group containing the shapes from the SVG. + + Example + ``` + const svgGroup = await context.createShapeFromSvgWithImages('...'); + ``` createText: |- ``` - createText(text): null | Text + createText(text: string): Text | null ``` - * Creates a Text shape with the specified text content. Requires `content:write` permission. + Creates a Text shape with the specified text content. Requires `content:write` permission. - Parameters - + text: string + Parameters - The text content for the Text shape. + * text: string - Returns null | Text + The text content for the Text shape. - Returns the new created shape, if the shape wasn't created can return null. + Returns Text | null - Example - ``` - const board = penpot.createBoard();let text;text = penpot.createText();// just change the values like thistext.growType = 'auto-height';text.fontFamily = 'Work Sans';text.fontSize = '12';text.fills = [{fillColor: '#9f05ff', fillOpacity: 1}];text.strokes = [{strokeOpacity: 1, strokeStyle: 'solid', strokeWidth: 2, strokeColor: '#deabff', strokeAlignment: 'outer'}];board.appendChild(text); - ``` + Returns the new created shape, if the shape wasn't created can return null. + + Example + ``` + const board = penpot.createBoard();let text;text = penpot.createText();// just change the values like thistext.growType = 'auto-height';text.fontFamily = 'Work Sans';text.fontSize = '12';text.fills = [{fillColor: '#9f05ff', fillOpacity: 1}];text.strokes = [{strokeOpacity: 1, strokeStyle: 'solid', strokeWidth: 2, strokeColor: '#deabff', strokeAlignment: 'outer'}];board.appendChild(text); + ``` generateMarkup: |- ``` - generateMarkup(shapes, options?): string + generateMarkup(shapes: Shape[], options?: { type?: "html" | "svg" }): string ``` - * Generates markup for the given shapes. Requires `content:read` permission + Generates markup for the given shapes. Requires `content:read` permission - Parameters - + shapes: Shape[] - + options: { - type?: "html" | "svg"; - } - - Optionaltype?: "html" | "svg" + Parameters - Returns string + * shapes: Shape[] + * options: { type?: "html" | "svg" } - Example - ``` - const markup = context.generateMarkup(shapes, { type: 'html' });console.log(markup); - ``` + Returns string + + Example + ``` + const markup = context.generateMarkup(shapes, { type: 'html' });console.log(markup); + ``` generateStyle: |- ``` - generateStyle(shapes, options?): string + generateStyle( + shapes: Shape[], + options?: { + type?: "css"; + withPrelude?: boolean; + includeChildren?: boolean; + }, + ): string ``` - * Generates styles for the given shapes. Requires `content:read` permission + Generates styles for the given shapes. Requires `content:read` permission - Parameters - + shapes: Shape[] - + options: { - type?: "css"; - withPrelude?: boolean; - includeChildren?: boolean; - } - - Optionaltype?: "css" - - OptionalwithPrelude?: boolean - - OptionalincludeChildren?: boolean + Parameters - Returns string + * shapes: Shape[] + * options: { type?: "css"; withPrelude?: boolean; includeChildren?: boolean } - Example - ``` - const styles = context.generateStyle(shapes, { type: 'css' });console.log(styles); - ``` + Returns string + + Example + ``` + const styles = context.generateStyle(shapes, { type: 'css' });console.log(styles); + ``` generateFontFaces: |- ``` - generateFontFaces(shapes): Promise + generateFontFaces(shapes: Shape[]): Promise ``` - * Generates the fontfaces styles necessaries to render the shapes. - Requires `content:read` permission + Generates the fontfaces styles necessaries to render the shapes. + Requires `content:read` permission - Parameters - + shapes: Shape[] + Parameters - Returns Promise + * shapes: Shape[] - Example - ``` - const fontfaces = context.generateFontFaces(penpot.selection);console.log(fontfaces); - ``` + Returns Promise + + Example + ``` + const fontfaces = context.generateFontFaces(penpot.selection);console.log(fontfaces); + ``` openViewer: |- ``` openViewer(): void ``` - * Opens the viewer section. Requires `content:read` permission. + Opens the viewer section. Requires `content:read` permission. - Returns void + Returns void createPage: |- ``` createPage(): Page ``` - * Creates a new page. Requires `content:write` permission. + Creates a new page. Requires `content:write` permission. - Returns Page + Returns Page openPage: |- ``` - openPage(page, newWindow?): void + openPage(page: Page, newWindow?: boolean): void ``` - * Changes the current open page to given page. Requires `content:read` permission. + Changes the current open page to given page. Requires `content:read` permission. - Parameters - + page: Page + Parameters - the page to open - + newWindow: boolean + * page: Page - if true opens the page in a new window + the page to open + * newWindow: boolean - Returns void + if true opens the page in a new window - Example - ``` - context.openPage(page); - ``` + Returns void + + Example + ``` + context.openPage(page); + ``` alignHorizontal: |- ``` - alignHorizontal(shapes, direction): void + alignHorizontal(shapes: Shape[], direction: "center" | "left" | "right"): void ``` - * Aligning will move all the selected layers to a position relative to one - of them in the horizontal direction. + Aligning will move all the selected layers to a position relative to one + of them in the horizontal direction. - Parameters - + shapes: Shape[] + Parameters - to align - + direction: "center" | "left" | "right" + * shapes: Shape[] - where the shapes will be aligned + to align + * direction: "center" | "left" | "right" - Returns void + where the shapes will be aligned + + Returns void alignVertical: |- ``` - alignVertical(shapes, direction): void + alignVertical(shapes: Shape[], direction: "center" | "top" | "bottom"): void ``` - * Aligning will move all the selected layers to a position relative to one - of them in the vertical direction. + Aligning will move all the selected layers to a position relative to one + of them in the vertical direction. - Parameters - + shapes: Shape[] + Parameters - to align - + direction: "center" | "top" | "bottom" + * shapes: Shape[] - where the shapes will be aligned + to align + * direction: "center" | "top" | "bottom" - Returns void + where the shapes will be aligned + + Returns void distributeHorizontal: |- ``` - distributeHorizontal(shapes): void + distributeHorizontal(shapes: Shape[]): void ``` - * Distributing objects to position them horizontally with equal distances between them. + Distributing objects to position them horizontally with equal distances between them. - Parameters - + shapes: Shape[] + Parameters - to distribute + * shapes: Shape[] - Returns void + to distribute + + Returns void distributeVertical: |- ``` - distributeVertical(shapes): void + distributeVertical(shapes: Shape[]): void ``` - * Distributing objects to position them vertically with equal distances between them. + Distributing objects to position them vertically with equal distances between them. - Parameters - + shapes: Shape[] + Parameters - to distribute + * shapes: Shape[] - Returns void + to distribute + + Returns void flatten: |- ``` - flatten(shapes): Path[] + flatten(shapes: Shape[]): Path[] ``` - * Converts the shapes into Paths. If the shapes are complex will put together - all its paths into one. + Converts the shapes into Paths. If the shapes are complex will put together + all its paths into one. - Parameters - + shapes: Shape[] + Parameters - to flatten + * shapes: Shape[] - Returns Path[] + to flatten + + Returns Path[] ActiveUser: overview: |- Interface ActiveUser @@ -877,21 +832,18 @@ ActiveUser: This interface includes additional properties specific to active users. ``` - interface ActiveUser { - position?: { - x: number; - y: number; - }; - zoom?: number; - id: string; - name?: string; - avatarUrl?: string; - color: string; - sessionId?: string; + interface ActiveUser { + position?: { x: number; y: number }; + zoom?: number; + id: string; + name?: string; + avatarUrl?: string; + color: string; + sessionId?: string; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * User + ActiveUser @@ -901,10 +853,7 @@ ActiveUser: Properties: position: |- ``` - position?: { - x: number; - y: number; - } + position?: { x: number; y: number } ``` The position of the active user. @@ -988,11 +937,11 @@ Blur: This interface includes properties for defining the type and intensity of a blur effect, along with its visibility. ``` - interface Blur { - id?: string; - type?: "layer-blur"; - value?: number; - hidden?: boolean; + interface Blur { + id?: string; + type?: "layer-blur"; + value?: number; + hidden?: boolean; } ``` @@ -1007,7 +956,7 @@ Blur: The optional unique identifier for the blur effect. type: |- ``` - type + type?: "layer-blur" ``` The optional type of the blur effect. @@ -1034,64 +983,57 @@ Board: This interface extends `ShapeBase` and includes properties and methods specific to board. ``` - interface Board { - type: "board"; - clipContent: boolean; - showInViewMode: boolean; - grid?: GridLayout; - flex?: FlexLayout; - guides: Guide[]; - rulerGuides: RulerGuide[]; - horizontalSizing?: "auto" | "fix"; - verticalSizing?: "auto" | "fix"; - fills: Fill[]; - children: Shape[]; - appendChild(child: Shape): void; - insertChild(index: number, child: Shape): void; - addFlexLayout(): FlexLayout; - addGridLayout(): GridLayout; - addRulerGuide(orientation: RulerGuideOrientation, value: number): RulerGuide; - removeRulerGuide(guide: RulerGuide): void; - isVariantContainer(): boolean; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Board { + type: "board"; + clipContent: boolean; + showInViewMode: boolean; + grid?: GridLayout; + flex?: FlexLayout; + guides: Guide[]; + rulerGuides: RulerGuide[]; + horizontalSizing?: "auto" | "fix"; + verticalSizing?: "auto" | "fix"; + fills: Fill[]; + children: Shape[]; + appendChild(child: Shape): void; + insertChild(index: number, child: Shape): void; + addFlexLayout(): FlexLayout; + addGridLayout(): GridLayout; + addRulerGuide( + orientation: RulerGuideOrientation, + value: number, + ): RulerGuide; + removeRulerGuide(guide: RulerGuide): void; + isVariantContainer(): boolean; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -1107,58 +1049,57 @@ Board: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Board @@ -1169,7 +1110,7 @@ Board: Properties: type: |- ``` - readonly type + readonly type: "board" ``` The type of the shape, which is always 'board' for boards. @@ -1257,7 +1198,7 @@ Board: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -1334,23 +1275,13 @@ Board: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -1392,7 +1323,7 @@ Board: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -1494,9 +1425,7 @@ Board: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -1515,554 +1444,570 @@ Board: Methods: appendChild: |- ``` - appendChild(child): void + appendChild(child: Shape): void ``` - * Appends a child shape to the board. + Appends a child shape to the board. - Parameters - + child: Shape + Parameters - The child shape to append. + * child: Shape - Returns void + The child shape to append. - Example - ``` - board.appendChild(childShape); - ``` + Returns void + + Example + ``` + board.appendChild(childShape); + ``` insertChild: |- ``` - insertChild(index, child): void + insertChild(index: number, child: Shape): void ``` - * Inserts a child shape at the specified index within the board. + Inserts a child shape at the specified index within the board. - Parameters - + index: number + Parameters - The index at which to insert the child shape. - + child: Shape + * index: number - The child shape to insert. + The index at which to insert the child shape. + * child: Shape - Returns void + The child shape to insert. - Example - ``` - board.insertChild(0, childShape); - ``` + Returns void + + Example + ``` + board.insertChild(0, childShape); + ``` addFlexLayout: |- ``` addFlexLayout(): FlexLayout ``` - * Adds a flex layout configuration to the board (so it's necessary to create a board first of all). + Adds a flex layout configuration to the board (so it's necessary to create a board first of all). - Returns FlexLayout + Returns FlexLayout - Returns the flex layout configuration added to the board. + Returns the flex layout configuration added to the board. - Example - ``` - const board = penpot.createBoard();const flex = board.addFlexLayout();// You can change the flex properties as follows.flex.dir = "column";flex.wrap = "wrap";flex.alignItems = "center";flex.justifyContent = "center";flex.horizontalSizing = "fill";flex.verticalSizing = "fill"; - ``` + Example + ``` + const board = penpot.createBoard();const flex = board.addFlexLayout();// You can change the flex properties as follows.flex.dir = "column";flex.wrap = "wrap";flex.alignItems = "center";flex.justifyContent = "center";flex.horizontalSizing = "fill";flex.verticalSizing = "fill"; + ``` addGridLayout: |- ``` addGridLayout(): GridLayout ``` - * Adds a grid layout configuration to the board (so it's necessary to create a board first of all). You can add rows and columns, check addRow/addColumn. + Adds a grid layout configuration to the board (so it's necessary to create a board first of all). You can add rows and columns, check addRow/addColumn. - Returns GridLayout + Returns GridLayout - Returns the grid layout configuration added to the board. + Returns the grid layout configuration added to the board. - Example - ``` - const board = penpot.createBoard();const grid = board.addGridLayout();// You can change the grid properties as follows.grid.alignItems = "center";grid.justifyItems = "start";grid.rowGap = 10;grid.columnGap = 10;grid.verticalPadding = 5;grid.horizontalPadding = 5 - ``` + Example + ``` + const board = penpot.createBoard();const grid = board.addGridLayout();// You can change the grid properties as follows.grid.alignItems = "center";grid.justifyItems = "start";grid.rowGap = 10;grid.columnGap = 10;grid.verticalPadding = 5;grid.horizontalPadding = 5 + ``` addRulerGuide: |- ``` - addRulerGuide(orientation, value): RulerGuide + addRulerGuide(orientation: RulerGuideOrientation, value: number): RulerGuide ``` - * Creates a new ruler guide. + Creates a new ruler guide. - Parameters - + orientation: RulerGuideOrientation - + value: number + Parameters - Returns RulerGuide + * orientation: RulerGuideOrientation + * value: number + + Returns RulerGuide removeRulerGuide: |- ``` - removeRulerGuide(guide): void + removeRulerGuide(guide: RulerGuide): void ``` - * Removes the `guide` from the current page. + Removes the `guide` from the current page. - Parameters - + guide: RulerGuide + Parameters - Returns void + * guide: RulerGuide + + Returns void isVariantContainer: |- ``` isVariantContainer(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current board is a VariantContainer + Returns true when the current board is a VariantContainer getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void VariantContainer: overview: |- Interface VariantContainer @@ -2072,65 +2017,58 @@ VariantContainer: This interface extends `Board` and includes properties and methods specific to VariantContainer. ``` - interface VariantContainer { - type: "board"; - clipContent: boolean; - showInViewMode: boolean; - grid?: GridLayout; - flex?: FlexLayout; - guides: Guide[]; - rulerGuides: RulerGuide[]; - horizontalSizing?: "auto" | "fix"; - verticalSizing?: "auto" | "fix"; - fills: Fill[]; - children: Shape[]; - appendChild(child: Shape): void; - insertChild(index: number, child: Shape): void; - addFlexLayout(): FlexLayout; - addGridLayout(): GridLayout; - addRulerGuide(orientation: RulerGuideOrientation, value: number): RulerGuide; - removeRulerGuide(guide: RulerGuide): void; - isVariantContainer(): boolean; - variants: null | Variants; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface VariantContainer { + type: "board"; + clipContent: boolean; + showInViewMode: boolean; + grid?: GridLayout; + flex?: FlexLayout; + guides: Guide[]; + rulerGuides: RulerGuide[]; + horizontalSizing?: "auto" | "fix"; + verticalSizing?: "auto" | "fix"; + fills: Fill[]; + children: Shape[]; + appendChild(child: Shape): void; + insertChild(index: number, child: Shape): void; + addFlexLayout(): FlexLayout; + addGridLayout(): GridLayout; + addRulerGuide( + orientation: RulerGuideOrientation, + value: number, + ): RulerGuide; + removeRulerGuide(guide: RulerGuide): void; + isVariantContainer(): boolean; + variants: Variants | null; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -2146,58 +2084,57 @@ VariantContainer: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * Board + VariantContainer @@ -2207,7 +2144,7 @@ VariantContainer: Properties: type: |- ``` - readonly type + readonly type: "board" ``` The type of the shape, which is always 'board' for boards. @@ -2281,7 +2218,7 @@ VariantContainer: ``` variants: |- ``` - readonly variants: null | Variants + readonly variants: Variants | null ``` Access to the Variant interface, for attributes and actions over the full Variant (not only this VariantContainer) @@ -2299,7 +2236,7 @@ VariantContainer: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -2376,23 +2313,13 @@ VariantContainer: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -2434,7 +2361,7 @@ VariantContainer: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -2536,9 +2463,7 @@ VariantContainer: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -2557,554 +2482,570 @@ VariantContainer: Methods: appendChild: |- ``` - appendChild(child): void + appendChild(child: Shape): void ``` - * Appends a child shape to the board. + Appends a child shape to the board. - Parameters - + child: Shape + Parameters - The child shape to append. + * child: Shape - Returns void + The child shape to append. - Example - ``` - board.appendChild(childShape); - ``` + Returns void + + Example + ``` + board.appendChild(childShape); + ``` insertChild: |- ``` - insertChild(index, child): void + insertChild(index: number, child: Shape): void ``` - * Inserts a child shape at the specified index within the board. + Inserts a child shape at the specified index within the board. - Parameters - + index: number + Parameters - The index at which to insert the child shape. - + child: Shape + * index: number - The child shape to insert. + The index at which to insert the child shape. + * child: Shape - Returns void + The child shape to insert. - Example - ``` - board.insertChild(0, childShape); - ``` + Returns void + + Example + ``` + board.insertChild(0, childShape); + ``` addFlexLayout: |- ``` addFlexLayout(): FlexLayout ``` - * Adds a flex layout configuration to the board (so it's necessary to create a board first of all). + Adds a flex layout configuration to the board (so it's necessary to create a board first of all). - Returns FlexLayout + Returns FlexLayout - Returns the flex layout configuration added to the board. + Returns the flex layout configuration added to the board. - Example - ``` - const board = penpot.createBoard();const flex = board.addFlexLayout();// You can change the flex properties as follows.flex.dir = "column";flex.wrap = "wrap";flex.alignItems = "center";flex.justifyContent = "center";flex.horizontalSizing = "fill";flex.verticalSizing = "fill"; - ``` + Example + ``` + const board = penpot.createBoard();const flex = board.addFlexLayout();// You can change the flex properties as follows.flex.dir = "column";flex.wrap = "wrap";flex.alignItems = "center";flex.justifyContent = "center";flex.horizontalSizing = "fill";flex.verticalSizing = "fill"; + ``` addGridLayout: |- ``` addGridLayout(): GridLayout ``` - * Adds a grid layout configuration to the board (so it's necessary to create a board first of all). You can add rows and columns, check addRow/addColumn. + Adds a grid layout configuration to the board (so it's necessary to create a board first of all). You can add rows and columns, check addRow/addColumn. - Returns GridLayout + Returns GridLayout - Returns the grid layout configuration added to the board. + Returns the grid layout configuration added to the board. - Example - ``` - const board = penpot.createBoard();const grid = board.addGridLayout();// You can change the grid properties as follows.grid.alignItems = "center";grid.justifyItems = "start";grid.rowGap = 10;grid.columnGap = 10;grid.verticalPadding = 5;grid.horizontalPadding = 5 - ``` + Example + ``` + const board = penpot.createBoard();const grid = board.addGridLayout();// You can change the grid properties as follows.grid.alignItems = "center";grid.justifyItems = "start";grid.rowGap = 10;grid.columnGap = 10;grid.verticalPadding = 5;grid.horizontalPadding = 5 + ``` addRulerGuide: |- ``` - addRulerGuide(orientation, value): RulerGuide + addRulerGuide(orientation: RulerGuideOrientation, value: number): RulerGuide ``` - * Creates a new ruler guide. + Creates a new ruler guide. - Parameters - + orientation: RulerGuideOrientation - + value: number + Parameters - Returns RulerGuide + * orientation: RulerGuideOrientation + * value: number + + Returns RulerGuide removeRulerGuide: |- ``` - removeRulerGuide(guide): void + removeRulerGuide(guide: RulerGuide): void ``` - * Removes the `guide` from the current page. + Removes the `guide` from the current page. - Parameters - + guide: RulerGuide + Parameters - Returns void + * guide: RulerGuide + + Returns void isVariantContainer: |- ``` isVariantContainer(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current board is a VariantContainer + Returns true when the current board is a VariantContainer getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void Boolean: overview: |- Interface Boolean @@ -3114,55 +3055,45 @@ Boolean: This interface extends `ShapeBase` and includes properties and methods specific to boolean operations. ``` - interface Boolean { - type: "boolean"; - toD(): string; - content: string; - d: string; - commands: PathCommand[]; - fills: Fill[]; - children: Shape[]; - appendChild(child: Shape): void; - insertChild(index: number, child: Shape): void; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Boolean { + type: "boolean"; + toD(): string; + content: string; + d: string; + commands: PathCommand[]; + fills: Fill[]; + children: Shape[]; + appendChild(child: Shape): void; + insertChild(index: number, child: Shape): void; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -3178,58 +3109,57 @@ Boolean: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Boolean @@ -3239,7 +3169,7 @@ Boolean: Properties: type: |- ``` - readonly type + readonly type: "boolean" ``` The type of the shape, which is always 'bool' for boolean operation shapes. @@ -3293,7 +3223,7 @@ Boolean: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -3370,23 +3300,13 @@ Boolean: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -3428,7 +3348,7 @@ Boolean: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -3530,9 +3450,7 @@ Boolean: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -3554,504 +3472,518 @@ Boolean: toD(): string ``` - * Converts the boolean shape to its path data representation. + Converts the boolean shape to its path data representation. - Returns string + Returns string - Returns the path data (d attribute) as a string. + Returns the path data (d attribute) as a string. - Deprecated + Deprecated - Use the `d` attribute + Use the `d` attribute appendChild: |- ``` - appendChild(child): void + appendChild(child: Shape): void ``` - * Appends a child shape to the boolean shape. + Appends a child shape to the boolean shape. - Parameters - + child: Shape + Parameters - The child shape to append. + * child: Shape - Returns void + The child shape to append. - Example - ``` - boolShape.appendChild(childShape); - ``` + Returns void + + Example + ``` + boolShape.appendChild(childShape); + ``` insertChild: |- ``` - insertChild(index, child): void + insertChild(index: number, child: Shape): void ``` - * Inserts a child shape at the specified index within the boolean shape. + Inserts a child shape at the specified index within the boolean shape. - Parameters - + index: number + Parameters - The index at which to insert the child shape. - + child: Shape + * index: number - The child shape to insert. + The index at which to insert the child shape. + * child: Shape - Returns void + The child shape to insert. - Example - ``` - boolShape.insertChild(0, childShape); - ``` + Returns void + + Example + ``` + boolShape.insertChild(0, childShape); + ``` getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void CloseOverlay: overview: |- Interface CloseOverlay @@ -4060,10 +3992,10 @@ CloseOverlay: This action will close a targeted board that is opened as an overlay. ``` - interface CloseOverlay { - type: "close-overlay"; - destination?: Board; - animation: Animation; + interface CloseOverlay { + type: "close-overlay"; + destination?: Board; + animation: Animation; } ``` @@ -4072,7 +4004,7 @@ CloseOverlay: Properties: type: |- ``` - readonly type + readonly type: "close-overlay" ``` The action type @@ -4097,17 +4029,17 @@ Color: This interface includes properties for defining solid colors, gradients, and image fills, along with metadata. ``` - interface Color { - id?: string; - fileId?: string; - name?: string; - path?: string; - color?: string; - opacity?: number; - refId?: string; - refFile?: string; - gradient?: Gradient; - image?: ImageData; + interface Color { + id?: string; + fileId?: string; + name?: string; + path?: string; + color?: string; + opacity?: number; + refId?: string; + refFile?: string; + gradient?: Gradient; + image?: ImageData; } ``` @@ -4191,8 +4123,8 @@ ColorShapeInfo: Additional color information for the methods to extract colors from a list of shapes. ``` - interface ColorShapeInfo { - shapesInfo: ColorShapeInfoEntry[]; + interface ColorShapeInfo { + shapesInfo: ColorShapeInfoEntry[]; } ``` @@ -4213,10 +4145,10 @@ ColorShapeInfoEntry: Entry for the color shape additional information. ``` - interface ColorShapeInfoEntry { - property: string; - index?: number; - shapeId: string; + interface ColorShapeInfoEntry { + property: string; + index?: number; + shapeId: string; } ``` @@ -4251,11 +4183,11 @@ Comment: providing feedback right over the designs and prototypes. ``` - interface Comment { - user: User; - date: Date; - content: string; - remove(): void; + interface Comment { + user: User; + date: Date; + content: string; + remove(): void; } ``` @@ -4286,10 +4218,10 @@ Comment: remove(): void ``` - * Remove the current comment from its comment thread. Only the owner can remove their comments. - Requires the `comment:write` permission. + Remove the current comment from its comment thread. Only the owner can remove their comments. + Requires the `comment:write` permission. - Returns void + Returns void CommentThread: overview: |- Interface CommentThread @@ -4299,15 +4231,15 @@ CommentThread: are conversations the users have in Penpot. ``` - interface CommentThread { - seqNumber: number; - board?: Board; - owner?: User; - position: Point; - resolved: boolean; - findComments(): Promise; - reply(content: string): Promise; - remove(): void; + interface CommentThread { + seqNumber: number; + board?: Board; + owner?: User; + position: Point; + resolved: boolean; + findComments(): Promise; + reply(content: string): Promise; + remove(): void; } ``` @@ -4352,33 +4284,34 @@ CommentThread: findComments(): Promise ``` - * List of `comments` ordered by creation date. - Requires the `comment:read` or `comment:write` permission. + List of `comments` ordered by creation date. + Requires the `comment:read` or `comment:write` permission. - Returns Promise + Returns Promise reply: |- ``` - reply(content): Promise + reply(content: string): Promise ``` - * Creates a new comment after the last one in the thread. The current user will - be used as the creation user. - Requires the `comment:write` permission. + Creates a new comment after the last one in the thread. The current user will + be used as the creation user. + Requires the `comment:write` permission. - Parameters - + content: string + Parameters - Returns Promise + * content: string + + Returns Promise remove: |- ``` remove(): void ``` - * Removes the current comment thread. Only the user that created the thread can - remove it. - Requires the `comment:write` permission. + Removes the current comment thread. Only the user that created the thread can + remove it. + Requires the `comment:write` permission. - Returns void + Returns void CommonLayout: overview: |- Interface CommonLayout @@ -4388,48 +4321,45 @@ CommonLayout: It includes various properties for alignment, spacing, padding, and sizing, as well as a method to remove the layout. ``` - interface CommonLayout { - alignItems?: - | "center" - | "start" - | "end" - | "stretch"; - alignContent?: + interface CommonLayout { + alignItems?: "center" | "start" | "end" | "stretch"; + alignContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" - | "space-evenly"; - justifyItems?: - | "center" - | "start" - | "end" - | "stretch"; - justifyContent?: + | "space-evenly"; + justifyItems?: "center" + | "start" + | "end" + | "stretch"; + justifyContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" - | "space-evenly"; - rowGap: number; - columnGap: number; - verticalPadding: number; - horizontalPadding: number; - topPadding: number; - rightPadding: number; - bottomPadding: number; - leftPadding: number; - horizontalSizing: "fill" | "auto" | "fit-content"; - verticalSizing: "fill" | "auto" | "fit-content"; - remove(): void; + | "space-evenly"; + rowGap: number; + columnGap: number; + verticalPadding: number; + horizontalPadding: number; + topPadding: number; + rightPadding: number; + bottomPadding: number; + leftPadding: number; + horizontalSizing: "fill" + | "auto" + | "fit-content"; + verticalSizing: "fill" | "auto" | "fit-content"; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * CommonLayout + FlexLayout @@ -4438,11 +4368,7 @@ CommonLayout: Properties: alignItems: |- ``` - alignItems?: - | "center" - | "start" - | "end" - | "stretch" + alignItems?: "center" | "start" | "end" | "stretch" ``` The `alignItems` property specifies the default alignment for items inside the container. @@ -4454,7 +4380,7 @@ CommonLayout: * 'stretch': Items are stretched to fill the container. alignContent: |- ``` - alignContent?: + alignContent?: | "center" | "start" | "end" @@ -4476,11 +4402,7 @@ CommonLayout: * 'stretch': Content is stretched to fill the container. justifyItems: |- ``` - justifyItems?: - | "center" - | "start" - | "end" - | "stretch" + justifyItems?: "center" | "start" | "end" | "stretch" ``` The `justifyItems` property specifies the default justification for items inside the container. @@ -4492,7 +4414,7 @@ CommonLayout: * 'stretch': Items are stretched to fill the container. justifyContent: |- ``` - justifyContent?: + justifyContent?: | "center" | "start" | "end" @@ -4588,9 +4510,9 @@ CommonLayout: remove(): void ``` - * The `remove` method removes the layout. + The `remove` method removes the layout. - Returns void + Returns void Context: overview: |- Interface Context @@ -4599,62 +4521,78 @@ Context: Represents the context of Penpot, providing access to various Penpot functionalities and data. ``` - interface Context { - root: null | Shape; - currentFile: null | File; - currentPage: null | Page; - viewport: Viewport; - flags: Flags; - history: HistoryContext; - library: LibraryContext; - fonts: FontsContext; - currentUser: User; - activeUsers: ActiveUser[]; - theme: Theme; - localStorage: LocalStorage; - selection: Shape[]; - shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[]; - replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void; - uploadMediaUrl(name: string, url: string): Promise; - uploadMediaData(name: string, data: Uint8Array, mimeType: string): Promise; - group(shapes: Shape[]): null | Group; - ungroup(group: Group, ...other: Group[]): void; - createRectangle(): Rectangle; - createBoard(): Board; - createEllipse(): Ellipse; - createPath(): Path; - createBoolean(boolType: BooleanType, shapes: Shape[]): null | Boolean; - createShapeFromSvg(svgString: string): null | Group; - createShapeFromSvgWithImages(svgString: string): Promise; - createText(text: string): null | Text; - generateMarkup(shapes: Shape[], options?: { - type?: "html" | "svg"; - }): string; - generateStyle(shapes: Shape[], options?: { - type?: "css"; - withPrelude?: boolean; - includeChildren?: boolean; - }): string; - generateFontFaces(shapes: Shape[]): Promise; - addListener(type: T, callback: ((event: EventsMap[T]) => void), props?: { - [key: string]: unknown; - }): symbol; - removeListener(listenerId: symbol): void; - openViewer(): void; - createPage(): Page; - openPage(page: Page, newWindow?: boolean): void; - alignHorizontal(shapes: Shape[], direction: "center" | "left" | "right"): void; - alignVertical(shapes: Shape[], direction: "center" | "top" | "bottom"): void; - distributeHorizontal(shapes: Shape[]): void; - distributeVertical(shapes: Shape[]): void; - flatten(shapes: Shape[]): Path[]; + interface Context { + root: Shape | null; + currentFile: File | null; + currentPage: Page | null; + viewport: Viewport; + flags: Flags; + history: HistoryContext; + library: LibraryContext; + fonts: FontsContext; + currentUser: User; + activeUsers: ActiveUser[]; + theme: Theme; + localStorage: LocalStorage; + selection: Shape[]; + shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[]; + replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void; + uploadMediaUrl(name: string, url: string): Promise; + uploadMediaData( + name: string, + data: Uint8Array, + mimeType: string, + ): Promise; + group(shapes: Shape[]): Group | null; + ungroup(group: Group, ...other: Group[]): void; + createRectangle(): Rectangle; + createBoard(): Board; + createEllipse(): Ellipse; + createPath(): Path; + createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null; + createShapeFromSvg(svgString: string): Group | null; + createShapeFromSvgWithImages(svgString: string): Promise; + createText(text: string): Text | null; + generateMarkup( + shapes: Shape[], + options?: { type?: "html" | "svg" }, + ): string; + generateStyle( + shapes: Shape[], + options?: { + type?: "css"; + withPrelude?: boolean; + includeChildren?: boolean; + }, + ): string; + generateFontFaces(shapes: Shape[]): Promise; + addListener( + type: T, + callback: (event: EventsMap[T]) => void, + props?: { [key: string]: unknown }, + ): symbol; + removeListener(listenerId: symbol): void; + openViewer(): void; + createPage(): Page; + openPage(page: Page, newWindow?: boolean): void; + alignHorizontal( + shapes: Shape[], + direction: "center" | "left" | "right", + ): void; + alignVertical( + shapes: Shape[], + direction: "center" | "top" | "bottom", + ): void; + distributeHorizontal(shapes: Shape[]): void; + distributeVertical(shapes: Shape[]): void; + flatten(shapes: Shape[]): Path[]; } ``` members: Properties: root: |- ``` - readonly root: null | Shape + readonly root: Shape | null ``` The root shape in the current Penpot context. Requires `content:read` permission. @@ -4665,7 +4603,7 @@ Context: ``` currentFile: |- ``` - readonly currentFile: null | File + readonly currentFile: File | null ``` Retrieves file data from the current Penpot context. Requires `content:read` permission. @@ -4680,7 +4618,7 @@ Context: ``` currentPage: |- ``` - readonly currentPage: null | Page + readonly currentPage: Page | null ``` The current page in the Penpot context. Requires `content:read` permission. @@ -4792,487 +4730,503 @@ Context: Methods: shapesColors: |- ``` - shapesColors(shapes): (Color & ColorShapeInfo)[] + shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[] ``` - * Retrieves colors applied to the given shapes in Penpot. Requires `content:read` permission. + Retrieves colors applied to the given shapes in Penpot. Requires `content:read` permission. - Parameters - + shapes: Shape[] + Parameters - Returns (Color & ColorShapeInfo)[] + * shapes: Shape[] - Returns an array of colors and their shape information. + Returns (Color & ColorShapeInfo)[] - Example - ``` - const colors = context.shapesColors(shapes);console.log(colors); - ``` + Returns an array of colors and their shape information. + + Example + ``` + const colors = context.shapesColors(shapes);console.log(colors); + ``` replaceColor: |- ``` - replaceColor(shapes, oldColor, newColor): void + replaceColor(shapes: Shape[], oldColor: Color, newColor: Color): void ``` - * Replaces a specified old color with a new color in the given shapes. Requires `content:write` permission. + Replaces a specified old color with a new color in the given shapes. Requires `content:write` permission. - Parameters - + shapes: Shape[] - + oldColor: Color - + newColor: Color + Parameters - Returns void + * shapes: Shape[] + * oldColor: Color + * newColor: Color - Example - ``` - context.replaceColor(shapes, oldColor, newColor); - ``` + Returns void + + Example + ``` + context.replaceColor(shapes, oldColor, newColor); + ``` uploadMediaUrl: |- ``` - uploadMediaUrl(name, url): Promise + uploadMediaUrl(name: string, url: string): Promise ``` - * Uploads media to Penpot and retrieves its image data. Requires `content:write` permission. + Uploads media to Penpot and retrieves its image data. Requires `content:write` permission. - Parameters - + name: string + Parameters - The name of the media. - + url: string + * name: string - The URL of the media to be uploaded. + The name of the media. + * url: string - Returns Promise + The URL of the media to be uploaded. - Returns a promise that resolves to the image data of the uploaded media. + Returns Promise - Example - ``` - const imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');console.log(imageData);// to insert the image in a shape we can doconst board = penpot.createBoard();const shape = penpot.createRectangle();board.appendChild(shape);shape.fills = [{ fillOpacity: 1, fillImage: imageData }]; - ``` + Returns a promise that resolves to the image data of the uploaded media. + + Example + ``` + const imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');console.log(imageData);// to insert the image in a shape we can doconst board = penpot.createBoard();const shape = penpot.createRectangle();board.appendChild(shape);shape.fills = [{ fillOpacity: 1, fillImage: imageData }]; + ``` uploadMediaData: |- ``` - uploadMediaData(name, data, mimeType): Promise + uploadMediaData( + name: string, + data: Uint8Array, + mimeType: string, + ): Promise ``` - * Uploads media to penpot and retrieves the image data. Requires `content:write` permission. + Uploads media to penpot and retrieves the image data. Requires `content:write` permission. - Parameters - + name: string + Parameters - The name of the media. - + data: Uint8Array + * name: string - The image content data - + mimeType: string + The name of the media. + * data: Uint8Array - Returns Promise + The image content data + * mimeType: string - Returns a promise that resolves to the image data of the uploaded media. + Returns Promise - Example - ``` - const imageData = await context.uploadMediaData('example', imageData, 'image/jpeg');console.log(imageData); - ``` + Returns a promise that resolves to the image data of the uploaded media. + + Example + ``` + const imageData = await context.uploadMediaData('example', imageData, 'image/jpeg');console.log(imageData); + ``` group: |- ``` - group(shapes): null | Group + group(shapes: Shape[]): Group | null ``` - * Groups the specified shapes. Requires `content:write` permission. + Groups the specified shapes. Requires `content:write` permission. - Parameters - + shapes: Shape[] + Parameters - An array of shapes to group. + * shapes: Shape[] - Returns null | Group + An array of shapes to group. - Returns the newly created group or `null` if the group could not be created. + Returns Group | null - Example - ``` - const penpotShapesArray = penpot.selection;penpot.group(penpotShapesArray); - ``` + Returns the newly created group or `null` if the group could not be created. + + Example + ``` + const penpotShapesArray = penpot.selection;penpot.group(penpotShapesArray); + ``` ungroup: |- ``` - ungroup(group, ...other): void + ungroup(group: Group, ...other: Group[]): void ``` - * Ungroups the specified group. Requires `content:write` permission. + Ungroups the specified group. Requires `content:write` permission. - Parameters - + group: Group + Parameters - The group to ungroup. - + ...other: Group[] + * group: Group - Additional groups to ungroup. + The group to ungroup. + * ...other: Group[] - Returns void + Additional groups to ungroup. - Example - ``` - const penpotShapesArray = penpot.selection;// We need to make sure that something is selected, and if the selected shape is a group,if (selected.length && penpot.utils.types.isGroup(penpotShapesArray[0])) { penpot.group(penpotShapesArray[0]);} - ``` + Returns void + + Example + ``` + const penpotShapesArray = penpot.selection;// We need to make sure that something is selected, and if the selected shape is a group,if (selected.length && penpot.utils.types.isGroup(penpotShapesArray[0])) { penpot.group(penpotShapesArray[0]);} + ``` createRectangle: |- ``` createRectangle(): Rectangle ``` - * Use this method to create the shape of a rectangle. Requires `content:write` permission. + Use this method to create the shape of a rectangle. Requires `content:write` permission. - Returns Rectangle + Returns Rectangle - Example - ``` - const shape = penpot.createRectangle();// just change the values like thisshape.name = "Example rectangle";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for a image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.borderRadius = 8;shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; - ``` + Example + ``` + const shape = penpot.createRectangle();// just change the values like thisshape.name = "Example rectangle";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for a image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.borderRadius = 8;shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; + ``` createBoard: |- ``` createBoard(): Board ``` - * Use this method to create a board. This is the first step before anything else, the container. Requires `content:write` permission. - Then you can add a gridlayout, flexlayout or add a shape inside the board. - Just a heads-up: board is a board in Penpot UI. + Use this method to create a board. This is the first step before anything else, the container. Requires `content:write` permission. + Then you can add a gridlayout, flexlayout or add a shape inside the board. + Just a heads-up: board is a board in Penpot UI. - Returns Board + Returns Board - Example - ``` - const board = penpot.createBoard();// to add grid layoutboard.addGridLayout();// to add flex layoutboard.addFlexLayout();// to create a shape inside the boardconst shape = penpot.createRectangle();board.appendChild(shape); - ``` + Example + ``` + const board = penpot.createBoard();// to add grid layoutboard.addGridLayout();// to add flex layoutboard.addFlexLayout();// to create a shape inside the boardconst shape = penpot.createRectangle();board.appendChild(shape); + ``` createEllipse: |- ``` createEllipse(): Ellipse ``` - * Use this method to create the shape of an ellipse. Requires `content:write` permission. + Use this method to create the shape of an ellipse. Requires `content:write` permission. - Returns Ellipse + Returns Ellipse - Example - ``` - const shape = penpot.createEllipse();// just change the values like thisshape.name = "Example ellipse";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for an image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; - ``` + Example + ``` + const shape = penpot.createEllipse();// just change the values like thisshape.name = "Example ellipse";// for solid colorshape.fills = [{ fillColor: "#7EFFF5" }];// for linear gradient colorshape.fills = [{ fillColorGradient: { "type": "linear", "startX": 0.5, "startY": 0, "endX": 0.5, "endY": 1, "width": 1, "stops": [ { "color": "#003ae9", "opacity": 1, "offset": 0 }, { "color": "#003ae9", "opacity": 0, "offset": 1 } ] }}];// for an image fillconst imageData = await context.uploadMediaUrl('example', 'https://example.com/image.jpg');shape.fills = [{ fillOpacity: 1, fillImage: imageData }];shape.strokes = [ { strokeColor: "#2e3434", strokeStyle: "solid", strokeWidth: 2, strokeAlignment: "center", },]; + ``` createPath: |- ``` createPath(): Path ``` - * Use this method to create a path. Requires `content:write` permission. + Use this method to create a path. Requires `content:write` permission. - Returns Path + Returns Path - Example - ``` - const path = penpot.createPath();path.name = "My path";// for solid colorpath.fills = [{ fillColor: "#7EFFF5" }]; - ``` + Example + ``` + const path = penpot.createPath();path.name = "My path";// for solid colorpath.fills = [{ fillColor: "#7EFFF5" }]; + ``` createBoolean: |- ``` - createBoolean(boolType, shapes): null | Boolean + createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null ``` - * Creates a Boolean shape based on the specified boolean operation and shapes. Requires `content:write` permission. + Creates a Boolean shape based on the specified boolean operation and shapes. Requires `content:write` permission. - Parameters - + boolType: BooleanType + Parameters - The type of boolean operation ('union', 'difference', 'exclude', 'intersection'). - + shapes: Shape[] + * boolType: BooleanType - An array of shapes to perform the boolean operation on. + The type of boolean operation ('union', 'difference', 'exclude', 'intersection'). + * shapes: Shape[] - Returns null | Boolean + An array of shapes to perform the boolean operation on. - Returns the newly created Boolean shape resulting from the boolean operation. + Returns Boolean | null - Example - ``` - const booleanShape = context.createBoolean('union', [shape1, shape2]); - ``` + Returns the newly created Boolean shape resulting from the boolean operation. + + Example + ``` + const booleanShape = context.createBoolean('union', [shape1, shape2]); + ``` createShapeFromSvg: |- ``` - createShapeFromSvg(svgString): null | Group + createShapeFromSvg(svgString: string): Group | null ``` - * Creates a Group from an SVG string. Requires `content:write` permission. + Creates a Group from an SVG string. Requires `content:write` permission. - Parameters - + svgString: string + Parameters - The SVG string representing the shapes to be converted into a group. + * svgString: string - Returns null | Group + The SVG string representing the shapes to be converted into a group. - Returns the newly created Group containing the shapes from the SVG. + Returns Group | null - Example - ``` - const svgGroup = context.createShapeFromSvg('...'); - ``` + Returns the newly created Group containing the shapes from the SVG. + + Example + ``` + const svgGroup = context.createShapeFromSvg('...'); + ``` createShapeFromSvgWithImages: |- ``` - createShapeFromSvgWithImages(svgString): Promise + createShapeFromSvgWithImages(svgString: string): Promise ``` - * Creates a Group from an SVG string. The SVG can have images and the method returns - a Promise because the shape will be available after all images are uploaded. - Requires `content:write` permission. + Creates a Group from an SVG string. The SVG can have images and the method returns + a Promise because the shape will be available after all images are uploaded. + Requires `content:write` permission. - Parameters - + svgString: string + Parameters - The SVG string representing the shapes to be converted into a group. + * svgString: string - Returns Promise + The SVG string representing the shapes to be converted into a group. - Returns a promise with the newly created Group containing the shapes from the SVG. + Returns Promise - Example - ``` - const svgGroup = await context.createShapeFromSvgWithImages('...'); - ``` + Returns a promise with the newly created Group containing the shapes from the SVG. + + Example + ``` + const svgGroup = await context.createShapeFromSvgWithImages('...'); + ``` createText: |- ``` - createText(text): null | Text + createText(text: string): Text | null ``` - * Creates a Text shape with the specified text content. Requires `content:write` permission. + Creates a Text shape with the specified text content. Requires `content:write` permission. - Parameters - + text: string + Parameters - The text content for the Text shape. + * text: string - Returns null | Text + The text content for the Text shape. - Returns the new created shape, if the shape wasn't created can return null. + Returns Text | null - Example - ``` - const board = penpot.createBoard();let text;text = penpot.createText();// just change the values like thistext.growType = 'auto-height';text.fontFamily = 'Work Sans';text.fontSize = '12';text.fills = [{fillColor: '#9f05ff', fillOpacity: 1}];text.strokes = [{strokeOpacity: 1, strokeStyle: 'solid', strokeWidth: 2, strokeColor: '#deabff', strokeAlignment: 'outer'}];board.appendChild(text); - ``` + Returns the new created shape, if the shape wasn't created can return null. + + Example + ``` + const board = penpot.createBoard();let text;text = penpot.createText();// just change the values like thistext.growType = 'auto-height';text.fontFamily = 'Work Sans';text.fontSize = '12';text.fills = [{fillColor: '#9f05ff', fillOpacity: 1}];text.strokes = [{strokeOpacity: 1, strokeStyle: 'solid', strokeWidth: 2, strokeColor: '#deabff', strokeAlignment: 'outer'}];board.appendChild(text); + ``` generateMarkup: |- ``` - generateMarkup(shapes, options?): string + generateMarkup(shapes: Shape[], options?: { type?: "html" | "svg" }): string ``` - * Generates markup for the given shapes. Requires `content:read` permission + Generates markup for the given shapes. Requires `content:read` permission - Parameters - + shapes: Shape[] - + options: { - type?: "html" | "svg"; - } - - Optionaltype?: "html" | "svg" + Parameters - Returns string + * shapes: Shape[] + * options: { type?: "html" | "svg" } - Example - ``` - const markup = context.generateMarkup(shapes, { type: 'html' });console.log(markup); - ``` + Returns string + + Example + ``` + const markup = context.generateMarkup(shapes, { type: 'html' });console.log(markup); + ``` generateStyle: |- ``` - generateStyle(shapes, options?): string + generateStyle( + shapes: Shape[], + options?: { + type?: "css"; + withPrelude?: boolean; + includeChildren?: boolean; + }, + ): string ``` - * Generates styles for the given shapes. Requires `content:read` permission + Generates styles for the given shapes. Requires `content:read` permission - Parameters - + shapes: Shape[] - + options: { - type?: "css"; - withPrelude?: boolean; - includeChildren?: boolean; - } - - Optionaltype?: "css" - - OptionalwithPrelude?: boolean - - OptionalincludeChildren?: boolean + Parameters - Returns string + * shapes: Shape[] + * options: { type?: "css"; withPrelude?: boolean; includeChildren?: boolean } - Example - ``` - const styles = context.generateStyle(shapes, { type: 'css' });console.log(styles); - ``` + Returns string + + Example + ``` + const styles = context.generateStyle(shapes, { type: 'css' });console.log(styles); + ``` generateFontFaces: |- ``` - generateFontFaces(shapes): Promise + generateFontFaces(shapes: Shape[]): Promise ``` - * Generates the fontfaces styles necessaries to render the shapes. - Requires `content:read` permission + Generates the fontfaces styles necessaries to render the shapes. + Requires `content:read` permission - Parameters - + shapes: Shape[] + Parameters - Returns Promise + * shapes: Shape[] - Example - ``` - const fontfaces = context.generateFontFaces(penpot.selection);console.log(fontfaces); - ``` + Returns Promise + + Example + ``` + const fontfaces = context.generateFontFaces(penpot.selection);console.log(fontfaces); + ``` addListener: |- ``` - addListener(type, callback, props?): symbol + addListener( + type: T, + callback: (event: EventsMap[T]) => void, + props?: { [key: string]: unknown }, + ): symbol ``` - * Adds the current callback as an event listener + Adds the current callback as an event listener - Type Parameters - + T extends keyof EventsMap + Type Parameters - Parameters - + type: T - + callback: ((event: EventsMap[T]) => void) - - ``` - (event): void - ``` + * T extends keyof EventsMap - * Parameters - + event: EventsMap[T] + Parameters - Returns void - + props: { - [key: string]: unknown; - } - - [key: string]: unknown + * type: T + * callback: (event: EventsMap[T]) => void + * props: { [key: string]: unknown } - Returns symbol + Returns symbol - Example - ``` - const listenerId = context.addListener('selectionchange', (event) => { console.log(event);}); - ``` + Example + ``` + const listenerId = context.addListener('selectionchange', (event) => { console.log(event);}); + ``` removeListener: |- ``` - removeListener(listenerId): void + removeListener(listenerId: symbol): void ``` - * Removes the listenerId from the list of listeners + Removes the listenerId from the list of listeners - Parameters - + listenerId: symbol + Parameters - Returns void + * listenerId: symbol - Example - ``` - context.removeListener(listenerId); - ``` + Returns void + + Example + ``` + context.removeListener(listenerId); + ``` openViewer: |- ``` openViewer(): void ``` - * Opens the viewer section. Requires `content:read` permission. + Opens the viewer section. Requires `content:read` permission. - Returns void + Returns void createPage: |- ``` createPage(): Page ``` - * Creates a new page. Requires `content:write` permission. + Creates a new page. Requires `content:write` permission. - Returns Page + Returns Page openPage: |- ``` - openPage(page, newWindow?): void + openPage(page: Page, newWindow?: boolean): void ``` - * Changes the current open page to given page. Requires `content:read` permission. + Changes the current open page to given page. Requires `content:read` permission. - Parameters - + page: Page + Parameters - the page to open - + newWindow: boolean + * page: Page - if true opens the page in a new window + the page to open + * newWindow: boolean - Returns void + if true opens the page in a new window - Example - ``` - context.openPage(page); - ``` + Returns void + + Example + ``` + context.openPage(page); + ``` alignHorizontal: |- ``` - alignHorizontal(shapes, direction): void + alignHorizontal(shapes: Shape[], direction: "center" | "left" | "right"): void ``` - * Aligning will move all the selected layers to a position relative to one - of them in the horizontal direction. + Aligning will move all the selected layers to a position relative to one + of them in the horizontal direction. - Parameters - + shapes: Shape[] + Parameters - to align - + direction: "center" | "left" | "right" + * shapes: Shape[] - where the shapes will be aligned + to align + * direction: "center" | "left" | "right" - Returns void + where the shapes will be aligned + + Returns void alignVertical: |- ``` - alignVertical(shapes, direction): void + alignVertical(shapes: Shape[], direction: "center" | "top" | "bottom"): void ``` - * Aligning will move all the selected layers to a position relative to one - of them in the vertical direction. + Aligning will move all the selected layers to a position relative to one + of them in the vertical direction. - Parameters - + shapes: Shape[] + Parameters - to align - + direction: "center" | "top" | "bottom" + * shapes: Shape[] - where the shapes will be aligned + to align + * direction: "center" | "top" | "bottom" - Returns void + where the shapes will be aligned + + Returns void distributeHorizontal: |- ``` - distributeHorizontal(shapes): void + distributeHorizontal(shapes: Shape[]): void ``` - * Distributing objects to position them horizontally with equal distances between them. + Distributing objects to position them horizontally with equal distances between them. - Parameters - + shapes: Shape[] + Parameters - to distribute + * shapes: Shape[] - Returns void + to distribute + + Returns void distributeVertical: |- ``` - distributeVertical(shapes): void + distributeVertical(shapes: Shape[]): void ``` - * Distributing objects to position them vertically with equal distances between them. + Distributing objects to position them vertically with equal distances between them. - Parameters - + shapes: Shape[] + Parameters - to distribute + * shapes: Shape[] - Returns void + to distribute + + Returns void flatten: |- ``` - flatten(shapes): Path[] + flatten(shapes: Shape[]): Path[] ``` - * Converts the shapes into Paths. If the shapes are complex will put together - all its paths into one. + Converts the shapes into Paths. If the shapes are complex will put together + all its paths into one. - Parameters - + shapes: Shape[] + Parameters - to flatten + * shapes: Shape[] - Returns Path[] + to flatten + + Returns Path[] ContextGeometryUtils: overview: |- Interface ContextGeometryUtils @@ -5286,11 +5240,8 @@ ContextGeometryUtils: ``` ``` - interface ContextGeometryUtils { - center(shapes: Shape[]): null | { - x: number; - y: number; - }; + interface ContextGeometryUtils { + center(shapes: Shape[]): { x: number; y: number } | null; } ``` @@ -5299,28 +5250,26 @@ ContextGeometryUtils: Methods: center: |- ``` - center(shapes): null | { - x: number; - y: number; - } + center(shapes: Shape[]): { x: number; y: number } | null ``` - * Calculates the center point of a given array of shapes. - This method computes the geometric center (centroid) of the bounding boxes of the provided shapes. + Calculates the center point of a given array of shapes. + This method computes the geometric center (centroid) of the bounding boxes of the provided shapes. - Parameters - + shapes: Shape[] + Parameters - The array of shapes to calculate the center for. + * shapes: Shape[] - Returns null | { x: number; y: number; } + The array of shapes to calculate the center for. - Returns the center point as an object with `x` and `y` coordinates, or null if the array is empty. + Returns { x: number; y: number } | null - Example - ``` - const centerPoint = geometryUtils.center(shapes);console.log(centerPoint); - ``` + Returns the center point as an object with `x` and `y` coordinates, or null if the array is empty. + + Example + ``` + const centerPoint = geometryUtils.center(shapes);console.log(centerPoint); + ``` ContextTypesUtils: overview: |- Interface ContextTypesUtils @@ -5334,18 +5283,20 @@ ContextTypesUtils: ``` ``` - interface ContextTypesUtils { - isBoard(shape: Shape): shape is Board; - isGroup(shape: Shape): shape is Group; - isMask(shape: Shape): shape is Group; - isBool(shape: Shape): shape is Boolean; - isRectangle(shape: Shape): shape is Rectangle; - isPath(shape: Shape): shape is Path; - isText(shape: Shape): shape is Text; - isEllipse(shape: Shape): shape is Ellipse; - isSVG(shape: Shape): shape is SvgRaw; - isVariantContainer(shape: Shape): shape is VariantContainer; - isVariantComponent(component: LibraryComponent): component is LibraryVariantComponent; + interface ContextTypesUtils { + isBoard(shape: Shape): shape is Board; + isGroup(shape: Shape): shape is Group; + isMask(shape: Shape): shape is Group; + isBool(shape: Shape): shape is Boolean; + isRectangle(shape: Shape): shape is Rectangle; + isPath(shape: Shape): shape is Path; + isText(shape: Shape): shape is Text; + isEllipse(shape: Shape): shape is Ellipse; + isSVG(shape: Shape): shape is SvgRaw; + isVariantContainer(shape: Shape): shape is VariantContainer; + isVariantComponent( + component: LibraryComponent, + ): component is LibraryVariantComponent; } ``` @@ -5354,169 +5305,182 @@ ContextTypesUtils: Methods: isBoard: |- ``` - isBoard(shape): shape is Board + isBoard(shape: Shape): shape is Board ``` - * Checks if the given shape is a board. + Checks if the given shape is a board. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Board + The shape to check. - Returns true if the shape is a board, otherwise false. + Returns shape is Board + + Returns true if the shape is a board, otherwise false. isGroup: |- ``` - isGroup(shape): shape is Group + isGroup(shape: Shape): shape is Group ``` - * Checks if the given shape is a group. + Checks if the given shape is a group. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Group + The shape to check. - Returns true if the shape is a Group, otherwise false. + Returns shape is Group + + Returns true if the shape is a Group, otherwise false. isMask: |- ``` - isMask(shape): shape is Group + isMask(shape: Shape): shape is Group ``` - * Checks if the given shape is a mask. + Checks if the given shape is a mask. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Group + The shape to check. - Returns true if the shape is a Group (acting as a mask), otherwise false. + Returns shape is Group + + Returns true if the shape is a Group (acting as a mask), otherwise false. isBool: |- ``` - isBool(shape): shape is Boolean + isBool(shape: Shape): shape is Boolean ``` - * Checks if the given shape is a boolean operation. + Checks if the given shape is a boolean operation. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Boolean + The shape to check. - Returns true if the shape is a Bool, otherwise false. + Returns shape is Boolean + + Returns true if the shape is a Bool, otherwise false. isRectangle: |- ``` - isRectangle(shape): shape is Rectangle + isRectangle(shape: Shape): shape is Rectangle ``` - * Checks if the given shape is a rectangle. + Checks if the given shape is a rectangle. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Rectangle + The shape to check. - Returns true if the shape is a Rectangle, otherwise false. + Returns shape is Rectangle + + Returns true if the shape is a Rectangle, otherwise false. isPath: |- ``` - isPath(shape): shape is Path + isPath(shape: Shape): shape is Path ``` - * Checks if the given shape is a path. + Checks if the given shape is a path. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Path + The shape to check. - Returns true if the shape is a Path, otherwise false. + Returns shape is Path + + Returns true if the shape is a Path, otherwise false. isText: |- ``` - isText(shape): shape is Text + isText(shape: Shape): shape is Text ``` - * Checks if the given shape is a text element. + Checks if the given shape is a text element. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Text + The shape to check. - Returns true if the shape is a Text, otherwise false. + Returns shape is Text + + Returns true if the shape is a Text, otherwise false. isEllipse: |- ``` - isEllipse(shape): shape is Ellipse + isEllipse(shape: Shape): shape is Ellipse ``` - * Checks if the given shape is an ellipse. + Checks if the given shape is an ellipse. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is Ellipse + The shape to check. - Returns true if the shape is an Ellipse, otherwise false. + Returns shape is Ellipse + + Returns true if the shape is an Ellipse, otherwise false. isSVG: |- ``` - isSVG(shape): shape is SvgRaw + isSVG(shape: Shape): shape is SvgRaw ``` - * Checks if the given shape is an SVG. + Checks if the given shape is an SVG. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is SvgRaw + The shape to check. - Returns true if the shape is a SvgRaw, otherwise false. + Returns shape is SvgRaw + + Returns true if the shape is a SvgRaw, otherwise false. isVariantContainer: |- ``` - isVariantContainer(shape): shape is VariantContainer + isVariantContainer(shape: Shape): shape is VariantContainer ``` - * Checks if the given shape is a variant container. + Checks if the given shape is a variant container. - Parameters - + shape: Shape + Parameters - The shape to check. + * shape: Shape - Returns shape is VariantContainer + The shape to check. - Returns true if the shape is a variant container, otherwise false. + Returns shape is VariantContainer + + Returns true if the shape is a variant container, otherwise false. isVariantComponent: |- ``` - isVariantComponent(component): component is LibraryVariantComponent + isVariantComponent( + component: LibraryComponent, + ): component is LibraryVariantComponent ``` - * Checks if the given component is a VariantComponent. + Checks if the given component is a VariantComponent. - Parameters - + component: LibraryComponent + Parameters - The component to check. + * component: LibraryComponent - Returns component is LibraryVariantComponent + The component to check. - Returns true if the component is a VariantComponent, otherwise false. + Returns component is LibraryVariantComponent + + Returns true if the component is a VariantComponent, otherwise false. ContextUtils: overview: |- Interface ContextUtils @@ -5525,9 +5489,9 @@ ContextUtils: Utility methods for various operations in Penpot. ``` - interface ContextUtils { - geometry: ContextGeometryUtils; - types: ContextTypesUtils; + interface ContextUtils { + geometry: ContextGeometryUtils; + types: ContextTypesUtils; } ``` @@ -5566,15 +5530,10 @@ Dissolve: Dissolve animation ``` - interface Dissolve { - type: "dissolve"; - duration: number; - easing?: - | "linear" - | "ease" - | "ease-in" - | "ease-out" - | "ease-in-out"; + interface Dissolve { + type: "dissolve"; + duration: number; + easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"; } ``` @@ -5583,7 +5542,7 @@ Dissolve: Properties: type: |- ``` - readonly type + readonly type: "dissolve" ``` Type of the animation @@ -5595,12 +5554,7 @@ Dissolve: Duration of the animation effect easing: |- ``` - readonly easing?: - | "linear" - | "ease" - | "ease-in" - | "ease-out" - | "ease-in-out" + readonly easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" ``` Function that the dissolve effect will follow for the interpolation. @@ -5614,48 +5568,38 @@ Ellipse: This interface extends `ShapeBase` and includes properties specific to ellipses. ``` - interface Ellipse { - type: "ellipse"; - fills: Fill[]; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Ellipse { + type: "ellipse"; + fills: Fill[]; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -5671,58 +5615,57 @@ Ellipse: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Ellipse @@ -5732,7 +5675,7 @@ Ellipse: Properties: type: |- ``` - type + type: "ellipse" ``` fills: |- ``` @@ -5756,7 +5699,7 @@ Ellipse: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -5833,23 +5776,13 @@ Ellipse: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -5891,7 +5824,7 @@ Ellipse: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -5993,9 +5926,7 @@ Ellipse: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -6014,454 +5945,466 @@ Ellipse: Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void EventsMap: overview: |- Interface EventsMap @@ -6476,14 +6419,14 @@ EventsMap: ``` ``` - interface EventsMap { - pagechange: Page; - filechange: File; - selectionchange: string[]; - themechange: Theme; - finish: string; - shapechange: Shape; - contentsave: void; + interface EventsMap { + pagechange: Page; + filechange: File; + selectionchange: string[]; + themechange: Theme; + finish: string; + shapechange: Shape; + contentsave: void; } ``` @@ -6543,15 +6486,11 @@ Export: This interface includes properties for defining export configurations. ``` - interface Export { - type: - | "svg" - | "png" - | "jpeg" - | "pdf"; - scale?: number; - suffix?: string; - skipChildren?: boolean; + interface Export { + type: "svg" | "png" | "jpeg" | "pdf"; + scale?: number; + suffix?: string; + skipChildren?: boolean; } ``` @@ -6560,11 +6499,7 @@ Export: Properties: type: |- ``` - type: - | "svg" - | "png" - | "jpeg" - | "pdf" + type: "svg" | "png" | "jpeg" | "pdf" ``` Type of the file to export. Can be one of the following values: png, jpeg, svg, pdf @@ -6595,26 +6530,27 @@ File: It includes properties for the file's identifier, name, and revision number. ``` - interface File { - id: string; - name: string; - revn: number; - pages: Page[]; - export(exportType: "penpot" | "zip", libraryExportType?: "all" | "merge" | "detach"): Promise; - findVersions(criteria?: { - createdBy: User; - }): Promise; - saveVersion(label: string): Promise; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface File { + id: string; + name: string; + revn: number; + pages: Page[]; + export( + exportType: "penpot" | "zip", + libraryExportType?: "all" | "merge" | "detach", + ): Promise>; + findVersions(criteria?: { createdBy: User }): Promise; + saveVersion(label: string): Promise; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * PluginData + File @@ -6649,163 +6585,171 @@ File: Methods: export: |- ``` - export(exportType, libraryExportType?): Promise + export( + exportType: "penpot" | "zip", + libraryExportType?: "all" | "merge" | "detach", + ): Promise> ``` - * Parameters - + exportType: "penpot" | "zip" - + libraryExportType: "all" | "merge" | "detach" + Parameters - Returns Promise + * exportType: "penpot" | "zip" + * libraryExportType: "all" | "merge" | "detach" + + Returns Promise> findVersions: |- ``` - findVersions(criteria?): Promise + findVersions(criteria?: { createdBy: User }): Promise ``` - * Retrieves the versions for the file. + Retrieves the versions for the file. - Parameters - + criteria: { - createdBy: User; - } - - createdBy: User + Parameters - Returns Promise + * criteria: { createdBy: User } + + Returns Promise saveVersion: |- ``` - saveVersion(label): Promise + saveVersion(label: string): Promise ``` - * Saves the current version into the versions history. - Requires the `content:write` permission. + Saves the current version into the versions history. + Requires the `content:write` permission. - Parameters - + label: string + Parameters - Returns Promise + * label: string + + Returns Promise getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` FileVersion: overview: |- Interface FileVersion @@ -6814,14 +6758,14 @@ FileVersion: Type defining the file version properties. ``` - interface FileVersion { - label: string; - createdBy?: User; - createdAt: Date; - isAutosave: boolean; - restore(): void; - remove(): Promise; - pin(): Promise; + interface FileVersion { + label: string; + createdBy?: User; + createdAt: Date; + isAutosave: boolean; + restore(): void; + remove(): Promise; + pin(): Promise; } ``` @@ -6859,25 +6803,25 @@ FileVersion: restore(): void ``` - * Returns void + Returns void remove: |- ``` remove(): Promise ``` - * Remove the current version. - Requires the `content:write` permission. + Remove the current version. + Requires the `content:write` permission. - Returns Promise + Returns Promise pin: |- ``` pin(): Promise ``` - * Converts an autosave version into a permanent version. - Requires the `content:write` permission. + Converts an autosave version into a permanent version. + Requires the `content:write` permission. - Returns Promise + Returns Promise Fill: overview: |- Interface Fill @@ -6887,13 +6831,13 @@ Fill: This interface includes properties for defining solid color fills, gradient fills, and image fills. ``` - interface Fill { - fillColor?: string; - fillOpacity?: number; - fillColorGradient?: Gradient; - fillColorRefFile?: string; - fillColorRefId?: string; - fillImage?: ImageData; + interface Fill { + fillColor?: string; + fillOpacity?: number; + fillColorGradient?: Gradient; + fillColorRefFile?: string; + fillColorRefId?: string; + fillImage?: ImageData; } ``` @@ -6945,8 +6889,8 @@ Flags: This subcontext allows the API o change certain defaults ``` - interface Flags { - naturalChildOrdering: boolean; + interface Flags { + naturalChildOrdering: boolean; } ``` @@ -6972,55 +6916,48 @@ FlexLayout: wrapping behavior, and child management of a flex layout. ``` - interface FlexLayout { - alignItems?: - | "center" - | "start" - | "end" - | "stretch"; - alignContent?: + interface FlexLayout { + alignItems?: "center" | "start" | "end" | "stretch"; + alignContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" - | "space-evenly"; - justifyItems?: - | "center" - | "start" - | "end" - | "stretch"; - justifyContent?: + | "space-evenly"; + justifyItems?: "center" + | "start" + | "end" + | "stretch"; + justifyContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" - | "space-evenly"; - rowGap: number; - columnGap: number; - verticalPadding: number; - horizontalPadding: number; - topPadding: number; - rightPadding: number; - bottomPadding: number; - leftPadding: number; - horizontalSizing: "fill" | "auto" | "fit-content"; - verticalSizing: "fill" | "auto" | "fit-content"; - remove(): void; - dir: - | "row" - | "row-reverse" - | "column" - | "column-reverse"; - wrap?: "wrap" | "nowrap"; - appendChild(child: Shape): void; + | "space-evenly"; + rowGap: number; + columnGap: number; + verticalPadding: number; + horizontalPadding: number; + topPadding: number; + rightPadding: number; + bottomPadding: number; + leftPadding: number; + horizontalSizing: "fill" + | "auto" + | "fit-content"; + verticalSizing: "fill" | "auto" | "fit-content"; + remove(): void; + dir: "row" | "row-reverse" | "column" | "column-reverse"; + wrap?: "wrap" | "nowrap"; + appendChild(child: Shape): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * CommonLayout + FlexLayout @@ -7030,11 +6967,7 @@ FlexLayout: Properties: alignItems: |- ``` - alignItems?: - | "center" - | "start" - | "end" - | "stretch" + alignItems?: "center" | "start" | "end" | "stretch" ``` The `alignItems` property specifies the default alignment for items inside the container. @@ -7046,7 +6979,7 @@ FlexLayout: * 'stretch': Items are stretched to fill the container. alignContent: |- ``` - alignContent?: + alignContent?: | "center" | "start" | "end" @@ -7068,11 +7001,7 @@ FlexLayout: * 'stretch': Content is stretched to fill the container. justifyItems: |- ``` - justifyItems?: - | "center" - | "start" - | "end" - | "stretch" + justifyItems?: "center" | "start" | "end" | "stretch" ``` The `justifyItems` property specifies the default justification for items inside the container. @@ -7084,7 +7013,7 @@ FlexLayout: * 'stretch': Items are stretched to fill the container. justifyContent: |- ``` - justifyContent?: + justifyContent?: | "center" | "start" | "end" @@ -7176,11 +7105,7 @@ FlexLayout: * 'auto': The container size is determined automatically. dir: |- ``` - dir: - | "row" - | "row-reverse" - | "column" - | "column-reverse" + dir: "row" | "row-reverse" | "column" | "column-reverse" ``` The direction of the flex layout. @@ -7204,27 +7129,28 @@ FlexLayout: remove(): void ``` - * The `remove` method removes the layout. + The `remove` method removes the layout. - Returns void + Returns void appendChild: |- ``` - appendChild(child): void + appendChild(child: Shape): void ``` - * Appends a child element to the flex layout. + Appends a child element to the flex layout. - Parameters - + child: Shape + Parameters - The child element to be appended, of type `Shape`. + * child: Shape - Returns void + The child element to be appended, of type `Shape`. - Example - ``` - flexLayout.appendChild(childShape); - ``` + Returns void + + Example + ``` + flexLayout.appendChild(childShape); + ``` Flow: overview: |- Interface Flow @@ -7233,11 +7159,11 @@ Flow: Defines an interaction flow inside penpot. A flow is defined by a starting board for an interaction. ``` - interface Flow { - page: Page; - name: string; - startingBoard: Board; - remove(): void; + interface Flow { + page: Page; + name: string; + startingBoard: Board; + remove(): void; } ``` @@ -7268,9 +7194,9 @@ Flow: remove(): void ``` - * Removes the flow from the page + Removes the flow from the page - Returns void + Returns void Font: overview: |- Interface Font @@ -7280,16 +7206,16 @@ Font: This interface provides properties and methods for describing and applying fonts within Penpot. ``` - interface Font { - name: string; - fontId: string; - fontFamily: string; - fontStyle?: null | "normal" | "italic"; - fontVariantId: string; - fontWeight: string; - variants: FontVariant[]; - applyToText(text: Text, variant?: FontVariant): void; - applyToRange(range: TextRange, variant?: FontVariant): void; + interface Font { + name: string; + fontId: string; + fontFamily: string; + fontStyle?: "normal" | "italic" | null; + fontVariantId: string; + fontWeight: string; + variants: FontVariant[]; + applyToText(text: Text, variant?: FontVariant): void; + applyToRange(range: TextRange, variant?: FontVariant): void; } ``` @@ -7316,7 +7242,7 @@ Font: The font family of the font. fontStyle: |- ``` - fontStyle?: null | "normal" | "italic" + fontStyle?: "normal" | "italic" | null ``` The default font style of the font. @@ -7341,46 +7267,48 @@ Font: Methods: applyToText: |- ``` - applyToText(text, variant?): void + applyToText(text: Text, variant?: FontVariant): void ``` - * Applies the font styles to a text shape. + Applies the font styles to a text shape. - Parameters - + text: Text + Parameters - The text shape to apply the font styles to. - + variant: FontVariant + * text: Text - Optional. The specific font variant to apply. If not provided, applies the default variant. + The text shape to apply the font styles to. + * variant: FontVariant - Returns void + Optional. The specific font variant to apply. If not provided, applies the default variant. - Example - ``` - font.applyToText(textShape, fontVariant); - ``` + Returns void + + Example + ``` + font.applyToText(textShape, fontVariant); + ``` applyToRange: |- ``` - applyToRange(range, variant?): void + applyToRange(range: TextRange, variant?: FontVariant): void ``` - * Applies the font styles to a text range within a text shape. + Applies the font styles to a text range within a text shape. - Parameters - + range: TextRange + Parameters - The text range to apply the font styles to. - + variant: FontVariant + * range: TextRange - Optional. The specific font variant to apply. If not provided, applies the default variant. + The text range to apply the font styles to. + * variant: FontVariant - Returns void + Optional. The specific font variant to apply. If not provided, applies the default variant. - Example - ``` - font.applyToRange(textRange, fontVariant); - ``` + Returns void + + Example + ``` + font.applyToRange(textRange, fontVariant); + ``` FontVariant: overview: |- Interface FontVariant @@ -7390,11 +7318,11 @@ FontVariant: This interface provides properties for describing the characteristics of a font variant. ``` - interface FontVariant { - name: string; - fontVariantId: string; - fontWeight: string; - fontStyle: "normal" | "italic"; + interface FontVariant { + name: string; + fontVariantId: string; + fontWeight: string; + fontStyle: "normal" | "italic"; } ``` @@ -7434,12 +7362,12 @@ FontsContext: This interface provides methods to interact with fonts, such as retrieving fonts by ID or name. ``` - interface FontsContext { - all: Font[]; - findById(id: string): null | Font; - findByName(name: string): null | Font; - findAllById(id: string): Font[]; - findAllByName(name: string): Font[]; + interface FontsContext { + all: Font[]; + findById(id: string): Font | null; + findByName(name: string): Font | null; + findAllById(id: string): Font[]; + findAllByName(name: string): Font[]; } ``` @@ -7455,84 +7383,88 @@ FontsContext: Methods: findById: |- ``` - findById(id): null | Font + findById(id: string): Font | null ``` - * Finds a font by its unique identifier. + Finds a font by its unique identifier. - Parameters - + id: string + Parameters - The ID of the font to find. + * id: string - Returns null | Font + The ID of the font to find. - Returns the `Font` object if found, otherwise `null`. + Returns Font | null - Example - ``` - const font = fontsContext.findById('font-id');if (font) { console.log(font.name);} - ``` + Returns the `Font` object if found, otherwise `null`. + + Example + ``` + const font = fontsContext.findById('font-id');if (font) { console.log(font.name);} + ``` findByName: |- ``` - findByName(name): null | Font + findByName(name: string): Font | null ``` - * Finds a font by its name. + Finds a font by its name. - Parameters - + name: string + Parameters - The name of the font to find. + * name: string - Returns null | Font + The name of the font to find. - Returns the `Font` object if found, otherwise `null`. + Returns Font | null - Example - ``` - const font = fontsContext.findByName('font-name');if (font) { console.log(font.name);} - ``` + Returns the `Font` object if found, otherwise `null`. + + Example + ``` + const font = fontsContext.findByName('font-name');if (font) { console.log(font.name);} + ``` findAllById: |- ``` - findAllById(id): Font[] + findAllById(id: string): Font[] ``` - * Finds all fonts matching a specific ID. + Finds all fonts matching a specific ID. - Parameters - + id: string + Parameters - The ID to match against. + * id: string - Returns Font[] + The ID to match against. - Returns an array of `Font` objects matching the provided ID. + Returns Font[] - Example - ``` - const fonts = fontsContext.findAllById('font-id');console.log(fonts); - ``` + Returns an array of `Font` objects matching the provided ID. + + Example + ``` + const fonts = fontsContext.findAllById('font-id');console.log(fonts); + ``` findAllByName: |- ``` - findAllByName(name): Font[] + findAllByName(name: string): Font[] ``` - * Finds all fonts matching a specific name. + Finds all fonts matching a specific name. - Parameters - + name: string + Parameters - The name to match against. + * name: string - Returns Font[] + The name to match against. - Returns an array of `Font` objects matching the provided name. + Returns Font[] - Example - ``` - const fonts = fontsContext.findAllByName('font-name');console.log(fonts); - ``` + Returns an array of `Font` objects matching the provided name. + + Example + ``` + const fonts = fontsContext.findAllByName('font-name');console.log(fonts); + ``` GridLayout: overview: |- Interface GridLayout @@ -7542,60 +7474,57 @@ GridLayout: It includes properties and methods to manage rows, columns, and child elements within the grid. ``` - interface GridLayout { - alignItems?: - | "center" - | "start" - | "end" - | "stretch"; - alignContent?: + interface GridLayout { + alignItems?: "center" | "start" | "end" | "stretch"; + alignContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" - | "space-evenly"; - justifyItems?: - | "center" - | "start" - | "end" - | "stretch"; - justifyContent?: + | "space-evenly"; + justifyItems?: "center" + | "start" + | "end" + | "stretch"; + justifyContent?: | "center" | "start" | "end" | "stretch" | "space-between" | "space-around" - | "space-evenly"; - rowGap: number; - columnGap: number; - verticalPadding: number; - horizontalPadding: number; - topPadding: number; - rightPadding: number; - bottomPadding: number; - leftPadding: number; - horizontalSizing: "fill" | "auto" | "fit-content"; - verticalSizing: "fill" | "auto" | "fit-content"; - remove(): void; - dir: "row" | "column"; - rows: Track[]; - columns: Track[]; - addRow(type: TrackType, value?: number): void; - addRowAtIndex(index: number, type: TrackType, value?: number): void; - addColumn(type: TrackType, value?: number): void; - addColumnAtIndex(index: number, type: TrackType, value: number): void; - removeRow(index: number): void; - removeColumn(index: number): void; - setColumn(index: number, type: TrackType, value?: number): void; - setRow(index: number, type: TrackType, value?: number): void; - appendChild(child: Shape, row: number, column: number): void; + | "space-evenly"; + rowGap: number; + columnGap: number; + verticalPadding: number; + horizontalPadding: number; + topPadding: number; + rightPadding: number; + bottomPadding: number; + leftPadding: number; + horizontalSizing: "fill" + | "auto" + | "fit-content"; + verticalSizing: "fill" | "auto" | "fit-content"; + remove(): void; + dir: "row" | "column"; + rows: Track[]; + columns: Track[]; + addRow(type: TrackType, value?: number): void; + addRowAtIndex(index: number, type: TrackType, value?: number): void; + addColumn(type: TrackType, value?: number): void; + addColumnAtIndex(index: number, type: TrackType, value: number): void; + removeRow(index: number): void; + removeColumn(index: number): void; + setColumn(index: number, type: TrackType, value?: number): void; + setRow(index: number, type: TrackType, value?: number): void; + appendChild(child: Shape, row: number, column: number): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * CommonLayout + GridLayout @@ -7605,11 +7534,7 @@ GridLayout: Properties: alignItems: |- ``` - alignItems?: - | "center" - | "start" - | "end" - | "stretch" + alignItems?: "center" | "start" | "end" | "stretch" ``` The `alignItems` property specifies the default alignment for items inside the container. @@ -7621,7 +7546,7 @@ GridLayout: * 'stretch': Items are stretched to fill the container. alignContent: |- ``` - alignContent?: + alignContent?: | "center" | "start" | "end" @@ -7643,11 +7568,7 @@ GridLayout: * 'stretch': Content is stretched to fill the container. justifyItems: |- ``` - justifyItems?: - | "center" - | "start" - | "end" - | "stretch" + justifyItems?: "center" | "start" | "end" | "stretch" ``` The `justifyItems` property specifies the default justification for items inside the container. @@ -7659,7 +7580,7 @@ GridLayout: * 'stretch': Items are stretched to fill the container. justifyContent: |- ``` - justifyContent?: + justifyContent?: | "center" | "start" | "end" @@ -7776,207 +7697,216 @@ GridLayout: remove(): void ``` - * The `remove` method removes the layout. + The `remove` method removes the layout. - Returns void + Returns void addRow: |- ``` - addRow(type, value?): void + addRow(type: TrackType, value?: number): void ``` - * Adds a new row to the grid. + Adds a new row to the grid. - Parameters - + type: TrackType + Parameters - The type of the row to add. - + value: number + * type: TrackType - The value associated with the row type (optional). + The type of the row to add. + * value: number - Returns void + The value associated with the row type (optional). - Example - ``` - const board = penpot.createBoard();const grid = board.addGridLayout();grid.addRow("flex", 1); - ``` + Returns void + + Example + ``` + const board = penpot.createBoard();const grid = board.addGridLayout();grid.addRow("flex", 1); + ``` addRowAtIndex: |- ``` - addRowAtIndex(index, type, value?): void + addRowAtIndex(index: number, type: TrackType, value?: number): void ``` - * Adds a new row to the grid at the specified index. + Adds a new row to the grid at the specified index. - Parameters - + index: number + Parameters - The index at which to add the row. - + type: TrackType + * index: number - The type of the row to add. - + value: number + The index at which to add the row. + * type: TrackType - The value associated with the row type (optional). + The type of the row to add. + * value: number - Returns void + The value associated with the row type (optional). - Example - ``` - gridLayout.addRowAtIndex(0, 'fixed', 100); - ``` + Returns void + + Example + ``` + gridLayout.addRowAtIndex(0, 'fixed', 100); + ``` addColumn: |- ``` - addColumn(type, value?): void + addColumn(type: TrackType, value?: number): void ``` - * Adds a new column to the grid. + Adds a new column to the grid. - Parameters - + type: TrackType + Parameters - The type of the column to add. - + value: number + * type: TrackType - The value associated with the column type (optional). + The type of the column to add. + * value: number - Returns void + The value associated with the column type (optional). - Example - ``` - const board = penpot.createBoard();const grid = board.addGridLayout();grid.addColumn('percent', 50); - ``` + Returns void + + Example + ``` + const board = penpot.createBoard();const grid = board.addGridLayout();grid.addColumn('percent', 50); + ``` addColumnAtIndex: |- ``` - addColumnAtIndex(index, type, value): void + addColumnAtIndex(index: number, type: TrackType, value: number): void ``` - * Adds a new column to the grid at the specified index. + Adds a new column to the grid at the specified index. - Parameters - + index: number + Parameters - The index at which to add the column. - + type: TrackType + * index: number - The type of the column to add. - + value: number + The index at which to add the column. + * type: TrackType - The value associated with the column type. + The type of the column to add. + * value: number - Returns void + The value associated with the column type. - Example - ``` - gridLayout.addColumnAtIndex(1, 'auto'); - ``` + Returns void + + Example + ``` + gridLayout.addColumnAtIndex(1, 'auto'); + ``` removeRow: |- ``` - removeRow(index): void + removeRow(index: number): void ``` - * Removes a row from the grid at the specified index. + Removes a row from the grid at the specified index. - Parameters - + index: number + Parameters - The index of the row to remove. + * index: number - Returns void + The index of the row to remove. - Example - ``` - gridLayout.removeRow(2); - ``` + Returns void + + Example + ``` + gridLayout.removeRow(2); + ``` removeColumn: |- ``` - removeColumn(index): void + removeColumn(index: number): void ``` - * Removes a column from the grid at the specified index. + Removes a column from the grid at the specified index. - Parameters - + index: number + Parameters - The index of the column to remove. + * index: number - Returns void + The index of the column to remove. - Example - ``` - gridLayout.removeColumn(3); - ``` + Returns void + + Example + ``` + gridLayout.removeColumn(3); + ``` setColumn: |- ``` - setColumn(index, type, value?): void + setColumn(index: number, type: TrackType, value?: number): void ``` - * Sets the properties of a column at the specified index. + Sets the properties of a column at the specified index. - Parameters - + index: number + Parameters - The index of the column to set. - + type: TrackType + * index: number - The type of the column. - + value: number + The index of the column to set. + * type: TrackType - The value associated with the column type (optional). + The type of the column. + * value: number - Returns void + The value associated with the column type (optional). - Example - ``` - gridLayout.setColumn(0, 'fixed', 200); - ``` + Returns void + + Example + ``` + gridLayout.setColumn(0, 'fixed', 200); + ``` setRow: |- ``` - setRow(index, type, value?): void + setRow(index: number, type: TrackType, value?: number): void ``` - * Sets the properties of a row at the specified index. + Sets the properties of a row at the specified index. - Parameters - + index: number + Parameters - The index of the row to set. - + type: TrackType + * index: number - The type of the row. - + value: number + The index of the row to set. + * type: TrackType - The value associated with the row type (optional). + The type of the row. + * value: number - Returns void + The value associated with the row type (optional). - Example - ``` - gridLayout.setRow(1, 'flex'); - ``` + Returns void + + Example + ``` + gridLayout.setRow(1, 'flex'); + ``` appendChild: |- ``` - appendChild(child, row, column): void + appendChild(child: Shape, row: number, column: number): void ``` - * Appends a child element to the grid at the specified row and column. + Appends a child element to the grid at the specified row and column. - Parameters - + child: Shape + Parameters - The child element to append. - + row: number + * child: Shape - The row index where the child will be placed. - + column: number + The child element to append. + * row: number - The column index where the child will be placed. + The row index where the child will be placed. + * column: number - Returns void + The column index where the child will be placed. - Example - ``` - gridLayout.appendChild(childShape, 0, 1); - ``` + Returns void + + Example + ``` + gridLayout.appendChild(childShape, 0, 1); + ``` Group: overview: |- Interface Group @@ -7986,53 +7916,43 @@ Group: This interface extends `ShapeBase` and includes properties and methods specific to groups. ``` - interface Group { - type: "group"; - children: Shape[]; - appendChild(child: Shape): void; - insertChild(index: number, child: Shape): void; - isMask(): boolean; - makeMask(): void; - removeMask(): void; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Group { + type: "group"; + children: Shape[]; + appendChild(child: Shape): void; + insertChild(index: number, child: Shape): void; + isMask(): boolean; + makeMask(): void; + removeMask(): void; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -8048,59 +7968,59 @@ Group: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - fills: Fill[] | "mixed"; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + fills: Fill[] + | "mixed"; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Group @@ -8110,7 +8030,7 @@ Group: Properties: type: |- ``` - readonly type + readonly type: "group" ``` The type of the shape, which is always 'group' for groups. @@ -8134,7 +8054,7 @@ Group: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -8211,23 +8131,13 @@ Group: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -8269,7 +8179,7 @@ Group: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -8377,9 +8287,7 @@ Group: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -8398,518 +8306,532 @@ Group: Methods: appendChild: |- ``` - appendChild(child): void + appendChild(child: Shape): void ``` - * Appends a child shape to the group. + Appends a child shape to the group. - Parameters - + child: Shape + Parameters - The child shape to append. + * child: Shape - Returns void + The child shape to append. - Example - ``` - group.appendChild(childShape); - ``` + Returns void + + Example + ``` + group.appendChild(childShape); + ``` insertChild: |- ``` - insertChild(index, child): void + insertChild(index: number, child: Shape): void ``` - * Inserts a child shape at the specified index within the group. + Inserts a child shape at the specified index within the group. - Parameters - + index: number + Parameters - The index at which to insert the child shape. - + child: Shape + * index: number - The child shape to insert. + The index at which to insert the child shape. + * child: Shape - Returns void + The child shape to insert. - Example - ``` - group.insertChild(0, childShape); - ``` + Returns void + + Example + ``` + group.insertChild(0, childShape); + ``` isMask: |- ``` isMask(): boolean ``` - * Checks if the group is currently a mask. - A mask defines a clipping path for its child shapes. + Checks if the group is currently a mask. + A mask defines a clipping path for its child shapes. - Returns boolean + Returns boolean makeMask: |- ``` makeMask(): void ``` - * Converts the group into a mask. + Converts the group into a mask. - Returns void + Returns void removeMask: |- ``` removeMask(): void ``` - * Removes the mask from the group. + Removes the mask from the group. - Returns void + Returns void getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void GuideColumn: overview: |- Interface GuideColumn @@ -8919,10 +8841,10 @@ GuideColumn: This interface includes properties for defining the type, visibility, and parameters of column guides within a board. ``` - interface GuideColumn { - type: "column"; - display: boolean; - params: GuideColumnParams; + interface GuideColumn { + type: "column"; + display: boolean; + params: GuideColumnParams; } ``` @@ -8931,7 +8853,7 @@ GuideColumn: Properties: type: |- ``` - type + type: "column" ``` The type of the guide, which is always 'column' for column guides. @@ -8956,20 +8878,13 @@ GuideColumnParams: This interface includes properties for defining the appearance and layout of column guides within a board. ``` - interface GuideColumnParams { - color: { - color: string; - opacity: number; - }; - type?: - | "center" - | "left" - | "right" - | "stretch"; - size?: number; - margin?: number; - itemLength?: number; - gutter?: number; + interface GuideColumnParams { + color: { color: string; opacity: number }; + type?: "center" | "left" | "right" | "stretch"; + size?: number; + margin?: number; + itemLength?: number; + gutter?: number; } ``` @@ -8978,20 +8893,13 @@ GuideColumnParams: Properties: color: |- ``` - color: { - color: string; - opacity: number; - } + color: { color: string; opacity: number } ``` The color configuration for the column guides. type: |- ``` - type?: - | "center" - | "left" - | "right" - | "stretch" + type?: "center" | "left" | "right" | "stretch" ``` The optional alignment type of the column guides. @@ -9033,10 +8941,10 @@ GuideRow: This interface includes properties for defining the type, visibility, and parameters of row guides within a board. ``` - interface GuideRow { - type: "row"; - display: boolean; - params: GuideColumnParams; + interface GuideRow { + type: "row"; + display: boolean; + params: GuideColumnParams; } ``` @@ -9045,7 +8953,7 @@ GuideRow: Properties: type: |- ``` - type + type: "row" ``` The type of the guide, which is always 'row' for row guides. @@ -9071,10 +8979,10 @@ GuideSquare: This interface includes properties for defining the type, visibility, and parameters of square guides within a board. ``` - interface GuideSquare { - type: "square"; - display: boolean; - params: GuideSquareParams; + interface GuideSquare { + type: "square"; + display: boolean; + params: GuideSquareParams; } ``` @@ -9083,7 +8991,7 @@ GuideSquare: Properties: type: |- ``` - type + type: "square" ``` The type of the guide, which is always 'square' for square guides. @@ -9108,12 +9016,9 @@ GuideSquareParams: This interface includes properties for defining the appearance and size of square guides within a board. ``` - interface GuideSquareParams { - color: { - color: string; - opacity: number; - }; - size?: number; + interface GuideSquareParams { + color: { color: string; opacity: number }; + size?: number; } ``` @@ -9122,10 +9027,7 @@ GuideSquareParams: Properties: color: |- ``` - color: { - color: string; - opacity: number; - } + color: { color: string; opacity: number } ``` The color configuration for the square guides. @@ -9143,9 +9045,9 @@ HistoryContext: This object allows to access to some history functions ``` - interface HistoryContext { - undoBlockBegin(): Symbol; - undoBlockFinish(blockId: Symbol): void; + interface HistoryContext { + undoBlockBegin(): Symbol; + undoBlockFinish(blockId: Symbol): void; } ``` @@ -9157,30 +9059,31 @@ HistoryContext: undoBlockBegin(): Symbol ``` - * Starts an undo block. All operations done inside this block will be undone together until - a call to `undoBlockFinish` is called. + Starts an undo block. All operations done inside this block will be undone together until + a call to `undoBlockFinish` is called. - Returns Symbol + Returns Symbol - the block identifier + the block identifier undoBlockFinish: |- ``` - undoBlockFinish(blockId): void + undoBlockFinish(blockId: Symbol): void ``` - * Ends the undo block started with `undoBlockBegin` + Ends the undo block started with `undoBlockBegin` - Parameters - + blockId: Symbol + Parameters - is the id returned by `undoBlockBegin` + * blockId: Symbol - Returns void + is the id returned by `undoBlockBegin` - Example - ``` - historyContext.undoBlockFinish(blockId); - ``` + Returns void + + Example + ``` + historyContext.undoBlockFinish(blockId); + ``` Image: overview: |- Interface Image @@ -9190,48 +9093,38 @@ Image: This interface extends `ShapeBase` and includes properties specific to image shapes. ``` - interface Image { - type: "image"; - fills: Fill[]; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Image { + type: "image"; + fills: Fill[]; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -9247,58 +9140,57 @@ Image: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Image @@ -9308,7 +9200,7 @@ Image: Properties: type: |- ``` - type + type: "image" ``` fills: |- ``` @@ -9332,7 +9224,7 @@ Image: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -9409,23 +9301,13 @@ Image: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -9467,7 +9349,7 @@ Image: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -9569,9 +9451,7 @@ Image: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -9590,454 +9470,466 @@ Image: Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void Interaction: overview: |- Interface Interaction @@ -10046,12 +9938,12 @@ Interaction: Penpot allows you to prototype interactions by connecting boards, which can act as screens. ``` - interface Interaction { - shape?: Shape; - trigger: Trigger; - delay?: null | number; - action: Action; - remove(): void; + interface Interaction { + shape?: Shape; + trigger: Trigger; + delay?: number | null; + action: Action; + remove(): void; } ``` @@ -10072,7 +9964,7 @@ Interaction: The user action that will start the interaction. delay: |- ``` - delay?: null | number + delay?: number | null ``` Time in **milliseconds** after the action will happen. Only applies to `after-delay` triggers. @@ -10088,9 +9980,9 @@ Interaction: remove(): void ``` - * Removes the interaction + Removes the interaction - Returns void + Returns void LayoutCellProperties: overview: |- Interface LayoutCellProperties @@ -10099,13 +9991,13 @@ LayoutCellProperties: Properties for defining the layout of a cell in Penpot. ``` - interface LayoutCellProperties { - row?: number; - rowSpan?: number; - column?: number; - columnSpan?: number; - areaName?: string; - position?: "area" | "auto" | "manual"; + interface LayoutCellProperties { + row?: number; + rowSpan?: number; + column?: number; + columnSpan?: number; + areaName?: string; + position?: "area" | "auto" | "manual"; } ``` members: @@ -10160,27 +10052,22 @@ LayoutChildProperties: Properties for defining the layout of a child element in Penpot. ``` - interface LayoutChildProperties { - absolute: boolean; - zIndex: number; - horizontalSizing: "fill" | "auto" | "fix"; - verticalSizing: "fill" | "auto" | "fix"; - alignSelf: - | "center" - | "auto" - | "start" - | "end" - | "stretch"; - horizontalMargin: number; - verticalMargin: number; - topMargin: number; - rightMargin: number; - bottomMargin: number; - leftMargin: number; - maxWidth: null | number; - maxHeight: null | number; - minWidth: null | number; - minHeight: null | number; + interface LayoutChildProperties { + absolute: boolean; + zIndex: number; + horizontalSizing: "fill" | "auto" | "fix"; + verticalSizing: "fill" | "auto" | "fix"; + alignSelf: "center" | "auto" | "start" | "end" | "stretch"; + horizontalMargin: number; + verticalMargin: number; + topMargin: number; + rightMargin: number; + bottomMargin: number; + leftMargin: number; + maxWidth: number | null; + maxHeight: number | null; + minWidth: number | null; + minHeight: number | null; } ``` @@ -10223,12 +10110,7 @@ LayoutChildProperties: * 'fix': The height is fixed. alignSelf: |- ``` - alignSelf: - | "center" - | "auto" - | "start" - | "end" - | "stretch" + alignSelf: "center" | "auto" | "start" | "end" | "stretch" ``` Aligns the child element within its container. @@ -10282,28 +10164,28 @@ LayoutChildProperties: This is the space to the left of the element. maxWidth: |- ``` - maxWidth: null | number + maxWidth: number | null ``` Defines the maximum width of the child element. If set to null, there is no maximum width constraint. maxHeight: |- ``` - maxHeight: null | number + maxHeight: number | null ``` Defines the maximum height of the child element. If set to null, there is no maximum height constraint. minWidth: |- ``` - minWidth: null | number + minWidth: number | null ``` Defines the minimum width of the child element. If set to null, there is no minimum width constraint. minHeight: |- ``` - minHeight: null | number + minHeight: number | null ``` Defines the minimum height of the child element. @@ -10316,26 +10198,26 @@ Library: Represents a library in Penpot, containing colors, typographies, and components. ``` - interface Library { - id: string; - name: string; - colors: LibraryColor[]; - typographies: LibraryTypography[]; - components: LibraryComponent[]; - tokens: TokenCatalog; - createColor(): LibraryColor; - createTypography(): LibraryTypography; - createComponent(shapes: Shape[]): LibraryComponent; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface Library { + id: string; + name: string; + colors: LibraryColor[]; + typographies: LibraryTypography[]; + components: LibraryComponent[]; + tokens: TokenCatalog; + createColor(): LibraryColor; + createTypography(): LibraryTypography; + createComponent(shapes: Shape[]): LibraryComponent; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * PluginData + Library @@ -10397,174 +10279,180 @@ Library: createColor(): LibraryColor ``` - * Creates a new color element in the library. + Creates a new color element in the library. - Returns LibraryColor + Returns LibraryColor - Returns a new `LibraryColor` object representing the created color element. + Returns a new `LibraryColor` object representing the created color element. - Example - ``` - const newColor = penpot.library.local.createColor();console.log(newColor); - ``` + Example + ``` + const newColor = penpot.library.local.createColor();console.log(newColor); + ``` createTypography: |- ``` createTypography(): LibraryTypography ``` - * Creates a new typography element in the library. + Creates a new typography element in the library. - Returns LibraryTypography + Returns LibraryTypography - Returns a new `LibraryTypography` object representing the created typography element. + Returns a new `LibraryTypography` object representing the created typography element. - Example - ``` - const newTypography = library.createTypography(); - ``` + Example + ``` + const newTypography = library.createTypography(); + ``` createComponent: |- ``` - createComponent(shapes): LibraryComponent + createComponent(shapes: Shape[]): LibraryComponent ``` - * Creates a new component element in the library using the provided shapes. + Creates a new component element in the library using the provided shapes. - Parameters - + shapes: Shape[] + Parameters - An array of `Shape` objects representing the shapes to be included in the component. + * shapes: Shape[] - Returns LibraryComponent + An array of `Shape` objects representing the shapes to be included in the component. - Returns a new `LibraryComponent` object representing the created component element. + Returns LibraryComponent - Example - ``` - const newComponent = penpot.library.local.createComponent([shape1, shape2]); - ``` + Returns a new `LibraryComponent` object representing the created component element. + + Example + ``` + const newComponent = penpot.library.local.createComponent([shape1, shape2]); + ``` getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` LibraryColor: overview: |- Interface LibraryColor @@ -10574,27 +10462,27 @@ LibraryColor: This interface extends `LibraryElement` and includes properties specific to color elements. ``` - interface LibraryColor { - color?: string; - opacity?: number; - gradient?: Gradient; - image?: ImageData; - asFill(): Fill; - asStroke(): Stroke; - id: string; - libraryId: string; - name: string; - path: string; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface LibraryColor { + color?: string; + opacity?: number; + gradient?: Gradient; + image?: ImageData; + asFill(): Fill; + asStroke(): Stroke; + id: string; + libraryId: string; + name: string; + path: string; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * LibraryElement + LibraryColor @@ -10656,154 +10544,159 @@ LibraryColor: asFill(): Fill ``` - * Converts the library color into a fill object. + Converts the library color into a fill object. - Returns Fill + Returns Fill - Returns a `Fill` object representing the color as a fill. + Returns a `Fill` object representing the color as a fill. - Example - ``` - const fill = libraryColor.asFill(); - ``` + Example + ``` + const fill = libraryColor.asFill(); + ``` asStroke: |- ``` asStroke(): Stroke ``` - * Converts the library color into a stroke object. + Converts the library color into a stroke object. - Returns Stroke + Returns Stroke - Returns a `Stroke` object representing the color as a stroke. + Returns a `Stroke` object representing the color as a stroke. - Example - ``` - const stroke = libraryColor.asStroke(); - ``` + Example + ``` + const stroke = libraryColor.asStroke(); + ``` getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` LibraryComponent: overview: |- Interface LibraryComponent @@ -10813,25 +10706,25 @@ LibraryComponent: This interface extends `LibraryElement` and includes properties specific to component elements. ``` - interface LibraryComponent { - instance(): Shape; - mainInstance(): Shape; - isVariant(): boolean; - transformInVariant(): void; - id: string; - libraryId: string; - name: string; - path: string; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface LibraryComponent { + instance(): Shape; + mainInstance(): Shape; + isVariant(): boolean; + transformInVariant(): void; + id: string; + libraryId: string; + name: string; + path: string; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * LibraryElement + LibraryComponent @@ -10870,165 +10763,170 @@ LibraryComponent: instance(): Shape ``` - * Creates an instance of the component. + Creates an instance of the component. - Returns Shape + Returns Shape - Returns a `Shape` object representing the instance of the component. + Returns a `Shape` object representing the instance of the component. - Example - ``` - const componentInstance = libraryComponent.instance(); - ``` + Example + ``` + const componentInstance = libraryComponent.instance(); + ``` mainInstance: |- ``` mainInstance(): Shape ``` - * Returns Shape + Returns Shape - Returns the reference to the main component shape. + Returns the reference to the main component shape. isVariant: |- ``` isVariant(): boolean ``` - * Returns boolean + Returns boolean - true when this component is a VariantComponent + true when this component is a VariantComponent transformInVariant: |- ``` transformInVariant(): void ``` - * Creates a new Variant from this standard Component. It creates a VariantContainer, transform this Component into a VariantComponent, duplicates it, and creates a - set of properties based on the component name and path. - Similar to doing it with the contextual menu or the shortcut on the Penpot interface + Creates a new Variant from this standard Component. It creates a VariantContainer, transform this Component into a VariantComponent, duplicates it, and creates a + set of properties based on the component name and path. + Similar to doing it with the contextual menu or the shortcut on the Penpot interface - Returns void + Returns void getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` LibraryVariantComponent: overview: |- Interface LibraryVariantComponent @@ -11038,32 +10936,30 @@ LibraryVariantComponent: This interface extends `LibraryElement` and includes properties specific to component elements. ``` - interface LibraryVariantComponent { - instance(): Shape; - mainInstance(): Shape; - isVariant(): boolean; - transformInVariant(): void; - variants: null | Variants; - variantProps: { - [property: string]: string; - }; - variantError: string; - addVariant(): void; - setVariantProperty(pos: number, value: string): void; - id: string; - libraryId: string; - name: string; - path: string; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface LibraryVariantComponent { + instance(): Shape; + mainInstance(): Shape; + isVariant(): boolean; + transformInVariant(): void; + variants: Variants | null; + variantProps: { [property: string]: string }; + variantError: string; + addVariant(): void; + setVariantProperty(pos: number, value: string): void; + id: string; + libraryId: string; + name: string; + path: string; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * LibraryComponent + LibraryVariantComponent @@ -11073,15 +10969,13 @@ LibraryVariantComponent: Properties: variants: |- ``` - readonly variants: null | Variants + readonly variants: Variants | null ``` Access to the Variant interface, for attributes and actions over the full Variant (not only this VariantComponent) variantProps: |- ``` - readonly variantProps: { - [property: string]: string; - } + readonly variantProps: { [property: string]: string } ``` A list of the variants props of this VariantComponent. Each property have a key and a value @@ -11122,185 +11016,191 @@ LibraryVariantComponent: instance(): Shape ``` - * Creates an instance of the component. + Creates an instance of the component. - Returns Shape + Returns Shape - Returns a `Shape` object representing the instance of the component. + Returns a `Shape` object representing the instance of the component. - Example - ``` - const componentInstance = libraryComponent.instance(); - ``` + Example + ``` + const componentInstance = libraryComponent.instance(); + ``` mainInstance: |- ``` mainInstance(): Shape ``` - * Returns Shape + Returns Shape - Returns the reference to the main component shape. + Returns the reference to the main component shape. isVariant: |- ``` isVariant(): boolean ``` - * Returns boolean + Returns boolean - true when this component is a VariantComponent + true when this component is a VariantComponent transformInVariant: |- ``` transformInVariant(): void ``` - * Creates a new Variant from this standard Component. It creates a VariantContainer, transform this Component into a VariantComponent, duplicates it, and creates a - set of properties based on the component name and path. - Similar to doing it with the contextual menu or the shortcut on the Penpot interface + Creates a new Variant from this standard Component. It creates a VariantContainer, transform this Component into a VariantComponent, duplicates it, and creates a + set of properties based on the component name and path. + Similar to doing it with the contextual menu or the shortcut on the Penpot interface - Returns void + Returns void addVariant: |- ``` addVariant(): void ``` - * Creates a duplicate of the current VariantComponent on its Variant + Creates a duplicate of the current VariantComponent on its Variant - Returns void + Returns void setVariantProperty: |- ``` - setVariantProperty(pos, value): void + setVariantProperty(pos: number, value: string): void ``` - * Sets the value of the variant property on the indicated position + Sets the value of the variant property on the indicated position - Parameters - + pos: number - + value: string + Parameters - Returns void + * pos: number + * value: string + + Returns void getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` LibraryElement: overview: |- Interface LibraryElement @@ -11310,21 +11210,21 @@ LibraryElement: This interface provides information about a specific element in a library. ``` - interface LibraryElement { - id: string; - libraryId: string; - name: string; - path: string; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface LibraryElement { + id: string; + libraryId: string; + name: string; + path: string; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * PluginData + LibraryElement @@ -11360,127 +11260,132 @@ LibraryElement: Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` LibrarySummary: overview: |- Interface LibrarySummary @@ -11490,12 +11395,12 @@ LibrarySummary: This interface provides properties for summarizing various aspects of a Penpot library. ``` - interface LibrarySummary { - id: string; - name: string; - numColors: number; - numComponents: number; - numTypographies: number; + interface LibrarySummary { + id: string; + name: string; + numColors: number; + numComponents: number; + numTypographies: number; } ``` @@ -11541,37 +11446,33 @@ LibraryTypography: This interface extends `LibraryElement` and includes properties specific to typography elements. ``` - interface LibraryTypography { - id: string; - libraryId: string; - name: string; - path: string; - fontId: string; - fontFamilies: string; - fontVariantId: string; - fontSize: string; - fontWeight: string; - fontStyle?: null | "normal" | "italic"; - lineHeight: string; - letterSpacing: string; - textTransform?: - | null - | "uppercase" - | "capitalize" - | "lowercase"; - applyToText(shape: Shape): void; - applyToTextRange(range: TextRange): void; - setFont(font: Font, variant?: FontVariant): void; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface LibraryTypography { + id: string; + libraryId: string; + name: string; + path: string; + fontId: string; + fontFamilies: string; + fontVariantId: string; + fontSize: string; + fontWeight: string; + fontStyle?: "normal" | "italic" | null; + lineHeight: string; + letterSpacing: string; + textTransform?: "uppercase" | "capitalize" | "lowercase" | null; + applyToText(shape: Shape): void; + applyToTextRange(range: TextRange): void; + setFont(font: Font, variant?: FontVariant): void; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * LibraryElement + LibraryTypography @@ -11635,7 +11536,7 @@ LibraryTypography: The font weight of the typography element. fontStyle: |- ``` - fontStyle?: null | "normal" | "italic" + fontStyle?: "normal" | "italic" | null ``` The font style of the typography element. @@ -11653,195 +11554,199 @@ LibraryTypography: The letter spacing of the typography element. textTransform: |- ``` - textTransform?: - | null - | "uppercase" - | "capitalize" - | "lowercase" + textTransform?: "uppercase" | "capitalize" | "lowercase" | null ``` The text transform applied to the typography element. Methods: applyToText: |- ``` - applyToText(shape): void + applyToText(shape: Shape): void ``` - * Applies the typography styles to a text shape. + Applies the typography styles to a text shape. - Parameters - + shape: Shape + Parameters - The text shape to apply the typography styles to. + * shape: Shape - Returns void + The text shape to apply the typography styles to. - Example - ``` - typographyElement.applyToText(textShape); - ``` + Returns void + + Example + ``` + typographyElement.applyToText(textShape); + ``` applyToTextRange: |- ``` - applyToTextRange(range): void + applyToTextRange(range: TextRange): void ``` - * Applies the typography styles to a range of text within a text shape. + Applies the typography styles to a range of text within a text shape. - Parameters - + range: TextRange + Parameters - Represents a range of text within a Text shape. This interface provides properties for styling and formatting text ranges. + * range: TextRange - Returns void + Represents a range of text within a Text shape. This interface provides properties for styling and formatting text ranges. - Example - ``` - typographyElement.applyToTextRange(textShape); - ``` + Returns void + + Example + ``` + typographyElement.applyToTextRange(textShape); + ``` setFont: |- ``` - setFont(font, variant?): void + setFont(font: Font, variant?: FontVariant): void ``` - * Sets the font and optionally its variant for the typography element. + Sets the font and optionally its variant for the typography element. - Parameters - + font: Font + Parameters - The font to set. - + variant: FontVariant + * font: Font - The font variant to set (optional). + The font to set. + * variant: FontVariant - Returns void + The font variant to set (optional). - Example - ``` - typographyElement.setFont(newFont, newVariant); - ``` + Returns void + + Example + ``` + typographyElement.setFont(newFont, newVariant); + ``` getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` LocalStorage: overview: |- Interface LocalStorage @@ -11853,11 +11758,11 @@ LocalStorage: the user could potentialy access the data through the browser information. ``` - interface LocalStorage { - getItem(key: string): string; - setItem(key: string, value: unknown): void; - removeItem(key: string): void; - getKeys(): string[]; + interface LocalStorage { + getItem(key: string): string; + setItem(key: string, value: unknown): void; + removeItem(key: string): void; + getKeys(): string[]; } ``` @@ -11866,51 +11771,54 @@ LocalStorage: Methods: getItem: |- ``` - getItem(key): string + getItem(key: string): string ``` - * Retrieve the element with the given key - Requires the `allow:localstorage` permission. + Retrieve the element with the given key + Requires the `allow:localstorage` permission. - Parameters - + key: string + Parameters - Returns string + * key: string + + Returns string setItem: |- ``` - setItem(key, value): void + setItem(key: string, value: unknown): void ``` - * Set the data given the key. If the value already existed it - will be overriden. The value will be stored in a string representation. - Requires the `allow:localstorage` permission. + Set the data given the key. If the value already existed it + will be overriden. The value will be stored in a string representation. + Requires the `allow:localstorage` permission. - Parameters - + key: string - + value: unknown + Parameters - Returns void + * key: string + * value: unknown + + Returns void removeItem: |- ``` - removeItem(key): void + removeItem(key: string): void ``` - * Remove the value stored in the key. - Requires the `allow:localstorage` permission. + Remove the value stored in the key. + Requires the `allow:localstorage` permission. - Parameters - + key: string + Parameters - Returns void + * key: string + + Returns void getKeys: |- ``` getKeys(): string[] ``` - * Return all the keys for the data stored by the plugin. - Requires the `allow:localstorage` permission. + Return all the keys for the data stored by the plugin. + Requires the `allow:localstorage` permission. - Returns string[] + Returns string[] NavigateTo: overview: |- Interface NavigateTo @@ -11919,11 +11827,11 @@ NavigateTo: It takes the user from one board to the destination set in the interaction. ``` - interface NavigateTo { - type: "navigate-to"; - destination: Board; - preserveScrollPosition?: boolean; - animation?: Animation; + interface NavigateTo { + type: "navigate-to"; + destination: Board; + preserveScrollPosition?: boolean; + animation?: Animation; } ``` @@ -11932,7 +11840,7 @@ NavigateTo: Properties: type: |- ``` - readonly type + readonly type: "navigate-to" ``` Type of action @@ -11962,11 +11870,11 @@ OpenOverlay: It opens a board right over the current board. ``` - interface OpenOverlay { - type: "open-overlay"; - destination: Board; - relativeTo?: Shape; - position?: + interface OpenOverlay { + type: "open-overlay"; + destination: Board; + relativeTo?: Shape; + position?: | "center" | "manual" | "top-left" @@ -11974,15 +11882,15 @@ OpenOverlay: | "top-center" | "bottom-left" | "bottom-right" - | "bottom-center"; - manualPositionLocation?: Point; - closeWhenClickOutside?: boolean; - addBackgroundOverlay?: boolean; - animation?: Animation; + | "bottom-center"; + manualPositionLocation?: Point; + closeWhenClickOutside?: boolean; + addBackgroundOverlay?: boolean; + animation?: Animation; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * OverlayAction + OpenOverlay @@ -11992,7 +11900,7 @@ OpenOverlay: Properties: type: |- ``` - readonly type + readonly type: "open-overlay" ``` The action type @@ -12010,7 +11918,7 @@ OpenOverlay: Base shape to which the overlay will be positioned taking constraints into account. position: |- ``` - readonly position?: + readonly position?: | "center" | "manual" | "top-left" @@ -12054,9 +11962,9 @@ OpenUrl: This action opens an URL in a new tab. ``` - interface OpenUrl { - type: "open-url"; - url: string; + interface OpenUrl { + type: "open-url"; + url: string; } ``` @@ -12065,7 +11973,7 @@ OpenUrl: Properties: type: |- ``` - readonly type + readonly type: "open-url" ``` The action type @@ -12083,10 +11991,10 @@ OverlayAction: Base type for the actions "open-overlay" and "toggle-overlay" that share most of their properties ``` - interface OverlayAction { - destination: Board; - relativeTo?: Shape; - position?: + interface OverlayAction { + destination: Board; + relativeTo?: Shape; + position?: | "center" | "manual" | "top-left" @@ -12094,15 +12002,15 @@ OverlayAction: | "top-center" | "bottom-left" | "bottom-right" - | "bottom-center"; - manualPositionLocation?: Point; - closeWhenClickOutside?: boolean; - addBackgroundOverlay?: boolean; - animation?: Animation; + | "bottom-center"; + manualPositionLocation?: Point; + closeWhenClickOutside?: boolean; + addBackgroundOverlay?: boolean; + animation?: Animation; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * OverlayAction + OpenOverlay @@ -12123,7 +12031,7 @@ OverlayAction: Base shape to which the overlay will be positioned taking constraints into account. position: |- ``` - readonly position?: + readonly position?: | "center" | "manual" | "top-left" @@ -12168,47 +12076,52 @@ Page: It includes properties for the page's identifier and name, as well as methods for managing shapes on the page. ``` - interface Page { - id: string; - name: string; - rulerGuides: RulerGuide[]; - root: Shape; - getShapeById(id: string): null | Shape; - findShapes(criteria?: { - name?: string; - nameLike?: string; - type?: - | "boolean" - | "path" - | "ellipse" - | "image" - | "text" - | "group" - | "board" - | "rectangle" - | "svg-raw"; - }): Shape[]; - flows: Flow[]; - createFlow(name: string, board: Board): Flow; - removeFlow(flow: Flow): void; - addRulerGuide(orientation: RulerGuideOrientation, value: number, board?: Board): RulerGuide; - removeRulerGuide(guide: RulerGuide): void; - addCommentThread(content: string, position: Point): Promise; - removeCommentThread(commentThread: CommentThread): Promise; - findCommentThreads(criteria?: { - onlyYours: boolean; - showResolved: boolean; - }): Promise; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface Page { + id: string; + name: string; + rulerGuides: RulerGuide[]; + root: Shape; + getShapeById(id: string): Shape | null; + findShapes( + criteria?: { + name?: string; + nameLike?: string; + type?: + | "boolean" + | "path" + | "ellipse" + | "image" + | "text" + | "group" + | "board" + | "rectangle" + | "svg-raw"; + }, + ): Shape[]; + flows: Flow[]; + createFlow(name: string, board: Board): Flow; + removeFlow(flow: Flow): void; + addRulerGuide( + orientation: RulerGuideOrientation, + value: number, + board?: Board, + ): RulerGuide; + removeRulerGuide(guide: RulerGuide): void; + addCommentThread(content: string, position: Point): Promise; + removeCommentThread(commentThread: CommentThread): Promise; + findCommentThreads( + criteria?: { onlyYours: boolean; showResolved: boolean }, + ): Promise; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * PluginData + Page @@ -12250,285 +12163,312 @@ Page: Methods: getShapeById: |- ``` - getShapeById(id): null | Shape + getShapeById(id: string): Shape | null ``` - * Retrieves a shape by its unique identifier. + Retrieves a shape by its unique identifier. - Parameters - + id: string + Parameters - The unique identifier of the shape. + * id: string - Returns null | Shape + The unique identifier of the shape. - Example - ``` - const shape = penpot.currentPage.getShapeById('shapeId'); - ``` + Returns Shape | null + + Example + ``` + const shape = penpot.currentPage.getShapeById('shapeId'); + ``` findShapes: |- ``` - findShapes(criteria?): Shape[] + findShapes( + criteria?: { + name?: string; + nameLike?: string; + type?: + | "boolean" + | "path" + | "ellipse" + | "image" + | "text" + | "group" + | "board" + | "rectangle" + | "svg-raw"; + }, + ): Shape[] ``` - * Finds all shapes on the page. - Optionaly it gets a criteria object to search for specific criteria + Finds all shapes on the page. + Optionaly it gets a criteria object to search for specific criteria - Parameters - + criteria: { - name?: string; - nameLike?: string; - type?: - | "boolean" - | "path" - | "ellipse" - | "image" - | "text" - | "group" - | "board" - | "rectangle" - | "svg-raw"; - } - - Optionalname?: string - - OptionalnameLike?: string - - Optionaltype?: | "boolean" | "path" | "ellipse" | "image" | "text" | "group" | "board" | "rectangle" | "svg-raw" + Parameters - Returns Shape[] + * criteria: { + name?: string; + nameLike?: string; + type?: + | "boolean" + | "path" + | "ellipse" + | "image" + | "text" + | "group" + | "board" + | "rectangle" + | "svg-raw"; + } - Example - ``` - const shapes = penpot.currentPage.findShapes({ name: 'exampleName' }); - ``` + Returns Shape[] + + Example + ``` + const shapes = penpot.currentPage.findShapes({ name: 'exampleName' }); + ``` createFlow: |- ``` - createFlow(name, board): Flow + createFlow(name: string, board: Board): Flow ``` - * Creates a new flow in the page. + Creates a new flow in the page. - Parameters - + name: string + Parameters - the name identifying the flow - + board: Board + * name: string - the starting board for the current flow + the name identifying the flow + * board: Board - Returns Flow + the starting board for the current flow - Example - ``` - const flow = penpot.currentPage.createFlow('exampleFlow', board); - ``` + Returns Flow + + Example + ``` + const flow = penpot.currentPage.createFlow('exampleFlow', board); + ``` removeFlow: |- ``` - removeFlow(flow): void + removeFlow(flow: Flow): void ``` - * Removes the flow from the page + Removes the flow from the page - Parameters - + flow: Flow + Parameters - the flow to be removed from the page + * flow: Flow - Returns void + the flow to be removed from the page + + Returns void addRulerGuide: |- ``` - addRulerGuide(orientation, value, board?): RulerGuide + addRulerGuide( + orientation: RulerGuideOrientation, + value: number, + board?: Board, + ): RulerGuide ``` - * Creates a new ruler guide. + Creates a new ruler guide. - Parameters - + orientation: RulerGuideOrientation - + value: number - + board: Board + Parameters - Returns RulerGuide + * orientation: RulerGuideOrientation + * value: number + * board: Board + + Returns RulerGuide removeRulerGuide: |- ``` - removeRulerGuide(guide): void + removeRulerGuide(guide: RulerGuide): void ``` - * Removes the `guide` from the current page. + Removes the `guide` from the current page. - Parameters - + guide: RulerGuide + Parameters - Returns void + * guide: RulerGuide + + Returns void addCommentThread: |- ``` - addCommentThread(content, position): Promise + addCommentThread(content: string, position: Point): Promise ``` - * Creates a new comment thread in the `position`. Optionaly adds - it into the `board`. - Returns the thread created. - Requires the `comment:write` permission. + Creates a new comment thread in the `position`. Optionaly adds + it into the `board`. + Returns the thread created. + Requires the `comment:write` permission. - Parameters - + content: string - + position: Point + Parameters - Returns Promise + * content: string + * position: Point + + Returns Promise removeCommentThread: |- ``` - removeCommentThread(commentThread): Promise + removeCommentThread(commentThread: CommentThread): Promise ``` - * Removes the comment thread. - Requires the `comment:write` permission. + Removes the comment thread. + Requires the `comment:write` permission. - Parameters - + commentThread: CommentThread + Parameters - Returns Promise + * commentThread: CommentThread + + Returns Promise findCommentThreads: |- ``` - findCommentThreads(criteria?): Promise + findCommentThreads( + criteria?: { onlyYours: boolean; showResolved: boolean }, + ): Promise ``` - * Find all the comments that match the criteria. + Find all the comments that match the criteria. - + `onlyYours`: if `true` will return the threads where the current - user has engaged. - + `showResolved`: by default resolved comments will be hidden. If `true` - the resolved will be returned. - Requires the `comment:read` or `comment:write` permission. + * `onlyYours`: if `true` will return the threads where the current + user has engaged. + * `showResolved`: by default resolved comments will be hidden. If `true` + the resolved will be returned. + Requires the `comment:read` or `comment:write` permission. - Parameters - + criteria: { - onlyYours: boolean; - showResolved: boolean; - } - - onlyYours: boolean - - showResolved: boolean + Parameters - Returns Promise + * criteria: { onlyYours: boolean; showResolved: boolean } + + Returns Promise getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` Path: overview: |- Interface Path @@ -12538,52 +12478,42 @@ Path: This interface extends `ShapeBase` and includes properties and methods specific to paths. ``` - interface Path { - type: "path"; - toD(): string; - content: string; - d: string; - commands: PathCommand[]; - fills: Fill[]; - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Path { + type: "path"; + toD(): string; + content: string; + d: string; + commands: PathCommand[]; + fills: Fill[]; + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -12599,58 +12529,57 @@ Path: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Path @@ -12660,7 +12589,7 @@ Path: Properties: type: |- ``` - readonly type + readonly type: "path" ``` The type of the shape, which is always 'path' for path shapes. @@ -12708,7 +12637,7 @@ Path: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -12785,23 +12714,13 @@ Path: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -12843,7 +12762,7 @@ Path: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -12945,9 +12864,7 @@ Path: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -12969,465 +12886,477 @@ Path: toD(): string ``` - * Converts the path shape to its path data representation. + Converts the path shape to its path data representation. - Returns string + Returns string - Returns the path data (d attribute) as a string. + Returns the path data (d attribute) as a string. - Deprecated + Deprecated - Use the `d` attribute + Use the `d` attribute getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void PathCommand: overview: |- Interface PathCommand @@ -13437,8 +13366,8 @@ PathCommand: This interface includes a property for defining the type of command. ``` - interface PathCommand { - command: + interface PathCommand { + command: | "M" | "move-to" | "Z" @@ -13458,20 +13387,20 @@ PathCommand: | "T" | "smooth-quadratic-bezier-curve-to" | "A" - | "elliptical-arc"; - params?: { - x?: number; - y?: number; - c1x?: number; - c1y?: number; - c2x?: number; - c2y?: number; - rx?: number; - ry?: number; - xAxisRotation?: number; - largeArcFlag?: boolean; - sweepFlag?: boolean; - }; + | "elliptical-arc"; + params?: { + x?: number; + y?: number; + c1x?: number; + c1y?: number; + c2x?: number; + c2y?: number; + rx?: number; + ry?: number; + xAxisRotation?: number; + largeArcFlag?: boolean; + sweepFlag?: boolean; + }; } ``` @@ -13480,7 +13409,7 @@ PathCommand: Properties: command: |- ``` - command: + command: | "M" | "move-to" | "Z" @@ -13523,24 +13452,24 @@ PathCommand: ``` params: |- ``` - params?: { - x?: number; - y?: number; - c1x?: number; - c1y?: number; - c2x?: number; - c2y?: number; - rx?: number; - ry?: number; - xAxisRotation?: number; - largeArcFlag?: boolean; - sweepFlag?: boolean; + params?: { + x?: number; + y?: number; + c1x?: number; + c1y?: number; + c2x?: number; + c2y?: number; + rx?: number; + ry?: number; + xAxisRotation?: number; + largeArcFlag?: boolean; + sweepFlag?: boolean; } ``` Optional parameters associated with the path command. - Type declaration + Type Declaration * Optionalx?: number @@ -13583,17 +13512,17 @@ PluginData: Provides methods for managing plugin-specific data associated with a Penpot shape. ``` - interface PluginData { - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; + interface PluginData { + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * PluginData + File @@ -13605,127 +13534,132 @@ PluginData: Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` PreviousScreen: overview: |- Interface PreviousScreen @@ -13734,8 +13668,8 @@ PreviousScreen: It takes back to the last board shown. ``` - interface PreviousScreen { - type: "previous-screen"; + interface PreviousScreen { + type: "previous-screen"; } ``` @@ -13744,7 +13678,7 @@ PreviousScreen: Properties: type: |- ``` - readonly type + readonly type: "previous-screen" ``` The action type @@ -13756,20 +13690,11 @@ Push: Push animation ``` - interface Push { - type: "push"; - direction: - | "left" - | "right" - | "up" - | "down"; - duration: number; - easing?: - | "linear" - | "ease" - | "ease-in" - | "ease-out" - | "ease-in-out"; + interface Push { + type: "push"; + direction: "left" | "right" | "up" | "down"; + duration: number; + easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"; } ``` @@ -13778,17 +13703,13 @@ Push: Properties: type: |- ``` - readonly type + readonly type: "push" ``` Type of the animation direction: |- ``` - readonly direction: - | "left" - | "right" - | "up" - | "down" + readonly direction: "left" | "right" | "up" | "down" ``` Direction for the push animation @@ -13800,12 +13721,7 @@ Push: Duration of the animation effect easing: |- ``` - readonly easing?: - | "linear" - | "ease" - | "ease-in" - | "ease-out" - | "ease-in-out" + readonly easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" ``` Function that the dissolve effect will follow for the interpolation. @@ -13819,48 +13735,38 @@ Rectangle: This interface extends `ShapeBase` and includes properties specific to rectangles. ``` - interface Rectangle { - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - type: "rectangle"; - fills: Fill[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Rectangle { + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + type: "rectangle"; + fills: Fill[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -13876,58 +13782,57 @@ Rectangle: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Rectangle @@ -13937,7 +13842,7 @@ Rectangle: Properties: type: |- ``` - readonly type + readonly type: "rectangle" ``` The type of the shape, which is always 'rect' for rectangle shapes. @@ -13963,7 +13868,7 @@ Rectangle: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -14040,23 +13945,13 @@ Rectangle: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -14098,7 +13993,7 @@ Rectangle: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -14200,9 +14095,7 @@ Rectangle: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -14221,454 +14114,466 @@ Rectangle: Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void RulerGuide: overview: |- Interface RulerGuide @@ -14678,10 +14583,10 @@ RulerGuide: used to position elements in the UI. ``` - interface RulerGuide { - orientation: RulerGuideOrientation; - position: number; - board?: Board; + interface RulerGuide { + orientation: RulerGuideOrientation; + position: number; + board?: Board; } ``` @@ -14716,15 +14621,15 @@ Shadow: This interface includes properties for defining drop shadows and inner shadows, along with their visual attributes. ``` - interface Shadow { - id?: string; - style?: "drop-shadow" | "inner-shadow"; - offsetX?: number; - offsetY?: number; - blur?: number; - spread?: number; - hidden?: boolean; - color?: Color; + interface Shadow { + id?: string; + style?: "drop-shadow" | "inner-shadow"; + offsetX?: number; + offsetY?: number; + blur?: number; + spread?: number; + hidden?: boolean; + color?: Color; } ``` @@ -14792,46 +14697,36 @@ ShapeBase: This interface provides common properties and methods shared by all shapes. ``` - interface ShapeBase { - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface ShapeBase { + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -14847,59 +14742,59 @@ ShapeBase: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - fills: Fill[] | "mixed"; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + fills: Fill[] + | "mixed"; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * PluginData + ShapeBase @@ -14928,7 +14823,7 @@ ShapeBase: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -15005,23 +14900,13 @@ ShapeBase: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -15063,7 +14948,7 @@ ShapeBase: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -15171,9 +15056,7 @@ ShapeBase: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -15192,454 +15075,466 @@ ShapeBase: Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void Slide: overview: |- Interface Slide @@ -15648,22 +15543,13 @@ Slide: Slide animation ``` - interface Slide { - type: "slide"; - way: "in" | "out"; - direction: - | "left" - | "right" - | "up" - | "down"; - duration: number; - offsetEffect?: boolean; - easing?: - | "linear" - | "ease" - | "ease-in" - | "ease-out" - | "ease-in-out"; + interface Slide { + type: "slide"; + way: "in" | "out"; + direction: "left" | "right" | "up" | "down"; + duration: number; + offsetEffect?: boolean; + easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"; } ``` @@ -15672,7 +15558,7 @@ Slide: Properties: type: |- ``` - readonly type + readonly type: "slide" ``` Type of the animation. @@ -15684,11 +15570,7 @@ Slide: Indicate if the slide will be either in-to-out `in` or out-to-in `out`. direction: |- ``` - readonly direction: - | "left" - | "right" - | "up" - | "down" + readonly direction: "left" | "right" | "up" | "down" ``` Direction for the slide animation. @@ -15706,12 +15588,7 @@ Slide: If `true` the offset effect will be used. easing: |- ``` - readonly easing?: - | "linear" - | "ease" - | "ease-in" - | "ease-out" - | "ease-in-out" + readonly easing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" ``` Function that the dissolve effect will follow for the interpolation. @@ -15725,23 +15602,17 @@ Stroke: This interface includes properties for defining the color, style, width, alignment, and caps of a stroke. ``` - interface Stroke { - strokeColor?: string; - strokeColorRefFile?: string; - strokeColorRefId?: string; - strokeOpacity?: number; - strokeStyle?: - | "svg" - | "none" - | "mixed" - | "solid" - | "dotted" - | "dashed"; - strokeWidth?: number; - strokeAlignment?: "center" | "inner" | "outer"; - strokeCapStart?: StrokeCap; - strokeCapEnd?: StrokeCap; - strokeColorGradient?: Gradient; + interface Stroke { + strokeColor?: string; + strokeColorRefFile?: string; + strokeColorRefId?: string; + strokeOpacity?: number; + strokeStyle?: "svg" | "none" | "mixed" | "solid" | "dotted" | "dashed"; + strokeWidth?: number; + strokeAlignment?: "center" | "inner" | "outer"; + strokeCapStart?: StrokeCap; + strokeCapEnd?: StrokeCap; + strokeColorGradient?: Gradient; } ``` @@ -15775,13 +15646,7 @@ Stroke: Defaults to 1 if omitted. strokeStyle: |- ``` - strokeStyle?: - | "svg" - | "none" - | "mixed" - | "solid" - | "dotted" - | "dashed" + strokeStyle?: "svg" | "none" | "mixed" | "solid" | "dotted" | "dashed" ``` The optional style of the stroke. @@ -15824,46 +15689,36 @@ SvgRaw: This interface extends `ShapeBase` and includes properties specific to raw SVG shapes. ``` - interface SvgRaw { - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface SvgRaw { + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -15879,60 +15734,60 @@ SvgRaw: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - fills: Fill[] | "mixed"; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; - type: "svg-raw"; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + fills: Fill[] + | "mixed"; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; + type: "svg-raw"; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + SvgRaw @@ -15954,7 +15809,7 @@ SvgRaw: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -16031,23 +15886,13 @@ SvgRaw: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -16089,7 +15934,7 @@ SvgRaw: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -16197,9 +16042,7 @@ SvgRaw: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -16217,459 +16060,471 @@ SvgRaw: The interactions for the current shape. type: |- ``` - type + type: "svg-raw" ``` Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void Text: overview: |- Interface Text @@ -16679,46 +16534,36 @@ Text: It includes various properties to define the text content and its styling attributes. ``` - interface Text { - getPluginData(key: string): string; - setPluginData(key: string, value: string): void; - getPluginDataKeys(): string[]; - getSharedPluginData(namespace: string, key: string): string; - setSharedPluginData(namespace: string, key: string, value: string): void; - getSharedPluginDataKeys(namespace: string): string[]; - id: string; - name: string; - parent: null | Shape; - parentIndex: number; - x: number; - y: number; - width: number; - height: number; - bounds: Bounds; - center: Point; - blocked: boolean; - hidden: boolean; - visible: boolean; - proportionLock: boolean; - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale"; - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom"; - borderRadius: number; - borderRadiusTopLeft: number; - borderRadiusTopRight: number; - borderRadiusBottomRight: number; - borderRadiusBottomLeft: number; - opacity: number; - blendMode: + interface Text { + getPluginData(key: string): string; + setPluginData(key: string, value: string): void; + getPluginDataKeys(): string[]; + getSharedPluginData(namespace: string, key: string): string; + setSharedPluginData(namespace: string, key: string, value: string): void; + getSharedPluginDataKeys(namespace: string): string[]; + id: string; + name: string; + parent: Shape | null; + parentIndex: number; + x: number; + y: number; + width: number; + height: number; + bounds: Bounds; + center: Point; + blocked: boolean; + hidden: boolean; + visible: boolean; + proportionLock: boolean; + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale"; + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom"; + borderRadius: number; + borderRadiusTopLeft: number; + borderRadiusTopRight: number; + borderRadiusBottomRight: number; + borderRadiusBottomLeft: number; + opacity: number; + blendMode: | "difference" | "normal" | "darken" @@ -16734,104 +16579,77 @@ Text: | "hue" | "saturation" | "color" - | "luminosity"; - shadows: Shadow[]; - blur?: Blur; - exports: Export[]; - boardX: number; - boardY: number; - parentX: number; - parentY: number; - flipX: boolean; - flipY: boolean; - rotation: number; - fills: Fill[] | "mixed"; - strokes: Stroke[]; - layoutChild?: LayoutChildProperties; - layoutCell?: LayoutChildProperties; - setParentIndex(index: number): void; - tokens: { - [property: string]: string; - }; - isComponentInstance(): boolean; - isComponentMainInstance(): boolean; - isComponentCopyInstance(): boolean; - isComponentRoot(): boolean; - isComponentHead(): boolean; - componentRefShape(): null | Shape; - componentRoot(): null | Shape; - componentHead(): null | Shape; - component(): null | LibraryComponent; - detach(): void; - swapComponent(component: LibraryComponent): void; - switchVariant(pos: number, value: string): void; - combineAsVariants(ids: string[]): void; - isVariantHead(): boolean; - resize(width: number, height: number): void; - rotate(angle: number, center?: null | { - x: number; - y: number; - }): void; - bringToFront(): void; - bringForward(): void; - sendToBack(): void; - sendBackward(): void; - export(config: Export): Promise; - interactions: Interaction[]; - addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction; - removeInteraction(interaction: Interaction): void; - applyToken(token: Token, properties: undefined | TokenProperty[]): void; - clone(): Shape; - remove(): void; - type: "text"; - characters: string; - growType: "fixed" | "auto-width" | "auto-height"; - fontId: string; - fontFamily: string; - fontVariantId: string; - fontSize: string; - fontWeight: string; - fontStyle: - | null - | "normal" - | "italic" - | "mixed"; - lineHeight: string; - letterSpacing: string; - textTransform: - | null - | "mixed" - | "uppercase" - | "capitalize" - | "lowercase"; - textDecoration: - | null - | "mixed" - | "underline" - | "line-through"; - direction: - | null - | "mixed" - | "ltr" - | "rtl"; - align: - | null - | "center" - | "left" - | "right" - | "mixed" - | "justify"; - verticalAlign: - | null - | "center" - | "top" - | "bottom"; - getRange(start: number, end: number): TextRange; - applyTypography(typography: LibraryTypography): void; + | "luminosity"; + shadows: Shadow[]; + blur?: Blur; + exports: Export[]; + boardX: number; + boardY: number; + parentX: number; + parentY: number; + flipX: boolean; + flipY: boolean; + rotation: number; + fills: Fill[] + | "mixed"; + strokes: Stroke[]; + layoutChild?: LayoutChildProperties; + layoutCell?: LayoutChildProperties; + setParentIndex(index: number): void; + tokens: { [property: string]: string }; + isComponentInstance(): boolean; + isComponentMainInstance(): boolean; + isComponentCopyInstance(): boolean; + isComponentRoot(): boolean; + isComponentHead(): boolean; + componentRefShape(): Shape | null; + componentRoot(): Shape | null; + componentHead(): Shape | null; + component(): LibraryComponent | null; + detach(): void; + swapComponent(component: LibraryComponent): void; + switchVariant(pos: number, value: string): void; + combineAsVariants(ids: string[]): void; + isVariantHead(): boolean; + resize(width: number, height: number): void; + rotate(angle: number, center?: { x: number; y: number } | null): void; + bringToFront(): void; + bringForward(): void; + sendToBack(): void; + sendBackward(): void; + export(config: Export): Promise>; + interactions: Interaction[]; + addInteraction( + trigger: Trigger, + action: Action, + delay?: number, + ): Interaction; + removeInteraction(interaction: Interaction): void; + applyToken(token: Token, properties: TokenProperty[] | undefined): void; + clone(): Shape; + remove(): void; + type: "text"; + characters: string; + growType: "fixed" | "auto-width" | "auto-height"; + fontId: string; + fontFamily: string; + fontVariantId: string; + fontSize: string; + fontWeight: string; + fontStyle: "normal" | "italic" | "mixed" | null; + lineHeight: string; + letterSpacing: string; + textTransform: "mixed" | "uppercase" | "capitalize" | "lowercase" | null; + textDecoration: "mixed" | "underline" | "line-through" | null; + direction: "mixed" | "ltr" | "rtl" | null; + align: "center" | "left" | "right" | "mixed" | "justify" | null; + verticalAlign: "center" | "top" | "bottom" | null; + getRange(start: number, end: number): TextRange; + applyTypography(typography: LibraryTypography): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * ShapeBase + Text @@ -16853,7 +16671,7 @@ Text: The name of the shape. parent: |- ``` - readonly parent: null | Shape + readonly parent: Shape | null ``` The parent shape. If the shape is the first level the parent will be the root shape. @@ -16930,23 +16748,13 @@ Text: Indicates whether the shape has proportion lock enabled. constraintsHorizontal: |- ``` - constraintsHorizontal: - | "center" - | "left" - | "right" - | "leftright" - | "scale" + constraintsHorizontal: "center" | "left" | "right" | "leftright" | "scale" ``` The horizontal constraints applied to the shape. constraintsVertical: |- ``` - constraintsVertical: - | "center" - | "top" - | "bottom" - | "scale" - | "topbottom" + constraintsVertical: "center" | "top" | "bottom" | "scale" | "topbottom" ``` The vertical constraints applied to the shape. @@ -16988,7 +16796,7 @@ Text: The opacity of the shape. blendMode: |- ``` - blendMode: + blendMode: | "difference" | "normal" | "darken" @@ -17096,9 +16904,7 @@ Text: Layout properties for cells in a grid layout. tokens: |- ``` - readonly tokens: { - [property: string]: string; - } + readonly tokens: { [property: string]: string } ``` The design tokens applied to this shape. @@ -17116,7 +16922,7 @@ Text: The interactions for the current shape. type: |- ``` - readonly type + readonly type: "text" ``` The type of the shape, which is always 'text' for text shapes. @@ -17169,11 +16975,7 @@ Text: The font weight used in the text shape, or 'mixed' if multiple font weights are used. fontStyle: |- ``` - fontStyle: - | null - | "normal" - | "italic" - | "mixed" + fontStyle: "normal" | "italic" | "mixed" | null ``` The font style used in the text shape, or 'mixed' if multiple font styles are used. @@ -17191,553 +16993,544 @@ Text: The letter spacing used in the text shape, or 'mixed' if multiple letter spacings are used. textTransform: |- ``` - textTransform: - | null - | "mixed" - | "uppercase" - | "capitalize" - | "lowercase" + textTransform: "mixed" | "uppercase" | "capitalize" | "lowercase" | null ``` The text transform applied to the text shape, or 'mixed' if multiple text transforms are used. textDecoration: |- ``` - textDecoration: - | null - | "mixed" - | "underline" - | "line-through" + textDecoration: "mixed" | "underline" | "line-through" | null ``` The text decoration applied to the text shape, or 'mixed' if multiple text decorations are used. direction: |- ``` - direction: - | null - | "mixed" - | "ltr" - | "rtl" + direction: "mixed" | "ltr" | "rtl" | null ``` The text direction for the text shape, or 'mixed' if multiple directions are used. align: |- ``` - align: - | null - | "center" - | "left" - | "right" - | "mixed" - | "justify" + align: "center" | "left" | "right" | "mixed" | "justify" | null ``` The horizontal alignment of the text shape. It can be a specific alignment or 'mixed' if multiple alignments are used. verticalAlign: |- ``` - verticalAlign: - | null - | "center" - | "top" - | "bottom" + verticalAlign: "center" | "top" | "bottom" | null ``` The vertical alignment of the text shape. It can be a specific alignment or 'mixed' if multiple alignments are used. Methods: getPluginData: |- ``` - getPluginData(key): string + getPluginData(key: string): string ``` - * Retrieves the data for our own plugin, given a specific key. + Retrieves the data for our own plugin, given a specific key. - Parameters - + key: string + Parameters - The key for which to retrieve the data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the data associated with the key as a string. + Returns string - Example - ``` - const data = shape.getPluginData('exampleKey');console.log(data); - ``` + Returns the data associated with the key as a string. + + Example + ``` + const data = shape.getPluginData('exampleKey');console.log(data); + ``` setPluginData: |- ``` - setPluginData(key, value): void + setPluginData(key: string, value: string): void ``` - * Sets the plugin-specific data for the given key. + Sets the plugin-specific data for the given key. - Parameters - + key: string + Parameters - The key for which to set the data. - + value: string + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setPluginData('exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setPluginData('exampleKey', 'exampleValue'); + ``` getPluginDataKeys: |- ``` getPluginDataKeys(): string[] ``` - * Retrieves all the keys for the plugin-specific data. + Retrieves all the keys for the plugin-specific data. - Returns string[] + Returns string[] - Returns an array of strings representing all the keys. + Returns an array of strings representing all the keys. - Example - ``` - const keys = shape.getPluginDataKeys();console.log(keys); - ``` + Example + ``` + const keys = shape.getPluginDataKeys();console.log(keys); + ``` getSharedPluginData: |- ``` - getSharedPluginData(namespace, key): string + getSharedPluginData(namespace: string, key: string): string ``` - * If we know the namespace of an external plugin, this is the way to get their data. + If we know the namespace of an external plugin, this is the way to get their data. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to retrieve the data. + The namespace for the shared data. + * key: string - Returns string + The key for which to retrieve the data. - Returns the shared data associated with the key as a string. + Returns string - Example - ``` - const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); - ``` + Returns the shared data associated with the key as a string. + + Example + ``` + const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');console.log(sharedData); + ``` setSharedPluginData: |- ``` - setSharedPluginData(namespace, key, value): void + setSharedPluginData(namespace: string, key: string, value: string): void ``` - * Sets the shared plugin-specific data for the given namespace and key. + Sets the shared plugin-specific data for the given namespace and key. - Parameters - + namespace: string + Parameters - The namespace for the shared data. - + key: string + * namespace: string - The key for which to set the data. - + value: string + The namespace for the shared data. + * key: string - The data to set for the key. + The key for which to set the data. + * value: string - Returns void + The data to set for the key. - Example - ``` - shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); - ``` + Returns void + + Example + ``` + shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue'); + ``` getSharedPluginDataKeys: |- ``` - getSharedPluginDataKeys(namespace): string[] + getSharedPluginDataKeys(namespace: string): string[] ``` - * Retrieves all the keys for the shared plugin-specific data in the given namespace. + Retrieves all the keys for the shared plugin-specific data in the given namespace. - Parameters - + namespace: string + Parameters - The namespace for the shared data. + * namespace: string - Returns string[] + The namespace for the shared data. - Returns an array of strings representing all the keys in the namespace. + Returns string[] - Example - ``` - const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); - ``` + Returns an array of strings representing all the keys in the namespace. + + Example + ``` + const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');console.log(sharedKeys); + ``` setParentIndex: |- ``` - setParentIndex(index): void + setParentIndex(index: number): void ``` - * Changes the index inside the parent of the current shape. - This method will shift the indexes of the shapes around that position to - match the index. - If the index is greater than the number of elements it will positioned last. + Changes the index inside the parent of the current shape. + This method will shift the indexes of the shapes around that position to + match the index. + If the index is greater than the number of elements it will positioned last. - Parameters - + index: number + Parameters - the new index for the shape to be in + * index: number - Returns void + the new index for the shape to be in + + Returns void isComponentInstance: |- ``` isComponentInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component instance + Returns true if the current shape is inside a component instance isComponentMainInstance: |- ``` isComponentMainInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **main** instance + Returns true if the current shape is inside a component **main** instance isComponentCopyInstance: |- ``` isComponentCopyInstance(): boolean ``` - * Returns boolean + Returns boolean - Returns true if the current shape is inside a component **copy** instance + Returns true if the current shape is inside a component **copy** instance isComponentRoot: |- ``` isComponentRoot(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the root of a component tree + Returns true when the current shape is the root of a component tree isComponentHead: |- ``` isComponentHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure + Returns true when the current shape is the head of a components tree nested structure componentRefShape: |- ``` - componentRefShape(): null | Shape + componentRefShape(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the equivalent shape in the component main instance. If the current shape is inside a - main instance will return `null`; + Returns the equivalent shape in the component main instance. If the current shape is inside a + main instance will return `null`; componentRoot: |- ``` - componentRoot(): null | Shape + componentRoot(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the root of the component tree structure for the current shape. If the current shape - is already a root will return itself. + Returns the root of the component tree structure for the current shape. If the current shape + is already a root will return itself. componentHead: |- ``` - componentHead(): null | Shape + componentHead(): Shape | null ``` - * Returns null | Shape + Returns Shape | null - Returns the head of the component tree structure for the current shape. If the current shape - is already a head will return itself. + Returns the head of the component tree structure for the current shape. If the current shape + is already a head will return itself. component: |- ``` - component(): null | LibraryComponent + component(): LibraryComponent | null ``` - * Returns null | LibraryComponent + Returns LibraryComponent | null - If the shape is a component instance, returns the reference to the component associated - otherwise will return null + If the shape is a component instance, returns the reference to the component associated + otherwise will return null detach: |- ``` detach(): void ``` - * If the current shape is a component it will remove the component information and leave the - shape as a "basic shape" + If the current shape is a component it will remove the component information and leave the + shape as a "basic shape" - Returns void + Returns void swapComponent: |- ``` - swapComponent(component): void + swapComponent(component: LibraryComponent): void ``` - * TODO + TODO - Parameters - + component: LibraryComponent + Parameters - Returns void + * component: LibraryComponent + + Returns void switchVariant: |- ``` - switchVariant(pos, value): void + switchVariant(pos: number, value: string): void ``` - * Switch a VariantComponent copy to the nearest one that has the specified property value + Switch a VariantComponent copy to the nearest one that has the specified property value - Parameters - + pos: number + Parameters - The position of the poroperty to update - + value: string + * pos: number - The new value of the property + The position of the poroperty to update + * value: string - Returns void + The new value of the property + + Returns void combineAsVariants: |- ``` - combineAsVariants(ids): void + combineAsVariants(ids: string[]): void ``` - * Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu - on the Penpot interface. - The current shape must be a component main instance. + Combine several standard Components into a VariantComponent. Similar to doing it with the contextual menu + on the Penpot interface. + The current shape must be a component main instance. - Parameters - + ids: string[] + Parameters - A list of ids of the main instances of the components to combine with this one. + * ids: string[] - Returns void + A list of ids of the main instances of the components to combine with this one. + + Returns void isVariantHead: |- ``` isVariantHead(): boolean ``` - * Returns boolean + Returns boolean - Returns true when the current shape is the head of a components tree nested structure, - and that component is a VariantComponent + Returns true when the current shape is the head of a components tree nested structure, + and that component is a VariantComponent resize: |- ``` - resize(width, height): void + resize(width: number, height: number): void ``` - * Resizes the shape to the specified width and height. + Resizes the shape to the specified width and height. - Parameters - + width: number + Parameters - The new width of the shape. - + height: number + * width: number - The new height of the shape. + The new width of the shape. + * height: number - Returns void + The new height of the shape. - Example - ``` - shape.resize(200, 100); - ``` + Returns void + + Example + ``` + shape.resize(200, 100); + ``` rotate: |- ``` - rotate(angle, center?): void + rotate(angle: number, center?: { x: number; y: number } | null): void ``` - * Rotates the shape in relation with the given center. + Rotates the shape in relation with the given center. - Parameters - + angle: number + Parameters - Angle in degrees to rotate. - + center: null | { - x: number; - y: number; - } + * angle: number - Center of the transform rotation. If not send will use the geometri center of the shapes. + Angle in degrees to rotate. + * center: { x: number; y: number } | null - Returns void + Center of the transform rotation. If not send will use the geometri center of the shapes. - Example - ``` - shape.rotate(45); - ``` + Returns void + + Example + ``` + shape.rotate(45); + ``` bringToFront: |- ``` bringToFront(): void ``` - * Moves the current shape to the front of its siblings + Moves the current shape to the front of its siblings - Returns void + Returns void bringForward: |- ``` bringForward(): void ``` - * Moves the current shape one position forward in its list of siblings + Moves the current shape one position forward in its list of siblings - Returns void + Returns void sendToBack: |- ``` sendToBack(): void ``` - * Moves the current shape to the back of its siblings + Moves the current shape to the back of its siblings - Returns void + Returns void sendBackward: |- ``` sendBackward(): void ``` - * Moves the current shape one position backwards in its list of siblings + Moves the current shape one position backwards in its list of siblings - Returns void + Returns void export: |- ``` - export(config): Promise + export(config: Export): Promise> ``` - * Generates an export from the current shape. + Generates an export from the current shape. - Parameters - + config: Export + Parameters - Returns Promise + * config: Export - Example - ``` - shape.export({ type: 'png', scale: 2 }); - ``` + Returns Promise> + + Example + ``` + shape.export({ type: 'png', scale: 2 }); + ``` addInteraction: |- ``` - addInteraction(trigger, action, delay?): Interaction + addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction ``` - * Adds a new interaction to the shape. + Adds a new interaction to the shape. - Parameters - + trigger: Trigger + Parameters - defines the conditions under which the action will be triggered - + action: Action + * trigger: Trigger - defines what will be executed when the trigger happens - + delay: number + defines the conditions under which the action will be triggered + * action: Action - for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. + defines what will be executed when the trigger happens + * delay: number - Returns Interaction + for the type of trigger `after-delay` will specify the time after triggered. Ignored otherwise. - Example - ``` - shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); - ``` + Returns Interaction + + Example + ``` + shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard }); + ``` removeInteraction: |- ``` - removeInteraction(interaction): void + removeInteraction(interaction: Interaction): void ``` - * Removes the interaction from the shape. + Removes the interaction from the shape. - Parameters - + interaction: Interaction + Parameters - is the interaction to remove from the shape + * interaction: Interaction - Returns void + is the interaction to remove from the shape - Example - ``` - shape.removeInteraction(interaction); - ``` + Returns void + + Example + ``` + shape.removeInteraction(interaction); + ``` applyToken: |- ``` - applyToken(token, properties): void + applyToken(token: Token, properties: TokenProperty[] | undefined): void ``` - * Applies one design token to one or more properties of the shape. + Applies one design token to one or more properties of the shape. - Parameters - + token: Token + Parameters - is the Token to apply - + properties: undefined | TokenProperty[] + * token: Token - an optional list of property names. If omitted, the - default properties will be applied. + is the Token to apply + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void clone: |- ``` clone(): Shape ``` - * Creates a clone of the shape. + Creates a clone of the shape. - Returns Shape + Returns Shape - Returns a new instance of the shape with identical properties. + Returns a new instance of the shape with identical properties. remove: |- ``` remove(): void ``` - * Removes the shape from its parent. + Removes the shape from its parent. - Returns void + Returns void getRange: |- ``` - getRange(start, end): TextRange + getRange(start: number, end: number): TextRange ``` - * Gets a text range within the text shape. + Gets a text range within the text shape. - Parameters - + start: number + Parameters - The start index of the text range. - + end: number + * start: number - The end index of the text range. + The start index of the text range. + * end: number - Returns TextRange + The end index of the text range. - Returns a TextRange object representing the specified text range. + Returns TextRange - Example - ``` - const textRange = textShape.getRange(0, 10);console.log(textRange.characters); - ``` + Returns a TextRange object representing the specified text range. + + Example + ``` + const textRange = textShape.getRange(0, 10);console.log(textRange.characters); + ``` applyTypography: |- ``` - applyTypography(typography): void + applyTypography(typography: LibraryTypography): void ``` - * Applies a typography style to the text shape. + Applies a typography style to the text shape. - Parameters - + typography: LibraryTypography + Parameters - The typography style to apply. + * typography: LibraryTypography - Returns void + The typography style to apply. - Remarks + Returns void - This method sets various typography properties for the text shape according to the given typography style. + Remarks - Example - ``` - textShape.applyTypography(typography); - ``` + This method sets various typography properties for the text shape according to the given typography style. + + Example + ``` + textShape.applyTypography(typography); + ``` TextRange: overview: |- Interface TextRange @@ -17747,54 +17540,34 @@ TextRange: This interface provides properties for styling and formatting text ranges. ``` - interface TextRange { - shape: Text; - characters: string; - fontId: string; - fontFamily: string; - fontVariantId: string; - fontSize: string; - fontWeight: string; - fontStyle: - | null - | "normal" - | "italic" - | "mixed"; - lineHeight: string; - letterSpacing: string; - textTransform: - | null + interface TextRange { + shape: Text; + characters: string; + fontId: string; + fontFamily: string; + fontVariantId: string; + fontSize: string; + fontWeight: string; + fontStyle: "normal" | "italic" | "mixed" | null; + lineHeight: string; + letterSpacing: string; + textTransform: | "none" | "mixed" | "uppercase" | "capitalize" - | "lowercase"; - textDecoration: - | null - | "none" - | "mixed" - | "underline" - | "line-through"; - direction: - | null - | "mixed" - | "ltr" - | "rtl"; - fills: Fill[] | "mixed"; - align: - | null - | "center" - | "left" - | "right" - | "mixed" - | "justify"; - verticalAlign: - | null - | "center" - | "top" - | "bottom" - | "mixed"; - applyTypography(typography: LibraryTypography): void; + | "lowercase" + | null; + textDecoration: "none" + | "mixed" + | "underline" + | "line-through" + | null; + direction: "mixed" | "ltr" | "rtl" | null; + fills: Fill[] | "mixed"; + align: "center" | "left" | "right" | "mixed" | "justify" | null; + verticalAlign: "center" | "top" | "bottom" | "mixed" | null; + applyTypography(typography: LibraryTypography): void; } ``` @@ -17845,11 +17618,7 @@ TextRange: The font weight of the text range. It can be a specific font weight or 'mixed' if multiple font weights are used. fontStyle: |- ``` - fontStyle: - | null - | "normal" - | "italic" - | "mixed" + fontStyle: "normal" | "italic" | "mixed" | null ``` The font style of the text range. It can be a specific font style or 'mixed' if multiple font styles are used. @@ -17867,34 +17636,25 @@ TextRange: The letter spacing of the text range. It can be a specific letter spacing or 'mixed' if multiple letter spacings are used. textTransform: |- ``` - textTransform: - | null + textTransform: | "none" | "mixed" | "uppercase" | "capitalize" | "lowercase" + | null ``` The text transform applied to the text range. It can be a specific text transform or 'mixed' if multiple text transforms are used. textDecoration: |- ``` - textDecoration: - | null - | "none" - | "mixed" - | "underline" - | "line-through" + textDecoration: "none" | "mixed" | "underline" | "line-through" | null ``` The text decoration applied to the text range. It can be a specific text decoration or 'mixed' if multiple text decorations are used. direction: |- ``` - direction: - | null - | "mixed" - | "ltr" - | "rtl" + direction: "mixed" | "ltr" | "rtl" | null ``` The text direction for the text range. It can be a specific direction or 'mixed' if multiple directions are used. @@ -17906,47 +17666,37 @@ TextRange: The fill styles applied to the text range. align: |- ``` - align: - | null - | "center" - | "left" - | "right" - | "mixed" - | "justify" + align: "center" | "left" | "right" | "mixed" | "justify" | null ``` The horizontal alignment of the text range. It can be a specific alignment or 'mixed' if multiple alignments are used. verticalAlign: |- ``` - verticalAlign: - | null - | "center" - | "top" - | "bottom" - | "mixed" + verticalAlign: "center" | "top" | "bottom" | "mixed" | null ``` The vertical alignment of the text range. It can be a specific alignment or 'mixed' if multiple alignments are used. Methods: applyTypography: |- ``` - applyTypography(typography): void + applyTypography(typography: LibraryTypography): void ``` - * Applies a typography style to the text range. - This method sets various typography properties for the text range according to the given typography style. + Applies a typography style to the text range. + This method sets various typography properties for the text range according to the given typography style. - Parameters - + typography: LibraryTypography + Parameters - The typography style to apply. + * typography: LibraryTypography - Returns void + The typography style to apply. - Example - ``` - textRange.applyTypography(typography); - ``` + Returns void + + Example + ``` + textRange.applyTypography(typography); + ``` ToggleOverlay: overview: |- Interface ToggleOverlay @@ -17955,10 +17705,10 @@ ToggleOverlay: It opens an overlay if it is not already opened or closes it if it is already opened. ``` - interface ToggleOverlay { - destination: Board; - relativeTo?: Shape; - position?: + interface ToggleOverlay { + destination: Board; + relativeTo?: Shape; + position?: | "center" | "manual" | "top-left" @@ -17966,16 +17716,16 @@ ToggleOverlay: | "top-center" | "bottom-left" | "bottom-right" - | "bottom-center"; - manualPositionLocation?: Point; - closeWhenClickOutside?: boolean; - addBackgroundOverlay?: boolean; - animation?: Animation; - type: "toggle-overlay"; + | "bottom-center"; + manualPositionLocation?: Point; + closeWhenClickOutside?: boolean; + addBackgroundOverlay?: boolean; + animation?: Animation; + type: "toggle-overlay"; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * OverlayAction + ToggleOverlay @@ -17997,7 +17747,7 @@ ToggleOverlay: Base shape to which the overlay will be positioned taking constraints into account. position: |- ``` - readonly position?: + readonly position?: | "center" | "manual" | "top-left" @@ -18035,7 +17785,7 @@ ToggleOverlay: Animation displayed with this interaction. type: |- ``` - readonly type + readonly type: "toggle-overlay" ``` The action type @@ -18048,9 +17798,9 @@ Track: This interface includes properties for defining the type and value of a track used in layout configurations. ``` - interface Track { - type: TrackType; - value: null | number; + interface Track { + type: TrackType; + value: number | null; } ``` @@ -18071,7 +17821,7 @@ Track: * 'auto': An automatic track type. value: |- ``` - value: null | number + value: number | null ``` The value of the track. @@ -18085,18 +17835,21 @@ TokenBase: all token types. ``` - interface TokenBase { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; + interface TokenBase { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenBorderRadius @@ -18143,56 +17896,58 @@ TokenBase: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenBorderRadius: overview: |- Interface TokenBorderRadius @@ -18202,21 +17957,24 @@ TokenBorderRadius: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenBorderRadius { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "borderRadius"; - value: string; - resolvedValue: undefined | number; + interface TokenBorderRadius { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "borderRadius"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenBorderRadius @@ -18245,7 +18003,7 @@ TokenBorderRadius: An optional description text. type: |- ``` - readonly type + readonly type: "borderRadius" ``` The type of the token. @@ -18258,7 +18016,7 @@ TokenBorderRadius: It's a positive number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -18271,69 +18029,71 @@ TokenBorderRadius: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenShadowValue: overview: |- Interface TokenShadowValue ========================== ``` - interface TokenShadowValue { - color: string; - inset: boolean; - offsetX: number; - offsetY: number; - spread: number; - blur: number; + interface TokenShadowValue { + color: string; + inset: boolean; + offsetX: number; + offsetY: number; + spread: number; + blur: number; } ``` @@ -18382,13 +18142,13 @@ TokenShadowValueString: ================================ ``` - interface TokenShadowValueString { - color: string; - inset: string; - offsetX: string; - offsetY: string; - spread: string; - blur: string; + interface TokenShadowValueString { + color: string; + inset: string; + offsetX: string; + offsetY: string; + spread: string; + blur: string; } ``` @@ -18446,21 +18206,24 @@ TokenShadow: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenShadow { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "shadow"; - value: string | TokenShadowValueString[]; - resolvedValue: undefined | TokenShadowValue[]; + interface TokenShadow { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "shadow"; + value: string | TokenShadowValueString[]; + resolvedValue: TokenShadowValue[] | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenShadow @@ -18489,7 +18252,7 @@ TokenShadow: An optional description text. type: |- ``` - readonly type + readonly type: "shadow" ``` The type of the token. @@ -18503,7 +18266,7 @@ TokenShadow: an array of TokenShadowValueString. resolvedValue: |- ``` - readonly resolvedValue: undefined | TokenShadowValue[] + readonly resolvedValue: TokenShadowValue[] | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -18517,56 +18280,58 @@ TokenShadow: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenColor: overview: |- Interface TokenColor @@ -18576,21 +18341,24 @@ TokenColor: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenColor { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "color"; - value: string; - resolvedValue: undefined | string; + interface TokenColor { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "color"; + value: string; + resolvedValue: string | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenColor @@ -18619,7 +18387,7 @@ TokenColor: An optional description text. type: |- ``` - readonly type + readonly type: "color" ``` The type of the token. @@ -18632,7 +18400,7 @@ TokenColor: It's a rgb color or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | string + readonly resolvedValue: string | undefined ``` The value as defined in the token itself. @@ -18643,56 +18411,58 @@ TokenColor: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenDimension: overview: |- Interface TokenDimension @@ -18702,21 +18472,24 @@ TokenDimension: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenDimension { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "dimension"; - value: string; - resolvedValue: undefined | number; + interface TokenDimension { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "dimension"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenDimension @@ -18745,7 +18518,7 @@ TokenDimension: An optional description text. type: |- ``` - readonly type + readonly type: "dimension" ``` The type of the token. @@ -18758,7 +18531,7 @@ TokenDimension: It's a positive number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -18771,56 +18544,58 @@ TokenDimension: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenFontFamilies: overview: |- Interface TokenFontFamilies @@ -18830,21 +18605,24 @@ TokenFontFamilies: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenFontFamilies { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "fontFamilies"; - value: string | string[]; - resolvedValue: undefined | string[]; + interface TokenFontFamilies { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "fontFamilies"; + value: string | string[]; + resolvedValue: string[] | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenFontFamilies @@ -18873,7 +18651,7 @@ TokenFontFamilies: An optional description text. type: |- ``` - readonly type + readonly type: "fontFamilies" ``` The type of the token. @@ -18888,7 +18666,7 @@ TokenFontFamilies: is an item in the array). resolvedValue: |- ``` - readonly resolvedValue: undefined | string[] + readonly resolvedValue: string[] | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -18902,56 +18680,58 @@ TokenFontFamilies: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenFontSizes: overview: |- Interface TokenFontSizes @@ -18961,21 +18741,24 @@ TokenFontSizes: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenFontSizes { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "fontSizes"; - value: string; - resolvedValue: undefined | number; + interface TokenFontSizes { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "fontSizes"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenFontSizes @@ -19004,7 +18787,7 @@ TokenFontSizes: An optional description text. type: |- ``` - readonly type + readonly type: "fontSizes" ``` The type of the token. @@ -19017,7 +18800,7 @@ TokenFontSizes: It's a positive number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19030,56 +18813,58 @@ TokenFontSizes: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenFontWeights: overview: |- Interface TokenFontWeights @@ -19089,21 +18874,24 @@ TokenFontWeights: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenFontWeights { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "fontWeights"; - value: string; - resolvedValue: undefined | string; + interface TokenFontWeights { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "fontWeights"; + value: string; + resolvedValue: string | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenFontWeights @@ -19132,7 +18920,7 @@ TokenFontWeights: An optional description text. type: |- ``` - readonly type + readonly type: "fontWeights" ``` The type of the token. @@ -19145,7 +18933,7 @@ TokenFontWeights: It's a weight string or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | string + readonly resolvedValue: string | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19159,56 +18947,58 @@ TokenFontWeights: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenLetterSpacing: overview: |- Interface TokenLetterSpacing @@ -19218,21 +19008,24 @@ TokenLetterSpacing: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenLetterSpacing { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "letterSpacing"; - value: string; - resolvedValue: undefined | number; + interface TokenLetterSpacing { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "letterSpacing"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenLetterSpacing @@ -19261,7 +19054,7 @@ TokenLetterSpacing: An optional description text. type: |- ``` - readonly type + readonly type: "letterSpacing" ``` The type of the token. @@ -19274,7 +19067,7 @@ TokenLetterSpacing: It's a number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19287,56 +19080,58 @@ TokenLetterSpacing: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenNumber: overview: |- Interface TokenNumber @@ -19346,21 +19141,24 @@ TokenNumber: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenNumber { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "number"; - value: string; - resolvedValue: undefined | number; + interface TokenNumber { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "number"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenNumber @@ -19389,7 +19187,7 @@ TokenNumber: An optional description text. type: |- ``` - readonly type + readonly type: "number" ``` The type of the token. @@ -19402,7 +19200,7 @@ TokenNumber: It's a number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19415,56 +19213,58 @@ TokenNumber: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenOpacity: overview: |- Interface TokenOpacity @@ -19474,21 +19274,24 @@ TokenOpacity: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenOpacity { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "opacity"; - value: string; - resolvedValue: undefined | number; + interface TokenOpacity { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "opacity"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenOpacity @@ -19517,7 +19320,7 @@ TokenOpacity: An optional description text. type: |- ``` - readonly type + readonly type: "opacity" ``` The type of the token. @@ -19530,7 +19333,7 @@ TokenOpacity: It's a number between 0 and 1 or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19544,56 +19347,58 @@ TokenOpacity: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenRotation: overview: |- Interface TokenRotation @@ -19603,21 +19408,24 @@ TokenRotation: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenRotation { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "rotation"; - value: string; - resolvedValue: undefined | number; + interface TokenRotation { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "rotation"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenRotation @@ -19646,7 +19454,7 @@ TokenRotation: An optional description text. type: |- ``` - readonly type + readonly type: "rotation" ``` The type of the token. @@ -19659,7 +19467,7 @@ TokenRotation: It's a number in degrees or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19673,56 +19481,58 @@ TokenRotation: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenSizing: overview: |- Interface TokenSizing @@ -19732,21 +19542,24 @@ TokenSizing: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenSizing { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "sizing"; - value: string; - resolvedValue: undefined | number; + interface TokenSizing { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "sizing"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenSizing @@ -19775,7 +19588,7 @@ TokenSizing: An optional description text. type: |- ``` - readonly type + readonly type: "sizing" ``` The type of the token. @@ -19788,7 +19601,7 @@ TokenSizing: It's a number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19801,56 +19614,58 @@ TokenSizing: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenSpacing: overview: |- Interface TokenSpacing @@ -19860,21 +19675,24 @@ TokenSpacing: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenSpacing { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "spacing"; - value: string; - resolvedValue: undefined | number; + interface TokenSpacing { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "spacing"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenSpacing @@ -19903,7 +19721,7 @@ TokenSpacing: An optional description text. type: |- ``` - readonly type + readonly type: "spacing" ``` The type of the token. @@ -19916,7 +19734,7 @@ TokenSpacing: It's a number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -19929,56 +19747,58 @@ TokenSpacing: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenBorderWidth: overview: |- Interface TokenBorderWidth @@ -19988,21 +19808,24 @@ TokenBorderWidth: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenBorderWidth { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "borderWidth"; - value: string; - resolvedValue: undefined | number; + interface TokenBorderWidth { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "borderWidth"; + value: string; + resolvedValue: number | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenBorderWidth @@ -20031,7 +19854,7 @@ TokenBorderWidth: An optional description text. type: |- ``` - readonly type + readonly type: "borderWidth" ``` The type of the token. @@ -20044,7 +19867,7 @@ TokenBorderWidth: It's a positive number or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | number + readonly resolvedValue: number | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -20057,56 +19880,58 @@ TokenBorderWidth: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenTextCase: overview: |- Interface TokenTextCase @@ -20116,21 +19941,24 @@ TokenTextCase: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenTextCase { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "textCase"; - value: string; - resolvedValue: undefined | string; + interface TokenTextCase { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "textCase"; + value: string; + resolvedValue: string | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenTextCase @@ -20159,7 +19987,7 @@ TokenTextCase: An optional description text. type: |- ``` - readonly type + readonly type: "textCase" ``` The type of the token. @@ -20172,7 +20000,7 @@ TokenTextCase: It's a case string or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | string + readonly resolvedValue: string | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -20186,56 +20014,58 @@ TokenTextCase: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenTextDecoration: overview: |- Interface TokenTextDecoration @@ -20245,21 +20075,24 @@ TokenTextDecoration: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenTextDecoration { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "textDecoration"; - value: string; - resolvedValue: undefined | string; + interface TokenTextDecoration { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "textDecoration"; + value: string; + resolvedValue: string | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenTextDecoration @@ -20288,7 +20121,7 @@ TokenTextDecoration: An optional description text. type: |- ``` - readonly type + readonly type: "textDecoration" ``` The type of the token. @@ -20301,7 +20134,7 @@ TokenTextDecoration: It's a decoration string or a reference. resolvedValue: |- ``` - readonly resolvedValue: undefined | string + readonly resolvedValue: string | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -20315,70 +20148,72 @@ TokenTextDecoration: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenTypographyValue: overview: |- Interface TokenTypographyValue ============================== ``` - interface TokenTypographyValue { - letterSpacing: number; - fontFamilies: string[]; - fontSizes: number; - fontWeights: string; - lineHeight: number; - textCase: string; - textDecoration: string; + interface TokenTypographyValue { + letterSpacing: number; + fontFamilies: string[]; + fontSizes: number; + fontWeights: string; + lineHeight: number; + textCase: string; + textDecoration: string; } ``` @@ -20433,14 +20268,14 @@ TokenTypographyValueString: ==================================== ``` - interface TokenTypographyValueString { - letterSpacing: string; - fontFamilies: string | string[]; - fontSizes: string; - fontWeight: string; - lineHeight: string; - textCase: string; - textDecoration: string; + interface TokenTypographyValueString { + letterSpacing: string; + fontFamilies: string | string[]; + fontSizes: string; + fontWeight: string; + lineHeight: string; + textCase: string; + textDecoration: string; } ``` @@ -20503,21 +20338,24 @@ TokenTypography: This interface extends `TokenBase` and specifies the data type of the value. ``` - interface TokenTypography { - id: string; - name: string; - description: string; - duplicate(): Token; - remove(): void; - applyToShapes(shapes: Shape[], properties: undefined | TokenProperty[]): void; - applyToSelected(properties: undefined | TokenProperty[]): void; - type: "typography"; - value: string | TokenTypographyValueString; - resolvedValue: undefined | TokenTypographyValue[]; + interface TokenTypography { + id: string; + name: string; + description: string; + duplicate(): Token; + remove(): void; + applyToShapes( + shapes: Shape[], + properties: TokenProperty[] | undefined, + ): void; + applyToSelected(properties: TokenProperty[] | undefined): void; + type: "typography"; + value: string | TokenTypographyValueString; + resolvedValue: TokenTypographyValue[] | undefined; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * TokenBase + TokenTypography @@ -20546,7 +20384,7 @@ TokenTypography: An optional description text. type: |- ``` - readonly type + readonly type: "typography" ``` The type of the token. @@ -20560,7 +20398,7 @@ TokenTypography: TokenTypographyValueString. resolvedValue: |- ``` - readonly resolvedValue: undefined | TokenTypographyValue[] + readonly resolvedValue: TokenTypographyValue[] | undefined ``` The value calculated by finding all tokens with the same name in active sets @@ -20574,56 +20412,58 @@ TokenTypography: duplicate(): Token ``` - * Adds to the set that contains this Token a new one equal to this one - but with a new id. + Adds to the set that contains this Token a new one equal to this one + but with a new id. - Returns Token + Returns Token remove: |- ``` remove(): void ``` - * Removes this token from the catalog. + Removes this token from the catalog. - It will NOT be unapplied from any shape, since there may be other tokens - with the same name. + It will NOT be unapplied from any shape, since there may be other tokens + with the same name. - Returns void + Returns void applyToShapes: |- ``` - applyToShapes(shapes, properties): void + applyToShapes(shapes: Shape[], properties: TokenProperty[] | undefined): void ``` - * Applies this token to one or more properties of the given shapes. + Applies this token to one or more properties of the given shapes. - Parameters - + shapes: Shape[] + Parameters - is an array of shapes to apply it. - + properties: undefined | TokenProperty[] + * shapes: Shape[] - an optional list of property names. If omitted, the - default properties will be applied. + is an array of shapes to apply it. + * properties: TokenProperty[] | undefined - NOTE that the tokens application is by name and not by id. If there exist - several tokens with the same name in different sets, the actual token applied - and the value set to the attributes will depend on which sets are active - (and will change if different sets or themes are activated later). + an optional list of property names. If omitted, the + default properties will be applied. - Returns void + NOTE that the tokens application is by name and not by id. If there exist + several tokens with the same name in different sets, the actual token applied + and the value set to the attributes will depend on which sets are active + (and will change if different sets or themes are activated later). + + Returns void applyToSelected: |- ``` - applyToSelected(properties): void + applyToSelected(properties: TokenProperty[] | undefined): void ``` - * Applies this token to the currently selected shapes. + Applies this token to the currently selected shapes. - Parameters and warnings are the same as above. + Parameters and warnings are the same as above. - Parameters - + properties: undefined | TokenProperty[] + Parameters - Returns void + * properties: TokenProperty[] | undefined + + Returns void TokenCatalog: overview: |- Interface TokenCatalog @@ -20638,13 +20478,13 @@ TokenCatalog: Themes. ``` - interface TokenCatalog { - themes: TokenTheme[]; - sets: TokenSet[]; - addTheme(group: string, name: string): TokenTheme; - addSet(name: string): TokenSet; - getThemeById(id: string): undefined | TokenTheme; - getSetById(id: string): undefined | TokenSet; + interface TokenCatalog { + themes: TokenTheme[]; + sets: TokenSet[]; + addTheme(group: { group: string; name: string }): TokenTheme; + addSet(name: { name: string }): TokenSet; + getThemeById(id: string): TokenTheme | undefined; + getSetById(id: string): TokenSet | undefined; } ``` @@ -20668,68 +20508,69 @@ TokenCatalog: Methods: addTheme: |- ``` - addTheme(group, name): TokenTheme + addTheme(group: { group: string; name: string }): TokenTheme ``` - * Creates a new TokenTheme and adds it to the catalog. + Creates a new TokenTheme and adds it to the catalog. - Parameters - + group: string + Parameters - The group name of the theme (can be empty string). - + name: string + * group: { group: string; name: string } - The name of the theme (required) + The group name of the theme (can be empty string). - Returns TokenTheme + Returns TokenTheme - Returns the created TokenTheme. + Returns the created TokenTheme. addSet: |- ``` - addSet(name): TokenSet + addSet(name: { name: string }): TokenSet ``` - * Creates a new TokenSet and adds it to the catalog. + Creates a new TokenSet and adds it to the catalog. - Parameters - + name: string + Parameters - The name of the set (required). It may contain - a group path, separated by `/`. + * name: { name: string } - Returns TokenSet + The name of the set (required). It may contain + a group path, separated by `/`. - Returns the created TokenSet. + Returns TokenSet + + Returns the created TokenSet. getThemeById: |- ``` - getThemeById(id): undefined | TokenTheme + getThemeById(id: string): TokenTheme | undefined ``` - * Retrieves a theme. + Retrieves a theme. - Parameters - + id: string + Parameters - the id of the theme. + * id: string - Returns undefined | TokenTheme + the id of the theme. - Returns the theme or undefined if not found. + Returns TokenTheme | undefined + + Returns the theme or undefined if not found. getSetById: |- ``` - getSetById(id): undefined | TokenSet + getSetById(id: string): TokenSet | undefined ``` - * Retrieves a set. + Retrieves a set. - Parameters - + id: string + Parameters - the id of the set. + * id: string - Returns undefined | TokenSet + the id of the set. - Returns the set or undefined if not found. + Returns TokenSet | undefined + + Returns the set or undefined if not found. TokenSet: overview: |- Interface TokenSet @@ -20742,17 +20583,19 @@ TokenSet: set is active. ``` - interface TokenSet { - id: string; - name: string; - active: boolean; - tokens: Token[]; - tokensByType: [string, Token[]][]; - toggleActive(): void; - getTokenById(id: string): undefined | Token; - addToken(type: TokenType, name: string, value: TokenValueString): Token; - duplicate(): TokenSet; - remove(): void; + interface TokenSet { + id: string; + name: string; + active: boolean; + tokens: Token[]; + tokensByType: [string, Token[]][]; + toggleActive(): void; + getTokenById(id: string): Token | undefined; + addToken( + type: { type: TokenType; name: string; value: TokenValueString }, + ): Token; + duplicate(): TokenSet; + remove(): void; } ``` @@ -20796,62 +20639,59 @@ TokenSet: toggleActive(): void ``` - * Toggles the active status of this set. + Toggles the active status of this set. - Returns void + Returns void getTokenById: |- ``` - getTokenById(id): undefined | Token + getTokenById(id: string): Token | undefined ``` - * Retrieves a token. + Retrieves a token. - Parameters - + id: string + Parameters - the id of the token. + * id: string - Returns undefined | Token + the id of the token. - Returns the token or undefined if not found. + Returns Token | undefined + + Returns the token or undefined if not found. addToken: |- ``` - addToken(type, name, value): Token + addToken( + type: { type: TokenType; name: string; value: TokenValueString }, + ): Token ``` - * Creates a new Token and adds it to the set. + Creates a new Token and adds it to the set. - Parameters - + type: TokenType + Parameters - Thetype of token. - + name: string + * type: { type: TokenType; name: string; value: TokenValueString } - The name of the token (required). It may contain - a group path, separated by `.`. - + value: TokenValueString + Thetype of token. - The value of the token (required), in the string form. + Returns Token - Returns Token - - Returns the created Token. + Returns the created Token. duplicate: |- ``` duplicate(): TokenSet ``` - * Adds to the catalog a new TokenSet equal to this one but with a new id. + Adds to the catalog a new TokenSet equal to this one but with a new id. - Returns TokenSet + Returns TokenSet remove: |- ``` remove(): void ``` - * Removes this set from the catalog. + Removes this set from the catalog. - Returns void + Returns void TokenTheme: overview: |- Interface TokenTheme @@ -20874,18 +20714,18 @@ TokenTheme: active). ``` - interface TokenTheme { - id: string; - externalId: undefined | string; - group: string; - name: string; - active: boolean; - toggleActive(): void; - activeSets: TokenSet[]; - addSet(tokenSet: TokenSet): void; - removeSet(tokenSet: TokenSet): void; - duplicate(): TokenTheme; - remove(): void; + interface TokenTheme { + id: string; + externalId: string | undefined; + group: string; + name: string; + active: boolean; + toggleActive(): void; + activeSets: TokenSet[]; + addSet(tokenSet: TokenSet): void; + removeSet(tokenSet: TokenSet): void; + duplicate(): TokenTheme; + remove(): void; } ``` @@ -20901,7 +20741,7 @@ TokenTheme: This one is not exported or synced with external Design Token sources. externalId: |- ``` - readonly externalId: undefined | string + readonly externalId: string | undefined ``` Optional identifier that may exists if the theme was imported from an @@ -20936,47 +20776,49 @@ TokenTheme: toggleActive(): void ``` - * Toggles the active status of this theme. + Toggles the active status of this theme. - Returns void + Returns void addSet: |- ``` - addSet(tokenSet): void + addSet(tokenSet: TokenSet): void ``` - * Adds a set to the list of the theme. + Adds a set to the list of the theme. - Parameters - + tokenSet: TokenSet + Parameters - Returns void + * tokenSet: TokenSet + + Returns void removeSet: |- ``` - removeSet(tokenSet): void + removeSet(tokenSet: TokenSet): void ``` - * Removes a set from the list of the theme. + Removes a set from the list of the theme. - Parameters - + tokenSet: TokenSet + Parameters - Returns void + * tokenSet: TokenSet + + Returns void duplicate: |- ``` duplicate(): TokenTheme ``` - * Adds to the catalog a new TokenTheme equal to this one but with a new id. + Adds to the catalog a new TokenTheme equal to this one but with a new id. - Returns TokenTheme + Returns TokenTheme remove: |- ``` remove(): void ``` - * Removes this theme from the catalog. + Removes this theme from the catalog. - Returns void + Returns void User: overview: |- Interface User @@ -20985,16 +20827,16 @@ User: Represents a user in Penpot. ``` - interface User { - id: string; - name?: string; - avatarUrl?: string; - color: string; - sessionId?: string; + interface User { + id: string; + name?: string; + avatarUrl?: string; + color: string; + sessionId?: string; } ``` - Hierarchy (view full) + Hierarchy (View Summary) * User + ActiveUser @@ -21065,16 +20907,16 @@ Variants: TODO ``` - interface Variants { - id: string; - libraryId: string; - properties: string[]; - currentValues(property: string): string[]; - removeProperty(pos: number): void; - renameProperty(pos: number, name: string): void; - variantComponents(): LibraryComponent[]; - addVariant(): void; - addProperty(): void; + interface Variants { + id: string; + libraryId: string; + properties: string[]; + currentValues(property: string): string[]; + removeProperty(pos: number): void; + renameProperty(pos: number, name: string): void; + variantComponents(): LibraryComponent[]; + addVariant(): void; + addProperty(): void; } ``` @@ -21103,70 +20945,73 @@ Variants: Methods: currentValues: |- ``` - currentValues(property): string[] + currentValues(property: string): string[] ``` - * A list of all the values of a property along all the variantComponents of this Variant + A list of all the values of a property along all the variantComponents of this Variant - Parameters - + property: string + Parameters - The name of the property + * property: string - Returns string[] + The name of the property + + Returns string[] removeProperty: |- ``` - removeProperty(pos): void + removeProperty(pos: number): void ``` - * Remove a property of the Variant + Remove a property of the Variant - Parameters - + pos: number + Parameters - The position of the property to remove + * pos: number - Returns void + The position of the property to remove + + Returns void renameProperty: |- ``` - renameProperty(pos, name): void + renameProperty(pos: number, name: string): void ``` - * Rename a property of the Variant + Rename a property of the Variant - Parameters - + pos: number + Parameters - The position of the property to rename - + name: string + * pos: number - The new name of the property + The position of the property to rename + * name: string - Returns void + The new name of the property + + Returns void variantComponents: |- ``` variantComponents(): LibraryComponent[] ``` - * List all the VariantComponents on this Variant. + List all the VariantComponents on this Variant. - Returns LibraryComponent[] + Returns LibraryComponent[] addVariant: |- ``` addVariant(): void ``` - * Creates a duplicate of the main VariantComponent of this Variant + Creates a duplicate of the main VariantComponent of this Variant - Returns void + Returns void addProperty: |- ``` addProperty(): void ``` - * Adds a new property to this Variant + Adds a new property to this Variant - Returns void + Returns void Viewport: overview: |- Interface Viewport @@ -21176,13 +21021,13 @@ Viewport: It includes the center point, zoom level, and the bounds of the viewport. ``` - interface Viewport { - center: Point; - zoom: number; - bounds: Bounds; - zoomReset(): void; - zoomToFitAll(): void; - zoomIntoView(shapes: Shape[]): void; + interface Viewport { + center: Point; + zoom: number; + bounds: Bounds; + zoomReset(): void; + zoomToFitAll(): void; + zoomIntoView(shapes: Shape[]): void; } ``` @@ -21214,36 +21059,37 @@ Viewport: zoomReset(): void ``` - * Resets the zoom level. + Resets the zoom level. - Returns void + Returns void zoomToFitAll: |- ``` zoomToFitAll(): void ``` - * Changes the viewport and zoom so can fit all the current shapes in the page. + Changes the viewport and zoom so can fit all the current shapes in the page. - Returns void + Returns void zoomIntoView: |- ``` - zoomIntoView(shapes): void + zoomIntoView(shapes: Shape[]): void ``` - * Changes the viewport and zoom so all the `shapes` in the argument are - visible. + Changes the viewport and zoom so all the `shapes` in the argument are + visible. - Parameters - + shapes: Shape[] + Parameters - Returns void + * shapes: Shape[] + + Returns void Action: overview: |- Type Alias Action ================= ``` - Action: + Action: | NavigateTo | OpenOverlay | ToggleOverlay @@ -21275,11 +21121,7 @@ BooleanType: ====================== ``` - BooleanType: - | "union" - | "difference" - | "exclude" - | "intersection" + BooleanType: "union" | "difference" | "exclude" | "intersection" ``` Represents the boolean operation types available in Penpot. @@ -21292,98 +21134,123 @@ Bounds: Type Alias Bounds ================= - ``` - Bounds: { - x: number; - y: number; - width: number; - height: number; - } - ``` - Bounds represents the boundaries of a rectangular area, defined by the coordinates of the top-left corner and the dimensions of the rectangle. - Type declaration - - * x: number - - Top-left x position of the rectangular area defined - * y: number - - Top-left y position of the rectangular area defined - * width: number - - Width of the represented area - * height: number - - Height of the represented area - Example ``` const bounds = { x: 50, y: 50, width: 200, height: 100 };console.log(bounds); ``` + ``` + type Bounds = { + x: number; + y: number; + width: number; + height: number; + } + ``` + Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer, Viewport - members: {} + members: + Properties: + x: |- + ``` + x: number + ``` + + Top-left x position of the rectangular area defined + y: |- + ``` + y: number + ``` + + Top-left y position of the rectangular area defined + width: |- + ``` + width: number + ``` + + Width of the represented area + height: |- + ``` + height: number + ``` + + Height of the represented area Gradient: overview: |- Type Alias Gradient =================== - ``` - Gradient: { - type: "linear" | "radial"; - startX: number; - startY: number; - endX: number; - endY: number; - width: number; - stops: { - color: string; - opacity?: number; - offset: number; - }[]; - } - ``` - Represents a gradient configuration in Penpot. A gradient can be either linear or radial and includes properties to define its shape, position, and color stops. - Type declaration - - * type: "linear" | "radial" - - Specifies the type of gradient. - - + 'linear': A gradient that transitions colors along a straight line. - + 'radial': A gradient that transitions colors radiating outward from a central point. - - Example - ``` - const gradient: Gradient = { type: 'linear', startX: 0, startY: 0, endX: 100, endY: 100, width: 100, stops: [{ color: '#FF5733', offset: 0 }] }; - ``` - * startX: number - - The X-coordinate of the starting point of the gradient. - * startY: number - - The Y-coordinate of the starting point of the gradient. - * endX: number - - The X-coordinate of the ending point of the gradient. - * endY: number - - The Y-coordinate of the ending point of the gradient. - * width: number - - The width of the gradient. For radial gradients, this could be interpreted as the radius. - * stops: { color: string; opacity?: number; offset: number; }[] - - An array of color stops that define the gradient. + ``` + type Gradient = { + type: "linear" | "radial"; + startX: number; + startY: number; + endX: number; + endY: number; + width: number; + stops: { color: string; opacity?: number; offset: number }[]; + } + ``` Referenced by: Color, Fill, LibraryColor, Stroke - members: {} + members: + Properties: + type: |- + ``` + type: "linear" | "radial" + ``` + + Specifies the type of gradient. + + * 'linear': A gradient that transitions colors along a straight line. + * 'radial': A gradient that transitions colors radiating outward from a central point. + + Example + ``` + const gradient: Gradient = { type: 'linear', startX: 0, startY: 0, endX: 100, endY: 100, width: 100, stops: [{ color: '#FF5733', offset: 0 }] }; + ``` + startX: |- + ``` + startX: number + ``` + + The X-coordinate of the starting point of the gradient. + startY: |- + ``` + startY: number + ``` + + The Y-coordinate of the starting point of the gradient. + endX: |- + ``` + endX: number + ``` + + The X-coordinate of the ending point of the gradient. + endY: |- + ``` + endY: number + ``` + + The Y-coordinate of the ending point of the gradient. + width: |- + ``` + width: number + ``` + + The width of the gradient. For radial gradients, this could be interpreted as the radius. + stops: |- + ``` + stops: { color: string; opacity?: number; offset: number }[] + ``` + + An array of color stops that define the gradient. Guide: overview: |- Type Alias Guide @@ -21403,96 +21270,119 @@ ImageData: Type Alias ImageData ==================== - ``` - ImageData: { - name?: string; - width: number; - height: number; - mtype?: string; - id: string; - keepAspectRatio?: boolean; - data(): Promise; - } - ``` - Represents image data in Penpot. This includes properties for defining the image's dimensions, metadata, and aspect ratio handling. - Type declaration - - * Optionalname?: string - - The optional name of the image. - * width: number - - The width of the image. - * height: number - - The height of the image. - * Optionalmtype?: string - - The optional media type of the image (e.g., 'image/png', 'image/jpeg'). - * id: string - - The unique identifier for the image. - * OptionalkeepAspectRatio?: boolean - - Whether to keep the aspect ratio of the image when resizing. - Defaults to false if omitted. - * data:function - - ``` - data(): Promise - ``` - - + Returns the imaged data as a byte array. - - Returns Promise + ``` + type ImageData = { + name?: string; + width: number; + height: number; + mtype?: string; + id: string; + keepAspectRatio?: boolean; + data(): Promise>; + } + ``` Referenced by: Color, Context, Fill, LibraryColor, Penpot - members: {} + members: + Properties: + name: |- + ``` + name?: string + ``` + + The optional name of the image. + width: |- + ``` + width: number + ``` + + The width of the image. + height: |- + ``` + height: number + ``` + + The height of the image. + mtype: |- + ``` + mtype?: string + ``` + + The optional media type of the image (e.g., 'image/png', 'image/jpeg'). + id: |- + ``` + id: string + ``` + + The unique identifier for the image. + keepAspectRatio: |- + ``` + keepAspectRatio?: boolean + ``` + + Whether to keep the aspect ratio of the image when resizing. + Defaults to false if omitted. + Methods: + data: |- + ``` + data(): Promise> + ``` + + Returns the imaged data as a byte array. + + Returns Promise> LibraryContext: overview: |- Type Alias LibraryContext ========================= - ``` - LibraryContext: { - local: Library; - connected: Library[]; - availableLibraries(): Promise; - connectLibrary(libraryId: string): Promise; - } - ``` - Represents the context of Penpot libraries, including both local and connected libraries. This type contains references to the local library and an array of connected libraries. - Type declaration + ``` + type LibraryContext = { + local: Library; + connected: Library[]; + availableLibraries(): Promise; + connectLibrary(libraryId: string): Promise; + } + ``` - * Readonlylocal: Library + Referenced by: Context, Penpot + members: + Properties: + local: |- + ``` + readonly local: Library + ``` - The local library in the Penpot context. + The local library in the Penpot context. - Example - ``` - const localLibrary = libraryContext.local; - ``` - * Readonlyconnected: Library[] + Example + ``` + const localLibrary = libraryContext.local; + ``` + connected: |- + ``` + readonly connected: Library[] + ``` - An array of connected libraries in the Penpot context. + An array of connected libraries in the Penpot context. - Example - ``` - const connectedLibraries = libraryContext.connected; - ``` - * availableLibraries:function + Example + ``` + const connectedLibraries = libraryContext.connected; + ``` + Methods: + availableLibraries: |- + ``` + availableLibraries(): Promise + ``` - ``` - availableLibraries(): Promise - ``` - - + Retrieves a summary of available libraries that can be connected to. + Retrieves a summary of available libraries that can be connected to. Returns Promise @@ -21502,16 +21392,16 @@ LibraryContext: ``` const availableLibraries = await libraryContext.availableLibraries(); ``` - * connectLibrary:function + connectLibrary: |- + ``` + connectLibrary(libraryId: string): Promise + ``` - ``` - connectLibrary(libraryId): Promise - ``` - - + Connects to a specific library identified by its ID. + Connects to a specific library identified by its ID. Parameters - - libraryId: string + + * libraryId: string The ID of the library to connect to. @@ -21523,25 +21413,31 @@ LibraryContext: ``` const connectedLibrary = await libraryContext.connectLibrary('library-id'); ``` - - Referenced by: Context, Penpot - members: {} Point: overview: |- Type Alias Point ================ + Point represents a point in 2D space, typically with x and y coordinates. + ``` - Point: { - x: number; - y: number; + type Point = { + x: number; + y: number; } ``` - Point represents a point in 2D space, typically with x and y coordinates. - Referenced by: Board, Boolean, CommentThread, Ellipse, Group, Image, OpenOverlay, OverlayAction, Page, Path, Rectangle, ShapeBase, SvgRaw, Text, ToggleOverlay, VariantContainer, Viewport - members: {} + members: + Properties: + x: |- + ``` + x: number + ``` + y: |- + ``` + y: number + ``` RulerGuideOrientation: overview: |- Type Alias RulerGuideOrientation @@ -21559,7 +21455,7 @@ Shape: ================ ``` - Shape: + Shape: | Board | Group | Boolean @@ -21587,7 +21483,7 @@ StrokeCap: ==================== ``` - StrokeCap: + StrokeCap: | "round" | "square" | "line-arrow" @@ -21621,11 +21517,7 @@ TrackType: ==================== ``` - TrackType: - | "flex" - | "fixed" - | "percent" - | "auto" + TrackType: "flex" | "fixed" | "percent" | "auto" ``` Represents the type of track in Penpot. @@ -21639,11 +21531,7 @@ Trigger: ================== ``` - Trigger: - | "click" - | "mouse-enter" - | "mouse-leave" - | "after-delay" + Trigger: "click" | "mouse-enter" | "mouse-leave" | "after-delay" ``` Types of triggers defined: @@ -21661,7 +21549,7 @@ TokenValueString: =========================== ``` - TokenValueString: + TokenValueString: | TokenShadowValueString | TokenTypographyValueString | string @@ -21678,7 +21566,7 @@ Token: ================ ``` - Token: + Token: | TokenBorderRadius | TokenShadow | TokenColor @@ -21708,11 +21596,7 @@ TokenBorderRadiusProps: ================================= ``` - TokenBorderRadiusProps: - | "r1" - | "r2" - | "r3" - | "r4" + TokenBorderRadiusProps: "r1" | "r2" | "r3" | "r4" ``` The properties that a BorderRadius token can be applied to. @@ -21725,7 +21609,7 @@ TokenShadowProps: =========================== ``` - TokenShadowProps + TokenShadowProps: "shadow" ``` The properties that a Shadow token can be applied to. @@ -21738,7 +21622,7 @@ TokenColorProps: ========================== ``` - TokenColorProps: "fill" | "stroke" + TokenColorProps: "fill" | "strokeColor" ``` The properties that a Color token can be applied to. @@ -21764,7 +21648,7 @@ TokenFontFamiliesProps: ================================= ``` - TokenFontFamiliesProps + TokenFontFamiliesProps: "font-families" ``` The properties that a FontFamilies token can be applied to. @@ -21777,7 +21661,7 @@ TokenFontSizesProps: ============================== ``` - TokenFontSizesProps + TokenFontSizesProps: "font-size" ``` The properties that a FontSizes token can be applied to. @@ -21790,7 +21674,7 @@ TokenFontWeightProps: =============================== ``` - TokenFontWeightProps + TokenFontWeightProps: "font-weight" ``` The properties that a FontWeight token can be applied to. @@ -21803,7 +21687,7 @@ TokenLetterSpacingProps: ================================== ``` - TokenLetterSpacingProps + TokenLetterSpacingProps: "letter-spacing" ``` The properties that a LetterSpacing token can be applied to. @@ -21829,7 +21713,7 @@ TokenOpacityProps: ============================ ``` - TokenOpacityProps + TokenOpacityProps: "opacity" ``` The properties that an Opacity token can be applied to. @@ -21842,7 +21726,7 @@ TokenSizingProps: =========================== ``` - TokenSizingProps: + TokenSizingProps: | "width" | "height" | "layout-item-min-w" @@ -21861,7 +21745,7 @@ TokenSpacingProps: ============================ ``` - TokenSpacingProps: + TokenSpacingProps: | "row-gap" | "column-gap" | "p1" @@ -21884,7 +21768,7 @@ TokenBorderWidthProps: ================================ ``` - TokenBorderWidthProps + TokenBorderWidthProps: "stroke-width" ``` The properties that a BorderWidth token can be applied to. @@ -21897,7 +21781,7 @@ TokenTextCaseProps: ============================= ``` - TokenTextCaseProps + TokenTextCaseProps: "text-case" ``` The properties that a TextCase token can be applied to. @@ -21910,7 +21794,7 @@ TokenTextDecorationProps: =================================== ``` - TokenTextDecorationProps + TokenTextDecorationProps: "text-decoration" ``` The properties that a TextDecoration token can be applied to. @@ -21923,7 +21807,7 @@ TokenTypographyProps: =============================== ``` - TokenTypographyProps + TokenTypographyProps: "typography" ``` The properties that a Typography token can be applied to. @@ -21936,7 +21820,7 @@ TokenProperty: ======================== ``` - TokenProperty: + TokenProperty: | "all" | TokenBorderRadiusProps | TokenShadowProps @@ -21969,7 +21853,7 @@ TokenType: ==================== ``` - TokenType: + TokenType: | "borderRadius" | "shadow" | "color"