@senx/discovery-plugin-marauder
Version:
Discovery plugin - Marauder's map
281 lines (277 loc) • 12.6 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { a as DataModel } from './types.js';
import { P as Param, G as GTSLib, l as lodash, U as Utils, L as Logger } from './utils.js';
import { a as html2canvas } from './html2canvas.js';
import { d as defineCustomElement$1 } from './discovery-spinner2.js';
const discoverySvgCss = "/*!\n * Copyright 2022-2023 SenX S.A.S.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */:host{display:block;width:100%;height:100%;position:relative}:host .hoverable{cursor:pointer}:host .svg-wrapper{position:absolute}:host .svg-wrapper .svg-container{height:100%}:host .svg-wrapper .svg-container svg{display:inline-block;position:relative;width:auto;margin:auto;overflow:hidden;height:100%;max-width:100%}";
const DiscoverySvgStyle0 = discoverySvgCss;
const DiscoverySvgComponent = /*@__PURE__*/ proxyCustomElement(class DiscoverySvgComponent extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.draw = createEvent(this, "draw", 7);
this.discoveryEvent = createEvent(this, "discoveryEvent", 7);
this.defOptions = new Param();
this.funqueue = [];
this.refs = [];
this.result = undefined;
this.type = undefined;
this.start = undefined;
this.options = new Param();
this.width = undefined;
this.height = undefined;
this.debug = false;
this.unit = '';
this.url = undefined;
this.chartTitle = undefined;
this.execTime = 0;
this.bgColor = undefined;
this.fontColor = undefined;
this.parsing = false;
this.toDisplay = [];
this.innerStyle = undefined;
this.innerResult = undefined;
this.innerOptions = undefined;
}
updateRes() {
this.innerResult = GTSLib.getData(this.result);
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 (!lodash.exports.isEqual(opts, this.innerOptions)) {
this.innerOptions = Object.assign({}, opts);
setTimeout(() => this.parseResult());
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['optionsUpdate 2'], { options: this.innerOptions, newValue, oldValue });
}
}
discoveryEventHandler(event) {
this.funqueue.push(this.wrapFunction(this.processEvent.bind(this), this, [event]));
}
async resize() {
const dims = Utils.getContentBounds(this.el.parentElement);
this.width = dims.w;
this.height = dims.h;
return Promise.resolve();
}
componentWillLoad() {
const dims = Utils.getContentBounds(this.el.parentElement);
this.width = dims.w;
this.height = dims.h;
this.parseResult();
this.processQueue();
}
convert(data) {
var _a, _b;
const toDisplay = [];
this.refs = [];
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['convert'], data);
let options = Utils.mergeDeep(this.defOptions, this.innerOptions || {});
options = Utils.mergeDeep(options || {}, data.globalParams);
this.innerOptions = Object.assign({}, options);
if (this.innerOptions.customStyles) {
this.innerStyle = Object.assign(Object.assign({}, this.innerStyle), this.innerOptions.customStyles || {});
}
if (GTSLib.isArray(data.data)) {
(data.data || []).forEach(img => {
var _a;
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['convert'], DiscoverySvgComponent.isSVG(img));
if (DiscoverySvgComponent.isSVG(img)) {
toDisplay.push(this.sanitize(img));
}
});
}
else if (data.data && DiscoverySvgComponent.isSVG(data.data)) {
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['convert'], DiscoverySvgComponent.isSVG(data.data));
toDisplay.push(this.sanitize(data.data));
}
return toDisplay;
}
processEvent(event) {
return new Promise(resolve => {
const res = Utils.parseEventData(event.detail, this.innerOptions.eventHandler, this.el.id);
if (res.style) {
this.innerStyle = Object.assign(Object.assign({}, this.innerStyle), res.style);
}
if (res.xpath) {
const toDisplay = [];
(this.toDisplay || []).forEach(img => {
var _a;
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['convert'], DiscoverySvgComponent.isSVG(img));
if (DiscoverySvgComponent.isSVG(img)) {
toDisplay.push(this.sanitize(img, res.xpath.selector, res.xpath.value));
}
});
this.toDisplay = [...toDisplay];
}
resolve(true);
});
}
wrapFunction(fn, context, params) {
return () => fn.apply(context, params);
}
processQueue() {
// eslint-disable-next-line @typescript-eslint/no-misused-promises
void new Promise(async (resolve) => {
while (this.funqueue.length > 0) {
await (this.funqueue.shift())();
}
resolve(true);
}).then(() => setTimeout(() => this.processQueue(), 100));
}
parseResult() {
var _a;
this.parsing = true;
this.LOG = new Logger(DiscoverySvgComponent, this.debug);
if (typeof this.options === 'string') {
this.innerOptions = JSON.parse(this.options);
}
else {
this.innerOptions = this.options;
}
this.innerResult = GTSLib.getData(this.result);
this.toDisplay = this.convert(this.innerResult || new DataModel());
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['componentWillLoad'], {
type: this.type,
options: this.innerOptions,
toDisplay: this.toDisplay,
});
setTimeout(() => {
this.refs.forEach(svgWrapper => {
var _a;
(((_a = this.innerOptions.svg) === null || _a === void 0 ? void 0 : _a.handlers) || []).forEach(h => {
if (!!h.selector) {
svgWrapper.querySelectorAll(h.selector).forEach(elem => {
elem.classList.add('hoverable');
if (!!h.click) {
elem.addEventListener('click', () => this.triggerEvent(h.event));
}
if (!!h.hover) {
elem.addEventListener('mouseover', () => this.triggerEvent(h.event));
}
});
}
});
});
});
this.parsing = false;
this.draw.emit();
}
static isSVG(data) {
return typeof data === 'string' && /<svg/gi.test(data);
}
sanitize(svg, xpath, replacement) {
var _a;
try {
const svgDoc = Utils.parseXML(svg, 'image/svg+xml');
const el = svgDoc.getElementsByTagName('svg').item(0);
if (!!xpath) {
const nsXpath = xpath.split('/').filter(e => !!e).map(e => 'svg:' + e).join('/');
const iterator = svgDoc.evaluate(nsXpath, svgDoc, prefix => prefix === 'svg' ? 'http://www.w3.org/2000/svg' : null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
let elem = iterator.iterateNext();
const elemsToReplace = [];
while (elem) {
elemsToReplace.push(elem);
elem = iterator.iterateNext();
}
elemsToReplace.forEach(e => {
if (typeof replacement === 'string') {
const parent = e.parentElement;
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
g.innerHTML = replacement.trim();
parent.replaceChild(g.firstChild, e);
}
else {
Object.keys(replacement).forEach(k => e.setAttribute(k, replacement[k].toString()));
}
});
}
if (el.getAttribute('width') && el.getAttribute('height')) {
el.setAttribute('viewBox', '0 0 '
+ el.getAttribute('width').replace(/[a-z]+/gi, '') + ' '
+ el.getAttribute('height').replace(/[a-z]+/gi, ''));
}
if (el.getAttribute('preserveAspectRatio')) {
el.removeAttribute('preserveAspectRatio');
}
el.setAttribute('preserveAspectRatio', 'xMinYMin meet');
return new XMLSerializer().serializeToString(svgDoc);
}
catch (e) {
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.error(['exec'], e);
return svg;
}
}
triggerEvent(evt) {
this.discoveryEvent.emit(Object.assign(Object.assign({}, evt), { source: this.el.id }));
}
async export(type = 'png') {
return type === 'svg' ? this.toDisplay : (await html2canvas(this.el)).toDataURL();
}
generateStyle(innerStyle) {
return Object.keys(innerStyle || {}).map(k => k + ' { ' + innerStyle[k] + ' }').join('\n');
}
render() {
return (h(Host, { key: '1cd639a08a5551946b13db16e9b513f043456a34' }, h("style", { key: '09de60652fcfcbb40c8f4fc1423816530704b8e5' }, this.generateStyle(this.innerStyle)), h("div", { key: '46d09a2de0a3e612c9a457e4983b2680b91cc32d', class: "svg-wrapper", style: { width: `${this.width}px`, height: `${this.height}px` } }, this.parsing
? h("discovery-spinner", null, "Parsing data...")
: this.toDisplay.length > 0
? this.toDisplay.map(svg => h("div", { class: "svg-container", innerHTML: svg, ref: el => this.refs.push(el) }))
: '')));
}
get el() { return this; }
static get watchers() { return {
"result": ["updateRes"],
"options": ["optionsUpdate"]
}; }
static get style() { return DiscoverySvgStyle0; }
}, [1, "discovery-svg", {
"result": [1],
"type": [1],
"start": [2],
"options": [1],
"width": [1026],
"height": [1026],
"debug": [4],
"unit": [1],
"url": [1],
"chartTitle": [1, "chart-title"],
"execTime": [32],
"bgColor": [32],
"fontColor": [32],
"parsing": [32],
"toDisplay": [32],
"innerStyle": [32],
"innerResult": [32],
"innerOptions": [32],
"resize": [64],
"export": [64]
}, [[8, "discoveryEvent", "discoveryEventHandler"]], {
"result": ["updateRes"],
"options": ["optionsUpdate"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["discovery-svg", "discovery-spinner"];
components.forEach(tagName => { switch (tagName) {
case "discovery-svg":
if (!customElements.get(tagName)) {
customElements.define(tagName, DiscoverySvgComponent);
}
break;
case "discovery-spinner":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { DiscoverySvgComponent as D, defineCustomElement as d };
//# sourceMappingURL=discovery-svg2.js.map