compilation/execution notifications and resizable splitters

btzy · Apr 4, 2017 · 7d64122 · 7d64122
1 parent ffba2bf
commit 7d64122
Show file tree

Hide file tree

Showing 8 changed files with 291 additions and 45 deletions.
diff --git a/bf.css b/bf.css
@@ -15,6 +15,12 @@ html, body{
     margin:0;
     font-family:"Signika",sans-serif;
     font-size:16px;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 body>.wrapper{
@@ -25,11 +31,14 @@ body>.wrapper{
     flex-wrap:nowrap;
     justify-content:center;
     align-items:stretch;
+    position:relative;
 }
 
 body>.wrapper>*{
     display:block;
     overflow:hidden;
+    position:relative;
+    z-index:0;
 }
 
 #header{
@@ -58,7 +67,7 @@ body>.wrapper>*{
 
 #header .title{
     flex:0 0 auto;
-    padding:0px 12px;
+    padding:0px 20px;
 }
 
 #header .title .jelly{
@@ -156,8 +165,21 @@ body>.wrapper>*{
 }
 
 #compilationinfo{
-    flex:0 0 20px;
+    flex:0 0 26px;
     background-color:rgb(204,224,255);
+    line-height:26px;
+}
+
+#compilationinfo .compilationinfospan{
+    padding:0 12px;
+}
+
+#compilationinfo #compilationspan{
+    color:blue;
+}
+
+#compilationinfo #executionspan{
+    color:green;
 }
 
 #iooptions{
@@ -177,28 +199,79 @@ body>.wrapper>*{
     flex-wrap:nowrap;
     justify-content:center;
     align-items:stretch;
+    position:relative;
 }
 
 #ioblock .separate>*{
     display:block;
     overflow:hidden;
+    position:relative;
+    z-index:0;
 }
 
-#ioblock .separate #inputblock{
+#ioblock .separate .ioseparateindividualblock{
     flex:1 1 0px;
+    display:flex;
+    flex-direction:column;
+    flex-wrap:nowrap;
+    justify-content:center;
+    align-items:stretch;
 }
 
-#ioblock .separate #outputblock{
+#ioblock .separate .ioseparateindividualblock>*{
+    display:block;
+    overflow:hidden;
+}
+
+#ioblock .separate .ioseparateindividualblock>.iotitle{
+    flex:0 0 20px;
+    height:20px;
+    line-height:20px;
+    padding:0 6px;
+    background-color:rgb(230,240,255);
+    font-size:14px;
+}
+
+#ioblock .separate .ioseparateindividualblock>.iocontent{
     flex:1 1 0px;
 }
 
 #ioblock .separate .vertical-spacer{
     flex:0 0 4px;
     width:4px;
     background-color:rgb(204,224,255);
+    position:relative;
+    overflow:visible;
+    z-index:1;
 }
 
-#ioblock .separate #inputblock .editor, #ioblock .separate #outputblock .editor{
+#ioblock .separate .vertical-spacer .actual-spacer{
+    position:absolute;
+    top:0;
+    bottom:0;
+    left:-3px;
+    right:-3px;
+    cursor:col-resize;
+}
+
+#ioblock .separate .ioseparateindividualblock .editor{
     height:100%;
     width:100%;
+}
+
+body>.wrapper>.horizontal-spacer{
+    flex:0 0 0px;
+    height:0px;
+    position:relative;
+    overflow:visible;
+    z-index:1;
+}
+
+body>.wrapper>.horizontal-spacer .actual-spacer{
+    position:absolute;
+    top:-5px;
+    bottom:-5px;
+    left:0;
+    right:0;
+    cursor:row-resize;
 }
diff --git a/bf.html b/bf.html
@@ -3,12 +3,13 @@
     <head>
         <meta name="description" content="A fast optimizing compiler for Brainfuck that runs in a browser.">
         <meta charset="UTF-8">
-        <title>Jelly Brainfuck Compiler</title>
+        <title>Jelly Compiler for Brainfuck</title>
         <link href="https://fonts.googleapis.com/css?family=Chewy|Signika" rel="stylesheet">
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         <link rel="stylesheet" href="bf.css" />
         <script src="ace/ace.js" type="text/javascript"></script>
-        <script src="jelly-bf-processhandler.js"></script>
+        <script src="flex-splitter.js" type="text/javascript"></script>
+        <script src="jelly-bf-processhandler.js" type="text/javascript"></script>
         <script src="bf.js" type="text/javascript"></script>
     </head>
     <body>
@@ -28,16 +29,30 @@
             <div id="codeblock">
                 <div class="editor"></div>
             </div>
-            <div id="compilationinfo"></div>
+            <div class="horizontal-spacer">
+                <div class="actual-spacer"></div>
+            </div>
+            <div id="compilationinfo"><span class="compilationinfospan" id="compilationspan"></span><span class="compilationinfospan" id="executionspan"></span></div>
             <div id="iooptions"></div>
+            <div class="horizontal-spacer">
+                <div class="actual-spacer"></div>
+            </div>
             <div id="ioblock">
                 <div class="separate">
