@alicloud/cloud-charts/lib/common/rectZoom.js


'use strict';

// import { registerAction } from "@antv/g2";
// import ResetButton from '@antv/g2/esm/interaction/action/view/button';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = _default;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _esm = require("@antv/g2/esm");
var _flattenDeep = _interopRequireDefault(require("lodash/flattenDeep"));
var _index = require("./interaction/index");
var _brushFilter = require("./interaction/actions/brush-filter");
var _themes = _interopRequireDefault(require("../themes"));
(0, _esm.registerAction)('rect-mask-nocapture', _index.NoCaptureDimRect, {
  dim: 'x'
});
(0, _esm.registerAction)('range-custom-filter', _brushFilter.RangeCustomFilter, {
  dims: ['x']
});
function isNotInResetButton(context) {
  return !(context.isInShape('button-rect') || context.isInShape('button-text'));
}
function isPointInViewNotInResetButton(context) {
  return context.isInPlot() && !(context.isInShape('button-rect') || context.isInShape('button-text'));
}

// registerAction('custom-reset-button', ResetButton, {
//   name: 'reset-button',
//   text: 'reset',
// });

/**
 * 直角坐标系的拖拽缩放设置
 *
 * @param {Chart} chart 图表实例
 * @param {ZoomConfig} config 配置项
 * @param {text} string 重置的文案
 * */
function _default(chart, config, text) {
  var _chart$views;
  if (!config.zoom) {
    return;
  }
  var actionName = ((_chart$views = chart.views) === null || _chart$views === void 0 ? void 0 : _chart$views.length) > 0 ? 'range-custom-filter' : 'brush-x';

  // 修改 tooltip 默认行为，进入 reset button 不展示
  chart.interaction('tooltip', {
    start: [{
      trigger: 'plot:mousemove',
      action: 'tooltip:show',
      throttle: {
        wait: 50,
        leading: true,
        trailing: false
      },
      isEnable: isNotInResetButton
    }, {
      trigger: 'plot:touchmove',
      action: 'tooltip:show',
      throttle: {
        wait: 50,
        leading: true,
        trailing: false
      },
      isEnable: isNotInResetButton
    }],
    end: [{
      trigger: 'plot:mouseleave',
      action: 'tooltip:hide'
    }, {
      trigger: 'plot:leave',
      action: 'tooltip:hide'
    }, {
      trigger: 'plot:touchend',
      action: 'tooltip:hide'
    }, {
      trigger: 'reset-button:mouseenter',
      action: 'tooltip:hide'
    }
    // { trigger: 'reset-button:mousemove', action: 'tooltip:hide' },
    ]
  });
  chart.interaction('brush-x', {
    start: [{
      trigger: 'mousedown',
      isEnable: isPointInViewNotInResetButton,
      action: [actionName + ":start", 'rect-mask-nocapture:start', 'rect-mask-nocapture:show'],
      callback: function callback(context) {
        chart.emit('zoom:start', (0, _extends2["default"])({}, context.getCurrentPoint()), context);
      }
    }],
    processing: [{
      trigger: 'mousemove',
      isEnable: isPointInViewNotInResetButton,
      action: ['rect-mask-nocapture:resize']
    }],
    end: [{
      trigger: 'mouseup',
      isEnable: isPointInViewNotInResetButton,
      action: [actionName + ":filter", actionName + ":end", 'rect-mask-nocapture:end', 'rect-mask-nocapture:hide'],
      callback: function callback(context) {
        var rangeFilterAction = context.getAction(actionName);
        var startPoint = rangeFilterAction.startPoint;
        var endPoint = context.getCurrentPoint();

        // 间距过小时不进行filter
        if (Math.abs(endPoint.x - startPoint.x) < 2) {
          // const cursorAction = context.getAction('cursor');
          // cursorAction.crosshair();
          return;
        } else {
          var _chart$views2;
          var resetAction = context.getAction('reset-button');
          // @ts-ignore
          if (resetAction.cfg) {
            // @ts-ignore
            Object.assign(resetAction.cfg, {
              text: text,
              textStyle: {
                fill: _themes["default"]['widgets-color-primary']
              },
              style: {
                fill: _themes["default"]['widgets-color-background'],
                stroke: _themes["default"]['widgets-color-gray'],
                lineWidth: 0.5
                // strokeWidth: 1,
              },
              activeStyle: {
                fill: _themes["default"]['widgets-color-background'],
                stroke: _themes["default"]['widgets-color-primary']
              }
            });
          }
          resetAction.show();
          chart.emit('zoom:end', {
            // @ts-ignore
            startPoint: rangeFilterAction.startPoint,
            endPoint: context.getCurrentPoint(),
            // @ts-ignore
            data: ((_chart$views2 = chart.views) === null || _chart$views2 === void 0 ? void 0 : _chart$views2.length) > 0 ? (0, _flattenDeep["default"])(context.view.views.map(function (subView) {
              var _subView$filteredData;
              return (_subView$filteredData = subView === null || subView === void 0 ? void 0 : subView.filteredData) !== null && _subView$filteredData !== void 0 ? _subView$filteredData : [];
            })) : context.view.filteredData
          }, context);
        }
      }
    }],
    rollback: [
    // { trigger: 'dblclick', action: ['brush-x:reset'] },
    {
      trigger: 'reset-button:click',
      action: [actionName + ":reset", 'reset-button:hide', 'cursor:crosshair'],
      callback: function callback(context) {
        chart.emit('zoom:reset', context);
      }
    }]
  });
}