Record

A shape that displays structured/hierarchical data.

If you are extending the behavior of Record shapes, and creating custom element definitions, it's necessary to use the RecordView.

SVG selectors

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container of all nodes
itemBodies	group of SVGRectElements	All item bodies across all columns. The node(s) can have a custom attribute `itemHighlight`.
itemBodies_[group_index] itemBodies_[group_name]	group of SVGRectElements	Item bodies in the given group (column). For example, item bodies in the first column are accessed as `itemBodies_0`. Alternatively, item bodies in a group named `headers` are accessed as `itemBodies_headers`. The node(s) can have a custom attribute `itemHighlight`.
itemBody_[item_id]	SVGRectElement	Body of the given item. For example, item body for an item with id `my_item` is accessed as `itemBody_my_item`. The node can have a custom attribute `itemHighlight`.
itemLabels	group of SVGTextElements	All item labels across all columns. The node(s) can have custom attributes `itemHighlight` and `itemText`.
itemLabels_[group_index] itemLabels_[group_name]	group of SVGTextElements	Item labels in the given group (column). For example, item labels in the first column are accessed as `itemLabels_0`. Alternatively, item labels in a group named `headers` are accessed as `itemLabels_headers`. The node(s) can have custom attributes `itemHighlight` and `itemText`.
itemLabel_[item_id]	SVGTextElement	Label of the given item. For example, item label for an item with id `my_item` is accessed as `itemLabel_my_item`. The node can have custom attributes `itemHighlight` and `itemText`.
itemIcons	group of SVGImageElements	All item icons across all columns
itemIcons_[group_index] itemIcons_[group_name]	group of SVGImageElements	Item icons in the given group (column). For example, item icons in the first column are accessed as `itemIcons_0`. _Alternatively, item icons in a group named `alerts` are accessed as `itemIcons_alerts`.
itemIcon_[item_id]	SVGImageElement	Icon of the given item. For example, item icon for an item with id `my_item` is accessed as `itemIcon_my_item`.
bodiesGroups	group of SVGGElements	All groups of item bodies
labelsGroups	group of SVGGElements	All groups of item labels
forksGroups	group of SVGGElements	All groups of hierarchy fork lines
buttonsGroups	group of SVGGElements	All groups of collapse buttons
iconsGroups	group of SVGGElements	All groups of item icons

const record = new shapes.standard.Record();
record.resize(150, 100);
record.position(25, 610);
record.attr('root/magnet', false);
record.attr('buttonsGroups/stroke', 'black');
record.attr('forksGroups/stroke', 'lightgray');
record.attr('itemBodies/stroke', 'black');
record.attr('itemBodies_0/fill', '#feb663');
record.attr('itemLabels', { fontSize: 12, fontFamily: 'sans-serif' });
record.attr('itemLabels_1/magnet', true);
record.addTo(graph);

Custom presentation attributes:

Attribute Selectors Description

itemHighlight itemBodies
itemBodies_[group_index]
itemBodies_[group_name]
itemBody_[item_id]
itemLabels
itemLabels_[group_index]
itemLabels_[group_name]
itemLabel_[item_id] Object with SVG attributes. Applied on the selected node(s) when the item is highlighted.

itemText

itemLabels
itemLabels_[group_index]
itemLabels_[group_name]
itemLabel_[item_id]

An object with three properties that modify the behavior of the selected SVGTextNode(s):

Property	Type	Description
textWrap	boolean	Enable text wrapping of item label (`true` by default)
ellipsis	boolean \| string	Enable label ellipsis (`true` by default)
maxLineCount	number	A number to limit the maximum number of lines.

const record = new shapes.standard.Record();
record.attr('itemBodies/itemHighlight', { fill: 'lightgray', stroke: 'gray' });
record.attr('itemLabels/itemHighlight', { fill: 'orange' });
if (record.isItemHighlighted('my_item_id') === false) {
    // `my_item_id` item' background switches to gray and label to orange.
    record.toggleItemHighlight('my_item_id');
}
record.attr('itemLabels/itemText', { textWrap: true, ellipsis: '*' });

Model attributes

items

