LineShapeUtil • tldraw Docs

Table of contents

migrations
props
type
editor
options
Properties
Methods

Extends ShapeUtil<TLLineShape>.

class LineShapeUtil extends ShapeUtil<TLLineShape> {}

Constructor

from ShapeUtil

Constructs a new instance of the ShapeUtil class

Parameters

Name	Description
`editor`	`Editor`

Properties

migrations

static

static migrations: import('@tldraw/editor').TLPropsMigrations

props

static

static props: import('@tldraw/editor').RecordProps<TLLineShape>

type

static

static type: 'line'

editor

from ShapeUtil

editor: Editor

options

from ShapeUtil

Options for this shape util. If you're implementing a custom shape util, you can override this to provide customization options for your shape. If using an existing shape util, you can customizing this by calling ShapeUtil.configure.

options: {}

Methods

configure()

static

from ShapeUtil

Configure this shape utils options.

static configure<T extends TLShapeUtilConstructor<any, any>>(
  this: T,
  options: T extends new (...args: any[]) => {
    options: infer Options
  }
    ? Partial<Options>
    : never
): T

Parameters

Name	Description
`this`	`T`
`options`	`T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never`

Returns

canBeLaidOut()

from ShapeUtil

Whether the shape can participate in layout functions such as alignment or distribution.

canBeLaidOut(_shape: Shape, _info: TLShapeUtilCanBeLaidOutOpts): boolean

Parameters

Name	Description
`_shape`	`Shape`
`_info`	`TLShapeUtilCanBeLaidOutOpts`

Returns

boolean

canBind()

from ShapeUtil

Whether the shape can be bound to. See TLShapeUtilCanBindOpts for details.

canBind(_opts: TLShapeUtilCanBindOpts): boolean

Parameters

Name	Description
`_opts`	`TLShapeUtilCanBindOpts`

Returns

boolean

canCrop()

from ShapeUtil

Whether the shape can be cropped.

