GeoShapeUtil • tldraw Docs

Table of contents

migrations
props
type
editor
options
Properties
Methods

Extends BaseBoxShapeUtil<TLGeoShape>.

class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {}

Constructor

from ShapeUtil

Constructs a new instance of the ShapeUtil class

Parameters

Name	Description
`editor`	`Editor;`

Properties

migrations

static

static migrations: import("@tldraw/tlschema").TLPropsMigrations;

props

static

static props: import("@tldraw/tlschema").RecordProps<TLGeoShape>;

type

static

static type: "geo";

editor

from ShapeUtil

editor: Editor;

options

options: {
  showTextOutline: boolean;
};

Methods

configure( )

static

from ShapeUtil

Configure this shape utils options.

static configure<T extends TLShapeUtilConstructor<any, any>>(
  this: T,
  options: T extends new (...args: any[]) => {
    options: infer Options;
  }
    ? Partial<Options>
    : never,
): T;

Parameters

Name	Description
`this`	`T;`
`options`	`T extends new (...args: any[]) => { options: infer Options; } ? Partial<Options> : never;`

Returns

T;

canBeLaidOut( )

from ShapeUtil

Whether the shape can participate in layout functions such as alignment or distribution.

canBeLaidOut(shape: Shape, info: TLShapeUtilCanBeLaidOutOpts): boolean;

Parameters

Name	Description
`shape`	`Shape;` The shape.
`info`	`TLShapeUtilCanBeLaidOutOpts;` Additional context information: the type of action causing the layout and the

Returns

boolean;

canBind( )

from ShapeUtil

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

canBind(_opts: TLShapeUtilCanBindOpts): boolean;

Parameters

Name	Description
`_opts`	`TLShapeUtilCanBindOpts;`

Returns

boolean;

canCrop( )

from ShapeUtil

Whether the shape can be cropped.

