diff --git a/DumbRenderer.js b/DumbRenderer.js deleted file mode 100644 index 0485dc2b..00000000 --- a/DumbRenderer.js +++ /dev/null @@ -1,224 +0,0 @@ -function DumbRenderer(containerId) -{ - this.container = document.getElementById(containerId); - this.canvas = document.createElement("div"); - this.canvas.className = "canvas"; - this.container.appendChild(this.canvas); - - this._measureSizes(); - - this.composition = document.createElement("div"); - this.composition.className = "composition"; - this.composition.style.height = this.lineHeight + "px"; - - this.cursor = document.createElement("div"); - this.cursor.className = "cursor"; - this.cursor.style.height = this.lineHeight + "px"; - - this.markers = {}; - this._markerId = 1; -} - -DumbRenderer.prototype = -{ - setDocument : function(doc) { - this.lines = doc.lines; - this.doc = doc; - }, - - getContainerElement : function() { - return this.container; - }, - - _measureSizes : function() - { - var measureNode = document.createElement("div"); - var style = measureNode.style; - style.width = style.height = "auto"; - style.left = style.top = "-1000px"; - style.visibility = "hidden"; - style.position = "absolute"; - style.overflow = "visible"; - - measureNode.innerHTML = "X
X"; - this.canvas.appendChild(measureNode); - - this.lineHeight = Math.round(measureNode.offsetHeight / 2); - this.characterWidth = measureNode.offsetWidth; - - this.canvas.removeChild(measureNode); - }, - - getLongestLineWidth : function(lines) - { - var longestLine = this.container.clientWidth; - for (var i=0; i < lines.length; i++) { - longestLine = Math.max(longestLine, (lines[i].length * this.characterWidth)); - } - return longestLine; - }, - - draw : function() - { - var lines = this.lines; - var longestLine = this.getLongestLineWidth(lines); - - var html = []; - for (var i=0; i < lines.length; i++) - { - html.push( - "
", - lines[i]. - replace(/&/g, "&"). - replace(/" - ); - }; - this.canvas.innerHTML = html.join(""); - - this.canvas.appendChild(this.cursor); - }, - - updateCursor : function(position) - { - var left = this.cursorLeft = position.column * this.characterWidth; - var top = this.cursorTop = position.row * this.lineHeight; - - this.cursor.style.left = left + "px"; - this.cursor.style.top = top + "px"; - - if (this.cursorVisible) { - this.canvas.appendChild(this.cursor); - } - }, - - hideCursor : function() - { - this.cursorVisible = true; - if (this.cursor.parentNode) { - this.cursor.parentNode.removeChild(this.cursor); - } - }, - - showCursor : function() - { - this.cursorVisible = true; - this.canvas.appendChild(this.cursor); - }, - - getScrollTop : function() { - return this.container.scrollTop; - }, - - scrollToY : function(scrollTop) { - return this.container.scrollTop = scrollTop; - }, - - scrollCursorIntoView : function() - { - var left = this.cursorLeft; - var top = this.cursorTop; - - if (this.container.scrollLeft > left) { - this.container.scrollLeft = left; - } - - if (this.container.scrollLeft + this.container.clientWidth < left + this.characterWidth) { - this.container.scrollLeft = left + this.characterWidth - this.container.clientWidth; - } - - if (this.container.scrollTop > top) { - this.container.scrollTop = top; - } - - if (this.container.scrollTop + this.container.clientHeight < top + this.lineHeight) { - this.container.scrollTop = top + this.lineHeight - this.container.clientHeight; - } - }, - - screenToTextCoordinates : function(pageX, pageY) - { - var canvasPos = this.container.getBoundingClientRect(); - - if (pageY < canvasPos.top || pageY > canvasPos.bottom) { - row = null; - } else { - var row = Math.floor((pageY + this.container.scrollTop - canvasPos.top) / this.lineHeight); - } - - if (pageX < canvasPos.left || pageX > canvasPos.right) { - col = null; - } else { - var col = Math.floor((pageX + this.container.scrollLeft - canvasPos.left) / this.characterWidth); - } - - return { - row: row, - column: col - } - }, - - visualizeFocus : function() { - this.container.className = "focus"; - }, - - visualizeBlur : function() { - this.container.className = ""; - }, - - addMarker : function(range, clazz) - { - var id = this._markerId++; - this.markers[id] = { - range: range, - type: "line", - clazz: clazz - }; - - this.draw(); - - return id; - }, - - removeMarker : function(markerId) - { - var marker = this.markers[markerId]; - if (marker) { - delete(this.markers[markerId]); - this.draw(); - } - }, - - updateMarker : function(markerId, range) - { - var marker = this.markers[markerId]; - if (marker) { - marker.range = range; - this.draw(); - } - }, - - showComposition : function(position) - { - setText(this.composition, ""); - - this.composition.style.left = (position.column * this.characterWidth+1) + "px"; - this.composition.style.top = (position.row * this.lineHeight+1) + "px"; - - this.container.appendChild(this.composition); - }, - - setCompositionText : function(text) { - setText(this.composition, text); - }, - - hideComposition : function() { - if (this.composition.parentNode) { - this.container.removeChild(this.composition); - } - } -} \ No newline at end of file diff --git a/VirtualRenderer.js b/VirtualRenderer.js index 412a969b..cfcdf631 100644 --- a/VirtualRenderer.js +++ b/VirtualRenderer.js @@ -1,10 +1,27 @@ function VirtualRenderer(containerId) { - DumbRenderer.call(this, containerId); + this.container = document.getElementById(containerId); + this.canvas = document.createElement("div"); + this.canvas.className = "canvas"; + this.container.appendChild(this.canvas); + + this._measureSizes(); + + this.composition = document.createElement("div"); + this.composition.className = "composition"; + this.composition.style.height = this.lineHeight + "px"; + + this.cursor = document.createElement("div"); + this.cursor.className = "cursor"; + this.cursor.style.height = this.lineHeight + "px"; + + this.markers = {}; + this._markerId = 1; + this.scrollTop = 0; this.firstRow = 0; - + this.cursorPos = { row: 0, column: 0 @@ -23,10 +40,45 @@ function VirtualRenderer(containerId) this.layers.push({ element: this.markerEl, update: this.updateMarkers - }); + }); } -inherits(VirtualRenderer, DumbRenderer); +VirtualRenderer.prototype.setDocument = function(doc) { + this.lines = doc.lines; + this.doc = doc; +}; + +VirtualRenderer.prototype.getContainerElement = function() { + return this.container; +}; + +VirtualRenderer.prototype._measureSizes = function() +{ + var measureNode = document.createElement("div"); + var style = measureNode.style; + style.width = style.height = "auto"; + style.left = style.top = "-1000px"; + style.visibility = "hidden"; + style.position = "absolute"; + style.overflow = "visible"; + + measureNode.innerHTML = "X
X"; + this.canvas.appendChild(measureNode); + + this.lineHeight = Math.round(measureNode.offsetHeight / 2); + this.characterWidth = measureNode.offsetWidth; + + this.canvas.removeChild(measureNode); +}; + +VirtualRenderer.prototype.getLongestLineWidth = function(lines) +{ + var longestLine = this.container.clientWidth; + for (var i=0; i < lines.length; i++) { + longestLine = Math.max(longestLine, (lines[i].length * this.characterWidth)); + } + return longestLine; +}; VirtualRenderer.prototype.draw = function() { @@ -93,6 +145,7 @@ VirtualRenderer.prototype.renderLine = function(stringBuilder, row) }; }; + VirtualRenderer.prototype.updateMarkers = function(element, firstRow, lastRow, width) { var html = []; @@ -154,6 +207,38 @@ VirtualRenderer.prototype.updateMarkers = function(element, firstRow, lastRow, w element.innerHTML = html.join(""); }; +VirtualRenderer.prototype.addMarker = function(range, clazz) +{ + var id = this._markerId++; + this.markers[id] = { + range: range, + type: "line", + clazz: clazz + }; + + this.draw(); + + return id; +}; + +VirtualRenderer.prototype.removeMarker = function(markerId) +{ + var marker = this.markers[markerId]; + if (marker) { + delete(this.markers[markerId]); + this.draw(); + } +}; + +VirtualRenderer.prototype.updateMarker = function(markerId, range) +{ + var marker = this.markers[markerId]; + if (marker) { + marker.range = range; + this.draw(); + } +}; + VirtualRenderer.prototype.updateCursor = function(position) { this.cursorPos = { @@ -172,6 +257,20 @@ VirtualRenderer.prototype.updateCursor = function(position) } }; +VirtualRenderer.prototype.hideCursor = function() +{ + this.cursorVisible = true; + if (this.cursor.parentNode) { + this.cursor.parentNode.removeChild(this.cursor); + } +}; + +VirtualRenderer.prototype.showCursor = function() +{ + this.cursorVisible = true; + this.canvas.appendChild(this.cursor); +}; + VirtualRenderer.prototype.scrollCursorIntoView = function() { var left = this.cursorLeft; @@ -229,4 +328,32 @@ VirtualRenderer.prototype.screenToTextCoordinates = function(pageX, pageY) row: row, column: col } +}; + +VirtualRenderer.prototype.visualizeFocus = function() { + this.container.className = "focus"; +}; + +VirtualRenderer.prototype.visualizeBlur = function() { + this.container.className = ""; +}; + +VirtualRenderer.prototype.showComposition = function(position) +{ + setText(this.composition, ""); + + this.composition.style.left = (position.column * this.characterWidth+1) + "px"; + this.composition.style.top = (position.row * this.lineHeight+1) + "px"; + + this.container.appendChild(this.composition); +}; + +VirtualRenderer.prototype.setCompositionText = function(text) { + setText(this.composition, text); +}; + +VirtualRenderer.prototype.hideComposition = function() { + if (this.composition.parentNode) { + this.container.removeChild(this.composition); + } }; \ No newline at end of file diff --git a/editor.html b/editor.html index 0f8b8d4c..53f3032a 100644 --- a/editor.html +++ b/editor.html @@ -11,7 +11,6 @@ #virtual_container { position: absolute; - /*padding: 3px;*/ border: 1px solid black; overflow-x: auto; overflow-y: hidden; @@ -41,7 +40,7 @@ position: absolute; overflow: hidden; font-family: Monaco, "Courier New"; - font-size: 14px; + font-size: 12px; white-space: nowrap; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -81,6 +80,7 @@ } .markers { + position: absolute; z-index: 1; } @@ -88,12 +88,12 @@ position: absolute; background: rgba(77, 151, 255, 0.33); } + - @@ -107,7 +107,6 @@