ElementModel

The element class @joint/react registers and uses by default for every element you add to the graph. Its markup carries a dedicated <g> group (the '__portal__' selector) where your RenderElement output is mounted, so React content renders beneath the element's ports and highlighters. Extend it to customize the markup or default attributes, or supply any dia.Element subclass that implements PortalHostCell to host React content yourself.

Example

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

const element = new ElementModel({
  id: '1',
  position: { x: 10, y: 20 },
  size: { width: 100, height: 50 },
});

Extends

• Element<Attributes>

Type Parameters

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

Implements

• PortalHostCell

Constructors

Constructor

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

Parameters

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

Returns

ElementModel<Attributes>

Methods

defaults()

defaults(): Attributes;

Default attributes applied to every ElementModel: the 'element' type, a 0x0 size, and an empty data object.

Returns

Attributes

The default attributes.

Properties

markup

markup: MarkupJSON;

Markup with a single <g> group ('__portal__') that hosts the React portal. JointJS appends ports and highlighters after this group, so they paint on top of your React content.

portalSelector

portalSelector: string = PORTAL_SELECTOR;

Selector of the node in this cell's view where @joint/react mounts your RenderElement content, the '__portal__' <g> group.