feat: add defaultPoints props.

Author: jaywcjlove

core/README.md

@@ -42,18 +42,16 @@ export default function App() {
 import React, { useRef, useEffect } from "react";
 import Signature, { getStroke, getSvgPathFromStroke, defaultOptions } from '@uiw/react-signature';
 
-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]];
 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]];
 
+const points = {
+  "path-01": [[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]],
+  "path-02": [[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]]
+}
+
 export default function App() {
-  const stroke = getStroke(point1, defaultOptions);
-  const pathData = getSvgPathFromStroke(stroke);
-  const pathData2 = getSvgPathFromStroke(getStroke(point2, defaultOptions));
   return (
-    <Signature readonly fill="#6b85e4">
-      <path d={pathData} />
-      <path d={pathData2} />
-    </Signature>
+    <Signature defaultPoints={points} readonly fill="#6b85e4" />
   );
 }
 ```
@@ -126,31 +124,12 @@ export interface SignatureProps extends React.SVGProps<SVGSVGElement> {
   prefixCls?: string;
   options?: StrokeOptions;
   readonly?: boolean;
+  defaultPoints?: Record<string, number[][]>;
   onPointer?: (points: number[][]) => void;
 }
 export default function Signature(props?: SignatureProps): React.JSX.Element;
 ```
 
-utils
-
-```ts
-import { type StrokeOptions } from 'perfect-freehand';
-/**
- * Turn the points returned from perfect-freehand into SVG path data.
- */
-export declare function getSvgPathFromStroke(stroke: number[][]): string;
-export declare const defaultOptions: StrokeOptions;
-export declare const getBoundingClientRect: (el: SVGSVGElement | null) => {
-    offsetX: number;
-    offsetY: number;
-};
-export declare const getClinetXY: ({ clientX, clientY }: PointerEvent) => {
-    clientX: number;
-    clientY: number;
-};
-export declare const defaultStyle: React.CSSProperties;
-```
-
 ### Options
 
 The options object is optional, as are each of its properties.

core/src/Paths.tsx

@@ -0,0 +1,31 @@
+import React, { Fragment } from 'react';
+import { getStroke } from 'perfect-freehand';
+import { useStore } from './store';
+import { useOptionStore } from './options';
+import { getSvgPathFromStroke } from './utils';
+
+export const Paths = () => {
+  const { options, ...data } = useStore();
+  return (
+    <Fragment>
+      {Object.keys(data).map((key) => (
+        <CreatePath key={key} data={data[key]} />
+      ))}
+    </Fragment>
+  );
+};
+
+type CreatePathProps = {
+  data: number[][];
+};
+
+const CreatePath = ({ data = [] }: CreatePathProps) => {
+  const options = useOptionStore();
+  const stroke = getStroke(data, options);
+  const pathData = getSvgPathFromStroke(stroke);
+  return (
+    <Fragment>
+      <path d={pathData} />
+    </Fragment>
+  );
+};

core/src/Signature.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef, useId, forwardRef, useImperativeHandle } from 'react';
+import { getStroke, type StrokeOptions } from 'perfect-freehand';
+import { getBoundingClientRect, getClinetXY, defaultStyle, useEvent } from './utils';
+
+import { useDispatch } from './store';
+
+export interface SignatureProps extends React.SVGProps<SVGSVGElement> {
+  prefixCls?: string;
+  options?: StrokeOptions;
+  readonly?: boolean;
+  onPointer?: (points: number[][]) => void;
+}
+
+export const Signature = forwardRef<SVGSVGElement, SignatureProps>((props, ref) => {
+  const {
+    className,
+    prefixCls = 'w-signature',
+    style,
+    readonly = false,
+    onPointer,
+    options,
+    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 distpatch = useDispatch();
+
+  useImperativeHandle<SVGSVGElement | null, SVGSVGElement | null>(ref, () => $svg.current, [$svg.current]);
+
+  const handlePointerDown = useEvent((e: React.PointerEvent<SVGSVGElement>) => {
+    if (readonly) return;
+    pointCount.current += 1;
+    const { offsetY, offsetX } = getBoundingClientRect($svg.current);
+    const clientX = e.clientX || e.nativeEvent.clientX;
+    const clientY = e.clientY || e.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);
+    distpatch({
+      [pointId + pointCount.current]: pointsRef.current,
+    });
+  });
+
+  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]];
+      distpatch({
+        [pointId + pointCount.current]: pointsRef.current,
+      });
+    }
+  });
+
+  const handlePointerUp = useEvent(() => {
+    let result = pointsRef.current || [];
+    onPointer && props.onPointer!(result);
+    $path.current = undefined;
+    pointsRef.current = undefined;
+  });
+
+  useEffect(() => {
+    if (readonly) return;
+    document.addEventListener('pointermove', handlePointerMove);
+    document.addEventListener('pointerup', handlePointerUp);
+    return () => {
+      if (readonly) return;
+      document.removeEventListener('pointermove', handlePointerMove);
+      document.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, []);
+  return (
+    <svg {...others} ref={$svg} className={cls} onPointerDown={handlePointerDown} style={{ ...defaultStyle, ...style }}>
+      {children}
+    </svg>
+  );
+});

