Class Index | File Index

Classes

Class Joint


Defined in: joint.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
Joint(from, to, opts)
Method Summary
Method Attributes Method Name and Description
 
compact()
Returns compact object representation of joint.
 
disconnect(cap)
Disconnects joint from objects.
 
euid()
 
getVertices()
Get connection vertices.
 
hideHandle(cap)
Hide handle.
 
highlight(color)
Highlight connection.
 
isSmooth()
Find out whether the connection is smooth or not.
 
label(str)
Set a label of the connection.
<static>  
Joint.paper(p)
Set a paper for graphics rendering.
 
register(obj, cap)
Register object(s) so that it can be pointed by my cap.
 
registerCallback(evt, fnc)
Register callback function on various events.
 
registeredObjects()
 
registerForever(arr)
The difference between register and registerForever is that registerForever saves reference to an array passed as argument.
<static>  
Joint.resetPaper()
Clear paper, reset again.
 
setBBoxCorrection(corr, cap)
Set bounding box correction.
 
setVertices(vertices)
Set the vertices of the connection
 
showHandle(cap)
Show handle.
 
straighten()
Straighten the bent connection path.
 
stringify()
 
toggleHandle(cap)
Show/hide handle(s).
 
toggleSmoothing()
Toggle the connection smoothing (bezier/straight).
 
unhighlight()
Unhighlight connection.
 
unregister(obj, cap)
Cancel registration of an object.
Class Detail
Joint(from, to, opts) 
Joint({x: 10, y: 10}, {x: 300, y: 100}, {
 label: "my label",
 beSmooth: true,
 startArrow: {
   type: "basic",
   size: 7,
   attrs: {
     fill: "red",
     stroke: "blue"
   }
 },
 handle: {
   timeout: 4000,
   start: {
     radius: 6,
     attrs: {
       fill: "green",
       stroke: "black"
     }
   },
   end: {
     radius: 4,
     attrs: {
       fill: "red",
       stroke: "black"
     }
   }
 }
});
Parameters:
{RaphaelObject|Shape|object} from
Object/position where the connection starts.
{RaphaelObject|Shape|object} to
Object/position where the connection ends.
{object} opts Optional
opt Options
{object} opts.interactive Optional
Is the joint interactive? [default = true]
{object} opts.attrs Optional
Connection options (see Raphael possible parameters)
{string} opts.cursor Optional
Connection CSS cursor property
{boolean} opts.beSmooth Optional
Connection enable/disable smoothing
{string|array} opts.label Optional
Connection label(s)
{object|array} opts.labelAttrs Optional
Label(s) options (see Raphael possible parameters) + position attribute (<0, [0, 1], >1)
{object|array} opts.labelBoxAttrs Optional
SVG Attributes of the label(s) bounding rectangle + padding attribute
{object} opts.startArrow Optional
Start arrow options
{string} opts.startArrow.type Optional
"none"|"basic"
{number} opts.startArrow.size Optional
Start arrow size
{object} opts.startArrow.attrs Optional
Start Arrow options (see Raphael possible parameters)
{object} opts.endArrow Optional
End arrow options
{string} opts.endArrow.type Optional
"none"|"basic"
{number} opts.endArrow.size Optional
End arrow size
{object} opts.endArrow.attrs Optional
End Arrow options (see Raphael possible parameters)
{object} opts.dummy Optional
Dummy node options (shows when dragging arrows)
{object} opts.dummy.start Optional
Start dummy node options
{number} opts.dummy.start.radius Optional
Start dummy radius
{object} opts.dummy.start.attrs Optional
Start dummy options (see Raphael possible parameters)
{object} opts.dummy.end Optional
End dummy node options
{number} opts.dummy.end.radius Optional
End dummy radius
{object} opts.dummy.end.attrs Optional
End dummy options (see Raphael possible parameters)
{object} opts.handle Optional
Handle options
{number} opts.handle.timeout Optional
Number of milliseconds handle stays shown
{object} opts.handle.start Optional
Start handle options
{boolean} opts.handle.start.enabled Optional
Start handle enabled/disabled
{number} opts.handle.start.radius Optional
Start handle radius
{object} opts.handle.start.attrs Optional
Start handle attributes (see Raphael possible parameters)
{object} opts.handle.end Optional
End handle options
{boolean} opts.handle.end.enabled Optional
End handle enabled/disabled
{number} opts.handle.end.radius Optional
End handle radius
{object} opts.handle.end.attrs Optional
End handle attributes (see Raphael possible parameters)
{object} opts.bboxCorrection Optional
Correction of a bounding box (useful when, e.g., the connection should start in the center of an object)
{object} opts.bboxCorrection.start Optional
BBox correction of the start object.
{string} opts.bboxCorrection.start.type Optional
"ellipse"|"rect"
{number} opts.bboxCorrection.start.x Optional
Translation in the x-axis
{number} opts.bboxCorrection.start.y Optional
Translation in the y-axis
{number} opts.bboxCorrection.start.width Optional
BBox width
{number} opts.bboxCorrection.start.height Optional
BBox height
{object} opts.bboxCorrection.end Optional
BBox correction of the end object.
{string} opts.bboxCorrection.end.type Optional
"ellipse"|"rect"
{number} opts.bboxCorrection.end.x Optional
Translation in the x-axis
{number} opts.bboxCorrection.end.y Optional
Translation in the y-axis
{number} opts.bboxCorrection.end.width Optional
BBox width
{number} opts.bboxCorrection.end.height Optional
BBox height
Method Detail
{Object} compact()
Returns compact object representation of joint. Used for serialization.
Defined in: joint.dia.serializer.js.
Returns:
{Object} Compact representation of the joint.
{Joint} disconnect(cap)
Disconnects joint from objects.
Parameters:
{string} cap
"start|end|both" which side to disconnect
Returns:
{Joint} return this to allow chaining
{String} euid()
Returns:
{String} Joint unique identifier.
{array} getVertices()
Get connection vertices.
Returns:
{array} array of connection vertices
{Joint} hideHandle(cap)
Hide handle.
Parameters:
cap
Returns:
{Joint}
{Joint} highlight(color)
Highlight connection. Note that highlight diseappears after the first update.
Parameters:
color
Returns:
{Joint} Return this.
{boolean} isSmooth()
Find out whether the connection is smooth or not.
Returns:
{boolean} true if connection is smooth
{Joint} label(str)
Set a label of the connection.
Parameters:
{string|array} str
label(s)
Returns:
{Joint}
<static> {Raphael} Joint.paper(p)
Set a paper for graphics rendering. 
// create paper from existing HTMLElement with id "world" specifying width and height
Joint.paper("world", 640, 480);
// create paper specifying x, y position and width and height
Joint.paper(50, 50, 640, 480);
// paper is created from the HTMLElement with id "world"
Joint.paper(document.getElementById("world"));
// create paper using Raphael
Joint.paper(Raphael("world", 640, 480));
Parameters:
{Raphael|number|number|number|number|string|number|number|HTMLElement} p
Returns:
{Raphael} Paper.
{Joint} register(obj, cap)
Register object(s) so that it can be pointed by my cap. 
j.register(circle, "end")
Parameters:
{RaphaelObject|Shape|array} obj
{string} cap
"start|end|both" cap to register default: "both"
Returns:
{Joint}
{Joint} registerCallback(evt, fnc)
Register callback function on various events. 
j.registerCallback("justConnected", function(side){ ... this points to the object the joint was just connected to ... });
j.registerCallback("disconnected", function(side){ ... this points to the object the joint was just disconnected from ... });
j.registerCallback("justBroken", function(mousePos){ ... this points to the joint object ... });
j.registerCallback("wiring", function(mousePos){ ... this points to the joint object ... });
j.registerCallback("objectMoving", function(obj){ ... this points to the joint object ... });

