@kne/react-pdf-sign 1.0.0 → 1.0.1

package/dist/index.modern.js

@@ -8,13 +8,14 @@ import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import 'react-pdf/dist/Page/TextLayer.css';
 import 'react-pdf/dist/Page/AnnotationLayer.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Stage, Layer, Group, Image, Rect, Text, Transformer } from 'react-konva';
+import { Stage, Layer, Group, Image as Image$1, Rect, Text, Transformer } from 'react-konva';
 import useControlValue from '@kne/use-control-value';
 import useRefCallback from '@kne/use-ref-callback';
 import useImage from 'use-image';
 import { createWithIntlProvider, useIntl } from '@kne/react-intl';
 import { PDFDocument } from 'pdf-lib';
 import SignatureCanvas from 'react-signature-canvas';
+import { snapdom } from '@zumer/snapdom';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -35,7 +36,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-var style = {"pdf-view-container":"_RgZXN","pdf-view":"_PAju1","pdf-view-children":"_N11Pj","pdf-view-page-control-left":"_IbVpf","pdf-view-page-control-right":"_IIgqj","pdf-view-page-control-current":"_JW3CT","signature-container":"_6TDb-","signature-canvas":"_2CGF4","signature-modal":"_kWe3k"};
+var style = {"pdf-view-container":"_RgZXN","pdf-view":"_PAju1","pdf-view-children":"_N11Pj","pdf-view-page-control-left":"_IbVpf","pdf-view-page-control-right":"_IIgqj","pdf-view-page-control-current":"_JW3CT","signature-container":"_6TDb-","signature-canvas":"_2CGF4","signature-modal":"_kWe3k","signature-mask":"_FSvLv"};
 
 const _excluded$3 = ["numPages"];
 const PDFViewer = ({
@@ -173,7 +174,7 @@ const LocationLayer = withLocale(p => {
   } = useIntl();
   const {
       width = 200,
-      height = 50,
+      height = 80,
       padding = 8,
       stageWidth,
       stageHeight,
@@ -188,6 +189,7 @@ const LocationLayer = withLocale(p => {
   const [signatureImage] = useImage(signature);
   const groupRef = useRef();
   const signRef = useRef();
+  const targetRef = useRef();
   const transformerRef = useRef();
   const computedSignLocation = () => {
     const absolutePosition = signRef.current.absolutePosition();
@@ -235,7 +237,7 @@ const LocationLayer = withLocale(p => {
   }, []);
   useEffect(() => {
     if (isInit) {
-      transformerRef.current.nodes([groupRef.current]);
+      transformerRef.current.nodes([targetRef.current]);
     }
   }, [isInit]);
   if (!(isInit && value)) {
@@ -251,19 +253,22 @@ const LocationLayer = withLocale(p => {
         draggable: true,
         ref: groupRef,
         onDragEnd: computedSignLocation,
-        onTransformEnd: computedSignLocation,
-        children: [signatureImage ? /*#__PURE__*/jsx(Image, {
-          width: width,
-          height: height,
-          image: signatureImage,
-          cornerRadius: 8,
-          ref: signRef
-        }) : /*#__PURE__*/jsx(Rect, {
-          width: width,
-          height: height,
-          fill: "#f0f0f0",
-          cornerRadius: 8,
-          ref: signRef
+        children: [/*#__PURE__*/jsx(Group, {
+          ref: targetRef,
+          onTransformEnd: computedSignLocation,
+          children: signatureImage ? /*#__PURE__*/jsx(Image$1, {
+            width: width,
+            height: height,
+            image: signatureImage,
+            cornerRadius: 8,
+            ref: signRef
+          }) : /*#__PURE__*/jsx(Rect, {
+            width: width,
+            height: height,
+            fill: "#f0f0f0",
+            cornerRadius: 8,
+            ref: signRef
+          })
         }), /*#__PURE__*/jsx(Text, {
           text: signatureImage ? '' : placeholder,
           fontSize: 16,
@@ -285,8 +290,7 @@ const LocationLayer = withLocale(p => {
         borderStroke: themeColor,
         rotateAnchorStroke: themeColor,
         anchorStroke: themeColor,
-        padding: padding,
-        enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+        padding: padding
       })]
     })
   });
@@ -2497,7 +2501,36 @@ function isEqual(value, other) {
 
 var isEqual_1 = isEqual;
 
-const _excluded$1 = ["placeholder", "signature", "url", "width", "height", "padding", "filename"];
+const signPdfFile = async pdfSignature => {
+  const {
+    x,
+    y,
+    page,
+    width,
+    height,
+    signature,
+    url,
+    filename
+  } = pdfSignature;
+  const response = await window.fetch(url);
+  const pdfBytes = await response.arrayBuffer();
+  const pdfDoc = await PDFDocument.load(pdfBytes);
+  const pdfPage = pdfDoc.getPage(page - 1);
+  const signatureBytes = await window.fetch(signature).then(res => res.arrayBuffer());
+  const signatureImageEmbed = await pdfDoc.embedPng(signatureBytes);
+  pdfPage.drawImage(signatureImageEmbed, {
+    x,
+    y,
+    width,
+    height
+  });
+  const modifiedPdfBytes = await pdfDoc.save();
+  return new window.File([modifiedPdfBytes], filename, {
+    type: 'application/pdf'
+  });
+};
+
+const _excluded$1 = ["placeholder", "signature", "url", "width", "height", "padding", "filename", "defaultLocation", "onChange"];
 const PDFSign = withLocale(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       placeholder,
@@ -2506,10 +2539,12 @@ const PDFSign = withLocale(/*#__PURE__*/forwardRef((_ref, ref) => {
       width,
       height,
       padding,
-      filename = 'signed-document.pdf'
+      filename = 'signed-document.pdf',
+      defaultLocation,
+      onChange
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  const [location, setLocation] = useState({});
+  const [location, setLocation] = useState(Object.assign({}, defaultLocation));
   const [pdfProps, setPdfProps] = useState(null);
   const {
     formatMessage
@@ -2526,49 +2561,28 @@ const PDFSign = withLocale(/*#__PURE__*/forwardRef((_ref, ref) => {
     const scaleY = size.height / size.originalHeight;
     const pdfX = Math.round(location.size.x / scaleX);
     const pdfY = Math.round(size.originalHeight - location.size.y / scaleY);
+    const signWidth = Math.round(location.size.width / scaleX);
+    const signHeight = Math.round(location.size.height / scaleY);
     return {
       x: pdfX,
-      y: pdfY - location.size.height,
+      y: pdfY - signHeight,
       page: currentPage,
-      pageWidth: size.originalWidth,
-      pageHeight: size.originalHeight,
-      width: location.size.width,
-      height: location.size.height,
+      pageWidth: Math.round(size.originalWidth),
+      pageHeight: Math.round(size.originalHeight),
+      width: signWidth,
+      height: signHeight,
       signature,
-      url
+      url,
+      filename
     };
-  }, [pdfProps, location, signature, url]);
+  }, [pdfProps, location, signature, url, filename]);
   const signPdf = useCallback(async () => {
     if (!pdfProps) {
       throw new Error(formatMessage({
         id: 'loadingError'
       }));
     }
-    const {
-      x,
-      y,
-      page,
-      width,
-      height,
-      signature,
-      url
-    } = pdfSignature;
-    const response = await window.fetch(url);
-    const pdfBytes = await response.arrayBuffer();
-    const pdfDoc = await PDFDocument.load(pdfBytes);
-    const pdfPage = pdfDoc.getPage(page - 1);
-    const signatureBytes = await window.fetch(signature).then(res => res.arrayBuffer());
-    const signatureImageEmbed = await pdfDoc.embedPng(signatureBytes);
-    pdfPage.drawImage(signatureImageEmbed, {
-      x,
-      y,
-      width,
-      height
-    });
-    const modifiedPdfBytes = await pdfDoc.save();
-    return new window.File([modifiedPdfBytes], filename, {
-      type: 'application/pdf'
-    });
+    return await signPdfFile(pdfSignature);
   }, [pdfSignature]);
   useImperativeHandle(ref, () => ({
     getLocation: () => location,
@@ -2576,6 +2590,13 @@ const PDFSign = withLocale(/*#__PURE__*/forwardRef((_ref, ref) => {
     getPdfSignature: () => pdfSignature,
     sign: () => signPdf()
   }));
+  const handlerChange = useRefCallback(onChange);
+  useEffect(() => {
+    handlerChange == null || handlerChange({
+      pdfSignature,
+      location
+    });
+  }, [pdfSignature, location, handlerChange]);
   return /*#__PURE__*/jsx(PDFViewer, _extends({}, props, {
     url: url,
     children: ({
@@ -2608,7 +2629,7 @@ const PDFSign = withLocale(/*#__PURE__*/forwardRef((_ref, ref) => {
   }));
 }));
 
-const _excluded = ["filename", "onSuccess"];
+const _excluded = ["filename", "onSuccess", "width", "height", "mask"];
 const dataURLtoBlob = dataURL => {
   let arr = dataURL.split(',');
   // 注意base64的最后面中括号和引号是不转译的
@@ -2629,7 +2650,8 @@ const Signature = withLocale(({
   onSuccess,
   filename,
   width,
-  height
+  height,
+  mask: _mask = null
 }) => {
   const {
     formatMessage
@@ -2638,22 +2660,27 @@ const Signature = withLocale(({
     message
   } = App.useApp();
   const signatureCanvasRef = useRef(null);
+  const maskRef = useRef(null);
   return /*#__PURE__*/jsxs(Flex, {
     vertical: true,
     gap: 12,
     className: classnames(style['signature-modal-content'], 'signature-modal-content'),
-    children: [/*#__PURE__*/jsx("div", {
+    children: [/*#__PURE__*/jsxs("div", {
       className: classnames(style['signature-container'], 'signature-container'),
       style: {
         width: '368px',
         height: `${Math.round(height * 368 / width)}px`
       },
-      children: /*#__PURE__*/jsx(SignatureCanvas, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(style['signature-mask'], 'signature-mask'),
+        ref: maskRef,
+        children: _mask
+      }), /*#__PURE__*/jsx(SignatureCanvas, {
         ref: signatureCanvasRef,
         canvasProps: {
           className: classnames(style['signature-canvas'], 'signature-canvas')
         }
-      })
+      })]
     }), /*#__PURE__*/jsxs(Flex, {
       justify: "flex-end",
       align: "center",
@@ -2667,14 +2694,32 @@ const Signature = withLocale(({
         })
       }), /*#__PURE__*/jsx(Button, {
         type: "primary",
-        onClick: () => {
+        onClick: async () => {
           if (signatureCanvasRef.current.isEmpty()) {
             message.error(formatMessage({
               id: 'signatureEmptyError'
             }));
             return;
           }
-          const file = new window.File([dataURLtoBlob(signatureCanvasRef.current.toDataURL('image/png'))], filename, {
+          let result = signatureCanvasRef.current.toDataURL('image/png');
+          if (_mask) {
+            const maskPng = await snapdom.toPng(maskRef.current, {
+              scale: 2
+            });
+            const canvas = document.createElement('canvas');
+            canvas.width = width * 2;
+            canvas.height = height * 2;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(maskPng, 0, 0, canvas.width, canvas.height);
+            const resultImage = new Image();
+            resultImage.src = result;
+            await new Promise(resolve => {
+              resultImage.onload = resolve;
+            });
+            ctx.drawImage(resultImage, 0, 0, canvas.width, canvas.height);
+            result = canvas.toDataURL('image/png');
+          }
+          const file = new window.File([dataURLtoBlob(result)], filename, {
             type: 'image/png'
           });
           onClose();
@@ -2697,24 +2742,18 @@ const Title = withLocale(() => {
     })
   });
 });
-const useSignature = props => {
+const useSignature = () => {
   const {
-    width,
-    height
-  } = Object.assign({}, {
-    width: 200,
-    height: 50
-  }, props);
-  const {
-    modal,
-    message
+    modal
   } = App.useApp();
-  useRef(null);
   return props => {
     const _Object$assign = Object.assign({}, props),
       {
         filename = 'signature.png',
-        onSuccess
+        onSuccess,
+        width = 200,
+        height = 80,
+        mask
       } = _Object$assign,
       modalProps = _objectWithoutPropertiesLoose(_Object$assign, _excluded);
     const modalApi = modal.info(Object.assign({}, {
@@ -2729,6 +2768,7 @@ const useSignature = props => {
       content: /*#__PURE__*/jsx(Signature, {
         width: width,
         height: height,
+        mask: mask,
         filename: filename,
         onSuccess: onSuccess,
         onClose: () => {