ArrowShapeUtil

Extends ShapeUtil<TLArrowShape>.

class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {}

Constructs a new instance of the ShapeUtil class

Editor

Properties

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

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

static type: 'arrow'

canBeLaidOut: TLShapeUtilFlag<TLArrowShape>

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>

canSnap: () => boolean

editor: Editor

hideResizeHandles: TLShapeUtilFlag<TLArrowShape>

hideRotateHandle: TLShapeUtilFlag<TLArrowShape>

hideSelectionBoundsBg: TLShapeUtilFlag<TLArrowShape>

hideSelectionBoundsFg: TLShapeUtilFlag<TLArrowShape>

Whether the shape's aspect ratio is locked.

isAspectRatioLocked: TLShapeUtilFlag<Shape>

A callback called just before a shape is created. This method provides a last chance to modify the created shape.

onBeforeCreate?: TLOnBeforeCreateHandler<Shape>

onBeforeCreate = (next) => {
  return { ...next, x: next.x + 1 }
}

A callback called just before a shape is updated. This method provides a last chance to modify the updated shape.

onBeforeUpdate?: TLOnBeforeUpdateHandler<Shape>

onBeforeUpdate = (prev, next) => {
  if (prev.x === next.x) {
    return { ...next, x: next.x + 1 }
  }
}

A callback called when a shape's children change.

onChildrenChange?: TLOnChildrenChangeHandler<Shape>

A callback called when a shape is clicked.

onClick?: TLOnClickHandler<Shape>

A callback called when a shape is double clicked.

onDoubleClick?: TLOnDoubleClickHandler<Shape>

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

onDoubleClickEdge?: TLOnDoubleClickHandler<Shape>

onDoubleClickHandle: (
  shape: TLArrowShape,
  handle: TLHandle
) => TLShapePartial<TLArrowShape> | void

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<TLArrowShape>

onHandleDrag: TLOnHandleDragHandler<TLArrowShape>

onResize: TLOnResizeHandler<TLArrowShape>

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>

onTranslate?: TLOnTranslateHandler<TLArrowShape>

A callback called when a shape finishes translating.

onTranslateEnd?: TLOnTranslateEndHandler<Shape>

onTranslateStart: TLOnTranslateStartHandler<TLArrowShape>

Methods

canBind({ toShapeType }: TLShapeUtilCanBindOpts<TLArrowShape>): boolean

TLShapeUtilCanBindOpts<TLArrowShape>

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: TLArrowShape): import('react/jsx-runtime').JSX.Element | null

TLArrowShape

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

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

getGeometry(shape: TLArrowShape): Group2d

TLArrowShape

Group2d

getHandles(shape: TLArrowShape): TLHandle[]

TLArrowShape

TLHandle[]

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

getHandleSnapGeometry(shape: Shape): HandleSnapGeometry

Shape

HandleSnapGeometry

getInterpolatedProps(
  startShape: TLArrowShape,
  endShape: TLArrowShape,
  progress: number
): TLArrowShapeProps

TLArrowShape

TLArrowShape

number

TLArrowShapeProps

indicator(shape: TLArrowShape): import('react/jsx-runtime').JSX.Element | null

TLArrowShape

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

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

TLArrowShape

SvgExportContext

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