virtual_renderer.js 59 KB

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