Interface Board

Represents a board in Penpot. This interface extends ShapeBase and includes properties and methods specific to board.

interface Board {
    type: "board";
    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;
    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;
    x: number;
    y: number;
    width: number;
    height: number;
    bounds: Bounds;
    center: Point;
    blocked: boolean;
    hidden: boolean;
    visible: boolean;
    proportionLock: boolean;
    constraintsHorizontal:
        | "center"
        | "left"
        | "right"
        | "leftright"
        | "scale";
    constraintsVertical:
        | "center"
        | "top"
        | "bottom"
        | "scale"
        | "topbottom";
    borderRadius: number;
    borderRadiusTopLeft: number;
    borderRadiusTopRight: number;
    borderRadiusBottomRight: number;
    borderRadiusBottomLeft: number;
    opacity: number;
    blendMode:
        | "difference"
        | "normal"
        | "darken"
        | "multiply"
        | "color-burn"
        | "lighten"
        | "screen"
        | "color-dodge"
        | "overlay"
        | "soft-light"
        | "hard-light"
        | "exclusion"
        | "hue"
        | "saturation"
        | "color"
        | "luminosity";
    shadows: Shadow[];
    blur?: Blur;
    exports: Export[];
    boardX: number;
    boardY: number;
    parentX: number;
    parentY: number;
    flipX: boolean;
    flipY: boolean;
    rotation: number;
    strokes: Stroke[];
    layoutChild?: LayoutChildProperties;
    layoutCell?: LayoutChildProperties;
    isComponentInstance(): boolean;
    isComponentMainInstance(): boolean;
    isComponentCopyInstance(): boolean;
    isComponentNestedInstance(): boolean;
    isComponentRoot(): boolean;
    isComponentHead(): boolean;
    componentRefShape(): null | Shape;
    componentRoot(): null | Shape;
    componentHead(): null | Shape;
    component(): null | LibraryComponent;
    detach(): void;
    resize(width: number, height: number): void;
    rotate(angle: number, center?: null | {
        x: number;
        y: number;
    }): void;
    export(config: Export): Promise<Uint8Array>;
    interactions: Interaction[];
    addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction;
    removeInteraction(interaction: Interaction): void;
    clone(): Shape;
    remove(): void;
}

Hierarchy (view full)

Properties

type grid? flex? guides rulerGuides horizontalSizing? verticalSizing? fills children id name parent x y width height bounds center blocked hidden visible proportionLock constraintsHorizontal constraintsVertical borderRadius borderRadiusTopLeft borderRadiusTopRight borderRadiusBottomRight borderRadiusBottomLeft opacity blendMode shadows blur? exports boardX boardY parentX parentY flipX flipY rotation strokes layoutChild? layoutCell? interactions

Methods

appendChild insertChild addFlexLayout addGridLayout addRulerGuide removeRulerGuide getPluginData setPluginData getPluginDataKeys getSharedPluginData setSharedPluginData getSharedPluginDataKeys isComponentInstance isComponentMainInstance isComponentCopyInstance isComponentNestedInstance isComponentRoot isComponentHead componentRefShape componentRoot componentHead component detach resize rotate export addInteraction removeInteraction clone remove

Properties

Readonlytype

type: "board"

The type of the shape, which is always 'board' for boards.

Optional Readonlygrid

grid?: GridLayout

The grid layout configuration of the board, if applicable.

Optional Readonlyflex

flex?: FlexLayout

The flex layout configuration of the board, if applicable.

guides

guides: Guide[]

The guides associated with the board.

ReadonlyrulerGuides

rulerGuides: RulerGuide[]

The ruler guides attached to the board

OptionalhorizontalSizing

horizontalSizing?: "auto" | "fix"

The horizontal sizing behavior of the board.

OptionalverticalSizing

verticalSizing?: "auto" | "fix"

The vertical sizing behavior of the board.

fills

fills: Fill[]

The fills applied to the shape.

Readonlychildren

children: Shape[]

The children shapes contained within the board.

Readonlyid

id: string

The unique identifier of the shape.

name

name: string

The name of the shape.

Readonlyparent

parent: null | Shape

The parent shape. If the shape is the first level the parent will be the root shape. For the root shape the parent is null

x

x: number

The x-coordinate of the shape's position.

y

y: number

The y-coordinate of the shape's position.

Readonlywidth

width: number

The width of the shape.

Readonlyheight

height: number

The height of the shape.

Readonlybounds

bounds: Bounds

Returns

Returns the bounding box surrounding the current shape

Readonlycenter

center: Point

Returns

Returns the geometric center of the shape

blocked

blocked: boolean

Indicates whether the shape is blocked.

hidden

hidden: boolean

Indicates whether the shape is hidden.

visible

visible: boolean

Indicates whether the shape is visible.

proportionLock

proportionLock: boolean

Indicates whether the shape has proportion lock enabled.

constraintsHorizontal

constraintsHorizontal:
    | "center"
    | "left"
    | "right"
    | "leftright"
    | "scale"

The horizontal constraints applied to the shape.

constraintsVertical

constraintsVertical:
    | "center"
    | "top"
    | "bottom"
    | "scale"
    | "topbottom"

The vertical constraints applied to the shape.

borderRadius

borderRadius: number

The border radius of the shape.

borderRadiusTopLeft

borderRadiusTopLeft: number

The border radius of the top-left corner of the shape.

borderRadiusTopRight

borderRadiusTopRight: number

The border radius of the top-right corner of the shape.

borderRadiusBottomRight

