Virtual properties
Open in a new window.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<script src="../build/ogma.min.js"></script>
<style>
#graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
button { position: absolute; top:10px; left: 10px; }
</style>
</head>
<body>
<div id="graph-container"></div>
<button id="btn" onclick="toggle()">Apply</button>
</body>
<script>
'use strict';
var ogma = new Ogma({
container: 'graph-container',
renderer: 'canvas',
graph: {
nodes: [
{id: 0, data: {type: 'person', firstName: 'John', lastName: 'Smith'}, attributes: {x: 0, y: 0}},
{id: 1, data: {type: 'person', firstName: 'James', lastName: 'Brown'}, attributes: {x: 30, y: 0}}
]
}
});
ogma.styles.addRule({
nodeAttributes: {
text: function(node) {
var data = node.getData();
return Object.keys(data).map(function(key) {
return key + ': ' + data[key];
}).join('\n');
},
color: 'orange',
icon: {
content: '\uf007',
font: 'FontAwesome'
}
}
});
var button = document.getElementById('btn');
var transformation = null;
function enableButton() {
button.disabled = false;
button.textContent = button.textContent === 'Apply' ? 'Undo' : 'Apply';
}
function toggle() {
if (transformation) {
transformation.destroy({duration: 500}).then(enableButton);
button.disabled = true;
transformation = null;
} else {
transformation = ogma.transformations.addVirtualProperties({
nodeSelector: function(node) {
return node.getData('type') === 'person';
},
nodeDataFunction: function(node) {
return { fullName: node.getData('firstName') + ' ' + node.getData('lastName') };
}
});
button.disabled = true;
transformation.whenApplied().then(enableButton);
}
}
</script>
</html>
