Interface Text

Text represents a text element in the Penpot application, extending the base shape interface. It includes various properties to define the text content and its styling attributes.

interface Text {
    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;
    type: "text";
    characters: string;
    growType: "fixed" | "auto-width" | "auto-height";
    fontId: string;
    fontFamily: string;
    fontVariantId: string;
    fontSize: string;
    fontWeight: string;
    fontStyle:
        | null
        | "normal"
        | "italic"
        | "mixed";
    lineHeight: string;
    letterSpacing: string;
    textTransform:
        | null
        | "mixed"
        | "uppercase"
        | "capitalize"
        | "lowercase";
    textDecoration:
        | null
        | "mixed"
        | "underline"
        | "line-through";
    direction:
        | null
        | "mixed"
        | "ltr"
        | "rtl";
    align:
        | null
        | "center"
        | "left"
        | "right"
        | "mixed"
        | "justify";
    verticalAlign:
        | null
        | "center"
        | "top"
        | "bottom";
    getRange(start: number, end: number): TextRange;
    applyTypography(typography: LibraryTypography): 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 type characters growType fontId fontFamily fontVariantId fontSize fontWeight fontStyle lineHeight letterSpacing textTransform textDecoration direction align verticalAlign

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 getRange applyTypography

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.

Readonlytype

type

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

characters

characters: string

The characters contained within the text shape.

growType

growType: "fixed" | "auto-width" | "auto-height"

The grow type of the text shape, defining how the text box adjusts its size. Possible values are:

  • 'fixed': Fixed size.
  • 'auto-width': Adjusts width automatically.
  • 'auto-height': Adjusts height automatically.

fontId

fontId: string

The font ID used in the text shape, or 'mixed' if multiple fonts are used.

fontFamily

fontFamily: string

The font family used in the text shape, or 'mixed' if multiple font families are used.

fontVariantId

fontVariantId: string

The font variant ID used in the text shape, or 'mixed' if multiple font variants are used.

fontSize

fontSize: string

The font size used in the text shape, or 'mixed' if multiple font sizes are used.

fontWeight

fontWeight: string

The font weight used in the text shape, or 'mixed' if multiple font weights are used.

fontStyle

fontStyle:
    | null
    | "normal"
    | "italic"
    | "mixed"

The font style used in the text shape, or 'mixed' if multiple font styles are used.

lineHeight

lineHeight: string

The line height used in the text shape, or 'mixed' if multiple line heights are used.

letterSpacing

letterSpacing: string

The letter spacing used in the text shape, or 'mixed' if multiple letter spacings are used.

textTransform

textTransform:
    | null
    | "mixed"
    | "uppercase"
    | "capitalize"
    | "lowercase"

The text transform applied to the text shape, or 'mixed' if multiple text transforms are used.

textDecoration

textDecoration:
    | null
    | "mixed"
    | "underline"
    | "line-through"

The text decoration applied to the text shape, or 'mixed' if multiple text decorations are used.

direction

direction:
    | null
    | "mixed"
    | "ltr"
    | "rtl"

The text direction for the text shape, or 'mixed' if multiple directions are used.

align

align:
    | null
    | "center"
    | "left"
    | "right"
    | "mixed"
    | "justify"

The horizontal alignment of the text shape. It can be a specific alignment or 'mixed' if multiple alignments are used.

verticalAlign

verticalAlign:
    | null
    | "center"
    | "top"
    | "bottom"

The vertical alignment of the text shape. It can be a specific alignment or 'mixed' if multiple alignments are used.

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

isComponentMainInstance

isComponentCopyInstance

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

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

sendToBack

sendBackward

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

getRange

  • getRange(start, end): TextRange

  • Gets a text range within the text shape.

    Parameters

    • start: number

      The start index of the text range.

    • end: number

      The end index of the text range.

    Returns TextRange

    Returns a TextRange object representing the specified text range.

    Example

    const textRange = textShape.getRange(0, 10);
    console.log(textRange.characters);

applyTypography

  • applyTypography(typography): void

  • Applies a typography style to the text shape.

    Parameters

    Returns void

    Remarks

    This method sets various typography properties for the text shape according to the given typography style.

    Example

    textShape.applyTypography(typography);

Settings

Member Visibility

On This Page

Properties
Methods