diff --git a/brick-editor.js b/brick-editor.js index 40eef64..94487bb 100644 --- a/brick-editor.js +++ b/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; } diff --git a/index.html b/index.html index 79d361f..73349cf 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,15 @@ addBlocksHTML(); }; + + + + + + + + +
diff --git a/stylesheet.css b/stylesheet.css index 16010f1..e64e41a 100644 --- a/stylesheet.css +++ b/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); +} +