@senx/discovery-code
Version:
Discovery Code Editor
232 lines (231 loc) • 7.93 kB
JavaScript
/*
* Copyright 2022-2024 SenX S.A.S.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { h } from "@stencil/core";
import { Config } from "../../model/config";
import { Logger } from "../../model/logger";
import { editor } from "monaco-editor";
import { EditorConfig } from "../../model/editorConfig";
import { Utils } from "../../model/utils";
var create = editor.create;
export class DiscoveryCodeRawResult {
constructor() {
this.loading = false;
this.innerConfig = {
editor: new EditorConfig(),
messageClass: '',
errorClass: '',
};
this.theme = 'light';
this.config = new Config();
this.debug = false;
this.result = undefined;
this.LOG = new Logger(DiscoveryCodeRawResult, this.debug);
}
setDebug(newValue) {
this.LOG.setDebug(newValue);
}
setConfig(newValue) {
let conf = (typeof newValue === 'string') ? JSON.parse(newValue || JSON.stringify(new Config())) : newValue || new Config();
this.innerConfig = Utils.mergeDeep(this.innerConfig, conf);
}
updateTheme(newValue) {
this.theme = newValue;
this.getTheme();
if (editor) {
editor.setTheme(this.getTheme());
}
}
setResult(newValue) {
var _a;
this.loading = true;
this.innerResult = newValue;
this.LOG.debug(['DiscoveryCodeRawResult'], 'The new value of result is: ', newValue);
this.buildEditor((_a = this.innerResult) !== null && _a !== void 0 ? _a : '');
this.loading = false;
}
getTheme() {
switch (this.theme) {
case 'dark':
return 'vs-dark';
case 'light':
default:
return 'vs';
}
}
componentWillLoad() {
this.innerResult = this.result;
self.MonacoEnvironment = {
getWorkerUrl: () => URL.createObjectURL(new Blob([`
self.MonacoEnvironment = {
baseUrl: 'https://unpkg.com/monaco-editor@0.45.0/min/'
};
importScripts('https://unpkg.com/monaco-editor@0.45.0/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' })),
};
let conf = (typeof this.config === 'string') ? JSON.parse(this.config || JSON.stringify(new Config())) : this.config || new Config();
this.innerConfig = Utils.mergeDeep(this.innerConfig, conf);
}
componentDidLoad() {
this.LOG.debug(['componentDidLoad'], this.innerResult);
this.loading = true;
this.buildEditor(this.innerResult);
this.loading = false;
}
buildEditor(json) {
this.LOG.debug(['buildEditor'], 'buildEditor', json, this.innerConfig);
try {
if (!this.resEd) {
this.resEd = create(this.editor, this.setOptions());
}
if (!!this.resEd) {
this.resEd.setValue(json !== null && json !== void 0 ? json : '');
}
}
catch (e) {
this.LOG.error(['buildEditor'], e);
}
this.loading = false;
}
setOptions() {
return {
value: '',
language: 'json',
bracketPairColorization: { enable: true },
minimap: { enabled: true },
lineHeight: DiscoveryCodeRawResult.LINE_HEIGHT,
automaticLayout: true,
scrollBeyondLastLine: false,
theme: this.getTheme(),
readOnly: !!this.innerConfig.editor.rawResultsReadOnly,
fixedOverflowWidgets: true,
lineNumbers: 'on',
wordWrap: 'on',
folding: false,
};
}
render() {
return h("div", { key: 'd2c2d9bc496da09d1227bc2edfefe4faaa769cb9', class: 'wrapper ' + this.theme }, this.loading ? h("div", { class: 'loader' }, h("div", { class: 'spinner' })) : '', h("div", { key: '0276f59303fc0b5a19b98a33c4533fa1e4320915', ref: el => this.editor = el }));
}
static get is() { return "discovery-code-raw-result"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["discovery-code-raw-result.scss"]
};
}
static get styleUrls() {
return {
"$": ["discovery-code-raw-result.css"]
};
}
static get properties() {
return {
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'light' | 'dark'",
"resolved": "\"dark\" | \"light\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "theme",
"reflect": false,
"defaultValue": "'light'"
},
"config": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Config | string",
"resolved": "Config | string",
"references": {
"Config": {
"location": "import",
"path": "../../model/config",
"id": "src/model/config.ts::Config"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "config",
"reflect": false,
"defaultValue": "new Config()"
},
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "debug",
"reflect": false,
"defaultValue": "false"
},
"result": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "result",
"reflect": false
}
};
}
static get watchers() {
return [{
"propName": "debug",
"methodName": "setDebug"
}, {
"propName": "config",
"methodName": "setConfig"
}, {
"propName": "theme",
"methodName": "updateTheme"
}, {
"propName": "result",
"methodName": "setResult"
}];
}
}
DiscoveryCodeRawResult.LINE_HEIGHT = 18;