Interface Rectangle

Represents a rectangle shape in Penpot. 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;
    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: "rectangle"

The type of the shape, which is always 'rect' for rectangle shapes.

fills: Fill[]

The fills applied to the shape.

id: string

The unique identifier of the shape.

name: string

The name of the shape.

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: number

The x-coordinate of the shape's position.

y: number

The y-coordinate of the shape's position.

width: number

The width of the shape.

height: number

The height of the shape.

bounds: Bounds

Returns the bounding box surrounding the current shape

center: Point

Returns the geometric center of the shape

blocked: boolean

Indicates whether the shape is blocked.

hidden: boolean

Indicates whether the shape is hidden.

visible: boolean

Indicates whether the shape is visible.

proportionLock: boolean

Indicates whether the shape has proportion lock enabled.

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

The horizontal constraints applied to the shape.

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

The vertical constraints applied to the shape.

borderRadius: number

The border radius of the shape.

borderRadiusTopLeft: number

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

borderRadiusTopRight: number

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

borderRadiusBottomRight: number

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

borderRadiusBottomLeft: number

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

opacity: number

The opacity of the shape.

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: Shadow[]

The shadows applied to the shape.

blur?: Blur

The blur effect applied to the shape.

exports: Export[]

The export settings of the shape.

boardX: number

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

boardY: number

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

parentX: number

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

parentY: number

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

flipX: boolean

Indicates whether the shape is flipped horizontally.

flipY: boolean

Indicates whether the shape is flipped vertically.

rotation: number

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

strokes: Stroke[]

The strokes applied to the shape.

layoutChild?: LayoutChildProperties

Layout properties for children of the shape.

Layout properties for cells in a grid layout.

interactions: Interaction[]

The interactions for the current shape.

Methods

  • 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.

    const data = shape.getPluginData('exampleKey');
    console.log(data);
  • 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

    shape.setPluginData('exampleKey', 'exampleValue');
    
  • Retrieves all the keys for the plugin-specific data.

    Returns string[]

    Returns an array of strings representing all the keys.

    const keys = shape.getPluginDataKeys();
    console.log(keys);
  • 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.

    const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');
    console.log(sharedData);
  • 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

    shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');
    
  • 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.

    const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');
    console.log(sharedKeys);
  • 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.

  • 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.

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

    Returns 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

    shape.resize(200, 100);
    
  • 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

    shape.rotate(45);
    
  • Generates an export from the current shape.

    Parameters

    Returns Promise<Uint8Array>

    shape.export({ type: 'png', scale: 2 });
    
  • 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

    shape.addInteraction('click', { type: 'navigate-to', destination: anotherBoard });
    
  • Removes the interaction from the shape.

    Parameters

    • interaction: Interaction

      is the interaction to remove from the shape

    Returns void

    shape.removeInteraction(interaction);