feat: add canvas component.

Author: jaywcjlove

core/README.md

@@ -32,6 +32,33 @@ export default function App() {
 }
 ```
 
+## Canvas
+
+**Experimental** components
+
+```jsx mdx:preview
+import React, { useRef } from "react";
+import Signature from '@uiw/react-signature/canvas';
+
+
+const points = {
+  "path-1": [[83.52734375,63.6015625],[83.22265625,64.02734375],[81.86328125,66.0390625],[78.69140625,70.90625],[72.76171875,80.44140625],[67.01171875,91.421875],[64.5390625,98.19921875],[63.83203125,101.25390625],[63.640625,102.5078125],[63.62109375,102.7109375],[63.96484375,102.22265625],[64.890625,100.87890625],[66.3671875,98.515625]],
+  "path-2": [[116.5546875,65.8359375],[117.3125,65.8359375],[119.23046875,65.90625],[122.078125,66.39453125],[125.44140625,67.51171875],[128.33203125,69.2421875],[130.6484375,71.53515625],[131.94140625,73.6796875],[132.28125,75.65234375],[132.0625,77.5],[130.33203125,79.78125],[126.4921875,83.24609375],[120.9375,87.5234375],[114.859375,91.13671875],[108.09765625,93.66796875],[101.8359375,94.7734375],[96.26953125,94.7734375],[92.23828125,94.90625],[89.94921875,94.96484375],[88.234375,95.04296875],[88.03515625,95.08984375],[89.6015625,95.4296875],[94.75,96.640625],[107.55859375,98.640625],[123.6171875,100.09375],[135.5546875,100.734375],[141.140625,101.03515625],[142.2578125,101.08984375]]
+}
+
+export default function App() {
+  const $canvas = useRef(null);
+  const handle = (evn) => $canvas.current?.clear();
+  return (
+    <>
+      <Signature ref={$canvas} width="450" height="230" defaultPoints={points} />
+      <br />
+      <button onClick={handle}>Clear</button>
+    </>
+  );
+}
+```
+
 ## Readonly
 
 ```jsx mdx:preview