j.registerCallback("justConnected", function(side){
  if (side === "start"){
    console.log("Start cap connected.");
  } else {  // side === "end"
    console.log("End cap connected");
  }
});
Parameters:
{string} evt
"justConnected"|"disconnected"|"justBroken"|"wiring"|"objectMoving"
fnc
Callback
Returns:
{Joint}
See:
Callbacks
{array} registeredObjects()
Returns:
{array} Registered Objects.
{Joint} registerForever(arr)
The difference between register and registerForever is that registerForever saves reference to an array passed as argument. It means that all objects pushed into the array before and/or after the call of this method will be registered (for both caps). This method is useful for applications that do not know to which objects the connection can be sticked when the joint is created. 
var all = [];
j.registerForever(all);
// ... create objects and push them into all array
Parameters:
{array} arr
An array holding objects which the joint is going to be registered to.
Returns:
{Joint}
<static> Joint.resetPaper()
Clear paper, reset again. 
// create paper from existing HTMLElement with id "world" specifying width and height
Joint.paper("world", 640, 480);
// ... draw objects, diagrams, etc. ...
Joint.resetPaper();
// paper is clear and ready for next usage
{Joint} setBBoxCorrection(corr, cap)
Set bounding box correction. This advanced feature of Joint library allows you to shift a point to which a connection sticks. You can for example modify a connection to point to the center of an object or you can set a distance between an object and a connection arrow. 
// 1.) both sides of the connection will point to the center of
//     a circular object with radius == 30
j.setBBoxCorrection({
  type: "ellipse",
  x: 30,
  y: 30,
  width: -60,
  height: -60
});

// 2.) keep 20px distance between connection's arrow
//     and a circular object
j.setBBoxCorrection({
  type: "ellipse",
  x: -20,
  y: -20,
  width: 40,
  height: 40
});
Parameters:
{object} corr Optional
correction Correction
{string} corr.type Optional
fake type of an object to which a cap points
{number} corr.x Optional
x-axis shift of an object bounding box
{number} corr.y Optional
y-axis shift of an object bounding box
{number} corr.width Optional
change in an object bounding box width (can be negative)
{number} corr.height Optional
change in an object bounding box height (can be negative)
{string} cap
"start|end"|undefined cap (undefined === both caps)
Returns:
{Joint}
{Joint} setVertices(vertices)
Set the vertices of the connection
Parameters:
{array} vertices
Array of points (vertices) - either of the form: {x: 5, y; 10} or "5 10" or "5@10"
Returns:
{Joint}
{Joint} showHandle(cap)
Show handle.
Parameters:
cap
Returns:
{Joint}
{Joint} straighten()
Straighten the bent connection path.
Returns:
{Joint}
{String} stringify()

Defined in: joint.dia.serializer.js.
Returns:
{String} JSON representation of joint.
{Joint} toggleHandle(cap)
Show/hide handle(s). If a connection arrow is, e.g., of type none, it is difficult to grab the end of the connection. For these cases, you can use handles, which are just simple circles showing at the end of a connection.
Parameters:
{string} cap
&optional [start|end] Specifies on what side handle should be shown.
Returns:
{Joint}
{Joint} toggleSmoothing()
Toggle the connection smoothing (bezier/straight).
Returns:
{Joint}
{Joint} unhighlight()
Unhighlight connection.
Returns:
{Joint} Return this.
{Joint} unregister(obj, cap)
Cancel registration of an object. 
j.unregister(circle, "end");
Parameters:
{RaphaelObject|Shape} obj
{string} cap
"start|end|both" cap to unregister default: "both"
Returns:
{Joint}
JointJS - JavaScript diagramming library, © David Durman, 2009 - 2011