/**
* 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;
}
};
};