Improved incidence matrix dialog. Add enumeration for edges.

script/features/show_incidence_matrix/index.js

@@ -23,23 +23,45 @@ ShowIncidenceMatrix.prototype.show = function()
 {
 	var handler = this;
 	var dialogButtons = {};
-
-    $('#IncidenceMatrixField').unbind();
-	$( "#IncidenceMatrixField" ).on('keyup change', function (eventObject)
+	let edgeNames = this.app.graph.edges.map(function(edge) { return edge.GetUpText(); });
+	let edgeEnumSelect = $("#incidenceEdgeEnumeration");
+	let edgeNamesDialog = $("#incidenceEdgeNamesDialog");
+	let edgeNamesList = $("#incidenceEdgeNamesList");
+	let currentColumns = [];
+	let currentColumnWidths = [];
+	let matrixIsValid = false;
+	let edgeEnumValue = this.app.currentEnumEdgesType || "";
+	if (edgeEnumValue === "Custom")
+	{
+		edgeEnumValue = "";
+	}
+	let selectedEdgeEnumValue = edgeEnumValue;
+	edgeEnumSelect.find("option:not(:first)").remove();
+	this.app.GetEnumVerticesList().forEach(function(item) {
+		if (item.value !== "Custom")
 		{
-			if (!handler.app.TestIncidenceMatrix($( "#IncidenceMatrixField" ).val(), [], []))
-			{
-				$( "#BadIncidenceMatrixFormatMessage" ).show();
-			}
-			else
-			{
-				$( "#BadIncidenceMatrixFormatMessage" ).hide();
-			}
-		});
+			edgeEnumSelect.append($("<option>", { value: item.value, text: item.text }));
+		}
+	});
+	edgeEnumSelect.val(edgeEnumValue);
+	$("#IncidenceMatrixField").off("keyup change input");
 
 	dialogButtons[g_save] = function() {
-                handler.app.PushToStack("IncidenceMatrixChanged");
-				handler.app.SetIncidenceMatrixSmart($( "#IncidenceMatrixField" ).val());
+				let matrix = ta.val();
+				let rows = {};
+				let columns = {};
+				let validIncidenceMatrix = handler.app.TestIncidenceMatrix(matrix, rows, columns);
+
+				handler.app.PushToStack("IncidenceMatrixChanged");
+				handler.app.SetIncidenceMatrixSmart(matrix);
+				if (validIncidenceMatrix)
+				{
+						handler.app.SetEnumEdgesType(selectedEdgeEnumValue);
+					handler.app.graph.edges.forEach(function(edge, edgeIndex) {
+						edge.SetUpText(edgeNames[edgeIndex] || "");
+					});
+					handler.app.redrawGraph();
+				}
 				$( this ).dialog( "close" );					
 			};
 	dialogButtons[g_cancel] = function() {
@@ -47,13 +69,16 @@ ShowIncidenceMatrix.prototype.show = function()
 			};
 
 	let ta = $("#IncidenceMatrixField");
+	let topWrap = $("#incidenceMatrix_top_text");
 	let sideWrap = $("#incidenceMatrix_side_text");
+	let incidenceMatrix = this.app.GetIncidenceMatrix();
 
 	ta.on("scroll", function() {
+		topWrap.scrollLeft(ta.scrollLeft());
 		sideWrap.scrollTop(ta.scrollTop());
 	});
 
-	$( "#IncidenceMatrixField" ).val(this.app.GetIncidenceMatrix().trimEnd());	
+	$( "#IncidenceMatrixField" ).val(incidenceMatrix.trimEnd());	
 	ta.focus()[0].setSelectionRange(0, 0);
 
 	$( "#BadIncidenceMatrixFormatMessage" ).hide();
@@ -67,6 +92,138 @@ ShowIncidenceMatrix.prototype.show = function()
 	}
 	$("#incidenceMatrix_side_text_text").html(sideText + "\n");
 
