ElementView

The view for the joint.dia.Element model. It inherits from joint.dia.CellView and is responsible for:

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

To find the view associated with a specific element (model), use the findViewByModel method of the paper.

var elementView = paper.findViewByModel(element);

Methods

addTools()

elementView.addTools(toolsView)

Add the provided toolsView (of the joint.dia.ToolsView type) to the element view.

Adding a tools view to an element view is the last (third) step in the process of setting up element tools on an element view:

// 1) creating element tools
var boundaryTool = new joint.elementTools.Boundary();
var removeButton = new joint.elementTools.Remove();

// 2) creating a tools view
var toolsView = new joint.dia.ToolsView({
    name: 'basic-tools',
    tools: [boundaryTool, removeButton]
});

// 3) attaching to an element view
var elementView = element.findView(paper);
elementView.addTools(toolsView);

Every element view we want to attach to requires its own tools view object (ToolsView objects are automatically reassigned to the last element view they are added to). Similarly, every tools view we create requires its own set of tools (ToolView objects are automatically reassigned to the last toolsView.tools array they were made part of).

The element tools are added in the visible state. Use the elementView.hideTools function if this behavior is not desirable (e.g. if you want the element tools to appear in response to user interaction). Example:

elementView.addTools(toolsView);
elementView.hideTools();

paper.on('element:mouseenter', function(elementView) {
    elementView.showTools();
});

paper.on('element:mouseleave', function(elementView) {
    elementView.hideTools();
});

findPortNode()

elementView.findPortNode(portId)

Return the port DOM node of this ElementView that is identified by portId (i.e. an SVGElement within this.el which has 'port': portId, an SVGElement referenced by portRoot selector).

If the ElementView does not have a port identified by portId, return null.

elementView.findPortNode(portId, selector)

Return an SVGElement referenced by selector of the port identified by portId. If there is no port with portId or no SVGElement|HTMLElement was found by the selector, null is returned.

The available selectors are defined by the markup attribute of the port from which the port was built.

findPortNodes()

elementView.findPortNodes(portId, groupSelector)

Return an array of SVGElement|HTMLElement referenced by groupSelector of the port identified by portId. If there is no port with portId or no SVGElement|HTMLElement was found by the groupSelector, an empty array is returned.

The available groupSelectors are defined by the markup attribute of the port from which the port was built.

getBBox()

elementView.getBBox([opt])

Return a bounding box of the element view.

If opt.useModelGeometry option is set to true, the resulting bounding box is calculated based on the dimensions of the element model. (This means that SVG sub elements sticking out of the element are excluded.) This behavior is similar to the element.getBBox function – but the elementView function transforms the bounding box to match joint.dia.Paper translation and scaling.

getNodeBBox()

elementView.getNodeBBox(magnet)

Return the bounding box of the SVGElement provided as magnet (element/subelement/port of this element view).

Use the paper.localToPaperRect function to transform the returned bounding box to match the paper's translation and scaling.

getNodeUnrotatedBBox()

elementView.getNodeUnrotatedBBox(magnet)

Return the unrotated bounding box of the SVGElement provided as magnet (element/subelement/port of this element view).

Use the paper.localToPaperRect function to transform the returned bounding box to match the paper's translation and scaling.

hasTools()

elementView.hasTools()

Return true if this element view has a tools view attached.

elementView.hasTools(name)

Return true if this element view has a tools view of the provided name attached.

hideTools()

elementView.hideTools()

Hide all tools attached to this element view.

removeTools()

elementView.removeTools()

Remove the tools view attached to this element view.

showTools()

elementView.showTools()

Show all tools attached to this element view.