Penpot plugins API
    Preparing search index...

    Interface Path

    Represents a path shape in Penpot. This interface extends ShapeBase and includes properties and methods specific to paths.

    interface Path {
        type: "path";
        toD(): string;
        content: string;
        d: string;
        commands: PathCommand[];
        fills: Fill[];
        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: Shape | null;
        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;
        tokens: {
            width: string;
            height: string;
            fill: string;
            x: string;
            y: string;
            all: string;
            r1: string;
            r2: string;
            r3: string;
            r4: string;
            shadow: string;
            strokeColor: string;
            strokeWidth: string;
            fontFamilies: string;
            fontSize: string;
            fontWeight: string;
            letterSpacing: string;
            rotation: string;
            opacity: string;
            layoutItemMinW: string;
            layoutItemMaxW: string;
            layoutItemMinH: string;
            layoutItemMaxH: string;
            rowGap: string;
            columnGap: string;
            p1: string;
            p2: string;
            p3: string;
            p4: string;
            m1: string;
            m2: string;
            m3: string;
            m4: string;
            textCase: string;
            textDecoration: string;
            typography: string;
        };
        isComponentInstance(): boolean;
        isComponentMainInstance(): boolean;
        isComponentCopyInstance(): boolean;
        isComponentRoot(): boolean;
        isComponentHead(): boolean;
        componentRefShape(): Shape | null;
        componentRoot(): Shape | null;
        componentHead(): Shape | null;
        component(): LibraryComponent | null;
        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?: { x: number; y: number } | null): void;
        bringToFront(): void;
        bringForward(): void;
        sendToBack(): void;
        sendBackward(): void;
        export(config: Export): Promise<Uint8Array<ArrayBufferLike>>;
        interactions: Interaction[];
        addInteraction(
            trigger: Trigger,
            action: Action,
            delay?: number,
        ): Interaction;
        removeInteraction(interaction: Interaction): void;
        applyToken(token: Token, properties: TokenProperty[] | undefined): void;
        clone(): Shape;
        remove(): void;
    }

    Hierarchy (View Summary)

    Index

    Properties

    type content d commands fills 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? tokens interactions

    Methods

    toD 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 applyToken clone remove

    Properties

    type: "path"

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

    content

    content: string

    The content of the boolean shape, defined as the path string.

    Use either d or commands.

    d: string

    The content of the boolean shape, defined as the path string.

    commands: PathCommand[]

    The content of the boolean shape, defined as an array of path commands.

    fills: Fill[]

    The fills applied to the shape.

    id: string

    The unique identifier of the shape.

    name: string

    The name of the shape.

    parent: Shape | null

    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

    parentIndex: number

    Returns the index of the current shape in the parent

    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.

    layoutCell?: LayoutChildProperties

    Layout properties for cells in a grid layout.

    tokens: {
        width: string;
        height: string;
        fill: string;
        x: string;
        y: string;
        all: string;
        r1: string;
        r2: string;
        r3: string;
        r4: string;
        shadow: string;
        strokeColor: string;
        strokeWidth: string;
        fontFamilies: string;
        fontSize: string;
        fontWeight: string;
        letterSpacing: string;
        rotation: string;
        opacity: string;
        layoutItemMinW: string;
        layoutItemMaxW: string;
        layoutItemMinH: string;
        layoutItemMaxH: string;
        rowGap: string;
        columnGap: string;
        p1: string;
        p2: string;
        p3: string;
        p4: string;
        m1: string;
        m2: string;
        m3: string;
        m4: string;
        textCase: string;
        textDecoration: string;
        typography: string;
    }

    The design tokens applied to this shape. It's a map property name -> token name.

    NOTE that the tokens application is by name and not by id. If there exist several tokens with the same name in different sets, the actual token applied and the value set to the attributes will depend on which sets are active (and will change if different sets or themes are activated later).

    interactions: Interaction[]

    The interactions for the current shape.

    Methods

    • Converts the path shape to its path data representation.

      Returns string

      Returns the path data (d attribute) as a string.

      Use the d attribute

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

    • 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

    • Returns Shape | null

      Returns the root of the component tree structure for the current shape. If the current shape is already a root will return itself.

    • Returns Shape | null

      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

    • 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

    • 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

    • Returns boolean

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

    • 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: { x: number; y: number } | null

        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<ArrayBufferLike>>

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

    • Applies one design token to one or more properties of the shape.

      Parameters

      • token: Token

        is the Token to apply

      • properties: TokenProperty[] | undefined

        an optional list of property names. If omitted, the default properties will be applied.

        NOTE that the tokens application is by name and not by id. If there exist several tokens with the same name in different sets, the actual token applied and the value set to the attributes will depend on which sets are active (and will change if different sets or themes are activated later).

      Returns void

    Settings

    Member Visibility

    On This Page

    Properties
    Methods