xdesign-vue-next/lib/image-viewer/hooks.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { ref } from 'vue';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function useDrag(initTransform) {
  var transform = ref(initTransform);
  var mouseDownHandler = function mouseDownHandler(e) {
    var startX = e.pageX,
      startY = e.pageY;
    var _transform$value = transform.value,
      translateX = _transform$value.translateX,
      translateY = _transform$value.translateY;
    var mouseMoveHandler = function mouseMoveHandler(e2) {
      var pageX = e2.pageX,
        pageY = e2.pageY;
      transform.value = {
        translateX: translateX + pageX - startX,
        translateY: translateY + pageY - startY
      };
    };
    var mouseUpHandler = function mouseUpHandler() {
      document.removeEventListener("mousemove", mouseMoveHandler);
      document.removeEventListener("mouseup", mouseUpHandler);
    };
    document.addEventListener("mousemove", mouseMoveHandler);
    document.addEventListener("mouseup", mouseUpHandler);
  };
  var resetTransform = function resetTransform() {
    transform.value = _objectSpread({}, initTransform);
  };
  return {
    transform: transform,
    mouseDownHandler: mouseDownHandler,
    resetTransform: resetTransform
  };
}
function useMirror() {
  var mirror = ref(1);
  var onMirror = function onMirror() {
    mirror.value *= -1;
  };
  var resetMirror = function resetMirror() {
    mirror.value = 1;
  };
  return {
    mirror: mirror,
    onMirror: onMirror,
    resetMirror: resetMirror
  };
}
function useScale() {
  var imageScale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
    max: 2,
    min: 0.5,
    step: 0.5
  };
  var max = imageScale.max,
    min = imageScale.min,
    step = imageScale.step;
  var scale = ref(1);
  var onZoomIn = function onZoomIn() {
    setScale(scale.value + step);
  };
  var onZoomOut = function onZoomOut() {
    setScale(scale.value - step);
  };
  var resetScale = function resetScale() {
    scale.value = 1;
  };
  var setScale = function setScale(newScale) {
    var value = newScale;
    if (newScale < min) {
      value = min;
    }
    if (newScale > max) {
      value = max;
    }
    scale.value = value;
  };
  return {
    scale: scale,
    onZoomIn: onZoomIn,
    onZoomOut: onZoomOut,
    resetScale: resetScale
  };
}
function useRotate() {
  var rotate = ref(0);
  var ROTATE_DEG = 90;
  var onRotate = function onRotate() {
    rotate.value += ROTATE_DEG;
  };
  var resetRotate = function resetRotate() {
    rotate.value = 0;
  };
  return {
    rotate: rotate,
    onRotate: onRotate,
    resetRotate: resetRotate
  };
}

export { useDrag, useMirror, useRotate, useScale };
//# sourceMappingURL=hooks.js.map