Semantico finalizado

compilador/index.html

@@ -20,7 +20,8 @@
 
   <script src="codemirror/lib/codemirror.js"></script>
   <script src="codemirror/addon/display/fullscreen.js"></script>
-  <script src="codemirror/addon/hint/show-hint.js"></script>
+  <script src="codemirror/addon/display/placeholder.js"></script>
+
 
   <!-- Script imports -->
   <script type="module" src="js/compilador.js"></script>
@@ -65,23 +66,28 @@ <h1 id="logo" class="logo">compi{<span class="logo_snip">LPD</span>}lador</h1>
       <div class="menu_btn" id="abrir">
         <span class="material-icons"> upload_file </span>
         <span class="menu_btn_title" style="text-align: center">Carregar <br>(Ctrl+O)</span>
-        <input id="file-input" type="file" accept=".txt" />
+        <input id="file-input" type="file" accept=".txt" multiple/>
       </div>
     </div>
   </header>
 
   <div id="codeeditor">
     <div id="codeeditor_header">
-      <div style="display: flex; align-items: baseline">
-        <legend>Editor:</legend>
-        <legend id="filename"></legend>
+      <div style="display: flex; align-items:center; justify-content:space-between">
+        <legend id="title">Editor:</legend>
+        <legend id="posicao">Ln 1, Col 1</legend>
+      </div>
+
+      <div id="tabs_container">
+
+
       </div>
-      <legend id="posicao">Ln 1, Col 1</legend>
     </div>
+
   </div>
 
   <div id="console">
-    <div style="display: flex; justify-content: space-between">
+    <div id="log_header">
       <legend>Log</legend>
       <legend id="limpar" onclick="document.getElementById('log').value=''">
         Limpar (Ctrl+L)

compilador/js/compilador.js

@@ -1,18 +1,39 @@
-// Author: Iago Lourenço (iagojlourenco@gmail.com) / main.js
+// Author: Iago Lourenço (iagojlourenco@gmail.com) / compilador.js
 
-var filename = "myfile.txt";
+import { ErroLexico, ErroSemantico, ErroSintatico } from "./erros.js";
+// Import dos módulos do compilador
+import sintatico from "./sintatico.js";
+// Guarda as abas do editor
+const tabs = [];
+var editor;
+
+var filename = "Novo.lpd";
 
