Skip to content

Commit 92b8129

Browse files
jaywcjlovejaywcjlove
committed
feat: add readonly props.
1 parent 9c274c3 commit 92b8129

File tree

2 files changed

+73
-16
lines changed

2 files changed

+73
-16
lines changed

‎core/README.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ react-signature
66

77
A signature board component for react.
88

9+
[![react-signature](https://github.com/uiwjs/react-signature/assets/1680273/85bdb3d3-dfe5-4dc5-a95b-72cde1a9a10c)](https://uiwjs.github.io/react-signature/)
910

1011
## Quick Start
1112

@@ -34,6 +35,53 @@ export default function App() {
3435
}
3536
```
3637

38+
## Readonly
39+
40+
```jsx mdx:preview
41+
import React, { useRef, useEffect } from "react";
42+
import Signature, { getStroke, getSvgPathFromStroke, defaultOptions } from '@uiw/react-signature';
43+
44+
const point1 = [[81.546875,38.87890625],[82.34375,37.55078125],[84.27734375,35.2265625],[87.73046875,33.2421875],[94.98046875,30.87890625],[106.29296875,28.6796875],[118.23828125,27.71875],[126.6953125,29.45703125],[134.9375,36.22265625],[141.8359375,47.13671875],[143.9765625,59.53515625],[141.8671875,76],[128.1484375,98.9609375],[106.203125,118.87109375],[95.04296875,125.8203125],[94.5859375,125.04296875],[94.7265625,122.04296875],[97.90234375,115.30859375],[109.28515625,102.3046875],[129.75390625,86.796875],[155.27734375,76.14453125],[184.99609375,71.8828125],[218.16015625,73.33984375],[249.26953125,77.8671875],[264.2421875,81.10546875],[266.51171875,82.35546875],[267.69921875,82.99609375],[267.64453125,83.08203125],[267.73046875,82.6875],[267.73828125,80.4921875],[267.83203125,75.4765625],[268.36328125,66.6484375],[268.84765625,56.4609375],[268.421875,46.88671875],[266.9296875,40.86328125],[264.90625,38.4765625],[262.87890625,37.30859375],[258.68359375,39.13671875],[251.265625,43.80078125],[242.21484375,51.79296875],[232.60546875,63.21484375],[222.6484375,78.53125],[213.01171875,94.58984375],[206.3203125,104.57421875],[201.64453125,109.59375],[198.61328125,111.87109375],[197.24609375,111.3671875],[195.421875,109.23828125],[193.87890625,104.91015625],[193.7265625,99.140625],[198.671875,89.87109375],[214.1015625,75.14453125],[243.25390625,54.8671875],[290.3671875,29.3515625],[329.31640625,10.6875],[338.9609375,6.70703125],[338.5234375,9.07421875],[336.8671875,15.4453125],[331.4296875,28.4140625],[323.234375,43.5234375],[312.70703125,57.9609375],[302.296875,66.97265625],[293.85546875,70.734375],[287.6484375,72.25],[283.45703125,70.9453125],[280.51171875,68.09375],[279.5390625,64.13671875],[280.828125,60.0234375],[284.98828125,56.40625],[294.63671875,54.62109375],[307.8984375,56.17578125],[316.7890625,62.65234375],[317.5859375,74.11328125],[309.1640625,92.50390625],[295.12109375,110.55859375],[282.93359375,123.125],[278.58203125,129.00390625],[279.46875,129.80859375],[285.25390625,129.26953125],[299.71484375,125.71875],[321.41015625,118.89453125],[349.296875,108.58203125],[372.53125,98.8671875],[387.57421875,91],[395.23046875,84.53125],[396.7421875,79.3046875],[395.31640625,75.45703125],[389.86328125,73.57421875],[374.875,77.3203125],[347.36328125,88.46875],[310.44140625,107.75],[273.14453125,130.30078125],[252.08984375,145.77734375],[246.2890625,152.421875],[245.4609375,153.8046875],[245.3671875,153.1640625],[245.78515625,148.46875],[247.5859375,136.29296875],[250.55078125,119.38671875],[253.1796875,107.87890625],[255.4765625,102.29296875],[257.40625,99.61328125],[260.58203125,99.8125],[273.9453125,105.66015625],[296.24609375,118.10546875],[326.40234375,138.03125],[355.63671875,158.3515625],[368.66796875,167.1796875],[373.015625,170.12109375],[374.7578125,170.8203125],[374.73046875,169.78125],[374.6953125,167.3203125],[374.765625,161.75],[375.6328125,154.09375],[377.94921875,146.08984375],[380.94921875,140.23046875],[383.6640625,136.3046875],[385.0546875,134.08203125],[385.19140625,133.45703125],[384.81640625,132.41015625]];
45+
const point2 = [[335.0078125,77.8828125],[335.31640625,77.984375],[336.16796875,78.30078125],[337.640625,79.0546875],[339.65234375,80.44140625],[342.88671875,82.921875],[347.0625,86.28125],[353.9296875,91.546875],[358.88671875,95.125],[359.7734375,95.6875],[360.48828125,96.19921875],[360.2265625,96.42578125]];
46+
47+
export default function App() {
48+
const stroke = getStroke(point1, defaultOptions);
49+
const pathData = getSvgPathFromStroke(stroke);
50+
const pathData2 = getSvgPathFromStroke(getStroke(point2, defaultOptions));
51+
return (
52+
<Signature readonly fill="#6b85e4">
53+
<path d={pathData} />
54+
<path d={pathData2} />
55+
</Signature>
56+
);
57+
}
58+
```
59+
60+
## Background Color & Text color
61+
62+
Background transparency can be set with `--w-signature-background: transparent;`
63+
64+
```jsx mdx:preview
65+
import React, { useRef } from "react";
66+
import Signature from '@uiw/react-signature';
67+
68+
export default function App() {
69+
const $svg = useRef(null);
70+
const handle = (evn) => {
71+
const parentElement = $svg.current
72+
while (parentElement.firstChild) {
73+
parentElement.removeChild(parentElement.firstChild);
74+
}
75+
}
76+
return (
77+
<>
78+
<Signature ref={$svg} fill="red" style={{ "--w-signature-background": "#e4e6ef" }} />
79+
<button onClick={() => handle()}>Clear</button>
80+
</>
81+
);
82+
}
83+
```
84+
3785
## Props
3886

3987
```ts
@@ -42,6 +90,7 @@ import { type StrokeOptions } from 'perfect-freehand';
4290
export interface SignatureProps extends React.SVGProps<SVGSVGElement> {
4391
prefixCls?: string;
4492
options?: StrokeOptions;
93+
readonly?: boolean;
4594
onPointer?: (points: number[][]) => void;
4695
}
4796
export default function Signature(props?: SignatureProps): React.JSX.Element;

‎core/src/index.tsx‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,69 +2,77 @@ import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react
22
import { getStroke, type StrokeOptions } from 'perfect-freehand';
33
import { getSvgPathFromStroke, getBoundingClientRect, getClinetXY, defaultOptions, defaultStyle } from './utils';
44

5+
export * from 'perfect-freehand';
56
export * from './utils';
67

78
export interface SignatureProps extends React.SVGProps<SVGSVGElement> {
89
prefixCls?: string;
910
options?: StrokeOptions;
11+
readonly?: boolean;
1012
onPointer?: (points: number[][]) => void;
1113
}
1214

13-
let points: number[][] = [];
14-
1515
const Signature = forwardRef<SVGSVGElement, SignatureProps>((props, ref) => {
16-
const { className, prefixCls = 'w-signature', style, onPointer, options, ...others } = props;
16+
const {
17+
className,
18+
prefixCls = 'w-signature',
19+
style,
20+
readonly = false,
21+
onPointer,
22+
options,
23+
children,
24+
...others
25+
} = props;
1726
const cls = [className, prefixCls].filter(Boolean).join(' ');
1827
const $svg = useRef<SVGSVGElement>(null);
1928
const $path = useRef<SVGPathElement>();
29+
const pointsRef = useRef<number[][]>();
2030

2131
useImperativeHandle<SVGSVGElement | null, SVGSVGElement | null>(ref, () => $svg.current, [$svg.current]);
2232

2333
const handlePointerDown = (e: React.PointerEvent<SVGSVGElement>) => {
2434
const { offsetY, offsetX } = getBoundingClientRect($svg.current);
2535
const clientX = e.clientX || e.nativeEvent.clientX;
2636
const clientY = e.clientY || e.nativeEvent.clientY;
27-
points = [[clientX - offsetX, clientY - offsetY]];
37+
pointsRef.current = [[clientX - offsetX, clientY - offsetY]];
2838
const pathElm = document.createElementNS('http://www.w3.org/2000/svg', 'path');
2939
$path.current = pathElm;
3040
$svg.current!.appendChild(pathElm);
31-
// $svg.current?.remove()
3241
};
3342

3443
const handlePointerMove = (e: PointerEvent) => {
3544
if ($path.current) {
3645
const { offsetY, offsetX } = getBoundingClientRect($svg.current);
3746
const { clientX, clientY } = getClinetXY(e);
38-
points = [...points, [clientX - offsetX, clientY - offsetY]];
39-
const stroke = getStroke(points, { ...defaultOptions, ...options });
47+
pointsRef.current = [...pointsRef.current!, [clientX - offsetX, clientY - offsetY]];
48+
const stroke = getStroke(pointsRef.current!, { ...defaultOptions, ...options });
4049
const pathData = getSvgPathFromStroke(stroke);
4150
$path.current?.setAttribute('d', pathData);
4251
}
4352
};
4453

4554
const handlePointerUp = () => {
46-
onPointer && onPointer(points);
47-
points = [];
55+
let result = pointsRef.current || [];
56+
onPointer && onPointer(result);
4857
$path.current = undefined;
58+
pointsRef.current = undefined;
4959
};
5060

5161
useEffect(() => {
62+
if (readonly) return;
5263
document.addEventListener('pointermove', handlePointerMove);
5364
document.addEventListener('pointerup', handlePointerUp);
5465
return () => {
66+
if (readonly) return;
5567
document.removeEventListener('pointermove', handlePointerMove);
5668
document.removeEventListener('pointerup', handlePointerUp);
5769
};
5870
}, []);
5971

6072
return (
61-
<svg
62-
{...others}
63-
ref={$svg}
64-
className={cls}
65-
onPointerDown={handlePointerDown}
66-
style={{ ...defaultStyle, ...style }}
67-
/>
73+
<svg {...others} ref={$svg} className={cls} onPointerDown={handlePointerDown} style={{ ...defaultStyle, ...style }}>
74+
{children}
75+
</svg>
6876
);
6977
});
7078

0 commit comments

Comments
 (0)