Added move focus cell for matrix.

lang/de/create_graph_by_incidence_matrix.php

@@ -12,4 +12,5 @@
     $g_lang["m_title"] = "Graph aus Inzidenzmatrix erstellen";
     $g_lang["m_keyWords"] = "Graph online, Graph zeichnen, erstellen Sie ein Graph aus der Inzidenzmatrix, Inzidenzmatrix ";
     $g_lang["m_description"] = "Graph aus Inzidenzmatrix erstellen und Sehen Sie ein visuelles Ergebnis";
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/de/create_graph_by_matrix.php

@@ -15,4 +15,5 @@
     $g_lang["separator"] = "Separator:";
     $g_lang["separator_commo"] = "Komma";
     $g_lang["separator_space"] = "Leerzeichen";
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/el/create_graph_by_incidence_matrix.php

@@ -18,4 +18,5 @@
     $g_lang["separator"] = "Διαχωριστής: ";
     $g_lang["separator_commo"] = "κόμμα";
     $g_lang["separator_space"] = "κενό";
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/el/create_graph_by_matrix.php

@@ -19,4 +19,6 @@
     $g_lang["separator"] = "Διαχωριστής: ";
     $g_lang["separator_commo"] = "κόμμα";
     $g_lang["separator_space"] = "κενό";
+    
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/en/create_graph_by_incidence_matrix.php

@@ -14,4 +14,6 @@
     $g_lang["m_title"] = "Creating graph from incidence matrix";
     $g_lang["m_keyWords"] = "graph online, plot graph, creating graph from incidence matrix, incidence matrix";
     $g_lang["m_description"] = "Creating graph from incidence matrix online and see visual result";
+
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/en/create_graph_by_matrix.php

@@ -19,4 +19,5 @@
     $g_lang["separator"] = "Separator: ";
     $g_lang["separator_commo"] = "comma";
     $g_lang["separator_space"] = "space";
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/es/create_graph_by_matrix.php

@@ -20,4 +20,6 @@
     $g_lang["separator"] = "Separador: ";
     $g_lang["separator_commo"] = "coma";
     $g_lang["separator_space"] = "espacio";
+
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/fr/create_graph_by_incidence_matrix.php

@@ -13,4 +13,6 @@
     $g_lang["m_title"] = "Création d'un graphique à partir de la matrice d'incidence";
     $g_lang["m_keyWords"] = "graphique en ligne, graphique de tracé, création d'un graphique à partir d'une matrice d'incidence, matrice d'incidence";
     $g_lang["m_description"] = "Créer un graphique à partir de la matrice d'incidence en ligne et voir le résultat visuel";
+
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/fr/create_graph_by_matrix.php

@@ -16,4 +16,6 @@
     $g_lang["separator"] = "Séparateur";
     $g_lang["separator_commo"] = "virgule";
     $g_lang["separator_space"] = "espace";
+
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/nl/create_graph_by_incidence_matrix.php

@@ -12,4 +12,6 @@
     $g_lang["m_title"] = "Bezig met het creëren van een Graaf op basis van een incidentiematrix";
     $g_lang["m_keyWords"] = "Graph Online, plot Graaf, Creëer graaf vanuit incidentiematrix, incidentiematrix";
     $g_lang["m_description"] = "Creëer een graaf door middel van een incidentiematrix online en krijg het resultaat visueel";
+
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/nl/create_graph_by_matrix.php

@@ -15,4 +15,6 @@
     $g_lang["separator"] = "Scheidingsteken";
     $g_lang["separator_commo"] = "komma";
     $g_lang["separator_space"] = "spatie";
+
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/pt/create_graph_by_incidence_matrix.php

@@ -14,4 +14,5 @@
     $g_lang["m_keyWords"] = "grafo onilne, plotar grafo, criar grafo a partir de uma matriz de incidência, matriz de incidência ";
     $g_lang["m_description"] = "Crie o grafo online a partir da matriz de incidência e veja o resultado";
 
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/pt/create_graph_by_matrix.php

@@ -15,4 +15,6 @@
     $g_lang["separator"] = "Separador:";
     $g_lang["separator_commo"] = "vírgula";
     $g_lang["separator_space"] = "espaço";
