@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 _themes = _interopRequireDefault(require("../themes"));

var _esm = require("@antv/g2/esm");

var _interaction = require("./interaction");

(0, _esm.registerAction)('rect-mask-nocapture', _interaction.NoCaptureDimRect, {
  dim: '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) {
  if (!config.zoom) {
    return;
  } // 修改 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: ['brush-x: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: ['brush-x:filter', 'brush-x:end', 'rect-mask-nocapture:end', 'rect-mask-nocapture:hide'],
      callback: function callback(context) {
        var rangeFilterAction = context.getAction('brush-x');
        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 resetAction = context.getAction('reset-button'); // @ts-ignore

          if (resetAction.cfg) {
            // @ts-ignore
            Object.assign(resetAction.cfg, {
              text: text,
              textStyle: {
                fill: _themes["default"]['widgets-color-blue']
              },
              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-blue']
              }
            });
          }

          resetAction.show();
          chart.emit('zoom:end', {
            // @ts-ignore
            startPoint: rangeFilterAction.startPoint,
            endPoint: context.getCurrentPoint(),
            // @ts-ignore
            data: context.view.filteredData
          }, context);
        }
      }
    }],
    rollback: [// { trigger: 'dblclick', action: ['brush-x:reset'] },
    {
      trigger: 'reset-button:click',
      action: ['brush-x:reset', 'reset-button:hide', 'cursor:crosshair'],
      callback: function callback(context) {
        chart.emit('zoom:reset', context);
      }
    }]
  });
}