JointJS+ standard

The Standard shapes plugin provides extra shapes with advanced functionality to extend the JointJS Standard shapes library. The shapes can be used as they are or can serve as an inspiration for creating custom shapes.

source code

An object that displays structured/hierarchical data. Inherits from joint.standard.Record shape and adds a background body rectangle.

Additional attrs properties

To adjust the appearance of a BorderedRecord element, use the Element.attr function:

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

Custom presentation attributes:

All custom presentation attributes are inherited from the joint.standard.Record shape.

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

Configuration properties

All configuration properties are inherited from the joint.standard.Record shape. They are set during shape definition with the Cell.define function, or anytime later with the Cell.set function:

borderedRecord.set('itemHeight', 25);
borderedRecord.set('padding', { top: 10, right: 20, bottom: 5, left: 10 });
borderedRecord.set('items', [
    [{ id: 'value1', label: 'Hello' }]
]);
borderedRecord.set('items', [
    [{ id: 'value1', label: 'Hello', items: [
        { id: 'value2', label: 'World!' }]
    }]
]);

Functions

All methods are inherited from the joint.standard.Record shape.

An object that displays structured/hierarchical data. Inherits from joint.standard.Record shape and adds a background body rectangle, as well as a header rectangle and headerLabel text label.

Additional attrs properties

To adjust the appearance of a HeaderedRecord element, use the Element.attr function:

var headeredRecord = new joint.shapes.standard.HeaderedRecord();
headeredRecord.resize(150, 100);
headeredRecord.position(25, 610);
headeredRecord.attr('root/magnet', false);
headeredRecord.attr('body', { fill: 'white', strokeWidth: 2 });
headeredRecord.attr('header', { fill: 'cornflowerblue', strokeWidth: 2 });
headeredRecord.attr('headerLabel', { fontSize: 24, fontFamily: 'serif' });
headeredRecord.attr('buttonsGroups/stroke', 'black');
headeredRecord.attr('forksGroups/stroke', 'lightgray');
headeredRecord.attr('itemBodies/stroke', 'black');
headeredRecord.attr('itemBodies_0/fill', '#feb663');
headeredRecord.attr('itemLabels', { fontSize: 12, fontFamily: 'sans-serif' });
headeredRecord.attr('itemLabels_1/magnet', true);
headeredRecord.addTo(graph);

Custom presentation attributes:

All custom presentation attributes are inherited from the joint.standard.Record shape.

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

Configuration properties

All configuration properties are inherited from the joint.standard.Record shape. They are set during shape definition with the Cell.define function, or anytime later with the Cell.set function:

headeredRecord.set('itemHeight', 25);
headeredRecord.set('padding', { top: 10, right: 20, bottom: 5, left: 10 });
headeredRecord.set('items', [
    [{ id: 'value1', label: 'Hello' }]
]);
headeredRecord.set('items', [
    [{ id: 'value1', label: 'Hello', items: [
        { id: 'value2', label: 'World!' }]
    }]
]);

Functions

All methods are inherited from the joint.standard.Record shape.

An object that displays structured/hierarchical data.

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

Supported attrs properties

To adjust the appearance of a Record element, use the Element.attr function:

var record = new joint.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:

var record = new joint.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: '*' });

Configuration properties

new Record({ scrollTop: 0 });

Configuration properties are set during shape definition with the Cell.define function, or anytime later with the Cell.set function:

record.set('itemHeight', 25);
record.set('padding', { top: 10, right: 20, bottom: 5, left: 10 });
record.set('items', [
    [{ id: 'value1', label: 'Hello' }]
]);
record.set('items', [
    [{ id: 'value1', label: 'Hello', items: [
        { id: 'value2', label: 'World!' }]
    }]
]);

Functions

The Record shape exposes several functions that enable working with the embedded hierarchical data (items):

shapes.standard.Record.prototype.addItemAtIndex

record.addItemAtIndex(parentId, index, item [, opt])

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

record.addItemAtIndex(groupIndex, index, item [, opt])

Insert the provided item into the group (column) with provided groupIndex (number) at given index.

shapes.standard.Record.prototype.addNextSibling

record.addNextSibling(siblingId, item [, opt])

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

shapes.standard.Record.prototype.addPrevSibling

record.addPrevSibling(siblingId, item [, opt])

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

shapes.standard.Record.prototype.getItemGroupIndex

record.getItemGroupIndex(itemId)

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

shapes.standard.Record.prototype.getItemParentId

record.getItemParentId(itemId)

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

shapes.standard.Record.prototype.getItemPathArray

record.getItemPathArray(itemId)

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

shapes.standard.Record.prototype.getItemSide

record.getItemSide(itemId)

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.

shapes.standard.Record.prototype.getPadding

record.getPadding()

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

shapes.standard.Record.prototype.getMinimalSize

record.getMinimalSize()

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

shapes.standard.Record.prototype.isItemCollapsed

record.isItemCollapsed(itemId)

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

shapes.standard.Record.prototype.isItemHighlighted

record.isItemHighlighted(itemId)

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

shapes.standard.Record.prototype.isItemVisible

record.isItemVisible(itemId)

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.

shapes.standard.Record.prototype.item

record.item(itemId)

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

record.item(itemId, item [, opt])

Add/merge the provided item properties into the Record for the given itemId.

shapes.standard.Record.prototype.removeItem

record.removeItem(itemId)

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

shapes.standard.Record.prototype.toggleItemCollapse

record.toggleItemCollapse(itemId [, opt])

Collapse/expand the item with the provided itemId.

shapes.standard.Record.prototype.toggleItemHighlight

record.toggleItemHighlight(itemId [, opt])

Highlight/unhighlight the item with the provided itemId.

shapes.standard.Record.prototype.getItemBBox

record.getItemBBox(itemId)

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

shapes.standard.Record.prototype.getItemViewSign

record.getItemViewSign(itemId)

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.

shapes.standard.Record.prototype.isItemInView

record.isItemInView(itemId)

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.

shapes.standard.Record.prototype.isEveryItemInView

record.isEveryItemInView()

Are all the items visible in view?

shapes.standard.Record.prototype.getScrollTop

record.getScrollTop()

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

shapes.standard.Record.prototype.setScrollTop

record.setScrollTop(number, [opt])

Normalize and set the scrollTop property of the model.

The view for shapes.standard.Record. It inherits from joint.dia.ElementView. If you are extending the behaviour 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.

class CustomRecord extends shapes.standard.HeaderedRecord {
    defaults() {
        return util.defaultsDeep({
            type: 'customNamespace.CustomRecord',
            attrs: {
                // attributes
            }
        }, super.defaults);
    }

    preinitialize() {
        this.markup = util.svg/* xml */ `
            // markup
        `;
    }
}

const CustomRecordView = shapes.standard.RecordView;

Object.assign(shapes, {
    customNamespace: {
        CustomRecord,
        CustomRecordView
    }
});