adapt better to ajax.org coding styles
This commit is contained in:
parent
2b88ca2c71
commit
8fe20516d4
13 changed files with 1556 additions and 1645 deletions
|
|
@ -1,87 +1,84 @@
|
||||||
if (!window.ace) ace = {};
|
if (!window.ace)
|
||||||
|
ace = {};
|
||||||
|
|
||||||
ace.BackgroundTokenizer = function(tokenizer, onUpdate, onComplete)
|
ace.BackgroundTokenizer = function(tokenizer, onUpdate, onComplete) {
|
||||||
{
|
this.running = false;
|
||||||
this.running = false;
|
this.textLines = [];
|
||||||
this.textLines = [];
|
this.lines = [];
|
||||||
this.lines = [];
|
this.currentLine = 0;
|
||||||
this.currentLine = 0;
|
this.tokenizer = tokenizer;
|
||||||
this.tokenizer = tokenizer;
|
|
||||||
|
|
||||||
this.onUpdate = onUpdate || function(firstLine, lastLine) {};
|
this.onUpdate = onUpdate || function(firstLine, lastLine) {
|
||||||
this.onComplete = onComplete || function() {};
|
};
|
||||||
|
this.onComplete = onComplete || function() {
|
||||||
|
};
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
this._worker = function()
|
this._worker = function() {
|
||||||
{
|
if (!self.running) { return; }
|
||||||
if (!self.running) {
|
|
||||||
return;
|
var workerStart = new Date();
|
||||||
|
var startLine = self.currentLine;
|
||||||
|
var textLines = self.textLines;
|
||||||
|
|
||||||
|
var processedLines = 0;
|
||||||
|
|
||||||
|
while (self.currentLine < textLines.length) {
|
||||||
|
var line = textLines[self.currentLine];
|
||||||
|
|
||||||
|
var state = self.currentLine == 0 ? "start"
|
||||||
|
: self.lines[self.currentLine - 1].state;
|
||||||
|
self.lines[self.currentLine] = self.tokenizer.getLineTokens(line,
|
||||||
|
state);
|
||||||
|
|
||||||
|
// only check every 30 lines
|
||||||
|
processedLines += 1;
|
||||||
|
if ((processedLines % 30 == 0) && (new Date() - workerStart) > 20) {
|
||||||
|
self.onUpdate(startLine, self.currentLine);
|
||||||
|
return setTimeout(self._worker, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
self.currentLine++;
|
||||||
|
}
|
||||||
|
|
||||||
|
self.running = false;
|
||||||
|
|
||||||
|
self.onUpdate(startLine, textLines.length - 1);
|
||||||
|
self.onComplete();
|
||||||
}
|
}
|
||||||
|
|
||||||
var workerStart = new Date();
|
|
||||||
var startLine = self.currentLine;
|
|
||||||
var textLines = self.textLines;
|
|
||||||
|
|
||||||
var processedLines = 0;
|
|
||||||
|
|
||||||
while (self.currentLine < textLines.length)
|
|
||||||
{
|
|
||||||
var line = textLines[self.currentLine];
|
|
||||||
|
|
||||||
var state = self.currentLine == 0 ? "start" : self.lines[self.currentLine-1].state;
|
|
||||||
self.lines[self.currentLine] = self.tokenizer.getLineTokens(line, state);
|
|
||||||
|
|
||||||
// only check every 30 lines
|
|
||||||
processedLines += 1;
|
|
||||||
if ((processedLines % 30 == 0) && (new Date()-workerStart) > 20)
|
|
||||||
{
|
|
||||||
self.onUpdate(startLine, self.currentLine);
|
|
||||||
return setTimeout(self._worker, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
self.currentLine++;
|
|
||||||
}
|
|
||||||
|
|
||||||
self.running = false;
|
|
||||||
|
|
||||||
self.onUpdate(startLine, textLines.length-1);
|
|
||||||
self.onComplete();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.BackgroundTokenizer.prototype.setLines = function(textLines)
|
ace.BackgroundTokenizer.prototype.setLines = function(textLines) {
|
||||||
{
|
this.textLines = textLines;
|
||||||
this.textLines = textLines;
|
this.lines = [];
|
||||||
this.lines = [];
|
|
||||||
|
|
||||||
this.stop();
|
this.stop();
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.BackgroundTokenizer.prototype.start = function(startRow)
|
ace.BackgroundTokenizer.prototype.start = function(startRow) {
|
||||||
{
|
this.currentLine = Math.min(startRow || 0, this.currentLine,
|
||||||
this.currentLine = Math.min(startRow || 0, this.currentLine, this.textLines.length);
|
this.textLines.length);
|
||||||
this.lines.splice(startRow, this.lines.length);
|
this.lines.splice(startRow, this.lines.length);
|
||||||
|
|
||||||
if (!this.running)
|
if (!this.running) {
|
||||||
{
|
this.running = true;
|
||||||
this.running = true;
|
setTimeout(this._worker, 50);
|
||||||
setTimeout(this._worker, 50);
|
}
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.BackgroundTokenizer.prototype.stop = function() {
|
ace.BackgroundTokenizer.prototype.stop = function() {
|
||||||
this.running = false;
|
this.running = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.BackgroundTokenizer.prototype.getTokens = function(row)
|
ace.BackgroundTokenizer.prototype.getTokens = function(row) {
|
||||||
{
|
if (this.lines[row]) {
|
||||||
if (this.lines[row]) {
|
return this.lines[row].tokens;
|
||||||
return this.lines[row].tokens;
|
}
|
||||||
} else {
|
else {
|
||||||
var state = "start";
|
var state = "start";
|
||||||
if (row > 0 && this.lines[row-1]) {
|
if (row > 0 && this.lines[row - 1]) {
|
||||||
state = this.lines[row-1].state;
|
state = this.lines[row - 1].state;
|
||||||
|
}
|
||||||
|
return this.tokenizer.getLineTokens(this.textLines[row] || "", state).tokens;
|
||||||
}
|
}
|
||||||
return this.tokenizer.getLineTokens(this.textLines[row] || "", state).tokens;
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
@ -1,71 +1,72 @@
|
||||||
if (!window.ace) ace = {};
|
if (!window.ace)
|
||||||
|
ace = {};
|
||||||
|
|
||||||
ace.CursorLayer = function(parentEl)
|
ace.CursorLayer = 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);
|
|
||||||
|
|
||||||
this.cursor = document.createElement("div");
|
this.cursor = document.createElement("div");
|
||||||
this.cursor.className = "cursor";
|
this.cursor.className = "cursor";
|
||||||
|
|
||||||
this.isVisible = false;
|
this.isVisible = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.CursorLayer.prototype.setCursor = function(position)
|
ace.CursorLayer.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.CursorLayer.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);
|
}
|
||||||
}
|
clearInterval(this.blinkId);
|
||||||
clearInterval(this.blinkId);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.CursorLayer.prototype.showCursor = function()
|
ace.CursorLayer.prototype.showCursor = function() {
|
||||||
{
|
this.isVisible = true;
|
||||||
this.isVisible = true;
|
this.element.appendChild(this.cursor);
|
||||||
this.element.appendChild(this.cursor);
|
|
||||||
|
|
||||||
var cursor = this.cursor;
|
var cursor = this.cursor;
|
||||||
cursor.style.visibility = "visible";
|
cursor.style.visibility = "visible";
|
||||||
|
|
||||||
this.blinkId = setInterval(function() {
|
this.blinkId = setInterval(function() {
|
||||||
cursor.style.visibility = "hidden";
|
cursor.style.visibility = "hidden";
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
cursor.style.visibility = "visible";
|
cursor.style.visibility = "visible";
|
||||||
}, 400);
|
}, 400);
|
||||||
}, 1000);
|
}, 1000);
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.CursorLayer.prototype.getPixelPosition = function() {
|
ace.CursorLayer.prototype.getPixelPosition = function() {
|
||||||
return this.pixelPos || {left: 0, top:0};
|
return this.pixelPos || {
|
||||||
|
left : 0,
|
||||||
|
top : 0
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.CursorLayer.prototype.update = function(config)
|
ace.CursorLayer.prototype.update = function(config) {
|
||||||
{
|
if (!this.position)
|
||||||
if (!this.position) return;
|
return;
|
||||||
|
|
||||||
var cursorLeft = Math.round(this.position.column * config.characterWidth);
|
var cursorLeft = Math.round(this.position.column * config.characterWidth);
|
||||||
var cursorTop = this.position.row * config.lineHeight;
|
var cursorTop = this.position.row * config.lineHeight;
|
||||||
|
|
||||||
this.pixelPos = {
|
this.pixelPos = {
|
||||||
left: cursorLeft,
|
left : cursorLeft,
|
||||||
top: cursorTop
|
top : cursorTop
|
||||||
};
|
};
|
||||||
|
|
||||||
this.cursor.style.left = cursorLeft + "px";
|
this.cursor.style.left = cursorLeft + "px";
|
||||||
this.cursor.style.top = (cursorTop - (config.firstRow * config.lineHeight)) + "px";
|
this.cursor.style.top = (cursorTop - (config.firstRow * config.lineHeight))
|
||||||
this.cursor.style.height = config.lineHeight + "px";
|
+ "px";
|
||||||
|
this.cursor.style.height = config.lineHeight + "px";
|
||||||
|
|
||||||
if (this.isVisible) {
|
if (this.isVisible) {
|
||||||
this.element.appendChild(this.cursor);
|
this.element.appendChild(this.cursor);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
991
src/Editor.js
991
src/Editor.js
File diff suppressed because it is too large
Load diff
|
|
@ -1,24 +1,19 @@
|
||||||
if (!window.ace) ace = {};
|
if (!window.ace)
|
||||||
|
ace = {};
|
||||||
|
|
||||||
ace.GutterLayer = function(parentEl)
|
ace.GutterLayer = 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.GutterLayer.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
|
||||||
{
|
+ "px;'>", i, "</div>");
|
||||||
html.push(
|
html.push("</div>");
|
||||||
"<div class='gutter-cell' style='height:" + config.lineHeight + "px;'>",
|
}
|
||||||
i,
|
|
||||||
"</div>"
|
|
||||||
);
|
|
||||||
html.push("</div>");
|
|
||||||
}
|
|
||||||
|
|
||||||
this.element.innerHTML = html.join("");
|
this.element.innerHTML = html.join("");
|
||||||
};
|
};
|
||||||
|
|
@ -1,139 +1,114 @@
|
||||||
if (!window.ace) ace = {};
|
if (!window.ace)
|
||||||
|
ace = {};
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
ace.JavaScript = {};
|
ace.JavaScript = {};
|
||||||
|
|
||||||
var keywords = {
|
var keywords = {
|
||||||
"break" : 1,
|
"break" : 1,
|
||||||
"case" : 1,
|
"case" : 1,
|
||||||
"catch" : 1,
|
"catch" : 1,
|
||||||
"continue" : 1,
|
"continue" : 1,
|
||||||
"default" : 1,
|
"default" : 1,
|
||||||
"delete" : 1,
|
"delete" : 1,
|
||||||
"do" : 1,
|
"do" : 1,
|
||||||
"else" : 1,
|
"else" : 1,
|
||||||
"finally" : 1,
|
"finally" : 1,
|
||||||
"for" : 1,
|
"for" : 1,
|
||||||
"function" : 1,
|
"function" : 1,
|
||||||
"if" : 1,
|
"if" : 1,
|
||||||
"in" : 1,
|
"in" : 1,
|
||||||
"instanceof" : 1,
|
"instanceof" : 1,
|
||||||
"new" : 1,
|
"new" : 1,
|
||||||
"return" : 1,
|
"return" : 1,
|
||||||
"switch" : 1,
|
"switch" : 1,
|
||||||
"throw" : 1,
|
"throw" : 1,
|
||||||
"try" : 1,
|
"try" : 1,
|
||||||
"typeof" : 1,
|
"typeof" : 1,
|
||||||
"var" : 1,
|
"var" : 1,
|
||||||
"while" : 1,
|
"while" : 1,
|
||||||
"with" : 1
|
"with" : 1
|
||||||
};
|
};
|
||||||
|
|
||||||
// regexp must not have capturing parentheses
|
// regexp must not have capturing parentheses
|
||||||
// regexps are ordered -> the first match is used
|
// regexps are ordered -> the first match is used
|
||||||
|
|
||||||
ace.JavaScript.RULES = {
|
ace.JavaScript.RULES = {
|
||||||
start :
|
start : [ {
|
||||||
[
|
token : "comment",
|
||||||
{
|
regex : "\\/\\/.*$"
|
||||||
token: "comment",
|
}, {
|
||||||
regex: "\\/\\/.*$"
|
token : "comment", // multi line comment in one line
|
||||||
},
|
regex : "\\/\\*.*?\\*\\/"
|
||||||
{
|
}, {
|
||||||
token: "comment", // multi line comment in one line
|
token : "comment", // multi line comment start
|
||||||
regex: "\\/\\*.*?\\*\\/"
|
regex : "\\/\\*.*$",
|
||||||
},
|
next : "comment"
|
||||||
{
|
}, {
|
||||||
token: "comment", // multi line comment start
|
token : "string", // single line
|
||||||
regex: "\\/\\*.*$",
|
regex : '["](?:(?:\\\\.)|(?:[^"\\\\]))*?["]'
|
||||||
next: "comment"
|
}, {
|
||||||
},
|
token : "string", // multi line string start
|
||||||
{
|
regex : '["].*\\\\$',
|
||||||
token: "string", // single line
|
next : "qqstring"
|
||||||
regex: '["](?:(?:\\\\.)|(?:[^"\\\\]))*?["]'
|
}, {
|
||||||
},
|
token : "string", // single line
|
||||||
{
|
regex : "['](?:(?:\\\\.)|(?:[^'\\\\]))*?[']"
|
||||||
token: "string", // multi line string start
|
}, {
|
||||||
regex: '["].*\\\\$',
|
token : "string", // multi line string start
|
||||||
next: "qqstring"
|
regex : "['].*\\\\$",
|
||||||
},
|
next : "qstring"
|
||||||
{
|
}, {
|
||||||
token: "string", // single line
|
token : "number", // hex
|
||||||
regex: "['](?:(?:\\\\.)|(?:[^'\\\\]))*?[']"
|
regex : "0[xX][0-9a-fA-F]+\\b"
|
||||||
},
|
}, {
|
||||||
{
|
token : "number", // float
|
||||||
token: "string", // multi line string start
|
regex : "[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b"
|
||||||
regex: "['].*\\\\$",
|
}, {
|
||||||
next: "qstring"
|
token : function(value) {
|
||||||
},
|
if (keywords[value]) {
|
||||||
{
|
return "keyword";
|
||||||
token: "number", // hex
|
}
|
||||||
regex: "0[xX][0-9a-fA-F]+\\b"
|
else {
|
||||||
},
|
return "identifier"
|
||||||
{
|
}
|
||||||
token: "number", // float
|
},
|
||||||
regex: "[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b"
|
regex : "[a-zA-Z_][a-zA-Z0-9_]*\\b"
|
||||||
},
|
}, {
|
||||||
{
|
token : function(value) {
|
||||||
token: function(value)
|
// return parens[value];
|
||||||
{
|
|
||||||
if (keywords[value]) {
|
|
||||||
return "keyword";
|
|
||||||
} else {
|
|
||||||
return "identifier"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
regex: "[a-zA-Z_][a-zA-Z0-9_]*\\b"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
token: function(value) {
|
|
||||||
//return parens[value];
|
|
||||||
return "text";
|
return "text";
|
||||||
},
|
|
||||||
regex: "[\\[\\]\\(\\)\\{\\}]"
|
|
||||||
},
|
},
|
||||||
{
|
regex : "[\\[\\]\\(\\)\\{\\}]"
|
||||||
token: "text",
|
}, {
|
||||||
regex: "\\s+"
|
token : "text",
|
||||||
}
|
regex : "\\s+"
|
||||||
],
|
} ],
|
||||||
"comment":
|
"comment" : [ {
|
||||||
[
|
token : "comment", // closing comment
|
||||||
{
|
regex : ".*?\\*\\/",
|
||||||
token: "comment", // closing comment
|
next : "start"
|
||||||
regex: ".*?\\*\\/",
|
}, {
|
||||||
next: "start"
|
token : "comment", // comment spanning whole line
|
||||||
},
|
regex : ".+"
|
||||||
{
|
} ],
|
||||||
token: "comment", // comment spanning whole line
|
"qqstring" : [ {
|
||||||
regex: ".+"
|
token : "string",
|
||||||
}
|
regex : '(?:(?:\\\\.)|(?:[^"\\\\]))*?"',
|
||||||
],
|
next : "start"
|
||||||
"qqstring":
|
}, {
|
||||||
[
|
token : "string",
|
||||||
{
|
regex : '.+'
|
||||||
token: "string",
|
} ],
|
||||||
regex: '(?:(?:\\\\.)|(?:[^"\\\\]))*?"',
|
"qstring" : [ {
|
||||||
next: "start"
|
token : "string",
|
||||||
},
|
regex : "(?:(?:\\\\.)|(?:[^'\\\\]))*?'",
|
||||||
{
|
next : "start"
|
||||||
token: "string",
|
}, {
|
||||||
regex: '.+'
|
token : "string",
|
||||||
}
|
regex : '.+'
|
||||||
],
|
} ]
|
||||||
"qstring":
|
|
||||||
[
|
|
||||||
{
|
|
||||||
token: "string",
|
|
||||||
regex: "(?:(?:\\\\.)|(?:[^'\\\\]))*?'",
|
|
||||||
next: "start"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
token: "string",
|
|
||||||
regex: '.+'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
};
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
@ -1,99 +1,107 @@
|
||||||
if (!window.ace) ace = {};
|
if (!window.ace)
|
||||||
|
ace = {};
|
||||||
|
|
||||||
ace.MarkerLayer = function(parentEl)
|
ace.MarkerLayer = 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);
|
|
||||||
|
|
||||||
this.markers = {};
|
this.markers = {};
|
||||||
this._markerId = 1;
|
this._markerId = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.MarkerLayer.prototype.addMarker = function(range, clazz)
|
ace.MarkerLayer.prototype.addMarker = function(range, clazz) {
|
||||||
{
|
var id = this._markerId++;
|
||||||
var id = this._markerId++;
|
this.markers[id] = {
|
||||||
this.markers[id] = {
|
range : range,
|
||||||
range: range,
|
type : "line",
|
||||||
type: "line",
|
clazz : clazz
|
||||||
clazz: clazz
|
};
|
||||||
};
|
|
||||||
|
|
||||||
this.update();
|
|
||||||
return id;
|
|
||||||
};
|
|
||||||
|
|
||||||
ace.MarkerLayer.prototype.removeMarker = function(markerId)
|
|
||||||
{
|
|
||||||
var marker = this.markers[markerId];
|
|
||||||
if (marker) {
|
|
||||||
delete(this.markers[markerId]);
|
|
||||||
this.update();
|
this.update();
|
||||||
}
|
return id;
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.MarkerLayer.prototype.update = function(config)
|
ace.MarkerLayer.prototype.removeMarker = function(markerId) {
|
||||||
{
|
var marker = this.markers[markerId];
|
||||||
var config = config || this.config;
|
if (marker) {
|
||||||
if (!config) return;
|
delete (this.markers[markerId]);
|
||||||
|
this.update();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
this.config = config;
|
ace.MarkerLayer.prototype.update = function(config) {
|
||||||
|
var config = config || this.config;
|
||||||
|
if (!config)
|
||||||
|
return;
|
||||||
|
|
||||||
var html = [];
|
this.config = config;
|
||||||
for (var key in this.markers)
|
|
||||||
{
|
|
||||||
var marker = this.markers[key];
|
|
||||||
var range = marker.range;
|
|
||||||
|
|
||||||
if (range.start.row !== range.end.row)
|
var html = [];
|
||||||
{
|
for ( var key in this.markers) {
|
||||||
if (range.start.row >= config.firstRow && range.start.row <= config.lastRow)
|
var marker = this.markers[key];
|
||||||
{
|
var range = marker.range;
|
||||||
html.push(
|
|
||||||
"<div class='", marker.clazz, "' style='",
|
|
||||||
"height:", config.lineHeight, "px;",
|
|
||||||
"width:", Math.round(config.width - (range.start.column * config.characterWidth)), "px;",
|
|
||||||
"top:", (range.start.row-config.firstRow) * config.lineHeight, "px;",
|
|
||||||
"left:", Math.round(range.start.column * config.characterWidth), "px;'></div>"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (range.end.row >= config.firstRow && range.end.row <= config.lastRow)
|
if (range.start.row !== range.end.row) {
|
||||||
{
|
if (range.start.row >= config.firstRow
|
||||||
html.push(
|
&& range.start.row <= config.lastRow) {
|
||||||
"<div class='", marker.clazz, "' style='",
|
html
|
||||||
"height:", config.lineHeight, "px;",
|
.push(
|
||||||
"top:", (range.end.row-config.firstRow) * config.lineHeight, "px;",
|
"<div class='",
|
||||||
"width:", Math.round(range.end.column * config.characterWidth), "px;'></div>"
|
marker.clazz,
|
||||||
);
|
"' style='",
|
||||||
};
|
"height:",
|
||||||
|
config.lineHeight,
|
||||||
|
"px;",
|
||||||
|
"width:",
|
||||||
|
Math
|
||||||
|
.round(config.width
|
||||||
|
- (range.start.column * config.characterWidth)),
|
||||||
|
"px;", "top:",
|
||||||
|
(range.start.row - config.firstRow)
|
||||||
|
* config.lineHeight, "px;", "left:", Math
|
||||||
|
.round(range.start.column
|
||||||
|
* config.characterWidth),
|
||||||
|
"px;'></div>");
|
||||||
|
}
|
||||||
|
|
||||||
for (var row=range.start.row+1; row < range.end.row; row++)
|
if (range.end.row >= config.firstRow
|
||||||
{
|
&& range.end.row <= config.lastRow) {
|
||||||
if (row >= config.firstRow && row <= config.lastRow)
|
html
|
||||||
{
|
.push("<div class='", marker.clazz, "' style='",
|
||||||
html.push(
|
"height:", config.lineHeight, "px;", "top:",
|
||||||
"<div class='", marker.clazz, "' style='",
|
(range.end.row - config.firstRow)
|
||||||
"height:", config.lineHeight, "px;",
|
* config.lineHeight, "px;", "width:",
|
||||||
"width:", config.width, "px;",
|
Math.round(range.end.column
|
||||||
"top:", (row-config.firstRow) * config.lineHeight, "px;'></div>"
|
* config.characterWidth), "px;'></div>");
|
||||||
);
|
}
|
||||||
|
;
|
||||||
|
|
||||||
|
for ( var row = range.start.row + 1; row < range.end.row; row++) {
|
||||||
|
if (row >= config.firstRow && row <= config.lastRow) {
|
||||||
|
html.push("<div class='", marker.clazz, "' style='",
|
||||||
|
"height:", config.lineHeight, "px;", "width:",
|
||||||
|
config.width, "px;", "top:",
|
||||||
|
(row - config.firstRow) * config.lineHeight,
|
||||||
|
"px;'></div>");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (range.start.row >= config.firstRow
|
||||||
|
&& range.start.row <= config.lastRow) {
|
||||||
|
html.push("<div class='", marker.clazz, "' style='", "height:",
|
||||||
|
config.lineHeight, "px;", "width:",
|
||||||
|
Math.round((range.end.column - range.start.column)
|
||||||
|
* config.characterWidth), "px;", "top:",
|
||||||
|
(range.start.row - config.firstRow)
|
||||||
|
* config.lineHeight, "px;", "left:", Math
|
||||||
|
.round(range.start.column
|
||||||
|
* config.characterWidth),
|
||||||
|
"px;'></div>");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
|
||||||
}
|
}
|
||||||
else
|
this.element.innerHTML = html.join("");
|
||||||
{
|
|
||||||
if (range.start.row >= config.firstRow && range.start.row <= config.lastRow)
|
|
||||||
{
|
|
||||||
html.push(
|
|
||||||
"<div class='", marker.clazz, "' style='",
|
|
||||||
"height:", config.lineHeight, "px;",
|
|
||||||
"width:", Math.round((range.end.column - range.start.column) * config.characterWidth), "px;",
|
|
||||||
"top:", (range.start.row-config.firstRow) * config.lineHeight, "px;",
|
|
||||||
"left:", Math.round(range.start.column * config.characterWidth), "px;'></div>"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.element.innerHTML = html.join("");
|
|
||||||
};
|
};
|
||||||
|
|
@ -1,221 +1,212 @@
|
||||||
if (!window.ace) ace = {};
|
if (!window.ace)
|
||||||
|
ace = {};
|
||||||
|
|
||||||
ace.TextDocument = function(text)
|
ace.TextDocument = function(text) {
|
||||||
{
|
this.lines = this._split(text);
|
||||||
this.lines = this._split(text);
|
this.modified = true;
|
||||||
this.modified = true;
|
|
||||||
|
|
||||||
this.listeners = [];
|
this.listeners = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.TextDocument.prototype._split = function(text) {
|
ace.TextDocument.prototype._split = function(text) {
|
||||||
return text.split(/[\n\r]/)
|
return text.split(/[\n\r]/)
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.TextDocument.prototype.addChangeListener = function(listener) {
|
ace.TextDocument.prototype.addChangeListener = function(listener) {
|
||||||
this.listeners.push(listener);
|
this.listeners.push(listener);
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.TextDocument.prototype.fireChangeEvent = function(firstRow, lastRow)
|
ace.TextDocument.prototype.fireChangeEvent = function(firstRow, lastRow) {
|
||||||
{
|
for ( var i = 0; i < this.listeners.length; i++) {
|
||||||
for (var i=0; i < this.listeners.length; i++) {
|
this.listeners[i](firstRow, lastRow);
|
||||||
this.listeners[i](firstRow, lastRow);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
ace.TextDocument.prototype.getWidth = function()
|
|
||||||
{
|
|
||||||
if (this.modified)
|
|
||||||
{
|
|
||||||
this.modified = false;
|
|
||||||
|
|
||||||
var lines = this.lines;
|
|
||||||
var longestLine = 0;
|
|
||||||
for (var i=0; i < lines.length; i++) {
|
|
||||||
longestLine = Math.max(longestLine, lines[i].length);
|
|
||||||
}
|
}
|
||||||
this.width = longestLine;
|
;
|
||||||
}
|
};
|
||||||
return this.width;
|
|
||||||
|
ace.TextDocument.prototype.getWidth = function() {
|
||||||
|
if (this.modified) {
|
||||||
|
this.modified = false;
|
||||||
|
|
||||||
|
var lines = this.lines;
|
||||||
|
var longestLine = 0;
|
||||||
|
for ( var i = 0; i < lines.length; i++) {
|
||||||
|
longestLine = Math.max(longestLine, lines[i].length);
|
||||||
|
}
|
||||||
|
this.width = longestLine;
|
||||||
|
}
|
||||||
|
return this.width;
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.TextDocument.prototype.getLine = function(row) {
|
ace.TextDocument.prototype.getLine = function(row) {
|
||||||
return this.lines[row] || "";
|
return this.lines[row] || "";
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.TextDocument.prototype.keywords = {
|
ace.TextDocument.prototype.keywords = {
|
||||||
"break" : 1,
|
"break" : 1,
|
||||||
"case" : 1,
|
"case" : 1,
|
||||||
"catch" : 1,
|
"catch" : 1,
|
||||||
"continue" : 1,
|
"continue" : 1,
|
||||||
"default" : 1,
|
"default" : 1,
|
||||||
"delete" : 1,
|
"delete" : 1,
|
||||||
"do" : 1,
|
"do" : 1,
|
||||||
"else" : 1,
|
"else" : 1,
|
||||||
"finally" : 1,
|
"finally" : 1,
|
||||||
"for" : 1,
|
"for" : 1,
|
||||||
"function" : 1,
|
"function" : 1,
|
||||||
"if" : 1,
|
"if" : 1,
|
||||||
"in" : 1,
|
"in" : 1,
|
||||||
"instanceof" : 1,
|
"instanceof" : 1,
|
||||||
"new" : 1,
|
"new" : 1,
|
||||||
"return" : 1,
|
"return" : 1,
|
||||||
"switch" : 1,
|
"switch" : 1,
|
||||||
"throw" : 1,
|
"throw" : 1,
|
||||||
"try" : 1,
|
"try" : 1,
|
||||||
"typeof" : 1,
|
"typeof" : 1,
|
||||||
"var" : 1,
|
"var" : 1,
|
||||||
"while" : 1,
|
"while" : 1,
|
||||||
"with" : 1
|
"with" : 1
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.TextDocument.prototype.getLineTokens = function(row)
|
ace.TextDocument.prototype.getLineTokens = function(row) {
|
||||||
{
|
var tokens = [];
|
||||||
var tokens = [];
|
|
||||||
|
|
||||||
var re = /(?:(\s+)|("[^"]*")|('[^']*')|([\[\]\(\)\{\}])|([a-zA-Z_][a-zA-Z0-9_]*)|(\/\/.*)|(.))/g
|
var re = /(?:(\s+)|("[^"]*")|('[^']*')|([\[\]\(\)\{\}])|([a-zA-Z_][a-zA-Z0-9_]*)|(\/\/.*)|(.))/g
|
||||||
re.lastIndex = 0;
|
re.lastIndex = 0;
|
||||||
|
|
||||||
var match;
|
var match;
|
||||||
var line = this.getLine(row);
|
var line = this.getLine(row);
|
||||||
while (match = re.exec(line))
|
while (match = re.exec(line)) {
|
||||||
{
|
var token = {
|
||||||
var token = {
|
type : "text",
|
||||||
type: "text",
|
value : match[0]
|
||||||
value: match[0]
|
}
|
||||||
|
|
||||||
|
if (match[2] || match[3]) {
|
||||||
|
token.type = "string";
|
||||||
|
}
|
||||||
|
else if (match[5] && this.keywords[match[5]]) {
|
||||||
|
token.type = "keyword";
|
||||||
|
}
|
||||||
|
else if (match[6]) {
|
||||||
|
token.type = "comment";
|
||||||
|
}
|
||||||
|
|
||||||
|
tokens.push(token);
|
||||||
}
|
}
|
||||||
|
;
|
||||||
|
|
||||||
if (match[2] || match[3]) {
|
return tokens;
|
||||||
token.type = "string";
|
|
||||||
} else if (match[5] && this.keywords[match[5]]) {
|
|
||||||
token.type = "keyword";
|
|
||||||
} else if (match[6]) {
|
|
||||||
token.type = "comment";
|
|
||||||
}
|
|
||||||
|
|
||||||
tokens.push(token);
|
|
||||||
};
|
|
||||||
|
|
||||||
return tokens;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.TextDocument.prototype.getLength = function() {
|
ace.TextDocument.prototype.getLength = function() {
|
||||||
return this.lines.length;
|
return this.lines.length;
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.TextDocument.prototype.getTextRange = function(range)
|
ace.TextDocument.prototype.getTextRange = function(range) {
|
||||||
{
|
if (range.start.row == range.end.row) {
|
||||||
if (range.start.row == range.end.row) {
|
return this.lines[range.start.row].substring(range.start.column,
|
||||||
return this.lines[range.start.row].substring(range.start.column, range.end.column);
|
range.end.column);
|
||||||
} else {
|
|
||||||
var lines = [];
|
|
||||||
lines.push(this.lines[range.start.row].substring(range.start.column));
|
|
||||||
lines.push.apply(lines, this.lines.slice(range.start.row+1, range.end.row));
|
|
||||||
lines.push(this.lines[range.end.row].substring(0, range.end.column));
|
|
||||||
|
|
||||||
return lines.join("\n");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
ace.TextDocument.prototype.insert = function(position, text)
|
|
||||||
{
|
|
||||||
var end = this._insert(position, text);
|
|
||||||
this.fireChangeEvent(
|
|
||||||
position.row,
|
|
||||||
position.row == end.row ? position.row : undefined
|
|
||||||
);
|
|
||||||
return end;
|
|
||||||
};
|
|
||||||
|
|
||||||
ace.TextDocument.prototype._insert = function(position, text)
|
|
||||||
{
|
|
||||||
this.modified = true;
|
|
||||||
|
|
||||||
var newLines = this._split(text);
|
|
||||||
|
|
||||||
if (text == "\n")
|
|
||||||
{
|
|
||||||
var line = this.lines[position.row] || "";
|
|
||||||
this.lines[position.row] = line.substring(0, position.column);
|
|
||||||
this.lines.splice(position.row+1, 0, line.substring(position.column));
|
|
||||||
|
|
||||||
return {
|
|
||||||
row: position.row + 1,
|
|
||||||
column: 0
|
|
||||||
};
|
|
||||||
}
|
|
||||||
else if (newLines.length == 1)
|
|
||||||
{
|
|
||||||
var line = this.lines[position.row] || "";
|
|
||||||
this.lines[position.row] = line.substring(0, position.column) + text + line.substring(position.column);
|
|
||||||
|
|
||||||
return {
|
|
||||||
row: position.row,
|
|
||||||
column: position.column+text.length
|
|
||||||
}
|
}
|
||||||
}
|
else {
|
||||||
else
|
var lines = [];
|
||||||
{
|
lines.push(this.lines[range.start.row].substring(range.start.column));
|
||||||
var line = this.lines[position.row] || "";
|
lines.push.apply(lines, this.lines.slice(range.start.row + 1,
|
||||||
|
range.end.row));
|
||||||
|
lines.push(this.lines[range.end.row].substring(0, range.end.column));
|
||||||
|
|
||||||
this.lines[position.row] = line.substring(0, position.column) + newLines[0];
|
return lines.join("\n");
|
||||||
this.lines[position.row+1] = newLines[newLines.length-1] + line.substring(position.column);
|
}
|
||||||
|
};
|
||||||
|
|
||||||
if (newLines.length > 2)
|
ace.TextDocument.prototype.insert = function(position, text) {
|
||||||
{
|
var end = this._insert(position, text);
|
||||||
var args = [position.row + 1, 0]
|
this.fireChangeEvent(position.row, position.row == end.row ? position.row
|
||||||
args.push.apply(args, newLines.slice(1, -1));
|
: undefined);
|
||||||
this.lines.splice.apply(this.lines, args);
|
return end;
|
||||||
|
};
|
||||||
|
|
||||||
|
ace.TextDocument.prototype._insert = function(position, text) {
|
||||||
|
this.modified = true;
|
||||||
|
|
||||||
|
var newLines = this._split(text);
|
||||||
|
|
||||||
|
if (text == "\n") {
|
||||||
|
var line = this.lines[position.row] || "";
|
||||||
|
this.lines[position.row] = line.substring(0, position.column);
|
||||||
|
this.lines.splice(position.row + 1, 0, line.substring(position.column));
|
||||||
|
|
||||||
|
return {
|
||||||
|
row : position.row + 1,
|
||||||
|
column : 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else if (newLines.length == 1) {
|
||||||
|
var line = this.lines[position.row] || "";
|
||||||
|
this.lines[position.row] = line.substring(0, position.column) + text
|
||||||
|
+ line.substring(position.column);
|
||||||
|
|
||||||
|
return {
|
||||||
|
row : position.row,
|
||||||
|
column : position.column + text.length
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var line = this.lines[position.row] || "";
|
||||||
|
|
||||||
|
this.lines[position.row] = line.substring(0, position.column)
|
||||||
|
+ newLines[0];
|
||||||
|
this.lines[position.row + 1] = newLines[newLines.length - 1]
|
||||||
|
+ line.substring(position.column);
|
||||||
|
|
||||||
|
if (newLines.length > 2) {
|
||||||
|
var args = [ position.row + 1, 0 ]
|
||||||
|
args.push.apply(args, newLines.slice(1, -1));
|
||||||
|
this.lines.splice.apply(this.lines, args);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
row : position.row + newLines.length - 1,
|
||||||
|
column : newLines[newLines.length - 1].length
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ace.TextDocument.prototype.remove = function(range) {
|
||||||
|
var end = this._remove(range);
|
||||||
|
|
||||||
|
this.fireChangeEvent(range.start.row,
|
||||||
|
range.end.row == range.start.row ? range.start.row
|
||||||
|
: undefined);
|
||||||
|
return end;
|
||||||
|
};
|
||||||
|
|
||||||
|
ace.TextDocument.prototype._remove = function(range) {
|
||||||
|
this.modified = true;
|
||||||
|
|
||||||
|
var firstRow = range.start.row;
|
||||||
|
var lastRow = range.end.row;
|
||||||
|
|
||||||
|
var row = this.lines[firstRow].substring(0, range.start.column)
|
||||||
|
+ this.lines[lastRow].substring(range.end.column);
|
||||||
|
|
||||||
|
this.lines.splice(firstRow, lastRow - firstRow + 1, row);
|
||||||
|
|
||||||
|
return range.start;
|
||||||
|
};
|
||||||
|
|
||||||
|
ace.TextDocument.prototype.replace = function(range, text) {
|
||||||
|
this._remove(range);
|
||||||
|
if (text) {
|
||||||
|
var end = this._insert(range.start, text);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
end = range.start;
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
var lastRemoved = range.end.column == 0 ? range.end.column - 1
|
||||||
row: position.row + newLines.length - 1,
|
: range.end.column;
|
||||||
column: newLines[newLines.length-1].length
|
this.fireChangeEvent(range.start.row, lastRemoved == end.row ? lastRemoved
|
||||||
};
|
: undefined);
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
ace.TextDocument.prototype.remove = function(range)
|
return end;
|
||||||
{
|
|
||||||
var end = this._remove(range);
|
|
||||||
|
|
||||||
this.fireChangeEvent(
|
|
||||||
range.start.row,
|
|
||||||
range.end.row == range.start.row ? range.start.row : undefined
|
|
||||||
);
|
|
||||||
return end;
|
|
||||||
};
|
|
||||||
|
|
||||||
ace.TextDocument.prototype._remove = function(range)
|
|
||||||
{
|
|
||||||
this.modified = true;
|
|
||||||
|
|
||||||
var firstRow = range.start.row;
|
|
||||||
var lastRow = range.end.row;
|
|
||||||
|
|
||||||
var row =
|
|
||||||
this.lines[firstRow].substring(0, range.start.column) +
|
|
||||||
this.lines[lastRow].substring(range.end.column);
|
|
||||||
|
|
||||||
this.lines.splice(firstRow, lastRow-firstRow+1, row);
|
|
||||||
|
|
||||||
return range.start;
|
|
||||||
};
|
|
||||||
|
|
||||||
ace.TextDocument.prototype.replace = function(range, text)
|
|
||||||
{
|
|
||||||
this._remove(range);
|
|
||||||
if (text) {
|
|
||||||
var end = this._insert(range.start, text);
|
|
||||||
} else {
|
|
||||||
end = range.start;
|
|
||||||
}
|
|
||||||
|
|
||||||
var lastRemoved = range.end.column == 0 ? range.end.column-1 : range.end.column;
|
|
||||||
this.fireChangeEvent(
|
|
||||||
range.start.row,
|
|
||||||
lastRemoved == end.row ? lastRemoved : undefined
|
|
||||||
);
|
|
||||||
|
|
||||||
return end;
|
|
||||||
}
|
}
|
||||||
129
src/TextInput.js
129
src/TextInput.js
|
|
@ -1,84 +1,85 @@
|
||||||
if (!window.ace) ace = {};
|
if (!window.ace)
|
||||||
|
ace = {};
|
||||||
|
|
||||||
ace.TextInput = function(parentNode, host) {
|
ace.TextInput = function(parentNode, host) {
|
||||||
|
|
||||||
var text = document.createElement("textarea");
|
var text = document.createElement("textarea");
|
||||||
var style = text.style;
|
var style = text.style;
|
||||||
style.position = "absolute";
|
style.position = "absolute";
|
||||||
style.left = "-10000px";
|
style.left = "-10000px";
|
||||||
style.top = "-10000px";
|
style.top = "-10000px";
|
||||||
parentNode.appendChild(text);
|
parentNode.appendChild(text);
|
||||||
|
|
||||||
var inCompostion = false;
|
var inCompostion = false;
|
||||||
|
|
||||||
var onTextInput = function(e) {
|
var onTextInput = function(e) {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
if (!inCompostion) {
|
if (!inCompostion) {
|
||||||
if (text.value) host.onTextInput(text.value);
|
if (text.value)
|
||||||
|
host.onTextInput(text.value);
|
||||||
|
text.value = "";
|
||||||
|
}
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
var onCompositionStart = function(e) {
|
||||||
|
inCompostion = true;
|
||||||
|
|
||||||
|
if (text.value)
|
||||||
|
host.onTextInput(text.value);
|
||||||
text.value = "";
|
text.value = "";
|
||||||
}
|
|
||||||
}, 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
var onCompositionStart = function(e)
|
host.onCompositionStart();
|
||||||
{
|
setTimeout(onCompositionUpdate, 0);
|
||||||
inCompostion = true;
|
}
|
||||||
|
|
||||||
if (text.value) host.onTextInput(text.value);
|
var onCompositionUpdate = function() {
|
||||||
text.value = "";
|
host.onCompositionUpdate(text.value);
|
||||||
|
}
|
||||||
|
|
||||||
host.onCompositionStart();
|
var onCompositionEnd = function() {
|
||||||
setTimeout(onCompositionUpdate, 0);
|
inCompostion = false;
|
||||||
}
|
host.onCompositionEnd();
|
||||||
|
onTextInput();
|
||||||
|
}
|
||||||
|
|
||||||
var onCompositionUpdate = function() {
|
var onCopy = function() {
|
||||||
host.onCompositionUpdate(text.value);
|
text.value = host.getCopyText();
|
||||||
}
|
text.select();
|
||||||
|
}
|
||||||
|
|
||||||
var onCompositionEnd = function()
|
var onCut = function() {
|
||||||
{
|
text.value = host.getCopyText();
|
||||||
inCompostion = false;
|
host.onCut();
|
||||||
host.onCompositionEnd();
|
text.select();
|
||||||
onTextInput();
|
}
|
||||||
}
|
|
||||||
|
|
||||||
var onCopy = function() {
|
ace.addListener(text, "keypress", onTextInput, false);
|
||||||
text.value = host.getCopyText();
|
ace.addListener(text, "textInput", onTextInput, false);
|
||||||
text.select();
|
ace.addListener(text, "paste", onTextInput, false);
|
||||||
}
|
ace.addListener(text, "propertychange", onTextInput, false);
|
||||||
|
|
||||||
var onCut = function() {
|
ace.addListener(text, "copy", onCopy, false);
|
||||||
text.value = host.getCopyText();
|
ace.addListener(text, "cut", onCut, false);
|
||||||
host.onCut();
|
|
||||||
text.select();
|
|
||||||
}
|
|
||||||
|
|
||||||
ace.addListener(text, "keypress", onTextInput, false);
|
ace.addListener(text, "compositionstart", onCompositionStart, false);
|
||||||
ace.addListener(text, "textInput", onTextInput, false);
|
ace.addListener(text, "compositionupdate", onCompositionUpdate, false);
|
||||||
ace.addListener(text, "paste", onTextInput, false);
|
ace.addListener(text, "compositionend", onCompositionEnd, false);
|
||||||
ace.addListener(text, "propertychange", onTextInput, false);
|
|
||||||
|
|
||||||
ace.addListener(text, "copy", onCopy, false);
|
ace.addListener(text, "blur", function() {
|
||||||
ace.addListener(text, "cut", onCut, false);
|
host.onBlur();
|
||||||
|
}, false);
|
||||||
|
|
||||||
ace.addListener(text, "compositionstart", onCompositionStart, false);
|
ace.addListener(text, "focus", function() {
|
||||||
ace.addListener(text, "compositionupdate", onCompositionUpdate, false);
|
host.onFocus();
|
||||||
ace.addListener(text, "compositionend", onCompositionEnd, false);
|
}, false);
|
||||||
|
|
||||||
ace.addListener(text, "blur", function() {
|
|
||||||
host.onBlur();
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
ace.addListener(text, "focus", function() {
|
|
||||||
host.onFocus();
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
|
|
||||||
this.focus = function() {
|
this.focus = function() {
|
||||||
text.focus();
|
text.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.blur = function() {
|
this.blur = function() {
|
||||||
this.blur();
|
this.blur();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
143
src/TextLayer.js
143
src/TextLayer.js
|
|
@ -1,99 +1,90 @@
|
||||||
if (!window.ace) ace = {};
|
if (!window.ace)
|
||||||
|
ace = {};
|
||||||
|
|
||||||
ace.TextLayer = function(parentEl)
|
ace.TextLayer = 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);
|
|
||||||
|
|
||||||
this._measureSizes();
|
this._measureSizes();
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.TextLayer.prototype.setTokenizer = function(tokenizer) {
|
ace.TextLayer.prototype.setTokenizer = function(tokenizer) {
|
||||||
this.tokenizer = tokenizer;
|
this.tokenizer = tokenizer;
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.TextLayer.prototype.getLineHeight = function() {
|
ace.TextLayer.prototype.getLineHeight = function() {
|
||||||
return this.lineHeight;
|
return this.lineHeight;
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.TextLayer.prototype.getCharacterWidth = function() {
|
ace.TextLayer.prototype.getCharacterWidth = function() {
|
||||||
return this.characterWidth;
|
return this.characterWidth;
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.TextLayer.prototype._measureSizes = function()
|
ace.TextLayer.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";
|
style.left = style.top = "-1000px";
|
||||||
style.left = style.top = "-1000px";
|
style.visibility = "hidden";
|
||||||
style.visibility = "hidden";
|
style.position = "absolute";
|
||||||
style.position = "absolute";
|
style.overflow = "visible";
|
||||||
style.overflow = "visible";
|
|
||||||
|
|
||||||
measureNode.innerHTML = new Array(1000).join("Xy");
|
measureNode.innerHTML = new Array(1000).join("Xy");
|
||||||
this.element.appendChild(measureNode);
|
this.element.appendChild(measureNode);
|
||||||
|
|
||||||
// in FF 3.6 monospace fonts can have a fixed sub pixel width.
|
// in FF 3.6 monospace fonts can have a fixed sub pixel width.
|
||||||
// that's why we have to measure many characters
|
// that's why we have to measure many characters
|
||||||
// Note: characterWidth can be a float!
|
// Note: characterWidth can be a float!
|
||||||
this.lineHeight = measureNode.offsetHeight;
|
this.lineHeight = measureNode.offsetHeight;
|
||||||
this.characterWidth = measureNode.offsetWidth / 2000;
|
this.characterWidth = measureNode.offsetWidth / 2000;
|
||||||
|
|
||||||
this.element.removeChild(measureNode);
|
this.element.removeChild(measureNode);
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.TextLayer.prototype.updateLines = function(layerConfig, firstRow, lastRow)
|
ace.TextLayer.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);
|
|
||||||
|
|
||||||
var lineElements = this.element.childNodes;
|
var lineElements = this.element.childNodes;
|
||||||
|
|
||||||
for (var i=first; i <= last; i++)
|
for ( var i = first; i <= last; i++) {
|
||||||
{
|
var html = [];
|
||||||
var html = [];
|
this.renderLine(html, i);
|
||||||
this.renderLine(html, i);
|
|
||||||
|
|
||||||
var lineElement = lineElements[i-layerConfig.firstRow];
|
var lineElement = lineElements[i - layerConfig.firstRow];
|
||||||
lineElement.innerHTML = html.join("");
|
lineElement.innerHTML = html.join("");
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
ace.TextLayer.prototype.update = function(config)
|
|
||||||
{
|
|
||||||
var html = [];
|
|
||||||
for (var i=config.firstRow; i<=config.lastRow; i++)
|
|
||||||
{
|
|
||||||
html.push(
|
|
||||||
"<div class='line ",
|
|
||||||
i % 2 == 0 ? "even" : "odd",
|
|
||||||
"' style='height:" + this.lineHeight + "px;",
|
|
||||||
"width:", config.width, "px'>"
|
|
||||||
);
|
|
||||||
this.renderLine(html, i),
|
|
||||||
html.push("</div>");
|
|
||||||
}
|
|
||||||
|
|
||||||
this.element.innerHTML = html.join("");
|
|
||||||
};
|
|
||||||
|
|
||||||
ace.TextLayer.prototype.renderLine = function(stringBuilder, row)
|
|
||||||
{
|
|
||||||
var tokens = this.tokenizer.getTokens(row);
|
|
||||||
for (var i=0; i < tokens.length; i++)
|
|
||||||
{
|
|
||||||
var token = tokens[i];
|
|
||||||
|
|
||||||
var output = token.value.
|
|
||||||
replace(/&/g, "&").
|
|
||||||
replace(/</g, "<").
|
|
||||||
replace(/\s/g, " ");
|
|
||||||
|
|
||||||
if (token.type !== "text") {
|
|
||||||
stringBuilder.push("<span class='", token.type, "'>", output, "</span>");
|
|
||||||
} else {
|
|
||||||
stringBuilder.push(output);
|
|
||||||
}
|
}
|
||||||
};
|
;
|
||||||
|
};
|
||||||
|
|
||||||
|
ace.TextLayer.prototype.update = function(config) {
|
||||||
|
var html = [];
|
||||||
|
for ( var i = config.firstRow; i <= config.lastRow; i++) {
|
||||||
|
html.push("<div class='line ", i % 2 == 0 ? "even" : "odd",
|
||||||
|
"' style='height:" + this.lineHeight + "px;", "width:",
|
||||||
|
config.width, "px'>");
|
||||||
|
this.renderLine(html, i), html.push("</div>");
|
||||||
|
}
|
||||||
|
|
||||||
|
this.element.innerHTML = html.join("");
|
||||||
|
};
|
||||||
|
|
||||||
|
ace.TextLayer.prototype.renderLine = function(stringBuilder, row) {
|
||||||
|
var tokens = this.tokenizer.getTokens(row);
|
||||||
|
for ( var i = 0; i < tokens.length; i++) {
|
||||||
|
var token = tokens[i];
|
||||||
|
|
||||||
|
var output = token.value.replace(/&/g, "&").replace(/</g, "<")
|
||||||
|
.replace(/\s/g, " ");
|
||||||
|
|
||||||
|
if (token.type !== "text") {
|
||||||
|
stringBuilder.push("<span class='", token.type, "'>", output,
|
||||||
|
"</span>");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
stringBuilder.push(output);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
;
|
||||||
};
|
};
|
||||||
119
src/Tokenizer.js
119
src/Tokenizer.js
|
|
@ -1,78 +1,75 @@
|
||||||
if (!window.ace) ace = {};
|
if (!window.ace)
|
||||||
|
ace = {};
|
||||||
|
|
||||||
ace.Tokenizer = function(rules)
|
ace.Tokenizer = function(rules) {
|
||||||
{
|
this.rules = rules;
|
||||||
this.rules = rules;
|
|
||||||
|
|
||||||
this.regExps = {};
|
this.regExps = {};
|
||||||
for (var key in this.rules)
|
for ( var key in this.rules) {
|
||||||
{
|
var state = this.rules[key];
|
||||||
var state = this.rules[key];
|
var ruleRegExps = [];
|
||||||
var ruleRegExps = [];
|
|
||||||
|
|
||||||
for (var i=0; i < state.length; i++) {
|
for ( var i = 0; i < state.length; i++) {
|
||||||
ruleRegExps.push(state[i].regex);
|
ruleRegExps.push(state[i].regex);
|
||||||
};
|
}
|
||||||
|
;
|
||||||
|
|
||||||
this.regExps[key] = new RegExp("(?:(" + ruleRegExps.join(")|(") + ")|(.))", "g");
|
this.regExps[key] = new RegExp("(?:(" + ruleRegExps.join(")|(")
|
||||||
}
|
+ ")|(.))", "g");
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.Tokenizer.prototype.getLineTokens = function(line, startState)
|
ace.Tokenizer.prototype.getLineTokens = function(line, startState) {
|
||||||
{
|
var currentState = startState;
|
||||||
var currentState = startState;
|
var state = this.rules[currentState];
|
||||||
var state = this.rules[currentState];
|
var re = this.regExps[currentState];
|
||||||
var re = this.regExps[currentState];
|
re.lastIndex = 0;
|
||||||
re.lastIndex = 0;
|
|
||||||
|
|
||||||
var match, tokens = [];
|
var match, tokens = [];
|
||||||
|
|
||||||
var lastIndex = 0;
|
var lastIndex = 0;
|
||||||
|
|
||||||
while (match = re.exec(line))
|
while (match = re.exec(line)) {
|
||||||
{
|
var token = {
|
||||||
var token = {
|
type : "text",
|
||||||
type: "text",
|
value : match[0]
|
||||||
value: match[0]
|
|
||||||
}
|
|
||||||
|
|
||||||
if (re.lastIndex == lastIndex) {
|
|
||||||
throw new Error("tokenizer error")
|
|
||||||
}
|
|
||||||
lastIndex = re.lastIndex;
|
|
||||||
|
|
||||||
//console.log(match);
|
|
||||||
|
|
||||||
for (var i=0; i < state.length; i++)
|
|
||||||
{
|
|
||||||
if (match[i+1])
|
|
||||||
{
|
|
||||||
if (typeof state[i].token == "function") {
|
|
||||||
token.type = state[i].token(match[0]);
|
|
||||||
} else {
|
|
||||||
token.type = state[i].token;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (state[i].next && state[i].next !== currentState)
|
if (re.lastIndex == lastIndex) { throw new Error("tokenizer error") }
|
||||||
{
|
lastIndex = re.lastIndex;
|
||||||
currentState = state[i].next;
|
|
||||||
var state = this.rules[currentState];
|
|
||||||
var lastIndex = re.lastIndex;
|
|
||||||
|
|
||||||
var re = this.regExps[currentState];
|
// console.log(match);
|
||||||
re.lastIndex = lastIndex;
|
|
||||||
|
for ( var i = 0; i < state.length; i++) {
|
||||||
|
if (match[i + 1]) {
|
||||||
|
if (typeof state[i].token == "function") {
|
||||||
|
token.type = state[i].token(match[0]);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
token.type = state[i].token;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state[i].next && state[i].next !== currentState) {
|
||||||
|
currentState = state[i].next;
|
||||||
|
var state = this.rules[currentState];
|
||||||
|
var lastIndex = re.lastIndex;
|
||||||
|
|
||||||
|
var re = this.regExps[currentState];
|
||||||
|
re.lastIndex = lastIndex;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
break;
|
;
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
tokens.push(token);
|
tokens.push(token);
|
||||||
};
|
}
|
||||||
|
;
|
||||||
|
|
||||||
//console.log(tokens, currentState)
|
// console.log(tokens, currentState)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
tokens: tokens,
|
tokens : tokens,
|
||||||
state: currentState
|
state : currentState
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -1,206 +1,201 @@
|
||||||
if (!window.ace) ace = {};
|
if (!window.ace)
|
||||||
|
ace = {};
|
||||||
|
|
||||||
ace.VirtualRenderer = function(container)
|
ace.VirtualRenderer = function(container) {
|
||||||
{
|
this.container = container;
|
||||||
this.container = container;
|
this.container.className += "editor";
|
||||||
this.container.className += "editor";
|
|
||||||
|
|
||||||
this.scroller = document.createElement("div");
|
this.scroller = document.createElement("div");
|
||||||
this.scroller.className = "scroller";
|
this.scroller.className = "scroller";
|
||||||
this.container.appendChild(this.scroller);
|
this.container.appendChild(this.scroller);
|
||||||
|
|
||||||
this.gutter = document.createElement("div");
|
this.gutter = document.createElement("div");
|
||||||
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.GutterLayer(this.gutter);
|
||||||
this.markerLayer = new ace.MarkerLayer(this.scroller);
|
this.markerLayer = new ace.MarkerLayer(this.scroller);
|
||||||
|
|
||||||
var textLayer = this.textLayer = new ace.TextLayer(this.scroller);
|
var textLayer = this.textLayer = new ace.TextLayer(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.CursorLayer(this.scroller);
|
||||||
|
|
||||||
this.layers = [this.markerLayer, textLayer, this.cursorLayer];
|
this.layers = [ this.markerLayer, textLayer, this.cursorLayer ];
|
||||||
|
|
||||||
this.scrollTop = 0;
|
this.scrollTop = 0;
|
||||||
|
|
||||||
this.cursorPos = {
|
this.cursorPos = {
|
||||||
row: 0,
|
row : 0,
|
||||||
column: 0
|
column : 0
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.setDocument = function(doc)
|
ace.VirtualRenderer.prototype.setDocument = function(doc) {
|
||||||
{
|
this.lines = doc.lines;
|
||||||
this.lines = doc.lines;
|
this.doc = doc;
|
||||||
this.doc = doc;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.setTokenizer = function(tokenizer) {
|
ace.VirtualRenderer.prototype.setTokenizer = function(tokenizer) {
|
||||||
this.textLayer.setTokenizer(tokenizer);
|
this.textLayer.setTokenizer(tokenizer);
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.getContainerElement = function() {
|
ace.VirtualRenderer.prototype.getContainerElement = function() {
|
||||||
return this.container;
|
return this.container;
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.getFirstVisibleRow = function() {
|
ace.VirtualRenderer.prototype.getFirstVisibleRow = function() {
|
||||||
return this.layerConfig.firstRow || 0;
|
return this.layerConfig.firstRow || 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.getLastVisibleRow = function() {
|
ace.VirtualRenderer.prototype.getLastVisibleRow = function() {
|
||||||
return this.layerConfig.lastRow || 0;
|
return this.layerConfig.lastRow || 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.updateLines = function(firstRow, lastRow)
|
ace.VirtualRenderer.prototype.updateLines = function(firstRow, lastRow) {
|
||||||
{
|
var layerConfig = this.layerConfig;
|
||||||
var layerConfig = this.layerConfig;
|
|
||||||
|
|
||||||
// if the first row is below the viewport -> ignore it
|
// if the first row is below the viewport -> ignore it
|
||||||
if (firstRow > layerConfig.lastRow+1) {
|
if (firstRow > layerConfig.lastRow + 1) { return; }
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// if the last row is unknow -> redraw everything
|
// if the last row is unknow -> redraw everything
|
||||||
if (lastRow === undefined)
|
if (lastRow === undefined) {
|
||||||
{
|
this.draw()
|
||||||
this.draw()
|
return;
|
||||||
return;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// else update only the changed rows
|
// else update only the changed rows
|
||||||
this.textLayer.updateLines(layerConfig, firstRow, lastRow);
|
this.textLayer.updateLines(layerConfig, firstRow, lastRow);
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.draw = function()
|
ace.VirtualRenderer.prototype.draw = function() {
|
||||||
{
|
var lines = this.lines;
|
||||||
var lines = this.lines;
|
|
||||||
|
|
||||||
var offset = this.scrollTop % this.lineHeight;
|
var offset = this.scrollTop % this.lineHeight;
|
||||||
var minHeight = this.scroller.clientHeight + offset;
|
var minHeight = this.scroller.clientHeight + offset;
|
||||||
|
|
||||||
var longestLine = Math.max(
|
var longestLine = Math.max(this.scroller.clientWidth, Math.round(this.doc
|
||||||
this.scroller.clientWidth,
|
.getWidth()
|
||||||
Math.round(this.doc.getWidth() * this.characterWidth)
|
* this.characterWidth));
|
||||||
);
|
|
||||||
|
|
||||||
var lineCount = Math.ceil(minHeight / this.lineHeight);
|
var lineCount = Math.ceil(minHeight / this.lineHeight);
|
||||||
var firstRow = Math.round((this.scrollTop - offset) / this.lineHeight);
|
var firstRow = Math.round((this.scrollTop - offset) / this.lineHeight);
|
||||||
var lastRow = Math.min(lines.length, firstRow+lineCount)-1;
|
var lastRow = Math.min(lines.length, firstRow + lineCount) - 1;
|
||||||
|
|
||||||
var layerConfig = this.layerConfig = {
|
var layerConfig = this.layerConfig = {
|
||||||
width: longestLine,
|
width : longestLine,
|
||||||
firstRow: firstRow,
|
firstRow : firstRow,
|
||||||
lastRow: lastRow,
|
lastRow : lastRow,
|
||||||
lineHeight: this.lineHeight,
|
lineHeight : this.lineHeight,
|
||||||
characterWidth: this.characterWidth
|
characterWidth : this.characterWidth
|
||||||
};
|
};
|
||||||
|
|
||||||
for (var i=0; i < this.layers.length; i++)
|
for ( var i = 0; i < this.layers.length; i++) {
|
||||||
{
|
var layer = this.layers[i];
|
||||||
var layer = this.layers[i];
|
|
||||||
|
|
||||||
var style = layer.element.style;
|
var style = layer.element.style;
|
||||||
style.marginTop = (-offset) + "px";
|
style.marginTop = (-offset) + "px";
|
||||||
style.height = minHeight + "px";
|
style.height = minHeight + "px";
|
||||||
style.width = longestLine + "px";
|
style.width = longestLine + "px";
|
||||||
|
|
||||||
layer.update(layerConfig);
|
layer.update(layerConfig);
|
||||||
};
|
}
|
||||||
|
;
|
||||||
|
|
||||||
this.gutterLayer.element.style.marginTop = (-offset) + "px";
|
this.gutterLayer.element.style.marginTop = (-offset) + "px";
|
||||||
this.gutterLayer.element.style.height = minHeight + "px";
|
this.gutterLayer.element.style.height = minHeight + "px";
|
||||||
this.gutterLayer.update(layerConfig);
|
this.gutterLayer.update(layerConfig);
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.addMarker = function(range, clazz) {
|
ace.VirtualRenderer.prototype.addMarker = function(range, clazz) {
|
||||||
return this.markerLayer.addMarker(range, clazz);
|
return this.markerLayer.addMarker(range, clazz);
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.removeMarker = function(markerId) {
|
ace.VirtualRenderer.prototype.removeMarker = function(markerId) {
|
||||||
this.markerLayer.removeMarker(markerId);
|
this.markerLayer.removeMarker(markerId);
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.updateCursor = function(position)
|
ace.VirtualRenderer.prototype.updateCursor = function(position) {
|
||||||
{
|
this.cursorLayer.setCursor(position);
|
||||||
this.cursorLayer.setCursor(position);
|
this.cursorLayer.update(this.layerConfig);
|
||||||
this.cursorLayer.update(this.layerConfig);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.hideCursor = function() {
|
ace.VirtualRenderer.prototype.hideCursor = function() {
|
||||||
this.cursorLayer.hideCursor();
|
this.cursorLayer.hideCursor();
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.showCursor = function() {
|
ace.VirtualRenderer.prototype.showCursor = function() {
|
||||||
this.cursorLayer.showCursor();
|
this.cursorLayer.showCursor();
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.scrollCursorIntoView = function()
|
ace.VirtualRenderer.prototype.scrollCursorIntoView = function() {
|
||||||
{
|
var pos = this.cursorLayer.getPixelPosition();
|
||||||
var pos = this.cursorLayer.getPixelPosition();
|
|
||||||
|
|
||||||
var left = pos.left
|
var left = pos.left
|
||||||
var top = pos.top;
|
var top = pos.top;
|
||||||
|
|
||||||
if (this.getScrollTop() > top) {
|
if (this.getScrollTop() > top) {
|
||||||
this.scrollToY(top);
|
this.scrollToY(top);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.getScrollTop() + this.scroller.clientHeight < top + this.lineHeight) {
|
if (this.getScrollTop() + this.scroller.clientHeight < top
|
||||||
this.scrollToY(top + this.lineHeight - this.scroller.clientHeight);
|
+ this.lineHeight) {
|
||||||
}
|
this.scrollToY(top + this.lineHeight - this.scroller.clientHeight);
|
||||||
|
}
|
||||||
|
|
||||||
if (this.scroller.scrollLeft > left) {
|
if (this.scroller.scrollLeft > left) {
|
||||||
this.scroller.scrollLeft = left;
|
this.scroller.scrollLeft = left;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.scroller.scrollLeft + this.scroller.clientWidth < left + this.characterWidth) {
|
if (this.scroller.scrollLeft + this.scroller.clientWidth < left
|
||||||
this.scroller.scrollLeft = Math.round(left + this.characterWidth - this.scroller.clientWidth);
|
+ this.characterWidth) {
|
||||||
}
|
this.scroller.scrollLeft = Math.round(left + this.characterWidth
|
||||||
|
- this.scroller.clientWidth);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.getScrollTop = function() {
|
ace.VirtualRenderer.prototype.getScrollTop = function() {
|
||||||
return this.scrollTop;
|
return this.scrollTop;
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.scrollToRow = function(row) {
|
ace.VirtualRenderer.prototype.scrollToRow = function(row) {
|
||||||
this.scrollToY(row*this.lineHeight);
|
this.scrollToY(row * this.lineHeight);
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.scrollToY = function(scrollTop)
|
ace.VirtualRenderer.prototype.scrollToY = function(scrollTop) {
|
||||||
{
|
var maxHeight = this.lines.length * this.lineHeight
|
||||||
var maxHeight = this.lines.length * this.lineHeight - this.scroller.clientHeight;
|
- this.scroller.clientHeight;
|
||||||
var scrollTop = Math.max(0, Math.min(maxHeight, scrollTop));
|
var scrollTop = Math.max(0, Math.min(maxHeight, scrollTop));
|
||||||
|
|
||||||
if (this.scrollTop !== scrollTop) {
|
if (this.scrollTop !== scrollTop) {
|
||||||
this.scrollTop = scrollTop;
|
this.scrollTop = scrollTop;
|
||||||
this.draw();
|
this.draw();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.screenToTextCoordinates = function(pageX, pageY)
|
ace.VirtualRenderer.prototype.screenToTextCoordinates = function(pageX, pageY) {
|
||||||
{
|
var canvasPos = this.scroller.getBoundingClientRect();
|
||||||
var canvasPos = this.scroller.getBoundingClientRect();
|
|
||||||
|
|
||||||
var col = Math.floor((pageX + this.scroller.scrollLeft - canvasPos.left) / this.characterWidth);
|
var col = Math.floor((pageX + this.scroller.scrollLeft - canvasPos.left)
|
||||||
var row = Math.floor((pageY + this.scrollTop - canvasPos.top) / this.lineHeight);
|
/ this.characterWidth);
|
||||||
|
var row = Math.floor((pageY + this.scrollTop - canvasPos.top)
|
||||||
|
/ this.lineHeight);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
row: row,
|
row : row,
|
||||||
column: col
|
column : col
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.visualizeFocus = function() {
|
ace.VirtualRenderer.prototype.visualizeFocus = function() {
|
||||||
this.container.className = "editor focus";
|
this.container.className = "editor focus";
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.visualizeBlur = function() {
|
ace.VirtualRenderer.prototype.visualizeBlur = function() {
|
||||||
this.container.className = "editor";
|
this.container.className = "editor";
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.VirtualRenderer.prototype.showComposition = function(position) {
|
ace.VirtualRenderer.prototype.showComposition = function(position) {
|
||||||
|
|
|
||||||
153
src/XML.js
153
src/XML.js
|
|
@ -1,98 +1,75 @@
|
||||||
if (!window.ace) ace = {};
|
if (!window.ace)
|
||||||
|
ace = {};
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
ace.XML = {};
|
ace.XML = {};
|
||||||
|
|
||||||
// regexp must not have capturing parentheses
|
// regexp must not have capturing parentheses
|
||||||
// regexps are ordered -> the first match is used
|
// regexps are ordered -> the first match is used
|
||||||
|
|
||||||
ace.XML.RULES = {
|
ace.XML.RULES = {
|
||||||
start :
|
start : [ {
|
||||||
[
|
token : "text",
|
||||||
{
|
regex : "<\\!\\[CDATA\\[",
|
||||||
token: "text",
|
next : "cdata"
|
||||||
regex: "<\\!\\[CDATA\\[",
|
}, {
|
||||||
next: "cdata"
|
token : "xml_pe",
|
||||||
},
|
regex : "<\\?.*?\\?>"
|
||||||
{
|
}, {
|
||||||
token: "xml_pe",
|
token : "comment",
|
||||||
regex: "<\\?.*?\\?>"
|
regex : "<\\!--",
|
||||||
},
|
next : "comment"
|
||||||
{
|
}, {
|
||||||
token: "comment",
|
token : "text", // opening tag
|
||||||
regex: "<\\!--",
|
regex : "<",
|
||||||
next: "comment"
|
next : "tag"
|
||||||
},
|
}, {
|
||||||
{
|
token : "text",
|
||||||
token: "text", // opening tag
|
regex : "\\s+"
|
||||||
regex: "<",
|
}, {
|
||||||
next: "tag"
|
token : "text",
|
||||||
},
|
regex : ".+"
|
||||||
{
|
} ],
|
||||||
token: "text",
|
|
||||||
regex: "\\s+"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
token: "text",
|
|
||||||
regex: ".+"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
tag:
|
tag : [ {
|
||||||
[
|
token : "text",
|
||||||
{
|
regex : ">",
|
||||||
token: "text",
|
next : "start"
|
||||||
regex: ">",
|
}, {
|
||||||
next: "start"
|
token : "keyword",
|
||||||
},
|
regex : "[-_a-zA-Z0-9:]+"
|
||||||
{
|
}, {
|
||||||
token: "keyword",
|
token : "text",
|
||||||
regex: "[-_a-zA-Z0-9:]+"
|
regex : "\\s+"
|
||||||
},
|
}, {
|
||||||
{
|
token : "string",
|
||||||
token: "text",
|
regex : '".*?"'
|
||||||
regex: "\\s+"
|
}, {
|
||||||
},
|
token : "string",
|
||||||
{
|
regex : "'.*?'"
|
||||||
token: "string",
|
} ],
|
||||||
regex: '".*?"'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
token: "string",
|
|
||||||
regex: "'.*?'"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
cdata:
|
cdata : [ {
|
||||||
[
|
token : "text",
|
||||||
{
|
regex : "\\]\\]>",
|
||||||
token: "text",
|
next : "start"
|
||||||
regex: "\\]\\]>",
|
}, {
|
||||||
next: "start"
|
token : "text",
|
||||||
},
|
regex : "\\s+"
|
||||||
{
|
}, {
|
||||||
token: "text",
|
token : "text",
|
||||||
regex: "\\s+"
|
regex : ".+"
|
||||||
},
|
} ],
|
||||||
{
|
|
||||||
token: "text",
|
|
||||||
regex: ".+"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
comment:
|
comment : [ {
|
||||||
[
|
token : "comment",
|
||||||
{
|
regex : ".*?-->",
|
||||||
token: "comment",
|
next : "start"
|
||||||
regex: ".*?-->",
|
}, {
|
||||||
next: "start"
|
token : "comment",
|
||||||
},
|
regex : ".+"
|
||||||
{
|
} ]
|
||||||
token: "comment",
|
};
|
||||||
regex: ".+"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
})();
|
})();
|
||||||
224
src/lib.js
224
src/lib.js
|
|
@ -1,173 +1,159 @@
|
||||||
if (!window.ace) ace = {};
|
if (!window.ace)
|
||||||
|
ace = {};
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
ace.addListener = function(elem, type, callback) {
|
ace.addListener = function(elem, type, callback) {
|
||||||
if (elem.addEventListener) {
|
if (elem.addEventListener) { return elem.addEventListener(type,
|
||||||
return elem.addEventListener(type, callback, false);
|
callback,
|
||||||
}
|
false); }
|
||||||
if (elem.attachEvent) {
|
if (elem.attachEvent) {
|
||||||
var wrapper = function() {
|
var wrapper = function() {
|
||||||
callback(window.event);
|
callback(window.event);
|
||||||
|
}
|
||||||
|
callback.$$wrapper = wrapper;
|
||||||
|
elem.attachEvent("on" + type, wrapper);
|
||||||
}
|
}
|
||||||
callback.$$wrapper = wrapper;
|
|
||||||
elem.attachEvent("on" + type, wrapper);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.removeListener = function(elem, type, callback) {
|
ace.removeListener = function(elem, type, callback) {
|
||||||
if (elem.removeEventListener) {
|
if (elem.removeEventListener) { return elem
|
||||||
return elem.removeEventListener(type, callback, false);
|
.removeEventListener(type, callback, false); }
|
||||||
}
|
if (elem.detachEvent) {
|
||||||
if (elem.detachEvent) {
|
elem.detachEvent("on" + type, callback.$$wrapper || callback);
|
||||||
elem.detachEvent("on" + type, callback.$$wrapper || callback);
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.setText = function(elem, text) {
|
ace.setText = function(elem, text) {
|
||||||
if (elem.innerText !== undefined) {
|
if (elem.innerText !== undefined) {
|
||||||
elem.innerText = text;
|
elem.innerText = text;
|
||||||
}
|
}
|
||||||
if (elem.textContent !== undefined) {
|
if (elem.textContent !== undefined) {
|
||||||
elem.textContent = text;
|
elem.textContent = text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.stopEvent = function(e) {
|
ace.stopEvent = function(e) {
|
||||||
ace.stopPropagation(e);
|
ace.stopPropagation(e);
|
||||||
ace.preventDefault(e);
|
ace.preventDefault(e);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.stopPropagation = function(e) {
|
ace.stopPropagation = function(e) {
|
||||||
if (e.stopPropagation)
|
if (e.stopPropagation)
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
else
|
else
|
||||||
e.cancelBubble = true;
|
e.cancelBubble = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.preventDefault = function(e)
|
ace.preventDefault = function(e) {
|
||||||
{
|
if (e.preventDefault)
|
||||||
if (e.preventDefault)
|
e.preventDefault();
|
||||||
e.preventDefault();
|
else
|
||||||
else
|
e.returnValue = false;
|
||||||
e.returnValue = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.inherits = function(ctor, superCtor) {
|
ace.inherits = function(ctor, superCtor) {
|
||||||
var tempCtor = function(){};
|
var tempCtor = function() {
|
||||||
tempCtor.prototype = superCtor.prototype;
|
};
|
||||||
ctor.super_ = superCtor.prototype;
|
tempCtor.prototype = superCtor.prototype;
|
||||||
ctor.prototype = new tempCtor();
|
ctor.super_ = superCtor.prototype;
|
||||||
ctor.prototype.constructor = ctor;
|
ctor.prototype = new tempCtor();
|
||||||
|
ctor.prototype.constructor = ctor;
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.getInnerWidth = function(element)
|
ace.getInnerWidth = function(element) {
|
||||||
{
|
return (parseInt(ace.computedStyle(element, "paddingLeft"))
|
||||||
return (
|
+ parseInt(ace.computedStyle(element, "paddingRight")) + element.clientWidth);
|
||||||
parseInt(ace.computedStyle(element, "paddingLeft")) +
|
|
||||||
parseInt(ace.computedStyle(element, "paddingRight")) +
|
|
||||||
element.clientWidth
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.getInnerHeight = function(element)
|
ace.getInnerHeight = function(element) {
|
||||||
{
|
return (parseInt(ace.computedStyle(element, "paddingTop"))
|
||||||
return (
|
+ parseInt(ace.computedStyle(element, "paddingBottom")) + element.clientHeight);
|
||||||
parseInt(ace.computedStyle(element, "paddingTop")) +
|
|
||||||
parseInt(ace.computedStyle(element, "paddingBottom")) +
|
|
||||||
element.clientHeight
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.computedStyle = function(element, style)
|
ace.computedStyle = function(element, style) {
|
||||||
{
|
if (window.getComputedStyle) {
|
||||||
if (window.getComputedStyle) {
|
return (window.getComputedStyle(element, null))[style];
|
||||||
return (window.getComputedStyle(element, null))[style];
|
}
|
||||||
} else {
|
else {
|
||||||
return element.currentStyle[style];
|
return element.currentStyle[style];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.scrollbarHeight = function() {
|
ace.scrollbarHeight = function() {
|
||||||
var el = document.createElement("div");
|
var el = document.createElement("div");
|
||||||
var style = el.style;
|
var style = el.style;
|
||||||
|
|
||||||
style.position = "absolute";
|
style.position = "absolute";
|
||||||
style.left = "-10000px";
|
style.left = "-10000px";
|
||||||
style.overflow = "scroll";
|
style.overflow = "scroll";
|
||||||
style.height = "100px";
|
style.height = "100px";
|
||||||
|
|
||||||
document.body.appendChild(el);
|
document.body.appendChild(el);
|
||||||
var height = el.offsetHeight - el.clientHeight;
|
var height = el.offsetHeight - el.clientHeight;
|
||||||
document.body.removeChild(el);
|
document.body.removeChild(el);
|
||||||
|
|
||||||
return height;
|
return height;
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.bind = function(fcn, context) {
|
ace.bind = function(fcn, context) {
|
||||||
return function() {
|
return function() {
|
||||||
return fcn.apply(context, arguments);
|
return fcn.apply(context, arguments);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.capture = function(el, eventHandler, releaseCaptureHandler)
|
ace.capture = function(el, eventHandler, releaseCaptureHandler) {
|
||||||
{
|
function onMouseMove(e) {
|
||||||
function onMouseMove(e)
|
eventHandler(e);
|
||||||
{
|
e.stopPropagation();
|
||||||
eventHandler(e);
|
}
|
||||||
e.stopPropagation();
|
|
||||||
}
|
|
||||||
|
|
||||||
function onMouseUp(e)
|
function onMouseUp(e) {
|
||||||
{
|
eventHandler && eventHandler(e);
|
||||||
eventHandler && eventHandler(e);
|
releaseCaptureHandler && releaseCaptureHandler();
|
||||||
releaseCaptureHandler && releaseCaptureHandler();
|
|
||||||
|
|
||||||
document.removeEventListener("mousemove", onMouseMove, true);
|
document.removeEventListener("mousemove", onMouseMove, true);
|
||||||
document.removeEventListener("mouseup", onMouseUp, true);
|
document.removeEventListener("mouseup", onMouseUp, true);
|
||||||
|
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("mousemove", onMouseMove, true);
|
document.addEventListener("mousemove", onMouseMove, true);
|
||||||
document.addEventListener("mouseup", onMouseUp, true);
|
document.addEventListener("mouseup", onMouseUp, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.addMouseWheelListener = function(el, callback)
|
ace.addMouseWheelListener = function(el, callback) {
|
||||||
{
|
var listener = function(e) {
|
||||||
var listener = function(e) {
|
e.wheel = (e.wheelDelta) ? e.wheelDelta / 120
|
||||||
e.wheel = (e.wheelDelta) ? e.wheelDelta / 120 : -(e.detail || 0) / 3;
|
: -(e.detail || 0) / 3;
|
||||||
callback(e);
|
callback(e);
|
||||||
}
|
}
|
||||||
ace.addListener(el, "DOMMouseScroll", listener);
|
ace.addListener(el, "DOMMouseScroll", listener);
|
||||||
ace.addListener(el, "mousewheel", listener);
|
ace.addListener(el, "mousewheel", listener);
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.autoremoveListener = function(el, type, callback, timeout)
|
ace.autoremoveListener = function(el, type, callback, timeout) {
|
||||||
{
|
var listener = function(e) {
|
||||||
var listener = function(e)
|
clearTimeout(timeoutId);
|
||||||
{
|
remove();
|
||||||
clearTimeout(timeoutId);
|
callback(e);
|
||||||
remove();
|
}
|
||||||
callback(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
var remove = function() {
|
var remove = function() {
|
||||||
ace.removeListener(el, type, listener);
|
ace.removeListener(el, type, listener);
|
||||||
};
|
};
|
||||||
|
|
||||||
ace.addListener(el, type, listener);
|
ace.addListener(el, type, listener);
|
||||||
var timeoutId = setTimeout(remove, timeout);
|
var timeoutId = setTimeout(remove, timeout);
|
||||||
}
|
}
|
||||||
|
|
||||||
ace.addTripleClickListener = function(el, callback)
|
ace.addTripleClickListener = function(el, callback) {
|
||||||
{
|
ace.addListener(el, "mousedown", function() {
|
||||||
ace.addListener(el, "mousedown", function() {
|
ace.autoremoveListener(el, "mousedown", function() {
|
||||||
ace.autoremoveListener(el, "mousedown", function() {
|
ace.autoremoveListener(el, "mousedown", callback, 300);
|
||||||
ace.autoremoveListener(el, "mousedown", callback, 300);
|
}, 300);
|
||||||
}, 300);
|
});
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
})();
|
})();
|
||||||
Loading…
Add table
Add a link
Reference in a new issue