Merge pull request #57 from flapjs/regex

Add regular expression feature

index.html

@@ -74,14 +74,15 @@ <h1>Header</h1>
       </div>
     </div>
     <div class = "dropdown settings">
-      <button class="NFA_specific" id="NFA_to_DFA" >NFA to DFA</button>
       <select id="select_machine">
         <option value="NFA">Finite Automata</option>
         <option value="PDA">Pushdown Automata</option>
         <option value="Turing">Turing Machine</option>
         <option value="Moore">Moore</option>
         <option value="Mealy">Mealy</option>
+        <option value="Regex">Regex</option>
       </select>
+      <button class="NFA_specific" id="NFA_to_DFA" >NFA to DFA</button>
     </div>
 
     <div hidden class="dropdown save">
@@ -149,7 +150,27 @@ <h2>Permalink</h2>
     </div>
   </div>
 
+  <div class="regex">
+    <div class="regex-content">
+      <label for='regex_string'>Regular Expression String: </label>
+      <input type="text" id="regex_string" name="regex_string">
+      <br>
+      <button type="button" id='OPEN' value="("> ( </button>
+      <button type="button" id='CLOSE' value=")"> ) </button>
+      <button type="button" id='UNION' value="&#8746;"> &#8746; </button>
+      <button type="button" id='CONCAT' value="&#9702;"> &#9702; </button>
+      <button type="button" id='KLEENE' value="*"> * </button>
+      <button type="button" id='SIGMA' value="&#931;"> &#931; </button>
+      <button type="button" id='EMPTY_SET' value="&#8709;"> &#8709; </button>
+      <br>
+      <button type="button" id="convert_to_nfa">Convert to NFA</button>
+
+
+      </form>
+    </div>
+  </div>
+
   <!-- the big canvas that we draw on -->
-  <canvas id='machine_drawing'>Your browser does not support canvas</canvas>
+  <canvas class='NFA_specific PDA_specific Turing_specific' id='machine_drawing'>Your browser does not support canvas</canvas>
 </body>
 </html>

scripts/consts.js

@@ -88,10 +88,11 @@ export const MACHINE_TYPES = {
   PDA: 'PDA',
   Turing: 'Turing',
   Moore: 'Moore',
-  Mealy: 'Mealy'
+  Mealy: 'Mealy',
+  Regex: 'Regex'
 };
 
-/** @constant {string} DEFAULT_MACHINE - choice from ['NFA', 'PDA', 'Turing'] */
+/** @constant {string} DEFAULT_MACHINE - choice from ['NFA', 'PDA', 'Turing', 'Regex'] */
 export const DEFAULT_MACHINE = MACHINE_TYPES.NFA;
 
 /** @constant {Object} HIST_KEYS - localstore key to the history stack */
@@ -100,7 +101,8 @@ export const HIST_KEYS = {
   PDA: '%PDA_history',
   Turing: '%turing_history',
   Moore: '%moore_history',
-  Mealy: '%mealy_history'
+  Mealy: '%mealy_history',
+  Regex: '%regex_history'
 };
 
 /** @constant {Object} HIST_TIP_KEYS - localstore key to pointer to the top of the history stack */
@@ -109,7 +111,8 @@ export const HIST_TIP_KEYS = {
   PDA: '%PDA_hist_tip',
   Turing: '%turing_hist_tip',
   Moore: '%moore_hist_tip',
-  Mealy: '%mealy_history_tip'
+  Mealy: '%mealy_history_tip',
+  Regex: '%regex_hist_tip'
 };
 
 /** @constant {Object} HIST_PTR_KEYS - localstore key to pointer to the currently displayed graph */
@@ -118,7 +121,8 @@ export const HIST_PTR_KEYS = {
   PDA: '%PDA_hist_ptr',
   Turing: '%turing_hist_ptr',
   Moore: '%moore_hist_ptr',
-  Mealy: '%mealy_history_ptr'
+  Mealy: '%mealy_history_ptr',
+  Regex: '%regex_hist_ptr'
 };
 
 /** @constant {float} ZOOM_SPEED - final zoom is ZOOM_SPEED*scroll_wheel_ticks */
@@ -168,4 +172,27 @@ export const SECOND_BAR_COLOR = 'rgb(39, 52, 92)';
 export const ACCEPT_COLOR = 'green';
 
 /** @constant {string} REJECT_COLOR - color of machine input when rejected  */
-export const REJECT_COLOR = 'darkRed';
+export const REJECT_COLOR = 'darkRed';
+/** @constant {string} OPEN - opening parentheses for regular expressions */
+export const OPEN = '(';
+
+/** @constant {string} CLOSE - closing parentheses for regular expressions */
+export const CLOSE = ')';
+
+/** @constant {string} UNION - union of sets for regular expressions */
+export const UNION = '\u222A';
+
+/** @constant {string} CONCAT - concatenation of symbols for regular expressions */
+export const CONCAT = '\u25E6';
+
+/** @constant {string} KLEENE - kleene star for regular expressions */
+export const KLEENE = '*';
+
+/** @constant {string} PLUS - plus symbol (one or more) for regular expressions */
+export const PLUS = '\u207A';
+
+/** @constant {string} SIGMA - alphabet symbol for regular expressions */
+export const SIGMA = '\u03A3';
+
+/** @constant {string} EMPTY_SET - empty set symbol for regular expressions */
+export const EMPTY_SET = '\u2205';

