New files (NavBar)

brick-editor.js

@@ -1,7 +1,7 @@
 /* global require, module, editor, editorState, blockDict, monaco */
 
 var BLOCK_DELETE_TYPES = [
-    "IfStatement", 
+    "IfStatement",
     "ForStatement",
     "FunctionDeclaration",
     "WhileStatement",
@@ -183,8 +183,8 @@ function onPointBackspace() {
             }
         } else if (spansProtectedPunctuation(buffer, ast, [oneBack, cursor])) {
             // ignore the backspace if it's something important
-            // flash editor screen 
-            flash(); 
+            // flash editor screen
+            flash();
         } else {
             charBackspaceBranch(buffer, cursor);
         }
@@ -234,15 +234,15 @@ function onPointDelete() {
             }
         } else if (spansProtectedPunctuation(buffer, ast, [cursor, oneAhead])) {
             // ignore the delete if it's something important
-            // flash editor screen 
-            flash(); 
+            // flash editor screen
+            flash();
         } else {
             charDeleteBranch(buffer, cursor);
         }
     } else if (cursor.lineNumber == editorState.cursor.lineNumber) { // if unparsable but on same line
-        // if inside parentheses when became unparsable 
+        // if inside parentheses when became unparsable
         if (editorState.openParenthesis && editorState.closeParenthesis) {
-            if (positionFromEnd(buffer, cursor) - 1 == editorState.closeParenthesis) { // if directly to left of ) 
+            if (positionFromEnd(buffer, cursor) - 1 == editorState.closeParenthesis) { // if directly to left of )
                 // ignore delete if parenthesis
                 flash();
             } else if (positionFromStart(buffer, cursor) <= editorState.openParenthesis || positionFromEnd(buffer, cursor) <= editorState.closeParenthesis) { // if left of ( or right of )
@@ -287,32 +287,103 @@ function onRangeDelete() {
             unhighlight();
         } else {
             highlight(node.loc.start.line, node.loc.start.column, node.loc.end.line, node.loc.end.column);
-        } 
+        }
     }
     updateEditorState();
 }
 
-/** 
+/**
  * Set value of editor using executeEdits to preserve undo stack
  *
  * @param {string} newBuffer - String replacing oldBuffer.
  * @returns {undefined}
 */
 function setValue(newBuffer) {
-    // get range of editor model 
+    // get range of editor model
     var range = editor.getModel().getFullModelRange();
-    // call execute edits on the editor 
+    // call execute edits on the editor
     editor.executeEdits(editor.getValue(), [{ identifier: "insert", range: range, text: newBuffer }]);
 }
 
-/** 
+/**
  * Resets the buffer value to the last correct parsed state
  *
  * @returns {undefined}
  */
 function resetToParsed() { // eslint-disable-line no-unused-vars
     setValue(editorState.parsableText);
-} 
+}
+
+/**
+ * Undo function
+ * @returns {undefined}
+ */
+function buttonUndo(){
+    setValue(editor.getModel().undo());
+}
+
+/**
+ * Redo function
+ *
+ * @returns {undefined}
+ */
+function buttonRedo(){
+    setValue(editor.getModel().redo());
+}
+
+/**
+ * Zoom in function
+ *
+ * @returns {undefined}
+ */
+function buttonZoomIn(){
+    editor.updateOptions({fontSize: 30 });
+}
+
+/**
+ * Zoom out function
+ *
+ * @returns {undefined}
+ */
+function buttonZoomOut(){
+    editor.updateOptions({fontSize: 10 });
+}
+
+/**
+ * Default zoom function
+ *
+ * @returns {undefined}
+ */
+function buttonDefaultZoom(){
+    editor.updateOptions({fontSize: 14 });
+}
+
+/**
+ * Copy function
+ *
+ * @returns {undefined}
+ */
+function buttonCopy(){
+    document.execCommand('copy', false);
+}
+
+/**
+ * Cut function
+ *
+ * @returns {undefined}
+ */
+function buttonCut(){
+    document.execCommand('Cut', false);
+}
+
+/**
+ * Paste function
+ *
+ * @returns {undefined}
+ */
+function buttonPaste(){
+    document.execCommand('Paste', data);
+}
 
 
 // EDITOR INTERFACE CODE
