mirror of
https://github.com/UnickSoft/graphonline.git
synced 2026-02-16 02:30:51 +00:00
Enhance matrix display functionality and formatting.
This commit is contained in:
@@ -139,7 +139,37 @@ FloidAlgorithm.prototype.messageWasChanged = function()
|
||||
dialogButtons[g_close] = function() {
|
||||
$( this ).dialog( "close" );
|
||||
};
|
||||
$( "#FloidMatrixField" ).val(self.GetFloidMatrix());
|
||||
let ta = $("#FloidMatrixField");
|
||||
let topWrap = $("#floidMatrix_top_text");
|
||||
let sideWrap = $("#floidMatrix_side_text");
|
||||
ta.on("scroll", function() {
|
||||
topWrap.scrollLeft(ta.scrollLeft());
|
||||
sideWrap.scrollTop(ta.scrollTop());
|
||||
});
|
||||
|
||||
let columns_width = [];
|
||||
$( "#FloidMatrixField" ).val(self.GetFloidMatrix(columns_width).trimEnd());
|
||||
ta.focus()[0].setSelectionRange(0, 0);
|
||||
/* Make side and top text */
|
||||
let sideText = "";
|
||||
let topText = "";
|
||||
for (let i = 0; i < self.graph.vertices.length; i++)
|
||||
{
|
||||
/* Each vertex name max 3 symbols */
|
||||
sideText += self.graph.vertices[i].mainText.toString().slice(0, 3) + "\n";
|
||||
|
||||
let col_width = columns_width[i];
|
||||
let col_text = self.graph.vertices[i].mainText.toString();
|
||||
if (col_width < col_text.length)
|
||||
{
|
||||
col_text = col_text.slice(0, col_width);
|
||||
}
|
||||
col_text = col_text.padStart(col_width, " ");
|
||||
topText += col_text + " ";
|
||||
}
|
||||
$("#floidMatrix_top_text_text").html(topText);
|
||||
$("#floidMatrix_side_text_text").html(sideText + "\n");
|
||||
|
||||
$( "#floidMatrix" ).dialog({
|
||||
resizable: false,
|
||||
height: "auto",
|
||||
@@ -147,7 +177,11 @@ FloidAlgorithm.prototype.messageWasChanged = function()
|
||||
modal: true,
|
||||
title: g_minDistMatrixText,
|
||||
buttons: dialogButtons,
|
||||
dialogClass: 'EdgeDialog'
|
||||
dialogClass: 'EdgeDialog',
|
||||
open: function(event, ui) {
|
||||
/* Set width for side text */
|
||||
$("#floidMatrix_top_text").width(ta.width());
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
@@ -157,9 +191,9 @@ FloidAlgorithm.prototype.messageWasChanged = function()
|
||||
});
|
||||
}
|
||||
|
||||
FloidAlgorithm.prototype.GetFloidMatrix = function()
|
||||
FloidAlgorithm.prototype.GetFloidMatrix = function(res_columns_width)
|
||||
{
|
||||
return this.graph.GetAdjacencyMatrixStr();
|
||||
return this.graph.GetAdjacencyMatrixStr(res_columns_width);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -46,8 +46,40 @@ ShowAdjacencyMatrix.prototype.show = function()
|
||||
$( this ).dialog( "close" );
|
||||
};
|
||||
|
||||
$( "#AdjacencyMatrixField" ).val(this.app.GetAdjacencyMatrix());
|
||||
let ta = $("#AdjacencyMatrixField");
|
||||
let topWrap = $("#adjacencyMatrix_top_text");
|
||||
let sideWrap = $("#adjacencyMatrix_side_text");
|
||||
|
||||
ta.on("scroll", function() {
|
||||
topWrap.scrollLeft(ta.scrollLeft());
|
||||
sideWrap.scrollTop(ta.scrollTop());
|
||||
});
|
||||
|
||||
let res_columns_width = [];
|
||||
ta.val(this.app.GetAdjacencyMatrix(res_columns_width).trimEnd());
|
||||
ta.focus()[0].setSelectionRange(0, 0);
|
||||
|
||||
$( "#BadMatrixFormatMessage" ).hide();
|
||||
|
||||
/* Make side and top text */
|
||||
let sideText = "";
|
||||
let topText = "";
|
||||
for (let i = 0; i < this.app.graph.vertices.length; i++)
|
||||
{
|
||||
/* Each vertex name max 3 symbols */
|
||||
sideText += this.app.graph.vertices[i].mainText.toString().slice(0, 3) + "\n";
|
||||
|
||||
let col_width = res_columns_width[i];
|
||||
let col_text = this.app.graph.vertices[i].mainText.toString();
|
||||
if (col_width < col_text.length)
|
||||
{
|
||||
col_text = col_text.slice(0, col_width);
|
||||
}
|
||||
col_text = col_text.padStart(col_width, " ");
|
||||
topText += col_text + " ";
|
||||
}
|
||||
$("#adjacencyMatrix_top_text_text").html(topText);
|
||||
$("#adjacencyMatrix_side_text_text").html(sideText + "\n");
|
||||
|
||||
if (this.app.graph.isMulti())
|
||||
$( "#AdjacencyMatrixMultiGraphDesc").show();
|
||||
@@ -61,6 +93,11 @@ ShowAdjacencyMatrix.prototype.show = function()
|
||||
modal: true,
|
||||
title: g_adjacencyMatrixText,
|
||||
buttons: dialogButtons,
|
||||
dialogClass: 'EdgeDialog'
|
||||
dialogClass: 'EdgeDialog',
|
||||
open: function(event, ui) {
|
||||
/* Set width for side text */
|
||||
$("#adjacencyMatrix_top_text").width(ta.width());
|
||||
$("#BadMatrixFormatMessage").width(ta.width());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -20,25 +20,55 @@ ShowDistanceMatrix.prototype.firstObject = null;
|
||||
// Path
|
||||
ShowDistanceMatrix.prototype.pathObjects = null;
|
||||
|
||||
ShowDistanceMatrix.prototype.GetIncidenceMatrix = function (rawMatrix)
|
||||
ShowDistanceMatrix.prototype.GetIncidenceMatrix = function (rawMatrix, res_columns_width)
|
||||
{
|
||||
let get_weight_str = function (i, j)
|
||||
{
|
||||
let str = "";
|
||||
if (i == j)
|
||||
{
|
||||
str += "0";
|
||||
}
|
||||
else if ((new Graph()).infinity == rawMatrix[i][j])
|
||||
{
|
||||
str += '\u221E';
|
||||
}
|
||||
else
|
||||
{
|
||||
str += rawMatrix[i][j];
|
||||
}
|
||||
return str;
|
||||
};
|
||||
|
||||
for (var j = 0; j < rawMatrix.length; j++)
|
||||
{
|
||||
let max_length = 0;
|
||||
for (var i = 0; i < rawMatrix.length; i++)
|
||||
{
|
||||
let str = get_weight_str(i, j);
|
||||
let weight_len = str.length;
|
||||
// Make the length at least 2 if vertex name length > 1
|
||||
if (this.app.graph.vertices[j].mainText.toString().length > weight_len && weight_len == 1)
|
||||
{
|
||||
weight_len = 2;
|
||||
}
|
||||
max_length = Math.max(max_length, weight_len);
|
||||
}
|
||||
res_columns_width.push(max_length);
|
||||
}
|
||||
|
||||
var matrix = "";
|
||||
for (var i = 0; i < rawMatrix.length; i++)
|
||||
{
|
||||
for (var j = 0; j < rawMatrix[i].length; j++)
|
||||
{
|
||||
if (i == j)
|
||||
{
|
||||
matrix += "0";
|
||||
}
|
||||
else if ((new Graph()).infinity == rawMatrix[i][j])
|
||||
{
|
||||
matrix += '\u221E';
|
||||
}
|
||||
else
|
||||
{
|
||||
matrix += rawMatrix[i][j];
|
||||
}
|
||||
let weight_str = get_weight_str(i, j);
|
||||
if (weight_str.length < res_columns_width[j])
|
||||
{
|
||||
weight_str = " ".repeat(res_columns_width[j] - weight_str.length) + weight_str;
|
||||
}
|
||||
|
||||
matrix += weight_str;
|
||||
|
||||
if (j != rawMatrix[i].length - 1)
|
||||
{
|
||||
@@ -63,7 +93,39 @@ ShowDistanceMatrix.prototype.show = function()
|
||||
|
||||
var handler = g_Algorithms[g_AlgorithmIds.indexOf("OlegSh.FloidAlgorithm")](this.app.graph, this.app);
|
||||
|
||||
$( "#FloidMatrixField" ).val(this.GetIncidenceMatrix(handler.resultMatrix()));
|
||||
let ta = $("#FloidMatrixField");
|
||||
let topWrap = $("#floidMatrix_top_text");
|
||||
let sideWrap = $("#floidMatrix_side_text");
|
||||
|
||||
ta.on("scroll", function() {
|
||||
topWrap.scrollLeft(ta.scrollLeft());
|
||||
sideWrap.scrollTop(ta.scrollTop());
|
||||
});
|
||||
|
||||
let res_columns_width = [];
|
||||
|
||||
ta.val(this.GetIncidenceMatrix(handler.resultMatrix(), res_columns_width).trimEnd());
|
||||
ta.focus()[0].setSelectionRange(0, 0);
|
||||
|
||||
/* Make side and top text */
|
||||
let sideText = "";
|
||||
let topText = "";
|
||||
for (let i = 0; i < this.app.graph.vertices.length; i++)
|
||||
{
|
||||
/* Each vertex name max 3 symbols */
|
||||
sideText += this.app.graph.vertices[i].mainText.toString().slice(0, 3) + "\n";
|
||||
|
||||
let col_width = res_columns_width[i];
|
||||
let col_text = this.app.graph.vertices[i].mainText.toString();
|
||||
if (col_width < col_text.length)
|
||||
{
|
||||
col_text = col_text.slice(0, col_width);
|
||||
}
|
||||
col_text = col_text.padStart(col_width, " ");
|
||||
topText += col_text + " ";
|
||||
}
|
||||
$("#floidMatrix_top_text_text").html(topText);
|
||||
$("#floidMatrix_side_text_text").html(sideText + "\n");
|
||||
|
||||
$( "#floidMatrix" ).dialog({
|
||||
resizable: false,
|
||||
@@ -72,6 +134,11 @@ ShowDistanceMatrix.prototype.show = function()
|
||||
modal: true,
|
||||
title: g_minDistMatrixText,
|
||||
buttons: dialogButtons,
|
||||
dialogClass: 'EdgeDialog'
|
||||
dialogClass: 'EdgeDialog',
|
||||
open: function(event, ui) {
|
||||
/* Set width for side text */
|
||||
$("#floidMatrix_top_text").width(ta.width());
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
@@ -46,9 +46,27 @@ ShowIncidenceMatrix.prototype.show = function()
|
||||
$( this ).dialog( "close" );
|
||||
};
|
||||
|
||||
$( "#IncidenceMatrixField" ).val(this.app.GetIncidenceMatrix());
|
||||
let ta = $("#IncidenceMatrixField");
|
||||
let sideWrap = $("#incidenceMatrix_side_text");
|
||||
|
||||
ta.on("scroll", function() {
|
||||
sideWrap.scrollTop(ta.scrollTop());
|
||||
});
|
||||
|
||||
$( "#IncidenceMatrixField" ).val(this.app.GetIncidenceMatrix().trimEnd());
|
||||
ta.focus()[0].setSelectionRange(0, 0);
|
||||
|
||||
$( "#BadIncidenceMatrixFormatMessage" ).hide();
|
||||
|
||||
/* Make side and top text */
|
||||
let sideText = "";
|
||||
for (let i = 0; i < this.app.graph.vertices.length; i++)
|
||||
{
|
||||
/* Each vertex name max 3 symbols */
|
||||
sideText += this.app.graph.vertices[i].mainText.toString().slice(0, 3) + "\n";
|
||||
}
|
||||
$("#incidenceMatrix_side_text_text").html(sideText + "\n");
|
||||
|
||||
$( "#incidenceMatrix" ).dialog({
|
||||
resizable: false,
|
||||
height: "auto",
|
||||
@@ -56,6 +74,11 @@ ShowIncidenceMatrix.prototype.show = function()
|
||||
modal: true,
|
||||
title: g_incidenceMatrixText,
|
||||
buttons: dialogButtons,
|
||||
dialogClass: 'EdgeDialog'
|
||||
dialogClass: 'EdgeDialog',
|
||||
open: function(event, ui) {
|
||||
/* Set width for side text */
|
||||
$("#incidenceMatrix_top_text").width(ta.width());
|
||||
$("#BadIncidenceMatrixFormatMessage").width(ta.width());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user