Interface Page

Page represents a page in the Penpot application. It includes properties for the page's identifier and name, as well as methods for managing shapes on the page.

interface Page {
    id: string;
    name: string;
    rulerGuides: RulerGuide[];
    root: Shape;
    getShapeById(id: string): null | Shape;
    findShapes(criteria?: {
        name?: string;
        nameLike?: string;
        type?:
            | "boolean"
            | "ellipse"
            | "image"
            | "path"
            | "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<CommentThread>;
    removeCommentThread(commentThread: CommentThread): Promise<void>;
    findCommentThreads(criteria?: {
        onlyYours: boolean;
        showResolved: boolean;
    }): Promise<CommentThread[]>;
    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)

Properties

id name rulerGuides root flows

Methods

getShapeById findShapes createFlow removeFlow addRulerGuide removeRulerGuide addCommentThread removeCommentThread findCommentThreads getPluginData setPluginData getPluginDataKeys getSharedPluginData setSharedPluginData getSharedPluginDataKeys

Properties

Readonlyid

id: string

The id property is a unique identifier for the page.

name

name: string

The name property is the name of the page.

ReadonlyrulerGuides

rulerGuides: RulerGuide[]

The ruler guides attached to the board

root

root: Shape

The root shape of the current page. Will be the parent shape of all the shapes inside the document. Requires content:read permission.

Readonlyflows

flows: Flow[]

The interaction flows defined for the page.

Methods

getShapeById

  • getShapeById(id): null | Shape

  • Retrieves a shape by its unique identifier.

    Parameters

    • id: string

      The unique identifier of the shape.

    Returns null | Shape

    Example

    const shape = penpot.currentPage.getShapeById('shapeId');

findShapes

  • findShapes(criteria?): Shape[]

  • Finds all shapes on the page. Optionaly it gets a criteria object to search for specific criteria

    Parameters

    • Optionalcriteria: {
          name?: string;
          nameLike?: string;
          type?:
              | "boolean"
              | "ellipse"
              | "image"
              | "path"
              | "text"
              | "group"
              | "board"
              | "rectangle"
              | "svg-raw";
      }
      • Optionalname?: string
      • OptionalnameLike?: string
      • Optionaltype?:
            | "boolean"
            | "ellipse"
            | "image"
            | "path"
            | "text"
            | "group"
            | "board"
            | "rectangle"
            | "svg-raw"

    Returns Shape[]

    Example

    const shapes = penpot.currentPage.findShapes({ name: 'exampleName' });

createFlow

  • createFlow(name, board): Flow

  • Creates a new flow in the page.

    Parameters

    • name: string

      the name identifying the flow

    • board: Board

      the starting board for the current flow

    Returns Flow

    Example

    const flow = penpot.currentPage.createFlow('exampleFlow', board);

removeFlow

  • removeFlow(flow): void

  • Removes the flow from the page

    Parameters

    • flow: Flow

      the flow to be removed from the page

    Returns void

addRulerGuide

removeRulerGuide

  • removeRulerGuide(guide): void

  • Removes the guide from the current page.

    Parameters

    Returns void

addCommentThread

  • addCommentThread(content, position): Promise<CommentThread>

  • Creates a new comment thread in the position. Optionaly adds it into the board. Returns the thread created. Requires the comment:write permission.

    Parameters

    • content: string
    • position: Point

    Returns Promise<CommentThread>

removeCommentThread

  • removeCommentThread(commentThread): Promise<void>

  • Removes the comment thread. Requires the comment:write permission.

    Parameters

    Returns Promise<void>

findCommentThreads

  • findCommentThreads(criteria?): Promise<CommentThread[]>

  • Find all the comments that match the criteria.

    • onlyYours: if true will return the threads where the current user has engaged.
    • showResolved: by default resolved comments will be hidden. If true the resolved will be returned. Requires the comment:read or comment:write permission.

    Parameters

    • Optionalcriteria: {
          onlyYours: boolean;
          showResolved: boolean;
      }
      • onlyYours: boolean
      • showResolved: boolean

    Returns Promise<CommentThread[]>

getPluginData

  • getPluginData(key): string

  • Retrieves the data for our own plugin, given a specific key.

    Parameters

    • key: string

      The key for which to retrieve the data.

    Returns string

    Returns the data associated with the key as a string.

    Example

    const data = shape.getPluginData('exampleKey');
    console.log(data);

setPluginData

  • setPluginData(key, value): void

  • Sets the plugin-specific data for the given key.

    Parameters

    • key: string

      The key for which to set the data.

    • value: string

      The data to set for the key.

    Returns void

    Example

    shape.setPluginData('exampleKey', 'exampleValue');

getPluginDataKeys

  • getPluginDataKeys(): string[]

  • Retrieves all the keys for the plugin-specific data.

    Returns string[]

    Returns an array of strings representing all the keys.

    Example

    const keys = shape.getPluginDataKeys();
    console.log(keys);

getSharedPluginData

  • getSharedPluginData(namespace, key): string

  • If we know the namespace of an external plugin, this is the way to get their data.

    Parameters

    • namespace: string

      The namespace for the shared data.

    • key: string

      The key for which to retrieve the data.

    Returns string

    Returns the shared data associated with the key as a string.

    Example

    const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');
    console.log(sharedData);

setSharedPluginData

  • setSharedPluginData(namespace, key, value): void

  • Sets the shared plugin-specific data for the given namespace and key.

    Parameters

    • namespace: string

      The namespace for the shared data.

    • key: string

      The key for which to set the data.

    • value: string

      The data to set for the key.

    Returns void

    Example

    shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');

getSharedPluginDataKeys

  • getSharedPluginDataKeys(namespace): string[]

  • Retrieves all the keys for the shared plugin-specific data in the given namespace.

    Parameters

    • namespace: string

      The namespace for the shared data.

    Returns string[]

    Returns an array of strings representing all the keys in the namespace.

    Example

    const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');
    console.log(sharedKeys);

Settings

Member Visibility

On This Page

Properties
Methods