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

Merge pull request #1226 from ajaxorg/options

Browse source 
better way for managing options
This commit is contained in:
Lennart Kats 2013-02-14 00:57:08 -08:00
commit 36554a61ca
11 changed files with 379 additions and 233 deletions
Download patch file Download diff file Expand all files Collapse all files

6
demo/kitchen-sink/statusbar.js
View file

@ -9,14 +9,14 @@ var StatusBar = function(editor, parentNode) {
this.element.style.cssText = "color: gray; position:absolute; right:0; border-left:1px solid";
parentNode.appendChild(this.element);
var statusUpdate = lang.deferredCall(function(){
var statusUpdate = lang.delayedCall(function(){
this.updateStatus(editor)
}.bind(this));
editor.on("changeStatus", function() {
statusUpdate.schedule(50);
statusUpdate.schedule(100);
});
editor.on("changeSelection", function() {
statusUpdate.schedule(50);
statusUpdate.schedule(100);
});
};

86
lib/ace/config.js
View file

@ -169,4 +169,90 @@ function deHyphenate(str) {
return str.replace(/-(.)/g, function(m, m1) { return m1.toUpperCase(); });
}
var optionsProvider = {
setOptions: function(optList) {
Object.keys(optList).forEach(function(key) {
this.setOption(key, optList[key]);
}, this);
},
getOptions: function(a) {
var b = {};
Object.keys(a).forEach(function(key) {
b[key] = this.getOption(key);
}, this);
return b;
},
setOption: function(name, value) {
if (this["$" + name] === value)
return;
var opt = this.$options[name];
if (!opt)
return undefined;
if (opt.forwardTo)
return this[opt.forwardTo] && this[opt.forwardTo].setOption(name, value);
if (!opt.handlesSet)
this["$" + name] = value;
if (opt && opt.set)
opt.set.call(this, value);
},
getOption: function(name) {
var opt = this.$options[name];
if (!opt)
return undefined;
if (opt.forwardTo)
return this[opt.forwardTo] && this[opt.forwardTo].getOption(name);
return opt && opt.get ? opt.get.call(this) : this["$" + name];
}
};
var defaultOptions = {};
/*
* option {name, value, initialValue, setterName, set, get }
*/
exports.defineOptions = function(obj, path, options) {
if (!obj.$options)
defaultOptions[path] = obj.$options = {};
Object.keys(options).forEach(function(key) {
var opt = options[key];
if (typeof opt == "string")
opt = {forwardTo: opt};
opt.name || (opt.name = key);
obj.$options[opt.name] = opt;
if ("initialValue" in opt)
obj["$" + opt.name] = opt.initialValue;
});
// implement option provider interface
oop.implement(obj, optionsProvider);
return this;
};
exports.resetOptions = function(obj) {
Object.keys(obj.$options).forEach(function(key) {
var opt = obj.$options[key];
if ("value" in opt)
obj.setOption(key, opt.value);
});
};
exports.setDefaultValue = function(path, name, value) {
var opts = defaultOptions[path] || (defaultOptions[path] = {});
if (opts[name]) {
if (opts.forwardTo)
exports.setDefaultValue(opts.forwardTo, name, value)
else
opts[name].value = value;
}
};
exports.setDefaultValues = function(path, optionHash) {
Object.keys(optionHash).forEach(function(key) {
exports.setDefaultValue(path, key, optionHash[key]);
});
};
});

49
lib/ace/config_test.js
View file

