TLBaseShape • tldraw Docs

Table of contents

id
index
isLocked
meta
opacity
parentId
props
rotation
type
typeName
x
y
Properties

Base interface for all shapes in tldraw.

This interface defines the common properties that all shapes share, regardless of their specific type. Every default shape extends this base with additional type-specific properties.

Custom shapes should be defined by augmenting the TLGlobalShapePropsMap type and getting the shape type from the TLShape type.

interface TLBaseShape<Type extends string, Props extends object> {}

Example

// Define a default shape type
interface TLArrowShape extends TLBaseShape<
  "arrow",
  {
    kind: TLArrowShapeKind;
    labelColor: TLDefaultColorStyle;
    color: TLDefaultColorStyle;
    fill: TLDefaultFillStyle;
    dash: TLDefaultDashStyle;
    size: TLDefaultSizeStyle;
    arrowheadStart: TLArrowShapeArrowheadStyle;
    arrowheadEnd: TLArrowShapeArrowheadStyle;
    font: TLDefaultFontStyle;
    start: VecModel;
    end: VecModel;
    bend: number;
    richText: TLRichText;
    labelPosition: number;
    scale: number;
    elbowMidPoint: number;
  }
> {}

// Create a shape instance
const arrowShape: TLArrowShape = {
  id: "shape:abc123",
  typeName: "shape",
  type: "arrow",
  x: 100,
  y: 200,
  rotation: 0,
  index: "a1",
  parentId: "page:main",
  isLocked: false,
  opacity: 1,
  props: {
    kind: "arc",
    start: { x: 0, y: 0 },
    end: { x: 100, y: 100 },
    // ... other props
  },
  meta: {},
};

Properties

id

readonly

readonly id: TLShapeId;

index

index: IndexKey;

isLocked

isLocked: boolean;

opacity

opacity: TLOpacityType;

parentId

parentId: TLParentId;

props

props: Props;

rotation

rotation: number;

type

type: Type;

typeName

readonly

readonly typeName: "shape";

x

x: number;

y

y: number;