tdesign-vue-next
Version:
TDesign Component for vue-next
263 lines (258 loc) • 9.39 kB
JavaScript
/**
* tdesign v1.20.0
* (c) 2026 tdesign
* @license MIT
*/
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { p as positiveAdd, i as positiveSubtract } from './dep-eb68c41a.js';
import { ref } from 'vue';
import { throttle } from 'lodash-es';
var DEFAULT_IMAGE_SCALE = {
max: 2,
min: 0.5,
step: 0.2,
defaultScale: 1
};
var isImageExceedsViewport = function isImageExceedsViewport(container, modalBox) {
var containerRect = container.getBoundingClientRect();
var modalRect = modalBox.getBoundingClientRect();
return modalRect.left < containerRect.left || modalRect.right > containerRect.right || modalRect.top < containerRect.top || modalRect.bottom > containerRect.bottom;
};
var MIRROR_DEFAULT = 1;
var toggleMirror = function toggleMirror(current) {
return current > 0 ? -1 : 1;
};
var ROTATE_DEG = -90;
function calcResetRotation(currentDeg) {
var degreeToRotate = currentDeg % 360;
if (degreeToRotate === 0) return 0;
return Math.abs(degreeToRotate) > 180 ? (degreeToRotate + 360) % 360 : degreeToRotate;
}
function clampScale(value, min, max) {
return Math.max(min, Math.min(max, value));
}
function calcZoomInScale(oldScale, step, min, max) {
return clampScale(positiveAdd(oldScale, step), min, max);
}
function calcZoomOutScale(oldScale, step, min, max) {
return clampScale(positiveSubtract(oldScale, step), min, max);
}
function calculateTranslateOffset(oldScale, newScale, options) {
var _options$currentTrans;
if ((options === null || options === void 0 ? void 0 : options.mouseOffsetX) == null || (options === null || options === void 0 ? void 0 : options.mouseOffsetY) == null) {
return void 0;
}
var scaleRatio = newScale / oldScale;
var _ref = (_options$currentTrans = options === null || options === void 0 ? void 0 : options.currentTranslate) !== null && _options$currentTrans !== void 0 ? _options$currentTrans : {},
_ref$translateX = _ref.translateX,
translateX = _ref$translateX === void 0 ? 0 : _ref$translateX,
_ref$translateY = _ref.translateY,
translateY = _ref$translateY === void 0 ? 0 : _ref$translateY;
var mouseOffsetX = options.mouseOffsetX,
mouseOffsetY = options.mouseOffsetY;
return {
translateX: scaleRatio * translateX + (1 - scaleRatio) * mouseOffsetX,
translateY: scaleRatio * translateY + (1 - scaleRatio) * mouseOffsetY
};
}
function zoomIn(oldScale, step, min, max, options) {
var newScale = calcZoomInScale(oldScale, step, min, max);
return {
newScale: newScale,
zoomResult: {
newTranslate: calculateTranslateOffset(oldScale, newScale, options)
}
};
}
function zoomOut(oldScale, step, min, max, options) {
var newScale = calcZoomOutScale(oldScale, step, min, max);
return {
newScale: newScale,
zoomResult: {
newTranslate: calculateTranslateOffset(oldScale, newScale, options)
}
};
}
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function getEventCoords(e) {
if ("touches" in e) {
var touch = e.touches[0] || e.changedTouches[0];
return touch ? {
pageX: touch.pageX,
pageY: touch.pageY
} : void 0;
}
return {
pageX: e.pageX,
pageY: e.pageY
};
}
function useDrag(initTransform) {
var transform = ref(initTransform);
var pointerDownHandler = function pointerDownHandler(e) {
if ("button" in e && e.button !== 0) return;
var startCoords = getEventCoords(e);
if (!startCoords) return;
var startX = startCoords.pageX,
startY = startCoords.pageY;
var _transform$value = transform.value,
translateX = _transform$value.translateX,
translateY = _transform$value.translateY;
var moveHandler = function moveHandler(e2) {
var coords = getEventCoords(e2);
if (!coords) return;
transform.value = {
translateX: translateX + coords.pageX - startX,
translateY: translateY + coords.pageY - startY
};
};
var removeHandler = function removeHandler() {
document.removeEventListener("mousemove", moveHandler);
document.removeEventListener("mouseup", upHandler);
document.removeEventListener("mouseleave", leaveHandler);
document.removeEventListener("touchmove", moveHandler);
document.removeEventListener("touchend", upHandler);
document.removeEventListener("touchcancel", upHandler);
};
var upHandler = function upHandler() {
return removeHandler();
};
var leaveHandler = function leaveHandler() {
return removeHandler();
};
document.addEventListener("mousemove", moveHandler);
document.addEventListener("mouseup", upHandler);
document.addEventListener("mouseleave", leaveHandler);
document.addEventListener("touchmove", moveHandler, {
passive: false
});
document.addEventListener("touchend", upHandler);
document.addEventListener("touchcancel", upHandler);
};
var resetTransform = function resetTransform() {
transform.value = _objectSpread({}, initTransform);
};
return {
transform: transform,
mouseDownHandler: pointerDownHandler,
pointerDownHandler: pointerDownHandler,
resetTransform: resetTransform
};
}
function useMirror() {
var mirror = ref(MIRROR_DEFAULT);
var onMirror = function onMirror() {
mirror.value = toggleMirror(mirror.value);
};
var resetMirror = function resetMirror() {
mirror.value = MIRROR_DEFAULT;
};
return {
mirror: mirror,
onMirror: onMirror,
resetMirror: resetMirror
};
}
function useScale(imageScale) {
var _DEFAULT_IMAGE_SCALE$ = _objectSpread(_objectSpread({}, DEFAULT_IMAGE_SCALE), imageScale),
max = _DEFAULT_IMAGE_SCALE$.max,
min = _DEFAULT_IMAGE_SCALE$.min,
step = _DEFAULT_IMAGE_SCALE$.step,
rawDefault = _DEFAULT_IMAGE_SCALE$.defaultScale;
var defaultScale = clampScale(rawDefault, min, max);
var scale = ref(defaultScale);
var lastZoomResult = ref({});
var pinchDistance = 0;
var doZoomIn = throttle(function (options) {
var _zoomIn = zoomIn(scale.value, step, min, max, options),
newScale = _zoomIn.newScale,
zoomResult = _zoomIn.zoomResult;
scale.value = newScale;
lastZoomResult.value = zoomResult;
}, 50, {
leading: true,
trailing: false
});
var doZoomOut = throttle(function (options) {
var _zoomOut = zoomOut(scale.value, step, min, max, options),
newScale = _zoomOut.newScale,
zoomResult = _zoomOut.zoomResult;
scale.value = newScale;
lastZoomResult.value = zoomResult;
}, 50, {
leading: true,
trailing: false
});
var onZoomIn = function onZoomIn(options) {
var prevScale = scale.value;
doZoomIn(options);
if (scale.value === prevScale) return {};
return lastZoomResult.value;
};
var onZoomOut = function onZoomOut(options) {
var prevScale = scale.value;
doZoomOut(options);
if (scale.value === prevScale) return {};
return lastZoomResult.value;
};
var resetScale = function resetScale() {
scale.value = defaultScale;
};
var onTouchStart = function onTouchStart(e) {
if (e.touches.length !== 2) return;
e.preventDefault();
var _Array$from = Array.from(e.touches),
_Array$from2 = _slicedToArray(_Array$from, 2),
touch1 = _Array$from2[0],
touch2 = _Array$from2[1];
pinchDistance = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
};
var onTouchMove = function onTouchMove(e) {
if (e.touches.length !== 2) return;
e.preventDefault();
var _Array$from3 = Array.from(e.touches),
_Array$from4 = _slicedToArray(_Array$from3, 2),
touch1 = _Array$from4[0],
touch2 = _Array$from4[1];
var currentDistance = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
if (currentDistance > pinchDistance) {
onZoomIn();
} else {
onZoomOut();
}
pinchDistance = currentDistance;
};
var onTouchEnd = function onTouchEnd() {
pinchDistance = 0;
};
return {
scale: scale,
onZoomIn: onZoomIn,
onZoomOut: onZoomOut,
resetScale: resetScale,
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd
};
}
function useRotate() {
var rotate = ref(0);
var onRotate = function onRotate() {
rotate.value += ROTATE_DEG;
};
var resetRotate = function resetRotate() {
var adjusted = calcResetRotation(rotate.value);
if (adjusted !== 0) {
rotate.value -= adjusted;
}
};
return {
rotate: rotate,
onRotate: onRotate,
resetRotate: resetRotate
};
}
export { useScale as a, useRotate as b, useDrag as c, isImageExceedsViewport as i, useMirror as u };
//# sourceMappingURL=dep-481d6eeb.js.map