Metamaps.Organize
This commit is contained in:
parent
ca5928113d
commit
a5bd0440a8
3 changed files with 118 additions and 125 deletions
|
@ -25,6 +25,7 @@
|
||||||
//= require ./src/views/room
|
//= require ./src/views/room
|
||||||
//= require ./src/JIT
|
//= require ./src/JIT
|
||||||
//= require ./src/Metamaps
|
//= require ./src/Metamaps
|
||||||
|
//= require ./src/Metamaps.Organize
|
||||||
//= require ./src/Metamaps.Topic
|
//= require ./src/Metamaps.Topic
|
||||||
//= require ./src/Metamaps.Synapse
|
//= require ./src/Metamaps.Synapse
|
||||||
//= require ./src/Metamaps.Map
|
//= require ./src/Metamaps.Map
|
||||||
|
|
117
app/assets/javascripts/src/Metamaps.Organize.js.erb
Normal file
117
app/assets/javascripts/src/Metamaps.Organize.js.erb
Normal file
|
@ -0,0 +1,117 @@
|
||||||
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Metamaps.Organize.js.erb
|
||||||
|
*
|
||||||
|
* Dependencies:
|
||||||
|
* - Metamaps.Visualize
|
||||||
|
*/
|
||||||
|
Metamaps.Organize = {
|
||||||
|
init: function () {},
|
||||||
|
arrange: function (layout, centerNode) {
|
||||||
|
// first option for layout to implement is 'grid', will do an evenly spaced grid with its center at the 0,0 origin
|
||||||
|
if (layout == 'grid') {
|
||||||
|
var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes); // this will always be an integer, the # of nodes on your graph visualization
|
||||||
|
var numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid
|
||||||
|
var GRIDSPACE = 400
|
||||||
|
var row = 0
|
||||||
|
var column = 0
|
||||||
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||||||
|
if (column == numColumns) {
|
||||||
|
column = 0
|
||||||
|
row += 1
|
||||||
|
}
|
||||||
|
var newPos = new $jit.Complex()
|
||||||
|
newPos.x = column * GRIDSPACE
|
||||||
|
newPos.y = row * GRIDSPACE
|
||||||
|
n.setPos(newPos, 'end')
|
||||||
|
column += 1
|
||||||
|
})
|
||||||
|
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout)
|
||||||
|
} else if (layout == 'grid_full') {
|
||||||
|
// this will always be an integer, the # of nodes on your graph visualization
|
||||||
|
var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes)
|
||||||
|
// var numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid
|
||||||
|
// var GRIDSPACE = 400
|
||||||
|
var height = Metamaps.Visualize.mGraph.canvas.getSize(0).height
|
||||||
|
var width = Metamaps.Visualize.mGraph.canvas.getSize(0).width
|
||||||
|
var totalArea = height * width
|
||||||
|
var cellArea = totalArea / numNodes
|
||||||
|
var ratio = height / width
|
||||||
|
var cellWidth = sqrt(cellArea / ratio)
|
||||||
|
var cellHeight = cellArea / cellWidth
|
||||||
|
var row = floor(height / cellHeight)
|
||||||
|
var column = floor(width / cellWidth)
|
||||||
|
var totalCells = row * column
|
||||||
|
|
||||||
|
if (totalCells)
|
||||||
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||||||
|
if (column == numColumns) {
|
||||||
|
column = 0
|
||||||
|
row += 1
|
||||||
|
}
|
||||||
|
var newPos = new $jit.Complex()
|
||||||
|
newPos.x = column * GRIDSPACE
|
||||||
|
newPos.y = row * GRIDSPACE
|
||||||
|
n.setPos(newPos, 'end')
|
||||||
|
column += 1
|
||||||
|
})
|
||||||
|
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout)
|
||||||
|
} else if (layout == 'radial') {
|
||||||
|
var centerX = centerNode.getPos().x
|
||||||
|
var centerY = centerNode.getPos().y
|
||||||
|
centerNode.setPos(centerNode.getPos(), 'end')
|
||||||
|
|
||||||
|
console.log(centerNode.adjacencies)
|
||||||
|
var lineLength = 200
|
||||||
|
var usedNodes = {}
|
||||||
|
usedNodes[centerNode.id] = centerNode
|
||||||
|
var radial = function (node, level, degree) {
|
||||||
|
if (level == 1) {
|
||||||
|
var numLinksTemp = _.size(node.adjacencies)
|
||||||
|
var angleTemp = 2 * Math.PI / numLinksTemp
|
||||||
|
} else {
|
||||||
|
angleTemp = 2 * Math.PI / 20
|
||||||
|
}
|
||||||
|
node.eachAdjacency(function (a) {
|
||||||
|
var isSecondLevelNode = (centerNode.adjacencies[a.nodeTo.id] != undefined && level > 1)
|
||||||
|
if (usedNodes[a.nodeTo.id] == undefined && !isSecondLevelNode) {
|
||||||
|
var newPos = new $jit.Complex()
|
||||||
|
newPos.x = level * lineLength * Math.sin(degree) + centerX
|
||||||
|
newPos.y = level * lineLength * Math.cos(degree) + centerY
|
||||||
|
a.nodeTo.setPos(newPos, 'end')
|
||||||
|
usedNodes[a.nodeTo.id] = a.nodeTo
|
||||||
|
|
||||||
|
radial(a.nodeTo, level + 1, degree)
|
||||||
|
degree += angleTemp
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
radial(centerNode, 1, 0)
|
||||||
|
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout)
|
||||||
|
} else if (layout == 'center_viewport') {
|
||||||
|
var lowX = 0,
|
||||||
|
lowY = 0,
|
||||||
|
highX = 0,
|
||||||
|
highY = 0
|
||||||
|
var oldOriginX = Metamaps.Visualize.mGraph.canvas.translateOffsetX
|
||||||
|
var oldOriginY = Metamaps.Visualize.mGraph.canvas.translateOffsetY
|
||||||
|
|
||||||
|
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
||||||
|
if (n.id === 1) {
|
||||||
|
lowX = n.getPos().x
|
||||||
|
lowY = n.getPos().y
|
||||||
|
highX = n.getPos().x
|
||||||
|
highY = n.getPos().y
|
||||||
|
}
|
||||||
|
if (n.getPos().x < lowX) lowX = n.getPos().x
|
||||||
|
if (n.getPos().y < lowY) lowY = n.getPos().y
|
||||||
|
if (n.getPos().x > highX) highX = n.getPos().x
|
||||||
|
if (n.getPos().y > highY) highY = n.getPos().y
|
||||||
|
})
|
||||||
|
console.log(lowX, lowY, highX, highY)
|
||||||
|
var newOriginX = (lowX + highX) / 2
|
||||||
|
var newOriginY = (lowY + highY) / 2
|
||||||
|
} else alert('please call function with a valid layout dammit!')
|
||||||
|
}
|
||||||
|
}; // end Metamaps.Organize
|
|
@ -4098,128 +4098,3 @@ Metamaps.Listeners = {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}; // end Metamaps.Listeners
|
}; // end Metamaps.Listeners
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
*
|
|
||||||
* ORGANIZE
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
Metamaps.Organize = {
|
|
||||||
init: function () {
|
|
||||||
|
|
||||||
},
|
|
||||||
arrange: function (layout, centerNode) {
|
|
||||||
|
|
||||||
|
|
||||||
// first option for layout to implement is 'grid', will do an evenly spaced grid with its center at the 0,0 origin
|
|
||||||
if (layout == 'grid') {
|
|
||||||
var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes); // this will always be an integer, the # of nodes on your graph visualization
|
|
||||||
var numColumns = Math.floor(Math.sqrt(numNodes)); // the number of columns to make an even grid
|
|
||||||
var GRIDSPACE = 400;
|
|
||||||
var row = 0;
|
|
||||||
var column = 0;
|
|
||||||
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
|
||||||
if (column == numColumns) {
|
|
||||||
column = 0;
|
|
||||||
row += 1;
|
|
||||||
}
|
|
||||||
var newPos = new $jit.Complex();
|
|
||||||
newPos.x = column * GRIDSPACE;
|
|
||||||
newPos.y = row * GRIDSPACE;
|
|
||||||
n.setPos(newPos, 'end');
|
|
||||||
column += 1;
|
|
||||||
});
|
|
||||||
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
|
|
||||||
} else if (layout == 'grid_full') {
|
|
||||||
|
|
||||||
// this will always be an integer, the # of nodes on your graph visualization
|
|
||||||
var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes);
|
|
||||||
//var numColumns = Math.floor(Math.sqrt(numNodes)); // the number of columns to make an even grid
|
|
||||||
//var GRIDSPACE = 400;
|
|
||||||
var height = Metamaps.Visualize.mGraph.canvas.getSize(0).height;
|
|
||||||
var width = Metamaps.Visualize.mGraph.canvas.getSize(0).width;
|
|
||||||
var totalArea = height * width;
|
|
||||||
var cellArea = totalArea / numNodes;
|
|
||||||
var ratio = height / width;
|
|
||||||
var cellWidth = sqrt(cellArea / ratio);
|
|
||||||
var cellHeight = cellArea / cellWidth;
|
|
||||||
var row = floor(height / cellHeight);
|
|
||||||
var column = floor(width / cellWidth);
|
|
||||||
var totalCells = row * column;
|
|
||||||
|
|
||||||
if (totalCells)
|
|
||||||
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
|
||||||
if (column == numColumns) {
|
|
||||||
column = 0;
|
|
||||||
row += 1;
|
|
||||||
}
|
|
||||||
var newPos = new $jit.Complex();
|
|
||||||
newPos.x = column * GRIDSPACE;
|
|
||||||
newPos.y = row * GRIDSPACE;
|
|
||||||
n.setPos(newPos, 'end');
|
|
||||||
column += 1;
|
|
||||||
});
|
|
||||||
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
|
|
||||||
} else if (layout == 'radial') {
|
|
||||||
|
|
||||||
var centerX = centerNode.getPos().x;
|
|
||||||
var centerY = centerNode.getPos().y;
|
|
||||||
centerNode.setPos(centerNode.getPos(), 'end');
|
|
||||||
|
|
||||||
console.log(centerNode.adjacencies);
|
|
||||||
var lineLength = 200;
|
|
||||||
var usedNodes = {};
|
|
||||||
usedNodes[centerNode.id] = centerNode;
|
|
||||||
var radial = function (node, level, degree) {
|
|
||||||
if (level == 1) {
|
|
||||||
var numLinksTemp = _.size(node.adjacencies);
|
|
||||||
var angleTemp = 2 * Math.PI / numLinksTemp;
|
|
||||||
} else {
|
|
||||||
angleTemp = 2 * Math.PI / 20
|
|
||||||
};
|
|
||||||
node.eachAdjacency(function (a) {
|
|
||||||
var isSecondLevelNode = (centerNode.adjacencies[a.nodeTo.id] != undefined && level > 1);
|
|
||||||
if (usedNodes[a.nodeTo.id] == undefined && !isSecondLevelNode) {
|
|
||||||
var newPos = new $jit.Complex();
|
|
||||||
newPos.x = level * lineLength * Math.sin(degree) + centerX;
|
|
||||||
newPos.y = level * lineLength * Math.cos(degree) + centerY;
|
|
||||||
a.nodeTo.setPos(newPos, 'end');
|
|
||||||
usedNodes[a.nodeTo.id] = a.nodeTo;
|
|
||||||
|
|
||||||
radial(a.nodeTo, level + 1, degree);
|
|
||||||
degree += angleTemp;
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
|
||||||
radial(centerNode, 1, 0);
|
|
||||||
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
|
|
||||||
|
|
||||||
} else if (layout == 'center_viewport') {
|
|
||||||
|
|
||||||
var lowX = 0,
|
|
||||||
lowY = 0,
|
|
||||||
highX = 0,
|
|
||||||
highY = 0;
|
|
||||||
var oldOriginX = Metamaps.Visualize.mGraph.canvas.translateOffsetX;
|
|
||||||
var oldOriginY = Metamaps.Visualize.mGraph.canvas.translateOffsetY;
|
|
||||||
|
|
||||||
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
|
|
||||||
if (n.id === 1) {
|
|
||||||
lowX = n.getPos().x;
|
|
||||||
lowY = n.getPos().y;
|
|
||||||
highX = n.getPos().x;
|
|
||||||
highY = n.getPos().y;
|
|
||||||
};
|
|
||||||
if (n.getPos().x < lowX) lowX = n.getPos().x;
|
|
||||||
if (n.getPos().y < lowY) lowY = n.getPos().y;
|
|
||||||
if (n.getPos().x > highX) highX = n.getPos().x;
|
|
||||||
if (n.getPos().y > highY) highY = n.getPos().y;
|
|
||||||
});
|
|
||||||
console.log(lowX, lowY, highX, highY);
|
|
||||||
var newOriginX = (lowX + highX) / 2;
|
|
||||||
var newOriginY = (lowY + highY) / 2;
|
|
||||||
|
|
||||||
} else alert('please call function with a valid layout dammit!');
|
|
||||||
}
|
|
||||||
}; // end Metamaps.Organize
|
|
||||||
|
|
Loading…
Reference in a new issue