"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
function getPosition(e) {
  var obj = 'touches' in e ? e.touches[0] : e;
  var scrollXOffset = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
  var scrollYOffset = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
  return {
    pageX: obj.pageX - scrollXOffset,
    pageY: obj.pageY - scrollYOffset
  };
}
function useColorDrag(props) {
  var offset = props.offset,
    targetRef = props.targetRef,
    containerRef = props.containerRef,
    direction = props.direction,
    onDragChange = props.onDragChange,
    onDragChangeComplete = props.onDragChangeComplete,
    calculate = props.calculate,
    disabledDrag = props.disabledDrag,
    colorRef = props.colorRef;
  var offsetValue = (0, _vue.ref)(offset || {
    x: 0,
    y: 0
  });
  var mouseMoveRef = (0, _vue.shallowRef)(null);
  var mouseUpRef = (0, _vue.shallowRef)(null);
  var dragRef = (0, _vue.shallowRef)({
    flag: false
  });
  setTimeout(function () {
    var calcOffset = calculate === null || calculate === void 0 ? void 0 : calculate(containerRef);
    if (calcOffset) {
      offsetValue.value = calcOffset;
    }
  });
  (0, _vue.watch)(function () {
    return [colorRef, containerRef];
  }, function () {
    if (dragRef.value.flag === false) {
      var calcOffset = calculate === null || calculate === void 0 ? void 0 : calculate(containerRef);
      if (calcOffset) {
        offsetValue.value = calcOffset;
      }
    }
  }, {
    deep: true,
    flush: 'post'
  });
  (0, _vue.onUnmounted)(function () {
    document.removeEventListener('mousemove', mouseMoveRef.value);
    document.removeEventListener('mouseup', mouseUpRef.value);
    document.removeEventListener('touchmove', mouseMoveRef.value);
    document.removeEventListener('touchend', mouseUpRef.value);
    mouseMoveRef.value = null;
    mouseUpRef.value = null;
  });
  var updateOffset = function updateOffset(e) {
    var _targetRef$value;
    var _getPosition = getPosition(e),
      pageX = _getPosition.pageX,
      pageY = _getPosition.pageY;
    var _containerRef$value$g = containerRef.value.getBoundingClientRect(),
      rectX = _containerRef$value$g.x,
      rectY = _containerRef$value$g.y,
      width = _containerRef$value$g.width,
      height = _containerRef$value$g.height;
    var _targetRef$value$tran = (_targetRef$value = targetRef.value) === null || _targetRef$value === void 0 ? void 0 : _targetRef$value.transformDomRef.getBoundingClientRect(),
      targetWidth = _targetRef$value$tran.width,
      targetHeight = _targetRef$value$tran.height;
    var centerOffsetX = targetWidth / 2;
    var centerOffsetY = targetHeight / 2;
    var offsetX = Math.max(0, Math.min(pageX - rectX, width)) - centerOffsetX;
    var offsetY = Math.max(0, Math.min(pageY - rectY, height)) - centerOffsetY;
    var calcOffset = (0, _vue.computed)(function () {
      return {
        x: offsetX,
        y: (direction === null || direction === void 0 ? void 0 : direction.value) === 'x' ? offsetValue.value.y : offsetY
      };
    });
    // Exclusion of boundary cases
    if (targetWidth === 0 && targetHeight === 0 || targetWidth !== targetHeight) {
      return false;
    }
    offsetValue.value = calcOffset.value;
    onDragChange === null || onDragChange === void 0 ? void 0 : onDragChange(calcOffset.value);
  };
  var onDragMove = function onDragMove(e) {
    e.preventDefault();
    updateOffset(e);
  };
  var onDragStop = function onDragStop(e) {
    e.preventDefault();
    dragRef.value.flag = false;
    document.removeEventListener('mousemove', mouseMoveRef.value);
    document.removeEventListener('mouseup', mouseUpRef.value);
    document.removeEventListener('touchmove', mouseMoveRef.value);
    document.removeEventListener('touchend', mouseUpRef.value);
    mouseMoveRef.value = null;
    mouseUpRef.value = null;
    onDragChangeComplete === null || onDragChangeComplete === void 0 ? void 0 : onDragChangeComplete();
  };
  var onDragStart = function onDragStart(e) {
    document.removeEventListener('mousemove', mouseMoveRef.value);
    document.removeEventListener('mouseup', mouseUpRef.value);
    if (disabledDrag.value) {
      return;
    }
    updateOffset(e);
    dragRef.value.flag = true;
    document.addEventListener('mousemove', onDragMove);
    document.addEventListener('mouseup', onDragStop);
    document.addEventListener('touchmove', onDragMove);
    document.addEventListener('touchend', onDragStop);
    mouseMoveRef.value = onDragMove;
    mouseUpRef.value = onDragStop;
  };
  return [offsetValue, onDragStart];
}
var _default = useColorDrag;
exports.default = _default;