Table of contents

Public class

Signature
class NoteShapeUtil extends ShapeUtil<TLNoteShape> {}
References

ShapeUtil, TLNoteShape

Source

packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx


Properties

canEdit

Public property

Signature
canEdit: () => boolean

hideResizeHandles

Public property

Signature
hideResizeHandles: () => boolean

hideSelectionBoundsFg

Public property

Signature
hideSelectionBoundsFg: () => boolean

migrations

Public static property

Signature
static migrations: import('@tldraw/editor').TLShapePropsMigrations
References

TLShapePropsMigrations


onBeforeCreate

Public property

Signature
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
        size: 'l' | 'm' | 's' | 'xl'
        text: string
        url: string
        verticalAlign: 'end' | 'middle' | 'start'
      }
      rotation: number
      type: 'note'
      typeName: 'shape'
      x: number
      y: number
    }
  | undefined
References

TLNoteShape, TLShapeId, TLParentId


onBeforeUpdate

Public property

Signature
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
        size: 'l' | 'm' | 's' | 'xl'
        text: string
        url: string
        verticalAlign: 'end' | 'middle' | 'start'
      }
      rotation: number
      type: 'note'
      typeName: 'shape'
      x: number
      y: number
    }
  | undefined
References

TLNoteShape, TLShapeId, TLParentId


onEditEnd

Public property

Signature
onEditEnd: TLOnEditEndHandler<TLNoteShape>
References

TLOnEditEndHandler, TLNoteShape


props

Public static property

Signature
static props: {
  align: import('@tldraw/editor').EnumStyleProp<
    | 'end-legacy'
    | 'end'
    | 'middle-legacy'
    | 'middle'
    | 'start-legacy'
    | 'start'
  >
  color: import('@tldraw/editor').EnumStyleProp<
    | 'black'
    | 'blue'
    | 'green'
    | 'grey'
    | 'light-blue'
    | 'light-green'
    | 'light-red'
    | 'light-violet'
    | 'orange'
    | 'red'
    | 'violet'
    | 'white'
    | 'yellow'
  >
  font: import('@tldraw/editor').EnumStyleProp<
    'draw' | 'mono' | 'sans' | 'serif'
  >
  fontSizeAdjustment: import('@tldraw/editor').Validator<number>
  growY: import('@tldraw/editor').Validator<number>
  size: import('@tldraw/editor').EnumStyleProp<'l' | 'm' | 's' | 'xl'>
  text: import('@tldraw/editor').Validator<string>
  url: import('@tldraw/editor').Validator<string>
  verticalAlign: import('@tldraw/editor').EnumStyleProp<
    'end' | 'middle' | 'start'
  >
}
References

EnumStyleProp, Validator


type

Public static property

Signature
static type: 'note'

Methods

component()

Public method

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

shape

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

TLNoteShape


getDefaultProps()

Public method

Signature
getDefaultProps(): TLNoteShape['props']
References

TLNoteShape


getGeometry()

Public method

Signature
getGeometry(shape: TLNoteShape): Group2d
Parameters
NameDescription

shape

TLNoteShape
Returns
Group2d
References

TLNoteShape, Group2d


getHandles()

Public method

Signature
getHandles(shape: TLNoteShape): TLHandle[]
Parameters
NameDescription

shape

TLNoteShape
Returns
TLHandle[]
References

TLNoteShape, TLHandle


indicator()

Public method

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

shape

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

TLNoteShape


toSvg()

Public method

Signature
toSvg(
  shape: TLNoteShape,
  ctx: SvgExportContext
): import('react/jsx-runtime').JSX.Element
Parameters
NameDescription

shape

TLNoteShape

ctx

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

TLNoteShape, SvgExportContext


NoteShapeToolNoteToolbarItem