sdk.createelementwithpositionandsize

Home > @kittl/sdk > CreateElementWithPositionAndSize

CreateElementWithPositionAndSize type

Configuration for creating elements (images, artboards) with position and size specifications.

**Positioning System:** - **Absolute**: Exact pixel coordinates from canvas origin - **Relative**: Positioned relative to existing artboards with automatic spacing - **Centered**: Automatically centered within current viewport

**Artboard Targeting:** - If artboard is specified, element is placed within that artboard - If not specified, the system automatically determines the best artboard based on position - May create a new floating artboard if no suitable artboard exists

**Viewport Scaling:** - When applyViewportScale is true, element size is adjusted based on current zoom level - Useful for maintaining visual consistency across different zoom levels - Formula: actualScale = (elementSize / originalSize) / zoomLevel

Signature:

export type CreateElementWithPositionAndSize = {
    boardId?: string;
    position: AbsolutePosition | RelativePosition;
    size?: Dimensions & {
        applyViewportScale?: boolean;
    };
};

References: AbsolutePosition, RelativePosition, Dimensions

Example

// Absolute positioning
{
  position: { left: 100, top: 50 },
  size: { width: 200, height: 150, applyViewportScale: true },
  artboard: 'board-123'
}

// Relative positioning
{
  position: { relative: { below: 'existing-board-id' } },
  size: { width: 300, height: 200, applyViewportScale: false }
}

// Centered positioning
{
  position: { relative: { centerScreen: true } },
  size: { width: 400, height: 300, applyViewportScale: true }
}