sdk.shapeapi

ShapeAPI interface

Shape API for creating and managing basic geometric shapes in the design canvas.

This API provides functionality to create and update basic shapes including rectangles, circles (ellipses), stars, and triangles (polygons). All shapes support standard design properties like position, size, rotation, opacity, fill colors, and borders.

**Supported Shape Types:** - rectangle: Standard rectangular shapes with optional corner radius - ellipse: Circular and elliptical shapes - star: Multi-pointed star shapes - polygon: Triangle and other polygon shapes

**Key Features:** - Developer-friendly input mapping (simplified position/size vs internal coordinates) - Automatic scaling based on default shape dimensions - Support for absolute and relative positioning - Configurable visual properties (opacity, rotation, skew, shadows) - Border and fill customization

Signature:

export interface ShapeAPI 

Example

// Create a red rectangle
const rectangle = shapeApi.createShape({
  shapeType: 'rectangle',
  position: { absolute: { left: 100, top: 50 } },
  size: { width: 200, height: 150, applyViewportScale: false },
  fillColor: '#ff0000',
  border: { strokeWidth: 2, stroke: '#000000' }
});

// Update the rectangle's opacity and rotation
shapeApi.updateShape({
  id: rectangle.id,
  opacity: 0.8,
  angle: 45
});

Methods

Method	Description
createShape(input, opts)	Creates a new basic shape object in the design canvas. This method creates a geometric shape with the specified type, position, and visual properties. The shape is automatically added to the design state and can be positioned either absolutely or relative to other elements. Size calculations are handled automatically based on the shape's default dimensions and any scaling requirements. Shape Types and Default Sizes: - Rectangle: 433.8 × 433.8 pixels - Circle (ellipse): 446.36 × 446.36 pixels - Star: 100 × 95.11 pixels - Triangle (polygon): 100 × 86.60 pixels Position Options: - Absolute: Exact pixel coordinates from canvas origin - Relative: Positioned relative to existing artboards with automatic spacing Visual Properties: - Fill color with support for gradients and patterns - Border styling (stroke width, color, dash patterns) - Transformation properties (rotation, skew, opacity) - Shadow effects
updateShape(input, opts)	Updates an existing basic shape object with new properties. This method modifies the properties of an existing shape while preserving its identity and type. You can update visual properties, position, size, and styling without recreating the entire shape. The shape type itself cannot be changed - use delete and create operations for type changes. Updatable Properties: - Position (absolute coordinates or relative positioning) - Size (with automatic scale recalculation) - Visual styling (opacity, rotation, skew, flips) - Fill color and patterns - Border properties (stroke width, color, style) - Shadow effects - Custom naming Position Updates: - Absolute positioning moves the shape to exact pixel coordinates - Relative positioning can reposition relative to other elements - Position changes respect artboard boundaries and constraints Size Updates: - Size changes automatically recalculate scale factors based on shape's default dimensions - Maintains aspect ratio unless both width and height are explicitly provided - Viewport scaling applies when `applyViewportScale` is enabled

Method

Description

createShape(input, opts)

Creates a new basic shape object in the design canvas.

This method creates a geometric shape with the specified type, position, and visual properties. The shape is automatically added to the design state and can be positioned either absolutely or relative to other elements. Size calculations are handled automatically based on the shape's default dimensions and any scaling requirements.

**Shape Types and Default Sizes:** - Rectangle: 433.8 × 433.8 pixels - Circle (ellipse): 446.36 × 446.36 pixels - Star: 100 × 95.11 pixels - Triangle (polygon): 100 × 86.60 pixels

**Position Options:** - Absolute: Exact pixel coordinates from canvas origin - Relative: Positioned relative to existing artboards with automatic spacing

**Visual Properties:** - Fill color with support for gradients and patterns - Border styling (stroke width, color, dash patterns) - Transformation properties (rotation, skew, opacity) - Shadow effects

updateShape(input, opts)

Updates an existing basic shape object with new properties.

This method modifies the properties of an existing shape while preserving its identity and type. You can update visual properties, position, size, and styling without recreating the entire shape. The shape type itself cannot be changed - use delete and create operations for type changes.

**Updatable Properties:** - Position (absolute coordinates or relative positioning) - Size (with automatic scale recalculation) - Visual styling (opacity, rotation, skew, flips) - Fill color and patterns - Border properties (stroke width, color, style) - Shadow effects - Custom naming

**Position Updates:** - Absolute positioning moves the shape to exact pixel coordinates - Relative positioning can reposition relative to other elements - Position changes respect artboard boundaries and constraints

**Size Updates:** - Size changes automatically recalculate scale factors based on shape's default dimensions - Maintains aspect ratio unless both width and height are explicitly provided - Viewport scaling applies when applyViewportScale is enabled

ShapeAPI interface​

Example​

Methods​

ShapeAPI interface

Example

Methods