const items: Record.Item[][] = record.get('items');

Items in the Record. Index in outer array specifies the column, index in inner array specifies the order within the column. Each item may have several optional properties.

itemHeight

const itemHeight: number = record.get('itemHeight');

Height of all items.

itemOffset

const itemOffset: number = record.get('itemOffset');

Offset of nested items from parent item.

itemMinLabelWidth

const itemMinLabelWidth: number = record.get('itemMinLabelWidth');

Ensure minimum width of item labels.

itemButtonSize

const itemButtonSize: number = record.get('itemButtonSize');

Size of collapse buttons.

itemIcon

const itemIcon: Record.ItemIcon = record.get('itemIcon');

May specify width, height, and padding of item icons.

itemOverflow

const itemOverflow: boolean = record.get('itemOverflow');

Should item cells be stretched horizontally when model is widened? i.e. Make items overlap the left and right padding.

itemAboveViewSelector

const itemAboveViewSelector: string = record.get('itemAboveViewSelector');

If an item is not in view (it's scrolled out above the record) into which SVGElement (determined by selector) should the links be visually reconnected.

itemBelowViewSelector

const itemBelowViewSelector: string = record.get('itemBelowViewSelector');

If an item is not in view (it's scrolled out below the record) into which SVGElement (determined by selector) should the links be visually reconnected.

padding

const padding: dia.Padding = record.get('padding');

Padding within the Record object.

scrollTop

const scrollTop: number | null = record.get('scrollTop');

The number of pixels that a record's content (without the padding) is scrolled vertically. A record's scrollTop value is a measurement of the distance from the content's top to its topmost visible content.

To enable scrolling set the value to a number. If the value is null (default), the record is automatically resized to the minimal size effectively preventing the need for scrolling.

new Record({ scrollTop: 0 });

Methods

addItemAtIndex()

record.addItemAtIndex(id: Record.ItemId | Record.GroupId, index: number, item: Record.Item, opt?: dia.Cell.Options): Record

Insert the provided item into the Record as a child of parent with id (string) at given index.

addNextSibling()

record.addNextSibling(siblingId: Record.ItemId, item: Record.Item, opt?: dia.Cell.Options): Record;

Insert the provided item into the Record after the item identified by siblingId.

addPrevSibling()

record.addPrevSibling(siblingId: Record.ItemId, item: Record.Item, opt?: dia.Cell.Options): this;

Insert the provided item into the Record before the item identified by siblingId.

getItemGroupIndex()

record.getItemGroupIndex(itemId: Record.ItemId): number | null;

Return the group (column) index of the item with the provided itemId. Return null if the item does not exist.

getItemParentId()

record.getItemParentId(itemId: Record.ItemId): Record.ItemId | null;

Return the itemId of the parent of the item with the provided itemId. Return null if the item does not exist.

getItemPathArray()

record.getItemPathArray(itemId: Record.ItemId): string[] | null;

Return the path to the item with the provided itemId, as an array of strings. Return null if the item does not exist.

getItemSide()

record.getItemSide(itemId: Record.ItemId): Record.ItemSide | null;

Return the side on which lies the item with the provided itemId.

Return 'left' if the item lies within the leftmost column of the Record. Return 'right' if the item lies within the rightmost column of the Record. Return 'middle' if the item does not touch either side of the Record - or if there is only one column. Return null if the item does not exist.

getPadding()

record.getPadding(): dia.SidesJSON;

Return the normalized padding in the form of { top: number, right: number, bottom: number, left: number }.

getMinimalSize()

record.getMinimalSize(): dia.Size;

Return the width and height of the minimal bounding box necessary to encompass all of the shape's content.

isItemCollapsed()

record.isItemCollapsed(itemId: Record.ItemId): boolean | null;

Return true if the item is collapsed. Return null if the item does not exist.

isItemHighlighted()

record.isItemHighlighted(itemId: Record.ItemId): boolean | null;

Return true if the item is highlighted. Return null if the item does not exist.

isItemVisible()

record.isItemVisible(itemId: Record.ItemId): boolean | null;

Return true if the item is visible (i.e. it is not a child of a collapsed item). Return null if the item does not exist.

item()

record.item(itemId: Record.ItemId, value?: Record.Item, opt?: dia.Cell.Options): this;

Return the item with the provided itemId. Return null if the item does not exist.

If the value is provided add/merge the provided item properties into the Record for the given itemId.

removeItem()

record.removeItem(itemId: Record.ItemId): this;

Remove the item with the provided itemId and all its children. Return the removed item, or null if the item does not exist.

toggleItemCollapse()

record.toggleItemCollapse(itemId: Record.ItemId, opt?: dia.Cell.Options): this;

Collapse/expand the item with the provided itemId.

toggleItemHighlight()

record.toggleItemHighlight(itemId: Record.ItemId, opt?: dia.Cell.Options): this;

Highlight/unhighlight the item with the provided itemId.

getItemBBox()

record.getItemBBox(itemId: Record.ItemId): g.Rect | null;

Return the bounding box of the item in the element's coordinate system. Returns null if no item with such an id exists.

getItemViewSign()

record.getItemViewSign(itemId: Record.ItemId): number;

For the item with the provided itemId, the method is taking the current scrollTop value into account and

return 0 if the item is visible in view.
return -1 if the item is scrolled out above the view.
return 1 if the item is scrolled out below the view.

The method throws an error if the item is hidden within a collapsed ancestor.

isItemInView()

record.isItemInView(itemId: Record.ItemId): boolean;

Is the item with the provided itemId visible in view and not scrolled out?

The method throws an error if the item is hidden within a collapsed ancestor.

isEveryItemInView()

record.isEveryItemInView(): boolean;

Are all the items visible in view?

getScrollTop()

record.getScrollTop(): number | null;

Return the normalized value of model's scrollTop property. It is the current number of pixels the record's content is scrolled vertically.

setScrollTop()

record.setScrollTop(scrollTop: number | null, opt?: dia.Cell.Options): void;

Normalize and set the scrollTop property of the model.

Types

Record shape provides several types for your convenience.

GroupId

type GroupId = number;

Item

A structure representing a single record item.

interface Item {
    id?: ItemId;
    label?: string;
    icon?: string;
    collapsed?: boolean;
    height?: number;
    span?: number;
    highlighted?: boolean;
    group?: string | string[];
    items?: Item[];
}

ItemIcon

A structure representing an icon of an item.

interface ItemIcon {
    width?: number;
    height?: number;
    padding?: number;
}

ItemId

type ItemId = string;

ItemSide

type ItemSide = 'left' | 'middle' | 'right';

RecordView

The view for standard.Record. It inherits from dia.ElementView. If you are extending the behavior of Record shapes, and creating custom element definitions, it's necessary to use the RecordView. The RecordView is responsible for interactivity among other things, so it ensures your custom Record behaves as expected.

import { shapes } from '@joint/plus';

class CustomRecord extends shapes.standard.HeaderedRecord {
    /* code of extended shape with type 'customNamespace.CustomRecord' */
}

const CustomRecordView = shapes.standard.RecordView;

// example of a namespace
const namespace = {
    ...shapes,
    customNamespace: {
        CustomRecord,
        CustomRecordView
    }
};

SVG selectors​

Model attributes​

items​

itemHeight​

itemOffset​

itemMinLabelWidth​

itemButtonSize​

itemIcon​

itemOverflow​

itemAboveViewSelector​

itemBelowViewSelector​

padding​

scrollTop​

Methods​

addItemAtIndex()​

addNextSibling()​

addPrevSibling()​

getItemGroupIndex()​

getItemParentId()​

getItemPathArray()​

getItemSide()​

getPadding()​

getMinimalSize()​

isItemCollapsed()​

isItemHighlighted()​

isItemVisible()​

item()​

removeItem()​

toggleItemCollapse()​

toggleItemHighlight()​

getItemBBox()​

getItemViewSign()​

isItemInView()​

isEveryItemInView()​

getScrollTop()​

setScrollTop()​

Types​

GroupId​

Item​

ItemIcon​

ItemId​

ItemSide​

RecordView​

Stay in the know