Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 1x 11x 11x 11x 11x 11x 11x 11x 11x 11x 2x 11x 11x 11x 1x 1x 1x 1x 1x 11x 5x 5x 5x 5x 5x 11x 11x | import React, { useEffect, useRef, useId, forwardRef, useImperativeHandle } from 'react';
import { getBoundingClientRect, getClinetXY, defaultStyle, useEvent } from './utils';
import { useDispatch } from './store';
import { SignatureRef, SignatureProps } from './';
export const Signature = forwardRef<SignatureRef, Omit<SignatureProps, 'defaultPoints' | 'renderPath' | 'options'>>(
(props, ref) => {
const { className, prefixCls = 'w-signature', style, readonly = false, onPointer, children, ...others } = props;
const cls = [className, prefixCls].filter(Boolean).join(' ');
const $svg = useRef<SVGSVGElement>(null);
const $path = useRef<SVGPathElement>();
const pointsRef = useRef<number[][]>();
const pointCount = useRef<number>(0);
const pointId = useId();
const dispatch = useDispatch();
useImperativeHandle<SignatureRef, SignatureRef>(
ref,
() => ({ svg: $svg.current, dispatch, clear: () => dispatch({}) }),
[$svg.current, dispatch],
);
const handlePointerDown = useEvent<PointerEvent>((e) => {
if (readonly) return;
pointCount.current += 1;
const { offsetY, offsetX } = getBoundingClientRect($svg.current);
const evn = e as unknown as React.PointerEvent<SVGSVGElement>;
const clientX = evn.clientX || evn.nativeEvent.clientX;
const clientY = evn.clientY || evn.nativeEvent.clientY;
pointsRef.current = [[clientX - offsetX, clientY - offsetY]];
const pathElm = document.createElementNS('http://www.w3.org/2000/svg', 'path');
$path.current = pathElm;
$svg.current!.appendChild(pathElm);
dispatch({
[pointId + pointCount.current]: pointsRef.current,
});
document.addEventListener('pointermove', handlePointerMove);
});
const handlePointerMove = useEvent((e: PointerEvent) => {
if ($path.current) {
const { offsetY, offsetX } = getBoundingClientRect($svg.current);
const { clientX, clientY } = getClinetXY(e);
pointsRef.current = [...pointsRef.current!, [clientX - offsetX, clientY - offsetY]];
dispatch({
[pointId + pointCount.current]: pointsRef.current,
});
}
});
const handlePointerUp = useEvent(() => {
let result = pointsRef.current || [];
onPointer && props.onPointer!(result);
$path.current = undefined;
pointsRef.current = undefined;
document.removeEventListener('pointermove', handlePointerMove);
});
useEffect(() => {
document.addEventListener('pointerup', handlePointerUp);
$svg.current?.addEventListener('pointerdown', handlePointerDown);
return () => {
document.removeEventListener('pointerup', handlePointerUp);
$svg.current?.removeEventListener('pointerdown', handlePointerDown);
};
}, []);
const svgStyle: React.CSSProperties = { ...defaultStyle, ...style };
return (
<svg {...others} ref={$svg} className={cls} style={svgStyle}>
{children}
</svg>
);
},
);
|