sun-card-design 1.1.34 → 1.1.36

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

@@ -1,359 +1,266 @@
-import { __extends } from "./sun-card-design-pc.es935.js";
-import { each, isArray } from "./sun-card-design-pc.es930.js";
-import { sub, normalize } from "./sun-card-design-pc.es1978.js";
-import { normalizeSymbolSize, normalizeSymbolOffset, createSymbol as createSymbol$1 } from "./sun-card-design-pc.es2038.js";
-import ECLinePath from "./sun-card-design-pc.es2193.js";
-import { SPECIAL_STATES, toggleHoverEmphasis, enterEmphasis, leaveEmphasis } from "./sun-card-design-pc.es946.js";
-import { getLabelStatesModels, setLabelStyle } from "./sun-card-design-pc.es1926.js";
-import { round } from "./sun-card-design-pc.es1970.js";
-import Group from "./sun-card-design-pc.es970.js";
-import { initProps, updateProps } from "./sun-card-design-pc.es969.js";
-var SYMBOL_CATEGORIES = ["fromSymbol", "toSymbol"];
-function makeSymbolTypeKey(symbolCategory) {
-  return "_" + symbolCategory + "Type";
-}
-function makeSymbolTypeValue(name, lineData, idx) {
-  var symbolType = lineData.getItemVisual(idx, name);
-  if (!symbolType || symbolType === "none") {
-    return symbolType;
+import { isArray, retrieve2, each } from "./sun-card-design-pc.es931.js";
+import { makeImage, makePath } from "./sun-card-design-pc.es1765.js";
+import BoundingRect from "./sun-card-design-pc.es1970.js";
+import { calculateTextPosition } from "./sun-card-design-pc.es2072.js";
+import { parsePercent } from "./sun-card-design-pc.es1971.js";
+import Path from "./sun-card-design-pc.es1759.js";
+import Circle from "./sun-card-design-pc.es1976.js";
+import Rect from "./sun-card-design-pc.es1757.js";
+import Line from "./sun-card-design-pc.es1982.js";
+var Triangle = Path.extend({
+  type: "triangle",
+  shape: {
+    cx: 0,
+    cy: 0,
+    width: 0,
+    height: 0
+  },
+  buildPath: function(path, shape) {
+    var cx = shape.cx;
+    var cy = shape.cy;
+    var width = shape.width / 2;
+    var height = shape.height / 2;
+    path.moveTo(cx, cy - height);
+    path.lineTo(cx + width, cy + height);
+    path.lineTo(cx - width, cy + height);
+    path.closePath();
+  }
+});
+var Diamond = Path.extend({
+  type: "diamond",
+  shape: {
+    cx: 0,
+    cy: 0,
+    width: 0,
+    height: 0
+  },
+  buildPath: function(path, shape) {
+    var cx = shape.cx;
+    var cy = shape.cy;
+    var width = shape.width / 2;
+    var height = shape.height / 2;
+    path.moveTo(cx, cy - height);
+    path.lineTo(cx + width, cy);
+    path.lineTo(cx, cy + height);
+    path.lineTo(cx - width, cy);
+    path.closePath();
+  }
+});
+var Pin = Path.extend({
+  type: "pin",
+  shape: {
+    // x, y on the cusp
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  },
+  buildPath: function(path, shape) {
+    var x = shape.x;
+    var y = shape.y;
+    var w = shape.width / 5 * 3;
+    var h = Math.max(w, shape.height);
+    var r = w / 2;
+    var dy = r * r / (h - r);
+    var cy = y - h + r + dy;
+    var angle = Math.asin(dy / r);
+    var dx = Math.cos(angle) * r;
+    var tanX = Math.sin(angle);
+    var tanY = Math.cos(angle);
+    var cpLen = r * 0.6;
+    var cpLen2 = r * 0.7;
+    path.moveTo(x - dx, cy + dy);
+    path.arc(x, cy, r, Math.PI - angle, Math.PI * 2 + angle);
+    path.bezierCurveTo(x + dx - tanX * cpLen, cy + dy + tanY * cpLen, x, y - cpLen2, x, y);
+    path.bezierCurveTo(x, y - cpLen2, x - dx + tanX * cpLen, cy + dy + tanY * cpLen, x - dx, cy + dy);
+    path.closePath();
+  }
+});
+var Arrow = Path.extend({
+  type: "arrow",
+  shape: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  },
+  buildPath: function(ctx, shape) {
+    var height = shape.height;
+    var width = shape.width;
+    var x = shape.x;
+    var y = shape.y;
+    var dx = width / 3 * 2;
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + dx, y + height);
+    ctx.lineTo(x, y + height / 4 * 3);
+    ctx.lineTo(x - dx, y + height);
+    ctx.lineTo(x, y);
+    ctx.closePath();
+  }
+});
+var symbolCtors = {
+  line: Line,
+  rect: Rect,
+  roundRect: Rect,
+  square: Rect,
+  circle: Circle,
+  diamond: Diamond,
+  pin: Pin,
+  arrow: Arrow,
+  triangle: Triangle
+};
+var symbolShapeMakers = {
+  line: function(x, y, w, h, shape) {
+    shape.x1 = x;
+    shape.y1 = y + h / 2;
+    shape.x2 = x + w;
+    shape.y2 = y + h / 2;
+  },
+  rect: function(x, y, w, h, shape) {
+    shape.x = x;
+    shape.y = y;
+    shape.width = w;
+    shape.height = h;
+  },
+  roundRect: function(x, y, w, h, shape) {
+    shape.x = x;
+    shape.y = y;
+    shape.width = w;
+    shape.height = h;
+    shape.r = Math.min(w, h) / 4;
+  },
+  square: function(x, y, w, h, shape) {
+    var size = Math.min(w, h);
+    shape.x = x;
+    shape.y = y;
+    shape.width = size;
+    shape.height = size;
+  },
+  circle: function(x, y, w, h, shape) {
+    shape.cx = x + w / 2;
+    shape.cy = y + h / 2;
+    shape.r = Math.min(w, h) / 2;
+  },
+  diamond: function(x, y, w, h, shape) {
+    shape.cx = x + w / 2;
+    shape.cy = y + h / 2;
+    shape.width = w;
+    shape.height = h;
+  },
+  pin: function(x, y, w, h, shape) {
+    shape.x = x + w / 2;
+    shape.y = y + h / 2;
+    shape.width = w;
+    shape.height = h;
+  },
+  arrow: function(x, y, w, h, shape) {
+    shape.x = x + w / 2;
+    shape.y = y + h / 2;
+    shape.width = w;
+    shape.height = h;
+  },
+  triangle: function(x, y, w, h, shape) {
+    shape.cx = x + w / 2;
+    shape.cy = y + h / 2;
+    shape.width = w;
+    shape.height = h;
+  }
+};
+var symbolBuildProxies = {};
+each(symbolCtors, function(Ctor, name) {
+  symbolBuildProxies[name] = new Ctor();
+});
+var SymbolClz = Path.extend({
+  type: "symbol",
+  shape: {
+    symbolType: "",
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  },
+  calculateTextPosition: function(out, config, rect) {
+    var res = calculateTextPosition(out, config, rect);
+    var shape = this.shape;
+    if (shape && shape.symbolType === "pin" && config.position === "inside") {
+      res.y = rect.y + rect.height * 0.4;
+    }
+    return res;
+  },
+  buildPath: function(ctx, shape, inBundle) {
+    var symbolType = shape.symbolType;
+    if (symbolType !== "none") {
+      var proxySymbol = symbolBuildProxies[symbolType];
+      if (!proxySymbol) {
+        symbolType = "rect";
+        proxySymbol = symbolBuildProxies[symbolType];
+      }
+      symbolShapeMakers[symbolType](shape.x, shape.y, shape.width, shape.height, proxySymbol.shape);
+      proxySymbol.buildPath(ctx, proxySymbol.shape, inBundle);
+    }
+  }
+});
+function symbolPathSetColor(color, innerColor) {
+  if (this.type !== "image") {
+    var symbolStyle = this.style;
+    if (this.__isEmptyBrush) {
+      symbolStyle.stroke = color;
+      symbolStyle.fill = innerColor || "#fff";
+      symbolStyle.lineWidth = 2;
+    } else if (this.shape.symbolType === "line") {
+      symbolStyle.stroke = color;
+    } else {
+      symbolStyle.fill = color;
+    }
+    this.markRedraw();
   }
-  var symbolSize = lineData.getItemVisual(idx, name + "Size");
-  var symbolRotate = lineData.getItemVisual(idx, name + "Rotate");
-  var symbolOffset = lineData.getItemVisual(idx, name + "Offset");
-  var symbolKeepAspect = lineData.getItemVisual(idx, name + "KeepAspect");
-  var symbolSizeArr = normalizeSymbolSize(symbolSize);
-  var symbolOffsetArr = normalizeSymbolOffset(symbolOffset || 0, symbolSizeArr);
-  return symbolType + symbolSizeArr + symbolOffsetArr + (symbolRotate || "") + (symbolKeepAspect || "");
 }
