Enhance matrix display functionality and formatting.

This commit is contained in:
Oleg Sh
2025-12-24 16:17:38 +01:00
parent 50d590fa98
commit ea61466fe0
14 changed files with 510 additions and 137 deletions

View File

@@ -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);
}

View File

@@ -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());
}
});
}

View File

@@ -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());
}
});
}

View File

@@ -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());
}
});
}