314 lines
9.6 KiB
JavaScript
314 lines
9.6 KiB
JavaScript
(function(PolymerVis) {
|
|
PolymerVis.monaco = PolymerVis.monaco || {};
|
|
|
|
class MonacoProxy {
|
|
constructor(iframe, editorReference) {
|
|
this._iframe_ = iframe;
|
|
this._editorReference_ = editorReference;
|
|
this.languages.json.jsonDefaults.setDiagnosticsOptions;
|
|
}
|
|
get languages() {
|
|
return {
|
|
json: {
|
|
jsonDefaults: {
|
|
setDiagnosticsOptions: opts => {
|
|
this.postMessage({
|
|
path: ['monaco', 'languages', 'json', 'jsonDefaults'],
|
|
event: 'setDiagnosticsOptions',
|
|
args: [opts]
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
postMessage(msg) {
|
|
msg.editorReference = this._editorReference_;
|
|
this._iframe_.contentWindow.postMessage(msg, document.location.href);
|
|
}
|
|
get editor() {
|
|
return {
|
|
setModelLanguage: (model, language) => {
|
|
this.postMessage({
|
|
path: ['monaco', 'editor'],
|
|
event: 'setModelLanguage',
|
|
args: [null, language]
|
|
});
|
|
},
|
|
layout: () => {
|
|
this.postMessage({
|
|
path: ['monaco', 'editor'],
|
|
event: 'layout',
|
|
args: [null]
|
|
});
|
|
},
|
|
setTheme: theme => {
|
|
this.postMessage({
|
|
path: ['monaco', 'editor'],
|
|
event: 'setTheme',
|
|
args: [theme]
|
|
});
|
|
},
|
|
highlightLine: (debugInfo) => {
|
|
if(debugInfo){
|
|
this.postMessage({
|
|
path: ['monaco', 'editor'],
|
|
event: 'highlightLine',
|
|
args: [debugInfo]
|
|
})
|
|
}
|
|
},
|
|
removeHighlights: () => {
|
|
this.postMessage({
|
|
path: ['monaco', 'editor'],
|
|
event: 'removeHighlights',
|
|
args: []
|
|
})
|
|
},
|
|
addTypeScriptLibs: (libs) => {
|
|
this.postMessage({
|
|
path: ['monaco', 'editor'],
|
|
event: 'addLibs',
|
|
args: [libs]
|
|
})
|
|
}
|
|
};
|
|
}
|
|
}
|
|
|
|
class EditorProxy {
|
|
constructor(iframe, editorReference) {
|
|
this._iframe_ = iframe;
|
|
this._editorReference_ = editorReference;
|
|
}
|
|
|
|
postMessage(msg) {
|
|
msg.editorReference = this._editorReference_;
|
|
this._iframe_.contentWindow.postMessage(msg, document.location.href);
|
|
}
|
|
|
|
updateOptions(opts) {
|
|
this.postMessage({
|
|
path: ['editor'],
|
|
event: 'updateOptions',
|
|
args: [opts]
|
|
});
|
|
}
|
|
|
|
getModel() {
|
|
return {
|
|
setValue: value => {
|
|
this.postMessage({
|
|
path: ['editor'],
|
|
event: 'setValue',
|
|
args: [value]
|
|
});
|
|
}
|
|
};
|
|
}
|
|
|
|
dispose() {
|
|
this.postMessage({path: ['editor'], event: 'dispose', args: []});
|
|
}
|
|
}
|
|
|
|
class MonacoIFrame {
|
|
constructor(root) {
|
|
this._root_ = root;
|
|
this._iframe_ = document.createElement('iframe');
|
|
this._iframe_.id = 'monaco-iframe';
|
|
this._iframe_.scrolling = 'no';
|
|
|
|
this._root_.appendChild(this._iframe_);
|
|
|
|
this._node_ = this.document.createElement('div');
|
|
this._node_.id = 'editor';
|
|
this.document.body.appendChild(this._node_);
|
|
this._monaco_ = new MonacoProxy(this.iframe);
|
|
this._editor_ = new EditorProxy(this.iframe);
|
|
}
|
|
get monaco() {
|
|
return this._monaco_;
|
|
}
|
|
get editor() {
|
|
return this._editor_;
|
|
}
|
|
get root() {
|
|
return this._root_;
|
|
}
|
|
get node() {
|
|
return this._node_;
|
|
}
|
|
get iframe() {
|
|
return this._iframe_;
|
|
}
|
|
get document() {
|
|
return this.iframe.contentWindow.document;
|
|
}
|
|
get proxy() {
|
|
return this._proxy_;
|
|
}
|
|
resize(w, h) {
|
|
this.node.style.height = h;
|
|
this.node.style.width = w;
|
|
}
|
|
insertScriptElement({src, text, onload}) {
|
|
var ele = this.document.createElement('script');
|
|
if (src) ele.src = src;
|
|
if (text) ele.text = text;
|
|
if (onload) ele.onload = onload;
|
|
this.document.head.appendChild(ele);
|
|
}
|
|
|
|
insertStyle() {
|
|
var css = `#editor {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.debug-red {
|
|
background : red;
|
|
}
|
|
.debug-green {
|
|
background : green;
|
|
}
|
|
html,body {
|
|
margin : 0px;
|
|
}`;
|
|
var head = this.document.head;
|
|
var style = this.document.createElement('style');
|
|
style.type = 'text/css';
|
|
if (style.styleSheet){
|
|
style.styleSheet.cssText = css;
|
|
} else {
|
|
style.appendChild(this.document.createTextNode(css));
|
|
}
|
|
head.appendChild(style);
|
|
}
|
|
|
|
init(libPath, opts) {
|
|
this.insertScriptElement({
|
|
src: `${libPath}/loader.js`,
|
|
onload: () => {
|
|
this.insertScriptElement({text: this.loaderOnLoad(libPath, opts)});
|
|
this.insertStyle();
|
|
}
|
|
});
|
|
}
|
|
|
|
loaderOnLoad(libPath, opts = {}) {
|
|
return `
|
|
var editorReference = "${opts.editorReference}"
|
|
var proxy = {};
|
|
var queue = [];
|
|
|
|
require.config({
|
|
paths: {vs: "${libPath}"}
|
|
});
|
|
|
|
require(['vs/editor/editor.main'], () => {
|
|
proxy.monaco = monaco;
|
|
var div = document.querySelector('#editor')
|
|
proxy.editor = monaco.editor.create(div, ${JSON.stringify(opts)});
|
|
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
|
|
target: monaco.languages.typescript.ScriptTarget.ES2017,
|
|
allowNonTsExtensions: true,
|
|
noLib: true
|
|
});
|
|
// [
|
|
// {url : 'https://cdn.rawgit.com/Microsoft/TypeScript/64b3086f/lib/lib.es6.d.ts', name : 'es6.d.ts'},
|
|
// {url : 'https://cdn.rawgit.com/anandanand84/technicalindicators/235ff767/declarations/generated.d.ts', name : 'Indicators.d.ts', convert : true}
|
|
// ]
|
|
proxy.model = proxy.editor.getModel();
|
|
proxy.model.onDidChangeContent(() => {
|
|
parent.postMessage({editorReference: editorReference, event: 'value-changed', details: proxy.model.getValue()}, parent.document.location.href);
|
|
});
|
|
proxy.editor.onDidFocusEditor(() => {
|
|
parent.postMessage({editorReference: editorReference, event: 'editor-focused'}, parent.document.location.href);
|
|
});
|
|
queue.forEach(e => handler(e));
|
|
queue = [];
|
|
parent.postMessage({editorReference: editorReference, ready: true}, parent.document.location.href);
|
|
resizeHandler();
|
|
});
|
|
|
|
async function loadLibs(libs) {
|
|
for(let lib of libs) {
|
|
var response = await fetch(lib.url)
|
|
var types = await response.text();
|
|
if(lib.convert)
|
|
types = types.replace(new RegExp('default ', 'g'), '').split('export').join('declare');
|
|
monaco.languages.typescript.typescriptDefaults.addExtraLib(types, lib.name);
|
|
console.log('Added lib ', lib.name);
|
|
}
|
|
}
|
|
|
|
var resizeHandler = ()=> {
|
|
if(proxy.editor) {
|
|
var clientRects = document.body.getClientRects()[0]
|
|
proxy.editor.layout({width : clientRects.width, height: clientRects.height})
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', resizeHandler);
|
|
|
|
window.addEventListener('message', handler);
|
|
|
|
function handler(e) {
|
|
var {path, event, args} = e.data;
|
|
var node = path[0];
|
|
if (!proxy[node]) {
|
|
queue.push(e);
|
|
return;
|
|
}
|
|
if (event === 'setValue') {
|
|
proxy.editor.getModel().setValue(args[0]);
|
|
return;
|
|
}
|
|
if(event === 'highlightLine') {
|
|
proxy.editor.decorationList = [];
|
|
var debugInfo = args[0];
|
|
Object.keys(debugInfo).forEach(function (line) {
|
|
var lineNo = line - 2;
|
|
var status = debugInfo[line] === 0 ? 'debug-red' : 'debug-green';
|
|
proxy.editor.decorationList.push({
|
|
range: new monaco.Range(lineNo,1,lineNo,1),
|
|
options: {
|
|
isWholeLine: true,
|
|
className: status,
|
|
}
|
|
});
|
|
})
|
|
proxy.editor.lastDecorations = proxy.editor.deltaDecorations([], proxy.editor.decorationList);;
|
|
}
|
|
if(event === 'removeHighlights') {
|
|
if(proxy.editor.lastDecorations && proxy.editor.lastDecorations.length > 1) {
|
|
proxy.editor.lastDecorations = proxy.editor.deltaDecorations(proxy.editor.lastDecorations, [{ range: new monaco.Range(1,1,1,1), options : { } }]);
|
|
}
|
|
}
|
|
if(event === 'addLibs') {
|
|
console.log('loading libs ', args[0])
|
|
var libs = args[0];
|
|
loadLibs(libs);
|
|
}
|
|
if (event === 'layout') {
|
|
resizeHandler();
|
|
}
|
|
if (event === 'setModelLanguage') {
|
|
args[0] = proxy.editor.getModel();
|
|
}
|
|
try {
|
|
let cmd = proxy;
|
|
path.forEach(k => { cmd = cmd[k]; });
|
|
cmd[event](...args);
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
`;
|
|
}
|
|
}
|
|
|
|
PolymerVis.monaco = PolymerVis.monaco || {};
|
|
PolymerVis.monaco.MonacoIFrame = MonacoIFrame;
|
|
})((window.PolymerVis = window.PolymerVis || {}));
|