You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2022/01/04 15:04:02 UTC

[echarts] branch fix-dataview created (now 8ad3b74)

This is an automated email from the ASF dual-hosted git repository.

wangzx pushed a change to branch fix-dataview
in repository https://gitbox.apache.org/repos/asf/echarts.git.


      at 8ad3b74  fix(dataview): hide tooltip when data view is open, use padding instead of inset 5px to avoid click the below layers.

This branch includes the following new commits:

     new 8ad3b74  fix(dataview): hide tooltip when data view is open, use padding instead of inset 5px to avoid click the below layers.

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[echarts] 01/01: fix(dataview): hide tooltip when data view is open, use padding instead of inset 5px to avoid click the below layers.

Posted by wa...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

wangzx pushed a commit to branch fix-dataview
in repository https://gitbox.apache.org/repos/asf/echarts.git

commit 8ad3b74c508c2ff8342e6e3e1aad6337404cfdfa
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Tue Jan 4 12:30:17 2022 +0800

    fix(dataview): hide tooltip when data view is open, use padding instead of inset 5px to avoid click the below layers.
---
 src/component/toolbox/feature/DataView.ts | 40 +++++++++++++++++++------------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/component/toolbox/feature/DataView.ts b/src/component/toolbox/feature/DataView.ts
index 6256705..5f69b8d 100644
--- a/src/component/toolbox/feature/DataView.ts
+++ b/src/component/toolbox/feature/DataView.ts
@@ -318,32 +318,40 @@ 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');
-        root.style.cssText = 'position:absolute;left:5px;top:5px;bottom:5px;right:5px;';
+        // 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') || '#fff';
 
         // 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.cssText = 'margin:10px 20px';
         header.style.color = model.get('textColor');
 
         const viewMain = document.createElement('div');
         const textarea = document.createElement('textarea');
-        viewMain.style.cssText = 'display:block;width:100%;overflow:auto;';
+        viewMain.style.cssText = 'overflow:hidden';
 
         const optionToContent = model.get('optionToContent');
         const contentToOption = model.get('contentToOption');
         const result = getContentFromModel(ecModel);
-        if (typeof optionToContent === 'function') {
+        if (zrUtil.isFunction(optionToContent)) {
             const htmlOrDom = optionToContent(api.getOption());
-            if (typeof htmlOrDom === 'string') {
+            if (zrUtil.isString(htmlOrDom)) {
                 viewMain.innerHTML = htmlOrDom;
             }
             else if (zrUtil.isDom(htmlOrDom)) {
@@ -352,22 +360,24 @@ class DataView extends ToolboxFeature<ToolboxDataViewFeatureOption> {
         }
         else {
             // Use default textarea
-            viewMain.appendChild(textarea);
             textarea.readOnly = model.get('readOnly');
-            textarea.style.cssText = 'width:100%;height:100%;font-family:monospace;font-size:14px;line-height:1.6rem;';
-            textarea.style.color = model.get('textColor');
-            textarea.style.borderColor = model.get('textareaBorderColor');
-            textarea.style.backgroundColor = model.get('textareaColor');
+            const style = textarea.style;
+            // eslint-disable-next-line max-len
+            style.cssText = 'width:100%;height:100%;font-family:monospace;font-size:14px;line-height:1.6rem;resize:none';
+            style.color = model.get('textColor');
+            style.borderColor = model.get('textareaBorderColor');
+            style.backgroundColor = model.get('textareaColor');
             textarea.value = result.value;
+            viewMain.appendChild(textarea);
         }
 
         const blockMetaList = result.meta;
 
         const buttonContainer = document.createElement('div');
-        buttonContainer.style.cssText = 'position:absolute;bottom:0;left:0;right:0;';
+        buttonContainer.style.cssText = 'position:absolute;bottom:5px;left:0;right:0';
 
-        let buttonStyle = 'float:right;margin-right:20px;border:none;'
-            + 'cursor:pointer;padding:2px 5px;font-size:12px;border-radius:3px';
+        // eslint-disable-next-line max-len
+        let buttonStyle = 'float:right;margin-right:20px;border:none;cursor:pointer;padding:2px 5px;font-size:12px;border-radius:3px';
         const closeButton = document.createElement('div');
         const refreshButton = document.createElement('div');
 
@@ -395,7 +405,7 @@ class DataView extends ToolboxFeature<ToolboxDataViewFeatureOption> {
 
             let newOption;
             try {
-                if (typeof contentToOption === 'function') {
+                if (zrUtil.isFunction(contentToOption)) {
                     newOption = contentToOption(viewMain, api.getOption());
                 }
                 else {
@@ -418,7 +428,7 @@ class DataView extends ToolboxFeature<ToolboxDataViewFeatureOption> {
 
         closeButton.innerHTML = lang[1];
         refreshButton.innerHTML = lang[2];
-        refreshButton.style.cssText = buttonStyle;
+        refreshButton.style.cssText =
         closeButton.style.cssText = buttonStyle;
 
         !model.get('readOnly') && buttonContainer.appendChild(refreshButton);

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org