feat: added an edit mode for all operations in accessible ui, fixed shortcut issues and fixed tab when selecting attribution type in assign operation

css/accessible/design.css

@@ -1,99 +1,106 @@
 .container {
-    background-color: #3d8bd4;
-    width: 1020px;
-    padding: 15px;
-    border-radius: 10px;
+  background-color: #3d8bd4;
+  width: 1020px;
+  padding: 15px;
+  border-radius: 10px;
 }
 
 header {
-    margin: 5px;
-    font-weight: bold;
+  margin: 5px;
+  font-weight: bold;
 }
 
 header h1 {
-    color: #A7C0DC;
-    font-size: 20px;
+  color: #a7c0dc;
+  font-size: 20px;
 }
 
 #nav_ir_para_conteudo {
-    margin-left: 200px;
-    padding-top: 15px;
+  margin-left: 200px;
+  padding-top: 15px;
 }
 
 #nav_ir_para_conteudo a {
-    color: white;
-    font-size: 15px;
+  color: white;
+  font-size: 15px;
 }
 
 #main {
-    width: 100%;
-    margin: 5px;
+  width: 100%;
+  margin: 5px;
 }
 
 fieldset {
-    width: 100%;
-    background-color: white;
-    position: relative;
-    display: block;
-    margin-top: 15px;
-    border-radius: 10px;
+  width: 100%;
+  background-color: white;
+  position: relative;
+  display: block;
+  margin-top: 15px;
+  border-radius: 10px;
 }
 
 legend {
-    width: 200px;
-    border: 3px solid silver;
-    border-radius: 10px;
-    background-color: #3d8bd4;
-    margin-left: 50px;
+  width: 200px;
+  border: 3px solid silver;
+  border-radius: 10px;
+  background-color: #3d8bd4;
+  margin-left: 50px;
 }
 
 legend h1 {
-    font-size: 20px;
-    font-family: "Segoe UI", "Arial", "Times New Roman";
-    color: white;
-    padding-left: 10px;
+  font-size: 20px;
+  font-family: "Segoe UI", "Arial", "Times New Roman";
+  color: white;
+  padding-left: 10px;
 }
 
 footer {
-    width: 97%;
-    color: #A7C0DC;
-    background-color: black;
-    font-size: 20px;
-    margin-left: 20px;
-    font-weight: bold;
-    padding: 10px;
+  width: 97%;
+  color: #a7c0dc;
+  background-color: black;
+  font-size: 20px;
+  margin-left: 20px;
+  font-weight: bold;
+  padding: 10px;
 }
 
 footer h1 {
-    color: #A7C0DC;
-    font-size: 20px;
+  color: #a7c0dc;
+  font-size: 20px;
 }
 
 .acessible-terminal {
-    border-radius: 10px;
+  border-radius: 10px;
 }
 
 .acessible-terminal .bash-title {
-    border-radius: 10px 10px 0 0;
+  border-radius: 10px 10px 0 0;
 }
 
 .variable-item {
-    border: solid 1px darkgray;
-    border-radius: 10px;
+  border: solid 1px darkgray;
+  border-radius: 10px;
 }
 
 #htmlOlCommandsVariablesVariables {
-    list-style-type: none;
+  list-style-type: none;
 }
 
 #htmlOlCommandsVariablesOperations {
-    list-style-type: none;
+  list-style-type: none;
 }
 
 #main ol li {
-    margin-bottom: 3px;
+  margin-bottom: 3px;
 }
 
-#main ol li a{
-    text-decoration: none;
-}
+#main ol li a {
+  text-decoration: none;
+}
+
+/* Resume display */
+code {
+  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono,
+    DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+    color: black;
+}

js/accessibleUI/modules/operations/operations-schemes.js

@@ -12,7 +12,8 @@ export const operationScheme = {
     hash: 'UUID for the operation',
     assignedVariable: 'Reference to the assigned variable',
     type: 'ASSIGN',
-    operators: []
+    operators: [],
+    editing: true
 }
 
 // *********************************************************************************
