@senx/discovery-widgets
Version:
Discovery Widgets Elements
615 lines (614 loc) • 25.1 kB
JavaScript
/*
* Copyright 2022-2025 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 { Param } from "../../model/param";
import { Logger } from "../../utils/logger";
import { GTSLib } from "../../utils/gts.lib";
import { Utils } from "../../utils/utils";
import domtoimage from "dom-to-image";
import { LangUtils } from "../../utils/lang-utils";
export class DiscoveryButtonComponent {
constructor() {
this.options = new Param();
this.debug = false;
this.language = 'warpscript';
this.vars = '{}';
this.parsing = false;
this.rendering = false;
this.label = 'Ok';
this.labelPosition = 'center';
this.loading = false;
this.loadingBtnGrp = [];
this.defOptions = new Param();
this.innerVars = {};
}
varsUpdate(newValue, oldValue) {
var _a;
let vars = this.vars;
if (!!this.vars && typeof this.vars === 'string') {
vars = JSON.parse(this.vars);
}
if (!Utils.deepEqual(vars, this.innerVars)) {
this.innerVars = Utils.clone(vars);
this.parseResult();
}
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['varsUpdate'], { vars: this.vars, newValue, oldValue });
}
updateRes(newValue, oldValue) {
if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
this.parseResult();
}
}
optionsUpdate(newValue, oldValue) {
var _a, _b;
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['optionsUpdate'], newValue, oldValue);
let opts = newValue;
if (!!newValue && typeof newValue === 'string') {
opts = JSON.parse(newValue);
}
if (!Utils.deepEqual(opts, this.innerOptions)) {
this.innerOptions = Utils.clone(opts);
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['optionsUpdate 2'], { options: this.innerOptions, newValue, oldValue });
this.parseResult();
}
}
discoveryEventHandler(event) {
const res = Utils.parseEventData(event.detail, this.options.eventHandler, this.el.id);
if (res.style) {
this.innerStyle = Utils.clone(Object.assign(Object.assign({}, this.innerStyle), res.style));
}
if (res.vars) {
this.innerVars = Utils.clone(Object.assign(Object.assign({}, this.innerVars), res.vars));
}
}
async resize() {
// empty
}
// noinspection JSUnusedLocalSymbols
async export(_type = 'png') {
let bgColor = Utils.getCSSColor(this.el, '--warp-view-bg-color', 'transparent');
bgColor = (this.options || { bgColor }).bgColor || bgColor;
const dm = ((this.innerResult || {
globalParams: { bgColor },
}).globalParams || { bgColor });
bgColor = dm.bgColor || bgColor;
return await domtoimage.toPng(this.root, { height: this.height, width: this.width, bgcolor: bgColor });
}
// noinspection JSUnusedGlobalSymbols
componentWillLoad() {
var _a;
this.LOG = new Logger(DiscoveryButtonComponent, this.debug);
this.parsing = true;
if (typeof this.options === 'string') {
this.innerOptions = JSON.parse(this.options);
}
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['componentWillLoad'], {
type: this.type,
options: this.innerOptions,
});
this.parseResult();
this.draw.emit();
}
parseResult() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
this.macros = [];
this.innerResult = GTSLib.getData(this.result);
const btnLabel = (_g = (_d = (_c = (_b = (_a = this.innerResult) === null || _a === void 0 ? void 0 : _a.globalParams) === null || _b === void 0 ? void 0 : _b.button) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : (_f = (_e = this.innerOptions) === null || _e === void 0 ? void 0 : _e.button) === null || _f === void 0 ? void 0 : _f.label) !== null && _g !== void 0 ? _g : 'Ok';
const labelPosition = (_p = (_k = (_j = (_h = this.innerOptions) === null || _h === void 0 ? void 0 : _h.button) === null || _j === void 0 ? void 0 : _j.labelPosition) !== null && _k !== void 0 ? _k : (_o = (_m = (_l = this.innerResult) === null || _l === void 0 ? void 0 : _l.globalParams) === null || _m === void 0 ? void 0 : _m.button) === null || _o === void 0 ? void 0 : _o.labelPosition) !== null && _p !== void 0 ? _p : 'center';
this.label = btnLabel;
this.labelPosition = labelPosition;
let options = Utils.mergeDeep(this.defOptions, (_q = this.innerOptions) !== null && _q !== void 0 ? _q : {});
options = Utils.mergeDeep(options !== null && options !== void 0 ? options : {}, this.innerResult.globalParams);
this.innerOptions = Utils.clone(options);
if (!!this.vars && typeof this.vars === 'string') {
this.innerVars = JSON.parse(this.vars);
}
else if (this.vars) {
this.innerVars = this.vars;
}
this.innerStyle = Utils.clone(Object.assign(Object.assign({}, this.innerStyle), (_s = (_r = this.innerOptions) === null || _r === void 0 ? void 0 : _r.customStyles) !== null && _s !== void 0 ? _s : {}));
setTimeout(() => { var _a, _b; return this.active = (_b = (((_a = this.innerResult) === null || _a === void 0 ? void 0 : _a.data) || []).find((v) => v.active)) === null || _b === void 0 ? void 0 : _b.value; });
if (this.type === 'button:group') {
((_t = this.innerResult.data) !== null && _t !== void 0 ? _t : []).forEach((macro, i) => {
var _a, _b, _c, _d, _e;
this.macros.push({
macro,
button: (_e = (_c = (_b = ((_a = this.innerResult.params) !== null && _a !== void 0 ? _a : [])[i]) === null || _b === void 0 ? void 0 : _b.button) !== null && _c !== void 0 ? _c : (_d = this.innerOptions) === null || _d === void 0 ? void 0 : _d.button) !== null && _e !== void 0 ? _e : {
label: btnLabel,
labelPosition,
},
});
});
}
else {
this.macros.push({
macro: this.innerResult.data[0] // the GTSLib.getData returns an array with the object
});
}
}
processEvents(result) {
var _a, _b;
if (result) {
for (const e of ((_a = result.events) !== null && _a !== void 0 ? _a : [])) {
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['handleClick', 'emit'], { discoveryEvent: e });
if (typeof e.value !== 'object' && GTSLib.isArray(e.value)) {
e.value = [e.value];
}
this.discoveryEvent.emit(Object.assign(Object.assign({}, e), { source: this.el.id }));
}
}
}
handleClick(macro, index) {
var _a, _b, _c;
// if macro is a js object, we don't need to do a ws execution, it is already the result. real macros are rendered as strings by Warp 10.
if (typeof macro.macro === 'object') {
this.processEvents(macro.macro);
}
else {
this.loading = true;
this.loadingBtnGrp[index !== null && index !== void 0 ? index : 0] = true;
const ws = LangUtils.prepare(`${macro ? macro.macro : this.innerResult.data} EVAL`, // inside a ``, js arrays of string are rendered as concatenated strings
(_a = this.innerVars) !== null && _a !== void 0 ? _a : {}, (_c = (_b = this.innerOptions) === null || _b === void 0 ? void 0 : _b.skippedVars) !== null && _c !== void 0 ? _c : [], this.type, this.language);
Utils.httpPost(this.url, ws, this.innerOptions.httpHeaders)
.then(res => {
var _a, _b;
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['handleClick', 'res.data'], res.data);
const result = GTSLib.getData(res.data);
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['handleClick', 'getData'], result);
this.processEvents(result);
this.loading = false;
this.loadingBtnGrp[index !== null && index !== void 0 ? index : 0] = false;
this.execResult.emit(res.data);
})
.catch(e => {
var _a;
this.loading = false;
this.loadingBtnGrp[index !== null && index !== void 0 ? index : 0] = false;
this.statusError.emit(e);
this.execError.emit(e);
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.error(['exec'], e);
});
}
}
toggle(value) {
var _a, _b;
this.active = value;
for (const e of ((_a = this.innerResult.events) !== null && _a !== void 0 ? _a : [])) {
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['handleClick', 'emit'], { discoveryEvent: e });
if (!e.value) {
e.value = {};
}
e.value[e.selector] = value;
this.discoveryEvent.emit(Object.assign(Object.assign({}, e), { source: this.el.id }));
}
}
generateStyle(innerStyle) {
return Object.keys(innerStyle || {}).map(k => k + ' { ' + innerStyle[k] + ' }').join('\n');
}
render() {
var _a, _b, _c, _d, _e, _f, _g, _h;
return [
h("style", { key: '600b3105e96e10cd8c1a976ae705696a63fccbbf' }, this.generateStyle(this.innerStyle)),
h("div", { key: '1533d2adf6494045bf91333b0f5c88808bb64997', ref: el => this.root = el, class: "button-wrapper" }, this.type === 'button'
? h("button", { type: "button", class: {
'discovery-btn': true,
'button--loading': this.isLoading(0),
'button--start': this.labelPosition === 'start',
'button--center': this.labelPosition === 'center',
'button--end': this.labelPosition === 'end',
}, disabled: this.isLoading(0), innerHTML: this.label, onClick: () => this.handleClick(this.macros[0]) })
: '', this.type === 'button:radio'
? h("div", { class: "discovery-btn-radio" }, GTSLib.isArray((_a = this.innerResult) === null || _a === void 0 ? void 0 : _a.data)
? ((_c = (_b = this.innerResult) === null || _b === void 0 ? void 0 : _b.data) !== null && _c !== void 0 ? _c : []).map((v) => h("button", { type: "button", class: {
'discovery-btn': true,
'active': v.value === this.active,
'button--start': this.labelPosition === 'start',
'button--center': this.labelPosition === 'center',
'button--end': this.labelPosition === 'end',
}, innerHTML: v.label, onClick: () => this.toggle(v.value) })) : '') : '', this.type === 'button:group'
? h("div", { class: {
'discovery-btn-group': true,
'discovery-btn-group-v': !!((_e = (_d = this.innerOptions) === null || _d === void 0 ? void 0 : _d.button) === null || _e === void 0 ? void 0 : _e.vertical),
'discovery-btn-group-h': !((_g = (_f = this.innerOptions) === null || _f === void 0 ? void 0 : _f.button) === null || _g === void 0 ? void 0 : _g.vertical),
} }, ((_h = this.macros) !== null && _h !== void 0 ? _h : []).map((b, i) => h("button", { type: "button", class: {
'discovery-btn': true,
'button--loading': this.isLoading(i),
'button--start': b.button.labelPosition === 'start',
'button--center': b.button.labelPosition === 'center',
'button--end': b.button.labelPosition === 'end',
}, disabled: this.isLoading(i), innerHTML: b.button.label, onClick: () => this.handleClick(b, i) }))) : ''),
];
}
isLoading(index) {
return this.loadingBtnGrp[index !== null && index !== void 0 ? index : 0];
}
static get is() { return "discovery-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["discovery-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["discovery-button.css"]
};
}
static get properties() {
return {
"result": {
"type": "string",
"mutable": true,
"complexType": {
"original": "DataModel | string",
"resolved": "DataModel | string",
"references": {
"DataModel": {
"location": "import",
"path": "../../model/types",
"id": "src/model/types.ts::DataModel"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "result",
"reflect": false
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "ChartType",
"resolved": "string",
"references": {
"ChartType": {
"location": "import",
"path": "../../model/types",
"id": "src/model/types.ts::ChartType"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "type",
"reflect": false
},
"options": {
"type": "string",
"mutable": true,
"complexType": {
"original": "Param | string",
"resolved": "Param | string",
"references": {
"Param": {
"location": "import",
"path": "../../model/param",
"id": "src/model/param.ts::Param"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "options",
"reflect": false,
"defaultValue": "new Param()"
},
"width": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "width",
"reflect": false
},
"height": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "height",
"reflect": false
},
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "debug",
"reflect": false,
"defaultValue": "false"
},
"url": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "url",
"reflect": false
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'warpscript' | 'flows'",
"resolved": "\"flows\" | \"warpscript\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "language",
"reflect": false,
"defaultValue": "'warpscript'"
},
"vars": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "vars",
"reflect": false,
"defaultValue": "'{}'"
}
};
}
static get states() {
return {
"parsing": {},
"rendering": {},
"label": {},
"labelPosition": {},
"innerStyle": {},
"active": {},
"innerOptions": {},
"loading": {},
"loadingBtnGrp": {}
};
}
static get events() {
return [{
"method": "draw",
"name": "draw",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "execResult",
"name": "execResult",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any[]",
"resolved": "any[]",
"references": {}
}
}, {
"method": "execError",
"name": "execError",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "statusError",
"name": "statusError",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "discoveryEvent",
"name": "discoveryEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "DiscoveryEvent",
"resolved": "DiscoveryEvent",
"references": {
"DiscoveryEvent": {
"location": "import",
"path": "../../model/types",
"id": "src/model/types.ts::DiscoveryEvent"
}
}
}
}];
}
static get methods() {
return {
"resize": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"export": {
"complexType": {
"signature": "(_type?: \"png\" | \"svg\") => Promise<string>",
"parameters": [{
"name": "_type",
"type": "\"svg\" | \"png\"",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"Param": {
"location": "import",
"path": "../../model/param",
"id": "src/model/param.ts::Param"
}
},
"return": "Promise<string>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "vars",
"methodName": "varsUpdate"
}, {
"propName": "result",
"methodName": "updateRes"
}, {
"propName": "options",
"methodName": "optionsUpdate"
}];
}
static get listeners() {
return [{
"name": "discoveryEvent",
"method": "discoveryEventHandler",
"target": "window",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=discovery-button.js.map