@ -40,7 +40,7 @@ var assert = require("./test/assertions");
module.exports = {
"test path resolution" : function() {
"test: path resolution" : function() {
config.set("packaged", "true");
var url = config.moduleUrl("kr_theme", "theme");
assert.equal(url, "theme-kr.js");
@ -61,6 +61,53 @@ module.exports = {
assert.equal(url, "a/b1.js");
assert.equal();
},
"test: define options" : function() {
var o = {};
config.defineOptions(o, "test_object", {
opt1: {
set: function(val) {
this.x = val;
},
value: 7,
},
initialValue: {
set: function(val) {
this.x = val;
},
initialValue: 8,
},
opt2: {
get: function(val) {
return this.x;
}
},
forwarded: "model"
});
o.model = {};
config.defineOptions(o.model, "model", {
forwarded: {value: 1}
});
config.resetOptions(o);
config.resetOptions(o.model);
assert.equal(o.getOption("opt1"), 7);
assert.equal(o.getOption("opt2"), 7);
o.setOption("opt1", 8);
assert.equal(o.getOption("opt1"), 8);
assert.equal(o.getOption("opt2"), 8);
assert.equal(o.getOption("forwarded"), 1);
assert.equal(o.getOption("new"), undefined);
o.setOption("new", 0);
assert.equal(o.getOption("new"), undefined);
assert.equal(o.getOption("initialValue"), 8);
o.setOption("initialValue", 7);
assert.equal(o.getOption("opt2"), 7);
}
};

101
lib/ace/edit_session.js
View file

@ -42,6 +42,7 @@ var Range = require("./range").Range;
var Document = require("./document").Document;
var BackgroundTokenizer = require("./background_tokenizer").BackgroundTokenizer;
var SearchHighlight = require("./search_highlight").SearchHighlight;
var config = require("./config");
/**
*
@ -175,6 +176,9 @@ var EditSession = function(text, mode) {
this.selection = new Selection(this);
this.setMode(mode);
config.resetOptions(this);
config._emit("session", this);
};
@ -452,44 +456,28 @@ var EditSession = function(text, mode) {
}
};
this.$useSoftTabs = true;
/**
/**
* Pass `true` to enable the use of soft tabs. Soft tabs means you're using spaces instead of the tab character (`'\t'`).
* @param {Boolean} useSoftTabs Value indicating whether or not to use soft tabs
*
*
*
**/
this.setUseSoftTabs = function(useSoftTabs) {
if (this.$useSoftTabs === useSoftTabs) return;
this.$useSoftTabs = useSoftTabs;
this.setUseSoftTabs = function(val) {
this.setOption("useSoftTabs", val);
};
/**
* Returns `true` if soft tabs are being used, `false` otherwise.
* @returns {Boolean}
**/
this.getUseSoftTabs = function() {
return this.$useSoftTabs;
return this.$useSoftTabs;
};
this.$tabSize = 4;
/**
* Set the number of spaces that define a soft tab; for example, passing in `4` transforms the soft tabs to be equivalent to four spaces. This function also emits the `changeTabSize` event.
* @param {Number} tabSize The new tab size
*
*
**/
this.setTabSize = function(tabSize) {
if (isNaN(tabSize) || this.$tabSize === tabSize) return;
this.$modified = true;
this.$rowLengthCache = [];
this.$tabSize = tabSize;
this._emit("changeTabSize");
this.setOption("tabSize", tabSize)
};
/**
* Returns the current tab size.
**/
@ -864,30 +852,17 @@ var EditSession = function(text, mode) {
return this.doc.getNewLineMode();
};
this.$useWorker = true;
/**
* Identifies if you want to use a worker for the `EditSession`.
* @param {Boolean} useWorker Set to `true` to use a worker
*
**/
this.setUseWorker = function(useWorker) {
if (this.$useWorker == useWorker)
return;
this.$useWorker = useWorker;
this.$stopWorker();
if (useWorker)
this.$startWorker();
};
this.setUseWorker = function(useWorker) { this.setOption("useWorker", useWorker); };
/**
* Returns `true` if workers are being used.
**/
this.getUseWorker = function() {
return this.$useWorker;
};
this.getUseWorker = function() { return this.$useWorker; };
/**
* Reloads all the tokens on the current session. This function calls [[BackgroundTokenizer.start `BackgroundTokenizer.start ()`]] to all the rows; it also emits the `'tokenizerUpdate'` event.
@ -2403,5 +2378,59 @@ var EditSession = function(text, mode) {
require("./edit_session/folding").Folding.call(EditSession.prototype);
require("./edit_session/bracket_match").BracketMatch.call(EditSession.prototype);
config.defineOptions(EditSession.prototype, "session", {
wrap: {
set: function(value) {
if (!value || value == "off")
value = false;
else if (value == "free")
value = true;
else if (typeof value == "string")
value = parseInt(value, 10) || false;
if (!value) {
this.setUseWrapMode(false);
} else {
var col = typeof value == "number" && value;
this.setUseWrapMode(true);
this.setWrapLimitRange(value, value);
}
this.$wrap = value;
},
get: function() {
return this.getUseWrapMode() ? this.getWrapLimitRange().min || "free" : "off";
},
handlesSet: true
},
firstLineNumber: {
set: function() {this._emit("changeBreakpoint");},
initialValue: 1
},
useWorker: {
set: function(useWorker) {
this.$useWorker = useWorker;
this.$stopWorker();
if (useWorker)
this.$startWorker();
},
initialValue: true
},
useSoftTabs: {initialValue: true},
tabSize: {
set: function(tabSize) {
if (isNaN(tabSize) || this.$tabSize === tabSize) return;
this.$modified = true;
this.$rowLengthCache = [];
this.$tabSize = tabSize;
this._emit("changeTabSize");
},
initialValue: 4,
handlesSet: true
}
});
exports.EditSession = EditSession;
});

170
lib/ace/editor.js
View file

@ -88,6 +88,8 @@ var Editor = function(renderer, session) {
});
this.setSession(session || new EditSession(""));
config.resetOptions(this);
config._emit("editor", this);
};
(function(){
@ -805,12 +807,9 @@ var Editor = function(renderer, session) {
/**
* Sets how fast the mouse scrolling should do.
* @param {Number} speed A value indicating the new speed (in milliseconds)
*
*
*
**/
this.setScrollSpeed = function(speed) {
this.$mouseHandler.setScrollSpeed(speed);
this.setOption("scrollSpeed", speed);
};
/**
@ -818,18 +817,15 @@ var Editor = function(renderer, session) {
* @returns {Number}
**/
this.getScrollSpeed = function() {
return this.$mouseHandler.getScrollSpeed();
return this.getOption("scrollSpeed");
};
/**
* Sets the delay (in milliseconds) of the mouse drag.
* @param {Number} dragDelay A value indicating the new delay
*
*
*
**/
this.setDragDelay = function(dragDelay) {
this.$mouseHandler.setDragDelay(dragDelay);
this.setOption("dragDelay", dragDelay);
};
/**
@ -837,37 +833,21 @@ var Editor = function(renderer, session) {
* @returns {Number}
**/
this.getDragDelay = function() {
return this.$mouseHandler.getDragDelay();
return this.getOption("dragDelay");
};
this.$selectionStyle = "line";
/**
* Emitted when the selection style changes, via [[Editor.setSelectionStyle]].
* @event changeSelectionStyle
* @param {Object} data Contains one property, `data`, which indicates the new selection style
*
*
*
**/
/**
* Indicates how selections should occur.
*
* By default, selections are set to "line". There are no other styles at the moment,
* although this code change in the future.
* Draw selection markers spanning whole line, or only over selected text. Default value is "line"
* @param {String} style The new selection style "line"|"text"
*
* This function also emits the `'changeSelectionStyle'` event.
*
* @param {String} style The new selection style
*
*
**/
this.setSelectionStyle = function(style) {
if (this.$selectionStyle == style) return;
this.$selectionStyle = style;
this.onSelectionChange();
this._emit("changeSelectionStyle", {data: style});
this.setSelectionStyle = function(val) {
this.setOption("selectionStyle", val);
};
/**
@ -875,58 +855,37 @@ var Editor = function(renderer, session) {
* @returns {String}
**/
this.getSelectionStyle = function() {
return this.$selectionStyle;
return this.getOption("selectionStyle");
};
this.$highlightActiveLine = true;
/**
* Determines whether or not the current line should be highlighted.
* @param {Boolean} shouldHighlight Set to `true` to highlight the current line
*
**/
this.setHighlightActiveLine = function(shouldHighlight) {
if (this.$highlightActiveLine == shouldHighlight)
return;
this.$highlightActiveLine = shouldHighlight;
this.$updateHighlightActiveLine();
this.setOption("highlightActiveLine", shouldHighlight);
};
/**
* Returns `true` if current lines are always highlighted.
* @return {Boolean}
**/
this.getHighlightActiveLine = function() {
return this.$highlightActiveLine;
return this.getOption("highlightActiveLine");
};
this.$highlightGutterLine = true;
this.setHighlightGutterLine = function(shouldHighlight) {
if (this.$highlightGutterLine == shouldHighlight)
return;
this.renderer.setHighlightGutterLine(shouldHighlight);
this.$highlightGutterLine = shouldHighlight;
this.setOption("highlightGutterLine", shouldHighlight);
};
this.getHighlightGutterLine = function() {
return this.$highlightGutterLine;
return this.getOption("highlightGutterLine");
};
this.$highlightSelectedWord = true;
/**
* Determines if the currently selected word should be highlighted.
* @param {Boolean} shouldHighlight Set to `true` to highlight the currently selected word
*
*
**/
this.setHighlightSelectedWord = function(shouldHighlight) {
if (this.$highlightSelectedWord == shouldHighlight)
return;
this.$highlightSelectedWord = shouldHighlight;
this.$onSelectionChange();
this.setOption("highlightSelectedWord", shouldHighlight);
};
/**
@ -949,7 +908,6 @@ var Editor = function(renderer, session) {
* If `showInvisibiles` is set to `true`, invisible characters—like spaces or new lines—are show in the editor.
* @param {Boolean} showInvisibles Specifies whether or not to show invisible characters
*
*
**/
this.setShowInvisibles = function(showInvisibles) {
this.renderer.setShowInvisibles(showInvisibles);
@ -975,7 +933,6 @@ var Editor = function(renderer, session) {
* If `showPrintMargin` is set to `true`, the print margin is shown in the editor.
* @param {Boolean} showPrintMargin Specifies whether or not to show the print margin
*
*
**/
this.setShowPrintMargin = function(showPrintMargin) {
this.renderer.setShowPrintMargin(showPrintMargin);
@ -993,8 +950,6 @@ var Editor = function(renderer, session) {
* Sets the column defining where the print margin should be.
* @param {Number} showPrintMargin Specifies the new print margin
*
*
*
**/
this.setPrintMarginColumn = function(showPrintMargin) {
this.renderer.setPrintMarginColumn(showPrintMargin);
@ -1008,17 +963,13 @@ var Editor = function(renderer, session) {
return this.renderer.getPrintMarginColumn();
};
this.$readOnly = false;
/**
* If `readOnly` is true, then the editor is set to read-only mode, and none of the content can change.
* @param {Boolean} readOnly Specifies whether the editor can be modified or not
*
*
**/
this.setReadOnly = function(readOnly) {
this.$readOnly = readOnly;
this.textInput.setReadOnly(readOnly);
this.renderer.$cursorLayer.setBlinking(!readOnly);
this.setOption("readOnly", readOnly);
};
/**
@ -1026,19 +977,16 @@ var Editor = function(renderer, session) {
* @returns {Boolean}
**/
this.getReadOnly = function() {
return this.$readOnly;
return this.getOption("readOnly");
};
this.$modeBehaviours = true;
/**
* Specifies whether to use behaviors or not. ["Behaviors" in this case is the auto-pairing of special characters, like quotation marks, parenthesis, or brackets.]{: #BehaviorsDef}
* @param {Boolean} enabled Enables or disables behaviors
*
*
**/
this.setBehavioursEnabled = function (enabled) {
this.$modeBehaviours = enabled;
this.setOption("behavioursEnabled", enabled);
};
/**
@ -1047,11 +995,9 @@ var Editor = function(renderer, session) {
* @returns {Boolean}
**/
this.getBehavioursEnabled = function () {
return this.$modeBehaviours;
return this.getOption("behavioursEnabled");
};
this.$modeWrapBehaviours = true;
/**
* Specifies whether to use wrapping behaviors or not, i.e. automatically wrapping the selection with characters such as brackets
* when such a character is typed in.
@ -1059,54 +1005,44 @@ var Editor = function(renderer, session) {
*
**/
this.setWrapBehavioursEnabled = function (enabled) {
this.$modeWrapBehaviours = enabled;
this.setOption("wrapBehavioursEnabled", enabled);
};
/**
* Returns `true` if the wrapping behaviors are currently enabled.
**/
this.getWrapBehavioursEnabled = function () {
return this.$modeWrapBehaviours;
return this.getOption("wrapBehavioursEnabled");
};
/**
* Indicates whether the fold widgets are shown or not.
* Indicates whether the fold widgets should be shown or not.
* @param {Boolean} show Specifies whether the fold widgets are shown
*
*
**/
this.setShowFoldWidgets = function(show) {
var gutter = this.renderer.$gutterLayer;
if (gutter.getShowFoldWidgets() == show)
return;
this.setOption("showFoldWidgets", show);
this.renderer.$gutterLayer.setShowFoldWidgets(show);
this.$showFoldWidgets = show;
this.renderer.updateFull();
};
/**
* Returns `true` if the fold widgets are shown.
* @return {Boolean}
**/
this.getShowFoldWidgets = function() {
return this.renderer.$gutterLayer.getShowFoldWidgets();
return this.getOption("showFoldWidgets");
};
this.setFadeFoldWidgets = function(show) {
this.renderer.setFadeFoldWidgets(show);
this.setFadeFoldWidgets = function(fade) {
this.setOption("fadeFoldWidgets", fade);
};
this.getFadeFoldWidgets = function() {
return this.renderer.getFadeFoldWidgets();
return this.getOption("fadeFoldWidgets");
};
/**
* Removes words of text from the editor. A "word" is defined as a string of characters bookended by whitespace.
* @param {String} dir The direction of the deletion to occur, either "left" or "right"
*
*
*
**/
this.remove = function(dir) {
if (this.selection.isEmpty()){
@ -2174,5 +2110,53 @@ var Editor = function(renderer, session) {
}).call(Editor.prototype);
config.defineOptions(Editor.prototype, "editor", {
selectionStyle: {
set: function(style) {
this.onSelectionChange();
this._emit("changeSelectionStyle", {data: style});
},
initialValue: "line",
},
highlightActiveLine: {
set: function() {this.$updateHighlightActiveLine();},
initialValue: true
},
highlightSelectedWord: {
set: function(shouldHighlight) {this.$onSelectionChange();},
initialValue: true
},
readOnly: {
set: function(readOnly) {
this.textInput.setReadOnly(readOnly);
this.renderer.$cursorLayer.setBlinking(!readOnly);
},
initialValue: false
},
behavioursEnabled: {initialValue: true},
wrapBehavioursEnabled: {initialValue: true},
highlightGutterLine: "renderer",
animatedScroll: "renderer",
showInvisibles: "renderer",
showPrintMargin: "renderer",
printMarginColumn: "renderer",
fadeFoldWidgets: "renderer",
showFoldWidgets: "renderer",
showGutter: "renderer",
displayIndentGuides: "renderer",
scrollSpeed: "$mouseHandler",
dragDelay: "$mouseHandler",
focusTimout: "$mouseHandler",
firstLineNumber: "session",
useWorker: "session",
useSoftTabs: "session",
tabSize: "session",
wrap: "session"
});
exports.Editor = Editor;
});

2
lib/ace/keyboard/hash_handler.js
View file

@ -31,7 +31,7 @@
define(function(require, exports, module) {
"use strict";
var keyUtil = require("../lib/keys");
var keyUtil = require("../lib/keys");
function HashHandler(config, platform) {
this.platform = platform;

3
lib/ace/layer/gutter.js
View file

@ -126,6 +126,7 @@ var Gutter = function(parentEl) {
var foldWidgets = this.$showFoldWidgets && this.session.foldWidgets;
var breakpoints = this.session.$breakpoints;
var decorations = this.session.$decorations;
var firstLineNumber = this.session.$firstLineNumber;
var lastLineNumber = 0;
while (true) {
@ -142,7 +143,7 @@ var Gutter = function(parentEl) {
"<div class='ace_gutter-cell ",
breakpoints[i] || "", decorations[i] || "", annotation.className,
"' style='height:", this.session.getRowLength(i) * config.lineHeight, "px;'>",
lastLineNumber = i + 1
lastLineNumber = i + firstLineNumber
);
if (foldWidgets) {

12
lib/ace/mouse/default_handlers.js
View file

@ -34,7 +34,7 @@ define(function(require, exports, module) {
var dom = require("../lib/dom");
var useragent = require("../lib/useragent");
var DRAG_OFFSET = 5; // pixels
var DRAG_OFFSET = 0; // pixels
function DefaultHandlers(mouseHandler) {
mouseHandler.$clickSelection = null;
@ -55,8 +55,6 @@ function DefaultHandlers(mouseHandler) {
mouseHandler.selectByLines = this.extendSelectionBy.bind(mouseHandler, "getLineRange");
mouseHandler.selectByWords = this.extendSelectionBy.bind(mouseHandler, "getWordRange");
mouseHandler.$focusWaitTimout = 250;
}
(function() {
@ -86,7 +84,7 @@ function DefaultHandlers(mouseHandler) {
// selection
if (inSelection && !editor.isFocused()) {
editor.focus();
if (this.$focusWaitTimout && !this.$clickSelection) {
if (this.$focusTimout && !this.$clickSelection) {
this.setState("focusWait");
this.captureMouse(ev);
return ev.preventDefault();
@ -205,8 +203,8 @@ function DefaultHandlers(mouseHandler) {
var distance = calcDistance(this.mousedownEvent.x, this.mousedownEvent.y, this.x, this.y);
var time = (new Date()).getTime();
if (distance > DRAG_OFFSET ||time - this.mousedownEvent.time > this.$focusWaitTimout)
this.startSelect();
if (distance > DRAG_OFFSET || time - this.mousedownEvent.time > this.$focusTimout)
this.startSelect(this.mousedownEvent.getDocumentPosition());
};
this.dragWait = function(e) {
@ -216,7 +214,7 @@ function DefaultHandlers(mouseHandler) {
if (distance > DRAG_OFFSET) {
this.startSelect(this.mousedownEvent.getDocumentPosition());
} else if (time - this.mousedownEvent.time > editor.getDragDelay()) {
} else if (time - this.mousedownEvent.time > editor.$mouseHandler.$dragDelay) {
this.startDrag();
}
};

27
lib/ace/mouse/mouse_handler.js
View file

@ -37,6 +37,7 @@ var DefaultHandlers = require("./default_handlers").DefaultHandlers;
var DefaultGutterHandler = require("./default_gutter_handler").GutterHandler;
var MouseEvent = require("./mouse_event").MouseEvent;
var DragdropHandler = require("./dragdrop").DragdropHandler;
var config = require("../config");
var MouseHandler = function(editor) {
this.editor = editor;
@ -64,29 +65,10 @@ var MouseHandler = function(editor) {
};
(function() {
this.$scrollSpeed = 1;
this.setScrollSpeed = function(speed) {
this.$scrollSpeed = speed;
};
this.getScrollSpeed = function() {
return this.$scrollSpeed;
};
this.onMouseEvent = function(name, e) {
this.editor._emit(name, new MouseEvent(e, this.editor));
};
this.$dragDelay = 250;
this.setDragDelay = function(dragDelay) {
this.$dragDelay = dragDelay;
};
this.getDragDelay = function() {
return this.$dragDelay;
};
this.onMouseMove = function(name, e) {
// optimization, because mousemove doesn't have a default handler.
var listeners = this.editor._eventRegistry && this.editor._eventRegistry.mousemove;
@ -157,5 +139,12 @@ var MouseHandler = function(editor) {
};
}).call(MouseHandler.prototype);
config.defineOptions(MouseHandler.prototype, "mouseHandler", {
scrollSpeed: {initialValue: 1},
dragDelay: {initialValue: 150},
focusTimout: {initialValue: 0}
});
exports.MouseHandler = MouseHandler;
});

1
lib/ace/test/all_browser.js
View file

@ -13,6 +13,7 @@ var testNames = [
"ace/anchor_test",
"ace/background_tokenizer_test",
"ace/commands/command_manager_test",
"ace/config_test",
"ace/document_test",
"ace/edit_session_test",
"ace/editor_change_document_test",

155
lib/ace/virtual_renderer.js
View file

@ -94,7 +94,6 @@ var VirtualRenderer = function(container, theme) {
this.content.className = "ace_content";
this.scroller.appendChild(this.content);
this.setHighlightGutterLine(true);
this.$gutterLayer = new GutterLayer(this.$gutter);
this.$gutterLayer.on("changeGutterWidth", this.onGutterResize.bind(this));
@ -111,8 +110,6 @@ var VirtualRenderer = function(container, theme) {
this.$horizScroll = false;
this.$horizScrollAlwaysVisible = false;
this.$animatedScroll = false;
this.scrollBar = new ScrollBar(this.container);
this.scrollBar.addEventListener("scroll", function(e) {
if (!_self.$inScrollAnimation)
@ -167,10 +164,11 @@ var VirtualRenderer = function(container, theme) {
this.updateCharacterSize();
this.setPadding(4);
config.resetOptions(this);
config._emit("renderer", this);
};
(function() {
this.showGutter = true;
this.CHANGE_CURSOR = 1;
this.CHANGE_MARKER = 2;
@ -321,7 +319,7 @@ var VirtualRenderer = function(container, theme) {
if (width && (force || this.resizing > 1 || size.width != width)) {
size.width = width;
var gutterWidth = this.showGutter ? this.$gutter.offsetWidth : 0;
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.right = this.scrollBar.getWidth() + "px";
@ -341,7 +339,7 @@ var VirtualRenderer = function(container, theme) {
this.onGutterResize = function() {
var width = this.$size.width;
var gutterWidth = this.showGutter ? this.$gutter.offsetWidth : 0;
var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
this.scroller.style.left = gutterWidth + "px";
this.$size.scrollerWidth = Math.max(0, width - gutterWidth - this.scrollBar.getWidth());
@ -363,15 +361,12 @@ var VirtualRenderer = function(container, theme) {
* Identifies whether you want to have an animated scroll or not.
* @param {Boolean} shouldAnimate Set to `true` to show animated scrolls
*
*
*
**/
this.setAnimatedScroll = function(shouldAnimate){
this.$animatedScroll = shouldAnimate;
this.setOption("animatedScroll", shouldAnimate);
};
/**
*
* Returns whether an animated scroll happens or not.
* @returns {Boolean}
**/
@ -383,44 +378,33 @@ var VirtualRenderer = function(container, theme) {
* Identifies whether you want to show invisible characters or not.
* @param {Boolean} showInvisibles Set to `true` to show invisibles
*
*
*
**/
this.setShowInvisibles = function(showInvisibles) {
if (this.$textLayer.setShowInvisibles(showInvisibles))
this.$loop.schedule(this.CHANGE_TEXT);
this.setOption("showInvisibles", showInvisibles);
};
/**
*
* Returns whether invisible characters are being shown or not.
* @returns {Boolean}
**/
this.getShowInvisibles = function() {
return this.$textLayer.showInvisibles;
return this.getOption("showInvisibles");
};
this.getDisplayIndentGuides = function() {
return this.$textLayer.displayIndentGuides;
return this.getOption("displayIndentGuides");
};
this.setDisplayIndentGuides = function(display) {
if (this.$textLayer.setDisplayIndentGuides(display))
this.$loop.schedule(this.CHANGE_TEXT);
this.setOption("displayIndentGuides", display);
};
this.$showPrintMargin = true;
/**
* Identifies whether you want to show the print margin or not.
* @param {Boolean} showPrintMargin Set to `true` to show the print margin
*
*
*
**/
this.setShowPrintMargin = function(showPrintMargin) {
this.$showPrintMargin = showPrintMargin;
this.$updatePrintMargin();
this.setOption("showPrintMargin", showPrintMargin);
};
/**
@ -428,87 +412,56 @@ var VirtualRenderer = function(container, theme) {
* @returns {Boolean}
**/
this.getShowPrintMargin = function() {
return this.$showPrintMargin;
this.getOption("showPrintMargin");
};
this.$printMarginColumn = 80;
/**
* Identifies whether you want to show the print margin column or not.
* @param {Boolean} showPrintMargin Set to `true` to show the print margin column
*
*
*
**/
this.setPrintMarginColumn = function(showPrintMargin) {
this.$printMarginColumn = showPrintMargin;
this.$updatePrintMargin();
this.setOption("printMarginColumn", showPrintMargin);
};
/**
*
* Returns whether the print margin column is being shown or not.
* @returns {Boolean}
**/
this.getPrintMarginColumn = function() {
return this.$printMarginColumn;
return this.getOption("printMarginColumn");
};
/**
*
* Returns `true` if the gutter is being shown.
* @returns {Boolean}
**/
this.getShowGutter = function(){
return this.showGutter;
return this.getOption("showGutter");
};
/**
* Identifies whether you want to show the gutter or not.
* @param {Boolean} show Set to `true` to show the gutter
*
*
**/
this.setShowGutter = function(show){
if(this.showGutter === show)
return;
this.$gutter.style.display = show ? "block" : "none";
this.showGutter = show;
this.onResize(true);
return this.setOption("showGutter", show);
};
this.getFadeFoldWidgets = function(){
return dom.hasCssClass(this.$gutter, "ace_fade-fold-widgets");
return this.getOption("fadeFoldWidgets")
};
this.setFadeFoldWidgets = function(show) {
if (show)
dom.addCssClass(this.$gutter, "ace_fade-fold-widgets");
else
dom.removeCssClass(this.$gutter, "ace_fade-fold-widgets");
this.setOption("fadeFoldWidgets", show);
};
this.$highlightGutterLine = false;
this.setHighlightGutterLine = function(shouldHighlight) {
if (this.$highlightGutterLine == shouldHighlight)
return;
this.$highlightGutterLine = shouldHighlight;
if (!this.$gutterLineHighlight) {
this.$gutterLineHighlight = dom.createElement("div");
this.$gutterLineHighlight.className = "ace_gutter-active-line";
this.$gutter.appendChild(this.$gutterLineHighlight);
return;
}
this.$gutterLineHighlight.style.display = shouldHighlight ? "" : "none";
// if cursorlayer have never been updated there's nothing on screen to update
if (this.$cursorLayer.$pixelPos)
this.$updateGutterLineHighlight();
this.setOption("highlightGutterLine", shouldHighlight);
};
this.getHighlightGutterLine = function() {
return this.$highlightGutterLine;
return this.getOption("highlightGutterLine");
};
this.$updateGutterLineHighlight = function() {
@ -706,7 +659,7 @@ var VirtualRenderer = function(container, theme) {
// update scrollbar first to not lose scroll position when gutter calls resize
this.$updateScrollBar();
this.$textLayer.update(this.layerConfig);
if (this.showGutter)
if (this.$showGutter)
this.$gutterLayer.update(this.layerConfig);
this.$markerBack.update(this.layerConfig);
this.$markerFront.update(this.layerConfig);
@ -724,7 +677,7 @@ var VirtualRenderer = function(container, theme) {
else
this.$textLayer.scrollLines(this.layerConfig);
if (this.showGutter)
if (this.$showGutter)
this.$gutterLayer.update(this.layerConfig);
this.$markerBack.update(this.layerConfig);
this.$markerFront.update(this.layerConfig);
@ -736,15 +689,15 @@ var VirtualRenderer = function(container, theme) {
if (changes & this.CHANGE_TEXT) {
this.$textLayer.update(this.layerConfig);
if (this.showGutter)
if (this.$showGutter)
this.$gutterLayer.update(this.layerConfig);
}
else if (changes & this.CHANGE_LINES) {
if (this.$updateLines() || (changes & this.CHANGE_GUTTER) && this.showGutter)
if (this.$updateLines() || (changes & this.CHANGE_GUTTER) && this.$showGutter)
this.$gutterLayer.update(this.layerConfig);
}
else if (changes & this.CHANGE_TEXT || changes & this.CHANGE_GUTTER) {
if (this.showGutter)
if (this.$showGutter)
this.$gutterLayer.update(this.layerConfig);
}
@ -852,7 +805,7 @@ var VirtualRenderer = function(container, theme) {
// if the last row is unknown -> redraw everything
if (lastRow === Infinity) {
if (this.showGutter)
if (this.$showGutter)
this.$gutterLayer.update(layerConfig);
this.$textLayer.update(layerConfig);
return;
@ -1374,5 +1327,63 @@ var VirtualRenderer = function(container, theme) {
}).call(VirtualRenderer.prototype);
config.defineOptions(VirtualRenderer.prototype, "renderer", {
animatedScroll: {initialValue: false},
showInvisibles: {
set: function(value) {
if (this.$textLayer.setShowInvisibles(value))
this.$loop.schedule(this.CHANGE_TEXT);
},
initialValue: false
},
showPrintMargin: {
set: function() { this.$updatePrintMargin(); },
initialValue: true
},
printMarginColumn: {
set: function() { this.$updatePrintMargin(); },
initialValue: 80
},
showGutter: {
set: function(show){
this.$gutter.style.display = show ? "block" : "none";
this.onGutterResize();
},
initialValue: true
},
fadeFoldWidgets: {
set: function(show) {
dom.setCssClass(this.$gutter, "ace_fade-fold-widgets", show);
},
initialValue: false
},
showFoldWidgets: {
set: function(show) {this.$gutterLayer.setShowFoldWidgets(show)},
initialValue: true
},
displayIndentGuides: {
set: function(show) {
if (this.$textLayer.setDisplayIndentGuides(show))
this.$loop.schedule(this.CHANGE_TEXT);
},
initialValue: true
},
highlightGutterLine: {
set: function(shouldHighlight) {
if (!this.$gutterLineHighlight) {
this.$gutterLineHighlight = dom.createElement("div");
this.$gutterLineHighlight.className = "ace_gutter_active_line";
this.$gutter.appendChild(this.$gutterLineHighlight);
return;
}
this.$gutterLineHighlight.style.display = shouldHighlight ? "" : "none";
this.$cursorLayer.$pixelPos && this.$updateGutterLineHighlight();
},
initialValue: false
}
});
exports.VirtualRenderer = VirtualRenderer;
});