Mihir edits

index.html

@@ -13,6 +13,7 @@
 	<link rel="stylesheet" type="text/css" href="src/css/style.css">
 	<link rel="stylesheet" type="text/css" href="src/css/call-tree-network.css">
 	<link rel="stylesheet" type="text/css" href="src/css/tooltip.css">
+	<link rel="stylesheet" type="text/css" href="src/css/problem-pane.css">
 
 	<script type="text/javascript" src="src/import.js"></script>
 
@@ -55,13 +56,24 @@
 		<div id="fileOperation">
 			<input id="saveButton" type="button" value="Save file" onclick="__$__.saveFile()">
 			<input id="readInput" type="file" onclick="__$__.readFile()">
+
+			<!--Enable Formatting Code-->
+			<script type="text/javascript" src="src/js/beautifyenable.js"></script>
+			<button onclick="__$__.beautifyEnable()" id="beautify">Format</button>
 			<!-- Load Examples -->
 			<script type="text/javascript" src="src/js/loadExamples.js"></script>
 			Select Examples: 
 			<input type="button" value="Basics" onclick="__$__.createSelectBox(0);">
 			<input type="button" value="FIFA layout" onclick="__$__.createSelectBox(1);">
 			<select id="selectExample"><option value="" disabled selected hidden>&lt;- Select one</option></select>
 			<input type="button" value="Paste" onclick="__$__.pasteExample();">
+
+			<!-- Load Themes -->
+			Select Themes: 
+			<input type="button" value="Themes" onclick="__$__.createSelectBoxTheme();">
+			<select id="selectTheme"><option value="" disabled selected hidden>&lt;- Select one</option></select>
+			<input type="button" value="Set" onclick="__$__.pasteTheme();">
+
 		</div>
 		<input id="redrawButton" type="button" value="redraw"
 			onclick="__$__.Update.waitForStabilized = false; __$__.Update.ContextUpdate('changed');">
@@ -71,7 +83,10 @@
 			<div class="split-pane-component" id="left-component">
 				<div class="pretty-split-pane-component-inner">
 					<div id="editor">
+						<script type="text/javascript" src="src/js/problem-pane.js"></script>
 						<script type="text/javascript" src="src/js/editor.js"></script>
+						<button id="problem-ball" onclick="__$__.openPanel();">
+						</button>
 					</div>
 				</div>
 			</div>
@@ -86,6 +101,15 @@
 					<div class="split-pane-divider" id="horizontal-divider"></div>
 					<div class="split-pane-component" id="bottom-component">
 						<div class="pretty-split-pane-component-inner">
+							<div id="problem-panel">
+								<script type="text/javascript" src="src/js/problem-pane.js"></script>
+								<button id="close-button" onclick="__$__.closePanel();">
+									Close
+								</button>
+									<div id="all-errors">
+									</div>
+								</script>
+							</div>
 							<div id="callTree"></div>
 						</div>
 					</div>

json/themes.json

@@ -0,0 +1,41 @@
+[
+    "ambiance",
+    "chaos",
+    "chrome",
+    "clouds",
+    "clouds_midnight",
+    "cobalt",
+    "crimson_editor",
+    "dawn",
+    "dracula",
+    "dreamweaver",
+    "eclipse",
+    "github",
+    "gob",
+    "gruvbox",
+    "idle_fingers",
+    "iplastic",
+    "katzenmilch",
+    "kr_theme",
+    "kuroir",
+    "merbivore",
+    "merbivore_soft",
+    "mono_industrial",
+    "monokai",
+    "nord_dark",
+    "one_dark",
+    "pastel_on_dark",
+    "solarized_dark",
+    "solarized_light",
+    "sqlserver",
+    "terminal",
+    "textmate",
+    "tomorrow",
+    "tomorrow_night",
+    "tomorrow_night_blue",
+    "tomorrow_night_bright",
+    "tomorrow_night_eighties",
+    "twilight",
+    "vibrant_ink",
+    "xcode"
+]

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "Kanon",
+  "name": "kanon",
   "version": "1.0.0",
   "description": "A live programming environment specialized for data structure programming.",
   "main": "app.js",
@@ -29,7 +29,9 @@
     "esprima": "3.1.3",
     "jquery": "3.6.0",
     "jquery-ui-dist": "1.12.1",
