Adding Built-in Tools
Built-in tools are native JointJS overlays that attach to an element view or link view. They are useful when you want handles, buttons, or editing controls that live above the diagram surface instead of inside your React renderElement tree.
React is mainly used here to render the paper and wire the hover events with <Paper>'s onElementMouseEnter / onLinkMouseEnter props. The tools themselves come from @joint/core.
How tools work​
The pattern is the same for both element tools and link tools:
- create one or more built-in tools
- bundle them into
new dia.ToolsView({ tools: [...] }) - attach that tools view to the current cell view
- show or remove the tools in response to paper events
Create a fresh set of tools for each target view. Tool instances are reassigned when reused, so they should not be shared globally across multiple elements or links.
Element tools​
Hover either node below to see two built-in element tools: elementTools.Connect adds a handle you can drag out to start a new link, and elementTools.Remove adds a delete button. Browse the full catalog in the element tools API.
The tools are attached to the hovered elementView, not rendered inside the element UI itself. That is why they are created in the paper event handler instead of inside a node component.
Link tools​
Link tools follow the same pattern. The example below adds linkTools.Vertices so you can reshape the link and linkTools.Remove for a built-in delete action. See the link tools API for the complete list, including Segments, SourceAnchor, TargetAnchor, TargetArrowhead, and more.
Drag the vertex handle on the link to reshape it, or click the remove button to delete the link entirely.
jsx() for tool markup​
Most built-in tools work out of the box. Reach for jsx() when a built-in Button tool needs custom SVG. It converts JSX into the static markup format JointJS expects and keeps the tool definition readable.
The example below defines a custom linkTools.Button. Its markup is built with jsx(), and its action handler calls back into React state so the side panel updates every time the button is clicked.