TestGraph
This commit is contained in:
Apache
parent
a2f120aa73
commit
fea574ac18
16 changed files with 779 additions and 4 deletions
|
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','Identity', 'Image', function ($scope, Compute, $rootScope, Loading, Identity, Image)
|
||||
{
|
||||
|
||||
console.log("homeCTRl");
|
||||
var callMeAfterPullData=function(data){
|
||||
$scope.machines=Compute.getData().machines;
|
||||
Loading.stop();
|
||||
|
|
@ -38,5 +38,211 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I
|
|||
Compute.pullMachines(callback);
|
||||
}
|
||||
|
||||
//adjacencyList, hard-encoded now but will be the result of a request to the server, format may change
|
||||
var vmList = {
|
||||
'vms': [
|
||||
'VM 1',
|
||||
'VM 2',
|
||||
'VM 3',
|
||||
'VM 4',
|
||||
'VM 5',
|
||||
'VM 6',
|
||||
'VM 7',
|
||||
'VM 8',
|
||||
'VM 9',
|
||||
'VM 10'
|
||||
],
|
||||
'links': [
|
||||
['VM 1', 'VM 2', '', ''],
|
||||
['VM 2', 'VM 3', 'I3', 'I4'],
|
||||
['VM 1', 'VM 3', 'I5', 'I6'],
|
||||
['VM 2', 'VM 4', 'I5', 'I6'],
|
||||
['VM 4', 'VM 5', 'I5', 'I6'],
|
||||
['VM 4', 'VM 6', 'I5', 'I6'],
|
||||
['VM 4', 'VM 1', 'I5', 'I6'],
|
||||
['VM 7', 'VM 4', 'I5', 'I6'],
|
||||
['VM 7', 'VM 3', 'I5', 'I6'],
|
||||
['VM 6', 'VM 8', 'I5', 'I6'],
|
||||
['VM 3', 'VM 9', 'I5', 'I6'],
|
||||
['VM 3', 'VM 10', 'I5', 'I6']
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
//Custom element for inserting html
|
||||
joint.shapes.html = {};
|
||||
joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
|
||||
defaults: joint.util.deepSupplement({
|
||||
type: 'html.Element',
|
||||
attrs: {
|
||||
rect: { stroke: 'none', 'fill-opacity': 0 }
|
||||
}
|
||||
}, joint.shapes.basic.Rect.prototype.defaults)
|
||||
});
|
||||
|
||||
//Custom view for this element
|
||||
joint.shapes.basic.Rect.ElementView = joint.dia.ElementView.extend({
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'updateBox');
|
||||
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
|
||||
|
||||
this.$box = $(_.template(this.model.get('html'))());
|
||||
// Prevent paper from handling pointerdown.
|
||||
this.$box.find('input,select').on('mousedown click', function(evt) { evt.stopPropagation(); });
|
||||
// This is an example of reacting on the input change and storing the input data in the cell model.
|
||||
this.$box.find('input').on('change', _.bind(function(evt) {
|
||||
this.model.set('input', $(evt.target).val());
|
||||
}, this));
|
||||
this.$box.find('select').on('change', _.bind(function(evt) {
|
||||
this.model.set('select', $(evt.target).val());
|
||||
}, this));
|
||||
this.$box.find('select').val(this.model.get('select'));
|
||||
this.$box.find('.config').on('click', function(){
|
||||
$scope.raiseShowMachineDetailsEvent();
|
||||
});
|
||||
// Update the box position whenever the underlying model changes.
|
||||
this.model.on('change', this.updateBox, this);
|
||||
// Remove the box when the model gets removed from the graph.
|
||||
this.model.on('remove', this.removeBox, this);
|
||||
|
||||
this.updateBox();
|
||||
},
|
||||
render: function() {
|
||||
joint.dia.ElementView.prototype.render.apply(this, arguments);
|
||||
this.paper.$el.prepend(this.$box);
|
||||
this.updateBox();
|
||||
return this;
|
||||
},
|
||||
updateBox: function() {
|
||||
// Set the position and dimension of the box so that it covers the JointJS element.
|
||||
var bbox = this.model.getBBox();
|
||||
// Example of updating the HTML with a data stored in the cell model.
|
||||
this.$box.find('label').text(this.model.get('name'));
|
||||
this.$box.find('span').text(this.model.get('select'));
|
||||
this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
|
||||
},
|
||||
removeBox: function(evt) {
|
||||
this.$box.remove();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//Read the adjacencyList and build the elements and the links according to it
|
||||
function buildGraphFromAdjacencyList(adjacencyList) {
|
||||
|
||||
var elements = [];
|
||||
var links = [];
|
||||
|
||||
_.each(adjacencyList['vms'], function(vm) {
|
||||
elements.push(makeElement(vm));
|
||||
});
|
||||
console.log(elements);
|
||||
_.each(adjacencyList['links'], function(link) {
|
||||
links.push(makeLink(link[0], link[1] , link[2], link[3]));
|
||||
});
|
||||
console.log(links);
|
||||
// Links must be added after all the elements. This is because when the links
|
||||
// are added to the graph, link source/target
|
||||
// elements must be in the graph already.
|
||||
return elements.concat(links);
|
||||
}
|
||||
|
||||
//Return a new link linking the parent and child elements with the interfaces names given in parameters
|
||||
function makeLink(parentElementLabel, childElementLabel, Iparent, Ichild) {
|
||||
|
||||
return new joint.dia.Link({
|
||||
source: { id: parentElementLabel },
|
||||
target: { id: childElementLabel },
|
||||
labels: [
|
||||
{ position: 20, attrs: { text: { text: Iparent } }},
|
||||
{ position: -20, attrs: { text: { text: Ichild } }}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
//Return a new element
|
||||
function makeElement(label) {
|
||||
|
||||
var maxLineLength = _.max(label.split('\n'), function(l) { return l.length; }).length;
|
||||
|
||||
// Compute width/height of the rectangle based on the number
|
||||
// of lines in the label and the letter size. 0.6 * letterSize is
|
||||
// an approximation of the monospace font letter width.
|
||||
var width = 130;
|
||||
var height = 80;
|
||||
|
||||
/*return new joint.shapes.html.Element({
|
||||
id: label,
|
||||
name: label,
|
||||
size: { width: width, height: height },
|
||||
|
||||
html: [
|
||||
'<div class="html-element">',
|
||||
'<img src="./images/ON.png">',
|
||||
'<label></label>',
|
||||
'<input type="image" src="./images/gear.png" class="config"></button>',
|
||||
'</div>'
|
||||
].join(''),
|
||||
|
||||
attrs: {
|
||||
rect: {
|
||||
fill: '#FE854F',
|
||||
width: width,
|
||||
height: height,
|
||||
rx: 5,
|
||||
ry: 5,
|
||||
stroke: 'none'
|
||||
}
|
||||
}
|
||||
});*/
|
||||
return new joint.shapes.org.Member({
|
||||
id: label,
|
||||
position: { x: 0, y: 0 },
|
||||
attrs: {
|
||||
'.card': { fill: 'blue', stroke: 'none'},
|
||||
image: { 'xlink:href': './images/ON.png', opacity: 0.7 },
|
||||
//'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
|
||||
'.name': { text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0 }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var graph = new joint.dia.Graph;
|
||||
var paper = new joint.dia.Paper({
|
||||
el: $('#graphHolder'),
|
||||
width: $('#graphHolder').width(),
|
||||
//height: test.height,
|
||||
model: graph,
|
||||
gridSize: 1
|
||||
});
|
||||
|
||||
var cells = buildGraphFromAdjacencyList(vmList);
|
||||
console.log(cells);
|
||||
/*graph.resetCells(cells);
|
||||
joint.layout.DirectedGraph.layout(graph, {
|
||||
setLinkVertices: false,
|
||||
//Top to bottom generation
|
||||
rankDir: "TB",
|
||||
nodeSep: 150,
|
||||
edgeSep: 150,
|
||||
rankSep: 150
|
||||
});*/
|
||||
graph.addCells(cells);
|
||||
var test = joint.layout.DirectedGraph.layout(graph, {
|
||||
setLinkVertices: false,
|
||||
//Top to bottom generation
|
||||
rankDir: "TB",
|
||||
nodeSep: 150,
|
||||
edgeSep: 150,
|
||||
rankSep: 50
|
||||
});
|
||||
console.log(test);
|
||||
|
||||
paper.setDimensions(test.width, test.height);
|
||||
|
||||
|
||||
paper.$el.css('pointer-events', 'none');
|
||||
|
||||
|
||||
}]);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue