Fixed:CJex#19 realtime rendering

index.html

@@ -278,7 +278,7 @@ <h1>Regulex <em>JavaScript Regular Expression Visualizer.</em></h1>
 var flags=document.getElementsByName('flag');
 var flagBox=$('flagBox');
 var getInputValue=function () {
-    return input.value=trim(input.value);
+    return trim(input.value);
 };
 var setInputValue=function (v) {
   return input.value=trim(v);
@@ -297,16 +297,17 @@ <h1>Regulex <em>JavaScript Regular Expression Visualizer.</em></h1>
 
 visualIt();
 
-function visualIt() {
+function visualIt(skipError) {
   var re=getInputValue();
-  if (!re) return false;
   changeHash();
   hideError();
   var ret;
   try {ret=parse(re)}
   catch (e) {
     if (e instanceof parse.RegexSyntaxError) {
-      showError(re,e);
+      if (!skipError) {
+        showError(re,e);
+      }
     } else throw e;
     return false;
   }
@@ -336,6 +337,7 @@ <h1>Regulex <em>JavaScript Regular Expression Visualizer.</em></h1>
 function initListeners() {
   var LF='\n'.charCodeAt(0),CR='\r'.charCodeAt(0);
   input.addEventListener('keydown',onEnter);
+  input.addEventListener('keyup',onKeyup);
   input.addEventListener('paste',function (evt) {
     var content=trim(evt.clipboardData.getData('text'));
     if (content[0]==='/' && /\/[img]*$/.test(content)) {
@@ -385,12 +387,26 @@ <h1>Regulex <em>JavaScript Regular Expression Visualizer.</em></h1>
     visualIt();
     changeHash();
   }
+
+
+  var onKeyupTid;
+  function onKeyup(e) {
+    if (e.keyCode===LF || e.keyCode===CR) {
+      return true;
+    }
+    console.log(e.keyCode);
+    clearTimeout(onKeyupTid);
+    onKeyupTid=setTimeout(function () {
+      var skipError=true;
+      visualIt(skipError);
+    },100);
+  }
   function onEnter(e) {
     if (e.keyCode===LF || e.keyCode===CR) {
       e.preventDefault();
       e.stopPropagation();
-    } else return;
-    visualIt();
+      visualIt();
+    }
   }
 }
 

src/Kit.js

@@ -261,7 +261,7 @@ function negate(ranges /*:[Range rg]*/) {
       // it will convert unicode escape to raw char
       // that will cause error in IE
       // because IE recognize "\uFFFF" in source code as "\uFFFD"
-      MAX_CHAR=JSON.parse('"\\uFFFF"');
+      MAX_CHAR=String.fromCharCode(0xFFFF);
 
   ranges=classify(ranges).ranges;
   var negated=[];

src/parse.js

@@ -834,7 +834,7 @@ var config={
     ['groupQualify>groupQualifiedStart',':',actions.groupNonCapture],//group non-capturing
     ['groupQualify>groupQualifiedStart','=',actions.groupToAssertion],//group positive lookahead
     ['groupQualify>groupQualifiedStart','!',actions.groupToAssertion],//group negative lookahead
-    [(repeatnStates+',nullChar,digitBackref,'+unicodeEscapeStates+','+hexEscapeStates)+'groupStart,groupQualifiedStart,begin,end,exact,repeat1,repeat0,repeat01,repeatn,repeatNonGreedy,choice>exact',')',actions.groupEnd],//group end
+    [(repeatnStates+',nullChar,digitBackref,'+unicodeEscapeStates+','+hexEscapeStates)+',groupStart,groupQualifiedStart,begin,end,exact,repeat1,repeat0,repeat01,repeatn,repeatNonGreedy,choice>exact',')',actions.groupEnd],//group end
 
     //choice
     ['start,begin,end,groupStart,groupQualifiedStart,exact,repeat0,repeat1,repeat01,repeatn,repeatNonGreedy,choice,'+(repeatnStates+',nullChar,digitBackref,'+unicodeEscapeStates+','+hexEscapeStates)+'>choice','|', actions.choice],

src/visualize.js

@@ -262,7 +262,7 @@ var plotNode={
     return point(x,y,"r(0.5,0.5)#FFF-#000")
   },
   empty:function (node,x,y) {
-    var len=6;
+    var len=10;
     var l=hline(x,y,x+len);
     return {
       items:[l],
@@ -278,16 +278,17 @@ var plotNode={
     var bgColor='DarkGreen',textColor='white';
     var a=textRect('AnyCharExceptNewLine',x,y,bgColor,textColor);
     a.rect.r=10;
-    a.rect.tip="Any char except CR LF."
+    a.rect.tip="AnyChar except CR LF"
     return a;
   },
   backref:function (node,x,y) {
     var bgColor='navy',textColor='white';
-    var a=textRect('Backref group #'+node.num,x,y,bgColor,textColor);
+    var a=textRect('Backref #'+node.num,x,y,bgColor,textColor);
     a.rect.r=8;
     return a;
   },
   repeat:function (node,x,y) {
+    if (elideOK(node)) return plotNode.empty(null,x,y);
     var padding=10,LABEL_MARGIN=4;
     var repeat=node.repeat,txt="",items=[];
     var NonGreedySkipPathColor='darkgreen';
@@ -408,6 +409,7 @@ var plotNode={
     }
   },
   choice:function (node,x,y) {
+    if (elideOK(node)) return plotNode.empty(null,x,y);
     var marginX=20,spacing=6,paddingY=4,height=0,width=0;
     var branches=node.branches.map(function (branch) {
       var ret=plotTree(branch,x,y);
@@ -570,6 +572,7 @@ var plotNode={
     };
   },
   group:function (node,x,y) {
+    if (elideOK(node)) return plotNode.empty(null,x,y);
     var padding=10,lineColor='silver',strokeWidth=2;
     var sub=plotTree(node.sub,x,y);
     if (node.num) {
@@ -591,7 +594,7 @@ var plotNode={
       return {
         items:items,
         width:width,
-        height:rectH+tl.height,
+        height:rectH+tl.height+4, // 4 is margin
         x:x,y:tl.y,
         lineInX:offsetX+sub.lineInX+padding,lineOutX:offsetX+sub.lineOutX+padding
       };
@@ -617,12 +620,12 @@ var plotNode={
     if (nat===AssertLookahead) {
       lineColor="CornflowerBlue";
       fg="darkgreen";
-      txt="If followed by:";
+      txt="Followed by:";
     } else if (nat===AssertNegativeLookahead) {
       lineColor="#F63";
       fg="Purple";
       //txt="Negative\nLookahead!"; // break line
-      txt="If not followed by:";
+      txt="Not followed by:";
     }
 
     var sub=plotNode.group(node,x,y);
@@ -653,7 +656,27 @@ var plotNode={
   }
 };
 
+function elideOK(a) {
+  if (Array.isArray(a)) {//stack
+    var stack=a;
+    for (var i=0;i<stack.length;i++) {
+      if (!elideOK(stack[i])) return false;
+    }
+    return true;
+  }
+  var node=a;
+  if (node.type===EMPTY_NODE) return true;
+
+  if (node.type===GROUP_NODE && node.num===undefined) {
+    return elideOK(node.sub);
+  }
 
+  if (node.type===CHOICE_NODE) {
+
+    return elideOK(node.branches);
+  }
+
+}
 
 var hlColorMap={
   delimiter:'Indigo',