+
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/ru/create_graph_by_incidence_matrix.php

@@ -16,4 +16,5 @@
     $g_lang["add_edge_to_matrix"] = "Добавить дугу";
     $g_lang["add_node_to_matrix"] = "Добавить вершину";
     
+    $g_lang["use_ctrl_to_move_cells"] = "Используйте Ctrl + ← ↑ → ↓ клавиши для перемещения между ячейками.";
 ?>

lang/ru/create_graph_by_matrix.php

@@ -23,5 +23,5 @@
     $g_lang["separator_commo"] = "запятая";
     $g_lang["separator_space"] = "пробел";
     
-    
+    $g_lang["use_ctrl_to_move_cells"] = "Используйте Ctrl + ← ↑ → ↓ клавиши для перемещения между ячейками.";
 ?>

lang/sv/create_graph_by_incidence_matrix.php

@@ -14,4 +14,5 @@
     $g_lang["m_keyWords"] = "incidensmatris, graf, skapa en graf, skapa en graf online, använda insidensmatris";
     $g_lang["m_description"] = "Skapa en graf med incidensmatris online";
 
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

lang/sv/create_graph_by_matrix.php

@@ -17,4 +17,5 @@
     $g_lang["separator_commo"] = "kommatecken";
     $g_lang["separator_space"] = "utrymme";
 
+    $g_lang["use_ctrl_to_move_cells"] = "Use Ctrl + ← ↑ → ↓ keys to move between cells.";
 ?>

tpl/create_graph_by_incidence_matrix.php

@@ -8,6 +8,7 @@
 // Current matrix size
 var g_MatrixWidth  = 2;
 var g_MatrixHeight = 3;
+var g_ctrlPressed = false;
 
 function PackMatrix()
 {
@@ -17,7 +18,7 @@ function PackMatrix()
     {
         for (j = 0; j < g_MatrixWidth; j++)
         {
-            var element = document.getElementsByName("field" + i + j)[0];
+            var element = document.getElementsByName("field" + i + "_" + j)[0];
             matrix = matrix + (element.value.length > 0 ? element.value : "0") + ", ";
         }
         matrix = matrix + "\n";
@@ -25,9 +26,83 @@ function PackMatrix()
     return matrix;
 }
 
-function CopyMatrixToTextInput()
+function getCharCode(event) 
+{
+    if (event.which == null) 
+    { // IE
+        return event.keyCode;
+    }
+
+    if (event.which != 0) 
+    { // not IE
+        return event.which; 
+    }
+
+    return null;
+}
+    
+function getChar(event) 
+{
+    var k = getCharCode(event)
+    return String.fromCharCode(k);
+}
+
+function CopyMatrixToTextInput(event)
 {
     document.getElementById("IncidenceMatrixFieldPage").value = PackMatrix();
+    // Move between cells.
+    if (event)
+    {
+        var key = getChar(event);
+        var code = getCharCode(event);
+        console.log(key + " code=" + code);
+        if (g_ctrlPressed)
+        {
+            var moveFocus = function(offsetX, offsetY)
+            {
+                var focused_element = document.activeElement;
+                
+                if (focused_element && focused_element.name.includes("field"))
+                {
+                    var name = focused_element.name;
+                    var coords = name.replace('field','').split("_");
+                    if (coords.length == 2)
+                    {
+                        var focusName = "field" + (parseInt(coords[0]) + offsetY) + "_" + (parseInt(coords[1]) + offsetX)
+                        var element   = document.getElementsByName(focusName)[0];
+                        if (element)
+                        {
+                            element.focus();
+                        }
+                    }
+                }
+            }
+            switch (code)
+            {
+                case 38: // Up
+                {                    
+                    moveFocus(0, -1);
+                    break;
+                }
+                case 40: // Down
+                {
+                    moveFocus(0, 1);
+                    break;
+                }
+                case 37: // Left
+                {
+                    moveFocus(-1, 0);
+                    break;
+                }
+                case 39: // Right
+                {
+                    moveFocus(1, 0);
+                    break;
+                }
+            }
+
+        }
+    }
 }
 
 function _ShowTextInput()
@@ -88,7 +163,7 @@ function CopyMatrixToMatrixInput()
         {
             for (var j = 0; j < cols[0].length; j++)
             {
-                var element = document.getElementsByName("field" + i + j)[0];
+                var element = document.getElementsByName("field" + i + "_" + j)[0];
                 element.value = cols[i][j];
             }
         }
@@ -104,9 +179,9 @@ function CreateInputElement(col, row)
     var input = document.createElement("input");
     input.type = "text";
     input.size = 3;
-    input.name = "field" + col + row;
+    input.name = "field" + col + "_" + row;
     input.value = 0;
-    input.onkeyup = function() {CopyMatrixToTextInput();};
+    input.onkeyup = function(event) {CopyMatrixToTextInput(event);};
     
     return input;
 }