core/src/index.tsx

@@ -1,87 +1,39 @@
-import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
-import { getStroke, type StrokeOptions } from 'perfect-freehand';
-import {
-  getSvgPathFromStroke,
-  getBoundingClientRect,
-  getClinetXY,
-  defaultOptions,
-  defaultStyle,
-  useEvent,
-} from './utils';
+import React, { useReducer, forwardRef, useEffect } from 'react';
+import { type StrokeOptions } from 'perfect-freehand';
+import { PointerContext, PointerDispatchContext, reducer } from './store';
+import { OptionContext, OptionDispatchContext, reducerOption, defaultOptions } from './options';
+import { Signature as Container } from './Signature';
+import { Paths } from './Paths';
 
 export * from 'perfect-freehand';
 export * from './utils';
+export * from './options';
 
 export interface SignatureProps extends React.SVGProps<SVGSVGElement> {
   prefixCls?: string;
   options?: StrokeOptions;
   readonly?: boolean;
+  defaultPoints?: Record<string, number[][]>;
   onPointer?: (points: number[][]) => void;
 }
 
-const Signature = forwardRef<SVGSVGElement, SignatureProps>((props, ref) => {
-  const {
-    className,
-    prefixCls = 'w-signature',
-    style,
-    readonly = false,
-    onPointer,
-    options,
-    children,
-    ...others
-  } = props;
-  const cls = [className, prefixCls].filter(Boolean).join(' ');
-  const $svg = useRef<SVGSVGElement>(null);
-  const $path = useRef<SVGPathElement>();
-  const pointsRef = useRef<number[][]>();
-
-  useImperativeHandle<SVGSVGElement | null, SVGSVGElement | null>(ref, () => $svg.current, [$svg.current]);
-
-  const handlePointerDown = useEvent((e: React.PointerEvent<SVGSVGElement>) => {
-    const { offsetY, offsetX } = getBoundingClientRect($svg.current);
-    const clientX = e.clientX || e.nativeEvent.clientX;
-    const clientY = e.clientY || e.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);
-  });
-
-  const handlePointerMove = useEvent((e: PointerEvent) => {
-    if ($path.current) {
-      const resultOptions = { ...defaultOptions, ...options };
-      console.log(resultOptions);
-      const { offsetY, offsetX } = getBoundingClientRect($svg.current);
-      const { clientX, clientY } = getClinetXY(e);
-      pointsRef.current = [...pointsRef.current!, [clientX - offsetX, clientY - offsetY]];
-      const stroke = getStroke(pointsRef.current!, resultOptions);
-      const pathData = getSvgPathFromStroke(stroke);
-      $path.current?.setAttribute('d', pathData);
-    }
-  });
-
-  const handlePointerUp = useEvent(() => {
-    let result = pointsRef.current || [];
-    onPointer && props.onPointer!(result);
-    $path.current = undefined;
-    pointsRef.current = undefined;
-  });
-
-  useEffect(() => {
-    if (readonly) return;
-    document.addEventListener('pointermove', handlePointerMove);
-    document.addEventListener('pointerup', handlePointerUp);
-    return () => {
-      if (readonly) return;
-      document.removeEventListener('pointermove', handlePointerMove);
-      document.removeEventListener('pointerup', handlePointerUp);
-    };
-  }, []);
-
+const Signature = forwardRef<SVGSVGElement, SignatureProps>(({ children, options, defaultPoints, ...props }, ref) => {
+  const [state, dispatch] = useReducer(reducer, Object.assign({}, defaultPoints));
+  const [stateOption, dispatchOption] = useReducer(reducerOption, Object.assign({ ...defaultOptions }, options));
+  useEffect(() => dispatchOption({ ...options }), [options]);
   return (
-    <svg {...others} ref={$svg} className={cls} onPointerDown={handlePointerDown} style={{ ...defaultStyle, ...style }}>
-      {children}
-    </svg>
+    <PointerContext.Provider value={state}>
+      <PointerDispatchContext.Provider value={dispatch}>
+        <Container {...props} ref={ref}>
+          <OptionContext.Provider value={stateOption}>
+            <OptionDispatchContext.Provider value={dispatchOption}>
+              <Paths />
+            </OptionDispatchContext.Provider>
+          </OptionContext.Provider>
+          {children}
+        </Container>
+      </PointerDispatchContext.Provider>
+    </PointerContext.Provider>
   );
 });
 

core/src/options.tsx

@@ -0,0 +1,38 @@
+import { createContext, useContext } from 'react';
+import { type StrokeOptions } from 'perfect-freehand';
+
+export const defaultOptions: InitialOptionState = {
+  size: 6,
+  smoothing: 0.46,
+  thinning: 0.73,
+  streamline: 0.5,
+  easing: (t) => t,
+  start: {
+    taper: 0,
+    easing: (t) => t,
+    cap: true,
+  },
+  end: {
+    taper: 0,
+    easing: (t) => t,
+    cap: true,
+  },
+};
+
+export const OptionContext = createContext<InitialOptionState>(defaultOptions);
+export const OptionDispatchContext = createContext<Dispatch>(() => {});
+
+type Dispatch = React.Dispatch<InitialOptionState>;
+type InitialOptionState = StrokeOptions;
+
+export function reducerOption(tasks: InitialOptionState, action: InitialOptionState) {
+  return { ...tasks, ...action };
+}
+
+export const useOptionStore = () => {
+  return useContext(OptionContext);
+};
+
+export const useOptionDispatch = () => {
+  return useContext(OptionDispatchContext);
+};

core/src/store.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+import { type StrokeOptions } from 'perfect-freehand';
+
+export const initialState: InitialState = {};
+
+export const PointerContext = createContext<InitialState>(initialState);
+export const PointerDispatchContext = createContext<Dispatch>(() => {});
+
+type Dispatch = React.Dispatch<InitialState>;
+
+type InitialState = Record<string, number[][]>;
+
+export function reducer(tasks: InitialState, action: InitialState) {
+  return { ...tasks, ...action };
+}
+
+export const useStore = () => {
+  return useContext(PointerContext);
+};
+
+export const useDispatch = () => {
+  return useContext(PointerDispatchContext);
+};

core/src/utils.ts

@@ -19,24 +19,6 @@ export function getSvgPathFromStroke(stroke: number[][]) {
   return d.join(' ');
 }
 
-export const defaultOptions: StrokeOptions = {
-  size: 6,
-  smoothing: 0.46,
-  thinning: 0.73,
-  streamline: 0.5,
-  easing: (t) => t,
-  start: {
-    taper: 0,
-    easing: (t) => t,
-    cap: true,
-  },
-  end: {
-    taper: 0,
-    easing: (t) => t,
-    cap: true,
-  },
-};
-
 export const getBoundingClientRect = (el: SVGSVGElement | null) => {
   const rect = el?.getBoundingClientRect();
   const offsetX = rect?.left || 0;

website/package.json

@@ -8,6 +8,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@uiw/copy-to-clipboard": "^1.0.16",
     "@uiw/react-markdown-preview-example": "^2.0.0",
     "@uiw/react-signature": "1.0.0",
     "react": "^18.2.0",