virtual_renderer.js 59 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753
  1. /* ***** BEGIN LICENSE BLOCK *****
  2. * Distributed under the BSD license:
  3. *
  4. * Copyright (c) 2010, Ajax.org B.V.
  5. * All rights reserved.
  6. *
  7. * Redistribution and use in source and binary forms, with or without
  8. * modification, are permitted provided that the following conditions are met:
  9. * * Redistributions of source code must retain the above copyright
  10. * notice, this list of conditions and the following disclaimer.
  11. * * Redistributions in binary form must reproduce the above copyright
  12. * notice, this list of conditions and the following disclaimer in the
  13. * documentation and/or other materials provided with the distribution.
  14. * * Neither the name of Ajax.org B.V. nor the
  15. * names of its contributors may be used to endorse or promote products
  16. * derived from this software without specific prior written permission.
  17. *
  18. * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
  19. * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  20. * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  21. * DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
  22. * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  23. * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  24. * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  25. * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  26. * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
  27. * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28. *
  29. * ***** END LICENSE BLOCK ***** */
  30. define(function(require, exports, module) {
  31. "use strict";
  32. var oop = require("./lib/oop");
  33. var dom = require("./lib/dom");
  34. var config = require("./config");
  35. var useragent = require("./lib/useragent");
  36. var GutterLayer = require("./layer/gutter").Gutter;
  37. var MarkerLayer = require("./layer/marker").Marker;
  38. var TextLayer = require("./layer/text").Text;
  39. var CursorLayer = require("./layer/cursor").Cursor;
  40. var HScrollBar = require("./scrollbar").HScrollBar;
  41. var VScrollBar = require("./scrollbar").VScrollBar;
  42. var RenderLoop = require("./renderloop").RenderLoop;
  43. var FontMetrics = require("./layer/font_metrics").FontMetrics;
  44. var EventEmitter = require("./lib/event_emitter").EventEmitter;
  45. var editorCss = require("./requirejs/text!./css/editor.css");
  46. dom.importCssString(editorCss, "ace_editor.css");
  47. /**
  48. * The class that is responsible for drawing everything you see on the screen!
  49. * @related editor.renderer
  50. * @class VirtualRenderer
  51. **/
  52. /**
  53. * Constructs a new `VirtualRenderer` within the `container` specified, applying the given `theme`.
  54. * @param {DOMElement} container The root element of the editor
  55. * @param {String} theme The starting theme
  56. *
  57. * @constructor
  58. **/
  59. var VirtualRenderer = function(container, theme) {
  60. var _self = this;
  61. this.container = container || dom.createElement("div");
  62. // TODO: this breaks rendering in Cloud9 with multiple ace instances
  63. // // Imports CSS once per DOM document ('ace_editor' serves as an identifier).
  64. // dom.importCssString(editorCss, "ace_editor", container.ownerDocument);
  65. // in IE <= 9 the native cursor always shines through
  66. this.$keepTextAreaAtCursor = !useragent.isOldIE;
  67. dom.addCssClass(this.container, "ace_editor");
  68. this.setTheme(theme);
  69. this.$gutter = dom.createElement("div");
  70. this.$gutter.className = "ace_gutter";
  71. this.container.appendChild(this.$gutter);
  72. this.scroller = dom.createElement("div");
  73. this.scroller.className = "ace_scroller";
  74. this.container.appendChild(this.scroller);
  75. this.content = dom.createElement("div");
  76. this.content.className = "ace_content";
  77. this.scroller.appendChild(this.content);
  78. this.$gutterLayer = new GutterLayer(this.$gutter);
  79. this.$gutterLayer.on("changeGutterWidth", this.onGutterResize.bind(this));
  80. this.$markerBack = new MarkerLayer(this.content);
  81. var textLayer = this.$textLayer = new TextLayer(this.content);
  82. this.canvas = textLayer.element;
  83. this.$markerFront = new MarkerLayer(this.content);
  84. this.$cursorLayer = new CursorLayer(this.content);
  85. // Indicates whether the horizontal scrollbar is visible
  86. this.$horizScroll = false;
  87. this.$vScroll = false;
  88. this.scrollBar =
  89. this.scrollBarV = new VScrollBar(this.container, this);
  90. this.scrollBarH = new HScrollBar(this.container, this);
  91. this.scrollBarV.addEventListener("scroll", function(e) {
  92. if (!_self.$scrollAnimation)
  93. _self.session.setScrollTop(e.data - _self.scrollMargin.top);
  94. });
  95. this.scrollBarH.addEventListener("scroll", function(e) {
  96. if (!_self.$scrollAnimation)
  97. _self.session.setScrollLeft(e.data - _self.scrollMargin.left);
  98. });
  99. this.scrollTop = 0;
  100. this.scrollLeft = 0;
  101. this.cursorPos = {
  102. row : 0,
  103. column : 0
  104. };
  105. this.$fontMetrics = new FontMetrics(this.container);
  106. this.$textLayer.$setFontMetrics(this.$fontMetrics);
  107. this.$textLayer.addEventListener("changeCharacterSize", function(e) {
  108. _self.updateCharacterSize();
  109. _self.onResize(true, _self.gutterWidth, _self.$size.width, _self.$size.height);
  110. _self._signal("changeCharacterSize", e);
  111. });
  112. this.$size = {
  113. width: 0,
  114. height: 0,
  115. scrollerHeight: 0,
  116. scrollerWidth: 0,
  117. $dirty: true
  118. };
  119. this.layerConfig = {
  120. width : 1,
  121. padding : 0,
  122. firstRow : 0,
  123. firstRowScreen: 0,
  124. lastRow : 0,
  125. lineHeight : 0,
  126. characterWidth : 0,
  127. minHeight : 1,
  128. maxHeight : 1,
  129. offset : 0,
  130. height : 1,
  131. gutterOffset: 1
  132. };
  133. this.scrollMargin = {
  134. left: 0,
  135. right: 0,
  136. top: 0,
  137. bottom: 0,
  138. v: 0,
  139. h: 0
  140. };
  141. this.$loop = new RenderLoop(
  142. this.$renderChanges.bind(this),
  143. this.container.ownerDocument.defaultView
  144. );
  145. this.$loop.schedule(this.CHANGE_FULL);
  146. this.updateCharacterSize();
  147. this.setPadding(4);
  148. config.resetOptions(this);
  149. config._emit("renderer", this);
  150. };
  151. (function() {
  152. this.CHANGE_CURSOR = 1;
  153. this.CHANGE_MARKER = 2;
  154. this.CHANGE_GUTTER = 4;
  155. this.CHANGE_SCROLL = 8;
  156. this.CHANGE_LINES = 16;
  157. this.CHANGE_TEXT = 32;
  158. this.CHANGE_SIZE = 64;
  159. this.CHANGE_MARKER_BACK = 128;
  160. this.CHANGE_MARKER_FRONT = 256;
  161. this.CHANGE_FULL = 512;
  162. this.CHANGE_H_SCROLL = 1024;
  163. // this.$logChanges = function(changes) {
  164. // var a = ""
  165. // if (changes & this.CHANGE_CURSOR) a += " cursor";
  166. // if (changes & this.CHANGE_MARKER) a += " marker";
  167. // if (changes & this.CHANGE_GUTTER) a += " gutter";
  168. // if (changes & this.CHANGE_SCROLL) a += " scroll";
  169. // if (changes & this.CHANGE_LINES) a += " lines";
  170. // if (changes & this.CHANGE_TEXT) a += " text";
  171. // if (changes & this.CHANGE_SIZE) a += " size";
  172. // if (changes & this.CHANGE_MARKER_BACK) a += " marker_back";
  173. // if (changes & this.CHANGE_MARKER_FRONT) a += " marker_front";
  174. // if (changes & this.CHANGE_FULL) a += " full";
  175. // if (changes & this.CHANGE_H_SCROLL) a += " h_scroll";
  176. // console.log(a.trim())
  177. // };
  178. oop.implement(this, EventEmitter);
  179. this.updateCharacterSize = function() {
  180. if (this.$textLayer.allowBoldFonts != this.$allowBoldFonts) {
  181. this.$allowBoldFonts = this.$textLayer.allowBoldFonts;
  182. this.setStyle("ace_nobold", !this.$allowBoldFonts);
  183. }
  184. this.layerConfig.characterWidth =
  185. this.characterWidth = this.$textLayer.getCharacterWidth();
  186. this.layerConfig.lineHeight =
  187. this.lineHeight = this.$textLayer.getLineHeight();
  188. this.$updatePrintMargin();
  189. };
  190. /**
  191. *
  192. * Associates the renderer with an [[EditSession `EditSession`]].
  193. **/
  194. this.setSession = function(session) {
  195. if (this.session)
  196. this.session.doc.off("changeNewLineMode", this.onChangeNewLineMode);
  197. this.session = session;
  198. if (session && this.scrollMargin.top && session.getScrollTop() <= 0)
  199. session.setScrollTop(-this.scrollMargin.top);
  200. this.$cursorLayer.setSession(session);
  201. this.$markerBack.setSession(session);
  202. this.$markerFront.setSession(session);
  203. this.$gutterLayer.setSession(session);
  204. this.$textLayer.setSession(session);
  205. if (!session)
  206. return;
  207. this.$loop.schedule(this.CHANGE_FULL);
  208. this.session.$setFontMetrics(this.$fontMetrics);
  209. this.onChangeNewLineMode = this.onChangeNewLineMode.bind(this);
  210. this.onChangeNewLineMode()
  211. this.session.doc.on("changeNewLineMode", this.onChangeNewLineMode);
  212. };
  213. /**
  214. * Triggers a partial update of the text, from the range given by the two parameters.
  215. * @param {Number} firstRow The first row to update
  216. * @param {Number} lastRow The last row to update
  217. *
  218. **/
  219. this.updateLines = function(firstRow, lastRow, force) {
  220. if (lastRow === undefined)
  221. lastRow = Infinity;
  222. if (!this.$changedLines) {
  223. this.$changedLines = {
  224. firstRow: firstRow,
  225. lastRow: lastRow
  226. };
  227. }
  228. else {
  229. if (this.$changedLines.firstRow > firstRow)
  230. this.$changedLines.firstRow = firstRow;
  231. if (this.$changedLines.lastRow < lastRow)
  232. this.$changedLines.lastRow = lastRow;
  233. }
  234. // If the change happened offscreen above us then it's possible
  235. // that a new line wrap will affect the position of the lines on our
  236. // screen so they need redrawn.
  237. // TODO: better solution is to not change scroll position when text is changed outside of visible area
  238. if (this.$changedLines.lastRow < this.layerConfig.firstRow) {
  239. if (force)
  240. this.$changedLines.lastRow = this.layerConfig.lastRow;
  241. else
  242. return;
  243. }
  244. if (this.$changedLines.firstRow > this.layerConfig.lastRow)
  245. return;
  246. this.$loop.schedule(this.CHANGE_LINES);
  247. };
  248. this.onChangeNewLineMode = function() {
  249. this.$loop.schedule(this.CHANGE_TEXT);
  250. this.$textLayer.$updateEolChar();
  251. };
  252. this.onChangeTabSize = function() {
  253. this.$loop.schedule(this.CHANGE_TEXT | this.CHANGE_MARKER);
  254. this.$textLayer.onChangeTabSize();
  255. };
  256. /**
  257. * Triggers a full update of the text, for all the rows.
  258. **/
  259. this.updateText = function() {
  260. this.$loop.schedule(this.CHANGE_TEXT);
  261. };
  262. /**
  263. * Triggers a full update of all the layers, for all the rows.
  264. * @param {Boolean} force If `true`, forces the changes through
  265. *
  266. **/
  267. this.updateFull = function(force) {
  268. if (force)
  269. this.$renderChanges(this.CHANGE_FULL, true);
  270. else
  271. this.$loop.schedule(this.CHANGE_FULL);
  272. };
  273. /**
  274. * Updates the font size.
  275. **/
  276. this.updateFontSize = function() {
  277. this.$textLayer.checkForSizeChanges();
  278. };
  279. this.$changes = 0;
  280. this.$updateSizeAsync = function() {
  281. if (this.$loop.pending)
  282. this.$size.$dirty = true;
  283. else
  284. this.onResize();
  285. };
  286. /**
  287. * [Triggers a resize of the editor.]{: #VirtualRenderer.onResize}
  288. * @param {Boolean} force If `true`, recomputes the size, even if the height and width haven't changed
  289. * @param {Number} gutterWidth The width of the gutter in pixels
  290. * @param {Number} width The width of the editor in pixels
  291. * @param {Number} height The hiehgt of the editor, in pixels
  292. *
  293. **/
  294. this.onResize = function(force, gutterWidth, width, height) {
  295. if (this.resizing > 2)
  296. return;
  297. else if (this.resizing > 0)
  298. this.resizing++;
  299. else
  300. this.resizing = force ? 1 : 0;
  301. // `|| el.scrollHeight` is required for outosizing editors on ie
  302. // where elements with clientHeight = 0 alsoe have clientWidth = 0
  303. var el = this.container;
  304. if (!height)
  305. height = el.clientHeight || el.scrollHeight;
  306. if (!width)
  307. width = el.clientWidth || el.scrollWidth;
  308. var changes = this.$updateCachedSize(force, gutterWidth, width, height);
  309. if (!this.$size.scrollerHeight || (!width && !height))
  310. return this.resizing = 0;
  311. if (force)
  312. this.$gutterLayer.$padding = null;
  313. if (force)
  314. this.$renderChanges(changes | this.$changes, true);
  315. else
  316. this.$loop.schedule(changes | this.$changes);
  317. if (this.resizing)
  318. this.resizing = 0;
  319. // reset cached values on scrollbars, needs to be removed when switching to non-native scrollbars
  320. // see https://github.com/ajaxorg/ace/issues/2195
  321. this.scrollBarV.scrollLeft = this.scrollBarV.scrollTop = null;
  322. };
  323. this.$updateCachedSize = function(force, gutterWidth, width, height) {
  324. height -= (this.$extraHeight || 0);
  325. var changes = 0;
  326. var size = this.$size;
  327. var oldSize = {
  328. width: size.width,
  329. height: size.height,
  330. scrollerHeight: size.scrollerHeight,
  331. scrollerWidth: size.scrollerWidth
  332. };
  333. if (height && (force || size.height != height)) {
  334. size.height = height;
  335. changes |= this.CHANGE_SIZE;
  336. size.scrollerHeight = size.height;
  337. if (this.$horizScroll)
  338. size.scrollerHeight -= this.scrollBarH.getHeight();
  339. // this.scrollBarV.setHeight(size.scrollerHeight);
  340. this.scrollBarV.element.style.bottom = this.scrollBarH.getHeight() + "px";
  341. changes = changes | this.CHANGE_SCROLL;
  342. }
  343. if (width && (force || size.width != width)) {
  344. changes |= this.CHANGE_SIZE;
  345. size.width = width;
  346. if (gutterWidth == null)
  347. gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
  348. this.gutterWidth = gutterWidth;
  349. this.scrollBarH.element.style.left =
  350. this.scroller.style.left = gutterWidth + "px";
  351. size.scrollerWidth = Math.max(0, width - gutterWidth - this.scrollBarV.getWidth());
  352. this.scrollBarH.element.style.right =
  353. this.scroller.style.right = this.scrollBarV.getWidth() + "px";
  354. this.scroller.style.bottom = this.scrollBarH.getHeight() + "px";
  355. // this.scrollBarH.element.style.setWidth(size.scrollerWidth);
  356. if (this.session && this.session.getUseWrapMode() && this.adjustWrapLimit() || force)
  357. changes |= this.CHANGE_FULL;
  358. }
  359. size.$dirty = !width || !height;
  360. if (changes)
  361. this._signal("resize", oldSize);
  362. return changes;
  363. };
  364. this.onGutterResize = function() {
  365. var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
  366. if (gutterWidth != this.gutterWidth)
  367. this.$changes |= this.$updateCachedSize(true, gutterWidth, this.$size.width, this.$size.height);
  368. if (this.session.getUseWrapMode() && this.adjustWrapLimit()) {
  369. this.$loop.schedule(this.CHANGE_FULL);
  370. } else if (this.$size.$dirty) {
  371. this.$loop.schedule(this.CHANGE_FULL);
  372. } else {
  373. this.$computeLayerConfig();
  374. this.$loop.schedule(this.CHANGE_MARKER);
  375. }
  376. };
  377. /**
  378. * Adjusts the wrap limit, which is the number of characters that can fit within the width of the edit area on screen.
  379. **/
  380. this.adjustWrapLimit = function() {
  381. var availableWidth = this.$size.scrollerWidth - this.$padding * 2;
  382. var limit = Math.floor(availableWidth / this.characterWidth);
  383. return this.session.adjustWrapLimit(limit, this.$showPrintMargin && this.$printMarginColumn);
  384. };
  385. /**
  386. * Identifies whether you want to have an animated scroll or not.
  387. * @param {Boolean} shouldAnimate Set to `true` to show animated scrolls
  388. *
  389. **/
  390. this.setAnimatedScroll = function(shouldAnimate){
  391. this.setOption("animatedScroll", shouldAnimate);
  392. };
  393. /**
  394. * Returns whether an animated scroll happens or not.
  395. * @returns {Boolean}
  396. **/
  397. this.getAnimatedScroll = function() {
  398. return this.$animatedScroll;
  399. };
  400. /**
  401. * Identifies whether you want to show invisible characters or not.
  402. * @param {Boolean} showInvisibles Set to `true` to show invisibles
  403. *
  404. **/
  405. this.setShowInvisibles = function(showInvisibles) {
  406. this.setOption("showInvisibles", showInvisibles);
  407. };
  408. /**
  409. * Returns whether invisible characters are being shown or not.
  410. * @returns {Boolean}
  411. **/
  412. this.getShowInvisibles = function() {
  413. return this.getOption("showInvisibles");
  414. };
  415. this.getDisplayIndentGuides = function() {
  416. return this.getOption("displayIndentGuides");
  417. };
  418. this.setDisplayIndentGuides = function(display) {
  419. this.setOption("displayIndentGuides", display);
  420. };
  421. /**
  422. * Identifies whether you want to show the print margin or not.
  423. * @param {Boolean} showPrintMargin Set to `true` to show the print margin
  424. *
  425. **/
  426. this.setShowPrintMargin = function(showPrintMargin) {
  427. this.setOption("showPrintMargin", showPrintMargin);
  428. };
  429. /**
  430. * Returns whether the print margin is being shown or not.
  431. * @returns {Boolean}
  432. **/
  433. this.getShowPrintMargin = function() {
  434. return this.getOption("showPrintMargin");
  435. };
  436. /**
  437. * Identifies whether you want to show the print margin column or not.
  438. * @param {Boolean} showPrintMargin Set to `true` to show the print margin column
  439. *
  440. **/
  441. this.setPrintMarginColumn = function(showPrintMargin) {
  442. this.setOption("printMarginColumn", showPrintMargin);
  443. };
  444. /**
  445. * Returns whether the print margin column is being shown or not.
  446. * @returns {Boolean}
  447. **/
  448. this.getPrintMarginColumn = function() {
  449. return this.getOption("printMarginColumn");
  450. };
  451. /**
  452. * Returns `true` if the gutter is being shown.
  453. * @returns {Boolean}
  454. **/
  455. this.getShowGutter = function(){
  456. return this.getOption("showGutter");
  457. };
  458. /**
  459. * Identifies whether you want to show the gutter or not.
  460. * @param {Boolean} show Set to `true` to show the gutter
  461. *
  462. **/
  463. this.setShowGutter = function(show){
  464. return this.setOption("showGutter", show);
  465. };
  466. this.getFadeFoldWidgets = function(){
  467. return this.getOption("fadeFoldWidgets")
  468. };
  469. this.setFadeFoldWidgets = function(show) {
  470. this.setOption("fadeFoldWidgets", show);
  471. };
  472. this.setHighlightGutterLine = function(shouldHighlight) {
  473. this.setOption("highlightGutterLine", shouldHighlight);
  474. };
  475. this.getHighlightGutterLine = function() {
  476. return this.getOption("highlightGutterLine");
  477. };
  478. this.$updateGutterLineHighlight = function() {
  479. var pos = this.$cursorLayer.$pixelPos;
  480. var height = this.layerConfig.lineHeight;
  481. if (this.session.getUseWrapMode()) {
  482. var cursor = this.session.selection.getCursor();
  483. cursor.column = 0;
  484. pos = this.$cursorLayer.getPixelPosition(cursor, true);
  485. height *= this.session.getRowLength(cursor.row);
  486. }
  487. this.$gutterLineHighlight.style.top = pos.top - this.layerConfig.offset + "px";
  488. this.$gutterLineHighlight.style.height = height + "px";
  489. };
  490. this.$updatePrintMargin = function() {
  491. if (!this.$showPrintMargin && !this.$printMarginEl)
  492. return;
  493. if (!this.$printMarginEl) {
  494. var containerEl = dom.createElement("div");
  495. containerEl.className = "ace_layer ace_print-margin-layer";
  496. this.$printMarginEl = dom.createElement("div");
  497. this.$printMarginEl.className = "ace_print-margin";
  498. containerEl.appendChild(this.$printMarginEl);
  499. this.content.insertBefore(containerEl, this.content.firstChild);
  500. }
  501. var style = this.$printMarginEl.style;
  502. style.left = ((this.characterWidth * this.$printMarginColumn) + this.$padding) + "px";
  503. style.visibility = this.$showPrintMargin ? "visible" : "hidden";
  504. if (this.session && this.session.$wrap == -1)
  505. this.adjustWrapLimit();
  506. };
  507. /**
  508. *
  509. * Returns the root element containing this renderer.
  510. * @returns {DOMElement}
  511. **/
  512. this.getContainerElement = function() {
  513. return this.container;
  514. };
  515. /**
  516. *
  517. * Returns the element that the mouse events are attached to
  518. * @returns {DOMElement}
  519. **/
  520. this.getMouseEventTarget = function() {
  521. return this.scroller;
  522. };
  523. /**
  524. *
  525. * Returns the element to which the hidden text area is added.
  526. * @returns {DOMElement}
  527. **/
  528. this.getTextAreaContainer = function() {
  529. return this.container;
  530. };
  531. // move text input over the cursor
  532. // this is required for iOS and IME
  533. this.$moveTextAreaToCursor = function() {
  534. if (!this.$keepTextAreaAtCursor)
  535. return;
  536. var config = this.layerConfig;
  537. var posTop = this.$cursorLayer.$pixelPos.top;
  538. var posLeft = this.$cursorLayer.$pixelPos.left;
  539. posTop -= config.offset;
  540. var style = this.textarea.style;
  541. var h = this.lineHeight;
  542. if (posTop < 0 || posTop > config.height - h) {
  543. style.top = style.left = "0";
  544. return;
  545. }
  546. var w = this.characterWidth;
  547. if (this.$composition) {
  548. var val = this.textarea.value.replace(/^\x01+/, "");
  549. w *= (this.session.$getStringScreenWidth(val)[0]+2);
  550. h += 2;
  551. }
  552. posLeft -= this.scrollLeft;
  553. if (posLeft > this.$size.scrollerWidth - w)
  554. posLeft = this.$size.scrollerWidth - w;
  555. posLeft += this.gutterWidth;
  556. style.height = h + "px";
  557. style.width = w + "px";
  558. style.left = Math.min(posLeft, this.$size.scrollerWidth - w) + "px";
  559. style.top = Math.min(posTop, this.$size.height - h) + "px";
  560. };
  561. /**
  562. * [Returns the index of the first visible row.]{: #VirtualRenderer.getFirstVisibleRow}
  563. * @returns {Number}
  564. **/
  565. this.getFirstVisibleRow = function() {
  566. return this.layerConfig.firstRow;
  567. };
  568. /**
  569. *
  570. * 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.
  571. * @returns {Number}
  572. **/
  573. this.getFirstFullyVisibleRow = function() {
  574. return this.layerConfig.firstRow + (this.layerConfig.offset === 0 ? 0 : 1);
  575. };
  576. /**
  577. *
  578. * 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.
  579. * @returns {Number}
  580. **/
  581. this.getLastFullyVisibleRow = function() {
  582. var config = this.layerConfig;
  583. var lastRow = config.lastRow
  584. var top = this.session.documentToScreenRow(lastRow, 0) * config.lineHeight;
  585. if (top - this.session.getScrollTop() > config.height - config.lineHeight)
  586. return lastRow - 1;
  587. return lastRow;
  588. };
  589. /**
  590. *
  591. * [Returns the index of the last visible row.]{: #VirtualRenderer.getLastVisibleRow}
  592. * @returns {Number}
  593. **/
  594. this.getLastVisibleRow = function() {
  595. return this.layerConfig.lastRow;
  596. };
  597. this.$padding = null;
  598. /**
  599. * Sets the padding for all the layers.
  600. * @param {Number} padding A new padding value (in pixels)
  601. *
  602. **/
  603. this.setPadding = function(padding) {
  604. this.$padding = padding;
  605. this.$textLayer.setPadding(padding);
  606. this.$cursorLayer.setPadding(padding);
  607. this.$markerFront.setPadding(padding);
  608. this.$markerBack.setPadding(padding);
  609. this.$loop.schedule(this.CHANGE_FULL);
  610. this.$updatePrintMargin();
  611. };
  612. this.setScrollMargin = function(top, bottom, left, right) {
  613. var sm = this.scrollMargin;
  614. sm.top = top|0;
  615. sm.bottom = bottom|0;
  616. sm.right = right|0;
  617. sm.left = left|0;
  618. sm.v = sm.top + sm.bottom;
  619. sm.h = sm.left + sm.right;
  620. if (sm.top && this.scrollTop <= 0 && this.session)
  621. this.session.setScrollTop(-sm.top);
  622. this.updateFull();
  623. };
  624. /**
  625. * Returns whether the horizontal scrollbar is set to be always visible.
  626. * @returns {Boolean}
  627. **/
  628. this.getHScrollBarAlwaysVisible = function() {
  629. return this.$hScrollBarAlwaysVisible;
  630. };
  631. /**
  632. * Identifies whether you want to show the horizontal scrollbar or not.
  633. * @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible
  634. **/
  635. this.setHScrollBarAlwaysVisible = function(alwaysVisible) {
  636. this.setOption("hScrollBarAlwaysVisible", alwaysVisible);
  637. };
  638. /**
  639. * Returns whether the horizontal scrollbar is set to be always visible.
  640. * @returns {Boolean}
  641. **/
  642. this.getVScrollBarAlwaysVisible = function() {
  643. return this.$vScrollBarAlwaysVisible;
  644. };
  645. /**
  646. * Identifies whether you want to show the horizontal scrollbar or not.
  647. * @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible
  648. **/
  649. this.setVScrollBarAlwaysVisible = function(alwaysVisible) {
  650. this.setOption("vScrollBarAlwaysVisible", alwaysVisible);
  651. };
  652. this.$updateScrollBarV = function() {
  653. var scrollHeight = this.layerConfig.maxHeight;
  654. var scrollerHeight = this.$size.scrollerHeight;
  655. if (!this.$maxLines && this.$scrollPastEnd) {
  656. scrollHeight -= (scrollerHeight - this.lineHeight) * this.$scrollPastEnd;
  657. if (this.scrollTop > scrollHeight - scrollerHeight) {
  658. scrollHeight = this.scrollTop + scrollerHeight;
  659. this.scrollBarV.scrollTop = null;
  660. }
  661. }
  662. this.scrollBarV.setScrollHeight(scrollHeight + this.scrollMargin.v);
  663. this.scrollBarV.setScrollTop(this.scrollTop + this.scrollMargin.top);
  664. };
  665. this.$updateScrollBarH = function() {
  666. this.scrollBarH.setScrollWidth(this.layerConfig.width + 2 * this.$padding + this.scrollMargin.h);
  667. this.scrollBarH.setScrollLeft(this.scrollLeft + this.scrollMargin.left);
  668. };
  669. this.$frozen = false;
  670. this.freeze = function() {
  671. this.$frozen = true;
  672. };
  673. this.unfreeze = function() {
  674. this.$frozen = false;
  675. };
  676. this.$renderChanges = function(changes, force) {
  677. if (this.$changes) {
  678. changes |= this.$changes;
  679. this.$changes = 0;
  680. }
  681. if ((!this.session || !this.container.offsetWidth || this.$frozen) || (!changes && !force)) {
  682. this.$changes |= changes;
  683. return;
  684. }
  685. if (this.$size.$dirty) {
  686. this.$changes |= changes;
  687. return this.onResize(true);
  688. }
  689. if (!this.lineHeight) {
  690. this.$textLayer.checkForSizeChanges();
  691. }
  692. // this.$logChanges(changes);
  693. this._signal("beforeRender");
  694. var config = this.layerConfig;
  695. // text, scrolling and resize changes can cause the view port size to change
  696. if (changes & this.CHANGE_FULL ||
  697. changes & this.CHANGE_SIZE ||
  698. changes & this.CHANGE_TEXT ||
  699. changes & this.CHANGE_LINES ||
  700. changes & this.CHANGE_SCROLL ||
  701. changes & this.CHANGE_H_SCROLL
  702. ) {
  703. changes |= this.$computeLayerConfig();
  704. // If a change is made offscreen and wrapMode is on, then the onscreen
  705. // lines may have been pushed down. If so, the first screen row will not
  706. // have changed, but the first actual row will. In that case, adjust
  707. // scrollTop so that the cursor and onscreen content stays in the same place.
  708. // TODO: find a better way to handle this, that works non wrapped case and doesn't compute layerConfig twice
  709. if (config.firstRow != this.layerConfig.firstRow && config.firstRowScreen == this.layerConfig.firstRowScreen) {
  710. var st = this.scrollTop + (config.firstRow - this.layerConfig.firstRow) * this.lineHeight;
  711. if (st > 0) {
  712. // this check is needed as a workaround for the documentToScreenRow returning -1 if document.length == 0
  713. this.scrollTop = st;
  714. changes = changes | this.CHANGE_SCROLL;
  715. changes |= this.$computeLayerConfig();
  716. }
  717. }
  718. config = this.layerConfig;
  719. // update scrollbar first to not lose scroll position when gutter calls resize
  720. this.$updateScrollBarV();
  721. if (changes & this.CHANGE_H_SCROLL)
  722. this.$updateScrollBarH();
  723. this.$gutterLayer.element.style.marginTop = (-config.offset) + "px";
  724. this.content.style.marginTop = (-config.offset) + "px";
  725. this.content.style.width = config.width + 2 * this.$padding + "px";
  726. this.content.style.height = config.minHeight + "px";
  727. }
  728. // horizontal scrolling
  729. if (changes & this.CHANGE_H_SCROLL) {
  730. this.content.style.marginLeft = -this.scrollLeft + "px";
  731. this.scroller.className = this.scrollLeft <= 0 ? "ace_scroller" : "ace_scroller ace_scroll-left";
  732. }
  733. // full
  734. if (changes & this.CHANGE_FULL) {
  735. this.$textLayer.update(config);
  736. if (this.$showGutter)
  737. this.$gutterLayer.update(config);
  738. this.$markerBack.update(config);
  739. this.$markerFront.update(config);
  740. this.$cursorLayer.update(config);
  741. this.$moveTextAreaToCursor();
  742. this.$highlightGutterLine && this.$updateGutterLineHighlight();
  743. this._signal("afterRender");
  744. return;
  745. }
  746. // scrolling
  747. if (changes & this.CHANGE_SCROLL) {
  748. if (changes & this.CHANGE_TEXT || changes & this.CHANGE_LINES)
  749. this.$textLayer.update(config);
  750. else
  751. this.$textLayer.scrollLines(config);
  752. if (this.$showGutter)
  753. this.$gutterLayer.update(config);
  754. this.$markerBack.update(config);
  755. this.$markerFront.update(config);
  756. this.$cursorLayer.update(config);
  757. this.$highlightGutterLine && this.$updateGutterLineHighlight();
  758. this.$moveTextAreaToCursor();
  759. this._signal("afterRender");
  760. return;
  761. }
  762. if (changes & this.CHANGE_TEXT) {
  763. this.$textLayer.update(config);
  764. if (this.$showGutter)
  765. this.$gutterLayer.update(config);
  766. }
  767. else if (changes & this.CHANGE_LINES) {
  768. if (this.$updateLines() || (changes & this.CHANGE_GUTTER) && this.$showGutter)
  769. this.$gutterLayer.update(config);
  770. }
  771. else if (changes & this.CHANGE_TEXT || changes & this.CHANGE_GUTTER) {
  772. if (this.$showGutter)
  773. this.$gutterLayer.update(config);
  774. }
  775. if (changes & this.CHANGE_CURSOR) {
  776. this.$cursorLayer.update(config);
  777. this.$moveTextAreaToCursor();
  778. this.$highlightGutterLine && this.$updateGutterLineHighlight();
  779. }
  780. if (changes & (this.CHANGE_MARKER | this.CHANGE_MARKER_FRONT)) {
  781. this.$markerFront.update(config);
  782. }
  783. if (changes & (this.CHANGE_MARKER | this.CHANGE_MARKER_BACK)) {
  784. this.$markerBack.update(config);
  785. }
  786. this._signal("afterRender");
  787. };
  788. this.$autosize = function() {
  789. var height = this.session.getScreenLength() * this.lineHeight;
  790. var maxHeight = this.$maxLines * this.lineHeight;
  791. var desiredHeight = Math.max(
  792. (this.$minLines||1) * this.lineHeight,
  793. Math.min(maxHeight, height)
  794. ) + this.scrollMargin.v + (this.$extraHeight || 0);
  795. if (this.$horizScroll)
  796. desiredHeight += this.scrollBarH.getHeight();
  797. var vScroll = height > maxHeight;
  798. if (desiredHeight != this.desiredHeight ||
  799. this.$size.height != this.desiredHeight || vScroll != this.$vScroll) {
  800. if (vScroll != this.$vScroll) {
  801. this.$vScroll = vScroll;
  802. this.scrollBarV.setVisible(vScroll);
  803. }
  804. var w = this.container.clientWidth;
  805. this.container.style.height = desiredHeight + "px";
  806. this.$updateCachedSize(true, this.$gutterWidth, w, desiredHeight);
  807. // this.$loop.changes = 0;
  808. this.desiredHeight = desiredHeight;
  809. this._signal("autosize");
  810. }
  811. };
  812. this.$computeLayerConfig = function() {
  813. var session = this.session;
  814. var size = this.$size;
  815. var hideScrollbars = size.height <= 2 * this.lineHeight;
  816. var screenLines = this.session.getScreenLength();
  817. var maxHeight = screenLines * this.lineHeight;
  818. var longestLine = this.$getLongestLine();
  819. var horizScroll = !hideScrollbars && (this.$hScrollBarAlwaysVisible ||
  820. size.scrollerWidth - longestLine - 2 * this.$padding < 0);
  821. var hScrollChanged = this.$horizScroll !== horizScroll;
  822. if (hScrollChanged) {
  823. this.$horizScroll = horizScroll;
  824. this.scrollBarH.setVisible(horizScroll);
  825. }
  826. var vScrollBefore = this.$vScroll; // autosize can change vscroll value in which case we need to update longestLine
  827. // autoresize only after updating hscroll to include scrollbar height in desired height
  828. if (this.$maxLines && this.lineHeight > 1)
  829. this.$autosize();
  830. var offset = this.scrollTop % this.lineHeight;
  831. var minHeight = size.scrollerHeight + this.lineHeight;
  832. var scrollPastEnd = !this.$maxLines && this.$scrollPastEnd
  833. ? (size.scrollerHeight - this.lineHeight) * this.$scrollPastEnd
  834. : 0;
  835. maxHeight += scrollPastEnd;
  836. var sm = this.scrollMargin;
  837. this.session.setScrollTop(Math.max(-sm.top,
  838. Math.min(this.scrollTop, maxHeight - size.scrollerHeight + sm.bottom)));
  839. this.session.setScrollLeft(Math.max(-sm.left, Math.min(this.scrollLeft,
  840. longestLine + 2 * this.$padding - size.scrollerWidth + sm.right)));
  841. var vScroll = !hideScrollbars && (this.$vScrollBarAlwaysVisible ||
  842. size.scrollerHeight - maxHeight + scrollPastEnd < 0 || this.scrollTop > sm.top);
  843. var vScrollChanged = vScrollBefore !== vScroll;
  844. if (vScrollChanged) {
  845. this.$vScroll = vScroll;
  846. this.scrollBarV.setVisible(vScroll);
  847. }
  848. var lineCount = Math.ceil(minHeight / this.lineHeight) - 1;
  849. var firstRow = Math.max(0, Math.round((this.scrollTop - offset) / this.lineHeight));
  850. var lastRow = firstRow + lineCount;
  851. // Map lines on the screen to lines in the document.
  852. var firstRowScreen, firstRowHeight;
  853. var lineHeight = this.lineHeight;
  854. firstRow = session.screenToDocumentRow(firstRow, 0);
  855. // Check if firstRow is inside of a foldLine. If true, then use the first
  856. // row of the foldLine.
  857. var foldLine = session.getFoldLine(firstRow);
  858. if (foldLine) {
  859. firstRow = foldLine.start.row;
  860. }
  861. firstRowScreen = session.documentToScreenRow(firstRow, 0);
  862. firstRowHeight = session.getRowLength(firstRow) * lineHeight;
  863. lastRow = Math.min(session.screenToDocumentRow(lastRow, 0), session.getLength() - 1);
  864. minHeight = size.scrollerHeight + session.getRowLength(lastRow) * lineHeight +
  865. firstRowHeight;
  866. offset = this.scrollTop - firstRowScreen * lineHeight;
  867. var changes = 0;
  868. if (this.layerConfig.width != longestLine)
  869. changes = this.CHANGE_H_SCROLL;
  870. // Horizontal scrollbar visibility may have changed, which changes
  871. // the client height of the scroller
  872. if (hScrollChanged || vScrollChanged) {
  873. changes = this.$updateCachedSize(true, this.gutterWidth, size.width, size.height);
  874. this._signal("scrollbarVisibilityChanged");
  875. if (vScrollChanged)
  876. longestLine = this.$getLongestLine();
  877. }
  878. this.layerConfig = {
  879. width : longestLine,
  880. padding : this.$padding,
  881. firstRow : firstRow,
  882. firstRowScreen: firstRowScreen,
  883. lastRow : lastRow,
  884. lineHeight : lineHeight,
  885. characterWidth : this.characterWidth,
  886. minHeight : minHeight,
  887. maxHeight : maxHeight,
  888. offset : offset,
  889. gutterOffset : Math.max(0, Math.ceil((offset + size.height - size.scrollerHeight) / lineHeight)),
  890. height : this.$size.scrollerHeight
  891. };
  892. // For debugging.
  893. // console.log(JSON.stringify(this.layerConfig));
  894. return changes;
  895. };
  896. this.$updateLines = function() {
  897. var firstRow = this.$changedLines.firstRow;
  898. var lastRow = this.$changedLines.lastRow;
  899. this.$changedLines = null;
  900. var layerConfig = this.layerConfig;
  901. if (firstRow > layerConfig.lastRow + 1) { return; }
  902. if (lastRow < layerConfig.firstRow) { return; }
  903. // if the last row is unknown -> redraw everything
  904. if (lastRow === Infinity) {
  905. if (this.$showGutter)
  906. this.$gutterLayer.update(layerConfig);
  907. this.$textLayer.update(layerConfig);
  908. return;
  909. }
  910. // else update only the changed rows
  911. this.$textLayer.updateLines(layerConfig, firstRow, lastRow);
  912. return true;
  913. };
  914. this.$getLongestLine = function() {
  915. var charCount = this.session.getScreenWidth();
  916. if (this.showInvisibles && !this.session.$useWrapMode)
  917. charCount += 1;
  918. return Math.max(this.$size.scrollerWidth - 2 * this.$padding, Math.round(charCount * this.characterWidth));
  919. };
  920. /**
  921. * Schedules an update to all the front markers in the document.
  922. **/
  923. this.updateFrontMarkers = function() {
  924. this.$markerFront.setMarkers(this.session.getMarkers(true));
  925. this.$loop.schedule(this.CHANGE_MARKER_FRONT);
  926. };
  927. /**
  928. *
  929. * Schedules an update to all the back markers in the document.
  930. **/
  931. this.updateBackMarkers = function() {
  932. this.$markerBack.setMarkers(this.session.getMarkers());
  933. this.$loop.schedule(this.CHANGE_MARKER_BACK);
  934. };
  935. /**
  936. *
  937. * Deprecated; (moved to [[EditSession]])
  938. * @deprecated
  939. **/
  940. this.addGutterDecoration = function(row, className){
  941. this.$gutterLayer.addGutterDecoration(row, className);
  942. };
  943. /**
  944. * Deprecated; (moved to [[EditSession]])
  945. * @deprecated
  946. **/
  947. this.removeGutterDecoration = function(row, className){
  948. this.$gutterLayer.removeGutterDecoration(row, className);
  949. };
  950. /**
  951. *
  952. * Redraw breakpoints.
  953. **/
  954. this.updateBreakpoints = function(rows) {
  955. this.$loop.schedule(this.CHANGE_GUTTER);
  956. };
  957. /**
  958. * Sets annotations for the gutter.
  959. * @param {Array} annotations An array containing annotations
  960. *
  961. **/
  962. this.setAnnotations = function(annotations) {
  963. this.$gutterLayer.setAnnotations(annotations);
  964. this.$loop.schedule(this.CHANGE_GUTTER);
  965. };
  966. /**
  967. *
  968. * Updates the cursor icon.
  969. **/
  970. this.updateCursor = function() {
  971. this.$loop.schedule(this.CHANGE_CURSOR);
  972. };
  973. /**
  974. *
  975. * Hides the cursor icon.
  976. **/
  977. this.hideCursor = function() {
  978. this.$cursorLayer.hideCursor();
  979. };
  980. /**
  981. *
  982. * Shows the cursor icon.
  983. **/
  984. this.showCursor = function() {
  985. this.$cursorLayer.showCursor();
  986. };
  987. this.scrollSelectionIntoView = function(anchor, lead, offset) {
  988. // first scroll anchor into view then scroll lead into view
  989. this.scrollCursorIntoView(anchor, offset);
  990. this.scrollCursorIntoView(lead, offset);
  991. };
  992. /**
  993. *
  994. * Scrolls the cursor into the first visibile area of the editor
  995. **/
  996. this.scrollCursorIntoView = function(cursor, offset, $viewMargin) {
  997. // the editor is not visible
  998. if (this.$size.scrollerHeight === 0)
  999. return;
  1000. var pos = this.$cursorLayer.getPixelPosition(cursor);
  1001. var left = pos.left;
  1002. var top = pos.top;
  1003. var topMargin = $viewMargin && $viewMargin.top || 0;
  1004. var bottomMargin = $viewMargin && $viewMargin.bottom || 0;
  1005. var scrollTop = this.$scrollAnimation ? this.session.getScrollTop() : this.scrollTop;
  1006. if (scrollTop + topMargin > top) {
  1007. if (offset && scrollTop + topMargin > top + this.lineHeight)
  1008. top -= offset * this.$size.scrollerHeight;
  1009. if (top === 0)
  1010. top = -this.scrollMargin.top;
  1011. this.session.setScrollTop(top);
  1012. } else if (scrollTop + this.$size.scrollerHeight - bottomMargin < top + this.lineHeight) {
  1013. if (offset && scrollTop + this.$size.scrollerHeight - bottomMargin < top - this.lineHeight)
  1014. top += offset * this.$size.scrollerHeight;
  1015. this.session.setScrollTop(top + this.lineHeight - this.$size.scrollerHeight);
  1016. }
  1017. var scrollLeft = this.scrollLeft;
  1018. if (scrollLeft > left) {
  1019. if (left < this.$padding + 2 * this.layerConfig.characterWidth)
  1020. left = -this.scrollMargin.left;
  1021. this.session.setScrollLeft(left);
  1022. } else if (scrollLeft + this.$size.scrollerWidth < left + this.characterWidth) {
  1023. this.session.setScrollLeft(Math.round(left + this.characterWidth - this.$size.scrollerWidth));
  1024. } else if (scrollLeft <= this.$padding && left - scrollLeft < this.characterWidth) {
  1025. this.session.setScrollLeft(0);
  1026. }
  1027. };
  1028. /**
  1029. * {:EditSession.getScrollTop}
  1030. * @related EditSession.getScrollTop
  1031. * @returns {Number}
  1032. **/
  1033. this.getScrollTop = function() {
  1034. return this.session.getScrollTop();
  1035. };
  1036. /**
  1037. * {:EditSession.getScrollLeft}
  1038. * @related EditSession.getScrollLeft
  1039. * @returns {Number}
  1040. **/
  1041. this.getScrollLeft = function() {
  1042. return this.session.getScrollLeft();
  1043. };
  1044. /**
  1045. * Returns the first visible row, regardless of whether it's fully visible or not.
  1046. * @returns {Number}
  1047. **/
  1048. this.getScrollTopRow = function() {
  1049. return this.scrollTop / this.lineHeight;
  1050. };
  1051. /**
  1052. * Returns the last visible row, regardless of whether it's fully visible or not.
  1053. * @returns {Number}
  1054. **/
  1055. this.getScrollBottomRow = function() {
  1056. return Math.max(0, Math.floor((this.scrollTop + this.$size.scrollerHeight) / this.lineHeight) - 1);
  1057. };
  1058. /**
  1059. * Gracefully scrolls from the top of the editor to the row indicated.
  1060. * @param {Number} row A row id
  1061. *
  1062. * @related EditSession.setScrollTop
  1063. **/
  1064. this.scrollToRow = function(row) {
  1065. this.session.setScrollTop(row * this.lineHeight);
  1066. };
  1067. this.alignCursor = function(cursor, alignment) {
  1068. if (typeof cursor == "number")
  1069. cursor = {row: cursor, column: 0};
  1070. var pos = this.$cursorLayer.getPixelPosition(cursor);
  1071. var h = this.$size.scrollerHeight - this.lineHeight;
  1072. var offset = pos.top - h * (alignment || 0);
  1073. this.session.setScrollTop(offset);
  1074. return offset;
  1075. };
  1076. this.STEPS = 8;
  1077. this.$calcSteps = function(fromValue, toValue){
  1078. var i = 0;
  1079. var l = this.STEPS;
  1080. var steps = [];
  1081. var func = function(t, x_min, dx) {
  1082. return dx * (Math.pow(t - 1, 3) + 1) + x_min;
  1083. };
  1084. for (i = 0; i < l; ++i)
  1085. steps.push(func(i / this.STEPS, fromValue, toValue - fromValue));
  1086. return steps;
  1087. };
  1088. /**
  1089. * Gracefully scrolls the editor to the row indicated.
  1090. * @param {Number} line A line number
  1091. * @param {Boolean} center If `true`, centers the editor the to indicated line
  1092. * @param {Boolean} animate If `true` animates scrolling
  1093. * @param {Function} callback Function to be called after the animation has finished
  1094. *
  1095. **/
  1096. this.scrollToLine = function(line, center, animate, callback) {
  1097. var pos = this.$cursorLayer.getPixelPosition({row: line, column: 0});
  1098. var offset = pos.top;
  1099. if (center)
  1100. offset -= this.$size.scrollerHeight / 2;
  1101. var initialScroll = this.scrollTop;
  1102. this.session.setScrollTop(offset);
  1103. if (animate !== false)
  1104. this.animateScrolling(initialScroll, callback);
  1105. };
  1106. this.animateScrolling = function(fromValue, callback) {
  1107. var toValue = this.scrollTop;
  1108. if (!this.$animatedScroll)
  1109. return;
  1110. var _self = this;
  1111. if (fromValue == toValue)
  1112. return;
  1113. if (this.$scrollAnimation) {
  1114. var oldSteps = this.$scrollAnimation.steps;
  1115. if (oldSteps.length) {
  1116. fromValue = oldSteps[0];
  1117. if (fromValue == toValue)
  1118. return;
  1119. }
  1120. }
  1121. var steps = _self.$calcSteps(fromValue, toValue);
  1122. this.$scrollAnimation = {from: fromValue, to: toValue, steps: steps};
  1123. clearInterval(this.$timer);
  1124. _self.session.setScrollTop(steps.shift());
  1125. // trick session to think it's already scrolled to not loose toValue
  1126. _self.session.$scrollTop = toValue;
  1127. this.$timer = setInterval(function() {
  1128. if (steps.length) {
  1129. _self.session.setScrollTop(steps.shift());
  1130. _self.session.$scrollTop = toValue;
  1131. } else if (toValue != null) {
  1132. _self.session.$scrollTop = -1;
  1133. _self.session.setScrollTop(toValue);
  1134. toValue = null;
  1135. } else {
  1136. // do this on separate step to not get spurious scroll event from scrollbar
  1137. _self.$timer = clearInterval(_self.$timer);
  1138. _self.$scrollAnimation = null;
  1139. callback && callback();
  1140. }
  1141. }, 10);
  1142. };
  1143. /**
  1144. * Scrolls the editor to the y pixel indicated.
  1145. * @param {Number} scrollTop The position to scroll to
  1146. *
  1147. * @returns {Number}
  1148. **/
  1149. this.scrollToY = function(scrollTop) {
  1150. // after calling scrollBar.setScrollTop
  1151. // scrollbar sends us event with same scrollTop. ignore it
  1152. if (this.scrollTop !== scrollTop) {
  1153. this.$loop.schedule(this.CHANGE_SCROLL);
  1154. this.scrollTop = scrollTop;
  1155. }
  1156. };
  1157. /**
  1158. * Scrolls the editor across the x-axis to the pixel indicated.
  1159. * @param {Number} scrollLeft The position to scroll to
  1160. *
  1161. * @returns {Number}
  1162. **/
  1163. this.scrollToX = function(scrollLeft) {
  1164. if (this.scrollLeft !== scrollLeft)
  1165. this.scrollLeft = scrollLeft;
  1166. this.$loop.schedule(this.CHANGE_H_SCROLL);
  1167. };
  1168. /**
  1169. * Scrolls the editor across both x- and y-axes.
  1170. * @param {Number} x The x value to scroll to
  1171. * @param {Number} y The y value to scroll to
  1172. **/
  1173. this.scrollTo = function(x, y) {
  1174. this.session.setScrollTop(y);
  1175. this.session.setScrollLeft(y);
  1176. };
  1177. /**
  1178. * Scrolls the editor across both x- and y-axes.
  1179. * @param {Number} deltaX The x value to scroll by
  1180. * @param {Number} deltaY The y value to scroll by
  1181. **/
  1182. this.scrollBy = function(deltaX, deltaY) {
  1183. deltaY && this.session.setScrollTop(this.session.getScrollTop() + deltaY);
  1184. deltaX && this.session.setScrollLeft(this.session.getScrollLeft() + deltaX);
  1185. };
  1186. /**
  1187. * Returns `true` if you can still scroll by either parameter; in other words, you haven't reached the end of the file or line.
  1188. * @param {Number} deltaX The x value to scroll by
  1189. * @param {Number} deltaY The y value to scroll by
  1190. *
  1191. * @returns {Boolean}
  1192. **/
  1193. this.isScrollableBy = function(deltaX, deltaY) {
  1194. if (deltaY < 0 && this.session.getScrollTop() >= 1 - this.scrollMargin.top)
  1195. return true;
  1196. if (deltaY > 0 && this.session.getScrollTop() + this.$size.scrollerHeight
  1197. - this.layerConfig.maxHeight < -1 + this.scrollMargin.bottom)
  1198. return true;
  1199. if (deltaX < 0 && this.session.getScrollLeft() >= 1 - this.scrollMargin.left)
  1200. return true;
  1201. if (deltaX > 0 && this.session.getScrollLeft() + this.$size.scrollerWidth
  1202. - this.layerConfig.width < -1 + this.scrollMargin.right)
  1203. return true;
  1204. };
  1205. this.pixelToScreenCoordinates = function(x, y) {
  1206. var canvasPos = this.scroller.getBoundingClientRect();
  1207. var offset = (x + this.scrollLeft - canvasPos.left - this.$padding) / this.characterWidth;
  1208. var row = Math.floor((y + this.scrollTop - canvasPos.top) / this.lineHeight);
  1209. var col = Math.round(offset);
  1210. return {row: row, column: col, side: offset - col > 0 ? 1 : -1};
  1211. };
  1212. this.screenToTextCoordinates = function(x, y) {
  1213. var canvasPos = this.scroller.getBoundingClientRect();
  1214. var col = Math.round(
  1215. (x + this.scrollLeft - canvasPos.left - this.$padding) / this.characterWidth
  1216. );
  1217. var row = (y + this.scrollTop - canvasPos.top) / this.lineHeight;
  1218. return this.session.screenToDocumentPosition(row, Math.max(col, 0));
  1219. };
  1220. /**
  1221. * Returns an object containing the `pageX` and `pageY` coordinates of the document position.
  1222. * @param {Number} row The document row position
  1223. * @param {Number} column The document column position
  1224. *
  1225. * @returns {Object}
  1226. **/
  1227. this.textToScreenCoordinates = function(row, column) {
  1228. var canvasPos = this.scroller.getBoundingClientRect();
  1229. var pos = this.session.documentToScreenPosition(row, column);
  1230. var x = this.$padding + Math.round(pos.column * this.characterWidth);
  1231. var y = pos.row * this.lineHeight;
  1232. return {
  1233. pageX: canvasPos.left + x - this.scrollLeft,
  1234. pageY: canvasPos.top + y - this.scrollTop
  1235. };
  1236. };
  1237. /**
  1238. *
  1239. * Focuses the current container.
  1240. **/
  1241. this.visualizeFocus = function() {
  1242. dom.addCssClass(this.container, "ace_focus");
  1243. };
  1244. /**
  1245. *
  1246. * Blurs the current container.
  1247. **/
  1248. this.visualizeBlur = function() {
  1249. dom.removeCssClass(this.container, "ace_focus");
  1250. };
  1251. /**
  1252. * @param {Number} position
  1253. *
  1254. * @private
  1255. **/
  1256. this.showComposition = function(position) {
  1257. if (!this.$composition)
  1258. this.$composition = {
  1259. keepTextAreaAtCursor: this.$keepTextAreaAtCursor,
  1260. cssText: this.textarea.style.cssText
  1261. };
  1262. this.$keepTextAreaAtCursor = true;
  1263. dom.addCssClass(this.textarea, "ace_composition");
  1264. this.textarea.style.cssText = "";
  1265. this.$moveTextAreaToCursor();
  1266. };
  1267. /**
  1268. * @param {String} text A string of text to use
  1269. *
  1270. * Sets the inner text of the current composition to `text`.
  1271. **/
  1272. this.setCompositionText = function(text) {
  1273. this.$moveTextAreaToCursor();
  1274. };
  1275. /**
  1276. *
  1277. * Hides the current composition.
  1278. **/
  1279. this.hideComposition = function() {
  1280. if (!this.$composition)
  1281. return;
  1282. dom.removeCssClass(this.textarea, "ace_composition");
  1283. this.$keepTextAreaAtCursor = this.$composition.keepTextAreaAtCursor;
  1284. this.textarea.style.cssText = this.$composition.cssText;
  1285. this.$composition = null;
  1286. };
  1287. /**
  1288. * [Sets a new theme for the editor. `theme` should exist, and be a directory path, like `ace/theme/textmate`.]{: #VirtualRenderer.setTheme}
  1289. * @param {String} theme The path to a theme
  1290. * @param {Function} cb optional callback
  1291. *
  1292. **/
  1293. this.setTheme = function(theme, cb) {
  1294. var _self = this;
  1295. this.$themeId = theme;
  1296. _self._dispatchEvent('themeChange',{theme:theme});
  1297. if (!theme || typeof theme == "string") {
  1298. var moduleName = theme || this.$options.theme.initialValue;
  1299. config.loadModule(["theme", moduleName], afterLoad);
  1300. } else {
  1301. afterLoad(theme);
  1302. }
  1303. function afterLoad(module) {
  1304. if (_self.$themeId != theme)
  1305. return cb && cb();
  1306. if (!module.cssClass)
  1307. return;
  1308. dom.importCssString(
  1309. module.cssText,
  1310. module.cssClass,
  1311. _self.container.ownerDocument
  1312. );
  1313. if (_self.theme)
  1314. dom.removeCssClass(_self.container, _self.theme.cssClass);
  1315. var padding = "padding" in module ? module.padding
  1316. : "padding" in (_self.theme || {}) ? 4 : _self.$padding;
  1317. if (_self.$padding && padding != _self.$padding)
  1318. _self.setPadding(padding);
  1319. // this is kept only for backwards compatibility
  1320. _self.$theme = module.cssClass;
  1321. _self.theme = module;
  1322. dom.addCssClass(_self.container, module.cssClass);
  1323. dom.setCssClass(_self.container, "ace_dark", module.isDark);
  1324. // force re-measure of the gutter width
  1325. if (_self.$size) {
  1326. _self.$size.width = 0;
  1327. _self.$updateSizeAsync();
  1328. }
  1329. _self._dispatchEvent('themeLoaded', {theme:module});
  1330. cb && cb();
  1331. }
  1332. };
  1333. /**
  1334. * [Returns the path of the current theme.]{: #VirtualRenderer.getTheme}
  1335. * @returns {String}
  1336. **/
  1337. this.getTheme = function() {
  1338. return this.$themeId;
  1339. };
  1340. // Methods allows to add / remove CSS classnames to the editor element.
  1341. // This feature can be used by plug-ins to provide a visual indication of
  1342. // a certain mode that editor is in.
  1343. /**
  1344. * [Adds a new class, `style`, to the editor.]{: #VirtualRenderer.setStyle}
  1345. * @param {String} style A class name
  1346. *
  1347. **/
  1348. this.setStyle = function(style, include) {
  1349. dom.setCssClass(this.container, style, include !== false);
  1350. };
  1351. /**
  1352. * [Removes the class `style` from the editor.]{: #VirtualRenderer.unsetStyle}
  1353. * @param {String} style A class name
  1354. *
  1355. **/
  1356. this.unsetStyle = function(style) {
  1357. dom.removeCssClass(this.container, style);
  1358. };
  1359. this.setCursorStyle = function(style) {
  1360. if (this.scroller.style.cursor != style)
  1361. this.scroller.style.cursor = style;
  1362. };
  1363. /**
  1364. * @param {String} cursorStyle A css cursor style
  1365. *
  1366. **/
  1367. this.setMouseCursor = function(cursorStyle) {
  1368. this.scroller.style.cursor = cursorStyle;
  1369. };
  1370. /**
  1371. * Destroys the text and cursor layers for this renderer.
  1372. **/
  1373. this.destroy = function() {
  1374. this.$textLayer.destroy();
  1375. this.$cursorLayer.destroy();
  1376. };
  1377. }).call(VirtualRenderer.prototype);
  1378. config.defineOptions(VirtualRenderer.prototype, "renderer", {
  1379. animatedScroll: {initialValue: false},
  1380. showInvisibles: {
  1381. set: function(value) {
  1382. if (this.$textLayer.setShowInvisibles(value))
  1383. this.$loop.schedule(this.CHANGE_TEXT);
  1384. },
  1385. initialValue: false
  1386. },
  1387. showPrintMargin: {
  1388. set: function() { this.$updatePrintMargin(); },
  1389. initialValue: true
  1390. },
  1391. printMarginColumn: {
  1392. set: function() { this.$updatePrintMargin(); },
  1393. initialValue: 80
  1394. },
  1395. printMargin: {
  1396. set: function(val) {
  1397. if (typeof val == "number")
  1398. this.$printMarginColumn = val;
  1399. this.$showPrintMargin = !!val;
  1400. this.$updatePrintMargin();
  1401. },
  1402. get: function() {
  1403. return this.$showPrintMargin && this.$printMarginColumn;
  1404. }
  1405. },
  1406. showGutter: {
  1407. set: function(show){
  1408. this.$gutter.style.display = show ? "block" : "none";
  1409. this.$loop.schedule(this.CHANGE_FULL);
  1410. this.onGutterResize();
  1411. },
  1412. initialValue: true
  1413. },
  1414. fadeFoldWidgets: {
  1415. set: function(show) {
  1416. dom.setCssClass(this.$gutter, "ace_fade-fold-widgets", show);
  1417. },
  1418. initialValue: false
  1419. },
  1420. showFoldWidgets: {
  1421. set: function(show) {this.$gutterLayer.setShowFoldWidgets(show)},
  1422. initialValue: true
  1423. },
  1424. showLineNumbers: {
  1425. set: function(show) {
  1426. this.$gutterLayer.setShowLineNumbers(show);
  1427. this.$loop.schedule(this.CHANGE_GUTTER);
  1428. },
  1429. initialValue: true
  1430. },
  1431. displayIndentGuides: {
  1432. set: function(show) {
  1433. if (this.$textLayer.setDisplayIndentGuides(show))
  1434. this.$loop.schedule(this.CHANGE_TEXT);
  1435. },
  1436. initialValue: true
  1437. },
  1438. highlightGutterLine: {
  1439. set: function(shouldHighlight) {
  1440. if (!this.$gutterLineHighlight) {
  1441. this.$gutterLineHighlight = dom.createElement("div");
  1442. this.$gutterLineHighlight.className = "ace_gutter-active-line";
  1443. this.$gutter.appendChild(this.$gutterLineHighlight);
  1444. return;
  1445. }
  1446. this.$gutterLineHighlight.style.display = shouldHighlight ? "" : "none";
  1447. // if cursorlayer have never been updated there's nothing on screen to update
  1448. if (this.$cursorLayer.$pixelPos)
  1449. this.$updateGutterLineHighlight();
  1450. },
  1451. initialValue: false,
  1452. value: true
  1453. },
  1454. hScrollBarAlwaysVisible: {
  1455. set: function(val) {
  1456. if (!this.$hScrollBarAlwaysVisible || !this.$horizScroll)
  1457. this.$loop.schedule(this.CHANGE_SCROLL);
  1458. },
  1459. initialValue: false
  1460. },
  1461. vScrollBarAlwaysVisible: {
  1462. set: function(val) {
  1463. if (!this.$vScrollBarAlwaysVisible || !this.$vScroll)
  1464. this.$loop.schedule(this.CHANGE_SCROLL);
  1465. },
  1466. initialValue: false
  1467. },
  1468. fontSize: {
  1469. set: function(size) {
  1470. if (typeof size == "number")
  1471. size = size + "px";
  1472. this.container.style.fontSize = size;
  1473. this.updateFontSize();
  1474. },
  1475. initialValue: 12
  1476. },
  1477. fontFamily: {
  1478. set: function(name) {
  1479. this.container.style.fontFamily = name;
  1480. this.updateFontSize();
  1481. }
  1482. },
  1483. maxLines: {
  1484. set: function(val) {
  1485. this.updateFull();
  1486. }
  1487. },
  1488. minLines: {
  1489. set: function(val) {
  1490. this.updateFull();
  1491. }
  1492. },
  1493. scrollPastEnd: {
  1494. set: function(val) {
  1495. val = +val || 0;
  1496. if (this.$scrollPastEnd == val)
  1497. return;
  1498. this.$scrollPastEnd = val;
  1499. this.$loop.schedule(this.CHANGE_SCROLL);
  1500. },
  1501. initialValue: 0,
  1502. handlesSet: true
  1503. },
  1504. fixedWidthGutter: {
  1505. set: function(val) {
  1506. this.$gutterLayer.$fixedWidth = !!val;
  1507. this.$loop.schedule(this.CHANGE_GUTTER);
  1508. }
  1509. },
  1510. theme: {
  1511. set: function(val) { this.setTheme(val) },
  1512. get: function() { return this.$themeId || this.theme; },
  1513. initialValue: "./theme/textmate",
  1514. handlesSet: true
  1515. }
  1516. });
  1517. exports.VirtualRenderer = VirtualRenderer;
  1518. });