scripts/graph_ops.js

@@ -71,8 +71,10 @@ export function delete_vertex(graph, v) {
  * @param {*} new_name - new name of the vertex
  * @param {string} new_moore_output - side effect of entering the state
  */
-export function rename_vertex(graph, v, new_name, new_moore_output) {
-  menus.remove_context_menu();
+export function rename_vertex(graph, v, new_name, new_moore_output, no_gui) {
+  if (!no_gui) {
+    menus.remove_context_menu();
+  }
   if (v === new_name && graph[v].moore_output === new_moore_output) {  // nothing to do
     return;
   } else if (new_name in graph && new_moore_output === undefined) {  // not moore and name already exists
@@ -102,8 +104,10 @@ export function rename_vertex(graph, v, new_name, new_moore_output) {
       graph[new_name].moore_output = new_moore_output;
     }
 
-    drawing.draw(graph);
-    hist.push_history(graph);
+    if (!no_gui) {
+      drawing.draw(graph);
+      hist.push_history(graph);
+    }
   }
 }
 

scripts/index.js

@@ -10,6 +10,7 @@ import * as menus from './menus.js';
 import * as permalink from './permalink.js';
 import * as util from './util.js';
 import * as ui_setup from './ui_setup.js';
+import * as regex from './regex.js';
 
 // if not in browser, don't run
 if (typeof document !== 'undefined') {
@@ -415,6 +416,43 @@ function bind_context_menu_navbar(){
   */
 }
 
+function bind_regex() {
+  // let [input_field, open_btn, close_btn, union_btn, concat_btn, kleene_btn, sigma_btn, empty_btn, convert] = regex.create_buttons();
+  regex.create_buttons();
+  const convert_to_nfa_btn = document.getElementById('convert_to_nfa');
+  convert_to_nfa_btn.addEventListener('click', () => {
+    console.log(document.getElementById('regex_string').value);
+    let inputString = document.getElementById('regex_string').value
+    inputString = inputString.replace(/\s/g, '');
+    if (regex.isValidRegex(inputString)) {
+      graph = regex.process_string(inputString);
+      menus.display_UI_for('NFA');
+      document.getElementById('select_machine').value = 'NFA';
+      drawing.draw(graph);
+      // hist.push_history(graph); NEED TO IMPLEMENT HISTORY BEFORE UNCOMMENTING
+    } else {
+      alert("Invalid regular expression.")
+    }
+  });
+  const input_field = document.getElementById('regex_string');
+  input_field.addEventListener('keypress', (e) => {
+    if (e.key === "Enter") {
+      console.log(document.getElementById('regex_string').value);
+      let inputString = document.getElementById('regex_string').value
+      inputString = inputString.replace(/\s/g, '');
+      if (regex.isValidRegex(inputString)) {
+        graph = regex.process_string(inputString);
+        menus.display_UI_for('NFA');
+        document.getElementById('select_machine').value = 'NFA';
+        drawing.draw(graph);
+        // hist.push_history(graph); NEED TO IMPLEMENT HISTORY BEFORE UNCOMMENTING
+      } else {
+        alert("Invalid regular expression.")
+      }
+    }
+  })
+}
+
 /** run after all the contents are loaded to hook up callbacks */
 function init() {
   bind_switch_machine();
@@ -432,5 +470,6 @@ function init() {
   ui_setup.bind_plus_minus();
   ui_setup.add_input_bar(); // called so one input bar appears on opening of homepage
   ui_setup.htmlSetUp(); // initiate eventlisteners for sidenavbar, second sidenavbar, and popup tutorial
+  bind_regex();
   init_graph();  // leave this last since we want it to override some of the above
 }

scripts/menus.js

@@ -56,6 +56,14 @@ export function is_Moore() {
   return machine_type() === consts.MACHINE_TYPES.Moore;
 }
 
+/**
+ * reports the type of machine the user is working on
+ * @returns {boolean} true or false 
+ */
+export function is_Regex() {
+  return machine_type() === consts.MACHINE_TYPES.Regex;
+}
+
 /**
  * creates the context menu to change a vertex and display it
  * @param {Object} graph - the graph containing the vertex v
@@ -186,7 +194,7 @@ export function set_UI_visibility(machine, visible) {
   }
 }
 
-/** displays exactly those UI elements specific to the machine from {NFA, PDA, Turing} */
+/** displays exactly those UI elements specific to the machine from {NFA, PDA, Turing, Regex} */
 export function display_UI_for(machine) {
   for (const machine_type of Object.values(consts.MACHINE_TYPES)) {
     set_UI_visibility(machine_type, false);  // hide all UI elements