tvcharts 0.8.92 → 0.8.93

package/lib/chart/labels/LabelsView.js

@@ -76,6 +76,9 @@ var LabelsView = /** @class */function (_super) {
     _this.type = LabelsView.type;
     return _this;
   }
+  LabelsView.prototype.init = function (ecModel, api) {
+    api.getZr().on('mousedown', this._hideTip, this);
+  };
   LabelsView.prototype.render = function (seriesModel, ecModel, api) {
     var data = seriesModel.getData();
     // const symbolDraw = this._updateSymbolDraw(data, seriesModel);
@@ -268,6 +271,19 @@ var LabelsView = /** @class */function (_super) {
       _this._isTooltipOpen = true;
     }, 300);
   };
+  LabelsView.prototype._hideTip = function (e) {
+    if (e.target && typeof inner(e.target).index === 'number') {
+      return;
+    }
+    // this._clearTimer();
+    if (this._isTooltipOpen) {
+      this.api.dispatchAction({
+        type: 'hideTipText',
+        escapeConnect: true
+      });
+      this._isTooltipOpen = false;
+    }
+  };
   LabelsView.prototype._mouseout = function () {
     this._clearTimer();
     if (this._isTooltipOpen) {
@@ -293,6 +309,7 @@ var LabelsView = /** @class */function (_super) {
     this._textGroup = null;
     this._toolTipGroup && this._toolTipGroup.removeAll();
     this._toolTipGroup = null;
+    this.api.getZr().off('mousedown', this._hideTip);
     this.seriesModel = null;
     this.api = null;
   };

package/lib/component/tooltip/TooltipTextHtmlContent.js

@@ -82,7 +82,7 @@ var TooltipTextHtmlContent = /** @class */function () {
       style.transform = "translateX(-50%)";
       triangleStyle = "transform: translateX(-50%) translateY(-50%) rotate(45deg); position: absolute; top: 0px;";
     }
-    el.innerHTML = "<div>\n        <div style=\"min-width: 32px; padding: 2px 8px; color: #fff; background-color: rgb(42, 46, 57); font-size: 12px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 16px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px -4px, rgba(0, 0, 0, 0.05) 0px 9px 28px 8px; white-space: pre;\">" + text + "</div>\n        <div style=\"width: 6px; height: 6px; " + triangleStyle + " left: 50%; background-color: rgb(42, 46, 57);\"></div>\n        </div>";
+    el.innerHTML = "<div style=\"max-width:300px\">\n        <div style=\"min-width: 32px; padding: 2px 8px; color: #fff; background-color: rgb(42, 46, 57); font-size: 12px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 16px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px -4px, rgba(0, 0, 0, 0.05) 0px 9px 28px 8px; white-space: pre-wrap;\">" + text + "</div>\n        <div style=\"width: 6px; height: 6px; " + triangleStyle + " left: 50%; background-color: rgb(42, 46, 57);\"></div>\n        </div>";
   };
   TooltipTextHtmlContent.prototype.getSize = function () {
     var el = this.el;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tvcharts",
-  "version": "0.8.92",
+  "version": "0.8.93",
   "main": "dist/echarts.js",
   "module": "index.js",
   "jsdelivr": "dist/echarts.min.js",

package/types/src/chart/labels/LabelsView.d.ts

@@ -19,12 +19,14 @@ declare class LabelsView extends ChartView {
     api: ExtensionAPI;
     _isTooltipOpen: boolean;
     _timer: NodeJS.Timeout;
+    init(ecModel: GlobalModel, api: ExtensionAPI): void;
     render(seriesModel: ScatterSeriesModel, ecModel: GlobalModel, api: ExtensionAPI): void;
     _renderText(data: SeriesData, seriesModel: ScatterSeriesModel): void;
     _renderSymbol(data: SeriesData, seriesModel: ScatterSeriesModel): void;
     _renderTooltipSymbol(data: SeriesData, seriesModel: ScatterSeriesModel): void;
     _getClipShape(seriesModel: ScatterSeriesModel): import("../../coord/CoordinateSystem").CoordinateSystemClipArea;
     _mouseover(e: any): void;
+    _hideTip(e: any): void;
     _mouseout(): void;
     _clearTimer(): void;
     remove(): void;