mirror of
https://github.com/UnickSoft/graphonline.git
synced 2026-08-29 13:30:37 +00:00
Added algorithm of visualization of graph based on weight and vertex degree.
This commit is contained in:
+1
-2
@@ -14,10 +14,9 @@ function BaseEdge(vertex1, vertex2, isDirect, weight, useWeight)
|
|||||||
this.hasPair = false;
|
this.hasPair = false;
|
||||||
this.useWeight = useWeight;
|
this.useWeight = useWeight;
|
||||||
this.id = 0;
|
this.id = 0;
|
||||||
|
this.model = new EdgeModel();
|
||||||
}
|
}
|
||||||
|
|
||||||
BaseEdge.prototype.model = new EdgeModel();
|
|
||||||
|
|
||||||
BaseEdge.prototype.SaveToXML = function ()
|
BaseEdge.prototype.SaveToXML = function ()
|
||||||
{
|
{
|
||||||
return "<edge " +
|
return "<edge " +
|
||||||
|
|||||||
+12
-10
@@ -107,6 +107,7 @@ BaseEdgeDrawer.prototype.SetupStyle = function(baseEdge, arcStyle)
|
|||||||
this.context.lineWidth = baseEdge.model.width;
|
this.context.lineWidth = baseEdge.model.width;
|
||||||
this.context.strokeStyle = arcStyle.strokeStyle;
|
this.context.strokeStyle = arcStyle.strokeStyle;
|
||||||
this.context.fillStyle = arcStyle.fillStyle;
|
this.context.fillStyle = arcStyle.fillStyle;
|
||||||
|
this.sizeOfLoop = baseEdge.vertex1.model.diameter / 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
|
BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
|
||||||
@@ -157,23 +158,23 @@ BaseEdgeDrawer.prototype.DrawWeight = function(position1, position2, text, arcSt
|
|||||||
this.context.fillText(text, centerPoint.x - widthText / 2, centerPoint.y);
|
this.context.fillText(text, centerPoint.x - widthText / 2, centerPoint.y);
|
||||||
}
|
}
|
||||||
|
|
||||||
BaseEdgeDrawer.prototype.GetArcPositions = function(position1, position2, diameter)
|
BaseEdgeDrawer.prototype.GetArcPositions = function(position1, position2, diameter1, diameter2)
|
||||||
{
|
{
|
||||||
var direction = position1.subtract(position2);
|
var direction = position1.subtract(position2);
|
||||||
direction.normalize(1.0);
|
direction.normalize(1.0);
|
||||||
direction = direction.multiply(0.5);
|
direction = direction.multiply(0.5);
|
||||||
|
|
||||||
var res = [];
|
var res = [];
|
||||||
res.push(position1.subtract(direction.multiply(diameter)));
|
res.push(position1.subtract(direction.multiply(diameter1)));
|
||||||
res.push(position2.subtract(direction.multiply(-diameter)));
|
res.push(position2.subtract(direction.multiply(-diameter2)));
|
||||||
return res;
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
BaseEdgeDrawer.prototype.GetArcPositionsShift = function(position1, position2, diameter, shift)
|
BaseEdgeDrawer.prototype.GetArcPositionsShift = function(position1, position2, diameter1, diameter2, shift)
|
||||||
{
|
{
|
||||||
if (shift == 0)
|
if (shift == 0)
|
||||||
{
|
{
|
||||||
return this.GetArcPositions(position1, position2, diameter);
|
return this.GetArcPositions(position1, position2, diameter1, diameter2);
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
@@ -183,10 +184,11 @@ BaseEdgeDrawer.prototype.GetArcPositionsShift = function(position1, position2, d
|
|||||||
direction = direction.multiply(0.5);
|
direction = direction.multiply(0.5);
|
||||||
position1 = position1.subtract(normal.multiply(shift));
|
position1 = position1.subtract(normal.multiply(shift));
|
||||||
position2 = position2.subtract(normal.multiply(shift));
|
position2 = position2.subtract(normal.multiply(shift));
|
||||||
diameter = Math.sqrt(diameter * diameter - shift * shift);
|
diameter1 = Math.sqrt(diameter1 * diameter1 - shift * shift);
|
||||||
|
diameter2 = Math.sqrt(diameter2 * diameter2 - shift * shift);
|
||||||
var res = [];
|
var res = [];
|
||||||
res.push(position1.subtract(direction.multiply(diameter)));
|
res.push(position1.subtract(direction.multiply(diameter1)));
|
||||||
res.push(position2.subtract(direction.multiply(-diameter)));
|
res.push(position2.subtract(direction.multiply(-diameter2)));
|
||||||
return res;
|
return res;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -216,7 +218,7 @@ DirectArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
|
|||||||
var realShift = (baseEdge.hasPair ? pairShift : 0);
|
var realShift = (baseEdge.hasPair ? pairShift : 0);
|
||||||
direction.normalize(1.0);
|
direction.normalize(1.0);
|
||||||
var positions = this.GetArcPositionsShift(baseEdge.vertex1.position,
|
var positions = this.GetArcPositionsShift(baseEdge.vertex1.position,
|
||||||
baseEdge.vertex2.position, baseEdge.vertex1.model.diameter, realShift);
|
baseEdge.vertex2.position, baseEdge.vertex1.model.diameter, baseEdge.vertex2.model.diameter, realShift);
|
||||||
|
|
||||||
baseDrawer.DrawArc (positions[0], positions[1].subtract(direction.multiply(-length / 2)), arcStyle);
|
baseDrawer.DrawArc (positions[0], positions[1].subtract(direction.multiply(-length / 2)), arcStyle);
|
||||||
|
|
||||||
@@ -277,7 +279,7 @@ ProgressArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
|
|||||||
var pairShift = baseEdge.vertex1.model.diameter * 0.25;
|
var pairShift = baseEdge.vertex1.model.diameter * 0.25;
|
||||||
var realShift = (baseEdge.hasPair ? pairShift : 0);
|
var realShift = (baseEdge.hasPair ? pairShift : 0);
|
||||||
var positions = this.GetArcPositionsShift(baseEdge.vertex1.position,
|
var positions = this.GetArcPositionsShift(baseEdge.vertex1.position,
|
||||||
baseEdge.vertex2.position, baseEdge.vertex1.model.diameter, realShift);
|
baseEdge.vertex2.position, baseEdge.vertex1.model.diameter, baseEdge.vertex2.model.diameter, realShift);
|
||||||
var progressSize = 10;
|
var progressSize = 10;
|
||||||
|
|
||||||
if (positions[0].equals(positions[1]))
|
if (positions[0].equals(positions[1]))
|
||||||
|
|||||||
@@ -11,10 +11,10 @@ function BaseVertex(x, y, vertexEnumType)
|
|||||||
this.mainText = "";
|
this.mainText = "";
|
||||||
this.upText = "";
|
this.upText = "";
|
||||||
this.vertexEnumType = vertexEnumType;
|
this.vertexEnumType = vertexEnumType;
|
||||||
|
this.model = new VertexModel();
|
||||||
};
|
};
|
||||||
|
|
||||||
BaseVertex.prototype.position = new Point(0, 0);
|
BaseVertex.prototype.position = new Point(0, 0);
|
||||||
BaseVertex.prototype.model = new VertexModel();
|
|
||||||
|
|
||||||
BaseVertex.prototype.SaveToXML = function ()
|
BaseVertex.prototype.SaveToXML = function ()
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -0,0 +1,128 @@
|
|||||||
|
/**
|
||||||
|
* Algorithm for modern style of graph.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
function ModernGraphStyle(graph, app)
|
||||||
|
{
|
||||||
|
BaseAlgorithm.apply(this, arguments);
|
||||||
|
this.minVertexSize = 20;
|
||||||
|
this.maxVertexSize = 100;
|
||||||
|
|
||||||
|
this.minEdgeSize = 2;
|
||||||
|
this.maxEdgeSize = 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// inheritance.
|
||||||
|
ModernGraphStyle.prototype = Object.create(BaseAlgorithm.prototype);
|
||||||
|
|
||||||
|
|
||||||
|
ModernGraphStyle.prototype.getName = function(local)
|
||||||
|
{
|
||||||
|
return local == "ru" ? "Визуализация на основе весов" : "Visualisation based on weight";
|
||||||
|
}
|
||||||
|
|
||||||
|
ModernGraphStyle.prototype.getId = function()
|
||||||
|
{
|
||||||
|
return "OlegSh.ModernGraphStyle";
|
||||||
|
}
|
||||||
|
|
||||||
|
// @return message for user.
|
||||||
|
ModernGraphStyle.prototype.getMessage = function(local)
|
||||||
|
{
|
||||||
|
return (local == "ru" ? "Готово" : "Done");
|
||||||
|
}
|
||||||
|
|
||||||
|
ModernGraphStyle.prototype.result = function(resultCallback)
|
||||||
|
{
|
||||||
|
var result = {};
|
||||||
|
result["version"] = 1;
|
||||||
|
|
||||||
|
this.vertexVisualization();
|
||||||
|
this.edgeVisualization();
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
ModernGraphStyle.prototype.vertexVisualization = function()
|
||||||
|
{
|
||||||
|
var degree = getVertexToVertexArray(this.graph, false);
|
||||||
|
var graph = this.graph;
|
||||||
|
var maxDegree = 0;
|
||||||
|
|
||||||
|
// Search max vertex degree.
|
||||||
|
for (var i = 0; i < graph.vertices.length; i++)
|
||||||
|
{
|
||||||
|
var vertex = graph.vertices[i];
|
||||||
|
|
||||||
|
if (degree.hasOwnProperty(vertex.id))
|
||||||
|
{
|
||||||
|
var currentDegree = degree[vertex.id].length;
|
||||||
|
maxDegree = Math.max(maxDegree, currentDegree);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
for (var i = 0; i < graph.vertices.length; i++)
|
||||||
|
{
|
||||||
|
var vertex = graph.vertices[i];
|
||||||
|
|
||||||
|
if (degree.hasOwnProperty(vertex.id))
|
||||||
|
{
|
||||||
|
var currentDegree = degree[vertex.id].length;
|
||||||
|
vertex.model.diameter = (currentDegree / maxDegree) * (this.maxVertexSize - this.minVertexSize) + this.minVertexSize;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
vertex.model.diameter = this.minVertexSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ModernGraphStyle.prototype.edgeVisualization = function()
|
||||||
|
{
|
||||||
|
var graph = this.graph;
|
||||||
|
var maxEdgeWeight = 0;
|
||||||
|
|
||||||
|
// Search max edge weight.
|
||||||
|
for (var i = 0; i < graph.edges.length; i++)
|
||||||
|
{
|
||||||
|
var edge = graph.edges[i];
|
||||||
|
if (edge.useWeight)
|
||||||
|
{
|
||||||
|
maxEdgeWeight = Math.max(maxEdgeWeight, edge.weight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search max edge weight.
|
||||||
|
if (maxEdgeWeight != 0)
|
||||||
|
{
|
||||||
|
for (var i = 0; i < graph.edges.length; i++)
|
||||||
|
{
|
||||||
|
var edge = graph.edges[i];
|
||||||
|
if (edge.useWeight)
|
||||||
|
{
|
||||||
|
edge.model.width = (edge.weight / maxEdgeWeight) * (this.maxEdgeSize - this.minEdgeSize) + this.minEdgeSize;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
edge.model.width = this.minEdgeSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ModernGraphStyle.prototype.getObjectSelectedGroup = function(object)
|
||||||
|
{
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Factory for connected components.
|
||||||
|
function CreateAlgorithmModernGraphStyle(graph, app)
|
||||||
|
{
|
||||||
|
return new ModernGraphStyle(graph, app)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gerister connected component.
|
||||||
|
RegisterAlgorithm (CreateAlgorithmModernGraphStyle);
|
||||||
Reference in New Issue
Block a user