suoqiu-f2/lib/plugin/guide.js

Charts for mobile visualization.

"use strict";

exports.__esModule = true;
exports.afterGeomDraw = afterGeomDraw;
exports.clear = clear;
exports["default"] = void 0;
exports.init = init;
exports.repaint = repaint;
var _common = require("../util/common");
var _base = _interopRequireDefault(require("../component/guide/base"));
var _global = _interopRequireDefault(require("../global"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
// register the default configuration for Guide
_global["default"].guide = (0, _common.deepMix)({
  line: {
    style: {
      stroke: '#a3a3a3',
      lineWidth: 1
    },
    top: true
  },
  text: {
    style: {
      fill: '#787878',
      textAlign: 'center',
      textBaseline: 'middle'
    },
    offsetX: 0,
    offsetY: 0,
    top: true
  },
  rect: {
    style: {
      fill: '#fafafa'
    },
    top: false
  },
  arc: {
    style: {
      stroke: '#a3a3a3'
    },
    top: true
  },
  html: {
    offsetX: 0,
    offsetY: 0,
    alignX: 'center',
    alignY: 'middle'
  },
  tag: {
    top: true,
    offsetX: 0,
    offsetY: 0,
    side: 4,
    background: {
      padding: 5,
      radius: 2,
      fill: '#1890FF'
    },
    textStyle: {
      fontSize: 12,
      fill: '#fff',
      textAlign: 'center',
      textBaseline: 'middle'
    }
  },
  point: {
    top: true,
    offsetX: 0,
    offsetY: 0,
    style: {
      fill: '#fff',
      r: 3,
      lineWidth: 2,
      stroke: '#1890ff'
    }
  }
}, _global["default"].guide || {});
var GuideController = /*#__PURE__*/function () {
  function GuideController(cfg) {
    this.guides = [];
    this.xScale = null;
    this.yScales = null;
    this.guideShapes = [];
    (0, _common.mix)(this, cfg);
  }
  var _proto = GuideController.prototype;
  _proto._toString = function _toString(position) {
    if ((0, _common.isFunction)(position)) {
      position = position(this.xScale, this.yScales);
    }
    position = position.toString();
    return position;
  };
  _proto._getId = function _getId(shape, guide) {
    var id = guide.id;
    if (!id) {
      var type = guide.type;
      if (type === 'arc' || type === 'line' || type === 'rect') {
        id = this._toString(guide.start) + '-' + this._toString(guide.end);
      } else {
        id = this._toString(guide.position);
      }
    }
    return id;
  };
  _proto.paint = function paint(coord) {
    var self = this;
    var chart = self.chart,
      guides = self.guides,
      xScale = self.xScale,
      yScales = self.yScales;
    var guideShapes = [];
    (0, _common.each)(guides, function (guide, idx) {
      guide.xScale = xScale;
      guide.yScales = yScales;
      var container;
      if (guide.type === 'regionFilter') {
        // TODO: RegionFilter support animation
        guide.chart = chart;
      } else {
        container = guide.top ? self.frontPlot : self.backPlot;
      }
      guide.coord = coord;
      guide.container = container;
      guide.canvas = chart.get('canvas');
      var shape = guide.render(coord, container);
      if (shape) {
        var id = self._getId(shape, guide);
        [].concat(shape).forEach(function (s) {
          s._id = s.get('className') + '-' + id;
          s.set('index', idx);
          guideShapes.push(s);
        });
      }
    });
    self.guideShapes = guideShapes;
  };
  _proto.clear = function clear() {
    this.reset();
    this.guides = [];
    return this;
  };
  _proto.reset = function reset() {
    var guides = this.guides;
    (0, _common.each)(guides, function (guide) {
      guide.remove();
    });
  };
  _proto._createGuide = function _createGuide(type, cfg) {
    var ClassName = (0, _common.upperFirst)(type);
    var guide = new _base["default"][ClassName]((0, _common.deepMix)({}, _global["default"].guide[type], cfg));
    this.guides.push(guide);
    return guide;
  };
  _proto.line = function line(cfg) {
    if (cfg === void 0) {
      cfg = {};
    }
    return this._createGuide('line', cfg);
  };
  _proto.text = function text(cfg) {
    if (cfg === void 0) {
      cfg = {};
    }
    return this._createGuide('text', cfg);
  };
  _proto.arc = function arc(cfg) {
    if (cfg === void 0) {
      cfg = {};
    }
    return this._createGuide('arc', cfg);
  };
  _proto.html = function html(cfg) {
    if (cfg === void 0) {
      cfg = {};
    }
    return this._createGuide('html', cfg);
  };
  _proto.rect = function rect(cfg) {
    if (cfg === void 0) {
      cfg = {};
    }
    return this._createGuide('rect', cfg);
  };
  _proto.tag = function tag(cfg) {
    if (cfg === void 0) {
      cfg = {};
    }
    return this._createGuide('tag', cfg);
  };
  _proto.point = function point(cfg) {
    if (cfg === void 0) {
      cfg = {};
    }
    return this._createGuide('point', cfg);
  };
  _proto.regionFilter = function regionFilter(cfg) {
    if (cfg === void 0) {
      cfg = {};
    }
    return this._createGuide('regionFilter', cfg);
  };
  return GuideController;
}();
function init(chart) {
  var guideController = new GuideController({
    frontPlot: chart.get('frontPlot').addGroup({
      zIndex: 20,
      className: 'guideContainer'
    }),
    backPlot: chart.get('backPlot').addGroup({
      className: 'guideContainer'
    })
  });
  chart.set('guideController', guideController);
  /**
   * 为图表添加 guide
   * @return {GuideController} 返回 guide 控制器
   */
  chart.guide = function () {
    return guideController;
  };
}
function afterGeomDraw(chart) {
  var guideController = chart.get('guideController');
  if (!guideController.guides.length) {
    return;
  }
  var xScale = chart.getXScale();
  var yScales = chart.getYScales();
  var coord = chart.get('coord');
  guideController.xScale = xScale;
  guideController.yScales = yScales;
  guideController.chart = chart; // for regionFilter
  guideController.paint(coord);
}
function clear(chart) {
  chart.get('guideController').clear();
}
function repaint(chart) {
  chart.get('guideController').reset();
}
var _default = exports["default"] = {
  init: init,
  afterGeomDraw: afterGeomDraw,
  clear: clear,
  repaint: repaint
};