/** * This JS file is for Monaco management */ class MonacoCreator { constructor(parent) { this.parent = parent; this.jsEditor = null; this.monacoMode = "javascript"; this.blockEditorChange = false; this.compilerTriggerTimeoutID = null; } // ACCESSORS get JsEditor() { return this.jsEditor; }; getCode() { if(this.jsEditor) return this.jsEditor.getValue(); else return ""; }; setCode(value) { this.jsEditor.setValue(value); }; get MonacoMode() { return this.monacoMode; }; set MonacoMode(mode) { if (this.monacoMode != "javascript" && this.monacoMode != "typescript") console.warn("Error while defining Monaco Mode"); this.monacoMode = mode; }; get BlockEditorChange() { return this.blockEditorChange; }; set BlockEditorChange(value) { this.blockEditorChange = value; }; // FUNCTIONS /** * Load the Monaco Node module. */ loadMonaco(typings) { var xhr = new XMLHttpRequest(); xhr.open('GET', typings || "babylon.d.txt", true); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } }); require(['vs/editor/editor.main'], function () { const typescript = monaco.languages.typescript; if (this.monacoMode === "javascript") { typescript.javascriptDefaults.setCompilerOptions({ noLib: false, allowNonTsExtensions: true // required to prevent Uncaught Error: Could not find file: 'inmemory://model/1'. }); typescript.javascriptDefaults.addExtraLib(xhr.responseText, 'babylon.d.ts'); } else { typescript.typescriptDefaults.setCompilerOptions({ module: typescript.ModuleKind.AMD, target: typescript.ScriptTarget.ES6, noLib: false, noResolve: true, suppressOutputPathCheck: true, allowNonTsExtensions: true // required to prevent Uncaught Error: Could not find file: 'inmemory://model/1'. }); typescript.typescriptDefaults.addExtraLib(xhr.responseText, 'babylon.d.ts'); } this.parent.main.run(); }.bind(this)); } } }.bind(this); xhr.send(null); }; /** * Function to (re)create the editor */ createMonacoEditor() { var oldCode = ""; if (this.jsEditor) { oldCode = this.jsEditor.getValue(); this.jsEditor.dispose(); } var editorOptions = { value: "", language: this.monacoMode, lineNumbers: true, tabSize: "auto", insertSpaces: "auto", roundedSelection: true, automaticLayout: true, scrollBeyondLastLine: false, readOnly: false, theme: this.parent.settingsPG.vsTheme, contextmenu: false, folding: true, showFoldingControls: "always", renderIndentGuides: true, minimap: { enabled: true } }; editorOptions.minimap.enabled = document.getElementById("minimapToggle1280").classList.contains('checked'); this.jsEditor = monaco.editor.create(document.getElementById('jsEditor'), editorOptions); monaco.languages.registerColorProvider(this.monacoMode, { provideColorPresentations: (model, colorInfo) => { const color = colorInfo.color; const precision = 100.0; const converter = (n) => Math.round(n * precision) / precision; let label; if (color.alpha === undefined || color.alpha === 1.0) { label = `(${converter(color.red)}, ${converter(color.green)}, ${converter(color.blue)})`; } else { label = `(${converter(color.red)}, ${converter(color.green)}, ${converter(color.blue)}, ${converter(color.alpha)})`; } return [ { label: label } ]; }, provideDocumentColors: (model) => { const digitGroup = "\\s*(\\d*(?:\\.\\d+)?)\\s*"; // we add \n{0} to workaround a Monaco bug, when setting regex options on their side const regex = `BABYLON\\.Color(?:3|4)\\s*\\(${digitGroup},${digitGroup},${digitGroup}(?:,${digitGroup})?\\)\\n{0}`; const matches = model.findMatches(regex, null, true, true, null, true); const converter = (g) => g === undefined ? undefined : Number(g); return matches.map(match => ({ color: { red: converter(match.matches[1]), green: converter(match.matches[2]), blue: converter(match.matches[3]), alpha: converter(match.matches[4]) }, range:{ startLineNumber: match.range.startLineNumber, startColumn: match.range.startColumn + match.matches[0].indexOf("("), endLineNumber: match.range.startLineNumber, endColumn: match.range.endColumn } })); } }); this.jsEditor.setValue(oldCode); this.jsEditor.onKeyUp(function () { this.parent.utils.markDirty(); }.bind(this)); }; detectLanguage(text) { return text && text.indexOf("class Playground") >= 0 ? "typescript" : "javascript"; } createDiff(left, right, diffView) { const language = this.detectLanguage(left); let leftModel = monaco.editor.createModel(left, language); let rightModel = monaco.editor.createModel(right, language); const diffOptions = { contextmenu: false, lineNumbers: true, readOnly: true, theme: this.parent.settingsPG.vsTheme, contextmenu: false, fontSize: this.parent.settingsPG.fontSize } const diffEditor = monaco.editor.createDiffEditor(diffView, diffOptions); diffEditor.setModel({ original: leftModel, modified: rightModel }); const cleanup = function() { diffView.style.display = "none"; // We need to properly dispose, else the monaco script editor will use those models in the editor compilation pipeline! leftModel.dispose(); rightModel.dispose(); diffEditor.dispose(); } diffEditor.addCommand(monaco.KeyCode.Escape, cleanup); diffEditor.focus(); } /** * Format the code in the editor */ formatCode () { this.jsEditor.getAction('editor.action.formatDocument').run(); }; /** * Toggle the minimap */ toggleMinimap () { var minimapToggle = document.getElementById("minimapToggle1280"); if (minimapToggle.classList.contains('checked')) { this.jsEditor.updateOptions({ minimap: { enabled: false } }); this.parent.utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap '); } else { this.jsEditor.updateOptions({ minimap: { enabled: true } }); this.parent.utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap '); } minimapToggle.classList.toggle('checked'); }; /** * Get the code in the editor */ async getRunCode() { var parent = this.parent; if (parent.settingsPG.ScriptLanguage == "JS") return this.jsEditor.getValue(); else if (parent.settingsPG.ScriptLanguage == "TS") { const model = this.jsEditor.getModel(); const uri = model.uri; const worker = await monaco.languages.typescript.getTypeScriptWorker(); const languageService = await worker(uri); const uriStr = uri.toString(); const result = await languageService.getEmitOutput(uriStr); const diagnostics = await Promise.all([languageService.getSyntacticDiagnostics(uriStr), languageService.getSemanticDiagnostics(uriStr)]); diagnostics.forEach(function(diagset) { if (diagset.length) { const diagnostic = diagset[0]; const position = model.getPositionAt(diagnostic.start); const error = new EvalError(diagnostic.messageText); error.lineNumber = position.lineNumber; error.columnNumber = position.column; throw error; } }); const output = result.outputFiles[0].text; const stub = "var createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }"; return output + stub; } }; };