Table of contents

Public class

Signature
class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {}
References

BaseBoxShapeUtil, TLGeoShape

Source

packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx


Properties

canEdit

Public property

Signature
canEdit: () => boolean

migrations

Public static property

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

Migrations


onBeforeCreate

Public property

Signature
onBeforeCreate: (shape: TLGeoShape) =>
  | {
      props: {
        growY: number
        geo:
          | 'arrow-down'
          | 'arrow-left'
          | 'arrow-right'
          | 'arrow-up'
          | 'check-box'
          | 'cloud'
          | 'diamond'
          | 'ellipse'
          | 'hexagon'
          | 'octagon'
          | 'oval'
          | 'pentagon'
          | 'rectangle'
          | 'rhombus-2'
          | 'rhombus'
          | 'star'
          | 'trapezoid'
          | 'triangle'
          | 'x-box'
        labelColor:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'yellow'
        color:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'yellow'
        fill: 'none' | 'pattern' | 'semi' | 'solid'
        dash: 'dashed' | 'dotted' | 'draw' | 'solid'
        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
        w: number
        h: number
        text: string
      }
      type: 'geo'
      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

TLGeoShape, TLParentId, TLShapeId


onBeforeUpdate

Public property

Signature
onBeforeUpdate: (
  prev: TLGeoShape,
  next: TLGeoShape
) =>
  | {
      props: {
        growY: number
        geo:
          | 'arrow-down'
          | 'arrow-left'
          | 'arrow-right'
          | 'arrow-up'
          | 'check-box'
          | 'cloud'
          | 'diamond'
          | 'ellipse'
          | 'hexagon'
          | 'octagon'
          | 'oval'
          | 'pentagon'
          | 'rectangle'
          | 'rhombus-2'
          | 'rhombus'
          | 'star'
          | 'trapezoid'
          | 'triangle'
          | 'x-box'
        labelColor:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'yellow'
        color:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'yellow'
        fill: 'none' | 'pattern' | 'semi' | 'solid'
        dash: 'dashed' | 'dotted' | 'draw' | 'solid'
        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
        w: number
        h: number
        text: string
      }
      type: 'geo'
      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

TLGeoShape, TLParentId, TLShapeId


onDoubleClick

Public property

Signature
onDoubleClick: (shape: TLGeoShape) =>
  | {
      props: {
        geo: 'check-box'
      }
      type: 'geo'
      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'
    }
  | {
      props: {
        geo: 'rectangle'
      }
      type: 'geo'
      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

TLGeoShape, TLParentId, TLShapeId


onEditEnd

Public property

Signature
onEditEnd: TLOnEditEndHandler<TLGeoShape>
References

TLOnEditEndHandler, TLGeoShape


onResize

Public property

Signature
onResize: TLOnResizeHandler<TLGeoShape>
References

TLOnResizeHandler, TLGeoShape


props

Public static property

Signature
static props: {
  geo: import('@tldraw/editor').EnumStyleProp<
    | 'arrow-down'
    | 'arrow-left'
    | 'arrow-right'
    | 'arrow-up'
    | 'check-box'
    | 'cloud'
    | 'diamond'
    | 'ellipse'
    | 'hexagon'
    | 'octagon'
    | 'oval'
    | 'pentagon'
    | 'rectangle'
    | 'rhombus-2'
    | 'rhombus'
    | 'star'
    | 'trapezoid'
    | 'triangle'
    | 'x-box'
  >
  labelColor: import('@tldraw/editor').EnumStyleProp<
    | 'black'
    | 'blue'
    | 'green'
    | 'grey'
    | 'light-blue'
    | 'light-green'
    | 'light-red'
    | 'light-violet'
    | 'orange'
    | 'red'
    | 'violet'
    | 'yellow'
  >
  color: import('@tldraw/editor').EnumStyleProp<
    | 'black'
    | 'blue'
    | 'green'
    | 'grey'
    | 'light-blue'
    | 'light-green'
    | 'light-red'
    | 'light-violet'
    | 'orange'
    | 'red'
    | 'violet'
    | 'yellow'
  >
  fill: import('@tldraw/editor').EnumStyleProp<
    'none' | 'pattern' | 'semi' | 'solid'
  >
  dash: import('@tldraw/editor').EnumStyleProp<
    'dashed' | 'dotted' | 'draw' | 'solid'
  >
  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'
  >
  url: import('@tldraw/editor').Validator<string>
  w: import('@tldraw/editor').Validator<number>
  h: import('@tldraw/editor').Validator<number>
  growY: import('@tldraw/editor').Validator<number>
  text: import('@tldraw/editor').Validator<string>
}
References

EnumStyleProp, Validator


type

Public static property

Signature
static type: 'geo'

Methods

component()

Public method

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

shape

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

TLGeoShape


getCanvasSvgDefs()

Public method

Signature
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]
References

TLShapeUtilCanvasSvgDef


getDefaultProps()

Public method

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

TLGeoShape


getGeometry()

Public method

Signature
getGeometry(shape: TLGeoShape): Geometry2d
Parameters
NameDescription

shape

TLGeoShape
Returns
Geometry2d
References

TLGeoShape, Geometry2d


indicator()

Public method

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

shape

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

TLGeoShape


toSvg()

Public method

Signature
toSvg(shape: TLGeoShape, ctx: SvgExportContext): SVGElement
Parameters
NameDescription

shape

TLGeoShape

ctx

SvgExportContext
Returns
SVGElement
References

TLGeoShape, SvgExportContext


GeoShapeToolgetEmbedInfo