@@ -209,6 +236,34 @@ export type SignatureRef = {
 export default function Signature(props?: SignatureProps): React.JSX.Element;
 ```
 
+## Canvas Props
+
+**Experimental** components props
+
+```ts
+import React from 'react';
+import { type StrokeOptions } from 'perfect-freehand';
+import { type Dispatch } from '@uiw/react-signature/esm/store';
+export * from 'perfect-freehand';
+export * from '@uiw/react-signature/esm/utils';
+export * from '@uiw/react-signature/esm/options';
+export * from '@uiw/react-signature/esm/store';
+export interface SignatureProps extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
+  prefixCls?: string;
+  options?: StrokeOptions;
+  readonly?: boolean;
+  defaultPoints?: Record<string, number[][]>;
+  onPointer?: (points: number[][]) => void;
+}
+export type SignatureCanvasRef = {
+  canvas: HTMLCanvasElement | null;
+  dispatch: Dispatch;
+  clear: () => void;
+};
+const Signature: React.ForwardRefExoticComponent<SignatureProps & React.RefAttributes<SignatureCanvasRef>>;
+export default Signature;
+```
+
 ### Options
 
 The options object is optional, as are each of its properties.

core/canvas.d.ts

@@ -0,0 +1,24 @@
+declare module '@uiw/react-signature/canvas' {
+  import React from 'react';
+  import { type StrokeOptions } from 'perfect-freehand';
+  import { type Dispatch } from '@uiw/react-signature/esm/store';
+  export * from 'perfect-freehand';
+  export * from '@uiw/react-signature/esm/utils';
+  export * from '@uiw/react-signature/esm/options';
+  export * from '@uiw/react-signature/esm/store';
+  export type SignatureCanvasRef = {
+    canvas: HTMLCanvasElement | null;
+    dispatch: Dispatch;
+    clear: () => void;
+  };
+  export interface SignatureProps extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
+    prefixCls?: string;
+    options?: StrokeOptions;
+    readonly?: boolean;
+    defaultPoints?: Record<string, number[][]>;
+    renderPath?: (d: string, keyName: string, point: number[][], index: number) => JSX.Element;
+    onPointer?: (points: number[][]) => void;
+  }
+  const Signature: React.ForwardRefExoticComponent<SignatureProps & React.RefAttributes<SignatureCanvasRef>>;
+  export default Signature;
+}

core/package.json

@@ -12,9 +12,24 @@
   "license": "MIT",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
+  "exports": {
+    "./README.md": "./README.md",
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./esm/index.js",
+      "types": "./cjs/index.d.ts",
+      "require": "./cjs/index.js"
+    },
+    "./canvas": {
+      "import": "./esm/canvas/index.js",
+      "types": "./cjs/canvas/index.d.ts",
+      "require": "./cjs/canvas/index.js"
+    }
+  },
   "files": [
     "dist.css",
     "dist",
+    "canvas.d.ts",
     "cjs",
     "esm",
     "src"

core/src/canvas/Paths.tsx

@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import { getStroke } from 'perfect-freehand';
+import { useStore } from '../store';
+import { useOptionStore } from '../options';
+import { getSvgPathFromStroke } from '../utils';
+
+export const Paths = () => {
+  const data = useStore();
+  const { container, ...option } = useOptionStore();
+
+  const canvas = container as unknown as HTMLCanvasElement;
+  const ctx = canvas?.getContext('2d');
+  useEffect(() => {
+    if (!canvas) return;
+    if (ctx) {
+      ctx?.clearRect(0, 0, canvas.width || 0, canvas.height || 0);
+    }
+    Object.keys(data).forEach((key, index) => {
+      const stroke = getStroke(data[key], option);
+      const pathData = getSvgPathFromStroke(stroke);
+      if (ctx) {
+        const myPath = new Path2D(pathData);
+        ctx.fillStyle = 'black';
+        ctx.beginPath();
+        ctx.fill(myPath);
+      }
+    });
+  }, [data, canvas, option]);
+  return null;
+};

core/src/canvas/Signature.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useRef, useId, forwardRef, useImperativeHandle } from 'react';
+import { getBoundingClientRect, getClinetXY, useEvent } from '../utils';
+
+import { SignatureCanvasRef, SignatureProps } from '.';
+import { useDispatch } from '../store';
+import { useOptionDispatch } from '../options';
+
+export const defaultStyle: React.CSSProperties = {
+  '--w-signature-background': '#fff',
+  touchAction: 'none',
+  position: 'relative',
+  backgroundColor: 'var(--w-signature-background)',
+} as React.CSSProperties;
+
+export const Signature = forwardRef<SignatureCanvasRef, SignatureProps>((props, ref) => {
+  const {
+    className,
+    prefixCls = 'w-signature',
+    style,
+    readonly = false,
+    onPointer,
+    options,
+    children,
+    ...others
+  } = props;
+  const cls = [className, prefixCls].filter(Boolean).join(' ');
+  const $canvas = useRef<HTMLCanvasElement>(null);
+  const $path = useRef<SVGPathElement>();
+  const pointsRef = useRef<number[][]>();
+  const pointCount = useRef<number>(0);
+  const pointId = useId();
+  const dispatch = useDispatch();
+  const dispatchOption = useOptionDispatch();
+  useImperativeHandle<SignatureCanvasRef, SignatureCanvasRef>(
+    ref,
+    () => ({
+      canvas: $canvas.current,
+      dispatch,
+      clear: () => {
+        dispatch({});
+        const ctx = $canvas.current?.getContext('2d');
+        ctx?.clearRect(0, 0, $canvas.current?.width || 0, $canvas.current?.height || 0);
+      },
+    }),
+    [$canvas.current, dispatch],
+  );
+
+  const handlePointerDown = useEvent((e: React.PointerEvent<HTMLCanvasElement>) => {
+    if (readonly) return;
+    pointCount.current += 1;
+    const { offsetY, offsetX } = getBoundingClientRect($canvas.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;
+    $canvas.current!.appendChild(pathElm);
+    dispatch({
+      [pointId + pointCount.current]: pointsRef.current,
+    });
+  });
+
+  const handlePointerMove = useEvent((e: PointerEvent) => {
+    if ($path.current) {
+      const { offsetY, offsetX } = getBoundingClientRect($canvas.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;
+  });
+
+  useEffect(() => {
+    if ($canvas.current) {
+      dispatchOption({ container: $canvas.current });
+    }
+    if (readonly) return;
+    document.addEventListener('pointermove', handlePointerMove);
+    document.addEventListener('pointerup', handlePointerUp);
+    return () => {
+      if (readonly) return;
+      document.removeEventListener('pointermove', handlePointerMove);
+      document.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, []);
+  return (
+    <canvas
+      {...others}
+      ref={$canvas}
+      className={cls}
+      onPointerDown={handlePointerDown}
+      style={{ ...defaultStyle, ...style }}
+    >
+      {children}
+    </canvas>
+  );
+});

core/src/canvas/index.tsx

@@ -0,0 +1,49 @@
+import React, { useReducer, forwardRef, useEffect } from 'react';
+import { type StrokeOptions } from 'perfect-freehand';
+import { PointerContext, PointerDispatchContext, reducer, type Dispatch } 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 * from '../store';
+
+export type SignatureCanvasRef = {
+  canvas: HTMLCanvasElement | null;
+  dispatch: Dispatch;
+  clear: () => void;
+};
+
+export interface SignatureProps extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
+  prefixCls?: string;
+  options?: StrokeOptions;
+  readonly?: boolean;
+  defaultPoints?: Record<string, number[][]>;
+  onPointer?: (points: number[][]) => void;
+}
+
+const Signature = forwardRef<SignatureCanvasRef, 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 (
+      <PointerContext.Provider value={state}>
+        <PointerDispatchContext.Provider value={dispatch}>
+          <OptionContext.Provider value={stateOption}>
+            <OptionDispatchContext.Provider value={dispatchOption}>
+              <Container {...props} ref={ref}>
+                {children}
+              </Container>
+              <Paths />
+            </OptionDispatchContext.Provider>
+          </OptionContext.Provider>
+        </PointerDispatchContext.Provider>
+      </PointerContext.Provider>
+    );
+  },
+);
+
+export default Signature;