-                    <div id="inputblock">
-                        <div class="editor"></div>
+                    <div class="ioseparateindividualblock" id="inputblock">
+                        <div class="iotitle">Input</div>
+                        <div class="iocontent">
+                            <div class="editor"></div>
+                        </div>
+                    </div>
+                    <div class="vertical-spacer">
+                        <div class="actual-spacer"></div>
                     </div>
-                    <div class="vertical-spacer"></div>
-                    <div id="outputblock">
-                        <div class="editor"></div>
+                    <div class="ioseparateindividualblock" id="outputblock">
+                        <div class="iotitle">Output</div>
+                        <div class="iocontent">
+                            <div class="editor"></div>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/bf.js b/bf.js
@@ -89,6 +89,14 @@ window.addEventListener("load",function(){
     var isCompiling=false;
     var toRunAfterCompiling=false;
 
+    var compilationSpan=document.getElementById("compilationspan");
+    var executionSpan=document.getElementById("executionspan");
+
+    while(compilationSpan.firstChild)compilationSpan.removeChild(compilationSpan.firstChild);
+    compilationSpan.appendChild(document.createTextNode(""));
+    while(executionSpan.firstChild)executionSpan.removeChild(executionSpan.firstChild);
+    executionSpan.appendChild(document.createTextNode(""));
+
     codeEditor.on("change",function(){
         codeCompiled=false;
     });
@@ -107,17 +115,25 @@ window.addEventListener("load",function(){
         processHandler=new JellyBFProcessHandler();
         processHandler.initialize(function(){
             if(!to_terminate){
+                executionSpan.firstChild.nodeValue="";
+                compilationSpan.firstChild.nodeValue="Compiling…";
                 var start_time=Date.now();
-                processHandler.compile(codeEditor.getValue(),{},function(){
+                processHandler.compile(codeEditor.getValue(),{},function(message){
                     if(!to_terminate){
-                        codeCompiled=true;
                         isCompiling=false;
-                        var end_time=Date.now();
-                        console.log("Compiled in "+Math.round(end_time-start_time)+" ms.");
                         processHandlerTerminator=undefined;
-                        if(toRunAfterCompiling){
-                            toRunAfterCompiling=false;
-                            runbutton.click();
+                        if(message.success){
+                            codeCompiled=true;
+                            var end_time=Date.now();
+                            console.log("Compiled in "+Math.round(end_time-start_time)+" ms.");
+                            compilationSpan.firstChild.nodeValue="Compiled in "+Math.round(end_time-start_time)+" ms.";
+                            if(toRunAfterCompiling){
+                                toRunAfterCompiling=false;
+                                runbutton.click();
+                            }
+                        }
+                        else{
+                            compilationSpan.firstChild.nodeValue="Compilation failed.";
                         }
                     }
                 });
@@ -140,15 +156,39 @@ window.addEventListener("load",function(){
             runTerminator=function(){
                 to_terminate=true;
             };
+            executionSpan.firstChild.nodeValue="Executing…";
             var start_time=Date.now();
-            processHandler.execute(inputEditor.getValue(),{},function(outputstr){
+            processHandler.execute(inputEditor.getValue(),{},function(message){
                 if(!to_terminate){
-                    var end_time=Date.now();
-                    console.log("Executed in "+Math.round(end_time-start_time)+" ms.");
-                    outputEditor.setValue(outputstr,1);
                     runTerminator=undefined;
+                    if(message.success){
+                        var end_time=Date.now();
+                        outputEditor.setValue(message.output,1);
+                        console.log("Executed in "+Math.round(end_time-start_time)+" ms.");
+                        executionSpan.firstChild.nodeValue="Executed in "+Math.round(end_time-start_time)+" ms.";
+                    }
+                    else{
+                        executionSpan.firstChild.nodeValue="Execution failed.";
+                    }
                 }
             });
         }
     });
+
+    // splitters
+    Array.prototype.forEach.call(document.getElementById("ioblock").getElementsByClassName("vertical-spacer"),function(el){
+        var splitter=new FlexSplitter(el,el.getElementsByClassName("actual-spacer")[0],0.1,0.1);
+        splitter.onadjust=function(){
+            inputEditor.resize();
+            outputEditor.resize();
+        };
+    });
+    Array.prototype.forEach.call(document.getElementsByClassName("horizontal-spacer"),function(el){
+        var splitter=new FlexSplitter(el,el.getElementsByClassName("actual-spacer")[0],0.1,0.1);
+        splitter.onadjust=function(){
+            codeEditor.resize();
+            inputEditor.resize();
+            outputEditor.resize();
+        };
+    });
 });
diff --git a/flex-splitter.js b/flex-splitter.js
@@ -0,0 +1,70 @@
+var FlexSplitter=function(flex_el,drag_el,minBefore,minAfter){
+    var that=this;
+
+    var splitterElement=flex_el;
+    var containerElement=flex_el.parentElement;
+    var beforeElement=flex_el;
+    do{
+        beforeElement=beforeElement.previousElementSibling;
+    }while(parseFloat(window.getComputedStyle(beforeElement).getPropertyValue("flex-grow"))===0);
+    var afterElement=flex_el;
+    do{
+        afterElement=afterElement.nextElementSibling;
+    }while(parseFloat(window.getComputedStyle(afterElement).getPropertyValue("flex-grow"))===0);
+
+    var containerflexdirection=window.getComputedStyle(containerElement).getPropertyValue("flex-direction");
+    var isFlexVertical=(containerflexdirection.indexOf("column")!==-1);
+    var isFlexReverse=(containerflexdirection.indexOf("reverse")!==-1);
+
+    minBefore=minBefore||0.1;
+    minAfter=minAfter||0.1;
+
+    var mousedownLocation=undefined;
+    var beforeElSize=undefined;
+    var afterElSize=undefined;
+    var beforeElRatio=undefined;
+    var afterElRatio=undefined;
+
+    var mouseup_handler=function(e){
+        document.removeEventListener("mouseleave",mouseup_handler);
+        document.removeEventListener("mouseup",mouseup_handler);
+        document.removeEventListener("mousemove",mousemove_handler);
+        mousedownLocation=undefined;
+        beforeElSize=undefined;
+        afterElSize=undefined;
+        beforeElRatio=undefined;
+        afterElRatio=undefined;
+        if(that.onresize)that.onresize();
+    };
+
+    var mousemove_handler=function(e){
+        var mouseCurrLocation=(isFlexVertical?e.clientY:e.clientX);
+        var beforeElNewRatio=(beforeElSize+(isFlexReverse?(mousedownLocation-mouseCurrLocation):(mouseCurrLocation-mousedownLocation)))/beforeElSize*beforeElRatio;
+        var afterElNewRatio=(afterElSize-(isFlexReverse?(mousedownLocation-mouseCurrLocation):(mouseCurrLocation-mousedownLocation)))/afterElSize*afterElRatio;
+        var totalRatio=beforeElRatio+afterElRatio;
+        if(beforeElNewRatio/totalRatio<minBefore){
+            beforeElNewRatio=minBefore*totalRatio;
+            afterElNewRatio=(1-minBefore)*totalRatio;
+        }
+        if(afterElNewRatio/totalRatio<minAfter){
+            afterElNewRatio=minAfter*totalRatio;
+            beforeElNewRatio=(1-minAfter)*totalRatio;
+        }
+        beforeElement.style.setProperty("flex-grow",beforeElNewRatio.toString());
+        beforeElement.style.setProperty("flex-shrink",beforeElNewRatio.toString());
+        afterElement.style.setProperty("flex-grow",afterElNewRatio.toString());
+        afterElement.style.setProperty("flex-shrink",afterElNewRatio.toString());
+        if(that.onadjust)that.onadjust();
+    };
+
+    drag_el.addEventListener("mousedown",function(e){
+        mousedownLocation=(isFlexVertical?e.clientY:e.clientX);
+        beforeElSize=(isFlexVertical?beforeElement.offsetHeight:beforeElement.offsetWidth);
+        afterElSize=(isFlexVertical?afterElement.offsetHeight:afterElement.offsetWidth);
+        beforeElRatio=parseFloat(window.getComputedStyle(beforeElement).getPropertyValue("flex-grow"));
+        afterElRatio=parseFloat(window.getComputedStyle(afterElement).getPropertyValue("flex-grow"));
+        document.addEventListener("mousemove",mousemove_handler);
+        document.addEventListener("mouseup",mouseup_handler);
+        document.addEventListener("mouseleave",mouseup_handler);
+    });
+};
diff --git a/index.html b/index.html
@@ -2,6 +2,9 @@
 <html>
     <head>
         <meta charset="utf-8" />
+        <script type="text/javascript">
+            window.location.replace("bf.html");
+        </script>
         <title>Jelly Brainfuck Compiler</title>
         <link rel="stylesheet" href="main.css" />
         <script src="wasm32codegen.max.js" type="text/javascript"></script>

diff --git a/jelly-bf-processhandler.js b/jelly-bf-processhandler.js
@@ -24,15 +24,21 @@ JellyBFProcessHandler.prototype.initialize=function(callback){
 JellyBFProcessHandler.prototype.compile=function(sourcecode,options,callback){
     this.worker.postMessage({type:"compile",sourcecode:sourcecode,options:options});
     wait_for_message(this.worker,"compiled",function(message){
-        callback();
+        callback({success:true});
+    });
+    wait_for_message(this.worker,"compileerror",function(message){
+        callback({success:false});
     });
 };
 
 JellyBFProcessHandler.prototype.execute=function(inputstr,options,callback){
     var encodedinput=new TextEncoder().encode(inputstr);
     this.worker.postMessage({type:"execute",inputuint8array:encodedinput,options:options},[encodedinput.buffer]);
     wait_for_message(this.worker,"executed",function(message){
-        callback(new TextDecoder().decode(message.outputuint8array));
+        callback({success:true,output:new TextDecoder().decode(message.outputuint8array)});
+    });
+    wait_for_message(this.worker,"executeerror",function(message){
+        callback({success:false});
     });
 };