@@ -193,6 +268,15 @@ window.onload = function ()
     
     CopyMatrixToMatrixInput();
 
+    $(document).keydown(function(event) {
+        if (event.which == "17" || event.which == "91")
+          g_ctrlPressed = true;
+    });
+
+    $(document).keyup(function(event) {
+        if (event.which == "17" || event.which == "91")
+            g_ctrlPressed = false;
+    });    
 }
 </script>
 
@@ -228,16 +312,16 @@ window.onload = function ()
 </form>
 <div id="MatrixForm">
 <form id="AdjacencyMatrixFieldInput" role="form">
-<input type="text" name="field00" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field0_0" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
-<input type="text" name="field01" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field0_1" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
 <br name="row0">
 
-<input type="text" name="field10" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field1_0" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
-<input type="text" name="field11" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field1_1" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
 <br name="row1">
 
-<input type="text" name="field20" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field2_0" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
-<input type="text" name="field21" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field2_1" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
 <br name="row2">
 
 <span name="matrixEnd"></span>
@@ -248,6 +332,7 @@ window.onload = function ()
 <button type="button" onclick="IncSizeH()" value="add" name="add" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span>
 <?= L('add_node_to_matrix') ?>
 </button>
+<p><small><?= L('use_ctrl_to_move_cells')?></small></p>
 </div>
 
 

tpl/create_graph_by_matrix.php

@@ -8,6 +8,7 @@
 
 // Current matrix size
 var g_MatrixSize = 3;
+var g_ctrlPressed = false;
 
 function PackMatrix()
 {
@@ -17,7 +18,7 @@ function PackMatrix()
     {
         for (j = 0; j < g_MatrixSize; j++)
         {
-            var element = document.getElementsByName("field" + i + j)[0];
+            var element = document.getElementsByName("field" + i + "_" + j)[0];
             matrix = matrix + (element.value.length > 0 ? element.value : "0") + ", ";
         }
         matrix = matrix + "\n";
@@ -25,9 +26,84 @@ function PackMatrix()
     return matrix;
 }
 
-function CopyMatrixToTextInput()
+function getCharCode(event) 
+{
+    if (event.which == null) 
+    { // IE
+        return event.keyCode;
+    }
+
+    if (event.which != 0) 
+    { // все кроме IE
+        return event.which; // остальные
+    }
+
+    return null; // спец. символ
+}
+    
+function getChar(event) 
+{
+    var k = getCharCode(event)
+    return String.fromCharCode(k); // остальные
+}
+
+function CopyMatrixToTextInput(event)
 {
     document.getElementById("AdjacencyMatrixFieldPage").value = PackMatrix();
+
+    // Move between cells.
+    if (event)
+    {
+        var key = getChar(event);
+        var code = getCharCode(event);
+        console.log(key + " code=" + code);
+        if (g_ctrlPressed)
+        {
+            var moveFocus = function(offsetX, offsetY)
+            {
+                var focused_element = document.activeElement;
+                
+                if (focused_element && focused_element.name.includes("field"))
+                {
+                    var name = focused_element.name;
+                    var coords = name.replace('field','').split("_");
+                    if (coords.length == 2)
+                    {
+                        var focusName = "field" + (parseInt(coords[0]) + offsetY) + "_" + (parseInt(coords[1]) + offsetX)
+                        var element   = document.getElementsByName(focusName)[0];
+                        if (element)
+                        {
+                            element.focus();
+                        }
+                    }
+                }
+            }
+            switch (code)
+            {
+                case 38: // Up
+                {                    
+                    moveFocus(0, -1);
+                    break;
+                }
+                case 40: // Down
+                {
+                    moveFocus(0, 1);
+                    break;
+                }
+                case 37: // Left
+                {
+                    moveFocus(-1, 0);
+                    break;
+                }
+                case 39: // Right
+                {
+                    moveFocus(1, 0);
+                    break;
+                }
+            }
+
+        }
+    }
 }
 
 function _ShowTextInput()
@@ -62,15 +138,12 @@ function ShowMatrixInput()
     document.getElementById("showText").className = "btn btn-default";
 }
 
