sun-card-design 1.1.35 → 1.1.36

package/dist/pc/sun-card-design-pc.es2063.js

@@ -1,157 +1,299 @@
-import { __extends } from "./sun-card-design-pc.es1726.js";
-import Line from "./sun-card-design-pc.es2064.js";
-import { isArray, retrieve, isFunction } from "./sun-card-design-pc.es931.js";
-import { createSymbol } from "./sun-card-design-pc.es2015.js";
-import { dist } from "./sun-card-design-pc.es1974.js";
-import { quadraticAt, quadraticDerivativeAt } from "./sun-card-design-pc.es2168.js";
-import Group from "./sun-card-design-pc.es1761.js";
-var EffectLine = (
-  /** @class */
-  (function(_super) {
-    __extends(EffectLine2, _super);
-    function EffectLine2(lineData, idx, seriesScope) {
-      var _this = _super.call(this) || this;
-      _this.add(_this.createLine(lineData, idx, seriesScope));
-      _this._updateEffectSymbol(lineData, idx);
-      return _this;
+import { isString, isDom, isFunction, isArray, each, bind, indexOf, retrieve2 } from "./sun-card-design-pc.es931.js";
+import { normalizeEvent } from "./sun-card-design-pc.es2013.js";
+import { transformLocalCoord } from "./sun-card-design-pc.es2069.js";
+import env from "./sun-card-design-pc.es1727.js";
+import { convertToColorString, toCamelCase, normalizeCssArray } from "./sun-card-design-pc.es1840.js";
+import { toCSSVendorPrefix, getComputedStyle, shouldTooltipConfine, TRANSFORM_VENDOR, TRANSITION_VENDOR } from "./sun-card-design-pc.es2068.js";
+import { getPaddingFromTooltipModel } from "./sun-card-design-pc.es2000.js";
+var CSS_TRANSITION_VENDOR = toCSSVendorPrefix(TRANSITION_VENDOR, "transition");
+var CSS_TRANSFORM_VENDOR = toCSSVendorPrefix(TRANSFORM_VENDOR, "transform");
+var gCssText = "position:absolute;display:block;border-style:solid;white-space:nowrap;z-index:9999999;" + (env.transform3dSupported ? "will-change:transform;" : "");
+function mirrorPos(pos) {
+  pos = pos === "left" ? "right" : pos === "right" ? "left" : pos === "top" ? "bottom" : "top";
+  return pos;
+}
+function assembleArrow(tooltipModel, borderColor, arrowPosition) {
+  if (!isString(arrowPosition) || arrowPosition === "inside") {
+    return "";
+  }
+  var backgroundColor = tooltipModel.get("backgroundColor");
+  var borderWidth = tooltipModel.get("borderWidth");
+  borderColor = convertToColorString(borderColor);
+  var arrowPos = mirrorPos(arrowPosition);
+  var arrowSize = Math.max(Math.round(borderWidth) * 1.5, 6);
+  var positionStyle = "";
+  var transformStyle = CSS_TRANSFORM_VENDOR + ":";
+  var rotateDeg;
+  if (indexOf(["left", "right"], arrowPos) > -1) {
+    positionStyle += "top:50%";
+    transformStyle += "translateY(-50%) rotate(" + (rotateDeg = arrowPos === "left" ? -225 : -45) + "deg)";
+  } else {
+    positionStyle += "left:50%";
+    transformStyle += "translateX(-50%) rotate(" + (rotateDeg = arrowPos === "top" ? 225 : 45) + "deg)";
+  }
+  var rotateRadian = rotateDeg * Math.PI / 180;
+  var arrowWH = arrowSize + borderWidth;
+  var rotatedWH = arrowWH * Math.abs(Math.cos(rotateRadian)) + arrowWH * Math.abs(Math.sin(rotateRadian));
+  var arrowOffset = Math.round(((rotatedWH - Math.SQRT2 * borderWidth) / 2 + Math.SQRT2 * borderWidth - (rotatedWH - arrowWH) / 2) * 100) / 100;
+  positionStyle += ";" + arrowPos + ":-" + arrowOffset + "px";
+  var borderStyle = borderColor + " solid " + borderWidth + "px;";
+  var styleCss = ["position:absolute;width:" + arrowSize + "px;height:" + arrowSize + "px;z-index:-1;", positionStyle + ";" + transformStyle + ";", "border-bottom:" + borderStyle, "border-right:" + borderStyle, "background-color:" + backgroundColor + ";"];
+  return '<div style="' + styleCss.join("") + '"></div>';
+}
+function assembleTransition(duration, onlyFade) {
+  var transitionCurve = "cubic-bezier(0.23,1,0.32,1)";
+  var transitionOption = " " + duration / 2 + "s " + transitionCurve;
+  var transitionText = "opacity" + transitionOption + ",visibility" + transitionOption;
+  if (!onlyFade) {
+    transitionOption = " " + duration + "s " + transitionCurve;
+    transitionText += env.transformSupported ? "," + CSS_TRANSFORM_VENDOR + transitionOption : ",left" + transitionOption + ",top" + transitionOption;
+  }
+  return CSS_TRANSITION_VENDOR + ":" + transitionText;
+}
+function assembleTransform(x, y, toString) {
+  var x0 = x.toFixed(0) + "px";
+  var y0 = y.toFixed(0) + "px";
+  if (!env.transformSupported) {
+    return toString ? "top:" + y0 + ";left:" + x0 + ";" : [["top", y0], ["left", x0]];
+  }
+  var is3d = env.transform3dSupported;
+  var translate = "translate" + (is3d ? "3d" : "") + "(" + x0 + "," + y0 + (is3d ? ",0" : "") + ")";
+  return toString ? "top:0;left:0;" + CSS_TRANSFORM_VENDOR + ":" + translate + ";" : [["top", 0], ["left", 0], [TRANSFORM_VENDOR, translate]];
+}
+function assembleFont(textStyleModel) {
+  var cssText = [];
+  var fontSize = textStyleModel.get("fontSize");
+  var color = textStyleModel.getTextColor();
+  color && cssText.push("color:" + color);
+  cssText.push("font:" + textStyleModel.getFont());
+  var lineHeight = retrieve2(textStyleModel.get("lineHeight"), Math.round(fontSize * 3 / 2));
+  fontSize && cssText.push("line-height:" + lineHeight + "px");
+  var shadowColor = textStyleModel.get("textShadowColor");
+  var shadowBlur = textStyleModel.get("textShadowBlur") || 0;
+  var shadowOffsetX = textStyleModel.get("textShadowOffsetX") || 0;
+  var shadowOffsetY = textStyleModel.get("textShadowOffsetY") || 0;
+  shadowColor && shadowBlur && cssText.push("text-shadow:" + shadowOffsetX + "px " + shadowOffsetY + "px " + shadowBlur + "px " + shadowColor);
+  each(["decoration", "align"], function(name) {
+    var val = textStyleModel.get(name);
+    val && cssText.push("text-" + name + ":" + val);
+  });
+  return cssText.join(";");
+}
+function assembleCssText(tooltipModel, enableTransition, onlyFade) {
+  var cssText = [];
+  var transitionDuration = tooltipModel.get("transitionDuration");
+  var backgroundColor = tooltipModel.get("backgroundColor");
+  var shadowBlur = tooltipModel.get("shadowBlur");
+  var shadowColor = tooltipModel.get("shadowColor");
+  var shadowOffsetX = tooltipModel.get("shadowOffsetX");
+  var shadowOffsetY = tooltipModel.get("shadowOffsetY");
+  var textStyleModel = tooltipModel.getModel("textStyle");
+  var padding = getPaddingFromTooltipModel(tooltipModel, "html");
+  var boxShadow = shadowOffsetX + "px " + shadowOffsetY + "px " + shadowBlur + "px " + shadowColor;
+  cssText.push("box-shadow:" + boxShadow);
+  enableTransition && transitionDuration && cssText.push(assembleTransition(transitionDuration, onlyFade));
+  if (backgroundColor) {
+    cssText.push("background-color:" + backgroundColor);
+  }
+  each(["width", "color", "radius"], function(name) {
+    var borderName = "border-" + name;
+    var camelCase = toCamelCase(borderName);
+    var val = tooltipModel.get(camelCase);
+    val != null && cssText.push(borderName + ":" + val + (name === "color" ? "" : "px"));
+  });
+  cssText.push(assembleFont(textStyleModel));
+  if (padding != null) {
+    cssText.push("padding:" + normalizeCssArray(padding).join("px ") + "px");
+  }
+  return cssText.join(";") + ";";
+}
+function makeStyleCoord(out, zr, container, zrX, zrY) {
+  var zrPainter = zr && zr.painter;
+  if (container) {
+    var zrViewportRoot = zrPainter && zrPainter.getViewportRoot();
+    if (zrViewportRoot) {
+      transformLocalCoord(out, zrViewportRoot, container, zrX, zrY);
     }
-    EffectLine2.prototype.createLine = function(lineData, idx, seriesScope) {
-      return new Line(lineData, idx, seriesScope);
-    };
-    EffectLine2.prototype._updateEffectSymbol = function(lineData, idx) {
-      var itemModel = lineData.getItemModel(idx);
-      var effectModel = itemModel.getModel("effect");
-      var size = effectModel.get("symbolSize");
-      var symbolType = effectModel.get("symbol");
-      if (!isArray(size)) {
-        size = [size, size];
+  } else {
+    out[0] = zrX;
+    out[1] = zrY;
+    var viewportRootOffset = zrPainter && zrPainter.getViewportRootOffset();
+    if (viewportRootOffset) {
+      out[0] += viewportRootOffset.offsetLeft;
+      out[1] += viewportRootOffset.offsetTop;
+    }
+  }
+  out[2] = out[0] / zr.getWidth();
+  out[3] = out[1] / zr.getHeight();
+}
+var TooltipHTMLContent = (
+  /** @class */
+  (function() {
+    function TooltipHTMLContent2(api, opt) {
+      this._show = false;
+      this._styleCoord = [0, 0, 0, 0];
+      this._enterable = true;
+      this._alwaysShowContent = false;
+      this._firstShow = true;
+      this._longHide = true;
+      if (env.wxa) {
+        return null;
       }
-      var lineStyle = lineData.getItemVisual(idx, "style");
-      var color = effectModel.get("color") || lineStyle && lineStyle.stroke;
-      var symbol = this.childAt(1);
-      if (this._symbolType !== symbolType) {
-        this.remove(symbol);
-        symbol = createSymbol(symbolType, -0.5, -0.5, 1, 1, color);
-        symbol.z2 = 100;
-        symbol.culling = true;
-        this.add(symbol);
+      var el = document.createElement("div");
+      el.domBelongToZr = true;
+      this.el = el;
+      var zr = this._zr = api.getZr();
+      var appendTo = opt.appendTo;
+      var container = appendTo && (isString(appendTo) ? document.querySelector(appendTo) : isDom(appendTo) ? appendTo : isFunction(appendTo) && appendTo(api.getDom()));
+      makeStyleCoord(this._styleCoord, zr, container, api.getWidth() / 2, api.getHeight() / 2);
+      (container || api.getDom()).appendChild(el);
+      this._api = api;
+      this._container = container;
+      var self = this;
+      el.onmouseenter = function() {
+        if (self._enterable) {
+          clearTimeout(self._hideTimeout);
+          self._show = true;
+        }
+        self._inContent = true;
+      };
+      el.onmousemove = function(e) {
+        e = e || window.event;
+        if (!self._enterable) {
+          var handler = zr.handler;
+          var zrViewportRoot = zr.painter.getViewportRoot();
+          normalizeEvent(zrViewportRoot, e, true);
+          handler.dispatch("mousemove", e);
+        }
+      };
+      el.onmouseleave = function() {
+        self._inContent = false;
+        if (self._enterable) {
+          if (self._show) {
+            self.hideLater(self._hideDelay);
+          }
+        }
+      };
+    }
+    TooltipHTMLContent2.prototype.update = function(tooltipModel) {
+      if (!this._container) {
+        var container = this._api.getDom();
+        var position = getComputedStyle(container, "position");
+        var domStyle = container.style;
+        if (domStyle.position !== "absolute" && position !== "absolute") {
+          domStyle.position = "relative";
+        }
       }
-      if (!symbol) {
-        return;
+      var alwaysShowContent = tooltipModel.get("alwaysShowContent");
+      alwaysShowContent && this._moveIfResized();
+      this._alwaysShowContent = alwaysShowContent;
+      this.el.className = tooltipModel.get("className") || "";
+    };
+    TooltipHTMLContent2.prototype.show = function(tooltipModel, nearPointColor) {
+      clearTimeout(this._hideTimeout);
+      clearTimeout(this._longHideTimeout);
+      var el = this.el;
+      var style = el.style;
+      var styleCoord = this._styleCoord;
+      if (!el.innerHTML) {
+        style.display = "none";
+      } else {
+        style.cssText = gCssText + assembleCssText(tooltipModel, !this._firstShow, this._longHide) + assembleTransform(styleCoord[0], styleCoord[1], true) + ("border-color:" + convertToColorString(nearPointColor) + ";") + (tooltipModel.get("extraCssText") || "") + (";pointer-events:" + (this._enterable ? "auto" : "none"));
       }
-      symbol.setStyle("shadowColor", color);
-      symbol.setStyle(effectModel.getItemStyle(["color"]));
-      symbol.scaleX = size[0];
-      symbol.scaleY = size[1];
-      symbol.setColor(color);
-      this._symbolType = symbolType;
-      this._symbolScale = size;
-      this._updateEffectAnimation(lineData, effectModel, idx);
+      this._show = true;
+      this._firstShow = false;
+      this._longHide = false;
     };
-    EffectLine2.prototype._updateEffectAnimation = function(lineData, effectModel, idx) {
-      var symbol = this.childAt(1);
-      if (!symbol) {
+    TooltipHTMLContent2.prototype.setContent = function(content, markers, tooltipModel, borderColor, arrowPosition) {
+      var el = this.el;
+      if (content == null) {
+        el.innerHTML = "";
         return;
       }
-      var points = lineData.getItemLayout(idx);
-      var period = effectModel.get("period") * 1e3;
-      var loop = effectModel.get("loop");
-      var roundTrip = effectModel.get("roundTrip");
-      var constantSpeed = effectModel.get("constantSpeed");
-      var delayExpr = retrieve(effectModel.get("delay"), function(idx2) {
-        return idx2 / lineData.count() * period / 3;
-      });
-      symbol.ignore = true;
-      this._updateAnimationPoints(symbol, points);
-      if (constantSpeed > 0) {
-        period = this._getLineLength(symbol) / constantSpeed * 1e3;
+      var arrow = "";
+      if (isString(arrowPosition) && tooltipModel.get("trigger") === "item" && !shouldTooltipConfine(tooltipModel)) {
+        arrow = assembleArrow(tooltipModel, borderColor, arrowPosition);
       }
-      if (period !== this._period || loop !== this._loop || roundTrip !== this._roundTrip) {
-        symbol.stopAnimation();
-        var delayNum = void 0;
-        if (isFunction(delayExpr)) {
-          delayNum = delayExpr(idx);
-        } else {
-          delayNum = delayExpr;
+      if (isString(content)) {
+        el.innerHTML = content + arrow;
+      } else if (content) {
+        el.innerHTML = "";
+        if (!isArray(content)) {
+          content = [content];
+        }
+        for (var i = 0; i < content.length; i++) {
+          if (isDom(content[i]) && content[i].parentNode !== el) {
+            el.appendChild(content[i]);
+          }
         }
-        if (symbol.__t > 0) {
-          delayNum = -period * symbol.__t;
+        if (arrow && el.childNodes.length) {
+          var arrowEl = document.createElement("div");
+          arrowEl.innerHTML = arrow;
+          el.appendChild(arrowEl);
         }
-        this._animateSymbol(symbol, period, delayNum, loop, roundTrip);
       }
-      this._period = period;
-      this._loop = loop;
-      this._roundTrip = roundTrip;
     };
-    EffectLine2.prototype._animateSymbol = function(symbol, period, delayNum, loop, roundTrip) {
-      if (period > 0) {
-        symbol.__t = 0;
-        var self_1 = this;
-        var animator = symbol.animate("", loop).when(roundTrip ? period * 2 : period, {
-          __t: roundTrip ? 2 : 1
-        }).delay(delayNum).during(function() {
-          self_1._updateSymbolPosition(symbol);
+    TooltipHTMLContent2.prototype.setEnterable = function(enterable) {
+      this._enterable = enterable;
+    };
+    TooltipHTMLContent2.prototype.getSize = function() {
+      var el = this.el;
+      return el ? [el.offsetWidth, el.offsetHeight] : [0, 0];
+    };
+    TooltipHTMLContent2.prototype.moveTo = function(zrX, zrY) {
+      if (!this.el) {
+        return;
+      }
+      var styleCoord = this._styleCoord;
+      makeStyleCoord(styleCoord, this._zr, this._container, zrX, zrY);
+      if (styleCoord[0] != null && styleCoord[1] != null) {
+        var style_1 = this.el.style;
+        var transforms = assembleTransform(styleCoord[0], styleCoord[1]);
+        each(transforms, function(transform) {
+          style_1[transform[0]] = transform[1];
         });
-        if (!loop) {
-          animator.done(function() {
-            self_1.remove(symbol);
-          });
-        }
-        animator.start();
       }
     };
-    EffectLine2.prototype._getLineLength = function(symbol) {
-      return dist(symbol.__p1, symbol.__cp1) + dist(symbol.__cp1, symbol.__p2);
-    };
-    EffectLine2.prototype._updateAnimationPoints = function(symbol, points) {
-      symbol.__p1 = points[0];
-      symbol.__p2 = points[1];
-      symbol.__cp1 = points[2] || [(points[0][0] + points[1][0]) / 2, (points[0][1] + points[1][1]) / 2];
+    TooltipHTMLContent2.prototype._moveIfResized = function() {
+      var ratioX = this._styleCoord[2];
+      var ratioY = this._styleCoord[3];
+      this.moveTo(ratioX * this._zr.getWidth(), ratioY * this._zr.getHeight());
     };
-    EffectLine2.prototype.updateData = function(lineData, idx, seriesScope) {
-      this.childAt(0).updateData(lineData, idx, seriesScope);
-      this._updateEffectSymbol(lineData, idx);
+    TooltipHTMLContent2.prototype.hide = function() {
+      var _this = this;
+      var style = this.el.style;
+      style.visibility = "hidden";
+      style.opacity = "0";
+      env.transform3dSupported && (style.willChange = "");
+      this._show = false;
+      this._longHideTimeout = setTimeout(function() {
+        return _this._longHide = true;
+      }, 500);
     };
-    EffectLine2.prototype._updateSymbolPosition = function(symbol) {
-      var p1 = symbol.__p1;
-      var p2 = symbol.__p2;
-      var cp1 = symbol.__cp1;
-      var t = symbol.__t < 1 ? symbol.__t : 2 - symbol.__t;
-      var pos = [symbol.x, symbol.y];
-      var lastPos = pos.slice();
-      var quadraticAt$1 = quadraticAt;
-      var quadraticDerivativeAt$1 = quadraticDerivativeAt;
-      pos[0] = quadraticAt$1(p1[0], cp1[0], p2[0], t);
-      pos[1] = quadraticAt$1(p1[1], cp1[1], p2[1], t);
-      var tx = symbol.__t < 1 ? quadraticDerivativeAt$1(p1[0], cp1[0], p2[0], t) : quadraticDerivativeAt$1(p2[0], cp1[0], p1[0], 1 - t);
-      var ty = symbol.__t < 1 ? quadraticDerivativeAt$1(p1[1], cp1[1], p2[1], t) : quadraticDerivativeAt$1(p2[1], cp1[1], p1[1], 1 - t);
-      symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2;
-      if (this._symbolType === "line" || this._symbolType === "rect" || this._symbolType === "roundRect") {
-        if (symbol.__lastT !== void 0 && symbol.__lastT < symbol.__t) {
-          symbol.scaleY = dist(lastPos, pos) * 1.05;
-          if (t === 1) {
-            pos[0] = lastPos[0] + (pos[0] - lastPos[0]) / 2;
-            pos[1] = lastPos[1] + (pos[1] - lastPos[1]) / 2;
-          }
-        } else if (symbol.__lastT === 1) {
-          symbol.scaleY = 2 * dist(p1, pos);
+    TooltipHTMLContent2.prototype.hideLater = function(time) {
+      if (this._show && !(this._inContent && this._enterable) && !this._alwaysShowContent) {
+        if (time) {
+          this._hideDelay = time;
+          this._show = false;
+          this._hideTimeout = setTimeout(bind(this.hide, this), time);
         } else {
-          symbol.scaleY = this._symbolScale[1];
+          this.hide();
         }
       }
-      symbol.__lastT = symbol.__t;
-      symbol.ignore = false;
-      symbol.x = pos[0];
-      symbol.y = pos[1];
     };
-    EffectLine2.prototype.updateLayout = function(lineData, idx) {
-      this.childAt(0).updateLayout(lineData, idx);
-      var effectModel = lineData.getItemModel(idx).getModel("effect");
-      this._updateEffectAnimation(lineData, effectModel, idx);
+    TooltipHTMLContent2.prototype.isShow = function() {
+      return this._show;
+    };
+    TooltipHTMLContent2.prototype.dispose = function() {
+      clearTimeout(this._hideTimeout);
+      clearTimeout(this._longHideTimeout);
+      var parentNode = this.el.parentNode;
+      parentNode && parentNode.removeChild(this.el);
+      this.el = this._container = null;
     };
-    return EffectLine2;
-  })(Group)
+    return TooltipHTMLContent2;
+  })()
 );
 export {
-  EffectLine as default
+  TooltipHTMLContent as default
 };