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

move layers into a separate folder

Browse source
This commit is contained in:
Fabian Jakobs 2010-04-20 15:30:30 +02:00
commit 150db75d03
7 changed files with 48 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

17
demo/editor.html
View file

@ -52,10 +52,10 @@
<script src="../src/TextDocument.js" type="text/javascript" charset="utf-8"></script> <script src="../src/TextDocument.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/Tokenizer.js" type="text/javascript" charset="utf-8"></script> <script src="../src/Tokenizer.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/BackgroundTokenizer.js" type="text/javascript" charset="utf-8"></script> <script src="../src/BackgroundTokenizer.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/CursorLayer.js" type="text/javascript" charset="utf-8"></script> <script src="../src/layer/Cursor.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/GutterLayer.js" type="text/javascript" charset="utf-8"></script> <script src="../src/layer/Gutter.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/TextLayer.js" type="text/javascript" charset="utf-8"></script> <script src="../src/layer/Text.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/MarkerLayer.js" type="text/javascript" charset="utf-8"></script> <script src="../src/layer/Marker.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/TextInput.js" type="text/javascript" charset="utf-8"></script> <script src="../src/TextInput.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/KeyBinding.js" type="text/javascript" charset="utf-8"></script> <script src="../src/KeyBinding.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/Editor.js" type="text/javascript" charset="utf-8"></script> <script src="../src/Editor.js" type="text/javascript" charset="utf-8"></script>
@ -113,6 +113,15 @@
<script type="text/editor" id="htmltext"><html> <script type="text/editor" id="htmltext"><html>
<head> <head>
<style type="text/css">
.text-layer {
font-family: Monaco, "Courier New", monospace;
font-size: 12px;
cursor: text;
}
</style>
</head> </head>
<body> <body>
<h1 style="color:red">Juhu Kinners</h1> <h1 style="color:red">Juhu Kinners</h1>

1
jsTestDriver.conf
View file

