index.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427
  1. /// <reference path="../../release/monaco.d.ts" />
  2. define(['require', './samples'], function (require, SAMPLES) {
  3. const domutils = require('vs/base/browser/dom');
  4. let model = monaco.editor.createModel('', 'plaintext');
  5. monaco.languages.typescript.typescriptDefaults.setInlayHintsOptions({
  6. includeInlayParameterNameHints: 'all',
  7. includeInlayParameterNameHintsWhenArgumentMatchesName: true,
  8. includeInlayFunctionParameterTypeHints: true,
  9. includeInlayVariableTypeHints: true,
  10. includeInlayPropertyDeclarationTypeHints: true,
  11. includeInlayFunctionLikeReturnTypeHints: true,
  12. includeInlayEnumMemberValueHints: true
  13. });
  14. var editor = monaco.editor.create(document.getElementById('container'), {
  15. model: model,
  16. glyphMargin: true,
  17. renderWhitespace: true
  18. });
  19. editor.addCommand(
  20. {
  21. ctrlCmd: true,
  22. key: 'F9'
  23. },
  24. function (ctx, args) {
  25. alert('Command Running!!');
  26. console.log(ctx);
  27. }
  28. );
  29. editor.addAction({
  30. id: 'my-unique-id',
  31. label: 'My Label!!!',
  32. keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],
  33. contextMenuGroupId: 'navigation',
  34. contextMenuOrder: 2.5,
  35. run: function (ed) {
  36. console.log("i'm running => " + ed.getPosition());
  37. }
  38. });
  39. var currentSamplePromise = null;
  40. var samplesData = {};
  41. SAMPLES.sort(function (a, b) {
  42. return a.name.localeCompare(b.name);
  43. }).forEach(function (sample) {
  44. samplesData[sample.name] = function () {
  45. if (currentSamplePromise !== null) {
  46. currentSamplePromise.cancel();
  47. currentSamplePromise = null;
  48. }
  49. currentSamplePromise = sample.loadText().then(function (modelText) {
  50. currentSamplePromise = null;
  51. updateEditor(sample.mimeType, modelText, sample.name);
  52. });
  53. };
  54. });
  55. var examplesComboBox = new ComboBox('Template', samplesData);
  56. var modesData = {};
  57. monaco.languages.getLanguages().forEach(function (language) {
  58. modesData[language.id] = updateEditor.bind(this, language.id);
  59. });
  60. var modesComboBox = new ComboBox('Mode', modesData);
  61. var themesData = {};
  62. themesData['vs'] = function () {
  63. monaco.editor.setTheme('vs');
  64. };
  65. themesData['vs-dark'] = function () {
  66. monaco.editor.setTheme('vs-dark');
  67. };
  68. themesData['hc-black'] = function () {
  69. monaco.editor.setTheme('hc-black');
  70. };
  71. var themesComboBox = new ComboBox('Theme', themesData);
  72. // Do it in a timeout to simplify profiles
  73. window.setTimeout(function () {
  74. var START_SAMPLE = 'Y___DefaultJS';
  75. var url_matches = location.search.match(/sample=([^?&]+)/i);
  76. if (url_matches) {
  77. START_SAMPLE = url_matches[1];
  78. }
  79. if (location.hash) {
  80. START_SAMPLE = location.hash.replace(/^\#/, '');
  81. START_SAMPLE = decodeURIComponent(START_SAMPLE);
  82. }
  83. samplesData[START_SAMPLE]();
  84. examplesComboBox.set(START_SAMPLE);
  85. createOptions(editor);
  86. createToolbar(editor);
  87. }, 0);
  88. function updateEditor(mode, value, sampleName) {
  89. if (sampleName) {
  90. window.location.hash = sampleName;
  91. }
  92. if (typeof value !== 'undefined') {
  93. var oldModel = model;
  94. model = monaco.editor.createModel(value, mode);
  95. editor.setModel(model);
  96. if (oldModel) {
  97. oldModel.dispose();
  98. }
  99. } else {
  100. monaco.editor.setModelLanguage(model, mode);
  101. }
  102. modesComboBox.set(mode);
  103. }
  104. function createToolbar(editor) {
  105. var bar = document.getElementById('bar');
  106. bar.appendChild(examplesComboBox.domNode);
  107. bar.appendChild(modesComboBox.domNode);
  108. bar.appendChild(themesComboBox.domNode);
  109. bar.appendChild(
  110. createButton('Dispose all', function (e) {
  111. editor.dispose();
  112. editor = null;
  113. if (model) {
  114. model.dispose();
  115. model = null;
  116. }
  117. })
  118. );
  119. bar.appendChild(
  120. createButton('Remove Model', function (e) {
  121. editor.setModel(null);
  122. })
  123. );
  124. bar.appendChild(
  125. createButton('Dispose Model', function (e) {
  126. if (model) {
  127. model.dispose();
  128. model = null;
  129. }
  130. })
  131. );
  132. bar.appendChild(
  133. createButton(
  134. 'Ballistic scroll',
  135. (function () {
  136. var friction = 1000; // px per second
  137. var speed = 0; // px per second
  138. var isRunning = false;
  139. var lastTime;
  140. var r = 0;
  141. var scroll = function () {
  142. var currentTime = new Date().getTime();
  143. var ellapsedTimeS = (currentTime - lastTime) / 1000;
  144. lastTime = currentTime;
  145. speed = speed - friction * ellapsedTimeS;
  146. r = r + speed * ellapsedTimeS;
  147. editor.setScrollTop(r);
  148. if (speed >= 0) {
  149. domutils.scheduleAtNextAnimationFrame(scroll);
  150. } else {
  151. isRunning = false;
  152. }
  153. };
  154. return function (e) {
  155. speed += 2000;
  156. if (!isRunning) {
  157. isRunning = true;
  158. r = editor.getScrollTop();
  159. lastTime = new Date().getTime();
  160. domutils.runAtThisOrScheduleAtNextAnimationFrame(scroll);
  161. }
  162. };
  163. })()
  164. )
  165. );
  166. }
  167. function createButton(label, onClick) {
  168. var result = document.createElement('button');
  169. result.innerHTML = label;
  170. result.onclick = onClick;
  171. return result;
  172. }
  173. function createOptions(editor) {
  174. var options = document.getElementById('options');
  175. var lineNumbers;
  176. options.appendChild(
  177. createOptionToggle(
  178. editor,
  179. 'lineNumbers',
  180. function () {
  181. return lineNumbers === false ? false : true;
  182. },
  183. function (editor, newValue) {
  184. lineNumbers = newValue;
  185. editor.updateOptions({ lineNumbers: lineNumbers ? 'on' : 'off' });
  186. }
  187. )
  188. );
  189. var glyphMargin;
  190. options.appendChild(
  191. createOptionToggle(
  192. editor,
  193. 'glyphMargin',
  194. function () {
  195. return glyphMargin === false ? false : true;
  196. },
  197. function (editor, newValue) {
  198. glyphMargin = newValue;
  199. editor.updateOptions({ glyphMargin: glyphMargin });
  200. }
  201. )
  202. );
  203. var minimap;
  204. options.appendChild(
  205. createOptionToggle(
  206. editor,
  207. 'minimap',
  208. function () {
  209. return minimap === false ? false : true;
  210. },
  211. function (editor, newValue) {
  212. minimap = newValue;
  213. editor.updateOptions({ minimap: { enabled: minimap } });
  214. }
  215. )
  216. );
  217. var roundedSelection;
  218. options.appendChild(
  219. createOptionToggle(
  220. editor,
  221. 'roundedSelection',
  222. function () {
  223. return roundedSelection === false ? false : true;
  224. },
  225. function (editor, newValue) {
  226. roundedSelection = newValue;
  227. editor.updateOptions({ roundedSelection: roundedSelection });
  228. }
  229. )
  230. );
  231. var scrollBeyondLastLine;
  232. options.appendChild(
  233. createOptionToggle(
  234. editor,
  235. 'scrollBeyondLastLine',
  236. function () {
  237. return scrollBeyondLastLine === false ? false : true;
  238. },
  239. function (editor, newValue) {
  240. scrollBeyondLastLine = newValue;
  241. editor.updateOptions({ scrollBeyondLastLine: scrollBeyondLastLine });
  242. }
  243. )
  244. );
  245. var renderWhitespace;
  246. options.appendChild(
  247. createOptionToggle(
  248. editor,
  249. 'renderWhitespace',
  250. function () {
  251. return renderWhitespace === true ? true : false;
  252. },
  253. function (editor, newValue) {
  254. renderWhitespace = newValue;
  255. editor.updateOptions({ renderWhitespace: renderWhitespace });
  256. }
  257. )
  258. );
  259. var readOnly;
  260. options.appendChild(
  261. createOptionToggle(
  262. editor,
  263. 'readOnly',
  264. function () {
  265. return readOnly === true ? true : false;
  266. },
  267. function (editor, newValue) {
  268. readOnly = newValue;
  269. editor.updateOptions({ readOnly: readOnly });
  270. }
  271. )
  272. );
  273. var wordWrap;
  274. options.appendChild(
  275. createOptionToggle(
  276. editor,
  277. 'wordWrap',
  278. function () {
  279. return wordWrap === true ? true : false;
  280. },
  281. function (editor, newValue) {
  282. wordWrap = newValue;
  283. editor.updateOptions({ wordWrap: wordWrap ? 'on' : 'off' });
  284. }
  285. )
  286. );
  287. var folding;
  288. options.appendChild(
  289. createOptionToggle(
  290. editor,
  291. 'folding',
  292. function () {
  293. return folding === false ? false : true;
  294. },
  295. function (editor, newValue) {
  296. folding = newValue;
  297. editor.updateOptions({ folding: folding });
  298. }
  299. )
  300. );
  301. var bracketPairColorizationEnabled = false;
  302. options.appendChild(
  303. createOptionToggle(
  304. editor,
  305. 'bracketPairColorizationEnabled',
  306. function () {
  307. return bracketPairColorizationEnabled === false ? false : true;
  308. },
  309. function (editor, newValue) {
  310. bracketPairColorizationEnabled = newValue;
  311. editor.updateOptions({
  312. 'bracketPairColorization.enabled': bracketPairColorizationEnabled
  313. });
  314. }
  315. )
  316. );
  317. }
  318. function createOptionToggle(editor, labelText, stateReader, setState) {
  319. var domNode = document.createElement('div');
  320. domNode.className = 'option toggle';
  321. var input = document.createElement('input');
  322. input.type = 'checkbox';
  323. var label = document.createElement('label');
  324. label.appendChild(input);
  325. label.appendChild(document.createTextNode(labelText));
  326. domNode.appendChild(label);
  327. var renderState = function () {
  328. input.checked = stateReader();
  329. };
  330. renderState();
  331. editor.onDidChangeConfiguration(function () {
  332. renderState();
  333. });
  334. input.onchange = function () {
  335. setState(editor, !stateReader());
  336. };
  337. return domNode;
  338. }
  339. function ComboBox(label, externalOptions) {
  340. this.id = 'combobox-' + label.toLowerCase().replace(/\s/g, '-');
  341. this.domNode = document.createElement('div');
  342. this.domNode.setAttribute('style', 'display: inline; margin-right: 5px;');
  343. this.label = document.createElement('label');
  344. this.label.innerHTML = label;
  345. this.label.setAttribute('for', this.id);
  346. this.domNode.appendChild(this.label);
  347. this.comboBox = document.createElement('select');
  348. this.comboBox.setAttribute('id', this.id);
  349. this.comboBox.setAttribute('name', this.id);
  350. this.comboBox.onchange = function (e) {
  351. var target = e.target || e.srcElement;
  352. this.options[target.options[target.selectedIndex].value].callback();
  353. }.bind(this);
  354. this.domNode.appendChild(this.comboBox);
  355. this.options = [];
  356. for (var name in externalOptions) {
  357. if (externalOptions.hasOwnProperty(name)) {
  358. var optionElement = document.createElement('option');
  359. optionElement.value = name;
  360. optionElement.innerHTML = name;
  361. this.options[name] = {
  362. element: optionElement,
  363. callback: externalOptions[name]
  364. };
  365. this.comboBox.appendChild(optionElement);
  366. }
  367. }
  368. }
  369. ComboBox.prototype.set = function (name) {
  370. if (this.options[name]) {
  371. this.options[name].element.selected = true;
  372. }
  373. };
  374. });