LinkModel

The link class @joint/react registers and uses by default for every link you add to the graph. Its markup has two paths, a wide transparent wrapper that widens the pointer hit area and the visible line, and it mounts the experimental RenderLink output into the link's root <g>. Extend it to customize the markup or default attributes, or supply any dia.Link subclass that implements PortalHostCell to host React content yourself.

Example

import { LinkModel } from '@joint/react';

const link = new LinkModel({
  id: 'link-1',
  source: { id: '1' },
  target: { id: '2' },
});

Extends

• Link<Attributes>

Type Parameters

Type Parameter	Default type
Attributes extends dia.Link.Attributes	dia.Link.Attributes

Implements

• PortalHostCell

Constructors

Constructor

new LinkModel<Attributes>(attributes?, opt?): LinkModel<Attributes>;

Parameters

Parameter	Type
attributes?	_DeepPartial<_DeepRequired<Attributes>>
opt?	ConstructorOptions

Returns

LinkModel<Attributes>

Methods

defaults()

defaults(): Attributes;

Default attributes for every LinkModel: the 'link' type, the default link styling, and an empty data object. The styling sets connection: true on the line/wrapper paths, which JointJS needs to compute the link path.

Returns

Attributes

The default attributes.

Properties

markup

markup: MarkupJSON;

Markup with two paths: a wide, transparent wrapper that widens the pointer hit area, and the visible line. React content (if any) mounts into the link's root <g> via RenderLink.

portalSelector

portalSelector: string = 'root';

Selector of the node in this cell's view where @joint/react mounts React content, the link's root <g> ('root'). The markup keeps no dedicated portal group so React-less links stay lean; the experimental RenderLink mounts here when enabled.