remove dumb renderer
This commit is contained in:
Fabian Jakobs
parent
c19476b824
commit
83911a628a
3 changed files with 134 additions and 232 deletions
224
DumbRenderer.js
224
DumbRenderer.js
|
|
@ -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<br>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(
|
||||
"<div class='line ",
|
||||
i % 2 == 0 ? "even" : "odd",
|
||||
"' style='height:" + this.lineHeight + "px;",
|
||||
"width:", longestLine, "px'>",
|
||||
lines[i].
|
||||
replace(/&/g, "&").
|
||||
replace(/</g, "<").
|
||||
replace(/\s/g, " "),
|
||||
"</div>"
|
||||
);
|
||||
};
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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<br>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);
|
||||
}
|
||||
};
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script src="lib.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="TextDocument.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="Editor.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="DumbRenderer.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="VirtualRenderer.js" type="text/javascript" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -107,7 +107,6 @@
|
|||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
new Editor(new TextDocument("Juhu Kinners"), new VirtualRenderer("virtual_container"));
|
||||
new Editor(new TextDocument("Juhu Kinners"), new DumbRenderer("container"));
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue