diff --git a/css/editor.css b/css/editor.css
index 79d7ac30..3676c327 100644
--- a/css/editor.css
+++ b/css/editor.css
@@ -1,116 +1,45 @@
.editor {
position: absolute;
- border: 2px solid rgb(159, 159, 159);
overflow: hidden;
}
-.editor.focus {
- border: 2px solid #327fbd;;
-}
-
.scroller {
position: absolute;
- left: 50px;
- right: 0;
- bottom: 0;
- top: 0;
overflow-x: scroll;
overflow-y: hidden;
}
.gutter {
position: absolute;
- width: 50px;
- top: 0px;
- bottom: 0px;
overflow-x: scroll;
overflow-y: hidden;
-
- background: rgb(227, 227, 227);
- border-right: 1px solid rgb(159, 159, 159);
- color: rgb(136, 136, 136);
- font-family: Monaco, "Courier New";
- font-size: 12px;
-
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
}
.layer {
position: absolute;
overflow: hidden;
white-space: nowrap;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.gutter-layer {
- right: 0;
- text-align: right;
- padding-right: 10px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
}
.text-layer {
z-index: 2;
font-family: Monaco, "Courier New", monospace;
- font-size: 12px;
cursor: text;
}
+.cursor-layer {
+ z-index: 3;
+}
+
.cursor {
z-index: 3;
position: absolute;
- width: 2px;
- background: black;
}
.line {
white-space: nowrap;
}
-.line .keyword {
- color: blue;
-}
-
-.line .buildin-constant {
- color: rgb(88, 72, 246);
-}
-
-.line .library-constant {
- color: rgb(6, 150, 14);
-}
-
-.line .buildin-function {
- color: rgb(60, 76, 114);
-}
-
-.line .string {
- color: rgb(3, 106, 7);
-}
-
-.line .comment {
- font-style: italic;
- color: rgb(76, 136, 107);
-}
-
-.line .doc-comment {
- color: rgb(0, 102, 255);
-}
-
-.line .doc-comment-tag {
- color: rgb(128, 159, 191);
-}
-
-.line .number {
- color: rgb(0, 0, 205);
-}
-
-.line .xml_pe {
- color: rgb(104, 104, 91);
-}
-
.marker-layer {
z-index: 1;
}
@@ -118,18 +47,14 @@
.marker-layer .selection {
position: absolute;
z-index: 2;
- background: rgb(181, 213, 255);
}
.marker-layer .bracket {
position: absolute;
z-index: 3;
- margin: -1px 0 0 -1px;
- border: 1px solid rgb(192, 192, 192);
}
.marker-layer .active_line {
position: absolute;
z-index: 1;
- background: rgb(232, 242, 254);
}
\ No newline at end of file
diff --git a/css/tm.css b/css/tm.css
new file mode 100644
index 00000000..b9d8dfd2
--- /dev/null
+++ b/css/tm.css
@@ -0,0 +1,86 @@
+.editor {
+ border: 2px solid rgb(159, 159, 159);
+}
+
+.editor.focus {
+ border: 2px solid #327fbd;;
+}
+
+.gutter {
+ width: 40px;
+ background: rgb(227, 227, 227);
+ border-right: 1px solid rgb(159, 159, 159);
+ color: rgb(136, 136, 136);
+ font-family: Monaco, "Courier New";
+ font-size: 12px;
+}
+
+.gutter-layer {
+ right: 10px;
+ text-align: right;
+}
+
+.text-layer {
+ font-family: Monaco, "Courier New", monospace;
+ font-size: 12px;
+ cursor: text;
+}
+
+.cursor {
+ width: 2px;
+ background: black;
+}
+
+.line .keyword {
+ color: blue;
+}
+
+.line .buildin-constant {
+ color: rgb(88, 72, 246);
+}
+
+.line .library-constant {
+ color: rgb(6, 150, 14);
+}
+
+.line .buildin-function {
+ color: rgb(60, 76, 114);
+}
+
+.line .string {
+ color: rgb(3, 106, 7);
+}
+
+.line .comment {
+ font-style: italic;
+ color: rgb(76, 136, 107);
+}
+
+.line .doc-comment {
+ color: rgb(0, 102, 255);
+}
+
+.line .doc-comment-tag {
+ color: rgb(128, 159, 191);
+}
+
+.line .number {
+ color: rgb(0, 0, 205);
+}
+
+.line .xml_pe {
+ color: rgb(104, 104, 91);
+}
+
+.marker-layer .selection {
+ background: rgb(181, 213, 255);
+}
+
+.marker-layer .bracket {
+ margin: -1px 0 0 -1px;
+ border: 1px solid rgb(192, 192, 192);
+}
+
+.marker-layer .active_line {
+ background: rgb(232, 242, 254);
+}
\ No newline at end of file
diff --git a/demo/editor.html b/demo/editor.html
index 7b5e060e..0a05bf0f 100644
--- a/demo/editor.html
+++ b/demo/editor.html
@@ -9,16 +9,20 @@
+
@@ -124,10 +129,15 @@ var editor = new ace.Editor(
getMode()
);
-window.onresize = function() {
- editor.resize();
+function onResize() {
+ container.style.width = (document.documentElement.clientWidth - 4) + "px";
+ container.style.height = (document.documentElement.clientHeight - 30 - 4) + "px";
+ editor.resize();
};
+window.onresize = onResize;
+onResize();
+
ace.addListener(container, "dragover", function(e) {
return ace.preventDefault(e);
});
diff --git a/src/Editor.js b/src/Editor.js
index 044293b9..496375c3 100644
--- a/src/Editor.js
+++ b/src/Editor.js
@@ -82,10 +82,8 @@ ace.Editor.prototype.setMode = function(mode) {
};
-ace.Editor.prototype.resize = function()
-{
- this.renderer.scrollToY(this.renderer.getScrollTop());
- this.renderer.draw();
+ace.Editor.prototype.resize = function() {
+ this.renderer.onResize();
};
ace.Editor.prototype._highlightBrackets = function() {
@@ -190,7 +188,10 @@ ace.Editor.prototype.onSelectionChange = function() {
ace.Editor.prototype.onMouseDown = function(e) {
this.textInput.focus();
- var pos = this.renderer.screenToTextCoordinates(e.pageX, e.pageY);
+ var pageX = ace.getDocumentX(e);
+ var pageY = ace.getDocumentY(e);
+
+ var pos = this.renderer.screenToTextCoordinates(pageX, pageY);
this.moveCursorToPosition(pos);
this.selection.setSelectionAnchor(pos.row, pos.column);
this.renderer.scrollCursorIntoView();
@@ -199,8 +200,8 @@ ace.Editor.prototype.onMouseDown = function(e) {
var mousePageX, mousePageY;
var onMouseSelection = function(e) {
- mousePageX = e.pageX;
- mousePageY = e.pageY;
+ mousePageX = ace.getDocumentX(e);
+ mousePageY = ace.getDocumentY(e);
};
var onMouseSelectionEnd = function() {
diff --git a/src/VirtualRenderer.js b/src/VirtualRenderer.js
index 7f9b6cd9..0c421b1c 100644
--- a/src/VirtualRenderer.js
+++ b/src/VirtualRenderer.js
@@ -31,6 +31,8 @@ ace.VirtualRenderer = function(container) {
row : 0,
column : 0
};
+
+ this.onResize();
};
ace.VirtualRenderer.prototype.setDocument = function(doc) {
@@ -56,6 +58,22 @@ ace.VirtualRenderer.prototype.getLastVisibleRow = function() {
return this.layerConfig.lastRow || 0;
};
+ace.VirtualRenderer.prototype.onResize = function()
+{
+ var height = ace.getInnerHeight(this.container);
+ this.gutter.style.height = height + "px";
+ this.scroller.style.height = height + "px";
+
+ var width = ace.getInnerWidth(this.container);
+ var gutterWidth = this.gutter.offsetWidth;
+ this.scroller.style.left = gutterWidth + "px";
+ this.scroller.style.width = Math.max(0, width - gutterWidth) + "px";
+
+ if (this.doc) {
+ this.scrollToY(this.getScrollTop());
+ }
+};
+
ace.VirtualRenderer.prototype.updateLines = function(firstRow, lastRow) {
var layerConfig = this.layerConfig;