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 | 8x 8x 780x 780x 780x 8x 8x 2x 2x 2x 39x 39x 39x 39x | import { useCallback, useEffect, useRef } from 'react';
/**
* Turn the points returned from perfect-freehand into SVG path data.
*/
export function getSvgPathFromStroke(stroke: number[][]) {
Iif (!stroke.length) return '';
const d = stroke.reduce(
(acc, [x0, y0], i, arr) => {
const [x1, y1] = arr[(i + 1) % arr.length];
acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2);
return acc;
},
['M', ...stroke[0], 'Q'],
);
d.push('Z');
return d.join(' ');
}
export const getBoundingClientRect = <T extends Element>(el: T | null) => {
const rect = el?.getBoundingClientRect();
const offsetX = rect?.left || 0;
const offsetY = rect?.top || 0;
return { offsetX, offsetY };
};
export const getClinetXY = ({ clientX, clientY }: PointerEvent) => {
return { clientX, clientY };
};
export const defaultStyle: React.CSSProperties = {
'--w-signature-background': '#fff',
touchAction: 'none',
position: 'relative',
width: '100%',
height: '100%',
backgroundColor: 'var(--w-signature-background)',
} as React.CSSProperties;
// Saves incoming handler to the ref in order to avoid "useCallback hell"
export function useEvent<K>(handler?: (event: K) => void): (event: K) => void {
const callbackRef = useRef(handler);
useEffect(() => {
callbackRef.current = handler;
});
return useCallback((event: K) => callbackRef.current && callbackRef.current(event), []);
}
|