Whiteboard arrows

An arrow connects two shapes, or runs between free points on the board. An end that connects a shape follows the shape when it moves or changes its size.

Connect shapes

With the arrow tool, users draw an arrow with a drag. Each end connects the shape under it, except a pen line, or stays free on the board. A connected end aims at the spot of the shape where the drag started or ended, and stops on the shape's edge. Near the middle of the shape, it aims at the middle. The end handles of a selected arrow move its ends the same way. While an end is dragged, the shape that it would connect has data-arrow-target, for your CSS.

insertShape adds an arrow between shapes, between points, or from a shape to a point:

editor.commands.insertShape({ type: 'arrow', fromId: 'idea', toId: 'plan' })
editor.commands.insertShape({ type: 'arrow', fromId: 'idea', toX: 400, toY: 300 })

An end with the id of a shape on the board sits on the edge of that shape, where the line meets it on its way to the end's anchor: fromAnchorX and fromAnchorY, or toAnchorX and toAnchorY, from 0 to 1 in the shape's box. The default, 0.5, aims at the middle. An end without a shape sits at its point, fromX and fromY or toX and toY. When a connected shape is deleted, the end stays where it touched the shape. See ArrowEndAttributes.

Labels

The paragraphs of an arrow are its label, which sits in the middle of its line. The line leaves a gap around the label. A double click on an arrow, or Enter while it is the only selected shape, edits the label. An arrow without text shows no label.

To start a board with a label, give the arrow a paragraph:

import { boardContent, stickyNoteContent } from '@tiptap-pro/extension-whiteboard'

const content = boardContent([
  stickyNoteContent({ id: 'idea', x: 0, y: 0, text: 'An idea' }),
  stickyNoteContent({ id: 'plan', x: 400, y: 0, text: 'A plan' }),
  {
    type: 'arrow',
    attrs: { id: 'idea-to-plan', fromId: 'idea', toId: 'plan' },
    content: [{ type: 'paragraph', content: [{ type: 'text', text: 'leads to' }] }],
  },
])

editor.commands.setContent(content)

Like the text of other shapes, a label has a fontSize and a font.

Lines and heads

These styles change how an arrow looks:

Set them like other styles, for the selected arrows and the arrows added later, or as attributes of one arrow:

editor.commands.setShapeStyle({ name: 'arrowKind', value: 'elbow' })
editor.commands.insertShape({ type: 'arrow', fromId: 'idea', toId: 'plan', dash: 'dashed' })

A curved or elbow arrow leaves and enters each shape through the side nearest to the spot where its end was dropped, and goes around the shapes when it has to. An end dropped near the middle of its shape takes the side that makes the line simplest. With both ends there, the arrow runs between the sides that face each other. An elbow turns at right angles, and a curve bends smoothly along the same way. When the shapes are too close for that, the arrow is straight. arrowheads decides which ends have a head, and arrowheadKind how the heads look.

Arrows draw their lines and heads in the current color, so your CSS sets their color. See Styling for the label and the other parts of an arrow.

Next steps

• Choose the styles of new shapes with setShapeStyle
• See all commands