Class DataView

src/component/toolbox/feature/DataView.ts:319–475

}

class DataView extends ToolboxFeature<ToolboxDataViewFeatureOption> {

    private _dom: HTMLDivElement;

    onclick(ecModel: GlobalModel, api: ExtensionAPI) {
        // FIXME: better way?
        setTimeout(() => {
            api.dispatchAction({
                type: 'hideTip'
            });
        });

        const container = api.getDom();
        const model = this.model;
        if (this._dom) {
            container.removeChild(this._dom);
        }
        const root = document.createElement('div');
        // use padding to avoid 5px whitespace
        root.style.cssText = 'position:absolute;top:0;bottom:0;left:0;right:0;padding:5px';
        root.style.backgroundColor = model.get('backgroundColor') || tokens.color.neutral00;

        // Create elements
        const header = document.createElement('h4');
        const lang = model.get('lang') || [];
        header.innerHTML = lang[0] || model.get('title');
        header.style.cssText = 'margin:10px 20px';
        header.style.color = model.get('textColor');

        const viewMain = document.createElement('div');
        const textarea = document.createElement('textarea');
        viewMain.style.cssText = 'overflow:auto';

        const optionToContent = model.get('optionToContent');
        const contentToOption = model.get('contentToOption');
        const result = getContentFromModel(ecModel);
        if (zrUtil.isFunction(optionToContent)) {
            const htmlOrDom = optionToContent(api.getOption());
            if (zrUtil.isString(htmlOrDom)) {
                viewMain.innerHTML = htmlOrDom;
            }
            else if (zrUtil.isDom(htmlOrDom)) {
                viewMain.appendChild(htmlOrDom);
            }
        }
        else {
            // Use default textarea
            textarea.readOnly = model.get('readOnly');
            const style = textarea.style;
            // eslint-disable-next-line max-len
            style.cssText = 'display:block;width:100%;height:100%;font-family:monospace;font-size:14px;line-height:1.6rem;resize:none;box-sizing:border-box;outline:none';
            style.color = model.get('textColor');
            style.borderColor = model.get('textareaBorderColor');
            style.backgroundColor = model.get('textareaColor');
            textarea.value = result.value;
            viewMain.appendChild(textarea);
        }