GeoShapeUtil

Extends BaseBoxShapeUtil<TLGeoShape>.

class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {}

Constructs a new instance of the ShapeUtil class

Editor

Properties

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

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

static type: 'geo'

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

canBeLaidOut: TLShapeUtilFlag<Shape>

Whether the shape can be cropped.

canCrop: TLShapeUtilFlag<Shape>

canEdit: () => boolean

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

canEditInReadOnly: TLShapeUtilFlag<Shape>

Whether the shape can be resized.

canResize: TLShapeUtilFlag<Shape>

Whether the shape can be scrolled while editing.

canScroll: TLShapeUtilFlag<Shape>

Whether the shape can be snapped to by another shape.

canSnap: TLShapeUtilFlag<Shape>

editor: Editor

Whether the shape should hide its resize handles when selected.

hideResizeHandles: TLShapeUtilFlag<Shape>

Whether the shape should hide its rotation handles when selected.

hideRotateHandle: TLShapeUtilFlag<Shape>

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

hideSelectionBoundsBg: TLShapeUtilFlag<Shape>

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

hideSelectionBoundsFg: TLShapeUtilFlag<Shape>

Whether the shape's aspect ratio is locked.

isAspectRatioLocked: TLShapeUtilFlag<Shape>

onBeforeCreate: (shape: TLGeoShape) =>
  | {
      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: {
        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'
        dash: 'dashed' | 'dotted' | 'draw' | 'solid'
        fill: 'fill' | 'none' | 'pattern' | 'semi' | 'solid'
        font: 'draw' | 'mono' | 'sans' | 'serif'
        geo:
          | 'arrow-down'
          | 'arrow-left'
          | 'arrow-right'
          | 'arrow-up'
          | 'check-box'
          | 'cloud'
          | 'diamond'
          | 'ellipse'
          | 'heart'
          | 'hexagon'
          | 'octagon'
          | 'oval'
          | 'pentagon'
          | 'rectangle'
          | 'rhombus-2'
          | 'rhombus'
          | 'star'
          | 'trapezoid'
          | 'triangle'
          | 'x-box'
        growY: number
        h: number
        labelColor:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        scale: number
        size: 'l' | 'm' | 's' | 'xl'
        text: string
        url: string
        verticalAlign: 'end' | 'middle' | 'start'
        w: number
      }
      rotation: number
      type: 'geo'
      typeName: 'shape'
      x: number
      y: number
    }
  | undefined

onBeforeUpdate: (
  prev: TLGeoShape,
  next: TLGeoShape
) =>
  | {
      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: {
        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'
        dash: 'dashed' | 'dotted' | 'draw' | 'solid'
        fill: 'fill' | 'none' | 'pattern' | 'semi' | 'solid'
        font: 'draw' | 'mono' | 'sans' | 'serif'
        geo:
          | 'arrow-down'
          | 'arrow-left'
          | 'arrow-right'
          | 'arrow-up'
          | 'check-box'
          | 'cloud'
          | 'diamond'
          | 'ellipse'
          | 'heart'
          | 'hexagon'
          | 'octagon'
          | 'oval'
          | 'pentagon'
          | 'rectangle'
          | 'rhombus-2'
          | 'rhombus'
          | 'star'
          | 'trapezoid'
          | 'triangle'
          | 'x-box'
        growY: number
        h: number
        labelColor:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        scale: number
        size: 'l' | 'm' | 's' | 'xl'
        text: string
        url: string
        verticalAlign: 'end' | 'middle' | 'start'
        w: number
      }
      rotation: number
      type: 'geo'
      typeName: 'shape'
      x: number
      y: number
    }
  | undefined

A callback called when a shape's children change.

onChildrenChange?: TLOnChildrenChangeHandler<Shape>

A callback called when a shape is clicked.

onClick?: TLOnClickHandler<Shape>

onDoubleClick: (shape: TLGeoShape) =>
  | {
      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: {
        geo: 'check-box'
      }
      rotation: number
      type: 'geo'
      typeName: 'shape'
      x: number
      y: number
    }
  | {
      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: {
        geo: 'rectangle'
      }
      rotation: number
      type: 'geo'
      typeName: 'shape'
      x: number
      y: number
    }
  | undefined

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

onDoubleClickEdge?: TLOnDoubleClickHandler<Shape>

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

onDoubleClickHandle?: TLOnDoubleClickHandleHandler<Shape>

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

onDragShapesOut?: TLOnDragHandler<Shape>

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

onDragShapesOver?: TLOnDragHandler<Shape>

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

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

onDropShapesOver?: TLOnDragHandler<Shape>

onEditEnd: TLOnEditEndHandler<TLGeoShape>

A callback called when a shape's handle changes.

onHandleDrag?: TLOnHandleDragHandler<Shape>

onResize: TLOnResizeHandler<TLGeoShape>

A callback called when a shape finishes resizing.

onResizeEnd?: TLOnResizeEndHandler<Shape>

A callback called when a shape starts being resized.

onResizeStart?: TLOnResizeStartHandler<Shape>

A callback called when a shape changes from a rotation.

onRotate?: TLOnRotateHandler<Shape>

A callback called when a shape finishes rotating.

onRotateEnd?: TLOnRotateEndHandler<Shape>

A callback called when a shape starts being rotated.

onRotateStart?: TLOnRotateStartHandler<Shape>

A callback called when a shape changes from a translation.

onTranslate?: TLOnTranslateHandler<Shape>

A callback called when a shape finishes translating.

onTranslateEnd?: TLOnTranslateEndHandler<Shape>

A callback called when a shape starts being translated.

onTranslateStart?: TLOnTranslateStartHandler<Shape>

Methods

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

canBind(opts: TLShapeUtilCanBindOpts<Shape>): boolean

TLShapeUtilCanBindOpts<Shape>

boolean

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

canDropShapes(shape: Shape, shapes: TLShape[]): boolean

Shape

TLShape[]

boolean

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

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

Shape

TLShape['type']

boolean

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

TLGeoShape

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

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

getBoundsSnapGeometry(shape: Shape): BoundsSnapGeometry

Shape

BoundsSnapGeometry

getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]

getDefaultProps(): TLGeoShape['props']

getGeometry(shape: TLGeoShape): Group2d

TLGeoShape

Group2d

Get an array of handle models for the shape. This is an optional method.

getHandles?(shape: Shape): TLHandle[]

util.getHandles?.(myShape)

Shape

TLHandle[]

getHandleSnapGeometry(shape: TLGeoShape): HandleSnapGeometry

TLGeoShape

HandleSnapGeometry

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

Shape

Shape

number

Shape['props']

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

TLGeoShape

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

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

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

Shape

SvgExportContext

null | Promise<null | ReactElement> | ReactElement

An SVG element.

toSvg(
  shape: TLGeoShape,
  ctx: SvgExportContext
): import('react/jsx-runtime').JSX.Element

TLGeoShape

SvgExportContext

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