tmap.js
A javascript API to easily display TMAPs
Dev notes
npm install
Assuming you don't have browserify and uglifyjs installed yet, run
npm install -g browserify uglify-js
To test the module in a browser:
browserify index.js --standalone TMAP -o dist/tmap.js
Minify using uglify-js:
uglifyjs dist/tmap.js -o dist/tmap.min.js
API
The signature of the TMAP constructor is:
let tmap = TMAP(
canvasId, // ID of target canvas (without "#")
vertexCoordinates, // An object: { x: [...], y: [...], z: [...] }
edgeCoordinates, // An object: { x: [...], y: [...], z: [...] }
colors,// An object: { r: [...], g: [...], b: [...] }
labels = null, // An array of labels: [ "A", "B", ... ]
backgroundColor = "#222222", // The clear color of the canvas
treeColor = "#4a69bd", // The color of the tree lines
maxPointSize = 20, // The maximum size of points when zooming in
pointScale = 5 // The base-size of the points
hasLegend = false // Whether or not to render the built-in legend
)
The TMAP will be drawn upon initialization.
Callbacks
TMAP has three methods accepting callbacks, onVertexOver
, onVertexClick
, and onVertexOut
. All three take a (callback) function as an argument. An example of the object supplied to the callback passed to onVertexOver
is:
{ x: 315.2, y: 584, index: 0, color: [ 255, 0, 0 ] }
The onVertexClick
object contains the same information:
{ x: 315.2, y: 584, index: 0, color: [ 255, 0, 0 ] }
In both cases, x
and y
are the vertex's 3D coordinates projected to screen space and index
is the array index of the vertex, and color
is an rgb array (0-255).
In addition, there is the onVertexOut
callback, which does not supply an object to the callback function and is called when the mouse exits any hovered vertex.
Methods
Aside from the methods accepting callback functions, the methods of the TMAP
class are:
setZoom(zoom, relativeToLastFit=false)
where zoom
can be any float / double value. The default zoom is 1.0
and values below zoom out while values above zoom in. If relativeToLastFit
is set to true
, the zoom
is relative to the last call of zoomToFit()
.
resetZoom(relativeToLastFit=false)
Analogous to setZoom(1.0)
or setZoom(1.0, true)
.
zoomTo(indices, padding = 0.0)
Zoom and pan to a set of vertices specified as an array indices
so that they fill the screen.
zoomToFit(padding = 0.0)
Zoom and pan to fit the entire map.
setLastFitZoom(lastFitZoom)
Set the lastFitZoom
value manually.
snapshot(callback = null, size = 2.0)
This methods takes a screenshot of the canvas and begins the download process in the browser. It takes an argument (size
) which scales the canvas before the it's buffer is copied to a png to enable higher-resolution screenshots. The default value is 2.0
. Higher values may crash browser tabs. After the canvas has been scaled back to it's original size, callback
is called.
selectVertex(index)
Select the vertex with index index
.
deselectVertex(index)
Deselect the vertex with index index
.
deselectAllVertices()
Deselects all currently selected vertices.
setVertexColor(index, color)
Sets the vertex with index index
to color
where color
is an array of rgb colours (0
-255
).
resetVertexColors()
Resets all color values to their originals.
addWatcher(name, indices, callback)
Callback receives an array of screen positions, indices and colours (e.g. [{ x: 315.2, y: 584, index: 0, color: [ 255, 0, 0 ] }, ...]
) when the position of the vertices changes. name
is an arbitrary name for this watcher and indices
is an array containing the indices of the vertices to be watched.
removeWatcher(name)
Remove the watcher with name name
.
watchZoom(callback)
Callback receives the value of the current zoom. This is a wrapper around lore.controls.addEventListener('zoomchanged', callback)
and does not respect lastFitZoom
.
Example
See an example below (can also be found in dist
)
const vertexCoordinates = {
x: [0, 100, 600, 700],
y: [0, 100, 600, 700],
z: [0, 0, 0, 0]
};
const edgeCoordinates = {
x: [0, 100, 100, 600, 600, 700],
y: [0, 100, 100, 600, 600, 700],
z: [0, 0, 0, 0, 0, 0]
};
const colors = {
r: [255, 0, 255, 0],
g: [0, 255, 255, 0],
b: [0, 255, 255, 255]
};
const labels = [
"A1", "B2"
];
tmap = new TMAP(
"tmapCanvas",
vertexCoordinates,
edgeCoordinates,
colors,
null
);
tmap.onVertexOver(e => {
console.log(e);
});
tmap.onVertexOut(() => {
console.log("No vertex hovered.");
});
tmap.onVertexClick(e => {
console.log(e);
});