组件代码
```js
const DesignerDragScaleContainer =()=>{
const { setScale, setRatio } = useAppStore();
const scaleCallback = useCallback(
(dsData: DragScaleData) => {
console.log("缩放率回调:" + JSON.stringify(dsData.scale));
setScale(dsData.scale);
setRatio(dsData.ratio);
},
[setScale, setRatio]
);
useDragScaleProvider({
container: containRef,
content: contentRef,
scaleCallback: scaleCallback,
});
}
```
hooks 相关
```js
export interface DragScaleData {
scale: number;
ratio: number;
position: IPoint;
}
interface DragScaleParams{
container:MutableRefObject<HTMLDivElement> | undefined
content:MutableRefObject<HTMLDivElement> | undefined
scaleCallback?: (dsData: DragScaleData) => void;
}
export function useDragScaleProvider(params: DragScaleParams) {
const { container, scaleCallback } = params;
const { scale, ratio, compute } = useScaleCore();
const [wheelEvent,setWheelEvent] = useState<WheelEvent>()
const [position, setPosition] = useState<IPoint>({ x: 0, y: 0 });
const handleWheel = useCallback((e: WheelEvent): void => {
if (e.altKey && e.buttons !== 2) {
compute(e.deltaY > 0 ? 0 : 1);
// setWheelEvent(e)
}
}, [compute]);
useEffect(() => {
const handleWheelWithCallback = (e: WheelEvent) => {
handleWheel(e);
};
const currentContainer = container.current;
if (currentContainer) {
currentContainer.addEventListener('wheel', handleWheelWithCallback, { passive: true });
return () => {
currentContainer.removeEventListener('wheel', handleWheelWithCallback);
};
}
}, [container, handleWheel, scale, ratio, position, scaleCallback]);
useEffect(()=>{
scaleCallback?.({ scale, ratio, position });
},[position, ratio, scale, scaleCallback])
return { scale, ratio };
}
function useScaleCore(initialMax = 3, initialMin = 0.05, initialScale = 1, initialRatio = 1) {
const [max, setMax] = useState(initialMax);
const [min, setMin] = useState(initialMin);
const [scale, setScale] = useState(initialScale);
const [ratio, setRatio] = useState(initialRatio);
const compute = useCallback((type: number) => {
let _ratio = 1.2;
// 缩小
if (type === 0) _ratio = 1 / 1.2;
// 限制缩放倍数
let _scale = scale * _ratio;
if (_scale > max) {
_ratio = max / scale;
_scale = max;
} else if (_scale < min) {
_ratio = min / scale;
_scale = min;
}
// 使用函数式更新方式更新 scale 和 ratio
setScale(_scale);
setRatio(_ratio);
}, [max, min, scale]);
return { max, min, scale, ratio, compute };
}
export default useScaleCore;
``` |
|
