A hidden gold of JointJS, the geometry library

September 12th, 2013

The JointJS diagramming library contains a not-yet-documented standalone pure JavaScript mini library that implements many useful geometry operations. This post shows all the primitives that the geometry library exposes. The geometry library does not have any dependencies, is AMD complient and can be used outside of JointJS. The source code of the library can be found on Github.

It's important to note that many of the methods of the geometry library are inspired by their Squeak Smalltalk implementations.

List of primitives

This is the complete list of primitives that the geometry library exposes:

Point

Methods of the point primitve are:

Methods of the point constructor:

Examples


var p1 = point(20, 50);
var p2 = point('150 200');
p1.distance(p2);
p1.theta(p2);
p1.normalize(2);
console.log(p1 + ''); // prints 20@50

Line

Methods of the line primitive are:

Examples


var l1 = line(point(20, 50), point(150, 200));
var l2 = line(point(320, 150), point(20, 20));
l1.length();
l1.intersection(l2);
l1.midpoint();
console.log(l1 + ''); // prints 20@50 150@200

Rectangle

Methods of the rect primitive are:

Examples


var r1 = rect(20, 50, 200, 100);  // x, y, width, height
var r2 = rect(80, 70, 300, 200);
r1.origin();
r1.intersect(r2); // true
console.log(r1 + ''); // prints 20@50 220@150

Ellipse

Methods of the ellipse primitive are:

Examples


var e1 = ellipse(point(100, 50), 50, 80);  // center, a, b
e1.bbox();
console.log(e1 + ''); // prints 100@50 50 80

Bezier

Methods of the bezier primitive are:

Other exported methods of the module

The geometry module (in AMD environment terms) or the g global variable (without AMD), contains these additional methods:

Conclusion

The geometry library of JointJS is a handy tool for applications that deal with geometry primitives. As this library does not have any dependencies and is implemented purely in JavaScript without using the browser DOM, it can run even on the server (e.g. in NodeJS).

Discussion



comments powered by Disqus