Class Joint.dia.Element

Defined in: joint.dia.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	Joint.dia.Element() Abstract object of all diagram elements.

Method Summary
Method Attributes	Method Name and Description
	clone() Clone element.
	Element#addInner(s) Add a subelement.
	Element#delInner(s) Remove a subelement.
	Element#disconnect() Disconnects element from all joints.
	Element#draggable(enable) Enable/disable dragging of the element.
	Element#embed() Embed me into the first registered dia.Element whos bounding box contains my bounding box origin.
	Element#euid()
	Element#getBBox()
	Element#highlight() Highlights the element.
	Element#joint(to, opt)
	Element#liquidate() Remove element and all joints pointing from and to this element.
	Element#remove() Remove element.
	Element#scale(sx, &optional) Scale element.
	Element#setWrapper(s) Add wrapper.
	Element#toBack() Sends the wrapper and all inners to the back.
	Element#toFront() Sends the wrapper and all inners to the front.
	Element#toggleGhosting() Toggle ghosting of the element.
	Element#translate(dx, dy) Move the element by offsets.
	Element#unembed() Decouple embedded element from its parent.
	Element#unhighlight() Unhighlights the element.
	Element#zoom(sx, &optional) This method should be overriden by inherited elements to implement the desired scaling behaviour.
	stringify()

Class Detail

Joint.dia.Element()

Abstract object of all diagram elements. This object is never used directly, instead, specific diagram elements inherits from it. Allows easy creation of new specific diagram elements preserving all features that Joint library and Joint.dia plugin offer.

Wrapper

All custom elements must have a wrapper set. Wrapper is the key object that Joint library counts with. There cannot be any element without a wrapper. Usually it is an object which wraps all the subelements that a specific diagram element contains. The wrapper must be set in init method. To set a wrapper, use setWrapper(aWrapper) method. The single parameter to the method is a Raphaël vector object. Later on, you can access this object using wrapper property.

Inner

Inner objects are subelements of an element. Although they are optional, they are commonly used. To add a subelement to the element, use addInner(anInner) method. It takes a Raphaël vector object as an argument. All inner objects are placed to an array that you can access using inner property.

init method

The init method has to be part of every element you create. It takes all element options as an argument, sets wrapper and adds inners.

joint method

If you have specific elements, in which connections are not controlled by wrapper, you can implement your own joint method.

zoom method

As Joint.dia library does not know how your specific element should behave after scaling, you can use zoom method to implement the desired behaviour.

var mydia = Joint.dia.mydia = {};
var Element = Joint.dia.Element;

mydia.MyElement = Element.extend({
  // init method must be always presented
  init: function(properties){
    var p = this.properties;
    // parameters processing
    p.position = properties.position;
    p.radius = properties.radius || 30;
    // every element must have a wrapper
    this.setWrapper(this.paper.circle(p.position.x, p.position.y, p.radius));
    // optional inner elements
    this.addInner(this.paper.text(p.position.x, p.position.y, "my element"));
  }
});

// ...

var e = mydia.MyElement.create({
  position: {x: 50, y: 50},
  radius: 20
});

Method Detail

{Element} clone()

Clone element.
Defined in: joint.dia.serializer.js.

Returns:: {Element} Cloned element.

{Element} Element#addInner(s)

Add a subelement.

Parameters:
{Element} s: The subelement to be added.

Returns:: {Element} this

{Element} Element#delInner(s)

Remove a subelement.

Parameters:
{Element} s: The subelement to be removed.

Returns:: {Element} this

Element#disconnect()

Disconnects element from all joints. Empties the element joints array. Note that it preserves registration of the element in its joints.

{Element} Element#draggable(enable)

Enable/disable dragging of the element.

Parameters:
{boolean} enable: True/false.

Returns:: {Element} Return this.

{Element} Element#embed()

Embed me into the first registered dia.Element whos bounding box contains my bounding box origin. Both elements will behave as a whole.

Returns:: {Element}

Element#euid()

Returns:: Element unique id.

{Object} Element#getBBox()

Returns:: {Object} Bounding box of the element.

{Element} Element#highlight()

Highlights the element. Override in inherited objects or @todo set in options.

Returns:: {Element} Return this.

Element#joint(to, opt)

Parameters:
to
opt

See:: Joint

{null} Element#liquidate()

Remove element and all joints pointing from and to this element.

Returns:: {null}

{null} Element#remove()

Remove element.

Returns:: {null}

Element#scale(sx, &optional)

Scale element.

e.scale(1.5);

Parameters:
{Number} sx: Scale in x-axis.
{Number} &optional: sy Scale in y-axis.

Element#setWrapper(s)

Add wrapper.

Parameters:
{RaphaelObject} s: Vector object specifying a wrapper.

{Element} Element#toBack()

Sends the wrapper and all inners to the back.

Returns:: {Element}

{Element} Element#toFront()

Sends the wrapper and all inners to the front.

Returns:: {Element}

{Element} Element#toggleGhosting()

Toggle ghosting of the element. Dragging a diagram object causes moving of the wrapper and all inners, and update of all correspondent connections. It can be sometimes expensive. If your elements are complex and you want to prevent all this rendering and computations, you can enable ghosting. It means that only a ghost of your wrapper will be dragged.

Returns:: {Element}

Element#translate(dx, dy)

Move the element by offsets.

Parameters:
{Number} dx: Offset in x-axis.
{Number} dy: Offset in y-axis.

{Element} Element#unembed()

Decouple embedded element from its parent.

Returns:: {Element}

{Element} Element#unhighlight()

Unhighlights the element.

Returns:: {Element} Return this.

Element#zoom(sx, &optional)

This method should be overriden by inherited elements to implement the desired scaling behaviour.

Parameters:
{Number} sx: Scale in x-axis.
{Number} &optional: sy Scale in y-axis.

stringify()

Defined in: joint.dia.serializer.js.