@antv/f2/lib/components/magnifier/withMagnifier.js

Charts for mobile visualization.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _tslib = require("tslib");
var _fEngine = require("@antv/f-engine");
var _scale = _interopRequireDefault(require("../../controller/scale"));
var _attr = _interopRequireDefault(require("../../controller/attr"));
var _util = require("@antv/util");
var _default = exports.default = function _default(View) {
  var _a;
  return _a = /** @class */function (_super) {
    (0, _tslib.__extends)(Magnifier, _super);
    function Magnifier() {
      return _super !== null && _super.apply(this, arguments) || this;
    }
    Magnifier.prototype.getPositionAndRadius = function () {
      var coord = this.props.coord;
      var right = coord.right,
        top = coord.top;
      var _a = this.context.px2hd(this.props),
        radius = _a.radius,
        propsPosition = _a.position,
        offsetX = _a.offsetX,
        offsetY = _a.offsetY;
      // 计算默认 position
      var calculatedPosition = [right - radius, top + radius];
      var position = propsPosition || calculatedPosition;
      position = [position[0] + offsetX, position[1] + offsetY];
      return {
        position: position,
        radius: radius
      };
    };
    Magnifier.prototype.createFocusAttrController = function () {
      var _a, _b;
      var _c = this.props,
        chart = _c.chart,
        focusRange = _c.focusRange;
      var _d = this.getPositionAndRadius(),
        position = _d.position,
        radius = _d.radius;
      var geometries = chart === null || chart === void 0 ? void 0 : chart.getGeometrys();
      if (!(geometries === null || geometries === void 0 ? void 0 : geometries.length)) return null;
      var geometry = geometries[0];
      var dataRecords = geometry.dataRecords;
      var start = focusRange[0],
        end = focusRange[1];
      // 取第一个 group 的 children 长度
      var childrenLength = ((_b = (_a = dataRecords[0]) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) || 0;
      var validStart = Math.max(0, Math.min(start, childrenLength - 1));
      var validEnd = Math.min(childrenLength - 1, Math.max(validStart, end));
      // 对每个 group 的 children 做 slice
      var focusDataArray = dataRecords.map(function (group) {
        return (0, _tslib.__assign)((0, _tslib.__assign)({}, group), {
          children: group.children.slice(validStart, validEnd + 1)
        });
      });
      var scaleC = new _scale.default(dataRecords.map(function (group) {
        return group.children.slice(validStart, validEnd + 1);
      }).flat());
      var attrsRange = (0, _tslib.__assign)((0, _tslib.__assign)({}, geometry._getThemeAttrsRange()), {
        x: [position[0] - radius, position[0] + radius],
        y: [position[1] - radius, position[1] + radius]
      });
      var attrControllerNew = new _attr.default(scaleC, attrsRange);
      var attrOptions = geometry.attrController.options;
      attrControllerNew.create(attrOptions);
      attrControllerNew.getAttrs();
      return {
        attrController: attrControllerNew,
        focusDataArray: focusDataArray
      };
    };
    Magnifier.prototype.mapping = function () {
      var _a = this.props,
        chart = _a.chart,
        referenceLines = _a.referenceLines;
      var _b = this.getPositionAndRadius(),
        position = _b.position,
        radius = _b.radius;
      var _c = this.createFocusAttrController(),
        attrController = _c.attrController,
        focusDataArray = _c.focusDataArray;
      var _d = attrController.getAttrsByLinear(),
        linearAttrs = _d.linearAttrs,
        nonlinearAttrs = _d.nonlinearAttrs;
      var attrValues = attrController.getDefaultAttrValues();
      var attrs = attrController.getAttrs();
      var pointsData = focusDataArray.map(function (focusData) {
        var first = focusData.children[0];
        nonlinearAttrs.forEach(function (attrName) {
          var attr = attrs[attrName];
          if (!attr) return;
          attrValues[attrName] = attr.mapping(first === null || first === void 0 ? void 0 : first[attr.field], first);
        });
        var shapeName = attrValues.shape;
        var geometries = chart === null || chart === void 0 ? void 0 : chart.getGeometrys();
        if (!(geometries === null || geometries === void 0 ? void 0 : geometries.length)) return null;
        var geometry = geometries[0];
        var shape = geometry._getShapeStyle(shapeName, focusData);
        return (0, _tslib.__assign)((0, _tslib.__assign)({}, attrValues), {
          shape: shape,
          children: focusData.children.map(function (d) {
            var normalized = {
              x: 0,
              y: 0
            };
            linearAttrs.forEach(function (attrName) {
              var attr = attrs[attrName];
              if (!attr) return;
              var value = d[attr.field];
              // 分组属性直接映射，否则归一化
              if (attrController.isGroupAttr && attrController.isGroupAttr(attrName)) {
                normalized[attrName] = attr.mapping(value, d);
              } else {
                normalized[attrName] = attr.normalize(value);
              }
            });
            var nx = (normalized.x - 0.5) * 2;
            var ny = (normalized.y - 0.5) * 2;
            var length = Math.sqrt(nx * nx + ny * ny);
            var rx = length > 1 ? nx / length : nx;
            var ry = length > 1 ? ny / length : ny;
            var cx = position[0],
              cy = position[1];
            var r = radius;
            var px = cx + rx * r;
            var py = cy - ry * r;
            return (0, _tslib.__assign)((0, _tslib.__assign)({}, d), {
              normalized: normalized,
              x: px,
              y: py
            });
          })
        });
      });
      return {
        pointsData: pointsData,
        linesData: (referenceLines || []).map(function (line) {
          var records = line.records,
            style = line.style;
          var points = (records || []).map(function (record) {
            var normalized = {
              x: 0,
              y: 0
            };
            linearAttrs.forEach(function (attrName) {
              var attr = attrs[attrName];
              if (!attr) return;
              var value = record[attr.field];
              if (!(0, _util.isNil)(replaceMap[value])) {
                normalized[attrName] = replaceMap[value];
              } else {
                normalized[attrName] = attr.normalize(value);
              }
            });
            // 直接线性插值，不做极坐标变换
            var cx = position[0],
              cy = position[1];
            var r = radius;
            var px = cx - r + normalized.x * 2 * r;
            var py = cy + r - normalized.y * 2 * r;
            return (0, _tslib.__assign)((0, _tslib.__assign)({}, record), {
              x: px,
              y: py
            });
          });
          return (0, _tslib.__assign)((0, _tslib.__assign)({}, line), {
            points: points,
            style: style
          });
        }),
        center: position
      };
    };
    Magnifier.prototype.render = function () {
      var radius = this.getPositionAndRadius().radius;
      var _a = this.mapping(),
        pointsData = _a.pointsData,
        linesData = _a.linesData,
        center = _a.center;
      return (0, _fEngine.jsx)(View, (0, _tslib.__assign)({}, this.props, {
        pointsData: pointsData,
        radius: radius,
        linesData: linesData,
        center: center
      }));
    };
    return Magnifier;
  }(_fEngine.Component), _a.defaultProps = {
    radius: '50px',
    offsetX: 0,
    offsetY: 0
  }, _a;
}; // 假设你有 parseReplaceStr 方法可用
var replaceMap = {
  min: 0,
  max: 1,
  median: 0.5
};