-function createSymbol(name, lineData, idx) {
-  var symbolType = lineData.getItemVisual(idx, name);
-  if (!symbolType || symbolType === "none") {
-    return;
+function createSymbol(symbolType, x, y, w, h, color, keepAspect) {
+  var isEmpty = symbolType.indexOf("empty") === 0;
+  if (isEmpty) {
+    symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
+  }
+  var symbolPath;
+  if (symbolType.indexOf("image://") === 0) {
+    symbolPath = makeImage(symbolType.slice(8), new BoundingRect(x, y, w, h), keepAspect ? "center" : "cover");
+  } else if (symbolType.indexOf("path://") === 0) {
+    symbolPath = makePath(symbolType.slice(7), {}, new BoundingRect(x, y, w, h), keepAspect ? "center" : "cover");
+  } else {
+    symbolPath = new SymbolClz({
+      shape: {
+        symbolType,
+        x,
+        y,
+        width: w,
+        height: h
+      }
+    });
+  }
+  symbolPath.__isEmptyBrush = isEmpty;
+  symbolPath.setColor = symbolPathSetColor;
+  if (color) {
+    symbolPath.setColor(color);
   }
-  var symbolSize = lineData.getItemVisual(idx, name + "Size");
-  var symbolRotate = lineData.getItemVisual(idx, name + "Rotate");
-  var symbolOffset = lineData.getItemVisual(idx, name + "Offset");
-  var symbolKeepAspect = lineData.getItemVisual(idx, name + "KeepAspect");
-  var symbolSizeArr = normalizeSymbolSize(symbolSize);
-  var symbolOffsetArr = normalizeSymbolOffset(symbolOffset || 0, symbolSizeArr);
-  var symbolPath = createSymbol$1(symbolType, -symbolSizeArr[0] / 2 + symbolOffsetArr[0], -symbolSizeArr[1] / 2 + symbolOffsetArr[1], symbolSizeArr[0], symbolSizeArr[1], null, symbolKeepAspect);
-  symbolPath.__specifiedRotation = symbolRotate == null || isNaN(symbolRotate) ? void 0 : +symbolRotate * Math.PI / 180 || 0;
-  symbolPath.name = name;
   return symbolPath;
 }
-function createLine(points) {
-  var line = new ECLinePath({
-    name: "line",
-    subPixelOptimize: true
-  });
-  setLinePoints(line.shape, points);
-  return line;
+function normalizeSymbolSize(symbolSize) {
+  if (!isArray(symbolSize)) {
+    symbolSize = [+symbolSize, +symbolSize];
+  }
+  return [symbolSize[0] || 0, symbolSize[1] || 0];
 }
-function setLinePoints(targetShape, points) {
-  targetShape.x1 = points[0][0];
-  targetShape.y1 = points[0][1];
-  targetShape.x2 = points[1][0];
-  targetShape.y2 = points[1][1];
-  targetShape.percent = 1;
-  var cp1 = points[2];
-  if (cp1) {
-    targetShape.cpx1 = cp1[0];
-    targetShape.cpy1 = cp1[1];
-  } else {
-    targetShape.cpx1 = NaN;
-    targetShape.cpy1 = NaN;
+function normalizeSymbolOffset(symbolOffset, symbolSize) {
+  if (symbolOffset == null) {
+    return;
+  }
+  if (!isArray(symbolOffset)) {
+    symbolOffset = [symbolOffset, symbolOffset];
   }
+  return [parsePercent(symbolOffset[0], symbolSize[0]) || 0, parsePercent(retrieve2(symbolOffset[1], symbolOffset[0]), symbolSize[1]) || 0];
 }
-var Line = (
-  /** @class */
-  (function(_super) {
-    __extends(Line2, _super);
-    function Line2(lineData, idx, seriesScope) {
-      var _this = _super.call(this) || this;
-      _this._createLine(lineData, idx, seriesScope);
-      return _this;
-    }
-    Line2.prototype._createLine = function(lineData, idx, seriesScope) {
-      var seriesModel = lineData.hostModel;
-      var linePoints = lineData.getItemLayout(idx);
-      var line = createLine(linePoints);
-      line.shape.percent = 0;
-      initProps(line, {
-        shape: {
-          percent: 1
-        }
-      }, seriesModel, idx);
-      this.add(line);
-      each(SYMBOL_CATEGORIES, function(symbolCategory) {
-        var symbol = createSymbol(symbolCategory, lineData, idx);
-        this.add(symbol);
-        this[makeSymbolTypeKey(symbolCategory)] = makeSymbolTypeValue(symbolCategory, lineData, idx);
-      }, this);
-      this._updateCommonStl(lineData, idx, seriesScope);
-    };
-    Line2.prototype.updateData = function(lineData, idx, seriesScope) {
-      var seriesModel = lineData.hostModel;
-      var line = this.childOfName("line");
-      var linePoints = lineData.getItemLayout(idx);
-      var target = {
-        shape: {}
-      };
-      setLinePoints(target.shape, linePoints);
-      updateProps(line, target, seriesModel, idx);
-      each(SYMBOL_CATEGORIES, function(symbolCategory) {
-        var symbolType = makeSymbolTypeValue(symbolCategory, lineData, idx);
-        var key = makeSymbolTypeKey(symbolCategory);
-        if (this[key] !== symbolType) {
-          this.remove(this.childOfName(symbolCategory));
-          var symbol = createSymbol(symbolCategory, lineData, idx);
-          this.add(symbol);
-        }
-        this[key] = symbolType;
-      }, this);
-      this._updateCommonStl(lineData, idx, seriesScope);
-    };
-    Line2.prototype.getLinePath = function() {
-      return this.childAt(0);
-    };
-    Line2.prototype._updateCommonStl = function(lineData, idx, seriesScope) {
-      var seriesModel = lineData.hostModel;
-      var line = this.childOfName("line");
-      var emphasisLineStyle = seriesScope && seriesScope.emphasisLineStyle;
-      var blurLineStyle = seriesScope && seriesScope.blurLineStyle;
-      var selectLineStyle = seriesScope && seriesScope.selectLineStyle;
-      var labelStatesModels = seriesScope && seriesScope.labelStatesModels;
-      var emphasisDisabled = seriesScope && seriesScope.emphasisDisabled;
-      var focus = seriesScope && seriesScope.focus;
-      var blurScope = seriesScope && seriesScope.blurScope;
-      if (!seriesScope || lineData.hasItemOption) {
-        var itemModel = lineData.getItemModel(idx);
-        var emphasisModel = itemModel.getModel("emphasis");
-        emphasisLineStyle = emphasisModel.getModel("lineStyle").getLineStyle();
-        blurLineStyle = itemModel.getModel(["blur", "lineStyle"]).getLineStyle();
-        selectLineStyle = itemModel.getModel(["select", "lineStyle"]).getLineStyle();
-        emphasisDisabled = emphasisModel.get("disabled");
-        focus = emphasisModel.get("focus");
-        blurScope = emphasisModel.get("blurScope");
-        labelStatesModels = getLabelStatesModels(itemModel);
-      }
-      var lineStyle = lineData.getItemVisual(idx, "style");
-      var visualColor = lineStyle.stroke;
-      line.useStyle(lineStyle);
-      line.style.fill = null;
-      line.style.strokeNoScale = true;
-      line.ensureState("emphasis").style = emphasisLineStyle;
-      line.ensureState("blur").style = blurLineStyle;
-      line.ensureState("select").style = selectLineStyle;
-      each(SYMBOL_CATEGORIES, function(symbolCategory) {
-        var symbol = this.childOfName(symbolCategory);
-        if (symbol) {
-          symbol.setColor(visualColor);
-          symbol.style.opacity = lineStyle.opacity;
-          for (var i = 0; i < SPECIAL_STATES.length; i++) {
-            var stateName = SPECIAL_STATES[i];
-            var lineState = line.getState(stateName);
-            if (lineState) {
-              var lineStateStyle = lineState.style || {};
-              var state = symbol.ensureState(stateName);
-              var stateStyle = state.style || (state.style = {});
-              if (lineStateStyle.stroke != null) {
-                stateStyle[symbol.__isEmptyBrush ? "stroke" : "fill"] = lineStateStyle.stroke;
-              }
-              if (lineStateStyle.opacity != null) {
-                stateStyle.opacity = lineStateStyle.opacity;
-              }
-            }
-          }
-          symbol.markRedraw();
-        }
-      }, this);
-      var rawVal = seriesModel.getRawValue(idx);
-      setLabelStyle(this, labelStatesModels, {
-        labelDataIndex: idx,
-        labelFetcher: {
-          getFormattedLabel: function(dataIndex, stateName) {
-            return seriesModel.getFormattedLabel(dataIndex, stateName, lineData.dataType);
-          }
-        },
-        inheritColor: visualColor || "#000",
-        defaultOpacity: lineStyle.opacity,
-        defaultText: (rawVal == null ? lineData.getName(idx) : isFinite(rawVal) ? round(rawVal) : rawVal) + ""
-      });
-      var label = this.getTextContent();
-      if (label) {
-        var labelNormalModel = labelStatesModels.normal;
-        label.__align = label.style.align;
-        label.__verticalAlign = label.style.verticalAlign;
-        label.__position = labelNormalModel.get("position") || "middle";
-        var distance = labelNormalModel.get("distance");
-        if (!isArray(distance)) {
-          distance = [distance, distance];
-        }
-        label.__labelDistance = distance;
-      }
-      this.setTextConfig({
-        position: null,
-        local: true,
-        inside: false
-        // Can't be inside for stroke element.
-      });
-      toggleHoverEmphasis(this, focus, blurScope, emphasisDisabled);
-    };
-    Line2.prototype.highlight = function() {
-      enterEmphasis(this);
-    };
-    Line2.prototype.downplay = function() {
-      leaveEmphasis(this);
-    };
-    Line2.prototype.updateLayout = function(lineData, idx) {
-      this.setLinePoints(lineData.getItemLayout(idx));
-    };
-    Line2.prototype.setLinePoints = function(points) {
-      var linePath = this.childOfName("line");
-      setLinePoints(linePath.shape, points);
-      linePath.dirty();
-    };
-    Line2.prototype.beforeUpdate = function() {
-      var lineGroup = this;
-      var symbolFrom = lineGroup.childOfName("fromSymbol");
-      var symbolTo = lineGroup.childOfName("toSymbol");
-      var label = lineGroup.getTextContent();
-      if (!symbolFrom && !symbolTo && (!label || label.ignore)) {
-        return;
-      }
-      var invScale = 1;
-      var parentNode = this.parent;
-      while (parentNode) {
-        if (parentNode.scaleX) {
-          invScale /= parentNode.scaleX;
-        }
-        parentNode = parentNode.parent;
-      }
-      var line = lineGroup.childOfName("line");
-      if (!this.__dirty && !line.__dirty) {
-        return;
-      }
-      var percent = line.shape.percent;
-      var fromPos = line.pointAt(0);
-      var toPos = line.pointAt(percent);
-      var d = sub([], toPos, fromPos);
-      normalize(d, d);
-      function setSymbolRotation(symbol, percent2) {
-        var specifiedRotation = symbol.__specifiedRotation;
-        if (specifiedRotation == null) {
-          var tangent2 = line.tangentAt(percent2);
-          symbol.attr("rotation", (percent2 === 1 ? -1 : 1) * Math.PI / 2 - Math.atan2(tangent2[1], tangent2[0]));
-        } else {
-          symbol.attr("rotation", specifiedRotation);
-        }
-      }
-      if (symbolFrom) {
-        symbolFrom.setPosition(fromPos);
-        setSymbolRotation(symbolFrom, 0);
-        symbolFrom.scaleX = symbolFrom.scaleY = invScale * percent;
-        symbolFrom.markRedraw();
-      }
-      if (symbolTo) {
-        symbolTo.setPosition(toPos);
-        setSymbolRotation(symbolTo, 1);
-        symbolTo.scaleX = symbolTo.scaleY = invScale * percent;
-        symbolTo.markRedraw();
-      }
-      if (label && !label.ignore) {
-        label.x = label.y = 0;
-        label.originX = label.originY = 0;
-        var textAlign = void 0;
-        var textVerticalAlign = void 0;
-        var distance = label.__labelDistance;
-        var distanceX = distance[0] * invScale;
-        var distanceY = distance[1] * invScale;
-        var halfPercent = percent / 2;
-        var tangent = line.tangentAt(halfPercent);
-        var n = [tangent[1], -tangent[0]];
-        var cp = line.pointAt(halfPercent);
-        if (n[1] > 0) {
-          n[0] = -n[0];
-          n[1] = -n[1];
-        }
-        var dir = tangent[0] < 0 ? -1 : 1;
-        if (label.__position !== "start" && label.__position !== "end") {
-          var rotation = -Math.atan2(tangent[1], tangent[0]);
-          if (toPos[0] < fromPos[0]) {
-            rotation = Math.PI + rotation;
-          }
-          label.rotation = rotation;
-        }
-        var dy = void 0;
-        switch (label.__position) {
-          case "insideStartTop":
-          case "insideMiddleTop":
-          case "insideEndTop":
-          case "middle":
-            dy = -distanceY;
-            textVerticalAlign = "bottom";
-            break;
-          case "insideStartBottom":
-          case "insideMiddleBottom":
-          case "insideEndBottom":
-            dy = distanceY;
-            textVerticalAlign = "top";
-            break;
-          default:
-            dy = 0;
-            textVerticalAlign = "middle";
-        }
-        switch (label.__position) {
-          case "end":
-            label.x = d[0] * distanceX + toPos[0];
-            label.y = d[1] * distanceY + toPos[1];
-            textAlign = d[0] > 0.8 ? "left" : d[0] < -0.8 ? "right" : "center";
-            textVerticalAlign = d[1] > 0.8 ? "top" : d[1] < -0.8 ? "bottom" : "middle";
-            break;
-          case "start":
-            label.x = -d[0] * distanceX + fromPos[0];
-            label.y = -d[1] * distanceY + fromPos[1];
-            textAlign = d[0] > 0.8 ? "right" : d[0] < -0.8 ? "left" : "center";
-            textVerticalAlign = d[1] > 0.8 ? "bottom" : d[1] < -0.8 ? "top" : "middle";
-            break;
-          case "insideStartTop":
-          case "insideStart":
-          case "insideStartBottom":
-            label.x = distanceX * dir + fromPos[0];
-            label.y = fromPos[1] + dy;
-            textAlign = tangent[0] < 0 ? "right" : "left";
-            label.originX = -distanceX * dir;
-            label.originY = -dy;
-            break;
-          case "insideMiddleTop":
-          case "insideMiddle":
-          case "insideMiddleBottom":
-          case "middle":
-            label.x = cp[0];
-            label.y = cp[1] + dy;
-            textAlign = "center";
-            label.originY = -dy;
-            break;
-          case "insideEndTop":
-          case "insideEnd":
-          case "insideEndBottom":
-            label.x = -distanceX * dir + toPos[0];
-            label.y = toPos[1] + dy;
-            textAlign = tangent[0] >= 0 ? "right" : "left";
-            label.originX = distanceX * dir;
-            label.originY = -dy;
-            break;
-        }
-        label.scaleX = label.scaleY = invScale;
-        label.setStyle({
-          // Use the user specified text align and baseline first
-          verticalAlign: label.__verticalAlign || textVerticalAlign,
-          align: label.__align || textAlign
-        });
-      }
-    };
-    return Line2;
-  })(Group)
-);
 export {
-  Line as default
+  createSymbol,
+  normalizeSymbolOffset,
+  normalizeSymbolSize,
+  symbolBuildProxies
 };