@mocanvas/mocanvas · class

ArrowShapeUtil

declare class ArrowShapeUtil extends ShapeUtil<ArrowShape, ArrowShapeUtilDisplayValues>

This one ships without a description. The signature above is read from the package, and the guides cover the area it belongs to.


Methods · 19

canBind(_opts: BindingCanBindOptions): boolean

Nothing binds to an arrow (no arrow-to-arrow bindings).

canEdit(_shape: ArrowShape): boolean
component(shape: ArrowShape): ReactNode
getDefaultProps(): ArrowShapeProps
getFontFaces(shape: ArrowShape): TLFontFace[]

An arrow needs its family's faces only while it carries a label.

getGeometry(shape: ArrowShape, opts?: {

gapAtLabel splits the body around the label's box. Only the selection outline asks for it; the geometry the editor hit-tests keeps the body whole, so the stroke the label covers is still there to be clicked.

getHandles(shape: ArrowShape): ShapeHandle[]

Start and end handles move (and bind) the terminals. Between them sits one virtual handle: an arc's bend handle rides the middle of the curve, while an elbow's midpoint handle sits on its middle leg and slides that leg. An elbow with no middle leg (an L route, or a straight run) has neither.

getIndicatorPath(shape: ArrowShape): Path2D
getRenderStyle(shape: ArrowShape): StyleWords
getText(shape: ArrowShape): string
hasOverlayLabel(shape: ArrowShape): boolean
hideResizeHandles(_shape: ArrowShape): boolean
hideRotateHandle(_shape: ArrowShape): boolean

…and no rotate handle either, which is what actually suppresses the box. selectionHandles only drops the frame when resize *and* rotate are both hidden, so hiding one of the two left a selected arrow wrapped in a rectangle with a lone rotate dot above it. An arrow has nothing to rotate about: its ends are the two handles, and turning it means moving them.

hideSelectionBoundsBg(_shape: ArrowShape): boolean

A selected arrow shows its handles instead of a selection box.

hideSelectionBoundsFg(_shape: ArrowShape): boolean

…but the arrow's *own* outline is drawn. This flag suppresses a lone selected shape's indicator, and the arrow used to set it because the selection frame was the cue instead. With the frame gone there was no cue at all — a selected arrow showed nothing. Its indicator is the curve and the label's box, which is the cue worth having.

needsOverlay(_shape: ArrowShape): boolean

The GPU keeps drawing the arrow while its label is edited.

onEditEnd(shape: ArrowShape): void
onHandleDrag(shape: ArrowShape, info: {
onTranslateStart(shape: ArrowShape): void

Dragging the arrow on its own detaches it: bindings to shapes that are not part of the selection are dropped and their terminals frozen in place. Bindings to shapes moving along with the arrow are kept.


Properties · 5

static migrations: _mocanvas_editor.PropsMigrations
static options: ArrowShapeOptions
readonly options: ArrowShapeOptions
static props: _mocanvas_editor.RecordProps<ArrowShape>

kind is deliberately not among these. A style is shared across shape types, remembered for the next shape and applied to a whole selection at once; arc-versus-elbow is routing that belongs to the one arrow, and declaring it a style would put it in every mixed selection's shared styles (and in the style panel) with nothing else to share it with.

static type: "arrow"

mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.