@@ -125,6 +126,7 @@ export function htmlOperationTypeScheme () {
                     <option > selecione</option>
                     ${operationTypesSelect}
                 </select>
+                <span tabindex="0"></span>
             </div>`;
 }
 
@@ -169,6 +171,10 @@ export function htmlAssignVariableScheme () {
                         <div class="col">
                             <div class="row" id="operation<operationId>OperatorsDiv"></div>
                         </div>
+                        <div class="col-11 my-auto" style="display: none;" id="operation<operationId>Display" tabindex="0" operation-id="<operationId>" title="Precione 'Enter' para editar">
+                            <code id="operation<operationId>DisplayCode">
+                            </code>                  
+                        </div>
                         <div class="col-1 my-auto" style="text-align: end;">
                             <div class="row justify-content-end">
                                 <div class="col-1" style="margin-right: 4px;">
@@ -270,6 +276,10 @@ export function printOperationScheme (operation) {
                                 ${variablesSelect}
                             </select>
                         </div>
+                        <div class="col-11 my-auto" style="display: none;" id="operation${operation.hash}Display" tabindex="0" operation-id="${operation.hash}" title="Precione 'Enter' para editar">
+                            <code id="operation${operation.hash}DisplayCode">
+                            </code>                  
+                        </div>
                         <div class="col-1 my-auto" style="text-align: end;">
                             <div class="row justify-content-end">
                                 <div class="col-1" style="margin-right: 4px;">

js/accessibleUI/modules/operations/operations.js

@@ -1,156 +1,238 @@
 // Imports
-import {generateUUID, htmlOlCommandsOperations} from './../../main';
+import { generateUUID, htmlOlCommandsOperations } from "./../../main";
 import {
-    getOperationTypeByValue, getOperatorByHash,
-    getOperatorTypeByValue,
-    htmlAssignVariableScheme,
-    htmlOperationKindScheme, htmlOperationTypeSelect, htmlOperatorValueInputScheme,
-    htmlOperatorVariablesSelectScheme,
-    operationScheme, Operators, operatorScheme, printOperationScheme
+  getOperationTypeByValue,
+  getOperatorByHash,
+  getOperatorTypeByValue,
+  htmlAssignVariableScheme,
+  htmlOperationKindScheme,
+  htmlOperationTypeSelect,
+  htmlOperatorValueInputScheme,
+  htmlOperatorVariablesSelectScheme,
+  operationScheme,
+  Operators,
+  operatorScheme,
+  printOperationScheme,
 } from "./operations-schemes";
-import {getVariableByHash, variables} from "../variables/variables";
+import { getVariableByHash, variables } from "../variables/variables";
 // Imports
 
 export const operations = [];
 
 // Creating operation
-export function createOperation () {
-    let operation = Object.assign({}, operationScheme);
+export function createOperation() {
+  let operation = Object.assign({}, operationScheme);
 
-    operation.hash = generateUUID().replaceAll('-', '');
-    // TODO: Fix
-    operation.assignedVariable = variables[0];
-    operation.operators = [];
+  operation.hash = generateUUID().replaceAll("-", "");
+  // TODO: Fix
+  operation.assignedVariable = variables[0];
+  operation.operators = [];
 
-    operations.push(operation);
+  operations.push(operation);
 
-    let htmlOperation = htmlAssignVariableScheme();
+  let htmlOperation = htmlAssignVariableScheme();
 
-    htmlOperation = htmlOperation.replaceAll('<operationId>', operation.hash);
+  htmlOperation = htmlOperation.replaceAll("<operationId>", operation.hash);
 
-    htmlOlCommandsOperations.insertAdjacentHTML('beforeend', htmlOperation);
+  htmlOlCommandsOperations.insertAdjacentHTML("beforeend", htmlOperation);
 
-    document.getElementById(`operation${operation.hash}AssignVariableSelect`).addEventListener('change', ev => {
-        updateOperationAssignValue(ev.target.getAttribute('operation-id'), ev.target.value);
+  document
+    .getElementById(`operation${operation.hash}AssignVariableSelect`)
+    .addEventListener("change", (ev) => {
+      updateOperationAssignValue(
+        ev.target.getAttribute("operation-id"),
+        ev.target.value
+      );
     });
 
-    document.getElementById(`operation${operation.hash}Delete`).addEventListener('click', ev => {
-        deleteOperation(ev.target.getAttribute('operation-id'));
+  document
+    .getElementById(`operation${operation.hash}Delete`)
+    .addEventListener("click", (ev) => {
+      deleteOperation(ev.target.getAttribute("operation-id"));
     });
 
-    addOperatorKind(operation.hash);
-    updateResume(operation.hash);
+  document
+    .getElementById(`operation${operation.hash}Resume`)
+    .addEventListener("focus", (ev) => {
+      const operationHash = ev.target.getAttribute("operation-id");
 
-    // Changing focus to the variable type after creation for screen readers
-    document.getElementById(`operation${operation.hash}AssignVariableSelect`).focus();
+      manageOperationEditing(operationHash);
+    });
+
+  document
+    .getElementById(`operation${operation.hash}Display`)
+    .addEventListener("keyup", (ev) => {
+      const operationHash = ev.target.getAttribute("operation-id");
+
+      if (ev.key === "Enter") manageOperationEditing(operationHash, true);
+    });
+
+  addOperatorKind(operation.hash);
+  updateResume(operation.hash);
+
+  // Changing focus to the variable type after creation for screen readers
+  document
+    .getElementById(`operation${operation.hash}AssignVariableSelect`)
+    .focus();
 }
 
 // Add operator kind to the operation
-export function addOperatorKind (hash) {
-    let operation = getOperationByHash(hash);
+export function addOperatorKind(hash) {
+  let operation = getOperationByHash(hash);
 
-    console.log(operation);
+  console.log(operation);
 
-    let htmlOperationKind = htmlOperationKindScheme(operation);
+  let htmlOperationKind = htmlOperationKindScheme(operation);
 
-    document.getElementById(`operation${operation.hash}OperatorsDiv`).insertAdjacentHTML('beforeend', htmlOperationKind);
+  document
+    .getElementById(`operation${operation.hash}OperatorsDiv`)
+    .insertAdjacentHTML("beforeend", htmlOperationKind);
 
-    document.getElementById(`operation${operation.hash}KindSelect`).addEventListener('change', ev => {
-        selectedOperationKind(ev.target.getAttribute('operation-id'));
+  document
+    .getElementById(`operation${operation.hash}KindSelect`)
+    .addEventListener("focusout", (ev) => {
+      selectedOperationKind(ev.target.getAttribute("operation-id"));
+      ev.target.parentElement.remove();
     });
 }
 
 // Function to be trigger when the operator kind is selected
-export function selectedOperationKind (operationHash) {
-    let operation = getOperationByHash(operationHash);
+export function selectedOperationKind(operationHash) {
+  let operation = getOperationByHash(operationHash);
 
-    console.log(operation);
+  console.log(operation);
 
-    let kindSelect = document.getElementById(`operation${operation.hash}KindSelect`);
+  let kindSelect = document.getElementById(
+    `operation${operation.hash}KindSelect`
+  );
 
-    // TODO: think into an way to make this dynamic
-    if (kindSelect.value === 'VARIABLE') {
-        insertVariableAfterOperationKind(kindSelect, operation);
-    } else if (kindSelect.value === 'VALUE') {
-        insertValueAfterOperationKind(kindSelect, operation);
-    }
+  // TODO: think into an way to make this dynamic
+  if (kindSelect.value === "VARIABLE") {
+    insertVariableAfterOperationKind(kindSelect, operation);
+  } else if (kindSelect.value === "VALUE") {
+    insertValueAfterOperationKind(kindSelect, operation);
+  }
 }
 
 // Insert variable after operator kind select
-export function insertVariableAfterOperationKind (kindSelect, operation) {
-    let operator = Object.assign({}, operatorScheme);
-
-    operator.hash = generateUUID().replaceAll('-', '');
-    // TODO: Fix ?
-    operator.variable = variables[0];
-    operator.type = getOperatorTypeByValue('VARIABLE');
-
-    let operatorVariableSelect = htmlOperatorVariablesSelectScheme(operation, operator);
-
-    operation.operators.push(operator);
-
-    kindSelect.parentElement.parentElement.insertAdjacentHTML('beforeend', operatorVariableSelect);
-    kindSelect.parentElement.remove();
-
-    insertOperationTypeAtEndOfOperation(operation, operator);
-
-    document.getElementById(`operation${operation.hash}Operator${operator.hash}VariableSelect`).addEventListener('change', ev => {
-        updateOperationOperator(ev.target.getAttribute('operation-id'), ev.target.getAttribute('operator-id'), ev.target.value)
+export function insertVariableAfterOperationKind(kindSelect, operation) {
+  let operator = Object.assign({}, operatorScheme);
+
+  operator.hash = generateUUID().replaceAll("-", "");
+  // TODO: Fix ?
+  operator.variable = variables[0];
+  operator.type = getOperatorTypeByValue("VARIABLE");
+
+  let operatorVariableSelect = htmlOperatorVariablesSelectScheme(
+    operation,
+    operator
+  );
+
+  operation.operators.push(operator);
+
+  kindSelect.parentElement.parentElement.insertAdjacentHTML(
+    "beforeend",
+    operatorVariableSelect
+  );
+
+  insertOperationTypeAtEndOfOperation(operation, operator);
+
+  document
+    .getElementById(
+      `operation${operation.hash}Operator${operator.hash}VariableSelect`
+    )
+    .addEventListener("change", (ev) => {
+      updateOperationOperator(
+        ev.target.getAttribute("operation-id"),
+        ev.target.getAttribute("operator-id"),
+        ev.target.value
+      );
     });
 
-    updateResume(operation.hash);
+  updateResume(operation.hash);
 
-    // Changing focus to the variable select after select for screen readers
-    document.getElementById(`operation${operation.hash}Operator${operator.hash}VariableSelect`).focus();
+  // Changing focus to the variable select after select for screen readers
+  document
+    .getElementById(
+      `operation${operation.hash}Operator${operator.hash}VariableSelect`
+    )
+    .focus();
 }
 
 // Insert value after operator kind select
-export function insertValueAfterOperationKind (kindSelect, operation) {
-    let operator = Object.assign({}, operatorScheme);
-
-    operator.hash = generateUUID().replaceAll('-', '');
-    operator.type = getOperatorTypeByValue('VALUE');
-
-    let operatorValueInput = htmlOperatorValueInputScheme(operation, operator);
-
-    operation.operators.push(operator);
-
-    kindSelect.parentElement.parentElement.insertAdjacentHTML('beforeend', operatorValueInput);
-    kindSelect.parentElement.remove();
-
-    insertOperationTypeAtEndOfOperation(operation, operator);
-
-    document.getElementById(`operation${operation.hash}Operator${operator.hash}ValueInput`).addEventListener('change', ev => {
-        updateOperationOperator(ev.target.getAttribute('operation-id'), ev.target.getAttribute('operator-id'), ev.target.value)
+export function insertValueAfterOperationKind(kindSelect, operation) {
+  let operator = Object.assign({}, operatorScheme);
+
+  operator.hash = generateUUID().replaceAll("-", "");
+  operator.type = getOperatorTypeByValue("VALUE");
+
+  let operatorValueInput = htmlOperatorValueInputScheme(operation, operator);
+
+  operation.operators.push(operator);
+
+  kindSelect.parentElement.parentElement.insertAdjacentHTML(
+    "beforeend",
+    operatorValueInput
+  );
+  kindSelect.parentElement.remove();
+
+  insertOperationTypeAtEndOfOperation(operation, operator);
+
+  document
+    .getElementById(
+      `operation${operation.hash}Operator${operator.hash}ValueInput`
+    )
+    .addEventListener("change", (ev) => {
+      updateOperationOperator(
+        ev.target.getAttribute("operation-id"),
+        ev.target.getAttribute("operator-id"),
+        ev.target.value
+      );
     });
 
-    updateResume(operation.hash);
+  updateResume(operation.hash);
 
-    // Changing focus to the input value after select for screen readers
-    document.getElementById(`operation${operation.hash}Operator${operator.hash}ValueInput`).focus();
+  // Changing focus to the input value after select for screen readers
+  document
+    .getElementById(
+      `operation${operation.hash}Operator${operator.hash}ValueInput`
+    )
+    .focus();
 }
 
 // Add final operation type end of the operation
-export function insertOperationTypeAtEndOfOperation (operation, afterOperator) {
-    let operator = Object.assign({}, operatorScheme);
-
-    operator.hash = generateUUID().replaceAll('-', '');
-    operator.type = getOperatorTypeByValue('OPERATOR');
-    operator.operator = getOperationTypeByValue('SEMICOLON');
-
-    let operationTypeInput = htmlOperationTypeSelect(operation, operator);
-
-    operationTypeInput.replaceAll('<operatorId>', operator.hash);
-    operation.operators.push(operator);
-
-    if (afterOperator.type.value === 'VARIABLE') {
-        document.querySelector(`select[operator-id='${afterOperator.hash}']`).parentElement.insertAdjacentHTML('afterend', operationTypeInput);
-    } else if (afterOperator.type.value === 'VALUE') {
-        document.querySelector(`input[operator-id='${afterOperator.hash}']`).parentElement.insertAdjacentHTML('afterend', operationTypeInput);
-    }
-
-    document.getElementById(`operation${operation.hash}Operator${operator.hash}OperationTypeSelect`).addEventListener('change', ev => {
-        updateOperationOperator(ev.target.getAttribute('operation-id'), ev.target.getAttribute('operator-id'), ev.target.value)
+export function insertOperationTypeAtEndOfOperation(operation, afterOperator) {
+  let operator = Object.assign({}, operatorScheme);
+
+  operator.hash = generateUUID().replaceAll("-", "");
+  operator.type = getOperatorTypeByValue("OPERATOR");
+  operator.operator = getOperationTypeByValue("SEMICOLON");
+
+  let operationTypeInput = htmlOperationTypeSelect(operation, operator);
+
+  operationTypeInput.replaceAll("<operatorId>", operator.hash);
+  operation.operators.push(operator);
+
+  if (afterOperator.type.value === "VARIABLE") {
+    document
+      .querySelector(`select[operator-id='${afterOperator.hash}']`)
+      .parentElement.insertAdjacentHTML("afterend", operationTypeInput);
+  } else if (afterOperator.type.value === "VALUE") {
+    document
+      .querySelector(`input[operator-id='${afterOperator.hash}']`)
+      .parentElement.insertAdjacentHTML("afterend", operationTypeInput);
+  }
+
+  document
+    .getElementById(
+      `operation${operation.hash}Operator${operator.hash}OperationTypeSelect`
+    )
+    .addEventListener("change", (ev) => {
+      updateOperationOperator(
+        ev.target.getAttribute("operation-id"),
+        ev.target.getAttribute("operator-id"),
+        ev.target.value
+      );
     });
 }
 
@@ -158,204 +240,320 @@ export function insertOperationTypeAtEndOfOperation (operation, afterOperator) {
 // Listeners
 // ***********************************************************************
 
-export function updateOperationAssignValue (operationHash, newVariable) {
-    let operation = getOperationByHash(operationHash);
-    let variable = getVariableByHash(newVariable);
+export function updateOperationAssignValue(operationHash, newVariable) {
+  let operation = getOperationByHash(operationHash);
+  let variable = getVariableByHash(newVariable);
 
-    operation.assignedVariable = variable;
+  operation.assignedVariable = variable;
 
-    updateResume(operation.hash);
+  updateResume(operation.hash);
 }
 
-export function updateOperationOperator (operationHash, operatorHash, newValue) {
-    let operation = getOperationByHash(operationHash);
-    let operator = getOperatorByHash(operation, operatorHash);
-
-    switch (operator.type.value) {
-        case 'VARIABLE':
-            let variable = getVariableByHash(newValue);
-            operator.variable = variable;
-            break;
-        case 'VALUE':
-            operator.value = newValue;
-            break;
-        case 'OPERATOR':
-            operator.operator = getOperationTypeByValue(newValue);
-            const operationTypeSelect = document.getElementById(`operation${operation.hash}Operator${operator.hash}OperationTypeSelect`);
-
-            // If the operator isn't a semicolumn, it is the last item on the operator list and teh next elemtn is equal to null, 
-            // we need to add a new operator select
-            if (operator.operator.name !== ';' 
-                && (operation.operators.indexOf(operator) === (operation.operators.length - 1))
-                && operationTypeSelect.parentElement.nextElementSibling == null)
-                addOperatorKind(operation.hash);
-            else if (operator.operator.name === ';' 
-                && (operation.operators.indexOf(operator) === (operation.operators.length - 1))
-                && operationTypeSelect.parentElement.nextElementSibling != null)
-                operationTypeSelect.parentElement.nextElementSibling.remove();
-            else if (operator.operator.name === ';' 
-                && (operation.operators.indexOf(operator) !== (operation.operators.length - 1))
-                && operationTypeSelect.parentElement.nextElementSibling != null) {
-                    let indexOfOperator = operation.operators.indexOf(operator) + 1;
-                    operation.operators.splice(indexOfOperator);
-
-                    let elementSibling = operationTypeSelect.parentElement.nextElementSibling;
-                    let nextElementSibling = operationTypeSelect.parentElement.nextElementSibling;
-                    while(nextElementSibling != null) {
-                        nextElementSibling = elementSibling.nextElementSibling;
-                        elementSibling.remove();
-                        elementSibling = nextElementSibling;
-                    }
-                }
-            break;
-    }
+export function updateOperationOperator(operationHash, operatorHash, newValue) {
+  let operation = getOperationByHash(operationHash);
+  let operator = getOperatorByHash(operation, operatorHash);
+
+  switch (operator.type.value) {
+    case "VARIABLE":
+      let variable = getVariableByHash(newValue);
+      operator.variable = variable;
+      break;
+    case "VALUE":
+      operator.value = newValue;
+      break;
+    case "OPERATOR":
+      operator.operator = getOperationTypeByValue(newValue);
+      const operationTypeSelect = document.getElementById(
+        `operation${operation.hash}Operator${operator.hash}OperationTypeSelect`
+      );
+
+      // If the operator isn't a semicolumn, it is the last item on the operator list and teh next elemtn is equal to null,
+      // we need to add a new operator select
+      if (
+        operator.operator.name !== ";" &&
+        operation.operators.indexOf(operator) ===
+          operation.operators.length - 1 &&
+        operationTypeSelect.parentElement.nextElementSibling == null
+      )
+        addOperatorKind(operation.hash);
+      else if (
+        operator.operator.name === ";" &&
+        operation.operators.indexOf(operator) ===
+          operation.operators.length - 1 &&
+        operationTypeSelect.parentElement.nextElementSibling != null
+      )
+        operationTypeSelect.parentElement.nextElementSibling.remove();
+      else if (
+        operator.operator.name === ";" &&
+        operation.operators.indexOf(operator) !==
+          operation.operators.length - 1 &&
+        operationTypeSelect.parentElement.nextElementSibling != null
+      ) {
+        let indexOfOperator = operation.operators.indexOf(operator) + 1;
+        operation.operators.splice(indexOfOperator);
+
+        let elementSibling =
+          operationTypeSelect.parentElement.nextElementSibling;
+        let nextElementSibling =
+          operationTypeSelect.parentElement.nextElementSibling;
+        while (nextElementSibling != null) {
+          nextElementSibling = elementSibling.nextElementSibling;
+          elementSibling.remove();
+          elementSibling = nextElementSibling;
+        }
+      }
+      break;
+  }
 
-    updateResume(operation.hash);
+  updateResume(operation.hash);
 }
 
 // Here we remove all operation that include the variable received as parameter
-export function deleteOperationByVariable (variable) {
-    const operationsToRemove = [];
-
-    for (const i in operations) {
+export function deleteOperationByVariable(variable) {
+  const operationsToRemove = [];
 
-        console.log(operations[i]);
+  for (const i in operations) {
+    console.log(operations[i]);
 
-        if (operations[i].assignedVariable.hash === variable.hash) {
-            document.getElementById(`operation${operations[i].hash}Li`).remove();
-            operationsToRemove.push(operations[i]);
-            continue;
-        }
+    if (operations[i].assignedVariable.hash === variable.hash) {
+      document.getElementById(`operation${operations[i].hash}Li`).remove();
+      operationsToRemove.push(operations[i]);
+      continue;
+    }
 
-        for (const j in operations[i].operators) {
-            console.log(j);
-            console.log(operations[i].operators[j]);
-            if (operations[i].operators[j].type.value === Operators.VARIABLE) {
-                if (operations[i].operators[j].variable.hash === variable.hash) {
-                    document.getElementById(`operation${operations[i].hash}Li`).remove();
-                    operationsToRemove.push(operations[i]);
-                    // if (operation.operators.length > 2) {
-                    //
-                    // } else {
-                    //
-                    // }
-                }
-            }
+    for (const j in operations[i].operators) {
+      console.log(j);
+      console.log(operations[i].operators[j]);
+      if (operations[i].operators[j].type.value === Operators.VARIABLE) {
+        if (operations[i].operators[j].variable.hash === variable.hash) {
+          document.getElementById(`operation${operations[i].hash}Li`).remove();
+          operationsToRemove.push(operations[i]);
+          // if (operation.operators.length > 2) {
+          //
+          // } else {
+          //
+          // }
         }
+      }
     }
+  }
 
-    for (const i in operationsToRemove) {
-        operations.splice(operations.indexOf(operationsToRemove[i]), 1);
-    }
+  for (const i in operationsToRemove) {
+    operations.splice(operations.indexOf(operationsToRemove[i]), 1);
+  }
 }
 
 // Here we remove all operation that include the variable received as parameter
-export function deleteOperation (hash) {
-    const operation = getOperationByHash(hash);
+export function deleteOperation(hash) {
+  const operation = getOperationByHash(hash);
 
-    document.getElementById(`operation${hash}Li`).remove();
+  document.getElementById(`operation${hash}Li`).remove();
 
-    operations.splice(operations.indexOf(operation), 1);
+  operations.splice(operations.indexOf(operation), 1);
 }
 
 // Here we remove all operation
-export function deleteAllOperation () {
-    for (let i = 0; i < operations.length; i++) {
-        document.getElementById(`operation${operations[i].hash}Li`).remove();
-    }
+export function deleteAllOperation() {
+  for (let i = 0; i < operations.length; i++) {
+    document.getElementById(`operation${operations[i].hash}Li`).remove();
+  }
 
-    operations.length = 0;
+  operations.length = 0;
 }
 
+// ***********************************************************************
+// Managing operation editing
+// ***********************************************************************
+
+const manageOperationEditing = (hash, enableForEditing = false) => {
+  const operation = getOperationByHash(hash);
+  const operationForm = document.getElementById(
+    `operation${operation.hash}Form`
+  );
+
+  switch (operation.type) {
+    case "ASSIGN":
+      if (operation.editing && !enableForEditing) {
+        // Editing fields
+        operationForm.childNodes[1].childNodes[1].style.display = "none";
+        operationForm.childNodes[1].childNodes[3].style.display = "none";
+        operationForm.childNodes[1].childNodes[5].style.display = "none";
+
+        // Resume field
+        operationForm.childNodes[1].childNodes[7].style.display = "inline";
+
+        operation.editing = false;
+      } else if (enableForEditing) {
+        // Editing fields
+        operationForm.childNodes[1].childNodes[1].style.display = "inline";
+        operationForm.childNodes[1].childNodes[3].style.display = "inline";
+        operationForm.childNodes[1].childNodes[5].style.display = "inline";
+
+        // Resume field
+        operationForm.childNodes[1].childNodes[7].style.display = "none";
+
+        // Changing focus to firt child
+        document
+          .getElementById(`operation${operation.hash}AssignVariableSelect`)
+          .focus();
+
+        operation.editing = true;
+      }
+      break;
+    case "PRINT":
+      if (operation.editing && !enableForEditing) {
+        // Editing fields
+        operationForm.childNodes[1].childNodes[1].style.display = "none";
+        operationForm.childNodes[1].childNodes[3].style.display = "none";
+
+        // Resume field
+        operationForm.childNodes[1].childNodes[5].style.display = "inline";
+
+        operation.editing = false;
+      } else if (enableForEditing) {
+        // Editing fields
+        operationForm.childNodes[1].childNodes[1].style.display = "inline";
+        operationForm.childNodes[1].childNodes[3].style.display = "inline";
+
+        // Resume field
+        operationForm.childNodes[1].childNodes[5].style.display = "none";
+
+        // Changing focus to firt child
+        document
+          .getElementById(`operation${operation.hash}VariableSelectLabel`)
+          .focus();
+
+        operation.editing = true;
+      }
+      break;
+  }
+};
+
 // ***********************************************************************
 // Updating variable resume
 // ***********************************************************************
 
-function updateResume (hash) {
-    document.getElementById(`operation${hash}Resume`).setAttribute('title', generateResume(hash));
+function updateResume(hash) {
+  const resume = generateResume(hash);
+
+  document.getElementById(`operation${hash}DisplayCode`).innerText =
+    resume.display;
+  document
+    .getElementById(`operation${hash}Resume`)
+    .setAttribute("title", resume.resume);
 }
 
-function generateResume (hash) {
-    const operation = getOperationByHash(hash);
-
-    let resume;
-    switch (operation.type) {
-        case 'ASSIGN':
-            resume = `${operation.assignedVariable.name}, recebe: `;
-
-            for (const i in operation.operators) {
-                console.log(operation.operators[i]);
-                switch (operation.operators[i].type.value) {
-                    case Operators.OPERATOR:
-                        resume += `${operation.operators[i].operator.friendlyName} `;
-                        break;
-                    case Operators.VALUE:
-                        resume += `${operation.operators[i].value} `;
-                        break;
-                    case Operators.VARIABLE:
-                        resume += `${operation.operators[i].variable.name} `;
-                        break;
-                }
-            }
+function generateResume(hash) {
+  const operation = getOperationByHash(hash);
+
+  let resume;
+  let display;
+  switch (operation.type) {
+    case "ASSIGN":
+      resume = `${operation.assignedVariable.name}, recebe: `;
+      display = `${operation.assignedVariable.name} <- `;
+
+      for (const i in operation.operators) {
+        console.log(operation.operators[i]);
+        switch (operation.operators[i].type.value) {
+          case Operators.OPERATOR:
+            resume += `${operation.operators[i].operator.friendlyName} `;
+            display += `${operation.operators[i].operator.name} `;
             break;
-        case 'PRINT':
-            resume = `Escreva a variável: ${operation.assignedVariable.name}`
-    }
-
-    return resume;
+          case Operators.VALUE:
+            resume += `${operation.operators[i].value} `;
+            display += `${operation.operators[i].value} `;
+            break;
+          case Operators.VARIABLE:
+            resume += `${operation.operators[i].variable.name} `;
+            display += `${operation.operators[i].variable.name} `;
+            break;
+        }
+      }
+      break;
+    case "PRINT":
+      resume = `Escreva a variável: ${operation.assignedVariable.name}`;
+      display = `escreva (${operation.assignedVariable.name});`;
+      break;
+  }
+
+  return { resume: resume, display: display };
 }
 
 // ***********************************************************************
 // Print
 // ***********************************************************************
 
-export function createPrintOperation () {
-    const operation = Object.assign({}, operationScheme);
-    operation.hash = generateUUID().replaceAll('-', '');
-    operation.assignedVariable = variables.length > 0 ? variables[0] : null;
-    operation.type = 'PRINT';
+export function createPrintOperation() {
+  const operation = Object.assign({}, operationScheme);
+  operation.hash = generateUUID().replaceAll("-", "");
+  operation.assignedVariable = variables.length > 0 ? variables[0] : null;
+  operation.type = "PRINT";
 
-    operations.push(operation);
+  operations.push(operation);
 
-    const printOperation = printOperationScheme(operation);
-    htmlOlCommandsOperations.insertAdjacentHTML('beforeend', printOperation);
+  const printOperation = printOperationScheme(operation);
+  htmlOlCommandsOperations.insertAdjacentHTML("beforeend", printOperation);
 
-    updateResume(operation.hash);
+  updateResume(operation.hash);
 
-    // Changing focus to the variable type after creation for screen readers
-    document.getElementById(`operation${operation.hash}VariableSelectLabel`).focus();
+  // Changing focus to the variable type after creation for screen readers
+  document
+    .getElementById(`operation${operation.hash}VariableSelectLabel`)
+    .focus();
 
-    document.getElementById(`operation${operation.hash}VariableSelect`).addEventListener('change', ev => {
-        updatePrintOperation(ev.target.getAttribute('operation-id'), ev.target.value);
+  document
+    .getElementById(`operation${operation.hash}VariableSelect`)
+    .addEventListener("change", (ev) => {
+      updatePrintOperation(
+        ev.target.getAttribute("operation-id"),
+        ev.target.value
+      );
     });
 
-    document.getElementById(`operation${operation.hash}Delete`).addEventListener('click', ev => {
-        deleteOperation(ev.target.getAttribute('operation-id'));
+  document
+    .getElementById(`operation${operation.hash}Delete`)
+    .addEventListener("click", (ev) => {
+      deleteOperation(ev.target.getAttribute("operation-id"));
+    });
+
+  document
+    .getElementById(`operation${operation.hash}Resume`)
+    .addEventListener("focus", (ev) => {
+      const operationHash = ev.target.getAttribute("operation-id");
+
+      manageOperationEditing(operationHash);
+    });
+
+  document
+    .getElementById(`operation${operation.hash}Display`)
+    .addEventListener("keyup", (ev) => {
+      const operationHash = ev.target.getAttribute("operation-id");
+
+      if (ev.key === "Enter") manageOperationEditing(operationHash, true);
     });
 }
 
-// TODO: 
+// TODO:
 // terminal => basico
-function updatePrintOperation (hash, newValue) {
-    const operation = getOperationByHash(hash);
-    const  variable = getVariableByHash(newValue);
+function updatePrintOperation(hash, newValue) {
+  const operation = getOperationByHash(hash);
+  const variable = getVariableByHash(newValue);
 
-    operation.assignedVariable = variable;
-    updateResume(operation.hash);
+  operation.assignedVariable = variable;
+  updateResume(operation.hash);
 }
 
-
 // ***********************************************************************
 // Util
 // ***********************************************************************
 
-export function getOperationByHash (hash) {
-    for (let i = 0; i < operations.length; i++) {
-        if (operations[i].hash === hash)
-            return operations[i];
-    }
+export function getOperationByHash(hash) {
+  for (let i = 0; i < operations.length; i++) {
+    if (operations[i].hash === hash) return operations[i];
+  }
 
-    return null;
+  return null;
 }
 
-// ***********************************************************************
+// ***********************************************************************

js/accessibleUI/modules/variables/variables-schemes.js

@@ -8,7 +8,8 @@ export const variableScheme = {
     hash: 'UUID for the variable',
     name: 'Variable name',
     type: 'Varaible type',
-    value: 'Variable value'
+    value: 'Variable value',
+    editing: true
 };
 
 // *********************************************************************************
@@ -79,9 +80,6 @@ export function htmlVariableScheme () {
     return `<li id="variable<variableId>Li">
                 <form id="variable<variableId>Form">
                     <div class="row p-2 w-100 variable-item" style="background-color: antiquewhite;">
-                        <!-- <div class="col-1 text-center my-auto">
-                           <h5>${variables.length}</h5>
-                        </div> -->
                         <div class="col-2">
                             <select name="tipo" class="form-control" title="Tipo da variável" id="variable<variableId>Type" variable-id="<variableId>">
                                 ${variableTypesHtml}
@@ -96,6 +94,10 @@ export function htmlVariableScheme () {
                         <div class="col-2">
                             <input type="${VariableType[0].htmlType}" class="form-control" id ="variable<variableId>Value" title="Valor da variável" value="0" variable-id="<variableId>">
                         </div>
+                        <div class="col-7 my-auto" style="display: none;" id="variable<variableId>Display" tabindex="0" variable-id="<variableId>" title="Precione 'Enter' para editar">
+                            <code id="variable<variableId>DisplayCode">
+                            </code>                  
+                        </div>
                         <div class="col my-auto" style="text-align: end;">
                             <div class="row justify-content-end">
                                 <div class="col-1">

js/accessibleUI/modules/variables/variables.js

@@ -1,66 +1,90 @@
 // Imports
-import {htmlOlCommandsVariables, generateUUID} from './../../main';
+import { htmlOlCommandsVariables, generateUUID } from "./../../main";
 import {
-    getVariableTypeByValue,
-    htmlVariableScheme,
-    variableScheme,
-    VariableType
+  getVariableTypeByValue,
+  htmlVariableScheme,
+  variableScheme,
+  VariableType,
 } from "./variables-schemes";
-import {deleteOperationByVariable} from "../operations/operations";
+import { deleteOperationByVariable } from "../operations/operations";
 // Imports
 
 export const variables = [];
 let variablesIndex = 0;
 
 // Creating variable
-export function createVariable () {
-    const variable = Object.assign({}, variableScheme);
+export function createVariable() {
+  const variable = Object.assign({}, variableScheme);
 
-    variable.hash = generateUUID().replaceAll('-', '');
-    variable.name = 'var' + variablesIndex;
-    variable.type = VariableType[0];
-    variable.value = variable.type.defaultValue;
+  variable.hash = generateUUID().replaceAll("-", "");
+  variable.name = "var" + variablesIndex;
+  variable.type = VariableType[0];
+  variable.value = variable.type.defaultValue;
 
-    variables.push(variable);
+  variables.push(variable);
 
-    variablesIndex++;
+  variablesIndex++;
 
-    let htmlVariable = htmlVariableScheme();
+  let htmlVariable = htmlVariableScheme();
 
-    htmlVariable = htmlVariable.replaceAll('<variableId>', variable.hash);
-    htmlVariable = htmlVariable.replaceAll('<variableName>', variable.name);
+  htmlVariable = htmlVariable.replaceAll("<variableId>", variable.hash);
+  htmlVariable = htmlVariable.replaceAll("<variableName>", variable.name);
 
-    htmlOlCommandsVariables.insertAdjacentHTML('beforeend', htmlVariable);
+  htmlOlCommandsVariables.insertAdjacentHTML("beforeend", htmlVariable);
 
-    document.getElementById(`variable${variable.hash}Type`).addEventListener('change', ev => {
-        const variableHash = ev.target.getAttribute('variable-id');
+  document
+    .getElementById(`variable${variable.hash}Type`)
+    .addEventListener("change", (ev) => {
+      const variableHash = ev.target.getAttribute("variable-id");
 
-        updateVariable(variableHash);
+      updateVariable(variableHash);
     });
 
-    document.getElementById(`variable${variable.hash}Name`).addEventListener('change', ev => {
-        const variableHash = ev.target.getAttribute('variable-id');
+  document
+    .getElementById(`variable${variable.hash}Name`)
+    .addEventListener("change", (ev) => {
+      const variableHash = ev.target.getAttribute("variable-id");
 
-        updateVariable(variableHash);
+      updateVariable(variableHash);
     });
 
-    document.getElementById(`variable${variable.hash}Value`).addEventListener('change', ev => {
-        const variableHash = ev.target.getAttribute('variable-id');
+  document
+    .getElementById(`variable${variable.hash}Value`)
+    .addEventListener("change", (ev) => {
+      const variableHash = ev.target.getAttribute("variable-id");
 
-        updateVariable(variableHash);
+      updateVariable(variableHash);
     });
 
-    document.getElementById(`variable${variable.hash}Delete`).addEventListener('click', ev => {
-        const variableHash = ev.target.getAttribute('variable-id');
+  document
+    .getElementById(`variable${variable.hash}Delete`)
+    .addEventListener("click", (ev) => {
+      const variableHash = ev.target.getAttribute("variable-id");
 
-        deleteVariable(variableHash);
+      deleteVariable(variableHash);
     });
 
-    updateResume(variable.hash);
-    updateAllVariableSelect();
+  document
+    .getElementById(`variable${variable.hash}Resume`)
+    .addEventListener("focus", (ev) => {
+      const variableHash = ev.target.getAttribute("variable-id");
 
-    // Changing focus to the variable type after creation for screen readers
-    document.getElementById(`variable${variable.hash}Type`).focus();
+      manageVariableEditing(variableHash);
+    });
+
+  document
+    .getElementById(`variable${variable.hash}Display`)
+    .addEventListener("keyup", (ev) => {
+      const variableHash = ev.target.getAttribute("variable-id");
+
+      if (ev.key === "Enter") manageVariableEditing(variableHash, true);
+    });
+
+  updateResume(variable.hash);
+  updateAllVariableSelect();
+
+  // Changing focus to the variable type after creation for screen readers
+  document.getElementById(`variable${variable.hash}Type`).focus();
 }
 
 // *********************************************************************************
@@ -71,98 +95,145 @@ let variableName;
 let variableType;
 let variableValue;
 
-function updateVariable (hash) {
-    const variable = getVariableByHash(hash);
+function updateVariable(hash) {
+  const variable = getVariableByHash(hash);
 
-    variableName = document.getElementById(`variable${hash}Name`).value;
-    if (variable.name !== variableName) {
-        variable.name = variableName;
-    }
+  variableName = document.getElementById(`variable${hash}Name`).value;
+  if (variable.name !== variableName) {
+    variable.name = variableName;
+  }
 
-    variableType = getVariableTypeByValue(document.getElementById(`variable${hash}Type`).value);
-    if (variable.type !== variableType) {
-        variable.type = variableType;
+  variableType = getVariableTypeByValue(
+    document.getElementById(`variable${hash}Type`).value
+  );
+  if (variable.type !== variableType) {
+    variable.type = variableType;
 
-        document.getElementById(`variable${hash}Value`).type = variable.type.htmlType;
-        document.getElementById(`variable${hash}Value`).value = variable.type.defaultValue;
-    }
+    document.getElementById(`variable${hash}Value`).type =
+      variable.type.htmlType;
+    document.getElementById(`variable${hash}Value`).value =
+      variable.type.defaultValue;
+  }
 
-    variableValue = document.getElementById(`variable${hash}Value`).value;
-    if (variable.value !== variableValue) {
-        variable.value = variableValue;
-    }
+  variableValue = document.getElementById(`variable${hash}Value`).value;
+  if (variable.value !== variableValue) {
+    variable.value = variableValue;
+  }
 
-    updateResume(hash);
+  updateResume(hash);
 }
 
 // *********************************************************************************
 
 // Deleting variable
-export function deleteVariable (hash) {
-    const variable = getVariableByHash(hash);
+export function deleteVariable(hash) {
+  const variable = getVariableByHash(hash);
 
-    document.getElementById(`variable${hash}Li`).remove();
+  document.getElementById(`variable${hash}Li`).remove();
 
-    deleteOperationByVariable(variable);
-    variables.splice(variables.indexOf(variable), 1);
+  deleteOperationByVariable(variable);
+  variables.splice(variables.indexOf(variable), 1);
 
-    updateAllVariableSelect();
+  updateAllVariableSelect();
 }
 
 // Deleting all variable
-export function deleteAllVariable () {
-    for (let i = 0; i < variables.length; i++) {
-        document.getElementById(`variable${variables[i].hash}Li`).remove();
-    }
+export function deleteAllVariable() {
+  for (let i = 0; i < variables.length; i++) {
+    document.getElementById(`variable${variables[i].hash}Li`).remove();
+  }
 
-    variables.length = 0
+  variables.length = 0;
 }
 
+// ***********************************************************************
+// Managing variable editing
+// ***********************************************************************
+
+const manageVariableEditing = (hash, enableForEditing = false) => {
+  const variable = getVariableByHash(hash);
+  const variableForm = document.getElementById(`variable${variable.hash}Form`);
+
+  if (variable.editing && !enableForEditing) {
+    // Editing fields
+    variableForm.childNodes[1].childNodes[1].style.display = "none";
+    variableForm.childNodes[1].childNodes[3].style.display = "none";
+    variableForm.childNodes[1].childNodes[5].style.display = "none";
+    variableForm.childNodes[1].childNodes[7].style.display = "none";
+
+    // Resume field
+    variableForm.childNodes[1].childNodes[9].style.display = "inline";
+
+    variable.editing = false;
+  } else if (enableForEditing) {
+    // Editing fields
+    variableForm.childNodes[1].childNodes[1].style.display = "inline";
+    variableForm.childNodes[1].childNodes[3].style.display = "inline";
+    variableForm.childNodes[1].childNodes[5].style.display = "inline";
+    variableForm.childNodes[1].childNodes[7].style.display = "inline";
+
+    // Resume field
+    variableForm.childNodes[1].childNodes[9].style.display = "none";
+
+    // Changing focus to firt child
+    document.getElementById(`variable${variable.hash}Type`).focus();
+
+    variable.editing = true;
+  }
+};
+
 // ***********************************************************************
 // Updating variable resume
 // ***********************************************************************
 
-function updateResume (hash) {
-    document.getElementById(`variable${hash}Resume`).setAttribute('title', generateResume(hash));
+function updateResume(hash) {
+  const resume = generateResume(hash);
+
+  document.getElementById(`variable${hash}DisplayCode`).innerText = resume.display;
+  document
+    .getElementById(`variable${hash}Resume`)
+    .setAttribute("title", resume.resume);
 }
 
-function generateResume (hash) {
-    const variable = getVariableByHash(hash);
+function generateResume(hash) {
+  const variable = getVariableByHash(hash);
 
-    return `${variable.type.name} ${variable.name}, recebe ${variable.value}`;
+  let resume = `${variable.type.name} ${variable.name}, recebe ${variable.value}`;
+  let display = `${variable.type.name} ${variable.name} <- ${variable.value};`;
+
+  return {resume: resume, display: display};
 }
 
 // ***********************************************************************
 // Update all variable select
 // **********************************************************************
 
-function updateAllVariableSelect () {
-    const variableSelects = document.getElementsByName('variableSelect');
+function updateAllVariableSelect() {
+  const variableSelects = document.getElementsByName("variableSelect");
 
-    let variablesSelect = variables.length === 0 ? `<option>N/A</option>` : ``;
+  let variablesSelect = variables.length === 0 ? `<option>N/A</option>` : ``;
 
-    for (let i = 0; i < variables.length; i++) {
-        variablesSelect += `<option value="${variables[i].hash}">${variables[i].name}</option>`
-    }
+  for (let i = 0; i < variables.length; i++) {
+    variablesSelect += `<option value="${variables[i].hash}">${variables[i].name}</option>`;
+  }
 
-    for (let i = 0; i < variableSelects.length; i++) {
-        const selectedOption = variableSelects[i].value;
-        variableSelects[i].innerHTML = variablesSelect;
-        variableSelects[i].value = selectedOption;
-    }
+  for (let i = 0; i < variableSelects.length; i++) {
+    const selectedOption = variableSelects[i].value;
+    variableSelects[i].innerHTML = variablesSelect;
+    variableSelects[i].value = selectedOption;
+  }
 }
 
 // *********************************************************************************
 // Util
 // *********************************************************************************
 
-export function getVariableByHash (hash) {
-    for (let i = 0; i < variables.length; i++) {
-        if (variables[i].hash === hash)
-            return variables[i];
-    }
+export function getVariableByHash(hash) {
+  for (let i = 0; i < variables.length; i++) {
+    if (variables[i].hash === hash) return variables[i];
+  }
 
-    return null;
+  return null;
 }
 
-// *********************************************************************************
+// *********************************************************************************