-function loadLocalFile(files, editor) {
+async function loadLocalFile(files, editor) {
   if (files.length == 1) {
     var reader = new FileReader();
     reader.fileName = files[0].name;
     filename = files[0].name;
-    document.getElementById("filename").innerHTML = filename;
+
     reader.onload = function (e) {
-      editor.setValue(e.target.result);
       logar(`Arquivo ${e.target.fileName} carregado com sucesso!`);
+      createTab(e.target.fileName);
+      editor.setValue(e.target.result);
     };
     reader.readAsText(files[0]);
+  } else {
+    for (var i = 0; i < files.length; i++) {
+      var reader = new FileReader();
+      reader.fileName = files[i].name;
+      filename = files[i].name;
+
+      reader.onload = function (e) {
+        createTab(e.target.fileName);
+        editor.setValue(e.target.result);
+        logar(`Arquivo ${e.target.fileName} carregado com sucesso!`);
+      };
+      reader.readAsText(files[i]);
+    }
   }
 }
 
@@ -49,17 +70,136 @@ function logar(msg) {
     document.getElementById("log").scrollHeight;
 }
 
-import { ErroLexico, ErroSemantico, ErroSintatico } from "./erros.js";
-// Import dos módulos do compilador
-import sintatico from "./sintatico.js";
+function compileCode() {
+  var code = editor.getValue();
+  let log = document.getElementById("log");
+  log.value = "";
+  try {
+    var start = performance.now();
+    if (code.length > 0) {
+      logar(`Compilando...`);
+      // Chamada do sintático para iniciar a análise
+      const codigo = sintatico.iniciar(code);
+
+      logar(`SUCESSO!`);
+    } else {
+      throw new Error("Nenhum código inserido!");
+    }
+  } catch (e) {
+    console.error(e);
+    if (
+      e instanceof ErroLexico ||
+      e instanceof ErroSintatico ||
+      e instanceof ErroSemantico
+    ) {
+      // Coloca o cursor na linha e coluna do erro
+      editor.setCursor(e.linha, e.coluna);
+      editor.focus();
+    }
+
+    // Printa a mensagem no log
+    logar(e.message);
+  } finally {
+    // Tempo de execução do compilador
+    var end = performance.now();
+    log.value += `\n\n---\nTempo de execução: ${
+      Math.round((end - start) * 100) / 100
+    }ms\n`;
+  }
+}
+
+// Tabs management functions
+function createTab(name) {
+  /**
+   * Create a tab
+   */
+  tabs.push({
+    doc: CodeMirror.Doc("", "text/x-lpd"),
+    name: name,
+  });
+  reconstructTabs();
+  addTabListeners();
+  activateTab(tabs.length - 1);
+  setTabName(tabs.length - 1, name);
+}
+
+function reconstructTabs() {
+  document.getElementById("tabs_container").innerHTML = "";
+  for (let i = 0; i < tabs.length; i++) {
+    document.getElementById("tabs_container").innerHTML += `
+  <div class="tab_c">
+    <div class="tab" id="tab${i}">
+      <span class="material-icons">code</span>
+      <span class="tab_title">${tabs[i].name}</span>
+    </div>
+    <span  class="material-icons close" id="tab${i}_close">close</span>
+  </div>`;
+  }
+
+  document.getElementById(
+    "tabs_container"
+  ).innerHTML += `<div id="new_tab"><span class="material-icons">add</span></div>`;
+
+  document.getElementById("new_tab").addEventListener("click", () => {
+    // create a new tab
+    createTab("Novo.lpd");
+  });
+}
+function activateTab(index) {
+  editor.swapDoc(tabs[index].doc);
+  editor.focus();
+  document.getElementById("posicao").innerHTML = `Ln ${
+    editor.getCursor().line + 1
+  }, Col ${editor.getCursor().ch + 1}`;
+
+  for (let j = 0; j < tabs.length; j++) {
+    document.getElementById(`tab${j}`).classList.remove("active");
+  }
+  document.getElementById(`tab${index}`).classList.add("active");
+}
+function setTabName(index, name) {
+  tabs[index].name = name;
+}
+function addTabListeners() {
+  for (let i = 0; i < tabs.length; i++) {
+    document.getElementById(`tab${i}`).addEventListener("click", () => {
+      activateTab(i);
+    });
+    document.getElementById(`tab${i}_close`).addEventListener("click", () => {
+      // Ask for confirmation
+      closeTab(i);
+    });
+  }
+}
+
+function closeTab(index) {
+  // Remove tab
+  if (tabs.length > 1) {
+    if (editor.getValue().length > 0) {
+      if (confirm("Deseja realmente fechar esta aba?")) {
+        tabs.splice(index, 1);
+        reconstructTabs();
+        addTabListeners();
+        activateTab(tabs.length - 1);
+      }
+    } else {
+      tabs.splice(index, 1);
+      reconstructTabs();
+      addTabListeners();
+      activateTab(tabs.length - 1);
+    }
+  } else {
+    logar("Não é possível fechar a última aba!");
+  }
+}
 
 window.onload = function () {
-  var editor = CodeMirror(document.getElementById("codeeditor"), {
+  editor = CodeMirror(document.getElementById("codeeditor"), {
     mode: "text/x-lpd",
     theme: "dracula",
     lineNumbers: true,
     autofocus: true,
-
+    placeholder: "Ctrl-O para abrir um arquivo, ou comece a digitar!",
     viewportMargin: 150,
     extraKeys: {
       F11: function (cm) {
@@ -70,6 +210,15 @@ window.onload = function () {
       },
     },
   });
+  tabs.push({ doc: editor.getDoc(), name: "Novo.lpd" });
+  reconstructTabs();
+  addTabListeners();
+  document.getElementById(`tab0`).classList.add("active");
+
+  logar("Bem vindo ao compilador LPD! aka. compi{LPD}lador");
+  logar(
+    "Para começar, carregue um arquivo ou digite o código no editor acima."
+  );
 
   // Animação do logo
   document.getElementById("logo").addEventListener("mouseover", function () {
@@ -83,9 +232,6 @@ window.onload = function () {
 
   // Atualiza os números da linha e coluna na janela
   editor.on("cursorActivity", function () {
-    if (document.getElementById("filename").value == "") {
-      document.getElementById("filename").value = filename;
-    }
     document.getElementById("posicao").innerHTML = `Ln ${
       editor.getCursor().line + 1
     }, Col ${editor.getCursor().ch + 1}`;
@@ -125,44 +271,7 @@ window.onload = function () {
 
   // Compila o código
   document.getElementById("compilar").addEventListener("click", function () {
-    var code = editor.getValue();
-    let log = document.getElementById("log");
-    log.value = "";
-    try {
-      var start = performance.now();
-      if (code.length > 0) {
-        logar(`Compilando...`);
-        // Chamada do sintático para iniciar a análise
-        const codigo = sintatico.iniciar(code);
-
-        logar(`SUCESSO!`);
-        // logar(`Tokens: ${JSON.stringify(listaToken)}`);
-        // console.table(listaToken);
-      } else {
-        throw new Error("Nenhum código inserido!");
-      }
-    } catch (e) {
-      console.error(e);
-
-      if (
-        e instanceof ErroLexico ||
-        e instanceof ErroSintatico ||
-        e instanceof ErroSemantico
-      ) {
-        // Coloca o cursor na linha e coluna do erro
-        editor.setCursor(e.linha - 1, e.coluna - 1);
-        editor.focus();
-      }
-
-      // Printa a mensagem no log
-      logar(e.message);
-    } finally {
-      // Tempo de execução do compilador
-      var end = performance.now();
-      log.value += `\n\n---\nTempo de execução: ${
-        Math.round((end - start) * 100) / 100
-      }ms\n`;
-    }
+    compileCode();
   });
 
   // Salva o arquivo