@mocanvas/mocanvas · class
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): booleanNothing binds to an arrow (no arrow-to-arrow bindings).
canEdit(_shape: ArrowShape): booleancomponent(shape: ArrowShape): ReactNodegetDefaultProps(): ArrowShapePropsgetFontFaces(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): Path2DgetRenderStyle(shape: ArrowShape): StyleWordsgetText(shape: ArrowShape): stringhasOverlayLabel(shape: ArrowShape): booleanhideResizeHandles(_shape: ArrowShape): booleanhideRotateHandle(_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): booleanA 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): booleanThe GPU keeps drawing the arrow while its label is edited.
onEditEnd(shape: ArrowShape): voidonHandleDrag(shape: ArrowShape, info: {onTranslateStart(shape: ArrowShape): voidDragging 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.PropsMigrationsstatic options: ArrowShapeOptionsreadonly options: ArrowShapeOptionsstatic 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.