Interface VariantContainer

Represents a VariantContainer in Penpot This interface extends Board and includes properties and methods specific to VariantContainer.

interface VariantContainer {
    type: "board";
    clipContent: boolean;
    showInViewMode: boolean;
    grid?: GridLayout;
    flex?: FlexLayout;
    guides: Guide[];
    rulerGuides: RulerGuide[];
    horizontalSizing?: "auto" | "fix";
    verticalSizing?: "auto" | "fix";
    fills: Fill[];
    children: Shape[];
    appendChild(child: Shape): void;
    insertChild(index: number, child: Shape): void;
    addFlexLayout(): FlexLayout;
    addGridLayout(): GridLayout;
    addRulerGuide(orientation: RulerGuideOrientation, value: number): RulerGuide;
    removeRulerGuide(guide: RulerGuide): void;
    isVariantContainer(): boolean;
    variants: 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:
        | "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;
    setParentIndex(index: number): void;
    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<Uint8Array>;
    interactions: Interaction[];
    addInteraction(trigger: Trigger, action: Action, delay?: number): Interaction;
    removeInteraction(interaction: Interaction): void;
    clone(): Shape;
    remove(): void;
}

Hierarchy (view full)

Properties

type clipContent showInViewMode grid? flex? guides rulerGuides horizontalSizing? verticalSizing? fills children variants id name parent parentIndex 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 isVariantContainer getPluginData setPluginData getPluginDataKeys getSharedPluginData setSharedPluginData getSharedPluginDataKeys setParentIndex isComponentInstance isComponentMainInstance isComponentCopyInstance isComponentRoot isComponentHead componentRefShape componentRoot componentHead component detach swapComponent switchVariant combineAsVariants isVariantHead resize rotate bringToFront bringForward sendToBack sendBackward export addInteraction removeInteraction clone remove

Properties

Readonlytype

type

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

clipContent

clipContent: boolean

When true the board will clip the children inside

showInViewMode

showInViewMode: boolean

WHen true the board will be displayed in the view mode

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.

children

children: Shape[]

The children shapes contained within the board. When writing into this property, you can only reorder the shapes, not changing the structure. If the new shapes don't match the current shapes it will give a validation error.

Example

board.children = board.children.reverse();

Readonlyvariants

variants: null | Variants

Access to the Variant interface, for attributes and actions over the full Variant (not only this VariantContainer)

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

ReadonlyparentIndex

parentIndex: number

Returns the index of the current shape in the parent

x

x: number

The x-coordinate of the shape's position.

y

y: number

The y-coordinate of the shape's position.

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

isVariantContainer

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

setParentIndex

  • setParentIndex(index): void

  • Changes the index inside the parent of the current shape. This method will shift the indexes of the shapes around that position to match the index. If the index is greater than the number of elements it will positioned last.

    Parameters

    • index: number

      the new index for the shape to be in

    Returns void

isComponentInstance

isComponentMainInstance

isComponentCopyInstance

isComponentRoot

isComponentHead

  • isComponentHead(): boolean

  • Returns boolean

    Returns true when the current shape is the head of a components tree nested structure

componentRefShape

  • componentRefShape(): null | Shape

  • Returns null | Shape

    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

  • 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

swapComponent

switchVariant

  • switchVariant(pos, value): void

  • Switch a VariantComponent copy to the nearest one that has the specified property value

    Parameters

    • pos: number

      The position of the poroperty to update

    • value: string

      The new value of the property

    Returns void

combineAsVariants

  • combineAsVariants(ids): 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.

    Parameters

    • ids: string[]

      A list of ids of the main instances of the components to combine with this one.

    Returns void

isVariantHead

  • isVariantHead(): boolean

  • Returns boolean

    Returns true when the current shape is the head of a components tree nested structure, and that component is a VariantComponent

resize

  • resize(width, 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);

bringToFront

bringForward

  • bringForward(): void

  • Moves the current shape one position forward in its list of siblings

    Returns void

sendToBack

sendBackward

  • sendBackward(): void

  • Moves the current shape one position backwards in its list of siblings

    Returns void

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