+    "js-beautify": "^1.14.0",
     "split-pane": "0.5.1",
+    "uncaught": "0.0.5",
     "vis": "4.17.0"
   },
   "devDependencies": {

src/css/problem-pane.css

@@ -0,0 +1,47 @@
+#problem-ball {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+    color:#ffffff; 
+    background: #ff2424;
+    font-size:1.5em;
+    text-align: center;
+    z-index: 2;
+    width: 30px;
+    height: 30px;
+    border-radius: 15px;
+    line-height: 30px;
+    border: none;
+    /* outline: none; */
+}
+
+#probem-panel{
+    background-color: white;
+    width: inherit;
+    height: inherit;
+    top:0;
+    left: 0;
+    right:0;
+    bottom: 0;
+    position: absolute;
+    height: auto;
+    overflow-y: scroll;
+}
+
+#close-button{
+    left: 0;
+    top: 0;
+    display: none;
+    border:none;
+    background-color: transparent;
+    color: grey;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    font-size: 1rem;
+    text-decoration: underline;
+}
+
+#all-errors{
+    display: none;
+    color:black;
+}

src/import.js

@@ -2,11 +2,15 @@ document.write('<script type="text/javascript" src="src/js/setup.js"></script>')
 document.write('<script type="text/javascript" src="node_modules/vis/dist/vis.js"></script>');
 document.write('<script type="text/javascript" src="node_modules/ace-builds/src/ace.js"></script>');
 document.write('<script type="text/javascript" src="node_modules/ace-builds/src/ext-language_tools.js"></script>');
+document.write('<script type="text/javascript" src="node_modules/ace-builds/src/ext-beautify.js"></script>')
+document.write('<script type="text/javascript" src="node_modules/ace-builds/src/ext-themelist.js"></script>')
 document.write('<script type="text/javascript" src="node_modules/d3/dist/d3.js"></script>');
 document.write('<script type="text/javascript" src="node_modules/esprima/dist/esprima.js"></script>');
 document.write('<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>');
 document.write('<script type="text/javascript" src="node_modules/jquery-ui-dist/jquery-ui.js"></script>');
 document.write('<script type="text/javascript" src="node_modules/split-pane/split-pane.js"></script>');
+document.write('<script type="text/javascript" src="node_modules/uncaught/lib/index.js"></script>');
+document.write('<script type="text/javascript" src="node_modules/js-beautify"></script>');
 document.write('<script type="text/javascript" src="external/escodegen/escodegen.browser.js"></script>');
 document.write('<script type="text/javascript" src="external/prototype_window/javascripts/prototype.js"></script>');
 document.write('<script type="text/javascript" src="external/prototype_window/javascripts/window.js"></script>');