canCrop(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canDropShapes()

from ShapeUtil

Get whether the shape can receive children of a given type.

canDropShapes(_shape: Shape, _shapes: TLShape[]): boolean

Parameters

Name	Description
`_shape`	`Shape`
`_shapes`	`TLShape[]`

Returns

boolean

canEdit()

from ShapeUtil

Whether the shape can be double clicked to edit.

canEdit(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canEditInReadonly()

from ShapeUtil

Whether the shape can be edited in read-only mode.

canEditInReadonly(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canReceiveNewChildrenOfType()

from ShapeUtil

Get whether the shape can receive children of a given type.

canReceiveNewChildrenOfType(_shape: Shape, _type: TLShape['type']): boolean

Parameters

Name	Description
`_shape`	`Shape`
`_type`	`TLShape['type']`

Returns

boolean

canResize()

from ShapeUtil

Whether the shape can be resized.

canResize(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canScroll()

from ShapeUtil

Whether the shape can be scrolled while editing.

canScroll(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canSnap()

from ShapeUtil

Whether the shape can be snapped to by another shape.

canSnap(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canTabTo()

canTabTo(): boolean

component()

component(shape: TLLineShape): import('react/jsx-runtime').JSX.Element

Parameters

Name	Description
`shape`	`TLLineShape`

Returns

import('react/jsx-runtime').JSX.Element

getAriaDescriptor()

from ShapeUtil

getAriaDescriptor(_shape: Shape): string | undefined

Parameters

Name	Description
`_shape`	`Shape`

Returns

string | undefined

getBoundsSnapGeometry()

from ShapeUtil

Get the geometry to use when snapping to this this shape in translate/resize operations. See BoundsSnapGeometry for details.

getBoundsSnapGeometry(_shape: Shape): BoundsSnapGeometry

Parameters

Name	Description
`_shape`	`Shape`

Returns

BoundsSnapGeometry

getCanvasSvgDefs()

from ShapeUtil

Return elements to be added to the <defs> section of the canvases SVG context. This can be used to define SVG content (e.g. patterns & masks) that can be referred to by ID from svg elements returned by component.

Each def should have a unique key. If multiple defs from different shapes all have the same key, only one will be used.

getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]

getDefaultProps()

getDefaultProps(): TLLineShape['props']

getFontFaces()

from ShapeUtil

Get the font faces that should be rendered in the document in order for this shape to render correctly.

getFontFaces(shape: Shape): TLFontFace[]

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLFontFace[]

getGeometry()

getGeometry(shape: TLLineShape): CubicSpline2d | Polyline2d

Parameters

Name	Description
`shape`	`TLLineShape`

Returns

CubicSpline2d | Polyline2d

getHandles()

getHandles(shape: TLLineShape): TLHandle[]

Parameters

Name	Description
`shape`	`TLLineShape`

Returns

TLHandle[]

getHandleSnapGeometry()

getHandleSnapGeometry(shape: TLLineShape): HandleSnapGeometry

Parameters

Name	Description
`shape`	`TLLineShape`

Returns

HandleSnapGeometry

getInterpolatedProps()

getInterpolatedProps(
  startShape: TLLineShape,
  endShape: TLLineShape,
  t: number
): TLLineShape['props']

Parameters

Name	Description
`startShape`	`TLLineShape`
`endShape`	`TLLineShape`
`t`	`number`

Returns

TLLineShape['props']

getText()

from ShapeUtil

getText(_shape: Shape): string | undefined

Parameters

Name	Description
`_shape`	`Shape`

Returns

string | undefined

hideResizeHandles()

hideResizeHandles(): boolean

hideRotateHandle()

hideRotateHandle(): boolean

hideSelectionBoundsBg()

hideSelectionBoundsBg(): boolean

hideSelectionBoundsFg()

hideSelectionBoundsFg(): boolean

indicator()

indicator(shape: TLLineShape): import('react/jsx-runtime').JSX.Element

Parameters

Name	Description
`shape`	`TLLineShape`

Returns

import('react/jsx-runtime').JSX.Element

isAspectRatioLocked()

from ShapeUtil

Whether the shape's aspect ratio is locked.

isAspectRatioLocked(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

onBeforeCreate()

onBeforeCreate(next: TLLineShape): TLLineShape | void

Parameters

Name	Description
`next`	`TLLineShape`

Returns

TLLineShape | void

onBeforeUpdate()

optional

from ShapeUtil

A callback called just before a shape is updated. This method provides a last chance to modify the updated shape.

onBeforeUpdate?(prev: Shape, next: Shape): Shape | void

Example

onBeforeUpdate = (prev, next) => {
  if (prev.x === next.x) {
    return { ...next, x: next.x + 1 }
  }
}

Parameters

Name	Description
`prev`	`Shape` The previous shape.
`next`	`Shape` The next shape.

Returns

Shape | void

The next shape or void.

onChildrenChange()

optional

from ShapeUtil

A callback called when a shape's children change.

onChildrenChange?(shape: Shape): TLShapePartial[] | void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial[] | void

An array of shape updates, or void.

onClick()

optional

from ShapeUtil

A callback called when a shape is clicked.

onClick?(shape: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onCrop()

optional

from ShapeUtil

A callback called when a shape changes from a crop.

onCrop?(
  shape: Shape,
  info: TLCropInfo<Shape>
): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void

Parameters

Name	Description
`shape`	`Shape` The shape at the start of the crop.
`info`	`TLCropInfo<Shape>` Info about the crop.

Returns

Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void

A change to apply to the shape, or void.

onDoubleClick()

optional

from ShapeUtil

A callback called when a shape is double clicked.

onDoubleClick?(shape: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onDoubleClickCorner()

optional

from ShapeUtil

A callback called when a shape's corner is double clicked.

onDoubleClickCorner?(
  shape: Shape,
  info: TLClickEventInfo
): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.
`info`	`TLClickEventInfo` Info about the corner.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onDoubleClickEdge()

optional

from ShapeUtil

A callback called when a shape's edge is double clicked.

onDoubleClickEdge?(
  shape: Shape,
  info: TLClickEventInfo
): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.
`info`	`TLClickEventInfo` Info about the edge.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onDoubleClickHandle()

optional

from ShapeUtil

A callback called when a shape's handle is double clicked.

onDoubleClickHandle?(
  shape: Shape,
  handle: TLHandle
): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.
`handle`	`TLHandle` The handle that is double-clicked.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onDragShapesOut()

optional

from ShapeUtil

A callback called when some other shapes are dragged out of this one.

onDragShapesOut?(shape: Shape, shapes: TLShape[]): void

Parameters

Name	Description
`shape`	`Shape` The shape.
`shapes`	`TLShape[]` The shapes that are being dragged out.

Returns

void

onDragShapesOver()

optional

from ShapeUtil

A callback called when some other shapes are dragged over this one.

onDragShapesOver?(shape: Shape, shapes: TLShape[]): void

Example

onDragShapesOver = (shape, shapes) => {
  this.editor.reparentShapes(shapes, shape.id)
}

Parameters

Name	Description
`shape`	`Shape` The shape.
`shapes`	`TLShape[]` The shapes that are being dragged over this one.

Returns

void

onDropShapesOver()

optional

from ShapeUtil

A callback called when some other shapes are dropped over this one.

onDropShapesOver?(shape: Shape, shapes: TLShape[]): void

Parameters

Name	Description
`shape`	`Shape` The shape.
`shapes`	`TLShape[]` The shapes that are being dropped over this one.

Returns

void

onEditEnd()

optional

from ShapeUtil

A callback called when a shape finishes being edited.

onEditEnd?(shape: Shape): void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

void

onEditStart()

optional

from ShapeUtil

A callback called when a shape starts being edited.

onEditStart?(shape: Shape): void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

void

onHandleDrag()

onHandleDrag(
  shape: TLLineShape,
  { handle }: TLHandleDragInfo<TLLineShape>
):
  | {
      id: import('@tldraw/editor').TLShapeId
      index: import('@tldraw/editor').IndexKey
      isLocked: boolean
      meta: import('@tldraw/editor').JsonObject
      opacity: number
      parentId: import('@tldraw/editor').TLParentId
      props: {
        color:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        dash: 'dashed' | 'dotted' | 'draw' | 'solid'
        points: {
          [x: string]:
            | {
                id: string
                index: import('@tldraw/editor').IndexKey
                x: number
                y: number
              }
            | TLLineShapePoint
        }
        scale: number
        size: 'l' | 'm' | 's' | 'xl'
        spline: 'cubic' | 'line'
      }
      rotation: number
      type: 'line'
      typeName: 'shape'
      x: number
      y: number
    }
  | undefined

Parameters

Name	Description
`shape`	`TLLineShape`
`{ handle }`	`TLHandleDragInfo<TLLineShape>`

Returns

  | {
      id: import('@tldraw/editor').TLShapeId
      index: import('@tldraw/editor').IndexKey
      isLocked: boolean
      meta: import('@tldraw/editor').JsonObject
      opacity: number
      parentId: import('@tldraw/editor').TLParentId
      props: {
        color:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        dash: 'dashed' | 'dotted' | 'draw' | 'solid'
        points: {
          [x: string]:
            | {
                id: string
                index: import('@tldraw/editor').IndexKey
                x: number
                y: number
              }
            | TLLineShapePoint
        }
        scale: number
        size: 'l' | 'm' | 's' | 'xl'
        spline: 'cubic' | 'line'
      }
      rotation: number
      type: 'line'
      typeName: 'shape'
      x: number
      y: number
    }
  | undefined

onResize()

onResize(
  shape: TLLineShape,
  info: TLResizeInfo<TLLineShape>
): {
  props: {
    points: {
      [x: string]: {
        id: string
        index: import('@tldraw/editor').IndexKey
        x: number
        y: number
      }
    }
  }
}

Parameters

Name	Description
`shape`	`TLLineShape`
`info`	`TLResizeInfo<TLLineShape>`

Returns

{
  props: {
    points: {
      [x: string]: {
        id: string
        index: import('@tldraw/editor').IndexKey
        x: number
        y: number
      }
    }
  }
}

onResizeEnd()

optional

from ShapeUtil

A callback called when a shape finishes resizing.

onResizeEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`initial`	`Shape` The shape at the start of the resize.
`current`	`Shape` The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onResizeStart()

optional

from ShapeUtil

A callback called when a shape starts being resized.

onResizeStart?(shape: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onRotate()

optional

from ShapeUtil

A callback called when a shape changes from a rotation.

onRotate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`initial`	`Shape` The shape at the start of the rotation.
`current`	`Shape` The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onRotateEnd()

optional

from ShapeUtil

A callback called when a shape finishes rotating.

onRotateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`initial`	`Shape` The shape at the start of the rotation.
`current`	`Shape` The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onRotateStart()

optional

from ShapeUtil

A callback called when a shape starts being rotated.

onRotateStart?(shape: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onTranslate()

optional

from ShapeUtil

A callback called when a shape changes from a translation.

onTranslate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`initial`	`Shape` The shape at the start of the translation.
`current`	`Shape` The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onTranslateEnd()

optional

from ShapeUtil

A callback called when a shape finishes translating.

onTranslateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`initial`	`Shape` The shape at the start of the translation.
`current`	`Shape` The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onTranslateStart()

optional

from ShapeUtil

A callback called when a shape starts being translated.

onTranslateStart?(shape: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

toBackgroundSvg()

optional

from ShapeUtil

Get the shape's background layer as an SVG object.

toBackgroundSvg?(
  shape: Shape,
  ctx: SvgExportContext
): null | Promise<null | ReactElement> | ReactElement

Parameters

Name	Description
`shape`	`Shape` The shape.
`ctx`	`SvgExportContext` ctx - The export context for the SVG - used for adding e.g. <def>s

Returns

null | Promise<null | ReactElement> | ReactElement

An SVG element.

toSvg()

toSvg(shape: TLLineShape): import('react/jsx-runtime').JSX.Element

Parameters

Name	Description
`shape`	`TLLineShape`

Returns

import('react/jsx-runtime').JSX.Element