CellView

The view for the joint.dia.Cell model. It inherits from mvc.View and is responsible for:

• Rendering a cell inside of a paper
• Handling the cell's pointer events
• Provides various methods for working with the cell (visually)

To find the view associated with a specific cell (model), use the findViewByModel method of the paper. For example:

var cellView = paper.findViewByModel(cell);

Methods

findAttribute()

cellView.findAttribute(attribute, node)

Return the value of the specified attribute of node.

If node does not set a value for attribute, start recursing up the DOM tree from node to look for attribute at the ancestors of node. If the recursion reaches CellView's own node and attribute is not found even there, return null.

findNode()

cellView.findNode(selector)

The method returns a DOM node matching the selector.

The method searches for matching sub-element among the descendants of this.el. If no such sub-element is found, null is returned.

The available selectors are defined by the markup attribute of the Cell model from which the CellView was initialized.

findNodes()

cellView.findNodes(groupSelector)

The method returns an array of DOM nodes matching the groupSelector.

The method searches for matching sub-elements among the descendants of this.el. If no such sub-elements are found, an empty array is returned.

The available groupSelectors are defined by the markup attribute of the Cell model from which the CellView was initialized.

highlight()

cellView.highlight([el[, options]])

Add a highlighter to the cell view.

When the method is called, the cell:highlight paper event is triggered.

For greater flexibility use highlighters API instead.

Arguments:

• el - if not provided, then the cell view's el will be used
• options:
  • highlighter:
    • name - the name of the highlighter (see highlighters)
    • options - an options object that will be passed directly to the highlighter specified by name
  • type - the type of highlighting

isDefaultInteractionPrevented()

cellView.isDefaultInteractionPrevented(event)

Returns whether preventDefaultInteraction was ever called on this event object.

preventDefaultInteraction()

cellView.preventDefaultInteraction(event)

The method tells the view that its default interactivity action should not be taken as it normally would be.

For example, if the view is a joint.dia.ElementView and the user clicks on it, the view will normally enter the interactive mode and starts moving the element.

Calling preventDefaultInteraction will prevent the view from entering the interactive mode. The view will still trigger all events, but it will not react to them in the default way.

It is useful when you want to handle the pointer events yourself. For example, you can use it to implement your own custom interaction with the view. A selection lasso can be drawn whenever the user holds down the shift key and starts dragging from any point on the paper (regardless of whether it is an element, a link or a blank space).

paper.on('element:pointerdown', (elementView, evt) => {
    if (evt.shiftKey) {
        // prevent element movement
        elementView.preventDefaultInteraction(evt);
        // start drawing selection lasso
    }
});

The following table shows which default interaction will be stopped depending on what point the method was called.

Paper events	Description	Paper interactive option
'element:pointerdown'	Prevents element movement.	elementMove
'element:magnet:pointerdown'	Prevents adding link from magnet and element movement.	addLinkFromMagnet
'link:pointerdown'	Prevents link label and link movement.	labelMove and linkMove

unhighlight()

cellView.unhighlight([el[, options]])

Removes a highlighter added to the cell view.

When the method is called, the cell:unhighlight paper event is triggered.

It is important to note that if you highlighted a cell using custom options, you must provide those exact same options when using the unhighlight method.

To avoid this and for greater flexibility use highlighters API instead.