@@ -30,3 +34,5 @@ document.write('<script type="text/javascript" src="src/js/code-instrumentation/
 document.write('<script type="text/javascript" src="src/js/code-instrumentation/ast-builder.js"></script>');
 document.write('<script type="text/javascript" src="src/js/code-instrumentation/ast-transforms.js"></script>');
 document.write('<script type="text/javascript" src="src/js/code-instrumentation/ast-walker.js"></script>');
+document.write('<script type="text/javascript" src="src/js/problem-pane.js"></script>');
+document.write('<script type="text/javascript" src="src/js/loadThemes.js"></script>');

src/js/beautifyenable.js

@@ -0,0 +1,15 @@
+__$__.beautify = ace.require("ace/ext/beautify");
+__$__.js_beautify = require("js-beautify").js;
+
+__$__.beautifyEnable = function(){
+    // __$__.beautify.beautify(__$__.editor.getSession());
+    __$__.val = editor.session.getValue();
+
+    __$__.array = __$__.val.split(/\n/);
+    __$__.array[0] = __$__.array[0].trim();
+    __$__.val = __$__.array.join("\n"); 
+
+    //Actual beautify (prettify) 
+    __$__.val = __$__.js_beautify(__$__.val);
+    __$__.editor.getSession().setValue(__$__.val);
+}

src/js/editor.js

@@ -1,7 +1,10 @@
 __$__.langTools = ace.require('ace/ext/language_tools');
+__$__.themes = ace.require("ace/ext/themelist");
 __$__.Range = ace.require('ace/range').Range;
 __$__.editor = ace.edit("editor");
 __$__.editor.setOption('enableBasicAutocompletion', true);
+__$__.editor.setOption('enableSnippets', true);
+__$__.editor.setOption('enableLiveAutocompletion', false);
 __$__.startAutocomplete = __$__.editor.keyBinding.$handlers[0].commands.startAutocomplete.exec;
 
 try {
@@ -14,6 +17,7 @@ try {
     __$__.editor.setValue('');
 }
 
+
 __$__.editor.getSession().setMode('ace/mode/javascript');
 // __$__.editor.getSession().setUseWorker(false);
 

src/js/loadThemes.js

@@ -0,0 +1,54 @@
+var kindvalue = 0;
+
+__$__.createSelectBoxTheme = function () {
+  // The list of themes files on the server is kept in .json format.
+
+  const path_themes = 'json/themes.json'
+
+  function jsonToArray(data) {
+    var arr = [];
+    for (var i = 0; i < data.length; i++) {
+      arr.push(data[i]);
+    }
+    return arr;
+  }
+
+  // Delete all old elements in the select box
+  let parentElement = document.getElementById("selectTheme");
+  while (parentElement.firstChild) {
+    parentElement.removeChild(parentElement.firstChild);
+  }
+
+  // Insert new nodes to the select box
+  function makeNodes(arr) {
+    for (var i = 0; i < arr.length; i++) {
+      let op = document.createElement("option");
+      op.value = arr[i];
+      op.text = arr[i];
+      parentElement.appendChild(op);
+    }
+  }
+
+  function getJSONFrom(path, callback) {
+    jQuery.getJSON(path, function (data) {
+      callback(data);
+    });
+  }
+
+    getJSONFrom(path_themes, function (data) {
+      var arr = jsonToArray(data);
+      makeNodes(arr);
+    });
+
+};
+
+__$__.pasteTheme = function () {
+  let selectedElement = jQuery("#selectTheme").val();
+
+  if (selectedElement) {
+      __$__.editor.setTheme('ace/theme/'+selectedElement);
+  } 
+  else {
+    alert("Select one of the theme.");
+  }
+}

src/js/problem-pane.js

@@ -0,0 +1,57 @@
+var errors_list = "";
+
+__$__.getErrors = async function(e) {
+
+  await new Promise((resolve, reject) => setTimeout(resolve, 1000));
+
+  let annotations = await __$__.editor.getSession().getAnnotations();
+
+  document.getElementById("problem-ball").innerText = annotations.length;
+
+  for(var i=0; i<annotations.length; i++){
+    errors_list +=
+      "<div>" + annotations[i].type.toUpperCase() + "<div style='color:#ff2424'>" + annotations[i].text + "</div>" + 
+      `<button id=${`btn-${i}`} style='background-color:#FFFFFF; border:1px solid #000000;margin-top:4px'> Line No:` + 
+      String(Number (annotations[i].row + 1)) + " Column No." + annotations[i].column +  "</button> <br></br>";
+  }
+
+  document.getElementById("all-errors").innerHTML = errors_list;   
+
+  for(var i=0; i<annotations.length; i++){
+    let row = await annotations[i].row;
+    let column = await annotations[i].column;
+
+    document.getElementById(`btn-${i}`).onclick = async function(){__$__.editor.getSelection().clearSelection();  await __$__.editor.moveCursorTo(row, column)};
+  }
+
+  errors_list = "";
+}
+
+window.addEventListener('load', 
+  function(e) { 
+    __$__.getErrors();
+    __$__.editor.$blockScrolling = Infinity;
+  }, false);
+
+
+if(__$__.editor){
+  __$__.editor.on('change', function(e){
+    __$__.getErrors();
+  },true);
+}
+
+
+__$__.openPanel = function() {
+    document.getElementById("problem-panel").style.display = "block";
+    document.getElementById("callTree").style.display = "none";
+    document.getElementById("close-button").style.display = "block";
+    document.getElementById("all-errors").style.display = "block";
+  }
+
+__$__.closePanel = function() {
+
+    document.getElementById("problem-panel").style.display = "none";
+    document.getElementById("callTree").style.display = "block";
+    document.getElementById("close-button").style.display = "none";
+    document.getElementById("all-errors").style.display = "none";
+  }