+	let topText = $("#incidenceMatrix_top_text_text");
+	let renderEdgeNames = function(columns) {
+		topText.empty();
+		let columnCount = columns.length > 0 ? columns[0].length : 0;
+		for (let edgeIndex = 0; edgeIndex < columnCount; edgeIndex++)
+		{
+			let edgeName = (edgeNames[edgeIndex] || "").slice(0, 2);
+			let columnWidth = Math.max(1, edgeName.length, currentColumnWidths[edgeIndex] || 0);
+			for (let rowIndex = 0; rowIndex < columns.length; rowIndex++)
+			{
+				columnWidth = Math.max(columnWidth, String(columns[rowIndex][edgeIndex]).trim().length);
+			}
+			topText.append(document.createTextNode(edgeName.slice(0, columnWidth).padStart(columnWidth, " ")));
+			if (edgeIndex < columnCount - 1)
+			{
+				topText.append(document.createTextNode("  "));
+			}
+		}
+	};
+	let getMatrixColumnWidths = function(matrix, columnCount) {
+		let widths = Array(columnCount).fill(1);
+		let rows = matrix.split(/\r?\n/).filter(function(row) { return row.trim().length > 0; });
+		rows.forEach(function(row) {
+			let cells = row.split(",");
+			if (cells.length !== columnCount)
+			{
+				return;
+			}
+			cells.forEach(function(cell, columnIndex) {
+				let cellWidth = cell.length;
+				if (columnIndex > 0 && cell.startsWith(" "))
+				{
+					cellWidth--;
+				}
+				widths[columnIndex] = Math.max(widths[columnIndex], cellWidth);
+			});
+		});
+		return widths;
+	};
+	let getEdgeEnumType = function(value) {
+		return handler.app.enumVerticesTextList.find(function(enumType) {
+			return enumType.GetValue() === value && value !== "Custom";
+		});
+	};
+	let applyEdgeEnumeration = function(value) {
+		if (!matrixIsValid)
+		{
+			return;
+		}
+		selectedEdgeEnumValue = value;
+		let enumType = getEdgeEnumType(value);
+		for (let edgeIndex = 0; edgeIndex < edgeNames.length; edgeIndex++)
+		{
+			edgeNames[edgeIndex] = enumType ? enumType.GetVertexText(edgeIndex).toString() : "";
+		}
+		renderEdgeNames(currentColumns);
+	};
+
+	edgeEnumSelect.off("change").on("change", function() {
+		applyEdgeEnumeration($(this).val());
+	});
+
+	$("#editIncidenceEdgeNames").off("click").on("click", function() {
+		if (!matrixIsValid)
+		{
+			return;
+		}
+		edgeNamesList.val(edgeNames.join("\n"));
+		edgeNamesDialog.dialog("open");
+	});
+
+	edgeNamesDialog.dialog({
+		autoOpen: false,
+		modal: true,
+		resizable: false,
+		width: "auto",
+		title: $("#EdgeLabel").text().trim(),
+		buttons: {
+			[g_save]: function() {
+				let editedNames = edgeNamesList.val().split(/\r?\n/);
+				edgeNames = Array.from({ length: edgeNames.length }, function(_, index) {
+					return editedNames[index] || "";
+				});
+				renderEdgeNames(currentColumns);
+				$(this).dialog("close");
+			},
+			[g_cancel]: function() {
+				$(this).dialog("close");
+			}
+		},
+		dialogClass: 'EdgeDialog'
+	});
+
+	let updateMatrixState = function() {
+		let rows = {};
+		let columns = {};
+		let isValid = handler.app.TestIncidenceMatrix(ta.val(), rows, columns);
+		if (isValid)
+		{
+			let columnCount = columns.cols.length > 0 ? columns.cols[0].length : 0;
+			currentColumns = columns.cols;
+			currentColumnWidths = getMatrixColumnWidths(ta.val(), columnCount);
+			let enumType = getEdgeEnumType(selectedEdgeEnumValue);
+			if (columnCount < edgeNames.length)
+			{
+				edgeNames.length = columnCount;
+			}
+			else
+			{
+				for (let edgeIndex = edgeNames.length; edgeIndex < columnCount; edgeIndex++)
+				{
+					edgeNames.push(enumType ? enumType.GetVertexText(edgeIndex).toString() : "");
+				}
+			}
+			matrixIsValid = true;
+			edgeEnumSelect.prop("disabled", false);
+			$("#editIncidenceEdgeNames").prop("disabled", false);
+			$("#BadIncidenceMatrixFormatMessage").hide();
+			renderEdgeNames(columns.cols);
+		}
+		else
+		{
+			matrixIsValid = false;
+			edgeEnumSelect.prop("disabled", true);
+			$("#editIncidenceEdgeNames").prop("disabled", true);
+			$("#BadIncidenceMatrixFormatMessage").show();
+		}
+	};
+
+	ta.on("input", updateMatrixState);
+	updateMatrixState();
+
 	$( "#incidenceMatrix" ).dialog({
 		resizable: false,
         height: "auto",
@@ -77,7 +234,7 @@ ShowIncidenceMatrix.prototype.show = function()
 		dialogClass: 'EdgeDialog',
 		open: function(event, ui) {
 			/* Set width for side text */
-			$("#incidenceMatrix_top_text").width(ta.width());
+			topWrap.width(ta.width());
 			$("#BadIncidenceMatrixFormatMessage").width(ta.width());
 		}
 	});