canCrop(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;`

Returns

boolean;

canCull( )

from ShapeUtil

Whether this shape can be culled. By default, shapes are culled for performance reasons when they are outside of the viewport. Culled shapes are still rendered to the DOM, but have their display property set to none.

canCull(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;` The shape.

Returns

boolean;

canEdit( )

canEdit(): boolean;

canEditInReadonly( )

from ShapeUtil

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

canEditInReadonly(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;`

Returns

boolean;

canEditWhileLocked( )

from ShapeUtil

Whether the shape can be edited while locked or while an ancestor is locked.

canEditWhileLocked(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;`

Returns

boolean;

canReceiveNewChildrenOfType( )

from ShapeUtil

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

canReceiveNewChildrenOfType(shape: Shape, _type: TLShape["type"]): boolean;

Parameters

Name	Description
`shape`	`Shape;` The shape.
`_type`	`TLShape["type"];`

Returns

boolean;

canResize( )

from ShapeUtil

Whether the shape can be resized.

canResize(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;`

Returns

boolean;

canResizeChildren( )

from ShapeUtil

When the shape is resized, whether the shape's children should also be resized.

canResizeChildren(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;`

Returns

boolean;

canScroll( )

from ShapeUtil

Whether the shape can be scrolled while editing.

canScroll(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;`

Returns

boolean;

canSnap( )

from ShapeUtil

Whether the shape can be snapped to by another shape.

canSnap(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;` The shape.

Returns

boolean;

canTabTo( )

from ShapeUtil

Whether the shape can be tabbed to.

canTabTo(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;` The shape.

Returns

boolean;

component( )

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

Parameters

Name	Description
`shape`	`TLGeoShape;`

Returns

import("react/jsx-runtime").JSX.Element;

getAriaDescriptor( )

from ShapeUtil

getAriaDescriptor(shape: Shape): string | undefined;

Parameters

Name	Description
`shape`	`Shape;`

Returns

string | undefined;

getBoundsSnapGeometry( )

from ShapeUtil

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

getBoundsSnapGeometry(shape: Shape): BoundsSnapGeometry;

Parameters

Name	Description
`shape`	`Shape;`

Returns

BoundsSnapGeometry;

getCanvasSvgDefs( )

getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];

getClipPath( )

optional

from ShapeUtil

Get the clip path to apply to this shape's children.

The returned points should define the inner clip boundary - the area where children will be visible. If your shape has a stroke, you should inset the clip path by half the stroke width so children are clipped to the inner edge of the stroke rather than its center line.

getClipPath?(shape: Shape): undefined | Vec[];

Example

override getClipPath(shape: MyShape): Vec[] | undefined {
  const strokeWidth = 2
  const inset = strokeWidth / 2
  // Return points inset by half the stroke width
  return [
    new Vec(inset, inset),
    new Vec(shape.props.w - inset, inset),
    new Vec(shape.props.w - inset, shape.props.h - inset),
    new Vec(inset, shape.props.h - inset),
  ]
}

Parameters

Name	Description
`shape`	`Shape;` The shape to get the clip path for

Returns

undefined | Vec[];

Array of points defining the clipping polygon in local coordinates, or undefined if no clipping

getDefaultProps( )

getDefaultProps(): TLGeoShape["props"];

getFontFaces( )

getFontFaces(shape: TLGeoShape): import("@tldraw/editor").TLFontFace[];

Parameters

Name	Description
`shape`	`TLGeoShape;`

Returns

import("@tldraw/editor").TLFontFace[];

getGeometry( )

getGeometry(shape: TLGeoShape): Group2d;

Parameters

Name	Description
`shape`	`TLGeoShape;`

Returns

Group2d;

getHandles( )

optional

from ShapeUtil

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

getHandles?(shape: Shape): TLHandle[];

Example

util.getHandles?.(myShape);

Parameters

Name	Description
`shape`	`Shape;` The shape.

Returns

TLHandle[];

getHandleSnapGeometry( )

getHandleSnapGeometry(shape: TLGeoShape): HandleSnapGeometry;

Parameters

Name	Description
`shape`	`TLGeoShape;`

Returns

HandleSnapGeometry;

getIndicatorPath( )

getIndicatorPath(shape: TLGeoShape): Path2D | undefined;

Parameters

Name	Description
`shape`	`TLGeoShape;`

Returns

Path2D | undefined;

getInterpolatedProps( )

getInterpolatedProps(
  startShape: TLGeoShape,
  endShape: TLGeoShape,
  t: number,
): TLGeoShapeProps;

Parameters

Name	Description
`startShape`	`TLGeoShape;`
`endShape`	`TLGeoShape;`
`t`	`number;`

Returns

TLGeoShapeProps;

getReferencedUserIds( )

from ShapeUtil

Return user IDs referenced in shape-specific props. Used when copying shapes to include referenced users on the clipboard. Override this if your shape stores user IDs in custom props.

getReferencedUserIds(shape: Shape): string[];

Parameters

Name	Description
`shape`	`Shape;`

Returns

string[];

getText( )

getText(shape: TLGeoShape): string;

Parameters

Name	Description
`shape`	`TLGeoShape;`

Returns

string;

hideInMinimap( )

optional

from ShapeUtil

Whether a specific shape should hide in the minimap.

If not defined, the default behavior is to show all shapes in the minimap.

hideInMinimap?(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;`

Returns

boolean;

boolean indicating if this shape should hide in the minimap

hideResizeHandles( )

from ShapeUtil

Whether the shape should hide its resize handles when selected.

hideResizeHandles(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;`

Returns

boolean;

hideRotateHandle( )

from ShapeUtil

Whether the shape should hide its rotation handles when selected.

hideRotateHandle(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;`

Returns

boolean;

hideSelectionBoundsBg( )

from ShapeUtil

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

hideSelectionBoundsBg(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;`

Returns

boolean;

hideSelectionBoundsFg( )

from ShapeUtil

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

hideSelectionBoundsFg(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;`

Returns

boolean;

indicator( )

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

Parameters

Name	Description
`shape`	`TLGeoShape;`

Returns

import("react/jsx-runtime").JSX.Element;

isAspectRatioLocked( )

from ShapeUtil

Whether the shape's aspect ratio is locked.

isAspectRatioLocked(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;`

Returns

boolean;

isExportBoundsContainer( )

from ShapeUtil

By default, the bounds of an image export are the bounds of all the shapes it contains, plus some padding. If an export includes a shape where isExportBoundsContainer is true, then the padding is skipped if the bounds of that shape contains all the other shapes. This is useful in cases like annotating on top of an image, where you usually want to avoid extra padding around the image if you don't need it.

isExportBoundsContainer(shape: Shape): boolean;

Parameters

Name	Description
`shape`	`Shape;` The shape to check

Returns

boolean;

True if this shape should be treated as an export bounds container

onBeforeCreate( )

onBeforeCreate(shape: TLGeoShape):
  | {
      id: TLShapeId;
      index: import("@tldraw/utils").IndexKey;
      isLocked: boolean;
      meta: import("@tldraw/utils").JsonObject;
      opacity: number;
      parentId: import("@tldraw/tlschema").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" | "lined-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";
        richText: {
          attrs?: any;
          content: unknown[];
          type: string;
        };
        scale: number;
        size: "l" | "m" | "s" | "xl";
        url: string;
        verticalAlign: "end" | "middle" | "start";
        w: number;
      };
      rotation: number;
      type: "geo";
      typeName: "shape";
      x: number;
      y: number;
    }
  | undefined;

Parameters

Name	Description
`shape`	`TLGeoShape;`

Returns

  | {
      id: TLShapeId;
      index: import("@tldraw/utils").IndexKey;
      isLocked: boolean;
      meta: import("@tldraw/utils").JsonObject;
      opacity: number;
      parentId: import("@tldraw/tlschema").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" | "lined-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";
        richText: {
          attrs?: any;
          content: unknown[];
          type: string;
        };
        scale: number;
        size: "l" | "m" | "s" | "xl";
        url: string;
        verticalAlign: "end" | "middle" | "start";
        w: number;
      };
      rotation: number;
      type: "geo";
      typeName: "shape";
      x: number;
      y: number;
    }
  | undefined;

onBeforeUpdate( )

onBeforeUpdate(
  prev: TLGeoShape,
  next: TLGeoShape,
):
  | {
      id: TLShapeId;
      index: import("@tldraw/utils").IndexKey;
      isLocked: boolean;
      meta: import("@tldraw/utils").JsonObject;
      opacity: number;
      parentId: import("@tldraw/tlschema").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" | "lined-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";
        richText: {
          attrs?: any;
          content: unknown[];
          type: string;
        };
        scale: number;
        size: "l" | "m" | "s" | "xl";
        url: string;
        verticalAlign: "end" | "middle" | "start";
        w: number;
      };
      rotation: number;
      type: "geo";
      typeName: "shape";
      x: number;
      y: number;
    }
  | undefined;

Parameters

Name	Description
`prev`	`TLGeoShape;`
`next`	`TLGeoShape;`

Returns

  | {
      id: TLShapeId;
      index: import("@tldraw/utils").IndexKey;
      isLocked: boolean;
      meta: import("@tldraw/utils").JsonObject;
      opacity: number;
      parentId: import("@tldraw/tlschema").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" | "lined-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";
        richText: {
          attrs?: any;
          content: unknown[];
          type: string;
        };
        scale: number;
        size: "l" | "m" | "s" | "xl";
        url: string;
        verticalAlign: "end" | "middle" | "start";
        w: number;
      };
      rotation: number;
      type: "geo";
      typeName: "shape";
      x: number;
      y: number;
    }
  | undefined;

onChildrenChange( )

optional

from ShapeUtil

A callback called when a shape's children change.

onChildrenChange?(shape: Shape): TLShapePartial[] | void;

Parameters

Name	Description
`shape`	`Shape;` The shape.

Returns

TLShapePartial[] | void;

An array of shape updates, or void.

onClick( )

optional

from ShapeUtil

A callback called when a shape is clicked.

onClick?(shape: Shape): TLShapePartial<Shape> | void;

Parameters

Name	Description
`shape`	`Shape;` The shape.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onCrop( )

optional

from ShapeUtil

A callback called when a shape changes from a crop.

onCrop?(
  shape: Shape,
  info: TLCropInfo<Shape>,
): Omit<TLShapePartial<Shape>, "id" | "type"> | undefined | void;

Parameters

Name	Description
`shape`	`Shape;` The shape at the start of the crop.
`info`	`TLCropInfo<Shape>;` Info about the crop.

Returns

Omit<TLShapePartial<Shape>, "id" | "type"> | undefined | void;

A change to apply to the shape, or void.

onDoubleClick( )

onDoubleClick(shape: TLGeoShape):
  | {
      id: TLShapeId;
      index: import("@tldraw/utils").IndexKey;
      isLocked: boolean;
      meta: import("@tldraw/utils").JsonObject;
      opacity: number;
      parentId: import("@tldraw/tlschema").TLParentId;
      props: {
        geo: "check-box";
      };
      rotation: number;
      type: "geo";
      typeName: "shape";
      x: number;
      y: number;
    }
  | {
      id: TLShapeId;
      index: import("@tldraw/utils").IndexKey;
      isLocked: boolean;
      meta: import("@tldraw/utils").JsonObject;
      opacity: number;
      parentId: import("@tldraw/tlschema").TLParentId;
      props: {
        geo: "rectangle";
      };
      rotation: number;
      type: "geo";
      typeName: "shape";
      x: number;
      y: number;
    }
  | undefined;

Parameters

Name	Description
`shape`	`TLGeoShape;`

Returns

  | {
      id: TLShapeId;
      index: import("@tldraw/utils").IndexKey;
      isLocked: boolean;
      meta: import("@tldraw/utils").JsonObject;
      opacity: number;
      parentId: import("@tldraw/tlschema").TLParentId;
      props: {
        geo: "check-box";
      };
      rotation: number;
      type: "geo";
      typeName: "shape";
      x: number;
      y: number;
    }
  | {
      id: TLShapeId;
      index: import("@tldraw/utils").IndexKey;
      isLocked: boolean;
      meta: import("@tldraw/utils").JsonObject;
      opacity: number;
      parentId: import("@tldraw/tlschema").TLParentId;
      props: {
        geo: "rectangle";
      };
      rotation: number;
      type: "geo";
      typeName: "shape";
      x: number;
      y: number;
    }
  | undefined;

onDoubleClickCorner( )

optional

from ShapeUtil

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

onDoubleClickCorner?(
  shape: Shape,
  info: TLClickEventInfo,
): TLShapePartial<Shape> | void;

Parameters

Name	Description
`shape`	`Shape;` The shape.
`info`	`TLClickEventInfo;` Info about the corner.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onDoubleClickEdge( )

optional

from ShapeUtil

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

onDoubleClickEdge?(
  shape: Shape,
  info: TLClickEventInfo,
): TLShapePartial<Shape> | void;

Parameters

Name	Description
`shape`	`Shape;` The shape.
`info`	`TLClickEventInfo;` Info about the edge.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onDoubleClickHandle( )

optional

from ShapeUtil

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

onDoubleClickHandle?(
  shape: Shape,
  handle: TLHandle,
): TLShapePartial<Shape> | void;

Parameters

Name	Description
`shape`	`Shape;` The shape.
`handle`	`TLHandle;` The handle that is double-clicked.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onDragShapesIn( )

optional

from ShapeUtil

A callback called when some other shapes are dragged into this one. This fires when the shapes are dragged over the shape for the first time.

onDragShapesIn?(
  shape: Shape,
  shapes: TLShape[],
  info: TLDragShapesInInfo,
): void;

Parameters

Name	Description
`shape`	`Shape;` The shape.
`shapes`	`TLShape[];` The shapes that are being dragged in.
`info`	`TLDragShapesInInfo;`

Returns

void;

onDragShapesOut( )

optional

from ShapeUtil

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

onDragShapesOut?(
  shape: Shape,
  shapes: TLShape[],
  info: TLDragShapesOutInfo,
): void;

Parameters

Name	Description
`shape`	`Shape;` The shape.
`shapes`	`TLShape[];` The shapes that are being dragged out.
`info`	`TLDragShapesOutInfo;`

Returns

void;

onDragShapesOver( )

optional

from ShapeUtil

A callback called when some other shapes are dragged over this one. This fires when the shapes are dragged over the shape for the first time (after the onDragShapesIn callback), and again on every update while the shapes are being dragged.

onDragShapesOver?(
  shape: Shape,
  shapes: TLShape[],
  info: TLDragShapesOverInfo,
): void;

Example

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

Parameters

Name	Description
`shape`	`Shape;` The shape.
`shapes`	`TLShape[];` The shapes that are being dragged over this one.
`info`	`TLDragShapesOverInfo;`

Returns

void;

onDropShapesOver( )

optional

from ShapeUtil

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

onDropShapesOver?(
  shape: Shape,
  shapes: TLShape[],
  info: TLDropShapesOverInfo,
): void;

Parameters

Name	Description
`shape`	`Shape;` The shape.
`shapes`	`TLShape[];` The shapes that are being dropped over this one.
`info`	`TLDropShapesOverInfo;`

Returns

void;

onEditEnd( )

optional

from ShapeUtil

A callback called when a shape finishes being edited.

onEditEnd?(shape: Shape): void;

Parameters

Name	Description
`shape`	`Shape;` The shape.

Returns

void;

onEditStart( )

optional

from ShapeUtil

A callback called when a shape starts being edited.

onEditStart?(shape: Shape): void;

Parameters

Name	Description
`shape`	`Shape;` The shape.

Returns

void;

onHandleDrag( )

optional

from ShapeUtil

A callback called when a shape's handle changes.

onHandleDrag?(
  shape: Shape,
  info: TLHandleDragInfo<Shape>,
): TLShapePartial<Shape> | void;

Parameters

Name	Description
`shape`	`Shape;` The current shape.
`info`	`TLHandleDragInfo<Shape>;` An object containing the handle and whether the handle is 'precise' or not.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onHandleDragCancel( )

optional

from ShapeUtil

A callback called when a shape's handle drag is cancelled.

onHandleDragCancel?(current: Shape, info: TLHandleDragInfo<Shape>): void;

Parameters

Name	Description
`current`	`Shape;` The current shape.
`info`	`TLHandleDragInfo<Shape>;` An object containing the handle and whether the handle is 'precise' or not.

Returns

void;

onHandleDragEnd( )

optional

from ShapeUtil

A callback called when a shape's handle finishes being dragged.

onHandleDragEnd?(
  current: Shape,
  info: TLHandleDragInfo<Shape>,
): TLShapePartial<Shape> | void;

Parameters

Name	Description
`current`	`Shape;` The current shape.
`info`	`TLHandleDragInfo<Shape>;` An object containing the handle and whether the handle is 'precise' or not.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onHandleDragStart( )

optional

from ShapeUtil

A callback called when a shape's handle starts being dragged.

onHandleDragStart?(
  shape: Shape,
  info: TLHandleDragInfo<Shape>,
): TLShapePartial<Shape> | void;

Parameters

Name	Description
`shape`	`Shape;` The shape.
`info`	`TLHandleDragInfo<Shape>;` An object containing the handle and whether the handle is 'precise' or not.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onResize( )

onResize(
  shape: TLGeoShape,
  {
    handle,
    newPoint,
    scaleX,
    scaleY,
    initialShape,
  }: TLResizeInfo<TLGeoShape>,
): {
  props: {
    growY: number;
    h: number;
    w: number;
  };
  x: number;
  y: number;
};

Parameters

Name	Description
`shape`	`TLGeoShape;`
`{ handle, newPoint, scaleX, scaleY, initialShape }`	`TLResizeInfo<TLGeoShape>;`

Returns

{
  props: {
    growY: number;
    h: number;
    w: number;
  };
  x: number;
  y: number;
};

onResizeCancel( )

optional

from ShapeUtil

A callback called when a shape resize is cancelled.

onResizeCancel?(initial: Shape, current: Shape): void;

Parameters

Name	Description
`initial`	`Shape;` The shape at the start of the resize.
`current`	`Shape;` The current shape.

Returns

void;

onResizeEnd( )

optional

from ShapeUtil

A callback called when a shape finishes resizing.

onResizeEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void;

Parameters

Name	Description
`initial`	`Shape;` The shape at the start of the resize.
`current`	`Shape;` The current shape.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onResizeStart( )

optional

from ShapeUtil

A callback called when a shape starts being resized.

onResizeStart?(shape: Shape): TLShapePartial<Shape> | void;

Parameters

Name	Description
`shape`	`Shape;` The shape.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onRotate( )

optional

from ShapeUtil

A callback called when a shape changes from a rotation.

onRotate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void;

Parameters

Name	Description
`initial`	`Shape;` The shape at the start of the rotation.
`current`	`Shape;` The current shape.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onRotateCancel( )

optional

from ShapeUtil

A callback called when a shape rotation is cancelled.

onRotateCancel?(initial: Shape, current: Shape): void;

Parameters

Name	Description
`initial`	`Shape;` The shape at the start of the rotation.
`current`	`Shape;` The current shape.

Returns

void;

onRotateEnd( )

optional

from ShapeUtil

A callback called when a shape finishes rotating.

onRotateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void;

Parameters

Name	Description
`initial`	`Shape;` The shape at the start of the rotation.
`current`	`Shape;` The current shape.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onRotateStart( )

optional

from ShapeUtil

A callback called when a shape starts being rotated.

onRotateStart?(shape: Shape): TLShapePartial<Shape> | void;

Parameters

Name	Description
`shape`	`Shape;` The shape.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onTranslate( )

optional

from ShapeUtil

A callback called when a shape changes from a translation.

onTranslate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void;

Parameters

Name	Description
`initial`	`Shape;` The shape at the start of the translation.
`current`	`Shape;` The current shape.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onTranslateCancel( )

optional

from ShapeUtil

A callback called when a shape translation is cancelled.

onTranslateCancel?(initial: Shape, current: Shape): void;

Parameters

Name	Description
`initial`	`Shape;` The shape at the start of the translation.
`current`	`Shape;` The current shape.

Returns

void;

onTranslateEnd( )

optional

from ShapeUtil

A callback called when a shape finishes translating.

onTranslateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void;

Parameters

Name	Description
`initial`	`Shape;` The shape at the start of the translation.
`current`	`Shape;` The current shape.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

onTranslateStart( )

optional

from ShapeUtil

A callback called when a shape starts being translated.

onTranslateStart?(shape: Shape): TLShapePartial<Shape> | void;

Parameters

Name	Description
`shape`	`Shape;` The shape.

Returns

TLShapePartial<Shape> | void;

A change to apply to the shape, or void.

shouldClipChild( )

optional

from ShapeUtil

Whether a specific child shape should be clipped by this shape. Only called if getClipPath returns a valid polygon.

If not defined, the default behavior is to clip all children.

shouldClipChild?(child: TLShape): boolean;

Parameters

Name	Description
`child`	`TLShape;` The child shape to check

Returns

boolean;

boolean indicating if this child should be clipped

toBackgroundSvg( )

optional

from ShapeUtil

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

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

Parameters

Name	Description
`shape`	`Shape;` The shape.
`ctx`	`SvgExportContext;` ctx - The export context for the SVG - used for adding e.g. <def>s

Returns

null | Promise<null | ReactElement> | ReactElement;

An SVG element.

toSvg( )

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

Parameters

Name	Description
`shape`	`TLGeoShape;`
`ctx`	`SvgExportContext;`

Returns

import("react/jsx-runtime").JSX.Element;

useLegacyIndicator( )

useLegacyIndicator(): boolean;