diff --git a/build_support/boot_textarea.js b/build_support/boot_textarea.js index cf2800a9..c3e8b03a 100644 --- a/build_support/boot_textarea.js +++ b/build_support/boot_textarea.js @@ -49,7 +49,8 @@ var UA = require("pilot/useragent") var Editor = require("ace/editor").Editor; var Buffer = require("ace/model/buffer").Buffer; var UndoManager = require("ace/undomanager").UndoManager; -var Renderer = require("ace/virtual_renderer").VirtualRenderer; +var Renderer = require("ace/view/window_view").WindowView; + window.__ace_shadowed__.edit = function(el) { if (typeof(el) == "string") { diff --git a/demo/demo.js b/demo/demo.js index 3621bf77..25daf764 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -46,7 +46,7 @@ define(function(require, exports, module) { var event = require("pilot/event"); var Range = require("ace/range").Range; var Editor = require("ace/editor").Editor; - var Renderer = require("ace/virtual_renderer").VirtualRenderer; + var Renderer = require("ace/view/window_view").WindowView; var theme = require("ace/theme/textmate"); var Buffer = require("ace/model/buffer").Buffer; diff --git a/lib/ace/ace.js b/lib/ace/ace.js index 5d853585..3be0b533 100644 --- a/lib/ace/ace.js +++ b/lib/ace/ace.js @@ -46,7 +46,7 @@ define(function(require, exports, module) { var Editor = require("ace/editor").Editor; var Buffer = require("ace/model/buffer").Buffer; var UndoManager = require("ace/undomanager").UndoManager; - var Renderer = require("ace/virtual_renderer").VirtualRenderer; + var Renderer = require("ace/view/window_view").WindowView; exports.edit = function(el) { if (typeof(el) == "string") { diff --git a/lib/ace/split.js b/lib/ace/split.js index 3628996e..9a6bb380 100644 --- a/lib/ace/split.js +++ b/lib/ace/split.js @@ -44,7 +44,7 @@ var lang = require("pilot/lang"); var EventEmitter = require("pilot/event_emitter").EventEmitter; var Editor = require("ace/editor").Editor; -var Renderer = require("ace/virtual_renderer").VirtualRenderer; +var Renderer = require("ace/view/window_view").WindowView; var Buffer = require("ace/model/buffer").Buffer; var Split = function(container, theme, splits) { diff --git a/lib/ace/view/window_view.js b/lib/ace/view/window_view.js new file mode 100644 index 00000000..82fb1f5f --- /dev/null +++ b/lib/ace/view/window_view.js @@ -0,0 +1,834 @@ +/* vim:ts=4:sts=4:sw=4: + * ***** BEGIN LICENSE BLOCK ***** + * Version: MPL 1.1/GPL 2.0/LGPL 2.1 + * + * The contents of this file are subject to the Mozilla Public License Version + * 1.1 (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * http://www.mozilla.org/MPL/ + * + * Software distributed under the License is distributed on an "AS IS" basis, + * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License + * for the specific language governing rights and limitations under the + * License. + * + * The Original Code is Ajax.org Code Editor (ACE). + * + * The Initial Developer of the Original Code is + * Ajax.org B.V. + * Portions created by the Initial Developer are Copyright (C) 2010 + * the Initial Developer. All Rights Reserved. + * + * Contributor(s): + * Fabian Jakobs + * Irakli Gozalishvili (http://jeditoolkit.com) + * Julian Viereck + * + * Alternatively, the contents of this file may be used under the terms of + * either the GNU General Public License Version 2 or later (the "GPL"), or + * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), + * in which case the provisions of the GPL or the LGPL are applicable instead + * of those above. If you wish to allow use of your version of this file only + * under the terms of either the GPL or the LGPL, and not to allow others to + * use your version of this file under the terms of the MPL, indicate your + * decision by deleting the provisions above and replace them with the notice + * and other provisions required by the GPL or the LGPL. If you do not delete + * the provisions above, a recipient may use your version of this file under + * the terms of any one of the MPL, the GPL or the LGPL. + * + * ***** END LICENSE BLOCK ***** */ + +define(function(require, exports, module) { + +var oop = require("pilot/oop"); +var dom = require("pilot/dom"); +var event = require("pilot/event"); +var useragent = require("pilot/useragent"); +var GutterLayer = require("ace/layer/gutter").Gutter; +var MarkerLayer = require("ace/layer/marker").Marker; +var TextLayer = require("ace/layer/text").Text; +var CursorLayer = require("ace/layer/cursor").Cursor; +var ScrollBar = require("ace/scrollbar").ScrollBar; +var RenderLoop = require("ace/renderloop").RenderLoop; +var EventEmitter = require("pilot/event_emitter").EventEmitter; +var editorCss = require("text!ace/css/editor.css"); + +// import CSS once +dom.importCssString(editorCss); + +var WindowView = function(container, theme) { + this.container = container; + dom.addCssClass(this.container, "ace_editor"); + + this.setTheme(theme); + + this.$gutter = dom.createElement("div"); + this.$gutter.className = "ace_gutter"; + this.container.appendChild(this.$gutter); + + this.scroller = dom.createElement("div"); + this.scroller.className = "ace_scroller"; + this.container.appendChild(this.scroller); + + this.content = dom.createElement("div"); + this.content.className = "ace_content"; + this.scroller.appendChild(this.content); + + this.$gutterLayer = new GutterLayer(this.$gutter); + this.$markerBack = new MarkerLayer(this.content); + + var textLayer = this.$textLayer = new TextLayer(this.content); + this.canvas = textLayer.element; + + this.$markerFront = new MarkerLayer(this.content); + + this.characterWidth = textLayer.getCharacterWidth(); + this.lineHeight = textLayer.getLineHeight(); + + this.$cursorLayer = new CursorLayer(this.content); + this.$cursorPadding = 8; + + // Indicates whether the horizontal scrollbar is visible + this.$horizScroll = true; + this.$horizScrollAlwaysVisible = true; + + this.scrollBar = new ScrollBar(container); + this.scrollBar.addEventListener("scroll", this.onScroll.bind(this)); + + this.scrollTop = 0; + + this.cursorPos = { + row : 0, + column : 0 + }; + + var _self = this; + this.$textLayer.addEventListener("changeCharaterSize", function() { + _self.characterWidth = textLayer.getCharacterWidth(); + _self.lineHeight = textLayer.getLineHeight(); + _self.$updatePrintMargin(); + _self.onResize(true); + + _self.$loop.schedule(_self.CHANGE_FULL); + }); + event.addListener(this.$gutter, "click", this.$onGutterClick.bind(this)); + event.addListener(this.$gutter, "dblclick", this.$onGutterClick.bind(this)); + + this.$size = { + width: 0, + height: 0, + scrollerHeight: 0, + scrollerWidth: 0 + }; + + this.layerConfig = { + width : 1, + padding : 0, + firstRow : 0, + firstRowScreen: 0, + lastRow : 0, + lineHeight : 1, + characterWidth : 1, + minHeight : 1, + maxHeight : 1, + offset : 0, + height : 1 + }; + + this.$loop = new RenderLoop(this.$renderChanges.bind(this)); + this.$loop.schedule(this.CHANGE_FULL); + + this.setPadding(4); + this.$updatePrintMargin(); +}; + +(function() { + this.showGutter = true; + + this.CHANGE_CURSOR = 1; + this.CHANGE_MARKER = 2; + this.CHANGE_GUTTER = 4; + this.CHANGE_SCROLL = 8; + this.CHANGE_LINES = 16; + this.CHANGE_TEXT = 32; + this.CHANGE_SIZE = 64; + this.CHANGE_MARKER_BACK = 128; + this.CHANGE_MARKER_FRONT = 256; + this.CHANGE_FULL = 512; + + oop.implement(this, EventEmitter); + + this.setSession = function(session) { + this.session = session; + this.$cursorLayer.setSession(session); + this.$markerBack.setSession(session); + this.$markerFront.setSession(session); + this.$gutterLayer.setSession(session); + this.$textLayer.setSession(session); + this.$loop.schedule(this.CHANGE_FULL); + }; + + /** + * Triggers partial update of the text layer + */ + this.updateLines = function(firstRow, lastRow) { + if (lastRow === undefined) + lastRow = Infinity; + + if (!this.$changedLines) { + this.$changedLines = { + firstRow: firstRow, + lastRow: lastRow + }; + } + else { + if (this.$changedLines.firstRow > firstRow) + this.$changedLines.firstRow = firstRow; + + if (this.$changedLines.lastRow < lastRow) + this.$changedLines.lastRow = lastRow; + } + + this.$loop.schedule(this.CHANGE_LINES); + }; + + /** + * Triggers full update of the text layer + */ + this.updateText = function() { + this.$loop.schedule(this.CHANGE_TEXT); + }; + + /** + * Triggers a full update of all layers + */ + this.updateFull = function() { + this.$loop.schedule(this.CHANGE_FULL); + }; + + this.updateFontSize = function() { + this.$textLayer.checkForSizeChanges(); + }; + + /** + * Triggers resize of the editor + */ + this.onResize = function(force) { + var changes = this.CHANGE_SIZE; + var size = this.$size; + + var height = dom.getInnerHeight(this.container); + if (force || size.height != height) { + size.height = height; + + this.scroller.style.height = height + "px"; + size.scrollerHeight = this.scroller.clientHeight; + this.scrollBar.setHeight(size.scrollerHeight); + + if (this.session) { + this.scrollToY(this.getScrollTop()); + changes = changes | this.CHANGE_FULL; + } + } + + var width = dom.getInnerWidth(this.container); + if (force || size.width != width) { + size.width = width; + + var gutterWidth = this.showGutter ? this.$gutter.offsetWidth : 0; + this.scroller.style.left = gutterWidth + "px"; + size.scrollerWidth = Math.max(0, width - gutterWidth - this.scrollBar.getWidth()) + this.scroller.style.width = size.scrollerWidth + "px"; + + if (this.session.getUseWrapMode() && this.adjustWrapLimit() || force) + changes = changes | this.CHANGE_FULL; + } + + this.$loop.schedule(changes); + }; + + this.adjustWrapLimit = function(){ + var availableWidth = this.$size.scrollerWidth - this.$padding * 2; + var limit = Math.floor(availableWidth / this.characterWidth) - 1; + return this.session.adjustWrapLimit(limit); + }; + + this.$onGutterClick = function(e) { + var pageX = event.getDocumentX(e); + var pageY = event.getDocumentY(e); + + this._dispatchEvent("gutter" + e.type, { + row: this.screenToTextCoordinates(pageX, pageY).row, + htmlEvent: e + }); + }; + + this.setShowInvisibles = function(showInvisibles) { + if (this.$textLayer.setShowInvisibles(showInvisibles)) + this.$loop.schedule(this.CHANGE_TEXT); + }; + + this.getShowInvisibles = function() { + return this.$textLayer.showInvisibles; + }; + + this.$showPrintMargin = true; + this.setShowPrintMargin = function(showPrintMargin) { + this.$showPrintMargin = showPrintMargin; + this.$updatePrintMargin(); + }; + + this.getShowPrintMargin = function() { + return this.$showPrintMargin; + }; + + this.$printMarginColumn = 80; + this.setPrintMarginColumn = function(showPrintMargin) { + this.$printMarginColumn = showPrintMargin; + this.$updatePrintMargin(); + }; + + this.getPrintMarginColumn = function() { + return this.$printMarginColumn; + }; + + this.getShowGutter = function(){ + return this.showGutter; + }; + + this.setShowGutter = function(show){ + if(this.showGutter === show) + return; + this.$gutter.style.display = show ? "block" : "none"; + this.showGutter = show; + this.onResize(true); + }; + + this.$updatePrintMargin = function() { + var containerEl; + + if (!this.$showPrintMargin && !this.$printMarginEl) + return; + + if (!this.$printMarginEl) { + containerEl = dom.createElement("div"); + containerEl.className = "ace_print_margin_layer"; + this.$printMarginEl = dom.createElement("div"); + this.$printMarginEl.className = "ace_print_margin"; + containerEl.appendChild(this.$printMarginEl); + this.content.insertBefore(containerEl, this.$textLayer.element); + } + + var style = this.$printMarginEl.style; + style.left = ((this.characterWidth * this.$printMarginColumn) + this.$padding * 2) + "px"; + style.visibility = this.$showPrintMargin ? "visible" : "hidden"; + }; + + this.getContainerElement = function() { + return this.container; + }; + + this.getMouseEventTarget = function() { + return this.content; + }; + + this.getTextAreaContainer = function() { + return this.container; + }; + + this.moveTextAreaToCursor = function(textarea) { + // in IE the native cursor always shines through + if (useragent.isIE) + return; + + var pos = this.$cursorLayer.getPixelPosition(); + if (!pos) + return; + + var bounds = this.content.getBoundingClientRect(); + var offset = this.layerConfig.offset; + + textarea.style.left = (bounds.left + pos.left + this.$padding) + "px"; + textarea.style.top = (bounds.top + pos.top - this.scrollTop + offset) + "px"; + }; + + this.getFirstVisibleRow = function() { + return this.layerConfig.firstRow; + }; + + this.getFirstFullyVisibleRow = function() { + return this.layerConfig.firstRow + (this.layerConfig.offset === 0 ? 0 : 1); + }; + + this.getLastFullyVisibleRow = function() { + var flint = Math.floor((this.layerConfig.height + this.layerConfig.offset) / this.layerConfig.lineHeight); + return this.layerConfig.firstRow - 1 + flint; + }; + + this.getLastVisibleRow = function() { + return this.layerConfig.lastRow; + }; + + this.$padding = null; + this.setPadding = function(padding) { + this.$padding = padding; + this.$textLayer.setPadding(padding); + this.$cursorLayer.setPadding(padding); + this.$markerFront.setPadding(padding); + this.$markerBack.setPadding(padding); + this.$loop.schedule(this.CHANGE_FULL); + this.$updatePrintMargin(); + }; + + this.getHScrollBarAlwaysVisible = function() { + return this.$horizScrollAlwaysVisible; + }; + + this.setHScrollBarAlwaysVisible = function(alwaysVisible) { + if (this.$horizScrollAlwaysVisible != alwaysVisible) { + this.$horizScrollAlwaysVisible = alwaysVisible; + if (!this.$horizScrollAlwaysVisible || !this.$horizScroll) + this.$loop.schedule(this.CHANGE_SCROLL); + } + }; + + this.onScroll = function(e) { + this.scrollToY(e.data); + }; + + this.$updateScrollBar = function() { + this.scrollBar.setInnerHeight(this.layerConfig.maxHeight); + this.scrollBar.setScrollTop(this.scrollTop); + }; + + this.$renderChanges = function(changes) { + if (!changes || !this.session) + return; + + // text, scrolling and resize changes can cause the view port size to change + if (changes & this.CHANGE_FULL || + changes & this.CHANGE_SIZE || + changes & this.CHANGE_TEXT || + changes & this.CHANGE_LINES || + changes & this.CHANGE_SCROLL + ) + this.$computeLayerConfig(); + + // full + if (changes & this.CHANGE_FULL) { + this.$textLayer.update(this.layerConfig); + if (this.showGutter) + this.$gutterLayer.update(this.layerConfig); + this.$markerBack.update(this.layerConfig); + this.$markerFront.update(this.layerConfig); + this.$cursorLayer.update(this.layerConfig); + this.$updateScrollBar(); + return; + } + + // scrolling + if (changes & this.CHANGE_SCROLL) { + if (changes & this.CHANGE_TEXT || changes & this.CHANGE_LINES) + this.$textLayer.update(this.layerConfig); + else + this.$textLayer.scrollLines(this.layerConfig); + + if (this.showGutter) + this.$gutterLayer.update(this.layerConfig); + this.$markerBack.update(this.layerConfig); + this.$markerFront.update(this.layerConfig); + this.$cursorLayer.update(this.layerConfig); + this.$updateScrollBar(); + return; + } + + if (changes & this.CHANGE_TEXT) { + this.$textLayer.update(this.layerConfig); + if (this.showGutter) + this.$gutterLayer.update(this.layerConfig); + } + else if (changes & this.CHANGE_LINES) { + this.$updateLines(); + this.$updateScrollBar(); + if (this.showGutter) + this.$gutterLayer.update(this.layerConfig); + } else if (changes & this.CHANGE_GUTTER) { + if (this.showGutter) + this.$gutterLayer.update(this.layerConfig); + } + + if (changes & this.CHANGE_CURSOR) + this.$cursorLayer.update(this.layerConfig); + + if (changes & (this.CHANGE_MARKER | this.CHANGE_MARKER_FRONT)) { + this.$markerFront.update(this.layerConfig); + } + + if (changes & (this.CHANGE_MARKER | this.CHANGE_MARKER_BACK)) { + this.$markerBack.update(this.layerConfig); + } + + if (changes & this.CHANGE_SIZE) + this.$updateScrollBar(); + }; + + this.$computeLayerConfig = function() { + var session = this.session; + + var offset = this.scrollTop % this.lineHeight; + var minHeight = this.$size.scrollerHeight + this.lineHeight; + + var longestLine = this.$getLongestLine(); + var widthChanged = this.layerConfig.width != longestLine; + + var horizScroll = this.$horizScrollAlwaysVisible || this.$size.scrollerWidth - longestLine < 0; + var horizScrollChanged = this.$horizScroll !== horizScroll; + this.$horizScroll = horizScroll; + if (horizScrollChanged) + this.scroller.style.overflowX = horizScroll ? "scroll" : "hidden"; + + var maxHeight = this.session.getScreenLength() * this.lineHeight; + this.scrollTop = Math.max(0, Math.min(this.scrollTop, maxHeight - this.$size.scrollerHeight)); + + var lineCount = Math.ceil(minHeight / this.lineHeight) - 1; + var firstRow = Math.max(0, Math.round((this.scrollTop - offset) / this.lineHeight)); + var lastRow = firstRow + lineCount; + + // Map lines on the screen to lines in the document. + var firstRowScreen, firstRowHeight; + var lineHeight = { lineHeight: this.lineHeight }; + firstRow = session.screenToDocumentRow(firstRow, 0); + + // Check if firstRow is inside of a foldLine. If true, then use the first + // row of the foldLine. + var foldLine = session.getFoldLine(firstRow); + if (foldLine) { + firstRow = foldLine.start.row; + } + + firstRowScreen = session.documentToScreenRow(firstRow, 0); + firstRowHeight = session.getRowHeight(lineHeight, firstRow); + + lastRow = Math.min(session.screenToDocumentRow(lastRow, 0), session.getLength() - 1); + minHeight = this.$size.scrollerHeight + session.getRowHeight(lineHeight, lastRow)+ + firstRowHeight; + + offset = this.scrollTop - firstRowScreen * this.lineHeight; + + this.layerConfig = { + width : longestLine, + padding : this.$padding, + firstRow : firstRow, + firstRowScreen: firstRowScreen, + lastRow : lastRow, + lineHeight : this.lineHeight, + characterWidth : this.characterWidth, + minHeight : minHeight, + maxHeight : maxHeight, + offset : offset, + height : this.$size.scrollerHeight + }; + + // For debugging. + // console.log(JSON.stringify(this.layerConfig)); + + this.$gutterLayer.element.style.marginTop = (-offset) + "px"; + this.content.style.marginTop = (-offset) + "px"; + this.content.style.width = longestLine + "px"; + this.content.style.height = minHeight + "px"; + + // scroller.scrollWidth was smaller than scrollLeft we needed + if (this.$desiredScrollLeft) { + this.scrollToX(this.$desiredScrollLeft); + this.$desiredScrollLeft = 0; + } + + // Horizontal scrollbar visibility may have changed, which changes + // the client height of the scroller + if (horizScrollChanged) + this.onResize(true); + }; + + this.$updateLines = function() { + var firstRow = this.$changedLines.firstRow; + var lastRow = this.$changedLines.lastRow; + this.$changedLines = null; + + var layerConfig = this.layerConfig; + + // if the update changes the width of the document do a full redraw + if (layerConfig.width != this.$getLongestLine()) + return this.$textLayer.update(layerConfig); + + if (firstRow > layerConfig.lastRow + 1) { return; } + if (lastRow < layerConfig.firstRow) { return; } + + // if the last row is unknown -> redraw everything + if (lastRow === Infinity) { + if (this.showGutter) + this.$gutterLayer.update(layerConfig); + this.$textLayer.update(layerConfig); + return; + } + + // else update only the changed rows + this.$textLayer.updateLines(layerConfig, firstRow, lastRow); + }; + + this.$getLongestLine = function() { + var charCount = this.session.getScreenWidth() + 1; + if (this.$textLayer.showInvisibles) + charCount += 1; + + return Math.max(this.$size.scrollerWidth, Math.round(charCount * this.characterWidth)); + }; + + this.updateFrontMarkers = function() { + this.$markerFront.setMarkers(this.session.getMarkers(true)); + this.$loop.schedule(this.CHANGE_MARKER_FRONT); + }; + + this.updateBackMarkers = function() { + this.$markerBack.setMarkers(this.session.getMarkers()); + this.$loop.schedule(this.CHANGE_MARKER_BACK); + }; + + this.addGutterDecoration = function(row, className){ + this.$gutterLayer.addGutterDecoration(row, className); + this.$loop.schedule(this.CHANGE_GUTTER); + }; + + this.removeGutterDecoration = function(row, className){ + this.$gutterLayer.removeGutterDecoration(row, className); + this.$loop.schedule(this.CHANGE_GUTTER); + }; + + this.setBreakpoints = function(rows) { + this.$gutterLayer.setBreakpoints(rows); + this.$loop.schedule(this.CHANGE_GUTTER); + }; + + this.setAnnotations = function(annotations) { + this.$gutterLayer.setAnnotations(annotations); + this.$loop.schedule(this.CHANGE_GUTTER); + }; + + this.updateCursor = function() { + this.$loop.schedule(this.CHANGE_CURSOR); + }; + + this.hideCursor = function() { + this.$cursorLayer.hideCursor(); + }; + + this.showCursor = function() { + this.$cursorLayer.showCursor(); + }; + + this.scrollCursorIntoView = function() { + // the editor is not visible + if (this.$size.scrollerHeight === 0) + return; + + var pos = this.$cursorLayer.getPixelPosition(); + + var left = pos.left + this.$padding; + var top = pos.top; + + if (this.scrollTop > top) { + this.scrollToY(top); + } + + if (this.scrollTop + this.$size.scrollerHeight < top + this.lineHeight) { + this.scrollToY(top + this.lineHeight - this.$size.scrollerHeight); + } + + var scrollLeft = this.scroller.scrollLeft; + + if (scrollLeft > left) { + this.scrollToX(left); + } + + if (scrollLeft + this.$size.scrollerWidth < left + this.characterWidth) { + if (left > this.layerConfig.width) + this.$desiredScrollLeft = left + 2 * this.characterWidth; + else + this.scrollToX(Math.round(left + this.characterWidth - this.$size.scrollerWidth)); + } + }; + + this.getScrollTop = function() { + return this.scrollTop; + }; + + this.getScrollLeft = function() { + return this.scroller.scrollLeft; + }; + + this.getScrollTopRow = function() { + return this.scrollTop / this.lineHeight; + }; + + this.getScrollBottomRow = function() { + return Math.max(0, Math.floor((this.scrollTop + this.$size.scrollerHeight) / this.lineHeight) - 1); + }; + + this.scrollToRow = function(row) { + this.scrollToY(row * this.lineHeight); + }; + + this.scrollToLine = function(line, center) { + var lineHeight = { lineHeight: this.lineHeight }; + var offset = 0; + for (var l = 1; l < line; l++) { + offset += this.session.getRowHeight(lineHeight, l-1); + } + + if (center) { + offset -= this.$size.scrollerHeight / 2; + } + this.scrollToY(offset); + }; + + this.scrollToY = function(scrollTop) { + // after calling scrollBar.setScrollTop + // scrollbar sends us event with same scrollTop. ignore it + scrollTop = Math.max(0, scrollTop); + if (this.scrollTop !== scrollTop) { + this.$loop.schedule(this.CHANGE_SCROLL); + this.scrollTop = scrollTop; + } + }; + + this.scrollToX = function(scrollLeft) { + if (scrollLeft <= this.$padding) + scrollLeft = 0; + + this.scroller.scrollLeft = scrollLeft; + }; + + this.scrollBy = function(deltaX, deltaY) { + deltaY && this.scrollToY(this.scrollTop + deltaY); + deltaX && this.scrollToX(this.scroller.scrollLeft + deltaX); + }; + + this.screenToTextCoordinates = function(pageX, pageY) { + var canvasPos = this.scroller.getBoundingClientRect(); + + var col = Math.round((pageX + this.scroller.scrollLeft - canvasPos.left - this.$padding - dom.getPageScrollLeft()) + / this.characterWidth); + var row = Math.floor((pageY + this.scrollTop - canvasPos.top - dom.getPageScrollTop()) + / this.lineHeight); + + return this.session.screenToDocumentPosition(row, Math.max(col, 0)); + }; + + this.textToScreenCoordinates = function(row, column) { + var canvasPos = this.scroller.getBoundingClientRect(); + var pos = this.session.documentToScreenPosition(row, column); + + var x = this.$padding + Math.round(pos.column * this.characterWidth); + var y = pos.row * this.lineHeight; + + return { + pageX: canvasPos.left + x - this.getScrollLeft(), + pageY: canvasPos.top + y - this.getScrollTop() + }; + }; + + this.visualizeFocus = function() { + dom.addCssClass(this.container, "ace_focus"); + }; + + this.visualizeBlur = function() { + dom.removeCssClass(this.container, "ace_focus"); + }; + + this.showComposition = function(position) { + if (!this.$composition) { + this.$composition = dom.createElement("div"); + this.$composition.className = "ace_composition"; + this.content.appendChild(this.$composition); + } + + this.$composition.innerHTML = " "; + + var pos = this.$cursorLayer.getPixelPosition(); + var style = this.$composition.style; + style.top = pos.top + "px"; + style.left = (pos.left + this.$padding) + "px"; + style.height = this.lineHeight + "px"; + + this.hideCursor(); + }; + + this.setCompositionText = function(text) { + dom.setInnerText(this.$composition, text); + }; + + this.hideComposition = function() { + this.showCursor(); + + if (!this.$composition) + return; + + var style = this.$composition.style; + style.top = "-10000px"; + style.left = "-10000px"; + }; + + this.setTheme = function(theme) { + var _self = this; + + this.$themeValue = theme; + if (!theme || typeof theme == "string") { + theme = theme || "ace/theme/textmate"; + require([theme], function(theme) { + afterLoad(theme); + }); + } else { + afterLoad(theme); + } + + function afterLoad(theme) { + if (_self.$theme) + dom.removeCssClass(_self.container, _self.$theme); + + _self.$theme = theme ? theme.cssClass : null; + + if (_self.$theme) + dom.addCssClass(_self.container, _self.$theme); + + // force re-measure of the gutter width + if (_self.$size) { + _self.$size.width = 0; + _self.onResize(); + } + } + }; + + this.getTheme = function() { + return this.$themeValue; + }; + + // Methods allows to add / remove CSS classnames to the editor element. + // This feature can be used by plug-ins to provide a visual indication of + // a certain mode that editor is in. + + this.setStyle = function setStyle(style) { + dom.addCssClass(this.container, style); + }; + + this.unsetStyle = function unsetStyle(style) { + dom.removeCssClass(this.container, style); + }; + + this.destroy = function() { + this.$textLayer.destroy(); + this.$cursorLayer.destroy(); + }; + +}).call(WindowView.prototype); + +exports.WindowView = WindowView; +}); diff --git a/lib/ace/view/window_view_test.js b/lib/ace/view/window_view_test.js new file mode 100644 index 00000000..2e9739f0 --- /dev/null +++ b/lib/ace/view/window_view_test.js @@ -0,0 +1,90 @@ +/* ***** BEGIN LICENSE BLOCK ***** + * Version: MPL 1.1/GPL 2.0/LGPL 2.1 + * + * The contents of this file are subject to the Mozilla Public License Version + * 1.1 (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * http://www.mozilla.org/MPL/ + * + * Software distributed under the License is distributed on an "AS IS" basis, + * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License + * for the specific language governing rights and limitations under the + * License. + * + * The Original Code is Ajax.org Code Editor (ACE). + * + * The Initial Developer of the Original Code is + * Ajax.org B.V. + * Portions created by the Initial Developer are Copyright (C) 2010 + * the Initial Developer. All Rights Reserved. + * + * Contributor(s): + * Fabian Jakobs + * + * Alternatively, the contents of this file may be used under the terms of + * either the GNU General Public License Version 2 or later (the "GPL"), or + * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), + * in which case the provisions of the GPL or the LGPL are applicable instead + * of those above. If you wish to allow use of your version of this file only + * under the terms of either the GPL or the LGPL, and not to allow others to + * use your version of this file under the terms of the MPL, indicate your + * decision by deleting the provisions above and replace them with the notice + * and other provisions required by the GPL or the LGPL. If you do not delete + * the provisions above, a recipient may use your version of this file under + * the terms of any one of the MPL, the GPL or the LGPL. + * + * ***** END LICENSE BLOCK ***** */ + +if (typeof process !== "undefined") { + require("../../../support/paths"); + require("ace/test/mockdom"); +} + +define(function(require, exports, module) { + +var Buffer = require("ace/model/buffer").Buffer; +var WindowView = require("ace/view/window_view").WindowView; +var assert = require("ace/test/assertions"); + +module.exports = { + "test: screen2text the column should be rounded to the next character edge" : function() { + var el = document.createElement("div"); + + if (!el.getBoundingClientRect) { + console.log("Skipping test: This test only runs in the browser"); + return; + } + + el.style.left = "0px"; + el.style.top = "0px"; + el.style.width = "100px"; + el.style.height = "100px"; + document.body.style.margin = "0px"; + document.body.style.padding = "0px"; + document.body.appendChild(el); + + var renderer = new WindowView(el); + renderer.setPadding(0); + renderer.setSession(new Buffer("1234")); + + renderer.characterWidth = 10; + renderer.lineHeight = 15; + + assert.position(renderer.screenToTextCoordinates(0, 0), 0, 0); + assert.position(renderer.screenToTextCoordinates(4, 0), 0, 0); + assert.position(renderer.screenToTextCoordinates(5, 0), 0, 1); + assert.position(renderer.screenToTextCoordinates(9, 0), 0, 1); + assert.position(renderer.screenToTextCoordinates(10, 0), 0, 1); + assert.position(renderer.screenToTextCoordinates(14, 0), 0, 1); + assert.position(renderer.screenToTextCoordinates(15, 0), 0, 2); + document.body.removeChild(el); + } + + // change tab size after setDocument (for text layer) +}; + +}); + +if (typeof module !== "undefined" && module === require.main) { + require("asyncjs").test.testcase(module.exports).exec() +} \ No newline at end of file