NoteShapeUtil • tldraw docs

Table of contents

Properties
Methods

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').Migrations

References

Migrations

`onBeforeCreate`

Public property

Signature

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

References

TLNoteShape, TLParentId, TLShapeId

`onBeforeUpdate`

Public property

Signature

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

References

TLNoteShape, TLParentId, TLShapeId

`onEditEnd`

Public property

Signature

onEditEnd: TLOnEditEndHandler<TLNoteShape>

References

TLOnEditEndHandler, TLNoteShape

`props`

Public static property

Signature

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

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

Name	Description
`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): Rectangle2d

Parameters

Name	Description
`shape`	`TLNoteShape`

Returns

Rectangle2d

References

TLNoteShape, Rectangle2d

`getHeight()`

Public method

Signature

getHeight(shape: TLNoteShape): number

Parameters

Name	Description
`shape`	`TLNoteShape`

Returns

number

References

TLNoteShape

`indicator()`

Public method

Signature

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

Parameters

Name	Description
`shape`	`TLNoteShape`

Returns

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

References

TLNoteShape

`toSvg()`

Public method

Signature

toSvg(shape: TLNoteShape, ctx: SvgExportContext): SVGGElement

Parameters

Name	Description
`shape`	`TLNoteShape`
`ctx`	`SvgExportContext`

Returns

SVGGElement

References

TLNoteShape, SvgExportContext

NoteShapeTool OfflineIndicator