From 99b81b0b04cf8ebf7c3e3b286263914a5d019c27 Mon Sep 17 00:00:00 2001
From: Fabian Jakobs <fabian.jakobs@web.de>
Date: Wed, 7 Apr 2010 16:27:17 +0200
Subject: [PATCH] gutter support

---
 GutterLayer.js     | 22 ++++++++++++++++++++++
 VirtualRenderer.js | 38 ++++++++++++++++++++++++++------------
 editor.html        |  1 +
 lib.js             | 16 ++++++++++++++++
 4 files changed, 65 insertions(+), 12 deletions(-)
 create mode 100644 GutterLayer.js

diff --git a/GutterLayer.js b/GutterLayer.js
new file mode 100644
index 00000000..cddac987
--- /dev/null
+++ b/GutterLayer.js
@@ -0,0 +1,22 @@
+function GutterLayer(parentEl)
+{
+  this.element = document.createElement("div");
+  this.element.className = "layer gutter-layer";
+  parentEl.appendChild(this.element);
+}
+
+GutterLayer.prototype.update = function(config)
+{
+  var html = [];
+  for (var i=config.firstRow; i<config.lastRow; i++)
+  {
+    html.push(
+      "<div class='gutter-cell' style='height:" + config.lineHeight + "px;'>",
+      i,
+      "</div>"
+    );
+    html.push("</div>");
+  }
+  
+  this.element.innerHTML = html.join("");  
+};
\ No newline at end of file
diff --git a/VirtualRenderer.js b/VirtualRenderer.js
index fb6d57a1..f2baa828 100644
--- a/VirtualRenderer.js
+++ b/VirtualRenderer.js
@@ -3,14 +3,24 @@ function VirtualRenderer(containerId)
   this.container = document.getElementById(containerId);
   this.container.className += "editor";
   
-  var textLayer = this.textLayer = new TextLayer(this.container);
+  this.scroller = document.createElement("div");
+  this.scroller.className = "scroller";
+  this.container.appendChild(this.scroller);
+  
+  this.gutter = document.createElement("div");
+  this.gutter.className = "gutter";
+  this.container.appendChild(this.gutter);
+
+  this.gutterLayer = new GutterLayer(this.gutter);  
+  this.markerLayer = new MarkerLayer(this.scroller);
+
+  var textLayer = this.textLayer = new TextLayer(this.scroller);
   this.canvas = textLayer.element;
   
   this.characterWidth = textLayer.getCharacterWidth();
   this.lineHeight = textLayer.getLineHeight(); 
   
-  this.cursorLayer = new CursorLayer(this.container);
-  this.markerLayer = new MarkerLayer(this.container);
+  this.cursorLayer = new CursorLayer(this.scroller);
   
   this.layers = [this.markerLayer, textLayer, this.cursorLayer];
   
@@ -68,6 +78,10 @@ VirtualRenderer.prototype.draw = function()
 
     layer.update(layerConfig);    
   };
+  
+  this.gutterLayer.element.style.marginTop = (-offset) + "px";
+  this.gutterLayer.element.style.height =  minHeight + "px";
+  this.gutterLayer.update(layerConfig);
 }
 
 VirtualRenderer.prototype.addMarker = function(range, clazz) {
@@ -103,16 +117,16 @@ VirtualRenderer.prototype.scrollCursorIntoView = function()
     this.scrollToY(top);
   }
   
-  if (this.getScrollTop() + this.container.clientHeight < top + this.lineHeight) {
-    this.scrollToY(top + this.lineHeight - this.container.clientHeight);
+  if (this.getScrollTop() + this.scroller.clientHeight < top + this.lineHeight) {
+    this.scrollToY(top + this.lineHeight - this.scroller.clientHeight);
   }  
   
-  if (this.container.scrollLeft > left) {
-    this.container.scrollLeft = left;
+  if (this.scroller.scrollLeft > left) {
+    this.scroller.scrollLeft = left;
   }
   
-  if (this.container.scrollLeft + this.container.clientWidth < left + this.characterWidth) {
-    this.container.scrollLeft = left + this.characterWidth - this.container.clientWidth;
+  if (this.scroller.scrollLeft + this.scroller.clientWidth < left + this.characterWidth) {
+    this.scroller.scrollLeft = left + this.characterWidth - this.scroller.clientWidth;
   }
 },
 
@@ -122,7 +136,7 @@ VirtualRenderer.prototype.getScrollTop = function() {
 
 VirtualRenderer.prototype.scrollToY = function(scrollTop)
 {
-  var maxHeight = this.lines.length * this.lineHeight - this.container.offsetHeight;
+  var maxHeight = this.lines.length * this.lineHeight - this.scroller.offsetHeight;
   var scrollTop = Math.max(0, Math.min(maxHeight, scrollTop));
   
   if (this.scrollTop !== scrollTop) {
@@ -133,9 +147,9 @@ VirtualRenderer.prototype.scrollToY = function(scrollTop)
 
 VirtualRenderer.prototype.screenToTextCoordinates = function(pageX, pageY) 
 {
-  var canvasPos = this.container.getBoundingClientRect();
+  var canvasPos = this.scroller.getBoundingClientRect();
     
-  var col = Math.floor((pageX + this.container.scrollLeft - canvasPos.left) / this.characterWidth);
+  var col = Math.floor((pageX + this.scroller.scrollLeft - canvasPos.left) / this.characterWidth);
   var row = Math.floor((pageY + this.scrollTop - canvasPos.top) / this.lineHeight);
   
   return {
diff --git a/editor.html b/editor.html
index 7c6ab42a..bff1a2a8 100644
--- a/editor.html
+++ b/editor.html
@@ -22,6 +22,7 @@
 	<script src="lib.js" type="text/javascript" charset="utf-8"></script>
 	<script src="TextDocument.js" type="text/javascript" charset="utf-8"></script>	
 	<script src="CursorLayer.js" type="text/javascript" charset="utf-8"></script>	
+	<script src="GutterLayer.js" type="text/javascript" charset="utf-8"></script>	
 	<script src="TextLayer.js" type="text/javascript" charset="utf-8"></script>	
 	<script src="MarkerLayer.js" type="text/javascript" charset="utf-8"></script>	
 	<script src="TextInput.js" type="text/javascript" charset="utf-8"></script>	
diff --git a/lib.js b/lib.js
index 981c559b..5db700ff 100644
--- a/lib.js
+++ b/lib.js
@@ -74,6 +74,22 @@ computedStyle = function(element, style)
   }
 }
 
+scrollbarHeight = function() {
+  var el = document.createElement("div");
+  var style = el.style;
+  
+  style.position = "absolute";
+  style.left = "-10000px";
+  style.overflow = "scroll";
+  style.height = "100px";
+  
+  document.body.appendChild(el);
+  var height = el.offsetHeight - el.clientHeight;
+  document.body.removeChild(el);
+  
+  return height;
+}
+
 bind = function(fcn, context) {
   return function() {
     return fcn.apply(context, arguments);