@@ -408,16 +479,16 @@ function unhighlight() {
     highlighted = false;
 }
 
-/** 
- * Flashes the editor background for 100 ms 
- * 
- * @returns {undefined} 
+/**
+ * Flashes the editor background for 100 ms
+ *
+ * @returns {undefined}
  */
 function flash() {
     monaco.editor.setTheme("flash");
     setTimeout(function () { monaco.editor.setTheme("normal"); }, 100);
 
-} 
+}
 
 /**
  * Highlights from opening parenthesis to closed parenthesis, inclusive
@@ -904,7 +975,7 @@ function getSurroundingProtectedBrace(buffer, ast, cursor) {
 
 /**
  * Split a string into sections delimited by Cursors.
- * 
+ *
  * @param {string} buffer - A string of text from the editor.
  * @param {[Cursor]} cursors - Non-empty list of cursors.
  * @returns {[string]} - List of sections of the original string.
@@ -962,11 +1033,11 @@ function onDidChangeCursorSelection(e) { // eslint-disable-line no-unused-vars
     var selection = e.selection;
     console.log("    [" +
         selection.startLineNumber
-        + ":" + 
+        + ":" +
         selection.startColumn
-        + ", " + 
+        + ", " +
         selection.endLineNumber
-        + ":" + 
+        + ":" +
         selection.endColumn
         + "]"
     );
@@ -1053,7 +1124,7 @@ function updateEditorState() {
             editorState.cursor = getCursor();
             editorState.sections = splitAtCursors(buffer, [editorState.cursor]);
         }
-    } else { 
+    } else {
         editorState.parsable = false;
         // if on same line
         if (cursor.lineNumber == editorState.cursor.lineNumber) {
@@ -1093,12 +1164,12 @@ function positionFromStart(buffer, cursor) {
  * @returns {string} Position of cursor from end of buffer
  */
 function positionFromEnd(buffer, cursor) {
-    var splitBuffer = buffer.split("\n");        
-    var lastPart = splitBuffer.slice(cursor.lineNumber); 
-    var sameLine = splitBuffer.slice(cursor.lineNumber - 1, cursor.lineNumber).join(""); 
-    sameLine = sameLine.split("");               
+    var splitBuffer = buffer.split("\n");
+    var lastPart = splitBuffer.slice(cursor.lineNumber);
+    var sameLine = splitBuffer.slice(cursor.lineNumber - 1, cursor.lineNumber).join("");
+    sameLine = sameLine.split("");
     sameLine = sameLine.slice(cursor.column).join("");
-    lastPart.unshift(sameLine);                                
+    lastPart.unshift(sameLine);
 
     return lastPart.join("").length;
 }

index.html

@@ -34,6 +34,15 @@
             addBlocksHTML();
         };
     </script>
+    <button class="genericButton" onclick="buttonUndo()">UNDO</button>
+    <button class="genericButton" onclick="buttonRedo()">REDO</button>
+    <button class="genericButton" onclick="buttonDefaultZoom()">DEFAULT ZOOM</button>
+    <button class="genericButton" onclick="buttonZoomIn()">ZOOM IN</button>
+    <button class="genericButton" onclick="buttonZoomOut()">ZOOM OUT</button>
+    <button class="genericButton" onclick="buttonCopy()">COPY</button>
+    <button class="genericButton" onclick="buttonCut()">CUT</button>
+    <button class="genericButton" onclick="buttonPaste()">PASTE</button>
+    <br>
 </head>
 
 <body>

stylesheet.css

@@ -63,5 +63,30 @@ body {
 #parseButton:disabled {
     background-color: grey;
     color: white;
-    cursor: default;
-} 
+    cursor: not-allowed;
+}
+
+.genericButton {
+    border: solid black 1px;
+    background-color: red;
+    color: white;
+    font-weight: 600;
+    padding: 10px;
+    text-align: center;
+    font-size: 16px;
+    border-radius: 5px;
+    margin: 0px auto;
+    float: left;
+    cursor: pointer;
+    transition-duration: 0.4s;
+}
+
+.genericButton:hover{
+    background-color: forestgreen;
+}
+
+.genericButton:active{
+    background-color: blue;
+    transform: translateY(4px);
+}
+