Interface ShapeBase

Represents the base properties and methods of a shape in Penpot. This interface provides common properties and methods shared by all shapes.

interface ShapeBase {
    getPluginData(key: string): string;
    setPluginData(key: string, value: string): void;
    getPluginDataKeys(): string[];
    getSharedPluginData(namespace: string, key: string): string;
    setSharedPluginData(namespace: string, key: string, value: string): void;
    getSharedPluginDataKeys(namespace: string): string[];
    id: string;
    name: string;
    parent: 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;
    fills: Fill[] | "mixed";
    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

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 fills strokes layoutChild? layoutCell? interactions

Methods

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

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.

fills

fills: Fill[] | "mixed"

The fills applied to the shape.

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

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

  • isComponentInstance(): boolean

  • Returns boolean

    Returns true if the current shape is inside a component instance

isComponentMainInstance

  • isComponentMainInstance(): boolean

  • Returns boolean

    Returns true if the current shape is inside a component main instance

isComponentCopyInstance

  • isComponentCopyInstance(): boolean

  • Returns boolean

    Returns true if the current shape is inside a component copy instance

isComponentRoot

  • isComponentRoot(): boolean

  • Returns boolean

    Returns true when the current shape is the root of a component tree

isComponentHead

  • isComponentHead(): boolean

  • Returns boolean

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

componentRefShape

  • componentRefShape(): 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

  • bringToFront(): void

  • Moves the current shape to the front of its siblings

    Returns void

bringForward

  • bringForward(): void

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

    Returns void

sendToBack

  • sendToBack(): void

  • Moves the current shape to the back of its siblings

    Returns void

sendBackward

  • sendBackward(): void

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

    Returns void

export

  • export(config): 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

  • clone(): Shape

  • Creates a clone of the shape.

    Returns Shape

    Returns a new instance of the shape with identical properties.

remove

  • remove(): void

  • Removes the shape from its parent.

    Returns void

Settings

Member Visibility

On This Page

Properties
Methods