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

Merge pull request #1272 from ajaxorg/virtual_renderer

Browse source 
fix #1266: Scroller is collapsed when ace initialized with empty value
This commit is contained in:
Lennart Kats 2013-02-28 08:41:26 -08:00
commit 504faad85d
5 changed files with 102 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

27
api/edit_session.html
View file

@ -35,8 +35,6 @@
</li>
<li id="dropdown_EditSession.event.changeWrapMode" data-id="EditSession.event.changeWrapMode" class="memberLink"><a href="#EditSession.event.changeWrapMode" class="" title="EditSession.event.changeWrapMode (event)" data-id="EditSession.event.changeWrapMode">changeWrapMode</a>
</li>
<li id="dropdown_EditSession.event.loadMode" data-id="EditSession.event.loadMode" class="memberLink"><a href="#EditSession.event.loadMode" class="" title="EditSession.event.loadMode (event)" data-id="EditSession.event.loadMode">loadMode</a>
</li>
<li id="dropdown_EditSession.event.tokenizerUpdate" data-id="EditSession.event.tokenizerUpdate" class="memberLink"><a href="#EditSession.event.tokenizerUpdate" class="" title="EditSession.event.tokenizerUpdate (event)" data-id="EditSession.event.tokenizerUpdate">tokenizerUpdate</a>
</li>
</ul>
@ -619,31 +617,6 @@
</div>
</div>
</article>
<article id="EditSession.event.loadMode" data-title="EditSession.event.loadMode (event)" class="article">
<div class="section method">
<div class="memberContent">
<div class="title"><i id="EditSession.event.loadMode" class="methodToggle methodClicker inactive icon-caret-right"></i>
<ul class="signatures">
<li class="signature">
<ul>
<li class="signature-call"><span class="eventObjName">EditSession</span><span class="eventListenerStart">.on("</span><span id="EditSession.event.loadMode" class="member-name eventMember methodClicker">loadMode</span><span class="eventListenerClose">", </span><span class="eventFunctionOpen">function(</span><span class="eventFunctionClose">))</span></li>
</ul>
<ul class="metaInfo">
</ul>
</li>
</ul>
</div>
<div class="sideToggler">
<div id="ellipsis_EditSession.event.loadMode" class="ellipsis_description"><p>Emitted when the mode is loaded.</p>
</div>
<div class="description"><p>Emitted when the mode is loaded.</p>
</div>
</div>
</div>
</div>
</article>
<article id="EditSession.event.tokenizerUpdate" data-title="EditSession.event.tokenizerUpdate (event)" class="article">
<div class="section method">
<div class="memberContent">

2
lib/ace/ace.js
View file

