Merge pull request #58 from flapjs/Graph-Duplication-Bug-and-Tutorial…

…-GIF-fix

graph duplication issue fix and GIFs update

index.html

@@ -108,38 +108,38 @@ <h2>The Basics</h2>
               <div>"ctrl/cmd+z" to undo, "ctrl/cmd+shift+z" to redo</div>
               <div>"dd" to delete (quickly press 'd' two times)</div>
               <div>drag an item over the trash to delete or click the trash to delete everything</div>
-            <img src = "tutorial_GIFs/basics.gif" style = "width:20vw;height:15vw;position:relative;">
+            <img src = "tutorial_GIFs/basics_V2.gif">
             <p></p> 
             <button class ='next-btn' id="nextBtn_1to2">Next >></button>
         </div>
         <div class = "popup-content-pg2" id = 'pg2'>
             <h2>Running Input</h2>
             <p>Enter the input string and press run.</p>
-            <img src = "tutorial_GIFs/run_input.gif">  
+            <img src = "tutorial_GIFs/run_input_V2.gif">  
             <p></p> 
             <button class ='prev-btn' id="prevBtn_2to1">&lt;&lt; Prev</button>
             <button class ='next-btn' id="nextBtn_2to3">Next>></button>
         </div>
         <div class = "popup-content-pg3" id = 'pg3'>
             <h2>Stepping Through Input</h2>
             <p>You can also step through the computation one character at a time.</p> 
-            <img src = "tutorial_GIFs/step_through.gif">
+            <img src = "tutorial_GIFs/step_through_V2.gif">
             <p></p> 
             <button class ='prev-btn' id="prevBtn_3to2">&lt;&lt; Prev</button>
             <button class ='next-btn' id="nextBtn_3to4">Next>></button>
         </div>
         <div class = "popup-content-pg4" id = 'pg4'>
           <h2>Download PNG</h2>
           <p>After you finish drawing your automaton, you can download a PNG of the drawing by clicking "Save as png" on the toolbar.</p> 
-          <img src = "tutorial_GIFs/save_img.gif"> 
+          <img src = "tutorial_GIFs/save_img_V2.gif"> 
           <p></p> 
           <button class ='prev-btn' id="prevBtn_4to3">&lt;&lt; Prev</button>
           <button class ='next-btn' id="nextBtn_4to5">Next>></button>
       </div>
         <div class = "popup-content-pg5" id = 'pg5'>
           <h2>Permalink</h2>
           <p>This feature enables sharing machine drawings. Permalink stands for permanent link, meaning once you have created a link to share with your others, that link can uniquely decode back to a machine.</p>  
-          <img src = "tutorial_GIFs/permalink.gif">
+          <img src = "tutorial_GIFs/permalink_V2.gif">
           <p></p> 
           <button class ='prev-btn' id="prevBtn_5to4">&lt;&lt; Prev</button>
           <button class ='next-btn' id="tutorial_finish_btn">Finish</button>

scripts/index.js

@@ -402,12 +402,26 @@ function bind_mousemove() {
   });
 }
 
+/** bind context menu for side nav bar and secondary side navbar */
+function bind_context_menu_navbar(){
+  const navbar = document.querySelector('.nav')
+  const secondBar = document.querySelector('#secondbar')
+  navbar.addEventListener('click', () => {menus.remove_context_menu()})
+  secondBar.addEventListener('click', () => {menus.remove_context_menu()})
+  /*
+  for(var btns of navbar){
+    btns.addEventListener('click', () => {remove_context_menu()})
+  }
+  */
+}
+
 /** run after all the contents are loaded to hook up callbacks */
 function init() {
   bind_switch_machine();
   bind_double_click();
   bind_drag();
   bind_context_menu();
+  bind_context_menu_navbar();
   bind_machine_transform();
   bind_save_drawing();
   bind_undo_redo();