nicecode-v2/packages/meta/es/ImageEditor/viewer/event.js

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
//@ts-nocheck
import { isNumber, get, addEventListenerWrapper } from '@zhst/func';
import { addClass, removeClass } from 'rc-util/lib/Dom/class.js';
import guid from 'rc-util/lib/guid';
import warn from 'rc-util/lib/warn';
import { getPointer, dispatchEvent } from "../utils";
import { CLASS_MOVE, ACTION_DRAG,
// event
EVENT_CLICK, EVENT_WHEEL, EVENT_POINTER_DOWN, EVENT_POINTER_MOVE, EVENT_POINTER_UP, EVENT_EYE_DONE,
//正则
REGEXP_SPACES, SHAPE_TYPE_CIRCLE } from "./constants";
export default {
  //store
  disabled: false,
  eventHandleList: [],
  wheeling: false,
  pointer: null,
  action: null,
  //method
  bind: function bind() {
    var _this = this;
    var canvas = this.canvas,
      element = this.element,
      _this$eventHandleList = this.eventHandleList,
      eventHandleList = _this$eventHandleList === void 0 ? [] : _this$eventHandleList,
      options = this.options;
    // 鼠标滚轮事件
    var scaleAble = get(options, 'scaleAble', true);
    if (scaleAble) {
      var handleWheel = addEventListenerWrapper(canvas, EVENT_WHEEL, this.onWheel.bind(this));
      eventHandleList.push(handleWheel);
    }

    // 鼠标 - 拖拽事件
    var dragAble = get(options, 'dragAble', true);
    if (dragAble) {
      var handleDragStart = addEventListenerWrapper(canvas, EVENT_POINTER_DOWN, this.onDragStart.bind(this));
      eventHandleList.push(handleDragStart);
      var handleDragMove = addEventListenerWrapper(element.ownerDocument, EVENT_POINTER_MOVE, this.onDragMove.bind(this));
      eventHandleList.push(handleDragMove);
      EVENT_POINTER_UP.trim().split(REGEXP_SPACES).forEach(function (_eventName) {
        var handleDragEnd = addEventListenerWrapper(element.ownerDocument, _eventName, _this.onDragEnd.bind(_this));
        eventHandleList.push(handleDragEnd);
      });
    }

    // 鼠标 - 点击事件
    var selectAble = get(options, 'selectAble', true);
    if (selectAble) {
      var handleClick = addEventListenerWrapper(canvas, EVENT_CLICK, this.onClick.bind(this));
      eventHandleList.push(handleClick);
    }
  },
  unbind: function unbind() {
    var eventHandleList = this.eventHandleList;
    for (var index = eventHandleList.length; index > 0; index--) {
      var handler = eventHandleList[index - 1];
      try {
        handler.remove();
      } catch (error) {
        warn('VIEWER:REMOVE_EVENT_FAIL,', error);
      }
    }
  },
  /* 鼠标滚轮事件 */onWheel: function onWheel(event, cropBox) {
    var _this2 = this;
    event.stopPropagation();
    event.preventDefault();

    // Limit wheel speed to prevent zoom too fast
    if (this.wheeling || !this.zoomable) {
      return;
    }
    this.wheeling = true;
    setTimeout(function () {
      _this2.wheeling = false;
    }, 16);
    var ratio = Number(this.options.zoomRatio) || 0.1;
    var delta = 1;
    if (event.deltaY) {
      delta = event.deltaY > 0 ? 1 : -1;
    } else if (event.wheelDelta) {
      delta = -event.wheelDelta / 120;
    } else if (event.detail) {
      delta = event.detail > 0 ? 1 : -1;
    }
    var step = -delta * ratio;
    var pos = this.windowToCanvasAxis(event);
    this.calcTransform({
      scaleCenter: _objectSpread(_objectSpread({}, pos), {}, {
        step: step
      })
    }, cropBox);
  },
  // 鼠标拖拽 - 开始拖拽
  onDragStart: function onDragStart(event) {
    event.stopPropagation();
    // This line is required for preventing page zooming in iOS browsers
    event.preventDefault();
    var buttons = event.buttons,
      button = event.button;
    if (!this.movable) {
      return;
    }
    if (this.disabled ||
    // Handle mouse event and pointer event and ignore touch event
    (event.type === 'mousedown' || event.type === 'pointerdown' && event.pointerType === 'mouse') && (
    // No primary button (Usually the left button)
    isNumber(buttons) && buttons !== 1 || isNumber(button) && button !== 0 ||
    // Open context menu
    event.ctrlKey)) {
      return;
    }
    this.pointer = getPointer(event);
    this.action = ACTION_DRAG;
    addClass(this.canvas, CLASS_MOVE);
  },
  // 鼠标拖拽 - 拖拽中
  onDragMove: function onDragMove(event) {
    event.stopPropagation();

    /***************************************************/
    //todo:看下怎么拆shape 事件
    var pointerCenter = this.windowToCanvasAxis(event);
    var id = this.calcSelectShape(pointerCenter);
    this.hoverShapId = id;
    /***************************************************/

    var action = this.action;
    if (!action) {
      return;
    }
    this.pointer = Object.assign({}, this.pointer, getPointer(event, true));
    event.preventDefault();
    var range = {
      x: this.pointer.endX - this.pointer.startX,
      y: this.pointer.endY - this.pointer.startY
    };
    this.calcTransform({
      translateX: range.x,
      translateY: range.y
    });
    // Override
    this.pointer.startX = this.pointer.endX;
    this.pointer.startY = this.pointer.endY;
  },
  // 鼠标拖拽 - 停止拖拽
  onDragEnd: function onDragEnd(event) {
    event.stopPropagation();
    var action = this.action;
    if (!action) {
      return;
    }
    event.preventDefault();
    this.action = null;
    this.point = null;
    removeClass(this.canvas, CLASS_MOVE);
  },
  // 鼠标点击
  onClick: function onClick(event) {
    event.stopPropagation();
    var pointerCenter = this.windowToCanvasAxis(event);
    if (!this.isEyeOpen) {
      var id = this.calcSelectShape(pointerCenter);
      this.setSelectShapId(id);
    } else {
      //双目
      //先直接写在这里
      //过滤掉框，只有point
      var pointShapeList = this.shapeList.filter(function (v) {
        return !v['w'];
      });
      if (pointShapeList.length === 5) return;
      var originAxis = this.canvasAxisToOriginAxis(pointerCenter);
      var imageAxis = this.originAxisToImgAxis(originAxis);
      this.addShape(_objectSpread({
        id: "pointer_".concat(guid()),
        selectAble: false
      }, imageAxis), SHAPE_TYPE_CIRCLE);
      pointShapeList = this.shapeList.filter(function (v) {
        return !v['w'];
      });
      if (pointShapeList.length === 5) {
        dispatchEvent(this.element, EVENT_EYE_DONE);
      }
    }
  }
};