@ -91,7 +91,7 @@ exports.edit = function(el) {
var env = {
document: doc,
editor: editor,
onResize: editor.resize.bind(editor)
onResize: editor.resize.bind(editor, null)
};
event.addListener(window, "resize", env.onResize);
editor.on("destroy", function() {

6
lib/ace/edit_session.js
View file

@ -96,12 +96,6 @@ var config = require("./config");
* @param {Object} e An object containing one property, `"data"`, that contains information about the changing rows
*
**/
/**
* Emitted when the mode is loaded.
*
* @event loadMode
*
**/
/**
* Emitted when the current mode changes.
*

31
lib/ace/lib/lang.js
View file

@ -144,9 +144,34 @@ exports.getMatchOffsets = function(string, regExp) {
/* deprecated */
exports.deferredCall = function(fcn) {
if (typeof console != "undefined" && console.error)
console.error("Deprecated: use lang.delayedCall")
return exports.delayedCall(fcn);
var timer = null;
var callback = function() {
timer = null;
fcn();
};
var deferred = function(timeout) {
deferred.cancel();
timer = setTimeout(callback, timeout || 0);
return deferred;
};
deferred.schedule = deferred;
deferred.call = function() {
this.cancel();
fcn();
return deferred;
};
deferred.cancel = function() {
clearTimeout(timer);
timer = null;
return deferred;
};
return deferred;
};

149
lib/ace/virtual_renderer.js
View file

@ -3,7 +3,7 @@
*
* Copyright (c) 2010, Ajax.org B.V.
* All rights reserved.
*
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
* * Redistributions of source code must retain the above copyright
@ -14,7 +14,7 @@
* * Neither the name of Ajax.org B.V. nor the
* names of its contributors may be used to endorse or promote products
* derived from this software without specific prior written permission.
*
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
@ -48,8 +48,6 @@ var editorCss = require("./requirejs/text!./css/editor.css");
dom.importCssString(editorCss, "ace_editor");
/**
*
*
* The class that is responsible for drawing everything you see on the screen!
* @class VirtualRenderer
**/
@ -59,9 +57,6 @@ dom.importCssString(editorCss, "ace_editor");
* @param {DOMElement} container The root element of the editor
* @param {String} theme The starting theme
*
*
*
*
* @constructor
**/
@ -182,34 +177,34 @@ var VirtualRenderer = function(container, theme) {
this.CHANGE_H_SCROLL = 1024;
oop.implement(this, EventEmitter);
this.updateCharacterSize = function() {
if (this.$textLayer.allowBoldFonts != this.$allowBoldFonts) {
this.$allowBoldFonts = this.$textLayer.allowBoldFonts;
this.setStyle("ace_nobold", !this.$allowBoldFonts);
}
this.characterWidth = this.$textLayer.getCharacterWidth();
this.lineHeight = this.$textLayer.getLineHeight();
this.$updatePrintMargin();
};
/**
*
*
* Associates the renderer with an [[EditSession `EditSession`]].
**/
this.setSession = function(session) {
this.session = session;
this.scroller.className = "ace_scroller";
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);
};
/**
@ -217,7 +212,7 @@ var VirtualRenderer = function(container, theme) {
* @param {Number} firstRow The first row to update
* @param {Number} lastRow The last row to update
*
*
*
**/
this.updateLines = function(firstRow, lastRow) {
if (lastRow === undefined)
@ -236,7 +231,7 @@ var VirtualRenderer = function(container, theme) {
if (this.$changedLines.lastRow < lastRow)
this.$changedLines.lastRow = lastRow;
}
if (this.$changedLines.firstRow > this.layerConfig.lastRow ||
this.$changedLines.lastRow < this.layerConfig.firstRow)
return;
@ -259,19 +254,17 @@ var VirtualRenderer = function(container, theme) {
* Triggers a full update of all the layers, for all the rows.
* @param {Boolean} force If `true`, forces the changes through
*
*
*
**/
this.updateFull = function(force) {
if (force){
if (force)
this.$renderChanges(this.CHANGE_FULL, true);
}
else {
else
this.$loop.schedule(this.CHANGE_FULL);
}
};
/**
*
*
* Updates the font size.
**/
this.updateFontSize = function() {
@ -285,10 +278,10 @@ var VirtualRenderer = function(container, theme) {
* @param {Number} width The width of the editor in pixels
* @param {Number} height The hiehgt of the editor, in pixels
*
*
*
**/
this.onResize = function(force, gutterWidth, width, height) {
var changes = this.CHANGE_SIZE;
var changes = 0;
var size = this.$size;
if (this.resizing > 2)
@ -302,6 +295,7 @@ var VirtualRenderer = function(container, theme) {
if (height && (force || size.height != height)) {
size.height = height;
changes = this.CHANGE_SIZE;
size.scrollerHeight = this.scroller.clientHeight;
if (!size.scrollerHeight) {
@ -321,6 +315,7 @@ var VirtualRenderer = function(container, theme) {
width = dom.getInnerWidth(this.container);
if (width && (force || this.resizing > 1 || size.width != width)) {
changes = this.CHANGE_SIZE;
size.width = width;
var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
@ -336,10 +331,10 @@ var VirtualRenderer = function(container, theme) {
this.$renderChanges(changes, true);
else
this.$loop.schedule(changes);
if (force)
this.$gutterLayer.$padding = null;
if (force)
delete this.resizing;
};
@ -355,7 +350,6 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
* Adjusts the wrap limit, which is the number of characters that can fit within the width of the edit area on screen.
**/
this.adjustWrapLimit = function() {
@ -400,7 +394,7 @@ var VirtualRenderer = function(container, theme) {
this.getDisplayIndentGuides = function() {
return this.getOption("displayIndentGuides");
};
this.setDisplayIndentGuides = function(display) {
this.setOption("displayIndentGuides", display);
};
@ -474,7 +468,7 @@ var VirtualRenderer = function(container, theme) {
this.$updateGutterLineHighlight = function() {
var pos = this.$cursorLayer.$pixelPos;
var height = this.layerConfig.lineHeight;
if (this.session.getUseWrapMode()) {
if (this.session.getUseWrapMode()) {
var cursor = this.session.selection.getCursor();
cursor.column = 0;
pos = this.$cursorLayer.getPixelPosition(cursor, true);
@ -483,7 +477,7 @@ var VirtualRenderer = function(container, theme) {
this.$gutterLineHighlight.style.top = pos.top - this.layerConfig.offset + "px";
this.$gutterLineHighlight.style.height = height + "px";
};
this.$updatePrintMargin = function() {
if (!this.$showPrintMargin && !this.$printMarginEl)
return;
@ -503,7 +497,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Returns the root element containing this renderer.
* @returns {DOMElement}
**/
@ -512,7 +506,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Returns the element that the mouse events are attached to
* @returns {DOMElement}
**/
@ -521,7 +515,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Returns the element to which the hidden text area is added.
* @returns {DOMElement}
**/
@ -560,7 +554,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* [Returns the index of the first visible row.]{: #VirtualRenderer.getFirstVisibleRow}
* @returns {Number}
**/
@ -569,7 +563,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Returns the index of the first fully visible row. "Fully" here means that the characters in the row are not truncated; that the top and the bottom of the row are on the screen.
* @returns {Number}
**/
@ -578,7 +572,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Returns the index of the last fully visible row. "Fully" here means that the characters in the row are not truncated; that the top and the bottom of the row are on the screen.
* @returns {Number}
**/
@ -588,7 +582,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* [Returns the index of the last visible row.]{: #VirtualRenderer.getLastVisibleRow}
* @returns {Number}
**/
@ -601,8 +595,8 @@ var VirtualRenderer = function(container, theme) {
/**
* Sets the padding for all the layers.
* @param {Number} padding A new padding value (in pixels)
*
*
*
*
*
**/
this.setPadding = function(padding) {
@ -616,7 +610,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Returns whether the horizontal scrollbar is set to be always visible.
* @returns {Boolean}
**/
@ -625,10 +619,10 @@ var VirtualRenderer = function(container, theme) {
};
/**
* Identifies whether you want to show the horizontal scrollbar or not.
* Identifies whether you want to show the horizontal scrollbar or not.
* @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible
*
*
*
**/
this.setHScrollBarAlwaysVisible = function(alwaysVisible) {
if (this.$horizScrollAlwaysVisible != alwaysVisible) {
@ -735,11 +729,14 @@ var VirtualRenderer = function(container, theme) {
if (changes & this.CHANGE_SIZE)
this.$updateScrollBar();
this._signal("afterRender");
};
this.$computeLayerConfig = function() {
if (!this.$size.scrollerHeight)
return this.onResize(true);
var session = this.session;
var offset = this.scrollTop % this.lineHeight;
@ -845,7 +842,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Schedules an update to all the front markers in the document.
**/
this.updateFrontMarkers = function() {
@ -854,7 +851,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Schedules an update to all the back markers in the document.
**/
this.updateBackMarkers = function() {
@ -862,8 +859,8 @@ var VirtualRenderer = function(container, theme) {
this.$loop.schedule(this.CHANGE_MARKER_BACK);
};
/**
*
/**
*
* Deprecated; (moved to [[EditSession]])
* @deprecated
**/
@ -871,7 +868,7 @@ var VirtualRenderer = function(container, theme) {
this.$gutterLayer.addGutterDecoration(row, className);
};
/**
/**
* Deprecated; (moved to [[EditSession]])
* @deprecated
**/
@ -880,7 +877,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Redraw breakpoints.
**/
this.updateBreakpoints = function(rows) {
@ -888,11 +885,11 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Sets annotations for the gutter.
* @param {Array} annotations An array containing annotations
*
*
*
**/
this.setAnnotations = function(annotations) {
this.$gutterLayer.setAnnotations(annotations);
@ -900,7 +897,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Updates the cursor icon.
**/
this.updateCursor = function() {
@ -908,7 +905,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Hides the cursor icon.
**/
this.hideCursor = function() {
@ -916,7 +913,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Shows the cursor icon.
**/
this.showCursor = function() {
@ -930,7 +927,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Scrolls the cursor into the first visibile area of the editor
**/
this.scrollCursorIntoView = function(cursor, offset) {
@ -964,7 +961,7 @@ var VirtualRenderer = function(container, theme) {
}
};
/**
/**
* {:EditSession.getScrollTop}
* @related EditSession.getScrollTop
* @returns {Number}
@ -973,7 +970,7 @@ var VirtualRenderer = function(container, theme) {
return this.session.getScrollTop();
};
/**
/**
* {:EditSession.getScrollLeft}
* @related EditSession.getScrollLeft
* @returns {Number}
@ -983,7 +980,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Returns the first visible row, regardless of whether it's fully visible or not.
* @returns {Number}
**/
@ -992,7 +989,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Returns the last visible row, regardless of whether it's fully visible or not.
* @returns {Number}
**/
@ -1000,11 +997,11 @@ var VirtualRenderer = function(container, theme) {
return Math.max(0, Math.floor((this.scrollTop + this.$size.scrollerHeight) / this.lineHeight) - 1);
};
/**
/**
* Gracefully scrolls from the top of the editor to the row indicated.
* @param {Number} row A row id
*
*
*
* @related EditSession.setScrollTop
**/
this.scrollToRow = function(row) {
@ -1046,7 +1043,7 @@ var VirtualRenderer = function(container, theme) {
* @param {Boolean} animate If `true` animates scrolling
* @param {Function} callback Function to be called after the animation has finished
*
*
*
**/
this.scrollToLine = function(line, center, animate, callback) {
var pos = this.$cursorLayer.getPixelPosition({row: line, column: 0});
@ -1093,7 +1090,7 @@ var VirtualRenderer = function(container, theme) {
* Scrolls the editor to the y pixel indicated.
* @param {Number} scrollTop The position to scroll to
*
*
*
* @returns {Number}
**/
this.scrollToY = function(scrollTop) {
@ -1109,7 +1106,7 @@ var VirtualRenderer = function(container, theme) {
* Scrolls the editor across the x-axis to the pixel indicated.
* @param {Number} scrollLeft The position to scroll to
*
*
*
* @returns {Number}
**/
this.scrollToX = function(scrollLeft) {
@ -1126,7 +1123,7 @@ var VirtualRenderer = function(container, theme) {
* @param {Number} deltaX The x value to scroll by
* @param {Number} deltaY The y value to scroll by
*
*
*
**/
this.scrollBy = function(deltaX, deltaY) {
deltaY && this.session.setScrollTop(this.session.getScrollTop() + deltaY);
@ -1138,7 +1135,7 @@ var VirtualRenderer = function(container, theme) {
* @param {Number} deltaX The x value to scroll by
* @param {Number} deltaY The y value to scroll by
*
*
*
* @returns {Boolean}
**/
this.isScrollableBy = function(deltaX, deltaY) {
@ -1177,7 +1174,7 @@ var VirtualRenderer = function(container, theme) {
* @param {Number} row The document row position
* @param {Number} column The document column position
*
*
*
*
* @returns {Object}
**/
@ -1195,7 +1192,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Focuses the current container.
**/
this.visualizeFocus = function() {
@ -1203,14 +1200,14 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Blurs the current container.
**/
this.visualizeBlur = function() {
dom.removeCssClass(this.container, "ace_focus");
};
/**
/**
* @param {Number} position
*
* @private
@ -1238,7 +1235,7 @@ var VirtualRenderer = function(container, theme) {
};
/**
*
*
* Hides the current composition.
**/
this.hideComposition = function() {
@ -1255,13 +1252,13 @@ var VirtualRenderer = function(container, theme) {
* [Sets a new theme for the editor. `theme` should exist, and be a directory path, like `ace/theme/textmate`.]{: #VirtualRenderer.setTheme}
* @param {String} theme The path to a theme
*
*
*
**/
this.setTheme = function(theme) {
var _self = this;
this.$themeValue = theme;
_self._dispatchEvent('themeChange',{theme:theme});
if (!theme || typeof theme == "string") {
var moduleName = theme || "ace/theme/textmate";
config.loadModule(["theme", moduleName], afterLoad);
@ -1295,7 +1292,7 @@ var VirtualRenderer = function(container, theme) {
_self.$size.width = 0;
_self.onResize();
}
_self._dispatchEvent('themeLoaded',{theme:theme});
}
};
@ -1316,7 +1313,7 @@ var VirtualRenderer = function(container, theme) {
* [Adds a new class, `style`, to the editor.]{: #VirtualRenderer.setStyle}
* @param {String} style A class name
*
*
*
**/
this.setStyle = function setStyle(style, include) {
dom.setCssClass(this.container, style, include != false);
@ -1326,14 +1323,14 @@ var VirtualRenderer = function(container, theme) {
* [Removes the class `style` from the editor.]{: #VirtualRenderer.unsetStyle}
* @param {String} style A class name
*
*
*
**/
this.unsetStyle = function unsetStyle(style) {
dom.removeCssClass(this.container, style);
};
/**
*
*
* Destroys the text and cursor layers for this renderer.
**/
this.destroy = function() {