jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

remove dumb renderer

Browse source
This commit is contained in:
Fabian Jakobs 2010-04-06 16:31:01 +02:00
commit 83911a628a
3 changed files with 134 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

224
DumbRenderer.js
View file

@ -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, "&amp;").
replace(/</g, "&lt;").
replace(/\s/g, "&nbsp;"),
"</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);
}
}
}

135
VirtualRenderer.js
View file

@ -1,10 +1,27 @@
function VirtualRenderer(containerId) 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.scrollTop = 0;
this.firstRow = 0; this.firstRow = 0;
this.cursorPos = { this.cursorPos = {
row: 0, row: 0,
column: 0 column: 0
@ -23,10 +40,45 @@ function VirtualRenderer(containerId)
this.layers.push({ this.layers.push({
element: this.markerEl, element: this.markerEl,
update: this.updateMarkers 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() VirtualRenderer.prototype.draw = function()
{ {
@ -93,6 +145,7 @@ VirtualRenderer.prototype.renderLine = function(stringBuilder, row)
}; };
}; };
VirtualRenderer.prototype.updateMarkers = function(element, firstRow, lastRow, width) VirtualRenderer.prototype.updateMarkers = function(element, firstRow, lastRow, width)
{ {
var html = []; var html = [];
@ -154,6 +207,38 @@ VirtualRenderer.prototype.updateMarkers = function(element, firstRow, lastRow, w
element.innerHTML = html.join(""); 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) VirtualRenderer.prototype.updateCursor = function(position)
{ {
this.cursorPos = { 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() VirtualRenderer.prototype.scrollCursorIntoView = function()
{ {
var left = this.cursorLeft; var left = this.cursorLeft;
@ -229,4 +328,32 @@ VirtualRenderer.prototype.screenToTextCoordinates = function(pageX, pageY)
row: row, row: row,
column: col 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);
}
}; };

7
editor.html
View file

@ -11,7 +11,6 @@
#virtual_container { #virtual_container {
position: absolute; position: absolute;
/*padding: 3px;*/
border: 1px solid black; border: 1px solid black;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
@ -41,7 +40,7 @@
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
font-family: Monaco, "Courier New"; font-family: Monaco, "Courier New";
font-size: 14px; font-size: 12px;
white-space: nowrap; white-space: nowrap;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
@ -81,6 +80,7 @@
} }
.markers { .markers {
position: absolute;
z-index: 1; z-index: 1;
} }
@ -88,12 +88,12 @@
position: absolute; position: absolute;
background: rgba(77, 151, 255, 0.33); background: rgba(77, 151, 255, 0.33);
} }
</style> </style>
<script src="lib.js" type="text/javascript" charset="utf-8"></script> <script src="lib.js" type="text/javascript" charset="utf-8"></script>
<script src="TextDocument.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="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> <script src="VirtualRenderer.js" type="text/javascript" charset="utf-8"></script>
</head> </head>
<body> <body>
@ -107,7 +107,6 @@
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
new Editor(new TextDocument("Juhu Kinners"), new VirtualRenderer("virtual_container")); new Editor(new TextDocument("Juhu Kinners"), new VirtualRenderer("virtual_container"));
new Editor(new TextDocument("Juhu Kinners"), new DumbRenderer("container"));
</script> </script>