borderRadiusBottomRight: number

The border radius of the bottom-right corner of the shape.

borderRadiusBottomLeft

borderRadiusBottomLeft: number

The border radius of the bottom-left corner of the shape.

opacity

opacity: number

The opacity of the shape.

blendMode

blendMode:
    | "difference"
    | "normal"
    | "darken"
    | "multiply"
    | "color-burn"
    | "lighten"
    | "screen"
    | "color-dodge"
    | "overlay"
    | "soft-light"
    | "hard-light"
    | "exclusion"
    | "hue"
    | "saturation"
    | "color"
    | "luminosity"

The blend mode applied to the shape.

shadows

shadows: Shadow[]

The shadows applied to the shape.

Optionalblur

blur?: Blur

The blur effect applied to the shape.

exports

exports: Export[]

The export settings of the shape.

boardX

boardX: number

The x-coordinate of the shape relative to its board.

boardY

boardY: number

The y-coordinate of the shape relative to its board.

parentX

parentX: number

The x-coordinate of the shape relative to its parent.

parentY

parentY: number

The y-coordinate of the shape relative to its parent.

flipX

flipX: boolean

Indicates whether the shape is flipped horizontally.

flipY

flipY: boolean

Indicates whether the shape is flipped vertically.

rotation

rotation: number

Returns

Returns the rotation in degrees of the shape with respect to it's center.

strokes

strokes: Stroke[]

The strokes applied to the shape.

Optional ReadonlylayoutChild

layoutChild?: LayoutChildProperties

Layout properties for children of the shape.

Optional ReadonlylayoutCell

layoutCell?: LayoutChildProperties

Layout properties for cells in a grid layout.

Readonlyinteractions

interactions: Interaction[]

The interactions for the current shape.

Methods

appendChild

  • appendChild(child): void

  • Appends a child shape to the board.

    Parameters

    • child: Shape

      The child shape to append.

    Returns void

    Example

    board.appendChild(childShape);

insertChild

  • insertChild(index, child): void

  • Inserts a child shape at the specified index within the board.

    Parameters

    • index: number

      The index at which to insert the child shape.

    • child: Shape

      The child shape to insert.

    Returns void

    Example

    board.insertChild(0, childShape);

addFlexLayout

  • addFlexLayout(): FlexLayout

  • Adds a flex layout configuration to the board (so it's necessary to create a board first of all).

    Returns FlexLayout

    Returns the flex layout configuration added to the board.

    Example

    const board = penpot.createBoard();
    const flex = board.addFlexLayout();

    // You can change the flex properties as follows.
    flex.dir = "column";
    flex.wrap = "wrap";
    flex.alignItems = "center";
    flex.justifyContent = "center";
    flex.horizontalSizing = "fill";
    flex.verticalSizing = "fill";

addGridLayout

  • addGridLayout(): GridLayout

  • Adds a grid layout configuration to the board (so it's necessary to create a board first of all). You can add rows and columns, check addRow/addColumn.

    Returns GridLayout

    Returns the grid layout configuration added to the board.

    Example

    const board = penpot.createBoard();
    const grid = board.addGridLayout();

    // You can change the grid properties as follows.
    grid.alignItems = "center";
    grid.justifyItems = "start";
    grid.rowGap = 10;
    grid.columnGap = 10;
    grid.verticalPadding = 5;
    grid.horizontalPadding = 5

addRulerGuide

removeRulerGuide

  • removeRulerGuide(guide): void

  • Removes the guide from the current page.

    Parameters

    Returns void

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);

isComponentInstance

isComponentMainInstance

isComponentCopyInstance

isComponentNestedInstance

isComponentRoot

isComponentHead

componentRefShape

componentRoot

  • componentRoot(): null | Shape

  • Returns null | Shape

    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

  • Returns null | Shape

    Returns the head of the component tree structure for the current shape. If the current shape is already a head will return itself.

component

detach

  • detach(): void

  • If the current shape is a component it will remove the component information and leave the shape as a "basic shape"

    Returns void

resize

  • resize(width, height): void

  • Resizes the shape to the specified width and height.

    Parameters

    • width: number

      The new width of the shape.

    • height: number

      The new height of the shape.

    Returns void

    Example

    shape.resize(200, 100);

rotate

  • rotate(angle, center?): void

  • Rotates the shape in relation with the given center.

    Parameters

    • angle: number

      Angle in degrees to rotate.

    • Optionalcenter: null | {
          x: number;
          y: number;
      }

      Center of the transform rotation. If not send will use the geometri center of the shapes.

    Returns void

    Example

    shape.rotate(45);

export

  • export(config): Promise<Uint8Array>

  • Generates an export from the current shape.

    Parameters

    Returns Promise<Uint8Array>

    Example

    shape.export({ type: 'png', scale: 2 });

addInteraction

  • addInteraction(trigger, action, delay?): Interaction

  • Adds a new interaction to the shape.

    Parameters

    • trigger: Trigger

      defines the conditions under which the action will be triggered

    • action: Action

      defines what will be executed when the trigger happens

    • Optionaldelay: number

      for the type of trigger after-delay will specify the time after triggered. Ignored otherwise.

    Returns Interaction

    Example

    shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });

removeInteraction

  • removeInteraction(interaction): void

  • Removes the interaction from the shape.

    Parameters

    • interaction: Interaction

      is the interaction to remove from the shape

    Returns void

    Example

    shape.removeInteraction(interaction);

clone

remove

Settings

Member Visibility

On This Page

Properties
Methods