NoteShapeUtil

See source code
Table of contents

Extends ShapeUtil<TLNoteShape>.

class NoteShapeUtil extends ShapeUtil<TLNoteShape> {}

Constructor

Constructs a new instance of the ShapeUtil class

Parameters

NameDescription

editor


Properties

migrations

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

props

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

type

static
static type: 'note'

editor

editor: Editor

Methods

canBeLaidOut()

Whether the shape participates in stacking, aligning, and distributing.

canBeLaidOut(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

canBind()

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

canBind(_opts: TLShapeUtilCanBindOpts<Shape>): boolean

Parameters

NameDescription

_opts

Returns

boolean

canCrop()

Whether the shape can be cropped.

canCrop(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

canDropShapes()

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

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

Parameters

NameDescription

_shape

Shape

_shapes

Returns

boolean

canEdit()

canEdit(): boolean

canEditInReadOnly()

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

canEditInReadOnly(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

canReceiveNewChildrenOfType()

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

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

Parameters

NameDescription

_shape

Shape

_type

TLShape['type']

Returns

boolean

canResize()

Whether the shape can be resized.

canResize(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

canScroll()

Whether the shape can be scrolled while editing.

canScroll(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

canSnap()

Whether the shape can be snapped to by another shape.

canSnap(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

component()

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

Parameters

NameDescription

shape

Returns

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

getBoundsSnapGeometry()

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

getBoundsSnapGeometry(_shape: Shape): BoundsSnapGeometry

Parameters

NameDescription

_shape

Shape

Returns


getCanvasSvgDefs()

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(): TLNoteShape['props']

getGeometry()

getGeometry(shape: TLNoteShape): Group2d

Parameters

NameDescription

shape

Returns


getHandles()

getHandles(shape: TLNoteShape): TLHandle[]

Parameters

NameDescription

shape

Returns


getHandleSnapGeometry()

Get the geometry to use when snapping handles to this shape. See HandleSnapGeometry for details.

getHandleSnapGeometry(_shape: Shape): HandleSnapGeometry

Parameters

NameDescription

_shape

Shape

Returns


getInterpolatedProps()

getInterpolatedProps(
  startShape: TLNoteShape,
  endShape: TLNoteShape,
  t: number
): TLNoteShapeProps

Parameters

NameDescription

startShape

endShape

t

number

Returns


getText()

getText(shape: TLNoteShape): string

Parameters

NameDescription

shape

Returns

string

hideResizeHandles()

hideResizeHandles(): boolean

hideRotateHandle()

Whether the shape should hide its rotation handles when selected.

hideRotateHandle(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

hideSelectionBoundsBg()

Whether the shape should hide its selection bounds background when selected.

hideSelectionBoundsBg(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

hideSelectionBoundsFg()

hideSelectionBoundsFg(): boolean

indicator()

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

Parameters

NameDescription

shape

Returns

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

isAspectRatioLocked()

Whether the shape's aspect ratio is locked.

isAspectRatioLocked(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

onBeforeCreate()

onBeforeCreate(next: TLNoteShape):
  | {
      id: TLShapeId
      index: IndexKey
      isLocked: boolean
      meta: import('@tldraw/editor').JsonObject
      opacity: number
      parentId: import('@tldraw/editor').TLParentId
      props: {
        align:
          | 'end-legacy'
          | 'end'
          | 'middle-legacy'
          | 'middle'
          | 'start-legacy'
          | 'start'
        color:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        font: 'draw' | 'mono' | 'sans' | 'serif'
        fontSizeAdjustment: number
        growY: number
        labelColor:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        richText: {
          content: unknown[]
          type: string
        }
        scale: number
        size: 'l' | 'm' | 's' | 'xl'
        url: string
        verticalAlign: 'end' | 'middle' | 'start'
      }
      rotation: number
      type: 'note'
      typeName: 'shape'
      x: number
      y: number
    }
  | undefined

Parameters

NameDescription

next

Returns

  | {
      id: TLShapeId
      index: IndexKey
      isLocked: boolean
      meta: import('@tldraw/editor').JsonObject
      opacity: number
      parentId: import('@tldraw/editor').TLParentId
      props: {
        align:
          | 'end-legacy'
          | 'end'
          | 'middle-legacy'
          | 'middle'
          | 'start-legacy'
          | 'start'
        color:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        font: 'draw' | 'mono' | 'sans' | 'serif'
        fontSizeAdjustment: number
        growY: number
        labelColor:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        richText: {
          content: unknown[]
          type: string
        }
        scale: number
        size: 'l' | 'm' | 's' | 'xl'
        url: string
        verticalAlign: 'end' | 'middle' | 'start'
      }
      rotation: number
      type: 'note'
      typeName: 'shape'
      x: number
      y: number
    }
  | undefined

onBeforeUpdate()

onBeforeUpdate(
  prev: TLNoteShape,
  next: TLNoteShape
):
  | {
      id: TLShapeId
      index: IndexKey
      isLocked: boolean
      meta: import('@tldraw/editor').JsonObject
      opacity: number
      parentId: import('@tldraw/editor').TLParentId
      props: {
        align:
          | 'end-legacy'
          | 'end'
          | 'middle-legacy'
          | 'middle'
          | 'start-legacy'
          | 'start'
        color:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        font: 'draw' | 'mono' | 'sans' | 'serif'
        fontSizeAdjustment: number
        growY: number
        labelColor:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        richText: {
          content: unknown[]
          type: string
        }
        scale: number
        size: 'l' | 'm' | 's' | 'xl'
        url: string
        verticalAlign: 'end' | 'middle' | 'start'
      }
      rotation: number
      type: 'note'
      typeName: 'shape'
      x: number
      y: number
    }
  | undefined

Parameters

NameDescription

prev

next

Returns

  | {
      id: TLShapeId
      index: IndexKey
      isLocked: boolean
      meta: import('@tldraw/editor').JsonObject
      opacity: number
      parentId: import('@tldraw/editor').TLParentId
      props: {
        align:
          | 'end-legacy'
          | 'end'
          | 'middle-legacy'
          | 'middle'
          | 'start-legacy'
          | 'start'
        color:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        font: 'draw' | 'mono' | 'sans' | 'serif'
        fontSizeAdjustment: number
        growY: number
        labelColor:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        richText: {
          content: unknown[]
          type: string
        }
        scale: number
        size: 'l' | 'm' | 's' | 'xl'
        url: string
        verticalAlign: 'end' | 'middle' | 'start'
      }
      rotation: number
      type: 'note'
      typeName: 'shape'
      x: number
      y: number
    }
  | undefined

onChildrenChange()

optional

A callback called when a shape's children change.

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

Parameters

NameDescription

shape

Shape

The shape.

Returns

An array of shape updates, or void.


onClick()

optional

A callback called when a shape is clicked.

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

Parameters

NameDescription

shape

Shape

The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onDoubleClick()

optional

A callback called when a shape is double clicked.

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

Parameters

NameDescription

shape

Shape

The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onDoubleClickEdge()

optional

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

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

Parameters

NameDescription

shape

Shape

The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onDoubleClickHandle()

optional

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

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

Parameters

NameDescription

shape

Shape

The shape.

handle

The handle that is double-clicked.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onDragShapesOut()

optional

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

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

Parameters

NameDescription

shape

Shape

The shape.

shapes

The shapes that are being dragged out.

Returns

void

onDragShapesOver()

optional

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

NameDescription

shape

Shape

The shape.

shapes

The shapes that are being dragged over this one.

Returns

void

onDropShapesOver()

optional

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

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

Parameters

NameDescription

shape

Shape

The shape.

shapes

The shapes that are being dropped over this one.

Returns

void

onEditEnd()

optional

A callback called when a shape finishes being editing.

onEditEnd?(shape: Shape): void

Parameters

NameDescription

shape

Shape

The shape.

Returns

void

onHandleDrag()

optional

A callback called when a shape's handle changes.

onHandleDrag?(
  shape: Shape,
  info: TLHandleDragInfo<Shape>
): TLShapePartial<Shape> | void

Parameters

NameDescription

shape

Shape

The current shape.

info

An object containing the handle and whether the handle is 'precise' or not.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onResize()

optional

A callback called when a shape changes from a resize.

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

Parameters

NameDescription

shape

Shape

The shape at the start of the resize.

info

Info about the resize.

Returns

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

A change to apply to the shape, or void.


onResizeEnd()

optional

A callback called when a shape finishes resizing.

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

Parameters

NameDescription

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

A callback called when a shape starts being resized.

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

Parameters

NameDescription

shape

Shape

The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onRotate()

optional

A callback called when a shape changes from a rotation.

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

Parameters

NameDescription

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

A callback called when a shape finishes rotating.

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

Parameters

NameDescription

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

A callback called when a shape starts being rotated.

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

Parameters

NameDescription

shape

Shape

The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onTranslate()

optional

A callback called when a shape changes from a translation.

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

Parameters

NameDescription

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

A callback called when a shape finishes translating.

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

Parameters

NameDescription

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

A callback called when a shape starts being translated.

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

Parameters

NameDescription

shape

Shape

The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


toBackgroundSvg()

optional

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

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

Parameters

NameDescription

shape

Shape

The shape.

ctx

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: TLNoteShape,
  ctx: SvgExportContext
): import('react/jsx-runtime').JSX.Element

Parameters

NameDescription

shape

ctx

Returns

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

Prev
NoteShapeTool
Next
SelectTool