From a6ab658f15a54bc4d2be005adc6620e72bce9949 Mon Sep 17 00:00:00 2001 From: Fabian Jakobs Date: Wed, 27 Jul 2011 11:57:12 +0200 Subject: [PATCH] move ui specific code into the view folder --- build_support/editor_textarea.html | 2 +- lib/ace/{ => view}/css/editor.css | 0 lib/ace/{ => view}/layer/cursor.js | 0 lib/ace/{ => view}/layer/gutter.js | 0 lib/ace/{ => view}/layer/marker.js | 0 lib/ace/{ => view}/layer/text.js | 0 .../layer/text_text.js} | 62 +- lib/ace/view/window_view.js | 10 +- lib/ace/virtual_renderer.js | 834 ------------------ 9 files changed, 33 insertions(+), 875 deletions(-) rename lib/ace/{ => view}/css/editor.css (100%) rename lib/ace/{ => view}/layer/cursor.js (100%) rename lib/ace/{ => view}/layer/gutter.js (100%) rename lib/ace/{ => view}/layer/marker.js (100%) rename lib/ace/{ => view}/layer/text.js (100%) rename lib/ace/{virtual_renderer_test.js => view/layer/text_text.js} (59%) delete mode 100644 lib/ace/virtual_renderer.js diff --git a/build_support/editor_textarea.html b/build_support/editor_textarea.html index 351e042e..5751dc74 100644 --- a/build_support/editor_textarea.html +++ b/build_support/editor_textarea.html @@ -81,7 +81,7 @@ function inject() { load.scripts = {}; window.__ace_shadowed_load__ = load; - load('ace.js', 'text!ace/css/editor.css', function() { + load('ace.js', 'text!ace/view/css/editor.css', function() { var ace = window.__ace_shadowed__; ace.options.mode = "javascript"; var Event = ace.require('pilot/event'); diff --git a/lib/ace/css/editor.css b/lib/ace/view/css/editor.css similarity index 100% rename from lib/ace/css/editor.css rename to lib/ace/view/css/editor.css diff --git a/lib/ace/layer/cursor.js b/lib/ace/view/layer/cursor.js similarity index 100% rename from lib/ace/layer/cursor.js rename to lib/ace/view/layer/cursor.js diff --git a/lib/ace/layer/gutter.js b/lib/ace/view/layer/gutter.js similarity index 100% rename from lib/ace/layer/gutter.js rename to lib/ace/view/layer/gutter.js diff --git a/lib/ace/layer/marker.js b/lib/ace/view/layer/marker.js similarity index 100% rename from lib/ace/layer/marker.js rename to lib/ace/view/layer/marker.js diff --git a/lib/ace/layer/text.js b/lib/ace/view/layer/text.js similarity index 100% rename from lib/ace/layer/text.js rename to lib/ace/view/layer/text.js diff --git a/lib/ace/virtual_renderer_test.js b/lib/ace/view/layer/text_text.js similarity index 59% rename from lib/ace/virtual_renderer_test.js rename to lib/ace/view/layer/text_text.js index 7bd3bab2..b15125e2 100644 --- a/lib/ace/virtual_renderer_test.js +++ b/lib/ace/view/layer/text_text.js @@ -36,51 +36,43 @@ * ***** END LICENSE BLOCK ***** */ if (typeof process !== "undefined") { - require("../../support/paths"); + require("../../../support/paths"); require("ace/test/mockdom"); } define(function(require, exports, module) { - -var Buffer = require("ace/model/buffer").Buffer; -var VirtualRenderer = require("ace/virtual_renderer").VirtualRenderer; + var assert = require("ace/test/assertions"); +var Buffer = require("ace/model/buffer").Buffer; +var TextLayer = require("ace/view/layer/text").Text; +var JavaScriptMode = require("ace/mode/javascript").Mode; module.exports = { - "test: screen2text the column should be rounded to the next character edge" : function() { - var el = document.createElement("div"); + + "test: render line with hard tabs should render the same as lines with soft tabs" : function() { + var session = new Buffer("a\ta\ta\t\na a a \n"); + session.setMode(new JavaScriptMode()); + var textLayer = new TextLayer(document.createElement("div")); + textLayer.setSession(session); + textLayer.$computeTabString(); + textLayer.config = { + characterWidth: 10, + lineHeight: 20 + }; - if (!el.getBoundingClientRect) { - console.log("Skipping test: This test only runs in the browser"); - return; - } + // row with hard tabs + var row = 0; + var tokens = session.getTokens(row, row)[0].tokens; + var stringBuilder = []; + textLayer.$renderLine(stringBuilder, row, tokens); - 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 VirtualRenderer(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); + // row with soft tabs + row = 1; + tokens = session.getTokens(row, row)[0].tokens; + var stringBuilder2 = []; + textLayer.$renderLine(stringBuilder2, row, tokens); + assert.equal(stringBuilder.join(""), stringBuilder2.join("")); } - - // change tab size after setDocument (for text layer) }; }); diff --git a/lib/ace/view/window_view.js b/lib/ace/view/window_view.js index 82fb1f5f..15d9c9e1 100644 --- a/lib/ace/view/window_view.js +++ b/lib/ace/view/window_view.js @@ -44,14 +44,14 @@ 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 GutterLayer = require("ace/view/layer/gutter").Gutter; +var MarkerLayer = require("ace/view/layer/marker").Marker; +var TextLayer = require("ace/view/layer/text").Text; +var CursorLayer = require("ace/view/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"); +var editorCss = require("text!ace/view/css/editor.css"); // import CSS once dom.importCssString(editorCss); diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js deleted file mode 100644 index ac5b3903..00000000 --- a/lib/ace/virtual_renderer.js +++ /dev/null @@ -1,834 +0,0 @@ -/* 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 VirtualRenderer = 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(VirtualRenderer.prototype); - -exports.VirtualRenderer = VirtualRenderer; -});