fix line-overflow bug

Author: svr8

css/caret.css

@@ -2,7 +2,7 @@
   position: absolute;
   height: 2.6vh;
   left: 1px;
-  border-right: 1px solid black;
+  border-right: 1px solid white;
 
   transition: 0.07s;
   z-index: 3;

css/custom.css

@@ -1,12 +1,31 @@
 #code_editor {
-  background-color: gainsboro;
-  width: 240px;
-  height: 800px;
+  background-color: rgb(39, 39, 39);
+  width: 800px;
+  height: 400px;
+  overflow: auto;
 }
 .line {
-  height: auto;
+}
+.linenum {
+  color: whitesmoke;
+}
+.code {
+  /* background-color: blanchedalmond; */
+  color: white;
 }
 
 .curLine {
-  background-color: azure;
+  background-color: rgb(78, 78, 78);
+}
+.keyword {
+  color: rgb(20, 181, 255);
+  display: inline-block;
+}
+.value {
+  color: rgb(253, 2, 136);
+  display: inline-block;
+}
+.comment {
+  color: green;
+  display: inline-block;
 }

css/index.css

@@ -11,9 +11,7 @@ body {
   top: 0px;
   left: 0px;
   width: calc(100% - 10px);
-  min-height: 2vh;
   height: 2vh;
-  max-height: 2vh;
 
   font-size: 2vh;
   padding: 2px 5px;
@@ -22,11 +20,16 @@ body {
 .line .linenum {
   display: inline-block;
   min-height: 2vh;
+  text-align: center;
+  vertical-align: middle;
 }
 .line .code {
+  position: absolute;
+  top: 0px;
   display: inline-block;
-  margin: 0px 5px;
+  margin: 1px 5px;
   min-height: 2vh;
+  z-index: 0;
 }
 
 .character {
@@ -36,15 +39,3 @@ body {
   margin: 0;
 }
 
-.keyword {
-  color: blue;
-  display: inline-block;
-}
-.value {
-  color: red;
-  display: inline-block;
-}
-.comment {
-  color: green;
-  display: inline-block;
-}

js/caret.js

@@ -25,28 +25,34 @@ Caret.prototype = {
     let top, left;
     if(this.row == 1) top = 0;
     else top = $(`#${this.page.getId()} .line:nth-child(${this.row})`).position().top;
+    
     if(this.col == 1 || el == undefined) left = $(`#${this.page.getId()} .line:nth-child(${this.row}) .linenum`).width() + 10;
-    else left = $(el).position().left + $(el).width();
+    else left = $(el).position().left + $(el).width() + 16;
+    if(this.col !==1 && el !== undefined)
+    console.log('>>>'+this.row + ' ' + top + ' '+left);
 
-    // caretElement = $(caretElement)[0];
     $(caretElement).css('top', `${top}px`);
     $(caretElement).css('left', `${left}px`);
 
-    // toggle style
+    // toggle current line background color
     let lineEl = $(".curLine");
     $(lineEl).removeClass("curLine");
     lineEl = $(`.line:nth-child(${this.row})`);
     $(lineEl).addClass("curLine");
 
-    /* TODO fix line height expand on char-overflow
-    if ($(lineEl)[0].scrollWidth >  $(lineEl).innerWidth()) {
-      console.log('overflow: '+this.row)
-      let charCount = this.page.getLineRef(this.row).getCode().length
-      let charWidth = $('.character:nth-child(1)').width()
-      let charPerLine = this.page.width / charWidth
-      console.log(charPerLine)    
-    }
-    */
+    // detect text overflow
+    // TODO Enable word-wrap
+    // lineEl = $(`#${this.page.getId()} .line:nth-child(${this.row})`)
+    // let linenumEl = $(`#${this.page.getId()} .line:nth-child(${this.row}) .linenum`);
+    // let linecodeEl = $(`#${this.page.getId()} .line:nth-child(${this.row}) .code`);
+
+    // if($(lineEl).width() < $(linenumEl).width() + $(linecodeEl).width()) {
+    //   console.log('OVERFLOW')
+      
+
+    // } else {
+    //   console.log('NO OVERFLOW');
+    // }
   },
 
   getCharacterElementBefore: function() {

js/var.js

@@ -14,4 +14,10 @@ const charMap = {
   '[': ']',
   "'": "'",
   '"': '"'
-}
+};
+
+var config = {
+  lineHeight: 13,
+  linenumHeight: 14,
+  linecodeHeight: 15,
+};