@ -6,6 +6,7 @@ load:
- src/MEventEmitter.js - src/MEventEmitter.js
- src/mode/Text.js - src/mode/Text.js
- src/mode/*.js - src/mode/*.js
- src/layer/*.js
- src/*.js - src/*.js
- test/*.js - test/*.js

8
src/VirtualRenderer.js
View file

@ -12,16 +12,16 @@ ace.VirtualRenderer = function(container) {
this.gutter.className = "gutter"; this.gutter.className = "gutter";
this.container.appendChild(this.gutter); this.container.appendChild(this.gutter);
this.gutterLayer = new ace.GutterLayer(this.gutter); this.gutterLayer = new ace.layer.Gutter(this.gutter);
this.markerLayer = new ace.MarkerLayer(this.scroller); this.markerLayer = new ace.layer.Marker(this.scroller);
var textLayer = this.textLayer = new ace.TextLayer(this.scroller); var textLayer = this.textLayer = new ace.layer.Text(this.scroller);
this.canvas = textLayer.element; this.canvas = textLayer.element;
this.characterWidth = textLayer.getCharacterWidth(); this.characterWidth = textLayer.getCharacterWidth();
this.lineHeight = textLayer.getLineHeight(); this.lineHeight = textLayer.getLineHeight();
this.cursorLayer = new ace.CursorLayer(this.scroller); this.cursorLayer = new ace.layer.Cursor(this.scroller);
this.layers = [ this.markerLayer, textLayer, this.cursorLayer ]; this.layers = [ this.markerLayer, textLayer, this.cursorLayer ];

16
src/CursorLayer.js → src/layer/Cursor.js
View file

@ -1,6 +1,6 @@
ace.provide("ace.CursorLayer"); ace.provide("ace.layer.Cursor");
ace.CursorLayer = function(parentEl) { ace.layer.Cursor = function(parentEl) {
this.element = document.createElement("div"); this.element = document.createElement("div");
this.element.className = "layer cursor-layer"; this.element.className = "layer cursor-layer";
parentEl.appendChild(this.element); parentEl.appendChild(this.element);
@ -11,14 +11,14 @@ ace.CursorLayer = function(parentEl) {
this.isVisible = false; this.isVisible = false;
}; };
ace.CursorLayer.prototype.setCursor = function(position) { ace.layer.Cursor.prototype.setCursor = function(position) {
this.position = { this.position = {
row : position.row, row : position.row,
column : position.column column : position.column
}; };
}; };
ace.CursorLayer.prototype.hideCursor = function() { ace.layer.Cursor.prototype.hideCursor = function() {
this.isVisible = false; this.isVisible = false;
if (this.cursor.parentNode) { if (this.cursor.parentNode) {
this.cursor.parentNode.removeChild(this.cursor); this.cursor.parentNode.removeChild(this.cursor);
@ -26,7 +26,7 @@ ace.CursorLayer.prototype.hideCursor = function() {
clearInterval(this.blinkId); clearInterval(this.blinkId);
}; };
ace.CursorLayer.prototype.showCursor = function() { ace.layer.Cursor.prototype.showCursor = function() {
this.isVisible = true; this.isVisible = true;
this.element.appendChild(this.cursor); this.element.appendChild(this.cursor);
@ -35,7 +35,7 @@ ace.CursorLayer.prototype.showCursor = function() {
this.restartTimer(); this.restartTimer();
}; };
ace.CursorLayer.prototype.restartTimer = function() { ace.layer.Cursor.prototype.restartTimer = function() {
clearInterval(this.blinkId); clearInterval(this.blinkId);
if (!this.isVisible) { if (!this.isVisible) {
return; return;
@ -50,14 +50,14 @@ ace.CursorLayer.prototype.restartTimer = function() {
}, 1000); }, 1000);
}; };
ace.CursorLayer.prototype.getPixelPosition = function() { ace.layer.Cursor.prototype.getPixelPosition = function() {
return this.pixelPos || { return this.pixelPos || {
left : 0, left : 0,
top : 0 top : 0
}; };
}; };
ace.CursorLayer.prototype.update = function(config) { ace.layer.Cursor.prototype.update = function(config) {
if (!this.position) if (!this.position)
return; return;

6
src/GutterLayer.js → src/layer/Gutter.js
View file

@ -1,12 +1,12 @@
ace.provide("ace.GutterLayer"); ace.provide("ace.layer.Gutter");
ace.GutterLayer = function(parentEl) { ace.layer.Gutter = function(parentEl) {
this.element = document.createElement("div"); this.element = document.createElement("div");
this.element.className = "layer gutter-layer"; this.element.className = "layer gutter-layer";
parentEl.appendChild(this.element); parentEl.appendChild(this.element);
}; };
ace.GutterLayer.prototype.update = function(config) { ace.layer.Gutter.prototype.update = function(config) {
var html = []; var html = [];
for ( var i = config.firstRow; i <= config.lastRow; i++) { for ( var i = config.firstRow; i <= config.lastRow; i++) {
html.push("<div class='gutter-cell' style='height:" + config.lineHeight html.push("<div class='gutter-cell' style='height:" + config.lineHeight

18
src/MarkerLayer.js → src/layer/Marker.js
View file

@ -1,6 +1,6 @@
ace.provide("ace.MarkerLayer"); ace.provide("ace.layer.Marker");
ace.MarkerLayer = function(parentEl) { ace.layer.Marker = function(parentEl) {
this.element = document.createElement("div"); this.element = document.createElement("div");
this.element.className = "layer marker-layer"; this.element.className = "layer marker-layer";
parentEl.appendChild(this.element); parentEl.appendChild(this.element);
@ -9,11 +9,11 @@ ace.MarkerLayer = function(parentEl) {
this._markerId = 1; this._markerId = 1;
}; };
ace.MarkerLayer.prototype.setDocument = function(doc) { ace.layer.Marker.prototype.setDocument = function(doc) {
this.doc = doc; this.doc = doc;
}; };
ace.MarkerLayer.prototype.addMarker = function(range, clazz, type) { ace.layer.Marker.prototype.addMarker = function(range, clazz, type) {
var id = this._markerId++; var id = this._markerId++;
this.markers[id] = { this.markers[id] = {
range : range, range : range,
@ -25,7 +25,7 @@ ace.MarkerLayer.prototype.addMarker = function(range, clazz, type) {
return id; return id;
}; };
ace.MarkerLayer.prototype.removeMarker = function(markerId) { ace.layer.Marker.prototype.removeMarker = function(markerId) {
var marker = this.markers[markerId]; var marker = this.markers[markerId];
if (marker) { if (marker) {
delete (this.markers[markerId]); delete (this.markers[markerId]);
@ -33,7 +33,7 @@ ace.MarkerLayer.prototype.removeMarker = function(markerId) {
} }
}; };
ace.MarkerLayer.prototype.update = function(config) { ace.layer.Marker.prototype.update = function(config) {
var config = config || this.config; var config = config || this.config;
if (!config) if (!config)
return; return;
@ -80,7 +80,7 @@ ace.MarkerLayer.prototype.update = function(config) {
this.element.innerHTML = html.join(""); this.element.innerHTML = html.join("");
}; };
ace.MarkerLayer.prototype.drawTextMarker = function(stringBuilder, range, clazz, layerConfig) { ace.layer.Marker.prototype.drawTextMarker = function(stringBuilder, range, clazz, layerConfig) {
// selection start // selection start
var row = range.start.row; var row = range.start.row;
@ -108,7 +108,7 @@ ace.MarkerLayer.prototype.drawTextMarker = function(stringBuilder, range, clazz,
} }
}; };
ace.MarkerLayer.prototype.drawMultiLineMarker = function(stringBuilder, range, clazz, layerConfig) { ace.layer.Marker.prototype.drawMultiLineMarker = function(stringBuilder, range, clazz, layerConfig) {
var height = layerConfig.lineHeight; var height = layerConfig.lineHeight;
var width = Math.round(layerConfig.width - (range.start.column * layerConfig.characterWidth)); var width = Math.round(layerConfig.width - (range.start.column * layerConfig.characterWidth));
@ -144,7 +144,7 @@ ace.MarkerLayer.prototype.drawMultiLineMarker = function(stringBuilder, range, c
} }
}; };
ace.MarkerLayer.prototype.drawSingleLineMarker = function(stringBuilder, range, clazz, layerConfig) { ace.layer.Marker.prototype.drawSingleLineMarker = function(stringBuilder, range, clazz, layerConfig) {
var height = layerConfig.lineHeight; var height = layerConfig.lineHeight;
var width = Math.round((range.end.column - range.start.column) * layerConfig.characterWidth); var width = Math.round((range.end.column - range.start.column) * layerConfig.characterWidth);

20
src/TextLayer.js → src/layer/Text.js
View file

@ -1,6 +1,6 @@
ace.provide("ace.TextLayer"); ace.provide("ace.layer.Text");
ace.TextLayer = function(parentEl) { ace.layer.Text = function(parentEl) {
this.element = document.createElement("div"); this.element = document.createElement("div");
this.element.className = "layer text-layer"; this.element.className = "layer text-layer";
parentEl.appendChild(this.element); parentEl.appendChild(this.element);
@ -9,19 +9,19 @@ ace.TextLayer = function(parentEl) {
this._tabString = " "; this._tabString = " ";
}; };
ace.TextLayer.prototype.setTokenizer = function(tokenizer) { ace.layer.Text.prototype.setTokenizer = function(tokenizer) {
this.tokenizer = tokenizer; this.tokenizer = tokenizer;
}; };
ace.TextLayer.prototype.getLineHeight = function() { ace.layer.Text.prototype.getLineHeight = function() {
return this.lineHeight; return this.lineHeight;
}; };
ace.TextLayer.prototype.getCharacterWidth = function() { ace.layer.Text.prototype.getCharacterWidth = function() {
return this.characterWidth; return this.characterWidth;
}; };
ace.TextLayer.prototype._measureSizes = function() { ace.layer.Text.prototype._measureSizes = function() {
var measureNode = document.createElement("div"); var measureNode = document.createElement("div");
var style = measureNode.style; var style = measureNode.style;
style.width = style.height = "auto"; style.width = style.height = "auto";
@ -42,11 +42,11 @@ ace.TextLayer.prototype._measureSizes = function() {
this.element.removeChild(measureNode); this.element.removeChild(measureNode);
}; };
ace.TextLayer.prototype.setTabSize = function(tabSize) { ace.layer.Text.prototype.setTabSize = function(tabSize) {
this._tabString = new Array(tabSize+1).join("&nbsp;"); this._tabString = new Array(tabSize+1).join("&nbsp;");
}; };
ace.TextLayer.prototype.updateLines = function(layerConfig, firstRow, lastRow) { ace.layer.Text.prototype.updateLines = function(layerConfig, firstRow, lastRow) {
var first = Math.max(firstRow, layerConfig.firstRow); var first = Math.max(firstRow, layerConfig.firstRow);
var last = Math.min(lastRow, layerConfig.lastRow); var last = Math.min(lastRow, layerConfig.lastRow);
@ -61,7 +61,7 @@ ace.TextLayer.prototype.updateLines = function(layerConfig, firstRow, lastRow) {
}; };
}; };
ace.TextLayer.prototype.update = function(config) { ace.layer.Text.prototype.update = function(config) {
var html = []; var html = [];
for ( var i = config.firstRow; i <= config.lastRow; i++) { for ( var i = config.firstRow; i <= config.lastRow; i++) {
html.push("<div class='line' style='height:" + this.lineHeight + "px;", "width:", html.push("<div class='line' style='height:" + this.lineHeight + "px;", "width:",
@ -72,7 +72,7 @@ ace.TextLayer.prototype.update = function(config) {
this.element.innerHTML = html.join(""); this.element.innerHTML = html.join("");
}; };
ace.TextLayer.prototype.renderLine = function(stringBuilder, row) { ace.layer.Text.prototype.renderLine = function(stringBuilder, row) {
var tokens = this.tokenizer.getTokens(row); var tokens = this.tokenizer.getTokens(row);
for ( var i = 0; i < tokens.length; i++) { for ( var i = 0; i < tokens.length; i++) {
var token = tokens[i]; var token = tokens[i];