119 lines
3.2 KiB
JavaScript
119 lines
3.2 KiB
JavaScript
goog.loadJs('common', () => {
|
|
|
|
goog.require('monaco');
|
|
goog.require('Mixly.Registry');
|
|
goog.provide('Mixly.MonacoTheme');
|
|
|
|
const { Registry } = Mixly;
|
|
|
|
|
|
class MonacoTheme {
|
|
static {
|
|
this.cssClassNamePrefix = 'mts';
|
|
this.themesRegistry = new Registry();
|
|
this.supportThemes = [];
|
|
// this.supportThemes = ['cpp', 'python'];
|
|
|
|
this.getClassNameOfTerm = function (type, theme, term) {
|
|
return `${this.cssClassNamePrefix}-${type}-${theme}-${term}`;
|
|
}
|
|
|
|
/*this.themesRegistry.register('vs-dark-cpp', new MonacoTheme(
|
|
'vs-dark-cpp',
|
|
'cpp',
|
|
'dark',
|
|
goog.readJsonSync('../common/templates/json/tree-sitter/themes/dark-cpp.json')
|
|
));
|
|
|
|
this.themesRegistry.register('vs-light-cpp', new MonacoTheme(
|
|
'vs-light-cpp',
|
|
'cpp',
|
|
'light',
|
|
goog.readJsonSync('../common/templates/json/tree-sitter/themes/light-cpp.json')
|
|
));
|
|
|
|
this.themesRegistry.register('vs-dark-python', new MonacoTheme(
|
|
'vs-dark-python',
|
|
'python',
|
|
'dark',
|
|
goog.readJsonSync('../common/templates/json/tree-sitter/themes/dark-python.json')
|
|
));
|
|
|
|
this.themesRegistry.register('vs-light-python', new MonacoTheme(
|
|
'vs-light-python',
|
|
'python',
|
|
'light',
|
|
goog.readJsonSync('../common/templates/json/tree-sitter/themes/light-python.json')
|
|
));*/
|
|
}
|
|
|
|
#id_ = null;
|
|
#type_ = null;
|
|
#theme_ = null;
|
|
#$tag_ = null;
|
|
#config_ = null;
|
|
|
|
constructor(id, type, theme, config) {
|
|
this.#id_ = id;
|
|
this.#type_ = type;
|
|
this.#theme_ = theme;
|
|
this.load(config);
|
|
}
|
|
|
|
load(config) {
|
|
monaco.editor.defineTheme(this.#id_, config.base);
|
|
this.#config_ = config;
|
|
|
|
if (!this.#$tag_) {
|
|
let hasStyleNode = $('head').find(`style[style-id='${this.id_}']`).length;
|
|
if (hasStyleNode) {
|
|
return;
|
|
}
|
|
this.#$tag_ = $('<style></style>');
|
|
this.#$tag_.attr('style-id', this.id);
|
|
this.#$tag_.attr('type', 'text/css')
|
|
$('head').append(this.#$tag_);
|
|
}
|
|
|
|
this.#$tag_.html(this.generateCss());
|
|
}
|
|
|
|
generateCss() {
|
|
return Object.keys(this.#config_.monacoTreeSitter)
|
|
.map(term =>
|
|
`span.${MonacoTheme.getClassNameOfTerm(this.#type_, this.#theme_, term)}{${this.generateStyleOfTerm(term)}}`
|
|
)
|
|
.join('');
|
|
}
|
|
|
|
generateStyleOfTerm(term) {
|
|
const style = this.#config_.monacoTreeSitter[term];
|
|
if (!style) {
|
|
return '';
|
|
}
|
|
|
|
if (typeof style === 'string') {
|
|
return `color:${style}`;
|
|
}
|
|
|
|
return `color:${style.color};${style.extraCssStyles || ''}`;
|
|
}
|
|
|
|
getColorOfTerm(term) {
|
|
const style = this.#config_.monacoTreeSitter[term];
|
|
if (!style) {
|
|
return undefined;
|
|
}
|
|
return typeof style === 'object' ? style.color : style;
|
|
}
|
|
|
|
dispose() {
|
|
this.#$tag_ && this.#$tag_.remove();
|
|
this.#$tag_ = null;
|
|
this.#config_ = null;
|
|
}
|
|
}
|
|
|
|
Mixly.MonacoTheme = MonacoTheme;
|
|
|
|
}); |