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])

Returns the bounding box of the element view.

When the opt.useModelGeometry option is set to true, the bounding box is calculated based on the dimensions of the element's model, excluding any SVG sub-elements that extend beyond it (e.g a port).

This is similar to the element.getBBox(); however, the elementView function applies transformations to the bounding box to account for dia.Paper translation and scaling. Return a bounding box of the element view.

getNodeBBox()

elementView.getNodeBBox(node)

Return the bounding box of the SVGElement provided as node (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(node)

Return the unrotated bounding box of the SVGElement provided as node (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.

getTargetParentView()

elementView.getTargetParentView(evt: dia.Event): dia.CellView | null;

The method returns a cell view (if any) that would become the parent of the currently dragged element view if the dragging were to finish immediately.

paper.on('element:pointermove', (elementView, evt) => {
    console.log(elementView.getTargetParentView(evt));
});

note

This view would be highlighted as a potential parent of the dragged element view as defined by highlighting.embedding option.

It can also be used while the user is dragging an element from the stencil to the paper:

stencil.on('element:drag', (cloneView, evt) => {
    console.log(cloneView.getTargetParentView(evt));
});

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.