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

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/ImageEditor/viewer/event.ts
var event_exports = {};
__export(event_exports, {
  default: () => event_default
});
module.exports = __toCommonJS(event_exports);
var import_func = require("@zhst/func");
var import_class = require("rc-util/lib/Dom/class.js");
var import_guid = __toESM(require("rc-util/lib/guid"));
var import_warn = __toESM(require("rc-util/lib/warn"));
var import_utils = require("../utils");
var import_constants = require("./constants");
var event_default = {
  //store
  disabled: false,
  eventHandleList: [],
  wheeling: false,
  pointer: null,
  action: null,
  //method
  bind() {
    const { canvas, element, eventHandleList = [], options } = this;
    const scaleAble = (0, import_func.get)(options, "scaleAble", true);
    if (scaleAble) {
      const handleWhele = (0, import_func.addEventListenerWrapper)(canvas, import_constants.EVENT_WHEEL, this.onWheel.bind(this));
      eventHandleList.push(handleWhele);
    }
    const dragAble = (0, import_func.get)(options, "dragAble", true);
    if (dragAble) {
      const handleDragStart = (0, import_func.addEventListenerWrapper)(
        canvas,
        import_constants.EVENT_POINTER_DOWN,
        this.onDragStart.bind(this)
      );
      eventHandleList.push(import_func.addEventListenerWrapper);
      const handleDragMove = (0, import_func.addEventListenerWrapper)(
        element.ownerDocument,
        import_constants.EVENT_POINTER_MOVE,
        this.onDragMove.bind(this)
      );
      eventHandleList.push(handleDragMove);
      import_constants.EVENT_POINTER_UP.trim().split(import_constants.REGEXP_SPACES).forEach((eventName) => {
        const handleDragEnd = (0, import_func.addEventListenerWrapper)(
          element.ownerDocument,
          eventName,
          this.onDragEnd.bind(this)
        );
        eventHandleList.push(handleDragEnd);
      });
    }
    const handleClick = (0, import_func.addEventListenerWrapper)(canvas, import_constants.EVENT_CLICK, this.onClick.bind(this));
    eventHandleList.push(handleClick);
  },
  unbind() {
    const { eventHandleList } = this;
    for (let index = eventHandleList.length; index > 0; index--) {
      const handler = eventHandleList.shift();
      try {
        handler.remove();
      } catch (error) {
        (0, import_warn.default)("VIEWER:REMOVE_EVENT_FAIL,", error);
      }
    }
  },
  /* 图片事件 */
  onWheel(event, cropBox) {
    event.stopPropagation();
    event.preventDefault();
    if (this.wheeling || !this.zoomable) {
      return;
    }
    this.wheeling = true;
    setTimeout(() => {
      this.wheeling = false;
    }, 16);
    const ratio = Number(this.options.zoomRatio) || 0.1;
    let 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;
    }
    const step = -delta * ratio;
    const pos = this.windowToCanvasAxis(event);
    this.calcTransform(
      {
        scaleCenter: {
          ...pos,
          step
        }
      },
      cropBox
    );
  },
  onDragStart(event) {
    event.stopPropagation();
    event.preventDefault();
    const { buttons, button } = event;
    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)
    ((0, import_func.isNumber)(buttons) && buttons !== 1 || (0, import_func.isNumber)(button) && button !== 0 || // Open context menu
    event.ctrlKey)) {
      return;
    }
    this.pointer = (0, import_utils.getPointer)(event);
    this.action = import_constants.ACTION_DRAG;
    (0, import_class.addClass)(this.canvas, import_constants.CLASS_MOVE);
  },
  onDragMove(event) {
    event.stopPropagation();
    const pointerCenter = this.windowToCanvasAxis(event);
    const id = this.calcSelectShape(pointerCenter);
    this.hoverShapId = id;
    const { action } = this;
    if (!action) {
      return;
    }
    this.pointer = Object.assign({}, this.pointer, (0, import_utils.getPointer)(event, true));
    event.preventDefault();
    const range = {
      x: this.pointer.endX - this.pointer.startX,
      y: this.pointer.endY - this.pointer.startY
    };
    this.calcTransform({ translateX: range.x, translateY: range.y });
    this.pointer.startX = this.pointer.endX;
    this.pointer.startY = this.pointer.endY;
  },
  onDragEnd(event) {
    event.stopPropagation();
    const { action } = this;
    if (!action) {
      return;
    }
    event.preventDefault();
    this.action = null;
    this.point = null;
    (0, import_class.removeClass)(this.canvas, import_constants.CLASS_MOVE);
  },
  /* rect事件 */
  // onLeavel(event) {
  //     const pointerCenter = this.windowToCanvasAxis(event);
  //     this.highlightShape(pointerCenter);
  // },
  // onEnter(event) {
  //     this.highlightShape(null);
  // },
  onClick(event) {
    event.stopPropagation();
    const pointerCenter = this.windowToCanvasAxis(event);
    if (!this.isEyeOpen) {
      const id = this.calcSelectShape(pointerCenter);
      this.setSelectShapId(id);
    } else {
      let pointShapeList = this.shapeList.filter((v) => !v["w"]);
      if (pointShapeList.length === 5)
        return;
      const originAxis = this.canvasAxisToOriginAxis(pointerCenter);
      const imageAxis = this.originAxisToImgAxis(originAxis);
      this.addShape(
        { id: `pointer_${(0, import_guid.default)()}`, selectAble: false, ...imageAxis },
        import_constants.SHAPE_TYPE_CIRCLE
      );
      pointShapeList = this.shapeList.filter((v) => !v["w"]);
      if (pointShapeList.length === 5) {
        (0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_EYE_DONE);
      }
    }
  }
};