Interface Group

Represents a group of shapes in Penpot. This interface extends ShapeBase and includes properties and methods specific to groups.

interface Group {
    type: "group";
    children: Shape[];
    appendChild(child: Shape): void;
    insertChild(index: number, child: Shape): void;
    isMask(): boolean;
    makeMask(): void;
    removeMask(): 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;
    fills: Fill[] | "mixed";
    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 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 fills strokes layoutChild? layoutCell? interactions

Methods

appendChild insertChild isMask makeMask removeMask 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: "group"

The type of the shape, which is always 'group' for groups.

Readonlychildren

children: Shape[]

The children shapes contained within the group.

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.

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

appendChild

  • appendChild(child): void

  • Appends a child shape to the group.

    Parameters

    • child: Shape

      The child shape to append.

    Returns void

    Example

    group.appendChild(childShape);

insertChild

  • insertChild(index, child): void

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

    Parameters

    • index: number

      The index at which to insert the child shape.

    • child: Shape

      The child shape to insert.

    Returns void

    Example

    group.insertChild(0, childShape);

isMask

  • isMask(): boolean

  • Checks if the group is currently a mask. A mask defines a clipping path for its child shapes.

    Returns boolean

makeMask

  • makeMask(): void

  • Converts the group into a mask.

    Returns void

removeMask

  • removeMask(): void

  • Removes the mask from the group.

    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