useImageTransform.d.ts 1.1 KB

12345678910111213141516171819202122232425262728
  1. /// <reference types="react" />
  2. export type TransformType = {
  3. x: number;
  4. y: number;
  5. rotate: number;
  6. scale: number;
  7. flipX: boolean;
  8. flipY: boolean;
  9. };
  10. export type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound' | 'touchZoom' | 'reset';
  11. export type UpdateTransformFunc = (newTransform: Partial<TransformType>, action: TransformAction) => void;
  12. export type DispatchZoomChangeFunc = (ratio: number, action: TransformAction, centerX?: number, centerY?: number, isTouch?: boolean) => void;
  13. export default function useImageTransform(imgRef: React.MutableRefObject<HTMLImageElement>, minScale: number, maxScale: number, onTransform: (info: {
  14. transform: TransformType;
  15. action: TransformAction;
  16. }) => void): {
  17. transform: {
  18. x: number;
  19. y: number;
  20. rotate: number;
  21. scale: number;
  22. flipX: boolean;
  23. flipY: boolean;
  24. };
  25. resetTransform: (action: TransformAction) => void;
  26. updateTransform: UpdateTransformFunc;
  27. dispatchZoomChange: DispatchZoomChangeFunc;
  28. };