-
-
 function CopyMatrixToMatrixInput()
 {
     var graph = new Graph();
     
     var colsObj = {};
-    var rowsObj = {};
+    var rowsObj = {};    
-    
 
     if (graph.TestAdjacencyMatrix($( "#AdjacencyMatrixFieldPage" ).val(), rowsObj, colsObj))
     {
@@ -86,7 +159,7 @@ function CopyMatrixToMatrixInput()
         {
             for (var j = 0; j < rows.length; j++)
             {
-                var element = document.getElementsByName("field" + i + j)[0];
+                var element = document.getElementsByName("field" + i + "_"+ j)[0];
                 element.value = cols[i][j];
             }
         }
@@ -102,9 +175,9 @@ function CreateInputElement(col, row)
     var input = document.createElement("input");
     input.type = "text";
     input.size = 3;
-    input.name = "field" + col + row;
+    input.name = "field" + col + "_" + row;
     input.value = 0;
-    input.onkeyup = function() {CopyMatrixToTextInput();};
+    input.onkeyup = function(event) {CopyMatrixToTextInput(event);};
     
     return input;
 }
@@ -194,6 +267,16 @@ window.onload = function ()
                                             });
     
     CopyMatrixToMatrixInput();
+
+    $(document).keydown(function(event) {
+        if (event.which == "17" || event.which == "91")
+          g_ctrlPressed = true;
+    });
+
+    $(document).keyup(function(event) {
+        if (event.which == "17" || event.which == "91")
+            g_ctrlPressed = false;
+    });    
 }
 
 </script>
@@ -232,19 +315,19 @@ window.onload = function ()
 </form>
 <div id="MatrixForm">
 <form id="AdjacencyMatrixFieldInput" role="form">
-<input type="text" name="field00" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field0_0" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
-<input type="text" name="field01" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field0_1" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
-<input type="text" name="field02" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field0_2" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
 <br name="row0">
 
-<input type="text" name="field10" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field1_0" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
-<input type="text" name="field11" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field1_1" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
-<input type="text" name="field12" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field1_2" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
 <br name="row1">
 
-<input type="text" name="field20" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field2_0" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
-<input type="text" name="field21" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field2_1" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
-<input type="text" name="field22" size="3" value = "0" onkeyup="CopyMatrixToTextInput()">
+<input type="text" name="field2_2" size="3" value = "0" onkeyup="CopyMatrixToTextInput(event)">
 <br name="row2">
 
 <span name="matrixEnd"></span>
@@ -252,6 +335,7 @@ window.onload = function ()
 <button type="button" onclick="IncSize()" value="add" name="add" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span>
     <?= L('add_node_to_matrix') ?>
 </button>
+<p><small><?= L('use_ctrl_to_move_cells')?></small></p>
 </div>
 				</div>
 				<div class="col-md-4">
@@ -300,7 +384,6 @@ window.onload = function ()
                 <? if (L('current_language') == "ru"): ?>
     <section style="height:90px;text-align: center;" id="info" class="hidden-phone">
 <!-- Yandex.RTB R-A-202319-1 -->
-    <a href="https://yasobe.ru/na/oplata_hostinga_i_domennogo_imeni">🤑 Поддержать проект деньгами 🤑</a>
 <!--
 <div style="text-align:center;">
 <div id="yandex_rtb_R-A-202319-1" style="display: inline-block;"></div>