useFreeScale

useFreeScale is a lightweight and high-performance custom React Hook that provides the functionality of free scaling and dragging (compatible with mobile touch events) on HTML elements. It uses touchpad two-finger zoom and mouse dragging for scaling and moving operations.

Preview

Install

1npm i use-free-scale

Usage

First, you need to call useFreeScale in your component and pass in a configuration object. This object has two optional properties: scaleStep and customTrans. scaleStep is the scale ratio, and customTrans is a function that takes the current transformation result and the new transformation result and returns a new transformation result.

1import { useFreeScale, ITransRes, IRectData } from "use-free-scale";
2
3const customLimitScaleTrans = (
4  prev: ITransRes,
5  v: ITransRes,
6  rects: IRectData
7) => {
8  if (v.scale <= 0.3 || v.scale >= 3) {
9    return prev;
10  }
11  return v;
12};
13
14const customFreeTrans = (_: ITransRes, v: ITransRes) => v;
15
16const containerLimitTrans = (
17  prev: ITransRes,
18  v: ITransRes,
19  rects: IRectData
20) => {
21  // 限制变换后的子元素不能超出容器
22  const { originConatinerRect, originChildRect } = rects;
23  // 高度加变换距离绝对值，小于容器高度
24  const limitY =
25    Math.abs(v.transXY[1]) + ((originChildRect?.height || 0) * v.scale) / 2 <
26    (originConatinerRect?.height || 0) / 2;
27  // 宽度加变换距离绝对值，小于容器宽度
28  const limitX =
29    Math.abs(v.transXY[0]) + ((originChildRect?.width || 0) * v.scale) / 2 <
30    (originConatinerRect?.width || 0) / 2;
31
32  if (!limitX || !limitY) {
33    return prev;
34  }
35  return v;
36};
37
38const { containerRef, childRef, transform } = useFreeScale({
39  customTrans: customLimitScaleTrans,
40});

Then, you need to assign containerRef and childRef to your container element and child element, respectively. transform is a string that represents the current transformation state. You need to assign it to your child element's style.transform property.

1<div ref={containerRef} style={{ width: "100%", height: "100%" }}>
2  <div ref={childRef} style={{ transform }}>
3    Content
4  </div>
5</div>

You can also use setRotate, setScale, and setTransXY to manually set the rotation angle, scale ratio, and displacement.

API

useFreeScale(config: IUseFreeScale)

Parameters

• config: A configuration object with two optional properties.
  • scaleStep: The scale ratio, the default value is 0.1.
  • customTrans: A custom transformation function. It takes two parameters: the current transformation result and the new transformation result, and returns a new transformation result. The default value is an identity function.

Return Value

• containerRef: A React.RefObject, you need to assign it to your container element.
• childRef: A React.RefObject, you need to assign it to your child element.
• transform: A string that represents the current transformation state. You need to assign it to your child element's style.transform property.
• setRotate: A function that you can use to manually set the rotation angle.
• setScale: A function that you can use to manually set the scale ratio.
• setTransXY: A function that you can use to manually set the displacement.

Notes

This Hook can only be used in environments that support wheel events and mousedown, mousemove, mouseup events, such as modern web browsers. In addition, you need to ensure that your container element and child element are both block elements, and the size of the container element is large enough to accommodate the enlargement and movement of the child element.